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.
Files changed (147) hide show
  1. checksums.yaml +4 -4
  2. data/.DS_Store +0 -0
  3. data/.gitignore +146 -8
  4. data/HTML/.DS_Store +0 -0
  5. data/HTML/Components/Arabescos.html +87 -0
  6. data/HTML/Components/Buttons.html +105 -0
  7. data/HTML/Components/Card.html +337 -0
  8. data/HTML/Components/CardApp.html +201 -0
  9. data/HTML/Components/Inputs.html +105 -0
  10. data/HTML/Components/Lista.html +106 -0
  11. data/HTML/Components/Pagination.html +218 -0
  12. data/HTML/Components/Pills.html +94 -0
  13. data/HTML/Components/Revisado.html +163 -0
  14. data/JS/prism.js +12 -0
  15. data/bootstrap/scss/_accordion.scss +118 -0
  16. data/bootstrap/scss/_alert.scss +57 -0
  17. data/bootstrap/scss/_badge.scss +29 -0
  18. data/bootstrap/scss/_breadcrumb.scss +28 -0
  19. data/bootstrap/scss/_button-group.scss +139 -0
  20. data/bootstrap/scss/_buttons.scss +111 -0
  21. data/bootstrap/scss/_card.scss +216 -0
  22. data/bootstrap/scss/_carousel.scss +229 -0
  23. data/bootstrap/scss/_close.scss +40 -0
  24. data/bootstrap/scss/_containers.scss +41 -0
  25. data/bootstrap/scss/_dropdown.scss +240 -0
  26. data/bootstrap/scss/_forms.scss +9 -0
  27. data/bootstrap/scss/_functions.scss +302 -0
  28. data/bootstrap/scss/_grid.scss +33 -0
  29. data/bootstrap/scss/_helpers.scss +9 -0
  30. data/bootstrap/scss/_images.scss +42 -0
  31. data/bootstrap/scss/_list-group.scss +174 -0
  32. data/bootstrap/scss/_mixins.scss +43 -0
  33. data/bootstrap/scss/_modal.scss +209 -0
  34. data/bootstrap/scss/_nav.scss +139 -0
  35. data/bootstrap/scss/_navbar.scss +335 -0
  36. data/bootstrap/scss/_offcanvas.scss +83 -0
  37. data/bootstrap/scss/_pagination.scss +64 -0
  38. data/bootstrap/scss/_placeholders.scss +51 -0
  39. data/bootstrap/scss/_popover.scss +158 -0
  40. data/bootstrap/scss/_progress.scss +48 -0
  41. data/bootstrap/scss/_reboot.scss +625 -0
  42. data/bootstrap/scss/_root.scss +54 -0
  43. data/bootstrap/scss/_spinners.scss +69 -0
  44. data/bootstrap/scss/_tables.scss +155 -0
  45. data/bootstrap/scss/_toasts.scss +51 -0
  46. data/bootstrap/scss/_tooltip.scss +115 -0
  47. data/bootstrap/scss/_transitions.scss +27 -0
  48. data/bootstrap/scss/_type.scss +104 -0
  49. data/bootstrap/scss/_utilities.scss +630 -0
  50. data/bootstrap/scss/_variables.scss +1641 -0
  51. data/bootstrap/scss/bootstrap-grid.scss +67 -0
  52. data/bootstrap/scss/bootstrap-reboot.scss +13 -0
  53. data/bootstrap/scss/bootstrap-utilities.scss +18 -0
  54. data/bootstrap/scss/bootstrap.scss +53 -0
  55. data/bootstrap/scss/forms/_floating-labels.scss +63 -0
  56. data/bootstrap/scss/forms/_form-check.scss +152 -0
  57. data/bootstrap/scss/forms/_form-control.scss +219 -0
  58. data/bootstrap/scss/forms/_form-range.scss +91 -0
  59. data/bootstrap/scss/forms/_form-select.scss +72 -0
  60. data/bootstrap/scss/forms/_form-text.scss +11 -0
  61. data/bootstrap/scss/forms/_input-group.scss +121 -0
  62. data/bootstrap/scss/forms/_labels.scss +36 -0
  63. data/bootstrap/scss/forms/_validation.scss +12 -0
  64. data/bootstrap/scss/helpers/_clearfix.scss +3 -0
  65. data/bootstrap/scss/helpers/_colored-links.scss +12 -0
  66. data/bootstrap/scss/helpers/_position.scss +30 -0
  67. data/bootstrap/scss/helpers/_ratio.scss +26 -0
  68. data/bootstrap/scss/helpers/_stacks.scss +15 -0
  69. data/bootstrap/scss/helpers/_stretched-link.scss +15 -0
  70. data/bootstrap/scss/helpers/_text-truncation.scss +7 -0
  71. data/bootstrap/scss/helpers/_visually-hidden.scss +8 -0
  72. data/bootstrap/scss/helpers/_vr.scss +8 -0
  73. data/bootstrap/scss/mixins/_alert.scss +11 -0
  74. data/bootstrap/scss/mixins/_backdrop.scss +14 -0
  75. data/bootstrap/scss/mixins/_border-radius.scss +78 -0
  76. data/bootstrap/scss/mixins/_box-shadow.scss +18 -0
  77. data/bootstrap/scss/mixins/_breakpoints.scss +127 -0
  78. data/bootstrap/scss/mixins/_buttons.scss +133 -0
  79. data/bootstrap/scss/mixins/_caret.scss +64 -0
  80. data/bootstrap/scss/mixins/_clearfix.scss +9 -0
  81. data/bootstrap/scss/mixins/_color-scheme.scss +7 -0
  82. data/bootstrap/scss/mixins/_container.scss +9 -0
  83. data/bootstrap/scss/mixins/_deprecate.scss +10 -0
  84. data/bootstrap/scss/mixins/_forms.scss +144 -0
  85. data/bootstrap/scss/mixins/_gradients.scss +47 -0
  86. data/bootstrap/scss/mixins/_grid.scss +151 -0
  87. data/bootstrap/scss/mixins/_image.scss +16 -0
  88. data/bootstrap/scss/mixins/_list-group.scss +24 -0
  89. data/bootstrap/scss/mixins/_lists.scss +7 -0
  90. data/bootstrap/scss/mixins/_pagination.scss +31 -0
  91. data/bootstrap/scss/mixins/_reset-text.scss +17 -0
  92. data/bootstrap/scss/mixins/_resize.scss +6 -0
  93. data/bootstrap/scss/mixins/_table-variants.scss +21 -0
  94. data/bootstrap/scss/mixins/_text-truncate.scss +8 -0
  95. data/bootstrap/scss/mixins/_transition.scss +26 -0
  96. data/bootstrap/scss/mixins/_utilities.scss +89 -0
  97. data/bootstrap/scss/mixins/_visually-hidden.scss +29 -0
  98. data/bootstrap/scss/utilities/_api.scss +47 -0
  99. data/bootstrap/scss/vendor/_rfs.scss +354 -0
  100. data/css/.DS_Store +0 -0
  101. data/css/prism.css +4 -0
  102. data/css/style.css +6 -0
  103. data/gulpfile.js +35 -0
  104. data/img/.DS_Store +0 -0
  105. data/img/arrow-active.png +0 -0
  106. data/img/arrow-disable.png +0 -0
  107. data/img/arrow.png +0 -0
  108. data/img/close.png +0 -0
  109. data/img/phone.png +0 -0
  110. data/img/placeholder.png +0 -0
  111. data/img/placeholder_avatar.png +0 -0
  112. data/img/qr-code-loja.png +0 -0
  113. data/img/store_icon.png +0 -0
  114. data/index.html +33 -0
  115. data/install_nvm.sh +425 -0
  116. data/lib/vitat/css/version.rb +1 -1
  117. data/package-lock.json +4233 -0
  118. data/package.json +9 -0
  119. data/scss/.DS_Store +0 -0
  120. data/scss/guide/.DS_Store +0 -0
  121. data/scss/guide/_variables.scss +171 -0
  122. data/scss/guide/components/_animations.scss +8 -0
  123. data/scss/guide/components/_typography.scss +157 -0
  124. data/scss/guide/components/arabescos/arabescos.scss +47 -0
  125. data/scss/guide/components/buttons/btn.scss +26 -0
  126. data/scss/guide/components/buttons/btn__large.scss +10 -0
  127. data/scss/guide/components/buttons/btn__primary.scss +11 -0
  128. data/scss/guide/components/buttons/btn__secondary.scss +11 -0
  129. data/scss/guide/components/buttons/btn__tertiary.scss +11 -0
  130. data/scss/guide/components/cardapp/cardapp.scss +151 -0
  131. data/scss/guide/components/cards/card.scss +58 -0
  132. data/scss/guide/components/cards/card__horizontal.scss +35 -0
  133. data/scss/guide/components/cards/card__horizontal__small.scss +9 -0
  134. data/scss/guide/components/inputs/_checkbox.scss +45 -0
  135. data/scss/guide/components/inputs/_text.scss +8 -0
  136. data/scss/guide/components/lista/lista.scss +31 -0
  137. data/scss/guide/components/pagination/pagination.scss +81 -0
  138. data/scss/guide/components/pills/pill.scss +31 -0
  139. data/scss/guide/components/pills/pill__full.scss +8 -0
  140. data/scss/guide/components/pills/pill__secundary.scss +8 -0
  141. data/scss/guide/components/pills/pill__small.scss +8 -0
  142. data/scss/guide/components/revisado/revisado.scss +52 -0
  143. data/scss/guide/style.scss +96 -0
  144. data/vitat-css-0.1.1.gem +0 -0
  145. data/vitat-css-0.1.2.gem +0 -0
  146. data/vitat-css.gemspec +1 -1
  147. metadata +145 -3
@@ -0,0 +1,335 @@
1
+ // Contents
2
+ //
3
+ // Navbar
4
+ // Navbar brand
5
+ // Navbar nav
6
+ // Navbar text
7
+ // Responsive navbar
8
+ // Navbar position
9
+ // Navbar themes
10
+
11
+
12
+ // Navbar
13
+ //
14
+ // Provide a static navbar from which we expand to create full-width, fixed, and
15
+ // other navbar variations.
16
+
17
+ .navbar {
18
+ position: relative;
19
+ display: flex;
20
+ flex-wrap: wrap; // allow us to do the line break for collapsing content
21
+ align-items: center;
22
+ justify-content: space-between; // space out brand from logo
23
+ padding-top: $navbar-padding-y;
24
+ padding-right: $navbar-padding-x; // default: null
25
+ padding-bottom: $navbar-padding-y;
26
+ padding-left: $navbar-padding-x; // default: null
27
+ @include gradient-bg();
28
+
29
+ // Because flex properties aren't inherited, we need to redeclare these first
30
+ // few properties so that content nested within behave properly.
31
+ // The `flex-wrap` property is inherited to simplify the expanded navbars
32
+ %container-flex-properties {
33
+ display: flex;
34
+ flex-wrap: inherit;
35
+ align-items: center;
36
+ justify-content: space-between;
37
+ }
38
+
39
+ > .container,
40
+ > .container-fluid {
41
+ @extend %container-flex-properties;
42
+ }
43
+
44
+ @each $breakpoint, $container-max-width in $container-max-widths {
45
+ > .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
46
+ @extend %container-flex-properties;
47
+ }
48
+ }
49
+ }
50
+
51
+
52
+ // Navbar brand
53
+ //
54
+ // Used for brand, project, or site names.
55
+
56
+ .navbar-brand {
57
+ padding-top: $navbar-brand-padding-y;
58
+ padding-bottom: $navbar-brand-padding-y;
59
+ margin-right: $navbar-brand-margin-end;
60
+ @include font-size($navbar-brand-font-size);
61
+ text-decoration: if($link-decoration == none, null, none);
62
+ white-space: nowrap;
63
+
64
+ &:hover,
65
+ &:focus {
66
+ text-decoration: if($link-hover-decoration == underline, none, null);
67
+ }
68
+ }
69
+
70
+
71
+ // Navbar nav
72
+ //
73
+ // Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
74
+
75
+ .navbar-nav {
76
+ display: flex;
77
+ flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
78
+ padding-left: 0;
79
+ margin-bottom: 0;
80
+ list-style: none;
81
+
82
+ .nav-link {
83
+ padding-right: 0;
84
+ padding-left: 0;
85
+ }
86
+
87
+ .dropdown-menu {
88
+ position: static;
89
+ }
90
+ }
91
+
92
+
93
+ // Navbar text
94
+ //
95
+ //
96
+
97
+ .navbar-text {
98
+ padding-top: $nav-link-padding-y;
99
+ padding-bottom: $nav-link-padding-y;
100
+ }
101
+
102
+
103
+ // Responsive navbar
104
+ //
105
+ // Custom styles for responsive collapsing and toggling of navbar contents.
106
+ // Powered by the collapse Bootstrap JavaScript plugin.
107
+
108
+ // When collapsed, prevent the toggleable navbar contents from appearing in
109
+ // the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
110
+ // on the `.navbar` parent.
111
+ .navbar-collapse {
112
+ flex-basis: 100%;
113
+ flex-grow: 1;
114
+ // For always expanded or extra full navbars, ensure content aligns itself
115
+ // properly vertically. Can be easily overridden with flex utilities.
116
+ align-items: center;
117
+ }
118
+
119
+ // Button for toggling the navbar when in its collapsed state
120
+ .navbar-toggler {
121
+ padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
122
+ @include font-size($navbar-toggler-font-size);
123
+ line-height: 1;
124
+ background-color: transparent; // remove default button style
125
+ border: $border-width solid transparent; // remove default button style
126
+ @include border-radius($navbar-toggler-border-radius);
127
+ @include transition($navbar-toggler-transition);
128
+
129
+ &:hover {
130
+ text-decoration: none;
131
+ }
132
+
133
+ &:focus {
134
+ text-decoration: none;
135
+ outline: 0;
136
+ box-shadow: 0 0 0 $navbar-toggler-focus-width;
137
+ }
138
+ }
139
+
140
+ // Keep as a separate element so folks can easily override it with another icon
141
+ // or image file as needed.
142
+ .navbar-toggler-icon {
143
+ display: inline-block;
144
+ width: 1.5em;
145
+ height: 1.5em;
146
+ vertical-align: middle;
147
+ background-repeat: no-repeat;
148
+ background-position: center;
149
+ background-size: 100%;
150
+ }
151
+
152
+ .navbar-nav-scroll {
153
+ max-height: var(--#{$variable-prefix}scroll-height, 75vh);
154
+ overflow-y: auto;
155
+ }
156
+
157
+ // scss-docs-start navbar-expand-loop
158
+ // Generate series of `.navbar-expand-*` responsive classes for configuring
159
+ // where your navbar collapses.
160
+ .navbar-expand {
161
+ @each $breakpoint in map-keys($grid-breakpoints) {
162
+ $next: breakpoint-next($breakpoint, $grid-breakpoints);
163
+ $infix: breakpoint-infix($next, $grid-breakpoints);
164
+
165
+ // stylelint-disable-next-line scss/selector-no-union-class-name
166
+ &#{$infix} {
167
+ @include media-breakpoint-up($next) {
168
+ flex-wrap: nowrap;
169
+ justify-content: flex-start;
170
+
171
+ .navbar-nav {
172
+ flex-direction: row;
173
+
174
+ .dropdown-menu {
175
+ position: absolute;
176
+ }
177
+
178
+ .nav-link {
179
+ padding-right: $navbar-nav-link-padding-x;
180
+ padding-left: $navbar-nav-link-padding-x;
181
+ }
182
+ }
183
+
184
+ .navbar-nav-scroll {
185
+ overflow: visible;
186
+ }
187
+
188
+ .navbar-collapse {
189
+ display: flex !important; // stylelint-disable-line declaration-no-important
190
+ flex-basis: auto;
191
+ }
192
+
193
+ .navbar-toggler {
194
+ display: none;
195
+ }
196
+
197
+ .offcanvas-header {
198
+ display: none;
199
+ }
200
+
201
+ .offcanvas {
202
+ position: inherit;
203
+ bottom: 0;
204
+ z-index: 1000;
205
+ flex-grow: 1;
206
+ visibility: visible !important; // stylelint-disable-line declaration-no-important
207
+ background-color: transparent;
208
+ border-right: 0;
209
+ border-left: 0;
210
+ @include transition(none);
211
+ transform: none;
212
+ }
213
+ .offcanvas-top,
214
+ .offcanvas-bottom {
215
+ height: auto;
216
+ border-top: 0;
217
+ border-bottom: 0;
218
+ }
219
+
220
+ .offcanvas-body {
221
+ display: flex;
222
+ flex-grow: 0;
223
+ padding: 0;
224
+ overflow-y: visible;
225
+ }
226
+ }
227
+ }
228
+ }
229
+ }
230
+ // scss-docs-end navbar-expand-loop
231
+
232
+ // Navbar themes
233
+ //
234
+ // Styles for switching between navbars with light or dark background.
235
+
236
+ // Dark links against a light background
237
+ .navbar-light {
238
+ .navbar-brand {
239
+ color: $navbar-light-brand-color;
240
+
241
+ &:hover,
242
+ &:focus {
243
+ color: $navbar-light-brand-hover-color;
244
+ }
245
+ }
246
+
247
+ .navbar-nav {
248
+ .nav-link {
249
+ color: $navbar-light-color;
250
+
251
+ &:hover,
252
+ &:focus {
253
+ color: $navbar-light-hover-color;
254
+ }
255
+
256
+ &.disabled {
257
+ color: $navbar-light-disabled-color;
258
+ }
259
+ }
260
+
261
+ .show > .nav-link,
262
+ .nav-link.active {
263
+ color: $navbar-light-active-color;
264
+ }
265
+ }
266
+
267
+ .navbar-toggler {
268
+ color: $navbar-light-color;
269
+ border-color: $navbar-light-toggler-border-color;
270
+ }
271
+
272
+ .navbar-toggler-icon {
273
+ background-image: escape-svg($navbar-light-toggler-icon-bg);
274
+ }
275
+
276
+ .navbar-text {
277
+ color: $navbar-light-color;
278
+
279
+ a,
280
+ a:hover,
281
+ a:focus {
282
+ color: $navbar-light-active-color;
283
+ }
284
+ }
285
+ }
286
+
287
+ // White links against a dark background
288
+ .navbar-dark {
289
+ .navbar-brand {
290
+ color: $navbar-dark-brand-color;
291
+
292
+ &:hover,
293
+ &:focus {
294
+ color: $navbar-dark-brand-hover-color;
295
+ }
296
+ }
297
+
298
+ .navbar-nav {
299
+ .nav-link {
300
+ color: $navbar-dark-color;
301
+
302
+ &:hover,
303
+ &:focus {
304
+ color: $navbar-dark-hover-color;
305
+ }
306
+
307
+ &.disabled {
308
+ color: $navbar-dark-disabled-color;
309
+ }
310
+ }
311
+
312
+ .show > .nav-link,
313
+ .nav-link.active {
314
+ color: $navbar-dark-active-color;
315
+ }
316
+ }
317
+
318
+ .navbar-toggler {
319
+ color: $navbar-dark-color;
320
+ border-color: $navbar-dark-toggler-border-color;
321
+ }
322
+
323
+ .navbar-toggler-icon {
324
+ background-image: escape-svg($navbar-dark-toggler-icon-bg);
325
+ }
326
+
327
+ .navbar-text {
328
+ color: $navbar-dark-color;
329
+ a,
330
+ a:hover,
331
+ a:focus {
332
+ color: $navbar-dark-active-color;
333
+ }
334
+ }
335
+ }
@@ -0,0 +1,83 @@
1
+ .offcanvas {
2
+ position: fixed;
3
+ bottom: 0;
4
+ z-index: $zindex-offcanvas;
5
+ display: flex;
6
+ flex-direction: column;
7
+ max-width: 100%;
8
+ color: $offcanvas-color;
9
+ visibility: hidden;
10
+ background-color: $offcanvas-bg-color;
11
+ background-clip: padding-box;
12
+ outline: 0;
13
+ @include box-shadow($offcanvas-box-shadow);
14
+ @include transition(transform $offcanvas-transition-duration ease-in-out);
15
+ }
16
+
17
+ .offcanvas-backdrop {
18
+ @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
19
+ }
20
+
21
+ .offcanvas-header {
22
+ display: flex;
23
+ align-items: center;
24
+ justify-content: space-between;
25
+ padding: $offcanvas-padding-y $offcanvas-padding-x;
26
+
27
+ .btn-close {
28
+ padding: ($offcanvas-padding-y * .5) ($offcanvas-padding-x * .5);
29
+ margin-top: $offcanvas-padding-y * -.5;
30
+ margin-right: $offcanvas-padding-x * -.5;
31
+ margin-bottom: $offcanvas-padding-y * -.5;
32
+ }
33
+ }
34
+
35
+ .offcanvas-title {
36
+ margin-bottom: 0;
37
+ line-height: $offcanvas-title-line-height;
38
+ }
39
+
40
+ .offcanvas-body {
41
+ flex-grow: 1;
42
+ padding: $offcanvas-padding-y $offcanvas-padding-x;
43
+ overflow-y: auto;
44
+ }
45
+
46
+ .offcanvas-start {
47
+ top: 0;
48
+ left: 0;
49
+ width: $offcanvas-horizontal-width;
50
+ border-right: $offcanvas-border-width solid $offcanvas-border-color;
51
+ transform: translateX(-100%);
52
+ }
53
+
54
+ .offcanvas-end {
55
+ top: 0;
56
+ right: 0;
57
+ width: $offcanvas-horizontal-width;
58
+ border-left: $offcanvas-border-width solid $offcanvas-border-color;
59
+ transform: translateX(100%);
60
+ }
61
+
62
+ .offcanvas-top {
63
+ top: 0;
64
+ right: 0;
65
+ left: 0;
66
+ height: $offcanvas-vertical-height;
67
+ max-height: 100%;
68
+ border-bottom: $offcanvas-border-width solid $offcanvas-border-color;
69
+ transform: translateY(-100%);
70
+ }
71
+
72
+ .offcanvas-bottom {
73
+ right: 0;
74
+ left: 0;
75
+ height: $offcanvas-vertical-height;
76
+ max-height: 100%;
77
+ border-top: $offcanvas-border-width solid $offcanvas-border-color;
78
+ transform: translateY(100%);
79
+ }
80
+
81
+ .offcanvas.show {
82
+ transform: none;
83
+ }
@@ -0,0 +1,64 @@
1
+ .pagination {
2
+ display: flex;
3
+ @include list-unstyled();
4
+ }
5
+
6
+ .page-link {
7
+ position: relative;
8
+ display: block;
9
+ color: $pagination-color;
10
+ text-decoration: if($link-decoration == none, null, none);
11
+ background-color: $pagination-bg;
12
+ border: $pagination-border-width solid $pagination-border-color;
13
+ @include transition($pagination-transition);
14
+
15
+ &:hover {
16
+ z-index: 2;
17
+ color: $pagination-hover-color;
18
+ text-decoration: if($link-hover-decoration == underline, none, null);
19
+ background-color: $pagination-hover-bg;
20
+ border-color: $pagination-hover-border-color;
21
+ }
22
+
23
+ &:focus {
24
+ z-index: 3;
25
+ color: $pagination-focus-color;
26
+ background-color: $pagination-focus-bg;
27
+ outline: $pagination-focus-outline;
28
+ box-shadow: $pagination-focus-box-shadow;
29
+ }
30
+ }
31
+
32
+ .page-item {
33
+ &:not(:first-child) .page-link {
34
+ margin-left: $pagination-margin-start;
35
+ }
36
+
37
+ &.active .page-link {
38
+ z-index: 3;
39
+ color: $pagination-active-color;
40
+ @include gradient-bg($pagination-active-bg);
41
+ border-color: $pagination-active-border-color;
42
+ }
43
+
44
+ &.disabled .page-link {
45
+ color: $pagination-disabled-color;
46
+ pointer-events: none;
47
+ background-color: $pagination-disabled-bg;
48
+ border-color: $pagination-disabled-border-color;
49
+ }
50
+ }
51
+
52
+
53
+ //
54
+ // Sizing
55
+ //
56
+ @include pagination-size($pagination-padding-y, $pagination-padding-x, null, $pagination-border-radius);
57
+
58
+ .pagination-lg {
59
+ @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);
60
+ }
61
+
62
+ .pagination-sm {
63
+ @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm);
64
+ }
@@ -0,0 +1,51 @@
1
+ .placeholder {
2
+ display: inline-block;
3
+ min-height: 1em;
4
+ vertical-align: middle;
5
+ cursor: wait;
6
+ background-color: currentColor;
7
+ opacity: $placeholder-opacity-max;
8
+
9
+ &.btn::before {
10
+ display: inline-block;
11
+ content: "";
12
+ }
13
+ }
14
+
15
+ // Sizing
16
+ .placeholder-xs {
17
+ min-height: .6em;
18
+ }
19
+
20
+ .placeholder-sm {
21
+ min-height: .8em;
22
+ }
23
+
24
+ .placeholder-lg {
25
+ min-height: 1.2em;
26
+ }
27
+
28
+ // Animation
29
+ .placeholder-glow {
30
+ .placeholder {
31
+ animation: placeholder-glow 2s ease-in-out infinite;
32
+ }
33
+ }
34
+
35
+ @keyframes placeholder-glow {
36
+ 50% {
37
+ opacity: $placeholder-opacity-min;
38
+ }
39
+ }
40
+
41
+ .placeholder-wave {
42
+ mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);
43
+ mask-size: 200% 100%;
44
+ animation: placeholder-wave 2s linear infinite;
45
+ }
46
+
47
+ @keyframes placeholder-wave {
48
+ 100% {
49
+ mask-position: -200% 0%;
50
+ }
51
+ }
@@ -0,0 +1,158 @@
1
+ .popover {
2
+ position: absolute;
3
+ top: 0;
4
+ left: 0 #{"/* rtl:ignore */"};
5
+ z-index: $zindex-popover;
6
+ display: block;
7
+ max-width: $popover-max-width;
8
+ // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
9
+ // So reset our font and text properties to avoid inheriting weird values.
10
+ @include reset-text();
11
+ @include font-size($popover-font-size);
12
+ // Allow breaking very long words so they don't overflow the popover's bounds
13
+ word-wrap: break-word;
14
+ background-color: $popover-bg;
15
+ background-clip: padding-box;
16
+ border: $popover-border-width solid $popover-border-color;
17
+ @include border-radius($popover-border-radius);
18
+ @include box-shadow($popover-box-shadow);
19
+
20
+ .popover-arrow {
21
+ position: absolute;
22
+ display: block;
23
+ width: $popover-arrow-width;
24
+ height: $popover-arrow-height;
25
+
26
+ &::before,
27
+ &::after {
28
+ position: absolute;
29
+ display: block;
30
+ content: "";
31
+ border-color: transparent;
32
+ border-style: solid;
33
+ }
34
+ }
35
+ }
36
+
37
+ .bs-popover-top {
38
+ > .popover-arrow {
39
+ bottom: subtract(-$popover-arrow-height, $popover-border-width);
40
+
41
+ &::before {
42
+ bottom: 0;
43
+ border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
44
+ border-top-color: $popover-arrow-outer-color;
45
+ }
46
+
47
+ &::after {
48
+ bottom: $popover-border-width;
49
+ border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
50
+ border-top-color: $popover-arrow-color;
51
+ }
52
+ }
53
+ }
54
+
55
+ .bs-popover-end {
56
+ > .popover-arrow {
57
+ left: subtract(-$popover-arrow-height, $popover-border-width);
58
+ width: $popover-arrow-height;
59
+ height: $popover-arrow-width;
60
+
61
+ &::before {
62
+ left: 0;
63
+ border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
64
+ border-right-color: $popover-arrow-outer-color;
65
+ }
66
+
67
+ &::after {
68
+ left: $popover-border-width;
69
+ border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
70
+ border-right-color: $popover-arrow-color;
71
+ }
72
+ }
73
+ }
74
+
75
+ .bs-popover-bottom {
76
+ > .popover-arrow {
77
+ top: subtract(-$popover-arrow-height, $popover-border-width);
78
+
79
+ &::before {
80
+ top: 0;
81
+ border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
82
+ border-bottom-color: $popover-arrow-outer-color;
83
+ }
84
+
85
+ &::after {
86
+ top: $popover-border-width;
87
+ border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
88
+ border-bottom-color: $popover-arrow-color;
89
+ }
90
+ }
91
+
92
+ // This will remove the popover-header's border just below the arrow
93
+ .popover-header::before {
94
+ position: absolute;
95
+ top: 0;
96
+ left: 50%;
97
+ display: block;
98
+ width: $popover-arrow-width;
99
+ margin-left: -$popover-arrow-width * .5;
100
+ content: "";
101
+ border-bottom: $popover-border-width solid $popover-header-bg;
102
+ }
103
+ }
104
+
105
+ .bs-popover-start {
106
+ > .popover-arrow {
107
+ right: subtract(-$popover-arrow-height, $popover-border-width);
108
+ width: $popover-arrow-height;
109
+ height: $popover-arrow-width;
110
+
111
+ &::before {
112
+ right: 0;
113
+ border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
114
+ border-left-color: $popover-arrow-outer-color;
115
+ }
116
+
117
+ &::after {
118
+ right: $popover-border-width;
119
+ border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
120
+ border-left-color: $popover-arrow-color;
121
+ }
122
+ }
123
+ }
124
+
125
+ .bs-popover-auto {
126
+ &[data-popper-placement^="top"] {
127
+ @extend .bs-popover-top;
128
+ }
129
+ &[data-popper-placement^="right"] {
130
+ @extend .bs-popover-end;
131
+ }
132
+ &[data-popper-placement^="bottom"] {
133
+ @extend .bs-popover-bottom;
134
+ }
135
+ &[data-popper-placement^="left"] {
136
+ @extend .bs-popover-start;
137
+ }
138
+ }
139
+
140
+ // Offset the popover to account for the popover arrow
141
+ .popover-header {
142
+ padding: $popover-header-padding-y $popover-header-padding-x;
143
+ margin-bottom: 0; // Reset the default from Reboot
144
+ @include font-size($font-size-base);
145
+ color: $popover-header-color;
146
+ background-color: $popover-header-bg;
147
+ border-bottom: $popover-border-width solid $popover-border-color;
148
+ @include border-top-radius($popover-inner-border-radius);
149
+
150
+ &:empty {
151
+ display: none;
152
+ }
153
+ }
154
+
155
+ .popover-body {
156
+ padding: $popover-body-padding-y $popover-body-padding-x;
157
+ color: $popover-body-color;
158
+ }