63 lines
1.0 KiB
SCSS
63 lines
1.0 KiB
SCSS
|
/***************
|
||
|
|
FORM STYLING
|
||
|
|
***************/
|
||
|
|
|
||
|
|
label {
|
||
|
|
display:block;
|
||
|
|
margin-bottom:5px;
|
||
|
|
}
|
||
|
|
input[type=text],input[type=email],input[type=phone],input[type=password],input[type=number],input[type=search], textarea {
|
||
|
|
background: darken(white, 10%);
|
||
|
|
padding:5px;
|
||
|
|
outline:none;
|
||
|
|
border: none;
|
||
|
|
height: $line-height;
|
||
|
|
width:300px;
|
||
|
|
margin-bottom: .5rem;
|
||
|
|
|
||
|
|
&:focus {
|
||
|
|
border: 1px solid $primary-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.full-width {
|
||
|
|
width:100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
textarea {
|
||
|
|
height:$line-height*3;
|
||
|
|
}
|
||
|
|
|
||
|
|
form {
|
||
|
|
margin-bottom:$padding;
|
||
|
|
|
||
|
|
// Wrap each form input/element in a field div
|
||
|
|
.field {
|
||
|
|
margin-bottom:$padding/2;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Notes go under the input fields
|
||
|
|
.note {
|
||
|
|
margin-top:5px;
|
||
|
|
color: gray;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Required label
|
||
|
|
.req {
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Validation, add error class to the item div
|
||
|
|
.error {
|
||
|
|
|
||
|
|
// Validation reason
|
||
|
|
.reason {
|
||
|
|
margin-top:5px;
|
||
|
|
color: red;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=text],input[type=email],input[type=phone],input[type=password],input[type=number],input[type=search], textarea{
|
||
|
|
border-color: red;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|