@zohodesk/components 1.0.0-alpha-247 → 1.0.0-alpha-249

package/es/common/common.module.css

@@ -23,6 +23,19 @@
   overflow: auto;
 }
 
+.preventScrollBubbleX {
+  overscroll-behavior-x: contain;
+}
+
+.preventScrollBubbleY {
+  overscroll-behavior-y: contain;
+}
+
+.preventScrollBubbleBoth {
+  overscroll-behavior: contain;
+}
+
+
 /*  --Position Props-- */
 .posrel {
   position: relative;
@@ -38,12 +51,12 @@
 
 .cboth::after {
   content: '.';
+  clear: both;
   display: block;
   font-size: 0;
   height: 0;
   line-height: 0;
   visibility: hidden;
-  clear: both;
 }
 
 .blockEvent {
@@ -53,56 +66,49 @@
 .clboth {
   clear: both;
 }
+
 .disable,
 .disabled {
   position: relative;
 }
+
 .disable::after {
   cursor: no-drop;
   background: var(--zdt_disable_bg);
 }
+
 .disable::after,
 .disabled::after,
 .readonly::after {
   position: absolute;
+  left: 0;
   top: 0;
+  right: 0;
   bottom: 0;
   z-index: 2;
   content: '';
   user-select: none;
 }
-[dir=ltr] .disable::after, [dir=ltr] .disabled::after, [dir=ltr] .readonly::after {
-  left: 0;
-  right: 0;
-}
-[dir=rtl] .disable::after, [dir=rtl] .disabled::after, [dir=rtl] .readonly::after {
-  right: 0;
-  left: 0;
-}
 
-.disabled, .readonly {
+.disabled,
+.readonly {
   cursor: not-allowed;
 }
-.disabled::after, .readonly::after {
+
+.disabled::after,
+.readonly::after {
   cursor: not-allowed;
 }
 
 /*  --Float Props-- */
-[dir=ltr] .fleft {
+.fleft {
   float: left;
 }
-[dir=rtl] .fleft {
-  float: right;
-}
 
-[dir=ltr] .fright {
+.fright {
   float: right;
 }
 
-[dir=rtl] .fright {
-  float: left;
-}
-
 .fnone {
   float: none;
 }
@@ -217,6 +223,7 @@
   -ms-flex-align: end;
   align-items: flex-end;
 }
+
 .alignBaseline {
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -319,10 +326,10 @@
 }
 
 .rounded {
+  border-radius: 50%;
   -moz-border-radius: 50%;
   -webkit-border-radius: 50%;
   -ms-border-radius: 50%;
-  border-radius: 50%;
 }
 
 .noradius {
@@ -333,22 +340,14 @@
   text-align: center;
 }
 
-[dir=ltr] .tleft {
+.tleft {
   text-align: left;
 }
 
-[dir=rtl] .tleft {
+.tright {
   text-align: right;
 }
 
-[dir=ltr] .tright {
-  text-align: right;
-}
-
-[dir=rtl] .tright {
-  text-align: left;
-}
-
 .textCap {
   text-transform: uppercase;
 }
@@ -361,46 +360,28 @@
   top: 50%;
 }
 
-[dir=ltr] .l50 {
+.l50 {
   left: 50%;
 }
 
-[dir=rtl] .l50 {
-  right: 50%;
-}
-
-[dir=ltr] .middle {
+.middle {
   transform: translate(-50%, -50%) translateZ(0);
   -webkit-transform: translate(-50%, -50%) translateZ(0);
   -moz-transform: translate(-50%, -50%) translateZ(0);
   -ms-transform: translate(-50%, -50%) translateZ(0);
 }
 
-[dir=rtl] .middle {
-  transform: translate(50%, -50%) translateZ(0);
-  -webkit-transform: translate(50%, -50%) translateZ(0);
-  -moz-transform: translate(50%, -50%) translateZ(0);
-  -ms-transform: translate(50%, -50%) translateZ(0);
-}
-
 .middleBoth {
   composes: middle;
   top: 50%;
-}
-
-[dir=ltr] .middleBoth {
   left: 50%;
 }
 
-[dir=rtl] .middleBoth {
-  right: 50%;
-}
-
 .middleY {
+  transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
 }
 
 .yMiddle {
@@ -408,30 +389,23 @@
   composes: t50;
 }
 
-[dir=ltr] .middleX {
+.middleX {
   transform: translateX(-50%);
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
 }
 
-[dir=rtl] .middleX {
-  transform: translateX(50%);
-  -webkit-transform: translateX(50%);
-  -moz-transform: translateX(50%);
-  -ms-transform: translateX(50%);
-}
-
 .xMiddle {
   composes: middleX;
   composes: l50;
 }
 
 .transZ {
+  transform: translateZ(0);
   -moz-transform: translateZ(0);
   -webkit-transform: translateZ(0);
   -ms-transform: translateZ(0);
-  transform: translateZ(0);
 }
 
 .vishidden {
@@ -455,9 +429,9 @@
 
 .notrans {
   transition: none;
+  -webkit-transition: none;
   -moz-transition: none;
   -ms-transition: none;
-  -webkit-transition: none;
 }
 
 .dotted {
@@ -466,6 +440,7 @@
   word-wrap: normal;
   text-overflow: ellipsis;
 }
+
 .clamp {
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -492,11 +467,13 @@
   position: sticky;
   position: -webkit-sticky;
 }
-.fitContWidth{
+
+.fitContWidth {
   width: fit-content;
   width: -moz-fit-content;
 }
-.fitContHeight{
+
+.fitContHeight {
   height: fit-content;
   height: -moz-fit-content;
-}
+}

package/es/common/customscroll.module.css

@@ -21,10 +21,12 @@
   -ms-scrollbar-highlight-color: var(--zd-scroll-bg);
   -ms-scrollbar-face-color: var(--zd-scroll-thump);
 }
-.scroll::-webkit-scrollbar, .scroll ::-webkit-scrollbar {
+.scroll::-webkit-scrollbar,
+.scroll ::-webkit-scrollbar {
   background: var(--zd-scroll-corner-bg);
 }
-.scroll::-webkit-scrollbar:hover, .scroll ::-webkit-scrollbar:hover {
+.scroll::-webkit-scrollbar:hover,
+.scroll ::-webkit-scrollbar:hover {
   background: var(--zd-scroll-bg);
 }
 .scroll::-webkit-scrollbar:horizontal,
@@ -41,38 +43,38 @@
   width: 0;
   height: 0;
 }
-[dir=ltr] .scroll::-webkit-scrollbar-track:vertical, [dir=ltr] .scroll ::-webkit-scrollbar-track:vertical {
+.scroll::-webkit-scrollbar-track:vertical,
+.scroll ::-webkit-scrollbar-track:vertical {
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
 }
-[dir=rtl] .scroll::-webkit-scrollbar-track:vertical, [dir=rtl] .scroll ::-webkit-scrollbar-track:vertical {
-  border-right: 1px solid transparent;
-  border-left: 1px solid transparent;
-}
-.scroll::-webkit-scrollbar-track:vertical:hover, .scroll ::-webkit-scrollbar-track:vertical:hover {
+.scroll::-webkit-scrollbar-track:vertical:hover,
+.scroll ::-webkit-scrollbar-track:vertical:hover {
   border-color: var(--zd-scroll-border);
 }
-.scroll::-webkit-scrollbar-track:horizontal, .scroll ::-webkit-scrollbar-track:horizontal {
+.scroll::-webkit-scrollbar-track:horizontal,
+.scroll ::-webkit-scrollbar-track:horizontal {
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
 }
-.scroll::-webkit-scrollbar-track:horizontal:hover, .scroll ::-webkit-scrollbar-track:horizontal:hover {
+.scroll::-webkit-scrollbar-track:horizontal:hover,
+.scroll ::-webkit-scrollbar-track:horizontal:hover {
   border-color: var(--zd-scroll-border);
 }
-.scroll::-webkit-scrollbar-track-piece, .scroll ::-webkit-scrollbar-track-piece {
+.scroll::-webkit-scrollbar-track-piece,
+.scroll ::-webkit-scrollbar-track-piece {
   background: inherit;
 }
 .scroll::-webkit-scrollbar-thumb,
 .scroll ::-webkit-scrollbar-thumb {
-  /* display: none; */
-}
-.scroll::-webkit-scrollbar-thumb, .scroll ::-webkit-scrollbar-thumb {
   border-radius: 10px;
   background: var(--zd-scroll-thump);
   background-clip: padding-box;
   border: 3px solid transparent;
+  /* display: none; */
 }
-.scroll::-webkit-scrollbar-thumb:hover, .scroll ::-webkit-scrollbar-thumb:hover {
+.scroll::-webkit-scrollbar-thumb:hover,
+.scroll ::-webkit-scrollbar-thumb:hover {
   background: var(--zd-scroll-thump-hoverbg);
   background-clip: padding-box;
   border: 3px solid transparent;
@@ -81,9 +83,11 @@
 .scroll *:hover > ::-webkit-scrollbar-thumb {
   display: block;
 } */
-.scroll::-webkit-scrollbar-corner, .scroll ::-webkit-scrollbar-corner {
+.scroll::-webkit-scrollbar-corner,
+.scroll ::-webkit-scrollbar-corner {
   background: var(--zd-scroll-corner-bg);
 }
-.scroll::-webkit-resizer, .scroll ::-webkit-resizer {
+.scroll::-webkit-resizer,
+.scroll ::-webkit-resizer {
   background: inherit;
 }

package/es/common/docStyle.module.css

@@ -1,11 +1,11 @@
 .cboth::after {
   content: '.';
+  clear: both;
   display: block;
   font-size: 0;
   height: 0;
   line-height: 0;
   visibility: hidden;
-  clear: both;
 }
 
 .m10 {
@@ -16,14 +16,10 @@
   margin: 50px;
 }
 
-[dir=ltr] .pl10 {
+.pl10 {
   padding-left: 10px;
 }
 
-[dir=rtl] .pl10 {
-  padding-right: 10px;
-}
-
 .p10 {
   padding: 10px;
 }
@@ -65,14 +61,10 @@
   margin-bottom: 20px;
 }
 
-[dir=ltr] .mr20 {
+.mr20 {
   margin-right: 20px;
 }
 
-[dir=rtl] .mr20 {
-  margin-left: 20px;
-}
-
 .w60 {
   width: 60%;
 }
@@ -98,25 +90,22 @@
 }
 
 .dark {
-  composes: p10;
   background-color: var(--dot_black);
+  composes: p10;
 }
 
 .table {
-  composes: p10;
-  composes: cboth;
   border: 1px solid var(--zd_smoke84);
   border-radius: 3px;
+  composes: p10;
+  composes: cboth;
 }
 
-[dir=ltr] .table .w60, [dir=ltr] .table .w40 {
+.table .w60,
+.table .w40 {
   float: left;
 }
 
-[dir=rtl] .table .w60, [dir=rtl] .table .w40 {
-  float: right;
-}
-
 .tableheading {
   composes: blue;
   background:var(--zd_smoke1);
@@ -128,10 +117,10 @@
   composes: p10;
   composes: m10;
   width: 200px;
-  composes: tcenter;
-  font-weight: bold;
   border: 1px solid var(--zd_smoke83);
   border-radius: 3px;
+  composes: tcenter;
+  font-weight: bold;
 }
 
 .palette .palettecard {
@@ -147,10 +136,10 @@
 
 .fontlist {
   composes: tcenter;
-  composes: p10;
-  composes: m10;
   border: 1px solid var(--zd_smoke83);
   border-radius: 3px;
+  composes: p10;
+  composes: m10;
 }
 
 .fontlist span {
@@ -159,9 +148,9 @@
 }
 
 .cover {
+  border: 1px solid var(--zd_smoke1);
   composes: p10;
   composes: m10;
-  border: 1px solid var(--zd_smoke1);
   border-radius: 5px;
 }
 
@@ -205,7 +194,8 @@
   background-color: #e2e4e6;
   padding: 5px;
 }
-.content, .trow {
+.content,
+.trow {
   padding: 5px;
 }
 .trow {
@@ -215,19 +205,14 @@
   background-color: #f6f6f6;
 }
 .colorvalue {
-  font-size: 13px;
-  color: #000;
   background-color: #e2e4e6;
   padding: 3px;
+  margin-right: 3px;
   border-radius: 5px;
+  font-size: 13px;
+  color: #000;
   cursor: pointer;
 }
-[dir=ltr] .colorvalue {
-  margin-right: 3px;
-}
-[dir=rtl] .colorvalue {
-  margin-left: 3px;
-}
 .rect {
   width: 40px;
   height: 40px;
@@ -243,29 +228,24 @@
   flex-direction: column;
   border: 1px dotted #ccc;
   padding: 4px 6px;
-}
-[dir=ltr] .nestedDiv {
   margin-right: 5px;
 }
-[dir=rtl] .nestedDiv {
-  margin-left: 5px;
-}
 .para {
   font-size: 13px;
   margin-bottom: 5px;
 }
 
 [data-mode='default'] {
-  color: #000;
   background: #fff;
+  color: #000;
 }
 [data-mode='dark'] {
-  color: #e2e4e6;
   background: #232b38;
+  color: #e2e4e6;
 }
 [data-mode='pureDark'] {
-  color: #e2e4e6;
   background: #212121;
+  color: #e2e4e6;
 }
 
 .baseHue {
@@ -279,13 +259,8 @@
   --avatar_bg_color: hsl(var(--hue), 100%, 90%);
   --avatar_border_color: hsl(var(--hue), 100%, 60%);
   --avatar_text_color: hsl(var(--hue), 100%, 40%);
-}
-[dir=ltr] .customAvatar {
   --avatar_border_radius: 0 12px/*rtl: 12px 0*/;
 }
-[dir=rtl] .customAvatar {
-  --avatar_border_radius: 12px 0;
-}
 .customAvatar:hover {
   --avatar_border_width: 2px;
   --avatar_bg_color: hsl(var(--hue), 100%, 85%);
@@ -420,15 +395,10 @@
 .customDropbox {
   composes: baseHue;
   --dropbox_bg_color: hsl(var(--hue), 100%, 98%);
+  --dropbox_border_radius: 30px 0/*rtl:0 30px*/;
   --dropbox_box_shadow: 0 0 10px hsl(var(--hue), 100%, 90%);
   --dropbox_arrow_box_shadow_color: hsl(var(--hue), 100%, 90%);
 }
-[dir=ltr] .customDropbox {
-  --dropbox_border_radius: 30px 0/*rtl:0 30px*/;
-}
-[dir=rtl] .customDropbox {
-  --dropbox_border_radius: 0 30px;
-}
 .customDropbox:hover {
   --dropbox_box_shadow: 0 0 10px hsl(var(--hue), 100%, 80%);
   --dropbox_arrow_box_shadow_color: hsl(var(--hue), 100%, 80%);
@@ -632,39 +602,24 @@
 }
 .flagRibbon {
   composes: ribbon;
-}
-[dir=ltr] .flagRibbon {
   --ribbon_padding: 10px 20px/*rtl: 10px 20px*/;
   --ribbon_flag_border_width: 20px 10px 20px 0/*rtl: 20px 0 20px 10px*/;
 }
-[dir=rtl] .flagRibbon {
-  --ribbon_padding: 10px 20px;
-  --ribbon_flag_border_width: 20px 0 20px 10px;
-}
 .tagRibbon {
   composes: ribbon;
+  border-width: 2px 2px 2px 0/*rtl: 2px 0 2px 2px*/;
+  border-color: hsl(var(--hue), 100%, 50%);
+  border-radius: 0 6px 6px 0/*rtl: 6px 0 0 6px*/;
+  margin-left: 30px;
+  padding: 18px 30px/*rtl: 18px 30px*/;
   height: 56px;
   --ribbon_tag_before_width: 40px;
   --ribbon_tag_before_height: 40px;
+  --ribbon_tag_before_border_width: 2px 0 0 2px/*rtl: 2px 2px 0 0*/;
   --ribbon_tag_before_border_color: hsl(var(--hue), 100%, 50%);
   --ribbon_tag_before_left: -20px;
   --ribbon_tag_before_top: 6px;
   --ribbon_tag_before_border_radius: 0;
-  border-color: hsl(var(--hue), 100%, 50%);
-}
-[dir=ltr] .tagRibbon {
-  border-width: 2px 2px 2px 0/*rtl: 2px 0 2px 2px*/;
-  border-radius: 0 6px 6px 0/*rtl: 6px 0 0 6px*/;
-  margin-left: 30px;
-  padding: 18px 30px/*rtl: 18px 30px*/;
-  --ribbon_tag_before_border_width: 2px 0 0 2px/*rtl: 2px 2px 0 0*/;
-}
-[dir=rtl] .tagRibbon {
-  border-width: 2px 0 2px 2px;
-  border-radius: 6px 0 0 6px;
-  margin-right: 30px;
-  padding: 18px 30px;
-  --ribbon_tag_before_border_width: 2px 2px 0 0;
 }
 .boxRibbon {
   composes: ribbon;
@@ -699,10 +654,10 @@
 /* custom textboxicon css */
 .customTboxwrap {
   composes: baseHue;
-  --textboxicon_icon_margin: 4px 10px;
-  --textboxicon_icon_color: hsl(var(--hue), 100%, 50%);
   background-color: hsl(var(--hue), 100%, 90%);
   margin: 5px 0;
+  --textboxicon_icon_margin: 4px 10px;
+  --textboxicon_icon_color: hsl(var(--hue), 100%, 50%);
 }
 .customTbox {
   --textbox_text_color: hsl(var(--hue), 100%, 50%);
@@ -729,8 +684,6 @@
 .tBoxIconRead,
 .tBoxIconDisable {
   composes: baseHue;
-}
-.tBoxIconRead, .tBoxIconDisable {
   background-color: hsl(var(--hue), 100%, 90%);
   margin: 5px 0;
 }
@@ -744,11 +697,11 @@
 /* custom textarea css */
 .customTextarea {
   composes: baseHue;
+  background-color: hsl(var(--hue), 100%, 97%);
   --textarea_border_width: 1px;
   --textarea_border_color: hsl(var(--hue), 100%, 50%);
   --textarea_text_color: hsl(var(--hue), 100%, 50%);
   --textarea_padding: 2px 10px;
-  background-color: hsl(var(--hue), 100%, 97%);
 }
 .customTextarea:hover {
   --textarea_border_color: hsl(var(--hue), 100%, 40%);
@@ -758,9 +711,9 @@
 }
 .disabledTarea {
   composes: baseHue;
+  background-color: hsl(var(--hue), 100%, 97%);
   --textarea_border_width: 1px;
   --textarea_border_color: hsl(var(--hue), 100%, 80%);
   --textarea_text_color: hsl(var(--hue), 100%, 80%);
   --textarea_padding: 2px 10px;
-  background-color: hsl(var(--hue), 100%, 97%);
 }