XF 2.3 Не срабатывает условие в css

Версия XenForo
2.3.4

Adguest

Проверенные
Сообщения
546
Решения
10
Реакции
87
Баллы
90
Добрый день, не могу заставить срабатывать открытие меню у поиска при нажатии на поле поиска, в др стиле работает, в дефолте не хочет, подскажите где косяк с тилях

Не срабаывает именно focus-search-menu .focus-search-menu-active
Код:
.focus-search-menu .focus-search-menu-active {

    transform: translateY(0);

    opacity: 1;

    pointer-events: auto;

    visibility: visible;

}


Код:
    /*
        ----------------
        - Search bar
        ----------------
    */

    .focus-wrap-search {
    flex: 0 0 auto;
    margin-left: 10px;
    position: relative;
}
.focus-search {
    line-height: calc(32 * 1px);
        width: calc(200 * 1px);
        border-left-width: 1px;
        border-right-width: 1px;
        border: 1px solid hsl(0, 0%, 20%);
        border-radius: 5px;
}
@media (max-width:650px) {
    .focus-search {
        display: none;
    }
}
.focus-search-flex {
    align-items: center;
    display: flex;
    position: relative;
}
.focus-search-prefix {
    flex: 0 0 auto;
    opacity: 0.7;
    order: 1;
    text-align: center;
    transition: opacity .2s linear;
    width: calc(36*1px);
}
.focus-search input:focus~.focus-search-prefix {
    opacity: 1;
}
.focus-search input {
    background: none;
    border: 0;
    color: inherit;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    order: 2;
    outline: none;
    padding: 0;
    width: 100%;
    height: calc(32*1px);
    line-height: calc(32*1px);
}
.focus-search input::placeholder {
    color: inherit;
    opacity: 0.7;
}
.focus-search-menu {
    position: absolute;
    top: 100%;
    z-index: 200;
    margin-top: calc(7px + 4px);
    left: 0;
    width: 100%;
    max-width: 300px;
    min-width: 200px;
    color: @xf-textColor;
    background: @xf-contentBg;
    border-radius: @xf-blockBorderRadius;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: all linear .2s;
}
.focus-search-menu .focus-search-menu-active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}
.focus-search-menu::before,
.focus-search-menu::after {
    content: '';
    position: absolute;
    top: calc(7px * -2);
    left: 10px;
    width: calc(7px * 2);
    height: calc(7px * 2);
    border: 7px solid hsla(0, 0%, 0%, 0);
    border-bottom-color: hsla(0, 0%, 0%, 10%);
    box-sizing: border-box;
}
.focus-search-menu::before {
    margin-top: -1px;
}
.focus-search-menu::after {
    border-bottom-color: @xf-contentBg;
}
.focus-search-menu .menu-row {
    padding: 10px;
    border-top: 1px solid fade(@xf-textColor, 8%);
}
.focus-search-menu .menu-row:first-of-type {
    border-top-width: 0;
}
.focus-search-menu .menu-footer {
    background: xf-intensify(@xf-contentAltBg, 3%);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    padding: 7px;
}
.focus-search-menu .menu-footer-controls {
    float: none !important;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}     
.focus-search-menu .menu-footer-controls>* {
    flex: 0 0 auto;
    margin: 3px;
}
.focus-search-menu a.button {
    color: @xf-buttonDefault--color;
}     
.focus-search-menu .button {
    padding: 0 10px;
    line-height: calc(30px);
}
.focus-search-menu .button-text {
    display: block;
    position: relative;
}
.focus-search-menu .menu-footer .button-text:before {
    font-size: 14px;
    line-height: inherit;
    margin-right: 5px;
}
.focus-search-menu .menu-footer a .button-text:before {
    .m-faContent(@fa-var-sliders-h);
}

Ориг в шаблоне, но тоже не срабатывает

Код:
    .focus-search-menu{
        position: absolute;
        top: 100%;
        z-index: 200;
        margin-top: calc(@focus-search-arrow + 4px);
        left: 0;
        width: 100%;
        max-width: 300px;
        min-width: 200px;
        color: @xf-textColor;
        background: @focus-search-dropdown;
        box-shadow: 0px 10px 20px rgba(0,0,0,0.15), @focus-search-dropdown-border 0px 0px 0px 1px;
        border-radius: @xf-blockBorderRadius;

        transform: translateY(-12px);
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: all linear 0.2s;

        .focus-search-menu-active &{
            transform: translateY(0);
            opacity: 1;
            pointer-events: auto;
            visibility: visible;
        }

        &::before,
        &::after{
            content: '';
            position: absolute;
            top: calc(@focus-search-arrow * -2);
            left: 10px;
            width: calc(@focus-search-arrow * 2);
            height: calc(@focus-search-arrow * 2);
            border: @focus-search-arrow solid transparent;
            border-bottom-color: @focus-search-dropdown-border;
            box-sizing: border-box;
        }

        &::before{
            margin-top: -1px;
        }

        &::after{
            border-bottom-color: @focus-search-dropdown;
        }

        .menu-row{
            padding: 10px;
            border-top: 1px solid fade(@xf-textColor, 8%);

            &:first-of-type{
                border-top-width: 0;
            }
        }

JS код

Код:
(function(){
    let html = document.getElementById('XF');

        // Advanced search menu
        if(document.querySelector('.focus-search-advanced')){
            document.querySelector('.focus-search-advanced').addEventListener('click', e => {
                html.classList.toggle("focus-search-menu-active");
            });
        }
        // Show advanced search menu on focus
        document.querySelector('.focus-search-flex input').addEventListener('focus', e => {
            html.classList.add("focus-search-menu-active");
        });
        // Close advanced search menu on document click
        document.body.addEventListener("click", e => {
            let clickedEl = e.target.closest(".focus-wrap-search");
            if(clickedEl) return;
            html.classList.remove("focus-search-menu-active");
        });

ругается на Uncaught SyntaxError: Unexpected end of input (at
 
Последнее редактирование:
Современный облачный хостинг провайдер | Aéza
Назад
Сверху Снизу