formagic 0.2.6 → 0.2.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b8a459d8ffe30f2007d2e6cc0aa170aff335a9c2
-  data.tar.gz: 906ba6688a0bd46e76ae089812336d35783f73c0
+  metadata.gz: 036c8cda2c3d45ac5416ec7dc3814badd8059221
+  data.tar.gz: c0a7916829a12c07645d139f35691c73d98cb4b4
 SHA512:
-  metadata.gz: 4b2efadf0def205ad9f43c6c76229c8df0937e21cc2eb51d493e174e6e17b86e9dbac1ec7e5648f8c4fed0483c1a22ccf85cb69cd407a2b2115e81ca3286060a
-  data.tar.gz: 58dd3656525fd1fd488bbf9f173703e9207e50230c1121ae89c5733dd49e3c4db02bf4bb928f11f4e660e6f366c5e8ea79a69396baeb6a4dc810f95a776e8328
+  metadata.gz: 2e582b43b830297cc975e26c5275e045a473e2264ae2d8dfb1db98591121575963914a533830069d90e0c5383310806f24a8cec8862b8583fc09d83c44993b26
+  data.tar.gz: 6de3953d65e323fb31129519d29fa44aa2707e664bfbef2366e8258b4e6136c37787de21a961088626e5c914c6482a6a10366b47930783dc88220a9c423d06e6

data/Gemfile.lock

@@ -1,12 +1,20 @@
 PATH
   remote: .
   specs:
-    formagic (0.2.6)
+    formagic (0.2.8)
+      bourbon (>= 3.2)
+      normalize-rails (>= 3.0)
 
 GEM
   remote: http://rubygems.org/
   specs:
+    bourbon (4.2.4)
+      sass (~> 3.4)
+      thor (~> 0.19)
+    normalize-rails (3.0.3)
     rake (10.4.2)
+    sass (3.4.18)
+    thor (0.19.1)
 
 PLATFORMS
   ruby

data/app/assets/javascripts/formagic/form.coffee

@@ -113,7 +113,7 @@ class @Form
 
     inputConfig.label    ?= name.titleize()
     inputConfig.type     ?= 'string'
-    inputConfig.klass    ?= 'stacked'
+    inputConfig.klass    ?= 'form-input'
     inputConfig.klassName = name
 
     inputClass  = chr.formInputs[inputConfig.type]

data/app/assets/javascripts/formagic/inputs/checkbox.coffee

@@ -22,7 +22,7 @@ class @InputCheckbox extends InputString
   # PRIVATE ===============================================
 
   _create_el: ->
-    @$el =$ "<label for='#{ @name }' class='input-#{ @config.type } input-#{ @config.klass } input-#{ @config.klassName }'>"
+    @$el =$ "<label for='#{ @name }' class='form-input input-#{ @config.type } input-#{ @config.klassName }'>"
 
 
   _safe_value: ->

data/app/assets/javascripts/formagic/inputs/document.coffee

@@ -44,7 +44,7 @@ class @InputDocument
   # PRIVATE ===============================================
 
   _create_el: ->
-    @$el =$ "<div class='input-stacked nested-forms input-#{ @config.klassName }'>"
+    @$el =$ "<div class='form-input nested-forms input-#{ @config.klassName }'>"
 
 
   _add_label: ->

data/app/assets/javascripts/formagic/inputs/documents.coffee

@@ -50,7 +50,7 @@ class @InputForm
   # PRIVATE ===============================================
 
   _create_el: ->
-    @$el =$ "<div class='input-stacked nested-forms input-#{ @config.klassName }'>"
+    @$el =$ "<div class='form-input nested-forms input-#{ @config.klassName }'>"
 
 
   _add_label: ->

data/app/assets/javascripts/formagic/inputs/file.coffee

@@ -28,7 +28,7 @@ class @InputFile extends InputString
   # PRIVATE ===============================================
 
   _create_el: ->
-    @$el =$ "<div class='input-#{ @config.type } input-#{ @config.klass } input-#{ @config.klassName }'>"
+    @$el =$ "<div class='form-input input-#{ @config.type } input-#{ @config.klassName }'>"
 
 
   _add_input: ->

data/app/assets/javascripts/formagic/inputs/select.coffee

@@ -15,7 +15,7 @@ class @InputSelect extends InputString
   # PRIVATE ===============================================
 
   _create_el: ->
-    @$el =$ "<div class='input-#{ @config.type } input-#{ @config.klass } input-#{ @config.klassName }'>"
+    @$el =$ "<div class='form-input input-#{ @config.type } input-#{ @config.klassName }'>"
 
 
   _add_input: ->

data/app/assets/javascripts/formagic/inputs/string.coffee

@@ -46,7 +46,7 @@ class @InputString
 
 
   _create_el: ->
-    @$el =$ "<label for='#{ @name }' class='input-#{ @config.type } input-#{ @config.klass } input-#{ @config.klassName }'>"
+    @$el =$ "<label for='#{ @name }' class='#{ @config.klass } input-#{ @config.type } input-#{ @config.klassName }'>"
 
 
   _add_label: ->
@@ -85,8 +85,7 @@ class @InputString
 
 
   _add_placeholder: ->
-    if @config.klass in [ 'placeholder', 'stacked' ]
-      @$input.attr 'placeholder', @config.label
+    @$input.attr 'placeholder', @config.type
 
     if @config.placeholder
       @$input.attr 'placeholder', @config.placeholder

data/app/assets/stylesheets/formagic/checkbox.scss

@@ -1,8 +1,16 @@
-// checkbox
+/* Checkbox Input ----------------------------------------- */
 
-.form {
-  .input-checkbox { padding: .8em 1em 1em;
-    input  { display: inline; width: auto; margin-right: .5em; }
-    .label { display: inline; cursor: pointer; }
+.input-checkbox {
+  padding : .8em 1em 1em;
+
+  input {
+    margin-right : .5em;
+    display      : inline;
+    width        : auto;
+  }
+
+  .label {
+    display : inline;
+    cursor  : pointer;
   }
-}
+}

data/app/assets/stylesheets/formagic/color.scss

@@ -1,12 +1,14 @@
-// color
+/* Color Input -------------------------------------------- */
 
-.form {
-  .input-color {
-    position: relative; padding-left: 4.75em;
+.input-color {
+  @include position(relative);
+  padding-left : 4.75em;
 
-    .preview {
-      @include position(absolute, .65em null null 1em);
-      width: 50px; height: 50px; border-radius: 4px; background-color: #eee;
-    }
+  .preview {
+    @include position(absolute, .65em null null 1em);
+    background-color : #eee;
+    border-radius    : 4px;
+    width            : 50px;
+    height           : 50px;
   }
 }

data/app/assets/stylesheets/formagic/date.scss

@@ -1,16 +1,33 @@
-// date
+// Date Input ---------------------------------------------
 
 @import "vendor/datedropper";
 
-.form .input-stacked input.input-datetime-date {
-  @include position(absolute); width: 7em; opacity: .0; cursor: pointer;
+.form-input input.input-datetime-date {
+  @include position(absolute);
+  opacity : .0;
+  cursor  : pointer;
+  width   : 7em;
 }
 
-.form .input-stacked input.input-datetime-time { width: auto; display: inline-block; }
+.form-input input.input-datetime-time {
+  display : inline-block;
+  width   : auto;
+}
+
+.input-date-label {
+  min-width : 7em;
+  display   : inline-block;
+  cursor    : pointer;
+}
+
+.input-date-label .placeholder {
+  color : $formagic-placeholder-color;
+}
 
-.input-date-label  { display: inline-block; min-width: 7em; cursor: pointer; }
-.input-date-label .placeholder { color: $lightColor; }
-.input-timedate-at { color: $stableColor; margin: 0 .25em;  }
+.input-timedate-at {
+  color  : $formagic-base-color;
+  margin : 0 .25em;
+}
 
 .dd_ .dd_sw_ .dd_nav_.dd_prev_ { background-image: image-url('datedropper/prev.png'); }
 .dd_ .dd_sw_ .dd_nav_.dd_next_ { background-image: image-url('datedropper/next.png'); }
@@ -18,21 +35,25 @@
 
 .dd_ { border: 0; }
 .dd_:after {
-  top: -6px!important;
-  border-left: 1px solid $contrastColor!important;
-  border-top:  1px solid $contrastColor !important;
+  border-left : 1px solid darken($formagic-border-color, 5%)!important;
+  border-top  : 1px solid darken($formagic-border-color, 5%)!important;
+  top         : -6px!important;
 }
 
 .dd_ .dd_m_                         { font-size: 16px; }
-.dd_ .dd_d_                         { font-size: 38px; border-color: $neutralColor; }
-.dd_ .dd_d_ .dd_sl_ ul li em        { color: $stableColor!important; font-size: 13px; bottom: 4px; }
-.dd_ .dd_d_ .dd_sl_ ul li.dd_sunday { color: $assertiveColor!important; }
-.dd_ .dd_sw_ .dd_sl_ li:hover       { background-color: $neutralColor; }
+.dd_ .dd_d_                         { font-size: 38px; border-color: $formagic-border-color; }
+.dd_ .dd_d_ .dd_sl_ ul li em        { color: lighten($formagic-base-color, 40%)!important; font-size: 13px; bottom: 4px; }
+.dd_ .dd_d_ .dd_sl_ ul li.dd_sunday { color: $formagic-assertive-color!important; }
+.dd_ .dd_sw_ .dd_sl_ li:hover       { background-color: $formagic-border-color; }
 
 .dd_ .dd_m_ {
-  border-top-left-radius:  4px!important;
-  border-top-right-radius: 4px!important;
+  border-top-right-radius : 4px!important;
+  border-top-left-radius  : 4px!important;
 }
 
 .dd_r_ { display: none; }
-.dd_ .dd_submit { background-color: $positiveColor!important; }
+.dd_ .dd_submit { background-color: $formagic-positive-color!important; }
+
+
+
+

data/app/assets/stylesheets/formagic/file.scss

@@ -1,36 +1,77 @@
-// file
+/* File Input --------------------------------------------- */
 
-.form {
+.input-file {
+  min-height : 102px;
 
-  // calculated based on image thumbnail size
+  a {
+    @include ellipsis;
+    color : $formagic-positive-color;
 
-  .input-file { min-height: 102px;
+    &:hover {
+      text-decoration : underline;
+    }
+  }
 
-    a { color: $positiveColor; @include truncate; }
-    a:hover { text-decoration: underline; }
+  input[type=file] {
+    margin-top  : .5em;
+    margin-left : 1.75em;
+  }
 
-    input[type=file] { margin-top: .5em; margin-left: 1.75em; }
-    input[type=checkbox] { display: inline; width: auto; margin-right: .5em; margin-left: 1em; }
-    label { display: inline; font-size: .8em; }
+  input[type=checkbox] {
+    margin-right : .5em;
+    margin-left  : 1em;
+    display      : inline;
+    width        : auto;
+  }
 
-    &.empty {
-      img, a, label, input[type=checkbox] { @include hide; }
-      input[type=file] { margin-top: .2em; }
-    }
+  label {
+    font-size : .8em;
+    display   : inline;
   }
 
-  .input-file-clear {
-    display: inline-block; width: 1.5em; height: 1.5em;  background-color: rgba(0,0,0,.05);
-    @include position(absolute); border-radius: 1em; margin-top: -22px;
-    &:before { content: '\00d7'; color: $stableColor; line-height: 1.35em; @include position(absolute, null 7px null null); }
-    &:hover  { background-color: $positiveColor; &:before { color: $white; } }
+  &.empty {
+    img, a, label, input[type=checkbox] {
+      display : none;
+    }
+
+    input[type=file] {
+      margin-top : .2em;
+    }
   }
 
-  .input-file.input-disabled {
+  &.input-disabled {
     min-height : inherit;
-    input,
-    label {
+
+    input, label {
       display : none;
     }
   }
 }
+
+.input-file-clear {
+  @include position(absolute);
+
+  background-color : rgba(0,0,0,.05);
+  border-radius    : 1em;
+  margin-top       : -22px;
+  display          : inline-block;
+  width            : 1.5em;
+  height           : 1.5em;
+
+  &:before {
+    @include position(absolute, null 7px null null);
+    line-height : 1.35em;
+    content     : '\00d7';
+    color       : $formagic-base-color;
+  }
+
+  &:hover {
+    background-color: $formagic-positive-color;
+
+    &:before { color: white; }
+  }
+}
+
+
+
+

data/app/assets/stylesheets/formagic/form.scss

@@ -1,41 +1,87 @@
-// form ::: generic components
+// Form (generic components) ------------------------------ */
 
-.form {
+// General
+.form-input {
+  @include position(relative);
+  @include bottom-border($formagic-border-color);
 
-  // General
+  padding : .5em 1em .9em;
+  display : block;
 
-  .input-stacked {
-    @include position(relative); padding: .5em 1em .9em;
-    @include bottom-border($neutralColor); &:last-child { @include no-bottom-border; }
+  &:last-child { @include no-bottom-border; }
 
-    textarea, input {  width: 100%; @include no-outline; @include placeholder { color: $lightColor; } }
+  textarea, input {
+    @include no-outline;
+    @include placeholder { color: $formagic-placeholder-color; }
+    width : 100%;
+  }
 
-    .label { display: block; line-height: 1.8; color: $stableColor; }
+  .label {
+    line-height : 1.8;
+    display     : block;
+    color       : $formagic-label-color;
   }
+}
 
-  // Validation error
+// Validation error
+.error-message {
+  margin-left : .5em;
+  font-size   : .8em;
+  color       : $formagic-assertive-color;
+}
 
-  .error-message { color: $assertiveColor; font-size: .8em; margin-left: .5em; }
+// Required
+.input-required .label:before {
+  @include position(absolute, null null null .38em);
+  content : '*';
+  color   : $formagic-assertive-color;
+}
 
-  // Required
+// Disabled
+.input-disabled {
+  textarea, input {
+    color : lighten($formagic-base-color, 50%);
+  }
+}
 
-  .input-required .label:before { content: '*'; color: $assertiveColor; @include position(absolute, null null null .38em); }
+// Character counter
+.input-character-counter {
+  margin-left : .5em;
+  font-size   : .8em;
 
-  // Disabled
+  &.exceeds {
+    color : $formagic-assertive-color;
+  }
+}
 
-  .input-disabled { textarea, input { color: lighten($black, 20%); } }
+// Information box
+.form-information {
+  background : $formagic-border-color;
+  text-align : center;
+  margin     : 1em 1em 0;
+  padding    : 1em;
+}
 
-  // Character counter
+// Input Actions used to the right from label
+.input-actions {
+  font-size       : .8em;
+  float           : right;
+
+  a {
+    border-radius : 4px;
+    padding       : .25em .75em;
+    margin        : 0 0 0 .75em;
+    border        : 1px solid $formagic-positive-color;
+    color         : $formagic-positive-color;
+  }
+
+  a:hover {
+    background-color : $formagic-positive-color;
+    border-color     : $formagic-positive-color;
+    color            : white;
+  }
+}
 
-  .input-character-counter { font-size: .8em; margin-left: .5em; &.exceeds { color: $assertiveColor; } }
 
-  // Information box
 
-  .form-information {
-    margin     : 1em 1em 0;
-    padding    : 1em;
-    background : $neutralColor;
-    text-align : center;
-  }
 
-}

data/app/assets/stylesheets/formagic/group.scss

@@ -1,22 +1,32 @@
-// group
+/* Group (for inputs) ------------------------------------- */
 
-.form {
-  .group .input-stacked:last-child { @include bottom-border($neutralColor); }
+.group .form-input:last-child {
+  @include bottom-border($formagic-border-color);
 }
 
-// expandable group
+/* Expandable Group --------------------------------------- */
 
-.group-edit { color: $stableColor; font-size: .9em; @include position(absolute, null .5em null null); text-transform: lowercase; margin-top: -1.5em;
-  &:hover   { color: $positiveColor; }
+.group-edit {
+  @include position(absolute, null .5em null null);
+
+  color          : $formagic-label-color;
+  font-size      : .9em;
+  text-transform : lowercase;
+  margin-top     : -1.5em;
+
+  &:hover {
+    color : $formagic-positive-color;
+  }
 }
 
 .group-edit:before {
-  content: '-';
-  display: block; width: 1em; height: 1em;
   @include position(absolute, null null null -.75em);
+
+  content : '-';
+  display : block;
+  width   : 1em;
+  height  : 1em;
 }
 
 .group-edit.hidden:before   { content: '+';  }
 .group-edit.hidden + .group { display: none; }
-
-

data/app/assets/stylesheets/formagic/image.scss

@@ -1,23 +1,24 @@
-// image ::: based on file
+/* Image Input (based on file) ---------------------------- */
 
-.form {
+.input-image {
+  @extend .input-file;
 
-  .input-image { @extend .input-file; }
+  &:not(.empty) {
+    @include position(relative);
+    padding-left : 6.5em;
 
-  .input-image:not(.empty) {
-    padding-left: 6.5em;
-    position: relative;
     img {
-      position: absolute;
-      border-radius: 4px;
-      left: 1em;
-      top: .8em;
-      width: 4.7em;
+      @include position(absolute, .8em null null 1em);
+      border-radius : 4px;
+      width         : 4.7em;
     }
   }
 
-  .input-image.input-disabled {
+  &.input-disabled {
     min-height : 102px;
   }
-
 }
+
+
+
+

data/app/assets/stylesheets/formagic/list.scss

@@ -1,39 +1,83 @@
-// list :: supports reordering + typeahead
+// List (supports reordering + typeahead) ----------------- */
 
-.form {
+.input-list {
+  input {
+    padding-left : 2em;
+    margin-top   : .1em;
+  }
+
+  ul {
+    line-height : 1.5;
+    list-style  : none;
+    padding     : 0;
+    margin      : 0 0 0 2em;
+
+    li {
+      @include position(relative);
+      @include user-select(none);
+
+      a {
+        font-size : .75em;
+        color     : $formagic-assertive-color;
+      }
+    }
+  }
 
-  .input-list {
-    input   { padding-left: 2em; margin-top: .1em; }
-    ul      { line-height: 1.5; margin: 0 0 0 2em; list-style: none; padding: 0; }
-    ul li   { @include user-select(none); position: relative; }
-    ul li a { color: $assertiveColor; font-size: .75em; }
+  .slip-reordering {
+    color : $formagic-positive-color;
+  }
 
-    .slip-reordering { color: $positiveColor; }
+  .icon-reorder {
+    height : 25px;
+    width  : 25px;
+    left   : -1.75em;
 
-    .icon-reorder {
-      width:  25px;
-      height: 25px;
-      left:  -1.75em;
-      &:before { left: 0; top: 9px; }
-      &:after  { left: 0; top: 14px; }
+    &:before {
+      left : 0;
+      top  : 9px;
     }
 
-    .twitter-typeahead       { width: 100%; }
-    .twitter-typeahead:after {
-      content: '+';
-      display: block;
-      width: 40px;
-      height: 24px;
-      position: absolute; left: 12px; top: -3px;
-      font-size: 22px;
-      color: $contrastColor;
+    &:after {
+      left : 0;
+      top  : 14px;
     }
+  }
 
-    .tt-suggestions { padding: .1em .5em; margin: 0 0 0 1.55em; background: rgba(255,255,255, .95); }
-    .tt-suggestion  { cursor: pointer; opacity: .5;
-      p             { line-height: 1.5; margin: 0; }
-      &.tt-cursor   { opacity: 1; }
+  .twitter-typeahead {
+    width: 100%;
+
+    &:after {
+      @include position(absolute, -3px null null 12px);
+      font-size : 22px;
+      content   : '+';
+      display   : block;
+      height    : 24px;
+      width     : 40px;
+      color     : darken($formagic-border-color, 5%);
     }
   }
 
+  .tt-suggestions {
+    background : rgba(255,255,255, .95);
+    padding    : .1em .5em;
+    margin     : 0 0 0 1.55em;
+  }
+
+  .tt-suggestion  {
+    opacity : .5;
+    cursor  : pointer;
+
+    p {
+      line-height : 1.5;
+      margin      : 0;
+    }
+
+    &.tt-cursor {
+      opacity : 1;
+    }
+  }
 }
+
+
+
+