diff --git a/cms/static/sass/elements/_system-feedback.scss b/cms/static/sass/elements/_system-feedback.scss index 7175268ed8..f694cc3d26 100644 --- a/cms/static/sass/elements/_system-feedback.scss +++ b/cms/static/sass/elements/_system-feedback.scss @@ -204,7 +204,7 @@ // types of prompts - error .prompt.error { - .icon-error { + [class^="icon"] { color: $red-l1; } @@ -216,7 +216,7 @@ // types of prompts - confirmation .prompt.confirmation { - .icon-error { + [class^="icon"] { color: $green; } @@ -228,7 +228,7 @@ // types of prompts - error .prompt.warning { - .icon-warning { + [class^="icon"] { color: $orange; } @@ -253,7 +253,7 @@ &.wrapper-notification-warning { @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $orange); - .icon-warning { + [class^="icon"] { color: $orange; } } @@ -261,7 +261,7 @@ &.wrapper-notification-error { @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $red-l1); - .icon-error { + [class^="icon"] { color: $red-l1; } } @@ -269,7 +269,7 @@ &.wrapper-notification-confirmation { @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $green); - .icon-confirmation { + [class^="icon"] { color: $green; } } @@ -294,13 +294,13 @@ max-width: none; min-width: none; - .icon, .copy { + [class^="icon"], .copy { float: none; display: inline-block; vertical-align: middle; } - .icon { + [class^="icon"] { width: $baseline; height: ($baseline*1.25); margin-right: ($baseline*0.75); @@ -329,7 +329,7 @@ max-width: none; min-width: none; - .icon-help { + [class^="icon"] { width: $baseline; margin-right: ($baseline*0.75); } @@ -357,13 +357,13 @@ font-weight: 700; } - .icon, .copy { + [class^="icon"], .copy { float: left; display: inline-block; vertical-align: middle; } - .icon { + [class^="icon"] { @include transition (color 0.5s ease-in-out); @include font-size(22); width: flex-grid(1, 12); @@ -389,7 +389,7 @@ // with actions &.has-actions { - .icon { + [class^="icon"] { width: flex-grid(1, 12); } @@ -436,7 +436,7 @@ &.saving { - .icon-saving { + [class^="icon"] { @include anim-rotateClockwise(3s, linear, infinite); width: 22px; } @@ -472,7 +472,7 @@ &.wrapper-alert-warning { @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $orange); - .icon-warning { + [class^="icon"] { color: $orange; } } @@ -480,7 +480,7 @@ &.wrapper-alert-error { @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $red-l1); - .icon-error { + [class^="icon"] { color: $red-l1; } } @@ -488,7 +488,7 @@ &.wrapper-alert-confirmation { @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $green); - .icon-confirmation { + [class^="icon"] { color: $green; } } @@ -496,7 +496,7 @@ &.wrapper-alert-announcement { @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue); - .icon-announcement { + [class^="icon"] { color: $blue; } } @@ -504,7 +504,7 @@ &.wrapper-alert-step-required { @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $pink); - .icon-step-required { + [class^="icon"] { color: $pink; } } @@ -524,11 +524,11 @@ font-weight: 700; } - .icon, .copy { + [class^="icon"], .copy { float: left; } - .icon { + [class^="icon"] { @include transition (color 0.5s ease-in-out); @include font-size(22); width: flex-grid(1, 12); @@ -550,7 +550,7 @@ // with actions &.has-actions { - .icon { + [class^="icon"] { width: flex-grid(1, 12); } @@ -600,7 +600,7 @@ @extend .text-sr; } - .icon { + [class^="icon"] { @include font-size(14); color: $white; width: auto;