summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorwebchick2014-07-02 11:39:57 -0700
committerwebchick2014-07-02 11:39:57 -0700
commit7f5552052c6ae9101546ce7d3b6ec5faeb1744be (patch)
treeee57b954247ec124a814488fb995f8e5cfee2f0e
parentc1ed4d671c2ce9f2b1a12d69cc05d277061d663a (diff)
Issue #2017257 by jason.bell, dead_arm, alexrayu, philipz, idebr, rteijeiro, emma.maria, frankbaele, LewisNyman: Create generic layout classes.
-rw-r--r--core/modules/system/css/system.admin.css20
-rw-r--r--core/modules/system/templates/admin-page.html.twig4
-rw-r--r--core/tests/Drupal/Tests/Core/Extension/ThemeHandlerTest.php1
-rw-r--r--core/themes/seven/css/layout.css35
-rw-r--r--core/themes/seven/seven.info.yml1
-rw-r--r--core/themes/seven/style.css17
-rw-r--r--core/themes/seven/templates/page.html.twig6
7 files changed, 44 insertions, 40 deletions
diff --git a/core/modules/system/css/system.admin.css b/core/modules/system/css/system.admin.css
index 6fb6273..74b4733 100644
--- a/core/modules/system/css/system.admin.css
+++ b/core/modules/system/css/system.admin.css
@@ -14,26 +14,6 @@ div.admin-panel .description {
margin: 0 0 3px;
padding: 2px 0 3px 0;
}
-
-div.admin {
- padding-top: 15px;
-}
-@media screen and (min-width: 40em) {
- div.admin .left {
- float: left; /* LTR */
- width: 47%;
- }
- [dir="rtl"] div.admin .left {
- float: right;
- }
- div.admin .right {
- float: right; /* LTR */
- width: 47%;
- }
- [dir="rtl"] div.admin .right {
- float: left;
- }
-}
div.admin .expert-link {
text-align: right; /* LTR */
margin-right: 1em; /* LTR */
diff --git a/core/modules/system/templates/admin-page.html.twig b/core/modules/system/templates/admin-page.html.twig
index 73cae67..989ba57 100644
--- a/core/modules/system/templates/admin-page.html.twig
+++ b/core/modules/system/templates/admin-page.html.twig
@@ -16,8 +16,8 @@
#}
<div class="admin clearfix">
{{ system_compact_link }}
- {% for position, container in containers %}
- <div class="{{ position }} clearfix">
+ {% for container in containers %}
+ <div class="layout-column half clearfix">
{% for block in container.blocks %}
{{ block }}
{% endfor %}
diff --git a/core/tests/Drupal/Tests/Core/Extension/ThemeHandlerTest.php b/core/tests/Drupal/Tests/Core/Extension/ThemeHandlerTest.php
index 077150b..2645bf1 100644
--- a/core/tests/Drupal/Tests/Core/Extension/ThemeHandlerTest.php
+++ b/core/tests/Drupal/Tests/Core/Extension/ThemeHandlerTest.php
@@ -173,6 +173,7 @@ class ThemeHandlerTest extends UnitTestCase {
'screen' => array(
'seven.base.css' => DRUPAL_ROOT . '/core/themes/seven/seven.base.css',
'style.css' => DRUPAL_ROOT . '/core/themes/seven/style.css',
+ 'css/layout.css' => DRUPAL_ROOT . '/core/themes/seven/css/layout.css',
'css/components/buttons.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/buttons.css',
'css/components/buttons.theme.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/buttons.theme.css',
'css/components/dropbutton.component.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/dropbutton.component.css',
diff --git a/core/themes/seven/css/layout.css b/core/themes/seven/css/layout.css
new file mode 100644
index 0000000..80bb361
--- /dev/null
+++ b/core/themes/seven/css/layout.css
@@ -0,0 +1,35 @@
+.layout-container {
+ margin: 0 1.5em;
+}
+.layout-container:after {
+ content: "";
+ display: table;
+ clear: both;
+}
+
+@media screen and (min-width: 38em) {
+ .layout-container {
+ margin: 0 2.5em;
+ }
+ .layout-column {
+ float: left; /* LTR */
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ }
+ [dir="rtl"] .layout-column {
+ float: right;
+ }
+ .layout-column + .layout-column {
+ padding-left: 10px;
+ }
+ .layout-column.half {
+ width: 50%;
+ }
+ .layout-column.quarter {
+ width: 25%;
+ }
+ .layout-column.three-quarter {
+ width: 75%;
+ }
+}
diff --git a/core/themes/seven/seven.info.yml b/core/themes/seven/seven.info.yml
index b0c4217..033edf1 100644
--- a/core/themes/seven/seven.info.yml
+++ b/core/themes/seven/seven.info.yml
@@ -10,6 +10,7 @@ stylesheets:
screen:
- seven.base.css
- style.css
+ - css/layout.css
- css/components/buttons.css
- css/components/buttons.theme.css
- css/components/dropbutton.component.css
diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css
index efdee27..e5b70ca 100644
--- a/core/themes/seven/style.css
+++ b/core/themes/seven/style.css
@@ -79,19 +79,6 @@ ul.menu li.expanded {
background-color: #e0e0d8;
padding: 24px 0 0;
}
-/* This layout styling is a copy of #page.
- * @TODO: Replace with reuseable layout classes.
- **/
-.branding__inner {
- margin-left: 1.25em;
- margin-right: 1.25em;
-}
-@media screen and (min-width:45em) { /* 720px */
- .branding__inner {
- margin-left: 2.5em;
- margin-right: 2.5em;
- }
-}
[dir="rtl"] #branding {
padding: 20px 20px 0 20px;
}
@@ -164,8 +151,8 @@ ul.menu li.expanded {
}
/* Span the full width of the viewport */
-.branding__inner .is-horizontal .tabs:before,
-.branding__inner .is-collapse-enabled .tabs:before {
+#branding .is-horizontal .tabs:before,
+#branding .is-collapse-enabled .tabs:before {
left: -2.5em;
right: -2.5em;
}
diff --git a/core/themes/seven/templates/page.html.twig b/core/themes/seven/templates/page.html.twig
index bbc804f..3db4f44 100644
--- a/core/themes/seven/templates/page.html.twig
+++ b/core/themes/seven/templates/page.html.twig
@@ -64,7 +64,7 @@
*/
#}
<header id="branding" class="clearfix">
- <div class="branding__inner">
+ <div class="layout-container">
{{ title_prefix }}
{% if title %}
<h1 class="page-title">{{ title }}</h1>
@@ -76,7 +76,7 @@
</div>
</header>
- <div id="page">
+ <div id="page" class="layout-container">
{% if secondary_local_tasks %}
<div class="tabs-secondary clearfix" role="navigation">{{ secondary_local_tasks }}</div>
{% endif %}
@@ -101,7 +101,7 @@
{{ page.content }}
</main>
- <footer id="footer" role="contentinfo">
+ <footer id="footer" role="contentinfo" class="layout-column">
{{ feed_icons }}
</footer>