various input styles
This commit is contained in:
Andrew Croce
parent
51ed8c2169
commit
8ea1fd6565
@ -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';
|
||||
|
||||
|
||||
@ -23,3 +23,7 @@
|
||||
position: unset;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
@mixin line-max {
|
||||
max-width: 45em;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
|
||||
p {
|
||||
margin: 0 0 ($gap * 2) 0;
|
||||
max-width: 45em;
|
||||
@include line-max;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
|
||||
@ -127,6 +127,133 @@
|
||||
<div class='col col--grow'>col 11</div>
|
||||
<div class='col col--grow'>col 12</div>
|
||||
</div>
|
||||
|
||||
|
||||
<form>
|
||||
<div class='usa-input'>
|
||||
<label for='basic-text-1'>
|
||||
Basic 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>
|
||||
</label>
|
||||
<input id='basic-text-1' type='text' placeholder='this is a sample of what you should enter'/>
|
||||
</div>
|
||||
|
||||
<div class='usa-input usa-input--error'>
|
||||
<label for='basic-text'>
|
||||
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.
|
||||
</span>
|
||||
{% module Icon('alert') %}
|
||||
</label>
|
||||
<input id='basic-text-2' type='text' placeholder='this is a sample of what you should enter' aria-invalid='true' 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>
|
||||
</div>
|
||||
|
||||
<div class='usa-input usa-input--warning'>
|
||||
<label for='basic-text'>
|
||||
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>
|
||||
</div>
|
||||
|
||||
<div class='usa-input'>
|
||||
<label for='basic-text'>
|
||||
Basic Text Input with a really long label that wraps and wraps and wraps and should really be separated into a label + help text
|
||||
</label>
|
||||
<textarea placeholder='this is a sample of what you should enter'/></textarea>
|
||||
</div>
|
||||
|
||||
<div class='usa-input'>
|
||||
<label for='selects'>Select Menu</label>
|
||||
<select name='selects'>
|
||||
<option selected disabled>Select an option</option>
|
||||
<option value='1'>One</option>
|
||||
<option value='2'>Two</option>
|
||||
<option value='3'>Three</option>
|
||||
<option value='4'>Four</option>
|
||||
<option value='5'>Five</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class='row row--form'>
|
||||
<div class='col col--pad col--grow'>
|
||||
<div class='usa-input'>
|
||||
<fieldset class='usa-input__choices'>
|
||||
<legend>Checkboxes</legend>
|
||||
<input type='checkbox' id='checkbox-1' checked/>
|
||||
<label for='checkbox-1'>Checkbox One</label>
|
||||
|
||||
<input type='checkbox' id='checkbox-2' />
|
||||
<label for='checkbox-2'>Checkbox Two</label>
|
||||
|
||||
<input type='checkbox' id='checkbox-3' disabled />
|
||||
<label for='checkbox-3'>Checkbox Three</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='col col--pad col--grow'>
|
||||
<div class='usa-input'>
|
||||
<fieldset class='usa-input__choices usa-input__choices--inline'>
|
||||
<legend>Inline Checkboxes</legend>
|
||||
<input type='checkbox' id='checkbox-4' checked/>
|
||||
<label for='checkbox-4'>Checkbox Four</label>
|
||||
|
||||
<input type='checkbox' id='checkbox-5' />
|
||||
<label for='checkbox-5'>Checkbox Five</label>
|
||||
|
||||
<input type='checkbox' id='checkbox-6' disabled />
|
||||
<label for='checkbox-6'>Checkbox Six</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<input type='radio' name='radio' id='radio-1' />
|
||||
<label for='radio-1'>Radio One</label>
|
||||
|
||||
<input type='radio' name='radio' id='radio-2' />
|
||||
<label for='radio-2'>Radio Two</label>
|
||||
|
||||
<input type='radio' name='radio' id='radio-3' />
|
||||
<label for='radio-3'>Radio Three</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='col col--grow col--pad'>
|
||||
<div class='usa-input'>
|
||||
<fieldset class='usa-input__choices usa-input__choices--inline'>
|
||||
<legend>Radio Buttons</legend>
|
||||
|
||||
<input type='radio' name='radio-2' id='radio-4' />
|
||||
<label for='radio-4'>Radio Four</label>
|
||||
|
||||
<input type='radio' name='radio-2' id='radio-5' />
|
||||
<label for='radio-5'>Radio Five</label>
|
||||
|
||||
<input type='radio' name='radio-2' id='radio-6' />
|
||||
<label for='radio-6'>Radio Six</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user