Skip to content

Commit 919e3d5

Browse files
mmalerbammalerba
committed
integrate typography system
1 parent dbc4661 commit 919e3d5

File tree

3 files changed

+116
-95
lines changed

3 files changed

+116
-95
lines changed

‎src/lib/core/typography/_typography.scss‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,9 @@
2323
$body-2: mat-typography-level(14px, 24px, 500),
2424
$body-1: mat-typography-level(14px, 20px, 400),
2525
$caption: mat-typography-level(12px, 12px, 400),
26-
$button: mat-typography-level(14px, 14px, 500)
26+
$button: mat-typography-level(14px, 14px, 500),
27+
// Line-height must be unit-less fraction of the font-size.
28+
$input: mat-typography-level(16px, 1.125, 400)
2729
) {
2830
@return (
2931
font-family: $font-family,
@@ -37,7 +39,8 @@
3739
body-2: $body-2,
3840
body-1: $body-1,
3941
caption: $caption,
40-
button: $button
42+
button: $button,
43+
input: $input,
4144
);
4245
}
4346

@@ -61,7 +64,7 @@
6164
}
6265

6366
.mat-h2, #{$selector} h2 {
64-
@include mat-typography-level-to-styles($config, display-2)
67+
@include mat-typography-level-to-styles($config, display-2);
6568

6669
// Note: The spec doesn't mention letter spacing. The value comes from
6770
// eyeballing it until it looked exactly like the spec examples.;

‎src/lib/input/_input-theme.scss‎

Lines changed: 107 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -91,20 +91,121 @@
9191
}
9292

9393
@mixin mat-input-typography($config) {
94+
// The unit-less line-height from the font config.
95+
$mat-input-line-height: mat-line-height($config, input);
96+
97+
// The amount to scale the font for the floating label and subscript.
98+
$mat-input-subscript-font-scale: 0.75;
99+
// The amount to scale the font for the prefix and suffix icons.
100+
$mat-input-prefix-suffix-icon-font-scale: 1.5;
101+
102+
// The amount of space between the top of the line and the top of the actual text
103+
// (as a fraction of the font-size).
104+
$mat-input-line-spacing: ($mat-input-line-height - 1) / 2;
105+
// The padding on the infix. Mocks show half of the text size, but seem to measure from the edge
106+
// of the text itself, not the edge of the line; therefore we subtract off the line spacing.
107+
$mat-input-infix-padding: 0.5em - $mat-input-line-spacing;
108+
// The margin applied to the input-infix to reserve space for the floating label.
109+
$mat-input-infix-margin-top: 1em * $mat-input-line-height * $mat-input-subscript-font-scale;
110+
// Font size to use for the label and subscript text.
111+
$mat-input-subscript-font-size: $mat-input-subscript-font-scale * 100%;
112+
// Font size to use for the for the prefix and suffix icons.
113+
$mat-input-prefix-suffix-icon-font-size: $mat-input-prefix-suffix-icon-font-scale * 100%;
114+
// The space between the bottom of the input table and the subscript container. Mocks show half of
115+
// the text size, but this margin is applied to an element with the subscript text font size, so
116+
// we need to divide by the scale factor to make it half of the original text size. We again need
117+
// to subtract off the line spacing since the mocks measure to the edge of the text, not the edge
118+
// of the line.
119+
$mat-input-subscript-margin-top:
120+
0.5em / $mat-input-subscript-font-scale - $mat-input-line-spacing;
121+
// The padding applied to the input-wrapper to reserve space for the subscript, since it's
122+
// absolutely positioned. This is a combination of the subscript's margin and line-height, but we
123+
// need to multiply by the subscript font scale factor since the wrapper has a larger font size.
124+
$mat-input-wrapper-padding-bottom:
125+
($mat-input-subscript-margin-top + $mat-input-line-height) * $mat-input-subscript-font-scale;
126+
127+
// Applies a floating placeholder above the input itself.
128+
@mixin mat-input-placeholder-floating {
129+
transform: translateY(-$mat-input-infix-margin-top - $mat-input-infix-padding)
130+
scale($mat-input-subscript-font-scale)
131+
// We use perspecitve to fix the text blurriness as described here:
132+
// http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/
133+
// This results in a small jitter after the label floats on Firefox, which the
134+
// translateZ fixes.
135+
perspective(100px) translateZ(0.001px);
136+
// The tricks above used to smooth out the animation on chrome and firefox actually make things
137+
// worse on IE, so we don't include them in the IE version.
138+
-ms-transform: translateY(-$mat-input-infix-margin-top - $mat-input-infix-padding)
139+
scale($mat-input-subscript-font-scale);
140+
141+
width: 100% / $mat-input-subscript-font-scale;
142+
}
143+
94144
.mat-input-container {
95-
font-family: mat-font-family($config);
96-
line-height: normal;
145+
@include mat-typography-level-to-styles($config, input);
146+
}
147+
148+
.mat-input-wrapper {
149+
padding-bottom: $mat-input-wrapper-padding-bottom;
150+
}
151+
152+
.mat-input-prefix,
153+
.mat-input-suffix {
154+
// Allow icons in a prefix or suffix to adapt to the correct size.
155+
.mat-icon,
156+
.mat-datepicker-toggle {
157+
font-size: $mat-input-prefix-suffix-icon-font-size;
158+
}
159+
160+
// Allow icon buttons in a prefix or suffix to adapt to the correct size.
161+
.mat-icon-button {
162+
height: $mat-input-prefix-suffix-icon-font-scale * 1em;
163+
width: $mat-input-prefix-suffix-icon-font-scale * 1em;
164+
165+
.mat-icon {
166+
line-height: $mat-input-prefix-suffix-icon-font-scale;
167+
}
168+
}
169+
}
170+
171+
.mat-input-infix {
172+
padding: $mat-input-infix-padding 0;
173+
// Throws off the baseline if we do it as a real margin, so we do it as a border instead.
174+
border-top: $mat-input-infix-margin-top solid transparent;
175+
}
97176

98-
.mat-icon {
99-
font-size: 100%;
177+
.mat-input-element {
178+
&:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float {
179+
@include mat-input-placeholder-floating;
100180
}
101181
}
102182

183+
.mat-input-placeholder-wrapper {
184+
top: -$mat-input-infix-margin-top;
185+
padding-top: $mat-input-infix-margin-top;
186+
}
187+
103188
.mat-input-placeholder {
104-
font-size: 100%;
189+
top: $mat-input-infix-margin-top + $mat-input-infix-padding;
190+
191+
// Show the placeholder above the input when it's not empty, or focused.
192+
&.mat-float:not(.mat-empty), .mat-focused &.mat-float {
193+
@include mat-input-placeholder-floating;
194+
}
195+
}
196+
197+
.mat-input-underline {
198+
// We want the underline to start at the end of the content box, not the padding box,
199+
// so we move it up by the padding amount;
200+
bottom: $mat-input-wrapper-padding-bottom;
105201
}
106202

107203
.mat-input-subscript-wrapper {
108-
font-size: 75%;
204+
font-size: $mat-input-subscript-font-size;
205+
margin-top: $mat-input-subscript-margin-top;
206+
207+
// We want the subscript to start at the end of the content box, not the padding box,
208+
// so we move it up by the padding amount (adjusted for the smaller font size);
209+
top: calc(100% - #{$mat-input-wrapper-padding-bottom / $mat-input-subscript-font-scale});
109210
}
110211
}

‎src/lib/input/input-container.scss‎

Lines changed: 3 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -5,68 +5,13 @@
55

66
// Min amount of space between start and end hint.
77
$mat-input-hint-min-space: 1em !default;
8-
// The amount of additional line space beyond 1em on the input (1/2 below, 1/2 above).
9-
$mat-input-line-spacing: 0.125 !default;
108
// The height of the underline.
119
$mat-input-underline-height: 1px !default;
12-
// The amount to scale the font for the floating label and subscript.
13-
$mat-input-subscript-font-scale: 0.75 !default;
14-
// The amount to scale the font for the prefix and suffix icons.
15-
$mat-input-prefix-suffix-icon-font-scale: 1.5 !default;
16-
17-
// The line-height for all text in the md-input-container
18-
$mat-input-line-height: 1 + $mat-input-line-spacing;
19-
// The padding on the infix. Mocks show half of the text size, but seem to measure from the edge of
20-
// the text itself, not the edge of the line; therefore we subtract off 1/2 of the line spacing.
21-
$mat-input-infix-padding: 0.5em - $mat-input-line-spacing / 2;
22-
// The margin applied to the input-infix to reserve space for the floating label.
23-
$mat-input-infix-margin-top: 1em * $mat-input-line-height * $mat-input-subscript-font-scale;
24-
// Font size to use for the label and subscript text.
25-
$mat-input-subscript-font-size: $mat-input-subscript-font-scale * 100%;
26-
// Font size to use for the for the prefix and suffix icons.
27-
$mat-input-prefix-suffix-icon-font-size: $mat-input-prefix-suffix-icon-font-scale * 100%;
28-
// The space between the bottom of the input table and the subscript container. Mocks show half of
29-
// the text size, but this margin is applied to an element with the subscript text font size, so we
30-
// need to divide by the scale factor to make it half of the original text size. We again need to
31-
// subtract off 1/2 of the line spacing since the mocks measure to the edge of the text, not the
32-
// edge of the line.
33-
$mat-input-subscript-margin-top:
34-
0.5em / $mat-input-subscript-font-scale - $mat-input-line-spacing / 2;
35-
// The padding applied to the input-wrapper to reserve space for the subscript, since it's
36-
// absolutely positioned. This is a combination of the subscript's margin and line-height, but we
37-
// need to multiply by the subscript font scale factor since the wrapper has a larger font size.
38-
$mat-input-wrapper-padding-bottom:
39-
($mat-input-subscript-margin-top + $mat-input-line-height) * $mat-input-subscript-font-scale;
40-
41-
42-
// Applies a floating placeholder above the input itself.
43-
@mixin mat-input-placeholder-floating {
44-
display: block;
45-
46-
transform: translateY(-$mat-input-infix-margin-top - $mat-input-infix-padding)
47-
scale($mat-input-subscript-font-scale)
48-
// We use perspecitve to fix the text blurriness as described here:
49-
// http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/
50-
// This results in a small jitter after the label floats on Firefox, which the
51-
// translateZ fixes.
52-
perspective(1px) translateZ(0.001px);
53-
// The tricks above used to smooth out the animation on chrome and firefox actually make things
54-
// worse on IE, so we don't include them in the IE version.
55-
-ms-transform: translateY(-$mat-input-infix-margin-top - $mat-input-infix-padding)
56-
scale($mat-input-subscript-font-scale);
57-
58-
width: 100% / $mat-input-subscript-font-scale;
59-
}
6010

6111

6212
.mat-input-container {
6313
display: inline-block;
6414
position: relative;
65-
font-family: $mat-font-family;
66-
67-
// TODO(mmalerba): should this come from typography settings? If so a lot of this CSS needs to go
68-
// into some sort of typography mixin.
69-
line-height: $mat-input-line-height;
7015

7116
// To avoid problems with text-align.
7217
text-align: left;
@@ -80,7 +25,6 @@ $mat-input-wrapper-padding-bottom:
8025
// cannot apply it to the host element directly.
8126
.mat-input-wrapper {
8227
position: relative;
83-
padding-bottom: $mat-input-wrapper-padding-bottom;
8428
}
8529

8630
// We use a flex layout to baseline align the prefix and suffix elements.
@@ -101,21 +45,16 @@ $mat-input-wrapper-padding-bottom:
10145
.mat-datepicker-toggle {
10246
width: 1em;
10347
height: 1em;
104-
font-size: $mat-input-prefix-suffix-icon-font-size;
10548
vertical-align: text-bottom;
10649
}
10750

10851
// Allow icon buttons in a prefix or suffix to adapt to the correct size.
10952
.mat-icon-button {
110-
font-size: inherit;
111-
line-height: $mat-input-line-height;
112-
height: $mat-input-prefix-suffix-icon-font-scale * 1em;
113-
width: $mat-input-prefix-suffix-icon-font-scale * 1em;
53+
font: inherit;
11454
vertical-align: baseline;
11555

11656
.mat-icon {
11757
font-size: inherit;
118-
line-height: $mat-input-prefix-suffix-icon-font-scale;
11958
width: 1em;
12059
height: 1em;
12160
vertical-align: baseline;
@@ -126,9 +65,6 @@ $mat-input-wrapper-padding-bottom:
12665
.mat-input-infix {
12766
display: block;
12867
position: relative;
129-
padding: $mat-input-infix-padding 0;
130-
// Throws off the baseline if we do it as a real margin, so we do it as a border instead.
131-
border-top: $mat-input-infix-margin-top solid transparent;
13268
flex: auto;
13369
}
13470

@@ -173,7 +109,6 @@ $mat-input-wrapper-padding-bottom:
173109
// classes take over to fulfill this behaviour.
174110
// Assumes the autofill is non-empty.
175111
&:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float {
176-
@include mat-input-placeholder-floating;
177112
transition: none;
178113
}
179114

@@ -192,11 +127,9 @@ $mat-input-wrapper-padding-bottom:
192127
.mat-input-placeholder-wrapper {
193128
position: absolute;
194129
left: 0;
195-
top: -$mat-input-infix-margin-top;
196130
box-sizing: content-box;
197131
width: 100%;
198132
height: 100%;
199-
padding-top: $mat-input-infix-margin-top;
200133
overflow: hidden;
201134
pointer-events: none; // We shouldn't catch mouse events (let them through).
202135
}
@@ -209,8 +142,8 @@ $mat-input-wrapper-padding-bottom:
209142
// infix <div>.
210143
position: absolute;
211144
left: 0;
212-
top: $mat-input-infix-margin-top + $mat-input-infix-padding;
213145

146+
font: inherit;
214147
pointer-events: none; // We shouldn't catch mouse events (let them through).
215148

216149
// Put ellipsis text overflow.
@@ -221,7 +154,7 @@ $mat-input-wrapper-padding-bottom:
221154
overflow: hidden;
222155

223156
// The perspective helps smooth out animations on Chrome and Firefox but isn't needed on IE.
224-
transform: perspective(1px);
157+
transform: perspective(100px);
225158
-ms-transform: none;
226159

227160
transform-origin: 0 0;
@@ -230,15 +163,9 @@ $mat-input-wrapper-padding-bottom:
230163
width $swift-ease-out-duration $swift-ease-out-timing-function;
231164

232165
&.mat-empty {
233-
display: block;
234166
cursor: text;
235167
}
236168

237-
// Show the placeholder above the input when it's not empty, or focused.
238-
&.mat-float:not(.mat-empty), .mat-focused &.mat-float {
239-
@include mat-input-placeholder-floating;
240-
}
241-
242169
[dir='rtl'] & {
243170
transform-origin: 100% 0;
244171
left: auto;
@@ -259,10 +186,6 @@ $mat-input-wrapper-padding-bottom:
259186
height: $mat-input-underline-height;
260187
width: 100%;
261188

262-
// We want the underline to start at the end of the content box, not the padding box,
263-
// so we move it up by the padding amount;
264-
bottom: $mat-input-wrapper-padding-bottom;
265-
266189
&.mat-disabled {
267190
@include mat-control-disabled-underline();
268191
background-position: 0;
@@ -293,14 +216,8 @@ $mat-input-wrapper-padding-bottom:
293216
// Note that we're using `top` in order to allow for stacked children to flow downwards.
294217
.mat-input-subscript-wrapper {
295218
position: absolute;
296-
font-size: $mat-input-subscript-font-size;
297-
margin-top: $mat-input-subscript-margin-top;
298219
width: 100%;
299220
overflow: hidden; // prevents multi-line errors from overlapping the input
300-
301-
// We want the subscript to start at the end of the content box, not the padding box,
302-
// so we move it up by the padding amount (adjusted for the smaller font size);
303-
top: calc(100% - #{$mat-input-wrapper-padding-bottom / $mat-input-subscript-font-scale});
304221
}
305222

306223
// Scale down icons in the placeholder and hint to be the same size as the text.

0 commit comments

Comments
 (0)