source: Application/ocrent/wwwroot/lib/bootstrap/scss/_accordion.scss

Last change on this file was f5f7c24, checked in by 192011 <mk.snicker@…>, 15 months ago

Initial commit

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