mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-01-29 21:17:17 +00:00
ec2213d2f0
It looks ike these CSS rules are actually being re-imported multiple times, which is bloating the output.
78 lines
1.4 KiB
SCSS
78 lines
1.4 KiB
SCSS
.expanding-sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
|
|
.background {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 200;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: $shop-sidebar-overlay;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all $transition-sidebar;
|
|
}
|
|
|
|
&.shown {
|
|
.background {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.sidebar,
|
|
.sidebar-footer {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.sidebar {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 210;
|
|
height: 100%;
|
|
width: $sidebar-large-width;
|
|
margin-right: -$sidebar-large-width;
|
|
background-color: rgba($white, 0.95);
|
|
padding: 1em;
|
|
transition: margin $transition-sidebar;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.sidebar-footer {
|
|
background-color: $grey-800;
|
|
width: $sidebar-large-width;
|
|
margin-right: -$sidebar-large-width;
|
|
min-height: $sidebar-footer-height;
|
|
position: fixed;
|
|
bottom: 0;
|
|
right: 0;
|
|
transition: margin $transition-sidebar;
|
|
padding: 1em;
|
|
|
|
button,
|
|
a.button {
|
|
width: 48%;
|
|
}
|
|
}
|
|
|
|
@include breakpoint(tablet) {
|
|
.sidebar,
|
|
.sidebar-footer {
|
|
width: $sidebar-medium-width;
|
|
margin-right: -$sidebar-medium-width;
|
|
}
|
|
}
|
|
|
|
@include breakpoint(mobile) {
|
|
.sidebar,
|
|
.sidebar-footer {
|
|
width: $sidebar-small-width;
|
|
margin-right: -$sidebar-small-width;
|
|
}
|
|
}
|
|
}
|