diff options
Diffstat (limited to 'frontend/common/form.css')
| -rw-r--r-- | frontend/common/form.css | 290 |
1 files changed, 290 insertions, 0 deletions
diff --git a/frontend/common/form.css b/frontend/common/form.css new file mode 100644 index 0000000..f3ba85d --- /dev/null +++ b/frontend/common/form.css @@ -0,0 +1,290 @@ +/* label */ + +label { + display: flex; + min-width: 10rem; + flex-direction: row; + justify-content: flex-start; + align-items: center; + cursor: pointer; +} + +.label { + display: flex; + min-width: 10rem; + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + cursor: pointer; +} + +/* form (stock forms) */ + +form label, +form .label { + width: 100%; + margin-bottom: 0.5rem; +} +form label span, +form .label > span { + display: inline-block; + min-width: 8rem; + padding: 0.5rem 0; +} +form label.textarea { + align-items: flex-start; +} +form input[type="checkbox"] { + margin: -0.0625rem 0.625rem 0 8rem; +} + +/* form errors */ + +form .error span { + color: #f11; +} +form .error input[type=text], +form .error input[type=number], +form .error input[type=password] { + border-color: #f11; +} + +/* text input */ + +input[type=text], +input[type=number], +input[type=password] { + padding: 0.5rem; + border: 1px solid #888; + font-size: 0.875rem; + width: 20rem; + border-radius: 0.125rem; +} + +input[type=text]:focus, +input[type=number]:focus, +input[type=password]:focus { + border: 1px solid #000; +} + +textarea { + width: 35rem; + height: 20rem; + padding: 0.5rem; + border: 1px solid #888; + font-size: 0.875rem; + border-radius: 0.125rem; +} +textarea:focus { + border: 1px solid #000; +} + +/* checkbox */ + +input[type=checkbox] { + position: relative; + display: block; + width: 0.75rem; + height: 0.75rem; + margin-right: 0.625rem; + cursor: pointer; + outline: 0; +} +input[type=checkbox] + span { + font-size: 0.825rem; + text-transform: uppercase; + color: #444; +} +input[type=checkbox]:hover + span { + color: #000; +} +input[type=checkbox]:focus + span { + color: #11f; +} +input[type="checkbox"]:checked + span { + color: #000; +} +input[type="checkbox"]:focus:checked + span { + color: #11f; +} + +input[type="checkbox"]:after { + position: relative; + display: block; + left: 0; + width: 0.75rem; + height: 0.75rem; + border: 0.0625rem solid #888; + content: ""; + background-color: #fff; + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + transition: background-color 0.1s; + border-radius: 0.125rem; +} +input[type=checkbox]:focus:after { + border-color: #11f; +} +input[type="checkbox"]:checked:after { + border-color: #11f; + background-color: #11f; + background-image: url(/static/img/check.svg); + background-size: cover; +} + +/* select */ + +.select { + position: relative; + width: 9rem; + min-width: auto; + background: #fff; + border-radius: 0.125rem; + border: 1px solid #888; + padding: 0.5rem; + overflow: hidden; + text-overflow: ellipsis; + margin-right: 1.25rem; + cursor: pointer; +} +.select select { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + opacity: 0; + cursor: pointer; +} +.select:after { + content: ''; + position: absolute; + top: 50%; + right: 0.375rem; + transform: translateY(-0.125rem); + width: 0; + height: 0; + border-left: 0.375rem solid transparent; + border-right: 0.375rem solid transparent; + border-top: 0.375rem solid #888; +} +.select.focus { + border-color: #11f; + background: #f4f4ff; +} +.select.focus:after { + border-top-color: #11f; +} +.select:hover { + background-color: #f4f4ff; +} +.select div { + width: calc(100% - 1.025rem); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.select.wide { + width: 20rem; +} + +/* button */ + +button { + position: relative; + background: #fff; + border-radius: 0.125rem; + border: 1px solid #888; + padding: 0.5rem; + overflow: hidden; + text-overflow: ellipsis; + font-family: 'Roboto', sans-serif; + font-size: 0.875rem; + cursor: pointer; + text-transform: uppercase; + transition: all 0.1s; +} +button:hover { + background-color: #f0f0ff; + border-color: #1111ff; +} +button.process { + padding-left: 1.5rem; +} +button.process:after { + content: ''; + position: absolute; + top: 50%; + left: 0.625rem; + transform: translateY(-0.375rem); + width: 0; + height: 0; + border-top: 0.375rem solid transparent; + border-bottom: 0.375rem solid transparent; + border-left: 0.375rem solid #888; +} +button.process:focus:after { + border-left-color: #11f; +} +button:focus { + background: #f4f4ff; + border-color: #11f; + color: #11f; + outline: 0; +} +button:disabled { + background: #eee; + color: #888; + border-color: #bbb; + pointer-events: none; +} +button:disabled:after { + border-left-color: #aaa; +} +.buttons button { + margin-right: 0.75rem; +} +button.submit { + color: #1111ff; + border-color: #1111ff; +} +button.submit:hover { + color: #fff; + background: #1111ff; + border-color: #1111ff; +} + +/* file upload, should always be inside a container */ + +input[type=file] { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + cursor: pointer; +} +::-webkit-file-upload-button { cursor: pointer; } +.fileInput > .row { + align-items: center; +} +.fileInput > .row > span { + padding-left: 1rem; +} + +/* copy button */ + +.copyButton { + border-color: transparent; + color: #11f; + font-size: 0.675rem; + padding: 0.25rem; + margin-left: 0.25rem; +} +.desktop .copyButton:hover { + border-color: #11f; +} +.copyButton.copied { + color: #11f; +}
\ No newline at end of file |