@wavemaker/foundation-css 11.15.4-rc.647493 → 11.15.5-rc.647638
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.
- package/cjs/foundation-css.cjs +0 -17
- package/cjs/src_tokens_mobile_components_dropdown-menu_dropdown-menu_json.foundation-css.cjs +1 -1
- package/cjs/src_tokens_mobile_components_form-controls_form-controls_json.foundation-css.cjs +1 -1
- package/cjs/src_tokens_mobile_components_form-wrapper_form-wrapper_json.foundation-css.cjs +1 -1
- package/cjs/src_tokens_mobile_components_progress-circle_progress-circle_json.foundation-css.cjs +1 -1
- package/cjs/src_tokens_mobile_components_select_select_json.foundation-css.cjs +1 -1
- package/cjs/src_tokens_mobile_components_slider_slider_json.foundation-css.cjs +1 -1
- package/npm-shrinkwrap.json +130 -176
- package/package-lock.json +130 -176
- package/package.json +1 -1
- package/src/styles/mobile/components/basic/progress-circle.less +4 -2
- package/src/styles/mobile/components/data/form.less +3 -0
- package/src/styles/mobile/components/input/select.less +31 -0
- package/src/styles/mobile/components/input/slider.less +11 -3
- package/src/styles/mobile/components/navigation/menu.less +15 -0
- package/src/styles/mobile/components/tokens.light.css +32 -2
- package/src/styles/mobile/components/variables/form-controls.variant.less +84 -0
- package/src/styles/mobile/components/variables/select.variant.less +8 -0
- package/src/styles/mobile/components/variables/slider.variant.less +18 -0
- package/src/styles/mobile/studio/data/form.less +6 -0
- package/src/styles/mobile/studio/input/form.less +30 -0
- package/src/styles/mobile/studio/input/select.less +16 -2
- package/src/styles/mobile/studio/input/slider.less +97 -2
- package/src/tokens/mobile/components/dropdown-menu/dropdown-menu.json +66 -0
- package/src/tokens/mobile/components/form-controls/form-controls.json +341 -1
- package/src/tokens/mobile/components/form-wrapper/form-wrapper.json +8 -0
- package/src/tokens/mobile/components/progress-circle/progress-circle.json +16 -14
- package/src/tokens/mobile/components/select/select.json +225 -51
- package/src/tokens/mobile/components/slider/slider.json +172 -0
package/package.json
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
.app-progress-circle {
|
|
3
|
-
|
|
4
|
-
height: var(--wm-progress-circle-height);
|
|
3
|
+
|
|
5
4
|
}
|
|
6
5
|
|
|
7
6
|
.app-progress-circle-text {
|
|
@@ -14,7 +13,10 @@
|
|
|
14
13
|
}
|
|
15
14
|
|
|
16
15
|
.app-progress-circle-value {
|
|
16
|
+
width: var(--wm-progress-circle-progress-value-width);
|
|
17
|
+
height: var(--wm-progress-circle-progress-value-height);
|
|
17
18
|
stroke: var(--wm-progress-circle-stroke-active);
|
|
19
|
+
stroke-width: var(--wm-progress-circle-progress-value-height);
|
|
18
20
|
background-color: var(--wm-progress-circle-stroke-active);
|
|
19
21
|
}
|
|
20
22
|
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
border-width: var(--wm-form-border-width);
|
|
10
10
|
border-style: var(--wm-form-border-style);
|
|
11
11
|
border-color: var(--wm-form-border-color);
|
|
12
|
+
box-shadow: var(--wm-form-box-shadow);
|
|
12
13
|
}
|
|
13
14
|
|
|
14
15
|
|
|
@@ -63,6 +64,8 @@
|
|
|
63
64
|
.app-form-field {
|
|
64
65
|
min-height: var(--wm-form-field-height); // hardcoded example
|
|
65
66
|
// min-height: ~"calc(var(--wm-form-controls-min-height) + var(--wm-form-error-font-size) + var(--wm-form-error-padding-vertical) + 10px)";
|
|
67
|
+
box-shadow: var(--wm-form-controls-field-box-shadow);
|
|
68
|
+
border-radius: var(--wm-form-controls-field-radius);
|
|
66
69
|
|
|
67
70
|
margin-left: var(--wm-form-field-margin-horizontal);
|
|
68
71
|
margin-right: var(--wm-form-field-margin-horizontal);
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
border-radius: var(--wm-select-modal-content-border-radius);
|
|
17
17
|
border-style: var(--wm-select-modal-content-border-style);
|
|
18
18
|
border-width: var(--wm-select-modal-content-border-width);
|
|
19
|
+
box-shadow: var(--wm-select-modal-content-box-shadow);
|
|
19
20
|
}
|
|
20
21
|
|
|
21
22
|
.app-select-arrow-button-icon {
|
|
@@ -29,10 +30,40 @@
|
|
|
29
30
|
padding: var(--wm-select-arrow-button-icon-padding);
|
|
30
31
|
}
|
|
31
32
|
|
|
33
|
+
.app-select-item {
|
|
34
|
+
border-width: var(--wm-select-item-border-width);
|
|
35
|
+
border-color: var(--wm-select-item-border-color);
|
|
36
|
+
border-style: var(--wm-select-item-border-style);
|
|
37
|
+
padding: var(--wm-select-item-padding);
|
|
38
|
+
}
|
|
39
|
+
|
|
32
40
|
.app-select-item-text {
|
|
33
41
|
font-size: var(--wm-select-modal-text-font-size);
|
|
34
42
|
color: var(--wm-select-modal-text-color);
|
|
35
43
|
font-family: var(--wm-select-modal-text-font-family);
|
|
44
|
+
line-height: var(--wm-select-item-text-line-height);
|
|
45
|
+
letter-spacing: var(--wm-select-item-text-letter-spacing);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.app-select-active-item-text {
|
|
49
|
+
font-size: var(--wm-select-modal-text-font-size);
|
|
50
|
+
color: var(--wm-select-modal-text-color);
|
|
51
|
+
font-family: var(--wm-select-modal-text-font-family);
|
|
52
|
+
line-height: var(--wm-select-item-text-line-height);
|
|
53
|
+
letter-spacing: var(--wm-select-item-text-letter-spacing);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.app-select-check-icon.app-icon {
|
|
57
|
+
background-color: var(--wm-select-check-icon-background-color);
|
|
58
|
+
height: var(--wm-select-check-icon-height);
|
|
59
|
+
width: var(--wm-select-check-icon-width);
|
|
60
|
+
border-radius: var(--wm-select-check-icon-border-radius);
|
|
61
|
+
border-width: var(--wm-select-check-icon-border-width);
|
|
62
|
+
border-color: var(--wm-select-check-icon-border-color);
|
|
63
|
+
border-style: var(--wm-select-check-icon-border-style);
|
|
64
|
+
padding: var(--wm-select-check-icon-padding);
|
|
65
|
+
justify-content: center;
|
|
66
|
+
align-items: center;
|
|
36
67
|
}
|
|
37
68
|
|
|
38
69
|
.app-select-check-icon.text {
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@import (optional) url('../variables/slider.variant.less');
|
|
2
|
+
|
|
1
3
|
.app-slider {
|
|
2
4
|
width: auto;
|
|
3
5
|
position: relative;
|
|
@@ -13,25 +15,31 @@
|
|
|
13
15
|
background-color: var(--wm-slider-thumb-background);
|
|
14
16
|
height: var(--wm-slider-thumb-height);
|
|
15
17
|
width: var(--wm-slider-thumb-width);
|
|
16
|
-
left: 0px;
|
|
17
|
-
top: -20px;
|
|
18
18
|
border-radius: var(--wm-slider-thumb-border-radius);
|
|
19
19
|
margin-left: 0;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
+
.app-slider-thumb-wrapper {
|
|
23
|
+
width: var(--wm-slider-thumb-wrapper-width);
|
|
24
|
+
height: var(--wm-slider-thumb-wrapper-height);
|
|
25
|
+
border-radius: var(--wm-slider-thumb-wrapper-border-radius);
|
|
26
|
+
background-color: var(--wm-slider-thumb-wrapper-background);
|
|
27
|
+
}
|
|
28
|
+
|
|
22
29
|
.app-slider-minimum-track {
|
|
23
30
|
background-color: var(--wm-slider-min-track-background);
|
|
31
|
+
height: var(--wm-slider-track-height);
|
|
24
32
|
}
|
|
25
33
|
|
|
26
34
|
.app-slider-maximum-track {
|
|
27
35
|
background-color: var(--wm-slider-max-track-background);
|
|
28
36
|
border-radius: 0;
|
|
37
|
+
height: var(--wm-slider-track-height);
|
|
29
38
|
}
|
|
30
39
|
|
|
31
40
|
.app-slider-tooltip {
|
|
32
41
|
background-color: var(--wm-slider-tooltip-background);
|
|
33
42
|
min-width: unset;
|
|
34
|
-
left: -40px;
|
|
35
43
|
}
|
|
36
44
|
|
|
37
45
|
.app-slider-tooltip-label {
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
.app-menu-link-text {
|
|
10
10
|
color: var(--wm-dropdown-menu-color);
|
|
11
|
+
font-size: var(--wm-dropdown-menu-text-font-size);
|
|
11
12
|
font-weight: var(--wm-dropdown-menu-text-font-weight);
|
|
12
13
|
text-decoration: var(--wm-dropdown-menu-text-decoration);
|
|
13
14
|
padding: var(--wm-dropdown-menu-text-padding);
|
|
@@ -25,6 +26,9 @@
|
|
|
25
26
|
.app-menu-content {
|
|
26
27
|
background-color: var(--wm-dropdown-menu-content-background);
|
|
27
28
|
border-radius: var(--wm-dropdown-menu-content-border-radius);
|
|
29
|
+
border-width: var(--wm-dropdown-menu-content-border-width);
|
|
30
|
+
border-style: var(--wm-dropdown-menu-content-border-style);
|
|
31
|
+
border-color: var(--wm-dropdown-menu-content-border-color);
|
|
28
32
|
width: var(--wm-dropdown-menu-content-width);
|
|
29
33
|
padding: var(--wm-dropdown-menu-padding);
|
|
30
34
|
}
|
|
@@ -32,6 +36,9 @@
|
|
|
32
36
|
.app-menu-item.root {
|
|
33
37
|
border-style: var(--wm-dropdown-menu-item-border-style);
|
|
34
38
|
padding: var(--wm-dropdown-menu-item-padding);
|
|
39
|
+
background-color: var(--wm-dropdown-menu-item-background-color);
|
|
40
|
+
justify-content: center;
|
|
41
|
+
align-items: center;
|
|
35
42
|
}
|
|
36
43
|
|
|
37
44
|
.app-menu-item .app-anchor-text {
|
|
@@ -46,3 +53,11 @@
|
|
|
46
53
|
line-height: var(--wm-dropdown-menu-item-line-height);
|
|
47
54
|
text-decoration-line: none;
|
|
48
55
|
}
|
|
56
|
+
.app-menu-item .app-anchor-icon .app-icon {
|
|
57
|
+
padding: var(--wm-dropdown-menu-item-icon-padding);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.app-menu-item.app-anchor-icon .app-icon-shape {
|
|
61
|
+
color: var(--wm-dropdown-menu-item-icon-color);
|
|
62
|
+
font-size: var(--wm-dropdown-menu-item-icon-font-size);
|
|
63
|
+
}
|
|
@@ -112,6 +112,7 @@
|
|
|
112
112
|
--wm-dropdown-menu-text-decoration: none;
|
|
113
113
|
--wm-dropdown-menu-content-width: 220px;
|
|
114
114
|
--wm-dropdown-menu-content-background: #fff;
|
|
115
|
+
--wm-dropdown-menu-item-background-color: transparent;
|
|
115
116
|
--wm-dropdown-menu-border-width: 0;
|
|
116
117
|
--wm-fileupload-text-align: center;
|
|
117
118
|
--wm-fileupload-ripple-color: transparent;
|
|
@@ -177,8 +178,8 @@
|
|
|
177
178
|
--wm-popover-link-width: auto;
|
|
178
179
|
--wm-popover-link-min-height: auto;
|
|
179
180
|
--wm-progress-bar-height: 16px;
|
|
180
|
-
--wm-progress-circle-width:
|
|
181
|
-
--wm-progress-circle-height:
|
|
181
|
+
--wm-progress-circle-progress-value-width: 16px;
|
|
182
|
+
--wm-progress-circle-progress-value-height: 16px;
|
|
182
183
|
--wm-radiobutton-size: 20px;
|
|
183
184
|
--wm-radiobutton-indicator-size: 16px;
|
|
184
185
|
--wm-radiobutton-color: transparent;
|
|
@@ -200,6 +201,15 @@
|
|
|
200
201
|
--wm-search-data-complete-background: transparent;
|
|
201
202
|
--wm-search-item-separator-width: 0;
|
|
202
203
|
--wm-select-arrow-button-icon-height: 24px;
|
|
204
|
+
--wm-select-check-icon-background-color: transparent;
|
|
205
|
+
--wm-select-check-icon-height: 24px;
|
|
206
|
+
--wm-select-check-icon-width: 24px;
|
|
207
|
+
--wm-select-check-icon-border-radius: 1px;
|
|
208
|
+
--wm-select-check-icon-border-color: transparent;
|
|
209
|
+
--wm-slider-thumb-wrapper-width: 14px;
|
|
210
|
+
--wm-slider-thumb-wrapper-height: 54px;
|
|
211
|
+
--wm-slider-thumb-wrapper-border-radius: 2px;
|
|
212
|
+
--wm-slider-thumb-wrapper-background: #fff;
|
|
203
213
|
--wm-slider-tooltip-background: #000;
|
|
204
214
|
--wm-spinner-background: transparent;
|
|
205
215
|
--wm-spinner-width: 100%;
|
|
@@ -645,8 +655,12 @@
|
|
|
645
655
|
--wm-dropdown-menu-padding: var(--wm-space-2) var(--wm-space-0);
|
|
646
656
|
--wm-dropdown-menu-color: var(--wm-color-on-surface-variant);
|
|
647
657
|
--wm-dropdown-menu-text-font-weight: var(--wm-font-weight-700);
|
|
658
|
+
--wm-dropdown-menu-text-font-size: var(--wm-body-large-font-size);
|
|
648
659
|
--wm-dropdown-menu-text-padding: var(--wm-space-0) var(--wm-space-3) var(--wm-space-0) var(--wm-space-2);
|
|
649
660
|
--wm-dropdown-menu-content-border-radius: var(--wm-radius-xs);
|
|
661
|
+
--wm-dropdown-menu-content-border-width: var(--wm-border-width-0);
|
|
662
|
+
--wm-dropdown-menu-content-border-style: var(--wm-border-style-solid);
|
|
663
|
+
--wm-dropdown-menu-content-border-color: var(--wm-color-on-surface-variant);
|
|
650
664
|
--wm-dropdown-menu-caret-color: var(--wm-color-on-surface-variant);
|
|
651
665
|
--wm-dropdown-menu-caret-size: var(--wm-icon-size-sm);
|
|
652
666
|
--wm-dropdown-menu-item-font-size: var(--wm-body-large-font-size);
|
|
@@ -654,6 +668,9 @@
|
|
|
654
668
|
--wm-dropdown-menu-item-color: var(--wm-color-on-surface);
|
|
655
669
|
--wm-dropdown-menu-item-border-style: var(--wm-border-style-solid);
|
|
656
670
|
--wm-dropdown-menu-item-padding: var(--wm-space-3) var(--wm-space-4);
|
|
671
|
+
--wm-dropdown-menu-item-icon-color: var(--wm-color-on-surface-variant);
|
|
672
|
+
--wm-dropdown-menu-item-icon-padding: var(--wm-space-0);
|
|
673
|
+
--wm-dropdown-menu-item-icon-font-size: var(--wm-body-large-font-size);
|
|
657
674
|
--wm-dropdown-menu-border-radius: var(--wm-radius-none);
|
|
658
675
|
--wm-dropdown-menu-border-color: var(--wm-color-on-surface-variant);
|
|
659
676
|
--wm-fileupload-border-color: var(--wm-color-black);
|
|
@@ -667,6 +684,8 @@
|
|
|
667
684
|
--wm-fileupload-icon-font-size: var(--wm-body-large-font-size);
|
|
668
685
|
--wm-fileupload-icon-color: var(--wm-color-primary);
|
|
669
686
|
--wm-form-controls-opacity: var(--wm-border-width-1);
|
|
687
|
+
--wm-form-controls-field-box-shadow: var(--wm-elevation-shadow-none);
|
|
688
|
+
--wm-form-controls-field-radius: var(--wm-radius-none);
|
|
670
689
|
--wm-form-controls-font-size: var(--wm-body-large-font-size);
|
|
671
690
|
--wm-form-controls-padding: var(--wm-space-2);
|
|
672
691
|
--wm-form-controls-border-color: var(--wm-color-outline);
|
|
@@ -690,6 +709,7 @@
|
|
|
690
709
|
--wm-form-border-radius: var(--wm-radius-sm);
|
|
691
710
|
--wm-form-border-width: var(--wm-border-width-base);
|
|
692
711
|
--wm-form-border-color: var(--wm-color-transparent);
|
|
712
|
+
--wm-form-box-shadow: var(--wm-elevation-shadow-none);
|
|
693
713
|
--wm-form-header-padding-vertical: var(--wm-space-2);
|
|
694
714
|
--wm-form-header-padding-horizontal: var(--wm-space-2);
|
|
695
715
|
--wm-form-header-border-color: var(--wm-color-transparent);
|
|
@@ -1008,10 +1028,18 @@
|
|
|
1008
1028
|
--wm-select-modal-content-border-radius: var(--wm-radius-base);
|
|
1009
1029
|
--wm-select-modal-content-border-width: var(--wm-border-width-0);
|
|
1010
1030
|
--wm-select-modal-content-border-color: var(--wm-color-outline);
|
|
1031
|
+
--wm-select-modal-content-box-shadow: var(--wm-elevation-shadow-none);
|
|
1011
1032
|
--wm-select-modal-text-font-size: var(--wm-body-large-font-size);
|
|
1012
1033
|
--wm-select-modal-text-color: var(--wm-color-on-surface-variant);
|
|
1034
|
+
--wm-select-modal-text-line-height: var(--wm-body-large-line-height);
|
|
1035
|
+
--wm-select-modal-text-letter-spacing: var(--wm-body-large-letter-spacing);
|
|
1036
|
+
--wm-select-item-border-width: var(--wm-border-width-1);
|
|
1037
|
+
--wm-select-item-border-color: var(--wm-color-shadow);
|
|
1038
|
+
--wm-select-item-padding: var(--wm-space-2) var(--wm-space-4);
|
|
1039
|
+
--wm-select-check-icon-border-width: var(--wm-border-width-1);
|
|
1013
1040
|
--wm-select-check-icon-color: var(--wm-color-on-background);
|
|
1014
1041
|
--wm-select-check-icon-font-size: var(--wm-icon-size-md);
|
|
1042
|
+
--wm-select-check-icon-padding: var(--wm-space-0);
|
|
1015
1043
|
--wm-slider-track-height: var(--wm-space-4);
|
|
1016
1044
|
--wm-slider-track-margin-vertical: var(--wm-space-4);
|
|
1017
1045
|
--wm-slider-track-border-radius: var(--wm-radius-lg);
|
|
@@ -1297,6 +1325,8 @@
|
|
|
1297
1325
|
--wm-select-arrow-button-border-style: var(--wm-border-style-base);
|
|
1298
1326
|
--wm-select-modal-content-border-style: var(--wm-border-style-base);
|
|
1299
1327
|
--wm-select-modal-text-font-family: var(--wm-body-medium-font-family);
|
|
1328
|
+
--wm-select-item-border-style: var(--wm-border-style-base);
|
|
1329
|
+
--wm-select-check-icon-border-style: var(--wm-border-style-base);
|
|
1300
1330
|
--wm-tabbar-box-shadow: var(--wm-elevation-shadow-1);
|
|
1301
1331
|
--wm-tabbar-more-menu-box-shadow: var(--wm-elevation-shadow-1);
|
|
1302
1332
|
--wm-tabbar-text-font-family: var(--wm-label-large-font-family);
|
|
@@ -18,4 +18,88 @@
|
|
|
18
18
|
--wm-form-controls-background: var(--wm-color-surface-dim);
|
|
19
19
|
--wm-form-controls-color: var(--wm-color-scrim);
|
|
20
20
|
--wm-form-controls-opacity: 0.67;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.form-controls-filled {
|
|
24
|
+
--wm-form-controls-opacity: var(--wm-border-width-1);
|
|
25
|
+
--wm-form-controls-min-height: 56px;
|
|
26
|
+
--wm-form-controls-min-width: 210px;
|
|
27
|
+
--wm-form-controls-padding: var(--wm-space-4) var(--wm-space-4) 0 var(--wm-space-4);
|
|
28
|
+
--wm-form-controls-border-color: var(--wm-color-outline);
|
|
29
|
+
--wm-form-controls-border-radius: var(--wm-radius-sm) var(--wm-radius-sm) 0 0;
|
|
30
|
+
--wm-form-controls-border-style: var(--wm-border-style-base);
|
|
31
|
+
--wm-form-controls-border-width: 0 0 var(--wm-border-width-1) 0;
|
|
32
|
+
--wm-form-controls-placeholder-color: var(--wm-color-on-surface-variant);
|
|
33
|
+
--wm-form-controls-background: var(--wm-color-surface-dim);
|
|
34
|
+
--wm-form-controls-color: var(--wm-color-black);
|
|
35
|
+
--wm-form-controls-floating-color: var(--wm-color-on-surface-variant);
|
|
36
|
+
--wm-form-controls-floating-top: var(--wm-space-5);
|
|
37
|
+
--wm-form-controls-floating-left: var(--wm-space-3);
|
|
38
|
+
--wm-form-controls-label-color: var(--wm-color-on-surface-variant);
|
|
39
|
+
--wm-form-controls-label-background: var(--wm-color-transparent);
|
|
40
|
+
--wm-form-controls-label-font-size: var(--wm-label-large-font-size);
|
|
41
|
+
--wm-form-controls-label-font-weight: var(--wm-label-large-font-weight);
|
|
42
|
+
--wm-form-controls-label-font-family: var(--wm-label-large-font-family);
|
|
43
|
+
--wm-form-controls-label-margin-vertical: var(--wm-space-0);
|
|
44
|
+
--wm-form-controls-label-margin-horizontal: var(--wm-space-0);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.form-controls-filled.app-input-focused {
|
|
48
|
+
--wm-form-controls-min-height: 56px;
|
|
49
|
+
--wm-form-controls-min-width: 210px;
|
|
50
|
+
--wm-form-controls-border-width: 0 0 var(--wm-border-width-2) 0;
|
|
51
|
+
--wm-form-controls-border-style: var(--wm-border-style-base);
|
|
52
|
+
--wm-form-controls-border-radius: var(--wm-radius-sm) var(--wm-radius-sm) 0 0;
|
|
53
|
+
--wm-form-controls-floating-color: var(--wm-color-outline);
|
|
54
|
+
--wm-form-controls-floating-top: var(--wm-space-5);
|
|
55
|
+
--wm-form-controls-floating-left: var(--wm-space-3);
|
|
56
|
+
--wm-form-controls-label-color: var(--wm-color-outline);
|
|
57
|
+
--wm-form-controls-padding: var(--wm-space-4) var(--wm-space-4) 0 var(--wm-space-4);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.form-controls-filled.app-input-disabled {
|
|
61
|
+
--wm-form-controls-border-color: var(--wm-color-shadow);
|
|
62
|
+
--wm-form-controls-border-width: 0 0 var(--wm-border-width-1) 0;
|
|
63
|
+
--wm-form-controls-background: var(--wm-color-surface-dim);
|
|
64
|
+
--wm-form-controls-color: var(--wm-color-scrim);
|
|
65
|
+
--wm-form-controls-opacity: 0.67;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.form-controls-outlined {
|
|
69
|
+
--wm-form-controls-opacity: 1;
|
|
70
|
+
--wm-form-controls-min-height: 56px;
|
|
71
|
+
--wm-form-controls-min-width: 210px;
|
|
72
|
+
--wm-form-controls-font-size: var(--wm-body-large-font-size);
|
|
73
|
+
--wm-form-controls-font-weight: var(--wm-body-large-font-weight);
|
|
74
|
+
--wm-form-controls-font-family: var(--wm-body-large-font-family);
|
|
75
|
+
--wm-form-controls-padding: var(--wm-space-4);
|
|
76
|
+
--wm-form-controls-border: var(--wm-border-width-1);
|
|
77
|
+
--wm-form-controls-placeholder-color: var(--wm-color-on-surface);
|
|
78
|
+
--wm-form-controls-background: var(--wm-color-white);
|
|
79
|
+
--wm-form-controls-color: var(--wm-color-black);
|
|
80
|
+
--wm-form-controls-label-color: var(--wm-color-on-surface);
|
|
81
|
+
--wm-form-controls-label-background: var(--wm-color-transparent);
|
|
82
|
+
--wm-form-controls-floating-color: var(--wm-color-surface-dim);
|
|
83
|
+
--wm-form-controls-floating-top: var(--wm-space-5);
|
|
84
|
+
--wm-form-controls-floating-left: var(--wm-space-4);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.form-controls-outlined.app-input-focused {
|
|
88
|
+
--wm-form-controls-min-height: 56px;
|
|
89
|
+
--wm-form-controls-min-width: 210px;
|
|
90
|
+
--wm-form-controls-border-color: var(--wm-color-secondary);
|
|
91
|
+
--wm-form-controls-border-width: var(--wm-border-width-1);
|
|
92
|
+
--wm-form-controls-padding: var(--wm-space-4);
|
|
93
|
+
--wm-form-controls-background: var(--wm-color-white);
|
|
94
|
+
--wm-form-controls-color: var(--wm-color-black);
|
|
95
|
+
--wm-form-controls-floating-color: var(--wm-color-primary);
|
|
96
|
+
--wm-form-controls-floating-top: var(--wm-space-5);
|
|
97
|
+
--wm-form-controls-floating-left: var(--wm-space-4);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.form-controls-outlined.app-input-disabled {
|
|
101
|
+
--wm-form-controls-border: 1px solid var(--wm-color-shadow);
|
|
102
|
+
--wm-form-controls-background: var(--wm-color-white);
|
|
103
|
+
--wm-form-controls-color: var(--wm-color-scrim);
|
|
104
|
+
--wm-form-controls-opacity: 0.67;
|
|
21
105
|
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
.app-select-active-item,
|
|
2
|
+
.app-select-active-item-text {
|
|
3
|
+
--wm-select-modal-text-color: var(--wm-color-primary);
|
|
4
|
+
--wm-select-modal-text-font-size: var(--wm-body-large-font-size);
|
|
5
|
+
--wm-select-modal-text-font-family: var(--wm-body-medium-font-family);
|
|
6
|
+
--wm-select-modal-text-line-height: var(--wm-body-large-line-height);
|
|
7
|
+
--wm-select-modal-text-letter-spacing: var(--wm-body-large-letter-spacing);
|
|
8
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
.app-slider {
|
|
2
|
+
--wm-slider-thumb-background: var(--wm-color-surface-tint);
|
|
3
|
+
--wm-slider-thumb-height: var(--wm-space-8);
|
|
4
|
+
--wm-slider-thumb-width: var(--wm-space-1);
|
|
5
|
+
--wm-slider-thumb-border-radius: var(--wm-radius-xs);
|
|
6
|
+
--wm-slider-thumb-wrapper-width: 14px;
|
|
7
|
+
--wm-slider-thumb-wrapper-height: 54px;
|
|
8
|
+
--wm-slider-thumb-wrapper-border-radius: 2px;
|
|
9
|
+
--wm-slider-thumb-wrapper-background: #fff;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.slider-circle-thumb {
|
|
13
|
+
--wm-slider-thumb-background: var(--wm-color-transparent);
|
|
14
|
+
--wm-slider-thumb-wrapper-background: var(--wm-color-surface-tint);
|
|
15
|
+
--wm-slider-thumb-wrapper-height: 20px;
|
|
16
|
+
--wm-slider-thumb-wrapper-width: 20px;
|
|
17
|
+
--wm-slider-thumb-wrapper-border-radius: 100px;
|
|
18
|
+
}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
.app-form {
|
|
2
|
+
box-shadow: var(--wm-form-box-shadow);
|
|
3
|
+
|
|
2
4
|
&.app-panel .panel-heading {
|
|
3
5
|
background-color: transparent;
|
|
4
6
|
.description{
|
|
@@ -16,6 +18,10 @@
|
|
|
16
18
|
}
|
|
17
19
|
}
|
|
18
20
|
}
|
|
21
|
+
.app-form-field {
|
|
22
|
+
box-shadow: var(--wm-form-controls-field-box-shadow);
|
|
23
|
+
border-radius: var(--wm-form-controls-field-radius);
|
|
24
|
+
}
|
|
19
25
|
.form-action .app-button {
|
|
20
26
|
padding: 12px;
|
|
21
27
|
}
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
border-width: var(--wm-form-border-width) !important;
|
|
31
31
|
border-style: var(--wm-form-border-style) !important;
|
|
32
32
|
border-color: var(--wm-form-border-color) !important;
|
|
33
|
+
box-shadow: var(--wm-form-box-shadow) !important;
|
|
33
34
|
// width: 70%;
|
|
34
35
|
// margin-left: 90px !important;
|
|
35
36
|
}
|
|
@@ -132,6 +133,35 @@
|
|
|
132
133
|
width: var(--wm-form-controls-min-width);
|
|
133
134
|
}
|
|
134
135
|
|
|
136
|
+
.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-input-wrapper {
|
|
137
|
+
position: relative;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
&.btn-leading-icon,
|
|
141
|
+
.btn-trailing-icon {
|
|
142
|
+
background: none;
|
|
143
|
+
border: none;
|
|
144
|
+
position: absolute;
|
|
145
|
+
z-index: 100;
|
|
146
|
+
top: calc(var(--wm-form-controls-min-height) / 4.2);
|
|
147
|
+
left: calc(var(--wm-form-controls-padding) / 2);
|
|
148
|
+
font-size: calc(var(--wm-icon-font-size));
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
&.btn-trailing-icon {
|
|
152
|
+
left: auto;
|
|
153
|
+
right: calc(2 * var(--wm-icon-font-size)) !important;
|
|
154
|
+
}
|
|
155
|
+
&.caption-floating {
|
|
156
|
+
.control-label {
|
|
157
|
+
left: calc(var(--wm-form-controls-padding)) !important;
|
|
158
|
+
top: calc(var(--wm-form-controls-min-height) / 2.5) !important;
|
|
159
|
+
}
|
|
160
|
+
&:has(.btn-leading-icon:not(.ng-hide))>.control-label {
|
|
161
|
+
left: calc(2 * var(--wm-icon-font-size)) !important;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
135
165
|
.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-textarea {
|
|
136
166
|
min-height: var(--wm-form-controls-min-height);
|
|
137
167
|
padding: var(--wm-form-controls-padding);
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
.native-template-arrow-container {
|
|
9
|
-
background
|
|
9
|
+
background: var(--wm-select-arrow-button-background-color);
|
|
10
10
|
padding: var(--wm-select-arrow-button-padding);
|
|
11
11
|
border-width: var(--wm-select-arrow-button-border-width);
|
|
12
12
|
border-style: var(--wm-select-arrow-button-border-style);
|
|
@@ -15,24 +15,38 @@
|
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.native-template-dropdown-modal {
|
|
18
|
-
background
|
|
18
|
+
background: var(--wm-select-modal-content-background-color);
|
|
19
19
|
border-color: var(--wm-select-modal-content-border-color);
|
|
20
20
|
border-radius: var(--wm-select-modal-content-border-radius);
|
|
21
21
|
border-style: var(--wm-select-modal-content-border-style);
|
|
22
22
|
border-width: var(--wm-select-modal-content-border-width);
|
|
23
|
+
box-shadow: var(--wm-select-modal-content-box-shadow);
|
|
23
24
|
}
|
|
24
25
|
|
|
25
26
|
.native-template-option-tick {
|
|
26
27
|
font-size: var(--wm-select-check-icon-font-size);
|
|
27
28
|
color: var(--wm-select-check-icon-color);
|
|
29
|
+
padding: var(--wm-select-check-icon-padding);
|
|
28
30
|
}
|
|
29
31
|
|
|
30
32
|
.native-template-option {
|
|
33
|
+
border-width: var(--wm-select-item-border-width);
|
|
34
|
+
border-color: var(--wm-select-item-border-color);
|
|
35
|
+
border-style: var(--wm-select-item-border-style);
|
|
36
|
+
padding: var(--wm-select-item-padding);
|
|
31
37
|
font-size: var(--wm-select-modal-text-font-size);
|
|
32
38
|
color: var(--wm-select-modal-text-color);
|
|
33
39
|
font-family: var(--wm-select-modal-text-font-family);
|
|
34
40
|
}
|
|
35
41
|
|
|
42
|
+
.native-template-option.option-selected {
|
|
43
|
+
font-size: var(--wm-select-modal-text-font-size);
|
|
44
|
+
color: var(--wm-select-modal-text-color);
|
|
45
|
+
font-family: var(--wm-select-modal-text-font-family);
|
|
46
|
+
line-height: var(--wm-select-item-text-line-height);
|
|
47
|
+
letter-spacing: var(--wm-select-item-text-letter-spacing);
|
|
48
|
+
}
|
|
49
|
+
|
|
36
50
|
.native-template-arrow {
|
|
37
51
|
font-size: var(--wm-select-arrow-button-icon-font-size);
|
|
38
52
|
color: var(--wm-select-arrow-button-icon-color);
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
(var(--wm-slider-track-height, 1em) - var(--wm-slider-thumb-height)) / 2
|
|
24
24
|
);
|
|
25
25
|
border-radius: var(--wm-slider-thumb-border-radius);
|
|
26
|
-
background
|
|
26
|
+
background: var(--wm-slider-thumb-background);
|
|
27
27
|
position: relative;
|
|
28
28
|
z-index: 2;
|
|
29
29
|
}
|
|
@@ -45,5 +45,100 @@
|
|
|
45
45
|
|
|
46
46
|
|
|
47
47
|
}
|
|
48
|
+
|
|
49
|
+
.slider-mobile-root {
|
|
50
|
+
position: relative;
|
|
51
|
+
margin: 70px 30px 0px 30px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.slider-mobile-track {
|
|
55
|
+
display: flex;
|
|
56
|
+
position: relative;
|
|
57
|
+
align-items: center;
|
|
58
|
+
width: 100%;
|
|
59
|
+
height: var(--wm-slider-track-height, 16px);
|
|
60
|
+
border-radius: var(--wm-slider-track-border-radius, 8px);
|
|
61
|
+
overflow: visible;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.slider-mobile-min-track {
|
|
65
|
+
height: var(--wm-slider-track-height, 16px);
|
|
66
|
+
border-radius: var(--wm-slider-track-border-radius, 8px);
|
|
67
|
+
background-color: var(--wm-slider-min-track-background, #65558F);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.slider-mobile-max-track {
|
|
71
|
+
height: var(--wm-slider-track-height, 16px);
|
|
72
|
+
border-radius: var(--wm-slider-track-border-radius, 8px);
|
|
73
|
+
background-color: var(--wm-slider-max-track-background, #E7E0EC);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.slider-mobile-disabled-active {
|
|
77
|
+
background-color: #a9a8aa;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.slider-mobile-disabled-inactive {
|
|
81
|
+
background-color: #e4e4e4;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.slider-mobile-disabled-range {
|
|
85
|
+
background-color: #a9a8aa;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.slider-mobile-thumb-wrapper {
|
|
89
|
+
position: absolute;
|
|
90
|
+
width: calc(var(--wm-slider-thumb-width, 4px) + 10px);
|
|
91
|
+
height: calc(var(--wm-slider-thumb-height, 44px) + 10px);
|
|
92
|
+
border-radius: var(--wm-slider-thumb-border-radius, 2px);
|
|
93
|
+
background-color: #fff;
|
|
94
|
+
display: flex;
|
|
95
|
+
justify-content: center;
|
|
96
|
+
align-items: center;
|
|
97
|
+
top: 50%;
|
|
98
|
+
transform: translate(-50%, -50%);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.slider-mobile-thumb {
|
|
102
|
+
width: var(--wm-slider-thumb-width, 4px);
|
|
103
|
+
height: var(--wm-slider-thumb-height, 44px);
|
|
104
|
+
border-radius: var(--wm-slider-thumb-border-radius, 2px);
|
|
105
|
+
background-color: var(--wm-slider-thumb-background, #65558F);
|
|
106
|
+
}
|
|
107
|
+
.slider-mobile-thumb-disabled {
|
|
108
|
+
background-color: #a9a8aa;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.slider-mobile-tooltip {
|
|
112
|
+
position: absolute;
|
|
113
|
+
top: -62px;
|
|
114
|
+
width: 58px;
|
|
115
|
+
height: 44px;
|
|
116
|
+
border-radius: 100px;
|
|
117
|
+
background-color: var(--wm-slider-tooltip-background, #322F35);
|
|
118
|
+
display: flex;
|
|
119
|
+
justify-content: center;
|
|
120
|
+
align-items: center;
|
|
121
|
+
transform: translateX(-50%);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.slider-mobile-tooltip-label {
|
|
125
|
+
width: 58px;
|
|
126
|
+
text-align: center;
|
|
127
|
+
font-size: 16px;
|
|
128
|
+
color: var(--wm-slider-tooltip-color, #F5EFF7);
|
|
129
|
+
}
|
|
48
130
|
}
|
|
49
|
-
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
.slider-circle-thumb {
|
|
135
|
+
.slider-mobile-thumb-wrapper {
|
|
136
|
+
width: var(--wm-slider-thumb-wrapper-width);
|
|
137
|
+
height: var(--wm-slider-thumb-wrapper-height);
|
|
138
|
+
border-radius: var(--wm-slider-thumb-wrapper-border-radius);
|
|
139
|
+
background-color: var(--wm-slider-thumb-wrapper-background);
|
|
140
|
+
}
|
|
141
|
+
.slider-mobile-thumb{
|
|
142
|
+
background-color: var(--wm-slider-thumb-background);
|
|
143
|
+
}
|
|
144
|
+
}
|