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