@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
87 lines (86 loc) • 2.65 kB
CSS
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-grid-container {
display: grid;
grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
grid-auto-flow: dense;
row-gap: var(--row-gap, 0);
column-gap: var(--column-gap, 0);
}
.eufemia-scope--10_104_0 .dnb-grid-container--row-gap-x-small {
--row-gap: var(--spacing-x-small);
}
.eufemia-scope--10_104_0 .dnb-grid-container--row-gap-small {
--row-gap: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-grid-container--row-gap-medium {
--row-gap: var(--spacing-medium);
}
.eufemia-scope--10_104_0 .dnb-grid-container--row-gap-large {
--row-gap: var(--spacing-large);
}
.eufemia-scope--10_104_0 .dnb-grid-container--column-gap-x-small {
--column-gap: var(--spacing-x-small);
}
.eufemia-scope--10_104_0 .dnb-grid-container--column-gap-small {
--column-gap: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-grid-container--column-gap-medium {
--column-gap: var(--spacing-medium);
}
.eufemia-scope--10_104_0 .dnb-grid-container--column-gap-large {
--column-gap: var(--spacing-large);
}
.eufemia-scope--10_104_0 .dnb-grid-container {
--grid-columns: var(--small-columns, 4);
}
@media screen and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-grid-container {
--grid-columns: var(--medium-columns, 6);
}
}
@media screen and (min-width: 60.00625em) {
.eufemia-scope--10_104_0 .dnb-grid-container {
--grid-columns: var(--large-columns, 12);
}
}
@media screen and (max-width: 60em) {
.eufemia-scope--10_104_0 .dnb-grid-container__disabled--small {
display: unset;
}
}
@media screen and (min-width: 40.00625em) and (max-width: 60em) {
.eufemia-scope--10_104_0 .dnb-grid-container__disabled--medium {
display: unset;
}
}
@media screen and (min-width: 72.00625em) {
.eufemia-scope--10_104_0 .dnb-grid-container {
--grid-columns: var(--large-columns, 12);
}
.eufemia-scope--10_104_0 .dnb-grid-container__disabled--large {
display: unset;
}
}
.eufemia-scope--10_104_0 .dnb-grid-item {
grid-column: var(--start-c)/var(--end-c);
--start-c: var(--small-c-s, 1);
--end-c: var(--small-c-e, calc(var(--grid-columns) + 1));
}
@media screen and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-grid-item {
--start-c: var(--medium-c-s, 1);
--end-c: var(--medium-c-e, calc(var(--grid-columns) + 1));
}
}
@media screen and (min-width: 60.00625em) {
.eufemia-scope--10_104_0 .dnb-grid-item {
--start-c: var(--large-c-s, 1);
--end-c: var(--large-c-e, calc(var(--grid-columns) + 1));
}
}
.eufemia-scope--10_104_0 .dnb-grid-item--full-width {
--start-c: 0;
--end-c: var(--grid-columns);
}