fix(aio): tidy up API doc styles (#24000)

* Code anchors should inherit the font size from their container
* Table headings should align with content

PR Close #24000
This commit is contained in:
Pete Bacon Darwin 2018-05-23 22:13:28 +01:00 committed by Miško Hevery
parent 8a4c577917
commit 66f6a48210
5 changed files with 47 additions and 84 deletions

View File

@ -1,79 +0,0 @@
.api-section {
position: relative;
pre {
white-space: pre-wrap;
}
table.api-table {
min-width: 680px;
thead th {
color: white;
font-size: 16px;
background-color: $blue;
border-radius: 4px 4px 0 0;
text-transform: none;
padding: 8px 24px;
}
tbody {
pre {
white-space: normal;
margin: 4px;
padding: 4px 16px;
}
td, th {
padding: 0;
}
th {
max-width: 150px;
}
}
}
}
.api-body {
max-width: 1200px;
table {
th {
text-transform: none;
font-size: 16px;
font-weight: bold;
}
tr {
border-bottom: 1px solid $lightgray;
}
td {
vertical-align: middle;
}
hr {
margin: 16px 0;
}
tr:last-child {
border-bottom: none;
}
&.item-table {
td {
padding: 32px;
}
}
&.list-table {
td {
padding: 16px 24px;
}
}
}
}

View File

@ -0,0 +1,41 @@
.api-body {
max-width: 1200px;
table {
th {
text-transform: none;
font-size: 16px;
font-weight: bold;
}
tr {
border-bottom: 1px solid $lightgray;
}
td {
vertical-align: middle;
}
hr {
margin: 16px 0;
}
tr:last-child {
border-bottom: none;
}
&.item-table {
td {
padding: 32px;
}
}
&.list-table {
td {
padding: 16px 24px;
}
}
}
}

View File

@ -2,7 +2,7 @@
LAYOUT STYLES
============================== */
@import 'api-page';
@import 'api-pages';
@import 'content-layout';
@import 'doc-viewer';
@import 'footer';

View File

@ -280,6 +280,7 @@ p {
.code-anchor {
cursor: pointer;
text-decoration: none;
font-size: inherit;
&:hover {
text-decoration: underline;

View File

@ -31,6 +31,10 @@
}
.method-table, .option-table {
th {
padding: 8px 16px;
}
h3 {
margin: 6px 0;
font-weight: bold;
@ -87,10 +91,6 @@
}
}
.api-section aio-code {
background-color: rgba(241, 241, 241, 0.2);
}
.from-constructor, .read-only-property {
font-style: italic;
color: $blue;