vaadin-framework/WebContent/VAADIN/themes/valo/components/_notification.scss

 /**
 *
 * @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);
  }
}