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

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 {

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;