Skip to content

Commit eb37c19

Browse files
mmalerbammalerba
committed
outline color & thickness
1 parent 1706343 commit eb37c19

File tree

4 files changed

+103
-14
lines changed

4 files changed

+103
-14
lines changed

‎src/lib/form-field/_form-field-outline-theme.scss

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,64 @@
77
// Theme styles that only apply to the outline appearance of the form-field.
88

99
@mixin mat-form-field-outline-theme($theme) {
10+
$primary: map-get($theme, primary);
11+
$accent: map-get($theme, accent);
12+
$warn: map-get($theme, warn);
1013
$foreground: map-get($theme, foreground);
14+
$is-dark-theme: map-get($theme, is-dark);
15+
1116
$label-disabled-color: mat-color($foreground, disabled-text);
17+
$outline-color: mat-color($foreground, divider, if($is-dark-theme, 0.5, 0.42));
18+
$outline-color-accent: mat-color($accent);
19+
$outline-color-warn: mat-color($warn);
20+
$outline-focused-color: mat-color($primary);
1221

1322
.mat-form-field-appearance-outline {
23+
.mat-form-field-outline {
24+
&::before,
25+
&::after {
26+
border-color: $outline-color;
27+
}
28+
}
29+
1430
&.mat-form-field-disabled {
1531
.mat-form-field-label {
1632
color: $label-disabled-color;
1733
}
1834
}
35+
36+
&.mat-focused {
37+
.mat-form-field-outline {
38+
&::before,
39+
&::after {
40+
border-color: $outline-focused-color;
41+
}
42+
}
43+
44+
&.mat-accent .mat-form-field-outline {
45+
&::before,
46+
&::after {
47+
border-color: $outline-color-accent;
48+
}
49+
}
50+
51+
&.mat-warn .mat-form-field-outline {
52+
&::before,
53+
&::after {
54+
border-color: $outline-color-warn;
55+
}
56+
}
57+
}
58+
59+
// Class repeated so that rule is specific enough to override focused accent color case.
60+
&.mat-form-field-invalid.mat-form-field-invalid {
61+
.mat-form-field-outline {
62+
&::before,
63+
&::after {
64+
border-color: $outline-color-warn;
65+
}
66+
}
67+
}
1968
}
2069
}
2170

‎src/lib/form-field/form-field-outline.scss

Lines changed: 50 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ $mat-form-field-outline-side-padding: 0.75em !default;
99
$mat-form-field-outline-subscript-font-scale: 0.75 !default;
1010
// The amount of overlap between the label and the outline.
1111
$mat-form-field-outline-label-overlap: 0.25em;
12+
// The border radius of the outline.
13+
$mat-form-field-outline-border-radius: 5px;
14+
// The width of the outline.
15+
$mat-form-field-outline-width: 1px;
16+
// The width of the thick outline (used for focus, hover, and error state).
17+
$mat-form-field-outline-thick-width: 2px;
1218
// The horizontal padding between the edge of the subscript box and the start of the subscript text.
1319
$mat-form-field-outline-subscript-padding:
1420
$mat-form-field-outline-side-padding / $mat-form-field-outline-subscript-font-scale;
@@ -34,24 +40,56 @@ $mat-form-field-outline-subscript-padding:
3440
left: 0;
3541
right: 0;
3642
pointer-events: none;
43+
44+
&::before,
45+
&::after {
46+
content: '';
47+
width: $mat-form-field-outline-side-padding;
48+
border: $mat-form-field-outline-width solid;
49+
flex-grow: 1;
50+
}
51+
52+
&::before {
53+
border-radius: $mat-form-field-outline-border-radius 0 0 $mat-form-field-outline-border-radius;
54+
border-right: none;
55+
}
56+
57+
&::after {
58+
border-radius: 0 $mat-form-field-outline-border-radius $mat-form-field-outline-border-radius 0;
59+
border-left: none;
60+
}
3761
}
3862

39-
.mat-form-field-outline::before,
40-
.mat-form-field-outline::after {
41-
content: '';
42-
width: 12px; // use var for this
43-
border: 1px solid rgba(0, 0, 0, .5); //use vars for this
44-
flex: 1;
63+
.mat-form-field-outline-thick {
64+
opacity: 0;
65+
66+
&::before,
67+
&::after {
68+
border-width: $mat-form-field-outline-thick-width;
69+
transition: border-color 300ms $swift-ease-out-timing-function;
70+
}
4571
}
4672

47-
.mat-form-field-outline::before {
48-
border-radius: 4px 0 0 4px; // use vars for this
49-
border-right: none;
73+
&.mat-focused,
74+
&.mat-form-field-invalid {
75+
.mat-form-field-outline {
76+
opacity: 0;
77+
transition: opacity 100ms $swift-ease-out-timing-function;
78+
}
79+
.mat-form-field-outline-thick {
80+
opacity: 1;
81+
}
5082
}
5183

52-
.mat-form-field-outline::after {
53-
border-radius: 0 4px 4px 0; // use vars for this
54-
border-left: none;
84+
&:not(.mat-form-field-disabled) .mat-form-field-flex:hover {
85+
& ~ .mat-form-field-outline {
86+
opacity: 0;
87+
transition: opacity 600ms $swift-ease-out-timing-function;
88+
}
89+
90+
& ~ .mat-form-field-outline-thick {
91+
opacity: 1;
92+
}
5593
}
5694

5795
.mat-form-field-subscript-wrapper {

‎src/lib/form-field/form-field.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,8 @@ $mat-form-field-default-infix-width: 180px !default;
9999

100100
transform-origin: 0 0;
101101
transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
102-
color $swift-ease-out-duration $swift-ease-out-timing-function,
103-
width $swift-ease-out-duration $swift-ease-out-timing-function;
102+
color $swift-ease-out-duration $swift-ease-out-timing-function,
103+
width $swift-ease-out-duration $swift-ease-out-timing-function;
104104

105105
// Hide the label initially, and only show it when it's floating or the control is empty.
106106
display: none;

‎src/lib/form-field/form-field.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,8 @@ export type MatFormFieldAppearance = 'legacy' | 'standard' | 'fill' | 'outline';
9797
'[class.mat-form-field-hide-placeholder]': '_hideControlPlaceholder()',
9898
'[class.mat-form-field-disabled]': '_control.disabled',
9999
'[class.mat-focused]': '_control.focused',
100+
'[class.mat-accent]': 'color == "accent"',
101+
'[class.mat-warn]': 'color == "warn"',
100102
'[class.ng-untouched]': '_shouldForward("untouched")',
101103
'[class.ng-touched]': '_shouldForward("touched")',
102104
'[class.ng-pristine]': '_shouldForward("pristine")',

0 commit comments

Comments
 (0)