Merge pull request #3 from captainill/master

Demo updates

website/source/_ember_templates.html.erb

@@ -6,7 +6,9 @@
 
 <script type="text/x-handlebars" data-template-name="demo">
     <div class="terminal">
+        <a class="close-terminal" href="#">X</a>
         {{outlet}}
+        <div class="loading-bar"></div>
     </div>
 </script>
 

website/source/assets/stylesheets/_buttons.scss

@@ -28,7 +28,7 @@
 	&.gray{
 		font-weight: 300;
 		color: $gray;
-		border: 1px solid $gray;
+		border: 1px solid $light-gray;
 	}
 
 	&.terminal{

website/source/assets/stylesheets/_demo.scss

@@ -11,12 +11,35 @@
     overflow: scroll;
     font-size: 18px;
     font-family: 'Ubuntu Mono', 'Monaco', monospace;
+    @include box-shadow(0px -2px 30px 0px rgba(0, 0, 0, 0.40));
 }
 
 .terminal {
-    padding: 0px 25px;
+    padding: 0px 65px 0 25px;
     padding-bottom: 50px;
 
+    .close-terminal{
+        display: inline-block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 60px;
+        height: 60px;
+        color: #8B8A8F;
+        background-color: #202021;
+        text-align: center;
+        line-height: 60px;
+        font-size: 30px;
+        @include lato-light();
+        transition: all 250ms ease-in;
+
+        &:hover{
+            text-decoration: none;
+            color: $white;
+            transition: all 250ms ease-in;
+        }
+    }
+
     .welcome {
         padding-top: 20px;
     }

website/source/assets/stylesheets/_utilities.scss

@@ -95,3 +95,123 @@
     opacity: 1;
   }
 }
+
+#demo-app.loading .loading-bar{
+    display: block;
+    -webkit-animation: shift-rightwards 1s ease-in-out infinite;
+    -moz-animation: shift-rightwards 1s ease-in-out infinite;
+    -ms-animation: shift-rightwards 1s ease-in-out infinite;
+    -o-animation: shift-rightwards 1s ease-in-out infinite;
+    animation: shift-rightwards 1s ease-in-out infinite;
+    -webkit-animation-delay: .4s;
+    -moz-animation-delay: .4s;
+    -o-animation-delay: .4s;
+    animation-delay: .4s;
+}
+
+.loading-bar{
+    position: fixed;
+    display: none;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    z-index: 800;
+    background: $blue;
+    -webkit-transform: translateX(100%);
+    -moz-transform: translateX(100%);
+    -o-transform: translateX(100%);
+    transform: translateX(100%);
+}
+
+@-webkit-keyframes shift-rightwards
+{
+    0%
+    {
+        @include translate(-100%, 0);
+    }
+
+    40%
+    {
+        @include translate(0%, 0);
+    }
+
+    60%
+    {
+        @include translate(0%, 0);
+    }
+
+    100%
+    {
+        @include translate(100%, 0);
+    }
+
+}
+@-moz-keyframes shift-rightwards
+{
+    0%
+    {
+        @include translate(-100%, 0);
+    }
+
+    40%
+    {
+        @include translate(0%, 0);
+    }
+
+    60%
+    {
+        @include translate(0%, 0);
+    }
+
+    100%
+    {
+        @include translate(100%, 0);
+    }
+
+}
+@-o-keyframes shift-rightwards
+{
+    0%
+    {
+        @include translate(-100%, 0);
+    }
+
+    40%
+    {
+        @include translate(0%, 0);
+    }
+
+    60%
+    {
+        @include translate(0%, 0);
+    }
+
+    100%
+    {
+        @include translate(100%, 0);
+    }
+
+}
+@keyframes shift-rightwards
+{
+    0%
+    {
+        @include translate(-100%, 0);
+    }
+
+    40%
+    {
+        @include translate(0%, 0);
+    }
+
+    60%
+    {
+        @include translate(0%, 0);
+    }
+
+    100%
+    {
+        @include translate(100%, 0);
+    }
+}