From 7cb4919f4b2ff8fa5b1f95c2d07cff0796dc34e2 Mon Sep 17 00:00:00 2001
From: nod_ <nod_@598310.no-reply.drupal.org>
Date: Wed, 12 Apr 2023 10:06:53 +0200
Subject: [PATCH] Issue #3332419 by Gauravvvv, smustgrave, lauriii: Refactor
 Claro's messages stylesheet

---
 core/themes/claro/css/components/messages.css | 134 ++++++++----------
 .../claro/css/components/messages.pcss.css    | 102 ++++++-------
 2 files changed, 100 insertions(+), 136 deletions(-)

diff --git a/core/themes/claro/css/components/messages.css b/core/themes/claro/css/components/messages.css
index 6fd157f04c8..621116aa303 100644
--- a/core/themes/claro/css/components/messages.css
+++ b/core/themes/claro/css/components/messages.css
@@ -27,23 +27,22 @@
 }
 
 .messages-list {
-  margin-top: calc(var(--space-m) + var(--space-l));
-  margin-bottom: calc(var(--space-m) + var(--space-l));
+  margin-block: calc(var(--space-m) + var(--space-l));
   padding: 0;
   list-style: none;
 }
 
 .field .messages-list,
 .form-wrapper .messages-list {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 
 .messages {
   overflow: auto; /* Required to prevent text clipping. */
   box-sizing: border-box;
-  margin-top: var(--space-m);
-  margin-bottom: var(--space-m);
-  padding: var(--space-l) var(--space-l) 2rem calc(var(--space-l) - 0.3125rem); /* LTR */
+  margin-block: var(--space-m);
+  padding-block: var(--space-l) 2rem;
+  padding-inline: calc(var(--space-l) - 0.3125rem) var(--space-l);
   color: var(--messages-fg-color);
   border-width: 0 0 0 var(--messages-border-width); /* LTR */
   border-style: solid;
@@ -52,76 +51,6 @@
   background-color: var(--messages-bg-color);
 }
 
-[dir="rtl"] .messages {
-  padding-right: calc(var(--space-l) - 0.3125rem);
-  padding-left: var(--space-l);
-  border-right-width: var(--messages-border-width);
-  border-left-width: 0;
-}
-
-.messages--error {
-  border-color: var(--messages--error-color);
-}
-
-.messages--status {
-  border-color: var(--messages--status-color);
-}
-
-.messages--warning {
-  border-color: var(--messages--warning-color);
-}
-
-.messages__title {
-  margin: 0 0 0 var(--messages__text-margin); /* LTR */
-  font-size: var(--font-size-base);
-}
-
-[dir="rtl"] .messages__title {
-  margin-right: var(--messages__text-margin);
-  margin-left: 0;
-}
-
-.messages--error .messages__header {
-  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 14 14'%3e%3cpath d='M3 11.193L11.45 3' stroke='%23e34f4f' stroke-width='2'/%3e%3ccircle cx='7' cy='7' r='6' fill='none' stroke='%23e34f4f' stroke-width='2'/%3e%3c/svg%3e") no-repeat center left; /* LTR */
-}
-
-[dir="rtl"] .messages--error .messages__header {
-  background-position: center right;
-}
-
-.messages--status .messages__header {
-  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 13'%3e%3cpath d='M2 6.571L5.6 10 14 2' fill='none' stroke='%2342a877' stroke-width='3'/%3e%3c/svg%3e") no-repeat center left; /* LTR */
-}
-
-[dir="rtl"] .messages--status .messages__header {
-  background-position: center right;
-}
-
-.messages--warning .messages__header {
-  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 4 14' fill='%23e0ac00'%3e%3cpath d='M.5 0h3v9h-3z'/%3e%3ccircle cx='2' cy='12.5' r='1.5'/%3e%3c/svg%3e") no-repeat center left; /* LTR */
-}
-
-[dir="rtl"] .messages--warning .messages__header {
-  background-position: center right;
-}
-
-.messages__header {
-  display: flex;
-  align-items: center;
-  margin-bottom: var(--space-m);
-}
-
-@media screen and (min-width: 48rem) {
-  .messages__content {
-    margin-left: var(--messages__text-margin); /* LTR */
-  }
-
-  [dir="rtl"] .messages__content {
-    margin-right: var(--messages__text-margin);
-    margin-left: 0;
-  }
-}
-
 .messages a {
   text-decoration: underline;
   color: var(--messages__link-color);
@@ -135,6 +64,57 @@
   margin: 0;
 }
 
+[dir="rtl"] .messages {
+  border-right-width: var(--messages-border-width);
+  border-left-width: 0;
+}
+
+.messages--error {
+  border-color: var(--messages--error-color);
+}
+
+.messages--error .messages__header {
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 14 14'%3e%3cpath d='M3 11.193L11.45 3' stroke='%23e34f4f' stroke-width='2'/%3e%3ccircle cx='7' cy='7' r='6' fill='none' stroke='%23e34f4f' stroke-width='2'/%3e%3c/svg%3e") no-repeat center left;
+}
+
+.messages--status {
+  border-color: var(--messages--status-color);
+}
+
+.messages--status .messages__header {
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 13'%3e%3cpath d='M2 6.571L5.6 10 14 2' fill='none' stroke='%2342a877' stroke-width='3'/%3e%3c/svg%3e") no-repeat center left;
+}
+
+.messages--warning {
+  border-color: var(--messages--warning-color);
+}
+
+.messages--warning .messages__header {
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 4 14' fill='%23e0ac00'%3e%3cpath d='M.5 0h3v9h-3z'/%3e%3ccircle cx='2' cy='12.5' r='1.5'/%3e%3c/svg%3e") no-repeat center left;
+}
+
+.messages__title {
+  margin-block: 0;
+  margin-inline: var(--messages__text-margin) 0;
+  font-size: var(--font-size-base);
+}
+
+.messages__header {
+  display: flex;
+  align-items: center;
+  margin-block-end: var(--space-m);
+}
+
+[dir="rtl"] .messages__header {
+  background-position: center right;
+}
+
+@media screen and (min-width: 48rem) {
+  .messages__content {
+    margin-inline-start: var(--messages__text-margin);
+  }
+}
+
 .messages__list {
   margin: 0;
   padding: 0;
@@ -142,5 +122,5 @@
 }
 
 .messages__item + .messages__item {
-  margin-top: var(--space-s);
+  margin-block-start: var(--space-s);
 }
diff --git a/core/themes/claro/css/components/messages.pcss.css b/core/themes/claro/css/components/messages.pcss.css
index d8321f6693b..69d75c63528 100644
--- a/core/themes/claro/css/components/messages.pcss.css
+++ b/core/themes/claro/css/components/messages.pcss.css
@@ -20,108 +20,92 @@
 }
 
 .messages-list {
-  margin-top: calc(var(--space-m) + var(--space-l));
-  margin-bottom: calc(var(--space-m) + var(--space-l));
+  margin-block: calc(var(--space-m) + var(--space-l));
   padding: 0;
   list-style: none;
 }
 
 .field .messages-list,
 .form-wrapper .messages-list {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 
 .messages {
   overflow: auto; /* Required to prevent text clipping. */
   box-sizing: border-box;
-  margin-top: var(--space-m);
-  margin-bottom: var(--space-m);
-  padding: var(--space-l) var(--space-l) 2rem calc(var(--space-l) - 5px); /* LTR */
+  margin-block: var(--space-m);
+  padding-block: var(--space-l) 2rem;
+  padding-inline: calc(var(--space-l) - 5px) var(--space-l);
   color: var(--messages-fg-color);
   border-width: 0 0 0 var(--messages-border-width); /* LTR */
   border-style: solid;
   border-color: var(--messages-bg-color);
   border-radius: var(--messages-border-radius);
   background-color: var(--messages-bg-color);
-}
 
-[dir="rtl"] .messages {
-  padding-right: calc(var(--space-l) - 5px);
-  padding-left: var(--space-l);
-  border-right-width: var(--messages-border-width);
-  border-left-width: 0;
+  & a {
+    text-decoration: underline;
+    color: var(--messages__link-color);
+
+    &:hover {
+      color: var(--messages__link--hover-color);
+    }
+  }
+
+  & pre {
+    margin: 0;
+  }
+
+  @nest [dir="rtl"] & {
+    border-right-width: var(--messages-border-width);
+    border-left-width: 0;
+  }
 }
 
 .messages--error {
   border-color: var(--messages--error-color);
+
+  & .messages__header {
+    background: url(../../images/icons/e34f4f/crossout.svg) no-repeat center left;
+  }
 }
 
 .messages--status {
   border-color: var(--messages--status-color);
+
+  & .messages__header {
+    background: url(../../images/icons/42a877/checkmark.svg) no-repeat center left;
+  }
 }
 
 .messages--warning {
   border-color: var(--messages--warning-color);
+
+  & .messages__header {
+    background: url(../../images/icons/e0ac00/exclamation.svg) no-repeat center left;
+  }
 }
 
 .messages__title {
-  margin: 0 0 0 var(--messages__text-margin); /* LTR */
+  margin-block: 0;
+  margin-inline: var(--messages__text-margin) 0;
   font-size: var(--font-size-base);
 }
-[dir="rtl"] .messages__title {
-  margin-right: var(--messages__text-margin);
-  margin-left: 0;
-}
-
-.messages--error .messages__header {
-  background: url(../../images/icons/e34f4f/crossout.svg) no-repeat center left; /* LTR */
-}
-[dir="rtl"] .messages--error .messages__header {
-  background-position: center right;
-}
-
-.messages--status .messages__header {
-  background: url(../../images/icons/42a877/checkmark.svg) no-repeat center left; /* LTR */
-}
-[dir="rtl"] .messages--status .messages__header {
-  background-position: center right;
-}
-
-.messages--warning .messages__header {
-  background: url(../../images/icons/e0ac00/exclamation.svg) no-repeat center left; /* LTR */
-}
-[dir="rtl"] .messages--warning .messages__header {
-  background-position: center right;
-}
 
 .messages__header {
   display: flex;
   align-items: center;
-  margin-bottom: var(--space-m);
+  margin-block-end: var(--space-m);
+
+  @nest [dir="rtl"] & {
+    background-position: center right;
+  }
 }
 
 @media screen and (min-width: 48rem) {
   .messages__content {
-    margin-left: var(--messages__text-margin); /* LTR */
+    margin-inline-start: var(--messages__text-margin);
   }
-
-  [dir="rtl"] .messages__content {
-    margin-right: var(--messages__text-margin);
-    margin-left: 0;
-  }
-}
-
-.messages a {
-  text-decoration: underline;
-  color: var(--messages__link-color);
-}
-
-.messages a:hover {
-  color: var(--messages__link--hover-color);
-}
-
-.messages pre {
-  margin: 0;
 }
 
 .messages__list {
@@ -131,5 +115,5 @@
 }
 
 .messages__item + .messages__item {
-  margin-top: var(--space-s);
+  margin-block-start: var(--space-s);
 }