102 lines
2.2 KiB
SCSS
102 lines
2.2 KiB
SCSS
@import '../constants';
|
|
|
|
|
|
|
|
/* (1) BUTTON (neutral) */
|
|
button, .neutral > button,
|
|
input[type=button], .neutral > input[type=button],
|
|
input[type=submit], .neutral > input[type=submit],
|
|
button.neutral,
|
|
input[type=button].neutral,
|
|
input[type=submit].neutral{
|
|
|
|
display: inline-block;
|
|
position: relative;
|
|
|
|
padding: .5em 1em;
|
|
|
|
border-radius: 3px;
|
|
border: 1px solid $form-neutral-color;
|
|
|
|
background: #fff center center no-repeat;
|
|
text-transform: uppercase;
|
|
font-weight: normal;
|
|
font-family: inherit;
|
|
|
|
|
|
color: $primary-color;
|
|
|
|
cursor: pointer;
|
|
|
|
transition: color .2s ease-in-out,
|
|
border-color .1s ease-in-out,
|
|
background .2s ease-in-out;
|
|
|
|
&:hover, &[data-active='1']{
|
|
color: #fff;
|
|
border-color: $form-neutral-color;
|
|
background-color: $form-neutral-color;
|
|
}
|
|
}
|
|
|
|
/* (1) valid */
|
|
button.valid, .valid > button,
|
|
input[type=button].valid, .valid > input[type=button],
|
|
input[type=submit].valid, .valid > input[type=submit]{
|
|
|
|
color: $form-valid-color;
|
|
|
|
&:hover, &[data-active='1']{
|
|
color: #fff;
|
|
border-color: $form-valid-color;
|
|
background-color: $form-valid-color;
|
|
}
|
|
|
|
}
|
|
|
|
/* (1) invalid */
|
|
button.invalid, .invalid > button,
|
|
input[type=button].invalid, .invalid > input[type=button],
|
|
input[type=submit].invalid, .invalid > input[type=submit]{
|
|
|
|
color: $form-invalid-color;
|
|
|
|
&:hover, &[data-active='1']{
|
|
color: #fff;
|
|
border-color: $form-invalid-color;
|
|
background-color: $form-invalid-color;
|
|
}
|
|
|
|
}
|
|
|
|
/* (1) search */
|
|
button.search, .search > button,
|
|
input[type=button].search, .search > input[type=button],
|
|
input[type=submit].search, .search > input[type=submit]{
|
|
|
|
color: $form-search-color;
|
|
|
|
&:hover, &[data-active='1']{
|
|
color: #fff;
|
|
border-color: $form-search-color;
|
|
background-color: $form-search-color;
|
|
}
|
|
|
|
}
|
|
|
|
/* (1) valid grey */
|
|
button:disabled,
|
|
button.grey, .grey > button,
|
|
input[type=button].grey, .grey > input[type=button],
|
|
input[type=submit].grey, .grey > input[type=submit]{
|
|
|
|
color: $form-grey-color;
|
|
|
|
&:hover, &[data-active='1']{
|
|
color: #fff;
|
|
border-color: $form-grey-color;
|
|
background-color: $form-grey-color;
|
|
}
|
|
|
|
cursor: default;
|
|
} |