ratchet_design 0.1.0

data/app/assets/stylesheets/ratchet/enhancement/_contrast-section.scss

@@ -0,0 +1,22 @@
+/* ========================================================================== *
+ * Contrast section
+ * -------------------------------------------------------------------------- */
+
+/* ===================================== *
+ * a. Utilities
+ * ------------------------------------- */
+
+// Full-width, spaced, colored section mixin
+@mixin contrast-section($background: $alabaster, $spacing: vr(4), $border-color: $iron) {
+  padding-top: $spacing;
+  padding-bottom: $spacing;
+  border: solid transparent;
+  border-width: $spacing 0;
+  @include cover-background($background);
+
+  &:before {
+    box-shadow:
+      inset 0 1px $border-color,
+      inset 0 -1px $border-color;
+  }
+}

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

@@ -0,0 +1,49 @@
+/* ========================================================================== *
+ * Feature module
+ * -------------------------------------------------------------------------- */
+
+/* ===================================== *
+ * a. Common
+ * ------------------------------------- */
+
+// Feature figures (as seen on the home page)
+@mixin feature {
+  @include grid;
+  @include gutter(10px);
+
+  div {
+    @include span(1 of 4);
+  }
+
+  figcaption {
+    @include span(3 of 4);
+  }
+
+  div,
+  figcaption {
+    position: relative;
+    margin-top: 0;
+    margin-bottom: 0;
+    @extend %destroy-margins;
+  }
+
+  @media (max-width: 550px) {
+    text-align: center;
+
+    img,
+    figcaption {
+      padding: 0;
+      position: static;
+    }
+
+    img {
+      width: 150px;
+    }
+
+    figcaption {
+      width: 100%;
+      margin-top: 1.5rem;
+      text-align: left;
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+/* ========================================================================== *
+ * Hero module
+ * -------------------------------------------------------------------------- */
+
+/* ===================================== *
+ * 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);
+
+  // 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;
+  }
+
+  // Smaller text for paragraphs
+  p {
+    font-size: 16px;
+    max-width: 450px;
+    margin-bottom: 35px;
+  }
+}

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

@@ -0,0 +1,109 @@
+/* ========================================================================== *
+ * Loader module
+ * -------------------------------------------------------------------------- */
+
+/* ===================================== *
+ * a. Animations
+ * ------------------------------------- */
+
+// Loader spinning animation
+@keyframes spin {
+  0%   { transform: rotate(0deg);   }
+  100% { transform: rotate(360deg); }
+}
+
+// Loader success animation
+@keyframes success-in {
+  0%   { transform: scale(0) rotate(-45deg); }
+  100% { transform: scale(1) rotate(-45deg); }
+}
+
+// Loader failiure animation
+@keyframes failure-in {
+  0%   { transform: scale(0); }
+  100% { transform: scale(1); }
+}
+
+/* ===================================== *
+ * b. Common
+ * ------------------------------------- */
+
+// Hide loader element by default
+.loader:not(.loading):not(.success):not(.failure) {
+  @extend %hidden;
+}
+
+// Loader element
+.loader {
+  font-size: 14px;
+  color: $white;
+  position: absolute;
+  left: 0;
+  top: 145px;
+  width: 100%;
+  height: 500px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-top: 90px;
+
+  // Spinner
+  &:before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -25px 0 0 -25px;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    border: 4px solid rgba($white, .2);
+    border-right-color: $white;
+    animation: spin 1s linear infinite;
+  }
+}
+
+// Shared success & failure declarations
+.loader.success,
+.loader.failure {
+
+  // Ring
+  &:before {
+    transition: border-color .4s;
+    border-color: $white;
+  }
+
+  // Icon
+  &:after {
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+  }
+}
+
+// Success-specific icon
+.loader.success:after {
+  content: '';
+  animation: success-in .4s;
+  margin: -7px 0 0 -9px;
+  height: 10px;
+  width: 18px;
+  border: solid $white;
+  border-width: 0 0 4px 4px;
+  transform: rotate(-45deg);
+}
+
+// Failure-specific icon
+.loader.failure:after {
+  content: '!';
+  animation: failure-in .4s;
+  width: 50px;
+  height: 50px;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 52px;
+  text-align: center;
+  margin: -25px 0 0 -25px;
+}

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

@@ -0,0 +1,74 @@
+/* ========================================================================== *
+ * Notice module
+ * -------------------------------------------------------------------------- */
+
+/* ===================================== *
+ * a. Utilities
+ * ------------------------------------- */
+
+@mixin notice($selector: '.notice', $height: vr(4), $background: rgba($shark, .15)) {
+  margin-top: $height;
+
+  // Temporary notice
+  #{$selector} {
+    position: absolute;
+    width: 100%;
+    height: $height;
+    top: 0;
+    left: 0;
+    line-height: $height;
+    text-align: center;
+    color: $white;
+    background: $background;
+    font-size: 14px;
+    font-weight: 700;
+    z-index: 99;
+
+    .close-btn {
+      display: block;
+      width: $height;
+      height: $height;
+      position: absolute;
+      top: 0;
+      right: 0;
+      background: transparent;
+      border-bottom: transparent;
+      transition: background $duration;
+
+      &:before,
+      &:after {
+        position: absolute;
+        left: 50%;
+        top: calc(50% - 8px);
+        content: '';
+        width: 2px;
+        height: 16px;
+        background: $white;
+      }
+
+      &:before {
+        transform: rotate(45deg);
+      }
+
+      &:after {
+        transform: rotate(-45deg);
+      }
+
+      &:hover {
+
+        // If background color contains an alpha transparency
+        @if alpha($background) != 1 {
+
+          // Double its opacity
+          background: opacify($background, alpha($background));
+
+        // Otherwise
+        } @else {
+
+          // Darken its color
+          background: darken($background, 10);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,206 @@
+/* ========================================================================== *
+ * Signup module
+ * -------------------------------------------------------------------------- */
+
+/* ===================================== *
+ * a. Animations
+ * ------------------------------------- */
+
+// Hello form animation
+@keyframes fade-in-right {
+  0% {
+    opacity: 0;
+    transform: perspective(1px) translate3d(200px, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: perspective(1px) translate3d(0, 0, 0);
+  }
+}
+
+// Goodbye form animation
+@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);
+  }
+}
+
+// Welcome back form animation
+@keyframes fade-in-left {
+  0% {
+    opacity: 0;
+    transform: perspective(1px) translate3d(-200px, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: perspective(1px) translate3d(0, 0, 0);
+  }
+}
+
+/* ===================================== *
+ * a. Common
+ * ------------------------------------- */
+
+// Namespaced declarations
+.signup {
+  align-items: center;
+  background: $cerulean linear-gradient(to bottom, $cerulean, mix($orchid, $cerulean, 75%)) no-repeat fixed;
+
+  // Transparent header
+  header[role=banner] {
+    height: 135px;
+    justify-content: center;
+
+    &,
+    &:before {
+      background: transparent;
+    }
+
+    // Fancy logo is fancy
+    svg {
+      width: auto;
+      max-width: 100%;
+      height: vr(3); // 45px
+      color: $white;
+    }
+  }
+
+  // Main content
+  main {
+    width: 100%;
+    padding-top: 0;
+  }
+
+  // Fieldset legend
+  legend {
+    text-transform: none;
+    letter-spacing: normal;
+    box-shadow: none;
+    font-weight: 300;
+    width: 100%;
+    float: left;
+    font-size: 24px;
+    padding-top: vr(2); // 30px
+    margin-bottom: vr(2); // 30px
+    text-align: center;
+  }
+
+  // All form fieldsets
+  fieldset {
+    position: absolute;
+    left: -9999px;
+    opacity: 0;
+    width: 385px;
+    max-width: 100%;
+    margin: 0 auto;
+    padding: 0 vr(2); // 30px
+    background: $white;
+    border-radius: $radius;
+    box-shadow: 0 0 25px rgba(0, 0, 0, .05);
+    will-change: transform;
+    -webkit-filter: blur(0);
+    backface-visibility: hidden;
+    -webkit-font-smoothing: subpixel-antialiased;
+    @include nested-label(large);
+
+    // Animated styles
+    &.hello,
+    &.welcome-back,
+    &.goodbye {
+      left: 0;
+      right: 0;
+    }
+
+    // I say hello
+    &.hello {
+      animation: fade-in-right .5s forwards;
+    }
+
+    // Welcome back, Kotter
+    &.welcome-back {
+      animation: .5s fade-in-left forwards;
+    }
+
+    // You say goodbye
+    &.goodbye {
+      animation: fade-out-left .5s forwards;
+    }
+  }
+
+  // Submit buttons
+  button[type=submit] {
+    @include button($size: large, $color: $lima);
+    margin-bottom: 3px;
+    width: 100%;
+  }
+
+  // Grouped inputs
+  .input-group {
+    @include grid;
+    @include gutter(19px);
+
+    > * {
+      @include span(1 of 2);
+    }
+
+    label {
+      margin: 0;
+    }
+  }
+
+  // Form footers
+  footer p {
+    font-size: 14px;
+    padding-top: 11px;
+    margin-bottom: 19px;
+    text-align: center;
+
+    // Inside the box styles
+    &:first-child {
+      color: $nobel;
+
+      a {
+        font-weight: 700;
+
+        &:hover,
+        &:focus,
+        &:active {
+          color: $aluminum;
+        }
+      }
+    }
+
+    // Outside the box styles
+    &:last-child {
+      color: lighten($cerulean, 45);
+      position: absolute;
+      top: 100%;
+      left: 0;
+      width: 100%;
+      margin: 0;
+
+      a {
+        font-weight: 700;
+
+        &:hover,
+        &:focus,
+        &:active {
+          color: $white;
+        }
+      }
+    }
+  }
+}