| /** |
| * |
| * @group notification |
| */ |
| $v-notification-title-color: $v-focus-color !default; |
| |
| |
| /** |
| * |
| * |
| * @param {string} $primary-stylename (v-Notification) - |
| * @param {bool} $include-additional-styles - |
| * |
| * @group notification |
| */ |
| @mixin valo-notification ($primary-stylename: v-Notification, $include-additional-styles: contains($v-included-additional-styles, notification)) { |
| |
| // Positional offsets |
| |
| .#{$primary-stylename} { |
| &.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-animate-in-fade 180ms 10ms backwards); |
| |
| &.v-position-top { |
| @include animation(valo-animate-in-slide-down 400ms 10ms backwards); |
| } |
| |
| &.v-position-bottom { |
| @include animation(valo-animate-in-slide-up 400ms 10ms backwards); |
| } |
| } |
| |
| .#{$primary-stylename}-animate-out { |
| @include animation(valo-animate-out-fade 150ms); |
| |
| &.v-position-top, |
| &.v-position-bottom { |
| @include animation(valo-animate-out-slide-down-fade 200ms); |
| } |
| } |
| } |
| |
| // 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; |
| |
| @include valo-notification-style($primary-stylename); |
| |
| } |
| |
| .#{$primary-stylename}-caption { |
| margin: 0; |
| display: inline-block; |
| text-align: left; |
| font-weight: inherit; |
| line-height: inherit; |
| white-space: nowrap; |
| letter-spacing: 0; |
| } |
| |
| .#{$primary-stylename}-description, .#{$primary-stylename}-details { |
| margin: 0; |
| display: inline-block; |
| vertical-align: middle; |
| max-width: 30em; |
| text-align: left; |
| max-height: 20em; |
| overflow: auto; |
| } |
| |
| .#{$primary-stylename}-caption ~ .#{$primary-stylename}-description, |
| .#{$primary-stylename}-caption ~ .#{$primary-stylename}-details { |
| margin-left: round($v-font-size * 1.5); |
| } |
| |
| .v-icon + .#{$primary-stylename}-caption { |
| margin-left: round($v-font-size); |
| } |
| |
| .#{$primary-stylename}-system { |
| @include valo-notification-bar-style($primary-stylename); |
| @include valo-notification-system-style($primary-stylename); |
| } |
| |
| .#{$primary-stylename}.tray { |
| text-align: left; |
| .#{$primary-stylename}-caption { |
| //display: block; |
| } |
| |
| .#{$primary-stylename}-caption + .#{$primary-stylename}-description { |
| display: block; |
| margin: .5em 0 0; |
| } |
| @include valo-notification-tray-style; |
| } |
| |
| .#{$primary-stylename}.warning { |
| @include valo-notification-warning-style($primary-stylename); |
| } |
| |
| .#{$primary-stylename}.error { |
| @include valo-notification-error-style($primary-stylename); |
| } |
| |
| |
| @if $include-additional-styles { |
| .#{$primary-stylename}.dark { |
| @include valo-notification-dark-style($primary-stylename); |
| } |
| |
| .#{$primary-stylename}.bar { |
| @include valo-notification-bar-style($primary-stylename); |
| } |
| |
| .#{$primary-stylename}.small { |
| @include valo-notification-small-style($primary-stylename); |
| } |
| |
| .#{$primary-stylename}.closable { |
| @include valo-notification-closable-style; |
| |
| &.dark, |
| &.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; |
| } |
| } |
| |
| .#{$primary-stylename}.success, |
| .#{$primary-stylename}.failure { |
| background: #fff; |
| color: #555; |
| border: 2px solid $v-friendly-color; |
| |
| .#{$primary-stylename}-caption { |
| color: $v-friendly-color; |
| font-weight: $v-font-weight + 100; |
| |
| &:before { |
| font-family: ThemeIcons; |
| content: "\f00c"; |
| margin-right: .5em; |
| } |
| } |
| |
| &.bar { |
| margin: -2px !important; |
| } |
| } |
| |
| .#{$primary-stylename}.failure { |
| border-color: $v-error-indicator-color; |
| |
| .#{$primary-stylename}-caption { |
| color: $v-error-indicator-color; |
| |
| &:before { |
| content: "\f05e"; |
| } |
| } |
| } |
| } |
| } |
| |
| |
| |
| |
| /** |
| * |
| * |
| * |
| * @group notification |
| */ |
| @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: if(is-dark-color($v-overlay-background-color), #fff, #000); |
| color: $color; |
| @include opacity(.5); |
| text-align: center; |
| border: first-number($v-border) solid $color; |
| border-color: rgba($color, .3); |
| border-radius: 50%; |
| @include transition(opacity 200ms); |
| } |
| |
| &:hover:after { |
| @include opacity(1); |
| } |
| |
| &:active:after { |
| $color: if(is-dark-color($v-overlay-background-color), #000, #fff); |
| $bg: if(is-dark-color($v-overlay-background-color), #fff, #000); |
| background-color: $bg; |
| color: $color; |
| @include opacity(.3); |
| @include transition(none 200ms); |
| } |
| } |
| |
| |
| |
| |
| |
| /** |
| * |
| * @param {string} $primary-style |
| * |
| * @group notification |
| */ |
| @mixin valo-notification-style ($primary-style) { |
| background: $v-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); |
| |
| .#{$primary-style}-caption { |
| color: $v-notification-title-color; |
| font-size: round($v-font-size * 1.2); |
| line-height: 1; |
| } |
| .#{$primary-style}-description { |
| line-height: 1.4; |
| } |
| } |
| |
| /** |
| * |
| * @param {string} $primary-style |
| * |
| * @group notification |
| */ |
| @mixin valo-notification-bar-style ($primary-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); |
| |
| .#{$primary-style}-description, .#{$primary-style}-details { |
| max-width: 50em; |
| } |
| |
| &.v-position-top { |
| top: 0; |
| |
| @if $v-animations-enabled { |
| &[class*="animate-in"] { |
| @include animation(valo-animate-in-slide-down 300ms 10ms backwards); |
| } |
| |
| &[class*="animate-out"] { |
| @include animation(valo-animate-out-slide-up 200ms); |
| } |
| } |
| } |
| |
| &.v-position-bottom { |
| bottom: 0; |
| |
| @if $v-animations-enabled { |
| &[class*="animate-in"] { |
| @include animation(valo-animate-in-slide-up 300ms 10ms backwards); |
| } |
| |
| &[class*="animate-out"] { |
| @include animation(valo-animate-out-slide-down 200ms); |
| } |
| } |
| } |
| } |
| |
| /** |
| * |
| * |
| * |
| * @group notification |
| */ |
| @mixin valo-notification-dark-style ($primary-style) { |
| background-color: #444; |
| background-color: rgba(#444, .9); |
| font-weight: $v-font-weight + 100; |
| line-height: round($v-font-size * 1.4); |
| |
| .#{$primary-style}-caption { |
| color: #fff; |
| vertical-align: middle; |
| } |
| |
| .#{$primary-style}-description, .#{$primary-style}-details { |
| color: #e6e6e6; |
| } |
| } |
| |
| /** |
| * |
| * @param {string} $primary-style |
| * |
| * @group notification |
| */ |
| @mixin valo-notification-system-style ($primary-style) { |
| @include valo-notification-dark-style($primary-style); |
| |
| // No need to underline the "click here" text, let's imply that the whole banner is clickable |
| u { |
| text-decoration: none; |
| } |
| } |
| |
| /** |
| * |
| * |
| * |
| * @group notification |
| */ |
| @mixin valo-notification-tray-style {} |
| |
| /** |
| * |
| * @param {string} $primary-style |
| * |
| * @group notification |
| */ |
| @mixin valo-notification-warning-style ($primary-style) { |
| background: #FFF3D2; |
| |
| .#{$primary-style}-caption { |
| color: #AC7C00; |
| } |
| |
| .#{$primary-style}-description { |
| color: #9D874D; |
| } |
| } |
| |
| /** |
| * |
| * @param {string} $primary-style |
| * |
| * @group notification |
| */ |
| @mixin valo-notification-error-style ($primary-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)); |
| |
| .#{$primary-style}-caption { |
| color: valo-font-color($v-error-indicator-color, 1); |
| } |
| |
| .#{$primary-style}-description { |
| color: valo-font-color($v-error-indicator-color, .8); |
| } |
| } |
| |
| /** |
| * |
| * @param {string} $primary-style |
| * |
| * @group notification |
| */ |
| @mixin valo-notification-small-style ($primary-style) { |
| padding: round($v-unit-size/3.3) round($v-unit-size/2.8); |
| |
| .#{$primary-style}-caption { |
| font-size: $v-font-size; |
| } |
| .#{$primary-style}-description { |
| font-size: round($v-font-size * 0.85); |
| } |
| } |