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

Style pagination links

Browse Source 
And provide a basic hover state for most other buttons.
The pagination button hover and active states will need updating.

The darker background colour sometimes wraps a whole table (eg products table).
This commit is contained in:
David Cook
2023-06-01 15:24:53 +10:00
parent 744f95809a
commit 821446e150
3 changed files with 43 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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";

38
app/webpacker/css/admin_v3/components/pagination.scss Normal file
View 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;
}
}
}

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

@@ -14,7 +14,7 @@ $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-hover: lighten($color-link, 2) !default;
$color-link-active: $color-2 !default;
$color-link-focus: $color-2 !default;
$color-link-visited: $color-3 !default;
@@ -32,7 +32,8 @@ $color-tbl-thead-bg: $color-7 !default;
// Button colors
$color-btn-bg: $color-3 !default;
$color-btn-text: $color-1 !default;
$color-btn-hover-bg: $color-2 !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
@@ -56,7 +57,7 @@ $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-bg: lighten($color-sel-bg, 2) !default;
$color-sel-hover-text: $color-1 !default;
// Text inputs colors