use bottom sheet style for dropdowns on mobile (#324)

* use bottom sheet style for dropdowns on mobile

* fix tabs

less/modules/bottom-sheet.less

@@ -0,0 +1,102 @@
+.bottom-sheet {
+	display: block;
+	visibility: hidden;
+	
+	position: fixed;
+	left: 0;
+	right: 0;
+	bottom: 0;
+
+	margin: 0;
+	padding: 0 5px;
+	max-height: ~"calc(100% - 86px)";
+
+	background: #fff;
+	box-shadow: 0 2px 6px rgba(0,0,0,0.35);
+	overflow: auto;
+	-webkit-overflow-scrolling: touch;
+	transform: translate3d(0, 350px, 0);
+	transition: transform 0.3s, visibility 0s 0.3s;
+	z-index: 995;
+    	padding: 5px 0 10px;
+	
+
+	li {
+	    
+	    a {
+	        padding: 5px 20px;
+	    }
+		
+		&.divider {
+		    padding: 0;
+		}
+
+		&.active {
+			background-color: @btn-primary-bg;
+			color: @btn-primary-color;
+		}
+	}
+}
+
+.bottom-sheet-open {
+	transform: none;
+	visibility: visible;
+	transition-delay: 0s;
+	top: initial;
+}
+
+@media (max-width: @screen-sm-max) {
+    .post-bar {
+        .thread-tools, [component="thread/sort"], [component="topic/watch"] {
+            .dropdown-menu {
+            	.bottom-sheet;
+            }
+            
+            &.open {
+                .dropdown-menu {
+            		.bottom-sheet-open;
+            	}
+            }
+            
+            .dropdown-backdrop {
+                background-color: rgba(0,0,0,.1);
+            }
+        }
+    }
+    
+    .category {
+        [component="topic/watch"], [component="thread/sort"], .thread-tools {
+            .dropdown-menu {
+            	.bottom-sheet;
+            }
+            
+            &.open {
+                .dropdown-menu {
+            		.bottom-sheet-open;
+            	}
+            }
+            
+            .dropdown-backdrop {
+                background-color: rgba(0,0,0,.1);
+            }
+        }
+    }
+    
+    .unread {
+        .btn-group {
+            .dropdown-menu {
+            	.bottom-sheet;
+            }
+            
+            &.open {
+                .dropdown-menu {
+            		.bottom-sheet-open;
+            	}
+            }
+            
+            .dropdown-backdrop {
+                background-color: rgba(0,0,0,.1);
+            }
+        }
+    }
+}

less/persona.less

@@ -32,6 +32,8 @@
 @import "modules/morph";
 @import "modules/composer-default";
 
+@import "modules/bottom-sheet";
+
 
 @material-primary:         #337ab7;
 @material-success:         #4CAF50;