fix(select) rework select to match Material Design spec

Set automatic 16px horizontal margin when in row layout Add md-inline-form support Add alignment math to SCSS Support custom margin and padding for md-select
angular · Jul 23, 2016 · dbf1f0c · dbf1f0c
1 parent 0356bed
commit dbf1f0c
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 24 deletions.
diff --git a/src/components/select/select.js b/src/components/select/select.js
@@ -1550,7 +1550,7 @@ function SelectProvider($$interimElementProvider) {
           transformOrigin = '50% 100%';
         }
       } else {
-        left = (targetRect.left + centeredRect.left - centeredRect.paddingLeft) + 2;
+        left = (targetRect.left + centeredRect.left - centeredRect.paddingLeft);
         top = Math.floor(targetRect.top + targetRect.height / 2 - centeredRect.height / 2 -
             centeredRect.top + contentNode.scrollTop) + 2;
 

diff --git a/src/components/select/select.scss b/src/components/select/select.scss
@@ -5,9 +5,23 @@ $select-option-height: 48px !default;
 $select-option-padding: 16px !default;
 $select-container-padding: 16px !default;
 $select-container-transition-duration: 350ms !default;
+$select-value-padding-top: 6px;
+$select-value-padding-bottom: 4px;
 
 $select-max-visible-options: 5 !default;
 
+// from input.scss
+$input-container-margin-top: 18px !default;
+$input-container-padding-top: 2px !default;
+$input-padding-top: 2px !default;
+$input-padding-bottom: 1px !default;
+
+$input-alignment: ($input-padding-top + $input-padding-bottom)
+                   - ($select-value-padding-top + $select-value-padding-bottom);
+$md-inline-alignment: ($input-container-margin-top + $input-container-padding-top)
+                      + ($input-padding-top + $input-padding-bottom)
+                      - ($select-value-padding-top + $select-value-padding-bottom);
+
 // Fixes the animations with the floating label when select is inside an input container
 md-input-container {
   &:not([md-no-float]) {
@@ -72,7 +86,7 @@ md-input-container {
 }
 
 md-input-container > md-select {
-  margin: 0;
+  margin-top: $input-alignment;
   order: 2;
 }
 
@@ -102,7 +116,6 @@ md-input-container.md-input-invalid {
 
 md-select {
   display: flex;
-  margin: 2.5*$baseline-grid 0 3*$baseline-grid + 2 0;
 
   &[required], &.ng-required {
     &.ng-invalid {
@@ -120,7 +133,12 @@ md-select {
     // to create a dotted line under the input.
     background-size: 4px 1px;
     background-repeat: repeat-x;
-    margin-bottom: -1px; // Shift downward so dotted line is positioned the same as other bottom borders
+    // Add to padding-bottom to keep dotted line aligned with other bottom borders
+    // Sub from padding-top to keep height consistent
+    // Translate text 1px up to keep in alignment
+    padding-bottom: $select-value-padding-bottom + 1;
+    padding-top: $select-value-padding-top - 1;
+    transform: translate3d(0, 1px, 0);
   }
 
   &:focus {
@@ -135,43 +153,33 @@ md-select {
     }
     &.ng-invalid.ng-touched {
       .md-select-value {
-        border-bottom-style: solid;
-        padding-bottom: 1px;
+        border-bottom: 2px solid;
       }
     }
     &:focus {
       .md-select-value {
         border-bottom-width: 2px;
         border-bottom-style: solid;
-        padding-bottom: 0;
-      }
-      &.ng-invalid.ng-touched {
-        .md-select-value {
-          padding-bottom: 0;
-        }
+        padding-bottom: $select-value-padding-bottom - 1;
       }
     }
   }
 }
 
-// Fix value by 1px to align with standard text inputs (and spec)
-md-input-container.md-input-has-value .md-select-value {
-  > span:not(.md-select-icon) {
-    transform: translate3d(0, 1px, 0);
-  }
-}
-
 .md-select-value {
   display: flex;
   align-items: center;
-  padding: 2px 2px 1px;
+  padding-top: $select-value-padding-top;
+  padding-bottom: $select-value-padding-bottom;
   border-bottom-width: 1px;
   border-bottom-style: solid;
   background-color: rgba(0,0,0,0);
   position: relative;
   box-sizing: content-box;
-  min-width: 8 * $baseline-grid;
+  min-width: 11 * $baseline-grid;
   min-height: 26px;
+  margin-bottom: auto;
+  -ms-flex-item-align: start; // workaround for margin-bottom: auto
   flex-grow: 1;
 
 
@@ -192,7 +200,6 @@ md-input-container.md-input-has-value .md-select-value {
     align-items: flex-end;
     text-align: end;
     width: 3 * $baseline-grid;
-    margin: 0 .5 * $baseline-grid;
     transform: translate3d(0, -2px, 0);
     font-size: 1.2rem;
   }
@@ -202,17 +209,18 @@ md-input-container.md-input-has-value .md-select-value {
     content: '\25BC';
     position: relative;
     top: 2px;
+    @include rtl(right, -4px, auto);
+    @include rtl(left, auto, -4px);
     speak: none;
     font-size: 16px;
-    transform: scaleY(0.6) scaleX(1);
+    transform: scaleY(0.5);
   }
 
   &.md-select-placeholder {
     display: flex;
     order: 1;
     pointer-events: none;
     -webkit-font-smoothing: antialiased;
-    padding-left: 2px;
     z-index: 1;
   }
 }
@@ -315,3 +323,13 @@ md-select-menu[multiple] {
     }
   }
 }
+
+@include when-layout-row(md-select) {
+  &:not(:last-child), {
+    @include rtl(margin-right, $select-container-padding, 0);
+    @include rtl(margin-left, 0, $select-container-padding);
+  }
+  .md-inline-form & {
+    margin-top: $md-inline-alignment;
+  }
+}
diff --git a/src/core/style/mixins.scss b/src/core/style/mixins.scss
@@ -326,3 +326,47 @@
     }
   }
 }
+
+// Only use when in row layout
+@mixin when-layout-row($element, $parent: '') {
+  @media (max-width: 599px) {
+    #{$parent}.layout-row:not(.layout-xs-column),
+    #{$parent}.layout-xs-row {
+      & > #{$element} { @content; }
+    }
+  }
+  @media (min-width: 600px) and (max-width: 959px) {
+    #{$parent}.layout-row:not(.layout-gt-xs-column),
+    #{$parent}.layout-gt-xs-row,
+    #{$parent}.layout-sm-row {
+      &:not(.layout-sm-column) > #{$element} { @content; }
+    }
+  }
+  @media (min-width: 960px) and (max-width: 1279px) {
+    #{$parent}.layout-row:not(.layout-gt-xs-column):not(.layout-gt-sm-column),
+    #{$parent}.layout-gt-xs-row:not(.layout-gt-sm-column),
+    #{$parent}.layout-gt-sm-row,
+    #{$parent}.layout-md-row {
+      &:not(.layout-md-column) > #{$element} { @content; }
+    }
+  }
+  @media (min-width: 1280px) and (max-width: 1919px) {
+    #{$parent}.layout-row:not(.layout-gt-xs-column):not(.layout-gt-sm-column):not(.layout-gt-md-column),
+    #{$parent}.layout-gt-xs-row:not(.layout-gt-sm-column):not(.layout-gt-md-column),
+    #{$parent}.layout-gt-sm-row:not(.layout-gt-md-column),
+    #{$parent}.layout-gt-md-row,
+    #{$parent}.layout-lg-row {
+      &:not(.layout-lg-column) > #{$element} { @content; }
+    }
+  }
+  @media (min-width: 1920px) {
+    #{$parent}.layout-row:not(.layout-gt-xs-column):not(.layout-gt-sm-column):not(.layout-gt-md-column),
+    #{$parent}.layout-gt-xs-row:not(.layout-gt-sm-column):not(.layout-gt-md-column),
+    #{$parent}.layout-gt-sm-row:not(.layout-gt-md-column),
+    #{$parent}.layout-gt-md-row,
+    #{$parent}.layout-gt-lg-row,
+    #{$parent}.layout-xl-row {
+      &:not(.layout-gt-lg-column):not(.layout-xl-column) > #{$element} { @content; }
+    }
+  }
+}