atst/styles/elements/_icon_link.scss
2019-03-21 16:18:38 -04:00

93 lines
1.6 KiB
SCSS

@mixin icon-link-color($color: $color-blue, $hover-color: $color-aqua-lightest) {
color: $color;
&:hover {
background-color: $hover-color;
color: $color;
}
.icon {
@include icon-color($color);
}
}
@mixin icon-link {
@include icon-link-color($color-primary);
@include h5;
display: inline-flex;
flex-direction: row;
align-items: center;
padding: $gap;
text-decoration: none;
background: none;
transition: background-color $hover-transition-time;
border-radius: $gap / 2;
cursor: pointer;
.icon {
@include icon-color($color-primary);
@include icon-size(16);
margin-right: $gap;
&--help {
position: relative;
bottom: -3px;
}
&--info {
position: relative;
bottom: 3px;
}
}
}
@mixin icon-link-large {
@include h4;
font-weight: $font-normal;
}
@mixin icon-link-vertical {
flex-direction: column;
.icon {
margin: 0 $gap $gap;
}
}
.icon-link {
@include icon-link;
@include icon-link-color($color-primary);
text-decoration: underline;
&.icon-link--vertical {
@include icon-link-vertical;
}
&.icon-link--large {
@include icon-link-large;
}
&.icon-link--danger {
@include icon-link-color($color-red, $color-red-lightest);
}
&.icon-link--default {
@include icon-link-color($color-black-light, $color-gray-lightest);
}
&.icon-link--disabled {
opacity: 0.3;
text-decoration: none;
pointer-events: none;
&:hover {
cursor: default;
background: inherit;
}
}
&.icon-link--left {
padding-left: 0;
}
}