|
-
-
-
-
- @mixin text-underline-crop($background) {
- text-shadow: .03em 0 $background,
- -.03em 0 $background,
- 0 .03em $background,
- 0 -.03em $background,
- .06em 0 $background,
- -.06em 0 $background,
- .09em 0 $background,
- -.09em 0 $background,
- .12em 0 $background,
- -.12em 0 $background,
- .15em 0 $background,
- -.15em 0 $background;
- }
-
- @mixin text-background($color-bg, $color-text) {
- position: relative;
- z-index:0;
- &::after {
- content: "";
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- position: absolute;
- z-index: -1;
- opacity:1;
- transition: opacity 1s ease;
- background-image: linear-gradient($color-text, $color-text);
- background-size: 1px 0.5px;
- background-repeat: repeat-x;
- background-position: 0% 95%;
-
- }
- &:hover {
- &::after {
- opacity: 0;
- }
- }
- }
-
- @mixin text-selection($selection) {
- &::selection {
- @include text-underline-crop($selection);
- background: $selection;
- }
-
- &::-moz-selection {
- @include text-underline-crop($selection);
- background: $selection;
- }
- }
-
- @mixin link-underline($background, $text, $selection){
- @include text-underline-crop($background);
- @include text-background($background, $text);
- @include text-selection($selection);
-
- color: $text;
- text-decoration: none;
-
- *,
- *:after,
- &:after,
- *:before,
- &:before {
- text-shadow: none;
- }
- &:visited {
- color: $text;
- }
-
- }
|