@zohodesk/components 1.0.0-temp-190.2 → 1.0.0-temp-191

package/lib/DropDown/DropDownItem.module.css

@@ -1,67 +1,54 @@
 .varClass {
   /* dropdownitem default variables */
-  --dropdownitem-padding: var(--zd_size9) var(--zd_size19);
+  --dropdownitem-padding: 9px 19px;
   --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-width: 42px;
+  --dropdownitem-user-border-width: 0 0 0 1px
+    /*rtl: 0 1px 0 0*/
+  ;
   --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) ;
-  /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
   padding: var(--dropdownitem-padding);
+  color: var(--zdt_base_color);
+  font-size: 13px;
+  border-width: 0 0 0 1px
+    /*rtl: 0 1px 0 0*/
+  ;
   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);
+.padding {
+  --dropdownitem-padding: 0 50px 0 0
+    /*rtl: 0 0 0 50px*/
+  ;
 }
 
 .children {
+  margin-right: 10px;
   display: inline-block;
-  font-size: 0 ;
-}
-
-[dir=ltr] .children {
-  margin-right: var(--zd_size10) ;
-}
-
-[dir=rtl] .children {
-  margin-left: var(--zd_size10) ;
+  font-size: 0;
 }
 
 .value {
@@ -71,27 +58,19 @@
 .user {
   composes: dflex alignVertical alignHorizontal from '../common/common.module.css';
   position: absolute;
-  top: 0 ;
-  bottom: 0 ;
+  top: 0;
+  right: 0;
+  bottom: 0;
   opacity: 0;
   visibility: hidden;
   width: var(--dropdownitem-user-width);
-  /* css:theme-validation:ignore */
   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;
-}
+}

package/lib/DropDown/DropDownSearch.module.css

@@ -1,14 +1,14 @@
 .varClass {
   /* dropdownsearch default variables */
-  --dropdownsearch-padding: 0 var(--zd_size15) 0;
+  --dropdownsearch-padding: 0 15px 0;
 }
 .search {
   composes: varClass;
   padding: var(--dropdownsearch-padding);
 }
 .smallSearch {
-  --dropdownsearch-padding: 0 var(--zd_size5) 0;
+  --dropdownsearch-padding: 0 5px 0;
 }
 .mediumSearch {
-  --dropdownsearch-padding: 0 var(--zd_size15) 0;
+  --dropdownsearch-padding: 0 15px 0;
 }

package/lib/DropDown/DropDownSeparator.module.css

@@ -1,7 +1,7 @@
 .separator {
-  height: var(--zd_size1) ;
+  height: 1px;
   border-width: 0 0 1px 0;
   border-style: solid;
   border-color: var(--zdt_dropdown_user_default_border);
-  margin: var(--zd_size5) 0 ;
+  margin: 5px 0;
 }

package/lib/Heading/Heading.module.css

@@ -1,5 +1,5 @@
 .reset {
-  font-size: inherit ;
+  font-size: inherit;
   font-weight: initial;
-  margin: initial ;
+  margin: initial;
 }

package/lib/Label/Label.module.css

@@ -1,58 +1,69 @@
 .varClass {
   /* label default variables */
-  --label_font_size: var(--zd_font_size14);
-  --label_text_color: var(--zdt_label_default_text);
+  --label_font_size: 14px;
+  --label_text_color: var(--zdt_base_color);
   --label_font_family: var(--zd_regular);
   --label_cursor: default;
   --label_line_height: 1.286;
 }
+
 /* css:lineheight-validation:ignore */
 .label {
   composes: varClass;
   vertical-align: middle;
   line-height: var(--label_line_height);
   font-size: var(--label_font_size);
-  /* css:theme-validation:ignore */
   color: var(--label_text_color);
   font-family: var(--label_font_family);
   cursor: var(--label_cursor);
 }
+
 .xsmall {
-  --label_font_size: var(--zd_font_size12);
-  --label_line_height:1.5;
+  --label_font_size: 12px;
+  --label_line_height: 1.5;
 }
+
 .small {
-  --label_font_size: var(--zd_font_size13);
-  --label_line_height:1.385;
+  --label_font_size: 13px;
+  --label_line_height: 1.385;
 }
+
 .medium {
-  --label_font_size: var(--zd_font_size14);
-  --label_line_height:1.286;
+  --label_font_size: 14px;
+  --label_line_height: 1.286;
 }
+
 .large {
-  --label_font_size: var(--zd_font_size26);
-  --label_line_height:0.6923;
+  --label_font_size: 26px;
+  --label_line_height: 0.6923;
   composes: semibold from '../common/common.module.css';
 }
+
 .pointer {
   --label_cursor: pointer;
 }
+
 .cursor {
   --label_cursor: default;
 }
+
 .title {
   display: block;
 }
+
 .subtitle {
   display: inline-block;
 }
+
 .font_default {
   --label_font_family: var(--zd_regular);
 }
+
 .font_primary {
   --label_font_family: var(--zd_semibold);
   composes: ftsmooth from '../common/common.module.css';
 }
+
 .dotted {
   composes: dotted from '../common/common.module.css';
-}
+}

package/lib/Label/LabelColors.module.css

@@ -1,21 +1,27 @@
 .default {
-  --label_text_color: var(--zdt_label_default_text);
+  --label_text_color: var(--zdt_base_color);
 }
+
 .primary {
   --label_text_color: var(--zdt_label_primary_text);
 }
+
 .secondary {
   --label_text_color: var(--zdt_label_secondary_text);
 }
+
 .danger {
   --label_text_color: var(--zdt_label_danger_text);
 }
+
 .mandatory {
   --label_text_color: var(--zdt_label_mandatory_text);
 }
+
 .disable {
   --label_text_color: var(--zdt_label_disable_text);
 }
+
 .dark {
   --label_text_color: var(--zdt_label_dark_text);
 }

package/lib/Layout/Layout.module.css

@@ -11,8 +11,8 @@
 }
 
 .cover {
-  width: 100% ;
-  height: 100% ;
+  width: 100%;
+  height: 100%;
 }
 
 /* .flex {
@@ -67,8 +67,8 @@
   -webkit-box-flex: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
-  min-height: 0 ;
-  min-width: 0 ;
+  min-height: 0;
+  min-width: 0;
 }
 
 .shrinkOff {
@@ -83,18 +83,18 @@
   -moz-flex-shrink: 1;
   -webkit-flex-shrink: 1;
   -ms-flex-shrink: 1;
-  min-width: 0 ;
+  min-width: 0;
 }
 
 .basis {
-  flex-basis: 0% ;
+  flex-basis: 0%;
   -webkit-flex-basis: 0%;
   -moz-flex-basis: 0%;
   -ms-flex-basis: 0%;
 }
 
 .basisAuto {
-  flex-basis: auto ;
+  flex-basis: auto;
   -webkit-flex-basis: auto;
   -moz-flex-basis: auto;
   -ms-flex-basis: auto;
@@ -146,8 +146,8 @@
 
 .col-3 {
   -ms-flex-preferred-size: 25%;
-  flex-basis: 25% ;
-  max-width: 25% ;
+  flex-basis: 25%;
+  max-width: 25%;
 }
 
 .col-4 {
@@ -164,8 +164,8 @@
 
 .col-6 {
   -ms-flex-preferred-size: 50%;
-  flex-basis: 50% ;
-  max-width: 50% ;
+  flex-basis: 50%;
+  max-width: 50%;
 }
 
 .col-7 {
@@ -182,8 +182,8 @@
 
 .col-9 {
   -ms-flex-preferred-size: 75%;
-  flex-basis: 75% ;
-  max-width: 75% ;
+  flex-basis: 75%;
+  max-width: 75%;
 }
 
 .col-10 {
@@ -200,8 +200,8 @@
 
 .col-12 {
   -ms-flex-preferred-size: 100%;
-  flex-basis: 100% ;
-  max-width: 100% ;
+  flex-basis: 100%;
+  max-width: 100%;
 }
 
 .hCenter {

package/lib/ListItem/ListItem.module.css

@@ -1,9 +1,12 @@
 .varClass {
   /* listitem default variables */
-  --listitem_text_color: var(--zdt_listitem_default_text);
-  --listitem_padding: var(--zd_size9) var(--zd_size20);
+  --listitem_text_color: var(--zdt_base_color);
+  --listitem_padding: 9px 20px;
   --listitem_border_width: 0;
   --listitem_border_color: var(--zdt_listitem_default_border);
+  --listitem_avatar_margin: 0 15px 0 0
+    /*rtl: 0 0 0 15px*/
+  ;
   --listitem_bg_color: var(--zdt_listitem_default_bg);
   --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
   --listitem_height: auto;
@@ -14,89 +17,84 @@
 
   /* listitem tick icon default variables */
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
-}[dir=ltr] .varClass {
-  --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
-}[dir=rtl] .varClass {
-  --listitem_avatar_margin: 0 0 0 var(--zd_size15);
 }
+
 .list {
   composes: varClass;
   position: relative;
   list-style: none;
-  /* css:theme-validation:ignore */
   color: var(--listitem_text_color);
-  font-size: var(--zd_font_size13) ;
-  /* css:theme-validation:ignore */
-  height: var(--listitem_height);
-  min-height: var(--listitem_min_height);
-  text-decoration: none;
+  font-size: 13px;
   padding: var(--listitem_padding);
   border-width: var(--listitem_border_width);
   border-style: solid;
   border-color: var(--listitem_border_color);
+  height: var(--listitem_height);
+  min-height: var(--listitem_min_height);
   cursor: pointer;
+  text-decoration: none;
 }
+
 .list,
 .default,
 .secondary {
-  /* css:theme-validation:ignore */
-}
-.list, .default, .secondary {
   background-color: var(--listitem_bg_color);
 }
-[dir=ltr] .withBorder {
-  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
-}
-[dir=rtl] .withBorder {
-  --listitem_border_width: 0 1px 0 0;
+
+.withBorder {
+  --listitem_border_width: 0 0 0 1px
+    /*rtl: 0 1px 0 0*/
+  ;
 }
+
 .active {
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
-[dir=ltr] .small {
-  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
-}
-[dir=rtl] .small {
-  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
+
+.small {
+  --listitem_padding: 7px 3px 7px 5px
+    /*rtl: 7px 5px 7px 3px*/
+  ;
 }
+
 .medium {
-  --listitem_padding: var(--zd_size7) var(--zd_size20);
-  --listitem_min_height: var(--zd_size35);
+  --listitem_padding: 7px 20px;
+  --listitem_min_height: 35px;
 }
+
 .large {
-  --listitem_height: var(--zd_size48);
-}
-[dir=ltr] .large {
-  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
-}
-[dir=rtl] .large {
-  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
+  --listitem_padding: 10px 3px 10px 25px
+    /*rtl: 10px 25px 10px 3px*/
+  ;
+  --listitem_height: 48px;
 }
+
 .value,
 .children {
   composes: dotted from '../common/common.module.css';
 }
-.value, .multiLineValue {
+
+.value,
+.multiLineValue {
   line-height: 1.5385;
 }
-.multiLineValue{
+
+.multiLineValue {
   word-break: break-word;
   composes: clamp from '../common/common.module.css'
 }
+
 .iconBox {
-  width: var(--zd_size20) ;
+  width: 20px;
+  margin-right: 10px;
   text-align: center;
 }
-[dir=ltr] .iconBox {
-  margin-right: var(--zd_size10) ;
-}
-[dir=rtl] .iconBox {
-  margin-left: var(--zd_size10) ;
-}
+
 .iconBox,
 .leftAvatar {
-  font-size: 0 ;
+  font-size: 0;
 }
+
 .leftAvatar {
   margin: var(--listitem_avatar_margin);
 }
@@ -105,73 +103,76 @@
 .primaryHover,
 .secondaryHover,
 .darkHover {
-  /* css:theme-validation:ignore */
-}
-
-.defaultHover, .primaryHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
 }
+
 .activewithBorder {
+  --listitem_border_width: 0 0 0 1px
+    /*rtl: 0 1px 0 0*/
+  ;
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
-[dir=ltr] .activewithBorder {
-  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
-}
-[dir=rtl] .activewithBorder {
-  --listitem_border_width: 0 1px 0 0;
-}
 
 .defaultHover,
 .defaultEffect:hover
+
 /* .defaultEffect:focus  */
-{
+  {
   --listitem_bg_color: var(--zdt_listitem_highlight_bg);
 }
+
 .primaryHover,
 .primaryEffect:hover
+
 /* .primaryEffect:focus */
- {
+  {
   --listitem_bg_color: var(--zdt_listitem_primary_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_primary_bg);
 }
+
 .secondaryHover,
 .secondaryEffect:hover
+
 /* .secondaryEffect:focus  */
-{
+  {
   --listitem_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_text_color: var(--zdt_listitem_secondary_text);
 }
+
 .darkHover,
 .darkEffect:hover
+
 /* .darkEffect:focus */
- {
+  {
   --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
 }
+
 .activedefault,
 .activeprimary,
 .activesecondary,
 .activedark {
-  /* css:theme-validation:ignore */
-}
-.activedefault, .activeprimary, .activesecondary, .activedark {
   background-color: var(--listitem_active_bg_color);
 }
+
 .activedefault,
 .activedefault:hover,
 .activeprimary,
 .activeprimary:hover {
   --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
 }
+
 .activesecondary {
   --listitem_active_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_text_color: var(--zdt_listitem_secondary_text);
 }
+
 .dark {
   --listitem_bg_color: var(--zdt_listitem_dark_bg);
   --listitem_text_color: var(--zdt_listitem_dark_text);
 }
+
 .activedark {
   --listitem_active_bg_color: var(--zdt_listitem_dark_active_bg);
 }
@@ -180,47 +181,43 @@
 .defaultTick,
 .darkTick {
   position: absolute;
-  /* css:theme-validation:ignore */
   color: var(--listitem_tickicon_color);
+  right: 20px;
 }
 
-[dir=ltr] .tickIcon, [dir=ltr] .defaultTick, [dir=ltr] .darkTick {
-  right: var(--zd_size20) ;
-}
-
-[dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
-  left: var(--zd_size20) ;
-}
 .defaultTick {
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
 }
+
 .darkTick {
   --listitem_tickicon_color: var(--zdt_listitem_dark_tickicon);
 }
-.defaultTick > i {
+
+.defaultTick>i {
   display: block;
 }
-[dir=ltr] .smallwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
-}
-[dir=rtl] .smallwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
-}
-[dir=ltr] .mediumwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
-}
-[dir=rtl] .mediumwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
+
+.smallwithTick {
+  --listitem_padding: 7px 39px 7px 5px
+    /*rtl: 7px 5px 7px 39px*/
+  ;
 }
-[dir=ltr] .largewithTick {
-  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
+
+.mediumwithTick {
+  --listitem_padding: 7px 39px 7px 20px
+    /*rtl: 7px 20px 7px 39px*/
+  ;
 }
-[dir=rtl] .largewithTick {
-  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
+
+.largewithTick {
+  --listitem_padding: 10px 39px 10px 25px
+    /*rtl: 10px 25px 10px 39px*/
+  ;
 }
+
 .responsiveHeight {
-  --listitem_min_height: var(--zd_size45);
-  font-size: var(--zd_font_size15) ;
-  padding-top: var(--zd_size10) ;
-  padding-bottom: var(--zd_size10) ;
-}
+  --listitem_min_height: 45px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  font-size: 15px;
+}

package/lib/MultiSelect/MobileHeader/MobileHeader.module.css

@@ -1,16 +1,19 @@
-.container{
-    padding: 0 var(--zd_size20) var(--zd_size12) var(--zd_size20) ;
-  }
-  .header{
-    padding-bottom: var(--zd_size4) ;
-  }
-  .cardHeading{
-    font-size: var(--zd_font_size16) ;
-    color: var(--zdt_multiselect_res_title_text);
-    composes: bold dotted from '../../common/common.module.css'
-  }
-  .buttonText{
-    font-size: var(--zd_font_size15) ;
-    composes: dotted from '../../common/common.module.css';
-    padding: 0 
-  }
+.container {
+  padding: 0 20px 12px 20px;
+}
+
+.header {
+  padding-bottom: 4px;
+}
+
+.cardHeading {
+  font-size: 16px;
+  color: var(--zdt_multiselect_res_title_text);
+  composes: bold dotted from '../../common/common.module.css'
+}
+
+.buttonText {
+  font-size: 15px;
+  padding: 0;
+  composes: dotted from '../../common/common.module.css'
+}