pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Various UI fixes

Browse Source 
use .icon-link in various places
This commit is contained in:
Andrew Croce
2018-07-30 13:51:58 -04:00
parent c0fc46328b
commit 2a475a6713
9 changed files with 128 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
scss/elements/_icon_link.scss
View File

@@ -1,4 +1,18 @@
@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;
@@ -16,6 +30,16 @@
}
}
@mixin icon-link-large {
@include h4;
font-weight: normal;
.icon {
@include icon-size(16);
margin-right: $gap * 2;
}
}
@mixin icon-link-vertical {
flex-direction: column;
@@ -24,19 +48,6 @@
}
}
@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);
}
}
.icon-link {
@include icon-link;
@include icon-link-color($color-primary);
@@ -44,4 +55,8 @@
&.icon-link--vertical {
@include icon-link-vertical;
}
&.icon-link--large {
@include icon-link-large;
}
}