mirror of
https://github.com/philomena-dev/philomena.git
synced 2024-11-24 04:27:59 +01:00
d4d4ee0e2d
add base line-height: 1.5em add appropriate placeholder color to inputs show number of faves on fave index link to correct location in watched images list on activity page don't show pagination info when there are no results don't create a source history entry if the source wasn't changed
158 lines
2.4 KiB
SCSS
158 lines
2.4 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;
|
|
}
|