_pagetree.scss

//##############################################################################
// PAGETREE

// INFO: please not that all related styles to the pagetree itselfs are
// handled through theming after the "PAGETREE THEME" section in this file.

// HEADER
.cms-pagetree-container-custom {
    background: #f7f7f7;
}

.cms-pagetree-header {
    clear: both;
    overflow: hidden;

    .cms-pagetree-title {
        float: left;
        
    }

    .cms-pagetree-search {
        float: right;
        padding: 0;
        margin: 0;
        background: none;
        box-shadow: none;
    }

    .cms-pagetree-buttons {
        float: right;
    }
}



















.cms-pagetree-container {
    // overflow: auto;

    margin-bottom: $pagetree-bottom-offset;
}
.cms-pagetree-container,
.cms-pagetree {
    // helper classes
    .cms-hidden {
        display: none !important;
    }
}
.hidden {
    display: none !important;
}

.cms-tree-col {
    height: $pagetree-header-height;
}

.cms-tree-item {
    display: inline-block;
}

.cms-tree-reload {
    float: right;
}

// we need to add this to get drag & drop to work on internet explorer,
// more specifically on a microsoft surface
.jstree li {
    -ms-touch-action: none;
    touch-action: none;
}

//###########################################################
// TOOLTIP
// handles tooltip styling
.cms-tree-tooltip-container {
    display: none;
    position: absolute;
    right: $pagetree-tooltip-offset;
    top: -$pagetree-icon-offset;
    z-index: 100;
    text-align: left;
    border-radius: $border-radius-base;
    background: $white;
    border: 1px solid $gray-lighter;

    // icon on the right
    &:before {
        content: "";
        position: absolute;
        left: 100%;
        top: $pagetree-icon-offset + 2;
        z-index: 1;
        width: $dropdown-arrow-side;
        height: $dropdown-arrow-side;
        margin-left: -($dropdown-arrow-side / 2);
        transform: rotate(45deg);
        box-shadow: $dropdown-shadow;
        background-color: $submenu-dropdown-bgcolor;
    }

    h3 {
        position: relative;
        z-index: 10;
        color: $gray-light;
        font-size: $font-size-small;
        font-weight: normal;
        text-transform: uppercase;
        padding: $pagetree-tooltip-header-padding;
        margin: 0 !important;
        border-bottom: 1px solid $gray-lighter;
        background: $white;
    }

    a {
        display: block;
        padding: $pagetree-tooltip-anchor-padding;
        min-width: $pagetree-tooltip-min-width;
        text-transform: none;
        border-bottom: 1px solid $gray-lighter;

        &:hover,
        &:link:hover {
            color: darken($color-primary, 10%) !important;
        }
        &:last-child {
            border: none;
        }
    }

    .cms-icon {
        position: relative;
        top: 3px;
        left: -1px;
    }
    // open state
    &-open {
        display: block;
    }
}
.cms-tree-tooltip-wrapper {
    padding: 10px;
}

//###########################################################
// ICONS
// used for the sitemap and apphook icons
.cms-tree-item-icons {
    position: relative;
    top: $pagetree-icon-offset;
    padding: $pagetree-icon-padding;

    span:before {
        color: $gray-light;
    }

    &-dark span:before {
        color: $gray-darker;
    }
}

//###########################################################
// PREVIEW
// shows preview eye icon
.cms-tree-item-preview {
    position: relative;
    // need custom positioning here
    top: 2px;
    left: 3px;

    a {
        @extend %icon;
        @include icon(eye);
        font-size: $pagetree-icon-size;

        &:before {
            color: $gray-darker;
        }
        &:hover:before {
            color: $black;
        }
    }
    span {
        display: inline-block;
        @include hide-content();
    }

    // active state for current selected page
    &-active a:before {
        color: $black;
    }
}

//###########################################################
// LANGUAGE
// shows language bubbles
.cms-tree-item-lang {
    // required for tooltip
    position: relative;
    top: $pagetree-icon-offset;
    .cms-tree-tooltip-container {
        right: $pagetree-tooltip-offset - 3;
    }
}
.cms-tree-lang-container span {
    box-sizing: border-box;
    display: inline-block;
    width: $pagetree-lang-size;
    height: $pagetree-lang-size;
    border-radius: 100%;
    // will change according to states
    border: 1px solid $white;
    background: $white;
    &.empty {
        border-color: $gray-light;
        background-color: $white;
    }
    &.unpublished,
    &.unpublishedparent {
        border-color: $gray-light;
        background-color: $gray-light;
    }
    &.published {
        border-color: $color-success;
        background-color: $color-success;
    }
    &.dirty {
        animation: pulsate 2.5s ease-out infinite;
        border-color: $color-primary;
        background-color: $color-primary;
    }
}

// animation for publishing
@keyframes pulsate {
    0% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}

//###########################################################
// LANGUAGE
// shows language bubbles
.cms-tree-item-menu {
    position: relative;
    top: $pagetree-icon-offset - 1;

    .cms-icon:before {
        font-size: $pagetree-icon-size - 4;
        color: $gray-darker;
    }
    .cms-icon-check-square:before {
        color: $color-success;
    }
}

//###########################################################
// INFO
// icon used at the end to display additional help
.cms-tree-item-info {
    position: relative;
    top: $pagetree-icon-offset;
    left: 1px;

    .cms-icon:before {
        font-size: $pagetree-icon-size;
    }

    p {
        color: $gray-darkest;
        padding: 0;
        margin: 0;
    }
    strong {
        color: $gray-light;
        font-weight: normal;
    }
}

//###########################################################
// SEARCH & FILTERING
// searchform or filtering
.cms-tree-search {
    float: left;
    margin-right: 5px;
    label {
        display: none !important;
    }
    select {
        position: relative;
        top: 2px;
        width: $pagetree-search-width !important;
    }
    // need to overwrite djangocms-admin-theme
    #toolbar form#changelist-search input[type="submit"] {
        margin-left: 0 !important;
    }
    #toolbar form#changelist-search #searchbar {
        width: $pagetree-search-width !important;
    }
}
.cms-tree-filters {
    float: right;
    .js-cms-tree-filter-trigger {
        position: absolute;
        top: 0;
        right: 0;
        padding-right: 20px;
        line-height: 30px;
        width: 175px;
        border-bottom: 1px solid $gray-lighter;
    }
    h2 {
        display: none;
    }
}

//###########################################################
// django default admin theme adaptions
.cms-tree-col {
    line-height: 16px;
}

//##############################################################################
// PAGETREE THEME

// this level is required to make sure djangocms-admin-style or django-admin
// are not interfering (increasing specificity). This section only defines
// resets added through inline styles
.jstree-django-cms {
    // parent and children ul
    .jstree-container-ul,
    .jstree-children,
    // children and childrens children li
    .jstree-leaf,
    .jstree-node  {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    // grid settings and resets added by `jstree.grid.js`
    .jstree-grid-header,
    .jstree-grid-separator {
        padding: 0;
        margin: 0;
        // there are inline styles set to this part
        margin-left: 0 !important;
        border: none;
        background: none;
    }
    &.jstree-grid-cell {
        padding: 0;
    }

    // tooltips are hidden if overflow is prevented
    .jstree-grid-column,
    .jstree-grid-cell {
        box-sizing: border-box;
        overflow: visible;
    }

    // disable highlight on iOS devices
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

// wrapper added by jstree
.jstree-grid-wrapper {
    box-sizing: border-box;
    overflow: visible !important;
    width: 100% !important;
}

//###########################################################
// DJANGO-CMS THEME

// general wrapper
.cms-pagetree-container {
    border: 1px solid $gray-lighter;
}
.jstree-grid-wrapper {
    padding-bottom: $pagetree-bottom-padding !important;
    border-left: 1px solid $white;
    border-bottom: 1px solid $white;
    background: $gray-lightest;
}

// specificity required for admin styles and jstree resets
.jstree-django-cms {
    .jstree {
        padding-left: $pagetree-nesting-padding / 2;
    }
    // header column
    .jstree-grid-header {
        font-size: $font-size-small;
        font-color: $gray;
        text-align: center;
        padding: $pagetree-header-padding;
        border-bottom: 1px solid $gray-lighter;
        background: $white;
    }
    // ensure first line is not centered
    .jstree-grid-column-0 .jstree-grid-header {
        text-align: left !important;
    }

    //###########################################################
    // styles for nesting elements
    .jstree-container-ul {
        margin-left: $pagetree-nesting-padding;
    }
    .jstree-children {
        margin-left: $pagetree-nesting-padding;
    }
    .jstree-ocl {
        float: left;
        position: relative;
        left: -$pagetree-nesting-padding;
        font-size: 12px;
        color: $gray-light;
        padding: 15px 10px 10px 0;
        @extend %icon;
    }
    .jstree-open > .jstree-ocl,
    .jstree-closed > .jstree-ocl {
        cursor: pointer;
        &:after {
            content: "";
            display: block;
            position: absolute;
            right: 2px;
            top: 20px;
            width: 8px;
            height: 2px;
            background: $gray-lighter;
        }
    }
    .jstree-open > .jstree-ocl {
        @include icon(minus-square-o);
    }
    .jstree-closed > .jstree-ocl {
        @include icon(plus-square-o);
    }
    .jstree-loading > .jstree-ocl {
        @include icon(loader);
        &:before {
            animation: cms-spin 2s infinite linear;
        }
    }

    //###########################################################
    // background color and paddings for nodes
    // first row styling
    .jstree-anchor {
        box-sizing: border-box;
        display: block;
        cursor: move;
        outline: none;
        color: $gray;
        // we need to add one pixel in to negate the negative margin
        // value to get the borders to work visually
        height: $pagetree-cell-height + 1;
        padding: $pagetree-anchor-padding;
        margin-top: -1px;
        border: 1px solid $gray-lighter;
        border-right: none;
        background: $white url('../img/pagetree/tree-li-drag.gif') no-repeat -1px center;

        &:hover {
            color: $gray !important;
        }
    }
    // style cells afterwards
    .jstree-grid-cell {
        height: $pagetree-cell-height;
        border-bottom: 1px solid $gray-lighter;
        background: $white;
        // don't apply these styles for the first column
        &.jstree-django-cms {
            height: auto;
            border: none;
            background: none;
        }
    }
    .jstree-grid-cell-regular {
        text-align: center;
        padding: $pagetree-cell-padding;
        border-left: 1px solid $gray-lighter;
    }
    .jstree-grid-cell-regular-options {
        border-left: none;
        text-align: right;
    }
    // hover states
    .jstree-hovered,
    .jstree-clicked {
        background-color: lighten($gray-lightest, 3%);
    }

    // special case for paste header
    .jstree-grid-column-1 .jstree-grid-header {
        text-align: right;
        a {
            font-size: $font-size-small;
            top: 0;
        }
        span {
            line-height: 1;
        }
        // special icon for pasting
        .cms-icon {
            font-size: $font-size-small;
            padding-right: $pagetree-icon-offset;
            margin-left: $pagetree-icon-offset;
        }
    }
}

//###########################################################
// initial loading display of the tree
.jstree.jstree-loading {
    .jstree-container-ul {
        margin: 0;
    }
    .jstree-anchor {
        padding-top: 13px;
        padding-left: 15px;
        border: none;
        background: none;
    }

    .jstree-loading > .jstree-ocl {
        display: none;
    }
}

//###########################################################
// success animation and paste functionality
// this should only be attached to the root
.cms-tree-node-success {
    > .jstree-anchor .jstree-themeicon {
        content: "";
        position: relative;
        top: 4px;
        color: $color-success;
        @extend %icon;
        @include icon(check);
    }
}

.cms-tree-item-helpers a {
    position: relative;
    top: 2px;
    font-size: $font-size-normal;
    .cms-icon {
        position: relative;
        top: 1px;
        font-size: $font-size-small;
    }
}

//###########################################################
// drag & drop item
#jstree-dnd {
    box-sizing: border-box;
    display: block;
    min-width: 300px;
    height: $pagetree-cell-height;
    padding: $pagetree-anchor-padding !important;
    margin-left: -$pagetree-marker-size + 1;
    border: 1px solid $gray-lighter;
    background: $white;
    // copy icon triggered when pressing `CMD`
    .jstree-copy {
        color: $white;
        padding: 0 5px 2px;
        margin-left: 5px;
        border-radius: $border-radius-base;
        background: $gray-light;
    }
    // error color displayed if we can/cannot move it
    .jstree-ok,
    .jstree-er {
        position: absolute;
        top: 0;
        left: -5px;
        width: 5px;
        height: 100%;
        background: $gray-lighter;
    }
    .jstree-ok {
        background-color: $color-success;
    }
    .jstree-er {
        background-color: $color-danger;
    }
}

#jstree-marker {
    position: absolute;
    margin: -$pagetree-marker-size 0 0 0;
    border-right: 0;
    border-top: $pagetree-marker-size solid transparent;
    border-bottom: $pagetree-marker-size solid transparent;
    border-left: $pagetree-marker-size solid $black;
    width: 0;
    height: 0;
}