forked from platypush/platypush
Better style for the sidebar/nav
This commit is contained in:
parent
12096f2dbe
commit
71a3481560
8 changed files with 35 additions and 28 deletions
|
@ -1 +1 @@
|
|||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><link rel="stylesheet" href="/fonts/poppins.css"><title>platypush</title><script defer="defer" type="module" src="/static/js/chunk-vendors.95bedba1.js"></script><script defer="defer" type="module" src="/static/js/app.da4780e5.js"></script><link href="/static/css/chunk-vendors.0fcd36f0.css" rel="stylesheet"><link href="/static/css/app.d7cb662c.css" rel="stylesheet"><script defer="defer" src="/static/js/chunk-vendors-legacy.79dede0c.js" nomodule></script><script defer="defer" src="/static/js/app-legacy.c91c6b3d.js" nomodule></script></head><body><noscript><strong>We're sorry but platypush doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><link rel="stylesheet" href="/fonts/poppins.css"><title>platypush</title><script defer="defer" type="module" src="/static/js/chunk-vendors.95bedba1.js"></script><script defer="defer" type="module" src="/static/js/app.027226cc.js"></script><link href="/static/css/chunk-vendors.0fcd36f0.css" rel="stylesheet"><link href="/static/css/app.aa0132dc.css" rel="stylesheet"><script defer="defer" src="/static/js/chunk-vendors-legacy.79dede0c.js" nomodule></script><script defer="defer" src="/static/js/app-legacy.a7f221b9.js" nomodule></script></head><body><noscript><strong>We're sorry but platypush doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -107,7 +107,7 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
$toggler-height: 2em;
|
||||
$footer-collapsed-height: 4em;
|
||||
$footer-expanded-height: 7.5em;
|
||||
$footer-expanded-height: 7.1em;
|
||||
|
||||
nav {
|
||||
@media screen and (max-width: #{$tablet - 1px}) {
|
||||
|
@ -148,10 +148,9 @@ nav {
|
|||
}
|
||||
|
||||
li {
|
||||
border: $nav-entry-border;
|
||||
border-bottom: $nav-entry-border;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
letter-spacing: 0.04em;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
|
@ -162,13 +161,14 @@ nav {
|
|||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $nav-entry-hover-bg;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: $nav-entry-selected-bg;
|
||||
border: $nav-entry-selected-border;
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $nav-entry-hover-bg;
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.name {
|
||||
|
@ -183,8 +183,8 @@ nav {
|
|||
.toggler {
|
||||
width: 100%;
|
||||
height: $toggler-height;
|
||||
display: flex;
|
||||
background: $nav-toggler-bg;
|
||||
display: flex;
|
||||
font-size: 1.5em;
|
||||
cursor: pointer;
|
||||
padding: 0.4em;
|
||||
|
@ -208,15 +208,20 @@ nav {
|
|||
}
|
||||
|
||||
.plugins {
|
||||
height: calc(100% - #{$toggler-height} - #{$footer-expanded-height} - 1.4em);
|
||||
height: calc(100% - #{$toggler-height} - #{$footer-expanded-height} - 1em);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: $footer-expanded-height;
|
||||
background: $nav-footer-bg;
|
||||
box-shadow: $nav-footer-shadow;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li:last-child {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
|
@ -278,6 +283,7 @@ nav {
|
|||
background: none;
|
||||
padding: 0;
|
||||
margin-bottom: .5em;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: #{$tablet - 1px}) {
|
||||
|
|
|
@ -87,23 +87,24 @@ $active-bg: #8fefb7 !default;
|
|||
$disabled-fg: rgb(155, 155, 155);
|
||||
|
||||
/// Navigator
|
||||
$nav-bg: white !default;
|
||||
$nav-fg: #5a5e5b !default;
|
||||
$nav-toggler-bg: linear-gradient(0deg, #c0e8e4, #e4f8f4) !default;
|
||||
$nav-toggler-collapsed-bg: $nav-bg !default;
|
||||
$nav-bg: #4c4c4c !default;
|
||||
$nav-fg: white !default;
|
||||
$nav-toggler-bg: rgba(0, 0, 0, 0.25) !default;
|
||||
$nav-toggler-collapsed-bg: none !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;
|
||||
$nav-toggler-shadow: 1px 1px 1.5px 1px rgba(0,0,0,0.5) !default;
|
||||
$nav-footer-shadow: 1px -1px 1.5px 1px rgba(0,0,0,0.5) !default;
|
||||
$nav-footer-bg: rgba(0, 0, 0, 0.25) !default;
|
||||
$nav-entry-selected-bg: rgba(80,120,110,0.8) !default;
|
||||
$nav-entry-selected-border: 1px solid #b1ebba !default;
|
||||
$nav-entry-hover-bg: $hover-bg !default;
|
||||
$nav-entry-hover-bg: #5a8c78 !default;
|
||||
$nav-entry-collapsed-selected-bg: rgba(160, 245, 178, 0.95) !default;
|
||||
$nav-entry-collapsed-hover-bg: rgba(160, 245, 178, 0.60) !default;
|
||||
$nav-box-shadow-main: 1px 0 2px #aaa;
|
||||
$nav-box-shadow-main: 1px 1px 1.5px 1px rgba(0,0,0,0.5) !default;
|
||||
$nav-box-shadow-entry: 0 0 1px 1px #c9cdca !default;
|
||||
$nav-box-shadow-collapsed: 1px 0 2px 1px #bbb !default;
|
||||
$nav-entry-border: 1px solid $border-color-3 !default;
|
||||
$nav-entry-border: 1px solid rgba(255,255,255,0.15) !default;
|
||||
$nav-collapsed-bg: white;
|
||||
$nav-collapsed-fg: #5e5e5e;
|
||||
|
||||
|
|
Loading…
Reference in a new issue