-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(forms): focused, placeholders, truncating, hints, & compact fiel…
…ds (#10) * fix text fields * support placeholders infields * use placeholder color light text * add truncating * Update lib/_forms.scss Co-Authored-By: cmugla <celeste.glavin@wework.com> * ellipsis stuff doesn't really work but its a little bit nicer * add IE prefix for placeholder-shown * remove prefix for IE, breaks everything * Add compact fields * match spec spacing: * add hint states * add border colors * fix variable refs and spacing issues with hints * reference 1rem in field-height calcs * oop misread the spec, correct label focused spacing * make --active class the true fallback * Update lib/_forms.scss Co-Authored-By: cmugla <celeste.glavin@wework.com> * add transition to placholder * Add disabled state * Update lib/_base.scss Co-Authored-By: cmugla <celeste.glavin@wework.com>
- Loading branch information
Celeste Glavin
authored and
Adam Raider
committed
Feb 27, 2019
1 parent
01a6cf8
commit 294ef60
Showing
4 changed files
with
317 additions
and
55 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,70 +1,148 @@ | ||
.FormControl { | ||
border: 1px solid $color-gray35; | ||
background-color: $color-white; | ||
border-radius: $border-radius; | ||
position: relative; | ||
height: $field-height; | ||
|
||
.#{$prefix}fieldWrapper { | ||
&:not(:last-child) { | ||
margin-bottom: 1.5rem; | ||
} | ||
} | ||
|
||
&--active { | ||
border-color: $color-blue50; | ||
} | ||
.#{$prefix}field { | ||
border: $field-border-width solid $color-gray35; | ||
background-color: $color-white; | ||
border-radius: $border-radius; | ||
position: relative; | ||
height: $field-height; | ||
|
||
label, | ||
&__label { | ||
font-family: $font-stack-mono; | ||
font-size: 16px; | ||
line-height: 24px; | ||
font-size: $field-label-size; | ||
line-height: 1; | ||
font-weight: 400; | ||
display: block; | ||
text-transform: uppercase; | ||
position: absolute; | ||
left: 1rem; | ||
top: 15px; | ||
display: flex; | ||
align-items: center; | ||
left: $field-h-spacing; | ||
top: $field-v-spacing; | ||
color: $color-text-medium; | ||
transition: all 0.125s ease; | ||
pointer-events: none; | ||
|
||
// handle truncating label | ||
width: calc(100% - (2 * #{$field-h-spacing})); | ||
white-space: nowrap; | ||
overflow: hidden; | ||
text-overflow: ellipsis; | ||
} | ||
|
||
input, | ||
&__input { | ||
font-family: inherit; | ||
font-size: 1rem; | ||
line-height: 1; | ||
height: 56px; | ||
display: block; | ||
background-color: transparent; | ||
padding: 1rem 1rem 0; | ||
width: 100%; | ||
height: 100%; | ||
font-size: $field-label-size; | ||
display: block; | ||
background-color: transparent; | ||
padding: $field-v-spacing $field-h-spacing 0; | ||
outline: 0; | ||
border: 0; | ||
|
||
&:focus, | ||
&:not(:placeholder-shown) { | ||
border-color: $color-blue50; | ||
|
||
+ label { | ||
font-size: 12px; | ||
top: 4px; | ||
font-size: $field-label-size-focus; | ||
top: $field-h-spacing - $field-border-width; | ||
} | ||
} | ||
|
||
&::placeholder { | ||
transition: all 0.125s ease; | ||
} | ||
|
||
&:not(:focus)::placeholder { | ||
color: transparent; | ||
} | ||
|
||
&:focus::placeholder, [placeholder] { | ||
text-overflow: ellipsis; | ||
color: $color-text-light; | ||
} | ||
} | ||
|
||
[placeholder] { | ||
text-overflow: ellipsis; | ||
} | ||
|
||
// :focus-within is only supported in modern browsers (https://caniuse.com/#search=focus-within), --active should be used as a backup | ||
&--active, &:focus-within { | ||
border-color: $color-blue50; | ||
|
||
label { | ||
font-size: $field-label-size-focus; | ||
top: $field-h-spacing - $field-border-width; | ||
} | ||
|
||
input::placeholder { | ||
color: $color-text-light !important; | ||
} | ||
} | ||
|
||
&--disabled { | ||
border-color: $color-gray35; | ||
} | ||
|
||
&--success { | ||
border-color: $color-green; | ||
} | ||
|
||
&--error { | ||
border-color: $color-red; | ||
} | ||
|
||
&__hint { | ||
@extend .p4; | ||
display: block; | ||
color: $color-text-light; | ||
color: $color-text-medium; | ||
font-weight: 400; | ||
font-size: $field-label-size-focus; | ||
margin-top: 0.25rem; | ||
margin-left: $field-h-spacing; | ||
line-height: 1; | ||
width: 100%; | ||
text-overflow: ellipsis; | ||
overflow: hidden; | ||
white-space: nowrap; | ||
|
||
&--success { | ||
color: $color-green; | ||
} | ||
|
||
&--error { | ||
color: $color-red; | ||
} | ||
} | ||
|
||
[disabled] { | ||
background-color: $color-gray30; | ||
color: $color-black20; | ||
} | ||
} | ||
|
||
.#{$prefix}field--compact { | ||
height: $field-height-compact; | ||
|
||
label, | ||
&--label { | ||
top: $field-v-spacing-compact; | ||
transition: none; | ||
} | ||
|
||
input, | ||
&--input { | ||
padding-top: 0; | ||
|
||
&:focus, | ||
&:not(:placeholder-shown) { | ||
+ label { | ||
opacity: 0; | ||
} | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.