ratchet_design 0.1.1 → 0.1.2

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

@@ -6,16 +6,24 @@
  * 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) {
+@mixin nested-label($size: normal, $spacing: on) {
 
   // 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 {
@@ -31,9 +39,9 @@
 
   // Input labels
   label {
-    display: flex;
-    width: 100%;
     padding: 0;
+    clear: both;
+    flex: 1 0 auto;
     background: $white;
     font-size: $font-size;
     margin-bottom: $margin;
@@ -41,8 +49,8 @@
 
   // Default active color
   :not(.valid):not(.invalid) > {
-    input,
-    textarea {
+    textarea,
+    #{$text-inputs} {
       &:focus + span,
       &:active + span {
         color: darken($aluminum, 10);
@@ -52,13 +60,8 @@
 
   // Validated label
   .valid > {
-    input,
-    textarea {
-
-      // Active state
-      + span {
-        @extend %active;
-      }
+    textarea,
+    #{$text-inputs} {
 
       // Non-required active color
       &:not(:required):focus + span,
@@ -68,20 +71,15 @@
 
       // Required active color
       &:required + span {
-        color: $lima;
+        color: $apple;
       }
     }
   }
 
   // Invalidated label
   .invalid > {
-    input,
-    textarea {
-
-      // Active state
-      + span {
-        @extend %active;
-      }
+    textarea,
+    #{$text-inputs} {
 
       // Non-required active color
       &:not(:required):focus + span,
@@ -98,15 +96,16 @@
 
   // Select-specific styles
   select {
+    margin: 0;
     font-size: $font-size;
     line-height: inherit;
+    height: $height;
     padding: $padding-y $padding-x;
   }
 
   // Inputs
-  input,
-  select,
-  textarea {
+  textarea,
+  #{$text-inputs} {
     z-index: 1;
     margin: 0;
     font-size: $font-size;
@@ -133,23 +132,41 @@
       -webkit-font-smoothing: subpixel-antialiased;
       z-index: 0;
       color: $alto;
-      transform: perspective(1px) translate3d(0, 0, 0) scale(1);
+      transform: translate3d(0, 0, 0) scale(1);
       transition:
         z-index .2s,
         color .2s,
         transform .2s;
     }
 
-    // Move labels out of the way on focus
+    // Move labels out of the way on focus and empty
     &:focus + span,
-    &:active + span {
+    &:active + span,
+    &:not([value=""]) + 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: $lima);
+  @include button($color: $apple);
 }
 
 /* ===================================== *
@@ -298,9 +315,15 @@ select {
 // Radios & checkboxes
 input[type=radio],
 input[type=checkbox] {
-  display: none;
+  position: absolute;
+  opacity: 0;
+
+  &:focus + .tick-label,
+  &:active + .tick-label {
+    box-shadow: 0 0 0 1px $aluminum inset;
+  }
 
-  + span {
+  + .tick-label {
     width: 20px;
     height: 20px;
     margin: 0 8px 0 0;
@@ -321,11 +344,11 @@ input[type=checkbox] {
 // Radios
 input[type=radio] {
 
-  + span {
+  + .tick-label {
     border-radius: 50%;
   }
 
-  &:checked + span {
+  &:checked + .tick-label {
     box-shadow: 0 0 0 8px $cerulean inset;
   }
 }
@@ -333,7 +356,7 @@ input[type=radio] {
 // Checkboxes
 input[type=checkbox] {
 
-  + span {
+  + .tick-label {
     border-radius: $radius;
     position: relative;
 
@@ -352,11 +375,11 @@ input[type=checkbox] {
     }
   }
 
-  &:checked + span {
+  &:checked + .tick-label {
     box-shadow: 0 0 0 10px $cerulean inset;
   }
 
-  &:checked + span:before {
+  &:checked + .tick-label:before {
     transform: scale(.5) rotate(-45deg);
   }
 }
@@ -508,13 +531,7 @@ button[type=submit] {
  * ------------------------------------- */
 
 // Apply validation styles to inputs & textareas
-textarea,
-input[type=url],
-input[type=tel],
-input[type=text],
-input[type=email],
-input[type=number],
-input[type=password] {
+textarea, #{$text-inputs} {
 
   // Strip default styling
   &:invalid {
@@ -525,13 +542,13 @@ input[type=password] {
   // Apply valid state color to required fields & adjacent labels
   &.valid:required,
   .valid &:required {
-    color: $lima;
+    color: $apple;
   }
 
   // Apply valid state to required fields
   &.valid:required,
   .valid &:required   {
-    border-color: $lima;
+    border-color: $apple;
   }
 
   // Apply invalid state color to required fields & adjacent labels
@@ -549,7 +566,7 @@ input[type=password] {
   // Apply valid state to Chrome’s autofilled fields
   &.valid:required:-webkit-autofill,
   .valid &:required:-webkit-autofill {
-    -webkit-text-fill-color: $lima;
+    -webkit-text-fill-color: $apple;
   }
 
   // Apply invalid state to Chrome’s autofilled fields
@@ -596,7 +613,6 @@ input[type=password] {
     font-size: 14px;
     line-height: 21px;
 
-
     // Message bubble triangle
     &:before {
       content: '';
@@ -611,4 +627,4 @@ input[type=password] {
       border-color: transparent transparent $punch transparent;
     }
   }
-}
+}

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

@@ -0,0 +1,64 @@
+fieldset.form-step {
+  left: 0;
+  right: 0;
+
+  &[disabled] {
+    position: absolute;
+    left: -9999px;
+    opacity: 0;
+  }
+
+
+  // Transition to form step
+  &.arrived { animation: fade-in-right .5s forwards; }
+  
+  // Revisit form step
+  &.revisted, &.step-visited.arrived { animation: .5s fade-in-left forwards; }
+
+  // Transition away from form step
+  &.departed { animation: fade-out-left .5s forwards; }
+}
+
+// Transition to form step
+@keyframes fade-in-right {
+  0% {
+    opacity: 0;
+    transform: perspective(1px) translate3d(200px, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: perspective(1px) translate3d(0, 0, 0);
+  }
+}
+
+// Transition away from form step
+@keyframes fade-out-left {
+  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% {
+    opacity: 0;
+    transform: perspective(1px) translate3d(-200px, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: perspective(1px) translate3d(0, 0, 0);
+  }
+}

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

@@ -328,9 +328,7 @@ code,
 kbd,
 samp {
   font-family: $mono-font;
-  letter-spacing: -.015em;
-  word-spacing: -.015em;
-  color: $aluminum;
+  // color: $aluminum;
   direction: ltr;
   text-align: left;
   tab-size: 2;
@@ -340,9 +338,10 @@ samp {
 }
 
 pre {
-  font-size: .9375rem; // 15.5px
   overflow: auto;
-  @include rhythm(26px, 23px, on);
+  @include rhythm(25px, 25px, on);
+  letter-spacing: -.015em;
+  word-spacing: -.015em;
   border-radius: $radius;
   background: $alabaster;
   box-shadow: 0 0 0 1px $iron inset;
@@ -351,12 +350,13 @@ pre {
 :not(pre) > code,
 :not(pre) > kbd,
 :not(pre) > samp {
-  font-size: .9375rem; // 15.5px
   line-height: 0;
+  letter-spacing: -.015em;
+  word-spacing: -.015em;
   word-wrap: break-word;
   white-space: pre-wrap;
   border-radius: $radius;
-  padding: 4px 6px;
+  padding: 2px 6px;
   background: $alabaster;
   box-shadow: 0 0 0 1px $iron inset;
 }
@@ -365,8 +365,8 @@ pre {
  * xi. Syntax highlighting
  * ------------------------------------- */
 
-pre[class*=language-],
-code[class*=language-] {
+pre[class*=lang-],
+code[class*=lang-] {
   color: $aluminum;
 }
 
@@ -374,7 +374,7 @@ code[class*=language-] {
   .cm-keyword                { color: $bahama;    }
   .cm-atom                   { color: $lightning; }
   .cm-number                 { color: $rose;      }
-  .cm-def                    { color: $lima;      }
+  .cm-def                    { color: $apple;      }
   .cm-variable               { color: $flush;     }
   .cm-variable-2             { color: $orchid;    }
   .cm-variable-3             { color: $flush;     }
@@ -382,16 +382,16 @@ code[class*=language-] {
   .cm-operator               { color: $nobel;     }
   .cm-comment                { color: $nobel;     }
   .cm-string                 { color: $cerulean;  }
-  .cm-string-2               { color: $lima;      }
+  .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: $nobel;     }
+  .cm-attribute              { color: $flush;     }
   .cm-header                 { color: $cerulean;  }
-  .cm-quote                  { color: $lima;      }
+  .cm-quote                  { color: $apple;      }
   .cm-hr                     { color: $nobel;     }
   .cm-link                   { color: $orchid;    }
   .cm-qualifier.cm-attribute { color: $flush;     }
@@ -399,11 +399,11 @@ code[class*=language-] {
 }
 
 .static-code {
-  .cm-variable               { color: $lima;      }
+  .cm-variable               { color: $apple;      }
 }
 
 .cm-negative                 { color: $rose;      }
-.cm-positive                 { color: $lima;      }
+.cm-positive                 { color: $apple;      }
 .cm-header,
 .cm-strong                   {                    }
 .cm-em                       {                    }

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

@@ -0,0 +1,98 @@
+/* ========================================================================== *
+ * Lightbox module
+ * -------------------------------------------------------------------------- */
+
+/* ===================================== *
+ * a. Common
+ * ------------------------------------- */
+
+// Main lightbox element
+.lightbox {
+  @extend %hidden;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, .9);
+  visibility: hidden; // Hidden by default
+  cursor: pointer;
+
+  // Container figure
+  figure {
+    position: relative;
+    margin: 0;
+  }
+
+  // Main image
+  img {
+    max-width: 90vw;
+    max-height: 90vh;
+    cursor: default;
+    visibility: hidden; // Hidden by default
+
+    // Make visible once loaded
+    &.loaded,
+    &.loaded + button {
+      visibility: visible;
+    }
+  }
+
+  // Close button
+  button {
+    position: absolute;
+    margin: 10px 0 0 10px;
+    width: 20px;
+    height: 20px;
+    appearance: none;
+    outline: none;
+    border: 0;
+    visibility: hidden; // Hidden by default
+    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg' fill='#FFF'%3E%3Cpath d='M2.663.005c.176.021.349.045.519.095.316.091.613.249.868.455l.184.166 10.765 10.765 10.768-10.768.187-.164c.262-.21.559-.368.882-.46.279-.079.567-.106.856-.089.228.014.456.065.671.143.257.094.498.23.712.401.578.467.922 1.186.925 1.928.001.239-.033.478-.1.707-.093.316-.249.611-.456.867l-.165.184-10.766 10.765 10.768 10.768.165.187c.224.279.388.599.477.947.078.308.097.631.055.946-.041.301-.136.593-.282.859-.113.208-.256.399-.424.566-.152.153-.324.285-.511.393-.584.337-1.296.423-1.945.235-.316-.092-.612-.25-.868-.456l-.183-.166-10.766-10.765-10.768 10.768-.186.165c-.28.224-.599.388-.947.477-.316.08-.646.098-.968.052-.293-.042-.578-.137-.838-.279-.242-.132-.462-.306-.648-.511-.16-.177-.294-.377-.398-.592-.307-.636-.328-1.387-.054-2.039.091-.218.214-.422.362-.606l.166-.183 10.765-10.766-10.765-10.765-.111-.119c-.208-.245-.372-.521-.476-.826-.204-.594-.172-1.259.087-1.832.098-.217.229-.42.385-.601.174-.201.381-.374.61-.51.279-.166.594-.278.916-.323l.353-.025.179.006z'/%3E%3C/svg%3E") 0 0 / 16px 16px no-repeat;
+  }
+}
+
+// Active state
+.lightbox-active {
+
+  // Prevent scrolling
+  overflow: hidden;
+
+  // Reposition lightbox
+  .lightbox {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 13;
+    visibility: visible; // Shown while active
+  }
+
+  // Default loader state
+  .loader {
+    z-index: 14;
+  }
+
+  // Loader failure state
+  .loader.failure {
+    &:before {
+      border-color: transparent;
+      background: rgba($white, .2)
+    }
+
+    &:after {
+      content: '';
+      background: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#FFF' d='M30.51 6.423l5.099-5.099.202-.16c.146-.09.313-.145.485-.16l.129-.004.128.011.126.026c.125.034.243.089.349.163.106.074.198.166.272.272.2.285.254.655.145.984-.041.123-.103.238-.183.339l-.086.096-35.284 35.285-.202.159c-.183.113-.398.171-.614.165-.347-.01-.676-.188-.876-.472l-.122-.227c-.047-.12-.074-.248-.078-.377-.003-.129.016-.258.056-.381.041-.122.103-.237.183-.339l.086-.096 3.989-3.989c-.337-.385-.538-.887-.538-1.424v-22.611c0-1.219.998-2.161 2.161-2.161h24.573zm3.857 26.933h-24.573l1.774-1.773h22.799c.222 0 .388-.166.333-.388v-1.884l-.166-.222-6.429-6.429c-.111-.11-.332-.11-.499 0l-2.937 2.439c-.831.72-2.106.665-2.882-.111l-1.832-1.792 1.295-1.295 1.867 1.812c.111.111.333.111.499 0l2.937-2.383c.832-.72 2.106-.665 2.882.111l5.32 5.32v-18.177l-.031-.158 1.267-1.266c.337.384.538.886.538 1.424v22.611c0 1.219-.998 2.161-2.162 2.161zm-17.556-13.234l-2.561-2.505c-.11-.111-.332-.111-.498 0l-8.202 7.703v5.875l.03.157 11.231-11.23zm1.284-1.284l10.642-10.642h-22.8c-.166 0-.332.166-.332.388v14.243l6.927-6.54c.832-.776 2.162-.776 2.993.056l2.57 2.495zm-8.089-8.465c1.101 0 1.995.894 1.995 1.996 0 1.101-.894 1.995-1.995 1.995s-1.995-.894-1.995-1.995c0-1.102.894-1.996 1.995-1.996z' /%3E%3C/svg%3E") 50% 50% / 28px 28px no-repeat;
+    }
+  }
+}
+
+// Deactivate anchor links under 700px
+@media (max-width: 700px) {
+  a[href$=jpg],
+  a[href$=png],
+  a[href$=gif],
+  a[href$=svg] {
+    cursor: default;
+  }
+}

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

@@ -0,0 +1,142 @@
+/* ========================================================================== *
+ * Tooltip module
+ * -------------------------------------------------------------------------- */
+
+@mixin tooltip($direction: 'bottom', $offset: 0px, $width: auto, $background: $shark) {
+  position: relative;
+  cursor: pointer;
+
+  // Tooltip components default state
+  &:after,
+  &:before {
+    position: absolute;
+    opacity: 0;
+    visibility: hidden;
+    z-index: 3;
+    transition:
+      opacity $duration,
+      visibility $duration;
+  }
+
+  // Tooltip components active state
+  &:hover,
+  &:focus,
+  &:active {
+    &:after,
+    &:before {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  // Bubble
+  &:after {
+    content: attr(data-tooltip);
+    color: $white;
+    font-size: 14px;
+    font-weight: 300;
+    line-height: 20px;
+    padding: 10px 12px;
+    max-width: 100vw;
+    border-radius: $radius;
+    background: $background;
+
+    // Width settings
+    @if $width == 'auto' {
+      width: auto;
+      white-space: nowrap;
+    } @else {
+      width: $width;
+    }
+
+    // Direction settings
+    @if $direction == 'bottom' {
+      left: 50%;
+      top: calc(100% + 6px + #{$offset});
+      transform: translateX(-50%);
+    } @else if $direction == 'top' {
+      left: 50%;
+      bottom: calc(100% + 6px + #{$offset});
+      transform: translateX(-50%);
+    } @elseif $direction == 'left' {
+      right: calc(100% + 6px + #{$offset});
+      top: 50%;
+      transform: translateY(-50%);
+    } @else if $direction == 'right' {
+      left: calc(100% + 6px + #{$offset});
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  // Bubble triangle
+  &:before {
+    content: '';
+
+    // Vertical direction settings
+    @if $direction == 'bottom' or $direction == 'top' {
+      left: 0;
+      width: 100%;
+      height: calc(6px + #{$offset});
+      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpolygon points='0,6 5,0 10,6' fill='#{$background}'/%3E%3C/svg%3E") 50% 100% / 10px 6px no-repeat;
+
+    // Horizontal direction settings
+    } @else if $direction == 'left' or $direction == 'right' {
+      top: 0;
+      width: calc(6px + #{$offset});
+      height: 100%;
+      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpolygon points='0,0 6,5 0,10' fill='#{$background}'/%3E%3C/svg%3E") 0 50% / 6px 10px no-repeat;
+    }
+
+    // Bottom direction settings
+    @if $direction == 'bottom' {
+      top: 100%;
+
+    // Top direction settings
+    } @else if $direction == 'top' {
+      bottom: 100%;
+      transform: rotate(180deg);
+
+    // Left direction settings
+    } @else if $direction == 'left' {
+      right: 100%;
+
+    // Right direction settings
+    } @else if $direction == 'right' {
+      left: 100%;
+      transform: rotate(180deg);
+    }
+  }
+}
+
+article > p:first-of-type > [data-tooltip] {
+  @include tooltip;
+}
+
+.tooltip-left {
+  @include tooltip(left, 3px);
+}
+
+.tooltip-right {
+  @include tooltip(right, 3px);
+}
+
+.tooltip-top {
+  @include tooltip(top);
+}
+
+.tooltip-bottom {
+  @include tooltip;
+}
+
+.tooltip-offset {
+  @include tooltip($offset: 10px);
+}
+
+.tooltip-width {
+  @include tooltip($width: 220px);
+}
+
+// [data-tooltip] {
+//   @include tooltip($width: 216px);
+// }