Merge pull request #327 from pichalite/master

generic class for bottom-sheet

less/modules/bottom-sheet.less

@@ -1,4 +1,6 @@
 .bottom-sheet {
+    @media (max-width: @screen-sm-max) {
+        .dropdown-menu {
             display: block;
         	visibility: hidden;
         	
@@ -20,9 +22,7 @@
         	z-index: 995;
         	padding: 5px 0 10px;
         	
-
         	li {    
-	    
         	    a {
         	        padding: 10px 20px;
         	    }
@@ -38,24 +38,13 @@
         	}
         }
         
-.bottom-sheet-open {
+        &.open {
+            .dropdown-menu {
                 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 {
@@ -63,40 +52,3 @@
         }
     }
 }
-    
-    .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, .3);
-            }
-        }
-    }
-    
-    .unread {
-        .btn-group {
-            .dropdown-menu {
-            	.bottom-sheet;
-            }
-            
-            &.open {
-                .dropdown-menu {
-            		.bottom-sheet-open;
-            	}
-            }
-            
-            .dropdown-backdrop {
-                background-color: rgba(0, 0, 0, .3);
-            }
-        }
-    }
-}

templates/partials/account/menu.tpl

@@ -1,4 +1,4 @@
-<div class="btn-group account-fab">
+<div class="btn-group account-fab bottom-sheet">
 	<button type="button" class="fab dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 		<i class="fa fa-ellipsis-v"></i>
 	</button>

templates/partials/category/sort.tpl

@@ -1,5 +1,5 @@
 <!-- IF loggedIn -->
-<div class="btn-group" component="thread/sort">
+<div class="btn-group bottom-sheet" component="thread/sort">
 	<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
 		<span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:sort_by]]</span>
 		<span class="visible-xs-inline"><i class="fa fa-fw fa-sort"></i></span>

templates/partials/category/tools.tpl

@@ -1,5 +1,5 @@
 <!-- IF privileges.editable -->
-<div class="btn-group thread-tools">
+<div class="btn-group thread-tools bottom-sheet">
 	<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
 		<span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:thread_tools.title]]</span>
 		<span class="visible-xs-inline"><i class="fa fa-fw fa-gear"></i></span>

templates/partials/category/watch.tpl

@@ -1,5 +1,5 @@
 <!-- IF config.loggedIn -->
-<div class="btn-group topic-watch-dropdown" component="topic/watch">
+<div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch">
 
 	<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
 

templates/partials/thread_tools.tpl

@@ -1,5 +1,5 @@
 <!-- IF privileges.view_thread_tools -->
-<div class="btn-group thread-tools">
+<div class="btn-group thread-tools bottom-sheet">
 	<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
 		<span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:thread_tools.title]]</span>
 		<span class="visible-xs-inline"><i class="fa fa-fw fa-gear"></i></span>

templates/partials/topic/post-menu.tpl

@@ -1,4 +1,4 @@
-<span component="post/tools" class="dropdown moderator-tools <!-- IF !posts.display_post_menu -->hidden<!-- ENDIF !posts.display_post_menu -->">
+<span component="post/tools" class="dropdown moderator-tools bottom-sheet <!-- IF !posts.display_post_menu -->hidden<!-- ENDIF !posts.display_post_menu -->">
 	<a href="#" data-toggle="dropdown"><i class="fa fa-fw fa-ellipsis-v"></i></a>
 	<ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
 </span>

templates/partials/topic/sort.tpl

@@ -1,5 +1,5 @@
 <!-- IF config.loggedIn -->
-<div class="btn-group" component="thread/sort">
+<div class="btn-group bottom-sheet" component="thread/sort">
 	<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"><span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:sort_by]]</span>
 	<span class="visible-xs-inline"><i class="fa fa-fw fa-sort"></i></span> <span class="caret"></span></button>
 	<ul class="dropdown-menu dropdown-menu-right">

templates/partials/topic/watch.tpl

@@ -1,5 +1,5 @@
 <!-- IF config.loggedIn -->
-<div class="btn-group topic-watch-dropdown" component="topic/watch">
+<div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch">
 	<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
 		<span component="topic/following/menu" <!-- IF !isFollowing -->class="hidden"<!-- ENDIF !isFollowing -->><i class="fa fa-fw fa-bell-o"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:watching]]</span></span>