source: imaps-frontend/node_modules/bootstrap/scss/_accordion.scss

main
Last change on this file was d565449, checked in by stefan toskovski <stefantoska84@…>, 4 weeks ago

Update repo after prototype presentation

  • Property mode set to 100644
File size: 5.0 KB
Line 
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}
Note: See TracBrowser for help on using the repository browser.