Добрый день, не могу заставить срабатывать открытие меню у поиска при нажатии на поле поиска, в др стиле работает, в дефолте не хочет, подскажите где косяк с тилях
Не срабаывает именно focus-search-menu .focus-search-menu-active
Ориг в шаблоне, но тоже не срабатывает
JS код
ругается на Uncaught SyntaxError: Unexpected end of input (at
Не срабаывает именно 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
Последнее редактирование: