Browse Source
Small tweak to have app-name text color background dependent. Now you can chose any picture of any color as backgroud and you can be sure you are able to read the name.
pull/68/head
Small tweak to have app-name text color background dependent. Now you can chose any picture of any color as backgroud and you can be sure you are able to read the name.
pull/68/head
cfs
5 years ago
1 changed files with 114 additions and 113 deletions
@ -1,114 +1,115 @@ |
|||
/********************************************************************************** |
|||
* |
|||
* 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, &:focus, &: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; |
|||
} |
|||
} |
|||
} |
|||
/********************************************************************************** |
|||
* |
|||
* 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, &:focus, &: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; |
|||
mix-blend-mode: difference; |
|||
} |
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
} |
Write
Preview
Loading…
Cancel
Save
Reference in new issue