diff options
Diffstat (limited to 'WebContent/VAADIN/themes/valo/shared/_notification.scss')
| -rw-r--r-- | WebContent/VAADIN/themes/valo/shared/_notification.scss | 297 |
1 files changed, 297 insertions, 0 deletions
diff --git a/WebContent/VAADIN/themes/valo/shared/_notification.scss b/WebContent/VAADIN/themes/valo/shared/_notification.scss new file mode 100644 index 0000000000..c546a16225 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/shared/_notification.scss @@ -0,0 +1,297 @@ +@mixin v-valo-notification { + + + + + // Positional offsets + + // Can't match to "top: 0", since that would target "margin-top: 0" also, which all GWT PopupPanels have always + .v-Notification[style*=" top: 0"] { + margin-top: $v-layout-spacing-vertical !important; + } + + .v-Notification[style*="right: 0"] { + margin-right: $v-layout-spacing-horizontal; + } + + .v-Notification[style*="bottom: 0"] { + margin-bottom: $v-layout-spacing-vertical; + } + + // Can't match to "left: 0", since that would target "margin-left: 0" also, which all GWT PopupPanels have always + .v-Notification[style*=" left: 0"] { + margin-left: $v-layout-spacing-horizontal !important; + } + + + + + // Custom animations for positions + // Left/right positions override top & bottom + + // Can't match to "top: 0", since that would target "margin-top: 0" also, which all GWT PopupPanels have always + @if $v-animations-enabled { + .v-Notification[style*=" top: 0"] { + @include v-valo-anim-slide-down(600ms); + } + + .v-Notification[style*="bottom: 0"] { + @include v-valo-anim-slide-up(600ms); + } + + .v-Notification[style*="right: 0"] { + @include v-valo-anim-slide-left(600ms); + } + + // Can't match to "left: 0", since that would target "margin-left: 0" also, which all GWT PopupPanels have always + .v-Notification[style*=" left: 0"]:not(.v-Notification-system) { + @include v-valo-anim-slide-right(600ms); + } + } + + + + + + // Default style (a.k.a. humanized) + + .v-Notification { + border-radius: $v-border-radius; + text-align: center; + position: fixed !important; + + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; + + h1 { + margin: 0; + display: inline-block; + text-align: left; + font-weight: inherit; + line-height: inherit; + white-space: nowrap; + letter-spacing: 0; + } + + p { + margin: 0; + display: inline-block; + vertical-align: middle; + max-width: 30em; + text-align: left; + } + + h1 ~ p { + margin-left: round($v-font-size * 1.5); + } + + .v-icon + h1 { + margin-left: round($v-font-size); + } + + @include v-valo-notification-style; + + @if $v-animations-enabled { + @include v-valo-anim-fade-in; + } + + } + + + // System notification + + .v-Notification-system { + left: 0 !important; + right: 0; + max-width: 100%; + margin: 0 !important; + border-radius: 0; + + @include v-valo-notification-system-style; + } + + // Needs a more specific selector to override positional margins + .v-Notification-system.v-Notification-system { + margin: 0 !important; + } + + + + + // Tray notification + + .v-Notification.tray { + text-align: left; + h1 { + //display: block; + } + + h1 + p { + display: block; + margin: .5em 0 0; + } + @include v-valo-notification-tray-style; + } + + .v-Notification.warning { + @include v-valo-notification-warning-style; + } + + .v-Notification.error { + @include v-valo-notification-error-style; + } + + .v-Notification.closable { + @include v-valo-notification-closable-style; + + &.error, + &.system { + &:after { + color: #fff; + border-color: #fff; + border-color: rgba(255,255,255,.3); + } + &:active:after { + background-color: #fff; + color: #000; + } + } + + &.tray:after { + top: round($v-unit-size/2.3); + margin-top: 0; + } + } + +} + + + + + + +@mixin v-valo-notification-closable-style { + padding-right: $v-unit-size + round($v-unit-size/1.7); + overflow: hidden !important; // Override GWT PopupPanel + cursor: pointer; + + //&:before { + // content: ""; + // position: absolute; + // top: 0; + // right: 0; + // bottom: 0; + // width: $v-unit-size; + // cursor: pointer; + // background: #000; + // @include opacity(.15); + //} + + &:after { + content: "\00d7"; + font-size: 1.5em; + position: absolute; + top: 50%; + margin-top: round($v-unit-size/-3); + right: round($v-unit-size/3); + width: round($v-unit-size/1.5); + height: round($v-unit-size/1.5); + line-height: round($v-unit-size/1.5) - 1px; + cursor: pointer; + color: #000; + @include opacity(.5); + text-align: center; + border: $v-border-width solid #000; + border-color: rgba(0,0,0,.3); + border-radius: 50%; + @include transition(opacity 200ms); + } + + &:hover:after { + @include opacity(1); + } + + &:active:after { + background-color: #000; + color: #fff; + @include opacity(.3); + @include transition(none 200ms); + } +} + + + + + +@mixin v-valo-notification-style { + background: v-valo-overlay-background-color(); + box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.15); + padding: round($v-unit-size/2) round($v-unit-size/1.7); + + // Make thigns easier to read + &[style*="opacity: 0.9;"] { + @include opacity(1, true); + } + + h1 { + color: v-valo-focus-color(); + font-size: round($v-font-size * 1.2); + line-height: 1; + } + p { + line-height: 1.4; + } +} + +@mixin v-valo-notification-system-style { + background-color: #444; + font-weight: $v-font-weight + 100; + line-height: round($v-font-size * 1.4); + box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.25); + + h1 { + color: #fff; + vertical-align: middle; + } + + p { + color: #e6e6e6; + max-width: 50em; + } + + // No need to underline the "click here" text, let's imply that the whole banner is clickable + u { + text-decoration: none; + } +} + + +@mixin v-valo-notification-tray-style {} + +@mixin v-valo-notification-warning-style { + background: #FFF3D2; + + h1 { + color: #AC7C00; + } + + p { + color: #9D874D; + } +} + +@mixin v-valo-notification-error-style { + background: $v-error-indicator-color; + font-weight: $v-font-weight + 100; + box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.25); + + h1 { + color: v-valo-font-color($v-error-indicator-color, 1); + } + + p { + color: v-valo-font-color($v-error-indicator-color, .8); + } +} |