From c0161655f9bfaaea6d0ba03649bd1c88dcabe6a6 Mon Sep 17 00:00:00 2001
From: Alex Pott <alex.a.pott@googlemail.com>
Date: Fri, 13 Mar 2015 15:20:10 +0000
Subject: [PATCH] Issue #2399939 by DickJohnson, LewisNyman, mherchel, idebr,
brahmjeet789: Refactor 'admin-panel' CSS component
---
core/modules/system/css/system.admin.css | 10 ++++----
.../templates/admin-block-content.html.twig | 6 ++---
.../system/templates/admin-block.html.twig | 8 +++---
core/themes/bartik/bartik.libraries.yml | 2 ++
core/themes/bartik/css/components/admin.css | 25 +------------------
.../bartik/css/components/list-group.css | 13 ++++++++++
core/themes/bartik/css/components/panel.css | 21 ++++++++++++++++
.../components/{admin-panel.css => panel.css} | 13 ++++------
core/themes/seven/seven.libraries.yml | 2 +-
9 files changed, 55 insertions(+), 45 deletions(-)
create mode 100644 core/themes/bartik/css/components/list-group.css
create mode 100644 core/themes/bartik/css/components/panel.css
rename core/themes/seven/css/components/{admin-panel.css => panel.css} (59%)
diff --git a/core/modules/system/css/system.admin.css b/core/modules/system/css/system.admin.css
index 99de30b8fbd9..3eeb44528daf 100644
--- a/core/modules/system/css/system.admin.css
+++ b/core/modules/system/css/system.admin.css
@@ -45,13 +45,13 @@
}
/**
- * Administration blocks.
+ * Panel.
+ * Used to visually group items together.
*/
-.admin-panel {
- margin: 0;
- padding: 5px 5px 15px 5px;
+.panel {
+ padding: 5px 5px 15px;
}
-.admin-panel .description {
+.panel__description {
margin: 0 0 3px;
padding: 2px 0 3px 0;
}
diff --git a/core/modules/system/templates/admin-block-content.html.twig b/core/modules/system/templates/admin-block-content.html.twig
index e70e565b71d8..f1c5f27a4e62 100644
--- a/core/modules/system/templates/admin-block-content.html.twig
+++ b/core/modules/system/templates/admin-block-content.html.twig
@@ -18,16 +18,16 @@
#}
{%
set classes = [
- 'admin-list',
+ 'list-group',
compact ? 'compact',
]
%}
{% if content %}
<dl{{ attributes.addClass(classes) }}>
{% for item in content %}
- <dt>{{ item.link }}</dt>
+ <dt class="list-group__link">{{ item.link }}</dt>
{% if item.description %}
- <dd>{{ item.description }}</dd>
+ <dd class="list-group__description">{{ item.description }}</dd>
{% endif %}
{% endfor %}
</dl>
diff --git a/core/modules/system/templates/admin-block.html.twig b/core/modules/system/templates/admin-block.html.twig
index 20aa000414b6..c3dab0efc8d7 100644
--- a/core/modules/system/templates/admin-block.html.twig
+++ b/core/modules/system/templates/admin-block.html.twig
@@ -14,13 +14,13 @@
* @ingroup themeable
*/
#}
-<div class="admin-panel">
+<div class="panel">
{% if block.title %}
- <h3>{{ block.title }}</h3>
+ <h3 class="panel__title">{{ block.title }}</h3>
{% endif %}
{% if block.content %}
- <div class="body">{{ block.content }}</div>
+ <div class="panel__content">{{ block.content }}</div>
{% elseif block.description %}
- <div class="description">{{ block.description }}</div>
+ <div class="panel__description">{{ block.description }}</div>
{% endif %}
</div>
diff --git a/core/themes/bartik/bartik.libraries.yml b/core/themes/bartik/bartik.libraries.yml
index 8eac2919ad0f..23ba49183aef 100644
--- a/core/themes/bartik/bartik.libraries.yml
+++ b/core/themes/bartik/bartik.libraries.yml
@@ -21,9 +21,11 @@ global-styling:
css/components/header.css: {}
css/components/region-help.css: {}
css/components/item-list.css: {}
+ css/components/list-group.css: {}
css/components/messages.css: {}
css/components/node-preview.css: {}
css/components/pager.css: {}
+ css/components/panel.css: {}
css/components/primary-menu.css: {}
css/components/search.css: {}
css/components/search-results.css: {}
diff --git a/core/themes/bartik/css/components/admin.css b/core/themes/bartik/css/components/admin.css
index 1455eddf9161..b9803ceb75dd 100644
--- a/core/themes/bartik/css/components/admin.css
+++ b/core/themes/bartik/css/components/admin.css
@@ -31,27 +31,4 @@
width: 500px;
}
-/* Configuration. */
-div.admin-panel {
- background: #fbfbfb;
- border: 1px solid #ccc;
- margin: 10px 0;
- padding: 0 5px 5px;
-}
-div.admin-panel h3 {
- margin: 16px 7px;
-}
-div.admin-panel dt {
- border-top: 1px solid #ccc;
- padding: 7px 0 0;
-}
-div.admin-panel dd {
- margin: 0 0 10px;
-}
-div.admin-panel .description {
- margin: 0 0 14px 7px; /* LTR */
-}
-[dir="rtl"] div.admin-panel .description {
- margin-left: 0;
- margin-right: 7px;
-}
+
diff --git a/core/themes/bartik/css/components/list-group.css b/core/themes/bartik/css/components/list-group.css
new file mode 100644
index 000000000000..607da312ba4a
--- /dev/null
+++ b/core/themes/bartik/css/components/list-group.css
@@ -0,0 +1,13 @@
+/**
+ * @file
+ * List group.
+ * A list of links, grouped together.
+ */
+
+.list-group__link {
+ border-top: 1px solid #ccc;
+ padding: 7px 0 0;
+}
+.list-group__description {
+ margin: 0 0 10px;
+}
diff --git a/core/themes/bartik/css/components/panel.css b/core/themes/bartik/css/components/panel.css
new file mode 100644
index 000000000000..51ea941d7a6e
--- /dev/null
+++ b/core/themes/bartik/css/components/panel.css
@@ -0,0 +1,21 @@
+/**
+ * @file
+ * Panel styling. Panels are used to visually group items together.
+ */
+
+.panel {
+ background: #fbfbfb;
+ border: 1px solid #ccc;
+ margin: 10px 0;
+ padding: 0 5px 5px;
+}
+.panel__title {
+ margin: 16px 7px;
+}
+.panel__content {
+ padding: 0 4px 2px 8px; /* LTR */
+}
+[dir="rtl"] .panel__content {
+ padding-right: 8px;
+ padding-left: 4px;
+}
diff --git a/core/themes/seven/css/components/admin-panel.css b/core/themes/seven/css/components/panel.css
similarity index 59%
rename from core/themes/seven/css/components/admin-panel.css
rename to core/themes/seven/css/components/panel.css
index ad27d3b07581..108ede6a1dd2 100644
--- a/core/themes/seven/css/components/admin-panel.css
+++ b/core/themes/seven/css/components/panel.css
@@ -1,18 +1,15 @@
/**
- * Admin panel.
+ * @file
+ * Panel styling. Panels are used to visually group items together.
*/
-div.admin-panel,
-div.admin-panel .body {
- padding: 0;
- clear: left;
-}
-div.admin-panel {
+
+.panel {
margin: 0 0 20px;
padding: 9px;
background: #f8f8f8;
border: 1px solid #ccc;
}
-div.admin-panel h3 {
+.panel__title {
font-size: 0.923em;
text-transform: uppercase;
margin: 0;
diff --git a/core/themes/seven/seven.libraries.yml b/core/themes/seven/seven.libraries.yml
index 9d46966cc51d..4533e9361bed 100644
--- a/core/themes/seven/seven.libraries.yml
+++ b/core/themes/seven/seven.libraries.yml
@@ -7,7 +7,6 @@ global-styling:
css/base/print.css: {}
component:
css/components/admin-list.css: {}
- css/components/admin-panel.css: {}
css/components/block-recent-content.css: {}
css/components/content-header.css: {}
css/components/breadcrumb.css: {}
@@ -24,6 +23,7 @@ global-styling:
css/components/node.css: {}
css/components/page-title.css: {}
css/components/pager.css: {}
+ css/components/panel.css: {}
css/components/skip-link.css: {}
css/components/tables.css: {}
css/components/tabs.css: {}
--
GitLab