diff --git a/cms/static/sass/elements/_system-feedback.scss b/cms/static/sass/elements/_system-feedback.scss index 37c1df0aa6..bf9ec1b05a 100644 --- a/cms/static/sass/elements/_system-feedback.scss +++ b/cms/static/sass/elements/_system-feedback.scss @@ -18,7 +18,7 @@ background: $yellow-d1; color: $white; - [class^="icon-"] { + .feedback-symbol { @extend %t-icon5; position: relative; top: 1px; @@ -246,7 +246,7 @@ // types of prompts - error .prompt.error { - [class^="icon"] { + .feedback-symbol { color: $red-l1; } @@ -258,7 +258,7 @@ // types of prompts - confirmation .prompt.confirmation { - [class^="icon"] { + .feedback-symbol { color: $green; } @@ -270,7 +270,7 @@ // types of prompts - error .prompt.warning { - [class^="icon"] { + .feedback-symbol { color: $orange; } @@ -295,7 +295,7 @@ &.wrapper-notification-warning { box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $orange; - [class^="icon"] { + .feedback-symbol { color: $orange; } } @@ -303,7 +303,7 @@ &.wrapper-notification-error { box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $red-l1; - [class^="icon"] { + .feedback-symbol { color: $red-l1; } } @@ -311,7 +311,7 @@ &.wrapper-notification-confirmation { box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $green; - [class^="icon"] { + .feedback-symbol { color: $green; } } @@ -336,13 +336,13 @@ max-width: none; min-width: none; - [class^="icon"], .copy { + .feedback-symbol, .copy { float: none; display: inline-block; vertical-align: middle; } - [class^="icon"] { + .feedback-symbol { width: $baseline; height: ($baseline*1.25); margin-right: ($baseline/4); @@ -371,7 +371,7 @@ max-width: none; min-width: none; - [class^="icon"] { + .feedback-symbol { width: $baseline; margin-right: ($baseline*0.75); } @@ -399,13 +399,13 @@ @extend %t-strong; } - [class^="icon"], .copy { + .feedback-symbol, .copy { float: left; display: inline-block; vertical-align: middle; } - [class^="icon"] { + .feedback-symbol { @include transition (color 0.50s ease-in-out 0s); @extend %t-icon3; width: flex-grid(1, 12); @@ -431,7 +431,7 @@ // with actions &.has-actions { - [class^="icon"] { + .feedback-symbol { width: flex-grid(1, 12); } @@ -481,7 +481,7 @@ max-width: none; min-width: 0; - [class^="icon"] { + .feedback-symbol { @include animation(rotateCW $tmg-s3 linear infinite); width: 25px; margin: -4px 10px 0 0; @@ -527,7 +527,7 @@ &.wrapper-alert-warning { box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $orange; - .alert-symbol { + .feedback-symbol { color: $orange; } } @@ -535,7 +535,7 @@ &.wrapper-alert-error { box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $red-l1; - .alert-symbol { + .feedback-symbol { color: $red-l1; } } @@ -543,7 +543,7 @@ &.wrapper-alert-confirmation { box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $green; - .alert-symbol { + .feedback-symbol { color: $green; } } @@ -551,7 +551,7 @@ &.wrapper-alert-announcement { box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue; - .alert-symbol { + .feedback-symbol { color: $blue; } } @@ -559,7 +559,7 @@ &.wrapper-alert-step-required { box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $pink; - .alert-symbol { + .feedback-symbol { color: $pink; } } @@ -579,11 +579,11 @@ @extend %t-strong; } - .alert-symbol, .copy { + .feedback-symbol, .copy { float: left; } - .alert-symbol { + .feedback-symbol { @include transition (color 0.50s ease-in-out 0s); @extend %t-icon3; width: flex-grid(1, 12); @@ -593,6 +593,7 @@ .copy { width: flex-grid(10, 12); + margin-top: ($baseline/2); color: $gray-l2; .title { @@ -605,7 +606,7 @@ // with actions &.has-actions { - .alert-symbol { + .feedback-symbol { width: flex-grid(1, 12); } diff --git a/cms/templates/js/system-feedback.underscore b/cms/templates/js/system-feedback.underscore index cf4f8479bb..aa63fa558d 100644 --- a/cms/templates/js/system-feedback.underscore +++ b/cms/templates/js/system-feedback.underscore @@ -10,7 +10,7 @@