@clayui/css 3.75.0 → 3.76.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 (66) hide show
  1. package/lib/css/atlas.css +1215 -626
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +1263 -650
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +670 -358
  6. package/lib/css/cadmin.css.map +1 -1
  7. package/lib/images/icons/icons.svg +1 -1
  8. package/package.json +2 -2
  9. package/src/scss/_license-text.scss +1 -1
  10. package/src/scss/atlas/variables/_application-bar.scss +1 -1
  11. package/src/scss/atlas/variables/_buttons.scss +2 -3
  12. package/src/scss/atlas/variables/_dropdowns.scss +6 -2
  13. package/src/scss/atlas/variables/_globals.scss +6 -0
  14. package/src/scss/atlas/variables/_labels.scss +1 -1
  15. package/src/scss/atlas/variables/_links.scss +3 -13
  16. package/src/scss/atlas/variables/_management-bar.scss +1 -1
  17. package/src/scss/atlas/variables/_navigation-bar.scss +5 -5
  18. package/src/scss/atlas/variables/_quick-action.scss +1 -1
  19. package/src/scss/atlas/variables/_tables.scss +2 -2
  20. package/src/scss/cadmin/components/_custom-forms.scss +1 -1
  21. package/src/scss/cadmin/variables/_badges.scss +1 -1
  22. package/src/scss/cadmin/variables/_buttons.scss +2 -4
  23. package/src/scss/cadmin/variables/_cards.scss +1 -1
  24. package/src/scss/cadmin/variables/_date-picker.scss +4 -4
  25. package/src/scss/cadmin/variables/_globals.scss +6 -0
  26. package/src/scss/cadmin/variables/_labels.scss +2 -2
  27. package/src/scss/cadmin/variables/_links.scss +13 -22
  28. package/src/scss/cadmin/variables/_management-bar.scss +1 -1
  29. package/src/scss/cadmin/variables/_multi-step-nav.scss +1 -1
  30. package/src/scss/cadmin/variables/_navigation-bar.scss +5 -5
  31. package/src/scss/cadmin/variables/_quick-action.scss +1 -1
  32. package/src/scss/cadmin/variables/_tables.scss +2 -2
  33. package/src/scss/cadmin/variables/_utilities.scss +4 -4
  34. package/src/scss/components/_custom-forms.scss +1 -1
  35. package/src/scss/components/_links.scss +1 -1
  36. package/src/scss/functions/_global-functions.scss +2 -8
  37. package/src/scss/mixins/_forms.scss +361 -322
  38. package/src/scss/mixins/_grid.scss +74 -67
  39. package/src/scss/mixins/_highlight.scss +91 -69
  40. package/src/scss/mixins/_list-group.scss +216 -192
  41. package/src/scss/mixins/_loaders.scss +142 -134
  42. package/src/scss/mixins/_menubar.scss +300 -296
  43. package/src/scss/mixins/_modals.scss +101 -92
  44. package/src/scss/mixins/_navbar.scss +811 -738
  45. package/src/scss/mixins/_slideout.scss +34 -30
  46. package/src/scss/mixins/_stickers.scss +30 -28
  47. package/src/scss/mixins/_tables.scss +44 -40
  48. package/src/scss/mixins/_tbar.scss +467 -425
  49. package/src/scss/mixins/_utilities.scss +41 -39
  50. package/src/scss/variables/_alerts.scss +30 -7
  51. package/src/scss/variables/_badges.scss +1 -1
  52. package/src/scss/variables/_buttons.scss +2 -3
  53. package/src/scss/variables/_cards.scss +1 -1
  54. package/src/scss/variables/_clay-color.scss +2 -2
  55. package/src/scss/variables/_date-picker.scss +4 -4
  56. package/src/scss/variables/_dropdowns.scss +6 -2
  57. package/src/scss/variables/_forms.scss +232 -44
  58. package/src/scss/variables/_globals.scss +6 -0
  59. package/src/scss/variables/_labels.scss +1 -1
  60. package/src/scss/variables/_links.scss +52 -20
  61. package/src/scss/variables/_multi-step-nav.scss +1 -1
  62. package/src/scss/variables/_navbar.scss +1 -1
  63. package/src/scss/variables/_navs.scss +25 -4
  64. package/src/scss/variables/_tables.scss +6 -1
  65. package/src/scss/variables/_tbar.scss +2 -2
  66. package/src/scss/variables/_time.scss +6 -1
package/src/scss/mixins/_grid.scss CHANGED
@@ -122,63 +122,68 @@
122
122
  }
123
123
 
124
124
  @mixin clay-custom-grid-columns($map) {
125
- $custom-grid-props: map-merge(
126
- (
127
- enabled:
128
- if(
129
- variable-exists(enable-grid-classes),
130
- $enable-grid-classes,
125
+ @if (type-of($map) == 'map') {
126
+ $custom-grid-props: map-merge(
127
+ (
128
+ enabled:
131
129
  if(
132
- variable-exists(cadmin-enable-grid-classes),
133
- $cadmin-enable-grid-classes,
134
- true
135
- )
136
- ),
137
- ),
138
- $map
139
- );
140
-
141
- $enabled: map-get($custom-grid-props, enabled);
142
-
143
- @if ($custom-grid-props and $enabled) {
144
- display: block;
145
- flex-basis: map-get(map-get($custom-grid-props, base), flex-basis);
146
- flex-grow: 1;
147
- max-width: map-get(map-get($custom-grid-props, base), max-width);
148
- min-width: map-get(map-get($custom-grid-props, base), min-width);
149
- padding-left: map-get(map-get($custom-grid-props, base), padding-left);
150
- padding-right: map-get(
151
- map-get($custom-grid-props, base),
152
- padding-right
130
+ variable-exists(enable-grid-classes),
131
+ $enable-grid-classes,
132
+ if(
133
+ variable-exists(cadmin-enable-grid-classes),
134
+ $cadmin-enable-grid-classes,
135
+ true
136
+ )
137
+ ),
138
+ ),
139
+ $map
153
140
  );
154
- position: relative;
155
- width: 100%;
156
141
 
157
- @each $breakpoint in map-keys($custom-grid-props) {
158
- $next: breakpoint-next($breakpoint, $custom-grid-props);
159
-
160
- @if ($next) {
161
- @media (min-width: map-get(map-get($custom-grid-props, $next), breakpoint)) {
162
- flex-basis: map-get(
163
- map-get($custom-grid-props, $next),
164
- flex-basis
165
- );
166
- max-width: map-get(
167
- map-get($custom-grid-props, $next),
168
- max-width
169
- );
170
- min-width: map-get(
171
- map-get($custom-grid-props, $next),
172
- min-width
173
- );
174
- padding-left: map-get(
175
- map-get($custom-grid-props, $next),
176
- padding-left
177
- );
178
- padding-right: map-get(
179
- map-get($custom-grid-props, $next),
180
- padding-right
181
- );
142
+ $enabled: map-get($custom-grid-props, enabled);
143
+
144
+ @if ($custom-grid-props and $enabled) {
145
+ display: block;
146
+ flex-basis: map-get(map-get($custom-grid-props, base), flex-basis);
147
+ flex-grow: 1;
148
+ max-width: map-get(map-get($custom-grid-props, base), max-width);
149
+ min-width: map-get(map-get($custom-grid-props, base), min-width);
150
+ padding-left: map-get(
151
+ map-get($custom-grid-props, base),
152
+ padding-left
153
+ );
154
+ padding-right: map-get(
155
+ map-get($custom-grid-props, base),
156
+ padding-right
157
+ );
158
+ position: relative;
159
+ width: 100%;
160
+
161
+ @each $breakpoint in map-keys($custom-grid-props) {
162
+ $next: breakpoint-next($breakpoint, $custom-grid-props);
163
+
164
+ @if ($next) {
165
+ @media (min-width: map-get(map-get($custom-grid-props, $next), breakpoint)) {
166
+ flex-basis: map-get(
167
+ map-get($custom-grid-props, $next),
168
+ flex-basis
169
+ );
170
+ max-width: map-get(
171
+ map-get($custom-grid-props, $next),
172
+ max-width
173
+ );
174
+ min-width: map-get(
175
+ map-get($custom-grid-props, $next),
176
+ min-width
177
+ );
178
+ padding-left: map-get(
179
+ map-get($custom-grid-props, $next),
180
+ padding-left
181
+ );
182
+ padding-right: map-get(
183
+ map-get($custom-grid-props, $next),
184
+ padding-right
185
+ );
186
+ }
182
187
  }
183
188
  }
184
189
  }
@@ -189,26 +194,28 @@
189
194
  /// @param {Map} $map - A map of `key: value` pairs that is passed to the `clay-css` mixin
190
195
 
191
196
  @mixin clay-generate-media-breakpoints($map) {
192
- @if (map-get($map, media-breakpoint-up)) {
193
- $media-breakpoint-up: map-get($map, media-breakpoint-up);
197
+ @if (type-of($map) == 'map') {
198
+ @if (map-get($map, media-breakpoint-up)) {
199
+ $media-breakpoint-up: map-get($map, media-breakpoint-up);
194
200
 
195
- @each $breakpoint in map-keys($media-breakpoint-up) {
196
- $breakpoint-up: map-get($media-breakpoint-up, $breakpoint);
201
+ @each $breakpoint in map-keys($media-breakpoint-up) {
202
+ $breakpoint-up: map-get($media-breakpoint-up, $breakpoint);
197
203
 
198
- @include media-breakpoint-up($breakpoint) {
199
- @include clay-css($breakpoint-up);
204
+ @include media-breakpoint-up($breakpoint) {
205
+ @include clay-css($breakpoint-up);
206
+ }
200
207
  }
201
208
  }
202
- }
203
209
 
204
- @if (map-get($map, media-breakpoint-down)) {
205
- $media-breakpoint-down: map-get($map, media-breakpoint-down);
210
+ @if (map-get($map, media-breakpoint-down)) {
211
+ $media-breakpoint-down: map-get($map, media-breakpoint-down);
206
212
 
207
- @each $breakpoint in map-keys($media-breakpoint-down) {
208
- $breakpoint-down: map-get($media-breakpoint-down, $breakpoint);
213
+ @each $breakpoint in map-keys($media-breakpoint-down) {
214
+ $breakpoint-down: map-get($media-breakpoint-down, $breakpoint);
209
215
 
210
- @include media-breakpoint-down($breakpoint) {
211
- @include clay-css($breakpoint-down);
216
+ @include media-breakpoint-down($breakpoint) {
217
+ @include clay-css($breakpoint-down);
218
+ }
212
219
  }
213
220
  }
214
221
  }
package/src/scss/mixins/_highlight.scss CHANGED
@@ -23,85 +23,107 @@
23
23
  /// - Add @link to documentation
24
24
 
25
25
  @mixin clay-after-highlight-variant($map) {
26
- $enabled: setter(map-get($map, enabled), true);
26
+ @if (type-of($map) == 'map') {
27
+ $enabled: setter(map-get($map, enabled), true);
27
28
 
28
- $base: map-merge(
29
- $map,
30
- (
31
- background-color:
32
- setter(map-get($map, bg), map-get($map, background-color)),
33
- )
34
- );
29
+ $base: map-merge(
30
+ $map,
31
+ (
32
+ background-color:
33
+ setter(map-get($map, bg), map-get($map, background-color)),
34
+ )
35
+ );
35
36
 
36
- $hover: setter(map-get($map, hover), ());
37
- $hover: map-merge(
38
- $hover,
39
- (
40
- background-color:
41
- setter(
42
- map-get($map, hover-bg),
43
- map-get($hover, background-color)
44
- ),
45
- height: setter(map-get($map, hover-height), map-get($hover, height)),
46
- opacity:
47
- setter(map-get($map, hover-opacity), map-get($hover, opacity)),
48
- )
49
- );
37
+ $hover: setter(map-get($map, hover), ());
38
+ $hover: map-merge(
39
+ $hover,
40
+ (
41
+ background-color:
42
+ setter(
43
+ map-get($map, hover-bg),
44
+ map-get($hover, background-color)
45
+ ),
46
+ height:
47
+ setter(
48
+ map-get($map, hover-height),
49
+ map-get($hover, height)
50
+ ),
51
+ opacity:
52
+ setter(
53
+ map-get($map, hover-opacity),
54
+ map-get($hover, opacity)
55
+ ),
56
+ )
57
+ );
50
58
 
51
- $focus: setter(map-get($map, focus), ());
52
- $focus: map-merge(
53
- $focus,
54
- (
55
- bg:
56
- setter(
57
- map-get($map, focus-bg),
58
- map-get($focus, background-color)
59
- ),
60
- height: setter(map-get($map, focus-height), map-get($focus, height)),
61
- opacity:
62
- setter(map-get($map, focus-opacity), map-get($focus, opacity)),
63
- )
64
- );
59
+ $focus: setter(map-get($map, focus), ());
60
+ $focus: map-merge(
61
+ $focus,
62
+ (
63
+ bg:
64
+ setter(
65
+ map-get($map, focus-bg),
66
+ map-get($focus, background-color)
67
+ ),
68
+ height:
69
+ setter(
70
+ map-get($map, focus-height),
71
+ map-get($focus, height)
72
+ ),
73
+ opacity:
74
+ setter(
75
+ map-get($map, focus-opacity),
76
+ map-get($focus, opacity)
77
+ ),
78
+ )
79
+ );
65
80
 
66
- $active: setter(map-get($map, active), ());
67
- $active: map-merge(
68
- $active,
69
- (
70
- background-color:
71
- setter(
72
- map-get($map, active-bg),
73
- map-get($active, background-color)
74
- ),
75
- height:
76
- setter(map-get($map, active-height), map-get($active, height)),
77
- opacity:
78
- setter(map-get($map, active-opacity), map-get($active, opacity)),
79
- )
80
- );
81
+ $active: setter(map-get($map, active), ());
82
+ $active: map-merge(
83
+ $active,
84
+ (
85
+ background-color:
86
+ setter(
87
+ map-get($map, active-bg),
88
+ map-get($active, background-color)
89
+ ),
90
+ height:
91
+ setter(
92
+ map-get($map, active-height),
93
+ map-get($active, height)
94
+ ),
95
+ opacity:
96
+ setter(
97
+ map-get($map, active-opacity),
98
+ map-get($active, opacity)
99
+ ),
100
+ )
101
+ );
81
102
 
82
- @if ($enabled) {
83
- &::after {
84
- @include clay-css($base);
85
- }
86
-
87
- &:hover,
88
- &.hover {
103
+ @if ($enabled) {
89
104
  &::after {
90
- @include clay-css($hover);
105
+ @include clay-css($base);
91
106
  }
92
- }
93
107
 
94
- &:focus,
95
- &.focus {
96
- &::after {
97
- @include clay-css($focus);
108
+ &:hover,
109
+ &.hover {
110
+ &::after {
111
+ @include clay-css($hover);
112
+ }
98
113
  }
99
- }
100
114
 
101
- &:active,
102
- &.active {
103
- &::after {
104
- @include clay-css($active);
115
+ &:focus,
116
+ &.focus {
117
+ &::after {
118
+ @include clay-css($focus);
119
+ }
120
+ }
121
+
122
+ &:active,
123
+ &.active {
124
+ &::after {
125
+ @include clay-css($active);
126
+ }
105
127
  }
106
128
  }
107
129
  }