_mdc-text-field-textarea-overrides.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536
  1. // MDCs default textarea styles cannot be used because they only apply if a special
  2. // class is applied to the "mdc-text-field" wrapper. Since we cannot know whether the
  3. // registered form-field control is a textarea and MDC by default does not have styles
  4. // for textareas in the fill appearance, we add our own minimal textarea styles
  5. // which are scoped to the actual textarea element (i.e. not require a class in the
  6. // text-field wrapper) and integrate better with the any configured appearance.
  7. // Mixin that can be included to override the default MDC text-field styles
  8. // to properly support textareas.
  9. @mixin private-text-field-textarea-overrides() {
  10. // Ensures that textarea elements inside of the form-field have proper vertical spacing
  11. // to account for the floating label. Also ensures that there is no vertical text overflow.
  12. // **Note**: Before changing this selector, make sure the `cdk-textarea-autosize` class is
  13. // still able to override the `resize` property to `none`.
  14. .mat-mdc-form-field-textarea-control {
  15. // Set the vertical alignment for textareas inside form fields to be the middle. This
  16. // ensures that textareas do not stretch the infix container vertically without having
  17. // multiple rows of text. See: https://github.com/angular/components/pull/22089.
  18. vertical-align: middle;
  19. // Textareas by default also allow users to resize the textarea horizontally. This
  20. // causes the textarea to overflow the form-field. We only allow vertical resizing.
  21. resize: vertical;
  22. box-sizing: border-box;
  23. height: auto;
  24. // Using padding for textareas causes a bad user experience because the text outside
  25. // of the text box will overflow vertically. Also, the vertical spacing for controls
  26. // is set through the infix container to allow for arbitrary form-field controls.
  27. margin: 0;
  28. padding: 0;
  29. border: none;
  30. // By default IE always renders scrollbars on textarea.
  31. // This brings it in line with other browsers.
  32. overflow: auto;
  33. }
  34. }