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 15px
  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 #products_grid .css_options
 293     display: none
 294     position: absolute
 295     top: -6px
 296     left: 50%
 297     z-index: 10
 298     .dropdown
 299         position: relative
 300         left: -50%
 301         [name="size"]
 302             table
 303                 margin-left: 20px
 304             td
 305                 margin: 0
 306                 padding: 0
 307                 width: 20px
 308                 height: 20px
 309                 border: 1px #dddddd solid
 310                 cursor: pointer
 311                 &.selected
 312                     background-color: #B1D4F1
 313             table.oe_hover td.selected
 314                 background-color: transparent
 315             table.oe_hover td.select
 316                 background-color: #B1D4F1
 317
 318 .cke_editable
 319     #products_grid .oe_product_cart:hover > .css_options
 320         display: block
 321
 322 /* Wizard */
 323
 324
 325 ul.wizard
 326     padding: 0
 327     margin-top: 20px
 328     list-style: none outside none
 329     -webkit-border-radius: 4px
 330     -moz-border-radius: 4px
 331     border-radius: 4px
 332     -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065)
 333     -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065)
 334     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065)
 335
 336 ul.wizard li
 337     border: 1px solid #d4d4d4
 338     border-right-width: 0
 339     position: relative
 340     float: left
 341     padding: 0 10px 0 20px
 342     margin: 0
 343     line-height: 38px
 344     background: #fbfbfb
 345
 346 ul.wizard li .chevron
 347     position: absolute
 348     top: 0
 349     right: -10px
 350     z-index: 1
 351     display: block
 352     border: 20px solid transparent
 353     border-right: 0
 354     border-left: 10px solid #d4d4d4
 355
 356 ul.wizard li .chevron:before
 357     position: absolute
 358     top: -20px
 359     right: 1px
 360     display: block
 361     border: 20px solid transparent
 362     border-right: 0
 363     border-left: 10px solid #fbfbfb
 364     content: ""
 365
 366 ul.wizard li.text-success
 367     background: #f3f4f5
 368
 369 ul.wizard li.text-success .chevron:before
 370     border-left: 10px solid #f5f5f5
 371
 372 ul.wizard li.text-primary
 373     background: #f1f6fc
 374
 375 ul.wizard li.text-primary .chevron:before
 376     border-left: 10px solid #f1f6fc
 377
 378 ul.wizard li:first-child
 379     padding-left: 15px
 380     border-radius: 4px 0 0 4px