fix(select): fix select styling on windows mode

closes #5787
ionic-team · Mar 14, 2016 · a4fc96d · a4fc96d
1 parent 8fff76e
commit a4fc96d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 18 deletions.
diff --git a/ionic/components/input/input.wp.scss b/ionic/components/input/input.wp.scss
@@ -64,22 +64,12 @@ ion-input.ng-invalid.ng-touched .text-input {
 // --------------------------------------------------
 
 .item-label-stacked .text-input,
-.item-label-floating .text-input {
-  margin-top: 8px;
-  margin-bottom: 8px;
-  margin-left: 0;
-}
-
+.item-label-floating .text-input,
 .item-label-stacked ion-select,
 .item-label-floating ion-select {
   margin-top: 8px;
   margin-bottom: 8px;
-  padding-top: 0;
-  padding-bottom: 0;
-
-  .select-icon {
-    margin-top: 5px;
-  }
+  margin-left: 0;
 }
 
 .item-label-floating .text-input.cloned-input {

diff --git a/ionic/components/label/label.scss b/ionic/components/label/label.scss
@@ -59,7 +59,8 @@ ion-label[floating] {
 
 .item-label-stacked ion-select,
 .item-label-floating ion-select {
-  width: 100%;
+  align-self: stretch;
+
   max-width: 100%;
 }
 

diff --git a/ionic/components/select/select.wp.scss b/ionic/components/select/select.wp.scss
@@ -4,10 +4,13 @@
 // Windows Select
 // --------------------------------------------------
 
-$select-wp-padding-top:         ($item-wp-padding-top / 2) !default;
-$select-wp-padding-right:       ($item-wp-padding-right / 2) !default;
-$select-wp-padding-bottom:      ($item-wp-padding-bottom / 2) !default;
-$select-wp-padding-left:        ($item-wp-padding-left / 2) !default;
+$select-wp-padding-vertical:    0 !default;
+$select-wp-padding-horizontal:  ($item-wp-padding-right / 2) !default;
+
+$select-wp-margin-top:          $item-wp-padding-top !default;
+$select-wp-margin-right:        ($item-wp-padding-right / 2) !default;
+$select-wp-margin-bottom:       $item-wp-padding-bottom !default;
+$select-wp-margin-left:         ($item-wp-padding-left / 2) !default;
 
 $select-wp-border-width:        2px !default;
 $select-wp-border-color:        $input-wp-border-color !default;
@@ -18,7 +21,12 @@ $select-wp-icon-color:          $select-wp-border-color !default;
 
 
 ion-select {
-  padding: $select-wp-padding-top $select-wp-padding-right $select-wp-padding-bottom $select-wp-padding-left;
+  flex: 1;
+
+  margin: $select-wp-margin-top $select-wp-margin-right $select-wp-margin-bottom $select-wp-margin-left;
+  padding: $select-wp-padding-vertical $select-wp-padding-horizontal;
+
+  max-width: 100%;
 
   border: $select-wp-border-width solid $select-wp-border-color;
   line-height: 3rem;
@@ -31,6 +39,8 @@ ion-select {
 .select-icon {
   position: relative;
 
+  align-self: center;
+
   width: $select-wp-icon-width;
   height: $select-wp-icon-width;
 }