path: root/WebContent/VAADIN/themes/valo/shared/_overlay.scss

/**
 * The background color for overlay elements.
 *
 * @type color
 * @group overlay
 */
$v-overlay-background-color: if(is-dark-color($v-background-color), darken($v-background-color, 3%), lighten($v-background-color, 2%)) !default;

/**
 * The corner radius for overlay elements.
 *
 * @type size (px)
 * @group overlay
 */
$v-overlay-border-radius: $v-border-radius !default;

/**
 * The border width for overlay elements.
 *
 * @type size (px)
 * @group overlay
 */
$v-overlay-border-width: first-number($v-border) !default;

/**
 * The animation which is used when overlay elements are made visible.
 *
 * @type list
 * @group overlay
 */
$v-overlay-animate-in: valo-overlay-animate-in 120ms !default;

/**
 * The animation which is used when overlay elements are removed.
 *
 * @type list
 * @group overlay
 */
$v-overlay-animate-out: valo-animate-out-fade 120ms !default;

/**
 * The padding on each size of overlay elements.
 *
 * @type size
 * @group overlay
 */
$v-overlay-padding: round($v-unit-size/9) !default;

/**
 * The padding on the top and bottom edges of overlay elements.
 *
 * @type size
 * @group overlay
 */
$v-overlay-padding-vertical: $v-overlay-padding !default;

/**
 * The padding on the left and right edges of overlay elements.
 *
 * @type size
 * @group overlay
 */
$v-overlay-padding-horizontal: $v-overlay-padding !default;

/**
 * The shadow used for overlay elements.
 *
 * @type list
 * @group overlay
 */
$v-overlay-shadow: 0 4px 10px 0 (v-shade 2), 0 3px 5px 0 v-shade, 0 0 0 $v-overlay-border-width (v-shade (2.5 - color-luminance($v-background-color)/255 + $v-bevel-depth/100%)) !default;

/**
 * The background color for selection overlays, i.e. overlays which present a
 * list of options for the user to choose from, such as context menus and drop down
 * menus.
 *
 * @type color
 * @group overlay
 */
$v-selection-overlay-background-color: $v-overlay-background-color !default;

/**
 * The padding on each size of selection overlay elements.
 *
 * @type size
 * @group overlay
 */
$v-selection-overlay-padding: $v-overlay-padding !default;

/**
 * The padding on the top and bottom edges of selection overlay elements.
 *
 * @type size
 * @group overlay
 */
$v-selection-overlay-padding-vertical: $v-selection-overlay-padding !default;

/**
 * The padding on the left and right edges of selection overlay elements.
 *
 * @type size
 * @group overlay
 */
$v-selection-overlay-padding-horizontal: $v-selection-overlay-padding !default;

/**
 * The corner radius for selection overlay elements.
 *
 * @type size (px)
 * @group overlay
 */
$v-selection-item-border-radius: $v-border-radius - 1px !default;

/**
 * The height of individual selection overlay list items.
 *
 * @type size (px)
 * @group overlay
 */
$v-selection-item-height: ceil($v-unit-size/1.4) !default;

/**
 * The horizontal padding for individual selection overlay list items.
 *
 * @type size
 * @group overlay
 */
$v-selection-item-padding-horizontal: ceil($v-unit-size/4) !default;

/**
 * The font weight for individual selection overlay list items.
 *
 * @type number | identifier
 * @group overlay
 */
$v-selection-item-font-weight: max(400, $v-font-weight);

/**
 * The font color for individual selection overlay list items.
 *
 * @type color
 * @group overlay
 */
$v-selection-item-selection-color: $v-selection-color !default;





/*
 * Simulates CSS box-shadow using the extraneous shadow elements in the DOM.
 *
 * @access private
 * @deprecated The .v-shadow element is deprecated since 7.3.0
 * @group overlay
 */
@mixin 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-spread: 0;
    @if length($shadow) > 4 {
      $shadow-spread: nth($shadow, 4);
    }
    $shadow-color: last($shadow);
    $shadow-color-opacity: round(opacity($shadow-color) * 100);
    $shadow-color: opacify($shadow-color, 1);

    position: absolute;
    top: $shadow-offset-y - $shadow-blur - $shadow-spread;
    right: -$shadow-offset-x + $shadow-blur - $shadow-spread;
    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=false);
  }
}





// 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;

    // 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);

    @if type-of(last($shadows)) == color {
      @include valo-ie8-shadow($shadows);
    } @else {
      @for $i from 1 through min(length($elements), length($shadows)) {
        $shadow: nth($shadows, $i);
        @if length($shadow) == 2 {
          $shadow: flatten-list($shadow); // Workaround for a weird issue when sometimes a shadow is appended to a null list
        }
        @if length($shadow) > 3 {
          @include valo-ie8-shadow($shadow: $shadow, $element: nth($elements, $i));
        }
      }
    }
  }
}







/**
 * Outputs styles for overlay elements
 *
 * @group overlay
 *
 * @param {color} $background-color ($v-overlay-background-color) - the background color for the overlay
 * @param {list} $shadow ($v-overlay-shadow) - the shadow for the overlay
 * @param {list} $animate-in ($v-overlay-animate-in) - the animation used when the overlay is made visible
 * @param {list} $animate-out ($v-overlay-animate-out) - the animation used when the overlay is removed
 */
@mixin valo-overlay-style (
    $background-color: $v-overlay-background-color,
    $shadow: $v-overlay-shadow,
    $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;

  background-color: $background-color;
  color: valo-font-color($background-color);

  @include box-shadow( valo-bevel-and-shadow($bevel: null, $shadow: $shadow));

  @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;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}





/**
 * Outputs styles for selection overlay elements.
 *
 * @group overlay
 *
 * @param {color} $background-color ($v-selection-overlay-background-color) - the background color for the overlay
 * @param {list} $animate-in ($v-overlay-animate-in) - the animation used when the selection overlay is made visible
 * @param {list} $animate-out ($v-overlay-animate-out) - the animation used when the selection overlay is removed
 */
@mixin valo-selection-overlay-style ($background-color: $v-selection-overlay-background-color, $animate-in: $v-overlay-animate-in, $animate-out: $v-overlay-animate-out) {
  @include valo-overlay-style($background-color: $background-color, $animate-in: $animate-in, $animate-out: $animate-out);
  padding: $v-selection-overlay-padding-vertical $v-selection-overlay-padding-horizontal;
}



/**
 * Outputs the styles for selection item elements (i.e. individual items in context menus and drop down menus).
 *
 * @group overlay
 */
@mixin 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;
    $sat: if(saturation($v-selection-item-selection-color) > 0, 50%, 0%);
    background: scale-color($v-selection-item-selection-color, $lightness: -30%, $saturation: $sat);
    @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;
  }
}



/**
 * Outputs the styles for selected selection item elements.
 *
 * @group overlay
 */
@mixin valo-selection-item-selected-style {
  @include valo-gradient($v-selection-item-selection-color);
  $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);
}







/**
 * Outputs the selectors and styles for generic dragging ghost elements.
 *
 * @group drag-n-drop
 */
@mixin valo-drag-element {
  .v-drag-element {
    @include valo-drag-element-style;
  }
}

/**
 * Outputs the styles for generic dragging ghost elements.
 *
 * @group drag-n-drop
 *
 * @param {color} $background-color ($v-app-background-color) - the background color for the ghost element
 */
@mixin valo-drag-element-style ($background-color: $v-app-background-color) {
  background: $background-color;
  color: valo-font-color($background-color);
  @include 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;
}