superdesk/superdesk-client-core

// widgets-article.scss
// Widget styling for article edit and packaging screen
// ----------------------------------------------------------------------------------------
@import "~variables.scss";
@import "~superdesk-ui-framework/app/styles/_mixins.scss";

.widget-wrapper {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    inset-block-end: 0;
    overflow: hidden;
    &.active-left {
        .page-content-container {
            inset-inline-start: $tablist-width + $tabpane-width + $article-tabpane-padding;
        }
        &.left-extended {
            .page-content-container {
                inset-inline-start: $tablist-width + $tabpane-extended-width + $article-tabpane-padding;
            }
        }
    }
    &.active-right {
        .page-content-container {
            inset-inline-end: $tablist-width + $tabpane-width + $article-tabpane-padding;
        }
        &.right-extended {
            .page-content-container {
                inset-inline-end: $tablist-width + $tabpane-extended-width + $article-tabpane-padding;
            }
        }
    }
}

.workqueue .widget-wrapper .right-tabpane {
    inset-block-end: 30px;
}

.tabpane, .pinned-tab__wrapper {
    .sd-widget {
        width: auto;
        height: 100%;
        position: relative;
        border: 0;
        .widget-line {
            display: none;
        }
        .widget-header {
            height: 48px;
            box-sizing: border-box;
            background-color: var(--sd-item__main-Bg);
            .widget-icon {
                display: none;
            }
            .widget-title {
                line-height: 100%;
                font-size: 1.4rem;
                padding: 0 1.2rem;
                font-weight: 400;
            }
        }
        .widget__sliding-toolbar {
            @include sliding-toolbar;
            padding: 0 40px 0 16px;
        }
        .widget-actions {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-inline-start: auto;
        }
        .widget-settings {
            inset-block-start: 8px;
            inset-inline-end: 35px;
        }
        .widget-content {
            background-color: var(--sd-colour-panel-bg--100);
            margin-block-start: 0;
            overflow: auto;
            inset-block-end: 0;
            display: grid;
            grid-template-rows: auto 1fr auto;
            grid-template-columns: 1fr;
            fieldset {
                padding: 10px;
                &.fieldset--no-padding {
                    padding: 0;
                }
                .btn-group.pull-left {
                    margin-inline-start: 0;
                }
            }
            span.chevron {
                background-color: $sd-background;
                ~ h6 {
                    background-color: $sd-background;
                }
            }
            .nav-tabs {
                padding: 0 6px;
                background-color: var(--sd-item__main-Bg);
                box-shadow: 0 1px 0 0 var(--sd-colour-line--light);
                grid-row: 1 / 2;
                position: relative;
                z-index: 1;
            }
            .content {
                grid-row: 2 / 3;
                overflow-y: auto;
            }
            .widget-content-padding {
                padding: 10px;
            }
            .widget-header__action {
                position: fixed;
                inset-block-start: 106px;
                inset-inline-end: 92px;
                z-index: 999;
            }
        }
        .widget-content__header {
            grid-row: 1/2;
            grid-column: 1/2;
            position: relative;
        }
        .widget-content__main {
            grid-row: 2/3;
            grid-column: 1/2;
            overflow-x: hidden;
            overflow-y: auto;
        }
        .widget-content__footer {
            grid-row: 3/4;
            grid-column: 1/2;
            position: relative;
        }
    }

    .tabcontent-actions {
        position: absolute;
        inset-block-start: 8px;
        inset-inline-end: 0;
        z-index: 100;

        .icn-btn {
            margin-inline-start: auto;
            margin-inline-end: 5px;
            transition: all .2s ease-in-out;

            &.active {
                color: var(--sd-colour-interactive--active);
                transform: rotate(90deg);
            }

            &:hover {
                border: 0;
            }
        }
    }

    sd-widget-react > div {
        display: contents;
    }
}
.tabpane .sd-widget .widget-content .content {
    grid-row: 2 / 3;
    overflow-y: auto;
}

/*
    Alternative styles for .tabcontent-actions
    that are not using absolute positioning
*/
.sd-widget-pin {
    transition: all .2s ease-in-out;

    &.sd-widget-pinned i {
        color: $sd-blue;
        transform: rotate(90deg);
    }
}

.sd-widget.macros {
    .macro-option {
        margin-block-end: 20px;
    }
    .link-list .btn {
        display: block;
        width: 100%;
        margin-block-end: 10px;
    }
}