@zohodesk/dot 1.9.10 → 1.9.11

package/es/Drawer/Drawer.module.css

@@ -97,10 +97,9 @@
 
 .header {
   min-height: var(--zd_size50) ;
+  padding-block: var(--zd_size10) ;
   background-color: var(--zdt_drawer_header_bg);
   border-bottom: solid 1px var(--zdt_drawer_header_border);
-  padding-top: var(--zd_size10) ;
-  padding-bottom: var(--zd_size10) ;
 }
 
 .subheader {
@@ -111,81 +110,35 @@
   color: var(--zdt_drawer_title_text);
   font-weight: var(--zd-fw-semibold);
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';
+  padding-block:0 ;
+  padding-inline:0 var(--zd_size10) ;
   font-size: var(--zd_font_size16) ;
 }
 
-[dir=ltr] .title {
-  padding: 0 var(--zd_size10) 0 0 ;
+.smallHeaderPadding {
+  padding-inline:var(--zd_size30) var(--zd_size11) ;
 }
 
-[dir=rtl] .title {
-  padding: 0 0 0 var(--zd_size10) ;
+.smallContentPadding {
+  padding-inline:var(--zd_size30) ;
 }
 
-[dir=ltr] .smallHeaderPadding {
-  padding-right: var(--zd_size11) ;
-  padding-left: var(--zd_size30) ;
+.mediumHeaderPadding {
+  padding-inline:var(--zd_size30) var(--zd_size15) ;
 }
 
-[dir=rtl] .smallHeaderPadding {
-  padding-left: var(--zd_size11) ;
-  padding-right: var(--zd_size30) ;
+.mediumContentPadding {
+  padding-inline:var(--zd_size30) ;
 }
 
-[dir=ltr] .smallContentPadding {
-  padding-left: var(--zd_size30) ;
-  padding-right: var(--zd_size30) ;
+.largeHeaderPadding {
+  padding-inline:var(--zd_size50) var(--zd_size15) ;
 }
 
-[dir=rtl] .smallContentPadding {
-  padding-right: var(--zd_size30) ;
-  padding-left: var(--zd_size30) ;
+.largeContentPadding {
+  padding-inline:var(--zd_size50) ;
 }
 
-[dir=ltr] .mediumHeaderPadding {
-  padding-right: var(--zd_size15) ;
-  padding-left: var(--zd_size30) ;
+.iconWrapper {
+  margin-inline-end: var(--zd_size10) ;
 }
-
-[dir=rtl] .mediumHeaderPadding {
-  padding-left: var(--zd_size15) ;
-  padding-right: var(--zd_size30) ;
-}
-
-[dir=ltr] .mediumContentPadding {
-  padding-left: var(--zd_size30) ;
-  padding-right: var(--zd_size30) ;
-}
-
-[dir=rtl] .mediumContentPadding {
-  padding-right: var(--zd_size30) ;
-  padding-left: var(--zd_size30) ;
-}
-
-[dir=ltr] .largeHeaderPadding {
-  padding-right: var(--zd_size15) ;
-  padding-left: var(--zd_size50) ;
-}
-
-[dir=rtl] .largeHeaderPadding {
-  padding-left: var(--zd_size15) ;
-  padding-right: var(--zd_size50) ;
-}
-
-[dir=ltr] .largeContentPadding {
-  padding-left: var(--zd_size50) ;
-  padding-right: var(--zd_size50) ;
-}
-
-[dir=rtl] .largeContentPadding {
-  padding-right: var(--zd_size50) ;
-  padding-left: var(--zd_size50) ;
-}
-
-[dir=ltr] .iconWrapper {
-  margin-right: var(--zd_size10) ;
-}
-
-[dir=rtl] .iconWrapper {
-  margin-left: var(--zd_size10) ;
-}

package/es/FormAction/FormAction.module.css

@@ -18,84 +18,50 @@
 }
 
 .largeFooter {
-  padding-top: var(--zd_size24) ;
-  padding-bottom: var(--zd_size24) ;
+  padding-block: var(--zd_size24) ;
 }
 
 .mediumFooter {
-  padding-top: var(--zd_size20) ;
-  padding-bottom: var(--zd_size20) ;
+  padding-block: var(--zd_size20) ;
 }
 
 .smallFooter {
-  padding-top: var(--zd_size10) ;
-  padding-bottom: var(--zd_size10) ;
+  padding-block: var(--zd_size10) ;
 }
 
-[dir=ltr] .largePadding {
-  padding-left: var(--zd_size60) ;
+.largePadding {
+  padding-inline-start: var(--zd_size60) ;
 }
 
-[dir=rtl] .largePadding {
-  padding-right: var(--zd_size60) ;
+.mediumPadding {
+  padding-inline-start: var(--zd_size50) ;
 }
 
-[dir=ltr] .mediumPadding {
-  padding-left: var(--zd_size50) ;
+.xmediumPadding {
+  padding-inline-start: var(--zd_size30) ;
 }
 
-[dir=rtl] .mediumPadding {
-  padding-right: var(--zd_size50) ;
+.smallPadding {
+  padding-inline-start: var(--zd_size25) ;
 }
 
-[dir=ltr] .xmediumPadding {
-  padding-left: var(--zd_size30) ;
-}
-
-[dir=rtl] .xmediumPadding {
-  padding-right: var(--zd_size30) ;
-}
-
-[dir=ltr] .smallPadding {
-  padding-left: var(--zd_size25) ;
-}
-
-[dir=rtl] .smallPadding {
-  padding-right: var(--zd_size25) ;
-}
-
-[dir=ltr] .xsmallPadding {
-  padding-left: var(--zd_size20) ;
-}
-
-[dir=rtl] .xsmallPadding {
-  padding-right: var(--zd_size20) ;
+.xsmallPadding {
+  padding-inline-start: var(--zd_size20) ;
 }
 
 .marginRight {
   composes: dinblk from '~@zohodesk/components/es/common/common.module.css';
 }
 
-[dir=ltr] .largeFooter .marginRight, [dir=ltr] .mediumFooter .marginRight {
-  margin-right: var(--zd_size15) ;
-}
-
-[dir=rtl] .largeFooter .marginRight, [dir=rtl] .mediumFooter .marginRight {
-  margin-left: var(--zd_size15) ;
+.largeFooter .marginRight,
+.mediumFooter .marginRight {
+  margin-inline-end: var(--zd_size15) ;
 }
 
-[dir=ltr] .smallFooter .marginRight {
-  margin-right: var(--zd_size12) ;
+.smallFooter .marginRight {
+  margin-inline-end: var(--zd_size12) ;
 }
 
-[dir=rtl] .smallFooter .marginRight {
-  margin-left: var(--zd_size12) ;
+.marginRight:last-child {
+  margin-inline-end: 0 ;
 }
-
-[dir=ltr] .marginRight:last-child {
-  margin-right: 0 ;
-}
-
-[dir=rtl] .marginRight:last-child {
-  margin-left: 0 ;
-}

package/es/ImportantNotes/ImportantNotes.module.css

@@ -10,15 +10,8 @@
 }
 
 .icon {
+  margin-block-start: var(--zd_size1) ;
+  margin-inline-end: var(--zd_size5) ;
   color: var(--zdt_importantnotes_icon);
   font-size: 0 ;
-  margin-top: var(--zd_size1) ;
 }
-
-[dir=ltr] .icon {
-  margin-right: var(--zd_size5) ;
-}
-
-[dir=rtl] .icon {
-  margin-left: var(--zd_size5) ;
-}

package/es/Message/Message.module.css

@@ -14,6 +14,8 @@
 }
 
 .container {
+  padding-block: var(--zd_size13) ;
+  padding-inline:var(--zd_size50) var(--zd_size10) ;
   position: relative;
   display: inline-block;
   pointer-events: initial;
@@ -22,14 +24,6 @@
   background: var(--zdt_message_default_bg);
 }
 
-[dir=ltr] .container {
-  padding: var(--zd_size13) var(--zd_size10) var(--zd_size13) var(--zd_size50) ;
-}
-
-[dir=rtl] .container {
-  padding: var(--zd_size13) var(--zd_size50) var(--zd_size13) var(--zd_size10) ;
-}
-
 .text {
   max-width: var(--zd_size480) ;
   display: inline-block;
@@ -91,13 +85,6 @@
   font-size: var(--zd_font_size16) ;
   display: inline-block;
   vertical-align: middle;
+  margin-inline-start: var(--zd_size10) ;
   cursor: pointer;
 }
-
-[dir=ltr] .close {
-  margin-left: var(--zd_size10) ;
-}
-
-[dir=rtl] .close {
-  margin-right: var(--zd_size10) ;
-}

package/es/MessageBanner/MessageBanner.module.css

@@ -4,24 +4,15 @@
   margin: 0 auto ;
 }
 .message {
+  padding-block: var(--zd_size10) ;
+  padding-inline:0 ;
   color: var(--zdt_messagebanner_text);
+  margin-inline-start: var(--zd_size10) ;
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';
-  padding: var(--zd_size10) 0 ;
-}
-[dir=ltr] .message {
-  margin-left: var(--zd_size10) ;
-}
-[dir=rtl] .message {
-  margin-right: var(--zd_size10) ;
 }
 .link {
   color: var(--zdt_messagebanner_link_text);
-}
-[dir=ltr] .link {
-  margin-left: var(--zd_size5) ;
-}
-[dir=rtl] .link {
-  margin-right: var(--zd_size5) ;
+  margin-inline-start: var(--zd_size5) ;
 }
 .message,.link{font-size:  var(--zd_font_size14) ;}
 .close {

package/es/Separator/Separator.module.css

@@ -2,8 +2,9 @@
   --separator_fontSize: var(--zd_font_size15);
 }
 .separator {
+  margin-inline: var(--zd_size5) ;
+  margin-block:0 ;
   font-size: var(--separator_fontSize);
-  margin: 0 var(--zd_size5) ;
 }
 .dot {
   --separator_fontSize: var(--zd_font_size8);

package/es/TagWithIcon/TagWithIcon.module.css

@@ -16,12 +16,13 @@
 .large {
   max-width: 100% ;
   height: var(--zd_size18) ;
+  padding-inline: var(--zd_size6) ;
+  padding-block:0 ;
 }
 
 .small, .large {
   border: 1px solid var(--tag_border_color);
   border-radius: 4px;
-  padding: 0 var(--zd_size6) ;
 }
 
 .bold {
@@ -40,12 +41,8 @@
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
 
-[dir=ltr] .iconSpace {
-  margin-right: var(--zd_size4) ;
-}
-
-[dir=rtl] .iconSpace {
-  margin-left: var(--zd_size4) ;
+.iconSpace {
+  margin-inline-end: var(--zd_size4) ;
 }
 
 .yellow {
@@ -64,4 +61,4 @@
   --tag_bg_color: var(--zdt_tagWithIconBlue_bg);
   --tag_text_color: var(--zdt_tagWithIconBlue_text);
   --tag_border_color: var(--zdt_tagWithIconBlue_border);
-}
+}

package/es/ToastMessage/ToastMessage.module.css

@@ -1,11 +1,11 @@
 .container {
   transition: all var(--zd_transition4);
+  margin-block-end: var(--zd_size7) ;
   position: relative;
   max-height: 100% ;
   border-radius: 5px;
   box-shadow: var(--zd_bs_toastmessage_container);
   background-color: var(--zdt_toastmessage_default_bg);
-  margin-bottom: var(--zd_size7) ;
 }[dir=ltr] .container {
   transform-origin: right center;
 }[dir=rtl] .container {
@@ -14,8 +14,8 @@
 
 .closeAnimation {
   max-height: 0 ;
+  margin-block-end: 0 ;
   transition: all var(--zd_transition3) 0.4s;
-  margin-bottom: 0 ;
 }
 
 .animation {
@@ -147,7 +147,8 @@
 }
 
 .alertleft {
-  padding: var(--zd_size15) var(--zd_size25) ;
+  padding-block: var(--zd_size15) ;
+  padding-inline:var(--zd_size25) ;
 }
 
 .alertico {
@@ -166,27 +167,24 @@
   color: var(--zdt_toastmessage_alerttitle_text);
 }
 
-[dir=ltr] .alertTitleLeft {
-  margin-right: var(--zd_size10) ;
-}
-
-[dir=rtl] .alertTitleLeft {
-  margin-left: var(--zd_size10) ;
+.alertTitleLeft {
+  margin-inline-end: var(--zd_size10) ;
 }
 
 .alertMessage {
   font-size: var(--zd_font_size12) ;
   composes: wbreak from '~@zohodesk/components/es/common/common.module.css';
+  margin-block-start: var(--zd_size5) ;
   line-height: 1.3333;
   color: var(--zdt_toastmessage_alert_text);
-  margin-top: var(--zd_size5) ;
 }
 
 .buttonText {
   font-size: inherit ;
   line-height: normal;
+  padding-block:0 ;
+  padding-inline: var(--zd_size7) ;
   text-align: center;
-  padding: 0 var(--zd_size7) ;
   cursor: pointer;
 }
 
@@ -199,7 +197,7 @@
 }
 
 .closeIcon, .closeIconPrimary {
-  padding: var(--zd_size2) ;
+  padding:var(--zd_size2) ;
   cursor: pointer;
 }
 
@@ -253,6 +251,8 @@
 }
 
 .message {
+  padding-block: var(--zd_size10) ;
+  padding-inline: var(--zd_size76) var(--zd_size20) ;
   position: relative;
   color: var(--zdt_toastmessage_popbutton_text);
   font-size: var(--zd_font_size11) ;
@@ -264,28 +264,14 @@
   margin: 0 ;
 }
 
-[dir=ltr] .message {
-  padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size76) ;
-}
-
-[dir=rtl] .message {
-  padding: var(--zd_size10) var(--zd_size76) var(--zd_size10) var(--zd_size20) ;
-}
-
 .messageOff {
+  padding-block:0 ;
+  padding-inline: var(--zd_size76) var(--zd_size20) ;
   height: 0 ;
   font-size: 0 ;
   border-width: 0;
 }
 
-[dir=ltr] .messageOff {
-  padding: 0 var(--zd_size20) 0 var(--zd_size76) ;
-}
-
-[dir=rtl] .messageOff {
-  padding: 0 var(--zd_size76) 0 var(--zd_size20) ;
-}
-
 .message:hover {
   background: var(--zdt_toastmessage_dropdown_bg);
 }
@@ -312,9 +298,9 @@
 }
 
 .dangerShadow {
+  margin-block-start: var(--zd_size5) ;
   color: var(--zdt_toastmessage_danger_text);
   text-shadow: 0 4px 22px var(--zdt_toastmessage_danger_text_shadow);
-  margin-top: var(--zd_size5) ;
 }
 
 .successPlain {
@@ -327,4 +313,4 @@
 
 .primaryPlain {
   color: var(--zdt_toastmessage_primary_text);
-}
+}

package/es/Upload/Upload.module.css

@@ -3,7 +3,7 @@
   transition: all var(--zd_transition3);
   vertical-align: middle;
   cursor: pointer;
-  padding: var(--zd_size5) ;
+  padding:var(--zd_size5) ;
   border-radius: 2px;
 }
 
@@ -76,12 +76,9 @@
   height: 100% ;
 }
 
-[dir=ltr] .attachInfo {
-  padding: var(--zd_size4) 0 0 var(--zd_size8) ;
-}
-
-[dir=rtl] .attachInfo {
-  padding: var(--zd_size4) var(--zd_size8) 0 0 ;
+.attachInfo {
+  padding-block: var(--zd_size4) 0 ;
+  padding-inline:var(--zd_size8) 0 ;
 }
 
 .fileIcon {
@@ -90,10 +87,11 @@
 
 .attachsize {
   font-size: var(--zd_font_size10) ;
+  padding-block: var(--zd_size4) var(--zd_size2) ;
+  padding-inline:0 ;
   letter-spacing: 1px;
   composes: dotted from "~@zohodesk/components/es/common/common.module.css";
   text-transform: uppercase;
-  padding: var(--zd_size4) 0 var(--zd_size2) ;
 }
 
 .light .attachsize {
@@ -151,4 +149,4 @@
 .container:hover .overlay {
   opacity: 1;
   visibility: visible;
-}
+}

package/es/alert/AlertHeader/AlertHeader.module.css

@@ -1,40 +1,26 @@
 .container {
   min-height: var(--zd_size54) ;
   position: relative;
-}[dir=ltr] .container {
-  padding: var(--zd_size12) var(--zd_size45) var(--zd_size12) var(--zd_size26) ;
-}[dir=rtl] .container {
-  padding: var(--zd_size12) var(--zd_size26) var(--zd_size12) var(--zd_size45) ;
+  padding-block:var(--zd_size12) ;
+  padding-inline:var(--zd_size26) var(--zd_size45) ;
 }
 
-[dir=ltr] .extraSmall {
-  padding: var(--zd_size12) var(--zd_size45) var(--zd_size12) var(--zd_size16) ;
+.extraSmall {
+  padding-block:var(--zd_size12) ;
+  padding-inline:var(--zd_size16) var(--zd_size45) ;
 }
 
-[dir=rtl] .extraSmall {
-  padding: var(--zd_size12) var(--zd_size16) var(--zd_size12) var(--zd_size45) ;
-}
-
-[dir=ltr] .iconContainer {
-  margin: 0 var(--zd_size10) 0 0 ;
-}
-
-[dir=rtl] .iconContainer {
-  margin: 0 0 0 var(--zd_size10) ;
+.iconContainer {
+  margin-block:0 ;
+  margin-inline: 0 var(--zd_size10) ;
 }
 
 .title {
+  margin-block:0 ;
+  margin-inline:0 var(--zd_size5) ;
   font-size: 0 ;
 }
 
-[dir=ltr] .title {
-  margin: 0 var(--zd_size5) 0 0 ;
-}
-
-[dir=rtl] .title {
-  margin: 0 0 0 var(--zd_size5) ;
-}
-
 .iconStyle {
   display: block;
 }
@@ -78,4 +64,4 @@
 
 .text_default {
   color: var(--zdt_alertheader_default_text);
-}
+}

package/es/alert/AlertLookup/AlertLookup.module.css

@@ -3,25 +3,24 @@
 }
 
 .innerSection {
+  padding-block:var(--zd_size30) var(--zd_size20) ;
+  padding-inline: var(--zd_size20) ;
   line-height: 1.6667;
   color: var(--zdt_alertlookup_innersection_text);
   font-size: var(--zd_font_size15) ;
   word-break: break-word;
-  padding: var(--zd_size30) var(--zd_size20) var(--zd_size20) ;
 }
 
-[dir=ltr] .buttonGap {
-  margin: 0 0 0 var(--zd_size12) ;
-}
-
-[dir=rtl] .buttonGap {
-  margin: 0 var(--zd_size12) 0 0 ;
+.buttonGap {
+  margin-block:0 ;
+  margin-inline:var(--zd_size12) 0 ;
 }
 
 .text {
-  margin-top: var(--zd_size20) ;
+  margin-block-start: var(--zd_size20) ;
 }
 
 .extraSmall .innerSection {
-  padding: var(--zd_size30) var(--zd_size16) var(--zd_size46) ;
-}
+  padding-block:var(--zd_size30) var(--zd_size46) ;
+  padding-inline:var(--zd_size16) ;
+}

package/es/avatar/AvatarCollision/AvatarCollision.module.css

@@ -3,7 +3,7 @@
   composes: dInflex from '~@zohodesk/components/es/common/common.module.css';
   vertical-align: middle;
   border-radius: 50%;
-  padding: var(--zd_size2) ;
+  padding:var(--zd_size2) ;
 }
 .on {
   border: 1px solid var(--zdt_avatarcollision_on_border);

package/es/avatar/AvatarWithTeam/AvatarWithTeam.module.css

@@ -8,7 +8,7 @@
   position: absolute;
   bottom: calc( var(--zd_size6) * -1 ) ;
   font-size: 0 ;
-  padding: var(--zd_size2) ;
+  padding:var(--zd_size2) ;
   border-radius: 50%;
   transform: scale(0.8);
   background-color: var(--zdt_avatarwithteam_default_bg);