reshaped 4.3.0 → 4.3.1-canary.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
@property --rs-modal-drag{syntax:"<length>";initial-value:0;inherits:false}.root{--rs-modal-container-width:100vw;--rs-modal-container-height:100vh;--rs-modal-padding:calc(var(--rs-modal-p) * var(--rs-unit-x1));--rs-modal-env-top:env(safe-area-inset-top,0px);--rs-modal-env-bottom:env(safe-area-inset-bottom,0px);--rs-modal-env-start:env(safe-area-inset-left,0px);--rs-modal-env-end:env(safe-area-inset-right,0px);--rs-modal-offset:var(--rs-unit-x2);--rs-modal-inset-top:max(var(--rs-modal-offset),var(--rs-modal-env-top));--rs-modal-inset-bottom:max(var(--rs-modal-offset),var(--rs-modal-env-bottom));--rs-modal-inset-start:max(var(--rs-modal-offset),var(--rs-modal-env-start));--rs-modal-inset-end:max(var(--rs-modal-offset),var(--rs-modal-env-end));--rs-modal-far-offset:var(--rs-unit-x6);transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:transform,opacity;background:var(--rs-color-background-elevation-overlay);color:var(--rs-color-foreground-neutral);box-shadow:var(--rs-shadow-overlay);border:0 solid var(--rs-color-border-neutral-faded);padding-block:var(--rs-modal-padding) calc(var(--rs-modal-padding) + var(--rs-modal-env-bottom) * var(--rs-modal-safe));padding-inline:calc(var(--rs-modal-padding) + var(--rs-modal-env-start) * var(--rs-modal-safe)) calc(var(--rs-modal-padding) + var(--rs-modal-env-end) * var(--rs-modal-safe));will-change:transform,opacity;outline:none;overscroll-behavior:none}[data-rs-keyboard] .root:focus{outline:var(--rs-outline)}[dir=rtl] .root{--rs-modal-env-start:env(safe-area-inset-right,0px);--rs-modal-env-end:env(safe-area-inset-left,0px)}.root.--contained{--rs-modal-container-width:100%;--rs-modal-container-height:100%;--rs-modal-env-top:0px;--rs-modal-env-bottom:0px;--rs-modal-env-start:0px;--rs-modal-env-end:0px}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s);--rs-modal-p-s:0;--rs-modal-p-m:var(--rs-modal-p-s);--rs-modal-p-l:var(--rs-modal-p-m);--rs-modal-p-xl:var(--rs-modal-p-l);--rs-modal-p:var(--rs-modal-p-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-width:1px;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center.--active,[dir=rtl] .--position-center.--active{transform:translate(0);opacity:1}.--position-bottom{--rs-modal-size-s:auto;--rs-modal-safe:1;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-width:1px 0 0;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(var(--rs-modal-drag))}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-start) - max(var(--rs-modal-far-offset), var(--rs-modal-env-end)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:var(--rs-modal-inset-start) auto;transform:translate(calc(-100% - var(--rs-modal-inset-start)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start{transform:translate(calc(100% + var(--rs-modal-inset-start)))}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(var(--rs-modal-drag))}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-end) - max(var(--rs-modal-far-offset), var(--rs-modal-env-start)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:auto var(--rs-modal-inset-end);transform:translate(calc(100% + var(--rs-modal-inset-end)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end{transform:translate(calc(-100% - var(--rs-modal-inset-end)))}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(var(--rs-modal-drag))}.--position-full-screen{--rs-modal-size-s:100%;--rs-modal-safe:0;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-width:0;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{transform:translate(0);opacity:1}.edge{position:fixed;inset-inline:0;bottom:0;height:calc(var(--rs-unit-x1) * 12);background:var(--rs-color-background-elevation-overlay);pointer-events:none}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}.--dragging{transition:none}.--overflow-visible{overflow:visible}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m);--rs-modal-p:var(--rs-modal-p-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-width:1px;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{transform:translate(0);opacity:1}.--position-bottom--m{--rs-modal-size-s:auto;--rs-modal-safe:1;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-width:1px 0 0;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(var(--rs-modal-drag))}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-start) - max(var(--rs-modal-far-offset), var(--rs-modal-env-end)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:var(--rs-modal-inset-start) auto;transform:translate(calc(-100% - var(--rs-modal-inset-start)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--m{transform:translate(calc(100% + var(--rs-modal-inset-start)))}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(var(--rs-modal-drag))}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-end) - max(var(--rs-modal-far-offset), var(--rs-modal-env-start)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:auto var(--rs-modal-inset-end);transform:translate(calc(100% + var(--rs-modal-inset-end)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--m{transform:translate(calc(-100% - var(--rs-modal-inset-end)))}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(var(--rs-modal-drag))}.--position-full-screen--m{--rs-modal-size-s:100%;--rs-modal-safe:0;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-width:0;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{transform:translate(0);opacity:1}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l);--rs-modal-p:var(--rs-modal-p-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-width:1px;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{transform:translate(0);opacity:1}.--position-bottom--l{--rs-modal-size-s:auto;--rs-modal-safe:1;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-width:1px 0 0;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(var(--rs-modal-drag))}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-start) - max(var(--rs-modal-far-offset), var(--rs-modal-env-end)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:var(--rs-modal-inset-start) auto;transform:translate(calc(-100% - var(--rs-modal-inset-start)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--l{transform:translate(calc(100% + var(--rs-modal-inset-start)))}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(var(--rs-modal-drag))}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-end) - max(var(--rs-modal-far-offset), var(--rs-modal-env-start)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:auto var(--rs-modal-inset-end);transform:translate(calc(100% + var(--rs-modal-inset-end)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--l{transform:translate(calc(-100% - var(--rs-modal-inset-end)))}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(var(--rs-modal-drag))}.--position-full-screen--l{--rs-modal-size-s:100%;--rs-modal-safe:0;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-width:0;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{transform:translate(0);opacity:1}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl);--rs-modal-p:var(--rs-modal-p-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-width:1px;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{transform:translate(0);opacity:1}.--position-bottom--xl{--rs-modal-size-s:auto;--rs-modal-safe:1;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-width:1px 0 0;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(var(--rs-modal-drag))}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-start) - max(var(--rs-modal-far-offset), var(--rs-modal-env-end)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:var(--rs-modal-inset-start) auto;transform:translate(calc(-100% - var(--rs-modal-inset-start)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--xl{transform:translate(calc(100% + var(--rs-modal-inset-start)))}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(var(--rs-modal-drag))}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-end) - max(var(--rs-modal-far-offset), var(--rs-modal-env-start)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:auto var(--rs-modal-inset-end);transform:translate(calc(100% + var(--rs-modal-inset-end)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--xl{transform:translate(calc(-100% - var(--rs-modal-inset-end)))}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(var(--rs-modal-drag))}.--position-full-screen--xl{--rs-modal-size-s:100%;--rs-modal-safe:0;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-width:0;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{transform:translate(0);opacity:1}}
|
|
1
|
+
@property --rs-modal-drag{syntax:"<length>";initial-value:0;inherits:false}.root{--rs-modal-container-width:100vw;--rs-modal-container-height:100vh;--rs-modal-padding:calc(var(--rs-modal-p) * var(--rs-unit-x1));--rs-modal-env-top:env(safe-area-inset-top,0px);--rs-modal-env-bottom:env(safe-area-inset-bottom,0px);--rs-modal-env-start:env(safe-area-inset-left,0px);--rs-modal-env-end:env(safe-area-inset-right,0px);--rs-modal-offset:var(--rs-unit-x2);--rs-modal-inset-top:max(var(--rs-modal-offset),var(--rs-modal-env-top));--rs-modal-inset-bottom:max(var(--rs-modal-offset),var(--rs-modal-env-bottom));--rs-modal-inset-start:max(var(--rs-modal-offset),var(--rs-modal-env-start));--rs-modal-inset-end:max(var(--rs-modal-offset),var(--rs-modal-env-end));--rs-modal-far-offset:var(--rs-unit-x6);--rs-modal-floating-shadow:var(--rs-shadow-overlay);--rs-modal-full-screen-shadow:var(--rs-shadow-overlay);transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:transform,opacity;background:var(--rs-color-background-elevation-overlay);color:var(--rs-color-foreground-neutral);border:0 solid var(--rs-color-border-neutral-faded);padding-block:var(--rs-modal-padding) calc(var(--rs-modal-padding) + var(--rs-modal-env-bottom) * var(--rs-modal-safe));padding-inline:calc(var(--rs-modal-padding) + var(--rs-modal-env-start) * var(--rs-modal-safe)) calc(var(--rs-modal-padding) + var(--rs-modal-env-end) * var(--rs-modal-safe));will-change:transform,opacity;outline:none;overscroll-behavior:none}[data-rs-keyboard] .root:focus{outline:var(--rs-outline)}[dir=rtl] .root{--rs-modal-env-start:env(safe-area-inset-right,0px);--rs-modal-env-end:env(safe-area-inset-left,0px)}@supports (-webkit-touch-callout:none){.root:not(.--contained){--rs-modal-floating-shadow:none;--rs-modal-full-screen-shadow:0 0 0 50lvh var(--rs-color-background-elevation-overlay)}}.root.--contained{--rs-modal-container-width:100%;--rs-modal-container-height:100%;--rs-modal-env-top:0px;--rs-modal-env-bottom:0px;--rs-modal-env-start:0px;--rs-modal-env-end:0px}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s);--rs-modal-p-s:0;--rs-modal-p-m:var(--rs-modal-p-s);--rs-modal-p-l:var(--rs-modal-p-m);--rs-modal-p-xl:var(--rs-modal-p-l);--rs-modal-p:var(--rs-modal-p-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;box-shadow:var(--rs-shadow-overlay);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-width:1px;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center.--active,[dir=rtl] .--position-center.--active{transform:translate(0);opacity:1}.--position-bottom{--rs-modal-size-s:auto;--rs-modal-safe:1;box-shadow:var(--rs-shadow-overlay);width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-width:1px 0 0;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(var(--rs-modal-drag))}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;box-shadow:var(--rs-modal-floating-shadow);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-start) - max(var(--rs-modal-far-offset), var(--rs-modal-env-end)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:var(--rs-modal-inset-start) auto;transform:translate(calc(-100% - var(--rs-modal-inset-start)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start{transform:translate(calc(100% + var(--rs-modal-inset-start)))}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(var(--rs-modal-drag))}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;box-shadow:var(--rs-modal-floating-shadow);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-end) - max(var(--rs-modal-far-offset), var(--rs-modal-env-start)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:auto var(--rs-modal-inset-end);transform:translate(calc(100% + var(--rs-modal-inset-end)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end{transform:translate(calc(-100% - var(--rs-modal-inset-end)))}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(var(--rs-modal-drag))}.--position-full-screen{--rs-modal-size-s:100%;--rs-modal-safe:0;box-shadow:var(--rs-modal-full-screen-shadow);width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-width:0;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{transform:translate(0);opacity:1}.edge{position:fixed;inset-inline:0;bottom:0;height:calc(var(--rs-unit-x1) * 12);background:var(--rs-color-background-elevation-overlay);pointer-events:none}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}.--dragging{transition:none}.--overflow-visible{overflow:visible}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m);--rs-modal-p:var(--rs-modal-p-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;box-shadow:var(--rs-shadow-overlay);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-width:1px;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{transform:translate(0);opacity:1}.--position-bottom--m{--rs-modal-size-s:auto;--rs-modal-safe:1;box-shadow:var(--rs-shadow-overlay);width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-width:1px 0 0;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(var(--rs-modal-drag))}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;box-shadow:var(--rs-modal-floating-shadow);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-start) - max(var(--rs-modal-far-offset), var(--rs-modal-env-end)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:var(--rs-modal-inset-start) auto;transform:translate(calc(-100% - var(--rs-modal-inset-start)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--m{transform:translate(calc(100% + var(--rs-modal-inset-start)))}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(var(--rs-modal-drag))}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;box-shadow:var(--rs-modal-floating-shadow);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-end) - max(var(--rs-modal-far-offset), var(--rs-modal-env-start)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:auto var(--rs-modal-inset-end);transform:translate(calc(100% + var(--rs-modal-inset-end)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--m{transform:translate(calc(-100% - var(--rs-modal-inset-end)))}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(var(--rs-modal-drag))}.--position-full-screen--m{--rs-modal-size-s:100%;--rs-modal-safe:0;box-shadow:var(--rs-modal-full-screen-shadow);width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-width:0;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{transform:translate(0);opacity:1}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l);--rs-modal-p:var(--rs-modal-p-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;box-shadow:var(--rs-shadow-overlay);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-width:1px;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{transform:translate(0);opacity:1}.--position-bottom--l{--rs-modal-size-s:auto;--rs-modal-safe:1;box-shadow:var(--rs-shadow-overlay);width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-width:1px 0 0;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(var(--rs-modal-drag))}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;box-shadow:var(--rs-modal-floating-shadow);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-start) - max(var(--rs-modal-far-offset), var(--rs-modal-env-end)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:var(--rs-modal-inset-start) auto;transform:translate(calc(-100% - var(--rs-modal-inset-start)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--l{transform:translate(calc(100% + var(--rs-modal-inset-start)))}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(var(--rs-modal-drag))}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;box-shadow:var(--rs-modal-floating-shadow);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-end) - max(var(--rs-modal-far-offset), var(--rs-modal-env-start)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:auto var(--rs-modal-inset-end);transform:translate(calc(100% + var(--rs-modal-inset-end)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--l{transform:translate(calc(-100% - var(--rs-modal-inset-end)))}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(var(--rs-modal-drag))}.--position-full-screen--l{--rs-modal-size-s:100%;--rs-modal-safe:0;box-shadow:var(--rs-modal-full-screen-shadow);width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-width:0;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{transform:translate(0);opacity:1}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl);--rs-modal-p:var(--rs-modal-p-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;box-shadow:var(--rs-shadow-overlay);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-width:1px;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{transform:translate(0);opacity:1}.--position-bottom--xl{--rs-modal-size-s:auto;--rs-modal-safe:1;box-shadow:var(--rs-shadow-overlay);width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-width:1px 0 0;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(var(--rs-modal-drag))}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;box-shadow:var(--rs-modal-floating-shadow);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-start) - max(var(--rs-modal-far-offset), var(--rs-modal-env-end)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:var(--rs-modal-inset-start) auto;transform:translate(calc(-100% - var(--rs-modal-inset-start)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--xl{transform:translate(calc(100% + var(--rs-modal-inset-start)))}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(var(--rs-modal-drag))}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;box-shadow:var(--rs-modal-floating-shadow);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-end) - max(var(--rs-modal-far-offset), var(--rs-modal-env-start)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:auto var(--rs-modal-inset-end);transform:translate(calc(100% + var(--rs-modal-inset-end)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--xl{transform:translate(calc(-100% - var(--rs-modal-inset-end)))}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(var(--rs-modal-drag))}.--position-full-screen--xl{--rs-modal-size-s:100%;--rs-modal-safe:0;box-shadow:var(--rs-modal-full-screen-shadow);width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-width:0;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{transform:translate(0);opacity:1}}
|
|
@@ -35,6 +35,7 @@ const Overlay = (props) => {
|
|
|
35
35
|
const isDismissible = useIsDismissible({ active, contentRef });
|
|
36
36
|
const shouldBeContained = containerRef && contained !== false;
|
|
37
37
|
const rootClassNames = classNames(s.root, visible && s["--visible"], transparent && s["--click-through"], blurred && s["--blurred"], animated && s["--animated"], shouldBeContained && s["--contained"], overflow === "auto" && s["--overflow-auto"], className);
|
|
38
|
+
const backdropClassNames = classNames(s.backdrop, visible && s["--visible"], transparent && s["--click-through"], animated && s["--animated"], shouldBeContained && s["--contained"]);
|
|
38
39
|
const isInsideContent = (el) => {
|
|
39
40
|
// Clicked on another portal rendered above the overlay so it's considered as a part of the modal
|
|
40
41
|
if (!scopeRef.current?.contains(el))
|
|
@@ -115,6 +116,26 @@ const Overlay = (props) => {
|
|
|
115
116
|
});
|
|
116
117
|
return () => trapFocus.release();
|
|
117
118
|
}, [rendered, containerRef]);
|
|
119
|
+
/**
|
|
120
|
+
* iOS Safari tints its toolbars with the color of the fixed elements attached to the screen edges,
|
|
121
|
+
* so the backdrop is positioned absolutely there and is aligned with the viewport manually.
|
|
122
|
+
* Its top margin is kept as the offset from the viewport edge to let it bleed under the browser toolbars.
|
|
123
|
+
* Page scroll is locked with overflow only on iOS, so the scroll position stays the same while it's rendered
|
|
124
|
+
*/
|
|
125
|
+
useIsomorphicLayoutEffect(() => {
|
|
126
|
+
// Backdrop is only in the dom once the overlay is rendered and mounted
|
|
127
|
+
const backdropEl = backdropRef.current;
|
|
128
|
+
if (!backdropEl || shouldBeContained)
|
|
129
|
+
return;
|
|
130
|
+
const style = window.getComputedStyle(backdropEl);
|
|
131
|
+
if (style.position !== "absolute")
|
|
132
|
+
return;
|
|
133
|
+
backdropEl.style.setProperty("top", "0px");
|
|
134
|
+
backdropEl.style.setProperty("left", "0px");
|
|
135
|
+
const rect = backdropEl.getBoundingClientRect();
|
|
136
|
+
backdropEl.style.setProperty("top", `${Number.parseFloat(style.marginTop) - rect.top}px`);
|
|
137
|
+
backdropEl.style.setProperty("left", `${-rect.left}px`);
|
|
138
|
+
}, [rendered, mounted, shouldBeContained]);
|
|
118
139
|
// Unlock scroll on unmount
|
|
119
140
|
React.useEffect(() => {
|
|
120
141
|
return () => unlockScroll();
|
|
@@ -127,20 +148,21 @@ const Overlay = (props) => {
|
|
|
127
148
|
if (transparent)
|
|
128
149
|
return;
|
|
129
150
|
// Applied directly to the backdrop element to keep the style recalculation scoped to it
|
|
130
|
-
backdropRef.current?.style.setProperty("opacity", `${value}`);
|
|
151
|
+
backdropRef.current?.style.setProperty("--rs-overlay-backdrop-opacity", `${value}`);
|
|
131
152
|
},
|
|
132
153
|
}), [transparent]);
|
|
133
154
|
if (!rendered || !mounted)
|
|
134
155
|
return null;
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
156
|
+
const offsetStyle = {
|
|
157
|
+
"--rs-overlay-offset-x": containerRef ? `${offset[0]}px` : undefined,
|
|
158
|
+
"--rs-overlay-offset-y": containerRef ? `${offset[1]}px` : undefined,
|
|
159
|
+
};
|
|
160
|
+
return (_jsxs(Portal, { targetRef: containerRef, children: [_jsx("div", { className: backdropClassNames, style: offsetStyle, ref: backdropRef, "aria-hidden": "true" }), _jsx(Portal.Scope, { scopeRef: scopeRef, children: (ref) => (_jsx("div", { ...attributes, ref: (node) => {
|
|
161
|
+
rootRef.current = node;
|
|
162
|
+
ref.current = node;
|
|
163
|
+
}, style: offsetStyle,
|
|
164
|
+
// Clicking the backdrop is a pointer shortcut, keyboard users close it with Escape
|
|
165
|
+
role: "presentation", tabIndex: -1, className: rootClassNames, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onTransitionEnd: handleTransitionEnd, children: _jsx("div", { className: s.wrapper, children: _jsx("div", { className: s.inner, children: _jsx("div", { className: s.content, ref: contentRef, children: typeof children === "function" ? children({ active: visible }) : children }) }) }) })) })] }));
|
|
144
166
|
};
|
|
145
167
|
Overlay.displayName = "Overlay";
|
|
146
168
|
export default Overlay;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{--rs-overlay-offset-y:0px;--rs-overlay-offset-x:0px;position:fixed;overflow-x:clip;-webkit-overflow-scrolling:touch;left:var(--rs-overlay-offset-x);top:var(--rs-overlay-offset-y);z-index:var(--rs-z-index-fixed);color:var(--rs-color-white);opacity:0;outline:none;isolation:isolate}.root,.wrapper{height:100%;width:100%}.wrapper{display:table;position:relative}.backdrop{position:
|
|
1
|
+
.root{--rs-overlay-offset-y:0px;--rs-overlay-offset-x:0px;position:fixed;overflow-x:clip;-webkit-overflow-scrolling:touch;left:var(--rs-overlay-offset-x);top:var(--rs-overlay-offset-y);z-index:var(--rs-z-index-fixed);color:var(--rs-color-white);opacity:0;outline:none;isolation:isolate}.root,.wrapper{height:100%;width:100%}.wrapper{display:table;position:relative}.backdrop{--rs-overlay-backdrop-opacity:1;position:fixed;inset:0;z-index:var(--rs-z-index-fixed);background-color:rgb(from var(--rs-color-black) r g b/70%);opacity:0;will-change:opacity;pointer-events:none}@supports (-webkit-touch-callout:none){.backdrop:not(.--contained){--rs-overlay-backdrop-bleed:50lvh;position:absolute;inset:0 auto auto 0;width:100vw;height:calc(100dvh + var(--rs-overlay-backdrop-bleed) * 2);margin-top:calc(var(--rs-overlay-backdrop-bleed) * -1)}}.inner{display:table-cell;text-align:center}.content,.inner{vertical-align:middle}.content{display:inline-block;text-align:initial}.root.--visible{opacity:1}.backdrop.--visible{opacity:var(--rs-overlay-backdrop-opacity)}.root.--click-through{color:inherit;pointer-events:none}.backdrop.--click-through{opacity:0}.root.--blurred{backdrop-filter:blur(3px);left:calc(var(--rs-overlay-offset-x) - 1px);top:calc(var(--rs-overlay-offset-y) - 1px);width:calc(100% + 2px);height:calc(100% + 2px)}.root.--click-through .content,.root.--click-through>:not(.wrapper){pointer-events:all}.root.--contained{position:absolute}.backdrop.--contained{position:absolute;inset:var(--rs-overlay-offset-y) auto auto var(--rs-overlay-offset-x);width:100%;height:100%}.backdrop.--animated,.root.--animated{transition:opacity var(--rs-duration-medium) var(--rs-easing-accelerate)}.backdrop.--animated.--visible,.root.--animated.--visible{transition-timing-function:var(--rs-easing-decelerate)}.root.--overflow-auto{overflow:auto;overscroll-behavior:none}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "reshaped",
|
|
3
|
-
"version": "4.3.0",
|
|
3
|
+
"version": "4.3.1-canary.0",
|
|
4
4
|
"description": "Professionally crafted design system in React and Figma for building products of any scale and complexity",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"accessibility",
|
|
@@ -81,8 +81,8 @@
|
|
|
81
81
|
"cssnano": "8.0.2",
|
|
82
82
|
"csstype": "3.2.3",
|
|
83
83
|
"postcss-custom-media": "12.0.1",
|
|
84
|
-
"@reshaped/
|
|
85
|
-
"@reshaped/
|
|
84
|
+
"@reshaped/theming": "4.3.1-canary.0",
|
|
85
|
+
"@reshaped/utilities": "4.3.1-canary.0"
|
|
86
86
|
},
|
|
87
87
|
"peerDependencies": {
|
|
88
88
|
"postcss": "^8",
|