raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-27 01:43:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactoring SASS for shopfront to add partials, break it out into logical clusters

Browse Source
This commit is contained in:
summerscope
2014-07-18 16:04:53 +10:00
parent 93aa3b5364
commit 978b64547e
5 changed files with 302 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
app/assets/stylesheets/darkswarm/_shop-inputs.css.sass Normal file
View File

@@ -0,0 +1,83 @@
@import mixins
@import variables
@import branding
@import big-input
.darkswarm
// #search
@include placeholder(rgba(0,0,0,0.4), #777)
input#search
@include big-input(rgba(0,0,0,0.3), #777, $clr-brick)
@include big-input-static
// ordering
product
input
@include csstrans
margin: 0
width: 10rem
display: inline
@include box-shadow(none)
border-color: #b3b3b3
text-align: right
@media all and (max-width: 1024px)
width: 8rem
@media all and (max-width: 768px)
width: 7rem
@media all and (max-width: 640px)
font-size: 0.75rem
padding-left: 0.25rem
padding-right: 0.25rem
@media all and (max-width: 480px)
float: left !important
width: 5.8rem
&:hover
@include box-shadow(none)
border-color: #888
background-color: #fafafa
&:active, &:focus, &.active
@include box-shadow(none)
background-color: #f9f4b9
border-color: #666
// BULK
input.bulk
width: 5rem
@media all and (max-width: 1024px)
width: 4rem
@media all and (max-width: 768px)
width: 3.5rem
@media all and (max-width: 480px)
width: 2.9rem
input.bulk.first
border-right: 0
input.bulk.second
border-left: 0
.bulk-input-container
float: right
.bulk-input
float: left
@media all and (max-width: 480px)
float: left !important

78
app/assets/stylesheets/darkswarm/_shop-navigation.css.sass Normal file
View File

@@ -0,0 +1,78 @@
.darkswarm
navigation
display: block
background: #f7f7f7
distributor.details
box-sizing: border-box
display: block
min-height: 150px
padding: 30px 0px 20px 0px
select
width: 200px
position: relative
img
display: block
height: 100px
width: 100px
margin-right: 12px
location
font-family: "AvenirBla_IE", "AvenirBla"
@media all and (max-width: 768px)
location, location + small
display: block
#distributor_title h3
margin-top: 0
@media all and (max-width: 768px)
margin-bottom: 8px
ordercycle
p.text-right
max-width: 400px
@media all and (max-width: 640px)
float: left
clear: left
padding: 12px 10px
width: 100%
margin-top: 10px
background: #e5e5e5
p.text-right
max-width: 100%
float: right
form.custom
text-align: right
& > strong
line-height: 2.5
font-size: 1.29em
padding-right: 14px
@media all and (max-width: 768px)
select
width: inherit
display: inline-block
border-width: 1px
border-color: #999
color: #666
font-size: 1em
margin-bottom: 0
padding: 8px 20px 8px 12px
@media all and (max-width: 768px)
font-size: 0.875em
closing
@media all and (max-width: 768px)
font-size: 1.2em
padding-bottom: 10px
color: black
font-size: 1.5em
display: block
padding-bottom: 12px
span
@media all and (max-width: 768px)
font-size: 0.875em

101
app/assets/stylesheets/darkswarm/_shop-product-rows.css.sass Normal file
View File

@@ -0,0 +1,101 @@
.darkswarm
products
product
// GENERAL LAYOUT
.row
.columns
padding-top: 0em
padding-bottom: 0em
display: table
line-height: 1.1
// outline: 1px solid red
@media all and (max-width: 768px)
font-size: 0.875rem
@media all and (max-width: 640px)
font-size: 0.75rem
.table-cell
display: table-cell
vertical-align: middle
height: 37px
// ROW VARIANTS
.row.variants
margin-left: 0
margin-right: 0
background: url("/assets/gray_jean.png") top left repeat
&:nth-of-type(even)
background: url("/assets/gray_jean_light.png") top left repeat
// Variant name
.variant-name
text-transform: capitalize
padding-left: 7.9375rem
@media all and (max-width: 768px)
padding-left: 4.9375rem
.variant-name
@media all and (max-width: 640px)
background: #333
color: white
padding-left: 0.9375rem
font-weight: bold
.table-cell
height: 28px
// Variant unit
.variant-unit
padding-left: 0rem
padding-right: 0rem
color: #888
font-size: 0.875rem
overflow: hidden
@media all and (max-width: 768px)
font-size: 0.75rem
// Variant price
.variant-price
padding-left: 0.25rem
padding-right: 0rem
// Total price
.total-price
padding-left: 0rem
// ROW SUMMARY
.row.summary
margin-left: 0
margin-right: 0
background: #fff
.columns
padding-top: 1em
padding-bottom: 1em
line-height: 1
@media all and (max-width: 768px)
padding-top: 0.65rem
padding-bottom: 0.65rem
.summary-header
text-transform: capitalize
padding-left: 7.9375rem
@media all and (max-width: 768px)
padding-left: 4.9375rem
@media all and (max-width: 640px)
padding-left: 4.5rem
h3
font-size: 1.5rem
margin: 0

19
app/assets/stylesheets/darkswarm/_shop-product-thumb.css.sass Normal file
View File

@@ -0,0 +1,19 @@
.darkswarm
products
product
.product-thumb
position: absolute
top: 3px
left: 0px
width: 7rem
height: 7rem
outline: 1px solid #999
float: left
display: block
z-index: 999999
background-color: #999
overflow: hidden
@media all and (max-width: 768px)
width: 4rem
height: 4rem

21
app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.sass Normal file
View File

@@ -0,0 +1,21 @@
.darkswarm
products
product
.taxon-flag
background: transparent url("/assets/flag.svg") top center no-repeat
background-size: 34px 39px
min-height: 40px
width: 34px
margin-top: -1.1rem
padding-top: 0.25rem
z-index: 999999
@media all and (max-width: 768px)
margin-top: -0.85rem
render-svg
svg
width: 24px
height: 24px
path
fill: #999