input, select, textarea, fieldset {
font-size: $form-field-font-size; margin-top: 0; margin-bottom: $space-1;
}
input, input, input, input, input, input, input, input, input, input, input, input {
box-sizing: border-box; height: $form-field-height; padding: $form-field-padding-y $form-field-padding-x; vertical-align: middle; -webkit-appearance: none;
}
select {
box-sizing: border-box; line-height: 1.75; padding: $form-field-padding-y $form-field-padding-x;
}
select:not() {
height: $form-field-height; vertical-align: middle;
}
textarea {
box-sizing: border-box; line-height: 1.75; padding: $form-field-padding-y $form-field-padding-x;
}
.form-stacked input, .form-stacked textarea, .form-stacked select {
width: 100%;
}
.field-light {
background-color: white; transition: box-shadow .2s ease; border-style: solid; border-width: $border-width; border-color: $border-color; border-radius: $border-radius;
}
.field-light:focus {
outline: none; border-color: $blue; box-shadow: 0 0 2px rgba($blue,.5);
}
.field-light:disabled {
color: $mid-gray; background-color: $darken-2;
}
.field-light:read-only:not(select) {
background-color: $darken-2;
}
.field-light:invalid {
border-color: $red;
}
.field-light.is-success {
border-color: $green;
}
.field-light.is-warning {
border-color: $yellow;
}
.field-light.is-error {
border-color: $red;
}
.radio-light, .checkbox-light {
transition: box-shadow .2s ease;
}
.radio-light {
border-radius: 50%;
}
.radio-light:focus, .checkbox-light:focus {
outline: none; box-shadow: 0 0 2px rgba($blue, .5);
}