Browse Source

Improve menu scrolling on small screens

Michael Rose 5 years ago
parent
commit
ae95c7192b
3 changed files with 11 additions and 9 deletions
  1. 6
    5
      assets/css/main.css
  2. 1
    1
      assets/css/main.min.css
  3. 4
    3
      assets/less/dl-menu.less

+ 6
- 5
assets/css/main.css View File

@@ -1494,16 +1494,16 @@ svg:not(:root) {
1494 1494
 .dl-menuwrapper li p {
1495 1495
   padding: 15px 20px;
1496 1496
   margin: 0;
1497
-  font-size: 12px;
1498
-  font-size: 0.75rem;
1497
+  font-size: 14px;
1498
+  font-size: 0.875rem;
1499 1499
   color: rgba(255, 255, 255, 0.8);
1500 1500
 }
1501 1501
 
1502 1502
 .dl-menuwrapper li p a {
1503 1503
   display: inline;
1504 1504
   padding: 0;
1505
-  font-size: 12px;
1506
-  font-size: 0.75rem;
1505
+  font-size: 14px;
1506
+  font-size: 0.875rem;
1507 1507
 }
1508 1508
 
1509 1509
 .dl-menuwrapper li i {
@@ -1557,7 +1557,9 @@ svg:not(:root) {
1557 1557
   position: absolute;
1558 1558
   width: 100%;
1559 1559
   max-width: 400px;
1560
+  max-height: 600px;
1560 1561
   margin: 0;
1562
+  overflow-y: auto;
1561 1563
   pointer-events: none;
1562 1564
   opacity: 0;
1563 1565
   -webkit-transform: translateY(10px);
@@ -1572,7 +1574,6 @@ svg:not(:root) {
1572 1574
 @media only screen and (min-width: 48em) {
1573 1575
   .dl-menuwrapper .dl-menu {
1574 1576
     max-height: 650px;
1575
-    overflow-y: auto;
1576 1577
     -webkit-border-top-right-radius: 3px;
1577 1578
             border-top-right-radius: 3px;
1578 1579
     -webkit-border-bottom-right-radius: 3px;

+ 1
- 1
assets/css/main.min.css
File diff suppressed because it is too large
View File


+ 4
- 3
assets/less/dl-menu.less View File

@@ -71,12 +71,12 @@
71 71
 		p {
72 72
 			margin: 0;
73 73
 			padding: 15px 20px;
74
-			.font-rem(12);
74
+			.font-rem(14);
75 75
 			color: fade(@white,80);
76 76
 			a {
77 77
 				display: inline;
78 78
 				padding: 0;
79
-				.font-rem(12);
79
+				.font-rem(14);
80 80
 			}
81 81
 		}
82 82
 		i {
@@ -125,6 +125,8 @@
125 125
 		position: absolute;
126 126
 		width: 100%;
127 127
 		max-width: 400px;
128
+		overflow-y: auto;
129
+		max-height: 600px;
128 130
 		opacity: 0;
129 131
 		pointer-events: none;
130 132
 		box-shadow: 0 12px 24px fade(@black,35);
@@ -136,7 +138,6 @@
136 138
 		backface-visibility: hidden;
137 139
 		@media @medium {
138 140
 			.border-radius(3px,3px,3px,3px);
139
-			overflow-y: auto;
140 141
 			max-height: 650px;
141 142
 		}
142 143
 	}

Loading…
Cancel
Save