///
/// Big Picture by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Form */
form {
margin: 0 0 _size(element-margin) 0;
.field {
margin: 0 0 (_size(element-margin) * 0.75) 0;
&.half {
width: 50%;
float: left;
padding: 0 0 0 (_size(element-margin) * 0.75 * 0.5);
&.first {
padding: 0 (_size(element-margin) * 0.75 * 0.5) 0 0;
}
}
}
> .actions {
margin: (_size(element-margin) * 0.75) 0 0 0 !important;
}
@include breakpoint(small) {
.field {
margin: 0 0 (_size(element-margin) * 0.5) 0;
&.half {
padding: 0 0 0 (_size(element-margin) * 0.5 * 0.5);
&.first {
padding: 0 (_size(element-margin) * 0.5 * 0.5) 0 0;
}
}
}
> .actions {
margin: (_size(element-margin) * 0.5) 0 0 0 !important;
}
}
@include breakpoint(xsmall) {
.field {
&.half {
width: 100%;
float: none;
padding: 0;
&.first {
padding: 0;
}
}
}
}
}
label {
display: block;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
textarea {
@include vendor('appearance', 'none');
@include vendor('transition', (
'border-color #{_duration(transition)} ease-in-out',
'color #{_duration(transition)} ease-in-out'
));
color: _palette(fg);
display: block;
width: 100%;
padding: 0.65em 0.75em;
background: none;
border: solid 2px _palette(border);
color: inherit;
border-radius: 0.5em;
outline: none;
&:focus {
border-color: _palette(accent2, bg);
}
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select {
line-height: 1.35em;
}
textarea {
min-height: 8em;
}
::-moz-focus-inner {
border: 0;
}
::-webkit-input-placeholder {
opacity: 0.375;
}
:-moz-placeholder {
opacity: 0.375;
}
::-moz-placeholder {
opacity: 0.375;
}
:-ms-input-placeholder {
opacity: 0.375;
}
.formerize-placeholder {
opacity: 0.375;
}