Log in OR Register AND Icons

[cakal]

Add a separator and icons for the login and registration buttons.
In extra.less we add such code.
Part of the code is placed in variables so that changes can be conveniently managed.

@_m-logInIcon: \f090;
@_m-registerIcon: \f084;
@_m-colorIcons: #e6bb5c;
@_m-separatedSpace: 16px;
@_m-separatedBg: #2577b1;
// On/Off background & border on sticky navigation
@_m-changeSticky: true; // false
@_m-separatedBgSticky: red;
@_m-separatedBorderSticky: white;
// On/Off Fa or Text
@_m-changeSymbol: false; // true
@_m-separatedSymbol: OR;
@_m-separatedSymbolFa: \f07e;

.p-navgroup-link {
    &:before {
        .m-faBase();
        color: @_m-colorIcons;
        padding-right: 5px;
    }
 
    &.p-navgroup-link--logIn {
        padding-right: @_m-separatedSpace;
     
        &:before {
            content: "@{_m-logInIcon}";
        }

        &:after { // Separated
            position: absolute;
            content: "@{_m-separatedSymbol}";
            color: #fefefe;
            background: @_m-separatedBg;
            border-radius: 50%;
            padding: 3px;
            margin-left: 7px;
            top: 10px;
            & when (@_m-changeSymbol = true) { // Separated FA icons
                .m-faBase();
                content: "@{_m-separatedSymbolFa}";
                padding: 3px 5px;
            }
            font-size: 10px;
        }
    }

    &.p-navgroup-link--register {
        padding-left: @_m-separatedSpace;
     
        &:before {
            content: "@{_m-registerIcon}";
        }
    }
 
    .p-navSticky.is-sticky & when (@_m-changeSticky = true) { // Separated sticky navigation
        &.p-navgroup-link--logIn {
            border-right: 1px solid @_m-separatedBorderSticky;

            &:after {
                background: @_m-separatedBgSticky;
            }
        }
    }
}