From bd74d52dd3f19398242163dd46e54b365e408f1e Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Mon, 22 May 2017 17:27:22 -0700 Subject: [PATCH 1/9] make input match mocks better, WIP still WIP placeholder working, still WIP fixed main styles, now just themes... themes working again icon button support --- src/demo-app/input/input-demo.html | 7 + src/lib/input/_input-theme.scss | 2 +- src/lib/input/input-container.html | 8 +- src/lib/input/input-container.scss | 210 ++++++++++++++++++----------- 4 files changed, 144 insertions(+), 83 deletions(-) diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html index 75b35dc052a3..cdfc3f13a4be 100644 --- a/src/demo-app/input/input-demo.html +++ b/src/demo-app/input/input-demo.html @@ -113,6 +113,13 @@

Icons

attach_money mode_edit + +

Icon buttons

+ + + + + diff --git a/src/lib/input/_input-theme.scss b/src/lib/input/_input-theme.scss index 5c8bb4ab9805..91a7eab209b5 100644 --- a/src/lib/input/_input-theme.scss +++ b/src/lib/input/_input-theme.scss @@ -52,7 +52,7 @@ } .mat-input-underline { - border-color: $input-underline-color; + background-color: $input-underline-color; } .mat-input-ripple { diff --git a/src/lib/input/input-container.html b/src/lib/input/input-container.html index f5b1c8745ee3..5a95d29c6b64 100644 --- a/src/lib/input/input-container.html +++ b/src/lib/input/input-container.html @@ -1,8 +1,7 @@
-
+
- - +
@@ -24,8 +23,7 @@
- - +
diff --git a/src/lib/input/input-container.scss b/src/lib/input/input-container.scss index 70059e047a1e..0e96827fbc8f 100644 --- a/src/lib/input/input-container.scss +++ b/src/lib/input/input-container.scss @@ -3,24 +3,61 @@ @import '../core/style/form-common'; -$mat-input-floating-placeholder-scale-factor: 0.75 !default; -$mat-input-wrapper-spacing: 1em !default; -$mat-input-hint-min-space: 10px !default; +// Min amount of space between start and end hint. +$mat-input-hint-min-space: 1em !default; +// The amount of additional line space beyond 1em on the input (1/2 below, 1/2 above). +$mat-input-line-spacing: 0.125 !default; +// The height of the underline. +$mat-input-underline-height: 1px !default; +// The amount to scale the font for the floating label and subscript. +$mat-input-helper-font-scale: 0.75 !default; +// The amount to scale the font for the prefix and suffix icons. +$mat-input-prefix-suffix-icon-font-scale: 1.5 !default; + +// The line-height for all text in the md-input-container +$mat-input-line-height: 1 + $mat-input-line-spacing; +// The padding on the infix. Mocks show half of the text size, but seem to measure from the edge of +// the text itself, not the edge of the line; therefore we subtract off 1/2 of the line spacing. +$mat-input-infix-padding: 0.5em - $mat-input-line-spacing / 2; +// The margin applied to the input-infix to reserve space for the floating label. +$mat-input-infix-margin-top: 1em * $mat-input-line-height * $mat-input-helper-font-scale; +// Font size to use for the label and subscript text. +$mat-input-helper-font-size: $mat-input-helper-font-scale * 100%; +// Font size to use for the for the prefix and suffix icons. +$mat-input-prefix-suffix-icon-font-size: $mat-input-prefix-suffix-icon-font-scale * 100%; +// The space between the bottom of the input table and the subscript container. Mocks show half of +// the text size, but this margin is applied to an element with the helper text font size, so we +// need to divide by the scale factor to make it half of the original text size. We again need to +// subtract off 1/2 of the line spacing since the mocks measure to the edge of the text, not the +// edge of the line. +$mat-input-subscript-margin-top: 0.5em / $mat-input-helper-font-scale - $mat-input-line-spacing / 2; +// The padding applied to the input-wrapper to reserve space for the subscript, since it's +// absolutely positioned. This is a combination of the subscript's margin and line-height, but we +// need to multiply by the helper font scale factor since the wrapper has a larger font size. +$mat-input-wrapper-padding-bottom: + ($mat-input-subscript-margin-top + $mat-input-line-height) * $mat-input-helper-font-scale; +// The amount of y-offset to apply to the placeholder when it is floating. +$mat-input-floating-placeholder-offset: -$mat-input-infix-padding - 1em; -// Gradient for showing the dashed line when the input is disabled. -$mat-input-underline-disabled-background-image: - linear-gradient(to right, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.26) 33%, transparent 0%); // Applies a floating placeholder above the input itself. @mixin mat-input-placeholder-floating { display: block; - transform: translate3d(0, -1.35em, 0) scale($mat-input-floating-placeholder-scale-factor); - width: 100% / $mat-input-floating-placeholder-scale-factor; + transform: translateY(-$mat-input-infix-margin-top - $mat-input-infix-padding) + perspective(1px) // fixes text blurriness. + scale($mat-input-helper-font-scale); + width: 100% / $mat-input-helper-font-scale; } + .mat-input-container { display: inline-block; position: relative; + font-family: $mat-font-family; + + // TODO(mmalerba): should this come from typography settings? If so a lot of this CSS needs to go + // into some sort of typography mixin. + line-height: $mat-input-line-height; // To avoid problems with text-align. text-align: left; @@ -28,42 +65,62 @@ $mat-input-underline-disabled-background-image: [dir='rtl'] & { text-align: right; } - - // Allow icons in a prefix/suffix/hint/etc to adapt to the correct size. - & .mat-icon, - & .mat-datepicker-toggle { - width: 1em; - height: 1em; - vertical-align: top; - } } // Global wrapper. We need to apply margin to the element for spacing, but // cannot apply it to the host element directly. .mat-input-wrapper { - margin: $mat-input-wrapper-spacing 0; - // Account for the underline which has 4px of margin + 2px of border. - padding-bottom: 6px; + position: relative; + padding-bottom: $mat-input-wrapper-padding-bottom; } -// We use a table layout to baseline align the prefix and suffix classes. -// The underline is outside of it so it can cover all of the elements under -// this table. -// Flex does not respect the baseline. What we really want is akin to a table -// as want an inline-block where elements don't wrap. -.mat-input-table { - display: inline-table; - flex-flow: column; - vertical-align: bottom; +// We use a flex layout to baseline align the prefix and suffix elements. +// The underline is outside of it so it can cover all of the elements under this flex container. +.mat-input-flex { + display: inline-flex; + align-items: baseline; width: 100%; +} + +.mat-input-prefix, +.mat-input-suffix { + white-space: nowrap; + flex: none; - & > * { - display: table-cell; + // Allow icons in a prefix or suffix to adapt to the correct size. + .mat-icon, + .mat-datepicker-toggle { + width: 1em; + height: 1em; + font-size: $mat-input-prefix-suffix-icon-font-size; + vertical-align: text-bottom; + } + + // Allow icon buttons in a prefix or suffix to adapt to the correct size. + .mat-icon-button { + font-size: inherit; + line-height: $mat-input-line-height; + height: $mat-input-prefix-suffix-icon-font-scale * 1em; + width: $mat-input-prefix-suffix-icon-font-scale * 1em; + vertical-align: baseline; + + .mat-icon { + font-size: inherit; + line-height: $mat-input-prefix-suffix-icon-font-scale; + width: 1em; + height: 1em; + vertical-align: baseline; + } } } .mat-input-infix { + display: block; position: relative; + padding: $mat-input-infix-padding 0; + // Throws off the baseline if we do it as a real margin, so we do it as a border instead. + border-top: $mat-input-infix-margin-top solid transparent; + flex: 1; } // The Input element proper. @@ -121,6 +178,20 @@ $mat-input-underline-disabled-background-image: } } +// Used to hide the placeholder overflow on IE, since IE doesn't take transform into account when +// determining overflow. +.mat-input-placeholder-wrapper { + position: absolute; + left: 0; + top: -$mat-input-infix-margin-top; + box-sizing: content-box; + width: 100%; + height: 100%; + padding-top: $mat-input-infix-margin-top; + overflow: hidden; + pointer-events: none; // We shouldn't catch mouse events (let them through). +} + // The placeholder label. This is invisible unless it is. The logic to show it is // basically `empty || (float && (!empty || focused))`. Float is dependent on the // `floatingPlaceholder` input. @@ -129,21 +200,18 @@ $mat-input-underline-disabled-background-image: // infix
. position: absolute; left: 0; - top: 0; + top: $mat-input-infix-margin-top + $mat-input-infix-padding; pointer-events: none; // We shouldn't catch mouse events (let them through). - z-index: 1; - padding-top: 1em; // Put ellipsis text overflow. width: 100%; - display: none; + display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - transform: translate3d(0, 0, 0); - transform-origin: bottom left; + transform-origin: 0 0; transition: transform $swift-ease-out-duration $swift-ease-out-timing-function, color $swift-ease-out-duration $swift-ease-out-timing-function, width $swift-ease-out-duration $swift-ease-out-timing-function; @@ -159,7 +227,7 @@ $mat-input-underline-disabled-background-image: } [dir='rtl'] & { - transform-origin: bottom right; + transform-origin: 100% 0; left: auto; right: 0; } @@ -171,47 +239,27 @@ $mat-input-underline-disabled-background-image: transition: none; } -// Used to hide the placeholder overflow on IE, since IE doesn't take transform into account when -// determining overflow. -.mat-input-placeholder-wrapper { - position: absolute; - left: 0; - top: -1em; - width: 100%; - padding-top: 1em; - overflow: hidden; - pointer-events: none; // We shouldn't catch mouse events (let them through). - transform: translate3d(0, 0, 0); // Prevents the label from shifting after the animation is done. - - // Keeps the element height since the placeholder text is `position: absolute`. - &::after { - content: ''; - display: inline-table; - } -} - - // The underline is what's shown under the input, its prefix and its suffix. // The ripple is the blue animation coming on top of it. .mat-input-underline { position: absolute; - height: 1px; + height: $mat-input-underline-height; width: 100%; - margin-top: 4px; - border-top-width: 1px; - border-top-style: solid; + + // We want the underline to start at the end of the content box, not the padding box, + // so we move it up by the padding amount; + bottom: $mat-input-wrapper-padding-bottom; &.mat-disabled { @include mat-control-disabled-underline(); - border-top: 0; background-position: 0; + background-color: transparent; } .mat-input-ripple { position: absolute; - height: 2px; - z-index: 1; - top: -1px; + height: $mat-input-underline-height * 2; + top: 0; width: 100%; transform-origin: 50%; transform: scaleX(0.5); @@ -223,7 +271,7 @@ $mat-input-underline-disabled-background-image: visibility: visible; transform: scaleX(1); transition: transform 150ms linear, - background-color $swift-ease-in-duration $swift-ease-in-timing-function; + background-color $swift-ease-in-duration $swift-ease-in-timing-function; } } } @@ -231,14 +279,27 @@ $mat-input-underline-disabled-background-image: // Wrapper for the hints and error messages. Provides positioning and text size. // Note that we're using `top` in order to allow for stacked children to flow downwards. .mat-input-subscript-wrapper { - $line-height: 1.2em; - position: absolute; - top: 100%; + font-size: $mat-input-helper-font-size; + margin-top: $mat-input-subscript-margin-top; width: 100%; - margin-top: -$line-height; - line-height: $line-height; overflow: hidden; // prevents multi-line errors from overlapping the input + + // We want the subscript to start at the end of the content box, not the padding box, + // so we move it up by the padding amount (adjusted for the smaller font size); + top: calc(100% - #{$mat-input-wrapper-padding-bottom / $mat-input-helper-font-scale}); +} + +// Scale down icons in the placeholder and hint to be the same size as the text. +.mat-input-subscript-wrapper, +.mat-input-placeholder-wrapper { + .mat-icon, + .mat-datepicker-toggle { + width: 1em; + height: 1em; + font-size: inherit; + vertical-align: baseline; + } } // Clears the floats on the hints. This is necessary for the hint animation to work. @@ -246,6 +307,7 @@ $mat-input-underline-disabled-background-image: display: flex; } +// Spacer used to make sure start and end hints have enough space between them. .mat-input-hint-spacer { flex: 1 0 $mat-input-hint-min-space; } @@ -254,9 +316,3 @@ $mat-input-underline-disabled-background-image: .mat-input-error { display: block; } - -.mat-input-prefix, .mat-input-suffix { - // Prevents the prefix and suffix from stretching together with the container. - width: 0.1px; - white-space: nowrap; -} From e94a7d04a16b8877a5fe4f17c811dbe0fa3ae0db Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Wed, 24 May 2017 17:34:02 -0700 Subject: [PATCH 2/9] add select to baseline demo --- src/demo-app/baseline/baseline-demo.html | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/demo-app/baseline/baseline-demo.html b/src/demo-app/baseline/baseline-demo.html index cfcf7e6470ee..932e0eca08f6 100644 --- a/src/demo-app/baseline/baseline-demo.html +++ b/src/demo-app/baseline/baseline-demo.html @@ -14,6 +14,10 @@ | Text 5 | + + Option + + | Text 6 | @@ -38,6 +42,10 @@

| Text 5 | + + Option + + | Text 6 | From b29b97b3e5f5d2533d45d2eef2bf8744264e877f Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Thu, 25 May 2017 11:55:35 -0700 Subject: [PATCH 3/9] fix IE bug --- src/lib/input/input-container.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/input/input-container.scss b/src/lib/input/input-container.scss index 0e96827fbc8f..285223e7527e 100644 --- a/src/lib/input/input-container.scss +++ b/src/lib/input/input-container.scss @@ -120,7 +120,7 @@ $mat-input-floating-placeholder-offset: -$mat-input-infix-padding - 1em; padding: $mat-input-infix-padding 0; // Throws off the baseline if we do it as a real margin, so we do it as a border instead. border-top: $mat-input-infix-margin-top solid transparent; - flex: 1; + flex: auto; } // The Input element proper. From abb8e605123b55dcb5698c601b61a19a564c0f85 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Thu, 25 May 2017 16:49:28 -0700 Subject: [PATCH 4/9] address comments --- src/lib/input/input-container.scss | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/src/lib/input/input-container.scss b/src/lib/input/input-container.scss index 285223e7527e..f5a5a731baa9 100644 --- a/src/lib/input/input-container.scss +++ b/src/lib/input/input-container.scss @@ -10,7 +10,7 @@ $mat-input-line-spacing: 0.125 !default; // The height of the underline. $mat-input-underline-height: 1px !default; // The amount to scale the font for the floating label and subscript. -$mat-input-helper-font-scale: 0.75 !default; +$mat-input-subscript-font-scale: 0.75 !default; // The amount to scale the font for the prefix and suffix icons. $mat-input-prefix-suffix-icon-font-scale: 1.5 !default; @@ -20,33 +20,34 @@ $mat-input-line-height: 1 + $mat-input-line-spacing; // the text itself, not the edge of the line; therefore we subtract off 1/2 of the line spacing. $mat-input-infix-padding: 0.5em - $mat-input-line-spacing / 2; // The margin applied to the input-infix to reserve space for the floating label. -$mat-input-infix-margin-top: 1em * $mat-input-line-height * $mat-input-helper-font-scale; +$mat-input-infix-margin-top: 1em * $mat-input-line-height * $mat-input-subscript-font-scale; // Font size to use for the label and subscript text. -$mat-input-helper-font-size: $mat-input-helper-font-scale * 100%; +$mat-input-subscript-font-size: $mat-input-subscript-font-scale * 100%; // Font size to use for the for the prefix and suffix icons. $mat-input-prefix-suffix-icon-font-size: $mat-input-prefix-suffix-icon-font-scale * 100%; // The space between the bottom of the input table and the subscript container. Mocks show half of -// the text size, but this margin is applied to an element with the helper text font size, so we +// the text size, but this margin is applied to an element with the subscript text font size, so we // need to divide by the scale factor to make it half of the original text size. We again need to // subtract off 1/2 of the line spacing since the mocks measure to the edge of the text, not the // edge of the line. -$mat-input-subscript-margin-top: 0.5em / $mat-input-helper-font-scale - $mat-input-line-spacing / 2; +$mat-input-subscript-margin-top: + 0.5em / $mat-input-subscript-font-scale - $mat-input-line-spacing / 2; // The padding applied to the input-wrapper to reserve space for the subscript, since it's // absolutely positioned. This is a combination of the subscript's margin and line-height, but we -// need to multiply by the helper font scale factor since the wrapper has a larger font size. +// need to multiply by the subscript font scale factor since the wrapper has a larger font size. $mat-input-wrapper-padding-bottom: - ($mat-input-subscript-margin-top + $mat-input-line-height) * $mat-input-helper-font-scale; -// The amount of y-offset to apply to the placeholder when it is floating. -$mat-input-floating-placeholder-offset: -$mat-input-infix-padding - 1em; + ($mat-input-subscript-margin-top + $mat-input-line-height) * $mat-input-subscript-font-scale; // Applies a floating placeholder above the input itself. @mixin mat-input-placeholder-floating { display: block; transform: translateY(-$mat-input-infix-margin-top - $mat-input-infix-padding) - perspective(1px) // fixes text blurriness. - scale($mat-input-helper-font-scale); - width: 100% / $mat-input-helper-font-scale; + // fixes text blurriness, see + // https://css-tricks.com/forums/topic/transforms-cause-font-smoothing-weirdness-in-webkit/ + perspective(1px) + scale($mat-input-subscript-font-scale); + width: 100% / $mat-input-subscript-font-scale; } @@ -280,14 +281,14 @@ $mat-input-floating-placeholder-offset: -$mat-input-infix-padding - 1em; // Note that we're using `top` in order to allow for stacked children to flow downwards. .mat-input-subscript-wrapper { position: absolute; - font-size: $mat-input-helper-font-size; + font-size: $mat-input-subscript-font-size; margin-top: $mat-input-subscript-margin-top; width: 100%; overflow: hidden; // prevents multi-line errors from overlapping the input // We want the subscript to start at the end of the content box, not the padding box, // so we move it up by the padding amount (adjusted for the smaller font size); - top: calc(100% - #{$mat-input-wrapper-padding-bottom / $mat-input-helper-font-scale}); + top: calc(100% - #{$mat-input-wrapper-padding-bottom / $mat-input-subscript-font-scale}); } // Scale down icons in the placeholder and hint to be the same size as the text. From c877cb9ecdd3efe5cb25396f5b4e5f51fcc99eb0 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Tue, 30 May 2017 10:31:10 -0700 Subject: [PATCH 5/9] address comments --- src/lib/input/input-container.scss | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/src/lib/input/input-container.scss b/src/lib/input/input-container.scss index f5a5a731baa9..c3b8d6973084 100644 --- a/src/lib/input/input-container.scss +++ b/src/lib/input/input-container.scss @@ -42,11 +42,19 @@ $mat-input-wrapper-padding-bottom: // Applies a floating placeholder above the input itself. @mixin mat-input-placeholder-floating { display: block; + transform: translateY(-$mat-input-infix-margin-top - $mat-input-infix-padding) - // fixes text blurriness, see - // https://css-tricks.com/forums/topic/transforms-cause-font-smoothing-weirdness-in-webkit/ - perspective(1px) - scale($mat-input-subscript-font-scale); + scale($mat-input-subscript-font-scale) + // We use perspecitve to fix the text blurriness as described here: + // http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/ + // This results in a small jitter after the label floats on Firefox, which the + // translateZ fixes. + perspective(1px) translateZ(0.001px); + // The tricks above used to smooth out the animation on chrome and firefox actually make things + // worse on IE, so we don't include them in the IE version. + -ms-transform: translateY(-$mat-input-infix-margin-top - $mat-input-infix-padding) + scale($mat-input-subscript-font-scale); + width: 100% / $mat-input-subscript-font-scale; } @@ -59,6 +67,7 @@ $mat-input-wrapper-padding-bottom: // TODO(mmalerba): should this come from typography settings? If so a lot of this CSS needs to go // into some sort of typography mixin. line-height: $mat-input-line-height; + font-size: 16px; // To avoid problems with text-align. text-align: left; @@ -212,6 +221,10 @@ $mat-input-wrapper-padding-bottom: text-overflow: ellipsis; overflow: hidden; + // The perspective helps smooth out animations on Chrome and Firefox but isn't needed on IE. + transform: perspective(1px); + -ms-transform: none; + transform-origin: 0 0; transition: transform $swift-ease-out-duration $swift-ease-out-timing-function, color $swift-ease-out-duration $swift-ease-out-timing-function, From a088b2cd698e98172ed0713e4170ff18dc5273f6 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Tue, 30 May 2017 10:44:56 -0700 Subject: [PATCH 6/9] remove forced font-size --- src/lib/input/input-container.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/input/input-container.scss b/src/lib/input/input-container.scss index c3b8d6973084..ce8944266fb6 100644 --- a/src/lib/input/input-container.scss +++ b/src/lib/input/input-container.scss @@ -67,7 +67,6 @@ $mat-input-wrapper-padding-bottom: // TODO(mmalerba): should this come from typography settings? If so a lot of this CSS needs to go // into some sort of typography mixin. line-height: $mat-input-line-height; - font-size: 16px; // To avoid problems with text-align. text-align: left; From 13647fc058bb3cd149716dd4088dd946c758b63b Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Wed, 31 May 2017 15:52:28 -0700 Subject: [PATCH 7/9] integrate typography system --- src/lib/core/typography/_typography.scss | 9 +- src/lib/input/_input-theme.scss | 113 +++++++++++++++++++++-- src/lib/input/input-container.scss | 89 +----------------- 3 files changed, 116 insertions(+), 95 deletions(-) diff --git a/src/lib/core/typography/_typography.scss b/src/lib/core/typography/_typography.scss index 8aaa7cd15f86..a3d0d02d2a2b 100644 --- a/src/lib/core/typography/_typography.scss +++ b/src/lib/core/typography/_typography.scss @@ -23,7 +23,9 @@ $body-2: mat-typography-level(14px, 24px, 500), $body-1: mat-typography-level(14px, 20px, 400), $caption: mat-typography-level(12px, 12px, 400), - $button: mat-typography-level(14px, 14px, 500) + $button: mat-typography-level(14px, 14px, 500), + // Line-height must be unit-less fraction of the font-size. + $input: mat-typography-level(16px, 1.125, 400) ) { @return ( font-family: $font-family, @@ -37,7 +39,8 @@ body-2: $body-2, body-1: $body-1, caption: $caption, - button: $button + button: $button, + input: $input, ); } @@ -61,7 +64,7 @@ } .mat-h2, #{$selector} h2 { - @include mat-typography-level-to-styles($config, display-2) + @include mat-typography-level-to-styles($config, display-2); // Note: The spec doesn't mention letter spacing. The value comes from // eyeballing it until it looked exactly like the spec examples.; diff --git a/src/lib/input/_input-theme.scss b/src/lib/input/_input-theme.scss index 91a7eab209b5..ed15940be785 100644 --- a/src/lib/input/_input-theme.scss +++ b/src/lib/input/_input-theme.scss @@ -91,20 +91,121 @@ } @mixin mat-input-typography($config) { + // The unit-less line-height from the font config. + $mat-input-line-height: mat-line-height($config, input); + + // The amount to scale the font for the floating label and subscript. + $mat-input-subscript-font-scale: 0.75; + // The amount to scale the font for the prefix and suffix icons. + $mat-input-prefix-suffix-icon-font-scale: 1.5; + + // The amount of space between the top of the line and the top of the actual text + // (as a fraction of the font-size). + $mat-input-line-spacing: ($mat-input-line-height - 1) / 2; + // The padding on the infix. Mocks show half of the text size, but seem to measure from the edge + // of the text itself, not the edge of the line; therefore we subtract off the line spacing. + $mat-input-infix-padding: 0.5em - $mat-input-line-spacing; + // The margin applied to the input-infix to reserve space for the floating label. + $mat-input-infix-margin-top: 1em * $mat-input-line-height * $mat-input-subscript-font-scale; + // Font size to use for the label and subscript text. + $mat-input-subscript-font-size: $mat-input-subscript-font-scale * 100%; + // Font size to use for the for the prefix and suffix icons. + $mat-input-prefix-suffix-icon-font-size: $mat-input-prefix-suffix-icon-font-scale * 100%; + // The space between the bottom of the input table and the subscript container. Mocks show half of + // the text size, but this margin is applied to an element with the subscript text font size, so + // we need to divide by the scale factor to make it half of the original text size. We again need + // to subtract off the line spacing since the mocks measure to the edge of the text, not the edge + // of the line. + $mat-input-subscript-margin-top: + 0.5em / $mat-input-subscript-font-scale - $mat-input-line-spacing; + // The padding applied to the input-wrapper to reserve space for the subscript, since it's + // absolutely positioned. This is a combination of the subscript's margin and line-height, but we + // need to multiply by the subscript font scale factor since the wrapper has a larger font size. + $mat-input-wrapper-padding-bottom: + ($mat-input-subscript-margin-top + $mat-input-line-height) * $mat-input-subscript-font-scale; + + // Applies a floating placeholder above the input itself. + @mixin mat-input-placeholder-floating { + transform: translateY(-$mat-input-infix-margin-top - $mat-input-infix-padding) + scale($mat-input-subscript-font-scale) + // We use perspecitve to fix the text blurriness as described here: + // http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/ + // This results in a small jitter after the label floats on Firefox, which the + // translateZ fixes. + perspective(100px) translateZ(0.001px); + // The tricks above used to smooth out the animation on chrome and firefox actually make things + // worse on IE, so we don't include them in the IE version. + -ms-transform: translateY(-$mat-input-infix-margin-top - $mat-input-infix-padding) + scale($mat-input-subscript-font-scale); + + width: 100% / $mat-input-subscript-font-scale; + } + .mat-input-container { - font-family: mat-font-family($config); - line-height: normal; + @include mat-typography-level-to-styles($config, input); + } + + .mat-input-wrapper { + padding-bottom: $mat-input-wrapper-padding-bottom; + } + + .mat-input-prefix, + .mat-input-suffix { + // Allow icons in a prefix or suffix to adapt to the correct size. + .mat-icon, + .mat-datepicker-toggle { + font-size: $mat-input-prefix-suffix-icon-font-size; + } + + // Allow icon buttons in a prefix or suffix to adapt to the correct size. + .mat-icon-button { + height: $mat-input-prefix-suffix-icon-font-scale * 1em; + width: $mat-input-prefix-suffix-icon-font-scale * 1em; + + .mat-icon { + line-height: $mat-input-prefix-suffix-icon-font-scale; + } + } + } + + .mat-input-infix { + padding: $mat-input-infix-padding 0; + // Throws off the baseline if we do it as a real margin, so we do it as a border instead. + border-top: $mat-input-infix-margin-top solid transparent; + } - .mat-icon { - font-size: 100%; + .mat-input-element { + &:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { + @include mat-input-placeholder-floating; } } + .mat-input-placeholder-wrapper { + top: -$mat-input-infix-margin-top; + padding-top: $mat-input-infix-margin-top; + } + .mat-input-placeholder { - font-size: 100%; + top: $mat-input-infix-margin-top + $mat-input-infix-padding; + + // Show the placeholder above the input when it's not empty, or focused. + &.mat-float:not(.mat-empty), .mat-focused &.mat-float { + @include mat-input-placeholder-floating; + } + } + + .mat-input-underline { + // We want the underline to start at the end of the content box, not the padding box, + // so we move it up by the padding amount; + bottom: $mat-input-wrapper-padding-bottom; } .mat-input-subscript-wrapper { - font-size: 75%; + font-size: $mat-input-subscript-font-size; + margin-top: $mat-input-subscript-margin-top; + + // We want the subscript to start at the end of the content box, not the padding box, + // so we move it up by the padding amount (adjusted for the smaller font size); + top: calc(100% - #{$mat-input-wrapper-padding-bottom / $mat-input-subscript-font-scale}); } } diff --git a/src/lib/input/input-container.scss b/src/lib/input/input-container.scss index ce8944266fb6..823e862390db 100644 --- a/src/lib/input/input-container.scss +++ b/src/lib/input/input-container.scss @@ -5,68 +5,13 @@ // Min amount of space between start and end hint. $mat-input-hint-min-space: 1em !default; -// The amount of additional line space beyond 1em on the input (1/2 below, 1/2 above). -$mat-input-line-spacing: 0.125 !default; // The height of the underline. $mat-input-underline-height: 1px !default; -// The amount to scale the font for the floating label and subscript. -$mat-input-subscript-font-scale: 0.75 !default; -// The amount to scale the font for the prefix and suffix icons. -$mat-input-prefix-suffix-icon-font-scale: 1.5 !default; - -// The line-height for all text in the md-input-container -$mat-input-line-height: 1 + $mat-input-line-spacing; -// The padding on the infix. Mocks show half of the text size, but seem to measure from the edge of -// the text itself, not the edge of the line; therefore we subtract off 1/2 of the line spacing. -$mat-input-infix-padding: 0.5em - $mat-input-line-spacing / 2; -// The margin applied to the input-infix to reserve space for the floating label. -$mat-input-infix-margin-top: 1em * $mat-input-line-height * $mat-input-subscript-font-scale; -// Font size to use for the label and subscript text. -$mat-input-subscript-font-size: $mat-input-subscript-font-scale * 100%; -// Font size to use for the for the prefix and suffix icons. -$mat-input-prefix-suffix-icon-font-size: $mat-input-prefix-suffix-icon-font-scale * 100%; -// The space between the bottom of the input table and the subscript container. Mocks show half of -// the text size, but this margin is applied to an element with the subscript text font size, so we -// need to divide by the scale factor to make it half of the original text size. We again need to -// subtract off 1/2 of the line spacing since the mocks measure to the edge of the text, not the -// edge of the line. -$mat-input-subscript-margin-top: - 0.5em / $mat-input-subscript-font-scale - $mat-input-line-spacing / 2; -// The padding applied to the input-wrapper to reserve space for the subscript, since it's -// absolutely positioned. This is a combination of the subscript's margin and line-height, but we -// need to multiply by the subscript font scale factor since the wrapper has a larger font size. -$mat-input-wrapper-padding-bottom: - ($mat-input-subscript-margin-top + $mat-input-line-height) * $mat-input-subscript-font-scale; - - -// Applies a floating placeholder above the input itself. -@mixin mat-input-placeholder-floating { - display: block; - - transform: translateY(-$mat-input-infix-margin-top - $mat-input-infix-padding) - scale($mat-input-subscript-font-scale) - // We use perspecitve to fix the text blurriness as described here: - // http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/ - // This results in a small jitter after the label floats on Firefox, which the - // translateZ fixes. - perspective(1px) translateZ(0.001px); - // The tricks above used to smooth out the animation on chrome and firefox actually make things - // worse on IE, so we don't include them in the IE version. - -ms-transform: translateY(-$mat-input-infix-margin-top - $mat-input-infix-padding) - scale($mat-input-subscript-font-scale); - - width: 100% / $mat-input-subscript-font-scale; -} .mat-input-container { display: inline-block; position: relative; - font-family: $mat-font-family; - - // TODO(mmalerba): should this come from typography settings? If so a lot of this CSS needs to go - // into some sort of typography mixin. - line-height: $mat-input-line-height; // To avoid problems with text-align. text-align: left; @@ -80,7 +25,6 @@ $mat-input-wrapper-padding-bottom: // cannot apply it to the host element directly. .mat-input-wrapper { position: relative; - padding-bottom: $mat-input-wrapper-padding-bottom; } // We use a flex layout to baseline align the prefix and suffix elements. @@ -101,21 +45,16 @@ $mat-input-wrapper-padding-bottom: .mat-datepicker-toggle { width: 1em; height: 1em; - font-size: $mat-input-prefix-suffix-icon-font-size; vertical-align: text-bottom; } // Allow icon buttons in a prefix or suffix to adapt to the correct size. .mat-icon-button { - font-size: inherit; - line-height: $mat-input-line-height; - height: $mat-input-prefix-suffix-icon-font-scale * 1em; - width: $mat-input-prefix-suffix-icon-font-scale * 1em; + font: inherit; vertical-align: baseline; .mat-icon { font-size: inherit; - line-height: $mat-input-prefix-suffix-icon-font-scale; width: 1em; height: 1em; vertical-align: baseline; @@ -126,9 +65,6 @@ $mat-input-wrapper-padding-bottom: .mat-input-infix { display: block; position: relative; - padding: $mat-input-infix-padding 0; - // Throws off the baseline if we do it as a real margin, so we do it as a border instead. - border-top: $mat-input-infix-margin-top solid transparent; flex: auto; } @@ -173,7 +109,6 @@ $mat-input-wrapper-padding-bottom: // classes take over to fulfill this behaviour. // Assumes the autofill is non-empty. &:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - @include mat-input-placeholder-floating; transition: none; } @@ -192,11 +127,9 @@ $mat-input-wrapper-padding-bottom: .mat-input-placeholder-wrapper { position: absolute; left: 0; - top: -$mat-input-infix-margin-top; box-sizing: content-box; width: 100%; height: 100%; - padding-top: $mat-input-infix-margin-top; overflow: hidden; pointer-events: none; // We shouldn't catch mouse events (let them through). } @@ -209,8 +142,8 @@ $mat-input-wrapper-padding-bottom: // infix
. position: absolute; left: 0; - top: $mat-input-infix-margin-top + $mat-input-infix-padding; + font: inherit; pointer-events: none; // We shouldn't catch mouse events (let them through). // Put ellipsis text overflow. @@ -221,7 +154,7 @@ $mat-input-wrapper-padding-bottom: overflow: hidden; // The perspective helps smooth out animations on Chrome and Firefox but isn't needed on IE. - transform: perspective(1px); + transform: perspective(100px); -ms-transform: none; transform-origin: 0 0; @@ -230,15 +163,9 @@ $mat-input-wrapper-padding-bottom: width $swift-ease-out-duration $swift-ease-out-timing-function; &.mat-empty { - display: block; cursor: text; } - // Show the placeholder above the input when it's not empty, or focused. - &.mat-float:not(.mat-empty), .mat-focused &.mat-float { - @include mat-input-placeholder-floating; - } - [dir='rtl'] & { transform-origin: 100% 0; left: auto; @@ -259,10 +186,6 @@ $mat-input-wrapper-padding-bottom: height: $mat-input-underline-height; width: 100%; - // We want the underline to start at the end of the content box, not the padding box, - // so we move it up by the padding amount; - bottom: $mat-input-wrapper-padding-bottom; - &.mat-disabled { @include mat-control-disabled-underline(); background-position: 0; @@ -293,14 +216,8 @@ $mat-input-wrapper-padding-bottom: // Note that we're using `top` in order to allow for stacked children to flow downwards. .mat-input-subscript-wrapper { position: absolute; - font-size: $mat-input-subscript-font-size; - margin-top: $mat-input-subscript-margin-top; width: 100%; overflow: hidden; // prevents multi-line errors from overlapping the input - - // We want the subscript to start at the end of the content box, not the padding box, - // so we move it up by the padding amount (adjusted for the smaller font size); - top: calc(100% - #{$mat-input-wrapper-padding-bottom / $mat-input-subscript-font-scale}); } // Scale down icons in the placeholder and hint to be the same size as the text. From 4f4f94b76143db5547f47bae461d705344b339e5 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Wed, 31 May 2017 16:12:29 -0700 Subject: [PATCH 8/9] switch font-size to inherit --- src/lib/core/typography/_typography.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/core/typography/_typography.scss b/src/lib/core/typography/_typography.scss index a3d0d02d2a2b..f39186eb39b0 100644 --- a/src/lib/core/typography/_typography.scss +++ b/src/lib/core/typography/_typography.scss @@ -25,7 +25,7 @@ $caption: mat-typography-level(12px, 12px, 400), $button: mat-typography-level(14px, 14px, 500), // Line-height must be unit-less fraction of the font-size. - $input: mat-typography-level(16px, 1.125, 400) + $input: mat-typography-level(inherit, 1.125, 400) ) { @return ( font-family: $font-family, From 886025d4423d24c653cb92ded22cf0327e143fe7 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Thu, 1 Jun 2017 10:11:26 -0700 Subject: [PATCH 9/9] fix non-floating placeholders --- src/demo-app/input/input-demo.html | 2 +- src/lib/input/input-container.scss | 23 ++++++++++++++++++----- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html index cdfc3f13a4be..55b9b669b7da 100644 --- a/src/demo-app/input/input-demo.html +++ b/src/demo-app/input/input-demo.html @@ -8,7 +8,7 @@ diff --git a/src/lib/input/input-container.scss b/src/lib/input/input-container.scss index 823e862390db..34740a494e3c 100644 --- a/src/lib/input/input-container.scss +++ b/src/lib/input/input-container.scss @@ -108,8 +108,17 @@ $mat-input-underline-height: 1px !default; // Once the autofill is committed, a change event happen and the regular md-input-container // classes take over to fulfill this behaviour. // Assumes the autofill is non-empty. - &:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transition: none; + &:-webkit-autofill + .mat-input-placeholder-wrapper { + // The input is still technically empty at this point, so we need to hide non-floating + // placeholders to prevent overlapping with the autofilled value. + .mat-input-placeholder { + display: none; + } + + .mat-float { + display: block; + transition: none; + } } // Note that we can't use something like visibility: hidden or @@ -148,7 +157,6 @@ $mat-input-underline-height: 1px !default; // Put ellipsis text overflow. width: 100%; - display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; @@ -162,8 +170,13 @@ $mat-input-underline-height: 1px !default; color $swift-ease-out-duration $swift-ease-out-timing-function, width $swift-ease-out-duration $swift-ease-out-timing-function; - &.mat-empty { - cursor: text; + // Hide the placeholder initially, and only show it when it's floating or the input is empty. + display: none; + + &.mat-empty, + &.mat-float:not(.mat-empty), + .mat-focused &.mat-float { + display: block; } [dir='rtl'] & {
- +