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

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