_close.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  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. // scss-docs-end close-css-vars
  15. box-sizing: content-box;
  16. width: $btn-close-width;
  17. height: $btn-close-height;
  18. padding: $btn-close-padding-y $btn-close-padding-x;
  19. color: var(--#{$prefix}btn-close-color);
  20. background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
  21. filter: var(--#{$prefix}btn-close-filter);
  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. --#{$prefix}btn-close-filter: #{$btn-close-filter-dark};
  45. }
  46. .btn-close-white {
  47. @include btn-close-white();
  48. }
  49. :root,
  50. [data-bs-theme="light"] {
  51. --#{$prefix}btn-close-filter: #{$btn-close-filter};
  52. }
  53. @if $enable-dark-mode {
  54. @include color-mode(dark, true) {
  55. @include btn-close-white();
  56. }
  57. }