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

src/material/paginator/paginator.scss
137 строк4 KB
Kristiyan Kostadinov
fix(material/paginator): allow touch target size to be customized
18 авг 2025, 20:24
18 авг 2025, 20:249d48ab3
@use '@angular/cdk';
@use './m3-paginator';
@use '../core/tokens/token-utils';
@use '../core/style/vendor-prefixes';

$padding: 0 8px;
$page-size-margin-right: 8px;

$items-per-page-label-margin: 0 4px;
$selector-margin: 0 4px;

$range-label-margin: 0 32px 0 24px;
$button-icon-size: 28px;

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

.mat-mdc-paginator {
  display: block;

  @include vendor-prefixes.smooth-font();
  color: token-utils.slot(paginator-container-text-color, $fallbacks);
  background-color: token-utils.slot(paginator-container-background-color, $fallbacks);
  font-family: token-utils.slot(paginator-container-text-font, $fallbacks);
  line-height: token-utils.slot(paginator-container-text-line-height, $fallbacks);
  font-size: token-utils.slot(paginator-container-text-size, $fallbacks);
  font-weight: token-utils.slot(paginator-container-text-weight, $fallbacks);
  letter-spacing: token-utils.slot(paginator-container-text-tracking, $fallbacks);

  // Apply custom form-field density for paginator.
  --mat-form-field-container-height: #{
      token-utils.slot(paginator-form-field-container-height, $fallbacks)};
  --mat-form-field-container-vertical-padding: #{
      token-utils.slot(paginator-form-field-container-vertical-padding, $fallbacks)};

  .mat-mdc-select-value {
    font-size: #{token-utils.slot(paginator-select-trigger-text-size, $fallbacks)};
  }

  // This element reserves space for hints and error messages.
  // Hide it since we know that we won't need it.
  .mat-mdc-form-field-subscript-wrapper {
    display: none;
  }

  .mat-mdc-select {
    // The smaller font size inherited from the paginator throws off the centering of the select
    // inside the form field. This `line-height` helps to center it relative to the other text.
    line-height: 1.5;
  }
}

// Note: this wrapper element is only used to get the flexbox vertical centering to work
// with the `min-height` on IE11. It can be removed if we drop support for IE.
.mat-mdc-paginator-outer-container {
  display: flex;
}

.mat-mdc-paginator-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: $padding;
  flex-wrap: wrap;
  width: 100%;
  min-height: token-utils.slot(paginator-container-size, $fallbacks);
}

.mat-mdc-paginator-page-size {
  display: flex;
  align-items: baseline;
  margin-right: $page-size-margin-right;

  [dir='rtl'] & {
    margin-right: 0;
    margin-left: $page-size-margin-right;
  }
}

.mat-mdc-paginator-page-size-label {
  margin: $items-per-page-label-margin;
}

.mat-mdc-paginator-page-size-select {
  margin: $selector-margin;
  width: token-utils.slot(paginator-page-size-select-width, $fallbacks);
}

.mat-mdc-paginator-range-label {
  margin: $range-label-margin;
}

.mat-mdc-paginator-range-actions {
  display: flex;
  align-items: center;
}

.mat-mdc-paginator-icon {
  display: inline-block;
  width: $button-icon-size;
  fill: token-utils.slot(paginator-enabled-icon-color, $fallbacks);

  .mat-mdc-icon-button[aria-disabled] & {
    fill: token-utils.slot(paginator-disabled-icon-color, $fallbacks);
  }

  [dir='rtl'] & {
    transform: rotate(180deg);
  }
}

@include cdk.high-contrast {
  // The disabled button icon has to be set explicitly since the selector is too specific.
  .mat-mdc-icon-button[aria-disabled] .mat-mdc-paginator-icon,
  .mat-mdc-paginator-icon {
    fill: currentColor;
  }

  .mat-mdc-paginator-range-actions .mat-mdc-icon-button {
    outline: solid 1px;

    &[aria-disabled] {
      color: GrayText;
    }
  }
}

.mat-mdc-paginator-touch-target {
  display: token-utils.slot(paginator-touch-target-display, $fallbacks);
  position: absolute;
  top: 50%;
  left: 50%;
  width: token-utils.slot(paginator-page-size-select-width, $fallbacks);
  height: token-utils.slot(paginator-page-size-select-touch-target-height, $fallbacks);
  background-color: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
}