@clayui/css 3.74.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 (75) 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/lib/images/icons/mobile-device-rules.svg +5 -7
  9. package/lib/images/icons/mobile-devices.svg +10 -0
  10. package/lib/images/icons/mobile-landscape.svg +2 -1
  11. package/lib/images/icons/mobile-portrait.svg +2 -1
  12. package/package.json +2 -2
  13. package/src/images/icons/mobile-device-rules.svg +5 -7
  14. package/src/images/icons/mobile-devices.svg +10 -0
  15. package/src/images/icons/mobile-landscape.svg +2 -1
  16. package/src/images/icons/mobile-portrait.svg +2 -1
  17. package/src/scss/_license-text.scss +1 -1
  18. package/src/scss/atlas/variables/_application-bar.scss +1 -1
  19. package/src/scss/atlas/variables/_buttons.scss +2 -3
  20. package/src/scss/atlas/variables/_dropdowns.scss +6 -2
  21. package/src/scss/atlas/variables/_globals.scss +6 -0
  22. package/src/scss/atlas/variables/_labels.scss +1 -1
  23. package/src/scss/atlas/variables/_links.scss +3 -13
  24. package/src/scss/atlas/variables/_management-bar.scss +1 -1
  25. package/src/scss/atlas/variables/_navigation-bar.scss +5 -5
  26. package/src/scss/atlas/variables/_quick-action.scss +1 -1
  27. package/src/scss/atlas/variables/_tables.scss +2 -2
  28. package/src/scss/cadmin/components/_custom-forms.scss +1 -1
  29. package/src/scss/cadmin/variables/_badges.scss +1 -1
  30. package/src/scss/cadmin/variables/_buttons.scss +2 -4
  31. package/src/scss/cadmin/variables/_cards.scss +1 -1
  32. package/src/scss/cadmin/variables/_date-picker.scss +4 -4
  33. package/src/scss/cadmin/variables/_globals.scss +6 -0
  34. package/src/scss/cadmin/variables/_labels.scss +2 -2
  35. package/src/scss/cadmin/variables/_links.scss +13 -22
  36. package/src/scss/cadmin/variables/_management-bar.scss +1 -1
  37. package/src/scss/cadmin/variables/_multi-step-nav.scss +1 -1
  38. package/src/scss/cadmin/variables/_navigation-bar.scss +5 -5
  39. package/src/scss/cadmin/variables/_quick-action.scss +1 -1
  40. package/src/scss/cadmin/variables/_tables.scss +2 -2
  41. package/src/scss/cadmin/variables/_utilities.scss +4 -4
  42. package/src/scss/components/_custom-forms.scss +1 -1
  43. package/src/scss/components/_links.scss +1 -1
  44. package/src/scss/functions/_global-functions.scss +23 -25
  45. package/src/scss/functions/_lx-icons-generated.scss +5 -3
  46. package/src/scss/mixins/_forms.scss +361 -322
  47. package/src/scss/mixins/_grid.scss +74 -67
  48. package/src/scss/mixins/_highlight.scss +91 -69
  49. package/src/scss/mixins/_list-group.scss +216 -192
  50. package/src/scss/mixins/_loaders.scss +142 -134
  51. package/src/scss/mixins/_menubar.scss +300 -296
  52. package/src/scss/mixins/_modals.scss +101 -92
  53. package/src/scss/mixins/_navbar.scss +811 -738
  54. package/src/scss/mixins/_slideout.scss +34 -30
  55. package/src/scss/mixins/_stickers.scss +30 -28
  56. package/src/scss/mixins/_tables.scss +44 -40
  57. package/src/scss/mixins/_tbar.scss +467 -425
  58. package/src/scss/mixins/_utilities.scss +41 -39
  59. package/src/scss/variables/_alerts.scss +30 -7
  60. package/src/scss/variables/_badges.scss +1 -1
  61. package/src/scss/variables/_buttons.scss +2 -3
  62. package/src/scss/variables/_cards.scss +1 -1
  63. package/src/scss/variables/_clay-color.scss +2 -2
  64. package/src/scss/variables/_date-picker.scss +4 -4
  65. package/src/scss/variables/_dropdowns.scss +6 -2
  66. package/src/scss/variables/_forms.scss +232 -44
  67. package/src/scss/variables/_globals.scss +6 -0
  68. package/src/scss/variables/_labels.scss +1 -1
  69. package/src/scss/variables/_links.scss +52 -20
  70. package/src/scss/variables/_multi-step-nav.scss +1 -1
  71. package/src/scss/variables/_navbar.scss +1 -1
  72. package/src/scss/variables/_navs.scss +25 -4
  73. package/src/scss/variables/_tables.scss +6 -1
  74. package/src/scss/variables/_tbar.scss +2 -2
  75. package/src/scss/variables/_time.scss +6 -1
package/src/scss/mixins/_loaders.scss CHANGED
@@ -35,144 +35,152 @@
35
35
  /// - Add @link to documentation
36
36
 
37
37
  @mixin clay-loading-animation-variant($map) {
38
- $enabled: setter(map-get($map, enabled), true);
39
- $mixin-name: 'clay-loading-animation-variant';
40
-
41
- $after: setter(map-get($map, after), ());
42
- $after-color: setter(map-get($map, color), map-get($after, color));
43
-
44
- $ball-0-scale: setter(map-get($map, ball-0-scale), 0em);
45
- $ball-1-scale: setter(map-get($map, ball-1-scale), -0.1em);
46
- $ball-2-scale: setter(map-get($map, ball-2-scale), -0.15em);
47
- $ball-3-scale: setter(map-get($map, ball-3-scale), -0.2em);
48
- $ball-4-scale: setter(map-get($map, ball-4-scale), -0.25em);
49
- $ball-5-scale: setter(map-get($map, ball-5-scale), -0.35em);
50
-
51
- $ball-0-alpha: setter(map-get($map, ball-0-alpha), 1);
52
- $ball-1-alpha: setter(map-get($map, ball-1-alpha), 0.8);
53
- $ball-2-alpha: setter(map-get($map, ball-2-alpha), 0.6);
54
- $ball-3-alpha: setter(map-get($map, ball-3-alpha), 0.4);
55
- $ball-4-alpha: setter(map-get($map, ball-4-alpha), 0.2);
56
- $ball-5-alpha: setter(map-get($map, ball-5-alpha), 0.1);
57
-
58
- $ball-0-color: setter(
59
- map-get($map, ball-0-color),
60
- rgba($after-color, $ball-0-alpha)
61
- );
62
- $ball-1-color: setter(
63
- map-get($map, ball-1-color),
64
- rgba($after-color, $ball-1-alpha)
65
- );
66
- $ball-2-color: setter(
67
- map-get($map, ball-2-color),
68
- rgba($after-color, $ball-2-alpha)
69
- );
70
- $ball-3-color: setter(
71
- map-get($map, ball-3-color),
72
- rgba($after-color, $ball-3-alpha)
73
- );
74
- $ball-4-color: setter(
75
- map-get($map, ball-4-color),
76
- rgba($after-color, $ball-4-alpha)
77
- );
78
- $ball-5-color: setter(
79
- map-get($map, ball-5-color),
80
- rgba($after-color, $ball-5-alpha)
81
- );
82
-
83
- $after: map-merge(
84
- $after,
85
- (
86
- animation:
87
- setter(map-get($after, animation), map-get($map, animation)),
88
- animation-name:
89
- required(
38
+ @if (type-of($map) == 'map') {
39
+ $enabled: setter(map-get($map, enabled), true);
40
+ $mixin-name: 'clay-loading-animation-variant';
41
+
42
+ $after: setter(map-get($map, after), ());
43
+ $after-color: setter(map-get($map, color), map-get($after, color));
44
+
45
+ $ball-0-scale: setter(map-get($map, ball-0-scale), 0em);
46
+ $ball-1-scale: setter(map-get($map, ball-1-scale), -0.1em);
47
+ $ball-2-scale: setter(map-get($map, ball-2-scale), -0.15em);
48
+ $ball-3-scale: setter(map-get($map, ball-3-scale), -0.2em);
49
+ $ball-4-scale: setter(map-get($map, ball-4-scale), -0.25em);
50
+ $ball-5-scale: setter(map-get($map, ball-5-scale), -0.35em);
51
+
52
+ $ball-0-alpha: setter(map-get($map, ball-0-alpha), 1);
53
+ $ball-1-alpha: setter(map-get($map, ball-1-alpha), 0.8);
54
+ $ball-2-alpha: setter(map-get($map, ball-2-alpha), 0.6);
55
+ $ball-3-alpha: setter(map-get($map, ball-3-alpha), 0.4);
56
+ $ball-4-alpha: setter(map-get($map, ball-4-alpha), 0.2);
57
+ $ball-5-alpha: setter(map-get($map, ball-5-alpha), 0.1);
58
+
59
+ $ball-0-color: setter(
60
+ map-get($map, ball-0-color),
61
+ rgba($after-color, $ball-0-alpha)
62
+ );
63
+ $ball-1-color: setter(
64
+ map-get($map, ball-1-color),
65
+ rgba($after-color, $ball-1-alpha)
66
+ );
67
+ $ball-2-color: setter(
68
+ map-get($map, ball-2-color),
69
+ rgba($after-color, $ball-2-alpha)
70
+ );
71
+ $ball-3-color: setter(
72
+ map-get($map, ball-3-color),
73
+ rgba($after-color, $ball-3-alpha)
74
+ );
75
+ $ball-4-color: setter(
76
+ map-get($map, ball-4-color),
77
+ rgba($after-color, $ball-4-alpha)
78
+ );
79
+ $ball-5-color: setter(
80
+ map-get($map, ball-5-color),
81
+ rgba($after-color, $ball-5-alpha)
82
+ );
83
+
84
+ $after: map-merge(
85
+ $after,
86
+ (
87
+ animation:
90
88
  setter(
91
- map-get($after, animation-name),
92
- map-get($map, animation-name)
89
+ map-get($after, animation),
90
+ map-get($map, animation)
93
91
  ),
94
- 'The property `animation-name` in `#{$mixin-name}` is required!'
95
- ),
96
- border-radius:
97
- setter(
98
- map-get($after, border-radius),
99
- map-get($map, border-radius)
100
- ),
101
- box-shadow:
102
- setter(
103
- map-get($after, box-shadow),
104
- map-get($map, box-shadow),
105
- #{0 -1em 0 $ball-0-scale $ball-0-color,
106
- 1em -0.5em 0 $ball-5-scale $ball-5-color,
107
- 1em 0.5em 0 $ball-4-scale $ball-4-color,
108
- 0 1em 0 $ball-3-scale $ball-3-color,
109
- -1em 0.5em 0 $ball-2-scale $ball-2-color,
110
- -1em -0.5em 0 $ball-1-scale $ball-1-color}
111
- ),
112
- color: $after-color,
113
- transform:
114
- setter(map-get($after, transform), map-get($map, transform)),
115
- )
116
- );
117
-
118
- @if ($enabled) {
119
- @include clay-css($map);
120
-
121
- &::after {
122
- @include clay-css($after);
123
- }
92
+ animation-name:
93
+ required(
94
+ setter(
95
+ map-get($after, animation-name),
96
+ map-get($map, animation-name)
97
+ ),
98
+ 'The property `animation-name` in `#{$mixin-name}` is required!'
99
+ ),
100
+ border-radius:
101
+ setter(
102
+ map-get($after, border-radius),
103
+ map-get($map, border-radius)
104
+ ),
105
+ box-shadow:
106
+ setter(
107
+ map-get($after, box-shadow),
108
+ map-get($map, box-shadow),
109
+ #{0 -1em 0 $ball-0-scale $ball-0-color,
110
+ 1em -0.5em 0 $ball-5-scale $ball-5-color,
111
+ 1em 0.5em 0 $ball-4-scale $ball-4-color,
112
+ 0 1em 0 $ball-3-scale $ball-3-color,
113
+ -1em 0.5em 0 $ball-2-scale $ball-2-color,
114
+ -1em -0.5em 0 $ball-1-scale $ball-1-color}
115
+ ),
116
+ color: $after-color,
117
+ transform:
118
+ setter(
119
+ map-get($after, transform),
120
+ map-get($map, transform)
121
+ ),
122
+ )
123
+ );
124
124
 
125
- @keyframes #{map-get($after, animation-name)} {
126
- // Box shadows need this specific order for proper animation
127
-
128
- 0%,
129
- 100% {
130
- box-shadow: 0 -1em 0 $ball-0-scale $ball-0-color,
131
- 1em -0.5em 0 $ball-5-scale $ball-5-color,
132
- 1em 0.5em 0 $ball-4-scale $ball-4-color,
133
- 0 1em 0 $ball-3-scale $ball-3-color,
134
- -1em 0.5em 0 $ball-2-scale $ball-2-color,
135
- -1em -0.5em 0 $ball-1-scale $ball-1-color;
136
- }
137
- 16.6% {
138
- box-shadow: 0 -1em 0 $ball-1-scale $ball-1-color,
139
- 1em -0.5em 0 $ball-0-scale $ball-0-color,
140
- 1em 0.5em 0 $ball-5-scale $ball-5-color,
141
- 0 1em 0 $ball-4-scale $ball-4-color,
142
- -1em 0.5em 0 $ball-3-scale $ball-3-color,
143
- -1em -0.5em 0 $ball-2-scale $ball-2-color;
144
- }
145
- 33.3% {
146
- box-shadow: 0 -1em 0 $ball-2-scale $ball-2-color,
147
- 1em -0.5em 0 $ball-1-scale $ball-1-color,
148
- 1em 0.5em 0 $ball-0-scale $ball-0-color,
149
- 0 1em 0 $ball-5-scale $ball-5-color,
150
- -1em 0.5em 0 $ball-4-scale $ball-4-color,
151
- -1em -0.5em 0 $ball-3-scale $ball-3-color;
152
- }
153
- 50% {
154
- box-shadow: 0 -1em 0 $ball-3-scale $ball-3-color,
155
- 1em -0.5em 0 $ball-2-scale $ball-2-color,
156
- 1em 0.5em 0 $ball-1-scale $ball-1-color,
157
- 0 1em 0 $ball-0-scale $ball-0-color,
158
- -1em 0.5em 0 $ball-5-scale $ball-5-color,
159
- -1em -0.5em 0 $ball-4-scale $ball-4-color;
160
- }
161
- 66.6% {
162
- box-shadow: 0 -1em 0 $ball-4-scale $ball-4-color,
163
- 1em -0.5em 0 $ball-3-scale $ball-3-color,
164
- 1em 0.5em 0 $ball-2-scale $ball-2-color,
165
- 0 1em 0 $ball-1-scale $ball-1-color,
166
- -1em 0.5em 0 $ball-0-scale $ball-0-color,
167
- -1em -0.5em 0 $ball-5-scale $ball-5-color;
125
+ @if ($enabled) {
126
+ @include clay-css($map);
127
+
128
+ &::after {
129
+ @include clay-css($after);
168
130
  }
169
- 83% {
170
- box-shadow: 0 -1em 0 $ball-5-scale $ball-5-color,
171
- 1em -0.5em 0 $ball-4-scale $ball-4-color,
172
- 1em 0.5em 0 $ball-3-scale $ball-3-color,
173
- 0 1em 0 $ball-2-scale $ball-2-color,
174
- -1em 0.5em 0 $ball-1-scale $ball-1-color,
175
- -1em -0.5em 0 $ball-0-scale $ball-0-color;
131
+
132
+ @keyframes #{map-get($after, animation-name)} {
133
+ // Box shadows need this specific order for proper animation
134
+
135
+ 0%,
136
+ 100% {
137
+ box-shadow: 0 -1em 0 $ball-0-scale $ball-0-color,
138
+ 1em -0.5em 0 $ball-5-scale $ball-5-color,
139
+ 1em 0.5em 0 $ball-4-scale $ball-4-color,
140
+ 0 1em 0 $ball-3-scale $ball-3-color,
141
+ -1em 0.5em 0 $ball-2-scale $ball-2-color,
142
+ -1em -0.5em 0 $ball-1-scale $ball-1-color;
143
+ }
144
+ 16.6% {
145
+ box-shadow: 0 -1em 0 $ball-1-scale $ball-1-color,
146
+ 1em -0.5em 0 $ball-0-scale $ball-0-color,
147
+ 1em 0.5em 0 $ball-5-scale $ball-5-color,
148
+ 0 1em 0 $ball-4-scale $ball-4-color,
149
+ -1em 0.5em 0 $ball-3-scale $ball-3-color,
150
+ -1em -0.5em 0 $ball-2-scale $ball-2-color;
151
+ }
152
+ 33.3% {
153
+ box-shadow: 0 -1em 0 $ball-2-scale $ball-2-color,
154
+ 1em -0.5em 0 $ball-1-scale $ball-1-color,
155
+ 1em 0.5em 0 $ball-0-scale $ball-0-color,
156
+ 0 1em 0 $ball-5-scale $ball-5-color,
157
+ -1em 0.5em 0 $ball-4-scale $ball-4-color,
158
+ -1em -0.5em 0 $ball-3-scale $ball-3-color;
159
+ }
160
+ 50% {
161
+ box-shadow: 0 -1em 0 $ball-3-scale $ball-3-color,
162
+ 1em -0.5em 0 $ball-2-scale $ball-2-color,
163
+ 1em 0.5em 0 $ball-1-scale $ball-1-color,
164
+ 0 1em 0 $ball-0-scale $ball-0-color,
165
+ -1em 0.5em 0 $ball-5-scale $ball-5-color,
166
+ -1em -0.5em 0 $ball-4-scale $ball-4-color;
167
+ }
168
+ 66.6% {
169
+ box-shadow: 0 -1em 0 $ball-4-scale $ball-4-color,
170
+ 1em -0.5em 0 $ball-3-scale $ball-3-color,
171
+ 1em 0.5em 0 $ball-2-scale $ball-2-color,
172
+ 0 1em 0 $ball-1-scale $ball-1-color,
173
+ -1em 0.5em 0 $ball-0-scale $ball-0-color,
174
+ -1em -0.5em 0 $ball-5-scale $ball-5-color;
175
+ }
176
+ 83% {
177
+ box-shadow: 0 -1em 0 $ball-5-scale $ball-5-color,
178
+ 1em -0.5em 0 $ball-4-scale $ball-4-color,
179
+ 1em 0.5em 0 $ball-3-scale $ball-3-color,
180
+ 0 1em 0 $ball-2-scale $ball-2-color,
181
+ -1em 0.5em 0 $ball-1-scale $ball-1-color,
182
+ -1em -0.5em 0 $ball-0-scale $ball-0-color;
183
+ }
176
184
  }
177
185
  }
178
186
  }