andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Add final touches

Browse source
This commit is contained in:
Schmelczer András 2020-01-10 20:10:59 +01:00
parent b1fd2f372f
commit 0429ea7f72
64 changed files with 576 additions and 444 deletions
Download patch file Download diff file Expand all files Collapse all files

60
src/style/a.scss
View file

@ -1,48 +1,48 @@
@import 'vars';
@import 'mixins';
@use 'sass:color';
@use 'include' as i;
@include responsive() using ($vars) {
@include i.responsive() using ($vars) {
a {
@include special-text-font($vars);
$border-shift: 10px;
$line-width: 2px;
@include i.special-text-font($vars);
text-decoration: none;
position: relative;
cursor: pointer;
position: relative;
display: inline-block;
overflow: hidden;
$border-shift: 10px;
transition: transform map_get($vars, $long-transition-time);
&:before {
content: '';
display: block;
position: absolute;
width: 100%;
height: map_get($vars, $line-width);
bottom: 0;
z-index: 1;
background: linear-gradient(
90deg,
map_get($vars, $card-color) 0,
transparentize(map_get($vars, $card-color), 1) 4px,
transparentize(map_get($vars, $card-color), 1) calc(100% - 4px),
map_get($vars, $card-color) 100%
);
}
padding-bottom: $line-width;
&:before,
&:after {
content: '';
display: block;
position: absolute;
bottom: 0;
}
&:before {
width: calc(100% + #{$border-shift});
z-index: 0;
border-bottom: map_get($vars, $line-width) dashed
map_get($vars, $accent-color);
transition: transform map_get($vars, $long-transition-time);
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 {
&:after {
&:before {
transform: translateX(-$border-shift);
}
}