From 5bb734672847e2911c69655eeab67965b79e6388 Mon Sep 17 00:00:00 2001
From: Lucas Larroche <lucas@larroche.com>
Date: Mon, 8 Nov 2021 00:02:42 +0700
Subject: [PATCH] Style: Modal

---
 scss/components/_modal.scss      | 157 ++++++++++++++++++++++++-------
 scss/themes/default/_light.scss  |   2 +-
 scss/themes/default/_styles.scss |  25 ++---
 3 files changed, 133 insertions(+), 51 deletions(-)

diff --git a/scss/components/_modal.scss b/scss/components/_modal.scss
index 2f840cd2..c875b59a 100644
--- a/scss/components/_modal.scss
+++ b/scss/components/_modal.scss
@@ -4,6 +4,7 @@
 
 dialog {
   display: flex;
+  z-index: 999;
   position: fixed;
   top: 0;
   right: 0;
@@ -19,6 +20,7 @@ dialog {
   border: none;
   background-color: var(--modal-overlay-background-color);
 
+  // Content
   article {
     @if map-get($breakpoints, "sm") {
       @media (min-width: map-get($breakpoints, "sm")) {
@@ -32,54 +34,145 @@ dialog {
       }
     }
 
+    > header,
+    > footer {
+      padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal);
+    }
+
+    > header {
+      .close {
+        margin: 0;
+        margin-left: var(--spacing);
+        float: right;
+      }
+    }
+
     > footer {
       text-align: right;
 
-      [role="button"]:not(:first-of-type) {
-        margin-left: calc(var(--spacing) * 0.5);
+      [role="button"] {
+        margin-bottom: 0;
+        
+        &:not(:first-of-type) {
+          margin-left: calc(var(--spacing) * 0.5);
+        }
+      }
+    }
+
+    p {
+      &:last-of-type {
+        margin: 0;
+      }
+    }
+
+    // Close icon
+    .close {
+      display: block;
+      width: 1rem;
+      height: 1rem;
+      margin-top: calc(var(--block-spacing-vertical) * -0.5);
+      margin-bottom: var(--typography-spacing-vertical);
+      margin-left: auto;
+      background-image: var(--icon-close);
+      background-position: center;
+      background-size: auto 1rem;
+      background-repeat: no-repeat;
+      opacity: .5;
+  
+      @if $enable-transitions {
+        transition: opacity var(--transition);
+      }
+      
+      &:hover,
+      &:active,
+      &:focus {
+        opacity: 1;
       }
     }
   }
 
-  &:not([open]) {
+  // Closed state
+  &:not([open]),
+  &[open="false"]  {
     display: none;
   }
-
-  .close {
-    display: block;
-    width: 1rem;
-    height: 1rem;
-    margin-top: -0.5rem;
-    margin-right: -0.5rem;
-    margin-bottom: var(--typography-spacing-vertical);
-    margin-left: auto;
-    background-image: var(--icon-close);
-    background-position: center;
-    background-size: 1rem auto;
-    background-repeat: no-repeat;
-    opacity: .5;
-
-    @if $enable-transitions {
-      transition: opacity var(--transition);
-    }
-    
-    &:hover,
-    &:active,
-    &:focus {
-      opacity: 1;
-    }
-  }
 }
 
-.dialog-is-open {
+// Utilities
+.modal-is-open {
   overflow: hidden;
   pointer-events: none;
-  
-  .container {
-    filter: blur(0.125rem);
+
+  body > *:not(dialog) {
+    filter: blur(0.1875rem);
   }
 
   dialog {
     pointer-events: auto;
   }
+}
+
+// Animations
+@if $enable-transitions {
+  $animation-duration: .2s;
+  
+  .modal-is-opening,
+  .modal-is-closing {
+    
+    body > *:not(dialog),
+    dialog,
+    dialog > article {
+      animation-duration: $animation-duration;
+      animation-fill-mode: both;  
+    }
+
+    body > *:not(dialog) {
+      animation-name: blurIn;
+    }
+
+    dialog {
+      animation-name: fadeIn;
+  
+      > article {
+        animation-name: slideInDown;
+      }
+    }
+  }
+
+  .modal-is-closing {
+    body > *:not(dialog),
+    dialog,
+    dialog > article {
+      animation-direction: reverse;
+    }
+  }
+
+  @keyframes blurIn {
+    from {
+      filter: blur(0);
+    }
+    to {
+      filter: blur(0.1875rem);
+    }
+  }
+
+  @keyframes fadeIn {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--modal-overlay-background-color);
+    }
+  }
+  
+  @keyframes slideInDown {
+    from {
+      transform: translateY(-100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
 }
\ No newline at end of file
diff --git a/scss/themes/default/_light.scss b/scss/themes/default/_light.scss
index b9945371..4d2e2e1e 100644
--- a/scss/themes/default/_light.scss
+++ b/scss/themes/default/_light.scss
@@ -111,7 +111,7 @@
   --card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
 
   // Modal (<dialog>)
-  --modal-overlay-background-color: #{rgba($grey-900, 0.9)};
+  --modal-overlay-background-color: #{rgba($grey-100, 0.8)};
 
   // Progress
   --progress-background-color: #{$grey-100};
diff --git a/scss/themes/default/_styles.scss b/scss/themes/default/_styles.scss
index b800a70d..e10732d4 100644
--- a/scss/themes/default/_styles.scss
+++ b/scss/themes/default/_styles.scss
@@ -123,32 +123,21 @@
 
   // Modal
   dialog > article {
-    
+
+    --block-spacing-vertical: calc(var(--spacing) * 2);
+    --block-spacing-horizontal: var(--spacing);
+
     @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);
+        --block-spacing-vertical: calc(var(--spacing) * 2.5);
+        --block-spacing-horizontal: calc(var(--spacing) * 1.25);
       }
     }
 
     @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);
+        --block-spacing-horizontal: calc(var(--spacing) * 1.5);
       }
     }
   }