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.

63 lines
2.0 KiB

8 months ago
  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. // scss-docs-start close-css-vars
  7. --#{$prefix}btn-close-color: #{$btn-close-color};
  8. --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
  9. --#{$prefix}btn-close-opacity: #{$btn-close-opacity};
  10. --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
  11. --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
  12. --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
  13. --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
  14. --#{$prefix}btn-close-white-filter: #{$btn-close-white-filter};
  15. // scss-docs-end close-css-vars
  16. box-sizing: content-box;
  17. width: $btn-close-width;
  18. height: $btn-close-height;
  19. padding: $btn-close-padding-y $btn-close-padding-x;
  20. color: var(--#{$prefix}btn-close-color);
  21. background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
  22. border: 0; // for button elements
  23. @include border-radius();
  24. opacity: var(--#{$prefix}btn-close-opacity);
  25. // Override <a>'s hover style
  26. &:hover {
  27. color: var(--#{$prefix}btn-close-color);
  28. text-decoration: none;
  29. opacity: var(--#{$prefix}btn-close-hover-opacity);
  30. }
  31. &:focus {
  32. outline: 0;
  33. box-shadow: var(--#{$prefix}btn-close-focus-shadow);
  34. opacity: var(--#{$prefix}btn-close-focus-opacity);
  35. }
  36. &:disabled,
  37. &.disabled {
  38. pointer-events: none;
  39. user-select: none;
  40. opacity: var(--#{$prefix}btn-close-disabled-opacity);
  41. }
  42. }
  43. @mixin btn-close-white() {
  44. filter: var(--#{$prefix}btn-close-white-filter);
  45. }
  46. .btn-close-white {
  47. @include btn-close-white();
  48. }
  49. @if $enable-dark-mode {
  50. @include color-mode(dark) {
  51. .btn-close {
  52. @include btn-close-white();
  53. }
  54. }
  55. }