ratchet_design 0.1.37 → 0.1.38

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA256:
-  metadata.gz: 007103b25279a293cb11593f8478b6c75200bfe49f7c410cf0c1d96afd897f1b
-  data.tar.gz: 580243470ddaf4738b5f23ff8b46bef3f59c1fb33a4930fdc20c59c81b04bc7d
+SHA1:
+  metadata.gz: c176405659456e0bdefd76714d1dab0c626192c3
+  data.tar.gz: 21d34251ba9649ae73bc11b52e86044c0a3bbd7e
 SHA512:
-  metadata.gz: 50c216ec852e38aed3de91179818681ec09fbada027e868a4ea01bd9c4f6244d0d4d6214523fa53540f1b962ca16cc34573bc88d3dd0807d1475f1f05f136c5d
-  data.tar.gz: 661e3f0b3e10af905e0550762e809b698a3e6f557152bda1b50e54362564204eb197c00420530c186ac3b5c51493ef4762a0bd94869d75e6d72665b2b5261b9e
+  metadata.gz: f65a2973861d066df0ef5590c1b127d1d3b2f811bf09dbb03a5213880a31d6d145b518d77d8b9509e3374c02dc8b33682bf0a9fef9c1cd7189aab056a05ffede
+  data.tar.gz: 4b394dce4506e284c8657b54626a7f7059d5305ee1e18f0992e1ba4110b3867b73a588e9aab85fed85b925648fd154010a8fb31bb32df8c6fb46e715ba4d96a2

data/app/assets/javascripts/ratchet/base/form.js

@@ -39,40 +39,6 @@ var form = function( element, settings ) {
 
   //}
 
-  // Loop over any checkbox/radio inputs that are present
-  for ( var tickIndex = 0; tickIndex < tickEls.length; tickIndex++ ) {
-
-    // And run their handler function explicitly at runtime
-    tickHandler( tickEls[ tickIndex ] );
-
-  }
-
-  // Checkbox/radio input hander function
-  function tickHandler( elem ) {
-
-    // Find element’s parent node
-    var labelParent = elem.parentNode;
-
-    // If parent is a label
-    if ( labelParent.tagName === 'LABEL' ) {
-
-      // Simply add the `tick-label` classname
-      labelParent.classList.add( 'tick-label' );
-
-      // Otherwise
-    } else {
-
-      // Wrap the element properly
-      elem.insertAdjacentHTML( 'beforebegin', '<label class="tick-label"></label>' );
-      elem.previousSibling.insertAdjacentElement( 'afterbegin', elem );
-
-    }
-
-    // And add empty span to label
-    elem.insertAdjacentHTML( 'afterend', '<span class="tick-label"></span>' );
-
-  }
-
   // Keydown handler function
   function restrictInput( event ) {
 

data/app/assets/stylesheets/ratchet/_core.scss

@@ -19,6 +19,7 @@
 @import 'base/document';
 @import 'base/section';
 @import 'base/slider';
+@import 'base/check-radio';
 
 // Enhancement modules
 @import 'enhancement/feature';

data/app/assets/stylesheets/ratchet/base/_check-radio.scss

@@ -0,0 +1,165 @@
+
+.switch-label,
+.tick-label {
+  pointer-events: none;
+
+  * {
+    pointer-events: all;
+  }
+}
+
+label.tick-box {
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+
+  // Bounce a little :)
+  *, *:after, *:before {
+    transition-timing-function: cubic-bezier( 0.175, 0.885, 0.320, 1.275 );
+  }
+
+  // Radios & checkboxes
+  input {
+
+    // Element styled to replace checkbox or radio button
+    + .tick {
+      width: 20px;
+      height: 20px;
+      margin: 0 8px 0 0;
+      background: $white;
+      transition-property: box-shadow;
+      box-shadow: input-shadow(), $empty-shadow inset;
+      top: -3px;
+    }
+
+    @include input-active {
+      border: none;
+
+      + .tick { box-shadow: input-shadow( $gray-08 ), $empty-shadow inset; }
+    }
+
+    &:disabled {
+      pointer-events: none;
+      cursor: default;
+      color: $gray-05;
+
+      + .tick {
+        box-shadow: 0 0 0 1px $gray-06 inset;
+      }
+    }
+  }
+
+  input[type=radio] {
+
+    // Unchecked
+    + .tick {
+      border-radius: 50%;
+      position: relative;
+
+      &:before, &:after {
+        content: '';
+        background-color: white;
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100%;
+        width: 100%;
+        border-radius: 50%;
+        box-shadow: 0 0 0 transparent;
+        transform: scale(0);
+        transition-property: box-shadow, transform;
+      }
+
+      &:before { background-color: $gray-06; }
+    }
+
+    // Checked
+    &:checked + .tick {
+      box-shadow: input-shadow( darken($blue-03, 3) ), 0 0 0 8px $blue-03 inset;
+
+      &:after {
+        box-shadow: 0 1px 0 2px darken($blue-03, 15);
+        transform: scale(.35);
+      }
+    }
+
+    // Hover, focus, active
+    @include input-active {
+      
+      // Active Unchecked
+      + .tick {
+        &:before { transform: scale(.35); }
+        &:after  { transform: scale(0);   }
+      }
+
+      // Active Checked
+      &:checked + .tick {
+        box-shadow: input-shadow( darken($blue-03, 15) ), 0 0 0 8px darken( $blue-03, 5 ) inset;
+
+        &:before { transform: scale(0);   }
+        &:after  { transform: scale(.35); }
+      }
+    }
+  }
+
+  // Checkboxes
+  input[type=checkbox] {
+
+    // Unchecked
+    + .tick {
+      border-radius: $radius;
+      position: relative;
+
+      &:before, &:after {
+        content: '';
+        position: absolute;
+        left: -4px;
+        top: 0px;
+        width: 140%;
+        height: 70%;
+        margin: 10% 0 0 0;
+        border: solid $white;
+        border-width: 0 0 6px 6px;
+        transition-property: transform, border-color;
+        transform: scale(0) rotate(-50deg);
+      }
+    }
+
+    // Checked
+    &:checked + .tick {
+      box-shadow: input-shadow( darken($blue-03, 3) ), 0 0 0 10px $blue-03 inset;
+
+      &:after, &:before {
+        transform: scale(.5) rotate(-50deg);
+      }
+
+      &:before {
+        top: 1px;
+        opacity: 1;
+        border-color: darken( $blue-03, 10 );
+      }
+    }
+
+    // Hover, focus, active
+    @include input-active {
+      
+      // Active Uncheked
+      + .tick:before {
+        border-color: $gray-06;
+        transform: scale(.4) rotate(-50deg);
+      }
+
+      // Active Checked
+      &:checked + .tick {
+        box-shadow: input-shadow( darken($blue-03, 15) ), 0 0 0 10px darken( $blue-03, 5 ) inset;
+
+        &:before {
+          top: 1px;
+          opacity: 1;
+          transform: scale(.5) rotate(-50deg);
+          border-color: darken( $blue-03, 10 );
+        }
+      }
+    }
+  }
+}

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

@@ -36,6 +36,19 @@ $text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], inp
   * { pointer-events: all; }
 }
 
+$input-weight-shadow: 0 1px 3px rgba($gray-11, .3);
+
+@function input-shadow($color: rgba($gray-11, .2), $size: 1px) {
+  @return 0 0 0 $size $color inset, $empty-shadow;
+}
+
+@function input-focus-shadow($color: rgba($gray-11, .3), $size: 1px) {
+  @return 0 0 0 $size $color inset, $input-weight-shadow
+}
+
+$focus-shadow: input-focus-shadow();
+$input-shadow: input-shadow();
+
 label {
   // Bare text-based inputs
   + input,

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

@@ -1,46 +1,39 @@
 // Apply validation styles to inputs & textareas
+label.valid:not(.remotely-invalid) {
+  color: $green-01;
 
-@mixin validation-style( $shadow, $focus-shadow, $focus: true) {
-  color: currentColor;
-  -webkit-text-fill-color: currentColor;
-  box-shadow: $shadow;
+  input, select:not([tabindex="-1"]), textarea {
+    -webkit-text-fill-color: currentColor;
+    box-shadow: input-shadow( $green-01 );
 
-  &:-webkit-autofill {
-    box-shadow: $shadow;
-  }
-
-  @include input-active {
-    box-shadow: $focus-shadow;
-
-    &:-webkit-autofill {
-      box-shadow: $focus-shadow;
-    }
+     @include input-active {
+       box-shadow: input-focus-shadow( $green-01 )
+     }
   }
 }
 
-label.valid {
-  color: $grass;
+label.invalid,
+label.remotely-invalid:not(.valid) {
+  color: $red-01;
+  flex-wrap: wrap;
 
-  input, textarea {
-    @include validation-style( input-shadow( $grass ), input-focus-shadow( $grass ) )
-  }
-  select {
-    @include validation-style( select-shadow( $grass ), select-focus-shadow( $grass ), false )
+  input, select:not([tabindex="-1"]), textarea {
+    -webkit-text-fill-color: currentColor;
+     box-shadow: input-shadow( $red-01 );
+
+     @include input-active {
+       box-shadow: input-focus-shadow( $red-01 )
+     }
   }
 }
 
-label.invalid {
-  color: $rusty;
 
-  input, textarea {
-    @include validation-style( input-shadow( $rusty ), input-focus-shadow( $rusty ) )
-  }
-  select {
-    @include validation-style( select-shadow( $rusty ), select-focus-shadow( $rusty ), false )
-  }
+// Validation message animation declaration
+@keyframes expand-validation {
+  0% { max-height: 0em; }
+  100% { max-height: 2.5em; }
 }
 
-// Validation message animation declaration
 @keyframes scale-fade-in {
   0% {
     opacity: 0;
@@ -54,41 +47,48 @@ label.invalid {
 }
 
 // Inline validation messages
-.validation-message {
-  position: absolute;
-  left: 50%;
-  top: 100%;
-  width: 325px;
-  max-width: 100vw;
+.validation-message,
+.remote-validation-message {
+  overflow: hidden;
+  display: block;
   z-index: 3;
-  text-align: center;
-  transform: translate(-50%, 6px) scale(1);
-  transform-origin: center top;
-  animation: scale-fade-in $duration 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: $rusty;
-    color: $white;
-    font-size: 14px;
-    line-height: 21px;
-
-    // Message bubble triangle
+  animation: expand-validation $duration $timing;
+  position: relative;
+  top: -1px;
+  width: 100%;
+}
+
+// Message bubble (also a hack to maintain proper word wrap)
+.validation-message-text {
+  margin: 0;
+  display: block;
+  padding: .8em .8em;
+  border-radius: 0 0 $radius $radius;
+  color: $white;
+  font-size: 12px;
+  line-height: 1em;
+  background: $gray-08;
+
+  .invalid &,
+  .remotely-invalid:not(.valid) & {
+    background: $red-01;
+  }
+}
+
+.valdiation-error-item,
+.validation-error-notice {
+  display: block;
+  line-height: 1.3em;
+}
+
+.validation-error-notice {
+  font-weight: bold;
+  margin-bottom: .2em;
+
+  ~ .valdiation-error-item {
+    margin-left: .5em;
     &: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 $rusty transparent;
+      content: "• ";
     }
   }
 }

data/app/assets/stylesheets/ratchet/utility/_color.scss

@@ -79,3 +79,26 @@ $translucent-white: rgba($white, .5);
   //   }
   // }
 }
+
+$gray-01: #f7fafb;
+$gray-02: #f5f7fa;
+$gray-03: #f0f3f6;
+$gray-04: #dfe3e6;
+$gray-05: #d6dde7;
+$gray-06: #c3cdda;
+$gray-07: #b4c1d2;
+$gray-08: #8c9ba5;
+$gray-09: #5a6872;
+$gray-10: #152934;
+$gray-11: #0f212e;
+
+$blue-01: #5aaafa;
+$blue-02: #5596e6;
+$blue-03: #0094fd;
+$blue-04: #006dff;
+
+
+$green-01: #2ac84f;
+$green-02: #5aa700;
+$red-01:   #dd2f41;
+$red-02:   #A81C27;

data/app/assets/stylesheets/ratchet/utility/_global.scss

@@ -112,6 +112,7 @@ $mono-font: 'Nitti', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
 
 // Transition duration
 $duration: .2s;
+$timing: cubic-bezier(0.4, 0.0, 0.2, 1);
 
 /* ===================================== *
  * Layout

data/app/helpers/ratchet/form_helper.rb

@@ -309,7 +309,7 @@ module Ratchet
 
       options[:label] ||= options.delete(:label_placeholder)
 
-      option_tags ||= extract_block(&block) if block_given?
+      option_tags ||= capture(&block).html_safe if block_given?
 
       input_tag(:select, name, option_tags.html_safe, options)
     end
@@ -347,7 +347,7 @@ module Ratchet
         value = value.html_safe if value
         select_tag(name, value, options)
       when :textarea
-        value ||= extract_block(&block)
+        value ||= capture(&block).html_safe if block_given?
         text_area_tag(name, value, options)
       else
         text_field_tag(name, value, options)
@@ -405,7 +405,8 @@ module Ratchet
 
     def tick_wrapper( name, options, &block )
 
-      tag = extract_block(&block)
+      tag = capture(&block).html_safe
+      options.delete(:required)
 
       tick = content_tag(:span, class: 'tick') {''}
       label = content_tag(:span, class: 'label-text') { options.delete(:label) || name }