cutlass_js_rails 0.4.4 → 0.4.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 3b6d5a43a5ccdbcbb8238401b692f30df6d1aa99
-  data.tar.gz: 7a2a01dcc7069a69fa494718de681f34daa1b90e
+  metadata.gz: 6072050b62fb94cfaec9ec9fa68ea755b4f3cecb
+  data.tar.gz: 00cdf69b9d4388632ebc42a35186049b34255141
 SHA512:
-  metadata.gz: ee43d2151681a172a6c357545ebccbf2fa49c3254b0175a04911952175aabac810562666efd0184f7a4762d871027b1ac8aaa83ba3a50ddc294f0e41bac411b6
-  data.tar.gz: 115fadc5df164a09b5ac6f4a3976d3de998d5691f0386492c70dfeb9fb2975526c5b1f9802628e6e83fa21f0b758f619667b120b3a6b79d8c89f12bf7b8157e7
+  metadata.gz: e07990b528a4185c1e0a649b1031c9fe774654d0c90587cc625c137afcaf0ea4ada6273d965973b7cb9f8953949feb40492d8a928d42aee7cf0e3026295a5b84
+  data.tar.gz: a684b3351dfd80e92833981ed617ce1ec57ca8fce5d3783ff801006a43d7be30f881423f8f6b6ce05e551d49ec9309ad968e8e53ba659a32e6abdf016325e6e6

data/app/assets/javascripts/cutlass.js

@@ -25,10 +25,12 @@ document.addEventListener("turbolinks:load", function() {
 
   //SELECT BOXES ========================================================
 
-  $(document).on('change', '.Cutlass-input-select', function(){
+  $(document).on('change', '.Cutlass-input-select, .Cutlass-input-select--large ', function(){
     Cutlass.toggleSelectActive($(this))
   })
 
+
+
   $('.Cutlass-input-select').each(function(){
     Cutlass.toggleSelectActive($(this))
   })

data/app/assets/javascripts/cutlass/helpers.js

@@ -26,7 +26,7 @@ Cutlass.removeActive = function($input){
 }
 
 Cutlass.animateFields = function(){
-  $('.Cutlass-input-text, .Cutlass-input-select, .Cutlass-input-radio, .Cutlass-input-toggler, .Cutlass-input-link').addClass('s-shown');
+  $('.Cutlass-input-text, .Cutlass-input-select, .Cutlass-input-select--large, .Cutlass-input-radio, .Cutlass-input-toggler, .Cutlass-input-link').addClass('s-shown');
   $('.Cutlass-item').each(function(i){
     var $el = $(this)
     setTimeout(function(){

data/app/assets/javascripts/cutlass/html_generation.js

@@ -1,5 +1,5 @@
 Cutlass.generateAllHTML = function(){
-  Cutlass.generateHTML(['text', 'select', 'radio', 'toggler', 'link'])
+  Cutlass.generateHTML(['text', 'select', 'select--large', 'radio', 'toggler', 'link'])
 }
 
 Cutlass.generateHTML = function(inputTypes){

data/app/assets/stylesheets/_cutlass.scss

@@ -45,7 +45,7 @@ $cutlass-link-color: #ff7c14 !default;
 // ========================================================
 // HIDING PRE-HTML-GENERATION
 // ========================================================
-.Cutlass-input-text, .Cutlass-input-select, .Cutlass-input-radio, .Cutlass-input-toggler, .Cutlass-input-link{
+.Cutlass-input-text, .Cutlass-input-select, .Cutlass-input-select--large, .Cutlass-input-radio, .Cutlass-input-toggler, .Cutlass-input-link{
   opacity: 0;
   &.s-shown{
     opacity: 1;
@@ -76,6 +76,35 @@ $cutlass-link-color: #ff7c14 !default;
 // ========================================================
 // SELECT INPUT
 // ========================================================
+
+%Cutlass-select{
+  position: relative;
+  color: $cutlass-input-color;
+  background-color: transparent;
+  height: 59px;
+  width: 100%;
+  z-index: 5;
+  outline: 0;
+  appearance: none;
+  -webkit-appearance: none;  /*Removes default chrome and safari style*/
+  -moz-appearance: none;  /*Removes default style Firefox*/
+  &::-ms-expand{
+    display: none; //IE10 remove arrow
+  }
+}
+
+%Cutlass-arrow{
+  content: '';
+  position: absolute;
+  top: 55%;
+  margin-top: -6px;
+  right: 10px;
+  background-image: image-url("down_arrow.png");
+  background-size: 13px 8px;
+  width: 13px;
+  height: 8px;
+}
+
 .m-select{
   .Cutlass-label{
     position: absolute;
@@ -83,24 +112,37 @@ $cutlass-link-color: #ff7c14 !default;
     top: 18px;
   }
   .Cutlass-input-select{
+    @extend %Cutlass-select;
     @extend %Cutlass-input;
-    position: relative;
-    height: 59px;
-    color: $cutlass-input-color;
     padding: 8px $right-padding 0 $left-padding;
-    background-color: transparent;
-    width: 100%;
-    z-index: 5;
-    outline: 0;
-    appearance: none;
-    -webkit-appearance: none;  /*Removes default chrome and safari style*/
-    -moz-appearance: none;  /*Removes default style Firefox*/
-    &::-ms-expand{
-      display: none; //IE10 remove arrow
-    }
+  }
+  &:before{
+    @extend %Cutlass-arrow;
+    right: 15px;
   }
 }
 
+.m-select--large{
+  .Cutlass-label{
+    position: absolute;
+    left: $left-padding;
+    top: 16px;
+    font-size: 20px;
+    height: 20px;
+  }
+  &.s-active .Cutlass-label {
+    display: none;
+  }
+  .Cutlass-input-select--large{
+    @extend %Cutlass-select;
+    @extend %Cutlass-input;
+    font-size: 20;
+    padding: 3px $right-padding 0 $left-padding;
+  }
+  &:before{
+    @extend %Cutlass-arrow;
+  }
+}
 // ========================================================
 // TOGGLER INPUT
 // ========================================================

data/app/views/cutlass/_select_field.html.erb

@@ -2,4 +2,4 @@
 <% code = local_assigns.fetch(:code) %>
 <% props = local_assigns.fetch(:props, {}) %>
 <% value = local_assigns.fetch(:value, '') %>
-<%= f.select code, options_for_select(options, selected: value), { selected: value }, { class: "Cutlass-input-select #{css_classes}", 'data-label': label, 'data-error': model.errors[code][0] }.merge(props) %>
+<%= f.select code, options_for_select(options, selected: value), { selected: value }, { class: "Cutlass-input-select #{css_classes}", 'data-label': label, 'data-error': model&.errors ? model.errors[code][0] : nil }.merge(props) %>

data/app/views/cutlass/_select_field_large.html.erb

@@ -0,0 +1,5 @@
+<% css_classes = (defined? css_classes) ? css_classes : '' %>
+<% code = local_assigns.fetch(:code) %>
+<% props = local_assigns.fetch(:props, {}) %>
+<% value = local_assigns.fetch(:value, '') %>
+<%= f.select code, options_for_select(options, selected: value), { selected: value }, { class: "Cutlass-input-select--large #{css_classes}", 'data-label': label, 'data-error': model&.errors ? model.errors[code][0] : nil }.merge(props) %>

data/lib/cutlass_js_rails/version.rb

@@ -1,3 +1,3 @@
 module CutlassJsRails
-  VERSION = '0.4.4'
+  VERSION = '0.4.5'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: cutlass_js_rails
 version: !ruby/object:Gem::Version
-  version: 0.4.4
+  version: 0.4.5
 platform: ruby
 authors:
 - chardos
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-07-05 00:00:00.000000000 Z
+date: 2016-07-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -51,6 +51,7 @@ files:
 - LICENSE.txt
 - README.md
 - Rakefile
+- app/assets/images/down_arrow.png
 - app/assets/javascripts/cutlass.js
 - app/assets/javascripts/cutlass/helpers.js
 - app/assets/javascripts/cutlass/html_generation.js
@@ -60,6 +61,7 @@ files:
 - app/views/cutlass/_link_field.html.erb
 - app/views/cutlass/_radio_field.html.erb
 - app/views/cutlass/_select_field.html.erb
+- app/views/cutlass/_select_field_large.html.erb
 - app/views/cutlass/_text_field.html.erb
 - app/views/cutlass/_toggle_field.html.erb
 - bin/console
@@ -87,7 +89,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.6.4
+rubygems_version: 2.5.1
 signing_key: 
 specification_version: 4
 summary: Cuts down the size of inputs by reducing the prominence of labels once a