generic class for bottom-sheet

main
pichalite 8 years ago
parent 28f21f4277
commit c21f2160dc

@ -1,4 +1,6 @@
.bottom-sheet {
@media (max-width: @screen-sm-max) {
.dropdown-menu {
display: block;
visibility: hidden;
@ -38,24 +40,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 +54,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);
}
}
}
}

@ -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>

@ -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>

@ -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>

@ -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">

@ -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>

@ -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>

@ -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">

@ -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>

Loading…
Cancel
Save