From e95965a10bb6070096ee239ba22cc0e038874bde Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Fri, 15 Aug 2014 12:32:34 +0300 Subject: 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 --- WebContent/VAADIN/themes/valo/components/_button.scss | 16 ++++++++++++++++ WebContent/VAADIN/themes/valo/components/_combobox.scss | 10 ++++++++++ WebContent/VAADIN/themes/valo/components/_datefield.scss | 10 ++++++++++ WebContent/VAADIN/themes/valo/components/_label.scss | 8 ++++++++ WebContent/VAADIN/themes/valo/components/_textarea.scss | 10 ++++++++++ WebContent/VAADIN/themes/valo/components/_textfield.scss | 12 ++++++++++++ WebContent/VAADIN/themes/valo/shared/_variables.scss | 12 +++++++++--- 7 files changed, 75 insertions(+), 3 deletions(-) (limited to 'WebContent') 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; -- cgit v1.2.3