@import "../../../../Base/Content/sass/bootstrap/variables";
@import "helpers";

// --- Detailed card view (modal dialog)
.kanban-card-details {
    @include description-textarea;
    @include selected-tag;
    @include glyphicon-color;

    .comment-picture{
        max-width:100% !important;
    }
    .selected-image img{
        max-width:95% !important;
    }
    // Body of modal dialog
    .modal-body {
        padding-bottom: 0;
        
        // Spacing between fields which are not 'inline' fields
        > div > div:not(.kanban-inline) {
            margin-bottom: 20px;
        }
    }

    // Make buttons like 'Clickable' fiels
    button[dropdown-toggle]:active,
    button[bs-popover]:active,
    button[ng-click]:active {
        background-color: #e6f2fa;
        box-shadow: none;
    }

    // Wrap JavaScript newlines to a new line in description field
    .kanban-description {
        white-space: pre-wrap;
    }

    // Tags
    .label {
        display: inline-block;
        padding: 4px 5px;
    }

    // Spacing between attachments
    .kanban-attachment {
        margin-bottom: 10px;
    }

    // Comment section
    [wizdom365-comments-panel] {
        // Always display comments
        .wd-noticeboard-comments-panel {
            display: block !important;
        }

        // Hide default comment header
        .comments-header {
            display: none;
        }

        .commentItemContainer + .commentItemContainer {
            border-top: 1px solid rgba(0, 0, 0, .15);
            padding-top: 10px;
            margin-top: 10px;
        }

        .edit-comment-panel {
            margin-top: 10px;
        }

        // Smaller and rounded images
        .avatar-frame,
        .avatar-frame img {
            width: 35px;
            height: 35px;
            border-radius: 50%;
        }

        .socialPanel, .commentItem-action {
            display: inline-block;
        }

        .commentItem-action > label {
            margin-left: 5px;
            font-size: smaller;
            margin-top: 2px;
        }

        .commentItem-action-mobile {
            display: none;
        }

        .col-sm-12 {
            padding-left: 0;
            padding-right: 0;
        }

        textarea {
            width: 100%;
        }
    }

    // Members assigned to card
    .kanban-member {
        width: 100%;
        margin-bottom: 5px;
    }

    // Datepicker
    .kanban-datepicker {
        margin-bottom: 0;
    }

    // Position dropdown relative to button
    [dropdown] {
        position: relative;
    }

    // Popover
    .popover {
        max-width: none;
        width: 100%;

        // Make popover look more like dropdown
        padding: 5px 0;
        border: 1px solid $dropdown-border;
        border-radius: $border-radius-base;
        box-shadow: 0 6px 12px rgba(0,0,0,.175);

        .popover-content {
            padding: $padding-base-vertical $padding-base-horizontal;
        }

        .form-group {
            min-height: 0;
        }
    }

    button + .popover {
        margin-top: 3px;
    }

    // Principal picker
    [wizdom365-principalpicker] {
        // Position loading spinner next to input
        [ng-show="loadingLocations"] {
            position: absolute;
            top: 21px;
            right: 19px;
        }

        // Position close button next to name
        button.close {
            position: absolute;
            top: 6px;
            right: 0;
        }
    }

    // Pointer cursor for clickable elements
    [ng-click],
    .kanban-clickable-title,
    .kanban-clickable-field {
        cursor: pointer;
    }

    // Clickable title
    .kanban-clickable-title {
        .glyphicon-pencil {
            visibility: hidden;
            color: #fff;
            margin-left: 5px;
        }

        &:hover .glyphicon-pencil {
            visibility: visible;
        }

        + .popover {
            margin-top: 20px;
            margin-left: 20px;
            width: 66.67%;
        }
    }

    // Clickable field
    .kanban-clickable-field {
        padding: $padding-base-vertical;
        margin: -$padding-base-vertical;
        border-radius: $border-radius-base;

        &:hover {
            background-color: #e6f2fa;
        }

        + .popover {
            margin-top: -4px;
        }
    }

    // Inline fields
    .kanban-inline {
        > h5 {
            display: inline-block;
        }

        > div {
            margin-top: 1px;
            margin-right: -6px;
        }

        .pull-right > .dropdown-menu {
            right: -7px;
        }
    }
}
