mirror of
https://github.com/LaconicNetwork/laconic.com.git
synced 2026-01-26 02:44:09 +00:00
124 lines
2.7 KiB
SCSS
124 lines
2.7 KiB
SCSS
@import 'css/helpers';
|
|
|
|
.link {
|
|
position: relative;
|
|
transition: color var(--duration-fast) var(--ease);
|
|
outline: none;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
color: currentcolor;
|
|
font-family: var(--font-dm-mono);
|
|
font-size: tovw(18px, 'default', 16px);
|
|
font-weight: 400;
|
|
pointer-events: all;
|
|
|
|
&--default,
|
|
&--nav {
|
|
.icon {
|
|
@include respond-to('mobile') {
|
|
right: tovw(-20px, 'mobile', -14px);
|
|
bottom: tovw(3px, 'mobile', 4px);
|
|
}
|
|
|
|
position: absolute;
|
|
right: tovw(-24px, 'default', -26px);
|
|
bottom: tovw(6px, 'default', 3px);
|
|
transition: transform var(--normal-transition);
|
|
width: tovw(10px, 'default', 9px);
|
|
height: tovw(10px, 'default', 8px);
|
|
vertical-align: middle;
|
|
|
|
&--rotated {
|
|
transform: rotate(45deg);
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
opacity: 0;
|
|
background-image: repeating-linear-gradient(
|
|
0deg,
|
|
currentcolor,
|
|
currentcolor 100%,
|
|
transparent 100%,
|
|
transparent 100%,
|
|
currentcolor 100%
|
|
),
|
|
repeating-linear-gradient(
|
|
90deg,
|
|
currentcolor,
|
|
currentcolor 100%,
|
|
transparent 100%,
|
|
transparent 100%,
|
|
currentcolor 100%
|
|
),
|
|
repeating-linear-gradient(
|
|
currentcolor,
|
|
currentcolor 100%,
|
|
transparent 100%,
|
|
transparent 100%,
|
|
currentcolor 100%
|
|
),
|
|
repeating-linear-gradient(
|
|
270deg,
|
|
currentcolor,
|
|
currentcolor 100%,
|
|
transparent 100%,
|
|
transparent 100%,
|
|
currentcolor 100%
|
|
);
|
|
background-position: 0 0, 0 0, 100% 0, 0 100%;
|
|
background-repeat: no-repeat;
|
|
background-size: 0 100%, 100% 0, 0 100%, 100% 2px;
|
|
width: 100%;
|
|
height: tovw(1px, 'default', 1px);
|
|
animation: border var(--duration-normal) linear infinite;
|
|
content: '';
|
|
pointer-events: none;
|
|
}
|
|
|
|
&::after {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
background: currentcolor;
|
|
width: 100%;
|
|
height: tovw(1px);
|
|
content: '';
|
|
}
|
|
|
|
&:hover {
|
|
.icon {
|
|
transform: rotate(45deg) scale(1.15);
|
|
}
|
|
|
|
&::after {
|
|
opacity: 0;
|
|
}
|
|
|
|
&::before {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--nav {
|
|
text-transform: none;
|
|
line-height: 1;
|
|
letter-spacing: tovw(-0.5px, 'default', -0.5px);
|
|
font-family: var(--font-tt-hoves);
|
|
font-size: tovw(16px, 'default', 14px);
|
|
|
|
&::after {
|
|
content: initial;
|
|
}
|
|
|
|
&::before {
|
|
top: 110%;
|
|
}
|
|
}
|
|
}
|