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 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 147
 148 .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
 149     background-image: url('/website/static/src/img/drag_here.png')
 150     background-repeat: no-repeat
 151     background-position: center top
 152     height: 200px !important
 153
 154 .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
 155     position: static
 156
 157 .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
 158     content: 'Click Edit To Create Content'
 159     text-align: center
 160     display: block
 161     padding-top: 100px
 162     padding-bottom: 50px
 163     color: grey
 164     font-size: 24px
 165
 166 .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
 167     content: 'Drag Building Blocks Here'
 168
 169 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 170
 171 .navbar .nav > li > p
 172     margin-bottom: 0px
 173
 174 // .navbar .nav > li  a
 175 //     text-shadow: none
 176
 177 // .nav > li  a
 178 //     display: block
 179
 180 .carousel-inner .item
 181     height: 100%
 182
 183
 184 .carousel
 185     &.oe_small .carousel-inner
 186         height: 200px
 187     &.oe_medium .carousel-inner
 188         height: 300px
 189     &.oe_big .carousel-inner
 190         height: 450px
 191     .carousel-caption
 192         h1, h2, h3
 193             margin-top: 10px
 194             margin-bottom: 10px
 195     .carousel-image
 196         right: 10%
 197         left: 50%
 198         top: 5%
 199         bottom: 5%
 200         position: absolute
 201         text-align: center
 202         img
 203             height: 100%
 204             margin: 0 auto
 205     .item.text_image
 206         .carousel-caption
 207             left: auto
 208             right: auto
 209             bottom: 10%
 210             text-align: left
 211             padding: 20px
 212             background: rgba(0, 0, 0, 0.4)
 213     .item.text_only
 214         .carousel-image
 215             display: none !important
 216         .carousel-caption
 217             left: 10%
 218             right: 10%
 219             top: 10%
 220             text-align: center
 221     .item.image_text
 222         .carousel-caption
 223             left: auto
 224             text-align: left
 225             right: 10%
 226             bottom: 10%
 227             padding: 20px
 228             background: rgba(0, 0, 0, 0.4)
 229         .carousel-image
 230             right: 50%
 231             left: 10%
 232     .carousel-control
 233         cursor: pointer
 234         span
 235             top: 50%
 236             position: absolute
 237             margin-top: -8px
 238         &.left span
 239             left: 10px
 240         &.right span
 241             right: 10px
 242
 243 /* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
 244
 245 .dark
 246     background: #eff8f8
 247     background: rgba(100, 200, 200, 0.14)
 248     -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
 249     -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
 250     box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset
 251
 252 .nav-hierarchy
 253     padding-left: 16px
 254
 255 #themes-list .well
 256     padding: 0 0 20px 0
 257
 258 /* Parallax Theme */
 259
 260 .parallax_full
 261     background: #eee top left repeat
 262     min-height: 650px
 263     width: 100%
 264     overflow: hidden
 265     position: relative
 266     > img
 267         position: absolute
 268         top: 0
 269         left: 0
 270
 271 /* -- Hack for removing double scrollbar from mobile preview -- */
 272 div#mobile-preview.modal
 273     overflow: hidden
 274     overflow-y: hidden
 275
 276 ul.nav-stacked > li > a
 277     padding: 2px 15px
 278
 279 #customize-menu .dropdown-header
 280     text-transform: uppercase
 281
 282 /* ---- PUBLISH ---- */
 283
 284 .dropdown .css_unpublish, .dropdown .css_publish
 285     display: none
 286 .dropdown.css_publish .css_unpublish, .dropdown.css_unpublish .css_publish
 287     display: block
 288
 289 .unpublish
 290     opacity: 0.5
 291 [data-publish='off']:not(a)
 292     >:not(.js_publish)
 293         opacity: 0.5
 294 [data-publish]:not(a)
 295     position: relative
 296     overflow: visible
 297     .js_publish
 298         position: absolute
 299         right: -6px
 300         top: -10px
 301         display: none
 302     /*&:hover .js_publish*/
 303     /*     display: block*/
 304
 305 ::selection
 306     background: rgba(150, 150, 220, 0.3)