ratchet_design 0.1.5 → 0.1.6

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

@@ -0,0 +1,56 @@
+/**
+ * Unhover 0.0.1
+ * Disable hover events on scroll
+ * @author Kyle Foster (@hkfoster)
+ * @license MIT
+ **/
+
+// Dependencies
+var throttle = require( '../utility/throttle' ),
+    timeout  = require( '../utility/timeout' );
+
+// Public API function
+var unhover = function( settings ) {
+
+  // Overridable defaults
+  var defaults = {
+    scrollDelay : 150
+  };
+
+  // Scoped variables
+  var options = Object.assign( {}, defaults, settings ),
+      docElem = document.documentElement,
+      scrollTimer;
+
+  // Scroll handler function
+  function scrollHandler() {
+
+    // Clear timer (if it exists)
+    if ( scrollTimer ) timeout.clear( scrollTimer );
+
+    // Turn off pointer events
+    if ( !docElem.style.pointerEvents ) {
+      docElem.style.pointerEvents = 'none';
+    }
+
+    // Check to see if scroll is over
+    scrollTimer = timeout.set( function() {
+
+      // And reset pointer events upon completion
+      docElem.style.pointerEvents = '';
+
+    // Delay firing function based on argument passed
+    }, options.scrollDelay );
+
+  }
+
+  // Scroll throttle function init
+  throttle( 'scroll', 'optimizedscroll' );
+
+  // Scroll function listener
+  window.addEventListener( 'optimizedscroll', scrollHandler, false );
+
+};
+
+// Public API
+module.exports = unhover;

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

@@ -0,0 +1,15 @@
+/**
+ * WordCount 0.0.1
+ * Word counter function
+ * @author Kyle Foster (@hkfoster)
+ * @license MIT
+ **/
+
+// Public API function
+var wordCount = function( str ) {
+  var matches = str.match( /\S+/g );
+  return matches ? matches.length : 0;
+};
+
+// Public API
+module.exports = wordCount;

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

@@ -1,7 +1,6 @@
 // Utility modules
 @import 'utility/global';
 @import 'utility/grid';
-@import 'utility/loader';
 
 // Base modules
 @import 'base/text';
@@ -9,15 +8,14 @@
 @import 'base/button';
 @import 'base/media';
 @import 'base/form';
-@import 'base/multistep-form';
 @import 'base/table';
 @import 'base/document';
 
 // Enhancement modules
+@import 'enhancement/loader';
 @import 'enhancement/feature';
 @import 'enhancement/sticky-sidebar';
 @import 'enhancement/notice';
 @import 'enhancement/hero';
 @import 'enhancement/contrast-section';
-@import 'enhancement/tooltip';
-@import 'enhancement/lightbox';
+@import 'enhancement/tooltip';

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

@@ -42,7 +42,7 @@
   } @else if $color == secondary {
     $color: $flush;
   } @else if $color == success {
-    $color: $apple;
+    $color: $lima;
   } @else if $color == failure {
     $color: $punch;
   }

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

@@ -6,25 +6,18 @@
  * i. Utility
  * ------------------------------------- */
 
-// Universal text-based input variable
-$text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], input[type=email], input[type=number], input[type=password]';
-
 // Nested labels
-@mixin nested-label($size: normal, $spacing: on) {
+@mixin nested-label($size: normal) {
 
   // Scoped variables
   $font-size: if($size == large,  17px,  16px);
+  $margin:    if($size == large,  19px,  25px);
   $padding-y: if($size == large,  12px,   9px);
   $padding-x: if($size == large,  14px,  12px);
-  $margin:    if($size == large,  19px,  25px);
   $distance:  if($size == large, -24px, -22px);
   $scale:     if($size == large,  .824,  .875);
   $height:    if($size == large,  56px,  50px);
 
-  @if $spacing != on {
-    $margin: 0;
-  }
-
   // Active state
   %active {
     z-index: 2;
@@ -39,9 +32,9 @@ $text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], inp
 
   // Input labels
   label {
+    display: flex;
+    width: 100%;
     padding: 0;
-    clear: both;
-    flex: 1 0 auto;
     background: $white;
     font-size: $font-size;
     margin-bottom: $margin;
@@ -49,8 +42,8 @@ $text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], inp
 
   // Default active color
   :not(.valid):not(.invalid) > {
-    textarea,
-    #{$text-inputs} {
+    input,
+    textarea {
       &:focus + span,
       &:active + span {
         color: darken($aluminum, 10);
@@ -60,8 +53,13 @@ $text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], inp
 
   // Validated label
   .valid > {
-    textarea,
-    #{$text-inputs} {
+    input,
+    textarea {
+
+      // Active state
+      + span {
+        @extend %active;
+      }
 
       // Non-required active color
       &:not(:required):focus + span,
@@ -71,15 +69,20 @@ $text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], inp
 
       // Required active color
       &:required + span {
-        color: $apple;
+        color: $lima;
       }
     }
   }
 
   // Invalidated label
   .invalid > {
-    textarea,
-    #{$text-inputs} {
+    input,
+    textarea {
+
+      // Active state
+      + span {
+        @extend %active;
+      }
 
       // Non-required active color
       &:not(:required):focus + span,
@@ -96,7 +99,6 @@ $text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], inp
 
   // Select-specific styles
   select {
-    margin: 0;
     font-size: $font-size;
     line-height: inherit;
     height: $height;
@@ -104,13 +106,18 @@ $text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], inp
   }
 
   // Inputs
-  textarea,
-  #{$text-inputs} {
+  input,
+  textarea {
+    background: transparent;
+  }
+
+  input,
+  select,
+  textarea {
     z-index: 1;
     margin: 0;
     font-size: $font-size;
     line-height: inherit;
-    background: transparent;
     padding: $padding-y $padding-x;
 
     // Faux-placeholder labels
@@ -139,34 +146,16 @@ $text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], inp
         transform .2s;
     }
 
-    // Move labels out of the way on focus and empty
+    // Move labels out of the way on focus
     &:focus + span,
-    &:active + span,
-    &:not([value=""]) + span, {
+    &:active + span {
       @extend %active;
     }
   }
 }
 
-// Inline forms
-@mixin inline-form($size: normal, $gutter: 10px) {
-  @include nested-label($size, off);
-  @include grid;
-
-  // Remove top spacing from submit button
-  > [type=submit] {
-    margin-top: 0;
-  }
-
-  // Leave right margin off last element
-  > :not(:last-child) {
-    margin-right: $gutter;
-  }
-
-}
-
 %success-btn {
-  @include button($color: $apple);
+  @include button($color: $lima);
 }
 
 /* ===================================== *
@@ -315,15 +304,9 @@ select {
 // Radios & checkboxes
 input[type=radio],
 input[type=checkbox] {
-  position: absolute;
-  opacity: 0;
+  display: none;
 
-  &:focus + .tick-label,
-  &:active + .tick-label {
-    box-shadow: 0 0 0 1px $aluminum inset;
-  }
-
-  + .tick-label {
+  + span {
     width: 20px;
     height: 20px;
     margin: 0 8px 0 0;
@@ -344,11 +327,11 @@ input[type=checkbox] {
 // Radios
 input[type=radio] {
 
-  + .tick-label {
+  + span {
     border-radius: 50%;
   }
 
-  &:checked + .tick-label {
+  &:checked + span {
     box-shadow: 0 0 0 8px $cerulean inset;
   }
 }
@@ -356,7 +339,7 @@ input[type=radio] {
 // Checkboxes
 input[type=checkbox] {
 
-  + .tick-label {
+  + span {
     border-radius: $radius;
     position: relative;
 
@@ -375,11 +358,11 @@ input[type=checkbox] {
     }
   }
 
-  &:checked + .tick-label {
+  &:checked + span {
     box-shadow: 0 0 0 10px $cerulean inset;
   }
 
-  &:checked + .tick-label:before {
+  &:checked + span:before {
     transform: scale(.5) rotate(-45deg);
   }
 }
@@ -531,7 +514,13 @@ button[type=submit] {
  * ------------------------------------- */
 
 // Apply validation styles to inputs & textareas
-textarea, #{$text-inputs}, select {
+textarea,
+input[type=url],
+input[type=tel],
+input[type=text],
+input[type=email],
+input[type=number],
+input[type=password] {
 
   // Strip default styling
   &:invalid {
@@ -542,13 +531,13 @@ textarea, #{$text-inputs}, select {
   // Apply valid state color to required fields & adjacent labels
   &.valid:required,
   .valid &:required {
-    color: $apple;
+    color: $lima;
   }
 
   // Apply valid state to required fields
   &.valid:required,
   .valid &:required   {
-    border-color: $apple;
+    border-color: $lima;
   }
 
   // Apply invalid state color to required fields & adjacent labels
@@ -566,7 +555,7 @@ textarea, #{$text-inputs}, select {
   // Apply valid state to Chrome’s autofilled fields
   &.valid:required:-webkit-autofill,
   .valid &:required:-webkit-autofill {
-    -webkit-text-fill-color: $apple;
+    -webkit-text-fill-color: $lima;
   }
 
   // Apply invalid state to Chrome’s autofilled fields
@@ -627,4 +616,4 @@ textarea, #{$text-inputs}, select {
       border-color: transparent transparent $punch transparent;
     }
   }
-}
+}

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

@@ -328,7 +328,7 @@ code,
 kbd,
 samp {
   font-family: $mono-font;
-  // color: $aluminum;
+  color: $aluminum;
   direction: ltr;
   text-align: left;
   tab-size: 2;
@@ -365,8 +365,8 @@ pre {
  * xi. Syntax highlighting
  * ------------------------------------- */
 
-pre[class*=lang-],
-code[class*=lang-] {
+pre[class*=language-],
+code[class*=language-] {
   color: $aluminum;
 }
 
@@ -374,7 +374,7 @@ code[class*=lang-] {
   .cm-keyword                { color: $bahama;    }
   .cm-atom                   { color: $lightning; }
   .cm-number                 { color: $rose;      }
-  .cm-def                    { color: $apple;      }
+  .cm-def                    { color: $lima;      }
   .cm-variable               { color: $flush;     }
   .cm-variable-2             { color: $orchid;    }
   .cm-variable-3             { color: $flush;     }
@@ -382,7 +382,7 @@ code[class*=lang-] {
   .cm-operator               { color: $nobel;     }
   .cm-comment                { color: $nobel;     }
   .cm-string                 { color: $cerulean;  }
-  .cm-string-2               { color: $apple;      }
+  .cm-string-2               { color: $lima;      }
   .cm-meta                   { color: $nobel;     }
   .cm-error                  { color: $punch;     }
   .cm-qualifier              { color: $nobel;     }
@@ -391,7 +391,7 @@ code[class*=lang-] {
   .cm-tag                    { color: $bahama;    }
   .cm-attribute              { color: $flush;     }
   .cm-header                 { color: $cerulean;  }
-  .cm-quote                  { color: $apple;      }
+  .cm-quote                  { color: $lima;      }
   .cm-hr                     { color: $nobel;     }
   .cm-link                   { color: $orchid;    }
   .cm-qualifier.cm-attribute { color: $flush;     }
@@ -399,11 +399,11 @@ code[class*=lang-] {
 }
 
 .static-code {
-  .cm-variable               { color: $apple;      }
+  .cm-variable               { color: $lima;      }
 }
 
 .cm-negative                 { color: $rose;      }
-.cm-positive                 { color: $apple;      }
+.cm-positive                 { color: $lima;      }
 .cm-header,
 .cm-strong                   {                    }
 .cm-em                       {                    }

data/app/assets/stylesheets/ratchet/{utility → enhancement}/_loader.scss

@@ -37,7 +37,7 @@
 .loader {
   font-size: 14px;
   color: $white;
-  position: fixed;
+  position: absolute;
   left: 0;
   top: 145px;
   width: 100%;

data/app/assets/stylesheets/ratchet/enhancement/_tooltip.scss

@@ -34,7 +34,6 @@
     content: attr(data-tooltip);
     color: $white;
     font-size: 14px;
-    font-weight: 300;
     line-height: 20px;
     padding: 10px 12px;
     max-width: 100vw;
@@ -130,11 +129,7 @@ article > p:first-of-type > [data-tooltip] {
 }
 
 .tooltip-offset {
-  @include tooltip($offset: 10px);
-}
-
-.tooltip-width {
-  @include tooltip($width: 220px);
+  @include tooltip($offset: 30px);
 }
 
 // [data-tooltip] {