[Summary view] [Print] [Text view]

   1  // transparent background and border properties included for button version.
   2  // iOS requires the button element instead of an anchor tag.
   3  // If you want the anchor version, it requires `href="#"`.
   4  // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
   5  
   6  .btn-close {
   7    box-sizing: content-box;
   8    width: $btn-close-width;
   9    height: $btn-close-height;
  10    padding: $btn-close-padding-y $btn-close-padding-x;
  11    color: $btn-close-color;
  12    background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
  13    border: 0; // for button elements
  14    @include border-radius();
  15    opacity: $btn-close-opacity;
  16  
  17    // Override <a>'s hover style
  18    &:hover {
  19      color: $btn-close-color;
  20      text-decoration: none;
  21      opacity: $btn-close-hover-opacity;
  22    }
  23  
  24    &:focus {
  25      outline: 0;
  26      box-shadow: $btn-close-focus-shadow;
  27      opacity: $btn-close-focus-opacity;
  28    }
  29  
  30    &:disabled,
  31    &.disabled {
  32      pointer-events: none;
  33      user-select: none;
  34      opacity: $btn-close-disabled-opacity;
  35    }
  36  }
  37  
  38  .btn-close-white {
  39    filter: $btn-close-white-filter;
  40  }