From 2c4569fe857f215d72ba7a0dde48c247b469d282 Mon Sep 17 00:00:00 2001
From: captainill <jonthomas0@gmai.com>
Date: Mon, 16 Mar 2015 20:06:55 -0700
Subject: [PATCH 1/6] add loading bar to bottom of terminal popup

---
 website/source/_ember_templates.html.erb      |   1 +
 .../source/assets/stylesheets/_utilities.scss | 190 +++++++++++++++++-
 2 files changed, 180 insertions(+), 11 deletions(-)

diff --git a/website/source/_ember_templates.html.erb b/website/source/_ember_templates.html.erb
index 24ceeb84282..89d41953e63 100644
--- a/website/source/_ember_templates.html.erb
+++ b/website/source/_ember_templates.html.erb
@@ -7,6 +7,7 @@
 <script type="text/x-handlebars" data-template-name="demo">
     <div class="terminal">
         {{outlet}}
+        <div class="loading-bar"></div>
     </div>
 </script>
 
diff --git a/website/source/assets/stylesheets/_utilities.scss b/website/source/assets/stylesheets/_utilities.scss
index ba7b7d83f8f..9ab11dd7c40 100755
--- a/website/source/assets/stylesheets/_utilities.scss
+++ b/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,171 @@
     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%
+    {
+        -webkit-transform:translateX(-100%);
+        -moz-transform:translateX(-100%);
+        -o-transform:translateX(-100%);
+        transform:translateX(-100%);
+    }
+
+    40%
+    {
+        -webkit-transform:translateX(0%);
+        -moz-transform:translateX(0%);
+        -o-transform:translateX(0%);
+        transform:translateX(0%);
+    }
+
+    60%
+    {
+        -webkit-transform:translateX(0%);
+        -moz-transform:translateX(0%);
+        -o-transform:translateX(0%);
+        transform:translateX(0%);
+    }
+
+    100%
+    {
+        -webkit-transform:translateX(100%);
+        -moz-transform:translateX(100%);
+        -o-transform:translateX(100%);
+        transform:translateX(100%);
+    }
+
+}
+@-moz-keyframes shift-rightwards
+{
+    0%
+    {
+        -webkit-transform:translateX(-100%);
+        -moz-transform:translateX(-100%);
+        -o-transform:translateX(-100%);
+        transform:translateX(-100%);
+    }
+
+    40%
+    {
+        -webkit-transform:translateX(0%);
+        -moz-transform:translateX(0%);
+        -o-transform:translateX(0%);
+        transform:translateX(0%);
+    }
+
+    60%
+    {
+        -webkit-transform:translateX(0%);
+        -moz-transform:translateX(0%);
+        -o-transform:translateX(0%);
+        transform:translateX(0%);
+    }
+
+    100%
+    {
+        -webkit-transform:translateX(100%);
+        -moz-transform:translateX(100%);
+        -o-transform:translateX(100%);
+        transform:translateX(100%);
+    }
+
+}
+@-o-keyframes shift-rightwards
+{
+    0%
+    {
+        -webkit-transform:translateX(-100%);
+        -moz-transform:translateX(-100%);
+        -o-transform:translateX(-100%);
+        transform:translateX(-100%);
+    }
+
+    40%
+    {
+        -webkit-transform:translateX(0%);
+        -moz-transform:translateX(0%);
+        -o-transform:translateX(0%);
+        transform:translateX(0%);
+    }
+
+    60%
+    {
+        -webkit-transform:translateX(0%);
+        -moz-transform:translateX(0%);
+        -o-transform:translateX(0%);
+        transform:translateX(0%);
+    }
+
+    100%
+    {
+        -webkit-transform:translateX(100%);
+        -moz-transform:translateX(100%);
+        -o-transform:translateX(100%);
+        transform:translateX(100%);
+    }
+
+}
+@keyframes shift-rightwards
+{
+    0%
+    {
+        -webkit-transform:translateX(-100%);
+        -moz-transform:translateX(-100%);
+        -o-transform:translateX(-100%);
+        transform:translateX(-100%);
+    }
+
+    40%
+    {
+        -webkit-transform:translateX(0%);
+        -moz-transform:translateX(0%);
+        -o-transform:translateX(0%);
+        transform:translateX(0%);
+    }
+
+    60%
+    {
+        -webkit-transform:translateX(0%);
+        -moz-transform:translateX(0%);
+        -o-transform:translateX(0%);
+        transform:translateX(0%);
+    }
+
+    100%
+    {
+        -webkit-transform:translateX(100%);
+        -moz-transform:translateX(100%);
+        -o-transform:translateX(100%);
+        transform:translateX(100%);
+    }
+}

From eb5f1c1c00a5ef8156f8bcfc8c506ae893b96a4b Mon Sep 17 00:00:00 2001
From: captainill <jonthomas0@gmai.com>
Date: Mon, 16 Mar 2015 20:07:18 -0700
Subject: [PATCH 2/6] update button gray

---
 website/source/assets/stylesheets/_buttons.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/source/assets/stylesheets/_buttons.scss b/website/source/assets/stylesheets/_buttons.scss
index 906a46d8173..cc20e25ff0d 100755
--- a/website/source/assets/stylesheets/_buttons.scss
+++ b/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{

From ac1031ab6a7fc5d4f1a0d75b9102d4b3c5a93043 Mon Sep 17 00:00:00 2001
From: captainill <jonthomas0@gmai.com>
Date: Mon, 16 Mar 2015 20:22:35 -0700
Subject: [PATCH 3/6] close btn for termina

---
 website/source/_ember_templates.html.erb     |  1 +
 website/source/assets/stylesheets/_demo.scss | 21 +++++++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/website/source/_ember_templates.html.erb b/website/source/_ember_templates.html.erb
index 89d41953e63..5301d08c95f 100644
--- a/website/source/_ember_templates.html.erb
+++ b/website/source/_ember_templates.html.erb
@@ -6,6 +6,7 @@
 
 <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>
diff --git a/website/source/assets/stylesheets/_demo.scss b/website/source/assets/stylesheets/_demo.scss
index 845ceb2588b..fcf0b94aee1 100644
--- a/website/source/assets/stylesheets/_demo.scss
+++ b/website/source/assets/stylesheets/_demo.scss
@@ -14,9 +14,28 @@
 }
 
 .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();
+
+        &:hover{
+            text-decoration: none;
+        }
+    }
+
     .welcome {
         padding-top: 20px;
     }

From d5a17610359c9b34c23fe003a5157518c66fb58f Mon Sep 17 00:00:00 2001
From: captainill <jonthomas0@gmai.com>
Date: Mon, 16 Mar 2015 20:24:17 -0700
Subject: [PATCH 4/6] add hover state to terminal close

---
 website/source/assets/stylesheets/_demo.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/website/source/assets/stylesheets/_demo.scss b/website/source/assets/stylesheets/_demo.scss
index fcf0b94aee1..23b21b4dce1 100644
--- a/website/source/assets/stylesheets/_demo.scss
+++ b/website/source/assets/stylesheets/_demo.scss
@@ -30,9 +30,12 @@
         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;
         }
     }
 

From aac6c973e5623c535fff173fe3b692584d53e9d0 Mon Sep 17 00:00:00 2001
From: captainill <jonthomas0@gmai.com>
Date: Mon, 16 Mar 2015 20:31:59 -0700
Subject: [PATCH 5/6] add shadow to .demo-overlay

---
 website/source/assets/stylesheets/_demo.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/website/source/assets/stylesheets/_demo.scss b/website/source/assets/stylesheets/_demo.scss
index 23b21b4dce1..d63c74ecfa6 100644
--- a/website/source/assets/stylesheets/_demo.scss
+++ b/website/source/assets/stylesheets/_demo.scss
@@ -11,6 +11,7 @@
     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 {

From cf72e4a51aba52da4ac6cfb223f15500e05280cc Mon Sep 17 00:00:00 2001
From: captainill <jonthomas0@gmai.com>
Date: Mon, 16 Mar 2015 21:48:50 -0700
Subject: [PATCH 6/6] use mixin for transforms

---
 .../source/assets/stylesheets/_utilities.scss | 80 ++++---------------
 1 file changed, 16 insertions(+), 64 deletions(-)

diff --git a/website/source/assets/stylesheets/_utilities.scss b/website/source/assets/stylesheets/_utilities.scss
index 9ab11dd7c40..a29cb2efd67 100755
--- a/website/source/assets/stylesheets/_utilities.scss
+++ b/website/source/assets/stylesheets/_utilities.scss
@@ -128,34 +128,22 @@
 {
     0%
     {
-        -webkit-transform:translateX(-100%);
-        -moz-transform:translateX(-100%);
-        -o-transform:translateX(-100%);
-        transform:translateX(-100%);
+        @include translate(-100%, 0);
     }
 
     40%
     {
-        -webkit-transform:translateX(0%);
-        -moz-transform:translateX(0%);
-        -o-transform:translateX(0%);
-        transform:translateX(0%);
+        @include translate(0%, 0);
     }
 
     60%
     {
-        -webkit-transform:translateX(0%);
-        -moz-transform:translateX(0%);
-        -o-transform:translateX(0%);
-        transform:translateX(0%);
+        @include translate(0%, 0);
     }
 
     100%
     {
-        -webkit-transform:translateX(100%);
-        -moz-transform:translateX(100%);
-        -o-transform:translateX(100%);
-        transform:translateX(100%);
+        @include translate(100%, 0);
     }
 
 }
@@ -163,34 +151,22 @@
 {
     0%
     {
-        -webkit-transform:translateX(-100%);
-        -moz-transform:translateX(-100%);
-        -o-transform:translateX(-100%);
-        transform:translateX(-100%);
+        @include translate(-100%, 0);
     }
 
     40%
     {
-        -webkit-transform:translateX(0%);
-        -moz-transform:translateX(0%);
-        -o-transform:translateX(0%);
-        transform:translateX(0%);
+        @include translate(0%, 0);
     }
 
     60%
     {
-        -webkit-transform:translateX(0%);
-        -moz-transform:translateX(0%);
-        -o-transform:translateX(0%);
-        transform:translateX(0%);
+        @include translate(0%, 0);
     }
 
     100%
     {
-        -webkit-transform:translateX(100%);
-        -moz-transform:translateX(100%);
-        -o-transform:translateX(100%);
-        transform:translateX(100%);
+        @include translate(100%, 0);
     }
 
 }
@@ -198,34 +174,22 @@
 {
     0%
     {
-        -webkit-transform:translateX(-100%);
-        -moz-transform:translateX(-100%);
-        -o-transform:translateX(-100%);
-        transform:translateX(-100%);
+        @include translate(-100%, 0);
     }
 
     40%
     {
-        -webkit-transform:translateX(0%);
-        -moz-transform:translateX(0%);
-        -o-transform:translateX(0%);
-        transform:translateX(0%);
+        @include translate(0%, 0);
     }
 
     60%
     {
-        -webkit-transform:translateX(0%);
-        -moz-transform:translateX(0%);
-        -o-transform:translateX(0%);
-        transform:translateX(0%);
+        @include translate(0%, 0);
     }
 
     100%
     {
-        -webkit-transform:translateX(100%);
-        -moz-transform:translateX(100%);
-        -o-transform:translateX(100%);
-        transform:translateX(100%);
+        @include translate(100%, 0);
     }
 
 }
@@ -233,33 +197,21 @@
 {
     0%
     {
-        -webkit-transform:translateX(-100%);
-        -moz-transform:translateX(-100%);
-        -o-transform:translateX(-100%);
-        transform:translateX(-100%);
+        @include translate(-100%, 0);
     }
 
     40%
     {
-        -webkit-transform:translateX(0%);
-        -moz-transform:translateX(0%);
-        -o-transform:translateX(0%);
-        transform:translateX(0%);
+        @include translate(0%, 0);
     }
 
     60%
     {
-        -webkit-transform:translateX(0%);
-        -moz-transform:translateX(0%);
-        -o-transform:translateX(0%);
-        transform:translateX(0%);
+        @include translate(0%, 0);
     }
 
     100%
     {
-        -webkit-transform:translateX(100%);
-        -moz-transform:translateX(100%);
-        -o-transform:translateX(100%);
-        transform:translateX(100%);
+        @include translate(100%, 0);
     }
 }