trotl-modal 1.0.11 → 1.0.12

package/dist/dist/index.css

@@ -0,0 +1,2 @@
+:root{--overlay:rgba(0,0,0,.35);--overlay-strong:rgba(0,0,0,.6);--bg:#fff;--header-bg:#f5f5f5;--header-color:#000;--modal-z:60000}[data-theme=light]{--overlay:rgba(0,0,0,.35);--overlay-strong:rgba(0,0,0,.6);--bg:#fff;--header-bg:#f5f5f5;--header-color:#000}[data-theme=dark]{--overlay:rgba(0,0,0,.6);--overlay-strong:rgba(0,0,0,.85);--bg:#2c2c2c;--header-bg:#3a3a3a;--header-color:#f1f1f1}.app-root{margin:0 auto;max-width:900px}button{cursor:pointer}.modal-overlay{align-items:flex-start;display:flex;inset:0;justify-content:center;opacity:0;padding:40px;pointer-events:none;position:fixed;transition:opacity .2s ease;z-index:60000}.modal-overlay.visible{opacity:1;pointer-events:auto}.modal-overlay.drawer-overlay{background:var(--overlay-strong);padding:0}.modal{background:var(--bg);border-radius:2px;box-shadow:0 10px 30px rgba(0,0,0,.3);min-width:300px;opacity:0;overflow:hidden;position:absolute;transform:translateY(-20px) scale(.85) rotate(-4deg);transition:opacity .25s ease,transform .25s ease;z-index:60001}.modal.visible{opacity:1;transform:translateY(0) scale(1) rotate(0)}.drawer{background:var(--bg);border-radius:2px;box-shadow:0 10px 30px rgba(0,0,0,.3);max-height:100%;max-width:100%;min-width:300px;opacity:0;overflow:hidden;position:absolute;transform:translate(0);transition:opacity var(--drawer-transition,.45s) ease,transform var(--drawer-transition,.45s) ease;z-index:60001}.drawer.horizontal{height:100%}.drawer.vertical{width:100%}.drawer.horizontal.side-left{transform:translateX(-100%)}.drawer.horizontal.side-right{transform:translateX(100%)}.drawer.vertical.side-top{transform:translateY(-100%)}.drawer.vertical.side-bottom{transform:translateY(100%)}.drawer.visible{opacity:1}.drawer.visible.horizontal.side-left,.drawer.visible.horizontal.side-right{transform:translateX(0)}.drawer.visible.vertical.side-bottom,.drawer.visible.vertical.side-top{transform:translateY(0)}.modal-header{align-items:center;background:var(--header-bg);color:var(--header-color);cursor:grab;display:flex;justify-content:space-between;padding:10px 12px}.modal-title{font-weight:600}.modal-close{background:transparent;border:none;font-size:18px;padding:4px 8px}.modal-body{padding:12px}@media (max-width:480px){.modal{min-width:260px}}
+/*# sourceMappingURL=index.css.map */

package/dist/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.css"],"names":[],"mappings":"AACA,MAEE,yBAA2B,CAC3B,+BAAiC,CACjC,SAAa,CACb,mBAAoB,CACpB,mBAAoB,CACpB,eACF,CAGA,mBACE,yBAA2B,CAC3B,+BAAiC,CACjC,SAAa,CACb,mBAAoB,CACpB,mBACF,CAEA,kBACE,wBAA0B,CAC1B,gCAAkC,CAClC,YAAa,CACb,mBAAoB,CACpB,sBACF,CAEA,UAEE,aAAA,CADA,eAEF,CAEA,OACE,cACF,CAGA,eAKE,sBAAuB,CADvB,YAAa,CAFb,OAAQ,CAIR,sBAAuB,CAGvB,SAAU,CAFV,YAAa,CAMb,mBAAoB,CAZpB,cAAe,CASf,2BAA6B,CAF7B,aAMF,CAEA,uBACE,SAAU,CACV,mBACF,CAGA,8BAEE,gCAAiC,CADjC,SAEF,CAEA,OAGE,oBAAqB,CAErB,iBAAkB,CAClB,qCAA0C,CAF1C,eAAgB,CAMhB,SAAU,CAHV,eAAgB,CANhB,iBAAkB,CAUlB,oDAAsD,CACtD,gDAAoD,CAVpD,aAWF,CAEA,eACE,SAAU,CACV,0CACF,CAGA,QAGE,oBAAqB,CAErB,iBAAkB,CAClB,qCAA0C,CAG1C,eAAgB,CADhB,cAAe,CAJf,eAAgB,CAOhB,SAAU,CAJV,eAAgB,CANhB,iBAAkB,CAWlB,sBAAyB,CACzB,kGACgD,CAZhD,aAaF,CAGA,mBAAqB,WAAc,CACnC,iBAAmB,UAAa,CAGhC,6BAAgC,2BAA8B,CAC9D,8BAAgC,0BAA6B,CAC7D,0BAAgC,2BAA8B,CAC9D,6BAAgC,0BAA6B,CAE7D,gBACE,SACF,CAEA,2EAEE,uBACF,CAEA,uEAEE,uBACF,CAEA,cAEE,kBAAmB,CAGnB,2BAA4B,CAC5B,yBAA0B,CAC1B,WAAA,CANA,YAAa,CAEb,6BAA8B,CAC9B,iBAIF,CAEA,aACE,eACF,CAEA,aAEE,sBAAuB,CADvB,WAAY,CAEZ,cAAe,CACf,eACF,CAEA,YACE,YACF,CAEA,yBACE,OACE,eACF,CACF","file":"index.css","sourcesContent":["\r\n:root {\r\n  /* sensible defaults so modal isn't transparent when used standalone */\r\n  --overlay: rgba(0,0,0,0.35);\r\n  --overlay-strong: rgba(0,0,0,0.6);\r\n  --bg: #ffffff;\r\n  --header-bg: #f5f5f5;\r\n  --header-color: #000;\r\n  --modal-z: 60000;\r\n}\r\n\r\n/* theme overrides (use data-theme to scope) */\r\n[data-theme='light'] {\r\n  --overlay: rgba(0,0,0,0.35);\r\n  --overlay-strong: rgba(0,0,0,0.6);\r\n  --bg: #ffffff;\r\n  --header-bg: #f5f5f5;\r\n  --header-color: #000;\r\n}\r\n\r\n[data-theme='dark'] {\r\n  --overlay: rgba(0,0,0,0.6);\r\n  --overlay-strong: rgba(0,0,0,0.85);\r\n  --bg: #2c2c2c;\r\n  --header-bg: #3a3a3a;\r\n  --header-color: #f1f1f1;\r\n}\r\n\r\n.app-root {\r\n  max-width: 900px;\r\n  margin: 0 auto\r\n}\r\n\r\nbutton {\r\n  cursor: pointer\r\n}\r\n\r\n/* ensure modal overlay sits above other UI (other packages use very large z-index values) */\r\n.modal-overlay {\r\n  position: fixed;\r\n  inset: 0;\r\n  /* background: var(--overlay); */\r\n  display: flex;\r\n  align-items: flex-start;\r\n  justify-content: center;\r\n  padding: 40px;\r\n  z-index: 60000; /* raised from 999 */\r\n  opacity: 0;\r\n  transition: opacity 0.2s ease;\r\n\r\n  /* when invisible we don't want it blocking clicks */\r\n  pointer-events: none;\r\n}\r\n\r\n.modal-overlay.visible {\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n}\r\n\r\n/* drawer-specific overlay adjustments */\r\n.modal-overlay.drawer-overlay {\r\n  padding: 0; /* flush to edges for drawers */\r\n  background: var(--overlay-strong);\r\n}\r\n\r\n.modal {\r\n  position: absolute;\r\n  z-index: 60001; /* keep modal above the overlay's stacking context children */\r\n  background: var(--bg);\r\n  min-width: 300px;\r\n  border-radius: 2px;\r\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\r\n  overflow: hidden;\r\n\r\n  /* entry animation state */\r\n  opacity: 0;\r\n  transform: translateY(-20px) scale(0.85) rotate(-4deg);\r\n  transition: opacity 0.25s ease, transform 0.25s ease;\r\n}\r\n\r\n.modal.visible {\r\n  opacity: 1;\r\n  transform: translateY(0) scale(1) rotate(0);\r\n}\r\n\r\n/* drawer uses a simple slide animation and adapts to the chosen edge */\r\n.drawer {\r\n  position: absolute;\r\n  z-index: 60001;\r\n  background: var(--bg);\r\n  min-width: 300px;\r\n  border-radius: 2px;\r\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\r\n  overflow: hidden;\r\n  max-width: 100%;\r\n  max-height: 100%;\r\n\r\n  opacity: 0;\r\n  transform: translate(0,0);\r\n  transition: opacity var(--drawer-transition, 0.45s) ease,\r\n    transform var(--drawer-transition, 0.45s) ease;\r\n}\r\n\r\n/* full height when coming from left/right, full width for top/bottom */\r\n.drawer.horizontal { height: 100%; }\r\n.drawer.vertical { width: 100%; }\r\n\r\n/* offscreen start positions by 100% of its own size */\r\n.drawer.horizontal.side-left  { transform: translateX(-100%); }\r\n.drawer.horizontal.side-right { transform: translateX(100%); }\r\n.drawer.vertical.side-top     { transform: translateY(-100%); }\r\n.drawer.vertical.side-bottom  { transform: translateY(100%); }\r\n\r\n.drawer.visible {\r\n  opacity: 1;\r\n}\r\n\r\n.drawer.visible.horizontal.side-left,\r\n.drawer.visible.horizontal.side-right {\r\n  transform: translateX(0);\r\n}\r\n\r\n.drawer.visible.vertical.side-top,\r\n.drawer.visible.vertical.side-bottom {\r\n  transform: translateY(0);\r\n}\r\n\r\n.modal-header {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 10px 12px;\r\n  background: var(--header-bg);\r\n  color: var(--header-color);\r\n  cursor: grab\r\n}\r\n\r\n.modal-title {\r\n  font-weight: 600\r\n}\r\n\r\n.modal-close {\r\n  border: none;\r\n  background: transparent;\r\n  font-size: 18px;\r\n  padding: 4px 8px\r\n}\r\n\r\n.modal-body {\r\n  padding: 12px\r\n}\r\n\r\n@media (max-width:480px) {\r\n  .modal {\r\n    min-width: 260px\r\n  }\r\n}"]}

package/dist/index.css

@@ -1,2 +1,157 @@
-:root{--overlay:rgba(0,0,0,.35);--overlay-strong:rgba(0,0,0,.6);--bg:#fff;--header-bg:#f5f5f5;--header-color:#000;--modal-z:60000}[data-theme=light]{--overlay:rgba(0,0,0,.35);--overlay-strong:rgba(0,0,0,.6);--bg:#fff;--header-bg:#f5f5f5;--header-color:#000}[data-theme=dark]{--overlay:rgba(0,0,0,.6);--overlay-strong:rgba(0,0,0,.85);--bg:#2c2c2c;--header-bg:#3a3a3a;--header-color:#f1f1f1}.app-root{margin:0 auto;max-width:900px}button{cursor:pointer}.modal-overlay{align-items:flex-start;background:var(--overlay);display:flex;inset:0;justify-content:center;opacity:0;padding:40px;pointer-events:none;position:fixed;transition:opacity .2s ease;z-index:60000}.modal-overlay.visible{opacity:1;pointer-events:auto}.modal-overlay.drawer-overlay{background:var(--overlay-strong);padding:0}.modal{background:var(--bg);border-radius:2px;box-shadow:0 10px 30px rgba(0,0,0,.3);min-width:300px;opacity:0;overflow:hidden;position:absolute;transform:translateY(-20px) scale(.85) rotate(-4deg);transition:opacity .25s ease,transform .25s ease;z-index:60001}.modal.visible{opacity:1;transform:translateY(0) scale(1) rotate(0)}.drawer{background:var(--bg);border-radius:2px;box-shadow:0 10px 30px rgba(0,0,0,.3);max-height:100%;max-width:100%;min-width:300px;opacity:0;overflow:hidden;position:absolute;transform:translate(0);transition:opacity var(--drawer-transition,.45s) ease,transform var(--drawer-transition,.45s) ease;z-index:60001}.drawer.horizontal{height:100%}.drawer.vertical{width:100%}.drawer.horizontal.side-left{transform:translateX(-100%)}.drawer.horizontal.side-right{transform:translateX(100%)}.drawer.vertical.side-top{transform:translateY(-100%)}.drawer.vertical.side-bottom{transform:translateY(100%)}.drawer.visible{opacity:1}.drawer.visible.horizontal.side-left,.drawer.visible.horizontal.side-right{transform:translateX(0)}.drawer.visible.vertical.side-bottom,.drawer.visible.vertical.side-top{transform:translateY(0)}.modal-header{align-items:center;background:var(--header-bg);color:var(--header-color);cursor:grab;display:flex;justify-content:space-between;padding:10px 12px}.modal-title{font-weight:600}.modal-close{background:transparent;border:none;font-size:18px;padding:4px 8px}.modal-body{padding:12px}@media (max-width:480px){.modal{min-width:260px}}
-/*# sourceMappingURL=index.css.map */
+
+:root {
+  /* sensible defaults so modal isn't transparent when used standalone */
+  --overlay: rgba(0,0,0,0.35);
+  --overlay-strong: rgba(0,0,0,0.6);
+  --bg: #ffffff;
+  --header-bg: #f5f5f5;
+  --header-color: #000;
+  --modal-z: 60000;
+}
+
+/* theme overrides (use data-theme to scope) */
+[data-theme='light'] {
+  --overlay: rgba(0,0,0,0.35);
+  --overlay-strong: rgba(0,0,0,0.6);
+  --bg: #ffffff;
+  --header-bg: #f5f5f5;
+  --header-color: #000;
+}
+
+[data-theme='dark'] {
+  --overlay: rgba(0,0,0,0.6);
+  --overlay-strong: rgba(0,0,0,0.85);
+  --bg: #2c2c2c;
+  --header-bg: #3a3a3a;
+  --header-color: #f1f1f1;
+}
+
+.app-root {
+  max-width: 900px;
+  margin: 0 auto
+}
+
+button {
+  cursor: pointer
+}
+
+/* ensure modal overlay sits above other UI (other packages use very large z-index values) */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  /* background: var(--overlay); */
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 40px;
+  z-index: 60000; /* raised from 999 */
+  opacity: 0;
+  transition: opacity 0.2s ease;
+
+  /* when invisible we don't want it blocking clicks */
+  pointer-events: none;
+}
+
+.modal-overlay.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* drawer-specific overlay adjustments */
+.modal-overlay.drawer-overlay {
+  padding: 0; /* flush to edges for drawers */
+  background: var(--overlay-strong);
+}
+
+.modal {
+  position: absolute;
+  z-index: 60001; /* keep modal above the overlay's stacking context children */
+  background: var(--bg);
+  min-width: 300px;
+  border-radius: 2px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+
+  /* entry animation state */
+  opacity: 0;
+  transform: translateY(-20px) scale(0.85) rotate(-4deg);
+  transition: opacity 0.25s ease, transform 0.25s ease;
+}
+
+.modal.visible {
+  opacity: 1;
+  transform: translateY(0) scale(1) rotate(0);
+}
+
+/* drawer uses a simple slide animation and adapts to the chosen edge */
+.drawer {
+  position: absolute;
+  z-index: 60001;
+  background: var(--bg);
+  min-width: 300px;
+  border-radius: 2px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  max-width: 100%;
+  max-height: 100%;
+
+  opacity: 0;
+  transform: translate(0,0);
+  transition: opacity var(--drawer-transition, 0.45s) ease,
+    transform var(--drawer-transition, 0.45s) ease;
+}
+
+/* full height when coming from left/right, full width for top/bottom */
+.drawer.horizontal { height: 100%; }
+.drawer.vertical { width: 100%; }
+
+/* offscreen start positions by 100% of its own size */
+.drawer.horizontal.side-left  { transform: translateX(-100%); }
+.drawer.horizontal.side-right { transform: translateX(100%); }
+.drawer.vertical.side-top     { transform: translateY(-100%); }
+.drawer.vertical.side-bottom  { transform: translateY(100%); }
+
+.drawer.visible {
+  opacity: 1;
+}
+
+.drawer.visible.horizontal.side-left,
+.drawer.visible.horizontal.side-right {
+  transform: translateX(0);
+}
+
+.drawer.visible.vertical.side-top,
+.drawer.visible.vertical.side-bottom {
+  transform: translateY(0);
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  background: var(--header-bg);
+  color: var(--header-color);
+  cursor: grab
+}
+
+.modal-title {
+  font-weight: 600
+}
+
+.modal-close {
+  border: none;
+  background: transparent;
+  font-size: 18px;
+  padding: 4px 8px
+}
+
+.modal-body {
+  padding: 12px
+}
+
+@media (max-width:480px) {
+  .modal {
+    min-width: 260px
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trotl-modal",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "Modal UI",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",

package/dist/index.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["index.css"],"names":[],"mappings":"AACA,MAEE,yBAA2B,CAC3B,+BAAiC,CACjC,SAAa,CACb,mBAAoB,CACpB,mBAAoB,CACpB,eACF,CAGA,mBACE,yBAA2B,CAC3B,+BAAiC,CACjC,SAAa,CACb,mBAAoB,CACpB,mBACF,CAEA,kBACE,wBAA0B,CAC1B,gCAAkC,CAClC,YAAa,CACb,mBAAoB,CACpB,sBACF,CAEA,UAEE,aAAA,CADA,eAEF,CAEA,OACE,cACF,CAGA,eAKE,sBAAuB,CAFvB,yBAA0B,CAC1B,YAAa,CAFb,OAAQ,CAIR,sBAAuB,CAGvB,SAAU,CAFV,YAAa,CAMb,mBAAoB,CAZpB,cAAe,CASf,2BAA6B,CAF7B,aAMF,CAEA,uBACE,SAAU,CACV,mBACF,CAGA,8BAEE,gCAAiC,CADjC,SAEF,CAEA,OAGE,oBAAqB,CAErB,iBAAkB,CAClB,qCAA0C,CAF1C,eAAgB,CAMhB,SAAU,CAHV,eAAgB,CANhB,iBAAkB,CAUlB,oDAAsD,CACtD,gDAAoD,CAVpD,aAWF,CAEA,eACE,SAAU,CACV,0CACF,CAGA,QAGE,oBAAqB,CAErB,iBAAkB,CAClB,qCAA0C,CAG1C,eAAgB,CADhB,cAAe,CAJf,eAAgB,CAOhB,SAAU,CAJV,eAAgB,CANhB,iBAAkB,CAWlB,sBAAyB,CACzB,kGACgD,CAZhD,aAaF,CAGA,mBAAqB,WAAc,CACnC,iBAAmB,UAAa,CAGhC,6BAAgC,2BAA8B,CAC9D,8BAAgC,0BAA6B,CAC7D,0BAAgC,2BAA8B,CAC9D,6BAAgC,0BAA6B,CAE7D,gBACE,SACF,CAEA,2EAEE,uBACF,CAEA,uEAEE,uBACF,CAEA,cAEE,kBAAmB,CAGnB,2BAA4B,CAC5B,yBAA0B,CAC1B,WAAA,CANA,YAAa,CAEb,6BAA8B,CAC9B,iBAIF,CAEA,aACE,eACF,CAEA,aAEE,sBAAuB,CADvB,WAAY,CAEZ,cAAe,CACf,eACF,CAEA,YACE,YACF,CAEA,yBACE,OACE,eACF,CACF","file":"index.css","sourcesContent":["\r\n:root {\r\n  /* sensible defaults so modal isn't transparent when used standalone */\r\n  --overlay: rgba(0,0,0,0.35);\r\n  --overlay-strong: rgba(0,0,0,0.6);\r\n  --bg: #ffffff;\r\n  --header-bg: #f5f5f5;\r\n  --header-color: #000;\r\n  --modal-z: 60000;\r\n}\r\n\r\n/* theme overrides (use data-theme to scope) */\r\n[data-theme='light'] {\r\n  --overlay: rgba(0,0,0,0.35);\r\n  --overlay-strong: rgba(0,0,0,0.6);\r\n  --bg: #ffffff;\r\n  --header-bg: #f5f5f5;\r\n  --header-color: #000;\r\n}\r\n\r\n[data-theme='dark'] {\r\n  --overlay: rgba(0,0,0,0.6);\r\n  --overlay-strong: rgba(0,0,0,0.85);\r\n  --bg: #2c2c2c;\r\n  --header-bg: #3a3a3a;\r\n  --header-color: #f1f1f1;\r\n}\r\n\r\n.app-root {\r\n  max-width: 900px;\r\n  margin: 0 auto\r\n}\r\n\r\nbutton {\r\n  cursor: pointer\r\n}\r\n\r\n/* ensure modal overlay sits above other UI (other packages use very large z-index values) */\r\n.modal-overlay {\r\n  position: fixed;\r\n  inset: 0;\r\n  background: var(--overlay);\r\n  display: flex;\r\n  align-items: flex-start;\r\n  justify-content: center;\r\n  padding: 40px;\r\n  z-index: 60000; /* raised from 999 */\r\n  opacity: 0;\r\n  transition: opacity 0.2s ease;\r\n\r\n  /* when invisible we don't want it blocking clicks */\r\n  pointer-events: none;\r\n}\r\n\r\n.modal-overlay.visible {\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n}\r\n\r\n/* drawer-specific overlay adjustments */\r\n.modal-overlay.drawer-overlay {\r\n  padding: 0; /* flush to edges for drawers */\r\n  background: var(--overlay-strong);\r\n}\r\n\r\n.modal {\r\n  position: absolute;\r\n  z-index: 60001; /* keep modal above the overlay's stacking context children */\r\n  background: var(--bg);\r\n  min-width: 300px;\r\n  border-radius: 2px;\r\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\r\n  overflow: hidden;\r\n\r\n  /* entry animation state */\r\n  opacity: 0;\r\n  transform: translateY(-20px) scale(0.85) rotate(-4deg);\r\n  transition: opacity 0.25s ease, transform 0.25s ease;\r\n}\r\n\r\n.modal.visible {\r\n  opacity: 1;\r\n  transform: translateY(0) scale(1) rotate(0);\r\n}\r\n\r\n/* drawer uses a simple slide animation and adapts to the chosen edge */\r\n.drawer {\r\n  position: absolute;\r\n  z-index: 60001;\r\n  background: var(--bg);\r\n  min-width: 300px;\r\n  border-radius: 2px;\r\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\r\n  overflow: hidden;\r\n  max-width: 100%;\r\n  max-height: 100%;\r\n\r\n  opacity: 0;\r\n  transform: translate(0,0);\r\n  transition: opacity var(--drawer-transition, 0.45s) ease,\r\n    transform var(--drawer-transition, 0.45s) ease;\r\n}\r\n\r\n/* full height when coming from left/right, full width for top/bottom */\r\n.drawer.horizontal { height: 100%; }\r\n.drawer.vertical { width: 100%; }\r\n\r\n/* offscreen start positions by 100% of its own size */\r\n.drawer.horizontal.side-left  { transform: translateX(-100%); }\r\n.drawer.horizontal.side-right { transform: translateX(100%); }\r\n.drawer.vertical.side-top     { transform: translateY(-100%); }\r\n.drawer.vertical.side-bottom  { transform: translateY(100%); }\r\n\r\n.drawer.visible {\r\n  opacity: 1;\r\n}\r\n\r\n.drawer.visible.horizontal.side-left,\r\n.drawer.visible.horizontal.side-right {\r\n  transform: translateX(0);\r\n}\r\n\r\n.drawer.visible.vertical.side-top,\r\n.drawer.visible.vertical.side-bottom {\r\n  transform: translateY(0);\r\n}\r\n\r\n.modal-header {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 10px 12px;\r\n  background: var(--header-bg);\r\n  color: var(--header-color);\r\n  cursor: grab\r\n}\r\n\r\n.modal-title {\r\n  font-weight: 600\r\n}\r\n\r\n.modal-close {\r\n  border: none;\r\n  background: transparent;\r\n  font-size: 18px;\r\n  padding: 4px 8px\r\n}\r\n\r\n.modal-body {\r\n  padding: 12px\r\n}\r\n\r\n@media (max-width:480px) {\r\n  .modal {\r\n    min-width: 260px\r\n  }\r\n}"]}