Skip to content
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

Inline error state styling #132

Merged
merged 7 commits into from
Jun 24, 2015
Merged

Inline error state styling #132

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
eb58ef2
Inline error state styling
Jun 23, 2015
ca5c067
Remove .form-note
Jun 24, 2015
5b519f6
Clean up extra tooltip styles
Jun 24, 2015
e5c8d0e
Background comment
Jun 24, 2015
ca3ffd0
Merge branch 'master' into error-states
mdo Jun 24, 2015
68c5f9b
document it
mdo Jun 24, 2015
175f09a
Warning
Jun 24, 2015
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
134 changes: 87 additions & 47 deletions scss/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ textarea {
vertical-align: middle;
background-color: #fff;
background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
background-position: right center;
background-position: right 8px center;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unless there's a comma here, I think background-position only accepts two values, right?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought this was a little too clever, but up to four values are totally valid. Old declarations throughout .com are 98% from the left, but this is more consistent and renders more accurately regardless of the size of the input. This way it'll always be 8px from the right and centered vertically.

https://css-tricks.com/almanac/properties/b/background-position/#browser-support

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ohhh yeah, wasn't thinking about that. Nice dude. Maybe add something there as a quick comment so folks don't think it's an error?

border: 1px solid #ccc;
border-radius: 3px;
outline: none;
Expand Down Expand Up @@ -131,7 +131,6 @@ dl.form {
width: 440px;
max-width: 100%;
margin-right: 5px;
background-position-x: 98%;
}

input {
Expand Down Expand Up @@ -211,64 +210,105 @@ dl.form {
}
}

.form-note {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the .form-note for?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You know, I have no idea. This isn't actually an addition, it just moved as a result of pasting stuff in. This diff isn't entirely accurate in that regard... Unless I'm mistaken, it's in master. Should I kill it?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe nuke it? 🤷

display: inline-block;
padding: 5px;
margin-top: -1px;
font-size: 11px;
color: #494620;
background: #f7ea57;
border: 1px solid #c0b536;
border-top-color: #fff;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}

// Form validation
//
// Our inline errors

&.warn,
&.errored {
> dt label {
color: #900;
dd.warning,
dd.error {
display: inline-block;
position: absolute;
max-width: 450px; // Keep our long errors readable
z-index: 10;
margin: 2px 0 0;
padding: 5px 8px;
font-size: 13px;
font-weight: normal;
border-radius: 3px;
}

// General text next to the field
.error {
display: inline;
color: #900;
dd.warning:after,
dd.warning:before,
dd.error:after,
dd.error:before {
bottom: 100%;
z-index: 15;
left: 15px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

// Specific error explanations from the server
dd.error,
dd.warning {
display: inline-block;
padding: 5px;
font-size: 11px;
color: #494620;
background: #f7ea57;
border: 1px solid #c0b536;
border-top-color: #fff;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
dd.warning:after,
dd.error:after {
border-width: 5px;
margin-left: -5px;
}
}

&.warn {
// General text next to the field
.warning {
display: inline;
color: #900;
dd.warning:before,
dd.error:before {
border-width: 6px;
margin-left: -6px;
}
}

// Specific warning explanations from the server
&.warn {
dd.warning {
display: inline-block;
padding: 5px;
font-size: 11px;
color: #494620;
background: #f7ea57;
border: 1px solid #c0b536;
border-top-color: #fff;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
color: #4e401e;
background-color: #ffe5a7;
border: 1px solid #e7ce94;

&:after {
border-color: rgba(255, 229, 167, 0);
border-bottom-color: #ffe5a7;
}

&:before {
border-color: rgba(205, 186, 131, 0);
border-bottom-color: #cdb683;
}
}
}

.form-note {
display: inline-block;
padding: 5px;
margin-top: -1px;
font-size: 11px;
color: #494620;
background: #f7ea57;
border: 1px solid #c0b536;
border-top-color: #fff;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
&.errored {
> dt label {
color: $brand-red;
}

dd.error {
color: #fff;
background-color: #bf1515;
border-color: #911;
font-size: 13px;

&:after {
border-color: rgba(191, 21, 21, 0);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is transparent enough for all these?

border-bottom-color: #bf1515;
}

&:before {
border-color: rgba(153, 17, 17, 0);
border-bottom-color: #911;
}
}
}
}

Expand Down