fix: contrast for active navigation (#2274)
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:
parent
7417e89f78
commit
da28e98cfb
|
@ -26,21 +26,21 @@
|
|||
--form-border: #{darken($border-color, 10%)};
|
||||
|
||||
--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-a-border: #{$main-theme-color};
|
||||
--nav-a-selected-border: #{$secondary-text-color};
|
||||
--nav-a-selected-bg: #{lighten($main-theme-color, 10%)};
|
||||
--nav-a-selected-active-bg: #{lighten($main-theme-color, 17%)};
|
||||
--nav-a-selected-bg: #{lighten($main-theme-color, 3%)};
|
||||
--nav-a-selected-active-bg: var(--nav-a-selected-bg-hover);
|
||||
--nav-svg-fill: #{$secondary-text-color};
|
||||
--nav-text-color: #{$secondary-text-color};
|
||||
--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-bg-hover: #{lighten($main-theme-color, 15%)};
|
||||
--nav-a-bg-hover: #{lighten($main-theme-color, 5%)};
|
||||
--nav-a-border-hover: #{$main-theme-color};
|
||||
--nav-a-selected-bg-hover: #{lighten($main-theme-color, 4.5%)};
|
||||
--nav-a-bg-hover: #{lighten($main-theme-color, 1.5%)};
|
||||
--nav-a-border-hover: #{rgba($secondary-text-color, 0.6)};
|
||||
--nav-svg-fill-hover: #{$secondary-text-color};
|
||||
--nav-text-color-hover: #{$secondary-text-color};
|
||||
|
||||
|
|
|
@ -21,9 +21,9 @@
|
|||
//
|
||||
|
||||
--nav-font-size: 1rem;
|
||||
--nav-indicator-height: 2px;
|
||||
--nav-indicator-height: 3px;
|
||||
--nav-border-bottom: 0px;
|
||||
--nav-icon-pad-v: 15px;
|
||||
--nav-icon-pad-v: 14px;
|
||||
--nav-icon-pad-h: 20px;
|
||||
--nav-icon-size: 20px;
|
||||
|
||||
|
@ -46,10 +46,9 @@
|
|||
--main-border-size: 1px;
|
||||
|
||||
@media (max-width: 991px) {
|
||||
--nav-icon-pad-v: 20px;
|
||||
--nav-icon-pad-v: 18px;
|
||||
--nav-icon-pad-h: 10px;
|
||||
--nav-icon-size: 25px;
|
||||
--nav-indicator-height: 3px;
|
||||
--nav-border-bottom: 0px;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue