h/static/styles/forms.scss

@@ -139,12 +139,12 @@
  @include pie-clearfix;
  float: right;

  * {
  > * {
    float: left;
    margin-left: 10px;
  }

  *:first-child {
  > *:first-child {
    margin-left: 0;
  }
}
@@ -253,33 +253,33 @@
}

// Handles state transitions from "default" -> "loading" -> "success"
[data-btn-message-state] .btn-message {
[status-button-state] .btn-message {
  top: -999em;
  left: -999em;
  right: auto;
}

[data-btn-message-state=success] .btn-message-success,
[data-btn-message-state=loading] .btn-message-loading {
[status-button-state=success] .btn-message-success,
[status-button-state=loading] .btn-message-loading {
  top: 50%;
  left: auto;
  right: 100%;
}

[data-btn-message-state] .btn-message-text {
[status-button-state] .btn-message-text {
  @include transition(opacity 0.2s 0.6s ease-in);
  opacity: 0;
}

[data-btn-message-state=success] .btn-message-success .btn-message-text {
[status-button-state=success] .btn-message-success .btn-message-text {
  opacity: 1;
}

[data-btn-message-state] .btn-message-success .btn-message-icon {
[status-button-state] .btn-message-success .btn-message-icon {
  @include transform(scale(0));
}

[data-btn-message-state=success] .btn-message-success .btn-message-icon {
[status-button-state=success] .btn-message-success .btn-message-icon {
  @include transition(transform 0.15s 0 cubic-bezier(0, 1.8, 1, 1.8));
  @include transform(scale(1));
}

h/templates/pattern_library.pt

@@ -217,7 +217,7 @@
          </div>
          <div class="form-field">
            <button class="btn"><i class="icon-checkmark2 btn-icon"></i> Button with Icon Inside</button>
          </div>  
          </div>
          <div class="form-field">
            <button class="btn btn-clean" type="submit" name="">Button Clean</button>
          </div>
@@ -259,7 +259,7 @@
            </span>
          </div>
          <div class="form-field" style="width: 230px; text-align: right">
            <span id="button-loading-demo" class="btn-with-message" data-btn-message-state>
            <span id="button-loading-demo" class="btn-with-message" status-button-state>
              <!-- Insert with JavaScript -->
              <span class="btn-message btn-message-loading">
                <span class="btn-icon spinner"><span><span></span></span></span>
@@ -280,15 +280,15 @@
                container.querySelector('button').onclick = function (event) {
                  event.preventDefault();
                  event.target.disabled = true;
                  container.setAttribute('data-btn-message-state', 'loading');
                  container.setAttribute('status-button-state', 'loading');

                  clearTimeout(timer);
                  timer = setTimeout(function () {
                    event.target.disabled = false;
                    container.setAttribute('data-btn-message-state', 'success');
                    container.setAttribute('status-button-state', 'success');

                    timer = setTimeout(function () {
                      container.setAttribute('data-btn-message-state', 'default');
                      container.setAttribute('status-button-state', '');
                    }, 5000);
                  }, 1000);
                };
@@ -356,7 +356,7 @@
        </div>
        <div class="pattern-library-example-content">
          <form class="form" action="" method="">
            

            <label class="form-label" for="">Editable Tags</label>
            <ul ng-readonly="!editing" ng-model="model.tags" name="tags" class="tags ng-valid tagit ui-widget ui-widget-content ui-corner-all ng-dirty" placeholder="Add tags…">
              <li class="tagit-choice ui-widget-content ui-state-default ui-corner-all tagit-choice-editable">