@zohodesk/components 1.0.0-temp-155 → 1.0.0-temp-157

package/lib/ListItem/ListItem.module.css

@@ -1,7 +1,7 @@
 .varClass {
   /* listitem default variables */
   --listitem_text_color: var(--zdt_listitem_default_text);
-  --listitem_padding: 9px 20px;
+  --listitem_padding: var(--zd_size9) var(--zd_size20);
   --listitem_border_width: 0;
   --listitem_border_color: var(--zdt_listitem_default_border);
   --listitem_bg_color: var(--zdt_listitem_default_bg);
@@ -15,17 +15,17 @@
   /* listitem tick icon default variables */
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
 }[dir=ltr] .varClass {
-  --listitem_avatar_margin: 0 15px 0 0
-    /*rtl: 0 0 0 15px*/;
+  --listitem_avatar_margin: 0 var(--zd_size15) 0 0
+    /*rtl: 0 0 0 var(--zd_size15)*/;
 }[dir=rtl] .varClass {
-  --listitem_avatar_margin: 0 0 0 15px;
+  --listitem_avatar_margin: 0 0 0 var(--zd_size15);
 }
 .list {
   composes: varClass;
   position: relative;
   list-style: none;
   color: var(--listitem_text_color);
-  font-size: 13px;
+  font-size: var(--zd_font_size13);
   height: var(--listitem_height);
   min-height: var(--listitem_min_height);
   text-decoration: none;
@@ -48,27 +48,27 @@
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
 [dir=ltr] .small {
-  --listitem_padding: 7px 3px 7px
-    5px
-    /*rtl: 7px 5px 7px 3px*/;
+  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7)
+    var(--zd_size5)
+    /*rtl: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3)*/;
 }
 [dir=rtl] .small {
-  --listitem_padding: 7px 5px 7px 3px;
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
 }
 .medium {
-  --listitem_padding: 7px 20px;
-  --listitem_min_height: 35px;
+  --listitem_padding: var(--zd_size7) var(--zd_size20);
+  --listitem_min_height: var(--zd_size35);
 }
 .large {
-  --listitem_height: 48px;
+  --listitem_height: var(--zd_size48);
 }
 [dir=ltr] .large {
-  --listitem_padding: 10px 3px 10px
-    25px
-    /*rtl: 10px 25px 10px 3px*/;
+  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10)
+    var(--zd_size25)
+    /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3)*/;
 }
 [dir=rtl] .large {
-  --listitem_padding: 10px 25px 10px 3px;
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }
 .value,
 .children {
@@ -82,14 +82,14 @@
   composes: clamp from '../common/common.module.css'
 }
 .iconBox {
-  width: 20px;
+  width: var(--zd_size20);
   text-align: center;
 }
 [dir=ltr] .iconBox {
-  margin-right: 10px;
+  margin-right: var(--zd_size10);
 }
 [dir=rtl] .iconBox {
-  margin-left: 10px;
+  margin-left: var(--zd_size10);
 }
 .iconBox,
 .leftAvatar {
@@ -169,11 +169,11 @@
 }
 
 [dir=ltr] .tickIcon, [dir=ltr] .defaultTick, [dir=ltr] .darkTick {
-  right: 20px;
+  right: var(--zd_size20);
 }
 
 [dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
-  left: 20px;
+  left: var(--zd_size20);
 }
 .defaultTick {
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
@@ -185,32 +185,32 @@
   display: block;
 }
 [dir=ltr] .smallwithTick {
-  --listitem_padding: 7px 39px 7px
-    5px
-    /*rtl: 7px 5px 7px 39px*/;
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7)
+    var(--zd_size5)
+    /*rtl: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39)*/;
 }
 [dir=rtl] .smallwithTick {
-  --listitem_padding: 7px 5px 7px 39px;
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
 }
 [dir=ltr] .mediumwithTick {
-  --listitem_padding: 7px 39px 7px
-    20px
-    /*rtl: 7px 20px 7px 39px*/;
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7)
+    var(--zd_size20)
+    /*rtl: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39)*/;
 }
 [dir=rtl] .mediumwithTick {
-  --listitem_padding: 7px 20px 7px 39px;
+  --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
 }
 [dir=ltr] .largewithTick {
-  --listitem_padding: 10px 39px 10px
-    25px
-    /*rtl: 10px 25px 10px 39px*/;
+  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10)
+    var(--zd_size25)
+    /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39)*/;
 }
 [dir=rtl] .largewithTick {
-  --listitem_padding: 10px 25px 10px 39px;
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
 }
 .responsiveHeight {
-  --listitem_min_height: 45px;
-  font-size: 15px;
-  padding-top: 10px;
-  padding-bottom: 10px;
+  --listitem_min_height: var(--zd_size45);
+  font-size: var(--zd_font_size15);
+  padding-top: var(--zd_size10);
+  padding-bottom: var(--zd_size10);
 }

package/lib/MultiSelect/MultiSelect.module.css

@@ -5,7 +5,7 @@
   cursor: not-allowed;
 }
 .container {
-  max-height: 120px;
+  max-height: var(--zd_size120);
   composes: oflowy from '../common/common.module.css';
 }
 .hasBorder {
@@ -42,17 +42,17 @@
 }
 
 .container.medium {
-  padding-bottom: 8px;
+  padding-bottom: var(--zd_size8);
 }
 
 .container.xmedium {
-  min-height: 30px;
-  padding-bottom: 3px;
+  min-height: var(--zd_size30);
+  padding-bottom: var(--zd_size3);
 }
 
 .delete {
   font: inherit;
-  padding: 2px 6px;
+  padding: var(--zd_size2) var(--zd_size6);
   cursor: pointer;
   border: 0;
   background-color: var(--zdt_multiselect_delete_bg);
@@ -86,19 +86,19 @@
 }
 
 [dir=ltr] .container.xmedium .tag {
-  margin: 2px 10px 0 0;
+  margin: var(--zd_size2) var(--zd_size10) 0 0;
 }
 
 [dir=rtl] .container.xmedium .tag {
-  margin: 2px 0 0 10px;
+  margin: var(--zd_size2) 0 0 var(--zd_size10);
 }
 
 [dir=ltr] .container.medium .tag {
-  margin: 5px 10px 0 0;
+  margin: var(--zd_size5) var(--zd_size10) 0 0;
 }
 
 [dir=rtl] .container.medium .tag {
-  margin: 5px 0 0 10px;
+  margin: var(--zd_size5) 0 0 var(--zd_size10);
 }
 .responsiveParent{
   width: 100%;
@@ -112,21 +112,21 @@
 }
 
 .small {
-  max-height: 200px;
+  max-height: var(--zd_size200);
 }
 
 .medium {
-  max-height: 350px;
+  max-height: var(--zd_size350);
 }
 
 .large {
-  max-height: 400px;
+  max-height: var(--zd_size400);
 }
 
 .commonMessage {
-  font-size: 14px;
+  font-size: var(--zd_font_size14);
   composes: semibold from '../common/common.module.css';
-  padding: 12px 15px;
+  padding: var(--zd_size12) var(--zd_size15);
 }
 .default,
 .dark {
@@ -158,10 +158,10 @@
   visibility: hidden;
 }
 .custmSpanMedium {
-  height: 35px;
+  height: var(--zd_size35);
 }
 .custmSpanXmedium {
-  height: 28px;
+  height: var(--zd_size28);
 }
 .custmInputWrapper {
   position: absolute;
@@ -175,33 +175,32 @@
   right: 0;
 }
 .title {
-  margin-bottom: 6px;
+  margin-bottom: var(--zd_size6);
 }
 .groupTitle {
-  margin: 6px 0;
+  margin: var(--zd_size6) 0;
 }
 .loader {
-  padding: 10px;
+  padding: var(--zd_size10);
 }
 .iconContainer {
-  padding-top: 3px
+  padding-top: var(--zd_size3)
 }
 [dir=ltr] .clearIconSpace {
-  padding-right: 37px
+  padding-right: var(--zd_size37)
 }
 [dir=rtl] .clearIconSpace {
-  padding-left: 37px
+  padding-left: var(--zd_size37)
 }
 .search{
-  /*  Variable:Ignore  */
   padding: 0px 20px;
 }
 .more {
-  font-size: 14px;
+  font-size: var(--zd_font_size14);
   color: var(--zdt_multiselect_more_text);
   font-family: inherit;
   cursor: pointer;
-  margin-top: 5px;
+  margin-top: var(--zd_size5);
   background-color: var(--zdt_multiselect_delete_bg);
   border: 0;
 }

package/lib/MultiSelect/SelectedOptions.module.css

@@ -2,14 +2,14 @@
   max-width: 100%;
 }
 [dir=ltr] .xmedium {
-  margin: 0 10px 2px 0;
+  margin: 0 var(--zd_size10) var(--zd_size2) 0;
 }
 [dir=rtl] .xmedium {
-  margin: 0 0 2px 10px;
+  margin: 0 0 var(--zd_size2) var(--zd_size10);
 }
 [dir=ltr] .medium {
-  margin: 5px 10px 0 0;
+  margin: var(--zd_size5) var(--zd_size10) 0 0;
 }
 [dir=rtl] .medium {
-  margin: 5px 0 0 10px;
+  margin: var(--zd_size5) 0 0 var(--zd_size10);
 }

package/lib/Radio/Radio.module.css

@@ -1,16 +1,16 @@
 .varClass {
   /* radio default variables */
-  --radio_width: 16px;
-  --radio_height: 16px;
+  --radio_width: var(--zd_size16);
+  --radio_height: var(--zd_size16);
   --radio_bg_color: none;
-  --radio_stroke_width: 2px;
+  --radio_stroke_width: var(--zd_size2);
   --radio_stroke_color: var(--zdt_radio_default_stroke);
   --radio_fill: none;
   --radio_inner_stroke_width: 0;
 }[dir=ltr] .varClass {
-  --radio_label_margin: 0 0 0 6px/*rtl: 0 6px 0 0*/;
+  --radio_label_margin: 0 0 0 var(--zd_size6)/*rtl: 0 var(--zd_size6) 0 0*/;
 }[dir=rtl] .varClass {
-  --radio_label_margin: 0 6px 0 0;
+  --radio_label_margin: 0 var(--zd_size6) 0 0;
 }
 .container {
   composes: varClass;
@@ -38,12 +38,12 @@
 }
 
 .medium {
-  --radio_width: 16px;
-  --radio_height: 16px;
+  --radio_width: var(--zd_size16);
+  --radio_height: var(--zd_size16);
 }
 .small {
-  --radio_width: 13px;
-  --radio_height: 13px;
+  --radio_width: var(--zd_size13);
+  --radio_height: var(--zd_size13);
 }
 .radioLabel {
   font-size: 0;

package/lib/ResponsiveDropBox/ResponsiveDropBox.module.css

@@ -2,5 +2,5 @@
   max-height: 70vh;
 }
 .boxPadding{
-  padding-bottom: 10px;
+  padding-bottom: var(--zd_size10);
 }

package/lib/Ribbon/Ribbon.module.css

@@ -3,7 +3,7 @@
   --ribbon_padding: 0;
   --ribbon_text_color: var(--zdt_ribbon_default_text);
   --ribbon_text_transform: none;
-  --ribbon_font_size: 13px;
+  --ribbon_font_size: var(--zd_font_size13);
   --ribbon_bg_color: var(--zdt_ribbon_default_bg);
   --ribbon_box_shadow: none;
   --ribbon_border_width: 0;
@@ -13,22 +13,22 @@
   /* flag ribbon default variable */
 
   /* tag ribbon default variables */
-  --ribbon_tag_before_top: 3px;
+  --ribbon_tag_before_top: var(--zd_size3);
   --ribbon_tag_before_border_style: solid;
   --ribbon_tag_before_border_color: var(--zdt_ribbon_default_tag_border);
-  --ribbon_tag_before_width: 20px;
-  --ribbon_tag_before_height: 20px;
-  --ribbon_tag_before_left: calc(10px * -1);
+  --ribbon_tag_before_width: var(--zd_size20);
+  --ribbon_tag_before_height: var(--zd_size20);
+  --ribbon_tag_before_left: calc(var(--zd_size10) * -1);
   --ribbon_tag_before_border_radius: 3px 0 0 0;
 }[dir=ltr] .varClass {
-  --ribbon_flag_border_width: 14px 12px 14px 0
-    /*rtl: 14px 0 14px 12px*/
+  --ribbon_flag_border_width: var(--zd_size14) var(--zd_size12) var(--zd_size14) 0
+    /*rtl: var(--zd_size14) 0 var(--zd_size14) var(--zd_size12)*/
   ;
   --ribbon_tag_before_border_width: 1px 0 0 1px
     /*rtl: 1px 1px 0 0*/
   ;
 }[dir=rtl] .varClass {
-  --ribbon_flag_border_width: 14px 12px 14px 0  ;
+  --ribbon_flag_border_width: var(--zd_size14) var(--zd_size12) var(--zd_size14) 0  ;
   --ribbon_tag_before_border_width: 1px 0 0 1px  ;
 }
 
@@ -60,26 +60,26 @@
 .default {
   composes: semibold from '../common/common.module.css';
   display: block;
-  --ribbon_padding: 5px 20px;
+  --ribbon_padding: var(--zd_size5) var(--zd_size20);
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
   text-align: center;
 }
 
 .small {
-  --ribbon_font_size: 9px;
+  --ribbon_font_size: var(--zd_font_size9);
 }
 
 .medium {
-  --ribbon_font_size: 11px;
+  --ribbon_font_size: var(--zd_font_size11);
 }
 
 .large {
-  --ribbon_font_size: 13px;
+  --ribbon_font_size: var(--zd_font_size13);
 }
 
 .xlarge {
-  --ribbon_font_size: 14px;
+  --ribbon_font_size: var(--zd_font_size14);
 }
 
 .palette_default {
@@ -212,29 +212,26 @@
   composes: dotted from '../common/common.module.css';
   display: block;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
-  --ribbon_line_height: 20px;
+  --ribbon_line_height: var(--zd_size20);
   --ribbon_text_transform: uppercase;
 }
 
 [dir=ltr] .flag {
-  --ribbon_padding: 4px 24px 4px 6px
-    /*rtl: 4px 6px 4px 24px*/
+  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6)
+    /*rtl: var(--zd_size4) var(--zd_size6) var(--zd_size4) var(--zd_size24)*/
   ;
 }
 
 [dir=rtl] .flag {
-  --ribbon_padding: 4px 24px 4px 6px  ;
+  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6)  ;
 }
 
 .flag::after {
   position: absolute;
-  /*  Variable:Ignore  */
   top: -1px;
-  /*  Variable:Ignore  */
-  /*  Variable:Ignore  */
   bottom: -1px;
   content: '';
-  width: 12px;
+  width: var(--zd_size12);
   border-style: solid;
   transform: translateZ(0);
   border-width: var(--ribbon_flag_border_width);
@@ -260,8 +257,8 @@
   display: block;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
-  --ribbon_padding: 6px 10px;
-  --ribbon_line_height: 20px;
+  --ribbon_padding: var(--zd_size6) var(--zd_size10);
+  --ribbon_line_height: var(--zd_size20);
   text-align: center;
 }
 
@@ -270,8 +267,8 @@
   position: absolute;
   content: '';
   top: 100%;
-  height: 10px;
-  width: 10px;
+  height: var(--zd_size10);
+  width: var(--zd_size10);
 }
 
 .ribbon::after, .ribbon::before {
@@ -309,7 +306,7 @@
 .tag {
   composes: semibold from '../common/common.module.css';
   display: inline-block;
-  height: 28px;
+  height: var(--zd_size28);
   border-style: solid;
   border-color: var(--zdt_ribbon_default_tag_border);
 }
@@ -321,16 +318,17 @@
   border-radius: 0 3px 3px 0
     /*rtl: 3px 0 0 3px*/
   ;
-  margin-left: 13px;
-  padding: 6px 8px 6px 5px
-;
+  margin-left: var(--zd_size13);
+  padding: var(--zd_size6) var(--zd_size8) var(--zd_size6) var(--zd_size5)
+    /*rtl: var(--zd_size6) var(--zd_size5) var(--zd_size6) var(--zd_size8)*/
+  ;
 }
 
 [dir=rtl] .tag {
   border-width: 1px 0 1px 1px  ;
   border-radius: 3px 0 0 3px  ;
-  margin-right: 13px;
-  padding: 6px 5px 6px 8px;
+  margin-right: var(--zd_size13);
+  padding: var(--zd_size6) var(--zd_size5) var(--zd_size6) var(--zd_size8)  ;
 }
 
 .tag::before {
@@ -359,19 +357,19 @@
 .box {
   display: inline-block;
   --ribbon_bg_color: var(--zdt_ribbon_white_bg);
-  --ribbon_padding: 5px 8px;
+  --ribbon_padding: var(--zd_size5) var(--zd_size8);
   border-radius: 3px;
 }
 
 .stamp {
   display: inline-block;
-  --ribbon_padding: 3px 5px;
+  --ribbon_padding: var(--zd_size3) var(--zd_size5);
   --ribbon_text_transform: uppercase;
 }
 
 .sticker {
   display: block;
-  height: 18px;
+  height: var(--zd_size18);
   line-height: var(--zd_size11);
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
@@ -379,7 +377,7 @@
   border-width: 1px 0;
   border-style: solid;
   border-color: var(--zdt_ribbon_flag_white_border);
-  padding: 3px 10px;
+  padding: var(--zd_size3) var(--zd_size10);
 }
 
 .after,
@@ -387,23 +385,23 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  width: 10px;
+  width: var(--zd_size10);
 }
 
 [dir=ltr] .after {
-  right: -2px;
+  right: calc(var(--zd_size2) * -1);
 }
 
 [dir=rtl] .after {
-  left: -2px;
+  left: calc(var(--zd_size2) * -1);
 }
 
 [dir=ltr] .before {
-  left: -8px;
+  left: calc(var(--zd_size8) * -1);
 }
 
 [dir=rtl] .before {
-  right: -8px;
+  right: calc(var(--zd_size8) * -1);
 }
 
 .after::after,
@@ -411,8 +409,8 @@
 .before::after,
 .before::before {
   position: absolute;
-  height: 7px;
-  width: 7px;
+  height: var(--zd_size7);
+  width: var(--zd_size7);
   content: '';
 }
 
@@ -445,11 +443,11 @@
 }
 
 [dir=ltr] .children {
-  margin-right: 4px;
+  margin-right: var(--zd_size4);
 }
 
 [dir=rtl] .children {
-  margin-left: 4px;
+  margin-left: var(--zd_size4);
 }
 
 .childText {

package/lib/Select/Select.module.css

@@ -2,24 +2,24 @@
   cursor: pointer;
 }
 .small {
-  max-height: 200px;
+  max-height: var(--zd_size200);
 }
 .medium {
-  max-height: 350px;
+  max-height: var(--zd_size350);
 }
 .large {
-  max-height: 400px;
+  max-height: var(--zd_size400);
 }
 .emptyState {
-  font-size: 14px;
+  font-size: var(--zd_font_size14);
   color: var(--zdt_select_emptystate_text);
   composes: semibold from '../common/common.module.css';
 }
 .box_small .emptyState {
-  padding: 12px 6px;
+  padding: var(--zd_size12) var(--zd_size6);
 }
 .box_medium .emptyState {
-  padding: 12px 15px;
+  padding: var(--zd_size12) var(--zd_size15);
 }
 .hide {
   composes: vishidden from '../common/common.module.css';
@@ -28,26 +28,26 @@
   position: relative;
 }
 .arrowIcon {
-  height: 8px;
+  height: var(--zd_size8);
   line-height: var(--zd_size8);
 }
 .small.search {
-  padding: 0 5px;
+  padding: 0 var(--zd_size5);
 }
 .medium.search {
-  padding: 3px 20px 0;
+  padding: var(--zd_size3) var(--zd_size20) 0;
 }
 .title {
-  margin-bottom: 6px;
+  margin-bottom: var(--zd_size6);
 }
 .groupTitle {
-  margin: 6px 0;
+  margin: var(--zd_size6) 0;
 }
 .listItemContainer {
-  padding: 10px 0;
+  padding: var(--zd_size10) 0;
 }
 .responsivelistItemContainer {
-  padding: 10px 0 0;
+  padding: var(--zd_size10) 0 0;
 }
 .readonly {
   --textboxicon_icon_cursor: not-allowed;
@@ -68,7 +68,7 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  width: 30px;
+  width: var(--zd_size30);
 }
 
 [dir=ltr] .leftIcon {
@@ -79,17 +79,17 @@
   right: 0;
 }
 [dir=ltr] .iconSelect {
-  padding-left: 30px;
+  padding-left: var(--zd_size30);
 }
 [dir=rtl] .iconSelect {
-  padding-right: 30px;
+  padding-right: var(--zd_size30);
 }
 
 .dropBoxList {
-  padding: 10px 0;
+  padding: var(--zd_size10) 0;
 }
 .responsivedropBoxList{
-  padding: 10px 0 0 0;
+  padding: var(--zd_size10) 0 0 0;
 }
 .rotate {
   transform: rotateX(180deg);
@@ -105,5 +105,5 @@
   visibility: visible;
 }
 .loader {
-  padding: 10px;
+  padding: var(--zd_size10);
 }