diff options
| -rw-r--r-- | app/assets/stylesheets/framework/buttons.scss | 31 | ||||
| -rw-r--r-- | changelogs/unreleased/61144-style-secondary-button-type-to-be-aligned-with-pattern-library.yml | 5 |
2 files changed, 25 insertions, 11 deletions
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index ab8f397f3a0..2c720703822 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -21,7 +21,7 @@ } @mixin btn-default { - border-radius: 3px; + border-radius: $border-radius-default; font-size: $gl-font-size; font-weight: $gl-font-weight-normal; padding: $gl-vert-padding $gl-btn-padding; @@ -37,7 +37,7 @@ @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; color: $text; border-color: $border; @@ -61,13 +61,22 @@ } } + &:focus { + box-shadow: 0 0 4px 1px $blue-300; + } + &:active { background-color: $active-background; border-color: $active-border; - color: $hover-text; + box-shadow: inset 0 2px 4px 0 rgba($black, 0.2); + color: $active-text; > .icon { - color: $hover-text; + color: $active-text; + } + + &:focus { + box-shadow: inset 0 2px 4px 0 rgba($black, 0.2); } } } @@ -164,21 +173,21 @@ &.btn-inverted { &.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-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 { - @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-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 @@ &.btn-close, &.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 { - @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, @@ -402,7 +411,7 @@ .btn-inverted { &-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); } } diff --git a/changelogs/unreleased/61144-style-secondary-button-type-to-be-aligned-with-pattern-library.yml b/changelogs/unreleased/61144-style-secondary-button-type-to-be-aligned-with-pattern-library.yml new file mode 100644 index 00000000000..ed4cf0507c7 --- /dev/null +++ b/changelogs/unreleased/61144-style-secondary-button-type-to-be-aligned-with-pattern-library.yml @@ -0,0 +1,5 @@ +--- +title: Bring secondary button styles up to design standard +merge_request: 27920 +author: +type: fixed |