[inputter] Scoped styles

[andij]

Outcome

Apply the remaining styling to the inputter to meet the design criteria.

Scope

• The recent introduction of the Light DOM styles #145 has enabled complex CSS selectors to be used.

• Implement styles for states, attribute selectors, pseudo elements and pseudo classes in inputter for:

  • Text variants (text, email, tel, etc.)
  • search
  • password
  • disabled
  • date
  • mask (Safari font)
  • checkbox
  • radio

[andij]

• Feature/slotted styles #245

[andij]

After further experimentation and discovery we have managed to bring the majority of the styles into the ::slotted() selector.

There are some CSS selectors that are not available to us. This will result in a slightly reduced capability of styling elements in the Light DOM.

@jholt1 and I have discussed this at length and have agreed that any styles within Muon should remain within ::slotted(). And to only style the parts of elements using styles.slotted.css where there is a need to supply browsers that don't yet support the required feature.

For example, this bug within Webkit (Safari): https://bugs.webkit.org/show_bug.cgi?id=223814

The objective is to have no styles.slotted.css if possible.

[andij]

• Closing this ticket as PR Feature/slotted styles #245 has been merged.