From 4bff2bbe99192504a9f79d30c2b21bf44bdce993 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Wed, 6 Apr 2016 23:30:52 +0200
Subject: [PATCH] fix(input): prevent the input from jumping when it becomes
 disabled

* The inputs used to offset their border with a -1px margin, however this caused all surrounding content to jump. This change switches to using `background-position` instead.
* Fixes inputs not getting their disabled styles when they're in a disabled fieldset.

Closes #7640.

Closes #7919
---
 src/components/input/input-theme.scss | 2 +-
 src/components/input/input.scss       | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/input/input-theme.scss b/src/components/input/input-theme.scss
index 2e497cf1a18..022108e2220 100644
--- a/src/components/input/input-theme.scss
+++ b/src/components/input/input-theme.scss
@@ -76,7 +76,7 @@ md-input-container.md-THEME_NAME-theme {
   }
   .md-input {
     &[disabled],
-    [disabled] {
+    [disabled] & {
       border-bottom-color: transparent;
       color: '{{foreground-3}}';
       background-image: linear-gradient(to right, '{{foreground-3}}' 0%, '{{foreground-3}}' 33%, transparent 0%);
diff --git a/src/components/input/input.scss b/src/components/input/input.scss
index f9d67dd0614..e3cdd06eb91 100644
--- a/src/components/input/input.scss
+++ b/src/components/input/input.scss
@@ -307,12 +307,13 @@ md-input-container {
   .md-input {
     &[disabled],
     [disabled] & {
-      background-position: 0 bottom;
+      // The negative border width offsets the dotted "border" so
+      // it's placed in the same place as the solid one before it.
+      background-position: bottom $input-border-width-default * -1 left 0;
       // This background-size is coordinated with a linear-gradient set in input-theme.scss
       // 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
     }
   }