Rename .close to .btn-close, replace times sign with background SVG, update focus state

1 files changed, 21 insertions, 21 deletions

diff --git a/scss/_close.scss b/scss/_close.scss
index dd6541e0d..6bc621f06 100644
--- a/scss/_close.scss
+++ b/scss/_close.scss
@@ -1,36 +1,36 @@
-.close {
-  @include font-size($close-font-size);
-  font-weight: $close-font-weight;
-  line-height: 1;
-  color: $close-color;
-  text-shadow: $close-text-shadow;
+// transparent background and border properties included for button version.
+// iOS requires the button element instead of an anchor tag.
+// If you want the anchor version, it requires `href="#"`.
+// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+
+.btn-close {
+  box-sizing: content-box;
+  width: $btn-close-width;
+  height: $btn-close-height;
+  padding: $btn-close-padding-y $btn-close-padding-x;
+  color: $btn-close-color;
+  background: transparent escape-svg($btn-close-bg) no-repeat center center / $btn-close-width auto; // include transparent for button elements
+  background-clip: content-box;
+  border: 0; // for button elements
+  @include border-radius();
   opacity: .5;
 
   // Override <a>'s hover style
   &:hover {
-    color: $close-color;
+    color: $btn-close-color;
     text-decoration: none;
+    opacity: .75;
   }
 
-  &:hover,
   &:focus {
-    opacity: .75;
+    outline: none;
+    box-shadow: $btn-close-focus-shadow;
+    opacity: 1;
   }
 
   &:disabled,
   &.disabled {
     pointer-events: none;
+    user-select: none;
   }
 }
-
-// Additional properties for button version
-// iOS requires the button element instead of an anchor tag.
-// If you want the anchor version, it requires `href="#"`.
-// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
-
-// stylelint-disable-next-line selector-no-qualifying-type
-button.close {
-  padding: 0;
-  background-color: transparent;
-  border: 0;
-}