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.

118 lines
2.6 KiB

  1. //
  2. // Base styles
  3. //
  4. .accordion-button {
  5. position: relative;
  6. display: flex;
  7. align-items: center;
  8. width: 100%;
  9. padding: $accordion-button-padding-y $accordion-button-padding-x;
  10. @include font-size($font-size-base);
  11. color: $accordion-button-color;
  12. text-align: left; // Reset button style
  13. background-color: $accordion-button-bg;
  14. border: 0;
  15. @include border-radius(0);
  16. overflow-anchor: none;
  17. @include transition($accordion-transition);
  18. &:not(.collapsed) {
  19. color: $accordion-button-active-color;
  20. background-color: $accordion-button-active-bg;
  21. box-shadow: inset 0 ($accordion-border-width * -1) 0 $accordion-border-color;
  22. &::after {
  23. background-image: escape-svg($accordion-button-active-icon);
  24. transform: $accordion-icon-transform;
  25. }
  26. }
  27. // Accordion icon
  28. &::after {
  29. flex-shrink: 0;
  30. width: $accordion-icon-width;
  31. height: $accordion-icon-width;
  32. margin-left: auto;
  33. content: "";
  34. background-image: escape-svg($accordion-button-icon);
  35. background-repeat: no-repeat;
  36. background-size: $accordion-icon-width;
  37. @include transition($accordion-icon-transition);
  38. }
  39. &:hover {
  40. z-index: 2;
  41. }
  42. &:focus {
  43. z-index: 3;
  44. border-color: $accordion-button-focus-border-color;
  45. outline: 0;
  46. box-shadow: $accordion-button-focus-box-shadow;
  47. }
  48. }
  49. .accordion-header {
  50. margin-bottom: 0;
  51. }
  52. .accordion-item {
  53. background-color: $accordion-bg;
  54. border: $accordion-border-width solid $accordion-border-color;
  55. &:first-of-type {
  56. @include border-top-radius($accordion-border-radius);
  57. .accordion-button {
  58. @include border-top-radius($accordion-inner-border-radius);
  59. }
  60. }
  61. &:not(:first-of-type) {
  62. border-top: 0;
  63. }
  64. // Only set a border-radius on the last item if the accordion is collapsed
  65. &:last-of-type {
  66. @include border-bottom-radius($accordion-border-radius);
  67. .accordion-button {
  68. &.collapsed {
  69. @include border-bottom-radius($accordion-inner-border-radius);
  70. }
  71. }
  72. .accordion-collapse {
  73. @include border-bottom-radius($accordion-border-radius);
  74. }
  75. }
  76. }
  77. .accordion-body {
  78. padding: $accordion-body-padding-y $accordion-body-padding-x;
  79. }
  80. // Flush accordion items
  81. //
  82. // Remove borders and border-radius to keep accordion items edge-to-edge.
  83. .accordion-flush {
  84. .accordion-collapse {
  85. border-width: 0;
  86. }
  87. .accordion-item {
  88. border-right: 0;
  89. border-left: 0;
  90. @include border-radius(0);
  91. &:first-child { border-top: 0; }
  92. &:last-child { border-bottom: 0; }
  93. .accordion-button {
  94. @include border-radius(0);
  95. }
  96. }
  97. }