muk_web/muk_web_theme/static/src/scss/apps.scss

/**********************************************************************************
* 
*    Copyright (C) 2017 MuK IT GmbH
*
*    This program is free software: you can redistribute it and/or modify
*    it under the terms of the GNU Affero General Public License as
*    published by the Free Software Foundation, either version 3 of the
*    License, or (at your option) any later version.
*
*    This program is distributed in the hope that it will be useful,
*    but WITHOUT ANY WARRANTY; without even the implied warranty of
*    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
*    GNU Affero General Public License for more details.
*
*    You should have received a copy of the GNU Affero General Public License
*    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*
**********************************************************************************/

.o_menu_apps {
	.full {    
		width: 46px;
		font-size: 18px;
		text-align: center;
	}
    .dropdown-menu.show {
		@include mk-full-screen-sections();
		align-content: flex-start;
		overflow: inital;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		@include media-breakpoint-up(lg) {
		    padding: {
		        left: 20vw;
		        right: 20vw;
		    }
		}
		.o_app {
		    display: flex;
			margin-top: 20px;
		    align-items: center;
		    flex-direction: column;
		    justify-content: flex-start;
		    width: percentage(1/3);
		    @include media-breakpoint-up(sm) {
		        width: percentage(1/4);
		    }
		    @include media-breakpoint-up(md) {
		        width: percentage(1/6);
		    }
		    &:hover, &:active, &.active {
				background: none;
				.o-app-icon {
					box-shadow: 0 8px 15px -10px black;
				    transform: translateY(-1px);
				}
		    }
		}
		.has-results ~ .o_app {
		    display: none;
		}
		.o-app-icon {
		    height: auto;
		    max-width: 7rem;
		    width: 100%;
		}
		.o-app-name {
			color: $gray-100; 
		}
		.form-row {
		    width: 100%;
		}
		.mk_search_container {
			margin-top: 25px;
			.mk_search_input {
				input:focus {
			    	box-shadow: none;
					border: 1px solid $gray-400;
			    }
			}
			&.has-results {
		        height: 100%;
		        .mk_search_input {
		            height: 3em;
		        }
		        .mk_search_results {
		            height: calc(100% - 3em);
		            .mk_menu_search_result {
					    display: block;
					    cursor: pointer;
					    align-items: center;
					    padding-left: 3rem;
					    padding-right: 1rem;
					    background-position: left;
					    background-repeat: no-repeat;
					    background-size: contain;
	            	    white-space: nowrap;
					    overflow: hidden;
					    text-overflow: ellipsis;
		            	color: $gray-100;
		            	&:hover, &:active, &.active {
		            		background-color: rgba(255, 255, 255, 0.05);
		            	} 
					}
		        }
		    }
			@include media-breakpoint-down(md) {
				padding-right: 5px;
			}
		}
	}
}