diff options
21 files changed, 53 insertions, 48 deletions
diff --git a/WebContent/VAADIN/themes/valo/_valo.scss b/WebContent/VAADIN/themes/valo/_valo.scss index 802b8cf54e..b21cf733d1 100644 --- a/WebContent/VAADIN/themes/valo/_valo.scss +++ b/WebContent/VAADIN/themes/valo/_valo.scss @@ -3,9 +3,9 @@ // Import all utility mixins and functions +@import "util/bourbon/bourbon"; @import "util/lists"; @import "util/css3"; -@import "util/bourbon/bourbon"; @import "util/color"; @import "util/anim"; @import "util/gradient"; diff --git a/WebContent/VAADIN/themes/valo/components/_accordion.scss b/WebContent/VAADIN/themes/valo/components/_accordion.scss index 93f5e08ef1..350c704eb4 100644 --- a/WebContent/VAADIN/themes/valo/components/_accordion.scss +++ b/WebContent/VAADIN/themes/valo/components/_accordion.scss @@ -102,7 +102,7 @@ width: 100%; bottom: 0; right: 0; - box-shadow: valo-bevel-and-shadow($shadow: join(inset, $v-shadow), $shadow-opacity: $v-shadow-opacity/2); + @include box-shadow(valo-bevel-and-shadow($shadow: join(inset, $v-shadow), $shadow-opacity: $v-shadow-opacity/2)); background-color: $v-panel-background-color; @include box-sizing(border-box); @include valo-panel-adjust-content-margins; diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss index fa973f186b..cea1c9fbc8 100644 --- a/WebContent/VAADIN/themes/valo/components/_button.scss +++ b/WebContent/VAADIN/themes/valo/components/_button.scss @@ -112,7 +112,7 @@ @if type-of($background-color) == color { @include valo-border-with-gradient($border: $border, $color: darkest-color($background-color, $v-background-color), $gradient: $gradient); @include valo-gradient($background-color, $gradient); - box-shadow: valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient); + @include box-shadow(valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient)); } @if $bevel and type-of($_font-color) == color and type-of($background-color) == color { @@ -120,7 +120,7 @@ } @if $bevel == none and $shadow == none { - box-shadow: none; + @include box-shadow(none); } } @@ -206,7 +206,7 @@ @mixin valo-button-borderless-style ($font-color: inherit) { border: none; - box-shadow: none; + @include box-shadow(none); background: transparent; color: $font-color; diff --git a/WebContent/VAADIN/themes/valo/components/_checkbox.scss b/WebContent/VAADIN/themes/valo/components/_checkbox.scss index 9dfe2984a0..0ee703c372 100644 --- a/WebContent/VAADIN/themes/valo/components/_checkbox.scss +++ b/WebContent/VAADIN/themes/valo/components/_checkbox.scss @@ -44,7 +44,7 @@ &:focus ~ label:before { @include valo-button-focus-style($background-color: $background-color, $border-fallback: null, $include-box-shadow: false); - box-shadow: valo-bevel-and-shadow($background-color: $background-color, $bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient, $include-focus: true); + @include box-shadow(valo-bevel-and-shadow($background-color: $background-color, $bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient, $include-focus: true)); } & ~ label:before, diff --git a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss index a8a5dde076..dfac86fd8d 100644 --- a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss +++ b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss @@ -31,7 +31,7 @@ height: 11px; border-radius: 7px; border: 1px solid #fff; - box-shadow: 0 0 0 1px rgba(0,0,0,.3), inset 0 0 0 1px rgba(0,0,0,.3); + @include box-shadow(0 0 0 1px rgba(0,0,0,.3), inset 0 0 0 1px rgba(0,0,0,.3)); position: absolute; bottom: -6px; left: -6px; @@ -123,19 +123,19 @@ .v-slider-red .v-slider-base:after { background: red; border: none; - box-shadow: none; + @include box-shadow(none); } .v-slider-green .v-slider-base:after { background: green; border: none; - box-shadow: none; + @include box-shadow(none); } .v-slider-blue .v-slider-base:after { background: blue; border: none; - box-shadow: none; + @include box-shadow(none); } .v-margin-bottom { diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss index e947fc3732..51ec65e55f 100644 --- a/WebContent/VAADIN/themes/valo/components/_combobox.scss +++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss @@ -39,7 +39,7 @@ @include user-select(none); @include valo-gradient; cursor: inherit; - box-shadow: valo-bevel-and-shadow($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient); + @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient)); @include valo-border-with-gradient($border: $v-border, $color: $v-background-color, $gradient: $v-gradient); text-shadow: inherit; text-overflow: ellipsis; diff --git a/WebContent/VAADIN/themes/valo/components/_menubar.scss b/WebContent/VAADIN/themes/valo/components/_menubar.scss index 473617e981..75b93b646f 100644 --- a/WebContent/VAADIN/themes/valo/components/_menubar.scss +++ b/WebContent/VAADIN/themes/valo/components/_menubar.scss @@ -13,7 +13,7 @@ @if type-of($v-focus-style) == list { $box-shadow: $box-shadow, $v-focus-style; } - box-shadow: $box-shadow; + @include box-shadow($box-shadow); } &.v-disabled { @@ -229,7 +229,7 @@ @mixin valo-menubar-menuitem-checked-style ($background-color: if(color-luminance($v-background-color) < 10, scale-color($v-background-color, $lightness: 10%, $saturation: -5%), scale-color($v-background-color, $lightness: -5%, $saturation: -5%))) { $grad: valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4; - box-shadow: none; + @include box-shadow(none); @include valo-gradient($color: $background-color, $gradient: $grad, $direction: to top); color: valo-font-color($background-color, 0.9); } @@ -259,17 +259,17 @@ border: none; border-radius: 0; padding: first-number($v-border); - box-shadow: none; + @include box-shadow(none); background: transparent; color: inherit; &:not(.v-disabled):focus { border: none; - box-shadow: none; + @include box-shadow(none); } .#{$primary-stylename}-menuitem { - box-shadow: none; + @include box-shadow(none); border: none; margin-right: max(1px, first-number($v-border)); border-radius: $v-border-radius; diff --git a/WebContent/VAADIN/themes/valo/components/_panel.scss b/WebContent/VAADIN/themes/valo/components/_panel.scss index cb344b6404..542c14ea64 100644 --- a/WebContent/VAADIN/themes/valo/components/_panel.scss +++ b/WebContent/VAADIN/themes/valo/components/_panel.scss @@ -34,7 +34,7 @@ $v-panel-border: $v-border !default; color: valo-font-color($background-color); border-radius: $border-radius; border: valo-border($border: $border, $color: darkest-color($background-color, $v-app-background-color), $strength: 0.7); - box-shadow: valo-bevel-and-shadow($shadow: $shadow); + @include box-shadow(valo-bevel-and-shadow($shadow: $shadow)); } @@ -54,7 +54,7 @@ $v-panel-border: $v-border !default; color: valo-font-color($bg); font-weight: $v-caption-font-weight; font-size: $v-caption-font-size; - box-shadow: valo-bevel-and-shadow($background-color: $bg, $bevel: $bevel, $gradient: $gradient); + @include box-shadow(valo-bevel-and-shadow($background-color: $bg, $bevel: $bevel, $gradient: $gradient)); text-shadow: valo-text-shadow(valo-font-color($bg), $bg, $v-bevel); } @@ -64,13 +64,13 @@ $v-panel-border: $v-border !default; $bg: scale-color(adjust-color($v-background-color, $lightness: -2%), $saturation: -1.5%); background: $bg; color: valo-font-color($bg); - box-shadow: valo-bevel-and-shadow($shadow: $shadow); + @include box-shadow(valo-bevel-and-shadow($shadow: $shadow)); border-radius: $v-border-radius; border: valo-border(); > div > .v-panel-caption { background: transparent; - box-shadow: none; + @include box-shadow(none); } } @@ -81,11 +81,11 @@ $v-panel-border: $v-border !default; color: inherit; border: none; border-radius: 0; - box-shadow: none; + @include box-shadow(none); > div > .v-panel-caption { background: transparent; - box-shadow: none; + @include box-shadow(none); color: inherit; padding: 0; margin: 0 round($v-unit-size/3); diff --git a/WebContent/VAADIN/themes/valo/components/_progressbar.scss b/WebContent/VAADIN/themes/valo/components/_progressbar.scss index c7f7f72514..f5836c7eaf 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; .#{$primary-stylename}-point { .#{$primary-stylename}-indicator { background: transparent; - box-shadow: none; + @include box-shadow(none); border: none; text-align: right; overflow: hidden; @@ -57,7 +57,7 @@ $v-progressbar-border-radius: $v-border-radius !default; border-radius: $v-progressbar-border-radius; height: inherit; @include valo-gradient($color: $background-color); - box-shadow: valo-bevel-and-shadow($background-color: $background-color); + @include box-shadow(valo-bevel-and-shadow($background-color: $background-color)); @if $border { border: valo-border($border: $border, $color: $background-color, $context: $v-app-background-color); } @else { diff --git a/WebContent/VAADIN/themes/valo/components/_richtextarea.scss b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss index 5807e16aa7..44f3df327c 100644 --- a/WebContent/VAADIN/themes/valo/components/_richtextarea.scss +++ b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss @@ -9,7 +9,7 @@ $valo-richtextarea-use-font-awesome: true !default; .#{$primary-stylename} .gwt-RichTextToolbar { @include valo-gradient($color: $v-background-color); - box-shadow: valo-bevel-and-shadow($bevel: $v-bevel, $background-color: $v-background-color, $gradient: $v-gradient); + @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $background-color: $v-background-color, $gradient: $v-gradient)); border-bottom: valo-border(); color: valo-font-color($v-background-color); } diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss index a3af2348e1..deef084561 100644 --- a/WebContent/VAADIN/themes/valo/components/_table.scss +++ b/WebContent/VAADIN/themes/valo/components/_table.scss @@ -75,7 +75,7 @@ $v-table-background-color: null !default; .v-table-header table, .v-table-footer table, .v-table-table { - box-shadow: 0 0 0 $v-table-border-width $border-color; + @include box-shadow(0 0 0 $v-table-border-width $border-color); .v-ie8 & { outline: $v-table-border-width solid $border-color; @@ -371,7 +371,7 @@ $v-table-background-color: null !default; tbody.v-drag-element { display: block; overflow: visible; - box-shadow: none; + @include box-shadow(none); background: transparent; @include opacity(1); @@ -410,7 +410,7 @@ $v-table-background-color: null !default; // Drag'n'drop styles .#{$primary-stylename}-drag .#{$primary-stylename}-body { - box-shadow: 0 0 0 2px rgba($v-focus-color, .5); + @include box-shadow(0 0 0 2px rgba($v-focus-color, .5)); @if color-luminance($v-focus-color) + 50 < color-luminance($background-color) { border-color: $v-focus-color; diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss index 63e924921a..147befb0a1 100644 --- a/WebContent/VAADIN/themes/valo/components/_textfield.scss +++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss @@ -72,7 +72,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; @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); + @include box-shadow(valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient)); } @@ -127,7 +127,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; border-color: $focus-color; } - box-shadow: valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient, $include-focus: true); + @include box-shadow(valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient, $include-focus: true)); @include valo-focus-style; } @@ -135,7 +135,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; @mixin valo-textfield-readonly-style { background: transparent; - box-shadow: none; + @include box-shadow(none); &:focus { @include valo-focus-style($include-box-shadow: true); } @@ -165,7 +165,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; border: none; border-radius: 0; background: $background-color; - box-shadow: none; + @include box-shadow(none); @if $background-color == transparent { color: inherit; } @else if type-of($background-color) == color { @@ -173,7 +173,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; } &:focus { - box-shadow: none; + @include box-shadow(none); } } diff --git a/WebContent/VAADIN/themes/valo/components/_tree.scss b/WebContent/VAADIN/themes/valo/components/_tree.scss index 28044bdf3f..9ac2f7e43d 100644 --- a/WebContent/VAADIN/themes/valo/components/_tree.scss +++ b/WebContent/VAADIN/themes/valo/components/_tree.scss @@ -230,7 +230,7 @@ $v-tree-expand-animation-enabled: false !default; } .#{$primary-stylename}-node-caption-drag-center { - box-shadow: 0 0 0 2px $v-focus-color; + @include box-shadow(0 0 0 2px $v-focus-color); position: relative; border-radius: $v-border-radius; diff --git a/WebContent/VAADIN/themes/valo/components/_window.scss b/WebContent/VAADIN/themes/valo/components/_window.scss index 79fb500804..d866ce2584 100644 --- a/WebContent/VAADIN/themes/valo/components/_window.scss +++ b/WebContent/VAADIN/themes/valo/components/_window.scss @@ -28,9 +28,9 @@ $v-window-modality-curtain-background-color: #222 !default; @if $v-window-shadow { @if $v-window-shadow == none { - box-shadow: none; + @include box-shadow(none); } @else if $v-window-shadow != $v-overlay-shadow { - box-shadow: valo-bevel-and-shadow($shadow: $v-window-shadow); + @include box-shadow(valo-bevel-and-shadow($shadow: $v-window-shadow)); } } @if $v-window-border-radius != $v-border-radius { diff --git a/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss b/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss index 4adaf9a2a9..09d29b7d9f 100644 --- a/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss +++ b/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss @@ -424,7 +424,7 @@ .v-accordion-borderless { border: none; border-radius: 0; - box-shadow: none; + @include box-shadow(none); > .v-accordion-item { border-radius: 0; diff --git a/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss b/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss index 30e390c7fe..f3377f232c 100644 --- a/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss +++ b/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss @@ -49,19 +49,19 @@ $valo-menu-background-color: null !default; padding: round($v-unit-size/3) round($v-unit-size/2); font-size: round($v-font-size * 0.9); border-bottom: valo-border($color: $v-selection-color); - box-shadow: valo-bevel-and-shadow($shadow: $v-shadow); + @include box-shadow(valo-bevel-and-shadow($shadow: $v-shadow)); .v-menubar { background: transparent; border-color: first-color(valo-border($color: $v-selection-color)); color: inherit; - box-shadow: none; + @include box-shadow(none); text-shadow: inherit; } .v-menubar-menuitem { background: transparent; - box-shadow: valo-bevel-and-shadow($bevel: $v-bevel, $background-color: $v-selection-color, $gradient: $v-gradient); + @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $background-color: $v-selection-color, $gradient: $v-gradient)); text-shadow: inherit; font-size: $v-font-size; border-color: inherit; @@ -207,7 +207,7 @@ $valo-menu-background-color: null !default; font-size: round($v-unit-size/1.5); line-height: round($v-unit-size * 1.2); margin: round($v-unit-size/2) auto; - box-shadow: valo-bevel-and-shadow($shadow: $v-shadow); + @include box-shadow(valo-bevel-and-shadow($shadow: $v-shadow)); } } diff --git a/WebContent/VAADIN/themes/valo/shared/_notification.scss b/WebContent/VAADIN/themes/valo/shared/_notification.scss index a7c2b3a469..cfe4c19599 100644 --- a/WebContent/VAADIN/themes/valo/shared/_notification.scss +++ b/WebContent/VAADIN/themes/valo/shared/_notification.scss @@ -171,7 +171,7 @@ $v-notification-title-color: $v-focus-color !default; @mixin valo-notification-style { background: valo-overlay-background-color(); - box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.15); + @include box-shadow(0px 5px 15px 0px rgba(0,0,0,0.15)); padding: round($v-unit-size/2) round($v-unit-size/1.7); h1 { @@ -190,7 +190,7 @@ $v-notification-title-color: $v-focus-color !default; max-width: 100%; margin: 0 !important; border-radius: 0; - box-shadow: 0 0 20px 0 rgba(0,0,0,0.25); + @include box-shadow(0 0 20px 0 rgba(0,0,0,0.25)); padding: round($v-unit-size/3) round($v-unit-size/2.5); p { @@ -264,7 +264,7 @@ $v-notification-title-color: $v-focus-color !default; @mixin valo-notification-error-style { background: $v-error-indicator-color; font-weight: $v-font-weight + 100; - box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.25); + @include box-shadow(0px 5px 15px 0px rgba(0,0,0,0.25)); h1 { color: valo-font-color($v-error-indicator-color, 1); diff --git a/WebContent/VAADIN/themes/valo/shared/_overlay.scss b/WebContent/VAADIN/themes/valo/shared/_overlay.scss index 0675b70f4e..a5f6e36957 100644 --- a/WebContent/VAADIN/themes/valo/shared/_overlay.scss +++ b/WebContent/VAADIN/themes/valo/shared/_overlay.scss @@ -110,7 +110,7 @@ $v-selection-item-selection-color: $v-selection-color !default; background-color: $background-color; color: valo-font-color($background-color); - box-shadow: valo-bevel-and-shadow($bevel: null, $shadow: $shadow); + @include box-shadow( valo-bevel-and-shadow($bevel: null, $shadow: $shadow)); @if $v-animations-enabled { @if $animate-in { @@ -200,7 +200,7 @@ $v-selection-item-selection-color: $v-selection-color !default; @mixin valo-drag-element-style ($background-color: $v-app-background-color) { background: $background-color; color: valo-font-color($background-color); - box-shadow: 0 2px 10px rgba(#000, .2); + @include box-shadow(0 2px 10px rgba(#000, .2)); border-radius: $v-border-radius; overflow: hidden; @include opacity(.5); diff --git a/WebContent/VAADIN/themes/valo/shared/_tooltip.scss b/WebContent/VAADIN/themes/valo/shared/_tooltip.scss index 386dc7c1b1..7b7b83ff33 100644 --- a/WebContent/VAADIN/themes/valo/shared/_tooltip.scss +++ b/WebContent/VAADIN/themes/valo/shared/_tooltip.scss @@ -58,7 +58,7 @@ $v-tooltip-border-radius: $v-border-radius - 1px !default; @mixin valo-tooltip-style { background-color: opacify($v-tooltip-background-color, 1); // For IE8 background-color: $v-tooltip-background-color; - box-shadow: $v-tooltip-box-shadow; + @include box-shadow($v-tooltip-box-shadow); color: $v-tooltip-font-color; padding: $v-tooltip-padding-vertical $v-tooltip-padding-horizontal; border-radius: $v-tooltip-border-radius; diff --git a/WebContent/VAADIN/themes/valo/util/_color.scss b/WebContent/VAADIN/themes/valo/util/_color.scss index b7f8c10ad8..0c80d2f0d0 100644 --- a/WebContent/VAADIN/themes/valo/util/_color.scss +++ b/WebContent/VAADIN/themes/valo/util/_color.scss @@ -88,7 +88,7 @@ $v-luminance-threshold: 150 !default; @mixin valo-focus-style($include-box-shadow: false) { @if $include-box-shadow and type-of($v-focus-style) == list { - box-shadow: $v-focus-style; + @include box-shadow($v-focus-style); } @else if type-of($v-focus-style) == color { border-color: $v-focus-style; } diff --git a/WebContent/VAADIN/themes/valo/util/_css3.scss b/WebContent/VAADIN/themes/valo/util/_css3.scss index 98f1619eff..ca354e89af 100644 --- a/WebContent/VAADIN/themes/valo/util/_css3.scss +++ b/WebContent/VAADIN/themes/valo/util/_css3.scss @@ -8,3 +8,8 @@ filter: none remove-nth($o, 1); } } + +// -webkit-box-shadow still needed for Android 2.3 and 3.0, as well as iOS 5 +@mixin box-shadow ($shadows...) { + @include prefixer(box-shadow, $shadows, webkit spec); +} |