raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-01-24 20:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Extract re-usable sidebar styes

Browse Source
This commit is contained in:
Matt-Yorkley
2020-05-21 17:46:58 +02:00
parent a8b981e9cd
commit b4e5542e5f
4 changed files with 84 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss Normal file
View File

@@ -0,0 +1,75 @@
@import "mixins";
@import "variables";
@import "branding";
.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;
transition: opacity $transition-sidebar;
}
&.shown {
.background {
opacity: 1;
}
.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: scroll;
}
.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 {
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;
}
}
}

81
app/assets/stylesheets/darkswarm/shop.css.scss
View File

@@ -11,84 +11,9 @@
@import "shop-taxon-flag";
@import "shop-popovers";
$sidebar-small-width: 75%;
$sidebar-medium-width: 65%;
$sidebar-large-width: 45%;
$sidebar-footer-height: 5em;
.shop-filters-sidebar, .cart-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;
transition: opacity $transition-sidebar;
}
&.shown {
.background {
opacity: 1;
}
.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: scroll;
.property-selectors {
margin-bottom: $sidebar-footer-height + 2em;
}
}
.sidebar-footer {
background-color: $grey-800;
width: $sidebar-large-width;
margin-right: -$sidebar-large-width;
height: $sidebar-footer-height;
position: fixed;
bottom: 0;
right: 0;
transition: margin $transition-sidebar;
padding: 1em;
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;
}
.shop-filters-sidebar {
.property-selectors {
margin-bottom: $sidebar-footer-height + 2em;
}
}

5
app/assets/stylesheets/darkswarm/variables.css.scss
View File

@@ -33,6 +33,11 @@ $topbar-dropdown-link-bg-hover: $white;
$mobile-nav-height: 2.8em;
$sidebar-small-width: 75%;
$sidebar-medium-width: 65%;
$sidebar-large-width: 45%;
$sidebar-footer-height: 5em;
$radius-small: 0.25em;
$radius-medium: 0.5em;

2
app/views/shop/products/_form.html.haml
View File

@@ -31,7 +31,7 @@
= render partial: "shop/products/filters"
.shop-filters-sidebar.hide-for-large-up{ng: {show: 'showFilterSidebar', class: "{'shown': showFilterSidebar}"}}
.expanding-sidebar.shop-filters-sidebar.hide-for-large-up{ng: {show: 'showFilterSidebar', class: "{'shown': showFilterSidebar}"}}
.background{ng: {click: 'toggleFilterSidebar()'}}
.sidebar
%h5