[REF] *: convert sass content to less content

* note, payment, sales_team, website_forum, website_sale(_options)

(prepare for all less -> scss conversion)

18 files changed, 1195 insertions, 1850 deletions

diff --git a/addons/note/static/src/css/note.css b/addons/note/static/src/css/note.css
deleted file mode 100644
index 9ceec3be3b1..00000000000
--- a/addons/note/static/src/css/note.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.o_kanban_group .note_text_line_through {
-  text-decoration: line-through;
-}
-
-.openerp .oe_form .oe_pad.oe_memo {
-  width: auto;
-}
-.openerp .oe_form .oe_form_field.oe_memo {
-  margin: 0;
-  padding: 0px;
-  width: 100%;
-  min-height: 200px; }
diff --git a/addons/note/static/src/less/note.less b/addons/note/static/src/less/note.less
index afc0d3c1467..99038b491c2 100644
--- a/addons/note/static/src/less/note.less
+++ b/addons/note/static/src/less/note.less
@@ -1,26 +1,16 @@
-@charset "utf-8"
 
-@mixin rotate($a)
-  -webkit-transform: rotate($a) 
-  -o-transform: rotate($a) 
-  -moz-transform: rotate($a)
+.o_kanban_group .note_text_line_through {
+    text-decoration: line-through;
+}
 
-@mixin transition($what:all,$duration:100ms)
-  -webkit-transition: $what $duration cubic-bezier(0.5,0,0.5,1)
-  -moz-transition: $what $duration cubic-bezier(0.5,0,0.5,1)
-  -ms-transition: $what $duration cubic-bezier(0.5,0,0.5,1)
-  transition: $what $duration cubic-bezier(0.5,0,0.5,1)
-
-.o_kanban_group
-  .note_text_line_through
-    text-decoration: line-through
-
-.openerp
-  .oe_form
-    .oe_pad.oe_memo
-      width: auto
-    .oe_form_field.oe_memo
-      margin: 0
-      padding: 0px
-      width: 100%
-      min-height: 200px
+.openerp .oe_form {
+    .oe_pad.oe_memo {
+        width: auto;
+    }
+    .oe_form_field.oe_memo {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        min-height: 200px;
+    }
+}
diff --git a/addons/note/views/note_templates.xml b/addons/note/views/note_templates.xml
index dcdc6e5cd95..3b6c3e1acc4 100644
--- a/addons/note/views/note_templates.xml
+++ b/addons/note/views/note_templates.xml
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-        <template id="assets_backend" name="note assets" inherit_id="web.assets_backend">
-            <xpath expr="." position="inside">
-                <link rel="stylesheet" href="/note/static/src/css/note.css"/>
-            </xpath>
-        </template>
+    <template id="assets_backend" inherit_id="web.assets_backend">
+        <xpath expr="link[last()]" position="after">
+            <link rel="stylesheet" type="text/less" href="/note/static/src/less/note.less"/>
+        </xpath>
+    </template>
 </odoo>
diff --git a/addons/payment/static/src/css/portal_payment.css b/addons/payment/static/src/css/portal_payment.css
deleted file mode 100644
index eeb40dbd3a3..00000000000
--- a/addons/payment/static/src/css/portal_payment.css
+++ /dev/null
@@ -1,55 +0,0 @@
-input#cc_number {
-  background-repeat: no-repeat;
-  background-position: 14px 14px; }
-
-div.card_placeholder {
-  background-image: url("/website_payment/static/src/img/placeholder.png");
-  background-repeat: no-repeat;
-  width: 32px;
-  height: 20px;
-  position: absolute;
-  top: 8px;
-  right: 20px;
-  -webkit-transition: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-  transition: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-  pointer-events: none; }
-
-/* if s2s form not in bootstrap_formatting */
-div.o_card_brand_detail {
-  position: relative;
-}
-
-div.o_card_brand_detail div.card_placeholder {
-  right: 5px;
-}
-
-div.amex {
-  background-image: url("/website_payment/static/src/img/amex.png");
-  background-repeat: no-repeat; }
-
-div.diners {
-  background-image: url("/website_payment/static/src/img/diners.png");
-  background-repeat: no-repeat; }
-
-div.discover {
-  background-image: url("/website_payment/static/src/img/discover.png");
-  background-repeat: no-repeat; }
-
-div.jcb {
-  background-image: url("/website_payment/static/src/img/jcb.png");
-  background-repeat: no-repeat; }
-
-div.mastercard {
-  background-image: url("/website_payment/static/src/img/mastercard.png");
-  background-repeat: no-repeat; }
-
-div.visa {
-  background-image: url("/website_payment/static/src/img/visa.png");
-  background-repeat: no-repeat; }
-
-/*# sourceMappingURL=website_payment.css.map */
-
-ul.payment_method_list img.img-rounded {
-  max-width: 100px;
-  max-height: 40px;
-}
diff --git a/addons/payment/static/src/less/portal_payment.less b/addons/payment/static/src/less/portal_payment.less
index e7de8c55cd5..07cdf859c3a 100644
--- a/addons/payment/static/src/less/portal_payment.less
+++ b/addons/payment/static/src/less/portal_payment.less
@@ -1,41 +1,61 @@
-@charset "utf-8"
-
-input#cc_number
-    background-repeat: no-repeat
-    background-position: 14px 14px
-
-div.card_placeholder
-    background-image: url('/website_payment/static/src/img/placeholder.png')
-    background-repeat: no-repeat
-    width: 32px
-    height: 20px
-    position: absolute
-    top: 8px
-    right: 20px
-    -webkit-transition: .4s cubic-bezier(0.455,0.03,0.515,0.955)
-    transition: .4s cubic-bezier(0.455,0.03,0.515,0.955)
-    pointer-events: none
-
-div.amex
-    background-image: url('/website_payment/static/src/img/amex.png')
-    background-repeat: no-repeat
-
-div.diners
-    background-image: url('/website_payment/static/src/img/diners.png')
-    background-repeat: no-repeat
-
-div.discover
-    background-image: url('/website_payment/static/src/img/discover.png')
-    background-repeat: no-repeat
-
-div.jcb
-    background-image: url('/website_payment/static/src/img/jcb.png')
-    background-repeat: no-repeat
-
-div.mastercard
-    background-image: url('/website_payment/static/src/img/mastercard.png')
-    background-repeat: no-repeat
-
-div.visa
-    background-image: url('/website_payment/static/src/img/visa.png')
-    background-repeat: no-repeat
+input#cc_number {
+    background-repeat: no-repeat;
+    background-position: 14px 14px;
+}
+
+div.card_placeholder {
+    background-image: url("/website_payment/static/src/img/placeholder.png");
+    background-repeat: no-repeat;
+    width: 32px;
+    height: 20px;
+    position: absolute;
+    top: 8px;
+    right: 20px;
+    -webkit-transition: 0.4s cubic-bezier(0.455,0.03,0.515,0.955);
+    transition: 0.4s cubic-bezier(0.455,0.03,0.515,0.955);
+    pointer-events: none;
+}
+
+/* if s2s form not in bootstrap_formatting */
+div.o_card_brand_detail {
+    position: relative;
+
+    div.card_placeholder {
+        right: 5px;
+    }
+}
+
+div.amex {
+    background-image: url("/website_payment/static/src/img/amex.png");
+    background-repeat: no-repeat;
+}
+
+div.diners {
+    background-image: url("/website_payment/static/src/img/diners.png");
+    background-repeat: no-repeat;
+}
+
+div.discover {
+    background-image: url("/website_payment/static/src/img/discover.png");
+    background-repeat: no-repeat;
+}
+
+div.jcb {
+    background-image: url("/website_payment/static/src/img/jcb.png");
+    background-repeat: no-repeat;
+}
+
+div.mastercard {
+    background-image: url("/website_payment/static/src/img/mastercard.png");
+    background-repeat: no-repeat;
+}
+
+div.visa {
+    background-image: url("/website_payment/static/src/img/visa.png");
+    background-repeat: no-repeat;
+}
+
+ul.payment_method_list img.img-rounded {
+    max-width: 100px;
+    max-height: 40px;
+}
diff --git a/addons/payment/views/assets.xml b/addons/payment/views/assets.xml
index c5639ba06d2..42e965196f2 100644
--- a/addons/payment/views/assets.xml
+++ b/addons/payment/views/assets.xml
@@ -1,13 +1,15 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-    <template id="assets_frontend" inherit_id="web.assets_frontend" name="Payment Tx Assets">
-        <xpath expr="." position="inside">
-        	<link rel='stylesheet' href='/payment/static/src/css/portal_payment.css'/>
-        	<script type="text/javascript" src="/payment/static/lib/jquery.payment/jquery.payment.js"></script>
-          	<script type="text/javascript" src="/payment/static/src/js/payment_portal.js"></script>
-          	<script type="text/javascript" src="/payment/static/src/js/payment_transaction_portal.js"></script>
-          <script type="text/javascript" src="/payment/static/src/js/payment_form.js"></script>
-          <link rel="stylesheet" href="/payment/static/src/less/payment_form.less"/>
+    <template id="assets_frontend" inherit_id="web.assets_frontend">
+        <xpath expr="link[last()]" position="after">
+            <link rel="stylesheet" type="text/less" href="/payment/static/src/less/portal_payment.less"/>
+            <link rel="stylesheet" type="text/less" href="/payment/static/src/less/payment_form.less"/>
+        </xpath>
+        <xpath expr="script[last()]" position="after">
+            <script type="text/javascript" src="/payment/static/lib/jquery.payment/jquery.payment.js"></script>
+            <script type="text/javascript" src="/payment/static/src/js/payment_portal.js"></script>
+            <script type="text/javascript" src="/payment/static/src/js/payment_transaction_portal.js"></script>
+            <script type="text/javascript" src="/payment/static/src/js/payment_form.js"></script>
         </xpath>
     </template>
 </odoo>
diff --git a/addons/sales_team/static/src/css/sales_team.sass b/addons/sales_team/static/src/css/sales_team.sass
deleted file mode 100644
index aed7da9f0c3..00000000000
--- a/addons/sales_team/static/src/css/sales_team.sass
+++ /dev/null
@@ -1,17 +0,0 @@
-@charset "utf-8"
-
-.openerp
-    .oe_kanban_view
-        .oe_kanban_crm_salesteams
-            /* Customize width and height of kanban according bootstrap3 */
-            width: 357px
-            min-height: 80px !important
-            .oe_kanban_content div:first-child
-                margin-right: 0px
-        .oe_deadline
-            padding-left: 0.5em
-    .oe_salesteam_kanban_view
-        margin-left: 0px
-        margin-right: -2px
-    .oe_margin_top_16
-        margin-top: 16px
diff --git a/addons/website_forum/static/src/css/website_forum.css b/addons/website_forum/static/src/css/website_forum.css
deleted file mode 100644
index d1c350fdb68..00000000000
--- a/addons/website_forum/static/src/css/website_forum.css
+++ /dev/null
@@ -1,185 +0,0 @@
-.vote {
-  min-width: 38px;
-  margin-right: 12px;
-}
-.vote .vote_count {
-  font-size: 160%;
-  font-weight: bold;
-  line-height: 12px;
-}
-.vote .vote_up, .vote .vote_down {
-  font-size: 130%;
-}
-
-.author-box {
-  min-width: 200px;
-  padding: 4px;
-  background-color: whitesmoke;
-}
-
-.question-block {
-  margin-left: 50px;
-}
-
-.o_forum_tag_follow_box {
-  display: none;
-  position: absolute;
-  z-index: 1;
-  text-align: center;
-  opacity: 0.9;
-}
-
-.question {
-  clear: left;
-}
-
-.question .question-name {
-  font-size: 150%;
-}
-.question .badge {
-  background-color: #cccccc;
-  margin-left: 4px;
-}
-.question .badge-active {
-  background-color: #428bca;
-}
-.question img {
-  max-width: 600px;
-  height: auto !important;
-}
-
-.forum_answer img {
-  max-width: 600px;
-  height: auto !important;
-}
-
-img.o_forum_avatar {
-  max-height: 40px;
-  margin-right: 10px;
-}
-
-img.o_forum_avatar_big {
-  max-width: 75px;
-  margin-right: 10px;
-}
-
-.oe_grey {
-  background-color: #eeeeee;
-}
-
-.badge-gold {
-  color: #ffcc00;
-}
-
-.badge-silver {
-  color: #cccccc;
-}
-
-.badge-bronze {
-  color: #eea91e;
-}
-
-.oe_answer_true {
-  color: #3c763d;
-}
-.oe_answer_true:hover {
-  color: #4d964e;
-}
-
-.oe_answer_false {
-  color: #bbbbbb;
-}
-.oe_answer_false:hover {
-  color: #9e9c9c;
-}
-
-.favourite_question {
-  color: #bbbbbb !important;
-}
-
-.forum_favourite_question {
-  color: #ffcc00 !important;
-}
-
-a.no-decoration {
-  cursor: pointer;
-  text-decoration: none !important;
-}
-
-.faq-question:hover {
-  text-decoration: none !important;
-  color: #428bca;
-}
-
-.oe_comment_grey {
-  background-color: whitesmoke;
-  padding: 4px;
-}
-
-.close.comment_delete {
-  font-size: 16px;
-}
-
-.country_flag {
-  max-height: 16px;
-  display: inline-block;
-  margin-left: 2px;
-}
-
-.tag_text .text-core .text-wrap textarea, .tag_text .text-core .text-wrap input, .tag_text .text-core .text-wrap .text-dropdown, .tag_text .text-core .text-wrap .text-prompt {
-  font: 1.2em "Helvetica Neue", Helvetica, Arial, sans-serif !important;
-}
-.tag_text .text-core .text-wrap .text-tags .text-tag .text-button {
-  font: 1.2em "Helvetica Neue", Helvetica, Arial, sans-serif !important;
-  height: 1.2em !important;
-}
-
-.oe_forum_alert {
-  position: absolute;
-  margin-top: -30px;
-  margin-left: 90px;
-  width: 300px;
-  z-index: 9999;
-}
-
-.oe_forum_email_required {
-  position: absolute;
-  margin-top: 155px;
-  margin-left: 500px;
-  margin-right: 100px;
-  z-index: 5;
-}
-
-button.btn-link.text-muted {
-  color: #999999;
-}
-
-.o_forum_user_bio_expand {
-  position: absolute;
-  z-index: 200;
-  display: none;
-}
-
-.o_forum_tooltip_heading {
-  padding: 0px;
-  margin: 0px;
-  font-size: 18px;
-}
-
-.o_forum_user_bio {
-  color: black;
-  width: 318px;
-  min-height: 100px;
-  cursor: auto;
-  border: 1px solid darkgrey;
-  background-color: whitesmoke;
-  line-height: 13px;
-  font-size: 11px;
-  word-wrap: break-word;
-}
-.o_forum_user_bio .o_forum_tooltip_line {
-  min-height: 13px;
-}
-.o_forum_user_bio .o_forum_tooltip_header {
-  min-height: 75px;
-}
diff --git a/addons/website_forum/static/src/less/website_forum.less b/addons/website_forum/static/src/less/website_forum.less
index 9499add6fc8..fde4b88d78c 100644
--- a/addons/website_forum/static/src/less/website_forum.less
+++ b/addons/website_forum/static/src/less/website_forum.less
@@ -1,148 +1,205 @@
-.vote
-  min-width: 38px
-  margin-right: 12px
-  .vote_count
-    font-size: 160%
-    font-weight: bold
-    line-height: 12px
-  .vote_up,.vote_down
-    font-size: 130%
-
-.author-box
-  min-width: 200px
-  padding: 4px
-  background-color: #f5f5f5
-
-.question-block
-  margin-left: 50px
-
-.o_forum_tag_follow_box
-  display: none
-  position: absolute
-  z-index: 1
-  text-align: center
-  opacity: 0.9
-
-.question
-  clear: left
-
-.question
-  .question-name
-    font-size: 150%
-  .badge
-    background-color: #ccc
-    margin-left: 4px
-  .badge-active
-    background-color: #428bca
-  img
-    max-width: 600px
-    height: auto !important
-
-.forum_answer
-  img
-    max-width: 600px
-    height: auto !important
-
-img.o_forum_avatar
-  max-height: 40px
-  margin-right: 10px
-
-img.o_forum_avatar_big
-  max-width: 75px
-  margin-right: 10px
-
-.oe_grey
-  background-color: #eeeeee
-
-.badge-gold
-  color: #ffcc00
-
-.badge-silver
-  color: #cccccc
-
-.badge-bronze
-  color: #eea91e
-
-.oe_answer_true
-  color: #3c763d
-  &:hover 
-    color: #4D964E
-
-.oe_answer_false
-  color: #bbbbbb
-  &:hover
-    color: #9E9C9C
-
-.favourite_question
-  color: #bbbbbb !important
-
-.forum_favourite_question
-  color: #ffcc00 !important
-
-a.no-decoration
-  cursor: pointer
-  text-decoration: none !important
-
-.faq-question:hover
-  text-decoration: none !important
-  color: #428bca
-
-.oe_comment_grey
-  background-color: #f5f5f5
-  padding: 4px
-.close.comment_delete
-  font-size: 16px
-
-.country_flag
-  max-height: 16px
-  display: inline-block
-  margin-left: 2px
-
-.tag_text .text-core .text-wrap
-  textarea, input, .text-dropdown, .text-prompt
-    font: 1.2em "Helvetica Neue", Helvetica, Arial, sans-serif !important
-  .text-tags .text-tag .text-button
-    font: 1.2em "Helvetica Neue", Helvetica, Arial, sans-serif !important
-    height: 1.2em !important
-
-.oe_forum_alert
-  position: absolute
-  margin-top: -30px
-  margin-left: 90px
-  width: 300px
-  z-index: 9999
-
-.oe_forum_email_required
-  position: absolute
-  margin-top: 155px
-  margin-left: 500px
-  margin-right: 100px
-  z-index: 5
-
-button.btn-link.text-muted
-  color: #999
-
-.o_forum_user_bio_expand
-  position: absolute
-  z-index: 200
-  display: none
-
-.o_forum_tooltip_heading
-  padding: 0px
-  margin: 0px
-  font-size: 18px
-
-.o_forum_user_bio
-  color: black
-  width: 318px
-  min-height: 100px
-  cursor: auto
-  border: 1px solid darkgray
-  background-color: whitesmoke
-  line-height: 13px
-  font-size: 11px
-  word-wrap: break-word
-  .o_forum_tooltip_line
-    min-height: 13px
-  .o_forum_tooltip_header
-    min-height: 75px
+.vote {
+    min-width: 38px;
+    margin-right: 12px;
+
+    .vote_count {
+        font-size: 160%;
+        font-weight: bold;
+        line-height: 12px;
+    }
+
+    .vote_down,
+    .vote_up {
+        font-size: 130%;
+    }
+}
+
+.author-box {
+    min-width: 200px;
+    padding: 4px;
+    background-color: #f5f5f5;
+}
+
+.question-block {
+    margin-left: 50px;
+}
+
+.o_forum_tag_follow_box {
+    display: none;
+    position: absolute;
+    z-index: 1;
+    text-align: center;
+    opacity: 0.9;
+}
+
+.question {
+    clear: left;
+}
+
+.question {
+    .question-name {
+        font-size: 150%;
+    }
+
+    .badge {
+        background-color: #ccc;
+        margin-left: 4px;
+    }
+
+    .badge-active {
+        background-color: #428bca;
+    }
+
+    img {
+        max-width: 600px;
+        height: auto !important;
+    }
+}
+
+.forum_answer {
+    img {
+        max-width: 600px;
+        height: auto !important;
+    }
+}
+
+img.o_forum_avatar {
+    max-height: 40px;
+    margin-right: 10px;
+}
+
+img.o_forum_avatar_big {
+    max-width: 75px;
+    margin-right: 10px;
+}
+
+.oe_grey {
+    background-color: #eeeeee;
+}
+
+.badge-gold {
+    color: #ffcc00;
+}
+
+.badge-silver {
+    color: #cccccc;
+}
+
+.badge-bronze {
+    color: #eea91e;
+}
+
+.oe_answer_true {
+    color: #3c763d;
+
+    &:hover {
+        color: #4D964E;
+    }
+}
+
+.oe_answer_false {
+    color: #bbbbbb;
+
+    &:hover {
+        color: #9E9C9C;
+    }
+}
+
+.favourite_question {
+    color: #bbbbbb !important;
+}
+
+.forum_favourite_question {
+    color: #ffcc00 !important;
+}
+
+a.no-decoration {
+    cursor: pointer;
+    text-decoration: none !important;
+}
+
+.faq-question:hover {
+    text-decoration: none !important;
+    color: #428bca;
+}
+
+.oe_comment_grey {
+    background-color: #f5f5f5;
+    padding: 4px;
+}
+
+.close.comment_delete {
+    font-size: 16px;
+}
+
+.country_flag {
+    max-height: 16px;
+    display: inline-block;
+    margin-left: 2px;
+}
+
+.tag_text .text-core .text-wrap {
+    .text-dropdown,
+    .text-prompt,
+    input,
+    textarea {
+        font: 1.2em "Helvetica Neue", Helvetica, Arial, sans-serif !important;
+    }
+
+    .text-tags .text-tag .text-button {
+        font: 1.2em "Helvetica Neue", Helvetica, Arial, sans-serif !important;
+        height: 1.2em !important;
+    }
+}
+
+.oe_forum_alert {
+    position: absolute;
+    margin-top: -30px;
+    margin-left: 90px;
+    width: 300px;
+    z-index: 9999;
+}
+
+.oe_forum_email_required {
+    position: absolute;
+    margin-top: 155px;
+    margin-left: 500px;
+    margin-right: 100px;
+    z-index: 5;
+}
+
+button.btn-link.text-muted {
+    color: #999;
+}
+
+.o_forum_user_bio_expand {
+    position: absolute;
+    z-index: 200;
+    display: none;
+}
+
+.o_forum_tooltip_heading {
+    padding: 0;
+    margin: 0;
+    font-size: 18px;
+}
+
+.o_forum_user_bio {
+    color: black;
+    width: 318px;
+    min-height: 100px;
+    cursor: auto;
+    border: 1px solid darkgray;
+    background-color: whitesmoke;
+    line-height: 13px;
+    font-size: 11px;
+    word-wrap: break-word;
+
+    .o_forum_tooltip_line {
+        min-height: 13px;
+    }
+
+    .o_forum_tooltip_header {
+        min-height: 75px;
+    }
+}
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index 3d2315db252..809cf170ba9 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -10,9 +10,11 @@
     </xpath>
 </template>
 
-<template id="assets_frontend" inherit_id="website.assets_frontend" name="Forum Assets">
-    <xpath expr="." position="inside">
-        <link rel='stylesheet' href='/website_forum/static/src/css/website_forum.css'/>
+<template id="assets_frontend" inherit_id="website.assets_frontend">
+    <xpath expr="link[last()]" position="after">
+        <link rel="stylesheet" type="text/less" href="/website_forum/static/src/less/website_forum.less"/>
+    </xpath>
+    <xpath expr="script[last()]" position="after">
         <script type="text/javascript" src="/website_forum/static/src/js/website_forum.js"/>
         <script type="text/javascript" src="/website_forum/static/src/js/website_forum.share.js"/>
         <script type="text/javascript" src="/website_forum/static/src/js/website_tour_forum_question.js"/>
diff --git a/addons/website_sale/static/src/css/website_mail.css b/addons/website_sale/static/src/css/website_mail.css
deleted file mode 100644
index b43f9fc8d65..00000000000
--- a/addons/website_sale/static/src/css/website_mail.css
+++ /dev/null
@@ -1,43 +0,0 @@
-@charset "utf-8";
-/* ---- OpenChatter Website ---- */
-.oe_msg img.oe_msg_avatar {
-  width: 50px;
-  margin-right: 10px;
-}
-
-.oe_msg_attachment {
-  display: inline-block;
-  width: 120px;
-  margin: 4px 2px;
-  min-height: 80px;
-  position: relative;
-  border-radius: 3px;
-  text-align: center;
-  vertical-align: top;
-}
-.oe_msg_attachment a img.oe_attachment_embedded {
-  display: block;
-  position: relative;
-  margin: 0px;
-  margin-left: 10px;
-  width: 100px;
-  height: 80px;
-  border-radius: 1px;
-  border: solid 3px white;
-  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.19);
-  -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.19);
-  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.19);
-}
-.oe_msg_attachment a div.oe_attachment_name {
-  display: inline-block;
-  max-width: 100%;
-  padding: 1px 3px;
-  margin-top: 2px;
-  margin-bottom: 5px;
-  background: #f4f5fa;
-  overflow: hidden;
-  color: #4c4c4c;
-  text-shadow: none;
-  border-radius: 3px;
-  word-wrap: break-word;
-}
diff --git a/addons/website_sale/static/src/css/website_sale.css b/addons/website_sale/static/src/css/website_sale.css
deleted file mode 100644
index 2fd9a68563a..00000000000
--- a/addons/website_sale/static/src/css/website_sale.css
+++ /dev/null
@@ -1,664 +0,0 @@
-/* ---- Default Styles ---- */
-.oe_product {
-  border: 1px solid rgba(100, 100, 100, 0.2);
-}
-
-.products_pager {
-  text-align: center;
-}
-.products_pager > div {
-  margin: 0 auto;
-  display: inline-block;
-}
-.products_pager > div > * {
-  vertical-align: middle;
-  float: none;
-  padding: 0;
-}
-.products_pager > div > ul {
-  padding-left: 10px;
-}
-.products_pager > ul {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.oe_website_sale ul ul {
-  margin-left: 1.5em;
-}
-.oe_website_sale .td-product_name, .oe_website_sale h1[itemprop="name"], .oe_website_sale .oe_product_cart form h5 {
-  word-wrap: break-word;
-}
-.oe_website_sale .td-product_name {
-  min-width: 140px;
-}
-.oe_website_sale .td-img {
-  width: 100px;
-}
-.oe_website_sale .td-qty {
-  width: 130px;
-}
-.oe_website_sale .td-price, .oe_website_sale .td-price-total {
-  width: 100px;
-}
-@media (max-width: 767px) {
-  .oe_website_sale .td-img, .oe_website_sale .td-price-total {
-    display: none;
-  }
-  .oe_website_sale .td-qty {
-    width: 60px;
-  }
-  .oe_website_sale .td-price {
-    width: 80px;
-  }
-}
-@media (min-width: 768px) {
-  .oe_website_sale .o_website_sale_rightfit {
-    padding-right: 0px;
-  }
-}
-@media (max-width: 476px) {
-  .oe_website_sale .td-qty {
-    width: 60px;
-  }
-  .oe_website_sale .oe_cart table thead, .oe_website_sale #modal_optional_products table thead {
-    display: none;
-  }
-  .oe_website_sale .oe_cart table td.td-img, .oe_website_sale #modal_optional_products table td.td-img {
-    display: none;
-  }
-  .oe_website_sale .oe_cart a span.hidden-xs, .oe_website_sale #modal_optional_products a span.hidden-xs {
-    display: none !important;
-  }
-  .oe_website_sale .oe_cart a span.visible-xs-inline, .oe_website_sale #modal_optional_products a span.visible-xs-inline {
-    display: inline !important;
-  }
-}
-
-/* ---- Default Styles ---- */
-.o_alternative_product {
-  margin: auto;
-}
-
-.oe_product {
-  position: relative;
-}
-.oe_product .oe_product_image {
-  position: absolute;
-  left: 15px;
-  right: 15px;
-  top: 15px;
-  bottom: 55px;
-  text-align: center;
-}
-.oe_product .oe_product_image img {
-  max-width: 100%;
-  max-height: 100%;
-  margin: auto;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  z-index: 4;
-}
-.oe_product section {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: hidden;
-  padding: 0 15px 24px 10px;
-  min-height: 56px;
-  border-top: 1px solid rgba(255, 255, 255, 0.2);
-  background: rgba(255, 255, 255, 0.75);
-  z-index: 5;
-}
-.oe_product .product_price {
-  padding: 5px 0;
-  position: absolute;
-  bottom: 0;
-}
-.oe_product .oe_product_cart {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-.oe_product .oe_subdescription {
-  font-size: 0.8em;
-  overflow: hidden;
-  margin-bottom: 10px;
-}
-
-.oe_mycart .input-group-addon {
-  padding-left: 6px;
-  padding-right: 6px;
-}
-
-/* Products Options */
-.oe_product.oe_image_full .oe_product_image {
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-}
-
-/* Ribbon for promotionso on products */
-.oe_product.oe_ribbon_promo .ribbon-wrapper {
-  display: block;
-}
-.oe_product .ribbon-wrapper {
-  display: none;
-  width: 85px;
-  height: 88px;
-  z-index: 5;
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-.oe_product .ribbon {
-  font: bold 15px Sans-Serif;
-  color: white;
-  text-align: center;
-  -webkit-transform: rotate(45deg);
-  -moz-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  -o-transform: rotate(45deg);
-  position: relative;
-  padding: 7px 0;
-  left: -5px;
-  top: 15px;
-  width: 120px;
-  cursor: default;
-}
-
-/* ---- Product Sizes ---- */
-#products_grid > table tr:not(:first-child) > td {
-  height: 100%;
-}
-#products_grid.col-md-12 > table > tbody > tr > td:empty, #products_grid.col-md-9 > table > tbody > tr > td:empty {
-  height: 0;
-}
-#products_grid.col-md-12 .oe-height-1 {
-  height: 75px;
-}
-#products_grid.col-md-12 .oe-height-2 {
-  height: 150px;
-}
-#products_grid.col-md-12 .oe-height-4 {
-  height: 300px;
-}
-#products_grid.col-md-12 .oe-height-6 {
-  height: 450px;
-}
-#products_grid.col-md-12 .oe-height-8 {
-  height: 600px;
-}
-#products_grid.col-md-9 .oe-height-1 {
-  height: 70px;
-}
-#products_grid.col-md-9 .oe-height-2 {
-  height: 140px;
-}
-#products_grid.col-md-9 .oe-height-4 {
-  height: 280px;
-}
-#products_grid.col-md-9 .oe-height-6 {
-  height: 420px;
-}
-#products_grid.col-md-9 .oe-height-8 {
-  height: 560px;
-}
-#products_grid .oe_product.oe_grid .oe_subdescription {
-  max-height: 40px;
-}
-
-@media (min-width: 992px) {
-  #products_grid.col-md-12 .oe-height-1 {
-    height: 95px;
-  }
-  #products_grid.col-md-12 .oe-height-2 {
-    height: 190px;
-  }
-  #products_grid.col-md-12 .oe-height-4 {
-    height: 380px;
-  }
-  #products_grid.col-md-12 .oe-height-6 {
-    height: 570px;
-  }
-  #products_grid.col-md-12 .oe-height-8 {
-    height: 760px;
-  }
-  #products_grid.col-md-12 .oe_product.oe_grid .oe_subdescription {
-    max-height: 70px;
-  }
-  #products_grid.col-md-9 .oe-height-1 {
-    height: 72px;
-  }
-  #products_grid.col-md-9 .oe-height-2 {
-    height: 144px;
-  }
-  #products_grid.col-md-9 .oe-height-4 {
-    height: 288px;
-  }
-  #products_grid.col-md-9 .oe-height-6 {
-    height: 432px;
-  }
-  #products_grid.col-md-9 .oe-height-8 {
-    height: 576px;
-  }
-}
-@media (min-width: 1200px) {
-  #products_grid.col-md-12 .oe-height-1 {
-    height: 125px;
-  }
-  #products_grid.col-md-12 .oe-height-2 {
-    height: 250px;
-  }
-  #products_grid.col-md-12 .oe-height-4 {
-    height: 500px;
-  }
-  #products_grid.col-md-12 .oe-height-6 {
-    height: 750px;
-  }
-  #products_grid.col-md-12 .oe-height-8 {
-    height: 1000px;
-  }
-  #products_grid.col-md-9 .oe-height-1 {
-    height: 95px;
-  }
-  #products_grid.col-md-9 .oe-height-2 {
-    height: 190px;
-  }
-  #products_grid.col-md-9 .oe-height-4 {
-    height: 380px;
-  }
-  #products_grid.col-md-9 .oe-height-6 {
-    height: 570px;
-  }
-  #products_grid.col-md-9 .oe-height-8 {
-    height: 760px;
-  }
-  #products_grid .oe_product.oe_grid .oe_subdescription {
-    max-height: 120px;
-  }
-}
-@media (max-width: 768px) {
-  #products_grid table, #products_grid tbody, #products_grid tr, #products_grid td {
-    float: left;
-    width: 100%;
-    display: inline-block;
-  }
-  #products_grid .oe_product {
-    float: left;
-    width: 100%;
-    display: inline-block;
-  }
-  #products_grid .oe_product.oe_grid {
-    height: 400px;
-  }
-  #products_grid .oe_product.oe_grid section {
-    background: rgba(100, 100, 100, 0.2);
-  }
-  #products_grid .oe_product .oe_subdescription {
-    max-height: 200px;
-  }
-
-  .products_pager .pagination {
-    margin: 5px auto !important;
-  }
-}
-@media (max-width: 400px) {
-  #products_grid .oe_product.oe_grid {
-    height: 270px;
-  }
-  #products_grid .oe_product.oe_list {
-    height: 200px;
-  }
-  #products_grid .oe_product.oe_list section {
-    background: rgba(100, 100, 100, 0.2);
-  }
-  #products_grid .oe_product .oe_product_image {
-    top: 0;
-    bottom: 65px;
-  }
-
-  #products_grid .oe_product.oe_image_full .oe_product_image {
-    bottom: 50px;
-  }
-}
-/* ---- Cart ---- */
-.oe_cart a span.visible-xs-inline, #modal_optional_products a span.visible-xs-inline {
-  display: none !important;
-}
-
-.oe_cart a span.hidden-xs, #modal_optional_products a span.hidden-xs {
-  display: inline !important;
-}
-
-.oe_cart table td:first-child {
-  min-width: 76px;
-}
-
-.oe_cart > .oe_structure {
-  clear: both;
-}
-
-div#payment_method div.list-group {
-  margin-left: 40px;
-}
-div#payment_method .list-group-item {
-  padding-top: 5px;
-  padding-bottom: 5px;
-}
-
-/* ---- Product list style ---- */
-@media (min-width: 400px) {
-  .oe_product.oe_list {
-    border: none;
-    border-bottom: 1px solid rgba(100, 100, 100, 0.2);
-    width: 100%;
-    min-height: 100px;
-    position: relative;
-    padding-bottom: 5px;
-    padding-left: 180px;
-  }
-  .oe_product.oe_list .oe_product_image {
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 170px;
-  }
-  .oe_product.oe_list section {
-    position: relative;
-    border: 0;
-    top: auto;
-    bottom: auto;
-    left: auto;
-    right: auto;
-    background: transparent;
-  }
-}
-.oe_website_sale .row .row .col-md-12 {
-  float: none;
-}
-
-/* product detail */
-.css_attribute_color {
-  display: inline-block;
-  border: 1px solid #999999;
-  text-align: center;
-}
-.css_attribute_color input {
-  margin: 8px;
-  height: 13px;
-  opacity: 0;
-}
-.css_attribute_color.active {
-  border: 3px ridge #66ee66;
-}
-.css_attribute_color.active input {
-  margin: 6px;
-}
-
-.css_not_available_msg {
-  display: none;
-}
-
-.css_not_available.js_product > *:nth-child(4) > * {
-  display: none;
-}
-.css_not_available.js_product .product_price, .css_not_available.js_product .css_quantity {
-  display: none;
-}
-.css_not_available.js_product .css_not_available_msg {
-  display: block;
-}
-
-.css_quantity {
-  max-width: 125px;
-}
-.css_quantity input[name="add_qty"] {
-  text-align: center;
-}
-
-option.css_not_available {
-  color: #ccc;
-}
-
-label.css_not_available {
-  opacity: 0.6;
-}
-
-label.css_attribute_color.css_not_available {
-  opacity: 1;
-  background-image: url("/website_sale/static/src/img/redcross.png");
-  background-size: cover;
-}
-
-.product_detail_img {
-  margin-left: auto;
-  margin-right: auto;
-  display: block;
-  max-height: 500px;
-}
-
-.oe_default_price {
-  display: none;
-}
-
-.discount .oe_default_price {
-  display: block;
-}
-
-.oe_website_sale input.js_quantity {
-  min-width: 48px;
-  text-align: center;
-}
-
-.oe_website_sale input.quantity {
-  padding: 0;
-}
-
-/* ---- Publish managment and options ---- */
-.oe_overlay_options .dropdown ul[name="size"] table {
-  margin-left: 20px;
-}
-.oe_overlay_options .dropdown ul[name="size"] td {
-  margin: 0;
-  padding: 0;
-  width: 20px;
-  height: 20px;
-  border: 1px #dddddd solid;
-  cursor: pointer;
-}
-.oe_overlay_options .dropdown ul[name="size"] td.selected {
-  background-color: #B1D4F1;
-}
-.oe_overlay_options .dropdown ul[name="size"] table.oe_hover td.selected {
-  background-color: transparent;
-}
-.oe_overlay_options .dropdown ul[name="size"] table.oe_hover td.select {
-  background-color: #B1D4F1;
-}
-
-/* Wizard */
-ul.wizard {
-  padding: 0;
-  margin-top: 20px;
-  list-style: none outside none;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065);
-  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065);
-}
-ul.wizard li {
-  border: 1px solid #d4d4d4;
-  border-right-width: 0;
-  position: relative;
-  float: left;
-  padding: 0 10px 0 20px;
-  margin: 0;
-  line-height: 38px;
-  background: #fbfbfb;
-}
-ul.wizard li .chevron {
-  position: absolute;
-  top: 0;
-  right: -10px;
-  z-index: 1;
-  display: block;
-  border: 20px solid transparent;
-  border-right: 0;
-  border-left: 10px solid #d4d4d4;
-}
-ul.wizard li .chevron:before {
-  position: absolute;
-  top: -20px;
-  right: 1px;
-  display: block;
-  border: 20px solid transparent;
-  border-right: 0;
-  border-left: 10px solid #fbfbfb;
-  content: "";
-}
-ul.wizard li .o_link_disable {
-  text-decoration: none;
-  color: inherit;
-  cursor: text;
-}
-ul.wizard li.text-success {
-  background: #f3f4f5;
-}
-ul.wizard li.text-success .chevron:before {
-  border-left: 10px solid #f5f5f5;
-}
-ul.wizard li.text-primary {
-  background: #f1f6fc;
-}
-ul.wizard li.text-primary .chevron:before {
-  border-left: 10px solid #f1f6fc;
-}
-ul.wizard li:first-child {
-  padding-left: 15px;
-  border-radius: 4px 0 0 4px;
-}
-ul.wizard li:last-child {
-  border-radius: 0 4px 4px 0;
-  border-right-width: 1px;
-}
-ul.wizard li:last-child .chevron {
-  display: none;
-}
-
-/* Collapse category */
-#o_shop_collapse_category li a {
-  display: inline-block;
-  width: 80%;
-  padding-left: 3px;
-}
-#o_shop_collapse_category li i.fa {
-  cursor: pointer;
-}
-
-.mycart-popover {
-  max-width: 500px;
-  min-width: 250px;
-}
-.mycart-popover .cart_line {
-  border-bottom: 1px #EEE solid;
-}
-
-td.noborder {
-  border: none !important;
-}
-
-.border_primary {
-  border: 1px solid #337ab7;
-}
-
-.js_change_shipping {
-  cursor: pointer;
-}
-
-a.no-decoration {
-  cursor: pointer;
-  text-decoration: none !important;
-}
-
-#o-carousel-product .carousel-inner div.item {
-  height: 400px;
-}
-#o-carousel-product .carousel-inner div.item img {
-  max-height: 100%;
-}
-#o-carousel-product .carousel-control {
-  background-image: none !important;
-}
-#o-carousel-product .carousel-indicators {
-  background-color: transparent;
-  margin: 10px 0 0;
-  overflow-y: hidden;
-  position: static;
-  text-align: left;
-  white-space: nowrap;
-  width: 100%;
-  height: 100px !important;
-  text-align: center;
-  list-style-position: inside;
-}
-#o-carousel-product .carousel-indicators li {
-  background-color: transparent !important;
-  border-radius: 0;
-  display: inline-block;
-  margin: 0 !important;
-  width: 54px !important;
-  height: 54px !important;
-  border: 0 !important;
-  box-shadow: none !important;
-}
-#o-carousel-product .carousel-indicators li img {
-  display: block;
-  opacity: 0.5;
-}
-#o-carousel-product .carousel-indicators li.active img {
-  opacity: 1;
-}
-
-.ecom-zoomable img[data-zoom] {
-  cursor: zoom-in;
-}
-
-.break-word {
-  word-wrap: break-word;
-}
-
-#coupon_box form {
-  max-width: 300px;
-}
-
-.font-weight-normal {
-  font-weight: normal;
-}
-
-.o_website_sale_animate {
-  opacity: 0.7;
-  position: absolute;
-  height: 150px;
-  width: 150px;
-  z-index: 1020;
-}
-
-.o_red_highlight {
-  background: #db0700 !important;
-  box-shadow: 0 0 0px 0px rgba(240, 8, 0, 0.4);
-  transition: all 0.5s linear;
-}
-
-.o_shadow_animation {
-  box-shadow: 0 0 5px 10px rgba(240, 8, 0, 0.4) !important;
-}
diff --git a/addons/website_sale/static/src/less/website_mail.less b/addons/website_sale/static/src/less/website_mail.less
index a373a6e73c4..26a45aa50e8 100644
--- a/addons/website_sale/static/src/less/website_mail.less
+++ b/addons/website_sale/static/src/less/website_mail.less
@@ -1,43 +1,48 @@
-@charset "utf-8"
-
 /* ---- OpenChatter Website ---- */
 
-.oe_msg
-    img.oe_msg_avatar
-        width: 50px
-        margin-right: 10px
+.oe_msg {
+    img.oe_msg_avatar {
+        width: 50px;
+        margin-right: 10px;
+    }
+}
+
+.oe_msg_attachment {
+    display: inline-block;
+    width: 120px;
+    margin: 4px 2px;
+    min-height: 80px;
+    position: relative;
+    border-radius: 3px;
+    text-align: center;
+    vertical-align: top;
+
+    a {
+        img.oe_attachment_embedded {
+            display: block;
+            position: relative;
+            margin: 0 0 0 10px;
+            width: 100px;
+            height: 80px;
+            border-radius: 1px;
+            border: solid 3px #FFF;
+            -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.19);
+            -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.19);
+            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.19);
+        }
 
-.oe_msg_attachment
-    display: inline-block
-    width: 120px
-    margin: 4px 2px
-    min-height: 80px
-    position: relative
-    border-radius: 3px
-    text-align: center
-    vertical-align: top
-    a
-        img.oe_attachment_embedded
-            display: block
-            position: relative
-            margin: 0px
-            margin-left: 10px
-            width: 100px
-            height: 80px
-            border-radius: 1px
-            border: solid 3px #FFF
-            -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.19)
-            -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.19)
-            box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.19)
-        div.oe_attachment_name
-            display: inline-block
-            max-width: 100%
-            padding: 1px 3px
-            margin-top: 2px
-            margin-bottom: 5px
-            background: #F4F5FA
-            overflow: hidden
-            color: #4c4c4c
-            text-shadow: none
-            border-radius: 3px
-            word-wrap: break-word
\ No newline at end of file
+        div.oe_attachment_name {
+            display: inline-block;
+            max-width: 100%;
+            padding: 1px 3px;
+            margin-top: 2px;
+            margin-bottom: 5px;
+            background: #F4F5FA;
+            overflow: hidden;
+            color: #4c4c4c;
+            text-shadow: none;
+            border-radius: 3px;
+            word-wrap: break-word;
+        }
+    }
+}
diff --git a/addons/website_sale/static/src/less/website_sale.less b/addons/website_sale/static/src/less/website_sale.less
index 6b8c5a155e6..99f9764c9c9 100644
--- a/addons/website_sale/static/src/less/website_sale.less
+++ b/addons/website_sale/static/src/less/website_sale.less
@@ -1,585 +1,837 @@
-@charset "utf-8"
-
 /* ---- Default Styles ---- */
 
-.oe_product
-    border: 1px solid rgba(100,100,100,0.2)
-
-.products_pager
-    text-align: center
-    > div
-        margin: 0 auto
-        display: inline-block
-        > *
-            vertical-align: middle
-            float: none
-            padding: 0
-        > ul
-            padding-left: 10px
-    > ul
-        margin-left: auto
-        margin-right: auto
-
-.oe_website_sale
-    ul ul
-        margin-left: 1.5em
-
-    .td-product_name, h1[itemprop="name"], .oe_product_cart form h5
-        word-wrap: break-word
-
-    .td-product_name
-        min-width: 140px
-    .td-img
-        width: 100px
-
-    .td-qty
-        width: 130px
-
-    .td-price, .td-price-total
-        width: 100px
-
-    @media (max-width: 767px)
-        .td-img, .td-price-total
-            display: none
-        .td-qty
-            width: 60px
-        .td-price
-            width: 80px
-
-    @media (min-width: 768px)
-        .o_website_sale_rightfit
-            padding-right: 0px
-
-    @media (max-width: 476px)
-        .td-qty
-            width: 60px
-
-        .oe_cart table thead, #modal_optional_products table thead
-            display: none
-
-        .oe_cart table td.td-img, #modal_optional_products table td.td-img
-            display: none
-
-        .oe_cart a span.hidden-xs, #modal_optional_products a span.hidden-xs
-            display: none !important
-
-        .oe_cart a span.visible-xs-inline, #modal_optional_products a span.visible-xs-inline
-            display: inline !important
-
+.oe_product {
+    border: 1px solid rgba(100,100,100,0.2);
+}
+
+.products_pager {
+    text-align: center;
+
+    > div {
+        margin: 0 auto;
+        display: inline-block;
+
+        > * {
+            vertical-align: middle;
+            float: none;
+            padding: 0;
+        }
+
+        > ul {
+            padding-left: 10px;
+        }
+    }
+
+    > ul {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
+.oe_website_sale {
+    ul ul {
+        margin-left: 1.5em;
+    }
+
+    .td-product_name,
+    h1[itemprop="name"],
+    .oe_product_cart form h5 {
+        word-wrap: break-word;
+    }
+
+    .td-product_name {
+        min-width: 140px;
+    }
+
+    .td-img {
+        width: 100px;
+    }
+
+    .td-qty {
+        width: 130px;
+    }
+
+    .td-price,
+    .td-price-total {
+        width: 100px;
+    }
+
+    @media (max-width: 767px) {
+        .td-img,
+        .td-price-total {
+            display: none;
+        }
+
+        .td-qty {
+            width: 60px;
+        }
+
+        .td-price {
+            width: 80px;
+        }
+    }
+    @media (min-width: 768px) {
+        .o_website_sale_rightfit {
+            padding-right: 0;
+        }
+    }
+
+    @media (max-width: 476px) {
+        .td-qty {
+            width: 60px;
+        }
+
+        #modal_optional_products table thead,
+        .oe_cart table thead {
+            display: none;
+        }
+
+        #modal_optional_products table td.td-img,
+        .oe_cart table td.td-img {
+            display: none;
+        }
+
+        #modal_optional_products a span.hidden-xs,
+        .oe_cart a span.hidden-xs {
+            display: none !important;
+        }
+
+        #modal_optional_products a span.visible-xs-inline,
+        .oe_cart a span.visible-xs-inline {
+            display: inline !important;
+        }
+    }
+}
 /* ---- Default Styles ---- */
 
-.o_alternative_product
-    margin: auto
-
-.oe_product
-    position: relative
-    .oe_product_image
-        position: absolute
-        left: 15px
-        right: 15px
-        top: 15px
-        bottom: 55px
-        text-align: center
-        img
-            max-width: 100%
-            max-height: 100%
-            margin: auto
-            position: absolute
-            top: 0
-            left: 0
-            bottom: 0
-            right: 0
-            z-index: 4
-    section
-        position: absolute
-        left: 0
-        right: 0
-        bottom: 0
-        overflow: hidden
-        padding: 0 15px 24px 10px
-        min-height: 56px
-        border-top: 1px solid rgba(255,255,255,0.2)
-        background: rgba(255, 255, 255, 0.75)
-        z-index: 5
-    .product_price
-        padding: 5px 0
-        position: absolute
-        bottom: 0
-    .oe_product_cart
-        position: relative
-        width: 100%
-        height: 100%
-    .oe_subdescription
-        font-size: 0.8em
-        overflow: hidden
-        margin-bottom: 10px
-
-.oe_mycart
-    .input-group-addon
-        padding-left: 6px
-        padding-right: 6px
-
+.o_alternative_product {
+    margin: auto;
+}
+
+.oe_product {
+    position: relative;
+
+    .oe_product_image {
+        position: absolute;
+        left: 15px;
+        right: 15px;
+        top: 15px;
+        bottom: 55px;
+        text-align: center;
+
+        img {
+            max-width: 100%;
+            max-height: 100%;
+            margin: auto;
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            z-index: 4;
+        }
+    }
+
+    section {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow: hidden;
+        padding: 0 15px 24px 10px;
+        min-height: 56px;
+        border-top: 1px solid rgba(255,255,255,0.2);
+        background: rgba(255, 255, 255, 0.75);
+        z-index: 5;
+    }
+
+    .product_price {
+        padding: 5px 0;
+        position: absolute;
+        bottom: 0;
+    }
+
+    .oe_product_cart {
+        position: relative;
+        width: 100%;
+        height: 100%;
+    }
+
+    .oe_subdescription {
+        font-size: 0.8em;
+        overflow: hidden;
+        margin-bottom: 10px;
+    }
+}
+
+.oe_mycart {
+    .input-group-addon {
+        padding-left: 6px;
+        padding-right: 6px;
+    }
+}
 /* Products Options */
 
-.oe_product.oe_image_full
-    .oe_product_image
-        left: 0
-        right: 0
-        top: 0
-        bottom: 0
-
+.oe_product.oe_image_full {
+    .oe_product_image {
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    }
+}
 /* Ribbon for promotionso on products */
 
-.oe_product
-    &.oe_ribbon_promo
-        .ribbon-wrapper
-            display: block
-
-    .ribbon-wrapper
-        display: none
-        width: 85px
-        height: 88px
-        z-index: 5
-        overflow: hidden
-        position: absolute
-        top: 0
-        right: 0
-
-    .ribbon
-        font: bold 15px Sans-Serif
-        color: white
-        text-align: center
-        -webkit-transform: rotate(45deg)
-        -moz-transform:    rotate(45deg)
-        -ms-transform:     rotate(45deg)
-        -o-transform:      rotate(45deg)
-        position: relative
-        padding: 7px 0
-        left: -5px
-        top: 15px
-        width: 120px
-        cursor: default
-
+.oe_product {
+    &.oe_ribbon_promo {
+        .ribbon-wrapper {
+            display: block;
+        }
+    }
+
+    .ribbon-wrapper {
+        display: none;
+        width: 85px;
+        height: 88px;
+        z-index: 5;
+        overflow: hidden;
+        position: absolute;
+        top: 0;
+        right: 0;
+    }
+
+    .ribbon {
+        font: bold 15px Sans-Serif;
+        color: white;
+        text-align: center;
+        -webkit-transform: rotate(45deg);
+        -moz-transform: rotate(45deg);
+        -ms-transform: rotate(45deg);
+        -o-transform: rotate(45deg);
+        position: relative;
+        padding: 7px 0;
+        left: -5px;
+        top: 15px;
+        width: 120px;
+        cursor: default;
+    }
+}
 
 /* ---- Product Sizes ---- */
 
-#products_grid
-    > table tr:not(:first-child) > td
-        height: 100%
-    &.col-md-12, &.col-md-9
-        > table > tbody > tr > td:empty
-            height: 0
-
-    &.col-md-12
-        .oe-height-1
-            height: 75px
-        .oe-height-2
-            height: 150px
-        .oe-height-4
-            height: 300px
-        .oe-height-6
-            height: 450px
-        .oe-height-8
-            height: 600px
-    &.col-md-9
-        .oe-height-1
-            height: 70px
-        .oe-height-2
-            height: 140px
-        .oe-height-4
-            height: 280px
-        .oe-height-6
-            height: 420px
-        .oe-height-8
-            height: 560px
-
-    .oe_product.oe_grid .oe_subdescription
-        max-height: 40px
-
-@media (min-width: 992px)
-    #products_grid
-        &.col-md-12
-            .oe-height-1
-                height: 95px
-            .oe-height-2
-                height: 190px
-            .oe-height-4
-                height: 380px
-            .oe-height-6
-                height: 570px
-            .oe-height-8
-                height: 760px
-
-            .oe_product.oe_grid .oe_subdescription
-                max-height: 70px
-        &.col-md-9
-            .oe-height-1
-                height: 72px
-            .oe-height-2
-                height: 144px
-            .oe-height-4
-                height: 288px
-            .oe-height-6
-                height: 432px
-            .oe-height-8
-                height: 576px
-
-@media (min-width: 1200px)
-    #products_grid
-        &.col-md-12
-            .oe-height-1
-                height: 125px
-            .oe-height-2
-                height: 250px
-            .oe-height-4
-                height: 500px
-            .oe-height-6
-                height: 750px
-            .oe-height-8
-                height: 1000px
-        &.col-md-9
-            .oe-height-1
-                height: 95px
-            .oe-height-2
-                height: 190px
-            .oe-height-4
-                height: 380px
-            .oe-height-6
-                height: 570px
-            .oe-height-8
-                height: 760px
-
-        .oe_product.oe_grid .oe_subdescription
-            max-height: 120px
-
-@media (max-width: 768px)
-    #products_grid
-        table, tbody,tr, td
-            float: left
-            width: 100%
-            display: inline-block
-        .oe_product
-            float: left
-            width: 100%
-            display: inline-block
-            &.oe_grid
-                height: 400px
-            &.oe_grid section
-                background: rgba(100, 100, 100, 0.2)
-            .oe_subdescription
-                max-height: 200px
-    .products_pager
-        .pagination
-            margin: 5px auto !important
-
-@media (max-width: 400px)
-    #products_grid
-        .oe_product
-            &.oe_grid
-                height: 270px
-            &.oe_list
-                height: 200px
-                section
-                    background: rgba(100, 100, 100, 0.2)
-            .oe_product_image
-                top: 0
-                bottom: 65px
-    #products_grid
-        .oe_product.oe_image_full
-            .oe_product_image
-                bottom: 50px
-
+#products_grid {
+    > table tr:not(:first-child) > td {
+        height: 100%;
+    }
+
+    &.col-md-12,
+    &.col-md-9 {
+        > table > tbody > tr > td:empty {
+            height: 0;
+        }
+    }
+
+    &.col-md-12 {
+        .oe-height-1 {
+            height: 75px;
+        }
+
+        .oe-height-2 {
+            height: 150px;
+        }
+
+        .oe-height-4 {
+            height: 300px;
+        }
+
+        .oe-height-6 {
+            height: 450px;
+        }
+
+        .oe-height-8 {
+            height: 600px;
+        }
+    }
+
+    &.col-md-9 {
+        .oe-height-1 {
+            height: 70px;
+        }
+
+        .oe-height-2 {
+            height: 140px;
+        }
+
+        .oe-height-4 {
+            height: 280px;
+        }
+
+        .oe-height-6 {
+            height: 420px;
+        }
+
+        .oe-height-8 {
+            height: 560px;
+        }
+    }
+
+    .oe_product.oe_grid .oe_subdescription {
+        max-height: 40px;
+    }
+}
+@media (min-width: 992px) {
+    #products_grid {
+        &.col-md-12 {
+            .oe-height-1 {
+                height: 95px;
+            }
+
+            .oe-height-2 {
+                height: 190px;
+            }
+
+            .oe-height-4 {
+                height: 380px;
+            }
+
+            .oe-height-6 {
+                height: 570px;
+            }
+
+            .oe-height-8 {
+                height: 760px;
+            }
+
+            .oe_product.oe_grid .oe_subdescription {
+                max-height: 70px;
+            }
+        }
+
+        &.col-md-9 {
+            .oe-height-1 {
+                height: 72px;
+            }
+
+            .oe-height-2 {
+                height: 144px;
+            }
+
+            .oe-height-4 {
+                height: 288px;
+            }
+
+            .oe-height-6 {
+                height: 432px;
+            }
+
+            .oe-height-8 {
+                height: 576px;
+            }
+        }
+    }
+}
+@media (min-width: 1200px) {
+    #products_grid {
+        &.col-md-12 {
+            .oe-height-1 {
+                height: 125px;
+            }
+
+            .oe-height-2 {
+                height: 250px;
+            }
+
+            .oe-height-4 {
+                height: 500px;
+            }
+
+            .oe-height-6 {
+                height: 750px;
+            }
+
+            .oe-height-8 {
+                height: 1000px;
+            }
+        }
+
+        &.col-md-9 {
+            .oe-height-1 {
+                height: 95px;
+            }
+
+            .oe-height-2 {
+                height: 190px;
+            }
+
+            .oe-height-4 {
+                height: 380px;
+            }
+
+            .oe-height-6 {
+                height: 570px;
+            }
+
+            .oe-height-8 {
+                height: 760px;
+            }
+        }
+
+        .oe_product.oe_grid .oe_subdescription {
+            max-height: 120px;
+        }
+    }
+}
+@media (max-width: 768px) {
+    #products_grid {
+        table,
+        tbody,
+        td,
+        tr {
+            float: left;
+            width: 100%;
+            display: inline-block;
+        }
+
+        .oe_product {
+            float: left;
+            width: 100%;
+            display: inline-block;
+
+            &.oe_grid {
+                height: 400px;
+            }
+
+            &.oe_grid section {
+                background: rgba(100, 100, 100, 0.2);
+            }
+
+            .oe_subdescription {
+                max-height: 200px;
+            }
+        }
+    }
+
+    .products_pager {
+        .pagination {
+            margin: 5px auto !important;
+        }
+    }
+}
+@media (max-width: 400px) {
+    #products_grid {
+        .oe_product {
+            &.oe_grid {
+                height: 270px;
+            }
+
+            &.oe_list {
+                height: 200px;
+
+                section {
+                    background: rgba(100, 100, 100, 0.2);
+                }
+            }
+
+            .oe_product_image {
+                top: 0;
+                bottom: 65px;
+            }
+        }
+    }
+
+    #products_grid {
+        .oe_product.oe_image_full {
+            .oe_product_image {
+                bottom: 50px;
+            }
+        }
+    }
+}
 /* ---- Cart ---- */
-.oe_cart, #modal_optional_products
-    a span.visible-xs-inline
-        display: none !important
-.oe_cart, #modal_optional_products
-    a span.hidden-xs
-        display: inline !important
-
-.oe_cart table td:first-child
-    min-width: 76px
-.oe_cart > .oe_structure
-    clear: both
-
-div#payment_method
-    div.list-group
-        margin-left: 40px
-    .list-group-item
-        padding-top: 5px
-        padding-bottom: 5px
-
+#modal_optional_products,
+.oe_cart {
+    a span.visible-xs-inline {
+        display: none !important;
+    }
+}
+
+#modal_optional_products,
+.oe_cart {
+    a span.hidden-xs {
+        display: inline !important;
+    }
+}
+
+.oe_cart table td:first-child {
+    min-width: 76px;
+}
+
+.oe_cart > .oe_structure {
+    clear: both;
+}
+
+div#payment_method {
+    div.list-group {
+        margin-left: 40px;
+    }
+
+    .list-group-item {
+        padding-top: 5px;
+        padding-bottom: 5px;
+    }
+}
 
 /* ---- Product list style ---- */
 
-@media (min-width: 400px)
-    .oe_product.oe_list
-        border: none
-        border-bottom: 1px solid rgba(100, 100, 100, 0.2)
-        width: 100%
-        min-height: 100px
-        position: relative
-        padding-bottom: 5px
-        padding-left: 180px
-        .oe_product_image
-            top: 0
-            bottom: 0
-            left: 0
-            right: 0
-            width: 170px
-        section
-            position: relative
-            border: 0
-            top: auto
-            bottom: auto
-            left: auto
-            right: auto
-            background: transparent
-
-.oe_website_sale .row .row .col-md-12
-    float: none
-
+@media (min-width: 400px) {
+    .oe_product.oe_list {
+        border: none;
+        border-bottom: 1px solid rgba(100, 100, 100, 0.2);
+        width: 100%;
+        min-height: 100px;
+        position: relative;
+        padding-bottom: 5px;
+        padding-left: 180px;
+
+        .oe_product_image {
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            width: 170px;
+        }
+
+        section {
+            position: relative;
+            border: 0;
+            top: auto;
+            bottom: auto;
+            left: auto;
+            right: auto;
+            background: transparent;
+        }
+    }
+}
+
+.oe_website_sale .row .row .col-md-12 {
+    float: none;
+}
 /* product detail */
 
-.css_attribute_color
-    display: inline-block
-    border: 1px solid #999999
-    text-align: center
-    input
-        margin: 8px
-        height: 13px
-        opacity: 0
-    &.active
-        border: 3px ridge #66ee66
-    &.active input
-        margin: 6px
-
-.css_not_available_msg
-    display: none
-.css_not_available.js_product
-    > *:nth-child(4) > *
-        display: none
-    .product_price, .css_quantity
-        display: none
-    .css_not_available_msg
-        display: block
-
-.css_quantity
-    max-width: 125px
-    input[name="add_qty"]
-        text-align: center
-
-option.css_not_available
-    color: #ccc
-label.css_not_available
-    opacity: 0.6
-label.css_attribute_color.css_not_available
-    opacity: 1
-    background-image: url('/website_sale/static/src/img/redcross.png')
-    background-size: cover
-
-.product_detail_img
-    margin-left: auto
-    margin-right: auto
-    display: block
-    max-height: 500px
-
-.oe_default_price
-    display: none
-.discount .oe_default_price
-    display: block
-
-.oe_website_sale input.js_quantity
-    min-width: 48px
-    text-align: center
-
-.oe_website_sale input.quantity
-    padding: 0
-
+.css_attribute_color {
+    display: inline-block;
+    border: 1px solid #999999;
+    text-align: center;
+
+    input {
+        margin: 8px;
+        height: 13px;
+        opacity: 0;
+    }
+
+    &.active {
+        border: 3px ridge #66ee66;
+    }
+
+    &.active input {
+        margin: 6px;
+    }
+}
+
+.css_not_available_msg {
+    display: none;
+}
+
+.css_not_available.js_product {
+    > *:nth-child(4) > * {
+        display: none;
+    }
+
+    .css_quantity,
+    .product_price {
+        display: none;
+    }
+
+    .css_not_available_msg {
+        display: block;
+    }
+}
+
+.css_quantity {
+    max-width: 125px;
+
+    input[name="add_qty"] {
+        text-align: center;
+    }
+}
+
+option.css_not_available {
+    color: #ccc;
+}
+
+label.css_not_available {
+    opacity: 0.6;
+}
+
+label.css_attribute_color.css_not_available {
+    opacity: 1;
+    background-image: url("/website_sale/static/src/img/redcross.png");
+    background-size: cover;
+}
+
+.product_detail_img {
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+    max-height: 500px;
+}
+
+.oe_default_price {
+    display: none;
+}
+
+.discount .oe_default_price {
+    display: block;
+}
+
+.oe_website_sale input.js_quantity {
+    min-width: 48px;
+    text-align: center;
+}
+
+.oe_website_sale input.quantity {
+    padding: 0;
+}
 /* ---- Publish managment and options ---- */
 
-.oe_overlay_options
-    .dropdown
-        ul[name="size"]
-            table
-                margin-left: 20px
-            td
-                margin: 0
-                padding: 0
-                width: 20px
-                height: 20px
-                border: 1px #dddddd solid
-                cursor: pointer
-                &.selected
-                    background-color: #B1D4F1
-            table.oe_hover td.selected
-                background-color: transparent
-            table.oe_hover td.select
-                background-color: #B1D4F1
-
+.oe_overlay_options {
+    .dropdown {
+        ul[name="size"] {
+            table {
+                margin-left: 20px;
+            }
+
+            td {
+                margin: 0;
+                padding: 0;
+                width: 20px;
+                height: 20px;
+                border: 1px #dddddd solid;
+                cursor: pointer;
+
+                &.selected {
+                    background-color: #B1D4F1;
+                }
+            }
+
+            table.oe_hover td.selected {
+                background-color: transparent;
+            }
+
+            table.oe_hover td.select {
+                background-color: #B1D4F1;
+            }
+        }
+    }
+}
 /* Wizard */
 
-
-ul.wizard
-    padding: 0
-    margin-top: 20px
-    list-style: none outside none
-    -webkit-border-radius: 4px
-    -moz-border-radius: 4px
-    border-radius: 4px
-    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065)
-    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065)
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065)
-
-    li
-        border: 1px solid #d4d4d4
-        border-right-width: 0
-        position: relative
-        float: left
-        padding: 0 10px 0 20px
-        margin: 0
-        line-height: 38px
-        background: #fbfbfb
-
-        .chevron
-            position: absolute
-            top: 0
-            right: -10px
-            z-index: 1
-            display: block
-            border: 20px solid transparent
-            border-right: 0
-            border-left: 10px solid #d4d4d4
-
-        .chevron:before
-            position: absolute
-            top: -20px
-            right: 1px
-            display: block
-            border: 20px solid transparent
-            border-right: 0
-            border-left: 10px solid #fbfbfb
-            content: ""
-
-        .o_link_disable
-            text-decoration: none
-            color: inherit
-            cursor: text
-
-        &.text-success
-            background: #f3f4f5
-
-        &.text-success .chevron:before
-            border-left: 10px solid #f5f5f5
-
-        &.text-primary
-            background: #f1f6fc
-
-        &.text-primary .chevron:before
-            border-left: 10px solid #f1f6fc
-
-        &:first-child
-            padding-left: 15px
-            border-radius: 4px 0 0 4px
-
-        &:last-child
-            border-radius: 0 4px 4px 0
-            border-right-width: 1px
-            .chevron
-                display: none
-
+ul.wizard {
+    padding: 0;
+    margin-top: 20px;
+    list-style: none outside none;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065);
+    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065);
+
+    li {
+        border: 1px solid #d4d4d4;
+        border-right-width: 0;
+        position: relative;
+        float: left;
+        padding: 0 10px 0 20px;
+        margin: 0;
+        line-height: 38px;
+        background: #fbfbfb;
+
+        .chevron {
+            position: absolute;
+            top: 0;
+            right: -10px;
+            z-index: 1;
+            display: block;
+            border: 20px solid transparent;
+            border-right: 0;
+            border-left: 10px solid #d4d4d4;
+        }
+
+        .chevron:before {
+            position: absolute;
+            top: -20px;
+            right: 1px;
+            display: block;
+            border: 20px solid transparent;
+            border-right: 0;
+            border-left: 10px solid #fbfbfb;
+            content: "";
+        }
+
+        .o_link_disable {
+            text-decoration: none;
+            color: inherit;
+            cursor: text;
+        }
+
+        &.text-success {
+            background: #f3f4f5;
+        }
+
+        &.text-success .chevron:before {
+            border-left: 10px solid #f5f5f5;
+        }
+
+        &.text-primary {
+            background: #f1f6fc;
+        }
+
+        &.text-primary .chevron:before {
+            border-left: 10px solid #f1f6fc;
+        }
+
+        &:first-child {
+            padding-left: 15px;
+            border-radius: 4px 0 0 4px;
+        }
+
+        &:last-child {
+            border-radius: 0 4px 4px 0;
+            border-right-width: 1px;
+
+            .chevron {
+                display: none;
+            }
+        }
+    }
+}
 /* Collapse category */
-#o_shop_collapse_category li
-    a
-        display: inline-block
-        width: 80%
-        padding-left: 3px
-
-    i.fa
-        cursor: pointer
-
-.mycart-popover
-    max-width: 500px
-    min-width: 250px
-
-    .cart_line
-        border-bottom: 1px #EEE solid
-
-td.noborder
-    border: none !important
-
-.border_primary
-    border: 1px solid #337ab7
-
-.js_change_shipping
-    cursor: pointer
-
-a.no-decoration
-    cursor: pointer
-    text-decoration: none !important
-
-
-#o-carousel-product
-    .carousel-inner div.item
-        height: 400px
-        img
-            max-height: 100%
-    .carousel-control
-        background-image: none !important
-
-    .carousel-indicators
-        background-color: transparent
-        margin: 10px 0 0
-        overflow-y: hidden
-        position: static
-        text-align: left
-        white-space: nowrap
-        width: 100%
-        height: 100px !important
-        text-align: center
-        list-style-position: inside
-
-        li
-            background-color: transparent !important
-            border-radius: 0
-            display: inline-block
-            margin: 0 !important
-            width: 54px !important
-            height: 54px !important
-            border: 0 !important
-            box-shadow: none !important
-
-            img
-                display: block
-                opacity: 0.5
-
-            &.active img
-                opacity: 1
-
-.ecom-zoomable img[data-zoom]
-    cursor: zoom-in
-
-
-.break-word
-    word-wrap: break-word
-
-#coupon_box form
-    max-width: 300px
-
-.font-weight-normal
-    font-weight: normal
-
-.o_website_sale_animate
-    opacity: 0.7
-    position: absolute
-    height: 150px
-    width: 150px
-    z-index: 1020
-
-.o_red_highlight
-    background: #db0700 !important
-    box-shadow: 0 0 0px 0px rgba(240,8,0,0.4)
-    transition: all 0.5s linear
-
-.o_shadow_animation
-    box-shadow: 0 0 5px 10px rgba(240,8,0,0.4)!important
+#o_shop_collapse_category li {
+    a {
+        display: inline-block;
+        width: 80%;
+        padding-left: 3px;
+    }
+
+    i.fa {
+        cursor: pointer;
+    }
+}
+
+.mycart-popover {
+    max-width: 500px;
+    min-width: 250px;
+
+    .cart_line {
+        border-bottom: 1px #EEE solid;
+    }
+}
+
+td.noborder {
+    border: none !important;
+}
+
+.border_primary {
+    border: 1px solid #337ab7;
+}
+
+.js_change_shipping {
+    cursor: pointer;
+}
+
+a.no-decoration {
+    cursor: pointer;
+    text-decoration: none !important;
+}
+
+#o-carousel-product {
+    .carousel-inner div.item {
+        height: 400px;
+
+        img {
+            max-height: 100%;
+        }
+    }
+
+    .carousel-control {
+        background-image: none !important;
+    }
+
+    .carousel-indicators {
+        background-color: transparent;
+        margin: 10px 0 0;
+        overflow-y: hidden;
+        position: static;
+        text-align: left;
+        white-space: nowrap;
+        width: 100%;
+        height: 100px !important;
+        text-align: center;
+        list-style-position: inside;
+
+        li {
+            background-color: transparent !important;
+            border-radius: 0;
+            display: inline-block;
+            margin: 0 !important;
+            width: 54px !important;
+            height: 54px !important;
+            border: 0 !important;
+            box-shadow: none !important;
+
+            img {
+                display: block;
+                opacity: 0.5;
+            }
+
+            &.active img {
+                opacity: 1;
+            }
+        }
+    }
+}
+
+.ecom-zoomable img[data-zoom] {
+    cursor: zoom-in;
+}
+
+.break-word {
+    word-wrap: break-word;
+}
+
+#coupon_box form {
+    max-width: 300px;
+}
+
+.font-weight-normal {
+    font-weight: normal;
+}
+
+.o_website_sale_animate {
+    opacity: 0.7;
+    position: absolute;
+    height: 150px;
+    width: 150px;
+    z-index: 1020;
+}
+
+.o_red_highlight {
+    background: #db0700 !important;
+    box-shadow: 0 0 0 0 rgba(240,8,0,0.4);
+    transition: all 0.5s linear;
+}
+
+.o_shadow_animation {
+    box-shadow: 0 0 5px 10px rgba(240,8,0,0.4)!important;
+}
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 0b643f7548a..1a13577b0bb 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -8,10 +8,12 @@
         </xpath>
     </template>
 
-    <template id="assets_frontend" inherit_id="website.assets_frontend" name="Shop">
-        <xpath expr="." position="inside">
-            <link rel="stylesheet" href="/website_sale/static/src/css/website_sale.css" />
-            <link rel="stylesheet" href="/website_sale/static/src/css/website_mail.css" />
+    <template id="assets_frontend" inherit_id="website.assets_frontend">
+        <xpath expr="link[last()]" position="after">
+            <link rel="stylesheet" type="text/less" href="/website_sale/static/src/less/website_sale.less" />
+            <link rel="stylesheet" type="text/less" href="/website_sale/static/src/less/website_mail.less" />
+        </xpath>
+        <xpath expr="script[last()]" position="after">
             <script type="text/javascript" src="/website_sale/static/src/js/website_sale.js"></script>
             <script type="text/javascript" src="/website_sale/static/src/js/website_sale_utils.js"></script>
             <script type="text/javascript" src="/website_sale/static/src/js/website_sale_payment.js"></script>
diff --git a/addons/website_sale_options/static/src/css/website_sale.css b/addons/website_sale_options/static/src/css/website_sale.css
deleted file mode 100644
index dd1717d2897..00000000000
--- a/addons/website_sale_options/static/src/css/website_sale.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.css_not_available.js_product > *:nth-child(5) > * {
-  display: none;
-}
-
-table.js_cart_lines .optional_product .js_delete_product {
-  display: none;
-}
-
-div#modal_optional_products table tr td {
-  border: 0px;
-}
-
-@media (max-width: 767px) {
-  div#modal_optional_products .td-qty {
-    display: none;
-  }
-}
-
-.oe_striked_price {
-    text-decoration: line-through;
-    white-space: nowrap;
-}
diff --git a/addons/website_sale_options/static/src/less/website_sale.less b/addons/website_sale_options/static/src/less/website_sale.less
index 7dad69368c3..18da68c5440 100644
--- a/addons/website_sale_options/static/src/less/website_sale.less
+++ b/addons/website_sale_options/static/src/less/website_sale.less
@@ -1,13 +1,24 @@
-.css_not_available.js_product
-    > *:nth-child(5) > *
-        display: none
+.css_not_available.js_product {
+    > *:nth-child(5) > * {
+        display: none;
+    }
+}
 
-table.js_cart_lines .optional_product .js_delete_product
-    display: none
+table.js_cart_lines .optional_product .js_delete_product {
+    display: none;
+}
 
-div#modal_optional_products table tr td
-    border: 0px
+div#modal_optional_products table tr td {
+    border: 0;
+}
 
-@media (max-width: 767px)
-    div#modal_optional_products .td-qty
-        display: none
+@media (max-width: @screen-xs-max) {
+    div#modal_optional_products .td-qty {
+        display: none;
+    }
+}
+
+.oe_striked_price {
+    text-decoration: line-through;
+    white-space: nowrap;
+}
diff --git a/addons/website_sale_options/views/website_sale_options_templates.xml b/addons/website_sale_options/views/website_sale_options_templates.xml
index e19b6895156..fdbd0efc349 100644
--- a/addons/website_sale_options/views/website_sale_options_templates.xml
+++ b/addons/website_sale_options/views/website_sale_options_templates.xml
@@ -1,12 +1,14 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
-<template id="assets_frontend" inherit_id="website.assets_frontend" name="Shop Product Options">
-  <xpath expr="." position="inside">
-      <script type="text/javascript" src="/website_sale_options/static/src/js/website_sale.test.js"></script>
-      <script type="text/javascript" src="/website_sale_options/static/src/js/website_sale.js"></script>
-      <link rel='stylesheet' href='/website_sale_options/static/src/css/website_sale.css'/>
-  </xpath>
+<template id="assets_frontend" inherit_id="website.assets_frontend">
+    <xpath expr="script[last()]" position="after">
+        <script type="text/javascript" src="/website_sale_options/static/src/js/website_sale.test.js"></script>
+        <script type="text/javascript" src="/website_sale_options/static/src/js/website_sale.js"></script>
+    </xpath>
+    <xpath expr="link[last()]" position="after">
+        <link rel="stylesheet" type="text/less" href="/website_sale_options/static/src/less/website_sale.less"/>
+    </xpath>
 </template>
 
 <template id="optional_products" inherit_id="website_sale.cart_lines" name="Optional products">