update new css

templates/default/assets/less/thelia/global.less

@@ -6,6 +6,16 @@
 // Collapse
 .no-js .collapse { display: block!important; }
 
+// thumbnail
+.thumbnail {
+    &.active,
+    &:active {
+        border-style: solid;
+        border-width: 2px;
+    }
+    &.active { border-color: @gray-light; }
+}
+
 // Layout
 .main { margin-bottom: @line-height-computed; }
 .layout-col-1,

templates/default/assets/less/thelia/product.less

@@ -9,11 +9,16 @@
 
 // Availibility
 .availability {
+    display: block;
+
     // In Stock
-    &.in-stock {}
+    .in-stock {
+        font-style: italic;
+        text-transform: uppercase;
+    }
 
     // Out of Stock
-    &.out-of-stock {}
+    .out-of-stock {}
 }
 
 
@@ -61,11 +66,33 @@
             margin-bottom: @line-height-computed;
         }
 
-        .product-thumbnails {
+        #product-thumbnails {
-            > ul {
+            .carousel-inner {
+                margin: 0 auto;
+                width: 90%;
+            }
+            .carousel-control {
+                background-image: none;
+                display: none; // Need js
+                width: 4%; margin-top: -4px;
+                .icon-prev {
+                     &:before {
+                        .icon(@chevron-left);
+                    }
+                }
+                .icon-next {
+                    &:before {
+                        .icon(@chevron-right);
+                    }
+                }
+            }
+
+            ul {
                 .list-inline;
-                li {
+                margin: 0;
-                    width: 20%;
+                > li {
+                    margin: 0; padding: 0;
+                    width: 19%;
                 }
             }
         }
@@ -80,13 +107,12 @@
         }
         .product-price {
             margin-bottom: @line-height-computed;
-            .availability {
+        }
-                .availibity-label { .sr-only; }
+        .product-cart {
-                font-style: italic;
+            background: @option-bg;
-                text-transform: uppercase;
+            border: 1px solid @option-border;
-                position: absolute;
+            border-radius: @option-border-radius;
-                right: 15px;
+            margin-bottom: @line-height-computed; padding: @option-padding;
-            }
         }
     }
 

templates/default/assets/less/thelia/variables.less

@@ -5,7 +5,7 @@
 @FontAwesomePath:                   "../font/fontawesome";
 
 //bootstrap font
-@icon-font-path:          "../font/bootstrap/";
+@icon-font-path: "../font/bootstrap/";
 
 // Grid system
 @grid-float-breakpoint:             @screen-desktop;
@@ -14,9 +14,9 @@
 @legend-border-color:               transparent;
 
 // Buttons
-@btn-default-color:              #333;
+@btn-default-color:                 #333;
-@btn-default-bg:                 #f5f5f5;
+@btn-default-bg:                    #f5f5f5;
-@btn-default-border:             #ccc;
+@btn-default-border:                #ccc;
 
 @btn-primary-color:                 #fff;
 @btn-primary-bg:                    @brand-primary;
@@ -74,14 +74,14 @@
 @block-subheading-font-size:        ceil(@font-size-base * 1.1); // 15.4px
 
 // Thelia : Block Links
-@block-nav-bg:                    transparent;
+@block-nav-bg:                      transparent;
-@block-nav-hover-bg:              #f7f7f7;
+@block-nav-hover-bg:                #f7f7f7;
-@block-nav-border:                #eee;
+@block-nav-border:                  #eee;
-@block-nav-color:                 #747474;
+@block-nav-color:                   #747474;
 
 // Thelia : Block Links
 @block-links-bg:                    transparent;
-@block-links-hover-bg:              #f7f7f7;
+@block-links-hover-bg:              darken(@body-bg, 8%);
 @block-links-border:                #fff;
 @block-links-color:                 #747474;
 
@@ -112,25 +112,3 @@
 @option-heading-border:             darken(@body-bg, 12.5%); //#dfdfdf
 @option-heading-color:              @text-color;
 @option-heading-font-size:          @font-size-base;
-
-
-// Callout
-@callout-bg:                        @body-bg;
-@callout-border:                    #ddd;
-@callout-text:                      @text-color;
-
-@callout-success-text:              @state-success-text;
-@callout-success-border:            @state-success-border;
-@callout-success-bg:                @state-success-bg;
-
-@callout-warning-text:              @state-warning-text;
-@callout-warning-border:            @state-warning-border;
-@callout-warning-bg:                @state-warning-bg;
-
-@callout-danger-text:               @state-danger-text;
-@callout-danger-border:             @state-danger-border;
-@callout-danger-bg:                 @state-danger-bg;
-
-@callout-info-text:                 @state-info-text;
-@callout-info-border:               @state-info-border;
-@callout-info-bg:                   @state-info-bg;

templates/default/assets/themes/default/less/theme.less

@@ -41,16 +41,6 @@ label { font-weight: 600; }
     .box-shadow(none);
 }
 
-// thumbnail
-.thumbnail {
-    &.active,
-    &:active {
-        border-style: solid;
-        border-width: 5px;
-    }
-    &.active { border-color: @gray-light; }
-}
-
 
 // Navbar
 .navbar {
@@ -335,6 +325,9 @@ td.product,
     }
 }
 
+// Availibility
+.availibity-label { .sr-only; }
+
 
 .products-grid,
 .products-list {
@@ -600,6 +593,38 @@ td.product,
             margin-bottom: 10px;
         }
     }
+    .product-cart {
+        background-color: #f5f5f5!important;
+        margin-bottom: @line-height-computed; padding: 10px!important;
+    }
+}
+
+#product-thumbnails {
+    .carousel-control {
+        width: 17px!important;
+        &.left {
+            border-right: 7px solid #ccc;
+            color: #ccc;
+            text-align: left;
+            > .icon-prev {
+                left: 0; margin-left: 0; margin-top: -15px;
+                &:before {
+                    color: inherit;
+                    content: @caret-left!important;
+                }
+            }
+        }
+        &.right {
+            border-left: 7px solid #ccc;
+            text-align: right;
+            > .icon-next {
+                left: auto; right: 0; margin-left: 0; margin-top: -15px;
+                &:before {
+                    content: @caret-right!important;
+                }
+            }
+        }
+    }
 }
 
 @media (min-width: @screen-tablet) {
@@ -613,7 +638,13 @@ td.product,
 
         // Product Details
         #product-details {
-
+            .group-qty {
+                .form-control {
+                    display: inline-block;
+                    margin-right: 1em; margin-left: .4em;
+                    width: 100px;
+                }
+            }
         }
     }
 }

templates/default/assets/themes/default/less/variables.less

@@ -50,8 +50,8 @@
 
 
 // Pager
-@pager-border-radius:                  0;
+@pager-border-radius:               0;
-@pager-disabled-color:                 @gray-light;
+@pager-disabled-color:              @gray-light;
 
 
 // Navbar