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

package/lib/Switch/Switch.module.css

@@ -26,7 +26,6 @@
   display: inline-block;
   position: relative;
   transition: box-shadow var(--zd_transition3) ease-in-out;
-  /* css:theme-validation:ignore */
   background-color: var(--switch_off_bg_color);
   border-radius: 20px;
   cursor: pointer;
@@ -38,14 +37,15 @@
   {
   --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);
-  /* css:theme-validation:ignore */
   background-color: var(--switch_circle_bg_color);
   border-radius: var(--switch_circle_border_radius);
 }
@@ -55,49 +55,59 @@
 }
 
 .checked+.label:after {
-  right: calc( var(--zd_size1) * -1 ) ;
+  right: -1px;
 }
 
+/*rtl:end:ignore*/
+
 .input {
   display: none;
 }
 
 .small {
-  height: var(--zd_size14) ;
-  width: var(--zd_size28) ;
+  height: 14px;
+  width: 28px;
 }
+
+/*rtl:begin:ignore*/
 .switch_smallLabel {
-  height: var(--zd_size9) ;
-  width: var(--zd_size22) ;
-  top: calc( var(--zd_size2) * -1 ) ;
-  left: var(--zd_size2) ;
+  height: 9px;
+  width: 22px;
+  top: -2px;
+  left: 2px;
 }
+
+/*rtl:end:ignore*/
 .switch_smallLabel:after {
-  width: var(--zd_size12) ;
-  height: var(--zd_size12) ;
-  top: calc( var(--zd_size2) * -1 ) ;
+  width: 12px;
+  height: 12px;
+  top: -2px;
 }
 
 .medium {
-  height: var(--zd_size18) ;
-  width: var(--zd_size34) ;
+  height: 18px;
+  width: 34px;
 }
+
+/*rtl:begin:ignore*/
 .switch_mediumLabel {
-  height: var(--zd_size13) ;
-  width: var(--zd_size31) ;
-  top: var(--zd_size2) ;
-  left: var(--zd_size2) ;
+  height: 13px;
+  width: 31px;
+  top: 2px;
+  left: 2px;
 }
+
+/*rtl:end:ignore*/
 .switch_mediumLabel:after {
-  width: var(--zd_size18) ;
-  height: var(--zd_size18) ;
-  top: calc( var(--zd_size3) * -1 ) ;
+  width: 18px;
+  height: 18px;
+  top: -3px;
 }
 
 .input:disabled+.label {
-  opacity: 0.4;
   border-color: var(--zdt_switch_default_off_bg);
   cursor: not-allowed;
+  opacity: 0.4;
 }
 
 .switch {
@@ -118,13 +128,6 @@
 
 .switch+label {
   position: relative;
-  top: calc( var(--zd_size1) * -1 ) ;
-}
-
-[dir=ltr] .switch+label {
-  margin-left: var(--zd_size12) ;
-}
-
-[dir=rtl] .switch+label {
-  margin-right: var(--zd_size12) ;
+  top: -1px;
+  margin-left: 12px;
 }

package/lib/Tab/Tab.module.css

@@ -1,26 +1,32 @@
 .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);
 }
@@ -30,71 +36,76 @@
 .delta {
   transition: all var(--zd_transition2);
 }
+
 .alpha {
-  font-size: var(--zd_font_size11) ;
+  padding: 0 18px;
+  font-size: 11px;
   line-height: 3;
-  padding: 0 var(--zd_size18) ;
 }
+
 .tabAlpha {
   composes: alpha;
   color: var(--zdt_tab_alpha_text);
 }
+
 .alphaHover:hover {
-  color: var(--zdt_tab_alpha_hover_text);
+  color: var(--zdt_base_color);
   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 {
-  font-size: var(--zd_font_size14) ;
+  padding: 0 4px;
+  font-size: 14px;
   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_tab_alpha_hover_text);
+  color: var(--zdt_base_color);
 }
+
 .betaActive {
   composes: beta;
-  color: var(--zdt_tab_alpha_hover_text);
+  color: var(--zdt_base_color);
 }
+
 .delta {
-  font-size: var(--zd_font_size11) ;
+  padding: 0 4px;
+  font-size: 11px;
   line-height: 3;
-  padding: 0 var(--zd_size4) ;
-}
-[dir=ltr] .delta {
-  margin-right: var(--zd_size10) ;
-}
-[dir=rtl] .delta {
-  margin-left: var(--zd_size10) ;
+  margin-right: 10px;
 }
+
 .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,16 +5,12 @@
 }
 
 .alpha {
-  height: var(--zd_size35) ;
-  background-color: var(--zdt_tabs_alpha_bg);
+  height: 35px;
+  background-color: var(--zdt_base_bg);
 }
 
-[dir=ltr] .alpha_padding {
-  padding-left: var(--zd_size15) ;
-}
-
-[dir=rtl] .alpha_padding {
-  padding-right: var(--zd_size15) ;
+.alpha_padding {
+  padding-left: 15px;
 }
 
 .alpha_border {
@@ -27,50 +23,32 @@
   content: '';
   position: absolute;
   z-index: -2;
-  width: 76% ;
-  bottom: 0 ;
-  height: var(--zd_size10) ;
+  width: 76%;
+  bottom: 0;
+  height: 10px;
+  left: 12%;
   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% ;
-  height: 100% ;
-  top: 0 ;
+  width: 100%;
   background: inherit;
-}
-
-[dir=ltr] .alpha:before {
-  left: 0 ;
-}
-
-[dir=rtl] .alpha:before {
-  right: 0 ;
+  height: 100%;
+  left: 0;
+  top: 0;
 }
 
 .beta {
-  height: var(--zd_size61) ;
-  background-color: var(--zdt_tabs_alpha_bg);
-}
-
-[dir=ltr] .beta_padding {
-  padding-left: var(--zd_size13) ;
+  height: 61px;
+  background-color: var(--zdt_base_bg);
 }
 
-[dir=rtl] .beta_padding {
-  padding-right: var(--zd_size13) ;
+.beta_padding {
+  padding-left: 13px;
 }
 
 .beta_border {
@@ -78,16 +56,12 @@
 }
 
 .delta {
-  height: var(--zd_size35) ;
-  background-color: var(--zdt_tabs_alpha_bg);
+  height: 35px;
+  background-color: var(--zdt_base_bg);
 }
 
-[dir=ltr] .delta_padding {
-  padding-left: var(--zd_size10) ;
-}
-
-[dir=rtl] .delta_padding {
-  padding-right: var(--zd_size10) ;
+.delta_padding {
+  padding-left: 10px;
 }
 
 .delta_border {
@@ -99,12 +73,12 @@
 }
 
 .maxWidth {
-  max-width: 100% ;
+  max-width: 100%;
 }
 
 .highlight {
   position: absolute;
-  bottom: 0 ;
+  bottom: 0;
   border-bottom: 1px solid var(--zdt_tabs_highlight_border);
 }
 
@@ -118,20 +92,24 @@
 }
 
 .menuBox {
-  max-height: var(--zd_size220) ;
+  max-height: 220px;
 }
+
+/*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;
 }