You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

40 lines
1.1 KiB

  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. .btn-close {
  6. box-sizing: content-box;
  7. width: $btn-close-width;
  8. height: $btn-close-height;
  9. padding: $btn-close-padding-y $btn-close-padding-x;
  10. color: $btn-close-color;
  11. background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
  12. border: 0; // for button elements
  13. @include border-radius();
  14. opacity: $btn-close-opacity;
  15. // Override <a>'s hover style
  16. &:hover {
  17. color: $btn-close-color;
  18. text-decoration: none;
  19. opacity: $btn-close-hover-opacity;
  20. }
  21. &:focus {
  22. outline: 0;
  23. box-shadow: $btn-close-focus-shadow;
  24. opacity: $btn-close-focus-opacity;
  25. }
  26. &:disabled,
  27. &.disabled {
  28. pointer-events: none;
  29. user-select: none;
  30. opacity: $btn-close-disabled-opacity;
  31. }
  32. }
  33. .btn-close-white {
  34. filter: $btn-close-white-filter;
  35. }