Spiegel von
https://github.com/paviliondev/discourse-custom-wizard.git
synchronisiert 2024-11-23 09:50:28 +01:00
176 Zeilen
2,7 KiB
SCSS
176 Zeilen
2,7 KiB
SCSS
.custom-wizard {
|
|
.wizard-field {
|
|
margin-bottom: 1em;
|
|
|
|
.field-label {
|
|
font-weight: 800;
|
|
}
|
|
|
|
.field-image {
|
|
margin-bottom: 0.5em;
|
|
|
|
img {
|
|
max-width: 100%;
|
|
max-height: 150px;
|
|
}
|
|
}
|
|
|
|
.field-description {
|
|
flex: 1;
|
|
color: var(--primary);
|
|
margin-top: 0;
|
|
|
|
p {
|
|
margin: 0.3em 0;
|
|
line-height: 1.3em;
|
|
}
|
|
|
|
img {
|
|
height: 15px;
|
|
width: 15px;
|
|
margin: 0 5px;
|
|
}
|
|
}
|
|
|
|
&.invalid {
|
|
textarea,
|
|
input[type="text"],
|
|
input[type="checkbox"],
|
|
.select-kit {
|
|
outline: 4px solid var(--danger);
|
|
}
|
|
}
|
|
}
|
|
|
|
.checkbox-field {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.input-area {
|
|
order: 0;
|
|
margin: 15px 20px !important;
|
|
|
|
input {
|
|
cursor: pointer;
|
|
transform: scale(1.3);
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
& > label.field-label {
|
|
order: 1;
|
|
font-weight: 400;
|
|
}
|
|
|
|
& > .field-description {
|
|
margin-top: 0;
|
|
order: 2;
|
|
}
|
|
}
|
|
|
|
.url-field input {
|
|
width: 100%;
|
|
font-size: 1.1487em;
|
|
padding: 6px;
|
|
transition: border-color 0.5s;
|
|
}
|
|
|
|
.wizard-step-form .wizard-btn {
|
|
display: block;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.wizard-image-row {
|
|
.wizard-btn-upload {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.wizard-image-preview {
|
|
margin-top: 10px;
|
|
max-width: 500px;
|
|
max-height: 500px;
|
|
overflow: hidden;
|
|
display: block;
|
|
border: none;
|
|
padding: 0;
|
|
|
|
img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
}
|
|
|
|
.wizard-select-value img {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.wizard-field-upload {
|
|
.wizard-btn-upload-file {
|
|
display: inline-block;
|
|
position: relative;
|
|
cursor: pointer;
|
|
|
|
input {
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
.filename {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
input.date-picker {
|
|
font-size: 1.1487em;
|
|
padding: 6px;
|
|
border: 1px solid var(--primary);
|
|
transition: border-color 0.5s;
|
|
}
|
|
|
|
.pika-single.is-bound {
|
|
width: fit-content;
|
|
position: absolute !important;
|
|
}
|
|
|
|
.d-time-input .select-kit.combo-box .select-kit-header {
|
|
font-size: 1.1487em;
|
|
padding: 6px;
|
|
}
|
|
|
|
.d-date-time-input {
|
|
display: flex;
|
|
}
|
|
|
|
.list-controls {
|
|
.category-breadcrumb {
|
|
a.badge-category {
|
|
display: inline-block;
|
|
padding: 6px 8px;
|
|
line-height: $line-height-medium;
|
|
}
|
|
}
|
|
}
|
|
|
|
.select-kit.combo-box.group-dropdown {
|
|
min-width: 220px;
|
|
}
|
|
|
|
.text-field input {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.text-field,
|
|
.textarea-field,
|
|
.composer-field {
|
|
input[type="text"],
|
|
textarea {
|
|
&:focus::placeholder {
|
|
color: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|