path: root/WebContent/VAADIN/themes/valo/shared/_notification.scss

$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);
  }
}