various input styles
This commit is contained in:
Andrew Croce
parent
51ed8c2169
commit
8ea1fd6565
@ -5,12 +5,12 @@
|
|||||||
@import 'core/util';
|
@import 'core/util';
|
||||||
|
|
||||||
@import 'elements/typography';
|
@import 'elements/typography';
|
||||||
|
@import 'elements/icons';
|
||||||
@import 'elements/inputs';
|
@import 'elements/inputs';
|
||||||
@import 'elements/buttons';
|
@import 'elements/buttons';
|
||||||
@import 'elements/panels';
|
@import 'elements/panels';
|
||||||
@import 'elements/block_lists';
|
@import 'elements/block_lists';
|
||||||
@import 'elements/tables';
|
@import 'elements/tables';
|
||||||
@import 'elements/icons';
|
|
||||||
@import 'elements/sidenav';
|
@import 'elements/sidenav';
|
||||||
@import 'elements/action_group';
|
@import 'elements/action_group';
|
||||||
|
|
||||||
|
|||||||
@ -23,3 +23,7 @@
|
|||||||
position: unset;
|
position: unset;
|
||||||
width: 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
|
* @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 {
|
select {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
@ -39,4 +149,4 @@ select {
|
|||||||
min-height: 4.4rem;
|
min-height: 4.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -11,7 +11,7 @@
|
|||||||
|
|
||||||
p {
|
p {
|
||||||
margin: 0 0 ($gap * 2) 0;
|
margin: 0 0 ($gap * 2) 0;
|
||||||
max-width: 45em;
|
@include line-max;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
|||||||
@ -127,6 +127,133 @@
|
|||||||
<div class='col col--grow'>col 11</div>
|
<div class='col col--grow'>col 11</div>
|
||||||
<div class='col col--grow'>col 12</div>
|
<div class='col col--grow'>col 12</div>
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user