From 2788e8026ede53d6df17f62ce1877c2ba6894735 Mon Sep 17 00:00:00 2001 From: Faizaan Gagan Date: Mon, 12 Apr 2021 12:05:15 +0530 Subject: [PATCH] ran prettier on stylesheets and global wizard javascripts (#95) --- assets/javascripts/wizard-custom-globals.js | 2 +- assets/javascripts/wizard-custom-guest.js | 4 +- assets/javascripts/wizard-custom-start.js | 4 +- assets/stylesheets/common/wizard-admin.scss | 188 ++++---- assets/stylesheets/common/wizard-api.scss | 18 +- assets/stylesheets/common/wizard-manager.scss | 16 +- assets/stylesheets/common/wizard-mapper.scss | 68 +-- .../wizard/custom/autocomplete.scss | 14 +- assets/stylesheets/wizard/custom/badges.scss | 24 +- assets/stylesheets/wizard/custom/base.scss | 2 +- .../stylesheets/wizard/custom/composer.scss | 15 +- assets/stylesheets/wizard/custom/events.scss | 420 +++++++++--------- assets/stylesheets/wizard/custom/field.scss | 25 +- .../stylesheets/wizard/custom/locations.scss | 13 +- assets/stylesheets/wizard/custom/step.scss | 14 +- .../stylesheets/wizard/custom/validators.scss | 12 +- assets/stylesheets/wizard/custom/wizard.scss | 26 +- 17 files changed, 449 insertions(+), 416 deletions(-) diff --git a/assets/javascripts/wizard-custom-globals.js b/assets/javascripts/wizard-custom-globals.js index 9510184b..83923cba 100644 --- a/assets/javascripts/wizard-custom-globals.js +++ b/assets/javascripts/wizard-custom-globals.js @@ -3,4 +3,4 @@ window.Discourse = {}; window.Wizard = {}; Wizard.SiteSettings = {}; Discourse.__widget_helpers = {}; -Discourse.SiteSettings = Wizard.SiteSettings; \ No newline at end of file +Discourse.SiteSettings = Wizard.SiteSettings; diff --git a/assets/javascripts/wizard-custom-guest.js b/assets/javascripts/wizard-custom-guest.js index 1e77ef88..4493cf01 100644 --- a/assets/javascripts/wizard-custom-guest.js +++ b/assets/javascripts/wizard-custom-guest.js @@ -1,4 +1,4 @@ (function () { - document.cookie = 'destination_url=' + window.location.href + ';path=/'; - window.location.href = '/login'; + document.cookie = "destination_url=" + window.location.href + ";path=/"; + window.location.href = "/login"; })(); diff --git a/assets/javascripts/wizard-custom-start.js b/assets/javascripts/wizard-custom-start.js index 0c62404c..3ffa9c5a 100644 --- a/assets/javascripts/wizard-custom-start.js +++ b/assets/javascripts/wizard-custom-start.js @@ -1,4 +1,4 @@ -(function() { - let wizard = require('discourse/plugins/discourse-custom-wizard/wizard/custom-wizard').default.create(); +(function () { + let wizard = require("discourse/plugins/discourse-custom-wizard/wizard/custom-wizard").default.create(); wizard.start(); })(); diff --git a/assets/stylesheets/common/wizard-admin.scss b/assets/stylesheets/common/wizard-admin.scss index 6b5ad58f..d7d00795 100644 --- a/assets/stylesheets/common/wizard-admin.scss +++ b/assets/stylesheets/common/wizard-admin.scss @@ -1,15 +1,15 @@ -@import 'wizard-mapper'; -@import 'wizard-manager'; -@import 'wizard-api'; -@import 'common/components/buttons'; +@import "wizard-mapper"; +@import "wizard-manager"; +@import "wizard-api"; +@import "common/components/buttons"; .admin-wizard-controls { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; - - &+ .wizard-message + div { + + & + .wizard-message + div { margin-top: 20px; } } @@ -22,54 +22,52 @@ display: flex; justify-content: space-between; align-items: flex-start; - + .message-block { .d-icon { margin-right: 4px; } - + .d-icon-check-circle { color: var(--success); } - + .d-icon-times-circle { color: var(--danger); } - + a + a { border-left: 1px solid $primary-medium; padding-left: 5px; margin-left: 5px; } - + .message { white-space: nowrap; } - + .list-colon { margin-right: 5px; } - + ul { list-style: none; margin: 0; - + span.action { margin-left: 5px; } } } - + & + div { margin-top: 30px; } - - } .wizard-submissions { overflow: scroll; - + table td { min-width: 150px; } @@ -81,7 +79,7 @@ margin: 0 7px; } } - + .wizard-logs { .date { width: 100px; @@ -125,11 +123,11 @@ .wizard-custom-action { position: relative; display: none; - + &.visible { display: flex; } - + .undo-changes { position: absolute; top: 0; @@ -139,11 +137,11 @@ .admin-wizard-container.settings .wizard-basic-details { justify-content: initial; - + .setting { width: auto; margin-right: 20px; - + .setting-label { width: initial; min-width: initial; @@ -153,7 +151,7 @@ .wizard-header { margin-bottom: 20px; - + &.large { font-size: 1.5em; min-height: 31px; @@ -161,32 +159,32 @@ display: flex; justify-content: space-between; align-items: flex-start; - + input { margin-bottom: 0; width: 400px; } - + label { margin-bottom: 0; } - + .download-link { font-size: 1rem; line-height: 20px; } - + .wizard-url { display: inline-flex; margin-left: 20px; max-width: 50%; - + a { padding: 6px 12px; font-size: 1rem; background-color: $primary-low; } - + button { font-size: 1rem; } @@ -210,22 +208,21 @@ .admin-wizard-buttons { margin-top: 20px; display: flex; - + .btn { margin-right: 1em; } } .admin-wizard-container.settings { - - [class~='setting'] { + [class~="setting"] { display: inline-flex; align-items: flex-start; width: 48%; margin-bottom: 30px; padding-bottom: 0; position: relative; - + &:last-of-type { margin-bottom: 0; } @@ -241,7 +238,7 @@ float: initial; width: initial; padding: 0; - + label { font-size: 0.85em; } @@ -253,97 +250,100 @@ button { display: block; } - - input[type="text"], textarea { + + input[type="text"], + textarea { width: 100%; box-sizing: border-box; margin-bottom: 0; } - + input[type="number"] { margin-bottom: 0; } - + input[disabled] { background-color: $primary-low; cursor: not-allowed; } - + input.medium { width: 200px; } - + input.small { width: 100px; } - + .uploaded-image-preview { width: 100%; max-height: 100px; margin-bottom: 0; } - + .image-upload-controls { label { font-size: 1em; margin: 0 5px 0 0; } } - + > textarea { min-height: 100px; resize: vertical; } - + input[type="checkbox"] { float: left; margin: 5px 7px 0 0; } - - .input .select-kit, > .select-kit { + + .input .select-kit, + > .select-kit { max-width: 250px !important; min-width: 250px !important; } } - &.full, &.full-inline { + &.full, + &.full-inline { width: 100%; .setting-value { width: initial; float: none; - + &.editor { .d-editor { margin-bottom: 5px; } } - + .uploaded-image-preview { max-height: 200px; } } } - + &.full-inline { .setting-value { display: flex; align-items: center; - + input { margin: 0 7px 0 0; } - + button { margin: 0 0 0 20px; } } } - + &.field-mapper-setting { .setting-value { max-width: calc(100% - 80px); - + .mapper-input { max-width: 100%; box-sizing: border-box; @@ -359,17 +359,17 @@ margin-top: 5px; } } - + .advanced-settings { width: 100%; margin-top: 30px; - - [class~='setting']:first-of-type { + + [class~="setting"]:first-of-type { border-top: none; } } - - .wizard-custom-action > [class~='setting']:first-of-type { + + .wizard-custom-action > [class~="setting"]:first-of-type { margin-bottom: 0; } @@ -406,20 +406,20 @@ .d-editor-input { min-height: 150px; } - + .d-editor-container { display: block; } - + .d-editor-textarea-wrapper { display: grid; margin-bottom: 10px; - + textarea { resize: vertical; } } - + .d-editor-preview-wrapper { display: none; margin: 0 0 10px 0; @@ -427,7 +427,7 @@ background-color: $secondary; border: 1px solid $primary-medium; max-width: 100%; - + &.force-preview { display: block; } @@ -437,25 +437,25 @@ margin: 0; } } - + .wizard-editor-gutter { position: relative; display: flex; - + .btn { margin-right: 10px; color: $primary; - + &:hover { color: $secondary; } } - + .wizard-editor-gutter-popover { position: absolute; padding: 10px; background-color: $secondary; - box-shadow: shadow('card'); + box-shadow: shadow("card"); z-index: 200; top: 40px; } @@ -481,7 +481,7 @@ margin-bottom: 10px; margin-right: 10px; } - + .btn { height: 32px; } @@ -505,11 +505,11 @@ .required-data-message { display: inline-block; margin-top: 20px; - + .label { margin-bottom: 5px; } - + input { margin-bottom: 0; } @@ -522,7 +522,7 @@ .modal .modal-body.next-session-time-modal { overflow: visible; - + .picker-container { position: absolute; top: 30px; @@ -574,7 +574,9 @@ width: 100%; } -.add-mapper-input .btn, .btn-after-time, .wizard-editor-gutter .btn { +.add-mapper-input .btn, +.btn-after-time, +.wizard-editor-gutter .btn { background-color: $secondary; border: 1px solid $primary-medium; } @@ -584,47 +586,47 @@ .buttons { display: flex; align-items: center; - + button.btn { margin-left: 10px; } - } + } } - + .btn.save:enabled { @extend .btn-primary; } - + .btn.destroy { @extend .btn-danger; } - + h3 { margin-bottom: 0; } - + .select-kit { width: 150px; } - + .select-kit.multi-select { width: 300px; - + .choices .choice, .select-kit-filter .filter-input { height: 25px; min-height: 25px; } } - + input[type="text"] { margin: 0; } - + table { td { vertical-align: top; - + label { margin: 0; line-height: 30px; @@ -632,25 +634,25 @@ margin-right: 10px; } } - + td { min-width: 170px; width: 170px; } - + td.multi-select { min-width: 300px; } - + td.input { min-width: 210px; width: 210px; } - + td.actions { min-width: 100px; text-align: right; - + button.btn { margin-left: 5px !important; } @@ -666,7 +668,7 @@ background-color: var(--primary-low); padding: 1em; margin: 0 0 1em 0; - + input { margin-bottom: 0; } @@ -676,7 +678,7 @@ .validation-container { display: flex; padding: 1em 0; - + .validation-section { width: 250px; } diff --git a/assets/stylesheets/common/wizard-api.scss b/assets/stylesheets/common/wizard-api.scss index c3e50e55..4fdd0fc2 100644 --- a/assets/stylesheets/common/wizard-api.scss +++ b/assets/stylesheets/common/wizard-api.scss @@ -17,7 +17,8 @@ text-align: right; vertical-align: middle; - > .d-icon, > .spinner { + > .d-icon, + > .spinner { margin-right: 7px; } @@ -30,7 +31,7 @@ .wizard-api-header { margin-top: 20px; - + &.page { margin-bottom: 20px; } @@ -103,15 +104,16 @@ .endpoint { margin-top: 20px; - - .top, .bottom { + + .top, + .bottom { display: flex; } - + .top { margin-bottom: 15px; } - + .combo-box { margin-right: 10px; width: 210px; @@ -138,6 +140,6 @@ margin-bottom: 20px; } -.wizard-step-contents{ +.wizard-step-contents { height: unset !important; -} \ No newline at end of file +} diff --git a/assets/stylesheets/common/wizard-manager.scss b/assets/stylesheets/common/wizard-manager.scss index 5437134f..135ddb8c 100644 --- a/assets/stylesheets/common/wizard-manager.scss +++ b/assets/stylesheets/common/wizard-manager.scss @@ -1,42 +1,42 @@ .admin-wizards-manager .admin-wizard-controls { display: flex; justify-content: flex-start; - + h3 { margin-bottom: 0; } - + .buttons { display: flex; margin-left: auto; - + > * { margin-left: 10px; } - + #import-button:enabled, #export-button:enabled { background-color: $tertiary; color: $secondary; } - + #destroy-button:enabled { background-color: $danger; color: $secondary; } } - + #file-upload { display: none; } - + .filename { padding: 0 10px; border: 1px solid $primary; display: inline-flex; height: 28px; line-height: 28px; - + a { color: $primary; margin-right: 5px; diff --git a/assets/stylesheets/common/wizard-mapper.scss b/assets/stylesheets/common/wizard-mapper.scss index 018fd419..69e9c88e 100644 --- a/assets/stylesheets/common/wizard-mapper.scss +++ b/assets/stylesheets/common/wizard-mapper.scss @@ -1,23 +1,23 @@ .wizard-mapper { width: 100%; - + .select-kit { min-width: initial; width: initial; - + .select-kit-header { min-height: 30px; } - + .choices .choice { height: 24px; } } - + div.mapper-block:not(:last-of-type) { margin-right: 10px; } - + > .mapper-connector.single { width: min-content; margin-bottom: 10px; @@ -26,7 +26,7 @@ } } -[class~='mapper-input'] { +[class~="mapper-input"] { display: flex; align-items: flex-start; width: min-content; @@ -48,7 +48,7 @@ background-color: $primary-low; border-color: #ddd; } - + .output { position: relative; } @@ -67,8 +67,9 @@ font-size: 0.8em; border: 2px solid $primary-low; } - - &.association, &.validation { + + &.association, + &.validation { padding-right: 27px; } } @@ -80,12 +81,12 @@ .mapper-connector { width: auto; min-width: 40px; - + .select-kit .select-kit-header { display: flex; justify-content: center; } - + &.single { height: 28px; background: $secondary; @@ -94,7 +95,7 @@ align-items: center; justify-content: center; } - + .connector-single { padding: 0 5px; } @@ -105,16 +106,19 @@ max-width: 250px; min-width: 250px; position: relative; - - > input, .select-kit, .ac-wrap, .autocomplete.ac-user { + + > input, + .select-kit, + .ac-wrap, + .autocomplete.ac-user { width: 250px !important; } - + .input { width: 100%; transition: all 0.1s; } - + .type-selector { position: absolute; top: -22px; @@ -126,24 +130,24 @@ margin-right: 4px; display: flex; align-items: center; - + &.active { color: var(--tertiary); text-decoration: underline; } - + &:last-of-type { margin-right: 0; } - + .type-selector-icon { margin-left: 2px; font-size: 0.7em; } } - + .selector-types { - box-shadow: shadow('dropdown'); + box-shadow: shadow("dropdown"); position: absolute; display: flex; background: $secondary; @@ -152,19 +156,19 @@ flex-direction: column; border: 1px solid $primary-low; } - + .value-list .remove-value-btn { background: none; border: none; - + .d-icon { color: $primary; } } - + .select-kit-header .selected-name { max-width: 85%; - + .name { white-space: nowrap; text-overflow: ellipsis; @@ -178,30 +182,30 @@ flex-direction: column; align-items: center; position: relative; - + .add-pair, .remove-pair, .join-pair { font-size: 0.9em; } - + .add-pair { margin-top: 5px; } - + .remove-pair { position: absolute; top: 5px; right: -20px; } - + .join-pair { position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); } - + .mapper-connector { min-width: 50px; } @@ -211,8 +215,8 @@ display: flex; align-items: flex-start; position: relative; - + &:not(:first-of-type) { margin-top: 30px; } -} \ No newline at end of file +} diff --git a/assets/stylesheets/wizard/custom/autocomplete.scss b/assets/stylesheets/wizard/custom/autocomplete.scss index 5b2dca84..1b02dfcc 100644 --- a/assets/stylesheets/wizard/custom/autocomplete.scss +++ b/assets/stylesheets/wizard/custom/autocomplete.scss @@ -29,7 +29,7 @@ div.ac-wrap { input[type="text"] { border: 0; } - + .remove-link { margin-left: 4px; font-size: $font-down-1; @@ -38,7 +38,7 @@ div.ac-wrap { border-radius: 12px; box-sizing: border-box; border: 1px solid var(--primary-low); - + &:hover { background-color: var(--danger-low); border: 1px solid var(--danger-medium); @@ -85,7 +85,7 @@ img.avatar { img { margin-right: 5px; } - + span.username { color: var(--primary); vertical-align: middle; @@ -129,7 +129,8 @@ img.avatar { top: 30px !important; box-sizing: border-box; - li, .no-results { + li, + .no-results { padding: 10px; } @@ -151,7 +152,8 @@ img.avatar { background-color: var(--secondary); display: flex; - &:hover, &.selected { + &:hover, + &.selected { background-color: var(--tertiary); color: white; @@ -169,4 +171,4 @@ img.avatar { i { margin-right: 5px; } -} \ No newline at end of file +} diff --git a/assets/stylesheets/wizard/custom/badges.scss b/assets/stylesheets/wizard/custom/badges.scss index 1109146d..ca9c0450 100644 --- a/assets/stylesheets/wizard/custom/badges.scss +++ b/assets/stylesheets/wizard/custom/badges.scss @@ -9,12 +9,12 @@ .badge-category { display: inline-flex; align-items: baseline; - + .category-name { text-overflow: ellipsis; overflow: hidden; } - + .d-icon { margin-right: 3px; width: 0.74em; @@ -25,7 +25,7 @@ &.bullet { margin-right: 8px; - + span.badge-category { color: var(--primary-high); overflow: hidden; @@ -34,7 +34,7 @@ color: $header-primary; } } - + .badge-category-parent-bg, .badge-category-bg { flex: 0 0 auto; @@ -43,7 +43,7 @@ margin-right: 5px; display: inline-block; } - + .badge-category-parent-bg { width: 5px; margin-right: 0; @@ -51,7 +51,7 @@ width: 5px; } } - + .d-icon { color: var(--primary-medium); } @@ -61,11 +61,11 @@ 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; @@ -77,11 +77,11 @@ &.badge-category-parent-bg { width: calc(100% - 5px); - + & + .badge-category-bg { left: 5px; width: calc(100% - 5px); - + & + .badge-category { margin-left: 5px; } @@ -92,7 +92,7 @@ position: relative; } } - + + .topic-header-extra { padding: 2px 4px 2px 4px; } @@ -127,4 +127,4 @@ color: var(--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 index c9f3b120..7aa884e9 100644 --- a/assets/stylesheets/wizard/custom/base.scss +++ b/assets/stylesheets/wizard/custom/base.scss @@ -15,7 +15,7 @@ textarea { height: auto; background-color: var(--secondary); border: 1px solid var(--primary-medium); - + &:focus { border-color: var(--tertiary); box-shadow: shadow("focus"); diff --git a/assets/stylesheets/wizard/custom/composer.scss b/assets/stylesheets/wizard/custom/composer.scss index e61d8dbd..4f5ff442 100644 --- a/assets/stylesheets/wizard/custom/composer.scss +++ b/assets/stylesheets/wizard/custom/composer.scss @@ -8,12 +8,12 @@ position: absolute; background-color: black; opacity: 0.8; - z-index: z("modal","overlay"); + z-index: z("modal", "overlay"); } .d-editor-modals { position: absolute; - z-index: z("modal","content"); + z-index: z("modal", "content"); } .d-editor { @@ -171,7 +171,7 @@ resize: vertical; flex: initial; } - + textarea { min-height: calc(200px - 32px); } @@ -205,11 +205,11 @@ .wizard-composer-hyperlink-contents { background-color: $secondary; padding: 20px; - + h3 { margin-top: 0; } - + .composer-link-url, .composer-link-name { display: block; @@ -217,7 +217,8 @@ } } -.hide-hyperlink-box, .add-link { +.hide-hyperlink-box, +.add-link { display: inline; } @@ -231,7 +232,7 @@ .bottom-bar { display: flex; - justify-content:space-between; + justify-content: space-between; margin-top: 20px; align-items: center; } diff --git a/assets/stylesheets/wizard/custom/events.scss b/assets/stylesheets/wizard/custom/events.scss index 01a724dd..747b68aa 100644 --- a/assets/stylesheets/wizard/custom/events.scss +++ b/assets/stylesheets/wizard/custom/events.scss @@ -3,65 +3,66 @@ .event-form { width: 585px; max-width: 80vw; - + .control { display: inline-flex; align-items: flex-start; min-height: 30px; margin-right: 20px; - + > input:first-child { margin-top: 10px !important; } - + > span:first-child { margin-top: 5px !important; } - + > input + span { margin-top: 5px; } - + &:last-of-type { margin-right: 0; } - + input[type="checkbox"] { margin: 0 10px 0 0; } - + input[type="number"] { width: 50px; margin: 0; min-height: 34px; border: 1px solid #e9e9e9; } - + &.full-width { flex: 1; } - - .select-kit, .ac-wrap { + + .select-kit, + .ac-wrap { width: 100% !important; max-width: 330px; } - + .select-kit-body { width: 100% !important; max-width: 330px; } } - + .event-controls { margin-bottom: 20px; display: flex; align-items: flex-start; } - + .datetime-controls { display: flex; margin-bottom: 5px; - + .date-time-card { width: 270px; display: inline-block; @@ -76,9 +77,18 @@ .end-card { border-left: 1px solid #eee; padding-left: 20px; - + &.disabled { - span, label, .pika-label, .pika-table th, .pika-button, .pika-prev, .pika-next, input, .pika-lendar, .is-selected .pika-button { + span, + label, + .pika-label, + .pika-table th, + .pika-button, + .pika-prev, + .pika-next, + input, + .pika-lendar, + .is-selected .pika-button { color: var(--primary-low); background-image: initial; background: initial; @@ -86,8 +96,9 @@ cursor: default; pointer-events: none; } - - input, .pika-lendar { + + input, + .pika-lendar { border: 1px solid var(--primary-low) !important; } } @@ -122,7 +133,7 @@ width: 127px; } } - + input { padding: 4px 10px; font-size: 1em; @@ -134,7 +145,7 @@ margin: 10px 0; } } - + #date-container-start, #date-container-end { height: 250px; @@ -161,16 +172,15 @@ } .rsvp-controls { - .rsvp-container { display: flex; flex-flow: wrap; margin-top: 10px; - + .control span { margin-right: 10px; } - + .full-width { align-items: flex-start; } @@ -196,7 +206,7 @@ $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-picker-shadow: rgba(0, 0, 0, 0.5) !default; $pd-th-color: var(--primary) !default; $pd-day-color: var(--primary) !default; $pd-day-bg: var(--secondary) !default; @@ -212,289 +222,293 @@ $pd-week-color: var(--primary) !default; // Font $pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default; - .pika-single { - z-index: 9999; - display: block; - position: relative; - color: $pd-text-color; - background: $pd-picker-bg; - border: 1px solid $pd-picker-border; - border-bottom-color: $pd-picker-border-bottom; - font-family: $pd-font-family; + z-index: 9999; + display: block; + position: relative; + color: $pd-text-color; + background: $pd-picker-bg; + border: 1px solid $pd-picker-border; + border-bottom-color: $pd-picker-border-bottom; + font-family: $pd-font-family; - &.is-hidden { - display: none; - } + &.is-hidden { + display: none; + } - &.is-bound { - position: absolute; - box-shadow: 0 5px 15px -5px $pd-picker-shadow; - } + &.is-bound { + position: absolute; + box-shadow: 0 5px 15px -5px $pd-picker-shadow; + } } // clear child float (pika-lendar), using the famous micro clearfix hack // http://nicolasgallagher.com/micro-clearfix-hack/ .pika-single { - &:before, - &:after { - content: " "; - display: table; - } + &:before, + &:after { + content: " "; + display: table; + } - &:after { clear: both } + &:after { + clear: both; + } } .pika-lendar { - float: left; - width: 240px; - margin: 8px; + float: left; + width: 240px; + margin: 8px; } .pika-title { - position: relative; - text-align: center; + position: relative; + text-align: center; - select { - cursor: pointer; - position: absolute; - z-index: 9998; - margin: 0; - left: 0; - top: 5px; - filter: alpha(opacity=0); - opacity: 0; - } + select { + cursor: pointer; + position: absolute; + z-index: 9998; + margin: 0; + left: 0; + top: 5px; + filter: alpha(opacity=0); + opacity: 0; + } } .pika-label { - display: inline-block; - position: relative; - z-index: 9999; - overflow: hidden; - margin: 0; - padding: 5px 3px; - font-size: 14px; - line-height: 20px; - font-weight: bold; - color: $pd-title-color; - background-color: $pd-title-bg; + display: inline-block; + position: relative; + z-index: 9999; + overflow: hidden; + margin: 0; + padding: 5px 3px; + font-size: 14px; + line-height: 20px; + font-weight: bold; + color: $pd-title-color; + background-color: $pd-title-bg; } .pika-prev, .pika-next { - display: block; - cursor: pointer; - position: relative; - outline: none; - border: 0; - padding: 0; - width: 20px; - height: 30px; - text-indent: 20px; // hide text using text-indent trick, using width value (it's enough) - white-space: nowrap; - overflow: hidden; - background-color: transparent; - background-position: center center; - background-repeat: no-repeat; - background-size: 75% 75%; - opacity: .5; - @if (lightness($secondary) < 50) { // invert the black png if the background is dark - filter: invert(1); - } + display: block; + cursor: pointer; + position: relative; + outline: none; + border: 0; + padding: 0; + width: 20px; + height: 30px; + text-indent: 20px; // hide text using text-indent trick, using width value (it's enough) + white-space: nowrap; + overflow: hidden; + background-color: transparent; + background-position: center center; + background-repeat: no-repeat; + background-size: 75% 75%; + opacity: 0.5; + @if (lightness($secondary) < 50) { + // invert the black png if the background is dark + filter: invert(1); + } - &:hover { - opacity: 1; - } + &:hover { + opacity: 1; + } - &.is-disabled { - cursor: default; - opacity: .2; - } + &.is-disabled { + cursor: default; + opacity: 0.2; + } } .pika-prev, .is-rtl .pika-next { - float: left; - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg=='); + float: left; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg=="); } .pika-next, .is-rtl .pika-prev { - float: right; - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII='); + float: right; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII="); } .pika-select { - display: inline-block; + display: inline-block; } .pika-table { - width: 100%; - border-collapse: collapse; - border-spacing: 0; - border: 0; + width: 100%; + border-collapse: collapse; + border-spacing: 0; + border: 0; - th, - td { - width: 14.285714285714286%; - padding: 0; - } + th, + td { + width: 14.285714285714286%; + padding: 0; + } - th { - color: $pd-th-color; - font-size: 12px; - line-height: 25px; - font-weight: bold; - text-align: center; - } + th { + color: $pd-th-color; + font-size: 12px; + line-height: 25px; + font-weight: bold; + text-align: center; + } - abbr { - border-bottom: none; - cursor: help; - } + abbr { + border-bottom: none; + cursor: help; + } } .pika-button { - cursor: pointer; - display: block; - -moz-box-sizing: border-box; - box-sizing: border-box; - outline: none; - border: 0; - margin: 0; - width: 100%; - padding: 5px; - color: $pd-day-color; - font-size: 12px; - line-height: 15px; - text-align: right; - background: $pd-day-bg; + cursor: pointer; + display: block; + -moz-box-sizing: border-box; + box-sizing: border-box; + outline: none; + border: 0; + margin: 0; + width: 100%; + padding: 5px; + color: $pd-day-color; + font-size: 12px; + line-height: 15px; + text-align: right; + background: $pd-day-bg; - .is-today & { - color: $pd-day-today-color; - font-weight: bold; - } + .is-today & { + color: $pd-day-today-color; + font-weight: bold; + } - .is-selected & { - color: $pd-day-selected-color; - font-weight: bold; - background: $pd-day-selected-bg; - box-shadow: inset 0 1px 3px $pd-day-selected-shadow; - border-radius: 3px; - } + .is-selected & { + color: $pd-day-selected-color; + font-weight: bold; + background: $pd-day-selected-bg; + box-shadow: inset 0 1px 3px $pd-day-selected-shadow; + border-radius: 3px; + } - .is-disabled &, - .is-outside-current-month & { - pointer-events: none; - cursor: default; - color: $pd-day-disabled-color; - opacity: .3; - } + .is-disabled &, + .is-outside-current-month & { + pointer-events: none; + cursor: default; + color: $pd-day-disabled-color; + opacity: 0.3; + } - &:hover { - color: $pd-day-hover-color; - background: $pd-day-hover-bg; - box-shadow: none; - border-radius: 3px; - } + &:hover { + color: $pd-day-hover-color; + background: $pd-day-hover-bg; + box-shadow: none; + border-radius: 3px; + } } .pika-week { - font-size: 11px; - color: $pd-week-color; + font-size: 11px; + color: $pd-week-color; } .is-inrange .pika-button { - background: #D5E9F7; + background: #d5e9f7; } .is-startrange .pika-button { - color: var(--secondary); - background: #6CB31D; - box-shadow: none; - border-radius: 3px; + color: var(--secondary); + background: #6cb31d; + box-shadow: none; + border-radius: 3px; } .is-endrange .pika-button { - color: var(--secondary); - background: var(--tertiary); - box-shadow: none; - border-radius: 3px; + color: var(--secondary); + background: var(--tertiary); + box-shadow: none; + border-radius: 3px; } - // timepicker .ui-timepicker-wrapper { - overflow-y: auto; - max-height: 150px; - width: 6.5em; - background: #fff; - border: 1px solid #ddd; - -webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2); - -moz-box-shadow:0 5px 10px rgba(0,0,0,0.2); - box-shadow:0 5px 10px rgba(0,0,0,0.2); - outline: none; - z-index: 10001; - margin: 0; + overflow-y: auto; + max-height: 150px; + width: 6.5em; + background: #fff; + border: 1px solid #ddd; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + outline: none; + z-index: 10001; + margin: 0; } .ui-timepicker-wrapper.ui-timepicker-with-duration { - width: 13em; + width: 13em; } .ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30, .ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 { - width: 11em; + width: 11em; } .ui-timepicker-list { - margin: 0; - padding: 0; - list-style: none; + margin: 0; + padding: 0; + list-style: none; } .ui-timepicker-duration { - margin-left: 5px; color: #888; + margin-left: 5px; + color: #888; } .ui-timepicker-list:hover .ui-timepicker-duration { - color: #888; + color: #888; } .ui-timepicker-list li { - padding: 3px 0 3px 5px; - cursor: pointer; - white-space: nowrap; - color: #000; - list-style: none; - margin: 0; + padding: 3px 0 3px 5px; + cursor: pointer; + white-space: nowrap; + color: #000; + list-style: none; + margin: 0; } .ui-timepicker-list:hover .ui-timepicker-selected { - background: #fff; color: #000; + background: #fff; + color: #000; } li.ui-timepicker-selected, .ui-timepicker-list li:hover, .ui-timepicker-list .ui-timepicker-selected:hover { - background: #1980EC; color: #fff; + background: #1980ec; + color: #fff; } li.ui-timepicker-selected .ui-timepicker-duration, .ui-timepicker-list li:hover .ui-timepicker-duration { - color: #ccc; + color: #ccc; } .ui-timepicker-list li.ui-timepicker-disabled, .ui-timepicker-list li.ui-timepicker-disabled:hover, .ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled { - color: #888; - cursor: default; + color: #888; + cursor: default; } .ui-timepicker-list li.ui-timepicker-disabled:hover, .ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled { - background: #f2f2f2; + background: #f2f2f2; } diff --git a/assets/stylesheets/wizard/custom/field.scss b/assets/stylesheets/wizard/custom/field.scss index 6ad99046..303c71d6 100644 --- a/assets/stylesheets/wizard/custom/field.scss +++ b/assets/stylesheets/wizard/custom/field.scss @@ -1,14 +1,14 @@ .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; @@ -31,9 +31,12 @@ margin: 0 5px; } } - + &.invalid { - textarea, input[type=text], input[type=checkbox], .select-kit { + textarea, + input[type="text"], + input[type="checkbox"], + .select-kit { outline: 4px solid var(--danger); } } @@ -43,7 +46,7 @@ display: flex; align-items: center; - &> .input-area { + & > .input-area { order: 0; margin: 15px 20px !important; @@ -54,12 +57,12 @@ } } - &> label.field-label { + & > label.field-label { order: 1; font-weight: 400; } - &> .field-description { + & > .field-description { margin-top: 0; order: 2; } @@ -83,7 +86,7 @@ } } - .wizard-image-preview { + .wizard-image-preview { margin-top: 10px; max-width: 500px; max-height: 500px; @@ -155,8 +158,8 @@ .select-kit.combo-box.group-dropdown { min-width: 220px; } - + .text-field input { margin-bottom: 0; } -} \ No newline at end of file +} diff --git a/assets/stylesheets/wizard/custom/locations.scss b/assets/stylesheets/wizard/custom/locations.scss index ec46185f..9a2f74ec 100644 --- a/assets/stylesheets/wizard/custom/locations.scss +++ b/assets/stylesheets/wizard/custom/locations.scss @@ -49,7 +49,7 @@ border-left: 1px solid var(--primary-low); padding-left: 20px; } - + .control-group { display: inline-block; vertical-align: top; @@ -72,7 +72,8 @@ } } -input.input-location, div.input-location { +input.input-location, +div.input-location { max-height: 150px; background-color: var(--secondary); box-shadow: none; @@ -111,7 +112,8 @@ input.input-location, div.input-location { top: 30px !important; box-sizing: border-box; - li, .no-results { + li, + .no-results { padding: 10px; } @@ -128,7 +130,8 @@ input.input-location, div.input-location { background-color: var(--secondary); display: flex; - &:hover, &.selected { + &:hover, + &.selected { background-color: var(--tertiary); color: white; @@ -185,4 +188,4 @@ input.input-location, div.input-location { text-align: center; color: #919191; } -} \ No newline at end of file +} diff --git a/assets/stylesheets/wizard/custom/step.scss b/assets/stylesheets/wizard/custom/step.scss index 40c97c97..0a7123fe 100644 --- a/assets/stylesheets/wizard/custom/step.scss +++ b/assets/stylesheets/wizard/custom/step.scss @@ -11,7 +11,7 @@ .wizard-step-title { flex: 0; - + p { margin: 0 0 0.5em 0; } @@ -70,7 +70,7 @@ img.large { width: 150; - padding: 25px;; + padding: 25px; } img.small { @@ -110,7 +110,7 @@ max-height: initial; width: 100%; } - + .wizard-progress { .screen { background-color: var(--tertiary); @@ -119,7 +119,7 @@ .step-message { text-align: center; - transition: all .2s; + transition: all 0.2s; z-index: 2; padding: 20px; @@ -137,15 +137,15 @@ background-color: var(--danger); color: var(--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/validators.scss b/assets/stylesheets/wizard/custom/validators.scss index f5227688..93368e70 100644 --- a/assets/stylesheets/wizard/custom/validators.scss +++ b/assets/stylesheets/wizard/custom/validators.scss @@ -1,7 +1,7 @@ .similar-topics-validator { position: relative; display: flex; - + label { min-height: 20px; } @@ -9,7 +9,7 @@ .wizard-similar-topics { margin-left: 3px; - + ul { background-color: var(--tertiary-low); padding: 5px; @@ -22,19 +22,19 @@ width: 100%; box-sizing: border-box; z-index: 100; - + .title { color: var(--primary); } - + .blurb { margin-left: 0.5em; color: var(--primary-high); font-size: $font-down-1; } } - + .show-topics { cursor: pointer; } -} \ No newline at end of file +} diff --git a/assets/stylesheets/wizard/custom/wizard.scss b/assets/stylesheets/wizard/custom/wizard.scss index 683c4ef9..e6102ac4 100644 --- a/assets/stylesheets/wizard/custom/wizard.scss +++ b/assets/stylesheets/wizard/custom/wizard.scss @@ -2,24 +2,26 @@ 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 + margin: 0; } - + .wizard-footer { background-color: var(--secondary); } } - - .wizard-buttons > a, .wizard-buttons > button, .spinner { + + .wizard-buttons > a, + .wizard-buttons > button, + .spinner { display: inline-block; vertical-align: middle; } @@ -27,25 +29,25 @@ .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); } @@ -59,7 +61,7 @@ /* IE11 hacks */ -@media all and (-ms-high-contrast:none) { +@media all and (-ms-high-contrast: none) { .custom-wizard { div.wizard-step-contents { display: block; @@ -69,4 +71,4 @@ visibility: hidden; } } -} \ No newline at end of file +}