mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
mmalerba
102 lines
3.2 KiB
SCSS
102 lines
3.2 KiB
SCSS
@import '../core/style/variables';
|
|
@import '../core/style/vendor-prefixes';
|
|
|
|
|
|
// The Input element proper.
|
|
.mat-input-element {
|
|
// Font needs to be inherited, because by default <input> has a system font.
|
|
font: inherit;
|
|
|
|
// The Material input should match whatever background it is above.
|
|
background: transparent;
|
|
|
|
// If background matches current background then so should the color for proper contrast
|
|
color: currentColor;
|
|
|
|
// By default, <input> has a padding, border, outline and a default width.
|
|
border: none;
|
|
outline: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
|
|
// Prevent textareas from being resized outside the form field.
|
|
max-width: 100%;
|
|
|
|
// Needed to make last line of the textarea line up with the baseline.
|
|
vertical-align: bottom;
|
|
|
|
// User agent stylesheets set the text-align of inputs explicitly to "start". Those can be
|
|
// easily overwritten by targeting the input element using a simple CSS selector, but since
|
|
// the text-align will be applied most of the time on the `mat-form-field` to also align the
|
|
// placeholder, the alignment should be inherited here.
|
|
text-align: inherit;
|
|
|
|
// Undo the red box-shadow glow added by Firefox on invalid inputs.
|
|
// See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid
|
|
&:-moz-ui-invalid {
|
|
box-shadow: none;
|
|
}
|
|
|
|
// Remove IE's default clear and reveal icons.
|
|
&::-ms-clear, &::-ms-reveal {
|
|
display: none;
|
|
}
|
|
|
|
// Fixes an issue on iOS where the following input types will collapse to 1px,
|
|
// if they're empty, because we've overridden their background color.
|
|
// See: https://stackoverflow.com/questions/18381594/input-type-date-appearance-in-safari-on-ios
|
|
&[type='date'],
|
|
&[type='datetime'],
|
|
&[type='datetime-local'],
|
|
&[type='month'],
|
|
&[type='week'],
|
|
&[type='time'] {
|
|
&::after {
|
|
content: ' ';
|
|
white-space: pre;
|
|
width: 1px;
|
|
}
|
|
}
|
|
|
|
@include input-placeholder {
|
|
// Delay the transition until the label has animated about a third of the way through, in
|
|
// order to prevent the placeholder from overlapping for a split second.
|
|
transition: color $swift-ease-out-duration $swift-ease-out-duration / 3
|
|
$swift-ease-out-timing-function;
|
|
}
|
|
|
|
.mat-form-field-hide-placeholder & {
|
|
// Note that we can't use something like visibility: hidden or
|
|
// display: none, because IE ends up preventing the user from
|
|
// focusing the input altogether.
|
|
@include input-placeholder {
|
|
// Needs to be !important, because the placeholder will end up inheriting the
|
|
// input color in IE, if the consumer overrides it with a higher specificity.
|
|
color: transparent !important;
|
|
|
|
// Remove the transition to prevent the placeholder
|
|
// from overlapping when the label comes back down.
|
|
transition: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Prevents IE from always adding a scrollbar by default.
|
|
textarea.mat-input-element {
|
|
// Only allow resizing along the Y axis.
|
|
resize: vertical;
|
|
overflow: auto;
|
|
|
|
&.cdk-textarea-autosize {
|
|
resize: none;
|
|
}
|
|
}
|
|
|
|
textarea.mat-input-element {
|
|
// The 2px padding prevents scrollbars from appearing on Chrome even when they aren't needed.
|
|
// We also add a negative margin to negate the effect of the padding on the layout.
|
|
padding: 2px 0;
|
|
margin: -2px 0;
|
|
}
|