@coreui/coreui 4.0.2

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 (203) hide show
  1. package/LICENSE +22 -0
  2. package/README.md +183 -0
  3. package/dist/css/coreui-grid.css +5004 -0
  4. package/dist/css/coreui-grid.css.map +1 -0
  5. package/dist/css/coreui-grid.min.css +8 -0
  6. package/dist/css/coreui-grid.min.css.map +1 -0
  7. package/dist/css/coreui-grid.rtl.css +5011 -0
  8. package/dist/css/coreui-grid.rtl.css.map +1 -0
  9. package/dist/css/coreui-grid.rtl.min.css +14 -0
  10. package/dist/css/coreui-grid.rtl.min.css.map +1 -0
  11. package/dist/css/coreui-reboot.css +440 -0
  12. package/dist/css/coreui-reboot.css.map +1 -0
  13. package/dist/css/coreui-reboot.min.css +8 -0
  14. package/dist/css/coreui-reboot.min.css.map +1 -0
  15. package/dist/css/coreui-reboot.rtl.css +441 -0
  16. package/dist/css/coreui-reboot.rtl.css.map +1 -0
  17. package/dist/css/coreui-reboot.rtl.min.css +14 -0
  18. package/dist/css/coreui-reboot.rtl.min.css.map +1 -0
  19. package/dist/css/coreui-utilities.css +5030 -0
  20. package/dist/css/coreui-utilities.css.map +1 -0
  21. package/dist/css/coreui-utilities.min.css +8 -0
  22. package/dist/css/coreui-utilities.min.css.map +1 -0
  23. package/dist/css/coreui-utilities.rtl.css +5024 -0
  24. package/dist/css/coreui-utilities.rtl.css.map +1 -0
  25. package/dist/css/coreui-utilities.rtl.min.css +14 -0
  26. package/dist/css/coreui-utilities.rtl.min.css.map +1 -0
  27. package/dist/css/coreui.css +12152 -0
  28. package/dist/css/coreui.css.map +1 -0
  29. package/dist/css/coreui.min.css +8 -0
  30. package/dist/css/coreui.min.css.map +1 -0
  31. package/dist/css/coreui.rtl.css +12041 -0
  32. package/dist/css/coreui.rtl.css.map +1 -0
  33. package/dist/css/coreui.rtl.min.css +14 -0
  34. package/dist/css/coreui.rtl.min.css.map +1 -0
  35. package/dist/js/coreui.bundle.js +7437 -0
  36. package/dist/js/coreui.bundle.js.map +1 -0
  37. package/dist/js/coreui.bundle.min.js +7 -0
  38. package/dist/js/coreui.bundle.min.js.map +1 -0
  39. package/dist/js/coreui.esm.js +5622 -0
  40. package/dist/js/coreui.esm.js.map +1 -0
  41. package/dist/js/coreui.esm.min.js +7 -0
  42. package/dist/js/coreui.esm.min.js.map +1 -0
  43. package/dist/js/coreui.js +5673 -0
  44. package/dist/js/coreui.js.map +1 -0
  45. package/dist/js/coreui.min.js +7 -0
  46. package/dist/js/coreui.min.js.map +1 -0
  47. package/js/dist/alert.js +208 -0
  48. package/js/dist/alert.js.map +1 -0
  49. package/js/dist/base-component.js +181 -0
  50. package/js/dist/base-component.js.map +1 -0
  51. package/js/dist/button.js +142 -0
  52. package/js/dist/button.js.map +1 -0
  53. package/js/dist/carousel.js +724 -0
  54. package/js/dist/carousel.js.map +1 -0
  55. package/js/dist/collapse.js +515 -0
  56. package/js/dist/collapse.js.map +1 -0
  57. package/js/dist/dom/data.js +72 -0
  58. package/js/dist/dom/data.js.map +1 -0
  59. package/js/dist/dom/event-handler.js +319 -0
  60. package/js/dist/dom/event-handler.js.map +1 -0
  61. package/js/dist/dom/manipulator.js +92 -0
  62. package/js/dist/dom/manipulator.js.map +1 -0
  63. package/js/dist/dom/selector-engine.js +89 -0
  64. package/js/dist/dom/selector-engine.js.map +1 -0
  65. package/js/dist/dropdown.js +700 -0
  66. package/js/dist/dropdown.js.map +1 -0
  67. package/js/dist/modal.js +891 -0
  68. package/js/dist/modal.js.map +1 -0
  69. package/js/dist/offcanvas.js +724 -0
  70. package/js/dist/offcanvas.js.map +1 -0
  71. package/js/dist/popover.js +220 -0
  72. package/js/dist/popover.js.map +1 -0
  73. package/js/dist/scrollspy.js +387 -0
  74. package/js/dist/scrollspy.js.map +1 -0
  75. package/js/dist/tab.js +317 -0
  76. package/js/dist/tab.js.map +1 -0
  77. package/js/dist/toast.js +331 -0
  78. package/js/dist/toast.js.map +1 -0
  79. package/js/dist/tooltip.js +997 -0
  80. package/js/dist/tooltip.js.map +1 -0
  81. package/js/src/alert.js +128 -0
  82. package/js/src/base-component.js +78 -0
  83. package/js/src/button.js +89 -0
  84. package/js/src/carousel.js +589 -0
  85. package/js/src/collapse.js +391 -0
  86. package/js/src/dom/data.js +60 -0
  87. package/js/src/dom/event-handler.js +352 -0
  88. package/js/src/dom/manipulator.js +83 -0
  89. package/js/src/dom/selector-engine.js +78 -0
  90. package/js/src/dropdown.js +517 -0
  91. package/js/src/modal.js +451 -0
  92. package/js/src/navigation.js +298 -0
  93. package/js/src/offcanvas.js +277 -0
  94. package/js/src/popover.js +173 -0
  95. package/js/src/scrollspy.js +298 -0
  96. package/js/src/sidebar.js +347 -0
  97. package/js/src/tab.js +227 -0
  98. package/js/src/toast.js +245 -0
  99. package/js/src/tooltip.js +750 -0
  100. package/js/src/util/backdrop.js +129 -0
  101. package/js/src/util/index.js +327 -0
  102. package/js/src/util/sanitizer.js +130 -0
  103. package/js/src/util/scrollbar.js +97 -0
  104. package/package.json +166 -0
  105. package/scss/_accordion.scss +118 -0
  106. package/scss/_alert.scss +52 -0
  107. package/scss/_avatar.scss +49 -0
  108. package/scss/_badge.scss +38 -0
  109. package/scss/_breadcrumb.scss +33 -0
  110. package/scss/_button-group.scss +139 -0
  111. package/scss/_buttons.scss +143 -0
  112. package/scss/_callout.scss +16 -0
  113. package/scss/_card.scss +215 -0
  114. package/scss/_carousel.scss +231 -0
  115. package/scss/_close.scss +40 -0
  116. package/scss/_containers.scss +41 -0
  117. package/scss/_dropdown.scss +227 -0
  118. package/scss/_footer.scss +25 -0
  119. package/scss/_forms.scss +9 -0
  120. package/scss/_functions.scss +356 -0
  121. package/scss/_grid.scss +56 -0
  122. package/scss/_header.scss +170 -0
  123. package/scss/_helpers.scss +7 -0
  124. package/scss/_icon.scss +32 -0
  125. package/scss/_images.scss +42 -0
  126. package/scss/_list-group.scss +169 -0
  127. package/scss/_mixins.scss +50 -0
  128. package/scss/_modal.scss +219 -0
  129. package/scss/_nav.scss +140 -0
  130. package/scss/_navbar.scss +254 -0
  131. package/scss/_offcanvas.scss +79 -0
  132. package/scss/_pagination.scss +64 -0
  133. package/scss/_popover.scss +158 -0
  134. package/scss/_progress.scss +91 -0
  135. package/scss/_reboot.scss +632 -0
  136. package/scss/_root.scss +25 -0
  137. package/scss/_sidebar.scss +3 -0
  138. package/scss/_spinners.scss +69 -0
  139. package/scss/_subheader.scss +72 -0
  140. package/scss/_tables.scss +166 -0
  141. package/scss/_toasts.scss +52 -0
  142. package/scss/_tooltip.scss +115 -0
  143. package/scss/_transitions.scss +21 -0
  144. package/scss/_type.scss +104 -0
  145. package/scss/_utilities.scss +678 -0
  146. package/scss/_variables.scss +1801 -0
  147. package/scss/coreui-grid.rtl.scss +12 -0
  148. package/scss/coreui-grid.scss +67 -0
  149. package/scss/coreui-reboot.rtl.scss +12 -0
  150. package/scss/coreui-reboot.scss +15 -0
  151. package/scss/coreui-utilities.rtl.scss +12 -0
  152. package/scss/coreui-utilities.scss +19 -0
  153. package/scss/coreui.rtl.scss +12 -0
  154. package/scss/coreui.scss +61 -0
  155. package/scss/forms/_floating-labels.scss +63 -0
  156. package/scss/forms/_form-check.scss +188 -0
  157. package/scss/forms/_form-control.scss +219 -0
  158. package/scss/forms/_form-range.scss +91 -0
  159. package/scss/forms/_form-select.scss +70 -0
  160. package/scss/forms/_form-text.scss +11 -0
  161. package/scss/forms/_input-group.scss +121 -0
  162. package/scss/forms/_labels.scss +36 -0
  163. package/scss/forms/_validation.scss +12 -0
  164. package/scss/helpers/_clearfix.scss +3 -0
  165. package/scss/helpers/_colored-links.scss +12 -0
  166. package/scss/helpers/_position.scss +30 -0
  167. package/scss/helpers/_ratio.scss +26 -0
  168. package/scss/helpers/_stretched-link.scss +15 -0
  169. package/scss/helpers/_text-truncation.scss +7 -0
  170. package/scss/helpers/_visually-hidden.scss +8 -0
  171. package/scss/mixins/_alert.scss +15 -0
  172. package/scss/mixins/_avatar.scss +10 -0
  173. package/scss/mixins/_border-radius.scss +78 -0
  174. package/scss/mixins/_box-shadow.scss +18 -0
  175. package/scss/mixins/_breakpoints.scss +140 -0
  176. package/scss/mixins/_buttons.scss +101 -0
  177. package/scss/mixins/_caret.scss +64 -0
  178. package/scss/mixins/_clearfix.scss +9 -0
  179. package/scss/mixins/_color-scheme.scss +7 -0
  180. package/scss/mixins/_container.scss +9 -0
  181. package/scss/mixins/_css-vars.scss +87 -0
  182. package/scss/mixins/_deprecate.scss +10 -0
  183. package/scss/mixins/_forms.scss +144 -0
  184. package/scss/mixins/_gradients.scss +47 -0
  185. package/scss/mixins/_grid.scss +132 -0
  186. package/scss/mixins/_icon.scss +6 -0
  187. package/scss/mixins/_image.scss +16 -0
  188. package/scss/mixins/_list-group.scss +18 -0
  189. package/scss/mixins/_lists.scss +7 -0
  190. package/scss/mixins/_ltr-rtl.scss +60 -0
  191. package/scss/mixins/_pagination.scss +31 -0
  192. package/scss/mixins/_reset-text.scss +17 -0
  193. package/scss/mixins/_resize.scss +6 -0
  194. package/scss/mixins/_table-variants.scss +16 -0
  195. package/scss/mixins/_text-truncate.scss +8 -0
  196. package/scss/mixins/_transition.scss +26 -0
  197. package/scss/mixins/_utilities.scss +104 -0
  198. package/scss/mixins/_visually-hidden.scss +29 -0
  199. package/scss/sidebar/_sidebar-narrow.scss +106 -0
  200. package/scss/sidebar/_sidebar-nav.scss +165 -0
  201. package/scss/sidebar/_sidebar.scss +261 -0
  202. package/scss/utilities/_api.scss +47 -0
  203. package/scss/vendor/_rfs.scss +354 -0
@@ -0,0 +1,79 @@
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-header {
18
+ display: flex;
19
+ align-items: center;
20
+ justify-content: space-between;
21
+ padding: $offcanvas-padding-y $offcanvas-padding-x;
22
+
23
+ .btn-close {
24
+ padding: ($offcanvas-padding-y * .5) ($offcanvas-padding-x * .5);
25
+ margin-top: $offcanvas-padding-y * -.5;
26
+ @include ltr-rtl("margin-right", $offcanvas-padding-x * -.5);
27
+ margin-bottom: $offcanvas-padding-y * -.5;
28
+ }
29
+ }
30
+
31
+ .offcanvas-title {
32
+ margin-bottom: 0;
33
+ line-height: $offcanvas-title-line-height;
34
+ }
35
+
36
+ .offcanvas-body {
37
+ flex-grow: 1;
38
+ padding: $offcanvas-padding-y $offcanvas-padding-x;
39
+ overflow-y: auto;
40
+ }
41
+
42
+ .offcanvas-start {
43
+ top: 0;
44
+ @include ltr-rtl("left", 0);
45
+ width: $offcanvas-horizontal-width;
46
+ @include ltr-rtl("border-right", $offcanvas-border-width solid $offcanvas-border-color);
47
+ transform: translateX(-100%);
48
+ }
49
+
50
+ .offcanvas-end {
51
+ top: 0;
52
+ @include ltr-rtl("right", 0);
53
+ width: $offcanvas-horizontal-width;
54
+ @include ltr-rtl("border-left", $offcanvas-border-width solid $offcanvas-border-color);
55
+ transform: translateX(100%);
56
+ }
57
+
58
+ .offcanvas-top {
59
+ top: 0;
60
+ right: 0;
61
+ left: 0;
62
+ height: $offcanvas-vertical-height;
63
+ max-height: 100%;
64
+ border-bottom: $offcanvas-border-width solid $offcanvas-border-color;
65
+ transform: translateY(-100%);
66
+ }
67
+
68
+ .offcanvas-bottom {
69
+ right: 0;
70
+ left: 0;
71
+ height: $offcanvas-vertical-height;
72
+ max-height: 100%;
73
+ border-top: $offcanvas-border-width solid $offcanvas-border-color;
74
+ transform: translateY(100%);
75
+ }
76
+
77
+ .offcanvas.show {
78
+ transform: none;
79
+ }
@@ -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: var(--#{$variable-prefix}pagination-color, $pagination-color);
10
+ text-decoration: if($link-decoration == none, null, none);
11
+ background-color: var(--#{$variable-prefix}pagination-bg, $pagination-bg);
12
+ border: $pagination-border-width solid var(--#{$variable-prefix}pagination-border-color, $pagination-border-color);
13
+ @include transition($pagination-transition);
14
+
15
+ &:hover {
16
+ z-index: 2;
17
+ color: var(--#{$variable-prefix}pagination-hover-color, $pagination-hover-color);
18
+ text-decoration: if($link-hover-decoration == underline, none, null);
19
+ background-color: var(--#{$variable-prefix}pagination-hover-bg, $pagination-hover-bg);
20
+ border-color: var(--#{$variable-prefix}pagination-hover-border-color, $pagination-hover-border-color);
21
+ }
22
+
23
+ &:focus {
24
+ z-index: 3;
25
+ color: var(--#{$variable-prefix}pagination-focus-color, $pagination-focus-color);
26
+ background-color: var(--#{$variable-prefix}pagination-focus-bg, $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
+ @include ltr-rtl("margin-left", $pagination-margin-start);
35
+ }
36
+
37
+ &.active .page-link {
38
+ z-index: 3;
39
+ color: var(--#{$variable-prefix}pagination-active-color, $pagination-active-color);
40
+ @include gradient-bg(var(--#{$variable-prefix}pagination-active-bg, $pagination-active-bg));
41
+ border-color: var(--#{$variable-prefix}pagination-active-border-color, $pagination-active-border-color);
42
+ }
43
+
44
+ &.disabled .page-link {
45
+ color: var(--#{$variable-prefix}pagination-disabled-color, $pagination-disabled-color);
46
+ pointer-events: none;
47
+ background-color: var(--#{$variable-prefix}pagination-disabled-bg, $pagination-disabled-bg);
48
+ border-color: var(--#{$variable-prefix}pagination-disabled-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,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: var(--#{$variable-prefix}popover-bg, $popover-bg);
15
+ background-clip: padding-box;
16
+ border: $popover-border-width solid var(--#{$variable-prefix}popover-border-color, $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: var(--#{$variable-prefix}popover-arrow-outer-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: var(--#{$variable-prefix}popover-arrow-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: var(--#{$variable-prefix}popover-arrow-outer-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: var(--#{$variable-prefix}popover-arrow-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: var(--#{$variable-prefix}popover-arrow-outer-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: var(--#{$variable-prefix}popover-arrow-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 var(--#{$variable-prefix}popover-header-bg, $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: var(--#{$variable-prefix}popover-arrow-outer-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: var(--#{$variable-prefix}popover-arrow-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: var(--#{$variable-prefix}popover-header-color, $popover-header-color);
146
+ background-color: var(--#{$variable-prefix}popover-header-bg, $popover-header-bg);
147
+ border-bottom: $popover-border-width solid var(--#{$variable-prefix}popover-header-border-color, shade-color($popover-header-bg, 10%));
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: var(--#{$variable-prefix}popover-body-color, $popover-body-color);
158
+ }
@@ -0,0 +1,91 @@
1
+ // Disable animation if transitions are disabled
2
+
3
+ // scss-docs-start progress-keyframes
4
+ @if $enable-transitions {
5
+ @keyframes progress-bar-stripes {
6
+ 0% { background-position-x: $progress-height; }
7
+ }
8
+ }
9
+ // scss-docs-end progress-keyframes
10
+
11
+ .progress {
12
+ display: flex;
13
+ height: $progress-height;
14
+ overflow: hidden; // force rounded corners by cropping it
15
+ @include font-size($progress-font-size);
16
+ background-color: var(--#{$variable-prefix}progress-bg, $progress-bg);
17
+ @include border-radius($progress-border-radius);
18
+ @include box-shadow($progress-box-shadow);
19
+ }
20
+
21
+ .progress-bar {
22
+ display: flex;
23
+ flex-direction: column;
24
+ justify-content: center;
25
+ overflow: hidden;
26
+ color: var(--#{$variable-prefix}progress-bar-color, $progress-bar-color);
27
+ text-align: center;
28
+ white-space: nowrap;
29
+ background-color: var(--#{$variable-prefix}progress-bar-bg, $progress-bar-bg);
30
+ @include transition($progress-bar-transition);
31
+ }
32
+
33
+ .progress-bar-striped {
34
+ @include gradient-striped();
35
+ background-size: $progress-height $progress-height;
36
+ }
37
+
38
+ @if $enable-transitions {
39
+ .progress-bar-animated {
40
+ animation: $progress-bar-animation-timing progress-bar-stripes;
41
+
42
+ @if $enable-reduced-motion {
43
+ @media (prefers-reduced-motion: reduce) {
44
+ animation: none;
45
+ }
46
+ }
47
+ }
48
+ }
49
+
50
+ .progress-thin {
51
+ height: 4px;
52
+ }
53
+
54
+ // White progress bar
55
+ .progress.progress-white {
56
+ background-color: rgba(255, 255, 255, .2);
57
+ .progress-bar {
58
+ background-color: $white;
59
+ }
60
+ }
61
+
62
+ .progress-group {
63
+ display: flex;
64
+ flex-flow: row wrap;
65
+ margin-bottom: $progress-group-margin-bottom;
66
+ }
67
+
68
+ .progress-group-prepend {
69
+ flex: 0 0 100px;
70
+ align-self: center;
71
+ }
72
+
73
+ .progress-group-header {
74
+ display: flex;
75
+ flex-basis: 100%;
76
+ align-items: center;
77
+ margin-bottom: $progress-group-header-margin-bottom;
78
+ }
79
+
80
+ .progress-group-bars {
81
+ flex-grow: 1;
82
+ align-self: center;
83
+
84
+ .progress:not(:last-child) {
85
+ margin-bottom: 2px;
86
+ }
87
+ }
88
+
89
+ .progress-group-header + .progress-group-bars {
90
+ flex-basis: 100%;
91
+ }
@@ -0,0 +1,632 @@
1
+ // stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
2
+
3
+
4
+ // Reboot
5
+ //
6
+ // Normalization of HTML elements, manually forked from Normalize.css to remove
7
+ // styles targeting irrelevant browsers while applying new styles.
8
+ //
9
+ // Normalize is licensed MIT. https://github.com/necolas/normalize.css
10
+
11
+
12
+ // Document
13
+ //
14
+ // Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
15
+
16
+ *,
17
+ *::before,
18
+ *::after {
19
+ box-sizing: border-box;
20
+ }
21
+
22
+
23
+ // Root
24
+ //
25
+ // Ability to the value of the root font sizes, affecting the value of `rem`.
26
+ // null by default, thus nothing is generated.
27
+
28
+ :root {
29
+ font-size: $font-size-root;
30
+
31
+ @if $enable-smooth-scroll {
32
+ @media (prefers-reduced-motion: no-preference) {
33
+ scroll-behavior: smooth;
34
+ }
35
+ }
36
+ }
37
+
38
+
39
+ // Body
40
+ //
41
+ // 1. Remove the margin in all browsers.
42
+ // 2. As a best practice, apply a default `background-color`.
43
+ // 3. Prevent adjustments of font size after orientation changes in iOS.
44
+ // 4. Change the default tap highlight to be completely transparent in iOS.
45
+
46
+ body {
47
+ margin: 0; // 1
48
+ font-family: $font-family-base;
49
+ @include font-size(var(--#{$variable-prefix}font-size-base, $font-size-base));
50
+ font-weight: $font-weight-base;
51
+ line-height: $line-height-base;
52
+ color: var(--#{$variable-prefix}body-color, $body-color);
53
+ text-align: $body-text-align;
54
+ background-color: var(--#{$variable-prefix}body-bg, $body-bg); // 2
55
+ -webkit-text-size-adjust: 100%; // 3
56
+ -webkit-tap-highlight-color: rgba($black, 0); // 4
57
+ }
58
+
59
+
60
+ // Content grouping
61
+ //
62
+ // 1. Reset Firefox's gray color
63
+ // 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field
64
+
65
+ hr {
66
+ margin: $hr-margin-y 0;
67
+ color: var(--#{$variable-prefix}hr-color, $hr-color); // 1
68
+ background-color: currentColor;
69
+ border: 0;
70
+ opacity: $hr-opacity;
71
+ }
72
+
73
+ hr:not([size]) {
74
+ height: $hr-height; // 2
75
+ }
76
+
77
+ .vr {
78
+ display: flex;
79
+ flex: 0 0 $vr-width;
80
+ width: $vr-width;
81
+ padding: 0 !important;
82
+ margin: 0;
83
+ color: var(--#{$variable-prefix}vr-color, $vr-color); // 1
84
+ background-color: currentColor;
85
+ border: 0;
86
+ opacity: $vr-opacity;
87
+ }
88
+
89
+
90
+ // Typography
91
+ //
92
+ // 1. Remove top margins from headings
93
+ // By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
94
+ // margin for easier control within type scales as it avoids margin collapsing.
95
+
96
+ %heading {
97
+ margin-top: 0; // 1
98
+ margin-bottom: $headings-margin-bottom;
99
+ font-family: $headings-font-family;
100
+ font-style: $headings-font-style;
101
+ font-weight: $headings-font-weight;
102
+ line-height: $headings-line-height;
103
+ color: var(--#{$variable-prefix}headings-color, $headings-color);
104
+ }
105
+
106
+ h1 {
107
+ @extend %heading;
108
+ @include font-size($h1-font-size);
109
+ }
110
+
111
+ h2 {
112
+ @extend %heading;
113
+ @include font-size($h2-font-size);
114
+ }
115
+
116
+ h3 {
117
+ @extend %heading;
118
+ @include font-size($h3-font-size);
119
+ }
120
+
121
+ h4 {
122
+ @extend %heading;
123
+ @include font-size($h4-font-size);
124
+ }
125
+
126
+ h5 {
127
+ @extend %heading;
128
+ @include font-size($h5-font-size);
129
+ }
130
+
131
+ h6 {
132
+ @extend %heading;
133
+ @include font-size($h6-font-size);
134
+ }
135
+
136
+
137
+ // Reset margins on paragraphs
138
+ //
139
+ // Similarly, the top margin on `<p>`s get reset. However, we also reset the
140
+ // bottom margin to use `rem` units instead of `em`.
141
+
142
+ p {
143
+ margin-top: 0;
144
+ margin-bottom: $paragraph-margin-bottom;
145
+ }
146
+
147
+
148
+ // Abbreviations
149
+ //
150
+ // 1. Duplicate behavior to the data-coreui-* attribute for our tooltip plugin
151
+ // 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
152
+ // 3. Add explicit cursor to indicate changed behavior.
153
+ // 4. Prevent the text-decoration to be skipped.
154
+
155
+ abbr[title],
156
+ abbr[data-coreui-original-title] { // 1
157
+ text-decoration: underline dotted; // 2
158
+ cursor: help; // 3
159
+ text-decoration-skip-ink: none; // 4
160
+ }
161
+
162
+
163
+ // Address
164
+
165
+ address {
166
+ margin-bottom: 1rem;
167
+ font-style: normal;
168
+ line-height: inherit;
169
+ }
170
+
171
+
172
+ // Lists
173
+
174
+ // ol,
175
+ // ul {
176
+ // @include ltr-rtl("padding-left", 2rem); // TODO: find solution
177
+ // }
178
+
179
+ ol,
180
+ ul,
181
+ dl {
182
+ margin-top: 0;
183
+ margin-bottom: 1rem;
184
+ }
185
+
186
+ ol ol,
187
+ ul ul,
188
+ ol ul,
189
+ ul ol {
190
+ margin-bottom: 0;
191
+ }
192
+
193
+ dt {
194
+ font-weight: $dt-font-weight;
195
+ }
196
+
197
+ // 1. Undo browser default
198
+
199
+ dd {
200
+ margin-bottom: .5rem;
201
+ @include ltr-rtl("margin-left", 0); // 1
202
+ }
203
+
204
+
205
+ // Blockquote
206
+
207
+ blockquote {
208
+ margin: 0 0 1rem;
209
+ }
210
+
211
+
212
+ // Strong
213
+ //
214
+ // Add the correct font weight in Chrome, Edge, and Safari
215
+
216
+ b,
217
+ strong {
218
+ font-weight: $font-weight-bolder;
219
+ }
220
+
221
+
222
+ // Small
223
+ //
224
+ // Add the correct font size in all browsers
225
+
226
+ small {
227
+ @include font-size($small-font-size);
228
+ }
229
+
230
+
231
+ // Mark
232
+
233
+ mark {
234
+ padding: $mark-padding;
235
+ background-color: var(--#{$variable-prefix}mark-bg, $mark-bg);
236
+ }
237
+
238
+
239
+ // Sub and Sup
240
+ //
241
+ // Prevent `sub` and `sup` elements from affecting the line height in
242
+ // all browsers.
243
+
244
+ sub,
245
+ sup {
246
+ position: relative;
247
+ @include font-size($sub-sup-font-size);
248
+ line-height: 0;
249
+ vertical-align: baseline;
250
+ }
251
+
252
+ sub { bottom: -.25em; }
253
+ sup { top: -.5em; }
254
+
255
+
256
+ // Links
257
+
258
+ a {
259
+ color: var(--#{$variable-prefix}link-color, $link-color);
260
+ text-decoration: $link-decoration;
261
+
262
+ &:hover {
263
+ color: var(--#{$variable-prefix}link-hover-color, $link-hover-color);
264
+ text-decoration: $link-hover-decoration;
265
+ }
266
+ }
267
+
268
+ // And undo these styles for placeholder links/named anchors (without href).
269
+ // It would be more straightforward to just use a[href] in previous block, but that
270
+ // causes specificity issues in many other styles that are too complex to fix.
271
+ // See https://github.com/twbs/bootstrap/issues/19402
272
+
273
+ a:not([href]):not([class]) {
274
+ &,
275
+ &:hover {
276
+ color: inherit;
277
+ text-decoration: none;
278
+ }
279
+ }
280
+
281
+
282
+ // Code
283
+
284
+ pre,
285
+ code,
286
+ kbd,
287
+ samp {
288
+ font-family: $font-family-code;
289
+ @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
290
+ direction: ltr #{"/* rtl:ignore */"};
291
+ unicode-bidi: bidi-override;
292
+ }
293
+
294
+ // 1. Remove browser default top margin
295
+ // 2. Reset browser default of `1em` to use `rem`s
296
+ // 3. Don't allow content to break outside
297
+
298
+ pre {
299
+ display: block;
300
+ margin-top: 0; // 1
301
+ margin-bottom: 1rem; // 2
302
+ overflow: auto; // 3
303
+ @include font-size($code-font-size);
304
+ color: var(--#{$variable-prefix}pre-color, $pre-color);
305
+
306
+ // Account for some code outputs that place code tags in pre tags
307
+ code {
308
+ @include font-size(inherit);
309
+ color: inherit;
310
+ word-break: normal;
311
+ }
312
+ }
313
+
314
+ code {
315
+ @include font-size($code-font-size);
316
+ color: var(--#{$variable-prefix}code-color, $code-color);
317
+ word-wrap: break-word;
318
+
319
+ // Streamline the style when inside anchors to avoid broken underline and more
320
+ a > & {
321
+ color: inherit;
322
+ }
323
+ }
324
+
325
+ kbd {
326
+ padding: $kbd-padding-y $kbd-padding-x;
327
+ @include font-size($kbd-font-size);
328
+ color: var(--#{$variable-prefix}kbd-color, $kbd-color);
329
+ background-color: var(--#{$variable-prefix}kbd-bg, $kbd-bg);
330
+ @include border-radius($border-radius-sm);
331
+
332
+ kbd {
333
+ padding: 0;
334
+ @include font-size(1em);
335
+ font-weight: $nested-kbd-font-weight;
336
+ }
337
+ }
338
+
339
+
340
+ // Figures
341
+ //
342
+ // Apply a consistent margin strategy (matches our type styles).
343
+
344
+ figure {
345
+ margin: 0 0 1rem;
346
+ }
347
+
348
+
349
+ // Images and content
350
+
351
+ img,
352
+ svg {
353
+ vertical-align: middle;
354
+ }
355
+
356
+
357
+ // Tables
358
+ //
359
+ // Prevent double borders
360
+
361
+ table {
362
+ caption-side: bottom;
363
+ border-collapse: collapse;
364
+ }
365
+
366
+ caption {
367
+ padding-top: $table-cell-padding-y;
368
+ padding-bottom: $table-cell-padding-y;
369
+ color: var(--#{$variable-prefix}table-caption-color, $table-caption-color);
370
+ text-align: left;
371
+ }
372
+
373
+ // 1. Removes font-weight bold by inheriting
374
+ // 2. Matches default `<td>` alignment by inheriting `text-align`.
375
+ // 3. Fix alignment for Safari
376
+
377
+ th {
378
+ font-weight: $table-th-font-weight; // 1
379
+ text-align: inherit; // 2
380
+ text-align: -webkit-match-parent; // 3
381
+ }
382
+
383
+ thead,
384
+ tbody,
385
+ tfoot,
386
+ tr,
387
+ td,
388
+ th {
389
+ border-color: inherit;
390
+ border-style: solid;
391
+ border-width: 0;
392
+ }
393
+
394
+
395
+ // Forms
396
+ //
397
+ // 1. Allow labels to use `margin` for spacing.
398
+
399
+ label {
400
+ display: inline-block; // 1
401
+ }
402
+
403
+ // Remove the default `border-radius` that macOS Chrome adds.
404
+ // See https://github.com/twbs/bootstrap/issues/24093
405
+
406
+ button {
407
+ // stylelint-disable-next-line property-disallowed-list
408
+ border-radius: 0;
409
+ }
410
+
411
+ // Explicitly remove focus outline in Chromium when it shouldn't be
412
+ // visible (e.g. as result of mouse click or touch tap). It already
413
+ // should be doing this automatically, but seems to currently be
414
+ // confused and applies its very visible two-tone outline anyway.
415
+
416
+ button:focus:not(:focus-visible) {
417
+ outline: 0;
418
+ }
419
+
420
+ // 1. Remove the margin in Firefox and Safari
421
+
422
+ input,
423
+ button,
424
+ select,
425
+ optgroup,
426
+ textarea {
427
+ margin: 0; // 1
428
+ font-family: inherit;
429
+ @include font-size(inherit);
430
+ line-height: inherit;
431
+ }
432
+
433
+ // Remove the inheritance of text transform in Firefox
434
+ button,
435
+ select {
436
+ text-transform: none;
437
+ }
438
+ // Set the cursor for non-`<button>` buttons
439
+ //
440
+ // Details at https://github.com/twbs/bootstrap/pull/30562
441
+ [role="button"] {
442
+ cursor: pointer;
443
+ }
444
+
445
+ select {
446
+ // Remove the inheritance of word-wrap in Safari.
447
+ // See https://github.com/twbs/bootstrap/issues/24990
448
+ word-wrap: normal;
449
+
450
+ // Undo the opacity change from Chrome
451
+ &:disabled {
452
+ opacity: 1;
453
+ }
454
+ }
455
+
456
+ // Remove the dropdown arrow in Chrome from inputs built with datalists.
457
+ // See https://stackoverflow.com/a/54997118
458
+
459
+ [list]::-webkit-calendar-picker-indicator {
460
+ display: none;
461
+ }
462
+
463
+ // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
464
+ // controls in Android 4.
465
+ // 2. Correct the inability to style clickable types in iOS and Safari.
466
+ // 3. Opinionated: add "hand" cursor to non-disabled button elements.
467
+
468
+ button,
469
+ [type="button"], // 1
470
+ [type="reset"],
471
+ [type="submit"] {
472
+ -webkit-appearance: button; // 2
473
+
474
+ @if $enable-button-pointers {
475
+ &:not(:disabled) {
476
+ cursor: pointer; // 3
477
+ }
478
+ }
479
+ }
480
+
481
+ // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
482
+
483
+ ::-moz-focus-inner {
484
+ padding: 0;
485
+ border-style: none;
486
+ }
487
+
488
+ // 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
489
+
490
+ textarea {
491
+ resize: vertical; // 1
492
+ }
493
+
494
+ // 1. Browsers set a default `min-width: min-content;` on fieldsets,
495
+ // unlike e.g. `<div>`s, which have `min-width: 0;` by default.
496
+ // So we reset that to ensure fieldsets behave more like a standard block element.
497
+ // See https://github.com/twbs/bootstrap/issues/12359
498
+ // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
499
+ // 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
500
+
501
+ fieldset {
502
+ min-width: 0; // 1
503
+ padding: 0; // 2
504
+ margin: 0; // 2
505
+ border: 0; // 2
506
+ }
507
+
508
+ // 1. By using `float: left`, the legend will behave like a block element.
509
+ // This way the border of a fieldset wraps around the legend if present.
510
+ // 2. Fix wrapping bug.
511
+ // See https://github.com/twbs/bootstrap/issues/29712
512
+
513
+ legend {
514
+ @include ltr-rtl("float", left); // 1
515
+ width: 100%;
516
+ padding: 0;
517
+ margin-bottom: $legend-margin-bottom;
518
+ @include font-size($legend-font-size);
519
+ font-weight: $legend-font-weight;
520
+ line-height: inherit;
521
+
522
+ + * {
523
+ clear: left; // 2
524
+ }
525
+ }
526
+
527
+ // Fix height of inputs with a type of datetime-local, date, month, week, or time
528
+ // See https://github.com/twbs/bootstrap/issues/18842
529
+
530
+ ::-webkit-datetime-edit-fields-wrapper,
531
+ ::-webkit-datetime-edit-text,
532
+ ::-webkit-datetime-edit-minute,
533
+ ::-webkit-datetime-edit-hour-field,
534
+ ::-webkit-datetime-edit-day-field,
535
+ ::-webkit-datetime-edit-month-field,
536
+ ::-webkit-datetime-edit-year-field {
537
+ padding: 0;
538
+ }
539
+
540
+ ::-webkit-inner-spin-button {
541
+ height: auto;
542
+ }
543
+
544
+ // 1. Correct the outline style in Safari.
545
+ // 2. This overrides the extra rounded corners on search inputs in iOS so that our
546
+ // `.form-control` class can properly style them. Note that this cannot simply
547
+ // be added to `.form-control` as it's not specific enough. For details, see
548
+ // https://github.com/twbs/bootstrap/issues/11586.
549
+
550
+ [type="search"] {
551
+ outline-offset: -2px; // 1
552
+ -webkit-appearance: textfield; // 2
553
+ }
554
+
555
+ // 1. A few input types should stay LTR
556
+ // See https://rtlstyling.com/posts/rtl-styling#form-inputs
557
+
558
+ *[dir="rtl"] {
559
+ [type="tel"],
560
+ [type="url"],
561
+ [type="email"],
562
+ [type="number"] {
563
+ direction: ltr;
564
+ }
565
+ }
566
+
567
+
568
+ // Remove the inner padding in Chrome and Safari on macOS.
569
+
570
+ ::-webkit-search-decoration {
571
+ -webkit-appearance: none;
572
+ }
573
+
574
+ // Remove padding around color pickers in webkit browsers
575
+
576
+ ::-webkit-color-swatch-wrapper {
577
+ padding: 0;
578
+ }
579
+
580
+
581
+ // Inherit font family and line height for file input buttons
582
+
583
+ ::file-selector-button {
584
+ font: inherit;
585
+ }
586
+
587
+ // 1. Change font properties to `inherit`
588
+ // 2. Correct the inability to style clickable types in iOS and Safari.
589
+
590
+ ::-webkit-file-upload-button {
591
+ font: inherit; // 1
592
+ -webkit-appearance: button; // 2
593
+ }
594
+
595
+ // Correct element displays
596
+
597
+ output {
598
+ display: inline-block;
599
+ }
600
+
601
+ // Remove border from iframe
602
+
603
+ iframe {
604
+ border: 0;
605
+ }
606
+
607
+ // Summary
608
+ //
609
+ // 1. Add the correct display in all browsers
610
+
611
+ summary {
612
+ display: list-item; // 1
613
+ cursor: pointer;
614
+ }
615
+
616
+
617
+ // Progress
618
+ //
619
+ // Add the correct vertical alignment in Chrome, Firefox, and Opera.
620
+
621
+ progress {
622
+ vertical-align: baseline;
623
+ }
624
+
625
+
626
+ // Hidden attribute
627
+ //
628
+ // Always hide an element with the `hidden` HTML attribute.
629
+
630
+ [hidden] {
631
+ display: none !important;
632
+ }