136 lines
3.0 KiB
SCSS
136 lines
3.0 KiB
SCSS
// styles for admin/settings
|
|
|
|
.settings {
|
|
.setting {
|
|
padding-bottom: 20px;
|
|
.setting-label {
|
|
float: left;
|
|
width: 17.6576%;
|
|
margin-right: 12px;
|
|
@media (max-width: $mobile-breakpoint) {
|
|
float: none;
|
|
margin-right: 0;
|
|
width: 100%;
|
|
h3 {
|
|
margin-bottom: 6px;
|
|
}
|
|
}
|
|
.history-icon {
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
color: var(--primary-medium);
|
|
}
|
|
&:hover .history-icon {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.setting-value {
|
|
float: left;
|
|
width: 53%;
|
|
padding-right: 20px;
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
flex: 0 0 auto;
|
|
}
|
|
.category-selector {
|
|
width: 95%;
|
|
}
|
|
@media (max-width: $mobile-breakpoint) {
|
|
width: 100%;
|
|
padding-right: 0;
|
|
}
|
|
.select-kit {
|
|
width: 100% !important; // Needs !important to override hard-coded value
|
|
@media (max-width: $mobile-breakpoint) {
|
|
width: 100% !important; // !important overrides hard-coded mobile width of 68px
|
|
}
|
|
}
|
|
.image-uploader {
|
|
display: flex;
|
|
}
|
|
.uploaded-image-preview {
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-color: var(--primary-medium);
|
|
}
|
|
}
|
|
.setting-controls {
|
|
float: left;
|
|
}
|
|
.input-setting-string,
|
|
.input-setting-textarea {
|
|
width: 100%;
|
|
@media (max-width: $mobile-breakpoint) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.input-setting-textarea {
|
|
height: 150px;
|
|
}
|
|
.input-setting-list {
|
|
@media (max-width: $mobile-breakpoint) {
|
|
width: 100%;
|
|
}
|
|
padding: 1px;
|
|
background-color: var(--secondary);
|
|
border: 1px solid var(--primary-low);
|
|
border-radius: 3px;
|
|
transition: border linear 0.2s, box-shadow linear 0.2s;
|
|
li.sortable-placeholder {
|
|
@include unselectable;
|
|
padding: 3px 5px 3px 18px;
|
|
margin: 3px 0 3px 5px;
|
|
position: relative;
|
|
line-height: $line-height-small;
|
|
cursor: default;
|
|
border: 1px dashed var(--primary-low-mid);
|
|
border-radius: 3px;
|
|
background-clip: padding-box;
|
|
background-color: transparent;
|
|
width: 3em;
|
|
height: 1em;
|
|
}
|
|
}
|
|
.desc,
|
|
.validation-error {
|
|
padding-top: 3px;
|
|
font-size: $font-down-1;
|
|
line-height: $line-height-large;
|
|
}
|
|
.validation-error {
|
|
color: var(--danger);
|
|
}
|
|
.desc {
|
|
color: var(--primary-medium);
|
|
}
|
|
h3 {
|
|
font-size: $font-0;
|
|
font-weight: normal;
|
|
}
|
|
|
|
&.color {
|
|
.color-picker {
|
|
display: flex;
|
|
.picker + .sp-replacer {
|
|
border-left: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.setting.overridden {
|
|
h3 {
|
|
color: var(--highlight-high);
|
|
}
|
|
}
|
|
.setting.overridden.string {
|
|
input[type="text"],
|
|
input[type="password"],
|
|
textarea {
|
|
background-color: var(--highlight-medium);
|
|
}
|
|
}
|
|
.warning {
|
|
color: var(--danger);
|
|
}
|
|
}
|