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

442 lines
9.1 KiB
Sass

@charset "utf-8"
@import "common"
/*
* THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
*
* css for editor buttons, openerp widget included in the website and other
* stuff must go to the editor.css
*
*/
/* ----- GENERIC LAYOUTING HELPERS ---- */
/* Vertical Spacing */
.mt128
margin-top: 128px !important
.mt92
margin-top: 92px !important
.mt64
margin-top: 64px !important
.mt48
margin-top: 48px !important
.mt32
margin-top: 32px !important
.mt16
margin-top: 16px !important
.mt8
margin-top: 8px !important
.mt4
margin-top: 4px !important
.mt0
margin-top: 0px !important
.mb128
margin-bottom: 128px !important
.mb92
margin-bottom: 92px !important
.mb64
margin-bottom: 64px !important
.mb48
margin-bottom: 48px !important
.mb32
margin-bottom: 32px !important
.mb16
margin-bottom: 16px !important
.mb8
margin-bottom: 8px !important
.mb4
margin-bottom: 4px !important
.mb0
margin-bottom: 0px !important
/* Extra Styles */
img.shadow
+border-radius(3px)
+box-shadow(0px 3px 8px rgba(0, 0, 0, 0.2))
margin: 0 auto
h1.text-muted, h2.text-muted, h3.text-muted
margin-top: 10px
header
a.navbar-brand.logo
padding: 0 15px
a.navbar-brand
img
max-height: 50px
// add {WORD JOINER} (equivalent to deprecated ZERO WIDTH NO-BREAK SPACE) at
// the beginning of paragraphs so they don't "disappear" after saving when
// used solely for spacing.
#wrapwrap p:empty:after
content: '\2060'
/* ----- Snippets Styles ----- */
.para_large
font-size: 120%
.readable
font-size: 120%
max-width: 700px
margin-left: auto
margin-right: auto
/* ----- EDITOR ----- */
#oe_main_menu_navbar
min-height: 34px
z-index: 1001
+border-radius(0px)
margin-bottom: 0px
li a, li button
padding: 4px 8px 4px 8px
margin-top: 2px
font-size: 13px
.navbar-nav.navbar-right:last-child
margin-right: 0 !important
.css_non_editable_mode_hidden
display: none
/* ----- BOOTSTRAP FIX ----- */
.container, .readable
.container
padding-left: 0
padding-right: 0
width: auto
/* ----- BOOTSTRAP HACK FOR HEADER NAV BAR ----- */
.navbar.navbar-static-top
margin-bottom: 0
ul.nav
> li.divider
margin-top: 15px
padding-top: 20px
border-right: 1px solid grey
/* ----- BOOTSTRAP HACK FOR STICKY FOOTER ----- */
html,body, #wrapwrap
+box-sizing(border-box)
height: 100%
#wrapwrap
display: table
width: 100%
header, main, footer
display: table-row
footer
height: 100%
background: rgb(239, 248, 248)
background: rgba(200, 200, 200, 0.1)
#footer_container
padding-top: 24px
padding-bottom: 12px
/* ----- BOOTSTRAP FIX ----- */
.col-md-12
float: left
width: 100%
/* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
.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
background-image: url('/website/static/src/img/drag_here.png') !important
.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
background-image: none
background-repeat: no-repeat
background-position: center
height: 220px !important
.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
position: static
.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
content: ' '
text-align: center
display: block
padding-top: 160px
padding-bottom: 30px
color: grey
font-size: 24px
.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
content: 'Drag Building Blocks Here' !important
.css_editable_display
display: none
/* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
.navbar .nav > li > p
margin-bottom: 0px
// .navbar .nav > li a
// text-shadow: none
// .nav > li a
// display: block
/* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
.nav-hierarchy
padding-left: 16px
#themes-list .well
padding: 0 0 20px 0
/* -- Hack for removing double scrollbar from mobile preview -- */
div#mobile-preview.modal
overflow: hidden
ul.nav-stacked > li > a
padding: 2px 15px
#customize-menu .dropdown-header
text-transform: uppercase
/* ---- PUBLISH ---- */
.css_published
.btn-danger, .css_publish
display: none
.css_unpublished
.btn-success, .css_unpublish
display: none
[data-publish='off']>*:not(.css_options)
+opacity(0.5)
/* ---- END of PUBLISH ---- */
@include selection
background: rgba(150, 150, 220, 0.3)
.logo-img
width: 220px
.oe_demo
position: relative
img
width: 100%
div
position: absolute
left: 0
background-color: rgba(0,0,0,0.4)
opacity: 0.85
bottom: 0px
width: 100%
padding: 7px
color: white
font-weight: bold
a
color: white
/* ---- SNIPPETS --- */
.oe_img_bg
background-size: 100%
.carousel, .parallax, .blockquote
overflow: hidden
@media (max-width: 400px)
section, .parallax, .row, .hr, .blockquote
height: auto !important
.carousel-inner
height: 100%
.item
height: 100%
background-size: cover
.carousel
.carousel-control
cursor: pointer
span
top: 50%
position: absolute
margin-top: -8px
&.left
left: -10px
*
position: absolute
top: 50%
z-index: 5
right: 50%
&.right
right: -10px
*
position: absolute
top: 50%
z-index: 5
left: 50%
.quotecarousel
padding-bottom: 16px
.hr
padding: 4px 0
/* Parallax Theme */
div.carousel
.carousel-indicators
li
border: 1px solid grey
.active
background-color: grey
span.carousel-img img, div.carousel-content
max-height: 95%
padding: 10px
div.carousel-content
background-color: black
color: white
background: rgba(0, 0, 0, 0.3)
margin-top: 75px
.parallax
background-size: cover
> div
position: relative
display: table
width: 100%
min-height: 200px
> div
display: table-cell
vertical-align: middle
padding: 32px 0
/* Background */
.oe_dark
background: #eff8f8
background: rgba(200, 200, 200, 0.14)
.oe_black
background-color: rgba(0, 0, 0, 0.9)
color: white
.oe_green
background-color: #169C78
color: white
.text-muted
color: #ddd
.oe_blue_light
background-color: #41b6ab
color: white
.text-muted
color: #ddd
.oe_blue
background-color: #34495e
color: white
.oe_orange
background-color: #f05442
color: white
.text-muted
color: #ddd
.oe_purple
background-color: #b163a3
color: white
.text-muted
color: #ddd
.oe_red
background-color: #9C1b31
color: white
.text-muted
color: #ddd
/* Misc */
.texttop
vertical-align: top
table.well tr
th
text-align: right
padding-right: 10px
td
padding-right: 5px
.logo-img
width: 220px
.oe_demo
position: relative
img
width: 100%
div
position: absolute
left: 0
background-color: rgba(0,0,0,0.4)
opacity: 0.85
bottom: 0px
width: 100%
padding: 7px
color: white
font-weight: bold
a
color: white
address
.fa.fa-mobile-phone
margin: 0 3px 0 2px
.fa.fa-file-text-o
margin-right: 1px
span[data-oe-type="monetary"]
white-space: nowrap
.oe_template_fallback
@include column-count(3)
.oe_website_login_container
width: 400px
margin: 40px auto
.oe_website_overflow_ellipsis
white-space:nowrap
overflow:hidden
text-overflow:ellipsis
div.media_iframe_video
height: 0
margin: 0 auto
text-align: center
position: relative
overflow: hidden
padding-bottom: 66.5%
iframe
width: 100%
height: 100%
div
position: absolute
width: 100%
height: 100%
display: none
/* Mobile view */
@media (max-width: 768px)
img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa
-webkit-transform: none !important
-moz-transform: none !important
-ms-transform: none !important
-o-transform: none !important
transform: none !important