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 #themes-list .well
 196     padding: 0 0 20px 0
 197
 198 /* -- Hack for removing double scrollbar from mobile preview -- */
 199 div#mobile-preview.modal
 200     overflow: hidden
 201
 202 ul.nav-stacked > li > a
 203     padding: 2px 15px
 204
 205 #customize-menu .dropdown-header
 206     text-transform: uppercase
 207
 208 /* ---- PUBLISH ---- */
 209 .css_published
 210     .btn-danger, .css_publish
 211         display: none
 212 .css_unpublished
 213     .btn-success, .css_unpublish
 214         display: none
 215
 216 [data-publish='off']>*:not(.css_options)
 217     +opacity(0.5)
 218
 219 /* ---- END of PUBLISH ---- */
 220
 221 @include selection
 222     background: rgba(150, 150, 220, 0.3)
 223
 224 .logo-img
 225     width: 220px
 226
 227
 228 .oe_demo
 229     position: relative
 230     img
 231         width: 100%
 232     div
 233         position: absolute
 234         left: 0
 235         background-color: rgba(0,0,0,0.4)
 236         opacity: 0.85
 237         bottom: 0px
 238         width: 100%
 239         padding: 7px
 240         color: white
 241         font-weight: bold
 242         a
 243             color: white
 244
 245
 246 /* ---- SNIPPETS --- */
 247
 248 .oe_img_bg
 249     background-size: 100%
 250
 251 .carousel, .parallax, .blockquote
 252     overflow: hidden
 253
 254 @media (max-width: 400px)
 255     section, .parallax, .row, .hr, .blockquote
 256         height: auto !important
 257
 258 .carousel-inner
 259     height: 100%
 260     .item
 261         height: 100%
 262         background-size: cover
 263 .carousel
 264     .carousel-control
 265         cursor: pointer
 266         span
 267             top: 50%
 268             position: absolute
 269             margin-top: -8px
 270         &.left
 271             left: -10px
 272             *
 273                 position: absolute
 274                 top: 50%
 275                 z-index: 5
 276                 right: 50%
 277         &.right
 278             right: -10px
 279             *
 280                 position: absolute
 281                 top: 50%
 282                 z-index: 5
 283                 left: 50%
 284
 285 .quotecarousel
 286     padding-bottom: 16px
 287
 288 .hr
 289     padding: 4px 0
 290
 291
 292 .o_image_floating
 293     width: 40%
 294     margin: 4px
 295     div.o_container
 296         position: relative
 297         mark
 298             display: block
 299             position: absolute
 300             bottom: 0
 301             width: 100%
 302             background-color: rgba(86,61,124,.25)
 303             a
 304                 color: white
 305     &.o_hide_link div.o_container mark
 306         display: none
 307     &.o_margin_s
 308         margin-bottom: 4px
 309         &.pull-right
 310             margin-left: 8px
 311         &.pull-left
 312             margin-right: 8px
 313     &.o_margin_m
 314         margin-bottom: 8px
 315         &.pull-right
 316             margin-left: 12px
 317         &.pull-left
 318             margin-right: 12px
 319     &.o_margin_l
 320         margin-bottom: 12px
 321         &.pull-right
 322             margin-left: 16px
 323         &.pull-left
 324             margin-right: 16px
 325     &.o_margin_xl
 326         margin-bottom: 24px
 327         &.pull-right
 328             margin-left: 32px
 329         &.pull-left
 330             margin-right: 32px
 331
 332
 333 /* Parallax Theme */
 334
 335 div.carousel
 336     .carousel-indicators
 337         li
 338             border: 1px solid grey
 339         .active
 340             background-color: grey
 341     span.carousel-img img, div.carousel-content
 342         max-height: 95%
 343         padding: 10px
 344     div.carousel-content
 345         background-color: black
 346         color: white
 347         background: rgba(0, 0, 0, 0.3)
 348         margin-top: 75px
 349
 350 .parallax
 351     background-size: cover
 352     > div
 353         position: relative
 354         display: table
 355         width: 100%
 356         min-height: 200px
 357         > div
 358             display: table-cell
 359             vertical-align: middle
 360             padding: 32px 0
 361
 362 /* Background */
 363
 364 .oe_dark
 365     background: #eff8f8
 366     background: rgba(200, 200, 200, 0.14)
 367
 368 .oe_black
 369     background-color: rgba(0, 0, 0, 0.9)
 370     color: white
 371
 372 .oe_green
 373     background-color: #169C78
 374     color: white
 375     .text-muted
 376         color: #ddd
 377
 378 .oe_blue_light
 379     background-color: #41b6ab
 380     color: white
 381     .text-muted
 382         color: #ddd
 383
 384 .oe_blue
 385     background-color: #34495e
 386     color: white
 387
 388 .oe_orange
 389     background-color: #f05442
 390     color: white
 391     .text-muted
 392         color: #ddd
 393
 394 .oe_purple
 395     background-color: #b163a3
 396     color: white
 397     .text-muted
 398         color: #ddd
 399
 400 .oe_red
 401     background-color: #9C1b31
 402     color: white
 403     .text-muted
 404         color: #ddd
 405
 406 /* Misc */
 407
 408 .texttop
 409     vertical-align: top
 410
 411 table.well tr
 412     th
 413         text-align: right
 414         padding-right: 10px
 415     td
 416         padding-right: 5px
 417
 418 .logo-img
 419     width: 220px
 420
 421 .oe_demo
 422     position: relative
 423     img
 424         width: 100%
 425     div
 426         position: absolute
 427         left: 0
 428         background-color: rgba(0,0,0,0.4)
 429         opacity: 0.85
 430         bottom: 0px
 431         width: 100%
 432         padding: 7px
 433         color: white
 434         font-weight: bold
 435         a
 436             color: white
 437
 438 address
 439     .fa.fa-mobile-phone
 440         margin: 0 3px 0 2px
 441     .fa.fa-file-text-o
 442         margin-right: 1px
 443
 444 span[data-oe-type="monetary"]
 445     white-space: nowrap
 446
 447 .oe_template_fallback
 448     @include column-count(3)
 449
 450 .oe_website_login_container
 451     width: 400px
 452     margin: 40px auto
 453
 454 .oe_website_overflow_ellipsis
 455     white-space:nowrap
 456     overflow:hidden
 457     text-overflow:ellipsis
 458
 459 .oe_website_spinner
 460     width: 121px
 461     input
 462         text-align: center
 463
 464 div.media_iframe_video
 465     height: 0
 466     margin: 0 auto
 467     text-align: center
 468     position: relative
 469     overflow: hidden
 470     padding-bottom: 66.5%
 471     iframe
 472         width: 100%
 473         height: 100%
 474         position: absolute
 475         margin-left: -50%
 476     .css_editable_mode_display
 477         position: absolute
 478         width: 100%
 479         height: 100%
 480         display: none
 481         z-index: 2
 482
 483 /* Mobile view */
 484
 485 @media (max-width: 768px)
 486     img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa
 487         -webkit-transform: none !important
 488         -moz-transform: none !important
 489         -ms-transform: none !important
 490         -o-transform: none !important
 491         transform: none !important
 492
 493
 494 /* Fix: backward compatibility saas-3 */
 495
 496 div.carousel
 497     .container
 498         > .carousel-caption
 499             position: absolute
 500             right: 50%
 501             left: 50%
 502             bottom: 20px
 503             > div
 504                 position: absolute
 505                 text-align: left
 506                 padding: 20px
 507                 background: rgba(0, 0, 0, 0.4)
 508                 bottom: 20px
 509         > .carousel-image
 510             top: 5%
 511             bottom: 5%
 512             position: absolute
 513             max-height: 90%
 514             margin: 0 auto
 515     .item.text_image
 516         .container
 517             > .carousel-caption
 518                 left: 10%
 519                 > div
 520                     right: 50%
 521                     margin-right: -20%
 522                     max-width: 550px
 523             > .carousel-image
 524                 right: 10%
 525                 left: 50%
 526     .item.image_text
 527         .container
 528             > .carousel-caption
 529                 right: 10%
 530                 > div
 531                     left: 50%
 532                     margin-left: -20%
 533                     max-width: 550px
 534             > .carousel-image
 535                 right: 50%
 536                 left: 10%
 537     .item.text_only
 538         .container
 539             > .carousel-caption
 540                 left: 10%
 541                 right: 10%
 542                 top: 10%
 543                 bottom: auto
 544                 > div
 545                     text-align: center
 546                     background: transparent
 547                     bottom: auto
 548                     width: 100%
 549             > .carousel-image
 550                 display: none !important