cutlass_js_rails 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d57df8ee7ba7c8cf49e6a68d28bec8b231c2f56f
-  data.tar.gz: 087c98907ce79fed611e2e585da5ed2f1555fe47
+  metadata.gz: afbc791a69353795198913e79a19bb228c214cfc
+  data.tar.gz: 5d28e91a960a6b6803591216b25cb84575940b71
 SHA512:
-  metadata.gz: 3d45ade76faa0e0ce4d072376a8c0fc813e38900f78da187dd71edefb14d83c04c3df5949899ee0f22eed9436fbb4d0451733eccbbe9f60157d1f34975b1a25b
-  data.tar.gz: 1db7b90ea56a4b9a501a8ee9b7af1470477615bbfb563d5901a3c6cf9f25380f49e42e33007a1a130d206a339f8b150f331c2a2331600607232c55c8ed2d72c6
+  metadata.gz: 62a9eaded77189cd48cad57e4803436756f7fe596c17a9a55c6b2521505fa05458bc0b255a975bac4ed688e5922ee9c34b50cc5ce898bafeff6e617bb46a9e1e
+  data.tar.gz: 66c133818fffb50cd2f51a0384f32a0b56c0e399b850a866f4367362977ac5a563081345bbfda961ab51e0807a166b2160983da502816d547ba6160f2dfcfd9e

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

@@ -0,0 +1,26 @@
+//HELPERS ========================================
+var Cutlass = {}
+
+Cutlass.toggleInputActive = function($el, event){
+  if(event == 'focus'){
+    Cutlass.makeActive($el);
+  }
+  else if( !$el.val().length ){ //blur event
+    Cutlass.removeActive($el);
+  }
+}
+
+Cutlass.toggleSelectActive = function($select){
+  if( $select.val() ){
+    Cutlass.makeActive($select);
+  }
+  else{
+    Cutlass.removeActive($select);
+  }
+}
+Cutlass.makeActive = function($input){
+  $input.parent().addClass('s-active');
+}
+Cutlass.removeActive = function($input){
+  $input.parent().removeClass('s-active');
+}

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

@@ -0,0 +1,30 @@
+Cutlass.generateHTML = function(){
+  Cutlass.generateTexts();
+  Cutlass.generateSelects();
+}
+Cutlass.generateTexts = function(){
+  $('.Cutlass-input-text').each(function(){
+    Cutlass.wrapInItem($(this), 'm-text')
+    Cutlass.addLabel($(this))
+  })
+}
+Cutlass.generateSelects = function(){
+  $('.Cutlass-input-select').each(function(){
+    Cutlass.wrapInItem($(this), 'm-select')
+    Cutlass.addLabel($(this))
+  })
+}
+
+
+// HELPERS =====================
+Cutlass.wrapInItem = function($el, cssClass){
+  var $div = $('<div class="Cutlass-item ' + cssClass + '"></div>');
+  $el.before($div)
+  var $input = $el.detach();
+  $div.append($input)
+}
+Cutlass.addLabel = function($input){
+  var labelText = $input.data('label');
+  var $label = $('<div class="Cutlass-label">' + labelText + '</div>')
+  $input.before($label)
+}

data/app/assets/javascripts/cutlass.js

@@ -0,0 +1,32 @@
+//= require cutlass/helpers
+//= require cutlass/html_generation
+$(document).ready(function(){
+  Cutlass.generateHTML()
+
+  //TEXT INPUTS ========================================
+
+  $(document).on('focus', '.Cutlass-input-text', function(){
+    Cutlass.toggleInputActive( $(this), 'focus' );
+  })
+
+  $(document).on('blur', '.Cutlass-input-text', function(){
+    Cutlass.toggleInputActive( $(this), 'blur' );
+  })
+
+  $('.Cutlass-input-text').each(function(){
+    if($(this).val().length){
+      Cutlass.makeActive($(this));
+    }
+  })
+
+  //SELECT BOXES ========================================
+
+  $(document).on('change', '.Cutlass-input-select', function(){
+    Cutlass.toggleSelectActive($(this))
+  })
+
+  $('.Cutlass-input-select').each(function(){
+    Cutlass.toggleSelectActive($(this))
+  })
+
+})

data/app/assets/stylesheets/_cutlass.scss

@@ -0,0 +1,94 @@
+$left-padding: 30px;
+$right-padding: 15px;
+$cutlass-border-color: #e4e4e4 !default;
+$cutlass-label-color: #080808 !default;
+$cutlass-label-opacity: .5;
+$cutlass-active-label-color: #080808 !default;
+$cutlass-input-color: #080808 !default;
+
+.Cutlass-group{
+  text-align: left;
+  margin-bottom: 10px;
+}
+.Cutlass-item{
+  position: relative;
+  min-height: 60px;
+  border-bottom: 1px solid $cutlass-border-color;
+}
+.Cutlass-label{
+  color: $cutlass-label-color;
+  transition: all .2s;
+  font-size: 15px;
+  opacity: $cutlass-label-opacity;
+}
+%Cutlass-input{
+  border: 0;
+  font-size: 15px;
+}
+
+// ========================================================
+// TEXT INPUT
+// ========================================================
+.m-text{
+  .Cutlass-label{
+    position: absolute;
+    left: $left-padding;
+    top: 18px;
+    opacity: $cutlass-label-opacity;
+  }
+  .Cutlass-input-text{
+    @extend %Cutlass-input;
+    position: relative;
+    color: $cutlass-input-color;
+    padding: 32px $right-padding 10px $left-padding;
+    background-color: transparent;
+    z-index: 5;
+  }
+}
+
+// ========================================================
+// SELECT INPUT
+// ========================================================
+.m-select{
+  .Cutlass-label{
+    position: absolute;
+    left: $left-padding;
+    top: 18px;
+  }
+  .Cutlass-input-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
+    }
+  }
+}
+
+// ========================================================
+// MODIFIERS
+// ========================================================
+
+//Change label position on text inputs
+.s-active{
+  .Cutlass-label{
+    font-size: 12px;
+    transform: translateY(-6px);
+  }
+
+  //Active for selectboxes
+  &.m-select.s-active{
+    .Cutlass-input-select{
+      padding-top: 22px;
+    }
+  }
+}

data/lib/cutlass_js_rails/version.rb

@@ -1,3 +1,3 @@
 module CutlassJsRails
-  VERSION = "0.1.0"
+  VERSION = "0.1.1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: cutlass_js_rails
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - chardos
@@ -51,6 +51,10 @@ files:
 - LICENSE.txt
 - README.md
 - Rakefile
+- app/assets/javascripts/cutlass.js
+- app/assets/javascripts/cutlass/helpers.js
+- app/assets/javascripts/cutlass/html_generation.js
+- app/assets/stylesheets/_cutlass.scss
 - bin/console
 - bin/setup
 - cutlass_js_rails.gemspec