From ac24ea64262617d13fa40e3924013d890a87af92 Mon Sep 17 00:00:00 2001
From: Alex Pott <alex.a.pott@googlemail.com>
Date: Sun, 27 Sep 2015 13:40:00 +0200
Subject: [PATCH] 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 | 1 +
.../bartik/css/components/highlighted.css | 12 ++++++++++
.../themes/bartik/css/components/messages.css | 23 ++++++++-----------
core/themes/bartik/css/maintenance-page.css | 14 +----------
.../templates/status-messages.html.twig | 6 ++---
5 files changed, 25 insertions(+), 31 deletions(-)
create mode 100644 core/themes/bartik/css/components/highlighted.css
diff --git a/core/themes/bartik/bartik.libraries.yml b/core/themes/bartik/bartik.libraries.yml
index 3bfa3a6886ff..fd82367275d5 100644
--- a/core/themes/bartik/bartik.libraries.yml
+++ b/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: {}
diff --git a/core/themes/bartik/css/components/highlighted.css b/core/themes/bartik/css/components/highlighted.css
new file mode 100644
index 000000000000..d80bb8678aeb
--- /dev/null
+++ b/core/themes/bartik/css/components/highlighted.css
@@ -0,0 +1,12 @@
+/**
+ * @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;
+}
diff --git a/core/themes/bartik/css/components/messages.css b/core/themes/bartik/css/components/messages.css
index aad710f61ba5..15a550d0b964 100644
--- a/core/themes/bartik/css/components/messages.css
+++ b/core/themes/bartik/css/components/messages.css
@@ -1,18 +1,13 @@
-/* ---------------- 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;
}
diff --git a/core/themes/bartik/css/maintenance-page.css b/core/themes/bartik/css/maintenance-page.css
index dd473d479d4d..1196a220e6f8 100644
--- a/core/themes/bartik/css/maintenance-page.css
+++ b/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 {
diff --git a/core/themes/bartik/templates/status-messages.html.twig b/core/themes/bartik/templates/status-messages.html.twig
index 96188d324543..62dc6355e90b 100644
--- a/core/themes/bartik/templates/status-messages.html.twig
+++ b/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 %}
--
GitLab