<label for="inputid">Password</label>
<input type="password" id="inputid" name="input" value="" placeholder="placeholder" />
{{#unless labelAfter }}{{> @label label }}{{/unless}}
<input
type="{{ type }}"
id="{{ id }}"
name="{{ name }}"
value="{{ value }}"
placeholder="{{ placeholder }}"
{{#if ariaDescribedby }}aria-describedby="{{ ariaDescribedby }}"{{/if}}
{{#if ariaInvalid }}aria-invalid="{{ ariaInvalid }}"{{/if}}
{{#if disabled }}disabled{{/if}}
{{#if pattern }}pattern="{{ pattern }}"{{/if}}
{{#if required }}required{{/if}}
{{#if min }}min="{{ min }}"{{/if}}
{{#if max }}max="{{ max }}"{{/if}}
{{#if step }}step={{ step }}{{/if}} /> {{#if labelAfter }}{{> @label label }}{{/if}}
{
"name": "input",
"value": null,
"type": "password",
"id": "inputid",
"label": {
"for": "inputid",
"text": "Password"
},
"placeholder": "placeholder"
}
input[type="text"],
input[type="password"],
input[type="file"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"] {
@extend %input;
}
input::placeholder {
font-style: italic;
color: #999;
}
input[type="color"],
input[type="range"] {
font-size: inherit;
font-family: $font-stack-form-ui;
outline: 0;
display: inline-block;
width: 100%;
box-shadow: none;
}
/*
Make sure date/time fields are as tall as empty text fields for consistency.
Mobile Safari collapses them.
line height + vertical padding + border widths
*/
input[type="datetime-local"],
input[type="date"],
input[type="time"] {
min-height: calc(#{$line-height} + 1.5em + 2px);
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="file"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus {
@extend %inputfocus;
}
input[type="color"]:focus,
input[type="range"]:focus {
outline: 0;
}
input[type="color"] {
/*Ensure height matches text input height*/
height: calc(#{$font-size-base/2} + #{$line-height});
width: calc(#{$font-size-base/2} + #{$line-height});
background: transparent;
appearance: none;
border: solid 1px #fff;
outline: solid 1px #ccc;
}
input[type="radio"] {
border: solid 1px #999;
font-size: 1em;
height: 1em;
width: 1em;
border-radius: 50%;
vertical-align: middle;
appearance: none;
&:checked,
&:active,
&:focus {
outline: 0;
}
}
input[type="checkbox"] {
border: solid 1px #999;
border-radius: .2em;
font-size: 1.1em;
height: 1em;
width: 1em;
line-height: 1;
vertical-align: middle;
appearance: none;
&:checked,
&:active,
&:focus {
outline: 0;
}
}
input[type="radio"],
input[type="checkbox"] {
transition:
background-color 100ms ease-in-out,
background-image 100ms ease-in-out,
border 100ms ease-in-out;
margin: 0 0 .15em;
}
input[type="checkbox"]:checked {
background:
$color-selected-box
url('data:image/svg+xml;utf8,<svg width="19" height="19" xmlns="http://www.w3.org/2000/svg"><path d="M3.58 10.936l1.86-1.71L7.5 12l6.848-7.407 1.484 1.736L7.5 15.46l-3.92-4.524z" fill="white"/></svg>')
50% 50%
no-repeat;
border-color: $color-selected-box;
}
input[type="radio"]:checked {
border-color: $color-selected-box;
background: $color-selected-box;
box-shadow: inset 0 0 0 3px #fff;
}
// Show valid styling only if a value is present
input[type="text"]:not(:placeholder-shown):valid,
input[type="url"]:not(:placeholder-shown):valid,
input[type="tel"]:not(:placeholder-shown):valid,
input[type="email"]:not(:placeholder-shown):valid {
outline: 0;
border-color: green;
background: lighten(green, 65%);
}
input[type="text"]:not(:placeholder-shown):invalid,
input[type="url"]:not(:placeholder-shown):invalid,
input[type="tel"]:not(:placeholder-shown):invalid,
input[type="email"]:not(:placeholder-shown):invalid {
border-color: $color-error;
outline: 0;
box-shadow: none;
background: lighten($color-error, 40%);
}
input[disabled] {
background: #eee;
color: #888;
box-shadow: none;
}
input[aria-invalid] {
border-color: $color-error !important;
background: #fee !important;
}
There are no notes for this item.