Task #49589

Optimize global icon styles

Added by Berit Hlubek over 6 years ago. Updated over 6 years ago.

Status:
Resolved
Priority:
Should have
Assignee:
Category:
Global User Interface
Target version:
-
Start date:
2013-07-02
Due date:
% Done:

100%


Description

At the moment we define a very global style for icon-classes:

[class^="icon-"], [class*=" icon-"] {
    background: none;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
}

File: /Packages/Application/TYPO3.Neos/Resources/Private/Styles/_General.scss
Line: 35 - 39

As class names like icon-xxx are quite generic this will break individual icon styling for the websites.
We have to prefix all icon elements and correct those lines according to the prefixed class-names to prevent breaking user styles.

History

#1 Updated by Berit Hlubek over 6 years ago

  • Status changed from New to Needs Feedback
  • Assignee changed from Berit Hlubek to Aske Ertmann

At the moment we use icons by only adding classes like icon-eye-close.
We can add another class like neos-icon and add the above shown global styling to that class only.

At Aske what do you think regarding this idea?

#2 Updated by Aske Ertmann over 6 years ago

  • Assignee changed from Aske Ertmann to Berit Hlubek

Hey Berit

It's already wrapped in .neos.. I didn't want to add .neos to all files to instead I include them inside .neos in Neos.scss so it shouldn't caused any issues.

#3 Updated by Berit Hlubek over 6 years ago

  • Assignee changed from Berit Hlubek to Aske Ertmann

The problem is not the missing .neos class around it but the fact that we do such global styling on a all class names like icon-xxx which also normal websites might use. When such website is used with neos all elements which use such an icon class will break while you are logged in, as the .neos class of course is also around that website and its classes. We can't use such generic class names for styling like that and should add classes like neos-icon which get those styles instead.

#4 Updated by Aske Ertmann over 6 years ago

  • Status changed from Needs Feedback to Resolved
  • % Done changed from 0 to 100

Also available in: Atom PDF