refactor(input): refactors styles to use display: inline-block

src/components/checkbox/checkbox.scss

@@ -6,16 +6,23 @@ $checkbox-border-width: 2px !default;
 $checkbox-text-margin: 10px !default;
 $checkbox-top-left: 12px !default;
 
+.md-inline-form {
+  md-checkbox {
+    margin: 19px 0 18px;
+  }
+}
+
 md-checkbox {
   box-sizing: border-box;
-  display: block;
+  display: inline-block;
   margin: $checkbox-margin;
   white-space: nowrap;
   cursor: pointer;
   outline: none;
   user-select: none;
-  @include rtl(padding-left, $checkbox-width, 0);
-  @include rtl(padding-right, 0, $checkbox-width);
+  padding: 2px;
+  @include rtl(padding-left, $checkbox-width, 2px);
+  @include rtl(padding-right, 2px, $checkbox-width);
   position: relative;
   line-height: $checkbox-width + $checkbox-margin;
   min-width: $checkbox-width;

src/components/datepicker/datePicker.scss

@@ -6,10 +6,16 @@ $md-datepicker-open-animation-duration: 0.2s;
 md-datepicker {
   // Don't let linebreaks happen between the open icon-button and the input.
   white-space: nowrap;
+  overflow: hidden;
+}
+
+.md-inline-form {
+  md-datepicker {
+    margin-top: 8px;
+  }
 }
 
 // The calendar icon button used to open the calendar pane.
-// Need absurd specificty to override md-button.md-icon-button.
 .md-datepicker-button {
   display: inline-block;
   box-sizing: border-box;

src/components/input/demoBasicUsage/index.html

@@ -1,4 +1,4 @@
-<div ng-controller="DemoCtrl" layout="column" ng-cloak>
+<div ng-controller="DemoCtrl" layout="column" ng-cloak class="md-inline-form">
 
   <md-content md-theme="docs-dark" layout-padding layout="row" layout-sm="column">
     <md-input-container>
@@ -15,7 +15,7 @@
     <form name="userForm">
 
       <div layout layout-sm="column">
-        <md-input-container style="width:70%">
+        <md-input-container flex>
           <label>Company (Disabled)</label>
           <input ng-model="user.company" disabled>
         </md-input-container>
@@ -34,11 +34,12 @@
         </md-input-container>
       </div>
 
-      <md-input-container flex>
+      <md-input-container class="md-block">
         <label>Address</label>
         <input ng-model="user.address">
       </md-input-container>
-      <md-input-container md-no-float>
+
+      <md-input-container md-no-float class="md-block">
         <input ng-model="user.address2" placeholder="Address 2">
       </md-input-container>
 
@@ -74,7 +75,7 @@
         </md-input-container>
       </div>
 
-      <md-input-container flex>
+      <md-input-container class="md-block">
         <label>Biography</label>
         <textarea ng-model="user.biography" columns="1" md-maxlength="150"></textarea>
       </md-input-container>

src/components/input/demoBasicUsage/style.css

@@ -1,13 +1,2 @@
-md-datepicker {
-    margin-top:18px;
-}
-
-.md-datepicker-button {
-    height: 36px;
-    width: 36px;
-    line-height: 36px;
-}
-
-.md-datepicker-input-container {
-    margin-left: 2px;
-}
+.md-datepicker-button { width: 36px; }
+.md-datepicker-input-container { margin-left: 2px; }

src/components/input/demoErrors/index.html

@@ -1,14 +1,8 @@
 <div ng-controller="AppCtrl" layout="column" ng-cloak>
 
-  <md-toolbar class="md-primary">
-    <h1 class="md-toolbar-tools">
-      Top Secret Project
-    </h1>
-  </md-toolbar>
-
   <md-content layout-padding>
     <form name="projectForm">
-      <md-input-container>
+      <md-input-container class="md-block">
         <label>Description</label>
         <input md-maxlength="30" required name="description" ng-model="project.description">
         <div ng-messages="projectForm.description.$error">
@@ -17,15 +11,15 @@ <h1 class="md-toolbar-tools">
         </div>
       </md-input-container>
 
-      <md-input-container>
+      <md-input-container class="md-block">
         <label>Client Name</label>
         <input required name="clientName" ng-model="project.clientName">
         <div ng-messages="projectForm.clientName.$error">
           <div ng-message="required">This is required.</div>
         </div>
       </md-input-container>
 
-      <md-input-container>
+      <md-input-container class="md-block">
         <label>Client Email</label>
         <input required type="email" name="clientEmail" ng-model="project.clientEmail"
                minlength="10" maxlength="100" ng-pattern="/^.+@.+\..+$/" />
@@ -37,7 +31,7 @@ <h1 class="md-toolbar-tools">
         </div>
       </md-input-container>
 
-      <md-input-container>
+      <md-input-container class="md-block">
         <label>Hourly Rate (USD)</label>
         <input required type="number" step="any" name="rate" ng-model="project.rate" min="800"
                max="4999" ng-pattern="/^1234$/" md-maxlength="20" />

src/components/input/demoErrors/style.css

@@ -1,3 +1 @@
-.inputErrorsApp {
-    min-height:48px;
-}
+.inputErrorsApp { min-height:48px; }

src/components/input/demoIcons/index.html

@@ -2,35 +2,36 @@
 
   <br/>
   <md-content layout-padding class="autoScroll">
-
-    <md-input-container class="md-icon-float">
+    <md-input-container class="md-icon-float md-block">
       <!-- Use floating label instead of placeholder -->
       <label>Name</label>
       <md-icon md-svg-src="img/icons/ic_person_24px.svg" class="name"></md-icon>
       <input ng-model="user.name" type="text">
     </md-input-container>
 
-    <md-input-container md-no-float>
+    <md-input-container md-no-float class="md-block">
       <md-icon md-svg-src="img/icons/ic_phone_24px.svg"></md-icon>
       <input ng-model="user.phone" type="text" placeholder="Phone Number">
     </md-input-container>
 
-    <md-input-container >
+    <md-input-container class="md-block">
       <!-- Use floating placeholder instead of label -->
       <md-icon md-svg-src="img/icons/ic_email_24px.svg" class="email"></md-icon>
       <input ng-model="user.email" type="email" placeholder="Email (required)" ng-required="true">
     </md-input-container>
 
-    <md-input-container md-no-float>
+    <md-input-container md-no-float class="md-block">
       <md-icon md-svg-src="img/icons/ic_place_24px.svg" style="display:inline-block;"></md-icon>
       <input ng-model="user.address" type="text" placeholder="Address" >
     </md-input-container>
 
-    <md-input-container class="md-icon-float md-icon-right">
+    <md-input-container class="md-icon-float md-icon-right md-block">
       <label>Donation Amount</label>
       <md-icon md-svg-src="img/icons/ic_card_giftcard_24px.svg"></md-icon>
-      <input ng-model="user.donation" type="number" step="0.01">
-      <md-icon md-svg-src="img/icons/ic_euro_24px.svg"></md-icon>
+      <div layout="row">
+        <input ng-model="user.donation" type="number" step="0.01" flex>
+        <md-icon md-svg-src="img/icons/ic_euro_24px.svg" style="position: absolute; top: 4px;"></md-icon>
+      </div>
     </md-input-container>
 
   </md-content>

src/components/input/demoIcons/style.scss

@@ -1,18 +1,5 @@
-.inputIconDemo {
-  min-height:48px;
-}
-
-
-md-input-container:not(.md-input-invalid) > md-icon.email {
-    color : green;
-}
-md-input-container:not(.md-input-invalid) > md-icon.name {
-    color : dodgerblue;
-}
-
+.inputIconDemo { min-height: 48px; }
+md-input-container:not(.md-input-invalid) > md-icon.email { color: green; }
+md-input-container:not(.md-input-invalid) > md-icon.name { color: dodgerblue; }
 md-input-container.md-input-invalid > md-icon.email,
-md-input-container.md-input-invalid > md-icon.name,
-{
-    color : red;
-}
-
+md-input-container.md-input-invalid > md-icon.name { color: red; }

src/components/input/input.js

@@ -56,6 +56,7 @@ function mdInputContainerDirective($mdTheming, $parse) {
 
   function postLink(scope, element, attr) {
     $mdTheming(element);
+    if (element.find('md-icon').length) element.addClass('md-has-icon');
   }
 
   function ContainerCtrl($scope, $element, $attrs) {

src/components/input/input.scss

@@ -17,16 +17,21 @@ $input-error-height: 24px !default;
 
 $icon-offset : 36px !default;
 
-$icon-float-top: -16px !default;
 $icon-float-focused-top: -8px !default;
 
 md-input-container {
-  display: flex;
+  display: inline-block;
   position: relative;
-  flex-direction: column;
-
   padding: $input-container-padding;
-  padding-bottom: $input-container-padding + $input-error-height;
+  margin: 18px 0;
+
+  &.md-block {
+    display: block;
+  }
+
+  &.md-has-icon {
+    padding-left: $icon-offset;
+  }
 
   // When we have ng-messages, remove the input error height from our bottom padding, since the
   // ng-messages wrapper has a min-height of 1 error (so we don't adjust height as often; see below)
@@ -39,7 +44,6 @@ md-input-container {
     top: 5px;
     left: 2px;
     + input {
-          margin-left: $icon-offset;
     }
   }
 
@@ -80,8 +84,8 @@ md-input-container {
   }
 
   label {
-    position: relative;
-    top: -2px;
+    position: absolute;
+    bottom: 100%;
   }
 
 
@@ -103,9 +107,6 @@ md-input-container {
     opacity: 0;
     transition-property: opacity, transform;
     transform: translate3d(0, $input-placeholder-offset + $baseline-grid * 0.75, 0);
-    &.md-static {
-      position: static;
-    }
   }
   &.md-input-focused .md-placeholder {
     opacity: 1;
@@ -151,7 +152,8 @@ md-input-container {
     border-style: solid; // Firefox fix
 
     // Fix number inputs in Firefox to be full-width
-    width: auto;
+    width: 100%;
+    box-sizing: border-box;
 
     &:focus {
       outline: none;
@@ -272,35 +274,22 @@ md-input-container {
 
 md-input-container.md-icon-float {
 
-  margin-top : $icon-float-top;
   transition : margin-top 0.5s $swift-ease-out-timing-function ;
 
 
   > label  {
       pointer-events:none;
       position:absolute;
-      margin-left: $icon-offset;
   }
 
   > md-icon {
-    top: 26px;
+    top: 2px;
     left: 2px;
-    + input,
-    + textarea {
-          margin-left: $icon-offset;
-    }
-  }
-
-  > input,
-  > textarea {
-    padding-top : $input-line-height - $input-container-padding;
   }
 
   &.md-input-focused,
   &.md-input-has-value {
 
-    margin-top: $icon-float-focused-top;
-
     label {
         transform: translate3d(0,$input-label-float-offset,0) scale($input-label-float-scale);
         transition: transform $swift-ease-out-timing-function 0.5s;

src/components/radioButton/radio-button.scss

@@ -112,6 +112,20 @@ md-radio-group {
   }
 }
 
+.md-inline-form {
+  md-radio-group {
+    margin: 18px 0 19px;
+    md-radio-button {
+      display: inline-block;
+      height: 30px;
+      padding: 2px;
+      box-sizing: border-box;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+}
+
 @media screen and (-ms-high-contrast: active) {
   md-radio-button.md-default-theme .md-on {
     background-color: #fff;

src/components/select/demoValidations/index.html

@@ -1,7 +1,7 @@
 <div ng-controller="AppCtrl" layout="column" layout-align="center center" style="min-height: 300px;" ng-cloak>
   <form name="myForm">
     <p>Note that invalid styling only applies if invalid and dirty</p>
-    <md-input-container>
+    <md-input-container class="md-block">
       <label>Favorite Number</label>
       <md-select name="myModel" ng-model="myModel" required>
         <md-option value="1">One</md-option>

src/components/select/select.js

@@ -213,7 +213,7 @@ function SelectDirective($mdSelect, $mdUtil, $mdTheming, $mdAria, $compile, $par
         if (isPlaceholder) {
           valueEl.addClass('md-select-placeholder');
           if (containerCtrl && containerCtrl.label) {
-            containerCtrl.label.addClass('md-placeholder md-static');
+            containerCtrl.label.addClass('md-placeholder');
           }
         } else {
           valueEl.removeClass('md-select-placeholder');

src/components/switch/demoBasicUsage/index.html

@@ -1,25 +1,25 @@
 <div class="inset" ng-controller="SwitchDemoCtrl" ng-cloak>
-  <md-switch ng-model="data.cb1" aria-label="Switch 1">
+  <md-switch ng-model="data.cb1" aria-label="Switch 1" class="md-block">
     Switch 1: {{ data.cb1 }}
   </md-switch>
 
-  <md-switch ng-model="data.cb2" aria-label="Switch 2" ng-true-value="'yup'" ng-false-value="'nope'" class="md-warn">
+  <md-switch ng-model="data.cb2" aria-label="Switch 2" ng-true-value="'yup'" ng-false-value="'nope'" class="md-warn md-block">
     Switch 2 (md-warn): {{ data.cb2 }}
   </md-switch>
 
-  <md-switch ng-disabled="true" aria-label="Disabled switch" ng-model="disabledModel">
+  <md-switch ng-disabled="true" aria-label="Disabled switch" ng-model="disabledModel" class="md-block">
     Switch (Disabled)
   </md-switch>
 
-  <md-switch ng-disabled="true" aria-label="Disabled active switch" ng-model="data.cb4">
+  <md-switch ng-disabled="true" aria-label="Disabled active switch" ng-model="data.cb4" class="md-block">
     Switch (Disabled, Active)
   </md-switch>
 
-  <md-switch class="md-primary" md-no-ink aria-label="Switch No Ink" ng-model="data.cb5">
+  <md-switch class="md-primary md-block" md-no-ink aria-label="Switch No Ink" ng-model="data.cb5">
     Switch (md-primary): No Ink
   </md-switch>
 
-  <md-switch ng-model="data.cb6" aria-label="Switch 6" ng-change="onChange(data.cb6)">
-    Switch (onChange) state: {{ message }}
+  <md-switch ng-model="data.cb6" aria-label="Switch 6" ng-change="onChange(data.cb6)" class="md-block">
+    Switch 6 message: {{ message }}
   </md-switch>
 </div>