tomtom-react-searchbox/dist/index.css

Customizable searchbox component powered by Tomtom search for your React application.

.react-searchbox {

    text-align: left;
    display: block;
}

    .react-searchbox__input-wrapper {
        background-color: rgb(255, 255, 255);
        min-height: 38px;
        border: 1px solid rgb(204, 204, 204);
        border-radius: 4px;
        padding: 2px 12px;
        display: flex;
        box-sizing: border-box;
    }

    .react-searchbox__input-wrapper:focus-within {
            box-shadow: inset 0 0 0 1px rgb(67, 129, 254);
            border-color: rgb(67, 129, 254);
        }

    .react-searchbox__input {
        outline: none;
        border: none;
        text-overflow: ellipsis;
        width: 100%;
    }

    .react-searchbox__clear {
        cursor: pointer;
        display: flex;
        align-items: center;
        fill: rgb(127, 127 ,127);
    }

    .react-searchbox__clear:hover {
            fill: rgb(53, 53, 53);
        }

    .react-searchbox__results {
        background-color: rgb(255, 255, 255);
        border: 1px solid rgb(204, 204, 204);
        border-radius: 4px;
        margin-top: 8px;
        padding: 4px 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        box-sizing: border-box;
        position: absolute;
    }

    .react-searchbox__results .react-searchbox__result {
                overflow: hidden;
                text-overflow: ellipsis;
                padding: 8px;
            }

    .react-searchbox__results .react-searchbox__result:hover {
                background-color: rgb(224, 235, 255);
                cursor: pointer;
                }

    .react-searchbox__results .react-searchbox__result.-selected {
                background-color: rgb(224, 235, 255);
                cursor: pointer;
                }

    .react-searchbox__results .react-searchbox__result > * {
                display: inline;
                }

    .react-searchbox__results .react-searchbox__result-item.-primary {
                    color: rgb(53, 53, 53);
                    font-weight: bold;
                }

    .react-searchbox__results .react-searchbox__result-item.-secondary {
                    color: rgb(127, 127 ,127);
                }