godaddy-wordpress/go

View on GitHub
.dev/assets/shared/css/header/search-modal.scss

Summary

Maintainability
Test Coverage
/*! Search Modal: */
.search-modal {
    background: rgba(0, 0, 0, 0.25);
    bottom: 0;
    display: none;
    left: -9999rem;
    opacity: 0;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    position: fixed;
    top: 0;
    transition: opacity 0.15s linear, left 0s 0.15s linear;
    width: 100%;
    z-index: 10001;

    @media (prefers-reduced-motion: reduce) {
        transition: 0;
    }

    &::-webkit-scrollbar {
        display: none !important;
    }

    &.show-modal {
        display: block;
        left: 0;
    }

    &.active {
        cursor: pointer;
        opacity: 1;
        transition: opacity 0.2s linear;

        > * {
            cursor: default;
        }

        .search-modal-inner {
            box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.08);
            transform: translateY(0);
            transition: transform 0.25s ease-in-out, box-shadow 0.1s 0.25s linear;
        }
    }
}

.search-modal-inner {
    background-color: var(--go-header--color--background, var(--go--color--background));
    padding: 3vw;
    transform: translateY(-100%);
    transition: transform 0.15s linear, box-shadow 0.15s linear;

    @include media(medium) {
        padding: var(--go-header--padding--y, 3vw) var(--go-block--padding--x);
    }
}

.admin-bar .search-modal.active {
    top: 32px;

    @include media(admin-bar-only) {
        top: 46px;
    }
}