Skip to content

Commit

Permalink
[pre-commit.ci] auto fixes from pre-commit.com hooks
Browse files Browse the repository at this point in the history
for more information, see https://pre-commit.ci
  • Loading branch information
pre-commit-ci[bot] committed Dec 4, 2024
1 parent 8d63b8e commit fc6f180
Showing 1 changed file with 1 addition and 6 deletions.
7 changes: 1 addition & 6 deletions vizro-core/docs/pages/user-guides/card-button.md
Original file line number Diff line number Diff line change
Expand Up @@ -404,13 +404,9 @@ To float an image for example to the right of the text, use the `src` attribute
=== "Result"
[![CardImageFloating]][cardimagefloating]


### 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 leverages 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 Expand Up @@ -678,7 +674,6 @@ vm.Page.add_type("controls", vm.Button)
[button]: ../../assets/user_guides/components/button.png
[buttontext]: ../../assets/user_guides/components/button_text.png
[card]: ../../assets/user_guides/components/card.png
[cardicon]: ../../assets/user_guides/components/card_icon.png
[cardimagedefault]: ../../assets/user_guides/components/card_image_default.png
[cardimagefloating]: ../../assets/user_guides/components/card_image_floating.png
[cardimagestyled]: ../../assets/user_guides/components/card_image_styled.png
Expand Down

0 comments on commit fc6f180

Please sign in to comment.