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 .products_pager
   9     text-align: center
  10     > div
  11         margin: 0 auto
  12         display: inline-block
  13         > *
  14             vertical-align: middle
  15             float: none
  16             padding: 0
  17         > ul
  18             padding-left: 10px
  19     > ul
  20         margin-left: auto
  21         margin-right: auto
  22
  23 /* ---- Default Styles ---- */
  24
  25 .oe_product
  26     position: relative
  27     .oe_product_image
  28         position: absolute
  29         left: 15px
  30         right: 15px
  31         top: 15px
  32         bottom: 55px
  33         text-align: center
  34         img
  35             max-width: 100%
  36             max-height: 100%
  37             margin: auto
  38             position: absolute
  39             top: 0
  40             left: 0
  41             bottom: 0
  42             right: 0
  43             z-index: 4
  44     section
  45         position: absolute
  46         left: 0
  47         right: 0
  48         bottom: 0
  49         overflow: hidden
  50         padding: 0 15px 24px 10px
  51         min-height: 56px
  52         border-top: 1px solid rgba(255,255,255,0.2)
  53         background: rgba(255, 255, 255, 0.75)
  54         z-index: 5
  55     .product_price
  56         padding: 5px 0
  57         position: absolute
  58         bottom: 0
  59     .oe_product_cart
  60         position: relative
  61         width: 100%
  62         height: 100%
  63     .oe_subdescription
  64         font-size: 0.8em
  65         overflow: hidden
  66         margin-bottom: 10px
  67
  68 .oe_mycart
  69     .input-group-addon
  70         padding-left: 6px
  71         padding-right: 6px
  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 /* Ribbon for promotionso on products */
  83
  84 .oe_product
  85     &.oe_ribbon_promo
  86         .ribbon-wrapper
  87             display: block
  88
  89     .ribbon-wrapper
  90         display: none
  91         width: 85px
  92         height: 88px
  93         z-index: 5
  94         overflow: hidden
  95         position: absolute
  96         top: 0
  97         right: 0
  98
  99     .ribbon
 100         font: bold 15px Sans-Serif
 101         color: white
 102         text-align: center
 103         -webkit-transform: rotate(45deg)
 104         -moz-transform:    rotate(45deg)
 105         -ms-transform:     rotate(45deg)
 106         -o-transform:      rotate(45deg)
 107         position: relative
 108         padding: 7px 0
 109         left: -5px
 110         top: 15px
 111         width: 120px
 112         cursor: default
 113
 114
 115 /* ---- Product Sizes ---- */
 116
 117 .col-md-12
 118     .oe-height-1
 119         height: 75px
 120     .oe-height-2
 121         height: 150px
 122     .oe-height-4
 123         height: 300px
 124     .oe-height-6
 125         height: 450px
 126     .oe-height-8
 127         height: 600px
 128 .col-md-9
 129     .oe-height-1
 130         height: 70px
 131     .oe-height-2
 132         height: 140px
 133     .oe-height-4
 134         height: 280px
 135     .oe-height-6
 136         height: 420px
 137     .oe-height-8
 138         height: 560px
 139
 140 @media (max-width: 768px)
 141     #products_grid
 142         table, tbody,tr, td
 143             float: left
 144             width: 100%
 145             display: inline-block
 146         .oe_product
 147             float: left
 148             width: 100%
 149             height: 300px
 150             display: inline-block
 151     .products_pager
 152         .pagination
 153             margin: 5px auto !important
 154
 155 @media (max-width: 400px)
 156     #products_grid
 157         .oe_product
 158             height: 270px
 159             section
 160                 background: rgba(100, 100, 100, 0.2)
 161             .oe_product_image
 162                 top: 0
 163                 bottom: 65px
 164     #products_grid
 165         .oe_product.oe_image_full
 166             .oe_product_image
 167                 bottom: 50px
 168
 169
 170 @media (min-width: 992px)
 171     .col-md-12
 172         .oe-height-1
 173             height: 95px
 174         .oe-height-2
 175             height: 190px
 176         .oe-height-4
 177             height: 380px
 178         .oe-height-6
 179             height: 570px
 180         .oe-height-8
 181             height: 760px
 182     .col-md-9
 183         .oe-height-1
 184             height: 72px
 185         .oe-height-2
 186             height: 144px
 187         .oe-height-4
 188             height: 288px
 189         .oe-height-6
 190             height: 432px
 191         .oe-height-8
 192             height: 576px
 193
 194 @media (min-width: 1200px)
 195     .col-md-12
 196         .oe-height-1
 197             height: 125px
 198         .oe-height-2
 199             height: 250px
 200         .oe-height-4
 201             height: 500px
 202         .oe-height-6
 203             height: 750px
 204         .oe-height-8
 205             height: 1000px
 206     .col-md-9
 207         .oe-height-1
 208             height: 95px
 209         .oe-height-2
 210             height: 190px
 211         .oe-height-4
 212             height: 380px
 213         .oe-height-6
 214             height: 570px
 215         .oe-height-8
 216             height: 760px
 217
 218 /* ---- Product list style ---- */
 219
 220 @media (min-width: 400px)
 221     .oe_product.oe_list
 222         border: none
 223         border-bottom: 1px solid rgba(100, 100, 100, 0.2)
 224         width: 100%
 225         min-height: 100px
 226         position: relative
 227         padding-bottom: 5px
 228         .oe_product_image
 229             top: 0
 230             bottom: 0
 231             left: 0
 232             right: 0
 233             width: 170px
 234         section
 235             position: relative
 236             border: 0
 237             top: 0
 238             bottom: auto
 239             left: 180px
 240             background: transparent
 241
 242 .oe_website_sale .row .row .col-md-12
 243     float: none
 244
 245 /* product detail */
 246
 247 .css_attribute_color
 248     display: inline-block
 249     border: 1px solid #999999
 250     text-align: center
 251     input
 252         margin: 8px
 253         height: 13px
 254         opacity: 0
 255     &.active
 256         border: 3px ridge #66ee66
 257     &.active input
 258         margin: 6px
 259
 260 .css_not_available_msg
 261     display: none
 262 .css_not_available.js_product
 263     > *:nth-child(4) > *
 264         display: none
 265     .product_price, .css_quantity
 266         display: none
 267     .css_not_available_msg
 268         display: block
 269
 270 option.css_not_available
 271     color: #ccc
 272 label.css_not_available
 273     opacity: 0.6
 274 label.css_attribute_color.css_not_available
 275     opacity: 1
 276     background-image: url('/website_sale/static/src/img/redcross.png')
 277     background-size: cover
 278
 279 .product_detail_img
 280     margin-left: auto
 281     margin-right: auto
 282     display: block
 283     max-height: 500px
 284
 285 .oe_default_price
 286     display: none
 287 .discount .oe_default_price
 288     display: block
 289
 290 /* ---- Publish managment and options ---- */
 291
 292 .oe_overlay_options
 293     .dropdown
 294         ul[name="size"]
 295             table
 296                 margin-left: 20px
 297             td
 298                 margin: 0
 299                 padding: 0
 300                 width: 20px
 301                 height: 20px
 302                 border: 1px #dddddd solid
 303                 cursor: pointer
 304                 &.selected
 305                     background-color: #B1D4F1
 306             table.oe_hover td.selected
 307                 background-color: transparent
 308             table.oe_hover td.select
 309                 background-color: #B1D4F1
 310
 311 /* Wizard */
 312
 313
 314 ul.wizard
 315     padding: 0
 316     margin-top: 20px
 317     list-style: none outside none
 318     -webkit-border-radius: 4px
 319     -moz-border-radius: 4px
 320     border-radius: 4px
 321     -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065)
 322     -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065)
 323     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065)
 324
 325 ul.wizard li
 326     border: 1px solid #d4d4d4
 327     border-right-width: 0
 328     position: relative
 329     float: left
 330     padding: 0 10px 0 20px
 331     margin: 0
 332     line-height: 38px
 333     background: #fbfbfb
 334
 335 ul.wizard li .chevron
 336     position: absolute
 337     top: 0
 338     right: -10px
 339     z-index: 1
 340     display: block
 341     border: 20px solid transparent
 342     border-right: 0
 343     border-left: 10px solid #d4d4d4
 344
 345 ul.wizard li .chevron:before
 346     position: absolute
 347     top: -20px
 348     right: 1px
 349     display: block
 350     border: 20px solid transparent
 351     border-right: 0
 352     border-left: 10px solid #fbfbfb
 353     content: ""
 354
 355 ul.wizard li.text-success
 356     background: #f3f4f5
 357
 358 ul.wizard li.text-success .chevron:before
 359     border-left: 10px solid #f5f5f5
 360
 361 ul.wizard li.text-primary
 362     background: #f1f6fc
 363
 364 ul.wizard li.text-primary .chevron:before
 365     border-left: 10px solid #f1f6fc
 366
 367 ul.wizard li:first-child
 368     padding-left: 15px
 369     border-radius: 4px 0 0 4px