blacklight/platypush
1
0
Fork 0
forked from platypush/platypush
Code Issues Pull requests Projects Releases Packages Wiki Activity

Style improvements for the main navigator

Browse source
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;
nav {
@media screen and (max-width: $tablet) {
@media screen and (max-width: #{$tablet - 1px}) {
width: 100%;
height: 100vh;
background: $nav-bg;
@ -182,11 +182,12 @@ nav {
.toggler {
width: 100%;
height: $toggler-height;
display: flex;
background: $nav-toggler-bg;
font-size: 1.5em;
cursor: pointer;
padding: 0.6em;
padding: 0.4em;
align-items: center;
box-shadow: $nav-toggler-shadow;
}
@ -199,7 +200,7 @@ nav {
margin-left: 1em;
}
@media screen and (max-width: $tablet) {
@media screen and (max-width: #{$tablet - 1px}) {
text-align: right;
margin-right: 0.25em;
flex-grow: 1;
@ -248,7 +249,7 @@ nav {
}
}
@media screen and (max-width: $tablet) {
@media screen and (max-width: #{$tablet - 1px}) {
height: auto;
}
@ -262,10 +263,14 @@ nav {
.toggler {
height: $toggler-height;
background: none;
text-align: center;
padding: 0.4em;
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 {
@ -275,7 +280,7 @@ nav {
margin-bottom: .5em;
}
@media screen and (max-width: $tablet) {
@media screen and (max-width: #{$tablet - 1px}) {
.footer {
display: none;
}
@ -289,7 +294,7 @@ nav {
overflow: hidden;
&.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;
}
}
@ -321,7 +326,7 @@ nav {
margin-right: 0;
}
@media screen and (max-width: $tablet) {
@media screen and (max-width: #{$tablet - 1px}) {
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-fg: #5a5e5b !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-footer-bg: rgb(240, 240, 240) !default;
$nav-entry-selected-bg: $selected-bg !default;