framework7-without-localstorage/src/less/material/searchbar.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Search Bar === */
@searchbarBorderColor: #b4b4b4;
@searchbarSize: @toolbarSize;
@toolbarShadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
.searchbar {
    height: @searchbarSize;
    width: 100%;
    background: @themeColor;
    box-sizing: border-box;
    padding: 0 16px;
    overflow: hidden;
    position: relative;
    .flexbox();
    .align-items(center);
    color:#fff;
    &.no-shadow {
        box-shadow: none;
    }
    a {
        position: relative;
        color:#fff;
        .active-highlight();
    }
    .searchbar-input {
        width: 100%;
        height: 32px;
        position: relative;
        .flex-shrink(1);
    }
    input[type="search"] {
        .bars-input();
        height: 100%;
        padding: 0 36px 0 24px;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: 0 center;
        opacity: 0.6;
        -webkit-background-size: 24px 24px;
        background-size: 24px 24px;
        .transition(300ms);
        .encoded-svg-background("<svg fill='#FFFFFF' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
        &::-webkit-search-cancel-button {
            -webkit-appearance:none;
        }
    }
    .searchbar-clear {
        position: absolute;
        width: 56px;
        height: 100%;
        right: -16px;
        top: 0;
        opacity: 0;
        pointer-events:none;
        background-position: center;
        background-repeat: no-repeat;
        .encoded-svg-background("<svg fill='#fff' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
        -webkit-background-size: 24px 24px;
        background-size: 24px 24px;
        .transition(300ms);
        cursor: pointer;
    }
    .searchbar-cancel {
        display: none;
    }
    &.searchbar-active {
        input[type="search"] {
            opacity: 1;
        }
        .searchbar-clear {
            pointer-events: auto;
            opacity: 1;
        }
    }
    &.searchbar-not-empty {
        .searchbar-clear {
            pointer-events: auto;
            opacity: 1;
        }
    }
}
.searchbar-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    opacity: 0;
    pointer-events:none;
    background: rgba(0,0,0,0.25);
    .transition(300ms);
    .translate3d(0,0,0);
    &.searchbar-overlay-active {
        opacity: 1;
        pointer-events: auto;
    }
}
.searchbar-not-found {
    display: none;
}
.hidden-by-searchbar, .list-block .hidden-by-searchbar, .list-block li.hidden-by-searchbar {
    display: none;
}
.page > .searchbar {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 200;
    box-shadow: @toolbarShadow;
    & ~ .page-content {
        padding-top: @searchbarSize;
    }
    &.no-shadow {
        box-shadow: none;
    }
}
.navbar-fixed, .navbar-through {
    .page > .searchbar, > .searchbar {
        top: @navbarSize;
        & ~ .page-content {
            padding-top: @searchbarSize + @navbarSize;
        }
    }
}