vitat-css 0.1.1 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.DS_Store +0 -0
- data/.gitignore +146 -8
- data/HTML/.DS_Store +0 -0
- data/HTML/Components/Arabescos.html +87 -0
- data/HTML/Components/Buttons.html +105 -0
- data/HTML/Components/Card.html +337 -0
- data/HTML/Components/CardApp.html +201 -0
- data/HTML/Components/Inputs.html +105 -0
- data/HTML/Components/Lista.html +106 -0
- data/HTML/Components/Pagination.html +218 -0
- data/HTML/Components/Pills.html +94 -0
- data/HTML/Components/Revisado.html +163 -0
- data/JS/prism.js +12 -0
- data/bootstrap/scss/_accordion.scss +118 -0
- data/bootstrap/scss/_alert.scss +57 -0
- data/bootstrap/scss/_badge.scss +29 -0
- data/bootstrap/scss/_breadcrumb.scss +28 -0
- data/bootstrap/scss/_button-group.scss +139 -0
- data/bootstrap/scss/_buttons.scss +111 -0
- data/bootstrap/scss/_card.scss +216 -0
- data/bootstrap/scss/_carousel.scss +229 -0
- data/bootstrap/scss/_close.scss +40 -0
- data/bootstrap/scss/_containers.scss +41 -0
- data/bootstrap/scss/_dropdown.scss +240 -0
- data/bootstrap/scss/_forms.scss +9 -0
- data/bootstrap/scss/_functions.scss +302 -0
- data/bootstrap/scss/_grid.scss +33 -0
- data/bootstrap/scss/_helpers.scss +9 -0
- data/bootstrap/scss/_images.scss +42 -0
- data/bootstrap/scss/_list-group.scss +174 -0
- data/bootstrap/scss/_mixins.scss +43 -0
- data/bootstrap/scss/_modal.scss +209 -0
- data/bootstrap/scss/_nav.scss +139 -0
- data/bootstrap/scss/_navbar.scss +335 -0
- data/bootstrap/scss/_offcanvas.scss +83 -0
- data/bootstrap/scss/_pagination.scss +64 -0
- data/bootstrap/scss/_placeholders.scss +51 -0
- data/bootstrap/scss/_popover.scss +158 -0
- data/bootstrap/scss/_progress.scss +48 -0
- data/bootstrap/scss/_reboot.scss +625 -0
- data/bootstrap/scss/_root.scss +54 -0
- data/bootstrap/scss/_spinners.scss +69 -0
- data/bootstrap/scss/_tables.scss +155 -0
- data/bootstrap/scss/_toasts.scss +51 -0
- data/bootstrap/scss/_tooltip.scss +115 -0
- data/bootstrap/scss/_transitions.scss +27 -0
- data/bootstrap/scss/_type.scss +104 -0
- data/bootstrap/scss/_utilities.scss +630 -0
- data/bootstrap/scss/_variables.scss +1641 -0
- data/bootstrap/scss/bootstrap-grid.scss +67 -0
- data/bootstrap/scss/bootstrap-reboot.scss +13 -0
- data/bootstrap/scss/bootstrap-utilities.scss +18 -0
- data/bootstrap/scss/bootstrap.scss +53 -0
- data/bootstrap/scss/forms/_floating-labels.scss +63 -0
- data/bootstrap/scss/forms/_form-check.scss +152 -0
- data/bootstrap/scss/forms/_form-control.scss +219 -0
- data/bootstrap/scss/forms/_form-range.scss +91 -0
- data/bootstrap/scss/forms/_form-select.scss +72 -0
- data/bootstrap/scss/forms/_form-text.scss +11 -0
- data/bootstrap/scss/forms/_input-group.scss +121 -0
- data/bootstrap/scss/forms/_labels.scss +36 -0
- data/bootstrap/scss/forms/_validation.scss +12 -0
- data/bootstrap/scss/helpers/_clearfix.scss +3 -0
- data/bootstrap/scss/helpers/_colored-links.scss +12 -0
- data/bootstrap/scss/helpers/_position.scss +30 -0
- data/bootstrap/scss/helpers/_ratio.scss +26 -0
- data/bootstrap/scss/helpers/_stacks.scss +15 -0
- data/bootstrap/scss/helpers/_stretched-link.scss +15 -0
- data/bootstrap/scss/helpers/_text-truncation.scss +7 -0
- data/bootstrap/scss/helpers/_visually-hidden.scss +8 -0
- data/bootstrap/scss/helpers/_vr.scss +8 -0
- data/bootstrap/scss/mixins/_alert.scss +11 -0
- data/bootstrap/scss/mixins/_backdrop.scss +14 -0
- data/bootstrap/scss/mixins/_border-radius.scss +78 -0
- data/bootstrap/scss/mixins/_box-shadow.scss +18 -0
- data/bootstrap/scss/mixins/_breakpoints.scss +127 -0
- data/bootstrap/scss/mixins/_buttons.scss +133 -0
- data/bootstrap/scss/mixins/_caret.scss +64 -0
- data/bootstrap/scss/mixins/_clearfix.scss +9 -0
- data/bootstrap/scss/mixins/_color-scheme.scss +7 -0
- data/bootstrap/scss/mixins/_container.scss +9 -0
- data/bootstrap/scss/mixins/_deprecate.scss +10 -0
- data/bootstrap/scss/mixins/_forms.scss +144 -0
- data/bootstrap/scss/mixins/_gradients.scss +47 -0
- data/bootstrap/scss/mixins/_grid.scss +151 -0
- data/bootstrap/scss/mixins/_image.scss +16 -0
- data/bootstrap/scss/mixins/_list-group.scss +24 -0
- data/bootstrap/scss/mixins/_lists.scss +7 -0
- data/bootstrap/scss/mixins/_pagination.scss +31 -0
- data/bootstrap/scss/mixins/_reset-text.scss +17 -0
- data/bootstrap/scss/mixins/_resize.scss +6 -0
- data/bootstrap/scss/mixins/_table-variants.scss +21 -0
- data/bootstrap/scss/mixins/_text-truncate.scss +8 -0
- data/bootstrap/scss/mixins/_transition.scss +26 -0
- data/bootstrap/scss/mixins/_utilities.scss +89 -0
- data/bootstrap/scss/mixins/_visually-hidden.scss +29 -0
- data/bootstrap/scss/utilities/_api.scss +47 -0
- data/bootstrap/scss/vendor/_rfs.scss +354 -0
- data/css/.DS_Store +0 -0
- data/css/prism.css +4 -0
- data/css/style.css +6 -0
- data/gulpfile.js +35 -0
- data/img/.DS_Store +0 -0
- data/img/arrow-active.png +0 -0
- data/img/arrow-disable.png +0 -0
- data/img/arrow.png +0 -0
- data/img/close.png +0 -0
- data/img/phone.png +0 -0
- data/img/placeholder.png +0 -0
- data/img/placeholder_avatar.png +0 -0
- data/img/qr-code-loja.png +0 -0
- data/img/store_icon.png +0 -0
- data/index.html +33 -0
- data/install_nvm.sh +425 -0
- data/lib/vitat/css/version.rb +1 -1
- data/package-lock.json +4233 -0
- data/package.json +9 -0
- data/scss/.DS_Store +0 -0
- data/scss/guide/.DS_Store +0 -0
- data/scss/guide/_variables.scss +171 -0
- data/scss/guide/components/_animations.scss +8 -0
- data/scss/guide/components/_typography.scss +157 -0
- data/scss/guide/components/arabescos/arabescos.scss +47 -0
- data/scss/guide/components/buttons/btn.scss +26 -0
- data/scss/guide/components/buttons/btn__large.scss +10 -0
- data/scss/guide/components/buttons/btn__primary.scss +11 -0
- data/scss/guide/components/buttons/btn__secondary.scss +11 -0
- data/scss/guide/components/buttons/btn__tertiary.scss +11 -0
- data/scss/guide/components/cardapp/cardapp.scss +151 -0
- data/scss/guide/components/cards/card.scss +58 -0
- data/scss/guide/components/cards/card__horizontal.scss +35 -0
- data/scss/guide/components/cards/card__horizontal__small.scss +9 -0
- data/scss/guide/components/inputs/_checkbox.scss +45 -0
- data/scss/guide/components/inputs/_text.scss +8 -0
- data/scss/guide/components/lista/lista.scss +31 -0
- data/scss/guide/components/pagination/pagination.scss +81 -0
- data/scss/guide/components/pills/pill.scss +31 -0
- data/scss/guide/components/pills/pill__full.scss +8 -0
- data/scss/guide/components/pills/pill__secundary.scss +8 -0
- data/scss/guide/components/pills/pill__small.scss +8 -0
- data/scss/guide/components/revisado/revisado.scss +52 -0
- data/scss/guide/style.scss +96 -0
- data/vitat-css-0.1.1.gem +0 -0
- data/vitat-css-0.1.2.gem +0 -0
- data/vitat-css.gemspec +1 -1
- metadata +145 -3
@@ -0,0 +1,216 @@
|
|
1
|
+
//
|
2
|
+
// Base styles
|
3
|
+
//
|
4
|
+
|
5
|
+
.card {
|
6
|
+
position: relative;
|
7
|
+
display: flex;
|
8
|
+
flex-direction: column;
|
9
|
+
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
|
10
|
+
height: $card-height;
|
11
|
+
word-wrap: break-word;
|
12
|
+
background-color: $card-bg;
|
13
|
+
background-clip: border-box;
|
14
|
+
border: $card-border-width solid $card-border-color;
|
15
|
+
@include border-radius($card-border-radius);
|
16
|
+
@include box-shadow($card-box-shadow);
|
17
|
+
|
18
|
+
> hr {
|
19
|
+
margin-right: 0;
|
20
|
+
margin-left: 0;
|
21
|
+
}
|
22
|
+
|
23
|
+
> .list-group {
|
24
|
+
border-top: inherit;
|
25
|
+
border-bottom: inherit;
|
26
|
+
|
27
|
+
&:first-child {
|
28
|
+
border-top-width: 0;
|
29
|
+
@include border-top-radius($card-inner-border-radius);
|
30
|
+
}
|
31
|
+
|
32
|
+
&:last-child {
|
33
|
+
border-bottom-width: 0;
|
34
|
+
@include border-bottom-radius($card-inner-border-radius);
|
35
|
+
}
|
36
|
+
}
|
37
|
+
|
38
|
+
// Due to specificity of the above selector (`.card > .list-group`), we must
|
39
|
+
// use a child selector here to prevent double borders.
|
40
|
+
> .card-header + .list-group,
|
41
|
+
> .list-group + .card-footer {
|
42
|
+
border-top: 0;
|
43
|
+
}
|
44
|
+
}
|
45
|
+
|
46
|
+
.card-body {
|
47
|
+
// Enable `flex-grow: 1` for decks and groups so that card blocks take up
|
48
|
+
// as much space as possible, ensuring footers are aligned to the bottom.
|
49
|
+
flex: 1 1 auto;
|
50
|
+
padding: $card-spacer-y $card-spacer-x;
|
51
|
+
color: $card-color;
|
52
|
+
}
|
53
|
+
|
54
|
+
.card-title {
|
55
|
+
margin-bottom: $card-title-spacer-y;
|
56
|
+
}
|
57
|
+
|
58
|
+
.card-subtitle {
|
59
|
+
margin-top: -$card-title-spacer-y * .5;
|
60
|
+
margin-bottom: 0;
|
61
|
+
}
|
62
|
+
|
63
|
+
.card-text:last-child {
|
64
|
+
margin-bottom: 0;
|
65
|
+
}
|
66
|
+
|
67
|
+
.card-link {
|
68
|
+
&:hover {
|
69
|
+
text-decoration: if($link-hover-decoration == underline, none, null);
|
70
|
+
}
|
71
|
+
|
72
|
+
+ .card-link {
|
73
|
+
margin-left: $card-spacer-x;
|
74
|
+
}
|
75
|
+
}
|
76
|
+
|
77
|
+
//
|
78
|
+
// Optional textual caps
|
79
|
+
//
|
80
|
+
|
81
|
+
.card-header {
|
82
|
+
padding: $card-cap-padding-y $card-cap-padding-x;
|
83
|
+
margin-bottom: 0; // Removes the default margin-bottom of <hN>
|
84
|
+
color: $card-cap-color;
|
85
|
+
background-color: $card-cap-bg;
|
86
|
+
border-bottom: $card-border-width solid $card-border-color;
|
87
|
+
|
88
|
+
&:first-child {
|
89
|
+
@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
|
90
|
+
}
|
91
|
+
}
|
92
|
+
|
93
|
+
.card-footer {
|
94
|
+
padding: $card-cap-padding-y $card-cap-padding-x;
|
95
|
+
color: $card-cap-color;
|
96
|
+
background-color: $card-cap-bg;
|
97
|
+
border-top: $card-border-width solid $card-border-color;
|
98
|
+
|
99
|
+
&:last-child {
|
100
|
+
@include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
|
101
|
+
}
|
102
|
+
}
|
103
|
+
|
104
|
+
|
105
|
+
//
|
106
|
+
// Header navs
|
107
|
+
//
|
108
|
+
|
109
|
+
.card-header-tabs {
|
110
|
+
margin-right: -$card-cap-padding-x * .5;
|
111
|
+
margin-bottom: -$card-cap-padding-y;
|
112
|
+
margin-left: -$card-cap-padding-x * .5;
|
113
|
+
border-bottom: 0;
|
114
|
+
|
115
|
+
@if $nav-tabs-link-active-bg != $card-bg {
|
116
|
+
.nav-link.active {
|
117
|
+
background-color: $card-bg;
|
118
|
+
border-bottom-color: $card-bg;
|
119
|
+
}
|
120
|
+
}
|
121
|
+
}
|
122
|
+
|
123
|
+
.card-header-pills {
|
124
|
+
margin-right: -$card-cap-padding-x * .5;
|
125
|
+
margin-left: -$card-cap-padding-x * .5;
|
126
|
+
}
|
127
|
+
|
128
|
+
// Card image
|
129
|
+
.card-img-overlay {
|
130
|
+
position: absolute;
|
131
|
+
top: 0;
|
132
|
+
right: 0;
|
133
|
+
bottom: 0;
|
134
|
+
left: 0;
|
135
|
+
padding: $card-img-overlay-padding;
|
136
|
+
@include border-radius($card-inner-border-radius);
|
137
|
+
}
|
138
|
+
|
139
|
+
.card-img,
|
140
|
+
.card-img-top,
|
141
|
+
.card-img-bottom {
|
142
|
+
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
143
|
+
}
|
144
|
+
|
145
|
+
.card-img,
|
146
|
+
.card-img-top {
|
147
|
+
@include border-top-radius($card-inner-border-radius);
|
148
|
+
}
|
149
|
+
|
150
|
+
.card-img,
|
151
|
+
.card-img-bottom {
|
152
|
+
@include border-bottom-radius($card-inner-border-radius);
|
153
|
+
}
|
154
|
+
|
155
|
+
|
156
|
+
//
|
157
|
+
// Card groups
|
158
|
+
//
|
159
|
+
|
160
|
+
.card-group {
|
161
|
+
// The child selector allows nested `.card` within `.card-group`
|
162
|
+
// to display properly.
|
163
|
+
> .card {
|
164
|
+
margin-bottom: $card-group-margin;
|
165
|
+
}
|
166
|
+
|
167
|
+
@include media-breakpoint-up(sm) {
|
168
|
+
display: flex;
|
169
|
+
flex-flow: row wrap;
|
170
|
+
// The child selector allows nested `.card` within `.card-group`
|
171
|
+
// to display properly.
|
172
|
+
> .card {
|
173
|
+
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
|
174
|
+
flex: 1 0 0%;
|
175
|
+
margin-bottom: 0;
|
176
|
+
|
177
|
+
+ .card {
|
178
|
+
margin-left: 0;
|
179
|
+
border-left: 0;
|
180
|
+
}
|
181
|
+
|
182
|
+
// Handle rounded corners
|
183
|
+
@if $enable-rounded {
|
184
|
+
&:not(:last-child) {
|
185
|
+
@include border-end-radius(0);
|
186
|
+
|
187
|
+
.card-img-top,
|
188
|
+
.card-header {
|
189
|
+
// stylelint-disable-next-line property-disallowed-list
|
190
|
+
border-top-right-radius: 0;
|
191
|
+
}
|
192
|
+
.card-img-bottom,
|
193
|
+
.card-footer {
|
194
|
+
// stylelint-disable-next-line property-disallowed-list
|
195
|
+
border-bottom-right-radius: 0;
|
196
|
+
}
|
197
|
+
}
|
198
|
+
|
199
|
+
&:not(:first-child) {
|
200
|
+
@include border-start-radius(0);
|
201
|
+
|
202
|
+
.card-img-top,
|
203
|
+
.card-header {
|
204
|
+
// stylelint-disable-next-line property-disallowed-list
|
205
|
+
border-top-left-radius: 0;
|
206
|
+
}
|
207
|
+
.card-img-bottom,
|
208
|
+
.card-footer {
|
209
|
+
// stylelint-disable-next-line property-disallowed-list
|
210
|
+
border-bottom-left-radius: 0;
|
211
|
+
}
|
212
|
+
}
|
213
|
+
}
|
214
|
+
}
|
215
|
+
}
|
216
|
+
}
|
@@ -0,0 +1,229 @@
|
|
1
|
+
// Notes on the classes:
|
2
|
+
//
|
3
|
+
// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
|
4
|
+
// even when their scroll action started on a carousel, but for compatibility (with Firefox)
|
5
|
+
// we're preventing all actions instead
|
6
|
+
// 2. The .carousel-item-start and .carousel-item-end is used to indicate where
|
7
|
+
// the active slide is heading.
|
8
|
+
// 3. .active.carousel-item is the current slide.
|
9
|
+
// 4. .active.carousel-item-start and .active.carousel-item-end is the current
|
10
|
+
// slide in its in-transition state. Only one of these occurs at a time.
|
11
|
+
// 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end
|
12
|
+
// is the upcoming slide in transition.
|
13
|
+
|
14
|
+
.carousel {
|
15
|
+
position: relative;
|
16
|
+
}
|
17
|
+
|
18
|
+
.carousel.pointer-event {
|
19
|
+
touch-action: pan-y;
|
20
|
+
}
|
21
|
+
|
22
|
+
.carousel-inner {
|
23
|
+
position: relative;
|
24
|
+
width: 100%;
|
25
|
+
overflow: hidden;
|
26
|
+
@include clearfix();
|
27
|
+
}
|
28
|
+
|
29
|
+
.carousel-item {
|
30
|
+
position: relative;
|
31
|
+
display: none;
|
32
|
+
float: left;
|
33
|
+
width: 100%;
|
34
|
+
margin-right: -100%;
|
35
|
+
backface-visibility: hidden;
|
36
|
+
@include transition($carousel-transition);
|
37
|
+
}
|
38
|
+
|
39
|
+
.carousel-item.active,
|
40
|
+
.carousel-item-next,
|
41
|
+
.carousel-item-prev {
|
42
|
+
display: block;
|
43
|
+
}
|
44
|
+
|
45
|
+
/* rtl:begin:ignore */
|
46
|
+
.carousel-item-next:not(.carousel-item-start),
|
47
|
+
.active.carousel-item-end {
|
48
|
+
transform: translateX(100%);
|
49
|
+
}
|
50
|
+
|
51
|
+
.carousel-item-prev:not(.carousel-item-end),
|
52
|
+
.active.carousel-item-start {
|
53
|
+
transform: translateX(-100%);
|
54
|
+
}
|
55
|
+
|
56
|
+
/* rtl:end:ignore */
|
57
|
+
|
58
|
+
|
59
|
+
//
|
60
|
+
// Alternate transitions
|
61
|
+
//
|
62
|
+
|
63
|
+
.carousel-fade {
|
64
|
+
.carousel-item {
|
65
|
+
opacity: 0;
|
66
|
+
transition-property: opacity;
|
67
|
+
transform: none;
|
68
|
+
}
|
69
|
+
|
70
|
+
.carousel-item.active,
|
71
|
+
.carousel-item-next.carousel-item-start,
|
72
|
+
.carousel-item-prev.carousel-item-end {
|
73
|
+
z-index: 1;
|
74
|
+
opacity: 1;
|
75
|
+
}
|
76
|
+
|
77
|
+
.active.carousel-item-start,
|
78
|
+
.active.carousel-item-end {
|
79
|
+
z-index: 0;
|
80
|
+
opacity: 0;
|
81
|
+
@include transition(opacity 0s $carousel-transition-duration);
|
82
|
+
}
|
83
|
+
}
|
84
|
+
|
85
|
+
|
86
|
+
//
|
87
|
+
// Left/right controls for nav
|
88
|
+
//
|
89
|
+
|
90
|
+
.carousel-control-prev,
|
91
|
+
.carousel-control-next {
|
92
|
+
position: absolute;
|
93
|
+
top: 0;
|
94
|
+
bottom: 0;
|
95
|
+
z-index: 1;
|
96
|
+
// Use flex for alignment (1-3)
|
97
|
+
display: flex; // 1. allow flex styles
|
98
|
+
align-items: center; // 2. vertically center contents
|
99
|
+
justify-content: center; // 3. horizontally center contents
|
100
|
+
width: $carousel-control-width;
|
101
|
+
padding: 0;
|
102
|
+
color: $carousel-control-color;
|
103
|
+
text-align: center;
|
104
|
+
background: none;
|
105
|
+
border: 0;
|
106
|
+
opacity: $carousel-control-opacity;
|
107
|
+
@include transition($carousel-control-transition);
|
108
|
+
|
109
|
+
// Hover/focus state
|
110
|
+
&:hover,
|
111
|
+
&:focus {
|
112
|
+
color: $carousel-control-color;
|
113
|
+
text-decoration: none;
|
114
|
+
outline: 0;
|
115
|
+
opacity: $carousel-control-hover-opacity;
|
116
|
+
}
|
117
|
+
}
|
118
|
+
.carousel-control-prev {
|
119
|
+
left: 0;
|
120
|
+
background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
|
121
|
+
}
|
122
|
+
.carousel-control-next {
|
123
|
+
right: 0;
|
124
|
+
background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
|
125
|
+
}
|
126
|
+
|
127
|
+
// Icons for within
|
128
|
+
.carousel-control-prev-icon,
|
129
|
+
.carousel-control-next-icon {
|
130
|
+
display: inline-block;
|
131
|
+
width: $carousel-control-icon-width;
|
132
|
+
height: $carousel-control-icon-width;
|
133
|
+
background-repeat: no-repeat;
|
134
|
+
background-position: 50%;
|
135
|
+
background-size: 100% 100%;
|
136
|
+
}
|
137
|
+
|
138
|
+
/* rtl:options: {
|
139
|
+
"autoRename": true,
|
140
|
+
"stringMap":[ {
|
141
|
+
"name" : "prev-next",
|
142
|
+
"search" : "prev",
|
143
|
+
"replace" : "next"
|
144
|
+
} ]
|
145
|
+
} */
|
146
|
+
.carousel-control-prev-icon {
|
147
|
+
background-image: escape-svg($carousel-control-prev-icon-bg);
|
148
|
+
}
|
149
|
+
.carousel-control-next-icon {
|
150
|
+
background-image: escape-svg($carousel-control-next-icon-bg);
|
151
|
+
}
|
152
|
+
|
153
|
+
// Optional indicator pips/controls
|
154
|
+
//
|
155
|
+
// Add a container (such as a list) with the following class and add an item (ideally a focusable control,
|
156
|
+
// like a button) with data-bs-target for each slide your carousel holds.
|
157
|
+
|
158
|
+
.carousel-indicators {
|
159
|
+
position: absolute;
|
160
|
+
right: 0;
|
161
|
+
bottom: 0;
|
162
|
+
left: 0;
|
163
|
+
z-index: 2;
|
164
|
+
display: flex;
|
165
|
+
justify-content: center;
|
166
|
+
padding: 0;
|
167
|
+
// Use the .carousel-control's width as margin so we don't overlay those
|
168
|
+
margin-right: $carousel-control-width;
|
169
|
+
margin-bottom: 1rem;
|
170
|
+
margin-left: $carousel-control-width;
|
171
|
+
list-style: none;
|
172
|
+
|
173
|
+
[data-bs-target] {
|
174
|
+
box-sizing: content-box;
|
175
|
+
flex: 0 1 auto;
|
176
|
+
width: $carousel-indicator-width;
|
177
|
+
height: $carousel-indicator-height;
|
178
|
+
padding: 0;
|
179
|
+
margin-right: $carousel-indicator-spacer;
|
180
|
+
margin-left: $carousel-indicator-spacer;
|
181
|
+
text-indent: -999px;
|
182
|
+
cursor: pointer;
|
183
|
+
background-color: $carousel-indicator-active-bg;
|
184
|
+
background-clip: padding-box;
|
185
|
+
border: 0;
|
186
|
+
// Use transparent borders to increase the hit area by 10px on top and bottom.
|
187
|
+
border-top: $carousel-indicator-hit-area-height solid transparent;
|
188
|
+
border-bottom: $carousel-indicator-hit-area-height solid transparent;
|
189
|
+
opacity: $carousel-indicator-opacity;
|
190
|
+
@include transition($carousel-indicator-transition);
|
191
|
+
}
|
192
|
+
|
193
|
+
.active {
|
194
|
+
opacity: $carousel-indicator-active-opacity;
|
195
|
+
}
|
196
|
+
}
|
197
|
+
|
198
|
+
|
199
|
+
// Optional captions
|
200
|
+
//
|
201
|
+
//
|
202
|
+
|
203
|
+
.carousel-caption {
|
204
|
+
position: absolute;
|
205
|
+
right: (100% - $carousel-caption-width) * .5;
|
206
|
+
bottom: $carousel-caption-spacer;
|
207
|
+
left: (100% - $carousel-caption-width) * .5;
|
208
|
+
padding-top: $carousel-caption-padding-y;
|
209
|
+
padding-bottom: $carousel-caption-padding-y;
|
210
|
+
color: $carousel-caption-color;
|
211
|
+
text-align: center;
|
212
|
+
}
|
213
|
+
|
214
|
+
// Dark mode carousel
|
215
|
+
|
216
|
+
.carousel-dark {
|
217
|
+
.carousel-control-prev-icon,
|
218
|
+
.carousel-control-next-icon {
|
219
|
+
filter: $carousel-dark-control-icon-filter;
|
220
|
+
}
|
221
|
+
|
222
|
+
.carousel-indicators [data-bs-target] {
|
223
|
+
background-color: $carousel-dark-indicator-active-bg;
|
224
|
+
}
|
225
|
+
|
226
|
+
.carousel-caption {
|
227
|
+
color: $carousel-dark-caption-color;
|
228
|
+
}
|
229
|
+
}
|
@@ -0,0 +1,40 @@
|
|
1
|
+
// transparent background and border properties included for button version.
|
2
|
+
// iOS requires the button element instead of an anchor tag.
|
3
|
+
// If you want the anchor version, it requires `href="#"`.
|
4
|
+
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
5
|
+
|
6
|
+
.btn-close {
|
7
|
+
box-sizing: content-box;
|
8
|
+
width: $btn-close-width;
|
9
|
+
height: $btn-close-height;
|
10
|
+
padding: $btn-close-padding-y $btn-close-padding-x;
|
11
|
+
color: $btn-close-color;
|
12
|
+
background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
|
13
|
+
border: 0; // for button elements
|
14
|
+
@include border-radius();
|
15
|
+
opacity: $btn-close-opacity;
|
16
|
+
|
17
|
+
// Override <a>'s hover style
|
18
|
+
&:hover {
|
19
|
+
color: $btn-close-color;
|
20
|
+
text-decoration: none;
|
21
|
+
opacity: $btn-close-hover-opacity;
|
22
|
+
}
|
23
|
+
|
24
|
+
&:focus {
|
25
|
+
outline: 0;
|
26
|
+
box-shadow: $btn-close-focus-shadow;
|
27
|
+
opacity: $btn-close-focus-opacity;
|
28
|
+
}
|
29
|
+
|
30
|
+
&:disabled,
|
31
|
+
&.disabled {
|
32
|
+
pointer-events: none;
|
33
|
+
user-select: none;
|
34
|
+
opacity: $btn-close-disabled-opacity;
|
35
|
+
}
|
36
|
+
}
|
37
|
+
|
38
|
+
.btn-close-white {
|
39
|
+
filter: $btn-close-white-filter;
|
40
|
+
}
|
@@ -0,0 +1,41 @@
|
|
1
|
+
// Container widths
|
2
|
+
//
|
3
|
+
// Set the container width, and override it for fixed navbars in media queries.
|
4
|
+
|
5
|
+
@if $enable-grid-classes {
|
6
|
+
// Single container class with breakpoint max-widths
|
7
|
+
.container,
|
8
|
+
// 100% wide container at all breakpoints
|
9
|
+
.container-fluid {
|
10
|
+
@include make-container();
|
11
|
+
}
|
12
|
+
|
13
|
+
// Responsive containers that are 100% wide until a breakpoint
|
14
|
+
@each $breakpoint, $container-max-width in $container-max-widths {
|
15
|
+
.container-#{$breakpoint} {
|
16
|
+
@extend .container-fluid;
|
17
|
+
}
|
18
|
+
|
19
|
+
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
|
20
|
+
%responsive-container-#{$breakpoint} {
|
21
|
+
max-width: $container-max-width;
|
22
|
+
}
|
23
|
+
|
24
|
+
// Extend each breakpoint which is smaller or equal to the current breakpoint
|
25
|
+
$extend-breakpoint: true;
|
26
|
+
|
27
|
+
@each $name, $width in $grid-breakpoints {
|
28
|
+
@if ($extend-breakpoint) {
|
29
|
+
.container#{breakpoint-infix($name, $grid-breakpoints)} {
|
30
|
+
@extend %responsive-container-#{$breakpoint};
|
31
|
+
}
|
32
|
+
|
33
|
+
// Once the current breakpoint is reached, stop extending
|
34
|
+
@if ($breakpoint == $name) {
|
35
|
+
$extend-breakpoint: false;
|
36
|
+
}
|
37
|
+
}
|
38
|
+
}
|
39
|
+
}
|
40
|
+
}
|
41
|
+
}
|