@zohodesk/dot 1.9.10 → 1.9.11

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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);

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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) ;
 }