@zohodesk/components 1.0.0-temp-116 → 1.0.0-temp-117

package/lib/DropBox/DropBox.module.css

@@ -3,7 +3,7 @@
   --dropbox_bg_color: var(--zdt_dropbox_default_bg);
   --dropbox_border_radius: 0;
   --dropbox_padding: 0;
-  --dropbox_box_shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
+  --dropbox_box_shadow: var(--bs_dropbox_bottom);
 
   /* dropbox arrow default variables */
   --dropbox_arrow_box_shadow_color: var(--zdt_dropbox_arrow_shadow);
@@ -12,263 +12,323 @@
   --dropbox_mob_bg_color: var(--zdt_dropbox_mob_bg);
   --dropbox_mob_close_bg_color: var(--zdt_dropbox_mob_close_bg);
 }
+
 .main {
   z-index: 3;
   composes: varClass;
 }
+
 .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);
   max-width: var(--zd_size364);
 }
+
 .default {
   width: 100%;
 }
+
 /* shadow */
 .top_shadow {
-  --dropbox_box_shadow: 0 -3px 30px var(--zdt_dropbox_default_box_shadow);
+  --dropbox_box_shadow: var(--bs_dropbox_top);
 }
+
 .left_shadow {
-  --dropbox_box_shadow: -4px 0 30px var(--zdt_dropbox_default_box_shadow);
+  --dropbox_box_shadow: var(--bs_dropbox_left);
 }
+
 .right_shadow {
-  --dropbox_box_shadow: 4px 0 30px var(--zdt_dropbox_default_box_shadow);
+  --dropbox_box_shadow: var(--bs_dropbox_right);
 }
+
 .bottom_shadow {
-  --dropbox_box_shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
+  --dropbox_box_shadow: var(--bs_dropbox_bottom);
 }
-[dir=ltr] .defaultShadow {
-  box-shadow: 4px 3px 30px var(--zdt_dropbox_default_box_shadow);
-}
-[dir=rtl] .defaultShadow {
-  box-shadow: -4px 3px 30px var(--zdt_dropbox_default_box_shadow);
+
+.defaultShadow {
+  box-shadow: var(--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)
-  );
+  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);
+  box-shadow: var(--bs_dropbox_arrow);
   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%);
@@ -279,38 +339,48 @@
   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;
@@ -323,16 +393,19 @@
     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);
   }
@@ -361,46 +434,56 @@
   cursor: pointer;
   margin: 0 auto var(--zd_size10);
 }
+
 .boxPadding {
   --dropbox_padding: var(--zd_size10) 0;
 }
+
 .darkPalette {
   --dropbox_bg_color: var(--zdt_dropbox_dark_bg);
 }
+
 .activateInDelay {
   composes: modeForward from '../common/animation.module.css';
   pointer-events: none;
 }
+
 [dir=ltr] .activateInDelay {
   animation-duration: var(--zd_transition1);
   animation-delay: var(--zd_transition2);
   animation-name: activateInDelay;
 }
+
 [dir=rtl] .activateInDelay {
   animation-duration: var(--zd_transition1);
   animation-delay: var(--zd_transition2);
   animation-name: activateInDelay;
 }
+
 .freezeLayer {
   position: absolute;
   top: 0;
   bottom: 0;
   composes: activateInDelay;
 }
+
 [dir=ltr] .freezeLayer {
   left: 0;
   right: 0;
 }
+
 [dir=rtl] .freezeLayer {
   right: 0;
   left: 0;
 }
+
 .freeze {
   composes: varClass;
   background: var(--dropbox_mob_bg_color);
 }
+
 @keyframes activateInDelay {
   100% {
     pointer-events: initial;
   }
-}
+}