Give rendered-data sections a background and some padding (#1195)

Gives definition sections for APIs, events, etc a background and a small indent, which I find very helpful to guide the eye.
This commit is contained in:
Richard van der Hoff 2022-08-04 10:46:11 +01:00 committed by GitHub
parent 9093a5f16f
commit ef384f1afd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 26 additions and 14 deletions

View file

@ -30,6 +30,9 @@ $note: $secondary;
$note-background: $secondary-background;
$warning-background: #FFE0E0;
// colours for definition tables.
// the border colour matches that used for "highlight" divs
$table-border-color: rgba(black, .125);
$table-row-alternate: $secondary-lightest-background;
$table-row-default: $secondary-lighter-background;

View file

@ -264,13 +264,13 @@ footer {
/* Styles for sections that are rendered from data, such as HTTP APIs and event schemas */
.rendered-data {
margin: 1rem 0 3rem 0;
background-color: $secondary-lightest-background;
padding: 1rem;
margin: 1rem 0;
details {
summary {
padding: .5rem 0;
list-style-position: outside;
p {
max-width: 80%;
}
@ -336,22 +336,30 @@ footer {
padding: 1rem;
}
th {
background-color: $white;
}
&.object-table, &.response-table {
border: 1px $table-border-color solid;
caption, tr {
background-color: $table-row-default;
}
caption {
// the caption is outside the table's border box,
// so we have to give it its own border.
border: 1px $table-border-color solid;
tr:nth-child(even) {
background-color: $table-row-alternate;
// ... but avoid double border between caption and table
border-bottom: 0;
}
caption, tbody tr {
background-color: $table-row-default;
}
tbody tr:nth-child(even) {
background-color: $table-row-alternate;
}
}
&.basic-info, &.basic-info th, &.basic-info td {
table-layout: fixed;
margin: 1rem 0 .5rem 0;
background-color: $white;
}
&.basic-info th {