90 lines
2.2 KiB
SCSS
90 lines
2.2 KiB
SCSS
// Toggle Button
|
|
.toggle {
|
|
position: relative;
|
|
margin-top: 58px;
|
|
background-color: rgba($color-secondary, 0.25);
|
|
display: inline-flex;
|
|
border-radius: 50vh;
|
|
|
|
button, .pill {
|
|
position: relative;
|
|
z-index: 2;
|
|
color: $color-secondary;
|
|
border-radius: 50vh;
|
|
padding: 12px 24px;
|
|
font-family: $font-sans-sb;
|
|
font-size: rem(18px);
|
|
line-height: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
outline: none;
|
|
transition: color 150ms $ease-inout;
|
|
}
|
|
button {
|
|
span {
|
|
margin-left: 16px;
|
|
}
|
|
svg {
|
|
fill: $color-secondary;
|
|
* {
|
|
transition: fill 150ms $ease-inout;
|
|
transition-delay: 0ms;
|
|
}
|
|
}
|
|
|
|
// Active button
|
|
&.active {
|
|
color: #fff;
|
|
|
|
svg * {
|
|
fill: #C78FEC;
|
|
}
|
|
}
|
|
|
|
// Hover
|
|
&:hover:not(.active) {
|
|
color: $color-secondary-bright;
|
|
|
|
svg {
|
|
fill: $color-secondary-bright;
|
|
}
|
|
}
|
|
// List icon
|
|
&[data-layout="list"]:hover {
|
|
rect:nth-of-type(even) {
|
|
animation: layoutListEven 400ms $ease-cubic infinite alternate forwards;
|
|
}
|
|
rect:nth-of-type(odd) {
|
|
animation: layoutListOdd 400ms $ease-cubic infinite alternate forwards;
|
|
}
|
|
}
|
|
// Grid icon
|
|
&[data-layout="grid"]:hover {
|
|
rect:nth-of-type(even) {
|
|
animation: layoutGridEven 400ms $ease-cubic infinite alternate forwards;
|
|
}
|
|
rect:nth-of-type(odd) {
|
|
animation: layoutGridOdd 400ms $ease-cubic infinite alternate forwards;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Pill (active)
|
|
.pill {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
left: 0;
|
|
width: auto;
|
|
height: 100%;
|
|
background-color: $color-primary;
|
|
transition: all 500ms $ease-quart;
|
|
|
|
span {
|
|
content: attr(data-text);
|
|
display: block;
|
|
margin: 0;
|
|
}
|
|
}
|
|
} |