Clean up system.module.css

I've removed some input related useless class
I've switched from id autoremove to class autoremove and modified related files ( autocomplete.js ).
This file needs more work!

I'm not sure we should just blindly throw away the id in favour of a class because of csslint, at least in this case. Selecting an ID with jQuery is way faster than a class.

+1 #2.
also all of these will be removed. #675446: Use jQuery UI Autocomplete

You're right, it's more fast than using class.
BUT
I think that if you are develop a tool you could use class instead of Id ... why?
- Id must be unique, it's difficult to use an id that doesn't create conflicts.
- class is more flexible than id
- avoiding id is more easy to use from a site developer: add an id on a tag and customize it by css, that use a more classes because he can't modify a previous id
- class is correct abstraction to underline a feature or a behavior
- Using id doesn't allow to use it on more than one element.

All my previous observations are acceptable only considering frameworks/tools ...

Of course, this is my opinion ...

I've also replaced the id with class in the css, but i added the class to the js and did not delete the id.
Also cleaned some styles, the html5 elements discription moved to top page (it shouldn't be at the bottom)
All the css is sorted with CSS Comb, and i went through the Lint and fixed thous issues, which didn't cause any styling break.

A little bit more clean up. Didn't add them in previous comment.

+++ b/core/modules/system/system.base.cssundefined
@@ -4,33 +4,55 @@
+  list-style: none;
+  list-style-image: none;

either one seems like redundant rule.

+++ b/core/modules/system/system.base.cssundefined
@@ -84,41 +106,42 @@ body.drag {
+.tree-child-horizontal {
+  background: url('../../misc/tree.png') no-repeat 11px center; /* LTR */
...
+.tree-child-horizontal {
+  background-position: -11px center;

2 same selector, but ONE has LTR, another hasn't.

+++ b/core/misc/autocomplete.jsundefined
@@ -196,7 +196,7 @@ Drupal.jsAC.prototype.populatePopup = function () {
-  this.popup = $('<div id="autocomplete"></div>')[0];
+  this.popup = $('<div class="autocomplete" id="autocomplete"></div>')[0];

Also,

about the autocomplete, it always has ONE div and should be only ONE. theoretically and ideally it should be #id

@droplet,
- list-style-image:none was there before, and as I know it's a fix for IE8 which doesn't like just list-style: none;
- autocomplete changed back to ID;
- LTR added

Thank you for testing!

#10: 1663170-base_css_partial_cleanup_related_input_and_autocomplete_id6-3.patch queued for re-testing.

This has probably been superseded by #1921610: [Meta] Architect our CSS.

Working on this :)

Fixed a few CSSLint errors. Still some background errors remaining but not sure how to fix them. Any ideas?

The documentation for the multiple background image rule is here: https://github.com/CSSLint/csslint/wiki/Disallow-duplicate-background-im...

I manage to remove all the errors apart from the throbber image being used multiple times. I don't think we want to follow the rule in this situation as it's not possible to add custom classes to jQuery UI elements I think. Let's leave it as is and maybe we can revisit if we want to follow this rule later on.

We need some screenshots of the affected elements, especially the full screen throbber (Views UI)

I messed up the patch

I haven't checked the autocomplete and table hierarchy yet, but here are some pointers:

1. +++ b/core/modules/system/css/system.module.css
   @@ -107,10 +107,8 @@ a.tabledrag-handle:hover {
    a.tabledrag-handle .handle {
      background: url(../../../misc/icons/787878/move.svg) no-repeat 6px 7px;
   -  height: 14px;
      margin: -0.4em 0.5em 0;
   -  padding: 0.42em 0.5em;
   -  width: 14px;
   +  padding: 0.42em 1em;
   

   This changes the size of the drag handle.

2. +++ b/core/modules/system/css/system.module.css
   @@ -131,34 +129,31 @@ a.tabledrag-handle:focus .handle {
   -.touch .draggable.drag a.tabledrag-handle .handle {
   +.touch .draggable .drag a.tabledrag-handle .handle {
   

   This selector no longer applies to the intended element, since the markup is <tr class="draggable tabledrag-leaf drag">

3. +++ b/core/modules/system/css/system.module.css
   @@ -131,34 +129,31 @@ a.tabledrag-handle:focus .handle {
   +.tree-child-horizontal {
   
   @@ -353,7 +346,7 @@ tr .ajax-progress-throbber .throbber {
     * "!important" is used to prevent unintentional overrides.
   

   Comment no longer applies when !important is removed

4. +++ b/core/modules/system/css/system.module.css
   @@ -365,9 +358,9 @@ tr .ajax-progress-throbber .throbber {
   -.visually-hidden.focusable:active,
   -.visually-hidden.focusable:focus {
   -  position: static !important;
   +.visually-hidden .focusable:active,
   +.visually-hidden .focusable:focus {
   +  position: static;
   

   This breaks the contextual link selector, as its markup is

   <a href="#main-content" class="visually-hidden focusable skip-link">
     Skip to main content
   </a>

5. Not in patch:
   

   /*
    * Remove browser styles, especially for <buttons> and so on.
    */
   .reset-appearance {

   should be

   /**
    * Remove browser styles, especially for <buttons> and so on.
    */
   .reset-appearance {
   

6. Not in patch:
   

   /*
    * Contain positioned elements.
    */
   .position-container {

   Should be

   /**
    * Contain positioned elements.
    */
   .position-container {
   

Postponed on #2395853: Split system.module.css and system.theme.css files into SMACSS style components

Can we replace these issues with individual issues for each file? It would make it easier to work on. Does anyone want to create the issues? :)