42

Angular Material - custom form field density

 2 years ago
source link: https://gist.github.com/w3soto/ce321b62f3ad25d8e326ee8e5136a6d2
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

custom form field density ยท GitHub

Instantly share code, notes, and snippets.

Angular Material - custom form field density

$base-input-font-size: 14px;

/* custom density */ mat-form-field[dense] { font-size: 10px; .mat-select, .mat-input-element, .mat-form-field-label mat-label { font-size: $base-input-font-size; } .mat-icon { font-size: calc($base-input-font-size * 1.5); // original: 150% } .mat-form-field-wrapper { padding-bottom: calc($base-input-font-size * 1.34375); // original: 1.34375em } .mat-form-field-underline { bottom: calc($base-input-font-size * 1.34375); // original: 1.34375em }

&.mat-form-field-appearance-fill { .mat-form-field-infix { padding-top: 0.5em; padding-bottom: 0.5em; } .mat-form-field-flex { padding-top: 0.7em; padding-bottom: 0.05em; } } }

/* fix icons position */ .mat-form-field-flex { align-items: center !important; gap: 0.25em; } .mat-form-field-appearance-fill mat-icon { transform: translateY(-0.125em); }


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK