///
/// This file regroups the frontend general design rules and portal design
/// rules.
///

// Resize and vertically align navbar’s items relative to $navbar-height
@mixin o-w-fill-navbar($ratio: 0.8) {
    height: round($navbar-height * $ratio);
    margin-top: round($navbar-height * (1 - $ratio) / 2);
}

// Frontend general
#wrapwrap {
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;

    > * {
        display: table-row;
    }
    > main {
        height: 100%;
    }
}

header {
    a.navbar-brand.logo {
        padding: 0 15px;

        img {
            @include o-w-fill-navbar;
        }
    }
}
.navbar.navbar-static-top {
    margin-bottom: 0;
    ul.nav > li {
        &.divider {
            @include o-w-fill-navbar;
            border-right: 1px solid $navbar-default-link-disabled-color;
            @media (max-width: $screen-xs-max) {
                display: none;
            }
        }

        &.active + .divider {
            visibility: hidden;
        }
    }
    .nav.navbar-nav.pull-right {
        @media (max-width: $screen-xs-max) {
            float: none!important;
        }
    }
}
ul.nav-stacked > li > a {
    padding: 2px 15px;
}

footer {
    background-color: #F8F8F8;

    #footer {
        padding-top: 32px;

        // TODO This solves a bug that should be solved differently when
        // possible. When automatic footer option is enabled, <ul/> become non
        // editable because of <xpath/>. So adding a link does not duplicate the
        // <li/> elements but the <a/> elements.
        ul.list-unstyled > li > a {
            display: block;
        }
    }
}

// Odoo options classes
.jumbotron {
    margin-bottom: 0;
}

// Typography
ul {
    list-style-type: disc;
}
li > ul {
    list-style-type: circle;
}
li > * > li > ul {
    list-style-type: square;
}
li > * > li > * > li > ul {
    list-style-type: disc;
}
li > * > li > * > li > * > li > ul {
    list-style-type: circle;
}
li > * > li > * > li > * > li > * > li > ul {
    list-style-type: square;
}
li > * > li > * > li > * > li > * > li > * > li > ul {
    list-style-type: disc;
}
ol {
    list-style-type: decimal;
}
li > ol {
    list-style-type: lower-alpha;
}
li > * > li > ol {
    list-style-type: lower-greek;
}
li > * > li > * > li > ol {
    list-style-type: decimal;
}
li > * > li > * > li > * > li > ol {
    list-style-type: lower-alpha;
}
li > * > li > * > li > * > li > * > li > ol {
    list-style-type: lower-greek;
}
li > * > li > * > li > * > li > * > li > * > li > ol {
    list-style-type: decimal;
}
li > p {
    margin: 0;
}
hr {
    padding: 4px 0;
}

// Bootstrap hacks
.container {
    max-width: 100%;
}
.container .container {
    padding-left: 0;
    padding-right: 0;
    width: auto;
}
[class^="col-md-"] {
    min-height: 24px;
}

// Images spacing
img, .media_iframe_video, .o_image {
    &.pull-right {
        margin-left: $grid-gutter-width / 2;
    }
    &.pull-left {
        margin-right: $grid-gutter-width / 2;
    }
}
img {
    // Make all images responsive by default but with inline-block display
    @include img-responsive(inline-block);
}

// Others
::-moz-selection {
    background: rgba(150, 150, 220, 0.3);
}
::selection {
    background: rgba(150, 150, 220, 0.3);
}
.oe_demo {
    position: relative;
    img {
        width: 100%;
    }
    div {
        @include o-position-absolute($left: 0, $bottom: 0);
        background-color: rgba(0, 0, 0, 0.4);
        opacity: 0.85;
        width: 100%;
        padding: 7px;
        color: white;
        font-weight: bold;
        a {
            color: white;
        }
    }
}
.oe_search_box {
    padding-right: 23px;
}

// Kept for (up to) saas-12 compatibility
.para_large {
    font-size: 120%;
}
.jumbotron .para_large p {
    font-size: 150%;
}
.readable {
    font-size: 120%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;

    .container {
        padding-left: 0;
        padding-right: 0;
        width: auto;
    }
}

//  Background (kept for 8.0 compatibility) (! some are still used by website_blog)
.oe_dark {
    background-color: 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;
    }
}
.oe_none {
    background-color: #FFFFFF;
}
.oe_yellow {
    background-color: #A2A51B;
}
.oe_green {
    background-color: #149F2C;
}

// Portal specific
.o_portal {
    .breadcrumb {
        margin-bottom: 0px;
        display: inline-block;
    }

    > tbody.o_portal_report_tbody {
        vertical-align: middle;
    }
}

.o_portal_wrap {
    .o_portal_my_home > .page-header > a:hover {
        text-decoration: none;
    }

    .o_portal_my_doc_table {
        td, th {
            text-align: right;
        }
        tr > :first-child {
            text-align: left;
        }
    }

    .o_portal_search_panel_fixed_width {
        overflow: hidden;
        max-width: 125px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    table.table tr {
        word-wrap: break-word;
    }
}

.oe_attachments .o_image_small {
    height: 40px;
    width: 50px;
}

.o_portal_chatter {
    padding: 10px;

    .o_portal_chatter_avatar{
        width: 45px;
        height: 45px;
    }

    .o_portal_chatter_header {
        margin-bottom: 15px;
    }

    .o_portal_chatter_composer {
        margin-bottom: 15px;
    }

    .o_portal_chatter_messages {
        margin-bottom: 15px;

        .o_portal_chatter_message_title {
            p {
                font-size:85%;
                color:$o-main-color-muted;
                margin: 0px;
            }
        }
    }

    .o_portal_chatter_pager {
        text-align: center;
    }
}

.label-optional {
    font-weight: normal;
}
