addons/website/static/src/css/website.sass

   1 @charset "utf-8"
   2
   3 @import "common"
   4
   5 /*
   6  *       THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
   7  *
   8  * css for editor buttons, openerp widget included in the website and other
   9  * stuff must go to the editor.css
  10  *
  11  */
  12
  13 /* ----- GENERIC LAYOUTING HELPERS ---- */
  14
  15 /* Vertical Spacing */
  16 .mt128
  17     margin-top: 128px !important
  18 .mt92
  19     margin-top: 92px !important
  20 .mt64
  21     margin-top: 64px !important
  22 .mt48
  23     margin-top: 48px !important
  24 .mt32
  25     margin-top: 32px !important
  26 .mt16
  27     margin-top: 16px !important
  28 .mt8
  29     margin-top: 8px !important
  30 .mt4
  31     margin-top: 4px !important
  32 .mt0
  33     margin-top: 0px !important
  34
  35 .mb128
  36     margin-bottom: 128px !important
  37 .mb92
  38     margin-bottom: 92px !important
  39 .mb64
  40     margin-bottom: 64px !important
  41 .mb48
  42     margin-bottom: 48px !important
  43 .mb32
  44     margin-bottom: 32px !important
  45 .mb16
  46     margin-bottom: 16px !important
  47 .mb8
  48     margin-bottom: 8px !important
  49 .mb4
  50     margin-bottom: 4px !important
  51 .mb0
  52     margin-bottom: 0px !important
  53
  54 /* Extra Styles */
  55
  56 img.shadow
  57     +border-radius(3px)
  58     +box-shadow(0px 3px 8px rgba(0, 0, 0, 0.2))
  59     margin: 0 auto
  60
  61 h1.text-muted, h2.text-muted, h3.text-muted
  62     margin-top: 10px
  63
  64 header
  65     a.navbar-brand.logo
  66         padding: 0 15px
  67     a.navbar-brand
  68         img
  69             max-height: 50px
  70
  71 // add {WORD JOINER} (equivalent to deprecated ZERO WIDTH NO-BREAK SPACE) at
  72 // the beginning of paragraphs so they don't "disappear" after saving when
  73 // used solely for spacing.
  74 #wrapwrap p:empty:after
  75     content: '\2060'
  76
  77 /* ----- Snippets Styles ----- */
  78
  79 .para_large
  80     font-size: 120%
  81
  82 .readable
  83     font-size: 120%
  84     max-width: 700px
  85     margin-left: auto
  86     margin-right: auto
  87
  88 /* ----- EDITOR ----- */
  89 #oe_main_menu_navbar
  90     min-height: 34px
  91     z-index: 1001
  92     +border-radius(0px)
  93     margin-bottom: 0px
  94     li a, li button
  95         padding: 4px 8px 4px 8px
  96         margin-top: 2px
  97         font-size: 13px
  98     .navbar-nav.navbar-right:last-child
  99         margin-right: 0 !important
 100
 101 .css_non_editable_mode_hidden
 102     display: none !important
 103
 104 /* ----- BOOTSTRAP FIX ----- */
 105
 106 .container, .readable
 107     .container
 108         padding-left: 0
 109         padding-right: 0
 110         width: auto
 111
 112 /* ----- BOOTSTRAP HACK FOR HEADER NAV BAR ----- */
 113
 114 .navbar.navbar-static-top
 115     margin-bottom: 0
 116     ul.nav
 117         > li.divider
 118             margin-top: 15px
 119             padding-top: 20px
 120             border-right: 1px solid grey
 121
 122 /* ----- BOOTSTRAP HACK FOR STICKY FOOTER ----- */
 123
 124 html,body, #wrapwrap
 125     +box-sizing(border-box)
 126     height: 100%
 127
 128 #wrapwrap
 129     display: table
 130     width: 100%
 131
 132 header, main, footer
 133     display: table-row
 134
 135 footer
 136     height: 100%
 137     background: rgb(239, 248, 248)
 138     background: rgba(200, 200, 200, 0.1)
 139
 140 #footer_container, #footer
 141     padding-top: 24px
 142     padding-bottom: 12px
 143
 144 /* ----- BOOTSTRAP FIX ----- */
 145
 146 .col-md-12
 147     float: left
 148     width: 100%
 149
 150 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 151
 152 .oe_structure.oe_editable.oe_empty:empty, .oe_editable[data-oe-type=html]:empty, .oe_structure.oe_editable.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
 153     background-image: url('/website/static/src/img/drag_here.png') !important
 154
 155 .oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
 156     background-image: none
 157     background-repeat: no-repeat
 158     background-position: center
 159     height: 220px !important
 160
 161 .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
 162     position: static
 163
 164 .oe_structure.oe_empty:empty:before, [data-oe-type=html]:empty:before, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child:before, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:before
 165     content: ' '
 166     text-align: center
 167     display: block
 168     padding-top: 160px
 169     padding-bottom: 30px
 170     color: grey
 171     font-size: 24px
 172
 173 .oe_structure.oe_editable.oe_empty:empty:before, .oe_editable[data-oe-type=html]:empty:before, .oe_structure.oe_editable.oe_empty > .oe_drop_zone.oe_insert:only-child:before, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:before
 174     content: 'Drag Building Blocks Here' !important
 175
 176 .css_editable_display
 177     display: none
 178
 179 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 180
 181 .navbar .nav > li > p
 182     margin-bottom: 0px
 183
 184 // .navbar .nav > li  a
 185 //     text-shadow: none
 186
 187 // .nav > li  a
 188 //     display: block
 189
 190 /* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
 191
 192 .nav-hierarchy
 193     padding-left: 16px
 194
 195 /* -- Hack for removing double scrollbar from mobile preview -- */
 196 div#mobile-preview.modal
 197     overflow: hidden
 198
 199 ul.nav-stacked > li > a
 200     padding: 2px 15px
 201
 202 #customize-menu .dropdown-header
 203     text-transform: uppercase
 204
 205 /* ---- PUBLISH ---- */
 206 .css_published
 207     .btn-danger, .css_publish
 208         display: none
 209 .css_unpublished
 210     .btn-success, .css_unpublish
 211         display: none
 212
 213 [data-publish='off']>*:not(.css_options)
 214     +opacity(0.5)
 215
 216 /* ---- END of PUBLISH ---- */
 217
 218 @include selection
 219     background: rgba(150, 150, 220, 0.3)
 220
 221 .logo-img
 222     width: 220px
 223
 224
 225 .oe_demo
 226     position: relative
 227     img
 228         width: 100%
 229     div
 230         position: absolute
 231         left: 0
 232         background-color: rgba(0,0,0,0.4)
 233         opacity: 0.85
 234         bottom: 0px
 235         width: 100%
 236         padding: 7px
 237         color: white
 238         font-weight: bold
 239         a
 240             color: white
 241
 242
 243 /* ---- SNIPPETS --- */
 244
 245 .oe_img_bg
 246     background-size: 100%
 247
 248 .carousel, .parallax, .blockquote
 249     overflow: hidden
 250
 251 @media (max-width: 400px)
 252     section, .parallax, .row, .hr, .blockquote
 253         height: auto !important
 254
 255 .carousel-inner
 256     height: 100%
 257     .item
 258         height: 100%
 259         background-size: cover
 260 .carousel
 261     .carousel-control
 262         cursor: pointer
 263         span
 264             top: 50%
 265             position: absolute
 266             margin-top: -8px
 267         &.left
 268             left: -10px
 269             *
 270                 position: absolute
 271                 top: 50%
 272                 z-index: 5
 273                 right: 50%
 274         &.right
 275             right: -10px
 276             *
 277                 position: absolute
 278                 top: 50%
 279                 z-index: 5
 280                 left: 50%
 281
 282 .quotecarousel
 283     padding-bottom: 16px
 284
 285 .hr
 286     padding: 4px 0
 287
 288
 289 .o_image_floating
 290     width: 40%
 291     margin: 4px
 292     div.o_container
 293         position: relative
 294         mark
 295             display: block
 296             position: absolute
 297             bottom: 0
 298             width: 100%
 299             background-color: rgba(86,61,124,.25)
 300             a
 301                 color: white
 302     &.o_hide_link div.o_container mark
 303         display: none
 304     &.o_margin_s
 305         margin-bottom: 4px
 306         &.pull-right
 307             margin-left: 8px
 308         &.pull-left
 309             margin-right: 8px
 310     &.o_margin_m
 311         margin-bottom: 8px
 312         &.pull-right
 313             margin-left: 12px
 314         &.pull-left
 315             margin-right: 12px
 316     &.o_margin_l
 317         margin-bottom: 12px
 318         &.pull-right
 319             margin-left: 16px
 320         &.pull-left
 321             margin-right: 16px
 322     &.o_margin_xl
 323         margin-bottom: 24px
 324         &.pull-right
 325             margin-left: 32px
 326         &.pull-left
 327             margin-right: 32px
 328
 329
 330 /* gallery */
 331
 332 .o_gallery
 333     &.o_grid, &.o_masonry
 334         &.o_spc-none
 335             div.row
 336                 margin: 0
 337             div.row > *
 338                 padding: 0
 339         &.o_spc-small
 340             div.row
 341                 margin: 5px 0
 342             div.row > *
 343                 padding: 0 5px
 344         &.o_spc-medium
 345             div.row
 346                 margin: 10px 0
 347             div.row > *
 348                 padding: 0 10px
 349         &.o_spc-big
 350             div.row
 351                 margin: 15px 0
 352             div.row > *
 353                 padding: 0 15px
 354         .img
 355             width: 100%
 356     &.o_grid
 357         &.size-auto .row
 358             height: auto
 359         &.size-small .row
 360             height: 100px
 361         &.size-medium .row
 362             height: 250px
 363         &.size-big .row
 364             height: 400px
 365         &.size-small, &.size-medium, &.size-big
 366             .img
 367                 height: 100%
 368     &.o_nomode
 369         &.o_spc-none
 370             .img
 371                 padding: 0
 372         &.o_spc-small
 373             .img
 374                 padding: 5px
 375         &.o_spc-medium
 376             .img
 377                 padding: 10px
 378         &.o_spc-big
 379             .img
 380                 padding: 15px
 381
 382     &.o_slideshow .carousel ul.carousel-indicators li
 383         border: 1px solid #aaa
 384     .carousel-inner .item img
 385         max-width: none
 386
 387 .o_gallery.o_slideshow > .container
 388     height: 100%
 389
 390 .o_gallery.o_slideshow .carousel, .modal-body.o_slideshow .carousel
 391     height: 100%
 392     img
 393         max-height: 100%
 394         max-width: 100%
 395         margin: auto
 396         position: relative
 397         top: 50%
 398         -webkit-transform: translateY(-50%)
 399         -ms-transform: translateY(-50%)
 400         transform: translateY(-50%)
 401     ul.carousel-indicators
 402         display: block
 403         height: auto
 404         padding: 0
 405         border-width: 0
 406         position: absolute
 407         bottom: 0
 408         li
 409             list-style-image: none
 410             display: inline-block
 411             width: 35px
 412             height: 35px
 413             margin: 0 0px 5px 5px
 414             padding: 0
 415             border: 1px solid #aaa
 416             text-indent: initial
 417             background-size: cover
 418             opacity: 0.5
 419             background-color: #000
 420         li.active
 421             opacity: 1
 422     .carousel-control.left, .carousel-control.right
 423         background-image: none
 424         background-color: transparent
 425
 426 /* Parallax Theme */
 427
 428 div.carousel
 429     .carousel-indicators
 430         li
 431             border: 1px solid grey
 432         .active
 433             background-color: grey
 434     span.carousel-img img, div.carousel-content
 435         max-height: 95%
 436         padding: 10px
 437     div.carousel-content
 438         background-color: black
 439         color: white
 440         background: rgba(0, 0, 0, 0.3)
 441         margin-top: 75px
 442
 443 .parallax
 444     background-size: cover
 445     > div
 446         position: relative
 447         display: table
 448         width: 100%
 449         min-height: 200px
 450         > div
 451             display: table-cell
 452             vertical-align: middle
 453             padding: 32px 0
 454
 455 /* Background (kept for 8.0 compatibility) */
 456
 457 .oe_dark
 458     background: #eff8f8
 459     background: rgba(200, 200, 200, 0.14)
 460
 461 .oe_black
 462     background-color: rgba(0, 0, 0, 0.9)
 463     color: white
 464
 465 .oe_green
 466     background-color: #169C78
 467     color: white
 468     .text-muted
 469         color: #ddd
 470
 471 .oe_blue_light
 472     background-color: #41b6ab
 473     color: white
 474     .text-muted
 475         color: #ddd
 476
 477 .oe_blue
 478     background-color: #34495e
 479     color: white
 480
 481 .oe_orange
 482     background-color: #f05442
 483     color: white
 484     .text-muted
 485         color: #ddd
 486
 487 .oe_purple
 488     background-color: #b163a3
 489     color: white
 490     .text-muted
 491         color: #ddd
 492
 493 .oe_red
 494     background-color: #9C1b31
 495     color: white
 496     .text-muted
 497         color: #ddd
 498
 499 /* Misc */
 500
 501 .texttop
 502     vertical-align: top
 503
 504 table.well tr
 505     th
 506         text-align: right
 507         padding-right: 10px
 508     td
 509         padding-right: 5px
 510
 511 .logo-img
 512     width: 220px
 513
 514 .oe_demo
 515     position: relative
 516     img
 517         width: 100%
 518     div
 519         position: absolute
 520         left: 0
 521         background-color: rgba(0,0,0,0.4)
 522         opacity: 0.85
 523         bottom: 0px
 524         width: 100%
 525         padding: 7px
 526         color: white
 527         font-weight: bold
 528         a
 529             color: white
 530
 531 address
 532     .fa.fa-mobile-phone
 533         margin: 0 3px 0 2px
 534     .fa.fa-file-text-o
 535         margin-right: 1px
 536
 537 span[data-oe-type="monetary"]
 538     white-space: nowrap
 539
 540 .oe_template_fallback
 541     @include column-count(3)
 542
 543 .oe_website_login_container
 544     width: 400px
 545     margin: 40px auto
 546
 547 .oe_website_overflow_ellipsis
 548     white-space:nowrap
 549     overflow:hidden
 550     text-overflow:ellipsis
 551
 552 .oe_website_spinner
 553     width: 121px
 554     input
 555         text-align: center
 556
 557 div.media_iframe_video
 558     height: 0
 559     margin: 0 auto
 560     text-align: center
 561     position: relative
 562     overflow: hidden
 563     padding-bottom: 66.5%
 564     iframe
 565         width: 100%
 566         height: 100%
 567         position: absolute
 568         margin-left: -50%
 569     .css_editable_mode_display
 570         position: absolute
 571         width: 100%
 572         height: 100%
 573         display: none
 574         z-index: 2
 575
 576 /* Mobile view */
 577
 578 @media (max-width: 768px)
 579     img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa
 580         -webkit-transform: none !important
 581         -moz-transform: none !important
 582         -ms-transform: none !important
 583         -o-transform: none !important
 584         transform: none !important
 585
 586
 587 /* Fix: backward compatibility saas-3 */
 588
 589 div.carousel
 590     .container
 591         > .carousel-caption
 592             position: absolute
 593             right: 50%
 594             left: 50%
 595             bottom: 20px
 596             > div
 597                 position: absolute
 598                 text-align: left
 599                 padding: 20px
 600                 background: rgba(0, 0, 0, 0.4)
 601                 bottom: 20px
 602         > .carousel-image
 603             top: 5%
 604             bottom: 5%
 605             position: absolute
 606             max-height: 90%
 607             margin: 0 auto
 608     .item.text_image
 609         .container
 610             > .carousel-caption
 611                 left: 10%
 612                 > div
 613                     right: 50%
 614                     margin-right: -20%
 615                     max-width: 550px
 616             > .carousel-image
 617                 right: 10%
 618                 left: 50%
 619     .item.image_text
 620         .container
 621             > .carousel-caption
 622                 right: 10%
 623                 > div
 624                     left: 50%
 625                     margin-left: -20%
 626                     max-width: 550px
 627             > .carousel-image
 628                 right: 50%
 629                 left: 10%
 630     .item.text_only
 631         .container
 632             > .carousel-caption
 633                 left: 10%
 634                 right: 10%
 635                 top: 10%
 636                 bottom: auto
 637                 > div
 638                     text-align: center
 639                     background: transparent
 640                     bottom: auto
 641                     width: 100%
 642             > .carousel-image
 643                 display: none !important