Commit 7f555205 authored by webchick's avatar webchick

Issue #2017257 by jason.bell, dead_arm, alexrayu, philipz, idebr, rteijeiro,...

Issue #2017257 by jason.bell, dead_arm, alexrayu, philipz, idebr, rteijeiro, emma.maria, frankbaele, LewisNyman: Create generic layout classes.
parent c1ed4d67
......@@ -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 */
......
......@@ -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 %}
......
......@@ -173,6 +173,7 @@ public function testRebuildThemeData() {
'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',
......
.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%;
}
}
......@@ -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
......
......@@ -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;
}
......
......@@ -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>
......
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