Skip to content

fix(form-field): Make labels show while printing #12766

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from Sep 18, 2018
Merged

fix(form-field): Make labels show while printing #12766

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b516a37
fix(form-field): Make labels show while printing
vivsy Aug 21, 2018
0fc1998
fix(form-field): Make labels show while printing
vivsy Aug 22, 2018
c734f14
fix
vivsy Aug 23, 2018
468f771
Merge github.com:angular/material2 into test
vivsy Aug 23, 2018
7c6de70
put on new line
vivsy Sep 11, 2018
09c1561
indent 2.0
vivsy Sep 12, 2018
0f8620f
deleted whitespace char
vivsy Sep 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 41 additions & 1 deletion src/lib/form-field/_form-field-legacy-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,13 +49,24 @@ $mat-form-field-legacy-dedupe: 0;
// 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 + $mat-form-field-legacy-dedupe)
scale($font-scale);
scale($font-scale);

width: 100% / $font-scale + $mat-form-field-legacy-dedupe;

$mat-form-field-legacy-dedupe: $mat-form-field-legacy-dedupe + 0.00001 !global;
}

// Same as mixin above, but omits the translateZ for printing purposes.
@mixin _mat-form-field-legacy-label-floating-print($font-scale, $infix-padding, $infix-margin-top) {
// This results in a small jitter after the label floats on Firefox, which the
// translateZ fixes.
transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-legacy-dedupe)
scale($font-scale);
// 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.
$mat-form-field-legacy-dedupe: $mat-form-field-legacy-dedupe + 0.00001 !global;
}

@mixin mat-form-field-legacy-typography($config) {
// The unit-less line-height from the font config.
$line-height: mat-line-height($config, input);
Expand Down Expand Up @@ -130,4 +141,33 @@ $mat-form-field-legacy-dedupe: 0;
top: calc(100% - #{$wrapper-padding-bottom / $subscript-font-scale});
}
}

// translateZ causes the label to not appear while printing, so we override it to not
// apply translateZ while printing
@media print {
.mat-form-field-appearance-legacy {
&.mat-form-field-can-float {
&.mat-form-field-should-float .mat-form-field-label,
.mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
@include _mat-form-field-legacy-label-floating-print(
$subscript-font-scale, $infix-padding, $infix-margin-top);
}

// @breaking-change 7.0.0 will rely on AutofillMonitor instead.
.mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper
.mat-form-field-label {
@include _mat-form-field-legacy-label-floating-print(
$subscript-font-scale, $infix-padding, $infix-margin-top);
}

// Server-side rendered matInput with a label attribute but label not shown
// (used as a pure CSS stand-in for mat-form-field-should-float).
.mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
.mat-form-field-label {
@include _mat-form-field-legacy-label-floating-print(
$subscript-font-scale, $infix-padding, $infix-margin-top);
}
}
}
}
}