ratchet_design 0.1.19 → 0.1.20

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

@@ -0,0 +1,388 @@
+$slider-track: $isabella;
+$slider-track-line: $dolphin;
+$slider-mark: #fff;
+$slider-active: $cerulean;//hsl(203, 47%, 65%);
+
+@mixin slider-fill-theme($color, $class: 'fill', $index: '') {
+  $threshold: 8;
+
+  @if $index == '' {
+    $index: 'data-index';
+  } @else {
+    $index: 'data-index="#{$index}"';
+  }
+
+  .slider-input.#{$class} {
+    ~ .slider-fills {
+      .slider-fill[#{$index}].filled {
+        background: $color;
+        border-right-color: darken($color, 12);
+        &:first-child {
+          border-left-color: darken($color, 12);
+        }
+        &:before {
+          box-shadow: darken($color, 12) 0 0 0 1px;
+        }
+      }
+    }
+
+     ~ .slider-track {
+      .filled .slider-segment-mark[#{$index}] {
+        &:before {
+          border-color: $color;
+          box-shadow: darken($color, 12) 0 0 0 1px inset;
+        }
+        &:after {
+          box-shadow: darken($color, 12) 0 0 0 1px;
+        }
+      }
+    }
+  }
+}
+
+
+@mixin reset-slider {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 100%;
+  margin: 0;
+  cursor: pointer;
+  &:focus { outline: none; }
+  &::-webkit-slider-thumb { -webkit-appearance: none; }
+  &::-moz-slider-thumb { -moz-appearance: none; }
+  &::-ms-track {
+    width: 100%;
+    cursor: pointer;
+    background: transparent;
+    border-color: transparent;
+    color: transparent;
+  }
+  &::-moz-focus-outer { 
+    border: 0;
+  }
+  &::-moz-range-track {
+    border: inherit;
+    background: transparent;
+  }
+}
+
+@mixin slider-thumb {
+  &::-moz-range-thumb     { @content; }
+  &::-webkit-slider-thumb { @content; }
+  &::-ms-thumb            { @content; }
+}
+
+@mixin slider-track {
+  @content;
+  &::-moz-slider-track {
+    @content;
+  }
+  &::-ms-track {
+    @content;
+  }
+}
+
+.empty-label[data-slider-label] {
+  display: none;
+}
+
+input[type=range] {
+  @include reset-slider;
+  position: relative;
+  z-index: 4;
+  
+  @include slider-thumb {
+    box-shadow: rgba(#000, .4) 0 0 0 1px, rgba(#000, .4) 0 1px 1px inset;
+    border: 6px solid #fff;
+    background: $slider-track-line;
+    box-sizing: border-box;
+    height: 19px;
+    width: 19px;
+    border-radius: 100%;
+    position: relative;
+    top: 1px;
+    transition: all .15s ease-in;
+    &:after {
+      box-sizing: border-box;
+      content: "";
+      position: absolute;
+      left: -15px; right: -15px; top: -15px; bottom: -15px;
+      
+    }
+    &:active {
+      background: $slider-active;//#409bd9;
+      box-shadow: 0 0 2px 2px $slider-active, rgba(#000, .4) 0 1px 1px inset;
+    }
+  }
+  
+  &:focus {
+    @include slider-thumb {
+      background: $slider-active;//#409bd9;
+      box-shadow: 0 0 2px 2px $slider-active, rgba(#000, .4) 0 1px 1px inset;
+    }
+  }
+  
+  @include slider-track {
+    height: 16px;
+    background: transparent;
+
+    &:after {
+      position: absolute;
+      content: "";
+      left: 4px; right: 4px; top: 6px;
+      height: 5px;
+      background: $slider-track;
+      z-index: -1;
+      border-radius: 4px;
+      box-shadow: $slider-track-line 0 0 0 1px;
+    }
+  }
+
+  &.slider-input {
+    margin: 0;
+
+    @include slider-track {
+      &:after {
+        display: none;
+      }
+    }
+  }
+}
+
+input::-moz-focus-inner { 
+  border: 0; 
+}
+
+.slider-container {
+  position: relative;
+  padding: .5em 0;
+
+  @include at-least(400px){
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    &.with-label {
+      max-width: 320px;
+    }
+  }
+
+  &.line-labels {
+    padding: vr(1) 0 0;
+  }
+}
+
+.slider-input-container {
+  position: relative;
+  flex: 1 0 auto;
+  margin: .6em 0;
+}
+
+.slider-track {
+  height: 0px;
+  display: flex;
+  align-items: center;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  margin: 0 10px 0 9px;
+  position: relative;
+  top: -12px;
+}
+
+.slider-segment {
+  position: relative;
+}
+
+.slider-segment-mark {
+  &:before, &:after {
+    position: absolute;
+    content: "";
+    width: 13px;
+    height: 13px;
+    top: -13px;
+    left: -5px;
+    box-sizing: border-box;
+    border-radius: 100%;
+  }
+  &:before {
+    background: $slider-mark;
+    border: $slider-track 3px solid;
+    box-shadow: $slider-track-line 0 0 0 1px inset;
+    z-index: 3;
+  }
+  &:after {
+    box-shadow: $slider-track-line 0 0 0 1px;
+    z-index: 0;
+  }
+}
+
+.slider-fills {
+  position: absolute;
+  left: 9px;
+  right: 10px;
+  top: 9px;
+  height: 5px;
+  z-index: 1;
+  display: flex;
+}
+
+.slider-fill {
+  flex-grow: 1;
+  height: 5px;
+  position: relative;
+  
+  box-sizing: border-box;
+  background: $slider-track;
+  border-left: 1px solid transparent;
+  border-right: 1px solid $slider-track-line;
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0px; left: 0px; right: 0px; bottom: 0px;
+    box-shadow: $slider-track-line 0 0 0 1px;
+    z-index: -1;
+  }
+
+  &:first-child { 
+    border-left: 1px solid $slider-track-line;
+    &, &:before {
+      border-top-left-radius: 5px;
+      border-bottom-left-radius: 5px;
+    }
+    &:before { left: 0px; }
+  }
+
+  &:last-child {
+    &, &:before {
+      border-top-right-radius: 5px;
+      border-bottom-right-radius: 5px;
+    }
+    &:before { right: 0px; }
+  }
+
+}
+
+.slider-input.no-segments, .slider-input[max='100'] {
+  ~ .slider-fills .slider-fill { border-right: 0; }
+}
+
+.slider-line-label {
+  position: absolute;
+  white-space: nowrap;
+  font-size: 12px;
+  z-index: 3;
+  height: 1.25;
+  top: -39px;
+  right: -30px;
+  left: -28px;
+  text-align: center;
+}
+
+.slider-segment:first-child .slider-line-label {
+  left: -9px;
+  right: auto;
+  text-align: left;
+  &:before {
+    left: 8px;
+  }
+}
+
+.slider-segment:last-child .slider-line-label {
+  right: -11px;
+  left: auto;
+  text-align: right;
+  &:before {
+    right: 9px;
+  }
+}
+
+.slider-label {
+  background: $slider-mark;
+  border-radius: 3px;
+  box-shadow: $slider-track-line 0 0 0 1px;
+  font-size: 14px;
+  padding: 4px 8px;
+  position: relative;
+  text-align: center;
+
+  @include at-least(400px){
+    white-space: nowrap;
+    position: absolute;
+    top: 50%;
+    transform: translatey(-50%);
+    transform-style: preserve-3d;
+    &:after, &:before {
+      content: "";
+    }
+  }
+  
+  &:after, &:before {
+    position: absolute;
+    width: 0;
+    height: 0;
+    top: 50%;
+    transform: translatey(-50%);
+    transform-style: preserve-3d;
+    border-top: 7px solid transparent;
+    border-bottom: 7px solid transparent;
+  }
+
+  > * + * {
+    &:before { content: " — " }
+
+    @include at-least(400px) {
+      display: block;
+      &:before { content: ""; }
+    }
+  }
+
+  [class*=big] {
+    font-size: 1.15em;
+  }
+
+  [class*=small] {
+    font-size: .8em;
+  }
+}
+
+[data-slider-label] {
+  &:after { content: attr(data-after); }
+  &:before { content: attr(data-before); }
+}
+
+.slider-label.align-right {
+  @include at-least(400px) {
+    margin-left: 10px;
+    left: 100%;
+    text-align: left;
+  }
+  &:before, &:after {
+    left: -7px;
+    border-right: 7px solid $slider-track-line;
+  }
+  &:after {
+    border-right-color: $slider-mark;
+    left: -6px;
+  }
+}
+
+.slider-label.align-left {
+  @include at-least(400px) {
+    margin-right: 10px;
+    right: 100%;
+    text-align: right;
+  }
+  &:before, &:after {
+    right: -7px;
+    border-top: 7px solid transparent;
+    border-left: 7px solid $slider-track-line;
+    border-bottom: 7px solid transparent;
+  }
+  &:after {
+    border-left-color: $slider-mark;
+    right: -6px;
+  }
+}
+
+
+@include slider-fill-theme($slider-active, 'fill');

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

@@ -22,7 +22,7 @@
 // Striped rows
 @mixin striped() {
   tbody tr:nth-child(2n+1) {
-    background: lighten($alabaster, 5);
+    background: $smoke;
   }
 }
 
@@ -36,7 +36,6 @@
 @mixin keyed() {
   tbody tr > :first-child {
     font-weight: 700;
-    color: $shark;
     white-space: nowrap;
   }
 }

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

@@ -1,9 +1,9 @@
 /* ========================================================================== *
- * a. Text module
+ * Text module
  * -------------------------------------------------------------------------- */
 
 /* ===================================== *
- * i. Utility
+ * Utility
  * ------------------------------------- */
 
 // Create an underlined link with cleared descenders
@@ -41,7 +41,7 @@
 }
 
 /* ===================================== *
- * ii. Common
+ * Common
  * ------------------------------------- */
 
 body,
@@ -53,7 +53,7 @@ textarea {
 }
 
 /* ===================================== *
- * iii. Heading
+ * Heading
  * ------------------------------------- */
 
 // 1.15 modular scale - http://www.modularscale.com/?18&px&1.15&web&text
@@ -105,7 +105,7 @@ h6 {
 }
 
 /* ===================================== *
- * iv. Paragraph
+ * Paragraph
  * ------------------------------------- */
 
 p {
@@ -119,7 +119,7 @@ article p a {
 }
 
 /* ===================================== *
- * v. Blockquote
+ * Blockquote
  * ------------------------------------- */
 
 // Blockquotes
@@ -168,27 +168,9 @@ blockquote {
 }
 
 /* ===================================== *
- * vi. Inline
+ * Inline
  * ------------------------------------- */
 
-// Bare inline text elements
-: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
-    padding-top: 11px;
-    margin-bottom: 19px;
-  }
-
-  b,
-  strong {
-    display: inline-block;
-    line-height: vr(2); // 30px
-    padding-top: 10px;
-    margin-bottom: 5px;
-  }
-}
-
 // Small text
 small {
   font-size: 14px;
@@ -229,6 +211,7 @@ sup {
 
 // Highlighted marks
 mark {
+  padding-top: .1em;
   background: lighten($azure, 45);
 }
 
@@ -238,6 +221,7 @@ abbr[title] {
   position: relative;
   cursor: help;
   font-style: normal;
+  text-decoration: none;
   border-bottom: 1px dashed $pewter;
 
   &:after,
@@ -245,7 +229,6 @@ abbr[title] {
     position: absolute;
     opacity: 0;
     z-index: -1;
-    transition: $duration;
   }
 
   &:after {
@@ -260,6 +243,7 @@ abbr[title] {
     padding: 2px 10px;
     border-radius: $radius;
     background: $space;
+
   }
 
   &:before {
@@ -299,7 +283,7 @@ button {
 }
 
 /* ===================================== *
- * vii. Horizontal rule
+ * Horizontal rule
  * ------------------------------------- */
 
 hr {
@@ -325,7 +309,7 @@ hr.stars {
 }
 
 /* ===================================== *
- * viii. Preformatted text
+ * Preformatted text
  * ------------------------------------- */
 
 pre,
@@ -367,7 +351,7 @@ pre {
 }
 
 /* ===================================== *
- * xi. Syntax highlighting
+ * Syntax highlighting
  * ------------------------------------- */
 
 pre[class*=lang-],

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

@@ -0,0 +1,26 @@
+figure.deployment {
+  position: relative;
+  .capsule {
+    height: 65px;
+    position: relative;
+    overflow-y: visible;
+    &.thin {
+      height: 40px;
+    }
+  }
+  @for $i from 10 through 0 {
+    .capsule:nth-child(#{$i}) {
+      z-index: 10 - $i;
+    }
+  }
+}
+
+.deployment-icon-container {
+  &.active .fade-in-on-hover, &:hover .fade-in-on-hover {
+    fill-opacity: 1;
+  }
+  .fade-in-on-hover {
+    transition-property: fill-opacity;
+    fill-opacity: 0;
+  }
+}

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

@@ -31,7 +31,7 @@
 
 //   // Remove botton margin from buttons
 //   a {
-//     @include button($fill: off, $bevel: on, $color: $white);
+//     @include button($fill: off, $rounded: on, $color: $white);
 //     margin: 0;
 //   }
 

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

@@ -1,98 +1,57 @@
 /* ========================================================================== *
- * Lightbox module
+ * Lightbox
  * -------------------------------------------------------------------------- */
 
 /* ===================================== *
- * a. Common
+ * Utility
  * ------------------------------------- */
 
-// 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;
+$lightbox-padding: 3vw;
 
-  // Container figure
-  figure {
-    position: relative;
-    margin: 0;
-  }
+ // Lightbox images
+@mixin lightbox {
+  transform: translateY(calc(50vh - 50% - #{$lightbox-padding}));
 
-  // 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 {
+  // Loading icon
+  &:before {
+    content: '';
     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;
+    top: 50%;
+    left: 50%;
+    margin: -14px 0 0 -14px;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: 2px solid $steel;
+    border-right-color: $white;
+    animation: spin 1s linear infinite;
   }
-}
-
-// 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
+  img {
+    opacity: 0;
+    transition: opacity $duration;
   }
 
-  // Default loader state
-  .loader {
-    z-index: 14;
-  }
+  // Loaded state
+  &.loaded {
 
-  // Loader failure state
-  .loader.failure {
+    // Remove loading icon
     &:before {
-      border-color: transparent;
-      background: rgba($white, .2)
+      display: none;
+      animation: none;
     }
 
-    &: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;
+    // Fade in cover image
+    img {
+      opacity: 1;
     }
   }
 }
 
-// Deactivate anchor links under 700px
-@media (max-width: 700px) {
-  a[href$=jpg],
-  a[href$=png],
-  a[href$=gif],
-  a[href$=svg] {
-    cursor: default;
-  }
+/* ===================================== *
+ * Common
+ * ------------------------------------- */
+
+.lightbox {
+  @include lightbox;
 }