Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-04-24 01:18:01 +02:00
Code Issues Projects Releases Wiki Activity

Correctly applied styles to Figure component in docs (#6894)

Browse Source 
It turns out the styles that we had in `style.modules.css` were
overridden by browser defaults.

## Before


![image](https://github.com/Unleash/unleash/assets/107407814/c43dee92-c055-4e16-a632-c462dbf3ed59)


## After


![image](https://github.com/Unleash/unleash/assets/107407814/de84166a-8798-4be7-8639-6cae042fc89f)


Now taking into account all the styles that were in the CSS files
(notice margin and border)
This commit is contained in:
Alvin Bryan 2024-04-19 13:09:19 +01:00 committed by GitHub
parent 2cb9ceaa72
commit a71d794780
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 6 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
website/src/components/Figure/Figure.tsx
View File

@ -66,8 +66,7 @@
// biome-ignore lint/style/useImportType: <explanation> // biome-ignore lint/style/useImportType: <explanation>
import React from 'react'; import React from 'react';
import useBaseUrl from '@docusaurus/useBaseUrl'; import useBaseUrl from '@docusaurus/useBaseUrl';
import styles from './styles.module.css';
import './styles.module.css';
type Props = { type Props = {
// An optional alt text, if the caption does not already convey all relevant // An optional alt text, if the caption does not already convey all relevant
@ -81,7 +80,7 @@ type Props = {
const Component: React.FC<Props> = ({ img, alt, caption }) => { const Component: React.FC<Props> = ({ img, alt, caption }) => {
return ( return (
<figure> <figure className={styles.figure}>
<img alt={alt} src={useBaseUrl(img)} /> <img alt={alt} src={useBaseUrl(img)} />
<figcaption>{caption}</figcaption> <figcaption>{caption}</figcaption>
</figure> </figure>

8
website/src/components/Figure/styles.module.css
View File

@ -1,5 +1,5 @@
/* Figures (with captions) */ /* Figures (with captions) */
.main-wrapper figure { .figure {
box-shadow: var(--ifm-global-shadow-lw); box-shadow: var(--ifm-global-shadow-lw);
border-radius: var(--ifm-global-radius); border-radius: var(--ifm-global-radius);
border: var(--ifm-global-border-width) solid var(--unleash-color-gray); border: var(--ifm-global-border-width) solid var(--unleash-color-gray);
@ -7,16 +7,16 @@
margin-inline: 0; margin-inline: 0;
} }
figure img { .figure img {
box-shadow: none; box-shadow: none;
border: none; border: none;
} }
figure * + * { .figure * + * {
margin-block-start: var(--ifm-pre-padding); margin-block-start: var(--ifm-pre-padding);
} }
figcaption { .figure figcaption {
font-size: var(--unleash-font-size-smaller); font-size: var(--unleash-font-size-smaller);
padding-inline: var(--ifm-pre-padding); padding-inline: var(--ifm-pre-padding);
border-inline-start: 5px solid var(--ifm-color-primary); border-inline-start: 5px solid var(--ifm-color-primary);