ihk24/templates/source/sass/partials/objects/_ihk-finder-form.scss

form.ihk-finder {
    position: relative;
    display: inline-block;
    width: 100%;
    color: white;
    text-align: left;
    h1 {
        font-size: 26px;
        line-height: 1.4;
        font-weight: 400;
        margin-bottom: 28px;
        font-family: 'Source Sans Pro', sans-serif;
        @media(max-width: 567px) {
            font-size: 20px;
        }
    }
    input {
        border: 0;
        transition: 0.3s ease;
        @include focusvisible;
        border-radius: 4px 5px 5px 4px;
        font-size: 18px;
        font-family: 'Source Sans Pro', sans-serif;
        color: $color-primary;
        height: 60px;
        @media(max-width: 567px) {
            font-size: 16px;
            height: 52px;
        }
        &.focus-visible:focus {
            border-radius: 4px;
        }
        &:focus-visible, &.-moz-focusring {
            border-radius: 4px;
        }
        &::-webkit-input-placeholder {
            color: $color-primary-light-01;
        }
        &:-ms-input-placeholder {
            color: $color-primary-light-01;
        }
        &::placeholder {
            color: $color-primary-light-01;
        }
    }
    button {
        position: absolute;
        width: 60px;
        height: 60px;
        background-color: #E3EBF5;
        color: #003366;
        padding: 0;
        border: 0;
        right: 0;
        bottom: 0;
        transition: 0.3s ease;
        @include focusvisible;
        border-radius: 0 4px 4px 0;
        overflow: hidden;
        @extend .icon-lokalisierung;
        font-family: "Icons";
        font-size: 30px;
        cursor: pointer;
        &.focus-visible:focus {
            border-radius: 4px;
        }
        &:focus-visible, &.-moz-focusring {
            border-radius: 4px;
        }
        &:after {
            content: "";
            @include fullsize;
            background-color: white;
            opacity: 0.1;
            transition: 0.3s ease;
        }
        &:hover {
            background-color: darken(#E3EBF5, 6);
        }
        @media(max-width: 567px) {
            width: 52px;
            height: 52px;
        }
    }
}

.twitter-typeahead {
    width: 100%;
    input {
        text-transform: uppercase;
        &::placeholder {
            text-transform: none;
        }
        &:-ms-input-placeholder {
            text-transform: none;
        }
        &::-ms-input-placeholder {
            text-transform: none;
        }
    }
    .tt-suggestion {
        padding: 7px 20px 9px;
        cursor: pointer;
        transition: 0.2s ease;
        &:hover, &.tt-cursor {
            background-color: $color-primary-light-04;
        }
        + .tt-suggestion {
            border-top: 1px solid $color-primary-light-03;
        }
    }
    .tt-menu {
        background-color: $color-white;
        color: $color-primary;
        width: 100%;
        line-height: 1.3;
        box-shadow: 0 10px 26px -6px rgba(black, 0.15);
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
        overflow: hidden;
        .name {
            font-family: "Korb", sans-serif;
            font-size: 18px;
        }
        .zip {
            font-size: 16px;
            display: block;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: 100%;
            color: #555;
        }
        .no-result {
            padding: 20px;
            font-family: "Korb", sans-serif;
            font-size: 18px;
            margin: 0;
        }
    }
}