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 .readable
  80     font-size: 120%
  81     max-width: 700px
  82     margin-left: auto
  83     margin-right: auto
  84
  85 /* ----- EDITOR ----- */
  86
  87 .css_non_editable_mode_hidden
  88     display: none
  89
  90 /* ----- BOOTSTRAP FIX ----- */
  91
  92 .container, .readable
  93     .container
  94         padding-left: 0
  95         padding-right: 0
  96         width: auto
  97
  98 /* ----- BOOTSTRAP HACK FOR HEADER NAV BAR ----- */
  99
 100 .navbar.navbar-static-top
 101     margin-bottom: 0
 102     ul.nav
 103         > li.divider
 104             margin-top: 15px
 105             padding-top: 20px
 106             border-right: 1px solid grey
 107
 108 /* ----- BOOTSTRAP HACK FOR STICKY FOOTER ----- */
 109
 110 html,body, #wrapwrap
 111     +box-sizing(border-box)
 112     height: 100%
 113
 114 #wrapwrap
 115     display: table
 116     width: 100%
 117
 118 header, main, footer
 119     display: table-row
 120
 121 footer
 122     height: 100%
 123     background: rgb(239, 248, 248)
 124     background: rgba(200, 200, 200, 0.1)
 125
 126 #footer_container
 127     padding-top: 24px
 128     padding-bottom: 12px
 129
 130 /* ----- BOOTSTRAP FIX ----- */
 131
 132 .col-md-12
 133     float: left
 134     width: 100%
 135
 136 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 137
 138 .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
 139     background-image: url('/website/static/src/img/drag_here.png') !important
 140
 141 .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
 142     background-image: none
 143     background-repeat: no-repeat
 144     background-position: center
 145     height: 220px !important
 146
 147 .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
 148     position: static
 149
 150 .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
 151     content: ' '
 152     text-align: center
 153     display: block
 154     padding-top: 160px
 155     padding-bottom: 30px
 156     color: grey
 157     font-size: 24px
 158
 159 .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
 160     content: 'Drag Building Blocks Here' !important
 161
 162 .css_editable_display
 163     display: none
 164
 165 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 166
 167 .navbar .nav > li > p
 168     margin-bottom: 0px
 169
 170 // .navbar .nav > li  a
 171 //     text-shadow: none
 172
 173 // .nav > li  a
 174 //     display: block
 175
 176 /* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
 177
 178 .nav-hierarchy
 179     padding-left: 16px
 180
 181 #themes-list .well
 182     padding: 0 0 20px 0
 183
 184 /* -- Hack for removing double scrollbar from mobile preview -- */
 185 div#mobile-preview.modal
 186     overflow: hidden
 187
 188 ul.nav-stacked > li > a
 189     padding: 2px 15px
 190
 191 #customize-menu .dropdown-header
 192     text-transform: uppercase
 193
 194 /* ---- PUBLISH ---- */
 195 .css_published
 196     .btn-danger, .css_publish
 197         display: none
 198 .css_unpublished
 199     .btn-success, .css_unpublish
 200         display: none
 201
 202 [data-publish='off']>*:not(.css_options)
 203     +opacity(0.5)
 204
 205 /* ---- END of PUBLISH ---- */
 206
 207 @include selection
 208     background: rgba(150, 150, 220, 0.3)
 209
 210 .logo-img
 211     width: 220px
 212
 213
 214 .oe_demo
 215     position: relative
 216     img
 217         width: 100%
 218     div
 219         position: absolute
 220         left: 0
 221         background-color: rgba(0,0,0,0.4)
 222         opacity: 0.85
 223         bottom: 0px
 224         width: 100%
 225         padding: 7px
 226         color: white
 227         font-weight: bold
 228         a
 229             color: white
 230
 231
 232 /* ---- SNIPPETS --- */
 233
 234 .oe_img_bg
 235     background-size: 100%
 236
 237 section, .carousel, .parallax, .row, .hr, .blockquote
 238     min-height: 30px
 239 .carousel, .parallax, .blockquote
 240     overflow: hidden
 241
 242 @media (max-width: 400px)
 243     section, .parallax, .row, .hr, .blockquote
 244         height: auto !important
 245
 246 .carousel-inner
 247     height: 100%
 248     .item
 249         height: 100%
 250         background-size: cover
 251 .carousel
 252     .carousel-caption
 253         position: absolute
 254         right: 50%
 255         left: 50%
 256         bottom: 20px
 257         > div
 258             position: absolute
 259             text-align: left
 260             padding: 20px
 261             background: rgba(0, 0, 0, 0.4)
 262             bottom: 20px
 263         h1, h2, h3
 264             margin-top: 10px
 265             margin-bottom: 10px
 266     .carousel-image
 267         top: 5%
 268         bottom: 5%
 269         position: absolute
 270         max-height: 90%
 271         margin: 0 auto
 272     .item.text_only
 273         .carousel-image
 274             display: none !important
 275         .carousel-caption
 276             left: 10%
 277             right: 10%
 278             top: 10%
 279             bottom: auto
 280             > div
 281                 text-align: center
 282                 background: transparent
 283                 bottom: auto
 284                 width: 100%
 285     .item.text_image
 286         .carousel-caption
 287             left: 10%
 288             > div
 289                 right: 50%
 290                 margin-right: -20%
 291                 max-width: 550px
 292         .carousel-image
 293             right: 10%
 294             left: 50%
 295     .item.image_text
 296         .carousel-caption
 297             right: 10%
 298             > div
 299                 left: 50%
 300                 margin-left: -20%
 301                 max-width: 550px
 302         .carousel-image
 303             right: 50%
 304             left: 10%
 305     .carousel-control
 306         cursor: pointer
 307         span
 308             top: 50%
 309             position: absolute
 310             margin-top: -8px
 311         &.left
 312             left: -10px
 313             *
 314                 position: absolute
 315                 top: 50%
 316                 z-index: 5
 317                 right: 50%
 318         &.right
 319             right: -10px
 320             *
 321                 position: absolute
 322                 top: 50%
 323                 z-index: 5
 324                 left: 50%
 325
 326 .quotecarousel
 327     padding-bottom: 16px
 328
 329 /* Parallax Theme */
 330
 331 div.carousel
 332     .carousel-indicators
 333         li
 334             border: 1px solid grey
 335         .active
 336             background-color: grey
 337
 338 .parallax
 339     background-size: cover
 340     > div
 341         position: relative
 342         display: table
 343         width: 100%
 344         min-height: 200px
 345         > div
 346             display: table-cell
 347             vertical-align: middle
 348             padding: 32px 0
 349
 350 /* Background */
 351
 352 .oe_dark
 353     background: #eff8f8
 354     background: rgba(200, 200, 200, 0.14)
 355
 356 .oe_black
 357     background-color: rgba(0, 0, 0, 0.9)
 358     color: white
 359
 360 .oe_green
 361     background-color: #169C78
 362     color: white
 363     .text-muted
 364         color: #ddd
 365
 366 .oe_blue_light
 367     background-color: #41b6ab
 368     color: white
 369     .text-muted
 370         color: #ddd
 371
 372 .oe_blue
 373     background-color: #34495e
 374     color: white
 375
 376 .oe_orange
 377     background-color: #f05442
 378     color: white
 379     .text-muted
 380         color: #ddd
 381
 382 .oe_purple
 383     background-color: #b163a3
 384     color: white
 385     .text-muted
 386         color: #ddd
 387
 388 .oe_red
 389     background-color: #9C1b31
 390     color: white
 391     .text-muted
 392         color: #ddd
 393
 394 /* Misc */
 395
 396 .texttop
 397     vertical-align: top
 398
 399 table.well tr
 400     th
 401         text-align: right
 402         padding-right: 10px
 403     td
 404         padding-right: 5px
 405
 406 .logo-img
 407     width: 220px
 408
 409 .oe_demo
 410     position: relative
 411     img
 412         width: 100%
 413     div
 414         position: absolute
 415         left: 0
 416         background-color: rgba(0,0,0,0.4)
 417         opacity: 0.85
 418         bottom: 0px
 419         width: 100%
 420         padding: 7px
 421         color: white
 422         font-weight: bold
 423         a
 424             color: white
 425
 426 address
 427     .fa.fa-mobile-phone
 428         margin: 0 3px 0 2px
 429     .fa.fa-file-text-o
 430         margin-right: 1px
 431
 432 span[data-oe-type="monetary"]
 433     white-space: nowrap
 434
 435 .oe_template_fallback
 436     @include column-count(3)
 437
 438 .oe_website_login_container
 439     width: 400px
 440     margin: 40px auto
 441
 442 .oe_website_overflow_ellipsis
 443     white-space:nowrap
 444     overflow:hidden
 445     text-overflow:ellipsis
 446
 447 div.media_iframe_video
 448     height: 0
 449     margin: 0 auto
 450     text-align: center
 451     position: relative
 452     overflow: hidden
 453     padding-bottom: 66.5%
 454     iframe
 455         width: 100%
 456         height: 100%
 457     div
 458         position: absolute
 459         width: 100%
 460         height: 100%
 461         display: none