Commit 921db1f5 authored by alexpott's avatar alexpott

Issue #2485397 by Manjit.Singh, MathieuSpil, gajendra sharma, saki007ster,...

Issue #2485397 by Manjit.Singh, MathieuSpil, gajendra sharma, saki007ster, LewisNyman: Clean up config translation CSS inline with our CSS standards
parent 5680ad0d
......@@ -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;
}
}
......@@ -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>
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