diff options
author | Jouni Koivuviita <jouni@vaadin.com> | 2014-08-19 16:28:23 +0300 |
---|---|---|
committer | Artur Signell <artur@vaadin.com> | 2014-08-19 17:50:57 +0300 |
commit | 35201491f42555a4fba119ab515ab2dc34d14baa (patch) | |
tree | fd95082d2effa40c6c67107c687d8d88a1eb3358 /WebContent | |
parent | 8cd05fe96a877eefaf17dbb58c54141fab1255fa (diff) | |
download | vaadin-framework-35201491f42555a4fba119ab515ab2dc34d14baa.tar.gz vaadin-framework-35201491f42555a4fba119ab515ab2dc34d14baa.zip |
Common components inside Table cells render better (Valo)
Add a new size variant “compact” for Textfield, DateField and ComboBox.
Makes the field fit inside the default row height of the table, but
keeps the font size the same as for a normal field. Borderless fields
also now respect the font color of the container (e.g. a selected table
row).
Update test to include common components inside a table.
Change-Id: I88f4d917579c937536dc4c886dc2b7825db01818
Diffstat (limited to 'WebContent')
5 files changed, 64 insertions, 15 deletions
diff --git a/WebContent/VAADIN/themes/valo/components/_checkbox.scss b/WebContent/VAADIN/themes/valo/components/_checkbox.scss index e74781fc46..9fe360c6ed 100644 --- a/WebContent/VAADIN/themes/valo/components/_checkbox.scss +++ b/WebContent/VAADIN/themes/valo/components/_checkbox.scss @@ -44,6 +44,7 @@ label { @include valo-tappable; + display: inline-block; } } diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss index 538a5e2694..93cb5393ee 100644 --- a/WebContent/VAADIN/themes/valo/components/_combobox.scss +++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss @@ -67,6 +67,11 @@ } .#{$primary-stylename}-button { border: none; + color: inherit; + @include opacity(.5); + } + &.#{$primary-stylename}-prompt .#{$primary-stylename}-input { + @include valo-textfield-prompt-style(transparent); } } @@ -83,8 +88,12 @@ font-size: $v-font-size--tiny; } + .#{$primary-stylename}-compact, .#{$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); + } + + .#{$primary-stylename}-small { font-size: $v-font-size--small; } diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss index 8854992032..521d661a3d 100644 --- a/WebContent/VAADIN/themes/valo/components/_datefield.scss +++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss @@ -48,6 +48,8 @@ } .#{$primary-stylename}-button { border: none; + color: inherit; + @include opacity(.5); } } @@ -64,8 +66,12 @@ font-size: $v-font-size--tiny; } + .#{$primary-stylename}-compact, .#{$primary-stylename}-small { @include valo-datefield-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal); + } + + .#{$primary-stylename}-small { font-size: $v-font-size--small; } diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss index 2669ac44f6..adac1b90bd 100644 --- a/WebContent/VAADIN/themes/valo/components/_table.scss +++ b/WebContent/VAADIN/themes/valo/components/_table.scss @@ -3,7 +3,6 @@ $v-table-border-width: first-number($v-border) !default; $v-table-border-color: null !default; $v-table-border-radius: 0 !default; $v-table-cell-padding-horizontal: round($v-unit-size/3) !default; -//$v-table-cell-padding-horizontal-edge: round($v-unit-size/2.5) !default; $v-table-resizer-width: round($v-unit-size/4.5) !default; $v-table-sort-indicator-width: round($v-unit-size/2) !default; $v-table-header-font-size: round($v-font-size * 0.86) !default; @@ -178,14 +177,23 @@ $v-table-background-color: null !default; .#{$primary-stylename}-cell-wrapper { line-height: 1; - min-height: $v-table-row-height; - $vertical-padding: round(($v-table-row-height - $v-font-size)/2); - padding: $vertical-padding $v-table-cell-padding-horizontal; + padding: 0 $v-table-cell-padding-horizontal; @include box-sizing(border-box); margin-right: 0 !important; > .v-widget { - margin: round($vertical-padding / -2) round($v-table-cell-padding-horizontal / -2); + // Leave some breathing room around the table cell and the widget + margin: round($v-table-cell-padding-horizontal / 4) round($v-table-cell-padding-horizontal / -2); + + &.v-label, + &.v-checkbox, + &.v-select-optiongroup { + margin: 0; + } + &.v-progressbar { + margin-left: 0; + margin-right: 0; + } } } @@ -220,7 +228,9 @@ $v-table-background-color: null !default; @include valo-gradient($v-selection-color); background-origin: border-box; - color: valo-font-color($v-selection-color, 0.9); + $font-color: valo-font-color($v-selection-color, 0.9); + color: $font-color; + text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-color); + .v-selected { $gradient-end: first(last(valo-gradient-color-stops($v-selection-color))); @@ -501,7 +511,7 @@ $v-table-background-color: null !default; .#{$primary-stylename}-compact, .#{$primary-stylename}-small { - @include valo-table-spacing-style($row-height: round($v-table-row-height * $v-scaling-factor--small), $cell-padding-horizontal: round($v-table-cell-padding-horizontal / 2)); + @include valo-table-spacing-style($row-height: $v-unit-size--small, $cell-padding-horizontal: round($v-table-cell-padding-horizontal / 2)); } .#{$primary-stylename}-small { @@ -640,11 +650,21 @@ $v-table-background-color: null !default; } .#{$primary-stylename}-cell-wrapper { - padding: $vertical-padding $cell-padding-horizontal; - min-height: $row-height; + padding-left: $cell-padding-horizontal; + padding-right: $cell-padding-horizontal; > .v-widget { - margin: round($vertical-padding / -2) round($cell-padding-horizontal / -2); + margin: round($cell-padding-horizontal / 4) round($cell-padding-horizontal / -2); + + &.v-label, + &.v-checkbox, + &.v-select-optiongroup { + margin: 0; + } + &.v-progressbar { + margin-left: 0; + margin-right: 0; + } } } diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss index 0b4fa50fb2..85e2487bc1 100644 --- a/WebContent/VAADIN/themes/valo/components/_textfield.scss +++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss @@ -35,8 +35,12 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; font-size: $v-font-size--tiny; } + .#{$primary-stylename}-compact, .#{$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); + } + + .#{$primary-stylename}-small { font-size: $v-font-size--small; } @@ -52,6 +56,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; @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 compact, $unit-size: $v-unit-size--small); @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); @@ -158,7 +163,10 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; @mixin valo-textfield-prompt-style ($background-color: $v-textfield-background-color) { - @if type-of($background-color) == color { + @if $background-color == transparent { + color: inherit; + @include opacity(.5); + } @else if type-of($background-color) == color { $font-color: valo-font-color($background-color); $font-color: mix($background-color, $font-color); @if is-dark-color($background-color) and saturation($background-color) > 50% { @@ -205,15 +213,20 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; border-radius: 0; background: $background-color; @include box-shadow(none); - @if $background-color == transparent { - color: inherit; - } @else if type-of($background-color) == color { - color: valo-font-color($background-color); + + $font-color: inherit; + @if $background-color != transparent and type-of($background-color) == color { + $font-color: valo-font-color($background-color); } + color: $font-color; &:focus { @include box-shadow(none); } + + &[class*="prompt"] { + @include valo-textfield-prompt-style($background-color); + } } |