Add two new size variants for Valo, tiny and huge

Available as additional style names for buttons, text fields/text
areas, combo boxes, date fields and labels.

Change-Id: I12f36935a690f5bf3f12333f5bd4ac986d4efd1f

7 files changed, 75 insertions, 3 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss
index ec74f70eaf..42953ea610 100644
--- a/WebContent/VAADIN/themes/valo/components/_button.scss
+++ b/WebContent/VAADIN/themes/valo/components/_button.scss
@@ -45,6 +45,10 @@
       @include valo-link-style;
     }
 
+    .#{$primary-stylename}-tiny {
+      @include valo-button-style($unit-size: $v-unit-size--tiny, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--tiny, $font-weight: null);
+    }
+
     .#{$primary-stylename}-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);
     }
@@ -53,6 +57,10 @@
       @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);
     }
 
+    .#{$primary-stylename}-huge {
+      @include valo-button-style($unit-size: $v-unit-size--huge, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--huge, $font-weight: null);
+    }
+
     .#{$primary-stylename}-icon-align-right {
       @include valo-button-icon-align-right-style;
     }
@@ -65,6 +73,10 @@
       width: $v-unit-size;
       padding: 0;
 
+      &.#{$primary-stylename}-tiny {
+        width: $v-unit-size--tiny;
+      }
+
       &.#{$primary-stylename}-small {
         width: $v-unit-size--small;
       }
@@ -73,6 +85,10 @@
         width: $v-unit-size--large;
       }
 
+      &.#{$primary-stylename}-huge {
+        width: $v-unit-size--huge;
+      }
+
       .#{$primary-stylename}-caption {
         display: none;
       }
diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss
index 4e5cd5bbac..538a5e2694 100644
--- a/WebContent/VAADIN/themes/valo/components/_combobox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss
@@ -78,6 +78,11 @@
       text-align: center;
     }
 
+    .#{$primary-stylename}-tiny {
+      @include valo-combobox-style($unit-size: $v-unit-size--tiny, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal);
+      font-size: $v-font-size--tiny;
+    }
+
     .#{$primary-stylename}-small {
       @include valo-combobox-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal);
       font-size: $v-font-size--small;
@@ -87,6 +92,11 @@
       @include valo-combobox-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal);
       font-size: $v-font-size--large;
     }
+
+    .#{$primary-stylename}-huge {
+      @include valo-combobox-style($unit-size: $v-unit-size--huge, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal);
+      font-size: $v-font-size--huge;
+    }
   }
 }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss
index 1538681740..8854992032 100644
--- a/WebContent/VAADIN/themes/valo/components/_datefield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss
@@ -59,6 +59,11 @@
       text-align: center;
     }
 
+    .#{$primary-stylename}-tiny {
+      @include valo-datefield-style($unit-size: $v-unit-size--tiny, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal);
+      font-size: $v-font-size--tiny;
+    }
+
     .#{$primary-stylename}-small {
       @include valo-datefield-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal);
       font-size: $v-font-size--small;
@@ -68,6 +73,11 @@
       @include valo-datefield-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal);
       font-size: $v-font-size--large;
     }
+
+    .#{$primary-stylename}-huge {
+      @include valo-datefield-style($unit-size: $v-unit-size--huge, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal);
+      font-size: $v-font-size--huge;
+    }
   }
 
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss
index 29d811fc9a..51e7026834 100644
--- a/WebContent/VAADIN/themes/valo/components/_label.scss
+++ b/WebContent/VAADIN/themes/valo/components/_label.scss
@@ -112,6 +112,14 @@ $v-letter-spacing--h4:    0               !default;
       font-size: $v-font-size--small;
     }
 
+    .#{$primary-stylename}-tiny {
+      font-size: $v-font-size--tiny;
+    }
+
+    .#{$primary-stylename}-huge {
+      font-size: $v-font-size--huge;
+    }
+
     .#{$primary-stylename}-bold {
       font-weight: $v-font-weight + 200;
     }
diff --git a/WebContent/VAADIN/themes/valo/components/_textarea.scss b/WebContent/VAADIN/themes/valo/components/_textarea.scss
index 4c5d99b8e2..5e524bfb9e 100644
--- a/WebContent/VAADIN/themes/valo/components/_textarea.scss
+++ b/WebContent/VAADIN/themes/valo/components/_textarea.scss
@@ -19,6 +19,11 @@
       @include valo-textfield-borderless-style;
     }
 
+    .#{$primary-stylename}-tiny {
+      @include valo-textarea-style($unit-size: $v-unit-size--tiny, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null);
+      font-size: $v-font-size--tiny;
+    }
+
     .#{$primary-stylename}-small {
       @include valo-textarea-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null);
       font-size: $v-font-size--small;
@@ -29,6 +34,11 @@
       font-size: $v-font-size--large;
     }
 
+    .#{$primary-stylename}-huge {
+      @include valo-textarea-style($unit-size: $v-unit-size--huge, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null);
+      font-size: $v-font-size--huge;
+    }
+
     .#{$primary-stylename}-align-right {
       text-align: right;
     }
diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss
index 75cfc5ef85..dc516048e7 100644
--- a/WebContent/VAADIN/themes/valo/components/_textfield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss
@@ -30,6 +30,11 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
       @include valo-textfield-borderless-style;
     }
 
+    .#{$primary-stylename}-tiny {
+      @include valo-textfield-style($unit-size: $v-unit-size--tiny, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
+      font-size: $v-font-size--tiny;
+    }
+
     .#{$primary-stylename}-small {
       @include valo-textfield-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
       font-size: $v-font-size--small;
@@ -40,9 +45,16 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
       font-size: $v-font-size--large;
     }
 
+    .#{$primary-stylename}-huge {
+      @include valo-textfield-style($unit-size: $v-unit-size--huge, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
+      font-size: $v-font-size--huge;
+    }
+
     @include valo-textfield-inline-icon($stylenames: inline-icon);
+    @include valo-textfield-inline-icon($stylenames: inline-icon tiny, $unit-size: $v-unit-size--tiny, $font-size: $v-font-size--tiny);
     @include valo-textfield-inline-icon($stylenames: inline-icon small, $unit-size: $v-unit-size--small, $font-size: $v-font-size--small);
     @include valo-textfield-inline-icon($stylenames: inline-icon large, $unit-size: $v-unit-size--large, $font-size: $v-font-size--large);
+    @include valo-textfield-inline-icon($stylenames: inline-icon huge, $unit-size: $v-unit-size--huge, $font-size: $v-font-size--huge);
 
     .#{$primary-stylename}-align-right {
       text-align: right;
diff --git a/WebContent/VAADIN/themes/valo/shared/_variables.scss b/WebContent/VAADIN/themes/valo/shared/_variables.scss
index b1c113b2cc..7dd3827298 100644
--- a/WebContent/VAADIN/themes/valo/shared/_variables.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_variables.scss
@@ -60,14 +60,20 @@ $v-required-field-indicator-color : $v-error-indicator-color
 $v-friendly-color                 : #2c9720                                     !default;
 
 
-$v-scaling-factor--small          : 0.8                                         !default;
+$v-scaling-factor--tiny           : 0.75                                        !default;
+$v-scaling-factor--small          : 0.85                                        !default;
 $v-scaling-factor--large          : 1.2                                         !default;
+$v-scaling-factor--huge           : 1.6                                         !default;
 
+$v-unit-size--tiny                : round($v-unit-size * $v-scaling-factor--tiny)  !default;
 $v-unit-size--small               : round($v-unit-size * $v-scaling-factor--small) !default;
 $v-unit-size--large               : round($v-unit-size * $v-scaling-factor--large) !default;
+$v-unit-size--huge                : round($v-unit-size * $v-scaling-factor--huge)  !default;
 
-$v-font-size--small               : round($v-font-size * $v-scaling-factor--small) !default;
-$v-font-size--large               : round($v-font-size * $v-scaling-factor--large) !default;
+$v-font-size--tiny                : ceil($v-font-size * $v-scaling-factor--tiny)  !default;
+$v-font-size--small               : ceil($v-font-size * $v-scaling-factor--small) !default;
+$v-font-size--large               : ceil($v-font-size * $v-scaling-factor--large) !default;
+$v-font-size--huge                : ceil($v-font-size * $v-scaling-factor--huge)  !default;