@zohodesk/components 1.0.0-temp-667 → 1.0.0-temp-999

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 (266) hide show
  1. package/README.md +7 -0
  2. package/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css +1 -1
  3. package/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css +1 -1
  4. package/assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css +1 -1
  5. package/assets/Appearance/default/themes/red/redDefaultCTATheme.module.css +1 -1
  6. package/assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css +1 -1
  7. package/es/AppContainer/AppContainer.js +1 -1
  8. package/es/Avatar/Avatar.js +1 -1
  9. package/es/Avatar/Avatar.module.css +9 -11
  10. package/es/AvatarTeam/AvatarTeam.js +1 -1
  11. package/es/AvatarTeam/AvatarTeam.module.css +7 -21
  12. package/es/Button/Button.module.css +24 -97
  13. package/es/Buttongroup/Buttongroup.module.css +8 -37
  14. package/es/CheckBox/CheckBox.js +1 -1
  15. package/es/CheckBox/CheckBox.module.css +19 -29
  16. package/es/DateTime/DateTime.module.css +12 -39
  17. package/es/DateTime/DateWidget.module.css +5 -9
  18. package/es/DateTime/YearView.module.css +7 -17
  19. package/es/DropBox/DropBox.js +1 -1
  20. package/es/DropBox/DropBox.module.css +11 -47
  21. package/es/DropDown/DropDownHeading.module.css +3 -7
  22. package/es/DropDown/DropDownItem.module.css +6 -32
  23. package/es/ListItem/ListContainer.js +1 -1
  24. package/es/ListItem/ListItem.js +1 -1
  25. package/es/ListItem/ListItem.module.css +33 -69
  26. package/es/ListItem/ListItemWithAvatar.js +1 -1
  27. package/es/ListItem/ListItemWithCheckBox.js +1 -1
  28. package/es/ListItem/ListItemWithIcon.js +1 -1
  29. package/es/ListItem/ListItemWithRadio.js +1 -1
  30. package/es/Modal/Modal.js +1 -1
  31. package/es/MultiSelect/AdvancedMultiSelect.js +1 -1
  32. package/es/MultiSelect/AdvancedMultiSelect.module.css +113 -0
  33. package/es/MultiSelect/MultiSelect.module.css +11 -28
  34. package/es/MultiSelect/SelectedOptions.js +1 -1
  35. package/es/MultiSelect/SelectedOptions.module.css +2 -8
  36. package/es/MultiSelect/Suggestions.js +1 -1
  37. package/es/PopOver/PopOver.module.css +1 -1
  38. package/es/Popup/Popup.js +1 -1
  39. package/es/Radio/Radio.module.css +10 -18
  40. package/es/Responsive/ResizeComponent.js +82 -15
  41. package/es/Responsive/ResizeObserver.js +6 -2
  42. package/es/Responsive/docs/style.module.css +8 -17
  43. package/es/ResponsiveDropBox/ResponsiveDropBox.js +1 -1
  44. package/es/Ribbon/Ribbon.module.css +28 -93
  45. package/es/RippleEffect/RippleEffect.module.css +44 -37
  46. package/es/Select/Select.js +8 -30
  47. package/es/Select/Select.module.css +2 -12
  48. package/es/Select/docs/Select__default.docs.js +1 -1
  49. package/es/Stencils/Stencils.module.css +3 -21
  50. package/es/Switch/Switch.js +1 -1
  51. package/es/Switch/Switch.module.css +9 -9
  52. package/es/Tab/Tab.js +1 -1
  53. package/es/Tab/Tab.module.css +7 -16
  54. package/es/Tab/TabWrapper.js +1 -1
  55. package/es/Tab/Tabs.js +1 -1
  56. package/es/Tab/Tabs.module.css +8 -42
  57. package/es/Tab/docs/tabdocs.module.css +1 -1
  58. package/es/Tag/Tag.module.css +14 -36
  59. package/es/TextBox/TextBox.js +1 -1
  60. package/es/TextBox/TextBox.module.css +11 -7
  61. package/es/TextBoxIcon/TextBoxIcon.js +1 -1
  62. package/es/TextBoxIcon/TextBoxIcon.module.css +5 -12
  63. package/es/Textarea/Textarea.js +1 -1
  64. package/es/Textarea/Textarea.module.css +7 -6
  65. package/es/Tooltip/Tooltip.module.css +8 -9
  66. package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +1 -1
  67. package/es/beta/FocusRing/FocusRing.module.css +26 -51
  68. package/es/common/animation.module.css +21 -219
  69. package/es/common/basicReset.module.css +12 -2
  70. package/es/common/common.module.css +18 -62
  71. package/es/common/customscroll.module.css +21 -17
  72. package/es/common/docStyle.module.css +32 -79
  73. package/es/common/transition.module.css +10 -50
  74. package/es/deprecated/AdvancedMultiSelect.module.css +8 -22
  75. package/es/semantic/Button/semanticButton.module.css +3 -3
  76. package/lib/Accordion/Accordion.js +2 -2
  77. package/lib/Accordion/AccordionItem.js +2 -2
  78. package/lib/Accordion/docs/Accordion__Demo.docs.js +2 -2
  79. package/lib/Animation/Animation.js +2 -2
  80. package/lib/Animation/docs/Animation__default.docs.js +2 -2
  81. package/lib/Animation/docs/Animation__fadeIn.docs.js +2 -2
  82. package/lib/Animation/docs/Animation__scaleIn.docs.js +2 -2
  83. package/lib/Animation/docs/Animation__skewIn.docs.js +2 -2
  84. package/lib/Animation/docs/Animation__slideDown.docs.js +2 -2
  85. package/lib/Animation/docs/Animation__slideLeft.docs.js +2 -2
  86. package/lib/Animation/docs/Animation__zoomIn.docs.js +2 -2
  87. package/lib/AppContainer/AppContainer.js +4 -11
  88. package/lib/AppContainer/docs/AppContainer__default.docs.js +2 -2
  89. package/lib/Avatar/Avatar.js +3 -3
  90. package/lib/Avatar/docs/Avatar__custom.docs.js +2 -2
  91. package/lib/Avatar/docs/Avatar__default.docs.js +2 -2
  92. package/lib/Avatar/docs/Avatar__palette.docs.js +2 -2
  93. package/lib/Avatar/docs/Avatar__text.docs.js +2 -2
  94. package/lib/AvatarTeam/AvatarTeam.js +3 -3
  95. package/lib/AvatarTeam/docs/AvatarTeam__custom.docs.js +2 -2
  96. package/lib/AvatarTeam/docs/AvatarTeam__default.docs.js +2 -2
  97. package/lib/AvatarTeam/docs/AvatarTeam__palette.docs.js +2 -2
  98. package/lib/AvatarTeam/docs/AvatarTeam__size.docs.js +2 -2
  99. package/lib/Button/Button.js +2 -2
  100. package/lib/Button/docs/Button__custom.docs.js +2 -2
  101. package/lib/Button/docs/Button__default.docs.js +2 -2
  102. package/lib/Buttongroup/Buttongroup.js +2 -2
  103. package/lib/Buttongroup/docs/Buttongroup__custom.docs.js +2 -2
  104. package/lib/Buttongroup/docs/Buttongroup__footer.docs.js +2 -2
  105. package/lib/Buttongroup/docs/Buttongroup__header.docs.js +2 -2
  106. package/lib/Card/Card.js +2 -2
  107. package/lib/Card/docs/Card__Custom.docs.js +2 -2
  108. package/lib/Card/docs/Card__Default.docs.js +2 -2
  109. package/lib/Card/docs/Card__Scroll.docs.js +2 -2
  110. package/lib/CheckBox/CheckBox.js +4 -5
  111. package/lib/CheckBox/CheckBox.module.css +8 -12
  112. package/lib/CheckBox/docs/CheckBox__custom.docs.js +2 -2
  113. package/lib/CheckBox/docs/CheckBox__default.docs.js +2 -2
  114. package/lib/DateTime/CalendarView.js +2 -2
  115. package/lib/DateTime/DateTime.js +22 -50
  116. package/lib/DateTime/DateTime.module.css +1 -1
  117. package/lib/DateTime/DateTimePopupFooter.js +2 -2
  118. package/lib/DateTime/DateTimePopupHeader.js +2 -2
  119. package/lib/DateTime/DateWidget.js +4 -14
  120. package/lib/DateTime/DateWidget.module.css +4 -0
  121. package/lib/DateTime/DaysRow.js +2 -2
  122. package/lib/DateTime/Time.js +2 -2
  123. package/lib/DateTime/YearView.js +2 -2
  124. package/lib/DateTime/YearView.module.css +0 -1
  125. package/lib/DateTime/docs/DateTime__default.docs.js +2 -2
  126. package/lib/DateTime/docs/DateWidget__default.docs.js +2 -2
  127. package/lib/DropBox/DropBox.js +4 -4
  128. package/lib/DropBox/docs/DropBox__custom.docs.js +2 -2
  129. package/lib/DropBox/docs/DropBox__customOrder.docs.js +2 -2
  130. package/lib/DropBox/docs/DropBox__fixedPosition.docs.js +2 -2
  131. package/lib/DropBox/docs/DropBox__position.docs.js +2 -2
  132. package/lib/DropBox/docs/DropBox__size.docs.js +2 -2
  133. package/lib/DropDown/DropDown.js +2 -2
  134. package/lib/DropDown/DropDownHeading.js +2 -2
  135. package/lib/DropDown/DropDownItem.js +2 -2
  136. package/lib/DropDown/DropDownSearch.js +2 -2
  137. package/lib/DropDown/DropDownSeparator.js +2 -2
  138. package/lib/DropDown/docs/DropDownHeading__custom.docs.js +2 -2
  139. package/lib/DropDown/docs/DropDownHeading__default.docs.js +2 -2
  140. package/lib/Label/Label.js +2 -2
  141. package/lib/Label/docs/Label__clipped.docs.js +2 -2
  142. package/lib/Label/docs/Label__custom.docs.js +2 -2
  143. package/lib/Label/docs/Label__palette.docs.js +2 -2
  144. package/lib/Label/docs/Label__size.docs.js +2 -2
  145. package/lib/Label/docs/Label__type.docs.js +2 -2
  146. package/lib/Layout/docs/Layout__Hidden.docs.js +2 -2
  147. package/lib/Layout/docs/Layout__default.docs.js +2 -2
  148. package/lib/Layout/docs/Layout__four_Column.docs.js +2 -2
  149. package/lib/Layout/docs/Layout__three_Column.docs.js +2 -2
  150. package/lib/Layout/docs/Layout__two_Column.docs.js +2 -2
  151. package/lib/LightNightMode/Colors.json +397 -496
  152. package/lib/LightNightMode/docs/AlternativeColors.docs.js +3 -25
  153. package/lib/ListItem/ListContainer.js +5 -8
  154. package/lib/ListItem/ListItem.js +4 -4
  155. package/lib/ListItem/ListItem.module.css +19 -18
  156. package/lib/ListItem/ListItemWithAvatar.js +4 -4
  157. package/lib/ListItem/ListItemWithCheckBox.js +4 -4
  158. package/lib/ListItem/ListItemWithIcon.js +4 -4
  159. package/lib/ListItem/ListItemWithRadio.js +4 -4
  160. package/lib/ListItem/docs/ListItemWithAvatar__custom.docs.js +2 -2
  161. package/lib/ListItem/docs/ListItemWithAvatar__default.docs.js +2 -2
  162. package/lib/ListItem/docs/ListItemWithCheckBox__custom.docs.js +2 -2
  163. package/lib/ListItem/docs/ListItemWithCheckBox__default.docs.js +2 -2
  164. package/lib/ListItem/docs/ListItemWithIcon__custom.docs.js +2 -2
  165. package/lib/ListItem/docs/ListItemWithIcon__default.docs.js +2 -2
  166. package/lib/ListItem/docs/ListItemWithRadio__custom.docs.js +2 -2
  167. package/lib/ListItem/docs/ListItemWithRadio__default.docs.js +2 -2
  168. package/lib/ListItem/docs/ListItem__custom.docs.js +2 -2
  169. package/lib/ListItem/docs/ListItem__default.docs.js +2 -2
  170. package/lib/Modal/Modal.js +3 -3
  171. package/lib/Modal/__docs__/Modal__default.docs.js +2 -2
  172. package/lib/MultiSelect/AdvancedGroupMultiSelect.js +88 -120
  173. package/lib/MultiSelect/AdvancedMultiSelect.js +62 -99
  174. package/lib/{deprecated → MultiSelect}/AdvancedMultiSelect.module.css +1 -1
  175. package/lib/MultiSelect/EmptyState.js +2 -2
  176. package/lib/MultiSelect/MultiSelect.js +64 -90
  177. package/lib/MultiSelect/MultiSelect.module.css +2 -15
  178. package/lib/MultiSelect/MultiSelectHeader.js +2 -2
  179. package/lib/MultiSelect/MultiSelectWithAvatar.js +55 -80
  180. package/lib/MultiSelect/SelectedOptions.js +3 -3
  181. package/lib/MultiSelect/Suggestions.js +3 -3
  182. package/lib/MultiSelect/docs/AdvancedGroupMultiSelect__default.docs.js +2 -2
  183. package/lib/MultiSelect/docs/AdvancedMultiSelect__default.docs.js +2 -2
  184. package/lib/MultiSelect/docs/MultiSelectWithAvatar__default.docs.js +2 -2
  185. package/lib/MultiSelect/docs/MultiSelect__default.docs.js +2 -2
  186. package/lib/PopOver/PopOver.js +6 -13
  187. package/lib/PopOver/docs/PopOver__default.docs.js +2 -2
  188. package/lib/Popup/Popup.js +3 -3
  189. package/lib/Popup/__tests__/Popup.spec.js +2 -2
  190. package/lib/Provider/Config.js +1 -3
  191. package/lib/Provider/docs/Provider_Id__Class.docs.js +2 -2
  192. package/lib/Provider/docs/Provider_Zindex__Class.docs.js +2 -2
  193. package/lib/Provider.js +100 -34
  194. package/lib/Radio/Radio.js +2 -2
  195. package/lib/Radio/Radio.module.css +6 -8
  196. package/lib/Radio/docs/Radio__custom.docs.js +2 -2
  197. package/lib/Radio/docs/Radio__default.docs.js +2 -2
  198. package/lib/Responsive/ResizeComponent.js +2 -2
  199. package/lib/Responsive/Responsive.js +2 -2
  200. package/lib/Responsive/docs/Responsive__Custom.docs.js +2 -2
  201. package/lib/Responsive/docs/Responsive__default.docs.js +2 -2
  202. package/lib/Responsive/sizeObservers.js +3 -3
  203. package/lib/Ribbon/Ribbon.js +2 -2
  204. package/lib/Ribbon/docs/Ribbon__custom.docs.js +2 -2
  205. package/lib/Ribbon/docs/Ribbon__default.docs.js +2 -2
  206. package/lib/RippleEffect/RippleEffect.module.css +15 -37
  207. package/lib/RippleEffect/docs/RippleEffect__default.docs.js +2 -2
  208. package/lib/Select/GroupSelect.js +79 -102
  209. package/lib/Select/Select.js +87 -142
  210. package/lib/Select/Select.module.css +0 -6
  211. package/lib/Select/SelectWithAvatar.js +73 -98
  212. package/lib/Select/SelectWithIcon.js +76 -99
  213. package/lib/Select/docs/GroupSelect__default.docs.js +2 -2
  214. package/lib/Select/docs/SelectWithAvatar__default.docs.js +2 -2
  215. package/lib/Select/docs/SelectWithIcon__default.docs.js +2 -2
  216. package/lib/Select/docs/Select__default.docs.js +3 -3
  217. package/lib/Stencils/Stencils.js +2 -2
  218. package/lib/Stencils/docs/Stencils__custom.docs.js +2 -2
  219. package/lib/Stencils/docs/Stencils__default.docs.js +2 -2
  220. package/lib/Switch/Switch.js +3 -3
  221. package/lib/Switch/Switch.module.css +2 -3
  222. package/lib/Switch/docs/Switch__custom.docs.js +2 -2
  223. package/lib/Switch/docs/Switch__default.docs.js +2 -2
  224. package/lib/Tab/Tab.js +1 -1
  225. package/lib/Tab/TabWrapper.js +1 -1
  226. package/lib/Tab/Tabs.js +47 -70
  227. package/lib/Tab/Tabs.module.css +1 -2
  228. package/lib/Tab/docs/Tab__default.docs.js +2 -2
  229. package/lib/Tag/Tag.js +3 -3
  230. package/lib/Tag/Tag.module.css +2 -6
  231. package/lib/Tag/docs/Tag__custom.docs.js +2 -2
  232. package/lib/Tag/docs/Tag__default.docs.js +2 -2
  233. package/lib/TextBox/TextBox.js +3 -3
  234. package/lib/TextBox/docs/TextBox__custom.docs.js +2 -2
  235. package/lib/TextBox/docs/TextBox__default.docs.js +2 -2
  236. package/lib/TextBox/docs/TextBox__size.docs.js +2 -2
  237. package/lib/TextBox/docs/TextBox__variant.docs.js +2 -2
  238. package/lib/TextBoxIcon/TextBoxIcon.js +3 -3
  239. package/lib/TextBoxIcon/docs/TextBoxIcon__custom.docs.js +2 -2
  240. package/lib/TextBoxIcon/docs/TextBoxIcon__default.docs.js +2 -2
  241. package/lib/Textarea/Textarea.js +3 -3
  242. package/lib/Textarea/docs/Textarea__animated.docs.js +2 -2
  243. package/lib/Textarea/docs/Textarea__custom.docs.js +2 -2
  244. package/lib/Textarea/docs/Textarea__default.docs.js +2 -2
  245. package/lib/Textarea/docs/Textarea__disabled.docs.js +2 -2
  246. package/lib/Tooltip/Tooltip.js +10 -62
  247. package/lib/Tooltip/Tooltip.module.css +1 -6
  248. package/lib/Tooltip/__tests__/Tooltip.spec.js +2 -2
  249. package/lib/Tooltip/docs/Tooltip__default.docs.js +13 -52
  250. package/lib/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +2 -2
  251. package/lib/VelocityAnimation/VelocityAnimation/docs/VelocityAnimation__demo.docs.js +2 -2
  252. package/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +3 -3
  253. package/lib/VelocityAnimation/VelocityAnimationGroup/docs/VelocityAnimationGroup__demo.docs.js +2 -2
  254. package/lib/a11y/FocusScope/docs/FocusScope__default.docs.js +2 -2
  255. package/lib/beta/FocusRing/docs/FocusRing__default.docs.js +2 -2
  256. package/lib/common/docStyle.module.css +2 -6
  257. package/lib/css.js +2 -0
  258. package/lib/deprecated/PortalLayer/PortalLayer.js +2 -2
  259. package/lib/deprecated/PortalLayer/docs/PortalLayer__default.docs.js +2 -2
  260. package/lib/index.js +1 -10
  261. package/lib/semantic/Button/Button.js +2 -2
  262. package/lib/semantic/Button/docs/Button__default.docs.js +2 -2
  263. package/package.json +6 -5
  264. package/lib/ResponsiveDropBox/ResponsiveDropBox.js +0 -130
  265. package/lib/ResponsiveDropBox/ResponsiveDropBox.module.css +0 -6
  266. package/lib/deprecated/advancedMultiSelectVariableJson.js +0 -82
@@ -1,27 +1,23 @@
1
1
  .semibold {
2
2
  font-family: var(--zd_semibold);
3
3
  }
4
- [dir=ltr] .boxPadding {
4
+ .boxPadding {
5
5
  padding-right: var(--zd_size19);
6
6
  padding-left: var(--zd_size19);
7
7
  }
8
- [dir=rtl] .boxPadding {
9
- padding-left: var(--zd_size19);
10
- padding-right: var(--zd_size19);
11
- }
12
8
  .container {
13
- font-size: var(--zd_font_size16);
14
- composes: offSelection from '../common/common.module.css';
15
9
  border-radius: 3px;
16
10
  background-color: var(--zdt_datetime_default_bg);
11
+ font-size: var(--zd_font_size16);
12
+ composes: offSelection from '../common/common.module.css';
17
13
  }
18
14
  .header {
19
15
  min-height: var(--zd_size36);
20
- composes: boxPadding;
21
16
  text-align: center;
22
17
  background-color: var(--zdt_datetime_header_bg);
23
18
  border-radius: 0 0 2px 2px;
24
19
  border-bottom: 1px solid var(--zdt_datetime_header_border);
20
+ composes: boxPadding;
25
21
  }
26
22
 
27
23
  .datesStr {
@@ -39,25 +35,17 @@
39
35
  .datesStr {
40
36
  font-size: var(--zd_font_size13);
41
37
  color: var(--zdt_datetime_datestr_text);
42
- }
43
- .thArrow, .datesStr {
44
38
  cursor: pointer;
45
39
  }
46
40
  .thArrow:hover,
47
41
  .datesStr:hover {
48
42
  color: var(--zdt_datetime_datestr_text);
49
- }
50
- .thArrow:hover, .datesStr:hover {
51
43
  background: var(--zdt_datetime_datestr_hover_bg);
52
44
  }
53
45
 
54
- [dir=ltr] .navigation {
46
+ .navigation {
55
47
  margin-left: var(--zd_size2);
56
48
  }
57
-
58
- [dir=rtl] .navigation {
59
- margin-right: var(--zd_size2);
60
- }
61
49
  .thMonYear {
62
50
  font-size: var(--zd_font_size13);
63
51
  line-height: var(--zd_size24);
@@ -73,9 +61,9 @@
73
61
  }
74
62
  .days {
75
63
  min-height: var(--zd_size36);
64
+ padding-top: var(--zd_size7);
76
65
  composes: boxPadding;
77
66
  composes: alignBetween from '../common/common.module.css';
78
- padding-top: var(--zd_size7);
79
67
  }
80
68
  .daysStr {
81
69
  font-size: var(--zd_font_size10);
@@ -85,8 +73,8 @@
85
73
  }
86
74
  .dateRow {
87
75
  height: var(--zd_size28);
88
- composes: alignBetween from '../common/common.module.css';
89
76
  margin: var(--zd_size1) 0 var(--zd_size5);
77
+ composes: alignBetween from '../common/common.module.css';
90
78
  }
91
79
  .dateRow:last-child {
92
80
  margin-bottom: 0;
@@ -105,11 +93,8 @@
105
93
 
106
94
  .today,
107
95
  .today:hover {
108
- color: var(--zdt_datetime_today_text);
109
- }
110
-
111
- .today, .today:hover {
112
96
  background-color: var(--zdt_datetime_today_bg);
97
+ color: var(--zdt_datetime_today_text);
113
98
  border-radius: 50%;
114
99
  }
115
100
 
@@ -123,8 +108,8 @@
123
108
  .dropDown {
124
109
  width: var(--zd_size60);
125
110
  display: inline-block;
126
- position: relative;
127
111
  margin: 0 var(--zd_size4);
112
+ position: relative;
128
113
  }
129
114
  .footer {
130
115
  margin-top: var(--zd_size10);
@@ -140,15 +125,8 @@
140
125
  }
141
126
 
142
127
  .downArrow {
143
- color: var(--zdt_datetime_daystr_text);
144
- }
145
-
146
- [dir=ltr] .downArrow {
147
128
  margin-left: var(--zd_size2);
148
- }
149
-
150
- [dir=rtl] .downArrow {
151
- margin-right: var(--zd_size2);
129
+ color: var(--zdt_datetime_daystr_text);
152
130
  }
153
131
  .dateText {
154
132
  cursor: pointer;
@@ -161,22 +139,17 @@
161
139
  font-size: var(--zd_font_size11);
162
140
  text-transform: uppercase;
163
141
  color: var(--zdt_datetime_text);
142
+ margin-top: var(--zd_size14);
164
143
  composes: semibold;
165
144
  display: block;
166
- margin-top: var(--zd_size14);
167
145
  }
168
146
  .yearContainer {
169
147
  position: absolute;
170
148
  top: 0;
149
+ left: 0;
171
150
  width: 100%;
172
151
  height: 100%;
173
152
  }
174
- [dir=ltr] .yearContainer {
175
- left: 0;
176
- }
177
- [dir=rtl] .yearContainer {
178
- right: 0;
179
- }
180
153
  .subContainer {
181
154
  position: relative;
182
155
  }
@@ -3,7 +3,9 @@
3
3
  position: relative;
4
4
  composes: offSelection from '../common/common.module.css';
5
5
  }
6
- .readOnly, .readOnly > input, .disabled {
6
+ .readOnly,
7
+ .readOnly > input,
8
+ .disabled {
7
9
  cursor: not-allowed;
8
10
  }
9
11
  .enabled {
@@ -15,16 +17,10 @@
15
17
  .inputLine {
16
18
  position: absolute;
17
19
  bottom: 0;
18
- transition: border var(--zd_transition2) linear 0s;
19
- border-bottom: 1px solid var(--zdt_datewidget_input_border);
20
- }
21
- [dir=ltr] .inputLine {
22
20
  left: 0;
23
21
  right: 0;
24
- }
25
- [dir=rtl] .inputLine {
26
- right: 0;
27
- left: 0;
22
+ border-bottom: 1px solid var(--zdt_datewidget_input_border);
23
+ transition: border var(--zd_transition2) linear 0s;
28
24
  }
29
25
  .enabled:hover .inputLine {
30
26
  border-bottom-color: var(--zdt_datewidget_enabled_border);
@@ -1,31 +1,26 @@
1
- [dir=ltr] .boxPadding {
1
+ .boxPadding {
2
2
  padding-right: var(--zd_size19);
3
3
  padding-left: var(--zd_size19);
4
- }[dir=rtl] .boxPadding {
5
- padding-left: var(--zd_size19);
6
- padding-right: var(--zd_size19);
7
4
  }
8
5
  .month {
9
6
  width: 30.333%;
10
- font-size: var(--zd_font_size12);
11
- line-height: var(--zd_size26);
12
- height: var(--zd_size26);
13
- color: var(--zdt_yearview_month_text);
14
7
  text-align: center;
15
8
  margin: 0 0 var(--zd_size1);
16
9
  cursor: pointer;
17
10
  background-color: var(--zdt_yearview_month_bg);
18
11
  border-radius: 20px;
12
+ font-size: var(--zd_font_size12);
13
+ line-height: var(--zd_size26);
14
+ height: var(--zd_size26);
15
+ color: var(--zdt_yearview_month_text);
19
16
  }
20
17
  .month:hover {
21
18
  background-color: var(--zdt_yearview_month_hover_bg);
22
19
  }
23
20
  .currentMonth,
24
21
  .currentMonth:hover {
25
- color: var(--zdt_yearview_currentmonth_text);
26
- }
27
- .currentMonth, .currentMonth:hover {
28
22
  background-color: var(--zdt_yearview_currentmonth_bg);
23
+ color: var(--zdt_yearview_currentmonth_text);
29
24
  }
30
25
  .yearBox {
31
26
  border-bottom: 1px dotted var(--zdt_yearview_yearbox_border);
@@ -54,13 +49,8 @@
54
49
  color: var(--zdt_yearview_year_hover_text);
55
50
  }
56
51
  .arrowActive {
57
- color: var(--zdt_yearview_year_hover_text);
58
- }
59
- [dir=ltr] .arrowActive {
60
52
  transform: rotate(180deg);
61
- }
62
- [dir=rtl] .arrowActive {
63
- transform: rotate(-180deg);
53
+ color: var(--zdt_yearview_year_hover_text);
64
54
  }
65
55
  .container {
66
56
  height: 100%;
@@ -1,4 +1,4 @@
1
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import React, { Fragment } from 'react';
4
4
  import PropTypes from 'prop-types';
@@ -28,7 +28,8 @@
28
28
  padding: var(--dropbox_padding);
29
29
  box-shadow: var(--dropbox_box_shadow);
30
30
  }
31
- .defaultPalette, .darkPalette {
31
+ .defaultPalette,
32
+ .darkPalette {
32
33
  background-color: var(--dropbox_bg_color);
33
34
  }
34
35
  .radius {
@@ -83,13 +84,11 @@
83
84
  .bottom_shadow {
84
85
  --dropbox_box_shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
85
86
  }
86
- [dir=ltr] .defaultShadow {
87
+ .defaultShadow {
87
88
  box-shadow: 4px 3px 30px var(--zdt_dropbox_default_box_shadow);
88
89
  }
89
- [dir=rtl] .defaultShadow {
90
- box-shadow: -4px 3px 30px var(--zdt_dropbox_default_box_shadow);
91
- }
92
90
  /* box direction styles */
91
+ /*rtl:begin:ignore*/
93
92
  .topStart {
94
93
  bottom: 100%;
95
94
  right: 0;
@@ -273,6 +272,7 @@
273
272
  bottom: var(--zd_size28);
274
273
  transform: rotate(-90deg) translateX(-50%);
275
274
  }
275
+ /*rtl:end:ignore*/
276
276
  .hidden {
277
277
  visibility: hidden;
278
278
  opacity: 0;
@@ -282,10 +282,7 @@
282
282
  .hidden .subContainer {
283
283
  box-shadow: none;
284
284
  }
285
- [dir=ltr] .animationBasic {
286
- animation-duration: var(--zd_transition2);
287
- }
288
- [dir=rtl] .animationBasic {
285
+ .animationBasic {
289
286
  animation-duration: var(--zd_transition2);
290
287
  }
291
288
  .fadeIn {
@@ -294,24 +291,11 @@
294
291
  }
295
292
  .bounce {
296
293
  composes: animationBasic;
297
- }
298
- [dir=ltr] .bounce {
299
- animation-name: animation;
300
- animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
301
- }
302
- [dir=rtl] .bounce {
303
294
  animation-name: animation;
304
295
  animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
305
296
  }
306
297
  .slideUp {
307
298
  composes: modeForward from '../common/animation.module.css';
308
- }
309
- [dir=ltr] .slideUp {
310
- animation-duration: var(--zd_transition3);
311
- animation-name: slideUp;
312
- animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1);
313
- }
314
- [dir=rtl] .slideUp {
315
299
  animation-duration: var(--zd_transition3);
316
300
  animation-name: slideUp;
317
301
  animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1);
@@ -341,23 +325,16 @@
341
325
  .responsive {
342
326
  position: absolute;
343
327
  bottom: 0;
328
+ left: 0;
344
329
  width: 100%;
345
330
  max-height: 90%;
346
331
  }
347
332
 
348
- [dir=ltr] .responsive {
349
- left: 0;
350
- }
351
-
352
- [dir=rtl] .responsive {
353
- right: 0;
354
- }
355
-
356
333
  .closeBar {
357
334
  height: 6px;
358
- width: 20%;
359
335
  border-radius: 5px;
360
336
  background-color: var(--dropbox_mob_close_bg_color);
337
+ width: 20%;
361
338
  cursor: pointer;
362
339
  margin: 0 auto var(--zd_size10);
363
340
  }
@@ -369,31 +346,18 @@
369
346
  }
370
347
  .activateInDelay {
371
348
  composes: modeForward from '../common/animation.module.css';
372
- pointer-events: none;
373
- }
374
- [dir=ltr] .activateInDelay {
375
- animation-duration: var(--zd_transition1);
376
- animation-delay: var(--zd_transition2);
377
- animation-name: activateInDelay;
378
- }
379
- [dir=rtl] .activateInDelay {
380
349
  animation-duration: var(--zd_transition1);
381
350
  animation-delay: var(--zd_transition2);
351
+ pointer-events: none;
382
352
  animation-name: activateInDelay;
383
353
  }
384
354
  .freezeLayer {
385
355
  position: absolute;
386
356
  top: 0;
387
- bottom: 0;
388
- composes: activateInDelay;
389
- }
390
- [dir=ltr] .freezeLayer {
391
357
  left: 0;
358
+ bottom: 0;
392
359
  right: 0;
393
- }
394
- [dir=rtl] .freezeLayer {
395
- right: 0;
396
- left: 0;
360
+ composes: activateInDelay;
397
361
  }
398
362
  .freeze {
399
363
  composes: varClass;
@@ -33,14 +33,10 @@
33
33
  .light {
34
34
  composes: default;
35
35
  }
36
- .light::after, .dark::after {
37
- background-color: var(--dropdownheading_underline_bg_color);
38
- }
39
- [dir=ltr] .light::after, [dir=ltr] .dark::after {
36
+ .light::after,
37
+ .dark::after {
40
38
  left: var(--dropdownheading_underline_left);
41
- }
42
- [dir=rtl] .light::after, [dir=rtl] .dark::after {
43
- right: var(--dropdownheading_underline_left);
39
+ background-color: var(--dropdownheading_underline_bg_color);
44
40
  }
45
41
 
46
42
  .dark {
@@ -6,32 +6,24 @@
6
6
 
7
7
  /* dropdownitem user default variables */
8
8
  --dropdownitem-user-width: var(--zd_size42);
9
+ --dropdownitem-user-border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
9
10
  --dropdownitem-user-border-style: solid;
10
11
  --dropdownitem-user-border-color: var(--zdt_dropdown_user_default_border);
11
12
  --dropdownitem-user-cursor: pointer;
12
- }[dir=ltr] .varClass {
13
- --dropdownitem-user-border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
14
- }[dir=rtl] .varClass {
15
- --dropdownitem-user-border-width: 0 1px 0 0;
16
13
  }
17
14
  .list {
18
15
  composes: varClass;
19
16
  composes: dflex alignVertical from '../common/common.module.css';
20
17
  position: relative;
18
+ padding: var(--dropdownitem-padding);
21
19
  color: var(--zdt_dropdown_default_text);
22
20
  font-size: var(--zd_font_size13);
23
- padding: var(--dropdownitem-padding);
21
+ border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
24
22
  border-style: solid;
25
23
  border-color: var(--dropdownitem-border-color);
26
24
  cursor: pointer;
27
25
  background-color: var(--dropdownitem-bg-color);
28
26
  }
29
- [dir=ltr] .list {
30
- border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
31
- }
32
- [dir=rtl] .list {
33
- border-width: 0 1px 0 0;
34
- }
35
27
 
36
28
  .listActive {
37
29
  --dropdownitem-border-color: var(--zdt_dropdown_listactive_border);
@@ -41,27 +33,16 @@
41
33
  --dropdownitem-bg-color: var(--zdt_dropdown_listhover_bg);
42
34
  }
43
35
 
44
- [dir=ltr] .padding {
36
+ .padding {
45
37
  --dropdownitem-padding: 0 var(--zd_size50) 0 0/*rtl: 0 0 0 var(--zd_size50)*/;
46
38
  }
47
39
 
48
- [dir=rtl] .padding {
49
- --dropdownitem-padding: 0 0 0 var(--zd_size50);
50
- }
51
-
52
40
  .children {
41
+ margin-right: var(--zd_size10);
53
42
  display: inline-block;
54
43
  font-size: 0;
55
44
  }
56
45
 
57
- [dir=ltr] .children {
58
- margin-right: var(--zd_size10);
59
- }
60
-
61
- [dir=rtl] .children {
62
- margin-left: var(--zd_size10);
63
- }
64
-
65
46
  .value {
66
47
  composes: dotted flexgrow from '../common/common.module.css';
67
48
  }
@@ -70,6 +51,7 @@
70
51
  composes: dflex alignVertical alignHorizontal from '../common/common.module.css';
71
52
  position: absolute;
72
53
  top: 0;
54
+ right: 0;
73
55
  bottom: 0;
74
56
  opacity: 0;
75
57
  visibility: hidden;
@@ -80,14 +62,6 @@
80
62
  cursor: var(--dropdownitem-user-cursor);
81
63
  }
82
64
 
83
- [dir=ltr] .user {
84
- right: 0;
85
- }
86
-
87
- [dir=rtl] .user {
88
- left: 0;
89
- }
90
-
91
65
  .list:hover .user {
92
66
  opacity: 1;
93
67
  visibility: visible;
@@ -1,4 +1,4 @@
1
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  /**** Libraries ****/
4
4
  import React, { useCallback } from 'react';
@@ -1,4 +1,4 @@
1
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  /**** Libraries ****/
4
4
  import React from 'react';
@@ -4,6 +4,8 @@
4
4
  --listitem_padding: var(--zd_size9) var(--zd_size20);
5
5
  --listitem_border_width: 0;
6
6
  --listitem_border_color: var(--zdt_listitem_default_border);
7
+ --listitem_avatar_margin: 0 var(--zd_size15) 0 0
8
+ /*rtl: 0 0 0 var(--zd_size15)*/;
7
9
  --listitem_bg_color: var(--zdt_listitem_default_bg);
8
10
  --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
9
11
  --listitem_height: auto;
@@ -14,11 +16,6 @@
14
16
 
15
17
  /* listitem tick icon default variables */
16
18
  --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
17
- }[dir=ltr] .varClass {
18
- --listitem_avatar_margin: 0 var(--zd_size15) 0 0
19
- /*rtl: 0 0 0 var(--zd_size15)*/;
20
- }[dir=rtl] .varClass {
21
- --listitem_avatar_margin: 0 0 0 var(--zd_size15);
22
19
  }
23
20
  .list {
24
21
  composes: varClass;
@@ -26,49 +23,40 @@
26
23
  list-style: none;
27
24
  color: var(--listitem_text_color);
28
25
  font-size: var(--zd_font_size13);
29
- height: var(--listitem_height);
30
- min-height: var(--listitem_min_height);
31
- text-decoration: none;
32
26
  padding: var(--listitem_padding);
33
27
  border-width: var(--listitem_border_width);
34
28
  border-style: solid;
35
29
  border-color: var(--listitem_border_color);
30
+ height: var(--listitem_height);
31
+ min-height: var(--listitem_min_height);
36
32
  cursor: pointer;
33
+ text-decoration: none;
37
34
  }
38
- .list, .default, .secondary {
35
+ .list,
36
+ .default,
37
+ .secondary {
39
38
  background-color: var(--listitem_bg_color);
40
39
  }
41
- [dir=ltr] .withBorder {
40
+ .withBorder {
42
41
  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
43
42
  }
44
- [dir=rtl] .withBorder {
45
- --listitem_border_width: 0 1px 0 0;
46
- }
47
43
  .active {
48
44
  --listitem_border_color: var(--zdt_listitem_active_border);
49
45
  }
50
- [dir=ltr] .small {
46
+ .small {
51
47
  --listitem_padding: var(--zd_size9) var(--zd_size3) var(--zd_size9)
52
48
  var(--zd_size5)
53
49
  /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3)*/;
54
50
  }
55
- [dir=rtl] .small {
56
- --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3);
57
- }
58
51
  .medium {
59
52
  --listitem_padding: var(--zd_size9) var(--zd_size20);
60
53
  --listitem_min_height: var(--zd_size35);
61
54
  }
62
55
  .large {
63
- --listitem_height: var(--zd_size48);
64
- }
65
- [dir=ltr] .large {
66
56
  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10)
67
57
  var(--zd_size25)
68
58
  /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3)*/;
69
- }
70
- [dir=rtl] .large {
71
- --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
59
+ --listitem_height: var(--zd_size48);
72
60
  }
73
61
  .value,
74
62
  .children {
@@ -76,13 +64,8 @@
76
64
  }
77
65
  .iconBox {
78
66
  width: var(--zd_size20);
79
- text-align: center;
80
- }
81
- [dir=ltr] .iconBox {
82
67
  margin-right: var(--zd_size10);
83
- }
84
- [dir=rtl] .iconBox {
85
- margin-left: var(--zd_size10);
68
+ text-align: center;
86
69
  }
87
70
  .iconBox,
88
71
  .leftAvatar {
@@ -92,48 +75,45 @@
92
75
  margin: var(--listitem_avatar_margin);
93
76
  }
94
77
 
95
- .defaultHover, .primaryHover, .secondaryHover, .darkHover {
78
+ .defaultHover,
79
+ .primaryHover,
80
+ .secondaryHover,
81
+ .darkHover {
96
82
  background-color: var(--listitem_highlight_bg_color);
97
83
  }
98
84
  .activewithBorder {
99
- --listitem_border_color: var(--zdt_listitem_active_border);
100
- }
101
- [dir=ltr] .activewithBorder {
102
85
  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
103
- }
104
- [dir=rtl] .activewithBorder {
105
- --listitem_border_width: 0 1px 0 0;
86
+ --listitem_border_color: var(--zdt_listitem_active_border);
106
87
  }
107
88
 
108
89
  .defaultHover,
109
- .defaultEffect:hover
110
- /* .defaultEffect:focus */
111
- {
90
+ .defaultEffect:hover,
91
+ .defaultEffect:focus {
112
92
  --listitem_bg_color: var(--zdt_listitem_highlight_bg);
113
93
  }
114
94
  .primaryHover,
115
- .primaryEffect:hover
116
- /* .primaryEffect:focus */
117
- {
95
+ .primaryEffect:hover,
96
+ .primaryEffect:focus {
118
97
  --listitem_bg_color: var(--zdt_listitem_primary_bg);
119
98
  --listitem_highlight_bg_color: var(--zdt_listitem_primary_bg);
120
99
  }
121
100
  .secondaryHover,
122
- .secondaryEffect:hover
123
- /* .secondaryEffect:focus */
124
- {
101
+ .secondaryEffect:hover,
102
+ .secondaryEffect:focus {
125
103
  --listitem_bg_color: var(--zdt_listitem_secondary_bg);
126
104
  --listitem_highlight_bg_color: var(--zdt_listitem_secondary_bg);
127
105
  --listitem_text_color: var(--zdt_listitem_secondary_text);
128
106
  }
129
107
  .darkHover,
130
- .darkEffect:hover
131
- /* .darkEffect:focus */
132
- {
108
+ .darkEffect:hover,
109
+ .darkEffect:focus {
133
110
  --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
134
111
  --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
135
112
  }
136
- .activedefault, .activeprimary, .activesecondary, .activedark {
113
+ .activedefault,
114
+ .activeprimary,
115
+ .activesecondary,
116
+ .activedark {
137
117
  background-color: var(--listitem_active_bg_color);
138
118
  }
139
119
  .activedefault,
@@ -159,15 +139,8 @@
159
139
  .darkTick {
160
140
  position: absolute;
161
141
  color: var(--listitem_tickicon_color);
162
- }
163
-
164
- [dir=ltr] .tickIcon, [dir=ltr] .defaultTick, [dir=ltr] .darkTick {
165
142
  right: var(--zd_size20);
166
143
  }
167
-
168
- [dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
169
- left: var(--zd_size20);
170
- }
171
144
  .defaultTick {
172
145
  --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
173
146
  }
@@ -177,33 +150,24 @@
177
150
  .defaultTick > i {
178
151
  display: block;
179
152
  }
180
- [dir=ltr] .smallwithTick {
153
+ .smallwithTick {
181
154
  --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
182
155
  var(--zd_size5)
183
156
  /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39)*/;
184
157
  }
185
- [dir=rtl] .smallwithTick {
186
- --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39);
187
- }
188
- [dir=ltr] .mediumwithTick {
158
+ .mediumwithTick {
189
159
  --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
190
160
  var(--zd_size20)
191
161
  /*rtl: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39)*/;
192
162
  }
193
- [dir=rtl] .mediumwithTick {
194
- --listitem_padding: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39);
195
- }
196
- [dir=ltr] .largewithTick {
163
+ .largewithTick {
197
164
  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10)
198
165
  var(--zd_size25)
199
166
  /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39)*/;
200
167
  }
201
- [dir=rtl] .largewithTick {
202
- --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
203
- }
204
168
  .responsiveHeight {
205
169
  --listitem_min_height: var(--zd_size45);
206
- font-size: var(--zd_font_size15);
207
170
  padding-top: var(--zd_size10);
208
171
  padding-bottom: var(--zd_size10);
172
+ font-size: var(--zd_font_size15);
209
173
  }
@@ -1,4 +1,4 @@
1
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  /**** Libraries ****/
4
4
  import React from 'react';