Issue #2456805 by rachel_norfolk, rudraram, Manjit.Singh, emma.maria,...

Issue #2456805 by rachel_norfolk, rudraram, Manjit.Singh, emma.maria, saki007ster, ChandeepKhosa, idebr, Vidushi Mehta, dcor, mgifford, jp.stacey, mikebell_: Clean up the "messages" component in Bartik

core/themes/bartik/bartik.libraries.yml

@@ -20,6 +20,7 @@ global-styling:
       css/components/forum.css: {}
       css/components/header.css: {}
       css/components/help.css: {}
+      css/components/highlighted.css: {}
       css/components/item-list.css: {}
       css/components/list-group.css: {}
       css/components/list.css: {}

core/themes/bartik/css/components/highlighted.css

+/**
+ * @file
+ * Styles for Bartik's highlighted component.
+ */
+
+.has-featured-top .region-highlighted {
+  background: #f0f0f0;
+  background: rgba(30, 50, 10, 0.08);
+}
+.region-highlighted {
+  margin: 0 15px;
+}

core/themes/bartik/css/components/messages.css

-/* ---------------- Messages  ----------------- */
+/**
+ * @file
+ * Styles for Bartik's messages.
+ */
 
-#messages {
-  padding: 20px 0 5px;
-  margin: 0 auto;
+.messages__wrapper {
+  padding: 20px 0 5px 8px;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  margin: 8px 0;
 }
-.has-featured-top .highlighted {
-  background: #f0f0f0;
-  background: rgba(30, 50, 10, 0.08);
-}
-div.messages {
-  margin: 8px 15px 8px 23px; /* LTR */
-}
-[dir="rtl"] div.messages {
-  margin-right: 23px;
-  margin-left: 15px;
+[dir="rtl"] .messages__wrapper {
+  padding: 20px 8px 5px 0;
 }

core/themes/bartik/css/maintenance-page.css

@@ -17,8 +17,7 @@ body.maintenance-page {
 .maintenance-page #main-wrapper {
   min-height: inherit;
 }
-.maintenance-page #header,
-.maintenance-page #messages {
+.maintenance-page #header {
   width: auto;
 }
 .maintenance-page #main {
@@ -54,13 +53,6 @@ body.maintenance-page {
   line-height: 1em;
   margin-top: 0;
 }
-.maintenance-page #messages {
-  padding: 0;
-  margin-top: 30px;
-}
-.maintenance-page #messages div.messages {
-  margin: 0;
-}
 @media all and (min-width: 800px) {
   .maintenance-page #page-wrapper {
     width: 800px;
@@ -69,10 +61,6 @@ body.maintenance-page {
   .maintenance-page #main {
     width: 700px;
   }
-  .maintenance-page #messages div.section {
-    padding: 0;
-    width: auto;
-  }
 }
 @media all and (min-width: 600px) { /* @TODO find the proper breakpoint */
   .maintenance-page #page {

core/themes/bartik/templates/status-messages.html.twig

@@ -25,10 +25,8 @@
 {% block messages %}
   {% if message_list is not empty %}
     {{ attach_library('bartik/messages') }}
-    <div id="messages">
-      <div class="section clearfix">
-        {{ parent() }}
-      </div>
+    <div class="messages__wrapper layout-container">
+      {{ parent() }}
     </div>
   {% endif %}
 {% endblock messages %}