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

   1 @charset "utf-8"
   2
   3 /* ---- Default Styles ---- */
   4
   5 .oe_product
   6     border: 1px solid rgba(100,100,100,0.2)
   7
   8 .oe_product_description
   9     background: rgba(255,255, 255, 0.8)
  10     padding: 5px 0 5px 0
  11     z-index: 5
  12
  13 .oe_subdescription
  14     line-height: 1.2
  15     margin-bottom: 4px
  16
  17 .oe_product_image
  18     position: absolute
  19     img
  20         max-width: 100%
  21         max-height: 100%
  22         margin: auto
  23         position: absolute
  24         top: 0
  25         left: 0
  26         bottom: 0
  27         right: 0
  28         z-index: 4
  29
  30 .oe_product
  31     .oe_product_cart
  32         position: relative
  33         width: 100%
  34         height: 100%
  35
  36 /* ---- Default Styles Description ---- */
  37
  38 .oe_product
  39     .oe_product_image
  40         position: absolute
  41         left: 15px
  42         right: 15px
  43         top: 15px
  44         bottom: 50px
  45
  46 .oe_product_description
  47     bottom: 0
  48     position: absolute
  49     left: 15px
  50     right: 15px
  51     border-top: 1px solid #dddddd
  52
  53 .oe_mycart
  54     .input-group-addon
  55         padding-left: 6px
  56         padding-right: 6px
  57
  58
  59 .oe_shop_top /* Option 1 */
  60     .oe_product_description
  61         top: 0
  62         bottom: auto
  63         border-top-style: none
  64     .oe_product_image
  65         top: 15px
  66         bottom: 50px
  67
  68 .oe_shop_center /* Option 2 */
  69     .oe_product_description
  70         text-align: center
  71         border-top-style: none
  72
  73 /* Products Options */
  74
  75 .oe_product.oe_image_full
  76     .oe_product_image
  77         left: 0
  78         right: 0
  79         top: 0
  80         bottom: 0
  81
  82 /* ---- Grid Style ---- */
  83
  84 .style1
  85     .oe_product .oe_product_image
  86         position: absolute
  87         left: 0
  88         right: 0
  89         top: 0
  90         bottom: 0
  91
  92 /* ---- Product Sizes ---- */
  93 .col-md-12
  94     .oe-height-1
  95         height: 75px
  96     .oe-height-2
  97         height: 150px
  98     .oe-height-4
  99         height: 300px
 100     .oe-height-6
 101         height: 450px
 102     .oe-height-8
 103         height: 600px
 104 .col-md-9
 105     .oe-height-1
 106         height: 70px
 107     .oe-height-2
 108         height: 140px
 109     .oe-height-4
 110         height: 280px
 111     .oe-height-6
 112         height: 420px
 113     .oe-height-8
 114         height: 560px
 115
 116 @media (max-width: 728px)
 117     .oe_product
 118         float: left
 119         width: 100%
 120         height: 200px
 121         display: inline-block
 122     #products_grid
 123         table, tbody,tr, td
 124             float: left
 125             width: 100%
 126             display: inline-block
 127         table td.oe-height-2
 128             display: none
 129
 130 @media (min-width: 992px)
 131     .col-md-12
 132         .oe-height-1
 133             height: 95px
 134         .oe-height-2
 135             height: 190px
 136         .oe-height-4
 137             height: 380px
 138         .oe-height-6
 139             height: 570px
 140         .oe-height-8
 141             height: 760px
 142     .col-md-9
 143         .oe-height-1
 144             height: 72px
 145         .oe-height-2
 146             height: 144px
 147         .oe-height-4
 148             height: 288px
 149         .oe-height-6
 150             height: 432px
 151         .oe-height-8
 152             height: 576px
 153
 154 @media (min-width: 1200px)
 155     .col-md-12
 156         .oe-height-1
 157             height: 125px
 158         .oe-height-2
 159             height: 250px
 160         .oe-height-4
 161             height: 500px
 162         .oe-height-6
 163             height: 750px
 164         .oe-height-8
 165             height: 1000px
 166     .col-md-9
 167         .oe-height-1
 168             height: 95px
 169         .oe-height-2
 170             height: 190px
 171         .oe-height-4
 172             height: 380px
 173         .oe-height-6
 174             height: 570px
 175         .oe-height-8
 176             height: 760px
 177
 178 /* ---- Product list style ---- */
 179 .oe_list_products
 180     border: none
 181     border-bottom: 1px solid rgba(100, 100, 100, 0.2)
 182     width: 100%
 183     min-height: 140px
 184     .oe_product_image
 185         position: absolute
 186         left: 15px
 187         right: 15px
 188         top: 0
 189         bottom: 0
 190         width: 150px
 191     .oe_product_description
 192         bottom: auto
 193         position: absolute
 194         left: 180px
 195         right: 0
 196         border-top: none
 197         top: 15px
 198
 199 .oe_website_sale .row .row .col-md-12
 200     float: none
 201
 202
 203 /* ---- Publish managment and options ---- */
 204 #products_grid .css_options
 205     display: none
 206     position: absolute
 207     top: -6px
 208     left: 50%
 209     z-index: 10
 210     .dropdown
 211         position: relative
 212         left: -50%
 213         [name="size"]
 214             table
 215                 margin-left: 20px
 216             td
 217                 margin: 0
 218                 padding: 0
 219                 width: 20px
 220                 height: 20px
 221                 border: 1px #dddddd solid
 222                 cursor: pointer
 223                 &.selected
 224                     background-color: #B1D4F1
 225             table.oe_hover td.selected
 226                 background-color: transparent
 227             table.oe_hover td.select
 228                 background-color: #B1D4F1
 229
 230 .cke_editable
 231     #products_grid .oe_product_cart:hover > .css_options
 232         display: block
 233
 234 /* Ribbon for promotionso on products */
 235
 236 .oe_ribbon_promo
 237     .ribbon-wrapper
 238         display: block
 239
 240 .ribbon-wrapper
 241     display: none
 242     width: 85px
 243     height: 88px
 244     z-index: 5
 245     overflow: hidden
 246     position: absolute
 247     top: 0
 248     right: 0
 249
 250 .ribbon
 251     font: bold 15px Sans-Serif
 252     color: white
 253     text-align: center
 254     text-shadow: rgba(0,0,0,0.5) 0px 1px 0px
 255     -webkit-transform: rotate(45deg)
 256     -moz-transform:    rotate(45deg)
 257     -ms-transform:     rotate(45deg)
 258     -o-transform:      rotate(45deg)
 259     position: relative
 260     padding: 7px 0
 261     left: -5px
 262     top: 15px
 263     width: 120px
 264     background-color: #a00
 265     background-image: -webkit-gradient(linear, left top, left bottom, from(#800), to(#a00))
 266     background-image: -webkit-linear-gradient(top, #800, #a00)
 267     background-image:    -moz-linear-gradient(top, #800, #a00)
 268     background-image:     -ms-linear-gradient(top, #800, #a00)
 269     background-image:      -o-linear-gradient(top, #800, #a00)
 270     -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3)
 271     -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3)
 272     box-shadow:         0px 0px 3px rgba(0,0,0,0.3)
 273
 274
 275 /* Wizard */
 276
 277
 278 ul.wizard
 279     padding: 0
 280     margin-top: 20px
 281     list-style: none outside none
 282     border: 1px solid #d4d4d4
 283     -webkit-border-radius: 4px
 284     -moz-border-radius: 4px
 285     border-radius: 4px
 286     -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065)
 287     -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065)
 288     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065)
 289
 290 ul.wizard li
 291     position: relative
 292     float: left
 293     padding: 0 10px 0 20px
 294     margin: 0
 295     line-height: 38px
 296     background: #fbfbfb
 297
 298 ul.wizard li .chevron
 299     position: absolute
 300     top: 0
 301     right: -10px
 302     z-index: 1
 303     display: block
 304     border: 20px solid transparent
 305     border-right: 0
 306     border-left: 10px solid #d4d4d4
 307
 308 ul.wizard li .chevron:before
 309     position: absolute
 310     top: -20px
 311     right: 1px
 312     display: block
 313     border: 20px solid transparent
 314     border-right: 0
 315     border-left: 10px solid #fbfbfb
 316     content: ""
 317
 318 ul.wizard li.text-success
 319     background: #f3f4f5
 320
 321 ul.wizard li.text-success .chevron:before
 322     border-left: 10px solid #f5f5f5
 323
 324 ul.wizard li.text-primary
 325     background: #f1f6fc
 326
 327 ul.wizard li.text-primary .chevron:before
 328     border-left: 10px solid #f1f6fc
 329
 330 ul.wizard li:first-child
 331     padding-left: 15px
 332     border-radius: 4px 0 0 4px
 333