Split common-stylenames to individual component files (#14374)

Moved notification and valo-menu styles to the components folder as
well, and added them to the $v-included-components list.

Additional styles are now also controlled with a list variable, which
lists all components whose additional styles should be included in the
build.

Change-Id: Ifb8d49d71622decf8fa0d4875985fcafd908a1f8

1 files changed, 363 insertions, 0 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_notification.scss b/WebContent/VAADIN/themes/valo/components/_notification.scss
new file mode 100644
index 0000000000..3cfa446f7d
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/components/_notification.scss
@@ -0,0 +1,363 @@
+$v-notification-title-color: $v-focus-color !default;
+
+
+@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-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;
+  }
+
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}.dark {
+      @include valo-notification-dark-style;
+    }
+
+    .#{$primary-stylename}.bar {
+      @include valo-notification-bar-style;
+    }
+
+    .#{$primary-stylename}.small {
+      @include valo-notification-small-style;
+    }
+
+    .#{$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;
+
+      h1 {
+        color: $v-friendly-color;
+        font-weight: $v-font-weight + 100;
+
+        &:before {
+          font-family: FontAwesome;
+          content: "\f00c";
+          margin-right: .5em;
+        }
+      }
+
+      &.bar {
+        margin: -2px !important;
+      }
+    }
+
+    .#{$primary-stylename}.failure {
+      border-color: $v-error-indicator-color;
+
+      h1 {
+        color: $v-error-indicator-color;
+
+        &:before {
+          content: "\f05e";
+        }
+      }
+    }
+  }
+}
+
+
+
+
+@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 {
+      &[class*="animate-in"] {
+        @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-down 200ms);
+      }
+
+      &[class*="animate-out"] {
+        @include animation(valo-placeholder-animate-out 200ms, valo-anim-slide-out-up 200ms);
+      }
+    }
+  }
+
+  &.v-position-bottom {
+    bottom: 0;
+
+    @if $v-animations-enabled {
+      &[class*="animate-in"] {
+        @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-up 200ms);
+      }
+
+      &[class*="animate-out"] {
+        @include animation(valo-placeholder-animate-out 200ms, valo-anim-slide-out-down 200ms);
+      }
+    }
+  }
+}
+
+@mixin valo-notification-dark-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;
+  }
+}
+
+@mixin valo-notification-system-style {
+  @include valo-notification-dark-style;
+
+  // 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);
+  }
+}