pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Form grid,

Browse Source 
some more error states
This commit is contained in:
Andrew Croce 2018-07-25 10:23:31 -04:00
parent 8ea1fd6565
commit fbec69f110
2 changed files with 72 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
scss/elements/_inputs.scss
View File

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

39
templates/styleguide.html.to
View File

@ -141,7 +141,7 @@
</div>
<div class='usa-input usa-input--error'>
<label for='basic-text'>
<label for='basic-text-2'>
Erroneous Text Input
<span class='usa-input__help'>
This is some help text to explain what this form field is and why you should fill it out.
@ -153,15 +153,26 @@
</div>
<div class='usa-input usa-input--warning'>
<label for='basic-text'>
<label for='basic-text-3'>
Warning Text Input
<span class='usa-input__help'>
This is some help text to explain what this form field is and why you should fill it out.
</span>
{% module Icon('alert') %}
</label>
<input id='basic-text-2' type='text' placeholder='this is a sample of what you should enter' aria-describedby='basic-text-2__errors'/>
<span id='basic-text-2__errors' class='usa-input__message'>Oh boy you really screwed up big time, didn't you!</span>
<input id='basic-text-3' type='text' placeholder='this is a sample of what you should enter' aria-describedby='basic-text-3__errors'/>
<span id='basic-text-3__errors' class='usa-input__message'>Oh boy you really screwed up big time, didn't you!</span>
</div>
<div class='usa-input usa-input--success'>
<label for='basic-text-4'>
Success Text Input
<span class='usa-input__help'>
This is some help text to explain what this form field is and why you should fill it out.
</span>
{% module Icon('ok') %}
</label>
<input id='basic-text-4' type='text' placeholder='this is a sample of what you should enter'/>
</div>
<div class='usa-input'>
@ -183,8 +194,8 @@
</select>
</div>
<div class='row row--form'>
<div class='col col--pad col--grow'>
<div class='form-row'>
<div class='form-col'>
<div class='usa-input'>
<fieldset class='usa-input__choices'>
<legend>Checkboxes</legend>
@ -200,7 +211,7 @@
</div>
</div>
<div class='col col--pad col--grow'>
<div class='form-col'>
<div class='usa-input'>
<fieldset class='usa-input__choices usa-input__choices--inline'>
<legend>Inline Checkboxes</legend>
@ -217,11 +228,11 @@
</div>
</div>
<div class='row row--form'>
<div class='col col--grow col--pad'>
<div class='usa-input'>
<fieldset class='usa-input__choices'>
<legend>Radio Buttons</legend>
<div class='form-row'>
<div class='form-col'>
<div class='usa-input usa-input--error'>
<fieldset class='usa-input__choices' >
<legend>Problem Radio Buttons {% module Icon('alert') %}</legend>
<input type='radio' name='radio' id='radio-1' />
<label for='radio-1'>Radio One</label>
@ -231,11 +242,13 @@
<input type='radio' name='radio' id='radio-3' />
<label for='radio-3'>Radio Three</label>
<span class='usa-input__message'>This is an error</span>
</fieldset>
</div>
</div>
<div class='col col--grow col--pad'>
<div class='form-col'>
<div class='usa-input'>
<fieldset class='usa-input__choices usa-input__choices--inline'>
<legend>Radio Buttons</legend>