nodebb-theme-persona/less/modules/bottom-sheet.less

.bottom-sheet {
	display: block;
	visibility: hidden;
	
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;

	margin: 0;
	padding: 0 5px;
	max-height: 60%;

	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: 10px 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, .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);
            }
        }
    }
}