style settings and add global form element styling
This commit is contained in:
Benedikt Rötsch
committed by
Benedikt Rötsch
Benedikt Rötsch
parent
62ecdfe60c
commit
dcf4aa812c
260
assets/stylesheets/formhack.css
Normal file
260
assets/stylesheets/formhack.css
Normal file
@@ -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);
|
||||
}
|
||||
10
assets/stylesheets/forms.css
Normal file
10
assets/stylesheets/forms.css
Normal file
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -105,6 +105,13 @@
|
||||
& label + select {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
& select,
|
||||
& label {
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,6 +3,9 @@
|
||||
@import './variables';
|
||||
|
||||
@import './typography';
|
||||
@import './formhack';
|
||||
@import './forms';
|
||||
|
||||
@import './global';
|
||||
@import './header';
|
||||
@import './footer';
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
.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)
|
||||
input(type="submit" value="Save →" class="button")
|
||||
.help-text Some help text we still need to define
|
||||
|
||||
.form-item
|
||||
input.cta(type="submit" value="Load settings")
|
||||
|
||||
Reference in New Issue
Block a user