163 lines
2.8 KiB
SCSS
163 lines
2.8 KiB
SCSS
//
|
|
// Text Link Styles //
|
|
//
|
|
*[class^='text-link-'], *[class*=' text-link-'] {
|
|
color: $color-black-09;
|
|
&:hover, &:focus {
|
|
color: $color-black-09;
|
|
}
|
|
}
|
|
.text-link-1 {
|
|
&:hover { text-decoration: underline; }
|
|
}
|
|
.text-link-2 {
|
|
&:hover { text-decoration: line-through; }
|
|
}
|
|
.text-link-3 {
|
|
&:hover { text-decoration: overline; }
|
|
}
|
|
.text-link-4 {
|
|
&:hover { text-decoration: underline overline; }
|
|
}
|
|
.text-link-5,
|
|
.text-link-6 {
|
|
position: relative;
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -2px;
|
|
background: $color-black-09;
|
|
width: 0;
|
|
height: 1px;
|
|
@include transition(all 0.24s cubic-bezier(0.165, 0.84, 0.44, 1));
|
|
}
|
|
&:hover {
|
|
&:before {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
.text-link-5 {
|
|
&:before { left: 0; }
|
|
}
|
|
.text-link-6 {
|
|
&:before { right: 0; }
|
|
}
|
|
.text-link-7 {
|
|
position: relative;
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 0;
|
|
@include transform(translateY(3px));
|
|
opacity: 0;
|
|
background: $color-black-09;
|
|
width: 100%;
|
|
height: 1px;
|
|
@include transition(linear 0.1s);
|
|
}
|
|
&:hover {
|
|
&:before {
|
|
@include transform(translateY(0));
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
.text-link-8,
|
|
.text-link-9 {
|
|
position: relative;
|
|
&:before, &:after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -2px;
|
|
height: 1px;
|
|
@include transition(all 0.24s cubic-bezier(0.165, 0.84, 0.44, 1));
|
|
}
|
|
&:before {
|
|
left: 0;
|
|
background: $color-black-02;
|
|
width: 100%;
|
|
}
|
|
&:after {
|
|
background: $color-black-09;
|
|
width: 0;
|
|
}
|
|
&:hover {
|
|
&:after {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
.text-link-8 {
|
|
&:after { left: 0; }
|
|
}
|
|
.text-link-9 {
|
|
&:after { right: 0; }
|
|
}
|
|
.text-link-10 {
|
|
position: relative;
|
|
&:before, &:after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 1px;
|
|
@include transition(linear 0.1s);
|
|
}
|
|
&:before {
|
|
background: $color-black-02;
|
|
}
|
|
&:after {
|
|
opacity: 0;
|
|
@include transform(translateY(3px));
|
|
background: $color-black-09;
|
|
}
|
|
&:hover {
|
|
&:before {
|
|
opacity: 0;
|
|
}
|
|
&:after {
|
|
@include transform(translateY(0));
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
.text-link-11 {
|
|
position: relative;
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 4px;
|
|
left: 0;
|
|
background: $color-black-02;
|
|
width: 0;
|
|
height: 6px;
|
|
@include transition(all 0.24s cubic-bezier(0.165, 0.84, 0.44, 1));
|
|
}
|
|
&:hover {
|
|
&:before {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
|
|
*[class^='text-link-'], *[class*=' text-link-'] {
|
|
color: $color-white;
|
|
&:hover, &:focus {
|
|
color: $color-white;
|
|
}
|
|
}
|
|
.text-link-5, .text-link-6, .text-link-7 {
|
|
&:before { background: $color-white; }
|
|
}
|
|
.text-link-8, .text-link-9, .text-link-10 {
|
|
&:before { background: $color-white-03; }
|
|
&:after { background: $color-white; }
|
|
}
|
|
.text-link-11 {
|
|
&:before { background: $color-white-03; }
|
|
}
|
|
} |