feat(Dialogs): Build standard dialog styles.

Pier1 · Jan 29, 2017 · 89ea7fa · 89ea7fa
1 parent 4d3b24f
commit 89ea7fa
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 21 deletions.
diff --git a/rocketbelt/components/dialogs/_dialog-base.scss b/rocketbelt/components/dialogs/_dialog-base.scss
@@ -2,7 +2,7 @@
 #docs-wrapper:not(.is-dialog-open),
 #main:not(.is-dialog-open) {
   & ~ .dialog {
-    .dialog-content {
+    .dialog_content {
       animation: dialogOut 300ms ease-in;
     }
   }
@@ -18,46 +18,76 @@
     visibility: visible;
     transition: visibility 300ms ease-out;
   }
+
+  .dialog_header {
+    border-bottom: 1px solid color(gray, plus3);
+
+    .dialog_title {
+      font-weight: font-weight(normal);
+    }
+  }
+
+  .dialog_header,
+  .dialog_content,
+  .dialog_buttons {
+    .col {
+      padding: padding(-5);
+    }
+  }
 }
 
 .is-dialog-open {
+  overflow: hidden;
   filter: blur(5px);
 
   & ~ .dialog {
-    .dialog-overlay {
+    .dialog_overlay {
       opacity: 1;
       transition: opacity 300ms ease-out;
     }
 
-    .dialog-content {
+    .dialog_content {
       animation: dialogIn 500ms ease-out;
     }
   }
 }
 
-.dialog-overlay {
+.dialog_overlay {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 2;
-  background-color: rgba(color(black), 0.6);
+  background-color: rgba(color(gray, plus4), 0.6);
   opacity: 0;
   transition: opacity 300ms ease-out;
 }
 
-.dialog-content {
+.dialog_buttons {
+  border-top: 1px solid color(gray, plus2);
+  background: color(gray, plus3);
+}
+
+.dialog_content {
+  @include z-depth(1);
+
   position: fixed;
   top: 50%;
   left: 50%;
   z-index: 3;
-  padding: 1em;
-  max-width: 90%;
-  width: 600px;
+  width: 95%;
   border-radius: 2px;
   background-color: color(white);
   transform: translate3d(-50%, -50%, 0);
+
+  @include media('>=md') {
+    width: 60%;
+  }
+
+  @include media('>=lg') {
+    width: 40%;
+  }
 }
 
 @keyframes dialogIn {
@@ -84,8 +114,27 @@
   }
 }
 
-.dialog-close {
-  position: absolute;
-  top: 0.5em;
-  right: 0.5em;
+.dialog_content {
+  .dialog_close_container {
+    flex-grow: 0;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.dialog_close {
+  display: flex;
+  padding: 0;
+  width: 44px;
+  height: 44px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+
+  .icon {
+    width: 1rem;
+    height: 100%;
+  }
 }
diff --git a/rocketbelt/components/dialogs/_dialog-standard.pug b/rocketbelt/components/dialogs/_dialog-standard.pug
@@ -1,12 +1,16 @@
 section.dialog#dialog-example-standard(tabindex=0, aria-hidden='true', data-rb-dialog-obscures='docs-wrapper')
-  .dialog-overlay(tabindex=-1, data-rb-dialog-hide)
-  .dialog-content.grid-fluid(aria-labelledby='dialog-title', aria-describedby='dialog-description', role='dialog')
-    .row.dialog-header
+  .dialog_overlay(tabindex=-1, data-rb-dialog-hide)
+  .dialog_content.grid-fluid(aria-labelledby='specific-dialog_title', aria-describedby='specific-dialog_description', role='dialog')
+    .row.dialog_header.xs-between
       .col.xs
-        h2#dialog-title Dialog title
+        h2.dialog_title#specific-dialog_title Dialog title
+      .col.xs.dialog_close_container
+        button.dialog_close(data-rb-dialog-hide, aria-label='Close dialog')
+          svg.icon
+            use(xlink:href='/components/icons/rocketbelt.icons.svg#rb-icon-close')
     .row
       .col.xs
-        p#dialog-description
+        p#specific-dialog_description
           | It’s safe bet you know you like, indoors and solids. You
           | don’t need is all the rows of muted shades of sheer jasmine and
           | neutral hues, from the stir in the view.
@@ -19,7 +23,8 @@ section.dialog#dialog-example-standard(tabindex=0, aria-hidden='true', data-rb-d
           | neutral hues, from the stir in the view. Hand-painted in the
           | look you'd like a lovely or covered outdoor life. So which means
           | more tempting? How can throw.
-    .row.xs-end.dialog-buttons
-      .col.xs
+    .row.xs-end.dialog_buttons
+      .col.xs-6.md-4
+        button.button.button-secondary Cancel
+      .col.xs-6.md-4
         button.button-primary OK
-        button.dialog-close(data-rb-dialog-hide, aria-label='Close dialog') &times;