src/material/tooltip/tooltip.scss - main - githubmirror/components

src/material/tooltip/tooltip.scss
138 строк3 KB
Andrew Seguin
refactor: simplify component styles by removing use-tokens (#31146)
21 май 2025, 03:10
21 май 2025, 03:107b5d88b
@use './m3-tooltip';
@use '../core/tokens/token-utils';

$fallbacks: m3-tooltip.get-tokens();

.mat-mdc-tooltip {
  // We don't use MDC's positioning so this has to be relative.
  position: relative;
  transform: scale(0);
  display: inline-flex;

  // Increases the area of the tooltip so the user's pointer can go from the trigger directly to it.
  &::before {
    $offset: -8px;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    position: absolute;

    // Only set the offset on the side closest to the panel so we
    // don't accidentally cover more content than we need to.
    .mat-mdc-tooltip-panel-below & {
      top: $offset;
    }

    .mat-mdc-tooltip-panel-above & {
      bottom: $offset;
    }

    // Note that here we use left/right instead of before/after
    // so that we don't have to add extra styles for RTL.
    .mat-mdc-tooltip-panel-right & {
      left: $offset;
    }

    .mat-mdc-tooltip-panel-left & {
      right: $offset;
    }
  }

  &._mat-animation-noopable {
    animation: none;
    transform: scale(1);
  }
}

.mat-mdc-tooltip-surface {
  word-break: normal;
  overflow-wrap: anywhere;
  padding: 4px 8px;
  min-width: 40px;
  max-width: 200px;
  min-height: 24px;
  max-height: 40vh;
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;

  // TODO(crisbeto): these styles aren't necessary, but they were present in
  // MDC and removing them is likely to cause screenshot differences.
  will-change: transform, opacity;

  background-color: token-utils.slot(tooltip-container-color, $fallbacks);
  color: token-utils.slot(tooltip-supporting-text-color, $fallbacks);
  border-radius: token-utils.slot(tooltip-container-shape, $fallbacks);
  font-family: token-utils.slot(tooltip-supporting-text-font, $fallbacks);
  font-size: token-utils.slot(tooltip-supporting-text-size, $fallbacks);
  font-weight: token-utils.slot(tooltip-supporting-text-weight, $fallbacks);
  line-height: token-utils.slot(tooltip-supporting-text-line-height, $fallbacks);
  letter-spacing: token-utils.slot(tooltip-supporting-text-tracking, $fallbacks);

  // Renders an outline in high contrast mode.
  &::before {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 1px solid transparent;
    border-radius: inherit;
    content: '';
    pointer-events: none;
  }

  .mdc-tooltip--multiline & {
    text-align: left;
  }

  [dir='rtl'] .mdc-tooltip--multiline & {
    text-align: right;
  }
}

.mat-mdc-tooltip-panel {
  // The line height inherited from the body can throw off the tooltip gap (see #30132).
  line-height: normal;

  // We need the additional specificity here, because it can be overridden by `.cdk-overlay-panel`.
  &.mat-mdc-tooltip-panel-non-interactive {
    pointer-events: none;
  }
}

@keyframes mat-mdc-tooltip-show {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes mat-mdc-tooltip-hide {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

.mat-mdc-tooltip-show {
  animation: mat-mdc-tooltip-show 150ms cubic-bezier(0, 0, 0.2, 1) forwards;
}

.mat-mdc-tooltip-hide {
  animation: mat-mdc-tooltip-hide 75ms cubic-bezier(0.4, 0, 1, 1) forwards;
}