Smart Underline Sass Mixin
@mixin smart-underline($background: #fff, $text: #000, $selection: #ffc, $position: 86%){ | |
a { | |
color: inherit; | |
text-decoration: none; | |
background: -webkit-linear-gradient($background, $background), -webkit-linear-gradient($background, $background), -webkit-linear-gradient($text, $text); | |
background-size: .05em 1px, .05em 1px, 1px 1px; | |
background-repeat: no-repeat, no-repeat, repeat-x; | |
text-shadow: 0.03em 0 $background, -0.03em 0 $background, 0 0.03em $background, 0 -0.03em $background, 0.06em 0 $background, -0.06em 0 $background, 0.09em 0 $background, -0.09em 0 $background, 0.12em 0 $background, -0.12em 0 $background, 0.15em 0 $background, -0.15em 0 $background; | |
background-position-y: $position,$position, $position; | |
background-position-x: 0%, 100%, 0%; | |
&::selection { | |
text-shadow: 0.03em 0 $selection, -0.03em 0 $selection, 0 0.03em $selection, 0 -0.03em $selection, 0.06em 0 $selection, -0.06em 0 $selection, 0.09em 0 $selection, -0.09em 0 $selection, 0.12em 0 $selection, -0.12em 0 $selection, 0.15em 0 $selection, -0.15em 0 $selection; | |
background: $selection; | |
} | |
&::-moz-selection { | |
text-shadow: 0.03em 0 $selection, -0.03em 0 $selection, 0 0.03em $selection, 0 -0.03em $selection, 0.06em 0 $selection, -0.06em 0 $selection, 0.09em 0 $selection, -0.09em 0 $selection, 0.12em 0 $selection, -0.12em 0 $selection, 0.15em 0 $selection, -0.15em 0 $selection; | |
background: $selection; | |
} | |
&:before, &:after, *, *:before, *:after { | |
text-shadow: none; | |
} | |
&:visited{ | |
color: inherit; | |
} | |
} | |
} |
This comment has been minimized.
This comment has been minimized.
mydudechris
commented
Mar 25, 2015
This is awesome, how would I go about using it while excluding link elements? For example, I use a.button where I wouldn't want the underline to be applied. |
This comment has been minimized.
This comment has been minimized.
mydudechris
commented
Mar 25, 2015
Ah, I c, I can just remove the text-shadow from my button elements. |
This comment has been minimized.
This comment has been minimized.
pixeline
commented
Jan 27, 2016
Why limit the mixin to the |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
jamesmusgrave commentedNov 11, 2014
From: adamschwartz/magic-of-css@35fa2f5