☠️ RESET for v2
This commit is contained in:
@@ -1,23 +0,0 @@
|
||||
/*
|
||||
** Badge
|
||||
*/
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: $color-primary-darker;
|
||||
font-family: $font-sans-sb;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
background-color: $color-secondary-light;
|
||||
box-shadow: 0 0 0 4px rgba($color-tertiary, 0.15);
|
||||
border-radius: 50vh;
|
||||
|
||||
// Small size
|
||||
&--small {
|
||||
height: 14px;
|
||||
padding: 0 4px;
|
||||
font-size: rem(7px);
|
||||
line-height: 15px;
|
||||
}
|
||||
}
|
||||
@@ -1,283 +0,0 @@
|
||||
// Button: Control
|
||||
.button-control {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
padding-top: 2px;
|
||||
pointer-events: auto;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: background-color 350ms $ease-quart;
|
||||
will-change: transform, opacity;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
// Icon
|
||||
.icon {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
height: auto;
|
||||
transition: transform 500ms $ease-quart, opacity 150ms $ease-inout;
|
||||
will-change: transform;
|
||||
|
||||
&:not([data-width]) {
|
||||
width: 13px;
|
||||
}
|
||||
|
||||
@include breakpoint (sm) {
|
||||
&:not([data-width]) {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon[aria-hidden] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Variants
|
||||
*/
|
||||
&--white {
|
||||
background-color: #fff;
|
||||
|
||||
&:hover, &.hover {
|
||||
background-color: $color-secondary;
|
||||
}
|
||||
}
|
||||
&--lightpink {
|
||||
background-color: rgba($color-secondary, 0.4);
|
||||
|
||||
&:hover, &.hover {
|
||||
background-color: rgba($color-secondary, 0.85);
|
||||
}
|
||||
}
|
||||
&--pink {
|
||||
background-color: rgba($color-secondary, 0.85);
|
||||
|
||||
&:hover, &.hover {
|
||||
background-color: $color-secondary;
|
||||
}
|
||||
}
|
||||
&--gray {
|
||||
background-color: $color-gray;
|
||||
|
||||
&:hover, &.hover {
|
||||
background-color: $color-text;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Effects
|
||||
*/
|
||||
&--shadow {
|
||||
box-shadow: 0 0 10px rgba(#000, 0.4);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
** Directions
|
||||
*/
|
||||
// To left
|
||||
&.dir-left {
|
||||
.icon[aria-hidden] {
|
||||
transform: translate(100%, -50%);
|
||||
}
|
||||
|
||||
&:hover, &.hover {
|
||||
.icon:not([aria-hidden]) {
|
||||
opacity: 0;
|
||||
transform: translate(-100%, 0);
|
||||
}
|
||||
.icon[aria-hidden] {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
// To right
|
||||
&.dir-right {
|
||||
.icon[aria-hidden] {
|
||||
transform: translate(-150%, -50%);
|
||||
}
|
||||
|
||||
&:hover, &.hover {
|
||||
.icon:not([aria-hidden]) {
|
||||
opacity: 0;
|
||||
transform: translate(100%, 0);
|
||||
}
|
||||
.icon[aria-hidden] {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
// From top
|
||||
&.dir-top {
|
||||
.icon[aria-hidden] {
|
||||
left: auto;
|
||||
transform: translate(0, -150%);
|
||||
}
|
||||
|
||||
&:hover, &.hover {
|
||||
.icon:not([aria-hidden]) {
|
||||
opacity: 0;
|
||||
transform: translate(0, 100%);
|
||||
}
|
||||
.icon[aria-hidden] {
|
||||
opacity: 1;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
// From bottom
|
||||
&.dir-bottom {
|
||||
.icon[aria-hidden] {
|
||||
left: auto;
|
||||
transform: translate(0, 150%);
|
||||
}
|
||||
|
||||
&:hover, &.hover {
|
||||
.icon:not([aria-hidden]) {
|
||||
opacity: 0;
|
||||
transform: translate(0, -100%);
|
||||
}
|
||||
.icon[aria-hidden] {
|
||||
opacity: 1;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Dashed style
|
||||
*/
|
||||
&--dashed {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
background-color: rgba($color-lightpurple, 0.5);
|
||||
transition: background-color 150ms $ease-inout;
|
||||
will-change: transform, opacity;
|
||||
|
||||
// Icon
|
||||
svg[fill] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Dashed circle
|
||||
svg:not([fill]) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 130%;
|
||||
height: 130%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
circle {
|
||||
display: block;
|
||||
stroke-width: 1.75;
|
||||
stroke-dasharray: 7, 3;
|
||||
stroke: rgba($color-lightpurple, 0.35);
|
||||
fill: none;
|
||||
transform-origin: 50% 50%;
|
||||
animation: rotateDashes 5s linear infinite;
|
||||
animation-play-state: paused;
|
||||
animation-delay: 50ms;
|
||||
transition: stroke 150ms $ease-inout;
|
||||
will-change: stroke;
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover, &:focus {
|
||||
background-color: rgba($color-lightpurple, 0.65);
|
||||
|
||||
* {
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Big version
|
||||
*/
|
||||
&--big {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
text-decoration: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
@include breakpoint (lg) {
|
||||
width: 152px;
|
||||
height: 152px;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
color: rgba(#fff, 0.3);
|
||||
text-transform: uppercase;
|
||||
font-family: $font-sans-sb;
|
||||
font-size: rem(8px);
|
||||
letter-spacing: 1px;
|
||||
line-height: 1;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: 10px;
|
||||
font-size: rem(10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 24px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
// Big Dashed
|
||||
&.button-control--dashed {
|
||||
// Icon
|
||||
svg[fill] {
|
||||
@include breakpoint (xs) {
|
||||
width: 28px;
|
||||
}
|
||||
}
|
||||
// Circle
|
||||
circle {
|
||||
@include breakpoint (sm) {
|
||||
stroke-width: 4.5;
|
||||
stroke-dasharray: 20, 8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
// Button: Outline
|
||||
.button-outline {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
padding: 1px 16px 0;
|
||||
background: none;
|
||||
font-family: $font-sans-sb;
|
||||
font-size: rem(14px);
|
||||
color: #fff;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 50vh;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: all 275ms $ease-cubic;
|
||||
will-change: border, color;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
height: 40px;
|
||||
font-size: rem(18px);
|
||||
}
|
||||
|
||||
|
||||
// Second text
|
||||
.text {
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 0;
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
display: block;
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
span, &:after {
|
||||
transition: transform 275ms $ease-cubic, opacity 275ms $ease-cubic;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled
|
||||
&.disabled {
|
||||
color: $color-lightpurple;
|
||||
border-color: $color-lightpurple;
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
color: $color-tertiary;
|
||||
border-color: $color-tertiary;
|
||||
|
||||
span {
|
||||
opacity: 0;
|
||||
transform: translateY(-75%);
|
||||
}
|
||||
.text:after {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,97 +0,0 @@
|
||||
// Default button
|
||||
.button {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
padding: 0 16px;
|
||||
background: #fff;
|
||||
font-family: $font-sans-sb;
|
||||
font-size: rem(14px);
|
||||
color: $color-gray;
|
||||
border-radius: 50vh;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 250ms $ease-cubic, color 350ms $ease-cubic;
|
||||
will-change: background-color, color;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
height: 48px;
|
||||
padding: 1px 24px 0;
|
||||
font-size: rem(18px);
|
||||
}
|
||||
|
||||
// Icon if existing
|
||||
img, svg {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: auto;
|
||||
margin-right: 8px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
width: 22px;
|
||||
height: auto;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
transition: all 350ms $ease-cubic;
|
||||
|
||||
.anim {
|
||||
animation-delay: 100ms;
|
||||
}
|
||||
}
|
||||
|
||||
// Text
|
||||
.text {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:after {
|
||||
content: attr(data-text);
|
||||
opacity: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
span, .text:after {
|
||||
transition: transform 275ms $ease-cubic, opacity 275ms $ease-cubic;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: $color-secondary;
|
||||
|
||||
svg {
|
||||
fill: #fff;
|
||||
}
|
||||
.anim {
|
||||
animation-play-state: running;
|
||||
}
|
||||
.text {
|
||||
span {
|
||||
opacity: 0;
|
||||
transform: translateY(-75%);
|
||||
}
|
||||
&:after {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
// Counter
|
||||
.counter {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
font-family: $font-serif-extra;
|
||||
font-size: pxVW(672);
|
||||
color: rgba($color-tertiary, 0.4);
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
|
||||
// Column
|
||||
&__column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 0.85;
|
||||
text-align: right;
|
||||
margin: 0 0px;
|
||||
transition: transform 0.6s $ease-quart;
|
||||
will-change: transform;
|
||||
|
||||
// Last column
|
||||
&:last-child {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
// SVG Globe icon
|
||||
.icon-svg {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-bottom: 133.93%; /* 1.33 ratio */
|
||||
}
|
||||
|
||||
// Small size
|
||||
&--small {
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-bottom: 100%; /* 1:1 ratio */
|
||||
}
|
||||
}
|
||||
|
||||
// Animate by default
|
||||
&.is-animated {
|
||||
.anim {
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
// Text input
|
||||
.input__text {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
padding: 0 24px;
|
||||
color: #fff;
|
||||
font-size: rem(16px);
|
||||
font-family: $font-sans-light;
|
||||
border: 2px solid rgba($color-secondary, 0.6);
|
||||
border-radius: 50vh;
|
||||
transition: border 300ms $ease-quart;
|
||||
background: none;
|
||||
outline: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(18px);
|
||||
height: 64px;
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
// States
|
||||
&::placeholder {
|
||||
color: #fff;
|
||||
opacity: 0.75;
|
||||
transition: all 300ms $ease-quart;
|
||||
}
|
||||
&:focus {
|
||||
@extend %input__text--active;
|
||||
}
|
||||
}
|
||||
|
||||
%input__text--active {
|
||||
border-color: $color-secondary;
|
||||
|
||||
&::placeholder {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -1,116 +0,0 @@
|
||||
/*
|
||||
** Link: Change location
|
||||
*/
|
||||
.link-change {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0 6px;
|
||||
padding: 0 4px;
|
||||
color: $color-secondary;
|
||||
text-decoration: none;
|
||||
transition: color 200ms $ease-cubic;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
// Line
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background-color: rgba($color-secondary, 0.22);
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
bottom: 3px;
|
||||
left: 0;
|
||||
border-radius: 50vh;
|
||||
transition: all 200ms $ease-cubic;
|
||||
transition-delay: 50ms;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
height: 14px;
|
||||
bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon
|
||||
.icon {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
top: -3px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-left: 6px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
|
||||
svg {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
color: $color-text;
|
||||
|
||||
&:after {
|
||||
background-color: rgba($color-secondary, 0.4);
|
||||
}
|
||||
svg * {
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Link: Translation effect
|
||||
*/
|
||||
.link-translate {
|
||||
display: inline-block;
|
||||
|
||||
.text {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:after {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transform: translateY(-50%);
|
||||
opacity: 1;
|
||||
transition: all 275ms $ease-cubic;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
transition: all 275ms $ease-cubic;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
}
|
||||
|
||||
// States
|
||||
&:hover {
|
||||
.text {
|
||||
&:after {
|
||||
transform: translateY(-75%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
// Switcher
|
||||
.switcher {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
color: #C78FEC;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Text
|
||||
&__text {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
font-family: $font-serif;
|
||||
font-size: rem(30px);
|
||||
line-height: 1;
|
||||
text-align: right;
|
||||
|
||||
em {
|
||||
margin-left: -2px;
|
||||
margin-right: 16px;
|
||||
font-size: rem(14px);
|
||||
text-transform: uppercase;
|
||||
color: $color-lightpurple;
|
||||
letter-spacing: 1px;
|
||||
|
||||
&.same-line {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: block;
|
||||
color: $color-secondary;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.empty {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon
|
||||
&__icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
margin-top: 4px;
|
||||
margin-left: -8px;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Side version (smaller)
|
||||
*/
|
||||
&--side {
|
||||
.switcher {
|
||||
&__text {
|
||||
font-size: rem(22px);
|
||||
}
|
||||
&__icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #F4EDFB;
|
||||
|
||||
circle {
|
||||
stroke: #F4EDFB;
|
||||
}
|
||||
img, svg[fill] {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
&:hover {
|
||||
background-color: darken(#F4EDFB, 7);
|
||||
|
||||
circle {
|
||||
stroke: darken(#F4EDFB, 7);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.top {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,93 +0,0 @@
|
||||
// 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 100ms;
|
||||
will-change: color;
|
||||
}
|
||||
button {
|
||||
span {
|
||||
margin-left: 16px;
|
||||
}
|
||||
svg {
|
||||
fill: $color-secondary;
|
||||
* {
|
||||
transition: fill 100ms;
|
||||
transition-delay: 0ms;
|
||||
will-change: fill;
|
||||
}
|
||||
}
|
||||
|
||||
// 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 600ms $ease-cubic infinite alternate forwards;
|
||||
}
|
||||
rect:nth-of-type(odd) {
|
||||
animation: layoutListOdd 600ms $ease-cubic infinite alternate forwards;
|
||||
}
|
||||
}
|
||||
// Grid icon
|
||||
&[data-layout="grid"]:hover {
|
||||
rect:nth-of-type(even) {
|
||||
animation: layoutGridEven 600ms $ease-cubic infinite alternate forwards;
|
||||
}
|
||||
rect:nth-of-type(odd) {
|
||||
animation: layoutGridOdd 600ms $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;
|
||||
will-change: width, left;
|
||||
|
||||
span {
|
||||
content: attr(data-text);
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user