@speakapbv/dough-component-library 9.18.1 → 9.18.2

package/dist/index.es.js

@@ -1313,7 +1313,7 @@ var generateUID = function () {
 var css_248z$b = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-drop-area-wrapper {\n  position: fixed;\n  background-color: rgba(0, 0, 0, 0);\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n  overflow: hidden;\n  pointer-events: none;\n  opacity: 0;\n  transform-origin: center center;\n  font-family: \"Roboto\", sans-serif;\n}\nbody:not(.no-transition) .dough-drop-area-wrapper {\n  transition: opacity 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-drop-area-wrapper {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-drop-area-wrapper > .dough-drop-area-container {\n  pointer-events: fill;\n  max-height: calc(80vh - 16px);\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: absolute;\n  background-color: white;\n  background-color: var(--dough-color-theme);\n  box-sizing: border-box;\n  border-radius: 12px;\n  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1), 0px 1px 4px 0px rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow {\n  pointer-events: none;\n  position: absolute;\n  z-index: 50;\n  width: 32px !important;\n  height: 16px !important;\n  margin-top: -16px;\n  overflow: hidden;\n  min-width: initial !important;\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow:before {\n  content: \"\";\n  background-color: white;\n  background-color: var(--dough-color-theme);\n  position: absolute;\n  top: 8px;\n  left: 4px;\n  z-index: 10;\n  width: 16px;\n  height: 16px;\n  transform: translate3d(0, 0, 0) rotateZ(45deg);\n  box-shadow: 0 24px 10px 0 rgba(0, 0, 0, 0.07), 0 1px 4px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow.to-up {\n  margin-top: initial;\n  margin-bottom: -16px;\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow.to-up:before {\n  top: -8px;\n  box-shadow: 0 -24px 10px 0 rgba(0, 0, 0, 0.07), 0 1px 4px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow,\n.dough-drop-area-wrapper > .dough-drop-area-container {\n  transform: translate3d(0, -4px, 0);\n}\nbody:not(.no-transition) .dough-drop-area-wrapper > .dough-drop-area-arrow,\nbody:not(.no-transition) .dough-drop-area-wrapper > .dough-drop-area-container {\n  transition: transform 250ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-drop-area-wrapper > .dough-drop-area-arrow,\nbody.no-transition .dough-drop-area-wrapper > .dough-drop-area-container {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-drop-area-wrapper.visible {\n  opacity: 1;\n}\n.dough-drop-area-wrapper.visible > .dough-drop-area-arrow,\n.dough-drop-area-wrapper.visible > .dough-drop-area-container {\n  transform: translate3d(0, 0, 0) !important;\n}\n\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper.visible {\n  pointer-events: all;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper > .dough-drop-area-arrow {\n  display: none !important;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper > .dough-drop-area-container {\n  position: absolute;\n  top: initial !important;\n  bottom: 0 !important;\n  left: 0 !important;\n  z-index: 2;\n  width: 100% !important;\n  height: auto !important;\n  min-height: 1vh !important;\n  max-height: 85vh !important;\n  box-shadow: 0 -2px 20px 0 rgba(0, 0, 0, 0.1);\n  transform: translate3d(0, 20vh, 0);\n  border-radius: 0;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper.visible {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n\n@media only screen and (max-width: 576px) {\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper.visible {\n    pointer-events: all;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper > .dough-drop-area-arrow {\n    display: none !important;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper > .dough-drop-area-container {\n    position: absolute;\n    top: initial !important;\n    bottom: 0 !important;\n    left: 0 !important;\n    z-index: 2;\n    width: 100% !important;\n    height: auto !important;\n    min-height: 1vh !important;\n    max-height: 85vh !important;\n    box-shadow: 0 -2px 20px 0 rgba(0, 0, 0, 0.1);\n    transform: translate3d(0, 20vh, 0);\n    border-radius: 0;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper.visible {\n    background-color: rgba(0, 0, 0, 0.4);\n  }\n}";
 styleInject(css_248z$b);
 
-var TOP_MARGIN = 2;
+var TOP_MARGIN = 4;
 var TOUP = "to-up";
 var TODOWN = "to-down";
 var DropArea = function (props) {

package/dist/index.js

@@ -1299,7 +1299,7 @@ var generateUID = function () {
 var css_248z$b = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-drop-area-wrapper {\n  position: fixed;\n  background-color: rgba(0, 0, 0, 0);\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n  overflow: hidden;\n  pointer-events: none;\n  opacity: 0;\n  transform-origin: center center;\n  font-family: \"Roboto\", sans-serif;\n}\nbody:not(.no-transition) .dough-drop-area-wrapper {\n  transition: opacity 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-drop-area-wrapper {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-drop-area-wrapper > .dough-drop-area-container {\n  pointer-events: fill;\n  max-height: calc(80vh - 16px);\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: absolute;\n  background-color: white;\n  background-color: var(--dough-color-theme);\n  box-sizing: border-box;\n  border-radius: 12px;\n  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1), 0px 1px 4px 0px rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow {\n  pointer-events: none;\n  position: absolute;\n  z-index: 50;\n  width: 32px !important;\n  height: 16px !important;\n  margin-top: -16px;\n  overflow: hidden;\n  min-width: initial !important;\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow:before {\n  content: \"\";\n  background-color: white;\n  background-color: var(--dough-color-theme);\n  position: absolute;\n  top: 8px;\n  left: 4px;\n  z-index: 10;\n  width: 16px;\n  height: 16px;\n  transform: translate3d(0, 0, 0) rotateZ(45deg);\n  box-shadow: 0 24px 10px 0 rgba(0, 0, 0, 0.07), 0 1px 4px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow.to-up {\n  margin-top: initial;\n  margin-bottom: -16px;\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow.to-up:before {\n  top: -8px;\n  box-shadow: 0 -24px 10px 0 rgba(0, 0, 0, 0.07), 0 1px 4px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow,\n.dough-drop-area-wrapper > .dough-drop-area-container {\n  transform: translate3d(0, -4px, 0);\n}\nbody:not(.no-transition) .dough-drop-area-wrapper > .dough-drop-area-arrow,\nbody:not(.no-transition) .dough-drop-area-wrapper > .dough-drop-area-container {\n  transition: transform 250ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-drop-area-wrapper > .dough-drop-area-arrow,\nbody.no-transition .dough-drop-area-wrapper > .dough-drop-area-container {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-drop-area-wrapper.visible {\n  opacity: 1;\n}\n.dough-drop-area-wrapper.visible > .dough-drop-area-arrow,\n.dough-drop-area-wrapper.visible > .dough-drop-area-container {\n  transform: translate3d(0, 0, 0) !important;\n}\n\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper.visible {\n  pointer-events: all;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper > .dough-drop-area-arrow {\n  display: none !important;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper > .dough-drop-area-container {\n  position: absolute;\n  top: initial !important;\n  bottom: 0 !important;\n  left: 0 !important;\n  z-index: 2;\n  width: 100% !important;\n  height: auto !important;\n  min-height: 1vh !important;\n  max-height: 85vh !important;\n  box-shadow: 0 -2px 20px 0 rgba(0, 0, 0, 0.1);\n  transform: translate3d(0, 20vh, 0);\n  border-radius: 0;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper.visible {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n\n@media only screen and (max-width: 576px) {\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper.visible {\n    pointer-events: all;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper > .dough-drop-area-arrow {\n    display: none !important;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper > .dough-drop-area-container {\n    position: absolute;\n    top: initial !important;\n    bottom: 0 !important;\n    left: 0 !important;\n    z-index: 2;\n    width: 100% !important;\n    height: auto !important;\n    min-height: 1vh !important;\n    max-height: 85vh !important;\n    box-shadow: 0 -2px 20px 0 rgba(0, 0, 0, 0.1);\n    transform: translate3d(0, 20vh, 0);\n    border-radius: 0;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper.visible {\n    background-color: rgba(0, 0, 0, 0.4);\n  }\n}";
 styleInject(css_248z$b);
 
-var TOP_MARGIN = 2;
+var TOP_MARGIN = 4;
 var TOUP = "to-up";
 var TODOWN = "to-down";
 var DropArea = function (props) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@speakapbv/dough-component-library",
-    "version": "9.18.1",
+    "version": "9.18.2",
     "description": "DOUGH: Speakap React Component Library",
     "author": "Speakap",
     "license": "MIT",