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