diff options
Diffstat (limited to 'WebContent/VAADIN/themes/valo/shared/_overlay.scss')
| -rw-r--r-- | WebContent/VAADIN/themes/valo/shared/_overlay.scss | 48 |
1 files changed, 19 insertions, 29 deletions
diff --git a/WebContent/VAADIN/themes/valo/shared/_overlay.scss b/WebContent/VAADIN/themes/valo/shared/_overlay.scss index 6f29b1efef..d0ff42fcce 100644 --- a/WebContent/VAADIN/themes/valo/shared/_overlay.scss +++ b/WebContent/VAADIN/themes/valo/shared/_overlay.scss @@ -9,7 +9,9 @@ $v-overlay-background-color: valo-overlay-background-color() !default; $v-overlay-border-radius: $v-border-radius !default; $v-overlay-border-width: first-number($v-border) !default; -$v-overlay-open-animation: valo-overlay-open 200ms !default; + +$v-overlay-animate-in: valo-overlay-animate-in 120ms !default; +$v-overlay-animate-out: valo-placeholder-animate-out 120ms, valo-anim-fade-out 120ms !default; $v-overlay-padding: round($v-unit-size/9) !default; $v-overlay-padding-vertical: $v-overlay-padding !default; @@ -52,7 +54,7 @@ $v-selection-item-selection-color: $v-selection-color !default; bottom: -$shadow-offset-y + $shadow-blur - $shadow-spread; left: $shadow-offset-x - $shadow-blur - $shadow-spread; background: $shadow-color; - filter: alpha(opacity=#{$shadow-color-opacity}) progid:DXImageTransform.Microsoft.blur(pixelradius=#{strip-units($shadow-blur)}, makeShadow=true); + filter: alpha(opacity=#{$shadow-color-opacity}) progid:DXImageTransform.Microsoft.blur(pixelradius=#{strip-units($shadow-blur)}, makeShadow=false); } } @@ -69,17 +71,6 @@ $v-selection-item-selection-color: $v-selection-color !default; .v-ie8 & { display: block; - // Border simulation - /*.center { - position: absolute; - top: -$v-overlay-border-width; - right: -$v-overlay-border-width; - bottom: -$v-overlay-border-width; - left: -$v-overlay-border-width; - background: darken(valo-overlay-background-color(), $v-bevel-depth); - filter: alpha(opacity=round($v-bevel-depth/1%)); - }*/ - // Up to 8 shadows are supported $elements: top, top-left, top-right, left, right, bottom, bottom-left, bottom-right; $shadows: valo-bevel-and-shadow($shadow: $v-overlay-shadow); @@ -110,7 +101,8 @@ $v-selection-item-selection-color: $v-selection-color !default; @mixin valo-overlay-style ( $background-color: $v-overlay-background-color, $shadow: $v-overlay-shadow, - $open-animation: $v-overlay-open-animation + $animate-in: $v-overlay-animate-in, + $animate-out: $v-overlay-animate-out ) { padding: $v-overlay-padding-vertical $v-overlay-padding-horizontal; border-radius: $v-overlay-border-radius; @@ -120,8 +112,17 @@ $v-selection-item-selection-color: $v-selection-color !default; box-shadow: valo-bevel-and-shadow($bevel: null, $shadow: $shadow); - @if $v-animations-enabled and $v-overlay-open-animation { - @include animation($open-animation); + @if $v-animations-enabled { + @if $animate-in { + &[class*="animate-in"] { + @include animation($animate-in); + } + } + @if $animate-out { + &[class*="animate-out"] { + @include animation($animate-out); + } + } } -webkit-backface-visibility: hidden; @@ -132,22 +133,11 @@ $v-selection-item-selection-color: $v-selection-color !default; -@if $v-animations-enabled { - @include keyframes(valo-overlay-open) { - 0% { - @include transform(translatey(-3px)); - opacity: 0; - } - } -} - - - -@mixin valo-selection-overlay-style ($background-color: $v-selection-overlay-background-color, $open-animation: $v-overlay-open-animation) { - @include valo-overlay-style($background-color: $background-color, $open-animation: $open-animation); +@mixin valo-selection-overlay-style ($background-color: $v-selection-overlay-background-color, $animate-in: $v-overlay-animate-in) { + @include valo-overlay-style($background-color: $background-color, $animate-in: $animate-in); padding: $v-selection-overlay-padding-vertical $v-selection-overlay-padding-horizontal; } |