Initial commit of Valo (from original repo at 60e2fa9ea119d24bb2421d3671a8cb87d6754e8b

8 files changed, 1210 insertions, 0 deletions

diff --git a/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss b/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss
new file mode 100644
index 0000000000..7ace0ddb6c
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss
@@ -0,0 +1,15 @@
+@mixin v-valo-contextmenu {
+  
+  .v-contextmenu {
+    @include v-valo-selection-overlay-style;
+  }
+  
+  .v-contextmenu .gwt-MenuItem {
+    @include v-valo-selection-item-style;
+  }
+  
+  .v-contextmenu .gwt-MenuItem-selected {
+    @include v-valo-selection-item-selected-style;
+  }
+  
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/valo/shared/_global.scss b/WebContent/VAADIN/themes/valo/shared/_global.scss
new file mode 100644
index 0000000000..f3de32acdd
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/shared/_global.scss
@@ -0,0 +1,361 @@
+@import "loading-indicator";
+@import "contextmenu";
+@import "overlay";
+@import "notification";
+@import "tooltip";
+
+
+// Include global styles only once
+$v-valo-global-included: false !default;
+@mixin v-valo-global {
+  @if $v-valo-global-included == false {
+
+    // Core widget styles come before any other component (and are always included),
+    // so that it has the least specificity
+    @include v-valo-widget;
+
+    .v-generated-body {
+      overflow: hidden;
+      margin: 0;
+      padding: 0;
+      border: 0;
+    }
+    
+    .v-app {
+      height: 100%;
+      // Cancel tap highlight from all elements inside the app
+      -webkit-tap-highlight-color: rgba(0,0,0,0);
+    }
+    
+    .v-ui {
+      position: relative;
+    }
+    
+    // Prevent margin collapse
+    .v-ui.v-ui-embedded {
+      margin-top: -1px;
+      border-top: 1px solid transparent;
+    }
+    
+    .v-ui:focus {
+      outline: none;
+    }
+    
+    .v-overlay-container {
+      width: 0;
+      height: 0;
+    }
+    
+    // Removes clear button from input fields introduced by IE10
+    input::-ms-clear {
+      display: none;
+    }
+    
+    .v-drag-element {
+      z-index: 60000;
+      // Override any other position properties
+      position: absolute !important;
+      cursor: default;
+    }
+    
+    .v-clip {
+      overflow: hidden;
+    }
+    
+    .v-scrollable {
+      overflow: auto;
+      // Fix extra whitespace in IE
+      line-height: 0;
+    }
+    
+    .v-ios.v-webkit .v-scrollable {
+      -webkit-overflow-scrolling: touch; 
+    }
+    
+    // Disable native scrolling on iOS 5 due to issue #8792
+    .v-ios5.v-webkit .v-scrollable {
+      -webkit-overflow-scrolling: none;
+    }
+    
+    .v-assistive-device-only {
+      position: absolute;
+      top: -2000px;
+      left: -2000px;
+      width: 10px;
+      overflow: hidden;
+    }
+    
+    .v-icon,
+    .v-errorindicator,
+    .v-required-field-indicator {
+      display: inline-block;
+      line-height: inherit;
+    }
+
+    .v-caption,
+    .v-captiontext {
+      display: inline-block;
+      line-height: $v-line-height;
+    }
+
+    // Component global styles should also be included here
+    @include v-valo-orderedlayout-global;
+    @include v-valo-gridlayout-global;
+    @include v-valo-calendar-global;
+    @include v-valo-colorpicker-global;
+    @include v-valo-table-global;
+    @include v-valo-tabsheet-global;
+
+    $v-valo-global-included: true;
+  }
+}
+
+
+
+$v-valo-shared-pathPrefix: null;
+  
+@if $v-relative-paths == false {
+  $v-valo-shared-pathPrefix: "../valo/shared/";
+}
+
+
+@mixin v-valo-app-style {
+  font: $v-font-weight #{$v-font-size}/#{$v-line-height} $v-font-family;
+  color: $v-font-color;
+  background-color: $v-app-background-color;
+  cursor: default;
+  
+  // Default to Helvetica Neue on Macs instead of Helvetica, which has a slightly different baseline
+  @if $v-font-family == sans-serif {
+    .v-mac & {
+        font-family: "Helvetica Neue", sans-serif;
+    }
+  }
+}
+
+
+@mixin v-valo-common {
+
+  //@if & != null {
+  //  &,
+  //  &.v-app-loading {
+  //    @include v-valo-app-style;
+  //  }
+  //} @else {
+    &.v-app,
+    &.v-app-loading {
+      @include v-valo-app-style;
+    }
+  //}
+
+  //&.v-overlay-container {
+  //  position: absolute;
+  //  top: 0;
+  //}
+
+  .v-app-loading {
+    width: 100%;
+    height: 100%;
+    background: $v-app-background-color;
+
+    $_size: 28px + round($v-unit-size/2);
+
+    &:before {
+      content: "";
+      position: fixed;
+      z-index: 100;
+      top: 45%;
+      left: 50%;
+      width: 28px;
+      height: 28px;
+      padding: round($v-unit-size/4);
+      margin-top: round($_size/-2);
+      margin-left: round($_size/-2);
+      background: #fff url($v-valo-shared-pathPrefix + "img/spinner.gif") no-repeat 50%;
+      border-radius: $v-border-radius;
+    }
+
+    @if $v-app-loading-text != "" {
+      &:after {
+        position: fixed;
+        z-index: 100;
+        top: 45%;
+        padding-top: $_size;
+        text-align: center;
+        left: 0;
+        right: 0;
+        content: $v-app-loading-text;
+      }
+    }
+  }
+  
+  @include v-valo-loading-bar;
+
+
+  // Fallback spinner for browsers without CSS animations
+  .v-ie8 &,
+  .v-ie9 & {
+    .v-loading-indicator,
+    .v-loading-indicator-delay,
+    .v-loading-indicator-wait {
+      width: 28px !important;
+      height: 28px;
+      padding: round($v-unit-size/4);
+      background: #fff url($v-valo-shared-pathPrefix + "img/spinner.gif") no-repeat 50%;
+      border-radius: $v-border-radius;
+      top: round($v-unit-size/4);
+      right: round($v-unit-size/4);
+      left: auto;
+      filter: alpha(opacity=50);
+
+      &[style*="none"] {
+        display: none !important;
+      }
+    }
+
+    .v-loading-indicator-wait {
+      filter: alpha(opacity=100);
+    }
+  }
+  
+  .v-scrollable:focus {
+    outline: none;
+  }
+  
+  //.v-captiontext,
+  //.v-errorindicator,
+  //.v-required-field-indicator,
+  img.v-icon {
+    vertical-align: middle;
+  }
+  
+  .v-caption {
+    @include v-valo-caption-style;
+  }
+
+  .v-caption-on-left .v-caption,
+  .v-caption-on-right .v-caption {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .v-icon + .v-captiontext,
+  .v-icon + span {
+    margin-left: round($v-unit-size/5);
+
+    &:empty {
+      margin-left: 0;
+    }
+  }
+  
+  .v-errorindicator {
+    @include v-valo-error-indicator-style;
+  }
+
+  .v-required-field-indicator {
+    color: $v-required-field-indicator-color;
+    padding: 0 .2em;
+  }
+
+  select {
+    font: inherit;
+    font-weight: 400;
+    line-height: inherit;
+    color: inherit;
+    padding: round($v-unit-size/8);
+    margin: 0;
+    border-radius: $v-border-radius;
+
+    @include v-valo-nativeselect-select-style;
+  }
+
+  button {
+    font: inherit;
+    font-weight: 400;
+    line-height: inherit;
+  }
+
+  .v-disabled {
+    cursor: default !important;
+  }
+
+  @include v-valo-drag-element;
+
+  @include v-valo-tooltip;
+
+  @include v-valo-contextmenu;
+
+}
+
+
+
+
+@mixin v-valo-caption-style {
+  font-size: $v-caption-font-size;
+  font-weight: $v-caption-font-weight;
+  padding-bottom: .3em;
+  @if $v-border-radius > 0 {
+    padding-left: round($v-border-radius/4);
+  }
+}
+
+
+
+@mixin v-valo-error-indicator-style {
+  color: $v-error-indicator-color;
+  font-weight: 600;
+  width: ceil($v-unit-size/2);
+  text-align: center;
+
+  &:before {
+    @include v-valo-error-indicator-icon-style;
+  }
+}
+
+@mixin v-valo-error-indicator-icon-style {
+  content: "!";
+}
+
+
+
+// Make the BODY element scrollable instead of the .v-ui element. Scrolling the BODY works better on touch screens.
+// NOTE: breaks percentage sized overlay elements
+// @mixin v-valo-natural-page-scrolling
+// @usage
+// // Call without any parent selector somewhere in your theme
+// =v-valo-natural-page-scrolling;
+@mixin v-valo-natural-page-scrolling {
+  
+  html {
+    height: auto;
+  }
+  
+  .v-generated-body {
+    height: auto;
+    overflow: auto;
+  }
+  
+  .v-app,
+  .v-ui.v-scrollable {
+    width: auto !important;
+    height: auto !important;
+    overflow: visible !important;
+  }
+  
+  // Reposition loading indicator so that it doens't scroll with the page
+  .v-loading-indicator {
+    position: fixed !important;
+  }
+
+  .v-overlay-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  
+  // Reposition notifications so that they don't scroll with the page
+  .v-Notification {
+    position: fixed !important;
+  }
+  
+}
diff --git a/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss b/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss
new file mode 100644
index 0000000000..b20dc33300
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss
@@ -0,0 +1,116 @@
+// TODO make fallbacks for IE 8 & 9
+
+@-webkit-keyframes v-rotate-360 {
+   to {-webkit-transform: rotate(360deg);}
+}
+@-moz-keyframes v-rotate-360 {
+   to {-moz-transform: rotate(360deg);}
+}
+@-o-keyframes v-rotate-360 {
+   to {-o-transform: rotate(360deg);}
+}
+@keyframes v-rotate-360 {
+   to {transform: rotate(360deg);}
+}
+
+
+@mixin v-valo-spinner ($size: 24px, $thickness: 4px, $color: null, $speed: 500ms) {
+  $color: $color or v-valo-focus-color();
+  // Make size divisible by 2, so that the rotation won't jiggle
+  $size: $size + $size%2;
+  height: $size !important;
+  width: $size !important;
+  @include box-sizing(border-box);
+  border: $thickness solid transparentize($color, .8);
+  border-top-color: transparentize($color, .15);
+  border-radius: 100%;
+  @include animation(v-rotate-360 $speed infinite linear);
+  pointer-events: none;
+  @include transition(all ease-in-out 300ms);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@include keyframes(v-progress-start) {
+  0% { width: 0%; }
+  100% { width: 50%; }
+}
+
+@include keyframes(v-progress-delay) {
+  0% { width: 50%; }
+  100% { width: 90%; }
+}
+
+@include keyframes(v-progress-wait) {
+  0% { width: 90%; }
+  100% { width: 96%; }
+}
+
+@include keyframes(v-progress-wait-pulse) {
+  0% { opacity: 1; }
+  50% { opacity: .1; }
+  100% { opacity: 1; }
+}
+
+
+$v-loading-indicator-color: v-valo-focus-color() !default;
+$v-loading-indicator-bar-height: ceil($v-unit-size/7) !default;
+
+@mixin v-valo-loading-bar {
+  
+  .v-loading-indicator {
+    position: fixed !important;
+    z-index: 99999;
+    left: 0;
+    right: auto;
+    top: 0;
+    width: 50%;
+    opacity: 1;
+    height: $v-loading-indicator-bar-height;
+    background-color: $v-loading-indicator-color;
+    //@include linear-gradient(to right, rgba($v-loading-indicator-color,0) 0%, $v-loading-indicator-color 100%);
+    pointer-events: none;
+    
+    @include transition(none);
+    @include animation(v-progress-start 1000ms 200ms both);
+    //@include animation-fill-mode(forwards);
+    
+    &[style*="none"] {
+      // Chrome skips the transitions because it thinks the element is display: none;
+      display: block !important;
+      width: 100% !important;
+      opacity: 0;
+      @include animation(none);
+      @include transition(opacity 500ms 300ms, width 300ms);
+    }
+  }
+  
+  .v-loading-indicator-delay {
+    width: 90%;
+    .v-ff & {
+      width: 50%;
+    }
+    @include animation(v-progress-delay 3.8s forwards);
+  }
+  
+  .v-loading-indicator-wait {
+    width: 96%;
+    .v-ff & {
+      width: 90%;
+    }
+    @include animation(v-progress-wait 5s forwards, v-progress-wait-pulse 1s 4s infinite backwards);
+  }
+  
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/valo/shared/_notification.scss b/WebContent/VAADIN/themes/valo/shared/_notification.scss
new file mode 100644
index 0000000000..c546a16225
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/shared/_notification.scss
@@ -0,0 +1,297 @@
+@mixin v-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 v-valo-anim-slide-down(600ms);
+    }
+
+    .v-Notification[style*="bottom: 0"] {
+      @include v-valo-anim-slide-up(600ms);
+    }
+
+    .v-Notification[style*="right: 0"] {
+      @include v-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) {
+      @include v-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 v-valo-notification-style;
+
+    @if $v-animations-enabled {
+      @include v-valo-anim-fade-in;
+    }
+
+  }
+
+
+  // System notification
+
+  .v-Notification-system {
+    left: 0 !important;
+    right: 0;
+    max-width: 100%;
+    margin: 0 !important;
+    border-radius: 0;
+    
+    @include v-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 v-valo-notification-tray-style;
+  }
+  
+  .v-Notification.warning {
+    @include v-valo-notification-warning-style;
+  }
+  
+  .v-Notification.error {
+    @include v-valo-notification-error-style;
+  }
+
+  .v-Notification.closable {
+    @include v-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 v-valo-notification-closable-style {
+  padding-right: $v-unit-size + round($v-unit-size/1.7);
+  overflow: hidden !important; // Override GWT PopupPanel
+  cursor: pointer;
+
+  //&:before {
+  //  content: "";
+  //  position: absolute;
+  //  top: 0;
+  //  right: 0;
+  //  bottom: 0;
+  //  width: $v-unit-size;
+  //  cursor: pointer;
+  //  background: #000;
+  //  @include opacity(.15);
+  //}
+
+  &: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: $v-border-width 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 v-valo-notification-style {
+  background: v-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, true);
+  }
+  
+  h1 {
+    color: v-valo-focus-color();
+    font-size: round($v-font-size * 1.2);
+    line-height: 1;
+  }
+  p {
+    line-height: 1.4;
+  }
+}
+
+@mixin v-valo-notification-system-style {
+  background-color: #444;
+  font-weight: $v-font-weight + 100;
+  line-height: round($v-font-size * 1.4);
+  box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.25);
+
+  h1 {
+    color: #fff;
+    vertical-align: middle;
+  }
+
+  p {
+    color: #e6e6e6;
+    max-width: 50em;
+  }
+
+  // No need to underline the "click here" text, let's imply that the whole banner is clickable
+  u {
+    text-decoration: none;
+  }
+}
+
+
+@mixin v-valo-notification-tray-style {}
+
+@mixin v-valo-notification-warning-style {
+  background: #FFF3D2;
+
+  h1 {
+    color: #AC7C00;
+  }
+
+  p {
+    color: #9D874D;
+  }
+}
+
+@mixin v-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: v-valo-font-color($v-error-indicator-color, 1);
+  }
+
+  p {
+    color: v-valo-font-color($v-error-indicator-color, .8);
+  }
+}
diff --git a/WebContent/VAADIN/themes/valo/shared/_overlay.scss b/WebContent/VAADIN/themes/valo/shared/_overlay.scss
new file mode 100644
index 0000000000..87adb4dffd
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/shared/_overlay.scss
@@ -0,0 +1,214 @@
+$v-overlay-border-radius: $v-border-radius !default;
+$v-overlay-border-width: $v-border-width !default;
+$v-overlay-open-animation: v-valo-overlay-open 200ms !default;
+
+$v-overlay-padding: round($v-unit-size/9) !default;
+$v-overlay-padding-vertical: $v-overlay-padding !default;
+$v-overlay-padding-horizontal: $v-overlay-padding !default;
+
+$v-overlay-shadow-style: 0 2px 4px 0 shade, 0 3px 5px 0 shade !default;
+
+$v-selection-overlay-padding: $v-overlay-padding !default;
+$v-selection-overlay-padding-vertical: $v-selection-overlay-padding !default;
+$v-selection-overlay-padding-horizontal: $v-selection-overlay-padding !default;
+
+$v-selection-item-border-radius: $v-border-radius - 1px !default;
+$v-selection-item-height: ceil($v-unit-size/1.4) !default;
+$v-selection-item-padding-horizontal: ceil($v-unit-size/4) !default;
+$v-selection-item-font-weight: max(400, $v-font-weight);
+
+
+@function v-valo-overlay-background-color ($context: $v-app-background-color) {
+  @if is-dark-color($context) {
+    @return darken($context, 2%);
+  }
+  @return lighten($context, 2%);
+}
+
+
+
+
+
+
+@mixin v-valo-ie8-shadow($shadow, $element: top) {
+  .#{$element} {
+    $shadow-offset-x: nth($shadow, 1);
+    $shadow-offset-y: nth($shadow, 2);
+    $shadow-blur: nth($shadow, 3);
+    $shadow-color: last($shadow);
+    $shadow-color-opacity: opacity($shadow-color);
+    $shadow-color: opacify($shadow-color, 1);
+
+    position: absolute;
+    top: $shadow-offset-y - $shadow-blur;
+    right: -$shadow-offset-x + $shadow-blur;
+    bottom: -$shadow-offset-y + $shadow-blur;
+    left: $shadow-offset-x - $shadow-blur;
+    background: $shadow-color;
+    filter: progid:DXImageTransform.Microsoft.blur(pixelradius=#{strip-units($shadow-blur)}, makeShadow=true, ShadowOpacity=#{$shadow-color-opacity});
+  }
+}
+
+
+
+
+
+// Not needed in modern browsers
+.v-shadow,
+.v-shadow-window {
+  display: none;
+
+  // In IE8 windows get the same shadow as other overlays
+  .v-ie8 & {
+    display: block;
+
+    // Border simulation
+    .center {
+      position: absolute;
+      top: -$v-overlay-border-width;
+      right: -$v-overlay-border-width;
+      bottom: -$v-overlay-border-width;
+      left: -$v-overlay-border-width;
+      background: darken(v-valo-overlay-background-color(), $v-bevel-depth);
+      filter: alpha(opacity=round($v-bevel-depth/1%));
+    }
+
+    // Up to 8 shadows are supported
+    $elements: top, top-left, top-right, left, right, bottom, bottom-left, bottom-right;
+    $shadows: v-valo-shadow($shadow-style: $v-overlay-shadow-style);
+
+    @if type-of(last($shadows)) == color {
+      @include v-valo-ie8-shadow($shadows);
+    } @else {
+      @for $i from 1 through min(length($elements), length($shadows)) {
+        $shadow: nth($shadows, $i);
+        @if length($shadow) == 2 {
+          $shadow: last($shadow); // Workaround for a weird issue when sometimes a shadow is appended to a null list
+        }
+        @if length($shadow) > 3 {
+          @include v-valo-ie8-shadow($shadow: $shadow, $element: nth($elements, $i));
+        }
+      }
+    }
+  }
+}
+
+
+
+
+
+
+@function v-valo-overlay-box-shadow ($bg: null) {
+  $bg: $bg or v-valo-overlay-background-color();
+  @return v-valo-shadow($shadow-style: (0 0 0 $v-overlay-border-width rgba(darken($bg, $v-bevel-depth), $v-bevel-depth/100%), $v-overlay-shadow-style));
+}
+
+
+
+@mixin v-valo-overlay-style ($background-color: null, $open-animation: $v-overlay-open-animation) {
+  padding: $v-overlay-padding-vertical $v-overlay-padding-horizontal;
+  border-radius: $v-overlay-border-radius;
+  
+  $bg: $background-color or v-valo-overlay-background-color();
+  background: $bg;
+  color: v-valo-font-color($bg);
+
+  box-shadow:  v-valo-overlay-box-shadow($bg);
+
+  @if $v-animations-enabled and $v-overlay-open-animation {
+    @include animation($open-animation);
+  }
+    
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+
+
+@if $v-animations-enabled {
+  @include keyframes(v-valo-overlay-open) {
+    0% {
+      @include transform(translatey(-3px));
+      opacity: 0;
+    }
+  }
+}
+
+
+
+
+
+
+@mixin v-valo-selection-overlay-style ($background-color: null, $open-animation: $v-overlay-open-animation) {
+  @include v-valo-overlay-style($background-color: $background-color, $open-animation: $open-animation);
+  padding: $v-selection-overlay-padding-vertical $v-selection-overlay-padding-horizontal;
+}
+
+
+
+
+@mixin v-valo-selection-item-style {
+  cursor: pointer;
+  line-height: $v-selection-item-height;
+  padding: 0 $v-selection-item-padding-horizontal*2 0 $v-selection-item-padding-horizontal;
+  @if $v-selection-item-border-radius > 0 {
+    border-radius: $v-selection-item-border-radius;
+  }
+  font-weight: $v-selection-item-font-weight;
+  white-space: nowrap;
+
+  position: relative;
+  &:active:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: scale-color(v-valo-selection-color(), $lightness: -30%, $saturation: 50%);
+    @include opacity(.15);
+    pointer-events: none;
+    border-radius: inherit;
+  }
+
+  .v-icon {
+    max-height: $v-selection-item-height;
+    margin-right: round($v-selection-item-padding-horizontal/2);
+    min-width: 1em;
+  }
+}
+
+
+
+
+@mixin v-valo-selection-item-selected-style ($parent-background-color: null) {
+  $selection-color: v-valo-selection-color($parent-background-color);
+  @include v-valo-gradient($selection-color);
+  color: v-valo-font-color($selection-color, 0.9);
+}
+
+
+
+
+
+
+
+
+@mixin v-valo-drag-element {
+  .v-drag-element {
+    @include v-valo-drag-element-style;
+  }
+}
+
+@mixin v-valo-drag-element-style {
+  background: #fff;
+  box-shadow: 0 2px 10px rgba(#000, .2);
+  border-radius: $v-border-radius;
+  overflow: hidden;
+  @include opacity(.5);
+
+  // This has the unfortunate side-effect of selecting an the table row where the drag is dropped
+  //pointer-events: none;
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/valo/shared/_tooltip.scss b/WebContent/VAADIN/themes/valo/shared/_tooltip.scss
new file mode 100644
index 0000000000..9074fc69a7
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/shared/_tooltip.scss
@@ -0,0 +1,67 @@
+// @category Tooltip
+
+$v-tooltip-background-color: rgba(if(is-dark-color($v-app-background-color), scale-color($v-app-background-color, $lightness: 80%), scale-color($v-app-background-color, $lightness: -80%)), .75) !default;
+$v-tooltip-font-color: v-valo-font-color(opacify($v-tooltip-background-color, 1), 1) !default;
+$v-tooltip-font-size: max(12px, round($v-font-size * 0.86)) !default;
+$v-tooltip-box-shadow: 0 2px 12px rgba(#000, .2) !default;
+$v-tooltip-padding-vertical: round($v-unit-size/8) !default;
+$v-tooltip-padding-horizontal: round($v-unit-size/4) !default;
+$v-tooltip-error-message-background-color: #fff !default;
+$v-tooltip-error-message-font-color: $v-error-indicator-color !default;
+$v-tooltip-border-radius: $v-border-radius - 1px !default;
+
+
+@mixin v-valo-tooltip {
+  .v-tooltip {
+    @include v-valo-tooltip-style;
+
+    div[style*="width"] {
+      width: auto !important;
+    }
+
+    .v-errormessage {
+      background-color: opacify($v-tooltip-error-message-background-color, 1);
+      background-color: $v-tooltip-error-message-background-color;
+      color: $v-tooltip-error-message-font-color;
+      margin: -$v-tooltip-padding-vertical #{-$v-tooltip-padding-horizontal};
+      padding: $v-tooltip-padding-vertical $v-tooltip-padding-horizontal;
+      max-height: 10em;
+      overflow: auto;
+      font-weight: $v-font-weight + 100;
+    }
+
+    .v-tooltip-text {
+      max-height: 10em;
+      overflow: auto;
+      margin-top: $v-tooltip-padding-vertical * 2;
+    }
+
+    .v-errormessage[aria-hidden="true"] + .v-tooltip-text {
+      margin-top: 0;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4 {
+      color: inherit;
+    }
+  }
+}
+
+
+@mixin v-valo-tooltip-style {
+  background-color: opacify($v-tooltip-background-color, 1);  // For IE8
+  background-color: $v-tooltip-background-color;
+  box-shadow: $v-tooltip-box-shadow;
+  color: $v-tooltip-font-color;
+  padding: $v-tooltip-padding-vertical $v-tooltip-padding-horizontal;
+  border-radius: $v-tooltip-border-radius;
+  max-width: 35em;
+  overflow: hidden !important;
+  font-size: $v-tooltip-font-size;
+
+  @if $v-animations-enabled {
+    //@include v-valo-anim-fade-in;
+  }
+}
diff --git a/WebContent/VAADIN/themes/valo/shared/_variables.scss b/WebContent/VAADIN/themes/valo/shared/_variables.scss
new file mode 100644
index 0000000000..a0aabd9590
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/shared/_variables.scss
@@ -0,0 +1,140 @@
+// @category  Common
+
+// Color functions are used to calculate default font color
+@import "../util/color";
+
+
+// List of components to include in the theme compilation. The list can be modified to make 
+// the compiled theme smaller by removing unused components from the list.
+// @variable v-included-components
+// @usage
+// // Remove the Calendar component styles from the output
+// $v-included-components: remove($v-included-components, calendar);
+$v-included-components: 
+    absolutelayout,
+    accordion,
+    button,
+    calendar,
+    checkbox,
+    colorpicker,
+    combobox,
+    csslayout,
+    customcomponent,
+    customlayout,
+    datefield,
+    dragwrapper,
+    form,
+    formlayout,
+    grid,
+    gridlayout,
+    label,
+    link,
+    loginform,
+    menubar,
+    nativebutton,
+    nativeselect,
+    optiongroup,
+    orderedlayout,
+    panel,
+    popupview,
+    progressindicator,
+    slider,
+    splitpanel,
+    table,
+    tabsheet,
+    textfield,
+    textarea,
+    richtextarea,
+    tree,
+    treetable,
+    twincolselect,
+    upload,
+    window !default;
+
+
+// Checks if a given component is included in the compilation. Used by the collection mixins that 
+// include all components, like v-valo-components and v-valo-components.
+// @mixin v-is-included
+// @param     $component-name {String} the name of the component to check
+// @param     $is-included {list} (Optional) the list of components which is checked
+// @return    {Boolean} true if the component is included in the compilation, false if not
+@function v-is-included ($component-name, $is-included: $v-included-components) {
+  @return contains($is-included, $component-name);
+}
+
+
+// A static text that is shown while the application JavaScript is loaded and started
+// @variable    v-app-loading-text
+// @default     ""
+$v-app-loading-text: "" !default;
+
+
+// Base line height used for all widgets
+// @variable     v-line-height
+// @default     1.55 !default
+$v-line-height: 1.55 !default;
+
+
+$v-app-background-color:        hsl(210, 0%, 98%)               !default;
+
+$v-font-size:                   16px                            !default; // Should be specified in pixels
+$v-font-weight:                 300                             !default; // Must be specified as a numeric value (i.e. not 'normal' or 'bold')
+$v-font-color:                  v-valo-font-color($v-app-background-color) !default;
+$v-font-family:                 "Open Sans", sans-serif         !default;
+
+$v-caption-font-size:           round($v-font-size * 0.9)       !default; // Should be a pixel value
+$v-caption-font-weight:         max(400, $v-font-weight)        !default;
+
+$v-unit-size:                   round(2.3 * $v-font-size)       !default; // Must be specified in pixels (suitable range 18-50)
+
+$v-layout-margin-top:           round($v-unit-size)             !default;
+$v-layout-margin-right:         round($v-unit-size)             !default;
+$v-layout-margin-bottom:        round($v-unit-size)             !default;
+$v-layout-margin-left:          round($v-unit-size)             !default;
+
+$v-layout-spacing-vertical:     round($v-unit-size/3)           !default;
+$v-layout-spacing-horizontal:   round($v-unit-size/3)           !default;
+
+$v-border-width:                1px                             !default; // Must be specified in pixels
+$v-border-radius:               4px                             !default; // Must be specified in pixels
+
+$v-gradient-style:              linear                          !default;
+$v-gradient-depth:              8%                              !default;
+
+$v-bevel-style:                 inset 0 1px 0 hilite, inset 0 -1px 0 shade !default;
+$v-bevel-depth:                 25%                             !default;
+
+$v-shadow-style:                0 2px 3px shade                 !default;
+$v-shadow-depth:                5%                              !default;
+
+$v-focus-style:                 0 0 0 2px focus-color           !default;
+$v-focus-color:                 null                            !default;
+
+$v-animations-enabled:          true                            !default;
+$v-hover-styles-enabled:        true                            !default;
+
+$v-disabled-opacity:            0.7                             !default;
+
+$v-selection-color:             null                            !default;
+
+$v-default-field-width:         $v-unit-size * 5                !default;
+
+$v-error-indicator-color:       #ed473b                         !default;
+$v-required-field-indicator-color: $v-error-indicator-color     !default;
+
+
+
+
+$v-valo-include-common-stylenames: true                         !default;
+
+
+
+
+// A flag to note whether relative URL paths are relative to the currently parsed SCSS file or to the compilation root file.
+// The Vaadin compiler parses URL paths differently than the regular Sass compiler (i.e. Vaadin modifies relative url paths).
+// This boolean is used to flag which compiler is used, so that paths are correct for different resources.
+// false == Ruby, true == Vaadin
+// @private
+// @variable  v-relative-paths
+// @default   false
+$v-relative-paths: false !default;
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/valo/shared/img/spinner.gif b/WebContent/VAADIN/themes/valo/shared/img/spinner.gif
new file mode 100644
index 0000000000..acf8f1c43a
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/shared/img/spinner.gif