@clayui/css 3.109.0 → 3.110.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 (19) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/lib/css/atlas.css +148 -30
  3. package/lib/css/atlas.css.map +1 -1
  4. package/lib/css/base.css +144 -26
  5. package/lib/css/base.css.map +1 -1
  6. package/lib/css/cadmin.css +125 -6
  7. package/lib/css/cadmin.css.map +1 -1
  8. package/lib/images/icons/icons.svg +1 -1
  9. package/package.json +2 -2
  10. package/src/scss/_license-text.scss +1 -1
  11. package/src/scss/atlas/variables/_menubar.scss +4 -4
  12. package/src/scss/atlas/variables/_panels.scss +20 -0
  13. package/src/scss/cadmin/components/_dropdowns.scss +16 -0
  14. package/src/scss/cadmin/variables/_dropdowns.scss +106 -0
  15. package/src/scss/cadmin/variables/_menubar.scss +4 -4
  16. package/src/scss/components/_panels.scss +77 -33
  17. package/src/scss/mixins/_panels.scss +24 -0
  18. package/src/scss/variables/_dropdowns.scss +5 -5
  19. package/src/scss/variables/_panels.scss +195 -0
package/src/scss/mixins/_panels.scss CHANGED
@@ -327,6 +327,14 @@
327
327
  @include clay-link($header-link);
328
328
  }
329
329
 
330
+ &.collapse-icon {
331
+ $_panel-header: setter(map-get($map, panel-header), ());
332
+
333
+ @include clay-css(
334
+ map-get($_panel-header, '&.collapse-icon')
335
+ );
336
+ }
337
+
330
338
  &:not(.collapse-icon-middle) {
331
339
  .collapse-icon-closed,
332
340
  .collapse-icon-open {
@@ -334,6 +342,22 @@
334
342
  }
335
343
  }
336
344
 
345
+ &.collapse-icon-middle {
346
+ $_collapse-icon-middle: setter(
347
+ map-get($map, collapse-icon-middle),
348
+ ()
349
+ );
350
+
351
+ @include clay-css($_collapse-icon-middle);
352
+
353
+ .collapse-icon-closed,
354
+ .collapse-icon-open {
355
+ @include clay-css(
356
+ map-get($_collapse-icon-middle, collapse-icon)
357
+ );
358
+ }
359
+ }
360
+
337
361
  .panel-group & {
338
362
  + .panel-collapse > .panel-body {
339
363
  border-color: map-get($base, border-color);
package/src/scss/variables/_dropdowns.scss CHANGED
@@ -946,27 +946,27 @@ $dropdown-menu-palette: map-deep-merge(
946
946
  dropdown-header: (
947
947
  padding-bottom: 0.375rem,
948
948
  padding-left: 1.75rem,
949
- padding-right: 1.75rem,
949
+ padding-right: 0.5rem,
950
950
  padding-top: 0.3125rem,
951
951
  ),
952
952
  dropdown-subheader: (
953
953
  padding-bottom: 0.4375rem,
954
954
  padding-left: 1.75rem,
955
- padding-right: 1.75rem,
955
+ padding-right: 0.5rem,
956
956
  padding-top: 0.4375rem,
957
957
  ),
958
958
  dropdown-section: (
959
959
  padding-left: 1.75rem,
960
- padding-right: 1.75rem,
960
+ padding-right: 0.5rem,
961
961
  ),
962
962
  dropdown-item: (
963
963
  padding-bottom: 0.375rem,
964
964
  padding-left: 1.75rem,
965
- padding-right: 1.75rem,
965
+ padding-right: 0.5rem,
966
966
  padding-top: 0.3125rem,
967
967
  '&.autofit-row': (
968
968
  padding-left: 1.5rem,
969
- padding-right: 1.5rem,
969
+ padding-right: 0.5rem,
970
970
  ),
971
971
  ),
972
972
  dropdown-item-scroll: (
package/src/scss/variables/_panels.scss CHANGED
@@ -94,6 +94,71 @@ $panel-title-text-transform: null !default;
94
94
  $panel-title-small-font-size: null !default;
95
95
  $panel-title-small-margin-left: null !default;
96
96
 
97
+ $panel: () !default;
98
+ $panel: map-deep-merge(
99
+ (
100
+ background-color: $panel-bg,
101
+ border-color: $panel-border-color,
102
+ border-radius: clay-enable-rounded($panel-border-radius),
103
+ border-style: $panel-border-style,
104
+ border-width: $panel-border-width,
105
+ box-shadow: clay-enable-shadows($panel-box-shadow),
106
+ margin-bottom: $panel-margin-bottom,
107
+ word-wrap: break-word,
108
+ collapse-icon-middle: (
109
+ collapse-icon: (
110
+ font-size: inherit,
111
+ ),
112
+ ),
113
+ panel-header: (
114
+ border-bottom: $panel-header-border-bottom-width solid transparent,
115
+ border-top-left-radius:
116
+ clay-enable-rounded($panel-header-offset-border-radius),
117
+ border-top-right-radius:
118
+ clay-enable-rounded($panel-header-offset-border-radius),
119
+ display: block,
120
+ font-size: $panel-header-font-size,
121
+ line-height: $panel-header-line-height,
122
+ padding: $panel-header-padding-y $panel-header-padding-x,
123
+ position: relative,
124
+ width: 100%,
125
+ collapsed: (
126
+ border-bottom-left-radius:
127
+ clay-enable-rounded($panel-header-offset-border-radius),
128
+ border-bottom-right-radius:
129
+ clay-enable-rounded($panel-header-offset-border-radius),
130
+ link: $panel-header-collapsed-link,
131
+ ),
132
+ collapse-icon: (
133
+ padding-left: $panel-header-collapse-icon-padding-left,
134
+ padding-right: $panel-header-collapse-icon-padding-right,
135
+ ),
136
+ link: $panel-header-link,
137
+ ),
138
+ panel-body: (
139
+ padding: $panel-body-padding-y $panel-body-padding-x,
140
+ ),
141
+ panel-footer: (
142
+ border-bottom-left-radius:
143
+ clay-enable-rounded($panel-footer-offset-border-radius),
144
+ border-bottom-right-radius:
145
+ clay-enable-rounded($panel-footer-offset-border-radius),
146
+ border-top: $panel-footer-border-top-width solid transparent,
147
+ padding: $panel-footer-padding-y $panel-footer-padding-x,
148
+ ),
149
+ panel-title: (
150
+ font-size: $panel-title-font-size,
151
+ font-weight: $panel-title-font-weight,
152
+ text-transform: $panel-title-text-transform,
153
+ small: (
154
+ font-size: $panel-title-small-font-size,
155
+ margin-left: $panel-title-small-margin-left,
156
+ ),
157
+ ),
158
+ ),
159
+ $panel
160
+ );
161
+
97
162
  // Panel Group
98
163
 
99
164
  $panel-group-panel-margin-bottom: math-sign(
@@ -212,3 +277,133 @@ $panel-unstyled: map-deep-merge(
212
277
  ),
213
278
  $panel-unstyled
214
279
  );
280
+
281
+ $panel-palette: () !default;
282
+ $panel-palette: map-deep-merge(
283
+ (
284
+ panel-block: (
285
+ border-color: $gray-400,
286
+ collapse-icon: (
287
+ font-size: inherit,
288
+ top: 1.3125rem,
289
+ ),
290
+ panel-header: (
291
+ font-size: 1.25rem,
292
+ line-height: 1.25,
293
+ padding: 1.15625rem 1.25rem,
294
+ '&.collapse-icon': (
295
+ padding-right: 3rem,
296
+ ),
297
+ ),
298
+ panel-title: (
299
+ font-size: inherit,
300
+ text-transform: none,
301
+ ),
302
+ panel-body: (
303
+ padding: 0 1.25rem 1.25rem,
304
+ ),
305
+ panel-footer: (
306
+ padding: 0 1.25rem 1.25rem,
307
+ ),
308
+ ),
309
+ panel-default: (
310
+ border-width: 0px,
311
+ panel-header: (
312
+ border-radius: clay-enable-rounded(0),
313
+ color: $gray-600,
314
+ font-size: 0.875rem,
315
+ line-height: 1.125rem,
316
+ padding-bottom: 0.40625rem,
317
+ padding-left: 0,
318
+ padding-right: 0,
319
+ padding-top: 0.40625rem,
320
+ text-transform: uppercase,
321
+ '&.collapse-icon': (
322
+ padding-right: 1.75rem,
323
+ ),
324
+ link: (
325
+ border-bottom: 1px solid $gray-400,
326
+ ),
327
+ ),
328
+ collapse-icon: (
329
+ font-size: inherit,
330
+ right: 0,
331
+ top: 0.5rem,
332
+ ),
333
+ collapse-icon-middle: (
334
+ collapse-icon: (
335
+ right: 0,
336
+ ),
337
+ ),
338
+ panel-body: (
339
+ padding: 1.25rem 0,
340
+ ),
341
+ panel-title: (
342
+ font-size: inherit,
343
+ ),
344
+ panel-footer: (
345
+ padding: 1.25rem 0,
346
+ ),
347
+ ),
348
+ ),
349
+ $panel-palette
350
+ );
351
+
352
+ // Panel Sizes
353
+
354
+ $panel-sizes: () !default;
355
+ $panel-sizes: map-deep-merge(
356
+ (
357
+ '.panel-lg.panel-block': (
358
+ collapse-icon: (
359
+ top: 1.75rem,
360
+ ),
361
+ panel-header: (
362
+ font-size: 1.5rem,
363
+ padding: 1.5rem 1.5rem,
364
+ '&.collapse-icon': (
365
+ padding-right: calc(1.5rem * 3),
366
+ ),
367
+ ),
368
+ panel-body: (
369
+ padding: 0 1.5rem 1.5rem,
370
+ ),
371
+ panel-footer: (
372
+ padding: 0 1.5rem 1.5rem,
373
+ ),
374
+ ),
375
+ '.panel-sm.panel-block': (
376
+ collapse-icon: (
377
+ top: 0.9375rem,
378
+ ),
379
+ panel-header: (
380
+ font-size: 1rem,
381
+ padding: 0.8125rem 1rem,
382
+ '&.collapse-icon': (
383
+ padding-right: calc(1rem * 3),
384
+ ),
385
+ ),
386
+ panel-body: (
387
+ padding: 0 1rem 1rem,
388
+ ),
389
+ panel-footer: (
390
+ padding: 0 1rem 1rem,
391
+ ),
392
+ ),
393
+ '.panel-sm.panel-default': (
394
+ collapse-icon: (
395
+ top: 0.375rem,
396
+ ),
397
+ panel-header: (
398
+ font-size: 0.75rem,
399
+ line-height: 1,
400
+ padding-bottom: 0.34375rem,
401
+ padding-top: 0.34375rem,
402
+ '&.collapse-icon': (
403
+ padding-right: 1.75rem,
404
+ ),
405
+ ),
406
+ ),
407
+ ),
408
+ $panel-sizes
409
+ );