@zohodesk/components 1.0.0-temp-250 → 1.0.0-temp-253

package/lib/RippleEffect/RippleEffect.module.css

@@ -1,109 +1,147 @@
 .effect {
   position: relative;
-  border-radius: var(--zd_size4);
+  border-radius: 4px;
 }
+
 .border {
   border: solid 1px var(--zdt_rippleeffect_default_border);
 }
+
 .default.defaultHover {
   border-color: var(--zdt_rippleeffect_hover_border);
 }
+
 .hoverEffect:hover.primary.defaultHover, .hoverEffect:hover.primary.borderHover
+
 /* .hoverEffect:focus.primary.borderHover  */
-{
+  {
   border-color: var(--zdt_rippleeffect_primary_border);
 }
+
 .primary.defaultHover, .hoverEffect:hover.primary.active.border
+
 /* .hoverEffect:focus.primary.active.border  */
-{
+  {
   border-color: var(--zdt_rippleeffect_primary_active_border);
 }
+
 .primaryLight.defaultHover, .hoverEffect:hover.primaryLight.borderHover
+
 /* .hoverEffect:focus.primaryLight.borderHover  */
-{
+  {
   border-color: var(--zdt_rippleeffect_primary_light_border);
 }
+
 .green.defaultHover, .hoverEffect:hover.green.borderHover
+
 /* .hoverEffect:focus.green.borderHover  */
-{
+  {
   border-color: var(--zdt_rippleeffect_green_border);
 }
+
 .hoverEffect:hover.default.defaultHover
+
 /* .hoverEffect:focus.default.defaultHover */
- {
+  {
   border-color: var(--zdt_rippleeffect_slate_border);
 }
+
 .hoverEffect:hover.default.borderHover
+
 /* .hoverEffect:focus.default.borderHover */
- {
+  {
   border-color: var(--zdt_rippleeffect_navy_border);
 }
+
 .hoverEffect:hover.default.bgHover
+
 /* .hoverEffect:focus.default.bgHover */
- {
+  {
   background-color: var(--zdt_rippleeffect_hover_bg);
 }
+
 .hoverEffect:hover.primaryLight.bgHover
+
 /* .hoverEffect:focus.primaryLight.bgHover  */
-{
+  {
   background-color: var(--zdt_rippleeffect_primary_light_bg);
 }
+
 .primaryFilled {
   background-color: var(--zdt_rippleeffect_primary_bg);
 }
+
 .hoverEffect:hover.primaryFilled, .primaryFilled.active {
   background-color: var(--zdt_rippleeffect_primaryfilled_bg);
 }
+
 .hoverEffect:hover.green.bgHover
+
 /* .hoverEffect:focus.green.bgHover */
- {
+  {
   background-color: var(--zdt_rippleeffect_green_bg);
 }
+
 .default.active, .hoverEffect:hover.default.active, .primaryLight.active, .primaryDark.active {
   background-color: var(--zdt_rippleeffect_primary_light_bg);
 }
+
 .default.active.border, .hoverEffect:hover.default.active.border, .primaryLight.active.border, .primaryDark.active.border {
   border-color: var(--zdt_rippleeffect_primary_light_border);
 }
+
 .green.active {
   background-color: var(--zdt_rippleeffect_green_bg);
 }
+
 .green.active.border {
   border-color: var(--zdt_rippleeffect_green_border);
 }
+
 .primary.active {
   background-color: var(--zdt_rippleeffect_primary_bg);
 }
+
 .danger.defaultHover, .hoverEffect:hover.danger.borderHover
+
 /* .hoverEffect:focus.danger.borderHover */
- {
+  {
   border-color: var(--zdt_rippleeffect_danger_border);
 }
+
 .hoverEffect:hover.danger.bgHover, .danger.active {
   background-color: var(--zdt_rippleeffect_danger_bg);
 }
+
 .hoverEffect:hover.primaryDark.bgHover
+
 /* .hoverEffect:focus.primaryDark.bgHover */
- {
+  {
   background-color: var(--zdt_rippleeffect_primary_dark_bg);
 }
+
 .notAllowed {
   cursor: not-allowed;
 }
+
 .secondary.defaultHover, .hoverEffect:hover.secondary.borderHover
+
 /* .hoverEffect:focus.secondary.borderHover  */
-{
+  {
   border-color: var(--zdt_rippleeffect_secondary_border);
 }
+
 .hoverEffect:hover.secondary.bgHover
+
 /* .hoverEffect:focus.secondary.bgHover */
- {
+  {
   background-color: var(--zdt_rippleeffect_secondary_bg);
 }
+
 .secondary.active, .hoverEffect:hover.secondary.active.bgHover {
   background-color: var(--zdt_rippleeffect_secondary_active_bg);
 }
-.secondary.active.border
-.hoverEffect:hover.secondary.active.border {
+
+.secondary.active.border .hoverEffect:hover.secondary.active.border {
   border-color: var(--zdt_rippleeffect_secondary_active_border);
-}
+}

package/lib/Select/Select.module.css

@@ -21,11 +21,13 @@
 }
 
 .box_small .emptyState {
-  padding: var(--zd_size12) var(--zd_size6) ;
+  padding-block: var(--zd_size12) ;
+  padding-inline:var(--zd_size6) ;
 }
 
 .box_medium .emptyState {
-  padding: var(--zd_size12) var(--zd_size15) ;
+  padding-block: var(--zd_size12) ;
+  padding-inline:var(--zd_size15) ;
 }
 
 .hide {
@@ -42,27 +44,32 @@
 }
 
 .small.search {
-  padding: 0 var(--zd_size5) ;
+  padding-block: 0 ;
+  padding-inline:var(--zd_size5) ;
 }
 
 .medium.search {
-  padding: var(--zd_size3) var(--zd_size20) 0 ;
+  padding-block: var(--zd_size3) 0 ;
+  padding-inline:var(--zd_size20) ;
 }
 
 .title {
-  margin-bottom: var(--zd_size6) ;
+  margin-block-end: var(--zd_size6) ;
 }
 
 .groupTitle {
-  margin: var(--zd_size6) 0 ;
+  margin-block: var(--zd_size6) ;
+  margin-inline:0 ;
 }
 
 .listItemContainer {
-  padding: var(--zd_size10) 0 ;
+  padding-block: var(--zd_size10) ;
+  padding-inline:0 ;
 }
 
 .responsivelistItemContainer {
-  padding: var(--zd_size10) 0 0 ;
+  padding-block: var(--zd_size10) 0 ;
+  padding-inline:0 ;
 }
 
 .readonly {
@@ -98,20 +105,18 @@
   right: 0 ;
 }
 
-[dir=ltr] .iconSelect {
-  padding-left: var(--zd_size30) ;
-}
-
-[dir=rtl] .iconSelect {
-  padding-right: var(--zd_size30) ;
+.iconSelect {
+  padding-inline-start: var(--zd_size30) ;
 }
 
 .dropBoxList {
-  padding: var(--zd_size10) 0 ;
+  padding-block: var(--zd_size10) ;
+  padding-inline:0 ;
 }
 
 .responsivedropBoxList {
-  padding: var(--zd_size10) 0 0 0 ;
+  padding-block: var(--zd_size10) 0 ;
+  padding-inline:0 ;
 }
 
 .rotate {
@@ -135,4 +140,4 @@
 
 .loader {
   padding: var(--zd_size10) ;
-}
+}

package/lib/Stencils/Stencils.module.css

@@ -1,32 +1,37 @@
 .varClass {
   /* stencils default variables */
-  --stencil_height: 9px;
+  --stencil_height: var(--zd_size9);
   --stencil_width: 100%;
   --stencil_border_radius: 5px;
 }
+
 .container {
   composes: varClass;
   height: var(--stencil_height);
   width: var(--stencil_width);
   border-radius: var(--stencil_border_radius);
 }
+
 .stencil {
   background-size: 800px 1px;
 }
-[dir=ltr] .animate{
+
+[dir=ltr] .animate {
   animation-name:  placeHolderShimmer-ltr ;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-duration: var(--zd_transition10);
   animation-timing-function: linear;
 }
-[dir=rtl] .animate{
+
+[dir=rtl] .animate {
   animation-name:  placeHolderShimmer-rtl ;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-duration: var(--zd_transition10);
   animation-timing-function: linear;
 }
+
 @keyframes placeHolderShimmer-ltr {
   0% {
     background-position: calc(var(--zd_size468) * -1) 0;
@@ -36,6 +41,7 @@
     background-position: var(--zd_size468) 0;
   }
 }
+
 @keyframes placeHolderShimmer-rtl {
   0% {
     background-position: calc(100% - (var(--zd_size468) * -1)) 0;
@@ -48,53 +54,63 @@
 
 .rect {
   composes: stencil;
-  --stencil_height: 9px;
+  --stencil_height: var(--zd_size9);
   --stencil_border_radius: 5px;
 }
+
 .primary {
   background-color: var(--zdt_stencil_primary_bg);
   background-image: var(--zdt_stencil_primary_gradient_bg);
 }
+
 .secondary {
   background-color: var(--zdt_stencil_secondary_bg);
   background-image: var(--zdt_stencil_secondary_gradient_bg);
 }
+
 .dark {
   background-color: var(--zdt_stencil_dark_bg);
   background-image: var(--zdt_stencil_dark_gradient_bg);
 }
 
 .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 {
   composes: stencil;
   --stencil_border_radius: 50%;
 }
+
 .square {
   composes: stencil;
   --stencil_border_radius: 4px;
 }
+
 .size_large {
-  --stencil_width: 42px;
-  --stencil_height: 42px;
+  --stencil_width: var(--zd_size42);
+  --stencil_height: var(--zd_size42);
 }
+
 .size_medium,
 .size_default {
-  --stencil_width: 30px;
-  --stencil_height: 30px;
+  --stencil_width: var(--zd_size30);
+  --stencil_height: var(--zd_size30);
 }
+
 .size_small {
-  --stencil_width: 20px;
-  --stencil_height: 20px;
-}
+  --stencil_width: var(--zd_size20);
+  --stencil_height: var(--zd_size20);
+}

package/lib/Switch/Switch.module.css

@@ -1,128 +1,121 @@
-.varClass {
-  /* switch default variables */
-  --switch_off_bg_color: var(--zdt_switch_default_off_bg);
-  --switch_on_bg_color: var(--zdt_switch_default_on_bg);
-
-  /* switch circle default variables */
-  --switch_circle_bg_color: var(--zdt_switch_circle_bg);
-  --switch_circle_border_radius: 50px;
-  --switch_cricle_box_shadow: var(--zd_bs_switch_default);
-}
-
-.container {
-  composes: varClass;
-  vertical-align: middle;
-}
-
-.disabled {
-  composes: disabled from '../common/common.module.css';
-}
-
-.readonly {
-  composes: readonly from '../common/common.module.css';
-}
-
-.label {
-  display: inline-block;
-  position: relative;
-  transition: box-shadow var(--zd_transition3) ease-in-out;
-  background-color: var(--switch_off_bg_color);
-  border-radius: 20px;
-  cursor: pointer;
-}
-
-.effect:hover .label
-
-/* .effect:focus .label */
-  {
-  --switch_off_bg_color: var(--zdt_switch_effect_off_bg);
-}
-.label:after {
-  content: '';
-  display: block;
-  position: absolute;
-  right: 50% ;
-  transition: all var(--zd_transition2);
-  box-shadow: var(--switch_cricle_box_shadow);
-  background-color: var(--switch_circle_bg_color);
-  border-radius: var(--switch_circle_border_radius);
-}
-
-.checked+.label {
-  box-shadow: inset 0 0 0 var(--zd_size10) var(--switch_on_bg_color);
-}
-
-.checked+.label:after {
-  right: calc( var(--zd_size1) * -1 ) ;
-}
-
-.input {
-  display: none;
-}
-
-.small {
-  height: var(--zd_size14) ;
-  width: var(--zd_size28) ;
-}
-.switch_smallLabel {
-  height: var(--zd_size9) ;
-  width: var(--zd_size22) ;
-  top: calc( var(--zd_size2) * -1 ) ;
-  left: var(--zd_size2) ;
-}
-.switch_smallLabel:after {
-  width: var(--zd_size12) ;
-  height: var(--zd_size12) ;
-  top: calc( var(--zd_size2) * -1 ) ;
-}
-
-.medium {
-  height: var(--zd_size18) ;
-  width: var(--zd_size34) ;
-}
-.switch_mediumLabel {
-  height: var(--zd_size13) ;
-  width: var(--zd_size31) ;
-  top: var(--zd_size2) ;
-  left: var(--zd_size2) ;
-}
-.switch_mediumLabel:after {
-  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;
-}
-
-.switch {
-  display: inline-block;
-  composes: offSelection from '../common/common.module.css';
-  vertical-align: middle;
-}
-
-.switch_small {
-  composes: small;
-  composes: switch;
-}
-
-.switch_medium {
-  composes: medium;
-  composes: switch;
-}
-
-.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) ;
-}
+.varClass {
+  /* switch default variables */
+  --switch_off_bg_color: var(--zdt_switch_default_off_bg);
+  --switch_on_bg_color: var(--zdt_switch_default_on_bg);
+
+  /* switch circle default variables */
+  --switch_circle_bg_color: var(--zdt_switch_circle_bg);
+  --switch_circle_border_radius: 50px;
+  --switch_cricle_box_shadow: var(--zd_bs_switch_default);
+}
+
+.container {
+  composes: varClass;
+  vertical-align: middle;
+}
+
+.disabled {
+  composes: disabled from '../common/common.module.css';
+}
+
+.readonly {
+  composes: readonly from '../common/common.module.css';
+}
+
+.label {
+  display: inline-block;
+  position: relative;
+  transition: box-shadow var(--zd_transition3) ease-in-out;
+  background-color: var(--switch_off_bg_color);
+  border-radius: 20px;
+  cursor: pointer;
+}
+
+.effect:hover .label
+
+/* .effect:focus .label */
+  {
+  --switch_off_bg_color: var(--zdt_switch_effect_off_bg);
+}
+.label:after {
+  content: '';
+  display: block;
+  position: absolute;
+  right: 50% ;
+  transition: all var(--zd_transition2);
+  box-shadow: var(--switch_cricle_box_shadow);
+  background-color: var(--switch_circle_bg_color);
+  border-radius: var(--switch_circle_border_radius);
+}
+
+.checked+.label {
+  box-shadow: inset 0 0 0 var(--zd_size10) var(--switch_on_bg_color);
+}
+
+.checked+.label:after {
+  right: calc( var(--zd_size1) * -1 ) ;
+}
+
+.input {
+  display: none;
+}
+
+.small {
+  height: var(--zd_size14) ;
+  width: var(--zd_size28) ;
+}
+.switch_smallLabel {
+  height: var(--zd_size9) ;
+  width: var(--zd_size22) ;
+  top: calc( var(--zd_size2) * -1 ) ;
+  left: var(--zd_size2) ;
+}
+.switch_smallLabel:after {
+  width: var(--zd_size12) ;
+  height: var(--zd_size12) ;
+  top: calc( var(--zd_size2) * -1 ) ;
+}
+
+.medium {
+  height: var(--zd_size18) ;
+  width: var(--zd_size34) ;
+}
+.switch_mediumLabel {
+  height: var(--zd_size13) ;
+  width: var(--zd_size31) ;
+  top: var(--zd_size2) ;
+  left: var(--zd_size2) ;
+}
+.switch_mediumLabel:after {
+  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;
+}
+
+.switch {
+  display: inline-block;
+  composes: offSelection from '../common/common.module.css';
+  vertical-align: middle;
+}
+
+.switch_small {
+  composes: small;
+  composes: switch;
+}
+
+.switch_medium {
+  composes: medium;
+  composes: switch;
+}
+
+.switch+label {
+  position: relative;
+  top: calc( var(--zd_size1) * -1 ) ;
+  margin-inline-start: var(--zd_size12) ;
+}

package/lib/Tab/Tab.module.css

@@ -31,9 +31,10 @@
   transition: all var(--zd_transition2);
 }
 .alpha {
+  padding-inline: var(--zd_size18) ;
+  padding-block:0 ;
   font-size: var(--zd_font_size11) ;
   line-height: 3;
-  padding: 0 var(--zd_size18) ;
 }
 .tabAlpha {
   composes: alpha;
@@ -54,16 +55,12 @@
   border-color: var(--zdt_tab_delta_active_border);
 }
 .beta {
+  padding-inline:  var(--zd_size4) ;
+  padding-block:0 ;
   font-size: var(--zd_font_size14) ;
   line-height: 4.2857;
+  margin-inline-end: var(--zd_size40) ;
   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;
@@ -77,15 +74,11 @@
   color: var(--zdt_tab_alpha_hover_text);
 }
 .delta {
+  padding-inline: var(--zd_size4) ;
+  padding-block:0 ;
   font-size: var(--zd_font_size11) ;
   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-inline-end: var(--zd_size10) ;
 }
 .tabDelta {
   composes: delta;