| 1441 |
ariadna |
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 |
}
|