@zohodesk/dot 1.9.10 → 1.9.11

package/es/dropdown/ToggleDropDown/ToggleDropDown.module.css

@@ -4,19 +4,19 @@
 }
 .maxHgt {
   max-height: var(--zd_size265) ;
-  padding: var(--zd_size10) 0 ;
+  padding-inline:0 ;
+  padding-block:var(--zd_size10) ;
 }
 .responsivemaxHgt {
   padding: 0 ;
 }
 .title {
-  padding-top: var(--zd_size6) ;
+  padding-block-start: var(--zd_size6) ;
 }
-[dir=ltr] .default_arrow, [dir=ltr] .overlay_arrow {
-  padding: 0 0 0 var(--zd_size5) ;
-}
-[dir=rtl] .default_arrow, [dir=rtl] .overlay_arrow {
-  padding: 0 var(--zd_size5) 0 0 ;
+.default_arrow,
+.overlay_arrow {
+  padding-inline:var(--zd_size5) 0 ;
+  padding-block:0 ;
 }
 .overlay_arrow {
   position: absolute;
@@ -43,10 +43,11 @@
   composes: dotted  offSelection from '~@zohodesk/components/es/common/common.module.css';
 }
 .search {
-  padding: var(--zd_size6) var(--zd_size20) 0 ;
+  padding-block: var(--zd_size6) 0 ;
+  padding-inline:var(--zd_size20) ;
 }
 .svgWrapper {
-  padding-bottom: var(--zd_size25) ;
+  padding-block-end: var(--zd_size25) ;
 }
 .cursorDefault {
   cursor: default;
@@ -60,11 +61,8 @@
 [dir=rtl] .dropBoxContainer {
   text-align: right;
 }
-[dir=ltr] .iconBox {
-  margin-right: var(--zd_size4) ;
-}
-[dir=rtl] .iconBox {
-  margin-left: var(--zd_size4) ;
+.iconBox {
+  margin-inline-end: var(--zd_size4) ;
 }
 .iconBox > i {
   display: block;
@@ -75,8 +73,9 @@
 }
 .seperatedLine {
   height: var(--zd_size1) ;
+  margin-inline: 0 ;
+  margin-block: var(--zd_size7) var(--zd_size8) ;
   border-bottom: 1px solid var(--zdt_toggledropdown_line_border);
-  margin: var(--zd_size7) 0 var(--zd_size8) ;
 }
 .hiddenInput {
   width: 0 ;
@@ -93,7 +92,8 @@
   border: 0;
 }
 .groupName {
-  margin: var(--zd_size6) 0 ;
+  margin-inline: 0 ;
+  margin-block: var(--zd_size6) ;
 }
 .dropdown {
   background-color: transparent;

package/es/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -43,22 +43,20 @@
   font-size: var(--zd_font_size14) ;
 }
 .medium .linkWrapper {
-  margin-top: var(--zd_size18) ;
+  margin-block-start: var(--zd_size18) ;
 }
 .small .linkWrapper {
-  margin-top: var(--zd_size12) ;
+  margin-block-start: var(--zd_size12) ;
 }
 .linkDescWrapper {
-  margin-top: var(--zd_size20) ;
+  margin-block-start: var(--zd_size20) ;
 }
 .desc{
   word-wrap: break-word;
 }
-[dir=ltr] .linkDesc+.link, [dir=ltr] .desc+.link {
-  margin-left: var(--zd_size4) ;
-}
-[dir=rtl] .linkDesc+.link, [dir=rtl] .desc+.link {
-  margin-right: var(--zd_size4) ;
+.linkDesc+.link,
+.desc+.link {
+  margin-inline-start: var(--zd_size4) ;
 }
 .small .desc {
   line-height: 1.584;
@@ -74,7 +72,7 @@
   color: var(--linkHoverColor);
 }
 .children {
-  margin-top: var(--zd_size15) ;
+  margin-block-start: var(--zd_size15) ;
 }
 
 .default {

package/es/emptystate/EditionPage/EditionPage.css

@@ -7,21 +7,24 @@
 .header {
   font-size: var(--zd_font_size20) ;
   font-weight: var(--zd-fw-semibold);
-  margin-top: var(--zd_size16) ;
+  margin-block-start: var(--zd_size16) ;
 }
 .description {
   font-size: var(--zd_font_size15) ;
   font-weight: var(--zd-fw-semibold);
-  margin: var(--zd_size20) 0 ;
+  margin-block: var(--zd_size20) ;
+  margin-inline:0 ;
 }
 .content {
-  margin: var(--zd_size10) 0 ;
+  margin-block: var(--zd_size10) ;
+  margin-inline:0 ;
 }
 .footer {
   font-size: var(--zd_font_size13) ;
+  margin-block: var(--zd_size10) var(--zd_size80) ;
+  margin-inline:0 ;
   position: relative;
   display: inline-block;
-  margin: var(--zd_size10) 0 var(--zd_size80) 0 ;
 }
 .footer::before {
   content: '';

package/es/errorstate/EmptyStates.module.css

@@ -3,10 +3,10 @@
   background-color: var(--zdt_emptystate_default_bg);
 }
 .container {
-  padding-top: var(--zd_size80) ;
+  padding-block-start: var(--zd_size80) ;
 }
 .tabletContainer {
-  padding-top: var(--zd_size50) ;
+  padding-block-start: var(--zd_size50) ;
 }
 .top {
   position: relative;
@@ -26,11 +26,9 @@
 .tabletTitle,
 .mobileTitle {
   composes: semibold from '~@zohodesk/components/es/common/common.module.css';
+  margin-block-end: var(--zd_size5) ;
   letter-spacing: var(--zd_size1);
 }
-.title, .tabletTitle, .mobileTitle {
-  margin-bottom: var(--zd_size5) ;
-}
 .title {
   font-size: var(--zd_font_size50) ;
   line-height: 1.4;
@@ -65,8 +63,9 @@
 .footerWidth {
   min-width: var(--zd_size400) ;
 }
-.btmText, .tabletBtmText {
-  margin-bottom: var(--zd_size10) ;
+.btmText,
+.tabletBtmText {
+  margin-block-end: var(--zd_size10) ;
 }
 .btmText {
   font-size: var(--zd_font_size14) ;
@@ -85,4 +84,4 @@
 }
 .tabletImageContainer {
   height: var(--zd_size350) ;
-}
+}

package/es/errorstate/Inconvenience/Inconvenience.module.css

@@ -1,7 +1,4 @@
 .imageContainer {
-  margin-top: calc( var(--zd_size35) * -1 ) ;
-}[dir=ltr] .imageContainer {
-  margin-left: calc( var(--zd_size30) * -1 ) ;
-}[dir=rtl] .imageContainer {
-  margin-right: calc( var(--zd_size30) * -1 ) ;
+  margin-block-start: calc( var(--zd_size35) * -1 ) ;
+  margin-inline-start: calc( var(--zd_size30) * -1 ) ;
 }

package/es/errorstate/NoRequestFound/NoRequestFound.module.css

@@ -1,3 +1,3 @@
 .imageContainer {
-  margin-top: calc( var(--zd_size60) * -1 ) ;
+  margin-block-start: calc( var(--zd_size60) * -1 ) ;
 }

package/es/errorstate/PermissionPlay/PermissionPlay.module.css

@@ -1,8 +1,8 @@
 .headtingText {
   font-weight: var(--zd-fw-semibold);
   font-size: var(--zd_font_size50) ;
+  margin-block-end: var(--zd_size5) ;
   letter-spacing: var(--zd_size1);
-  margin-bottom: var(--zd_size5) ;
 }
 .title,
 .headtingText,
@@ -15,15 +15,16 @@
 .lastBox {
   line-height: 1.7143;
   font-size: var(--zd_font_size14) ;
+  margin-block-end: var(--zd_size20) ;
   margin: 0 auto ;
-  margin-bottom: var(--zd_size20) ;
 }
 .lineText {
-  margin: 0 var(--zd_size4) ;
+  margin-inline: var(--zd_size4) ;
+  margin-block:0 ;
 }
 .imageContainer {
   height: var(--zd_size400) ;
-  margin-bottom: var(--zd_size30) ;
+  margin-block-end: var(--zd_size30) ;
 }
 
 .min {

package/es/errorstate/RequestUrlNotFound/RequestUrlNotFound.module.css

@@ -1,3 +1,3 @@
 .imageContainer {
-  margin-top: calc( var(--zd_size60) * -1 ) ;
+  margin-block-start: calc( var(--zd_size60) * -1 ) ;
 }

package/es/errorstate/UnableToProcess/UnableToProcess.module.css

@@ -1,3 +1,3 @@
 .imageContainer {
-  margin-top: calc( var(--zd_size40) * -1 ) ;
+  margin-block-start: calc( var(--zd_size40) * -1 ) ;
 }

package/es/errorstate/UnauthorizedLogin/UnauthorizedLogin.module.css

@@ -1,3 +1,3 @@
 .imageContainer {
-  margin-top: calc( var(--zd_size10) * -1 ) ;
+  margin-block-start: calc( var(--zd_size10) * -1 ) ;
 }

package/es/errorstate/WillBack/WillBack.module.css

@@ -16,9 +16,11 @@
 .header {
   min-width: var(--zd_size450) ;
 }
-.imageContainer, .tabletImageContainer, .mobileImageContainer {
-  margin-top: calc( var(--zd_size70) * -1 ) ;
-  margin-bottom: var(--zd_size30) ;
+.imageContainer,
+.tabletImageContainer,
+.mobileImageContainer {
+  margin-block-start: calc( var(--zd_size70) * -1 ) ;
+  margin-block-end: var(--zd_size30) ;
 }
 .imageContainer {
   height: var(--zd_size450) ;
@@ -30,5 +32,5 @@
   height: var(--zd_size350) ;
 }
 .bottomSpace {
-  margin-bottom: var(--zd_size20) ;
+  margin-block-end: var(--zd_size20) ;
 }

package/es/form/fields/Fields.module.css

@@ -10,15 +10,15 @@
 }
 
 .fieldMargin_large {
-  margin-top: var(--zd_size10) ;
+  margin-block-start: var(--zd_size10) ;
 }
 
 .fieldMargin_medium {
-  margin-top: var(--zd_size5) ;
+  margin-block-start: var(--zd_size5) ;
 }
 
 .fieldMargin_small {
-  margin-top: 0 ;
+  margin-block-start: 0 ;
 }
 
 .radioContainer,
@@ -48,18 +48,11 @@
 }
 
 .checkboxText {
+  padding-inline-start: var(--zd_size6) ;
   composes: wbreak from '~@zohodesk/components/es/common/common.module.css';
   line-height: normal;
 }
 
-[dir=ltr] .checkboxText {
-  padding-left: var(--zd_size6) ;
-}
-
-[dir=rtl] .checkboxText {
-  padding-right: var(--zd_size6) ;
-}
-
 .cbTextPointer {
   cursor: pointer;
 }
@@ -74,12 +67,9 @@
   --label_cursor: not-allowed;
 }
 
-[dir=ltr] .radio {
-  margin: var(--zd_size5) var(--zd_size32) var(--zd_size5) 0 ;
-}
-
-[dir=rtl] .radio {
-  margin: var(--zd_size5) 0 var(--zd_size5) var(--zd_size32) ;
+.radio {
+  margin-block: var(--zd_size5) ;
+  margin-inline: 0 var(--zd_size32) ;
 }
 
 .radio,
@@ -99,12 +89,14 @@
 }
 
 .radioBox.primaryTextOnly {
+  padding-inline: var(--zd_size10) ;
+  padding-block:0 ;
   height: var(--zd_size36) ;
-  padding: 0 var(--zd_size10) ;
 }
 
 .radioBox.withSecondaryText {
-  padding: var(--zd_size18) var(--zd_size16) ;
+  padding-block: var(--zd_size18) ;
+  padding-inline:var(--zd_size16) ;
 }
 
 .hoverableRadioBox:hover, .radioBoxActive {
@@ -115,12 +107,8 @@
   background-color: var(--zdt_radiofield_box_active_bg)
 }
 
-[dir=ltr] .duration {
-  margin-right: var(--zd_size15) ;
-}
-
-[dir=rtl] .duration {
-  margin-left: var(--zd_size15) ;
+.duration {
+  margin-inline-end: var(--zd_size15) ;
 }
 
 .durationWidth {
@@ -139,8 +127,9 @@
 
 .phoneIcon {
   color: var(--zdt_fields_phoneicon_icon);
+  margin-block: var(--zd_size15) 0 ;
+  margin-inline:var(--zd_size10) ;
   display: inline-block;
-  margin: var(--zd_size15) var(--zd_size10) 0 var(--zd_size10) ;
   cursor: pointer;
 }
 
@@ -164,17 +153,10 @@
 .lockIcon,
 .infoIcon {
   color: var(--zdt_fields_lockicon_icon);
+  margin-inline-start: var(--zd_size5) ;
   composes: dInflex from '~@zohodesk/components/es/common/common.module.css';
 }
 
-[dir=ltr] .lockIcon, [dir=ltr] .infoIcon {
-  margin-left: var(--zd_size5) ;
-}
-
-[dir=rtl] .lockIcon, [dir=rtl] .infoIcon {
-  margin-right: var(--zd_size5) ;
-}
-
 /* .infoIcon {
   opacity: 0;
   visibility: hidden;
@@ -192,32 +174,18 @@
 
 .timeFormat {
   font-size: var(--zd_font_size11) ;
+  margin-inline-start: var(--zd_size4) ;
   color: var(--zdt_fields_lockicon_icon);
 }
 
-[dir=ltr] .timeFormat {
-  margin-left: var(--zd_size4) ;
-}
-
-[dir=rtl] .timeFormat {
-  margin-right: var(--zd_size4) ;
-}
-
 .newTab {
+  margin-inline-start: var(--zd_size6) ;
   color: var(--zdt_fields_lockicon_icon);
   font-size: 0 ;
   display: none;
   cursor: pointer;
 }
 
-[dir=ltr] .newTab {
-  margin-left: var(--zd_size6) ;
-}
-
-[dir=rtl] .newTab {
-  margin-right: var(--zd_size6) ;
-}
-
 .newTab:hover {
   color: var(--zdt_fields_phoneicon_icon);
 }
@@ -234,37 +202,24 @@
 
 .labelMandatory:after {
   content: '*';
+  padding-inline-start: var(--zd_size2) ;
   color: var(--zdt_fields_lockicon_hover_icon);
 }
 
-[dir=ltr] .labelMandatory:after {
-  padding-left: var(--zd_size2) ;
-}
-
-[dir=rtl] .labelMandatory:after {
-  padding-right: var(--zd_size2) ;
-}
-
 .ePhiTag {
   composes: flexshrink from '~@zohodesk/components/es/common/common.module.css';
   color: var(--zdt_fields_phitag_text);
   font-size: var(--zd_font_size12) ;
+  padding-inline: var(--zd_size5) ;
+  padding-block:0 ;
+  margin-inline-start: var(--zd_size8) ;
   height: var(--zd_size18) ;
   line-height: 1.5;
   background-color: var(--zdt_fields_phitag_bg);
   border: 1px solid var(--zdt_fields_phitag_border);
-  padding: 0 var(--zd_size5) ;
   border-radius: 3px;
 }
 
-[dir=ltr] .ePhiTag {
-  margin-left: var(--zd_size8) ;
-}
-
-[dir=rtl] .ePhiTag {
-  margin-right: var(--zd_size8) ;
-}
-
 .hasChildren {
   position: relative;
 }
@@ -288,4 +243,4 @@
 
 .lineClampPickListItem {
   --line-clamp: var(--picklist-field-line-clamp, 3);
-}
+}

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.module.css

@@ -4,23 +4,22 @@
 .tag {
   max-width: 100% ;
 }
-[dir=ltr] .moreLess, [dir=ltr] .tag {
-  margin: 0 var(--zd_size6) var(--zd_size6) 0 ;
-}
-[dir=rtl] .moreLess, [dir=rtl] .tag {
-  margin: 0 0 var(--zd_size6) var(--zd_size6) ;
+.moreLess,
+.tag {
+  margin-block:0 var(--zd_size6) ;
+  margin-inline:0 var(--zd_size6) ;
 }
 .input {
   height: var(--zd_size20) ;
+  margin-block-end: var(--zd_size4) ;
   width: 100% ;
-  margin-bottom: var(--zd_size4) ;
 }
 .viewpopNew {
   max-height: var(--zd_size250) ;
 }
 .tagDiv {
+  margin-block-start: var(--zd_size5) ;
   max-height: var(--zd_size160) ;
-  margin-top: var(--zd_size5) ;
 }
 .hasBorder {
   transition: border var(--zd_transition2) linear 0s;
@@ -82,10 +81,11 @@
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
 .dropdown {
-  margin-top: var(--zd_size1) ;
+  margin-block-start: var(--zd_size1) ;
 }
 .custmSpan {
   height: var(--zd_size25) ;
+  padding-inline-end: var(--zd_size28) ;
   display: inline-block;
   vertical-align: middle;
   opacity: 0;
@@ -94,12 +94,6 @@
   max-width: 100% ;
   visibility: hidden;
 }
-[dir=ltr] .custmSpan {
-  padding-right: var(--zd_size28) ;
-}
-[dir=rtl] .custmSpan {
-  padding-left: var(--zd_size28) ;
-}
 .custmInp {
   position: absolute;
   top: 0 ;
@@ -116,5 +110,6 @@
 }
 
 .searchEmpty{
-  padding:0 var(--zd_size10) 
-}
+  padding-inline:var(--zd_size10) ;
+  padding-block:0 ;
+}

package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.module.css

@@ -1,9 +1,6 @@
 .count {
   color: var(--zdt_tagsmultiselectField_count_text);
   font-size: var(--zd_font_size12) ;
+  margin-inline-start: var(--zd_size4) ;
   word-break: break-word;
-}[dir=ltr] .count {
-  margin-left: var(--zd_size4) ;
-}[dir=rtl] .count {
-  margin-right: var(--zd_size4) ;
 }