refactor(docs-infra): move common .symbol
styles to _api-symbols.scss
(#40704)
The `.symbol` CSS class (which is primarily used to denote the type of API symbols - classes, functions, interfaces, etc.) are used in several places: - In the API list page (with the corresponding styles defined in `_api-list.scss`). - In search results (with the corresponding styles defined in `_errors.scss`). - In error list page (with the corresponding styles defined in `search-results.scss`). - In the `<aio-select>` component (with the corresponding styles defined in `_select-menu.scss`). Previously, global styles for `.symbol` were defined in `_api-list.scss` (i.e. the styles from `_api-list.scss` were also applied to `.symbol` elements in other places/components). Also, some of the SCSS files mentioned above defined some duplicate styles for `.symbol`. This commit moves the `.symbol` styles to a new `_api-symbols.scss` file, which contains common symbol-related styles. PR Close #40704
This commit is contained in:
parent
bf63d92ea6
commit
60f6e177b8
@ -45,10 +45,6 @@ aio-api-list {
|
|||||||
@media screen and (max-width: 600px) {
|
@media screen and (max-width: 600px) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.symbol {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-select-menu,
|
.form-select-menu,
|
||||||
@ -104,10 +100,6 @@ aio-api-list {
|
|||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
.symbol {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $blue-grey-600;
|
color: $blue-grey-600;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -180,34 +172,6 @@ aio-api-list {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* API SYMBOLS */
|
|
||||||
|
|
||||||
/* SYMBOL CLASS */
|
|
||||||
|
|
||||||
.symbol {
|
|
||||||
border-radius: 2px;
|
|
||||||
box-shadow: 0 1px 2px rgba($black, .24);
|
|
||||||
color: $white;
|
|
||||||
display: inline-block;
|
|
||||||
@include font-size(10);
|
|
||||||
font-weight: 600;
|
|
||||||
@include line-height(16);
|
|
||||||
text-align: center;
|
|
||||||
width: 16px;
|
|
||||||
|
|
||||||
// SYMBOL TYPES
|
|
||||||
// Symbol mapping variables in *constants*
|
|
||||||
@each $name, $symbol in $api-symbols {
|
|
||||||
&.#{$name} {
|
|
||||||
background: map-get($symbol, background);
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: map-get($symbol, content);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-anchor {
|
.code-anchor {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
28
aio/src/styles/2-modules/_api-symbols.scss
Normal file
28
aio/src/styles/2-modules/_api-symbols.scss
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
/* API SYMBOLS */
|
||||||
|
|
||||||
|
/* SYMBOL CLASS */
|
||||||
|
|
||||||
|
.symbol {
|
||||||
|
border-radius: 2px;
|
||||||
|
box-shadow: 0 1px 2px rgba($black, .24);
|
||||||
|
color: $white;
|
||||||
|
display: inline-block;
|
||||||
|
@include font-size(10);
|
||||||
|
font-weight: 600;
|
||||||
|
@include line-height(16);
|
||||||
|
margin-right: 8px;
|
||||||
|
text-align: center;
|
||||||
|
width: 16px;
|
||||||
|
|
||||||
|
// SYMBOL TYPES
|
||||||
|
// Symbol mapping variables in *constants*
|
||||||
|
@each $name, $symbol in $api-symbols {
|
||||||
|
&.#{$name} {
|
||||||
|
background: map-get($symbol, background);
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: map-get($symbol, content);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -21,8 +21,6 @@
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
.symbol {
|
.symbol {
|
||||||
margin-right: 8px;
|
|
||||||
|
|
||||||
&.runtime {
|
&.runtime {
|
||||||
background: $green-500;
|
background: $green-500;
|
||||||
}
|
}
|
||||||
|
@ -5,6 +5,7 @@
|
|||||||
@import 'alert';
|
@import 'alert';
|
||||||
@import 'api-list';
|
@import 'api-list';
|
||||||
@import 'api-pages';
|
@import 'api-pages';
|
||||||
|
@import 'api-symbols';
|
||||||
@import 'buttons';
|
@import 'buttons';
|
||||||
@import 'callout';
|
@import 'callout';
|
||||||
@import 'card';
|
@import 'card';
|
||||||
|
@ -51,10 +51,6 @@ aio-search-results {
|
|||||||
&:hover {
|
&:hover {
|
||||||
color: $white;
|
color: $white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.symbol {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.priority-pages {
|
&.priority-pages {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user