From 3967f54533f173160efd96e7c599d54485d060ad Mon Sep 17 00:00:00 2001 From: David Cook Date: Thu, 1 Jun 2023 12:11:42 +1000 Subject: [PATCH 01/10] Use different variables and table styles for admin_v3 --- .prettierignore | 1 + app/webpacker/css/admin_v3/all.scss | 4 +- .../css/admin_v3/globals/variables.scss | 142 ++++++++++++ app/webpacker/css/admin_v3/shared/tables.scss | 213 ++++++++++++++++++ 4 files changed, 358 insertions(+), 2 deletions(-) create mode 100644 app/webpacker/css/admin_v3/globals/variables.scss create mode 100644 app/webpacker/css/admin_v3/shared/tables.scss diff --git a/.prettierignore b/.prettierignore index 4b79688005..1643a09f8a 100644 --- a/.prettierignore +++ b/.prettierignore @@ -15,6 +15,7 @@ postcss.config.js # Enabled: most of admin /app/webpacker/css/admin/globals/ /app/webpacker/css/admin/shared/ +/app/webpacker/css/admin_v3/globals/ /app/webpacker/css/darkswarm/ /app/webpacker/css/mail/ /app/webpacker/css/shared/ diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss index 4756a4d133..7552447d8f 100644 --- a/app/webpacker/css/admin_v3/all.scss +++ b/app/webpacker/css/admin_v3/all.scss @@ -19,7 +19,7 @@ @import "../admin/globals/functions"; @import "globals/palette"; // admin_v3 -@import "../admin/globals/variables"; +@import "globals/variables"; // admin_v3 @import "../admin/variables"; @import "../admin/globals/mixins"; @@ -29,7 +29,7 @@ @import "../shared/variables/variables"; @import "../shared/utilities"; @import "../admin/shared/typography"; -@import "../admin/shared/tables"; +@import "shared/tables"; // admin_v3 @import "../admin/shared/icons"; @import "../admin/shared/forms"; @import "shared/layout"; // admin_v3 diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss new file mode 100644 index 0000000000..167d5fe2f6 --- /dev/null +++ b/app/webpacker/css/admin_v3/globals/variables.scss @@ -0,0 +1,142 @@ +// ------------------------------------------------------------- +// Variables used in all other files +//-------------------------------------------------------------- + +// Fonts +//-------------------------------------------------------------- +$base-font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; + +// Colors +//-------------------------------------------------------------- + +// Body base colors +$color-body-bg: $color-1 !default; +$color-body-text: $color-4 !default; +$color-headers: $color-4 !default; +$color-link: $color-3 !default; +$color-link-hover: $color-2 !default; +$color-link-active: $color-2 !default; +$color-link-focus: $color-2 !default; +$color-link-visited: $color-3 !default; +$color-border: very-light($color-3, 12) !default; + +// Basic flash colors +$color-success: $color-2 !default; +$color-notice: $color-6 !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; + +// 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; + +// Actions colors +$color-action-edit-bg: very-light($color-success, 5 ) !default; +$color-action-edit-brd: very-light($color-success, 20 ) !default; +$color-action-clone-bg: very-light($color-notice, 5 ) !default; +$color-action-clone-brd: very-light($color-notice, 15 ) !default; +$color-action-remove-bg: very-light($color-error, 5 ) !default; +$color-action-remove-brd: very-light($color-error, 10 ) !default; +$color-action-void-bg: very-light($color-error, 10 ) !default; +$color-action-void-brd: very-light($color-error, 20 ) !default; +$color-action-cancel-bg: very-light($color-notice, 10 ) !default; +$color-action-cancel-brd: very-light($color-notice, 20 ) !default; +$color-action-capture-bg: very-light($color-success, 5 ) !default; +$color-action-capture-brd: very-light($color-success, 20 ) !default; +$color-action-save-bg: very-light($color-success, 5 ) !default; +$color-action-save-brd: very-light($color-success, 20 ) !default; +$color-action-mail-bg: very-light($color-success, 5 ) !default; +$color-action-mail-brd: very-light($color-success, 20 ) !default; + +// Select2 select field colors +$color-sel-bg: $color-3 !default; +$color-sel-text: $color-1 !default; +$color-sel-hover-bg: $color-2 !default; +$color-sel-hover-text: $color-1 !default; + +// Text inputs colors +$color-txt-brd: $color-border !default; +$color-txt-text: $color-3 !default; +$color-txt-hover-brd: $color-2 !default; + +// States label colors +$color-ste-complete-bg: $color-success !default; +$color-ste-complete-text: $color-1 !default; +$color-ste-completed-bg: $color-success !default; +$color-ste-completed-text: $color-1 !default; +$color-ste-sold-bg: $color-success !default; +$color-ste-sold-text: $color-1 !default; +$color-ste-pending-bg: $color-notice !default; +$color-ste-pending-text: $color-1 !default; +$color-ste-requires_authorization-bg: $color-notice !default; +$color-ste-requires_authorization-text: $color-1 !default; +$color-ste-awaiting_return-bg: $color-notice !default; +$color-ste-awaiting_return-text: $color-1 !default; +$color-ste-returned-bg: $color-notice !default; +$color-ste-returned-text: $color-1 !default; +$color-ste-credit_owed-bg: $color-notice !default; +$color-ste-credit_owed-text: $color-1 !default; +$color-ste-paid-bg: $color-success !default; +$color-ste-paid-text: $color-1 !default; +$color-ste-shipped-bg: $color-success !default; +$color-ste-shipped-text: $color-1 !default; +$color-ste-balance_due-bg: $color-notice !default; +$color-ste-balance_due-text: $color-1 !default; +$color-ste-backorder-bg: $color-notice !default; +$color-ste-backorder-text: $color-1 !default; +$color-ste-none-bg: $color-error !default; +$color-ste-none-text: $color-1 !default; +$color-ste-ready-bg: $color-success !default; +$color-ste-ready-text: $color-1 !default; +$color-ste-void-bg: $color-error !default; +$color-ste-void-text: $color-1 !default; +$color-ste-canceled-bg: $color-error !default; +$color-ste-canceled-text: $color-1 !default; +$color-ste-address-bg: $color-error !default; +$color-ste-address-text: $color-1 !default; +$color-ste-checkout-bg: $color-notice !default; +$color-ste-checkout-text: $color-1 !default; +$color-ste-cart-bg: $color-notice !default; +$color-ste-cart-text: $color-1 !default; +$color-ste-payment-bg: $color-error !default; +$color-ste-payment-text: $color-1 !default; +$color-ste-delivery-bg: $color-success !default; +$color-ste-delivery-text: $color-1 !default; +$color-ste-confirmation-bg: $color-error !default; +$color-ste-confirmation-text: $color-1 !default; +$color-ste-active-bg: $color-success !default; +$color-ste-active-text: $color-1 !default; +$color-ste-inactive-bg: $color-notice !default; +$color-ste-inactive-text: $color-1 !default; + +// Available states +$states: completed, complete, sold, pending, awaiting_return, returned, credit_owed, paid, shipped, balance_due, backorder, checkout, cart, address, delivery, payment, confirmation, canceled, ready, void, requires_authorization, active, inactive !default; +$states-bg-colors: $color-ste-completed-bg, $color-ste-complete-bg, $color-ste-sold-bg, $color-ste-pending-bg, $color-ste-awaiting_return-bg, $color-ste-returned-bg, $color-ste-credit_owed-bg, $color-ste-paid-bg, $color-ste-shipped-bg, $color-ste-balance_due-bg, $color-ste-backorder-bg, $color-ste-checkout-bg, $color-ste-cart-bg, $color-ste-address-bg, $color-ste-delivery-bg, $color-ste-payment-bg, $color-ste-confirmation-bg, $color-ste-canceled-bg, $color-ste-ready-bg, $color-ste-void-bg, $color-ste-requires_authorization-bg, $color-ste-active-bg, $color-ste-inactive-bg !default; +$states-text-colors: $color-ste-completed-text, $color-ste-complete-text, $color-ste-sold-text, $color-ste-pending-text, $color-ste-awaiting_return-text, $color-ste-returned-text, $color-ste-credit_owed-text, $color-ste-paid-text, $color-ste-shipped-text, $color-ste-balance_due-text, $color-ste-backorder-text, $color-ste-checkout-text, $color-ste-cart-text, $color-ste-address-text, $color-ste-delivery-text, $color-ste-payment-text, $color-ste-confirmation-text, $color-ste-canceled-text, $color-ste-ready-text, $color-ste-void-text, $color-ste-requires_authorization-text, $color-ste-active-text, $color-ste-inactive-text !default; + +// Available actions +$actions: edit, clone, remove, void, capture, save, cancel, mail !default; +$actions-bg-colors: $color-action-edit-bg, $color-action-clone-bg, $color-action-remove-bg, $color-action-void-bg, $color-action-capture-bg, $color-action-save-bg, $color-action-cancel-bg, $color-action-mail-bg !default; +$actions-brd-colors: $color-action-edit-brd, $color-action-clone-brd, $color-action-remove-brd, $color-action-void-brd, $color-action-capture-brd, $color-action-save-brd, $color-action-cancel-brd, $color-action-mail-brd !default; + +// Sizes +//-------------------------------------------------------------- +$body-font-size: 13px !default; + +$h6-size: $body-font-size + 2 !default; +$h5-size: $h6-size + 2 !default; +$h4-size: $h5-size + 2 !default; +$h3-size: $h4-size + 2 !default; +$h2-size: $h3-size + 2 !default; +$h1-size: $h2-size + 2 !default; + +$border-radius: 3px !default; + +$font-weight-bold: 600 !default; +$font-weight-normal: 400 !default; diff --git a/app/webpacker/css/admin_v3/shared/tables.scss b/app/webpacker/css/admin_v3/shared/tables.scss new file mode 100644 index 0000000000..47180ac786 --- /dev/null +++ b/app/webpacker/css/admin_v3/shared/tables.scss @@ -0,0 +1,213 @@ +table { + width: 100%; + margin-bottom: 15px; + border-collapse: separate; + + th, + td { + padding: 7px 5px; + border-right: 1px solid $color-border; + border-bottom: 1px solid $color-border; + vertical-align: middle; + text-overflow: ellipsis; + + img { + border: 1px solid transparent; + } + + &:first-child { + border-left: 1px solid $color-border; + } + + a { + border-bottom: 1px dotted lighten($color-link, 10); + + &:hover { + border-color: lighten($color-link-hover, 10); + } + } + + .handle { + display: block !important; + text-align: center; + padding-right: 0; + } + + &.actions { + background-color: transparent; + border: none !important; + text-align: center; + + span.text { + font-size: $body-font-size; + } + + [class*="icon-"].no-text { + font-size: 120%; + background-color: very-light($color-3); + border: 1px solid $color-border; + border-radius: 15px; + width: 29px; + height: 29px; + display: inline-block; + padding-top: 2px; + + &:before { + text-align: center !important; + width: 27px; + display: inline-block; + } + + &:hover { + border-color: transparent; + } + } + + button[class*="icon-"] { + color: $color-link; + padding: 0 !important; + } + + .icon-envelope-alt, + .icon-eye-open { + color: $color-link; + padding-left: 0px; + + &:hover { + background-color: $color-3; + color: $color-1; + } + } + .icon-trash:hover, + .icon-void:hover { + background-color: $color-error; + color: $color-1; + } + .icon-cancel:hover { + background-color: $color-notice; + color: $color-1; + } + .icon-edit:hover, + .icon-capture:hover, + .icon-ok:hover, + .icon-plus:hover { + background-color: $color-success; + color: $color-1; + } + .icon-copy:hover { + background-color: $color-notice; + color: $color-1; + } + } + + input[type="number"], + input[type="text"] { + width: 100%; + } + + &.no-border { + border-right: none; + } + + .handle { + @extend .icon-reorder; + font-family: FontAwesome; + text-decoration: inherit; + display: inline-block; + speak: none; + cursor: move; + } + } + + &.no-borders { + td, + th { + border: none !important; + } + } + + thead { + th { + padding: 10px; + border-top: 1px solid $color-border; + border-bottom: none; + background-color: $color-tbl-thead; + text-transform: uppercase; + font-size: 85%; + font-weight: $font-weight-bold; + } + } + + tbody { + tr { + &:first-child th, + &:first-child td { + border-top: 1px solid $color-border; + } + &.even td { + background-color: $color-tbl-even; + + img { + border: 1px solid very-light($color-3, 6); + } + } + + &:hover td { + background-color: very-light($color-3, 5); + + img { + border: 1px solid $color-border; + } + } + + &.deleted td { + background-color: very-light($color-error, 6); + border-color: very-light($color-error, 15); + } + + &.ui-sortable-placeholder td { + border: 1px solid $color-2 !important; + visibility: visible !important; + + &.actions { + background-color: transparent; + border-right: none !important; + border-top: none !important; + border-bottom: none !important; + border-left: 1px solid $color-2 !important; + } + } + + &.ui-sortable-helper { + width: 100%; + + td { + background-color: lighten($color-3, 33); + border-bottom: 1px solid $color-border; + + &.actions { + display: none; + } + } + } + } + + &.no-border-top tr:first-child td { + border-top: none; + } + + &.grand-total { + td { + border-color: $color-2 !important; + text-transform: uppercase; + font-size: 110%; + font-weight: 600; + background-color: lighten($color-2, 50); + } + .total { + background-color: $color-2; + color: $color-1; + } + } + } +} From 2ae91bdbe2dff517009f5a34ed348f26632db077 Mon Sep 17 00:00:00 2001 From: David Cook Date: Thu, 1 Jun 2023 14:33:37 +1000 Subject: [PATCH 02/10] Use variable for font size reset The current value is 13px already, but I'd like to experiment changing this. I'm not sure if we even need the reset, but am not delving into that right now. --- app/webpacker/css/admin/shared/typography.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/webpacker/css/admin/shared/typography.scss b/app/webpacker/css/admin/shared/typography.scss index 91918daba5..0b8a3707f2 100644 --- a/app/webpacker/css/admin/shared/typography.scss +++ b/app/webpacker/css/admin/shared/typography.scss @@ -1,6 +1,6 @@ // Base //-------------------------------------------------------------- -body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td { margin: 0; padding: 0; font-size: 13px; } +body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td { margin: 0; padding: 0; font-size: $body-font-size; } body { font-family: $base-font-family; From fb17a679c0f2f850011730575a5e368a52f98fb8 Mon Sep 17 00:00:00 2001 From: David Cook Date: Thu, 1 Jun 2023 14:42:34 +1000 Subject: [PATCH 03/10] First pass at new table colours There is more to do, for example the dropshadows. I've continued with the unopinionated colour naming (eg color-7), but would like to consider giving them more meaningfule names.. --- .../css/admin_v3/globals/variables.scss | 13 +++++------ app/webpacker/css/admin_v3/shared/tables.scss | 22 +++++-------------- 2 files changed, 12 insertions(+), 23 deletions(-) diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss index 167d5fe2f6..b1a064901f 100644 --- a/app/webpacker/css/admin_v3/globals/variables.scss +++ b/app/webpacker/css/admin_v3/globals/variables.scss @@ -18,7 +18,7 @@ $color-link-hover: $color-2 !default; $color-link-active: $color-2 !default; $color-link-focus: $color-2 !default; $color-link-visited: $color-3 !default; -$color-border: very-light($color-3, 12) !default; +$color-border: $color-7 !default; // Basic flash colors $color-success: $color-2 !default; @@ -26,9 +26,8 @@ $color-notice: $color-6 !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-cell-bg: $color-1 !default; +$color-tbl-thead-bg: $color-7 !default; // Button colors $color-btn-bg: $color-3 !default; @@ -62,8 +61,8 @@ $color-sel-hover-text: $color-1 !default; // Text inputs colors $color-txt-brd: $color-border !default; -$color-txt-text: $color-3 !default; -$color-txt-hover-brd: $color-2 !default; +$color-txt-text: $color-8 !default; +$color-txt-hover-brd: $color-3 !default; // States label colors $color-ste-complete-bg: $color-success !default; @@ -127,7 +126,7 @@ $actions-brd-colors: $color-action-edit-brd, $color-action-clone-brd // Sizes //-------------------------------------------------------------- -$body-font-size: 13px !default; +$body-font-size: 14px !default; $h6-size: $body-font-size + 2 !default; $h5-size: $h6-size + 2 !default; diff --git a/app/webpacker/css/admin_v3/shared/tables.scss b/app/webpacker/css/admin_v3/shared/tables.scss index 47180ac786..a41cc34f0f 100644 --- a/app/webpacker/css/admin_v3/shared/tables.scss +++ b/app/webpacker/css/admin_v3/shared/tables.scss @@ -6,9 +6,9 @@ table { th, td { padding: 7px 5px; - border-right: 1px solid $color-border; - border-bottom: 1px solid $color-border; + background: $color-tbl-cell-bg; vertical-align: middle; + text-align: left; text-overflow: ellipsis; img { @@ -129,27 +129,17 @@ table { thead { th { padding: 10px; - border-top: 1px solid $color-border; border-bottom: none; - background-color: $color-tbl-thead; - text-transform: uppercase; - font-size: 85%; + background-color: $color-tbl-thead-bg; + font-size: 13px; font-weight: $font-weight-bold; } } tbody { tr { - &:first-child th, - &:first-child td { - border-top: 1px solid $color-border; - } - &.even td { - background-color: $color-tbl-even; - - img { - border: 1px solid very-light($color-3, 6); - } + td { + border-top: 4px solid $color-border; // TODO: Let the table background colour come through, to enable drop shadows } &:hover td { From 744f95809a424cc84c0c071e410516050510c5ed Mon Sep 17 00:00:00 2001 From: David Cook Date: Wed, 7 Jun 2023 15:02:29 +1000 Subject: [PATCH 04/10] Remove uppercase styling of form elements --- app/webpacker/css/admin_v3/all.scss | 2 ++ app/webpacker/css/admin_v3/v3_overrides.scss | 11 +++++++++++ 2 files changed, 13 insertions(+) create mode 100644 app/webpacker/css/admin_v3/v3_overrides.scss diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss index 7552447d8f..e5cead3ca6 100644 --- a/app/webpacker/css/admin_v3/all.scss +++ b/app/webpacker/css/admin_v3/all.scss @@ -122,6 +122,8 @@ @import "../shared/question-mark-icon"; @import "../admin/question-mark-tooltip"; +@import "v3_overrides"; // admin_v3 + @import "~tom-select/src/scss/tom-select.default"; @import "../admin/components/tom_select"; diff --git a/app/webpacker/css/admin_v3/v3_overrides.scss b/app/webpacker/css/admin_v3/v3_overrides.scss new file mode 100644 index 0000000000..99b631be0f --- /dev/null +++ b/app/webpacker/css/admin_v3/v3_overrides.scss @@ -0,0 +1,11 @@ +// Temporary location for some overrides, to avoid having to branch a whole file + +// Prevent uppercase +fieldset legend, +label, +input[type=submit], +input[type=button], +button, +.button { + text-transform: inherit !important; +} From 821446e1509c77611cb2171e1cb11ea7096a2ee3 Mon Sep 17 00:00:00 2001 From: David Cook Date: Thu, 1 Jun 2023 15:24:53 +1000 Subject: [PATCH 05/10] Style pagination links And provide a basic hover state for most other buttons. The pagination button hover and active states will need updating. The darker background colour sometimes wraps a whole table (eg products table). --- app/webpacker/css/admin_v3/all.scss | 2 +- .../css/admin_v3/components/pagination.scss | 38 +++++++++++++++++++ .../css/admin_v3/globals/variables.scss | 7 ++-- 3 files changed, 43 insertions(+), 4 deletions(-) create mode 100644 app/webpacker/css/admin_v3/components/pagination.scss diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss index e5cead3ca6..a58c3491fa 100644 --- a/app/webpacker/css/admin_v3/all.scss +++ b/app/webpacker/css/admin_v3/all.scss @@ -59,7 +59,7 @@ @import "components/navigation"; // admin_v3 @import "../admin/components/ng-cloak"; @import "../admin/components/page_actions"; -@import "../admin/components/pagination"; +@import "components/pagination"; // admin_v3 @import "../admin/components/per_page_controls"; @import "../admin/components/product_autocomplete"; @import "../admin/components/progress"; diff --git a/app/webpacker/css/admin_v3/components/pagination.scss b/app/webpacker/css/admin_v3/components/pagination.scss new file mode 100644 index 0000000000..6c14a1e787 --- /dev/null +++ b/app/webpacker/css/admin_v3/components/pagination.scss @@ -0,0 +1,38 @@ +.pagination { + text-align: center; + margin: 2em 0 1em; + padding: 10px 0; + + background-color: $color-7; + + .page { + padding: 5px 8px; + text-align: center; + display: inline-block; + text-align: center; + + &.current { + background-color: $color-2; + border-radius: 3px; + color: $color-1; + } + } + + button { + margin: 0 0.35em; + + background-color: $color-1; + color: $color-8; + box-shadow: $color-btn-shadow; + + &.active { + color: $color-1; + background-color: $color-5; + cursor: default; + } + + &.disabled { + display: none; + } + } +} diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss index b1a064901f..07707c426c 100644 --- a/app/webpacker/css/admin_v3/globals/variables.scss +++ b/app/webpacker/css/admin_v3/globals/variables.scss @@ -14,7 +14,7 @@ $color-body-bg: $color-1 !default; $color-body-text: $color-4 !default; $color-headers: $color-4 !default; $color-link: $color-3 !default; -$color-link-hover: $color-2 !default; +$color-link-hover: lighten($color-link, 2) !default; $color-link-active: $color-2 !default; $color-link-focus: $color-2 !default; $color-link-visited: $color-3 !default; @@ -32,7 +32,8 @@ $color-tbl-thead-bg: $color-7 !default; // Button colors $color-btn-bg: $color-3 !default; $color-btn-text: $color-1 !default; -$color-btn-hover-bg: $color-2 !default; +$color-btn-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px rgba(0, 0, 0, 0.07) !default; +$color-btn-hover-bg: lighten($color-btn-bg, 2) !default; $color-btn-hover-text: $color-1 !default; // Actions colors @@ -56,7 +57,7 @@ $color-action-mail-brd: very-light($color-success, 20 ) !default; // Select2 select field colors $color-sel-bg: $color-3 !default; $color-sel-text: $color-1 !default; -$color-sel-hover-bg: $color-2 !default; +$color-sel-hover-bg: lighten($color-sel-bg, 2) !default; $color-sel-hover-text: $color-1 !default; // Text inputs colors From d85ea628e2dedd034d65f921354805597f2dfc70 Mon Sep 17 00:00:00 2001 From: David Cook Date: Wed, 7 Jun 2023 15:09:38 +1000 Subject: [PATCH 06/10] Change default font colour to near-black It looks like this is the main font colour in the new designs. --- app/webpacker/css/admin_v3/globals/variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss index 07707c426c..caab4d7924 100644 --- a/app/webpacker/css/admin_v3/globals/variables.scss +++ b/app/webpacker/css/admin_v3/globals/variables.scss @@ -11,7 +11,7 @@ $base-font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, // Body base colors $color-body-bg: $color-1 !default; -$color-body-text: $color-4 !default; +$color-body-text: $color-8 !default; $color-headers: $color-4 !default; $color-link: $color-3 !default; $color-link-hover: lighten($color-link, 2) !default; From 16534319b69be0c83ee3210876cacd19542b68f2 Mon Sep 17 00:00:00 2001 From: David Cook Date: Thu, 8 Jun 2023 15:11:36 +1000 Subject: [PATCH 07/10] Replace dark blue with "Sherpa blue" MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit It looks like it’s used in headers, some buttons and a loading message --- app/webpacker/css/admin_v3/globals/palette.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/webpacker/css/admin_v3/globals/palette.scss b/app/webpacker/css/admin_v3/globals/palette.scss index 859424e573..ada4a0768b 100644 --- a/app/webpacker/css/admin_v3/globals/palette.scss +++ b/app/webpacker/css/admin_v3/globals/palette.scss @@ -2,7 +2,7 @@ $color-1: #ffffff !default; // White $color-2: #9fc820 !default; // Green $color-3: #008397 !default; // Teal (Allports) -$color-4: #6788a2 !default; // Dark Blue +$color-4: #004E5B !default; // Dark Blue (Sherpa) $color-5: #c85136 !default; // Red/Orange (Mojo) $color-6: #ff9300 !default; // Yellow $color-7: #eff1f2 !default; // Light grey From edcdcd3f745510756a8004827ae208845112c017 Mon Sep 17 00:00:00 2001 From: David Cook Date: Thu, 8 Jun 2023 15:21:54 +1000 Subject: [PATCH 08/10] Use header colour for table headers --- app/webpacker/css/admin_v3/globals/variables.scss | 1 + app/webpacker/css/admin_v3/shared/tables.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss index caab4d7924..c49ee66953 100644 --- a/app/webpacker/css/admin_v3/globals/variables.scss +++ b/app/webpacker/css/admin_v3/globals/variables.scss @@ -27,6 +27,7 @@ $color-error: $color-5 !default; // Table colors $color-tbl-cell-bg: $color-1 !default; +$color-tbl-thead-txt: $color-headers !default; $color-tbl-thead-bg: $color-7 !default; // Button colors diff --git a/app/webpacker/css/admin_v3/shared/tables.scss b/app/webpacker/css/admin_v3/shared/tables.scss index a41cc34f0f..fba4fd16a2 100644 --- a/app/webpacker/css/admin_v3/shared/tables.scss +++ b/app/webpacker/css/admin_v3/shared/tables.scss @@ -131,6 +131,7 @@ table { padding: 10px; border-bottom: none; background-color: $color-tbl-thead-bg; + color: $color-tbl-thead-txt; font-size: 13px; font-weight: $font-weight-bold; } From f007cf3dad3f243d58c321150f607d80f28ff6cc Mon Sep 17 00:00:00 2001 From: David Cook Date: Thu, 8 Jun 2023 15:23:13 +1000 Subject: [PATCH 09/10] Fix up table borders --- app/webpacker/css/admin_v3/shared/tables.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/webpacker/css/admin_v3/shared/tables.scss b/app/webpacker/css/admin_v3/shared/tables.scss index fba4fd16a2..923e0bd481 100644 --- a/app/webpacker/css/admin_v3/shared/tables.scss +++ b/app/webpacker/css/admin_v3/shared/tables.scss @@ -16,7 +16,7 @@ table { } &:first-child { - border-left: 1px solid $color-border; + border-left: 4px solid $color-border; } a { @@ -140,7 +140,7 @@ table { tbody { tr { td { - border-top: 4px solid $color-border; // TODO: Let the table background colour come through, to enable drop shadows + border-bottom: 4px solid $color-border; // TODO: Let the table background colour come through, to enable drop shadows } &:hover td { From e4c65ea87dcaf0e1087a1ecae25408d0382bd770 Mon Sep 17 00:00:00 2001 From: David Cook Date: Fri, 9 Jun 2023 09:26:18 +1000 Subject: [PATCH 10/10] Prettify palette file --- .prettierignore | 2 +- app/webpacker/css/admin_v3/globals/palette.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.prettierignore b/.prettierignore index 1643a09f8a..ec07eb9993 100644 --- a/.prettierignore +++ b/.prettierignore @@ -15,7 +15,7 @@ postcss.config.js # Enabled: most of admin /app/webpacker/css/admin/globals/ /app/webpacker/css/admin/shared/ -/app/webpacker/css/admin_v3/globals/ +/app/webpacker/css/admin_v3/globals/variables.scss /app/webpacker/css/darkswarm/ /app/webpacker/css/mail/ /app/webpacker/css/shared/ diff --git a/app/webpacker/css/admin_v3/globals/palette.scss b/app/webpacker/css/admin_v3/globals/palette.scss index ada4a0768b..6130500366 100644 --- a/app/webpacker/css/admin_v3/globals/palette.scss +++ b/app/webpacker/css/admin_v3/globals/palette.scss @@ -2,7 +2,7 @@ $color-1: #ffffff !default; // White $color-2: #9fc820 !default; // Green $color-3: #008397 !default; // Teal (Allports) -$color-4: #004E5B !default; // Dark Blue (Sherpa) +$color-4: #004e5b !default; // Dark Blue (Sherpa) $color-5: #c85136 !default; // Red/Orange (Mojo) $color-6: #ff9300 !default; // Yellow $color-7: #eff1f2 !default; // Light grey