diff options
author | Scott Hampton <shampton@gitlab.com> | 2019-05-23 19:21:14 +0300 |
---|---|---|
committer | Scott Hampton <shampton@gitlab.com> | 2019-05-29 00:03:51 +0300 |
commit | 381113edc3ab5bd64829e3dd1a136c6874887a96 (patch) | |
tree | 916645f0728e6e4b17c326a61fb38ced2e7ad6db | |
parent | 582500e39442076d0e718adf5c7c7dc17d91bd4a (diff) |
Updated the colors of primary buttons
Design shows different colors for interaction on primary buttons.
This updates those colors to bring them up to spec.
-rw-r--r-- | app/assets/stylesheets/framework/buttons.scss | 30 |
1 files changed, 19 insertions, 11 deletions
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 2c720703822..e798e4c76e0 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -81,46 +81,54 @@ } } -@mixin btn-color($light, $border-light, $normal, $border-normal, $dark, $border-dark, $color) { +@mixin btn-color($light, $border-light, $normal, $border-normal, $border-dark, $color) { background-color: $light; border-color: $border-light; color: $color; &:hover, &:focus { - background-color: $normal; + background-color: $light; border-color: $border-normal; color: $color; } - &:active, - &.active { - box-shadow: $gl-btn-active-background; + &:hover { + box-shadow: 0 2px 2px 0 rgba($black, 0.2); + } - background-color: $dark; + &:focus { + box-shadow: 0 0 4px 1px $blue-300, 0 2px 2px 0 rgba($black, 0.2); + } + + &:not(:disabled):not(.disabled):active, + &:not(:disabled):not(.disabled).active { + box-shadow: inset 0 2px 4px 0 rgba($black, 0.2); + + background-color: $normal; border-color: $border-dark; color: $color; } } @mixin btn-green { - @include btn-color($green-500, $green-600, $green-600, $green-700, $green-700, $green-800, $white-light); + @include btn-color($green-500, $green-600, $green-600, $green-700, $green-800, $white-light); } @mixin btn-blue { - @include btn-color($blue-500, $blue-600, $blue-600, $blue-700, $blue-700, $blue-800, $white-light); + @include btn-color($blue-500, $blue-600, $blue-600, $blue-700, $blue-800, $white-light); } @mixin btn-orange { - @include btn-color($orange-500, $orange-600, $orange-600, $orange-700, $orange-700, $orange-800, $white-light); + @include btn-color($orange-500, $orange-600, $orange-600, $orange-700, $orange-800, $white-light); } @mixin btn-red { - @include btn-color($red-500, $red-600, $red-600, $red-700, $red-700, $red-800, $white-light); + @include btn-color($red-500, $red-600, $red-600, $red-700, $red-800, $white-light); } @mixin btn-white { - @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-gray-dark, $gl-text-color); + @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $border-gray-dark, $gl-text-color); } @mixin btn-with-margin { |