Newer
Older
.form_field {
margin: 0.5rem 0;
border-radius: 0.25rem;
background: rgba($faint,0.25);
font-weight: 600;
color: $black;
opacity: 0.75;
padding: 0.5rem 0.5rem 0;
input[type="text"], input[type="number"], input[type="tel"], input[type="email"], input[type="password"], textarea {
border: 0;
background: transparent;
font-size: ms(0);
font-weight: 400;
font-family: $sans;
line-height: ms(0) * 1.3;
width: 100%;
opacity: 0.75;
padding: 0.5rem;
margin-top: -0.25rem;
&:focus {
opacity: 1;
}
}
input[type="range"] {
-webkit-appearance: none;
width: calc(100% - 1rem);
height: 0.5rem;
border-radius: 0.5rem;
background: rgba($faint,0.5);
outline: none;
padding: 0;
margin: 0.5rem;
&::-webkit-slider-thumb {
appearance: none;
width: 1rem;
height: 1rem;
border-radius: 50%;
background: $grey;
cursor: pointer;
transition: background .15s ease;
&:hover {
background: $black;
}
}
&:active::-webkit-slider-thumb {
background-color: $blue;
}
}
textarea {
resize: none;
font-family: $mono;
font-size: ms(-1);
&.-sm {
height: 3.5rem;
}
&.-md {
height: 4.75rem;
}
&.-lg {
height: 8rem;
}
}
}
input.form_field_amount[type='number'] {
font-size: ms(8);
line-height: ms(8) * 1.1;
font-weight: 200;
text-align: center;
-webkit-appearance: none;
&::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
opacity: 1;
-webkit-appearance: none;
}
}
nav.form-field_nav {
padding: 0 0.5rem 0.5rem;
display: flex;
justify-content: flex-end;
button {
margin-left: 0.5rem;
}
}
nav.range-nav {
width: 100%;
padding: 0 0.5rem 0.5rem;
display: flex;
justify-content: space-between;
font-size: ms(-2);
font-weight: 600;
.range-nav_label {
width: 4rem;
color: $grey;
&:last-child {
text-align: right;
}
}
.range-nav_value {
display: block;
width: 8rem;
text-align: center;
color: $black
}