New style for close buttons17756-close-btn

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;