Ghost/ghost/admin/app/styles/patterns/forms.css

358 lines
6.5 KiB
CSS
Raw Normal View History

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