thang/notes
1
0
Fork 0
mirror of https://github.com/thangisme/notes.git synced 2024-11-02 23:17:31 -04:00
Code Issues Projects Releases Wiki Activity

Improved navigation for mobile: larger nav items

Browse Source 
(cherry picked from commit 5dce2adc2871e6814dbf42a658e6b364f4dc6641)
This commit is contained in:
Silvio Giebl 2019-08-10 22:22:57 +02:00
parent bf86c33fe1
commit 8e6e3dddd3
2 changed files with 26 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
_sass/navigation.scss
View File

@ -10,6 +10,7 @@
.nav-list-item { .nav-list-item {
@include fs-4; @include fs-4;
position: relative;
margin: 0; margin: 0;
@include mq(md) { @include mq(md) {
@ -18,12 +19,18 @@
.nav-list-link { .nav-list-link {
display: block; display: block;
min-height: $nav-list-item-height; min-height: $nav-list-item-height-sm;
line-height: #{$nav-list-item-height - 2 * $sp-1}; line-height: #{$nav-list-item-height-sm - 2 * $sp-1};
padding-top: $sp-1; padding-top: $sp-1;
padding-right: $gutter-spacing-sm; padding-right: $gutter-spacing-sm;
padding-bottom: $sp-1; padding-bottom: $sp-1;
padding-left: $nav-list-item-height-sm;
@include mq(md) {
min-height: $nav-list-item-height;
line-height: #{$nav-list-item-height - 2 * $sp-1};
padding-left: $nav-list-item-height; padding-left: $nav-list-item-height;
}
&.active { &.active {
font-weight: 600; font-weight: 600;
@ -38,13 +45,22 @@
.nav-list-expander { .nav-list-expander {
position: absolute; position: absolute;
width: $nav-list-item-height-sm;
height: $nav-list-item-height-sm;
padding-top: #{$nav-list-item-height-sm / 4};
padding-right: #{$nav-list-item-height-sm / 4};
padding-bottom: #{$nav-list-item-height-sm / 4};
padding-left: #{$nav-list-item-height-sm / 4};
fill: $link-color;
@include mq(md) {
width: $nav-list-item-height; width: $nav-list-item-height;
height: $nav-list-item-height; height: $nav-list-item-height;
padding-top: #{$nav-list-item-height / 4}; padding-top: #{$nav-list-item-height / 4};
padding-right: #{$nav-list-item-height / 4}; padding-right: #{$nav-list-item-height / 4};
padding-bottom: #{$nav-list-item-height / 4}; padding-bottom: #{$nav-list-item-height / 4};
padding-left: #{$nav-list-item-height / 4}; padding-left: #{$nav-list-item-height / 4};
fill: $link-color; }
&:hover { &:hover {
background-color: $feedback-color; background-color: $feedback-color;

1
_sass/support/_variables.scss
View File

@ -114,6 +114,7 @@ $gutter-spacing-sm: $sp-4 !default;
$nav-width: 264px !default; $nav-width: 264px !default;
$nav-width-md: 248px !default; $nav-width-md: 248px !default;
$nav-list-item-height: $sp-6 !default; $nav-list-item-height: $sp-6 !default;
$nav-list-item-height-sm: $sp-8 !default;
$content-width: 800px !default; $content-width: 800px !default;
$header-height: 60px !default; $header-height: 60px !default;
$search-results-width: 500px !default; $search-results-width: 500px !default;