@finqu/cool 1.2.28 → 1.3.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 (207) hide show
  1. package/README.md +680 -1
  2. package/dist/css/cool.css +23510 -16076
  3. package/dist/css/cool.css.map +1 -154
  4. package/dist/css/cool.min.css +89 -3
  5. package/dist/css/cool.min.css.map +1 -1
  6. package/dist/js/cool.bundle.js +15397 -3775
  7. package/dist/js/cool.bundle.js.map +1 -1
  8. package/dist/js/cool.bundle.min.js +20 -8
  9. package/dist/js/cool.bundle.min.js.map +1 -1
  10. package/dist/js/cool.esm.js +4281 -3352
  11. package/dist/js/cool.esm.js.map +1 -1
  12. package/dist/js/cool.esm.min.js +9 -8
  13. package/dist/js/cool.esm.min.js.map +1 -1
  14. package/dist/js/cool.js +4283 -3354
  15. package/dist/js/cool.js.map +1 -1
  16. package/dist/js/cool.min.js +9 -8
  17. package/dist/js/cool.min.js.map +1 -1
  18. package/package.json +94 -61
  19. package/.babelrc.js +0 -20
  20. package/.browserslistrc +0 -13
  21. package/build/.eslintrc.json +0 -10
  22. package/build/banner.js +0 -14
  23. package/build/build-plugins.js +0 -92
  24. package/build/rollup.config.js +0 -46
  25. package/dist/css/cool-grid.css +0 -3704
  26. package/dist/css/cool-grid.css.map +0 -30
  27. package/dist/css/cool-grid.min.css +0 -7
  28. package/dist/css/cool-grid.min.css.map +0 -1
  29. package/dist/css/cool-reboot.css +0 -285
  30. package/dist/css/cool-reboot.css.map +0 -62
  31. package/dist/css/cool-reboot.min.css +0 -7
  32. package/dist/css/cool-reboot.min.css.map +0 -1
  33. package/html/dropdown-test.html +0 -200
  34. package/html/index.html +0 -2704
  35. package/js/dist/collapse.js +0 -5290
  36. package/js/dist/collapse.js.map +0 -1
  37. package/js/dist/common.js +0 -22152
  38. package/js/dist/common.js.map +0 -1
  39. package/js/dist/cooldropdown.js +0 -467
  40. package/js/dist/cooldropdown.js.map +0 -1
  41. package/js/dist/coolpopover.js +0 -391
  42. package/js/dist/coolpopover.js.map +0 -1
  43. package/js/dist/coolsectiontabs.js +0 -256
  44. package/js/dist/coolsectiontabs.js.map +0 -1
  45. package/js/dist/coolselect.js +0 -796
  46. package/js/dist/coolselect.js.map +0 -1
  47. package/js/dist/cooltooltip.js +0 -360
  48. package/js/dist/cooltooltip.js.map +0 -1
  49. package/js/dist/coolui.js +0 -73
  50. package/js/dist/coolui.js.map +0 -1
  51. package/js/dist/dropdown.js +0 -27421
  52. package/js/dist/dropdown.js.map +0 -1
  53. package/js/dist/popover.js +0 -9298
  54. package/js/dist/popover.js.map +0 -1
  55. package/js/dist/sectiontabs.js +0 -4483
  56. package/js/dist/sectiontabs.js.map +0 -1
  57. package/js/dist/select.js +0 -37052
  58. package/js/dist/select.js.map +0 -1
  59. package/js/dist/tooltip.js +0 -8786
  60. package/js/dist/tooltip.js.map +0 -1
  61. package/js/index.esm.js +0 -21
  62. package/js/index.umd.js +0 -21
  63. package/js/src/abstract-ui-component.js +0 -81
  64. package/js/src/collapse.js +0 -272
  65. package/js/src/common.js +0 -313
  66. package/js/src/dialog.js +0 -578
  67. package/js/src/dropdown.js +0 -525
  68. package/js/src/popover.js +0 -621
  69. package/js/src/section-tabs.js +0 -215
  70. package/js/src/select.js +0 -1341
  71. package/js/src/toast.js +0 -581
  72. package/js/src/tooltip.js +0 -591
  73. package/js/src/util/animate-css.js +0 -22
  74. package/js/src/util/index.js +0 -122
  75. package/js/src/util/perfect-scrollbar.js +0 -1316
  76. package/less/alert.less +0 -345
  77. package/less/badge.less +0 -38
  78. package/less/bootstrap-noconflict.less +0 -23
  79. package/less/bootstrap.less +0 -23
  80. package/less/button-group.less +0 -153
  81. package/less/buttons.less +0 -287
  82. package/less/dialog-noconflict.less +0 -174
  83. package/less/dialog.less +0 -203
  84. package/less/dropdown.less +0 -209
  85. package/less/forms.less +0 -770
  86. package/less/images.less +0 -242
  87. package/less/input-group.less +0 -163
  88. package/less/list-group.less +0 -73
  89. package/less/mixins/aspect-ratio.less +0 -23
  90. package/less/mixins/border-radius.less +0 -24
  91. package/less/mixins/box-shadow.less +0 -4
  92. package/less/mixins/buttons.less +0 -17
  93. package/less/mixins/caret.less +0 -51
  94. package/less/mixins/clearfix.less +0 -10
  95. package/less/mixins/gradients.less +0 -34
  96. package/less/mixins/nav-divider.less +0 -7
  97. package/less/mixins/object-fit.less +0 -13
  98. package/less/mixins/reset-text.less +0 -16
  99. package/less/mixins.less +0 -11
  100. package/less/package.json +0 -11
  101. package/less/pagination.less +0 -69
  102. package/less/popover.less +0 -143
  103. package/less/project.sublime-workspace +0 -774
  104. package/less/reboot.less +0 -235
  105. package/less/section.less +0 -793
  106. package/less/select.less +0 -150
  107. package/less/tables.less +0 -737
  108. package/less/tabs.less +0 -162
  109. package/less/tooltip.less +0 -87
  110. package/less/type.less +0 -71
  111. package/less/utilities/align.less +0 -27
  112. package/less/utilities/animate.less +0 -3512
  113. package/less/utilities/background.less +0 -70
  114. package/less/utilities/borders.less +0 -16
  115. package/less/utilities/color.less +0 -70
  116. package/less/utilities/cursor.less +0 -8
  117. package/less/utilities/display.less +0 -38
  118. package/less/utilities/embed.less +0 -61
  119. package/less/utilities/flex.less +0 -76
  120. package/less/utilities/jquery-ui.less +0 -116
  121. package/less/utilities/lazyload.less +0 -29
  122. package/less/utilities/overflow.less +0 -11
  123. package/less/utilities/pace.less +0 -25
  124. package/less/utilities/placeholder.less +0 -60
  125. package/less/utilities/position.less +0 -42
  126. package/less/utilities/scrollbar.less +0 -152
  127. package/less/utilities/spacing.less +0 -197
  128. package/less/utilities/text.less +0 -68
  129. package/less/utilities/transform.less +0 -7
  130. package/less/utilities.less +0 -21
  131. package/less/variables.less +0 -343
  132. package/scss/LISENCE +0 -15
  133. package/scss/_alert.scss +0 -106
  134. package/scss/_badge.scss +0 -71
  135. package/scss/_button-group.scss +0 -129
  136. package/scss/_buttons.scss +0 -207
  137. package/scss/_custom-forms.scss +0 -429
  138. package/scss/_dialog.scss +0 -161
  139. package/scss/_dropdown.scss +0 -231
  140. package/scss/_forms.scss +0 -257
  141. package/scss/_frame.scss +0 -548
  142. package/scss/_functions.scss +0 -124
  143. package/scss/_grid.scss +0 -35
  144. package/scss/_images.scss +0 -362
  145. package/scss/_input-group.scss +0 -271
  146. package/scss/_list-group.scss +0 -82
  147. package/scss/_mixins.scss +0 -34
  148. package/scss/_navbar.scss +0 -264
  149. package/scss/_notification.scss +0 -13
  150. package/scss/_pagination.scss +0 -79
  151. package/scss/_popover.scss +0 -165
  152. package/scss/_reboot.scss +0 -283
  153. package/scss/_root.scss +0 -15
  154. package/scss/_section.scss +0 -912
  155. package/scss/_select.scss +0 -175
  156. package/scss/_tables.scss +0 -716
  157. package/scss/_tabs.scss +0 -175
  158. package/scss/_toast.scss +0 -182
  159. package/scss/_tooltip.scss +0 -101
  160. package/scss/_type.scss +0 -121
  161. package/scss/_utilities.scss +0 -23
  162. package/scss/_variables.scss +0 -699
  163. package/scss/cool-grid.scss +0 -29
  164. package/scss/cool-reboot.scss +0 -11
  165. package/scss/cool.scss +0 -37
  166. package/scss/mixins/_alert-variant.scss +0 -25
  167. package/scss/mixins/_aspect-ratio.scss +0 -29
  168. package/scss/mixins/_background-variant.scss +0 -25
  169. package/scss/mixins/_badge-variant.scss +0 -36
  170. package/scss/mixins/_breakpoints.scss +0 -102
  171. package/scss/mixins/_buttons.scss +0 -104
  172. package/scss/mixins/_caret.scss +0 -80
  173. package/scss/mixins/_clearfix.scss +0 -10
  174. package/scss/mixins/_float.scss +0 -14
  175. package/scss/mixins/_forms.scss +0 -67
  176. package/scss/mixins/_gradients.scss +0 -40
  177. package/scss/mixins/_grid-framework.scss +0 -72
  178. package/scss/mixins/_grid.scss +0 -60
  179. package/scss/mixins/_nav-divider.scss +0 -9
  180. package/scss/mixins/_notification-variant.scss +0 -7
  181. package/scss/mixins/_object-fit.scss +0 -16
  182. package/scss/mixins/_reset-text.scss +0 -19
  183. package/scss/mixins/_text-emphasis.scss +0 -21
  184. package/scss/mixins/_text-hide.scss +0 -10
  185. package/scss/mixins/_text-truncate.scss +0 -81
  186. package/scss/mixins/_visibility.scss +0 -7
  187. package/scss/project.sublime-workspace +0 -491
  188. package/scss/utilities/_align.scss +0 -41
  189. package/scss/utilities/_animate.scss +0 -3512
  190. package/scss/utilities/_background.scss +0 -14
  191. package/scss/utilities/_borders.scss +0 -146
  192. package/scss/utilities/_clearfix.scss +0 -6
  193. package/scss/utilities/_collapse.scss +0 -33
  194. package/scss/utilities/_cursor.scss +0 -22
  195. package/scss/utilities/_display.scss +0 -16
  196. package/scss/utilities/_embed.scss +0 -78
  197. package/scss/utilities/_flex.scss +0 -52
  198. package/scss/utilities/_lazyload.scss +0 -31
  199. package/scss/utilities/_overflow.scss +0 -6
  200. package/scss/utilities/_perfect-scrollbar.scss +0 -141
  201. package/scss/utilities/_placeholder.scss +0 -76
  202. package/scss/utilities/_position.scss +0 -30
  203. package/scss/utilities/_sizing.scss +0 -32
  204. package/scss/utilities/_spacing.scss +0 -92
  205. package/scss/utilities/_text.scss +0 -99
  206. package/scss/utilities/_user-select.scss +0 -14
  207. package/scss/utilities/_visibility.scss +0 -10
@@ -1,912 +0,0 @@
1
- // Section
2
- // ---------------------------------------------------------------------------------------------------------------
3
-
4
- .section-container {
5
- display: flex;
6
- flex-direction: column;
7
- margin-bottom: $section-spacer;
8
- @include media-breakpoint-down(sm) {
9
- margin-bottom: $section-spacer-mobile;
10
- }
11
- }
12
-
13
- .section-subtitle {
14
- display: block;
15
- margin-bottom: $section-spacer;
16
- @include media-breakpoint-down(sm) {
17
- margin-bottom: $section-spacer-mobile;
18
- }
19
- }
20
-
21
- .section {
22
- display: flex;
23
- flex-direction: column;
24
- height: 100%;
25
- margin-bottom: $section-spacer;
26
- box-shadow: $section-box-shadow;
27
- border-radius: $border-radius;
28
- @include media-breakpoint-down(sm) {
29
- margin-bottom: $section-spacer-mobile;
30
- }
31
-
32
- &:not([class*="order-"]):last-child,
33
- &.last-child {
34
- margin-bottom: 0;
35
- }
36
-
37
- &.section-height-auto {
38
- height: auto;
39
- }
40
-
41
- &.section-parent {
42
- > .section-content {
43
- padding: 0;
44
- }
45
- }
46
-
47
- // Hover
48
- &.section-hover {
49
- transition: box-shadow 0.1s linear;
50
-
51
- &:hover {
52
- box-shadow: $section-hover-box-shadow;
53
- }
54
- }
55
-
56
- // Guide
57
- &.section-guide {
58
- &:not(.show-more) {
59
- .section-content {
60
- @include media-breakpoint-down(md) {
61
- p {
62
- &:not(:first-child) {
63
- display: none;
64
- }
65
-
66
- &:first-child {
67
- white-space: nowrap;
68
- overflow: hidden;
69
- text-overflow: ellipsis;
70
- margin-bottom: 0;
71
- }
72
- }
73
- }
74
-
75
- @include media-breakpoint-up(md) {
76
- [name="guide-read-more"] {
77
- display: none;
78
- }
79
- }
80
- }
81
-
82
- .guide-videos {
83
- @include media-breakpoint-down(md) {
84
- display: none;
85
- }
86
- }
87
- }
88
- .guide-content {
89
- & + .guide-videos {
90
- @include media-breakpoint-down(md) {
91
- margin-top: 20px;
92
- }
93
- }
94
- }
95
- }
96
-
97
- // Image
98
- .section-image {
99
- position: relative;
100
- background-color: color('white');
101
- background-size: cover;
102
- background-repeat: no-repeat;
103
- overflow: hidden;
104
- border-top-left-radius: $border-radius;
105
- border-top-right-radius: $border-radius;
106
-
107
- &.size-sm {
108
- min-height: 170px;
109
- }
110
-
111
- &.size-md {
112
- min-height: 230px;
113
- }
114
-
115
- &.size-lg {
116
- min-height: 326px;
117
- }
118
-
119
- &.darken-image {
120
- z-index: 1;
121
- &:after {
122
- position: absolute;
123
- top: 0;
124
- right: 0;
125
- bottom: 0;
126
- left: 0;
127
- background-color: rgba(0,0,0,0.15);
128
- content: '';
129
- z-index: -1;
130
- }
131
- }
132
-
133
- & + .section-tabs:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
134
- & + .section-content:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
135
- & + .section-filters:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
136
- & + .section-bulk-actions:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
137
- & + .section-title:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
138
- & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
139
- & + .section-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
140
- border-top-left-radius: 0;
141
- border-top-right-radius: 0;
142
- }
143
-
144
- .image-badge {
145
- position: absolute;
146
- top: 30px;
147
- left: -40px;
148
- transform: rotate(-40deg);
149
- background-color: color('blue');
150
- color: color('white');
151
- box-shadow: 0 0 3px rgba(0,0,0,0.3);
152
- text-align: center;
153
- letter-spacing: 1px;
154
- width: 220px;
155
- text-overflow: ellipsis;
156
- overflow: hidden;
157
- box-sizing: border-box;
158
- padding: 10px 0;
159
- font-size: 12px;
160
-
161
- .image-badge-content {
162
- display: block;
163
- width: 145px;
164
- height: 18px;
165
- margin-left: 28px;
166
- text-overflow: ellipsis;
167
- overflow: hidden;
168
- }
169
- }
170
- }
171
-
172
- // Video
173
- .section-video {
174
- height: 100%;
175
- background-color: color('black');
176
- border-radius: $border-radius;
177
- overflow: hidden;
178
-
179
- &.size-md {
180
- height: 230px;
181
- }
182
-
183
- &.size-lg {
184
- max-height: 326px;
185
- }
186
-
187
- &.has-content {
188
- border-bottom-left-radius: 0;
189
- border-bottom-right-radius: 0;
190
- }
191
-
192
- & + .section-tabs:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
193
- & + .section-content:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
194
- & + .section-filters:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
195
- & + .section-bulk-actions:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
196
- & + .section-title:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
197
- & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
198
- & + .section-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
199
- border-top-left-radius: 0;
200
- border-top-right-radius: 0;
201
- }
202
- }
203
-
204
- // Bg
205
- &.section-bg {
206
- .section-content {
207
- background-color: transparent;
208
- background-size: cover;
209
- background-repeat: no-repeat;
210
-
211
- &.darken-bg {
212
- position: relative;
213
- z-index: 2;
214
-
215
- &:after {
216
- position: absolute;
217
- top: 0;
218
- right: 0;
219
- bottom: 0;
220
- left: 0;
221
- background-color: rgba(0,0,0,0.15);
222
- content: '';
223
- z-index: -1;
224
- }
225
- }
226
- }
227
- }
228
-
229
- // Diviner
230
- .section-hr {
231
- background: $section-bg;
232
- padding-top: $section-padding / 2;
233
- padding-bottom: $section-padding / 2;
234
-
235
- &.content-full-width {
236
- &:after {
237
- margin-left: 0;
238
- margin-right: 0;
239
- }
240
- }
241
-
242
- &:after {
243
- display: block;
244
- content: '';
245
- height: 1px;
246
- background: $section-divider-color;
247
- margin-left: $section-padding;
248
- margin-right: $section-padding;
249
- }
250
- }
251
-
252
- // Tabs
253
- .section-tabs {
254
- background: $section-tabs-bg;
255
- color: $section-color;
256
- border-top-left-radius: $section-border-radius;
257
- border-top-right-radius: $section-border-radius;
258
-
259
- & + .section-tabs:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
260
- & + .section-content:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
261
- & + .section-filters:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
262
- & + .section-bulk-actions:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
263
- & + .section-title:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
264
- & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
265
- & + .section-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
266
- border-top-left-radius: 0;
267
- border-top-right-radius: 0;
268
- }
269
-
270
- & + .section-hr {
271
- margin-top: -$section-padding / 2;
272
- margin-bottom: -$section-padding / 2;
273
- }
274
-
275
- > .tabs-container {
276
- display: flex;
277
- align-items: stretch;
278
- flex-wrap: nowrap;
279
- list-style: none;
280
- padding: 0;
281
- margin: 0;
282
- overflow: visible;
283
- border-bottom: 1px solid $section-tabs-border-color;
284
-
285
- > .tab-item {
286
- display: flex;
287
- align-items: stretch;
288
- flex-grow: 0;
289
- flex-shrink: 0;
290
- position: relative;
291
- margin: 0;
292
-
293
- &:first-child {
294
- > .tab-item-action {
295
- margin-left: $section-tabs-item-margin-x;
296
- }
297
- }
298
-
299
- &.dropdown-container {
300
- display: none;
301
- &.visible {
302
- display: flex;
303
- }
304
- }
305
-
306
- > .tab-item-action {
307
- display: flex;
308
- align-items: center;
309
- justify-content: center;
310
- flex-grow: 1;
311
- line-height: 1;
312
- position: relative;
313
- text-align: center;
314
- cursor: pointer;
315
- min-width: $section-tabs-item-min-width;
316
- padding: $section-tabs-item-padding-y 0;
317
- margin-right: $section-tabs-item-margin-x;
318
- color: $section-tabs-color;
319
- border-bottom: $section-tabs-border-width solid transparent;
320
-
321
- &:hover {
322
- color: $section-tabs-hover-color;
323
- border-color: $section-tabs-border-hover-color;
324
- }
325
-
326
- &.active {
327
- color: $section-tabs-active-color;
328
- border-color: $section-tabs-border-active-color;
329
- }
330
- }
331
-
332
- > span.tab-item-action {
333
- cursor: default;
334
- }
335
- }
336
- }
337
- }
338
-
339
- // Filters
340
- .section-filters {
341
- position: absolute;
342
- visibility: hidden;
343
- flex-wrap: wrap;
344
- background: $section-bg;
345
- color: $section-color;
346
- padding: $section-padding / 2;
347
- box-sizing: border-box;
348
- border-top: 1px solid $section-divider-color;
349
-
350
- & + .section-tabs:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
351
- & + .section-content:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
352
- & + .section-filters:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
353
- & + .section-bulk-actions:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
354
- & + .section-title:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
355
- & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
356
- & + .section-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
357
- margin-top: -$border-radius;
358
- }
359
-
360
- & + .section-hr {
361
- margin-top: -$section-padding / 2;
362
- margin-bottom: -$section-padding / 2;
363
- }
364
-
365
- &.active {
366
- display: flex;
367
- position: static;
368
- visibility: visible;
369
- }
370
-
371
- .filter {
372
- position: absolute;
373
- visibility: hidden;
374
- flex: 0 0 25%;
375
- max-width: 25%;
376
- padding: $section-padding / 2;
377
- box-sizing: border-box;
378
- @include media-breakpoint-only(md) {
379
- flex: 0 0 50%;
380
- max-width: 50%;
381
- }
382
- @include media-breakpoint-down(sm) {
383
- flex: 0 0 100%;
384
- max-width: 100%;
385
- }
386
-
387
- &.active {
388
- position: static;
389
- visibility: visible;
390
- }
391
- }
392
- }
393
-
394
- // Bulk actions
395
- .section-bulk-actions {
396
- position: absolute;
397
- visibility: hidden;
398
- flex-wrap: wrap;
399
- background: $section-bg;
400
- color: $section-color;
401
- padding: $section-padding / 2;
402
- box-sizing: border-box;
403
- border-top: 1px solid $section-divider-color;
404
-
405
- & + .section-tabs:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
406
- & + .section-content:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
407
- & + .section-filters:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
408
- & + .section-bulk-actions:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
409
- & + .section-title:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
410
- & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
411
- & + .section-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
412
- margin-top: -$border-radius;
413
- }
414
-
415
- & + .section-hr {
416
- margin-top: -$section-padding / 2;
417
- margin-bottom: -$section-padding / 2;
418
- }
419
-
420
- &.active {
421
- display: flex;
422
- position: static;
423
- visibility: visible;
424
- }
425
-
426
- .bulk-action {
427
- display: flex;
428
- align-items: center;
429
- width: 100%;
430
- position: absolute;
431
- visibility: hidden;
432
- padding: $section-padding / 2;
433
- box-sizing: border-box;
434
- @include media-breakpoint-down(md) {
435
- flex-wrap: wrap;
436
- flex-direction: column;
437
- align-items: flex-start;
438
- }
439
-
440
- &.active {
441
- position: static;
442
- visibility: visible;
443
- }
444
-
445
- .bulk-action-select {
446
- display: inline-flex;
447
- flex: 1;
448
- align-items: center;
449
- font-size: 12px;
450
- max-width: 200px;
451
- width: 100%;
452
- @include media-breakpoint-down(md) {
453
- margin-top: 15px;
454
- }
455
- @include media-breakpoint-up(md) {
456
- margin-left: auto;
457
- margin-right: 10px;
458
- }
459
-
460
- & + .bulk-action-actions {
461
- margin-left: 0;
462
- }
463
-
464
- .form-control {
465
- margin-left: 5px;
466
- }
467
- }
468
-
469
- .bulk-action-actions {
470
- @include media-breakpoint-down(md) {
471
- margin-top: 15px;
472
- }
473
- @include media-breakpoint-up(md) {
474
- margin-left: auto;
475
- }
476
- }
477
- }
478
- }
479
-
480
- // Placeholder
481
- .section-placeholder {
482
- flex-direction: column;
483
- flex-grow: 1;
484
- align-items: center;
485
- justify-content: center;
486
- background: $section-bg;
487
- color: $section-color;
488
- border-radius: $section-border-radius;
489
- padding: $section-padding * 3 $section-padding;
490
- overflow-x: auto;
491
- box-sizing: border-box;
492
-
493
- & + .section-tabs:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
494
- & + .section-content:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
495
- & + .section-filters:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
496
- & + .section-bulk-actions:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
497
- & + .section-title:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
498
- & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
499
- & + .section-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
500
- margin-top: -$border-radius;
501
- }
502
-
503
- & + .section-hr {
504
- margin-top: -$section-padding / 2;
505
- margin-bottom: -$section-padding / 2;
506
- }
507
-
508
- .placeholder-icon {
509
- .icon-container {
510
- display: flex;
511
- align-items: center;
512
- justify-content: center;
513
- border-radius: 50%;
514
- width: 100px;
515
- height: 100px;
516
- color: color('grey-darker');
517
- background-color: color('grey-lighter');
518
- padding: 10px;
519
- margin: 0 auto;
520
- box-sizing: content-box;
521
-
522
- .icon {
523
- font-size: 5rem;
524
- }
525
- }
526
-
527
- & + .placeholder-title,
528
- & + .placeholder-description,
529
- & + .placeholder-action,
530
- & + .placeholder-action-secondary {
531
- margin-top: 20px;
532
- }
533
- }
534
-
535
- .placeholder-title {
536
- text-align: center;
537
- color: darken(color('grey-darker'), 10%);
538
-
539
- & + .placeholder-description {
540
- margin-top: 10px;
541
- }
542
-
543
- & + .placeholder-action,
544
- & + .placeholder-action-secondary {
545
- margin-top: 20px;
546
- }
547
- }
548
-
549
- .placeholder-description {
550
- text-align: center;
551
- font-weight: $font-weight-light;
552
- color: color('grey-darker');
553
-
554
- .description {
555
- margin-bottom: 0;
556
- }
557
-
558
- & + .placeholder-action,
559
- & + .placeholder-action-secondary {
560
- margin-top: 20px;
561
- }
562
- }
563
-
564
- .placeholder-action {
565
- text-align: center;
566
-
567
- & + .placeholder-action-secondary {
568
- margin-top: 20px;
569
- }
570
- }
571
- }
572
-
573
- // Header
574
- .section-title,
575
- .section-sub-heading {
576
- font-family: $section-header-font-family;
577
- font-size: $section-header-font-size;
578
- font-weight: $section-header-font-weight;
579
- color: $section-header-color;
580
- background: $section-header-bg;
581
- border-radius: $border-radius;
582
- padding: $section-padding;
583
- align-items: center;
584
- display: flex;
585
- @include media-breakpoint-down(sm) {
586
- display: block;
587
- }
588
-
589
- & + .section-tabs:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
590
- & + .section-content:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none):not(.section-collapse),
591
- & + .section-filters:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
592
- & + .section-bulk-actions:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
593
- & + .section-title:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
594
- & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
595
- & + .section-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
596
- margin-top: -$border-radius;
597
- padding-top: 0;
598
- }
599
-
600
- & + .section-collapse.show:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
601
- padding-top: 0;
602
- }
603
-
604
- & + .section-hr {
605
- margin-top: -$section-padding / 2;
606
- margin-bottom: -$section-padding / 2;
607
- }
608
-
609
- .title {
610
- align-self: center;
611
- text-align: left;
612
- @include media-breakpoint-down(sm) {
613
- display: block;
614
- }
615
-
616
- p {
617
- font-weight: $font-weight-normal;
618
- font-size: $font-size-base;
619
- }
620
- }
621
-
622
- .actions {
623
- color: $section-header-actions-color;
624
- font-weight: $font-weight-normal;
625
- font-size: $font-size-base;
626
- margin-left: auto;
627
- text-align: right;
628
- @include media-breakpoint-down(sm) {
629
- display: block;
630
- text-align: left;
631
- margin-top: 15px;
632
- }
633
- }
634
-
635
- > .title > .icon,
636
- > .icon {
637
- color: $section-header-icons-color;
638
- font-size: $section-header-icons-size;
639
- margin-right: 5px;
640
- }
641
-
642
- .btn-group,
643
- .form-group {
644
- margin: 0;
645
- }
646
-
647
- & + .section-content {
648
- border-top-left-radius: 0;
649
- border-top-right-radius: 0;
650
- }
651
-
652
- &.inline-actions {
653
- display: flex;
654
-
655
- .title {
656
- display: flex;
657
- flex-direction: column;
658
- }
659
-
660
- .actions {
661
- display: flex;
662
- margin-top: 0;
663
- text-align: right;
664
- }
665
- }
666
- }
667
-
668
- // Content
669
- .section-content {
670
- flex-direction: column;
671
- flex-grow: 1;
672
- background: $section-bg;
673
- color: $section-color;
674
- border-radius: $section-border-radius;
675
- padding: $section-padding;
676
- overflow-x: auto;
677
- box-sizing: border-box;
678
-
679
- & + .section-tabs:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
680
- & + .section-content:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none):not(.section-collapse),
681
- & + .section-filters:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
682
- & + .section-bulk-actions:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
683
- & + .section-title:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
684
- & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
685
- & + .section-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
686
- margin-top: -$border-radius;
687
- }
688
-
689
- & + .section-hr {
690
- margin-top: -$section-padding / 2;
691
- margin-bottom: -$section-padding / 2;
692
- }
693
-
694
- &.section-collapse {
695
- position: relative;
696
- transition: padding .35s ease, margin .35s ease;
697
- overflow: hidden;
698
-
699
- &.show {
700
- overflow: visible;
701
- }
702
-
703
- .collapse {
704
- left: $section-padding;
705
- right: $section-padding;
706
-
707
- &.show {
708
- left: auto;
709
- right: auto;
710
- }
711
- }
712
-
713
- .collapsing {
714
- left: auto;
715
- right: auto;
716
- }
717
-
718
- .collapse,
719
- .collapsing {
720
-
721
- > .section-hr {
722
- width: 100%;
723
- padding-top: 0;
724
- padding-bottom: $section-padding;
725
-
726
- &:after {
727
- margin-left: 0;
728
- margin-right: 0;
729
- }
730
-
731
- &.content-full-width {
732
- position: relative;
733
- margin-left: 0;
734
- margin-right: 0;
735
-
736
- &:after {
737
- position: absolute;
738
- left: -$section-padding;
739
- right: -$section-padding;
740
- }
741
- }
742
- }
743
- }
744
-
745
- &:not(.show) {
746
- margin-top: 0;
747
- padding-top: 0;
748
- padding-bottom: 0;
749
- }
750
- }
751
-
752
- &.section-content-parent {
753
- padding: 0;
754
- }
755
-
756
- &.no-background {
757
- padding: 0;
758
- background: transparent;
759
- }
760
-
761
- &.attribute-trees {
762
- padding: 0;
763
- background: transparent;
764
- padding: 0;
765
- border-radius: 0;
766
-
767
- .attribute-tree {
768
- padding: 15px;
769
- border-radius: $border-radius;
770
- background: white;
771
- padding: 15px;
772
- }
773
- }
774
-
775
- & + .section-sub-heading {
776
- border-top-left-radius: 0;
777
- border-top-right-radius: 0;
778
- }
779
-
780
- .content-full-width {
781
- @include media-breakpoint-up(lg) {
782
- margin-left: -$section-padding;
783
- margin-right: -$section-padding;
784
- }
785
- }
786
-
787
- .section-content-box {
788
- padding: $section-padding;
789
- border: 1px solid rgba(0,0,0,0.1);
790
- border-radius: 3px;
791
- }
792
-
793
- .flex-center {
794
- display: flex;
795
- align-items: center;
796
- flex-wrap: wrap;
797
- }
798
-
799
- .definition-spacer {
800
- height: 20px;
801
- }
802
-
803
- .definition {
804
- padding: 2px 0;
805
- display: flex;
806
- flex-wrap: wrap;
807
- @media (min-width: 500px) {
808
- flex-wrap: nowrap;
809
- }
810
-
811
- &.definition-payment-summary {
812
- background: color('grey-lighter');
813
- padding: 10px;
814
- border-radius: $border-radius;
815
- margin: 10px 0;
816
- font-weight: 500;
817
- }
818
-
819
- &.definition-payment-detail {
820
- margin: 5px 0;
821
- font-size: 13px;
822
- padding: 5px 10px;
823
- }
824
-
825
- &.definition-payment-total {
826
- border-top: 1px solid $border-color;
827
- padding: 10px;
828
- margin: 10px 0;
829
- font-weight: 500;
830
- text-transform: uppercase;
831
- }
832
-
833
- .definition-heading {
834
- flex: 0 0 100%;
835
- color: color('grey-darker');
836
- font-size: 12px;
837
- @media (min-width: 500px) {
838
- color: $body-color;
839
- font-size: 14px;
840
- flex: 0 1 180px;
841
- }
842
- }
843
-
844
- .definition-content {
845
- flex: 1;
846
- order: 1;
847
- align-self: center;
848
- }
849
-
850
- .definition-edit {
851
- order: 2;
852
- flex: 0 1 50px;
853
- }
854
-
855
- .definition-total {
856
- order: 2;
857
- text-align: right;
858
- flex: 0 1 auto;
859
- }
860
-
861
- &.status {
862
- padding: 10px;
863
-
864
- .definition-content {
865
- font-size: 30px;
866
- }
867
-
868
- .definition-edit {
869
- font-size: 18px;
870
- }
871
- }
872
- }
873
-
874
- p:last-child {
875
- margin-bottom: 0;
876
- }
877
- }
878
-
879
- // Greeting
880
- &.section-greeting {
881
- border-radius: 0;
882
- box-shadow: none;
883
- text-align: center;
884
- margin-top: 30px;
885
- margin-bottom: 50px;
886
- @include media-breakpoint-down(sm) {
887
- margin-top: 20px;
888
- margin-bottom: 30px;
889
- }
890
-
891
- .greeting-title {
892
- margin-top: 0;
893
- color: color('grey-darkest');
894
- font-weight: 300;
895
- margin-bottom: 0;
896
-
897
- & + .greeting-description {
898
- margin-top: $headings-margin-bottom;
899
- }
900
-
901
- strong {
902
- font-weight: 400;
903
- }
904
- }
905
-
906
- .greeting-description {
907
- margin-bottom: 0;
908
- color: color('grey-darkest');
909
- font-weight: 300;
910
- }
911
- }
912
- }