feature: New right menu on mobile - styles added

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

View File

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

View File

@ -60,7 +60,7 @@
nav.jsRightMenu.text-disable-selection.sidebar.whitespace-normal(role='navigation')
.segment.whitespace-normal.text-color-heading.text-bold
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.segment.full.text-right(hidden)
span.icon.icon-arrow-right.icon-xsmall.margin-right-xxsmall

View File

@ -44,7 +44,7 @@
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`)
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.segment.full.text-right(hidden)
span.icon.icon-arrow-right.icon-xsmall.margin-right-xxsmall

View File

@ -25,7 +25,7 @@
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`)
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.segment.full.text-right(hidden)
span.icon.icon-arrow-right.icon-xsmall.margin-right-xxsmall