cedro 0.1.3 → 0.1.5

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 (54) hide show
  1. package/package.json +1 -1
  2. package/src/core/application.core.ts +19 -1
  3. package/src/index.ts +9 -8
  4. package/src/interfaces/application.interface.ts +4 -0
  5. package/src/interfaces/widget.interface.ts +10 -3
  6. package/src/types/orientation.type.ts +1 -0
  7. package/src/ui/Icon.ui.ts +3 -9
  8. package/src/ui/IconButton.ui.ts +39 -3
  9. package/src/ui/accordion.ts +71 -0
  10. package/src/ui/button.ui.ts +18 -1
  11. package/src/ui/buttonColor.ui.ts +24 -0
  12. package/src/ui/buttonmenu.ui.ts +59 -0
  13. package/src/ui/buttonstack.ui.ts +94 -0
  14. package/src/ui/checkbox.ui.ts +8 -0
  15. package/src/ui/datagrid.ui.ts +231 -0
  16. package/src/ui/draggable.ui.ts +165 -0
  17. package/src/ui/hpanel.ui.ts +127 -0
  18. package/src/ui/iconButtonMenu.ui.ts +59 -0
  19. package/src/ui/index.ts +46 -2
  20. package/src/ui/loading.ui.ts +10 -0
  21. package/src/ui/menu.ui.ts +41 -47
  22. package/src/ui/progressbar.ui.ts +74 -0
  23. package/src/ui/radiobutton.ts +8 -0
  24. package/src/ui/scroll.ui.ts +184 -0
  25. package/src/ui/select.ui.ts +3 -0
  26. package/src/ui/styles/accordion.css +9 -0
  27. package/src/ui/styles/button.css +0 -3
  28. package/src/ui/styles/buttoncolor.css +8 -0
  29. package/src/ui/styles/datagrid.css +36 -0
  30. package/src/ui/styles/draggable.css +9 -0
  31. package/src/ui/styles/hpanel.css +12 -0
  32. package/src/ui/styles/loading.css +12 -0
  33. package/src/ui/styles/loading.svg +49 -0
  34. package/src/ui/styles/main.css +7 -0
  35. package/src/ui/styles/menu.css +0 -1
  36. package/src/ui/styles/progressbar.css +19 -0
  37. package/src/ui/styles/scroll.css +4 -0
  38. package/src/ui/styles/stackbutton.css +205 -0
  39. package/src/ui/styles/tabs.css +78 -0
  40. package/src/ui/styles/textarea.css +13 -0
  41. package/src/ui/styles/textbox.css +66 -0
  42. package/src/ui/styles/toolbar.css +19 -0
  43. package/src/ui/styles/valuebar.css +26 -0
  44. package/src/ui/styles/vpanel.css +12 -0
  45. package/src/ui/styles/vstackbutton.css +202 -0
  46. package/src/ui/switch.ui.ts +7 -0
  47. package/src/ui/tabs.ui.ts +182 -0
  48. package/src/ui/textarea.ui.ts +20 -0
  49. package/src/ui/textbox.ui.ts +9 -0
  50. package/src/ui/toggle.ui.ts +49 -0
  51. package/src/ui/toolbar.ui.ts +38 -10
  52. package/src/ui/valuebar.ui.ts +116 -0
  53. package/src/ui/vpanel.ui.ts +128 -0
  54. package/src/ui/widget.ui.ts +63 -4
package/src/ui/styles/scroll.css ADDED
@@ -0,0 +1,4 @@
1
+ .WUIScrollbar {
2
+ background-color: var(--palette-primary-dark);
3
+ border-radius: 5px;
4
+ }
package/src/ui/styles/stackbutton.css ADDED
@@ -0,0 +1,205 @@
1
+ /****************************************************************************/
2
+ /***********************************STACK-START******************************/
3
+ /****************************************************************************/
4
+
5
+ .WUIButton-stack-start {
6
+ cursor: pointer;
7
+ font-weight: 500;
8
+ text-align: center;
9
+ background-color: transparent;
10
+ border-left: solid 0.13rem;
11
+ border-top: solid 0.13rem;
12
+ border-bottom: solid 0.13rem;
13
+ border-right: none;
14
+ font-size: 1rem;
15
+ border-top-left-radius: 0.25rem;
16
+ border-bottom-left-radius: 0.25rem;
17
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
18
+ border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
19
+ text-transform: uppercase;
20
+ }
21
+
22
+ .WUIButton-stack-start-color-primary {
23
+ color: var(--palette-text-primary);
24
+ background-color: var(--palette-background-default);
25
+ border-color: var(--palette-divider);
26
+ }
27
+
28
+ .WUIButton-stack-start-color-primary:hover {
29
+ color: var(--palette-primary-text-light);
30
+ background-color: var(--palette-primary-light);
31
+ border-color: var(--palette-divider);
32
+ }
33
+
34
+ /****************************************************************************/
35
+ /***********************************STACK-MIDDLE******************************/
36
+ /****************************************************************************/
37
+
38
+ .WUIButton-stack-middle {
39
+ cursor: pointer;
40
+ font-weight: 500;
41
+ text-align: center;
42
+ background-color: transparent;
43
+ border-left: solid 0.13rem;
44
+ border-top: solid 0.13rem;
45
+ border-bottom: solid 0.13rem;
46
+ border-right: none;
47
+ font-size: 1rem;
48
+ border-top-left-radius: 0;
49
+ border-bottom-left-radius: 0;
50
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
51
+ border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
52
+ text-transform: uppercase;
53
+ }
54
+
55
+ .WUIButton-stack-middle-color-primary {
56
+ color: var(--palette-text-primary);
57
+ background-color: var(--palette-background-default);
58
+ border-color: var(--palette-divider);
59
+ }
60
+
61
+ .WUIButton-stack-middle-color-primary:hover {
62
+ color: var(--palette-primary-text-light);
63
+ background-color: var(--palette-primary-light);
64
+ border-color: var(--palette-divider);
65
+ }
66
+
67
+ /**************************************************************************/
68
+ /***********************************STACK-END******************************/
69
+ /**************************************************************************/
70
+
71
+ .WUIButton-stack-end {
72
+ cursor: pointer;
73
+ font-weight: 500;
74
+ text-align: center;
75
+ background-color: transparent;
76
+ border-left: solid 0.13rem;
77
+ border-right: solid 0.13rem;
78
+ border-top: solid 0.13rem;
79
+ border-bottom: solid 0.13rem;
80
+ font-size: 1rem;
81
+ border-top-left-radius: 0;
82
+ border-bottom-left-radius: 0;
83
+ border-top-right-radius: 0.25rem;
84
+ border-bottom-right-radius: 0.25rem;
85
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
86
+ border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
87
+ text-transform: uppercase;
88
+ }
89
+
90
+ .WUIButton-stack-end-color-primary {
91
+ color: var(--palette-text-primary);
92
+ background-color: var(--palette-background-default);
93
+ border-color: var(--palette-divider);
94
+ }
95
+
96
+ .WUIButton-stack-end-color-primary:hover {
97
+ color: var(--palette-primary-text-light);
98
+ background-color: var(--palette-primary-light);
99
+ border-color: var(--palette-divider);
100
+ }
101
+
102
+ /************************************************************************/
103
+ /******************************STACK-START-ACTIVE************************/
104
+ /************************************************************************/
105
+
106
+ .WUIButton-stack-start-active {
107
+ cursor: pointer;
108
+ font-weight: 500;
109
+ text-align: center;
110
+ color: var(--palette-primary-text-light);
111
+ background-color: var(--palette-primary-light);
112
+ border-left: solid 0.13rem;
113
+ border-top: solid 0.13rem;
114
+ border-bottom: solid 0.13rem;
115
+ border-right: none;
116
+ font-size: 1rem;
117
+ border-top-left-radius: 0.25rem;
118
+ border-bottom-left-radius: 0.25rem;
119
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
120
+ border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
121
+ text-transform: uppercase;
122
+ }
123
+
124
+ .WUIButton-stack-start-active-color-primary {
125
+ color: var(--palette-primary-text-light);
126
+ background-color: var(--palette-primary-dark);
127
+ border-color: var(--palette-divider);
128
+ }
129
+
130
+ .WUIButton-stack-start-active-color-primary:hover {
131
+ color: var(--palette-primary-text-light);
132
+ background-color: var(--palette-primary-light);
133
+ border-color: var(--palette-divider);
134
+ }
135
+
136
+ /*************************************************************************/
137
+ /**************************STACK-MIDDLE-ACTIVE****************************/
138
+ /*************************************************************************/
139
+
140
+ .WUIButton-stack-middle-active {
141
+ cursor: pointer;
142
+ font-weight: 500;
143
+ text-align: center;
144
+ color: var(--palette-primary-text-light);
145
+ background-color: var(--palette-primary-light);
146
+ border-left: solid 0.13rem;
147
+ border-top: solid 0.13rem;
148
+ border-bottom: solid 0.13rem;
149
+ border-right: none;
150
+ font-size: 1rem;
151
+ border-top-left-radius: 0;
152
+ border-bottom-left-radius: 0;
153
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
154
+ border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
155
+ text-transform: uppercase;
156
+ }
157
+
158
+ .WUIButton-stack-middle-active-color-primary {
159
+ color: var(--palette-primary-text-light);
160
+ background-color: var(--palette-primary-dark);
161
+ border-color: var(--palette-divider);
162
+ }
163
+
164
+ .WUIButton-stack-middle-active-color-primary:hover {
165
+ color: var(--palette-primary-text-light);
166
+ background-color: var(--palette-primary-light);
167
+ border-color: var(--palette-divider);
168
+ }
169
+
170
+ /**************************************************************************/
171
+ /********************************STACK-END-ACTIVE**************************/
172
+ /**************************************************************************/
173
+
174
+ .WUIButton-stack-end-active {
175
+ cursor: pointer;
176
+ font-weight: 500;
177
+ text-align: center;
178
+ color: var(--palette-primary-text-light);
179
+ background-color: var(--palette-primary-light);
180
+ border-left: solid 0.13rem;
181
+ border-right: solid 0.13rem;
182
+ border-top: solid 0.13rem;
183
+ border-bottom: solid 0.13rem;
184
+ border-right: solid 0.13rem;
185
+ font-size: 1rem;
186
+ border-top-left-radius: 0;
187
+ border-bottom-left-radius: 0;
188
+ border-top-right-radius: 0.25rem;
189
+ border-bottom-right-radius: 0.25rem;
190
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
191
+ border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
192
+ text-transform: uppercase;
193
+ }
194
+
195
+ .WUIButton-stack-end-active-color-primary {
196
+ color: var(--palette-primary-text-light);
197
+ background-color: var(--palette-primary-dark);
198
+ border-color: var(--palette-divider);
199
+ }
200
+
201
+ .WUIButton-stack-end-active-color-primary:hover {
202
+ color: var(--palette-primary-text-light);
203
+ background-color: var(--palette-primary-light);
204
+ border-color: var(--palette-divider);
205
+ }
package/src/ui/styles/tabs.css ADDED
@@ -0,0 +1,78 @@
1
+ .WUITab {
2
+ background-color: transparent;
3
+ border-left: solid 0.13rem;
4
+ border-top: solid 0.13rem;
5
+ border-bottom: solid 0.13rem;
6
+ border-right: solid 0.13rem;
7
+ border-radius: 0.25rem;
8
+ border-color: var(--palette-divider);
9
+ overflow: hidden;
10
+ }
11
+
12
+ .WUITabControl {
13
+ border-top: none !important;
14
+ border-left: none !important;
15
+ border-right: none !important;
16
+ border-bottom: none !important;
17
+ background-color: var(--palette-background-default);
18
+ box-sizing: border-box;
19
+ font-weight: normal;
20
+ text-align: center;
21
+ cursor: default;
22
+ padding-left: 15px;
23
+ padding-right: 15px;
24
+ border-radius: 0px !important;
25
+ }
26
+
27
+ .WUITabControlActive {
28
+ border-top: none !important;
29
+ border-left: none !important;
30
+ border-right: none !important;
31
+ border-bottom: solid 2px var(--palette-primary-dark) !important;
32
+ background-color: var(--palette-divider);
33
+ box-sizing: border-box;
34
+ font-weight: bold;
35
+ text-align: center;
36
+ cursor: default;
37
+ padding-left: 15px;
38
+ padding-right: 15px;
39
+ border-radius: 0px !important;
40
+ }
41
+
42
+ .WUITabContainer {
43
+ border-top: solid 1px var(--palette-divider);
44
+ }
45
+
46
+ .WUITabControlActive_VL {
47
+ border-top: none !important;
48
+ border-right: none !important;
49
+ border-left: solid 2px var(--palette-primary-dark) !important;
50
+ border-bottom: none !important;
51
+ background-color: var(--palette-divider);
52
+ box-sizing: border-box;
53
+ font-weight: bold;
54
+ text-align: center;
55
+ cursor: default;
56
+ padding-left: 15px;
57
+ padding-right: 15px;
58
+ border-radius: 0px !important;
59
+ }
60
+
61
+ .WUITabControlActiveIcon_VL {
62
+ border-top: none !important;
63
+ border-left: none !important;
64
+ border-right: solid 2px var(--palette-primary-dark) !important;
65
+ border-bottom: none !important;
66
+ background-color: var(--palette-divider);
67
+ box-sizing: border-box;
68
+ font-weight: bold;
69
+ text-align: center;
70
+ cursor: default;
71
+ padding-left: 15px;
72
+ padding-right: 15px;
73
+ border-radius: 0px !important;
74
+ }
75
+
76
+ .WUITabContainer_VL {
77
+ border-right: solid 1px var(--palette-divider);
78
+ }
package/src/ui/styles/textarea.css ADDED
@@ -0,0 +1,13 @@
1
+ .WUITextArea {
2
+ outline: none;
3
+ /*border-collapse: collapse;*/
4
+ border: 2px solid var(--palette-action-disabled);
5
+ border-radius: 4px;
6
+ box-sizing: border-box;
7
+ font-size: 1rem;
8
+ padding-left: 20px;
9
+ z-index: 1000;
10
+ background-color: var(--palette-background-default);
11
+ color: var(--palette-text-primary);
12
+ overflow-y: auto;
13
+ }
package/src/ui/styles/textbox.css CHANGED
@@ -1,3 +1,69 @@
1
+ /* NUMERIC INPUT */
2
+
3
+ input[type="number"] {
4
+ -moz-appearance: textfield; /* Firefox */
5
+ }
6
+
7
+ input::-webkit-outer-spin-button,
8
+ input::-webkit-inner-spin-button {
9
+ /* display: none; <- Crashes Chrome on hover */
10
+ -webkit-appearance: none;
11
+ margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
12
+ }
13
+
14
+ /* FILE INPUT */
15
+
16
+ input[type="file"]::file-selector-button {
17
+ margin-right: 0px;
18
+ border: none;
19
+ border-radius: 0.25rem;
20
+ background: var(--palette-primary-main);
21
+ height: 100%;
22
+ color: var(--palette-primary-text-main);
23
+ cursor: pointer;
24
+ transition: background 0.2s ease-in-out;
25
+ float: right;
26
+ }
27
+
28
+ input[type="file"]::file-selector-button:hover {
29
+ color: var(--palette-primary-text-dark);
30
+ background-color: var(--palette-primary-dark);
31
+ }
32
+
33
+ /* DATE INPUT */
34
+
35
+ ::-webkit-datetime-edit {
36
+ padding: 0em;
37
+ text-align: right;
38
+ }
39
+ ::-webkit-datetime-edit-fields-wrapper {
40
+ background: transparent;
41
+ }
42
+ ::-webkit-datetime-edit-text {
43
+ color: var(--palette-text-primary);
44
+ padding: 0 0.3em;
45
+ }
46
+ ::-webkit-datetime-edit-month-field {
47
+ color: var(--palette-text-primary);
48
+ }
49
+ ::-webkit-datetime-edit-day-field {
50
+ color: var(--palette-text-primary);
51
+ }
52
+ ::-webkit-datetime-edit-year-field {
53
+ color: var(--palette-text-primary);
54
+ }
55
+ ::-webkit-inner-spin-button {
56
+ display: none;
57
+ }
58
+ ::-webkit-calendar-picker-indicator {
59
+ padding-left: 10px;
60
+ padding-right: 10px;
61
+ background-color: transparent;
62
+ filter: invert(0.5);
63
+ }
64
+
65
+ /* TEXT INPUT */
66
+
1
67
  .WUIinput {
2
68
  position: relative;
3
69
  }
package/src/ui/styles/toolbar.css ADDED
@@ -0,0 +1,19 @@
1
+ .WUIToolbar-outlined {
2
+ background-color: transparent;
3
+ border-left: solid 0.13rem;
4
+ border-top: solid 0.13rem;
5
+ border-bottom: solid 0.13rem;
6
+ border-right: solid 0.13rem;
7
+ border-radius: 0.25rem;
8
+ border-color: var(--palette-divider);
9
+ overflow: hidden;
10
+ }
11
+
12
+ .WUIToolbar-contained {
13
+ background-color: transparent;
14
+ border-left: none;
15
+ border-top: none;
16
+ border-bottom: none;
17
+ border-right: none;
18
+ overflow: hidden;
19
+ }
package/src/ui/styles/valuebar.css ADDED
@@ -0,0 +1,26 @@
1
+ .WUIValueBar {
2
+ overflow: hidden;
3
+ }
4
+
5
+ .WUIValueBarContainer {
6
+ position: absolute;
7
+ left: 0px;
8
+ top: 0px;
9
+ border: solid 2px var(--palette-divider);
10
+ border-radius: 6px;
11
+ background-color: var(--palette-background-default);
12
+ }
13
+
14
+ .WUIValueBarBar {
15
+ position: absolute;
16
+ left: 0px;
17
+ top: 0px;
18
+ border-radius: 6px;
19
+ background-color: var(--palette-primary-dark);
20
+ }
21
+
22
+ .WUIValueBarHandler {
23
+ position: absolute;
24
+ border-radius: 50%;
25
+ background-color: var(--palette-primary-dark);
26
+ }
package/src/ui/styles/vpanel.css ADDED
@@ -0,0 +1,12 @@
1
+ .WUIVPanelHandler {
2
+ position: absolute;
3
+ overflow: hidden;
4
+ cursor: row-resize;
5
+ background-color: var(--palette-divider);
6
+ opacity: 0.1;
7
+ }
8
+
9
+ .WUIVPanelDragging {
10
+ background-color: var(--palette-divider) !important;
11
+ opacity: 1;
12
+ }
package/src/ui/styles/vstackbutton.css ADDED
@@ -0,0 +1,202 @@
1
+ /****************************************************************************/
2
+ /***********************************STACK-START******************************/
3
+ /****************************************************************************/
4
+
5
+ .WUIButton-stack-vertical-start {
6
+ cursor: pointer;
7
+ font-weight: 500;
8
+ text-align: center;
9
+ background-color: transparent;
10
+ border-left: solid 0.13rem;
11
+ border-top: solid 0.13rem;
12
+ border-right: solid 0.13rem;
13
+ border-bottom: none;
14
+ font-size: 1rem;
15
+ border-top-left-radius: 0.25rem;
16
+ border-top-right-radius: 0.25rem;
17
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
18
+ border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
19
+ text-transform: uppercase;
20
+ }
21
+
22
+ .WUIButton-stack-vertical-start-color-primary {
23
+ color: var(--palette-text-primary);
24
+ background-color: var(--palette-background-default);
25
+ border-color: var(--palette-primary-main);
26
+ }
27
+
28
+ .WUIButton-stack-vertical-start-color-primary:hover {
29
+ color: var(--palette-primary-text-light);
30
+ background-color: var(--palette-primary-light);
31
+ border-color: var(--palette-primary-main);
32
+ }
33
+
34
+ /****************************************************************************/
35
+ /***********************************STACK-MIDDLE******************************/
36
+ /****************************************************************************/
37
+
38
+ .WUIButton-stack-vertical-middle {
39
+ cursor: pointer;
40
+ font-weight: 500;
41
+ text-align: center;
42
+ background-color: transparent;
43
+ border-left: solid 0.13rem;
44
+ border-top: solid 0.13rem;
45
+ border-right: solid 0.13rem;
46
+ border-bottom: none;
47
+ font-size: 1rem;
48
+ border-radius: 0;
49
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
50
+ border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
51
+ text-transform: uppercase;
52
+ }
53
+
54
+ .WUIButton-stack-vertical-middle-color-primary {
55
+ color: var(--palette-text-primary);
56
+ background-color: var(--palette-background-default);
57
+ border-color: var(--palette-primary-main);
58
+ }
59
+
60
+ .WUIButton-stack-vertical-middle-color-primary:hover {
61
+ color: var(--palette-primary-text-light);
62
+ background-color: var(--palette-primary-light);
63
+ border-color: var(--palette-primary-main);
64
+ }
65
+
66
+ /**************************************************************************/
67
+ /***********************************STACK-END******************************/
68
+ /**************************************************************************/
69
+
70
+ .WUIButton-stack-vertical-end {
71
+ cursor: pointer;
72
+ font-weight: 500;
73
+ text-align: center;
74
+ background-color: transparent;
75
+ border-left: solid 0.13rem;
76
+ border-right: solid 0.13rem;
77
+ border-top: solid 0.13rem;
78
+ border-bottom: solid 0.13rem;
79
+ font-size: 1rem;
80
+ border-top-left-radius: 0;
81
+ border-bottom-left-radius: 0.25rem;
82
+ border-top-right-radius: 0;
83
+ border-bottom-right-radius: 0.25rem;
84
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
85
+ border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
86
+ text-transform: uppercase;
87
+ }
88
+
89
+ .WUIButton-stack-vertical-end-color-primary {
90
+ color: var(--palette-text-primary);
91
+ background-color: var(--palette-background-default);
92
+ border-color: var(--palette-primary-main);
93
+ }
94
+
95
+ .WUIButton-stack-vertical-end-color-primary:hover {
96
+ color: var(--palette-primary-text-light);
97
+ background-color: var(--palette-primary-light);
98
+ border-color: var(--palette-primary-main);
99
+ }
100
+
101
+ /************************************************************************/
102
+ /******************************STACK-START-ACTIVE************************/
103
+ /************************************************************************/
104
+
105
+ .WUIButton-stack-vertical-start-active {
106
+ cursor: pointer;
107
+ font-weight: 500;
108
+ text-align: center;
109
+ color: var(--palette-primary-text-light);
110
+ background-color: var(--palette-primary-light);
111
+ border-left: solid 0.13rem;
112
+ border-top: solid 0.13rem;
113
+ border-right: solid 0.13rem;
114
+ border-bottom: none;
115
+ font-size: 1rem;
116
+ border-top-left-radius: 0.25rem;
117
+ border-top-right-radius: 0.25rem;
118
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
119
+ border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
120
+ text-transform: uppercase;
121
+ }
122
+
123
+ .WUIButton-stack-vertical-start-active-color-primary {
124
+ color: var(--palette-primary-text-light);
125
+ background-color: var(--palette-primary-light);
126
+ border-color: var(--palette-primary-main);
127
+ }
128
+
129
+ .WUIButton-stack-vertical-start-active-color-primary:hover {
130
+ color: var(--palette-primary-text-light);
131
+ background-color: var(--palette-primary-light);
132
+ border-color: var(--palette-primary-main);
133
+ }
134
+
135
+ /*************************************************************************/
136
+ /**************************STACK-MIDDLE-ACTIVE****************************/
137
+ /*************************************************************************/
138
+
139
+ .WUIButton-stack-vertical-middle-active {
140
+ cursor: pointer;
141
+ font-weight: 500;
142
+ text-align: center;
143
+ color: var(--palette-primary-text-light);
144
+ background-color: var(--palette-primary-light);
145
+ border-left: solid 0.13rem;
146
+ border-top: solid 0.13rem;
147
+ border-right: solid 0.13rem;
148
+ border-bottom: none;
149
+ font-size: 1rem;
150
+ border-radius: 0;
151
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
152
+ border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
153
+ text-transform: uppercase;
154
+ }
155
+
156
+ .WUIButton-stack-vertical-middle-active-color-primary {
157
+ color: var(--palette-primary-text-light);
158
+ background-color: var(--palette-primary-light);
159
+ border-color: var(--palette-primary-main);
160
+ }
161
+
162
+ .WUIButton-stack-vertical-middle-active-color-primary:hover {
163
+ color: var(--palette-primary-text-light);
164
+ background-color: var(--palette-primary-light);
165
+ border-color: var(--palette-primary-main);
166
+ }
167
+
168
+ /**************************************************************************/
169
+ /********************************STACK-END-ACTIVE**************************/
170
+ /**************************************************************************/
171
+
172
+ .WUIButton-stack-vertical-end-active {
173
+ cursor: pointer;
174
+ font-weight: 500;
175
+ text-align: center;
176
+ color: var(--palette-primary-text-light);
177
+ background-color: var(--palette-primary-light);
178
+ border-left: solid 0.13rem;
179
+ border-right: solid 0.13rem;
180
+ border-top: solid 0.13rem;
181
+ border-bottom: solid 0.13rem;
182
+ font-size: 1rem;
183
+ border-top-left-radius: 0;
184
+ border-bottom-left-radius: 0.25rem;
185
+ border-top-right-radius: 0;
186
+ border-bottom-right-radius: 0.25rem;
187
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
188
+ border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
189
+ text-transform: uppercase;
190
+ }
191
+
192
+ .WUIButton-stack-vertical-end-active-color-primary {
193
+ color: var(--palette-primary-text-light);
194
+ background-color: var(--palette-primary-light);
195
+ border-color: var(--palette-primary-main);
196
+ }
197
+
198
+ .WUIButton-stack-vertical-end-active-color-primary:hover {
199
+ color: var(--palette-primary-text-light);
200
+ background-color: var(--palette-primary-light);
201
+ border-color: var(--palette-primary-main);
202
+ }
package/src/ui/switch.ui.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { ToggleButton } from "./toggle.ui";
2
+ import { Widget } from "./widget.ui";
3
+ export class Switch extends ToggleButton {
4
+ constructor(id: string, text: string = "", parent: Widget | null = null) {
5
+ super(id, text, "toggle_off", "toggle_on", parent);
6
+ }
7
+ }