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 @@