fix(input-container): align indentation with spec

Fixes #10105. Closes #11421.

BREAKING CHANGE: `md-input` and `md-select` inside of `md-input-container`s have been updated to use indentation that is consistent with the spec (aligned to the left in LTR and the right in RTL). This may cause some minor layout issues in apps that depended upon the previous `2px` padding inside of `md-input-container`.

Author: Splaktar

src/components/input/_input-variables.scss

@@ -4,7 +4,6 @@ $input-label-default-offset: 24px !default;
 $input-label-default-scale: 1.0 !default;
 $input-label-float-offset: 6px !default;
 $input-label-float-scale: 0.75 !default;
-$input-label-float-width: $input-container-padding + 16px !default;
 
 $input-placeholder-offset: $input-label-default-offset !default;
 

src/components/input/input.scss

@@ -91,8 +91,8 @@ md-input-container {
     order: 1;
     pointer-events: none;
     -webkit-font-smoothing: antialiased;
-    @include rtl(padding-left, $input-container-padding + 1px, 0);
-    @include rtl(padding-right, 0, $input-container-padding + 1px);
+    @include rtl(padding-left, $input-container-padding, 0);
+    @include rtl(padding-right, 0, $input-container-padding);
     z-index: 1;
     transform: translate3d(0, $input-label-default-offset + 4, 0) scale($input-label-default-scale);
     transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
@@ -103,6 +103,13 @@ md-input-container {
 
     @include rtl(transform-origin, left top, right top);
   }
+  &.md-input-has-value {
+    label:not(.md-no-float):not(.md-container-ignore),
+    .md-placeholder {
+      @include rtl(padding-left, $input-container-padding + 1px, 0);
+      @include rtl(padding-right, 0, $input-container-padding + 1px);
+    }
+  }
   .md-placeholder {
     position: absolute;
     top: 0;
@@ -147,8 +154,8 @@ md-input-container {
     background: none;
     padding-top: $input-padding-top;
     padding-bottom: $input-border-width-focused - $input-border-width-default;
-    padding-left: 2px;
-    padding-right: 2px;
+    @include rtl(padding-left, 0, $input-container-padding);
+    @include rtl(padding-right, $input-container-padding, 0);
     border-width: 0 0 $input-border-width-default 0;
     line-height: $input-line-height;
     height: $input-line-height + ($input-padding-top * 2);
@@ -303,7 +310,8 @@ md-input-container {
     > label {
       &:not(.md-no-float):not(.md-container-ignore),
       .md-placeholder {
-        width: calc(100% - #{$icon-offset} - #{$input-label-float-width});
+        width: calc(100% - #{$icon-offset});
+        padding: 0;
       }
     }
   }

src/components/select/select.scss

@@ -175,15 +175,22 @@ md-input-container md-select {
   }
   .md-select-value {
     min-height: ($input-line-height + $input-padding-top * 2) - $input-border-width-focused - $input-border-width-default * 2;
-    padding-bottom: $input-border-width-focused - $input-border-width-default;
     border-bottom-width: $input-border-width-default;
+    padding-bottom: $input-border-width-focused - $input-border-width-default;
+    &.md-select-placeholder {
+      @include rtl(padding-left, 0, $input-container-padding);
+      @include rtl(padding-right, $input-container-padding, 0);
+    }
   }
 }
 
 .md-select-value {
   display: flex;
   align-items: center;
-  padding: 2px 2px 1px;
+  padding-top: 2px;
+  padding-bottom: 1px;
+  @include rtl(padding-left, 0, $input-container-padding);
+  @include rtl(padding-right, $input-container-padding, 0);
   border-bottom-width: $select-border-width-default;
   border-bottom-style: solid;
   background-color: rgba(0,0,0,0);
@@ -230,7 +237,6 @@ md-input-container md-select {
     order: 1;
     pointer-events: none;
     -webkit-font-smoothing: antialiased;
-    padding-left: 2px;
     z-index: 1;
   }
 }