Skip to content

Commit

Permalink
Merge branch 'tidy/remove-custom-img-css' of https://github.com/mckin…
Browse files Browse the repository at this point in the history
…sey/vizro into tidy/remove-custom-img-css
  • Loading branch information
huong-li-nguyen committed Dec 4, 2024
2 parents 09062fe + db51d40 commit 343cdd4
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 3 deletions.
3 changes: 1 addition & 2 deletions vizro-core/docs/pages/tutorials/explore-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -462,7 +462,7 @@ You can apply selectors to configure [`Filters`][vizro.models.Filter] and [`Para

Each page is added to the dashboard using the following line of code: `vm.Dashboard(pages=[first_page, second_page])`. This ensures that all the pages are accessible.

By default, a navigation panel is added on the left side to switch between the two pages.
By default, a navigation panel on the left side enables the user to switch between the two pages.

!!! example "Final dashboard"
=== "Code"
Expand Down Expand Up @@ -571,7 +571,6 @@ Vizro doesn't end here, and we only covered the key features, but there is still
- How to use [Actions](../user-guides/actions.md) for example, for chart interaction or custom controls.
- How to create dashboards from `yaml`, `dict` or `json` following the [dashboard guide](../user-guides/dashboard.md).

[finalpage]: ../../assets/tutorials/dashboard/dashboard4.png
[finalpage1]: ../../assets/tutorials/dashboard/dashboard-first-page.png
[finalpage2]: ../../assets/tutorials/dashboard/dashboard-second-page.png
[firstpage1]: ../../assets/tutorials/dashboard/dashboard21.png
Expand Down
4 changes: 3 additions & 1 deletion vizro-core/docs/pages/user-guides/card-button.md
Original file line number Diff line number Diff line change
Expand Up @@ -406,7 +406,9 @@ To float an image for example to the right of the text, use the `src` attribute

### Make an icon responsive to theme switch

To make an icon responsive to theme switching, override its [`filter` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/filter). In this example, we use the `--fill-icon-image-card` CSS variable from the `vizro-bootstrap` CSS file. It leverages the `invert()` function to flip the icon's color during a theme switch.
To make an icon responsive to theme switching, override its [`filter` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/filter).

In this example, we use the `--fill-icon-image-card` CSS variable from the `vizro-bootstrap` CSS file. It uses the `invert()` function to flip the icon's color during a theme switch.

This approach works if your icon initially has a white fill color. If not, modify the SVG code by adding `fill="white"`.

Expand Down

0 comments on commit 343cdd4

Please sign in to comment.