mf-styling
Version:
css as used for mf apps
75 lines (62 loc) • 1.31 kB
CSS
form {
display: grid;
gap: 8px;
}
fieldset {
border: 0;
}
fieldset:disabled {
pointer-events: none;
}
label {
font-size: 1.1rem;
}
.below {
display: block
}
input {
height: calc(1.25em + 0.75rem);
margin-bottom: 0.5rem;
padding: 0.25rem 0.5rem;
font-size: 1rem;
color: var(--color-neutral-900);
background-color: var(--color-neutral-200);
background-clip: padding-box;
border: 1px solid var(--color-neutral-300);
border-radius: var(--border-radius);
transition:
border-color var(--transition-time) ease-in-out,
box-shadow var(--transition-time) ease-in-out;
}
input:disabled {
color: var(--color-neutral-50);
border: 0 solid var(--color-neutral-50);
pointer-events: none;
}
input:user-invalid {
background-color: var(--color-warn-200-80);
}
@supports not selector(:user-invalid) {
input:invalid {
background-color: var(--color-warn-200-80);
}
}
input:optional {
background-color: var(--color-neutral-100);
}
input:required {
background-color: var(--color-neutral-300);
}
input:focus:invalid {
background-color: var(--color-warn-300-80);
}
.modal {
position: fixed;
z-index: 1000;
display: flex;
flex-direction: column;
justify-content: center;
width: 100vw;
height: 100vh;
background: var(--color-neutral-900-40);
}