|
- @import '../../_global/styles/mixins';
- @import '../../_global/styles/vars';
-
- input.search-field {
- position: relative;
- display: block;
- border-radius: var(--border-radius-md) var(--border-radius-xl) var(--border-radius-xl) var(--border-radius-md);
- width: calc(100% - 1px);
- height: 80px;
- background-color: var(--swatches-neutrals-white);
- padding: 24px 90px 24px 24px;
- font-family: 'Source Sans Pro', sans-serif;
- font-size: 22px;
- line-height: 32px;
- color: var(--color-text);
- border: 2px solid var(--color-text-accent);
- transition: 0.25s ease;
- @include focus-visible;
-
- @media(max-width: 767px) {
- height: 70px;
- padding: 10px 50px 10px 16px;
- font-size: 18px;
- line-height: 30px;
- border-top-right-radius: 28px;
- border-bottom-right-radius: 28px;
- }
-
- &:focus, &:active, &.focus-visible, &.focus-visible:focus {
- box-shadow: 0 0 10px var(--color-text-accent), 0 0 4px var(--color-text-accent);
- }
-
- &::-webkit-input-placeholder {
- color: var(--color-text-accent);
- }
-
- &::-moz-placeholder {
- color: var(--color-text-accent);
- }
-
- &:-ms-input-placeholder {
- color: var(--color-text-accent);
- }
-
- &:-moz-placeholder {
- color: var(--color-text-accent);
- }
-
- &:-webkit-autofill,
- &:-webkit-autofill:hover,
- &:-webkit-autofill:focus,
- &:-webkit-autofill:active {
- -webkit-box-shadow: 0 0 0 50px var(--swatches-neutrals-white) inset !important;
- }
-
- &::-webkit-search-decoration,
- &::-webkit-search-cancel-button,
- &::-webkit-search-results-button,
- &::-webkit-search-results-decoration {
- display: none;
- }
- }
|
