ratchet_design 0.1.19 → 0.1.20

data/app/assets/javascripts/ratchet/enhancement/modal.js

@@ -0,0 +1,185 @@
+/**
+ * Modal 0.0.1
+ * A portable modal module
+ * @author Kyle Foster (@hkfoster)
+ * @license MIT
+ **/
+
+// Dependencies
+var toolbox    = require( 'compose-toolbox' ),
+    Event      = toolbox.event,
+    matches    = toolbox.matches,
+    getClosest = toolbox.getClosest,
+    once       = require( '../utility/once' );
+
+function getTriggerPosition( event ) {
+  var left   = event.clientX,
+      top    = event.clientY,
+      right  = window.innerWidth - left,
+      bottom = window.innerHeight - top;
+
+  return {
+    left   : left,
+    right  : right,
+    top    : top,
+    bottom : bottom
+  }
+}
+
+function focusInput( parent, order ) {
+  order = order - 1 || 0;
+  if ( parent.querySelectorAll( 'input' ).length ) parent.querySelectorAll( 'input' )[ order ].focus();
+}
+
+function pythagorean( sideA, sideB ){
+  return Math.sqrt( Math.pow( sideA, 2 ) + Math.pow( sideB, 2 ) );
+}
+
+// Public API function
+var modal = function( selector, content, callback ) {
+
+  // Click handler function
+  var clickHandler = function( event ) {
+
+    // If `close-modal` button is clicked
+    if ( getClosest( event.target, '[data-close-modal]' ) ) {
+
+      // Get outta Dodge
+      closeModal();
+
+    // If attached selector is clicked
+    } else if ( getClosest( event.target, selector ) ) {
+
+      // Show the modal
+      showModal( event );
+
+    }
+
+    // Otherwise just bail
+    return false;
+
+  };
+
+  // Show modal function
+  var showModal = function( event ) {
+
+    // Prevent default behavior
+    event.preventDefault();
+
+    // Prevent page scroll
+    document.body.style.overflow = 'hidden';
+
+    // If modal has yet to be initialized, insert it into the document
+    if ( !document.querySelector( '[data-modal]' ) ) document.body.insertAdjacentHTML( 'beforeend', '<aside data-modal><section data-modal-content></section><a data-close-modal><svg viewBox="0 0 30 30" width="16"><path d="M2 2l26 26M2 28l26-26" stroke="currentColor" stroke-width="4" stroke-linecap="round" fill="none" /></svg><span>esc</span></a></aside>' );
+
+    // Assignment
+    var
+    modalTrigger  = event.target,
+    modalElement  = document.querySelector( '[data-modal]' ),
+    modalContent  = modalElement.querySelector( '[data-modal-content]' ),
+    modalBackdrop = modalElement.querySelector( '[data-modal-backdrop]' ),
+
+    // Calculate trigger's position in the viewport
+    position = getTriggerPosition( event ),
+
+    // Calculate the circle's radius
+    radius = pythagorean( window.innerHeight, window.innerWidth ),
+
+    // Assign position coordinates
+    xPosition = position.left - Math.round( radius ),
+    yPosition = position.top - Math.round( radius ),
+
+    // Position modal background accordingly
+    modalStyles = '<style data-modal-coords>[data-modal]:after { ' +
+      'left: ' + xPosition + 'px; ' +
+      'top: ' + yPosition + 'px; ' +
+      'width: ' + radius * 2 + 'px; ' +
+      'height: ' + radius * 2 + 'px; ' +
+    '}</style>';
+
+    // If content is passed
+    if ( content ) {
+
+      // And it’s a function
+      if ( content instanceof Function ) {
+
+        // Make it our callback
+        callback = content;
+
+      // Otherwise
+      } else {
+
+        // Set modal content accordingly
+        modalContent.innerHTML = content;
+
+      }
+
+    }
+
+    // Insert modal positioning styles into document
+    document.body.insertAdjacentHTML( 'beforeend', modalStyles );
+
+    // Wait for that sumbitch to animate
+    once.evt( modalElement, 'animationend', function( event ) {
+
+      // Then make its contents visible
+      modalElement.setAttribute( 'data-modal', 'visible' );
+
+      // Focus first input
+      focusInput( modalElement );
+
+    }, false );
+
+    // Activate modal
+    modalElement.setAttribute( 'data-modal', 'in' );
+
+    // Run callback function
+    if ( callback ) once.fn( callback( event ) );
+
+  }
+
+  var keyHandler = function( event ) {
+    event = event || window.event;
+    var isEscape;
+
+    if ( 'key' in event ) {
+      isEscape = ( event.key == 'Escape' || event.key == 'Esc' );
+    } else {
+      isEscape = ( event.keyCode == 27 );
+    }
+
+    if ( isEscape ) {
+      closeModal();
+    }
+  }
+
+  var closeModal = function( event ) {
+    var activeModal = document.querySelector( '[data-modal="visible"]' );
+
+    if ( !activeModal ) return false;
+
+    activeModal.setAttribute( 'data-modal', 'out' );
+
+    once.evt( activeModal, 'animationend', function( event ) {
+
+      activeModal.setAttribute( 'data-modal', '' );
+
+      activeModal.querySelector( '[data-modal-content]' ).innerHTML = '';
+
+      document.body.style.overflow = '';
+
+      var styles = document.querySelector( '[data-modal-coords]' );
+
+      if ( styles ) document.body.removeChild( styles );
+
+    }, false );
+
+  }
+
+  document.addEventListener( 'click', clickHandler, false );
+  document.addEventListener( 'keydown', keyHandler, false );
+
+}
+
+// Public API
+module.exports = modal;

data/app/assets/javascripts/ratchet/enhancement/smooth-scroll.js

@@ -0,0 +1,21 @@
+var toolbox = require( 'compose-toolbox' ),
+    Event   = toolbox.event
+
+Event.on( document, 'click', '[data-anchor],a[href^="#"]', function(event) {
+ 
+  var pos = document.body.scrollTop
+  var anchor = event.target.dataset.anchor || event.target.getAttribute('href')
+
+  if ( event.target.getAttribute('href') ) {
+    event.preventDefault()
+  }
+
+  window.location.hash = anchor
+  document.body.scrollTop = pos
+
+  var target = document.querySelector(anchor)
+
+  if (target) {
+    toolbox.scrollTo(target)
+  }
+})

data/app/assets/javascripts/ratchet/utility/once.js

@@ -0,0 +1,42 @@
+/**
+ * Once 0.0.1
+ * Create one-time events or functions
+ * @author Kyle Foster (@hkfoster)
+ * @license MIT
+ **/
+
+// Public API function
+var once = {
+
+  evt: function( target, type, listener, bubbles ) {
+
+    // Create event
+    target.addEventListener( type, function fn( event ) {
+
+      // Remove event
+      target.removeEventListener( type, fn, bubbles );
+
+      // Call handler
+      listener( event );
+
+    }, bubbles );
+
+  },
+
+  fn: function( fn, context ) {
+    var result;
+
+    return function() {
+      if ( fn ) {
+        result = fn.apply( context || this, arguments );
+        fn = null;
+      }
+
+      return result;
+    };
+  }
+
+};
+
+// Public API
+module.exports = once;

data/app/assets/stylesheets/ratchet/_colors.yml

@@ -0,0 +1,54 @@
+_colors:
+  # Passive colors
+  space:     '#1f2b54' # Blue-Black
+  shark:     '#30446e' # Dark Blue-Gray
+  steel:     '#576e91' # Blue-Gray
+  pewter:    '#869ebc' # Light Blue-Gray
+  dolphin:   '#b4c1d2' # Lighter Blue
+  alabaster: '#c3cdda' # Light Blue
+  isabella:  '#d6dde7' # Off-Cream
+  smoke:     '#edf5f7' # Cream
+  cirrus:    '#f7fafb' # Off-White
+  white:     '#FFFFFF' # White
+
+  # Active colors
+  azure:     '#0094fd' # Blue
+  cerulean:  '#0FA7DB' # Softer Blue
+  byzantine: '#c60ca5' # Magenta
+  mulberry:  '#8f52ea' # Purple
+  majorelle: '#625ff9' # Indigo
+  caribbean: '#25c894' # Mint
+  grass:     '#2ac84f' # Green
+  gold:      '#f69523' # Yellow
+  tangelo:   '#f96623' # Orange
+  rusty:     '#dd2f41' # Red
+  orchid:    '#a346ce' # Purple
+
+  # Banner-specific colors
+  lochmara:    '#008BC3' # Default
+  akaroa:      '#D2C9A7' # Error
+  turquoise:   '#5CC6E4' # NTTW
+  terracotta:  '#A81C27' # Thanksgiving
+  cobalt:      '#006dff' # Royal blue
+  capri:       '#00d2fe' # Deep sky blue
+
+gradients:
+  earthrise:   [ $azure,       $majorelle ] # Blue to Indigo      | PostgreSQL
+  royalty:     [ $majorelle,   $mulberry  ] # Indigo to Purple    | Elasticsearch
+  lagoon:      [ $azure,       $caribbean ] # Blue to Mint        | RethinkDB
+  pearlescent: [ $azure,       $mulberry  ] # Blue to Purple      | MySQL
+  firestorm:   [ $gold,        $tangelo   ] # Yellow to Orange    | RabbitMQ
+  sunset:      [ $tangelo,     $rusty     ] # Orange to Red       | Redis
+  berries:     [ $byzantine,   $rusty     ] # Magenta to Red      | etcd
+  supernova:   [ $byzantine,   $mulberry  ] # Magenta to Purple   | ScyllaDB
+  emerald:     [ $caribbean,   $grass     ] # Mint to Green       | MongoDB
+  aurora:      [ $pewter,      $caribbean ] # Green to Indigo     | JanusGraph
+  clearsky:    [ $cerulean,    $azure     ] # Blue to Softer Blue | Compose
+
+  tidal:       [ $cobalt,      $capri     ] # Hero Gradient Only
+  blackhole:   [ $space,       $shark     ] # Hero Gradient Only
+  midnight:    [ $steel,       $pewter    ] # Hero Gradient Only
+  shady:       [ $pewter,      $alabaster ] # Hero Gradient Only
+  grayscale:   [ $dolphin,     $isabella  ] # Hero Gradient Only
+  polar:       [ $alabaster,   $smoke     ] # Hero Gradient Only
+  eggshell:    [ $cirrus,      $smoke     ] # Hero Gradient Only

data/app/assets/stylesheets/ratchet/_core.scss

@@ -1,5 +1,8 @@
 // Utility modules
+@import 'colors.yml';
+
 @import 'utility/global';
+@import 'utility/animations';
 @import 'utility/grid';
 @import 'utility/loader';
 
@@ -15,6 +18,7 @@
 @import 'base/table';
 @import 'base/document';
 @import 'base/section';
+@import 'base/slider';
 
 // Enhancement modules
 @import 'enhancement/feature';
@@ -22,4 +26,7 @@
 @import 'enhancement/notice';
 @import 'enhancement/hero';
 @import 'enhancement/tooltip';
-@import 'enhancement/lightbox';
+@import 'enhancement/lightbox';
+@import 'enhancement/deployments';
+@import 'enhancement/modal';
+@import 'enhancement/lightbox';

data/app/assets/stylesheets/ratchet/base/_button.scss

@@ -1,14 +1,13 @@
 /* ========================================================================== *
- * c. Button module
+ * Button module
  * -------------------------------------------------------------------------- */
 
 /* ===================================== *
- * i. Utility
+ * Utility
  * ------------------------------------- */
 
 // Reset default <button> styles
 @mixin button-reset() {
-  font: initial;
   margin: initial;
   padding: initial;
   border: initial;
@@ -26,15 +25,13 @@
 }
 
 // Resizable / colorable buttons
-@mixin button($color: $azure, $size: normal, $fill: on, $bevel: off) {
+@mixin button($color: $azure, $size: normal, $fill: on, $rounded: off) {
 
   // Define default variables
   $font-size: 16px;
   $color: $color;
-  $padding: 6px 20px;
-  $margin-top: 15px;
-  $margin-bottom: 31px;
-  $border-radius: if($bevel == on, 100px, $radius);
+  $padding: 1em 1.2em;
+  $border-radius: if($rounded == on, 100px, $radius);
 
   // Define color-based variables
   @if $color == primary {
@@ -45,58 +42,49 @@
     $color: $caribbean;
   } @else if $color == failure {
     $color: $rusty;
+  } @else if $color == faded {
+    $color: $alabaster;
   }
 
   // Define size-based variables
   @if $size == small {
     $font-size: 14px;
-    $padding: 3px 14px;
-    $margin-top: 15px;
-    $margin-bottom: 20px;
+    $padding: .8em 1em;
   } @else if $size == large {
-    $padding: 12px 24px;
-    $margin-top: 15px;
-    $margin-bottom: 19px;
+    $padding: 1.2em 1.4em;
   } @else if $size == x-large {
     $font-size: 17px;
-    $padding: 14px 26px;
-    $margin-top: 15px;
-    $margin-bottom: 30px;
+    $padding: 1.2em 1.4em;
   }
 
   // Declarations
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   width: auto;
   text-align: center;
   font-size: $font-size;
-  line-height: vr(2); // 30px
+  line-height: 1em;
   font-weight: 700;
   cursor: pointer;
   padding: $padding;
-  margin-top: $margin-top;
-  margin-bottom: $margin-bottom;
   transition: $duration;
-  // border-radius: $border-radius;
+  border-radius: $border-radius;
 
   // Default
-  &,
-  &:visited {
+  @include normal {
     @if $fill == on {
       color: $white;
       background: $color;
       border: none;
-      // border: 1px solid darken($color, 3);
     } @else {
       color: $color;
       background: transparent;
-      border: 1px solid $color;
+      box-shadow: 0 0 0 1px $color;
     }
   }
 
   // Active
-  &:hover,
-  &:focus,
-  &:active {
+  @include active {
     @if $fill == on {
       color: $white;
       background: darken($color, 3);
@@ -112,10 +100,13 @@
 
   // Disabled
   &[disabled] {
-    // color: $smoke;
     background: lighten($color, 33);
-    // border-color: $alabaster;
     text-shadow: none;
     pointer-events: none;
   }
+}
+
+button,
+[type=button] {
+  @include button-reset;
 }

data/app/assets/stylesheets/ratchet/base/_document.scss

@@ -1,15 +1,15 @@
 /* ========================================================================== *
- * g. Document module
+ * Document module
  * -------------------------------------------------------------------------- */
 
 /* ===================================== *
- * i. Utility
+ * Utility
  * ------------------------------------- */
 
 // Transparent headers (for use with hero banners)
 @mixin transparent-header {
   margin-bottom: -$header-height;
-  z-index: 3;
+  z-index: 100;
 
   &,
   &:before {
@@ -23,7 +23,8 @@
 
 // Transparent header extendable placeholder
 %transparent-header {
-  @include transparent-header; }
+  @include transparent-header;
+}
 
 // Header link styles
 %header-link {
@@ -31,7 +32,6 @@
   flex-shrink: 0;
   font-size: 14px;
   font-weight: 600;
-  // text-transform: uppercase;
 }
 
 // Logo home link styles
@@ -49,7 +49,7 @@
 
 // Header button styles
 %header-button {
-  @include button($size: small, $color: $white, $fill: off, $bevel: on);
+  @include button($size: small, $color: $white, $fill: off);
   font-weight: 600;
   margin-top: 0;
   margin-bottom: 0;
@@ -59,56 +59,56 @@
 %mobile-menu-button {
 
   // Hidden on larger screens
-  @extend %hidden;
-
   // Shown on smaller screens
-  @media (max-width: $breakpoint) {
-    @include button-reset;
-    @include shown;
-    z-index: 4;
-    width: 36px;
-    height: 36px;
-    margin-left: auto;
-    padding: 12px 10px;
-    border-radius: 50%;
-    transition: .5s transform;
-    box-shadow: 0 0 0 1px $white;
-    background: transparent linear-gradient(to bottom, $white, $white) 50% 50% / 16px 2px no-repeat;
-
-    &:after,
-    &:before {
-      content: '';
-      display: block;
-      width: 16px;
-      height: 2px;
-      background: $white;
-      transition:
-        .5s opacity,
-        .5s transform;
-    }
+  @include at-least($breakpoint) {
+    @include hidden;
+  }
 
-    &:after {
-      margin: 8px 0;
-    }
+  @include button-reset;
+  @include shown;
+  z-index: 4;
+  width: 36px;
+  height: 36px;
+  margin-left: auto;
+  padding: 12px 10px;
+  border-radius: 50%;
+  transition: .5s transform;
+  box-shadow: 0 0 0 1px $white;
+  background: transparent linear-gradient(to bottom, $white, $white) 50% 50% / 16px 2px no-repeat;
 
-    // Fancy animation when menu open
-    .menu-open & {
-      transform: rotate(-45deg);
+  &:after,
+  &:before {
+    content: '';
+    display: block;
+    width: 16px;
+    height: 2px;
+    background: $white;
+    transition:
+      .5s opacity,
+      .5s transform;
+  }
 
-      &:after {
-        transform: translateY(-5px) rotate(-90deg);
-      }
+  &:after {
+    margin: 8px 0;
+  }
+
+  // Fancy animation when menu open
+  .menu-open & {
+    transform: rotate(-45deg);
 
-      &:before {
-        transform: translateY(5px);
-        opacity: 0;
-      }
+    &:after {
+      transform: translateY(-5px) rotate(-90deg);
+    }
+
+    &:before {
+      transform: translateY(5px);
+      opacity: 0;
     }
   }
 }
 
 /* ===================================== *
- * ii. Common
+ * Common
  * ------------------------------------- */
 
 *,
@@ -124,18 +124,31 @@
 }
 
 /* ===================================== *
- * iii. Document
+ * Document
  * ------------------------------------- */
 
+html,
+body {
+  overflow-x: hidden;
+}
+
 body {
   display: flex;
   min-height: 100vh;
   flex-direction: column;
-  color: $space;
+  color: $steel;
   font-weight: 400;
   font-size: $base-size;
   line-height: $base-height;
-  overflow-x: hidden;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: $space;
+  }
 
   a,
   input,
@@ -146,7 +159,7 @@ body {
 }
 
 /* ===================================== *
- * iv. Header
+ * Header
  * ------------------------------------- */
 
 // Main site header
@@ -180,7 +193,7 @@ header[role=banner] {
 }
 
 /* ===================================== *
- * v. Navigation
+ * Navigation
  * ------------------------------------- */
 
 // Main site navigation
@@ -252,10 +265,10 @@ header[role=banner] > nav[role=navigation] {
 }
 
 /* ===================================== *
- * vi. Main
+ * Main
  * ------------------------------------- */
 
 // Main content
 main {
   flex: 1;
-}
+}

data/app/assets/stylesheets/ratchet/base/_form.scss

@@ -254,7 +254,6 @@ label {
   flex-direction: column;
   position: relative;
   flex: 1 0 auto;
-  margin: 18px 0;
 
   &.label-text {
     transition-property: box-shadow, color;