copyleftie
/
pinafore
1
0
Fork 0
Code Issues Pull Requests Releases Activity

fix: improve active state of navbar (#996)

This commit is contained in:
Nolan Lawson 2019-02-15 19:03:18 -08:00 committed by GitHub
parent beaac988b3
commit 25aea9f30a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 30 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/routes/_components/NavItem.html
View File

@ -124,6 +124,14 @@
fill: var(--nav-svg-fill-hover);
}
.main-nav-link:active {
background-color: var(--nav-active-bg);
}
.main-nav-link.selected:active {
background-color: var(--nav-a-selected-active-bg);
}
.nav-link-svg {
display: inline-block;
fill: var(--nav-svg-fill);
@ -220,9 +228,14 @@
if (!selected) {
return
}
let scroller = getScrollContainer()
let { scrollTop } = scroller
if (scrollTop === 0) {
return
}
e.preventDefault()
e.stopPropagation()
smoothScroll(getScrollContainer(), 0)
smoothScroll(scroller, 0)
}
}
}

2
src/scss/themes/_base.scss
View File

@ -26,10 +26,12 @@
--form-border: #{darken($border-color, 10%)};
--nav-bg: #{$main-theme-color};
--nav-active-bg: #{lighten($main-theme-color, 9%)};
--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-svg-fill: #{$secondary-text-color};
--nav-text-color: #{$secondary-text-color};

10
src/scss/themes/_dark_navbar.scss Normal file
View File

@ -0,0 +1,10 @@
:root {
--nav-bg: #{lighten($body-bg-color, 10%)};
--nav-a-bg-hover: #{lighten($body-bg-color, 25%)};
--nav-active-bg: #{lighten($body-bg-color, 35%)};
--nav-a-selected-bg: #{lighten($body-bg-color, 25%)};
--nav-a-selected-bg-hover: #{lighten($body-bg-color, 40%)};
--nav-a-selected-active-bg: #{lighten($body-bg-color, 50%)};
--button-primary-bg: #{darken($main-theme-color, 5%)};
}

10
src/scss/themes/hacker.scss
View File

@ -13,13 +13,5 @@ $compose-background: lighten($main-theme-color, 52%);
@import "_base.scss";
@import "_dark.scss";
@import "_dark_navbar.scss";
@import "_dark_scrollbars.scss";
:root {
--nav-bg: #{lighten($body-bg-color, 10%)};
--nav-a-selected-bg: #{lighten($body-bg-color, 25%)};
--nav-a-bg-hover: #{lighten($body-bg-color, 25%)};
--nav-a-selected-bg-hover: #{lighten($body-bg-color, 40%)};
--button-primary-bg: #{darken($main-theme-color, 5%)};
}

10
src/scss/themes/punk.scss
View File

@ -13,13 +13,5 @@ $compose-background: lighten($main-theme-color, 52%);
@import "_base.scss";
@import "_dark.scss";
@import "_dark_navbar.scss";
@import "_dark_scrollbars.scss";
:root {
--nav-bg: #{lighten($body-bg-color, 10%)};
--nav-a-selected-bg: #{lighten($body-bg-color, 25%)};
--nav-a-bg-hover: #{lighten($body-bg-color, 25%)};
--nav-a-selected-bg-hover: #{lighten($body-bg-color, 40%)};
--button-primary-bg: #{darken($main-theme-color, 5%)};
}

10
src/scss/themes/riot.scss
View File

@ -13,13 +13,5 @@ $compose-background: lighten($main-theme-color, 52%);
@import "_base.scss";
@import "_dark.scss";
@import "_dark_navbar.scss";
@import "_dark_scrollbars.scss";
:root {
--nav-bg: #{lighten($body-bg-color, 10%)};
--nav-a-selected-bg: #{lighten($body-bg-color, 25%)};
--nav-a-bg-hover: #{lighten($body-bg-color, 25%)};
--nav-a-selected-bg-hover: #{lighten($body-bg-color, 40%)};
--button-primary-bg: #{darken($main-theme-color, 5%)};
}

10
src/scss/themes/sorcery.scss
View File

@ -18,13 +18,5 @@ $scrollbar-face-active: #{lighten($main-theme-color, 1%)};
@import "_base.scss";
@import "_dark.scss";
@import "_dark_navbar.scss";
@import "_dark_scrollbars.scss";
:root {
--nav-bg: #{lighten($body-bg-color, 10%)};
--nav-a-selected-bg: #{lighten($body-bg-color, 25%)};
--nav-a-bg-hover: #{lighten($body-bg-color, 25%)};
--nav-a-selected-bg-hover: #{lighten($body-bg-color, 40%)};
--button-primary-bg: #{darken($main-theme-color, 5%)};
}