source: trip-planner-front/node_modules/@angular/cdk/text-field/_index.scss@ e29cc2e

Last change on this file since e29cc2e was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 3.8 KB
Line 
1// Structural styles for the autosize text fields.
2@mixin text-field-autosize() {
3 // Remove the resize handle on autosizing textareas, because whatever height
4 // the user resized to will be overwritten once they start typing again.
5 textarea.cdk-textarea-autosize {
6 resize: none;
7 }
8
9 // This class is temporarily applied to the textarea when it is being measured. It is immediately
10 // removed when measuring is complete. We use `!important` rules here to make sure user-specified
11 // rules do not interfere with the measurement.
12 textarea.cdk-textarea-autosize-measuring {
13 @include _autosize-measuring-base;
14 height: auto !important;
15 overflow: hidden !important;
16 }
17
18 // Similar to the `cdk-textarea-autosize-measuring` class, but only applied on Firefox. We need
19 // to use this class, because Firefox has a bug where changing the `overflow` breaks the user's
20 // ability to undo/redo what they were typing (see #16629). This class is only scoped to Firefox,
21 // because the measurements there don't seem to be affected by the `height: 0`, whereas on other
22 // browsers they are, e.g. Chrome detects longer text and IE does't resize back to normal.
23 // Identical issue report: https://bugzilla.mozilla.org/show_bug.cgi?id=448784
24 textarea.cdk-textarea-autosize-measuring-firefox {
25 @include _autosize-measuring-base;
26 height: 0 !important;
27 }
28}
29
30// Core styles that enable monitoring autofill state of text fields.
31@mixin text-field-autofill() {
32 // Keyframes that apply no styles, but allow us to monitor when an text field becomes autofilled
33 // by watching for the animation events that are fired when they start. Note: the /*!*/ comment is
34 // needed to prevent LibSass from stripping the keyframes out.
35 // Based on: https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7
36 @keyframes cdk-text-field-autofill-start {/*!*/}
37 @keyframes cdk-text-field-autofill-end {/*!*/}
38
39 .cdk-text-field-autofill-monitored:-webkit-autofill {
40 // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire.
41 animation: cdk-text-field-autofill-start 0s 1ms;
42 }
43
44 .cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
45 // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire.
46 animation: cdk-text-field-autofill-end 0s 1ms;
47 }
48}
49
50@mixin _autosize-measuring-base {
51 // Having 2px top and bottom padding seems to fix a bug where Chrome gets an incorrect
52 // measurement. We just have to account for it later and subtract it off the final result.
53 padding: 2px 0 !important;
54 box-sizing: content-box !important;
55}
56
57// Used to generate UIDs for keyframes used to change the text field autofill styles.
58$autofill-color-frame-count: 0;
59
60// Mixin used to apply custom background and foreground colors to an autofilled text field.
61// Based on: https://stackoverflow.com/questions/2781549/
62// removing-input-background-colour-for-chrome-autocomplete#answer-37432260
63@mixin text-field-autofill-color($background, $foreground:'') {
64 @keyframes cdk-text-field-autofill-color-#{$autofill-color-frame-count} {
65 to {
66 background: $background;
67 @if $foreground != '' { color: $foreground; }
68 }
69 }
70
71 &:-webkit-autofill {
72 animation: cdk-text-field-autofill-color-#{$autofill-color-frame-count} both;
73 }
74
75 &.cdk-text-field-autofill-monitored:-webkit-autofill {
76 // Since Chrome 80 we need a 1ms delay for cdk-text-field-autofill-start, or the animationstart
77 // event won't fire.
78 animation: cdk-text-field-autofill-start 0s 1ms,
79 cdk-text-field-autofill-color-#{$autofill-color-frame-count} both;
80 }
81
82 $autofill-color-frame-count: $autofill-color-frame-count + 1 !global;
83}
84
85// @deprecated Use `autosize` and `autofill` instead.
86@mixin text-field {
87 @include text-field-autosize();
88 @include text-field-autofill();
89}
Note: See TracBrowser for help on using the repository browser.