Feat modal: Global styles

scss/components/_modal.scss

@@ -0,0 +1,60 @@
+/**
+ * Modal (<dialog>)
+ */
+
+dialog {
+  position: fixed;
+  width: inherit;
+  min-width: 100%;
+  height: inherit;
+  min-height: 100%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--modal-overlay-background-color);
+  padding: var(--spacing);
+  border: none;
+
+  article {
+    @if map-get($breakpoints, "sm") {
+      @media (min-width: map-get($breakpoints, "sm")) {
+        max-width: map-get($viewports, "sm");
+      }
+    }
+
+    @if map-get($breakpoints, "md") {
+      @media (min-width: map-get($breakpoints, "md")) {
+        max-width: map-get($viewports, "md");
+      }
+    }
+
+    > footer {
+      text-align: right;
+
+      [role="button"]:not(:first-of-type) {
+        margin-left: calc(var(--spacing) * 0.5);
+      }
+    }
+  }
+
+  &:not([open]) {
+    display: none;
+  }
+}
+
+.dialog-is-open {
+  pointer-events: none;
+  overflow: hidden;
+  
+  .container {
+    filter: blur(0.125rem);
+  }
+
+  dialog {
+    pointer-events: auto;
+  }
+}

scss/content/_miscs.scss

@@ -27,29 +27,6 @@ template {
   }
 }
 
-// Add the correct styles in Edge 18-, IE, and Safari
-dialog {
-  display: block;
-  position: absolute;
-  right: 0;
-  left: 0;
-  width: -moz-fit-content;
-  width: -webkit-fit-content;
-  width: fit-content;
-  height: -moz-fit-content;
-  height: -webkit-fit-content;
-  height: fit-content;
-  margin: auto;
-  padding: 1em;
-  border: solid;
-  background-color: white;
-  color: black;
-}
-
-dialog:not([open]) {
-  display: none;
-}
-
 // Add the correct display in IE 9-
 canvas {
   display: inline-block;

scss/pico.scss

@@ -31,6 +31,7 @@
 // Components
 @import "components/accordion"; // details, summary
 @import "components/card"; // article
+@import "components/modal"; // dialog
 @import "components/nav"; // nav
 @import "components/progress"; // progress
 

scss/themes/default/_dark.scss

@@ -110,6 +110,9 @@
     0 0 0 0.0625rem #{rgba($black, 0.036)};
   --card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
 
+  // Modal (<dialog>)
+  --modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.9)};
+
   // Progress
   --progress-background-color: #{mix($grey-900, $grey-800)};
   --progress-color: var(--primary);

scss/themes/default/_light.scss

@@ -110,6 +110,9 @@
     0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
   --card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
 
+  // Modal (<dialog>)
+  --modal-overlay-background-color: #{rgba($grey-900, 0.9)};
+
   // Progress
   --progress-background-color: #{$grey-100};
   --progress-color: var(--primary);

scss/themes/default/_styles.scss

@@ -120,6 +120,38 @@
       }
     }
   }
+
+  // Modal
+  dialog > article {
+    
+    @if map-get($breakpoints, "sm") {
+      @media (min-width: map-get($breakpoints, "sm")) {
+        --block-spacing-vertical: calc(var(--spacing) * 1.5);
+        --block-spacing-horizontal: calc(var(--spacing) * 1.5);
+      }
+    }
+
+    @if map-get($breakpoints, "md") {
+      @media (min-width: map-get($breakpoints, "md")) {
+        --block-spacing-vertical: calc(var(--spacing) * 2);
+        --block-spacing-horizontal: calc(var(--spacing) * 2);
+      }
+    }
+
+    @if map-get($breakpoints, "lg") {
+      @media (min-width: map-get($breakpoints, "lg")) {
+        --block-spacing-vertical: calc(var(--spacing) * 2.5);
+        --block-spacing-horizontal: calc(var(--spacing) * 2.5);
+      }
+    }
+
+    @if map-get($breakpoints, "xl") {
+      @media (min-width: map-get($breakpoints, "xl")) {
+        --block-spacing-vertical: calc(var(--spacing) * 3);
+        --block-spacing-horizontal: calc(var(--spacing) * 3);
+      }
+    }
+  }
 }
 
 // Link