Commit c0161655 authored by alexpott's avatar alexpott

Issue #2399939 by DickJohnson, LewisNyman, mherchel, idebr, brahmjeet789:...

Issue #2399939 by DickJohnson, LewisNyman, mherchel, idebr, brahmjeet789: Refactor 'admin-panel' CSS component
parent 9e13c549
......@@ -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;
}
......
......@@ -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>
......
......@@ -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>
......@@ -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: {}
......
......@@ -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;
}
/**
* @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;
}
/**
* @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;
}
/**
* 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;
......
......@@ -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: {}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment