diff options
Diffstat (limited to 'animism-align/frontend/app/common/form.css')
| -rw-r--r-- | animism-align/frontend/app/common/form.css | 327 |
1 files changed, 327 insertions, 0 deletions
diff --git a/animism-align/frontend/app/common/form.css b/animism-align/frontend/app/common/form.css new file mode 100644 index 0000000..bbee27e --- /dev/null +++ b/animism-align/frontend/app/common/form.css @@ -0,0 +1,327 @@ +/* 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; +} + +/* form field descriptions */ + +form label.description { + cursor: normal; + font-size: small; + color: #ddd; +} +form label.description span { + padding-top: 0; +} + +/* text input */ + +input[type=text], +input[type=number], +input[type=password] { + padding: 0.5rem; + border: 1px solid #ddd; + color: #fff; + background: #111; + font-family: 'Roboto', sans-serif; + font-size: 0.875rem; + width: 15rem; + border-radius: 0.125rem; +} + +input[type=text]:focus, +input[type=number]:focus, +input[type=password]:focus { + border: 1px solid #84f; + background: #000; +} + +textarea { + width: 20rem; + height: 10rem; + padding: 0.5rem; + border: 1px solid #ddd; + font-family: 'Roboto', sans-serif; + background: #111; + color: #fff; + font-size: 0.875rem; + line-height: 1.3; + border-radius: 0.125rem; +} +textarea:focus { + border: 1px solid #84f; + background: #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: #ddd; +} +input[type=checkbox]:hover + span { + color: #fff; +} +input[type=checkbox]:focus + span { + color: #fff; +} +input[type="checkbox"]:checked + span { + color: #fff; +} +input[type="checkbox"]:focus:checked + span { + color: #fff; +} + +input[type="checkbox"]:after { + position: relative; + display: block; + left: 0; + width: 0.75rem; + height: 0.75rem; + border: 0.0625rem solid #ddd; + 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: #84f; +} +input[type="checkbox"]:checked:after { + border-color: #84f; + background-color: #84f; + background-image: url(/static/img/check.svg); + background-size: cover; +} + +/* select */ + +.select { + position: relative; + width: 9rem; + min-width: auto; + background: #111; + border-radius: 0.125rem; + border: 1px solid #ddd; + 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 #ddd; +} +.select.focus { + border-color: #84f; + background: #000; +} +.select.focus:after { + border-top-color: #84f; +} +.select:hover { + background-color: #000; +} +.select div { + width: calc(100% - 1.025rem); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.select.wide { + width: 20rem; +} + +/* button */ + +button { + position: relative; + background: #333; + border-radius: 0.125rem; + color: #ddd; + border: 1px solid; + 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: #000; + border-color: #fff; +} +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: #84f; +} +button:focus { + background: #000; + border-color: #fff; + color: #fff; + 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; +} +.buttons button:last-child { + margin-right: 0; +} +button.submit { + border-color: #d8f; + color: #fff; + background: #111; +} +button.submit:focus, +button.submit:hover { + border-color: #fff; + color: #fff; + background: #222; +} +button.submit.destroy { + background-color: rgba(16,16,16,0.5); + border-color: #b11; + color: #d11; +} +button.submit.destroy:focus, +button.submit.destroy:hover { + background: #000; + border-color: #f33; + color: #f33; +} + +/* 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: #84f; + font-size: 0.675rem; + padding: 0.25rem; + margin-left: 0.25rem; +} +.desktop .copyButton:hover { + border-color: #84f; +} +.copyButton.copied { + color: #84f; +}
\ No newline at end of file |