thang/notes
1
0
Fork 0
mirror of https://github.com/thangisme/notes.git synced 2024-11-04 13:07:21 -05: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

34
_sass/navigation.scss
View File

@ -10,6 +10,7 @@
.nav-list-item {
@include fs-4;
position: relative;
margin: 0;
@include mq(md) {
@ -18,12 +19,18 @@
.nav-list-link {
display: block;
min-height: $nav-list-item-height;
line-height: #{$nav-list-item-height - 2 * $sp-1};
min-height: $nav-list-item-height-sm;
line-height: #{$nav-list-item-height-sm - 2 * $sp-1};
padding-top: $sp-1;
padding-right: $gutter-spacing-sm;
padding-bottom: $sp-1;
padding-left: $nav-list-item-height;
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;
}
&.active {
font-weight: 600;
@ -38,14 +45,23 @@
.nav-list-expander {
position: absolute;
width: $nav-list-item-height;
height: $nav-list-item-height;
padding-top: #{$nav-list-item-height / 4};
padding-right: #{$nav-list-item-height / 4};
padding-bottom: #{$nav-list-item-height / 4};
padding-left: #{$nav-list-item-height / 4};
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;
height: $nav-list-item-height;
padding-top: #{$nav-list-item-height / 4};
padding-right: #{$nav-list-item-height / 4};
padding-bottom: #{$nav-list-item-height / 4};
padding-left: #{$nav-list-item-height / 4};
}
&:hover {
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-md: 248px !default;
$nav-list-item-height: $sp-6 !default;
$nav-list-item-height-sm: $sp-8 !default;
$content-width: 800px !default;
$header-height: 60px !default;
$search-results-width: 500px !default;