feat: Update modal styles (#227, #235)

* Changed padding for modal ccontent to global-padding

* Close button css

* Added opcity transition

* Modal global radius

* Added a modak fade-in, created a fade-in mix-in

* Removed inline margin from close button on Stateless.js.example

* Alphabetized css

* Fixed the bug in chrome by changing the positioning of the bg to relative

* feat: Allow Modal to animate through CSS

* Modal style updates

* Typography fix

* Close button updates

* Transition mixin updates

* Transition for modal

* fix: Reorder SCSS so it passes the test

docs-src/src/examples/Modal/Stateless.js.example

@@ -15,16 +15,20 @@ class StatelessModalExample extends Component {
       <div>
         <Button style={{backgroundColor: 'black'}} onClick={() => this.openModal()}>Open Modal</Button>
         <StatelessModal isOpen={this.state.isOpen} onBackgroundClick={() => this.closeModal()}>
-          <h1>Modal Example</h1>
-          <p>Click the background or the close button to dismiss it</p>  
-          <CloseButton 
-          aria-label="Close Callout" 
-          style={{marginBottom: '15px', marginRight: '15px'}} 
+          <Row>
+            <Col>
+              <h1>Modal Example</h1>
+              <p>Click the background or the close button to dismiss the modal.</p>
+            </Col>
+          </Row>
+          <CloseButton
+          absolute
+          aria-label="Close Callout"
           onClick={() => this.closeModal()}>&times;</CloseButton
           >
-        </StatelessModal>  
+        </StatelessModal>
       </div>
     )
   }
 }
-)
+)

docs-src/src/examples/Modal/WithBackgroundClick.js.example

@@ -3,7 +3,7 @@
     <Row>
       <Col>
         <h2>Modal Example</h2>
-        <p>Click the background to dimiss it</p>
+        <p>Click the background to dismiss the modal.</p>
       </Col>
     </Row>
   </Modal>

docs-src/src/layouts/index.scss

@@ -24,12 +24,11 @@ h2 {
   font-size: 32px;
   line-height: 48px;
 }
-
 h5,
 h6 {
   font-weight: normal;
   letter-spacing: 1px;
-  margin: $global-padding 0 0;
+  padding: $global-padding 0 0;
   text-transform: uppercase;
 }
 .CodeMirror.CodeMirror {
@@ -127,6 +126,7 @@ h6 {
     background: url('https://3ulsmb4eg8vz37c0vz2si64j-wpengine.netdna-ssl.com/wp-content/uploads/2016/07/75ff3f3c-4aa5-11e6-9c23-4491699777fe.jpg');
     background-position: center;
     background-size: cover;
+    margin: 0 $global-margin-small $global-margin;
     min-height: 320px;
     min-width: 320px;
     transform: scale(1);

docs-src/src/pages/components/Modal.js

@@ -25,9 +25,9 @@ export default class ModalExamplePage extends Component {
           <p>
             The Modal component is a dialog with a container (or page) covering
             background. It should be used only in situations when fully
-            interrupting the user flow for with something important is required.
-            You should prefer over methods for presenting information and
-            actions if a full interruption of the user flow is not required.
+            interrupting the user flow for with something important is required.</p>
+          <p><em>You should use other methods for presenting information and
+            actions if a full interruption of the user flow is not required.</em>
           </p>
         </Headers>
         <div>

scss/components/_Buttons.scss

@@ -8,12 +8,6 @@ $button-bkgd-active: darken($brand, 10%) !default;
 $button-color-active: $white !default;
 $button-radius: $global-radius !default;
 
-// CLOSE BUTTON
-$closebutton-color: $darker-gray !default;
-$closebutton-color-hover: $black !default;
-$closebutton-lineheight: $global-lineheight !default;
-$closebutton-size: $global-font-size !default;
-
 @mixin button-contained {
   .rev-Button {
     margin: $global-vertical-space / 2 auto;
@@ -160,11 +154,3 @@ $closebutton-size: $global-font-size !default;
     }
   }
 }
-%close-button {
-  background: $closebutton-color;
-  &:hover,
-  &:active,
-  &:focus {
-    background: $closebutton-color-hover;
-  }
-}

scss/components/_CloseButton.scss

@@ -1,16 +1,42 @@
 // default component vars listed at the top of the component stylesheet
 // those vars are transferred to rev-settings AND are commented out
 // this way updates can be made to a component by uncommenting settings vars
-$close-bkgd: $body-font-color !default;
-$close-color: $body-bkgd !default;
-$close-size: $size-default !default;
+
+$closebutton-bkgd: $darker-gray !default;
+$closebutton-color: $white !default;
+$closebutton-bkgd-hover: $black !default;
+$closebutton-color-hover: $white !default;
+$closebutton-bkgd-active: $black !default;
+$closebutton-color-active: $white !default;
+$closebutton-radius: $global-rounded !default;
+$closebutton-size: $size-large !default;
 
 .rev-CloseButton {
-  background: $close-bkgd;
+  @include button;
+  @include small-input;
+  background: $closebutton-bkgd;
   border: 0;
-  color: $close-color;
+  border-radius: $closebutton-radius;
+  color: $closebutton-color;
   float: right;
-  line-height: $close-size;
-  min-height: $close-size;
-  min-width: $close-size;
+  line-height: $closebutton-size;
+  margin: $global-padding-small;
+  min-height: $closebutton-size;
+  min-width: $closebutton-size;
+  padding: 0 $global-padding-tiny;
+  &:hover {
+    background: $closebutton-bkgd-hover;
+    color: $closebutton-color-hover;
+  }
+  &:active,
+  &:focus {
+    background: $closebutton-bkgd-active;
+    color: $closebutton-color-active;
+  }
+  &.rev-CloseButton--absolute {
+    margin: 0;
+    position: absolute;
+    right: $global-padding-small;
+    top: $global-padding-small;
+  }
 }

scss/components/_Modal.scss

@@ -1,7 +1,7 @@
 // default component vars listed at the top of the component stylesheet
 // those vars are transferred to rev-settings AND are commented out
 // this way updates can be made to a component by uncommenting settings vars
-$modal-bkgd: $black-40 !default;
+$modal-bkgd: $black-60 !default;
 $modal-content-bkgd: $white !default;
 $modal-content-border-size: 1px !default;
 $modal-content-border-color: $divider-color !default;
@@ -11,39 +11,46 @@ $modal-content-padding: 0 !default;
 
 .rev-Modal,
 .rev-Modal-background {
-  background: $modal-bkgd;
   bottom: 0;
   left: 0;
   overflow-y: auto;
-  position: fixed;
   right: 0;
   top: 0;
 }
+
 .rev-Modal {
+  position: fixed;
   @include flex(center, row, center, nowrap);
+  @include global-transition(opacity);
+  opacity: 0;
   z-index: $above-everything;
+  &.rev-Modal--closed {
+    // so we can move the modal out of the way so that it doesn't intercept
+    // clicks while closed
+    right: 9999vw;
+  }
+  &.rev-Modal--open {
+    opacity: 1;
+  }
 }
+
 .rev-Modal-background {
   background: $modal-bkgd;
+  position: absolute
 }
+
 .rev-Modal-content {
+  @include global-transition(margin-top);
   background: $modal-content-bkgd;
+  border-radius: $card-radius;
   box-shadow: $global-box-shadow;
   color: $modal-content-color;
+  margin-top: $global-padding-large;
   max-width: $global-width;
   padding: $modal-content-padding;
   position: relative;
   width: 90%;
-}
-
-.rev-Modal-close {
-  font-size: $global-font-size-large;
-  position: absolute;
-  right: $global-padding;
-  top: $global-padding;
-  &:hover,
-  &:active,
-  &:focus {
-    text-decoration: none;
+  .rev-Modal--open & {
+    margin-top: 0;
   }
 }

scss/components/_components.scss

@@ -24,6 +24,7 @@
 @import 'Card';
 @import 'CardLayout';
 @import 'DataGrid';
+@import 'Modal'; // requires Card
 @import 'Sticky';
 @import 'Table';
 
@@ -50,7 +51,6 @@
 @import 'Lists';
 @import 'Loader';
 @import 'Menu';
-@import 'Modal';
 @import 'NavigationOutline';
 @import 'Pagination';
 @import 'Progress';

scss/mixins/_animations.scss

@@ -20,3 +20,7 @@
   -webkit-animation: fade-in 0.5s;
   animation: fade-in 0.5s;
 }
+
+@mixin fade-in{
+  @extend .FadeIn;
+}

scss/mixins/_transitions.scss

@@ -1,3 +1,8 @@
+// Safari hack to reduce flicker on transitions
+@mixin reduce-flicker {
+  -webkit-transform: translate3d(0,0,0);
+}
+
 @mixin global-transition($property: all, $delay: 0, $duration: 0.2s) {
   transition-delay: $delay;
   transition-duration: $duration;

scss/partials/_typography.scss

@@ -25,28 +25,36 @@ $header-font-size-values: $h1-value, $h2-value, $h3-value, $h4-value, $h5-value,
 @for $i from 1 through length($header-font-sizes) {
   #{nth($header-font-sizes, $i)} { //h1
     font-size: nth($header-font-size-values, $i) * 1rem;
-    margin-bottom: $global-vertical-space;
-    margin-top: $global-vertical-space * 2;
+    padding-bottom: $global-vertical-space;
+    padding-top: $global-vertical-space * 2;
+  }
+}
+@mixin header-contained {
+  @for $i from 1 through length($header-font-sizes) {
+    #{nth($header-font-sizes, $i)} {
+      padding-top: $global-vertical-space / 2;
+      padding-bottom: $global-vertical-space / 2;
+    }
   }
 }
 @mixin typography-contained {
   @for $i from 1 through length($header-font-sizes) {
     #{nth($header-font-sizes, $i)} {
-      margin-top: $global-vertical-space / 2;
-      margin-bottom: $global-vertical-space / 2;
+      padding-top: $global-vertical-space / 2;
+      padding-bottom: $global-vertical-space / 2;
     }
   }
   // TODO: better way to include p styles?
   p {
-    margin: $global-vertical-space 0;
+    padding: $global-vertical-space 0;
     + p,
     + h1,
     + h2,
     + h3,
     + h4,
     + h5,
     + h6 {
-      margin: 0 0 $global-vertical-space 0;
+      padding: 0 0 $global-vertical-space 0;
     }
   }
 }
@@ -56,7 +64,7 @@ $header-font-size-values: $h1-value, $h2-value, $h3-value, $h4-value, $h5-value,
   font-family: $header-font-family;
   font-style: $header-font-style;
   font-weight: $header-font-weight;
-  padding: 0;
+  margin: 0;
 }
 
 h1,
@@ -75,7 +83,7 @@ h2 {
 }
 h3 {
   line-height: $global-lineheight;
-  margin: $global-margin-small 0;
+  padding: $global-margin-small 0;
 }
 h4, h5, h6 {
   line-height: $global-lineheight;
@@ -88,9 +96,9 @@ h6 {
 }
 
 p {
-  margin: 0 0 $global-vertical-space 0;
+  margin: 0;
   max-width: 70rem;
-  padding: 0;
+  padding: 0 0 $global-vertical-space 0;
 }
 .Lead {
   display: block;

settings-templates/harmonium-settings.scss

@@ -25,6 +25,15 @@ $breakpoints: (
   global-width: (min-width: $global-width),
 );
 
+// Sizes - made up of vertical spacing multiples
+// common size vars for things like badges
+$size-tiny: 6px;
+$size-small: 12px;
+$size-default: 24px;
+$size-large: 48px;
+$size-larger: 64px;
+$size-largest: 128px;
+
 // IMPORT FONTS HERE
 
 // Global Fonts
@@ -132,10 +141,14 @@ $button-color-active: $white;
 $button-radius: $global-radius;
 
 // CLOSE BUTTON
-$closebutton-color: $darker-gray;
-$closebutton-color-hover: $black;
-$closebutton-lineheight: $global-lineheight;
-$closebutton-size: $global-font-size;
+$closebutton-bkgd: $darker-gray;
+$closebutton-color: $white;
+$closebutton-bkgd-hover: $black;
+$closebutton-color-hover: $white;
+$closebutton-bkgd-active: $black;
+$closebutton-color-active: $white;
+$closebutton-radius: $global-rounded;
+$closebutton-size: $size-large;
 
 // HR Vars
 $hr-width: $global-width;
@@ -149,15 +162,6 @@ $no-image-blur: blur(0px);
 // Disabled
 $disabled-opacity: 0.35;
 
-// Sizes - made up of vertical spacing multiples
-// common size vars for things like badges
-$size-tiny: 6px;
-$size-small: 12px;
-$size-default: 24px;
-$size-large: 48px;
-$size-larger: 64px;
-$size-largest: 128px;
-
 //## Color Mgmt for Navigational Components -----------------------------
 // ex: menus, pagination
 $navigation-bkgd: $white-0;