Merge pull request #604 from Sinetheta/admin-flash

Rebrand admin flash notifications
solidusio · Dec 23, 2015 · 6d0564a · 6d0564a
2 parents 7f971e1 + f3ad92f
commit 6d0564a
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 10 deletions.
diff --git a/backend/app/assets/stylesheets/spree/backend/components/_messages.scss b/backend/app/assets/stylesheets/spree/backend/components/_messages.scss
@@ -30,16 +30,32 @@
   z-index: 1000;
 }
 
+@mixin flash-variant($color) {
+  color: $color;
+  background-color: rgba($color, 0.3);
+}
+
 .flash {
-  padding: 16px;
-  text-align: center;
+  padding: 1em;
   font-size: 120%;
-  color: $color-1;
-  font-weight: $font-weight-bold;
 
-  &.notice  { background-color: rgba($color-notice,  0.8) }
-  &.success { background-color: rgba($color-success, 0.8) }
-  &.error   { background-color: rgba($color-error,   0.8) }
+  &.notice  {
+    @include flash-variant($color-notice);
+  }
+
+  &.success {
+    @include flash-variant($color-success);
+    @include prepend-icon($character-check);
+  }
+
+  &.error   {
+    @include flash-variant($color-error);
+    @include prepend-icon($character-exclamation);
+  }
+
+  &:before {
+    margin-right: 1em;
+  }
 }
 
 .alert {

diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
@@ -10,6 +10,10 @@ $base-font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
 //--------------------------------------------------------------
 
 // Basic color palette for admin
+$apple:                          hsl(105, 48, 37) !default;
+$old-brick:                      hsl(5, 67, 36) !default;
+$pirate-gold:                    hsl(45, 100, 37) !default;
+
 $color-1:                        #FFFFFF !default;    // White
 $color-2:                        #9FC820 !default;    // Green
 $color-3:                        #5498DA !default;    // Light Blue
@@ -41,9 +45,9 @@ $color-navbar-submenu-bg:       very-light($color-navbar-bg, 4) !default;
 $color-navbar-text:             $color-1 !default;
 
 // Basic flash colors
-$color-success:                  $color-2 !default;
-$color-notice:                   $color-6 !default;
-$color-error:                    $color-5 !default;
+$color-success:                  $apple !default;
+$color-notice:                   $pirate-gold !default;
+$color-error:                    $old-brick !default;
 
 // Color for spinner
 $color-spinner: #fff;
@@ -195,3 +199,8 @@ $width-sidebar-flyout:           225px !default;
 // Stacking
 //--------------------------------------------------------------
 $z-index-navbar-flyout:          1000;
+
+// Characters
+//--------------------------------------------------------------
+$character-check:           "\f00c";
+$character-exclamation:     "\f12a";
diff --git a/backend/app/assets/stylesheets/spree/backend/globals/mixins/prepend_icon.scss b/backend/app/assets/stylesheets/spree/backend/globals/mixins/prepend_icon.scss
@@ -0,0 +1,6 @@
+@mixin prepend-icon($character) {
+  &:before {
+    @extend .fa;
+    content: $character;
+  }
+}
diff --git a/backend/app/assets/stylesheets/spree/backend/spree_admin.scss b/backend/app/assets/stylesheets/spree/backend/spree_admin.scss
@@ -5,6 +5,7 @@
 @import 'spree/backend/globals/variables';
 
 @import 'spree/backend/globals/mixins/caret';
+@import 'spree/backend/globals/mixins/prepend_icon';
 
 @import 'spree/backend/shared/typography';
 @import 'spree/backend/shared/tables';