ratchet_design 0.1.1 → 0.1.2

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

@@ -1,206 +0,0 @@
-/* ========================================================================== *
- * 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;
-        }
-      }
-    }
-  }
-}