@zohodesk/components 1.0.0-temp-208.2 → 1.0.0-temp-210

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 (53) hide show
  1. package/README.md +7 -1
  2. package/es/Avatar/Avatar.module.css +175 -175
  3. package/es/AvatarTeam/AvatarTeam.module.css +189 -189
  4. package/es/Button/css/Button.module.css +527 -527
  5. package/es/Buttongroup/Buttongroup.module.css +104 -104
  6. package/es/CheckBox/CheckBox.module.css +157 -157
  7. package/es/DateTime/DateTime.module.css +248 -248
  8. package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css +431 -431
  9. package/es/DropBox/css/DropBox.module.css +58 -58
  10. package/es/DropDown/DropDownHeading.module.css +53 -53
  11. package/es/DropDown/DropDownItem.module.css +94 -94
  12. package/es/Label/Label.module.css +57 -57
  13. package/es/ListItem/ListItem.module.css +205 -205
  14. package/es/PopOver/PopOver.module.css +8 -8
  15. package/es/Popup/Popup.js +96 -8
  16. package/es/Popup/props/propTypes.js +31 -0
  17. package/es/Radio/Radio.module.css +115 -115
  18. package/es/Ribbon/Ribbon.module.css +499 -499
  19. package/es/Switch/Switch.module.css +127 -127
  20. package/es/Tag/Tag.module.css +253 -253
  21. package/es/TextBox/TextBox.module.css +196 -196
  22. package/es/TextBoxIcon/TextBoxIcon.module.css +79 -79
  23. package/es/Textarea/Textarea.module.css +140 -140
  24. package/es/common/customscroll.module.css +141 -141
  25. package/es/v1/AppContainer/AppContainer.js +6 -0
  26. package/es/v1/Popup/Popup.js +96 -8
  27. package/lib/Avatar/Avatar.module.css +175 -175
  28. package/lib/AvatarTeam/AvatarTeam.module.css +189 -189
  29. package/lib/Button/css/Button.module.css +527 -527
  30. package/lib/Buttongroup/Buttongroup.module.css +104 -104
  31. package/lib/CheckBox/CheckBox.module.css +157 -157
  32. package/lib/DateTime/DateTime.module.css +248 -248
  33. package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css +431 -431
  34. package/lib/DropBox/css/DropBox.module.css +58 -58
  35. package/lib/DropDown/DropDownHeading.module.css +53 -53
  36. package/lib/DropDown/DropDownItem.module.css +94 -94
  37. package/lib/Label/Label.module.css +57 -57
  38. package/lib/ListItem/ListItem.module.css +205 -205
  39. package/lib/PopOver/PopOver.module.css +8 -8
  40. package/lib/Popup/Popup.js +105 -9
  41. package/lib/Popup/props/propTypes.js +44 -0
  42. package/lib/Radio/Radio.module.css +115 -115
  43. package/lib/Ribbon/Ribbon.module.css +499 -499
  44. package/lib/Switch/Switch.module.css +127 -127
  45. package/lib/Tag/Tag.module.css +253 -253
  46. package/lib/TextBox/TextBox.module.css +196 -196
  47. package/lib/TextBoxIcon/TextBoxIcon.module.css +79 -79
  48. package/lib/Textarea/Textarea.module.css +140 -140
  49. package/lib/common/customscroll.module.css +141 -141
  50. package/lib/v1/AppContainer/AppContainer.js +12 -0
  51. package/lib/v1/Popup/Popup.js +105 -9
  52. package/package.json +1 -1
  53. package/result.json +1 -1
package/lib/Buttongroup/Buttongroup.module.css CHANGED
@@ -1,105 +1,105 @@
1
- .varClass {
2
- /* button group default variables */
3
- --buttongroup_bg_color: var(--zdt_buttongroup_default_bg);
4
- --buttongroup_box_shadow: none;
5
- --buttongroup_padding: 0;
6
- --buttongroup_border_width: 0;
7
- --buttongroup_border_style: solid;
8
- --buttongroup_border_color: var(--zdt_buttongroup_default_border);
9
- }
10
-
11
- .buttonGroup {
12
- composes: varClass;
13
- composes: cboth from '../common/common.module.css';
14
- background-color: var(--buttongroup_bg_color);
15
- box-shadow: var(--buttongroup_box_shadow);
16
- padding: var(--buttongroup_padding);
17
- border-width: var(--buttongroup_border_width);
18
- border-style: var(--buttongroup_border_style);
19
- border-color: var(--buttongroup_border_color);
20
- }
21
-
22
- .footer {
23
- --buttongroup_box_shadow: var(--zd_bs_buttongroup_footer);
24
- }
25
-
26
- [dir=ltr] .footer {
27
- --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60);
28
- }
29
-
30
- [dir=rtl] .footer {
31
- --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60);
32
- }
33
-
34
- .header {
35
- --buttongroup_padding: var(--zd_size12) var(--zd_size20);
36
- --buttongroup_border_width: 0 0 1px 0;
37
- }
38
-
39
- [dir=ltr] .tab>div button:first-child {
40
- border-radius: 5px 0 0 5px;
41
- }
42
-
43
- [dir=rtl] .tab>div button:first-child {
44
- border-radius: 0 5px 5px 0;
45
- }
46
-
47
- [dir=ltr] .tab>div button:last-child {
48
- border-radius: 0 5px 5px 0;
49
- }
50
-
51
- [dir=rtl] .tab>div button:last-child {
52
- border-radius: 5px 0 0 5px;
53
- }
54
-
55
- .alignleft {
56
- composes: fleft from '../common/common.module.css';
57
- }
58
-
59
- .alignright {
60
- composes: fright from '../common/common.module.css';
61
- }
62
-
63
- .aligncenter {
64
- composes: tcenter from '../common/common.module.css';
65
- }
66
-
67
- [dir=ltr] .alignleft>button:first-child {
68
- margin-left: 0 ;
69
- }
70
-
71
- [dir=rtl] .alignleft>button:first-child {
72
- margin-right: 0 ;
73
- }
74
-
75
- [dir=ltr] .alignleft>button {
76
- margin-left: var(--zd_size15) ;
77
- }
78
-
79
- [dir=rtl] .alignleft>button {
80
- margin-right: var(--zd_size15) ;
81
- }
82
-
83
- [dir=ltr] .alignright>button:last-child {
84
- margin-right: 0 ;
85
- }
86
-
87
- [dir=rtl] .alignright>button:last-child {
88
- margin-left: 0 ;
89
- }
90
-
91
- [dir=ltr] .alignright>button {
92
- margin-right: var(--zd_size15) ;
93
- }
94
-
95
- [dir=rtl] .alignright>button {
96
- margin-left: var(--zd_size15) ;
97
- }
98
-
99
- [dir=ltr] .aligncenter>button {
100
- margin-right: var(--zd_size15) ;
101
- }
102
-
103
- [dir=rtl] .aligncenter>button {
104
- margin-left: var(--zd_size15) ;
1
+ .varClass {
2
+ /* button group default variables */
3
+ --buttongroup_bg_color: var(--zdt_buttongroup_default_bg);
4
+ --buttongroup_box_shadow: none;
5
+ --buttongroup_padding: 0;
6
+ --buttongroup_border_width: 0;
7
+ --buttongroup_border_style: solid;
8
+ --buttongroup_border_color: var(--zdt_buttongroup_default_border);
9
+ }
10
+
11
+ .buttonGroup {
12
+ composes: varClass;
13
+ composes: cboth from '../common/common.module.css';
14
+ background-color: var(--buttongroup_bg_color);
15
+ box-shadow: var(--buttongroup_box_shadow);
16
+ padding: var(--buttongroup_padding);
17
+ border-width: var(--buttongroup_border_width);
18
+ border-style: var(--buttongroup_border_style);
19
+ border-color: var(--buttongroup_border_color);
20
+ }
21
+
22
+ .footer {
23
+ --buttongroup_box_shadow: var(--zd_bs_buttongroup_footer);
24
+ }
25
+
26
+ [dir=ltr] .footer {
27
+ --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60);
28
+ }
29
+
30
+ [dir=rtl] .footer {
31
+ --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60);
32
+ }
33
+
34
+ .header {
35
+ --buttongroup_padding: var(--zd_size12) var(--zd_size20);
36
+ --buttongroup_border_width: 0 0 1px 0;
37
+ }
38
+
39
+ [dir=ltr] .tab>div button:first-child {
40
+ border-radius: 5px 0 0 5px;
41
+ }
42
+
43
+ [dir=rtl] .tab>div button:first-child {
44
+ border-radius: 0 5px 5px 0;
45
+ }
46
+
47
+ [dir=ltr] .tab>div button:last-child {
48
+ border-radius: 0 5px 5px 0;
49
+ }
50
+
51
+ [dir=rtl] .tab>div button:last-child {
52
+ border-radius: 5px 0 0 5px;
53
+ }
54
+
55
+ .alignleft {
56
+ composes: fleft from '../common/common.module.css';
57
+ }
58
+
59
+ .alignright {
60
+ composes: fright from '../common/common.module.css';
61
+ }
62
+
63
+ .aligncenter {
64
+ composes: tcenter from '../common/common.module.css';
65
+ }
66
+
67
+ [dir=ltr] .alignleft>button:first-child {
68
+ margin-left: 0 ;
69
+ }
70
+
71
+ [dir=rtl] .alignleft>button:first-child {
72
+ margin-right: 0 ;
73
+ }
74
+
75
+ [dir=ltr] .alignleft>button {
76
+ margin-left: var(--zd_size15) ;
77
+ }
78
+
79
+ [dir=rtl] .alignleft>button {
80
+ margin-right: var(--zd_size15) ;
81
+ }
82
+
83
+ [dir=ltr] .alignright>button:last-child {
84
+ margin-right: 0 ;
85
+ }
86
+
87
+ [dir=rtl] .alignright>button:last-child {
88
+ margin-left: 0 ;
89
+ }
90
+
91
+ [dir=ltr] .alignright>button {
92
+ margin-right: var(--zd_size15) ;
93
+ }
94
+
95
+ [dir=rtl] .alignright>button {
96
+ margin-left: var(--zd_size15) ;
97
+ }
98
+
99
+ [dir=ltr] .aligncenter>button {
100
+ margin-right: var(--zd_size15) ;
101
+ }
102
+
103
+ [dir=rtl] .aligncenter>button {
104
+ margin-left: var(--zd_size15) ;
105
105
  }
package/lib/CheckBox/CheckBox.module.css CHANGED
@@ -1,157 +1,157 @@
1
- .varClass {
2
- /* checkbox default variables */
3
- --checkbox_bg_color: var(--zdt_checkbox_default_bg);
4
- --checkbox_cursor: default;
5
- --checkbox_stroke_width: 2px;
6
- --checkbox_stroke_color: var(--zdt_checkbox_default_stroke_border);
7
-
8
- /* checkbox checked state default variables */
9
- --checkbox_checked_stroke_color: var(--zdt_checkbox_primary_stroke_border);
10
- --checkbox_checked_active_color: var(--zdt_checkbox_primary_stroke_border);
11
- }
12
- .container {
13
- composes: varClass;
14
- stroke: var(--checkbox_stroke_color);
15
- }
16
- .container, .pointer, .readonly {
17
- cursor: var(--checkbox_cursor);
18
- }
19
- .pointer {
20
- --checkbox_cursor: pointer;
21
- }
22
- .readonly {
23
- --checkbox_cursor: default;
24
- }
25
- .cbBox {
26
- fill: none;
27
- stroke-width: var(--checkbox_stroke_width);
28
- stroke-linecap: round;
29
- stroke: inherit;
30
- }
31
- .tickPath {
32
- composes: cbBox;
33
- stroke-dasharray: 40;
34
- }
35
- .boxContainer {
36
- composes: offSelection from '../common/common.module.css';
37
- border-radius: 2px;
38
- background-color: var(--checkbox_bg_color);
39
- }
40
- .filled {
41
- --checkbox_bg_color: inherit;
42
- }
43
- .medium {
44
- width: var(--zd_size16) ;
45
- height: var(--zd_size16) ;
46
- }
47
- .small {
48
- width: var(--zd_size13) ;
49
- height: var(--zd_size13) ;
50
- }
51
-
52
- .checkbox {
53
- position: relative;
54
- font-size: 0 ;
55
- display: block;
56
- }
57
- .tick {
58
- position: absolute;
59
- left: 0 ;
60
- }
61
- .mediumtick {
62
- top: calc( var(--zd_size2) * -1 ) ;
63
- height: var(--zd_size20) ;
64
- width: var(--zd_size20) ;
65
- }
66
- .smalltick {
67
- top: calc( var(--zd_size3) * -1 ) ;
68
- height: var(--zd_size18) ;
69
- width: var(--zd_size18) ;
70
- left: calc( var(--zd_size1) * -1 ) ;
71
- }
72
-
73
- .checkedtickPath {
74
- stroke-dashoffset: 40;
75
- }
76
-
77
- [dir=ltr] .checkedtickPath {
78
- animation: tickAnimate var(--zd_transition3) ease forwards;
79
- }
80
-
81
- [dir=rtl] .checkedtickPath {
82
- animation: tickAnimate var(--zd_transition3) ease forwards;
83
- }
84
- .linePath {
85
- transform-origin: center;
86
- }
87
- [dir=ltr] .linePath {
88
- animation: lineAnimate var(--zd_transition3) ease forwards;
89
- }
90
- [dir=rtl] .linePath {
91
- animation: lineAnimate var(--zd_transition3) ease forwards;
92
- }
93
- [dir=ltr] .text {
94
- margin-left: var(--zd_size6) ;
95
- }
96
- [dir=rtl] .text {
97
- margin-right: var(--zd_size6) ;
98
- }
99
-
100
- .checkedprimary,
101
- .checkeddanger {
102
- stroke: var(--checkbox_checked_stroke_color);
103
- }
104
- .primary:hover
105
- /* .primary:focus */
106
- {
107
- --checkbox_stroke_color: var(--zdt_checkbox_primary_stroke_border);
108
- }
109
- .checkedprimary {
110
- --checkbox_checked_stroke_color: var(--zdt_checkbox_primary_stroke_border);
111
- }
112
- .danger:hover
113
- /* .danger:focus */
114
- {
115
- --checkbox_stroke_color: var(--zdt_checkbox_danger_stroke_border);
116
- }
117
- .checkeddanger {
118
- --checkbox_checked_stroke_color: var(--zdt_checkbox_danger_stroke_border);
119
- }
120
-
121
- .checkedprimaryLabel,
122
- .checkeddangerLabel {
123
- color: var(--checkbox_checked_active_color);
124
- }
125
- .activeprimaryLabel:hover
126
- /* .activeprimaryLabel:focus */
127
- {
128
- --label_text_color: var(--zdt_checkbox_label_primary_text);
129
- }
130
- .checkedprimaryLabel {
131
- --checkbox_checked_active_color: var(--zdt_checkbox_primary_stroke_border);
132
- }
133
- .activedangerLabel:hover
134
- /* .activedangerLabel:focus */
135
- {
136
- --label_text_color: var(--zdt_checkbox_label_danger_text);
137
- }
138
- .checkeddangerLabel {
139
- --checkbox_checked_active_color: var(--zdt_checkbox_danger_stroke_border);
140
- }
141
- @keyframes tickAnimate {
142
- 0% {
143
- stroke-dashoffset: 40;
144
- }
145
- 100% {
146
- stroke-dashoffset: 0;
147
- }
148
- }
149
-
150
- @keyframes lineAnimate {
151
- 0% {
152
- transform: scaleX(0);
153
- }
154
- 100% {
155
- transform: scaleX(1);
156
- }
157
- }
1
+ .varClass {
2
+ /* checkbox default variables */
3
+ --checkbox_bg_color: var(--zdt_checkbox_default_bg);
4
+ --checkbox_cursor: default;
5
+ --checkbox_stroke_width: 2px;
6
+ --checkbox_stroke_color: var(--zdt_checkbox_default_stroke_border);
7
+
8
+ /* checkbox checked state default variables */
9
+ --checkbox_checked_stroke_color: var(--zdt_checkbox_primary_stroke_border);
10
+ --checkbox_checked_active_color: var(--zdt_checkbox_primary_stroke_border);
11
+ }
12
+ .container {
13
+ composes: varClass;
14
+ stroke: var(--checkbox_stroke_color);
15
+ }
16
+ .container, .pointer, .readonly {
17
+ cursor: var(--checkbox_cursor);
18
+ }
19
+ .pointer {
20
+ --checkbox_cursor: pointer;
21
+ }
22
+ .readonly {
23
+ --checkbox_cursor: default;
24
+ }
25
+ .cbBox {
26
+ fill: none;
27
+ stroke-width: var(--checkbox_stroke_width);
28
+ stroke-linecap: round;
29
+ stroke: inherit;
30
+ }
31
+ .tickPath {
32
+ composes: cbBox;
33
+ stroke-dasharray: 40;
34
+ }
35
+ .boxContainer {
36
+ composes: offSelection from '../common/common.module.css';
37
+ border-radius: 2px;
38
+ background-color: var(--checkbox_bg_color);
39
+ }
40
+ .filled {
41
+ --checkbox_bg_color: inherit;
42
+ }
43
+ .medium {
44
+ width: var(--zd_size16) ;
45
+ height: var(--zd_size16) ;
46
+ }
47
+ .small {
48
+ width: var(--zd_size13) ;
49
+ height: var(--zd_size13) ;
50
+ }
51
+
52
+ .checkbox {
53
+ position: relative;
54
+ font-size: 0 ;
55
+ display: block;
56
+ }
57
+ .tick {
58
+ position: absolute;
59
+ left: 0 ;
60
+ }
61
+ .mediumtick {
62
+ top: calc( var(--zd_size2) * -1 ) ;
63
+ height: var(--zd_size20) ;
64
+ width: var(--zd_size20) ;
65
+ }
66
+ .smalltick {
67
+ top: calc( var(--zd_size3) * -1 ) ;
68
+ height: var(--zd_size18) ;
69
+ width: var(--zd_size18) ;
70
+ left: calc( var(--zd_size1) * -1 ) ;
71
+ }
72
+
73
+ .checkedtickPath {
74
+ stroke-dashoffset: 40;
75
+ }
76
+
77
+ [dir=ltr] .checkedtickPath {
78
+ animation: tickAnimate var(--zd_transition3) ease forwards;
79
+ }
80
+
81
+ [dir=rtl] .checkedtickPath {
82
+ animation: tickAnimate var(--zd_transition3) ease forwards;
83
+ }
84
+ .linePath {
85
+ transform-origin: center;
86
+ }
87
+ [dir=ltr] .linePath {
88
+ animation: lineAnimate var(--zd_transition3) ease forwards;
89
+ }
90
+ [dir=rtl] .linePath {
91
+ animation: lineAnimate var(--zd_transition3) ease forwards;
92
+ }
93
+ [dir=ltr] .text {
94
+ margin-left: var(--zd_size6) ;
95
+ }
96
+ [dir=rtl] .text {
97
+ margin-right: var(--zd_size6) ;
98
+ }
99
+
100
+ .checkedprimary,
101
+ .checkeddanger {
102
+ stroke: var(--checkbox_checked_stroke_color);
103
+ }
104
+ .primary:hover
105
+ /* .primary:focus */
106
+ {
107
+ --checkbox_stroke_color: var(--zdt_checkbox_primary_stroke_border);
108
+ }
109
+ .checkedprimary {
110
+ --checkbox_checked_stroke_color: var(--zdt_checkbox_primary_stroke_border);
111
+ }
112
+ .danger:hover
113
+ /* .danger:focus */
114
+ {
115
+ --checkbox_stroke_color: var(--zdt_checkbox_danger_stroke_border);
116
+ }
117
+ .checkeddanger {
118
+ --checkbox_checked_stroke_color: var(--zdt_checkbox_danger_stroke_border);
119
+ }
120
+
121
+ .checkedprimaryLabel,
122
+ .checkeddangerLabel {
123
+ color: var(--checkbox_checked_active_color);
124
+ }
125
+ .activeprimaryLabel:hover
126
+ /* .activeprimaryLabel:focus */
127
+ {
128
+ --label_text_color: var(--zdt_checkbox_label_primary_text);
129
+ }
130
+ .checkedprimaryLabel {
131
+ --checkbox_checked_active_color: var(--zdt_checkbox_primary_stroke_border);
132
+ }
133
+ .activedangerLabel:hover
134
+ /* .activedangerLabel:focus */
135
+ {
136
+ --label_text_color: var(--zdt_checkbox_label_danger_text);
137
+ }
138
+ .checkeddangerLabel {
139
+ --checkbox_checked_active_color: var(--zdt_checkbox_danger_stroke_border);
140
+ }
141
+ @keyframes tickAnimate {
142
+ 0% {
143
+ stroke-dashoffset: 40;
144
+ }
145
+ 100% {
146
+ stroke-dashoffset: 0;
147
+ }
148
+ }
149
+
150
+ @keyframes lineAnimate {
151
+ 0% {
152
+ transform: scaleX(0);
153
+ }
154
+ 100% {
155
+ transform: scaleX(1);
156
+ }
157
+ }