ratchet_design 0.1.12 → 0.1.13

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

@@ -1,179 +1,69 @@
-/* ========================================================================== *
- * e. Form module
- * -------------------------------------------------------------------------- */
-
-/* ===================================== *
- * 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, $spacing: on) {
-
-  // Scoped variables
-  $font-size: if($size == large,  17px,  16px);
-  $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 {
-    z-index: 2;
-    transform: translate3d(0, $distance, 0) scale($scale);
-  }
-
-  // Hide input placeholder text
-  ::placeholder {
-    opacity: 0;
-    color: transparent;
-  }
+$text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], input[type=email], input[type=number], input[type=password], input[type=search]';
 
-  // Input labels
-  label {
-    padding: 0;
-    clear: both;
-    flex: 1 0 auto;
-    background: $white;
-    font-size: $font-size;
-    margin-bottom: $margin;
-  }
+$formBlue:  $cerulean;//#4392f9;
+//$steel:     darken($page-border, 25); // Blue-Gray
+$alabaster: hsl(0, 0%, 79%); // Light Blue
+$isabella:  #dde8eb; // Off-Cream
+$duration: .2s;
 
-  // Default active color
-  :not(.valid):not(.invalid) > {
-    textarea,
-    #{$text-inputs} {
-      &:focus + span,
-      &:active + span {
-        color: darken($aluminum, 10);
-      }
-    }
+@mixin input-active {
+  &:focus,
+  &:hover:not([disabled]),
+  &:active {
+    @content;
   }
+}
 
-  // Validated label
-  .valid > {
-    textarea,
-    #{$text-inputs} {
-
-      // Non-required active color
-      &:not(:required):focus + span,
-      &:not(:required):active + span {
-        color: darken($aluminum, 10);
-      }
-
-      // Required active color
-      &:required + span {
-        color: $apple;
-      }
-    }
-  }
+$input-weight-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+$empty-shadow: 0 0 0 transparent;
 
-  // Invalidated label
-  .invalid > {
-    textarea,
-    #{$text-inputs} {
-
-      // Non-required active color
-      &:not(:required):focus + span,
-      &:not(:required):active + span {
-        color: darken($aluminum, 10);
-      }
-
-      // Required active color
-      &:required + span {
-        color: $punch;
-      }
-    }
-  }
+@function input-shadow($color: $alabaster, $size: 1px) {
+  @return 0 0 0 $size $color inset, $empty-shadow;
+}
 
-  // Select-specific styles
-  select {
-    margin: 0;
-    font-size: $font-size;
-    line-height: inherit;
-    height: $height;
-    padding: $padding-y $padding-x;
-  }
+@function input-focus-shadow($color: $steel) {
+  @return 0 0 0 1px $color inset, $input-weight-shadow
+}
 
-  // Inputs
-  textarea,
-  #{$text-inputs} {
-    z-index: 1;
-    margin: 0;
-    font-size: $font-size;
-    line-height: inherit;
-    background: transparent;
-    padding: $padding-y $padding-x;
-
-    // Faux-placeholder labels
-    & + span {
-      background: $white;
-      box-shadow:
-        -6px 0 $white,
-         6px 0 $white;
-      font-size: inherit;
-      height: vr(2); // 30px
-      position: absolute;
-      top: $padding-y;
-      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;
-      z-index: 0;
-      color: $alto;
-      transform: translate3d(0, 0, 0) scale(1);
-      transition:
-        z-index .2s,
-        color .2s,
-        transform .2s;
-    }
+$focus-shadow: input-focus-shadow();
+$input-shadow: input-shadow();
 
-    // Move labels out of the way on focus and empty
-    &:focus + span,
-    &:active + span,
-    &:not([value=""]) + span, {
-      @extend %active;
-    }
-  }
+*, *:before, *:after {
+  transition-duration: .25s;
+  transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
 }
 
-// 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;
-  }
+form {
+  width: 100%;
 
-  // Leave right margin off last element
-  > :not(:last-child) {
-    margin-right: $gutter;
+  &.max {
+    max-width: 100%;
   }
 
 }
 
-%success-btn {
-  @include button($color: $apple);
+.switch-label, .tick-label {
+  pointer-events: none;
+  * { pointer-events: all; }
 }
 
-/* ===================================== *
- * ii. Common
- * ------------------------------------- */
+label {
+  // Bare text-based inputs
+  + input,
+  + select,
+  + textarea {
+    margin-top: -5px;
+  }
+
+  [type=checkbox], [type=radio] {
+    position: absolute;
+    border: none;
+    cursor: pointer;
+    opacity: 0;
+    z-index: -1;
+  }
+} 
 
-// Remove default fieldset styles
 fieldset {
   border: 0;
   padding: 0;
@@ -183,103 +73,78 @@ fieldset {
 
 // Fieldset legends
 legend {
-  font-size: 14px;
-  text-transform: uppercase;
-  letter-spacing: .02em;
-  font-weight: 700;
+  font-size: 24px;
+  font-weight: 300;
   padding-top: 11px;
-  box-shadow: 0 1px $iron;
   width: 100%;
   margin-bottom: 19px;
-}
-
-// Placeholder text color
-::placeholder {
-  opacity: 1;
-  color: $alto;
-}
-
-// Remove FF’s default input outline
-input::-moz-focus-inner {
-  border: 0;
-}
-
-// Labels
-label {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  font-size: 15px;
-  padding-top: 10px;
-  margin-bottom: 10px;
-
-  // Checkbox- & radio-specific labels
-  &.tick-label {
-    flex-direction: row;
-    align-items: center;
-    margin-bottom: 5px;
-  }
-
-  // Bare text-based inputs
-  + input,
-  + select,
-  + textarea {
-    margin-top: -5px;
-  }
-
-  // Nested text-based inputs
-  > input,
-  > select,
-  > textarea {
-    margin-top: 5px;
+  + * {
+    clear: both;
   }
+}
 
-  // Nested range inputs
-  > input[type=range] {
-    margin-top: 12px;
-    margin-bottom: 5px;
-  }
+fieldset h2, legend.header {
+  text-transform: none;
+  letter-spacing: normal;
+  justify-content: space-between;
+  box-shadow: none;
+  font-weight: 300;
+  width: 100%;
+  float: left;
+  font-size: 24px;
+  padding: vr(2) 0 0; // 30px
+  margin: 0 0 vr(3); // 30px
+  text-align: center;
+  + * { clear: both; }
 }
 
-/* ===================================== *
- * iii. Text-based
- * ------------------------------------- */
 
-// Inputs
-input,
-select,
-textarea {
+@mixin input-base {
   width: 100%;
   font-size: 16px;
+  border: none;
   line-height: vr(2); // 30px
   padding: 9px 12px;
-  border: 1px solid $alto;
   border-radius: $radius;
-  transition: border-color .2s;
+  transition-property: box-shadow, color;
   appearance: none;
+  box-shadow: $input-shadow;
 
   // Keep Chrome’s autofilled fields white
   &:-webkit-autofill {
     -webkit-box-shadow: 0 0 0 1000px $white inset;
   }
 
-  &:hover,
-  &:focus,
-  &:active {
-    outline: 0;
-    border-color: $aluminum;
+  &:disabled:not([type="submit"]) {
+    color: $isabella;
+    cursor: default;
   }
 }
 
-// Bare inputs
-:not(label) > {
-  input,
-  select,
-  textarea {
-    margin-bottom: 10px;
+input, select, textarea {
+  outline: 0;
+  outline-style: none;
+  border: none;
+
+  &::-moz-focus-inner {
+    border: none;
+    padding: 0;
+  }
+
+}
+
+#{$text-inputs}, select, textarea {
+  @include input-base;
+
+  @include input-active {
+    box-shadow: $focus-shadow;
   }
 }
 
+textarea {
+  line-height: vr(1.5);
+}
+
 // Override default search styling
 input[type=search] {
   &,
@@ -289,342 +154,110 @@ input[type=search] {
   }
 }
 
+select {
+  min-height: 50px;
+  cursor: pointer;
+  background: $white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 14'%3E%3Cpolygon fill='%237A7B7C' points='3.5,0 0,6 7,6'/%3E%3Cpolygon fill='%237A7B7C' points='3.5,14 0,8 7,8'/%3E%3C/svg%3E") calc(100% - 14px) 50% / 7px 14px no-repeat;
+}
+
 // Confine resizing of textareas
 textarea {
   display: block;
   resize: vertical;
-  max-height: vr(20) + 5px; // 305px
+  margin-top: 10px;
   min-height: vr(8) + 5px;  // 125px;
 }
 
-/* ===================================== *
- * iv. Select
- * ------------------------------------- */
-
-// Select inputs
-select {
-  height: 50px;
-  cursor: pointer;
-  background: $white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 14'%3E%3Cpolygon fill='%237A7B7C' points='3.5,0 0,6 7,6'/%3E%3Cpolygon fill='%237A7B7C' points='3.5,14 0,8 7,8'/%3E%3C/svg%3E") calc(100% - 14px) 50% / 7px 14px no-repeat;
-}
-
-/* ===================================== *
- * v. Radio button & checkbox
- * ------------------------------------- */
-
-// Radios & checkboxes
-input[type=radio],
-input[type=checkbox] {
-  position: absolute;
-  opacity: 0;
-
-  &:focus + .tick-label,
-  &:active + .tick-label {
-    box-shadow: 0 0 0 1px $aluminum inset;
-  }
-
-  + .tick-label {
-    width: 20px;
-    height: 20px;
-    margin: 0 8px 0 0;
-    cursor: pointer;
-    background: $white;
-    transition: .2s box-shadow;
-    box-shadow: 0 0 0 1px $alto inset;
-
-    &:hover,
-    &:focus,
-    &:active {
-      outline: 0;
-      box-shadow: 0 0 0 1px $aluminum inset;
-    }
+// Bare inputs
+:not(label) > {
+  input,
+  select,
+  textarea {
+    margin: 15px 0;
   }
 }
 
-// Radios
-input[type=radio] {
-
-  + .tick-label {
-    border-radius: 50%;
-  }
-
-  &:checked + .tick-label {
-    box-shadow: 0 0 0 8px $cerulean inset;
-  }
+::placeholder {
+  opacity: 1;
+  color: $alabaster;
 }
 
-// Checkboxes
-input[type=checkbox] {
-
-  + .tick-label {
-    border-radius: $radius;
-    position: relative;
-
-    &:before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 60%;
-      margin: 15% 0 0 0;
-      border: solid $white;
-      border-width: 0 0 3px 3px;
-      transition: transform .2s;
-      transform: scale(0) rotate(-45deg);
-    }
-  }
-
-  &:checked + .tick-label {
-    box-shadow: 0 0 0 10px $cerulean inset;
-  }
-
-  &:checked + .tick-label:before {
-    transform: scale(.5) rotate(-45deg);
-  }
+input[type=number]::-webkit-outer-spin-button,
+input[type=number]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
 }
 
-/* ===================================== *
- * vi. Range slider
- * ------------------------------------- */
-
-// Range sliders
-input[type=range] {
-  background-color: $alto;
-  width: 100%;
-  height: 8px;
-  border-radius: 4px;
-  outline: 0;
-  border: 0;
-  padding: 0;
+.inline-fields {
   display: flex;
-  position: relative;
-  -webkit-appearance: none;
-  cursor: pointer;
-
-  // Firefox track
-  &::-moz-range-track {
-    -moz-appearance: none;
-    opacity: 0;
-  }
-
-  // Remove default Firefox focus styles
-  &::-moz-focus-outer {
-    border: 0;
-  }
-
-  // Webkit thumb
-  &::-webkit-slider-thumb {
-    border: 0;
-    width: 22px;
-    height: 22px;
-    border-radius: 50%;
-    background: $white;
-    -webkit-appearance: none;
-    background: rgba($aluminum, .25);
-    border: 1px solid rgba($aluminum, .25);
-    box-shadow:
-      0 0 0 8px $white inset,
-      0 0 0 10px $aluminum inset;
-    transition:
-      border .2s,
-      box-shadow .2s;
-  }
-
-  &:hover::-webkit-slider-thumb {
-    border: 1px solid $aluminum;
-  }
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  flex-direction: row;
+  align-items: center;
 
-  &:focus::-webkit-slider-thumb,
-  &:active::-webkit-slider-thumb {
-    border: 1px solid $cerulean;
-    box-shadow:
-      0 0 0 8px $white inset,
-      0 0 0 10px $cerulean inset;
-  }
-
-  // Firefox thumb
-  &::-moz-range-thumb {
-    border: 0;
-    width: 22px;
-    height: 22px;
-    cursor: pointer;
-    border-radius: 50%;
-    -moz-appearance: none;
-    box-sizing: border-box;
-    background: rgba($aluminum, .25);
-    border: 1px solid rgba($aluminum, .25);
-    box-shadow:
-      0 0 0 8px $white inset,
-      0 0 0 10px $aluminum inset;
-    transition:
-      border .2s,
-      box-shadow .2s;
+  // Remove top spacing from submit button
+  > [type=submit] {
+    margin-top: 0;
+    align-self: stretch;
   }
 
-  &:hover::-moz-range-thumb {
-    border: 1px solid $aluminum;
+  label + & {
+    margin-top: -5px;
   }
 
-  &:focus::-moz-range-thumb,
-  &:active::-moz-range-thumb {
-    border: 1px solid $cerulean;
-    box-shadow:
-      0 0 0 8px $white inset,
-      0 0 0 10px $cerulean inset;
+  .label-text-wrapper {
+    &:before           { top: vr(2/15); }
+    .label-text:before { top: vr(3/5); }
   }
 }
 
-/* ===================================== *
- * vii. Other HTML5
- * ------------------------------------- */
-
-// Color inputs
-input[type=color] {
-  appearance: none;
-  width: 50px;
-  height: 50px;
-  padding: 5px 3px;
-  background: $white;
-  border: 1px solid $alto;
-  border-radius: $radius;
-  cursor: crosshair;
-
-  &:hover,
-  &:focus,
-  &:active {
-    border-color: $aluminum;
-  }
+.form-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  margin: 0 -5px;
 
-  &::-webkit-color-swatch-wrapper {
-    background: $white;
-    padding: 0 2px;
+  > * {
+    padding: 0 5px;
   }
 }
 
-input[type=date],
-input[type=month],
-input[type=week],
-input[type=datetime],
-input[type=datetime-local] {
-  height: 50px;
-}
-
-/* ===================================== *
- * viii. Button
- * ------------------------------------- */
-
-// Form buttons
-input[type=button],
-button[type=button] {
-  @include button;
-}
-
-// Form submit buttons
-input[type=submit],
-button[type=submit] {
-  @extend %success-btn;
-}
-
-/* ===================================== *
- * ix. Validation
- * ------------------------------------- */
-
-// Apply validation styles to inputs & textareas
-textarea, #{$text-inputs}, select {
-
-  // Strip default styling
-  &:invalid {
-    outline: 0;
-    box-shadow: none;
-  }
-
-  // Apply valid state color to required fields & adjacent labels
-  &.valid:required,
-  .valid &:required {
-    color: $apple;
-  }
-
-  // Apply valid state to required fields
-  &.valid:required,
-  .valid &:required   {
-    border-color: $apple;
-  }
-
-  // Apply invalid state color to required fields & adjacent labels
-  &.invalid:required,
-  .invalid &:required {
-    color: $punch;
+.wide-cell {
+  flex: 1 0 auto;
+  @include until(400px) {
+    width: 100%;
   }
+}
 
-  // Apply invalid state to required fields
-  &.invalid:required,
-  .invalid &:required {
-    border-color: $punch;
-  }
+.button-cell {
+  display: flex;
+  flex-direction: row-reverse;
 
-  // Apply valid state to Chrome’s autofilled fields
-  &.valid:required:-webkit-autofill,
-  .valid &:required:-webkit-autofill {
-    -webkit-text-fill-color: $apple;
+  @include until(550px) {
+    width: 100%;
   }
 
-  // Apply invalid state to Chrome’s autofilled fields
-  &.invalid:required::-webkit-autofill,
-  .invalid &:required::-webkit-autofill {
-    -webkit-text-fill-color: $punch;
+  @include until(400px) {
+    a.button, button {
+      width: 100%;
+    }
   }
 }
 
-// Validation message animation declaration
-@keyframes scale-fade-in {
-  0% {
-    opacity: 0;
-    transform: translate(-50%, -6px) scale(.5);
-  }
+label {
+  display: flex;
+  font-size: 15px;
+  flex-direction: column;
+  position: relative;
+  flex: 1 0 auto;
+  margin: 18px 0;
 
-  100% {
-    opacity: 1;
-    transform: translate(-50%, 6px) scale(1);
+  &.label-text {
+    transition-property: box-shadow, color;
   }
-}
-
-// Inline validation messages
-.validation-message {
-  position: absolute;
-  left: 50%;
-  top: 100%;
-  width: 325px;
-  max-width: 100vw;
-  z-index: 3;
-  text-align: center;
-  transform: translate(-50%, 6px) scale(1);
-  transform-origin: center top;
-  animation: scale-fade-in .2s ease-out;
-
-  // Message bubble (also a hack to maintain proper word wrap)
-  p {
-    display: inline-block;
-    margin: 0;
-    padding: 12px 18px;
-    border-radius: $radius;
-    background: $punch;
-    color: $white;
-    font-size: 14px;
-    line-height: 21px;
-
-    // Message bubble triangle
-    &:before {
-      content: '';
-      position: absolute;
-      left: 50%;
-      margin-left: -6px;
-      bottom: 100%;
-      width: 0;
-      height: 0;
-      border-style: solid;
-      border-width: 0 6px 6px 6px;
-      border-color: transparent transparent $punch transparent;
-    }
+  select, input, textarea {
+    margin: 0px;
   }
 }
+