1

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
0

It required a little bit of practice and intuition, but then I understood is always the element :after belong to, the less regarding this element will have a .lib-icon-font class that connect to ._lib-icon-font in _icon.less, so eliminating the former will take away the icon.

In this particular case it would be even more intuitive so the less class will be connected to main div and this will generate all style for all div contained by it and the dropdwon as well, even the :after in this case, the icon will be generated by

@_dropdown-toggle-icon-content: @icon-down,
@_dropdown-toggle-active-icon-content: @icon-up,

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.