diff --git a/app/assets/images/home/groups-bg.svg b/app/assets/images/home/groups-bg.svg index 00d2e67f23..19d7f926c5 100644 --- a/app/assets/images/home/groups-bg.svg +++ b/app/assets/images/home/groups-bg.svg @@ -1,1408 +1,1051 @@ - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + + + + + + + + + + + + + + + - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + + + + + + + + - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + diff --git a/app/assets/images/home/maps-bg.svg b/app/assets/images/home/maps-bg.svg index 7c486739b7..48153cc191 100644 --- a/app/assets/images/home/maps-bg.svg +++ b/app/assets/images/home/maps-bg.svg @@ -1,1596 +1,1089 @@ - + + viewBox="0 0 490 320" enable-background="new 0 0 490 320" xml:space="preserve"> - + - + - + - - + + - + - + - + - + - + - + diff --git a/app/assets/images/home/ofn_bg_1.jpg b/app/assets/images/home/ofn_bg_1.jpg new file mode 100644 index 0000000000..416ebf35fb Binary files /dev/null and b/app/assets/images/home/ofn_bg_1.jpg differ diff --git a/app/assets/stylesheets/darkswarm/_shop-inputs.css.sass b/app/assets/stylesheets/darkswarm/_shop-inputs.css.sass new file mode 100644 index 0000000000..f11c31a153 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/_shop-inputs.css.sass @@ -0,0 +1,86 @@ +@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 border-radius(0) + @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) + float: left !important + font-size: 0.75rem + padding-left: 0.25rem + padding-right: 0.25rem + + @media all and (max-width: 480px) + 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.8rem + + input.bulk.first + border-right: 0 + + input.bulk.second + border-left: 0 + + .bulk-input-container + float: right + + @media all and (max-width: 640px) + float: left !important + + .bulk-input + float: left + + + + + diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.css.sass b/app/assets/stylesheets/darkswarm/_shop-navigation.css.sass new file mode 100644 index 0000000000..17b68a3e46 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/_shop-navigation.css.sass @@ -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 + + + diff --git a/app/assets/stylesheets/darkswarm/_shop-popovers.css.sass b/app/assets/stylesheets/darkswarm/_shop-popovers.css.sass new file mode 100644 index 0000000000..fec2eae4a6 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/_shop-popovers.css.sass @@ -0,0 +1,37 @@ +@import mixins + +.darkswarm + product + // Pop over + + // Foundation overrides + .joyride-tip-guide + // JS needs to be tweaked to adjust for left alignment - this is dynamic can't rewrite in CSS + background-color: #ebebeb + border: 1px solid #a5a5a5 + color: #1f1f1f + + h1, h2, h3, h4, h5, h6 + color: #1f1f1f + + .joyride-nub.bottom + border-color: #a5a5a5 !important + border-bottom-color: transparent !important + border-left-color: transparent !important + border-right-color: transparent !important + + button.graph-button + padding: 0 + margin: 0 + @include border-radius(0) + display: inline + background: none + + i.ofn-i-058-graph + color: #999 + margin: 0 + padding: 0 + font-size: 1rem + + &:hover, &:focus, &:active, &.active + color: #444 \ No newline at end of file diff --git a/app/assets/stylesheets/darkswarm/_shop-product-rows.css.sass b/app/assets/stylesheets/darkswarm/_shop-product-rows.css.sass new file mode 100644 index 0000000000..2dbbf46a45 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/_shop-product-rows.css.sass @@ -0,0 +1,112 @@ +.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: 27px + + // 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: 0.25rem + @media all and (max-width: 640px) + text-align: right + + // Total price + .total-price + padding-left: 0rem + @media all and (max-width: 640px) + background: #777 + color: white + .table-cell + height: 27px + + + // 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 + @media all and (max-width:480px) + padding-left: 0.9375rem + h3 + font-size: 1.5rem + margin: 0 + a h3 + color: black + + + + + + + + diff --git a/app/assets/stylesheets/darkswarm/_shop-product-thumb.css.sass b/app/assets/stylesheets/darkswarm/_shop-product-thumb.css.sass new file mode 100644 index 0000000000..8989b2009d --- /dev/null +++ b/app/assets/stylesheets/darkswarm/_shop-product-thumb.css.sass @@ -0,0 +1,24 @@ +.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 + + @media all and (max-width: 480px) + display: none + width: 0rem + height: 0rem \ No newline at end of file diff --git a/app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.sass b/app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.sass new file mode 100644 index 0000000000..b37606c43f --- /dev/null +++ b/app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.sass @@ -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 diff --git a/app/assets/stylesheets/darkswarm/big-input.sass b/app/assets/stylesheets/darkswarm/big-input.sass index 133097a5ac..20c87d6a6b 100644 --- a/app/assets/stylesheets/darkswarm/big-input.sass +++ b/app/assets/stylesheets/darkswarm/big-input.sass @@ -6,7 +6,7 @@ //Big search used in active table search \\ @mixin big-input($input, $inputhvr, $inputactv) - @extend .avenir + @include avenir @include csstrans @include border-radius(0.5rem) diff --git a/app/assets/stylesheets/darkswarm/branding.css.sass b/app/assets/stylesheets/darkswarm/branding.css.sass index cb2bf151d6..5d4f55b5bd 100644 --- a/app/assets/stylesheets/darkswarm/branding.css.sass +++ b/app/assets/stylesheets/darkswarm/branding.css.sass @@ -1,8 +1,23 @@ -$clr-brick: #8f301d -$clr-brick-light: #f5e4e1 -$clr-brick-ultra-light: #f7f4ef -$clr-brick-bright: #db583d -$clr-brick-light-bright: #f4bbb0 +// ORIGINAL +// $clr-brick: #8f301d +// $clr-brick-light: #f5e4e1 +// $clr-brick-ultra-light: #f7f4ef +// $clr-brick-bright: #db583d +// $clr-brick-light-bright: #f4bbb0 + +// $clr-brick: #b82538 +// $clr-brick-light: #f5e1e4 +// $clr-brick-ultra-light: #f7f0f1 +// $clr-brick-bright: #e03f4f +// $clr-brick-light-bright: #f5bac0 + + +$clr-brick: #c1122b +$clr-brick-light: #f5e6e7 +$clr-brick-ultra-light: #faf5f6 +$clr-brick-bright: #eb4c46 +$clr-brick-light-bright: #f5c4c9 + $clr-turquoise: #097563 $clr-turquoise-light: #cef2ec diff --git a/app/assets/stylesheets/darkswarm/checkout.css.sass b/app/assets/stylesheets/darkswarm/checkout.css.sass index d90c81f673..e9a7f09597 100644 --- a/app/assets/stylesheets/darkswarm/checkout.css.sass +++ b/app/assets/stylesheets/darkswarm/checkout.css.sass @@ -46,6 +46,11 @@ checkout // Logic to swap out up / down accordion icons + //Foundation overrides + dd > a:hover + background: $clr-brick-ultra-light !important + color: $clr-brick + dd span.accordion-up display: none diff --git a/app/assets/stylesheets/darkswarm/home_tagline.css.sass b/app/assets/stylesheets/darkswarm/home_tagline.css.sass index 2c109a2703..ce8b275747 100644 --- a/app/assets/stylesheets/darkswarm/home_tagline.css.sass +++ b/app/assets/stylesheets/darkswarm/home_tagline.css.sass @@ -5,7 +5,7 @@ #tagline background-color: black - background-image: url("/assets/home/tagline-bg.jpg") + background-image: url("/assets/home/ofn_bg_1.jpg") @include fullbg height: 500px padding: 40px 0px @@ -22,7 +22,7 @@ padding-bottom: 0.5rem a - color: $clr-brick-bright + color: white &:hover, &:active, &:focus color: $clr-brick-light-bright @include textsoftpress diff --git a/app/assets/stylesheets/darkswarm/menu.css.sass b/app/assets/stylesheets/darkswarm/menu.css.sass index 7be329824b..4c9dcd25c6 100644 --- a/app/assets/stylesheets/darkswarm/menu.css.sass +++ b/app/assets/stylesheets/darkswarm/menu.css.sass @@ -1,5 +1,6 @@ @import branding @import mixins +@import typography .fixed .top-bar @@ -56,6 +57,12 @@ nav .off-canvas-wrap.move-right ul.off-canvas-list font-size: 0.875rem + .li-menu + @include avenir + font-size: 1rem + a + color: rgba(255, 255, 255, 0.9) + .off-canvas-wrap.move-right ul.off-canvas-list i font-size: 1.5rem margin-right: 0.25rem diff --git a/app/assets/stylesheets/darkswarm/mixins.sass b/app/assets/stylesheets/darkswarm/mixins.sass index b7207335bb..2da53e9c50 100644 --- a/app/assets/stylesheets/darkswarm/mixins.sass +++ b/app/assets/stylesheets/darkswarm/mixins.sass @@ -69,7 +69,7 @@ color: $clr-brick-light @mixin lightbg - background-color: $clr-brick-ultra-light + background-color: $clr-brick-light &, & * color: black a diff --git a/app/assets/stylesheets/darkswarm/shop.css.sass b/app/assets/stylesheets/darkswarm/shop.css.sass index cf193d0789..51093f411a 100644 --- a/app/assets/stylesheets/darkswarm/shop.css.sass +++ b/app/assets/stylesheets/darkswarm/shop.css.sass @@ -3,104 +3,26 @@ @import branding @import big-input +// Shop partials +@import shop-inputs +@import shop-navigation +@import shop-product-rows +@import shop-taxon-flag +@import shop-popovers + + .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 - - color: #666 - display: block - 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 products display: block padding-top: 2.3em + @media all and (max-width: 768px) padding-top: 1em + input.button.right float: left - - - product:hover, product:focus, product:active - // border-color: $clr-brick - // @include box-shadow(0 0 3px 0 $clr-brick-bright) - - .row.variants - // border-top: 1px solid $clr-brick-light - // background: $clr-brick-ultra-light product border-bottom: 1px solid #e5e5e5 @@ -111,132 +33,7 @@ display: block color: #444 - .product-thumb - position: absolute - top: 3px - left: 0px - width: 7rem - height: 7rem - outline: 1px solid black - float: left - display: block - z-index: 999999 - background-color: black - overflow: hidden - - @media all and (max-width: 768px) - width: 4rem - height: 4rem - - // Variant name - .variant-name, .summary-header - text-transform: capitalize - padding-left: 7.9375rem - - @media all and (max-width: 768px) - padding-left: 4.9375rem - - .variant-name - @media all and (max-width: 480px) - padding-left: 0.9375rem - font-weight: bold - .table-cell - height: 24px - - // 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 - - .taxon-flag - background: transparent url("/assets/flag.svg") top center no-repeat - background-size: 34px 38px - min-height: 40px - 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 - - input - @include csstrans - margin: 0 - width: 10rem - display: inline - @include box-shadow(none) - border-color: #b3b3b3 - text-align: right - - @media all and (max-width: 768px) - width: 8rem - - @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 - span.bulk-input-container - float: right - - @media all and (max-width: 480px) - float: left !important - - .bulk-input - float: left - - input.bulk - width: 5rem - - @media all and (max-width: 768px) - width: 4rem - - @media all and (max-width: 480px) - width: 2.9rem - - input.bulk.first - border-right: 0 - - input.bulk.second - border-left: 0 - .bulk-buy font-size: 0.875rem @media all and (max-width: 768px) @@ -245,7 +42,6 @@ .bulk-buy, .bulk-buy i color: #888 - .inline display: inline @@ -262,47 +58,14 @@ i.ofn-i_036-producers padding-left: 0.5rem - .columns - padding-top: 0em - padding-bottom: 0em - display: table - line-height: 1.1 - // outline: 1px solid red + - @media all and (max-width: 640px) - font-size: 0.75rem - - .table-cell - display: table-cell - vertical-align: middle - height: 37px - .row.summary, .row.variants - margin-left: 0 - margin-right: 0 - background: #fff - // ROW VARIANTS - .row.variants - background: url("/assets/gray_jean.png") top left repeat - &:nth-of-type(even) - background: url("/assets/gray_jean_light.png") top left repeat + - // ROW SUMMARY - .row.summary - .columns - padding-top: 1em - padding-bottom: 1em - line-height: 1 - - @media all and (max-width: 768px) - padding-top: 0.65rem - padding-bottom: 0.65rem - - h3 - font-size: 1.5rem - margin: 0 + diff --git a/app/assets/stylesheets/darkswarm/style.css b/app/assets/stylesheets/darkswarm/style.css index 66e1269c3a..843d362510 100755 --- a/app/assets/stylesheets/darkswarm/style.css +++ b/app/assets/stylesheets/darkswarm/style.css @@ -1,10 +1,10 @@ @font-face { font-family: 'OFN'; - src:url('/OFN.eot?-g90m7b'); - src:url('/OFN.eot?#iefix-g90m7b') format('embedded-opentype'), - url('/OFN.woff?-g90m7b') format('woff'), - url('/OFN.ttf?-g90m7b') format('truetype'), - url('/OFN.svg?-g90m7b#OFN') format('svg'); + src:url('/OFN.eot?-4w617y'); + src:url('/OFN.eot?#iefix-4w617y') format('embedded-opentype'), + url('/OFN.woff?-4w617y') format('woff'), + url('/OFN.ttf?-4w617y') format('truetype'), + url('/OFN.svg?-4w617y#OFN') format('svg'); font-weight: normal; font-style: normal; } @@ -23,174 +23,177 @@ -moz-osx-font-smoothing: grayscale; } -.ofn-i_057-expand:before { +.ofn-i_001-arrow-left:before { content: "\e600"; } -.ofn-i_056-bulk:before { +.ofn-i_002-arrow-right:before { content: "\e601"; } -.ofn-i_055-point-left:before { +.ofn-i_003-check:before { content: "\e602"; } -.ofn-i_054-point-right:before { +.ofn-i_004-x:before { content: "\e603"; } -.ofn-i_053-point-up:before { +.ofn-i_005-caret-down:before { content: "\e604"; } -.ofn-i_052-point-down:before { +.ofn-i_006-caret-up:before { content: "\e605"; } -.ofn-i_051-check-big:before { +.ofn-i_007-caret-right:before { content: "\e606"; } -.ofn-i_050-mail-circle:before { +.ofn-i_008-caret-left:before { content: "\e607"; } -.ofn-i_049-web:before { +.ofn-i_009-close:before { content: "\e608"; } -.ofn-i_048-play-video:before { +.ofn-i_010-bullet:before { content: "\e609"; } -.ofn-i_047-youtube:before { +.ofn-i_011-spinner:before { content: "\e60a"; } -.ofn-i_046-g:before { +.ofn-i_012-warning:before { content: "\e60b"; } -.ofn-i_045-pintrest:before { +.ofn-i_013-help:before { content: "\e60c"; } -.ofn-i_044-facebook:before { +.ofn-i_014-menu:before { content: "\e60d"; } -.ofn-i_043-instagram:before { +.ofn-i_015-user:before { content: "\e60e"; } -.ofn-i_042-linkedin:before { +.ofn-i_016-group:before { content: "\e60f"; } -.ofn-i_041-twitter:before { +.ofn-i_017-locked:before { content: "\e610"; } -.ofn-i_040-hub:before { +.ofn-i_018-unlocked:before { content: "\e611"; } -.ofn-i_039-delivery:before { +.ofn-i_019-map-pin:before { content: "\e612"; } -.ofn-i_038-takeaway:before { +.ofn-i_020-search:before { content: "\e613"; } -.ofn-i_037-map:before { +.ofn-i_021-tools:before { content: "\e614"; } -.ofn-i_036-producers:before { +.ofn-i_022-cog:before { content: "\e615"; } -.ofn-i_035-groups:before { +.ofn-i_023-refresh:before { content: "\e616"; } -.ofn-i_034-timer:before { +.ofn-i_024-mail:before { content: "\e617"; } -.ofn-i_033-open-sign:before { +.ofn-i_025-notepad:before { content: "\e618"; } -.ofn-i_032-closed-sign:before { +.ofn-i_026-trash:before { content: "\e619"; } -.ofn-i_031-alarm-clock:before { +.ofn-i_027-shopping-cart:before { content: "\e61a"; } -.ofn-i_030-money:before { +.ofn-i_028-barcode:before { content: "\e61b"; } .ofn-i_029-shopping-basket:before { content: "\e61c"; } -.ofn-i_028-barcode:before { +.ofn-i_030-money:before { content: "\e61d"; } -.ofn-i_027-shopping-cart:before { +.ofn-i_031-alarm-clock:before { content: "\e61e"; } -.ofn-i_026-trash:before { +.ofn-i_032-closed-sign:before { content: "\e61f"; } -.ofn-i_025-notepad:before { +.ofn-i_033-open-sign:before { content: "\e620"; } -.ofn-i_024-mail:before { +.ofn-i_034-timer:before { content: "\e621"; } -.ofn-i_023-refresh:before { +.ofn-i_035-groups:before { content: "\e622"; } -.ofn-i_022-cog:before { +.ofn-i_036-producers:before { content: "\e623"; } -.ofn-i_021-tools:before { +.ofn-i_037-map:before { content: "\e624"; } -.ofn-i_020-search:before { +.ofn-i_038-takeaway:before { content: "\e625"; } -.ofn-i_019-map-pin:before { +.ofn-i_039-delivery:before { content: "\e626"; } -.ofn-i_018-unlocked:before { +.ofn-i_040-hub:before { content: "\e627"; } -.ofn-i_017-locked:before { +.ofn-i_041-twitter:before { content: "\e628"; } -.ofn-i_016-group:before { +.ofn-i_042-linkedin:before { content: "\e629"; } -.ofn-i_015-user:before { +.ofn-i_043-instagram:before { content: "\e62a"; } -.ofn-i_014-menu:before { +.ofn-i_044-facebook:before { content: "\e62b"; } -.ofn-i_013-help:before { +.ofn-i_045-pintrest:before { content: "\e62c"; } -.ofn-i_012-warning:before { +.ofn-i_046-g:before { content: "\e62d"; } -.ofn-i_011-spinner:before { +.ofn-i_047-youtube:before { content: "\e62e"; } -.ofn-i_010-bullet:before { +.ofn-i_048-play-video:before { content: "\e62f"; } -.ofn-i_009-close:before { +.ofn-i_049-web:before { content: "\e630"; } -.ofn-i_008-caret-left:before { +.ofn-i_050-mail-circle:before { content: "\e631"; } -.ofn-i_007-caret-right:before { +.ofn-i_051-check-big:before { content: "\e632"; } -.ofn-i_006-caret-up:before { +.ofn-i_052-point-down:before { content: "\e633"; } -.ofn-i_005-caret-down:before { +.ofn-i_053-point-up:before { content: "\e634"; } -.ofn-i_004-x:before { +.ofn-i_054-point-right:before { content: "\e635"; } -.ofn-i_003-check:before { +.ofn-i_055-point-left:before { content: "\e636"; } -.ofn-i_002-arrow-right:before { +.ofn-i_056-bulk:before { content: "\e637"; } -.ofn-i_001-arrow-left:before { +.ofn-i_057-expand:before { content: "\e638"; } +.ofn-i-058-graph:before { + content: "\e639"; +} diff --git a/app/assets/stylesheets/darkswarm/typography.css.sass b/app/assets/stylesheets/darkswarm/typography.css.sass index ead907926e..1563dc3ca9 100644 --- a/app/assets/stylesheets/darkswarm/typography.css.sass +++ b/app/assets/stylesheets/darkswarm/typography.css.sass @@ -52,7 +52,7 @@ ul.bullet-list line-height: 1.5 height: inherit li:before - content: "\e62f" + content: "\e609" font-family: "OFN" display: inline-block font-weight: normal diff --git a/app/assets/stylesheets/darkswarm/ui.css.sass b/app/assets/stylesheets/darkswarm/ui.css.sass index b4ece539df..40896d4694 100644 --- a/app/assets/stylesheets/darkswarm/ui.css.sass +++ b/app/assets/stylesheets/darkswarm/ui.css.sass @@ -6,6 +6,7 @@ .neutral-btn @include button + @include border-radius(0.5em) font-family: 'Open Sans', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif background-color: transparent border: 2px solid rgba(200, 200, 200, 1) @@ -43,6 +44,9 @@ // Rewrite foundation's .primary button style +.button, button + @include border-radius(0.5em) + .button.primary, button.primary font-family: 'Open Sans', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif background: $clr-brick diff --git a/app/views/checkout/_billing.html.haml b/app/views/checkout/_billing.html.haml index 27fc2b202f..5ec2f12208 100644 --- a/app/views/checkout/_billing.html.haml +++ b/app/views/checkout/_billing.html.haml @@ -13,15 +13,19 @@ "ng-class" => "{valid: billing.$valid, open: accordion.billing}"} %accordion-heading .row - .small-11.columns + .small-10.columns %em %small {{ summary() | printArray }} - .small-1.columns.right - %span.accordion-up.right - %i.ofn-i_006-caret-up - %span.accordion-down.right - %i.ofn-i_005-caret-down + .small-2.columns.text-right + %span.accordion-up + %em + %small Hide + %i.ofn-i_053-point-up + %span.accordion-down + %em + %small Expand + %i.ofn-i_052-point-down = f.fields_for :bill_address, @order.bill_address do |ba| .row diff --git a/app/views/checkout/_details.html.haml b/app/views/checkout/_details.html.haml index 5be6b84043..e3b369182f 100644 --- a/app/views/checkout/_details.html.haml +++ b/app/views/checkout/_details.html.haml @@ -13,15 +13,19 @@ "ng-class" => "{valid: details.$valid, open: accordion.details}"} %accordion-heading .row - .small-11.columns + .small-10.columns %em %small {{ summary() | printArray }} - .small-1.columns.right - %span.accordion-up.right - %i.ofn-i_006-caret-up - %span.accordion-down.right - %i.ofn-i_005-caret-down + .small-2.columns.text-right + %span.accordion-up + %em + %small Hide + %i.ofn-i_053-point-up + %span.accordion-down + %em + %small Expand + %i.ofn-i_052-point-down .row .small-6.columns diff --git a/app/views/checkout/_payment.html.haml b/app/views/checkout/_payment.html.haml index 75c04f5e08..48c5e15711 100644 --- a/app/views/checkout/_payment.html.haml +++ b/app/views/checkout/_payment.html.haml @@ -13,15 +13,19 @@ "ng-class" => "{valid: payment.$valid, open: accordion.payment}"} %accordion-heading .row - .small-11.columns + .small-10.columns %em %small {{ Checkout.paymentMethod().name }} - .small-1.columns.right - %span.accordion-up.right - %i.ofn-i_006-caret-up - %span.accordion-down.right - %i.ofn-i_005-caret-down + .small-2.columns.text-right + %span.accordion-up + %em + %small Hide + %i.ofn-i_053-point-up + %span.accordion-down + %em + %small Expand + %i.ofn-i_052-point-down -# TODO render this in Angular instead of server-side -# The problem being how to render the partials diff --git a/app/views/checkout/_shipping.html.haml b/app/views/checkout/_shipping.html.haml index c7ab628c68..67c24cf3c5 100644 --- a/app/views/checkout/_shipping.html.haml +++ b/app/views/checkout/_shipping.html.haml @@ -13,15 +13,19 @@ "ng-class" => "{valid: shipping.$valid, open: accordion.shipping}"} %accordion-heading .row - .small-11.columns + .small-10.columns %em %small {{ Checkout.shippingMethod().name }} - .small-1.columns.right - %span.accordion-up.right - %i.ofn-i_006-caret-up - %span.accordion-down.right - %i.ofn-i_005-caret-down + .small-2.columns.text-right + %span.accordion-up + %em + %small Hide + %i.ofn-i_053-point-up + %span.accordion-down + %em + %small Expand + %i.ofn-i_052-point-down .small-12.columns.medium-6.columns.large-6.columns %label{"ng-repeat" => "method in ShippingMethods.shipping_methods"} diff --git a/app/views/home/index.html.haml b/app/views/home/index.html.haml index ea283f1490..cd220f3d53 100644 --- a/app/views/home/index.html.haml +++ b/app/views/home/index.html.haml @@ -15,11 +15,11 @@ = render partial: "home/hubs" -= render partial: "home/map" +/ = render partial: "home/map" -= render partial: "home/producers" +/ = render partial: "home/producers" -= render partial: "home/groups" +/ = render partial: "home/groups" = render partial: "home/beta" diff --git a/app/views/shared/_signed_in.html.haml b/app/views/shared/_signed_in.html.haml index 967986f4f1..0d952dc4a8 100644 --- a/app/views/shared/_signed_in.html.haml +++ b/app/views/shared/_signed_in.html.haml @@ -1,27 +1,24 @@ -/ %li#login-name -/ %a{"ng-click" => "toggle('/account')"} -/ = spree_current_user.email -/ %li#sign-out-link -/ %a{title: 'Log Out', href:'/logout' } -/ %i.ofn-i_018-unlocked -/ LOG OUT -/ = link_to "Sign Out", "/logout" -/ %li.divider %li.has-dropdown.not-click + %a{href: "#"} %i.ofn-i_022-cog + %ul.dropdown - %li - %a{href: spree.account_path} - %i.ofn-i_015-user - = spree_current_user.email - %li - %a{title: 'Log Out', href:'/logout' } - %i.ofn-i_018-unlocked - LOG OUT - + - if admin_user? or enterprise_user? %li %a{href: spree.admin_path} %i.ofn-i_021-tools - Admin \ No newline at end of file + Admin + + %li + %a{href: spree.account_path} + %i.ofn-i_015-user + = spree_current_user.email + + %li + %a{title: 'Log Out', href:'/logout' } + %i.ofn-i_018-unlocked + Log out + + \ No newline at end of file diff --git a/app/views/shared/_signed_in_offcanvas.html.haml b/app/views/shared/_signed_in_offcanvas.html.haml index e500646e62..c063a885fe 100644 --- a/app/views/shared/_signed_in_offcanvas.html.haml +++ b/app/views/shared/_signed_in_offcanvas.html.haml @@ -1,14 +1,15 @@ -%li - %a{href: spree.account_path} - %i.ofn-i_015-user - = spree_current_user.email -%li - %a{title: 'Log Out', href:'/logout' } - %i.ofn-i_018-unlocked - LOG OUT - - if admin_user? or enterprise_user? %li %a{href: spree.admin_path} %i.ofn-i_021-tools - Admin \ No newline at end of file + Admin + +%li + %a{href: spree.account_path} + %i.ofn-i_015-user + = spree_current_user.email + +%li + %a{title: 'Log Out', href:'/logout' } + %i.ofn-i_018-unlocked + Log out \ No newline at end of file diff --git a/app/views/shared/_signed_out.html.haml b/app/views/shared/_signed_out.html.haml index a004344038..237baa6bd8 100644 --- a/app/views/shared/_signed_out.html.haml +++ b/app/views/shared/_signed_out.html.haml @@ -1,5 +1,5 @@ %li#login-link{"ng-controller" => "AuthenticationCtrl"} %a{"ng-click" => "open()"} %i.ofn-i_017-locked - %span LOG IN + %span Log in diff --git a/app/views/shared/menu/_mobile_menu.html.haml b/app/views/shared/menu/_mobile_menu.html.haml index 1cbc09e578..df468363bd 100644 --- a/app/views/shared/menu/_mobile_menu.html.haml +++ b/app/views/shared/menu/_mobile_menu.html.haml @@ -10,45 +10,37 @@ %aside.left-off-canvas-menu.show-for-medium-down %ul.off-canvas-list %li= link_to image_tag("ofn_logo_small.png"), root_path - - - if admin_user? or enterprise_user? - %li - %a{href: spree.admin_path} - %span.nav-primary - %i.ofn-i_021-tools - Admin - %li - - if spree_current_user.nil? - = render 'shared/signed_out' - - else - = render 'shared/signed_in_offcanvas' - + - if current_page? root_path - %li + %li.li-menu %a{"ofn-scroll-to" => "hubs"} %span.nav-primary %i.ofn-i_040-hub Hubs - else - %li + %li.li-menu %a{href: root_path + "#/#hubs"} %span.nav-primary %i.ofn-i_040-hub Hubs - %li + %li.li-menu %a{href: main_app.map_path} %span.nav-primary %i.ofn-i_037-map Map - %li + %li.li-menu %a{href: main_app.producers_path} %span.nav-primary %i.ofn-i_036-producers Producers - %li + %li.li-menu %a{href: main_app.groups_path} %span.nav-primary %i.ofn-i_035-groups Groups - + %li + - if spree_current_user.nil? + = render 'shared/signed_out' + - else + = render 'shared/signed_in_offcanvas' diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml index 2613803083..81b22a6593 100644 --- a/app/views/shop/products/_form.html.haml +++ b/app/views/shop/products/_form.html.haml @@ -4,7 +4,7 @@ = form_for :order, :url => populate_orders_path, html: {:class => "custom"} do .row - .small-12.medium-8.large-8.columns + .small-12.columns %input#search.text{"ng-model" => "query", placeholder: "Search by product or producer", "ng-debounce" => "100", @@ -12,8 +12,8 @@ = render partial: "shop/products/filters" - .small-12.medium-4.large-4.columns - %input.button.primary.right{type: :submit, value: "Checkout now"} + / .small-12.medium-4.large-4.columns + / %input.button.primary.right{type: :submit, value: "Checkout now"} %div.pad-top{bindonce: true} %product.animate-repeat{"ng-controller" => "ProductNodeCtrl", diff --git a/app/views/shop/products/_master.html.haml b/app/views/shop/products/_master.html.haml index f6d6f99869..b944ee192d 100644 --- a/app/views/shop/products/_master.html.haml +++ b/app/views/shop/products/_master.html.haml @@ -7,7 +7,7 @@ \ Bulk -# WITHOUT GROUP BUY -.small-4.medium-3.large-3.columns.text-right{"bo-if" => "!product.group_buy"} +.small-5.medium-3.large-3.columns.text-right{"bo-if" => "!product.group_buy"} %input{type: :number, min: 0, placeholder: "0", @@ -18,7 +18,7 @@ id: "variants_{{product.master.id}}"} -# WITH GROUP BUY -.small-4.medium-3.large-3.columns.text-right{"bo-if" => "product.group_buy"} +.small-5.medium-3.large-3.columns.text-right{"bo-if" => "product.group_buy"} %span.bulk-input-container %span.bulk-input %input.bulk.first{type: :number, @@ -39,16 +39,19 @@ max: "{{product.on_demand && 9999 || product.count_on_hand }}", name: "variant_attributes[{{product.master.id}}][max_quantity]"} -.small-2.medium-1.large-1.columns.variant-unit +.small-3.medium-1.large-1.columns.variant-unit .table-cell %em {{ product.master.unit_to_display }} -.small-3.medium-2.large-2.columns.variant-price - .table-cell - %i.ofn-i_009-close +.small-4.medium-2.large-2.columns.variant-price + .table-cell + %i.ofn-i_009-close {{ product.price | currency }} + + %button.graph-button{popover: "This is the popover text", "popover-title" => "The title.", "popover-animation" => "true", "popover-trigger" =>"mouseenter", "popover-placement" => "top"} + %i.ofn-i-058-graph -.small-3.medium-2.large-2.columns.total-price.text-right +.small-12.medium-2.large-2.columns.total-price.text-right .table-cell %strong {{ product.master.getPrice() | currency }} diff --git a/app/views/shop/products/_summary.html.haml b/app/views/shop/products/_summary.html.haml index 6f344b9637..e06f8a4a3d 100644 --- a/app/views/shop/products/_summary.html.haml +++ b/app/views/shop/products/_summary.html.haml @@ -1,6 +1,7 @@ .row.summary - .small-10.large-11.columns.summary-header - %h3 {{ product.name }} + .small-9.medium-10.large-11.columns.summary-header + %a{"ng-click" => "triggerProductModal()"} + %h3 {{ product.name }} %em from %span @@ -8,6 +9,6 @@ %i.ofn-i_036-producers {{ enterprise.name }} - .small-2.large-1.columns.text-center + .small-3.medium-2.large-1.columns.text-center .taxon-flag %render-svg{path: "{{product.primary_taxon.icon}}"} \ No newline at end of file diff --git a/app/views/shop/products/_variants.html.haml b/app/views/shop/products/_variants.html.haml index c7e176e6e0..7306f44bcb 100644 --- a/app/views/shop/products/_variants.html.haml +++ b/app/views/shop/products/_variants.html.haml @@ -10,7 +10,7 @@ \ Bulk -# WITHOUT GROUP BUY - .small-4.medium-3.large-3.columns.text-right{"bo-if" => "!product.group_buy"} + .small-5.medium-3.large-3.columns.text-right{"bo-if" => "!product.group_buy"} %input{type: :number, value: nil, min: 0, @@ -22,7 +22,7 @@ -# WITH GROUP BUY - .small-4.medium-3.large-3.columns.text-right{"bo-if" => "product.group_buy"} + .small-5.medium-3.large-3.columns.text-right{"bo-if" => "product.group_buy"} %span.bulk-input-container %span.bulk-input %input.bulk.first{type: :number, @@ -42,16 +42,19 @@ max: "{{variant.on_demand && 9999 || variant.count_on_hand }}", name: "variant_attributes[{{variant.id}}][max_quantity]"} - .small-2.medium-1.large-1.columns.variant-unit + .small-3.medium-1.large-1.columns.variant-unit .table-cell %em {{ variant.unit_to_display }} - .small-3.medium-2.large-2.columns.variant-price - .table-cell + .small-4.medium-2.large-2.columns.variant-price + .table-cell %i.ofn-i_009-close {{ variant.price | currency }} - .small-3.medium-2.large-2.columns.total-price.text-right + %button.graph-button{popover: "This is the popover text", "popover-title" => "The title.", "popover-animation" => "true", "popover-trigger" =>"mouseenter", "popover-placement" => "top"} + %i.ofn-i-058-graph + + .small-12.medium-2.large-2.columns.total-price.text-right .table-cell %strong {{ variant.getPrice() | currency }} diff --git a/app/views/shopping_shared/_tabs.html.haml b/app/views/shopping_shared/_tabs.html.haml index 56fa48b8b5..7a78a191b6 100644 --- a/app/views/shopping_shared/_tabs.html.haml +++ b/app/views/shopping_shared/_tabs.html.haml @@ -1,6 +1,7 @@ #tabs{"ng-controller" => "TabsCtrl"} .row %tabset.small-12.columns + // WILL can we add some logic here to make the distributor name not appear at small sizes? e.g. add a class?) - for name, heading in { about: "About #{current_distributor.name}", producers: "Producers", groups: "Groups", diff --git a/public/OFN.eot b/public/OFN.eot index 29cead43c7..5839e08963 100755 Binary files a/public/OFN.eot and b/public/OFN.eot differ diff --git a/public/OFN.svg b/public/OFN.svg index 0e2eea3b28..f92225f1cd 100755 --- a/public/OFN.svg +++ b/public/OFN.svg @@ -7,61 +7,62 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/OFN.ttf b/public/OFN.ttf index 4b9b2e5cdc..cac7377e06 100755 Binary files a/public/OFN.ttf and b/public/OFN.ttf differ diff --git a/public/OFN.woff b/public/OFN.woff index 30d229ffd0..4ccf9c6192 100755 Binary files a/public/OFN.woff and b/public/OFN.woff differ