@zohodesk/components 1.0.0-temp-242 → 1.0.0-temp-244

package/lib/Buttongroup/Buttongroup.module.css

@@ -1,105 +1,105 @@
-.varClass {
-  /* button group default variables */
-  --buttongroup_bg_color: var(--zdt_buttongroup_default_bg);
-  --buttongroup_box_shadow: none;
-  --buttongroup_padding: 0;
-  --buttongroup_border_width: 0;
-  --buttongroup_border_style: solid;
-  --buttongroup_border_color: var(--zdt_buttongroup_default_border);
-}
-
-.buttonGroup {
-  composes: varClass;
-  composes: cboth from '../common/common.module.css';
-  background-color: var(--buttongroup_bg_color);
-  box-shadow: var(--buttongroup_box_shadow);
-  padding: var(--buttongroup_padding);
-  border-width: var(--buttongroup_border_width);
-  border-style: var(--buttongroup_border_style);
-  border-color: var(--buttongroup_border_color);
-}
-
-.footer {
-  --buttongroup_box_shadow: var(--zd_bs_buttongroup_footer);
-}
-
-[dir=ltr] .footer {
-  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60);
-}
-
-[dir=rtl] .footer {
-  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60);
-}
-
-.header {
-  --buttongroup_padding: var(--zd_size12) var(--zd_size20);
-  --buttongroup_border_width: 0 0 1px 0;
-}
-
-[dir=ltr] .tab>div button:first-child {
-  border-radius: 5px 0 0 5px;
-}
-
-[dir=rtl] .tab>div button:first-child {
-  border-radius: 0 5px 5px 0;
-}
-
-[dir=ltr] .tab>div button:last-child {
-  border-radius: 0 5px 5px 0;
-}
-
-[dir=rtl] .tab>div button:last-child {
-  border-radius: 5px 0 0 5px;
-}
-
-.alignleft {
-  composes: fleft from '../common/common.module.css';
-}
-
-.alignright {
-  composes: fright from '../common/common.module.css';
-}
-
-.aligncenter {
-  composes: tcenter from '../common/common.module.css';
-}
-
-[dir=ltr] .alignleft>button:first-child {
-  margin-left: 0 ;
-}
-
-[dir=rtl] .alignleft>button:first-child {
-  margin-right: 0 ;
-}
-
-[dir=ltr] .alignleft>button {
-  margin-left: var(--zd_size15) ;
-}
-
-[dir=rtl] .alignleft>button {
-  margin-right: var(--zd_size15) ;
-}
-
-[dir=ltr] .alignright>button:last-child {
-  margin-right: 0 ;
-}
-
-[dir=rtl] .alignright>button:last-child {
-  margin-left: 0 ;
-}
-
-[dir=ltr] .alignright>button {
-  margin-right: var(--zd_size15) ;
-}
-
-[dir=rtl] .alignright>button {
-  margin-left: var(--zd_size15) ;
-}
-
-[dir=ltr] .aligncenter>button {
-  margin-right: var(--zd_size15) ;
-}
-
-[dir=rtl] .aligncenter>button {
-  margin-left: var(--zd_size15) ;
+.varClass {
+  /* button group default variables */
+  --buttongroup_bg_color: var(--zdt_buttongroup_default_bg);
+  --buttongroup_box_shadow: none;
+  --buttongroup_padding: 0;
+  --buttongroup_border_width: 0;
+  --buttongroup_border_style: solid;
+  --buttongroup_border_color: var(--zdt_buttongroup_default_border);
+}
+
+.buttonGroup {
+  composes: varClass;
+  composes: cboth from '../common/common.module.css';
+  background-color: var(--buttongroup_bg_color);
+  box-shadow: var(--buttongroup_box_shadow);
+  padding: var(--buttongroup_padding);
+  border-width: var(--buttongroup_border_width);
+  border-style: var(--buttongroup_border_style);
+  border-color: var(--buttongroup_border_color);
+}
+
+.footer {
+  --buttongroup_box_shadow: var(--zd_bs_buttongroup_footer);
+}
+
+[dir=ltr] .footer {
+  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60);
+}
+
+[dir=rtl] .footer {
+  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60);
+}
+
+.header {
+  --buttongroup_padding: var(--zd_size12) var(--zd_size20);
+  --buttongroup_border_width: 0 0 1px 0;
+}
+
+[dir=ltr] .tab>div button:first-child {
+  border-radius: 5px 0 0 5px;
+}
+
+[dir=rtl] .tab>div button:first-child {
+  border-radius: 0 5px 5px 0;
+}
+
+[dir=ltr] .tab>div button:last-child {
+  border-radius: 0 5px 5px 0;
+}
+
+[dir=rtl] .tab>div button:last-child {
+  border-radius: 5px 0 0 5px;
+}
+
+.alignleft {
+  composes: fleft from '../common/common.module.css';
+}
+
+.alignright {
+  composes: fright from '../common/common.module.css';
+}
+
+.aligncenter {
+  composes: tcenter from '../common/common.module.css';
+}
+
+[dir=ltr] .alignleft>button:first-child {
+  margin-left: 0 ;
+}
+
+[dir=rtl] .alignleft>button:first-child {
+  margin-right: 0 ;
+}
+
+[dir=ltr] .alignleft>button {
+  margin-left: var(--zd_size15) ;
+}
+
+[dir=rtl] .alignleft>button {
+  margin-right: var(--zd_size15) ;
+}
+
+[dir=ltr] .alignright>button:last-child {
+  margin-right: 0 ;
+}
+
+[dir=rtl] .alignright>button:last-child {
+  margin-left: 0 ;
+}
+
+[dir=ltr] .alignright>button {
+  margin-right: var(--zd_size15) ;
+}
+
+[dir=rtl] .alignright>button {
+  margin-left: var(--zd_size15) ;
+}
+
+[dir=ltr] .aligncenter>button {
+  margin-right: var(--zd_size15) ;
+}
+
+[dir=rtl] .aligncenter>button {
+  margin-left: var(--zd_size15) ;
 }

package/lib/DropBox/css/DropBox.module.css

@@ -1,59 +1,59 @@
-.varClass {
-  /* dropbox default variables */
-  --dropbox_bg_color: var(--zdt_dropbox_default_bg);
-  --dropbox_border_radius: 0;
-  --dropbox_padding: 0;
-  --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
-
-  /* dropbox arrow default variables */
-  --dropbox_arrow_box_shadow_color: var(--zdt_dropbox_arrow_shadow);
-
-  /* dropbox responsive default variables */
-  --dropbox_mob_bg_color: var(--zdt_dropbox_mob_bg);
-  --dropbox_mob_close_bg_color: var(--zdt_dropbox_mob_close_bg);
-}
-
-.activateInDelay {
-  composes: modeForward from '../../common/animation.module.css';
-  pointer-events: none;
-}
-
-[dir=ltr] .activateInDelay {
-  animation-duration: var(--zd_transition1);
-  animation-delay: var(--zd_transition2);
-  animation-name: activateInDelay;
-}
-
-[dir=rtl] .activateInDelay {
-  animation-duration: var(--zd_transition1);
-  animation-delay: var(--zd_transition2);
-  animation-name: activateInDelay;
-}
-
-.freezeLayer {
-  position: absolute;
-  top: 0 ;
-  bottom: 0 ;
-  composes: activateInDelay;
-}
-
-[dir=ltr] .freezeLayer {
-  left: 0 ;
-  right: 0 ;
-}
-
-[dir=rtl] .freezeLayer {
-  right: 0 ;
-  left: 0 ;
-}
-
-.freeze {
-  composes: varClass;
-  background: var(--dropbox_mob_bg_color);
-}
-
-@keyframes activateInDelay {
-  100% {
-    pointer-events: initial;
-  }
+.varClass {
+  /* dropbox default variables */
+  --dropbox_bg_color: var(--zdt_dropbox_default_bg);
+  --dropbox_border_radius: 0;
+  --dropbox_padding: 0;
+  --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
+
+  /* dropbox arrow default variables */
+  --dropbox_arrow_box_shadow_color: var(--zdt_dropbox_arrow_shadow);
+
+  /* dropbox responsive default variables */
+  --dropbox_mob_bg_color: var(--zdt_dropbox_mob_bg);
+  --dropbox_mob_close_bg_color: var(--zdt_dropbox_mob_close_bg);
+}
+
+.activateInDelay {
+  composes: modeForward from '../../common/animation.module.css';
+  pointer-events: none;
+}
+
+[dir=ltr] .activateInDelay {
+  animation-duration: var(--zd_transition1);
+  animation-delay: var(--zd_transition2);
+  animation-name: activateInDelay;
+}
+
+[dir=rtl] .activateInDelay {
+  animation-duration: var(--zd_transition1);
+  animation-delay: var(--zd_transition2);
+  animation-name: activateInDelay;
+}
+
+.freezeLayer {
+  position: absolute;
+  top: 0 ;
+  bottom: 0 ;
+  composes: activateInDelay;
+}
+
+[dir=ltr] .freezeLayer {
+  left: 0 ;
+  right: 0 ;
+}
+
+[dir=rtl] .freezeLayer {
+  right: 0 ;
+  left: 0 ;
+}
+
+.freeze {
+  composes: varClass;
+  background: var(--dropbox_mob_bg_color);
+}
+
+@keyframes activateInDelay {
+  100% {
+    pointer-events: initial;
+  }
 }

package/lib/DropDown/DropDownHeading.module.css

@@ -1,53 +1,53 @@
-.varClass {
-  /* dropdownheading default variables */
-  --dropdownheading_text_color: var(--zdt_dropdown_default_text);
-  --dropdownheading_text_transform: uppercase;
-  --dropdownheading_padding: var(--zd_size10) var(--zd_size20);
-  --dropdownheading_bg_color: none;
-
-  /* dropdownheading underline default variables */
-  --dropdownheading_underline_width: var(--zd_size20);
-  --dropdownheading_underline_height: var(--zd_size1);
-  --dropdownheading_underline_bg_color: var(--zdt_dropdown_default_bg);
-  --dropdownheading_underline_left: var(--zd_size20);
-}
-.default {
-  composes: dotted semibold from '../common/common.module.css';
-  composes: varClass;
-  position: relative;
-  font-size: var(--zd_font_size11) ;
-  letter-spacing: 0.6px;
-  text-transform: var(--dropdownheading_text_transform);
-  color: var(--dropdownheading_text_color);
-  padding: var(--dropdownheading_padding);
-  background-color: var(--dropdownheading_bg_color);
-}
-.default::after {
-  position: absolute;
-  content: '';
-  bottom: var(--zd_size2) ;
-  width: var(--dropdownheading_underline_width);
-  height: var(--dropdownheading_underline_height);
-}
-
-.light {
-  composes: default;
-}
-.light::after, .dark::after {
-  background-color: var(--dropdownheading_underline_bg_color);
-}
-[dir=ltr] .light::after, [dir=ltr] .dark::after {
-  left: var(--dropdownheading_underline_left);
-}
-[dir=rtl] .light::after, [dir=rtl] .dark::after {
-  right: var(--dropdownheading_underline_left);
-}
-
-.dark {
-  composes: default;
-  --dropdownheading_text_color: var(--zdt_dropdown_darkheading_text);
-  --dropdownheading_bg_color: var(--zdt_dropdown_darkheading_bg);
-}
-.dark::after {
-  --dropdownheading_underline_bg_color: var(--zdt_dropdown_darkheading_underline_bg);
-}
+.varClass {
+  /* dropdownheading default variables */
+  --dropdownheading_text_color: var(--zdt_dropdown_default_text);
+  --dropdownheading_text_transform: uppercase;
+  --dropdownheading_padding: var(--zd_size10) var(--zd_size20);
+  --dropdownheading_bg_color: none;
+
+  /* dropdownheading underline default variables */
+  --dropdownheading_underline_width: var(--zd_size20);
+  --dropdownheading_underline_height: var(--zd_size1);
+  --dropdownheading_underline_bg_color: var(--zdt_dropdown_default_bg);
+  --dropdownheading_underline_left: var(--zd_size20);
+}
+.default {
+  composes: dotted semibold from '../common/common.module.css';
+  composes: varClass;
+  position: relative;
+  font-size: var(--zd_font_size11) ;
+  letter-spacing: 0.6px;
+  text-transform: var(--dropdownheading_text_transform);
+  color: var(--dropdownheading_text_color);
+  padding: var(--dropdownheading_padding);
+  background-color: var(--dropdownheading_bg_color);
+}
+.default::after {
+  position: absolute;
+  content: '';
+  bottom: var(--zd_size2) ;
+  width: var(--dropdownheading_underline_width);
+  height: var(--dropdownheading_underline_height);
+}
+
+.light {
+  composes: default;
+}
+.light::after, .dark::after {
+  background-color: var(--dropdownheading_underline_bg_color);
+}
+[dir=ltr] .light::after, [dir=ltr] .dark::after {
+  left: var(--dropdownheading_underline_left);
+}
+[dir=rtl] .light::after, [dir=rtl] .dark::after {
+  right: var(--dropdownheading_underline_left);
+}
+
+.dark {
+  composes: default;
+  --dropdownheading_text_color: var(--zdt_dropdown_darkheading_text);
+  --dropdownheading_bg_color: var(--zdt_dropdown_darkheading_bg);
+}
+.dark::after {
+  --dropdownheading_underline_bg_color: var(--zdt_dropdown_darkheading_underline_bg);
+}

package/lib/DropDown/DropDownItem.module.css

@@ -1,94 +1,94 @@
-.varClass {
-  /* dropdownitem default variables */
-  --dropdownitem-padding: var(--zd_size9) var(--zd_size19);
-  --dropdownitem-border-color: var(--zdt_dropdown_default_border);
-  --dropdownitem-bg-color: var(--zdt_dropdown_mirror_bg);
-
-  /* dropdownitem user default variables */
-  --dropdownitem-user-width: var(--zd_size42);
-  --dropdownitem-user-border-style: solid;
-  --dropdownitem-user-border-color: var(--zdt_dropdown_user_default_border);
-  --dropdownitem-user-cursor: pointer;
-}[dir=ltr] .varClass {
-  --dropdownitem-user-border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
-}[dir=rtl] .varClass {
-  --dropdownitem-user-border-width: 0 1px 0 0;
-}
-.list {
-  composes: varClass;
-  composes: dflex alignVertical from '../common/common.module.css';
-  position: relative;
-  color: var(--zdt_dropdown_default_text);
-  font-size: var(--zd_font_size13) ;
-  padding: var(--dropdownitem-padding);
-  border-style: solid;
-  border-color: var(--dropdownitem-border-color);
-  cursor: pointer;
-  background-color: var(--dropdownitem-bg-color);
-}
-[dir=ltr] .list {
-  border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
-}
-[dir=rtl] .list {
-  border-width: 0 1px 0 0;
-}
-
-.listActive {
-  --dropdownitem-border-color: var(--zdt_dropdown_listactive_border);
-  --dropdownitem-bg-color: var(--zdt_dropdown_listactive_bg);
-}
-.listHover {
-  --dropdownitem-bg-color: var(--zdt_dropdown_listhover_bg);
-}
-
-[dir=ltr] .padding {
-  --dropdownitem-padding: 0 var(--zd_size50) 0 0;
-}
-
-[dir=rtl] .padding {
-  --dropdownitem-padding: 0 0 0 var(--zd_size50);
-}
-
-.children {
-  display: inline-block;
-  font-size: 0 ;
-}
-
-[dir=ltr] .children {
-  margin-right: var(--zd_size10) ;
-}
-
-[dir=rtl] .children {
-  margin-left: var(--zd_size10) ;
-}
-
-.value {
-  composes: dotted flexgrow from '../common/common.module.css';
-}
-
-.user {
-  composes: dflex alignVertical alignHorizontal from '../common/common.module.css';
-  position: absolute;
-  top: 0 ;
-  bottom: 0 ;
-  opacity: 0;
-  visibility: hidden;
-  width: var(--dropdownitem-user-width);
-  border-width: var(--dropdownitem-user-border-width);
-  border-style: var(--dropdownitem-user-border-style);
-  border-color: var(--dropdownitem-user-border-color);
-  cursor: var(--dropdownitem-user-cursor);
-}
-
-[dir=ltr] .user {
-  right: 0 ;
-}
-
-[dir=rtl] .user {
-  left: 0 ;
-}
-
-.list:hover .user {
-  opacity: 1;
-  visibility: visible;
-}
+.varClass {
+  /* dropdownitem default variables */
+  --dropdownitem-padding: var(--zd_size9) var(--zd_size19);
+  --dropdownitem-border-color: var(--zdt_dropdown_default_border);
+  --dropdownitem-bg-color: var(--zdt_dropdown_mirror_bg);
+
+  /* dropdownitem user default variables */
+  --dropdownitem-user-width: var(--zd_size42);
+  --dropdownitem-user-border-style: solid;
+  --dropdownitem-user-border-color: var(--zdt_dropdown_user_default_border);
+  --dropdownitem-user-cursor: pointer;
+}[dir=ltr] .varClass {
+  --dropdownitem-user-border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
+}[dir=rtl] .varClass {
+  --dropdownitem-user-border-width: 0 1px 0 0;
+}
+.list {
+  composes: varClass;
+  composes: dflex alignVertical from '../common/common.module.css';
+  position: relative;
+  color: var(--zdt_dropdown_default_text);
+  font-size: var(--zd_font_size13) ;
+  padding: var(--dropdownitem-padding);
+  border-style: solid;
+  border-color: var(--dropdownitem-border-color);
+  cursor: pointer;
+  background-color: var(--dropdownitem-bg-color);
+}
+[dir=ltr] .list {
+  border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
+}
+[dir=rtl] .list {
+  border-width: 0 1px 0 0;
+}
+
+.listActive {
+  --dropdownitem-border-color: var(--zdt_dropdown_listactive_border);
+  --dropdownitem-bg-color: var(--zdt_dropdown_listactive_bg);
+}
+.listHover {
+  --dropdownitem-bg-color: var(--zdt_dropdown_listhover_bg);
+}
+
+[dir=ltr] .padding {
+  --dropdownitem-padding: 0 var(--zd_size50) 0 0;
+}
+
+[dir=rtl] .padding {
+  --dropdownitem-padding: 0 0 0 var(--zd_size50);
+}
+
+.children {
+  display: inline-block;
+  font-size: 0 ;
+}
+
+[dir=ltr] .children {
+  margin-right: var(--zd_size10) ;
+}
+
+[dir=rtl] .children {
+  margin-left: var(--zd_size10) ;
+}
+
+.value {
+  composes: dotted flexgrow from '../common/common.module.css';
+}
+
+.user {
+  composes: dflex alignVertical alignHorizontal from '../common/common.module.css';
+  position: absolute;
+  top: 0 ;
+  bottom: 0 ;
+  opacity: 0;
+  visibility: hidden;
+  width: var(--dropdownitem-user-width);
+  border-width: var(--dropdownitem-user-border-width);
+  border-style: var(--dropdownitem-user-border-style);
+  border-color: var(--dropdownitem-user-border-color);
+  cursor: var(--dropdownitem-user-cursor);
+}
+
+[dir=ltr] .user {
+  right: 0 ;
+}
+
+[dir=rtl] .user {
+  left: 0 ;
+}
+
+.list:hover .user {
+  opacity: 1;
+  visibility: visible;
+}