@import "compass/css3"
@import "compass/css3/user-interface"
@import "compass/css3/transition"
@import "compass/support"


/* ---- EDITOR BAR ---- {{{ */

.note-popover, .o_css_editor, .web_editor-dialog, .note-image-dialog
    *
        box-sizing: border-box
    a
        text-decoration: none
    ul, ol
        margin-top: 0
        margin-bottom: 10px

    .clearfix:before, .clearfix:after, .dl-horizontal dd:before, .dl-horizontal dd:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical>.btn-group:before, .btn-group-vertical>.btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-footer:before, .modal-footer:after
        content: " "
        display: table
        clear: both

    .caret
        display: inline-block
        width: 0
        height: 0
        vertical-align: middle
        border-top: 4px solid
        border-right: 4px solid transparent
        border-left: 4px solid transparent

    /* button */

    .btn.dropdown-toggle
        position: relative
        float: left
    .btn
        display: inline-block
        margin-bottom: 0
        font-weight: 400
        text-align: center
        vertical-align: middle
        cursor: pointer
        background-image: none
        border: 1px solid transparent
        white-space: nowrap
        -webkit-user-select: none
        -moz-user-select: none
        -ms-user-select: none
        user-select: none
        border-radius: 4px
        .caret
            margin-left: 0
        &.disabled, &[disabled], &.disabled:hover, &[disabled]:active
            cursor: not-allowed
            pointer-events: none
            opacity: .65
            filter: alpha(opacity=65)
            -webkit-box-shadow: none
            box-shadow: none
    .btn-sm
        padding: 5px 10px
        font-size: 12px
        line-height: 1.5
        border-radius: 3px
    .btn-group
        padding-top: 0
        margin-top: 0
        position: relative
        display: inline-block
        vertical-align: middle
        > .btn
            position: relative
            float: left
            &:first-child
                margin-left: 0
            &:first-child:not(:last-child):not(.dropdown-toggle)
                border-top-right-radius: 0
                border-bottom-right-radius: 0
            &:not(:first-child):not(:last-child):not(.dropdown-toggle)
                border-radius: 0
            &:last-child:not(:first-child), >.dropdown-toggle:not(:first-child)
                border-bottom-left-radius: 0
                border-top-left-radius: 0
            &+.dropdown-toggle
                padding-left: 8px
                padding-right: 8px
            &.active
                color: #333
                background-color: #e6e6e6
                border-color: #adadad
        .btn+.btn, .btn+.btn-group, +.btn, +.btn-group
            margin-left: -1px
    .btn-link
        border-color: transparent
        color: #428bca
        &:hover, &:focus
            color: #2a6496
            text-decoration: underline
            background-color: transparent

    /* form */

    .form-group
        margin-bottom: 15px
    .form-control
        display: block
        width: 100%
        height: 34px
        padding: 6px 12px
        font-size: 14px
        line-height: 1.42857143
        color: #555
        background-color: #fff
        background-image: none
        border: 1px solid #ccc
        border-radius: 4px
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075)
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075)
    .form-horizontal .form-group
        margin-left: -15px
        margin-right: -15px
    .form-group
        margin-bottom: 15px
    .form-control.select2-container
        height: auto !important
        padding: 0
    label
        display: inline-block
        max-width: 100%
        margin-bottom: 5px
        font-weight: 700

    /* col */

    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-lg-12
        position: relative
        min-height: 1px
        padding-left: 15px
        padding-right: 15px
        width: 100%

    /* dropdown */

    .dropdown
        position: relative
    .dropdown, .btn-group
        > .btn
            color: #333
            background-color: #fff
            border-color: #ccc
            text-decoration: none
        > .btn-primary
            color: #fff
            background-color: #428bca
            border-color: #357ebd
    .dropdown-menu
        position: absolute
        top: 100%
        left: 0
        z-index: 1000
        display: none
        float: left
        min-width: 160px
        padding: 5px 0
        margin: 2px 0 0
        list-style: none
        font-size: 14px
        text-align: left
        background-color: #fff
        border: 1px solid #ccc
        border: 1px solid rgba(0,0,0,.15)
        border-radius: 4px
        -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175)
        box-shadow: 0 6px 12px rgba(0,0,0,.175)
        background-clip: padding-box
        > li > a
            display: block !important
            padding: 3px 20px
            clear: both
            font-weight: normal
            color: #666
            white-space: nowrap
            background: transparent
        > li.active > a
            color: #fff
            text-decoration: none
            background-color: #428bca
            outline: 0
    .open > .dropdown-menu
        display: block

    /* list-group */

    .list-group
        margin-bottom: 20px
        padding-left: 0
    .list-group-item
        position: relative
        display: block
        padding: 10px 15px
        margin-bottom: -1px
        background-color: #fff
        border: 1px solid #ddd
    .list-group-item:first-child
        border-top-right-radius: 4px
        border-top-left-radius: 4px
    .list-group-item:last-child
        margin-bottom: 0
        border-bottom-right-radius: 4px
        border-bottom-left-radius: 4px
    .list-group-item-heading
        margin-top: 0
        margin-bottom: 5px
    .list-group-item.active
        z-index: 2
        color: #fff
        background-color: #428bca
        border-color: #428bca

    /* tab */

    .tab-content > .tab-pane
        display: none
    .tab-content > .active
        display: block
    .nav
        margin-bottom: 0
        padding-left: 0
        list-style: none
    .nav > li
        position: relative
        display: block
    .nav > li > a
        position: relative
        display: block
        padding: 10px 15px
    .nav-tabs
        border-bottom: 1px solid #ddd
    .nav-tabs > li
        float: left
        margin-bottom: -1px
    .nav-tabs > li > a
        margin-right: 2px
        line-height: 1.42857143
        border: 1px solid transparent
        border-radius: 4px 4px 0 0
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus
        color: #8c8c8c
        background-color: #fff
        border: 1px solid #ddd
        border-bottom-color: transparent
        cursor: default

    /* pager */

    .pager
        padding-left: 0
        margin: 20px 0
        list-style: none
        text-align: center
        li
            display: inline
        li > a, li > span
            display: inline-block
            padding: 5px 14px
            background-color: #fff
            border: 1px solid #ddd
            border-radius: 15px
        .previous > a, .previous > span
            float: left
        .disabled > a, .disabled > a:hover, .disabled > a:focus, .disabled > span
            color: #b3b3b3
            background-color: #fff
            cursor: not-allowed

    /* add submenu css */

    .dropdown-submenu
        position: relative
        z-index: 1000
    .dropdown-submenu
        &>.dropdown-menu
            top: 0
            left: 100%
            margin-top: -6px
            margin-left: -1px
            -webkit-border-radius: 0 6px 6px 6px
            -moz-border-radius: 0 6px 6px 6px
            border-radius: 0 6px 6px 6px
        &:hover
            &>.dropdown-menu
                display: block
            &>a:after
                border-left-color: #ffffff
        &>a:after
            display: block
            content: " "
            float: right
            width: 0
            height: 0
            border-color: transparent
            border-style: solid
            border-width: 5px 0 5px 5px
            border-left-color: #cccccc
            margin-top: 5px
            margin-right: -10px
        &.pull-left
            float: none
            &>.dropdown-menu
                left: -100%
                margin-left: 10px
                -webkit-border-radius: 6px 0 6px 6px
                -moz-border-radius: 6px 0 6px 6px
                border-radius: 6px 0 6px 6px

    /* global */

    .hidden
        display: none !important
    .img-responsive
        display: block
        width: 100% \9
        max-width: 100%
        height: auto
    .well
        min-height: 20px
        padding: 19px
        margin-bottom: 20px
        background-color: #f5f5f5
        border: 1px solid #e3e3e3
        border-radius: 4px
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05)
        box-shadow: inset 0 1px 1px rgba(0,0,0,.05)
    .sr-only
        position: absolute
        width: 1px
        height: 1px
        margin: -1px
        padding: 0
        overflow: hidden
        clip: rect(0,0,0,0)
        border: 0
    .text-center
        text-align: center
    .text-muted
        color: #b3b3b3

.note-popover .btn
    height: 30px
.note-popover, .o_css_editor
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
    font-size: 14px
    line-height: 1.42857143
    color: #666
    button
        margin: 0
    a
        color: #428bca
        &:hover, &:focus
            color: #2a6496
            text-decoration: underline

    .popover
        position: fixed !important
        top: 1px !important
        right: auto !important
        left: 300px !important
        margin-top: 0 !important
        border: 0
        background: transparent
        box-shadow: none
        -webkit-box-shadow: none
        z-index: 1040
        padding: 1px
        text-align: left
        white-space: normal
        border-radius: 6px
        max-width: none
        .popover-content
            padding: 0
            margin: 0 0 0 6px
            .note-para .dropdown-menu
                min-width: 148px !important
                padding: 5px 0 5px 5px !important
            .note-ul .dropdown-menu
                min-width: 150px !important
                padding: 5px 0 5px 5px !important
                .note-li
                    margin-right: 5px
            .colorpicker
                margin: 0
                td > *
                    width: 20px
                    height: 20px
                    padding: 0
                    margin: 0
                    border: 1px solid #fff
            .btn-group
                margin: 0 5px 0 0
            > a
                border-radius: 3px
                background-color: #fff
                border-color: #ccc
                padding: 4px 10px
                font-size: 14px
                line-height: 1.5
            > span
                display: inline-block
                max-width: 200px
                overflow: hidden
                text-overflow: ellipsis
                white-space: nowrap
                vertical-align: middle
                border-radius: 3px
                background-color: white
                border-color: #cccccc
                padding: 4px 10px
                font-size: 14px
                line-height: 1.5
    .arrow
        display: none

.note-popover, .o_css_editor, .web_editor-dialog .modal-footer
    .btn-default
        color: #333
        background-color: #fff
        border-color: #ccc
    .btn-primary
        color: #fff
        background-color: #428bca
        border-color: #357ebd

.web_editor-dialog, .note-image-dialog
    color: #666
    display: none
    overflow: hidden
    position: fixed
    top: 0
    right: 0
    bottom: 0
    left: 0
    z-index: 1050
    -webkit-overflow-scrolling: touch
    outline: 0
    .btn
        border-color: #ccc
    .btn-link
        border-color: transparent
    .btn-primary
        color: #fff
        background-color: #428bca
        border-color: #357ebd
    .btn-danger
        color: #fff
        background-color: #d9534f
        border-color: #d43f3a
    .modal-header, .modal-footer
        a
            color: #428bca
            &:hover, &:focus
                color: #2a6496
                text-decoration: underline
        .btn
            border-color: #ccc
            padding: 6px 12px
            font-size: 14px
            line-height: 1.42857143
            border-radius: 4px
    .link-style
        .dropdown > .btn
            min-width: 160px
        li
            text-align: center
            label
                width: 100px
                margin: 0 5px
                input.link-style
                    display: none
    .modal-title
        margin: 0
        line-height: 1.42857143
    .modal-dialog 
        position: relative
        width: auto
        margin: 10px
    .modal-content
        position: relative
        background-color: #fff
        border: 1px solid #999
        border: 1px solid rgba(0,0,0,.2)
        border-radius: 6px
        -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5)
        box-shadow: 0 3px 9px rgba(0,0,0,.5)
        background-clip: padding-box
        outline: 0
    .modal-header
        padding: 15px
        border-bottom: 1px solid #e5e5e5
        min-height: 16.43px
        .close
            margin-top: -2px
    .modal-body
        position: relative
        padding: 15px
    .modal-footer
        text-align: left
        padding: 15px
        border-top: 1px solid #e5e5e5
    .close
        float: right
        font-size: 21px
        font-weight: 700
        line-height: 1
        color: #000
        text-shadow: 0 1px 0 #fff
        opacity: .2
        filter: alpha(opacity=20)
    button.close
        padding: 0
        cursor: pointer
        background: 0 0
        border: 0
        -webkit-appearance: none

.note-image-dialog .btn
    height: 34px
    font-size: 14px

@media (min-width: 768px)
    .web_editor-dialog, .note-image-dialog
        .modal-dialog
            width: 600px
            margin: 30px auto
        .modal-content
            -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5)
            box-shadow: 0 5px 15px rgba(0,0,0,.5)
    .note-popover, .o_css_editor, .web_editor-dialog, .note-image-dialog
        .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12
            float: left
        .col-sm-12
            width: 100%
        .col-sm-11
            width: 91.66666667%
        .col-sm-10
            width: 83.33333333%
        .col-sm-9
            width: 75%
        .col-sm-8
            width: 66.66666667%
        .col-sm-7
            width: 58.33333333%
        .col-sm-6
            width: 50%
        .col-sm-5
            width: 41.66666667%
        .col-sm-4
            width: 33.33333333%
        .col-sm-3
            width: 25%
        .col-sm-2
            width: 16.66666667%
        .col-sm-1
            width: 8.33333333%
        .form-horizontal .control-label
            text-align: right
            margin-bottom: 0
            padding-top: 7px
        .form-inline .form-group
            display: inline-block
            margin-bottom: 0
            vertical-align: middle

.modal-open
    .web_editor-dialog, .note-image-dialog
        overflow-x: hidden
        overflow-y: auto
.editor_enable
    .modal-backdrop
        position: fixed
        top: 0
        right: 0
        bottom: 0
        left: 0
        z-index: 1040
        background-color: #000
    .modal-backdrop.in
        opacity: .5
        filter: alpha(opacity=50)

$attachment-border-color: #848490
.note-image-dialog
    .select-media
        width: 80%

    .existing-attachments .pager
        margin: 0
    .existing-attachments
        .pager .disabled
            display: none

        .existing-attachment-cell
            position: relative
            .o_attachment_border
                border: 1px solid $attachment-border-color
                text-align: center
            .o_image
                max-width: 100%
                padding-top: 80%
                max-height: 100%
                display: inline-block
                img
                    width: 100%
            .o_webimage
                background-image: none
                padding-top: 0
                width: 100%
                height: initial
                vertical-align: middle
            .existing-attachment-remove
                position: absolute
                top: 0
                left: 15px // padding-left on col-*
                z-index: 1
                cursor: pointer
                background: white
                padding: 2px
                border: 1px solid $attachment-border-color
                border-top: none
                border-left: none
                +border-bottom-right-radius(8px)
            &.media_selected
                > *
                    border-width: 5px
                    border-color: rgb(0, 248, 248)

    .image-preview
        margin-bottom: 0.5em
    .font-icons-icons
        font-size: 2em
        max-height: 9em
        overflow: auto
        .font-icons-icon
            display: inline-block
            width: 2em
            padding: 0.25em
            text-align: center
            cursor: pointer
    .font-icons
        position: relative
        display: block

        &:before
            +opacity(0.7)
            position: absolute
            top: 2px
            left: 3px
            font-size: 2em
    #icon-search
        padding-left: 2.5em
    .font-icons-selected
        background-color: #ddd
    &.nosave
        .wait
            display: inline-block !important
            visibility: visible !important
        .modal-body
            .filepicker, .image-preview
                display: none
            .wait
                width: 100%
        .modal-footer .save
            display: none
    .preview-container
        text-align: center
        line-height: 100px
        height: 100px
        > *
            max-height: 100px
            line-height: 100px
            margin: 0 auto
            display: inline-block

/* }}} */

/* ---- COLOR-PICKER ----  {{{ */

.colorpicker
    margin: 0 auto
    background: transparent
    border: 0
    td
        padding: 0
        background: transparent
        > *
            width: 16px
            height: 16px
            border-radius: 2px
            margin: 3px
            padding: 0
            border-width: 1px
            display: block
    .only-text
        display: none
    .automatic-color
        background: #fff
        border-left: 7px solid #f33
        border-top: 7px solid #0e0
        border-right: 8px solid #33f
        border-bottom: 8px solid #fe0
        margin: 4px 3px 3px 3px
        width: 0
        height: 0

/* }}} */

/* ---- TRANSLATIONS ---- {{{ */

o_translatable_translated

.oe_translate_examples li
    margin: 10px
    padding: 4px
html[lang] > body.editor_enable
    [data-oe-translation-state]
        background: rgba(255, 255, 90, 0.5) !important
        &:hover
            background: inherit !important
            cursor: text
    [data-oe-translation-state="translated"]
        background: rgba(120, 215, 110, 0.5) !important
html[data-translatable] .oe_field_translate
    display: block
html[data-translatable] .oe_field_translate
    display: none

/* }}} */

/* ---- editable ----  {{{ */

.o_editable
    &:not(:empty),&[data-oe-type]
        &:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover
            /* to do change into primary color in less */
            -moz-box-shadow: #3071a9 0 0 5px 2px inset
            -webkit-box-shadow: #3071a9 0 0 5px 2px inset
            box-shadow: #3071a9 0 0 5px 2px inset
    &:focus,&[data-oe-type]
        min-height: 0.8em
        min-width: 8px
    &.o_is_inline_editable
        display: inline-block
    &:focus
        outline: none !important

/* Prevent the text contents of draggable elements from being selectable. */
[draggable]
    -moz-user-select: none
    -khtml-user-select: none
    -webkit-user-select: none
    user-select: none

// bootstrap makes .btn elements unselectable -> RTE double-click can't know
// about them either
.o_editable .btn, .btn.o_editable
    -webkit-user-select: auto
    -moz-user-select: auto
    -ms-user-select: auto
    user-select: auto
    cursor: text !important
.o_editable .fa
    cursor: pointer

.css_editable_display
    display: block !important

.css_editable_hidden
    display: none !important

.editor_enable
    [data-oe-readonly]:hover
        cursor: default
    .css_editable_mode_hidden
        display: none
    .css_non_editable_mode_hidden
        display: block !important
    .media_iframe_video .css_editable_mode_display
        display: block !important

    [placeholder]:empty
        content: " \00a0 " attr(placeholder)
    [placeholder]:empty:active:after, [placeholder]:empty:focus:after
        content: none
    input, textarea, select
        &[placeholder]:empty
            content: none

.oe_empty[placeholder]:empty
    min-height: 220px !important
    background-repeat: no-repeat
    background-position: center

    &:not(.o_editable)
        background-image: url('/web_editor/static/src/img/edit_here.png') !important

    &:after, &:before
        opacity: 0.4
        overflow: hidden
        z-index: -1
        min-height: 1em

    &:after
        text-align: center
        padding-top: 160px
        display: block
        font-size: 24px

    &.o_no_placeholder_image
        background-image: none
        text-align: left
        padding-top: 0

    &[data-oe-type=html]
        &:after
            font-size: 16px
.editor_has_snippets .oe_empty[placeholder]:empty
    background-image: url('/web_editor/static/src/img/drag_here.png') !important

#web_editor-top-edit
    width: 100%
    min-height: 34px
    height: 34px
    background-color: #222
    border-color: #080808
    border-width: 0 0 1px
    position: fixed
    border-radius: 0
    top: 0
    right: 0
    left: 0
    z-index: 1030
    -webkit-transform: translate3d(0,0,0)
    transform: translate3d(0,0,0)
    .btn-link
        color: #b3b3b3
    > ul > li
        margin: 0
    form
        padding: 0 10px 0 15px
        border-top: 1px solid transparent
        border-bottom: 1px solid transparent
        margin: 0
        button, a
            padding: 4px 8px 4px 8px
            margin-top: 2px
            font-size: 13px

#editable_area
    margin-top: 34px

/* }}} */


/* ---- HACK FOR COVERING UP EDITOR BOGUS P INSERTION --- {{{ */

.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
    position: static

.css_editable_display
    display: none

.oe_carlos_danger
    outline: 1px solid red !important
    background-color: #ffd9dd !important

/* }}} */