doryan
/
material-you-react
0
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

COMPLETED: Card sub-components 

HOTFIX: In all cards add CSS rule : if card media subcomponent are first, or first any of subcomponents contain on first place media component - applying a zero-padding and border-radius exclude a default padding value
This commit is contained in:
doryan04 2024-02-04 23:48:45 +04:00
parent c83d1f4232
commit b33f4052ad
5 changed files with 65 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
app/page.tsx
View File

@ -20,7 +20,7 @@ export default function Page() {
padding: '8px',
}}
>
<div style={{ display: 'flex', gap: '8px', maxWidth: 1024 }}>
<div style={{ display: 'flex', gap: '8px', maxWidth: '90vw' }}>
<Card variant={'outlined'}>
<CardHeader>
<h1>Header</h1>
@ -76,6 +76,32 @@ export default function Page() {
<Button>label</Button>
</CardFooter>
</Card>
<Card variant={'elevated'}>
<CardActionArea>
<CardMedia src={testImage1.src} type={'img'} />
<CardBody>
<h4>
<strong>Sub-header</strong>
</h4>
<p>
Lorem ipsum dolor sit amet, consecrate
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</CardBody>
</CardActionArea>
<CardFooter>
<Button>label</Button>
</CardFooter>
</Card>
<Card variant={'elevated'}>
<CardHeader>
<h1>Header</h1>

11
src/styles/card.sass
View File

@ -8,11 +8,18 @@ $padding: 16px
@else
@return 0px
div.m3.m3-card > .m3-card-media:first-child
div.m3.m3-card
& > :is(div.m3-card-footer, header.m3-card-header, section.m3-card-body) > .m3-card-media:first-child,
& > .m3-card-media:first-child,
& > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child
padding: padding-calculating(false)
border-radius: 12px !important
:is(div.m3-card-footer, header.m3-card-header, section.m3-card-body, img.m3-card-media).m3
div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child
padding: padding-calculating(false)
border-radius: 12px !important
:is(div.m3-card-footer, header.m3-card-header, section.m3-card-body, .m3-card-media).m3
padding: padding-calculating(true)
display: block
box-sizing: border-box

9
src/styles/generics.css
View File

@ -3,12 +3,17 @@
@import "./themes/typography.module.css";
@import "./themes/theme.dark.css" (prefers-color-scheme: dark);
@import "./themes/theme.light.css" (prefers-color-scheme: light);
div.m3.m3-card > .m3-card-media:first-child {
div.m3.m3-card > :is(div.m3-card-footer, header.m3-card-header, section.m3-card-body) > .m3-card-media:first-child, div.m3.m3-card > .m3-card-media:first-child, div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child {
padding: 0px;
border-radius: 12px !important;
}
:is(div.m3-card-footer, header.m3-card-header, section.m3-card-body, img.m3-card-media).m3 {
div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child {
padding: 0px;
border-radius: 12px !important;
}
:is(div.m3-card-footer, header.m3-card-header, section.m3-card-body, .m3-card-media).m3 {
padding: 16px;
display: block;
box-sizing: border-box;

2
src/styles/generics.css.map
View File

File diff suppressed because one or more lines are too long

21
src/styles/themes/tokens.css
View File

@ -104,4 +104,25 @@
--md-sys-typescale-title-small-font-size: 14px;
--md-sys-typescale-title-small-line-height: 20px;
--md-sys-typescale-title-small-letter-spacing: 0.1px;
/* shape - extra large top rounding */
--md-sys-shape-extra-large-top-rounding: 28px 28px 0 0;
/* shape - extra large rounding */
--md-sys-shape-extra-large-rounding: 28px;
/* shape - large top rounding */
--md-sys-shape-large-top-rounding: 16px 16px 0 0;
/* shape - large end rounding */
--md-sys-shape-large-end-rounding: 0 16px 16px 0;
/* shape - large start rounding */
--md-sys-shape-large-start-rounding: 16px 0 0 16px;
/* shape - large rounding */
--md-sys-shape-large-rounding: 16px;
/* shape - medium rounding */
--md-sys-shape-medium-rounding: 12px;
/* shape - small rounding */
--md-sys-shape-small-rounding: 8px;
/* shape - extra small top rounding */
--md-sys-shape-extra-small-top-rounding: 4px 4px 0 0;
/* shape - extra small rounding */
--md-sys-shape-extra-small-rounding: 4px;
}