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.

Log in OR Register AND Icons

cakal

Yönetici
Katılım
5 Ara 2018
Mesajlar
397
Tepkime puanı
116
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;
            }
        }
    }
}
 
Üst Alt