123 lines
2.1 KiB
SCSS
123 lines
2.1 KiB
SCSS
@import '../constants';
|
|
|
|
|
|
|
|
/* (1) INPUT (neutral) */
|
|
input[type=text], .neutral > input[type=text],
|
|
input[type=mail], .neutral > input[type=mail],
|
|
input[type=password], .neutral > input[type=password],
|
|
select, .neutral > select,
|
|
input[type=text].neutral,
|
|
input[type=mail].neutral,
|
|
input[type=password].neutral,
|
|
select.neutral{
|
|
|
|
display: inline-block;
|
|
margin: 1em;
|
|
padding: .5em 1em;
|
|
|
|
border-radius: 3px;
|
|
border: 1px solid $form-neutral-color;
|
|
|
|
background-color: #fff;
|
|
|
|
font-family: inherit;
|
|
|
|
color: lighten($primary-color, 15%);
|
|
|
|
transition: border .2s ease-in-out,
|
|
color .2s ease-in-out;
|
|
|
|
&:focus, &:hover{
|
|
border-color: darken($form-neutral-color, 10%);
|
|
color: $primary-color;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
/* (2) SELECT (neutral) */
|
|
select{
|
|
width: 100%;
|
|
display: block;
|
|
background: #fff;
|
|
|
|
option{
|
|
padding: .5em;
|
|
}
|
|
}
|
|
|
|
|
|
/* (1)(2) valid */
|
|
.valid > input[type=text],
|
|
.valid > input[type=mail],
|
|
.valid > input[type=password],
|
|
.valid > select,
|
|
input.valid[type=text],
|
|
input.valid[type=mail],
|
|
input.valid[type=password],
|
|
select.valid{
|
|
|
|
border-color: darken($form-valid-color, 0%);
|
|
|
|
|
|
&:focus, &:hover{
|
|
border-color: darken($form-valid-color, 10%);
|
|
}
|
|
|
|
}
|
|
|
|
/* (1)(2) invalid */
|
|
.invalid > input[type=text],
|
|
.invalid > input[type=mail],
|
|
.invalid > input[type=password],
|
|
.invalid > select,
|
|
input.invalid[type=text],
|
|
input.invalid[type=mail],
|
|
input.invalid[type=password],
|
|
select.invalid{
|
|
|
|
border-color: darken($form-invalid-color, 0%);
|
|
|
|
|
|
&:focus, &:hover{
|
|
border-color: darken($form-invalid-color, 10%);
|
|
}
|
|
|
|
}
|
|
|
|
/* (1)(2) search */
|
|
.search > input[type=text],
|
|
.search > input[type=mail],
|
|
.search > input[type=password],
|
|
.search > select,
|
|
input.search[type=text],
|
|
input.search[type=mail],
|
|
input.search[type=password]{
|
|
|
|
border-color: darken($form-search-color, 0%);
|
|
|
|
|
|
&:focus, &:hover{
|
|
border-color: darken($form-search-color, 10%);
|
|
}
|
|
|
|
}
|
|
|
|
/* (1)(2) grey */
|
|
.grey > input[type=text],
|
|
.grey > input[type=mail],
|
|
.grey > input[type=password],
|
|
.grey > select,
|
|
input.grey[type=text],
|
|
input.grey[type=mail],
|
|
input.grey[type=password]{
|
|
|
|
border-color: darken($form-grey-color, 0%);
|
|
|
|
|
|
&:focus, &:hover{
|
|
border-color: darken($form-grey-color, 10%);
|
|
}
|
|
|
|
} |