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