liquid_feedback_frontend
view style/mdl/textfield/_textfield.scss @ 1597:631f6311a9eb
Updated german translation
| author | bsw |
|---|---|
| date | Sun Jan 31 20:37:22 2021 +0100 (2021-01-31) |
| parents | 32cc544d5a5b |
| children |
line source
1 /**
2 * Copyright 2015 Google Inc. All Rights Reserved.
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
17 @import "../variables";
18 @import "../mixins";
20 // The container for the whole component.
21 .mdl-textfield {
22 position: relative;
23 font-size: $input-text-font-size;
24 display: inline-block;
25 box-sizing: border-box;
26 width: 300px;
27 max-width: 100%;
28 margin: 0;
29 padding: $input-text-vertical-spacing 0;
31 // Align buttons, if used.
32 & .mdl-button {
33 position: absolute;
34 bottom: $input-text-vertical-spacing;
35 }
36 }
38 // Optional class to align right.
39 .mdl-textfield--align-right {
40 text-align: right;
41 }
43 // Optional class to display at full width.
44 .mdl-textfield--full-width {
45 width: 100%;
46 }
48 // Optional class to make the text field expandable.
49 .mdl-textfield--expandable {
50 min-width: $input-text-button-size;
51 width: auto;
52 min-height: $input-text-button-size;
54 // Align icon button
55 .mdl-button--icon {
56 top: $input-text-expandable-icon-top;
57 }
58 }
60 // Styling for the input element.
61 .mdl-textfield__input {
62 border: none;
63 border-bottom: 1px solid $input-text-bottom-border-color;
64 display: block;
65 font-size: $input-text-font-size;
66 font-family: $performance_font;
67 margin: 0;
68 padding: $input-text-padding 0;
69 width: $input-text-width;
70 background: none;
71 text-align: left;
72 color: inherit;
74 &[type="number"] {
75 -moz-appearance: textfield;
76 }
78 &[type="number"]::-webkit-inner-spin-button,
79 &[type="number"]::-webkit-outer-spin-button {
80 -webkit-appearance: none;
81 margin: 0;
82 }
84 .mdl-textfield.is-focused & {
85 outline: none;
86 }
88 .mdl-textfield.is-invalid & {
89 border-color: $input-text-error-color;
90 box-shadow: none;
91 }
93 fieldset[disabled] .mdl-textfield &,
94 .mdl-textfield.is-disabled & {
95 background-color: transparent;
96 border-bottom: 1px dotted $input-text-disabled-color;
97 color: $input-text-disabled-text-color;
98 }
99 }
101 .mdl-textfield textarea.mdl-textfield__input {
102 display: block;
103 }
105 // Styling for the label / floating label.
106 .mdl-textfield__label {
107 bottom: 0;
108 color: $input-text-label-color;
109 font-size: $input-text-font-size;
110 left: 0;
111 right: 0;
112 pointer-events: none;
113 position: absolute;
114 display: block;
115 top: ($input-text-padding + $input-text-vertical-spacing);
116 width: 100%;
117 overflow: hidden;
118 white-space: nowrap;
119 text-align: left;
121 .mdl-textfield.is-dirty &,
122 .mdl-textfield.has-placeholder & {
123 visibility: hidden;
124 }
126 // Floating Label
127 .mdl-textfield--floating-label & {
128 @include material-animation-default();
129 }
131 .mdl-textfield--floating-label.has-placeholder & {
132 transition: none;
133 }
135 fieldset[disabled] .mdl-textfield &,
136 .mdl-textfield.is-disabled.is-disabled & {
137 color: $input-text-disabled-text-color;
138 }
140 .mdl-textfield--floating-label.is-focused &,
141 .mdl-textfield--floating-label.is-dirty &,
142 .mdl-textfield--floating-label.has-placeholder & {
143 color: $input-text-highlight-color;
144 font-size : $input-text-floating-label-fontsize;
145 top: $input-text-vertical-spacing - ($input-text-floating-label-fontsize + $input-text-padding);
146 visibility: visible;
147 }
149 .mdl-textfield--floating-label.is-focused .mdl-textfield__expandable-holder &,
150 .mdl-textfield--floating-label.is-dirty .mdl-textfield__expandable-holder &,
151 .mdl-textfield--floating-label.has-placeholder .mdl-textfield__expandable-holder & {
152 top: -($input-text-floating-label-fontsize + $input-text-padding);
153 }
155 .mdl-textfield--floating-label.is-invalid & {
156 color: $input-text-error-color;
157 font-size: $input-text-floating-label-fontsize;
158 }
160 // The after label is the colored underline for the TextField.
161 &:after {
162 background-color: $input-text-highlight-color;
163 bottom: $input-text-vertical-spacing;
164 content: '';
165 height: 2px;
166 left: 45%;
167 position: absolute;
168 @include material-animation-default();
169 visibility: hidden;
170 width: 10px;
171 }
173 .mdl-textfield.is-focused &:after {
174 left: 0;
175 visibility: visible;
176 width: 100%;
177 }
179 .mdl-textfield.is-invalid &:after {
180 background-color: $input-text-error-color;
181 }
182 }
184 // TextField Error.
185 .mdl-textfield__error {
186 color: $input-text-error-color;
187 position: absolute;
188 font-size: $input-text-floating-label-fontsize;
189 margin-top: 3px;
190 visibility: hidden;
191 display: block;
193 .mdl-textfield.is-invalid & {
194 visibility: visible;
195 }
196 }
198 // Expandable Holder.
199 .mdl-textfield__expandable-holder {
200 display: inline-block;
201 position: relative;
202 margin-left: $input-text-button-size;
204 @include material-animation-default();
205 display: inline-block;
207 // Safari (possibly others) need to be convinced that this field is actually
208 // visible, otherwise it cannot be tabbed to nor focused via a <label>.
209 // TODO: In some cases (Retina displays), this is big enough to render the
210 // inner element :(
211 max-width: 0.1px;
213 .mdl-textfield.is-focused &, .mdl-textfield.is-dirty & {
214 // This is an unfortunate hack. Animating between widths in percent (%)
215 // in many browsers (Chrome, Firefox) only animates the inner visual style
216 // of the input - the outer bounding box still 'jumps'.
217 // Thus assume a sensible maximum, and animate to/from that value.
218 max-width: 600px;
219 }
220 .mdl-textfield__label:after {
221 bottom: 0;
222 }
223 }