mirror of
https://github.com/thangisme/notes.git
synced 2024-09-06 19:24:22 -04:00
Improved navigation for mobile: larger nav items
(cherry picked from commit 5dce2adc2871e6814dbf42a658e6b364f4dc6641)
This commit is contained in:
parent
bf86c33fe1
commit
8e6e3dddd3
@ -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;
|
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 {
|
&.active {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@ -38,14 +45,23 @@
|
|||||||
|
|
||||||
.nav-list-expander {
|
.nav-list-expander {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: $nav-list-item-height;
|
width: $nav-list-item-height-sm;
|
||||||
height: $nav-list-item-height;
|
height: $nav-list-item-height-sm;
|
||||||
padding-top: #{$nav-list-item-height / 4};
|
padding-top: #{$nav-list-item-height-sm / 4};
|
||||||
padding-right: #{$nav-list-item-height / 4};
|
padding-right: #{$nav-list-item-height-sm / 4};
|
||||||
padding-bottom: #{$nav-list-item-height / 4};
|
padding-bottom: #{$nav-list-item-height-sm / 4};
|
||||||
padding-left: #{$nav-list-item-height / 4};
|
padding-left: #{$nav-list-item-height-sm / 4};
|
||||||
fill: $link-color;
|
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 {
|
&:hover {
|
||||||
background-color: $feedback-color;
|
background-color: $feedback-color;
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user