addons/website/static/src/css/website.sass

   1 @charset "utf-8"
   2
   3 /*
   4  *       THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
   5  *
   6  * css for editor buttons, openerp widget included in the website and other
   7  * stuff must go to the editor.css
   8  *
   9  */
  10
  11 /* ----- GENERIC LAYOUTING HELPERS ---- */
  12
  13 /* Vertical Spacing */
  14 .mt128
  15     margin-top: 128px !important
  16 .mt92
  17     margin-top: 92px !important
  18 .mt64
  19     margin-top: 64px !important
  20 .mt48
  21     margin-top: 48px !important
  22 .mt32
  23     margin-top: 32px !important
  24 .mt16
  25     margin-top: 16px !important
  26 .mt8
  27     margin-top: 8px !important
  28 .mt4
  29     margin-top: 4px !important
  30 .mt0
  31     margin-top: 0px !important
  32
  33 .mb128
  34     margin-bottom: 128px !important
  35 .mb92
  36     margin-bottom: 92px !important
  37 .mb64
  38     margin-bottom: 64px !important
  39 .mb48
  40     margin-bottom: 48px !important
  41 .mb32
  42     margin-bottom: 32px !important
  43 .mb16
  44     margin-bottom: 16px !important
  45 .mb8
  46     margin-bottom: 8px !important
  47 .mb4
  48     margin-bottom: 4px !important
  49 .mb0
  50     margin-bottom: 0px !important
  51
  52 .pt128
  53     padding-top: 128px !important
  54 .pt92
  55     padding-top: 92px !important
  56 .pt64
  57     padding-top: 64px !important
  58 .pt48
  59     padding-top: 48px !important
  60 .pt32
  61     padding-top: 32px !important
  62 .pt16
  63     padding-top: 16px !important
  64 .pt8
  65     padding-top: 8px !important
  66 .pt4
  67     padding-top: 4px !important
  68 .pt0
  69     padding-top: 0px !important
  70
  71 .pb128
  72     padding-bottom: 128px !important
  73 .pb92
  74     padding-bottom: 92px !important
  75 .pb64
  76     padding-bottom: 64px !important
  77 .pb48
  78     padding-bottom: 48px !important
  79 .pb32
  80     padding-bottom: 32px !important
  81 .pb16
  82     padding-bottom: 16px !important
  83 .pb8
  84     padding-bottom: 8px !important
  85 .pb4
  86     padding-bottom: 4px !important
  87 .pb0
  88     padding-bottom: 0px !important
  89
  90 /* Grid of unequally tall elements */
  91 .grid > [class*="col-md"]
  92     display: inline-block
  93     float: none
  94     vertical-align: top
  95     box-sizing: border-box
  96     &.grid-align-top > [class*="col-md"]
  97         vertical-align: top
  98     &.grid-align-middle > [class*="col-md"]
  99         vertical-align: middle
 100     &.grid-align-bottom > [class*="col-md"]
 101         vertical-align: bottom
 102
 103 /* Extra Styles */
 104
 105 img.shadow
 106     -webkit-border-radius: 3px
 107     -moz-border-radius: 3px
 108     -ms-border-radius: 3px
 109     -o-border-radius: 3px
 110     border-radius: 3px
 111     -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2)
 112     -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2)
 113     box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2)
 114     margin: 0 auto
 115
 116 h1.text-muted, h2.text-muted, h3.text-muted
 117     margin-top: 10px
 118
 119 /* ----- BOOTSTRAP HACK FOR HEADER NAV BAR ----- */
 120
 121 .navbar.navbar-default.navbar-static-top
 122     margin-bottom: 0
 123
 124 /* ----- BOOTSTRAP HACK FOR STICKY FOOTER ----- */
 125
 126 html,body, #wrapwrap
 127     box-sizing: border-box
 128     height: 100%
 129
 130 #wrapwrap
 131     display: table
 132     width: 100%
 133
 134 header, #wrap, footer
 135     display: table-row
 136
 137 footer
 138     height: 100%
 139     background: rgb(239, 248, 248)
 140     background: rgba(100, 200, 200, 0.1)
 141
 142 #footer_container
 143     padding-top: 24px
 144     padding-bottom: 12px
 145
 146 /* ----- BOOTSTRAP FIX ----- */
 147
 148 .col-md-12
 149     float: left
 150     width: 100%
 151
 152 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 153
 154 .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
 155     background-image: url('/website/static/src/img/drag_here.png')
 156
 157 .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
 158     background-image: url('/website/static/src/img/edit_here.png')
 159     background-repeat: no-repeat
 160     background-position: center
 161     height: 220px !important
 162
 163 .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
 164     position: static
 165
 166 .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
 167     content: 'Press The Top-Left Edit Button'
 168     text-align: center
 169     display: block
 170     padding-top: 160px
 171     padding-bottom: 30px
 172     color: grey
 173     font-size: 24px
 174
 175 .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
 176     content: 'Drag Building Blocks Here'
 177
 178 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 179
 180 .navbar .nav > li > p
 181     margin-bottom: 0px
 182
 183 // .navbar .nav > li  a
 184 //     text-shadow: none
 185
 186 // .nav > li  a
 187 //     display: block
 188
 189 .carousel-inner .item
 190     height: 100%
 191     background-size: 100%
 192
 193 .carousel
 194     &.oe_small .carousel-inner
 195         height: 200px
 196     &.oe_medium .carousel-inner
 197         height: 300px
 198     &.oe_big .carousel-inner
 199         height: 450px
 200     .carousel-caption
 201         h1, h2, h3
 202             margin-top: 10px
 203             margin-bottom: 10px
 204     .carousel-image
 205         right: 10%
 206         left: 50%
 207         top: 5%
 208         bottom: 5%
 209         position: absolute
 210         text-align: center
 211         img
 212             height: 100%
 213             margin: 0 auto
 214     .item.text_image
 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     .item.text_only
 223         .carousel-image
 224             display: none !important
 225         .carousel-caption
 226             left: 10%
 227             right: 10%
 228             top: 10%
 229             text-align: center
 230     .item.image_text
 231         .carousel-caption
 232             left: auto
 233             text-align: left
 234             right: 10%
 235             bottom: 10%
 236             padding: 20px
 237             background: rgba(0, 0, 0, 0.4)
 238         .carousel-image
 239             right: 50%
 240             left: 10%
 241     .carousel-control
 242         cursor: pointer
 243         span
 244             top: 50%
 245             position: absolute
 246             margin-top: -8px
 247         &.left span
 248             left: 10px
 249         &.right span
 250             right: 10px
 251
 252 /* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
 253
 254 .dark
 255     background: #eff8f8
 256     background: rgba(100, 200, 200, 0.14)
 257     -webkit-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset
 258     -moz-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset
 259     box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset
 260
 261 .nav-hierarchy
 262     padding-left: 16px
 263
 264 #themes-list .well
 265     padding: 0 0 20px 0
 266
 267 /* Parallax Theme */
 268
 269 .parallax_quote
 270     background: url('/website/static/src/img/parallax/quote.png') center center no-repeat fixed
 271     background-size: contain
 272     .carousel-indicators
 273         li
 274             border: 1px solid grey
 275         .active
 276             background-color: grey
 277
 278 .parallax
 279     position: relative
 280     background-size: 100%
 281     &.oe_small
 282         height: 200px
 283     &.oe_medium
 284         height: 300px
 285     &.oe_big
 286         height: 450px
 287 /* -- Hack for removing double scrollbar from mobile preview -- */
 288 div#mobile-preview.modal
 289     overflow: hidden
 290     overflow-y: hidden
 291
 292 ul.nav-stacked > li > a
 293     padding: 2px 15px
 294
 295 #customize-menu .dropdown-header
 296     text-transform: uppercase
 297
 298 /* ---- PUBLISH ---- */
 299 .css_unpublish, .css_publish
 300     display: none
 301 .css_published .css_unpublish, .css_unpublished .css_publish
 302     display: block
 303
 304 [data-publish='off']
 305     opacity: 0.5
 306
 307 /* ---- END of PUBLISH ---- */
 308
 309
 310
 311 ::selection
 312     background: rgba(150, 150, 220, 0.3)
 313
 314 .logo-img
 315     width: 220px
 316
 317
 318 .oe_demo
 319     position: relative
 320     img
 321         width: 100%
 322     div
 323         position: absolute
 324         left: 0
 325         background-color: rgba(0,0,0,0.4)
 326         opacity: 0.85
 327         bottom: 0px
 328         width: 100%
 329         padding: 7px
 330         color: white
 331         font-weight: bold
 332         a
 333             color: white