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';