diff options
Diffstat (limited to 'WebContent')
6 files changed, 53 insertions, 9 deletions
diff --git a/WebContent/VAADIN/themes/tests-valo-light/_variables.scss b/WebContent/VAADIN/themes/tests-valo-light/_variables.scss new file mode 100644 index 0000000000..e851f075e4 --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo-light/_variables.scss @@ -0,0 +1,24 @@ +$v-app-loading-text: "Light Valo"; + +$v-background-color: hsl(0, 0, 99.5%); +$v-app-background-color: #fff; +$v-focus-color: hsl(218, 80%, 60%); +$v-border: 1px solid (v-shade 0.6); +$v-border-radius: 3px; +$v-bevel: inset 0 1px 0 v-tint; +$v-textfield-bevel: false; +$v-gradient: v-linear 3%; +$v-shadow: false; +$valo-menu-background-color: hsl(218, 20%, 98%); +$v-friendly-color: hsl(163, 61%, 41%); +$v-error-indicator-color: hsl(349, 66%, 56%); + + +@import "../valo/valo"; + +.tests-valo-light .valo-menu .valo-menu-title { + background: $v-app-background-color; + color: $v-selection-color; + text-shadow: none; + border-color: first-color(valo-border($color: $v-app-background-color, $strength: 0.5)); +} diff --git a/WebContent/VAADIN/themes/tests-valo-light/styles.scss b/WebContent/VAADIN/themes/tests-valo-light/styles.scss new file mode 100644 index 0000000000..12ee8a780e --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo-light/styles.scss @@ -0,0 +1,6 @@ +@import "variables"; +@import "../tests-valo/valotest"; + +.tests-valo-light { + @include valotest; +} diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss index 3144acb37c..2669ac44f6 100644 --- a/WebContent/VAADIN/themes/valo/components/_table.scss +++ b/WebContent/VAADIN/themes/valo/components/_table.scss @@ -221,7 +221,6 @@ $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); - text-shadow: valo-button-text-shadow($v-selection-color, $v-bevel-depth); + .v-selected { $gradient-end: first(last(valo-gradient-color-stops($v-selection-color))); diff --git a/WebContent/VAADIN/themes/valo/components/_tree.scss b/WebContent/VAADIN/themes/valo/components/_tree.scss index 93553fe55a..8e75f59945 100644 --- a/WebContent/VAADIN/themes/valo/components/_tree.scss +++ b/WebContent/VAADIN/themes/valo/components/_tree.scss @@ -176,8 +176,9 @@ $v-tree-expand-animation-enabled: false !default; .#{$primary-stylename}-node-selected { - color: valo-font-color($v-selection-color, 0.9); - text-shadow: valo-button-text-shadow($v-selection-color, $v-bevel-depth); + $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-item-selection-color); &:after { opacity: 1; diff --git a/WebContent/VAADIN/themes/valo/components/_valo-menu.scss b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss index 507065d339..020eb1cae7 100644 --- a/WebContent/VAADIN/themes/valo/components/_valo-menu.scss +++ b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss @@ -91,6 +91,7 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if box-shadow: valo-bevel-and-shadow($bevel: null, $shadow: $v-shadow); display: block; margin: 0 auto .3em; + border: valo-border(); } } @@ -101,10 +102,6 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if .valo-menu-subtitle { @include valo-menu-subtitle-style($bg); - - .valo-menu-badge { - color: mix(valo-font-color($bg), $v-selection-color); - } } .valo-menuitems { @@ -177,9 +174,11 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if padding: 0; height: $v-unit-size; color: valo-font-color($v-selection-color, 0.5); + max-width: 30%; .v-menubar-menuitem { line-height: $v-unit-size - 1px; + white-space: nowrap; } img.v-icon { @@ -188,6 +187,7 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if width: round($v-unit-size / 2); height: round($v-unit-size / 2); border-radius: ceil($v-unit-size / 4); + border: none; } } @@ -228,7 +228,7 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if @mixin valo-menu-style ($bg: $valo-menu-background-color) { height: 100%; - @include linear-gradient(to left, (scale-color($bg, $lightness: valo-gradient-opacity()*-1) 0%, $bg round($v-unit-size/4)), $fallback: $bg); + @include linear-gradient(to left, (darken($bg, valo-gradient-opacity() / 2) 0%, $bg round($v-unit-size/4)), $fallback: $bg); color: valo-font-color($bg, 0.5); font-size: round($v-font-size * 0.9); line-height: round($v-unit-size * 0.8); @@ -256,6 +256,10 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if color: valo-font-color($bg, 0.33); margin: round($v-unit-size/5) 0 round($v-unit-size/5) round($v-unit-size/2); border-bottom: valo-border($color: $bg, $strength: 0.5, $border: first-number($v-border) solid v-tone); + + [class*="badge"] { + color: mix(valo-font-color($bg), $v-selection-color); + } } @@ -286,6 +290,14 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if overflow: hidden; } + [class*="badge"] { + @if abs($diff) < 50 { + color: mix(valo-font-color($bg), $v-selection-color); + } @else { + color: $active-color; + } + } + &.selected { background: if(is-dark-color($bg), darken($bg, 3%), lighten($bg, 5%)); diff --git a/WebContent/VAADIN/themes/valo/shared/_overlay.scss b/WebContent/VAADIN/themes/valo/shared/_overlay.scss index a5f6e36957..dc54672cb6 100644 --- a/WebContent/VAADIN/themes/valo/shared/_overlay.scss +++ b/WebContent/VAADIN/themes/valo/shared/_overlay.scss @@ -181,7 +181,9 @@ $v-selection-item-selection-color: $v-selection-color !default; @mixin valo-selection-item-selected-style { @include valo-gradient($v-selection-item-selection-color); - color: valo-font-color($v-selection-item-selection-color, 0.9); + $font-color: valo-font-color($v-selection-item-selection-color, 0.9); + color: $font-color; + text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-item-selection-color); } |