Log in OR Register AND Icons

kick

Administrator
Staff member
Joined
Apr 7, 2020
Messages
177
Reaction score
207
Points
43
1589277297895.png

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.
Less:
@_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;
            }
        }
    }
}
 
Top