styling/markup for detail.html(added varients) and basket.html, now u…

…sing the same js for all carousels, added markup for possible widgets, added checkout navigation, tidied some less(more needed around buttons, navbar)

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() {

sites/demo/static/demo/js/site/ui.js

@@ -17,14 +17,60 @@
         });
     }
 
+    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
+            });
+        });
+    }
+
 
     // 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.responsive.register(productAffix, ['desktop', 'tablet']);
 
 }(site, jQuery));

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();

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-"],

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,13 @@ input.search-query {
     display: none;
   }
 }
+.form-stacked {
+  input,
+  textarea,
+  select {
+    .input-block-level();
+  }
+}
 .form-search label,
 .form-inline label,
 .form-search .btn-group,
@@ -631,7 +639,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 +696,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;
+}

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;
+   .clearfix();
 }

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;
+    }
+  }
+}
+

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 {

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,61 @@ 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 {
+  margin: 0 0 (@baseLineHeight * 1.5);
+  h1 {
+    font-size:@headingTwoSize;
+    line-height: 38px;
+    text-transform: uppercase;
+  }
+}
+.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 +221,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