Trying new sidebar.
This commit is contained in:
parent
b6f3f06324
commit
f2e0b06909
@ -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');
|
||||
});
|
||||
|
@ -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;
|
||||
|
@ -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
Loading…
Reference in New Issue
Block a user