52 lines
1.2 KiB
SCSS
52 lines
1.2 KiB
SCSS
/**
|
|
* Table of Contents:
|
|
|
|
* 1.0 - link
|
|
* 2.0 - link-color
|
|
* 3.0 - link-underline
|
|
*/
|
|
|
|
|
|
/* 1.0 - link */
|
|
%link {
|
|
transition: background-size $transition-time ease 0s, color $transition-time ease $transition-time;
|
|
background-image: linear-gradient($secondary-color, $secondary-color);
|
|
background-repeat: no-repeat;
|
|
background-position: 100% 100%;
|
|
background-size: 0% 1px;
|
|
|
|
&:hover {
|
|
color: $secondary-color;
|
|
background-size: 100% 1px;
|
|
background-position: 0 100%;
|
|
}
|
|
}
|
|
|
|
|
|
/* 1.1 - link-color */
|
|
%link-color {
|
|
@extend %link;
|
|
color: currentColor;
|
|
background-image: linear-gradient(currentColor, currentColor);
|
|
|
|
&:hover {
|
|
color: currentColor;
|
|
}
|
|
}
|
|
|
|
|
|
/* 3.0 - link-underline */
|
|
%link-underline {
|
|
color: currentColor;
|
|
transition: background-size $transition-time ease 0s, color $transition-time ease $transition-time;
|
|
background-image: linear-gradient(currentColor, currentColor);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 100%;
|
|
background-size: 100% 1px;
|
|
|
|
&:hover {
|
|
color: currentColor;
|
|
background-size: 0% 1px;
|
|
background-position: 100% 100%;
|
|
}
|
|
} |