superdesk/superdesk-client-core

@import '~mixins.scss';
@import '~variables.scss';

.template-card {
    .card-box__header--dark {
        background-color: hsl(215, 8%, 49%);
    }

    .card-box__content {
        min-height: 120px; /* should be big enough to fit in dropdown menu */
    }


    .card-box__content-list {
        .creation-time {
            display: inline-block;
        }
    }
}

.template-editor-modal {
    //z-index: $zindexModal - 1; /* prevent the modal to overlay new modals */
    .template-container {
        display: grid;
        grid-template-columns: 1fr 32%;
        grid-template-rows: 1fr;
        height: 100%;
    }
    .template-container__content {
        overflow-x: hidden;
        overflow-y: auto;
        grid-column: 1/2;
    }
    .template-container__metadata {
        overflow-x: hidden;
        overflow-y: auto;
        grid-column: 2/3;
        padding: $sd-base-increment * 4;
    }

    .template-content {

        overflow-x: hidden;
        @include box-shadow(3px -3px 8px -3px rgba(0, 0, 0, 0.1));
    }

    .template-metadata {

        .field {
            margin-block-end: 15px;
            &--margin-double {
                margin-block-end: 30px;
            }
        }

        .sd-toggle {
            margin-block-start: 4px;
        }

        .toggle-box__label {
            color: $sd-text;
        }
        .multi-select {
            margin-block-end: 20px;            
            ul {
                li {
                    display: inline-block;
                }
            }
        }

    }

    .template-icon {
        display: inline-block;
        vertical-align: middle;
        padding: 16px 0px 20px 24px;

        i {
            width: 48px; height: 48px;
            font-size: 48px; line-height: 48px;
            opacity: .7;
        }
    }

    .template-header {
        display: inline-flex;
        flex-wrap: wrap;
        vertical-align: top;
        padding: 20px 13px;
        width: calc(100% - 112px);

        input#template-name {
            font-size: 15px;
            font-weight: 500;
        }

        .authoring-header__item label {
            min-width: 90px;
            line-height: 16px;
        }
    }

    .error {
        color: #b94a48;
        margin: -13px 10px;
        width: 100%;
    }

    .template-editor {
        border-block-start: 1px solid var(--sd-colour-line--medium);
        .authoring-header__general-info {
            display: none;
        }
        .authoring-header {
            border: 0;
            max-width: none;
            padding: $sd-base-increment * 2 $sd-base-increment * 5 $sd-base-increment * 3;
        }
        .main-article {
            padding: $sd-base-increment * 3 $sd-base-increment * 5;
            border-width: 0;
        }
    }

    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
        @include transition(all 0.3s);
    }

    .field--double {
        > select, > input, > .field {
            display: inline-block;
            vertical-align: top;
            width: 48%;
            &:first-of-type {
                margin-inline-end: 2%;
            }
        }
    }

}

.target-field {
    select {
        width: 200px;
    }
    .terms {
        @include user-select(none);
        padding-block-start: 10px;
        @include clearfix();
        li {
            position: relative;
            background: #e8e8e8;
            line-height: 26px;
            float: inline-start;
            height: 26px;
            padding: 0 6px;
            @include border-radius(3px);
            margin: 0 5px 5px 0;
            @include transition(all .5s);
            i:not(.alt) {
                position: absolute;
                display: none;
                inset-inline-end: 5px;
                inset-block-start: 6px;
                opacity: 0;
                transition: all .5s ease;
            }
            &:hover {
                cursor: pointer;
                background: var(--sd-item__main-Bg--hover);
                i {
                    @include opacity(70);
                }
            }
            &:hover {
                > i:not(.alt) {
                    display: inline-block;
                }
            }
            &.selected {
                background: hsl(214, 13%, 20%);
                color: hsl(214, 13%, 91%);
            }
        }
    }
}