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
This commit is contained in:
Jacob Schatz 2016-05-31 22:51:33 +00:00
commit 473ea1e974
2 changed files with 18 additions and 2 deletions

View file

@ -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 {

View file

@ -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;