diff --git a/core/themes/claro/css/components/card.css b/core/themes/claro/css/components/card.css index 072a80deb03c31879ebf21b8fd64d040de36b52d..9d35e7b6c54244ab58e9435144c114115875e277 100644 --- a/core/themes/claro/css/components/card.css +++ b/core/themes/claro/css/components/card.css @@ -64,10 +64,10 @@ @media screen and (min-width: 36.75rem) { .card--horizontal .card__image { flex-basis: 35%; - border-radius: var(--card-image-border-radius-size) 0 0 var(--card-image-border-radius-size); /* LTR */ - } - [dir="rtl"] .card--horizontal .card__image { - border-radius: 0 var(--card-image-border-radius-size) var(--card-image-border-radius-size) 0; + border-start-start-radius: var(--card-image-border-radius-size); + border-start-end-radius: 0; + border-end-start-radius: var(--card-image-border-radius-size); + border-end-end-radius: 0; } } @@ -109,11 +109,7 @@ /* Card content with image. */ .card--horizontal .card__image ~ .card__content-wrapper { - padding-left: var(--space-m); - } - [dir="rtl"] .card--horizontal .card__image ~ .card__content-wrapper { - padding-right: var(--space-m); - padding-left: var(--space-l); + padding-inline-start: var(--space-m); } } @@ -142,12 +138,11 @@ */ .card__content-item { - margin-top: 0; - margin-bottom: var(--space-m); + margin-block: 0 var(--space-m); } .card__content-item:last-child { - margin-bottom: 0; + margin-block-end: 0; } /** @@ -156,16 +151,14 @@ .card__footer { order: 100; - margin-top: var(--space-l); + margin-block-start: var(--space-l); } -.card__footer .action-links, -[dir="rtl"] .card__footer .action-links { - margin-top: 0; - margin-bottom: 0; +.card__footer .action-links { + margin-block: 0; text-align: right; /* LTR */ } -[dir="rtl"] .card__footer .action-links { +[dir="rtl"] :is(.card__footer .action-links) { text-align: left; } diff --git a/core/themes/claro/css/components/card.pcss.css b/core/themes/claro/css/components/card.pcss.css index 0aa004ac6b96032f9df61b9bbad9be23516823a0..b7de858f6c72bc51838aeee292ba37e0c88a81eb 100644 --- a/core/themes/claro/css/components/card.pcss.css +++ b/core/themes/claro/css/components/card.pcss.css @@ -54,10 +54,10 @@ @media screen and (min-width: 36.75rem) { .card--horizontal .card__image { flex-basis: 35%; - border-radius: var(--card-image-border-radius-size) 0 0 var(--card-image-border-radius-size); /* LTR */ - } - [dir="rtl"] .card--horizontal .card__image { - border-radius: 0 var(--card-image-border-radius-size) var(--card-image-border-radius-size) 0; + border-start-start-radius: var(--card-image-border-radius-size); + border-start-end-radius: 0; + border-end-start-radius: var(--card-image-border-radius-size); + border-end-end-radius: 0; } } @@ -97,11 +97,7 @@ /* Card content with image. */ .card--horizontal .card__image ~ .card__content-wrapper { - padding-left: var(--space-m); - } - [dir="rtl"] .card--horizontal .card__image ~ .card__content-wrapper { - padding-right: var(--space-m); - padding-left: var(--space-l); + padding-inline-start: var(--space-m); } } @@ -128,11 +124,11 @@ * Card content items (title, description). */ .card__content-item { - margin-top: 0; - margin-bottom: var(--space-m); -} -.card__content-item:last-child { - margin-bottom: 0; + margin-block: 0 var(--space-m); + + &:last-child { + margin-block-end: 0; + } } /** @@ -140,15 +136,14 @@ */ .card__footer { order: 100; - margin-top: var(--space-l); + margin-block-start: var(--space-l); } -.card__footer .action-links, -[dir="rtl"] .card__footer .action-links { - margin-top: 0; - margin-bottom: 0; +.card__footer .action-links { + margin-block: 0; text-align: right; /* LTR */ -} -[dir="rtl"] .card__footer .action-links { - text-align: left; + + @nest [dir="rtl"] & { + text-align: left; + } }