data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

fix: contrast for active navigation (#2274)

Browse source 
Increase the background contrast for the selected page.
Increase the prominance of the indictor bar so we dont need to rely on
the background to have a strong contrast difference.
This commit is contained in:
Nick Colley 2022-12-02 21:58:29 +00:00 committed by GitHub
parent 7417e89f78
commit da28e98cfb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/scss/themes/_base.scss
View file

@ -26,21 +26,21 @@
--form-border: #{darken($border-color, 10%)}; --form-border: #{darken($border-color, 10%)};
--nav-bg: #{$main-theme-color}; --nav-bg: #{$main-theme-color};
--nav-active-bg: #{lighten($main-theme-color, 9%)}; --nav-active-bg: #{lighten($main-theme-color, 3%)};
--nav-border: #{darken($main-theme-color, 10%)}; --nav-border: #{darken($main-theme-color, 10%)};
--nav-a-border: #{$main-theme-color}; --nav-a-border: #{$main-theme-color};
--nav-a-selected-border: #{$secondary-text-color}; --nav-a-selected-border: #{$secondary-text-color};
--nav-a-selected-bg: #{lighten($main-theme-color, 10%)}; --nav-a-selected-bg: #{lighten($main-theme-color, 3%)};
--nav-a-selected-active-bg: #{lighten($main-theme-color, 17%)}; --nav-a-selected-active-bg: var(--nav-a-selected-bg-hover);
--nav-svg-fill: #{$secondary-text-color}; --nav-svg-fill: #{$secondary-text-color};
--nav-text-color: #{$secondary-text-color}; --nav-text-color: #{$secondary-text-color};
--nav-indicator-bg: #{rgba($secondary-text-color, 0.8)}; --nav-indicator-bg: #{rgba($secondary-text-color, 0.8)};
--nav-indicator-bg-hover: #{rgba($secondary-text-color, 0.85)}; --nav-indicator-bg-hover: #{rgba($secondary-text-color, 0.6)};
--nav-a-selected-border-hover: #{$secondary-text-color}; --nav-a-selected-border-hover: #{$secondary-text-color};
--nav-a-selected-bg-hover: #{lighten($main-theme-color, 15%)}; --nav-a-selected-bg-hover: #{lighten($main-theme-color, 4.5%)};
--nav-a-bg-hover: #{lighten($main-theme-color, 5%)}; --nav-a-bg-hover: #{lighten($main-theme-color, 1.5%)};
--nav-a-border-hover: #{$main-theme-color}; --nav-a-border-hover: #{rgba($secondary-text-color, 0.6)};
--nav-svg-fill-hover: #{$secondary-text-color}; --nav-svg-fill-hover: #{$secondary-text-color};
--nav-text-color-hover: #{$secondary-text-color}; --nav-text-color-hover: #{$secondary-text-color};

7
src/scss/variables.scss
View file

@ -21,9 +21,9 @@
// //
--nav-font-size: 1rem; --nav-font-size: 1rem;
--nav-indicator-height: 2px; --nav-indicator-height: 3px;
--nav-border-bottom: 0px; --nav-border-bottom: 0px;
--nav-icon-pad-v: 15px; --nav-icon-pad-v: 14px;
--nav-icon-pad-h: 20px; --nav-icon-pad-h: 20px;
--nav-icon-size: 20px; --nav-icon-size: 20px;
@ -46,10 +46,9 @@
--main-border-size: 1px; --main-border-size: 1px;
@media (max-width: 991px) { @media (max-width: 991px) {
--nav-icon-pad-v: 20px; --nav-icon-pad-v: 18px;
--nav-icon-pad-h: 10px; --nav-icon-pad-h: 10px;
--nav-icon-size: 25px; --nav-icon-size: 25px;
--nav-indicator-height: 3px;
--nav-border-bottom: 0px; --nav-border-bottom: 0px;
} }