mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
107 lines
2.1 KiB
SCSS
107 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;
|
|
|
|
&:not(.full) {
|
|
height: 22px;
|
|
width: 22px;
|
|
flex: 0 0 22px;
|
|
}
|
|
|
|
&.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);
|
|
}
|
|
|
|
&.type-undecorated_class,
|
|
&.type-class {
|
|
--label-theme: var(--symbolic-purple);
|
|
}
|
|
|
|
&.type-constant,
|
|
&.type-const {
|
|
--label-theme: var(--symbolic-gray);
|
|
}
|
|
|
|
&.type-decorator {
|
|
--label-theme: var(--symbolic-blue);
|
|
}
|
|
|
|
&.type-directive {
|
|
--label-theme: var(--symbolic-pink);
|
|
}
|
|
|
|
&.type-element {
|
|
--label-theme: var(--symbolic-orange);
|
|
}
|
|
|
|
&.type-enum {
|
|
--label-theme: var(--symbolic-yellow);
|
|
}
|
|
|
|
&.type-function {
|
|
--label-theme: var(--symbolic-green);
|
|
}
|
|
|
|
&.type-interface {
|
|
--label-theme: var(--symbolic-cyan);
|
|
}
|
|
|
|
&.type-pipe {
|
|
--label-theme: var(--symbolic-teal);
|
|
}
|
|
|
|
&.type-impure-pipe {
|
|
--label-theme: var(--symbolic-pink);
|
|
}
|
|
|
|
&.type-ng_module {
|
|
--label-theme: var(--symbolic-brown);
|
|
}
|
|
|
|
&.type-type_alias {
|
|
--label-theme: var(--symbolic-lime);
|
|
}
|
|
|
|
&.type-block {
|
|
--label-theme: var(--vivid-pink);
|
|
}
|
|
|
|
&.type-developer_preview,
|
|
&.type-deprecated {
|
|
--label-theme: var(--hot-red);
|
|
}
|
|
}
|
|
}
|