From 3967f54533f173160efd96e7c599d54485d060ad Mon Sep 17 00:00:00 2001 From: David Cook Date: Thu, 1 Jun 2023 12:11:42 +1000 Subject: [PATCH] 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; + } + } + } +}