diff options
Diffstat (limited to 'WebContent/VAADIN')
9 files changed, 111 insertions, 55 deletions
diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss index edd03e7879..fa973f186b 100644 --- a/WebContent/VAADIN/themes/valo/components/_button.scss +++ b/WebContent/VAADIN/themes/valo/components/_button.scss @@ -94,7 +94,11 @@ @if contains($states, normal) { @if $unit-size { height: $unit-size; - padding: if(type-of($padding) == number, $padding, (0 round($unit-size/2.4) + round($border-radius/3))); + @if type-of($padding) == number or type-of($padding) == list { + padding: $padding; + } @else { + padding: 0 round($unit-size/2.4) + round($border-radius/3); + } } $_font-color: $font-color or valo-font-color($background-color, 0.9); @@ -217,13 +221,11 @@ } &:active { + @include opacity(.7); + &:after { background: transparent; } - - @if type-of($font-color) == color { - color: inherit; - } } } diff --git a/WebContent/VAADIN/themes/valo/components/_calendar.scss b/WebContent/VAADIN/themes/valo/components/_calendar.scss index 08114d8828..753291eea9 100644 --- a/WebContent/VAADIN/themes/valo/components/_calendar.scss +++ b/WebContent/VAADIN/themes/valo/components/_calendar.scss @@ -1,4 +1,4 @@ -$v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateblue !default; +$v-calendar-event-colors: #00ace0, #2d9f19, #d18100, #ce3812, #2d55cd !default; @mixin valo-calendar-global ($primary-stylename: v-calendar) { diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss index 63ddbe98df..e947fc3732 100644 --- a/WebContent/VAADIN/themes/valo/components/_combobox.scss +++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss @@ -12,6 +12,17 @@ } } + .#{$primary-stylename}-error { + .#{$primary-stylename}-input { + @include valo-textfield-error-style; + } + + .#{$primary-stylename}-button { + color: $v-error-indicator-color; + border-color: $v-error-indicator-color; + } + } + .#{$primary-stylename}-suggestpopup { @include valo-combobox-popup-style($primary-stylename: $primary-stylename); } @@ -196,10 +207,14 @@ bottom: $border-width; width: $unit-size; cursor: pointer; - border-left: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5); - .v-ie8 & { - background-color: $background-color; + @if type-of($background-color) == color { + border-left: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5); + color: mix($background-color, valo-font-color($background-color)); + + .v-ie8 & { + background-color: $background-color; + } } @if $v-border-radius > 0 { @@ -208,8 +223,8 @@ } &:before { - @include valo-combobox-button-icon-style($background-color); - color: mix($background-color, valo-font-color($background-color)); + @include valo-combobox-button-icon-style; + @if $v-animations-enabled { @include transition(color 140ms); } @@ -221,7 +236,7 @@ margin-top: -.47em; } - @if $v-hover-styles-enabled { + @if $v-hover-styles-enabled and type-of($background-color) == color { &:hover:before { color: valo-font-color($background-color); } @@ -235,16 +250,17 @@ bottom: 0; left: 0; border-radius: inherit; - @include valo-button-active-style($background-color); + @if type-of($background-color) == color { + @include valo-button-active-style($background-color); + } } } -@mixin valo-combobox-button-icon-style ($background-color) { +@mixin valo-combobox-button-icon-style { font-family: FontAwesome; content: "\f078"; - color: valo-font-color($background-color); } diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss index 58c0f94345..b1f3a78af6 100644 --- a/WebContent/VAADIN/themes/valo/components/_datefield.scss +++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss @@ -6,6 +6,17 @@ @include valo-datefield-style($primary-stylename: $primary-stylename); } + .#{$primary-stylename}-error { + .#{$primary-stylename}-textfield { + @include valo-textfield-error-style; + } + + .#{$primary-stylename}-button { + color: $v-error-indicator-color; + border-color: $v-error-indicator-color; + } + } + // Different widths for different resolutions .#{$primary-stylename}-full { width: round($v-font-size * 15); @@ -73,7 +84,7 @@ } .#{$primary-stylename}-button { - @include valo-datefield-button-style($unit-size: $unit-size, $bevel: $bevel, $background-color: $background-color, $border-radius: $border-radius); + @include valo-datefield-button-style($unit-size: $unit-size, $bevel: $bevel, $background-color: $background-color, $border-radius: $border-radius, $border: $border); } &.v-disabled { @@ -106,12 +117,15 @@ -@mixin valo-datefield-button-style ($unit-size: $v-unit-size, $bevel: $v-bevel, $background-color: $v-textfield-background-color, $border-radius: $v-border-radius) { - $border-width: first-number($v-textfield-border); +@mixin valo-datefield-button-style ($unit-size: $v-unit-size, $bevel: $v-bevel, $background-color: $v-textfield-background-color, $border-radius: $v-border-radius, $border: $v-textfield-border) { + $border-width: first-number($border) or first-number($v-textfield-border); @include valo-tappable; -webkit-appearance: none; background: transparent; - border: none; + @if $border { + // Only override border if we are actually setting some border + border: none; + } padding: 0; position: absolute; z-index: 10; @@ -123,27 +137,30 @@ text-align: center; cursor: pointer; font: inherit; - border-right: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5); outline: none; margin: 0; + @if type-of($background-color) == color { + border-right: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5); + color: mix($background-color, valo-font-color($background-color)); + + &:hover { + color: valo-font-color($background-color); + } + } + @if $border-radius > 0 { $br: max(0, $border-radius - $border-width); border-radius: $br 0 0 $br; } &:before { - @include valo-datefield-button-icon-style($background-color); - color: mix($background-color, valo-font-color($background-color)); + @include valo-datefield-button-icon-style; @if $v-animations-enabled { @include transition(color 140ms); } } - &:hover:before { - color: valo-font-color($background-color); - } - &:active:after { content: ""; position: absolute; @@ -151,7 +168,9 @@ right: 0; bottom: 0; left: 0; - @include valo-button-active-style($background-color); + @if type-of($background-color) == color { + @include valo-button-active-style($background-color); + } border-radius: inherit; } } @@ -159,10 +178,9 @@ -@mixin valo-datefield-button-icon-style ($background-color) { +@mixin valo-datefield-button-icon-style { font-family: FontAwesome; content: "\f073"; - color: valo-font-color($background-color); } diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss index c952a4bdda..a3af2348e1 100644 --- a/WebContent/VAADIN/themes/valo/components/_table.scss +++ b/WebContent/VAADIN/themes/valo/components/_table.scss @@ -29,10 +29,6 @@ $v-table-background-color: null !default; float: right; } - .#{$primary-stylename}-cell-wrapper { - overflow: hidden; - } - .#{$primary-stylename}-caption-container-align-center { text-align: center; } @@ -113,6 +109,15 @@ $v-table-background-color: null !default; .#{$primary-stylename}-footer td { border-left: $v-table-border-width solid $border-color; + // Hack to overcome fixed "magic number" in VScrollTable.FooterCell (assumes 1px border) + @if $v-table-border-width != 1px { + display: inline-block; + margin-left: ($v-table-border-width - 1px) * -1; + + &:first-child { + margin-left: 0; + } + } } .#{$primary-stylename}-footer-container, @@ -498,15 +503,13 @@ $v-table-background-color: null !default; @mixin valo-table-no-vertical-lines-style ($primary-stylename: v-table) { - .#{$primary-stylename}-cell-content, - [class*="row"].v-selected .#{$primary-stylename}-cell-content { + .#{$primary-stylename}-cell-content { border-left: none; padding-left: $v-table-border-width; } &.v-treetable { - .#{$primary-stylename}-cell-content, - [class*="row"].v-selected .#{$primary-stylename}-cell-content { + .#{$primary-stylename}-cell-content { padding-left: $v-table-cell-padding-horizontal + $v-table-border-width; } } @@ -514,8 +517,7 @@ $v-table-background-color: null !default; @mixin valo-table-no-horizontal-lines-style ($primary-stylename: v-table) { - .#{$primary-stylename}-cell-content, - [class*="row"].v-selected .#{$primary-stylename}-cell-content { + .#{$primary-stylename}-cell-content { border-top: none; border-bottom: none; } diff --git a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss index 32b06a06cc..3b7687bc8d 100644 --- a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss +++ b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss @@ -369,7 +369,8 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; .#{$primary-stylename}-tabitem-selected .v-caption { background: $v-panel-background-color; border-color: first-color(valo-border($strength: 0.5)); - border-bottom: first-number($v-border) solid transparent; + border-bottom: none; + padding-bottom: first-number($v-border); } .v-caption-closable { @@ -422,9 +423,9 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; -@mixin valo-tabsheet-centered-tabs-style ($primary-stylename: v-tabsheet) { +@mixin valo-tabsheet-align-tabs-style ($primary-stylename: v-tabsheet, $align: center) { > .#{$primary-stylename}-tabcontainer { - text-align: center; + text-align: $align; } } @@ -462,6 +463,10 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; line-height: 1.2; } + .#{$primary-stylename}-tabitem-selected .v-caption { + padding-bottom: round($v-unit-size/6) + first-number($v-border); + } + .v-icon { display: block; diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss index e6514f9ec6..63e924921a 100644 --- a/WebContent/VAADIN/themes/valo/components/_textfield.scss +++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss @@ -70,8 +70,11 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; @include valo-gradient($color: $background-color, $gradient: $gradient) } - color: valo-font-color($background-color); - box-shadow: valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient); + @if $background-color { + color: valo-font-color($background-color); + box-shadow: valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient); + } + @if $v-animations-enabled { @include transition(box-shadow 180ms, border 180ms); @@ -163,6 +166,11 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; border-radius: 0; background: $background-color; box-shadow: none; + @if $background-color == transparent { + color: inherit; + } @else if type-of($background-color) == color { + color: valo-font-color($background-color); + } &:focus { box-shadow: none; @@ -173,7 +181,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; @mixin valo-textfield-error-style { - border-color: $v-error-indicator-color; + border-color: $v-error-indicator-color !important; $bg: scale-color($v-error-indicator-color, $lightness: 98%); background: $bg; color: valo-font-color($bg); diff --git a/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss b/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss index 704b6c8469..4adaf9a2a9 100644 --- a/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss +++ b/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss @@ -106,7 +106,11 @@ } .v-tabsheet-centered-tabs { - @include valo-tabsheet-centered-tabs-style; + @include valo-tabsheet-align-tabs-style($align: center); + } + + .v-tabsheet-right-aligned-tabs { + @include valo-tabsheet-align-tabs-style($align: right); } .v-tabsheet-padded-tabbar { @@ -148,12 +152,12 @@ } .v-textfield-small { - @include valo-textfield-style($unit-size: $v-unit-size--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; } .v-textfield-large { - @include valo-textfield-style($unit-size: $v-unit-size--large); + @include valo-textfield-style($unit-size: $v-unit-size--large, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null); font-size: $v-font-size--large; } @@ -162,12 +166,12 @@ @include valo-textfield-inline-icon($stylenames: inline-icon large, $unit-size: $v-unit-size--large, $font-size: $v-font-size--large); .v-textarea-small { - @include valo-textarea-style($unit-size: $v-unit-size--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; } .v-textarea-large { - @include valo-textarea-style($unit-size: $v-unit-size--large); + @include valo-textarea-style($unit-size: $v-unit-size--large, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null); font-size: $v-font-size--large; } @@ -186,22 +190,22 @@ } .v-filterselect-small { - @include valo-combobox-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null); + @include valo-combobox-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null); font-size: $v-font-size--small; } .v-filterselect-large { - @include valo-combobox-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null); + @include valo-combobox-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null); font-size: $v-font-size--large; } .v-datefield-small { - @include valo-datefield-style($unit-size: $v-unit-size--small); + @include valo-datefield-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $border: null, $background-color: null); font-size: $v-font-size--small; } .v-datefield-large { - @include valo-datefield-style($unit-size: $v-unit-size--large); + @include valo-datefield-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $border: null, $background-color: null); font-size: $v-font-size--large; } diff --git a/WebContent/VAADIN/themes/valo/shared/_overlay.scss b/WebContent/VAADIN/themes/valo/shared/_overlay.scss index 53b7586ce4..0675b70f4e 100644 --- a/WebContent/VAADIN/themes/valo/shared/_overlay.scss +++ b/WebContent/VAADIN/themes/valo/shared/_overlay.scss @@ -162,7 +162,8 @@ $v-selection-item-selection-color: $v-selection-color !default; right: 0; bottom: 0; left: 0; - background: scale-color($v-selection-item-selection-color, $lightness: -30%, $saturation: 50%); + $sat: if(saturation($v-selection-item-selection-color) > 0, 50%, 0%); + background: scale-color($v-selection-item-selection-color, $lightness: -30%, $saturation: $sat); @include opacity(.15); pointer-events: none; border-radius: inherit; |