@clayui/css 3.88.0 → 3.90.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 (44) hide show
  1. package/lib/css/atlas.css +100 -176
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +76 -126
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +118 -147
  6. package/lib/css/cadmin.css.map +1 -1
  7. package/lib/images/icons/angle-double-left-small.svg +10 -0
  8. package/lib/images/icons/angle-double-left.svg +10 -0
  9. package/lib/images/icons/angle-double-right-small.svg +10 -0
  10. package/lib/images/icons/angle-double-right.svg +10 -0
  11. package/lib/images/icons/field-area.svg +10 -0
  12. package/lib/images/icons/flags-km-KH.svg +12 -0
  13. package/lib/images/icons/icons.svg +1 -1
  14. package/package.json +2 -2
  15. package/src/images/icons/angle-double-left-small.svg +10 -0
  16. package/src/images/icons/angle-double-left.svg +10 -0
  17. package/src/images/icons/angle-double-right-small.svg +10 -0
  18. package/src/images/icons/angle-double-right.svg +10 -0
  19. package/src/images/icons/field-area.svg +10 -0
  20. package/src/images/icons/flags-km-KH.svg +12 -0
  21. package/src/scss/_license-text.scss +1 -1
  22. package/src/scss/_variables.scss +2 -0
  23. package/src/scss/atlas/_variables.scss +2 -0
  24. package/src/scss/atlas/variables/_c-root.scss +3 -0
  25. package/src/scss/atlas/variables/_globals.scss +1 -0
  26. package/src/scss/atlas/variables/_menubar.scss +68 -62
  27. package/src/scss/atlas/variables/_navs.scss +1 -1
  28. package/src/scss/cadmin/variables/_buttons.scss +1 -1
  29. package/src/scss/cadmin/variables/_globals.scss +1 -10
  30. package/src/scss/cadmin/variables/_menubar.scss +204 -189
  31. package/src/scss/cadmin/variables/_navigation-bar.scss +17 -1
  32. package/src/scss/cadmin/variables/_navs.scss +1 -1
  33. package/src/scss/cadmin/variables/_pagination.scss +3 -3
  34. package/src/scss/components/_root.scss +17 -13
  35. package/src/scss/functions/_global-functions.scss +21 -0
  36. package/src/scss/functions/_lx-icons-generated.scss +12 -0
  37. package/src/scss/mixins/_breakpoints.scss +44 -40
  38. package/src/scss/mixins/_menubar.scss +131 -10
  39. package/src/scss/variables/_buttons.scss +1 -1
  40. package/src/scss/variables/_c-root.scss +3 -0
  41. package/src/scss/variables/_globals.scss +1 -10
  42. package/src/scss/variables/_menubar.scss +158 -161
  43. package/src/scss/variables/_navigation-bar.scss +17 -1
  44. package/src/scss/variables/_navs.scss +1 -1
package/src/scss/variables/_menubar.scss CHANGED
@@ -4,54 +4,51 @@ $menubar-vertical-expand-md: () !default;
4
4
  $menubar-vertical-expand-md: map-deep-merge(
5
5
  (
6
6
  max-width: 15.625rem,
7
- mobile: (
8
- align-items: center,
9
- display: flex,
10
- flex-wrap: wrap,
11
- justify-content: space-between,
12
- margin-bottom: 1.5rem,
13
- margin-left: math-sign($grid-gutter-width * 0.5),
14
- margin-right: math-sign($grid-gutter-width * 0.5),
15
- ),
16
- collapse: (
7
+ menubar-collapse: (
17
8
  display: block,
18
9
  ),
19
- collapse-mobile: (
20
- border-color: transparent,
21
- border-style: solid,
22
- border-width: 0.0625rem,
23
- display: none,
24
- left: -0.0625rem,
25
- position: absolute,
26
- right: -0.0625rem,
27
- top: 100%,
28
- z-index: $zindex-menubar-vertical-expand-md-collapse-mobile,
29
- ),
30
- collapse-nav-mobile: (
31
- margin-bottom: 0.5rem,
32
- margin-top: 0.5rem,
33
- ),
34
- nav-nested-mobile: (
35
- margin-bottom: 0.5rem,
36
- margin-top: 0.5rem,
37
- ),
38
- nav-nested-margins-item-mobile: (
39
- margin-left: 0,
40
- ),
41
- toggler-mobile: (
42
- align-items: center,
43
- border-color: transparent,
44
- border-style: solid,
45
- border-width: 0.0625rem,
46
- display: flex,
47
- height: 2rem,
48
- padding-left: 0.5rem,
49
- padding-right: 0.5rem,
50
- c-inner: (
10
+ media-breakpoint-down: (
11
+ sm: (
12
+ margin-bottom: 1.5rem,
13
+ margin-left: math-sign($grid-gutter-width * 0.5),
14
+ margin-right: math-sign($grid-gutter-width * 0.5),
51
15
  max-width: none,
52
- ),
53
- lexicon-icon: (
54
- margin-top: 0,
16
+ menubar-collapse: (
17
+ border-color: transparent,
18
+ border-style: solid,
19
+ border-width: 0.0625rem,
20
+ display: none,
21
+ position: relative,
22
+ top: 100%,
23
+ z-index: $zindex-menubar-vertical-expand-md-collapse-mobile,
24
+ ),
25
+ nav-nested: (
26
+ margin-bottom: 0.5rem,
27
+ margin-top: 0.5rem,
28
+ ),
29
+ nav-nested-margins: (
30
+ margin-bottom: 0.5rem,
31
+ margin-top: 0.5rem,
32
+ ),
33
+ nav-nested-margins-item: (
34
+ margin-left: 0,
35
+ ),
36
+ menubar-toggler: (
37
+ align-items: center,
38
+ border-color: transparent,
39
+ border-style: solid,
40
+ border-width: 0.0625rem,
41
+ display: flex,
42
+ height: 2rem,
43
+ padding-left: 0.5rem,
44
+ padding-right: 0.5rem,
45
+ c-inner: (
46
+ max-width: none,
47
+ ),
48
+ lexicon-icon: (
49
+ margin-top: 0,
50
+ ),
51
+ ),
55
52
  ),
56
53
  ),
57
54
  ),
@@ -61,11 +58,7 @@ $menubar-vertical-expand-md: map-deep-merge(
61
58
  $menubar-vertical-transparent-md: () !default;
62
59
  $menubar-vertical-transparent-md: map-deep-merge(
63
60
  (
64
- breakpoint-up: md,
65
- mobile: (
66
- background-color: $gray-100,
67
- ),
68
- link: (
61
+ nav-link: (
69
62
  color: $gray-600,
70
63
  hover: (
71
64
  color: clay-darken($gray-600, 15),
@@ -80,38 +73,44 @@ $menubar-vertical-transparent-md: map-deep-merge(
80
73
  color: rgba($black, 0.3),
81
74
  ),
82
75
  ),
83
- link-mobile: (
84
- border-radius: clay-enable-rounded(0),
85
- color: $gray-900,
86
- hover: (
76
+ media-breakpoint-down: (
77
+ sm: (
87
78
  background-color: $gray-100,
88
- color: clay-darken($gray-900, 5%),
89
- ),
90
- active: (
91
- background-color: $component-active-bg,
92
- color: $component-active-color,
93
- ),
94
- active-class: (
95
- font-weight: $font-weight-semi-bold,
79
+ nav-link: (
80
+ border-radius: clay-enable-rounded(0),
81
+ color: $gray-900,
82
+ hover: (
83
+ background-color: $gray-100,
84
+ color: clay-darken($gray-900, 5%),
85
+ ),
86
+ active: (
87
+ background-color: $component-active-bg,
88
+ color: $component-active-color,
89
+ ),
90
+ active-class: (
91
+ font-weight: $font-weight-semi-bold,
92
+ ),
93
+ disabled: (
94
+ background-color: transparent,
95
+ color: $gray-600,
96
+ ),
97
+ show: (
98
+ background-color: c-unset,
99
+ color: c-unset,
100
+ font-weight: c-unset,
101
+ ),
102
+ ),
103
+ menubar-collapse: (
104
+ background-color: $white,
105
+ border-color: $gray-300,
106
+ border-radius: clay-enable-rounded($border-radius),
107
+ box-shadow:
108
+ clay-enable-shadows(0 1px 5px -1px rgba(0, 0, 0, 0.3)),
109
+ ),
110
+ menubar-toggler: (
111
+ text-decoration: none,
112
+ ),
96
113
  ),
97
- disabled: (
98
- background-color: transparent,
99
- color: $gray-600,
100
- ),
101
- show: (
102
- background-color: c-unset,
103
- color: c-unset,
104
- font-weight: c-unset,
105
- ),
106
- ),
107
- collapse-mobile: (
108
- background-color: $white,
109
- border-color: $gray-300,
110
- border-radius: clay-enable-rounded($border-radius),
111
- box-shadow: clay-enable-shadows(0 1px 5px -1px rgba(0, 0, 0, 0.3)),
112
- ),
113
- toggler-mobile: (
114
- text-decoration: none,
115
114
  ),
116
115
  ),
117
116
  $menubar-vertical-transparent-md
@@ -169,56 +168,52 @@ $menubar-vertical-decorated-md-nav-link-after-active: map-deep-merge(
169
168
  $menubar-vertical-expand-lg: () !default;
170
169
  $menubar-vertical-expand-lg: map-deep-merge(
171
170
  (
172
- breakpoint-up: lg,
173
171
  max-width: 15.625rem,
174
- mobile: (
175
- align-items: center,
176
- display: flex,
177
- flex-wrap: wrap,
178
- justify-content: space-between,
179
- margin-bottom: 1.5rem,
180
- margin-left: math-sign($grid-gutter-width * 0.5),
181
- margin-right: math-sign($grid-gutter-width * 0.5),
182
- ),
183
- collapse: (
172
+ menubar-collapse: (
184
173
  display: block,
185
174
  ),
186
- collapse-mobile: (
187
- border-color: transparent,
188
- border-style: solid,
189
- border-width: 0.0625rem,
190
- display: none,
191
- left: -0.0625rem,
192
- position: absolute,
193
- right: -0.0625rem,
194
- top: 100%,
195
- z-index: $zindex-menubar-vertical-expand-md-collapse-mobile,
196
- ),
197
- nav-nested-mobile: (
198
- margin-bottom: 0.5rem,
199
- margin-top: 0.5rem,
200
- ),
201
- nav-nested-margins-mobile: (
202
- margin-bottom: 0.5rem,
203
- margin-top: 0.5rem,
204
- ),
205
- nav-nested-margins-item-mobile: (
206
- margin-left: 0,
207
- ),
208
- toggler-mobile: (
209
- align-items: center,
210
- border-color: transparent,
211
- border-style: solid,
212
- border-width: 0.0625rem,
213
- display: flex,
214
- height: 2rem,
215
- padding-left: 0.5rem,
216
- padding-right: 0.5rem,
217
- c-inner: (
175
+ media-breakpoint-down: (
176
+ md: (
177
+ margin-bottom: 1.5rem,
178
+ margin-left: math-sign($grid-gutter-width * 0.5),
179
+ margin-right: math-sign($grid-gutter-width * 0.5),
218
180
  max-width: none,
219
- ),
220
- lexicon-icon: (
221
- margin-top: 0,
181
+ menubar-collapse: (
182
+ border-color: transparent,
183
+ border-style: solid,
184
+ border-width: 0.0625rem,
185
+ display: none,
186
+ position: relative,
187
+ top: 100%,
188
+ z-index: $zindex-menubar-vertical-expand-md-collapse-mobile,
189
+ ),
190
+ nav-nested: (
191
+ margin-bottom: 0.5rem,
192
+ margin-top: 0.5rem,
193
+ ),
194
+ nav-nested-margins: (
195
+ margin-bottom: 0.5rem,
196
+ margin-top: 0.5rem,
197
+ ),
198
+ nav-nested-margins-item: (
199
+ margin-left: 0,
200
+ ),
201
+ menubar-toggler: (
202
+ align-items: center,
203
+ border-color: transparent,
204
+ border-style: solid,
205
+ border-width: 0.0625rem,
206
+ display: flex,
207
+ height: 2rem,
208
+ padding-left: 0.5rem,
209
+ padding-right: 0.5rem,
210
+ c-inner: (
211
+ max-width: none,
212
+ ),
213
+ lexicon-icon: (
214
+ margin-top: 0,
215
+ ),
216
+ ),
222
217
  ),
223
218
  ),
224
219
  ),
@@ -228,11 +223,7 @@ $menubar-vertical-expand-lg: map-deep-merge(
228
223
  $menubar-vertical-transparent-lg: () !default;
229
224
  $menubar-vertical-transparent-lg: map-deep-merge(
230
225
  (
231
- breakpoint-up: lg,
232
- mobile: (
233
- background-color: $gray-100,
234
- ),
235
- link: (
226
+ nav-link: (
236
227
  color: $gray-600,
237
228
  hover: (
238
229
  color: clay-darken($gray-600, 15),
@@ -247,38 +238,44 @@ $menubar-vertical-transparent-lg: map-deep-merge(
247
238
  color: rgba($black, 0.3),
248
239
  ),
249
240
  ),
250
- link-mobile: (
251
- border-radius: clay-enable-rounded(0),
252
- color: $gray-900,
253
- hover: (
241
+ media-breakpoint-down: (
242
+ md: (
254
243
  background-color: $gray-100,
255
- color: clay-darken($gray-900, 5%),
256
- ),
257
- active: (
258
- background-color: $component-active-bg,
259
- color: $component-active-color,
260
- ),
261
- active-class: (
262
- font-weight: $font-weight-semi-bold,
244
+ nav-link: (
245
+ border-radius: clay-enable-rounded(0),
246
+ color: $gray-900,
247
+ hover: (
248
+ background-color: $gray-100,
249
+ color: clay-darken($gray-900, 5%),
250
+ ),
251
+ active: (
252
+ background-color: $component-active-bg,
253
+ color: $component-active-color,
254
+ ),
255
+ active-class: (
256
+ font-weight: $font-weight-semi-bold,
257
+ ),
258
+ disabled: (
259
+ background-color: transparent,
260
+ color: $gray-600,
261
+ ),
262
+ show: (
263
+ background-color: c-unset,
264
+ color: c-unset,
265
+ font-weight: c-unset,
266
+ ),
267
+ ),
268
+ menubar-collapse: (
269
+ background-color: $white,
270
+ border-color: $gray-300,
271
+ border-radius: clay-enable-rounded($border-radius),
272
+ box-shadow:
273
+ clay-enable-shadows(0 1px 5px -1px rgba(0, 0, 0, 0.3)),
274
+ ),
275
+ menubar-toggler: (
276
+ text-decoration: none,
277
+ ),
263
278
  ),
264
- disabled: (
265
- background-color: transparent,
266
- color: $gray-600,
267
- ),
268
- show: (
269
- background-color: c-unset,
270
- color: c-unset,
271
- font-weight: c-unset,
272
- ),
273
- ),
274
- collapse-mobile: (
275
- background-color: $white,
276
- border-color: $gray-300,
277
- border-radius: clay-enable-rounded($border-radius),
278
- box-shadow: clay-enable-shadows(0 1px 5px -1px rgba(0, 0, 0, 0.3)),
279
- ),
280
- toggler-mobile: (
281
- text-decoration: none,
282
279
  ),
283
280
  ),
284
281
  $menubar-vertical-transparent-lg
package/src/scss/variables/_navigation-bar.scss CHANGED
@@ -122,7 +122,23 @@ $navigation-bar-light: map-deep-merge(
122
122
  ),
123
123
  ),
124
124
  ),
125
- media-breakpoint-up: (),
125
+ media-breakpoint-up: (
126
+ md: (
127
+ navbar-expand-md: (
128
+ navbar-underline: (
129
+ navbar-nav: (
130
+ nav-link: (
131
+ active-class: (
132
+ after: (
133
+ background-color: $primary-l0,
134
+ ),
135
+ ),
136
+ ),
137
+ ),
138
+ ),
139
+ ),
140
+ ),
141
+ ),
126
142
  ),
127
143
  $navigation-bar-light
128
144
  );
package/src/scss/variables/_navs.scss CHANGED
@@ -465,7 +465,7 @@ $nav-underline-link-highlight-left: $nav-link-padding-x * 0.5 !default;
465
465
  $nav-underline-link-highlight-right: $nav-link-padding-x * 0.5 !default;
466
466
  $nav-underline-link-highlight-top: null !default;
467
467
 
468
- $nav-underline-link-active-highlight: $component-active-bg !default;
468
+ $nav-underline-link-active-highlight: $primary-l0 !default;
469
469
  $nav-underline-link-active-content: '' !default;
470
470
  $nav-underline-link-active-highlight-height: 0.1875rem !default;
471
471