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

   1 @charset "utf-8"
   2
   3 /* ---- Default Styles Description ---- */
   4
   5 .oe_product_image
   6     position: absolute
   7     img
   8         max-width: 100%
   9         max-height: 100%
  10         margin: auto
  11         position: absolute
  12         top: 0
  13         left: 0
  14         bottom: 0
  15         right: 0
  16
  17 .oe_product
  18     .oe_product_image
  19         position: absolute
  20         left: 15px
  21         right: 15px
  22         top: 15px
  23         bottom: 50px
  24
  25 .oe_product_description
  26     bottom: 0
  27     position: absolute
  28     left: 15px
  29     right: 15px
  30     border-top: 1px solid #dddddd
  31
  32
  33 .oe_shop_top /* Option 1 */
  34     .oe_product_description
  35         top: 0
  36         bottom: auto
  37         border-top-style: none
  38     .oe_product_image
  39         top: 15px
  40         bottom: 50px
  41
  42 .oe_shop_center /* Option 2 */
  43     .oe_product_description
  44         text-align: center
  45         border-top-style: none
  46
  47 /* Products Options */
  48
  49 .oe_product.oe_image_full
  50     .oe_product_image
  51         left: 0
  52         right: 0
  53         top: 0
  54         bottom: 0
  55
  56 /* ---- Default Styles ---- */
  57
  58 .oe_product
  59     border: 1px solid rgba(100,100,100,0.2)
  60
  61 .oe_product .oe_product_image img
  62     max-width: 100%
  63     max-height: 100%
  64     z-index: 4
  65
  66 .oe_product_description
  67     background: rgba(255,255, 255, 0.8)
  68     padding: 5px 0 5px 0
  69     z-index: 5
  70
  71 .oe_subdescription
  72     line-height: 1.2
  73     margin-bottom: 4px
  74
  75
  76 /* ---- Grid Style ---- */
  77
  78 .style1
  79     .oe_product .oe_product_image
  80         position: absolute
  81         left: 0
  82         right: 0
  83         top: 0
  84         bottom: 0
  85
  86 /* ---- Product Sizes ---- */
  87 .col-md-12
  88     .oe-height-1
  89         height: 75px
  90     .oe-height-2
  91         height: 150px
  92     .oe-height-3
  93         height: 225px
  94     .oe-height-4
  95         height: 300px
  96 .col-md-9
  97     .oe-height-1
  98         height: 70px
  99     .oe-height-2
 100         height: 140px
 101     .oe-height-3
 102         height: 210px
 103     .oe-height-4
 104         height: 280px
 105
 106 @media (max-width: 728px)
 107     .oe_product
 108         float: left
 109         width: 100%
 110         height: 200px
 111         display: inline-block
 112     #products_grid
 113         table, tbody,tr, td
 114             float: left
 115             width: 100%
 116             display: inline-block
 117         table td.oe-height-2
 118             display: none
 119
 120 @media (min-width: 992px)
 121     .col-md-12
 122         .oe-height-1
 123             height: 95px
 124         .oe-height-2
 125             height: 190px
 126         .oe-height-3
 127             height: 285px
 128         .oe-height-4
 129             height: 380px
 130     .col-md-9
 131         .oe-height-1
 132             height: 72px
 133         .oe-height-2
 134             height: 144px
 135         .oe-height-3
 136             height: 216px
 137         .oe-height-4
 138             height: 288px
 139
 140 @media (min-width: 1200px)
 141     .col-md-12
 142         .oe-height-1
 143             height: 125px
 144         .oe-height-2
 145             height: 250px
 146         .oe-height-3
 147             height: 375px
 148         .oe-height-4
 149             height: 499.9px
 150     .col-md-9
 151         .oe-height-1
 152             height: 95px
 153         .oe-height-2
 154             height: 190px
 155         .oe-height-3
 156             height: 285px
 157         .oe-height-4
 158             height: 380px
 159
 160 /* ---- Product list style ---- */
 161 .oe_list_products
 162     border: none
 163     border-bottom: 1px solid rgba(100, 100, 100, 0.2)
 164     width: 100%
 165     min-height: 140px
 166     .oe_product_image
 167         position: absolute
 168         left: 15px
 169         right: 15px
 170         top: 0
 171         bottom: 0
 172         width: 150px
 173     .oe_product_description
 174         bottom: auto
 175         position: absolute
 176         left: 180px
 177         right: 0
 178         border-top: none
 179         top: 15px
 180
 181 .oe_website_sale .row .row .col-md-12
 182     float: none
 183
 184
 185 /* ---- Publish managment and options ---- */
 186 #products_grid .css_options
 187     display: none
 188     position: absolute
 189     top: -6px
 190     left: 50%
 191     z-index: 10
 192     .dropdown
 193         position: relative
 194         left: -50%
 195         [name="size"]
 196             table
 197                 margin-left: 20px
 198             td
 199                 margin: 0
 200                 padding: 0
 201                 width: 20px
 202                 height: 20px
 203                 border: 1px #dddddd solid
 204                 cursor: pointer
 205                 &.selected, &.select
 206                     background-color: #B1D4F1
 207             table.oe_hover td.selected:not(.select)
 208                 background-color: transparent
 209
 210 .cke_editable
 211     #products_grid td:hover > .css_options
 212         display: block
 213
 214 /* Ribbon for promotionso on products */
 215
 216 .oe_ribbon_promo
 217     .ribbon-wrapper
 218         display: block
 219
 220 .ribbon-wrapper
 221     display: none
 222     width: 85px
 223     height: 88px
 224     z-index: 5
 225     overflow: hidden
 226     position: absolute
 227     top: 0
 228     right: 0
 229
 230 .ribbon
 231     font: bold 15px Sans-Serif
 232     color: white
 233     text-align: center
 234     text-shadow: rgba(0,0,0,0.5) 0px 1px 0px
 235     -webkit-transform: rotate(45deg)
 236     -moz-transform:    rotate(45deg)
 237     -ms-transform:     rotate(45deg)
 238     -o-transform:      rotate(45deg)
 239     position: relative
 240     padding: 7px 0
 241     left: -5px
 242     top: 15px
 243     width: 120px
 244     background-color: #a00
 245     background-image: -webkit-gradient(linear, left top, left bottom, from(#800), to(#a00))
 246     background-image: -webkit-linear-gradient(top, #800, #a00)
 247     background-image:    -moz-linear-gradient(top, #800, #a00)
 248     background-image:     -ms-linear-gradient(top, #800, #a00)
 249     background-image:      -o-linear-gradient(top, #800, #a00)
 250     -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3)
 251     -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3)
 252     box-shadow:         0px 0px 3px rgba(0,0,0,0.3)