Skip to content

Commit 6cfe4a1

Browse files
dragonstyledragonstyle
committed
update to htmltools 0.5.7
1 parent ab3df99 commit 6cfe4a1

File tree

2 files changed

+35
-73
lines changed

2 files changed

+35
-73
lines changed

‎configuration

+1-3
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,7 @@ export TYPST=0.8.0
1818
# Bootstrap dependencies from bslib
1919
# (use commit hash from bslib repo)
2020
export BOOTSTRAP=ad946cafdbf1c91cfd714cb39948bb203ae66e66 # 0.5.1 + consolidated components
21-
# NOTE: HTML TOOLS has a manually committed fill.css file which will be officially
22-
# released in htmltools 0.5.7
23-
export HTMLTOOLS=0.5.6
21+
export HTMLTOOLS=0.5.7
2422
export BOOTSTRAP_FONT=1.11.1
2523
export BOOTSWATCH=5.3.1
2624

‎src/resources/formats/html/bslib/components/scss/sidebar.scss

+34-70
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,9 @@
1-
$bslib-sidebar-bg: rgba(var(--bs-emphasis-color-rgb, 0, 0, 0), 0.05) !default;
1+
$bslib-sidebar-bg: rgba(var(--bs-emphasis-color-rgb, 0,0,0), 0.05) !default;
22
$bslib-sidebar-fg: var(--bs-emphasis-color, black) !default;
3-
$bslib-sidebar-toggle-bg: rgba(
4-
var(--bs-emphasis-color-rgb, 0, 0, 0),
5-
0.1
6-
) !default;
7-
$bslib-sidebar-border: var(--bs-card-border-width, #{$card-border-width}) solid
8-
var(--bs-card-border-color, #{$card-border-color}) !default;
9-
$bslib-sidebar-column-sidebar: Min(
10-
calc(100% - var(--bslib-sidebar-icon-size)),
11-
var(--bslib-sidebar-width, 275px)
12-
);
3+
$bslib-sidebar-toggle-bg: rgba(var(--bs-emphasis-color-rgb, 0,0,0), 0.1) !default;
4+
$bslib-sidebar-border: var(--bs-card-border-width, #{$card-border-width}) solid var(--bs-card-border-color, #{$card-border-color}) !default;
5+
$bslib-sidebar-column-sidebar: Min(calc(100% - var(--bslib-sidebar-icon-size)), var(--bslib-sidebar-width, 250px));
6+
137

148
.bslib-sidebar-layout {
159
--bslib-sidebar-transition-duration: 500ms;
@@ -24,32 +18,21 @@ $bslib-sidebar-column-sidebar: Min(
2418
--bslib-sidebar-toggle-bg: #{$bslib-sidebar-toggle-bg};
2519
--bslib-sidebar-padding: calc(var(--bslib-spacer) * 1.5);
2620
--bslib-sidebar-icon-size: var(--bslib-spacer, 1rem);
27-
--bslib-sidebar-icon-button-size: calc(
28-
var(--bslib-sidebar-icon-size, 1rem) * 2
29-
);
30-
--bslib-sidebar-padding-icon: calc(
31-
var(--bslib-sidebar-icon-button-size, 2rem) * 1.5
32-
);
21+
--bslib-sidebar-icon-button-size: calc(var(--bslib-sidebar-icon-size, 1rem) * 2);
22+
--bslib-sidebar-padding-icon: calc(var(--bslib-sidebar-icon-button-size, 2rem) * 1.5);
3323
// We intentionally don't give a value here, but it could be set by someone else
3424
// --bslib-collapse-toggle-border: ;
35-
--bslib-collapse-toggle-border-radius: var(
36-
--bs-border-radius,
37-
#{$border-radius}
38-
);
25+
--bslib-collapse-toggle-border-radius: var(--bs-border-radius, #{$border-radius});
3926
--bslib-collapse-toggle-transform: 0deg;
4027
--bslib-sidebar-toggle-transition-easing: cubic-bezier(1, 0, 0, 1);
4128
--bslib-collapse-toggle-right-transform: 180deg;
4229
--bslib-sidebar-column-main: minmax(0, 1fr);
43-
30+
4431
display: grid !important;
45-
grid-template-columns: $bslib-sidebar-column-sidebar var(
46-
--bslib-sidebar-column-main
47-
);
32+
grid-template-columns: $bslib-sidebar-column-sidebar var(--bslib-sidebar-column-main);
4833
position: relative;
4934

50-
@include transition(
51-
grid-template-columns ease-in-out var(--bslib-sidebar-transition-duration)
52-
);
35+
@include transition(grid-template-columns ease-in-out var(--bslib-sidebar-transition-duration));
5336

5437
border: var(--bslib-sidebar-border);
5538
border-radius: var(--bslib-sidebar-border-radius);
@@ -61,8 +44,7 @@ $bslib-sidebar-column-sidebar: Min(
6144
border-radius: initial;
6245
}
6346

64-
> .main,
65-
> .sidebar {
47+
> .main, > .sidebar {
6648
grid-row: 1 / 2;
6749
border-radius: inherit;
6850
overflow: auto;
@@ -73,8 +55,7 @@ $bslib-sidebar-column-sidebar: Min(
7355
border-top-left-radius: 0;
7456
border-bottom-left-radius: 0;
7557
padding: var(--bslib-sidebar-padding);
76-
transition: padding var(--bslib-sidebar-transition-easing-x)
77-
var(--bslib-sidebar-transition-duration);
58+
transition: padding var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration);
7859
color: var(--bslib-sidebar-main-fg);
7960
background-color: var(--bslib-sidebar-main-bg);
8061
}
@@ -109,7 +90,7 @@ $bslib-sidebar-column-sidebar: Min(
10990
margin-left: calc(-1 * var(--bslib-sidebar-padding));
11091
margin-right: calc(-1 * var(--bslib-sidebar-padding));
11192
&:last-child {
112-
margin-bottom: calc(-1 * var(--bslib-sidebar-padding));
93+
margin-bottom: calc(-1 * var(--bslib-sidebar-padding));
11394
}
11495
&:not(:last-child) {
11596
margin-bottom: $spacer;
@@ -125,12 +106,10 @@ $bslib-sidebar-column-sidebar: Min(
125106
// But in our usage, the accordions might not be the first or last item in
126107
// the sidebar. In that case, it's better to keep the top/bottom borders.
127108
> .accordion:not(:first-child) .accordion-item:first-child {
128-
border-top: var(--#{$prefix}accordion-border-width) solid
129-
var(--#{$prefix}accordion-border-color);
109+
border-top: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
130110
}
131111
> .accordion:not(:last-child) .accordion-item:last-child {
132-
border-bottom: var(--#{$prefix}accordion-border-width) solid
133-
var(--#{$prefix}accordion-border-color);
112+
border-bottom: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
134113
}
135114

136115
&.has-accordion > .sidebar-title {
@@ -169,14 +148,11 @@ $bslib-sidebar-column-sidebar: Min(
169148
padding: 0;
170149
color: var(--bslib-sidebar-fg);
171150
background-color: unset; // don't take `button` background color
172-
transition: color var(--bslib-sidebar-transition-easing-x)
173-
var(--bslib-sidebar-transition-duration),
174-
top var(--bslib-sidebar-transition-easing-x)
175-
var(--bslib-sidebar-transition-duration),
176-
right var(--bslib-sidebar-transition-easing-x)
177-
var(--bslib-sidebar-transition-duration),
178-
left var(--bslib-sidebar-transition-easing-x)
179-
var(--bslib-sidebar-transition-duration);
151+
transition:
152+
color var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration),
153+
top var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration),
154+
right var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration),
155+
left var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration);
180156

181157
&:hover {
182158
background-color: var(--bslib-sidebar-toggle-bg);
@@ -189,8 +165,7 @@ $bslib-sidebar-column-sidebar: Min(
189165
transform: rotateY(var(--bslib-collapse-toggle-transform));
190166
// N.B. since mobile view won't trigger a transition of grid-template-columns,
191167
// we transition this toggle to ensure _some_ transition event always happens.
192-
transition: transform var(--bslib-sidebar-toggle-transition-easing)
193-
var(--bslib-sidebar-transition-duration);
168+
transition: transform var(--bslib-sidebar-toggle-transition-easing) var(--bslib-sidebar-transition-duration);
194169
}
195170

196171
&:hover > .collapse-icon {
@@ -273,19 +248,15 @@ $bslib-sidebar-column-sidebar: Min(
273248
color: var(--bslib-sidebar-main-fg);
274249
// The CSS variable (set via JS) is here to help avoid overlapping toggles
275250
top: calc(
276-
var(--bslib-sidebar-overlap-counter, 0) *
277-
calc(var(--bslib-sidebar-icon-size) + var(--bslib-sidebar-padding)) +
278-
var(--bslib-sidebar-icon-size, 1rem) / 2
279-
);
280-
right: calc(
281-
-2.5 * var(--bslib-sidebar-icon-size) - var(--bs-card-border-width, 1px)
282-
);
251+
var(--bslib-sidebar-overlap-counter, 0) *
252+
calc(var(--bslib-sidebar-icon-size) +
253+
var(--bslib-sidebar-padding)
254+
) + var(--bslib-sidebar-icon-size, 1rem) / 2);
255+
right: calc(-2.5 * var(--bslib-sidebar-icon-size) - var(--bs-card-border-width, 1px));
283256
}
284257

285258
&.sidebar-right > .collapse-toggle {
286-
left: calc(
287-
-2.5 * var(--bslib-sidebar-icon-size) - var(--bs-card-border-width, 1px)
288-
);
259+
left: calc(-2.5 * var(--bslib-sidebar-icon-size) - var(--bs-card-border-width, 1px));
289260
right: unset;
290261
}
291262
}
@@ -306,12 +277,9 @@ $bslib-sidebar-column-sidebar: Min(
306277
--bslib-sidebar-js-init-collapsed: true;
307278
}
308279

309-
&,
310-
&.sidebar-right {
280+
&, &.sidebar-right {
311281
// Remove sidebar borders in mobile view (except always-open, added below)
312-
> .sidebar {
313-
border: none;
314-
}
282+
> .sidebar { border: none }
315283

316284
// Main area takes up entire layout area to avoid layout shift when
317285
// sidebar is expanded as an overlay.
@@ -333,12 +301,8 @@ $bslib-sidebar-column-sidebar: Min(
333301
&:not([data-bslib-sidebar-open="always"]) {
334302
// Sidebar layer has to be lifted up to cover other (nested) sidebars
335303
&:not(.sidebar-collapsed) {
336-
> .sidebar {
337-
z-index: 1;
338-
}
339-
> .collapse-toggle {
340-
z-index: 1;
341-
}
304+
> .sidebar { z-index: 1; }
305+
> .collapse-toggle { z-index: 1; }
342306
}
343307

344308
// Either sidebar or main area take up entire layout depending on state
@@ -356,6 +320,7 @@ $bslib-sidebar-column-sidebar: Min(
356320
}
357321
}
358322

323+
359324
// Keep padding on main contents when sidebar is expanded (avoid shifts)
360325
&:not(.sidebar-right) > .main {
361326
padding-left: var(--bslib-sidebar-padding-icon);
@@ -367,8 +332,7 @@ $bslib-sidebar-column-sidebar: Min(
367332
// Make main contents transparent while sidebar is expanded
368333
> .main {
369334
opacity: 0;
370-
transition: opacity var(--bslib-sidebar-transition-easing-x)
371-
var(--bslib-sidebar-transition-duration);
335+
transition: opacity var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration)
372336
}
373337
&.sidebar-collapsed > .main {
374338
opacity: 1;

0 commit comments

Comments
 (0)