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
56 lines
1.5 KiB
SCSS
56 lines
1.5 KiB
SCSS
@mixin faceted-list() {
|
|
.docs-faceted-list {
|
|
--faceted-list-border-width: 2px;
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
border-inline-start: calc(var(--faceted-list-border-width) - 1px) solid var(--senary-contrast);
|
|
}
|
|
.docs-faceted-list-item {
|
|
a,
|
|
button:not(.docs-expanded-button) {
|
|
position: relative;
|
|
background-color: var(--quaternary-contrast);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
transition: background-color 0.3s ease;
|
|
line-height: 1.1rem;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: calc(var(--faceted-list-border-width) * -1);
|
|
width: var(--faceted-list-border-width);
|
|
height: 100%;
|
|
background: var(--primary-contrast);
|
|
opacity: 0;
|
|
transform: scaleY(0.7);
|
|
transition: transform 0.3s ease, opacity 0.3s ease;
|
|
}
|
|
&:hover {
|
|
background-color: var(--primary-contrast);
|
|
&::before {
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
&.docs-faceted-list-item-active {
|
|
// font gradient
|
|
background-image: var(--pink-to-purple-vertical-gradient);
|
|
&::before {
|
|
opacity: 1;
|
|
transform: scaleY(1);
|
|
background: var(--pink-to-purple-vertical-gradient);
|
|
}
|
|
&:hover {
|
|
&::before {
|
|
opacity: 1;
|
|
transform: scaleY(1.1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// a or button
|
|
}
|