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