1 files changed, 309 insertions, 123 deletions

diff --git a/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss b/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss
index dcfcaf1a4a..5ae20bac0d 100644
--- a/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss
+++ b/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss
@@ -1,156 +1,342 @@
 // Common styles for components
-// About 40KB of CSS output
+// About 50KB of CSS output
+
+@import "valo-menu";
 
 @mixin valo-common-stylenames {
 
-	$v-scaling-factor--small: 0.8 !default;
-	$v-scaling-factor--large: 1.2 !default;
-
-	$v-unit-size--small: ceil($v-unit-size * $v-scaling-factor--small);
-	$v-unit-size--large: ceil($v-unit-size * $v-scaling-factor--large);
+  $v-scaling-factor--small: 0.8 !default;
+  $v-scaling-factor--large: 1.2 !default;
+
+  $v-unit-size--small: ceil($v-unit-size * $v-scaling-factor--small);
+  $v-unit-size--large: ceil($v-unit-size * $v-scaling-factor--large);
+
+  $v-font-size--small: ceil($v-font-size * $v-scaling-factor--small);
+  $v-font-size--large: ceil($v-font-size * $v-scaling-factor--large);
+
+  $v-friendly-color: #2c9720;
+
+
+  .v-button-primary {
+    @include valo-button-style($background-color: $v-selection-color);
+    $padding-width: round($v-unit-size/2);
+    padding: 0 $padding-width;
+    font-weight: bold;
+    $min-width: round($v-unit-size * 2.2);
+		min-width: $min-width;
+
+    // IE8 + border-box + min-width == fail
+    .v-ie8 & {
+      min-width: $min-width - $padding-width*2;
+    }
+  }
+
+  .v-button-friendly {
+    @include valo-button-style($background-color: $v-friendly-color);
+  }
+
+  .v-button-danger {
+    @include valo-button-style($background-color: $v-error-indicator-color);
+  }
+
+  .v-button-borderless {
+    @include valo-button-borderless-style;
+  }
+
+  .v-button-link {
+    @include valo-button-borderless-style;
+    @include valo-link-style;
+  }
+
+  .v-button-small {
+    @include valo-button-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--small, $font-weight: null);
+  }
+
+  .v-button-large {
+    @include valo-button-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--large, $font-weight: null);
+  }
+
+  .v-button-icon-align-right {
+    @include valo-button-icon-align-right-style;
+  }
+
+  .v-button-icon-only {
+    width: $v-unit-size;
+    padding: 0;
+
+    &.v-button-small {
+      width: $v-unit-size--small;
+    }
+  }
+
+  .v-link-small {
+    font-size: $v-font-size--small;
+  }
 
-	$v-font-size--small: ceil($v-font-size * $v-scaling-factor--small);
-	$v-font-size--large: ceil($v-font-size * $v-scaling-factor--large);
+  .v-link-large {
+    font-size: $v-font-size--large;
+  }
 
+  .v-tabsheet-centered-tabs {
+    @include valo-tabsheet-centered-tabs;
+  }
 
-	.v-button-primary {
-	  @include valo-button-style($background-color: valo-selection-color());
-	  padding: 0 round($v-unit-size/1.4);
-	  font-weight: bold;
-	}
+  .v-tabsheet-equal-width-tabs {
+    @include valo-tabsheet-equal-width-tabs($flex: false);
+  }
 
-	.v-button-friendly {
-	  @include valo-button-style($background-color: #2c9720);
-	}
+  .v-tabsheet-padded-tabbar {
+    @include valo-tabsheet-padded-tabbar;
+  }
 
-	.v-button-danger {
-	  @include valo-button-style($background-color: $v-error-indicator-color);
-	}
+  .v-tabsheet-icons-on-top {
+    @include valo-tabsheet-icons-on-top;
+  }
 
-	.v-button-borderless {
-	  @include valo-button-borderless-style;
-	}
+  .v-panel-borderless {
+    @include valo-panel-borderless-style;
+  }
 
-	.v-button-link {
-	  @include valo-button-borderless-style;
-	  @include valo-link-style;
-	}
+  .v-formlayout.light {
+    @include valo-formlayout-light-style;
+  }
+
+  .v-textfield-borderless,
+  .v-textarea-borderless {
+    @include valo-textfield-borderless-style;
+  }
 
-	.v-button-small {
-	  @include valo-button-style($unit-size: $v-unit-size--small);
-	  font-size: $v-font-size--small;
-	}
+  .v-textfield-small {
+    @include valo-textfield-style($unit-size: $v-unit-size--small);
+    font-size: $v-font-size--small;
+  }
 
-	.v-button-large {
-	  @include valo-button-style($unit-size: $v-unit-size--large);
-	  font-size: $v-font-size--large;
-	}
-
-	.v-button-icon-align-right {
-		@include valo-button-icon-align-right-style;
-	}
+  .v-textfield-large {
+    @include valo-textfield-style($unit-size: $v-unit-size--large);
+    font-size: $v-font-size--large;
+  }
 
-	.v-tabsheet-centered-tabs {
-	  @include valo-tabsheet-centered-tabs;
-	}
+  @include valo-textfield-inline-icon($stylename: inline-icon);
 
-	.v-tabsheet-equal-width-tabs {
-	  @include valo-tabsheet-equal-width-tabs($flex: false);
-	}
+  .v-textarea-small {
+    @include valo-textarea-style($unit-size: $v-unit-size--small);
+    font-size: $v-font-size--small;
+  }
 
-	.v-tabsheet-icons-on-top {
-	  @include valo-tabsheet-icons-on-top;
-	}
+  .v-textarea-large {
+    @include valo-textarea-style($unit-size: $v-unit-size--large);
+    font-size: $v-font-size--large;
+  }
 
-	.v-panel-borderless {
-	  @include valo-panel-borderless-style;
-	}
+  .v-textfield-align-right,
+  .v-textarea-align-right {
+    text-align: right;
+  }
 
-	.v-formlayout.light {
-	  @include valo-formlayout-light-style;
-	}
+  .v-textfield-align-center,
+  .v-textarea-align-center {
+    text-align: center;
+  }
 
-	.v-textfield-borderless,
-	.v-textarea-borderless {
-	  @include valo-textfield-borderless-style;
-	}
+  .v-filterselect-small {
+    @include valo-combobox-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null);
+    font-size: $v-font-size--small;
+  }
 
-	.v-textfield-small {
-	  @include valo-textfield-style($unit-size: $v-unit-size--small);
-	  font-size: $v-font-size--small;
-	}
+  .v-filterselect-large {
+    @include valo-combobox-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null);
+    font-size: $v-font-size--large;
+  }
 
-	.v-textfield-large {
-	  @include valo-textfield-style($unit-size: $v-unit-size--large);
-	  font-size: $v-font-size--large;
-	}
+  .v-datefield-small {
+    @include valo-datefield-style($unit-size: $v-unit-size--small);
+    font-size: $v-font-size--small;
+  }
 
-	@include valo-textfield-inline-icon($stylename: inline-icon);
+  .v-datefield-large {
+    @include valo-datefield-style($unit-size: $v-unit-size--large);
+    font-size: $v-font-size--large;
+  }
 
-	.v-textarea-small {
-	  @include valo-textarea-style($unit-size: $v-unit-size--small);
-	  font-size: $v-font-size--small;
-	}
+  .v-checkbox-small {
+    @include valo-checkbox-style($size: $v-unit-size--small);
+    font-size: $v-font-size--small;
+  }
 
-	.v-textarea-large {
-	  @include valo-textarea-style($unit-size: $v-unit-size--large);
-	  font-size: $v-font-size--large;
-	}
+  .v-checkbox-large {
+    @include valo-checkbox-style($size: $v-unit-size--large);
+    font-size: $v-font-size--large;
+  }
 
-	.v-filterselect-small {
-	  @include valo-combobox-style($unit-size: $v-unit-size--small);
-	  font-size: $v-font-size--small;
-	}
+  .v-label-spinner {
+    @include valo-spinner;
+  }
 
-	.v-filterselect-large {
-	  @include valo-combobox-style($unit-size: $v-unit-size--large);
-	  font-size: $v-font-size--large;
-	}
-
-	.v-datefield-small {
-	  @include valo-datefield-style($unit-size: $v-unit-size--small);
-	}
-
-	.v-datefield-large {
-	  @include valo-datefield-style($unit-size: $v-unit-size--large);
-	}
-
-	.v-checkbox-small {
-	  @include valo-checkbox-style($unit-size: $v-unit-size--small);
-	}
-
-	.v-checkbox-large {
-	  @include valo-checkbox-style($unit-size: $v-unit-size--large);
-	}
-
-	.v-label-spinner {
-	  @include valo-spinner;
-	}
-
-	.v-panel-well {
-	  @include valo-panel-well-style;
-	}
-
-	.v-panel-borderless {
-	  @include valo-panel-borderless-style;
-	}
-
-	.v-csslayout-well {
-	  @include valo-panel-well-style;
-	  @include valo-panel-adjust-content-margins;
-	}
+  .v-panel-well {
+    @include valo-panel-well-style;
+  }
 
-	.v-csslayout-card {
-	  @include valo-panel-style;
-	  @include valo-panel-adjust-content-margins;
-	}
+  .v-panel-borderless {
+    @include valo-panel-borderless-style;
+  }
 
-	@include valo-splitpanel-small($stylename: small);
-
-	@include valo-component-group;
+  .v-panel-scroll-divider {
+    @include valo-panel-scroll-divider-style;
+  }
 
-	.wrapping {
+  .v-csslayout-well {
+    @include valo-panel-well-style;
+    @include valo-panel-adjust-content-margins;
+  }
+
+  .v-csslayout-card {
+    @include valo-panel-style;
+    @include valo-panel-adjust-content-margins;
+  }
+
+  .v-splitpanel-horizontal.large,
+  .v-splitpanel-vertical.large {
+    @include valo-splitpanel-style($splitter-size: round($v-unit-size/3), $splitter-handle-visible: true);
+  }
+
+  .v-menubar-small {
+    @include valo-menubar-small-style($unit-size: $v-unit-size--small);
+    font-size: $v-font-size--small;
+  }
+
+  .v-menubar-borderless {
+    @include valo-menubar-borderless-style;
+  }
+
+  @include valo-component-group;
+
+  .wrapping {
     @include valo-horizontallayout--wrapping;
   }
 
+  .v-Notification.success,
+  .v-Notification.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;
+    }
+  }
+
+  .v-Notification.failure {
+    border-color: $v-error-indicator-color;
+
+    h1 {
+      color: $v-error-indicator-color;
+
+      &:before {
+        content: "\f05e";
+      }
+    }
+  }
+
+  .v-label-success,
+  .v-label-failure {
+    background: #fff;
+    color: #555;
+    border: 2px solid $v-friendly-color;
+    border-radius: $v-border-radius;
+    padding: round($v-unit-size/5) round($v-unit-size/2) round($v-unit-size/5) round($v-unit-size);
+    font-weight: $v-font-weight + 100;
+    font-size: round($v-font-size * 0.95);
+
+    &:before {
+      font-family: FontAwesome;
+      content: "\f00c";
+      margin-right: .5em;
+      margin-left: round($v-unit-size/-2);
+      color: $v-friendly-color;
+    }
+  }
+
+  .v-label-failure {
+    border-color: $v-error-indicator-color;
+
+    &:before {
+      content: "\f05e";
+      color: $v-error-indicator-color;
+    }
+  }
+
+
+  .v-panel-caption.v-horizontallayout {
+    height: auto !important;
+    line-height: 0;
+
+    .v-slot {
+      vertical-align: middle;
+    }
+
+    .v-label {
+      line-height: $v-unit-size;
+    }
+  }
+
+
+  .v-select-optiongroup-horizontal {
+    @include valo-optiongroup-horizontal;
+  }
+
+
+  .v-table-no-stripes {
+    @include valo-table-no-stripes;
+  }
+
+  .v-table-no-vertical-lines {
+    @include valo-table-no-vertical-lines;
+  }
+
+  .v-table-no-horizontal-lines {
+    @include valo-table-no-horizontal-lines;
+  }
+
+  .v-table-no-header {
+    @include valo-table-no-header;
+  }
+
+  .v-table-borderless {
+    @include valo-table-borderless;
+  }
+
+  .v-table-compact,
+  .v-table-small {
+    @include valo-table-compact-style($row-height: round($v-table-row-height * $v-scaling-factor--small), $cell-padding-horizontal: round($v-table-cell-padding-horizontal / 2));
+  }
+
+  .v-table-small {
+    font-size: $v-font-size--small;
+  }
+
+
+  .v-accordion-borderless {
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+
+    > .v-accordion-item {
+      border-radius: 0;
+    }
+  }
+
+
+	@include valo-menu;
+
 }