From 8cfab08f9e96509b0930a31d1392c3ee2d59aa3c Mon Sep 17 00:00:00 2001 From: Prikesh Savla Date: Sun, 11 Jan 2026 10:18:16 +0530 Subject: [PATCH 1/2] Refactor admin CSS: Promote v3 to canonical admin styles The Admin V3 styles are now the primary styles for the application. This change promotes the `admin_v3` directory to `admin` and archives the old styles. Changes: - Renamed `app/webpacker/css/admin_v3` to `app/webpacker/css/admin`. - Renamed the previous `app/webpacker/css/admin` to `app/webpacker/css/admin_legacy`. - Moved all files referenced by V3 styles from the legacy directory to the new `admin` directory. - Updated imports in `all.scss` to distinct local files instead of relative paths. - Cleaned up `admin_legacy` by removing files that are duplicates (by name or content) of the new admin styles. - Updated `admin-style-v3` pack to point to the new location. --- app/webpacker/css/admin/all.scss | 135 +++++++++++++++++ .../components/actions.scss | 0 .../components/buttons.scss | 0 .../components/date-picker.scss | 0 .../components/dropdown.scss | 0 .../components/messages.scss | 0 .../components/navigation.scss | 0 .../components/pagination.scss | 0 .../components/select2.scss | 0 .../components/sidebar-item.scss | 0 .../components/sidebar.scss | 0 .../components/spinner.scss | 0 .../components/tom_select.scss | 0 .../dashboard/dashboard_item.scss | 0 app/webpacker/css/admin/globals/palette.scss | 56 ++++--- .../globals/variables.scss | 0 .../css/{admin_v3 => admin}/mixins.scss | 0 .../pages/_unit_popout.scss | 0 .../pages/change_type_form.scss | 0 .../pages/dashboard-single-ent.scss | 0 .../pages/dfc_product_imports.scss | 0 .../pages/edit_variant.scss | 0 .../pages/enterprise_index_panels.scss | 0 .../pages/product_import.scss | 0 .../pages/product_preview.scss | 0 .../plugins/flatpickr-customization.scss | 0 .../{admin_v3 => admin}/plugins/powertip.scss | 0 app/webpacker/css/admin/products_v3.scss | 10 +- .../{admin_v3 => admin}/sections/orders.scss | 0 .../css/{admin_v3 => admin}/shared/forms.scss | 0 .../css/{admin_v3 => admin}/shared/icons.scss | 0 .../{admin_v3 => admin}/shared/layout.scss | 0 .../shared/question-mark-icon.scss | 0 .../{admin_v3 => admin}/shared/tables.scss | 0 .../shared/typography.scss | 0 .../terms_of_service_banner.scss | 0 .../css/{admin_v3 => admin}/variables.scss | 0 .../change_type_form.scss | 0 .../dashboard-single-ent.scss | 0 .../dashboard_item.scss | 0 .../css/{admin => admin_legacy}/dropdown.scss | 0 .../enterprise_index_panels.scss | 0 .../plugins/select2.scss | 0 .../product_import.scss | 0 .../css/{admin => admin_legacy}/select2.scss | 0 .../{admin => admin_legacy}/sidebar-item.scss | 0 app/webpacker/css/admin_v3/all.scss | 137 ------------------ .../css/admin_v3/globals/palette.scss | 38 ----- app/webpacker/packs/admin-style-v3.scss | 4 +- 49 files changed, 183 insertions(+), 197 deletions(-) create mode 100644 app/webpacker/css/admin/all.scss rename app/webpacker/css/{admin_v3 => admin}/components/actions.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/components/buttons.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/components/date-picker.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/components/dropdown.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/components/messages.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/components/navigation.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/components/pagination.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/components/select2.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/components/sidebar-item.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/components/sidebar.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/components/spinner.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/components/tom_select.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/dashboard/dashboard_item.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/globals/variables.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/mixins.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/pages/_unit_popout.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/pages/change_type_form.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/pages/dashboard-single-ent.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/pages/dfc_product_imports.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/pages/edit_variant.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/pages/enterprise_index_panels.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/pages/product_import.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/pages/product_preview.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/plugins/flatpickr-customization.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/plugins/powertip.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/sections/orders.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/shared/forms.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/shared/icons.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/shared/layout.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/shared/question-mark-icon.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/shared/tables.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/shared/typography.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/terms_of_service_banner.scss (100%) rename app/webpacker/css/{admin_v3 => admin}/variables.scss (100%) rename app/webpacker/css/{admin => admin_legacy}/change_type_form.scss (100%) rename app/webpacker/css/{admin => admin_legacy}/dashboard-single-ent.scss (100%) rename app/webpacker/css/{admin => admin_legacy}/dashboard_item.scss (100%) rename app/webpacker/css/{admin => admin_legacy}/dropdown.scss (100%) rename app/webpacker/css/{admin => admin_legacy}/enterprise_index_panels.scss (100%) rename app/webpacker/css/{admin => admin_legacy}/plugins/select2.scss (100%) rename app/webpacker/css/{admin => admin_legacy}/product_import.scss (100%) rename app/webpacker/css/{admin => admin_legacy}/select2.scss (100%) rename app/webpacker/css/{admin => admin_legacy}/sidebar-item.scss (100%) delete mode 100644 app/webpacker/css/admin_v3/all.scss delete mode 100644 app/webpacker/css/admin_v3/globals/palette.scss diff --git a/app/webpacker/css/admin/all.scss b/app/webpacker/css/admin/all.scss new file mode 100644 index 0000000000..24bd84b9b3 --- /dev/null +++ b/app/webpacker/css/admin/all.scss @@ -0,0 +1,135 @@ +// Admin v3 styles +// While in feature-toggle, we inherit all files from old admin design. +// Individual files may be copied in order to replace the old files. + +@import "assets/stylesheets/normalize"; +@import "assets/stylesheets/responsive-tables"; +@import "assets/stylesheets/jquery.powertip"; +@import "jquery-ui/themes/base/core"; +@import "jquery-ui/themes/base/button"; +@import "jquery-ui/themes/base/resizable"; +@import "assets/stylesheets/jquery-ui-theme"; +@import "jquery-ui/themes/base/dialog"; +@import "../shared/ng-tags-input.min"; +@import "assets/stylesheets/select2"; +@import "flatpickr/dist/flatpickr"; +@import "flatpickr/dist/themes/material_blue"; +@import "shortcut-buttons-flatpickr/dist/themes/light"; + +@import "globals/functions"; +@import "globals/palette"; // admin_v3 +@import "globals/variables"; // admin_v3 +@import "globals/mixins"; +@import "mixins"; // admin_v3 + +@import "plugins/font-awesome"; + +@import "../shared/variables/layout"; +@import "../shared/variables/variables"; +@import "../shared/utilities"; +@import "shared/typography"; // admin_v3 +@import "shared/tables"; // admin_v3 +@import "shared/icons"; // admin_v3 +@import "shared/forms"; // admin_v3 +@import "shared/layout"; // admin_v3 +@import "shared/scroll_bar"; + +@import "../shared/trix"; + +@import "plugins/flatpickr-customization"; // admin_v3 +@import "plugins/powertip"; // admin_v3 + +@import "sections/orders"; // admin_v3 +@import "sections/products"; + +@import "hacks/mozilla"; +@import "hacks/opera"; +@import "hacks/ie"; + +@import "components/actions"; // admin_v3 +@import "components/alert-box"; +@import "components/alert_row"; +@import "components/buttons"; // admin_v3 +@import "components/date-picker"; // admin_v3 +@import "components/dialogs"; +@import "components/input"; +@import "components/jquery_dialog"; +@import "components/messages"; // admin_v3 +@import "components/navigation"; // admin_v3 +@import "components/ng-cloak"; +@import "components/page_actions"; +@import "components/pagination"; // admin_v3 +@import "components/per_page_controls"; +@import "components/product_autocomplete"; +@import "components/progress"; +@import "components/save_bar"; +@import "components/sidebar"; // admin_v3 +@import "components/simple_modal"; +@import "components/states"; +@import "components/stripe_connect_button"; +@import "components/subscriptions_states"; +@import "components/table-filter"; +@import "components/table_loading"; +@import "components/timepicker"; +@import "components/todo"; +@import "components/tooltip"; +@import "components/wizard_progress"; + +@import "pages/enterprise_form"; +@import "pages/subscription_form"; +@import "pages/subscription_line_items"; +@import "pages/subscription_review"; + +@import "advanced_settings"; +@import "alert"; +@import "animations"; +@import "pages/change_type_form"; // admin_v3 +@import "connected_apps"; +@import "customers"; +@import "dashboard/dashboard_item"; // admin_v3 +@import "pages/dashboard-single-ent"; // admin_v3 +@import "dialog"; +@import "disabled"; +@import "components/dropdown"; // admin_v3 +@import "pages/edit_variant"; // admin_v3 +@import "pages/enterprise_index_panels"; // admin_v3 +@import "enterprises"; +@import "filters_and_controls"; +@import "grid"; +@import "icons"; +@import "index_panel_buttons"; +@import "index_panels"; +@import "modals"; +@import "offsets"; +@import "openfoodnetwork"; +@import "order_cycles"; +@import "orders"; +@import "pages/product_import"; // admin_v3 +@import "products"; +@import "products_v3"; +@import "question-mark-tooltip"; +@import "relationships"; +@import "reports"; +@import "components/select2"; // admin_v3 +@import "components/sidebar-item"; // admin_v3 +@import "side_menu"; +@import "tables"; +@import "tag_rules"; +@import "terms_of_service_files"; +@import "validation"; +@import "variant_overrides"; +@import "welcome"; + +@import "shared/question-mark-icon"; +@import "~tom-select/src/scss/tom-select.default"; +@import "components/tom_select"; // admin_v3 + +@import "modal_component/modal_component"; +@import "vertical_ellipsis_menu_component/vertical_ellipsis_menu_component"; // admin_v3 and only V3 +@import "tag_list_input_component/tag_list_input_component"; +@import "trix"; + +@import "terms_of_service_banner"; // admin_v3 + +@import "pages/product_preview"; // admin_v3 +@import "pages/dfc_product_imports"; // admin_v3 \ No newline at end of file diff --git a/app/webpacker/css/admin_v3/components/actions.scss b/app/webpacker/css/admin/components/actions.scss similarity index 100% rename from app/webpacker/css/admin_v3/components/actions.scss rename to app/webpacker/css/admin/components/actions.scss diff --git a/app/webpacker/css/admin_v3/components/buttons.scss b/app/webpacker/css/admin/components/buttons.scss similarity index 100% rename from app/webpacker/css/admin_v3/components/buttons.scss rename to app/webpacker/css/admin/components/buttons.scss diff --git a/app/webpacker/css/admin_v3/components/date-picker.scss b/app/webpacker/css/admin/components/date-picker.scss similarity index 100% rename from app/webpacker/css/admin_v3/components/date-picker.scss rename to app/webpacker/css/admin/components/date-picker.scss diff --git a/app/webpacker/css/admin_v3/components/dropdown.scss b/app/webpacker/css/admin/components/dropdown.scss similarity index 100% rename from app/webpacker/css/admin_v3/components/dropdown.scss rename to app/webpacker/css/admin/components/dropdown.scss diff --git a/app/webpacker/css/admin_v3/components/messages.scss b/app/webpacker/css/admin/components/messages.scss similarity index 100% rename from app/webpacker/css/admin_v3/components/messages.scss rename to app/webpacker/css/admin/components/messages.scss diff --git a/app/webpacker/css/admin_v3/components/navigation.scss b/app/webpacker/css/admin/components/navigation.scss similarity index 100% rename from app/webpacker/css/admin_v3/components/navigation.scss rename to app/webpacker/css/admin/components/navigation.scss diff --git a/app/webpacker/css/admin_v3/components/pagination.scss b/app/webpacker/css/admin/components/pagination.scss similarity index 100% rename from app/webpacker/css/admin_v3/components/pagination.scss rename to app/webpacker/css/admin/components/pagination.scss diff --git a/app/webpacker/css/admin_v3/components/select2.scss b/app/webpacker/css/admin/components/select2.scss similarity index 100% rename from app/webpacker/css/admin_v3/components/select2.scss rename to app/webpacker/css/admin/components/select2.scss diff --git a/app/webpacker/css/admin_v3/components/sidebar-item.scss b/app/webpacker/css/admin/components/sidebar-item.scss similarity index 100% rename from app/webpacker/css/admin_v3/components/sidebar-item.scss rename to app/webpacker/css/admin/components/sidebar-item.scss diff --git a/app/webpacker/css/admin_v3/components/sidebar.scss b/app/webpacker/css/admin/components/sidebar.scss similarity index 100% rename from app/webpacker/css/admin_v3/components/sidebar.scss rename to app/webpacker/css/admin/components/sidebar.scss diff --git a/app/webpacker/css/admin_v3/components/spinner.scss b/app/webpacker/css/admin/components/spinner.scss similarity index 100% rename from app/webpacker/css/admin_v3/components/spinner.scss rename to app/webpacker/css/admin/components/spinner.scss diff --git a/app/webpacker/css/admin_v3/components/tom_select.scss b/app/webpacker/css/admin/components/tom_select.scss similarity index 100% rename from app/webpacker/css/admin_v3/components/tom_select.scss rename to app/webpacker/css/admin/components/tom_select.scss diff --git a/app/webpacker/css/admin_v3/dashboard/dashboard_item.scss b/app/webpacker/css/admin/dashboard/dashboard_item.scss similarity index 100% rename from app/webpacker/css/admin_v3/dashboard/dashboard_item.scss rename to app/webpacker/css/admin/dashboard/dashboard_item.scss diff --git a/app/webpacker/css/admin/globals/palette.scss b/app/webpacker/css/admin/globals/palette.scss index 5a64d064f7..225b00b368 100644 --- a/app/webpacker/css/admin/globals/palette.scss +++ b/app/webpacker/css/admin/globals/palette.scss @@ -1,20 +1,38 @@ -// Basic color palette for admin -$spree-green: #9fc820; -$spree-blue: #5498da; +// Basic color palette for admin styles v3 +$white: #ffffff !default; // White +$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 (Porcelain) +$medium-light-grey: #babdbe !default; // Silver Sand +$medium-grey: #919191 !default; // Medium grey +$dark-grey: #2e3132 !default; // Dark Grey +$near-black: #191c1d !default; // Near-black (Shark) +$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; -$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 -$color-14: #f8f9fa !default; // Lighter grey - -$dark-grey: #333; -$light-grey: #ddd; -$near-black: #222; +$color-1: $white; +$color-2: $green; +$color-3: $teal; +$color-4: $dark-blue; +$color-5: $red; +$color-6: $yellow; +$color-7: $light-grey; +$color-8: $near-black; +$color-9: $dark-grey; +$color-10: $orient; +$color-11: $mystic; +$color-12: $fair-pink; +$color-13: $roof-terracotta; +$color-14: $lighter-grey; diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin/globals/variables.scss similarity index 100% rename from app/webpacker/css/admin_v3/globals/variables.scss rename to app/webpacker/css/admin/globals/variables.scss diff --git a/app/webpacker/css/admin_v3/mixins.scss b/app/webpacker/css/admin/mixins.scss similarity index 100% rename from app/webpacker/css/admin_v3/mixins.scss rename to app/webpacker/css/admin/mixins.scss diff --git a/app/webpacker/css/admin_v3/pages/_unit_popout.scss b/app/webpacker/css/admin/pages/_unit_popout.scss similarity index 100% rename from app/webpacker/css/admin_v3/pages/_unit_popout.scss rename to app/webpacker/css/admin/pages/_unit_popout.scss diff --git a/app/webpacker/css/admin_v3/pages/change_type_form.scss b/app/webpacker/css/admin/pages/change_type_form.scss similarity index 100% rename from app/webpacker/css/admin_v3/pages/change_type_form.scss rename to app/webpacker/css/admin/pages/change_type_form.scss diff --git a/app/webpacker/css/admin_v3/pages/dashboard-single-ent.scss b/app/webpacker/css/admin/pages/dashboard-single-ent.scss similarity index 100% rename from app/webpacker/css/admin_v3/pages/dashboard-single-ent.scss rename to app/webpacker/css/admin/pages/dashboard-single-ent.scss diff --git a/app/webpacker/css/admin_v3/pages/dfc_product_imports.scss b/app/webpacker/css/admin/pages/dfc_product_imports.scss similarity index 100% rename from app/webpacker/css/admin_v3/pages/dfc_product_imports.scss rename to app/webpacker/css/admin/pages/dfc_product_imports.scss diff --git a/app/webpacker/css/admin_v3/pages/edit_variant.scss b/app/webpacker/css/admin/pages/edit_variant.scss similarity index 100% rename from app/webpacker/css/admin_v3/pages/edit_variant.scss rename to app/webpacker/css/admin/pages/edit_variant.scss diff --git a/app/webpacker/css/admin_v3/pages/enterprise_index_panels.scss b/app/webpacker/css/admin/pages/enterprise_index_panels.scss similarity index 100% rename from app/webpacker/css/admin_v3/pages/enterprise_index_panels.scss rename to app/webpacker/css/admin/pages/enterprise_index_panels.scss diff --git a/app/webpacker/css/admin_v3/pages/product_import.scss b/app/webpacker/css/admin/pages/product_import.scss similarity index 100% rename from app/webpacker/css/admin_v3/pages/product_import.scss rename to app/webpacker/css/admin/pages/product_import.scss diff --git a/app/webpacker/css/admin_v3/pages/product_preview.scss b/app/webpacker/css/admin/pages/product_preview.scss similarity index 100% rename from app/webpacker/css/admin_v3/pages/product_preview.scss rename to app/webpacker/css/admin/pages/product_preview.scss diff --git a/app/webpacker/css/admin_v3/plugins/flatpickr-customization.scss b/app/webpacker/css/admin/plugins/flatpickr-customization.scss similarity index 100% rename from app/webpacker/css/admin_v3/plugins/flatpickr-customization.scss rename to app/webpacker/css/admin/plugins/flatpickr-customization.scss diff --git a/app/webpacker/css/admin_v3/plugins/powertip.scss b/app/webpacker/css/admin/plugins/powertip.scss similarity index 100% rename from app/webpacker/css/admin_v3/plugins/powertip.scss rename to app/webpacker/css/admin/plugins/powertip.scss diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss index 4dd6331775..7ea346638a 100644 --- a/app/webpacker/css/admin/products_v3.scss +++ b/app/webpacker/css/admin/products_v3.scss @@ -1,6 +1,6 @@ // Customisations for the new Bulk Edit Products page only // Scoped to containing div, because Turbo messes with body classes -@import "../admin_v3/pages/unit_popout"; +@import "pages/unit_popout"; #products_v3_page { #content > .row:first-child > .container:first-child { @@ -59,6 +59,7 @@ overflow: visible; background-color: white; } + .form-actions-wrapper2 { position: relative; // Stretch to cover table side borders @@ -157,6 +158,7 @@ tr:first-child td { border-top: 4px solid $color-tbl-bg; } + tr:last-child td { border-bottom: 1px solid $color-tbl-cell-shadow; } @@ -187,6 +189,7 @@ $columns: "image", "name", "sku", "unit_scale", "unit", "price", "on_hand", "producer", "category", "tax_category", "tags", "inherits_properties"; + @each $col in $columns { &.hide-#{$col} { .col-#{$col} { @@ -237,6 +240,7 @@ align-items: center; gap: 10px; } + .per-page { width: 9em; } @@ -286,6 +290,7 @@ .search-button { position: relative; + > input { padding-left: 30px; } @@ -295,6 +300,7 @@ // Blurred and non-clickable $disabled-blur: 1.5px; + .disabled-section { position: relative; @@ -346,6 +352,7 @@ from { transform: scaleY(1); } + to { transform: scaleY(0); } @@ -360,6 +367,7 @@ from { transform: scaleY(0); } + to { transform: scaleY(1); } diff --git a/app/webpacker/css/admin_v3/sections/orders.scss b/app/webpacker/css/admin/sections/orders.scss similarity index 100% rename from app/webpacker/css/admin_v3/sections/orders.scss rename to app/webpacker/css/admin/sections/orders.scss diff --git a/app/webpacker/css/admin_v3/shared/forms.scss b/app/webpacker/css/admin/shared/forms.scss similarity index 100% rename from app/webpacker/css/admin_v3/shared/forms.scss rename to app/webpacker/css/admin/shared/forms.scss diff --git a/app/webpacker/css/admin_v3/shared/icons.scss b/app/webpacker/css/admin/shared/icons.scss similarity index 100% rename from app/webpacker/css/admin_v3/shared/icons.scss rename to app/webpacker/css/admin/shared/icons.scss diff --git a/app/webpacker/css/admin_v3/shared/layout.scss b/app/webpacker/css/admin/shared/layout.scss similarity index 100% rename from app/webpacker/css/admin_v3/shared/layout.scss rename to app/webpacker/css/admin/shared/layout.scss diff --git a/app/webpacker/css/admin_v3/shared/question-mark-icon.scss b/app/webpacker/css/admin/shared/question-mark-icon.scss similarity index 100% rename from app/webpacker/css/admin_v3/shared/question-mark-icon.scss rename to app/webpacker/css/admin/shared/question-mark-icon.scss diff --git a/app/webpacker/css/admin_v3/shared/tables.scss b/app/webpacker/css/admin/shared/tables.scss similarity index 100% rename from app/webpacker/css/admin_v3/shared/tables.scss rename to app/webpacker/css/admin/shared/tables.scss diff --git a/app/webpacker/css/admin_v3/shared/typography.scss b/app/webpacker/css/admin/shared/typography.scss similarity index 100% rename from app/webpacker/css/admin_v3/shared/typography.scss rename to app/webpacker/css/admin/shared/typography.scss diff --git a/app/webpacker/css/admin_v3/terms_of_service_banner.scss b/app/webpacker/css/admin/terms_of_service_banner.scss similarity index 100% rename from app/webpacker/css/admin_v3/terms_of_service_banner.scss rename to app/webpacker/css/admin/terms_of_service_banner.scss diff --git a/app/webpacker/css/admin_v3/variables.scss b/app/webpacker/css/admin/variables.scss similarity index 100% rename from app/webpacker/css/admin_v3/variables.scss rename to app/webpacker/css/admin/variables.scss diff --git a/app/webpacker/css/admin/change_type_form.scss b/app/webpacker/css/admin_legacy/change_type_form.scss similarity index 100% rename from app/webpacker/css/admin/change_type_form.scss rename to app/webpacker/css/admin_legacy/change_type_form.scss diff --git a/app/webpacker/css/admin/dashboard-single-ent.scss b/app/webpacker/css/admin_legacy/dashboard-single-ent.scss similarity index 100% rename from app/webpacker/css/admin/dashboard-single-ent.scss rename to app/webpacker/css/admin_legacy/dashboard-single-ent.scss diff --git a/app/webpacker/css/admin/dashboard_item.scss b/app/webpacker/css/admin_legacy/dashboard_item.scss similarity index 100% rename from app/webpacker/css/admin/dashboard_item.scss rename to app/webpacker/css/admin_legacy/dashboard_item.scss diff --git a/app/webpacker/css/admin/dropdown.scss b/app/webpacker/css/admin_legacy/dropdown.scss similarity index 100% rename from app/webpacker/css/admin/dropdown.scss rename to app/webpacker/css/admin_legacy/dropdown.scss diff --git a/app/webpacker/css/admin/enterprise_index_panels.scss b/app/webpacker/css/admin_legacy/enterprise_index_panels.scss similarity index 100% rename from app/webpacker/css/admin/enterprise_index_panels.scss rename to app/webpacker/css/admin_legacy/enterprise_index_panels.scss diff --git a/app/webpacker/css/admin/plugins/select2.scss b/app/webpacker/css/admin_legacy/plugins/select2.scss similarity index 100% rename from app/webpacker/css/admin/plugins/select2.scss rename to app/webpacker/css/admin_legacy/plugins/select2.scss diff --git a/app/webpacker/css/admin/product_import.scss b/app/webpacker/css/admin_legacy/product_import.scss similarity index 100% rename from app/webpacker/css/admin/product_import.scss rename to app/webpacker/css/admin_legacy/product_import.scss diff --git a/app/webpacker/css/admin/select2.scss b/app/webpacker/css/admin_legacy/select2.scss similarity index 100% rename from app/webpacker/css/admin/select2.scss rename to app/webpacker/css/admin_legacy/select2.scss diff --git a/app/webpacker/css/admin/sidebar-item.scss b/app/webpacker/css/admin_legacy/sidebar-item.scss similarity index 100% rename from app/webpacker/css/admin/sidebar-item.scss rename to app/webpacker/css/admin_legacy/sidebar-item.scss diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss deleted file mode 100644 index 6e0d8da2aa..0000000000 --- a/app/webpacker/css/admin_v3/all.scss +++ /dev/null @@ -1,137 +0,0 @@ -// Admin v3 styles -// While in feature-toggle, we inherit all files from old admin design. -// Individual files may be copied in order to replace the old files. - -@import "assets/stylesheets/normalize"; -@import "assets/stylesheets/responsive-tables"; -@import "assets/stylesheets/jquery.powertip"; -@import "jquery-ui/themes/base/core"; -@import "jquery-ui/themes/base/button"; -@import "jquery-ui/themes/base/resizable"; -@import "assets/stylesheets/jquery-ui-theme"; -@import "jquery-ui/themes/base/dialog"; -@import "../shared/ng-tags-input.min"; -@import "assets/stylesheets/select2"; -@import "flatpickr/dist/flatpickr"; -@import "flatpickr/dist/themes/material_blue"; -@import "shortcut-buttons-flatpickr/dist/themes/light"; - -@import "../admin/globals/functions"; -@import "globals/palette"; // admin_v3 -@import "globals/variables"; // admin_v3 -@import "../admin/globals/mixins"; -@import "mixins"; // admin_v3 - -@import "../admin/plugins/font-awesome"; - -@import "../shared/variables/layout"; -@import "../shared/variables/variables"; -@import "../shared/utilities"; -@import "shared/typography"; // admin_v3 -@import "shared/tables"; // admin_v3 -@import "shared/icons"; // admin_v3 -@import "shared/forms"; // admin_v3 -@import "shared/layout"; // admin_v3 -@import "../admin/shared/scroll_bar"; - -@import "../shared/trix"; - -@import "plugins/flatpickr-customization"; // admin_v3 -@import "plugins/powertip"; // admin_v3 - -@import "sections/orders"; // admin_v3 -@import "../admin/sections/products"; - -@import "../admin/hacks/mozilla"; -@import "../admin/hacks/opera"; -@import "../admin/hacks/ie"; - -@import "components/actions"; // admin_v3 -@import "../admin/components/alert-box"; -@import "../admin/components/alert_row"; -@import "components/buttons"; // admin_v3 -@import "components/date-picker"; // admin_v3 -@import "../admin/components/dialogs"; -@import "../admin/components/input"; -@import "../admin/components/jquery_dialog"; -@import "components/messages"; // admin_v3 -@import "components/navigation"; // admin_v3 -@import "../admin/components/ng-cloak"; -@import "../admin/components/page_actions"; -@import "components/pagination"; // admin_v3 -@import "../admin/components/per_page_controls"; -@import "../admin/components/product_autocomplete"; -@import "../admin/components/progress"; -@import "../admin/components/save_bar"; -@import "components/sidebar"; // admin_v3 -@import "../admin/components/simple_modal"; -@import "../admin/components/states"; -@import "../admin/components/stripe_connect_button"; -@import "../admin/components/subscriptions_states"; -@import "../admin/components/table-filter"; -@import "../admin/components/table_loading"; -@import "../admin/components/timepicker"; -@import "../admin/components/todo"; -@import "../admin/components/tooltip"; -@import "../admin/components/wizard_progress"; - -@import "../admin/pages/enterprise_form"; -@import "../admin/pages/subscription_form"; -@import "../admin/pages/subscription_line_items"; -@import "../admin/pages/subscription_review"; - -@import "../admin/advanced_settings"; -@import "../admin/alert"; -@import "../admin/animations"; -@import "pages/change_type_form"; // admin_v3 -@import "../admin/connected_apps"; -@import "../admin/customers"; -@import "dashboard/dashboard_item"; // admin_v3 -@import "pages/dashboard-single-ent"; // admin_v3 -@import "../admin/dialog"; -@import "../admin/disabled"; -@import "components/dropdown"; // admin_v3 -@import "pages/edit_variant"; // admin_v3 -@import "pages/enterprise_index_panels"; // admin_v3 -@import "../admin/enterprises"; -@import "../admin/filters_and_controls"; -@import "../admin/grid"; -@import "../admin/icons"; -@import "../admin/index_panel_buttons"; -@import "../admin/index_panels"; -@import "../admin/modals"; -@import "../admin/offsets"; -@import "../admin/openfoodnetwork"; -@import "../admin/order_cycles"; -@import "../admin/orders"; -@import "pages/product_import"; // admin_v3 -@import "../admin/products"; -@import "../admin/products_v3"; -@import "../admin/question-mark-tooltip"; -@import "../admin/relationships"; -@import "../admin/reports"; -@import "components/select2"; // admin_v3 -@import "components/sidebar-item"; // admin_v3 -@import "../admin/side_menu"; -@import "../admin/tables"; -@import "../admin/tag_rules"; -@import "../admin/terms_of_service_files"; -@import "../admin/validation"; -@import "../admin/variant_overrides"; -@import "../admin/welcome"; - -@import "shared/question-mark-icon"; -@import "../admin/question-mark-tooltip"; - -@import "tom-select/src/scss/tom-select.default"; -@import "components/tom_select"; // admin_v3 - -@import "modal_component/modal_component"; -@import "vertical_ellipsis_menu_component/vertical_ellipsis_menu_component"; // admin_v3 and only V3 -@import "tag_list_input_component/tag_list_input_component"; -@import "admin/trix"; - -@import "terms_of_service_banner"; // admin_v3 - -@import "pages/product_preview"; // admin_v3 -@import "pages/dfc_product_imports"; // admin_v3 diff --git a/app/webpacker/css/admin_v3/globals/palette.scss b/app/webpacker/css/admin_v3/globals/palette.scss deleted file mode 100644 index 225b00b368..0000000000 --- a/app/webpacker/css/admin_v3/globals/palette.scss +++ /dev/null @@ -1,38 +0,0 @@ -// Basic color palette for admin styles v3 -$white: #ffffff !default; // White -$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 (Porcelain) -$medium-light-grey: #babdbe !default; // Silver Sand -$medium-grey: #919191 !default; // Medium grey -$dark-grey: #2e3132 !default; // Dark Grey -$near-black: #191c1d !default; // Near-black (Shark) -$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; -$color-4: $dark-blue; -$color-5: $red; -$color-6: $yellow; -$color-7: $light-grey; -$color-8: $near-black; -$color-9: $dark-grey; -$color-10: $orient; -$color-11: $mystic; -$color-12: $fair-pink; -$color-13: $roof-terracotta; -$color-14: $lighter-grey; diff --git a/app/webpacker/packs/admin-style-v3.scss b/app/webpacker/packs/admin-style-v3.scss index 170fae42e3..999b5a14fc 100644 --- a/app/webpacker/packs/admin-style-v3.scss +++ b/app/webpacker/packs/admin-style-v3.scss @@ -1,5 +1,5 @@ -@import "../css/admin_v3/all.scss"; +@import "../css/admin/all.scss"; -@import "../css/admin_v3/components/spinner.scss"; +@import "../css/admin/components/spinner.scss"; @import "../../../node_modules/trix/dist/trix.css"; From 5a9aa878312f8078c2a6ef4eb259723d5bbc5aad Mon Sep 17 00:00:00 2001 From: Prikesh Savla Date: Wed, 14 Jan 2026 19:27:51 +0530 Subject: [PATCH 2/2] Rename admin-style-v3 to admin-style and remove the admin_legacy styles folder that has no references --- app/views/spree/admin/shared/_head.html.haml | 2 +- app/webpacker/css/admin/all.scss | 2 +- .../css/admin_legacy/change_type_form.scss | 110 ------- .../admin_legacy/dashboard-single-ent.scss | 21 -- .../css/admin_legacy/dashboard_item.scss | 244 -------------- app/webpacker/css/admin_legacy/dropdown.scss | 271 ---------------- .../admin_legacy/enterprise_index_panels.scss | 120 ------- .../css/admin_legacy/plugins/select2.scss | 189 ----------- .../css/admin_legacy/product_import.scss | 299 ------------------ app/webpacker/css/admin_legacy/select2.scss | 63 ---- .../css/admin_legacy/sidebar-item.scss | 124 -------- .../{admin-style-v3.scss => admin-style.scss} | 0 12 files changed, 2 insertions(+), 1443 deletions(-) delete mode 100644 app/webpacker/css/admin_legacy/change_type_form.scss delete mode 100644 app/webpacker/css/admin_legacy/dashboard-single-ent.scss delete mode 100644 app/webpacker/css/admin_legacy/dashboard_item.scss delete mode 100644 app/webpacker/css/admin_legacy/dropdown.scss delete mode 100644 app/webpacker/css/admin_legacy/enterprise_index_panels.scss delete mode 100644 app/webpacker/css/admin_legacy/plugins/select2.scss delete mode 100644 app/webpacker/css/admin_legacy/product_import.scss delete mode 100644 app/webpacker/css/admin_legacy/select2.scss delete mode 100644 app/webpacker/css/admin_legacy/sidebar-item.scss rename app/webpacker/packs/{admin-style-v3.scss => admin-style.scss} (100%) diff --git a/app/views/spree/admin/shared/_head.html.haml b/app/views/spree/admin/shared/_head.html.haml index 0cf4946406..01387f98d3 100644 --- a/app/views/spree/admin/shared/_head.html.haml +++ b/app/views/spree/admin/shared/_head.html.haml @@ -14,7 +14,7 @@ = " - OFN #{t(:administration)}" %link{:href => "https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600&subset=latin,cyrillic,greek,vietnamese", :rel => "stylesheet", :type => "text/css"} -= stylesheet_pack_tag 'admin-style-v3', media: "screen, print" += stylesheet_pack_tag 'admin-style', media: "screen, print" = render "layouts/bugsnag_js" - if content_for? :minimal_js diff --git a/app/webpacker/css/admin/all.scss b/app/webpacker/css/admin/all.scss index 24bd84b9b3..6f8c7c57ea 100644 --- a/app/webpacker/css/admin/all.scss +++ b/app/webpacker/css/admin/all.scss @@ -132,4 +132,4 @@ @import "terms_of_service_banner"; // admin_v3 @import "pages/product_preview"; // admin_v3 -@import "pages/dfc_product_imports"; // admin_v3 \ No newline at end of file +@import "pages/dfc_product_imports"; // admin_v3 diff --git a/app/webpacker/css/admin_legacy/change_type_form.scss b/app/webpacker/css/admin_legacy/change_type_form.scss deleted file mode 100644 index 1880f029eb..0000000000 --- a/app/webpacker/css/admin_legacy/change_type_form.scss +++ /dev/null @@ -1,110 +0,0 @@ -#change_type { - section { - margin: 2em 0 0 0; - - &, - & * { - color: $spree-blue; - } - } - - .description { - background-color: $spree-light-blue; - margin-top: -2em; - padding: 4em 2em 2em 1em; - - @media all and (max-width: 786px) { - margin-bottom: 2em; - } - } - - .admin-cta { - border: 1px solid $spree-blue; - - @include border-radius(3px); - - text-align: center; - padding: 1em; - } - - .error { - display: block; - color: #f57e80; - border: 1px solid #f57e80; - background-color: #fde6e7; - - @include border-radius(3px); - - margin-bottom: 1em; - padding: 0.5em; - } - - a.selector { - position: relative; - border: 2px solid black; - text-align: center; - width: 100%; - cursor: pointer; - - &, - & * { - color: white; - } - - &:after, - &:before { - top: 100%; - left: 50%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - } - - &:after { - border-color: rgba(136, 183, 213, 0); - border-top-color: $spree-blue; - border-width: 12px; - margin-left: -12px; - } - - &:hover { - &:after { - border-top-color: $spree-green; - } - } - - &:before { - border-color: rgba(84, 152, 218, 0); - border-top-color: black; - border-width: 15px; - margin-left: -15px; - } - - .bottom { - background: repeating-linear-gradient( - 60deg, - rgba(84, 152, 218, 0), - rgba(84, 152, 218, 0) 5px, - rgba(255, 255, 255, 0.25) 5px, - rgba(255, 255, 255, 0.25) 10px - ); - margin-top: 1em; - margin-left: -15px; - margin-right: -15px; - padding: 5px; - text-transform: uppercase; - } - - &.selected { - background-color: black; - - &:after, - &:hover &:after { - border-top-color: black; - } - } - } -} diff --git a/app/webpacker/css/admin_legacy/dashboard-single-ent.scss b/app/webpacker/css/admin_legacy/dashboard-single-ent.scss deleted file mode 100644 index 93f242257b..0000000000 --- a/app/webpacker/css/admin_legacy/dashboard-single-ent.scss +++ /dev/null @@ -1,21 +0,0 @@ -.dashboard_item.single-ent { - .header { - padding: 0.77778em 1.33333em 0.77778em 0.77778em; - height: auto !important; - } - - .list { - .button.bottom { - width: 100%; - } - } -} - -.button.big { - width: 100%; - font-size: 1rem; - - @include border-radius(25px); - - padding: 15px; -} diff --git a/app/webpacker/css/admin_legacy/dashboard_item.scss b/app/webpacker/css/admin_legacy/dashboard_item.scss deleted file mode 100644 index 7522b91836..0000000000 --- a/app/webpacker/css/admin_legacy/dashboard_item.scss +++ /dev/null @@ -1,244 +0,0 @@ -div.dashboard_item { - margin-bottom: 30px; - - .centered { - text-align: center; - } - - .text-icon { - margin-top: 8px; - display: block; - font-size: 16px; - font-weight: bold; - color: #fff; - padding: 0px 6px; - border-radius: 10px; - - &.green { - background-color: $spree-green; - } - - &.warning { - background-color: $color-warning; - } - - &.orange { - background-color: $color-warning; - } - } - - div.header { - height: 50px; - border-radius: 6px 6px 0px 0px; - border: 1px solid $spree-blue; - position: relative; - - a[ofn-with-tip] { - position: absolute; - right: 5px; - bottom: 5px; - } - - &.warning { - border-color: $color-warning; - border-width: 3px; - - h3 { - color: $color-warning; - } - } - - &.orange { - border-color: $color-warning; - border-width: 3px; - - h3 { - color: $color-warning; - } - } - - h3.alpha { - height: 100%; - padding: 10px 5px 0px 3%; - } - - a { - border-radius: 0px 4px 0px 0px; - height: 100%; - padding: 15px 2px 0px 2px; - } - } - - .tabs { - height: 30px; - border: solid $spree-blue; - border-width: 0px 0px 1px 0px; - margin-top: 3px; - - div.dashboard_tab { - cursor: pointer; - height: 30px; - color: #fff; - background-color: $spree-blue; - padding: 5px 5px 0px 5px; - text-align: center; - font-weight: bold; - border: solid $spree-blue; - border-width: 1px 1px 0px 1px; - - &:hover { - background-color: $spree-green; - } - - &.selected { - color: $spree-blue; - background-color: #fff; - } - } - } - - .list { - max-height: 250px; - overflow-y: auto; - overflow-x: hidden; - - &:focus { - outline: none; - } - } - - .list-title { - border: solid $spree-blue; - border-width: 0px 1px 0px 1px; - - span { - font-size: 105%; - padding: 10px 0px; - font-weight: bold; - } - - span.alpha { - padding: 10px 2px 10px 5%; - } - } - - .list-item { - border: solid $spree-blue; - border-width: 0px 1px 0px 1px; - height: 41px; - - span.alpha { - font-weight: bold; - margin-left: -3px; - padding: 10px 2px 0px 5%; - } - - span.omega { - padding-right: 13px; - margin-right: -3px; - text-align: right; - } - - .icon-arrow-right { - padding-top: 6px; - font-size: 20px; - } - - .icon-warning-sign { - color: $color-warning; - font-size: 30px; - } - - .icon-remove-sign { - color: $color-warning; - font-size: 30px; - } - - .icon-ok-sign { - color: $spree-green; - font-size: 30px; - } - - &.orange { - color: $color-warning; - border: solid $color-warning; - } - - &.warning { - color: $color-warning; - border: solid $color-warning; - } - - &.orange, - &.warning { - border-width: 0px 3px 0px 3px; - } - - &.even { - background-color: #fff; - } - - &.odd { - background-color: $spree-light-blue; - } - - &.even, - &.odd { - &:hover { - color: #ffffff; - background-color: $spree-green; - - .icon-arrow-right { - color: #fff; - } - - .icon-remove-sign { - color: #fff; - } - - .icon-warning-sign { - color: #fff; - } - - .icon-ok-sign { - color: #fff; - } - - .text-icon { - &.green { - color: $spree-green; - background-color: #fff; - } - } - } - } - } - - a.button { - color: #fff; - font-size: 110%; - font-weight: bold; - text-align: center; - - &.orange { - background-color: $color-warning; - } - - &.blue { - background-color: $spree-blue; - } - - &.warning { - background-color: $color-warning; - } - - &:hover { - background-color: $spree-green; - } - - &.bottom { - border-radius: 0px 0px 6px 6px; - padding: 15px 15px; - } - } -} diff --git a/app/webpacker/css/admin_legacy/dropdown.scss b/app/webpacker/css/admin_legacy/dropdown.scss deleted file mode 100644 index ab3a61d5bb..0000000000 --- a/app/webpacker/css/admin_legacy/dropdown.scss +++ /dev/null @@ -1,271 +0,0 @@ -#content-header .ofn-drop-down { - border: none; - background-color: $spree-blue; - color: #fff; - float: none; - margin-left: 3px; -} - -.ofn-drop-down { - .dropdown-content { - display: none; - } - - .toggle-off { - display: none; - } - - &:active:not(.disabled), - &:focus:not(.disabled) { - .dropdown-content { - display: inline-block; - } - } -} - -.ofn-drop-down:hover, -.ofn-drop-down.expanded { - border: 1px solid #adadad; - color: #575757; -} - -@mixin ofn-drop-down-style { - padding: 7px 15px; - border-radius: 3px; - border: 1px solid #d4d4d4; - background-color: #f5f5f5; - display: block; - color: #828282; - cursor: pointer; - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - text-align: center; - margin-right: 10px; - - &.disabled { - opacity: 0.5; - pointer-events: none; - - &:hover { - cursor: default; - border-color: #d4d4d4; - color: #828282; - } - } -} - -.ofn-drop-down-with-prepend { - display: flex; - - &.right { - float: right; - } - - .ofn-drop-down { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - .ofn-drop-down-prepend { - @include ofn-drop-down-style; - - border-right: none; - margin-left: 0; - margin-right: 0; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - cursor: default; - } -} - -.ofn-drop-down { - @include ofn-drop-down-style; - - position: relative; - float: left; - - &.right { - float: right; - margin-right: 0px; - margin-left: 10px; - } - - &:hover, - &.expanded { - border: 1px solid #adadad; - color: #575757; - } - - > span { - width: auto; - text-transform: uppercase; - font-size: 85%; - font-weight: 600; - } - - .menu { - margin-top: 1px; - position: absolute; - float: none; - top: 100%; - left: 0px; - padding: 5px 0px; - border: 1px solid #adadad; - background-color: #ffffff; - box-shadow: 1px 3px 10px #888888; - z-index: 100; - white-space: nowrap; - - .filter { - padding-left: 5px; - padding-right: 5px; - position: relative; - - > input[type="text"] { - border: 1px solid rgba(18, 18, 18, 0.1); - width: 100%; - padding-left: 30px; - padding-top: 10px; - padding-bottom: 10px; - font-size: 13px; - color: #454545; - } - - &:after { - content: "\f002"; - font-family: FontAwesome; - position: absolute; - left: 15px; - top: 13px; - color: #454545; - } - } - - .menu_item { - margin: 0px; - padding: 2px 10px; - color: #454545; - text-align: left; - display: block; - - .check { - display: inline-block; - text-align: center; - width: 40px; - &:before { - content: "\00a0"; - } - } - - .name { - display: inline-block; - padding: 0px 15px 0px 0px; - } - - &.selected { - .check:before { - content: "\2713"; - } - } - - &.hidden { - display: none; - } - } - - .menu_item:hover { - background-color: #ededed; - } - } - - > details { - // Override padding on ofn-drop-down-style - margin: -7px -15px; - padding: 7px 15px; - } - - > details > summary { - display: inline-block; - list-style: none; - width: auto; - text-transform: uppercase; - font-size: 85%; - font-weight: 600; - // Override padding on ofn-drop-down-style to increase clickable area - margin: -8px -15px; - padding: 8px 15px; - } - - > details > summary:after { - content: "\f0d7"; - font-family: FontAwesome; - } - - > details[open] > summary:after { - content: "\f0d8"; - font-family: FontAwesome; - } -} - -.ofn-drop-down-v2 { - border: 1px solid $pale-blue; - background-color: white; - padding: 0px; - - &:hover { - border-color: $spree-blue; - } - - .ofn-drop-down-label { - color: $color-3; - padding: 10px; - width: 235px; - display: flex; - justify-content: space-between; - - &:hover { - color: $color-3; - } - - .label { - padding-right: 10px; - } - - .icon-caret-down, - .icon-caret-up { - padding-right: 0px; - } - } - - .menu { - width: 100%; - } - - .menu_items { - max-height: 200px; - overflow-y: scroll; - - .menu_item { - margin-bottom: 5px; - color: #454545; - font-weight: 400; - cursor: pointer; - padding-top: 4px; - padding-bottom: 5px; - text-transform: uppercase; - font-size: 85%; - } - } -} - -.ofn-drop-down.ofn-drop-down-v2 { - // Add very specific styling here for components that are in transition: - // ie. the ones using the two classes above - .ofn-drop-down-label { - padding-top: 7px; - padding-bottom: 7px; - } -} diff --git a/app/webpacker/css/admin_legacy/enterprise_index_panels.scss b/app/webpacker/css/admin_legacy/enterprise_index_panels.scss deleted file mode 100644 index 087f318042..0000000000 --- a/app/webpacker/css/admin_legacy/enterprise_index_panels.scss +++ /dev/null @@ -1,120 +0,0 @@ -.enterprise_package_panel, -.enterprise_producer_panel { - .info { - p { - font-size: 1rem; - margin: 10px 0px; - } - } - - a.selector { - display: block; - position: relative; - margin-bottom: 20px; - border: 2px solid black; - text-align: center; - // width: 100%; - cursor: pointer; - &, - & * { - color: white; - } - &:hover { - &:after { - border-top-color: $spree-green; - } - } - &.disabled { - background-color: #c1c1c1; - } - .bottom { - background: repeating-linear-gradient( - 60deg, - rgba(84, 152, 218, 0), - rgba(84, 152, 218, 0) 5px, - rgba(255, 255, 255, 0.25) 5px, - rgba(255, 255, 255, 0.25) 10px - ); - margin-top: 1em; - margin-left: -15px; - margin-right: -15px; - padding: 5px; - text-transform: uppercase; - } - &.selected { - background-color: #000000; - - &:after { - top: 50%; - left: 0; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - - border-top: 20px solid transparent; - border-bottom: 20px solid transparent; - border-right: 20px solid #000000; - margin-top: -20px; - margin-left: -20px; - } - } - } -} - -.enterprise_status_panel { - .status-ok { - margin: 30px 0px; - i.icon-ok-sign { - color: $spree-green; - font-size: 1.5rem; - } - } - - td.description { - font-size: 0.9rem; - } - - td.severity { - text-align: center; - - i { - font-size: 1.5rem; - - &.issue { - color: $color-warning; - } - - &.warning { - color: #ff9848; - } - } - } -} - -tags-input .tags li.tag-item { - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - -o-border-radius: 3px; - border-radius: 3px; - margin: 2px 0 2px 3px; - background-image: none; - background-color: #5fa5e8; - border: none; - box-shadow: none; - color: white !important; - font-size: 85%; - height: 25px; -} - -tags-input .tags .tag-item .remove-button { - color: white; -} - -table th.actions .no-text[class*="icon-"], -table td.actions .no-text[class*="icon-"] { - cursor: pointer; -} diff --git a/app/webpacker/css/admin_legacy/plugins/select2.scss b/app/webpacker/css/admin_legacy/plugins/select2.scss deleted file mode 100644 index 6ef2d5887b..0000000000 --- a/app/webpacker/css/admin_legacy/plugins/select2.scss +++ /dev/null @@ -1,189 +0,0 @@ -.select2-container { - &:hover .select2-choice, - &.select2-container-active .select2-choice { - background-color: $color-sel-hover-bg !important; - border-color: $color-sel-hover-bg !important; - } - .select2-choice { - background-image: none !important; - background-color: $color-sel-bg; - border: none !important; - box-shadow: none !important; - @include border-radius($border-radius); - color: $color-1 !important; - font-size: 90%; - height: 31px; - line-height: inherit !important; - padding: 5px 15px 7px; - - span { - display: block; - padding: 2px; - } - - .select2-search-choice-close { - background-image: none !important; - font-size: 100% !important; - @extend .icon-remove; - @extend [class^="icon-"], :before; - margin-top: 2px; - } - } - - &.select2-container-active { - .select2-choice { - box-shadow: none !important; - } - - &.select2-dropdown-open .select2-choice div b { - @extend .icon-caret-up; - } - } -} - -.select2-drop { - border-color: $color-sel-hover-bg; - box-shadow: none !important; - z-index: 1000000; - - &.select2-drop-above { - border-color: $color-sel-hover-bg; - } -} - -.select2-search { - @extend .icon-search; - - font-size: 100%; - color: darken($color-border, 15); - padding: 0 9px 0 0; - - &:before { - @extend [class^="icon-"], :before; - - position: absolute; - top: 13px; - left: 13px; - } - - input { - @extend input, [type="text"]; - - padding: 6px 0 6px 25px; - margin: 5px 0 0 5px; - font-family: $base-font-family; - font-size: 90%; - box-shadow: none; - background-image: none; - } -} - -.select2-container .select2-choice .select2-arrow { - background-image: none; - background: transparent; - border: 0; - - b { - padding-top: 7px; - display: block; - width: 100%; - height: 100%; - background: none; - font-family: FontAwesome; - font-weight: 200 !important; - - &:before { - content: "\f0d7"; - } - } -} - -.select2-results { - padding-left: 0 !important; - - li { - font-size: 85% !important; - - &.select2-highlighted { - .select2-result-label { - &, - h6 { - color: $color-1 !important; - } - } - } - - .select2-result-label { - color: $color-body-text; - min-height: 22px; - clear: both; - overflow: auto; - } - - &.select2-no-results, - &.select2-searching { - padding: 5px; - background-color: transparent; - color: $color-body-text; - text-align: center; - font-weight: $font-weight-bold; - text-transform: uppercase; - } - } - - .select2-highlighted { - background-color: $color-sel-bg; - } -} - -.select2-container-multi { - &.select2-container-active, - &.select2-dropdown-open { - .select2-choices { - border-color: $color-sel-hover-bg !important; - box-shadow: none; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - } - .select2-choices { - @extend input, [type="text"]; - padding: 6px 3px 3px 3px; - box-shadow: none; - background-image: none !important; - - .select2-search-choice { - @include border-radius($border-radius); - margin: 0 0 3px 3px; - background-image: none; - background-color: $color-sel-bg; - border: none; - box-shadow: none; - color: $color-1 !important; - font-size: 85%; - - &:hover { - background-color: $color-sel-hover-bg; - } - - .select2-search-choice-close { - background-image: none !important; - font-size: 85% !important; - @extend .icon-remove; - @extend [class^="icon-"], :before; - margin-left: 2px; - color: $color-1; - } - } - } -} - -label .select2-container { - margin-top: -6px; - .select2-choice { - span { - text-transform: none; - font-weight: normal; - } - } -} diff --git a/app/webpacker/css/admin_legacy/product_import.scss b/app/webpacker/css/admin_legacy/product_import.scss deleted file mode 100644 index 5c6ccc2276..0000000000 --- a/app/webpacker/css/admin_legacy/product_import.scss +++ /dev/null @@ -1,299 +0,0 @@ -$pi-red: $color-warning; -$pi-green: lighten($spree-green, 10%); -$pi-orange: $bright-orange; -$pi-blue: lighten($spree-blue, 10%); -$pi-light-yellow: #faffaf; - -// scss-lint:disable NestingDepth - -div.panel-section { - .error { - color: $pi-red; - } - .warning { - color: $bright-orange; - } - .success { - color: $pi-green; - } - .info { - color: #68b7c0; - } - - div.panel-header { - width: 100%; - clear: both; - float: left; - padding: 0.5em; - - div { - font-size: 1.25em; - float: left; - } - - div.header-caret { - width: 2em; - text-align: center; - min-height: 0.1em; //Empty div fix - } - - div.header-icon { - width: 2.5em; - text-align: center; - padding-top: 0.18em; - - i { - font-size: 1.5em; - line-height: 0.9em; - } - } - - div.header-count { - min-width: 2em; - text-align: right; - padding-right: 0.5em; - } - - div.header-description { - width: auto; - } - } - - div.panel-header:hover { - cursor: pointer; - background-color: #f7f7f7; - } - - div.panel-header.active { - background-color: #efefef; - text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.75); - } - - div.panel-content { - width: 100%; - clear: both; - margin-bottom: 0.5em; - background-color: #f9f9f9; - padding: 1.5em; - - div.table-wrap { - width: 100%; - overflow: auto; - border-right: 1px solid #ceede3; - max-height: 23em; - } - - table { - background-color: white; - margin-bottom: 0; - td, - th { - white-space: nowrap; - } - - tr { - &.error { - color: #c84c4c; - } - - &:hover td.invalid { - background-color: darken(#f05c51, 5%); - } - - i { - display: block; - margin-bottom: -0.2em; - font-size: 1.4em !important; - } - } - - td { - &.invalid { - background-color: #f05c51; - box-shadow: inset 0px 0px 1px red; - color: white; - } - } - } - - div.import-errors { - margin-bottom: 0.85em; - - p.line { - font-size: 1.15em; - margin-bottom: 0.2em; - color: #577084; - } - p.error { - color: #cb1b1b; - margin-bottom: 0.2em; - } - } - } -} - -br.panels.clearfix { - clear: both; -} - -.panel-section.import-settings { - .header-description { - padding-left: 1em; - } - - span.header-error { - font-size: 0.85em; - color: $pi-red; - } - - .select2-search { - display: none; - } - - .select2-results { - margin: 0; - } -} - -.post-save-results { - p { - font-size: 1.25em; - margin-bottom: 0.5em; - - strong { - margin-right: 0.2em; - min-width: 1.8em; - display: inline-block; - text-align: right; - } - - i { - font-size: 1.4em; - vertical-align: middle; - position: relative; - } - - i.fa-check-circle { - color: $pi-green; - } - i.fa-info-circle { - color: $pi-blue; - } - } - - p.save-error { - color: #ee4728; - font-size: 1.05em; - margin-top: 0.4em; - } -} - -form.product-import, -div.post-save-results, -div.import-wrapper { - input[type="submit"] { - margin-right: 0.5em; - } - input[type="submit"], - button, - a.button { - min-width: 8em; - text-align: center; - } -} - -div.import-wrapper { - .alert-box { - margin: 0 0 1.75em; - } - - .ng-hide:not(.ng-hide-animate) { - // We have to use !important here to override angular's display properties - // scss-lint:disable ImportantRule - display: block !important; - position: absolute; - opacity: 0; - top: -9999px; - left: -9999px; - } - - .ng-hide-add, - .ng-hide-remove, - .ng-hide-animate { - transition: all 0.4s ease-in-out; - } - - form.product-import, - div.save-results { - transition: all 0.4s ease-in-out; - } - - div.progress-interface { - text-align: center; - transition: all 0.4s ease-in-out; - - button:disabled { - background: #ccc !important; - } - } - - .post-save-results { - a.button { - float: left; - margin-right: 0.5em; - } - } -} - -div.progress-bar { - height: 25px; - width: 30em; - max-width: 90%; - margin: 1em auto; - background: #f7f7f7; - padding: 3px; - border-radius: 0.3em; - border: 1px solid #eee; - - span.progress-track { - display: block; - background: lighten($pi-green, 10%); - height: 100%; - border-radius: 0.3em; - box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); - transition: width 0.3s ease-in-out; - } -} - -#upload-sidebar { - float: right; - background-color: lighten($spree-light-blue, 2.5%); - border: 1px solid lighten($pale-blue, 2.5%); - width: 50%; - padding: 0 1.5em 1.5em; - - h4, - h5, - h6, - p { - margin: 1.25em 0 1em; - } - - a.download { - display: block; - font-size: 1.05em; - margin-bottom: 0.5em; - - i { - margin-right: 0.25em; - } - } - - span.category { - display: inline-block; - background-color: $pi-blue; - color: white; - padding: 0.3em 0.6em; - margin: 0 0.4em 0.5em 0; - } -} diff --git a/app/webpacker/css/admin_legacy/select2.scss b/app/webpacker/css/admin_legacy/select2.scss deleted file mode 100644 index f076e28335..0000000000 --- a/app/webpacker/css/admin_legacy/select2.scss +++ /dev/null @@ -1,63 +0,0 @@ -.select2-container { - .select2-choice { - .select2-search-choice-close { - display: none !important; - } - .select2-arrow { - width: 22px; - border: none; - background-image: none; - background-color: transparent; - } - } - - &.light { - .select2-choice { - background-color: #ffffff; - font-weight: normal; - color: $spree-blue !important; - border: 1px solid $color-border !important; - } - - &:hover, - &.select2-container-active { - .select2-choice { - background-color: #ffffff !important; - border: 1px solid $spree-green !important; - - .select2-arrow { - &:before { - color: $spree-blue; - } - } - } - } - } - - &.select2-container-multi { - .select2-search-field { - max-height: 20px; - input { - padding: 0 !important; - margin: 0 0 0 5px !important; - } - } - .select2-search-choice { - display: flex; - align-items: center; - justify-content: center; - padding-left: 7px; - - .select2-search-choice-close { - position: relative; - order: -1; - width: auto; - left: 0; - top: 0; - margin: 0; - padding: 0; - font-size: 100% !important; - } - } - } -} diff --git a/app/webpacker/css/admin_legacy/sidebar-item.scss b/app/webpacker/css/admin_legacy/sidebar-item.scss deleted file mode 100644 index 499c4e76e9..0000000000 --- a/app/webpacker/css/admin_legacy/sidebar-item.scss +++ /dev/null @@ -1,124 +0,0 @@ -div.sidebar_item { - margin-bottom: 30px; - - .centered { - text-align: center; - } - - div.header { - font-size: 105%; - color: #fff; - padding: 10px 0px; - position: relative; - - &.blue { - background-color: $spree-blue; - } - - &.red { - background-color: $color-warning; - } - } - - .list { - max-height: 400px; - overflow-y: auto; - overflow-x: hidden; - - &.red { - color: $color-warning; - - .list-item { - border: solid $color-warning; - border-width: 0px 3px 0px 3px; - - a.alpha, - span.alpha { - margin-left: -3px; - } - - &.odd { - background-color: #fcf6ef; - - &:hover { - background-color: $spree-green; - } - } - } - - a { - color: $color-warning; - } - } - } - - .list-item { - .icon-arrow-right { - padding-top: 6px; - font-size: 20px; - } - - border: solid $spree-blue; - border-width: 0px 1px 0px 1px; - - a.alpha, - span.alpha { - font-weight: bold; - margin-left: -1px; - padding: 10px 2px 10px 5%; - overflow: hidden; - text-overflow: ellipsis; - } - - span.omega { - padding: 8px 18px 8px 0px; - margin-right: -3px; - text-align: right; - } - - .icon-remove-sign { - color: $color-warning; - font-size: 18px; - } - - &.even { - background-color: #fff; - } - - &.odd { - background-color: $spree-light-blue; - } - - &.even, - &.odd { - &:hover { - color: #ffffff; - background-color: $spree-green; - - a { - color: #ffffff; - } - } - } - } - - a.button { - color: #fff; - padding: 15px 15px; - font-weight: bold; - text-align: center; - border-radius: 0px; - - &.blue { - background-color: $spree-blue; - } - - &.red { - background-color: $color-warning; - } - - &:hover { - background-color: $spree-green; - } - } -} diff --git a/app/webpacker/packs/admin-style-v3.scss b/app/webpacker/packs/admin-style.scss similarity index 100% rename from app/webpacker/packs/admin-style-v3.scss rename to app/webpacker/packs/admin-style.scss