Last active
July 21, 2024 13:45
-
-
Save e-oz/7e8fd09220049472da7abe0cd7542000 to your computer and use it in GitHub Desktop.
Replace `px` with `rem` in Angular Material CSS variables
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root, body { | |
| --mdc-linear-progress-active-indicator-height: 0.25rem; | |
| --mdc-linear-progress-track-height: 0.25rem; | |
| --mdc-plain-tooltip-container-shape: 0.25rem; | |
| --mdc-filled-text-field-focus-active-indicator-height: 0.125rem; | |
| --mdc-filled-text-field-container-shape: 0.25rem; | |
| --mdc-outlined-text-field-container-shape: 0.25rem; | |
| --mat-form-field-container-height: 3.5rem; | |
| --mat-form-field-container-vertical-padding: 1rem; | |
| --mat-form-field-filled-with-label-container-padding-top: 1.5rem; | |
| --mat-form-field-filled-with-label-container-padding-bottom: 0.5rem; | |
| --mat-select-arrow-transform: translateY(-0.5rem); | |
| --mat-autocomplete-container-shape: 0.25rem; | |
| --mdc-dialog-container-shape: 1.75rem; | |
| --mat-dialog-container-max-width: 35rem; | |
| --mat-dialog-container-small-max-width: calc(100vw - 2rem); | |
| --mat-dialog-container-min-width: 17.5rem; | |
| --mat-dialog-actions-padding: 1rem 1.5rem; | |
| --mat-dialog-content-padding: 1.25rem 1.5rem; | |
| --mat-dialog-with-actions-content-padding: 1.25rem 1.5rem 0; | |
| --mat-dialog-headline-padding: 0.375rem 1.5rem 0.8125rem; | |
| --mdc-chip-container-height: 2rem; | |
| --mdc-chip-container-shape-radius: 0.5rem; | |
| --mdc-chip-with-avatar-avatar-size: 1.5rem; | |
| --mdc-chip-with-icon-icon-size: 1.125rem; | |
| --mdc-switch-selected-icon-size: 1rem; | |
| --mdc-switch-track-height: 2rem; | |
| --mdc-switch-track-width: 3.25rem; | |
| --mdc-switch-unselected-icon-size: 1rem; | |
| --mdc-switch-state-layer-size: 2.5rem; | |
| --mat-switch-unselected-handle-size: 1rem; | |
| --mat-switch-selected-handle-size: 1.5rem; | |
| --mat-switch-pressed-handle-size: 1.75rem; | |
| --mat-switch-with-icon-handle-size: 1.5rem; | |
| --mat-switch-selected-handle-horizontal-margin: 0 1.5rem; | |
| --mat-switch-selected-with-icon-handle-horizontal-margin: 0 1.5rem; | |
| --mat-switch-selected-pressed-handle-horizontal-margin: 0 1.375rem; | |
| --mat-switch-unselected-handle-horizontal-margin: 0 0.5rem; | |
| --mat-switch-unselected-with-icon-handle-horizontal-margin: 0 0.25rem; | |
| --mat-switch-unselected-pressed-handle-horizontal-margin: 0 0.125rem; | |
| --mat-switch-track-outline-width: 0.125rem; | |
| --mat-switch-selected-track-outline-width: 0.125rem; | |
| --mat-switch-disabled-unselected-track-outline-width: 0.125rem; | |
| --mdc-radio-state-layer-size: 2.5rem; | |
| --mdc-slider-active-track-height: 0.25rem; | |
| --mdc-slider-handle-height: 1.25rem; | |
| --mdc-slider-handle-width: 1.25rem; | |
| --mdc-slider-inactive-track-height: 0.25rem; | |
| --mdc-slider-with-tick-marks-container-size: 0.125rem; | |
| --mat-slider-value-indicator-width: 1.75rem; | |
| --mat-slider-value-indicator-height: 1.75rem; | |
| --mat-menu-container-shape: 0.25rem; | |
| --mat-menu-divider-bottom-spacing: 0.5rem; | |
| --mat-menu-divider-top-spacing: 0.5rem; | |
| --mat-menu-item-spacing: 0.75rem; | |
| --mat-menu-item-icon-size: 1.5rem; | |
| --mat-menu-item-leading-spacing: 0.75rem; | |
| --mat-menu-item-trailing-spacing: 0.75rem; | |
| --mat-menu-item-with-icon-leading-spacing: 0.75rem; | |
| --mat-menu-item-with-icon-trailing-spacing: 0.75rem; | |
| --mdc-list-list-item-one-line-container-height: 3rem; | |
| --mdc-list-list-item-two-line-container-height: 4rem; | |
| --mdc-list-list-item-three-line-container-height: 5.5rem; | |
| --mdc-list-list-item-leading-icon-size: 1.5rem; | |
| --mdc-list-list-item-leading-avatar-size: 2.5rem; | |
| --mdc-list-list-item-trailing-icon-size: 1.5rem; | |
| --mat-list-list-item-leading-icon-start-space: 1rem; | |
| --mat-list-list-item-leading-icon-end-space: 1rem; | |
| --mat-paginator-container-size: 3.5rem; | |
| --mat-paginator-form-field-container-height: 2.5rem; | |
| --mat-paginator-form-field-container-vertical-padding: 0.5rem; | |
| --mdc-secondary-navigation-tab-container-height: 3rem; | |
| --mdc-tab-indicator-active-indicator-height: 0.125rem; | |
| --mdc-checkbox-state-layer-size: 2.5rem; | |
| --mdc-text-button-container-height: 2.5rem; | |
| --mdc-protected-button-container-height: 2.5rem; | |
| --mdc-filled-button-container-height: 2.5rem; | |
| --mdc-outlined-button-container-height: 2.5rem; | |
| --mat-text-button-horizontal-padding: 0.75rem; | |
| --mat-text-button-with-icon-horizontal-padding: 1rem; | |
| --mat-text-button-icon-spacing: 0.5rem; | |
| --mat-text-button-icon-offset: -0.25rem; | |
| --mat-protected-button-horizontal-padding: 1.5rem; | |
| --mat-protected-button-icon-spacing: 0.5rem; | |
| --mat-protected-button-icon-offset: -0.5rem; | |
| --mat-filled-button-horizontal-padding: 1.5rem; | |
| --mat-filled-button-icon-spacing: 0.5rem; | |
| --mat-filled-button-icon-offset: -0.5rem; | |
| --mat-outlined-button-horizontal-padding: 1.5rem; | |
| --mat-outlined-button-icon-spacing: 0.5rem; | |
| --mat-outlined-button-icon-offset: -0.5rem; | |
| --mdc-icon-button-state-layer-size: 2.5rem; | |
| --mdc-icon-button-icon-size: 1.5rem; | |
| --mdc-extended-fab-container-height: 3.5rem; | |
| --mdc-extended-fab-container-shape: 1rem; | |
| --mdc-fab-container-shape: 1rem; | |
| --mdc-fab-small-container-shape: 0.75rem; | |
| --mdc-snackbar-container-shape: 0.25rem; | |
| --mat-table-header-container-height: 3.5rem; | |
| --mat-table-footer-container-height: 3.25rem; | |
| --mat-table-row-item-container-height: 3.25rem; | |
| --mdc-circular-progress-active-indicator-width: 0.25rem; | |
| --mdc-circular-progress-size: 3rem; | |
| --mat-badge-container-size: 1rem; | |
| --mat-badge-small-size-container-size: 0.375rem; | |
| --mat-badge-large-size-container-size: 1rem; | |
| --mat-badge-container-offset: -0.75rem 0; | |
| --mat-badge-small-size-container-offset: -0.375rem 0; | |
| --mat-badge-large-size-container-offset: -0.75rem 0; | |
| --mat-badge-container-overlap-offset: -0.75rem; | |
| --mat-badge-small-size-container-overlap-offset: -0.375rem; | |
| --mat-badge-large-size-container-overlap-offset: -0.75rem; | |
| --mat-badge-container-padding: 0 0.25rem; | |
| --mat-badge-large-size-container-padding: 0 0.25rem; | |
| --mat-bottom-sheet-container-shape: 1.75rem; | |
| --mat-standard-button-toggle-height: 2.5rem; | |
| --mat-datepicker-calendar-container-shape: 1rem; | |
| --mat-datepicker-calendar-container-touch-shape: 1.75rem; | |
| --mat-expansion-header-collapsed-state-height: 3rem; | |
| --mat-expansion-header-expanded-state-height: 4rem; | |
| --mat-expansion-container-shape: 0.75rem; | |
| --mat-sidenav-container-shape: 1rem; | |
| --mat-sidenav-container-width: 22.5rem; | |
| --mat-stepper-header-height: 4.5rem; | |
| --mat-stepper-header-focus-state-layer-shape: 0.75rem; | |
| --mat-stepper-header-hover-state-layer-shape: 0.75rem; | |
| --mat-toolbar-standard-height: 4rem; | |
| --mat-toolbar-mobile-height: 3.5rem; | |
| --mat-tree-node-min-height: 3rem; | |
| } | |
| button[mat-flat-button], button[mat-button], button[mat-raised-button], button[mat-stroked-button] { | |
| height: 3rem; | |
| font-size: 1rem; | |
| } | |
| button[mat-icon-button] { | |
| height: 2.5rem; | |
| } | |
| mat-icon.mat-icon { | |
| width: 1.5rem; | |
| height: 1.5rem; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Test your UI thoroughly before pushing to prod!
Set
font-sizeofhtmlelement to something bigger than16pxand check if everything scaled well.It is not production ready!
pxvalues that are not replaced: