50 lines
1.1 KiB
SCSS
Executable file
50 lines
1.1 KiB
SCSS
Executable file
@use 'sass:color';
|
|
@use 'include' as i;
|
|
|
|
@include i.responsive() using ($vars) {
|
|
a {
|
|
$border-shift: 10px;
|
|
$line-width: 2px;
|
|
|
|
@include i.special-text-font($vars);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
position: relative;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
|
|
padding-bottom: $line-width;
|
|
|
|
&:before,
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
|
|
&:before {
|
|
width: calc(100% + #{$border-shift});
|
|
border-bottom: $line-width dashed map_get($vars, i.$accent-color);
|
|
transition: transform map_get($vars, i.$transition-time);
|
|
}
|
|
|
|
&:after {
|
|
width: 100%;
|
|
height: $line-width;
|
|
background: linear-gradient(
|
|
90deg,
|
|
map_get($vars, i.$card-color) 0,
|
|
color.adjust(map_get($vars, i.$card-color), $alpha: -1) 4px,
|
|
color.adjust(map_get($vars, i.$card-color), $alpha: -1) calc(100% - 4px),
|
|
map_get($vars, i.$card-color) 100%
|
|
);
|
|
}
|
|
|
|
&:hover {
|
|
&:before {
|
|
transform: translateX(-$border-shift);
|
|
}
|
|
}
|
|
}
|
|
}
|