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

package/es/Button/css/Button.module.css

@@ -3,13 +3,13 @@
   /*  Variable:Ignore  */
   --button_letter_spacing: 0.2px;
   --button_cursor: pointer;
-  --button_font_size: var(--zd_font_size13);
+  --button_font_size: 13px;
   --button_text_color: var(--zdt_button_default_text);
   --button_font_family: var(--zd_regular);
   --button_text_transform: capitalize;
   --button_bg_color: var(--zdt_button_default_bg);
   --button_border_radius: 4px;
-  --button_min_width: var(--zd_size90);
+  --button_min_width: 90px;
   --button_height: auto;
   --button_border_width: 0;
   --button_border_style: solid;
@@ -19,22 +19,23 @@
   --button_box_shadow: none;
 
   /* button loading status default variables */
-  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
+  --button_loading_bg_color: var(--zdt_base_bg);
   --button_loading_border_radius: 50%;
 
   /* button success status default variable */
   --button_success_border_color: var(--zdt_button_success_default_border);
 }
+
 .native {
   composes: varClass;
   /* transition: all var(--zd_transition2) ease 0s; */
-  letter-spacing: var(--button_letter_spacing);
-  opacity: var(--button_opacity);
   transition-property: background-color, color, border;
   transition-duration: var(--zd_transition2);
   transition-timing-function: ease;
   border: 0;
+  letter-spacing: var(--button_letter_spacing);
   cursor: var(--button_cursor);
+  opacity: var(--button_opacity);
 }
 
 .native:disabled {
@@ -48,20 +49,17 @@
   composes: dotted from '../../common/common.module.css';
   position: relative;
   font-size: var(--button_font_size);
-  /* css:theme-validation:ignore */
   color: var(--button_text_color);
   font-family: var(--button_font_family);
   text-transform: var(--button_text_transform);
-  /* css:theme-validation:ignore */
-  min-width: var(--button_min_width);
-  /* css:theme-validation:ignore */
-  height: var(--button_height);
   background-color: var(--button_bg_color);
   border-radius: var(--button_border_radius);
+  min-width: var(--button_min_width);
   border-width: var(--button_border_width);
   border-style: var(--button_border_style);
   border-color: var(--button_border_color);
   padding: var(--button_padding);
+  height: var(--button_height);
   box-shadow: var(--button_box_shadow);
 }
 
@@ -75,39 +73,39 @@
 }
 
 .small {
-  --button_padding: var(--zd_size4) var(--zd_size7);
-  --button_min_width: var(--zd_size50);
-  --button_font_size: var(--zd_font_size10);
+  --button_padding: 4px 7px;
+  --button_min_width: 50px;
+  --button_font_size: 10px;
 }
 
 .medium {
-  --button_padding: var(--zd_size6) var(--zd_size15);
+  --button_padding: 6px 15px;
 }
 
 .large {
-  --button_padding: var(--zd_size9) var(--zd_size14);
-  --button_min_width: var(--zd_size80);
-  --button_font_size: var(--zd_font_size12);
+  --button_padding: 9px 14px;
+  --button_min_width: 80px;
+  --button_font_size: 12px;
 }
 
 .xlarge {
-  --button_padding: var(--zd_size12) var(--zd_size25);
-  --button_min_width: var(--zd_size90);
-  --button_font_size: var(--zd_font_size13);
+  --button_padding: 12px 25px;
+  --button_min_width: 90px;
+  --button_font_size: 13px;
 }
 
 .mediumBtn {
-  --button_height: var(--zd_size42);
-  --button_min_width: var(--zd_size42);
-  --button_font_size: var(--zd_font_size10);
   text-align: center;
+  --button_height: 42px;
+  --button_min_width: 42px;
+  --button_font_size: 10px;
 }
 
 .smallBtn {
-  --button_height: var(--zd_size22);
-  --button_min_width: var(--zd_size22);
-  --button_font_size: var(--zd_font_size13);
   text-align: center;
+  --button_height: 22px;
+  --button_min_width: 22px;
+  --button_font_size: 13px;
 }
 
 .smallBtnprimary,
@@ -135,20 +133,22 @@
 
 .plainprimary {
   --button_text_color: var(--zdt_button_default_text);
-  --button_padding: var(--zd_size5);
+  --button_padding: 5px;
   --button_min_width: initial;
   --button_bg_color: var(--zdt_button_default_bg);
 }
+
 .plainprimary:hover {
   --button_text_color: var(--zdt_button_plainprimary_hover_text);
 }
 
 .plainsecondary {
   --button_text_color: var(--zdt_button_secondary_text);
-  --button_padding: var(--zd_size5);
+  --button_padding: 5px;
   --button_min_width: initial;
   --button_bg_color: var(--zdt_button_default_bg);
 }
+
 .plainsecondary:hover {
   --button_text_color: var(--zdt_button_secondary_hover_text);
 }
@@ -163,6 +163,7 @@
 .tertiaryfilled {
   --button_border_width: 1px;
 }
+
 .primary:hover {
   --button_border_color: var(--zdt_button_primary_hover_border);
   --button_text_color: var(--zdt_button_primary_hover_text);
@@ -173,6 +174,7 @@
   --button_bg_color: var(--zdt_button_primaryfill_bg);
   --button_text_color: var(--zdt_button_primaryfill_text);
 }
+
 .primaryfilled:hover {
   --button_bg_color: var(--zdt_button_primaryfill_hover_bg);
 }
@@ -182,6 +184,7 @@
   --button_bg_color: var(--zdt_button_default_bg);
   --button_text_color: var(--zdt_button_danger_text);
 }
+
 .danger:hover {
   --button_border_color: var(--zdt_button_danger_hover_border);
   --button_text_color: var(--zdt_button_danger_hover_text);
@@ -192,6 +195,7 @@
   --button_bg_color: var(--zdt_button_dangerfill_bg);
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
+
 .dangerfilled:hover {
   --button_bg_color: var(--zdt_button_dangerfill_hover_bg);
 }
@@ -201,6 +205,7 @@
   --button_bg_color: var(--zdt_button_default_bg);
   --button_text_color: var(--zdt_button_secondary_text);
 }
+
 .secondary:hover {
   --button_border_color: var(--zdt_button_secondary_hover_border);
   --button_text_color: var(--zdt_button_secondary_hover_text);
@@ -211,6 +216,7 @@
   --button_bg_color: var(--zdt_button_secondaryfill_bg);
   --button_text_color: var(--zdt_button_secondary_text);
 }
+
 .secondaryfilled:hover {
   --button_text_color: var(--zdt_button_secondary_hover_text);
 }
@@ -220,6 +226,7 @@
   --button_bg_color: var(--zdt_button_successfill_bg);
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
+
 .successfilled:hover {
   --button_border_color: var(--zdt_button_successfill_hover_border);
   --button_bg_color: var(--zdt_button_successfill_hover_bg);
@@ -230,118 +237,85 @@
   --button_bg_color: var(--zdt_button_tertiaryfill_bg);
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
+
 .tertiaryfilled:hover {
   --button_bg_color: var(--zdt_button_tertiaryfill_hover_bg);
 }
 
 .overlay {
   position: absolute;
-  top: 0 ;
-  bottom: 0 ;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   background: inherit;
   border-radius: inherit;
 }
 
-[dir=ltr] .overlay {
-  left: 0 ;
-  right: 0 ;
-}
-
-[dir=rtl] .overlay {
-  right: 0 ;
-  left: 0 ;
-}
-
 .loading {
   position: absolute;
-  top: 50% ;
-  width: var(--zd_size20) ;
-  height: var(--zd_size20) ;
-}
-
-[dir=ltr] .loading {
-  left: 50% ;
+  left: 50%;
+  top: 50%;
   transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
-}
-
-[dir=rtl] .loading {
-  right: 50% ;
-  transform: translate(50%, -50%);
-  -moz-transform: translate(50%, -50%);
-  -webkit-transform: translate(50%, -50%);
+  width: 20px;
+  height: 20px;
 }
 
 .loadingelement {
-  height: inherit ;
-  width: inherit ;
+  animation: crlrotate var(--zd_no_transition8) linear infinite;
+  -moz-animation: crlrotate var(--zd_no_transition8) linear infinite;
+  -webkit-animation: crlrotate var(--zd_no_transition8) linear infinite;
+  border-radius: 50%;
+  height: inherit;
+  width: inherit;
   position: relative;
   display: inline-block;
-  border-radius: 50%;
   transform-origin: 50%;
 }
 
-[dir=ltr] .loadingelement {
-  animation:  crlrotate-ltr var(--zd_no_transition8) linear infinite;
-  -moz-animation:  crlrotate-ltr var(--zd_no_transition8) linear infinite;
-  -webkit-animation:  crlrotate-ltr var(--zd_no_transition8) linear infinite;
-}
-
-[dir=rtl] .loadingelement {
-  animation:  crlrotate-rtl var(--zd_no_transition8) linear infinite;
-  -moz-animation:  crlrotate-rtl var(--zd_no_transition8) linear infinite;
-  -webkit-animation:  crlrotate-rtl var(--zd_no_transition8) linear infinite;
-}
-
 .loadingelement:before,
 .loadingelement:after {
   content: '';
   position: absolute;
-  /* css:theme-validation:ignore */
-}
-
-.loadingelement:before, .loadingelement:after {
   background-color: var(--button_loading_bg_color);
   border-radius: var(--button_loading_border_radius);
 }
 
 .smallloading,
 .mediumloading {
-  height: var(--zd_size10) ;
-  width: var(--zd_size10) ;
+  height: 10px;
+  width: 10px;
 }
 
 .loadingelement:after {
-  top: var(--zd_size1) ;
-  bottom: var(--zd_size1) ;
-}
-
-[dir=ltr] .loadingelement:after {
-  left: var(--zd_size1) ;
-  right: var(--zd_size1) ;
-}
-
-[dir=rtl] .loadingelement:after {
-  right: var(--zd_size1) ;
-  left: var(--zd_size1) ;
+  top: 1px;
+  bottom: 1px;
+  left: 1px;
+  right: 1px;
 }
 
 .loadingelement {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
 }
+
 .primaryelement {
-  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
+  --button_loading_bg_color: var(--zdt_base_bg);
 }
+
 .primaryfilledelement {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
 }
+
 .dangerelement {
-  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
+  --button_loading_bg_color: var(--zdt_base_bg);
 }
+
 .dangerfilledelement {
   --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
 }
+
 .loadingelement:after,
 .primaryelement:after,
 .primaryfilledelement:after,
@@ -351,33 +325,25 @@
 }
 
 .loadingelement:before {
-  top: calc( var(--zd_size1) * -1 ) ;
-  bottom: calc( var(--zd_size1) * -1 ) ;
   background: var(--zdt_button_loading_linear_gradient);
   background-repeat: no-repeat;
   background-size: 50% 50%;
-}
-
-[dir=ltr] .loadingelement:before {
-  left: calc( var(--zd_size1) * -1 ) ;
-  right: calc( var(--zd_size1) * -1 ) ;
-}
-
-[dir=rtl] .loadingelement:before {
-  right: calc( var(--zd_size1) * -1 ) ;
-  left: calc( var(--zd_size1) * -1 ) ;
+  top: -1px;
+  bottom: -1px;
+  left: -1px;
+  right: -1px;
 }
 
 .primaryelement:before {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
-  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_primary_linear_gradient);
   transform: rotateX(180deg);
+  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_primary_linear_gradient);
 }
 
 .dangerelement:before {
   --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
-  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_danger_linear_gradient);
   transform: rotateX(180deg);
+  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_danger_linear_gradient);
 }
 
 .primarysuccess {
@@ -392,7 +358,7 @@
   --button_success_border_color: var(--zdt_button_danger_border);
 }
 
-@keyframes crlrotate-ltr {
+@keyframes crlrotate {
   0% {
     transform: scaleX(-1) rotate(0deg);
   }
@@ -402,17 +368,7 @@
   }
 }
 
-@keyframes crlrotate-rtl {
-  0% {
-    transform: scaleX(-1) rotate(0deg);
-  }
-
-  100% {
-    transform: scaleX(-1) rotate(360deg);
-  }
-}
-
-@-moz-keyframes crlrotate-ltr {
+@-moz-keyframes crlrotate {
   0% {
     -moz-transform: scaleX(-1) rotate(0deg);
   }
@@ -422,17 +378,7 @@
   }
 }
 
-@-moz-keyframes crlrotate-rtl {
-  0% {
-    -moz-transform: scaleX(-1) rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: scaleX(-1) rotate(360deg);
-  }
-}
-
-@-webkit-keyframes crlrotate-ltr {
+@-webkit-keyframes crlrotate {
   0% {
     -webkit-transform: scaleX(-1) rotate(0deg);
   }
@@ -442,19 +388,11 @@
   }
 }
 
-@-webkit-keyframes crlrotate-rtl {
-  0% {
-    -webkit-transform: scaleX(-1) rotate(0deg);
-  }
-
-  100% {
-    -webkit-transform: scaleX(-1) rotate(360deg);
-  }
-}
+/*rtl:begin:ignore*/
 .success {
   position: absolute;
-  top: 50% ;
-  left: 50% ;
+  top: 50%;
+  left: 50%;
   transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
@@ -462,73 +400,73 @@
 }
 
 .successelement {
-  height: var(--zd_size15) ;
+  height: 15px;
   position: relative;
-  top: calc( var(--zd_size2) * -1 ) ;
-  width: var(--zd_size6) ;
+  top: -2px;
+  width: 6px;
   transform: scaleX(-1) rotate(135deg);
   -moz-transform: scaleX(-1) rotate(135deg);
   -webkit-transform: scaleX(-1) rotate(135deg);
   transform-origin: center;
   border-width: 2px 2px 0 0;
   border-style: solid;
-  /* css:theme-validation:ignore */
   border-color: var(--button_success_border_color);
   animation: tick var(--zd_no_transition3) ease 0s forwards;
 }
 
 @keyframes tick {
   0% {
-    height: 0 ;
-    width: 0 ;
+    height: 0;
+    width: 0;
   }
 
   50% {
-    height: 0 ;
-    width: var(--zd_size6) ;
+    height: 0;
+    width: 6px;
   }
 
   100% {
-    height: var(--zd_size15) ;
-    width: var(--zd_size6) ;
+    height: 15px;
+    width: 6px;
   }
 }
 
 @-moz-keyframes tick {
   0% {
-    height: 0 ;
-    width: 0 ;
+    height: 0;
+    width: 0;
   }
 
   50% {
-    height: 0 ;
-    width: var(--zd_size6) ;
+    height: 0;
+    width: 6px;
   }
 
   100% {
-    height: var(--zd_size15) ;
-    width: var(--zd_size6) ;
+    height: 15px;
+    width: 6px;
   }
 }
 
 @-webkit-keyframes tick {
   0% {
-    height: 0 ;
-    width: 0 ;
+    height: 0;
+    width: 0;
   }
 
   50% {
-    height: 0 ;
-    width: var(--zd_size6) ;
+    height: 0;
+    width: 6px;
   }
 
   100% {
-    height: var(--zd_size15) ;
-    width: var(--zd_size6) ;
+    height: 15px;
+    width: 6px;
   }
 }
 
-.loader{
-  /* css:theme-validation:ignore */
-  color:var(--dot_mirror)
+/*rtl:end:ignore*/
+
+.loader {
+  color: var(--dot_mirror)
 }

package/es/Buttongroup/Buttongroup.module.css

@@ -1,6 +1,6 @@
 .varClass {
   /* button group default variables */
-  --buttongroup_bg_color: var(--zdt_buttongroup_default_bg);
+  --buttongroup_bg_color: var(--zdt_base_bg);
   --buttongroup_box_shadow: none;
   --buttongroup_padding: 0;
   --buttongroup_border_width: 0;
@@ -11,8 +11,6 @@
 .buttonGroup {
   composes: varClass;
   composes: cboth from '../common/common.module.css';
-  /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
   background-color: var(--buttongroup_bg_color);
   box-shadow: var(--buttongroup_box_shadow);
   padding: var(--buttongroup_padding);
@@ -22,38 +20,25 @@
 }
 
 .footer {
+  --buttongroup_padding: 20px 0 20px 60px
+    /*rtl: 20px 60px 20px 0*/
+  ;
   --buttongroup_box_shadow: var(--zd_bs_buttongroup_footer);
 }
 
-[dir=ltr] .footer {
-  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60);
-}
-
-[dir=rtl] .footer {
-  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60);
-}
-
 .header {
-  --buttongroup_padding: var(--zd_size12) var(--zd_size20);
+  --buttongroup_padding: 12px 20px;
   --buttongroup_border_width: 0 0 1px 0;
 }
 
-[dir=ltr] .tab>div button:first-child {
+.tab>div button:first-child {
   border-radius: 5px 0 0 5px;
 }
 
-[dir=rtl] .tab>div button:first-child {
-  border-radius: 0 5px 5px 0;
-}
-
-[dir=ltr] .tab>div button:last-child {
+.tab>div button:last-child {
   border-radius: 0 5px 5px 0;
 }
 
-[dir=rtl] .tab>div button:last-child {
-  border-radius: 5px 0 0 5px;
-}
-
 .alignleft {
   composes: fleft from '../common/common.module.css';
 }
@@ -66,42 +51,22 @@
   composes: tcenter from '../common/common.module.css';
 }
 
-[dir=ltr] .alignleft>button:first-child {
-  margin-left: 0 ;
-}
-
-[dir=rtl] .alignleft>button:first-child {
-  margin-right: 0 ;
-}
-
-[dir=ltr] .alignleft>button {
-  margin-left: var(--zd_size15) ;
-}
-
-[dir=rtl] .alignleft>button {
-  margin-right: var(--zd_size15) ;
-}
-
-[dir=ltr] .alignright>button:last-child {
-  margin-right: 0 ;
-}
-
-[dir=rtl] .alignright>button:last-child {
-  margin-left: 0 ;
+.alignleft>button:first-child {
+  margin-left: 0;
 }
 
-[dir=ltr] .alignright>button {
-  margin-right: var(--zd_size15) ;
+.alignleft>button {
+  margin-left: 15px;
 }
 
-[dir=rtl] .alignright>button {
-  margin-left: var(--zd_size15) ;
+.alignright>button:last-child {
+  margin-right: 0;
 }
 
-[dir=ltr] .aligncenter>button {
-  margin-right: var(--zd_size15) ;
+.alignright>button {
+  margin-right: 15px;
 }
 
-[dir=rtl] .aligncenter>button {
-  margin-left: var(--zd_size15) ;
+.aligncenter>button {
+  margin-right: 15px;
 }