diff --git a/core/modules/block_content/src/Tests/BlockContentListTest.php b/core/modules/block_content/src/Tests/BlockContentListTest.php
index 048fdfb6257700e29daf2692ffd9bc0aee3e83a2..157591a60eac684d6a29cd5ae9fd56adffacf5d3 100644
--- a/core/modules/block_content/src/Tests/BlockContentListTest.php
+++ b/core/modules/block_content/src/Tests/BlockContentListTest.php
@@ -42,11 +42,11 @@ public function testListing() {
$this->assertTitle(t('Custom block library') . ' | Drupal');
// Test for the table.
- $element = $this->xpath('//div[@class="l-content"]//table');
+ $element = $this->xpath('//div[@class="layout-content"]//table');
$this->assertTrue($element, 'Configuration entity list table found.');
// Test the table header.
- $elements = $this->xpath('//div[@class="l-content"]//table/thead/tr/th');
+ $elements = $this->xpath('//div[@class="layout-content"]//table/thead/tr/th');
$this->assertEqual(count($elements), 2, 'Correct number of table header cells found.');
// Test the contents of each th cell.
@@ -72,7 +72,7 @@ public function testListing() {
$this->assertFieldByXpath('//td', $label, 'Label found for added block.');
// Check the number of table row cells.
- $elements = $this->xpath('//div[@class="l-content"]//table/tbody/tr[@class="odd"]/td');
+ $elements = $this->xpath('//div[@class="layout-content"]//table/tbody/tr[@class="odd"]/td');
$this->assertEqual(count($elements), 2, 'Correct number of table row cells found.');
// Check the contents of each row cell. The first cell contains the label,
// the second contains the machine name, and the third contains the
diff --git a/core/modules/config/src/Tests/ConfigEntityListTest.php b/core/modules/config/src/Tests/ConfigEntityListTest.php
index 71b7a4d274102ddde55429dcdbdfd3bf1d033fe5..e55f84ddee25c569b95ed41a915efcc8c6f994b8 100644
--- a/core/modules/config/src/Tests/ConfigEntityListTest.php
+++ b/core/modules/config/src/Tests/ConfigEntityListTest.php
@@ -153,11 +153,11 @@ function testListUI() {
$this->assertTitle('Test configuration | Drupal');
// Test for the table.
- $element = $this->xpath('//div[@class="l-content"]//table');
+ $element = $this->xpath('//div[@class="layout-content"]//table');
$this->assertTrue($element, 'Configuration entity list table found.');
// Test the table header.
- $elements = $this->xpath('//div[@class="l-content"]//table/thead/tr/th');
+ $elements = $this->xpath('//div[@class="layout-content"]//table/thead/tr/th');
$this->assertEqual(count($elements), 3, 'Correct number of table header cells found.');
// Test the contents of each th cell.
@@ -167,7 +167,7 @@ function testListUI() {
}
// Check the number of table row cells.
- $elements = $this->xpath('//div[@class="l-content"]//table/tbody/tr[@class="odd"]/td');
+ $elements = $this->xpath('//div[@class="layout-content"]//table/tbody/tr[@class="odd"]/td');
$this->assertEqual(count($elements), 3, 'Correct number of table row cells found.');
// Check the contents of each row cell. The first cell contains the label,
diff --git a/core/modules/system/templates/install-page.html.twig b/core/modules/system/templates/install-page.html.twig
index ad1c04cdda1470414acdc1e4e91aa567593e65cc..24d17faa865614be145cde859de5b016efda4fcc 100644
--- a/core/modules/system/templates/install-page.html.twig
+++ b/core/modules/system/templates/install-page.html.twig
@@ -11,7 +11,7 @@
* @ingroup themeable
*/
#}
- <div class="l-container">
+ <div class="layout-container">
<header role="banner">
{% if site_name or site_slogan %}
@@ -35,15 +35,15 @@
</main>
{% if page.sidebar_first %}
- <aside class="l-sidebar-first" role="complementary">
+ <aside class="layout-sidebar-first" role="complementary">
{{ page.sidebar_first }}
- </aside>{# /.l-sidebar-first #}
+ </aside>{# /.layout-sidebar-first #}
{% endif %}
{% if page.sidebar_second %}
- <aside class="l-sidebar-second" role="complementary">
+ <aside class="layout-sidebar-second" role="complementary">
{{ page.sidebar_second }}
- </aside>{# /.l-sidebar-second #}
+ </aside>{# /.layout-sidebar-second #}
{% endif %}
{% if page.footer %}
@@ -52,4 +52,4 @@
</footer>
{% endif %}
- </div>{# /.l-container #}
+ </div>{# /.layout-container #}
diff --git a/core/modules/system/templates/maintenance-page.html.twig b/core/modules/system/templates/maintenance-page.html.twig
index 3b5a59ed3372e4bf144ab4fc6896b6e676dffb1a..fd780d457e8db6259929892691675e0c884be805 100644
--- a/core/modules/system/templates/maintenance-page.html.twig
+++ b/core/modules/system/templates/maintenance-page.html.twig
@@ -11,7 +11,7 @@
* @ingroup themeable
*/
#}
-<div class="l-container">
+<div class="layout-container">
<header role="banner">
{% if logo %}
@@ -47,15 +47,15 @@
</main>
{% if page.sidebar_first %}
- <aside class="l-sidebar-first" role="complementary">
+ <aside class="layout-sidebar-first" role="complementary">
{{ page.sidebar_first }}
- </aside>{# /.l-sidebar-first #}
+ </aside>{# /.layout-sidebar-first #}
{% endif %}
{% if page.sidebar_second %}
- <aside class="l-sidebar-second" role="complementary">
+ <aside class="layout-sidebar-second" role="complementary">
{{ page.sidebar_second }}
- </aside>{# /.l-sidebar-second #}
+ </aside>{# /.layout-sidebar-second #}
{% endif %}
{% if page.footer %}
@@ -64,4 +64,4 @@
</footer>
{% endif %}
-</div>{# /.l-container #}
+</div>{# /.layout-container #}
diff --git a/core/modules/system/templates/page.html.twig b/core/modules/system/templates/page.html.twig
index d3739e5694a8d350206d499b72f7fa774f7b007d..d24e33c9b7cdf780fa800b5be0ab045e55cb660d 100644
--- a/core/modules/system/templates/page.html.twig
+++ b/core/modules/system/templates/page.html.twig
@@ -63,7 +63,7 @@
* @ingroup themeable
*/
#}
-<div class="l-container">
+<div class="layout-container">
<header role="banner">
{% if logo %}
@@ -111,7 +111,7 @@
<main role="main">
<a id="main-content"></a>{# link is in html.html.twig #}
- <div class="l-content">
+ <div class="layout-content">
{{ page.highlighted }}
{{ title_prefix }}
@@ -129,16 +129,16 @@
{{ page.content }}
{{ feed_icons }}
- </div>{# /.l-content #}
+ </div>{# /.layout-content #}
{% if page.sidebar_first %}
- <aside class="l-sidebar-first" role="complementary">
+ <aside class="layout-sidebar-first" role="complementary">
{{ page.sidebar_first }}
</aside>
{% endif %}
{% if page.sidebar_second %}
- <aside class="l-sidebar-second" role="complementary">
+ <aside class="layout-sidebar-second" role="complementary">
{{ page.sidebar_second }}
</aside>
{% endif %}
@@ -151,4 +151,4 @@
</footer>
{% endif %}
-</div>{# /.l-container #}
+</div>{# /.layout-container #}
diff --git a/core/themes/bartik/bartik.theme b/core/themes/bartik/bartik.theme
index 5ccf24cfbb120a4bf575f88c37cb58b88229050d..db70a55b715d934c381d7d7cff9c64d3a32489c2 100644
--- a/core/themes/bartik/bartik.theme
+++ b/core/themes/bartik/bartik.theme
@@ -22,18 +22,18 @@ function bartik_preprocess_page(&$variables) {
$attributes = $page_object->getBodyAttributes();
$classes = $attributes['class'];
if (!empty($variables['page']['sidebar_first']) && !empty($variables['page']['sidebar_second'])) {
- $classes[] = 'two-sidebars';
+ $classes[] = 'layout-two-sidebars';
}
elseif (!empty($variables['page']['sidebar_first'])) {
- $classes[] = 'one-sidebar';
- $classes[] = 'sidebar-first';
+ $classes[] = 'layout-one-sidebar';
+ $classes[] = 'layout-sidebar-first';
}
elseif (!empty($variables['page']['sidebar_second'])) {
- $classes[] = 'one-sidebar';
- $classes[] = 'sidebar-second';
+ $classes[] = 'layout-one-sidebar';
+ $classes[] = 'layout-sidebar-second';
}
else {
- $classes[] = 'no-sidebars';
+ $classes[] = 'layout-no-sidebars';
}
if (!empty($variables['page']['featured'])) {
diff --git a/core/themes/bartik/css/layout.css b/core/themes/bartik/css/layout.css
index 74f015bb46a1a945ddefa25a0320f121c0deb819..1fadfc24ad2b8903b675977abe2ffe18d6293bb9 100644
--- a/core/themes/bartik/css/layout.css
+++ b/core/themes/bartik/css/layout.css
@@ -188,30 +188,30 @@ body,
[dir="rtl"] .region-footer-fourthcolumn {
float: right;
}
- .two-sidebars #content {
+ .layout-two-sidebars #content {
margin-left: 25%;
margin-right: 25%;
width: 50%;
}
- .one-sidebar #content {
+ .layout-one-sidebar #content {
width: 75%;
}
- .no-sidebars #content {
+ .layout-no-sidebars #content {
width: 100%;
}
- .sidebar-first #content {
+ .layout-sidebar-first #content {
margin-left: 25%; /* LTR */
margin-right: 0; /* LTR */
}
- [dir="rtl"] .sidebar-first #content {
+ [dir="rtl"] .layout-sidebar-first #content {
margin-left: 0;
margin-right: 25%;
}
- .sidebar-second #content {
+ .layout-sidebar-second #content {
margin-right: 25%; /* LTR */
margin-left: 0; /* LTR */
}
- [dir="rtl"] .sidebar-second #content {
+ [dir="rtl"] .layout-sidebar-second #content {
margin-right: 0;
margin-left: 25%;
}
diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css
index 66406aab990f114f6db727dfba81bf2900de71bf..119ef7856009809e813ebf3d8c47d35edf9bd7be 100644
--- a/core/themes/bartik/css/style.css
+++ b/core/themes/bartik/css/style.css
@@ -1564,13 +1564,13 @@ ul.vertical-tabs-list {
.comment-form input.form-file {
width: auto;
}
-.no-sidebars .comment-form .form-text {
+.layout-no-sidebars .comment-form .form-text {
width: 800px;
}
-.one-sidebar .comment-form .form-text {
+.layout-one-sidebar .comment-form .form-text {
width: 500px;
}
-.two-sidebars .comment-form .form-text {
+.layout-two-sidebars .comment-form .form-text {
width: 320px;
}
.comment-form .form-item .description {
diff --git a/core/themes/seven/maintenance-page.css b/core/themes/seven/maintenance-page.css
index bc56fa065b57e6077a25b98eef785b66b60762df..fb1e3a0dd9a8fbfab837aa0f4fd067fcf2768ce3 100644
--- a/core/themes/seven/maintenance-page.css
+++ b/core/themes/seven/maintenance-page.css
@@ -102,19 +102,19 @@
/**
* Layout
*/
-.l-container {
+.layout-container {
background: #fff;
width: auto;
margin-left: 1.25em;
margin-right: 1.25em;
}
-.l-container:after { /* no reason for a clearfix in the markup */
+.layout-container:after { /* no reason for a clearfix in the markup */
content: "";
display: table;
clear: both;
}
@media all and (max-width: 48em) { /* 768px */
- .l-container {
+ .layout-container {
margin: 1.25em;
padding: 10px 20px;
}
@@ -138,7 +138,7 @@
width: 100%;
height: 100%;
}
- .l-container {
+ .layout-container {
margin: 0 auto;
max-width: 770px;
width: 75%;
@@ -165,11 +165,11 @@
padding: 15px;
margin: 0.25em 0;
}
- .l-sidebar-first {
+ .layout-sidebar-first {
float: left;
width: 35%;
}
- [dir="rtl"] .l-sidebar-first {
+ [dir="rtl"] .layout-sidebar-first {
float: right;
}
diff --git a/core/themes/seven/seven.theme b/core/themes/seven/seven.theme
index 292360599ac093c12b3df1e16f5c8074ead1ee39..b04d2d5a0b8bc35d671ede3fe7ea1ffe98c827de 100644
--- a/core/themes/seven/seven.theme
+++ b/core/themes/seven/seven.theme
@@ -20,11 +20,11 @@ function seven_preprocess_page(&$variables) {
// Add information about the number of sidebars.
if (!empty($variables['page']['sidebar_first'])) {
- $classes[] = 'one-sidebar';
- $classes[] = 'sidebar-first';
+ $classes[] = 'layout-one-sidebar';
+ $classes[] = 'layout-sidebar-first';
}
else {
- $classes[] = 'no-sidebars';
+ $classes[] = 'layout-no-sidebars';
}
$attributes['class'] = $classes;
diff --git a/core/themes/seven/templates/install-page.html.twig b/core/themes/seven/templates/install-page.html.twig
index f86486edd05741ef544e89fec0e0b1dd9c182237..98b3f8a4952a4600f192cace6adcbdbe6860d48f 100644
--- a/core/themes/seven/templates/install-page.html.twig
+++ b/core/themes/seven/templates/install-page.html.twig
@@ -9,7 +9,7 @@
* @see template_preprocess_install_page()
*/
#}
-<div class="l-container">
+<div class="layout-container">
<header role="banner">
{% if site_name or site_slogan %}
@@ -25,9 +25,9 @@
</header>
{% if page.sidebar_first %}
- <aside class="l-sidebar-first" role="complementary">
+ <aside class="layout-sidebar-first" role="complementary">
{{ page.sidebar_first }}
- </aside>{# /.l-sidebar-first #}
+ </aside>{# /.layout-sidebar-first #}
{% endif %}
<main role="main">
@@ -39,9 +39,9 @@
</main>
{% if page.sidebar_second %}
- <aside class="l-sidebar-second" role="complementary">
+ <aside class="layout-sidebar-second" role="complementary">
{{ page.sidebar_second }}
- </aside>{# /.l-sidebar-second #}
+ </aside>{# /.layout-sidebar-second #}
{% endif %}
{% if page.page_bottom %}
@@ -50,4 +50,4 @@
</footer>
{% endif %}
-</div>{# /.l-container #}
+</div>{# /.layout-container #}
diff --git a/core/themes/seven/templates/maintenance-page.html.twig b/core/themes/seven/templates/maintenance-page.html.twig
index 9097297476a2cc79db5b7235c9debda5963a37f8..01bc89bb6234835ffa49b0a2177cc9c3ca725579 100644
--- a/core/themes/seven/templates/maintenance-page.html.twig
+++ b/core/themes/seven/templates/maintenance-page.html.twig
@@ -9,7 +9,7 @@
* @see template_preprocess_maintenance_page()
*/
#}
-<div class="l-container">
+<div class="layout-container">
<header role="banner">
{% if site_name or site_slogan %}
@@ -25,9 +25,9 @@
</header>
{% if page.sidebar_first %}
- <aside class="l-sidebar-first" role="complementary">
+ <aside class="layout-sidebar-first" role="complementary">
{{ page.sidebar_first }}
- </aside>{# /.l-sidebar-first #}
+ </aside>{# /.layout-sidebar-first #}
{% endif %}
<main role="main">
@@ -44,4 +44,4 @@
</footer>
{% endif %}
-</div>{# /.l-container #}
+</div>{# /.layout-container #}
diff --git a/core/themes/stark/css/layout.css b/core/themes/stark/css/layout.css
index b91e9531cb59a25353f6253e8310c6f480f3a022..123de171188fe35783aab76daea8de1923085e40 100644
--- a/core/themes/stark/css/layout.css
+++ b/core/themes/stark/css/layout.css
@@ -9,7 +9,7 @@
* This layout method works reasonably well, but shouldn't be used on a
* production site because it can break. For example, if an over-large image
* (one that is wider than 20% of the viewport) is in the left sidebar, the
- * image will overlap with the .l-content to the right.
+ * image will overlap with the .layout-content to the right.
*/
img {
height: auto;
@@ -21,80 +21,80 @@ main:after {
clear: both;
}
-.l-content,
-.l-sidebar-first,
-.l-sidebar-second {
+.layout-content,
+.layout-sidebar-first,
+.layout-sidebar-second {
display: inline;
position: relative;
}
@media all and (min-width: 480px) and (max-width: 959px) {
- .l-content {
+ .layout-content {
width: 67%;
float: right; /* LTR */
}
- [dir="rtl"] .l-content {
+ [dir="rtl"] .layout-content {
float: left;
}
- .l-sidebar-first {
+ .layout-sidebar-first {
width: 33%;
float: left; /* LTR */
}
- [dir="rtl"] .l-sidebar-first {
+ [dir="rtl"] .layout-sidebar-first {
float: right;
}
- .l-sidebar-second {
+ .layout-sidebar-second {
float: right; /* LTR */
clear: both;
width: 100%;
}
- [dir="rtl"] .l-sidebar-second {
+ [dir="rtl"] .layout-sidebar-second {
float: right;
clear: right;
}
- .l-sidebar-second .block {
+ .layout-sidebar-second .block {
float: left; /* LTR */
width: 33%;
}
- [dir="rtl"] .l-sidebar-second .block {
+ [dir="rtl"] .layout-sidebar-second .block {
float: right;
}
- .l-sidebar-second .block:nth-child(3n+1) {
+ .layout-sidebar-second .block:nth-child(3n+1) {
clear: both;
}
}
@media all and (min-width: 960px) {
- .l-content {
+ .layout-content {
width: 60%;
float: left; /* LTR */
left: 20%; /* LTR */
}
- [dir="rtl"] .l-content {
+ [dir="rtl"] .layout-content {
float: right;
left: 0;
right: 20%;
}
- .l-sidebar-first {
+ .layout-sidebar-first {
width: 20%;
float: left; /* LTR */
left: -60%; /* LTR */
}
- [dir="rtl"] .l-sidebar-first {
+ [dir="rtl"] .layout-sidebar-first {
float: right;
left: 0;
right: -60%;
}
- .l-sidebar-second {
+ .layout-sidebar-second {
float: right; /* LTR */
width: 20%;
}
- [dir="rtl"] .l-sidebar-second {
+ [dir="rtl"] .layout-sidebar-second {
float: left;
}
}