sauna angular

by schel4ok

HTML

<div ng-controller="DemoCtrl" layout="column" ng-cloak class="md-inline-form">
  <md-content md-theme="docs-dark" layout-gt-sm="row" layout-padding>
    <div>
      <md-input-container>
        <label>Title</label>
        <input ng-model="user.title">
      </md-input-container>
      <md-input-container>
        <label>Email</label>
        <input ng-model="user.email" type="email">
      </md-input-container>
    </div>
  </md-content>
  <md-content layout-padding>
    <div>
      <form name="userForm">
        <div layout-gt-xs="row">
          <md-input-container class="md-block" flex-gt-xs>
            <label>Company (Disabled)</label>
            <input ng-model="user.company" disabled>
          </md-input-container>
          <md-datepicker ng-model="user.submissionDate" md-placeholder="Enter date">
          </md-datepicker>
        </div>
        <div layout-gt-sm="row">
          <md-input-container class="md-block" flex-gt-sm>
            <label>First name</label>
            <input ng-model="user.firstName">
          </md-input-container>
          <md-input-container class="md-block" flex-gt-sm>
            <label>Long Last Name That Will Be Truncated And 3 Dots (Ellipsis) Will Appear At The End</label>
            <input ng-model="theMax">
          </md-input-container>
        </div>
        <md-input-container class="md-block">
          <label>Address</label>
          <input ng-model="user.address">
        </md-input-container>
        <md-input-container md-no-float class="md-block">
          <input ng-model="user.address2" placeholder="Address 2">
        </md-input-container>
        <div layout-gt-sm="row">
          <md-input-container class="md-block" flex-gt-sm>
            <label>City</label>
            <input ng-model="user.city">
          </md-input-container>
          <md-input-container class="md-block" flex-gt-sm>
            <label>State</label>
            <md-select ng-model="user.state">
              <md-option...

CSS

.inputdemoBasicUsage .md-datepicker-button {
  width: 36px; }

JavaScript

angular
  .module('inputBasicDemo', ['ngMaterial', 'ngMessages'])
  .controller('DemoCtrl', function($scope) {
    $scope.user = {
      title: 'Developer',
      email: '[email protected]',
      firstName: '',
      lastName: '',
      company: 'Google',
      address: '1600 Amphitheatre Pkwy',
      city: 'Mountain View',
      state: 'CA',
      biography: 'Loves kittens, snowboarding, and can type at 130 WPM.\n\nAnd rumor has it she bouldered up Castle Craig!',
      postalCode: '94043'
    };
    $scope.states = ('AL AK AZ AR CA CO CT DE FL GA HI ID IL IN IA KS KY LA ME MD MA MI MN MS ' +
    'MO MT NE NV NH NJ NM NY NC ND OH OK OR PA RI SC SD TN TX UT VT VA WA WV WI ' +
    'WY').split(' ').map(function(state) {
        return {abbrev: state};
      });
  })
  .config(function($mdThemingProvider) {
    // Configure a dark theme with primary foreground yellow
    $mdThemingProvider.theme('docs-dark', 'default')
      .primaryPalette('yellow')
      .dark();
  });