Merge pull request #214 from ebollens/fix/153

Add error mood to color implementation [fixes #153]
ucla-oarc-web · Jan 3, 2013 · 1fc1409 · 1fc1409
2 parents 537862d + 11a5e17
commit 1fc1409
Show file tree

Hide file tree

Showing 17 changed files with 104 additions and 3 deletions.
diff --git a/demo/base/color.html b/demo/base/color.html
@@ -101,6 +101,18 @@ <h1>Base/Color</h1>
                 <td class="gradient light highlight">.light.gradient.highlight</td>
                 <td class="gradient light required">.light.gradient.required</td>
             </tr>
+            <tr>
+                <td class="error">.error</td>
+            </tr>
+            <tr>
+                <td class="gradient error">.gradient.error</td>
+            </tr>
+            <tr>
+                <td class="light error">.light.error</td>
+            </tr>
+            <tr>
+                <td class="gradient light error">.light.gradient.error</td>
+            </tr>
             <tr>
                 <td class="text-primary">.text-primary</td>
                 <td class="text-secondary">.text-secondary</td>
@@ -119,6 +131,9 @@ <h1>Base/Color</h1>
                 <td class="text-highlight">.text-highlight</td>
                 <td class="text-required">.text-required</td>
             </tr>
+            <tr>
+                <td class="text-error">.text-error</td>
+            </tr>
         </table>
 
     </body>

diff --git a/src/core/adapter/base/color/_text.scss b/src/core/adapter/base/color/_text.scss
@@ -36,6 +36,10 @@
         @extend .success-text;
     }
 
+    &.error-text {
+        @extend .error-text;
+    }
+
     &.danger-text {
         @extend .danger-text;
     }

diff --git a/src/core/adapter/base/color/mood/_background.scss b/src/core/adapter/base/color/mood/_background.scss
@@ -28,6 +28,13 @@
     text-shadow: $color-mood-warning-background-text-shadow;
 }
 
+@mixin -base-color-mood-error-background {
+    color: $color-mood-error-background-text;
+    background-color: $color-mood-error-background-shadow;
+    border-color: $color-mood-error-border;
+    text-shadow: $color-mood-error-background-text-shadow;
+}
+
 @mixin -base-color-mood-danger-background {
     color: $color-mood-danger-background-text;
     background-color: $color-mood-danger-background-shadow;

diff --git a/src/core/adapter/base/color/mood/_background_gradient.scss b/src/core/adapter/base/color/mood/_background_gradient.scss
@@ -23,6 +23,10 @@
     @include background-image(linear-gradient($color-mood-warning-background, $color-mood-warning-background-shadow));
 }
 
+@mixin -base-color-mood-error-background-gradient {
+    @include background-image(linear-gradient($color-mood-error-background, $color-mood-error-background-shadow));
+}
+
 @mixin -base-color-mood-danger-background-gradient {
     @include background-image(linear-gradient($color-mood-danger-background, $color-mood-danger-background-shadow));
 }

diff --git a/src/core/adapter/base/color/mood/_background_light.scss b/src/core/adapter/base/color/mood/_background_light.scss
@@ -28,6 +28,13 @@
     text-shadow: $color-mood-warning-background-light-text-shadow;
 }
 
+@mixin -base-color-mood-error-background-light {
+    color: $color-mood-error-background-light-text;
+    background-color: $color-mood-error-background-light-shadow;
+    border-color: $color-mood-error-light-border;
+    text-shadow: $color-mood-error-background-light-text-shadow;
+}
+
 @mixin -base-color-mood-danger-background-light {
     color: $color-mood-danger-background-light-text;
     background-color: $color-mood-danger-background-light-shadow;

diff --git a/src/core/adapter/base/color/mood/_background_light_gradient.scss b/src/core/adapter/base/color/mood/_background_light_gradient.scss
@@ -27,6 +27,12 @@
     @include background-image(linear-gradient($color-mood-warning-background-light, $color-mood-warning-background-light-shadow));
 }
 
+@mixin -base-color-mood-error-background-light-gradient {
+    color: $color-mood-error-background-light-text;
+    text-shadow: $color-mood-error-background-light-text-shadow;
+    @include background-image(linear-gradient($color-mood-error-background-light, $color-mood-error-background-light-shadow));
+}
+
 @mixin -base-color-mood-danger-background-light-gradient {
     color: $color-mood-danger-background-light-text;
     text-shadow: $color-mood-danger-background-light-text-shadow;

diff --git a/src/core/adapter/base/color/mood/_text.scss b/src/core/adapter/base/color/mood/_text.scss
@@ -14,6 +14,10 @@
     color: $color-mood-warning-foreground-text;
 }
 
+@mixin -base-color-mood-error-text {
+    color: $color-mood-error-foreground-text;
+}
+
 @mixin -base-color-mood-danger-text {
     color: $color-mood-danger-foreground-text;
 }

diff --git a/src/core/adapter/base/color/mood/_variables.scss b/src/core/adapter/base/color/mood/_variables.scss
@@ -7,6 +7,7 @@
 $color-mood-info-foreground-text:               #2f96b4 !default;
 $color-mood-success-foreground-text:            #419341 !default;
 $color-mood-warning-foreground-text:            #f89406 !default;
+$color-mood-error-foreground-text:             #bd362f !default;
 $color-mood-danger-foreground-text:             #bd362f !default;
 $color-mood-inverse-foreground-text:            #ddd !default;
 $color-mood-important-foreground-text:          #bd362f !default;
@@ -33,6 +34,12 @@ $color-mood-warning-background:                 lighten(#f89406, 15%) !default;
 $color-mood-warning-background-shadow:          #f89406 !default;
 $color-mood-warning-border:                     darken(lighten(#f89406, 15%), 30%) !default;
 
+$color-mood-error-background-text:              #fff !default;
+$color-mood-error-background-text-shadow:       0 -1px 0 rgba(0,0,0,.25) !default;
+$color-mood-error-background:                   #ee5f5b !default;
+$color-mood-error-background-shadow:            #bd362f !default;
+$color-mood-error-border:                       darken(#ee5f5b, 30%) !default;
+
 $color-mood-danger-background-text:             #fff !default;
 $color-mood-danger-background-text-shadow:      0 -1px 0 rgba(0,0,0,.25) !default;
 $color-mood-danger-background:                  #ee5f5b !default;
@@ -86,6 +93,12 @@ $color-mood-warning-background-light:                 lighten($color-mood-warnin
 $color-mood-warning-background-light-shadow:          lighten($color-mood-warning-background-shadow, 35%) !default;
 $color-mood-warning-light-border:                     darken(lighten($color-mood-warning-background, 35%), 60%) !default;
 
+$color-mood-error-background-light-text:             #653533;
+$color-mood-error-background-light-text-shadow:      none !default;
+$color-mood-error-background-light:                  lighten($color-mood-error-background, 35%) !default;
+$color-mood-error-background-light-shadow:           lighten($color-mood-error-background-shadow, 35%) !default;
+$color-mood-error-light-border:                      darken(lighten($color-mood-error-background, 35%), 60%) !default;
+
 $color-mood-danger-background-light-text:             #653533;
 $color-mood-danger-background-light-text-shadow:      none !default;
 $color-mood-danger-background-light:                  lighten($color-mood-danger-background, 35%) !default;

diff --git a/src/core/adapter/entity/_button.scss b/src/core/adapter/entity/_button.scss
@@ -59,11 +59,11 @@
         outline-offset: -2px;
     }
 
-    &:not(.primary):not(.secondary):not(.tertiary):not(.neutral):not(.info):not(.important):not(.success):not(.warning):not(.danger):not(.inverse):not(.highlight):not(.required){
+    &:not(.primary):not(.secondary):not(.tertiary):not(.neutral):not(.info):not(.important):not(.success):not(.warning):not(.error):not(.danger):not(.inverse):not(.highlight):not(.required){
         @extend .default;
     }
 
-    &:not(.primary):not(.secondary):not(.tertiary):not(.neutral):not(.info):not(.important):not(.success):not(.warning):not(.danger):not(.inverse):not(.highlight):not(.required){
+    &:not(.primary):not(.secondary):not(.tertiary):not(.neutral):not(.info):not(.important):not(.success):not(.warning):not(.error):not(.danger):not(.inverse):not(.highlight):not(.required){
         &:hover, &.active {
             background: $color-branding-default-background-shadow;
             *background: darken($color-branding-default-background-shadow, 5%);
@@ -126,6 +126,13 @@
         }
     }
 
+    &.error:not(.text) {
+        &:hover, &.active {
+            background: $color-mood-error-background-shadow;
+            *background: darken($color-mood-error-background-shadow, 5%);
+        }
+    }
+
     &.danger:not(.text) {
         &:hover, &.active {
             background: $color-mood-danger-background-shadow;

diff --git a/src/core/adapter/entity/form/control/_mood.scss b/src/core/adapter/entity/form/control/_mood.scss
@@ -45,6 +45,16 @@
     }
 }
 
+@mixin -entity-form-control-mood-error {
+    color: $color-mood-error-foreground-text;
+    label {
+        color: $color-mood-error-foreground-text;
+    }
+    input, select, textarea {
+        border-color: $color-mood-error-foreground-text;
+    }
+}
+
 @mixin -entity-form-control-mood-danger {
     color: $color-mood-danger-foreground-text;
     label {

diff --git a/src/core/adapter/entity/nav/_bar.scss b/src/core/adapter/entity/nav/_bar.scss
@@ -10,7 +10,7 @@
     padding-left: 20px;
     padding-right: 20px;
 
-    &:not(.primary):not(.secondary):not(.tertiary):not(.neutral):not(.info):not(.important):not(.success):not(.warning):not(.danger):not(.inverse):not(.highlight):not(.required){
+    &:not(.primary):not(.secondary):not(.tertiary):not(.neutral):not(.info):not(.important):not(.success):not(.warning):not(.error):not(.danger):not(.inverse):not(.highlight):not(.required){
         @extend .default;
     }
 

diff --git a/src/core/definitions/base/color/mood/_background.scss b/src/core/definitions/base/color/mood/_background.scss
@@ -14,6 +14,10 @@
     @include -base-color-mood-warning-background;
 }
 
+.error {
+    @include -base-color-mood-error-background;
+}
+
 .danger {
     @include -base-color-mood-danger-background;
 }

diff --git a/src/core/definitions/base/color/mood/_background_gradient.scss b/src/core/definitions/base/color/mood/_background_gradient.scss
@@ -18,6 +18,10 @@
         @include -base-color-mood-warning-background-gradient;
     }
 
+    &.error {
+        @include -base-color-mood-error-background-gradient;
+    }
+
     &.danger {
         @include -base-color-mood-danger-background-gradient;
     }

diff --git a/src/core/definitions/base/color/mood/_background_light.scss b/src/core/definitions/base/color/mood/_background_light.scss
@@ -16,6 +16,10 @@
         @include -base-color-mood-warning-background-light;
     }
 
+    &.error {
+        @include -base-color-mood-error-background-light;
+    }
+
     &.danger {
         @include -base-color-mood-danger-background-light;
     }

diff --git a/src/core/definitions/base/color/mood/_background_light_gradient.scss b/src/core/definitions/base/color/mood/_background_light_gradient.scss
@@ -18,6 +18,10 @@
         @include -base-color-mood-warning-background-light-gradient;
     }
 
+    &.error {
+        @include -base-color-mood-error-background-light-gradient;
+    }
+
     &.danger {
         @include -base-color-mood-danger-background-light-gradient;
     }

diff --git a/src/core/definitions/base/color/mood/_text.scss b/src/core/definitions/base/color/mood/_text.scss
@@ -14,6 +14,10 @@
     @include -base-color-mood-warning-text;
 }
 
+.text-error {
+    @include -base-color-mood-error-text;
+}
+
 .text-danger {
     @include -base-color-mood-danger-text;
 }

diff --git a/src/core/definitions/entity/form/control/_mood.scss b/src/core/definitions/entity/form/control/_mood.scss
@@ -27,6 +27,10 @@ form.form div.control {
         @include -entity-form-control-mood-warning;
     }
 
+    &.error {
+        @include -entity-form-control-mood-error;
+    }
+
     &.danger {
         @include -entity-form-control-mood-danger;
     }