ratchet_design 0.1.0

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

@@ -0,0 +1,614 @@
+/* ========================================================================== *
+ * e. Form module
+ * -------------------------------------------------------------------------- */
+
+/* ===================================== *
+ * i. Utility
+ * ------------------------------------- */
+
+// Nested labels
+@mixin nested-label($size: normal) {
+
+  // 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);
+  $distance:  if($size == large, -24px, -22px);
+  $scale:     if($size == large,  .824,  .875);
+
+  // Active state
+  %active {
+    z-index: 2;
+    transform: translate3d(0, $distance, 0) scale($scale);
+  }
+
+  // Hide input placeholder text
+  ::placeholder {
+    opacity: 0;
+    color: transparent;
+  }
+
+  // Input labels
+  label {
+    display: flex;
+    width: 100%;
+    padding: 0;
+    background: $white;
+    font-size: $font-size;
+    margin-bottom: $margin;
+  }
+
+  // Default active color
+  :not(.valid):not(.invalid) > {
+    input,
+    textarea {
+      &:focus + span,
+      &:active + span {
+        color: darken($aluminum, 10);
+      }
+    }
+  }
+
+  // Validated label
+  .valid > {
+    input,
+    textarea {
+
+      // Active state
+      + span {
+        @extend %active;
+      }
+
+      // Non-required active color
+      &:not(:required):focus + span,
+      &:not(:required):active + span {
+        color: darken($aluminum, 10);
+      }
+
+      // Required active color
+      &:required + span {
+        color: $lima;
+      }
+    }
+  }
+
+  // Invalidated label
+  .invalid > {
+    input,
+    textarea {
+
+      // Active state
+      + span {
+        @extend %active;
+      }
+
+      // Non-required active color
+      &:not(:required):focus + span,
+      &:not(:required):active + span {
+        color: darken($aluminum, 10);
+      }
+
+      // Required active color
+      &:required + span {
+        color: $punch;
+      }
+    }
+  }
+
+  // Select-specific styles
+  select {
+    font-size: $font-size;
+    line-height: inherit;
+    padding: $padding-y $padding-x;
+  }
+
+  // Inputs
+  input,
+  select,
+  textarea {
+    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: perspective(1px) translate3d(0, 0, 0) scale(1);
+      transition:
+        z-index .2s,
+        color .2s,
+        transform .2s;
+    }
+
+    // Move labels out of the way on focus
+    &:focus + span,
+    &:active + span {
+      @extend %active;
+    }
+  }
+}
+
+%success-btn {
+  @include button($color: $lima);
+}
+
+/* ===================================== *
+ * ii. Common
+ * ------------------------------------- */
+
+// Remove default fieldset styles
+fieldset {
+  border: 0;
+  padding: 0;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+// Fieldset legends
+legend {
+  font-size: 14px;
+  text-transform: uppercase;
+  letter-spacing: .02em;
+  font-weight: 700;
+  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;
+  }
+
+  // Nested range inputs
+  > input[type=range] {
+    margin-top: 12px;
+    margin-bottom: 5px;
+  }
+}
+
+/* ===================================== *
+ * iii. Text-based
+ * ------------------------------------- */
+
+// Inputs
+input,
+select,
+textarea {
+  width: 100%;
+  font-size: 16px;
+  line-height: vr(2); // 30px
+  padding: 9px 12px;
+  border: 1px solid $alto;
+  border-radius: $radius;
+  transition: border-color .2s;
+  appearance: none;
+
+  // 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;
+  }
+}
+
+// Bare inputs
+:not(label) > {
+  input,
+  select,
+  textarea {
+    margin-bottom: 10px;
+  }
+}
+
+// Override default search styling
+input[type=search] {
+  &,
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+  }
+}
+
+// Confine resizing of textareas
+textarea {
+  display: block;
+  resize: vertical;
+  max-height: vr(20) + 5px; // 305px
+  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] {
+  display: none;
+
+  + span {
+    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;
+    }
+  }
+}
+
+// Radios
+input[type=radio] {
+
+  + span {
+    border-radius: 50%;
+  }
+
+  &:checked + span {
+    box-shadow: 0 0 0 8px $cerulean inset;
+  }
+}
+
+// Checkboxes
+input[type=checkbox] {
+
+  + span {
+    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 + span {
+    box-shadow: 0 0 0 10px $cerulean inset;
+  }
+
+  &:checked + span:before {
+    transform: scale(.5) rotate(-45deg);
+  }
+}
+
+/* ===================================== *
+ * vi. Range slider
+ * ------------------------------------- */
+
+// Range sliders
+input[type=range] {
+  background-color: $alto;
+  width: 100%;
+  height: 8px;
+  border-radius: 4px;
+  outline: 0;
+  border: 0;
+  padding: 0;
+  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;
+  }
+
+  &: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;
+  }
+
+  &:hover::-moz-range-thumb {
+    border: 1px solid $aluminum;
+  }
+
+  &: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;
+  }
+}
+
+/* ===================================== *
+ * 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;
+  }
+
+  &::-webkit-color-swatch-wrapper {
+    background: $white;
+    padding: 0 2px;
+  }
+}
+
+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,
+input[type=url],
+input[type=tel],
+input[type=text],
+input[type=email],
+input[type=number],
+input[type=password] {
+
+  // Strip default styling
+  &:invalid {
+    outline: 0;
+    box-shadow: none;
+  }
+
+  // Apply valid state color to required fields & adjacent labels
+  &.valid:required,
+  .valid &:required {
+    color: $lima;
+  }
+
+  // Apply valid state to required fields
+  &.valid:required,
+  .valid &:required   {
+    border-color: $lima;
+  }
+
+  // Apply invalid state color to required fields & adjacent labels
+  &.invalid:required,
+  .invalid &:required {
+    color: $punch;
+  }
+
+  // Apply invalid state to required fields
+  &.invalid:required,
+  .invalid &:required {
+    border-color: $punch;
+  }
+
+  // Apply valid state to Chrome’s autofilled fields
+  &.valid:required:-webkit-autofill,
+  .valid &:required:-webkit-autofill {
+    -webkit-text-fill-color: $lima;
+  }
+
+  // Apply invalid state to Chrome’s autofilled fields
+  &.invalid:required::-webkit-autofill,
+  .invalid &:required::-webkit-autofill {
+    -webkit-text-fill-color: $punch;
+  }
+}
+
+// Validation message animation declaration
+@keyframes scale-fade-in {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -6px) scale(.5);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate(-50%, 6px) scale(1);
+  }
+}
+
+// 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;
+    }
+  }
+}