@@ -5,9 +5,23 @@ $select-option-height: 48px !default;
55$select-option-padding : 16px   !default ;
66$select-container-padding : 16px   !default ;
77$select-container-transition-duration : 350ms   !default ;
8+ $select-value-padding-top : 6px  ;
9+ $select-value-padding-bottom : 4px  ;
810
911$select-max-visible-options : 5  !default ;
1012
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+ 
1125//  Fixes the animations with the floating label when select is inside an input container
1226md-input-container  {
1327  & :not ([md-no-float ]) {
@@ -71,9 +85,18 @@ md-input-container {
7185  }
7286}
7387
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+   }
77100}
78101
79102
@@ -102,7 +125,6 @@ md-input-container.md-input-invalid {
102125
103126md-select  {
104127  display  : flex ;
105-   margin  : 2.5 * $baseline-grid  0  3 * $baseline-grid  +  2  0 ;
106128
107129  & [required ], & .ng-required  {
108130    & .ng-invalid  {
@@ -120,7 +142,12 @@ md-select {
120142    //  to create a dotted line under the input.
121143    background-size  : 4px   1px  ;
122144    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 );
124151  }
125152
126153  & :focus  {
@@ -135,43 +162,33 @@ md-select {
135162    }
136163    & .ng-invalid.ng-touched  {
137164      .md-select-value  {
138-         border-bottom-style  : solid ;
139-         padding-bottom  : 1px  ;
165+         border-bottom  : 2px   solid ;
140166      }
141167    }
142168    & :focus  {
143169      .md-select-value  {
144170        border-bottom-width  : 2px  ;
145171        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 ;
152173      }
153174    }
154175  }
155176}
156177
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- 
164178.md-select-value  {
165179  display  : flex ;
166180  align-items  : center ;
167-   padding  : 2px   2px   1px  ;
181+   padding-top  : $select-value-padding-top ;
182+   padding-bottom  : $select-value-padding-bottom ;
168183  border-bottom-width  : 1px  ;
169184  border-bottom-style  : solid ;
170185  background-color  : rgba (0 ,0 ,0 ,0 );
171186  position  : relative ;
172187  box-sizing  : content-box ;
173-   min-width  : 8  *  $baseline-grid ;
188+   min-width  : 11  *  $baseline-grid ;
174189  min-height  : 26px  ;
190+   margin-bottom  : auto ;
191+   -ms-flex-item-align  : start ; //  workaround for margin-bottom: auto
175192  flex-grow  : 1 ;
176193
177194
@@ -192,7 +209,6 @@ md-input-container.md-input-has-value .md-select-value {
192209    align-items  : flex-end ;
193210    text-align  : end ;
194211    width  : 3  *  $baseline-grid ;
195-     margin  : 0  .5  *  $baseline-grid ;
196212    transform  : translate3d (0 , -2px  , 0 );
197213    font-size  : 1.2rem  ;
198214  }
@@ -202,17 +218,18 @@ md-input-container.md-input-has-value .md-select-value {
202218    content : ' \25BC '  ;
203219    position  : relative ;
204220    top  : 2px  ;
221+     @include  rtl (right , -4px  , auto );
222+     @include  rtl (left , auto , -4px  );
205223    speak  : none ;
206224    font-size  : 16px  ;
207-     transform  : scaleY (0.6  )  scaleX ( 1 );
225+     transform  : scaleY (0.5  );
208226  }
209227
210228  & .md-select-placeholder  {
211229    display  : flex ;
212230    order  : 1 ;
213231    pointer-events  : none ;
214232    -webkit-font-smoothing  : antialiased ;
215-     padding-left  : 2px  ;
216233    z-index  : 1 ;
217234  }
218235}
0 commit comments