.form-group { border: 2px solid black; display: inline-block; margin: 0 auto } form { /* background: $secondary-color; * TODO nice? needs white colored inputs as well */ padding: 1rem 0 } fieldset { background: $body-color; border: none; margin: $article-gutter 0 $article-gutter * 2 0; padding: 0 } legend { padding: $article-gutter 0 $article-gutter * 2 0 } .button, input, button, select, textarea { accent-color: $secondary-color; border: none; color: $secondary-color; /* FIXME you have to repeat this for some ancient browser? */ font: 15px/1.5 "Open Sans", Arial, Liberation Sans, DejaVu Sans, sans-serif; font-weight: bold; /* TODO probably not for selects because you want to make individual items bold */ padding: .5rem .5rem } select:not([size]):not([multiple]) { /* macos chrome/ff/safari, TODO doesn't work very well with .prototype (options are partly invisible on the bottom */ height: 3rem } button, .button { color: white; padding: .5rem 2rem; min-width: 9rem } input, select, textarea { background: lighten($tertiary-color, 10%) } textarea { line-height: 1.5; resize: vertical; height: 10em; width: 80% } .button, button, input[type="button"] { background: $secondary-color; border-radius: 2px } label { display: block; font-size: smaller; font-weight: bold; margin: 2rem 0; input, select, textarea { display: block } input[type="radio"], input[type="checkbox"] { display: inline-block; vertical-align: top } } label small { color: gray; font-weight: normal } input[type="number"], input[type="time"] { text-align: right; width: 9rem } input[type="date"], input[type="time"], select { min-width: 9rem } input[type="search"] { /* make search input stylable in safari */ -webkit-appearance: none; -webkit-border-radius: 0; border-radius: 0; margin-right: 0; /* safari */ } input[type="search"]+buttton { border-top-left-radius: 0; border-bottom-left-radius: 0; }