@zohodesk/components 1.0.0-temp-217.2 → 1.0.0-temp-219

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.
@@ -1,229 +0,0 @@
1
- .switchWrapper {
2
- position: relative;
3
- display: inline-flex;
4
- align-items: center;
5
- }
6
- .switchWrapper *, .switchWrapper:hover * {
7
- cursor: pointer;
8
- }
9
- .disabled {
10
- opacity: 0.4;
11
- pointer-events: none;
12
- cursor: not-allowed;
13
- }
14
- .track {
15
- width: var(--switch-track-width);
16
- height: var(--switch-track-height);
17
- appearance: none;
18
- /* css:theme-validation:ignore */
19
- transition: background-color 0.3s ease-in-out;
20
- border-radius: 10px;
21
- background-color: var(--dot_paleBlue);
22
- margin: 0 ;
23
- }
24
- .thumb {
25
- width: var(--switch-thumb-size);
26
- height: var(--switch-thumb-size);
27
- /* css:theme-validation:ignore */
28
- position: absolute;
29
- pointer-events: none;
30
- z-index: 1;
31
- top: var(--zd_size2) ;
32
- bottom: var(--zd_size2) ;
33
- transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
34
- border-radius: 50%;
35
- background-color: var(--dot_white);
36
- }
37
- [dir=ltr] .thumb {
38
- left: var(--zd_size2) ;
39
- }
40
- [dir=rtl] .thumb {
41
- right: var(--zd_size2) ;
42
- }
43
- .track:checked {
44
- /* css:theme-validation:ignore */
45
- background-color: var(--dot_strongGreen);
46
- }
47
- [dir=ltr] .track:checked + .thumb {
48
- transform: translateX(calc(var(--switch-track-width) - var(--switch-thumb-size) - 4px));
49
- }
50
- [dir=rtl] .track:checked + .thumb {
51
- transform: translateX(calc(-1*(var(--switch-track-width) - var(--switch-thumb-size) - 4px)));
52
- }
53
- .switchWrapper:hover .track {
54
- /* css:theme-validation:ignore */
55
- background-color: var(--dot_paleNavy);
56
- }
57
- .switchWrapper:hover .track:checked {
58
- /* css:theme-validation:ignore */
59
- background-color: var(--dot_camarone);
60
- }
61
- .effect:hover .offLabelWrapper > .offLabel {
62
- stroke: var(--dot_black);
63
- }
64
- .small_switch {
65
- --switch-track-width: var(--zd_size22);
66
- --switch-track-height: var(--zd_size12);
67
- --switch-thumb-size: var(--zd_size8);
68
- /* --switch-off-label-size: 7px;
69
- --switch-off-label-radius: 2.5px;
70
- --switch-off-label-top: 2.5px;
71
- --switch-off-label-right: 3px;
72
- --switch-off-label-stroke: 1px;
73
- --switch-on-label-width: 1.2px;
74
- --switch-on-label-height: 6px;
75
- --switch-on-label-top: 3px;
76
- --switch-on-label-left: 5px; */
77
- }
78
-
79
- .medium_switch {
80
- --switch-track-width: var(--zd_size28);
81
- --switch-track-height: var(--zd_size16);
82
- --switch-thumb-size: var(--zd_size12);
83
- /* --switch-off-label-size: 8px;
84
- --switch-off-label-radius: 3px;
85
- --switch-off-label-top: 4px;
86
- --switch-off-label-right: 3.5px;
87
- --switch-off-label-stroke: 1.1px;
88
- --switch-on-label-width: 1.4px;
89
- --switch-on-label-height: 8px;
90
- --switch-on-label-top: 4px;
91
- --switch-on-label-left: 6px; */
92
- }
93
-
94
- .large_switch {
95
- --switch-track-width: var(--zd_size34);
96
- --switch-track-height: var(--zd_size20);
97
- --switch-thumb-size: var(--zd_size16);
98
- /* --switch-off-label-size: 9px;
99
- --switch-off-label-radius: 3.5px;
100
- --switch-off-label-top: 5.5px;
101
- --switch-off-label-right: 4px;
102
- --switch-off-label-stroke: 1.2px;
103
- --switch-on-label-width: 1.6px;
104
- --switch-on-label-height: 11px;
105
- --switch-on-label-top: 4.5px;
106
- --switch-on-label-left: 7px; */
107
- }
108
- [dir=ltr] .switchLabel_right {
109
- margin-right: var(--zd_size12) ;
110
- }
111
- [dir=rtl] .switchLabel_right {
112
- margin-left: var(--zd_size12) ;
113
- }
114
- [dir=ltr] .switchLabel_left {
115
- margin-left: var(--zd_size12) ;
116
- }
117
- [dir=rtl] .switchLabel_left {
118
- margin-right: var(--zd_size12) ;
119
- }
120
- /* .offLabelWrapper,
121
- .onLabelWrapper {
122
- position: absolute;
123
- pointer-events: none;
124
- }
125
- .offLabelWrapper {
126
- width: var(--switch-off-label-size);
127
- height: var(--switch-off-label-size);
128
- top: var(--switch-off-label-top);
129
- right: var(--switch-off-label-right);
130
- }
131
- .onLabelWrapper {
132
- width: var(--switch-on-label-width);
133
- height: var(--switch-on-label-height);
134
- top: var(--switch-on-label-top);
135
- left: var(--switch-on-label-left);
136
- } */
137
- .labelWrapper {
138
- position: absolute;
139
- pointer-events: none;
140
- }
141
- .smallOnLabelWrapper {
142
- width: 1.2px;
143
- height: var(--zd_size6) ;
144
- top: var(--zd_size3) ;
145
- }
146
- [dir=ltr] .smallOnLabelWrapper {
147
- left: var(--zd_size5) ;
148
- }
149
- [dir=rtl] .smallOnLabelWrapper {
150
- right: var(--zd_size5) ;
151
- }
152
- .mediumOnLabelWrapper {
153
- width: 1.4px;
154
- height: var(--zd_size8) ;
155
- top: var(--zd_size4) ;
156
- }
157
- [dir=ltr] .mediumOnLabelWrapper {
158
- left: var(--zd_size6) ;
159
- }
160
- [dir=rtl] .mediumOnLabelWrapper {
161
- right: var(--zd_size6) ;
162
- }
163
- .largeOnLabelWrapper {
164
- width: 1.6px;
165
- height: var(--zd_size11) ;
166
- top: 4.5px;
167
- }
168
- [dir=ltr] .largeOnLabelWrapper {
169
- left: var(--zd_size7) ;
170
- }
171
- [dir=rtl] .largeOnLabelWrapper {
172
- right: var(--zd_size7) ;
173
- }
174
- .smallOffLabelWrapper {
175
- width: var(--zd_size7) ;
176
- height: var(--zd_size7) ;
177
- top: 2.5px;
178
- }
179
- [dir=ltr] .smallOffLabelWrapper {
180
- right: var(--zd_size3) ;
181
- }
182
- [dir=rtl] .smallOffLabelWrapper {
183
- left: var(--zd_size3) ;
184
- }
185
- .mediumOffLabelWrapper {
186
- width: var(--zd_size8) ;
187
- height: var(--zd_size8) ;
188
- top: var(--zd_size4) ;
189
- }
190
- [dir=ltr] .mediumOffLabelWrapper {
191
- right: 3.5px;
192
- }
193
- [dir=rtl] .mediumOffLabelWrapper {
194
- left: 3.5px;
195
- }
196
- .largeOffLabelWrapper {
197
- width: var(--zd_size9) ;
198
- height: var(--zd_size9) ;
199
- top: 5.5px;
200
- }
201
- [dir=ltr] .largeOffLabelWrapper {
202
- right: var(--zd_size4) ;
203
- }
204
- [dir=rtl] .largeOffLabelWrapper {
205
- left: var(--zd_size4) ;
206
- }
207
-
208
- .offLabel {
209
- stroke: var(--dot_shuttleGrey);
210
- /* stroke-width: var(--switch-off-label-stroke); */
211
- /* r: var(--switch-off-label-radius); */
212
- fill: none;
213
- }
214
- .smallOffLabelWrapper .offLabel {
215
- stroke-width: 1px;
216
- r: 2.5px;
217
- }
218
- .mediumOffLabelWrapper .offLabel {
219
- stroke-width: 1.1px;
220
- r: 3px;
221
- }
222
- .largeOffLabelWrapper .offLabel {
223
- stroke-width: 1.2px;
224
- r: 3.5px;
225
- }
226
-
227
- .onLabel {
228
- fill: var(--dot_white);
229
- }
@@ -1,16 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.defaultProps = void 0;
7
- var defaultProps = {
8
- checked: false,
9
- disabled: false,
10
- isReadOnly: false,
11
- size: 'medium',
12
- dataSelectorId: 'switch',
13
- labelSize: 'medium',
14
- labelPlacement: 'right'
15
- };
16
- exports.defaultProps = defaultProps;
@@ -1,43 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.propTypes = void 0;
7
-
8
- var _propTypes = _interopRequireDefault(require("prop-types"));
9
-
10
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
11
-
12
- var propTypes = {
13
- id: _propTypes["default"].string,
14
- title: _propTypes["default"].string,
15
- name: _propTypes["default"].string,
16
- value: _propTypes["default"].bool,
17
- checked: _propTypes["default"].bool,
18
- disabled: _propTypes["default"].bool,
19
- isReadOnly: _propTypes["default"].bool,
20
- size: _propTypes["default"].oneOf(['small', 'medium', 'large']),
21
- text: _propTypes["default"].string,
22
- disableTitle: _propTypes["default"].string,
23
- dataId: _propTypes["default"].string,
24
- onChange: _propTypes["default"].func,
25
- dataSelectorId: _propTypes["default"].string,
26
- customClass: _propTypes["default"].shape({
27
- customSwitchWrap: _propTypes["default"].string,
28
- customSwitch: _propTypes["default"].string,
29
- customLabel: _propTypes["default"].string
30
- }),
31
- customProps: _propTypes["default"].shape({
32
- SwitchProps: _propTypes["default"].shape({
33
- WrapperProps: _propTypes["default"].object,
34
- TrackProps: _propTypes["default"].object
35
- }),
36
- LabelProps: _propTypes["default"].object
37
- }),
38
- labelPalette: _propTypes["default"].oneOf[("default", "primary", "secondary", "danger", "mandatory", "disable", "dark")],
39
- labelSize: _propTypes["default"].oneOf(['xsmall', 'small', 'medium', 'large']),
40
- labelPlacement: _propTypes["default"].string,
41
- a11y: _propTypes["default"].object
42
- };
43
- exports.propTypes = propTypes;