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