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

src/material/timepicker/timepicker.scss

80 строк2 KB

Andrew Seguin

refactor: simplify component styles by removing use-tokens (#31146)

21 май 2025, 03:10

21 май 2025, 03:107b5d88b

@use '@angular/cdk';
@use '../core/tokens/token-utils';
@use './m3-timepicker';

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

@keyframes _mat-timepicker-enter {
  from {
    opacity: 0;
    transform: scaleY(0.8);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes _mat-timepicker-exit {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

mat-timepicker {
  display: none;
}

.mat-timepicker-panel {
  width: 100%;
  max-height: 256px;
  transform-origin: center top;
  overflow: auto;
  padding: 8px 0;
  box-sizing: border-box;

  // Necessary so the `offsetParent` of the nested `mat-option` is the
  // panel which is required for scroll calculations (see #30974).
  position: relative;

  border-bottom-left-radius: token-utils.slot(timepicker-container-shape, $fallbacks);
  border-bottom-right-radius: token-utils.slot(timepicker-container-shape, $fallbacks);
  box-shadow: token-utils.slot(timepicker-container-elevation-shadow, $fallbacks);
  background-color: token-utils.slot(timepicker-container-background-color, $fallbacks);

  @include cdk.high-contrast {
    outline: solid 1px;
  }

  .mat-timepicker-above & {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: token-utils.slot(timepicker-container-shape, $fallbacks);
    border-top-right-radius: token-utils.slot(timepicker-container-shape, $fallbacks);
  }
}

.mat-timepicker-panel-animations-enabled {
  animation: _mat-timepicker-enter 120ms cubic-bezier(0, 0, 0.2, 1);

  &.mat-timepicker-panel-exit {
    animation: _mat-timepicker-exit 100ms linear;
  }
}

.mat-timepicker-input[readonly] {
  cursor: pointer;
}

@include cdk.high-contrast {
  .mat-timepicker-toggle-default-icon {
    // On Chromium-based browsers the icon doesn't appear to inherit the text color in high
    // contrast mode so we have to set it explicitly. This is a no-op on IE and Firefox.
    color: CanvasText;
  }
}