From dcf4aa812c69aa471baf25b253bff5c9fd591a2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benedikt=20R=C3=B6tsch?= Date: Wed, 27 Sep 2017 12:47:02 +0200 Subject: [PATCH] style settings and add global form element styling --- assets/stylesheets/formhack.css | 260 +++++++++++++++++++++++++++++ assets/stylesheets/forms.css | 10 ++ assets/stylesheets/global.css | 11 -- assets/stylesheets/header.css | 7 + assets/stylesheets/style.css | 3 + assets/stylesheets/variables.css | 6 +- public/stylesheets/style.css | 272 +++++++++++++++++++++++++++++-- views/settings.pug | 26 ++- 8 files changed, 563 insertions(+), 32 deletions(-) create mode 100644 assets/stylesheets/formhack.css create mode 100644 assets/stylesheets/forms.css diff --git a/assets/stylesheets/formhack.css b/assets/stylesheets/formhack.css new file mode 100644 index 0000000..3993257 --- /dev/null +++ b/assets/stylesheets/formhack.css @@ -0,0 +1,260 @@ +/* Based on FormHack v1.2.0 (formhack.io) */ +/* But with some custom modifications */ + +/* Config ----------------------------- */ +:root { + + /* Font */ + --fh-font-family: 'Raleway', sans-serif; + --fh-font-size: 16px; + --fh-font-color: rgb(40, 40, 40); + + /* Borders */ + --fh-border-radius: 5px; + --fh-border-width: 1px; + --fh-border-style: solid; + --fh-border-color: rgb(200, 200, 200); + + /* Inputs, Textareas, Select, Option */ + --fh-input-height: 40px; + --fh-input-width: 100%; + --fh-input-max-width: 100%; + --fh-input-bg-color: #fff; + --fh-focus-bg-color: var(--fh-input-bg-color); + --fh-focus-border-color: var(--color-palette-blue); + --fh-focus-font-color: var(--fh-font-color); + + /* Select Vendor Styling */ + --fh-select-vendor-styling: none; /* comment this out to maintain vendor styling */ + + + /* Buttons & Input Submits */ + --fh-button-height: 40px; + --fh-button-width: 100%; + --fh-button-min-width: 200px; + --fh-button-font-color: var(--cta-color); + --fh-button-bg-color: var(--cta-bg); + --fh-button-hover-bg-color: color(var(--fh-button-bg-color) tint(20%)); + --fh-button-hover-font-color: var(--fh-button-font-color); + + /* Layout */ + --fh-layout-display: block; + --fh-layout-margin: var(--grid-gutter) 0; /* change to "10px auto" to center */ + --fh-layout-text-align: left; +} + + + +/* Global Reset Styles ------------------ */ + +input, +textarea, +select, +option, +optgroup, +button, +legend, +fieldset, +.cta { + box-sizing: border-box; + outline: none; + + font-family: var(--fh-font-family); + font-size: var(--fh-font-size); + color: var(--fh-font-color); + vertical-align: top; + + display: var(--fh-layout-display); + margin: var(--fh-layout-margin); + text-align: var(--fh-layout-text-align); +} + + +datalist { + font-family: var(--fh-font-family); + font-size: var(--fh-font-size); +} + +label { + display: var(--fh-layout-display); + margin: var(--fh-layout-margin); + text-align: var(--fh-layout-text-align); + font-weight: bold; + + & + input { + margin-top: calc(var(--grid-gutter) * 0.5 * -1) + } +} + + + +/* Input & Textarea ------------------ */ + +/* Fields with standard width */ +input[type="text"], +input[type="email"], +input[type="password"], +input[type="search"], +input[type="color"], +input[type="date"], +input[type="datetime-local"], +input[type="month"], +input[type="number"], +input[type="tel"], +input[type="time"], +input[type="url"], +input[type="week"], +input[list], +input[type="file"], +/* select, */ +textarea { + width: var(--fh-input-width); + max-width: var(--fh-input-max-width); + padding: calc( var(--fh-input-height) / 5 ); + background-color: var(--fh-input-bg-color); + + border-radius: var(--fh-border-radius); + border-width: var(--fh-border-width); + border-style: var(--fh-border-style); + border-color: var(--fh-border-color); +} + +/* Fields with standard height */ +input[type="text"], +input[type="email"], +input[type="password"], +input[type="search"], +input[type="color"], +input[type="date"], +input[type="datetime-local"], +input[type="month"], +input[type="number"], +input[type="tel"], +input[type="time"], +input[type="url"], +input[type="week"], +input[list] { + height: var(--fh-input-height); + -webkit-appearance: none; +} + +/* Other */ + +textarea { + -webkit-appearance: none; + overflow: auto; +} + +input[type="range"] { + height: var(--fh-input-height); + width: var(--fh-input-width); + max-width: var(--fh-input-max-width); +} + +input[type="file"] { + min-height: var(--fh-input-height); +} + +input[type="search"] { + height: var(--fh-input-height); + -webkit-appearance: none; +} +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +input[type="checkbox"], +input[type="radio"] { + display: inline-block; + vertical-align: middle; +} +/* For checkbox and radio to be centered, need to wrap the input and label in a span - +/* .checkbox-container { +/* display: block; +/* text-align: center; +/* } + + +/* Fieldset ------------------ */ + +fieldset { + padding: 0; + border: 0; +} + +legend { + padding: 0; + font-weight: inherit; +} + +/* Buttons, Input Type Submit/Reset ------------------ */ + +button, +input[type="button"], +input[type="submit"], +input[type="reset"], +input[type="image"], +.cta { + display: inline-block; + height: var(--fh-button-height); + min-width: var(--fh-button-min-width); + background-color: var(--fh-button-bg-color); + padding: 0 2em; + cursor: pointer; + + line-height: var(--fh-button-height); + color: var(--fh-button-font-color); + font-weight: normal; + + -webkit-appearance: none; + -moz-appearance: none; + + border: none; + border-radius: var(--cta-radius); + text-align: center; +} + +input[type="image"] { + text-align: center; + padding: calc( var(--fh-input-height) / 5 ); +} + +/* States ------------------ */ + +input[disabled], +textarea[disabled], +select[disabled], +option[disabled], +button[disabled] { + cursor: not-allowed; +} + +input:focus, +textarea:focus, +select:focus, +option:focus, +button:focus, +.cta:focus { + background-color: var(--fh-button-hover-bg-color); + color: var(--fh-button-hover-font-color); +} + +input[type="checkbox"]:focus, +input[type="radio"]:focus { + outline: var(--fh-focus-border-color) solid 2px; +} + +button:hover, +input[type="button"]:hover, +input[type="submit"]:hover, +input[type="reset"]:hover, +button:focus, +input[type="button"]:focus, +input[type="submit"]:focus, +input[type="reset"]:focus, +.cta:hover, +.cta:focus { + background-color: var(--fh-button-hover-bg-color); + color: var(--fh-button-hover-font-color); +} diff --git a/assets/stylesheets/forms.css b/assets/stylesheets/forms.css new file mode 100644 index 0000000..bbc6845 --- /dev/null +++ b/assets/stylesheets/forms.css @@ -0,0 +1,10 @@ +.form-item { + & + .form-item { + margin-top: var(--grid-gutter); + } + & .help-text { + font-size: 0.9em; + color: var(--color-text-grey); + margin-top: calc(var(--grid-gutter) * -1); + } +} diff --git a/assets/stylesheets/global.css b/assets/stylesheets/global.css index 8622559..05880d8 100644 --- a/assets/stylesheets/global.css +++ b/assets/stylesheets/global.css @@ -148,14 +148,3 @@ body { } } } - -.cta { - display: inline-block; - box-sizing: border-box; - min-width: 200px; - padding: 0.5em 2em; - color: var(--cta-color); - background: var(--cta-bg); - border-radius: var(--cta-radius); - text-align: center; -} diff --git a/assets/stylesheets/header.css b/assets/stylesheets/header.css index 57782c0..5508ec6 100644 --- a/assets/stylesheets/header.css +++ b/assets/stylesheets/header.css @@ -105,6 +105,13 @@ & label + select { margin-left: 0.5em; } + + & select, + & label { + display: inline-block; + margin-top: 0; + margin-bottom: 0; + } } } } diff --git a/assets/stylesheets/style.css b/assets/stylesheets/style.css index 1a5b669..6d12d0c 100644 --- a/assets/stylesheets/style.css +++ b/assets/stylesheets/style.css @@ -3,6 +3,9 @@ @import './variables'; @import './typography'; +@import './formhack'; +@import './forms'; + @import './global'; @import './header'; @import './footer'; diff --git a/assets/stylesheets/variables.css b/assets/stylesheets/variables.css index cece1f6..0578d2f 100644 --- a/assets/stylesheets/variables.css +++ b/assets/stylesheets/variables.css @@ -6,10 +6,12 @@ --line-height: 1.5em; + --color-palette-blue: #5c9fef; + --color-text-default: #2a303a; --color-text-grey: #8091a5; - --color-link-content: #5c9fef; + --color-link-content: var(--color-palette-blue); --color-bg-default: #fff; --color-bg-grey: #f7f9fa; @@ -22,6 +24,6 @@ --card-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45); --cta-color: #fff; - --cta-bg: #5b9fef; + --cta-bg: var(--color-palette-blue); --cta-radius: 3px; } diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index ca43319..e71e00f 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -459,6 +459,259 @@ a { text-decoration: none; } +/* Based on FormHack v1.2.0 (formhack.io) */ + +/* But with some custom modifications */ + +/* Config ----------------------------- */ + +:root { + + /* Font */ + + /* Borders */ + + /* Inputs, Textareas, Select, Option */ + + /* Select Vendor Styling */ /* comment this out to maintain vendor styling */ + + + /* Buttons & Input Submits */ + + /* Layout */ /* change to "10px auto" to center */ +} + +/* Global Reset Styles ------------------ */ + +input, +textarea, +select, +option, +optgroup, +button, +legend, +fieldset, +.cta { + -webkit-box-sizing: border-box; + box-sizing: border-box; + outline: none; + + font-family: 'Raleway', sans-serif; + font-size: 16px; + color: rgb(40, 40, 40); + vertical-align: top; + + display: block; + margin: 16px 0; + margin: 1rem 0; + text-align: left; +} + +datalist { + font-family: 'Raleway', sans-serif; + font-size: 16px; +} + +label { + display: block; + margin: 16px 0; + margin: 1rem 0; + text-align: left; + font-weight: bold +} + +label + input { + margin-top: -8px; + margin-top: -0.5rem; +} + +/* Input & Textarea ------------------ */ + +/* Fields with standard width */ + +input[type="text"], +input[type="email"], +input[type="password"], +input[type="search"], +input[type="color"], +input[type="date"], +input[type="datetime-local"], +input[type="month"], +input[type="number"], +input[type="tel"], +input[type="time"], +input[type="url"], +input[type="week"], +input[list], +input[type="file"], +/* select, */ +textarea { + width: 100%; + max-width: 100%; + padding: 8px; + background-color: #fff; + + border-radius: 5px; + border-width: 1px; + border-style: solid; + border-color: rgb(200, 200, 200); +} + +/* Fields with standard height */ + +input[type="text"], +input[type="email"], +input[type="password"], +input[type="search"], +input[type="color"], +input[type="date"], +input[type="datetime-local"], +input[type="month"], +input[type="number"], +input[type="tel"], +input[type="time"], +input[type="url"], +input[type="week"], +input[list] { + height: 40px; + -webkit-appearance: none; +} + +/* Other */ + +textarea { + -webkit-appearance: none; + overflow: auto; +} + +input[type="range"] { + height: 40px; + width: 100%; + max-width: 100%; +} + +input[type="file"] { + min-height: 40px; +} + +input[type="search"] { + height: 40px; + -webkit-appearance: none; +} + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +input[type="checkbox"], +input[type="radio"] { + display: inline-block; + vertical-align: middle; +} + +/* For checkbox and radio to be centered, need to wrap the input and label in a span - +/* .checkbox-container { +/* display: block; +/* text-align: center; +/* } + + +/* Fieldset ------------------ */ + +fieldset { + padding: 0; + border: 0; +} + +legend { + padding: 0; + font-weight: inherit; +} + +/* Buttons, Input Type Submit/Reset ------------------ */ + +button, +input[type="button"], +input[type="submit"], +input[type="reset"], +input[type="image"], +.cta { + display: inline-block; + height: 40px; + min-width: 200px; + background-color: #5c9fef; + padding: 0 2em; + cursor: pointer; + + line-height: 40px; + color: #fff; + font-weight: normal; + + -webkit-appearance: none; + -moz-appearance: none; + + border: none; + border-radius: 3px; + text-align: center; +} + +input[type="image"] { + text-align: center; + padding: 8px; +} + +/* States ------------------ */ + +input[disabled], +textarea[disabled], +select[disabled], +option[disabled], +button[disabled] { + cursor: not-allowed; +} + +input:focus, +textarea:focus, +select:focus, +option:focus, +button:focus, +.cta:focus { + background-color: rgb(125, 178, 242); + color: #fff; +} + +input[type="checkbox"]:focus, +input[type="radio"]:focus { + outline: #5c9fef solid 2px; +} + +button:hover, +input[type="button"]:hover, +input[type="submit"]:hover, +input[type="reset"]:hover, +button:focus, +input[type="button"]:focus, +input[type="submit"]:focus, +input[type="reset"]:focus, +.cta:hover, +.cta:focus { + background-color: rgb(125, 178, 242); + color: #fff; +} + +.form-item + .form-item { + margin-top: 16px; + margin-top: 1rem; +} + +.form-item .help-text { + font-size: 0.9em; + color: #8091a5; + margin-top: -16px; + margin-top: -1rem; +} + body { background-color: #fff; color: #2a303a; @@ -672,18 +925,6 @@ body { font-weight: bold; } -.cta { - display: inline-block; - -webkit-box-sizing: border-box; - box-sizing: border-box; - min-width: 200px; - padding: 0.5em 2em; - color: #fff; - background: #5b9fef; - border-radius: 3px; - text-align: center; -} - #header { display: -webkit-box; display: -ms-flexbox; @@ -840,6 +1081,13 @@ body { margin-left: 0.5em; } +.header__navarea form fieldset select, + .header__navarea form fieldset label { + display: inline-block; + margin-top: 0; + margin-bottom: 0; +} + #footer { margin: 16px 0; margin: 1rem 0; diff --git a/views/settings.pug b/views/settings.pug index b0fae9f..8f9940d 100644 --- a/views/settings.pug +++ b/views/settings.pug @@ -3,11 +3,23 @@ extends layout block content .wrapper h1= title + p To query and get content using the APIs, client apllications need to authenticate iwth both the Space ID and an access token. + form(action=`/settings` method="POST" class="form") - label(for="space") Space - input(type="text" name="space" value=settings.space) - label(for="cda") Delivery API Key - input(type="text" name="cda" value=settings.cda) - label(for="cpa") Preview API Key - input(type="text" name="cpa" value=settings.cpa) - input(type="submit" value="Save →" class="button") + .form-item + label(for="space") Space ID + input(type="text" name="space" value=settings.space) + .help-text Some help text we still need to define + + .form-item + label(for="cda") Delivery API Key + input(type="text" name="cda" value=settings.cda) + .help-text Some help text we still need to define + + .form-item + label(for="cpa") Preview API Key + input(type="text" name="cpa" value=settings.cpa) + .help-text Some help text we still need to define + + .form-item + input.cta(type="submit" value="Load settings")