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