cssOMS/portlet.scss

.portlet {
    border: 1px solid var(--box-border);
    box-sizing: border-box;
    margin-top: 1rem;

    .portlet-head {
        background: #fff;
        border-bottom: 1px solid #ebedf2;
        padding: .7rem 1rem .7rem 1rem;
        font-weight: 300;
        display: flex;
    }

    .portlet-foot {
        background: #fff;
        border-top: 1px solid #ebedf2;
        padding: .7rem 1rem .7rem 1rem;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        column-gap: .5rem;
    }

    .portlet-body > h2 {
        border-bottom: 1px solid #ebedf2;
    }

    .portlet-separator {
        border-bottom: 1px solid #ebedf2;
    }

    &.highlight-1 {
        background: var(--color-red);
        color: #fff;

        .portlet-body, .portlet-head {
            background: var(--color-red);
            border: 0;
        }
    }

    &.highlight-2 {
        background: var(--color-green);
        color: #fff;

        .portlet-body, .portlet-head {
            background: var(--color-green);
            border: 0;
        }
    }

    &.highlight-3 {
        background: var(--color-blue);
        color: #fff;

        .portlet-body, .portlet-head {
            background: var(--color-blue);
            border: 0;
        }
    }

    &.highlight-4 {
        background: var(--color-yellow);
        color: #fff;

        .portlet-body, .portlet-head {
            background: var(--color-yellow);
            border: 0;
        }
    }
}

.plain-portlet {
    box-sizing: border-box;
    margin-top: 1rem;
    overflow-x: auto;
}

.portlet-body {
    background: #fff;
    padding: 1rem;
}