From bf9cd09462eb68d1ee1130bd15d87921fe0bd9e4 Mon Sep 17 00:00:00 2001 From: David Cook Date: Wed, 2 Aug 2023 16:28:31 +1000 Subject: [PATCH] Remove dependence on darkswarm variables There were all sorts of dependencies hiding in there, and it was overwriting some of the admin variables. Better to keep things separate and simple. I discovered that there was one legitimate reason for importing them though: for styling the trix editor. I can't think of a good way to safely import them without affecting the other variables, so I just hardcoded the colours for now. --- .../pagination_component/pagination_component.scss | 4 ++-- .../search_input_component/search_input_component.scss | 2 +- app/components/selector_component/selector_component.scss | 8 ++++---- .../selector_with_filter_component.scss | 4 ++-- app/webpacker/css/admin/change_type_form.scss | 1 - app/webpacker/css/admin/components/input.scss | 4 +--- app/webpacker/css/admin/components/save_bar.scss | 2 +- app/webpacker/css/admin/globals/palette.scss | 4 ++++ app/webpacker/css/admin/products_v3.scss | 7 +++++++ app/webpacker/css/admin/trix.scss | 6 +++--- app/webpacker/css/admin_v3/all.scss | 2 +- app/webpacker/css/admin_v3/globals/palette.scss | 2 +- app/webpacker/css/admin_v3/variables.scss | 1 - 13 files changed, 27 insertions(+), 20 deletions(-) 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/change_type_form.scss b/app/webpacker/css/admin/change_type_form.scss index 080a46b63b..ad2e4cc921 100644 --- a/app/webpacker/css/admin/change_type_form.scss +++ b/app/webpacker/css/admin/change_type_form.scss @@ -1,4 +1,3 @@ -@import "../darkswarm/branding"; @import "../darkswarm/mixins"; #change_type { 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/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/globals/palette.scss b/app/webpacker/css/admin/globals/palette.scss index 0c4bf1611c..776dc9cda8 100644 --- a/app/webpacker/css/admin/globals/palette.scss +++ b/app/webpacker/css/admin/globals/palette.scss @@ -5,3 +5,7 @@ $color-3: #5498DA !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/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/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_v3/all.scss b/app/webpacker/css/admin_v3/all.scss index 5aaa0610bb..4cbc555727 100644 --- a/app/webpacker/css/admin_v3/all.scss +++ b/app/webpacker/css/admin_v3/all.scss @@ -20,7 +20,7 @@ @import "../admin/globals/functions"; @import "globals/palette"; // admin_v3 @import "globals/variables"; // admin_v3 -@import "variables"; //admin_v3 +@import "../admin/variables"; @import "../admin/globals/mixins"; @import "mixins"; // admin_v3 diff --git a/app/webpacker/css/admin_v3/globals/palette.scss b/app/webpacker/css/admin_v3/globals/palette.scss index 560e1074ac..a8109f55f9 100644 --- a/app/webpacker/css/admin_v3/globals/palette.scss +++ b/app/webpacker/css/admin_v3/globals/palette.scss @@ -8,7 +8,7 @@ $red: #c85136 !default; // Red/Orange (Mojo) $yellow: #ff9300 !default; // Yellow $mystic: #d9e8eb !default; // Mystic $lighter-grey: #f8f9fa !default; // Lighter grey -$light-grey: #eff1f2 !default; // Light grey +$light-grey: #eff1f2 !default; // Light grey (Porcelain) $near-black: #191c1d !default; // Near-black $dark-grey: #2e3132 !default; // Dark Grey $fair-pink: #ffefeb !default; // Fair Pink diff --git a/app/webpacker/css/admin_v3/variables.scss b/app/webpacker/css/admin_v3/variables.scss index 89fd516f2b..26f18c8e90 100644 --- a/app/webpacker/css/admin_v3/variables.scss +++ b/app/webpacker/css/admin_v3/variables.scss @@ -9,7 +9,6 @@ $warning-orange: $color-5; $bright-orange: #ffa92e; $medium-grey: #919191; $pale-blue: #cee1f4; -$light-grey: #ccc; $admin-table-border: $pale-blue;