raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-01-24 20:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rename colour variables

Browse Source
This commit is contained in:
David Cook
2023-06-23 16:02:53 +10:00
parent 748cdaaa52
commit efcaab5deb
6 changed files with 105 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/webpacker/css/admin_v3/components/navigation.scss
View File

@@ -23,13 +23,13 @@ nav.menu {
}
&.active a {
color: $color-2;
color: $green;
border-left-width: 0;
border-bottom-color: $color-2;
border-bottom-color: $green;
}
&:hover a {
color: $color-2;
color: $green;
}
}
}
@@ -53,7 +53,7 @@ nav.menu {
&:hover {
i {
color: $color-2;
color: $green;
}
}
}
@@ -76,7 +76,7 @@ nav.menu {
a {
display: block;
padding: 25px 5px;
color: $color-9 !important;
color: $dark-grey !important;
position: relative;
text-align: center;
font-weight: 600;
@@ -87,8 +87,8 @@ nav.menu {
}
&:hover {
color: $color-5 !important;
border-bottom: 2px solid $color-5;
color: $red !important;
border-bottom: 2px solid $red;
}
span.text {
@@ -103,7 +103,7 @@ nav.menu {
.dropdown {
width: 300px;
background-color: $color-3;
background-color: $teal;
width: 200px;
z-index: 100000;
@@ -124,13 +124,13 @@ nav.menu {
#sub-menu {
padding-bottom: 0;
box-shadow: 0px 1px 0px $color-7;
box-shadow: 0px 1px 0px $light-grey;
li {
a {
display: block;
padding: 12px 20px;
color: $color-9;
color: $dark-grey;
text-align: center;
position: relative;
font-size: 14px;
@@ -138,8 +138,8 @@ nav.menu {
&.selected a,
a:hover {
color: $color-5;
border-bottom: 2px solid $color-5;
color: $red;
border-bottom: 2px solid $red;
}
}
}

14
app/webpacker/css/admin_v3/components/pagination.scss
View File

@@ -3,7 +3,7 @@
margin: 2em 0 1em;
padding: 10px 0;
background-color: $color-7;
background-color: $light-grey;
.page {
padding: 5px 8px;
@@ -12,22 +12,22 @@
text-align: center;
&.current {
background-color: $color-2;
background-color: $green;
border-radius: 3px;
color: $color-1;
color: $white;
}
}
button {
margin: 0 0.35em;
background-color: $color-1;
color: $color-8;
background-color: $white;
color: $near-black;
box-shadow: $color-btn-shadow;
&.active {
color: $color-1;
background-color: $color-5;
color: $white;
background-color: $red;
cursor: default;
}

29
app/webpacker/css/admin_v3/globals/palette.scss
View File

@@ -1,10 +1,21 @@
// Basic color palette for admin styles v3
$color-1: #ffffff !default; // White
$color-2: #9fc820 !default; // Green
$color-3: #008397 !default; // Teal (Allports)
$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
$color-8: #191c1d !default; // Near-black
$color-9: #2e3132 !default; // Dark Grey
$white: #ffffff !default; // White
$green: #9fc820 !default; // Green
$teal: #008397 !default; // Teal (Allports)
$dark-blue: #004e5b !default; // Dark Blue (Sherpa)
$red: #c85136 !default; // Red/Orange (Mojo)
$yellow: #ff9300 !default; // Yellow
$light-grey: #eff1f2 !default; // Light grey
$near-black: #191c1d !default; // Near-black
$dark-grey: #2e3132 !default; // Dark Grey
// Old colour variables for backwards compatibility
$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;

90
app/webpacker/css/admin_v3/globals/variables.scss
View File

@@ -10,32 +10,32 @@ $base-font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
//--------------------------------------------------------------
// Body base colors
$color-body-bg: $color-1 !default;
$color-body-text: $color-8 !default;
$color-headers: $color-4 !default;
$color-link: $color-3 !default;
$color-body-bg: $white !default;
$color-body-text: $near-black !default;
$color-headers: $dark-blue !default;
$color-link: $teal !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;
$color-border: $color-7 !default;
$color-link-active: $green !default;
$color-link-focus: $green !default;
$color-link-visited: $teal !default;
$color-border: $light-grey !default;
// Basic flash colors
$color-success: $color-2 !default;
$color-notice: $color-6 !default;
$color-error: $color-5 !default;
$color-success: $green !default;
$color-notice: $yellow !default;
$color-error: $red !default;
// Table colors
$color-tbl-cell-bg: $color-1 !default;
$color-tbl-cell-bg: $white !default;
$color-tbl-thead-txt: $color-headers !default;
$color-tbl-thead-bg: $color-7 !default;
$color-tbl-thead-bg: $light-grey !default;
// Button colors
$color-btn-bg: $color-3 !default;
$color-btn-text: $color-1 !default;
$color-btn-bg: $teal !default;
$color-btn-text: $white !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;
$color-btn-hover-text: $white !default;
// Actions colors
$color-action-edit-bg: very-light($color-success, 5 ) !default;
@@ -56,65 +56,65 @@ $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-bg: $teal !default;
$color-sel-text: $white !default;
$color-sel-hover-bg: lighten($color-sel-bg, 2) !default;
$color-sel-hover-text: $color-1 !default;
$color-sel-hover-text: $white !default;
// Text inputs colors
$color-txt-brd: $color-border !default;
$color-txt-text: $color-8 !default;
$color-txt-hover-brd: $color-3 !default;
$color-txt-text: $near-black !default;
$color-txt-hover-brd: $teal !default;
// States label colors
$color-ste-complete-bg: $color-success !default;
$color-ste-complete-text: $color-1 !default;
$color-ste-complete-text: $white !default;
$color-ste-completed-bg: $color-success !default;
$color-ste-completed-text: $color-1 !default;
$color-ste-completed-text: $white !default;
$color-ste-sold-bg: $color-success !default;
$color-ste-sold-text: $color-1 !default;
$color-ste-sold-text: $white !default;
$color-ste-pending-bg: $color-notice !default;
$color-ste-pending-text: $color-1 !default;
$color-ste-pending-text: $white !default;
$color-ste-requires_authorization-bg: $color-notice !default;
$color-ste-requires_authorization-text: $color-1 !default;
$color-ste-requires_authorization-text: $white !default;
$color-ste-awaiting_return-bg: $color-notice !default;
$color-ste-awaiting_return-text: $color-1 !default;
$color-ste-awaiting_return-text: $white !default;
$color-ste-returned-bg: $color-notice !default;
$color-ste-returned-text: $color-1 !default;
$color-ste-returned-text: $white !default;
$color-ste-credit_owed-bg: $color-notice !default;
$color-ste-credit_owed-text: $color-1 !default;
$color-ste-credit_owed-text: $white !default;
$color-ste-paid-bg: $color-success !default;
$color-ste-paid-text: $color-1 !default;
$color-ste-paid-text: $white !default;
$color-ste-shipped-bg: $color-success !default;
$color-ste-shipped-text: $color-1 !default;
$color-ste-shipped-text: $white !default;
$color-ste-balance_due-bg: $color-notice !default;
$color-ste-balance_due-text: $color-1 !default;
$color-ste-balance_due-text: $white !default;
$color-ste-backorder-bg: $color-notice !default;
$color-ste-backorder-text: $color-1 !default;
$color-ste-backorder-text: $white !default;
$color-ste-none-bg: $color-error !default;
$color-ste-none-text: $color-1 !default;
$color-ste-none-text: $white !default;
$color-ste-ready-bg: $color-success !default;
$color-ste-ready-text: $color-1 !default;
$color-ste-ready-text: $white !default;
$color-ste-void-bg: $color-error !default;
$color-ste-void-text: $color-1 !default;
$color-ste-void-text: $white !default;
$color-ste-canceled-bg: $color-error !default;
$color-ste-canceled-text: $color-1 !default;
$color-ste-canceled-text: $white !default;
$color-ste-address-bg: $color-error !default;
$color-ste-address-text: $color-1 !default;
$color-ste-address-text: $white !default;
$color-ste-checkout-bg: $color-notice !default;
$color-ste-checkout-text: $color-1 !default;
$color-ste-checkout-text: $white !default;
$color-ste-cart-bg: $color-notice !default;
$color-ste-cart-text: $color-1 !default;
$color-ste-cart-text: $white !default;
$color-ste-payment-bg: $color-error !default;
$color-ste-payment-text: $color-1 !default;
$color-ste-payment-text: $white !default;
$color-ste-delivery-bg: $color-success !default;
$color-ste-delivery-text: $color-1 !default;
$color-ste-delivery-text: $white !default;
$color-ste-confirmation-bg: $color-error !default;
$color-ste-confirmation-text: $color-1 !default;
$color-ste-confirmation-text: $white !default;
$color-ste-active-bg: $color-success !default;
$color-ste-active-text: $color-1 !default;
$color-ste-active-text: $white !default;
$color-ste-inactive-bg: $color-notice !default;
$color-ste-inactive-text: $color-1 !default;
$color-ste-inactive-text: $white !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;

12
app/webpacker/css/admin_v3/shared/layout.scss
View File

@@ -12,19 +12,19 @@
margin-top: 25px;
h1 {
color: $color-8;
color: $near-black;
}
.ofn-drop-down {
border: 0;
background-color: $spree-blue;
color: $color-1;
color: $white;
float: none;
margin-left: 3px;
&:hover,
&.expanded {
border: 0;
color: $color-1;
color: $white;
}
}
@@ -97,7 +97,7 @@
// Header
//---------------------------------------------------
#header {
background-color: $color-1;
background-color: $white;
padding: 5px 0;
}
@@ -107,14 +107,14 @@
.page-title {
i {
color: $color-2;
color: $green;
}
}
// Content
//---------------------------------------------------
#content {
background-color: $color-1;
background-color: $white;
position: relative;
z-index: 0;
padding: 0;

30
app/webpacker/css/admin_v3/shared/tables.scss
View File

@@ -44,7 +44,7 @@ table {
[class*="icon-"].no-text {
font-size: 120%;
background-color: very-light($color-3);
background-color: very-light($teal);
border: 1px solid $color-border;
border-radius: 15px;
width: 29px;
@@ -74,29 +74,29 @@ table {
padding-left: 0px;
&:hover {
background-color: $color-3;
color: $color-1;
background-color: $teal;
color: $white;
}
}
.icon-trash:hover,
.icon-void:hover {
background-color: $color-error;
color: $color-1;
color: $white;
}
.icon-cancel:hover {
background-color: $color-notice;
color: $color-1;
color: $white;
}
.icon-edit:hover,
.icon-capture:hover,
.icon-ok:hover,
.icon-plus:hover {
background-color: $color-success;
color: $color-1;
color: $white;
}
.icon-copy:hover {
background-color: $color-notice;
color: $color-1;
color: $white;
}
}
@@ -144,7 +144,7 @@ table {
}
&:hover td {
background-color: very-light($color-3, 5);
background-color: very-light($teal, 5);
img {
border: 1px solid $color-border;
@@ -157,7 +157,7 @@ table {
}
&.ui-sortable-placeholder td {
border: 1px solid $color-2 !important;
border: 1px solid $green !important;
visibility: visible !important;
&.actions {
@@ -165,7 +165,7 @@ table {
border-right: none !important;
border-top: none !important;
border-bottom: none !important;
border-left: 1px solid $color-2 !important;
border-left: 1px solid $green !important;
}
}
@@ -173,7 +173,7 @@ table {
width: 100%;
td {
background-color: lighten($color-3, 33);
background-color: lighten($teal, 33);
border-bottom: 1px solid $color-border;
&.actions {
@@ -189,15 +189,15 @@ table {
&.grand-total {
td {
border-color: $color-2 !important;
border-color: $green !important;
text-transform: uppercase;
font-size: 110%;
font-weight: 600;
background-color: lighten($color-2, 50);
background-color: lighten($green, 50);
}
.total {
background-color: $color-2;
color: $color-1;
background-color: $green;
color: $white;
}
}
}