Update update.admin.css inline with our CSS standards

From the CSSLint node report of Drupal 8:

update.css
1: warning at line 33, col 9
Element (tr.even) is overqualified, just use .even without element name.
.update tr.even,

update.css
2: warning at line 34, col 9
Element (tr.odd) is overqualified, just use .odd without element name.
.update tr.odd {

update.css
3: warning at line 51, col 9
Element (tr.ok) is overqualified, just use .ok without element name.
.update tr.ok {

update.css
4: warning at line 68, col 9
Element (tr.unknown) is overqualified, just use .unknown without element name.
.update tr.unknown {

update.css
5: warning at line 93, col 3
Using width with padding-left can sometimes make elements larger than you expect.
padding-left: 1em; /* LTR */

update.css
6: warning at line 106, col 9
Element (table.version-security) is overqualified, just use .version-security without element name.
.update table.version-security .version-title {

update.css
7: warning at line 110, col 9
Element (table.version-recommended-strong) is overqualified, just use .version-recommended-strong without element name.
.update table.version-recommended-strong .version-title {

update.css
8: warning at line 127, col 13
Element (tr.update-security) is overqualified, just use .update-security without element name.
table tbody tr.update-security,

update.css
9: warning at line 128, col 13
Element (tr.update-unsupported) is overqualified, just use .update-unsupported without element name.
table tbody tr.update-unsupported {

update.css
10: warning at line 132, col 1
Element (th.update-project-name) is overqualified, just use .update-project-name without element name.
th.update-project-name {

Only one warning left: Beware of broken box size Using width with padding-left can sometimes make elements larger than you expect.

padding-left: 1em; /* LTR */

But we need it for LTR so it's ok to leave it as is imho.

That means this syntax has RTL style. so you have to hack both stylesheets :)

I have n't see any update.css in the module/update/css/ but instead of that i found the update.admin.css in which all the theme changes has been done so it is fixed now so that why i just closed this one.

Update.admin.css needs improving still.

Re-rolled and fixed all CSSLint errors.

needs before after screenshots. particularly, would be useful to show that by removing the tr from tr.even / tr.odd, no knock-on effect will override the background color/border etc, by having those "tr"s still referenced elsewhere.

1. +++ b/core/modules/update/css/update.admin.css
   @@ -47,8 +47,8 @@
   -.update tr.even,
   -.update tr.odd {
   +.update .even,
   +.update .odd {
      border: none;
    }
   

   I looked into this CSS, and it doesn't do anything. There is no border set for it to unset. We can remove it completely.

2. +++ b/core/modules/update/css/update.admin.css
   @@ -65,7 +65,7 @@
   -.update tr.ok {
   +.update .ok {
   
   @@ -82,23 +82,23 @@
   -.update tr.unknown {
   +.update .unknown {
   ...
   +.update,
   +.update .version {
   

   These class names are really generic and not inline with our CSS standards. There is also a lot of redundant CSS here in this file. Do we really want to only fix the CSS lint errors here? I'm not sure if it makes sense to have two cleanup issues with #2408499: Rewrite update components inline with our CSS standards also fixing the same problems.

@LewisNyman #2408499: Rewrite update components inline with our CSS standards has the same goal, but it has no patches attached. Let's close it in favor of this issue and broaden the scope of this issue to also clean up the selectors.

Ok, closing #2408499: Rewrite update components inline with our CSS standards, See DickJohnson's recommendations here: https://www.drupal.org/node/2408499#comment-9585565

Had worked on a patch for unused css and linting. Will take a look at recommendations now

I would love to review this, but can somebody point me to a quick way in d8 to find modules for all the instances - cause it needs screeenshots just so were sure its not gonna create trouble later on.

A quiction should the file be update.admin.theme.css or do i put to much into the theme part ?
the file is pure colors ?

There was unused css in the file as mentioned by Lewis #12. Little alignment fixed in user interface. Attaching shots.

Also i think this make sense -> update.admin.theme.css. And file is all about the interface in screenshots.

@aliyakhan yup lets go with that, gonna make it easy for the themer then to see whats actually goes on when looking at all the css
uploaded new patch with interdiff

Hey @mortendk, style filename name needs to be modified -> update.admin.theme.css
Is missing now.

@aliyakhan aaaah ups wrong patch uploaded lets try this again ;)

Perfect @mortendk. Attached shots

Looking good, we still haven't rewritten the classes to match our standards, see the examples here: https://www.drupal.org/node/1887918#sub-components

Also see DickJohnson's suggestion from #2408499: Rewrite update components inline with our CSS standards:

<table class="{{ attributes.class }} update-version"{{ attributes|without('class') }}>
  <tr>
    <td class="update__version-title">{{ title }}</td>
    <td class="update__version-details">
      <a href="{{ version.release_link }}">{{ version.version }}</a>
      <span class="update__version-date">({{ version.date|date('Y-M-d') }})</span>
    </td>
    <td class="update__version-links">
      <ul class="foo">
        <li class="update__version-links__download">
          <a href="{{ version.download_link }}">{{ 'Download'|t }}</a>
        </li>
        <li class="update__version-links__release-notes">
          <a href="{{ version.release_link }}">{{ 'Release notes'|t }}</a>
        </li>
      </ul>
    </td>
  </tr>
</table>

I think these still need some feedback and improvements

update__version-links__release-notes

I don't think it's best to include two double underscores in a selector, why not just update__release-notes

IMO the word update as the container component doesn't make sense, it's just the name of the module, I think maybe .project-update would be a better name? That could replace the .update .project selector. I don't think we need a wrapper class for the listing.

@levis So would there be an idea in using the word "drupal" as a prefix here for the container, im thinking something in the lines of .drupal-project-update or something like that, even that the name is way to long.

One of the things that i hope we will achive in D8 is a themer would be able to navigate the css only on the classes? - maybe project-update is more than enough, just thinking in the big scheme of things, that would set a policy that we added drupal to a lot of "machine" things in Drupal though + would require an update to the css docs.

... i probably set a new record in scrope creep here ;)

I think classes like this would make sense:

project-updates__title
project-updates__details
project-updates__version-link
project-updates__version-date
project-updates__operations
project-updates__release-notes-link
project-updates__download-link

The "drupal-" prefix seems out of scope for cleanup of just this issue.

@jwilson3 Your class suggestions look good, I've added them to the issue summary.

@mortendk Take that nonsense into a policy issue ;-)

OK so I gave a go implementing @jwilson3's suggestions. I ended up changing a lot, because there was a lot wrong with our current implementation. There were some classes I could replace with reuseable color/layout classes, we were also using tables for layout, so I removed them.

The design has been tweaked a little to be more consistent, and quite a few classes have been removed that weren't being used, so this will need a lot of regression testing.

Here is a screenshot:

Workin on it.

I rerolled the patch to apply it and I fixed the tests.

I applied the patch with no problems. I manually tested the patch and I couldn't fine any problems

Looks good to me!

Committed and pushed to 8.0.x. Thanks!