From: Jouni Koivuviita <jouni@vaadin.com>
Date: Thu, 12 Jun 2014 12:53:06 +0000 (+0300)
Subject: Various fixes and tweaks to Valo
X-Git-Tag: 7.3.0.beta1~2^2^2~28
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=3c4aba8a796da518feda8dab8c04502ef492241b;p=vaadin-framework.git

Various fixes and tweaks to Valo

- Added a new “quiet” style button, and an “icon-align-top” style, and
added an additional parameter for the borderless button style

- PopupView now has a proper animation-in and animation-out, with a
spinner showing the loading state

- Small fix to slider minimum size

- Fixed TextField text centering for IE8 and IE9

- Fixed Tree expand/collapse arrow clicking in IE10

- Tweaked Window shadow and modality curtain style

Change-Id: I48dab61c648363b8eb0c03dc3b3cbbc1289b94ed
---

diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss
index cf65bac2ec..4e19650e6a 100644
--- a/WebContent/VAADIN/themes/valo/components/_button.scss
+++ b/WebContent/VAADIN/themes/valo/components/_button.scss
@@ -200,11 +200,45 @@
 
 
 
-@mixin valo-button-borderless-style {
+@mixin valo-button-borderless-style ($font-color: inherit) {
   border: none;
   box-shadow: none;
   background: transparent;
-  color: inherit;
+  color: $font-color;
+
+  &:hover {
+    &:after {
+      background: transparent;
+    }
+
+    @if type-of($font-color) == color {
+      color: lighten($font-color, 10%);
+    }
+  }
+
+  &:active {
+    &:after {
+      background: transparent;
+    }
+
+    @if type-of($font-color) == color {
+      color: inherit;
+    }
+  }
+}
+
+
+@mixin valo-button-quiet-style ($primary-stylename: v-button) {
+  visibility: hidden;
+
+  &:focus,
+  &:hover {
+    visibility: visible;
+  }
+
+  .#{$primary-stylename}-wrap {
+    visibility: visible;
+  }
 }
 
 
@@ -223,3 +257,23 @@
     }
   }
 }
+
+
+@mixin valo-button-icon-align-top-style ($primary-stylename: v-button) {
+  height: auto;
+  padding-top: ceil($v-unit-size/9);
+  padding-bottom: ceil($v-unit-size/9);
+
+  .#{$primary-stylename}-wrap {
+    display: inline-block;
+  }
+
+  .v-icon {
+    display: block;
+
+    + span:not(:empty) {
+      margin-top: ceil($v-unit-size/6);
+      margin-left: 0;
+    }
+  }
+}
diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss
index a8756a50e4..9fc1f7fe9d 100644
--- a/WebContent/VAADIN/themes/valo/components/_combobox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss
@@ -254,15 +254,12 @@
         @include animation($v-overlay-animate-in);
       }
     }
-    @if $v-overlay-animate-out {
-      &[class*="animate-out"] {
-        @include animation($v-overlay-animate-out);
-      }
-    }
+    // No animate-out since that will currently prevent the dropdown from
+    // closing when the user selects an item
   }
 
   .#{$primary-stylename}-suggestmenu {
-    @include valo-selection-overlay-style;
+    @include valo-selection-overlay-style($animate-in: false, $animate-out: false);
     box-sizing: border-box;
     position: relative;
     z-index: 1;
diff --git a/WebContent/VAADIN/themes/valo/components/_popupview.scss b/WebContent/VAADIN/themes/valo/components/_popupview.scss
index 1a44eb47d6..794a6997de 100644
--- a/WebContent/VAADIN/themes/valo/components/_popupview.scss
+++ b/WebContent/VAADIN/themes/valo/components/_popupview.scss
@@ -1,9 +1,24 @@
+@include keyframes(v-popupview-animate-in) {
+  0% {
+    @include transform(scale(0));
+  }
+}
+
 @mixin valo-popupview ($primary-stylename: v-popupview) {
+  .#{$primary-stylename} {
+    @include valo-link-style;
+  }
+  
   .#{$primary-stylename}-popup {
-    @include valo-overlay-style;
+    @include valo-overlay-style($animate-in: v-popupview-animate-in 120ms, $animate-out: (valo-placeholder-animate-out 120ms, valo-anim-fade-out 120ms));
 
     .popupContent {
       @include valo-panel-adjust-content-margins;
     }
   }
+
+  .#{$primary-stylename}-loading {
+    margin: $v-layout-spacing-vertical $v-layout-spacing-horizontal;
+    @include valo-spinner;
+  }
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_slider.scss b/WebContent/VAADIN/themes/valo/components/_slider.scss
index 096f80e909..856e6eb08c 100644
--- a/WebContent/VAADIN/themes/valo/components/_slider.scss
+++ b/WebContent/VAADIN/themes/valo/components/_slider.scss
@@ -50,7 +50,7 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);
       top: $_valo-slider-base-margin-vertical;
       bottom: $_valo-slider-base-margin-vertical;
       left: $_valo-slider-base-margin-horizontal;
-      width: $v-border-radius;
+      width: $v-border-radius * 2;
       border-radius: $v-border-radius;
       border-left: valo-border($color: $v-selection-color, $context: $v-app-background-color);
     }
@@ -70,6 +70,10 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);
     }
   }
 
+  .v-has-width > .#{$primary-stylename}-base {
+    min-width: 0;
+  }
+
   .#{$primary-stylename}-handle {
     margin-top: round(($v-unit-size - $v-slider-track-size)/-2);
     width: .1px; // Firefox needs a non-zero value
@@ -136,7 +140,7 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);
         left: $_valo-slider-base-margin-vertical;
         right: $_valo-slider-base-margin-vertical;
         width: auto;
-        height: $v-border-radius;
+        height: $v-border-radius * 2;
         border-left: none;
         border-bottom: valo-border($color: $v-selection-color, $context: $v-app-background-color);
       }
diff --git a/WebContent/VAADIN/themes/valo/components/_textarea.scss b/WebContent/VAADIN/themes/valo/components/_textarea.scss
index 5db4c709fc..3b610251d3 100644
--- a/WebContent/VAADIN/themes/valo/components/_textarea.scss
+++ b/WebContent/VAADIN/themes/valo/components/_textarea.scss
@@ -50,4 +50,11 @@
   //display: block; // Fixes extra white-space under the textarea element
   height: auto;
   resize: none;
+
+  .v-ie8 &,
+  .v-ie9 & {
+    line-height: inherit;
+    padding-top: round($unit-size/9);
+    padding-bottom: round($unit-size/9);
+  }
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss
index 4a63004b3c..3ed553b1fa 100644
--- a/WebContent/VAADIN/themes/valo/components/_textfield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss
@@ -42,6 +42,13 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
     height: $unit-size;
     border-radius: $border-radius;
 
+    .v-ie8 &,
+    .v-ie9 & {
+      line-height: $unit-size;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
     @if type-of($padding) == number or type-of($padding) == list {
       padding: $padding;
     } @else {
diff --git a/WebContent/VAADIN/themes/valo/components/_tree.scss b/WebContent/VAADIN/themes/valo/components/_tree.scss
index 4b9fe33c4a..01840139b3 100644
--- a/WebContent/VAADIN/themes/valo/components/_tree.scss
+++ b/WebContent/VAADIN/themes/valo/components/_tree.scss
@@ -45,6 +45,10 @@ $v-tree-expand-animation-enabled: false !default;
       width: 1.9em;
       height: $v-tree-row-height;
       cursor: pointer;
+      // IE 9/10 need some color so that this element can receive mouse events.
+      // 'red' just happens to be the shortest color name.
+      background: red;
+      opacity: 0;
 
       .v-ie8 & {
         content: "+";
@@ -53,6 +57,7 @@ $v-tree-expand-animation-enabled: false !default;
         vertical-align: top;
         @include valo-tree-collapsed-icon-style;
         text-align: center;
+        background: transparent;
       }
     }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_window.scss b/WebContent/VAADIN/themes/valo/components/_window.scss
index d8c10b7347..64ded990c2 100644
--- a/WebContent/VAADIN/themes/valo/components/_window.scss
+++ b/WebContent/VAADIN/themes/valo/components/_window.scss
@@ -1,8 +1,9 @@
 $v-window-background-color: $v-panel-background-color !default;
 $v-window-border-radius: $v-border-radius !default;
-$v-window-shadow: 0 4px 20px 6px (v-shade 2), $v-overlay-shadow !default;
+$v-window-shadow: 0 2px 10px (v-shade 2), 0 16px 80px -6px (v-shade 3), last($v-overlay-shadow) !default;
 $v-window-animate-in: valo-placeholder-animate-in 140ms, valo-anim-fade-in 140ms !default;
-$v-window-animate-out: valo-placeholder-animate-out 80ms, valo-anim-scale-down-fade-out 80ms !default;
+$v-window-animate-out: valo-placeholder-animate-out 100ms, valo-anim-scale-down-fade-out 100ms !default;
+$v-window-modality-curtain-background-color: #222 !default;
 
 
 @if $v-animations-enabled {
@@ -56,8 +57,14 @@ $v-window-animate-out: valo-placeholder-animate-out 80ms, valo-anim-scale-down-f
     right: 0;
     bottom: 0;
     left: 0;
-    background: $v-app-background-color;
-    @include opacity(.5);
+    @include radial-gradient(circle at 50% 50%, $v-window-modality-curtain-background-color, darken($v-window-modality-curtain-background-color, valo-gradient-opacity()), $fallback: $v-window-modality-curtain-background-color);
+    @include opacity(max(0.2, 0.8 - valo-gradient-opacity()/100%));
+    @include valo-anim-fade-in($duration: 400ms, $delay: 100ms);
+
+    .v-op12 & {
+      // Opera 12 has a shitbreak with the fade-in (flickers)
+      @include animation(none);
+    }
   }
 
   .#{$primary-stylename}-draggingCurtain {
diff --git a/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss b/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss
index 6e05cf33f5..feb1958eff 100644
--- a/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss
+++ b/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss
@@ -43,6 +43,14 @@
     @include valo-button-borderless-style;
   }
 
+  .v-button-borderless-colored {
+    @include valo-button-borderless-style($font-color: $v-selection-color);
+  }
+
+  .v-button-quiet {
+    @include valo-button-quiet-style;
+  }
+
   .v-button-link {
     @include valo-button-borderless-style;
     @include valo-link-style;
@@ -60,6 +68,10 @@
     @include valo-button-icon-align-right-style;
   }
 
+  .v-button-icon-align-top {
+    @include valo-button-icon-align-top-style;
+  }
+
   .v-button-icon-only {
     width: $v-unit-size;
     padding: 0;
diff --git a/WebContent/VAADIN/themes/valo/shared/_notification.scss b/WebContent/VAADIN/themes/valo/shared/_notification.scss
index 6174e9495d..aa850c9dcf 100644
--- a/WebContent/VAADIN/themes/valo/shared/_notification.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_notification.scss
@@ -82,6 +82,8 @@ $v-notification-title-color: $v-focus-color !default;
       vertical-align: middle;
       max-width: 30em;
       text-align: left;
+      max-height: 20em;
+      overflow: auto;
     }
 
     h1 ~ p {
diff --git a/WebContent/VAADIN/themes/valo/shared/_overlay.scss b/WebContent/VAADIN/themes/valo/shared/_overlay.scss
index d0ff42fcce..5d92f4c974 100644
--- a/WebContent/VAADIN/themes/valo/shared/_overlay.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_overlay.scss
@@ -17,7 +17,7 @@ $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: 0 2px 4px 0 v-shade, 0 3px 5px 0 v-shade, 0 0 0 $v-overlay-border-width (v-shade 2-color-luminance($v-background-color)/255) !default;
+$v-overlay-shadow: 0 2px 4px 0 v-shade, 0 3px 5px 0 v-shade, 0 0 0 $v-overlay-border-width (v-shade (2.5 - color-luminance($v-background-color)/255 + $v-bevel-depth/100%)) !default;
 
 $v-selection-overlay-background-color: $v-overlay-background-color !default;
 $v-selection-overlay-padding: $v-overlay-padding !default;
@@ -136,8 +136,8 @@ $v-selection-item-selection-color: $v-selection-color !default;
 
 
 
-@mixin valo-selection-overlay-style ($background-color: $v-selection-overlay-background-color, $animate-in: $v-overlay-animate-in) {
-  @include valo-overlay-style($background-color: $background-color, $animate-in: $animate-in);
+@mixin valo-selection-overlay-style ($background-color: $v-selection-overlay-background-color, $animate-in: $v-overlay-animate-in, $animate-out: $v-overlay-animate-out) {
+  @include valo-overlay-style($background-color: $background-color, $animate-in: $animate-in, $animate-out: $animate-out);
   padding: $v-selection-overlay-padding-vertical $v-selection-overlay-padding-horizontal;
 }
 
diff --git a/WebContent/VAADIN/themes/valo/util/_anim.scss b/WebContent/VAADIN/themes/valo/util/_anim.scss
index 9569e84157..430a6e4722 100644
--- a/WebContent/VAADIN/themes/valo/util/_anim.scss
+++ b/WebContent/VAADIN/themes/valo/util/_anim.scss
@@ -3,13 +3,13 @@
   // 'Placeholder' animation names to trigger VOverlay animation-in and animation-out
   @include keyframes(valo-placeholder-animate-in) {
     0% {
-      outline-color: transparent;
+      visibility: visible;
     }
   }
 
   @include keyframes(valo-placeholder-animate-out) {
     100% {
-      outline-color: transparent;
+      visibility: visible;
     }
   }
 
diff --git a/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss b/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss
index b93307a1b1..270be09b4f 100644
--- a/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss
+++ b/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss
@@ -161,7 +161,7 @@
       $ret: join($ret, $part);
     }
   }
-  
+
   @return $ret;
 }
 
@@ -176,8 +176,8 @@
       $adjust-type: first-string($part);
       $adjust-amount: first-number($part);
 
-      $tint: rgba(#fff, $v-shadow-opacity/100% * $adjust-amount);
-      $shade: rgba(#000, $v-shadow-opacity/100% * $adjust-amount);
+      $tint: rgba(#fff, min(1, $v-shadow-opacity/100% * $adjust-amount));
+      $shade: rgba(#000, min(1, $v-shadow-opacity/100% * $adjust-amount));
 
       $color: null;
       @if $adjust-type == v-tint {