mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
2d8635d29d
To increase the ease of development we are moving @angular/docs into the adev directory within this repo. While we are doing this to improve our development experience in the short term, efforts are also in place to maintain a division between this @angular/docs (shared) code and adev itself, so that it can be extracted back out in the future when components is ready to leverage it as well. PR Close #57132
102 lines
2.1 KiB
SCSS
102 lines
2.1 KiB
SCSS
@mixin api-item-label() {
|
|
.docs-api-item-label {
|
|
--label-theme: var(--symbolic-purple);
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: 500;
|
|
color: var(--label-theme);
|
|
background: color-mix(in srgb, var(--label-theme) 10%, white);
|
|
border-radius: 0.25rem;
|
|
transition:
|
|
color 0.3s ease,
|
|
background-color 0.3s ease;
|
|
text-transform: capitalize;
|
|
|
|
&[data-mode='short'] {
|
|
height: 22px;
|
|
width: 22px;
|
|
}
|
|
|
|
&[data-mode='full'] {
|
|
font-size: 0.75rem;
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
|
|
a {
|
|
color: var(--label-theme);
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
@media screen and (prefers-color-scheme: dark) {
|
|
background: color-mix(in srgb, var(--label-theme) 17%, #272727);
|
|
}
|
|
|
|
.docs-dark-mode & {
|
|
background: color-mix(in srgb, var(--label-theme) 17%, #272727);
|
|
}
|
|
|
|
.docs-light-mode & {
|
|
background: color-mix(in srgb, var(--label-theme) 10%, white);
|
|
}
|
|
|
|
&[data-type='undecorated_class'],
|
|
&[data-type='class'] {
|
|
--label-theme: var(--symbolic-purple);
|
|
}
|
|
|
|
&[data-type='constant'],
|
|
&[data-type='const'] {
|
|
--label-theme: var(--symbolic-gray);
|
|
}
|
|
|
|
&[data-type='decorator'] {
|
|
--label-theme: var(--symbolic-blue);
|
|
}
|
|
|
|
&[data-type='directive'] {
|
|
--label-theme: var(--symbolic-pink);
|
|
}
|
|
|
|
&[data-type='element'] {
|
|
--label-theme: var(--symbolic-orange);
|
|
}
|
|
|
|
&[data-type='enum'] {
|
|
--label-theme: var(--symbolic-yellow);
|
|
}
|
|
|
|
&[data-type='function'] {
|
|
--label-theme: var(--symbolic-green);
|
|
}
|
|
|
|
&[data-type='interface'] {
|
|
--label-theme: var(--symbolic-cyan);
|
|
}
|
|
|
|
&[data-type='pipe'] {
|
|
--label-theme: var(--symbolic-teal);
|
|
}
|
|
|
|
&[data-type='ng_module'] {
|
|
--label-theme: var(--symbolic-brown);
|
|
}
|
|
|
|
&[data-type='type_alias'] {
|
|
--label-theme: var(--symbolic-lime);
|
|
}
|
|
|
|
&[data-type='block'] {
|
|
--label-theme: var(--vivid-pink);
|
|
}
|
|
|
|
&[data-type='developer_preview'],
|
|
&[data-type='deprecated'] {
|
|
--label-theme: var(--hot-red);
|
|
}
|
|
}
|
|
}
|