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

package/lib/Select/Select.module.css

@@ -3,29 +3,29 @@
 }
 
 .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 {
@@ -37,32 +37,32 @@
 }
 /* css:lineheight-validation:ignore */
 .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 {
@@ -85,22 +85,33 @@
 
 .leftIcon {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 30px;
+  top: 0 ;
+  bottom: 0 ;
+  width: var(--zd_size30) ;
 }
 
-.iconSelect {
-  padding-left: 30px;
+[dir=ltr] .leftIcon {
+  left: 0 ;
+}
+
+[dir=rtl] .leftIcon {
+  right: 0 ;
+}
+
+[dir=ltr] .iconSelect {
+  padding-left: var(--zd_size30) ;
+}
+
+[dir=rtl] .iconSelect {
+  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 {
@@ -120,5 +131,5 @@
 }
 
 .loader {
-  padding: 10px;
+  padding: var(--zd_size10) ;
 }

package/lib/Stencils/Stencils.module.css

@@ -1,6 +1,6 @@
 .varClass {
   /* stencils default variables */
-  --stencil_height: 9px;
+  --stencil_height: var(--zd_size9);
   --stencil_width: 100%;
   --stencil_border_radius: 5px;
 }
@@ -11,14 +11,23 @@
   border-radius: var(--stencil_border_radius);
 }
 .stencil {
-  animation-name: placeHolderShimmer;
+  background-size: 800px 1px;
+}
+[dir=ltr] .stencil {
+  animation-name:  placeHolderShimmer-ltr ;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-duration: var(--zd_transition10);
+  animation-timing-function: linear;
+}
+[dir=rtl] .stencil {
+  animation-name:  placeHolderShimmer-rtl ;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-duration: var(--zd_transition10);
   animation-timing-function: linear;
-  background-size: 800px 1px;
 }
-@keyframes placeHolderShimmer {
+@keyframes placeHolderShimmer-ltr {
   0% {
     background-position: calc(var(--zd_size468) * -1) 0;
   }
@@ -27,10 +36,19 @@
     background-position: var(--zd_size468) 0;
   }
 }
+@keyframes placeHolderShimmer-rtl {
+  0% {
+    background-position: calc(100% - (var(--zd_size468) * -1)) 0;
+  }
+
+  100% {
+    background-position: var(--zd_size468) 100%;
+  }
+}
 
 .rectangular {
   composes: stencil;
-  --stencil_height: 9px;
+  --stencil_height: var(--zd_size9);
   --stencil_border_radius: 5px;
 }
 .primary {
@@ -47,16 +65,16 @@
 }
 
 .small {
-  --stencil_width: 110px;
+  --stencil_width: var(--zd_size110);
 }
 .default {
   --stencil_width: 100%;
 }
 .medium {
-  --stencil_width: 170px;
+  --stencil_width: var(--zd_size170);
 }
 .large {
-  --stencil_width: 220px;
+  --stencil_width: var(--zd_size220);
 }
 
 .circle {
@@ -64,15 +82,15 @@
   --stencil_border_radius: 50%;
 }
 .clarge {
-  --stencil_width: 42px;
-  --stencil_height: 42px;
+  --stencil_width: var(--zd_size42);
+  --stencil_height: var(--zd_size42);
 }
 .cmedium,
 .cdefault {
-  --stencil_width: 30px;
-  --stencil_height: 30px;
+  --stencil_width: var(--zd_size30);
+  --stencil_height: var(--zd_size30);
 }
 .csmall {
-  --stencil_width: 20px;
-  --stencil_height: 20px;
+  --stencil_width: var(--zd_size20);
+  --stencil_height: var(--zd_size20);
 }

package/lib/Switch/Switch.module.css

@@ -37,13 +37,11 @@
   {
   --switch_off_bg_color: var(--zdt_switch_effect_off_bg);
 }
-
-/*rtl:begin:ignore*/
 .label:after {
   content: '';
   display: block;
   position: absolute;
-  right: 50%;
+  right: 50% ;
   transition: all var(--zd_transition2);
   box-shadow: var(--switch_cricle_box_shadow);
   background-color: var(--switch_circle_bg_color);
@@ -55,59 +53,49 @@
 }
 
 .checked+.label:after {
-  right: -1px;
+  right: calc( var(--zd_size1) * -1 ) ;
 }
 
-/*rtl:end:ignore*/
-
 .input {
   display: none;
 }
 
 .small {
-  height: 14px;
-  width: 28px;
+  height: var(--zd_size14) ;
+  width: var(--zd_size28) ;
 }
-
-/*rtl:begin:ignore*/
 .switch_smallLabel {
-  height: 9px;
-  width: 22px;
-  top: -2px;
-  left: 2px;
+  height: var(--zd_size9) ;
+  width: var(--zd_size22) ;
+  top: calc( var(--zd_size2) * -1 ) ;
+  left: var(--zd_size2) ;
 }
-
-/*rtl:end:ignore*/
 .switch_smallLabel:after {
-  width: 12px;
-  height: 12px;
-  top: -2px;
+  width: var(--zd_size12) ;
+  height: var(--zd_size12) ;
+  top: calc( var(--zd_size2) * -1 ) ;
 }
 
 .medium {
-  height: 18px;
-  width: 34px;
+  height: var(--zd_size18) ;
+  width: var(--zd_size34) ;
 }
-
-/*rtl:begin:ignore*/
 .switch_mediumLabel {
-  height: 13px;
-  width: 31px;
-  top: 2px;
-  left: 2px;
+  height: var(--zd_size13) ;
+  width: var(--zd_size31) ;
+  top: var(--zd_size2) ;
+  left: var(--zd_size2) ;
 }
-
-/*rtl:end:ignore*/
 .switch_mediumLabel:after {
-  width: 18px;
-  height: 18px;
-  top: -3px;
+  width: var(--zd_size18) ;
+  height: var(--zd_size18) ;
+  top: calc( var(--zd_size3) * -1 ) ;
 }
 
 .input:disabled+.label {
+  opacity: 0.4;
   border-color: var(--zdt_switch_default_off_bg);
   cursor: not-allowed;
-  opacity: 0.4;
 }
 
 .switch {
@@ -128,6 +116,13 @@
 
 .switch+label {
   position: relative;
-  top: -1px;
-  margin-left: 12px;
+  top: calc( var(--zd_size1) * -1 ) ;
+}
+
+[dir=ltr] .switch+label {
+  margin-left: var(--zd_size12) ;
+}
+
+[dir=rtl] .switch+label {
+  margin-right: var(--zd_size12) ;
 }

package/lib/Tab/Tab.module.css

@@ -1,32 +1,26 @@
 .tab {
   text-transform: uppercase;
-  cursor: pointer;
   letter-spacing: 0.6px;
   text-decoration: none;
+  cursor: pointer;
 }
-
 .vertical {
-  height: 100%;
+  height: 100% ;
 }
-
 .horizontal {
-  width: 100%;
-  max-width: 100%;
+  width: 100% ;
+  max-width: 100% ;
 }
-
 .textContainer,
 .tabText {
-  max-width: inherit;
+  max-width: inherit ;
 }
-
 .tabText {
   composes: dotted from '../common/common.module.css';
 }
-
 .disabled {
   cursor: not-allowed;
 }
-
 .border {
   border-bottom: 1px solid var(--zdt_tab_default_border);
 }
@@ -36,76 +30,71 @@
 .delta {
   transition: all var(--zd_transition2);
 }
-
 .alpha {
-  padding: 0 18px;
-  font-size: 11px;
+  font-size: var(--zd_font_size11) ;
   line-height: 3;
+  padding: 0 var(--zd_size18) ;
 }
-
 .tabAlpha {
   composes: alpha;
   color: var(--zdt_tab_alpha_text);
 }
-
 .alphaHover:hover {
-  color: var(--zdt_base_color);
+  color: var(--zdt_tab_alpha_hover_text);
   background-color: var(--zdt_tab_alpha_hover_bg);
 }
-
 .alphaActive {
   composes: alpha;
   color: var(--zdt_tab_alpha_active_text);
 }
-
-.alphaActive_border,
-.betaActive_border {
+.alphaActive_border, .betaActive_border {
   border-color: var(--zdt_tab_alpha_active_border);
 }
-
 .deltaActive_border {
   border-color: var(--zdt_tab_delta_active_border);
 }
-
 .beta {
-  padding: 0 4px;
-  font-size: 14px;
+  font-size: var(--zd_font_size14) ;
   line-height: 4.2857;
-  margin-right: 40px;
   text-transform: capitalize;
+  padding: 0 var(--zd_size4) ;
+}
+[dir=ltr] .beta {
+  margin-right: var(--zd_size40) ;
+}
+[dir=rtl] .beta {
+  margin-left: var(--zd_size40) ;
 }
-
 .tabBeta {
   composes: beta;
   color: var(--zdt_tab_alpha_text);
 }
-
 .betaHover:hover {
-  color: var(--zdt_base_color);
+  color: var(--zdt_tab_alpha_hover_text);
 }
-
 .betaActive {
   composes: beta;
-  color: var(--zdt_base_color);
+  color: var(--zdt_tab_alpha_hover_text);
 }
-
 .delta {
-  padding: 0 4px;
-  font-size: 11px;
+  font-size: var(--zd_font_size11) ;
   line-height: 3;
-  margin-right: 10px;
+  padding: 0 var(--zd_size4) ;
+}
+[dir=ltr] .delta {
+  margin-right: var(--zd_size10) ;
+}
+[dir=rtl] .delta {
+  margin-left: var(--zd_size10) ;
 }
-
 .tabDelta {
   composes: delta;
   color: var(--zdt_tab_alpha_text);
 }
-
 .deltaHover:hover {
   color: var(--zdt_tab_alpha_active_text);
 }
-
 .deltaActive {
   composes: delta;
   color: var(--zdt_tab_alpha_active_text);
-}
+}

package/lib/Tab/Tabs.module.css

@@ -5,12 +5,16 @@
 }
 
 .alpha {
-  height: 35px;
-  background-color: var(--zdt_base_bg);
+  height: var(--zd_size35) ;
+  background-color: var(--zdt_tabs_alpha_bg);
 }
 
-.alpha_padding {
-  padding-left: 15px;
+[dir=ltr] .alpha_padding {
+  padding-left: var(--zd_size15) ;
+}
+
+[dir=rtl] .alpha_padding {
+  padding-right: var(--zd_size15) ;
 }
 
 .alpha_border {
@@ -23,32 +27,50 @@
   content: '';
   position: absolute;
   z-index: -2;
-  width: 76%;
-  bottom: 0;
-  height: 10px;
-  left: 12%;
+  width: 76% ;
+  bottom: 0 ;
+  height: var(--zd_size10) ;
   border-radius: 100px / 5px;
   box-shadow: var(--zd_bs_tabs_shadow);
 }
 
+[dir=ltr] .alpha::after {
+  left: 12% ;
+}
+
+[dir=rtl] .alpha::after {
+  right: 12% ;
+}
+
 .alpha:before {
   content: '';
   position: absolute;
   z-index: -1;
-  width: 100%;
+  width: 100% ;
+  height: 100% ;
+  top: 0 ;
   background: inherit;
-  height: 100%;
-  left: 0;
-  top: 0;
+}
+
+[dir=ltr] .alpha:before {
+  left: 0 ;
+}
+
+[dir=rtl] .alpha:before {
+  right: 0 ;
 }
 
 .beta {
-  height: 61px;
-  background-color: var(--zdt_base_bg);
+  height: var(--zd_size61) ;
+  background-color: var(--zdt_tabs_alpha_bg);
+}
+
+[dir=ltr] .beta_padding {
+  padding-left: var(--zd_size13) ;
 }
 
-.beta_padding {
-  padding-left: 13px;
+[dir=rtl] .beta_padding {
+  padding-right: var(--zd_size13) ;
 }
 
 .beta_border {
@@ -56,12 +78,16 @@
 }
 
 .delta {
-  height: 35px;
-  background-color: var(--zdt_base_bg);
+  height: var(--zd_size35) ;
+  background-color: var(--zdt_tabs_alpha_bg);
 }
 
-.delta_padding {
-  padding-left: 10px;
+[dir=ltr] .delta_padding {
+  padding-left: var(--zd_size10) ;
+}
+
+[dir=rtl] .delta_padding {
+  padding-right: var(--zd_size10) ;
 }
 
 .delta_border {
@@ -73,12 +99,12 @@
 }
 
 .maxWidth {
-  max-width: 100%;
+  max-width: 100% ;
 }
 
 .highlight {
   position: absolute;
-  bottom: 0;
+  bottom: 0 ;
   border-bottom: 1px solid var(--zdt_tabs_highlight_border);
 }
 
@@ -92,24 +118,20 @@
 }
 
 .menuBox {
-  max-height: 220px;
+  max-height: var(--zd_size220) ;
 }
-
-/*rtl:begin:ignore*/
 .bottomRightToLeft,
 .topRightToLeft,
 .bottomCenterToLeft {
-  right: calc(var(--tab_position_gap) * -1);
+  right: calc(var(--tab_position_gap) * -1); 
 }
 
 .bottomLeftToRight,
 .topLeftToRight,
 .bottomCenterToRight {
-  left: calc(var(--tab_position_gap) * -1);
+  left: calc(var(--tab_position_gap) * -1); 
 }
 
-/*rtl:end:ignore*/
-
 .hidden {
   visibility: hidden;
 }