apostrophe
Version:
The Apostrophe Content Management System.
73 lines (60 loc) • 2.58 kB
CSS
/* Tablet rules for admin interface */
/* stylelint-disable-next-line media-feature-name-allowed-list */
@media screen and (min-width: {$mobile-plus}px) and (max-width: {$tablet}px) {
.apos-layout__grid:not(.manage)[data-tablet-auto="true"] {
grid-template-columns: repeat(2, 1fr);
--grid-rows: auto;
}
.apos-layout__grid:not(.manage)[data-tablet-auto="true"] > .apos-layout__item {
grid-column: auto / span 1;
grid-row: auto / span 1;
order: var(--order, 0);
}
.apos-layout__grid:not(.manage)[data-tablet-auto="true"] > .apos-layout__item[data-tablet-full="true"] {
grid-column: 1 / span 2;
}
.apos-layout__grid:not(.manage)[data-tablet-auto="false"] {
--grid-rows: var(--tablet-rows, var(--grid-rows));
}
.apos-layout__grid:not(.manage)[data-tablet-auto="false"] > .apos-layout__item {
grid-column: var(--tablet-colstart, auto) / span var(--tablet-colspan, 1);
grid-row: var(--tablet-rowstart, auto) / span var(--tablet-rowspan, 1);
justify-self: var(--tablet-justify);
/* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
align-self: var(--tablet-align);
order: var(--tablet-order, var(--order, 0));
}
/* Hide items not visible on tablet */
.apos-layout__grid:not(.manage) > .apos-layout__item[data-visible-tablet="false"] {
display: none;
}
}
/* Mobile rules for admin interface */
/* stylelint-disable-next-line media-feature-name-allowed-list */
@media screen and (max-width: {$mobile}px) {
.apos-layout__grid:not(.manage) {
grid-template-columns: 1fr;
--grid-rows: auto;
}
.apos-layout__grid:not(.manage)[data-mobile-auto="true"] > .apos-layout__item {
grid-column: auto / span 1;
grid-row: auto / span 1;
order: var(--order, 0);
}
/* Manual mode: use configured columns and device vars */
.apos-layout__grid:not(.manage)[data-mobile-auto="false"] {
--grid-rows: var(--mobile-rows, var(--grid-rows));
}
.apos-layout__grid:not(.manage)[data-mobile-auto="false"] > .apos-layout__item {
grid-column: var(--mobile-colstart, auto) / span var(--mobile-colspan, 1);
grid-row: var(--mobile-rowstart, auto) / span var(--mobile-rowspan, 1);
justify-self: var(--mobile-justify);
/* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
align-self: var(--mobile-align);
order: var(--mobile-order, var(--order, 0));
}
/* Hide items not visible on mobile */
.apos-layout__grid:not(.manage) > .apos-layout__item[data-visible-mobile="false"] {
display: none;
}
}