odoo/addons/website_sale/static/src/css/website_sale.sass

@charset "utf-8"

/* ---- Default Styles Description ---- */

.oe_product_image
    position: absolute
    img
        max-width: 100%
        max-height: 100%
        margin: auto
        position: absolute
        top: 0
        left: 0
        bottom: 0
        right: 0

.oe_product
    .oe_product_image
        position: absolute
        left: 15px
        right: 15px
        top: 15px
        bottom: 50px

.oe_product_description
    bottom: 0
    position: absolute
    left: 15px
    right: 15px
    border-top: 1px solid #dddddd

.oe_mycart
    .input-group-addon
        padding-left: 6px
        padding-right: 6px


.oe_shop_top /* Option 1 */
    .oe_product_description
        top: 0
        bottom: auto
        border-top-style: none
    .oe_product_image
        top: 15px
        bottom: 50px

.oe_shop_center /* Option 2 */
    .oe_product_description
        text-align: center
        border-top-style: none

/* Products Options */

.oe_product.oe_image_full
    .oe_product_image
        left: 0
        right: 0
        top: 0
        bottom: 0

/* ---- Default Styles ---- */

.oe_product
    border: 1px solid rgba(100,100,100,0.2)
    
.oe_product .oe_product_image img
    max-width: 100%
    max-height: 100%
    z-index: 4

.oe_product_description
    background: rgba(255,255, 255, 0.8)
    padding: 5px 0 5px 0
    z-index: 5

.oe_subdescription
    line-height: 1.2
    margin-bottom: 4px


/* ---- Grid Style ---- */

.style1
    .oe_product .oe_product_image
        position: absolute
        left: 0
        right: 0
        top: 0
        bottom: 0

/* ---- Product Sizes ---- */
.col-md-12
    .oe-height-1
        height: 75px
    .oe-height-2
        height: 150px
    .oe-height-3
        height: 225px
    .oe-height-4
        height: 300px
.col-md-9
    .oe-height-1
        height: 70px
    .oe-height-2
        height: 140px
    .oe-height-3
        height: 210px
    .oe-height-4
        height: 280px

@media (max-width: 728px)
    .oe_product
        float: left
        width: 100%
        height: 200px
        display: inline-block
    #products_grid
        table, tbody,tr, td
            float: left
            width: 100%
            display: inline-block
        table td.oe-height-2
            display: none

@media (min-width: 992px)
    .col-md-12
        .oe-height-1
            height: 95px
        .oe-height-2
            height: 190px
        .oe-height-3
            height: 285px
        .oe-height-4
            height: 380px
    .col-md-9
        .oe-height-1
            height: 72px
        .oe-height-2
            height: 144px
        .oe-height-3
            height: 216px
        .oe-height-4
            height: 288px

@media (min-width: 1200px)
    .col-md-12
        .oe-height-1
            height: 125px
        .oe-height-2
            height: 250px
        .oe-height-3
            height: 375px
        .oe-height-4
            height: 499.9px
    .col-md-9
        .oe-height-1
            height: 95px
        .oe-height-2
            height: 190px
        .oe-height-3
            height: 285px
        .oe-height-4
            height: 380px

/* ---- Product list style ---- */
.oe_list_products
    border: none
    border-bottom: 1px solid rgba(100, 100, 100, 0.2)
    width: 100%
    min-height: 140px
    .oe_product_image
        position: absolute
        left: 15px
        right: 15px
        top: 0
        bottom: 0
        width: 150px
    .oe_product_description
        bottom: auto
        position: absolute
        left: 180px
        right: 0
        border-top: none
        top: 15px

.oe_website_sale .row .row .col-md-12
    float: none


/* ---- Publish managment and options ---- */
#products_grid .css_options
    display: none
    position: absolute
    top: -6px
    left: 50%
    z-index: 10
    .dropdown
        position: relative
        left: -50%
        [name="size"]
            table
                margin-left: 20px
            td
                margin: 0
                padding: 0
                width: 20px
                height: 20px
                border: 1px #dddddd solid
                cursor: pointer
                &.selected, &.select
                    background-color: #B1D4F1
            table.oe_hover td.selected:not(.select)
                background-color: transparent

.cke_editable
    #products_grid td:hover > .css_options
        display: block

/* Ribbon for promotionso on products */

.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
    text-shadow: rgba(0,0,0,0.5) 0px 1px 0px
    -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
    background-color: #a00
    background-image: -webkit-gradient(linear, left top, left bottom, from(#800), to(#a00))
    background-image: -webkit-linear-gradient(top, #800, #a00)
    background-image:    -moz-linear-gradient(top, #800, #a00)
    background-image:     -ms-linear-gradient(top, #800, #a00)
    background-image:      -o-linear-gradient(top, #800, #a00)
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3)
    -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3)
    box-shadow:         0px 0px 3px rgba(0,0,0,0.3)


/* Wizard */


ul.wizard
    padding: 0
    margin-top: 20px
    list-style: none outside none
    border: 1px solid #d4d4d4
    -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 
    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.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