@@ -5,9 +5,23 @@ $select-option-height: 48px !default;
5
5
$select-option-padding : 16px !default ;
6
6
$select-container-padding : 16px !default ;
7
7
$select-container-transition-duration : 350ms !default ;
8
+ $select-value-padding-top : 6px ;
9
+ $select-value-padding-bottom : 4px ;
8
10
9
11
$select-max-visible-options : 5 !default ;
10
12
13
+ // from input.scss
14
+ $input-container-margin-top : 18px !default ;
15
+ $input-container-padding-top : 2px !default ;
16
+ $input-padding-top : 2px !default ;
17
+ $input-padding-bottom : 1px !default ;
18
+
19
+ $input-alignment : ($input-padding-top + $input-padding-bottom )
20
+ - ($select-value-padding-top + $select-value-padding-bottom );
21
+ $md-inline-alignment : ($input-container-margin-top + $input-container-padding-top )
22
+ + ($input-padding-top + $input-padding-bottom )
23
+ - ($select-value-padding-top + $select-value-padding-bottom );
24
+
11
25
// Fixes the animations with the floating label when select is inside an input container
12
26
md-input-container {
13
27
& :not ([md-no-float ]) {
@@ -71,9 +85,18 @@ md-input-container {
71
85
}
72
86
}
73
87
74
- md-input-container > md-select {
75
- margin : 0 ;
76
- order : 2 ;
88
+ .md-inline-form md-select {
89
+ margin-top : $md-inline-alignment ;
90
+ }
91
+
92
+ md-input-container {
93
+ > md-select ,
94
+ .md-inline-form & > md-select {
95
+ margin-top : $input-alignment ;
96
+ }
97
+ > md-select {
98
+ order : 2 ;
99
+ }
77
100
}
78
101
79
102
@@ -102,7 +125,6 @@ md-input-container.md-input-invalid {
102
125
103
126
md-select {
104
127
display : flex ;
105
- margin : 2.5 * $baseline-grid 0 3 * $baseline-grid + 2 0 ;
106
128
107
129
& [required ], & .ng-required {
108
130
& .ng-invalid {
@@ -120,7 +142,12 @@ md-select {
120
142
// to create a dotted line under the input.
121
143
background-size : 4px 1px ;
122
144
background-repeat : repeat-x ;
123
- margin-bottom : -1px ; // Shift downward so dotted line is positioned the same as other bottom borders
145
+ // Add to padding-bottom to keep dotted line aligned with other bottom borders
146
+ // Sub from padding-top to keep height consistent
147
+ // Translate text 1px up to keep in alignment
148
+ padding-bottom : $select-value-padding-bottom + 1 ;
149
+ padding-top : $select-value-padding-top - 1 ;
150
+ transform : translate3d (0 , 1px , 0 );
124
151
}
125
152
126
153
& :focus {
@@ -135,43 +162,33 @@ md-select {
135
162
}
136
163
& .ng-invalid.ng-touched {
137
164
.md-select-value {
138
- border-bottom-style : solid ;
139
- padding-bottom : 1px ;
165
+ border-bottom : 2px solid ;
140
166
}
141
167
}
142
168
& :focus {
143
169
.md-select-value {
144
170
border-bottom-width : 2px ;
145
171
border-bottom-style : solid ;
146
- padding-bottom : 0 ;
147
- }
148
- & .ng-invalid.ng-touched {
149
- .md-select-value {
150
- padding-bottom : 0 ;
151
- }
172
+ padding-bottom : $select-value-padding-bottom - 1 ;
152
173
}
153
174
}
154
175
}
155
176
}
156
177
157
- // Fix value by 1px to align with standard text inputs (and spec)
158
- md-input-container .md-input-has-value .md-select-value {
159
- > span :not (.md-select-icon ) {
160
- transform : translate3d (0 , 1px , 0 );
161
- }
162
- }
163
-
164
178
.md-select-value {
165
179
display : flex ;
166
180
align-items : center ;
167
- padding : 2px 2px 1px ;
181
+ padding-top : $select-value-padding-top ;
182
+ padding-bottom : $select-value-padding-bottom ;
168
183
border-bottom-width : 1px ;
169
184
border-bottom-style : solid ;
170
185
background-color : rgba (0 ,0 ,0 ,0 );
171
186
position : relative ;
172
187
box-sizing : content-box ;
173
- min-width : 8 * $baseline-grid ;
188
+ min-width : 11 * $baseline-grid ;
174
189
min-height : 26px ;
190
+ margin-bottom : auto ;
191
+ -ms-flex-item-align : start ; // workaround for margin-bottom: auto
175
192
flex-grow : 1 ;
176
193
177
194
@@ -192,7 +209,6 @@ md-input-container.md-input-has-value .md-select-value {
192
209
align-items : flex-end ;
193
210
text-align : end ;
194
211
width : 3 * $baseline-grid ;
195
- margin : 0 .5 * $baseline-grid ;
196
212
transform : translate3d (0 , -2px , 0 );
197
213
font-size : 1.2rem ;
198
214
}
@@ -202,17 +218,18 @@ md-input-container.md-input-has-value .md-select-value {
202
218
content : ' \25BC ' ;
203
219
position : relative ;
204
220
top : 2px ;
221
+ @include rtl (right , -4px , auto );
222
+ @include rtl (left , auto , -4px );
205
223
speak : none ;
206
224
font-size : 16px ;
207
- transform : scaleY (0.6 ) scaleX ( 1 );
225
+ transform : scaleY (0.5 );
208
226
}
209
227
210
228
& .md-select-placeholder {
211
229
display : flex ;
212
230
order : 1 ;
213
231
pointer-events : none ;
214
232
-webkit-font-smoothing : antialiased ;
215
- padding-left : 2px ;
216
233
z-index : 1 ;
217
234
}
218
235
}
0 commit comments