skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(input): theming mixin error (#5254)

Browse Source 
* Fixes an error in the input theming mixin that was caused by a nested mixin.
* Removes the `mat-input-` prefix from the mixin local variables since they're not exposed and don't need to be prefixed.

Fixes #5232.
This commit is contained in:
Kristiyan Kostadinov
2017-06-23 00:33:27 +02:00
committed by Jeremy Elbourn
parent 1dcaca7b5d
commit 37efb5429f
1 changed files with 47 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/input/_input-theme.scss
+47 -47
View File
@@ -43,7 +43,7 @@
color: mat-color($foreground, disabled-text);
}
// See mat-input-placeholder-floating mixin in input-container.scss
// See _mat-input-placeholder-floating mixin in input-container.scss
input.mat-input-element:-webkit-autofill + .mat-input-placeholder,
.mat-focused .mat-input-placeholder.mat-float {
.mat-placeholder-required {
@@ -90,63 +90,61 @@
}
}
// Applies a floating placeholder above the input itself.
@mixin _mat-input-placeholder-floating($font-scale, $infix-padding, $infix-margin-top) {
transform: translateY(-$infix-margin-top - $infix-padding)
scale($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(-$infix-margin-top - $infix-padding)
scale($font-scale);
width: 100% / $font-scale;
}
@mixin mat-input-typography($config) {
// The unit-less line-height from the font config.
$mat-input-line-height: mat-line-height($config, 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;
$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;
$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;
$line-spacing: ($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;
$infix-padding: 0.5em - $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;
$infix-margin-top: 1em * $line-height * $subscript-font-scale;
// Font size to use for the label and subscript text.
$mat-input-subscript-font-size: $mat-input-subscript-font-scale * 100%;
$subscript-font-size: $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%;
$prefix-suffix-icon-font-size: $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;
$subscript-margin-top: 0.5em / $subscript-font-scale - $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;
}
$wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;
.mat-input-container {
@include mat-typography-level-to-styles($config, input);
}
.mat-input-wrapper {
padding-bottom: $mat-input-wrapper-padding-bottom;
padding-bottom: $wrapper-padding-bottom;
}
.mat-input-prefix,
@@ -154,58 +152,60 @@
// 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;
font-size: $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;
height: $prefix-suffix-icon-font-scale * 1em;
width: $prefix-suffix-icon-font-scale * 1em;
.mat-icon {
line-height: $mat-input-prefix-suffix-icon-font-scale;
line-height: $prefix-suffix-icon-font-scale;
}
}
}
.mat-input-infix {
padding: $mat-input-infix-padding 0;
padding: $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;
border-top: $infix-margin-top solid transparent;
}
.mat-input-element {
&:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float {
@include mat-input-placeholder-floating;
@include _mat-input-placeholder-floating($subscript-font-scale,
$infix-padding, $infix-margin-top);
}
}
.mat-input-placeholder-wrapper {
top: -$mat-input-infix-margin-top;
padding-top: $mat-input-infix-margin-top;
top: -$infix-margin-top;
padding-top: $infix-margin-top;
}
.mat-input-placeholder {
top: $mat-input-infix-margin-top + $mat-input-infix-padding;
top: $infix-margin-top + $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;
@include _mat-input-placeholder-floating($subscript-font-scale,
$infix-padding, $infix-margin-top);
}
}
.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;
// so we move it up by the padding amount.
bottom: $wrapper-padding-bottom;
}
.mat-input-subscript-wrapper {
font-size: $mat-input-subscript-font-size;
margin-top: $mat-input-subscript-margin-top;
font-size: $subscript-font-size;
margin-top: $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});
top: calc(100% - #{$wrapper-padding-bottom / $subscript-font-scale});
}
}