@zohodesk/components 1.0.0-alpha-272 → 1.0.0-alpha-273

package/lib/DateTime/DateTime.module.css

@@ -3,24 +3,24 @@
 }
 
 [dir=ltr] .boxPadding {
-  padding-right: 19px;
-  padding-left: 19px;
+  padding-right: var(--zd_size19) ;
+  padding-left: var(--zd_size19) ;
 }
 
 [dir=rtl] .boxPadding {
-  padding-left: 19px;
-  padding-right: 19px;
+  padding-left: var(--zd_size19) ;
+  padding-right: var(--zd_size19) ;
 }
 
 .container {
-  font-size: 16px;
+  font-size: var(--zd_font_size16) ;
   composes: offSelection from '../common/common.module.css';
   border-radius: 3px;
   background-color: var(--zdt_datetime_default_bg);
 }
 
 .header {
-  min-height: 36px;
+  min-height: var(--zd_size36) ;
   composes: boxPadding;
   text-align: center;
   background-color: var(--zdt_datetime_header_bg);
@@ -33,18 +33,18 @@
 }
 
 .grid {
-  width: 28px;
-  height: 28px;
+  width: var(--zd_size28) ;
+  height: var(--zd_size28) ;
   line-height: var(--zd_size18);
   text-align: center;
-  padding: 4px 0;
+  padding: var(--zd_size4) 0 ;
   border-radius: 50%;
   border: 1px solid transparent;
 }
 
 .thArrow,
 .datesStr {
-  font-size: 13px;
+  font-size: var(--zd_font_size13) ;
   color: var(--zdt_datetime_datestr_text);
 }
 
@@ -62,15 +62,15 @@
 }
 
 [dir=ltr] .navigation {
-  margin-left: 2px;
+  margin-left: var(--zd_size2) ;
 }
 
 [dir=rtl] .navigation {
-  margin-right: 2px;
+  margin-right: var(--zd_size2) ;
 }
 
 .thMonYear {
-  font-size: 13px;
+  font-size: var(--zd_font_size13) ;
   line-height: var(--zd_size24);
   color: var(--zdt_datetime_datestr_text);
   composes: semibold;
@@ -78,8 +78,8 @@
 }
 
 .dateContainer {
-  margin: 0 19px 0 19px;
-  padding: 6px 0 10px 0;
+  margin: 0 var(--zd_size19) 0 var(--zd_size19) ;
+  padding: var(--zd_size6) 0 var(--zd_size10) 0 ;
 }
 
 .separator {
@@ -87,27 +87,27 @@
 }
 
 .days {
-  min-height: 36px;
+  min-height: var(--zd_size36) ;
   composes: boxPadding;
   composes: alignBetween from '../common/common.module.css';
-  padding-top: 7px;
+  padding-top: var(--zd_size7) ;
 }
 
 .daysStr {
-  font-size: 10px;
+  font-size: var(--zd_font_size10) ;
   color: var(--zdt_datetime_daystr_text);
   text-transform: uppercase;
   composes: semibold;
 }
 
 .dateRow {
-  height: 28px;
+  height: var(--zd_size28) ;
   composes: alignBetween from '../common/common.module.css';
-  margin: 1px 0 5px;
+  margin: var(--zd_size1) 0 var(--zd_size5) ;
 }
 
 .dateRow:last-child {
-  margin-bottom: 0;
+  margin-bottom: 0 ;
 }
 
 .sunday,
@@ -149,24 +149,24 @@
 
 
 .timesection {
-  padding-top: 5px;
-  padding-bottom: 10px;
+  padding-top: var(--zd_size5) ;
+  padding-bottom: var(--zd_size10) ;
 }
 
 .dropDownContainer {
-  padding: 0 5px;
+  padding: 0 var(--zd_size5) ;
 }
 
 .dropDown {
-  width: 60px;
+  width: var(--zd_size60) ;
   display: inline-block;
   position: relative;
-  margin: 0 4px;
+  margin: 0 var(--zd_size4) ;
 }
 
 .footer {
-  margin-top: 10px;
-  padding-bottom: 12px;
+  margin-top: var(--zd_size10) ;
+  padding-bottom: var(--zd_size12) ;
 }
 
 .timesection,
@@ -176,7 +176,7 @@
 
 .space {
   display: inline-block;
-  width: 15px;
+  width: var(--zd_size15) ;
 }
 
 .downArrow {
@@ -184,11 +184,11 @@
 }
 
 [dir=ltr] .downArrow {
-  margin-left: 2px;
+  margin-left: var(--zd_size2) ;
 }
 
 [dir=rtl] .downArrow {
-  margin-right: 2px;
+  margin-right: var(--zd_size2) ;
 }
 
 .dateText {
@@ -201,27 +201,27 @@
 
 .text {
   composes: boxPadding;
-  font-size: 11px;
+  font-size: var(--zd_font_size11) ;
   text-transform: uppercase;
   color: var(--zdt_datetime_text);
   composes: semibold;
   display: block;
-  margin-top: 14px;
+  margin-top: var(--zd_size14) ;
 }
 
 .yearContainer {
   position: absolute;
-  top: 0;
-  width: 100%;
-  height: 100%;
+  top: 0 ;
+  width: 100% ;
+  height: 100% ;
 }
 
 [dir=ltr] .yearContainer {
-  left: 0;
+  left: 0 ;
 }
 
 [dir=rtl] .yearContainer {
-  right: 0;
+  right: 0 ;
 }
 
 .subContainer {
@@ -229,7 +229,7 @@
 }
 
 .dropBox {
-  width: 100%;
+  width: 100% ;
   border-radius: 3px;
   box-shadow: var(--zd_bs_dropbox_bottom);
   background-color: var(--zdt_dropbox_default_bg);

package/lib/DateTime/DateWidget.module.css

@@ -14,17 +14,17 @@
 }
 .inputLine {
   position: absolute;
-  bottom: 0;
+  bottom: 0 ;
   transition: border var(--zd_transition2) linear 0s;
   border-bottom: 1px solid var(--zdt_datewidget_input_border);
 }
 [dir=ltr] .inputLine {
-  left: 0;
-  right: 0;
+  left: 0 ;
+  right: 0 ;
 }
 [dir=rtl] .inputLine {
-  right: 0;
-  left: 0;
+  right: 0 ;
+  left: 0 ;
 }
 .enabled:hover .inputLine {
   border-bottom-color: var(--zdt_datewidget_enabled_border);

package/lib/DateTime/YearView.module.css

@@ -1,19 +1,19 @@
 [dir=ltr] .boxPadding {
-  padding-right: 19px;
-  padding-left: 19px;
+  padding-right: var(--zd_size19) ;
+  padding-left: var(--zd_size19) ;
 }[dir=rtl] .boxPadding {
-  padding-left: 19px;
-  padding-right: 19px;
+  padding-left: var(--zd_size19) ;
+  padding-right: var(--zd_size19) ;
 }
 
 .month {
   width: 30.333%;
-  font-size: 12px;
+  font-size: var(--zd_font_size12) ;
   line-height: var(--zd_size26);
-  height: 26px;
+  height: var(--zd_size26) ;
   color: var(--zdt_yearview_month_text);
   text-align: center;
-  margin: 0 0 1px;
+  margin: 0 0 var(--zd_size1) ;
   cursor: pointer;
   background-color: var(--zdt_yearview_month_bg);
   border-radius: 20px;
@@ -37,7 +37,7 @@
 }
 
 .year {
-  padding: 7px 0;
+  padding: var(--zd_size7) 0 ;
   cursor: pointer;
 }
 
@@ -48,7 +48,7 @@
 
 .yearText {
   color: var(--zdt_yearview_yeartext_text);
-  font-size: 11px;
+  font-size: var(--zd_font_size11) ;
 }
 
 .arrow {
@@ -63,7 +63,7 @@
 .isActive .yearText {
   font-family: var(--zd_semibold);
   color: var(--zdt_yearview_year_hover_text);
-  font-size: 11px;
+  font-size: var(--zd_font_size11) ;
 }
 
 .arrowActive {
@@ -79,7 +79,7 @@
 }
 
 .container {
-  height: 100%;
+  height: 100% ;
   overflow-y: auto;
   overflow-x: hidden;
   composes: boxPadding;
@@ -87,13 +87,13 @@
 }
 
 .yearContainer {
-  height: 135px;
+  height: var(--zd_size135) ;
   overflow: hidden;
   transition: height var(--zd_transition1);
-  padding-bottom: 5px;
+  padding-bottom: var(--zd_size5) ;
 }
 
 .toggleYear {
-  height: 0;
-  padding: 0;
+  height: 0 ;
+  padding: 0 ;
 }

package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -28,48 +28,48 @@
 
 .mobRadius {
     --dropbox_border_radius: 30px 30px 0 0;
-    --dropbox_padding: 10px 0 0 0;
+    --dropbox_padding: var(--zd_size10) 0 0 0;
 }
 
 /* sizes */
 .mini {
-    width: 140px;
+    width: var(--zd_size140) ;
 }
 
 .xmini {
-    width: 160px;
+    width: var(--zd_size160) ;
 }
 
 .xsmall {
-    width: 180px;
+    width: var(--zd_size180) ;
 }
 
 .small {
-    width: 200px;
+    width: var(--zd_size200) ;
 }
 
 .medium {
-    width: 220px;
+    width: var(--zd_size220) ;
 }
 
 .large {
-    width: 260px;
+    width: var(--zd_size260) ;
 }
 
 .mlarge {
-    width: 280px;
+    width: var(--zd_size280) ;
 }
 
 .xlarge {
-    width: 304px;
+    width: var(--zd_size304) ;
 }
 
 .xxlarge {
-    width: 364px;
+    width: var(--zd_size364) ;
 }
 
 .default {
-    width: 100%;
+    width: 100% ;
 }
 
 /* shadow */
@@ -95,120 +95,120 @@
 
 /* box direction styles */
 .topStart {
-    bottom: 100%;
-    right: 0;
+    bottom: 100% ;
+    right: 0 ;
 }
 
 .topEnd {
-    bottom: 100%;
-    left: 0;
+    bottom: 100% ;
+    left: 0 ;
 }
 
 .topMid {
-    bottom: 100%;
-    left: 50%;
+    bottom: 100% ;
+    left: 50% ;
     transform: translateX(-50%);
 }
 
 .bottomStart {
-    top: 100%;
-    right: 0;
+    top: 100% ;
+    right: 0 ;
 }
 
 .bottomEnd {
-    top: 100%;
-    left: 0;
+    top: 100% ;
+    left: 0 ;
 }
 
 .bottomMid {
-    top: 100%;
-    left: 50%;
+    top: 100% ;
+    left: 50% ;
     transform: translateX(-50%);
 }
 
 .rightStart {
-    left: 100%;
-    bottom: 0;
+    left: 100% ;
+    bottom: 0 ;
 }
 
 .rightEnd {
-    left: 100%;
-    top: 0;
+    left: 100% ;
+    top: 0 ;
 }
 
 .rightMid {
-    left: 100%;
-    top: 50%;
+    left: 100% ;
+    top: 50% ;
     transform: translateY(-50%);
 }
 
 .leftStart {
-    right: 100%;
-    bottom: 0;
+    right: 100% ;
+    bottom: 0 ;
 }
 
 .leftEnd {
-    right: 100%;
-    top: 0;
+    right: 100% ;
+    top: 0 ;
 }
 
 .leftMid {
-    right: 100%;
-    top: 50%;
+    right: 100% ;
+    top: 50% ;
     transform: translateY(-50%);
 }
 
 /* space for arrow */
 .arrowtop {
-    padding-bottom: 10px;
+    padding-bottom: var(--zd_size10) ;
 }
 
 .arrowright {
-    padding-left: 10px;
+    padding-left: var(--zd_size10) ;
 }
 
 .arrowleft {
-    padding-right: 10px;
+    padding-right: var(--zd_size10) ;
 }
 
 .arrowbottom {
-    padding-top: 10px;
+    padding-top: var(--zd_size10) ;
 }
 
 /* space from target */
 .paddingSpace_top {
-    padding-bottom: 5px;
+    padding-bottom: var(--zd_size5) ;
 }
 
 .paddingSpace_right {
-    padding-left: 5px;
+    padding-left: var(--zd_size5) ;
 }
 
 .paddingSpace_left {
-    padding-right: 5px;
+    padding-right: var(--zd_size5) ;
 }
 
 .paddingSpace_bottom {
-    padding-top: 5px;
+    padding-top: var(--zd_size5) ;
 }
 
 .arrow {
     position: absolute;
-    height: 34px;
-    width: 34px;
-    clip: rect(3px,
-            29px,
-            17px,
-            8px);
-    padding: 4px;
+    height: var(--zd_size34) ;
+    width: var(--zd_size34) ;
+    clip: rect(var(--zd_size3),
+ undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined var(--zd_size29),
+ undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined var(--zd_size17),
+ undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined var(--zd_size8)) ;
+    padding: var(--zd_size4) ;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .arrowShape {
-    height: 10px;
-    width: 10px;
+    height: var(--zd_size10) ;
+    width: var(--zd_size10) ;
     box-shadow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
     background-color: var(--dropbox_bg_color);
     -webkit-transform: rotateZ(-45deg);
@@ -225,20 +225,20 @@
 .top .start,
 .top .end,
 .top .mid {
-    bottom: -17px;
+    bottom: calc( var(--zd_size17) * -1 ) ;
 }
 
 .top .start {
-    left: 28px;
+    left: var(--zd_size28) ;
 }
 
 .top .end {
-    right: 28px;
+    right: var(--zd_size28) ;
     transform: rotate(180deg) translateX(-50%);
 }
 
 .top .mid {
-    left: 50%;
+    left: 50% ;
 }
 
 .top .start,
@@ -249,19 +249,19 @@
 .bottom .start,
 .bottom .end,
 .bottom .mid {
-    top: -17px;
+    top: calc( var(--zd_size17) * -1 ) ;
 }
 
 .bottom .start {
-    left: 28px;
+    left: var(--zd_size28) ;
 }
 
 .bottom .mid {
-    left: 50%;
+    left: 50% ;
 }
 
 .bottom .end {
-    right: 28px;
+    right: var(--zd_size28) ;
     transform: translateX(50%);
 }
 
@@ -273,20 +273,20 @@
 .left .start,
 .left .mid,
 .left .end {
-    right: -17px;
+    right: calc( var(--zd_size17) * -1 ) ;
 }
 
 .left .start {
-    top: 28px;
+    top: var(--zd_size28) ;
 }
 
 .left .end {
     transform: rotate(90deg) translateX(50%);
-    bottom: 28px;
+    bottom: var(--zd_size28) ;
 }
 
 .left .mid {
-    top: 50%;
+    top: 50% ;
 }
 
 .left .start,
@@ -297,15 +297,15 @@
 .right .start,
 .right .mid,
 .right .end {
-    left: -17px;
+    left: calc( var(--zd_size17) * -1 ) ;
 }
 
 .right .start {
-    top: 28px;
+    top: var(--zd_size28) ;
 }
 
 .right .mid {
-    top: 50%;
+    top: 50% ;
 }
 
 .right .start,
@@ -314,7 +314,7 @@
 }
 
 .right .end {
-    bottom: 28px;
+    bottom: var(--zd_size28) ;
     transform: rotate(-90deg) translateX(-50%);
 }
 .hidden {
@@ -403,31 +403,31 @@
 
 .responsive {
     position: absolute;
-    bottom: 0;
-    width: 100%;
-    max-height: 90%;
+    bottom: 0 ;
+    width: 100% ;
+    max-height: 90% ;
 }
 
 [dir=ltr] .responsive {
-    left: 0;
+    left: 0 ;
 }
 
 [dir=rtl] .responsive {
-    right: 0;
+    right: 0 ;
 }
 
 .closeBar {
   /*  Variable:Ignore  */
     height: 6px;
-    width: 20%;
+    width: 20% ;
     border-radius: 5px;
     background-color: var(--dropbox_mob_close_bg_color);
     cursor: pointer;
-    margin: 0 auto 10px;
+    margin: 0 auto var(--zd_size10) ;
 }
 
 .boxPadding {
-    --dropbox_padding: 10px 0;
+    --dropbox_padding: var(--zd_size10) 0;
 }
 
 .darkPalette {

package/lib/DropBox/css/DropBox.module.css

@@ -32,19 +32,19 @@
 
 .freezeLayer {
   position: absolute;
-  top: 0;
-  bottom: 0;
+  top: 0 ;
+  bottom: 0 ;
   composes: activateInDelay;
 }
 
 [dir=ltr] .freezeLayer {
-  left: 0;
-  right: 0;
+  left: 0 ;
+  right: 0 ;
 }
 
 [dir=rtl] .freezeLayer {
-  right: 0;
-  left: 0;
+  right: 0 ;
+  left: 0 ;
 }
 
 .freeze {

package/lib/DropDown/DropDown.module.css

@@ -1,5 +1,5 @@
 .listGroup {
-  max-height: 220px;
+  max-height: var(--zd_size220) ;
   composes: oflowy from '../common/common.module.css';
-  margin: 8px 0 4px;
+  margin: var(--zd_size8) 0 var(--zd_size4) ;
 }