build(modal): use modal with html5 dialog and css only

materializecss · Dec 16, 2024 · 6559f08 · 6559f08
1 parent cc2fde5
commit 6559f08
Showing 1 changed file with 53 additions and 48 deletions.
diff --git a/sass/components/_modal.scss b/sass/components/_modal.scss
@@ -1,90 +1,95 @@
+// custom backdrop blur
+dialog::backdrop {
+  backdrop-filter: blur(1px);
+}
+
+// use with dialog html element
 .modal {
-  --modal-footer-height: 56px;
   --modal-footer-divider-height: 1px;
   --modal-border-radius: 28px;
   --modal-padding: 24px;
-
-  &:focus {
-    outline: none;
-  }
+  --modal-padding-bottom: 16px;
 
   @extend .z-depth-5;
-
-  display: none;
-  position: fixed;
-  left: 0;
-  right: 0;
-  background-color: var(--md-sys-color-surface);
+  border: none;
+  outline: none;
   padding: 0;
   max-height: 70%;
   width: 55%;
-  margin: auto;
   overflow-y: auto;
-
   border-radius: var(--modal-border-radius);
   will-change: top, opacity;
 
+  // Dialog open
+  &[open] {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: min-content auto min-content;
+  }
+
+  // Background
+  background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%);
+
   @media #{$medium-and-down} {
     width: 80%;
   }
 
-  h1,h2,h3,h4 {
-    margin-top: 0;
+  .modal-header {
+    padding: var(--modal-padding);
+    padding-bottom: var(--modal-padding-bottom);
   }
-
   .modal-content {
+    padding: 0 var(--modal-padding);
+    overflow-y: auto;
+  }
+  .modal-footer {
+    border-radius: 0 0 var(--modal-border-radius) var(--modal-border-radius);
     padding: var(--modal-padding);
-    overflow-y: hidden;
+    text-align: right;
   }
 
   .modal-close {
     cursor: pointer;
   }
 
-  .modal-footer {
-    border-radius: 0 0 var(--modal-border-radius) var(--modal-border-radius);
-    background-color: var(--md-sys-color-surface);
-    padding: 4px 6px;
-    height: var(--modal-footer-height);
-    width: 100%;
-    text-align: right;
-
-    .btn, .btn-flat {
-      margin: 6px 0;
-    }
+  // todo: remove maybe
+  h1,h2,h3,h4 {
+    margin: 0;
   }
 }
 
-.modal-overlay {
-  position: fixed;
-  z-index: 999;
-  top: -25%;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  height: 125%;
-  width: 100%;
-  background: #000;
-  display: none;
-  will-change: opacity;
-}
+// backdrop
+// .modal-overlay {
+//   //position: fixed;
+//   //top: -25%;
+//   //left: 0;
+//   //bottom: 0;
+//   //right: 0;
+//   //height: 125%;
+//   //width: 100%;
+//   //display: none;
+//   z-index: 999;
+//   background: #000;
+//   will-change: opacity;
+// }
 
 // Modal with fixed action footer
 .modal.modal-fixed-footer {
   padding: 0;
-  height: 70%;
+  //max-height: 70%;
 
   .modal-content {
-    position: absolute;
-    height: calc(100% - var(--modal-footer-height));
-    max-height: 100%;
-    width: 100%;
+    //position: absolute;
+    //height: calc(100% - var(--modal-footer-height));
+    //max-height: 100%;
+    height: 100%;
+    //width: 100%;
     overflow-y: auto;
   }
 
   .modal-footer {
-    border-top: var(--modal-footer-divider-height) solid var(--md-sys-color-outline-variant);
-    position: absolute;
+    //border-top: var(--modal-footer-divider-height) solid var(--md-sys-color-outline-variant);
+    //position: absolute;
     bottom: var(--modal-footer-divider-height);
   }
 }