1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
.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;
}
}
}
|
