[MERGE] forward port of branch 8.0 up to 591e329
[odoo/odoo.git] / addons / website / static / src / css / website.sass
index babeee5..5ab63f8 100644 (file)
 .mb0
     margin-bottom: 0px !important
 
-.pt128
-    padding-top: 128px !important
-.pt92
-    padding-top: 92px !important
-.pt64
-    padding-top: 64px !important
-.pt48
-    padding-top: 48px !important
-.pt32
-    padding-top: 32px !important
-.pt16
-    padding-top: 16px !important
-.pt8
-    padding-top: 8px !important
-.pt4
-    padding-top: 4px !important
-.pt0
-    padding-top: 0px !important
-
-.pb128
-    padding-bottom: 128px !important
-.pb92
-    padding-bottom: 92px !important
-.pb64
-    padding-bottom: 64px !important
-.pb48
-    padding-bottom: 48px !important
-.pb32
-    padding-bottom: 32px !important
-.pb16
-    padding-bottom: 16px !important
-.pb8
-    padding-bottom: 8px !important
-.pb4
-    padding-bottom: 4px !important
-.pb0
-    padding-bottom: 0px !important
-
-/* Grid of unequally tall elements */
-.grid > [class*="col-md"]
-    display: inline-block
-    float: none
-    vertical-align: top
-    box-sizing: border-box
-    &.grid-align-top > [class*="col-md"]
-        vertical-align: top
-    &.grid-align-middle > [class*="col-md"]
-        vertical-align: middle
-    &.grid-align-bottom > [class*="col-md"]
-        vertical-align: bottom
-
 /* Extra Styles */
 
 img.shadow
@@ -112,10 +61,63 @@ img.shadow
 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 !important
+
+/* ----- BOOTSTRAP FIX ----- */
+
+.container, .readable
+    .container
+        padding-left: 0
+        padding-right: 0
+        width: auto
+
 /* ----- BOOTSTRAP HACK FOR HEADER NAV BAR ----- */
 
-.navbar.navbar-default.navbar-static-top
+.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 ----- */
 
@@ -133,9 +135,9 @@ header, main, footer
 footer
     height: 100%
     background: rgb(239, 248, 248)
-    background: rgba(100, 200, 200, 0.1)
+    background: rgba(200, 200, 200, 0.1)
 
-#footer_container
+#footer_container, #footer
     padding-top: 24px
     padding-bottom: 12px
 
@@ -145,16 +147,17 @@ footer
     float: left
     width: 100%
 
-.row
-    min-height: 32px
+@-moz-document url-prefix()
+    .table .img-responsive
+        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')
+    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: url('/website/static/src/img/edit_here.png')
+    background-image: none
     background-repeat: no-repeat
     background-position: center
     height: 220px !important
@@ -163,7 +166,7 @@ footer
     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: 'Press The Top-Left Edit Button'
+    content: ' '
     text-align: center
     display: block
     padding-top: 160px
@@ -172,7 +175,10 @@ footer
     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'
+    content: 'Drag Building Blocks Here' !important
+
+.css_editable_display
+    display: none
 
 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 
@@ -190,13 +196,9 @@ footer
 .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
-    overflow-y: hidden
 
 ul.nav-stacked > li > a
     padding: 2px 15px
@@ -212,7 +214,7 @@ ul.nav-stacked > li > a
     .btn-success, .css_unpublish
         display: none
 
-[data-publish='off']
+[data-publish='off']>*:not(.css_options)
     +opacity(0.5)
 
 /* ---- END of PUBLISH ---- */
@@ -241,104 +243,264 @@ ul.nav-stacked > li > a
         a
             color: white
 
+
 /* ---- SNIPPETS --- */
 
-.carousel-inner .item
-    height: 100%
+.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
-    &.oe_small .carousel-inner
-        height: 200px
-    &.oe_medium .carousel-inner
-        height: 300px
-    &.oe_big .carousel-inner
-        height: 450px
-    .carousel-caption
-        left: auto
-        right: auto
-        bottom: 10%
-        text-align: left
-        padding: 20px
-        background: rgba(0, 0, 0, 0.4)
-        h1, h2, h3
-            margin-top: 10px
-            margin-bottom: 10px
-    .carousel-image
-        right: 50%
-        left: 50%
-        top: 5%
-        bottom: 5%
-        position: absolute
-        max-height: 90%
-        margin: 0 auto
-    .item.text_only
-        .carousel-image
-            display: none !important
-        .carousel-caption
-            left: 10%
-            right: 10%
-            top: 10%
-            bottom: auto
-            text-align: center
-            background: transparent
-    .item.image_text
-        .carousel-caption
-            right: 10%
-        .carousel-image
-            left: 10%
     .carousel-control
         cursor: pointer
         span
             top: 50%
             position: absolute
             margin-top: -8px
-        &.left span
-            left: 10px
-        &.right span
-            right: 10px
+        &.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
+
+
+.o_image_floating
+    width: 40%
+    margin: 4px
+    div.o_container
+        position: relative
+        mark
+            display: block
+            position: absolute
+            bottom: 0
+            width: 100%
+            background-color: rgba(86,61,124,.25)
+            a
+                color: white
+    &.o_hide_link div.o_container mark
+        display: none
+    &.o_margin_s
+        margin-bottom: 4px
+        &.pull-right
+            margin-left: 8px
+        &.pull-left
+            margin-right: 8px
+    &.o_margin_m
+        margin-bottom: 8px
+        &.pull-right
+            margin-left: 12px
+        &.pull-left
+            margin-right: 12px
+    &.o_margin_l
+        margin-bottom: 12px
+        &.pull-right
+            margin-left: 16px
+        &.pull-left
+            margin-right: 16px
+    &.o_margin_xl
+        margin-bottom: 24px
+        &.pull-right
+            margin-left: 32px
+        &.pull-left
+            margin-right: 32px
+
+
+/* gallery */
+
+.o_gallery
+    &.o_grid, &.o_masonry
+        &.o_spc-none
+            div.row
+                margin: 0
+            div.row > *
+                padding: 0
+        &.o_spc-small
+            div.row
+                margin: 5px 0
+            div.row > *
+                padding: 0 5px
+        &.o_spc-medium
+            div.row
+                margin: 10px 0
+            div.row > *
+                padding: 0 10px
+        &.o_spc-big
+            div.row
+                margin: 15px 0
+            div.row > *
+                padding: 0 15px
+        .img
+            width: 100%
+    &.o_grid
+        &.size-auto .row
+            height: auto
+        &.size-small .row
+            height: 100px
+        &.size-medium .row
+            height: 250px
+        &.size-big .row
+            height: 400px
+        &.size-small, &.size-medium, &.size-big
+            .img
+                height: 100%
+    &.o_nomode
+        &.o_spc-none
+            .img
+                padding: 0
+        &.o_spc-small
+            .img
+                padding: 5px
+        &.o_spc-medium
+            .img
+                padding: 10px
+        &.o_spc-big
+            .img
+                padding: 15px
+
+    &.o_slideshow .carousel ul.carousel-indicators li
+        border: 1px solid #aaa
+    .carousel-inner .item img
+        max-width: none
+
+.o_gallery.o_slideshow > .container
+    height: 100%
 
+.o_gallery.o_slideshow .carousel, .modal-body.o_slideshow .carousel
+    height: 100%
+    img
+        max-height: 100%
+        max-width: 100%
+        margin: auto
+        position: relative
+        top: 50%
+        -webkit-transform: translateY(-50%)
+        -ms-transform: translateY(-50%)
+        transform: translateY(-50%)
+    ul.carousel-indicators
+        display: block
+        height: auto
+        padding: 0
+        border-width: 0
+        position: absolute
+        bottom: 0
+        li
+            list-style-image: none
+            display: inline-block
+            width: 35px
+            height: 35px
+            margin: 0 0px 5px 5px
+            padding: 0
+            border: 1px solid #aaa
+            text-indent: initial
+            background-size: cover
+            opacity: 0.5
+            background-color: #000
+        li.active
+            opacity: 1
+    .carousel-control.left, .carousel-control.right
+        background-image: none
+        background-color: transparent
 
 /* Parallax Theme */
 
-div.carousel[data-snippet-id="slider"]
+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
-    position: relative
-    background-size: 100%
-    display: table
-    width: 100%
-    min-height: 100px
-    &.oe_small
-        min-height: 200px
-    &.oe_medium
-        min-height: 300px
-    &.oe_big
-        min-height: 450px
+    background-size: cover
     > div
-        display: table-cell
-        vertical-align: middle
-        padding: 32px 0
+        position: relative
+        display: table
+        width: 100%
+        min-height: 200px
+        > div
+            display: table-cell
+            vertical-align: middle
+            padding: 32px 0
+
+/* Background (kept for 8.0 compatibility) */
 
-/* Background */
 .oe_dark
     background: #eff8f8
-    background: rgba(100, 200, 200, 0.14)
-    +box-shadow(0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset)
+    background: rgba(200, 200, 200, 0.14)
+
 .oe_black
     background-color: rgba(0, 0, 0, 0.9)
+    color: white
+
 .oe_green
-    background-color: rgba(0, 128, 0, 0.8)
+    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: rgba(255, 0, 0, 0.8)
-.oe_img_bg
-    background-size: 100%
+    background-color: #9C1b31
+    color: white
+    .text-muted
+        color: #ddd
+
+/* Misc */
 
 .texttop
     vertical-align: top
@@ -377,4 +539,109 @@ address
         margin-right: 1px
 
 span[data-oe-type="monetary"]
-    white-space: nowrap
\ No newline at end of file
+    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
+
+.oe_website_spinner
+    width: 121px
+    input
+        text-align: center
+
+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%
+        position: absolute
+        margin-left: -50%
+    .css_editable_mode_display
+        position: absolute
+        width: 100%
+        height: 100%
+        display: none
+        z-index: 2
+
+/* 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
+
+
+/* Fix: backward compatibility saas-3 */
+
+div.carousel
+    .container
+        > .carousel-caption
+            position: absolute
+            right: 50%
+            left: 50%
+            bottom: 20px
+            > div
+                position: absolute
+                text-align: left
+                padding: 20px
+                background: rgba(0, 0, 0, 0.4)
+                bottom: 20px
+        > .carousel-image
+            top: 5%
+            bottom: 5%
+            position: absolute
+            max-height: 90%
+            margin: 0 auto
+    .item.text_image
+        .container
+            > .carousel-caption
+                left: 10%
+                > div
+                    right: 50%
+                    margin-right: -20%
+                    max-width: 550px
+            > .carousel-image
+                right: 10%
+                left: 50%
+    .item.image_text
+        .container
+            > .carousel-caption
+                right: 10%
+                > div
+                    left: 50%
+                    margin-left: -20%
+                    max-width: 550px
+            > .carousel-image
+                right: 50%
+                left: 10%
+    .item.text_only
+        .container
+            > .carousel-caption
+                left: 10%
+                right: 10%
+                top: 10%
+                bottom: auto
+                > div
+                    text-align: center
+                    background: transparent
+                    bottom: auto
+                    width: 100%
+            > .carousel-image
+                display: none !important