refactor(docs-infra): merge `.api-body` style blocks (#31574)
This commit merges the two `.api-body` style blocks, removing duplicate styles and re-ordering sub-blocks (to group relevant styles together). It should not affect styling. PR Close #31574
This commit is contained in:
George Kalpakas
Matias Niemelä
parent
7bd5368d8b
commit
d8f9ec5291
|
|
@ -1,181 +1,9 @@
|
|||
.api-body {
|
||||
max-width: 1200px;
|
||||
|
||||
table {
|
||||
margin: 12px 0 24px;
|
||||
|
||||
&.item-table {
|
||||
td {
|
||||
padding: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&.list-table {
|
||||
td {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&.parameters-table {
|
||||
margin-top: 0;
|
||||
@include font-size(14);
|
||||
box-shadow: none;
|
||||
|
||||
tr {
|
||||
@media screen and (max-width: 480px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
font-weight: 600;
|
||||
padding-left: 16px;
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 8px 8px 8px 0;
|
||||
border: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
&.property-table {
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
text-transform: none;
|
||||
@include font-size(16);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid $lightgray;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// This is overriding a style here:
|
||||
// https://github.com/angular/angular/blob/95993e1/aio/src/styles/2-modules/_table.scss#L58-L62
|
||||
tbody > tr > td tr td:first-child {
|
||||
@media screen and (max-width: 480px) {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.short-description {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.class-overview {
|
||||
position: relative;
|
||||
|
||||
code-example {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
|
||||
.member-name .pln {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.short-description {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
.github-links {
|
||||
float: right;
|
||||
|
||||
.material-icons {
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
@include font-size(20);
|
||||
|
||||
&:hover {
|
||||
background-color: $mist;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.api-body {
|
||||
.class-overview {
|
||||
position: relative;
|
||||
|
||||
code-example {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
|
||||
.method-table,
|
||||
.option-table,
|
||||
.list-table {
|
||||
td > code {
|
||||
background-color: inherit;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.with-github-links {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.github-links {
|
||||
a {
|
||||
color: $mediumgray;
|
||||
|
||||
.material-icons:hover {
|
||||
background: none;
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 6px 0;
|
||||
font-weight: 500;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include font-size(14);
|
||||
font-weight: bold;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.api-heading {
|
||||
@include font-size(14);
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.parameters-table {
|
||||
margin-top: 0;
|
||||
@include font-size(14);
|
||||
td:nth-child(1) {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
details.overloads {
|
||||
box-shadow: none;
|
||||
|
|
@ -234,6 +62,146 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 12px 0 24px;
|
||||
|
||||
&.item-table {
|
||||
td {
|
||||
padding: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&.list-table {
|
||||
td {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&.parameters-table {
|
||||
margin-top: 0;
|
||||
@include font-size(14);
|
||||
box-shadow: none;
|
||||
|
||||
tr {
|
||||
@media screen and (max-width: 480px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
font-weight: 600;
|
||||
padding-left: 16px;
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 8px 8px 8px 0;
|
||||
border: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
&.property-table {
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
&.method-table,
|
||||
&.option-table,
|
||||
&.list-table {
|
||||
td > code {
|
||||
background-color: inherit;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.with-github-links {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.github-links {
|
||||
a {
|
||||
color: $mediumgray;
|
||||
|
||||
.material-icons:hover {
|
||||
background: none;
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 6px 0;
|
||||
font-weight: 500;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include font-size(14);
|
||||
font-weight: bold;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
text-transform: none;
|
||||
@include font-size(16);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid $lightgray;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// This is overriding a style here:
|
||||
// https://github.com/angular/angular/blob/95993e1/aio/src/styles/2-modules/_table.scss#L58-L62
|
||||
tbody > tr > td tr td:first-child {
|
||||
@media screen and (max-width: 480px) {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.short-description {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.class-overview {
|
||||
position: relative;
|
||||
|
||||
code-example {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
|
||||
.member-name .pln {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.short-description {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.api-heading {
|
||||
@include font-size(14);
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.from-constructor,
|
||||
.read-only-property,
|
||||
.write-only-property {
|
||||
|
|
@ -273,6 +241,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
.github-links {
|
||||
float: right;
|
||||
|
||||
.material-icons {
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
@include font-size(20);
|
||||
|
||||
&:hover {
|
||||
background-color: $mist;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
|
|||
Loading…
Reference in New Issue