Rewrite form.css inline with our CSS standards

Uploaded the css file so it can reviewed with Dreditor

Not really sure where to start here :P Maybe we can split up the file a bit more?

I think all the general form stuff should stay in form.css, there's loads of stuff that belongs elsewhere though:

1. /* Filter */
   .filter-wrapper {
     font-size: 0.923em;
   }
   

   File should go in it's own file, but where is this used?

2. ul.tips,
   div.description,
   .form-item .description {
     margin: 0.2em 0 0 0;
     color: #595959;
     font-size: 0.9em;
   }
   .form-item .description.error {
     color: #a51b00;
   }
   

   There is a lot of overlap here with generic classes. Let's figure out where all these classes are coming from

3. .confirm-parent,
   .password-parent {
     overflow: visible;
     width: auto;
   }
    
   .form-item .password-suggestions {
     float: left; /* LTR */
     clear: left;
     width: 100%;
   }
   [dir="rtl"] .form-item .password-suggestions {
     float: right;
   }
   .form-item-pass .description {
     clear: both;
   }
   ...
     .password-strength {
       width: 100%;
     }
     div.form-item div.password-suggestions {
       float: none;
     }
   

   Let's move the password related stuff to it's own file

4. /**
    * Improve spacing of cancel link.
    */
   #edit-cancel {
     margin-left: 10px; /* LTR */
   }
   [dir="rtl"] #edit-cancel {
     margin-left: 0;
     margin-right: 10px;
   }
   ...
     #edit-cancel {
       display: block;
       margin: 10px 0 0 0;
     }
   

   Move this to it's own file, also what is this for?

5. /* Exceptions */
   #diff-inline-form select,
   div.filter-options select {
     padding: 0;
   }
   

   What is this? We should move it to it's own file... once we figure out what it's for

Here are the results from csslint:

 10 errors found in /Library/WebServer/Documents/core/themes/seven/css/components/form.css
 [L14:C1] Unknown @ rule: @-moz-document. This rule looks for recoverable syntax errors. (errors)
 [L144:C3] Duplicate property 'background' found. Duplicate properties must appear one after the other. (duplicate-properties)
 [L147:C3] Duplicate property 'color' found. Duplicate properties must appear one after the other. (duplicate-properties)
 [L219:C5] Background image '../../../../misc/icons/333333/caret-down.svg' was used multiple times, first declared at line 204, col 5. Every background-image should be unique. Use a common class for e.g. sprites. (duplicate-background-images)
 [L231:C1] Don't use IDs in selectors. Selectors should not contain IDs. (ids)
 [L234:C1] Don't use IDs in selectors. Selectors should not contain IDs. (ids)
 [L292:C3] Don't use IDs in selectors. Selectors should not contain IDs. (ids)
 [L296:C3] Don't use IDs in selectors. Selectors should not contain IDs. (ids)
 [L303:C1] Don't use IDs in selectors. Selectors should not contain IDs. (ids)
 [L304:C1] Element (div.filter-options) is overqualified, just use .filter-options without element name. Don't use classes or IDs with elements (a.foo or a#foo). (overqualified-elements)

There should be no js- selectors in this CSS file, so I think we can move it into a separate issue.

1. --- /dev/null
   +++ b/core/themes/seven/css/components/cancel-button.css
   
   +++ b/core/themes/seven/css/components/cancel-button.css
   @@ -0,0 +1,24 @@
   
   @@ -0,0 +1,24 @@
   +/**
   + * @file
   ...
   + *
   + * Improve spacing of cancel link.
   + */
   +
   

   Now that the cancel links are styled as buttons, we no longer need this CSS. We can delete this file! Yay

2. +++ b/core/themes/seven/css/components/cancel-button.css
   @@ -0,0 +1,24 @@
   + * Cancel buttons
   

   This comment requires a full stop.

3. +++ b/core/themes/seven/css/components/form.css
   @@ -1,6 +1,10 @@
    /**
   - * Form elements.
   + * @file
   + * Form
   + *
   + * General form elements
   

   I actually think this was fine before when it just said "Form elements." We don't need the word "form " in there

4. +++ b/core/themes/seven/css/components/form.css
   @@ -147,13 +150,11 @@ textarea.form-textarea {
   -  color: #333;
   -  border-radius: 2px;
      background: #fcfcfa;
   +  color: #595959;
   

   This is changing the design, I don't think we should do this here.

5. +++ b/core/themes/seven/css/components/form.css
   --- /dev/null
   +++ b/core/themes/seven/css/components/password.css
   

   Can we call this file "password-suggestions" to match the class?

6. +++ b/core/themes/seven/css/components/password.css
   @@ -0,0 +1,37 @@
   +.confirm-parent,
   +.password-parent {
   +  overflow: visible;
   +  width: auto;
   +}
   +
   +.form-item .password-suggestions {
   +  float: left; /* LTR */
   +  clear: left; /* LTR */
   +  width: 100%;
   +}
   +[dir="rtl"] .form-item .password-suggestions {
   +  float: right;
   +  clear: right;
   +}
   +.form-item-pass .description {
   +  clear: both;
   +}
   +
   +/**
   + * Improve password elements usability on narrow devices.
   + */
   +@media screen and (max-width: 600px) {
   +  .password-strength {
   +    width: 100%;
   +  }
   +  div.form-item div.password-suggestions {
   +    float: none;
   +  }
   +}
   

   I tried removing this CSS and it doesn't seem to do anything. I think it was overriding the old styling.Can we try removing this?

Nice, now we just need to show we aren't causing any regressions.

I found a few more errors being reported by CSSlint:

Line	Column	Message
29	1	Unknown @ rule: @-moz-document.
71	16	Element (select.form-select) is overqualified, just use .form-select without element name.
213	5	Background image '../../../../misc/icons/333333/caret-down.svg' was used multiple times, first declared at line 198, col 5.
262	3	Don't use IDs in selectors.
269	1	Don't use IDs in selectors.

1. +++ b/core/themes/seven/css/components/form.css
   @@ -210,8 +210,7 @@ select {
   -    background-image: url(../../../../misc/icons/333333/caret-down.svg),
   -    -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
   +    background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
   

   I discussed this with manjit on IRC, it looks like we have to include it twice when we define multiple backgrounds, we should undo this change and we'll just have to put up with the csslint error for now.

2. +++ b/core/themes/seven/css/components/form.css
   @@ -259,14 +258,14 @@ select {
   -  #dblog-filter-form .form-actions {
   +  .dblog-filter-form .form-actions {
   ...
   -#diff-inline-form select,
   +.diff-inline-form select,
   

   Do these classes exist in the markup? Can we get screenshots to show that it still works?

   Also I think these classes should be moved into their own files. We should use form.css for generic form styling only

This patch needed a reroll and it was tricky so re-implemented the patch by hand. I found quite a lot of styling to move around. Seven had a lot of mobile only CSS that was overridding module CSS. In those situations I just added a desktop only media query to the original CSS.