border btn icon/list thumbnail

dist/css/ionic-ios7.css

@@ -772,10 +772,13 @@ address {
     box-shadow: none;
     font-size: 17px; }
 
+.bar [class^="icon-"],
+.bar [class*=" icon-"] {
+  font-size: 24px; }
+
 .bar .button-icon {
   border: 1px solid transparent;
-  background-color: transparent;
+  background-color: transparent; }
-  font-size: 24px; }
 
 .bar-header {
   top: 0; }
@@ -805,6 +808,7 @@ address {
   bottom: 0;
   width: 100%;
   height: 49px;
+  z-index: 5;
   box-orient: horizontal;
   -webkit-box-orient: horizontal;
   -moz-box-orient: horizontal;
@@ -848,6 +852,9 @@ address {
     border-color: #c73927;
     color: white; }
 
+.tabs-top {
+  top: 44px; }
+
 .tab-item {
   display: block;
   width: 0;
@@ -1182,7 +1189,7 @@ button.list-icon-right .list-item-content:after {
 .list-thumbnail .list-item-content {
   padding-left: 95px;
   min-height: 80px; }
-  .list-thumbnail .list-item-content img {
+  .list-thumbnail .list-item-content .thumbnail {
     position: absolute;
     top: 0;
     left: 0;
@@ -2010,15 +2017,86 @@ a.button {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0); }
 
-@keyframes fadein {
+.slide-in-slide-out.ng-enter, .slide-in-slide-out > .ng-enter {
+  -webkit-transition: 0.5s ease-in-out all;
+  -webkit-transform: translate3d(100%, 0, 0);
+  box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
+.slide-in-slide-out.ng-enter-active, .slide-in-slide-out > .ng-enter-active {
+  -webkit-transform: translate3d(0, 0, 0); }
+.slide-in-slide-out.ng-leave, .slide-in-slide-out > .ng-leave {
+  -webkit-transition: 0.5s ease-in-out all;
+  -webkit-transform: translate3d(0%, 0, 0); }
+.slide-in-slide-out.ng-leave-active, .slide-in-slide-out > .ng-leave-active {
+  -webkit-transform: translate3d(-10%, 0, 0);
+  opacity: 0.8; }
+
+.slide-in-slide-out-reverse.ng-enter, .slide-in-slide-out-reverse > .ng-enter {
+  z-index: 1;
+  -webkit-transition: 0.5s ease-in-out all;
+  -webkit-transform: translate3d(-100%, 0, 0);
+  box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
+.slide-in-slide-out-reverse.ng-enter-active, .slide-in-slide-out-reverse > .ng-enter-active {
+  -webkit-transform: translate3d(0, 0, 0); }
+.slide-in-slide-out-reverse.ng-leave, .slide-in-slide-out-reverse > .ng-leave {
+  z-index: 0;
+  -webkit-transition: 0.5s ease-in-out all;
+  -webkit-transform: translate3d(0%, 0, 0); }
+.slide-in-slide-out-reverse.ng-leave-active, .slide-in-slide-out-reverse > .ng-leave-active {
+  -webkit-transform: translate3d(10%, 0, 0);
+  opacity: 0.8; }
+
+/**
+ * An animation that fades out one content area and fades in another
+ */
+.fade-in-out.ng-enter, .fade-in-out > .ng-enter {
+  opacity: 0;
+  -webkit-transition: opacity 0.3s ease-in-out; }
+.fade-in-out.ng-enter-active, .fade-in-out > .ng-enter-active {
+  opacity: 1; }
+.fade-in-out.ng-leave, .fade-in-out > .ng-leave {
+  opacity: 1;
+  -webkit-transition: opacity 0.3s ease-in-out; }
+.fade-in-out.ng-leave-active, .fade-in-out > .ng-leave-active {
+  opacity: 0; }
+
+.slide-left-fade-add {
+  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
+
+.slide-left-fade-add-active {
+  -webkit-transform: translate3d(-120px, 0, 0);
+  opacity: 0; }
+
+.slide-left-fade-remove {
+  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+  -webkit-transform: translate3d(120px, 0, 0);
+  opacity: 0; }
+
+.slide-left-fade-remove-active {
+  -webkit-transform: translate3d(0, 0, 0);
+  opacity: 1; }
+
+@-webkit-keyframes fadeOut {
   from {
-    opacity: 0.7; }
+    opacity: 1; }
+
+  to {
+    opacity: 0; } }
+
+@keyframes fadeOut {
+  from {
+    opacity: 1; }
+
+  to {
+    opacity: 0; } }
+
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0; }
 
   to {
     opacity: 1; } }
 
-@-webkit-keyframes fadein {
+@keyframes fadeIn {
-  /* Safari and Chrome */
   from {
     opacity: 0; }
 
@@ -2026,9 +2104,11 @@ a.button {
     opacity: 1; } }
 
 .fade-in {
-  opacity: 0;
+  -webkit-animation: fadeOut 0.3s;
-  animation: fadein 0.5s;
+  animation: fadeOut 0.3s; }
-  -webkit-animation: fadein 0.5s; }
+  .fade-in.active {
+    -webkit-animation: fadeIn 0.3s;
+    animation: fadeIn 0.3s; }
 
 .fill-icon {
   color: white !important; }

dist/css/ionic-scoped.css

@@ -190,15 +190,31 @@
   /* the handle when the toggle is "on" */
   /* make sure list item content have enough padding on right to fit the toggle */
   /* position the toggle to the right within a list item */
-  @keyframes fadein {
+  /**
+   * An animation that fades out one content area and fades in another
+   */
+  @-webkit-keyframes fadeOut {
     from {
-      opacity: 0.7; }
+      opacity: 1; }
+
+    to {
+      opacity: 0; } }
+
+  @keyframes fadeOut {
+    from {
+      opacity: 1; }
+
+    to {
+      opacity: 0; } }
+
+  @-webkit-keyframes fadeIn {
+    from {
+      opacity: 0; }
 
     to {
       opacity: 1; } }
 
-  @-webkit-keyframes fadein {
+  @keyframes fadeIn {
-    /* Safari and Chrome */
     from {
       opacity: 0; }
 
@@ -1515,10 +1531,12 @@
       background: none;
       box-shadow: none;
       font-size: 17px; }
+  .ionic .bar [class^="icon-"],
+  .ionic .bar [class*=" icon-"] {
+    font-size: 24px; }
   .ionic .bar .button-icon {
     border: 1px solid transparent;
-    background-color: transparent;
+    background-color: transparent; }
-    font-size: 24px; }
   .ionic .bar-header {
     top: 0; }
   .ionic .bar-footer {
@@ -1537,6 +1555,7 @@
     bottom: 0;
     width: 100%;
     height: 49px;
+    z-index: 5;
     box-orient: horizontal;
     -webkit-box-orient: horizontal;
     -moz-box-orient: horizontal;
@@ -1579,6 +1598,8 @@
       background-color: #ef4e3a;
       border-color: #c73927;
       color: white; }
+  .ionic .tabs-top {
+    top: 44px; }
   .ionic .tab-item {
     display: block;
     width: 0;
@@ -1872,7 +1893,7 @@
   .ionic .list-thumbnail .list-item-content {
     padding-left: 95px;
     min-height: 80px; }
-    .ionic .list-thumbnail .list-item-content img {
+    .ionic .list-thumbnail .list-item-content .thumbnail {
       position: absolute;
       top: 0;
       left: 0;
@@ -2664,10 +2685,60 @@
     opacity: 1;
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0); }
-  .ionic .fade-in {
+  .ionic .slide-in-slide-out.ng-enter, .ionic .slide-in-slide-out > .ng-enter {
+    -webkit-transition: 0.5s ease-in-out all;
+    -webkit-transform: translate3d(100%, 0, 0);
+    box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
+  .ionic .slide-in-slide-out.ng-enter-active, .ionic .slide-in-slide-out > .ng-enter-active {
+    -webkit-transform: translate3d(0, 0, 0); }
+  .ionic .slide-in-slide-out.ng-leave, .ionic .slide-in-slide-out > .ng-leave {
+    -webkit-transition: 0.5s ease-in-out all;
+    -webkit-transform: translate3d(0%, 0, 0); }
+  .ionic .slide-in-slide-out.ng-leave-active, .ionic .slide-in-slide-out > .ng-leave-active {
+    -webkit-transform: translate3d(-10%, 0, 0);
+    opacity: 0.8; }
+  .ionic .slide-in-slide-out-reverse.ng-enter, .ionic .slide-in-slide-out-reverse > .ng-enter {
+    z-index: 1;
+    -webkit-transition: 0.5s ease-in-out all;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
+  .ionic .slide-in-slide-out-reverse.ng-enter-active, .ionic .slide-in-slide-out-reverse > .ng-enter-active {
+    -webkit-transform: translate3d(0, 0, 0); }
+  .ionic .slide-in-slide-out-reverse.ng-leave, .ionic .slide-in-slide-out-reverse > .ng-leave {
+    z-index: 0;
+    -webkit-transition: 0.5s ease-in-out all;
+    -webkit-transform: translate3d(0%, 0, 0); }
+  .ionic .slide-in-slide-out-reverse.ng-leave-active, .ionic .slide-in-slide-out-reverse > .ng-leave-active {
+    -webkit-transform: translate3d(10%, 0, 0);
+    opacity: 0.8; }
+  .ionic .fade-in-out.ng-enter, .ionic .fade-in-out > .ng-enter {
     opacity: 0;
-    animation: fadein 0.5s;
+    -webkit-transition: opacity 0.3s ease-in-out; }
-    -webkit-animation: fadein 0.5s; }
+  .ionic .fade-in-out.ng-enter-active, .ionic .fade-in-out > .ng-enter-active {
+    opacity: 1; }
+  .ionic .fade-in-out.ng-leave, .ionic .fade-in-out > .ng-leave {
+    opacity: 1;
+    -webkit-transition: opacity 0.3s ease-in-out; }
+  .ionic .fade-in-out.ng-leave-active, .ionic .fade-in-out > .ng-leave-active {
+    opacity: 0; }
+  .ionic .slide-left-fade-add {
+    -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
+  .ionic .slide-left-fade-add-active {
+    -webkit-transform: translate3d(-120px, 0, 0);
+    opacity: 0; }
+  .ionic .slide-left-fade-remove {
+    -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+    -webkit-transform: translate3d(120px, 0, 0);
+    opacity: 0; }
+  .ionic .slide-left-fade-remove-active {
+    -webkit-transform: translate3d(0, 0, 0);
+    opacity: 1; }
+  .ionic .fade-in {
+    -webkit-animation: fadeOut 0.3s;
+    animation: fadeOut 0.3s; }
+    .ionic .fade-in.active {
+      -webkit-animation: fadeIn 0.3s;
+      animation: fadeIn 0.3s; }
   .ionic .fill-icon {
     color: white !important; }
     .ionic .fill-icon:before {

dist/css/ionic.css

@@ -1881,10 +1881,13 @@ address {
     box-shadow: none;
     font-size: 17px; }
 
+.bar [class^="icon-"],
+.bar [class*=" icon-"] {
+  font-size: 24px; }
+
 .bar .button-icon {
   border: 1px solid transparent;
-  background-color: transparent;
+  background-color: transparent; }
-  font-size: 24px; }
 
 .bar-header {
   top: 0; }
@@ -1914,6 +1917,7 @@ address {
   bottom: 0;
   width: 100%;
   height: 49px;
+  z-index: 5;
   box-orient: horizontal;
   -webkit-box-orient: horizontal;
   -moz-box-orient: horizontal;
@@ -1957,6 +1961,9 @@ address {
     border-color: #c73927;
     color: white; }
 
+.tabs-top {
+  top: 44px; }
+
 .tab-item {
   display: block;
   width: 0;
@@ -2046,6 +2053,38 @@ address {
   .modal.active {
     height: 100%; }
 
+.popup {
+  position: fixed; }
+
+.popup-content {
+  padding: 10px; }
+
+.loading-backdrop {
+  position: fixed;
+  visibility: hidden;
+  -webkit-transition: visibility 0s linear 0.3s;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%; }
+  .loading-backdrop.enabled {
+    background-color: rgba(0, 0, 0, 0.7); }
+  .loading-backdrop.active {
+    visibility: visible;
+    -webkit-transition-delay: 0s; }
+
+.loading {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  border-radius: 5px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  font-size: 20px; }
+  .loading h1, .loading h2, .loading h3, .loading h4, .loading h5 {
+    color: #fff; }
+
 .list {
   margin-bottom: 20px;
   padding-left: 0;
@@ -2291,7 +2330,7 @@ button.list-icon-right .list-item-content:after {
 .list-thumbnail .list-item-content {
   padding-left: 95px;
   min-height: 80px; }
-  .list-thumbnail .list-item-content img {
+  .list-thumbnail .list-item-content .thumbnail {
     position: absolute;
     top: 0;
     left: 0;
@@ -3216,6 +3255,12 @@ a.button {
       -webkit-transition: opacity 0.4s ease-in;
       opacity: 1; }
 
+.nav-content {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: white; }
+
 .slide-in-up {
   opacity: 0;
   -webkit-transform: translate3d(0, 100%, 0);
@@ -3231,15 +3276,86 @@ a.button {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0); }
 
-@keyframes fadein {
+.slide-in-slide-out.ng-enter, .slide-in-slide-out > .ng-enter {
+  -webkit-transition: 0.5s ease-in-out all;
+  -webkit-transform: translate3d(100%, 0, 0);
+  box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
+.slide-in-slide-out.ng-enter-active, .slide-in-slide-out > .ng-enter-active {
+  -webkit-transform: translate3d(0, 0, 0); }
+.slide-in-slide-out.ng-leave, .slide-in-slide-out > .ng-leave {
+  -webkit-transition: 0.5s ease-in-out all;
+  -webkit-transform: translate3d(0%, 0, 0); }
+.slide-in-slide-out.ng-leave-active, .slide-in-slide-out > .ng-leave-active {
+  -webkit-transform: translate3d(-10%, 0, 0);
+  opacity: 0.8; }
+
+.slide-in-slide-out-reverse.ng-enter, .slide-in-slide-out-reverse > .ng-enter {
+  z-index: 1;
+  -webkit-transition: 0.5s ease-in-out all;
+  -webkit-transform: translate3d(-100%, 0, 0);
+  box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
+.slide-in-slide-out-reverse.ng-enter-active, .slide-in-slide-out-reverse > .ng-enter-active {
+  -webkit-transform: translate3d(0, 0, 0); }
+.slide-in-slide-out-reverse.ng-leave, .slide-in-slide-out-reverse > .ng-leave {
+  z-index: 0;
+  -webkit-transition: 0.5s ease-in-out all;
+  -webkit-transform: translate3d(0%, 0, 0); }
+.slide-in-slide-out-reverse.ng-leave-active, .slide-in-slide-out-reverse > .ng-leave-active {
+  -webkit-transform: translate3d(10%, 0, 0);
+  opacity: 0.8; }
+
+/**
+ * An animation that fades out one content area and fades in another
+ */
+.fade-in-out.ng-enter, .fade-in-out > .ng-enter {
+  opacity: 0;
+  -webkit-transition: opacity 0.3s ease-in-out; }
+.fade-in-out.ng-enter-active, .fade-in-out > .ng-enter-active {
+  opacity: 1; }
+.fade-in-out.ng-leave, .fade-in-out > .ng-leave {
+  opacity: 1;
+  -webkit-transition: opacity 0.3s ease-in-out; }
+.fade-in-out.ng-leave-active, .fade-in-out > .ng-leave-active {
+  opacity: 0; }
+
+.slide-left-fade-add {
+  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
+
+.slide-left-fade-add-active {
+  -webkit-transform: translate3d(-120px, 0, 0);
+  opacity: 0; }
+
+.slide-left-fade-remove {
+  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+  -webkit-transform: translate3d(120px, 0, 0);
+  opacity: 0; }
+
+.slide-left-fade-remove-active {
+  -webkit-transform: translate3d(0, 0, 0);
+  opacity: 1; }
+
+@-webkit-keyframes fadeOut {
   from {
-    opacity: 0.7; }
+    opacity: 1; }
+
+  to {
+    opacity: 0; } }
+
+@keyframes fadeOut {
+  from {
+    opacity: 1; }
+
+  to {
+    opacity: 0; } }
+
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0; }
 
   to {
     opacity: 1; } }
 
-@-webkit-keyframes fadein {
+@keyframes fadeIn {
-  /* Safari and Chrome */
   from {
     opacity: 0; }
 
@@ -3247,9 +3363,11 @@ a.button {
     opacity: 1; } }
 
 .fade-in {
-  opacity: 0;
+  -webkit-animation: fadeOut 0.3s;
-  animation: fadein 0.5s;
+  animation: fadeOut 0.3s; }
-  -webkit-animation: fadein 0.5s; }
+  .fade-in.active {
+    -webkit-animation: fadeIn 0.3s;
+    animation: fadeIn 0.3s; }
 
 .fill-icon {
   color: white !important; }

dist/js/ionic-angular.js

@@ -12,7 +12,7 @@ angular.module('ionic.ui', ['ionic.ui.content',
                            ]);
 
 ;
-angular.module('ionic.service.actionSheet', ['ionic.service', 'ionic.ui.actionSheet'])
+angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet'])
 
 .factory('ActionSheet', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) {
   return {
@@ -70,7 +70,6 @@ angular.module('ionic.service.actionSheet', ['ionic.service', 'ionic.ui.actionSh
   };
 }]);
 ;
-;
 angular.module('ionic.service.gesture', [])
 
 .factory('Gesture', [function() {
@@ -81,7 +80,56 @@ angular.module('ionic.service.gesture', [])
   };
 }]);
 ;
-angular.module('ionic.service.modal', ['ionic.service'])
+angular.module('ionic.service.loading', ['ionic.ui.loading'])
+
+.factory('Loading', ['$rootScope', '$document', '$compile', function($rootScope, $document, $compile) {
+  return {
+    /**
+     * Load an action sheet with the given template string.
+     *
+     * A new isolated scope will be created for the 
+     * action sheet and the new element will be appended into the body.
+     *
+     * @param {object} opts the options for this ActionSheet (see docs)
+     */
+    show: function(opts) {
+      var defaults = {
+        content: '',
+        animation: 'fade-in',
+        showBackdrop: true
+      };
+
+      opts = angular.extend(defaults, opts);
+
+      var scope = $rootScope.$new(true);
+      angular.extend(scope, opts);
+
+      // Make sure there is only one loading element on the page at one point in time
+      var existing = angular.element($document[0].querySelector('.loading-backdrop'));
+      if(existing.length) {
+        var scope = existing.scope();
+        if(scope.loading) {
+          scope.loading.show();
+          return scope.loading;
+        }
+      }
+
+      // Compile the template
+      var element = $compile('<loading>' + opts.content + '</loading>')(scope);
+
+      $document[0].body.appendChild(element[0]);
+
+      var loading = new ionic.views.Loading({el: element[0] });
+      loading.show();
+
+      scope.loading = loading;
+
+      return loading;
+    }
+  };
+}]);
+;
+angular.module('ionic.service.modal', ['ionic.service.templateLoad'])
 
 
 .factory('Modal', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) {
@@ -122,7 +170,65 @@ angular.module('ionic.service.modal', ['ionic.service'])
   };
 }]);
 ;
-angular.module('ionic.service', [])
+angular.module('ionic.service.popup', ['ionic.service.templateLoad'])
+
+
+.factory('Popup', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) {
+
+  var getPopup = function() {
+    // Make sure there is only one loading element on the page at one point in time
+    var existing = angular.element($document[0].querySelector('.popup'));
+    if(existing.length) {
+      var scope = existing.scope();
+      if(scope.popup) {
+        return scope;
+      }
+    }
+  };
+
+  return {
+    alert: function(message) {
+
+      // If there is an existing popup, just show that one
+      var existing = getPopup();
+      if(existing) {
+        return existing.popup.alert(message);
+      }
+
+      var defaults = {
+        title: message,
+        animation: 'fade-in',
+      };
+
+      opts = angular.extend(defaults, opts);
+
+      var scope = $rootScope.$new(true);
+      angular.extend(scope, opts);
+
+      // Compile the template
+      var element = $compile('<popup>' + opts.content + '</popup>')(scope);
+      $document[0].body.appendChild(element[0]);
+
+      var popup = new ionic.views.Popup({el: element[0] });
+      popup.alert(message);
+
+      scope.popup = popup;
+
+      return popup;
+    },
+    confirm: function(cb) {
+    },
+    prompt: function(cb) {
+    },
+    show: function(data) {
+      // data.title
+      // data.template
+      // data.buttons
+    }
+  };
+}]);
+;
+angular.module('ionic.service.templateLoad', [])
 
 .factory('TemplateLoader', ['$q', '$http', '$templateCache', function($q, $http, $templateCache) {
   return {
@@ -343,26 +449,38 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
 (function() {
 'use strict';
 
-angular.module('ionic.ui.nav', ['ionic.service'])
+angular.module('ionic.ui.loading', [])
 
-.controller('NavCtrl', ['$scope', '$element', '$compile', 'TemplateLoader', function($scope, $element, $compile, TemplateLoader) {
+.directive('loading', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    link: function($scope, $element){
+      $scope.$on('$destroy', function() {
+        $element.remove();
+      });
+      $element.addClass($scope.animation || '');
+    },
+    template: '<div class="loading-backdrop" ng-class="{enabled: showBackdrop}">' + 
+                '<div class="loading" ng-transclude>' +
+                '</div>' +
+              '</div>'
+  };
+});
+
+})();
+;
+(function() {
+'use strict';
+
+angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.gesture', 'ngAnimate'])
+
+.controller('NavCtrl', ['$scope', '$element', '$animate', '$compile', 'TemplateLoader', function($scope, $element, $animate, $compile, TemplateLoader) {
   var _this = this;
 
   angular.extend(this, ionic.controllers.NavController.prototype);
 
-  this.pushFromTemplate = function(tmpl) {
-    data = TemplateLoader.load(tmpl).then(function(data) {
-      console.log('Nav loaded template', data);
-
-      var childScope = $scope.$new();
-      childScope.isVisible = true;
-      
-      $compile(data)(childScope, function(cloned, scope) {
-        $element.append(cloned);
-      });
-    });
-  };
-
   ionic.controllers.NavController.call(this, {
     content: {
     },
@@ -383,14 +501,39 @@ angular.module('ionic.ui.nav', ['ionic.service'])
     }
   });
 
-  $scope.pushController = function(scope) {
+  this.handleDrag = function(e) {
+  };
+
+  this.endDrag = function(e) {
+  };
+
+  this.pushFromTemplate = function(templateUrl) {
+    var childScope = $scope.$new();
+    childScope.isVisible = true;
+
+    TemplateLoader.load(templateUrl).then(function(templateString) {
+      var el = $compile(templateString)(childScope, function(cloned, scope) {
+        angular.element($element[0].children[1].firstElementChild).append(cloned);
+      });
+    });
+  };
+
+  $scope.pushController = function(scope, element) {
     _this.push(scope);
+
+    /*
+    var old = angular.element($element[0].children[1]);
+    $animate.enter(element, $element, $element[0].firstElementChild, function() {
+    });
+    $animate.leave(old, function() {
+    });
+    */
   };
 
   $scope.navController = this;
 }])
 
-.directive('navCtrl', function() {
+.directive('navs', function() {
   return {
     restrict: 'E',
     replace: true,
@@ -404,7 +547,7 @@ angular.module('ionic.ui.nav', ['ionic.service'])
 .directive('navBar', function() {
   return {
     restrict: 'E',
-    require: '^navCtrl',
+    require: '^navs',
     replace: true,
     scope: true,
     template: '<header class="bar bar-header bar-dark nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' + 
@@ -413,6 +556,8 @@ angular.module('ionic.ui.nav', ['ionic.service'])
       '</header>',
     link: function(scope, element, attrs, navCtrl) {
       scope.navController = navCtrl;
+      scope.$watch('navController.controllers.length', function(value) {
+      });
       scope.goBack = function() {
         navCtrl.pop();
       };
@@ -420,37 +565,66 @@ angular.module('ionic.ui.nav', ['ionic.service'])
   };
 })
 
-.directive('navContent', function() {
+.directive('navContent', ['Gesture', '$animate', function(Gesture, $animate) {
   return {
     restrict: 'ECA',
-    require: '^navCtrl',
+    require: '^navs',
     scope: true,
-    link: function(scope, element, attrs, navCtrl) {
+    transclude: 'element',
-      scope.title = attrs.title;
+    compile: function(element, attr, transclude) {
+      return function($scope, $element, $attr, navCtrl) {
+        var lastParent, lastIndex, childScope, childElement;
 
-      if(attrs.navBar === "false") {
+        $scope.title = $attr.title;
+
+        if($attr.navBar === "false") {
           navCtrl.hideNavBar();
         } else {
           navCtrl.showNavBar();
         }
 
-      scope.isVisible = true;
+        $scope.pushController($scope, $element);
-      scope.pushController(scope);
 
-      scope.$watch('isVisible', function(value) {
+        
-        console.log('Visiblity changed', value);
+        $scope.$watch('isVisible', function(value) {
+          if(childElement) {
+            $animate.leave(childElement);
+            childElement = undefined;
+          }
+          if(childScope) {
+            childScope.$destroy();
+            childScope = undefined;
+          }
           if(value) {
-          element[0].classList.remove('hidden');
+            childScope = $scope.$new();
-        } else {
+            transclude(childScope, function(clone) {
-          element[0].classList.add('hidden');
+              childElement = clone;
+              Gesture.on('drag', function(e) {
+                //navCtrl.handleDrag(e);
+                console.log('Content drag', e);
+              }, childElement[0]);
+
+              Gesture.on('release', function(e) {
+                //navCtrl._endDrag(e);
+              }, childElement[0]);
+
+              var title = $element.parent().parent().parent()[0].querySelector('.title');
+              $animate.enter(clone, $element.parent(), $element);
+              $animate.addClass(angular.element(title), 'slide-left-fade', function() {
+                $animate.removeClass(angular.element(title), 'slide-left-fade', function() {
+                });
+              });
+            });
           }
         });
       }
+    }
   };
-});
+}]);
 
 })();
 ;
+;
 (function() {
 'use strict';
 
@@ -572,9 +746,89 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
 });
 })();
 ;
-angular.module('ionic.ui.tabs', [])
+(function() {
+'use strict';
 
-.controller('TabsCtrl', function($scope) {
+/**
+ * @description
+ * The sideMenuCtrl lets you quickly have a draggable side
+ * left and/or right menu, which a center content area.
+ */
+
+angular.module('ionic.ui.slideBox', [])
+
+/**
+ * The internal controller for the side menu controller. This
+ * extends our core Ionic side menu controller and exposes
+ * some side menu stuff on the current scope.
+ */
+.controller('SlideBoxCtrl', ['$scope', '$element', function($scope, $element) {
+  $scope.slides = [];
+  this.slideAdded = function() {
+    $scope.slides.push({});
+  };
+}])
+
+.directive('slideBox', ['$compile', function($compile) {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    controller: 'SlideBoxCtrl',
+    scope: {},
+    template: '<div class="slide-box">\
+            <div class="slide-box-slides" ng-transclude>\
+            </div>\
+          </div>',
+
+    postLink: function() {
+      console.log('POST LINK');
+    },
+    link: function($scope, $element, $attr, slideBoxCtrl) {
+      // If the pager should show, append it to the slide box
+      if($attr.showPager !== "false") {
+        var childScope = $scope.$new();
+        var pager = $compile('<pager></pager>')(childScope);
+        $element.append(pager);
+
+        $scope.slideBox = new ionic.views.SlideBox({
+          el: $element[0]
+        });
+      }
+    }
+  }
+}])
+
+.directive('slide', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    require: '^slideBox',
+    transclude: true,
+    template: '<div class="slide-box-slide" ng-transclude></div>',
+    compile: function(element, attr, transclude) {
+      return function($scope, $element, $attr, slideBoxCtrl) {
+        slideBoxCtrl.slideAdded();
+      }
+    }
+  }
+})
+
+.directive('pager', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    require: '^slideBox',
+    template: '<div class="slide-box-pager"><span ng-repeat="slide in slides"><i class="icon-record"></i></span></div>'
+  }
+
+});
+
+})();
+;
+angular.module('ionic.ui.tabs', ['ngAnimate'])
+
+.controller('TabsCtrl', ['$scope', '$element', '$animate', function($scope, $element, $animate) {
   var _this = this;
 
   angular.extend(this, ionic.controllers.TabBarController.prototype);
@@ -582,83 +836,119 @@ angular.module('ionic.ui.tabs', [])
   ionic.controllers.TabBarController.call(this, {
     tabBar: {
       tryTabSelect: function() {},
-      setSelectedItem: function(index) {
+      setSelectedItem: function(index) {},
-        console.log('TAB BAR SET SELECTED INDEX', index);
+      addItem: function(item) {}
-      },
-      addItem: function(item) {
-        console.log('TAB BAR ADD ITEM', item);
-      }
     }
   });
 
+  this.add = function(controller) {
+    this.addController(controller);
+      this.select(0);
+  };
+
+  this.select = function(controllerIndex) {
+    var oldIndex = _this.getSelectedIndex();
+
+    $scope.activeAnimation = $scope.animation;
+    /*
+    if(controllerIndex > oldIndex) {
+    } else if(controllerIndex < oldIndex) {
+      $scope.activeAnimation = $scope.animation + '-reverse';
+    }
+    */
+    _this.selectController(controllerIndex);
+  };
+
   $scope.controllers = this.controllers;
+}])
 
-  $scope.$watch('controllers', function(newV, oldV) {
+.directive('tabs', function() {
-    console.log("CControlelrs changed", newV, oldV);
-    //$scope.$apply();
-  });
-})
-
-.directive('tabController', function() {
   return {
     restrict: 'E',
     replace: true,
-    scope: {},
+    scope: {
+      animation: '@'
+    },
     transclude: true,
     controller: 'TabsCtrl',
     //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
-    template: '<div class="view"><div ng-transclude></div><tab-bar></tab-bar></div>',
+    template: '<div class="view"><tab-controller-bar></tab-controller-bar></div>',
     compile: function(element, attr, transclude, tabsCtrl) {
       return function($scope, $element, $attr) {
+        $scope.$watch('activeAnimation', function(value) {
+          //$element.removeClass($scope.animation + ' ' + $scope.animation + '-reverse');
+          $element.addClass($scope.activeAnimation);
+        });
+        transclude($scope, function(cloned) {
+          $element.prepend(cloned);
+        });
       };
     }
   };
 })
 
 // Generic controller directive
-.directive('tabContent', function() {
+.directive('tab', ['$animate', function($animate) {
   return {
-    restrict: 'CA',
+    restrict: 'E',
     replace: true,
-    require: '^tabController',
+    require: '^tabs',
     scope: true,
-    link: function(scope, element, attrs, tabsCtrl) {
+    transclude: 'element',
-      scope.$watch('isVisible', function(value) {
+    compile: function(element, attr, transclude) {
-        if(!value) {
+      return function($scope, $element, $attr, tabsCtrl) {
-          element[0].style.display = 'none';
+        var childScope, childElement;
-        } else {
+
-          element[0].style.display = 'block';
+        
+        $scope.$watch('isVisible', function(value) {
+          if(childElement) {
+            $animate.leave(childElement);
+            childElement = undefined;
+          }
+          if(childScope) {
+            childScope.$destroy();
+            childScope = undefined;
+          }
+          if(value) {
+            childScope = $scope.$new();
+            transclude(childScope, function(clone) {
+              childElement = clone;
+              childElement.addClass('view-full');
+              $animate.enter(clone, $element.parent(), $element);
+            });
           }
         });
 
-      scope.title = attrs.title;
+        $scope.title = $attr.title;
-      scope.icon = attrs.icon;
+        $scope.icon = $attr.icon;
-      scope.iconOn = attrs.iconOn;
+        $scope.iconOn = $attr.iconOn;
-      scope.iconOff = attrs.iconOff;
+        $scope.iconOff = $attr.iconOff;
-      tabsCtrl.addController(scope);
+        tabsCtrl.add($scope);
+
+      }
     }
   };
-})
+}])
 
 
-.directive('tabBar', function() {
+.directive('tabControllerBar', function() {
   return {
     restrict: 'E',
-    require: '^tabController',
+    require: '^tabs',
     transclude: true,
     replace: true,
     scope: true,
     template: '<div class="tabs tabs-primary">' + 
-      '<tab-item title="{{controller.title}}" icon="{{controller.icon}}" icon-on="{{controller.iconOn}}" icon-off="{{controller.iconOff}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-item>' + 
+      '<tab-controller-item title="{{controller.title}}" icon="{{controller.icon}}" icon-on="{{controller.iconOn}}" icon-off="{{controller.iconOff}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-controller-item>' + 
     '</div>'
   };
 })
 
-.directive('tabItem', function() {
+.directive('tabControllerItem', function() {
   return {
     restrict: 'E',
     replace: true,
-    require: '^tabController',
+    require: '^tabs',
     scope: {
       title: '@',
       iconOn: '@',
@@ -668,9 +958,8 @@ angular.module('ionic.ui.tabs', [])
       index: '='
     },
     link: function(scope, element, attrs, tabsCtrl) {
-      console.log('Linked item', scope);
       scope.selectTab = function(index) {
-        tabsCtrl.selectController(scope.index);
+        tabsCtrl.select(scope.index);
       };
     },
     template: 
@@ -680,6 +969,39 @@ angular.module('ionic.ui.tabs', [])
         '<i class="{{iconOff}}" ng-if="!active"></i> {{title}}' +
       '</a>'
   };
+})
+
+.directive('tabBar', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    template: '<div class="tabs tabs-primary" ng-transclude>' + 
+    '</div>'
+  }
+})
+
+.directive('tabItem', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    scope: {
+      title: '@',
+      iconOn: '@',
+      iconOff: '@',
+      active: '=',
+      tabSelected: '@',
+      index: '='
+    },
+    link: function(scope, element, attrs) {
+    },
+    template: 
+      '<a href="#" ng-class="{active:active}" ng-click="tabSelected()" class="tab-item">' +
+        '<i class="{{icon}}" ng-if="icon"></i>' +
+        '<i class="{{iconOn}}" ng-if="active"></i>' +
+        '<i class="{{iconOff}}" ng-if="!active"></i> {{title}}' +
+      '</a>'
+  };
 });
 ;
 angular.module('ionic.ui.toggle', [])

dist/js/ionic.js

@@ -1842,6 +1842,8 @@ window.ionic = {
 ;
 (function(ionic) {
 'use strict';
+
+
   var DragOp = function() {};
   DragOp.prototype = {
     start: function(e) {
@@ -1852,11 +1854,25 @@ window.ionic = {
     }
   };
 
+
+  /**
+   * The Pull To Refresh drag operation handles the well-known
+   * "pull to refresh" concept seen on various apps. This lets
+   * the user indicate they want to refresh a given list by dragging
+   * down.
+   *
+   * @param {object} opts the options for the pull to refresh drag.
+   */
   var PullToRefreshDrag = function(opts) {
     this.dragThresholdY = opts.dragThresholdY || 10;
+    this.onRefreshOpening = opts.onRefreshOpening || function() {};
+    this.onRefresh = opts.onRefresh || function() {};
+    this.onRefreshHolding = opts.onRefreshHolding || function() {};
     this.el = opts.el;
   };
+
   PullToRefreshDrag.prototype = new DragOp();
+
   PullToRefreshDrag.prototype.start = function(e) {
     var content, refresher;
 
@@ -1869,17 +1885,23 @@ window.ionic = {
       refresher = this._injectRefresher();
     }
 
+    // Disable animations while dragging
+    refresher.classList.remove('list-refreshing');
+
     this._currentDrag = {
       refresher: refresher,
-      content: content
+      content: content,
+      isHolding: false
     };
   };
+
   PullToRefreshDrag.prototype._injectRefresher = function() {
     var refresher = document.createElement('div');
     refresher.className = 'list-refresher';
     this.el.insertBefore(refresher, this.el.firstChild);
     return refresher;
   };
+
   PullToRefreshDrag.prototype.drag = function(e) {
     var _this = this;
 
@@ -1896,21 +1918,59 @@ window.ionic = {
       }
 
       if(_this._isDragging) {
-        var currentHeight = parseFloat(_this._currentDrag.refresher.style.height);
+        var refresher = _this._currentDrag.refresher;
-        _this._currentDrag.refresher.style.height = e.gesture.deltaY + 'px';
 
-        var newHeight = parseFloat(_this._currentDrag.refresher.style.height = e.gesture.deltaY);
+        var currentHeight = parseFloat(refresher.style.height);
-        var firstChildHeight = parseFloat(_this._currentDrag.refresher.firstElementChild.style.height);
+        refresher.style.height = e.gesture.deltaY + 'px';
-        console.log('New Height must pass', firstChildHeight);
+
-        if(newHeight > firstChildHeight) {
+        var newHeight = parseFloat(refresher.style.height);
-          console.log('PASSED', firstChildHeight);
+        var firstChildHeight = parseFloat(refresher.firstElementChild.offsetHeight);
+
+        if(newHeight > firstChildHeight && !_this._currentDrag.isHolding) {
+          // The user is holding the refresh but hasn't let go of it
+          _this._currentDrag.isHolding = true;
+          _this.onRefreshHolding && _this.onRefreshHolding();
+        } else {
+          // Indicate what ratio of opening the list refresh drag is
+          var ratio = Math.min(1, newHeight / firstChildHeight);
+          _this.onRefreshOpening && _this.onRefreshOpening(ratio);
         }
       }
     });
   };
-  PullToRefreshDrag.prototype.end = function(e) {
+
+  PullToRefreshDrag.prototype.end = function(e, doneCallback) {
+    var _this = this;
+
+    // There is no drag, just end immediately
+    if(!this._currentDrag) {
+      return;
+    }
+
+    var refresher = this._currentDrag.refresher;
+
+    var currentHeight = parseFloat(refresher.style.height);
+    refresher.style.height = e.gesture.deltaY + 'px';
+
+    var firstChildHeight = parseFloat(refresher.firstElementChild.offsetHeight);
+
+    if(currentHeight > firstChildHeight) {
+      //this.refreshing();
+      refresher.classList.add('list-refreshing');
+      refresher.style.height = firstChildHeight + 'px';
+      this.onRefresh && _this.onRefresh();
+    } else {
+      // Enable animations
+      refresher.classList.add('list-refreshing');
+      refresher.style.height = '0px';
+      this.onRefresh && _this.onRefresh();
+    }
+
+    this._currentDrag = null;
+    doneCallback && doneCallback();
   };
 
+
   var SlideDrag = function(opts) {
     this.dragThresholdX = opts.dragThresholdX || 10;
     this.el = opts.el;
@@ -2151,6 +2211,10 @@ window.ionic = {
     // The amount of dragging required to start sliding the element over (in pixels)
     this.dragThresholdX = opts.dragThresholdX || 10;
 
+    this.onRefresh = opts.onRefresh || function() {};
+    this.onRefreshOpening = opts.onRefreshOpening || function() {};
+    this.onRefreshHolding = opts.onRefreshHolding || function() {};
+      
     // Start the drag states
     this._initDrag();
 
@@ -2164,6 +2228,14 @@ window.ionic = {
   };
 
   ionic.views.List.prototype = {
+    /**
+     * Called to tell the list to stop refreshing. This is useful
+     * if you are refreshing the list and are done with refreshing.
+     */
+    stopRefreshing: function() {
+      var refresher = this.el.querySelector('.list-refresher');
+      refresher.style.height = '0px';
+    },
 
     _initDrag: function() {
       this._isDragging = false;
@@ -2183,6 +2255,8 @@ window.ionic = {
 
 
     _startDrag: function(e) {
+      var _this = this;
+
       this._isDragging = false;
 
       // Check if this is a reorder drag
@@ -2197,7 +2271,18 @@ window.ionic = {
       
       // Check if this is a "pull down" drag for pull to refresh
       else if(e.gesture.direction == 'down') {
-        this._dragOp = new PullToRefreshDrag({ el: this.el });
+        this._dragOp = new PullToRefreshDrag({
+          el: this.el,
+          onRefresh: function() {
+            _this.onRefresh && _this.onRefresh();
+          },
+          onRefreshHolding: function() {
+            _this.onRefreshHolding && _this.onRefreshHolding();
+          },
+          onRefreshOpening: function(ratio) {
+            _this.onRefreshOpening && _this.onRefreshOpening(ratio);
+          }
+        });
         this._dragOp.start(e);
       } 
 
@@ -2230,12 +2315,51 @@ window.ionic = {
 
       if(!this._dragOp) {
         this._startDrag(e);
+        if(!this._dragOp) { return; }
       }
 
       this._dragOp.drag(e);
     }
   };
 
+})(ionic);
+;
+(function(ionic) {
+'use strict';
+  /**
+   * An ActionSheet is the slide up menu popularized on iOS.
+   *
+   * You see it all over iOS apps, where it offers a set of options 
+   * triggered after an action.
+   */
+  ionic.views.Loading = function(opts) {
+    var _this = this;
+
+    this.el = opts.el;
+    this._loadingBox = this.el.querySelector('.loading');
+  };
+
+  ionic.views.Loading.prototype = {
+    show: function() {
+      var _this = this;
+
+      if(this._loadingBox) {
+        window.requestAnimationFrame(function() {
+          _this.el.classList.add('active');
+
+          _this._loadingBox.style.marginLeft = (-_this._loadingBox.offsetWidth) / 2 + 'px';
+          _this._loadingBox.style.marginTop = (-_this._loadingBox.offsetHeight) / 2 + 'px';
+        });
+      }
+    },
+    hide: function() {
+      // Force a reflow so the animation will actually run
+      this.el.offsetWidth;
+
+      this.el.classList.remove('active');
+    }
+  };
+
 })(ionic);
 ;
 (function(ionic) {
@@ -2308,6 +2432,43 @@ window.ionic = {
     }
   };
 
+})(ionic);
+;
+(function(ionic) {
+'use strict';
+  /**
+   * An ActionSheet is the slide up menu popularized on iOS.
+   *
+   * You see it all over iOS apps, where it offers a set of options 
+   * triggered after an action.
+   */
+  ionic.views.Popup = function(opts) {
+    var _this = this;
+
+    this.el = opts.el;
+  };
+
+  ionic.views.Popup.prototype = {
+    setTitle: function(title) {
+      var title = el.querySelector('.popup-title');
+      title && title.innerHTML = title;
+    },
+    alert: function(message) {
+      var _this = this;
+
+      window.requestAnimationFrame(function() {
+        _this.setTitle(message);
+        _this.el.classList.add('active');
+      });
+    },
+    hide: function() {
+      // Force a reflow so the animation will actually run
+      this.el.offsetWidth;
+
+      this.el.classList.remove('active');
+    }
+  };
+
 })(ionic);
 ;
 (function(ionic) {

scss/ionic/_bar.scss

@@ -175,12 +175,16 @@
   }
 }
 
-.bar .button-icon {
+.bar [class^="icon-"], 
-  border: 1px solid transparent;
+.bar [class*=" icon-"] {
-  background-color: transparent;
   font-size: 24px;
 }
 
+.bar .button-icon {
+  border: $button-border-width solid transparent;
+  background-color: transparent;
+}
+
 // Header at top
 .bar-header {
   top: 0;

scss/ionic/_listview.scss

@@ -190,7 +190,7 @@ button.list-icon-right {
   padding-left: $list-thumbnail-width + $list-item-padding;
   min-height: $list-thumbnail-width;
 
-  img {
+  .thumbnail {
     position: absolute;
     top: 0;
     left: 0;

scss/ionic/_mixins.scss

@@ -131,17 +131,6 @@
     clear: both;
   }
 }
-
-// Webkit-style focus
-// ------------------
-@mixin tab-focus() {
-  // Default
-  outline: thin dotted #333;
-  // Webkit
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
-}
-
 // Center-align a block level element
 // ----------------------------------
 @mixin center-block() {

test/headers.html

@@ -5,8 +5,7 @@
 
     <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link href="../dist/ionicons.css" rel="stylesheet">
+    <link href="../dist/css/ionic.css" rel="stylesheet">
-    <link href="../dist/ionic.css" rel="stylesheet">
     <style>
       .bar {
         position: relative;
@@ -22,7 +21,7 @@
       <header class="bar bar-header bar-dark">
         <a class="button">Back</a>
         <h1 class="title">Really really really really really really really really long title!</h1>
-        <a class="button">This</a>
+        <a class="button"><i class="icon-home"></i></a>
       </header>
       <div class="bar bar-header-secondary bar-success">
         <div class="button-bar">
@@ -32,7 +31,7 @@
         </div>
       </div>
       <header class="bar bar-header bar-default">
-        <a class="button">Back</a>
+        <a class="button button-icon"><i class="icon-home"></i></a>
         <div class="button-bar">
           <a class="button">Success</a>
           <a class="button">Warning</a>
@@ -62,8 +61,5 @@
 
     </section>
 
-    <script src="../dist/ionic.js"></script>
-    <script src="../dist/ionic-simple.js"></script>
-
   </body>
 </html>

test/lists.html

@@ -208,7 +208,7 @@
 
           <a href="#" class="list-item list-thumbnail">
             <div class="list-item-content">
-              <img src="//ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
+              <img class="thumbnail" src="//ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
               <h2>Pretty Hate Machine</h2>
               <p>Nine Inch Nails</p>
             </div>
@@ -216,7 +216,7 @@
 
           <a href="#" class="list-item list-thumbnail">
             <div class="list-item-content">
-              <img src="//ecx.images-amazon.com/images/I/41H62046AHL.jpg">
+              <img class="thumbnail" src="//ecx.images-amazon.com/images/I/41H62046AHL.jpg">
               <h2>Siamese Dream</h2>
               <p>Smashing Pumpkins</p>
             </div>
@@ -224,7 +224,7 @@
 
           <a href="#" class="list-item list-thumbnail">
             <div class="list-item-content">
-              <img src="//ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
+              <img class="thumbnail" src="//ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
               <h2>Nevermind</h2>
               <p>Nirvana</p>
             </div>
@@ -232,7 +232,7 @@
 
           <a href="#" class="list-item list-thumbnail">
             <div class="list-item-content">
-              <img src="//ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
+              <img class="thumbnail" src="//ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
               <h2>License To Ill</h2>
               <p>Bestie Boys</p>
             </div>
@@ -240,7 +240,7 @@
 
           <a href="#" class="list-item list-thumbnail">
             <div class="list-item-content">
-              <img src="//ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
+              <img class="thumbnail" src="//ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
               <h2>Dookie</h2>
               <p>Green Day</p>
             </div>