Added alert support.

Jellyfishboy · Jun 21, 2016 · d700e87 · d700e87
1 parent c3024c5
commit d700e87
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 0 deletions.
diff --git a/app/pages/checkout.hbs b/app/pages/checkout.hbs
@@ -1,4 +1,5 @@
 <div class='checkout'>
+  {{ partial 'warning_alert' }}
   <div class='container'>
     <div class='row checkout-header hidden-xs'>
       <div class='col-lg-8 col-sm-8'>

diff --git a/app/pages/mycart.hbs b/app/pages/mycart.hbs
@@ -1,4 +1,5 @@
 <div class='checkout'>
+  {{ partial 'success_alert' }}
   <div class='container'>
     <div class='row checkout-header hidden-xs'>
       <div class='col-lg-8 col-sm-8'>

diff --git a/app/partials/success_alert.hbs b/app/partials/success_alert.hbs
@@ -0,0 +1,4 @@
+<div class="alert alert-green">
+    <i class="icon-checkmark"></i>
+    You have successfully updated your cart.
+</div>
diff --git a/app/partials/warning_alert.hbs b/app/partials/warning_alert.hbs
@@ -0,0 +1,4 @@
+<div class="alert alert-orange">
+    <i class="icon-blocked"></i>
+    An error ocurred when trying to complete your order. Please try again.
+</div>
diff --git a/app/src/sass/_alert.scss b/app/src/sass/_alert.scss
@@ -0,0 +1,30 @@
+.alert
+{
+    padding:15px 25px;
+    max-width:1170px;
+    margin:0px auto 20px;
+    color: #fff;
+    font-weight: 400;
+    @include box-sizing(border-box);
+    height:50px;
+    line-height: 20px;
+    font-size:0.9em;
+    @include border-radius(0px);
+
+    i
+    {
+        margin-right:7px;
+    }
+
+    &.alert-green
+    {
+        background-color: #74b71b;
+        border: 1px solid #5fa205;
+    }
+
+    &.alert-orange
+    {
+        background-color: #ea5f23;
+        border: 1px solid #d15018;
+    }
+}
diff --git a/app/src/sass/_responsive.scss b/app/src/sass/_responsive.scss
@@ -1,3 +1,30 @@
+@media only screen and (min-width: 768px) {
+    body
+    {
+        .alert
+        {
+            width: 750px;
+        }
+    }
+}
+@media only screen and (min-width: 992px) {
+    body
+    {
+        .alert
+        {
+            width: 970px;
+        }
+    }
+}
+@media only screen and (min-width: 1200px) {
+    body
+    {
+        .alert
+        {
+            width: 1170px;
+        }
+    }
+}
 @media only screen and (max-width: 991px) {
     body
     {

diff --git a/app/src/sass/redlight.scss b/app/src/sass/redlight.scss
@@ -7,6 +7,7 @@ $red: #CD2626;
 @import "header";
 @import "tabs";
 @import "form";
+@import "alert";
 
 @import "error";
 @import "home";