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

$v-notification-title-color: $v-focus-color !default;


@mixin 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 valo-anim-slide-down(600ms);
    }

    .v-Notification[style*="bottom: 0"] {
      @include valo-anim-slide-up(600ms);
    }

    .v-Notification[style*="right: 0"] {
      @include 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):not(.bar) {
      @include 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 valo-notification-style;

    @if $v-animations-enabled {
      @include valo-anim-fade-in;
    }

  }


  // System notification

  .v-Notification-system {
    @include valo-notification-bar-style;
    @include 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 valo-notification-tray-style;
  }

  .v-Notification.warning {
    @include valo-notification-warning-style;
  }

  .v-Notification.error {
    @include valo-notification-error-style;
  }

  .v-Notification.bar {
    @include valo-notification-bar-style;
  }

  .v-Notification.closable {
    @include 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 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();
  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 !important);
  }

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

@mixin valo-notification-system-style {
  background-color: #444;
  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;
  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);
  }
}