Clean up "dropbutton" component in Bartik

Suggested commit message:

git commit -m 'Issue #2398467 by lduerig, tresti88, Eski, LewisNyman, emma.maria: Clean up "dropbutton" component in Bartik'

Problem/Motivation

Bartik's code needs to meet current Drupal coding standards.

Proposed resolution

This issue takes a specific section of Bartik's code, it acts as a "component" issue and improves that section of code with minimal impact on the rest of Bartik's codebase.

This issue aims to clean up and properly format the CSS and templates files without breaking Bartik visually.

This issue primarily looks at the css/components/dropbutton.component.css file.

Work that needs to be included in patches for this issue are fully outlined in the META issue #1342054: [META] Clean up templates and CSS.

The work needs to be crossed off the list below as completed or stated why they were not applicable to this issue in the comments below, to make sure we cover everything.

Also very helpful! Noting the list items in your comment with the patch to show what parts you added to the patch.

Create a patch containing the potential following work:

Code cleanup work

1. Check each selector in the CSS file (associated with the particular issue) is in use within core right now.
   If not...
   a) Check to see if the classes in core have been changed and correct them (for e.g. I found this in this issue ).
   or
   b) Remove that CSS completely from the CSS file.
2. a) Check the CSS selectors are not being replicated in other stylesheets in Bartik.
   b) Check the CSS properties are not being overridden by other stylesheets in Bartik.
   If a) move all of the properties to the selector in the stylesheet that you think most appropriate for the component you are dealing with.
   If a) and b) also remove the CSS properties and values being overridden within that ruleset.
3. If you find CSS for a component which seems out of place in the file it is currently in move it to the one you think is the correct one.
4. If a selector appears to be too long and/or too specific, check if the selector can be simplified. for eg. .something .something .something { } being modified to .something .something { }.
5. Check that RTL styles exist when needed and are formatted as per the guidelines. (for e.g. we found that RTL styles are broken on certain pages in this issue, so fix anything you see missing/incorrect in the CSS file.
6. If you think the contents of the CSS file could be further broken down into more components CSS files, or grouped together with other existing CSS files to form one component do it. The initial SMACSS issue may not of been perfect, guidelines on CSS file organisation for Drupal 8 can be found here.
7. Check the markup from the templates that all of the classes are used as selectors in the CSS files. If not remove them. See an example issue here for this.

Code formatting work

1. Add a File comment to the top of the stylesheet - see here for guidelines.
2. Check any other comments are formatted correctly - see here for guidelines.
3. Check Whitespace is being used correctly, this includes indentations and line breaks - see here for guidelines.
4. Check the formatting of rulesets, properties and media queries are correct - see here for guidelines.
5. As mentioned above, check existing RTL styles are formatted correctly - see here for guidelines.

Remaining tasks

• Assess the code applicable to this patch and figure out what work in the lists above need to be included in the patch.
• Cross out work tasks that do not apply to this issue.
• Write a patch with as much work as you want to include, upload and comment what you included
• Review the patch - code review and visual changes
• Upload screenshots to show nothing/something is broken on the frontend

User interface changes

None, we are cleaning up CSS and markup in templates. The use of Bartik's UI and design will stay the same.

API changes

n/a

Beta phase evaluation