diff --git a/src/core/adapter/base/color/_text.scss b/src/core/adapter/base/color/_text.scss index c9bb27a..95bd199 100644 --- 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 index d382408..2f43adf 100644 --- 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 index ac0b5cc..c717ece 100644 --- 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 index df7e732..e05aec9 100644 --- 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 index 4f7dc53..0b82382 100644 --- 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 index 039fc35..5be6c93 100644 --- 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 index 3fc420d..7c6a04d 100644 --- 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 index 2a3a1a9..f53297f 100644 --- 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 index 1f9df53..8f676b3 100644 --- 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 index 757a0e5..68dfbc9 100644 --- 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 index 88bc267..b3c9f94 100644 --- 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 index 29ca735..cb2d851 100644 --- 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 index 31829f9..8dad863 100644 --- 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 index 792492d..42e7dcb 100644 --- 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 index a755699..b938784 100644 --- 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 index 7efd4c8..cedef69 100644 --- 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; }