@zohodesk/components 1.0.0-alpha-268 → 1.0.0-alpha-270

package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -1,428 +1,429 @@
-.main {
-    z-index: 3;
-    composes: varClass from '../../css/DropBox.module.css';
-}
-
-.container {
-    position: absolute;
-}
-
-.fixedContainer {
-    position: fixed;
-}
-
-.subContainer {
-    position: relative;
-    border-radius: var(--dropbox_border_radius);
-    padding: var(--dropbox_padding);
-    box-shadow: var(--dropbox_box_shadow);
-}
-
-.defaultPalette, .darkPalette {
-    background-color: var(--dropbox_bg_color);
-}
-
-.radius {
-    --dropbox_border_radius: 3px;
-}
-
-.mobRadius {
-    --dropbox_border_radius: 30px 30px 0 0;
-    --dropbox_padding: var(--zd_size10) 0 0 0;
-}
-
-/* sizes */
-.mini {
-    width: var(--zd_size140);
-}
-
-.xmini {
-    width: var(--zd_size160);
-}
-
-.xsmall {
-    width: var(--zd_size180);
-}
-
-.small {
-    width: var(--zd_size200);
-}
-
-.medium {
-    width: var(--zd_size220);
-}
-
-.large {
-    width: var(--zd_size260);
-}
-
-.mlarge {
-    width: var(--zd_size280);
-}
-
-.xlarge {
-    width: var(--zd_size304);
-}
-
-.xxlarge {
-    width: var(--zd_size364);
-}
-
-.default {
-    width: 100%;
-}
-
-/* shadow */
-.top_shadow {
-    --dropbox_box_shadow: var(--zd_bs_dropbox_top);
-}
-
-.left_shadow {
-    --dropbox_box_shadow: var(--zd_bs_dropbox_left);
-}
-
-.right_shadow {
-    --dropbox_box_shadow: var(--zd_bs_dropbox_right);
-}
-
-.bottom_shadow {
-    --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
-}
-
-.defaultShadow {
-    box-shadow: var(--zd_bs_dropbox_default);
-}
-
-/* box direction styles */
-.topStart {
-    bottom: 100%;
-    right: 0;
-}
-
-.topEnd {
-    bottom: 100%;
-    left: 0;
-}
-
-.topMid {
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-}
-
-.bottomStart {
-    top: 100%;
-    right: 0;
-}
-
-.bottomEnd {
-    top: 100%;
-    left: 0;
-}
-
-.bottomMid {
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-}
-
-.rightStart {
-    left: 100%;
-    bottom: 0;
-}
-
-.rightEnd {
-    left: 100%;
-    top: 0;
-}
-
-.rightMid {
-    left: 100%;
-    top: 50%;
-    transform: translateY(-50%);
-}
-
-.leftStart {
-    right: 100%;
-    bottom: 0;
-}
-
-.leftEnd {
-    right: 100%;
-    top: 0;
-}
-
-.leftMid {
-    right: 100%;
-    top: 50%;
-    transform: translateY(-50%);
-}
-
-/* space for arrow */
-.arrowtop {
-    padding-bottom: var(--zd_size10);
-}
-
-.arrowright {
-    padding-left: var(--zd_size10);
-}
-
-.arrowleft {
-    padding-right: var(--zd_size10);
-}
-
-.arrowbottom {
-    padding-top: var(--zd_size10);
-}
-
-/* space from target */
-.paddingSpace_top {
-    padding-bottom: var(--zd_size5);
-}
-
-.paddingSpace_right {
-    padding-left: var(--zd_size5);
-}
-
-.paddingSpace_left {
-    padding-right: var(--zd_size5);
-}
-
-.paddingSpace_bottom {
-    padding-top: var(--zd_size5);
-}
-
-.arrow {
-    position: absolute;
-    height: var(--zd_size34);
-    width: var(--zd_size34);
-    clip: rect(var(--zd_size3),
-            var(--zd_size29),
-            var(--zd_size17),
-            var(--zd_size8));
-    padding: var(--zd_size4);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.arrowShape {
-    height: var(--zd_size10);
-    width: var(--zd_size10);
-    box-shadow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
-    background-color: var(--dropbox_bg_color);
-    -webkit-transform: rotateZ(-45deg);
-    transform: rotateZ(-45deg);
-}
-
-/* arrow placement styles */
-.start,
-.end,
-.mid {
-    composes: arrow;
-}
-
-.top .start,
-.top .end,
-.top .mid {
-    bottom: calc(var(--zd_size17) * -1);
-}
-
-.top .start {
-    left: var(--zd_size28);
-}
-
-.top .end {
-    right: var(--zd_size28);
-    transform: rotate(180deg) translateX(-50%);
-}
-
-.top .mid {
-    left: 50%;
-}
-
-.top .start,
-.top .mid {
-    transform: rotate(180deg) translateX(50%);
-}
-
-.bottom .start,
-.bottom .end,
-.bottom .mid {
-    top: calc(var(--zd_size17) * -1);
-}
-
-.bottom .start {
-    left: var(--zd_size28);
-}
-
-.bottom .mid {
-    left: 50%;
-}
-
-.bottom .end {
-    right: var(--zd_size28);
-    transform: translateX(50%);
-}
-
-.bottom .mid,
-.bottom .start {
-    transform: translateX(-50%);
-}
-
-.left .start,
-.left .mid,
-.left .end {
-    right: calc(var(--zd_size17) * -1);
-}
-
-.left .start {
-    top: var(--zd_size28);
-}
-
-.left .end {
-    transform: rotate(90deg) translateX(50%);
-    bottom: var(--zd_size28);
-}
-
-.left .mid {
-    top: 50%;
-}
-
-.left .start,
-.left .mid {
-    transform: rotate(90deg) translateX(-50%);
-}
-
-.right .start,
-.right .mid,
-.right .end {
-    left: calc(var(--zd_size17) * -1);
-}
-
-.right .start {
-    top: var(--zd_size28);
-}
-
-.right .mid {
-    top: 50%;
-}
-
-.right .start,
-.right .mid {
-    transform: rotate(-90deg) translateX(50%);
-}
-
-.right .end {
-    bottom: var(--zd_size28);
-    transform: rotate(-90deg) translateX(-50%);
-}
-.hidden {
-    visibility: hidden;
-    opacity: 0;
-    z-index: 0;
-    pointer-events: none;
-}
-
-.hidden .subContainer {
-    box-shadow: none;
-}
-
-[dir=ltr] .animationBasic {
-    animation-duration: var(--zd_transition2);
-}
-
-[dir=rtl] .animationBasic {
-    animation-duration: var(--zd_transition2);
-}
-
-.fadeIn {
-    composes: animationBasic;
-    composes: fadeInScale modeForward from '../../../common/animation.module.css';
-}
-
-.bounce {
-    composes: animationBasic;
-}
-
-[dir=ltr] .bounce {
-    animation-name: animation;
-    animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
-}
-
-[dir=rtl] .bounce {
-    animation-name: animation;
-    animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
-}
-
-.slideUp {
-    composes: modeForward from '../../../common/animation.module.css';
-}
-
-[dir=ltr] .slideUp {
-    animation-duration: var(--zd_transition3);
-    animation-name: slideUp;
-    animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1);
-}
-
-[dir=rtl] .slideUp {
-    animation-duration: var(--zd_transition3);
-    animation-name: slideUp;
-    animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1);
-}
-
-@keyframes animation {
-    0% {
-        transform: scaleY(0.6) perspective(1px);
-        opacity: 0;
-        transform-origin: top center;
-    }
-
-    100% {
-        transform-origin: top center;
-        opacity: 1;
-        transform: scaleY(1) perspective(1px);
-    }
-}
-
-@keyframes slideUp {
-    0% {
-        transform: translateY(90%) perspective(1px);
-    }
-
-    100% {
-        transform: translateY(0%) perspective(1px);
-    }
-}
-
-.responsive {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    max-height: 90%;
-}
-
-[dir=ltr] .responsive {
-    left: 0;
-}
-
-[dir=rtl] .responsive {
-    right: 0;
-}
-
-.closeBar {
-    height: 6px;
-    width: 20%;
-    border-radius: 5px;
-    background-color: var(--dropbox_mob_close_bg_color);
-    cursor: pointer;
-    margin: 0 auto var(--zd_size10);
-}
-
-.boxPadding {
-    --dropbox_padding: var(--zd_size10) 0;
-}
-
-.darkPalette {
-    --dropbox_bg_color: var(--zdt_dropbox_dark_bg);
+.main {
+    z-index: 3;
+    composes: varClass from '../../css/DropBox.module.css';
+}
+
+.container {
+    position: absolute;
+}
+
+.fixedContainer {
+    position: fixed;
+}
+
+.subContainer {
+    position: relative;
+    border-radius: var(--dropbox_border_radius);
+    padding: var(--dropbox_padding);
+    box-shadow: var(--dropbox_box_shadow);
+}
+
+.defaultPalette, .darkPalette {
+    background-color: var(--dropbox_bg_color);
+}
+
+.radius {
+    --dropbox_border_radius: 3px;
+}
+
+.mobRadius {
+    --dropbox_border_radius: 30px 30px 0 0;
+    --dropbox_padding: 10px 0 0 0;
+}
+
+/* sizes */
+.mini {
+    width: 140px;
+}
+
+.xmini {
+    width: 160px;
+}
+
+.xsmall {
+    width: 180px;
+}
+
+.small {
+    width: 200px;
+}
+
+.medium {
+    width: 220px;
+}
+
+.large {
+    width: 260px;
+}
+
+.mlarge {
+    width: 280px;
+}
+
+.xlarge {
+    width: 304px;
+}
+
+.xxlarge {
+    width: 364px;
+}
+
+.default {
+    width: 100%;
+}
+
+/* shadow */
+.top_shadow {
+    --dropbox_box_shadow: var(--zd_bs_dropbox_top);
+}
+
+.left_shadow {
+    --dropbox_box_shadow: var(--zd_bs_dropbox_left);
+}
+
+.right_shadow {
+    --dropbox_box_shadow: var(--zd_bs_dropbox_right);
+}
+
+.bottom_shadow {
+    --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
+}
+
+.defaultShadow {
+    box-shadow: var(--zd_bs_dropbox_default);
+}
+
+/* box direction styles */
+.topStart {
+    bottom: 100%;
+    right: 0;
+}
+
+.topEnd {
+    bottom: 100%;
+    left: 0;
+}
+
+.topMid {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.bottomStart {
+    top: 100%;
+    right: 0;
+}
+
+.bottomEnd {
+    top: 100%;
+    left: 0;
+}
+
+.bottomMid {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.rightStart {
+    left: 100%;
+    bottom: 0;
+}
+
+.rightEnd {
+    left: 100%;
+    top: 0;
+}
+
+.rightMid {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.leftStart {
+    right: 100%;
+    bottom: 0;
+}
+
+.leftEnd {
+    right: 100%;
+    top: 0;
+}
+
+.leftMid {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+/* space for arrow */
+.arrowtop {
+    padding-bottom: 10px;
+}
+
+.arrowright {
+    padding-left: 10px;
+}
+
+.arrowleft {
+    padding-right: 10px;
+}
+
+.arrowbottom {
+    padding-top: 10px;
+}
+
+/* space from target */
+.paddingSpace_top {
+    padding-bottom: 5px;
+}
+
+.paddingSpace_right {
+    padding-left: 5px;
+}
+
+.paddingSpace_left {
+    padding-right: 5px;
+}
+
+.paddingSpace_bottom {
+    padding-top: 5px;
+}
+
+.arrow {
+    position: absolute;
+    height: 34px;
+    width: 34px;
+    clip: rect(3px,
+            29px,
+            17px,
+            8px);
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.arrowShape {
+    height: 10px;
+    width: 10px;
+    box-shadow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
+    background-color: var(--dropbox_bg_color);
+    -webkit-transform: rotateZ(-45deg);
+    transform: rotateZ(-45deg);
+}
+
+/* arrow placement styles */
+.start,
+.end,
+.mid {
+    composes: arrow;
+}
+
+.top .start,
+.top .end,
+.top .mid {
+    bottom: -17px;
+}
+
+.top .start {
+    left: 28px;
+}
+
+.top .end {
+    right: 28px;
+    transform: rotate(180deg) translateX(-50%);
+}
+
+.top .mid {
+    left: 50%;
+}
+
+.top .start,
+.top .mid {
+    transform: rotate(180deg) translateX(50%);
+}
+
+.bottom .start,
+.bottom .end,
+.bottom .mid {
+    top: -17px;
+}
+
+.bottom .start {
+    left: 28px;
+}
+
+.bottom .mid {
+    left: 50%;
+}
+
+.bottom .end {
+    right: 28px;
+    transform: translateX(50%);
+}
+
+.bottom .mid,
+.bottom .start {
+    transform: translateX(-50%);
+}
+
+.left .start,
+.left .mid,
+.left .end {
+    right: -17px;
+}
+
+.left .start {
+    top: 28px;
+}
+
+.left .end {
+    transform: rotate(90deg) translateX(50%);
+    bottom: 28px;
+}
+
+.left .mid {
+    top: 50%;
+}
+
+.left .start,
+.left .mid {
+    transform: rotate(90deg) translateX(-50%);
+}
+
+.right .start,
+.right .mid,
+.right .end {
+    left: -17px;
+}
+
+.right .start {
+    top: 28px;
+}
+
+.right .mid {
+    top: 50%;
+}
+
+.right .start,
+.right .mid {
+    transform: rotate(-90deg) translateX(50%);
+}
+
+.right .end {
+    bottom: 28px;
+    transform: rotate(-90deg) translateX(-50%);
+}
+.hidden {
+    visibility: hidden;
+    opacity: 0;
+    z-index: 0;
+    pointer-events: none;
+}
+
+.hidden .subContainer {
+    box-shadow: none;
+}
+
+[dir=ltr] .animationBasic {
+    animation-duration: var(--zd_transition2);
+}
+
+[dir=rtl] .animationBasic {
+    animation-duration: var(--zd_transition2);
+}
+
+.fadeIn {
+    composes: animationBasic;
+    composes: fadeInScale modeForward from '../../../common/animation.module.css';
+}
+
+.bounce {
+    composes: animationBasic;
+}
+
+[dir=ltr] .bounce {
+    animation-name: animation;
+    animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
+}
+
+[dir=rtl] .bounce {
+    animation-name: animation;
+    animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
+}
+
+.slideUp {
+    composes: modeForward from '../../../common/animation.module.css';
+}
+
+[dir=ltr] .slideUp {
+    animation-duration: var(--zd_transition3);
+    animation-name: slideUp;
+    animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1);
+}
+
+[dir=rtl] .slideUp {
+    animation-duration: var(--zd_transition3);
+    animation-name: slideUp;
+    animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1);
+}
+
+@keyframes animation {
+    0% {
+        transform: scaleY(0.6) perspective(1px);
+        opacity: 0;
+        transform-origin: top center;
+    }
+
+    100% {
+        transform-origin: top center;
+        opacity: 1;
+        transform: scaleY(1) perspective(1px);
+    }
+}
+
+@keyframes slideUp {
+    0% {
+        transform: translateY(90%) perspective(1px);
+    }
+
+    100% {
+        transform: translateY(0%) perspective(1px);
+    }
+}
+
+.responsive {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    max-height: 90%;
+}
+
+[dir=ltr] .responsive {
+    left: 0;
+}
+
+[dir=rtl] .responsive {
+    right: 0;
+}
+
+.closeBar {
+  /*  Variable:Ignore  */
+    height: 6px;
+    width: 20%;
+    border-radius: 5px;
+    background-color: var(--dropbox_mob_close_bg_color);
+    cursor: pointer;
+    margin: 0 auto 10px;
+}
+
+.boxPadding {
+    --dropbox_padding: 10px 0;
+}
+
+.darkPalette {
+    --dropbox_bg_color: var(--zdt_dropbox_dark_bg);
 }