48 lines
1.4 KiB
CSS
48 lines
1.4 KiB
CSS
/* Add a gap between layout regions. */
|
|
.layout--twocol {
|
|
--dashboard-spacing: var(--gin-spacing-s);
|
|
gap: var(--dashboard-spacing);
|
|
}
|
|
|
|
/* Use flexbox within each region. */
|
|
.layout--twocol .layout__region,
|
|
.layout--twocol .layout__region {
|
|
flex-basis: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--dashboard-spacing);
|
|
}
|
|
|
|
/* Split first and second regions to two columns on large screens. */
|
|
@media (min-width: 48em) {
|
|
.layout--twocol .layout__region--first,
|
|
.layout--twocol .layout__region--second {
|
|
flex-basis: 50%;
|
|
max-width: calc(50% - var(--dashboard-spacing)*.5);
|
|
}
|
|
}
|
|
|
|
/* Style dashboard fieldsets similar to gin-layer-wrapper. */
|
|
.layout__region > fieldset.dashboard-pane {
|
|
margin: 0;
|
|
padding-top: var(--gin-spacing-m);
|
|
background: var(--gin-bg-layer);
|
|
border: 1px solid var(--gin-border-color-layer);
|
|
box-shadow: var(--gin-shadow-l1);
|
|
border-radius: var(--gin-border-l);
|
|
}
|
|
|
|
/* Reduce spacing within dashboard fieldsets. */
|
|
.layout__region > fieldset.dashboard-pane .fieldset__label {
|
|
padding: 0 var(--gin-spacing-m);
|
|
}
|
|
.layout__region > fieldset.dashboard-pane .fieldset__wrapper {
|
|
margin: 0 var(--gin-spacing-m) var(--gin-spacing-m) var(--gin-spacing-m);
|
|
}
|
|
|
|
/* Increase fieldset font. */
|
|
.layout__region > fieldset.dashboard-pane .fieldset__label {
|
|
font-size: var(--gin-font-size-l);
|
|
font-weight: var(--gin-font-weight-bold);
|
|
}
|