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

fix: tweak nav indicator so it's a bit more prominent (#1788)

Browse source
This commit is contained in:
Nolan Lawson 2020-05-20 21:10:56 -07:00 committed by GitHub
parent 4fc41affe4
commit 1fc14107c8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/routes/_components/NavItem.html
View file

@ -12,7 +12,9 @@
/> />
<span class="nav-link-label">{label}</span> <span class="nav-link-label">{label}</span>
</div> </div>
<div class="nav-indicator-wrapper">
<div class="nav-indicator" ref:indicator></div> <div class="nav-indicator" ref:indicator></div>
</div>
</a> </a>
<style> <style>
.main-nav-link { .main-nav-link {
@ -40,10 +42,16 @@
background: var(--nav-a-selected-bg-hover); background: var(--nav-a-selected-bg-hover);
} }
.nav-indicator { .nav-indicator-wrapper {
width: 100%; width: 100%;
height: var(--nav-indicator-height); height: var(--nav-indicator-height);
background: var(--nav-a-border); background: var(--nav-a-border);
display: flex;
}
.nav-indicator {
flex: 1;
background: var(--nav-a-border);
transform-origin: left; transform-origin: left;
} }
@ -56,12 +64,16 @@
background: var(--nav-a-border-hover); background: var(--nav-a-border-hover);
} }
.main-nav-link.selected .nav-indicator-wrapper {
background: var(--nav-a-border-hover);
}
.main-nav-link.selected .nav-indicator { .main-nav-link.selected .nav-indicator {
background: var(--nav-a-selected-border); background: var(--nav-indicator-bg);
} }
.main-nav-link.selected:hover .nav-indicator { .main-nav-link.selected:hover .nav-indicator {
background: var(--nav-a-selected-border-hover); background: var(--nav-indicator-bg-hover);
} }
.main-nav-link:hover { .main-nav-link:hover {

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

@ -34,6 +34,8 @@
--nav-a-selected-active-bg: #{lighten($main-theme-color, 17%)}; --nav-a-selected-active-bg: #{lighten($main-theme-color, 17%)};
--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-hover: #{rgba($secondary-text-color, 0.85)};
--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, 15%)};

6
src/scss/variables.scss
View file

@ -19,8 +19,8 @@
// //
--nav-font-size: 1rem; --nav-font-size: 1rem;
--nav-indicator-height: 1px; --nav-indicator-height: 2px;
--nav-border-bottom: 1px; --nav-border-bottom: 0px;
--nav-icon-pad-v: 15px; --nav-icon-pad-v: 15px;
--nav-icon-pad-h: 20px; --nav-icon-pad-h: 20px;
--nav-icon-size: 20px; --nav-icon-size: 20px;
@ -45,6 +45,8 @@
--nav-icon-pad-v: 20px; --nav-icon-pad-v: 20px;
--nav-icon-pad-h: 10px; --nav-icon-pad-h: 10px;
--nav-icon-size: 25px; --nav-icon-size: 25px;
--nav-indicator-height: 4px;
--nav-border-bottom: 0px;
} }
@media (max-width: 767px) { @media (max-width: 767px) {