_user-agent-overrides.scss 845 B

123456789101112131415161718192021222324
  1. // Mixin that resets user agent styles to make the form field behave consistently.
  2. @mixin private-form-field-user-agent-overrides() {
  3. .mat-mdc-form-field-input-control {
  4. // Due to the native input masking these inputs can be slightly taller than
  5. // the plain text inputs. We normalize it by resetting the line height.
  6. &[type='date'],
  7. &[type='datetime'],
  8. &[type='datetime-local'],
  9. &[type='month'],
  10. &[type='week'],
  11. &[type='time'] {
  12. line-height: 1;
  13. }
  14. // Native datetime inputs have an element in the shadow DOM that makes them taller than
  15. // other inputs. These changes reset the user agent styles to make them consistent.
  16. // via https://8yd.no/article/date-input-height-in-safari
  17. &::-webkit-datetime-edit {
  18. line-height: 1;
  19. padding: 0;
  20. margin-bottom: -2px;
  21. }
  22. }
  23. }