Issue #2485397 by Manjit.Singh, MathieuSpil, gajendra sharma, saki007ster, LewisNyman: Clean up config translation CSS inline with our CSS standards

8.0.x
Alex Pott 2015-06-09 12:15:50 +01:00
parent 5680ad0d70
commit 921db1f5fc
2 changed files with 9 additions and 29 deletions

View File

@ -7,38 +7,18 @@
* Hide the label, in an accessible way, for responsive screens which show the * Hide the label, in an accessible way, for responsive screens which show the
* form in one column. * form in one column.
*/ */
.config-translation-form .translation-element-wrapper .translation label { .translation-set__translated label {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px); clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
height: 1px; height: 1px;
overflow: hidden;
position: absolute;
width: 1px; width: 1px;
} }
/** @media screen and (min-width: 38em) {
* For wider screens, show the label and display source and translation side by .translation-set__translated label {
* 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;
height: auto; height: auto;
position: inherit;
width: auto; width: auto;
} }
} }

View File

@ -14,11 +14,11 @@
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
<div class="clearfix translation-element-wrapper"> <div class="translation-set clearfix">
<div class="source"> <div class="layout-column half translation-set__source">
{{ element.source }} {{ element.source }}
</div> </div>
<div class="translation"> <div class="layout-column half translation-set__translated">
{{ element.translation }} {{ element.translation }}
</div> </div>
</div> </div>