feat: Add modals (#26)

cozy · Jun 18, 2021 · 4622f79 · 4622f79
1 parent 72c974b
commit 4622f79
Show file tree

Hide file tree

Showing 10 changed files with 117 additions and 2 deletions.
diff --git a/backstop.json b/backstop.json
@@ -28,6 +28,11 @@
       "url": "http://localhost:3000/forms",
       "delay": 200
     },
+    {
+      "label": "Modals",
+      "url": "http://localhost:3000/modals",
+      "delay": 200
+    },
     {
       "label": "Login",
       "url": "http://localhost:3000/login",

diff --git a/docs/icons/auth.svg b/docs/icons/auth.svg
diff --git a/docs/icons/cross.svg b/docs/icons/cross.svg
diff --git a/docs/icons/icons.css b/docs/icons/icons.css
@@ -2,10 +2,18 @@
   -webkit-mask-image: url(alert.svg);
   mask-image: url(alert.svg);
 }
+.icon-auth {
+  -webkit-mask-image: url(auth.svg);
+  mask-image: url(auth.svg);
+}
 .icon-back {
   -webkit-mask-image: url(back.svg);
   mask-image: url(back.svg);
 }
+.icon-cross {
+  -webkit-mask-image: url(cross.svg);
+  mask-image: url(cross.svg);
+}
 .icon-answer {
   -webkit-mask: url(answer.svg) space no-repeat bottom;
   mask: url(answer.svg) space no-repeat bottom;

diff --git a/docs/index.html b/docs/index.html
@@ -55,10 +55,11 @@ <h2>Pages</h2>
         <li><a href="buttons.html">Buttons</a></li>
         <li><a href="cards.html">Cards</a></li>
         <li><a href="forms.html">Forms</a></li>
+        <li><a href="modals.html">Modals</a></li>
         <li><a href="login.html">Login (stack)</a></li>
         <li><a href="error-app.html">Unavailable application (stack)</a></li>
-        <li><a href="wrapper.html">Wrapper</a></li>
         <li><a href="typography.html">Typography</a></li>
+        <li><a href="wrapper.html">Wrapper</a></li>
       </ul>
     </main>
   </body>

diff --git a/docs/modals.html b/docs/modals.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Cozy Bootstrap</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="fonts/fonts.css" />
+    <link rel="stylesheet" href="cozy-bs.css" />
+    <link rel="stylesheet" href="icons/icons.css" />
+    <link rel="stylesheet" href="themes/dark.css" />
+    <script src="themes/loader.js"></script>
+  </head>
+  <body class="bg-paper modal-open">
+    <!-- https://zpl.io/aMEPPJR -->
+    <div class="modal d-block theme-inverted" tabindex="-1" aria-modal="true" role="dialog">
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-icon">
+            <span class="icon icon-auth"></span>
+          </div>
+          <div class="modal-body mt-md-1 p-md-5">
+            <h1 class="modal-title h4 h3-md text-center mb-0">Authentication</h1>
+            <p class="small text-center text-muted mb-4">
+              Please type your password to install the application
+            </p>
+            <div class="form-floating w-100 mb-4">
+              <input
+                type="password"
+                class="form-control form-control-md-lg"
+                id="passwordInput"
+                autofocus
+                autocomplete="current-password"
+              />
+              <label for="passwordInput">Password</label>
+            </div>
+            <button class="btn btn-primary w-100" type="button">Unlock</button>
+          </div>
+          <a href="." class="btn btn-icon position-absolute top-0 end-0" aria-label="Close">
+            <span class="icon icon-cross"></span>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="modal-backdrop fade show"></div>
+  </body>
+</html>
diff --git a/screenshots/reference/docs_Modals_0_document_0_reference.png b/screenshots/reference/docs_Modals_0_document_0_reference.png
diff --git a/src/cozy-bs.scss b/src/cozy-bs.scss
@@ -54,7 +54,12 @@
 // @import "bootstrap/scss/list-group";
 // @import "bootstrap/scss/close";
 // @import "bootstrap/scss/toasts";
-// @import "bootstrap/scss/modal";
+
+// XXX we want shadows only for modals, not for buttons and other components
+$enable-shadows: true;
+@import "bootstrap/scss/modal";
+$enable-shadows: false;
+
 // @import "bootstrap/scss/tooltip";
 // @import "bootstrap/scss/popover";
 // @import "bootstrap/scss/carousel";

diff --git a/src/cozy/_custom.scss b/src/cozy/_custom.scss
@@ -14,6 +14,23 @@
   background-color: var(--dividerColor);
 }
 
+.modal-icon {
+  top: 0;
+  width: 4.8rem;
+  height: 4.8rem;
+  padding: .75rem;
+  margin: -2.4rem auto -1.9rem;
+  background: var(--primaryColor);
+  border-radius: 50%;
+  box-shadow: 0 .25rem .75rem 0 rgba(0, 0, 0, .08);
+}
+
+.modal-icon .icon {
+  width: 3.3rem;
+  height: 3.3rem;
+  background: var(--paperBackgroundColor);
+}
+
 // https://twitter.com/chriscoyier/status/1124064712067624960
 .icon {
   display: inline-block;

diff --git a/src/cozy/_variables.scss b/src/cozy/_variables.scss
@@ -78,6 +78,24 @@ $card-border-radius: .5rem;
 // Alerts
 $alert-border-width: 0;
 
+// Modals
+$modal-content-color: var(--primaryColor);
+$modal-content-bg: var(--paperBackgroundColor);
+$modal-content-border-color:        rgba(29, 33, 42, .1);
+$modal-content-border-width: 1px;
+$modal-content-border-radius: .5rem;
+$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
+$modal-content-box-shadow-xs: 0 .5rem 1rem rgba(29, 33, 42, .15);
+$modal-content-box-shadow-sm-up: $modal-content-box-shadow-xs;
+
+$modal-backdrop-bg: rgb(29, 33, 42); // grey-900
+$modal-backdrop-opacity:            .5;
+
+$modal-sm: 26rem;
+$modal-md: 34rem;
+$modal-lg: 42rem;
+$modal-xl: 58rem;
+
 // Utility
 $spacer: 1rem;
 $spacers: (