diff options
| author | Jacob Schatz <jschatz@gitlab.com> | 2016-06-01 01:51:33 +0300 |
|---|---|---|
| committer | Jacob Schatz <jschatz@gitlab.com> | 2016-06-01 01:51:33 +0300 |
| commit | 473ea1e974cf07751601904b882de9ee2b3d0618 (patch) | |
| tree | f1a4e0c94aa1a3739f208232771b757953690d88 /app | |
| parent | 09a80feede104004cc00bcfcf1ed425ae7ef28e1 (diff) | |
| parent | 1648316eff2a3ec0058e48af05a4f51343112743 (diff) | |
Merge branch '17756-close-btn' into 'master'
New style for close buttons
## What does this MR do?
Adds new style for all `Close` buttons
## What are the relevant issue numbers?
Closes #17756
## Screenshots (if relevant)
<img src="/uploads/a1d4cb8c22facb4c170e9cf3b4ae439a/Screen_Shot_2016-05-31_at_2.26.42_PM.png" width="800px">
<img src="/uploads/d567694d79ec6bd5da0ff2faf8b262b0/Screen_Shot_2016-05-31_at_2.26.09_PM.png" width="800px">
<img src="/uploads/f5e23d8031427079a334d4e03da466b0/Screen_Shot_2016-05-31_at_2.29.01_PM.png" width="800px">
cc @dzaporozhets
See merge request !4388
Diffstat (limited to 'app')
| -rw-r--r-- | app/assets/stylesheets/framework/buttons.scss | 18 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 2 |
2 files changed, 18 insertions, 2 deletions
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index eaf85bb17ca..467f3b35d74 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -16,6 +16,19 @@ @include btn-default; } +@mixin btn-outline($background, $text, $border, $hover-background, $hover-text, $hover-border) { + background-color: $background; + color: $text; + border-color: $border; + + &:hover, + &:focus { + background-color: $hover-background; + color: $hover-text; + border-color: $hover-border;; + } +} + @mixin btn-color($light, $border-light, $normal, $border-normal, $dark, $border-dark, $color) { background-color: $light; border-color: $border-light; @@ -106,11 +119,14 @@ @include btn-blue; } - &.btn-close, &.btn-warning { @include btn-orange; } + &.btn-close { + @include btn-outline($white-light, $orange-normal, $orange-normal, $orange-light, $white-light, $orange-light); + } + &.btn-danger, &.btn-remove, &.btn-red { diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index c7784e15844..8c54d935b6c 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -104,7 +104,7 @@ $blue-medium-light: #3498cb; $blue-medium: #2f8ebf; $blue-medium-dark: #2d86b4; -$orange-light: rgba(252, 109, 38, 0.80); +$orange-light: #fc8a51; $orange-normal: #e75e40; $orange-dark: #ce5237; |