@sbb-esta/lyne-elements-dev 5.0.0-next.2-dev.1778120187 → 5.0.0-next.2-dev.1778141158

package/core/styles/mixins/overlay.scss

@@ -1,175 +0,0 @@
-@use '../core/functions';
-@use './scrollbar';
-
-@mixin options-panel-overlay-variables--global($theme: 'standard') {
-  --sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
-  --sbb-options-panel-animation-timing-function: ease;
-  --sbb-options-panel-background-color: var(--sbb-background-color-2);
-  --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
-  --sbb-options-panel-padding-block: #{functions.theme-pattern-select(
-      (
-        'standard': var(--sbb-spacing-fixed-2x),
-        'lean': var(--sbb-spacing-fixed-1x),
-      ),
-      $theme
-    )};
-}
-
-@mixin options-panel-overlay-variables {
-  @include scrollbar.scrollbar-variables;
-
-  --sbb-options-panel-position-x: 0;
-  --sbb-options-panel-position-y: 0;
-
-  // In order to have a valid value, we need a big integer to not fall into the minimum
-  --_sbb-options-panel-max-height: min(
-    var(--sbb-options-panel-max-height-calculated),
-    var(--sbb-options-panel-max-height, 100000em)
-  );
-  --sbb-options-panel-min-height: var(--sbb-options-panel-origin-height);
-  --sbb-options-panel-options-border-radius: 0 0 var(--sbb-options-panel-border-radius)
-    var(--sbb-options-panel-border-radius);
-  --sbb-options-panel-animation-duration: var(
-    --sbb-disable-animation-duration,
-    var(--sbb-animation-duration-4x)
-  );
-  --sbb-options-panel-gap-fix-top: calc(
-    var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius)
-  );
-
-  // As the overlays have always a white background, we have to fix the focus outline color
-  // to default color for cases where the overlays are used in a negative context.
-  --sbb-focus-outline-color: light-dark(
-    var(--sbb-focus-outline-color-default),
-    var(--sbb-focus-outline-color-dark)
-  );
-}
-
-@mixin options-panel-overlay-negative-variables {
-  @include scrollbar.scrollbar-variables--color-negative;
-
-  --sbb-options-panel-background-color: var(--sbb-background-color-2-negative);
-
-  // As the overlays have always a white background, we have to fix the focus outline color
-  // to default color for cases where the overlays are used in a negative context.
-  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
-}
-
-@mixin options-panel-overlay-size-s-variables {
-  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
-}
-
-@mixin options-panel-overlay-size-m-variables {
-  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);
-}
-
-@mixin options-panel-overlay-container {
-  position: fixed;
-  pointer-events: none;
-  inset: 0;
-  z-index: var(--sbb-options-panel-internal-z-index);
-}
-
-@mixin options-panel-overlay-gap {
-  display: flex;
-  justify-content: space-between;
-  position: fixed;
-  visibility: var(--sbb-options-panel-visibility, visible);
-  opacity: var(--sbb-options-panel-gap-fix-opacity, 0);
-  background-color: transparent;
-  width: var(--sbb-options-panel-width, fit-content);
-  height: var(--sbb-options-panel-border-radius);
-  top: var(--sbb-options-panel-gap-fix-top);
-  left: var(--sbb-options-panel-position-x);
-  transform: var(--sbb-options-panel-gap-fix-transform, none);
-  transition: opacity var(--sbb-options-panel-animation-duration)
-    var(--sbb-options-panel-animation-timing-function);
-}
-
-@mixin options-panel-overlay {
-  display: block;
-  position: absolute;
-  visibility: var(--sbb-options-panel-visibility, 'visible');
-  overflow: hidden;
-  background-color: transparent;
-  border: none;
-  border-radius: var(--sbb-options-panel-border-radius);
-  top: var(--sbb-options-panel-position-y);
-  left: var(--sbb-options-panel-position-x);
-  width: var(--sbb-options-panel-width, fit-content);
-  transition: box-shadow var(--sbb-options-panel-animation-duration)
-    var(--sbb-options-panel-animation-timing-function);
-
-  &::before,
-  &::after {
-    content: '';
-    display: none;
-    position: relative;
-    width: 100%;
-    height: var(--sbb-options-panel-origin-height);
-    background-color: transparent;
-    border-radius: var(--sbb-options-panel-border-radius);
-    pointer-events: none;
-    transition: box-shadow var(--sbb-options-panel-animation-duration)
-      var(--sbb-options-panel-animation-timing-function);
-    z-index: 1;
-  }
-}
-
-@mixin optionsOverlay {
-  background-color: var(--sbb-options-panel-background-color);
-  padding-block: var(--sbb-options-panel-padding-block);
-  padding-inline: 0;
-  border-radius: var(--sbb-options-panel-options-border-radius);
-  max-height: var(--_sbb-options-panel-max-height);
-  min-height: var(--sbb-options-panel-min-height);
-  pointer-events: all;
-  overflow-y: auto;
-  animation: {
-    name: var(--sbb-options-panel-animation-name);
-    duration: var(--sbb-options-panel-animation-duration);
-    timing-function: var(--sbb-options-panel-animation-timing-function);
-  }
-}
-
-// Used to create the "wrapping" effect around the anchor for overlays (es. autocomplete/select)
-// Works in conjunction with the 'overlayGapFixCorners()' function in 'overlay.ts'
-@mixin overlay-gap-fix(
-  $radius: var(--sbb-options-panel-border-radius),
-  $color: var(--sbb-options-panel-background-color)
-) {
-  .sbb-gap-fix-wrapper {
-    position: relative;
-    overflow: hidden;
-    width: $radius;
-    height: $radius;
-    background-color: transparent;
-  }
-
-  .sbb-gap-fix-corner {
-    position: absolute;
-    border-radius: 50%;
-    border: calc($radius / 2) solid $color;
-    width: calc($radius * 3);
-    height: calc($radius * 3);
-    bottom: calc(($radius / 2) * -1);
-  }
-
-  .sbb-gap-fix-corner#left {
-    left: calc(($radius / 2) * -1);
-
-    :host(:dir(rtl)) & {
-      right: calc(($radius / 2) * -1);
-      left: unset;
-    }
-  }
-
-  .sbb-gap-fix-corner#right {
-    right: calc(($radius / 2) * -1);
-
-    :host(:dir(rtl)) & {
-      left: calc(($radius / 2) * -1);
-      right: unset;
-    }
-  }
-}