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

COMPLETED: Card sub-components

Browse Source 
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
committed by doryan
parent 263856baf1
commit 1c91bd8caa
5 changed files with 65 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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
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, img.m3-card-media).m3
: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;
}