<commit_before>@import '../core/style/elevation';


$md-datepicker-calendar-padding: 8px;
$md-datepicker-non-touch-calendar-cell-size: 40px;
$md-datepicker-non-touch-calendar-width:
    $md-datepicker-non-touch-calendar-cell-size * 7 + $md-datepicker-calendar-padding * 2;
// Based on the natural height of the calendar in a month with 6 rows of dates
// (largest the calendar will get).
$md-datepicker-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.
$md-datepicker-touch-width: 64vmin;
$md-datepicker-touch-height: 80vmin;
$md-datepicker-touch-min-width: 250px;
$md-datepicker-touch-min-height: 312px;
$md-datepicker-touch-max-width: 750px;
$md-datepicker-touch-max-height: 788px;


.mat-datepicker-content {
  @include mat-elevation(8);

  display: block;
}

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

.mat-datepicker-content-touch {
  @include mat-elevation(0);

  display: block;
  // make sure the dialog scrolls rather than being cropped on ludicrously small screens
  max-height: 80vh;
  overflow: auto;

  // TODO(mmalerba): hack to offset the padding of the dialog. Can be removed when we switch away
  // from using dialog.
  margin: -24px;

  .mat-calendar {
    width: $md-datepicker-touch-width;
    height: $md-datepicker-touch-height;
    min-width: $md-datepicker-touch-min-width;
    min-height: $md-datepicker-touch-min-height;
    max-width: $md-datepicker-touch-max-width;
    max-height: $md-datepicker-touch-max-height;
  }
}<commit_msg>fix(datepicker): make touch UI calendar use 80% of width in portrait (#5943)<commit_after>@import '../core/style/elevation';


$md-datepicker-calendar-padding: 8px;
$md-datepicker-non-touch-calendar-cell-size: 40px;
$md-datepicker-non-touch-calendar-width:
    $md-datepicker-non-touch-calendar-cell-size * 7 + $md-datepicker-calendar-padding * 2;
// Based on the natural height of the calendar in a month with 6 rows of dates
// (largest the calendar will get).
$md-datepicker-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.
$md-datepicker-touch-landscape-width: 64vh;
$md-datepicker-touch-landscape-height: 80vh;
$md-datepicker-touch-portrait-width: 80vw;
$md-datepicker-touch-portrait-height: 100vw;
$md-datepicker-touch-min-width: 250px;
$md-datepicker-touch-min-height: 312px;
$md-datepicker-touch-max-width: 750px;
$md-datepicker-touch-max-height: 788px;


.mat-datepicker-content {
  @include mat-elevation(8);

  display: block;
}

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

.mat-datepicker-content-touch {
  @include mat-elevation(0);

  display: block;
  // make sure the dialog scrolls rather than being cropped on ludicrously small screens
  max-height: 80vh;
  overflow: auto;

  // TODO(mmalerba): hack to offset the padding of the dialog. Can be removed when we switch away
  // from using dialog.
  margin: -24px;

  .mat-calendar {
    min-width: $md-datepicker-touch-min-width;
    min-height: $md-datepicker-touch-min-height;
    max-width: $md-datepicker-touch-max-width;
    max-height: $md-datepicker-touch-max-height;
  }
}

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

@media all and (orientation: portrait) {
  .mat-datepicker-content-touch .mat-calendar {
    width: $md-datepicker-touch-portrait-width;
    height: $md-datepicker-touch-portrait-height;
  }
}
{'fraction_non_alphanumeric': 0.12351054078826765, 'fraction_numerical': 0.016727772685609533, 'mean_word_length': 3.9266365688487586, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4429779', 'n_tokens_mistral': 1500, 'n_tokens_neox': 1352, 'n_words': 387}