From ad7a7e83c7c472560947ed2259e216808e8a07cf Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Mon, 27 Mar 2017 14:43:48 +0300 Subject: Add `closable` style to Error Notifications (#8903) Add an additional stylename `critical-error` that styles the notification like the Error-type, but without the close button. Fixes #8296 --- .../VAADIN/themes/valo/components/_notification.scss | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) (limited to 'themes') diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_notification.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_notification.scss index ee3cf67a7c..93ad0e8821 100644 --- a/themes/src/main/themes/VAADIN/themes/valo/components/_notification.scss +++ b/themes/src/main/themes/VAADIN/themes/valo/components/_notification.scss @@ -135,6 +135,16 @@ $v-notification-title-color: $v-focus-color !default; .#{$primary-stylename}.error { @include valo-notification-error-style($primary-stylename); + @include valo-notification-closable-style; + &:after { + color: #fff; + border-color: #fff; + border-color: rgba(255,255,255,.3); + } + &:active:after { + background-color: #fff; + color: #000; + } } @@ -151,11 +161,15 @@ $v-notification-title-color: $v-focus-color !default; @include valo-notification-small-style($primary-stylename); } + .#{$primary-stylename}.critical-error { + @include valo-notification-error-style($primary-stylename); + } + .#{$primary-stylename}.closable { @include valo-notification-closable-style; &.dark, - &.error, + &.critical-error, &.system { &:after { color: #fff; -- cgit v1.2.3