@zohodesk/components 1.0.0-alpha-245 → 1.0.0-alpha-248

package/lib/common/common.module.css

@@ -1,502 +1,525 @@
-/*Font-smooth*/
-.ftsmooth {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-}
-
-/*  --Overflow Props-- */
-.oflowx {
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-
-.oflowy {
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.oflow {
-  overflow: hidden;
-}
-
-.oflowA {
-  overflow: auto;
-}
-
-/*  --Position Props-- */
-.posrel {
-  position: relative;
-}
-
-.posab {
-  position: absolute;
-}
-
-.posfix {
-  position: fixed;
-}
-
-.cboth::after {
-  content: '.';
-  display: block;
-  font-size: 0;
-  height: 0;
-  line-height: 0;
-  visibility: hidden;
-  clear: both;
-}
-
-.blockEvent {
-  pointer-events: none;
-}
-
-.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;
-  top: 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 {
-  cursor: not-allowed;
-}
-.disabled::after, .readonly::after {
-  cursor: not-allowed;
-}
-
-/*  --Float Props-- */
-[dir=ltr] .fleft {
-  float: left;
-}
-[dir=rtl] .fleft {
-  float: right;
-}
-
-[dir=ltr] .fright {
-  float: right;
-}
-
-[dir=rtl] .fright {
-  float: left;
-}
-
-.fnone {
-  float: none;
-}
-
-/*  --Display Props-- */
-.dinblk {
-  display: inline-block;
-}
-
-.dblk {
-  display: block;
-}
-
-.dtable {
-  display: table;
-}
-
-.dtcell {
-  display: table-cell;
-}
-
-.hide {
-  display: none;
-}
-
-/* FLex Assets*/
-.dflex {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.dInflex {
-  display: inline-flex;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-}
-
-.flexwrap {
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.flexcolumn {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.flexrow {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.flexrowreverse {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: reverse;
-  -webkit-flex-direction: row-reverse;
-  -ms-flex-direction: row-reverse;
-  flex-direction: row-reverse;
-}
-
-.flexcolumnreverse {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: reverse;
-  -webkit-flex-direction: column-reverse;
-  -ms-flex-direction: column-reverse;
-  flex-direction: column-reverse;
-}
-
-.flexgrow {
-  -webkit-box-flex: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  min-height: 0;
-  min-width: 0;
-}
-
-.flexshrink {
-  flex-shrink: 0;
-  -moz-flex-shrink: 0;
-  -webkit-flex-shrink: 0;
-  -ms-flex-shrink: 0;
-}
-
-.flexbasis {
-  flex-basis: 0%;
-  -webkit-flex-basis: 0%;
-  -moz-flex-basis: 0%;
-  -ms-flex-basis: 0%;
-}
-
-.alignVertical {
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.alignFstart {
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: flex-start;
-}
-
-.alignFend {
-  -webkit-box-align: end;
-  -ms-flex-align: end;
-  align-items: flex-end;
-}
-.alignBaseline {
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-}
-
-.alignHorizontal {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.alignAround {
-  -ms-flex-pack: distribute;
-  justify-content: space-around;
-}
-
-.alignBetween {
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-
-.justifyFend {
-  -webkit-box-pack: flex-end;
-  -ms-flex-pack: flex-end;
-  justify-content: flex-end;
-}
-
-/* --Vertical props-- */
-
-.vtop {
-  vertical-align: top;
-}
-
-.vbot {
-  vertical-align: bottom;
-}
-
-.vmid {
-  vertical-align: middle;
-}
-
-/*  --Resize Props-- */
-.resizeX {
-  resize: horizontal;
-}
-
-.resizenone {
-  resize: none;
-}
-
-.resizeboth {
-  resize: both;
-}
-
-.resizeY {
-  resize: vertical;
-}
-
-/*font-family*/
-.regular {
-  font-family: var(--zd_regular, Regular);
-}
-
-.light {
-  font-family: var(--zd_light, Light);
-}
-
-.semibold {
-  font-family: var(--zd_semibold, Semibold);
-  composes: ftsmooth;
-}
-
-.bold {
-  font-family: var(--zd_bold, Bold);
-  composes: ftsmooth;
-}
-
-/* --Pointer props-- */
-.pointer {
-  cursor: pointer;
-}
-
-.notallow {
-  cursor: not-allowed;
-}
-
-.curdefault {
-  cursor: default;
-}
-
-/* --Width Props-- */
-.w100 {
-  width: 100%;
-}
-
-.h100 {
-  height: 100%;
-}
-
-.rounded {
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  -ms-border-radius: 50%;
-  border-radius: 50%;
-}
-
-.noradius {
-  border-radius: 0;
-}
-
-.tcenter {
-  text-align: center;
-}
-
-[dir=ltr] .tleft {
-  text-align: left;
-}
-
-[dir=rtl] .tleft {
-  text-align: right;
-}
-
-[dir=ltr] .tright {
-  text-align: right;
-}
-
-[dir=rtl] .tright {
-  text-align: left;
-}
-
-.textCap {
-  text-transform: uppercase;
-}
-
-.textCaps {
-  text-transform: capitalize;
-}
-
-.t50 {
-  top: 50%;
-}
-
-[dir=ltr] .l50 {
-  left: 50%;
-}
-
-[dir=rtl] .l50 {
-  right: 50%;
-}
-
-[dir=ltr] .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 {
-  -webkit-transform: translateY(-50%);
-  -moz-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.yMiddle {
-  composes: middleY;
-  composes: t50;
-}
-
-[dir=ltr] .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 {
-  -moz-transform: translateZ(0);
-  -webkit-transform: translateZ(0);
-  -ms-transform: translateZ(0);
-  transform: translateZ(0);
-}
-
-.vishidden {
-  visibility: hidden;
-}
-
-.visible {
-  visibility: visible;
-}
-
-.coverafter::after {
-  content: '';
-  vertical-align: middle;
-  display: inline-block;
-  height: 100%;
-}
-
-.wbreak {
-  word-break: break-word;
-}
-
-.notrans {
-  transition: none;
-  -moz-transition: none;
-  -ms-transition: none;
-  -webkit-transition: none;
-}
-
-.dotted {
-  overflow: hidden;
-  white-space: nowrap;
-  word-wrap: normal;
-  text-overflow: ellipsis;
-}
-.clamp {
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  display: -webkit-box;
-  overflow: hidden;
-}
-
-.offSelection {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.disableFocus a,
-.disableFocus input,
-.disableFocus textarea,
-.disableFocus button,
-.disableFocus iframe {
-  display: none;
-}
-
-.sticky {
-  position: sticky;
-  position: -webkit-sticky;
-}
-.fitContWidth{
-  width: fit-content;
-  width: -moz-fit-content;
-}
-.fitContHeight{
-  height: fit-content;
-  height: -moz-fit-content;
-}
+/*Font-smooth*/
+.ftsmooth {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+/*  --Overflow Props-- */
+.oflowx {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.oflowy {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.oflow {
+  overflow: hidden;
+}
+
+.oflowA {
+  overflow: auto;
+}
+
+.preventScrollBubbleX {
+  overscroll-behavior-x: contain;
+}
+
+.preventScrollBubbleY {
+  overscroll-behavior-y: contain;
+}
+
+.preventScrollBubbleBoth {
+  overscroll-behavior: contain;
+}
+
+
+/*  --Position Props-- */
+.posrel {
+  position: relative;
+}
+
+.posab {
+  position: absolute;
+}
+
+.posfix {
+  position: fixed;
+}
+
+.cboth::after {
+  content: '.';
+  display: block;
+  font-size: 0;
+  height: 0;
+  line-height: 0;
+  visibility: hidden;
+  clear: both;
+}
+
+.blockEvent {
+  pointer-events: none;
+}
+
+.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;
+  top: 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 {
+  cursor: not-allowed;
+}
+
+.disabled::after, .readonly::after {
+  cursor: not-allowed;
+}
+
+/*  --Float Props-- */
+[dir=ltr] .fleft {
+  float: left;
+}
+[dir=rtl] .fleft {
+  float: right;
+}
+
+[dir=ltr] .fright {
+  float: right;
+}
+
+[dir=rtl] .fright {
+  float: left;
+}
+
+.fnone {
+  float: none;
+}
+
+/*  --Display Props-- */
+.dinblk {
+  display: inline-block;
+}
+
+.dblk {
+  display: block;
+}
+
+.dtable {
+  display: table;
+}
+
+.dtcell {
+  display: table-cell;
+}
+
+.hide {
+  display: none;
+}
+
+/* FLex Assets*/
+.dflex {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.dInflex {
+  display: inline-flex;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+}
+
+.flexwrap {
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.flexcolumn {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.flexrow {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.flexrowreverse {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: reverse;
+  -webkit-flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+}
+
+.flexcolumnreverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+  -webkit-flex-direction: column-reverse;
+  -ms-flex-direction: column-reverse;
+  flex-direction: column-reverse;
+}
+
+.flexgrow {
+  -webkit-box-flex: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-height: 0;
+  min-width: 0;
+}
+
+.flexshrink {
+  flex-shrink: 0;
+  -moz-flex-shrink: 0;
+  -webkit-flex-shrink: 0;
+  -ms-flex-shrink: 0;
+}
+
+.flexbasis {
+  flex-basis: 0%;
+  -webkit-flex-basis: 0%;
+  -moz-flex-basis: 0%;
+  -ms-flex-basis: 0%;
+}
+
+.alignVertical {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.alignFstart {
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+}
+
+.alignFend {
+  -webkit-box-align: end;
+  -ms-flex-align: end;
+  align-items: flex-end;
+}
+
+.alignBaseline {
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+}
+
+.alignHorizontal {
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.alignAround {
+  -ms-flex-pack: distribute;
+  justify-content: space-around;
+}
+
+.alignBetween {
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.justifyFend {
+  -webkit-box-pack: flex-end;
+  -ms-flex-pack: flex-end;
+  justify-content: flex-end;
+}
+
+/* --Vertical props-- */
+
+.vtop {
+  vertical-align: top;
+}
+
+.vbot {
+  vertical-align: bottom;
+}
+
+.vmid {
+  vertical-align: middle;
+}
+
+/*  --Resize Props-- */
+.resizeX {
+  resize: horizontal;
+}
+
+.resizenone {
+  resize: none;
+}
+
+.resizeboth {
+  resize: both;
+}
+
+.resizeY {
+  resize: vertical;
+}
+
+/*font-family*/
+.regular {
+  font-family: var(--zd_regular, Regular);
+}
+
+.light {
+  font-family: var(--zd_light, Light);
+}
+
+.semibold {
+  font-family: var(--zd_semibold, Semibold);
+  composes: ftsmooth;
+}
+
+.bold {
+  font-family: var(--zd_bold, Bold);
+  composes: ftsmooth;
+}
+
+/* --Pointer props-- */
+.pointer {
+  cursor: pointer;
+}
+
+.notallow {
+  cursor: not-allowed;
+}
+
+.curdefault {
+  cursor: default;
+}
+
+/* --Width Props-- */
+.w100 {
+  width: 100%;
+}
+
+.h100 {
+  height: 100%;
+}
+
+.rounded {
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  -ms-border-radius: 50%;
+  border-radius: 50%;
+}
+
+.noradius {
+  border-radius: 0;
+}
+
+.tcenter {
+  text-align: center;
+}
+
+[dir=ltr] .tleft {
+  text-align: left;
+}
+
+[dir=rtl] .tleft {
+  text-align: right;
+}
+
+[dir=ltr] .tright {
+  text-align: right;
+}
+
+[dir=rtl] .tright {
+  text-align: left;
+}
+
+.textCap {
+  text-transform: uppercase;
+}
+
+.textCaps {
+  text-transform: capitalize;
+}
+
+.t50 {
+  top: 50%;
+}
+
+[dir=ltr] .l50 {
+  left: 50%;
+}
+
+[dir=rtl] .l50 {
+  right: 50%;
+}
+
+[dir=ltr] .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 {
+  -webkit-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.yMiddle {
+  composes: middleY;
+  composes: t50;
+}
+
+[dir=ltr] .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 {
+  -moz-transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+}
+
+.vishidden {
+  visibility: hidden;
+}
+
+.visible {
+  visibility: visible;
+}
+
+.coverafter::after {
+  content: '';
+  vertical-align: middle;
+  display: inline-block;
+  height: 100%;
+}
+
+.wbreak {
+  word-break: break-word;
+}
+
+.notrans {
+  transition: none;
+  -moz-transition: none;
+  -ms-transition: none;
+  -webkit-transition: none;
+}
+
+.dotted {
+  overflow: hidden;
+  white-space: nowrap;
+  word-wrap: normal;
+  text-overflow: ellipsis;
+}
+
+.clamp {
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+.offSelection {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.disableFocus a,
+.disableFocus input,
+.disableFocus textarea,
+.disableFocus button,
+.disableFocus iframe {
+  display: none;
+}
+
+.sticky {
+  position: sticky;
+  position: -webkit-sticky;
+}
+
+.fitContWidth {
+  width: fit-content;
+  width: -moz-fit-content;
+}
+
+.fitContHeight {
+  height: fit-content;
+  height: -moz-fit-content;
+}