platypush/platypush
platypush
/
platypush
2
2
Fork 4
Code Issues 46 Pull Requests Packages Projects 4 Releases Wiki Activity

Style improvements for the main navigator

This commit is contained in:
Fabio Manganiello 2022-11-27 12:56:17 +01:00
parent 681f307d04
commit b5653e070e
Signed by: blacklight
GPG Key ID: D90FBA7F76362774
2 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
platypush/backend/http/webapp/src/components/Nav.vue
View File

@ -110,7 +110,7 @@ $footer-collapsed-height: 4em;
$footer-expanded-height: 7.5em; $footer-expanded-height: 7.5em;
nav { nav {
@media screen and (max-width: $tablet) { @media screen and (max-width: #{$tablet - 1px}) {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
background: $nav-bg; background: $nav-bg;
@ -182,11 +182,12 @@ nav {
.toggler { .toggler {
width: 100%; width: 100%;
height: $toggler-height;
display: flex; display: flex;
background: $nav-toggler-bg; background: $nav-toggler-bg;
font-size: 1.5em; font-size: 1.5em;
cursor: pointer; cursor: pointer;
padding: 0.6em; padding: 0.4em;
align-items: center; align-items: center;
box-shadow: $nav-toggler-shadow; box-shadow: $nav-toggler-shadow;
} }
@ -199,7 +200,7 @@ nav {
margin-left: 1em; margin-left: 1em;
} }
@media screen and (max-width: $tablet) { @media screen and (max-width: #{$tablet - 1px}) {
text-align: right; text-align: right;
margin-right: 0.25em; margin-right: 0.25em;
flex-grow: 1; flex-grow: 1;
@ -248,7 +249,7 @@ nav {
} }
} }
@media screen and (max-width: $tablet) { @media screen and (max-width: #{$tablet - 1px}) {
height: auto; height: auto;
} }
@ -262,10 +263,14 @@ nav {
.toggler { .toggler {
height: $toggler-height; height: $toggler-height;
background: none;
text-align: center; text-align: center;
padding: 0.4em;
box-shadow: none; box-shadow: none;
background: $nav-toggler-collapsed-bg;
@media screen and (max-width: #{$tablet - 1px}) {
background: $nav-toggler-collapsed-mobile-bg;
color: $nav-toggler-collapsed-mobile-fg;
}
} }
.footer { .footer {
@ -275,7 +280,7 @@ nav {
margin-bottom: .5em; margin-bottom: .5em;
} }
@media screen and (max-width: $tablet) { @media screen and (max-width: #{$tablet - 1px}) {
.footer { .footer {
display: none; display: none;
} }
@ -289,7 +294,7 @@ nav {
overflow: hidden; overflow: hidden;
&.plugins { &.plugins {
@media screen and (min-width: $tablet) and (max-width: $desktop - 1px) { @media screen and (min-width: $tablet) and (max-width: #{$desktop - 1px}) {
margin: 2em 0; margin: 2em 0;
} }
} }
@ -321,7 +326,7 @@ nav {
margin-right: 0; margin-right: 0;
} }
@media screen and (max-width: $tablet) { @media screen and (max-width: #{$tablet - 1px}) {
display: none; display: none;
} }
} }

3
platypush/backend/http/webapp/src/style/themes/light.scss
View File

@ -89,6 +89,9 @@ $disabled-fg: rgb(155, 155, 155);
$nav-bg: white !default; $nav-bg: white !default;
$nav-fg: #5a5e5b !default; $nav-fg: #5a5e5b !default;
$nav-toggler-bg: rgb(235, 235, 235) !default; $nav-toggler-bg: rgb(235, 235, 235) !default;
$nav-toggler-collapsed-bg: $nav-bg !default;
$nav-toggler-collapsed-mobile-bg: #3c3c3c !default;
$nav-toggler-collapsed-mobile-fg: white !default;
$nav-toggler-shadow: 0 0 1px 2px #c9cdca !default; $nav-toggler-shadow: 0 0 1px 2px #c9cdca !default;
$nav-footer-bg: rgb(240, 240, 240) !default; $nav-footer-bg: rgb(240, 240, 240) !default;
$nav-entry-selected-bg: $selected-bg !default; $nav-entry-selected-bg: $selected-bg !default;