Log in OR Register AND Icons

Merhaba, tekrar hoş geldiniz!

Bilgi sahibi olanlarla ihtiyaç duyanları buluşturmak, farklı bakış açılarına sahip insanları bir araya getirerek birbirlerini daha iyi anlamalarını sağlamak ve herkesin bilgisini paylaşmasını sağlamak istiyoruz.

cakal

Yönetici
Katılım
5 Ara 2018
Mesajlar
516
Tepkime puanı
167
Puanları
43
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;
            }
        }
    }
}
 

Geri
Üst Alt