Clean up config translation CSS inline with our CSS standards

For reviewing purposes: You have to enable the core-language modules, add a language, and then go to admin/config/regional/config-translation where you should scroll until you find a translate-button, then click 'add' next to the language you added, it is the following page where the css is being used....

Done so far:
- Removed the use of the !important declaration without breaking anything. => fixes the only CSSlint-errors.
- Removed the layout styling and replaced it with the layout-classes.

The only styling left in the css file is to hide the double label on the right side on mobile screens. when the left side and the right side are beneath each other.
For me the label can always be visually hidden (on small and on large screens.) => This way the css file can be deleted entirely. and there should be visually-hidden-class on the label to the right.

But feedback on any of these points is highly appreciated as always!

Simplyfied the selector .config-translation-form .translation-set label to .translation-set label and set the max-width media query removing the reseting media query.

This patch is now hiding both labels at widths of less than 850px breaking the form. The point is to hide the second label when the display is only in one column.

@lewis I think this patch might be solved what alex has mentioned in #8. Please verify

Thanks , this looks good to me :)

+++ b/core/modules/config_translation/css/config_translation.admin.css
@@ -7,38 +7,12 @@
+@media screen and (max-width: 38em) {

So the half layout column is defined in the media query

@media screen and (min-width: 38em) {

Does this mean at exactly 38em there will be two columns only one will have the labels? Yep manual testing reveals that it is possible.

Yup @lewis I think Alex is talking about this issue ;)

adding patch of media query based on px :)

screenshots After applying #15 patch

@lewis Please verify.

Needs review for testing the latest patch

Uploading an interdiff for clarity's sake.

I am not agreeing on the latest change of patch #15.

We shouldn't be using a different breakpoint for only this page.
Instead we should be using min-widths inside the media query in combination with the visually-hidden-class

Looking into this.

Sure @MathieuSpil, Actually i was bit confuse while using this media query.

Ok so after some thought, I was looking into applying the visually-hidden class on the second label. On devices wider than 38em we could then overwrite the visually-hidden-css so the label would then be visible again.

But when we consider the following:
- There are no classes that reset the visually-hidden class only on certain breakpoints in core (? I think ?)
- The second label is only for screenreaders and is only needed for when the columns are next to eachother.

So now we apply the visually-hidden-styling on the element (without using the class)
and starting from a min-width of 38em (as when the 2 column-layout kicks in) we can now easily reset the visually-hidden styling with the following:

@media screen and (min-width: 38em) {
  .translation-set__translated label {
    position: initial;
    width: auto;
    height: auto;
  }
}

This patch is based upon #10. because #15 was going in the wrong direction I think.

Not sure why the test is failing, so rerolling

Changes as suggested in #23 by Lewis.

changes as suggested by lewis are done, so Setting it to RTBC :)

1. +++ b/core/modules/config_translation/css/config_translation.admin.css
   @@ -7,38 +7,18 @@
   +  position: absolute;
   

   CSS standard for adding attributes needs to be added.

2. +++ b/core/modules/config_translation/css/config_translation.admin.css
   @@ -7,38 +7,18 @@
   +    height: auto;
   

   CSS standard for adding attributes needs to be added.

Overall, patch looks good to me but there are minor issues which Needs works.

changes and ordering for CSS standards

Now it looks good.
Moving again this to RTBC

Committed 921db1f and pushed to 8.0.x. Thanks!

CSS is not frozen during beta.