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