javascript 在FLAT主题上搜索可见

Posted 2021-05-04

<layout version="0.1.0">
    <default>
        <reference name="top.search">
            <action method="setFolded"><folded>0</folded></action>
        </reference>
    </default>
</layout>

@media(min-width: 769px) {
    .header-container .form-search {
        left: 20px;
        width: 500px;
        right: auto;
        height: 45px;
    }
    .header-container .form-search #search {
        font-size: 18px;
        border: 1px solid #a4225f;
        border-radius: 4px;
    }
    .header-container .form-search button {
        position: absolute;
        right: 0;
        top: 0;
        height: 30px;
    }
    .header-container .form-search #search {
        padding: 3px 0;
    }
    #search_mini_form {
        position: absolute;
        left: 0px;
        top: 0;
    }
    .fa-search {
        font-size: 1.6em;
    }
    .nav-container {
        margin-top: 47px;
    }
    .autocomplete {
        width: 600px !important;
    }
}

document.observe('dom:loaded', function() {
    var mobileMapping = {
        'toggle-search': {
            on: function() {
                $('search_mini_form').addClassName('shown');
                $$('.toggle-search')[0].addClassName('active');
            },
            off: function() {
                $('search_mini_form').removeClassName('shown');
                $$('.toggle-search')[0].removeClassName('active');
            }
        }
    };
    for (var i in mobileMapping) {
        Argento.togglers.add(i, mobileMapping[i]);
    }
});