58 lines
1.7 KiB
SCSS
58 lines
1.7 KiB
SCSS
.bslib-grid {
|
|
// layout_column_wrap() uses a default column span of 1
|
|
// layout_columns() uses a default column span of 6 (set below or in JS)
|
|
--_item-column-span: 1;
|
|
|
|
> * {
|
|
grid-column: auto/span var(--_item-column-span, 1);
|
|
}
|
|
|
|
display: grid !important;
|
|
gap: var(--bslib-spacer, 1rem);
|
|
height: var(--bslib-grid-height);
|
|
|
|
&.grid {
|
|
// Don't let intrinsic width of a column affect the width of grid cols
|
|
grid-template-columns: repeat(var(--bs-columns, 12), minmax(0, 1fr));
|
|
// For some reason, Bootstrap sets `grid-template-rows: 1fr` by default, which
|
|
// is problematic for a multi-row filling layout. This fixes it...
|
|
// > page_fillable(layout_columns(c(12, 12), plotly::plot_ly(), plotly::plot_ly()))
|
|
grid-template-rows: unset;
|
|
grid-auto-rows: var(--bslib-grid--row-heights);
|
|
@include bslib-breakpoints-css-vars('bslib-grid--row-heights', map-keys($grid-breakpoints));
|
|
}
|
|
|
|
& > * > .shiny-input-container {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
bslib-layout-columns.bslib-grid {
|
|
--_item-column-span: 6;
|
|
}
|
|
|
|
// Users can add the `hidden-until-init` attribute to hide child elements until
|
|
// just after bslib-layout-columns assigns them the column classes. The
|
|
// attribute is automatically removed by <bslib-layout-columns>.
|
|
bslib-layout-columns[hidden-until-init] > * {
|
|
display: none;
|
|
}
|
|
|
|
@include media-breakpoint-down(md) {
|
|
// collapse all columns to a single column below medium (by default only)
|
|
bslib-layout-columns:where(.bslib-grid) > * {
|
|
grid-column: 1 / -1;
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-down(sm) {
|
|
// with each "row" taking its natural height
|
|
.bslib-grid {
|
|
grid-template-columns: 1fr !important;
|
|
height: var(--bslib-grid-height-mobile);
|
|
&.grid {
|
|
height: unset !important;
|
|
}
|
|
}
|
|
}
|