diff options
Diffstat (limited to 'WebContent/VAADIN/themes/valo/shared/_overlay.scss')
| -rw-r--r-- | WebContent/VAADIN/themes/valo/shared/_overlay.scss | 214 |
1 files changed, 214 insertions, 0 deletions
diff --git a/WebContent/VAADIN/themes/valo/shared/_overlay.scss b/WebContent/VAADIN/themes/valo/shared/_overlay.scss new file mode 100644 index 0000000000..87adb4dffd --- /dev/null +++ b/WebContent/VAADIN/themes/valo/shared/_overlay.scss @@ -0,0 +1,214 @@ +$v-overlay-border-radius: $v-border-radius !default; +$v-overlay-border-width: $v-border-width !default; +$v-overlay-open-animation: v-valo-overlay-open 200ms !default; + +$v-overlay-padding: round($v-unit-size/9) !default; +$v-overlay-padding-vertical: $v-overlay-padding !default; +$v-overlay-padding-horizontal: $v-overlay-padding !default; + +$v-overlay-shadow-style: 0 2px 4px 0 shade, 0 3px 5px 0 shade !default; + +$v-selection-overlay-padding: $v-overlay-padding !default; +$v-selection-overlay-padding-vertical: $v-selection-overlay-padding !default; +$v-selection-overlay-padding-horizontal: $v-selection-overlay-padding !default; + +$v-selection-item-border-radius: $v-border-radius - 1px !default; +$v-selection-item-height: ceil($v-unit-size/1.4) !default; +$v-selection-item-padding-horizontal: ceil($v-unit-size/4) !default; +$v-selection-item-font-weight: max(400, $v-font-weight); + + +@function v-valo-overlay-background-color ($context: $v-app-background-color) { + @if is-dark-color($context) { + @return darken($context, 2%); + } + @return lighten($context, 2%); +} + + + + + + +@mixin v-valo-ie8-shadow($shadow, $element: top) { + .#{$element} { + $shadow-offset-x: nth($shadow, 1); + $shadow-offset-y: nth($shadow, 2); + $shadow-blur: nth($shadow, 3); + $shadow-color: last($shadow); + $shadow-color-opacity: opacity($shadow-color); + $shadow-color: opacify($shadow-color, 1); + + position: absolute; + top: $shadow-offset-y - $shadow-blur; + right: -$shadow-offset-x + $shadow-blur; + bottom: -$shadow-offset-y + $shadow-blur; + left: $shadow-offset-x - $shadow-blur; + background: $shadow-color; + filter: progid:DXImageTransform.Microsoft.blur(pixelradius=#{strip-units($shadow-blur)}, makeShadow=true, ShadowOpacity=#{$shadow-color-opacity}); + } +} + + + + + +// Not needed in modern browsers +.v-shadow, +.v-shadow-window { + display: none; + + // In IE8 windows get the same shadow as other overlays + .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(v-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: v-valo-shadow($shadow-style: $v-overlay-shadow-style); + + @if type-of(last($shadows)) == color { + @include v-valo-ie8-shadow($shadows); + } @else { + @for $i from 1 through min(length($elements), length($shadows)) { + $shadow: nth($shadows, $i); + @if length($shadow) == 2 { + $shadow: last($shadow); // Workaround for a weird issue when sometimes a shadow is appended to a null list + } + @if length($shadow) > 3 { + @include v-valo-ie8-shadow($shadow: $shadow, $element: nth($elements, $i)); + } + } + } + } +} + + + + + + +@function v-valo-overlay-box-shadow ($bg: null) { + $bg: $bg or v-valo-overlay-background-color(); + @return v-valo-shadow($shadow-style: (0 0 0 $v-overlay-border-width rgba(darken($bg, $v-bevel-depth), $v-bevel-depth/100%), $v-overlay-shadow-style)); +} + + + +@mixin v-valo-overlay-style ($background-color: null, $open-animation: $v-overlay-open-animation) { + padding: $v-overlay-padding-vertical $v-overlay-padding-horizontal; + border-radius: $v-overlay-border-radius; + + $bg: $background-color or v-valo-overlay-background-color(); + background: $bg; + color: v-valo-font-color($bg); + + box-shadow: v-valo-overlay-box-shadow($bg); + + @if $v-animations-enabled and $v-overlay-open-animation { + @include animation($open-animation); + } + + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; +} + + + +@if $v-animations-enabled { + @include keyframes(v-valo-overlay-open) { + 0% { + @include transform(translatey(-3px)); + opacity: 0; + } + } +} + + + + + + +@mixin v-valo-selection-overlay-style ($background-color: null, $open-animation: $v-overlay-open-animation) { + @include v-valo-overlay-style($background-color: $background-color, $open-animation: $open-animation); + padding: $v-selection-overlay-padding-vertical $v-selection-overlay-padding-horizontal; +} + + + + +@mixin v-valo-selection-item-style { + cursor: pointer; + line-height: $v-selection-item-height; + padding: 0 $v-selection-item-padding-horizontal*2 0 $v-selection-item-padding-horizontal; + @if $v-selection-item-border-radius > 0 { + border-radius: $v-selection-item-border-radius; + } + font-weight: $v-selection-item-font-weight; + white-space: nowrap; + + position: relative; + &:active:before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: scale-color(v-valo-selection-color(), $lightness: -30%, $saturation: 50%); + @include opacity(.15); + pointer-events: none; + border-radius: inherit; + } + + .v-icon { + max-height: $v-selection-item-height; + margin-right: round($v-selection-item-padding-horizontal/2); + min-width: 1em; + } +} + + + + +@mixin v-valo-selection-item-selected-style ($parent-background-color: null) { + $selection-color: v-valo-selection-color($parent-background-color); + @include v-valo-gradient($selection-color); + color: v-valo-font-color($selection-color, 0.9); +} + + + + + + + + +@mixin v-valo-drag-element { + .v-drag-element { + @include v-valo-drag-element-style; + } +} + +@mixin v-valo-drag-element-style { + background: #fff; + box-shadow: 0 2px 10px rgba(#000, .2); + border-radius: $v-border-radius; + overflow: hidden; + @include opacity(.5); + + // This has the unfortunate side-effect of selecting an the table row where the drag is dropped + //pointer-events: none; +}
\ No newline at end of file |