373 lines
6.9 KiB
CSS
373 lines
6.9 KiB
CSS
/* Forms
|
|
/* ---------------------------------------------------------- */
|
|
|
|
form label {
|
|
display: block;
|
|
color: var(--darkgrey);
|
|
font-size: 1.3rem;
|
|
font-weight: bold;
|
|
user-select: text;
|
|
}
|
|
|
|
form .word-count {
|
|
float: right;
|
|
font-weight: bold;
|
|
}
|
|
|
|
fieldset {
|
|
margin: 0 0 3em 0;
|
|
padding: 0;
|
|
border: none;
|
|
user-select: text;
|
|
}
|
|
|
|
legend {
|
|
display: block;
|
|
width: 100%;
|
|
margin: 2em 0;
|
|
border-bottom: color-mod(var(--lightgrey) l(-5%) s(-10%)) 1px solid;
|
|
color: var(--midgrey);
|
|
font-size: 1.2em;
|
|
line-height: 2.0em;
|
|
user-select: text;
|
|
}
|
|
|
|
input {
|
|
user-select: text;
|
|
}
|
|
|
|
::-webkit-input-placeholder {
|
|
color: color-mod(var(--midgrey) l(+18%));
|
|
font-weight: 200;
|
|
}
|
|
|
|
:-ms-input-placeholder {
|
|
color: color-mod(var(--midgrey) l(+18%));
|
|
font-weight: 200;
|
|
}
|
|
|
|
.error .response {
|
|
color: var(--red);
|
|
}
|
|
|
|
|
|
/* Form Groups
|
|
/* ---------------------------------------------------------- */
|
|
|
|
.form-group {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 700px;
|
|
margin-bottom: 1.6em;
|
|
user-select: text;
|
|
}
|
|
|
|
.form-group.right {
|
|
text-align: right;
|
|
}
|
|
|
|
.form-group p {
|
|
margin: 4px 0 0 0;
|
|
color: var(--midgrey);
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.form-group h3 {
|
|
margin-bottom: 1.6em;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.form-group label {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
@media (max-width: 550px) {
|
|
.form-group {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
/* Input Icons
|
|
/* ---------------------------------------------------------- */
|
|
|
|
.gh-input-icon {
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
|
|
.gh-input-icon svg {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 10px;
|
|
z-index: 2;
|
|
width: 14px;
|
|
height: 14px;
|
|
fill: color-mod(var(--midgrey) l(+15%));
|
|
transform: translateY(-7px);
|
|
}
|
|
|
|
.gh-input-icon.gh-icon-link svg path {
|
|
stroke: color-mod(var(--midgrey) l(+15%));
|
|
}
|
|
|
|
.gh-input-icon input {
|
|
padding-left: 35px;
|
|
}
|
|
|
|
.gh-input-icon .gh-select select {
|
|
padding-left: 35px;
|
|
}
|
|
|
|
/* Inputs
|
|
/* ---------------------------------------------------------- */
|
|
|
|
.gh-input,
|
|
.gh-select,
|
|
select {
|
|
display: block;
|
|
width: 100%;
|
|
height: 40px;
|
|
padding: 10px 12px;
|
|
border: color-mod(var(--lightgrey) l(-5%) s(-10%)) 1px solid;
|
|
color: color-mod(var(--midgrey) l(-18%));
|
|
font-size: 1.6rem;
|
|
line-height: 1em;
|
|
font-weight: 300;
|
|
user-select: text;
|
|
border-radius: var(--border-radius);
|
|
transition: border-color 0.15s linear;
|
|
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.gh-select,
|
|
select {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.gh-input.error,
|
|
.error .gh-input,
|
|
.error .ember-power-select-multiple-trigger,
|
|
.gh-select.error,
|
|
select.error {
|
|
border-color: var(--red);
|
|
}
|
|
|
|
.gh-input:focus,
|
|
.gh-input.focus,
|
|
.gh-select:focus,
|
|
select:focus {
|
|
outline: 0;
|
|
border-color: color-mod(var(--lightgrey) l(-15%) s(-10%));
|
|
}
|
|
|
|
textarea {
|
|
width: 100%;
|
|
height: auto;
|
|
min-width: 250px;
|
|
min-height: 10rem;
|
|
max-width: 500px;
|
|
line-height: 1.5;
|
|
user-select: text;
|
|
resize: vertical;
|
|
}
|
|
|
|
|
|
/* Radio / Checkboxes
|
|
/* ---------------------------------------------------------- */
|
|
|
|
.for-radio label,
|
|
.for-checkbox label {
|
|
display: block;
|
|
padding-bottom: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.for-radio label p,
|
|
.for-checkbox label p {
|
|
overflow: auto;
|
|
color: var(--darkgrey);
|
|
font-weight: normal;
|
|
}
|
|
|
|
.for-radio input,
|
|
.for-checkbox input {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: none;
|
|
}
|
|
|
|
.for-radio .input-toggle-component,
|
|
.for-checkbox .input-toggle-component {
|
|
position: relative;
|
|
top: 1px;
|
|
display: inline-block;
|
|
float: left;
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-right: 7px;
|
|
border: 1px solid color-mod(var(--lightgrey) l(-5%) s(-10%));
|
|
background: color-mod(var(--lightgrey) l(+4%));
|
|
}
|
|
|
|
.for-checkbox label:hover input:not(:checked) + .input-toggle-component,
|
|
.for-radio label:hover input:not(:checked) + .input-toggle-component {
|
|
border-color: color-mod(var(--lightgrey) l(-15%) s(-10%));
|
|
}
|
|
|
|
.for-checkbox .input-toggle-component {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.for-checkbox .input-toggle-component {
|
|
transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
|
|
}
|
|
|
|
.for-checkbox .input-toggle-component:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 3px;
|
|
width: 10px;
|
|
height: 6px;
|
|
border: 2px solid #fff;
|
|
border-top: none;
|
|
border-right: none;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease-in-out;
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
.for-checkbox input:checked + .input-toggle-component {
|
|
border-color: color-mod(var(--green) lightness(-10%));
|
|
background: var(--green);
|
|
}
|
|
|
|
.for-checkbox input:checked + .input-toggle-component:before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.for-radio .input-toggle-component {
|
|
border-radius: 100px;
|
|
}
|
|
|
|
.for-radio .input-toggle-component {
|
|
transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
|
|
}
|
|
|
|
.for-radio .input-toggle-component:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 4px;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #fff;
|
|
border-radius: 100%;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease-in-out;
|
|
}
|
|
|
|
.for-radio input:checked + .input-toggle-component {
|
|
border-color: color-mod(var(--green) lightness(-10%));
|
|
background: var(--green);
|
|
}
|
|
|
|
.for-radio input:checked + .input-toggle-component:before {
|
|
opacity: 1;
|
|
}
|
|
|
|
|
|
/* Select
|
|
/* ---------------------------------------------------------- */
|
|
|
|
.gh-select {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
padding: 0;
|
|
border-width: 0;
|
|
}
|
|
|
|
.gh-select svg {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 1.2rem;
|
|
left: inherit;
|
|
width: 14px;
|
|
height: 8px;
|
|
margin-top: -0.2em;
|
|
transform: inherit;
|
|
pointer-events: none;
|
|
|
|
speak: none;
|
|
}
|
|
|
|
.gh-select svg path {
|
|
stroke: color-mod(var(--midgrey) l(+15%));
|
|
}
|
|
|
|
.gh-select select {
|
|
padding: 10px 12px;
|
|
outline: none;
|
|
line-height: normal;
|
|
text-indent: 0.01px;
|
|
text-overflow: "";
|
|
background: #fff;
|
|
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: window;
|
|
}
|
|
|
|
.gh-select select::-ms-expand {
|
|
display: none;
|
|
}
|
|
|
|
.gh-select select:-moz-focusring {
|
|
color: transparent;
|
|
text-shadow: 0 0 0 #000;
|
|
}
|
|
|
|
.gh-select.disabled select {
|
|
color: color-mod(var(--midgrey) l(+18%));
|
|
cursor: default;
|
|
}
|
|
|
|
.gh-select.disabled svg path {
|
|
stroke: color-mod(var(--midgrey) l(+30%));
|
|
}
|
|
|
|
|
|
/* File Uploads
|
|
/* ---------------------------------------------------------- */
|
|
|
|
.gh-input-file {
|
|
width: auto;
|
|
height: auto;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.gh-input-file + .gh-btn {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
/* FFF: Fucking Firefox Fixes
|
|
/* ---------------------------------------------------------- */
|
|
|
|
@-moz-document url-prefix() {
|
|
.gh-select {
|
|
border-width: 1px;
|
|
}
|
|
.gh-select select {
|
|
padding: 7px 10px 7px 8px;
|
|
}
|
|
.gh-select:focus {
|
|
border-color: color-mod(var(--lightgrey) l(-15%) s(-10%));
|
|
}
|
|
}
|