Issue #2471739 by RajeevK, martins.kajins, LewisNyman, jaxxed: Convert...

Issue #2471739 by RajeevK, martins.kajins, LewisNyman, jaxxed: Convert reusable layout classes to BEM standards

core/modules/config_translation/templates/config_translation_manage_form_element.html.twig

@@ -15,10 +15,10 @@
  */
 #}
 <div class="translation-set clearfix">
-  <div class="layout-column half translation-set__source">
+  <div class="layout-column layout-column--half translation-set__source">
     {{ element.source }}
   </div>
-  <div class="layout-column half translation-set__translated">
+  <div class="layout-column layout-column--half translation-set__translated">
     {{ element.translation }}
   </div>
 </div>

core/modules/help/src/Controller/HelpController.php

@@ -77,7 +77,7 @@ protected function helpLinksAsList() {
     $column = array(
       '#type' => 'container',
       'links' => array('#theme' => 'item_list'),
-      '#attributes' => array('class' => array('layout-column', 'quarter')),
+      '#attributes' => array('class' => array('layout-column', 'layout-column--quarter')),
     );
     $output = array(
       '#prefix' => '<div class="clearfix">',

core/modules/system/css/system.admin.css

@@ -33,13 +33,13 @@
     padding-right: 10px;
     padding-left: 0;
   }
-  .layout-column.half {
+  .layout-column--half {
     width: 50%;
   }
-  .layout-column.quarter {
+  .layout-column--quarter {
     width: 25%;
   }
-  .layout-column.three-quarter {
+  .layout-column--three-quarter {
     width: 75%;
   }
 }

core/modules/system/templates/admin-page.html.twig

@@ -17,7 +17,7 @@
 <div class="clearfix">
   {{ system_compact_link }}
   {% for container in containers %}
-    <div class="layout-column half">
+    <div class="layout-column--half">
       {% for block in container.blocks %}
         {{ block }}
       {% endfor %}

core/modules/update/templates/update-version.html.twig

@@ -19,12 +19,12 @@
 #}
 <div class="{{ attributes.class }} project-update__version"{{ attributes|without('class') }}>
   <div class="clearfix">
-    <div class="project-update__version-title layout-column quarter">{{ title }}</div>
-    <div class="project-update__version-details layout-column quarter">
+    <div class="project-update__version-title layout-column layout-column--quarter">{{ title }}</div>
+    <div class="project-update__version-details layout-column layout-column--quarter">
       <a href="{{ version.release_link }}">{{ version.version }}</a>
       <span class="project-update__version-date">({{ version.date|date('Y-M-d') }})</span>
     </div>
-    <div class="layout-column half">
+    <div class="layout-column layout-column--half">
       <ul class="project-update__version-links">
         <li class="project-update__download-link">
           <a href="{{ version.download_link }}">{{ 'Download'|t }}</a>