From 539ad62b3cd8e730370a451bba0206a777cfd67a Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Tue, 11 Jul 2023 10:48:45 +0300
Subject: [PATCH] Issue #3355248 by Gauravvvv, rpayanm, Santosh_Verma, bnjmnm,
smustgrave: Refactor Claro's elements stylesheet
---
core/themes/claro/css/base/elements.css | 48 ++++-------------
core/themes/claro/css/base/elements.pcss.css | 55 +++++++-------------
2 files changed, 28 insertions(+), 75 deletions(-)
diff --git a/core/themes/claro/css/base/elements.css b/core/themes/claro/css/base/elements.css
index 4b53d307d349..37aebdb252bf 100644
--- a/core/themes/claro/css/base/elements.css
+++ b/core/themes/claro/css/base/elements.css
@@ -121,29 +121,20 @@ dl {
dl dd,
dl dl {
- margin-bottom: 0.625rem;
- margin-left: 1.25rem; /* LTR */
-}
-
-[dir="rtl"] dl dd,
-[dir="rtl"] dl dl {
- margin-right: 1.25rem;
+ margin-block-end: 0.625rem;
+ margin-inline-start: 1.25rem;
}
blockquote {
position: relative;
- margin: var(--space-l);
- margin-left: 2.5rem; /* LTR */
+ margin-block: var(--space-l);
+ margin-inline: 2.5rem var(--space-l);
font-size: var(--font-size-h6);
}
-[dir="rtl"] blockquote {
- margin-right: 2.5rem;
-}
-
blockquote::before {
position: absolute;
- left: -2.5rem; /* LTR */
+ inset-inline-start: -2.5rem;
content: open-quote;
color: var(--color-absolutezero);
font-family: var(--font-family-serif);
@@ -151,10 +142,6 @@ blockquote::before {
line-height: 1em;
}
-[dir="rtl"] blockquote::before {
- right: -2.5rem;
-}
-
blockquote::after {
content: no-close-quote;
}
@@ -202,35 +189,20 @@ acronym {
}
ul {
- margin: 0.25em 0 0.25em 1.5em; /* LTR */
- padding-left: 0;
+ margin-block: 0.25em;
+ margin-inline: 1.5em 0;
+ padding-inline-start: 0;
list-style-type: disc;
list-style-image: none;
}
-[dir="rtl"] ul {
- margin-right: 1.5em;
- margin-left: 0;
- padding-right: 0;
-}
-
-/* This is required to win over specificity of [dir="rtl"] ul */
-
-[dir="rtl"] .messages__list {
- margin-right: 0;
-}
-
ol {
- margin: 0.25em 0 0.25em 2em; /* LTR */
+ margin-block: 0.25em;
+ margin-inline: 2em 0;
padding: 0;
list-style-type: decimal;
}
-[dir="rtl"] ol {
- margin-right: 2em;
- margin-left: 0;
-}
-
/**
* Fix duplicate border caused by normalize.css adding border-bottom without
* removing the text-decoration.
diff --git a/core/themes/claro/css/base/elements.pcss.css b/core/themes/claro/css/base/elements.pcss.css
index 55bdf36cb014..a6e8c111046c 100644
--- a/core/themes/claro/css/base/elements.pcss.css
+++ b/core/themes/claro/css/base/elements.pcss.css
@@ -99,34 +99,24 @@ dl {
}
dl dd,
dl dl {
- margin-bottom: 10px;
- margin-left: 20px; /* LTR */
-}
-[dir="rtl"] dl dd,
-[dir="rtl"] dl dl {
- margin-right: 20px;
+ margin-block-end: 10px;
+ margin-inline-start: 20px;
}
blockquote {
position: relative;
- margin: var(--space-l);
- margin-left: 2.5rem; /* LTR */
+ margin-block: var(--space-l);
+ margin-inline: 2.5rem var(--space-l);
font-size: var(--font-size-h6);
}
-[dir="rtl"] blockquote {
- margin-right: 2.5rem;
-}
blockquote::before {
position: absolute;
- left: -2.5rem; /* LTR */
+ inset-inline-start: -2.5rem;
content: open-quote;
color: var(--color-absolutezero);
font-family: var(--font-family-serif);
font-size: var(--space-xl);
line-height: 1em;
}
-[dir="rtl"] blockquote::before {
- right: -2.5rem;
-}
blockquote::after {
content: no-close-quote;
}
@@ -163,29 +153,18 @@ acronym {
border-bottom: dotted 1px;
}
ul {
- margin: 0.25em 0 0.25em 1.5em; /* LTR */
- padding-left: 0;
+ margin-block: 0.25em;
+ margin-inline: 1.5em 0;
+ padding-inline-start: 0;
list-style-type: disc;
list-style-image: none;
}
-[dir="rtl"] ul {
- margin-right: 1.5em;
- margin-left: 0;
- padding-right: 0;
-}
-/* This is required to win over specificity of [dir="rtl"] ul */
-[dir="rtl"] .messages__list {
- margin-right: 0;
-}
ol {
- margin: 0.25em 0 0.25em 2em; /* LTR */
+ margin-block: 0.25em;
+ margin-inline: 2em 0;
padding: 0;
list-style-type: decimal;
}
-[dir="rtl"] ol {
- margin-right: 2em;
- margin-left: 0;
-}
/**
* Fix duplicate border caused by normalize.css adding border-bottom without
@@ -204,12 +183,14 @@ pre {
}
details {
line-height: var(--details-line-height);
-}
-details summary {
- padding: 0.95em 1.45em;
-}
-details summary:focus {
- outline: none;
+
+ & summary {
+ padding: 0.95em 1.45em;
+
+ &:focus {
+ outline: none;
+ }
+ }
}
img {
max-width: 100%;
--
GitLab