Convert text links to mixin

This commit is contained in:
Alex Liebowitz 2016-11-02 12:09:33 -04:00
parent 584a1d7d6a
commit a7e6e9db1d

View file

@ -1,5 +1,34 @@
@import "global";
@mixin text-link($color: $color-primary, $hover-opacity: 0.70) {
color: $color;
.icon
{
&:first-child {
padding-right: 5px;
}
&:last-child:not(:only-child) {
padding-left: 5px;
}
}
&:not(.no-underline) {
text-decoration: underline;
.icon {
text-decoration: none;
}
}
&:hover
{
opacity: $hover-opacity;
transition: opacity .225s ease;
text-decoration: underline;
.icon {
text-decoration: none;
}
}
}
.icon-fixed-width {
/* This borrowed is from a component of Font Awesome we're not using, maybe add it? */
width: (18em / 14);
@ -151,32 +180,7 @@ input[type="text"], input[type="search"]
}
.button-text
{
color: $color-primary;
.icon
{
&:first-child {
padding-right: 5px;
}
&:last-child:not(:only-child) {
padding-left: 5px;
}
}
&:not(.no-underline) {
text-decoration: underline;
.icon {
text-decoration: none;
}
}
&:hover
{
opacity: 0.70;
transition: opacity .225s ease;
text-decoration: underline;
.icon {
text-decoration: none;
}
}
@include text-link();
}
.icon:only-child {