mirror-github-minimalbible/MinimalBible.github.io
1
0
Fork 0
mirror of https://github.com/MinimalBible/MinimalBible.github.io synced 2025-11-03 18:10:31 -05:00
Code Issues Releases Wiki Activity

Improve menu scrolling on small screens

Browse Source
This commit is contained in:
Michael Rose
2014-02-26 15:20:30 -05:00
parent 062be19e2f
commit ae95c7192b
3 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
assets/css/main.css
View File

@ -1494,16 +1494,16 @@ svg:not(:root) {
.dl-menuwrapper li p { .dl-menuwrapper li p {
padding: 15px 20px; padding: 15px 20px;
margin: 0; margin: 0;
font-size: 12px; font-size: 14px;
font-size: 0.75rem; font-size: 0.875rem;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
} }
.dl-menuwrapper li p a { .dl-menuwrapper li p a {
display: inline; display: inline;
padding: 0; padding: 0;
font-size: 12px; font-size: 14px;
font-size: 0.75rem; font-size: 0.875rem;
} }
.dl-menuwrapper li i { .dl-menuwrapper li i {
@ -1557,7 +1557,9 @@ svg:not(:root) {
position: absolute; position: absolute;
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
max-height: 600px;
margin: 0; margin: 0;
overflow-y: auto;
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
-webkit-transform: translateY(10px); -webkit-transform: translateY(10px);
@ -1572,7 +1574,6 @@ svg:not(:root) {
@media only screen and (min-width: 48em) { @media only screen and (min-width: 48em) {
.dl-menuwrapper .dl-menu { .dl-menuwrapper .dl-menu {
max-height: 650px; max-height: 650px;
overflow-y: auto;
-webkit-border-top-right-radius: 3px; -webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px; border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-right-radius: 3px;

2
assets/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

7
assets/less/dl-menu.less
View File

@ -71,12 +71,12 @@
p { p {
margin: 0; margin: 0;
padding: 15px 20px; padding: 15px 20px;
.font-rem(12); .font-rem(14);
color: fade(@white,80); color: fade(@white,80);
a { a {
display: inline; display: inline;
padding: 0; padding: 0;
.font-rem(12); .font-rem(14);
} }
} }
i { i {
@ -125,6 +125,8 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
overflow-y: auto;
max-height: 600px;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
box-shadow: 0 12px 24px fade(@black,35); box-shadow: 0 12px 24px fade(@black,35);
@ -136,7 +138,6 @@
backface-visibility: hidden; backface-visibility: hidden;
@media @medium { @media @medium {
.border-radius(3px,3px,3px,3px); .border-radius(3px,3px,3px,3px);
overflow-y: auto;
max-height: 650px; max-height: 650px;
} }
} }