Commit b834ecd2 authored by Chris Peressini's avatar Chris Peressini Committed by Annabel Dunstone Gray

Add darker active state for outline buttons and new border colors.

parent 6743d5aa
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
@include btn-default; @include btn-default;
} }
@mixin btn-outline($background, $text, $border, $hover-background, $hover-text, $hover-border) { @mixin btn-outline($background, $text, $border, $hover-background, $hover-text, $hover-border, $active-background, $active-border) {
background-color: $background; background-color: $background;
color: $text; color: $text;
border-color: $border; border-color: $border;
...@@ -23,8 +23,14 @@ ...@@ -23,8 +23,14 @@
&:hover, &:hover,
&:focus { &:focus {
background-color: $hover-background; background-color: $hover-background;
color: $hover-text;
border-color: $hover-border; border-color: $hover-border;
color: $hover-text;
}
&:active {
background-color: $active-background;
border-color: $active-border;
color: $hover-text;
} }
} }
...@@ -82,11 +88,11 @@ ...@@ -82,11 +88,11 @@
} }
@mixin btn-gray { @mixin btn-gray {
@include btn-color($gray-light, $border-gray-light, $gray-normal, $border-gray-light, $gray-dark, $border-gray-dark, $gl-gray-dark); @include btn-color($gray-light, $border-gray-light, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, $gl-gray-dark);
} }
@mixin btn-white { @mixin btn-white {
@include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-white-dark, $btn-white-active); @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-white-dark, $gl-text-color);
} }
@mixin btn-with-margin { @mixin btn-with-margin {
...@@ -139,11 +145,11 @@ ...@@ -139,11 +145,11 @@
&.btn-new, &.btn-new,
&.btn-create, &.btn-create,
&.btn-save { &.btn-save {
@include btn-outline($white-light, $green-normal, $green-normal, $green-light, $white-light, $green-light); @include btn-outline($white-light, $border-green-light, $border-green-light, $green-light, $white-light, $border-green-light, $green-normal, $border-green-normal);
} }
&.btn-remove { &.btn-remove {
@include btn-outline($white-light, $red-normal, $red-normal, $red-light, $white-light, $red-light); @include btn-outline($white-light, $border-red-light, $border-red-light, $red-light, $white-light, $border-red-light, $red-normal, $border-red-normal);
} }
} }
...@@ -165,11 +171,11 @@ ...@@ -165,11 +171,11 @@
} }
&.btn-close { &.btn-close {
@include btn-outline($white-light, $orange-normal, $orange-normal, $orange-light, $white-light, $orange-light); @include btn-outline($white-light, $border-orange-light, $border-orange-light, $orange-light, $white-light, $border-orange-light, $orange-normal, $border-orange-normal);
} }
&.btn-spam { &.btn-spam {
@include btn-outline($white-light, $red-normal, $red-normal, $red-light, $white-light, $red-light); @include btn-outline($white-light, $border-red-light, $border-red-light, $red-light, $white-light, $border-red-light, $red-normal, $border-red-normal);
} }
&.btn-danger, &.btn-danger,
...@@ -351,7 +357,7 @@ ...@@ -351,7 +357,7 @@
.btn-inverted { .btn-inverted {
&-secondary { &-secondary {
@include btn-outline($white-light, $blue-normal, $blue-normal, $blue-light, $white-light, $blue-light); @include btn-outline($white-light, $border-blue-light, $border-blue-light, $blue-light, $white-light, $border-blue-light, $blue-normal, $border-blue-normal);
} }
} }
......
...@@ -12,7 +12,7 @@ $sidebar-breakpoint: 1024px; ...@@ -12,7 +12,7 @@ $sidebar-breakpoint: 1024px;
/* /*
* Color schema * Color schema
*/ */
$darken-normal-factor: 7%; $darken-normal-factor: 7%;
$darken-dark-factor: 10%; $darken-dark-factor: 10%;
$darken-border-factor: 5%; $darken-border-factor: 5%;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment