mirror of
https://github.com/philomena-dev/philomena.git
synced 2024-11-24 04:27:59 +01:00
8d47f56917
* Build assets using webpack * Change webpack bundling method, add path aliases, restore deploy script * Remove babel dependencies * Add buble rollup plugin and always attach promise polyfill to window * Fix object formatting for buble rollup plugin config * Remove reference to setImmediate from promise polyfill
170 lines
2.8 KiB
SCSS
170 lines
2.8 KiB
SCSS
form p {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.field--block {
|
|
display: block;
|
|
}
|
|
|
|
.field--inline {
|
|
display: flex;
|
|
}
|
|
|
|
.field-error-js {
|
|
background: $warning_light_color;
|
|
padding: 3px;
|
|
}
|
|
|
|
.input {
|
|
box-sizing: border-box;
|
|
padding: 6px;
|
|
border: 1px solid $input_border;
|
|
font-size: 14px;
|
|
font-family: $font_family_monospace;
|
|
color: $input_text_color;
|
|
background: $input_color;
|
|
max-width: 100%; /* prevent resizable inputs from overflowing the container */
|
|
}
|
|
|
|
.input::placeholder {
|
|
opacity: 0.54;
|
|
color: inherit;
|
|
}
|
|
|
|
.input[required]:invalid {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.input:focus {
|
|
outline: none;
|
|
border: 1px solid $input_border_active;
|
|
background: $input_color_active;
|
|
}
|
|
|
|
.input--wide {
|
|
width: 100%;
|
|
}
|
|
|
|
.input--short {
|
|
max-width: 30em;
|
|
}
|
|
|
|
.input--small {
|
|
padding: 0 3px;
|
|
}
|
|
|
|
.input--text {
|
|
height: 8.6em;
|
|
}
|
|
|
|
.input--separate-left {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.input--separate-top {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.input--decoy {
|
|
display: inline-block;
|
|
width: 0;
|
|
height: 0;
|
|
border: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.checkbox {
|
|
margin: 0.2em 0 0 0.4em;
|
|
padding: 0;
|
|
}
|
|
|
|
textarea {
|
|
height: 4em;
|
|
}
|
|
|
|
.field, .actions {
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.field_with_errors {
|
|
background: $danger_color;
|
|
}
|
|
|
|
span.help-block {
|
|
background: $danger_color;
|
|
display: block;
|
|
}
|
|
|
|
/* hform is used for 30em inline 2-element textinput/button forms */
|
|
.hform .field {
|
|
display: flex;
|
|
max-width: 30em;
|
|
width: 100%;
|
|
}
|
|
/* text input - grow to container size */
|
|
.hform__text {
|
|
flex: 1 0 auto;
|
|
}
|
|
/* button - don't shrink or grow at all */
|
|
.hform__button {
|
|
flex: 0 0 auto;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
/* Click-toggleable */
|
|
|
|
.toggle-box {
|
|
display: none;
|
|
}
|
|
|
|
.toggle-box + label {
|
|
@extend .button;
|
|
position: relative;
|
|
> * { display: inline; }
|
|
}
|
|
|
|
.toggle-box + label::before {
|
|
content: "";
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
display: inline-block;
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
.toggle-box + label::before {
|
|
border-width: 0.5em 0 0.5em 0.9em;
|
|
border-color: transparent transparent transparent $foreground_color;
|
|
}
|
|
|
|
.toggle-box:checked + label::before {
|
|
border-width: 0.9em 0.5em 0;
|
|
border-color: $foreground_color transparent transparent transparent;
|
|
}
|
|
|
|
.toggle-box-container {
|
|
overflow: hidden;
|
|
position: relative;
|
|
height: 0;
|
|
}
|
|
|
|
.toggle-box:checked + label + .toggle-box-container {
|
|
height: auto;
|
|
}
|
|
|
|
.toggle-box:checked + label + .toggle-box-container > .toggle-box-container__content {
|
|
margin-top: $block_spacing;
|
|
}
|
|
|
|
select.input, select.input:focus {
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
background: linear-gradient(45deg, transparent 50%, $foreground_color 50%) calc(100% - 15px) 12px/5px 5px no-repeat,linear-gradient(135deg, $foreground_color 50%, transparent 50%) calc(100% - 10px) 12px/5px 5px no-repeat;
|
|
padding-right: 25px;
|
|
}
|
|
|
|
select.input:hover, select.input:focus:hover {
|
|
cursor: pointer;
|
|
background-color: $input_color_active;
|
|
}
|