From 921db1f5fc92800bed424d562c7329f14b79248b Mon Sep 17 00:00:00 2001
From: Alex Pott <alex.a.pott@googlemail.com>
Date: Tue, 9 Jun 2015 12:15:50 +0100
Subject: [PATCH] Issue #2485397 by Manjit.Singh, MathieuSpil, gajendra sharma,
 saki007ster, LewisNyman: Clean up config translation CSS inline with our CSS
 standards

---
 .../css/config_translation.admin.css          | 32 ++++---------------
 ..._translation_manage_form_element.html.twig |  6 ++--
 2 files changed, 9 insertions(+), 29 deletions(-)

diff --git a/core/modules/config_translation/css/config_translation.admin.css b/core/modules/config_translation/css/config_translation.admin.css
index e6e90c34597..8e862fb8813 100644
--- a/core/modules/config_translation/css/config_translation.admin.css
+++ b/core/modules/config_translation/css/config_translation.admin.css
@@ -7,38 +7,18 @@
  * Hide the label, in an accessible way, for responsive screens which show the
  * form in one column.
  */
-.config-translation-form .translation-element-wrapper .translation label {
-  position: absolute !important;
+.translation-set__translated label {
   clip: rect(1px, 1px, 1px, 1px);
-  overflow: hidden;
   height: 1px;
+  overflow: hidden;
+  position: absolute;
   width: 1px;
 }
 
-/**
- * For wider screens, show the label and display source and translation side by
- * side.
- */
-@media all and (min-width: 851px) {
-  .config-translation-form .translation-element-wrapper .source {
-    width: 48%;
-    float: left; /* LTR */
-  }
-  [dir="rtl"] .config-translation-form .translation-element-wrapper .source {
-    float: right;
-  }
-  .config-translation-form .translation-element-wrapper .translation {
-    width: 48%;
-    float: right; /* LTR */
-  }
-  [dir="rtl"] .config-translation-form .translation-element-wrapper .translation {
-    float: left;
-  }
-  .config-translation-form .translation-element-wrapper .translation label {
-    position: static !important;
-    clip: auto;
-    overflow: visible;
+@media screen and (min-width: 38em) {
+  .translation-set__translated label {
     height: auto;
+    position: inherit;
     width: auto;
   }
 }
diff --git a/core/modules/config_translation/templates/config_translation_manage_form_element.html.twig b/core/modules/config_translation/templates/config_translation_manage_form_element.html.twig
index d20d19cbb7f..672f5677f60 100644
--- a/core/modules/config_translation/templates/config_translation_manage_form_element.html.twig
+++ b/core/modules/config_translation/templates/config_translation_manage_form_element.html.twig
@@ -14,11 +14,11 @@
  * @ingroup themeable
  */
 #}
-<div class="clearfix translation-element-wrapper">
-  <div class="source">
+<div class="translation-set clearfix">
+  <div class="layout-column half translation-set__source">
     {{ element.source }}
   </div>
-  <div class="translation">
+  <div class="layout-column half translation-set__translated">
     {{ element.translation }}
   </div>
 </div>