Attempt to fix double box-shadow on figures

posit-dev · Jan 25, 2024 · b9eaccb · b9eaccb
1 parent 9c5b28f
commit b9eaccb
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 6 deletions.
diff --git a/docs/dashboards.qmd b/docs/dashboards.qmd
@@ -8,7 +8,7 @@ editor:
 Shiny's UI [components](/components) and [layouts](/layouts) can be used to create a wide range of apps, including dashboards.
 In this article, we'll highlight some of the most useful components for creating dashboard, and eventally show how to create [this sophisticated dashboard](#altogether-now):
 
-![A Shiny dashboard with visuals for exploring restaurant tips (see [here](#altogether-now) for the code).](assets/tipping-dashboard.png){class="img-fluid shadow rounded"}
+![A Shiny dashboard with visuals for exploring restaurant tips (see [here](#altogether-now) for the code).](assets/tipping-dashboard.png){class="img-shadow"}
 
 ::: callout-tip
 ## Different layouts

diff --git a/docs/install-create-run.qmd b/docs/install-create-run.qmd
@@ -143,7 +143,7 @@ The best way to create a new Shiny app is with the `shiny create` command line i
 shiny create
 ```
 
-![Running the shiny create command from a terminal](assets/shiny-create.mp4){class="img-fluid shadow rounded"}
+![Running the shiny create command from a terminal](assets/shiny-create.mp4){class="img-shadow"}
 
 ::: callout-tip
 ### Copy/paste examples

diff --git a/docs/quick-start.qmd b/docs/quick-start.qmd
@@ -15,7 +15,7 @@ Welcome to the Shiny quick start guide!
 After reading this article, you'll be able to get started creating basic Shiny apps.
 In later articles, we'll build on these concepts to create more advanced apps, like the following dashboard:
 
-![A Shiny dashboard with visuals for exploring restaurant tips (covered in the [next article](dashboards.qmd)).](assets/tipping-dashboard.png){class="img-fluid shadow rounded"}
+![A Shiny dashboard with visuals for exploring restaurant tips (covered in the [next article](dashboards.qmd)).](assets/tipping-dashboard.png){class="img-shadow"}
 
 
 ### Basics {#basics}
@@ -533,7 +533,7 @@ Once you've [installed](install-create-run.qmd) Shiny, the `shiny create` CLI co
 shiny create -t dashboard
 ```
 
-![The resulting dashboard generated by the dashboard template](assets/dashboard-template.png){class="img-fluid shadow rounded"}
+![The resulting dashboard generated by the dashboard template](assets/dashboard-template.png){class="img-shadow"}
 
 ::: {.callout-tip}
 ## Example gallery

diff --git a/docs/reactive-patterns.qmd b/docs/reactive-patterns.qmd
@@ -112,7 +112,7 @@ def table():
     return render.DataGrid(df())
 ```
 
-![A gif of uploading a csv file and seeing the text and table outputs update](assets/file-upload.mp4){class="img-fluid shadow rounded" style="margin-top: -1.5rem;"}
+![A gif of uploading a csv file and seeing the text and table outputs update](assets/file-upload.mp4){class="img-shadow" style="margin-top: -1.5rem;"}
 
 
 ## Scheduled invalidation {#invalidate-later}

diff --git a/quarto-style.scss b/quarto-style.scss
@@ -1218,6 +1218,14 @@ pre.console {
     0px 12px 30px rgb(0 0 0 / 8%);
 }
 
+// For some reason, quarto wants to add classes to both img and figure when
+// classes are provided. This is a hack to just get a shadow on the image, if requested.
+img, video {
+  &.img-shadow {
+    @extend .shadow;
+  }
+}
+
 code.sourceCode,
 pre.console code {
   padding: 0.5rem;
@@ -1865,4 +1873,3 @@ body:not(.modal-open) div.sourceCode:hover pre {
     padding-right: 0.4rem !important;
   }
 }
-