[MERGE] forward port of branch 8.0 up to e883193
[odoo/odoo.git] / addons / web / static / src / css / base.sass
index 8c78cf6..13be060 100644 (file)
@@ -55,7 +55,7 @@ $sheet-padding: 16px
     background-image: -webkit-radial-gradient(circle, $gradient)
     background-image: -moz-radial-gradient($gradient)
     background-image: -ms-radial-gradient($gradient)
-    background-image: radial-gradient($gradient)
+    background-image: radial-gradient(circle, $gradient)
 
 @mixin radius($radius: 5px)
     -moz-border-radius: $radius
@@ -143,6 +143,52 @@ $sheet-padding: 16px
 
 // }}}
 
+#oe_main_menu_navbar
+    min-height: 34px
+    z-index: 1001
+    border-radius: 0
+    li a, li button
+        padding: 4px 8px 4px 8px
+        margin-top: 2px
+        font-size: 13px
+    .oe_topbar_avatar
+        max-height: 18px
+        width: auto
+        
+#oe_main_menu_navbar.navbar
+    margin-bottom: 0px
+
+.oe_systray
+    margin-right: 0px !important
+
+// Notifications {{{
+.oe_notification
+    z-index: 1600
+    
+.oe_webclient_timezone_notification
+    a
+        color: white
+        text-decoration: underline
+    p
+        margin-top: 1em
+    dt
+        font-weight: bold
+.oe_timezone_systray
+    span
+        margin-top: 1px
+        background-color: #f6cf3b
+// }}}
+// Top Menu {{{
+.navbar
+    .oe_topbar_name
+        max-width: 150px
+        display: inline-block
+        height: 15px // Customize to manage caret when topbar_name is over sized.
+        text-overflow: ellipsis
+        white-space: nowrap
+        overflow: hidden // Customize to bring ellipsis when topbar_name is over sized.
+// }}}
+
 .openerp
     // Global style {{{
     padding: 0
@@ -152,7 +198,11 @@ $sheet-padding: 16px
     font-size: 13px
     background: white
     &.openerp_webclient_container
-        height: 100%
+        height: calc(100% - 34px)
+        overflow: auto
+    @media (max-width: 768px)
+        &.openerp_webclient_container
+            height: calc(100% - 52px)
     // }}}
     //Placeholder style{{{
     \:-moz-placeholder
@@ -190,8 +240,7 @@ $sheet-padding: 16px
     td
         vertical-align: top
     .oe_title
-        width: 38%
-        float: left    
+        float: left
     .oe_title:after
         content: "."
         display: block
@@ -330,6 +379,14 @@ $sheet-padding: 16px
             @include box-shadow(none)
             &:hover
                 background: #ED6F6A
+    .oe_warning_redirect
+        border: none !important
+        padding: 0 !important
+        margin-left: 20px !important
+        background: #f5f7f9 !important
+        box-shadow: none !important
+        &:hover
+            text-decoration: underline !important
     .oe_stat_button
         font-weight: normal
         width: 132px !important
@@ -442,12 +499,6 @@ $sheet-padding: 16px
     .btn-group.kanban_state
         padding-top: 8px
         margin-right: 4px !important
-        .dropdown-menu
-            min-width: 100%
-            padding-right: 10px !important
-        .dropdown-menu li a, .dropdown-menu li a:hover, .dropdown-menu li a:focus
-            padding-left: 5px
-            padding-right: 0px
         a
             color: #333333
     // }}}
@@ -472,19 +523,19 @@ $sheet-padding: 16px
                 height: 16px
         &.oe_vertical
             label
-                margin-left: 4px
-        &.oe_form_required
-            .oe_radio_input
-                border: 2px solid transparent
                 display: inline-block
-                height: 12px
-                width: 12px
-                vertical-align: top
-                border-radius: 10px
-                margin: 1px 0
-            &.oe_form_invalid
-                .oe_radio_input
-                    border-color: red
+                margin-left: 20px
+        .oe_radio_input
+            border: 2px solid transparent
+            display: inline-block
+            height: 12px
+            width: 12px
+            vertical-align: top
+            border-radius: 10px
+            margin: 1px 0
+            position: absolute
+        &.oe_form_required.oe_form_invalid .oe_radio_input
+            border-color: red
     .oe_tags
         &.oe_inline
             min-width: 250px
@@ -649,7 +700,7 @@ $sheet-padding: 16px
     // Loading {{{
     .oe_loading
         display: none
-        z-index: 100
+        z-index: 1001
         position: fixed
         top: 0
         right: 50%
@@ -664,23 +715,6 @@ $sheet-padding: 16px
         border-bottom-right-radius: 8px
         border-bottom-left-radius: 8px
     // }}}
-    // Notifications {{{
-    .oe_notification
-        z-index: 1500
-        
-    .oe_webclient_timezone_notification
-        a
-            color: white
-            text-decoration: underline
-        p
-            margin-top: 1em
-        dt
-            font-weight: bold
-    .oe_timezone_systray
-        span
-            margin-top: 1px
-            background-color: #f6cf3b
-    // }}}
     // CrashManager {{{
     .oe_dialog_warning
         width: 100%
@@ -712,131 +746,6 @@ $sheet-padding: 16px
         .oe_topbar, .oe_leftbar
             display: none
     // }}}
-    // Top Menu {{{
-
-    .navbar
-        .oe_topbar_anonymous_login
-            background-color: #dc5f59
-            color: #eeeeee
-            @include vertical-gradient(#FC8787, #800000)
-            a
-                display: block
-                padding: 5px 10px 7px
-                line-height: 20px
-                height: 30px
-                text-decoration: none
-                color: white
-                background: transparent
-                @include transition(all 0.2s ease-out)
-            a:hover
-                background: rgba(0,0,0,0.1)
-                color: white
-                text-shadow: 0px 0px 3px rgba(0,0,0,0.2)
-                @include box-shadow(0 1px 2px rgba(0,0,0,0.2) inset)
-        .oe_topbar_item
-            display: block
-            padding: 5px 10px 26px
-            line-height: 20px
-            height: 20px
-            text-decoration: none
-            color: #eee
-            vertical-align: top
-            text-shadow: 0 1px 1px rgba(0,0,0,0.2)
-            @include transition(all 0.2s ease-out)
-            &:hover
-                background: rgba(0,0,0,0.2)
-                text-shadow: black 0px 0px 3px
-                color: white
-                @include box-shadow(0 1px 2px rgba(0,0,0,0.4) inset)
-
-        .oe_topbar_avatar
-            width: 24px
-            height: 24px
-            margin: -2px 2px 0 0
-            @include radius(3px)
-        .oe_topbar_avatar
-            vertical-align: top
-        .oe_dropdown_arrow:after
-            border-top: 4px solid white
-        .dropdown_menu
-            top: 32px
-            background: #333
-            background: rgba(37,37,37,0.9)
-            border-color: #999
-            border-color: rgba(0, 0, 0, 0.2)
-            border-style: solid
-            border-width: 0 2px 1px
-            @include radius(0 0 6px 6px)
-            @include background-clip()
-            li
-                float: none
-                padding: 3px 12px
-                a
-                    color: #eee
-                &:hover
-                    @include vertical-gradient(#292929, #191919)
-                    @include box-shadow(none)
-        .oe_topbar_name
-            max-width: 150px
-            display: inline-block
-            height: 15px // Customize to manage caret when topbar_name is over sized.
-            text-overflow: ellipsis
-            white-space: nowrap
-            overflow: hidden // Customize to bring ellipsis when topbar_name is over sized.
-
-    // oe menu is the list of the buttons on the left side of the bar.
-    // So why aren't the buttons oe_topbar_items ? This sad state of affairs
-    // is a leftover from an uncomplete refactoring when the left and top menu
-    // were merged. You are welcome to refactor and clean this up
-    .navbar-nav
-        float: left
-        padding: 0
-        margin: 0
-        font-size: 13px
-        > li
-            list-style-type: none
-            padding: 0
-            margin: 0
-            float: left
-            display: block
-            color: #eeeeee
-            > a
-                display: block
-                padding: 5px 10px 26px !important
-                line-height: 20px
-                height: 20px
-                text-decoration: none
-                color: #eee !important
-                vertical-align: top
-                text-shadow: 0 1px 1px rgba(0,0,0,0.2)
-                @include transition(all 0.2s ease-out)
-                &:hover
-                    background: rgba(0,0,0,0.2)
-                    text-shadow: black 0px 0px 3px
-                    color: white
-                    @include box-shadow(0 1px 2px rgba(0,0,0,0.4) inset)
-            > .active
-                background: rgba(0,0,0,0.30)
-                text-shadow: black 0px 0px 3px
-                @include box-shadow(0 1px 2px rgba(0,0,0,0.4) inset)
-
-    .oe_user_menu
-        float: right
-        padding: 0
-        margin: 0
-        li
-            list-style-type: none
-            float: left
-        .oe_dropdown_menu
-            right: -1px
-
-    .oe_systray > div
-        float: left
-        padding: 0 4px 0 4px
-    .oe_systray
-        float: right
-
-    // }}}
     // Webclient.leftbar {{{
     .oe_leftbar
         display: none
@@ -844,43 +753,53 @@ $sheet-padding: 16px
         background: #f0eeee
         border-right: 1px solid $tag-border
         text-shadow: none
-        padding-bottom: 16px
         > div
-            max-height: 100%
-            overflow-y: auto
-    a.oe_logo
-        position: relative
-        width: 220px
-        display: block
-        text-align: center
-        img
-            margin: 14px 0
-            border: 0
-        .oe_logo_edit
-            margin: 14px 0
-            position: absolute
-            top: 1px
-            padding: 4px
-            width: 100%
-            display: none
-            text-align: center
-            color: #eee
-            background: rgba(37,37,37,0.9)
-            @include box-sizing(border)
-        &:hover .oe_logo_edit_admin
-            display: block
-    .oe_footer
-        position: fixed
-        bottom: 0
-        padding: 4px 0
-        background: #f0eeee
-        width: 220px
-        text-align: center
-        a
-            font-weight: bold
-            color: black
-            span
-                color: #c81010
+            height: 100%
+            display: table
+            width: 220px
+            position: relative
+            a.oe_logo
+                display: table-row
+                text-align: center
+                img
+                    margin: 14px 0
+                    border: 0
+                .oe_logo_edit
+                    margin: 14px 0
+                    position: absolute
+                    top: 1px
+                    padding: 4px
+                    width: 100%
+                    display: none
+                    text-align: center
+                    color: #eee
+                    background: rgba(37,37,37,0.9)
+                    @include box-sizing(border)
+                &:hover .oe_logo_edit_admin
+                    display: block
+            > div
+                display: table-row
+                height: 100%
+                > div
+                    position: relative
+                    height: 100%
+                    > div.oe_secondary_menus_container
+                        position: absolute
+                        position: static\9
+                        top: 0
+                        bottom: 0
+                        left: 0
+                        right: 0
+                        overflow-x: hidden
+                        overflow-y: auto
+            .oe_footer
+                background: #f0eeee
+                text-align: center
+                a
+                    font-weight: bold
+                    color: black
+                    span
+                        color: #a24689
     // }}}
     // Webclient.leftbar items {{{
 
@@ -928,26 +847,56 @@ $sheet-padding: 16px
             margin-left: 20px
     // }}}
     // About openerp {{{
+    $link-color-odoo: #a24689
     .oe_about
-        background-color: white
-        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAKUlEQVQIHWO8e/fufwYsgAUkJigoiCIF5DMyoYggcUiXgNnBiGQKmAkARpcEQeriln4AAAAASUVORK5CYII=)
-        @include radius(0 0 2px 2px)
+        .label
+            background-color: $link-color-odoo
         a
-            color: $link-color
-            &:hover
-                text-decoration: underline
-            &:focus
-                outline: none
-        .oe_logo
-            margin-left: -6px
-        .oe_bottom
-            text-shadow: 0 1px 1px #999999
-            @include vertical-gradient(#b41616, #600606)
-            color: #eee
-            padding: 0 16px
-            @include radius(0 0 2px 2px)
-            a
-                color: #eee
+            color: $link-color-odoo
+
+        .user-details
+            position: relative
+            padding: 0
+            margin-bottom: 275px
+            .user-image
+                width: 100%
+                text-align: center
+            .user-info-block
+                width: 100%
+                position: absolute
+                top: 55px
+                padding-top: 35px
+                .user-heading
+                    text-align: center
+                    margin: 10px 0 0
+                .navigation
+                    li
+                        a
+                            padding: 10px 20px
+                        &.active a
+                            background: $link-color-odoo
+                            color: #fff
+                .user-body
+                    text-align: center
+                    .tab-content > div
+                        float: left
+                        width: 100%
+        a.oe_activate_debug_mode
+            color: white !important
+            font-size: 100%
+        #social
+            i
+                margin: 10px
+                &:hover
+                    @include transform(scale(1.3))
+            .social-fb:hover
+                color: #3B5998
+            .social-tw:hover
+                color: #4099FF
+            .social-gp:hover
+                color: #d34836
+            .social-lk:hover
+                color: #007bb6
     // }}}
     // ActionManager {{{
     a.oe_form_uri:hover
@@ -961,13 +910,21 @@ $sheet-padding: 16px
             position: relative
             height: 100%
             > .oe_view_manager
-                > .oe_view_manager_body
-                    position: absolute
-                    overflow: auto
-                    top: 66px
-                    bottom: 0
-                    left: 0
-                    right: 0
+                > .oe_view_manager_wrapper
+                    display: table-row
+                    height: 100%
+                    > div
+                        position: relative
+                        height: 100%
+                        > .oe_view_manager_body
+                            position: absolute
+                            position: static\9
+                            top: 0
+                            bottom: 0
+                            left: 0
+                            right: 0
+                            overflow: auto
+
 
         .oe_breadcrumb_item:not(:last-child)
             max-width: 7em
@@ -1145,6 +1102,7 @@ $sheet-padding: 16px
     // }}}
     // FormPopup {{{
     .oe_popup_form 
+        display: table
         .oe_formview .oe_form_pager
             display: none !important
         // Customize label weight for popup wizard appear from another wizard according bootstrap3
@@ -1289,10 +1247,45 @@ $sheet-padding: 16px
                         text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
                         @include radius(2px)
 
+        .oe-autocomplete
+            display: none
+            position: absolute
+            width: 300px
+            background-color: white
+            border: 1px solid #afafb6
+            z-index: 666
+            margin-top: 2px
+            cursor: default
+            @include radius(3px)
+            @include box-shadow(0 1px 4px rgba(0, 0, 0, 0.3))
+            ul
+                list-style-type: none
+                padding-left: 0
+                margin: 5px 0px
+                li
+                    padding-left: 20px
+                    text-shadow: 0 0 0 white
+                    span:first-child
+                        margin-right: 5px
+                    span.oe-expand
+                        cursor: pointer
+                li.oe-indent
+                    margin-left: 20px
+                li.oe-selection-focus
+                    background-color: #7c7bad
+                    color: white
+                li.oe-separator
+                    margin-top: 2px
+                    margin-bottom: 2px
+                    border-top: 1px solid #afafb6
+                li.oe-separator:last-child
+                    display: none
+
+
     .oe_searchview_drawer_container
         overflow: auto
     .oe_searchview_drawer
-        display:none
+        display: none
         width: 100%
         cursor: default
         display: none
@@ -1350,6 +1343,12 @@ $sheet-padding: 16px
                 cursor: pointer
                 position: relative
                 margin-right: 8px
+                > span
+                    display: inline-block
+                    max-width: 250px
+                    text-overflow: ellipsis
+                    vertical-align: bottom
+                    overflow: hidden
         form
             margin-left: 12px
             p
@@ -1361,6 +1360,7 @@ $sheet-padding: 16px
             form
                 display: none
         .oe_searchview_custom
+            display: none
             li
                 cursor: pointer
                 position: relative
@@ -1389,6 +1389,7 @@ $sheet-padding: 16px
                 margin-top: 2px
 
         .oe_searchview_advanced
+            overflow: auto
             form
                 display: none
                 margin-top: 8px
@@ -1571,7 +1572,7 @@ $sheet-padding: 16px
                 padding: 0 16px
     // }}}
     // FormView.header {{{
-    .oe_form > :not(.oe_form_nosheet) header
+    .oe_form > :not(.oe_form_nosheet) header, .oe_form > .oe_form_nosheet header
         padding-left: 2px
         ul:not(.oe_tooltip_technical):not(.oe_dropdown_menu)
             display: inline-block
@@ -1690,8 +1691,8 @@ $sheet-padding: 16px
         font-size: 20px
         margin: 15px 0px 10px 0px
         color: $section-title-color
-    .oe_horizontal_separator:empty
-        height: 5px
+        &:empty
+            height: 5px
     .oe_vertical_separator
         border-left: 1px solid #666
         padding: 0 4px 0 4px
@@ -1786,8 +1787,6 @@ $sheet-padding: 16px
             white-space: nowrap
         .oe_form_field_boolean
             width: auto
-        .oe_datepicker_container
-            display: none
         .oe_datepicker_root
             display: inline-block
         .oe_form_required
@@ -1876,7 +1875,7 @@ $sheet-padding: 16px
             .oe_form_field_image_controls
                 position: absolute
                 top: 1px
-                padding: 4px 0
+                padding: 6px 0
                 width: 100%
                 display: none
                 text-align: center
@@ -1913,7 +1912,7 @@ $sheet-padding: 16px
                 text-shadow: none
                 .oe_e
                     position: relative
-                    top: -1px
+                    top: -10px
                     left: -9px                    
             input.oe_form_binary_file
                 display: inline-block
@@ -2069,7 +2068,7 @@ $sheet-padding: 16px
             .oe_view_manager_view_list
                 min-height: 132px
 
-        .oe_form_field_one2many_list_row_add
+        .oe_form_field_one2many_list_row_add,.oe_form_field_many2many_list_row_add
             font-weight: bold
         .oe_list_content
             > thead
@@ -2112,7 +2111,7 @@ $sheet-padding: 16px
     .oe_list_editable .oe_list_content td.oe_list_field_cell
         padding: 4px 6px 3px
     .oe_list.oe_list_editable.oe_editing
-        .oe_edition .oe_list_field_cell:not(.oe_readonly)
+        .oe_edition .oe_list_field_cell
             *
                 visibility: hidden
             color: transparent
@@ -2124,6 +2123,11 @@ $sheet-padding: 16px
         .oe_input_icon
             margin-top: 5px
         .oe_form_field
+            &.oe_list_field_handle
+                color: transparent
+            &.oe_readonly
+                padding: 4px 6px 3px
+                text-align: left
             min-width: 0
             max-width: none
             input, textarea
@@ -2134,9 +2138,14 @@ $sheet-padding: 16px
             input, textarea, select
                 min-width: 0
             &.oe_form_field_float,&.oe_form_view_integer
-                input
+                &.oe_readonly
+                    padding: 6px 0px 0px
                     text-align: right
+                span
+                    padding: 0px 6px
+                input
                     width: 100% !important
+                    text-align: right
             &.oe_form_field_datetime,&.oe_form_field_date
                 input.oe_datepicker_master
                     width: 100% !important
@@ -2361,28 +2370,6 @@ $sheet-padding: 16px
         line-height: 1.2em
     // }}}
     // Bootstrap HACKS {{{
-    .navbar
-        min-height: 32px
-        margin-bottom: 0px
-        border: none
-        z-index: 1
-        position: static
-        background-color: #414141
-        @include vertical-gradient(#646060, #262626)
-    .navbar-default
-        .navbar-nav
-            li
-                a:hover,a:focus
-                    background: rgba(0, 0, 0, 0.3)
-            .open > a,a:hover,a:focus
-                background: rgba(0, 0, 0, 0.3) !important
-            .dropdown > a .caret
-                border-top-color: #777 !important
-                border-bottom-color: #777 !important
-    .navbar-nav
-        li
-            a
-                padding: 4px 32px 4px 12px
     .oe_navbar .dropdown-menu
         font-size: 13px
         padding: 4px 0
@@ -2405,11 +2392,11 @@ $sheet-padding: 16px
             font-weight: normal
 
     // Customize bootstrap3 for leftbar
-    .nav
+    .nav-pills
         li > a
-            padding: 3px 4px 2px 18px
+            padding: 6px 4px 2px 18px
             color: #4c4c4c
-        nav-pills.nav-stacked > li > ul
+        .nav-stacked > li > ul
             padding-left: 16px
     .nav-pills > li.active,a.list-group-item.active
         > a
@@ -2665,11 +2652,15 @@ body.oe_single_form
             > .arrow span
                 background-color: #729fcf !important
 
+    .oe_webclient
+        height: auto !important
 // }}}
 
 // @media print {{{
 @media print
     .openerp
+        .oe_application > div > .oe_view_manager > .oe_view_manager_wrapper > div > .oe_view_manager_body
+            overflow: visible
         .oe_header_row, ul.oe_header, div.oe_mail_thread_action, .oe_mail_recthread_actions, .oe_button_box, .oe_form button, button.oe_invite, .oe_form header, .openerp .oe_notebook > li.ui-state-default, .oe_topbar, .oe_leftbar, .oe_loading
             // We use !important here because jQuery adds @style = display: block on elements when using $.fn.show()
             display: none !important
@@ -2700,6 +2691,8 @@ body.oe_single_form
             background: none
         .openerp div.oe_mail_wall
             overflow: hidden !important
+    .openerp.openerp_webclient_container
+        overflow: visible
 // }}}
 
 // End of customize
@@ -2714,6 +2707,7 @@ body.oe_single_form
     background: white
     text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5)
     background-color: transparent
+    z-index: 1800
     .tooltip-inner
         text-align: left !important
         max-width: 350px
@@ -2755,6 +2749,8 @@ body.oe_single_form
         padding: 1px
         height: 18px
         font-size: 20px
+    .modal-body
+        overflow-x: auto
     .modal-footer
         text-align: left
     .oe_button
@@ -2773,8 +2769,43 @@ input[type="radio"], input[type="checkbox"]
     background-color: black
     opacity: 0.6000000238418579
 
+/* ---- EDITOR TOUR ---- {{{ */
+
+div.tour-backdrop
+    z-index: 2009
+.popover.tour
+    &.orphan .arrow
+        display: none
+    .popover-navigation
+        padding: 9px 14px
+        *[data-role="end"]
+            float: right
+        *[data-role="next"],*[data-role="end"]
+            cursor: pointer
+.popover.fixed
+    position: fixed
+.tour-backdrop
+    position: fixed
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+    z-index: 1100
+    background-color: #000
+    opacity: 0.8
+
+
+// }}}
 
 body
-    overflow: auto
+    overflow: hidden
+
+// hack to make IE11 work
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) 
+    .oe_secondary_menus_container 
+        position: static !important
+
+
+
 // au BufWritePost,FileWritePost *.sass :!sass --style expanded --line-numbers <afile> > "%:p:r.css"
 // vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker: