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.

_accordion.scss 5.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. //
  2. // Base styles
  3. //
  4. .accordion {
  5. // scss-docs-start accordion-css-vars
  6. --#{$prefix}accordion-color: #{$accordion-color};
  7. --#{$prefix}accordion-bg: #{$accordion-bg};
  8. --#{$prefix}accordion-transition: #{$accordion-transition};
  9. --#{$prefix}accordion-border-color: #{$accordion-border-color};
  10. --#{$prefix}accordion-border-width: #{$accordion-border-width};
  11. --#{$prefix}accordion-border-radius: #{$accordion-border-radius};
  12. --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
  13. --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
  14. --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
  15. --#{$prefix}accordion-btn-color: #{$accordion-button-color};
  16. --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
  17. --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
  18. --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
  19. --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
  20. --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
  21. --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
  22. --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
  23. --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
  24. --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
  25. --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
  26. --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
  27. // scss-docs-end accordion-css-vars
  28. }
  29. .accordion-button {
  30. position: relative;
  31. display: flex;
  32. align-items: center;
  33. width: 100%;
  34. padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
  35. @include font-size($font-size-base);
  36. color: var(--#{$prefix}accordion-btn-color);
  37. text-align: left; // Reset button style
  38. background-color: var(--#{$prefix}accordion-btn-bg);
  39. border: 0;
  40. @include border-radius(0);
  41. overflow-anchor: none;
  42. @include transition(var(--#{$prefix}accordion-transition));
  43. &:not(.collapsed) {
  44. color: var(--#{$prefix}accordion-active-color);
  45. background-color: var(--#{$prefix}accordion-active-bg);
  46. box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
  47. &::after {
  48. background-image: var(--#{$prefix}accordion-btn-active-icon);
  49. transform: var(--#{$prefix}accordion-btn-icon-transform);
  50. }
  51. }
  52. // Accordion icon
  53. &::after {
  54. flex-shrink: 0;
  55. width: var(--#{$prefix}accordion-btn-icon-width);
  56. height: var(--#{$prefix}accordion-btn-icon-width);
  57. margin-left: auto;
  58. content: "";
  59. background-image: var(--#{$prefix}accordion-btn-icon);
  60. background-repeat: no-repeat;
  61. background-size: var(--#{$prefix}accordion-btn-icon-width);
  62. @include transition(var(--#{$prefix}accordion-btn-icon-transition));
  63. }
  64. &:hover {
  65. z-index: 2;
  66. }
  67. &:focus {
  68. z-index: 3;
  69. outline: 0;
  70. box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
  71. }
  72. }
  73. .accordion-header {
  74. margin-bottom: 0;
  75. }
  76. .accordion-item {
  77. color: var(--#{$prefix}accordion-color);
  78. background-color: var(--#{$prefix}accordion-bg);
  79. border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
  80. &:first-of-type {
  81. @include border-top-radius(var(--#{$prefix}accordion-border-radius));
  82. > .accordion-header .accordion-button {
  83. @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
  84. }
  85. }
  86. &:not(:first-of-type) {
  87. border-top: 0;
  88. }
  89. // Only set a border-radius on the last item if the accordion is collapsed
  90. &:last-of-type {
  91. @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
  92. > .accordion-header .accordion-button {
  93. &.collapsed {
  94. @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
  95. }
  96. }
  97. > .accordion-collapse {
  98. @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
  99. }
  100. }
  101. }
  102. .accordion-body {
  103. padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
  104. }
  105. // Flush accordion items
  106. //
  107. // Remove borders and border-radius to keep accordion items edge-to-edge.
  108. .accordion-flush {
  109. > .accordion-item {
  110. border-right: 0;
  111. border-left: 0;
  112. @include border-radius(0);
  113. &:first-child { border-top: 0; }
  114. &:last-child { border-bottom: 0; }
  115. // stylelint-disable selector-max-class
  116. > .accordion-header .accordion-button {
  117. &,
  118. &.collapsed {
  119. @include border-radius(0);
  120. }
  121. }
  122. // stylelint-enable selector-max-class
  123. > .accordion-collapse {
  124. @include border-radius(0);
  125. }
  126. }
  127. }
  128. @if $enable-dark-mode {
  129. @include color-mode(dark) {
  130. .accordion-button::after {
  131. --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
  132. --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
  133. }
  134. }
  135. }