diff --git a/sites/demo/static/demo/fonts/icomoon.dev.svg b/sites/demo/static/demo/fonts/icomoon.dev.svg
index 55b1c5801af..faf7bcbb9a4 100644
--- a/sites/demo/static/demo/fonts/icomoon.dev.svg
+++ b/sites/demo/static/demo/fonts/icomoon.dev.svg
@@ -75,6 +75,38 @@ q0.00-16.25 -11.563-28.125t-28.438-11.875z" data-tags="plus" />
+
+
+
\ No newline at end of file
diff --git a/sites/demo/static/demo/fonts/icomoon.eot b/sites/demo/static/demo/fonts/icomoon.eot
index 8814dbd0d30..e55c6701e30 100644
Binary files a/sites/demo/static/demo/fonts/icomoon.eot and b/sites/demo/static/demo/fonts/icomoon.eot differ
diff --git a/sites/demo/static/demo/fonts/icomoon.svg b/sites/demo/static/demo/fonts/icomoon.svg
index 111d77912e8..740c6f35ffa 100644
--- a/sites/demo/static/demo/fonts/icomoon.svg
+++ b/sites/demo/static/demo/fonts/icomoon.svg
@@ -75,6 +75,38 @@ q0.00-16.25 -11.563-28.125t-28.438-11.875z" />
+
+
+
\ No newline at end of file
diff --git a/sites/demo/static/demo/fonts/icomoon.ttf b/sites/demo/static/demo/fonts/icomoon.ttf
index 3651439f2e0..1b9fc358f88 100644
Binary files a/sites/demo/static/demo/fonts/icomoon.ttf and b/sites/demo/static/demo/fonts/icomoon.ttf differ
diff --git a/sites/demo/static/demo/fonts/icomoon.woff b/sites/demo/static/demo/fonts/icomoon.woff
index 5423646cd48..3b715eeb637 100644
Binary files a/sites/demo/static/demo/fonts/icomoon.woff and b/sites/demo/static/demo/fonts/icomoon.woff differ
diff --git a/sites/demo/static/demo/fonts/lte-ie7.js b/sites/demo/static/demo/fonts/lte-ie7.js
index b85c0eede6c..bcf62fe026f 100644
--- a/sites/demo/static/demo/fonts/lte-ie7.js
+++ b/sites/demo/static/demo/fonts/lte-ie7.js
@@ -20,7 +20,10 @@ window.onload = function() {
'icon-mail' : '',
'icon-plus' : '+',
'icon-noun_project_62' : '!',
- 'icon-arrow-down' : '"'
+ 'icon-arrow-down' : '"',
+ 'icon-check-alt' : '#',
+ 'icon-x-altx-alt' : '$',
+ 'icon-checkout-half-wheel' : '%'
},
els = document.getElementsByTagName('*'),
i, attr, html, c, el;
diff --git a/sites/demo/static/demo/img/carousel/banner-01.jpg b/sites/demo/static/demo/img/carousel/banner-01.jpg
new file mode 100644
index 00000000000..3179b890d92
Binary files /dev/null and b/sites/demo/static/demo/img/carousel/banner-01.jpg differ
diff --git a/sites/demo/static/demo/img/carousel/banner-02.jpg b/sites/demo/static/demo/img/carousel/banner-02.jpg
new file mode 100644
index 00000000000..57177b574b2
Binary files /dev/null and b/sites/demo/static/demo/img/carousel/banner-02.jpg differ
diff --git a/sites/demo/static/demo/img/carousel/banner-03.jpg b/sites/demo/static/demo/img/carousel/banner-03.jpg
new file mode 100644
index 00000000000..8ab249c8fea
Binary files /dev/null and b/sites/demo/static/demo/img/carousel/banner-03.jpg differ
diff --git a/sites/demo/static/demo/img/ui/sprite.png b/sites/demo/static/demo/img/ui/sprite.png
new file mode 100644
index 00000000000..04e317a1fb2
Binary files /dev/null and b/sites/demo/static/demo/img/ui/sprite.png differ
diff --git a/sites/demo/static/demo/js/flexslider/product-nav.png b/sites/demo/static/demo/js/flexslider/product-nav.png
new file mode 100644
index 00000000000..f8cb6a534b5
Binary files /dev/null and b/sites/demo/static/demo/js/flexslider/product-nav.png differ
diff --git a/sites/demo/static/demo/js/oscar/ui.js b/sites/demo/static/demo/js/oscar/ui.js
index e32142e84d5..004a07829cc 100644
--- a/sites/demo/static/demo/js/oscar/ui.js
+++ b/sites/demo/static/demo/js/oscar/ui.js
@@ -92,7 +92,6 @@ var oscar = (function(o, $) {
init: function() {
if (o.responsive.isDesktop()) {
o.responsive.initNav();
- o.responsive.initCarousel();
}
},
isDesktop: function() {
diff --git a/sites/demo/static/demo/js/site/ui.js b/sites/demo/static/demo/js/site/ui.js
index d1db7a516b3..f21145fd9d4 100644
--- a/sites/demo/static/demo/js/site/ui.js
+++ b/sites/demo/static/demo/js/site/ui.js
@@ -17,14 +17,74 @@
});
}
+ function productImageCarousel() {
+ $('#product-image-carousel').flexslider({
+ animation: "slide"
+ });
+ }
+
+ function productSingleCarousel() {
+ $('.product-single-carousel .flexslider').flexslider({
+ animation: "slide"
+ });
+ }
+
+ function productAffix() {
+ $('.product-gallery').affix();
+ }
+
+ function productCarousel() {
+ $('.product-carousel .flexslider').each(function(){
+ var productPage = $('.product-page'),
+ homePage = $('.home-page'),
+ imageWidth = 180,
+ maxProducts = 4,
+ showNav = true;
+ if (productPage.length > 0) {
+ imageWidth = 150;
+ maxProducts = 5;
+ showNav = false;
+ }
+ if (homePage.length > 0) {
+ imageWidth = 140;
+ }
+ $(this).flexslider({
+ animation: "slide",
+ animationLoop: true,
+ itemWidth: imageWidth,
+ minItems: 1,
+ maxItems: maxProducts,
+ controlNav: showNav
+ });
+ });
+ }
+
+ function matchHeight(hasChanged) {
+ if (!hasChanged) {
+ return;
+ }
+ var matchHeight = $('[data-behaviours~="match-height"]');
+
+ if(matchHeight.length > 1) {
+ var rowHeight = matchHeight.closest('.row-fluid').height() - 40;
+
+ matchHeight.each(function() {
+ $(this).css('min-height', rowHeight);
+ });
+ }
+ }
+
// Register modernizr function against all viewports
site.responsive.register(svgModernizr);
+ site.responsive.register(productImageCarousel);
// Register mobile callback
// Register desktop callback
site.responsive.register(megaCarousel, ['desktop', 'tablet']);
+ site.responsive.register(productCarousel, ['desktop', 'tablet']);
+ site.responsive.register(productSingleCarousel, ['desktop', 'tablet']);
}(site, jQuery));
\ No newline at end of file
diff --git a/sites/demo/static/demo/less/bootstrap/breadcrumbs.less b/sites/demo/static/demo/less/bootstrap/breadcrumbs.less
index f753df6be8c..a5e6ba056a4 100755
--- a/sites/demo/static/demo/less/bootstrap/breadcrumbs.less
+++ b/sites/demo/static/demo/less/bootstrap/breadcrumbs.less
@@ -2,13 +2,10 @@
// Breadcrumbs
// --------------------------------------------------
-
.breadcrumb {
- padding: 8px 15px;
- margin: 0 0 @baseLineHeight;
+ padding: 8px 0;
+ margin: 0 0 20px;
list-style: none;
- background-color: #f5f5f5;
- .border-radius(@baseBorderRadius);
> li {
display: inline-block;
.ie7-inline-block();
diff --git a/sites/demo/static/demo/less/bootstrap/buttons.less b/sites/demo/static/demo/less/bootstrap/buttons.less
index 4cd4d862b38..3976706feec 100755
--- a/sites/demo/static/demo/less/bootstrap/buttons.less
+++ b/sites/demo/static/demo/less/bootstrap/buttons.less
@@ -10,7 +10,7 @@
.btn {
display: inline-block;
.ie7-inline-block();
- padding: 4px 12px;
+ padding: 8px 16px;
margin-bottom: 0; // For input.btn
font-size: @baseFontSize;
line-height: @baseLineHeight;
@@ -68,8 +68,8 @@
// Large
.btn-large {
- padding: @paddingLarge;
- font-size: @fontSizeLarge;
+ padding: 20px 30px;
+ font-size: @headingThreeSize;
.border-radius(@borderRadiusLarge);
}
.btn-large [class^="icon-"],
diff --git a/sites/demo/static/demo/less/bootstrap/forms.less b/sites/demo/static/demo/less/bootstrap/forms.less
index 06767bdd3ea..1a74be84485 100755
--- a/sites/demo/static/demo/less/bootstrap/forms.less
+++ b/sites/demo/static/demo/less/bootstrap/forms.less
@@ -9,6 +9,7 @@
// Make all forms have space below them
form {
margin: 0 0 @baseLineHeight;
+ .clearfix();
}
fieldset {
@@ -55,6 +56,8 @@ textarea {
label {
display: block;
margin-bottom: 5px;
+ color:@navbarInverseBackground;
+ font-weight: bold;
}
// Form controls
@@ -79,13 +82,12 @@ input[type="tel"],
input[type="color"],
.uneditable-input {
display: inline-block;
- height: @baseLineHeight;
- padding: 4px 6px;
- margin-bottom: @baseLineHeight / 2;
- font-size: @baseFontSize;
- line-height: @baseLineHeight;
+ height: @headingThreeSize;
+ padding: 6px;
+ margin-bottom: @headingThreeSize / 2;
+ font-size: @headingFourSize;
+ line-height: @headingThreeSize;
color: @gray;
- .border-radius(@inputBorderRadius);
vertical-align: middle;
}
@@ -119,7 +121,6 @@ input[type="color"],
.uneditable-input {
background-color: @inputBackground;
border: 1px solid @inputBorder;
- .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
.transition(~"border linear .2s, box-shadow linear .2s");
// Focus state
@@ -596,6 +597,18 @@ input.search-query {
display: none;
}
}
+.form-stacked {
+ input,
+ textarea,
+ select {
+ .input-block-level();
+ }
+ .checkbox, .radio {
+ input {
+ width:auto;
+ }
+ }
+}
.form-search label,
.form-inline label,
.form-search .btn-group,
@@ -631,7 +644,7 @@ input.search-query {
// Margin to space out fieldsets
.control-group {
- margin-bottom: @baseLineHeight / 2;
+ margin-bottom: 10px;
}
// Legend collapses margin, so next element is responsible for spacing
@@ -688,3 +701,23 @@ legend + .control-group {
padding-left: @horizontalComponentOffset;
}
}
+
+//For IE: adds width for selects inside overflow hidden containers
+.select-open {
+ width:300px!important;
+}
+
+// ADDITIONAL ERRORS
+.errorlist {
+ margin:0;
+ padding:0 0 10px 0;
+ color:#B94A48;
+ li {
+ padding:0 0 5px 0;
+ list-style:none;
+ }
+}
+
+.control-label.required span {
+ color: #FF0000;
+}
diff --git a/sites/demo/static/demo/less/bootstrap/layouts.less b/sites/demo/static/demo/less/bootstrap/layouts.less
index 24a2062117c..a2ad157b79d 100755
--- a/sites/demo/static/demo/less/bootstrap/layouts.less
+++ b/sites/demo/static/demo/less/bootstrap/layouts.less
@@ -2,15 +2,24 @@
// Layouts
// --------------------------------------------------
+// Demo page structure
+html,
+body {
+ height: 100%;
+}
-// Container (centered, fixed-width layouts)
-.container {
- .container-fixed();
+#layout {
+ min-height: 100%;
+ margin-bottom: -(@footer-height);
}
-// Fluid layouts (left aligned, with sidebar, min- & max-width content)
.container-fluid {
- padding-right: @gridGutterWidth;
- padding-left: @gridGutterWidth;
- .clearfix();
+ padding:0px;
+ margin:0px auto;
+ max-width:1170px;
+}
+
+.page_inner {
+ padding:@gridGutterWidth 0 50px;
+ .clearfix();
}
\ No newline at end of file
diff --git a/sites/demo/static/demo/less/bootstrap/mixins.less b/sites/demo/static/demo/less/bootstrap/mixins.less
index 79d889219f1..b4b904ea7b9 100755
--- a/sites/demo/static/demo/less/bootstrap/mixins.less
+++ b/sites/demo/static/demo/less/bootstrap/mixins.less
@@ -700,3 +700,40 @@
}
}
+
+// OSC PRODUCT WIDTHS
+// --------------------------------------------------
+@fifth: 20%;
+@quart: 25%;
+@third: 33.33333333333333%;
+@half: 50%;
+@three_quart: 75%;
+@full:100%;
+
+@footer-height: 330px;
+
+// OSC MIXINS
+// --------------------------------------------------
+.remove_bullets() {
+ margin: 0;
+ padding: 0;
+ li {
+ padding: 0;
+ list-style:none;
+ }
+}
+.horiz_col() {
+ padding:0px;
+ margin:0px;
+ .clearfix();
+ > li {
+ list-style:none;
+ }
+ li {
+ float:left;
+ li {
+ float:none;
+ }
+ }
+}
+
diff --git a/sites/demo/static/demo/less/bootstrap/navbar.less b/sites/demo/static/demo/less/bootstrap/navbar.less
index 93d09bcad03..18eaff05ded 100755
--- a/sites/demo/static/demo/less/bootstrap/navbar.less
+++ b/sites/demo/static/demo/less/bootstrap/navbar.less
@@ -114,6 +114,14 @@
.checkbox {
.navbarVerticalAlign(30px); // Vertically center in navbar
}
+ input {
+ height: @baseLineHeight;
+ padding: 4px 6px;
+ margin-bottom: @baseLineHeight / 2;
+ font-size: @baseFontSize;
+ line-height: @baseLineHeight;
+ .border-radius(@inputBorderRadius);
+ }
input,
select,
.btn {
diff --git a/sites/demo/static/demo/less/bootstrap/type.less b/sites/demo/static/demo/less/bootstrap/type.less
index 337138ac8ef..1f84a8a164a 100755
--- a/sites/demo/static/demo/less/bootstrap/type.less
+++ b/sites/demo/static/demo/less/bootstrap/type.less
@@ -53,6 +53,9 @@ a.text-success:focus { color: darken(@successText, 10%); }
.text-center { text-align: center; }
+
+
+
// Headings
// -------------------------
@@ -66,7 +69,6 @@ h1, h2, h3, h4, h5, h6 {
small {
font-weight: normal;
line-height: 1;
- color: @grayLight;
}
}
@@ -86,14 +88,67 @@ h2 small { font-size: @baseFontSize * 1.25; } // ~18px
h3 small { font-size: @baseFontSize; }
h4 small { font-size: @baseFontSize; }
+//Rewrite below or above rather than overwrite.
+
+@headingsFontWeight: 700;
+
+@headingOneSize: 48px;
+@headingTwoSize: 32px;
+@headingThreeSize: 24px;
+@headingFourSize: 16px;
+
+h1 { font-size: @headingOneSize; line-height: 58px; }
+h2 { font-size: @headingTwoSize; line-height: 38px; }
+h3 { font-size: @headingThreeSize; line-height: 30px; }
+h4 { font-size: @headingFourSize; line-height: 20px; }
+
+h1, h2, h3, h4, p, .promotion-block {
+ margin:0 0 30px;
+}
+
+h1, h2, h3 {
+ color:@navbarInverseBackground;
+}
+
+h3 {
+ text-transform: uppercase;
+}
+
// Page header
// -------------------------
.page-header {
+ .clearfix();
+ margin: 0 0 (@baseLineHeight * 1.5);
+ h1 {
+ font-size:@headingTwoSize;
+ line-height: 38px;
+ text-transform: uppercase;
+ }
+ .verisign {
+ position: relative;
+ top:-10px;
+ float:right;
+ }
+}
+.well .sub-header {
+ margin: 0 0 (@baseLineHeight);
+}
+.sub-header {
padding-bottom: (@baseLineHeight / 2) - 1;
- margin: @baseLineHeight 0 (@baseLineHeight * 1.5);
border-bottom: 1px solid @grayLighter;
+ margin: 0 0 (@baseLineHeight);
+}
+.page-header {
+ h1,h2 {
+ margin:0;
+ }
+}
+.sub-header {
+ h2,h3,h4 {
+ margin:0;
+ }
}
@@ -172,8 +227,7 @@ dd {
hr {
margin: @baseLineHeight 0;
border: 0;
- border-top: 1px solid @hrBorder;
- border-bottom: 1px solid @white;
+ border-top: 1px solid #DDDDDD;
}
// Abbreviations and acronyms
diff --git a/sites/demo/static/demo/less/bootstrap/utilities.less b/sites/demo/static/demo/less/bootstrap/utilities.less
index 314b4ffdb45..7d759c76144 100755
--- a/sites/demo/static/demo/less/bootstrap/utilities.less
+++ b/sites/demo/static/demo/less/bootstrap/utilities.less
@@ -10,6 +10,9 @@
.pull-left {
float: left;
}
+.pull-clear {
+ clear: both;
+}
// Toggling content
.hide {
@@ -28,3 +31,15 @@
.affix {
position: fixed;
}
+
+.align-right,
+.table .align-right,
+.table .align-right {
+ text-align:right;
+}
+
+.align-center,
+.table .align-center,
+.table .align-center {
+ text-align:center;
+}
diff --git a/sites/demo/static/demo/less/bootstrap/variables.less b/sites/demo/static/demo/less/bootstrap/variables.less
index 31c131b1e23..05cc596b352 100755
--- a/sites/demo/static/demo/less/bootstrap/variables.less
+++ b/sites/demo/static/demo/less/bootstrap/variables.less
@@ -12,7 +12,8 @@
@black: #000;
@grayDarker: #222;
@grayDark: #333;
-@gray: #555;
+@gray: #8E8E8E;
+@grayOff: #97A5A3;
@grayLight: #999;
@grayLighter: #eee;
@white: #fff;
@@ -20,9 +21,9 @@
// Accent colors
// -------------------------
-@blue: #049cdb;
-@blueDark: #0064cd;
-@green: #46a546;
+@blue: #337ABF;
+@blueDark: #024872;
+@green: #4CA84C;
@red: #9d261d;
@yellow: #ffc40d;
@orange: #f89406;
@@ -33,18 +34,20 @@
// Scaffolding
// -------------------------
@bodyBackground: @white;
-@textColor: @grayDark;
+@textColor: #595959;
// Links
// -------------------------
-@linkColor: #08c;
+@linkColor: @blue;
@linkColorHover: darken(@linkColor, 15%);
// Typography
// -------------------------
-@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
+@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700);
+
+@sansFontFamily: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@serifFontFamily: Georgia, "Times New Roman", Times, serif;
@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace;
@@ -114,7 +117,7 @@
@inputBorderRadius: @baseBorderRadius;
@inputDisabledBackground: @grayLighter;
@formActionsBackground: #f5f5f5;
-@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
+@inputHeight: @baseLineHeight + 20px; // base line-height + 8px vertical padding + 2px top/bottom border
// Dropdowns
@@ -195,8 +198,8 @@
@navbarBrandColor: @navbarLinkColor;
// Inverted navbar
-@navbarInverseBackground: #111111;
-@navbarInverseBackgroundHighlight: #222222;
+@navbarInverseBackground: #10283F;
+@navbarInverseBackgroundHighlight: #10283F;
@navbarInverseBorder: #252525;
@navbarInverseText: @grayLight;
diff --git a/sites/demo/static/demo/less/bootstrap/wells.less b/sites/demo/static/demo/less/bootstrap/wells.less
index 84a744b1c5c..0998e7d5f98 100755
--- a/sites/demo/static/demo/less/bootstrap/wells.less
+++ b/sites/demo/static/demo/less/bootstrap/wells.less
@@ -7,11 +7,9 @@
.well {
min-height: 20px;
padding: 19px;
- margin-bottom: 20px;
+ margin-bottom: 30px;
background-color: @wellBackground;
border: 1px solid darken(@wellBackground, 7%);
- .border-radius(@baseBorderRadius);
- .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
blockquote {
border-color: #ddd;
border-color: rgba(0,0,0,.15);
diff --git a/sites/demo/static/demo/less/page/buttons.less b/sites/demo/static/demo/less/page/buttons.less
index 6d974004af3..fa4dc959d6b 100644
--- a/sites/demo/static/demo/less/page/buttons.less
+++ b/sites/demo/static/demo/less/page/buttons.less
@@ -1,12 +1,9 @@
// Core styles
.btn {
display: inline-block;
- padding: 8px 16px;
margin-bottom: 0; // For input.btn
- font-size: @baseFontSize;
font-weight: 700;
text-transform: uppercase;
- line-height: @baseLineHeight;
text-align: center;
color:@white;
vertical-align: middle;
diff --git a/sites/demo/static/demo/less/page/checkout.less b/sites/demo/static/demo/less/page/checkout.less
index 97cb5203f92..0b975536295 100644
--- a/sites/demo/static/demo/less/page/checkout.less
+++ b/sites/demo/static/demo/less/page/checkout.less
@@ -19,80 +19,113 @@
margin-bottom: 18px;
}
}
+//Basket column names
.basket-title {
clear:both;
- border-bottom:1px solid lighten(@grayLight, 30%);
- padding:0 10px;
+ border:1px solid #ddd;
+ background:#F2F2F2;
+ padding:20px;
+ margin-bottom:10px;
+ .row-fluid [class*="span"] {
+ min-height:auto;
+ }
h4 {
margin:0;
}
}
+.well {
+ .basket-title {
+ background:none;
+ padding:0;
+ border-width:0;
+ border-bottom-width:1px;
+ }
+}
+//Basket list item
.basket-items {
border-bottom:1px solid lighten(@grayLight, 30%);
- padding:10px;
+ padding:15px 0;
[class*="span"] {
.image_container {
- min-height:100px;
- width:80px;
+ min-height:170px;
+ line-height: 170px;
+ width:150px;
float:left;
margin-right:15px;
+ margin-bottom:0;
+ border:1px solid #ddd;
+ background:@white;
+ }
+ h3, h4 {
+ margin-bottom:0;
+ }
+ h4 {
+ color:@grayOff;
+ text-transform: uppercase;
+ }
+ h3 {
+ text-transform: none;
+ font-size: 20px;
+ a {
+ color:@navbarInverseBackground;
+ }
}
img {
- max-height:100px;
+ max-height:150px;
}
}
- &:nth-child(even) {
- background:lighten(@grayLighter, 4%);
- }
.price_color {
font-size:@baseFontSize + 2;
font-weight:bold;
}
}
+.basket_summary {
+ + .row-fluid .well {
+ min-height: 400px;
+ }
+}
+//Basket Totals table
#basket_totals {
th small {
font-weight: normal;
}
+ h3, h4 {
+ margin-bottom:0;
+ }
}
-
-.shipping_address {
- h2 {
- margin-bottom: @baseLineHeight;
+//Proceed to checkout area
+.checkout-proceed {
+ float:right;
+ text-align: right;
+ margin-bottom:30px;
+ span {
+ display:inline-block;
+ text-align: left;
+ margin:0 20px;
+ }
+ .credit-cards {
+ margin:0;
+ }
+ > strong {
+ font-size:@headingFourSize;
+ text-transform: uppercase;
+ display:block;
+ margin:20px 0;
}
}
+//Shipping addresses
.choose-block {
- margin-top:10px;
ul {
.remove_bullets();
.clearfix();
li {
- width: @third;
- float: left;
.default-address {
background-color: @grayLighter;
}
}
}
- .well {
- position:relative;
- form {
- position:relative;
- padding-bottom:35px;
- margin-bottom:0;
- .ship-address {
- bottom: 0;
- position: absolute;
- }
- }
- .remove-item {
- position:absolute;
- bottom: 10px;
- right: 19px;
- margin-bottom: 0;
- input {
- margin-bottom: 0;
- }
- }
+ form {
+ margin-bottom:0;
}
.well-info.default-address {
background-color: @successBackground;
@@ -112,67 +145,83 @@
}
}
}
-
-.total {
- background-color:#FDF5D9!important;
-}
-
-.checkoutNav ul li {
- background: none repeat scroll 0 0 @grayLighter;
- color: #FFFFFF;
- float: left;
- height: 30px;
- line-height: 30px;
- margin: 0;
- padding: 1px 0 4px;
- position: relative;
- text-decoration: none;
- h3 {
- text-align: center;
- font-size: 11px;
- color: @grayLight;
- margin: 0;
- margin-left: 12px;
- line-height: 30px;
- }
+.shipping-payment {
+ .span6 > .well {
+ min-height:380px;
+ }
}
-
-.checkoutNav ul li:after {
- border-color: transparent transparent transparent @grayLighter;
- border-style: solid;
- border-width: 14px 0 15px 15px;
- content: "";
- float: left;
- height: 0;
+//Checkout navigation
+.checkoutNav {
+ .container-fluid {
+ max-width: 960px;
+ }
+ position: relative;
+ margin:30px 0 50px;
+ background:#F2F2F2;
+ padding:5px 0;
+ border-top:2px solid @navbarInverseBackground;
+ border-bottom:1px solid #DDD;
+ i {
+ display:none;
+ vertical-align: bottom;
position: absolute;
- right: -15px;
- top: 0;
- width: 0;
+ width:100%;
+ left:0;
+ top:-25px;
+ }
+ ul {
+ .clearfix();
+ li {
+ position: relative;
+ list-style: none;
+ display:block;
+ text-align: center;
+ width:@quart;
+ float: left;
+ margin: 0;
+ font-weight: bold;
+ text-transform: uppercase;
+ color:@navbarInverseBackground;
+ font-size: 18px;
+ &.visited {
+ color:@green;
+ i:first-child + i {
+ display:inline-block;
+ font-size: @headingThreeSize;
+ line-height: @headingThreeSize;
+ }
+ a {
+ color:@green;
+ }
+ }
+ &.active {
+ i:first-child {
+ display:inline-block;
+ font-size: @headingTwoSize;
+ line-height: @headingTwoSize;
+ height:32px;
+ overflow: hidden;
+ top:-38px;
+ }
+ }
+ }
+ }
}
-
-.checkoutNav ul li.active:after {
- border-color: transparent transparent transparent #0088CC;
+//Footer and Checkout images
+.credit-cards,
+.verisign {
+ display:inline-block;
+ vertical-align: middle;
+ margin:0 4px;
}
-
-.checkoutNav ul li.active {
- background-color: #0088CC;
+.credit-cards {
+ width:178px;
+ height:21px;
+ background: url(/static/demo/img/ui/sprite.png) 0 -49px repeat transparent;
}
-
-.checkoutNav ul li:before {
- border-color: transparent transparent transparent #fff;
- border-style: solid;
- border-width: 15px 0 15px 15px;
- content: "";
- float: left;
- height: 0;
- left: 0;
- position: absolute;
- top: 0;
- width: 0;
+.verisign {
+ width:100px;
+ height:49px;
+ background: url(/static/demo/img/ui/sprite.png) 0 0 repeat transparent;
}
-.checkoutNav ul li.active h3 {
- color: #fff;
- text-align: center;
- font-size: 12px;
-}
diff --git a/sites/demo/static/demo/less/page/flexslider.less b/sites/demo/static/demo/less/page/flexslider.less
index 9c09d3b0e31..19e9d97eafe 100644
--- a/sites/demo/static/demo/less/page/flexslider.less
+++ b/sites/demo/static/demo/less/page/flexslider.less
@@ -39,7 +39,7 @@ html[xmlns] .slides {display: block;}
/* FlexSlider Default Theme
*********************************/
-.flexslider {margin: 0 0 60px; background: #fff; position: relative; zoom: 1; overflow: hidden;}
+.flexslider {margin: 0 0 60px; background: #fff; position: relative; zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}
@@ -49,16 +49,33 @@ html[xmlns] .slides {display: block;}
/* Direction Nav */
.flex-direction-nav {*height: 0;}
-.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(/static/demo/js/flexslider/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
-.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; }
-.flex-direction-nav .flex-prev {left: -36px;}
+.flex-direction-nav a {
+ width: 40px;
+ height: 40px;
+ margin: -20px 0 0;
+ display: block;
+ background: url(/static/demo/js/flexslider/product-nav.png) no-repeat 0 0;
+ position: absolute;
+ top: 45%;
+ z-index: 10;
+ cursor: pointer;
+ text-indent: -9999px;
+ opacity: 0;
+ -webkit-transition: all .3s ease;}
+.flex-direction-nav .flex-next {
+ background-position: 100% 0;
+ right: -36px;
+}
+.flex-direction-nav .flex-prev {
+ left: -36px;
+}
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}
/* Control Nav */
-.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
+.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;left:0;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
diff --git a/sites/demo/static/demo/less/page/fonts.less b/sites/demo/static/demo/less/page/fonts.less
deleted file mode 100644
index 8451c2a7188..00000000000
--- a/sites/demo/static/demo/less/page/fonts.less
+++ /dev/null
@@ -1,52 +0,0 @@
-// FONTS MODIFICATIONS
-@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700);
-
-@sansFontFamily: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-@headingsFontWeight: 700;
-
-@headingOneSize: 48px;
-@headingTwoSize: 32px;
-@headingThreeSize: 24px;
-@headingFourSize: 16px;
-
-h1 { font-size: @headingOneSize; line-height: 58px; }
-h2 { font-size: @headingTwoSize; line-height: 38px; }
-h3 { font-size: @headingThreeSize; line-height: 30px; }
-h4 { font-size: @headingFourSize; line-height: 20px; }
-
-h1, h2, h3, h4, p {
- margin:0 0 30px;
-}
-
-h1, h2, h3 {
- color:@navbarInverseBackground;
-}
-
-h3 {
- text-transform: uppercase;
-}
-
-
-
-//special cases
-.page-header,
-.sub-header {
- margin: 0 0 (@baseLineHeight * 1.5);
-}
-.well .sub-header {
- margin: 0 0 (@baseLineHeight);
-}
-.sub-header {
- padding-bottom: (@baseLineHeight / 2) - 1;
- border-bottom: 1px solid @grayLighter;
-}
-.page-header {
- h1,h2 {
- margin:0;
- }
-}
-.sub-header {
- h2,h3,h4 {
- margin:0;
- }
-}
\ No newline at end of file
diff --git a/sites/demo/static/demo/less/page/forms.less b/sites/demo/static/demo/less/page/forms.less
deleted file mode 100644
index 09dce0f9b28..00000000000
--- a/sites/demo/static/demo/less/page/forms.less
+++ /dev/null
@@ -1,26 +0,0 @@
-.control-group {
- margin:0 0 20px;
-}
-// FORMS
-form {
- .clearfix();
-}
-//For IE: adds width for selects inside overflow hidden containers
-.select-open {
- width:300px!important;
-}
-
-// ADDITIONAL ERRORS
-.errorlist {
- margin:0;
- padding:0 0 10px 0;
- color:#B94A48;
- li {
- padding:0 0 5px 0;
- list-style:none;
- }
-}
-
-.control-label.required span {
- color: #FF0000;
-}
\ No newline at end of file
diff --git a/sites/demo/static/demo/less/page/head_foot.less b/sites/demo/static/demo/less/page/head_foot.less
index 2f619895e0f..15da32eb502 100644
--- a/sites/demo/static/demo/less/page/head_foot.less
+++ b/sites/demo/static/demo/less/page/head_foot.less
@@ -1,8 +1,5 @@
// OSCAR HEADER
// -----------
-.header {
-
-}
.header-content {
height:108px;
position: relative;
@@ -55,6 +52,20 @@
left:0;
}
}
+ .credit-cards,
+ .verisign {
+ margin:0;
+ }
+ .credit-cards {
+ margin-top:5px;
+ }
+}
+//Checkout header
+.checkout-page .header-content {
+ margin-top:10px;
+ p {
+ margin-bottom:30px;
+ }
}
// OSCAR FOOTER UNIQUE STYLES
// -----------
@@ -112,6 +123,10 @@
.footer-disclaimer {
font-size: @fontSizeSmall;
line-height: @baseLineHeight * 2;
- text-align: right;
background: #091624;
+ .clearfix();
+ p {
+ margin:0;
+ text-align: center;
+ }
}
diff --git a/sites/demo/static/demo/less/page/icomoon.less b/sites/demo/static/demo/less/page/icomoon.less
index 5d07f8ff6bd..e786eeb9527 100644
--- a/sites/demo/static/demo/less/page/icomoon.less
+++ b/sites/demo/static/demo/less/page/icomoon.less
@@ -27,7 +27,7 @@ Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
-.icon-cart, .icon-star, .icon-lock, .icon-mobile, .icon-earth, .icon-arrow-right, .icon-search, .icon-truck, .icon-twitter, .icon-facebook, .icon-pinterest, .icon-mail, .icon-plus, .icon-noun_project_62, .icon-arrow-down {
+.icon-cart, .icon-star, .icon-lock, .icon-mobile, .icon-earth, .icon-arrow-right, .icon-search, .icon-truck, .icon-twitter, .icon-facebook, .icon-pinterest, .icon-mail, .icon-plus, .icon-noun_project_62, .icon-arrow-down, .icon-check-alt, .icon-x-altx-alt, .icon-checkout-half-wheel {
font-family: 'icomoon';
speak: none;
font-style: normal;
@@ -82,3 +82,12 @@ you can use the generic selector below, but it's slower:
.icon-arrow-down:before {
content: "\22";
}
+.icon-check-alt:before {
+ content: "\23";
+}
+.icon-x-altx-alt:before {
+ content: "\24";
+}
+.icon-checkout-half-wheel:before {
+ content: "\25";
+}
diff --git a/sites/demo/static/demo/less/page/layout.less b/sites/demo/static/demo/less/page/layout.less
deleted file mode 100644
index 920c8ff5dab..00000000000
--- a/sites/demo/static/demo/less/page/layout.less
+++ /dev/null
@@ -1,63 +0,0 @@
-//Colors Reset
-@green: #4CA84C;
-@blue: #337ABF;
-@blueDark:#024872;
-@gray: #8E8E8E;
-@grayOff:#97A5A3;
-@textColor: #595959;
-@linkColor: @blue;
-@bodyBackground: @white;
-@navbarInverseBackground:#10283F;
-
-// OSCAR PAGE STRUCTURE
-// -----------
-html,
-body {
- height: 100%;
-}
-
-#layout {
- min-height: 100%;
- margin-bottom: -(@footer-height);
-}
-
-.container-fluid {
- //Unique styles
- padding:0px;
- margin:0px auto;
- max-width:1170px;
-}
-.page {
-}
-.page_inner {
- padding:@gridGutterWidth 0;
- .clearfix();
-}
-
-// PRICE SIZE/COLOR
-.price_color {
- display:block;
- color:@green;
- font-weight:bold;
-}
-.product_pod .price_color { margin-top:0 }
-.es-carousel .price_color { font-size:20px; }
-
-
-// UTILITY CLASSES
-// ---------------
-.pull-clear {
- clear: both;
-}
-.align-right,
-.table .align-right,
-.table .align-right {
- text-align:right;
-}
-
-.align-center,
-.table .align-center,
-.table .align-center {
- text-align:center;
-}
-
diff --git a/sites/demo/static/demo/less/page/mixins.less b/sites/demo/static/demo/less/page/mixins.less
deleted file mode 100644
index 76901f7a840..00000000000
--- a/sites/demo/static/demo/less/page/mixins.less
+++ /dev/null
@@ -1,35 +0,0 @@
-// OSC PRODUCT WIDTHS
-// --------------------------------------------------
-@fifth: 20%;
-@quart: 25%;
-@third: 33.33333333333333%;
-@half: 50%;
-@three_quart: 75%;
-@full:100%;
-
-@footer-height: 330px;
-
-// OSC MIXINS
-// --------------------------------------------------
-.remove_bullets() {
- margin: 0;
- padding: 0;
- li {
- padding: 0;
- list-style:none;
- }
-}
-.horiz_col() {
- padding:0px;
- margin:0px;
- .clearfix();
- > li {
- list-style:none;
- }
- li {
- float:left;
- li {
- float:none;
- }
- }
-}
diff --git a/sites/demo/static/demo/less/page/plugins.less b/sites/demo/static/demo/less/page/plugins.less
index 0f3210253fd..96178b61ab6 100644
--- a/sites/demo/static/demo/less/page/plugins.less
+++ b/sites/demo/static/demo/less/page/plugins.less
@@ -1,190 +1,3 @@
-//We might delete most of this as will probably use
-//flexslider for every carousel, which default style are almost spot on.
-
-/* Elastislide Style */
-.es-carousel-wrapper {
- padding:1px 20px;
- -moz-border-radius: 4px;
- -webkit-border-radius: 4px;
- border-radius: 4px;
- position:relative;
- margin-bottom:30px;
- overflow:hidden;
- border:1px solid #ddd;
-}
-.es-carousel{
- overflow:hidden;
- border-right:1px solid #ddd;
- border-left:1px solid #ddd;
-}
-.es-carousel ul{
- display:none;
-}
-.es-carousel ul li{
- height:100%;
- float:left;
- display:block;
-}
-.es-carousel ul li a{
- -webkit-touch-callout:none;
- -webkit-transition: all 0.2s ease-in-out;
- -moz-transition: all 0.2s ease-in-out;
- -o-transition: all 0.2s ease-in-out;
- -ms-transition: all 0.2s ease-in-out;
- transition: all 0.2s ease-in-out;
-}
-.es-carousel ul li.selected a{
- border-color:#0069D6;
- opacity:1.0;
-}
-.es-carousel ul li a img{
- display:block;
-}
-.es-nav span{
- position:absolute;
- top:0px;
- left:0px;
- background-image:url(/static/oscar/img/ui/icon_slider_left.png);
- background-color:#efefef;
- background-position:4px 50%;
- background-repeat:no-repeat;
- width:20px;
- height:100%;
- text-indent:-9000px;
- cursor:pointer;
- opacity:0.3;
- -moz-border-radius-topright: 0px;
- -moz-border-radius-topleft: 4px;
- -moz-border-radius-bottomleft: 4px;
- -moz-border-radius-bottomright: 0px;
- -webkit-border-radius: 4px 0px 0px 4px;
- border-radius: 4px 0px 0px 4px;
-}
-.es-nav span.es-nav-next{
- right:0px;
- left:auto;
- background-image:url(/static/oscar/img/ui/icon_slider_right.png);
- -moz-border-radius-topleft: 0px;
- -moz-border-radius-topright: 4px;
- -moz-border-radius-bottomright: 4px;
- -moz-border-radius-bottomleft: 0px;
- -webkit-border-radius: 0px 4px 4px 0px;
- border-radius: 0px 4px 4px 0px;
-}
-.es-nav span:hover {
- background-color:#ddd;
-}
-/* Gallery */
-.rg-image-wrapper{
- position:relative;
- padding:20px 30px;
- border:solid 1px #ddd;
- background:#fff;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- border-radius: 3px;
- min-height:20px;
- margin-bottom:20px;
-}
-.rg-image {
- position:relative;
- text-align:center;
- line-height:0px;
-}
-.rg-image a {
- display:block;
-}
-.rg-image img{
- max-height:100%;
- max-width:100%;
- // set maximum height on gallery images
- max-height:250px;
-}
-.rg-image-nav a{
- position:absolute;
- top:0px;
- left:0px;
- background-image:url(/static/oscar/img/ui/icon_slider_left.png);
- background-color:#fff;
- background-position:4px 50%;
- background-repeat:no-repeat;
- width:20px;
- height:100%;
- text-indent:-9000px;
- cursor:pointer;
- opacity:0.8;
- outline:none;
- border-right: 1px solid #ddd;
-}
-.rg-image-nav a.rg-image-nav-next{
- right:0px;
- left:auto;
- background-image:url(/static/oscar/img/ui/icon_slider_right.png);
- background-position:4px 50%;
- background-repeat:no-repeat;
- -moz-border-radius: 0px 3px 3px 0px;
- -webkit-border-radius: 0px 3px 3px 0px;
- border-radius: 0px 3px 3px 0px;
- border-left: 1px solid #ddd;
- border-right-width: 0px;
-}
-.rg-image-nav a:hover{
- background-color:#ddd;
-}
-.rg-caption {
- text-align:center;
- margin-top:15px;
- position:relative;
-}
-.rg-caption p{
- //font-size:11px;
- font-size:0.846em;
- letter-spacing:2px;
- font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;
- line-height:16px;
- padding:0 15px;
- text-transform:uppercase;
-}
-.rg-view{
- height:30px;
-}
-.rg-view a{
- display:block;
- float:right;
- width:16px;
- height:16px;
- margin-right:3px;
- background:#464646 url(/static/oscar/../responsivegallery/views.png) no-repeat top left;
- border:3px solid #464646;
- opacity:0.8;
-}
-.rg-view a:hover{
- opacity:1.0;
-}
-.rg-view a.rg-view-full{
- background-position:0px 0px;
-}
-.rg-view a.rg-view-selected{
- background-color:#6f6f6f;
- border-color:#6f6f6f;
-}
-.rg-view a.rg-view-thumbs{
- background-position:0px -16px;
-}
-.rg-loading{
- width:46px;
- height:46px;
- position:absolute;
- top:50%;
- left:50%;
-/* background:#000 url(/static/oscar/responsivegallery/ajax-loader.gif) no-repeat center center;*/
- margin:-23px 0px 0px -23px;
- z-index:100;
- -moz-border-radius: 10px;
- -webkit-border-radius: 10px;
- border-radius: 10px;
- opacity:0.7;
-}
/* Modal modifications */
.large-content {
height:300px;
@@ -206,6 +19,10 @@
.star-rating {
letter-spacing: -1px;
color:#CBCBCB;
+ a {
+ letter-spacing: 0;
+ margin-left:10px;
+ }
}
.star-rating.One {
i:first-child {
@@ -233,69 +50,9 @@
}
}
-
-.star {
- clear:both;
- display:block;
- padding-left:110px;
- background:url(/static/oscar/img/ui/bg-stars.png) 0px -4px no-repeat;
- height:18px;
- line-height:18px;
-}
-.star.One {
- background-position: 0px -26px;
-}
-.star.Two {
- background-position: 0px -48px;
-}
-.star.Three {
- background-position: 0px -70px;
-}
-.star.Four {
- background-position: 0px -92px;
-}
-.star.Five {
- background-position: 0px -114px;
-}
-/* Star Rating Small */
-.product_pod .star,
-.promotion_single .star {
- padding-left:0px;
- text-indent:-9999px;
- background:url(/static/oscar/img/ui/bg-stars-small.png) 0px -4px no-repeat;
- height:11px;
- line-height:11px;
- width: 65px;
-}
-.product_pod .star {
- margin-bottom: 4px;
-}
-.product_pod .star.One,
-.promotion_single .star.One {
- background-position: 0px -18px;
-}
-.product_pod .star.Two,
-.promotion_single .star.Two {
- background-position: 0px -32px;
-}
-.product_pod .star.Three,
-.promotion_single .star.Three {
- background-position: 0px -47px;
-}
-.product_pod .star.Four,
-.promotion_single .star.Four {
- background-position: 0px -61px;
-}
-.product_pod .star.Five,
-.promotion_single .star.Five {
- background-position: 0px -75px;
-}
-
//Flexslider Overrides
-#homepage-carousel {
- .flex-control-nav {
- bottom: 30px;
- }
+#homepage-carousel,
+#product-image-carousel {
.flex-direction-nav a {
width: 67px;
height: 67px;
@@ -309,5 +66,91 @@
.flex-direction-nav .flex-prev {
left: 20px;
}
-
}
+//Homepage carousel
+#homepage-carousel {
+ &.flexslider {
+ overflow: hidden;
+ margin-bottom:30px;
+ }
+ .flex-control-nav {
+ bottom: 30px;
+ }
+}
+//Image gallery product page carousel
+#product-image-carousel {
+ li {
+ line-height:600px;
+ text-align:center;
+ }
+ img {
+ vertical-align: middle;
+ max-height:600px;
+ max-width:100%;
+ width:auto;
+ margin:0 auto;
+ display:inline-block;
+ }
+}
+.product-page .product-carousel {
+ .flexslider {
+ margin-bottom:0;
+ }
+}
+//Carousel single,list containers
+.product-carousel,
+.product-single-carousel,
+.promotion_single {
+ .well {
+ background:@white;
+ }
+ > h3 {
+ text-align: center;
+ }
+}
+.product-carousel,
+.product-single-carousel {
+ .flexslider {
+ padding:0 5%;
+ }
+}
+//Product list carousel
+.product-carousel {
+ .product_pod {
+ height:410px;
+ }
+ .flexslider {
+ .slides {
+ img {
+ width:auto;
+ display:inline-block;
+ }
+ }
+ .flex-direction-nav .flex-next {
+ right: 0;
+ }
+ .flex-direction-nav .flex-prev {
+ left: 0;
+ }
+ }
+ .product_pod {
+ padding:0 5%;
+ .product_price {
+ left: 5%;
+ width: 90%;
+ bottom:0;
+ }
+ }
+}
+//Single product carousel
+.product-single-carousel {
+ .clearfix();
+ .image_container {
+ border:1px solid #ddd;
+ }
+ > h3 {
+ border-bottom:1px solid #ddd;
+ padding-bottom:15px;
+ margin-bottom:30px;
+ }
+}
\ No newline at end of file
diff --git a/sites/demo/static/demo/less/page/product_lists.less b/sites/demo/static/demo/less/page/product_lists.less
index 6f2240530f8..171444f980b 100644
--- a/sites/demo/static/demo/less/page/product_lists.less
+++ b/sites/demo/static/demo/less/page/product_lists.less
@@ -1,14 +1,17 @@
-//Breadcrumb mods
-.breadcrumb {
- padding: 8px 15px;
- margin: 0 0 20px;
- list-style: none;
- background: none;
- .border-radius(0);
+// Price Color
+.price_color {
+ display:block;
+ color:@green;
+ font-weight:bold;
}
-/* Procduct columns*/
+//Procduct list columns -- you will need to add a no-margin class divisible by the column number
.five li {
- width:@fifth;
+ @totalGutter: 10%;
+ @productColumns: 5;
+ @productGutters: 4;
+ @productGutter: @totalGutter / @productGutters;
+ width:(100 - @productGutters * @productGutter) / @productColumns;
+ margin-right:@productGutter;
}
.four li {
@totalGutter: 10%;
@@ -19,10 +22,20 @@
margin-right:@productGutter;
}
.three li {
- width:@third;
+ @totalGutter: 10%;
+ @productColumns: 3;
+ @productGutters: 2;
+ @productGutter: @totalGutter / @productGutters;
+ width:(100 - @productGutters * @productGutter) / @productColumns;
+ margin-right:@productGutter;
}
.two li {
- width:@half
+ @totalGutter: 10%;
+ @productColumns: 2;
+ @productGutters: 1;
+ @productGutter: @totalGutter / @productGutters;
+ width:(100 - @productGutters * @productGutter) / @productColumns;
+ margin-right:@productGutter;
}
.one li {
width:@full;
@@ -79,14 +92,6 @@
position: absolute;
bottom:0;
}
- i {
- display:block;
- color:@gray;
- font-style: normal;
- }
- del {
- color:@gray;
- }
}
.image_container {
border:1px solid #C7DAD7;
@@ -96,15 +101,27 @@
}
.product_price {
position:absolute;
- bottom:0;
+ bottom:20px;
left:0;
width:100%;
- min-height:130px;
+ // min-height:130px;
form {
margin-bottom:0px;
}
}
}
+//Price (i = variant)
+.price_color {
+ i {
+ display:block;
+ color:@gray;
+ font-style: normal;
+ }
+ del {
+ color:@gray;
+ }
+}
+
/* Product list image container */
.image_container {
min-height:200px;
@@ -120,7 +137,7 @@
margin:0px auto;
}
}
-
+//Category page title and description
.category-title {
background:#244761;
height:250px;
@@ -155,7 +172,4 @@
right:0;
top:0;
}
- i {
-
- }
}
\ No newline at end of file
diff --git a/sites/demo/static/demo/less/page/product_page.less b/sites/demo/static/demo/less/page/product_page.less
index b96b9aad6a9..34cb548732d 100644
--- a/sites/demo/static/demo/less/page/product_page.less
+++ b/sites/demo/static/demo/less/page/product_page.less
@@ -1,48 +1,78 @@
-// OSCAR PRODUCTS UNIQUE STYLES
-// -----------
-.availability {
-/* text-align:center;*/
- &.outofstock {
- color:@red;
+//Product title and description
+.product-highlight {
+ h4 {
+ margin-bottom:0;
+ text-transform: uppercase;
}
- &.instock {
- color:@green;
+ .price_color {
+ float:left;
+ i {
+ font-size:@headingFourSize;
+ line-height:@headingFourSize;
+ }
+ }
+ .free-delivery {
+ float:right;
}
}
-/* Product View image container */
-.images {
- img {
- width:100%;
- height:auto;
+.free-delivery {
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ i {
+ margin-right:5px;
+ vertical-align: top;
+ }
+ i, span {
+ display:inline-block;
+ }
+ strong {
+ font-size:20px;
}
}
-.basic {
- label {
- width:auto;
+.product-page .free-delivery {
+ color:@blue;
+ font-size:10px;
+ border:1px solid @blue;
+ padding:10px;
+ line-height: @baseFontSize;
+ i {
+ font-size: @headingThreeSize;
}
- .input {
- margin:0px;
- input {
- margin:0px 10px;
- }
+ strong {
+ font-size:20px;
+ }
+}
+.widget-shipping .free-delivery {
+ font-size:15px;
+ line-height: 20px;
+ strong {
+ font-size:@headingTwoSize;
+ letter-spacing: 0;
}
}
-.promo_related {
- .well();
- height:250px;
+
+//Review styles
+.review-title {
+ .clearfix();
+ p {
+ font-size:@headingFourSize;
+ }
+ > a {
+ float:right;
+ }
}
-/* review styles */
.review {
- border-bottom:1px solid @grayLight;
+ border-bottom:1px solid #ddd;
+ padding-bottom:15px;
+ margin-bottom:15px;
.clearfix();
h3 {
- margin-top:10px;
- margin-bottom: 10px;
- font-size: @baseFontSize + 3;
- overflow: hidden;
- text-overflow: ellipsis;
- small {
- font-size: @baseFontSize - 1;
+ font-size:@headingFourSize;
+ line-height:@headingThreeSize;
+ text-transform: none;
+ a {
+ display:block;
+ margin-left: 0;
}
}
h4 {
@@ -51,34 +81,115 @@
font-size: @baseFontSize + 1;
}
}
+.review p, .review h3, .review h4,
+.review_add h3 {
+ margin-bottom:15px;
+}
+.review_content,
+.review_votes {
+ div {
+ padding:0 15px;
+ }
+}
.review_content {
div {
- padding:15px;
padding-left:0px;
- border-right:dotted 1px @grayLight;
}
}
.review_votes {
div {
- padding:15px;
- padding-left:0px;
- padding-bottom:0px;
+ border-left:solid 1px #ddd;
}
.vote_agree {
float:left;
margin-right:10px;
}
form {
- padding-bottom:10px;
+ padding-bottom:5px;
margin-bottom:0px;
- input {
-/* width:70px;*/
+ }
+}
+.review_add {
+ h3 {
+ color:@grayOff;
+ font-size: @headingFourSize;
+ }
+}
+//Variant lists
+.variant-product {
+ .clearfix();
+ h4 {
+ color:@blueDark;
+ }
+ p, h4 {
+ margin-bottom:15px;
+ }
+ .price_color {
+ font-size:@headingThreeSize;
+ }
+ .image_container {
+ background:@white;
+ line-height: 80px;
+ min-height: 80px;
+ width:80px;
+ border:1px solid #ddd;
+ float:left;
+ img {
+ max-height:70px;
+ max-width:98%;
}
}
+ > div:first-child + div {
+ margin-left:100px;
+ }
+}
+.variant-form {
+ label {
+ display:block;
+ }
+}
+.form-notify {
+ .btn {
+ display:block;
+ margin-top:5px;
+ }
}
-.review_add,
-.review_all,
-.review_read,
-.side_categories {
- .well();
+//Gallery
+.product-gallery {
+ .image_container {
+ min-height:none;
+ line-height:inherit;
+ img {
+ max-height:none;
+ max-width:none;
+ }
+ }
+}
+// .product-gallery.affix {
+// top: 0;
+// }
+// .product-gallery.affix-top {
+// position: absolute;
+// top: 0;
+// bottom: auto;
+// }
+// .product-gallery.affix-bottom {
+// position: absolute;
+// top: auto;
+// bottom: 0px;
+// }
+.hr {
+ position: relative;
+ border-top:1px solid #ddd;
+ margin:60px 0;
+ i {
+ font-size: 30px;
+ color:#ddd;
+ display:block;
+ position: absolute;
+ left:50%;
+ top:-15px;
+ padding:0 15px;
+ background:@white;
+ }
}
diff --git a/sites/demo/static/demo/less/page/promotions.less b/sites/demo/static/demo/less/page/promotions.less
index 66491433010..19d92792a13 100644
--- a/sites/demo/static/demo/less/page/promotions.less
+++ b/sites/demo/static/demo/less/page/promotions.less
@@ -1,12 +1,31 @@
-/*** Promotional block styles ***/
+// Promotional block styles
+.promotion-block {
+ .clearfix();
+}
.promotion_single {
+ h2 {
+ font-size: 36px;
+ line-height: 42px;
+ a {
+ color:@navbarInverseBackground;
+ }
+ }
+ h4 {
+ margin-bottom:0;
+ }
+ h3, h2 {
+ margin-bottom:15px;
+ }
.image_container {
- min-height: 210px;
img {
- max-height: 200px;
+ width:100%;
+ max-width: none;
+ max-height:none;
+ height:auto;
}
}
}
+.pro
.sidebar {
.promotion_single {
h2 {
@@ -24,4 +43,82 @@
}
}
}
+}
+
+//Read more link
+.read-more {
+ display:block;
+ text-align:right;
+ margin-top:20px;
+}
+.product-carousel {
+ .read-more {
+ margin-right:5%;
+ }
+}
+
+//Widget blocks
+.widget-delivery,
+.widget-shipping {
+ .clearfix();
+ background:@navbarInverseBackground;
+ color:@white;
+ padding:30px;
+ h3 {
+ color:@white;
+ }
+ .btn {
+ float:right;
+ }
+ i {
+ font-size:@headingOneSize;
+ }
+}
+.widget-delivery {
+ i {
+ margin-right:5px;
+ vertical-align: middle;
+ }
+ h3 {
+ font-size: 22px;
+ }
+}
+.widget-image-link {
+ color:@white;
+ text-align: center;
+ img {
+ width:100%;
+ }
+ > a {
+ display:block;
+ &:hover {
+ text-decoration: none;
+ h3 {
+ background: #3C92E4;
+ }
+ }
+ }
+ h3 {
+ color:@white;
+ margin:0;
+ padding:10px 15px;
+ background:@blueDark;
+ position: relative;
+ text-transform: none;
+ small {
+ display:block;
+ line-height: @headingFourSize;
+ }
+ }
+ i {
+ position: absolute;
+ right:5px;
+ top:10px;
+ font-size: @headingTwoSize;
+ }
+ &.large {
+ h3 {
+ background:@navbarInverseBackground;
+ }
+ }
}
\ No newline at end of file
diff --git a/sites/demo/static/demo/less/page/theme.less b/sites/demo/static/demo/less/page/theme.less
index 4ea00ca1742..e3fb4821786 100644
--- a/sites/demo/static/demo/less/page/theme.less
+++ b/sites/demo/static/demo/less/page/theme.less
@@ -1,9 +1,6 @@
-@import "layout.less";
-@import "fonts.less";
@import "icomoon.less";
-@import "forms.less";
-@import "buttons.less";
-@import "navbar.less";
+@import "buttons.less"; // Move/replace content into bootstrap/buttons.less then delete file
+@import "navbar.less"; // Move/replace content into bootstrap/navbar.less then delete file
@import "head_foot.less";
@import "account.less";
@import "checkout.less";
diff --git a/sites/demo/static/demo/less/responsive.less b/sites/demo/static/demo/less/responsive.less
index 602ec0b5161..565d99ff044 100644
--- a/sites/demo/static/demo/less/responsive.less
+++ b/sites/demo/static/demo/less/responsive.less
@@ -20,9 +20,6 @@
@import "bootstrap/variables.less"; // Modify this for custom colors, font-sizes, etc
@import "bootstrap/mixins.less";
-// Oscar variables and mixins
-@import "page/mixins.less"; // Kept separtate for bootstrap updates - but should be imported into bootstap mixins.
-
// RESPONSIVE CLASSES
// ------------------
diff --git a/sites/demo/static/demo/less/styles.less b/sites/demo/static/demo/less/styles.less
index 3170188058b..c0de82e86da 100644
--- a/sites/demo/static/demo/less/styles.less
+++ b/sites/demo/static/demo/less/styles.less
@@ -12,9 +12,6 @@
@import "bootstrap/variables.less"; // Modify this for custom colors, font-sizes, etc
@import "bootstrap/mixins.less";
-// Oscar variables and mixins
-@import "page/mixins.less"; // Kept separtate for bootstrap updates - but should be imported into bootstap mixins.
-
// CSS Reset
@import "bootstrap/reset.less";
@@ -25,7 +22,6 @@
// Base CSS
@import "bootstrap/type.less";
-@import "bootstrap/code.less";
@import "bootstrap/forms.less";
@import "bootstrap/tables.less";
@@ -37,7 +33,6 @@
// Components: Buttons & Alerts
@import "bootstrap/buttons.less";
-@import "bootstrap/button-groups.less";
@import "bootstrap/alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
// Components: Nav
@@ -49,17 +44,10 @@
// Components: Popovers
@import "bootstrap/modals.less";
-@import "bootstrap/tooltip.less";
-@import "bootstrap/popovers.less";
// Components: Misc
-@import "bootstrap/thumbnails.less";
-@import "bootstrap/media.less";
@import "bootstrap/labels-badges.less";
@import "bootstrap/progress-bars.less";
-@import "bootstrap/accordion.less";
-@import "bootstrap/carousel.less";
-@import "bootstrap/hero-unit.less";
// Unique Page Styles
@import "page/theme.less";
diff --git a/sites/demo/templates/base.html b/sites/demo/templates/base.html
index 902d5dc7ead..4609a8c2050 100644
--- a/sites/demo/templates/base.html
+++ b/sites/demo/templates/base.html
@@ -14,4 +14,14 @@
{% endif %}
{% endcompress %}
{% endblock %}
-{% endblock %}
\ No newline at end of file
+{% endblock %}
+
+
+{% block scripts %}
+{% compress js %}
+
+
+
+
+{% endcompress %}
+{% endblock scripts %}
\ No newline at end of file
diff --git a/sites/demo/templates/basket/basket.html b/sites/demo/templates/basket/basket.html
new file mode 100644
index 00000000000..d2d51e7feb4
--- /dev/null
+++ b/sites/demo/templates/basket/basket.html
@@ -0,0 +1,7 @@
+{% extends "oscar/basket/basket.html" %}
+{% load i18n %}
+
+
+{% block headertext %}
+{% trans "Basket" %}
+{% endblock %}
\ No newline at end of file
diff --git a/sites/demo/templates/basket/partials/basket_content.html b/sites/demo/templates/basket/partials/basket_content.html
index d348a60f4cc..9262bd3e7ad 100644
--- a/sites/demo/templates/basket/partials/basket_content.html
+++ b/sites/demo/templates/basket/partials/basket_content.html
@@ -1,17 +1,114 @@
{% extends 'oscar/basket/partials/basket_content.html' %}
{% load i18n %}
+{% load thumbnail %}
+{% load currency_filters %}
-{% block formactions %}
-
-
-
Proceed to checkout
+{% block basket_form_headers %}
+
+
+
{% trans "Items to buy now" %}
+ {% trans "Quantity" %}
+ {% trans "Price" %}
+
+
+{% endblock %}
+
+{% block basket_form_main %}
+
+{% endblock %}
+
+{% block vouchers %}
+
-
-
{% trans "Demo site help" %}
-
{% trans "You can authenticate with PayPal using:" %}
- {% trans "Email:" %} david._1332854868_per@gmail.com
- {% trans "Password:" %} 332855006
-
+{% endblock vouchers %}
+
+{% block baskettotals %}
+
+
+
{% trans "Totals" %}
+ {% include 'basket/partials/basket_totals.html' with editable=1 %}
+
+{% endblock baskettotals %}
+
+{% block formactions %}
+
+
+
+
+
{% trans "or" %}
+
+
+
+
+
{% trans "Demo site help" %}
+
{% trans "You can authenticate with PayPal using:" %}
+ {% trans "Email:" %} david._1332854868_per@gmail.com
+ {% trans "Password:" %} 332855006
+
+
{% endblock formactions %}
+
diff --git a/sites/demo/templates/basket/partials/basket_totals.html b/sites/demo/templates/basket/partials/basket_totals.html
new file mode 100644
index 00000000000..2216c545f0c
--- /dev/null
+++ b/sites/demo/templates/basket/partials/basket_totals.html
@@ -0,0 +1,137 @@
+{% load i18n %}
+{% load currency_filters %}
+
+
+
+
+
+ {% trans "Basket" %}
+
+ {% with offer_discounts=basket.offer_discounts voucher_discounts=basket.grouped_voucher_discounts %}
+ {% if offer_discounts or voucher_discounts %}
+ {# Basket total will be discounted so we show a before and after version #}
+
+ {% trans "Basket total (before discounts)" %}
+ {{ basket.total_incl_tax_excl_discounts|currency }}
+
+
+ {% if offer_discounts %}
+ {% for discount in offer_discounts %}
+
+ {% trans "Discount" %} {{ discount.name }}
+ {% if discount.description %}
+ {{ discount.description }}
+ {% endif %}
+
+ -{{ discount.discount|currency }}
+
+ {% endfor %}
+ {% endif %}
+
+ {% if voucher_discounts %}
+
+ {% trans "Vouchers" %}
+
+ {% for discount in voucher_discounts %}
+
+
+ {{ discount.voucher.name }} ({{ discount.voucher.code }})
+ {% if editable %}
+
+ {% endif %}
+
+ -{{ discount.discount|currency }}
+
+ {% endfor %}
+ {% endif %}
+
+
+ {% trans "Basket total (after discounts)" %}
+ {{ basket.total_incl_tax|currency }}
+
+ {% else %}
+ {# No discounts to basket #}
+
+ {% trans "Basket total" %}
+ {{ basket.total_incl_tax|currency }}
+
+ {% endif %}
+ {% endwith %}
+
+
+
+
+
+
+
+
+ {% trans "Shipping" %}
+ {% if shipping_methods|length > 1 and editable %}
+ {% trans "Alternative shipping methods can be chosen during checkout" %}
+ {% endif %}
+
+
+ {% if not shipping_method.is_discounted %}
+
+
+ {% trans "Shipping" %} - {{ shipping_method.name }}
+
+ {{ shipping_method.basket_charge_incl_tax|currency }}
+
+ {% else %}
+ {# As shipping is discounted, we break it down into its original charge and a discount #}
+
+ {% trans "Shipping method" %}
+ {{ shipping_method.name }}
+
+
+ {% trans "Shipping total (before discounts)" %}
+ {{ shipping_method.basket_charge_incl_tax_before_discount|currency }}
+
+
+ {% with discount=shipping_method.get_discount %}
+ {% trans "Discount" %} {{ discount.name }}
+ -{{ discount.discount|currency }}
+ {% endwith %}
+
+
+
+ {% trans "Shipping total (after discounts)" %}
+
+ {{ shipping_method.basket_charge_incl_tax|currency }}
+
+ {% endif %}
+
+ {% if basket.post_order_actions %}
+
+
+
+
+
+ {% trans "Post order actions" %} {% trans "These will be applied once your order is placed." %}
+
+
+ {% for discount in basket.post_order_actions %}
+
+
+ {{ discount.name }}
+ {{ discount.description }}
+
+
+ {% endfor %}
+ {% endif %}
+
+
+
+
+
+
+ {% trans "Order total" %}
+ {{ order_total_incl_tax|currency }}
+
+
+
+
diff --git a/sites/demo/templates/catalogue/browse.html b/sites/demo/templates/catalogue/browse.html
index 799c7919ae9..19ec6d95057 100644
--- a/sites/demo/templates/catalogue/browse.html
+++ b/sites/demo/templates/catalogue/browse.html
@@ -6,10 +6,7 @@
{% load product_tags %}
{% load i18n %}
-{% block header %}{% endblock %}
-
-{% block content %}
-
+{% block header %}
{% if category.image %}
@@ -21,20 +18,24 @@
{{ summary }}
{% endif %}
+{% endblock %}
+
+{% block content %}
+{% if products.count %}
+
+ {% trans "All" %} {{ summary }}
+
+
+ {% for product in products %}
+ {% render_product product %}
+ {% endfor %}
+
+ {% include "partials/pagination.html" %}
+
+
+{% else %}
+
{% trans "No products found." %}
+{% endif %}
- {% if products.count %}
-
-
-
- {% for product in products %}
- {% render_product product %}
- {% endfor %}
-
- {% include "partials/pagination.html" %}
-
-
- {% else %}
-
{% trans "No products found." %}
- {% endif %}
{% endblock content %}
\ No newline at end of file
diff --git a/sites/demo/templates/catalogue/detail.html b/sites/demo/templates/catalogue/detail.html
index d6178fcbdbe..8ff40e2eb41 100644
--- a/sites/demo/templates/catalogue/detail.html
+++ b/sites/demo/templates/catalogue/detail.html
@@ -1,52 +1,219 @@
{% extends "oscar/catalogue/detail.html" %}
+{% load compress %}
{% load currency_filters %}
{% load history_tags %}
{% load reviews_tags %}
{% load staticfiles %}
{% load product_tags %}
+{% load thumbnail %}
+{% load basket_tags %}
{% load i18n %}
-{% block product_gallery %}
-
- {# change this to flexslider }
-
-{% endblock %}
+{% block body_class %}product-page{% endblock body_class %}
+{% block content %}
+
-{% block product_main %}
-
-
{{ product.stockrecord.partner.name }}
-
{{ product.get_title }}
+ {% if user.is_authenticated and user.is_staff %}
+
+ {% endif %}
+
+
+
+ {% block product_gallery %}
+
+ {% include "catalogue/partials/gallery.html" %}
+
+ {% endblock %}
+
+
+ {% block product_main %}
+
+
{{ product.stockrecord.partner.name }}
+
{{ product.get_title }}
+
+ {% block product_stock_record %}
+ {% if not product.is_group %}
+
+
{% include "catalogue/partials/stock_record.html" %}
+
{% trans "Free shipping" %} {% trans "For all orders over $300" %}
+
+ {% endif %}
+ {% endblock %}
+
+ {% block product_description %}
+ {% if product.description %}
+
{{ product.description|safe }}
+ {% endif %}
+ {% endblock %}
+
+ {% if not product.is_group %}
+ {% block product_basket_form %}
+
+ {% include "catalogue/partials/add_to_basket_form.html" %}
+
+ {% endblock %}
+ {% endif %}
+
+ {% endblock %}
+
+
+ {% if product.is_group %}
+
{% trans "Please select your varieties" %}
+
+ {% with variants=product.variants.all %}
+ {% if variants|length > 0 %}
+
+ {% for variant in variants %}
+
+
+ {% with image=variant.primary_image %}
+ {% thumbnail image.original "70x70" upscale=False as thumb %}
+
+
+
+ {% endthumbnail %}
+ {% endwith %}
+
+
+
{{ variant.title }}
+
+ {% include "catalogue/partials/variant_stock_record.html" with class="span5" product=variant %}
+
+
+
+
+ {% endfor %}
+
+ {% endif %}
+ {% endwith %}
+
+ {% endif %}
- {% block product_stock_record %}
- {% include "catalogue/partials/stock_record.html" %}
- {% endblock %}
+ {% block product_info %}
+
{% trans "Product Information" %}
+
+ {% if product.upc %}
+
+ {% trans "UPC" %} {{ product.upc }}
+
+ {% endif %}
+
+ {% trans "Product class" %} {{ product.product_class.name }}
+
+ {% if product.stockrecord %}
+
+ {% trans "Price (excl. tax)" %} {{ product.stockrecord.price_incl_tax|currency }}
+
+
+ {% trans "Price (incl. tax)" %} {{ product.stockrecord.price_excl_tax|currency }}
+
+
+ {% trans "Availability" %}
+ {{ product.stockrecord.availability }}
+
+ {% endif %}
+ {% for av in product.attribute_values.all %}
+
+ {{ av.attribute.name }}
+ {{ av.value }}
+
+ {% endfor %}
+
+ {% trans "Num reviews" %}
+ {{ reviews.count|default:0 }}
+
+
+
+
+
+
+ {% endblock %}
+
+ {% block product_review %}
+
+
+ {% if not reviews %}
+
+ {% trans "This product does not have any reviews yet" %} -
+ {% trans "be the first to write one" %} .
+
+ {% else %}
+ {% for review in reviews|slice:":3" %}
+ {% include 'catalogue/partials/review.html' %}
+ {% endfor %}
+ {% endif %}
+
+ {% endblock product_review %}
+
+
+
- {% comment %}
- {# will use this else where}
- {% if product.rating != None %}
-
-
- {% blocktrans count reviews|length as num_reviews %}
- 1 custom review
- {% plural %}
- {{ num_reviews }} customer reviews
- {% endblocktrans %}
-
-
- {% trans "Write a review" %}
-
- {% else %}
-
- {% trans "Write a review" %}
-
+ {% if product.related_products.count %}
+
+
+ {% for product in product.related_products.all|slice:":5" %}
+ {% render_product product %}
+ {% endfor %}
+
+ {% endif %}
+
+ {% if product.recommended_products.count %}
+
+
+ {% for product in product.recommended_products.all|slice:":5" %}
+ {% render_product product %}
+ {% endfor %}
+
{% endif %}
- {% endcomment %}
-
-
-
- {% block product_basket_form %}
- {% include "catalogue/partials/add_to_basket_form.html" %}
- {% endblock %}
-
+
+
+
+ {% recently_viewed_products %}
+
+
+{% endblock content %}
+
+{% block extrascripts %}
+{% compress js %}
+ {% include "partials/extrascripts.html" %}
+{% endcompress %}
{% endblock %}
\ No newline at end of file
diff --git a/sites/demo/templates/catalogue/partials/add_to_basket_form.html b/sites/demo/templates/catalogue/partials/add_to_basket_form.html
new file mode 100644
index 00000000000..56854578250
--- /dev/null
+++ b/sites/demo/templates/catalogue/partials/add_to_basket_form.html
@@ -0,0 +1,24 @@
+{% load basket_tags %}
+{% load i18n %}
+
+{% if product.is_available_to_buy %}
+ {% basket_form request.basket product as basket_form %}
+
+{% else %}
+ {% if has_active_alert %}
+
{% trans "You have an active stock alert for this product." %}
+ {% else %}
+
+ {% endif %}
+{% endif %}
diff --git a/sites/demo/templates/catalogue/partials/alerts_form.html b/sites/demo/templates/catalogue/partials/alerts_form.html
new file mode 100644
index 00000000000..330debd8b28
--- /dev/null
+++ b/sites/demo/templates/catalogue/partials/alerts_form.html
@@ -0,0 +1,11 @@
+{% load i18n %}
+
+
diff --git a/sites/demo/templates/catalogue/partials/gallery.html b/sites/demo/templates/catalogue/partials/gallery.html
new file mode 100644
index 00000000000..75da355826c
--- /dev/null
+++ b/sites/demo/templates/catalogue/partials/gallery.html
@@ -0,0 +1,37 @@
+{% load thumbnail %}
+{% load i18n %}
+
+
+{% with all_images=product.images.all %}
+ {# use length rather then count as the images get queried anyways #}
+
+ {% if all_images|length > 1 %}
+
+
+
+ {% for image in all_images %}
+
+ {% thumbnail image.original "600x600" upscale=False as thumb %}
+
+ {% endthumbnail %}
+
+ {% endfor %}
+
+
+
+ {% else %}
+ {# Only one image to show #}
+
+ {% with image=product.primary_image %}
+ {% thumbnail image.original "600x600" upscale=False as thumb %}
+ {% if not image.is_missing %}
+
+ {% else %}
+
+ {% endif %}
+ {% endthumbnail %}
+ {% endwith %}
+
+ {% endif %}
+{% endwith %}
+
\ No newline at end of file
diff --git a/sites/demo/templates/catalogue/partials/product.html b/sites/demo/templates/catalogue/partials/product.html
index ef1d7aca11d..bfa182424ef 100644
--- a/sites/demo/templates/catalogue/partials/product.html
+++ b/sites/demo/templates/catalogue/partials/product.html
@@ -42,7 +42,7 @@
{% block product_price %}
- {% include "catalogue/partials/stock_record.html" %}
+
{% include "catalogue/partials/stock_record.html" %}
{% if product.is_group %}
{% trans "View range" %}
diff --git a/sites/demo/templates/catalogue/partials/review.html b/sites/demo/templates/catalogue/partials/review.html
new file mode 100644
index 00000000000..c748d6a63ba
--- /dev/null
+++ b/sites/demo/templates/catalogue/partials/review.html
@@ -0,0 +1,61 @@
+{% load reviews_tags %}
+{% load i18n %}
+
+
+
+
+ {{ review.body.strip|linebreaks }}
+
+
+
+
+
+
+ {% blocktrans with name=review.get_reviewer_name %}
+ Reviewed by {{ name }} on
+ {% endblocktrans %}
+ {{ review.date_created }}
+
+
+
+
+
+
+ {% if request.user.is_authenticated %}
+
{% trans "Is this review helpful?" %}
+
+
+ {% endif %}
+
+ {% if review.has_votes %}
+
+
+ {% blocktrans count review.num_up_votes as num_up_votes %}
+ 1 customer found this useful
+ {% plural %}
+ {{ num_up_votes }} customers found this useful
+ {% endblocktrans %}
+
+
+ {% endif %}
+
+
+
+
diff --git a/sites/demo/templates/catalogue/partials/stock_record.html b/sites/demo/templates/catalogue/partials/stock_record.html
index 7669682da3d..42112840b0d 100644
--- a/sites/demo/templates/catalogue/partials/stock_record.html
+++ b/sites/demo/templates/catalogue/partials/stock_record.html
@@ -2,7 +2,7 @@
{% load i18n %}
{% if product.is_group %}
-
{% blocktrans with product.min_variant_price_incl_tax|currency as price %} From {{ price }}{% endblocktrans %}
+
{% blocktrans with product.min_variant_price_incl_tax|currency as price %} From {{ price }}{% endblocktrans %}
{% else %}
-
{% if product.stockrecord.price_retail > product.stockrecord.price_incl_tax %}{{ product.stockrecord.price_retail|currency }}{% endif %} {{ product.stockrecord.price_incl_tax|currency }}
+
{% if product.stockrecord.price_retail > product.stockrecord.price_incl_tax %}{{ product.stockrecord.price_retail|currency }}{% endif %} {{ product.stockrecord.price_incl_tax|currency }}
{% endif %}
diff --git a/sites/demo/templates/catalogue/partials/variant_stock_record.html b/sites/demo/templates/catalogue/partials/variant_stock_record.html
new file mode 100644
index 00000000000..02df12c1274
--- /dev/null
+++ b/sites/demo/templates/catalogue/partials/variant_stock_record.html
@@ -0,0 +1,9 @@
+{% load currency_filters %}
+{% if product.has_stockrecord %}
+
+ {% if product.stockrecord.price_retail > product.stockrecord.price_incl_tax %}{{ product.stockrecord.price_retail|currency }}{% endif %}
+ {{ product.stockrecord.price_incl_tax|currency }}
+
+{% else %}
+
Not available
+{% endif %}
\ No newline at end of file
diff --git a/sites/demo/templates/catalogue/reviews/review_form.html b/sites/demo/templates/catalogue/reviews/review_form.html
new file mode 100644
index 00000000000..55cb771ff11
--- /dev/null
+++ b/sites/demo/templates/catalogue/reviews/review_form.html
@@ -0,0 +1,37 @@
+{% extends "catalogue/detail.html" %}
+{% load i18n %}
+{% load reviews_tags %}
+
+{% block product_review %}
+
+
+
+
{% trans "Leave a product review" %}
+
+
+{% endblock %}
diff --git a/sites/demo/templates/checkout/checkout.html b/sites/demo/templates/checkout/checkout.html
new file mode 100644
index 00000000000..501246ea858
--- /dev/null
+++ b/sites/demo/templates/checkout/checkout.html
@@ -0,0 +1,107 @@
+{% extends "oscar/checkout/checkout.html" %}
+{% load currency_filters %}
+{% load thumbnail %}
+{% load i18n %}
+
+{% block shipping_address %}
+
+
{% trans "Shipping" %}
+
+ {% if shipping_address %}
+
{% trans "Address" %}
+
+ {% for field in shipping_address.active_address_fields %}
+ {{ field }}
+ {% endfor %}
+
+ {% if shipping_address.phone_number %}
+
{% trans "Contact number" %}: {{ shipping_address.phone_number }}
+ {% endif %}
+
+ {% if shipping_address.notes %}
+
{% trans "Shipping notes" %}
+
{{ shipping_address.notes|linebreaks }}
+ {% endif %}
+
+
{% trans "Shipping method" %}
+
{{ shipping_method.name }}
+ {% if shipping_method.description %}
+ - {{ shipping_method.description }}
+ {% endif %}
+
+
+
+ {% block shipping_address_actions %}
+
+ {% endblock %}
+
+ {% else %}
+ {% trans "No shipping is required for this order" %}
+ {% endif %}
+
+
+{% endblock shipping_address %}
+
+{% block payment_method %}
+
+
{% trans "Payment" %}
+
+
{% trans "Payment details to go here" %}
+
+
+
+{% endblock payment_method %}
+
+{% block order_contents %}
+
{% trans "Order contents" %}
+
+
+
{% trans "Items in basket" %}
+ {% trans "Quantity" %}
+ {% trans "Price" %}
+
+
+{% for line in basket.all_lines %}
+
+
+
+
+ {% with image=line.product.primary_image %}
+ {% thumbnail image.original "200x200" upscale=False as thumb %}
+
+ {% endthumbnail %}
+ {% endwith %}
+
+
{{ line.product.stockrecord.partner.name }}
+
+
+
+ {{ line.quantity }}
+
+
+
{{ line.line_price_incl_tax|currency }}
+
+
+
+{% endfor %}
+
+
+
+
+
{% trans "Totals" %}
+ {% include 'basket/partials/basket_totals.html' %}
+
+ {% block order_contents_actions %}
+
+
+ {% endblock %}
+
+
+
+{% endblock order_contents %}
\ No newline at end of file
diff --git a/sites/demo/templates/checkout/gateway.html b/sites/demo/templates/checkout/gateway.html
new file mode 100644
index 00000000000..dd2775ac8f8
--- /dev/null
+++ b/sites/demo/templates/checkout/gateway.html
@@ -0,0 +1,55 @@
+{% extends "oscar/checkout/shipping_address.html" %}
+{% load currency_filters %}
+{% load i18n %}
+
+{% block content %}
+
+
+
+
+
+{% endblock content %}
\ No newline at end of file
diff --git a/sites/demo/templates/checkout/layout.html b/sites/demo/templates/checkout/layout.html
new file mode 100644
index 00000000000..fab6db96354
--- /dev/null
+++ b/sites/demo/templates/checkout/layout.html
@@ -0,0 +1,80 @@
+{% extends "base.html" %}
+
+{% load currency_filters %}
+{% load promotion_tags %}
+{% load category_tags %}
+{% load compress %}
+{% load staticfiles %}
+{% load i18n %}
+
+{% block body_class %}checkout-page{% endblock body_class %}
+
+{% block extrahead %}
+
+
+{% endblock %}
+
+{% block layout %}
+
+
+
+
+
+ {% include 'partials/alert_messages.html' %}
+ {% block header %}{% endblock %}
+
+
+
+ {% block modal %}
+ {% load flatpages %}
+ {% get_flatpages '/order/' as flatpages %}
+ {% for page in flatpages %}
+
+
+
+
+ {{ page.content|safe }}
+
+
+
+ {% endfor %}
+ {% endblock %}
+
+ {% block content %}{% endblock %}
+
+
+ {% for promotion in promotions_page %}
+ {% render_promotion promotion %}
+ {% endfor %}
+
+
+
+
+
+
+
+{% include "partials/footer.html" %}
+{% endblock %}
+
+{% block extrascripts %}
+{% compress js %}
+ {% include "partials/extrascripts.html" %}
+{% endcompress %}
+{% endblock %}
diff --git a/sites/demo/templates/checkout/nav.html b/sites/demo/templates/checkout/nav.html
new file mode 100644
index 00000000000..b5046c6b2dd
--- /dev/null
+++ b/sites/demo/templates/checkout/nav.html
@@ -0,0 +1,9 @@
+{% load i18n %}
+
+
+
diff --git a/sites/demo/templates/checkout/payment_details.html b/sites/demo/templates/checkout/payment_details.html
index 1854a33fc77..a937a0dc59f 100644
--- a/sites/demo/templates/checkout/payment_details.html
+++ b/sites/demo/templates/checkout/payment_details.html
@@ -1,19 +1,23 @@
{% extends 'oscar/checkout/payment_details.html' %}
{% load i18n %}
-{% block payment_details_content %}
+{% block payment_details %}
+
+
+ {% block payment_details_content %}
Pay with a bankcard
-{% endblock %}
+ {% endblock %}
+{% endblock payment_details %}
\ No newline at end of file
diff --git a/sites/demo/templates/checkout/preview.html b/sites/demo/templates/checkout/preview.html
index 6e0a436baad..fd9451a746e 100644
--- a/sites/demo/templates/checkout/preview.html
+++ b/sites/demo/templates/checkout/preview.html
@@ -4,10 +4,8 @@
{% block payment_method %}
-
-
+
{% trans "Payment" %}
+
{% blocktrans with amount=order_total_incl_tax|currency %}{{ amount }} will be debited from your bankcard.{% endblocktrans %}
{% endblock %}
-{% block hiddenforms %}
- {{ bankcard_form.as_p }}
-{% endblock %}
+
+{% block place_order %}
+
+
+{% endblock place_order %}
\ No newline at end of file
diff --git a/sites/demo/templates/checkout/shipping_address.html b/sites/demo/templates/checkout/shipping_address.html
new file mode 100644
index 00000000000..2c54bad0481
--- /dev/null
+++ b/sites/demo/templates/checkout/shipping_address.html
@@ -0,0 +1,78 @@
+{% extends "oscar/checkout/shipping_address.html" %}
+{% load i18n %}
+
+{% block header %}
+
+{% endblock %}
+
+{% block shipping_address %}
+ {% if request.user.is_authenticated %}
+ {% if addresses %}
+
+
An address from your addressbook?
+
+
+ {% for address in addresses %}
+
+
+
+ {% for field in address.active_address_fields %}
+ {{ field }}
+ {% endfor %}
+
+
+
+
+ {% if forloop.counter|divisibleby:4 %}
+
+ {% if not forloop.last %}
{% endif %}
+ {% endif %}
+ {% endfor %}
+
+
+
+ {% endif %}
+ {% endif %}
+
+
+
+{% endblock shipping_address %}
\ No newline at end of file
diff --git a/sites/demo/templates/checkout/shipping_methods.html b/sites/demo/templates/checkout/shipping_methods.html
new file mode 100644
index 00000000000..2c3e2cf4b6d
--- /dev/null
+++ b/sites/demo/templates/checkout/shipping_methods.html
@@ -0,0 +1,47 @@
+{% extends "oscar/checkout/shipping_methods.html" %}
+{% load currency_filters %}
+{% load i18n %}
+
+{% block shipping_method %}
+
+
+
+
{% trans "Method" %}
+ {% trans "Cost" %}
+
+
+{% for method in methods %}
+
+
+
+
{{ method.name }}
+ {% if method.description %}
+
{{ method.description|safe }}
+ {% endif %}
+ {% if method.is_discounted %}
+
+ {% with discount=method.get_discount %}
+ {% blocktrans with amount=discount.discount|currency name=discount.name %}
+ This includes a discount of {{ amount }} as
+ your basket qualifies for the '{{ name }}' offer.
+ {% endblocktrans %}
+ {% endwith %}
+
+ {% endif %}
+
+
+ {{ method.basket_charge_incl_tax|currency }}
+
+
+
+
+
+
+{% endfor %}
+{% endblock shipping_method %}
\ No newline at end of file
diff --git a/sites/demo/templates/checkout/user_address_delete.html b/sites/demo/templates/checkout/user_address_delete.html
new file mode 100644
index 00000000000..d6027d6ca0e
--- /dev/null
+++ b/sites/demo/templates/checkout/user_address_delete.html
@@ -0,0 +1,16 @@
+{% extends "oscar/checkout/user_address_delete.html" %}
+{% load i18n %}
+
+
+{% block shipping_address %}
+
+
+{% endblock shipping_address %}
diff --git a/sites/demo/templates/checkout/user_address_form.html b/sites/demo/templates/checkout/user_address_form.html
new file mode 100644
index 00000000000..96232a8807a
--- /dev/null
+++ b/sites/demo/templates/checkout/user_address_form.html
@@ -0,0 +1,21 @@
+{% extends "oscar/checkout/user_address_form.html" %}
+{% load i18n %}
+
+{% block shipping_address %}
+
+
+
+{% endblock shipping_address %}
diff --git a/sites/demo/templates/customer/history/recently_viewed_products.html b/sites/demo/templates/customer/history/recently_viewed_products.html
new file mode 100644
index 00000000000..47e3cd64d36
--- /dev/null
+++ b/sites/demo/templates/customer/history/recently_viewed_products.html
@@ -0,0 +1,18 @@
+{% if products %}
+{% load i18n %}
+{% load product_tags %}
+
+
{% trans 'Products you recently viewed' %}
+
+
+
+ {% for product in products %}
+
+ {% render_product product %}
+
+ {% endfor %}
+
+
+
+
+{% endif %}
diff --git a/sites/demo/templates/layout.html b/sites/demo/templates/layout.html
index 961e70d6f33..ee1770100d1 100644
--- a/sites/demo/templates/layout.html
+++ b/sites/demo/templates/layout.html
@@ -47,6 +47,7 @@
{% block headertext %}{% endblock %}
{% block subnavigation %}{% endblock %}
{% block subheader %}{% endblock subheader %}
+
{# Div exists for AJAX updates to entire content section #}
{% block content %}{% endblock %}
diff --git a/sites/demo/templates/partials/footer.html b/sites/demo/templates/partials/footer.html
index 4bbd0dcdfc4..7daf4e2c6a3 100644
--- a/sites/demo/templates/partials/footer.html
+++ b/sites/demo/templates/partials/footer.html
@@ -59,7 +59,11 @@
{% trans "Contact us" %}
diff --git a/sites/demo/templates/promotions/automaticproductlist.html b/sites/demo/templates/promotions/automaticproductlist.html
new file mode 100644
index 00000000000..7400d2cd16e
--- /dev/null
+++ b/sites/demo/templates/promotions/automaticproductlist.html
@@ -0,0 +1,17 @@
+{% load i18n %}
+{% load product_tags %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/sites/demo/templates/promotions/baseproductlist.html b/sites/demo/templates/promotions/baseproductlist.html
new file mode 100644
index 00000000000..401ad4ef078
--- /dev/null
+++ b/sites/demo/templates/promotions/baseproductlist.html
@@ -0,0 +1,21 @@
+{% load i18n %}
+{% load product_tags %}
+
+{% block content %}
+
+ {{ promotion.name }}
+
+
{{ promotion.description|safe }}
+
+
+ {% for product in products %}
+ {% render_product product %}
+ {% endfor %}
+
+
+ {% if block.link_url %}
+
{% trans "See more" %}
+ {% endif %}
+
+
+{% endblock %}
diff --git a/sites/demo/templates/promotions/featureproductlist.html b/sites/demo/templates/promotions/featureproductlist.html
new file mode 100644
index 00000000000..a5fccc0c97e
--- /dev/null
+++ b/sites/demo/templates/promotions/featureproductlist.html
@@ -0,0 +1,49 @@
+{% load currency_filters %}
+{% load basket_tags %}
+{% load thumbnail %}
+{% load i18n %}
+
+
+
+
\ No newline at end of file
diff --git a/sites/demo/templates/promotions/handpickedproductlist.html b/sites/demo/templates/promotions/handpickedproductlist.html
new file mode 100644
index 00000000000..8a6f9e131ca
--- /dev/null
+++ b/sites/demo/templates/promotions/handpickedproductlist.html
@@ -0,0 +1,3 @@
+{% extends 'promotions/baseproductlist.html' %}
+
+{# just exists to allow overriding #}
\ No newline at end of file
diff --git a/sites/demo/templates/promotions/home.html b/sites/demo/templates/promotions/home.html
index 7e1015ee104..7e8eeb0b639 100644
--- a/sites/demo/templates/promotions/home.html
+++ b/sites/demo/templates/promotions/home.html
@@ -1,15 +1,81 @@
{% extends "layout.html" %}
{% load staticfiles %}
+{% load promotion_tags %}
+{% load i18n %}
+
+{% block body_class %}home-page{% endblock body_class %}
+
+{% block header %}
+{% endblock %}
{% block page_promotions %}
-{% endblock %}
\ No newline at end of file
+{% endblock %}
+
+{% block content %}
+
+ {% comment %}
+ Markup on this page is somewhat temporary. Class wrappers with
+ 'widget' are probably to be used as fancypage widgets and will
+ be removed from here.
+ 'homepage-carousel' and structural classes could also be included in that statement.
+ {% endcomment %}
+
+
+
+
+
+
+
+
+ {% for promotion in promotions_page %}
+ {% render_promotion promotion %}
+ {% endfor %}
+
+
+
+{% endblock %}
+
\ No newline at end of file
diff --git a/sites/demo/templates/promotions/singleproduct.html b/sites/demo/templates/promotions/singleproduct.html
new file mode 100644
index 00000000000..bcee9b06d9d
--- /dev/null
+++ b/sites/demo/templates/promotions/singleproduct.html
@@ -0,0 +1,41 @@
+{% load currency_filters %}
+{% load basket_tags %}
+{% load thumbnail %}
+{% load i18n %}
+
+
diff --git a/sites/demo/templates/search/results.html b/sites/demo/templates/search/results.html
new file mode 100644
index 00000000000..9e0201b3f81
--- /dev/null
+++ b/sites/demo/templates/search/results.html
@@ -0,0 +1,29 @@
+{% extends "oscar/search/results.html" %}
+{% load currency_filters %}
+{% load thumbnail %}
+{% load product_tags %}
+{% load i18n %}
+
+{% block content %}
+
+{% if suggestion %}
+ {% trans 'Did you mean' %}
{{ suggestion }} ?
+{% endif %}
+
+{% if page.object_list %}
+
+
+ {% include "search/partials/pagination.html" %}
+
+ {% for result in page.object_list %}
+ {% render_product result.object %}
+ {% endfor %}
+
+ {% include "search/partials/pagination.html" %}
+
+
+{% else %}
+
{% trans 'No search results found.' %}
+{% endif %}
+
+{% endblock %}
\ No newline at end of file