ratchet_design 0.1.12 → 0.1.13

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: dc99e2c25f82c3a23a552194e2bbfdd1a6c74aa2
-  data.tar.gz: 58144f1e8dfd925c152ae286910df228be26f8b1
+  metadata.gz: bf3b0a96221d6598ec994393ab364e5654dce97d
+  data.tar.gz: 0209b1415a7f270d57a129df5cbffdaa271c44fc
 SHA512:
-  metadata.gz: c121fb3c5243341fa74686b74952a4965130a4df607edf3225ebfbdf650f38a72f3db0d997c1173f37f1f1005724d7d2303e417d02e5a82a10bd76a57c67bef5
-  data.tar.gz: 329b50cbaecafc123722ae1ef965a38ed1d49c2a04e2dddecfc4979b0bc7abeacfc21a999ab62c4ac0d3538d5f1af768ae9fb61cb59e971b52c90d1a76cae794
+  metadata.gz: 39dafdfaf803fa32f81fc1dc90f9caa2e263158179d2b97babed02d8e63a0a13a7f9130bcafb89d5119c624e005b32c3dcca2f350e73849887a111f3e4d851e4
+  data.tar.gz: fe1a872b9181fd712f5d59291e216968d873fd5bdc641e42772aeb26bf4e0213605b04a0ea407201b11bf91fbe3c326c3fe3cfc33aa95f7b49f926f951601d0c

data/app/assets/javascripts/ratchet/base/form.js

@@ -59,7 +59,7 @@ var form = function( element, settings ) {
       // Simply add the `tick-label` classname
       labelParent.classList.add( 'tick-label' );
 
-    // Otherwise
+      // Otherwise
     } else {
 
       // Wrap the element properly
@@ -69,7 +69,7 @@ var form = function( element, settings ) {
     }
 
     // And add empty span to label
-    elem.insertAdjacentHTML( 'afterend', '<span></span>' );
+    elem.insertAdjacentHTML( 'afterend', '<span class="tick-label"></span>' );
 
   }
 
@@ -89,6 +89,12 @@ var form = function( element, settings ) {
   // Range input hander function
   function rangeHandler( event ) {
 
+    // Define local variable(s)
+    var currValue  = rangeEls.value,
+        maxValue   = rangeEls.max,
+        minValue   = rangeEls.min,
+        percValue  = currValue / maxValue * 100;
+
     // Define target element
     var element = ( event.target ) ? event.target : event;
 
@@ -101,7 +107,7 @@ var form = function( element, settings ) {
     var percValue = ( element.max ) ? element.value / element.max * 100 : element.value / 100 * 100;
 
     // Style bar accordingly
-    element.style.backgroundImage = 'linear-gradient(90deg, #009DDC ' + percValue + '%, #D1D1D1 ' + percValue + '%)';
+    element.style.backgroundImage = 'linear-gradient(90deg, #c3d4e4 ' + percValue + '%, #ffffff ' + percValue + '%)';
 
   }
 

data/app/assets/javascripts/ratchet/base/sync-input-value.js

@@ -1,30 +1,21 @@
 var toolbox = require( 'compose-toolbox' )
 var Event = toolbox.event
-var textSelectors = 'textarea, input[type=url], input[type=tel], input[type=text], input[type=email], input[type=number], input[type=password]'
-
-Event.bubbleFormEvents()
-
-function textInputs() {
-  return document.querySelectorAll( textSelectors )
-}
+var textSelectors = 'textarea, input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=hidden]):not([type=submit]):not([type=image]):not([type=reset])'
 
 function syncValue( input ) {
 
   // Allow calling from event handler
-  if ( input.target ) { input = input.target }
-
-  // If element only contains whitespace, strip value
-  if ( !input.value.replace( /\s/g, '' ).length ) { input.value = ''; }
-
-  input.setAttribute( 'value', input.value )
+  input = ( input.target || input )
 
+  // If element is empty (or contains only whitespace)
+  // Add empty class
+  input.classList.toggle( 'empty', !input.value.trim().length )
 }
 
+// Initialize input state
 Event.change( function() {
-
-  // Ensure that all inputs have a value
-  toolbox.each( textInputs(), syncValue )
-
+  toolbox.each( document.querySelectorAll( textSelectors ), syncValue )
 })
 
-Event.on( document, 'blur', 'input', syncValue )
+// Set input state on keyup (debounced)
+Event.on( document, 'keyup', textSelectors, Event.debounce( syncValue, 100 ) )

data/app/assets/javascripts/ratchet/core.js

@@ -1,6 +1,7 @@
 // Utility modules
-var loadFont    = require( './utility/load_font' )
-var loadScript  = require( './utility/load_script' )
+var loadFont    = require( './utility/load_font' );
+var loadScript  = require( './utility/load_script' );
+var toggler     = require('compose-toggler')
 
 // Base modules
 var mobileMenu  = require( './base/mobilemenu' )
@@ -45,7 +46,10 @@ require( 'codemirror/addon/edit/matchbrackets' )
 rangeTouch.set("thumbWidth", 20);  // Annoying hack to make input ranges work smoothly on touch devices
 
 event.scroll.disablePointer()      // disable pointer events on scroll for performance (to avoid extra repaints)
-event.resize.disableAnimation()    // disable animation on resize for performance (to avoid extra repaints)
+
+// This seems to trigger animations whenever it is turned on again
+// So I've disabled it for now
+//event.resize.disableAnimation()    // disable animation on resize for performance (to avoid extra repaints)
 
 // Trigger these events each time the page loads
 event.change( function() {
@@ -65,11 +69,13 @@ var ratchet = toolbox.merge( {
   loader      : loader,
   mobileMenu  : mobileMenu,
   form        : form,
+  toggler     : toggler,
   validation  : formUp.validate,
   waypoints   : waypoints,
   notice      : notice,
   sticky      : sticky,
   lightbox    : lightbox,
+  //mapbox      : mapbox,
   esvg        : esvg
 }, toolbox )
 

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

@@ -9,7 +9,7 @@
 var toolbox = require( 'compose-toolbox' ),
     Event   = toolbox.event,
     delay   = toolbox.delay,
-    loader  = require( '../utility/loader' );
+    loader  = require( 'compose-loader' )
 
 // Public API function
 var lightbox = function( element, settings ) {
@@ -26,8 +26,8 @@ var lightbox = function( element, settings ) {
   options    = toolbox.merge( defaults, settings ),
   selector   = document.querySelector( element ),
   widthQuery = window.matchMedia( '(max-width: ' + options.initWidth + ')' ),
-  spinner    = loader({ loadingMessage: 'Loading image', failureMessage : 'No image found' }),
   docBody    = document.body,
+  spinner    = loader.new({ loading: 'Loading image', failure : 'No image found' }),
   tempImg;
 
   // Only run when selectors exist
@@ -57,7 +57,7 @@ var lightbox = function( element, settings ) {
     if ( event && event.target.tagName === 'IMG' ) return false;
 
     // Hide the spinner
-    spinner.hide();
+    spinner.remove();
 
     // Remove active lightbox class from body
     docBody.classList.remove( 'lightbox-active' );
@@ -74,7 +74,7 @@ var lightbox = function( element, settings ) {
   function loadPending( target ) {
 
     // Show loading icon
-    spinner.show( 'pending' );
+    spinner.loading();
 
     // Set temp image source appropriately
     tempImg.src = target.parentNode.href;
@@ -88,7 +88,7 @@ var lightbox = function( element, settings ) {
   function loadSuccess() {
 
     // Hide the spinner
-    spinner.hide();
+    spinner.remove();
 
     // Bada bing, bada boom
     tempImg.classList.add( 'loaded' );
@@ -102,7 +102,7 @@ var lightbox = function( element, settings ) {
     delay( function() {
 
       // Show spinner failure state
-      spinner.show( 'failure' );
+      spinner.failure();
 
     }, 1000 );
 

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

@@ -0,0 +1,48 @@
+/**
+ * LoadScript 0.0.1
+ * Load external JavaScript function
+ * @author Matt Gillespie (@SaveTheTweets)
+ **/
+
+// Tooltips for deployment locations
+// var myLayer = L.mapbox.featureLayer().addTo(map);
+
+// var geojson = {
+//     type: 'FeatureCollection',
+//     features: [{
+//         type: 'Feature',
+//         properties: {
+//             title: 'Washington, D.C.',
+//             'marker-color': '#f86767',
+//             'marker-size': 'large',
+//             'marker-symbol': 'star',
+//             url: 'http://en.wikipedia.org/wiki/Washington,_D.C.'
+//         },
+//         geometry: {
+//             type: 'Point',
+//             coordinates: [-77.03201, 38.90065]
+//         }
+//     },
+//     {
+//         type: 'Feature',
+//         properties: {
+//             title: 'Baltimore, MD',
+//             'marker-color': '#7ec9b1',
+//             'marker-size': 'large',
+//             'marker-symbol': 'star',
+//             url: 'http://en.wikipedia.org/wiki/Baltimore'
+//         },
+//         geometry: {
+//             type: 'Point',
+//             coordinates: [-76.60767, 39.28755]
+//         }
+//     }]
+// };
+
+// myLayer.setGeoJSON(geojson);
+// myLayer.on('mouseover', function(e) {
+//     e.layer.openPopup();
+// });
+// myLayer.on('mouseout', function(e) {
+//     e.layer.closePopup();
+// });

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

@@ -10,14 +10,16 @@
 @import 'base/media';
 @import 'base/form';
 @import 'base/multistep-form';
+@import 'base/validation';
+@import 'base/label-placeholder';
 @import 'base/table';
 @import 'base/document';
+@import 'base/section';
 
 // Enhancement modules
 @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/lightbox';

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

@@ -26,7 +26,7 @@
 }
 
 // Resizable / colorable buttons
-@mixin button($color: $cerulean, $size: normal, $fill: on, $bevel: off) {
+@mixin button($color: $azure, $size: normal, $fill: on, $bevel: off) {
 
   // Define default variables
   $font-size: 16px;
@@ -38,19 +38,19 @@
 
   // Define color-based variables
   @if $color == primary {
-    $color: $cerulean;
+    $color: $azure;
   } @else if $color == secondary {
-    $color: $flush;
+    $color: $mulberry;
   } @else if $color == success {
-    $color: $apple;
+    $color: $caribbean;
   } @else if $color == failure {
-    $color: $punch;
+    $color: $rusty;
   }
 
   // Define size-based variables
   @if $size == small {
-    $font-size: 13px;
-    $padding: 3px 14px 0;
+    $font-size: 14px;
+    $padding: 3px 14px;
     $margin-top: 15px;
     $margin-bottom: 20px;
   } @else if $size == large {
@@ -76,7 +76,7 @@
   margin-top: $margin-top;
   margin-bottom: $margin-bottom;
   transition: $duration;
-  border-radius: $border-radius;
+  // border-radius: $border-radius;
 
   // Default
   &,
@@ -84,7 +84,8 @@
     @if $fill == on {
       color: $white;
       background: $color;
-      border: 1px solid darken($color, 3);
+      border: none;
+      // border: 1px solid darken($color, 3);
     } @else {
       color: $color;
       background: transparent;
@@ -99,9 +100,9 @@
     @if $fill == on {
       color: $white;
       background: darken($color, 3);
-      border: 1px solid darken($color, 3);
+      border: none;
     } @else if $fill == off and $color == $white {
-      color: $cerulean;
+      color: $azure;
       background: $color;
     } @else {
       color: $white;
@@ -111,9 +112,9 @@
 
   // Disabled
   &[disabled] {
-    color: $nobel;
-    background: $iron;
-    border-color: $alto;
+    // color: $smoke;
+    background: lighten($color, 33);
+    // border-color: $alabaster;
     text-shadow: none;
     pointer-events: none;
   }

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

@@ -7,7 +7,11 @@
  * ------------------------------------- */
 
 // Point at which mobile menu is visible
+$breakpoint-xlg: 1500px;
+$breakpoint-lg: 1100px;
 $breakpoint: 800px;
+$breakpoint-sm: 550px;
+$breakpoint-xsm: 400px;
 
 // Transparent headers (for use with hero banners)
 @mixin transparent-header {
@@ -26,16 +30,15 @@ $breakpoint: 800px;
 
 // Transparent header extendable placeholder
 %transparent-header {
-  @include transparent-header;
-}
+  @include transparent-header; }
 
 // Header link styles
 %header-link {
   cursor: pointer;
   flex-shrink: 0;
-  font-size: 13px;
-  font-weight: 700;
-  text-transform: uppercase;
+  font-size: 14px;
+  font-weight: 400;
+  // text-transform: uppercase;
 }
 
 // Logo home link styles
@@ -53,6 +56,7 @@ $breakpoint: 800px;
 // Header button styles
 %header-button {
   @include button($size: small, $color: $white, $fill: off, $bevel: on);
+  font-weight: 400;
   margin-top: 0;
   margin-bottom: 0;
 }
@@ -130,10 +134,18 @@ body {
   display: flex;
   min-height: 100vh;
   flex-direction: column;
-  color: $capecod;
-  font-weight: 300;
+  color: $space;
+  font-weight: 400;
   font-size: $base-size;
   line-height: $base-height;
+  overflow-x: hidden;
+
+  a,
+  input,
+  a:hover,
+  input:hover {
+    transition: all $duration ease;
+  }
 }
 
 /* ===================================== *
@@ -148,7 +160,7 @@ header[role=banner] {
   z-index: 12;
   color: $white;
   @include padded-module; // 1100px width & 30px padding
-  @include cover-background($cerulean linear-gradient(to bottom right, $cerulean, mix($orchid, $cerulean, 75%)) no-repeat fixed);
+  @include cover-background($azure linear-gradient(to bottom right, $azure, mix($mulberry, $azure, 75%)) no-repeat fixed);
 
   a {
     @extend %header-link;
@@ -234,7 +246,7 @@ header[role=banner] > nav[role=navigation] {
     header[role=banner] > nav[role=navigation] {
       opacity: 1;
       transform: translateX(0);
-      background: rgba($shark, .95);
+      background: rgba($space, .95);
       transition:
         .5s opacity,
         .5s background;
@@ -254,66 +266,18 @@ main {
 }
 
 /* ===================================== *
- * vii. Footer
+ * vii. Ratchet Footer
  * ------------------------------------- */
 
 // Main site footer
 footer[role=contentinfo] {
-  color: $nobel;
+  color: $pewter;
+  font-size: vr(1);
   @include padded-module; // 1100px width & 30px padding
-  @include cover-background($capecod);
-}
+  @include cover-background($shark);
 
- // footer[role="contentinfo"] {
-//   width: 100%;
-//   color: $aluminum;
-//   font-size: .778em;
-
-//   .footer-nav {
-//     // @extend %column-container;
-//   }
-
-//   dl {
-//     // @include one-of-four(false);
-
-//     @media (max-width: 720px) {
-//       // @include one-of-two(false);
-//     }
-//   }
-
-//   dt {
-//     @extend %caps;
-//     color: $white;
-//     margin-bottom: .5rem;
-//   }
-
-//   dd > a {
-//     display: inline;
-//     font-weight: 700;
-//     @include underlined-link(inherit, $white);
-
-//     &:after {
-//       content: '\A';
-//       white-space: pre;
-//     }
-//   }
-
-//   // Social icons
-//   .social-nav {
-//     margin-top: 1.5rem;
-//     @extend %social-icons;
-
-//     a {
-//       margin-bottom: 5px;
-//       @include rounded-btn($aluminum, $cerulean, $white, 30px);
-//     }
-//   }
-
-//   // Copyright
-//   p {
-//     font-size: .857em;
-//     text-align: center;
-//     margin-top: 40px;
-//     margin-bottom: 40px;
-//   }
-// }
+  > * {
+    @include grid;
+    padding: vr(3) 0;
+  }
+}