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.
pull/1205/head
Richard van der Hoff 2 years ago committed by GitHub
parent 9093a5f16f
commit ef384f1afd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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;

@ -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 {
// the caption is outside the table's border box,
// so we have to give it its own border.
border: 1px $table-border-color solid;
// ... but avoid double border between caption and table
border-bottom: 0;
}
caption, tr {
caption, tbody tr {
background-color: $table-row-default;
}
tr:nth-child(even) {
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 {

@ -0,0 +1 @@
Give rendered-data sections a background and some padding.

@ -21,7 +21,7 @@
{{ if $properties }}
<table{{ if .anchor }} id="{{ .anchor }}"{{ end }}>
<table{{ if .anchor }} id="{{ .anchor }}"{{ end }} class="object-table">
{{ with $title }}
<caption>{{ . }}</caption>
{{ end }}

@ -20,7 +20,7 @@
<h2>Responses</h2>
<table class>
<table class="response-table">
<thead>
<th class="col-status">Status</th>
<th class="col-status-description">Description</th>

Loading…
Cancel
Save