docs-v2/assets/styles/layouts/article/_tables.scss

98 lines
1.9 KiB
SCSS

//////////////////////////////////// Tables ////////////////////////////////////
table {
display: inline-block;
margin: 1rem 1rem 3rem 0;
border-spacing: 0;
color: $article-text;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
box-shadow: 1px 3px 10px $article-shadow;
border-radius: ($radius);
th, td {
padding: .85rem 1.25rem;
}
thead {
@include gradient($article-table-header, 90deg);
background-attachment: fixed;
}
th {
color: $g20-white;
strong { color: $g20-white; }
&:first-child {
border-radius: ($radius) 0 0 0;
}
&:last-child {
border-radius: 0 ($radius) 0 0;
}
}
td {
font-size: 1.05rem;
line-height: 1.5em;
code {font-size: .95rem;}
}
tr{
&:nth-child(even) {
background: $article-table-row-alt;
}
&:last-child {
td {
&:first-child { border-radius: 0 0 0 ($radius); }
&:last-child { border-radius: 0 0 ($radius) 0; }
}
}
}
img { margin-bottom: 0; }
&.cloud-urls {
a { white-space: nowrap; }
p {
margin: 0 0 .5rem 0;
&:last-child { margin-bottom: 0 }
}
.cluster-name { font-weight: $medium; color: $article-bold; }
}
}
table + table {
margin-top: -1.5rem;
}
// Adjust spacing to push long-hand and short-hand columns closer together
#flags:not(.no-shorthand),
#global-flags,
.shorthand-flags {
& + table {
td:nth-child(2) code { margin-left: -2rem; }
}
}
p.table-group-key {
margin: 1rem 0 -.75rem;
font-weight: $medium;
font-size: .95rem;
}
table + .table-group-key {
margin-top: -2rem;
}
// Reverse the order of InfluxDB version rows in Flux versions table
// Hugo doesn't support sorting maps (objects) by keys
table.flux-influxdb-versions tbody {
display: flex;
flex-direction: column-reverse;
tr {
display: flex;
justify-content: space-between;
}
}