ratchet_design 0.1.19 → 0.1.20

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

@@ -0,0 +1,125 @@
+/* ========================================================================== *
+ * Modal
+ * -------------------------------------------------------------------------- */
+
+/* ===================================== *
+ * Utility
+ * ------------------------------------- */
+
+$modal-padding: 3vw;
+
+// Animations
+@keyframes scale-up {
+  0%   { transform: translateZ(0) scale(0); }
+  100% { transform: translateZ(0) scale(1); }
+}
+
+@keyframes scale-down {
+  0%   { transform: translateZ(0) scale(1); }
+  100% { transform: translateZ(0) scale(0); }
+}
+
+// Modal button placeholder styles
+@mixin modal-button {
+  display: flex;
+  width:  vr(4); // 60px;
+  height: vr(4); // 60px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+/* ===================================== *
+ * Common
+ * ------------------------------------- */
+
+// Main modal
+[data-modal] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  color: $white;
+  overflow: auto;
+  padding: $modal-padding;
+
+  // Push immediate children down a bit
+  > * {
+    opacity: 0;
+    transform: translateY(vr(1));
+    transition:
+      opacity $duration,
+      transform $duration;
+  }
+
+  // Modal close button
+  [data-close-modal] {
+    @include modal-button;
+    position: absolute;
+    top:   $modal-padding;
+    right: $modal-padding;
+    color: $white;
+    font-size: 12px;
+    letter-spacing: .05em;
+    line-height: 1em;
+    border-radius: 50%;
+    transition: $duration;
+    -webkit-font-smoothing: subpixel-antialiased; // Webkit sucks so much
+    background: $steel;
+
+    // Active state
+    &:hover,
+    &:focus,
+    &:active {
+      color: $azure;
+      background: $white;
+    }
+
+    // SVG styles
+    svg {
+      flex: 0 1 auto;
+      margin: 2px 0 5px 0;
+    }
+  }
+
+  &:after {
+    content: '';
+    position: fixed;
+    background: rgba($space, .97);
+    border-radius: 50%;
+    z-index: -1;
+  }
+}
+
+[data-modal='in'],
+[data-modal='out'],
+[data-modal='visible'] {
+  z-index: 15;
+}
+
+[data-modal='in']:after {
+  animation: scale-up .5s cubic-bezier(0.7,0,0.3,1);
+}
+
+[data-modal='out']:after {
+  animation: scale-down .5s cubic-bezier(0.7,0,0.3,1);
+}
+
+[data-modal='visible'] > * {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+[data-modal-content] {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+}

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

@@ -0,0 +1,8 @@
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1; 
+  }
+}

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

@@ -2,109 +2,20 @@
  * a. Color module
  * -------------------------------------------------------------------------- */
 
-// 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
-$white:     #FFFFFF; // White
-
-// Passive (dark to light)
-$rhino:      #263D53;
-$bayou:      #445D75;
-$smalt:      #58728A;
-$bali:       #87A0B8;
-$boticelli:  #C3D4E4;
-$catskill:   #EDF5F7;
-
-// Active
-$azure:      #0094FD; // Blue
-$cornflower: #625ff9; // Blue purple
-$medium:     #8F52EA; // Purple
-$shocking:   #C60CA5; // Pink
-$shamrock:   #25C894; // Mint green
-$poppy:      #F69523; // Light orange
-$orange:     #F96623; // Orange
-$crimson:    #DD2F41; // Red
-// 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
-
-// Active color gradients
-$active-gradients: (
-  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)
-$passive-gradients: (
-  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, $cerulean, $byzantine, $mulberry, $majorelle, $caribbean, $grass, $gold, $tangelo, $rusty, $orchid;
-$active-color-names: azure, cerulean, byzantine, mulberry, majorelle, caribbean, grass, gold, tangelo, rusty, orchid;
-
-// Passive Variable List
-$passive-colors: $space, $shark, $steel, $pewter, $dolphin, $alabaster, $isabella, $smoke, $white;
-$passive-color-names: space, shark, steel, pewter, dolphin, alabaster, isabella, 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 {
+@each $name, $color in $colors {
   // Assign a `.[color]-text` class with a color of [color]
   .#{$name}-text {
     color: $color;
   }
 
   .#{$name}-bg {
-    &:before {
+    // &:before {
       background-color: $color;
-    }
+    // }
   }
 
   linearGradient##{$name} {
@@ -121,18 +32,18 @@ $full-solid-color-list: zip( join($active-color-names, $passive-color-names), jo
 }
 
 
-// Create active gradients
-@each $key, $val in $active-gradients {
-  $start: map-get($val, start);
-  $end:   map-get($val, end);
+// Create gradients
+@each $name, $colors in $gradients {
+  $start: nth($colors, 1);
+  $end:   nth($colors, 2);
 
-  // .#{$key}-bg {
-  //   &:before {
-  //     background: linear-gradient(135deg, #{$start}, #{$end}) left top/100% 100% no-repeat;
-  //   }
-  // }
+  .#{$name}-bg {
+    // &:before {
+      background: linear-gradient(135deg, #{$start}, #{$end}) left top/100% 100% no-repeat;
+    // }
+  }
 
-  linearGradient##{$key} {
+  linearGradient##{$name} {
     stop:nth-child(1) {
       stop-color: $start;
     }
@@ -141,7 +52,7 @@ $full-solid-color-list: zip( join($active-color-names, $passive-color-names), jo
     }
   }
 
-  linearGradient##{$key}-darken {
+  linearGradient##{$name}-darken {
     stop:nth-child(1) {
       stop-color: darken($start, 10%);
     }
@@ -150,7 +61,7 @@ $full-solid-color-list: zip( join($active-color-names, $passive-color-names), jo
     }
   }
 
-  linearGradient##{$key}-lighten {
+  linearGradient##{$name}-lighten {
     stop:nth-child(1) {
       stop-color: lighten($start, 10%);
     }
@@ -158,4 +69,13 @@ $full-solid-color-list: zip( join($active-color-names, $passive-color-names), jo
       stop-color: lighten($end, 10%);
     }
   }
-}
+
+  // linearGradient##{$name}-reverse {
+  //   stop:nth-child(1) {
+  //     stop-color: $end;
+  //   }
+  //   stop:nth-child(2) {
+  //     stop-color: $start;
+  //   }
+  // }
+}

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

@@ -1,15 +1,15 @@
 /* ========================================================================== *
- * a. Global module
+ * Global module
  * -------------------------------------------------------------------------- */
 
 /* ===================================== *
- * i. Color
+ * Color
  * ------------------------------------- */
 
 @import 'color';
 
 /* ===================================== *
- * ii. Fonts
+ * Fonts
  * ------------------------------------- */
 
 // Cap height declaration
@@ -107,14 +107,14 @@ $amp-font: Baskerville, Palatino, 'Book Antiqua', serif;
 $mono-font: 'Nitti', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
 
 /* ===================================== *
- * iii. Animations
+ * Animations
  * ------------------------------------- */
 
 // Transition duration
 $duration: .2s;
 
 /* ===================================== *
- * iv. Layout
+ * Layout
  * ------------------------------------- */
 
 // Border radius
@@ -126,6 +126,9 @@ $header-height: vr(6); // 90px
 // Universal padding unit
 $content-padding: vr(2); // 30px
 
+// Site Width
+$site-width: 1100px;
+
 // Angle
 
 $deg: 30deg;
@@ -174,27 +177,34 @@ $deg: 30deg;
   }
 }
 
+// Center an element to the viewport regardless of nesting
+@mixin center-to-viewport {
+  margin-left: calc(-50vw + 50%);
+  transform: translateX(calc(50vw - 50%));
+}
+
 // Modules with max-width and padding
-@mixin padded-module($width: 1100px, $padding: $content-padding, $nested: true) {
-  padding-left: calc(50vw - #{$width / 2});
-  padding-right: calc(50vw - #{$width / 2});
+@mixin padded-module($width: 1100px, $padding: $content-padding, $overflow: false, $offset: null) {
+  $half-width: if($overflow, 50vw, 50%);
+  $margin: if($offset, calc(-50vw + 50% + #{$offset / 2}), calc(-50vw + 50%));
+  $transform: if($offset, translateX(calc(50vw - 50% - #{$offset})), translateX(calc(50vw - 50%)));
 
-  @if $nested {
+  // Overflows container and center
+  @if $overflow {
     width: 100vw;
+    margin-left: $margin;
+    transform: $transform;
   }
 
+  padding-left: calc(#{$half-width} - #{$width / 2});
+  padding-right: calc(#{$half-width} - #{$width / 2});
+
   @media (max-width: $width + $padding * 2) {
     padding-left: $padding;
     padding-right: $padding;
   }
 }
 
-// Center an element to the viewport regardless of nesting
-@mixin center-to-viewport {
-  margin-left: calc(-50vw + 50%);
-  transform: translateX(calc(50vw - 50%));
-}
-
 // Width-agnostic module backgrounds
 @mixin cover-background($background: transparent, $offset: null) {
   &,
@@ -222,7 +232,7 @@ $deg: 30deg;
 }
 
 /* ===================================== *
- * v. Context
+ * Context
  * ------------------------------------- */
 
 // Normal link state mixin
@@ -273,26 +283,22 @@ $deg: 30deg;
 }
 
 /* ===================================== *
- * vi. Visibility
+ * Visibility
  * ------------------------------------- */
 
 // Visually hidden mixin
 @mixin hidden() {
-  position: absolute;
-  top: -9999px;
-  left: -9999px;
+  display: none !important;
 }
 
 // Visually hidden placeholder
-%hidden {
+.hidden, %hidden {
   @include hidden;
 }
 
 // Visually shown mixin
 @mixin shown() {
-  position: initial;
-  top: initial;
-  left: initial;
+  display: initial;
 }
 
 // Visually shown placeholder

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

@@ -9,6 +9,7 @@
 // Display breakpoints
 $breakpoint-xlg: 1500px;
 $breakpoint-lg: 1100px;
+$breakpoint-med: 950px;
 $breakpoint: 800px;
 $breakpoint-sm: 550px;
 $breakpoint-xsm: 400px;
@@ -19,7 +20,7 @@ $grid-no-gutter: 0;
 $grid-small-gutter: vr(2); // 30px
 $grid-large-gutter: vr(4); // 60px
 
- // Grid init mixin (use on parent elements)
+// Grid init mixin (use on parent elements)
 @mixin grid($direction: row) {
   display: flex;
   flex: 0 1 auto;
@@ -28,16 +29,22 @@ $grid-large-gutter: vr(4); // 60px
 }
 
 // Grid gutter mixin (use on parent elements)
-@mixin gutter($amount: 0) {
-  // margin-top:   -$amount;
-  // margin-left:   $amount * -.5;
-  // margin-right:  $amount * -.5;
+@mixin gutter($amount: 0, $both: off) {
+  margin-left:  $amount * -.5;
+  margin-right: $amount * -.5;
+
+  @if $both == on {
+    margin-top: -$amount;
+  }
 
   > * {
-    margin-bottom: 0;
-    margin-top:    $amount;
     padding-left:  $amount * .5;
     padding-right: $amount * .5;
+
+    @if $both == on {
+      margin-bottom: 0;
+      margin-top: $amount;
+    }
   }
 }
 
@@ -78,17 +85,13 @@ $grid-large-gutter: vr(4); // 60px
 @mixin span($cols: auto, $breakpoint: auto) {
 
   // Universal styles
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: flex-start;
-  // justify-content: center;
   flex: 0 0 auto;
   max-width: inherit;
 
   // Full width
   @if $cols == auto {
     flex-grow: 1;
-    flex-basis: 0;
+    flex-basis: 100%;
     width: 100%;
   }
 
@@ -127,19 +130,39 @@ $grid-large-gutter: vr(4); // 60px
 
   &.small-gutter {
     @include gutter($grid-small-gutter);
+
+    &-all {
+      @include gutter($grid-small-gutter, on);
+    }
   }
 
   &.large-gutter {
     @include gutter($grid-large-gutter);
+
+    &-all {
+      @include gutter($grid-large-gutter, on);
+    }
+  }
+
+  &.v-center {
+    align-items: center;
   }
 }
 
-$cell-sizes: (1:one, 2:two, 3:three, 4:four, 5:five, 6:six);
+$cell-sizes: (1:one, 2:two, 3:three, 4:four, 5:five, 6:six, 7:seven);
 
 @mixin grid-cell($num) {
   @for $i from 1 through length($cell-sizes) {
     .#{map-get($cell-sizes, $i)}-of-#{map-get($cell-sizes, $num)} {
-      @include span($i of $num);
+      @include span($i of $num, $breakpoint);
+
+      @media (max-width: $breakpoint) {
+        @include span(1 of 1);
+
+      //   &.spacer {
+      //     margin-bottom: vr(2);
+      //   }
+      }
     }
   }
 }
@@ -148,4 +171,118 @@ $cell-sizes: (1:one, 2:two, 3:three, 4:four, 5:five, 6:six);
 @include grid-cell(3);
 @include grid-cell(4);
 @include grid-cell(5);
-@include grid-cell(6);
+@include grid-cell(6);
+@include grid-cell(7);
+
+
+
+
+
+/* ========================================================================== *
+ * b. Grid module
+ * -------------------------------------------------------------------------- */
+
+/* ===================================== *
+ * i. Utilities
+ * ------------------------------------- */
+
+// // Grid init mixin (use on parent elements)
+// @mixin grid($direction: row) {
+//   display: flex;
+//   flex: 0 1 auto;
+//   flex-wrap: wrap;
+//   flex-direction: $direction;
+// }
+
+// // Grid gutter mixin (use on parent elements)
+// @mixin gutter($amount: 0, $both: off) {
+//   margin-left:  $amount * -.5;
+//   margin-right: $amount * -.5;
+
+//   @if $both == on {
+//     margin-top: -$amount;
+//   }
+
+//   > * {
+//     padding-left:  $amount * .5;
+//     padding-right: $amount * .5;
+
+//     @if $both == on {
+//       margin-bottom: 0;
+//       margin-top: $amount;
+//     }
+//   }
+// }
+
+// // Grid alignment mixin (use on parent elements)
+// @mixin align($x-axis: left, $y-axis: top) {
+
+//   // Map horizontal params
+//   $horizontal: (
+//     left:   flex-start,
+//     center: center,
+//     right:  flex-end
+//   );
+
+//   // Map vertical params
+//   $vertical: (
+//     top:    flex-start,
+//     middle: center,
+//     bottom: flex-end
+//   );
+
+//   // Assign appropriate horizontal property
+//   @if map-has-key($horizontal, $x-axis) {
+//     justify-content: map-get($horizontal, $x-axis);
+//   }
+
+//   // Assign appropriate vertical property
+//   @if map-has-key($vertical, $y-axis) {
+//     align-items: map-get($vertical, $y-axis);
+//   }
+// }
+
+// // Column span function (use for the maths)
+// @function span($cols) {
+//   @return nth($cols, 1) / nth($cols, 3) * 100%;
+// }
+
+// // Column span mixin (use on child elements)
+// @mixin span($cols: auto, $breakpoint: 34em) {
+
+//   // Universal styles
+//   flex: 0 0 auto;
+//   max-width: inherit;
+
+//   // Full width
+//   @if $cols == auto {
+//     flex-grow: 1;
+//     flex-basis: 0;
+//     width: 100%;
+//   }
+
+//   // 1 - 8 of 8 columns
+//   @elseif length($cols) > 1 {
+//     flex-basis: span($cols);
+//     width: span($cols);
+//   }
+
+//   // Explicit column width
+//   @else {
+//     flex-basis: $cols;
+//     width: $cols;
+//   }
+
+//   // Stack cells at breakpoint
+//   @media (max-width: $breakpoint) {
+//     flex-basis: 100%;
+//     width: auto;
+//     max-width: unset;
+//     margin-left: 0;
+//   }
+// }
+
+// // Column offset mixin (use on child elements)
+// @mixin offset($offset: 1) {
+//   margin-left: span($offset);
+// }

data/app/assets/svgs/ratchet/_icons/backup.svg

@@ -0,0 +1,9 @@
+<svg viewBox="0 0 37.8 34.6">
+<g fill="url(#azure)" opacity="0.5">
+	<polygon points="20.3,21.3 18.5,20.5 18.5,9 20.7,9 20.7,18.3 25.3,14.9 26.6,16.6 	"/>
+</g>
+<path fill="url(#azure)" d="M37.3,13.2c-1.1-4.5-3.9-8.3-7.8-10.7c-3.9-2.4-8.6-3.1-13.1-2C12,1.6,8.2,4.4,5.8,8.3l0,0
+	c-1.6,2.6-2.5,5.6-2.5,8.9H0l3,5.4l3,5.3l3-5.3l3.1-5.4H8.7c0-2.3,0.7-4.5,1.9-6.3c1.6-2.5,4.1-4.3,7.1-5.1c3.1-0.8,6.2-0.3,8.9,1.4
+	c2.7,1.6,4.6,4.2,5.4,7.3c0.8,3.1,0.3,6.2-1.4,8.9c-3.4,5.6-10.7,7.4-16.2,4l-2.8,4.7c2.8,1.7,5.9,2.5,8.9,2.5
+	c5.9,0,11.6-3,14.8-8.3C37.7,22.3,38.4,17.6,37.3,13.2z"/>
+</svg>

data/app/assets/svgs/ratchet/_icons/block.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 29.9 34.6">
+
+<polygon fill="url(#azure)" points="29.9,25.9 15,34.6 0,25.9 0,8.6 15,17.3 29.9,8.6 	"/>
+<polygon fill="url(#azure)" opacity="0.5" points="0,8.6 15,17.3 29.9,8.6 15,0 	"/>
+<path fill="url(#azure)" d="M19.7,7.5c-2.6,1.5-6.8,1.5-9.4,0C9,6.8,8.4,5.8,8.4,4.8v3.8c0,1,0.6,2,1.9,2.7
+	c2.6,1.5,6.8,1.5,9.4,0c1.3-0.7,1.9-1.7,1.9-2.7V4.8C21.6,5.8,20.9,6.8,19.7,7.5z"/>
+</svg>

data/app/assets/svgs/ratchet/_icons/compose-logomark.svg

@@ -0,0 +1,8 @@
+<svg fill="currentColor" viewBox="0 0 210 120" width="50" height="29">
+  <path d="M158.1 23.1h-.1l-38.8-22.6-38.3 22.3-39.3-22.8-41.6 24.2v44l80.3 46.8 38.4-22.2 39.4 22.8 41.9-24.2v-44l-41.9-24.3zm-.2 45.1l-32.9-19.1 33.2-19.4 32.9 19.3-33.2 19.2zm-77.9-38.8l33.2 19.2-32.8 19.1-33.1-19.3 32.7-19zm72.2-3l-32.5 18.9-33.1-19.2 32.6-19 33 19.3zm-77.5-.6l-6.7 3.9-27.1 15.3-32.3-19.2 33.1-19.2 33 19.2zm-68.9 4.8l32.5 19.6v34.6l-32.5-19.8v-34.4zm39 23l32.5 19.3v34.5l-32.5-19.3v-34.5zm77.3.4l33.1 19.5v34.2l-33.1-19.7v-34z"/>
+  <g opacity=".5">
+    <polygon points="44.8,88.2 77.3,107.3 77.3,72.9 44.8,53.6"/>
+    <polygon points="5.8,64.9 38.3,84.7 38.3,50.2 5.8,30.6"/>
+    <polygon points="122.1,88.1 155.2,107.8 155.2,73.5 122.1,54"/>
+  </g>
+</svg>