mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-03-10 03:30:22 +00:00
Revert pull #10054
[WIP 🚧 ] Admin/Orders, behind feature toggle admin_style_v2: adjust colors
This reverts commits 5cab0f7f3d495daaeb97fd786208a24355b630fe..4ef5609b0eb08fe7e48803de166ae3e979103c1b
This commit is contained in:
David Cook
@@ -54,6 +54,6 @@
|
||||
.actions.filter-actions
|
||||
%a.button.icon-search{'ng-click' => 'fetchResults()'}
|
||||
= t(:filter_results)
|
||||
%a.button{'ng-click' => 'clearFilters()', "id": "clear_filters_button", "class": ("secondary" if feature?(:admin_style_v2, spree_current_user)) }
|
||||
%a.button{'ng-click' => 'clearFilters()', "id": "clear_filters_button"}
|
||||
= t(:clear_filters)
|
||||
|
||||
|
||||
@@ -100,17 +100,17 @@
|
||||
%td.align-center
|
||||
%span{'ng-bind-html' => 'order.display_total'}
|
||||
%td.actions
|
||||
.flex
|
||||
%div.row-loading-icons
|
||||
%div{ng: {show: 'rowStatus[order.id] == "loading"', cloak: true}, style: "width: 30px; height: 30px;"}
|
||||
= render partial: "components/spinner"
|
||||
%i.success.icon-ok-sign{ng: {show: 'rowStatus[order.id] == "success"'} }
|
||||
%i.error.icon-remove-sign.with-tip{ng: {show: 'rowStatus[order.id] == "error"'}, 'ofn-with-tip' => t('.order_not_updated')}
|
||||
%a.icon_link.with-tip.icon-edit.no-text{'ng-href' => '{{order.edit_path}}', 'data-action' => 'edit', 'ofn-with-tip' => t('.edit')}
|
||||
%div{'ng-if' => 'order.ready_to_ship'}
|
||||
%button.icon-road.icon_link.with-tip.no-text{'ng-click' => 'shipOrder(order)', rel: 'nofollow', 'ofn-with-tip' => t('.ship')}
|
||||
%div{'ng-if' => 'order.ready_to_capture'}
|
||||
%button.icon-capture.icon_link.no-text{'ng-click' => 'capturePayment(order)', rel: 'nofollow', 'ofn-with-tip' => t('.capture')}
|
||||
%div.row-loading-icons
|
||||
%div{ng: {show: 'rowStatus[order.id] == "loading"', cloak: true}, style: "width: 30px; height: 30px;"}
|
||||
= render partial: "components/spinner"
|
||||
%i.success.icon-ok-sign{ng: {show: 'rowStatus[order.id] == "success"'} }
|
||||
%i.error.icon-remove-sign.with-tip{ng: {show: 'rowStatus[order.id] == "error"'}, 'ofn-with-tip' => t('.order_not_updated')}
|
||||
%a.icon_link.with-tip.icon-edit.no-text{'ng-href' => '{{order.edit_path}}', 'data-action' => 'edit', 'ofn-with-tip' => t('.edit')}
|
||||
%div{'ng-if' => 'order.ready_to_ship'}
|
||||
%button.icon-road.icon_link.with-tip.no-text{'ng-click' => 'shipOrder(order)', rel: 'nofollow', 'ofn-with-tip' => t('.ship')}
|
||||
%div{'ng-if' => 'order.ready_to_capture'}
|
||||
%button.icon-capture.icon_link.no-text{'ng-click' => 'capturePayment(order)', rel: 'nofollow', 'ofn-with-tip' => t('.capture')}
|
||||
|
||||
.sixteen.columns.alpha#loading{ 'ng-show' => 'RequestMonitor.loading' }
|
||||
= render partial: "components/admin_spinner"
|
||||
%h1
|
||||
|
||||
@@ -1,66 +0,0 @@
|
||||
/* Overide buttons.scss app/webpacker/css/admin/components/buttons.scss */
|
||||
|
||||
@mixin backgroundAndBorder($color) {
|
||||
background-color: $color;
|
||||
border: 2px solid $color;
|
||||
}
|
||||
|
||||
input[type="submit"],
|
||||
select[type="submit"],
|
||||
.select2-container-multi [type="submit"].select2-choices,
|
||||
input[type="button"],
|
||||
select[type="button"],
|
||||
.select2-container-multi [type="button"].select2-choices,
|
||||
button,
|
||||
.button,
|
||||
.actions a:not([class*="icon-"]),
|
||||
.admin__section-header .ofn-drop-down // Same behavior as the button
|
||||
{
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
@include backgroundAndBorder($v2-light-grey);
|
||||
}
|
||||
|
||||
&:not(.disabled):not([disabled]):not(.secondary) {
|
||||
// Change the color of the button only if it's not disabled
|
||||
@include backgroundAndBorder($v2-blue-light);
|
||||
|
||||
&:hover {
|
||||
@include backgroundAndBorder($v2-blue);
|
||||
box-shadow: $v2-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background-color: $white;
|
||||
border: 2px solid $v2-blue-light;
|
||||
color: $v2-blue-light;
|
||||
|
||||
&:hover {
|
||||
background-color: $v2-blue-lightest;
|
||||
color: $v2-blue;
|
||||
box-shadow: $v2-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
@include backgroundAndBorder($v2-blue);
|
||||
}
|
||||
}
|
||||
|
||||
#table-filter .actions {
|
||||
/* used to draw a line on the right and left of the actions buttons
|
||||
We can then remove the dropshadow on the buttons */
|
||||
&:before,
|
||||
&:after {
|
||||
background-color: $v2-light-grey; // same color as the border of the fieldset. see forms.scss
|
||||
height: 1px;
|
||||
content: attr(data-initials);
|
||||
flex-grow: 1; // make the line as long as it can
|
||||
}
|
||||
}
|
||||
|
||||
#table-filter fieldset:has(.actions) {
|
||||
// do not apply border to filter actions as it's drawn by the #table-filter .actions before and after pseudo elements
|
||||
border-bottom: 0;
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
/* Overide app/webpacker/css/admin/components/progress.scss file */
|
||||
|
||||
#progress {
|
||||
background-color: $v2-blue;
|
||||
}
|
||||
|
||||
#loading {
|
||||
color: $v2-blue;
|
||||
}
|
||||
@@ -1,75 +0,0 @@
|
||||
/* Overide tables.scss app/webpacker/css/admin/components/tables.scss */
|
||||
|
||||
table thead th {
|
||||
background-color: $v2-medium-light-grey;
|
||||
border: none;
|
||||
color: $v2-blue;
|
||||
text-transform: capitalize;
|
||||
font-size: 13px;
|
||||
|
||||
a {
|
||||
border: none;
|
||||
color: $v2-blue;
|
||||
}
|
||||
}
|
||||
|
||||
table tbody tr {
|
||||
&:first-child th,
|
||||
&:first-child td {
|
||||
border-top: none; // Don't show the top border of the first row
|
||||
}
|
||||
td:not(:first-child) {
|
||||
border-left: none; // Only show left border on the first cells, as it indicates the order state by its color
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: none; // By default, do not show the border of the cells
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
|
||||
border-bottom: 2px solid $v2-medium-light-grey;
|
||||
&.actions {
|
||||
border-bottom: 2px solid $v2-medium-light-grey !important; // needs to be important because of already defined with important
|
||||
}
|
||||
> .flex {
|
||||
column-gap: 10px;
|
||||
}
|
||||
}
|
||||
&.even,
|
||||
&.odd {
|
||||
td {
|
||||
background-color: transparent; // Do not use odd and even colors for background
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table th.actions,
|
||||
table td.actions {
|
||||
// Special for icons in the actions column
|
||||
[class*="icon-"] {
|
||||
color: $v2-blue;
|
||||
&.no-text {
|
||||
border: 2px solid $v2-blue-light;
|
||||
background-color: $v2-blue-lightest;
|
||||
|
||||
&:hover {
|
||||
border-color: $v2-blue;
|
||||
background-color: $v2-blue-light;
|
||||
box-shadow: $v2-box-shadow;
|
||||
|
||||
&:before {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table#listing_orders td {
|
||||
// When the table is the listing of orders, we need to increase the height of the cells
|
||||
padding: 20px 0;
|
||||
|
||||
&.actions {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
@@ -1,13 +1,5 @@
|
||||
@import "variables.scss";
|
||||
@import "shared/typography.scss";
|
||||
|
||||
body.admin.admin-v2 {
|
||||
@import "navigation.scss";
|
||||
@import "plugins/select2.scss";
|
||||
@import "plugins/powertip.scss";
|
||||
@import "plugins/flatpickr-customization.scss";
|
||||
@import "shared/forms.scss";
|
||||
@import "components/buttons.scss";
|
||||
@import "components/tables.scss";
|
||||
@import "components/progress.scss";
|
||||
}
|
||||
|
||||
@@ -3,8 +3,14 @@
|
||||
li {
|
||||
color: $v2-medium-dark-grey;
|
||||
|
||||
i {
|
||||
@include v2-link-color();
|
||||
&:hover {
|
||||
a, i {
|
||||
color: $v2-orange;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $v2-medium-dark-grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -21,8 +27,7 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
li a:hover,
|
||||
li.selected a {
|
||||
li a:hover, li.selected a {
|
||||
background-color: $v2-orange-light;
|
||||
|
||||
span {
|
||||
@@ -35,6 +40,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#sub-menu {
|
||||
background-color: $v2-orange-light;
|
||||
|
||||
@@ -42,10 +48,10 @@
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
li a:hover,
|
||||
li.selected a {
|
||||
li a:hover, li.selected a {
|
||||
text-shadow: 1px 1px 9px $v2-orange;
|
||||
background-color: lighten($v2-orange-light, 7%);
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
@@ -60,3 +66,4 @@
|
||||
color: $v2-medium-dark-grey;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,46 +0,0 @@
|
||||
/* Override flatpickr styles: app/webpacker/css/admin/plugins/flatpickr-customization.scss */
|
||||
|
||||
.flatpickr-calendar {
|
||||
&.arrowTop::after {
|
||||
border-bottom-color: $v2-blue-light;
|
||||
}
|
||||
.flatpickr-months .flatpickr-month,
|
||||
.flatpickr-current-month .flatpickr-monthDropdown-months {
|
||||
background: $v2-blue-light;
|
||||
color: white;
|
||||
input {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.flatpickr-weekdays {
|
||||
background: $v2-blue-light;
|
||||
|
||||
.flatpickr-weekday {
|
||||
background: $v2-blue-light;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.flatpickr-day.selected,
|
||||
.flatpickr-day.startRange,
|
||||
.flatpickr-day.endRange,
|
||||
.flatpickr-day.selected.inRange,
|
||||
.flatpickr-day.startRange.inRange,
|
||||
.flatpickr-day.endRange.inRange,
|
||||
.flatpickr-day.selected:focus,
|
||||
.flatpickr-day.startRange:focus,
|
||||
.flatpickr-day.endRange:focus,
|
||||
.flatpickr-day.selected:hover,
|
||||
.flatpickr-day.startRange:hover,
|
||||
.flatpickr-day.endRange:hover,
|
||||
.flatpickr-day.selected.prevMonthDay,
|
||||
.flatpickr-day.startRange.prevMonthDay,
|
||||
.flatpickr-day.endRange.prevMonthDay,
|
||||
.flatpickr-day.selected.nextMonthDay,
|
||||
.flatpickr-day.startRange.nextMonthDay,
|
||||
.flatpickr-day.endRange.nextMonthDay {
|
||||
background: $v2-blue-light;
|
||||
border-color: $v2-blue-light;
|
||||
}
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
/* Overide file powertip.scss app/webpacker/css/admin/v2/plugins/powertip.scss */
|
||||
|
||||
#powerTip {
|
||||
background-color: $v2-blue;
|
||||
|
||||
&.n:before,
|
||||
&.ne:before,
|
||||
&.nw:before {
|
||||
border-top-color: $v2-blue;
|
||||
}
|
||||
|
||||
&.e:before {
|
||||
border-right-color: $v2-blue;
|
||||
}
|
||||
&.s:before,
|
||||
&.se:before,
|
||||
&.sw:before {
|
||||
border-bottom-color: $v2-blue;
|
||||
}
|
||||
&.w:before {
|
||||
border-left-color: $v2-blue;
|
||||
}
|
||||
&.ne:before,
|
||||
&.se:before {
|
||||
border-right-color: $v2-blue;
|
||||
}
|
||||
&.nw:before,
|
||||
&.sw:before {
|
||||
border-right-color: $v2-blue;
|
||||
}
|
||||
}
|
||||
@@ -1,70 +0,0 @@
|
||||
/* Override select2 styles app/webpacker/css/admin/plugins/select2.scss */
|
||||
|
||||
.select2-container {
|
||||
.select2-choice {
|
||||
background-color: transparent;
|
||||
border: 1px solid $v2-light-grey !important;
|
||||
color: $v2-medium-grey !important;
|
||||
padding-left: 5px;
|
||||
font-size: 13px;
|
||||
padding-top: 3px;
|
||||
|
||||
.select2-arrow {
|
||||
color: $v2-medium-grey;
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container-active,
|
||||
&:hover {
|
||||
.select2-choice {
|
||||
background-color: transparent !important;
|
||||
border-color: $v2-medium-grey !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-dropdown-open.select2-container-active {
|
||||
&:not(.select2-drop-above) {
|
||||
.select2-choice {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
&.select2-drop-above .select.select2-choice {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container-multi {
|
||||
.select2-choices {
|
||||
border-color: $v2-medium-grey !important;
|
||||
.select2-search-choice {
|
||||
background-color: $v2-blue-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-drop {
|
||||
border-color: $v2-medium-grey;
|
||||
}
|
||||
|
||||
.select2-search {
|
||||
color: $v2-medium-grey;
|
||||
}
|
||||
|
||||
.select2-results {
|
||||
margin-right: 0;
|
||||
li {
|
||||
.select2-result-label {
|
||||
color: $v2-medium-grey;
|
||||
}
|
||||
&.select2-highlighted {
|
||||
background-color: $v2-blue;
|
||||
}
|
||||
&.select2-no-results,
|
||||
&.select2-searching {
|
||||
color: $v2-medium-grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
/* Overide forms.scss app/webpacker/css/admin/shared/forms.scss */
|
||||
|
||||
input[type="text"],
|
||||
.select2-container-multi .select2-choices,
|
||||
.select2-search input,
|
||||
.select2-search select,
|
||||
select,
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="tel"],
|
||||
input[type="date"],
|
||||
input[type="datetime"],
|
||||
input[type="time"],
|
||||
input[type="number"],
|
||||
textarea,
|
||||
fieldset {
|
||||
// Change the color of all inputs
|
||||
color: $v2-medium-grey;
|
||||
border-color: $v2-light-grey !important;
|
||||
|
||||
&:focus {
|
||||
border-color: $v2-medium-grey;
|
||||
}
|
||||
}
|
||||
|
||||
fieldset label {
|
||||
color: $v2-medium-grey;
|
||||
}
|
||||
|
||||
fieldset legend {
|
||||
color: $v2-blue;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
accent-color: $v2-blue;
|
||||
}
|
||||
|
||||
fieldset .filter-actions {
|
||||
button,
|
||||
.button,
|
||||
input[type="submit"] {
|
||||
box-shadow: none;
|
||||
width: 200px; // adjust at the same size in order to center them. Not ideal but works for now.
|
||||
|
||||
&:first-of-type {
|
||||
margin-right: 0; // don't see any reason to have a margin right on the first button as it's managed by the flexbox
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: $v2-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
// Overide app/webpacker/css/admin/shared/typography.scss
|
||||
|
||||
@mixin v2-link-color() {
|
||||
color: $v2-blue;
|
||||
border-color: $v2-blue;
|
||||
&:hover {
|
||||
color: $v2-blue-dark;
|
||||
border-color: $v2-blue-dark;
|
||||
}
|
||||
}
|
||||
|
||||
body.admin.admin-v2 {
|
||||
color: $v2-body-grey;
|
||||
|
||||
a:not(.button) {
|
||||
@include v2-link-color();
|
||||
}
|
||||
}
|
||||
@@ -1,23 +1,9 @@
|
||||
// Should finally replace (or at least complete) the file /admin/globale/variables.scss
|
||||
|
||||
$v2-orange: #f27052;
|
||||
$v2-orange-light: #f5947d;
|
||||
$v2-orange-lighter: #f8b7a8;
|
||||
$v2-orange-lightest: #fcdbd4;
|
||||
$v2-orange: #F27052;
|
||||
$v2-orange-light: #F5947D;
|
||||
$v2-orange-lighter: #F8B7A8;
|
||||
$v2-orange-lightest: #FCDBD4;
|
||||
|
||||
$v2-dark-grey: #333333;
|
||||
$v2-medium-dark-grey: #444444;
|
||||
$v2-body-grey: #666666;
|
||||
$v2-medium-grey: #717171;
|
||||
$v2-medium-light-grey: #e6e6e6;
|
||||
$v2-light-grey: #e7e7e7;
|
||||
|
||||
$v2-blue: #017a9a;
|
||||
$v2-blue-dark: #005e7a;
|
||||
$v2-blue-light: #0096ad;
|
||||
$v2-blue-lightest: #e6f7fa; // Could be used as a background color for the action icons
|
||||
|
||||
$v2-green: #019854;
|
||||
$v2-green-light: #01cb70;
|
||||
|
||||
$v2-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); // Default box shadow for actions stuff
|
||||
|
||||
Reference in New Issue
Block a user