Spiegel von
https://github.com/paviliondev/discourse-custom-wizard.git
synchronisiert 2024-11-26 02:50:28 +01:00
Merge pull request #53 from paviliondev/style_upgrade
Integrate custom wizard styles into the Discourse asset pipeline
Dieser Commit ist enthalten in:
Angus McLeod
GitHub
Commit
a0f48e5a28
19 geänderte Dateien mit 675 neuen und 919 gelöschten Zeilen
|
|
@ -6,6 +6,6 @@
|
|||
togglePreview=(action "togglePreview")
|
||||
afterRefresh=(action "afterRefresh")}}
|
||||
|
||||
<button class='wizard-btn primary toggle-preview' {{action 'togglePreview'}}>
|
||||
<button class='wizard-btn toggle-preview' {{action 'togglePreview'}}>
|
||||
<span class="d-button-label">{{i18n togglePreviewLabel}}</span>
|
||||
</button>
|
||||
|
|
@ -344,7 +344,7 @@
|
|||
}
|
||||
|
||||
.buttons .error {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
|
||||
.fa {
|
||||
margin-right: 5px;
|
||||
|
|
@ -509,7 +509,7 @@
|
|||
top: 50%;
|
||||
width: 9999px;
|
||||
height: 1px;
|
||||
background: $tertiary;
|
||||
background: var(--tertiary);
|
||||
}
|
||||
|
||||
> span:before {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
|
||||
.error {
|
||||
margin-top: 10px;
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@
|
|||
align-items: center;
|
||||
|
||||
&.active {
|
||||
color: $tertiary;
|
||||
color: var(--tertiary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
@import "wizard_variables";
|
||||
|
||||
div.ac-wrap {
|
||||
overflow: visible;
|
||||
max-height: 150px;
|
||||
min-height: 34px;
|
||||
background-color: white;
|
||||
border: 1px solid #e9e9e9;
|
||||
background-color: var(--secondary);
|
||||
border: 1px solid var(--primary-medium);
|
||||
padding: 5px 4px 1px 4px;
|
||||
|
||||
div.item {
|
||||
|
|
@ -34,19 +32,18 @@ div.ac-wrap {
|
|||
|
||||
.remove-link {
|
||||
margin-left: 4px;
|
||||
font-size: 11px;
|
||||
line-height: 10px;
|
||||
padding: 1.5px 1.5px 1.5px 2.5px;
|
||||
font-size: $font-down-1;
|
||||
line-height: $line-height-small;
|
||||
padding: 1px 3.5px;
|
||||
border-radius: 12px;
|
||||
width: 10px;
|
||||
display: inline-block;
|
||||
border: 1px solid #e9e9e9;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--primary-low);
|
||||
|
||||
&:hover {
|
||||
background-color: #f2ab9a;
|
||||
border: 1px solid #ec8972;
|
||||
background-color: var(--danger-low);
|
||||
border: 1px solid var(--danger-medium);
|
||||
text-decoration: none;
|
||||
color: #e45735;
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -60,8 +57,8 @@ img.avatar {
|
|||
z-index: 999999;
|
||||
position: absolute;
|
||||
width: 240px;
|
||||
background-color: white;
|
||||
border: 1px solid #e9e9e9;
|
||||
background-color: var(--secondary);
|
||||
border: 1px solid var(--primary-low);
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
|
|
@ -70,11 +67,11 @@ img.avatar {
|
|||
|
||||
li {
|
||||
.d-users {
|
||||
color: #333;
|
||||
color: var(--primary-medium);
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
|
||||
a {
|
||||
padding: 5px;
|
||||
|
|
@ -90,21 +87,20 @@ img.avatar {
|
|||
}
|
||||
|
||||
span.username {
|
||||
color: #000;
|
||||
color: var(--primary);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
span.name {
|
||||
font-size: 11px;
|
||||
font-size: $font-down-1;
|
||||
vertical-align: middle;
|
||||
margin-left: 5px;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: #d1f0ff;
|
||||
background-color: var(--tertiary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #ffffa6;
|
||||
background-color: var(--highlight-low);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -138,7 +134,6 @@ img.avatar {
|
|||
}
|
||||
|
||||
ul > label {
|
||||
color: #919191;
|
||||
margin: 5px 0;
|
||||
padding: 0 5px;
|
||||
font-size: 80%;
|
||||
|
|
@ -153,11 +148,11 @@ img.avatar {
|
|||
|
||||
.ac-form-result {
|
||||
cursor: pointer;
|
||||
background-color: $secondary;
|
||||
background-color: var(--secondary);
|
||||
display: flex;
|
||||
|
||||
&:hover, &.selected {
|
||||
background-color: $tertiary;
|
||||
background-color: var(--tertiary);
|
||||
color: white;
|
||||
|
||||
label {
|
||||
119
assets/stylesheets/wizard/custom/badges.scss
Normale Datei
119
assets/stylesheets/wizard/custom/badges.scss
Normale Datei
|
|
@ -0,0 +1,119 @@
|
|||
.badge-wrapper {
|
||||
font-size: $font-down-1;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
|
||||
.badge-category {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
.category-name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.d-icon {
|
||||
margin-right: 3px;
|
||||
width: 0.74em;
|
||||
height: 0.74em;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&.bullet {
|
||||
margin-right: 12px;
|
||||
span.badge-category {
|
||||
color: var(--primary-high);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.extra-info-wrapper & {
|
||||
color: $header-primary;
|
||||
}
|
||||
}
|
||||
.badge-category-parent-bg,
|
||||
.badge-category-bg {
|
||||
flex: 0 0 auto;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
margin-right: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
.badge-category-parent-bg {
|
||||
width: 5px;
|
||||
margin-right: 0;
|
||||
+ .badge-category-bg {
|
||||
width: 5px;
|
||||
}
|
||||
}
|
||||
.d-icon {
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
&.box {
|
||||
margin-right: 5px;
|
||||
padding: 2px 4px 2px 4px;
|
||||
display: inline-flex;
|
||||
span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
&.badge-category-bg,
|
||||
&.badge-category-parent-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.badge-category-parent-bg {
|
||||
width: calc(100% - 5px);
|
||||
& + .badge-category-bg {
|
||||
left: 5px;
|
||||
width: calc(100% - 5px);
|
||||
& + .badge-category {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.badge-category {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
+ .topic-header-extra {
|
||||
padding: 2px 4px 2px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&.bar {
|
||||
margin-right: 5px;
|
||||
|
||||
span.badge-category {
|
||||
color: var(--primary-high);
|
||||
padding: 1px 3px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.extra-info-wrapper & {
|
||||
color: $header-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-category-parent-bg,
|
||||
.badge-category-bg {
|
||||
display: inline-block;
|
||||
padding: 0 1px;
|
||||
|
||||
&:before {
|
||||
content: "\a0";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.none {
|
||||
color: var(--primary-high);
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
86
assets/stylesheets/wizard/custom/base.scss
Normale Datei
86
assets/stylesheets/wizard/custom/base.scss
Normale Datei
|
|
@ -0,0 +1,86 @@
|
|||
input {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
margin-bottom: 9px;
|
||||
font-size: 1em;
|
||||
line-height: 1;
|
||||
color: var(--primary);
|
||||
background-color: var(--secondary);
|
||||
border: 1px solid var(--primary-medium);
|
||||
border-radius: 0;
|
||||
box-sizing: border-box;
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: auto;
|
||||
background-color: var(--secondary);
|
||||
border: 1px solid var(--primary-medium);
|
||||
|
||||
&:focus {
|
||||
border-color: var(--tertiary);
|
||||
box-shadow: shadow("focus");
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
color: var(--primary);
|
||||
caret-color: currentColor;
|
||||
|
||||
&[class*="span"] {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&[readonly] {
|
||||
cursor: not-allowed;
|
||||
background-color: var(--primary-low);
|
||||
border-color: var(--primary-low);
|
||||
}
|
||||
|
||||
&:focus:required:invalid {
|
||||
color: var(--danger);
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
&:focus:required:invalid:focus {
|
||||
border-color: var(--danger);
|
||||
box-shadow: shadow("focus-danger");
|
||||
}
|
||||
}
|
||||
|
||||
.spinner {
|
||||
margin: 20px auto 20px auto;
|
||||
position: relative;
|
||||
-webkit-animation: rotate-forever 1s infinite linear;
|
||||
animation: rotate-forever 1s infinite linear;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border: 4px solid var(--primary-low-mid);
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
|
||||
&.small {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate-forever {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
@import 'wizard_variables';
|
||||
|
||||
.d-editor-container {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
|
|
@ -27,8 +25,8 @@
|
|||
.d-editor .d-editor-modal {
|
||||
min-width: 400px;
|
||||
position: absolute;
|
||||
background-color: $secondary;
|
||||
border: 1px solid $primary;
|
||||
background-color: var(--secondary);
|
||||
border: 1px solid var(--primary);
|
||||
padding: 1em;
|
||||
top: 25px;
|
||||
|
||||
|
|
@ -54,8 +52,8 @@
|
|||
|
||||
.d-editor-textarea-wrapper,
|
||||
.d-editor-preview-wrapper {
|
||||
background-color: $secondary;
|
||||
border: 1px solid #919191;
|
||||
background-color: var(--secondary);
|
||||
border: 1px solid var(--primary-medium);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
|
@ -80,11 +78,11 @@
|
|||
border-bottom: none;
|
||||
min-height: 30px;
|
||||
padding-left: 3px;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.btn:not(.no-text) {
|
||||
|
|
@ -104,7 +102,7 @@
|
|||
width: 1px;
|
||||
height: 20px;
|
||||
margin: 0 5px;
|
||||
background-color: $primary;
|
||||
background-color: var(--primary);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
@ -151,7 +149,7 @@
|
|||
|
||||
.composing-whisper .d-editor-preview {
|
||||
font-style: italic;
|
||||
color: $primary !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.d-editor-preview > *:first-child {
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
@import "wizard_variables";
|
||||
|
||||
// event form
|
||||
|
||||
.event-form {
|
||||
|
|
@ -81,7 +79,7 @@
|
|||
|
||||
&.disabled {
|
||||
span, label, .pika-label, .pika-table th, .pika-button, .pika-prev, .pika-next, input, .pika-lendar, .is-selected .pika-button {
|
||||
color: $primary-low;
|
||||
color: var(--primary-low);
|
||||
background-image: initial;
|
||||
background: initial;
|
||||
box-shadow: initial;
|
||||
|
|
@ -90,7 +88,7 @@
|
|||
}
|
||||
|
||||
input, .pika-lendar {
|
||||
border: 1px solid $primary-low !important;
|
||||
border: 1px solid var(--primary-low) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -129,8 +127,8 @@
|
|||
padding: 4px 10px;
|
||||
font-size: 1em;
|
||||
line-height: 1;
|
||||
color: $primary;
|
||||
border: 1px solid $primary-medium;
|
||||
color: var(--primary);
|
||||
border: 1px solid var(--primary-medium);
|
||||
min-height: 30px;
|
||||
width: 130px;
|
||||
margin: 10px 0;
|
||||
|
|
@ -153,7 +151,7 @@
|
|||
z-index: 100;
|
||||
|
||||
.pika-lendar {
|
||||
border: 1px solid $primary-medium;
|
||||
border: 1px solid var(--primary-medium);
|
||||
padding: 14px;
|
||||
margin: 0;
|
||||
float: none;
|
||||
|
|
@ -192,24 +190,24 @@
|
|||
// Variables are namespaced with the pd (pikaday) prefix
|
||||
|
||||
// Colours
|
||||
$pd-text-color: $primary !default;
|
||||
$pd-title-color: $primary !default;
|
||||
$pd-title-bg: $secondary !default;
|
||||
$pd-picker-bg: $secondary !default;
|
||||
$pd-picker-border: $primary-low !default;
|
||||
$pd-picker-border-bottom: $primary-low !default;
|
||||
$pd-text-color: var(--primary) !default;
|
||||
$pd-title-color: var(--primary) !default;
|
||||
$pd-title-bg: var(--secondary) !default;
|
||||
$pd-picker-bg: var(--secondary) !default;
|
||||
$pd-picker-border: var(--primary-low) !default;
|
||||
$pd-picker-border-bottom: var(--primary-low) !default;
|
||||
$pd-picker-shadow: rgba(0,0,0,.5) !default;
|
||||
$pd-th-color: $primary !default;
|
||||
$pd-day-color: $primary !default;
|
||||
$pd-day-bg: $secondary !default;
|
||||
$pd-day-hover-color: $primary !default;
|
||||
$pd-day-hover-bg: $tertiary-low !default;
|
||||
$pd-day-today-color: $tertiary !default;
|
||||
$pd-day-selected-color: $secondary !default;
|
||||
$pd-day-selected-bg: $tertiary !default;
|
||||
$pd-day-selected-shadow: $tertiary-low !default;
|
||||
$pd-day-disabled-color: $primary !default;
|
||||
$pd-week-color: $primary !default;
|
||||
$pd-th-color: var(--primary) !default;
|
||||
$pd-day-color: var(--primary) !default;
|
||||
$pd-day-bg: var(--secondary) !default;
|
||||
$pd-day-hover-color: var(--primary) !default;
|
||||
$pd-day-hover-bg: var(--tertiary-low) !default;
|
||||
$pd-day-today-color: var(--tertiary) !default;
|
||||
$pd-day-selected-color: var(--secondary) !default;
|
||||
$pd-day-selected-bg: var(--tertiary) !default;
|
||||
$pd-day-selected-shadow: var(--tertiary-low) !default;
|
||||
$pd-day-disabled-color: var(--primary) !default;
|
||||
$pd-week-color: var(--primary) !default;
|
||||
|
||||
// Font
|
||||
$pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
||||
|
|
@ -412,15 +410,15 @@ $pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
|||
}
|
||||
|
||||
.is-startrange .pika-button {
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
background: #6CB31D;
|
||||
box-shadow: none;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.is-endrange .pika-button {
|
||||
color: $secondary;
|
||||
background: $tertiary;
|
||||
color: var(--secondary);
|
||||
background: var(--tertiary);
|
||||
box-shadow: none;
|
||||
border-radius: 3px;
|
||||
}
|
||||
158
assets/stylesheets/wizard/custom/field.scss
Normale Datei
158
assets/stylesheets/wizard/custom/field.scss
Normale Datei
|
|
@ -0,0 +1,158 @@
|
|||
.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 {
|
||||
padding: 3px;
|
||||
border: 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);
|
||||
}
|
||||
}
|
||||
|
||||
&> 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
@import "wizard_variables";
|
||||
|
||||
.location-form-instructions {
|
||||
color: #919191;
|
||||
margin: 5px 0;
|
||||
|
|
@ -48,7 +46,7 @@
|
|||
}
|
||||
|
||||
.address + .coordinates {
|
||||
border-left: 1px solid $primary-low;
|
||||
border-left: 1px solid var(--primary-low);
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -76,7 +74,7 @@
|
|||
|
||||
input.input-location, div.input-location {
|
||||
max-height: 150px;
|
||||
background-color: $secondary;
|
||||
background-color: var(--secondary);
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
|
|
@ -127,11 +125,11 @@ input.input-location, div.input-location {
|
|||
|
||||
.location-form-result {
|
||||
cursor: pointer;
|
||||
background-color: $secondary;
|
||||
background-color: var(--secondary);
|
||||
display: flex;
|
||||
|
||||
&:hover, &.selected {
|
||||
background-color: $tertiary;
|
||||
background-color: var(--tertiary);
|
||||
color: white;
|
||||
|
||||
label {
|
||||
|
|
@ -161,7 +159,7 @@ input.input-location, div.input-location {
|
|||
}
|
||||
|
||||
ul {
|
||||
background-color: dark-light-diff($primary, $secondary, 97%, -65%);
|
||||
background-color: var(--primary-very-low);
|
||||
border: 1px solid #e9e9e9;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
@import 'wizard_variables';
|
||||
|
||||
.custom-wizard {
|
||||
.wizard-step-form {
|
||||
.wizard-btn {
|
||||
|
|
@ -35,8 +33,4 @@
|
|||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
border: 1px solid #919191;
|
||||
}
|
||||
}
|
||||
151
assets/stylesheets/wizard/custom/step.scss
Normale Datei
151
assets/stylesheets/wizard/custom/step.scss
Normale Datei
|
|
@ -0,0 +1,151 @@
|
|||
.custom-wizard {
|
||||
.wizard-step-contents {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-height: initial;
|
||||
height: initial;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.wizard-step-title {
|
||||
flex: 0;
|
||||
|
||||
p {
|
||||
margin: 0 0 0.5em 0;
|
||||
}
|
||||
}
|
||||
|
||||
img.emoji {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.wizard-step-description {
|
||||
flex: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
p {
|
||||
line-height: 1.7;
|
||||
|
||||
img {
|
||||
@extend img.emoji;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
ul li {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
padding: 0 20px;
|
||||
margin: 50px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
text-align: center;
|
||||
max-width: 140px;
|
||||
}
|
||||
|
||||
&.group {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
}
|
||||
}
|
||||
|
||||
img.large {
|
||||
width: 150;
|
||||
padding: 25px;;
|
||||
}
|
||||
|
||||
img.small {
|
||||
width: 100;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
img.x-small {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.inline-list > * {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-step-banner {
|
||||
width: initial;
|
||||
margin-bottom: 1em;
|
||||
|
||||
img {
|
||||
max-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-step-form {
|
||||
flex: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: initial;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wizard-progress {
|
||||
.screen {
|
||||
background-color: var(--tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
.step-message {
|
||||
text-align: center;
|
||||
transition: all .2s;
|
||||
z-index: 2;
|
||||
padding: 20px;
|
||||
|
||||
&.success {
|
||||
background-color: var(--success);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: var(--danger);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
&.not-permitted {
|
||||
background-color: var(--danger);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.text {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.reset-wizard {
|
||||
margin-top: 20px;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
72
assets/stylesheets/wizard/custom/wizard.scss
Normale Datei
72
assets/stylesheets/wizard/custom/wizard.scss
Normale Datei
|
|
@ -0,0 +1,72 @@
|
|||
.custom-wizard {
|
||||
background-color: var(--secondary);
|
||||
color: var(--primary);
|
||||
font-size: 1.1em;
|
||||
|
||||
.wizard-column {
|
||||
background-color: var(--secondary);
|
||||
|
||||
.wizard-field .input-area {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
.wizard-column-contents h1 {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.wizard-footer {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-buttons > a, .wizard-buttons > button, .spinner {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.spinner.small {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.wizard-column .wizard-btn {
|
||||
color: var(--primary);
|
||||
background: var(--primary-low);
|
||||
cursor: pointer;
|
||||
|
||||
&.primary,
|
||||
&.next {
|
||||
color: var(--secondary);
|
||||
background: var(--tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-column .wizard-step-footer button.wizard-btn.done,
|
||||
.wizard-column .wizard-step-footer button.wizard-btn.finish {
|
||||
color: var(--secondary);
|
||||
background-color: var(--success);
|
||||
}
|
||||
|
||||
.wizard-column .action-link {
|
||||
color: var(--tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
.no-access-gutter {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* IE11 hacks */
|
||||
|
||||
@media all and (-ms-high-contrast:none) {
|
||||
.custom-wizard {
|
||||
div.wizard-step-contents {
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.wizard-progress {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,544 +1,13 @@
|
|||
@import 'wizard_variables';
|
||||
@import "common/foundation/colors";
|
||||
@import "common/foundation/variables";
|
||||
@import "custom/base";
|
||||
@import "custom/wizard";
|
||||
@import "custom/step";
|
||||
@import "custom/field";
|
||||
@import "custom/mobile";
|
||||
@import "custom/autocomplete";
|
||||
@import "custom/composer";
|
||||
@import "custom/events";
|
||||
@import "custom/locations";
|
||||
|
||||
.no-access-gutter {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.custom-wizard {
|
||||
background-color: initial;
|
||||
font-size: 1.1em;
|
||||
|
||||
.wizard-step-contents {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-height: initial;
|
||||
height: initial;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
img.emoji {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.wizard-step-title {
|
||||
flex: 0;
|
||||
|
||||
p {
|
||||
margin: 0 0 0.5em 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-step-description {
|
||||
flex: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
p {
|
||||
line-height: 1.7;
|
||||
|
||||
img {
|
||||
@extend img.emoji;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
ul li {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
padding: 0 20px;
|
||||
margin: 50px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
text-align: center;
|
||||
max-width: 140px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&.group {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
}
|
||||
}
|
||||
|
||||
img.large {
|
||||
width: 150;
|
||||
padding: 25px;;
|
||||
}
|
||||
|
||||
img.small {
|
||||
width: 100;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
img.x-small {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.inline-list > * {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-step-banner {
|
||||
width: initial;
|
||||
margin-bottom: 1em;
|
||||
|
||||
img {
|
||||
max-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-step-form {
|
||||
flex: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: initial;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.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: #333;
|
||||
margin-top: 0;
|
||||
|
||||
p {
|
||||
margin: 0.3em 0;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&> .input-area {
|
||||
order: 0;
|
||||
margin: 15px 20px !important;
|
||||
|
||||
input {
|
||||
cursor: pointer;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
}
|
||||
|
||||
&> 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;
|
||||
border: 1px solid #ccc;
|
||||
transition: border-color 0.5s;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.controls {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 200px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
input[disabled] {
|
||||
background-color: #e9e9e9;
|
||||
border: #e9e9e9;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.select-kit {
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-column {
|
||||
.wizard-field .input-area {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
.wizard-column-contents h1 {
|
||||
margin: 0
|
||||
}
|
||||
}
|
||||
|
||||
.combo-box {
|
||||
ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-buttons > a, .wizard-buttons > button, .spinner {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.spinner.small {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
input.date-picker {
|
||||
font-size: 1.1487em;
|
||||
padding: 6px;
|
||||
border: 1px solid $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;
|
||||
}
|
||||
|
||||
.step-message {
|
||||
text-align: center;
|
||||
transition: all .2s;
|
||||
z-index: 2;
|
||||
padding: 20px;
|
||||
|
||||
&.success {
|
||||
background-color: #009900;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: #e45735;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&.not-permitted {
|
||||
background-color: #e45735;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.reset-wizard {
|
||||
margin-top: 20px;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner {
|
||||
margin: 20px auto 20px auto;
|
||||
position: relative;
|
||||
-webkit-animation: rotate-forever 1s infinite linear;
|
||||
animation: rotate-forever 1s infinite linear;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border: 4px solid #ccc;
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
|
||||
&.small {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-field {
|
||||
&.invalid{
|
||||
textarea, input[type=text], input[type=checkbox], .select-kit {
|
||||
padding: 3px;
|
||||
border: 4px solid red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate-forever {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* IE11 hacks */
|
||||
|
||||
@media all and (-ms-high-contrast:none)
|
||||
{
|
||||
.custom-wizard {
|
||||
div.wizard-step-contents {
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.wizard-progress {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Badges
|
||||
|
||||
@import 'wizard_variables';
|
||||
|
||||
.badge-wrapper {
|
||||
font-size: $font-down-1;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
|
||||
.badge-category {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
.category-name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.d-icon {
|
||||
margin-right: 3px;
|
||||
width: 0.74em;
|
||||
height: 0.74em;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&.bullet {
|
||||
margin-right: 12px;
|
||||
span.badge-category {
|
||||
color: $primary-high;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.extra-info-wrapper & {
|
||||
color: $header-primary;
|
||||
}
|
||||
}
|
||||
.badge-category-parent-bg,
|
||||
.badge-category-bg {
|
||||
flex: 0 0 auto;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
margin-right: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
.badge-category-parent-bg {
|
||||
width: 5px;
|
||||
margin-right: 0;
|
||||
+ .badge-category-bg {
|
||||
width: 5px;
|
||||
}
|
||||
}
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
}
|
||||
}
|
||||
|
||||
&.box {
|
||||
margin-right: 5px;
|
||||
padding: 2px 4px 2px 4px;
|
||||
display: inline-flex;
|
||||
span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
&.badge-category-bg,
|
||||
&.badge-category-parent-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.badge-category-parent-bg {
|
||||
width: calc(100% - 5px);
|
||||
& + .badge-category-bg {
|
||||
left: 5px;
|
||||
width: calc(100% - 5px);
|
||||
& + .badge-category {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.badge-category {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
+ .topic-header-extra {
|
||||
padding: 2px 4px 2px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&.bar {
|
||||
margin-right: 5px;
|
||||
|
||||
span.badge-category {
|
||||
color: $primary-high;
|
||||
padding: 1px 3px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.extra-info-wrapper & {
|
||||
color: $header-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-category-parent-bg,
|
||||
.badge-category-bg {
|
||||
display: inline-block;
|
||||
padding: 0 1px;
|
||||
|
||||
&:before {
|
||||
content: "\a0";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.none {
|
||||
color: $primary-high;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,286 +0,0 @@
|
|||
$primary: #222222 !default;
|
||||
$secondary: #ffffff !default;
|
||||
$tertiary: #0088cc !default;
|
||||
$quaternary: #e45735 !default;
|
||||
$header_background: #ffffff !default;
|
||||
$header_primary: #333333 !default;
|
||||
$highlight: #ffff4d !default;
|
||||
$danger: #e45735 !default;
|
||||
$success: #009900 !default;
|
||||
$love: #fa6c8d !default;
|
||||
|
||||
// --------------------------------------------------
|
||||
// Variables from Discourse
|
||||
// --------------------------------------------------
|
||||
|
||||
// Layout dimensions
|
||||
// --------------------------------------------------
|
||||
|
||||
$small-width: 800px !default;
|
||||
$medium-width: 995px !default;
|
||||
$large-width: 1110px !default;
|
||||
|
||||
$input-padding: 4px 10px;
|
||||
$topic-body-width: 690px;
|
||||
$topic-body-width-padding: 11px;
|
||||
$topic-avatar-width: 45px;
|
||||
|
||||
// Brand color variables
|
||||
// --------------------------------------------------
|
||||
|
||||
$google: #ffffff !default;
|
||||
$instagram: #e1306c !default;
|
||||
$facebook: #4267b2 !default;
|
||||
$cas: #70ba61 !default;
|
||||
$twitter: #1da1f2 !default;
|
||||
$github: #100e0f !default;
|
||||
|
||||
// Badge color variables
|
||||
// --------------------------------------------------
|
||||
|
||||
$gold: rgb(231, 195, 0) !default;
|
||||
$silver: #c0c0c0 !default;
|
||||
$bronze: #cd7f32 !default;
|
||||
|
||||
// Fonts
|
||||
// --------------------------------------------------
|
||||
|
||||
$base-font-size-smaller: 14px !default;
|
||||
$base-font-size: 15px !default;
|
||||
$base-font-size-larger: 17px !default;
|
||||
$base-font-size-largest: 19px !default;
|
||||
$base-font-family: Helvetica, Arial, sans-serif !default;
|
||||
|
||||
// Font-size defintions, multiplier ^ (step / interval)
|
||||
$font-up-6: 2.296em;
|
||||
$font-up-5: 2em;
|
||||
$font-up-4: 1.7511em;
|
||||
$font-up-3: 1.5157em;
|
||||
$font-up-2: 1.3195em;
|
||||
$font-up-1: 1.1487em; // 2^(1/5)
|
||||
$font-0: 1em;
|
||||
$font-down-1: 0.8706em; // 2^(-1/5)
|
||||
$font-down-2: 0.7579em; // Smallest size we use based on the 1em base
|
||||
$font-down-3: 0.6599em;
|
||||
$font-down-4: 0.5745em;
|
||||
$font-down-5: 0.5em;
|
||||
$font-down-6: 0.4355em;
|
||||
|
||||
// inputs/textareas in iOS need to be at least 16px to avoid triggering zoom on focus
|
||||
// with base at 15px, the below gives 16.05px
|
||||
$font-size-ios-input: 1.07em;
|
||||
|
||||
// Common line-heights
|
||||
$line-height-small: 1;
|
||||
$line-height-medium: 1.2; // Headings or large text
|
||||
$line-height-large: 1.4; // Normal or small text
|
||||
|
||||
// Z-index
|
||||
// --------------------------------------------------
|
||||
|
||||
$z-layers: (
|
||||
"max": 9999,
|
||||
"modal": (
|
||||
"tooltip": 1600,
|
||||
"popover": 1500,
|
||||
"dropdown": 1400,
|
||||
"content": 1300,
|
||||
"overlay": 1200
|
||||
),
|
||||
"fullscreen": 1150,
|
||||
"mobile-composer": 1100,
|
||||
"ipad-header-nav": 1020,
|
||||
"header": 1000,
|
||||
"footer-nav": 900,
|
||||
"tooltip": 600,
|
||||
"composer": (
|
||||
"dropdown": 700,
|
||||
"tooltip": 600,
|
||||
"popover": 500,
|
||||
"content": 400
|
||||
),
|
||||
"dropdown": 300,
|
||||
"usercard": 200,
|
||||
"timeline": 100,
|
||||
"base": 1
|
||||
);
|
||||
|
||||
@function map-has-nested-keys($map, $keys...) {
|
||||
@each $key in $keys {
|
||||
@if not map-has-key($map, $key) {
|
||||
@return false;
|
||||
}
|
||||
$map: map-get($map, $key);
|
||||
}
|
||||
@return true;
|
||||
}
|
||||
|
||||
@function map-deep-get($map, $keys...) {
|
||||
@each $key in $keys {
|
||||
$map: map-get($map, $key);
|
||||
}
|
||||
@return $map;
|
||||
}
|
||||
|
||||
@function z($layers...) {
|
||||
@if not map-has-nested-keys($z-layers, $layers...) {
|
||||
@warn "No layer defined for `#{inspect($layers...)}` in $z-layers map. Check variables.scss, property omitted.";
|
||||
}
|
||||
@return map-deep-get($z-layers, $layers...);
|
||||
}
|
||||
|
||||
// Box-shadow
|
||||
// --------------------------------------------------
|
||||
|
||||
$box-shadow: (
|
||||
"modal": 0 8px 60px rgba(0, 0, 0, 0.6),
|
||||
"composer": 0 -1px 40px rgba(0, 0, 0, 0.12),
|
||||
"menu-panel": 0 12px 12px rgba(0, 0, 0, 0.15),
|
||||
"card": 0 4px 14px rgba(0, 0, 0, 0.15),
|
||||
"dropdown": 0 2px 3px 0 rgba(0, 0, 0, 0.2),
|
||||
"header": 0 2px 4px -1px rgba(0, 0, 0, 0.25),
|
||||
"footer-nav": 0 0 2px 0 rgba(0, 0, 0, 0.25),
|
||||
"kbd": (
|
||||
0 2px 0 rgba(0, 0, 0, 0.2),
|
||||
0 0 0 1px dark-light-choose(#fff, #000) inset
|
||||
),
|
||||
"focus": 0 0 6px 0 $tertiary,
|
||||
"focus-danger": 0 0 6px 0 $danger
|
||||
);
|
||||
|
||||
@function shadow($key) {
|
||||
@return map-get($box-shadow, $key);
|
||||
}
|
||||
|
||||
// Color utilities
|
||||
// --------------------------------------------------
|
||||
|
||||
// w3c definition of color brightness https://www.w3.org/TR/AERT#color-contrast
|
||||
@function dc-color-brightness($color) {
|
||||
@return (
|
||||
(red($color) * 0.299) + (green($color) * 0.587) + (blue($color) * 0.114)
|
||||
);
|
||||
}
|
||||
|
||||
// Uses an approximation of sRGB blending, GAMMA=2 instead of GAMMA=2.2
|
||||
@function srgb-scale($foreground, $background, $percent) {
|
||||
$ratio: ($percent / 100%);
|
||||
$iratio: 1 - $ratio;
|
||||
$f_r2: red($foreground) * red($foreground);
|
||||
$f_g2: green($foreground) * green($foreground);
|
||||
$f_b2: blue($foreground) * blue($foreground);
|
||||
$b_r2: red($background) * red($background);
|
||||
$b_g2: green($background) * green($background);
|
||||
$b_b2: blue($background) * blue($background);
|
||||
$r_r2: $f_r2 * $ratio + $b_r2 * $iratio;
|
||||
$r_g2: $f_g2 * $ratio + $b_g2 * $iratio;
|
||||
$r_b2: $f_b2 * $ratio + $b_b2 * $iratio;
|
||||
$r_r: sqrt($r_r2);
|
||||
$r_g: sqrt($r_g2);
|
||||
$r_b: sqrt($r_b2);
|
||||
@return rgb($r_r, $r_g, $r_b);
|
||||
}
|
||||
|
||||
// Replaces dark-light-diff($primary, $secondary, 50%, -50%)
|
||||
@function blend-primary-secondary($percent) {
|
||||
@return srgb-scale($primary, $secondary, $percent);
|
||||
}
|
||||
|
||||
@function dark-light-diff(
|
||||
$adjusted-color,
|
||||
$comparison-color,
|
||||
$lightness,
|
||||
$darkness
|
||||
) {
|
||||
@if dc-color-brightness($adjusted-color) <
|
||||
dc-color-brightness($comparison-color)
|
||||
{
|
||||
@return scale-color($adjusted-color, $lightness: $lightness);
|
||||
} @else {
|
||||
@return scale-color($adjusted-color, $lightness: $darkness);
|
||||
}
|
||||
}
|
||||
@function dark-light-choose($light-theme-result, $dark-theme-result) {
|
||||
@if dc-color-brightness($primary) < dc-color-brightness($secondary) {
|
||||
@return $light-theme-result;
|
||||
} @else {
|
||||
@return $dark-theme-result;
|
||||
}
|
||||
}
|
||||
|
||||
// standard color transformations, use these if possible, and add any new dark-light-diffs here
|
||||
|
||||
//primary
|
||||
$primary-very-low: dark-light-diff($primary, $secondary, 97%, -82%);
|
||||
$primary-low: dark-light-diff($primary, $secondary, 90%, -78%);
|
||||
$primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%);
|
||||
$primary-medium: dark-light-diff($primary, $secondary, 50%, -35%);
|
||||
$primary-high: dark-light-diff($primary, $secondary, 30%, -25%);
|
||||
$primary-very-high: dark-light-diff($primary, $secondary, 15%, -10%);
|
||||
|
||||
//header_primary
|
||||
$header_primary-low: dark-light-diff(
|
||||
$header_primary,
|
||||
$header_background,
|
||||
90%,
|
||||
-78%
|
||||
);
|
||||
$header_primary-low-mid: dark-light-diff(
|
||||
$header_primary,
|
||||
$header_background,
|
||||
70%,
|
||||
-45%
|
||||
);
|
||||
|
||||
$header_primary-medium: dark-light-diff(
|
||||
$header_primary,
|
||||
$header_background,
|
||||
50%,
|
||||
-35%
|
||||
);
|
||||
$header_primary-high: dark-light-diff(
|
||||
$header_primary,
|
||||
$header_background,
|
||||
30%,
|
||||
-25%
|
||||
);
|
||||
$header_primary-very-high: dark-light-diff(
|
||||
$header_primary,
|
||||
$header_background,
|
||||
15%,
|
||||
-10%
|
||||
);
|
||||
|
||||
//secondary
|
||||
$secondary-low: dark-light-diff($secondary, $primary, 70%, -70%);
|
||||
$secondary-medium: dark-light-diff($secondary, $primary, 50%, -50%);
|
||||
$secondary-high: dark-light-diff($secondary, $primary, 30%, -35%);
|
||||
$secondary-very-high: dark-light-diff($secondary, $primary, 7%, -7%);
|
||||
|
||||
//tertiary
|
||||
$tertiary-low: dark-light-diff($tertiary, $secondary, 85%, -65%);
|
||||
$tertiary-medium: dark-light-diff($tertiary, $secondary, 50%, -45%);
|
||||
$tertiary-high: dark-light-diff($tertiary, $secondary, 20%, -25%);
|
||||
|
||||
//quaternary
|
||||
$quaternary-low: dark-light-diff($quaternary, $secondary, 70%, -70%);
|
||||
|
||||
//highlight
|
||||
$highlight-low: dark-light-diff($highlight, $secondary, 70%, -80%);
|
||||
$highlight-medium: dark-light-diff($highlight, $secondary, 50%, -55%);
|
||||
$highlight-high: dark-light-diff($highlight, $secondary, -50%, -10%);
|
||||
|
||||
//danger
|
||||
$danger-low: dark-light-diff($danger, $secondary, 85%, -64%);
|
||||
$danger-medium: dark-light-diff($danger, $secondary, 30%, -35%);
|
||||
|
||||
//success
|
||||
$success-low: dark-light-diff($success, $secondary, 80%, -60%);
|
||||
$success-medium: dark-light-diff($success, $secondary, 50%, -40%);
|
||||
|
||||
//love
|
||||
$love-low: dark-light-diff($love, $secondary, 85%, -60%);
|
||||
|
||||
//wiki
|
||||
$wiki: green;
|
||||
|
||||
|
|
@ -364,4 +364,12 @@ class CustomWizard::Wizard
|
|||
false
|
||||
end
|
||||
end
|
||||
|
||||
def self.register_styles
|
||||
full_path = "#{Rails.root}/plugins/discourse-custom-wizard/assets/stylesheets/wizard/wizard_custom.scss"
|
||||
DiscoursePluginRegistry.register_asset(full_path, {}, "wizard_custom")
|
||||
Stylesheet::Importer.register_import("wizard_custom") do
|
||||
import_files(DiscoursePluginRegistry.stylesheets["wizard_custom"])
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -164,5 +164,7 @@ after_initialize do
|
|||
::Wizard::Field.prepend CustomWizardFieldExtension
|
||||
::Wizard::Step.prepend CustomWizardStepExtension
|
||||
|
||||
CustomWizard::Wizard.register_styles
|
||||
|
||||
DiscourseEvent.trigger(:custom_wizard_ready)
|
||||
end
|
||||
|
|
|
|||
|
|
@ -1,13 +1,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<%= discourse_stylesheet_link_tag :wizard, theme_id: nil %>
|
||||
<%= stylesheet_link_tag "wizard_autocomplete" %>
|
||||
<%= stylesheet_link_tag "wizard_custom" %>
|
||||
<%= stylesheet_link_tag "wizard_composer" %>
|
||||
<%= stylesheet_link_tag "wizard_variables" %>
|
||||
<%= stylesheet_link_tag "wizard_custom_mobile" %>
|
||||
<%= stylesheet_link_tag "wizard_locations"%>
|
||||
<%= stylesheet_link_tag "wizard_events"%>
|
||||
<%= discourse_stylesheet_link_tag :wizard_custom %>
|
||||
<%- if theme_ids.present? %>
|
||||
<%= discourse_stylesheet_link_tag (mobile_view? ? :mobile_theme : :desktop_theme) %>
|
||||
<%- end %>
|
||||
|
|
|
|||
Laden …
In neuem Issue referenzieren