Removed .output rules from tabbed examples #2201
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR removes all rules in tabbed(html) examples refering to class "output". This class is used by HTML element living outside of the example and which is wrapping whole example output content. It is not shown in HTML tab, therefore it can be found only by using dev tools. I believe it might be confusing to the users, as they might be searching for this element and they will not be able to find it.
Elements embed, iframe, object, picture & source are setting #eee background color by using .output. Removing those rules doesn't have any visual impact, as #eee is very close to #fff used in other examples.
Element select is setting background image. Removing this rule makes this example look similar to option example and fixes #2171
Element wbr is setting background color to grey. This has significant impact, as edges of the inner white element can be easily seen. I have removed grey background and created dashed border instead, just like in CSS example line-break.
Other examples are just changing font family by declaration "font: 1rem 'Fira Sans', sans-serif;". Removing this has very low impact and makes font family uniform with other examples. In global attribute tabindex and contenteditable I had to set font-weight to bold, to keep previews style.
Examples accesskey, dir, enterkeyhint, spellcheck, style don't have any content in CSS tab now. If that's a problem I can add something to them or if #812 gets passed, we could remove css tab from those examples.