tungsten 0.1.0 → 0.1.1

data/app/assets/stylesheets/tungsten/form/_check-radio.scss

@@ -0,0 +1,154 @@
+label.tick-box {
+  flex-direction: row;
+  align-items: center;
+
+  // 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;
+    }
+
+    @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/tungsten/form/_check-switch.scss

@@ -0,0 +1,104 @@
+.check-switch {
+  $width: 70px;
+  $height: 24px;
+  $tick-width: $width/2 - 2;
+  flex-direction: row; align-items: center;
+
+  .label-text {
+    margin-right: 10px;
+    padding-bottom: 0;
+    line-height: 1.5em;
+  }
+
+  input {
+    opacity: 0;
+    position: absolute;
+  }
+
+  &-label {
+    position: absolute;
+    color: transparent;
+    font-size: 0;
+  }
+
+  &-panel {
+    width: $width;
+    height: $height;
+    background: $white;
+    position: relative;
+
+    border-radius: $radius + 2;
+    transition-property: box-shadow, border-color;
+    box-shadow: $input-shadow;
+  }
+
+  &-tick {
+    width: $tick-width;
+    height: $height - 4;
+    background: rgba(#000, .08);
+    position: absolute;
+    bottom: 2px;
+    left: 2px;
+    border-radius: $radius;
+    transition-property: box-shadow, background-color, transform;
+    transform: translate3d( 0, 0, 0 );
+    box-shadow: input-shadow();
+    font-weight: 500;
+
+    &:before {
+      content: "ON";
+      left: 0;
+      opacity: 0;
+      color: $blue-04;
+    }
+    &:after {
+      content: "OFF";
+      right: -100%;
+      opacity: 1;
+      color: $gray-08;
+    }
+    &:before, &:after {
+      display: block;
+      font-size: 12px;
+      line-height: $height - 2;
+      position: absolute;
+      width: 100%;
+      text-align: center;
+    }
+  }
+
+  input {
+    @include input-active {
+      ~ .check-switch-panel {
+        box-shadow: input-shadow($gray-08);
+        .check-switch-tick {
+          box-shadow: input-shadow( rgba($blue-04, .5) );
+          background-color: rgba($blue-04, .2);
+        }
+      }
+    }
+  }
+
+  input:checked + &-panel &-tick {
+    background-color: $blue-04;
+    box-shadow: input-shadow( darken($blue-04, 10) );
+    transform: translate3d( $tick-width , 0, 0 );
+
+    &:before,
+    &:after {
+      transform: translate3d( -$tick-width , 0, 0 );
+    }
+
+    &:before { opacity: 1; }
+    &:after { opacity: 0; }
+  }
+
+  input:checked {
+    @include input-active {
+      + .check-switch-panel .check-switch-tick {
+        box-shadow: input-shadow( darken($blue-04, 10) );
+        background-color: lighten($blue-04, 5);
+      }
+    }
+  }
+}

data/app/assets/stylesheets/tungsten/form/_index.scss

@@ -0,0 +1,4 @@
+@import 'base';
+@import 'label-placeholder';
+@import 'check-radio';
+@import 'check-switch';

data/app/assets/stylesheets/tungsten/form/_label-placeholder.scss

@@ -0,0 +1,98 @@
+@mixin label-placeholder {
+  // Scoped variables
+  $font-size:  16px;
+  $padding-x:  12px;
+  $padding-y:   9px;
+  $distance-y: -23px;
+  $distance-x: 0;
+  $scale:      .875;
+  $height:     50px;
+  $duration: .2s;
+
+  // Input labels
+  label.placeholder-label {
+
+    padding-top: 0;
+    line-height: 2em;
+    background: $white;
+    font-size: $font-size;
+
+    // Nested text-based inputs
+    > input,
+    > textarea {
+      margin-top: 5px;
+    }
+
+    // Hide input placeholder text
+    ::placeholder {
+      opacity: 0;
+      color: transparent;
+    }
+
+    // Default active color
+    :not(.valid):not(.invalid) > {
+      textarea, input {
+        &:focus + span,
+        &:active + span {
+          color: $gray-08;
+        }
+      }
+    }
+    
+    // Inputs
+    textarea, input {
+      z-index: 1;
+      margin: 0;
+      font-size: inherit;
+      background: transparent;
+      padding: $padding-y $padding-x;
+
+      // Move labels out of the way on focus and empty
+      &:focus + .placeholder-label-text, 
+      &:not(.empty) + .placeholder-label-text, {
+        z-index: 2;
+        transform: translate3d($distance-x, $distance-y, 0) scale($scale);
+        color: darken($gray-08, 10);
+      }
+    }
+
+    &.valid, &.invalid {
+      textarea, input {
+        + .placeholder-label-text {
+          color: inherit;
+        }
+      }
+    }
+
+    input {
+      line-height: inherit;
+    }
+    textarea {
+      padding-top: $padding-y + 4;
+    }
+  }
+
+  // Faux-placeholder labels
+  .placeholder-label-text {
+    pointer-events: none;
+    font-size: inherit;
+    line-height: 1.2em;
+    position: absolute;
+    top: $padding-y + 5px;
+    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;
+    color: $gray-06;
+    transform: translate3d(0, 0, 0) scale(1);
+    transition-property: color, transform;
+    background: $white;
+    box-shadow: -6px 0 $white, 6px 0 $white;
+  }
+}
+
+@include label-placeholder;
+

data/app/assets/stylesheets/tungsten/tungsten.scss

@@ -1,3 +1 @@
-// Utility modules
-@import 'colors.yml';
-@import 'core/index';
+@import 'index';

data/app/helpers/tungsten/card_helper.rb

@@ -0,0 +1,76 @@
+module Tungsten
+  module CardHelper
+    class Section < Tungsten::Helper
+
+      def initialize( title=nil )
+        @title = title
+        @children = { cards: [] }
+
+        heading( title ) if title
+      end
+
+      def display( body )
+        content_tag( :section, class: 'section' ) { 
+          concat info
+          concat content_tag(:div, class: 'section-content') { body }
+        }
+      end
+
+      def add_card(card)
+        @children[cards].push card
+      end
+
+      def heading( text = nil, &block )
+        @children[:heading] = get_tag(:header, :h2, text, { class: 'section-heading' }, &block )
+        nil
+      end
+
+      def description( text = nil, &block )
+        @children[:description] = get_tag(:div, :p, text, { class: 'section-description' }, &block )
+        nil
+      end
+
+      def card( text = nil, &block )
+        content_tag(:section, class: 'section-card') {
+          concat title( text ) if text
+          concat capture(&block).html_safe
+        }
+      end
+
+      def title( text, options={} )
+        content_tag(:header, class: "card-title #{options[:class]}") { 
+          content_tag(:h2) { text }
+        }
+      end
+
+      def content(options={}, &block )
+        content_tag(:section, class: "card-section #{options[:class]}", &block)
+      end
+
+      def footer( options={}, &block )
+        content_tag(:footer, class: "card-footer #{options[:class]}", &block)
+      end
+
+      private
+
+      def get_tag( tag, wrapper, text, options, &block )
+        text = if block_given?
+          capture(&block).html_safe
+        else
+          content_tag(wrapper){ text }
+        end
+
+        content_tag(tag, options ) { text }
+      end
+
+      def info
+        if @children[:heading]
+          content_tag(:div, class: 'section-info') { 
+            concat @children[:heading]
+            concat @children[:description]
+          }
+        end
+      end
+    end
+  end
+end