BottomSheet: remove module css

2024-10-31 22:00:32 +08:00 · 2024-10-31 22:00:32 +08:00 · 187ebdba33
commit 187ebdba33
parent 0267bffe87
2 changed files with 18 additions and 18 deletions
--- a/src/material/BottomSheet.css
+++ b/src/material/BottomSheet.css
@ -0,0 +1,81 @@
+.BottomSheet {
+  border: none;
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  padding: 0;
+  width: 100%;
+  max-width: 560px;
+  border-radius: 2px;
+  overscroll-behavior: none;
+  max-height: 100vh;
+  max-height: 100dvh;
+  height: 95%;
+  contain: strict;
+  contain-intrinsic-size: auto 560px auto 95vh;
+
+
+  &::backdrop {
+    background: none;
+  }
+
+  box-shadow: var(--tutu-shadow-e16);
+
+  .MuiToolbar-root {
+    >.MuiButtonBase-root {
+
+      &:first-child {
+        margin-left: -0.5em;
+        margin-right: 24px;
+      }
+
+      &:last-child {
+        margin-right: -0.5em;
+        margin-left: 24px;
+      }
+
+    }
+  }
+
+  @media (max-width: 560px) {
+    & {
+      left: 0;
+      top: 0;
+      transform: none;
+      bottom: 0;
+      height: 100vh;
+      height: 100dvh;
+
+      contain-intrinsic-size: 100% 100vh;
+      contain-intrinsic-size: 100% 100dvh;
+    }
+  }
+
+  &.animated {
+    position: absolute;
+    overflow: hidden;
+    will-change: width, height, top, left;
+
+    & * {
+      overflow: hidden;
+    }
+  }
+
+  &.bottom {
+    top: unset;
+    transform: translateX(-50%);
+    bottom: 0;
+    content: content;
+    height: unset;
+    contain: content;
+    contain-intrinsic-size: unset;
+
+    @media (max-width: 560px) {
+      & {
+        transform: none;
+        height: unset;
+      }
+    }
+  }
+}