UNPKG

apostrophe

Version:
73 lines (60 loc) 2.58 kB
/* 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; } }