diff options
author | Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com> | 2015-10-08 13:29:14 +0200 |
---|---|---|
committer | Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com> | 2015-10-08 13:29:14 +0200 |
commit | 057b1c317bd27461cce93d93399909e67869b159 (patch) | |
tree | 6994fc65ee6ac558195e8948c56626493af28d4a /app/assets/stylesheets/generic | |
parent | d4892e41449905a98f33e25edcb52aac5d2093be (diff) | |
download | gitlab-ce-057b1c317bd27461cce93d93399909e67869b159.tar.gz |
Add new GitLab colors
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Diffstat (limited to 'app/assets/stylesheets/generic')
-rw-r--r-- | app/assets/stylesheets/generic/buttons.scss | 154 |
1 files changed, 37 insertions, 117 deletions
diff --git a/app/assets/stylesheets/generic/buttons.scss b/app/assets/stylesheets/generic/buttons.scss index 62922e6a330..11acbe3adfa 100644 --- a/app/assets/stylesheets/generic/buttons.scss +++ b/app/assets/stylesheets/generic/buttons.scss @@ -1,6 +1,5 @@ @mixin btn-default { @include border-radius(2px); - border-width: 1px; border-style: solid; text-transform: uppercase; @@ -10,150 +9,62 @@ padding: 11px 16px; letter-spacing: .4px; - &:hover { - border-width: 1px; - border-style: solid; - } - - &:focus { - border-width: 1px; - border-style: solid; - } - + &:focus, &:active { + outline: none; @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); - border-width: 1px; - border-style: solid; } } @mixin btn-middle { + @include btn-default; @include border-radius(2px); - - border-width: 1px; - border-style: solid; - text-transform: uppercase; - font-size: 13px; - font-weight: 600; - line-height: 18px; padding: 11px 24px; - letter-spacing: .4px; - - &:hover { - border-width: 1px; - border-style: solid; - } - - &:focus { - border-width: 1px; - border-style: solid; - } - - &:active { - @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); - border-width: 1px; - border-style: solid; - } } +@mixin btn-color($light, $border-light, $normal, $border-normal, $dark, $border-dark, $color) { + background-color: $light; + border-color: $border-light; + color: $color; -@mixin btn-green { - background-color: #28b061; - border: 1px solid #26a65c; - color: #fff; - - &:hover { - background-color: #26ab5d; - border: 1px solid #229954; - color: #fff; - } - + &:hover, &:focus { - background-color: #26ab5d; - border: 1px solid #229954; - color: #fff; + background-color: $normal; + border-color: $border-normal; + color: $color; } &:active { @include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12)); - background-color: #23a158 !important; - border: 1px solid #229954 !important; - color: #fff !important; + background-color: $dark; + border-color: $border-dark; + color: $color; } } -@mixin btn-gray { - background-color: #f0f2f5; - border-color: #dce0e5; - color: #313236; - - &:hover { - border-color:#dce0e5; - background-color: #ebeef2; - color: #313236; - } - - &:focus { - border-color: #dce0e5; - background-color: #ebeef2; - color: #313236; - } - - &:active { - @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); - - color: #313236 !important; - border-color: #c6cacf !important; - background-color: #e4e7ed !important; - } +@mixin btn-green { + @include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, #FFFFFF); } -@mixin btn-white { - background-color: #fff; - border-color: #dce0e5; - color: #313236; - - &:hover { - border-color:#dce0e5; - background-color: #f0f2f5; - color: #313236; - } - - &:focus { - border-color: #dce0e5; - background-color: #f0f2f5; - color: #313236; - } - - &:active { - @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); +@mixin btn-blue { + @include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, #FFFFFF); +} - color: #313236 !important; - border-color: #c6cacf !important; - background-color: #e4e7ed !important; - } +@mixin btn-orange { + @include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, #FFFFFF); } @mixin btn-red { - background-color: #f72e60; - border-color: #ee295a; - - &:hover { - background-color: #e82757; - border-color: #e32555; - } + @include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, #FFFFFF); +} - &:focus { - background-color: #e82757; - border-color: #e32555; - } +@mixin btn-gray { + @include btn-color($gray-light, $border-gray-light, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, #313236); +} - &:active { - @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); - background-color: #d42450 !important; - border-color: #e12554 !important; - } +@mixin btn-white { + @include btn-color($white-light, $border-white-light, $white-normal, $border-white-normal, $white-dark, $border-white-dark, #313236); } .btn { @@ -172,6 +83,15 @@ @include btn-gray; } + &.btn-primary, + &.btn-info { + @include btn-blue; + } + + &.btn-warning { + @include btn-orange; + } + &.btn-danger, &.btn-remove, &.btn-red { |