From 18f0356d158c847b1e8ae4ab50d61958c60fda6e Mon Sep 17 00:00:00 2001 From: Angus McLeod Date: Wed, 19 Aug 2020 13:14:28 +1000 Subject: [PATCH] Integrate custom wizard css into discourse asset pipeline --- .../components/wizard-field-composer.hbs | 2 +- .../autocomplete.scss} | 48 +- assets/stylesheets/wizard/custom/badges.scss | 119 ++++ assets/stylesheets/wizard/custom/base.scss | 86 +++ .../composer.scss} | 6 +- .../events.scss} | 2 - assets/stylesheets/wizard/custom/field.scss | 164 ++++++ .../locations.scss} | 2 - .../mobile.scss} | 6 - assets/stylesheets/wizard/custom/step.scss | 151 +++++ assets/stylesheets/wizard/custom/wizard.scss | 60 ++ assets/stylesheets/wizard/wizard_custom.scss | 553 +----------------- .../stylesheets/wizard/wizard_variables.scss | 286 --------- plugin.rb | 8 + views/layouts/wizard.html.erb | 8 +- 15 files changed, 623 insertions(+), 878 deletions(-) rename assets/stylesheets/wizard/{wizard_autocomplete.scss => custom/autocomplete.scss} (75%) create mode 100644 assets/stylesheets/wizard/custom/badges.scss create mode 100644 assets/stylesheets/wizard/custom/base.scss rename assets/stylesheets/wizard/{wizard_composer.scss => custom/composer.scss} (96%) rename assets/stylesheets/wizard/{wizard_events.scss => custom/events.scss} (99%) create mode 100644 assets/stylesheets/wizard/custom/field.scss rename assets/stylesheets/wizard/{wizard_locations.scss => custom/locations.scss} (98%) rename assets/stylesheets/wizard/{wizard_custom_mobile.scss => custom/mobile.scss} (85%) create mode 100644 assets/stylesheets/wizard/custom/step.scss create mode 100644 assets/stylesheets/wizard/custom/wizard.scss delete mode 100644 assets/stylesheets/wizard/wizard_variables.scss diff --git a/assets/javascripts/wizard/templates/components/wizard-field-composer.hbs b/assets/javascripts/wizard/templates/components/wizard-field-composer.hbs index fdbbde84..e5ffd904 100644 --- a/assets/javascripts/wizard/templates/components/wizard-field-composer.hbs +++ b/assets/javascripts/wizard/templates/components/wizard-field-composer.hbs @@ -6,6 +6,6 @@ togglePreview=(action "togglePreview") afterRefresh=(action "afterRefresh")}} - \ No newline at end of file diff --git a/assets/stylesheets/wizard/wizard_autocomplete.scss b/assets/stylesheets/wizard/custom/autocomplete.scss similarity index 75% rename from assets/stylesheets/wizard/wizard_autocomplete.scss rename to assets/stylesheets/wizard/custom/autocomplete.scss index 89ea610c..9cb7b913 100644 --- a/assets/stylesheets/wizard/wizard_autocomplete.scss +++ b/assets/stylesheets/wizard/custom/autocomplete.scss @@ -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: $secondary; + border: 1px solid $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; @@ -88,23 +85,19 @@ img.avatar { img { margin-right: 5px; } - + span.username { - color: #000; - vertical-align: middle; + color: var(--primary); } - span.name { - font-size: 11px; + font-size: $font-down-1; vertical-align: middle; } - &.selected { - background-color: #d1f0ff; + background-color: var(--tertiary-low); } - &:hover { - background-color: #ffffa6; + background-color: var(--highlight-low); text-decoration: none; } } @@ -138,7 +131,6 @@ img.avatar { } ul > label { - color: #919191; margin: 5px 0; padding: 0 5px; font-size: 80%; diff --git a/assets/stylesheets/wizard/custom/badges.scss b/assets/stylesheets/wizard/custom/badges.scss new file mode 100644 index 00000000..438f58d9 --- /dev/null +++ b/assets/stylesheets/wizard/custom/badges.scss @@ -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: $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; + } +} \ No newline at end of file diff --git a/assets/stylesheets/wizard/custom/base.scss b/assets/stylesheets/wizard/custom/base.scss new file mode 100644 index 00000000..2b7cb853 --- /dev/null +++ b/assets/stylesheets/wizard/custom/base.scss @@ -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); + } +} + diff --git a/assets/stylesheets/wizard/wizard_composer.scss b/assets/stylesheets/wizard/custom/composer.scss similarity index 96% rename from assets/stylesheets/wizard/wizard_composer.scss rename to assets/stylesheets/wizard/custom/composer.scss index 9cd674f8..6575d886 100644 --- a/assets/stylesheets/wizard/wizard_composer.scss +++ b/assets/stylesheets/wizard/custom/composer.scss @@ -1,5 +1,3 @@ -@import 'wizard_variables'; - .d-editor-container { display: flex; flex-grow: 1; @@ -55,7 +53,7 @@ .d-editor-textarea-wrapper, .d-editor-preview-wrapper { background-color: $secondary; - border: 1px solid #919191; + border: 1px solid $primary-low; flex: 1; } @@ -80,7 +78,7 @@ 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; diff --git a/assets/stylesheets/wizard/wizard_events.scss b/assets/stylesheets/wizard/custom/events.scss similarity index 99% rename from assets/stylesheets/wizard/wizard_events.scss rename to assets/stylesheets/wizard/custom/events.scss index 61380deb..88f7dd97 100644 --- a/assets/stylesheets/wizard/wizard_events.scss +++ b/assets/stylesheets/wizard/custom/events.scss @@ -1,5 +1,3 @@ -@import "wizard_variables"; - // event form .event-form { diff --git a/assets/stylesheets/wizard/custom/field.scss b/assets/stylesheets/wizard/custom/field.scss new file mode 100644 index 00000000..4a78da3b --- /dev/null +++ b/assets/stylesheets/wizard/custom/field.scss @@ -0,0 +1,164 @@ +.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: $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 $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; + color: var(--primary); + background: var(--primary-low); + + &.primary { + background: $tertiary; + } + } + + .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 $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; + } +} \ No newline at end of file diff --git a/assets/stylesheets/wizard/wizard_locations.scss b/assets/stylesheets/wizard/custom/locations.scss similarity index 98% rename from assets/stylesheets/wizard/wizard_locations.scss rename to assets/stylesheets/wizard/custom/locations.scss index 5f61f1e9..d3952ae5 100644 --- a/assets/stylesheets/wizard/wizard_locations.scss +++ b/assets/stylesheets/wizard/custom/locations.scss @@ -1,5 +1,3 @@ -@import "wizard_variables"; - .location-form-instructions { color: #919191; margin: 5px 0; diff --git a/assets/stylesheets/wizard/wizard_custom_mobile.scss b/assets/stylesheets/wizard/custom/mobile.scss similarity index 85% rename from assets/stylesheets/wizard/wizard_custom_mobile.scss rename to assets/stylesheets/wizard/custom/mobile.scss index b92aed2b..50435f7e 100644 --- a/assets/stylesheets/wizard/wizard_custom_mobile.scss +++ b/assets/stylesheets/wizard/custom/mobile.scss @@ -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; - } } diff --git a/assets/stylesheets/wizard/custom/step.scss b/assets/stylesheets/wizard/custom/step.scss new file mode 100644 index 00000000..e20e5b5e --- /dev/null +++ b/assets/stylesheets/wizard/custom/step.scss @@ -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: $tertiary; + } + } + + .step-message { + text-align: center; + transition: all .2s; + z-index: 2; + padding: 20px; + + &.success { + background-color: $success; + color: $secondary; + } + + &.error { + background-color: $danger; + color: $secondary; + } + + &.not-permitted { + background-color: $danger; + color: $secondary; + } + + .text { + display: inline-block; + } + + .reset-wizard { + margin-top: 20px; + text-decoration: underline; + cursor: pointer; + } + } +} \ No newline at end of file diff --git a/assets/stylesheets/wizard/custom/wizard.scss b/assets/stylesheets/wizard/custom/wizard.scss new file mode 100644 index 00000000..c9a8f7c6 --- /dev/null +++ b/assets/stylesheets/wizard/custom/wizard.scss @@ -0,0 +1,60 @@ +.custom-wizard { + background-color: $secondary; + color: $primary; + font-size: 1.1em; + + .wizard-column { + background-color: $secondary; + + .wizard-field .input-area { + margin: 0.5em 0; + } + + .wizard-column-contents h1 { + margin: 0 + } + + .wizard-footer { + background-color: $secondary; + } + } + + .wizard-buttons > a, .wizard-buttons > button, .spinner { + display: inline-block; + vertical-align: middle; + } + + .spinner.small { + margin-right: 10px; + } + + .wizard-column .wizard-step-footer button.wizard-btn.done, + .wizard-column .wizard-step-footer button.wizard-btn.finish { + color: $primary; + background-color: $success; + } + + .wizard-column .action-link { + color: $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; + } + } +} \ No newline at end of file diff --git a/assets/stylesheets/wizard/wizard_custom.scss b/assets/stylesheets/wizard/wizard_custom.scss index 924292a5..366981bc 100644 --- a/assets/stylesheets/wizard/wizard_custom.scss +++ b/assets/stylesheets/wizard/wizard_custom.scss @@ -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; -} diff --git a/assets/stylesheets/wizard/wizard_variables.scss b/assets/stylesheets/wizard/wizard_variables.scss deleted file mode 100644 index 045d8ef0..00000000 --- a/assets/stylesheets/wizard/wizard_variables.scss +++ /dev/null @@ -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; - diff --git a/plugin.rb b/plugin.rb index 6e26bcee..d09c6b0e 100644 --- a/plugin.rb +++ b/plugin.rb @@ -88,6 +88,14 @@ 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 diff --git a/views/layouts/wizard.html.erb b/views/layouts/wizard.html.erb index 0deb4c71..15a902b9 100644 --- a/views/layouts/wizard.html.erb +++ b/views/layouts/wizard.html.erb @@ -1,13 +1,7 @@ <%= 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 %>