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