diff --git a/.prettierignore b/.prettierignore index ec07eb9993..e6c0ce1c7f 100644 --- a/.prettierignore +++ b/.prettierignore @@ -13,7 +13,8 @@ postcss.config.js # SCSS # Enabled: most of admin -/app/webpacker/css/admin/globals/ +/app/webpacker/css/admin/globals/mixins.scss +/app/webpacker/css/admin/globals/variables.scss /app/webpacker/css/admin/shared/ /app/webpacker/css/admin_v3/globals/variables.scss /app/webpacker/css/darkswarm/ diff --git a/app/components/pagination_component/pagination_component.scss b/app/components/pagination_component/pagination_component.scss index 437e0a55d1..ad9d17fe2a 100644 --- a/app/components/pagination_component/pagination_component.scss +++ b/app/components/pagination_component/pagination_component.scss @@ -16,7 +16,7 @@ nav { &.inactive { cursor: default; - color: $disabled-dark; + color: $dark-grey; } } @@ -52,7 +52,7 @@ nav { } .pagination-gap { - color: $disabled-dark; + color: $dark-grey; } .pagination-page { diff --git a/app/components/search_input_component/search_input_component.scss b/app/components/search_input_component/search_input_component.scss index add821dd34..4de3191239 100644 --- a/app/components/search_input_component/search_input_component.scss +++ b/app/components/search_input_component/search_input_component.scss @@ -1,5 +1,5 @@ .search-input { - border: 1px solid $disabled-light; + border: 1px solid $light-grey; height: 3em; display: flex; line-height: 3em; diff --git a/app/components/selector_component/selector_component.scss b/app/components/selector_component/selector_component.scss index e5ea18583e..9faddfe4d2 100644 --- a/app/components/selector_component/selector_component.scss +++ b/app/components/selector_component/selector_component.scss @@ -2,7 +2,7 @@ position: relative; .selector-main { - border: 1px solid $disabled-light; + border: 1px solid $light-grey; height: 3em; position: relative; cursor: pointer; @@ -30,7 +30,7 @@ height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; - border-top: 5px solid $disabled-light; + border-top: 5px solid $light-grey; } } } @@ -42,7 +42,7 @@ z-index: 1; background-color: white; margin-top: -1px; - border: 1px solid $disabled-light; + border: 1px solid $light-grey; .selector-items { overflow-y: auto; @@ -51,7 +51,7 @@ .selector-item { padding-left: 10px; padding-right: 10px; - border-bottom: 1px solid $disabled-light; + border-bottom: 1px solid $light-grey; position: relative; height: 3em; line-height: 3em; diff --git a/app/components/selector_with_filter_component/selector_with_filter_component.scss b/app/components/selector_with_filter_component/selector_with_filter_component.scss index 88f9e6c5f2..cf82bba9a8 100644 --- a/app/components/selector_with_filter_component/selector_with_filter_component.scss +++ b/app/components/selector_with_filter_component/selector_with_filter_component.scss @@ -37,11 +37,11 @@ .selector-wrapper { .super-selector-search { - border-bottom: 1px solid $disabled-light; + border-bottom: 1px solid $light-grey; padding: 10px 5px; input { - border: 1px solid $disabled-light; + border: 1px solid $light-grey; box-sizing: border-box; border-radius: 4px; width: 100%; diff --git a/app/webpacker/css/admin/alert.scss b/app/webpacker/css/admin/alert.scss index 267e7a8580..26ee0b2867 100644 --- a/app/webpacker/css/admin/alert.scss +++ b/app/webpacker/css/admin/alert.scss @@ -14,11 +14,11 @@ } &:hover { - border-color: $warning-red; - color: $warning-red; + border-color: $color-warning; + color: $color-warning; h6 { - color: $warning-red; + color: $color-warning; } } } diff --git a/app/webpacker/css/admin/all.scss b/app/webpacker/css/admin/all.scss index ea19d92b46..c9ac1e54ac 100644 --- a/app/webpacker/css/admin/all.scss +++ b/app/webpacker/css/admin/all.scss @@ -16,7 +16,6 @@ @import "globals/functions"; @import "globals/palette"; @import "globals/variables"; -@import "variables"; @import "globals/mixins"; @import "plugins/font-awesome"; @@ -111,7 +110,6 @@ @import "tag_rules"; @import "terms_of_service_files"; @import "validation"; -@import "variables"; @import "variant_overrides"; @import "welcome"; diff --git a/app/webpacker/css/admin/change_type_form.scss b/app/webpacker/css/admin/change_type_form.scss index 080a46b63b..1880f029eb 100644 --- a/app/webpacker/css/admin/change_type_form.scss +++ b/app/webpacker/css/admin/change_type_form.scss @@ -1,6 +1,3 @@ -@import "../darkswarm/branding"; -@import "../darkswarm/mixins"; - #change_type { section { margin: 2em 0 0 0; diff --git a/app/webpacker/css/admin/components/buttons.scss b/app/webpacker/css/admin/components/buttons.scss index c96b70b17e..c5804a76f0 100644 --- a/app/webpacker/css/admin/components/buttons.scss +++ b/app/webpacker/css/admin/components/buttons.scss @@ -69,7 +69,7 @@ button:not(.plain):not(.trix-button), } &.danger { - background-color: $warning-red; + background-color: $color-warning; } &.success { background-color: $spree-green; diff --git a/app/webpacker/css/admin/components/dialogs.scss b/app/webpacker/css/admin/components/dialogs.scss index 53bbf0153f..76b5b71dd4 100644 --- a/app/webpacker/css/admin/components/dialogs.scss +++ b/app/webpacker/css/admin/components/dialogs.scss @@ -23,7 +23,7 @@ &.error { .message { .icon { - color: $warning-red; + color: $color-warning; } } } diff --git a/app/webpacker/css/admin/components/input.scss b/app/webpacker/css/admin/components/input.scss index afc58cbfe9..1c1a847e56 100644 --- a/app/webpacker/css/admin/components/input.scss +++ b/app/webpacker/css/admin/components/input.scss @@ -1,9 +1,7 @@ -@import "../../darkswarm/branding"; - .container { input { &[readonly] { - background-color: $disabled-light; + background-color: $light-grey; cursor: default; } } diff --git a/app/webpacker/css/admin/components/jquery_dialog.scss b/app/webpacker/css/admin/components/jquery_dialog.scss index 002139e017..f796d9afed 100644 --- a/app/webpacker/css/admin/components/jquery_dialog.scss +++ b/app/webpacker/css/admin/components/jquery_dialog.scss @@ -64,7 +64,7 @@ light: #ccc &:hover { &:before { - color: $warning-red; + color: $color-warning; } } diff --git a/app/webpacker/css/admin/components/messages.scss b/app/webpacker/css/admin/components/messages.scss index ff50aa2486..61dd751a55 100644 --- a/app/webpacker/css/admin/components/messages.scss +++ b/app/webpacker/css/admin/components/messages.scss @@ -1,14 +1,14 @@ .errorExplanation { - padding: 5px; + padding: 10px; border: 1px solid very-light($color-error, 12); background-color: very-light($color-error, 6); border-radius: 3px; - color: very-light($color-error, 30); + color: $color-error; margin-bottom: 15px; h2 { font-size: 140%; - color: very-light($color-error, 30); + color: $color-error; margin-bottom: 5px; } diff --git a/app/webpacker/css/admin/components/pagination.scss b/app/webpacker/css/admin/components/pagination.scss index beba1f2159..730abe8888 100644 --- a/app/webpacker/css/admin/components/pagination.scss +++ b/app/webpacker/css/admin/components/pagination.scss @@ -25,7 +25,7 @@ } &.disabled { - background-color: $disabled_button; + background-color: $color-btn-disabled-bg; cursor: default; } } diff --git a/app/webpacker/css/admin/components/save_bar.scss b/app/webpacker/css/admin/components/save_bar.scss index b60482de11..649e129ea5 100644 --- a/app/webpacker/css/admin/components/save_bar.scss +++ b/app/webpacker/css/admin/components/save_bar.scss @@ -13,7 +13,7 @@ color: $spree-blue; &.error { - color: $red-500; + color: $color-error; } } diff --git a/app/webpacker/css/admin/components/simple_modal.scss b/app/webpacker/css/admin/components/simple_modal.scss index e6a88e0b25..03595f6e83 100644 --- a/app/webpacker/css/admin/components/simple_modal.scss +++ b/app/webpacker/css/admin/components/simple_modal.scss @@ -2,13 +2,13 @@ width: 300px; .close-reveal-modal { - color: $modal-close-button-color; + color: $color-modal-close-btn; font-size: 23px; right: 0.45rem; top: 0.35rem; :hover { - color: $modal-close-button-hover-color; + color: $color-modal-close-btn-hover; } } diff --git a/app/webpacker/css/admin/components/table_loading.scss b/app/webpacker/css/admin/components/table_loading.scss index 6c97aabc3d..4d15f95837 100644 --- a/app/webpacker/css/admin/components/table_loading.scss +++ b/app/webpacker/css/admin/components/table_loading.scss @@ -19,7 +19,7 @@ } &.error { - color: $warning-red; + color: $color-warning; } } } diff --git a/app/webpacker/css/admin/components/tom_select.scss b/app/webpacker/css/admin/components/tom_select.scss index 076f0a55b2..0783795e6e 100644 --- a/app/webpacker/css/admin/components/tom_select.scss +++ b/app/webpacker/css/admin/components/tom_select.scss @@ -41,7 +41,7 @@ .ts-wrapper.single .ts-control, .ts-dropdown.single { - border-color: $admin-table-border; + border-color: $color-tbl-border; } .ts-control, diff --git a/app/webpacker/css/admin/dashboard-single-ent.scss b/app/webpacker/css/admin/dashboard-single-ent.scss index e2f1926c6e..93f242257b 100644 --- a/app/webpacker/css/admin/dashboard-single-ent.scss +++ b/app/webpacker/css/admin/dashboard-single-ent.scss @@ -1,5 +1,3 @@ -@import "../darkswarm/mixins"; - .dashboard_item.single-ent { .header { padding: 0.77778em 1.33333em 0.77778em 0.77778em; diff --git a/app/webpacker/css/admin/dashboard_item.scss b/app/webpacker/css/admin/dashboard_item.scss index 6a758a29e3..67498fa352 100644 --- a/app/webpacker/css/admin/dashboard_item.scss +++ b/app/webpacker/css/admin/dashboard_item.scss @@ -19,11 +19,11 @@ div.dashboard_item { } &.red { - background-color: $warning-red; + background-color: $color-warning; } &.orange { - background-color: $warning-orange; + background-color: $color-warning; } } @@ -40,20 +40,20 @@ div.dashboard_item { } &.red { - border-color: $warning-red; + border-color: $color-warning; border-width: 3px; h3 { - color: $warning-red; + color: $color-warning; } } &.orange { - border-color: $warning-orange; + border-color: $color-warning; border-width: 3px; h3 { - color: $warning-orange; + color: $color-warning; } } @@ -141,12 +141,12 @@ div.dashboard_item { } .icon-warning-sign { - color: $warning-orange; + color: $color-warning; font-size: 30px; } .icon-remove-sign { - color: $warning-red; + color: $color-warning; font-size: 30px; } @@ -156,13 +156,13 @@ div.dashboard_item { } &.orange { - color: $warning-orange; - border: solid $warning-orange; + color: $color-warning; + border: solid $color-warning; } &.red { - color: $warning-red; - border: solid $warning-red; + color: $color-warning; + border: solid $color-warning; } &.orange, @@ -217,7 +217,7 @@ div.dashboard_item { text-align: center; &.orange { - background-color: $warning-orange; + background-color: $color-warning; } &.blue { @@ -225,7 +225,7 @@ div.dashboard_item { } &.red { - background-color: $warning-red; + background-color: $color-warning; } &:hover { diff --git a/app/webpacker/css/admin/enterprise_index_panels.scss b/app/webpacker/css/admin/enterprise_index_panels.scss index 2a5aac968f..087f318042 100644 --- a/app/webpacker/css/admin/enterprise_index_panels.scss +++ b/app/webpacker/css/admin/enterprise_index_panels.scss @@ -84,7 +84,7 @@ font-size: 1.5rem; &.issue { - color: $warning-red; + color: $color-warning; } &.warning { diff --git a/app/webpacker/css/admin/enterprises.scss b/app/webpacker/css/admin/enterprises.scss index d0f2969088..85e115ec34 100644 --- a/app/webpacker/css/admin/enterprises.scss +++ b/app/webpacker/css/admin/enterprises.scss @@ -1,6 +1,6 @@ form[name="enterprise_form"] { div.row.warning { - color: $warning-orange; + color: $color-warning; } table.managers { @@ -29,7 +29,7 @@ form[name="enterprise_form"] { } .admin-enterprises-index-admin-actions-divider { - background-color: $admin-table-border; + background-color: $color-tbl-border; border-width: 0; height: 1px; margin-bottom: 1em; @@ -38,7 +38,7 @@ form[name="enterprise_form"] { table .enterprise-actions { .warning-icon { - color: $warning-red; + color: $color-warning; font-size: 16px; } } diff --git a/app/webpacker/css/admin/globals/functions.scss b/app/webpacker/css/admin/globals/functions.scss index 0abf3546f6..ec66b57c56 100644 --- a/app/webpacker/css/admin/globals/functions.scss +++ b/app/webpacker/css/admin/globals/functions.scss @@ -1,23 +1,22 @@ // Make color very close to white -@function very-light($color, $adjust: 3){ - @if type-of($adjust) == 'number' and $adjust > 0 { +@function very-light($color, $adjust: 3) { + @if type-of($adjust) == "number" and $adjust > 0 { @for $i from 0 through 100 { @if lighten($color, $i) == white and ($i - $adjust) > $adjust { @return lighten($color, $i - $adjust); } } + } @else { + @debug "Please correct $adjust value. It should be number and larger then 0. Currently it is '#{type-of($adjust)}' with value '#{$adjust}'"; } - @else { - @debug "Please correct $adjust value. It should be number and larger then 0. Currently it is '#{type-of($adjust)}' with value '#{$adjust}'" - } -}; +} // Quick fix for dynamic variables missing in SASS @function get-value($prop, $val, $search) { $n1: index($prop, $search); $n2: index($val, $search); - @if($n1) { + @if ($n1) { @return nth($val, $n1); } @else { @return nth($prop, $n2); diff --git a/app/webpacker/css/admin/globals/palette.scss b/app/webpacker/css/admin/globals/palette.scss index 0c4bf1611c..b591605326 100644 --- a/app/webpacker/css/admin/globals/palette.scss +++ b/app/webpacker/css/admin/globals/palette.scss @@ -1,7 +1,19 @@ // Basic color palette for admin -$color-1: #FFFFFF !default; // White -$color-2: #9FC820 !default; // Green -$color-3: #5498DA !default; // Light Blue -$color-4: #6788A2 !default; // Dark Blue -$color-5: #C60F13 !default; // Red -$color-6: #FF9300 !default; // Yellow +$spree-green: #9fc820; +$spree-blue: #5498da; +$spree-light-blue: #eff5fc; +$pale-blue: #cee1f4; +$bright-orange: #ffa92e; +$medium-grey: #919191; +$light-grey: #ccc; + +$color-1: #ffffff !default; // White +$color-2: $spree-green !default; // Green +$color-3: $spree-blue !default; // Light Blue +$color-4: #6788a2 !default; // Dark Blue +$color-5: #c60f13 !default; // Red +$color-6: #ff9300 !default; // Yellow + +$dark-grey: #333; +$light-grey: #ddd; +$near-black: #222; diff --git a/app/webpacker/css/admin/globals/variables.scss b/app/webpacker/css/admin/globals/variables.scss index 167d5fe2f6..86fb56b7af 100644 --- a/app/webpacker/css/admin/globals/variables.scss +++ b/app/webpacker/css/admin/globals/variables.scss @@ -23,18 +23,21 @@ $color-border: very-light($color-3, 12) !default; // Basic flash colors $color-success: $color-2 !default; $color-notice: $color-6 !default; +$color-warning: $color-5 !default; $color-error: $color-5 !default; // Table colors $color-tbl-odd: $color-1 !default; $color-tbl-even: very-light($color-3, 4) !default; $color-tbl-thead: very-light($color-3, 4) !default; +$color-tbl-border: $pale-blue !default; // Button colors $color-btn-bg: $color-3 !default; $color-btn-text: $color-1 !default; $color-btn-hover-bg: $color-2 !default; $color-btn-hover-text: $color-1 !default; +$color-btn-disabled-bg: $light-grey !default; // Actions colors $color-action-edit-bg: very-light($color-success, 5 ) !default; @@ -65,6 +68,10 @@ $color-txt-brd: $color-border !default; $color-txt-text: $color-3 !default; $color-txt-hover-brd: $color-2 !default; +// Modal colors +$color-modal-close-btn: $color-5 !default; +$color-modal-close-btn-hover: darken($color-5, 5%) !default; + // States label colors $color-ste-complete-bg: $color-success !default; $color-ste-complete-text: $color-1 !default; diff --git a/app/webpacker/css/admin/index_panel_buttons.scss b/app/webpacker/css/admin/index_panel_buttons.scss index bfaa68e9e9..110a50e4cd 100644 --- a/app/webpacker/css/admin/index_panel_buttons.scss +++ b/app/webpacker/css/admin/index_panel_buttons.scss @@ -6,7 +6,7 @@ tbody.panel-ctrl { margin-top: 10px; margin-bottom: 10px; font-size: 1.3rem; - background-color: $warning-red; + background-color: $color-warning; &:hover { background-color: #cd4e4f; } diff --git a/app/webpacker/css/admin/index_panels.scss b/app/webpacker/css/admin/index_panels.scss index a7e01066f8..cbaa45bf70 100644 --- a/app/webpacker/css/admin/index_panels.scss +++ b/app/webpacker/css/admin/index_panels.scss @@ -27,7 +27,7 @@ tbody.panel-ctrl { font-size: 2rem; -webkit-font-smoothing: antialiased; content: "\f071"; - color: $warning-red; + color: $color-warning; } &.status { @@ -38,7 +38,7 @@ tbody.panel-ctrl { i.issue::before { content: "\f071"; - color: $warning-red; + color: $color-warning; } i.warning::before { diff --git a/app/webpacker/css/admin/openfoodnetwork.scss b/app/webpacker/css/admin/openfoodnetwork.scss index e396dd1802..b4de0d2f52 100644 --- a/app/webpacker/css/admin/openfoodnetwork.scss +++ b/app/webpacker/css/admin/openfoodnetwork.scss @@ -34,7 +34,7 @@ text-angular .ta-editor { span.error, div.error:not(.flash) { - color: $warning-red; + color: $color-warning; } /* Fix conflict between Spree and elRTE's styles */ @@ -46,7 +46,7 @@ div.error:not(.flash) { input.red, a.button.red, button.red { - background-color: $warning-red; + background-color: $color-warning; margin-right: 5px; color: #ffffff; } @@ -54,7 +54,7 @@ button.red { a.button.red { &:not(:hover) { color: #fff; - background-color: $warning-red; + background-color: $color-warning; } } @@ -208,12 +208,12 @@ table#listing_enterprise_groups { // TODO: remove this, use class below #no_results { font-weight: bold; - color: $warning-red; + color: $color-warning; } .no-results { font-weight: bold; - color: $warning-red; + color: $color-warning; h1, h2, @@ -221,12 +221,12 @@ table#listing_enterprise_groups { h4, h5, h6 { - color: $warning-red; + color: $color-warning; } } .field_with_errors > input { - border-color: red; + border-color: $color-error; } // textAngular wysiwyg @@ -269,7 +269,7 @@ text-angular { } span.required { - color: red; + color: $color-5; font-size: 110%; } diff --git a/app/webpacker/css/admin/orders.scss b/app/webpacker/css/admin/orders.scss index a1bc92af18..8738ce51c7 100644 --- a/app/webpacker/css/admin/orders.scss +++ b/app/webpacker/css/admin/orders.scss @@ -9,7 +9,7 @@ input.show-dirty { &.ng-dirty { border: solid 1px orange; &.update-error { - border: solid 1px $warning-red; + border: solid 1px $color-warning; } } } @@ -17,7 +17,7 @@ input.show-dirty { input, div { &.update-error { - border: solid 1px $warning-red; + border: solid 1px $color-warning; } } @@ -116,7 +116,7 @@ table.edit-note-table { float: right; &:disabled { - background-color: $disabled-button; + background-color: $color-btn-disabled-bg; } } } @@ -138,7 +138,7 @@ table.edit-note-table { } .error { - color: $warning-red; + color: $color-warning; } } diff --git a/app/webpacker/css/admin/pages/enterprise_form.scss b/app/webpacker/css/admin/pages/enterprise_form.scss index 5c588ba11a..f2ce9b90cb 100644 --- a/app/webpacker/css/admin/pages/enterprise_form.scss +++ b/app/webpacker/css/admin/pages/enterprise_form.scss @@ -12,5 +12,5 @@ span.available { } span.unavailable { - color: $warning-red; + color: $color-warning; } diff --git a/app/webpacker/css/admin/pages/subscription_form.scss b/app/webpacker/css/admin/pages/subscription_form.scss index 02c9fd783e..a6c363e489 100644 --- a/app/webpacker/css/admin/pages/subscription_form.scss +++ b/app/webpacker/css/admin/pages/subscription_form.scss @@ -1,5 +1,5 @@ .admin-subscription-form-subscription-line-items { .not-in-open-and-upcoming-order-cycles-warning { - color: $warning-red; + color: $color-warning; } } diff --git a/app/webpacker/css/admin/pages/subscription_review.scss b/app/webpacker/css/admin/pages/subscription_review.scss index ba3280aa2b..42718a0d30 100644 --- a/app/webpacker/css/admin/pages/subscription_review.scss +++ b/app/webpacker/css/admin/pages/subscription_review.scss @@ -1,5 +1,5 @@ .admin-subscription-review-subscription-line-items { .not-in-open-and-upcoming-order-cycles-warning { - color: $warning-red; + color: $color-warning; } } diff --git a/app/webpacker/css/admin/product_import.scss b/app/webpacker/css/admin/product_import.scss index 49f220edf7..5c6ccc2276 100644 --- a/app/webpacker/css/admin/product_import.scss +++ b/app/webpacker/css/admin/product_import.scss @@ -1,4 +1,4 @@ -$pi-red: $warning-red; +$pi-red: $color-warning; $pi-green: lighten($spree-green, 10%); $pi-orange: $bright-orange; $pi-blue: lighten($spree-blue, 10%); diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss index 1a08f8a966..edd198fde0 100644 --- a/app/webpacker/css/admin/products_v3.scss +++ b/app/webpacker/css/admin/products_v3.scss @@ -19,6 +19,13 @@ padding: 4px; border-collapse: separate; // This is needed for the outer padding. Also should be helpful to give more flexibility of borders between rows. + tr:hover { + th, + td { + background-color: $light-grey; + } + } + th, td { padding: $padding-tbl-cell; diff --git a/app/webpacker/css/admin/sections/orders.scss b/app/webpacker/css/admin/sections/orders.scss index f6b4a4546e..e6e45309d3 100644 --- a/app/webpacker/css/admin/sections/orders.scss +++ b/app/webpacker/css/admin/sections/orders.scss @@ -39,7 +39,7 @@ } table tr:last-child th { - border-bottom: 1px solid $admin-table-border; + border-bottom: 1px solid $color-tbl-border; } } diff --git a/app/webpacker/css/admin/shared/forms.scss b/app/webpacker/css/admin/shared/forms.scss index bd5274bced..6e956df095 100644 --- a/app/webpacker/css/admin/shared/forms.scss +++ b/app/webpacker/css/admin/shared/forms.scss @@ -100,15 +100,15 @@ span.info { &.withError { .field_with_errors { label { - color: very-light($color-error, 30); + color: $color-error; } input { - border-color: very-light($color-error, 15); + border-color: $color-error; } } .formError { - color: very-light($color-error, 30); + color: $color-error; font-style: italic; font-size: 85%; } diff --git a/app/webpacker/css/admin/shared/typography.scss b/app/webpacker/css/admin/shared/typography.scss index 0b8a3707f2..4435933458 100644 --- a/app/webpacker/css/admin/shared/typography.scss +++ b/app/webpacker/css/admin/shared/typography.scss @@ -142,7 +142,7 @@ dl { } .text-red { - color: $warning-red; + color: $color-warning; } input.text-big { diff --git a/app/webpacker/css/admin/sidebar-item.scss b/app/webpacker/css/admin/sidebar-item.scss index c0aec809e5..499c4e76e9 100644 --- a/app/webpacker/css/admin/sidebar-item.scss +++ b/app/webpacker/css/admin/sidebar-item.scss @@ -16,7 +16,7 @@ div.sidebar_item { } &.red { - background-color: $warning-red; + background-color: $color-warning; } } @@ -26,10 +26,10 @@ div.sidebar_item { overflow-x: hidden; &.red { - color: $warning-red; + color: $color-warning; .list-item { - border: solid $warning-red; + border: solid $color-warning; border-width: 0px 3px 0px 3px; a.alpha, @@ -47,7 +47,7 @@ div.sidebar_item { } a { - color: $warning-red; + color: $color-warning; } } } @@ -77,7 +77,7 @@ div.sidebar_item { } .icon-remove-sign { - color: $warning-red; + color: $color-warning; font-size: 18px; } @@ -114,7 +114,7 @@ div.sidebar_item { } &.red { - background-color: $warning-red; + background-color: $color-warning; } &:hover { diff --git a/app/webpacker/css/admin/trix.scss b/app/webpacker/css/admin/trix.scss index b07977c234..7ee927a2f3 100644 --- a/app/webpacker/css/admin/trix.scss +++ b/app/webpacker/css/admin/trix.scss @@ -2,9 +2,9 @@ trix-toolbar [data-trix-button-group="file-tools"] { display: none; } -// Match the rendering into the shopfront +// Match the rendering into the shopfront (see ../darkswarm/) trix-editor { - color: $darker-grey; + color: #222; ol, ul { @@ -12,7 +12,7 @@ trix-editor { } a { - color: $ofn-brand; + color: #f27052; } // Copy/pasted from _type.scss diff --git a/app/webpacker/css/admin/variant_overrides.scss b/app/webpacker/css/admin/variant_overrides.scss index c01673b292..4c3ede7162 100644 --- a/app/webpacker/css/admin/variant_overrides.scss +++ b/app/webpacker/css/admin/variant_overrides.scss @@ -4,5 +4,5 @@ } button.hide:hover { - background-color: $warning-red; + background-color: $color-warning; } diff --git a/app/webpacker/css/admin/welcome.scss b/app/webpacker/css/admin/welcome.scss index 9f58728823..74b8dfe290 100644 --- a/app/webpacker/css/admin/welcome.scss +++ b/app/webpacker/css/admin/welcome.scss @@ -1,13 +1,11 @@ -@import "../darkswarm/mixins"; - #welcome_page { header { text-align: center; padding: 4em 2em; - @include fullbg; background-color: black; background-image: url("../images/home/tagline-bg.jpg"); + background-size: cover; background-repeat: no-repeat; background-position: center center; margin-bottom: 2em; diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss index 4cbc555727..f682daf3f0 100644 --- a/app/webpacker/css/admin_v3/all.scss +++ b/app/webpacker/css/admin_v3/all.scss @@ -20,7 +20,6 @@ @import "../admin/globals/functions"; @import "globals/palette"; // admin_v3 @import "globals/variables"; // admin_v3 -@import "../admin/variables"; @import "../admin/globals/mixins"; @import "mixins"; // admin_v3 @@ -117,7 +116,6 @@ @import "../admin/tag_rules"; @import "../admin/terms_of_service_files"; @import "../admin/validation"; -@import "../admin/variables"; @import "../admin/variant_overrides"; @import "../admin/welcome"; diff --git a/app/webpacker/css/admin_v3/components/buttons.scss b/app/webpacker/css/admin_v3/components/buttons.scss index 57683f72a6..71b38206b8 100644 --- a/app/webpacker/css/admin_v3/components/buttons.scss +++ b/app/webpacker/css/admin_v3/components/buttons.scss @@ -99,7 +99,7 @@ button:not(.plain):not(.trix-button), } &.danger { - background-color: $warning-red; + background-color: $color-warning; } &.success { background-color: $spree-green; diff --git a/app/webpacker/css/admin_v3/globals/palette.scss b/app/webpacker/css/admin_v3/globals/palette.scss index 560e1074ac..66e557b63a 100644 --- a/app/webpacker/css/admin_v3/globals/palette.scss +++ b/app/webpacker/css/admin_v3/globals/palette.scss @@ -4,17 +4,23 @@ $green: #9fc820 !default; // Green $teal: #008397 !default; // Teal (Allports) $orient: #006878 !default; // Orient (Cerulean) $dark-blue: #004e5b !default; // Dark Blue (Sherpa) +$pale-blue: #cee1f4; // Pale blue $red: #c85136 !default; // Red/Orange (Mojo) +$bright-orange: #ffa92e; // Bright orange $yellow: #ff9300 !default; // Yellow $mystic: #d9e8eb !default; // Mystic $lighter-grey: #f8f9fa !default; // Lighter grey -$light-grey: #eff1f2 !default; // Light grey -$near-black: #191c1d !default; // Near-black +$light-grey: #eff1f2 !default; // Light grey (Porcelain) +$medium-grey: #919191 !default; // Medium grey $dark-grey: #2e3132 !default; // Dark Grey +$near-black: #191c1d !default; // Near-black $fair-pink: #ffefeb !default; // Fair Pink $roof-terracotta: #b83b1f !default; // Roof Terracotta // Old colour variables for backwards compatibility +$spree-green: $green; +$spree-blue: $teal; +$spree-light-blue: #eff5fc; $color-1: $white; $color-2: $green; $color-3: $teal; diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss index 3c9ef5faa7..de8975e93d 100644 --- a/app/webpacker/css/admin_v3/globals/variables.scss +++ b/app/webpacker/css/admin_v3/globals/variables.scss @@ -23,6 +23,7 @@ $color-border: $light-grey !default; // Basic flash colors $color-success: $green !default; $color-notice: $yellow !default; +$color-warning: $red !default; $color-error: $red !default; // Table styles @@ -31,6 +32,7 @@ $color-tbl-cell-bg: $white !default; $color-tbl-cell-shadow: rgb(0, 0, 0, 0.15) !default; $color-tbl-thead-txt: $color-headers !default; $color-tbl-thead-bg: $light-grey !default; +$color-tbl-border: $pale-blue !default; $padding-tbl-cell: 12px 12px; $padding-tbl-cell-condensed: 10px 12px; $padding-tbl-cell-relaxed: 16px 12px; @@ -42,6 +44,7 @@ $color-btn-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px rg $color-btn-hover-bg: $orient !default; $color-btn-hover-text: $white !default; $color-btn-hover-border: $dark-blue !default; +$color-btn-disabled-bg: $light-grey !default; // Actions colors $color-action-edit-bg: very-light($color-success, 5 ) !default; @@ -72,6 +75,10 @@ $color-txt-brd: $color-border !default; $color-txt-text: $near-black !default; $color-txt-hover-brd: $teal !default; +// Modal colors +$color-modal-close-btn: $color-5 !default; +$color-modal-close-btn-hover: darken($color-5, 5%) !default; + // States label colors $color-ste-complete-bg: $color-success !default; $color-ste-complete-text: $white !default; diff --git a/app/webpacker/css/admin_v3/shared/typography.scss b/app/webpacker/css/admin_v3/shared/typography.scss index 467ee248be..b0d6d49cd3 100644 --- a/app/webpacker/css/admin_v3/shared/typography.scss +++ b/app/webpacker/css/admin_v3/shared/typography.scss @@ -210,7 +210,7 @@ dl { } .text-red { - color: $warning-red; + color: $color-warning; } input.text-big { diff --git a/app/webpacker/css/admin/variables.scss b/app/webpacker/css/admin_v3/variables.scss similarity index 74% rename from app/webpacker/css/admin/variables.scss rename to app/webpacker/css/admin_v3/variables.scss index 19221dc04e..457e5cb924 100644 --- a/app/webpacker/css/admin/variables.scss +++ b/app/webpacker/css/admin_v3/variables.scss @@ -1,15 +1,13 @@ -// Admin variables and colours +// Legacy admin variables and colours $spree-green: #9fc820; $spree-blue: #5498da; $spree-light-blue: #eff5fc; -$warning-red: $color-5; -$warning-orange: $color-5; +$color-warning: $color-5; $bright-orange: #ffa92e; $medium-grey: #919191; $pale-blue: #cee1f4; -$light-grey: #ccc; $admin-table-border: $pale-blue; diff --git a/app/webpacker/css/mail/all.scss b/app/webpacker/css/mail/all.scss index fb4d0596b2..087d2d1310 100644 --- a/app/webpacker/css/mail/all.scss +++ b/app/webpacker/css/mail/all.scss @@ -1,4 +1,3 @@ @import '../admin/globals/palette.scss'; -@import '../admin/variables'; @import 'email'; @import 'payments_list';