From eb58ef28271792b3092c94ef1cbf07f5d769b3a8 Mon Sep 17 00:00:00 2001 From: Aaron Shekey Date: Tue, 23 Jun 2015 17:08:27 -0500 Subject: [PATCH 1/6] Inline error state styling --- scss/_forms.scss | 134 ++++++++++++++++++++++++++++++----------------- 1 file changed, 87 insertions(+), 47 deletions(-) diff --git a/scss/_forms.scss b/scss/_forms.scss index c8efa32a8a..54eb90f810 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -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; border: 1px solid #ccc; border-radius: 3px; outline: none; @@ -131,7 +131,6 @@ dl.form { width: 440px; max-width: 100%; margin-right: 5px; - background-position-x: 98%; } input { @@ -211,64 +210,105 @@ dl.form { } } + .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; + } + + // 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); + border-bottom-color: #bf1515; + } + + &:before { + border-color: rgba(153, 17, 17, 0); + border-bottom-color: #911; + } + } } } From ca5c06715b909af014491a471b3ee34a12508830 Mon Sep 17 00:00:00 2001 From: Aaron Shekey Date: Wed, 24 Jun 2015 14:07:45 -0500 Subject: [PATCH 2/6] Remove .form-note --- scss/_forms.scss | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/scss/_forms.scss b/scss/_forms.scss index 54eb90f810..d03dbff244 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -210,19 +210,6 @@ dl.form { } } - .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; - } - // Form validation // // Our inline errors @@ -266,7 +253,7 @@ dl.form { dd.warning:before, dd.error:before { border-width: 6px; - margin-left: -6px; + margin-left: -1px; } } @@ -300,12 +287,10 @@ dl.form { font-size: 13px; &:after { - border-color: rgba(191, 21, 21, 0); border-bottom-color: #bf1515; } &:before { - border-color: rgba(153, 17, 17, 0); border-bottom-color: #911; } } From 5b519f697ad1477c01c0dd9a212fba9b958bcf47 Mon Sep 17 00:00:00 2001 From: Aaron Shekey Date: Wed, 24 Jun 2015 14:09:18 -0500 Subject: [PATCH 3/6] Clean up extra tooltip styles --- scss/_forms.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/scss/_forms.scss b/scss/_forms.scss index d03dbff244..7393646b53 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -235,7 +235,7 @@ dl.form { dd.error:before { bottom: 100%; z-index: 15; - left: 15px; + left: 10px; border: solid transparent; content: " "; height: 0; @@ -247,7 +247,6 @@ dl.form { dd.warning:after, dd.error:after { border-width: 5px; - margin-left: -5px; } dd.warning:before, @@ -264,12 +263,10 @@ dl.form { 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; } } From e5c8d0e1ab4782312fbdd44d07e455aec78c5edc Mon Sep 17 00:00:00 2001 From: Aaron Shekey Date: Wed, 24 Jun 2015 14:19:19 -0500 Subject: [PATCH 4/6] Background comment --- scss/_forms.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_forms.scss b/scss/_forms.scss index 7393646b53..4ad034fa0f 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -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 8px center; + background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically. border: 1px solid #ccc; border-radius: 3px; outline: none; From 68c5f9bf0e57e4a8436c24af084359c0ae44a795 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 24 Jun 2015 13:38:28 -0700 Subject: [PATCH 5/6] document it --- docs/docs.scss | 9 +++++++++ docs/forms.md | 20 ++++++++++++++++++++ 2 files changed, 29 insertions(+) diff --git a/docs/docs.scss b/docs/docs.scss index 7b49d0e944..ae9aa9050b 100644 --- a/docs/docs.scss +++ b/docs/docs.scss @@ -296,6 +296,14 @@ body { dl.form { margin: 15px 0; + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + > dt { margin: 0 0 6px; font-style: normal; @@ -303,6 +311,7 @@ body { > dd { padding: 0; + margin-bottom: 0; } } diff --git a/docs/forms.md b/docs/forms.md index ffbd13334b..5c44940288 100644 --- a/docs/forms.md +++ b/docs/forms.md @@ -175,6 +175,26 @@ Use the `.select-sm` class to resize both default and custom ` +
This example input has an error.
+ +
+
+
+
+
This example input has an error.
+
+ +{% endexample %} + ## Checkboxes and radios Utilities to spice up the alignment and styling of checkbox and radio controls. From 175f09a35e3a1b62032bf2b7fd444a70efb515dd Mon Sep 17 00:00:00 2001 From: Aaron Shekey Date: Wed, 24 Jun 2015 16:42:42 -0500 Subject: [PATCH 6/6] Warning --- docs/forms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/forms.md b/docs/forms.md index 5c44940288..5160a300fb 100644 --- a/docs/forms.md +++ b/docs/forms.md @@ -190,7 +190,7 @@ Convey errors and warnings for form groups. Add the appropriate class—either `
-
This example input has an error.
+
This example input has a warning.
{% endexample %}