sass.n2o.components.StandardWidgetLayout.scss Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of n2o-react

The newest version!

.n2o-standard-widget-layout {
    display: flex;
}

.n2o-standard-widget-layout-aside {
    max-width: 25%;
}

.n2o-standard-widget-layout-aside--left .n2o-filter {
    padding-right: 15px;
}

.n2o-standard-widget-layout-aside--right .n2o-filter {
    padding-left: 15px;
}

.n2o-standard-widget-layout-center {
    width: 100%;
}

.n2o-standard-widget-layout-toolbar {
    display: none;
    grid-template-columns: repeat(3, auto);
}

.n2o-standard-widget-layout-toolbar:empty,
.n2o-standard-widget-layout-center-filter:empty {
    display: none;
}

// Селектор включает отображение блоков тулбара, если в них есть кнопки или пагинация
.n2o-standard-widget-layout-toolbar:has(.pagination-container),
.n2o-standard-widget-layout-toolbar:has(.btn-group:not(:empty)) {
    display: grid;
}

.n2o-standard-widget-layout-toolbar--left {
    grid-column-start: 1;
    grid-column-end: 2;
    align-items: start;

    .btn-group {
        flex-wrap: wrap;
    }
}

.n2o-standard-widget-layout-toolbar--center {
    grid-column-start: 2;
    grid-column-end: 3;
    align-items: center;
}

.n2o-standard-widget-layout-toolbar--right {
    display: flex;
    grid-column-start: 3;
    grid-column-end: 4;
    align-items: end;

    .btn-group {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

.n2o-standard-widget-layout-toolbar-wrapper {
    row-gap: 0.5rem;
}