@clayui/css 3.75.0 → 3.78.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 +1115 -889
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +1147 -878
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +247 -1235
  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 +530 -1
  29. package/src/scss/cadmin/variables/_multi-step-nav.scss +1 -1
  30. package/src/scss/cadmin/variables/_navigation-bar.scss +251 -7
  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 +846 -764
  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/_list-group.scss CHANGED
@@ -63,254 +63,278 @@
63
63
  /// - Add @link to documentation
64
64
 
65
65
  @mixin clay-list-group-notification-item-variant($map) {
66
- $bg: setter(
67
- map-get($map, bg),
68
- if(
69
- variable-exists(list-group-bg),
70
- $list-group-bg,
66
+ @if (type-of($map) == 'map') {
67
+ $bg: setter(
68
+ map-get($map, bg),
71
69
  if(
72
- variable-exists(cadmin-list-group-bg),
73
- $cadmin-list-group-bg,
74
- null
70
+ variable-exists(list-group-bg),
71
+ $list-group-bg,
72
+ if(
73
+ variable-exists(cadmin-list-group-bg),
74
+ $cadmin-list-group-bg,
75
+ null
76
+ )
75
77
  )
76
- )
77
- );
78
- $border-bottom-color: setter(
79
- map-get($map, border-bottom-color),
80
- if(
81
- variable-exists(list-group-notification-item-border-bottom-color),
82
- $list-group-notification-item-border-bottom-color,
78
+ );
79
+ $border-bottom-color: setter(
80
+ map-get($map, border-bottom-color),
83
81
  if(
84
82
  variable-exists(
85
- cadmin-list-group-notification-item-border-bottom-color
83
+ list-group-notification-item-border-bottom-color
86
84
  ),
87
- $cadmin-list-group-notification-item-border-bottom-color,
88
- null
85
+ $list-group-notification-item-border-bottom-color,
86
+ if(
87
+ variable-exists(
88
+ cadmin-list-group-notification-item-border-bottom-color
89
+ ),
90
+ $cadmin-list-group-notification-item-border-bottom-color,
91
+ null
92
+ )
89
93
  )
90
- )
91
- );
92
- $border-left-color: setter(
93
- map-get($map, border-left-color),
94
- if(
95
- variable-exists(list-group-notification-item-border-left-color),
96
- $list-group-notification-item-border-left-color,
94
+ );
95
+ $border-left-color: setter(
96
+ map-get($map, border-left-color),
97
97
  if(
98
- variable-exists(
99
- cadmin-list-group-notification-item-border-left-color
100
- ),
101
- $cadmin-list-group-notification-item-border-left-color,
102
- null
98
+ variable-exists(list-group-notification-item-border-left-color),
99
+ $list-group-notification-item-border-left-color,
100
+ if(
101
+ variable-exists(
102
+ cadmin-list-group-notification-item-border-left-color
103
+ ),
104
+ $cadmin-list-group-notification-item-border-left-color,
105
+ null
106
+ )
103
107
  )
104
- )
105
- );
106
- $border-right-color: setter(
107
- map-get($map, border-right-color),
108
- if(
109
- variable-exists(list-group-notification-item-border-right-color),
110
- $list-group-notification-item-border-right-color,
108
+ );
109
+ $border-right-color: setter(
110
+ map-get($map, border-right-color),
111
111
  if(
112
112
  variable-exists(
113
- cadmin-list-group-notification-item-border-right-color
113
+ list-group-notification-item-border-right-color
114
114
  ),
115
- $cadmin-list-group-notification-item-border-right-color,
116
- null
115
+ $list-group-notification-item-border-right-color,
116
+ if(
117
+ variable-exists(
118
+ cadmin-list-group-notification-item-border-right-color
119
+ ),
120
+ $cadmin-list-group-notification-item-border-right-color,
121
+ null
122
+ )
117
123
  )
118
- )
119
- );
120
- $border-top-color: setter(
121
- map-get($map, border-top-color),
122
- if(
123
- variable-exists(list-group-notification-item-border-top-color),
124
- $list-group-notification-item-border-top-color,
124
+ );
125
+ $border-top-color: setter(
126
+ map-get($map, border-top-color),
125
127
  if(
126
- variable-exists(
127
- cadmin-list-group-notification-item-border-top-color
128
- ),
129
- $cadmin-list-group-notification-item-border-top-color,
130
- null
128
+ variable-exists(list-group-notification-item-border-top-color),
129
+ $list-group-notification-item-border-top-color,
130
+ if(
131
+ variable-exists(
132
+ cadmin-list-group-notification-item-border-top-color
133
+ ),
134
+ $cadmin-list-group-notification-item-border-top-color,
135
+ null
136
+ )
131
137
  )
132
- )
133
- );
138
+ );
134
139
 
135
- $border-bottom-width: setter(
136
- map-get($map, border-bottom-width),
137
- if(
138
- variable-exists(list-group-notification-item-border-bottom-width),
139
- $list-group-notification-item-border-bottom-width,
140
+ $border-bottom-width: setter(
141
+ map-get($map, border-bottom-width),
140
142
  if(
141
143
  variable-exists(
142
- cadmin-list-group-notification-item-border-bottom-width
144
+ list-group-notification-item-border-bottom-width
143
145
  ),
144
- $cadmin-list-group-notification-item-border-bottom-width,
145
- null
146
+ $list-group-notification-item-border-bottom-width,
147
+ if(
148
+ variable-exists(
149
+ cadmin-list-group-notification-item-border-bottom-width
150
+ ),
151
+ $cadmin-list-group-notification-item-border-bottom-width,
152
+ null
153
+ )
146
154
  )
147
- )
148
- );
149
- $border-left-width: setter(
150
- map-get($map, border-left-width),
151
- if(
152
- variable-exists(list-group-notification-item-border-left-width),
153
- $list-group-notification-item-border-left-width,
155
+ );
156
+ $border-left-width: setter(
157
+ map-get($map, border-left-width),
154
158
  if(
155
- variable-exists(
156
- cadmin-list-group-notification-item-border-left-width
157
- ),
158
- $cadmin-list-group-notification-item-border-left-width,
159
- null
159
+ variable-exists(list-group-notification-item-border-left-width),
160
+ $list-group-notification-item-border-left-width,
161
+ if(
162
+ variable-exists(
163
+ cadmin-list-group-notification-item-border-left-width
164
+ ),
165
+ $cadmin-list-group-notification-item-border-left-width,
166
+ null
167
+ )
160
168
  )
161
- )
162
- );
163
- $border-right-width: setter(
164
- map-get($map, border-right-width),
165
- if(
166
- variable-exists(list-group-notification-item-border-right-width),
167
- $list-group-notification-item-border-right-width,
169
+ );
170
+ $border-right-width: setter(
171
+ map-get($map, border-right-width),
168
172
  if(
169
173
  variable-exists(
170
- cadmin-list-group-notification-item-border-right-width
174
+ list-group-notification-item-border-right-width
171
175
  ),
172
- $cadmin-list-group-notification-item-border-right-width,
173
- null
176
+ $list-group-notification-item-border-right-width,
177
+ if(
178
+ variable-exists(
179
+ cadmin-list-group-notification-item-border-right-width
180
+ ),
181
+ $cadmin-list-group-notification-item-border-right-width,
182
+ null
183
+ )
174
184
  )
175
- )
176
- );
177
- $border-top-width: setter(
178
- map-get($map, border-top-width),
179
- if(
180
- variable-exists(list-group-notification-item-border-top-width),
181
- $list-group-notification-item-border-top-width,
185
+ );
186
+ $border-top-width: setter(
187
+ map-get($map, border-top-width),
182
188
  if(
183
- variable-exists(
184
- cadmin-list-group-notification-item-border-top-width
185
- ),
186
- $cadmin-list-group-notification-item-border-top-width,
187
- null
189
+ variable-exists(list-group-notification-item-border-top-width),
190
+ $list-group-notification-item-border-top-width,
191
+ if(
192
+ variable-exists(
193
+ cadmin-list-group-notification-item-border-top-width
194
+ ),
195
+ $cadmin-list-group-notification-item-border-top-width,
196
+ null
197
+ )
188
198
  )
189
- )
190
- );
199
+ );
191
200
 
192
- $border-bottom-left-radius: map-get($map, border-bottom-left-radius);
193
- $border-bottom-right-radius: map-get($map, border-bottom-right-radius);
194
- $border-top-left-radius: map-get($map, border-top-left-radius);
195
- $border-top-right-radius: map-get($map, border-top-right-radius);
201
+ $border-bottom-left-radius: map-get($map, border-bottom-left-radius);
202
+ $border-bottom-right-radius: map-get($map, border-bottom-right-radius);
203
+ $border-top-left-radius: map-get($map, border-top-left-radius);
204
+ $border-top-right-radius: map-get($map, border-top-right-radius);
196
205
 
197
- $color: map-get($map, color);
206
+ $color: map-get($map, color);
198
207
 
199
- $active-bg: setter(
200
- map-get($map, active-bg),
201
- if(
202
- variable-exists(list-group-active-bg),
203
- $list-group-active-bg,
208
+ $active-bg: setter(
209
+ map-get($map, active-bg),
204
210
  if(
205
- variable-exists(cadmin-list-group-active-bg),
206
- $cadmin-list-group-active-bg,
207
- null
211
+ variable-exists(list-group-active-bg),
212
+ $list-group-active-bg,
213
+ if(
214
+ variable-exists(cadmin-list-group-active-bg),
215
+ $cadmin-list-group-active-bg,
216
+ null
217
+ )
208
218
  )
209
- )
210
- );
211
- $active-border-bottom-color: setter(
212
- map-get($map, active-border-bottom-color),
213
- if(
214
- variable-exists(
215
- list-group-notification-item-active-border-bottom-color
216
- ),
217
- $list-group-notification-item-active-border-bottom-color,
219
+ );
220
+ $active-border-bottom-color: setter(
221
+ map-get($map, active-border-bottom-color),
218
222
  if(
219
223
  variable-exists(
220
- cadmin-list-group-notification-item-active-border-bottom-color
224
+ list-group-notification-item-active-border-bottom-color
221
225
  ),
222
- $cadmin-list-group-notification-item-active-border-bottom-color,
223
- null
226
+ $list-group-notification-item-active-border-bottom-color,
227
+ if(
228
+ variable-exists(
229
+ cadmin-list-group-notification-item-active-border-bottom-color
230
+ ),
231
+ $cadmin-list-group-notification-item-active-border-bottom-color,
232
+ null
233
+ )
224
234
  )
225
- )
226
- );
227
- $active-border-left-color: setter(
228
- map-get($map, active-border-left-color),
229
- if(
230
- variable-exists(
231
- list-group-notification-item-active-border-left-color
232
- ),
233
- $list-group-notification-item-active-border-left-color,
235
+ );
236
+ $active-border-left-color: setter(
237
+ map-get($map, active-border-left-color),
234
238
  if(
235
239
  variable-exists(
236
- cadmin-list-group-notification-item-active-border-left-color
240
+ list-group-notification-item-active-border-left-color
237
241
  ),
238
- $cadmin-list-group-notification-item-active-border-left-color,
239
- null
242
+ $list-group-notification-item-active-border-left-color,
243
+ if(
244
+ variable-exists(
245
+ cadmin-list-group-notification-item-active-border-left-color
246
+ ),
247
+ $cadmin-list-group-notification-item-active-border-left-color,
248
+ null
249
+ )
240
250
  )
241
- )
242
- );
243
- $active-border-right-color: setter(
244
- map-get($map, active-border-right-color),
245
- if(
246
- variable-exists(
247
- list-group-notification-item-active-border-right-color
248
- ),
249
- $list-group-notification-item-active-border-right-color,
251
+ );
252
+ $active-border-right-color: setter(
253
+ map-get($map, active-border-right-color),
250
254
  if(
251
255
  variable-exists(
252
- cadmin-list-group-notification-item-active-border-right-color
256
+ list-group-notification-item-active-border-right-color
253
257
  ),
254
- $cadmin-list-group-notification-item-active-border-right-color,
255
- null
258
+ $list-group-notification-item-active-border-right-color,
259
+ if(
260
+ variable-exists(
261
+ cadmin-list-group-notification-item-active-border-right-color
262
+ ),
263
+ $cadmin-list-group-notification-item-active-border-right-color,
264
+ null
265
+ )
256
266
  )
257
- )
258
- );
259
- $active-border-top-color: setter(
260
- map-get($map, active-border-top-color),
261
- if(
262
- variable-exists(
263
- list-group-notification-item-active-border-top-color
264
- ),
265
- $list-group-notification-item-active-border-top-color,
267
+ );
268
+ $active-border-top-color: setter(
269
+ map-get($map, active-border-top-color),
266
270
  if(
267
271
  variable-exists(
268
- cadmin-list-group-notification-item-active-border-top-color
272
+ list-group-notification-item-active-border-top-color
269
273
  ),
270
- $cadmin-list-group-notification-item-active-border-top-color,
271
- null
274
+ $list-group-notification-item-active-border-top-color,
275
+ if(
276
+ variable-exists(
277
+ cadmin-list-group-notification-item-active-border-top-color
278
+ ),
279
+ $cadmin-list-group-notification-item-active-border-top-color,
280
+ null
281
+ )
272
282
  )
273
- )
274
- );
283
+ );
275
284
 
276
- // Box shadows are used for borders, determined by border variables above
285
+ // Box shadows are used for borders, determined by border variables above
277
286
 
278
- $box-shadow-bottom: inset 0 -#{$border-bottom-width} #{$border-bottom-color};
279
- $box-shadow-left: inset #{$border-left-width} 0 #{$border-left-color};
280
- $box-shadow-right: inset -#{$border-right-width} 0 #{$border-right-color};
281
- $box-shadow-top: inset 0 #{$border-top-width} #{$border-top-color};
287
+ $box-shadow-bottom: inset
288
+ 0 -#{$border-bottom-width}
289
+ #{$border-bottom-color};
290
+ $box-shadow-left: inset #{$border-left-width} 0 #{$border-left-color};
291
+ $box-shadow-right: inset -#{$border-right-width}
292
+ 0
293
+ #{$border-right-color};
294
+ $box-shadow-top: inset 0 #{$border-top-width} #{$border-top-color};
282
295
 
283
- $active-box-shadow-bottom: inset 0 -#{$border-bottom-width} #{$active-border-bottom-color};
284
- $active-box-shadow-left: inset #{$border-left-width} 0 #{$active-border-left-color};
285
- $active-box-shadow-right: inset -#{$border-right-width} 0 #{$active-border-right-color};
286
- $active-box-shadow-top: inset 0 #{$border-top-width} #{$active-border-top-color};
296
+ $active-box-shadow-bottom: inset
297
+ 0 -#{$border-bottom-width}
298
+ #{$active-border-bottom-color};
299
+ $active-box-shadow-left: inset
300
+ #{$border-left-width}
301
+ 0
302
+ #{$active-border-left-color};
303
+ $active-box-shadow-right: inset -#{$border-right-width}
304
+ 0
305
+ #{$active-border-right-color};
306
+ $active-box-shadow-top: inset
307
+ 0
308
+ #{$border-top-width}
309
+ #{$active-border-top-color};
287
310
 
288
- background-color: $bg;
311
+ background-color: $bg;
289
312
 
290
- @if (
291
- if(
292
- variable-exists(enable-rounded),
293
- $enable-rounded,
313
+ @if (
294
314
  if(
295
- variable-exists(cadmin-enable-rounded),
296
- $cadmin-enable-rounded,
297
- true
315
+ variable-exists(enable-rounded),
316
+ $enable-rounded,
317
+ if(
318
+ variable-exists(cadmin-enable-rounded),
319
+ $cadmin-enable-rounded,
320
+ true
321
+ )
298
322
  )
299
- )
300
- ) {
301
- border-bottom-left-radius: $border-bottom-left-radius;
302
- border-bottom-right-radius: $border-bottom-right-radius;
303
- border-top-left-radius: $border-top-left-radius;
304
- border-top-right-radius: $border-top-right-radius;
305
- }
323
+ ) {
324
+ border-bottom-left-radius: $border-bottom-left-radius;
325
+ border-bottom-right-radius: $border-bottom-right-radius;
326
+ border-top-left-radius: $border-top-left-radius;
327
+ border-top-right-radius: $border-top-right-radius;
328
+ }
306
329
 
307
- box-shadow: $box-shadow-left, $box-shadow-right, $box-shadow-top,
308
- $box-shadow-bottom;
309
- color: $color;
330
+ box-shadow: $box-shadow-left, $box-shadow-right, $box-shadow-top,
331
+ $box-shadow-bottom;
332
+ color: $color;
310
333
 
311
- &.active {
312
- background-color: $active-bg;
313
- box-shadow: $active-box-shadow-left, $active-box-shadow-right,
314
- $active-box-shadow-top, $active-box-shadow-bottom;
334
+ &.active {
335
+ background-color: $active-bg;
336
+ box-shadow: $active-box-shadow-left, $active-box-shadow-right,
337
+ $active-box-shadow-top, $active-box-shadow-bottom;
338
+ }
315
339
  }
316
340
  }