diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss index 148cb20cf22..87f7313d91e 100644 --- a/src/components/checkbox/checkbox.scss +++ b/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; diff --git a/src/components/datepicker/datePicker.scss b/src/components/datepicker/datePicker.scss index 981eb7bfd61..2dd97270208 100644 --- a/src/components/datepicker/datePicker.scss +++ b/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; diff --git a/src/components/input/demoBasicUsage/index.html b/src/components/input/demoBasicUsage/index.html index dafc9b6e272..b8b5b03207f 100644 --- a/src/components/input/demoBasicUsage/index.html +++ b/src/components/input/demoBasicUsage/index.html @@ -1,4 +1,4 @@ -
+
@@ -15,7 +15,7 @@
- + @@ -34,11 +34,12 @@
- + - + + @@ -74,7 +75,7 @@
- + diff --git a/src/components/input/demoBasicUsage/style.css b/src/components/input/demoBasicUsage/style.css index 3ed7a4a38c4..f831e784518 100644 --- a/src/components/input/demoBasicUsage/style.css +++ b/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; } \ No newline at end of file diff --git a/src/components/input/demoErrors/index.html b/src/components/input/demoErrors/index.html index 23960846f82..67eb1f1d0e6 100644 --- a/src/components/input/demoErrors/index.html +++ b/src/components/input/demoErrors/index.html @@ -1,14 +1,8 @@
- -

- Top Secret Project -

-
- - +
@@ -17,7 +11,7 @@

- +
@@ -25,7 +19,7 @@

- + @@ -37,7 +31,7 @@

- + diff --git a/src/components/input/demoErrors/style.css b/src/components/input/demoErrors/style.css index 2fe0fd64427..6939f113dab 100644 --- a/src/components/input/demoErrors/style.css +++ b/src/components/input/demoErrors/style.css @@ -1,3 +1 @@ -.inputErrorsApp { - min-height:48px; -} +.inputErrorsApp { min-height:48px; } diff --git a/src/components/input/demoIcons/index.html b/src/components/input/demoIcons/index.html index bf8f4a82a28..9c30455d738 100644 --- a/src/components/input/demoIcons/index.html +++ b/src/components/input/demoIcons/index.html @@ -2,35 +2,36 @@
- - + - + - + - + - + - - +
+ + +
diff --git a/src/components/input/demoIcons/style.scss b/src/components/input/demoIcons/style.scss index e9c4d137cb9..f86be302838 100644 --- a/src/components/input/demoIcons/style.scss +++ b/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; } diff --git a/src/components/input/input.js b/src/components/input/input.js index 90793f197a9..ae52bfd422a 100644 --- a/src/components/input/input.js +++ b/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) { diff --git a/src/components/input/input.scss b/src/components/input/input.scss index 61227e8ce51..88359a6c9d6 100644 --- a/src/components/input/input.scss +++ b/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; diff --git a/src/components/radioButton/radio-button.scss b/src/components/radioButton/radio-button.scss index 1e3e12db1fd..680b8b3cc96 100644 --- a/src/components/radioButton/radio-button.scss +++ b/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; diff --git a/src/components/select/demoValidations/index.html b/src/components/select/demoValidations/index.html index bad68479d61..a3a9fe756dc 100755 --- a/src/components/select/demoValidations/index.html +++ b/src/components/select/demoValidations/index.html @@ -1,7 +1,7 @@

Note that invalid styling only applies if invalid and dirty

- + One diff --git a/src/components/select/select.js b/src/components/select/select.js index 9cb0378458c..b15fc577fef 100755 --- a/src/components/select/select.js +++ b/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'); diff --git a/src/components/switch/demoBasicUsage/index.html b/src/components/switch/demoBasicUsage/index.html index 30c02114485..3a8075f44b1 100644 --- a/src/components/switch/demoBasicUsage/index.html +++ b/src/components/switch/demoBasicUsage/index.html @@ -1,25 +1,25 @@
- + Switch 1: {{ data.cb1 }} - + Switch 2 (md-warn): {{ data.cb2 }} - + Switch (Disabled) - + Switch (Disabled, Active) - + Switch (md-primary): No Ink - - Switch (onChange) state: {{ message }} + + Switch 6 message: {{ message }}
diff --git a/src/components/switch/switch.scss b/src/components/switch/switch.scss index 512e7470992..814abe8a7b0 100644 --- a/src/components/switch/switch.scss +++ b/src/components/switch/switch.scss @@ -3,16 +3,26 @@ $switch-height: $baseline-grid * 3 !default; $switch-bar-height: 14px !default; $switch-thumb-size: 20px !default; -md-switch { - - display: flex; - align-items: center; +.md-inline-form { + md-switch { + margin-top: 18px; + margin-bottom: 19px; + } +} +md-switch { + display: inline-block; margin: 15px; white-space: nowrap; cursor: pointer; outline: none; user-select: none; + height: 30px; + line-height: 28px; + + &.md-block { + display: block; + } .md-container { cursor: grab; @@ -21,6 +31,8 @@ md-switch { position: relative; user-select: none; margin-right: 8px; + margin-top: (30 - $switch-height) / 2; + float: left; } // If the user moves his mouse off the switch, stil display grabbing cursor @@ -49,6 +61,7 @@ md-switch { .md-label { border-color: transparent; border-width: 0; + float: left; } .md-bar {