diff options
Diffstat (limited to 'assets/css/scss/elements/_text-link.scss')
| -rw-r--r-- | assets/css/scss/elements/_text-link.scss | 163 |
1 files changed, 163 insertions, 0 deletions
diff --git a/assets/css/scss/elements/_text-link.scss b/assets/css/scss/elements/_text-link.scss new file mode 100644 index 0000000..bec0ffb --- /dev/null +++ b/assets/css/scss/elements/_text-link.scss @@ -0,0 +1,163 @@ +// +// 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; } + } +}
\ No newline at end of file |