vaadin-framework/themes/src/main/themes/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;

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

@mixin valo-draggable {
  .v-draggable {
    user-select: none !important;
  }
}

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