diff options
Diffstat (limited to 'WebContent/VAADIN/themes/valo/shared/_notification.scss')
| -rw-r--r-- | WebContent/VAADIN/themes/valo/shared/_notification.scss | 287 |
1 files changed, 287 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..cfe4c19599 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/shared/_notification.scss @@ -0,0 +1,287 @@ +$v-notification-title-color: $v-focus-color !default; + + +@mixin valo-notification ($primary-stylename: v-Notification) { + + // Positional offsets + + .v-Notification { + &.v-position-top { + top: $v-layout-spacing-vertical; + } + + &.v-position-right { + right: $v-layout-spacing-horizontal; + } + + &.v-position-bottom { + bottom: $v-layout-spacing-vertical; + } + + &.v-position-left { + left: $v-layout-spacing-horizontal; + } + + &.v-position-assistive { + top: -9999px; + left: -9999px; + } + } + + // Custom animations for positions + + @if $v-animations-enabled { + + .#{$primary-stylename}-animate-in { + @include animation(valo-placeholder-animate-in 100ms, valo-anim-fade-in 100ms); + + &.v-position-left { + @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-right 200ms); + } + + &.v-position-right { + @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-left 200ms); + } + } + + .#{$primary-stylename}-animate-out { + @include animation(valo-placeholder-animate-out 150ms, valo-anim-fade-out 150ms); + + &.v-position-left, + &.v-position-right { + @include animation(valo-placeholder-animate-out 120ms, valo-anim-drop-fade-out 120ms); + } + } + } + + // Default style (a.k.a. humanized) + + .#{$primary-stylename} { + 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; + max-height: 20em; + overflow: auto; + } + + h1 ~ p { + margin-left: round($v-font-size * 1.5); + } + + .v-icon + h1 { + margin-left: round($v-font-size); + } + + @include valo-notification-style; + + } + + .#{$primary-stylename}-system { + @include valo-notification-bar-style; + @include valo-notification-system-style; + } + + .#{$primary-stylename}.tray { + text-align: left; + h1 { + //display: block; + } + + h1 + p { + display: block; + margin: .5em 0 0; + } + @include valo-notification-tray-style; + } + + .#{$primary-stylename}.warning { + @include valo-notification-warning-style; + } + + .#{$primary-stylename}.error { + @include valo-notification-error-style; + } +} + + + + +@mixin valo-notification-closable-style { + padding-right: $v-unit-size + round($v-unit-size/1.7); + overflow: hidden !important; // Override GWT PopupPanel + cursor: pointer; + + &: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: first-number($v-border) 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 valo-notification-style { + background: valo-overlay-background-color(); + @include box-shadow(0px 5px 15px 0px rgba(0,0,0,0.15)); + padding: round($v-unit-size/2) round($v-unit-size/1.7); + + h1 { + color: $v-notification-title-color; + font-size: round($v-font-size * 1.2); + line-height: 1; + } + p { + line-height: 1.4; + } +} + +@mixin valo-notification-bar-style { + left: 0 !important; + right: 0; + max-width: 100%; + margin: 0 !important; + border-radius: 0; + @include box-shadow(0 0 20px 0 rgba(0,0,0,0.25)); + padding: round($v-unit-size/3) round($v-unit-size/2.5); + + p { + max-width: 50em; + } + + &.v-position-top { + top: 0; + + @if $v-animations-enabled { + &.v-Notification-animate-in { + @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-down 200ms); + } + + &.v-Notification-animate-out { + @include animation(valo-placeholder-animate-out 200ms, valo-anim-slide-out-up 200ms); + } + } + } + + &.v-position-bottom { + bottom: 0; + + @if $v-animations-enabled { + &.v-Notification-animate-in { + @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-up 200ms); + } + + &.v-Notification-animate-out { + @include animation(valo-placeholder-animate-out 200ms, valo-anim-slide-out-down 200ms); + } + } + } +} + +@mixin valo-notification-system-style { + background-color: #444; + background-color: rgba(#444, .9); + font-weight: $v-font-weight + 100; + line-height: round($v-font-size * 1.4); + + h1 { + color: #fff; + vertical-align: middle; + } + + p { + color: #e6e6e6; + } + + // No need to underline the "click here" text, let's imply that the whole banner is clickable + u { + text-decoration: none; + } +} + +@mixin valo-notification-tray-style {} + +@mixin valo-notification-warning-style { + background: #FFF3D2; + + h1 { + color: #AC7C00; + } + + p { + color: #9D874D; + } +} + +@mixin valo-notification-error-style { + background: $v-error-indicator-color; + font-weight: $v-font-weight + 100; + @include box-shadow(0px 5px 15px 0px rgba(0,0,0,0.25)); + + h1 { + color: valo-font-color($v-error-indicator-color, 1); + } + + p { + color: valo-font-color($v-error-indicator-color, .8); + } +} + +@mixin valo-notification-small-style { + padding: round($v-unit-size/3.3) round($v-unit-size/2.8); + + h1 { + font-size: $v-font-size; + } + p { + font-size: round($v-font-size * 0.85); + } +} |