Add link color

This commit is contained in:
Jeremy Thomas
2017-10-07 20:52:39 +01:00
parent a592741ab6
commit e037deec73
9 changed files with 453 additions and 68 deletions

View File

@@ -13,9 +13,9 @@ $button-focus-box-shadow-color: rgba($link, 0.25) !default
$button-active-color: $link-active !default
$button-active-border-color: $link-active-border !default
$button-link-color: $text !default
$button-link-hover-background-color: $background !default
$button-link-hover-color: $text-strong !default
$button-text-color: $text !default
$button-text-hover-background-color: $background !default
$button-text-hover-color: $text-strong !default
$button-disabled-background-color: $white !default
$button-disabled-border-color: $grey-lighter !default
@@ -81,21 +81,21 @@ $button-static-border-color: $grey-lighter !default
border-color: $button-active-border-color
color: $button-active-color
// Colors
&.is-link
&.is-text
background-color: transparent
border-color: transparent
color: $button-link-color
color: $button-text-color
text-decoration: underline
&:hover,
&.is-hovered,
&:focus,
&.is-focused
background-color: $button-link-hover-background-color
color: $button-link-hover-color
background-color: $button-text-hover-background-color
color: $button-text-hover-color
&:active,
&.is-active
background-color: darken($button-link-hover-background-color, 5%)
color: $button-link-hover-color
background-color: darken($button-text-hover-background-color, 5%)
color: $button-text-hover-color
&[disabled]
background-color: transparent
border-color: transparent

View File

@@ -1,6 +1,6 @@
$primary: $turquoise !default
$info: $blue !default
$info: $cyan !default
$success: $green !default
$warning: $yellow !default
$danger: $red !default
@@ -14,12 +14,13 @@ $orange-invert: findColorInvert($orange) !default
$yellow-invert: findColorInvert($yellow) !default
$green-invert: findColorInvert($green) !default
$turquoise-invert: findColorInvert($turquoise) !default
$cyan-invert: findColorInvert($cyan) !default
$blue-invert: findColorInvert($blue) !default
$purple-invert: findColorInvert($purple) !default
$red-invert: findColorInvert($red) !default
$primary-invert: $turquoise-invert !default
$info-invert: $blue-invert !default
$info-invert: $cyan-invert !default
$success-invert: $green-invert !default
$warning-invert: $yellow-invert !default
$danger-invert: $red-invert !default
@@ -75,7 +76,7 @@ $size-large: $size-4 !default
// Lists and maps
$colors: ("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)) !default
$colors: ("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)) !default
$shades: ("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis) !default
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default

View File

@@ -18,6 +18,7 @@ $orange: hsl(14, 100%, 53%) !default
$yellow: hsl(48, 100%, 67%) !default
$green: hsl(141, 71%, 48%) !default
$turquoise: hsl(171, 100%, 41%) !default
$cyan: hsl(204, 86%, 53%) !default
$blue: hsl(217, 71%, 53%) !default
$purple: hsl(271, 100%, 71%) !default
$red: hsl(348, 100%, 61%) !default