Spiegel von
https://github.com/paviliondev/discourse-custom-wizard.git
synchronisiert 2024-11-22 01:10:28 +01:00
Clean up: variable usage and style registration
Dieser Commit ist enthalten in:
Ursprung
18f0356d15
Commit
5588180dcd
13 geänderte Dateien mit 92 neuen und 81 gelöschten Zeilen
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -2,8 +2,8 @@ div.ac-wrap {
|
|||
overflow: visible;
|
||||
max-height: 150px;
|
||||
min-height: 34px;
|
||||
background-color: $secondary;
|
||||
border: 1px solid $primary-medium;
|
||||
background-color: var(--secondary);
|
||||
border: 1px solid var(--primary-medium);
|
||||
padding: 5px 4px 1px 4px;
|
||||
|
||||
div.item {
|
||||
|
@ -88,13 +88,16 @@ img.avatar {
|
|||
|
||||
span.username {
|
||||
color: var(--primary);
|
||||
vertical-align: middle;
|
||||
}
|
||||
span.name {
|
||||
font-size: $font-down-1;
|
||||
vertical-align: middle;
|
||||
margin-left: 5px;
|
||||
color: var(--primary);
|
||||
}
|
||||
&.selected {
|
||||
background-color: var(--tertiary-low);
|
||||
background-color: var(--tertiary);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--highlight-low);
|
||||
|
@ -145,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 {
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
&.bullet {
|
||||
margin-right: 12px;
|
||||
span.badge-category {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.extra-info-wrapper & {
|
||||
|
@ -47,7 +47,7 @@
|
|||
}
|
||||
}
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -91,7 +91,7 @@
|
|||
margin-right: 5px;
|
||||
|
||||
span.badge-category {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
padding: 1px 3px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
@ -113,7 +113,7 @@
|
|||
}
|
||||
|
||||
&.none {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
|
@ -25,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;
|
||||
|
||||
|
@ -52,8 +52,8 @@
|
|||
|
||||
.d-editor-textarea-wrapper,
|
||||
.d-editor-preview-wrapper {
|
||||
background-color: $secondary;
|
||||
border: 1px solid $primary-low;
|
||||
background-color: var(--secondary);
|
||||
border: 1px solid var(--primary-medium);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
@ -82,7 +82,7 @@
|
|||
|
||||
button {
|
||||
background-color: transparent;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.btn:not(.no-text) {
|
||||
|
@ -102,7 +102,7 @@
|
|||
width: 1px;
|
||||
height: 20px;
|
||||
margin: 0 5px;
|
||||
background-color: $primary;
|
||||
background-color: var(--primary);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
@ -149,7 +149,7 @@
|
|||
|
||||
.composing-whisper .d-editor-preview {
|
||||
font-style: italic;
|
||||
color: $primary !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.d-editor-preview > *:first-child {
|
||||
|
|
|
@ -79,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;
|
||||
|
@ -88,7 +88,7 @@
|
|||
}
|
||||
|
||||
input, .pika-lendar {
|
||||
border: 1px solid $primary-low !important;
|
||||
border: 1px solid var(--primary-low) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -127,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;
|
||||
|
@ -151,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;
|
||||
|
@ -190,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;
|
||||
|
@ -410,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;
|
||||
}
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
.field-description {
|
||||
flex: 1;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
margin-top: 0;
|
||||
|
||||
p {
|
||||
|
@ -35,7 +35,7 @@
|
|||
&.invalid {
|
||||
textarea, input[type=text], input[type=checkbox], .select-kit {
|
||||
padding: 3px;
|
||||
border: 4px solid $danger;
|
||||
border: 4px solid var(--danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -75,12 +75,6 @@
|
|||
.wizard-step-form .wizard-btn {
|
||||
display: block;
|
||||
margin: 20px 0;
|
||||
color: var(--primary);
|
||||
background: var(--primary-low);
|
||||
|
||||
&.primary {
|
||||
background: $tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-image-row {
|
||||
|
@ -130,7 +124,7 @@
|
|||
input.date-picker {
|
||||
font-size: 1.1487em;
|
||||
padding: 6px;
|
||||
border: 1px solid $primary;
|
||||
border: 1px solid var(--primary);
|
||||
transition: border-color 0.5s;
|
||||
}
|
||||
|
||||
|
|
|
@ -46,7 +46,7 @@
|
|||
}
|
||||
|
||||
.address + .coordinates {
|
||||
border-left: 1px solid $primary-low;
|
||||
border-left: 1px solid var(--primary-low);
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
|
@ -74,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;
|
||||
|
@ -125,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 {
|
||||
|
@ -159,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;
|
||||
|
|
|
@ -113,7 +113,7 @@
|
|||
|
||||
.wizard-progress {
|
||||
.screen {
|
||||
background-color: $tertiary;
|
||||
background-color: var(--tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -124,18 +124,18 @@
|
|||
padding: 20px;
|
||||
|
||||
&.success {
|
||||
background-color: $success;
|
||||
color: $secondary;
|
||||
background-color: var(--success);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: $danger;
|
||||
color: $secondary;
|
||||
background-color: var(--danger);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
&.not-permitted {
|
||||
background-color: $danger;
|
||||
color: $secondary;
|
||||
background-color: var(--danger);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.text {
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
.custom-wizard {
|
||||
background-color: $secondary;
|
||||
color: $primary;
|
||||
background-color: var(--secondary);
|
||||
color: var(--primary);
|
||||
font-size: 1.1em;
|
||||
|
||||
.wizard-column {
|
||||
background-color: $secondary;
|
||||
background-color: var(--secondary);
|
||||
|
||||
.wizard-field .input-area {
|
||||
margin: 0.5em 0;
|
||||
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
.wizard-footer {
|
||||
background-color: $secondary;
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -28,14 +28,26 @@
|
|||
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: $primary;
|
||||
background-color: $success;
|
||||
color: var(--secondary);
|
||||
background-color: var(--success);
|
||||
}
|
||||
|
||||
.wizard-column .action-link {
|
||||
color: $tertiary;
|
||||
color: var(--tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
10
plugin.rb
10
plugin.rb
|
@ -88,14 +88,6 @@ after_initialize do
|
|||
load File.expand_path(path, __FILE__)
|
||||
end
|
||||
|
||||
reloadable_patch do
|
||||
full_path = File.dirname(@path) << "/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
|
||||
|
||||
add_class_method(:wizard, :user_requires_completion?) do |user|
|
||||
wizard_result = self.new(user).requires_completion?
|
||||
return wizard_result if wizard_result
|
||||
|
@ -172,5 +164,7 @@ after_initialize do
|
|||
::Wizard::Field.prepend CustomWizardFieldExtension
|
||||
::Wizard::Step.prepend CustomWizardStepExtension
|
||||
|
||||
CustomWizard::Wizard.register_styles
|
||||
|
||||
DiscourseEvent.trigger(:custom_wizard_ready)
|
||||
end
|
||||
|
|
Laden …
In neuem Issue referenzieren