90 lines
1.7 KiB
SCSS
90 lines
1.7 KiB
SCSS
@import '../styles/colors.scss';
|
|
@import '../styles/sizes.scss';
|
|
|
|
.container {
|
|
display: grid;
|
|
|
|
@media only screen and (max-width: 767px) {
|
|
gap: 20px;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: 100%;
|
|
|
|
// Hide Scrollbar and let's use tabs to navigate
|
|
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
|
scrollbar-width: none; /* Firefox */
|
|
&::-webkit-scrollbar {
|
|
display: none; /* Safari and Chrome */
|
|
}
|
|
overflow-x: auto;
|
|
overscroll-behavior-inline: contain;
|
|
scroll-snap-type: inline mandatory;
|
|
|
|
> * {
|
|
scroll-margin-top: $header-height + $body-vertical-padding;
|
|
scroll-snap-align: start;
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 768px) {
|
|
grid-template-columns: 0.75fr 1.5fr 0.75fr;
|
|
gap: 30px;
|
|
}
|
|
}
|
|
|
|
.sidesWrap {
|
|
position: relative;
|
|
|
|
// HACK: Stop grid column from growing
|
|
min-width: 0;
|
|
}
|
|
|
|
.sides {
|
|
@media only screen and (min-width: 768px) {
|
|
position: sticky;
|
|
top: $header-height + $body-vertical-padding;
|
|
}
|
|
}
|
|
|
|
.files {
|
|
display: flex;
|
|
flex-direction: column;
|
|
grid-gap: 15px;
|
|
}
|
|
.content {
|
|
padding: 10px;
|
|
border: 10px solid $overlay-background-color;
|
|
border-radius: 4px;
|
|
|
|
@media only screen and (max-width: 767px) {
|
|
max-height: calc(100svh - $header-height + $body-vertical-padding * 2);
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
|
|
.navTabs {
|
|
display: none;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 2;
|
|
background: $overlay-background-color;
|
|
box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);
|
|
|
|
padding: 5px;
|
|
gap: 5px;
|
|
|
|
@media only screen and (max-width: 767px) {
|
|
display: flex;
|
|
}
|
|
|
|
> li {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
background-color: $primary-main !important;
|
|
color: white !important;
|
|
}
|