Sub-issue of #1190252: [573] Use csslint as a weapon to beat the crappy CSS out of Drupal core
Inline with the CSS cleanup efforts of the HTML5 initiative, using CSSLint at http://csslint.net provides a quick way to code-sniff our css and tweak styles.

  1. Copy and paste the the stylesheet(s) below into the css lint tool at http://csslint.net and test.
  2. Fix any warnings or errors the tool finds.
  3. Patch Drupal 8 locally and make sure the css changes have not broken anything visually.
  4. Create patch and upload for the testbot.

Files: modules/field/theme/field.css (and field-rtl.css)

CommentFileSizeAuthor
#8 field-css-clean-up-1662976-8.patch1.12 KBmjonesdinero
#4 field-css-clean-up-1662976.patch1002 bytesmjonesdinero
#2 field-css-clean-up-1662976.patch555 bytesmjonesdinero
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

ZenDoodles’s picture

ZenDoodles CreditAttribution: ZenDoodles commented
Title: Clean up css in Field UI » Clean up css in Field
Component: field_ui.module » field system
mjonesdinero’s picture

mjonesdinero CreditAttribution: mjonesdinero commented
FileSize
field-css-clean-up-1662976.patch555 bytes

test in http://csslint.net found two warnings attach is the patch i have created and tested locally, nothing was broken.

mjonesdinero’s picture

mjonesdinero CreditAttribution: mjonesdinero commented

opsss ignore the patch attach, i attached a wrong patch it is for the file..sorry with that

mjonesdinero’s picture

mjonesdinero CreditAttribution: mjonesdinero commented
Status: Active » Needs review
FileSize
field-css-clean-up-1662976.patch1002 bytes

here is the latest file.. the first one is a mistake..

found out two warnings one on each css files

droplet’s picture

droplet CreditAttribution: droplet commented
Status: Needs review » Needs work 
+++ b/core/modules/field/theme/field.cssundefined
@@ -16,7 +16,7 @@ form .field-multiple-table td.field-multiple-drag {
+form .field-multiple-table td.field-multiple-drag .tabledrag-handle {

csslint should warning this too

mjonesdinero’s picture

mjonesdinero CreditAttribution: mjonesdinero commented
Assigned: Unassigned » mjonesdinero

but css lint give me a no warning on this..

droplet’s picture

droplet CreditAttribution: droplet commented

Disallow overqualified elements Element (td.field-multiple-drag) is overqualified, just use .field-multiple-drag without element name.
form .field-multiple-table td.field-multiple-drag .tabledrag-handl

mjonesdinero’s picture

mjonesdinero CreditAttribution: mjonesdinero commented
Status: Needs work » Needs review
FileSize
field-css-clean-up-1662976-8.patch1.12 KB

sorry about that droplet.. attach updated patch now..

droplet’s picture

droplet CreditAttribution: droplet commented

Thanks.

For this issue purpose it is enough. But we can also remove starting "form". If we want to tell its inside a form. I'd suggest ".form-item" or ".form-wrapper"

barraponto’s picture

barraponto CreditAttribution: barraponto commented

What about .tabledrag-processed? I mean, these styles are only meant for when there's javascript enabled.

barraponto’s picture

barraponto CreditAttribution: barraponto commented
Status: Needs review » Reviewed & tested by the community

Anyway, that's enough for this issue. We should probably create a new issue on unifying tabledrag css.

catch’s picture

catch
he/him
Primary language English
CreditAttribution: catch commented
Status: Reviewed & tested by the community » Fixed

Committed/pushed to 8.x, thanks!

Automatically closed -- issue fixed for 2 weeks with no activity.