raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-03-03 02:21:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add style for Product details

Browse Source 
Only import relevant css, which has been move to their own partial to
avoid duplication
This commit is contained in:
Gaetan Craig-Riou
2024-09-04 11:01:39 +10:00
parent f59ee96011
commit 55733555bf
9 changed files with 208 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/webpacker/css/admin_v3/pages/product_preview.scss
View File

@@ -1,3 +1,6 @@
@import "../../darkswarm/branding";
@import "../../darkswarm/mixins";
#product-preview {
// tabs
dl.tabs {
@@ -40,7 +43,7 @@
}
// The frontend css is base on foundation-sites https://github.com/foundation/foundation-sites
// Below we copied the sections that are relevant to the product preview modal
// Below we copied the sections that are relevant to the product preview modal
// from foundation-sites/scss/foundations/components/_types.scss
h1,
@@ -88,7 +91,7 @@
margin-bottom: 1.25rem;
}
// from fondation-sites/scss/foundations/components/_grid.scss
// from foundation-sites/scss/foundations/components/_grid.scss
.column + .column:last-child,
.column + .columns:last-child,
.columns + .column:last-child,
@@ -96,5 +99,24 @@
float: right;
}
}
// from foundation-sites/scss/foundations/components/_global.scss
img {
display: inline-block;
vertical-align: middle;
}
// Import frontend partials
@import "../../darkswarm/shop_partials/typography";
@import "../../darkswarm/overrides";
// product preview override
.row {
margin: 0 auto;
width: 100%;
}
@import "../../darkswarm/shop_partials/animations";
@import "../../darkswarm/shop_partials/shop-filters";
@import "../../darkswarm/shop-modals";
@import "../../darkswarm/shop_partials/images";
}

120
app/webpacker/css/darkswarm/_shop-filters.scss
View File

@@ -1,102 +1,4 @@
@mixin filter-selector($base-clr, $border-clr, $hover-clr) {
&.inline-block, ul.inline-block {
display: inline-block;
}
li {
display: inline-block;
@include border-radius(0);
padding: 0;
margin: 0 0.5rem 0.5rem 0;
&:hover, &:focus {
background: transparent;
}
&.active {
box-shadow: none;
}
a, a.button {
display: block;
@include border-radius(0.5em);
border: 1px solid $border-clr;
padding: 0.5em 0.625em;
color: $base-clr;
font-size: 0.75em;
background: white;
margin: 0;
i {
padding-left: 0.25rem;
}
render-svg {
&, & svg {
width: 1rem;
height: 1rem;
float: left;
padding-right: 0.25rem;
path {
@include csstrans;
fill: $base-clr;
}
}
}
&:hover, &:focus {
border-color: $hover-clr;
color: $hover-clr;
render-svg {
svg {
path {
fill: $hover-clr;
}
}
}
}
&.disabled {
opacity: 0.6;
&:hover, &:focus {
border-color: $border-clr;
color: $base-clr;
render-svg {
svg {
path {
fill: $base-clr;
}
}
}
}
}
&.active, &.active:hover, &.active:focus {
border: 1px solid $base-clr;
background: $base-clr;
color: white;
render-svg {
svg {
path {
fill: white;
}
}
}
}
}
}
}
@import "shop_partials/shop-filters";
// Alert when search, taxon, filter is triggered
@@ -167,23 +69,3 @@
max-height: calc(100vh - #{$topbar-height});
overflow-y: auto;
}
.filter-shopfront {
&.taxon-selectors, &.property-selectors {
background: transparent;
}
// Shopfront taxons
&.taxon-selectors {
@include filter-selector($clr-blue, $clr-blue-light, $clr-blue-bright);
}
// Shopfront properties
&.property-selectors {
@include filter-selector(#666, #ccc, #777);
}
ul {
margin: 0;
}
}

9
app/webpacker/css/darkswarm/animations.scss
View File

@@ -275,11 +275,4 @@ product.animate-repeat {
}
}
@mixin csstrans {
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
-webkit-transform-style: preserve-3d;
}
@import "shop_partials/animations";

21
app/webpacker/css/darkswarm/images.scss
View File

@@ -1,23 +1,4 @@
.product-img {
text-align: center;
img {
padding: 0.3rem;
// placeholder for when no product images
&.placeholder {
opacity: 0.35;
@include breakpoint(desktop) {
display: none;
}
}
@media only screen and (max-width: 1024px) {
margin: 0 0 0.5rem;
}
}
}
//@import "shop_partials/images";
.hero-img {
outline: 1px solid $disabled-bright;

8
app/webpacker/css/darkswarm/shop_partials/_animations.scss Normal file
View File

@@ -0,0 +1,8 @@
@mixin csstrans {
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
-webkit-transform-style: preserve-3d;
}

21
app/webpacker/css/darkswarm/shop_partials/_images.scss Normal file
View File

@@ -0,0 +1,21 @@
.product-img {
text-align: center;
img {
padding: 0.3rem;
// placeholder for when no product images
&.placeholder {
opacity: 0.35;
@include breakpoint(desktop) {
display: none;
}
}
@media only screen and (max-width: 1024px) {
margin: 0 0 0.5rem;
}
}
}

119
app/webpacker/css/darkswarm/shop_partials/_shop-filters.scss Normal file
View File

@@ -0,0 +1,119 @@
@mixin filter-selector($base-clr, $border-clr, $hover-clr) {
&.inline-block, ul.inline-block {
display: inline-block;
}
li {
display: inline-block;
@include border-radius(0);
padding: 0;
margin: 0 0.5rem 0.5rem 0;
&:hover, &:focus {
background: transparent;
}
&.active {
box-shadow: none;
}
a, a.button {
display: block;
@include border-radius(0.5em);
border: 1px solid $border-clr;
padding: 0.5em 0.625em;
color: $base-clr;
font-size: 0.75em;
background: white;
margin: 0;
i {
padding-left: 0.25rem;
}
render-svg {
&, & svg {
width: 1rem;
height: 1rem;
float: left;
padding-right: 0.25rem;
path {
@include csstrans;
fill: $base-clr;
}
}
}
&:hover, &:focus {
border-color: $hover-clr;
color: $hover-clr;
render-svg {
svg {
path {
fill: $hover-clr;
}
}
}
}
&.disabled {
opacity: 0.6;
&:hover, &:focus {
border-color: $border-clr;
color: $base-clr;
render-svg {
svg {
path {
fill: $base-clr;
}
}
}
}
}
&.active, &.active:hover, &.active:focus {
border: 1px solid $base-clr;
background: $base-clr;
color: white;
render-svg {
svg {
path {
fill: white;
}
}
}
}
}
}
}
.filter-shopfront {
&.taxon-selectors, &.property-selectors {
background: transparent;
}
// Shopfront taxons
&.taxon-selectors {
@include filter-selector($clr-blue, $clr-blue-light, $clr-blue-bright);
}
// Shopfront properties
&.property-selectors {
@include filter-selector(#666, #ccc, #777);
}
ul {
margin: 0;
}
}

31
app/webpacker/css/darkswarm/shop_partials/_typography.scss Normal file
View File

@@ -0,0 +1,31 @@
@mixin headingFont {
font-family: "Oswald", sans-serif;
}
// TODO should probably move that to a variables.scss
$body-font: "Roboto", Arial, sans-serif;
h1, h2, h3, h4, h5, h6 {
@include headingFont;
padding: 0px;
}
a {
color: $clr-brick;
&:hover, &:focus, &:active {
text-decoration: none;
color: $clr-brick-bright;
}
}
.text-small {
font-size: 0.875rem;
margin-bottom: 0.5rem;
font-family: $body-font;
&, & * {
font-size: 0.875rem;
}
}

31
app/webpacker/css/darkswarm/typography.scss
View File

@@ -1,14 +1,10 @@
@mixin headingFont {
font-family: "Oswald", sans-serif;
}
@import "shop_partials/typography";
@mixin bodyFont {
font-family: "Roboto", Arial, sans-serif;
}
$headingFont: "Oswald";
$body-font: "Roboto", Arial, sans-serif;
body {
@include bodyFont;
@@ -16,15 +12,6 @@ body {
font-weight: 400;
}
a {
color: $clr-brick;
&:hover, &:focus, &:active {
text-decoration: none;
color: $clr-brick-bright;
}
}
.text-vbig {
font-size: 2rem;
font-weight: 300;
@@ -39,16 +26,6 @@ small, .small {
font-size: 0.75rem;
}
.text-small {
font-size: 0.875rem;
margin-bottom: 0.5rem;
font-family: $body-font;
&, & * {
font-size: 0.875rem;
}
}
.text-normal {
font-weight: 400;
font-family: $body-font;
@@ -92,12 +69,6 @@ small, .small {
border-color: rgba(#ddd, 0.25);
}
h1, h2, h3, h4, h5, h6 {
@include headingFont;
padding: 0px;
}
.inline-header {
display: inline-block;
margin: 0px;