diff options
Diffstat (limited to 'WebContent/VAADIN/themes')
25 files changed, 80 insertions, 77 deletions
diff --git a/WebContent/VAADIN/themes/valo/components/_accordion.scss b/WebContent/VAADIN/themes/valo/components/_accordion.scss index 46a3274f45..4a9c7a6bf4 100644 --- a/WebContent/VAADIN/themes/valo/components/_accordion.scss +++ b/WebContent/VAADIN/themes/valo/components/_accordion.scss @@ -5,7 +5,7 @@ $v-accordion-content-shadow-depth: $v-shadow-depth/2 !default; @mixin valo-accordion ($primary-stylename: v-accordion) { .#{$primary-stylename} { @include valo-panel-style; - @include valo-gradient($color: $v-app-background-color, $depth: $v-gradient-depth/2); + @include valo-gradient($color: $v-background-color, $depth: $v-gradient-depth/2); overflow: hidden; } diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss index b21e6f9a3e..c826517c16 100644 --- a/WebContent/VAADIN/themes/valo/components/_button.scss +++ b/WebContent/VAADIN/themes/valo/components/_button.scss @@ -113,8 +113,8 @@ $v-button-disabled-opacity: $v-disabled-opacity !default; @function valo-button-border-color ($bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, $background-color: $v-button-background-color) { - $background-color: $background-color or $v-app-background-color; - $border-color: if(color-luminance($background-color) < color-luminance($v-app-background-color), $background-color, $v-app-background-color); + $background-color: $background-color or $v-background-color; + $border-color: if(color-luminance($background-color) < color-luminance($v-background-color), $background-color, $v-background-color); $border-color: blend-darken($border-color, scale-color($border-color, $lightness: max(-50%, -$bevel-depth/2))); $border-color: scale-color($border-color, $saturation: -$bevel-depth/2); @if contains($bevel-style, v-shade, true) { @@ -133,7 +133,7 @@ $v-button-disabled-opacity: $v-disabled-opacity !default; $background-color: $v-button-background-color) { // Set up variable defaults - $background-color: $background-color or $v-app-background-color; + $background-color: $background-color or $v-background-color; $gradient-style: $gradient-style or $v-gradient-style; $gradient-depth: $gradient-depth or $v-gradient-depth; $bevel-style: $bevel-style or $v-bevel-style; @@ -173,7 +173,7 @@ $v-button-disabled-opacity: $v-disabled-opacity !default; } -@mixin valo-button-focus-style ($background-color: $v-app-background-color, $border-fallback: inherit) { +@mixin valo-button-focus-style ($background-color: $v-background-color, $border-fallback: inherit) { $focus-color: valo-focus-color(); @if color-luminance($focus-color) + 50 < color-luminance($background-color) { @@ -191,8 +191,8 @@ $v-button-disabled-opacity: $v-disabled-opacity !default; -@mixin valo-button-active-style ($background-color: $v-app-background-color) { - $bg: scale-color($background-color, $lightness: -50%, $saturation: saturation($v-app-background-color)); +@mixin valo-button-active-style ($background-color: $v-background-color) { + $bg: scale-color($background-color, $lightness: -50%, $saturation: saturation($v-background-color)); background-color: rgba($bg, .1); .v-ie8 & { @@ -203,7 +203,7 @@ $v-button-disabled-opacity: $v-disabled-opacity !default; -@mixin valo-button-hover-style ($background-color: $v-app-background-color) { +@mixin valo-button-hover-style ($background-color: $v-background-color) { $bg: lighten($background-color, 15%); background-color: rgba($bg, .1); border: inherit; diff --git a/WebContent/VAADIN/themes/valo/components/_calendar.scss b/WebContent/VAADIN/themes/valo/components/_calendar.scss index 29f1e24da8..0ba1326499 100644 --- a/WebContent/VAADIN/themes/valo/components/_calendar.scss +++ b/WebContent/VAADIN/themes/valo/components/_calendar.scss @@ -215,7 +215,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb text-align: right; margin: 0 round($v-unit-size/8); white-space: nowrap; - border-top: 1px solid darken($v-app-background-color, 3%); + border-top: 1px solid darken($v-background-color, 3%); cursor: pointer; &:hover { @@ -224,7 +224,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb } .#{$primary-stylename}-month-day-today { - background: blend-normal(rgba(valo-focus-color(), .05), $v-app-background-color); + background: blend-normal(rgba(valo-focus-color(), .05), $v-background-color); .#{$primary-stylename}-day-number { font-weight: $v-font-weight + 100; @@ -237,7 +237,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb } .#{$primary-stylename}-month-day-selected { - background-color: blend-normal(rgba(valo-selection-color(), .1), $v-app-background-color); + background-color: blend-normal(rgba(valo-selection-color(), .1), $v-background-color); } .#{$primary-stylename}-month-day-dragemphasis { @@ -264,7 +264,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb .#{$primary-stylename}-weekly-longevents { margin-left: $_times-column-width; // Seems to be a fixed number - border-bottom: round($v-unit-size/12) solid darken($v-app-background-color, 10%); + border-bottom: round($v-unit-size/12) solid darken($v-background-color, 10%); .#{$primary-stylename}-event-all-day { height: round($v-font-size * 0.85 * 1.6); @@ -311,7 +311,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb } } - $valo-calendar-time-divider-color: darken($v-app-background-color, 5%); + $valo-calendar-time-divider-color: darken($v-background-color, 5%); .#{$primary-stylename} .v-datecellslot, .#{$primary-stylename} .v-datecellslot-even { @@ -483,7 +483,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb .#{$primary-stylename}-week-wrapper .#{$primary-stylename}-event-content { margin-top: -1px; border-radius: $v-border-radius + 1px; - border: 1px solid $v-app-background-color; + border: 1px solid $v-background-color; padding-top: 3px; margin-right: round($v-unit-size/8); //margin-left: round($v-unit-size/8); @@ -499,7 +499,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb @for $i from 1 through length($v-calendar-event-colors) { $color: nth($v-calendar-event-colors, $i); - $bg: blend-normal(rgba($color, .2), $v-app-background-color); + $bg: blend-normal(rgba($color, .2), $v-background-color); // First color is considered the default color (and stylename 'color1' will equal to that) $stylename: if($i == 1, '', '[class*="color#{$i}"]'); diff --git a/WebContent/VAADIN/themes/valo/components/_checkbox.scss b/WebContent/VAADIN/themes/valo/components/_checkbox.scss index 7b93a0c5b4..7ffd501dc8 100644 --- a/WebContent/VAADIN/themes/valo/components/_checkbox.scss +++ b/WebContent/VAADIN/themes/valo/components/_checkbox.scss @@ -15,7 +15,7 @@ @mixin valo-checkbox-style ($background-color: $v-button-background-color, $unit-size: $v-unit-size) { - $background-color: $background-color or $v-app-background-color; + $background-color: $background-color or $v-background-color; position: relative; line-height: round($unit-size/2); diff --git a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss index 7a7b6f2445..b24fbb922c 100644 --- a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss +++ b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss @@ -153,8 +153,8 @@ .v-horizontallayout { height: auto !important; padding: round($v-unit-size/4) 0; - background-color: $v-app-background-color; - border-top: $v-border-width solid scale-color($v-app-background-color, $lightness: -5%); + background-color: $v-background-color; + border-top: $v-border-width solid scale-color($v-background-color, $lightness: -5%); .v-expand { overflow: visible; diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss index 8197a8695f..853dd8bfd2 100644 --- a/WebContent/VAADIN/themes/valo/components/_combobox.scss +++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss @@ -32,7 +32,7 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius, $background-color: $v-textfield-background-color, $primary-stylename: v-filterselect) { - $background-color: $background-color or valo-textfield-background-color($v-app-background-color); + $background-color: $background-color or valo-textfield-background-color($v-background-color); $bevel-style: $bevel-style or $v-bevel-style; $bevel-depth: $bevel-depth or $v-bevel-depth; $unit-size: $unit-size or $v-unit-size; @@ -213,7 +213,7 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; .v-filterselect-status { position: absolute; right: $v-border-radius; - $bg: $background-color or $v-app-background-color; + $bg: $background-color or $v-background-color; $bg: scale-color($bg, $lightness: -15%); background: transparentize($bg, .1); color: valo-font-color($bg); @@ -250,7 +250,7 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; font-family: FontAwesome; @include transform( scale(.8) ); - $bg: $background-color or $v-app-background-color; + $bg: $background-color or $v-background-color; color: valo-font-color($bg); &:hover { diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss index 2f283b7ff0..74324c1d9f 100644 --- a/WebContent/VAADIN/themes/valo/components/_datefield.scss +++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss @@ -47,7 +47,7 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius, $background-color: $v-textfield-background-color, $primary-stylename: v-datefield) { - $background-color: $background-color or valo-textfield-background-color($v-app-background-color); + $background-color: $background-color or valo-textfield-background-color($v-background-color); $bevel-style: $bevel-style or $v-bevel-style; $bevel-depth: $bevel-depth or $v-bevel-depth; $unit-size: $unit-size or $v-unit-size; @@ -166,9 +166,9 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; -@mixin valo-datefield-popup-style ($context: $v-app-background-color) { - $copy: $v-app-background-color; - $v-app-background-color: $context; +@mixin valo-datefield-popup-style ($context: $v-background-color) { + $copy: $v-background-color; + $v-background-color: $context; @include valo-overlay-style; @@ -189,7 +189,7 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; @include valo-datefield-calendarpanel-style; - $v-app-background-color: $copy; + $v-background-color: $copy; } @@ -234,7 +234,7 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; .#{$primary-stylename}-weekdays { height: round($v-unit-size * 0.7); - color: mix(valo-font-color($v-app-background-color), rgba($v-app-background-color, .7)); + color: mix(valo-font-color($v-background-color), rgba($v-background-color, .7)); strong { font: inherit; @@ -270,7 +270,7 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; right: 0; bottom: 0; left: 0; - color: mix($v-app-background-color, valo-font-color($v-app-background-color)); + color: mix($v-background-color, valo-font-color($v-background-color)); font-size: round($v-font-size * 1.3); line-height: round($v-font-size * 1.5); @@ -316,7 +316,7 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; .v-datefield-calendarpanel-weeknumber, .v-datefield-calendarpanel-weekdays.v-datefield-calendarpanel-weeknumbers td:first-child { width: round($v-unit-size * 0.7); - color: mix(valo-font-color($v-app-background-color), rgba($v-app-background-color, .7)); + color: mix(valo-font-color($v-background-color), rgba($v-background-color, .7)); font-size: ceil($v-font-size * 0.86); display: inline-block; text-align: left; @@ -344,7 +344,7 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; line-height: round($v-unit-size * 0.7); text-align: center; font-size: ceil($v-font-size * 0.86); - background: $v-app-background-color; + background: $v-background-color; @if $v-border-radius > 0 { border-radius: ceil($v-border-radius/2); } @@ -358,13 +358,13 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; } @mixin valo-datefield-calendarpanel-day-offmonth-style { - color: mix(valo-font-color($v-app-background-color), $v-app-background-color); + color: mix(valo-font-color($v-background-color), $v-background-color); background: transparent; } @mixin valo-datefield-calendarpanel-day-today-style { color: valo-selection-color(); - background: blend-overlay(valo-selection-color(), $v-app-background-color); + background: blend-overlay(valo-selection-color(), $v-background-color); font-weight: $v-font-weight + 100; } diff --git a/WebContent/VAADIN/themes/valo/components/_formlayout.scss b/WebContent/VAADIN/themes/valo/components/_formlayout.scss index 2253f4437a..06b42c6e86 100644 --- a/WebContent/VAADIN/themes/valo/components/_formlayout.scss +++ b/WebContent/VAADIN/themes/valo/components/_formlayout.scss @@ -88,7 +88,7 @@ } > table > tbody > .#{$primary-stylename}-row td { - border-bottom: $v-border-width solid darken($v-app-background-color, 5%); + border-bottom: $v-border-width solid darken($v-background-color, 5%); } > table > tbody > .#{$primary-stylename}-lastrow td { diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss index 6dda8f1297..bb5655e94e 100644 --- a/WebContent/VAADIN/themes/valo/components/_label.scss +++ b/WebContent/VAADIN/themes/valo/components/_label.scss @@ -29,7 +29,7 @@ $v-letter-spacing--h4: 0.05em !default; h3, .h3 { line-height: $v-line-height--header; font-weight: $v-font-weight--header; - color: valo-header-color($v-app-background-color); + color: valo-header-color($v-background-color); } h1, .h1 { @@ -60,7 +60,7 @@ $v-letter-spacing--h4: 0.05em !default; line-height: $v-line-height--header; font-weight: $v-font-weight + 200; font-size: $v-font-size--small; - color: valo-header-color($v-app-background-color, $contrast: 0.12); + color: valo-header-color($v-background-color, $contrast: 0.12); text-transform: uppercase; letter-spacing: $v-letter-spacing--h4; margin-top: 2.4em; diff --git a/WebContent/VAADIN/themes/valo/components/_menubar.scss b/WebContent/VAADIN/themes/valo/components/_menubar.scss index daac9f669d..a2612b4b49 100644 --- a/WebContent/VAADIN/themes/valo/components/_menubar.scss +++ b/WebContent/VAADIN/themes/valo/components/_menubar.scss @@ -122,10 +122,10 @@ -@mixin valo-menubar-popup-style ($primary-stylename: v-menubar, $context: $v-app-background-color) { +@mixin valo-menubar-popup-style ($primary-stylename: v-menubar, $context: $v-background-color) { - $copy: $v-app-background-color; - $v-app-background-color: $context; + $copy: $v-background-color; + $v-background-color: $context; @include valo-selection-overlay-style; @@ -180,7 +180,7 @@ @include opacity($v-disabled-opacity); } - $v-app-background-color: $copy; + $v-background-color: $copy; } @@ -197,10 +197,10 @@ } -@mixin valo-menubar-menuitem-checked-style ($background-color: scale-color($v-app-background-color, $lightness: -5%, $saturation: -5%)) { +@mixin valo-menubar-menuitem-checked-style ($background-color: scale-color($v-background-color, $lightness: -5%, $saturation: -5%)) { @include valo-gradient($color: $background-color, $depth: $v-gradient-depth/4, $direction: to top); - @if color-luminance($background-color) < color-luminance($v-app-background-color) { + @if color-luminance($background-color) < color-luminance($v-background-color) { $border-color: valo-button-border-color($background-color: $background-color); border-color: $border-color; diff --git a/WebContent/VAADIN/themes/valo/components/_nativeselect.scss b/WebContent/VAADIN/themes/valo/components/_nativeselect.scss index c94eaea711..769afb2e44 100644 --- a/WebContent/VAADIN/themes/valo/components/_nativeselect.scss +++ b/WebContent/VAADIN/themes/valo/components/_nativeselect.scss @@ -21,12 +21,12 @@ @mixin valo-nativeselect-select-style { - $_border-color: darken($v-app-background-color, $v-bevel-depth); - @if is-dark-color($v-app-background-color) { - $_border-color: lighten($v-app-background-color, $v-bevel-depth); + $_border-color: darken($v-background-color, $v-bevel-depth); + @if is-dark-color($v-background-color) { + $_border-color: lighten($v-background-color, $v-bevel-depth); } border: $v-border-width solid $_border-color; - background-color: valo-textfield-background-color($v-app-background-color); + background-color: valo-textfield-background-color($v-background-color); &:focus { outline: none; diff --git a/WebContent/VAADIN/themes/valo/components/_panel.scss b/WebContent/VAADIN/themes/valo/components/_panel.scss index b37bbd4ed6..8d70d81071 100644 --- a/WebContent/VAADIN/themes/valo/components/_panel.scss +++ b/WebContent/VAADIN/themes/valo/components/_panel.scss @@ -30,19 +30,19 @@ $v-panel-caption-bevel-depth: $v-bevel-depth !default; -@function valo-panel-background-color ($context: $v-app-background-color) { +@function valo-panel-background-color ($context: $v-background-color) { $bg-color: lighten($context, 5%); @return $bg-color; } @function valo-panel-caption-background-color ($background-color) { - @return $background-color or $v-app-background-color; + @return $background-color or $v-background-color; } -@function valo-panel-border-color ($background-color: $v-app-background-color) { - $border-color: if(color-luminance($background-color) < color-luminance($v-app-background-color), $background-color, $v-app-background-color); +@function valo-panel-border-color ($background-color: $v-background-color) { + $border-color: if(color-luminance($background-color) < color-luminance($v-background-color), $background-color, $v-background-color); $border-color: blend-darken($border-color, scale-color($border-color, $lightness: max(-30%, -$v-bevel-depth/2))); $border-color: scale-color($border-color, $saturation: -$v-bevel-depth/2); @return $border-color; @@ -74,7 +74,7 @@ $v-panel-caption-bevel-depth: $v-bevel-depth !default; @mixin valo-panel-well-style { - $_bg: scale-color(adjust-color($v-app-background-color, $lightness: -2%), $saturation: -1.5%); + $_bg: scale-color(adjust-color($v-background-color, $lightness: -2%), $saturation: -1.5%); background: $_bg; box-shadow: valo-shadow($shadow-style: (0 1px 0 0 v-hilite, join(inset, $v-panel-shadow-style))); border-radius: $v-border-radius; diff --git a/WebContent/VAADIN/themes/valo/components/_progressbar.scss b/WebContent/VAADIN/themes/valo/components/_progressbar.scss index a5b2d98e06..5d0e27a4f5 100644 --- a/WebContent/VAADIN/themes/valo/components/_progressbar.scss +++ b/WebContent/VAADIN/themes/valo/components/_progressbar.scss @@ -18,7 +18,7 @@ $v-progressbar-border-radius: $v-border-radius !default; border-radius: $v-progressbar-border-radius; height: round($v-unit-size/4); min-width: $v-unit-size * 2; - @include valo-gradient($color: scale-color($v-app-background-color, $lightness: min($v-bevel-depth/-2, -10%), $saturation: $v-bevel-depth/-2), $style: linear-reverse); + @include valo-gradient($color: scale-color($v-background-color, $lightness: min($v-bevel-depth/-2, -10%), $saturation: $v-bevel-depth/-2), $style: linear-reverse); box-shadow: valo-textfield-box-shadow(); @include box-sizing(border-box); } diff --git a/WebContent/VAADIN/themes/valo/components/_slider.scss b/WebContent/VAADIN/themes/valo/components/_slider.scss index de8af384de..d2e7b5387d 100644 --- a/WebContent/VAADIN/themes/valo/components/_slider.scss +++ b/WebContent/VAADIN/themes/valo/components/_slider.scss @@ -109,7 +109,7 @@ $v-slider-handle-border-radius: ceil($v-slider-handle-width/2) !default; height: $v-unit-size * 2; // Effectively min-height .#{$primary-stylename}-base { - @include valo-gradient($color: scale-color($v-app-background-color, $lightness: min($v-bevel-depth/-2, -5%), $saturation: $v-bevel-depth/-2), $style: linear-reverse, $direction: to right); + @include valo-gradient($color: scale-color($v-background-color, $lightness: min($v-bevel-depth/-2, -5%), $saturation: $v-bevel-depth/-2), $style: linear-reverse, $direction: to right); min-width: 0; width: $v-slider-track-size; height: 100% !important; diff --git a/WebContent/VAADIN/themes/valo/components/_splitpanel.scss b/WebContent/VAADIN/themes/valo/components/_splitpanel.scss index 54dcc6c4e2..67c2907897 100644 --- a/WebContent/VAADIN/themes/valo/components/_splitpanel.scss +++ b/WebContent/VAADIN/themes/valo/components/_splitpanel.scss @@ -41,7 +41,7 @@ $v-splitpanel-splitter-size: round($v-unit-size/5) !default; width: $v-unit-size; height: 0; border: 1px solid; - $color: $v-button-background-color or $v-app-background-color; + $color: $v-button-background-color or $v-background-color; $shade: max($v-bevel-depth, 10%); $border-color1: scale-color($color, $lightness: -$shade, $saturation: -$shade/2); $border-color2: scale-color($color, $lightness: -$shade/2, $saturation: -$shade/4); @@ -61,7 +61,7 @@ $v-splitpanel-splitter-size: round($v-unit-size/5) !default; .#{$primary-stylename}-hsplitter div { cursor: e-resize; cursor: col-resize; - $color: $v-button-background-color or $v-app-background-color; + $color: $v-button-background-color or $v-background-color; @include valo-gradient($color: $color, $direction: to right); &:before { @@ -138,7 +138,7 @@ $v-splitpanel-splitter-size: round($v-unit-size/5) !default; height: 1px; left: 0; right: 0; - background: darken($v-app-background-color, max($v-bevel-depth/2, 10%)); + background: darken($v-background-color, max($v-bevel-depth/2, 10%)); } } @@ -162,7 +162,7 @@ $v-splitpanel-splitter-size: round($v-unit-size/5) !default; width: 1px; top: 0; bottom: 0; - background: darken($v-app-background-color, max($v-bevel-depth/2, 10%)); + background: darken($v-background-color, max($v-bevel-depth/2, 10%)); } } diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss index 18d32d82e0..4981423a3d 100644 --- a/WebContent/VAADIN/themes/valo/components/_table.scss +++ b/WebContent/VAADIN/themes/valo/components/_table.scss @@ -52,7 +52,7 @@ $v-table-background-color: null !default; -@function valo-table-background-color($context: $v-app-background-color) { +@function valo-table-background-color($context: $v-background-color) { @if is-dark-color($context) { @return darken($context, 2%); } @@ -63,12 +63,12 @@ $v-table-background-color: null !default; @mixin valo-table ($primary-stylename: v-table) { $background-color: $v-table-background-color or valo-table-background-color(); - $border-color: $v-table-border-color or darken($v-app-background-color, max(5%, $v-bevel-depth/3)); + $border-color: $v-table-border-color or darken($v-background-color, max(5%, $v-bevel-depth/3)); .#{$primary-stylename} { // For scroll position indicator position: relative; - background: $v-app-background-color; + background: $v-background-color; } .v-table-header table, @@ -81,10 +81,10 @@ $v-table-background-color: null !default; .#{$primary-stylename}-footer-wrap, .#{$primary-stylename}-header-drag { border: $v-table-border-width solid $border-color; - @include valo-gradient($v-app-background-color); + @include valo-gradient($v-background-color); white-space: nowrap; font-size: $v-table-header-font-size; - text-shadow: valo-button-text-shadow($v-app-background-color, $v-bevel-depth); + text-shadow: valo-button-text-shadow($v-background-color, $v-bevel-depth); } .#{$primary-stylename}-header-wrap { diff --git a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss index c78a9567f7..a50d020ed9 100644 --- a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss +++ b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss @@ -24,8 +24,8 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; @mixin valo-tabsheet ($primary-stylename: v-tabsheet) { - $_scale: if( is-dark-color($v-app-background-color) , max(5%, $v-bevel-depth/2), min(-5%, -$v-bevel-depth/2) ); - $border-color: scale-color($v-app-background-color, $lightness: $_scale); + $_scale: if( is-dark-color($v-background-color) , max(5%, $v-bevel-depth/2), min(-5%, -$v-bevel-depth/2) ); + $border-color: scale-color($v-background-color, $lightness: $_scale); .#{$primary-stylename} { &:not(.v-has-width) { @@ -154,7 +154,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; right: 0; top: 0; padding-left: round($v-unit-size/2); - @include linear-gradient(to left, $v-app-background-color 70%, rgba($v-app-background-color, 0) 100%, $fallback: transparent); + @include linear-gradient(to left, $v-background-color 70%, rgba($v-background-color, 0) 100%, $fallback: transparent); pointer-events: none; line-height: $v-unit-size; @@ -171,7 +171,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; .v-ie8 &, .v-ie9 & { - background-color: $v-app-background-color; + background-color: $v-background-color; &:after { background-color: $border-color; diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss index 3845df5232..75ef5888d5 100644 --- a/WebContent/VAADIN/themes/valo/components/_textfield.scss +++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss @@ -60,8 +60,8 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; @function valo-textfield-border-color ($bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, $background-color: $v-textfield-background-color) { - $background-color: $background-color or valo-textfield-background-color($v-app-background-color); - $border-color: if(color-luminance($background-color) < color-luminance($v-app-background-color), $background-color, $v-app-background-color); + $background-color: $background-color or valo-textfield-background-color($v-background-color); + $border-color: if(color-luminance($background-color) < color-luminance($v-background-color), $background-color, $v-background-color); $border-color: blend-darken($border-color, scale-color($border-color, $lightness: max(-50%, -$bevel-depth/2))); $border-color: scale-color($border-color, $saturation: -$bevel-depth/2); @return $border-color; @@ -75,7 +75,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius, $background-color: $v-textfield-background-color) { - $background-color: $background-color or valo-textfield-background-color($v-app-background-color); + $background-color: $background-color or valo-textfield-background-color($v-background-color); $unit-size: $unit-size or $v-unit-size; @include appearance(none); @@ -131,7 +131,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; $focus-color: valo-focus-color(); - @if color-luminance($focus-color) + 50 < color-luminance($v-app-background-color) { + @if color-luminance($focus-color) + 50 < color-luminance($v-background-color) { border-color: $focus-color; } diff --git a/WebContent/VAADIN/themes/valo/components/_tree.scss b/WebContent/VAADIN/themes/valo/components/_tree.scss index a5a2f4e904..cb0093c8c3 100644 --- a/WebContent/VAADIN/themes/valo/components/_tree.scss +++ b/WebContent/VAADIN/themes/valo/components/_tree.scss @@ -215,7 +215,7 @@ $v-tree-expand-animation-enabled: false !default; line-height: 2px; color: valo-focus-color(); text-indent: round($v-font-size/-4); - text-shadow: 0 0 1px $v-app-background-color, 0 0 1px $v-app-background-color; + text-shadow: 0 0 1px $v-background-color, 0 0 1px $v-background-color; } .#{$primary-stylename}-node-caption-drag-center { diff --git a/WebContent/VAADIN/themes/valo/components/_window.scss b/WebContent/VAADIN/themes/valo/components/_window.scss index 10758c7829..236cb35d9e 100644 --- a/WebContent/VAADIN/themes/valo/components/_window.scss +++ b/WebContent/VAADIN/themes/valo/components/_window.scss @@ -46,7 +46,7 @@ $v-window-animations-enabled: $v-animations-enabled !default; right: 0; bottom: 0; left: 0; - background: $v-app-background-color; + background: $v-background-color; @include opacity(.3); } @@ -227,7 +227,7 @@ $v-window-animations-enabled: $v-animations-enabled !default; .#{$primary-stylename}-bottom-toolbar { padding: round($v-unit-size/5) round($v-unit-size/3); - background: $v-app-background-color; + background: $v-background-color; .v-expand { overflow: visible; diff --git a/WebContent/VAADIN/themes/valo/shared/_global.scss b/WebContent/VAADIN/themes/valo/shared/_global.scss index 9f226f9856..e685c7fc01 100644 --- a/WebContent/VAADIN/themes/valo/shared/_global.scss +++ b/WebContent/VAADIN/themes/valo/shared/_global.scss @@ -5,6 +5,9 @@ @import "tooltip"; +$v-app-background-color: $v-background-color !default; + + // Include global styles only once $valo-global-included: false !default; @mixin valo-global { diff --git a/WebContent/VAADIN/themes/valo/shared/_overlay.scss b/WebContent/VAADIN/themes/valo/shared/_overlay.scss index 5ac0ce5d9a..35e055516a 100644 --- a/WebContent/VAADIN/themes/valo/shared/_overlay.scss +++ b/WebContent/VAADIN/themes/valo/shared/_overlay.scss @@ -18,7 +18,7 @@ $v-selection-item-padding-horizontal: ceil($v-unit-size/4) !default; $v-selection-item-font-weight: max(400, $v-font-weight); -@function valo-overlay-background-color ($context: $v-app-background-color) { +@function valo-overlay-background-color ($context: $v-background-color) { @if is-dark-color($context) { @return darken($context, 2%); } diff --git a/WebContent/VAADIN/themes/valo/shared/_tooltip.scss b/WebContent/VAADIN/themes/valo/shared/_tooltip.scss index 57d0c97ab3..5ba996d42a 100644 --- a/WebContent/VAADIN/themes/valo/shared/_tooltip.scss +++ b/WebContent/VAADIN/themes/valo/shared/_tooltip.scss @@ -1,6 +1,6 @@ // @category Tooltip -$v-tooltip-background-color: rgba(if(is-dark-color($v-app-background-color), scale-color($v-app-background-color, $lightness: 80%), scale-color($v-app-background-color, $lightness: -80%)), .75) !default; +$v-tooltip-background-color: rgba(if(is-dark-color($v-background-color), scale-color($v-background-color, $lightness: 80%), scale-color($v-background-color, $lightness: -80%)), .75) !default; $v-tooltip-font-color: valo-font-color(opacify($v-tooltip-background-color, 1), 1) !default; $v-tooltip-font-size: max(12px, round($v-font-size * 0.86)) !default; $v-tooltip-box-shadow: 0 2px 12px rgba(#000, .2) !default; diff --git a/WebContent/VAADIN/themes/valo/shared/_variables.scss b/WebContent/VAADIN/themes/valo/shared/_variables.scss index 11906fe5a5..3bf5f04bdb 100644 --- a/WebContent/VAADIN/themes/valo/shared/_variables.scss +++ b/WebContent/VAADIN/themes/valo/shared/_variables.scss @@ -75,11 +75,11 @@ $v-app-loading-text: "" !default; $v-line-height: 1.55 !default; -$v-app-background-color: hsl(210, 0%, 98%) !default; +$v-background-color: hsl(210, 0%, 98%) !default; $v-font-size: 16px !default; // Should be specified in pixels $v-font-weight: 300 !default; // Must be specified as a numeric value (i.e. not 'normal' or 'bold') -$v-font-color: valo-font-color($v-app-background-color) !default; +$v-font-color: valo-font-color($v-background-color) !default; $v-font-family: "Open Sans", sans-serif !default; $v-caption-font-size: round($v-font-size * 0.9) !default; // Should be a pixel value diff --git a/WebContent/VAADIN/themes/valo/util/_color.scss b/WebContent/VAADIN/themes/valo/util/_color.scss index 7dc5157cba..7828e8fd3a 100644 --- a/WebContent/VAADIN/themes/valo/util/_color.scss +++ b/WebContent/VAADIN/themes/valo/util/_color.scss @@ -77,7 +77,7 @@ $v-luminance-threshold: 150 !default; @function valo-focus-color ($color: null, $context: null) { - $context: $context or $v-app-background-color; + $context: $context or $v-background-color; $fallback: $context; @if is-dark-color($fallback) { |