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 @-moz-document url-prefix()
 151     .table .img-responsive
 152         width: 100%
 153
 154 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 155
 156 .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
 157     background-image: url('/website/static/src/img/drag_here.png') !important
 158
 159 .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
 160     background-image: none
 161     background-repeat: no-repeat
 162     background-position: center
 163     height: 220px !important
 164
 165 .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
 166     position: static
 167
 168 .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
 169     content: ' '
 170     text-align: center
 171     display: block
 172     padding-top: 160px
 173     padding-bottom: 30px
 174     color: grey
 175     font-size: 24px
 176
 177 .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
 178     content: 'Drag Building Blocks Here' !important
 179
 180 .css_editable_display
 181     display: none
 182
 183 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 184
 185 .navbar .nav > li > p
 186     margin-bottom: 0px
 187
 188 // .navbar .nav > li  a
 189 //     text-shadow: none
 190
 191 // .nav > li  a
 192 //     display: block
 193
 194 /* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
 195
 196 .nav-hierarchy
 197     padding-left: 16px
 198
 199 /* -- Hack for removing double scrollbar from mobile preview -- */
 200 div#mobile-preview.modal
 201     overflow: hidden
 202
 203 ul.nav-stacked > li > a
 204     padding: 2px 15px
 205
 206 #customize-menu .dropdown-header
 207     text-transform: uppercase
 208
 209 /* ---- PUBLISH ---- */
 210 .css_published
 211     .btn-danger, .css_publish
 212         display: none
 213 .css_unpublished
 214     .btn-success, .css_unpublish
 215         display: none
 216
 217 [data-publish='off']>*:not(.css_options)
 218     +opacity(0.5)
 219
 220 /* ---- END of PUBLISH ---- */
 221
 222 @include selection
 223     background: rgba(150, 150, 220, 0.3)
 224
 225 .logo-img
 226     width: 220px
 227
 228
 229 .oe_demo
 230     position: relative
 231     img
 232         width: 100%
 233     div
 234         position: absolute
 235         left: 0
 236         background-color: rgba(0,0,0,0.4)
 237         opacity: 0.85
 238         bottom: 0px
 239         width: 100%
 240         padding: 7px
 241         color: white
 242         font-weight: bold
 243         a
 244             color: white
 245
 246
 247 /* ---- SNIPPETS --- */
 248
 249 .oe_img_bg
 250     background-size: 100%
 251
 252 .carousel, .parallax, .blockquote
 253     overflow: hidden
 254
 255 @media (max-width: 400px)
 256     section, .parallax, .row, .hr, .blockquote
 257         height: auto !important
 258
 259 .carousel-inner
 260     height: 100%
 261     .item
 262         height: 100%
 263         background-size: cover
 264 .carousel
 265     .carousel-control
 266         cursor: pointer
 267         span
 268             top: 50%
 269             position: absolute
 270             margin-top: -8px
 271         &.left
 272             left: -10px
 273             *
 274                 position: absolute
 275                 top: 50%
 276                 z-index: 5
 277                 right: 50%
 278         &.right
 279             right: -10px
 280             *
 281                 position: absolute
 282                 top: 50%
 283                 z-index: 5
 284                 left: 50%
 285
 286 .quotecarousel
 287     padding-bottom: 16px
 288
 289 .hr
 290     padding: 4px 0
 291
 292
 293 .o_image_floating
 294     width: 40%
 295     margin: 4px
 296     div.o_container
 297         position: relative
 298         mark
 299             display: block
 300             position: absolute
 301             bottom: 0
 302             width: 100%
 303             background-color: rgba(86,61,124,.25)
 304             a
 305                 color: white
 306     &.o_hide_link div.o_container mark
 307         display: none
 308     &.o_margin_s
 309         margin-bottom: 4px
 310         &.pull-right
 311             margin-left: 8px
 312         &.pull-left
 313             margin-right: 8px
 314     &.o_margin_m
 315         margin-bottom: 8px
 316         &.pull-right
 317             margin-left: 12px
 318         &.pull-left
 319             margin-right: 12px
 320     &.o_margin_l
 321         margin-bottom: 12px
 322         &.pull-right
 323             margin-left: 16px
 324         &.pull-left
 325             margin-right: 16px
 326     &.o_margin_xl
 327         margin-bottom: 24px
 328         &.pull-right
 329             margin-left: 32px
 330         &.pull-left
 331             margin-right: 32px
 332
 333
 334 /* gallery */
 335
 336 .o_gallery
 337     &.o_grid, &.o_masonry
 338         &.o_spc-none
 339             div.row
 340                 margin: 0
 341             div.row > *
 342                 padding: 0
 343         &.o_spc-small
 344             div.row
 345                 margin: 5px 0
 346             div.row > *
 347                 padding: 0 5px
 348         &.o_spc-medium
 349             div.row
 350                 margin: 10px 0
 351             div.row > *
 352                 padding: 0 10px
 353         &.o_spc-big
 354             div.row
 355                 margin: 15px 0
 356             div.row > *
 357                 padding: 0 15px
 358         .img
 359             width: 100%
 360     &.o_grid
 361         &.size-auto .row
 362             height: auto
 363         &.size-small .row
 364             height: 100px
 365         &.size-medium .row
 366             height: 250px
 367         &.size-big .row
 368             height: 400px
 369         &.size-small, &.size-medium, &.size-big
 370             .img
 371                 height: 100%
 372     &.o_nomode
 373         &.o_spc-none
 374             .img
 375                 padding: 0
 376         &.o_spc-small
 377             .img
 378                 padding: 5px
 379         &.o_spc-medium
 380             .img
 381                 padding: 10px
 382         &.o_spc-big
 383             .img
 384                 padding: 15px
 385
 386     &.o_slideshow .carousel ul.carousel-indicators li
 387         border: 1px solid #aaa
 388     .carousel-inner .item img
 389         max-width: none
 390
 391 .o_gallery.o_slideshow > .container
 392     height: 100%
 393
 394 .o_gallery.o_slideshow .carousel, .modal-body.o_slideshow .carousel
 395     height: 100%
 396     img
 397         max-height: 100%
 398         max-width: 100%
 399         margin: auto
 400         position: relative
 401         top: 50%
 402         -webkit-transform: translateY(-50%)
 403         -ms-transform: translateY(-50%)
 404         transform: translateY(-50%)
 405     ul.carousel-indicators
 406         display: block
 407         height: auto
 408         padding: 0
 409         border-width: 0
 410         position: absolute
 411         bottom: 0
 412         li
 413             list-style-image: none
 414             display: inline-block
 415             width: 35px
 416             height: 35px
 417             margin: 0 0px 5px 5px
 418             padding: 0
 419             border: 1px solid #aaa
 420             text-indent: initial
 421             background-size: cover
 422             opacity: 0.5
 423             background-color: #000
 424         li.active
 425             opacity: 1
 426     .carousel-control.left, .carousel-control.right
 427         background-image: none
 428         background-color: transparent
 429
 430 /* Parallax Theme */
 431
 432 div.carousel
 433     .carousel-indicators
 434         li
 435             border: 1px solid grey
 436         .active
 437             background-color: grey
 438     span.carousel-img img, div.carousel-content
 439         max-height: 95%
 440         padding: 10px
 441     div.carousel-content
 442         background-color: black
 443         color: white
 444         background: rgba(0, 0, 0, 0.3)
 445         margin-top: 75px
 446
 447 .parallax
 448     background-size: cover
 449     > div
 450         position: relative
 451         display: table
 452         width: 100%
 453         min-height: 200px
 454         > div
 455             display: table-cell
 456             vertical-align: middle
 457             padding: 32px 0
 458
 459 /* Background (kept for 8.0 compatibility) */
 460
 461 .oe_dark
 462     background: #eff8f8
 463     background: rgba(200, 200, 200, 0.14)
 464
 465 .oe_black
 466     background-color: rgba(0, 0, 0, 0.9)
 467     color: white
 468
 469 .oe_green
 470     background-color: #169C78
 471     color: white
 472     .text-muted
 473         color: #ddd
 474
 475 .oe_blue_light
 476     background-color: #41b6ab
 477     color: white
 478     .text-muted
 479         color: #ddd
 480
 481 .oe_blue
 482     background-color: #34495e
 483     color: white
 484
 485 .oe_orange
 486     background-color: #f05442
 487     color: white
 488     .text-muted
 489         color: #ddd
 490
 491 .oe_purple
 492     background-color: #b163a3
 493     color: white
 494     .text-muted
 495         color: #ddd
 496
 497 .oe_red
 498     background-color: #9C1b31
 499     color: white
 500     .text-muted
 501         color: #ddd
 502
 503 /* Misc */
 504
 505 .texttop
 506     vertical-align: top
 507
 508 table.well tr
 509     th
 510         text-align: right
 511         padding-right: 10px
 512     td
 513         padding-right: 5px
 514
 515 .logo-img
 516     width: 220px
 517
 518 .oe_demo
 519     position: relative
 520     img
 521         width: 100%
 522     div
 523         position: absolute
 524         left: 0
 525         background-color: rgba(0,0,0,0.4)
 526         opacity: 0.85
 527         bottom: 0px
 528         width: 100%
 529         padding: 7px
 530         color: white
 531         font-weight: bold
 532         a
 533             color: white
 534
 535 address
 536     .fa.fa-mobile-phone
 537         margin: 0 3px 0 2px
 538     .fa.fa-file-text-o
 539         margin-right: 1px
 540
 541 span[data-oe-type="monetary"]
 542     white-space: nowrap
 543
 544 .oe_template_fallback
 545     @include column-count(3)
 546
 547 .oe_website_login_container
 548     width: 400px
 549     margin: 40px auto
 550
 551 .oe_website_overflow_ellipsis
 552     white-space:nowrap
 553     overflow:hidden
 554     text-overflow:ellipsis
 555
 556 .oe_website_spinner
 557     width: 121px
 558     input
 559         text-align: center
 560
 561 div.media_iframe_video
 562     height: 0
 563     margin: 0 auto
 564     text-align: center
 565     position: relative
 566     overflow: hidden
 567     padding-bottom: 66.5%
 568     iframe
 569         width: 100%
 570         height: 100%
 571         position: absolute
 572         margin-left: -50%
 573     .css_editable_mode_display
 574         position: absolute
 575         width: 100%
 576         height: 100%
 577         display: none
 578         z-index: 2
 579
 580 /* Mobile view */
 581
 582 @media (max-width: 768px)
 583     img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa
 584         -webkit-transform: none !important
 585         -moz-transform: none !important
 586         -ms-transform: none !important
 587         -o-transform: none !important
 588         transform: none !important
 589
 590
 591 /* Fix: backward compatibility saas-3 */
 592
 593 div.carousel
 594     .container
 595         > .carousel-caption
 596             position: absolute
 597             right: 50%
 598             left: 50%
 599             bottom: 20px
 600             > div
 601                 position: absolute
 602                 text-align: left
 603                 padding: 20px
 604                 background: rgba(0, 0, 0, 0.4)
 605                 bottom: 20px
 606         > .carousel-image
 607             top: 5%
 608             bottom: 5%
 609             position: absolute
 610             max-height: 90%
 611             margin: 0 auto
 612     .item.text_image
 613         .container
 614             > .carousel-caption
 615                 left: 10%
 616                 > div
 617                     right: 50%
 618                     margin-right: -20%
 619                     max-width: 550px
 620             > .carousel-image
 621                 right: 10%
 622                 left: 50%
 623     .item.image_text
 624         .container
 625             > .carousel-caption
 626                 right: 10%
 627                 > div
 628                     left: 50%
 629                     margin-left: -20%
 630                     max-width: 550px
 631             > .carousel-image
 632                 right: 50%
 633                 left: 10%
 634     .item.text_only
 635         .container
 636             > .carousel-caption
 637                 left: 10%
 638                 right: 10%
 639                 top: 10%
 640                 bottom: auto
 641                 > div
 642                     text-align: center
 643                     background: transparent
 644                     bottom: auto
 645                     width: 100%
 646             > .carousel-image
 647                 display: none !important