infieldLabel - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

assets/styles/index.css

+/* Eric Meyer reset */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline; }
+
+ol, ul {
+  list-style: none; }
+
+blockquote, q {
+  quotes: none; }
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none; }
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0; }
+
+/* basic html styling */
+body {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  margin: 50px; }
+
+h1 {
+  font-size: 36px;
+  font-weight: 700;
+  margin-bottom: 1em; }
+
+p {
+  margin: 0 0 20px; }
+
+/* input styling */
+.input,
+.textarea {
+  background: #fff;
+  border: 1px solid #c4c4c4;
+  color: black;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  margin: 0;
+  outline: none;
+  transition: all .2s ease;
+  width: 300px; }
+  .input:focus,
+  .textarea:focus {
+    border-color: #08c;
+    box-shadow: 0 0 6px rgba(0, 136, 204, 0.4); }
+
+.input {
+  height: 38px;
+  padding: 0 10px; }
+  .lt-ie9 .input {
+    line-height: 38px; }
+
+.textarea {
+  padding: 10px; }
+
+/*# sourceMappingURL=maps/index.css.map */

assets/styles/maps/index.css.map

+{"version":3,"sources":["_reset.scss","index.scss"],"names":[],"mappings":"AAAA,sBAAsB;AACtB;;;;;;;;;EASC,UAAS;EACT,cAAa;EACb,gBAAe;EACf,UAAS;EACT,WAAU;EACV,yBAAwB,EACxB;;AACD;EACC,iBAAgB,EAChB;;AACD;EACC,aAAY,EACZ;;AACD;;EAEC,YAAW;EACX,cAAa,EACb;;AACD;EACC,0BAAyB;EACzB,kBAAiB,EACjB;;AC7BD,wBAAwB;AACxB;EACE,4DAA2D;EAC3D,aAAY,EACb;;AAED;EACE,gBAAe;EACf,iBAAgB;EAChB,mBAAkB,EACnB;;AAED;EACE,iBAAgB,EACjB;;AAED,mBAAmB;AACnB;;EAEE,iBAAgB;EAChB,0BAAyB;EACzB,aAAY;EACZ,4DAA2D;EAC3D,gBAAe;EACf,UAAS;EACT,cAAa;EACb,yBAAwB;EACxB,aAAY,EAMb;EAhBD;;IAaI,mBAAkB;IAClB,2CAAuC,EACxC;;AAGH;EACE,aAAY;EACZ,gBAAe,EAKhB;EAHC;IACE,kBAAiB,EAClB;;AAGH;EACE,cAAa,EACd","file":"../index.css","sourcesContent":["/* Eric Meyer reset */\nhtml, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\nb, u, i, center,\ndl, dt, dd, ol, ul, li,\nfieldset, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td {\n\tborder: 0;\n\tfont: inherit;\n\tfont-size: 100%;\n\tmargin: 0;\n\tpadding: 0;\n\tvertical-align: baseline;\n}\nol, ul {\n\tlist-style: none;\n}\nblockquote, q {\n\tquotes: none;\n}\nblockquote:before, blockquote:after,\nq:before, q:after {\n\tcontent: '';\n\tcontent: none;\n}\ntable {\n\tborder-collapse: collapse;\n\tborder-spacing: 0;\n}","@import '_reset.scss';\n\n/* basic html styling */\nbody {\n  font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  margin: 50px;\n}\n\nh1 {\n  font-size: 36px;\n  font-weight: 700;\n  margin-bottom: 1em;\n}\n\np {\n  margin: 0 0 20px;\n}\n\n/* input styling */\n.input,\n.textarea {\n  background: #fff;\n  border: 1px solid #c4c4c4;\n  color: black;\n  font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  font-size: 14px;\n  margin: 0;\n  outline: none;\n  transition: all .2s ease;\n  width: 300px;\n\n  &:focus {\n    border-color: #08c;\n    box-shadow: 0 0 6px rgba(0,136,204,0.4);\n  }\n}\n\n.input {\n  height: 38px;\n  padding: 0 10px;\n\n  .lt-ie9 & {\n    line-height: 38px;\n  }\n}\n\n.textarea {\n  padding: 10px;\n}\n"]}

maps/jquery.infieldLabel.css.map

+{"version":3,"sources":["jquery.infieldLabel.scss"],"names":[],"mappings":"AAAA;;GAEG;AAEH;EACE,sBAAqB;EACrB,mBAAkB,EAkDnB;EApDD;IAMI,YAAW;IACX,aAAY;IACZ,eAAc;IACd,gBAAe;IACf,QAAO;IACP,kBAAiB;IACjB,UAAS;IACT,gBAAe;IACf,mBAAkB;IAClB,OAAM;IACN,oBAAmB;IACnB,YAAW,EACZ;EAlBH;IAuBM,sCAA2B;IAC3B,uCAA6B;IAC7B,YAAW;IACX,kBAAiB;IACjB,WAAU;IACV,YAAW,EAaZ;IAzCL;MA+BQ,yCAA+B;MAC/B,mCAAkC;MAClC,oCAAmC;MACnC,aAAY;MACZ,YAAW;MACX,eAAc;MACd,UAAS;MACT,WAAU;MACV,mBAAkB,EACnB;EAxCP;IA+CM,cAAa;IACb,YAAW;IACX,aAAY,EACb","file":"../jquery.infieldLabel.css","sourcesContent":["/*\n * infieldLabel styles\n */\n\n.js .infield-label {\n  display: inline-block;\n  position: relative;\n\n  // label as placeholder\n  label {\n    color: #777;\n    cursor: text;\n    display: block;\n    font-size: 14px;\n    left: 0;\n    line-height: 40px;\n    margin: 0;\n    padding: 0 10px;\n    position: absolute;\n    top: 0;\n    white-space: nowrap;\n    width: 100%;\n  }\n\n  // focused style\n  &.placeholder-focus {\n    label {\n      background-color: rgba(#000, 0.85);\n      box-shadow: 0 0 8px rgba(#000, 0.3);\n      color: #fff;\n      line-height: 32px;\n      top: -40px;\n      width: auto;\n\n      &::after {\n        border-top: 5px solid rgba(#000, 0.8);\n        border-left: 5px solid transparent;\n        border-right: 5px solid transparent;\n        bottom: -5px;\n        content: '';\n        display: block;\n        height: 0;\n        left: 10px;\n        position: absolute;\n      }\n    }\n  }\n\n  // visually hidden label\n  &.placeholder-hide {\n    label {\n      left: -9999px;\n      right: auto;\n      top: -9999px;\n    }\n  }\n}\n"]}

src/styles/_reset.scss

+/* Eric Meyer reset */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+	border: 0;
+	font: inherit;
+	font-size: 100%;
+	margin: 0;
+	padding: 0;
+	vertical-align: baseline;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

src/styles/index.scss

+@import '_reset.scss';
+
+/* basic html styling */
+body {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  margin: 50px;
+}
+
+h1 {
+  font-size: 36px;
+  font-weight: 700;
+  margin-bottom: 1em;
+}
+
+p {
+  margin: 0 0 20px;
+}
+
+/* input styling */
+.input,
+.textarea {
+  background: #fff;
+  border: 1px solid #c4c4c4;
+  color: black;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  margin: 0;
+  outline: none;
+  transition: all .2s ease;
+  width: 300px;
+
+  &:focus {
+    border-color: #08c;
+    box-shadow: 0 0 6px rgba(0,136,204,0.4);
+  }
+}
+
+.input {
+  height: 38px;
+  padding: 0 10px;
+
+  .lt-ie9 & {
+    line-height: 38px;
+  }
+}
+
+.textarea {
+  padding: 10px;
+}

src/styles/jquery.infieldLabel.scss

+/*
+ * infieldLabel styles
+ */
+
+.js .infield-label {
+  display: inline-block;
+  position: relative;
+
+  // label as placeholder
+  label {
+    color: #777;
+    cursor: text;
+    display: block;
+    font-size: 14px;
+    left: 0;
+    line-height: 40px;
+    margin: 0;
+    padding: 0 10px;
+    position: absolute;
+    top: 0;
+    white-space: nowrap;
+    width: 100%;
+  }
+
+  // focused style
+  &.placeholder-focus {
+    label {
+      background-color: rgba(#000, 0.85);
+      box-shadow: 0 0 8px rgba(#000, 0.3);
+      color: #fff;
+      line-height: 32px;
+      top: -40px;
+      width: auto;
+
+      &::after {
+        border-top: 5px solid rgba(#000, 0.8);
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        bottom: -5px;
+        content: '';
+        display: block;
+        height: 0;
+        left: 10px;
+        position: absolute;
+      }
+    }
+  }
+
+  // visually hidden label
+  &.placeholder-hide {
+    label {
+      left: -9999px;
+      right: auto;
+      top: -9999px;
+    }
+  }
+}

Gulpfile.js

@@ -1,2 +0,3 @@
-var banner          = ['/**',
+const banner = [
+  '/**',
   ' * <%= pkg.name %> - <%= pkg.description %>',
@@ -7,17 +8,20 @@ ' * @version v<%= pkg.version %>',
   ' */',
-  ''].join('\n');
-var browserSync     = require('browser-sync').create();
-var del             = require('del');
-var gulp            = require('gulp');
-var header          = require('gulp-header');
-var jshint          = require('gulp-jshint');
-var notify          = require('gulp-notify');
-var pkg             = require('./package.json');
-var plumber         = require('gulp-plumber');
-var rename          = require('gulp-rename');
-var runSequence     = require('run-sequence');
-var stylish         = require('jshint-stylish');
-var uglify          = require('gulp-uglify');
+  ''
+].join('\n')
+const autoprefixer = require('autoprefixer')
+const browserSync = require('browser-sync').create()
+const del = require('del')
+const gulp = require('gulp')
+const header = require('gulp-header')
+const notify = require('gulp-notify')
+const pkg = require('./package.json')
+const plumber = require('gulp-plumber')
+const postcss = require('gulp-postcss')
+const rename = require('gulp-rename')
+const runSequence = require('run-sequence')
+const sass = require('gulp-sass')
+const sassGlob = require('gulp-sass-glob')
+const sourcemaps = require('gulp-sourcemaps')
+const uglify = require('gulp-uglify')
 
-
 /*
@@ -29,7 +33,6 @@ --------------------
 
-gulp.task('clean', function () {
-  return del(['**/.DS_Store']);
-});
+gulp.task('clean', () => {
+  return del(['**/.DS_Store', './assets/*'])
+})
 
-
 /*
@@ -41,7 +44,5 @@ --------------------
 
-gulp.task('scripts', function() {
+gulp.task('scripts', () => {
   return gulp.src(['./jquery.infieldLabel.js'])
     .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
-    .pipe(jshint())
-    .pipe(jshint.reporter(stylish))
     .pipe(uglify())
@@ -51,6 +52,56 @@ .pipe(rename('jquery.infieldLabel.min.js'))
     .pipe(gulp.dest('./'))
-    .pipe(notify('Scripts uglify task complete'));
-});
+    .pipe(notify('Scripts uglify task complete'))
+})
 
+/*
+  --------------------
+  Styles tasks
+  --------------------
+*/
 
+let processors = [
+  autoprefixer({
+    browsers: ['last 3 versions', '> 1%', 'ie >= 10']
+  })
+]
+
+gulp.task('styles:infieldLabel', () => {
+  return gulp.src([
+      './src/styles/jquery.infieldLabel.scss'
+    ])
+    .pipe(plumber({
+      errorHandler: notify.onError("Error: <%= error.message %>")
+    }))
+    .pipe(sourcemaps.init())
+    .pipe(sassGlob())
+    .pipe(sass())
+    .pipe(postcss(processors))
+    .pipe(sourcemaps.write('maps'))
+    .pipe(gulp.dest('./'))
+    .pipe(browserSync.stream())
+})
+
+gulp.task('styles:other', () => {
+  return gulp.src([
+      './src/styles/index.scss'
+    ])
+    .pipe(plumber({
+      errorHandler: notify.onError("Error: <%= error.message %>")
+    }))
+    .pipe(sourcemaps.init())
+    .pipe(sassGlob())
+    .pipe(sass())
+    .pipe(postcss(processors))
+    .pipe(sourcemaps.write('maps'))
+    .pipe(gulp.dest('./assets/styles'))
+    .pipe(browserSync.stream())
+})
+
+gulp.task('styles', () => {
+  runSequence(
+    'styles:infieldLabel',
+    'styles:other'
+  )
+})
+
 /*
@@ -62,4 +113,4 @@ --------------------
 
-gulp.task('default', function() {
-  runSequence('clean', ['scripts'], function() {
+gulp.task('default', () => {
+  runSequence('clean', ['scripts', 'styles'], () => {
     browserSync.init({
@@ -69,8 +120,10 @@ server: {
       }
-    });
+    })
 
+    gulp.watch(['./src/styles/{,*/}{,*/}*.scss'], ['styles'])
+
     gulp.watch([
       './jquery.infieldLabel.js'
-    ], ['scripts']).on('change', browserSync.reload);
-  });
-});
+    ], ['scripts']).on('change', browserSync.reload)
+  })
+})

index.html

@@ -10,5 +10,4 @@ <!DOCTYPE html>
 
-    <link rel="stylesheet" href="assets/styles/reset.css">
-    <link rel="stylesheet" href="assets/styles/base.css">
-    <link rel="stylesheet" href="assets/styles/jquery.infieldLabel.css">
+    <link rel="stylesheet" href="assets/styles/index.css">
+    <link rel="stylesheet" href="jquery.infieldLabel.css">
 
@@ -44,4 +43,14 @@ <!-- no-js/js class switcher -->
 
+    <p>
+      <span class="infield-label">
+        <label for="message">Your Message</label>
+        <textarea name="message" id="message" class="textarea" rows="6"></textarea>
+      </span>
+    </p>
+
     <!-- Javascript -->
-    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
+    <script
+      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+      integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
+      crossorigin="anonymous"></script>
     <script src="jquery.infieldLabel.js"></script>
@@ -48,0 +57,0 @@ <script>

jquery.infieldLabel.css

@@ -1,67 +0,42 @@
-/* infieldLabel styles */
-.infield-label {
-	display: block;
-	position: relative;
-}
+/*
+ * infieldLabel styles
+ */
+.js .infield-label {
+  display: inline-block;
+  position: relative; }
+  .js .infield-label label {
+    color: #777;
+    cursor: text;
+    display: block;
+    font-size: 14px;
+    left: 0;
+    line-height: 40px;
+    margin: 0;
+    padding: 0 10px;
+    position: absolute;
+    top: 0;
+    white-space: nowrap;
+    width: 100%; }
+  .js .infield-label.placeholder-focus label {
+    background-color: rgba(0, 0, 0, 0.85);
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+    color: #fff;
+    line-height: 32px;
+    top: -40px;
+    width: auto; }
+    .js .infield-label.placeholder-focus label::after {
+      border-top: 5px solid rgba(0, 0, 0, 0.8);
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      bottom: -5px;
+      content: '';
+      display: block;
+      height: 0;
+      left: 10px;
+      position: absolute; }
+  .js .infield-label.placeholder-hide label {
+    left: -9999px;
+    right: auto;
+    top: -9999px; }
 
-.infield-label label {
-	bottom: 0;
-	color: #777;
-	display: block;
-	left: 0;
-	line-height: 39px;
-	margin: 0;
-	right: 0;
-	top: 0;
-}
-
-.js .infield-label label {
-	cursor: text;
-	font-size: 14px;
-	padding: 0 10px;
-	position: absolute;
-	white-space: nowrap;
-}
-
-.placeholder-focus label {
-	background-color: rgba(0, 0, 0, 0.85);
-	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-	   -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-	        box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-	bottom: auto;
-	color: #fff;
-	line-height: 32px;
-	right: auto;
-	top: -40px;
-}
-
-.no-rgba .placeholder-focus label {
-	background-color: #111;
-}
-
-.placeholder-focus label:after {
-	border-top: 5px solid rgba(0, 0, 0, 0.8);
-	border-left: 5px solid transparent;
-	border-right: 5px solid transparent;
-	bottom: -5px;
-	content: '';
-	display: block;
-	height: 0;
-	left: 10px;
-	position: absolute;
-}
-
-.no-rgba .placeholder-focus label:after {
-	border-top-color: #111;
-}
-
-.infield-label-image.placeholder-focus label {
-	top: -122px;
-}
-
-.placeholder-hide label {
-	bottom: auto;
-	left: -9999px;
-	right: auto;
-	top: -9999px;
-}
+/*# sourceMappingURL=maps/jquery.infieldLabel.css.map */

jquery.infieldLabel.js

@@ -20,14 +20,13 @@ (function($) {
 
-
     /*
-      --------------------
-      Set up
-      --------------------
-    */
+     * set up
+     */
 
     // first time input setup
     base.setup = function() {
-      base.$input = base.$el.find('input');
+      base.$input = base.$el.find('input, textarea');
       base.$label = base.$el.find('label');
 
+      base.$el.addClass('init');
+
       // hide label if there's already a value
@@ -74,6 +73,5 @@ base.blur();
     /*
-      --------------------
-      Initialize
-      --------------------
-    */
+     * initialize
+     */
+
     base.init();
@@ -84,6 +82,4 @@ };
   /*
-    --------------------
-    Options
-    --------------------
-  */
+   * options
+   */
 
@@ -90,0 +86,0 @@ $.infieldLabel.defaultOptions = {

jquery.infieldLabel.min.js

 /**
  * infieldLabel - A jQuery plugin that creates a compact, text-over-input, form layout while using semabtic HTML and preserving usability and accessibility.
- * @version v1.0.2
+ * @version v1.1.0
  * @link https://github.com/ten1seven/infieldLabel
  * @license MIT
  */
-!function(i){i.infieldLabel=function(n,l){var s=this;s.$el=i(n),s.$input=null,s.init=function(){s.options=i.extend({},i.infieldLabel.defaultOptions,l),s.setup()},s.setup=function(){s.$input=s.$el.find("input"),s.$label=s.$el.find("label"),s.blur(),s.bind()},s.bind=function(){s.$input.on("focus.infield",function(){s.$el.removeClass(s.options.hideClass).addClass(s.options.focusClass)}).on("blur.infield change.infield",function(){s.blur()}),s.$label.on("click.infield",function(){s.$el.removeClass(s.options.hideClass).addClass(s.options.focusClass),s.$input.focus()})},s.blur=function(){""!==s.$input.val()?s.$el.removeClass(s.options.focusClass).addClass(s.options.hideClass):s.$el.removeClass(s.options.focusClass+" "+s.options.hideClass)},s.init()},i.infieldLabel.defaultOptions={focusClass:"placeholder-focus",hideClass:"placeholder-hide"},i.fn.infieldLabel=function(n){this.each(function(){new i.infieldLabel(this,n)})}}(jQuery);
+!function(i){i.infieldLabel=function(n,l){var s=this;s.$el=i(n),s.$input=null,s.init=function(){s.options=i.extend({},i.infieldLabel.defaultOptions,l),s.setup()},s.setup=function(){s.$input=s.$el.find("input, textarea"),s.$label=s.$el.find("label"),s.$el.addClass("init"),s.blur(),s.bind()},s.bind=function(){s.$input.on("focus.infield",function(){s.$el.removeClass(s.options.hideClass).addClass(s.options.focusClass)}).on("blur.infield change.infield",function(){s.blur()}),s.$label.on("click.infield",function(){s.$el.removeClass(s.options.hideClass).addClass(s.options.focusClass),s.$input.focus()})},s.blur=function(){""!==s.$input.val()?s.$el.removeClass(s.options.focusClass).addClass(s.options.hideClass):s.$el.removeClass(s.options.focusClass+" "+s.options.hideClass)},s.init()},i.infieldLabel.defaultOptions={focusClass:"placeholder-focus",hideClass:"placeholder-hide"},i.fn.infieldLabel=function(n){this.each(function(){new i.infieldLabel(this,n)})}}(jQuery);

package.json

 {
   "name": "infieldLabel",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "A jQuery plugin that creates a compact, text-over-input, form layout while using semabtic HTML and preserving usability and accessibility.",
@@ -17,3 +17,3 @@ "main": "jquery.infieldLabel.js",
   ],
-  "author": "Jeremy Fields <[e-mail]>",
+  "author": "Jeremy Fields <[e-mail]>",
   "license": "MIT",
@@ -23,4 +23,8 @@ "bugs": {
   },
+  "scripts": {
+    "start": "gulp"
+  },
   "homepage": "https://github.com/ten1seven/infieldLabel",
   "devDependencies": {
+    "autoprefixer": "6.3.6",
     "browser-sync": "2.12.1",
@@ -30,11 +34,12 @@ "del": "2.2.0",
     "gulp-header": "1.7.1",
-    "gulp-jshint": "2.0.0",
     "gulp-notify": "2.2.0",
     "gulp-plumber": "1.1.0",
+    "gulp-postcss": "6.1.0",
     "gulp-rename": "1.2.2",
+    "gulp-sass": "^3.1.0",
+    "gulp-sass-glob": "^1.0.8",
+    "gulp-sourcemaps": "^2.6.0",
     "gulp-uglify": "1.5.3",
-    "jshint": "2.9.1",
-    "jshint-stylish": "2.1.0",
     "run-sequence": "1.1.5"
   }
 }

README.md

@@ -19,2 +19,4 @@ # infieldLabel
 
+or install via Bower...
+
 ```shell
@@ -21,0 +23,0 @@ bower install infieldLabel

assets/styles/base.css

-/* basic html styling */
-body {
-	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-	margin: 50px;
-}
-
-h1 {
-	font-size: 36px;
-	font-weight: 700;
-	margin-bottom: 1em;
-}
-
-p {
-	margin: 0 0 20px;
-}
-
-/* input styling */
-.input {
-	background: #fff;
-	border: 1px solid #c4c4c4;
-	color: black;
-	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-	font-size: 14px;
-	height: 38px;
-	margin: 0;
-	outline: none;
-	padding: 0 10px;
-}
-
-.lt-ie9 .input {
-	line-height: 38px;
-}
-
-.input:focus {
-	border-color: #08c;
-	-webkit-box-shadow: 0 0 6px rgba(0,136,204,0.4);
-	   -moz-box-shadow: 0 0 6px rgba(0,136,204,0.4);
-	        box-shadow: 0 0 6px rgba(0,136,204,0.4);
-}

assets/styles/jquery.infieldLabel.css

-/* infieldLabel styles */
-.infield-label {
-	display: block;
-	position: relative;
-}
-
-.infield-label label {
-	bottom: 0;
-	color: #777;
-	display: block;
-	left: 0;
-	line-height: 39px;
-	margin: 0;
-	right: 0;
-	top: 0;
-}
-
-.js .infield-label label {
-	cursor: text;
-	font-size: 14px;
-	padding: 0 10px;
-	position: absolute;
-	white-space: nowrap;
-}
-
-.placeholder-focus label {
-	background-color: rgba(0, 0, 0, 0.85);
-	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-	   -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-	        box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-	bottom: auto;
-	color: #fff;
-	line-height: 32px;
-	right: auto;
-	top: -40px;
-}
-
-.no-rgba .placeholder-focus label {
-	background-color: #111;
-}
-
-.placeholder-focus label:after {
-	border-top: 5px solid rgba(0, 0, 0, 0.8);
-	border-left: 5px solid transparent;
-	border-right: 5px solid transparent;
-	bottom: -5px;
-	content: '';
-	display: block;
-	height: 0;
-	left: 10px;
-	position: absolute;
-}
-
-.no-rgba .placeholder-focus label:after {
-	border-top-color: #111;
-}
-
-.infield-label-image.placeholder-focus label {
-	top: -122px;
-}
-
-.placeholder-hide label {
-	bottom: auto;
-	left: -9999px;
-	right: auto;
-	top: -9999px;
-}

assets/styles/reset.css

-/* Eric Meyer reset */
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td {
-	border: 0;
-	font: inherit;
-	font-size: 100%;
-	margin: 0;
-	padding: 0;
-	vertical-align: baseline;
-}
-ol, ul {
-	list-style: none;
-}
-blockquote, q {
-	quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}

bower.json

-{
-  "name": "infieldLabel",
-  "version": "1.0.2",
-  "homepage": "https://github.com/ten1seven/infieldLabel",
-  "authors": [
-    "Jeremy Fields <[e-mail]>"
-  ],
-  "description": "A jQuery plugin that creates a compact, text-over-input, form layout while using semabtic HTML and preserving usability and accessibility.",
-  "main": "jquery.infieldLabel.js",
-  "keywords": [
-    "ui",
-    "dom",
-    "input",
-    "javascript",
-    "jquery"
-  ],
-  "license": "MIT",
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "test",
-    "tests"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "[e-mail]:ten1seven/infieldLabel.git"
-  }
-}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

162632

1002.66%

Number of package files

17

21.43%

Number of lines in readme file

63

3.28%

Worsened metrics

Dev dependency count

14

16.67%

Lines of code

289

-17.9%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes