ratchet_design 0.1.12 → 0.1.13

data/app/assets/stylesheets/ratchet/base/_label-placeholder.scss

@@ -0,0 +1,97 @@
+@mixin label-placeholder {
+  // Scoped variables
+  $font-size:  16px;
+  $padding-x:  12px;
+  $padding-y:   9px;
+  $distance-y: -23px;
+  $distance-x: 0;
+  $scale:      .875;
+  $height:     50px;
+  $duration: .2s;
+
+  // Input labels
+  label.placeholder-label {
+
+    padding-top: 0;
+    line-height: vr(2);
+    background: $white;
+    font-size: $font-size;
+
+    // Nested text-based inputs
+    > input,
+    > textarea {
+      margin-top: 5px;
+    }
+
+    // Hide input placeholder text
+    ::placeholder {
+      opacity: 0;
+      color: transparent;
+    }
+
+    // Default active color
+    :not(.valid):not(.invalid) > {
+      textarea, input {
+        &:focus + span,
+        &:active + span {
+          color: $steel;
+        }
+      }
+    }
+    
+    // Inputs
+    textarea, input {
+      z-index: 1;
+      margin: 0;
+      font-size: inherit;
+      background: transparent;
+      padding: $padding-y $padding-x;
+
+      // Move labels out of the way on focus and empty
+      &:focus + .placeholder-label-text, 
+      &:not(.empty) + .placeholder-label-text, {
+        z-index: 2;
+        transform: translate3d($distance-x, $distance-y, 0) scale($scale);
+        color: darken($steel, 10);
+      }
+    }
+
+    &.valid, &.invalid {
+      textarea, input {
+        + .placeholder-label-text {
+          color: inherit;
+        }
+      }
+    }
+
+    input {
+      line-height: inherit;
+    }
+    textarea {
+      padding-top: $padding-y + 4;
+    }
+  }
+
+  // Faux-placeholder labels
+  .placeholder-label-text {
+    pointer-events: none;
+    font-size: inherit;
+    line-height: 1.2em;
+    position: absolute;
+    top: $padding-y + 5px;
+    left: $padding-x;
+    padding: 1px 0 0 1px;
+    transform-origin: left top 0;
+    will-change: transform;
+    -webkit-filter: blur(0);
+    backface-visibility: hidden;
+    -webkit-font-smoothing: subpixel-antialiased;
+    color: $alabaster;
+    transform: translate3d(0, 0, 0) scale(1);
+    transition-property: color, transform;
+    background: $white;
+    box-shadow: -6px 0 $white, 6px 0 $white;
+  }
+}
+
+@include label-placeholder;

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

@@ -19,7 +19,7 @@
 // Image caption mixin
 @mixin figcaption {
   font-size: 14px;
-  color: $nobel;
+  color: $pewter;
   @include rhythm(11px, 4px);
 }
 

data/app/assets/stylesheets/ratchet/base/_multistep-form.scss

@@ -1,22 +1,59 @@
 fieldset.form-step {
-  left: 0;
-  right: 0;
 
-  &[disabled] {
-    display: none;
+  // Transition to form step
+  &.enter[data-direction=forward] { animation: fade-in-right .3s forwards; }
+  &.enter[data-direction=reverse] { animation: fade-in-left .3s forwards; }
+
+  // Transition away from form step
+  &.exit[data-direction=forward] { animation: fade-out-left .3s forwards; }
+  &.exit[data-direction=reverse] { animation: fade-out-right .3s forwards; }
+  
+}
+
+.progressive-form-nav {
+  display: flex;
+  position: relative;
+  justify-content: center;
+  text-align: center;
+  margin-bottom: 1em;
+}
+
+.progressive-form-nav-item {
+  margin: 5px 10px;
+  opacity: .4;
+  cursor: default;
+  text-decoration: none;
+
+  background: transparent linear-gradient(rgba(white, .6), rgba(white, .6)) 50% 90%/0px 1px no-repeat;
+  transition: background .1s ease, color .15s ease, opacity .15 ease;
+
+  &,
+  &:visited,
+  &:hover,
+  &:focus,
+  &:active {
+    color: white;
   }
 
+  &.previous { opacity: .8; }
+  &.next     { cursor: default; }
 
-  // Transition to form step
-  &.arrived { animation: fade-in-right .5s forwards; }
-  
-  // Revisit form step
-  &.revisted, &.step-visited.arrived { animation: .5s fade-in-left forwards; }
+  &.previous, &.completed, .completed + & {
+    cursor: pointer;
+    &:hover { opacity: 1; }
+  }
 
-  // Transition away from form step
-  &.departed { animation: fade-out-left .5s forwards; }
+  &.here {
+    opacity: 1;
+    background: transparent linear-gradient(rgba(white, .6), rgba(white, .6)) 50% 90%/100% 1px no-repeat;
+  }
+
+  &:active {
+    transform: scale(.97, .97);
+  }
 }
 
+
 // Transition to form step
 @keyframes fade-in-right {
   0% {
@@ -48,6 +85,23 @@ fieldset.form-step {
   }
 }
 
+// Transition away from form step
+@keyframes fade-out-right {
+  0% {
+    opacity: 1;
+    transform: perspective(1px) translate3d(0, 0, 0);
+  }
+
+  99% {
+    opacity: 0;
+    transform: perspective(1px) translate3d(200px, 0, 0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: perspective(1px) translate3d(9999px, 0, 0);
+  }
+}
 // Return to previous form step
 @keyframes fade-in-left {
   0% {

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

@@ -0,0 +1,284 @@
+/* ========================================================================== *
+ * Contrast section
+ * -------------------------------------------------------------------------- */
+
+/*
+ * Variables that we need to account for:
+ * Layout
+ * Spacing
+ * Background
+ * Angle Direction
+ * One Angle
+ * Background Image
+ */
+
+/* ===================================== *
+ * a. Utilities
+ * ------------------------------------- */
+
+$section-gutter-none: 0;
+$section-gutter-xsmall: 5%;
+$section-gutter-small: 15%;
+$section-gutter-large: 30%;
+
+@mixin section-offset($num) {
+  .section-offset-#{$num} {
+    margin-top: $num * -1%; 
+  }
+}
+
+@include section-offset(10);
+@include section-offset(20);
+@include section-offset(30);
+@include section-offset(40);
+@include section-offset(50);
+
+/* ===================================== *
+ * b. Common
+ * ------------------------------------- */
+
+// Contrast and Angle Sections
+.contrast-section,
+.angle-section {
+  padding-top: vr(4);
+  padding-bottom: vr(4);
+  position: relative;
+
+  // Background
+  &:before {
+    height: 100%;
+    top: 0;    
+    content: '';
+    width: 100vw;
+    position: absolute;
+    left: calc(-50vw + 50%);
+    z-index: -1;
+  }
+}
+
+// Angle and Block Heros
+.angle-hero,
+.block-hero {
+  position: relative;
+  // overflow: hidden;
+  color: $white;
+  max-height: 1400px;
+  text-align: center;
+
+  &:before {
+    bottom: 0;
+    z-index: -3;
+    content: '';
+    width: 100vw;
+    position: absolute;
+    left: calc(-50vw + 50%);
+  }
+
+  // Hero SVG
+  figure {
+    bottom: -11%;
+    overflow: hidden;
+    position: absolute;
+    width: 100%;
+    z-index: -1;
+    
+    @media (max-width: $breakpoint) {
+      @include hidden;
+    }
+  } 
+}
+
+// Angle Hero
+.angle-hero {
+  // Large Gutter is default for hero to completely set copy within angles
+  padding-top: $section-gutter-large;
+  padding-bottom: $section-gutter-large;
+  margin-top: -$section-gutter-large;
+
+  &:before {
+    top: (-$section-gutter-large - $section-gutter-xsmall);
+    height: 100% + $section-gutter-large;
+  }
+  
+  // // Adjust height
+  // &.left:before,
+  // &.right:before {
+  //   height: 100%;
+  //   @include until($breakpoint) {
+  //     height: 110% + $section-gutter-xsmall;
+  //   };
+  //   @include between($breakpoint-lg, 1800px) {
+  //     height: 100% - $section-gutter-xsmall;
+  //   };
+  // }
+}
+
+// Block Hero (No Angle)
+.block-hero {
+  padding-top: $section-gutter-large * 2;
+  padding-bottom: 15%;
+  margin-top: -$section-gutter-large * 2;
+  margin-bottom: vr(5); // 90px
+
+  &:before {
+    top: 0;
+    height: 100%;
+  }
+
+  @include at-least($breakpoint-lg) {
+    padding-bottom: 10%;
+  };
+}
+
+// Default Angle Direction - RTL
+.angle-section,
+.angle-hero {
+  &:before { transform: skewY(-$deg); }
+}
+
+// Reverse Angle Direction - LTR
+.angle-section.reverse,
+.angle-hero.right {
+  &:before { transform: skewY($deg); } 
+}
+
+// // Center break to only used in conjunction with angle-break
+// @mixin center-break($height) {
+
+//   $width: 1.732 * $height;
+//   $position: .866 * $height; 
+
+//   // Universal styles
+//   position: absolute;
+//   left: calc(50% - $position);
+//   bottom: 0;
+//   width: 0;
+//   height: 0;
+//   border-style: solid;
+//   border-width: 0 $width $height;
+//   border-color: transparent transparent $white transparent;
+//   // box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
+
+//   // // Stack cells at breakpoint
+//   // @media (max-width: $breakpoint) {
+//   //   flex-basis: 100%;
+//   //   width: auto;
+//   //   max-width: unset;
+//   //   margin-left: 0;
+//   // }
+// }
+
+// Break full angle ** MAKE INTO MIXIN FOR VARIATIONS ****
+.angle-break {
+  background: $white;
+  // Need better math here?
+  bottom: -95%;
+  content: '';
+  display: block;
+  height: 100%;
+  right: 0;
+  position: absolute;
+  width: 100%;
+  transform: skewY(30deg);
+
+  &.reverse {
+    transform: skewY(-30deg);
+  }
+
+  + .center-break {
+    // @include center-break(350px);
+  }
+}
+
+
+/* ===================================== *
+ * c. Specific Hero SVG Styling
+ * ------------------------------------- */
+
+// Blank isometric grid SVG positioning within hero
+.isometric-grid-hero-bg {
+  figure {
+    overflow: visible;
+  }
+
+  svg {
+    margin-left: -136%;
+    margin-bottom: -20%;
+    width: 275%;
+  }
+  
+  // Different positioning when hero is reversed
+  &.reverse {
+    svg {
+      margin-left: -50%;
+    }
+  }
+}
+
+// Cube Stack SVG positioning within hero
+.cube-stack-hero-bg {
+  padding-bottom: 33%;
+
+  svg {
+    margin-left: -6%;
+    width: 112%;
+
+    // Prevent svg from continuing to scale
+    @media (min-width: 1500px) {
+      max-width: 1500px;
+      margin: 0 auto;
+    }  
+  }
+
+  // Hide svg overflow - right
+  &:after {
+    background: $white;
+    bottom: -95%;
+    content: '';
+    display: block;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    width: 100%;
+    transform: skewY(-30deg);
+  }    
+}
+
+/* REVISIT BELOW */
+
+// Need to rethink the gutter for sections
+// // No Gutter for Sections
+// &.no-gutter {
+//   padding: {top: $section-gutter-none; bottom: $section-gutter-none;}
+// }
+
+// // Xsmall Gutter for Sections
+// &.xsmall-gutter {
+//   padding: {top: $section-gutter-xsmall; bottom: $section-gutter-xsmall;}
+// }
+
+// // Small Gutter for Sections
+// &.small-gutter {
+//   padding: {top: $section-gutter-small; bottom: $section-gutter-small;}
+// }
+
+// // Large Gutter for Sections
+// &.large-gutter {
+//   padding: {top: $section-gutter-large; bottom: $section-gutter-large;}
+// }
+
+// Need to rethink the gutters for heros
+// // No Gutter for Hero
+// &.no-gutter {
+//   padding-bottom: $section-gutter-none;
+// }
+
+// // Xsmall Gutter for Hero
+// &.xsmall-gutter {
+//   padding-bottom: $section-gutter-xsmall;
+// }
+
+// // Small Gutter for Hero
+// &.small-gutter {
+//   padding-bottom: $section-gutter-small;
+// }

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

@@ -14,7 +14,7 @@
     }
 
     td {
-      box-shadow: 1px 1px $alto inset;
+      box-shadow: 1px 1px $alabaster inset;
     }
   }
 }
@@ -22,7 +22,7 @@
 // Striped rows
 @mixin striped() {
   tbody tr:nth-child(2n+1) {
-    background: lighten($iron, 5);
+    background: lighten($alabaster, 5);
   }
 }
 
@@ -69,7 +69,7 @@ th {
 
 td {
   padding: 8px 10px 7px 10px;
-  box-shadow: 0 1px $alto inset;
+  box-shadow: 0 1px $alabaster inset;
 }
 
 caption {
@@ -77,5 +77,5 @@ caption {
 }
 
 tfoot th {
-  box-shadow: 0 1px $alto inset;
+  box-shadow: 0 1px $alabaster inset;
 }