Trying new sidebar.

This commit is contained in:
sergiotarxz 2023-09-28 19:49:41 +02:00
parent b6f3f06324
commit f2e0b06909
4 changed files with 23 additions and 12 deletions

View File

@ -19,8 +19,10 @@ window.onload = () => {
transparentFullscreenHide.addEventListener('click', () => {
mobile_foldable.classList.remove('show');
transparentFullscreenHide.classList.remove('show');
menu_expand.classList.remove('active');
});
menu_expand.addEventListener('click', () => {
menu_expand.classList.toggle('active');
mobile_foldable.classList.toggle('show');
transparentFullscreenHide.classList.toggle('show');
});

View File

@ -207,7 +207,7 @@ body {
height: calc(100% - 60px);
z-index: 500;
transition: left 0.5s ease-in;
background: blueviolet; }
background: #F5F5DC; }
body nav.mobile-foldable > a:first-child {
margin-top: 30px; }
body nav.mobile-foldable a {
@ -217,12 +217,13 @@ body {
padding-left: auto;
padding-right: auto;
color: black;
background: #f2eb8c;
border: 1px solid black;
background: #dcdcf5;
margin-top: 10px;
padding: 10px;
margin-left: 10px;
border-radius: 20px;
width: calc(100% - 20px - 20px); }
width: calc(100% - 20px - 20px - 2px); }
body nav.mobile-foldable div.child-categories-mobile a {
width: calc(100% - 50px - 20px);
margin-left: 40px;
@ -233,13 +234,16 @@ body {
display: flex;
align-items: center;
justify-content: center; }
body nav.mobile-shortcuts > a.active {
background: #F5F5DC;
color: #dcdcf5; }
body a.menu-expand {
padding-bottom: 9px; }
body a.menu-expand .open-menu-icon-hover {
display: none; }
body a.menu-expand:hover .open-menu-icon-hover, body a.menu-expand:focus .open-menu-icon-hover {
body a.menu-expand:hover .open-menu-icon-hover, body a.menu-expand:focus .open-menu-icon-hover, body a.menu-expand.active .open-menu-icon-hover {
display: block; }
body a.menu-expand:hover .open-menu-icon, body a.menu-expand:focus .open-menu-icon {
body a.menu-expand:hover .open-menu-icon, body a.menu-expand:focus .open-menu-icon, body a.menu-expand.active .open-menu-icon {
display: none; }
body nav > a.menu-expand > img {
width: 30px;

View File

@ -8,8 +8,8 @@ $background-secondary: #635283;
$color-secondary: #8eea6d;
$accent-secondary: #fde68f;
$primary-secondary: #590e11;
$background_sidebar: #E2D1F9;
$color_sidebar: #317773;
$background_sidebar: #F5F5DC;
$color_sidebar: #dcdcf5;
html {
height: 100%;
@ -303,7 +303,7 @@ body {
height: calc(100% - 60px);
z-index: 500;
transition: left 0.5s ease-in;
background: $background_div;
background: $background_sidebar;
& > a:first-child {
margin-top: 30px;
@ -318,12 +318,13 @@ body {
padding-left: auto;
padding-right: auto;
color: black;
background: $color_div;
border: 1px solid black;
background: $color_sidebar;
margin-top: 10px;
padding: 10px;
margin-left: 10px;
border-radius: 20px;
width: calc(100% - 20px - 20px);
width: calc(100% - 20px - 20px - 2px);
}
div.child-categories-mobile {
@ -343,6 +344,10 @@ body {
display: flex;
align-items: center;
justify-content: center;
&.active {
background: $background_sidebar;
color: $color_sidebar;
}
}
a.menu-expand {
@ -352,7 +357,7 @@ body {
display: none;
}
&:hover, &:focus {
&:hover, &:focus, &.active {
.open-menu-icon-hover {
display: block;
}

File diff suppressed because one or more lines are too long