raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-01 21:47:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #11320 from dacook/css-cleanup

Browse Source 
SCSS cleanup
This commit is contained in:
Maikel
2023-08-07 10:23:49 +10:00
committed by GitHub
parent 4b0bffa095 293e135a45
commit ccc5975517
48 changed files with 137 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.prettierignore
View File

@@ -13,7 +13,8 @@ postcss.config.js
# SCSS
# Enabled: most of admin
/app/webpacker/css/admin/globals/
/app/webpacker/css/admin/globals/mixins.scss
/app/webpacker/css/admin/globals/variables.scss
/app/webpacker/css/admin/shared/
/app/webpacker/css/admin_v3/globals/variables.scss
/app/webpacker/css/darkswarm/

4
app/components/pagination_component/pagination_component.scss
View File

@@ -16,7 +16,7 @@ nav {
&.inactive {
cursor: default;
color: $disabled-dark;
color: $dark-grey;
}
}
@@ -52,7 +52,7 @@ nav {
}
.pagination-gap {
color: $disabled-dark;
color: $dark-grey;
}
.pagination-page {

2
app/components/search_input_component/search_input_component.scss
View File

@@ -1,5 +1,5 @@
.search-input {
border: 1px solid $disabled-light;
border: 1px solid $light-grey;
height: 3em;
display: flex;
line-height: 3em;

8
app/components/selector_component/selector_component.scss
View File

@@ -2,7 +2,7 @@
position: relative;
.selector-main {
border: 1px solid $disabled-light;
border: 1px solid $light-grey;
height: 3em;
position: relative;
cursor: pointer;
@@ -30,7 +30,7 @@
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid $disabled-light;
border-top: 5px solid $light-grey;
}
}
}
@@ -42,7 +42,7 @@
z-index: 1;
background-color: white;
margin-top: -1px;
border: 1px solid $disabled-light;
border: 1px solid $light-grey;
.selector-items {
overflow-y: auto;
@@ -51,7 +51,7 @@
.selector-item {
padding-left: 10px;
padding-right: 10px;
border-bottom: 1px solid $disabled-light;
border-bottom: 1px solid $light-grey;
position: relative;
height: 3em;
line-height: 3em;

4
app/components/selector_with_filter_component/selector_with_filter_component.scss
View File

@@ -37,11 +37,11 @@
.selector-wrapper {
.super-selector-search {
border-bottom: 1px solid $disabled-light;
border-bottom: 1px solid $light-grey;
padding: 10px 5px;
input {
border: 1px solid $disabled-light;
border: 1px solid $light-grey;
box-sizing: border-box;
border-radius: 4px;
width: 100%;

6
app/webpacker/css/admin/alert.scss
View File

@@ -14,11 +14,11 @@
}
&:hover {
border-color: $warning-red;
color: $warning-red;
border-color: $color-warning;
color: $color-warning;
h6 {
color: $warning-red;
color: $color-warning;
}
}
}

2
app/webpacker/css/admin/all.scss
View File

@@ -16,7 +16,6 @@
@import "globals/functions";
@import "globals/palette";
@import "globals/variables";
@import "variables";
@import "globals/mixins";
@import "plugins/font-awesome";
@@ -111,7 +110,6 @@
@import "tag_rules";
@import "terms_of_service_files";
@import "validation";
@import "variables";
@import "variant_overrides";
@import "welcome";

3
app/webpacker/css/admin/change_type_form.scss
View File

@@ -1,6 +1,3 @@
@import "../darkswarm/branding";
@import "../darkswarm/mixins";
#change_type {
section {
margin: 2em 0 0 0;

2
app/webpacker/css/admin/components/buttons.scss
View File

@@ -69,7 +69,7 @@ button:not(.plain):not(.trix-button),
}
&.danger {
background-color: $warning-red;
background-color: $color-warning;
}
&.success {
background-color: $spree-green;

2
app/webpacker/css/admin/components/dialogs.scss
View File

@@ -23,7 +23,7 @@
&.error {
.message {
.icon {
color: $warning-red;
color: $color-warning;
}
}
}

4
app/webpacker/css/admin/components/input.scss
View File

@@ -1,9 +1,7 @@
@import "../../darkswarm/branding";
.container {
input {
&[readonly] {
background-color: $disabled-light;
background-color: $light-grey;
cursor: default;
}
}

2
app/webpacker/css/admin/components/jquery_dialog.scss
View File

@@ -64,7 +64,7 @@ light: #ccc
&:hover {
&:before {
color: $warning-red;
color: $color-warning;
}
}

6
app/webpacker/css/admin/components/messages.scss
View File

@@ -1,14 +1,14 @@
.errorExplanation {
padding: 5px;
padding: 10px;
border: 1px solid very-light($color-error, 12);
background-color: very-light($color-error, 6);
border-radius: 3px;
color: very-light($color-error, 30);
color: $color-error;
margin-bottom: 15px;
h2 {
font-size: 140%;
color: very-light($color-error, 30);
color: $color-error;
margin-bottom: 5px;
}

2
app/webpacker/css/admin/components/pagination.scss
View File

@@ -25,7 +25,7 @@
}
&.disabled {
background-color: $disabled_button;
background-color: $color-btn-disabled-bg;
cursor: default;
}
}

2
app/webpacker/css/admin/components/save_bar.scss
View File

@@ -13,7 +13,7 @@
color: $spree-blue;
&.error {
color: $red-500;
color: $color-error;
}
}

4
app/webpacker/css/admin/components/simple_modal.scss
View File

@@ -2,13 +2,13 @@
width: 300px;
.close-reveal-modal {
color: $modal-close-button-color;
color: $color-modal-close-btn;
font-size: 23px;
right: 0.45rem;
top: 0.35rem;
:hover {
color: $modal-close-button-hover-color;
color: $color-modal-close-btn-hover;
}
}

2
app/webpacker/css/admin/components/table_loading.scss
View File

@@ -19,7 +19,7 @@
}
&.error {
color: $warning-red;
color: $color-warning;
}
}
}

2
app/webpacker/css/admin/components/tom_select.scss
View File

@@ -41,7 +41,7 @@
.ts-wrapper.single .ts-control,
.ts-dropdown.single {
border-color: $admin-table-border;
border-color: $color-tbl-border;
}
.ts-control,

2
app/webpacker/css/admin/dashboard-single-ent.scss
View File

@@ -1,5 +1,3 @@
@import "../darkswarm/mixins";
.dashboard_item.single-ent {
.header {
padding: 0.77778em 1.33333em 0.77778em 0.77778em;

28
app/webpacker/css/admin/dashboard_item.scss
View File

@@ -19,11 +19,11 @@ div.dashboard_item {
}
&.red {
background-color: $warning-red;
background-color: $color-warning;
}
&.orange {
background-color: $warning-orange;
background-color: $color-warning;
}
}
@@ -40,20 +40,20 @@ div.dashboard_item {
}
&.red {
border-color: $warning-red;
border-color: $color-warning;
border-width: 3px;
h3 {
color: $warning-red;
color: $color-warning;
}
}
&.orange {
border-color: $warning-orange;
border-color: $color-warning;
border-width: 3px;
h3 {
color: $warning-orange;
color: $color-warning;
}
}
@@ -141,12 +141,12 @@ div.dashboard_item {
}
.icon-warning-sign {
color: $warning-orange;
color: $color-warning;
font-size: 30px;
}
.icon-remove-sign {
color: $warning-red;
color: $color-warning;
font-size: 30px;
}
@@ -156,13 +156,13 @@ div.dashboard_item {
}
&.orange {
color: $warning-orange;
border: solid $warning-orange;
color: $color-warning;
border: solid $color-warning;
}
&.red {
color: $warning-red;
border: solid $warning-red;
color: $color-warning;
border: solid $color-warning;
}
&.orange,
@@ -217,7 +217,7 @@ div.dashboard_item {
text-align: center;
&.orange {
background-color: $warning-orange;
background-color: $color-warning;
}
&.blue {
@@ -225,7 +225,7 @@ div.dashboard_item {
}
&.red {
background-color: $warning-red;
background-color: $color-warning;
}
&:hover {

2
app/webpacker/css/admin/enterprise_index_panels.scss
View File

@@ -84,7 +84,7 @@
font-size: 1.5rem;
&.issue {
color: $warning-red;
color: $color-warning;
}
&.warning {

6
app/webpacker/css/admin/enterprises.scss
View File

@@ -1,6 +1,6 @@
form[name="enterprise_form"] {
div.row.warning {
color: $warning-orange;
color: $color-warning;
}
table.managers {
@@ -29,7 +29,7 @@ form[name="enterprise_form"] {
}
.admin-enterprises-index-admin-actions-divider {
background-color: $admin-table-border;
background-color: $color-tbl-border;
border-width: 0;
height: 1px;
margin-bottom: 1em;
@@ -38,7 +38,7 @@ form[name="enterprise_form"] {
table .enterprise-actions {
.warning-icon {
color: $warning-red;
color: $color-warning;
font-size: 16px;
}
}

13
app/webpacker/css/admin/globals/functions.scss
View File

@@ -1,23 +1,22 @@
// Make color very close to white
@function very-light($color, $adjust: 3){
@if type-of($adjust) == 'number' and $adjust > 0 {
@function very-light($color, $adjust: 3) {
@if type-of($adjust) == "number" and $adjust > 0 {
@for $i from 0 through 100 {
@if lighten($color, $i) == white and ($i - $adjust) > $adjust {
@return lighten($color, $i - $adjust);
}
}
} @else {
@debug "Please correct $adjust value. It should be number and larger then 0. Currently it is '#{type-of($adjust)}' with value '#{$adjust}'";
}
@else {
@debug "Please correct $adjust value. It should be number and larger then 0. Currently it is '#{type-of($adjust)}' with value '#{$adjust}'"
}
};
}
// Quick fix for dynamic variables missing in SASS
@function get-value($prop, $val, $search) {
$n1: index($prop, $search);
$n2: index($val, $search);
@if($n1) {
@if ($n1) {
@return nth($val, $n1);
} @else {
@return nth($prop, $n2);

24
app/webpacker/css/admin/globals/palette.scss
View File

@@ -1,7 +1,19 @@
// Basic color palette for admin
$color-1: #FFFFFF !default; // White
$color-2: #9FC820 !default; // Green
$color-3: #5498DA !default; // Light Blue
$color-4: #6788A2 !default; // Dark Blue
$color-5: #C60F13 !default; // Red
$color-6: #FF9300 !default; // Yellow
$spree-green: #9fc820;
$spree-blue: #5498da;
$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
$dark-grey: #333;
$light-grey: #ddd;
$near-black: #222;

7
app/webpacker/css/admin/globals/variables.scss
View File

@@ -23,18 +23,21 @@ $color-border: very-light($color-3, 12) !default;
// Basic flash colors
$color-success: $color-2 !default;
$color-notice: $color-6 !default;
$color-warning: $color-5 !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-border: $pale-blue !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;
$color-btn-disabled-bg: $light-grey !default;
// Actions colors
$color-action-edit-bg: very-light($color-success, 5 ) !default;
@@ -65,6 +68,10 @@ $color-txt-brd: $color-border !default;
$color-txt-text: $color-3 !default;
$color-txt-hover-brd: $color-2 !default;
// Modal colors
$color-modal-close-btn: $color-5 !default;
$color-modal-close-btn-hover: darken($color-5, 5%) !default;
// States label colors
$color-ste-complete-bg: $color-success !default;
$color-ste-complete-text: $color-1 !default;

2
app/webpacker/css/admin/index_panel_buttons.scss
View File

@@ -6,7 +6,7 @@ tbody.panel-ctrl {
margin-top: 10px;
margin-bottom: 10px;
font-size: 1.3rem;
background-color: $warning-red;
background-color: $color-warning;
&:hover {
background-color: #cd4e4f;
}

4
app/webpacker/css/admin/index_panels.scss
View File

@@ -27,7 +27,7 @@ tbody.panel-ctrl {
font-size: 2rem;
-webkit-font-smoothing: antialiased;
content: "\f071";
color: $warning-red;
color: $color-warning;
}
&.status {
@@ -38,7 +38,7 @@ tbody.panel-ctrl {
i.issue::before {
content: "\f071";
color: $warning-red;
color: $color-warning;
}
i.warning::before {

16
app/webpacker/css/admin/openfoodnetwork.scss
View File

@@ -34,7 +34,7 @@ text-angular .ta-editor {
span.error,
div.error:not(.flash) {
color: $warning-red;
color: $color-warning;
}
/* Fix conflict between Spree and elRTE's styles */
@@ -46,7 +46,7 @@ div.error:not(.flash) {
input.red,
a.button.red,
button.red {
background-color: $warning-red;
background-color: $color-warning;
margin-right: 5px;
color: #ffffff;
}
@@ -54,7 +54,7 @@ button.red {
a.button.red {
&:not(:hover) {
color: #fff;
background-color: $warning-red;
background-color: $color-warning;
}
}
@@ -208,12 +208,12 @@ table#listing_enterprise_groups {
// TODO: remove this, use class below
#no_results {
font-weight: bold;
color: $warning-red;
color: $color-warning;
}
.no-results {
font-weight: bold;
color: $warning-red;
color: $color-warning;
h1,
h2,
@@ -221,12 +221,12 @@ table#listing_enterprise_groups {
h4,
h5,
h6 {
color: $warning-red;
color: $color-warning;
}
}
.field_with_errors > input {
border-color: red;
border-color: $color-error;
}
// textAngular wysiwyg
@@ -269,7 +269,7 @@ text-angular {
}
span.required {
color: red;
color: $color-5;
font-size: 110%;
}

8
app/webpacker/css/admin/orders.scss
View File

@@ -9,7 +9,7 @@ input.show-dirty {
&.ng-dirty {
border: solid 1px orange;
&.update-error {
border: solid 1px $warning-red;
border: solid 1px $color-warning;
}
}
}
@@ -17,7 +17,7 @@ input.show-dirty {
input,
div {
&.update-error {
border: solid 1px $warning-red;
border: solid 1px $color-warning;
}
}
@@ -116,7 +116,7 @@ table.edit-note-table {
float: right;
&:disabled {
background-color: $disabled-button;
background-color: $color-btn-disabled-bg;
}
}
}
@@ -138,7 +138,7 @@ table.edit-note-table {
}
.error {
color: $warning-red;
color: $color-warning;
}
}

2
app/webpacker/css/admin/pages/enterprise_form.scss
View File

@@ -12,5 +12,5 @@ span.available {
}
span.unavailable {
color: $warning-red;
color: $color-warning;
}

2
app/webpacker/css/admin/pages/subscription_form.scss
View File

@@ -1,5 +1,5 @@
.admin-subscription-form-subscription-line-items {
.not-in-open-and-upcoming-order-cycles-warning {
color: $warning-red;
color: $color-warning;
}
}

2
app/webpacker/css/admin/pages/subscription_review.scss
View File

@@ -1,5 +1,5 @@
.admin-subscription-review-subscription-line-items {
.not-in-open-and-upcoming-order-cycles-warning {
color: $warning-red;
color: $color-warning;
}
}

2
app/webpacker/css/admin/product_import.scss vendored
View File

@@ -1,4 +1,4 @@
$pi-red: $warning-red;
$pi-red: $color-warning;
$pi-green: lighten($spree-green, 10%);
$pi-orange: $bright-orange;
$pi-blue: lighten($spree-blue, 10%);

7
app/webpacker/css/admin/products_v3.scss
View File

@@ -19,6 +19,13 @@
padding: 4px;
border-collapse: separate; // This is needed for the outer padding. Also should be helpful to give more flexibility of borders between rows.
tr:hover {
th,
td {
background-color: $light-grey;
}
}
th,
td {
padding: $padding-tbl-cell;

2
app/webpacker/css/admin/sections/orders.scss
View File

@@ -39,7 +39,7 @@
}
table tr:last-child th {
border-bottom: 1px solid $admin-table-border;
border-bottom: 1px solid $color-tbl-border;
}
}

6
app/webpacker/css/admin/shared/forms.scss
View File

@@ -100,15 +100,15 @@ span.info {
&.withError {
.field_with_errors {
label {
color: very-light($color-error, 30);
color: $color-error;
}
input {
border-color: very-light($color-error, 15);
border-color: $color-error;
}
}
.formError {
color: very-light($color-error, 30);
color: $color-error;
font-style: italic;
font-size: 85%;
}

2
app/webpacker/css/admin/shared/typography.scss
View File

@@ -142,7 +142,7 @@ dl {
}
.text-red {
color: $warning-red;
color: $color-warning;
}
input.text-big {

12
app/webpacker/css/admin/sidebar-item.scss
View File

@@ -16,7 +16,7 @@ div.sidebar_item {
}
&.red {
background-color: $warning-red;
background-color: $color-warning;
}
}
@@ -26,10 +26,10 @@ div.sidebar_item {
overflow-x: hidden;
&.red {
color: $warning-red;
color: $color-warning;
.list-item {
border: solid $warning-red;
border: solid $color-warning;
border-width: 0px 3px 0px 3px;
a.alpha,
@@ -47,7 +47,7 @@ div.sidebar_item {
}
a {
color: $warning-red;
color: $color-warning;
}
}
}
@@ -77,7 +77,7 @@ div.sidebar_item {
}
.icon-remove-sign {
color: $warning-red;
color: $color-warning;
font-size: 18px;
}
@@ -114,7 +114,7 @@ div.sidebar_item {
}
&.red {
background-color: $warning-red;
background-color: $color-warning;
}
&:hover {

6
app/webpacker/css/admin/trix.scss
View File

@@ -2,9 +2,9 @@ trix-toolbar [data-trix-button-group="file-tools"] {
display: none;
}
// Match the rendering into the shopfront
// Match the rendering into the shopfront (see ../darkswarm/)
trix-editor {
color: $darker-grey;
color: #222;
ol,
ul {
@@ -12,7 +12,7 @@ trix-editor {
}
a {
color: $ofn-brand;
color: #f27052;
}
// Copy/pasted from _type.scss

2
app/webpacker/css/admin/variant_overrides.scss
View File

@@ -4,5 +4,5 @@
}
button.hide:hover {
background-color: $warning-red;
background-color: $color-warning;
}

4
app/webpacker/css/admin/welcome.scss
View File

@@ -1,13 +1,11 @@
@import "../darkswarm/mixins";
#welcome_page {
header {
text-align: center;
padding: 4em 2em;
@include fullbg;
background-color: black;
background-image: url("../images/home/tagline-bg.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
margin-bottom: 2em;

2
app/webpacker/css/admin_v3/all.scss
View File

@@ -20,7 +20,6 @@
@import "../admin/globals/functions";
@import "globals/palette"; // admin_v3
@import "globals/variables"; // admin_v3
@import "../admin/variables";
@import "../admin/globals/mixins";
@import "mixins"; // admin_v3
@@ -117,7 +116,6 @@
@import "../admin/tag_rules";
@import "../admin/terms_of_service_files";
@import "../admin/validation";
@import "../admin/variables";
@import "../admin/variant_overrides";
@import "../admin/welcome";

2
app/webpacker/css/admin_v3/components/buttons.scss
View File

@@ -99,7 +99,7 @@ button:not(.plain):not(.trix-button),
}
&.danger {
background-color: $warning-red;
background-color: $color-warning;
}
&.success {
background-color: $spree-green;

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

@@ -4,17 +4,23 @@ $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
$near-black: #191c1d !default; // Near-black
$light-grey: #eff1f2 !default; // Light grey (Porcelain)
$medium-grey: #919191 !default; // Medium grey
$dark-grey: #2e3132 !default; // Dark Grey
$near-black: #191c1d !default; // Near-black
$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;

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

@@ -23,6 +23,7 @@ $color-border: $light-grey !default;
// Basic flash colors
$color-success: $green !default;
$color-notice: $yellow !default;
$color-warning: $red !default;
$color-error: $red !default;
// Table styles
@@ -31,6 +32,7 @@ $color-tbl-cell-bg: $white !default;
$color-tbl-cell-shadow: rgb(0, 0, 0, 0.15) !default;
$color-tbl-thead-txt: $color-headers !default;
$color-tbl-thead-bg: $light-grey !default;
$color-tbl-border: $pale-blue !default;
$padding-tbl-cell: 12px 12px;
$padding-tbl-cell-condensed: 10px 12px;
$padding-tbl-cell-relaxed: 16px 12px;
@@ -42,6 +44,7 @@ $color-btn-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px rg
$color-btn-hover-bg: $orient !default;
$color-btn-hover-text: $white !default;
$color-btn-hover-border: $dark-blue !default;
$color-btn-disabled-bg: $light-grey !default;
// Actions colors
$color-action-edit-bg: very-light($color-success, 5 ) !default;
@@ -72,6 +75,10 @@ $color-txt-brd: $color-border !default;
$color-txt-text: $near-black !default;
$color-txt-hover-brd: $teal !default;
// Modal colors
$color-modal-close-btn: $color-5 !default;
$color-modal-close-btn-hover: darken($color-5, 5%) !default;
// States label colors
$color-ste-complete-bg: $color-success !default;
$color-ste-complete-text: $white !default;

2
app/webpacker/css/admin_v3/shared/typography.scss
View File

@@ -210,7 +210,7 @@ dl {
}
.text-red {
color: $warning-red;
color: $color-warning;
}
input.text-big {

6
app/webpacker/css/admin/variables.scss → app/webpacker/css/admin_v3/variables.scss
View File

@@ -1,15 +1,13 @@
// Admin variables and colours
// Legacy admin variables and colours
$spree-green: #9fc820;
$spree-blue: #5498da;
$spree-light-blue: #eff5fc;
$warning-red: $color-5;
$warning-orange: $color-5;
$color-warning: $color-5;
$bright-orange: #ffa92e;
$medium-grey: #919191;
$pale-blue: #cee1f4;
$light-grey: #ccc;
$admin-table-border: $pale-blue;

1
app/webpacker/css/mail/all.scss
View File

@@ -1,4 +1,3 @@
@import '../admin/globals/palette.scss';
@import '../admin/variables';
@import 'email';
@import 'payments_list';