enes
d45ea63c20
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 34s
105 lines
2.2 KiB
SCSS
105 lines
2.2 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;
|
|
scroll-snap-stop: always; // Touch devices will always stop on each element
|
|
}
|
|
}
|
|
|
|
@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: $body-vertical-padding;
|
|
}
|
|
> :first-child {
|
|
// We want to keep header on smaller devices at all times
|
|
max-height: calc(
|
|
100dvh - $header-height - $body-vertical-padding * 2 - $tabs-height
|
|
);
|
|
|
|
@media only screen and (min-width: 768px) {
|
|
max-height: calc(100dvh - $body-vertical-padding * 2);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Adjust the content scroll on smaller screens
|
|
// Make sure only the inner tab is scrolling
|
|
.scrollAdjust {
|
|
@media only screen and (max-width: 767px) {
|
|
max-height: calc(
|
|
100svh - $header-height - $body-vertical-padding * 2 - $tabs-height
|
|
);
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
@media only screen and (min-width: 768px) {
|
|
padding: 10px;
|
|
border: 10px solid $overlay-background-color;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
.navTabs {
|
|
display: none;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
height: $tabs-height;
|
|
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;
|
|
}
|