Trying to get to know how less work or better lib-css in partnership with it.
I have all styles generated on different element ending with :after going down to the same line of the _icon.less that generate the icon,
Now if I want to take the icon off just to a single div element how do I do?
Example:
@media all {
.page-header .switcher .options .action.toggle::after, .page-footer .switcher .options .action.toggle::after {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 12px;
line-height: 22px;
color: inherit;
content: '\e622';
font-family: 'luma-icons-entended';
margin: 0;
vertical-align: top;
display: inline-block;
font-weight: normal;
overflow: hidden;
speak: none;
text-align: center;
}
}
seems generated by _module.less on line 270
.page-header,
.page-footer {
.switcher {
font-size: 12px;
.options {
.lib-dropdown(
@_dropdown-actions-padding: 0,
@_dropdown-list-item-padding: 0,
@_dropdown-toggle-icon-content: @icon-down,
@_dropdown-toggle-active-icon-content: @icon-up,
@_icon-font-text-hide: true,
@_icon-font-size: 12px,
@_icon-font-line-height: 22px,
@_dropdown-list-min-width: 100px
);
ul.dropdown {
a {
.lib-link(
@_link-color: @color-gray20,
@_link-text-decoration: none,
@_link-color-visited: @color-gray20,
@_link-text-decoration-visited: none,
@_link-color-hover: @color-gray20,
@_link-text-decoration-hover: none,
@_link-color-active: @color-gray20,
@_link-text-decoration-active: none
);
display: block;
padding: 8px;
}
}
}
and _icon.less on line 80
&:after {
._lib-icon-font(
@_icon-font-content,
@_icon-font,
@_icon-font-size,
@_icon-font-line-height,
@_icon-font-color,
@_icon-font-margin,
@_icon-font-vertical-align
);
}
but this last one seems to generate a lot of :after to different div element so eliminate this means eliminate all other :after connected to it trough different div
How do I do so to display:none just on 1 single div, in this case
.page-header .switcher .options .action.toggle:hover::after, .page-footer .switcher .options .action.toggle:after
