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 10px;
  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 .oe_website_sale input.js_quantity {
 345   min-width: 48px;
 346   text-align: center;
 347 }
 348
 349 /* ---- Publish managment and options ---- */
 350 #products_grid .css_options {
 351   display: none;
 352   position: absolute;
 353   top: -6px;
 354   left: 50%;
 355   z-index: 10;
 356 }
 357 #products_grid .css_options .dropdown {
 358   position: relative;
 359   left: -50%;
 360 }
 361 #products_grid .css_options .dropdown [name="size"] table {
 362   margin-left: 20px;
 363 }
 364 #products_grid .css_options .dropdown [name="size"] td {
 365   margin: 0;
 366   padding: 0;
 367   width: 20px;
 368   height: 20px;
 369   border: 1px #dddddd solid;
 370   cursor: pointer;
 371 }
 372 #products_grid .css_options .dropdown [name="size"] td.selected {
 373   background-color: #b1d4f1;
 374 }
 375 #products_grid .css_options .dropdown [name="size"] table.oe_hover td.selected {
 376   background-color: transparent;
 377 }
 378 #products_grid .css_options .dropdown [name="size"] table.oe_hover td.select {
 379   background-color: #b1d4f1;
 380 }
 381
 382 .cke_editable #products_grid .oe_product_cart:hover > .css_options {
 383   display: block;
 384 }
 385
 386 /* Wizard */
 387 ul.wizard {
 388   padding: 0;
 389   margin-top: 20px;
 390   list-style: none outside none;
 391   -webkit-border-radius: 4px;
 392   -moz-border-radius: 4px;
 393   border-radius: 4px;
 394   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065);
 395   -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065);
 396   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065);
 397 }
 398
 399 ul.wizard li {
 400   border: 1px solid #d4d4d4;
 401   border-right-width: 0;
 402   position: relative;
 403   float: left;
 404   padding: 0 10px 0 20px;
 405   margin: 0;
 406   line-height: 38px;
 407   background: #fbfbfb;
 408 }
 409
 410 ul.wizard li .chevron {
 411   position: absolute;
 412   top: 0;
 413   right: -10px;
 414   z-index: 1;
 415   display: block;
 416   border: 20px solid transparent;
 417   border-right: 0;
 418   border-left: 10px solid #d4d4d4;
 419 }
 420
 421 ul.wizard li .chevron:before {
 422   position: absolute;
 423   top: -20px;
 424   right: 1px;
 425   display: block;
 426   border: 20px solid transparent;
 427   border-right: 0;
 428   border-left: 10px solid #fbfbfb;
 429   content: "";
 430 }
 431
 432 ul.wizard li.text-success {
 433   background: #f3f4f5;
 434 }
 435
 436 ul.wizard li.text-success .chevron:before {
 437   border-left: 10px solid whitesmoke;
 438 }
 439
 440 ul.wizard li.text-primary {
 441   background: #f1f6fc;
 442 }
 443
 444 ul.wizard li.text-primary .chevron:before {
 445   border-left: 10px solid #f1f6fc;
 446 }
 447
 448 ul.wizard li:first-child {
 449   padding-left: 15px;
 450   border-radius: 4px 0 0 4px;
 451 }