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

@@ -7,19 +7,19 @@
 // -------------------------
 
 @mixin anti-alias() {
-	text-rendering: optimizeLegibility;
- 	 -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+   -webkit-font-smoothing: antialiased;
 }
 
 @mixin consul-gradient-bg() {
-	background: #694a9c; /* Old browsers */
-	background: -moz-linear-gradient(left, #694a9c 0%, #cd2028 100%); /* FF3.6+ */
-	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#694a9c), color-stop(100%,#cd2028)); /* Chrome,Safari4+ */
-	background: -webkit-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* Chrome10+,Safari5.1+ */
-	background: -o-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* Opera 11.10+ */
-	background: -ms-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* IE10+ */
-	background: linear-gradient(to right, #694a9c 0%,#cd2028 100%); /* W3C */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#694a9c', endColorstr='#cd2028',GradientType=1 ); /* IE6-9 */
+  background: #694a9c; /* Old browsers */
+  background: -moz-linear-gradient(left, #694a9c 0%, #cd2028 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#694a9c), color-stop(100%,#cd2028)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* IE10+ */
+  background: linear-gradient(to right, #694a9c 0%,#cd2028 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#694a9c', endColorstr='#cd2028',GradientType=1 ); /* IE6-9 */
 
 }
 
@@ -44,7 +44,7 @@
 }
 
 @mixin skewY($skew) {
-	-webkit-transform: skewY($skew);
+  -webkit-transform: skewY($skew);
   -moz-transform: skewY($skew);
   -ms-transform: skewY($skew);
   -o-transform: skewY($skew);
@@ -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);
+    }
+}