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

1 files changed, 16 insertions, 0 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;
       }