Add opacity variables, set opacity on disabled state

diff --git a/scss/_close.scss b/scss/_close.scss
index 6bc621f06771ef52c031592a6639264aa1a7617e..037df16669d2b9cc68daf7f1680e914dc06f613b 100644 (file)
--- a/scss/_close.scss
+++ b/scss/_close.scss
@@ -13,24 +13,25 @@
   background-clip: content-box;
   border: 0; // for button elements
   @include border-radius();
-  opacity: .5;
+  opacity: $btn-close-opacity;
 
   // Override <a>'s hover style
   &:hover {
     color: $btn-close-color;
     text-decoration: none;
-    opacity: .75;
+    opacity: $btn-close-hover-opacity;
   }
 
   &:focus {
     outline: none;
     box-shadow: $btn-close-focus-shadow;
-    opacity: 1;
+    opacity: $btn-close-focus-opacity;
   }
 
   &:disabled,
   &.disabled {
     pointer-events: none;
     user-select: none;
+    opacity: $btn-close-disabled-opacity;
   }
 }

diff --git a/scss/_variables.scss b/scss/_variables.scss
index b5fb6a000c929ee5d77971c86579f6f33bc448e2..84a1f4abc46f7024dd615e935ee0803b812aec8f 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1276,6 +1276,10 @@ $btn-close-padding-y:       $btn-close-padding-x !default;
 $btn-close-color:           $black !default;
 $btn-close-bg:              url("data:image/svg+xml,<svg fill='#{$btn-close-color}' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
 $btn-close-focus-shadow:    $input-btn-focus-box-shadow !default;
+$btn-close-opacity:         .5 !default;
+$btn-close-hover-opacity:   .75 !default;
+$btn-close-focus-opacity:   1 !default;
+$btn-close-disabled-opacity: .25 !default;
 
 // Code