Built site for bslib: 0.5.1.9000@fde2d16

articles/any-project/examples/linked-htmlwidgets/lib/bslib-tag-require-0.5.1.9000/scss/sidebar.scss

@@ -6,7 +6,7 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--_icon-size)), var(--_sideba
 
 
 .bslib-sidebar-layout {
-  --_transition-duration: max(var(--bslib-sidebar-transition-duration, 500ms), 5ms);
+  --_transition-duration: 0; // Transitions are enabled by .transitioning class
   --_transition-easing-x: var(--bslib-sidebar-transition-easing-x, cubic-bezier(0.8, 0.78, 0.22, 1.07));
   --_border: var(--bslib-sidebar-border, #{$bslib-sidebar-border});
   --_border-radius: var(--bslib-sidebar-border-radius, var(--bs-border-radius));
@@ -27,11 +27,18 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--_icon-size)), var(--_sideba
   --_toggle-transform: var(--bslib-collapse-toggle-transform, 0deg);
   --_toggle-transition-easing: var(--bslib-sidebar-toggle-transition-easing, cubic-bezier(1, 0, 0, 1));
   --_toggle-right-transform: var(--bslib-collapse-toggle-right-transform, 180deg);
-  --_max-height-mobile: var(--bslib-sidebar-max-height-mobile);
+  --_mobile-max-height: var(--bslib-sidebar-mobile-max-height, var(--bslib-sidebar-max-height-mobile));
+  --_sidebar-mobile-opacity: var(--bslib-sidebar-mobile-opacity);
+  --_sidebar-mobile-max-width: var(--bslib-sidebar-mobile-max-width);
+  --_sidebar-mobile-box-shadow: var(--bslib-sidebar-mobile-box-shadow);
   --_column-main: minmax(0, 1fr);
   // Calculate the height of all toggle buttons in nested sidebar layouts
   --_toggle-collective-height: calc(calc(var(--_icon-button-size) + 0.5em) * var(--_js-toggle-count-max-side, 1));
 
+  &.transitioning {
+    --_transition-duration: max(var(--bslib-sidebar-transition-duration, 300ms), 5ms);
+  }
+
   display: grid !important;
   grid-template-columns: $bslib-sidebar-column-sidebar var(--_column-main);
   position: relative;
@@ -294,7 +301,7 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--_icon-size)), var(--_sideba
     &[data-bslib-sidebar-open="always"] {
       display: block !important;
       > .sidebar {
-        max-height: var(--_max-height-mobile);
+        max-height: var(--_mobile-max-height);
         overflow-y: auto;
         border-top: var(--_vert-border);
       }
@@ -318,6 +325,20 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--_icon-size)), var(--_sideba
         left: unset;
       }
 
+      > .sidebar {
+        opacity: var(--_sidebar-mobile-opacity, 1);
+        max-width: var(--_sidebar-mobile-max-width, 100%);
+        box-shadow: var(--_sidebar-mobile-box-shadow);
+      }
+
+      // When `max-width` is less than 100%, push it to the appropriate side
+      &:not(.sidebar-right) > .sidebar {
+        margin-right: auto;
+      }
+      &.sidebar-right > .sidebar {
+        margin-left: auto;
+      }
+
       // Either sidebar or main area take up entire layout depending on state
       $full-closed: 100% 0;
       $closed-full: 0 100%;
@@ -333,17 +354,12 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--_icon-size)), var(--_sideba
         }
       }
 
-      // Make main contents transparent while sidebar is expanded
+      // Set padding on main area to account for toggle button
       > .main {
-        opacity: 0;
-        transition: opacity var(--_transition-easing-x) var(--_transition-duration);
         padding-top: var(--_toggle-collective-height);
         padding-left: var(--_padding);
         padding-right: var(--_padding);
       }
-      &.sidebar-collapsed > .main {
-        opacity: 1;
-      }
     }
   }
 }

articles/any-project/examples/page-fillable-htmlwidgets/index.html

@@ -31,8 +31,8 @@
       <div class="card bslib-card bslib-mb-spacing html-fill-item html-fill-container" data-bslib-card-init data-full-screen="false" data-require-bs-caller="card()" data-require-bs-version="5">
         <div class="card-header">Plot</div>
         <div class="card-body bslib-gap-spacing html-fill-item html-fill-container" style="margin-top:auto;margin-bottom:auto;flex:1 1 auto;">
-          <div class="plotly html-widget html-fill-item-overflow-hidden html-fill-item" id="htmlwidget-206ae60cbee8d92a1795" style="width:100%;height:400px;"></div>
-          <script type="application/json" data-for="htmlwidget-206ae60cbee8d92a1795">{"x":{"visdat":{"37751a676c6":["function () ","plotlyVisDat"]},"cur_data":"37751a676c6","attrs":{"37751a676c6":{"alpha_stroke":1,"sizes":[10,100],"spans":[1,20]}},"layout":{"margin":{"b":40,"l":60,"t":25,"r":10},"xaxis":{"domain":[0,1],"automargin":true},"yaxis":{"domain":[0,1],"automargin":true},"hovermode":"closest","showlegend":false},"source":"A","config":{"modeBarButtonsToAdd":["hoverclosest","hovercompare"],"showSendToCloud":false},"data":[{"type":"scatter","mode":"markers","marker":{"color":"rgba(31,119,180,1)","line":{"color":"rgba(31,119,180,1)"}},"error_y":{"color":"rgba(31,119,180,1)"},"error_x":{"color":"rgba(31,119,180,1)"},"line":{"color":"rgba(31,119,180,1)"},"xaxis":"x","yaxis":"y","frame":null}],"highlight":{"on":"plotly_click","persistent":false,"dynamic":false,"selectize":false,"opacityDim":0.20000000000000001,"selected":{"opacity":1},"debounce":0},"shinyEvents":["plotly_hover","plotly_click","plotly_selected","plotly_relayout","plotly_brushed","plotly_brushing","plotly_clickannotation","plotly_doubleclick","plotly_deselect","plotly_afterplot","plotly_sunburstclick"],"base_url":"https://plot.ly"},"evals":[],"jsHooks":[]}</script>
+          <div class="plotly html-widget html-fill-item-overflow-hidden html-fill-item" id="htmlwidget-10c6df4c2651143a2b58" style="width:100%;height:400px;"></div>
+          <script type="application/json" data-for="htmlwidget-10c6df4c2651143a2b58">{"x":{"visdat":{"36992719ada0":["function () ","plotlyVisDat"]},"cur_data":"36992719ada0","attrs":{"36992719ada0":{"alpha_stroke":1,"sizes":[10,100],"spans":[1,20]}},"layout":{"margin":{"b":40,"l":60,"t":25,"r":10},"xaxis":{"domain":[0,1],"automargin":true},"yaxis":{"domain":[0,1],"automargin":true},"hovermode":"closest","showlegend":false},"source":"A","config":{"modeBarButtonsToAdd":["hoverclosest","hovercompare"],"showSendToCloud":false},"data":[{"type":"scatter","mode":"markers","marker":{"color":"rgba(31,119,180,1)","line":{"color":"rgba(31,119,180,1)"}},"error_y":{"color":"rgba(31,119,180,1)"},"error_x":{"color":"rgba(31,119,180,1)"},"line":{"color":"rgba(31,119,180,1)"},"xaxis":"x","yaxis":"y","frame":null}],"highlight":{"on":"plotly_click","persistent":false,"dynamic":false,"selectize":false,"opacityDim":0.20000000000000001,"selected":{"opacity":1},"debounce":0},"shinyEvents":["plotly_hover","plotly_click","plotly_selected","plotly_relayout","plotly_brushed","plotly_brushing","plotly_clickannotation","plotly_doubleclick","plotly_deselect","plotly_afterplot","plotly_sunburstclick"],"base_url":"https://plot.ly"},"evals":[],"jsHooks":[]}</script>
         </div>
         <bslib-tooltip placement="auto" bsOptions="[]" data-require-bs-version="5" data-require-bs-caller="tooltip()">
           <template>Expand</template>
@@ -45,8 +45,8 @@
       <div class="card bslib-card bslib-mb-spacing html-fill-item html-fill-container" data-bslib-card-init data-full-screen="false" data-require-bs-caller="card()" data-require-bs-version="5">
         <div class="card-header">Plot</div>
         <div class="card-body bslib-gap-spacing html-fill-item html-fill-container" style="margin-top:auto;margin-bottom:auto;flex:1 1 auto;">
-          <div class="plotly html-widget html-fill-item-overflow-hidden html-fill-item" id="htmlwidget-1f6189c5462abf9cf843" style="width:100%;height:400px;"></div>
-          <script type="application/json" data-for="htmlwidget-1f6189c5462abf9cf843">{"x":{"visdat":{"37751a676c6":["function () ","plotlyVisDat"]},"cur_data":"37751a676c6","attrs":{"37751a676c6":{"alpha_stroke":1,"sizes":[10,100],"spans":[1,20]}},"layout":{"margin":{"b":40,"l":60,"t":25,"r":10},"xaxis":{"domain":[0,1],"automargin":true},"yaxis":{"domain":[0,1],"automargin":true},"hovermode":"closest","showlegend":false},"source":"A","config":{"modeBarButtonsToAdd":["hoverclosest","hovercompare"],"showSendToCloud":false},"data":[{"type":"scatter","mode":"markers","marker":{"color":"rgba(31,119,180,1)","line":{"color":"rgba(31,119,180,1)"}},"error_y":{"color":"rgba(31,119,180,1)"},"error_x":{"color":"rgba(31,119,180,1)"},"line":{"color":"rgba(31,119,180,1)"},"xaxis":"x","yaxis":"y","frame":null}],"highlight":{"on":"plotly_click","persistent":false,"dynamic":false,"selectize":false,"opacityDim":0.20000000000000001,"selected":{"opacity":1},"debounce":0},"shinyEvents":["plotly_hover","plotly_click","plotly_selected","plotly_relayout","plotly_brushed","plotly_brushing","plotly_clickannotation","plotly_doubleclick","plotly_deselect","plotly_afterplot","plotly_sunburstclick"],"base_url":"https://plot.ly"},"evals":[],"jsHooks":[]}</script>
+          <div class="plotly html-widget html-fill-item-overflow-hidden html-fill-item" id="htmlwidget-14336d733cd9c3745d09" style="width:100%;height:400px;"></div>
+          <script type="application/json" data-for="htmlwidget-14336d733cd9c3745d09">{"x":{"visdat":{"36992719ada0":["function () ","plotlyVisDat"]},"cur_data":"36992719ada0","attrs":{"36992719ada0":{"alpha_stroke":1,"sizes":[10,100],"spans":[1,20]}},"layout":{"margin":{"b":40,"l":60,"t":25,"r":10},"xaxis":{"domain":[0,1],"automargin":true},"yaxis":{"domain":[0,1],"automargin":true},"hovermode":"closest","showlegend":false},"source":"A","config":{"modeBarButtonsToAdd":["hoverclosest","hovercompare"],"showSendToCloud":false},"data":[{"type":"scatter","mode":"markers","marker":{"color":"rgba(31,119,180,1)","line":{"color":"rgba(31,119,180,1)"}},"error_y":{"color":"rgba(31,119,180,1)"},"error_x":{"color":"rgba(31,119,180,1)"},"line":{"color":"rgba(31,119,180,1)"},"xaxis":"x","yaxis":"y","frame":null}],"highlight":{"on":"plotly_click","persistent":false,"dynamic":false,"selectize":false,"opacityDim":0.20000000000000001,"selected":{"opacity":1},"debounce":0},"shinyEvents":["plotly_hover","plotly_click","plotly_selected","plotly_relayout","plotly_brushed","plotly_brushing","plotly_clickannotation","plotly_doubleclick","plotly_deselect","plotly_afterplot","plotly_sunburstclick"],"base_url":"https://plot.ly"},"evals":[],"jsHooks":[]}</script>
         </div>
         <bslib-tooltip placement="auto" bsOptions="[]" data-require-bs-version="5" data-require-bs-caller="tooltip()">
           <template>Expand</template>
@@ -59,8 +59,8 @@
   <div class="card bslib-card bslib-mb-spacing html-fill-item html-fill-container" data-bslib-card-init data-full-screen="false" data-require-bs-caller="card()" data-require-bs-version="5">
     <div class="card-header">Plot</div>
     <div class="card-body bslib-gap-spacing html-fill-item html-fill-container" style="margin-top:auto;margin-bottom:auto;flex:1 1 auto;">
-      <div class="plotly html-widget html-fill-item-overflow-hidden html-fill-item" id="htmlwidget-68ca2fa8712875a38b07" style="width:100%;height:400px;"></div>
-      <script type="application/json" data-for="htmlwidget-68ca2fa8712875a38b07">{"x":{"visdat":{"37751a676c6":["function () ","plotlyVisDat"]},"cur_data":"37751a676c6","attrs":{"37751a676c6":{"alpha_stroke":1,"sizes":[10,100],"spans":[1,20]}},"layout":{"margin":{"b":40,"l":60,"t":25,"r":10},"xaxis":{"domain":[0,1],"automargin":true},"yaxis":{"domain":[0,1],"automargin":true},"hovermode":"closest","showlegend":false},"source":"A","config":{"modeBarButtonsToAdd":["hoverclosest","hovercompare"],"showSendToCloud":false},"data":[{"type":"scatter","mode":"markers","marker":{"color":"rgba(31,119,180,1)","line":{"color":"rgba(31,119,180,1)"}},"error_y":{"color":"rgba(31,119,180,1)"},"error_x":{"color":"rgba(31,119,180,1)"},"line":{"color":"rgba(31,119,180,1)"},"xaxis":"x","yaxis":"y","frame":null}],"highlight":{"on":"plotly_click","persistent":false,"dynamic":false,"selectize":false,"opacityDim":0.20000000000000001,"selected":{"opacity":1},"debounce":0},"shinyEvents":["plotly_hover","plotly_click","plotly_selected","plotly_relayout","plotly_brushed","plotly_brushing","plotly_clickannotation","plotly_doubleclick","plotly_deselect","plotly_afterplot","plotly_sunburstclick"],"base_url":"https://plot.ly"},"evals":[],"jsHooks":[]}</script>
+      <div class="plotly html-widget html-fill-item-overflow-hidden html-fill-item" id="htmlwidget-f3673e66936ac08596b5" style="width:100%;height:400px;"></div>
+      <script type="application/json" data-for="htmlwidget-f3673e66936ac08596b5">{"x":{"visdat":{"36992719ada0":["function () ","plotlyVisDat"]},"cur_data":"36992719ada0","attrs":{"36992719ada0":{"alpha_stroke":1,"sizes":[10,100],"spans":[1,20]}},"layout":{"margin":{"b":40,"l":60,"t":25,"r":10},"xaxis":{"domain":[0,1],"automargin":true},"yaxis":{"domain":[0,1],"automargin":true},"hovermode":"closest","showlegend":false},"source":"A","config":{"modeBarButtonsToAdd":["hoverclosest","hovercompare"],"showSendToCloud":false},"data":[{"type":"scatter","mode":"markers","marker":{"color":"rgba(31,119,180,1)","line":{"color":"rgba(31,119,180,1)"}},"error_y":{"color":"rgba(31,119,180,1)"},"error_x":{"color":"rgba(31,119,180,1)"},"line":{"color":"rgba(31,119,180,1)"},"xaxis":"x","yaxis":"y","frame":null}],"highlight":{"on":"plotly_click","persistent":false,"dynamic":false,"selectize":false,"opacityDim":0.20000000000000001,"selected":{"opacity":1},"debounce":0},"shinyEvents":["plotly_hover","plotly_click","plotly_selected","plotly_relayout","plotly_brushed","plotly_brushing","plotly_clickannotation","plotly_doubleclick","plotly_deselect","plotly_afterplot","plotly_sunburstclick"],"base_url":"https://plot.ly"},"evals":[],"jsHooks":[]}</script>
     </div>
     <bslib-tooltip placement="auto" bsOptions="[]" data-require-bs-version="5" data-require-bs-caller="tooltip()">
       <template>Expand</template>