diff --git a/src/material/BottomSheet.module.css b/src/material/BottomSheet.module.css index 0b80c42..6eca0ca 100644 --- a/src/material/BottomSheet.module.css +++ b/src/material/BottomSheet.module.css @@ -18,16 +18,9 @@ contain: strict; contain-intrinsic-size: 100% 95%; - &::backdrop { - transition-property: background-color, opacity; - transition-duration: 120ms; - transition-timing-function: var(--tutu-anim-curve-std); - transition-behavior: allow-discrete; - } - &[open]::backdrop { - background-color: black; - opacity: 0.5; + &::backdrop { + background: none; } box-shadow: var(--tutu-shadow-e16); @@ -67,11 +60,6 @@ overflow: hidden; will-change: width, height, top, left; - &::backdrop { - opacity: 0; - background-color: transparent; - } - & * { overflow: hidden; } diff --git a/src/material/Menu.css b/src/material/Menu.css new file mode 100644 index 0000000..2be4bcf --- /dev/null +++ b/src/material/Menu.css @@ -0,0 +1,14 @@ +.Menu { + position: fixed; + border: 1px solid var(--tutu-color-surface-d); + border-radius: 2px; + padding: 0; + max-width: 560px; + width: max-content; + box-shadow: var(--tutu-shadow-e8); + contain: content; +} + +dialog.Menu::backdrop { + background: none; +} \ No newline at end of file diff --git a/src/material/Menu.tsx b/src/material/Menu.tsx index 6c08dad..9e23f62 100644 --- a/src/material/Menu.tsx +++ b/src/material/Menu.tsx @@ -7,6 +7,7 @@ import { type ParentComponent, } from "solid-js"; import { ANIM_CURVE_STD } from "./theme"; +import "./Menu.css"; type Props = { open?: boolean; @@ -156,17 +157,11 @@ const Menu: ParentComponent = (props) => { e.stopPropagation(); } }} + class="Menu" style={{ - position: "fixed", left: px(anchorPos().left), top: px(anchorPos().top), - border: "none", - "border-radius": "2px", - padding: 0, - "max-width": "560px", - width: "max-content", /* FIXME: the content may be overflow */ - "box-shadow": "var(--tutu-shadow-e8)", }} >