@ebay/skin
Version:
Skin - CSS modules that represent the brand eBay
73 lines (71 loc) • 2.04 kB
CSS
:root {
--page-grid-number-cols: 8;
--page-grid-outside-margins: 16px;
--page-grid-column-gaps: var(--spacing-100);
--page-grid-row-gaps: var(--spacing-200);
--page-grid-column-widths: calc(12.5% - var(--spacing-100) + 1px);
--page-grid-max-width: 1584px;
--page-grid-total-max-width: calc(
var(--page-grid-max-width) + var(--page-grid-outside-margins) * 2
);
}
@media (min-width: 512px) {
:root {
--page-grid-number-cols: 16;
--page-grid-column-gaps: var(--spacing-200);
--page-grid-column-widths: calc(6.25% - var(--spacing-200) + 1px);
--page-grid-outside-margins: 32px;
}
}
@media (min-width: 1280px) {
:root {
--page-grid-outside-margins: 48px;
}
}
.page-grid-container {
box-sizing: border-box;
display: block;
margin-left: auto;
margin-right: auto;
max-width: var(--page-grid-max-width);
padding-left: var(--page-grid-outside-margins);
padding-right: var(--page-grid-outside-margins);
position: relative;
width: 100%;
}
.page-grid {
column-gap: var(--page-grid-column-gaps);
grid-template-columns: repeat(
var(--page-grid-number-cols),
var(--page-grid-column-widths)
);
row-gap: var(--page-grid-row-gaps);
}
.page-grid,
.page-grid__subgrid,
.subgrid {
display: grid;
}
@supports (grid-template-columns: subgrid) {
.page-grid__subgrid,
.subgrid {
grid-template-columns: subgrid;
}
}
.page-grid-container .nested-grid-container {
max-width: 100%;
padding: 0;
width: 100%;
}
.page-grid--debug {
--debug-grid-col-color: pink;
--debug-grid-gutter-color: transparent;
background: repeating-linear-gradient(
90deg,
var(--debug-grid-col-color) 0,
var(--debug-grid-col-color) var(--page-grid-column-widths),
var(--debug-grid-gutter-color) var(--page-grid-column-widths),
var(--debug-grid-gutter-color)
calc(var(--page-grid-column-widths) + var(--page-grid-column-gaps))
);
}