From 8ea1fd65651d4ca184b3b641cd657fddbb721342 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Tue, 24 Jul 2018 17:20:38 -0400 Subject: [PATCH 1/9] various input styles --- scss/atat.scss | 2 +- scss/core/_util.scss | 4 ++ scss/elements/_inputs.scss | 112 ++++++++++++++++++++++++++++- scss/elements/_typography.scss | 2 +- templates/styleguide.html.to | 127 +++++++++++++++++++++++++++++++++ 5 files changed, 244 insertions(+), 3 deletions(-) diff --git a/scss/atat.scss b/scss/atat.scss index 2810db63..e8cbb614 100644 --- a/scss/atat.scss +++ b/scss/atat.scss @@ -5,12 +5,12 @@ @import 'core/util'; @import 'elements/typography'; +@import 'elements/icons'; @import 'elements/inputs'; @import 'elements/buttons'; @import 'elements/panels'; @import 'elements/block_lists'; @import 'elements/tables'; -@import 'elements/icons'; @import 'elements/sidenav'; @import 'elements/action_group'; diff --git a/scss/core/_util.scss b/scss/core/_util.scss index 505b4ed5..9b716bee 100644 --- a/scss/core/_util.scss +++ b/scss/core/_util.scss @@ -23,3 +23,7 @@ position: unset; width: unset; } + +@mixin line-max { + max-width: 45em; +} diff --git a/scss/elements/_inputs.scss b/scss/elements/_inputs.scss index b3151653..a3d8b222 100644 --- a/scss/elements/_inputs.scss +++ b/scss/elements/_inputs.scss @@ -4,6 +4,116 @@ * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_inputs.scss */ +@mixin input-icon { + width: 1.6rem; + height: 1.6rem; + display: block; +} + +@mixin input-state($state) { + $border-width: 1px; + $state-color: $color-gray; + + @if $state == 'error' { + $border-width: 2px; + $state-color: $color-red; + + } @else if $state == 'warning' { + $border-width: 2px; + $state-color: $color-gold; + + } @else if $state == 'success' { + $border-width: 2px; + $state-color: $color-green; + } + + .icon { + @include icon-color($state-color); + } + + .usa-input__message { + color: $state-color; + } + + input, + textarea, + select { + border-color: $state-color; + border-width: $border-width; + } +} + +.usa-input { + margin: ($gap * 4) 0; + + label { + padding: 0 0 $gap 0; + @include h4; + @include line-max; + position: relative; + + .usa-input__help { + display: block; + @include h5; + font-weight: normal; + padding-top: $gap / 2; + @include line-max; + } + + .icon { + position: absolute; + left: 100%; + top: 100%; + margin-top: 1.4rem; + margin-left: $gap; + } + } + + input, + textarea, + select { + @include line-max; + margin: 0; + } + + .usa-input__choices { // checkbox & radio sets + legend { + padding: 0 0 $gap 0; + @include h4; + } + + label { + font-weight: normal; + margin: 0; + } + + &.usa-input__choices--inline { + label { + display: inline-block; + padding-right: $gap * 3; + } + } + } + + .usa-input__message { + @include h5; + display: inline-block; + padding-top: $gap; + } + + &.usa-input--error { + @include input-state('error'); + } + + &.usa-input--warning { + @include input-state('warning'); + } + + &.usa-input--success { + @include input-state('success'); + } +} + select { border-radius: 0; -webkit-appearance: none; @@ -39,4 +149,4 @@ select { min-height: 4.4rem; } -} \ No newline at end of file +} diff --git a/scss/elements/_typography.scss b/scss/elements/_typography.scss index 57e310db..8a292e73 100644 --- a/scss/elements/_typography.scss +++ b/scss/elements/_typography.scss @@ -11,7 +11,7 @@ p { margin: 0 0 ($gap * 2) 0; - max-width: 45em; + @include line-max; } h1, h2, h3, h4, h5, h6 { diff --git a/templates/styleguide.html.to b/templates/styleguide.html.to index 9d7212a7..4718aa14 100644 --- a/templates/styleguide.html.to +++ b/templates/styleguide.html.to @@ -127,6 +127,133 @@
col 11
col 12
+ + +
+
+ + +
+ +
+ + + Oh boy you really screwed up big time, didn't you! +
+ +
+ + + Oh boy you really screwed up big time, didn't you! +
+ +
+ + +
+ +
+ + +
+ +
+
+
+
+ Checkboxes + + + + + + + + +
+
+
+ +
+
+
+ Inline Checkboxes + + + + + + + + +
+
+
+
+ +
+
+
+
+ Radio Buttons + + + + + + + + + +
+
+
+ +
+
+
+ Radio Buttons + + + + + + + + + +
+
+
+
+ +
From fbec69f1104a7314c3c813284636c6f8462571d6 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Wed, 25 Jul 2018 10:23:31 -0400 Subject: [PATCH 2/9] Form grid, some more error states --- scss/elements/_inputs.scss | 47 +++++++++++++++++++++++++++++++++++- templates/styleguide.html.to | 39 ++++++++++++++++++++---------- 2 files changed, 72 insertions(+), 14 deletions(-) diff --git a/scss/elements/_inputs.scss b/scss/elements/_inputs.scss index a3d8b222..de7576da 100644 --- a/scss/elements/_inputs.scss +++ b/scss/elements/_inputs.scss @@ -41,10 +41,22 @@ border-color: $state-color; border-width: $border-width; } + + fieldset { + input[type='radio'] { + + label::before { + box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px $color-red; + } + } + } } .usa-input { - margin: ($gap * 4) 0; + margin: ($gap * 4) ($gap * 2) ($gap * 4) 0; + + @includ media($medium-screen) { + margin: ($gap * 4) 0; + } label { padding: 0 0 $gap 0; @@ -80,6 +92,10 @@ legend { padding: 0 0 $gap 0; @include h4; + + .icon { + vertical-align: middle; + } } label { @@ -150,3 +166,32 @@ select { } } + + +// Form Grid +.form-row { + margin: ($gap * 4) 0; + + .form-col { + flex-grow: 1; + + &:first-child .usa-input { + margin-top: 0; + } + + &:last-child .usa-input { + margin-bottom: 0; + } + } + + @include media($medium-screen) { + @include grid-row; + align-items: flex-start; + + .form-col { + .usa-input { + margin: 0 ($gap * 4) 0 0; + } + } + } +} diff --git a/templates/styleguide.html.to b/templates/styleguide.html.to index 4718aa14..5b8623d9 100644 --- a/templates/styleguide.html.to +++ b/templates/styleguide.html.to @@ -141,7 +141,7 @@
-
-
+ +
+ +
@@ -183,8 +194,8 @@
-
-
+
+
Checkboxes @@ -200,7 +211,7 @@
-
+
Inline Checkboxes @@ -217,11 +228,11 @@
-
-
-
-
- Radio Buttons +
+
+
+
+ Problem Radio Buttons {% module Icon('alert') %} @@ -231,11 +242,13 @@ + + This is an error
-
+
Radio Buttons From 1be22b2c47a794f35e617596aecbd84e84e25ee4 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Wed, 25 Jul 2018 10:30:21 -0400 Subject: [PATCH 3/9] Error states for checkboxes/radios --- scss/elements/_inputs.scss | 12 +++++++++++- templates/styleguide.html.to | 4 +++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/scss/elements/_inputs.scss b/scss/elements/_inputs.scss index de7576da..8e07df9c 100644 --- a/scss/elements/_inputs.scss +++ b/scss/elements/_inputs.scss @@ -45,7 +45,13 @@ fieldset { input[type='radio'] { + label::before { - box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px $color-red; + box-shadow: 0 0 0 1px $color-white, 0 0 0 3px $color-red; + } + } + + input[type='checkbox'] { + + label::before { + box-shadow: 0 0 0 2px $color-red; } } } @@ -103,6 +109,10 @@ margin: 0; } + .usa-input__message { + display: block; + } + &.usa-input__choices--inline { label { display: inline-block; diff --git a/templates/styleguide.html.to b/templates/styleguide.html.to index 5b8623d9..a68818c1 100644 --- a/templates/styleguide.html.to +++ b/templates/styleguide.html.to @@ -212,7 +212,7 @@
-
+
Inline Checkboxes @@ -223,6 +223,8 @@ + + This is an error
From 0cffa63b5dd5624d8ed08ad9776199df119b6482 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Wed, 25 Jul 2018 10:30:37 -0400 Subject: [PATCH 4/9] change checked items --- templates/styleguide.html.to | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/templates/styleguide.html.to b/templates/styleguide.html.to index a68818c1..e90aefc9 100644 --- a/templates/styleguide.html.to +++ b/templates/styleguide.html.to @@ -214,8 +214,8 @@
- Inline Checkboxes - + Inline Checkboxes {% module Icon('alert') %} + @@ -255,7 +255,7 @@
Radio Buttons - + From a315aef5768aedbef4dc6bdd2da3a8d82716cc00 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Wed, 25 Jul 2018 12:02:02 -0400 Subject: [PATCH 5/9] TextInput module --- atst/ui_modules.py | 12 ++++++++++++ templates/components/text_input.html.to | 21 +++++++++++++++++++++ 2 files changed, 33 insertions(+) create mode 100644 templates/components/text_input.html.to diff --git a/atst/ui_modules.py b/atst/ui_modules.py index 0ced7fad..6773b5c6 100644 --- a/atst/ui_modules.py +++ b/atst/ui_modules.py @@ -1,4 +1,6 @@ from tornado.web import UIModule +# from tornado.template import raw +import re class Alert(UIModule): def render(self, title, message=None, actions=None, level='info'): @@ -9,6 +11,16 @@ class Alert(UIModule): actions=actions, level=level) +class TextInput(UIModule): + def render(self, input, placeholder=''): + return self.render_string( + "components/text_input.html.to", + input=input, + label=re.sub('<[^<]+?>', '', str(input.label)), + errors=input.errors, + placeholder=placeholder, + description=input.description) + class Icon(UIModule): def render(self, name, classes=''): with open('static/icons/%s.svg' % name) as svg: diff --git a/templates/components/text_input.html.to b/templates/components/text_input.html.to new file mode 100644 index 00000000..6d72884a --- /dev/null +++ b/templates/components/text_input.html.to @@ -0,0 +1,21 @@ +
+ + + {% raw input(placeholder=placeholder) %} + + {% if errors %} + {% for error in errors %} + {{ error }} + {% end %} + {% end %} +
From c7e42124c91731e478f90338283bce87b0cde05f Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Wed, 25 Jul 2018 13:10:05 -0400 Subject: [PATCH 6/9] remove list styles from option fields --- scss/elements/_inputs.scss | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/scss/elements/_inputs.scss b/scss/elements/_inputs.scss index 8e07df9c..768b4210 100644 --- a/scss/elements/_inputs.scss +++ b/scss/elements/_inputs.scss @@ -104,6 +104,21 @@ } } + ul { + list-style: none; + margin: 0; + padding: 0; + + > li { + margin: 0; + + [type='radio'] + label, + [type='checkbox'] + label { + margin: 0; + } + } + } + label { font-weight: normal; margin: 0; From fa26511500593de6d73551831575547d18076afe Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Wed, 25 Jul 2018 13:10:15 -0400 Subject: [PATCH 7/9] options input --- templates/components/options_input.html.to | 24 ++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 templates/components/options_input.html.to diff --git a/templates/components/options_input.html.to b/templates/components/options_input.html.to new file mode 100644 index 00000000..b12a1697 --- /dev/null +++ b/templates/components/options_input.html.to @@ -0,0 +1,24 @@ +
+
+ + {{ label }} + + {% if description %} + {% raw description %} + {% end %} + + {% if errors %} + {% module Icon('alert') %} + {% end %} + + + {% raw input() %} + + {% if errors %} + {% for error in errors %} + {{ error }} + {% end %} + {% end %} + +
+
From c98cdb2352521036cbe4c7b91203e017d34873c5 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Wed, 25 Jul 2018 13:11:35 -0400 Subject: [PATCH 8/9] options input module --- atst/ui_modules.py | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/atst/ui_modules.py b/atst/ui_modules.py index 6773b5c6..1ae08eeb 100644 --- a/atst/ui_modules.py +++ b/atst/ui_modules.py @@ -21,6 +21,16 @@ class TextInput(UIModule): placeholder=placeholder, description=input.description) +class OptionsInput(UIModule): + def render(self, input, inline=False): + return self.render_string( + "components/options_input.html.to", + input=input, + label=re.sub('<[^<]+?>', '', str(input.label)), + errors=input.errors, + description=input.description, + inline=inline) + class Icon(UIModule): def render(self, name, classes=''): with open('static/icons/%s.svg' % name) as svg: From 8ba4c372f41809cdf1e50579f176ecc2905cb289 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Wed, 25 Jul 2018 13:28:48 -0400 Subject: [PATCH 9/9] dont use var name "input" --- atst/ui_modules.py | 20 ++++++++++---------- templates/components/options_input.html.to | 2 +- templates/components/text_input.html.to | 2 +- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/atst/ui_modules.py b/atst/ui_modules.py index 1ae08eeb..748ca980 100644 --- a/atst/ui_modules.py +++ b/atst/ui_modules.py @@ -12,23 +12,23 @@ class Alert(UIModule): level=level) class TextInput(UIModule): - def render(self, input, placeholder=''): + def render(self, field, placeholder=''): return self.render_string( "components/text_input.html.to", - input=input, - label=re.sub('<[^<]+?>', '', str(input.label)), - errors=input.errors, + field=field, + label=re.sub('<[^<]+?>', '', str(field.label)), + errors=field.errors, placeholder=placeholder, - description=input.description) + description=field.description) class OptionsInput(UIModule): - def render(self, input, inline=False): + def render(self, field, inline=False): return self.render_string( "components/options_input.html.to", - input=input, - label=re.sub('<[^<]+?>', '', str(input.label)), - errors=input.errors, - description=input.description, + field=field, + label=re.sub('<[^<]+?>', '', str(field.label)), + errors=field.errors, + description=field.description, inline=inline) class Icon(UIModule): diff --git a/templates/components/options_input.html.to b/templates/components/options_input.html.to index b12a1697..ab296a5f 100644 --- a/templates/components/options_input.html.to +++ b/templates/components/options_input.html.to @@ -12,7 +12,7 @@ {% end %} - {% raw input() %} + {% raw field() %} {% if errors %} {% for error in errors %} diff --git a/templates/components/text_input.html.to b/templates/components/text_input.html.to index 6d72884a..d45c4f36 100644 --- a/templates/components/text_input.html.to +++ b/templates/components/text_input.html.to @@ -11,7 +11,7 @@ {% end %} - {% raw input(placeholder=placeholder) %} + {% raw field(placeholder=placeholder) %} {% if errors %} {% for error in errors %}