@finqu/cool 1.0.0

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 (199) hide show
  1. package/README.md +1 -0
  2. package/build/.eslintrc.json +10 -0
  3. package/build/banner.js +14 -0
  4. package/build/build-plugins.js +92 -0
  5. package/build/rollup.config.js +78 -0
  6. package/dist/css/cool-grid.css +3672 -0
  7. package/dist/css/cool-grid.css.map +30 -0
  8. package/dist/css/cool-grid.min.css +7 -0
  9. package/dist/css/cool-grid.min.css.map +1 -0
  10. package/dist/css/cool-reboot.css +281 -0
  11. package/dist/css/cool-reboot.css.map +58 -0
  12. package/dist/css/cool-reboot.min.css +7 -0
  13. package/dist/css/cool-reboot.min.css.map +1 -0
  14. package/dist/css/cool.css +14841 -0
  15. package/dist/css/cool.css.map +144 -0
  16. package/dist/css/cool.min.css +7 -0
  17. package/dist/css/cool.min.css.map +1 -0
  18. package/dist/js/cool.bundle.js +15304 -0
  19. package/dist/js/cool.bundle.js.map +1 -0
  20. package/dist/js/cool.bundle.min.js +45 -0
  21. package/dist/js/cool.bundle.min.js.map +1 -0
  22. package/dist/js/cool.esm.js +4766 -0
  23. package/dist/js/cool.esm.js.map +1 -0
  24. package/dist/js/cool.esm.min.js +7 -0
  25. package/dist/js/cool.esm.min.js.map +1 -0
  26. package/dist/js/cool.js +4948 -0
  27. package/dist/js/cool.js.map +1 -0
  28. package/dist/js/cool.min.js +7 -0
  29. package/dist/js/cool.min.js.map +1 -0
  30. package/html/index.html +892 -0
  31. package/js/dist/collapse.js +321 -0
  32. package/js/dist/collapse.js.map +1 -0
  33. package/js/dist/common.js +1474 -0
  34. package/js/dist/common.js.map +1 -0
  35. package/js/dist/cooldropdown.js +467 -0
  36. package/js/dist/cooldropdown.js.map +1 -0
  37. package/js/dist/coolpopover.js +391 -0
  38. package/js/dist/coolpopover.js.map +1 -0
  39. package/js/dist/coolsectiontabs.js +256 -0
  40. package/js/dist/coolsectiontabs.js.map +1 -0
  41. package/js/dist/coolselect.js +796 -0
  42. package/js/dist/coolselect.js.map +1 -0
  43. package/js/dist/cooltooltip.js +360 -0
  44. package/js/dist/cooltooltip.js.map +1 -0
  45. package/js/dist/coolui.js +73 -0
  46. package/js/dist/coolui.js.map +1 -0
  47. package/js/dist/dropdown.js +1716 -0
  48. package/js/dist/dropdown.js.map +1 -0
  49. package/js/dist/popover.js +587 -0
  50. package/js/dist/popover.js.map +1 -0
  51. package/js/dist/sectiontabs.js +263 -0
  52. package/js/dist/sectiontabs.js.map +1 -0
  53. package/js/dist/select.js +2029 -0
  54. package/js/dist/select.js.map +1 -0
  55. package/js/dist/tooltip.js +555 -0
  56. package/js/dist/tooltip.js.map +1 -0
  57. package/js/index.esm.js +21 -0
  58. package/js/index.umd.js +21 -0
  59. package/js/src/abstract-ui-component.js +70 -0
  60. package/js/src/collapse.js +258 -0
  61. package/js/src/common.js +280 -0
  62. package/js/src/dialog.js +570 -0
  63. package/js/src/dropdown.js +443 -0
  64. package/js/src/popover.js +615 -0
  65. package/js/src/section-tabs.js +204 -0
  66. package/js/src/select.js +832 -0
  67. package/js/src/toast.js +581 -0
  68. package/js/src/tooltip.js +575 -0
  69. package/js/src/util/animate-css.js +22 -0
  70. package/js/src/util/index.js +112 -0
  71. package/js/src/util/perfect-scrollbar.js +1316 -0
  72. package/less/alert.less +345 -0
  73. package/less/badge.less +38 -0
  74. package/less/bootstrap-noconflict.less +23 -0
  75. package/less/bootstrap.less +23 -0
  76. package/less/button-group.less +153 -0
  77. package/less/buttons.less +287 -0
  78. package/less/dialog-noconflict.less +174 -0
  79. package/less/dialog.less +203 -0
  80. package/less/dropdown.less +209 -0
  81. package/less/forms.less +770 -0
  82. package/less/images.less +242 -0
  83. package/less/input-group.less +163 -0
  84. package/less/list-group.less +73 -0
  85. package/less/mixins/aspect-ratio.less +23 -0
  86. package/less/mixins/border-radius.less +24 -0
  87. package/less/mixins/box-shadow.less +4 -0
  88. package/less/mixins/buttons.less +17 -0
  89. package/less/mixins/caret.less +51 -0
  90. package/less/mixins/clearfix.less +10 -0
  91. package/less/mixins/gradients.less +34 -0
  92. package/less/mixins/nav-divider.less +7 -0
  93. package/less/mixins/object-fit.less +13 -0
  94. package/less/mixins/reset-text.less +16 -0
  95. package/less/mixins.less +11 -0
  96. package/less/package.json +11 -0
  97. package/less/pagination.less +69 -0
  98. package/less/popover.less +143 -0
  99. package/less/project.sublime-workspace +774 -0
  100. package/less/reboot.less +235 -0
  101. package/less/section.less +793 -0
  102. package/less/select.less +150 -0
  103. package/less/tables.less +737 -0
  104. package/less/tabs.less +162 -0
  105. package/less/tooltip.less +87 -0
  106. package/less/type.less +71 -0
  107. package/less/utilities/align.less +27 -0
  108. package/less/utilities/animate.less +3512 -0
  109. package/less/utilities/background.less +70 -0
  110. package/less/utilities/borders.less +16 -0
  111. package/less/utilities/color.less +70 -0
  112. package/less/utilities/cursor.less +8 -0
  113. package/less/utilities/display.less +38 -0
  114. package/less/utilities/embed.less +61 -0
  115. package/less/utilities/flex.less +76 -0
  116. package/less/utilities/jquery-ui.less +116 -0
  117. package/less/utilities/lazyload.less +29 -0
  118. package/less/utilities/overflow.less +11 -0
  119. package/less/utilities/pace.less +25 -0
  120. package/less/utilities/placeholder.less +60 -0
  121. package/less/utilities/position.less +42 -0
  122. package/less/utilities/scrollbar.less +152 -0
  123. package/less/utilities/spacing.less +197 -0
  124. package/less/utilities/text.less +68 -0
  125. package/less/utilities/transform.less +7 -0
  126. package/less/utilities.less +21 -0
  127. package/less/variables.less +343 -0
  128. package/package.json +71 -0
  129. package/scss/LISENCE +15 -0
  130. package/scss/_alert.scss +125 -0
  131. package/scss/_badge.scss +58 -0
  132. package/scss/_button-group.scss +124 -0
  133. package/scss/_buttons.scss +206 -0
  134. package/scss/_custom-forms.scss +423 -0
  135. package/scss/_dialog.scss +149 -0
  136. package/scss/_dropdown.scss +234 -0
  137. package/scss/_forms.scss +257 -0
  138. package/scss/_frame.scss +523 -0
  139. package/scss/_functions.scss +114 -0
  140. package/scss/_grid.scss +35 -0
  141. package/scss/_images.scss +312 -0
  142. package/scss/_input-group.scss +245 -0
  143. package/scss/_list-group.scss +82 -0
  144. package/scss/_mixins.scss +32 -0
  145. package/scss/_navbar.scss +214 -0
  146. package/scss/_pagination.scss +79 -0
  147. package/scss/_popover.scss +165 -0
  148. package/scss/_reboot.scss +279 -0
  149. package/scss/_root.scss +15 -0
  150. package/scss/_section.scss +851 -0
  151. package/scss/_select.scss +166 -0
  152. package/scss/_tables.scss +707 -0
  153. package/scss/_tabs.scss +175 -0
  154. package/scss/_toast.scss +182 -0
  155. package/scss/_tooltip.scss +101 -0
  156. package/scss/_type.scss +90 -0
  157. package/scss/_utilities.scss +21 -0
  158. package/scss/_variables.scss +697 -0
  159. package/scss/cool-grid.scss +29 -0
  160. package/scss/cool-reboot.scss +11 -0
  161. package/scss/cool.scss +36 -0
  162. package/scss/mixins/_alert-variant.scss +40 -0
  163. package/scss/mixins/_aspect-ratio.scss +29 -0
  164. package/scss/mixins/_background-variant.scss +25 -0
  165. package/scss/mixins/_badge-variant.scss +13 -0
  166. package/scss/mixins/_breakpoints.scss +102 -0
  167. package/scss/mixins/_buttons.scss +104 -0
  168. package/scss/mixins/_caret.scss +80 -0
  169. package/scss/mixins/_clearfix.scss +10 -0
  170. package/scss/mixins/_float.scss +14 -0
  171. package/scss/mixins/_forms.scss +51 -0
  172. package/scss/mixins/_gradients.scss +40 -0
  173. package/scss/mixins/_grid-framework.scss +72 -0
  174. package/scss/mixins/_grid.scss +60 -0
  175. package/scss/mixins/_nav-divider.scss +9 -0
  176. package/scss/mixins/_object-fit.scss +16 -0
  177. package/scss/mixins/_reset-text.scss +19 -0
  178. package/scss/mixins/_text-emphasis.scss +21 -0
  179. package/scss/mixins/_text-hide.scss +10 -0
  180. package/scss/mixins/_text-truncate.scss +8 -0
  181. package/scss/project.sublime-workspace +491 -0
  182. package/scss/utilities/_align.scss +41 -0
  183. package/scss/utilities/_animate.scss +3512 -0
  184. package/scss/utilities/_background.scss +14 -0
  185. package/scss/utilities/_borders.scss +146 -0
  186. package/scss/utilities/_clearfix.scss +6 -0
  187. package/scss/utilities/_collapse.scss +33 -0
  188. package/scss/utilities/_cursor.scss +10 -0
  189. package/scss/utilities/_display.scss +16 -0
  190. package/scss/utilities/_embed.scss +78 -0
  191. package/scss/utilities/_flex.scss +50 -0
  192. package/scss/utilities/_lazyload.scss +31 -0
  193. package/scss/utilities/_overflow.scss +6 -0
  194. package/scss/utilities/_perfect-scrollbar.scss +154 -0
  195. package/scss/utilities/_placeholder.scss +76 -0
  196. package/scss/utilities/_position.scss +30 -0
  197. package/scss/utilities/_sizing.scss +32 -0
  198. package/scss/utilities/_spacing.scss +92 -0
  199. package/scss/utilities/_text.scss +97 -0
package/less/alert.less ADDED
@@ -0,0 +1,345 @@
1
+ // Alert
2
+ .alert {
3
+ display: flex;
4
+ flex-direction: row;
5
+ position: relative;
6
+ border-left: 6px solid #fafafa;
7
+ border-radius: 3px;
8
+ margin-bottom: 20px;
9
+ box-shadow: 0 1px 2px #cccccc, 0 0 0 1px #eeeeee;
10
+ width: 100%;
11
+ overflow: hidden;
12
+ align-items: center;
13
+ box-sizing: border-box;
14
+ position: relative;
15
+ @media screen and (max-width: 767px) {
16
+ margin-bottom: 10px;
17
+ }
18
+ &:hover {
19
+ .alert-selector {
20
+ color: @color-hover;
21
+ }
22
+ }
23
+ &.alert-sm {
24
+ & > .alert-content-container {
25
+ padding: 10px;
26
+ font-size: 80%;
27
+ }
28
+ }
29
+ &.alert-lg {
30
+ & > .alert-icon {
31
+ padding-left: 25px;
32
+ font-size: 22px;
33
+ &:after {
34
+ width: 47px;
35
+ }
36
+ }
37
+ & > .alert-content-container {
38
+ padding: 25px;
39
+ }
40
+ }
41
+ &.alert-success {
42
+ border-color: @color-green;
43
+ & > .alert-content-container > .alert-content > strong {
44
+ color: @color-green;
45
+ }
46
+ &:not(.alert-fill-bg) > .alert-icon {
47
+ padding: 0 15px;
48
+ width: 55px;
49
+ color: @color-white;
50
+ &:after {
51
+ width: 49px;
52
+ background-color: @color-green;
53
+ }
54
+ }
55
+ &.alert-fill-bg {
56
+ & > .alert-icon {
57
+ &:after {
58
+ background-color: @color-green;
59
+ }
60
+ }
61
+ & > .alert-content-container {
62
+ background-color: @color-green;
63
+ color: @color-white;
64
+ & > .alert-content > strong {
65
+ color: @color-white;
66
+ }
67
+ .btn-secondary {
68
+ color: @color-white;
69
+ border-color: @color-white;
70
+ &.focus,
71
+ &:focus,
72
+ &.hover,
73
+ &:hover {
74
+ background-color: @color-white;
75
+ color: @color-green;
76
+ }
77
+ }
78
+ }
79
+ }
80
+ }
81
+ &.alert-info {
82
+ border-color: @color-blue-darker;
83
+ & > .alert-content-container > .alert-content > strong {
84
+ color: @color-blue-darker;
85
+ }
86
+ &:not(.alert-fill-bg) > .alert-icon {
87
+ padding: 0 15px;
88
+ width: 55px;
89
+ color: @color-white;
90
+ &:after {
91
+ width: 49px;
92
+ background-color: @color-blue-darker;
93
+ }
94
+ }
95
+ &.alert-fill-bg {
96
+ & > .alert-icon {
97
+ color: @color-white;
98
+ &:after {
99
+ background-color: @color-blue-darker;
100
+ }
101
+ }
102
+ & > .alert-content-container {
103
+ background-color: @color-blue-darker;
104
+ color: @color-white;
105
+ & > .alert-content > strong {
106
+ color: @color-white;
107
+ }
108
+ .btn-secondary {
109
+ color: @color-white;
110
+ border-color: @color-white;
111
+ &.focus,
112
+ &:focus,
113
+ &.hover,
114
+ &:hover {
115
+ background-color: @color-white;
116
+ color: @color-blue-darker;
117
+ }
118
+ }
119
+ }
120
+ }
121
+ }
122
+ &.alert-warning {
123
+ border-color: @color-grey-darkest;
124
+ & > .alert-content-container > .alert-content > strong {
125
+ color: @color-grey-darkest;
126
+ }
127
+ &:not(.alert-fill-bg) > .alert-icon {
128
+ padding: 0 15px;
129
+ width: 55px;
130
+ color: @color-white;
131
+ &:after {
132
+ width: 49px;
133
+ background-color: @color-grey-darkest;
134
+ }
135
+ }
136
+ &.alert-fill-bg {
137
+ & > .alert-icon {
138
+ color: @color-white;
139
+ &:after {
140
+ background-color: @color-grey-darkest;
141
+ }
142
+ }
143
+ & > .alert-content-container {
144
+ background-color: @color-grey-darkest;
145
+ color: @color-white;
146
+ & > .alert-content > strong {
147
+ color: @color-white;
148
+ }
149
+ .btn-secondary {
150
+ color: @color-white;
151
+ border-color: @color-white;
152
+ &.focus,
153
+ &:focus,
154
+ &.hover,
155
+ &:hover {
156
+ background-color: @color-white;
157
+ color: @color-grey-darkest;
158
+ }
159
+ }
160
+ }
161
+ }
162
+ }
163
+ &.alert-danger {
164
+ border-color: @color-red;
165
+ & > .alert-content-container > .alert-content > strong {
166
+ color: @color-red;
167
+ }
168
+ &:not(.alert-fill-bg) > .alert-icon {
169
+ padding: 0 15px;
170
+ width: 55px;
171
+ color: @color-white;
172
+ &:after {
173
+ width: 49px;
174
+ background-color: @color-red;
175
+ }
176
+ }
177
+ &.alert-fill-bg {
178
+ & > .alert-icon {
179
+ color: @color-white;
180
+ &:after {
181
+ background-color: @color-red;
182
+ }
183
+ }
184
+ & > .alert-content-container {
185
+ background-color: @color-red;
186
+ color: @color-white;
187
+ & > .alert-content > strong {
188
+ color: @color-white;
189
+ }
190
+ .btn-secondary {
191
+ color: @color-white;
192
+ border-color: @color-white;
193
+ &.focus,
194
+ &:focus,
195
+ &.hover,
196
+ &:hover {
197
+ background-color: @color-white;
198
+ color: @color-red;
199
+ }
200
+ }
201
+ }
202
+ }
203
+ }
204
+ &.alert-primary {
205
+ border-color: @color-primary;
206
+ & > .alert-content-container > .alert-content > strong {
207
+ color: @color-primary;
208
+ }
209
+ &:not(.alert-fill-bg) > .alert-icon {
210
+ padding: 0 15px;
211
+ width: 55px;
212
+ color: @color-white;
213
+ &:after {
214
+ width: 49px;
215
+ background-color: @color-primary;
216
+ }
217
+ }
218
+ &.alert-fill-bg {
219
+ & > .alert-icon {
220
+ color: @color-white;
221
+ &:after {
222
+ background-color: @color-primary;
223
+ }
224
+ }
225
+ & > .alert-content-container {
226
+ background-color: @color-primary;
227
+ color: @color-white;
228
+ & > .alert-content > strong {
229
+ color: @color-white;
230
+ }
231
+ .btn-secondary {
232
+ color: @color-white;
233
+ border-color: @color-white;
234
+ &.focus,
235
+ &:focus,
236
+ &.hover,
237
+ &:hover {
238
+ background-color: @color-white;
239
+ color: @color-primary;
240
+ }
241
+ }
242
+ }
243
+ }
244
+ }
245
+ &.alert-secondary {
246
+ border-color: @color-secondary;
247
+ & > .alert-content-container > .alert-content > strong {
248
+ color: @color-secondary;
249
+ }
250
+ &:not(.alert-fill-bg) > .alert-icon {
251
+ padding: 0 15px;
252
+ width: 55px;
253
+ color: @color-white;
254
+ &:after {
255
+ width: 49px;
256
+ background-color: @color-secondary;
257
+ }
258
+ }
259
+ &.alert-fill-bg {
260
+ & > .alert-icon {
261
+ color: @color-white;
262
+ &:after {
263
+ background-color: @color-secondary;
264
+ }
265
+ }
266
+ & > .alert-content-container {
267
+ background-color: @color-secondary;
268
+ color: @color-white;
269
+ & > .alert-content > strong {
270
+ color: @color-white;
271
+ }
272
+ .btn-secondary {
273
+ color: @color-white;
274
+ border-color: @color-white;
275
+ &.focus,
276
+ &:focus,
277
+ &.hover,
278
+ &:hover {
279
+ background-color: @color-white;
280
+ color: @color-secondary;
281
+ }
282
+ }
283
+ }
284
+ }
285
+ }
286
+ .alert-icon {
287
+ color: @color-icon;
288
+ padding-left: 15px;
289
+ margin-left: -6px;
290
+ z-index: 1;
291
+ box-sizing: border-box;
292
+ font-size: 20px;
293
+ &:after {
294
+ content: '';
295
+ position: absolute;
296
+ top: 0;
297
+ bottom: 0;
298
+ left: 0;
299
+ z-index: -1;
300
+ width: 34px;
301
+ background: #fafafa;
302
+ }
303
+ }
304
+ .alert-content-container {
305
+ display: flex;
306
+ align-items: center;
307
+ background: #fafafa;
308
+ flex: 1;
309
+ padding: 15px;
310
+ box-sizing: border-box;
311
+ @media screen and (max-width: 767px) {
312
+ flex-wrap: wrap;
313
+ }
314
+ .alert-content {
315
+ flex: 1;
316
+ @media screen and (max-width: 767px) {
317
+ flex: 0 1 auto
318
+ }
319
+ & + .alert-action {
320
+ margin-left: 15px;
321
+ @media screen and (max-width: 767px) {
322
+ margin-top: 15px;
323
+ margin-left: 0;
324
+ }
325
+ }
326
+ }
327
+ }
328
+ .alert-selector {
329
+ text-align: right;
330
+ margin-right: 15px;
331
+ width: 30px;
332
+ font-size: 22px;
333
+ &:after {
334
+ content: '';
335
+ position: absolute;
336
+ top: 0;
337
+ bottom: 0;
338
+ right: 0;
339
+ z-index: -1;
340
+ width: 30px;
341
+ background: #fafafa;
342
+ padding-left: 15px;
343
+ }
344
+ }
345
+ }
package/less/badge.less ADDED
@@ -0,0 +1,38 @@
1
+ // Badge
2
+ .badge {
3
+ background: @color-grey;
4
+ border: none;
5
+ border-radius: @border-radius;
6
+ color: @color-white;
7
+ display: inline-block;
8
+ font-weight: @btn-font-weight;
9
+ font-size: @btn-font-size-xs;
10
+ padding: @btn-padding-y-xs @btn-padding-x-xs;
11
+ line-height: @line-height-xs;
12
+ box-sizing: border-box;
13
+ margin: 2px;
14
+ text-align: center;
15
+ text-decoration: none;
16
+ touch-action: manipulation;
17
+ user-select: none;
18
+ vertical-align: middle;
19
+ white-space: nowrap;
20
+ &.badge-green {
21
+ background: @color-green;
22
+ }
23
+ &.badge-red {
24
+ background: @color-red;
25
+ }
26
+ &.badge-yellow {
27
+ background: @color-yellow;
28
+ }
29
+ &.badge-black {
30
+ background: @color-black;
31
+ }
32
+ &.badge-grey {
33
+ background: @color-grey-dark;
34
+ }
35
+ &.badge-grey-dark {
36
+ background: @color-grey-darker;
37
+ }
38
+ }
package/less/bootstrap-noconflict.less ADDED
@@ -0,0 +1,23 @@
1
+ // Finqu UI
2
+ @import "variables.less";
3
+ @import "mixins.less";
4
+ @import "reboot.less";
5
+ @import "type.less";
6
+ @import "images.less";
7
+ @import "tables.less";
8
+ @import "forms.less";
9
+ @import "buttons.less";
10
+ @import "dropdown.less";
11
+ @import "button-group.less";
12
+ @import "input-group.less";
13
+ @import "tabs.less";
14
+ @import "pagination.less";
15
+ @import "badge.less";
16
+ @import "alert.less";
17
+ @import "tooltip.less";
18
+ @import "popover.less";
19
+ @import "dialog-noconflict.less";
20
+ @import "section.less";
21
+ @import "utilities.less";
22
+ @import "select.less";
23
+ @import "list-group.less";
package/less/bootstrap.less ADDED
@@ -0,0 +1,23 @@
1
+ // Finqu UI
2
+ @import "variables.less";
3
+ @import "mixins.less";
4
+ @import "reboot.less";
5
+ @import "type.less";
6
+ @import "images.less";
7
+ @import "tables.less";
8
+ @import "forms.less";
9
+ @import "buttons.less";
10
+ @import "dropdown.less";
11
+ @import "button-group.less";
12
+ @import "input-group.less";
13
+ @import "tabs.less";
14
+ @import "pagination.less";
15
+ @import "badge.less";
16
+ @import "alert.less";
17
+ @import "tooltip.less";
18
+ @import "popover.less";
19
+ @import "dialog.less";
20
+ @import "section.less";
21
+ @import "utilities.less";
22
+ @import "select.less";
23
+ @import "list-group.less";
package/less/button-group.less ADDED
@@ -0,0 +1,153 @@
1
+ // Button group
2
+ .btn-group {
3
+ display: inline-flex;
4
+ position: relative;
5
+ vertical-align: middle;
6
+ margin: 5px 0;
7
+ &.text-center {
8
+ font-size: 0;
9
+ justify-content: center;
10
+ .btn,.dropdown {
11
+ font-size: @font-size-base;
12
+ display: inline-block;
13
+ vertical-align: middle;
14
+ }
15
+ }
16
+ &.text-right {
17
+ justify-content: flex-end;
18
+ .btn,.dropdown {
19
+ border-right: none;
20
+ border-left: 1px solid #fff;
21
+ display: inline-block;
22
+ vertical-align: middle;
23
+ }
24
+ }
25
+ > .btn, >.dropdown {
26
+ flex: 0 0 auto;
27
+ display: block;
28
+ margin: 0 3px;
29
+ }
30
+ &.justify-content-start {
31
+ display: flex;
32
+ justify-content: flex-start !important;
33
+ }
34
+ &.justify-content-center {
35
+ display: flex;
36
+ justify-content: center !important;
37
+ }
38
+ &.justify-content-end {
39
+ display: flex;
40
+ justify-content: flex-end !important;
41
+ }
42
+ &.justify-content-between {
43
+ display: flex;
44
+ justify-content: space-between !important;
45
+ }
46
+ &.justify-content-around {
47
+ display: flex;
48
+ justify-content: space-around !important;
49
+ }
50
+ }
51
+
52
+ // Vertical button groups
53
+ .btn-group-vertical {
54
+ display: inline-flex;
55
+ flex-direction: column;
56
+ align-items: flex-start;
57
+ justify-content: center;
58
+ position: relative;
59
+ vertical-align: middle;
60
+ margin: 5px 0;
61
+ .btn:not(.btn-icon),
62
+ .btn-group {
63
+ width: 100%;
64
+ }
65
+ > .btn {
66
+ position: relative;
67
+ flex: 0 1 auto;
68
+ }
69
+ .btn {
70
+ margin: 5px 0 0 0;
71
+ &:first-child {
72
+ margin-top: 0;
73
+ }
74
+ }
75
+ }
76
+
77
+ @media screen and (min-width: 1025px) {
78
+ .btn-group-vertical-desktop {
79
+ display: inline-flex;
80
+ flex-direction: column;
81
+ align-items: flex-start;
82
+ justify-content: center;
83
+ position: relative;
84
+ vertical-align: middle;
85
+ margin: 5px 0;
86
+ .btn:not(.btn-icon),
87
+ .btn-group {
88
+ width: 100%;
89
+ }
90
+ > .btn {
91
+ position: relative;
92
+ flex: 0 1 auto;
93
+ }
94
+ .btn {
95
+ margin: 5px 0 0 0;
96
+ &:first-child {
97
+ margin-top: 0;
98
+ }
99
+ }
100
+ }
101
+ }
102
+
103
+ @media screen and (min-width: 768px) and (max-width: 1024px) {
104
+ .btn-group-vertical-mobile {
105
+ display: inline-flex;
106
+ flex-direction: column;
107
+ align-items: flex-start;
108
+ justify-content: center;
109
+ position: relative;
110
+ vertical-align: middle;
111
+ margin: 5px 0;
112
+ .btn:not(.btn-icon),
113
+ .btn-group {
114
+ width: 100%;
115
+ }
116
+ > .btn {
117
+ position: relative;
118
+ flex: 0 1 auto;
119
+ }
120
+ .btn {
121
+ margin: 5px 0 0 0;
122
+ &:first-child {
123
+ margin-top: 0;
124
+ }
125
+ }
126
+ }
127
+ }
128
+
129
+ @media screen and (max-width: 767px) {
130
+ .btn-group-vertical-tablet {
131
+ display: inline-flex;
132
+ flex-direction: column;
133
+ align-items: flex-start;
134
+ justify-content: center;
135
+ position: relative;
136
+ vertical-align: middle;
137
+ margin: 5px 0;
138
+ .btn:not(.btn-icon),
139
+ .btn-group {
140
+ width: 100%;
141
+ }
142
+ > .btn {
143
+ position: relative;
144
+ flex: 0 1 auto;
145
+ }
146
+ .btn {
147
+ margin: 5px 0 0 0;
148
+ &:first-child {
149
+ margin-top: 0;
150
+ }
151
+ }
152
+ }
153
+ }