This repository has been archived on 2021-10-31. You can view files and clone it, but cannot push or open issues or pull requests.
SA3/hw1/claudio_maggioni/css/form.css

91 lines
1.4 KiB
CSS

/* vim: set ts=2 sw=2 tw=80 et: */
input, textarea {
border: 1px solid #ccc;
}
input::placeholder, textarea::placeholder {
color: #ccc;
}
fieldset {
display: grid;
grid-template-columns: 7em 1fr;
grid-gap: 1rem;
border: none;
margin: .5rem 0;
background: #eee;
border-radius: .5rem;
}
@media screen and (max-width: 768px) {
fieldset {
grid-template-columns: 1fr;
grid-gap: .5rem;
}
}
fieldset legend {
position: relative;
top: 10%;
background: #333;
color: white;
padding: .25rem .5rem;
border-radius: .25rem;
}
fieldset label {
font-weight: bold;
font-size: .9rem;
}
fieldset label::after {
content: ":";
}
fieldset input, fieldset textarea {
padding: .5rem;
font-family: 'Fira Sans', sans-serif;
font-size: .85rem;
border-radius: .5rem;
background: white;
}
fieldset textarea[name="address"] {
height: 4em;
}
fieldset input[type="checkbox"] {
margin-left: 0;
padding-left: 0;
max-width: 1em;
}
form button {
color: #333;
background: #ccc;
font-size: 1em;
padding: .5rem 1rem;
border-radius: .5rem;
outline: none;
border: 0 none;
}
.range-10 {
display: grid;
justify-items: center;
grid-template-columns: repeat(20, 1fr);
}
.range-10 div {
grid-column: span 2;
font-size: .9rem;
}
.range-10 input[type="range"] {
grid-column: 2 / 20;
justify-self: stretch;
margin: 0 -10px;
}