Chorli Chore Edit (BSV)

by Erik Bartlow

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <div class="bs-docs-section">
    <h1 id="forms" class="page-header">Material Forms</h1>

    <h2 id="forms-example">Basic example</h2>
    <form role="form" id="userEdit">
      <div class="row">
        <div class="col-sm-12 col-md-6">
          <div class="form-group">
            <input placeholder="First Name" id="first_name" type="text" class="form-control"><span class="form-highlight"></span><span class="form-bar"></span>
            <label class="active" for="first_name">First Name</label>
          </div>
        </div>
        <div class="col-sm-12 col-md-6">
          <div class="form-group">
            <input placeholder="Last Name" id="last_name" type="text" class="form-control"><span class="form-highlight"></span><span class="form-bar"></span>
            <label class="active" for="last_name">Last Name</label>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12 col-md-6">
          <div class="form-group">
            <input disabled value="" id="PointsBalance" type="text" class="form-control"><span class="form-highlight"></span><span class="form-bar"></span>
            <label class="active" for="PointsBalance">Points</label>
          </div>
        </div>
        <div class="col-sm-12 col-md-6">        
          <div class="form-group">
            <label class="control-label" for="DollarBalance">Dollar Balance</label>
            <div class="input-group">
              <span class="input-group-addon">$</span>
              <input type="text" id="DollarBalance" class="form-control">
              <span class="input-group-btn">
                <button class="btn btn-primary" type="button">Zero Out</button>
              </span>
            </div>
          </div>
        </div>
     ...

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('http://fezvrasta.github.io/bootstrap-material-design/dist/css/bootstrap-material-design.css');

/* -- import Bootstrap v3 ----------------------------- */

@import "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css";

/* -- import Bootstrap docs ---------------------------- */

@import "//getbootstrap.com/assets/css/docs.min.css";

/* -- import Roboto Font ------------------------------ */

@import "https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic";

/*-- Body style ---------------------------------- */

@import "https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic";
body {
  font-family: "Roboto", 'Helvetica Neue, Helvetica, Arial', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  color: #212121;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* -- Main style ------------------------------------ */

.btn {
  font-family: "Roboto", 'Helvetica Neue, Helvetica, Arial', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: inherit;
  color: rgba(255, 255, 255, 0.87);
}

.btn-default,
.btn-link {
  color: rgba(0, 0, 0, 0.87);
}


/* -- Buttons style ------------------------------------ */

.btn {
  outline: 0;
  outline-offset: 0;
  border: 0;
  border-radius: 2px;
  transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -webkit-transition: all 0.15s ease-in-out;
}

.btn:focus,
.btn:active,
.btn.active,
.btn:active:focus,
.btn.active:focus {
  outline: 0;
  outline-offset: 0;
 ...

JavaScript

$.material.init();