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..22c05f895d --- /dev/null +++ b/app/assets/stylesheets/darkswarm/_shop-inputs.css.sass @@ -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 + + + 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-product-rows.css.sass b/app/assets/stylesheets/darkswarm/_shop-product-rows.css.sass new file mode 100644 index 0000000000..ab7db39d91 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/_shop-product-rows.css.sass @@ -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 + + + + + + + + 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..6a81a73b4f --- /dev/null +++ b/app/assets/stylesheets/darkswarm/_shop-product-thumb.css.sass @@ -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 \ 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..17bafe2648 --- /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 \ No newline at end of file