Commit 1e0bf1d2 authored by Scott Hampton's avatar Scott Hampton

Bring secondary button styles to design standard

Hover, Active, and Focus states have different colors in design.
This fix brings those colors up to date.
parent 21c809ce
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
} }
@mixin btn-default { @mixin btn-default {
border-radius: 3px; border-radius: $border-radius-default;
font-size: $gl-font-size; font-size: $gl-font-size;
font-weight: $gl-font-weight-normal; font-weight: $gl-font-weight-normal;
padding: $gl-vert-padding $gl-btn-padding; padding: $gl-vert-padding $gl-btn-padding;
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
@include btn-default; @include btn-default;
} }
@mixin btn-outline($background, $text, $border, $hover-background, $hover-text, $hover-border, $active-background, $active-border) { @mixin btn-outline($background, $text, $border, $hover-background, $hover-text, $hover-border, $active-background, $active-border, $active-text) {
background-color: $background; background-color: $background;
color: $text; color: $text;
border-color: $border; border-color: $border;
...@@ -61,13 +61,22 @@ ...@@ -61,13 +61,22 @@
} }
} }
&:focus {
box-shadow: 0 0 4px 1px $blue-300;
}
&:active { &:active {
background-color: $active-background; background-color: $active-background;
border-color: $active-border; border-color: $active-border;
color: $hover-text; box-shadow: inset 0 2px 4px 0 rgba($black, 0.2);
color: $active-text;
> .icon { > .icon {
color: $hover-text; color: $active-text;
}
&:focus {
box-shadow: inset 0 2px 4px 0 rgba($black, 0.2);
} }
} }
} }
...@@ -164,21 +173,21 @@ ...@@ -164,21 +173,21 @@
&.btn-inverted { &.btn-inverted {
&.btn-success { &.btn-success {
@include btn-outline($white-light, $green-600, $green-500, $green-500, $white-light, $green-600, $green-600, $green-700); @include btn-outline($white-light, $green-600, $green-500, $green-100, $green-700, $green-500, $green-200, $green-600, $green-800);
} }
&.btn-remove, &.btn-remove,
&.btn-danger { &.btn-danger {
@include btn-outline($white-light, $red-500, $red-500, $red-500, $white-light, $red-600, $red-600, $red-700); @include btn-outline($white-light, $red-500, $red-500, $red-100, $red-700, $red-500, $red-200, $red-600, $red-800);
} }
&.btn-warning { &.btn-warning {
@include btn-outline($white-light, $orange-500, $orange-500, $orange-500, $white-light, $orange-600, $orange-600, $orange-700); @include btn-outline($white-light, $orange-500, $orange-500, $orange-100, $orange-700, $orange-500, $orange-200, $orange-600, $orange-800);
} }
&.btn-primary, &.btn-primary,
&.btn-info { &.btn-info {
@include btn-outline($white-light, $blue-500, $blue-500, $blue-500, $white-light, $blue-600, $blue-600, $blue-700); @include btn-outline($white-light, $blue-500, $blue-500, $blue-100, $blue-700, $blue-500, $blue-200, $blue-600, $blue-800);
} }
} }
...@@ -193,11 +202,11 @@ ...@@ -193,11 +202,11 @@
&.btn-close, &.btn-close,
&.btn-close-color { &.btn-close-color {
@include btn-outline($white-light, $orange-600, $orange-500, $orange-500, $white-light, $orange-600, $orange-600, $orange-700); @include btn-outline($white-light, $orange-600, $orange-500, $orange-100, $orange-700, $orange-500, $orange-200, $orange-600, $orange-800);
} }
&.btn-spam { &.btn-spam {
@include btn-outline($white-light, $red-500, $red-500, $red-500, $white-light, $red-600, $red-600, $red-700); @include btn-outline($white-light, $red-500, $red-500, $red-100, $red-700, $red-500, $red-200, $red-600, $red-800);
} }
&.btn-danger, &.btn-danger,
...@@ -402,7 +411,7 @@ ...@@ -402,7 +411,7 @@
.btn-inverted { .btn-inverted {
&-secondary { &-secondary {
@include btn-outline($white-light, $blue-500, $blue-500, $blue-500, $white-light, $blue-600, $blue-600, $blue-700); @include btn-outline($white-light, $blue-500, $blue-500, $blue-100, $blue-700, $blue-500, $blue-200, $blue-600, $blue-800);
} }
} }
......
---
title: Bring secondary button styles up to design standard
merge_request: 27920
author:
type: fixed
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