mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-02-27 01:43:22 +00:00
Merge pull request #10948 from dacook/buu-table-styles
[admin_v3] Update all table styles
This commit is contained in:
David Cook
GitHub
@@ -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/variables.scss
|
||||
/app/webpacker/css/darkswarm/
|
||||
/app/webpacker/css/mail/
|
||||
/app/webpacker/css/shared/
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
@@ -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";
|
||||
@@ -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";
|
||||
|
||||
|
||||
38
app/webpacker/css/admin_v3/components/pagination.scss
Normal file
38
app/webpacker/css/admin_v3/components/pagination.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
|
||||
143
app/webpacker/css/admin_v3/globals/variables.scss
Normal file
143
app/webpacker/css/admin_v3/globals/variables.scss
Normal file
@@ -0,0 +1,143 @@
|
||||
// -------------------------------------------------------------
|
||||
// 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-8 !default;
|
||||
$color-headers: $color-4 !default;
|
||||
$color-link: $color-3 !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;
|
||||
|
||||
// Basic flash colors
|
||||
$color-success: $color-2 !default;
|
||||
$color-notice: $color-6 !default;
|
||||
$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
|
||||
$color-btn-bg: $color-3 !default;
|
||||
$color-btn-text: $color-1 !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
|
||||
$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: lighten($color-sel-bg, 2) !default;
|
||||
$color-sel-hover-text: $color-1 !default;
|
||||
|
||||
// Text inputs colors
|
||||
$color-txt-brd: $color-border !default;
|
||||
$color-txt-text: $color-8 !default;
|
||||
$color-txt-hover-brd: $color-3 !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: 14px !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;
|
||||
204
app/webpacker/css/admin_v3/shared/tables.scss
Normal file
204
app/webpacker/css/admin_v3/shared/tables.scss
Normal file
@@ -0,0 +1,204 @@
|
||||
table {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
border-collapse: separate;
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 7px 5px;
|
||||
background: $color-tbl-cell-bg;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
img {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-left: 4px 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-bottom: none;
|
||||
background-color: $color-tbl-thead-bg;
|
||||
color: $color-tbl-thead-txt;
|
||||
font-size: 13px;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
td {
|
||||
border-bottom: 4px solid $color-border; // TODO: Let the table background colour come through, to enable drop shadows
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
11
app/webpacker/css/admin_v3/v3_overrides.scss
Normal file
11
app/webpacker/css/admin_v3/v3_overrides.scss
Normal file
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user