src/material/datepicker/datepicker-content.scss - main - githubmirror/components

src/material/datepicker/datepicker-content.scss
157 строк4 KB
Kristiyan Kostadinov
fix(material/datepicker): actions overflowing at some screen sizes with touch UI (#33645)
06 авг 2026, 13:30
06 авг 2026, 13:30c71383f
@use './m3-datepicker';
@use '../core/tokens/token-utils';

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

$calendar-padding: 8px;
$non-touch-calendar-cell-size: 40px;
$non-touch-calendar-width:
    $non-touch-calendar-cell-size * 7 + $calendar-padding * 2;
// Based on the natural height of the calendar in a month with 6 rows of dates
// (largest the calendar will get).
$non-touch-calendar-height: 354px;

// Ideally the calendar would have a constant aspect ratio, no matter its size, and we would base
// these measurements off the aspect ratio. Unfortunately, the aspect ratio does change a little as
// the calendar grows, since some of the elements have pixel-based sizes. These numbers have been
// chosen to minimize extra whitespace at larger sizes, while still ensuring we won't need
// scrollbars at smaller sizes.
$touch-landscape-width: 64vh;
$touch-landscape-height: 80vh;
$touch-portrait-width: 80vw;
$touch-portrait-height: 100vw;
$touch-min-width: 250px;
$touch-max-width: 750px;
$touch-max-height: 788px;

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

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

@keyframes _mat-datepicker-content-dialog-enter {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

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

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

  to {
    opacity: 0;
  }
}

.mat-datepicker-content {
  display: block;
  background-color: token-utils.slot(datepicker-calendar-container-background-color, $fallbacks);
  color: token-utils.slot(datepicker-calendar-container-text-color, $fallbacks);
  box-shadow: token-utils.slot(datepicker-calendar-container-elevation-shadow, $fallbacks);
  border-radius: token-utils.slot(datepicker-calendar-container-shape, $fallbacks);

  &.mat-datepicker-content-animations-enabled {
    animation: _mat-datepicker-content-dropdown-enter 120ms cubic-bezier(0, 0, 0.2, 1);
  }

  .mat-calendar {
    width: $non-touch-calendar-width;
    height: $non-touch-calendar-height;
  }

  // Override mat-calendar's height when custom header is provided
  // Height should be auto, when the custom header is provided.
  // This will prevent the content from overflowing.
  .mat-datepicker-content-container-with-custom-header .mat-calendar {
    height: auto;
  }

  // Note that this selector doesn't technically have to be nested, but we want the slightly
  // higher specificity, or it can be overridden based on the CSS insertion order (see #21043).
  .mat-datepicker-close-button {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;

    // Hide the button while the overlay is animating, because it's rendered
    // outside of it and it seems to cause scrollbars in some cases (see #21493).
    .mat-datepicker-content-animating & {
      display: none;
    }
  }
}

.mat-datepicker-content-container {
  display: flex;
  flex-direction: column;

  // Ensures that `mat-datepicker-actions` is pushed to the bottom of the popup.
  justify-content: space-between;
}

.mat-datepicker-content-touch {
  display: block;
  max-height: 80vh;
  box-shadow: token-utils.slot(datepicker-calendar-container-touch-elevation-shadow, $fallbacks);
  border-radius: token-utils.slot(datepicker-calendar-container-touch-shape, $fallbacks);

  // Allows for the screen reader close button to be seen in touch UI mode.
  position: relative;

  // Prevents the content from jumping around on Windows while the animation is running.
  overflow: visible;

  // Prevent the content from shrinking to a point where it doesn't fit all the dates anymore.
  // stylelint-disable material/no-prefixes
  min-height: fit-content;

  &.mat-datepicker-content-animations-enabled {
    animation: _mat-datepicker-content-dialog-enter 150ms cubic-bezier(0, 0, 0.2, 1);
  }

  .mat-datepicker-content-container {
    min-height: fit-content;
    max-height: $touch-max-height;
    min-width: $touch-min-width;
    max-width: $touch-max-width;
  }

  .mat-calendar {
    width: 100%;
    height: auto;
  }
}

.mat-datepicker-content-exit.mat-datepicker-content-animations-enabled {
  animation: _mat-datepicker-content-exit 100ms linear;
}

@media all and (orientation: landscape) {
  .mat-datepicker-content-touch .mat-datepicker-content-container {
    width: $touch-landscape-width;
    height: $touch-landscape-height;
  }
}

@media all and (orientation: portrait) {
  .mat-datepicker-content-touch .mat-datepicker-content-container {
    width: $touch-portrait-width;
    height: $touch-portrait-height;
  }
}