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