bootstrap-scss 5.2.1 → 5.2.3
Sign up to get free protection for your applications and to get access to all the features.
- package/LICENSE +22 -22
- package/README.md +84 -84
- package/_accordion.scss +149 -149
- package/_button-group.scss +142 -142
- package/_buttons.scss +207 -201
- package/_carousel.scss +0 -3
- package/_dropdown.scss +249 -249
- package/_functions.scss +302 -302
- package/_list-group.scss +192 -192
- package/_modal.scss +237 -237
- package/_nav.scss +172 -172
- package/_navbar.scss +278 -278
- package/_offcanvas.scss +144 -144
- package/_pagination.scss +109 -109
- package/_popover.scss +196 -196
- package/_toasts.scss +73 -71
- package/_variables.scss +1634 -1634
- package/bootstrap-utilities.scss +3 -0
- package/forms/_floating-labels.scss +75 -75
- package/forms/_input-group.scss +132 -132
- package/mixins/_banner.scss +9 -9
- package/mixins/_forms.scss +152 -152
- package/mixins/_table-variants.scss +2 -2
- package/mixins/_utilities.scss +97 -97
- package/package.json +26 -26
package/LICENSE
CHANGED
@@ -1,22 +1,22 @@
|
|
1
|
-
The MIT License (MIT)
|
2
|
-
|
3
|
-
Copyright (c) 2011-2022 Twitter, Inc.
|
4
|
-
Copyright (c) 2011-2022 The Bootstrap Authors
|
5
|
-
|
6
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
7
|
-
of this software and associated documentation files (the "Software"), to deal
|
8
|
-
in the Software without restriction, including without limitation the rights
|
9
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
10
|
-
copies of the Software, and to permit persons to whom the Software is
|
11
|
-
furnished to do so, subject to the following conditions:
|
12
|
-
|
13
|
-
The above copyright notice and this permission notice shall be included in
|
14
|
-
all copies or substantial portions of the Software.
|
15
|
-
|
16
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
17
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
18
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
19
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
20
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
21
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
22
|
-
THE SOFTWARE.
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2011-2022 Twitter, Inc.
|
4
|
+
Copyright (c) 2011-2022 The Bootstrap Authors
|
5
|
+
|
6
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
7
|
+
of this software and associated documentation files (the "Software"), to deal
|
8
|
+
in the Software without restriction, including without limitation the rights
|
9
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
10
|
+
copies of the Software, and to permit persons to whom the Software is
|
11
|
+
furnished to do so, subject to the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be included in
|
14
|
+
all copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
17
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
18
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
19
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
20
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
21
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
22
|
+
THE SOFTWARE.
|
package/README.md
CHANGED
@@ -1,84 +1,84 @@
|
|
1
|
-
# Bootstrap SCSS
|
2
|
-
|
3
|
-
> Bootstrap's SCSS files (only)
|
4
|
-
|
5
|
-
<p align="center">
|
6
|
-
<a href="https://getbootstrap.com/">
|
7
|
-
<img src="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-logo-shadow.png" alt="Bootstrap logo" width="200" height="165">
|
8
|
-
</a>
|
9
|
-
</p>
|
10
|
-
|
11
|
-
<h3 align="center">Bootstrap</h3>
|
12
|
-
|
13
|
-
<p align="center">
|
14
|
-
Sleek, intuitive, and powerful front-end framework for faster and easier web development.
|
15
|
-
<br>
|
16
|
-
<a href="https://getbootstrap.com/docs/5.2/"><strong>Explore Bootstrap docs »</strong></a>
|
17
|
-
<br>
|
18
|
-
<br>
|
19
|
-
<a href="https://github.com/twbs/bootstrap/issues/new?template=bug_report.md">Report bug</a>
|
20
|
-
·
|
21
|
-
<a href="https://github.com/twbs/bootstrap/issues/new?template=feature_request.md">Request feature</a>
|
22
|
-
·
|
23
|
-
<a href="https://themes.getbootstrap.com/">Themes</a>
|
24
|
-
·
|
25
|
-
<a href="https://blog.getbootstrap.com/">Blog</a>
|
26
|
-
</p>
|
27
|
-
|
28
|
-
<br>
|
29
|
-
|
30
|
-
## Table of contents
|
31
|
-
|
32
|
-
- [Quick start](#quick-start)
|
33
|
-
- [Status](#status)
|
34
|
-
- [What's included](#whats-included)
|
35
|
-
- [Documentation](#documentation)
|
36
|
-
- [Versioning](#versioning)
|
37
|
-
- [Copyright and license](#copyright-and-license)
|
38
|
-
|
39
|
-
## Quick start
|
40
|
-
|
41
|
-
Several quick start options are available:
|
42
|
-
|
43
|
-
- Install with [npm](https://www.npmjs.com/): `npm install bootstrap-scss`
|
44
|
-
- Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap-scss`
|
45
|
-
|
46
|
-
Read the [Getting started page](https://getbootstrap.com/docs/5.2/getting-started/introduction/) for information on the framework contents, templates and examples, and more.
|
47
|
-
|
48
|
-
## Status
|
49
|
-
|
50
|
-
[![npm version](https://img.shields.io/npm/v/bootstrap-scss.svg)](https://www.npmjs.com/package/bootstrap-scss)
|
51
|
-
|
52
|
-
## What's included
|
53
|
-
|
54
|
-
Within this package you'll find the following directories and files, logically grouping common assets and providing only SCSS variations. You'll see something like this:
|
55
|
-
|
56
|
-
```
|
57
|
-
bootstrap-scss/
|
58
|
-
├── bootstrap.scss
|
59
|
-
├── bootstrap-grid.scss
|
60
|
-
├── bootstrap-reboot.scss
|
61
|
-
├── bootstrap-utilities.css
|
62
|
-
├── mixins/
|
63
|
-
│ └─ ...
|
64
|
-
└── utilities/
|
65
|
-
└─ ...
|
66
|
-
└── vendor/
|
67
|
-
└─ ...
|
68
|
-
```
|
69
|
-
|
70
|
-
## Documentation
|
71
|
-
|
72
|
-
[Bootstrap's official documentation](https://getbootstrap.com/) powered by [Algolia's DocSearch](https://community.algolia.com/docsearch/).
|
73
|
-
|
74
|
-
## Versioning
|
75
|
-
|
76
|
-
For simplicity, this project will use the same version numbers as Bootstrap.
|
77
|
-
|
78
|
-
## Changelog
|
79
|
-
|
80
|
-
https://github.com/twbs/bootstrap/releases/tag/v5.2.
|
81
|
-
|
82
|
-
## Copyright and license
|
83
|
-
|
84
|
-
Code and documentation copyright 2011-2022 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors) and [Twitter, Inc.](https://twitter.com) Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE).
|
1
|
+
# Bootstrap SCSS
|
2
|
+
|
3
|
+
> Bootstrap's SCSS files (only)
|
4
|
+
|
5
|
+
<p align="center">
|
6
|
+
<a href="https://getbootstrap.com/">
|
7
|
+
<img src="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-logo-shadow.png" alt="Bootstrap logo" width="200" height="165">
|
8
|
+
</a>
|
9
|
+
</p>
|
10
|
+
|
11
|
+
<h3 align="center">Bootstrap</h3>
|
12
|
+
|
13
|
+
<p align="center">
|
14
|
+
Sleek, intuitive, and powerful front-end framework for faster and easier web development.
|
15
|
+
<br>
|
16
|
+
<a href="https://getbootstrap.com/docs/5.2/"><strong>Explore Bootstrap docs »</strong></a>
|
17
|
+
<br>
|
18
|
+
<br>
|
19
|
+
<a href="https://github.com/twbs/bootstrap/issues/new?template=bug_report.md">Report bug</a>
|
20
|
+
·
|
21
|
+
<a href="https://github.com/twbs/bootstrap/issues/new?template=feature_request.md">Request feature</a>
|
22
|
+
·
|
23
|
+
<a href="https://themes.getbootstrap.com/">Themes</a>
|
24
|
+
·
|
25
|
+
<a href="https://blog.getbootstrap.com/">Blog</a>
|
26
|
+
</p>
|
27
|
+
|
28
|
+
<br>
|
29
|
+
|
30
|
+
## Table of contents
|
31
|
+
|
32
|
+
- [Quick start](#quick-start)
|
33
|
+
- [Status](#status)
|
34
|
+
- [What's included](#whats-included)
|
35
|
+
- [Documentation](#documentation)
|
36
|
+
- [Versioning](#versioning)
|
37
|
+
- [Copyright and license](#copyright-and-license)
|
38
|
+
|
39
|
+
## Quick start
|
40
|
+
|
41
|
+
Several quick start options are available:
|
42
|
+
|
43
|
+
- Install with [npm](https://www.npmjs.com/): `npm install bootstrap-scss`
|
44
|
+
- Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap-scss`
|
45
|
+
|
46
|
+
Read the [Getting started page](https://getbootstrap.com/docs/5.2/getting-started/introduction/) for information on the framework contents, templates and examples, and more.
|
47
|
+
|
48
|
+
## Status
|
49
|
+
|
50
|
+
[![npm version](https://img.shields.io/npm/v/bootstrap-scss.svg)](https://www.npmjs.com/package/bootstrap-scss)
|
51
|
+
|
52
|
+
## What's included
|
53
|
+
|
54
|
+
Within this package you'll find the following directories and files, logically grouping common assets and providing only SCSS variations. You'll see something like this:
|
55
|
+
|
56
|
+
```
|
57
|
+
bootstrap-scss/
|
58
|
+
├── bootstrap.scss
|
59
|
+
├── bootstrap-grid.scss
|
60
|
+
├── bootstrap-reboot.scss
|
61
|
+
├── bootstrap-utilities.css
|
62
|
+
├── mixins/
|
63
|
+
│ └─ ...
|
64
|
+
└── utilities/
|
65
|
+
└─ ...
|
66
|
+
└── vendor/
|
67
|
+
└─ ...
|
68
|
+
```
|
69
|
+
|
70
|
+
## Documentation
|
71
|
+
|
72
|
+
[Bootstrap's official documentation](https://getbootstrap.com/) powered by [Algolia's DocSearch](https://community.algolia.com/docsearch/).
|
73
|
+
|
74
|
+
## Versioning
|
75
|
+
|
76
|
+
For simplicity, this project will use the same version numbers as Bootstrap.
|
77
|
+
|
78
|
+
## Changelog
|
79
|
+
|
80
|
+
https://github.com/twbs/bootstrap/releases/tag/v5.2.3
|
81
|
+
|
82
|
+
## Copyright and license
|
83
|
+
|
84
|
+
Code and documentation copyright 2011-2022 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors) and [Twitter, Inc.](https://twitter.com) Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE).
|
package/_accordion.scss
CHANGED
@@ -1,149 +1,149 @@
|
|
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
|
-
}
|
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
|
+
}
|