diff options
Diffstat (limited to 'app/assets/stylesheets/framework/buttons.scss')
-rw-r--r-- | app/assets/stylesheets/framework/buttons.scss | 75 |
1 files changed, 43 insertions, 32 deletions
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index ed21ad83a1c..59ff17ad2c1 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -1,12 +1,11 @@ @mixin btn-default { border-radius: 3px; font-size: $gl-font-size; - font-weight: 500; + font-weight: 400; padding: $gl-vert-padding $gl-btn-padding; &:focus, &:active { - outline: none; background-color: $btn-active-gray; box-shadow: $gl-btn-active-background; } @@ -16,7 +15,7 @@ @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; color: $text; border-color: $border; @@ -24,8 +23,14 @@ &:hover, &:focus { background-color: $hover-background; - color: $hover-text; border-color: $hover-border; + color: $hover-text; + } + + &:active { + background-color: $active-background; + border-color: $active-border; + color: $hover-text; } } @@ -63,31 +68,31 @@ } @mixin btn-green { - @include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, #fff); + @include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, $white-light); } @mixin btn-blue { - @include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, #fff); + @include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, $white-light); } @mixin btn-blue-medium { - @include btn-color($blue-medium-light, $border-blue-light, $blue-medium, $border-blue-normal, $blue-medium-dark, $border-blue-dark, #fff); + @include btn-color($blue-medium-light, $border-blue-light, $blue-medium, $border-blue-normal, $blue-medium-dark, $border-blue-dark, $white-light); } @mixin btn-orange { - @include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, #fff); + @include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, $white-light); } @mixin btn-red { - @include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, #fff); + @include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, $white-light); } @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-normal, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, $gl-gray-dark); } @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-gray-dark, $gl-text-color); } @mixin btn-with-margin { @@ -140,7 +145,11 @@ &.btn-new, &.btn-create, &.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 { + @include btn-outline($white-light, $border-red-light, $border-red-light, $red-light, $white-light, $border-red-light, $red-normal, $border-red-normal); } } @@ -162,11 +171,11 @@ } &.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 { - @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, @@ -196,7 +205,7 @@ } .fa-caret-down, - .fa-caret-up { + .fa-chevron-down { margin-left: 5px; } @@ -226,7 +235,7 @@ } .btn-transparent { - color: $btn-transparent-color; + color: $gl-gray-light; background-color: transparent; border: 0; @@ -267,10 +276,6 @@ outline: none; } - &:focus { - outline: none; - } - &:active { outline: none; } @@ -284,8 +289,8 @@ .active { box-shadow: $gl-btn-active-background; - border: 1px solid #c6cacf !important; - background-color: #e4e7ed !important; + border: 1px solid $border-gray-dark !important; + background-color: $btn-active-gray-light !important; } } @@ -304,8 +309,8 @@ text-align: left; padding: 6px 16px; border-color: $border-color; - color: $btn-placeholder-gray; - background-color: $background-color; + color: $gray-darkest; + background-color: $gray-light; &:hover, &:active, @@ -313,8 +318,8 @@ cursor: text; box-shadow: none; border-color: $border-color; - color: $btn-placeholder-gray; - background-color: $background-color; + color: $gray-darkest; + background-color: $gray-light; } } @@ -326,7 +331,7 @@ margin-left: 10px; i { - color: $gl-icon-color; + color: $gl-gray-light; } } @@ -339,14 +344,20 @@ } .btn-static { - background-color: $background-color !important; - border: 1px solid lightgrey; + background-color: $gray-light !important; + border: 1px solid $border-gray-normal; cursor: default; &:active { - -moz-box-shadow: inset 0 0 0 white; - -webkit-box-shadow: inset 0 0 0 white; - box-shadow: inset 0 0 0 white; + -moz-box-shadow: inset 0 0 0 $white-light; + -webkit-box-shadow: inset 0 0 0 $white-light; + box-shadow: inset 0 0 0 $white-light; + } +} + +.btn-inverted { + &-secondary { + @include btn-outline($white-light, $border-blue-light, $border-blue-light, $blue-light, $white-light, $border-blue-light, $blue-normal, $border-blue-normal); } } |