formikation 0.2.7

data/demo/ready.js

@@ -0,0 +1,3 @@
+$(function() {
+  $('.formikation').find('select, input:file, input:checkbox, input:radio').formikation();
+});

data/dist/formikation.css

@@ -0,0 +1,121 @@
+/*!
+ * Formikation 0.2.7
+ * Formikation is a simple jQuery plugin to beautify form inputs with some css.
+ *
+ * https://github.com/vortizhe/formikation
+ *
+ * Copyright 2016, Victor Ortiz. Licensed under MIT.
+ *
+ * Released on: July 12, 2016
+ */
+.formikation label {
+  display: block;
+  font-size: 14px;
+  line-height: 17px;
+}
+
+.formikation *:before,
+.formikation *:after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.formikation input[type=checkbox],
+.formikation input[type=radio] {
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  position: absolute;
+  left: -9999px;
+}
+
+.formikation .fk-radio,
+.formikation .fk-check {
+  display: block;
+  position: relative;
+  display: inline-block;
+}
+
+.formikation .fk-radio:before,
+.formikation .fk-check:before {
+  content: ' ';
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.formikation .fk-radio:after,
+.formikation .fk-check:after {
+  content: '';
+  display: block;
+  position: absolute;
+  background: #fff;
+}
+
+.formikation .fk-radio.checked:after, .formikation .fk-radio.checked:after,
+.formikation .fk-check.checked:after,
+.formikation .fk-check.checked:after {
+  content: ' ';
+}
+
+.formikation .fk-radio.disabled,
+.formikation .fk-check.disabled {
+  opacity: 0.6;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+}
+
+.formikation .fk-radio:before, .formikation .fk-radio:after {
+  border-radius: 50%;
+}
+
+.formikation .fk-select {
+  display: block;
+  width: 100%;
+  font-size: 14px;
+}
+
+.formikation .fk-select .fk-select-label {
+  display: inline;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.formikation .fk-file-input {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  outline: 0;
+  font-size: 14px;
+}
+
+.formikation .fk-file-input:after {
+  content: attr(data-text);
+  display: block;
+  position: absolute;
+  right: 0;
+  border: 0;
+  outline: 0;
+  cursor: pointer;
+}
+
+.formikation .fk-file-input > p {
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
+  line-height: 1.15;
+}
+
+.formikation .fk-file-input input[type=file] {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  z-index: 3;
+  cursor: pointer;
+  font-size: 14px;
+}

data/dist/formikation.js

@@ -0,0 +1,254 @@
+/*!
+ * Formikation 0.2.7
+ * Formikation is a simple jQuery plugin to beautify form inputs with some css.
+ *
+ * https://github.com/vortizhe/formikation
+ *
+ * Copyright 2016, Victor Ortiz. Licensed under MIT.
+ *
+ * Released on: July 12, 2016
+ */
+
+formikation = {
+
+  // Internal variables / DOM caching / etc.
+  dat: {
+    els: null // elements
+  },
+
+  // Default settings / params
+  defaults: {
+    mapClass: true,
+    mapStyle: true
+  },
+
+  // Aquí se inicializa el tema de verdad
+  init: function(params) {
+
+    // filter out <= IE6
+    if (typeof document.body.style.maxHeight === 'undefined') {
+      return this;
+    }
+
+    // Merge the params to default
+    this.defaults = $.extend(this.defaults, params);
+
+    // Process elements in collection
+    this.dat.els.each( function(idx) {
+      // Check / radio
+      if ($(this).is(':checkbox, :radio')) {
+        formikation.processRadioCheck(this);
+      // Select
+      } else if ($(this).is('select')) {
+        formikation.processSelects(this);
+      // File input
+      } else if ($(this).is('input:file')) {
+        formikation.processInputFile(this);
+      // Nor to be processed
+      } else {
+        // Do nothing?
+      }
+    });
+  },
+
+  // Aquí se procesan los checks
+  processRadioCheck: function(el) {
+    var $el = $(el),
+        $label = $el.closest('label');
+
+    // Add class with sprite
+    if ($el.is(':checkbox')) {
+      $label.addClass('fk-check');
+    } else {
+      $label.addClass('fk-radio');
+    }
+    if (this.defaults.mapClass) {
+      $label.addClass($el.attr('class'));
+    }
+    if (this.defaults.mapStyle) {
+      $label.attr('style', $el.attr('style'));
+    }
+
+    $el.on('formikation.update', function() {
+
+      if ($el.prop('checked')) {
+        $el.closest('form').find(':radio[name="'+$el.attr('name')+'"]').closest('label').removeClass('checked');
+        $label.addClass('checked');
+      } else {
+        $label.removeClass('checked');
+      }
+
+      formikation.is_disabled($el, $label);
+    });
+
+    $el.on('click, change', function() {
+      $el.trigger('formikation.update');
+    });
+
+    $el.trigger('formikation.update');
+  },
+
+  // Process selects
+  processSelects: function(el) {
+    var
+      $el = $(el),
+      selectInnerSpan = $('<span />').addClass('fk-select-label'),
+      selectSpan = $('<span />'),
+      prefix = 'fk-select';
+
+    $el.after(selectSpan.append(selectInnerSpan));
+
+    selectSpan.addClass(prefix);
+
+    if (this.defaults.mapClass) {
+      selectSpan.addClass($el.attr('class'));
+    }
+    if (this.defaults.mapStyle) {
+      selectSpan.attr('style', $el.attr('style'));
+    }
+
+    $el.addClass('has-fk-select')
+       .on('formikation.update', function() {
+         formikation.changed($el,selectSpan);
+         formikation.updateSelectWH($el);
+         formikation.is_disabled($el, selectSpan);
+       })
+       .on('change', function() {
+          selectSpan.addClass(formikation.getClass($el, 'Changed'));
+          $el.trigger('formikation.update');
+       })
+       .on('keyup', function(e) {
+         if (!selectSpan.hasClass(formikation.getClass($el, 'Open'))) {
+           $el.blur();
+           $el.focus();
+         } else {
+           if (e.which==13||e.which==27) {
+             formikation.changed($el,selectSpan);
+           }
+         }
+       })
+       .on('mousedown', function(e) {
+         selectSpan.removeClass(formikation.getClass($el, 'Changed'));
+       })
+       .on('mouseup', function(e) {
+         if ( !selectSpan.hasClass(formikation.getClass($el, 'Open'))) {
+           // if FF and there are other selects open, just apply focus
+           if ($('.'+formikation.getClass($el, 'Open')).not(selectSpan).length>0 && typeof InstallTrigger !== 'undefined') {
+             $el.focus();
+           } else {
+             selectSpan.addClass(formikation.getClass($el, 'Open'));
+             e.stopPropagation();
+             $(document).one('mouseup.'+formikation.getClass($el, 'Open'), function(e) {
+               if ( e.target != $el.get(0) && $.inArray(e.target,$el.find('*').get()) < 0 ) {
+                 $el.blur();
+               } else {
+                 formikation.changed($el,selectSpan);
+               }
+             });
+           }
+         }
+       })
+       .focus(function() {
+         selectSpan.removeClass(formikation.getClass($el, '-changed')).addClass(formikation.getClass($el, '-focus'));
+       })
+       .blur(function() {
+         selectSpan.removeClass(formikation.getClass($el, '-focus')+' '+formikation.getClass($el, '-open'));
+       })
+       .hover(function() {
+         selectSpan.addClass(formikation.getClass($el, '-hover'));
+       }, function() {
+         selectSpan.removeClass(formikation.getClass($el, '-hover'));
+       })
+       .trigger('formikation.update');
+  },
+
+  // Process input file
+  processInputFile: function(el) {
+    var $div = $('<div class="fk-file-input">'),
+        $el = $(el),
+        text = $el.attr('data-text');
+
+    $el.on('change', function(e) {
+      var fn = $el.val().replace(/C:\\fakepath\\/i, '');
+      if (!fn) {
+        fn = text;
+      }
+      $el.prev('p').html(fn);
+    });
+
+    formikation.is_disabled($el, $div);
+    $el.wrap($div.attr('data-text', text)).parent().prepend('<p>' + text + '</p>');
+  },
+
+  // Updates select width to match span
+  updateSelectWH: function(sel) {
+    var $sel = $(sel),
+        $spa = $sel.next('span');
+
+    $sel.css({
+      '-webkit-appearance': 'menulist-button',
+      width: parseInt($spa.outerWidth(), 10),
+      height: parseInt($spa.outerHeight(), 10),
+      position: 'absolute',
+      opacity: 0,
+      fontSize: $spa.css('font-size')
+    });
+  },
+
+  // HELPERS FUNCTIONS UTILITIES ================
+  // Returns class depending on type adding suffix
+  getClass: function(el, suffix){
+    var prefix = (el.is('input:file')) ? 'fk-file' : 'fk-select';
+    return prefix + suffix;
+  },
+
+  // ?
+  changed: function($el,selectSpan) {
+    var currentSelected = $el.find(':selected'),
+        selectSpanInner = selectSpan.children(':first'),
+        html = currentSelected.html() || $el.val();
+
+    selectSpanInner.html(html);
+
+    if (currentSelected.prop('disabled')) {
+      selectSpan.addClass(formikation.getClass($el, 'fk-disable-option'));
+    } else {
+      selectSpan.removeClass(formikation.getClass($el, 'fk-disable-option'));
+    }
+
+    // Add placeholder class to span if:
+    // - Is first option && has NO value
+    // - Is first option && HAS value && value is empty
+    if (
+      $el[0].selectedIndex < 1 &&
+      ( !currentSelected[0].hasAttribute('value') ||  currentSelected.val().length === 0 )
+     ) {
+      selectSpanInner.addClass('fk-is-placeholder');
+    } else {
+      selectSpanInner.removeClass('fk-is-placeholder');
+    }
+
+    setTimeout(function() {
+      selectSpan.removeClass(formikation.getClass($el, 'Open'));
+      $(document).off('mouseup.'+formikation.getClass($el, 'Open'));
+    }, 60);
+  },
+
+  // Check if element is disabled
+  is_disabled: function($el, $target) {
+    if ($el.prop('disabled')) {
+      $target.addClass('disabled');
+    } else {
+      $target.removeClass('disabled');
+    }
+  }
+
+};
+
+// JQuery hooks
+(function ($) {
+  $.fn.formikation = function(params) {
+    formikation.dat.els = this; // JQuery elements
+    formikation.init(params);
+  };
+})(jQuery);

data/dist/formikation.min.css

@@ -0,0 +1,30 @@
+/*! Formikation 0.2.7 Formikation is a simple jQuery plugin to beautify form inputs with some css. https://github.com/vortizhe/formikation Copyright 2016, Victor Ortiz. Licensed under MIT. Released on: July 12, 2016 */
+.formikation label { display: block; font-size: 14px; line-height: 17px; }
+
+.formikation *:before, .formikation *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
+
+.formikation input[type=checkbox], .formikation input[type=radio] { margin: 0; padding: 0; cursor: pointer; position: absolute; left: -9999px; }
+
+.formikation .fk-radio, .formikation .fk-check { display: block; position: relative; display: inline-block; }
+
+.formikation .fk-radio:before, .formikation .fk-check:before { content: ' '; display: inline-block; vertical-align: middle; }
+
+.formikation .fk-radio:after, .formikation .fk-check:after { content: ''; display: block; position: absolute; background: #fff; }
+
+.formikation .fk-radio.checked:after, .formikation .fk-radio.checked:after, .formikation .fk-check.checked:after, .formikation .fk-check.checked:after { content: ' '; }
+
+.formikation .fk-radio.disabled, .formikation .fk-check.disabled { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; }
+
+.formikation .fk-radio:before, .formikation .fk-radio:after { border-radius: 50%; }
+
+.formikation .fk-select { display: block; width: 100%; font-size: 14px; }
+
+.formikation .fk-select .fk-select-label { display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+.formikation .fk-file-input { display: block; position: relative; overflow: hidden; width: 100%; outline: 0; font-size: 14px; }
+
+.formikation .fk-file-input:after { content: attr(data-text); display: block; position: absolute; right: 0; border: 0; outline: 0; cursor: pointer; }
+
+.formikation .fk-file-input > p { margin: 0; padding: 0; font-size: 14px; line-height: 1.15; }
+
+.formikation .fk-file-input input[type=file] { width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; z-index: 3; cursor: pointer; font-size: 14px; }

data/dist/formikation.min.js

@@ -0,0 +1,12 @@
+/*!
+ * Formikation 0.2.7
+ * Formikation is a simple jQuery plugin to beautify form inputs with some css.
+ *
+ * https://github.com/vortizhe/formikation
+ *
+ * Copyright 2016, Victor Ortiz. Licensed under MIT.
+ *
+ * Released on: July 12, 2016
+ */
+formikation={dat:{els:null},defaults:{mapClass:!0,mapStyle:!0},init:function(t){return"undefined"==typeof document.body.style.maxHeight?this:(this.defaults=$.extend(this.defaults,t),void this.dat.els.each(function(t){$(this).is(":checkbox, :radio")?formikation.processRadioCheck(this):$(this).is("select")?formikation.processSelects(this):$(this).is("input:file")&&formikation.processInputFile(this)}))},processRadioCheck:function(t){var e=$(t),a=e.closest("label");e.is(":checkbox")?a.addClass("fk-check"):a.addClass("fk-radio"),this.defaults.mapClass&&a.addClass(e.attr("class")),this.defaults.mapStyle&&a.attr("style",e.attr("style")),e.on("formikation.update",function(){e.prop("checked")?(e.closest("form").find(':radio[name="'+e.attr("name")+'"]').closest("label").removeClass("checked"),a.addClass("checked")):a.removeClass("checked"),formikation.is_disabled(e,a)}),e.on("click, change",function(){e.trigger("formikation.update")}),e.trigger("formikation.update")},processSelects:function(t){var e=$(t),a=$("<span />").addClass("fk-select-label"),s=$("<span />"),i="fk-select";e.after(s.append(a)),s.addClass(i),this.defaults.mapClass&&s.addClass(e.attr("class")),this.defaults.mapStyle&&s.attr("style",e.attr("style")),e.addClass("has-fk-select").on("formikation.update",function(){formikation.changed(e,s),formikation.updateSelectWH(e),formikation.is_disabled(e,s)}).on("change",function(){s.addClass(formikation.getClass(e,"Changed")),e.trigger("formikation.update")}).on("keyup",function(t){s.hasClass(formikation.getClass(e,"Open"))?13!=t.which&&27!=t.which||formikation.changed(e,s):(e.blur(),e.focus())}).on("mousedown",function(t){s.removeClass(formikation.getClass(e,"Changed"))}).on("mouseup",function(t){s.hasClass(formikation.getClass(e,"Open"))||($("."+formikation.getClass(e,"Open")).not(s).length>0&&"undefined"!=typeof InstallTrigger?e.focus():(s.addClass(formikation.getClass(e,"Open")),t.stopPropagation(),$(document).one("mouseup."+formikation.getClass(e,"Open"),function(t){t.target!=e.get(0)&&$.inArray(t.target,e.find("*").get())<0?e.blur():formikation.changed(e,s)})))}).focus(function(){s.removeClass(formikation.getClass(e,"-changed")).addClass(formikation.getClass(e,"-focus"))}).blur(function(){s.removeClass(formikation.getClass(e,"-focus")+" "+formikation.getClass(e,"-open"))}).hover(function(){s.addClass(formikation.getClass(e,"-hover"))},function(){s.removeClass(formikation.getClass(e,"-hover"))}).trigger("formikation.update")},processInputFile:function(t){var e=$('<div class="fk-file-input">'),a=$(t),s=a.attr("data-text");a.on("change",function(t){var e=a.val().replace(/C:\\fakepath\\/i,"");e||(e=s),a.prev("p").html(e)}),formikation.is_disabled(a,e),a.wrap(e.attr("data-text",s)).parent().prepend("<p>"+s+"</p>")},updateSelectWH:function(t){var e=$(t),a=e.next("span");e.css({"-webkit-appearance":"menulist-button",width:parseInt(a.outerWidth(),10),height:parseInt(a.outerHeight(),10),position:"absolute",opacity:0,fontSize:a.css("font-size")})},getClass:function(t,e){var a=t.is("input:file")?"fk-file":"fk-select";return a+e},changed:function(t,e){var a=t.find(":selected"),s=e.children(":first"),i=a.html()||t.val();s.html(i),a.prop("disabled")?e.addClass(formikation.getClass(t,"fk-disable-option")):e.removeClass(formikation.getClass(t,"fk-disable-option")),t[0].selectedIndex<1&&(!a[0].hasAttribute("value")||0===a.val().length)?s.addClass("fk-is-placeholder"):s.removeClass("fk-is-placeholder"),setTimeout(function(){e.removeClass(formikation.getClass(t,"Open")),$(document).off("mouseup."+formikation.getClass(t,"Open"))},60)},is_disabled:function(t,e){t.prop("disabled")?e.addClass("disabled"):e.removeClass("disabled")}},function(t){t.fn.formikation=function(t){formikation.dat.els=this,formikation.init(t)}}(jQuery);
+//# sourceMappingURL=maps/formikation.js.map

data/dist/maps/formikation.js.min.map

@@ -0,0 +1 @@
+{"version":3,"sources":["formikation.js"],"names":["formikation","dat","els","defaults","mapClass","mapStyle","init","params","document","body","style","maxHeight","this","$","extend","each","idx","is","processRadioCheck","processSelects","processInputFile","el","$el","$label","closest","addClass","attr","on","prop","find","removeClass","is_disabled","trigger","selectInnerSpan","selectSpan","prefix","after","append","changed","updateSelectWH","getClass","e","hasClass","which","blur","focus","not","length","InstallTrigger","stopPropagation","one","target","get","inArray","hover","$div","text","fn","val","replace","prev","html","wrap","parent","prepend","sel","$sel","$spa","next","css","-webkit-appearance","width","parseInt","outerWidth","height","outerHeight","position","opacity","fontSize","suffix","currentSelected","selectSpanInner","children","selectedIndex","hasAttribute","setTimeout","off","$target","jQuery"],"mappings":"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","file":"formikation.js","sourcesContent":["/*!\n * Formikation 0.2.7\n * Formikation is a simple jQuery plugin to beautify form inputs with some css.\n *\n * https://github.com/vortizhe/formikation\n *\n * Copyright 2016, Victor Ortiz. Licensed under MIT.\n *\n * Released on: July 12, 2016\n */\n\nformikation = {\n\n  // Internal variables / DOM caching / etc.\n  dat: {\n    els: null // elements\n  },\n\n  // Default settings / params\n  defaults: {\n    mapClass: true,\n    mapStyle: true\n  },\n\n  // Aquí se inicializa el tema de verdad\n  init: function(params) {\n\n    // filter out <= IE6\n    if (typeof document.body.style.maxHeight === 'undefined') {\n      return this;\n    }\n\n    // Merge the params to default\n    this.defaults = $.extend(this.defaults, params);\n\n    // Process elements in collection\n    this.dat.els.each( function(idx) {\n      // Check / radio\n      if ($(this).is(':checkbox, :radio')) {\n        formikation.processRadioCheck(this);\n      // Select\n      } else if ($(this).is('select')) {\n        formikation.processSelects(this);\n      // File input\n      } else if ($(this).is('input:file')) {\n        formikation.processInputFile(this);\n      // Nor to be processed\n      } else {\n        // Do nothing?\n      }\n    });\n  },\n\n  // Aquí se procesan los checks\n  processRadioCheck: function(el) {\n    var $el = $(el),\n        $label = $el.closest('label');\n\n    // Add class with sprite\n    if ($el.is(':checkbox')) {\n      $label.addClass('fk-check');\n    } else {\n      $label.addClass('fk-radio');\n    }\n    if (this.defaults.mapClass) {\n      $label.addClass($el.attr('class'));\n    }\n    if (this.defaults.mapStyle) {\n      $label.attr('style', $el.attr('style'));\n    }\n\n    $el.on('formikation.update', function() {\n\n      if ($el.prop('checked')) {\n        $el.closest('form').find(':radio[name=\"'+$el.attr('name')+'\"]').closest('label').removeClass('checked');\n        $label.addClass('checked');\n      } else {\n        $label.removeClass('checked');\n      }\n\n      formikation.is_disabled($el, $label);\n    });\n\n    $el.on('click, change', function() {\n      $el.trigger('formikation.update');\n    });\n\n    $el.trigger('formikation.update');\n  },\n\n  // Process selects\n  processSelects: function(el) {\n    var\n      $el = $(el),\n      selectInnerSpan = $('<span />').addClass('fk-select-label'),\n      selectSpan = $('<span />'),\n      prefix = 'fk-select';\n\n    $el.after(selectSpan.append(selectInnerSpan));\n\n    selectSpan.addClass(prefix);\n\n    if (this.defaults.mapClass) {\n      selectSpan.addClass($el.attr('class'));\n    }\n    if (this.defaults.mapStyle) {\n      selectSpan.attr('style', $el.attr('style'));\n    }\n\n    $el.addClass('has-fk-select')\n       .on('formikation.update', function() {\n         formikation.changed($el,selectSpan);\n         formikation.updateSelectWH($el);\n         formikation.is_disabled($el, selectSpan);\n       })\n       .on('change', function() {\n          selectSpan.addClass(formikation.getClass($el, 'Changed'));\n          $el.trigger('formikation.update');\n       })\n       .on('keyup', function(e) {\n         if (!selectSpan.hasClass(formikation.getClass($el, 'Open'))) {\n           $el.blur();\n           $el.focus();\n         } else {\n           if (e.which==13||e.which==27) {\n             formikation.changed($el,selectSpan);\n           }\n         }\n       })\n       .on('mousedown', function(e) {\n         selectSpan.removeClass(formikation.getClass($el, 'Changed'));\n       })\n       .on('mouseup', function(e) {\n         if ( !selectSpan.hasClass(formikation.getClass($el, 'Open'))) {\n           // if FF and there are other selects open, just apply focus\n           if ($('.'+formikation.getClass($el, 'Open')).not(selectSpan).length>0 && typeof InstallTrigger !== 'undefined') {\n             $el.focus();\n           } else {\n             selectSpan.addClass(formikation.getClass($el, 'Open'));\n             e.stopPropagation();\n             $(document).one('mouseup.'+formikation.getClass($el, 'Open'), function(e) {\n               if ( e.target != $el.get(0) && $.inArray(e.target,$el.find('*').get()) < 0 ) {\n                 $el.blur();\n               } else {\n                 formikation.changed($el,selectSpan);\n               }\n             });\n           }\n         }\n       })\n       .focus(function() {\n         selectSpan.removeClass(formikation.getClass($el, '-changed')).addClass(formikation.getClass($el, '-focus'));\n       })\n       .blur(function() {\n         selectSpan.removeClass(formikation.getClass($el, '-focus')+' '+formikation.getClass($el, '-open'));\n       })\n       .hover(function() {\n         selectSpan.addClass(formikation.getClass($el, '-hover'));\n       }, function() {\n         selectSpan.removeClass(formikation.getClass($el, '-hover'));\n       })\n       .trigger('formikation.update');\n  },\n\n  // Process input file\n  processInputFile: function(el) {\n    var $div = $('<div class=\"fk-file-input\">'),\n        $el = $(el),\n        text = $el.attr('data-text');\n\n    $el.on('change', function(e) {\n      var fn = $el.val().replace(/C:\\\\fakepath\\\\/i, '');\n      if (!fn) {\n        fn = text;\n      }\n      $el.prev('p').html(fn);\n    });\n\n    formikation.is_disabled($el, $div);\n    $el.wrap($div.attr('data-text', text)).parent().prepend('<p>' + text + '</p>');\n  },\n\n  // Updates select width to match span\n  updateSelectWH: function(sel) {\n    var $sel = $(sel),\n        $spa = $sel.next('span');\n\n    $sel.css({\n      '-webkit-appearance': 'menulist-button',\n      width: parseInt($spa.outerWidth(), 10),\n      height: parseInt($spa.outerHeight(), 10),\n      position: 'absolute',\n      opacity: 0,\n      fontSize: $spa.css('font-size')\n    });\n  },\n\n  // HELPERS FUNCTIONS UTILITIES ================\n  // Returns class depending on type adding suffix\n  getClass: function(el, suffix){\n    var prefix = (el.is('input:file')) ? 'fk-file' : 'fk-select';\n    return prefix + suffix;\n  },\n\n  // ?\n  changed: function($el,selectSpan) {\n    var currentSelected = $el.find(':selected'),\n        selectSpanInner = selectSpan.children(':first'),\n        html = currentSelected.html() || $el.val();\n\n    selectSpanInner.html(html);\n\n    if (currentSelected.prop('disabled')) {\n      selectSpan.addClass(formikation.getClass($el, 'fk-disable-option'));\n    } else {\n      selectSpan.removeClass(formikation.getClass($el, 'fk-disable-option'));\n    }\n\n    // Add placeholder class to span if:\n    // - Is first option && has NO value\n    // - Is first option && HAS value && value is empty\n    if (\n      $el[0].selectedIndex < 1 &&\n      ( !currentSelected[0].hasAttribute('value') ||  currentSelected.val().length === 0 )\n     ) {\n      selectSpanInner.addClass('fk-is-placeholder');\n    } else {\n      selectSpanInner.removeClass('fk-is-placeholder');\n    }\n\n    setTimeout(function() {\n      selectSpan.removeClass(formikation.getClass($el, 'Open'));\n      $(document).off('mouseup.'+formikation.getClass($el, 'Open'));\n    }, 60);\n  },\n\n  // Check if element is disabled\n  is_disabled: function($el, $target) {\n    if ($el.prop('disabled')) {\n      $target.addClass('disabled');\n    } else {\n      $target.removeClass('disabled');\n    }\n  }\n\n};\n\n// JQuery hooks\n(function ($) {\n  $.fn.formikation = function(params) {\n    formikation.dat.els = this; // JQuery elements\n    formikation.init(params);\n  };\n})(jQuery);\n"],"sourceRoot":"/source/"}

data/dist/themes/fk-theme-default.css

@@ -0,0 +1,111 @@
+/*!
+ * Formikation 0.2.7
+ * Formikation is a simple jQuery plugin to beautify form inputs with some css.
+ *
+ * https://github.com/vortizhe/formikation
+ *
+ * Copyright 2016, Victor Ortiz. Licensed under MIT.
+ *
+ * Released on: July 12, 2016
+ */
+.fk-theme-default label {
+  padding-right: 16px;
+  margin-bottom: 0.5em;
+}
+
+.fk-theme-default label.fk-radio:before, .fk-theme-default label.fk-check:before {
+  content: ' ';
+  width: 20px;
+  height: 20px;
+  border: 1px solid #d8d8d8;
+  margin-top: -3px;
+  border-radius: 3px;
+}
+
+.fk-theme-default label.fk-radio:after, .fk-theme-default label.fk-check:after {
+  content: ' ';
+  width: 12px;
+  height: 12px;
+  left: 4px;
+  top: 2px;
+  border-radius: 3px;
+  -webkit-transition: all 0.3s ease;
+  -o-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+
+.fk-theme-default label.fk-radio:before, .fk-theme-default label.fk-radio:after {
+  border-radius: 50%;
+}
+
+.fk-theme-default label.checked.fk-radio:after, .fk-theme-default label.checked.fk-check:after {
+  background: #2f97e9;
+}
+
+.fk-theme-default .fk-select {
+  padding: 10px;
+  border: 1px solid #d8d8d8;
+  background: #fff;
+  border-radius: 3px;
+  line-height: 1.15;
+}
+
+.fk-theme-default .fk-select:after {
+  content: '\00bb';
+  display: block;
+  float: right;
+  padding: 10px 15px;
+  margin: -10px -15px;
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
+.fk-theme-default .fk-select .fk-select-label {
+  color: #666;
+}
+
+.fk-theme-default .fk-select .fk-select-label.fk-is-placeholder {
+  font-style: italic;
+}
+
+.fk-theme-default .fk-select.fk-select-focus {
+  border-color: #000;
+}
+
+.fk-theme-default .fk-select.fk-select-focus .fl-select-label {
+  color: #000;
+}
+
+.fk-theme-default .fk-select.disabled {
+  opacity: 0.6;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+}
+
+.fk-theme-default .has-fk-select {
+  width: 100%;
+  border: 0;
+}
+
+.fk-theme-default .fk-file-input {
+  padding: 10px;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  line-height: 1.15;
+}
+
+.fk-theme-default .fk-file-input:after {
+  right: 3px;
+  top: 3px;
+  padding: 8px 10px;
+  text-align: center;
+  color: #fff;
+  background-color: #2f97e9;
+  border-radius: 3px;
+  line-height: 1;
+}
+
+.fk-theme-default .fk-file-input.disabled {
+  opacity: 0.6;
+}