summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAlex Pott2015-06-09 11:15:50 (GMT)
committerAlex Pott2015-06-09 11:15:50 (GMT)
commit921db1f5fc92800bed424d562c7329f14b79248b (patch)
tree8e5ff9c41d7f357189876e4f8dbf5b7e31a4f0c6
parent5680ad0d70066472e74eca534e8afa14231a5098 (diff)
Issue #2485397 by Manjit.Singh, MathieuSpil, gajendra sharma, saki007ster, LewisNyman: Clean up config translation CSS inline with our CSS standards
-rw-r--r--core/modules/config_translation/css/config_translation.admin.css32
-rw-r--r--core/modules/config_translation/templates/config_translation_manage_form_element.html.twig6
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 e6e90c3..8e862fb 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 d20d19c..672f567 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>