Log in OR Register AND Icons


cakal

Yönetici
Katılım
5 Ara 2018
Mesajlar
332
Tepkime puanı
48
Puanları
28
Konum
izmir
loginregisitar.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;
            }
        }
    }
}
 
Üst Alt