Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
218 lines (185 sloc) 5.12 KB
input,
select,
textarea,
fieldset {
font-family: inherit;
font-size: 1rem;
border: none;
border-radius: 0;
}
label { vertical-align: middle; }
select { -webkit-appearance: none; }
textarea {
line-height: 1.75;
padding: .5rem .5rem;
vertical-align: top;
}
.input[type=button],
.input[type=date],
.input[type=datetime],
.input[type=email],
.input[type=file],
.input[type=hidden],
.input[type=image],
.input[type=month],
.input[type=number],
.input[type=password],
.input[type=range],
.input[type=reset],
.input[type=search],
.input[type=submit],
.input[type=tel],
.input[type=text],
.input[type=time],
.input[type=url],
.input[type=week],,
.select,
.textarea {
border-color: $border-color;
border-style: $border-style;
border-width: $border-1;
font-size: $base-font-size;
height: auto;
outline: none;
padding: $padding;
width: 100%;
transition: border-color 200ms;
&:focus {
border-color: $midgrey;
}
}
.input[required],
.input:invalid,
.input:valid {
padding-right: 2.5rem;
text-overflow: ellipsis;
overflow: hidden;
}
.input:invalid,
.input:valid {
background-repeat: no-repeat;
background-size: 8px;
background-position: right 1rem center;
}
.input.textarea[required],
.input.textarea:invalid,
.input.textarea:valid {
background-position: right 1rem top 1rem;
}
.input[required] { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 8 16 16" enable-background="new 0 8 16 16"><style type="text/css">.st0{fill:#F18260;}</style><path class="st0" d="M7.2 17.4l-5.4 3.8-1.4-2.5 6-2.7-6.1-2.8 1.4-2.4 5.4 3.8-.5-6.6h2.7l-.5 6.6 5.4-3.8 1.4 2.4-6 2.8 6.1 2.8-1.4 2.5-5.4-3.8.5 6.5h-2.8l.6-6.6z"/></svg>'); }
.input:valid { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><circle fill="#B4D388" cx="8" cy="8" r="8"/></svg>'); }
.input:focus:invalid { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><circle fill="#CF5340" cx="8" cy="8" r="8"/></svg>'); }
.input[novalidate],
.input.novalidate,
.input.hide-validate-icon {
background-image: none;
padding-right: $padding;
}
.input-wrap,
.radio-group,
.checkbox-group,
.fieldset {
margin-bottom: $margin * 2;
}
.label {
display: inline-block;
margin-bottom: $margin / 2;
}
.fieldset {
background-color: $silver;
border: $border-1 $border-style $border-color;
padding: $padding ($padding * 2);
}
//====================================================
// Checkbox/Radio
//====================================================
.input[type=checkbox],
.input[type=radio] {
display: inline;
}
.radio-group,
.checkbox-group {
border-radius: $border-radius;
background-color: $silver;
padding: $padding ($padding * 1.5);
}
.radio-wrap,
.checkbox-wrap {
display: inline-block;
margin-right: $margin;
&:last-child { margin-right: 0; }
@include small {
display: block;
}
}
.stacked .radio-wrap:not(:last-child),
.stacked .checkbox-wrap:not(:last-child) {
display: block;
}
//====================================================
// Inline input group
//====================================================
.input-group {
display: flex;
flex-direction: row;
align-items: center;
}
//====================================================
// Select Menus
//====================================================
.select {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="11" viewBox="-469 273 8 11" enable-background="new -469 273 8 11"><path fill="#B4B4B4" d="M-469 277l4-4 4 4zM-461 280l-4 4-4-4z"/></svg>');
background-repeat: no-repeat;
background-position: right 1rem center;
}
//====================================================
// Color Input
//====================================================
.input[type=color] {
background-color: $white;
cursor: pointer;
outline: none;
height: 50px;
padding: 5px;
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
padding: 1rem;
}
}
input[type=color]::-webkit-color-swatch {
border: none !important;
}
input[type=color]::-webkit-color-swatch-wrapper {
padding: 0 !important;
}
//====================================================
// HTML Date Picker
//====================================================
::-webkit-calendar-picker-indicator,
::-webkit-calendar-picker-indicator:hover {
background: transparent;
color: $accent;
padding: 0;
padding-left: 1rem;
}
::-webkit-datetime-edit-fields-wrapper { padding: 0; }
::-webkit-inner-spin-button { display: none; }
//====================================================
// File Upload
//====================================================
.input[type=file] {
font-size: 0.75rem;
background-color: $silver;
display: block;
}
//====================================================
// Reset Button
//====================================================
.input[type=reset] {
background-color: $silver;
border-color: $grey;
color: $black;
cursor: pointer;
}