andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix scrollbar placement for main container

Browse Source
This commit is contained in:
Angelos Chalaris
2019-08-30 10:37:30 +03:00
parent 23393a2d9d
commit 5f7a7ea2d8
1 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/docs/styles/_layout.scss
View File

@@ -19,10 +19,10 @@
grid-template-rows: 100%; grid-template-rows: 100%;
} }
// Large screen size (desktop, laptop) // Large screen size (desktop, laptop)
@media screen and (min-width: $layout-large-breakpoint) { // @media screen and (min-width: $layout-large-breakpoint) {
grid-template-areas: "menu . content ."; // grid-template-areas: "menu content";
grid-template-columns: 62px calc((100vw - 830px) / 2) 768px calc((100vw - 830px) / 2); // // grid-template-columns: 62px calc((100vw - 830px) / 2) 768px calc((100vw - 830px) / 2);
} // }
} }
// Menu container // Menu container
header.menu { header.menu {
@@ -37,17 +37,21 @@ header.menu {
background: var(--back-color); background: var(--back-color);
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: var(--scrollbar-back-color); background-color: var(--scrollbar-back-color);
margin: 0.5rem 0; margin: 0.25rem 0;
border-radius: 0.125rem; border-radius: 0.1875rem;
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 4px; width: 6px;
background: transparent; background: transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-fore-color); background-color: var(--scrollbar-fore-color);
border: 1px solid var(--scrollbar-fore-color-lighter); border: 1px solid var(--scrollbar-fore-color-lighter);
border-radius: 0.125rem; border-radius: 0.1875rem;
}
@media screen and (min-width: calc(768px + 62px)) {
padding-left: calc((100% - 768px - 62px) / 2);
padding-right: calc((100% - 768px - 62px) / 2);
} }
} }