autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feature: New right menu on mobile - styles added

Browse Source
This commit is contained in:
gaelle morin 2021-04-13 12:26:35 +02:00 committed by Jean-Baptiste Pasquier
parent b6ca0c85ed
commit 5e34542762
4 changed files with 25 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/styles/content/_index.scss
View File

@ -55,7 +55,7 @@ main {
vertical-align: middle; vertical-align: middle;
} }
>solid-route { /*>solid-route {
&[active]>li { &[active]>li {
background-color: var(--color-heading); background-color: var(--color-heading);
@ -64,16 +64,30 @@ main {
&:hover:not([active])>li { &:hover:not([active])>li {
background: #E4E4E4; background: #E4E4E4;
} }
} }*/
} }
/* Styles use with JS to open/close the sidebar */ /* Styles use with JS to open/close the sidebar */
&.jsRightMenu { &.jsRightMenu {
display: block; display: block;
@media (max-width: 768px) {
position: fixed;
top: 101px;
right: 3px;
height: auto;
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.14);
}
solid-link[active] { solid-link[active] {
color: white; color: white;
background: var(--color-heading); background: var(--color-heading);
>li {
border-bottom: 1px solid var(--color-heading);
} }
}
solid-link:not([active]):hover { solid-link:not([active]):hover {
background: #e4e4e4; background: #e4e4e4;
} }
@ -85,12 +99,12 @@ main {
} }
/* Quick fix. When you got time, use animation on the span instead */ /* Quick fix. When you got time, use animation on the span instead */
@media (max-width: 768px) { /*@media (max-width: 768px) {
ul>li:first-child>span, ul>li:first-child>span,
ul>li:first-child>a { ul>li:first-child>a {
visibility: hidden; visibility: hidden;
} }
} }*/
} }
&.jsRightMenu[open] { &.jsRightMenu[open] {
@ -98,13 +112,13 @@ main {
bottom: 0; bottom: 0;
right: 0; right: 0;
@media(max-width: 768px) { /*@media(max-width: 768px) {
box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12);
min-width: 60%; min-width: 60%;
position: fixed; position: fixed;
top: 50px; top: 50px;
z-index: 3000; z-index: 3000;
} }*/
} }
} }
} }
@ -122,7 +136,7 @@ main {
height: 100vh; height: 100vh;
} }
/* Custom scrollbar of the left-menu*/ /* Custom scrollbar of the right-menu */
/* Works on Firefox*/ /* Works on Firefox*/
.scrollbar-nav { .scrollbar-nav {
scrollbar-width: thin; scrollbar-width: thin;
@ -146,9 +160,6 @@ main {
} }
} }
/* Custom scrollbar of the content */ /* Custom scrollbar of the content */
/* Works on Firefox */ /* Works on Firefox */
.scrollbar-content { .scrollbar-content {
@ -172,6 +183,7 @@ main {
border: 3px solid white; /* creates padding around scroll thumb */ border: 3px solid white; /* creates padding around scroll thumb */
} }
} }
/* End scrollbar*/
solid-display-value-markdown { solid-display-value-markdown {

2
src/views/page-admin.pug
View File

@ -60,7 +60,7 @@
nav.jsRightMenu.text-disable-selection.sidebar.whitespace-normal(role='navigation') nav.jsRightMenu.text-disable-selection.sidebar.whitespace-normal(role='navigation')
.segment.whitespace-normal.text-color-heading.text-bold .segment.whitespace-normal.text-color-heading.text-bold
ul ul
li.segment.full.padding-small.text-normal.jsOffsiteToggle li.segment.full.sm-hidden.padding-small.text-normal.jsOffsiteToggle
span.icon.icon-arrow-left.icon-xsmall.margin-left-xxsmall.text-left span.icon.icon-arrow-left.icon-xsmall.margin-left-xxsmall.text-left
span.segment.full.text-right(hidden) span.segment.full.text-right(hidden)
span.icon.icon-arrow-right.icon-xsmall.margin-right-xxsmall span.icon.icon-arrow-right.icon-xsmall.margin-right-xxsmall

2
src/views/page-circle.pug
View File

@ -44,7 +44,7 @@
nav.jsRightMenu.text-disable-selection.sidebar.whitespace-normal(role='navigation') nav.jsRightMenu.text-disable-selection.sidebar.whitespace-normal(role='navigation')
solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route=`${component.route}-chat`) solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route=`${component.route}-chat`)
ul ul
li.segment.full.padding-small.text-normal.jsOffsiteToggle li.segment.full.sm-hidden.padding-small.text-normal.jsOffsiteToggle
span.icon.icon-arrow-left.icon-xsmall.margin-left-xxsmall.text-left span.icon.icon-arrow-left.icon-xsmall.margin-left-xxsmall.text-left
span.segment.full.text-right(hidden) span.segment.full.text-right(hidden)
span.icon.icon-arrow-right.icon-xsmall.margin-right-xxsmall span.icon.icon-arrow-right.icon-xsmall.margin-right-xxsmall

2
src/views/page-project.pug
View File

@ -25,7 +25,7 @@
nav.jsRightMenu.text-disable-selection.sidebar.whitespace-normal(role='navigation') nav.jsRightMenu.text-disable-selection.sidebar.whitespace-normal(role='navigation')
solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route=`${component.route}-chat`) solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route=`${component.route}-chat`)
ul ul
li.segment.full.padding-small.text-normal.jsOffsiteToggle li.segment.full.sm-hidden.padding-small.text-normal.jsOffsiteToggle
span.icon.icon-arrow-left.icon-xsmall.margin-left-xxsmall.text-left span.icon.icon-arrow-left.icon-xsmall.margin-left-xxsmall.text-left
span.segment.full.text-right(hidden) span.segment.full.text-right(hidden)
span.icon.icon-arrow-right.icon-xsmall.margin-right-xxsmall span.icon.icon-arrow-right.icon-xsmall.margin-right-xxsmall