From 752fd5df885a4cbcee3f21f60dcc0e1fe2525718 Mon Sep 17 00:00:00 2001 From: cfs Date: Thu, 14 Mar 2019 10:30:21 +0100 Subject: [PATCH] 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. --- muk_web_theme/static/src/scss/apps.scss | 227 ++++++++++++------------ 1 file changed, 114 insertions(+), 113 deletions(-) diff --git a/muk_web_theme/static/src/scss/apps.scss b/muk_web_theme/static/src/scss/apps.scss index 73700d4..dbea726 100644 --- a/muk_web_theme/static/src/scss/apps.scss +++ b/muk_web_theme/static/src/scss/apps.scss @@ -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 . -* -**********************************************************************************/ - -.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 . +* +**********************************************************************************/ + +.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; + } + } + } } \ No newline at end of file