ratchet_design 0.1.12 → 0.1.13

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

@@ -7,7 +7,7 @@
  * ------------------------------------- */
 
 // Create an underlined link with cleared descenders
-@mixin inline-link($default-color: $capecod, $active-color: $cerulean, $background: $white) {
+@mixin inline-link($default-color: $space, $active-color: $caribbean, $background: $white) {
   background: linear-gradient(to bottom, transparent 50%, $active-color 50%) 0 91% / 2px 2px repeat-x;
   transition: color $duration;
   text-shadow:
@@ -65,6 +65,7 @@ h1 {
 }
 
 h2 {
+  font-weight: 600;
   font-size: 36px;
   line-height: 45px;
   padding-top: 13px;
@@ -73,6 +74,7 @@ h2 {
 
 h3 {
   font-size: 31px;
+  font-weight: 600;
   line-height: 45px;
   padding-top: 14px;
   margin-bottom: 16px;
@@ -80,12 +82,14 @@ h3 {
 
 h4 {
   font-size: 27px;
+  font-weight: 600;
   line-height: 45px;
   padding-top: 15px;
   margin-bottom: 15px;
 }
 
 h5 {
+  font-weight: 600;
   font-size: 24px;
   line-height: 30px;
   padding-top: 8px;
@@ -93,6 +97,7 @@ h5 {
 }
 
 h6 {
+  font-weight: 600;
   font-size: 21px;
   line-height: 30px;
   padding-top: 9px;
@@ -120,7 +125,7 @@ article p a {
 // Blockquotes
 blockquote {
   font-size: 28px;
-  color: $nobel;
+  color: $pewter;
   line-height: vr(3); // 45px
   border-top: 14px solid transparent;
   margin-bottom: 31px;
@@ -157,7 +162,7 @@ blockquote {
     font-weight: 700;
 
     a {
-      @include inline-link($capecod, $cerulean);
+      @include inline-link($shark, $azure);
     }
   }
 }
@@ -167,7 +172,7 @@ blockquote {
  * ------------------------------------- */
 
 // Bare inline text elements
-:not(p):not(li):not(dd):not(blockquote):not(small):not(strong) > {
+:not(p):not(li):not(dd):not(blockquote):not(small):not(strong):not(.suggestions li a) > {
   small {
     display: inline-block;
     line-height: vr(2); // 30px
@@ -224,7 +229,7 @@ sup {
 
 // Highlighted marks
 mark {
-  background: lighten($cerulean, 45);
+  background: lighten($azure, 45);
 }
 
 // Definitions & Abbreviations
@@ -233,7 +238,7 @@ abbr[title] {
   position: relative;
   cursor: help;
   font-style: normal;
-  border-bottom: 1px dashed $nobel;
+  border-bottom: 1px dashed $pewter;
 
   &:after,
   &:before {
@@ -254,7 +259,7 @@ abbr[title] {
     white-space: nowrap;
     padding: 2px 10px;
     border-radius: $radius;
-    background: $shark;
+    background: $space;
   }
 
   &:before {
@@ -265,7 +270,7 @@ abbr[title] {
     height: 0;
     border-style: solid;
     border-width: 0 5px 6px 5px;
-    border-color: transparent transparent $shark transparent;
+    border-color: transparent transparent $space transparent;
   }
 
   &:hover:after,
@@ -301,13 +306,13 @@ hr {
   border: 0;
   padding-top: vr(2); // 30px
   margin-bottom: vr(3); // 45px
-  box-shadow: 0 1px $alto;
+  box-shadow: 0 1px $alabaster;
   height: vr(1); // 15px
   line-height: vr(1); // 15px
 }
 
 hr.stars {
-  color: $nobel;
+  color: $pewter;
   box-shadow: none;
   text-align: center;
 
@@ -328,7 +333,7 @@ code,
 kbd,
 samp {
   font-family: $mono-font;
-  // color: $aluminum;
+  // color: $steel;
   direction: ltr;
   text-align: left;
   tab-size: 2;
@@ -343,8 +348,8 @@ pre {
   letter-spacing: -.015em;
   word-spacing: -.015em;
   border-radius: $radius;
-  background: $alabaster;
-  box-shadow: 0 0 0 1px $iron inset;
+  background: $smoke;
+  box-shadow: 0 0 0 1px $alabaster inset;
 }
 
 :not(pre) > code,
@@ -357,8 +362,8 @@ pre {
   white-space: pre-wrap;
   border-radius: $radius;
   padding: 2px 6px;
-  background: $alabaster;
-  box-shadow: 0 0 0 1px $iron inset;
+  background: $smoke;
+  box-shadow: 0 0 0 1px $alabaster inset;
 }
 
 /* ===================================== *
@@ -367,45 +372,45 @@ pre {
 
 pre[class*=lang-],
 code[class*=lang-] {
-  color: $aluminum;
+  color: $steel;
 }
 
 .cm-s-default {
-  .cm-keyword                { color: $bahama;    }
-  .cm-atom                   { color: $lightning; }
-  .cm-number                 { color: $rose;      }
-  .cm-def                    { color: $apple;      }
-  .cm-variable               { color: $flush;     }
-  .cm-variable-2             { color: $orchid;    }
-  .cm-variable-3             { color: $flush;     }
-  .cm-property               { color: $cerulean;  }
-  .cm-operator               { color: $nobel;     }
-  .cm-comment                { color: $nobel;     }
-  .cm-string                 { color: $cerulean;  }
-  .cm-string-2               { color: $apple;      }
-  .cm-meta                   { color: $nobel;     }
-  .cm-error                  { color: $punch;     }
-  .cm-qualifier              { color: $nobel;     }
-  .cm-builtin                { color: $bahama;    }
-  .cm-bracket                { color: $nobel;     }
-  .cm-tag                    { color: $bahama;    }
-  .cm-attribute              { color: $flush;     }
-  .cm-header                 { color: $cerulean;  }
-  .cm-quote                  { color: $apple;      }
-  .cm-hr                     { color: $nobel;     }
-  .cm-link                   { color: $orchid;    }
-  .cm-qualifier.cm-attribute { color: $flush;     }
-  .cm-error                  { color: $punch;     }
+  .cm-keyword                { color: $majorelle; }
+  .cm-atom                   { color: $gold;      }
+  .cm-number                 { color: $byzantine; }
+  .cm-def                    { color: $caribbean; }
+  .cm-variable               { color: $tangelo;   }
+  .cm-variable-2             { color: $mulberry;  }
+  .cm-variable-3             { color: $tangelo;   }
+  .cm-property               { color: $azure;     }
+  .cm-operator               { color: $pewter;    }
+  .cm-comment                { color: $pewter;    }
+  .cm-string                 { color: $azure;     }
+  .cm-string-2               { color: $caribbean; }
+  .cm-meta                   { color: $pewter;    }
+  .cm-error                  { color: $rusty;     }
+  .cm-qualifier              { color: $pewter;    }
+  .cm-builtin                { color: $majorelle; }
+  .cm-bracket                { color: $pewter;    }
+  .cm-tag                    { color: $majorelle; }
+  .cm-attribute              { color: $tangelo;   }
+  .cm-header                 { color: $azure;     }
+  .cm-quote                  { color: $caribbean; }
+  .cm-hr                     { color: $pewter;    }
+  .cm-link                   { color: $mulberry;  }
+  .cm-qualifier.cm-attribute { color: $tangelo;   }
+  .cm-error                  { color: $rusty;     }
 }
 
 .static-code {
-  .cm-variable               { color: $apple;      }
+  .cm-variable               { color: $caribbean; }
 }
 
-.cm-negative                 { color: $rose;      }
-.cm-positive                 { color: $apple;      }
+.cm-negative                 { color: $byzantine; }
+.cm-positive                 { color: $caribbean; }
 .cm-header,
 .cm-strong                   {                    }
 .cm-em                       {                    }
 .cm-link                     {                    }
-.cm-invalidchar              { color: $punch;     }
+.cm-invalidchar              { color: $rusty;     }

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

@@ -0,0 +1,83 @@
+// Apply validation styles to inputs & textareas
+
+label.valid {
+  color: $apple;
+
+  input, select, textarea {
+    color: currentColor;
+    -webkit-text-fill-color: currentColor;
+    box-shadow: input-shadow( $apple );
+
+    @include input-active {
+      box-shadow: input-focus-shadow( $apple )
+    }
+  }
+}
+
+label.invalid {
+  color: $rusty;
+
+  input, select, textarea {
+    color: currentColor;
+    -webkit-text-fill-color: currentColor;
+    box-shadow: input-shadow( $rusty );
+
+    @include input-active {
+      box-shadow: input-focus-shadow( $rusty )
+    }
+  }
+}
+
+// Validation message animation declaration
+@keyframes scale-fade-in {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -6px) scale(.5);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate(-50%, 6px) scale(1);
+  }
+}
+
+// Inline validation messages
+.validation-message {
+  position: absolute;
+  left: 50%;
+  top: 100%;
+  width: 325px;
+  max-width: 100vw;
+  z-index: 3;
+  text-align: center;
+  transform: translate(-50%, 6px) scale(1);
+  transform-origin: center top;
+  animation: scale-fade-in $duration ease-out;
+
+  // Message bubble (also a hack to maintain proper word wrap)
+  p {
+    display: inline-block;
+    margin: 0;
+    padding: 12px 18px;
+    border-radius: $radius;
+    background: $rusty;
+    color: $white;
+    font-size: 14px;
+    line-height: 21px;
+
+    // Message bubble triangle
+    &:before {
+      content: '';
+      position: absolute;
+      left: 50%;
+      margin-left: -6px;
+      bottom: 100%;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 0 6px 6px 6px;
+      border-color: transparent transparent $rusty transparent;
+    }
+  }
+}
+

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

@@ -1,44 +1,44 @@
-/* ========================================================================== *
- * Hero module
- * -------------------------------------------------------------------------- */
+// /* ========================================================================== *
+//  * Hero module
+//  * -------------------------------------------------------------------------- */
 
-/* ===================================== *
- * a. Utilities
- * ------------------------------------- */
+// /* ===================================== *
+//  * a. Utilities
+//  * ------------------------------------- */
 
-// Hero banners
-@mixin hero($height: tall, $color: $white, $background: $cerulean linear-gradient(to bottom right, $cerulean, mix($orchid, $cerulean, 75%)) no-repeat) {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  color: $color;
-  padding-top: vr(3);     // 45px
-  @include padded-module; // 1100px width & 30px padding
-  @include cover-background($background);
+// // Hero banners
+// @mixin hero($height: tall, $color: $white, $background: $azure linear-gradient(to bottom right, $azure, mix($mulberry, $azure, 75%)) no-repeat) {
+//   display: flex;
+//   flex-direction: column;
+//   align-items: center;
+//   justify-content: center;
+//   text-align: center;
+//   color: $color;
+//   padding-top: vr(3);     // 45px
+//   @include padded-module; // 1100px width & 30px padding
+//   @include cover-background($background);
 
-  // Height conditional
-  @if $height == short {
-    min-height: vr(24);  // 360px
-  } @else if $height == tall {
-    min-height: vr(36);  // 540px
-  } @else if $height == full {
-    min-height: 100vh;   // Full viewport
-  } @else {
-    min-height: $height; // Manually set
-  }
+//   // Height conditional
+//   @if $height == short {
+//     min-height: vr(24);  // 360px
+//   } @else if $height == tall {
+//     min-height: vr(36);  // 540px
+//   } @else if $height == full {
+//     min-height: 100vh;   // Full viewport
+//   } @else {
+//     min-height: $height; // Manually set
+//   }
 
-  // Remove botton margin from buttons
-  a {
-    @include button($fill: off, $bevel: on, $color: $white);
-    margin: 0;
-  }
+//   // Remove botton margin from buttons
+//   a {
+//     @include button($fill: off, $bevel: on, $color: $white);
+//     margin: 0;
+//   }
 
-  // Smaller text for paragraphs
-  p {
-    font-size: 16px;
-    max-width: 450px;
-    margin-bottom: 35px;
-  }
-}
+//   // Smaller text for paragraphs
+//   p {
+//     font-size: 16px;
+//     max-width: 450px;
+//     margin-bottom: 35px;
+//   }
+// }

data/app/assets/stylesheets/ratchet/utility/_color.scss

@@ -0,0 +1,135 @@
+/* ========================================================================== *
+ * a. Color module
+ * -------------------------------------------------------------------------- */
+
+// Passive colors
+$space:     #263d53; // Blue-Black
+$shark:     #445d75; // Dark Blue-Gray
+$steel:     #58728a; // Blue-Gray
+$pewter:    #87a0b8; // Light Blue-Gray
+$alabaster: #cbd6e1; // Light Blue
+$isabella:  #dde8eb; // Off-Cream
+$smoke:     #eff4f6; // Cream
+$white:     #FFFFFF; // White
+
+// Active colors
+$azure:     #0094fd; // Blue
+$cerulean:  #0FA7DB; // Softer Blue
+$byzantine: #c60ca5; // Magenta
+$mulberry:  #8f52ea; // Purple
+$majorelle: #625ff9; // Indigo
+$grass:     #2ac84f; // Green
+$apple:     #3FBE3E; // Very Green
+$caribbean: #25c894; // Mint
+$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
+
+// Gradient (colors)
+$earthrise:   ( start: $azure,       end: $majorelle );  // Blue to Indigo  //  PostgreSQL
+$royalty:     ( start: $majorelle,   end: $mulberry );   // Indigo to Purple  //  Elasticsearch
+$lagoon:      ( start: $azure,       end: $caribbean );  // Blue to Mint  // RethinkDB
+$pearlescent: ( start: $azure,       end: $mulberry );   // Blue to Purple  //  MySQL
+$firestorm:   ( start: $gold,        end: $tangelo );    // Yellow to Orange  //  RabbitMQ
+$sunset:      ( start: $tangelo,     end: $rusty );      // Orange to Red  //  Redis
+$berries:     ( start: $byzantine,   end: $rusty );      // Magenta to Red  //  etcd
+$supernova:   ( start: $byzantine,   end: $mulberry );   // Magenta to Purple  //  ScyllaDB
+$emerald:     ( start: $caribbean,   end: $grass );      // Mint to Green  //  MongoDB
+$aurora:      ( start: $grass,       end: $mulberry );   // Green to Indigo
+$tidal:       ( start: $cobalt,      end: $capri );      // Hero Gradient Only
+
+// Gradient (passive)
+$blackhole:   ( start: $space,       end: $steel );      // Hero Gradient Only
+$midnight:    ( start: $shark,       end: $pewter );     // Hero Gradient Only
+$shady:       ( start: $steel,       end: $alabaster );  // Hero Gradient Only
+$grayscale:   ( start: $pewter,      end: $isabella );   // Hero Gradient Only
+$polar:       ( start: $alabaster,   end: $smoke );      // Hero Gradient Only
+$eggshell:    ( start: $isabella,    end: $white );      // Hero Gradient Only
+
+
+// Translucent colors
+$translucent-white: rgba($white, .5);
+
+// Active Variable List
+$active-colors: $azure, $byzantine, $mulberry, $majorelle, $caribbean, $grass, $gold, $tangelo, $rusty;
+$active-color-names: azure, byzantine, mulberry, majorelle, caribbean, grass, gold, tangelo, rusty;
+
+// Passive Variable List
+$passive-colors: $space, $shark, $steel, $pewter, $alabaster, $smoke, $white;
+$passive-color-names: space, shark, steel, pewter, alabaster, smoke, white;
+
+// Active Gradient Variable List
+$gradient-colors: $earthrise, $royalty, $lagoon, $pearlescent, $firestorm, $sunset, $berries, $supernova, $emerald, $aurora, $tidal, $blackhole, $midnight, $shady, $grayscale, $polar, $eggshell;
+$gradient-color-names: earthrise, royalty, lagoon, pearlescent, firestorm, sunset, berries, supernova, emerald, aurora, tidal, blackhole, midnight, shady, grayscale, polar, eggshell;
+
+// Active and Passive List
+$full-solid-color-list: zip( join($active-color-names, $passive-color-names), join($active-colors, $passive-colors));
+
+// Solid color classes
+@each $name, $color in $full-solid-color-list {
+  // Assign a `.[color]-text` class with a color of [color]
+  .#{$name}-text {
+    color: $color;
+  }
+
+  .#{$name}-bg {
+    &:before {
+      background-color: $color;
+    }
+  }
+
+  linearGradient##{$name} {
+    stop:nth-child(1) {
+      stop-color: #{$color};
+    }
+  }
+}
+
+@for $i from 1 through length($gradient-colors) {
+
+  $gradient: nth($gradient-colors, $i);
+  $start-color: map_get( $gradient, start );
+  $end-color: map_get( $gradient, end );  
+
+  .#{nth($gradient-color-names, $i)}-bg {
+    &:before {
+      background: linear-gradient(135deg, $start-color, $end-color) left top/100% 100% no-repeat;
+    }
+  }
+
+  linearGradient##{nth($gradient-color-names, $i)} {
+    stop:nth-child(1) {
+      stop-color: $start-color;
+    }
+    stop:nth-child(2) {
+      stop-color: $end-color;
+    }
+  }
+
+  linearGradient##{nth($gradient-color-names, $i)}-darken {
+    stop:nth-child(1) {
+      stop-color: darken($start-color, 10%);
+    }
+    stop:nth-child(2) {
+      stop-color: darken($end-color, 10%);
+    }
+  }
+
+  linearGradient##{nth($gradient-color-names, $i)}-lighten {
+    stop:nth-child(1) {
+      stop-color: lighten($start-color, 10%);
+    }
+    stop:nth-child(2) {
+      stop-color: lighten($end-color, 10%);
+    }
+  }
+}

data/app/assets/stylesheets/ratchet/utility/_global.scss

@@ -6,43 +6,8 @@
  * i. Color
  * ------------------------------------- */
 
-// Passive colors
-$shark:     #1A1B1C; // Black
-$capecod:   #3A3B3C; // Dark Gray
-$aluminum:  #828384; // Gray
-$nobel:     #B7B7B7; // Light Gray
-$alto:      #D1D1D1; // Silver
-$iron:      #E4E5E7; // Cream
-$alabaster: #FAFAFA; // Off-white
-$white:     #FFFFFF; // White
-
-// Active colors
-$bahama:    #006690; // Navy
-$cerulean:  #0FA7DB; // Blue
-$apple:     #3FBE3E; // Green
-$lightning: #FCB827; // Yellow
-$flush:     #FF7C00; // Orange
-$punch:     #DD3340; // Red
-$rose:      #F248A5; // Pink
-$orchid:    #A346CE; // Purple
-
-// Product-specific colors
-$fern:        #58AA3F; // MongoDB
-$jellybean:   #267187; // RethinkDB
-$cardinal:    #C8212E; // Redis
-$jungle:      #2CAA9E; // Elasticsearch
-$regal:       #004C72; // InfluxDB
-$shakespeare: #57A5D1; // Etcd
-$jaffa:       #EB8E3E; // RabbitMQ
-
-// Banner-specific colors
-$lochmara:    #008BC3; // Default
-$akaroa:      #D2C9A7; // Error
-$turquoise:   #5CC6E4; // NTTW
-$terracotta:  #A81C27; // Thanksgiving
-
-// Translucent colors
-$translucent-white: rgba($white, .5);
+@import 'color';
+
 
 /* ===================================== *
  * ii. Fonts
@@ -81,7 +46,7 @@ $vr-base-unit: 15px;
 }
 
 // Vertical rhythm
-$base-size: 18px;
+$base-size: 15px;
 $base-height: vr(2); // 30px
 
 // Fonts stacks
@@ -109,6 +74,10 @@ $header-height: vr(6); // 90px
 // Universal padding unit
 $content-padding: vr(2); // 30px
 
+// Angle
+
+$deg: 30deg;
+
 // Repeat a `$string` and number of `$times`
 @function repeat-string($string, $times) {
   $result: '';
@@ -128,6 +97,10 @@ $content-padding: vr(2); // 30px
   @return nth($list, length($list));
 }
 
+@function contains($list,$var) {
+    @return (null != index($list, $var));
+}
+
 // Collapse top and/or bottom margin and/or padding from module
 @mixin collapse($type: both, $direction: both, $level: 1) {
   $type-selector: if($type == both, (margin, padding), $type);
@@ -168,8 +141,16 @@ $content-padding: vr(2); // 30px
     width: 100vw;
     position: absolute;
     left: calc(-50vw + 50%);
-    background: $background;
     z-index: -1;
+  
+
+    @if contains($gradient-colors, $background) {
+      $start-color: map_get( $background, start );
+      $end-color: map_get( $background, end );
+      background: linear-gradient(135deg, $start-color, $end-color) left top/100% 100% no-repeat;
+    } @else {
+      background: $background;
+    }
 
     // Set top offset (if present)
     @if $offset != null {
@@ -204,7 +185,7 @@ $content-padding: vr(2); // 30px
 // Between widths media query mixin
 @mixin between($small-width, $large-width) {
   $large-width: $large-width - 1;
-  @media (max-width: $large-width) and (min-width: $small-width) {
+  @media (min-width: $small-width) and (max-width: $large-width) {
     @content;
   }
 }

data/app/assets/stylesheets/ratchet/utility/_loader.scss

@@ -106,4 +106,4 @@
   line-height: 52px;
   text-align: center;
   margin: -25px 0 0 -25px;
-}
+}

data/app/helpers/ratchet/application_helper.rb

@@ -16,6 +16,11 @@ module Ratchet
       content_for :top_nav, &block
     end
 
+    # Set custom top navigation for app links
+    def app_nav(&block)
+      content_for :app_nav, &block
+    end
+
     # Blank slate layout
     def blank(&block)
       content_for :blank, &block
@@ -42,21 +47,22 @@ module Ratchet
     end
 
     # Set custom page selector class
-    def page_class(*classes)
-      @classes = [] if @classes.nil?
-      @classes += classes
-      @classes.uniq!
-      nil
+    def selector(selector = nil)
+      selector ? content_for(:selector) { selector } : content_for(:selector).presence
     end
 
     # Consolidated page class output
-    def page_classes
-      page_class = @classes.map(&:to_s).join(" ") rescue nil
-      parts = request.path.split("/").reject(&:blank?).reject{|s| s.match(/\A[0-9]+(\.[0-9]+)?\z/)}
-      [ parts.last, page_class ].reject(&:blank?).join(" ")
+    def page_class( classnames = nil )
+      if ( classnames )
+        @page_classes ||= ''
+        @page_classes = @page_classes + ' ' + classnames
+        @page_classes.strip!
+      else
+        @page_classes || ''
+      end
     end
 
-    # Main section class output
+    # Consolidated page class output
     def main_class( classnames = nil )
       if ( classnames )
         @main_classes ||= ''