Floating-label-pattern-— Angular-JS.markdown

Floating label pattern — Angular JS

Angular JS demo of a floating label. Based on floating label pattern by Matt D. Smith

Forked from Fedor Troitsky's Pen Floating label pattern — Angular JS.

A Pen by Scott Davis on CodePen.

License.

index.html

<div ng-app='myApp' class="container">
    <magic-field>
      <label ng-show="showLabel" class="show-hide">Better field </label>
      <input type='text' placeholder="Better field" />
   </magic-field>
    <magic-field>
      <label ng-show="showLabel" class="show-hide">Better Text Area </label>
      <textarea type='text' placeholder="Better Text Area"></textarea>
   </magic-field>
</div>
<img src="https://dl.dropboxusercontent.com/u/177158/magic.gif"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>

script.js

var myApp = angular.module('myApp', ['ngAnimate']);
myApp.directive('magicField', function($compile) {
  return {
    scope: {},
    template: '<div class="field" ></div>',
    transclude : true,
    replace : true,
    restrict : 'E',
    controller: function($scope, $element) {
      $scope.showLabel = false;
    },
    link: function(scope, element, attrs, ctrl, transclude) {
      transclude(scope, function(clone, scope) {
        element.append(clone);
      });
      var input = element.find('input')[0] || element.find('textarea')[0] || element.find('select')[0];
      input = angular.element(input);
      input.on('keyup', function() {
        if(input.val().length > 0) {
          scope.showLabel = true;
        } else {
          scope.showLabel = false;
        }
        scope.$apply();
      });
    }
  }
});

style.scss

@import "compass/css3";
$focus-border-color: #428bca;

.container {
  padding-top: 4em;
}
.field {
  .show-hide.ng-hide-add, .show-hide.ng-hide-remove {
      -webkit-transition:all linear 0.2s;
      -moz-transition:all linear 0.2s;
      transition:all linear 0.2s;
      display:block!important;
      position: absolute;
  }

  .show-hide.ng-hide-add.ng-hide-add-active,
  .show-hide.ng-hide-remove {
      top: -8px;
      display:block!important;
      position: absolute;
      opacity: 0;

  }

  .show-hide.ng-hide-add,
  .show-hide.ng-hide-remove.ng-hide-remove-active {
      top:-10px;
      opacity: 1;
      display:block!important;
      position: absolute;
  }
  %input-area {
    &:focus {
      border-color : $focus-border-color;
    }
    border: 0;
    padding: 7px 0.5em!important;
    outline: none;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;;
    border: 2px solid #555555;
    min-width: 300px;
    margin-top: 0px;
    font-weight: bold;
    font-size : 16px;
    color : #555;
  }
}

.field {
    position: relative;
    margin-bottom: 1em;
    padding-bottom: 1em;
}
.field label {
    position: absolute;
    top: -10px;
    left: 0.3em;
    padding-left:.3em;
    padding-right:.3em;
    color: $focus-border-color;
    font-size: 1em;
    background-color : white;
    font-weight : bold;
}
.field input[type=text], input[type=tel], input[type=search], input[type=email] {
  @extend %input-area;
}

.field > textarea {
  @extend %input-area;
}