Something went wrong on our end
-
Martin Leblanc authoredMartin Leblanc authored
_search--wcms-headerbar.scss 11.31 KiB
@use '../../../01-core' as *;
.uw-header-search {
padding: 0 var(--size-1);
right: 0;
&:has(input.uw-input--checkboxform:checked) {
background-color: var(--uw-black);
z-index: var(--layer-drawer);
}
@media(min-width: $screen-md) {
padding: 0;
position: relative;
right: inherit;
top: inherit;
width: inherit;
}
form label {
margin: 0;
position: absolute;
right: 0;
top: -3.4rem;
@media(min-width: $screen-md) {
position: relative;
right: inherit;
top: inherit;
}
&[for="uw-select-site"] {
background-color: var(--uw-white);
}
}
.uw-search--form {
display: grid;
gap: var(--size-105);
grid-template-columns: auto 8rem 2.125rem;
margin: 0;
position: relative;
width: 100%;
@media(min-width: $screen-md) {
border: 1px solid var(--uw-white);
display: inline-flex;
gap: inherit;
grid-template-columns: inherit;
height: inherit;
width: inherit;
}
.option {
display: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
margin-left: inherit;
padding-left: inherit;
}
.form-item {
margin: inherit;
opacity: 0;
@media(min-width: $screen-md) {
opacity: 1;
}
}
.form-type-select { height: 0;
left: -1000rem;
opacity: 0;
overflow: hidden;
position: absolute;
}
.uw-input--checkboxform {
margin: inherit;
}
.uw-search--checkboxlabel {
background-color: transparent;
border: 1px solid var(--uw-white);
border-radius: 0;
box-shadow: none;
color: var(--uw-white);
display: block;
@media(min-width: $screen-md) {
display: none;
}
font-weight: 200;
height: 2.375rem;
margin: 0;
overflow: hidden;
padding: 0;
transition: all 300ms;
width: 2.125rem;
&::after {
@include svg-background(search_2-white);
background-position: 8px 11px;
background-repeat: no-repeat;
background-size: 40%;
content: '';
display: block;
height: 2rem;
width: 2.125rem;
}
&:hover,
&:focus {
background: var(--uw-white);
&::after {
@include svg-background(search_2);
}
}
}
.uw-search-button__wrapper {
border-width: 0;
display: none;
height: 2.25rem;
position: relative;
width: 2.125rem;
@media(min-width: $screen-md) {
display: block;
}
&::after {
@include svg-background(search_2-white);
background-position: 8px 11px;
background-repeat: no-repeat;
background-size: 45%;
color: var(--uw-white);
content: '';
display: block;
font-weight: 200;
height: 100%;
position: absolute; right: 0;
text-align: center;
top: 0;
width: 100%;
z-index: var(--layer-background);
}
&:hover,
&:focus {
&::after {
@include svg-background(search_2-white);
background-color: var(--gray-6);
color: var(--uw-white);
}
}
&:focus-within {
&::after {
@include svg-background(search_2-white);
background-color: var(--gray-6);
color: var(--uw-white);
}
}
.button--submit {
&__form {
background-color: inherit;
background-image: none;
border: 1px solid var(--uw-white);
@media(min-width: $screen-md) {
border-width: 0;
}
box-shadow: none;
cursor: pointer;
display: inherit;
font-family: var(--font-book);
font-size: inherit;
font-weight: 200;
height: 2.25rem;
letter-spacing: inherit;
line-height: inherit;
margin: 0;
max-width: inherit;
padding: inherit;
position: absolute;
right: 0;
text-align: center;
text-decoration: none;
text-shadow: none;
text-transform: uppercase;
top: 0;
transition: background 300ms cubic-bezier(0.4, 0, 1, 1);
vertical-align: top;
white-space: normal;
width: 2.125rem;
z-index: var(--layer-content);
}
}
}
.form-item-search-type {
width:0;
}
.uw-input--search {
background-color: var(--uw-black);
border: 1px solid var(--uw-white);
border-radius: 0;
box-shadow: none;
color: var(--uw-white);
display: block;
font-family: var(--font-systemmedium);
font-size: var(--font-size-0);
font-weight: 200; height: 2.25rem;
line-height: 1.25rem;
overflow: hidden;
padding: var(--size-1);
position: relative;
transition: all 0.3s ease;
@media(min-width: $screen-md) {
border-width: 0;
display: block;
font-size: var(--font-size-000);
width: var(--size-8);
}
&::placeholder {
color: var(--uw-white);
opacity: 0.75;
&:hover {
color: var(--uw-black);
}
}
&:hover {
background: var(--uw-white);
color: var(--uw-black);
&::placeholder {
color: var(--uw-black);
}
~ .uw-search-button__wrapper {
&::after {
@include svg-background(search_2);
background-color: var(--uw-white);
}
}
}
&:focus {
background: var(--uw-white);
border-width: 0;
color: var(--uw-black);
&::placeholder {
color: var(--uw-black);
}
}
}
.uw-select--search {
appearance: none;
background-color: var(--uw-black);
border-radius: 0;
color: var(--uw-white);
display: inline-block;
font-family: var(--font-systemmedium);
font-size: var(--font-size-000);
height: 2.25rem;
opacity: 1;
outline: none;
padding-left: var(--size-1); // LTR
padding-right: 0;
&:hover,
&:focus {
background-color: var(--uw-white);
color: var(--uw-black);
}
@media(min-width: $screen-md) {
overflow: hidden; padding: 0;
transition: opacity 0.5s ease;
width: 0;
}
}
.form-actions {
margin: 0;
opacity: 0;
@media(min-width: $screen-md) {
opacity: 1;
}
padding: 0;
width: 2.125rem;
}
.button {
color: transparent !important;
}
.uw-input {
&.uw-input--checkboxform {
display: block;
height: 0;
left: -1000rem;
overflow: hidden;
position: absolute;
&:checked {
~ .uw-search--checkboxlabel {
background: var(--uw-white);
&::after {
@include svg-background(mobile-arrow-up);
background-position: 10px 14px;
background-repeat: no-repeat;
background-size: 34%;
color: var(--uw-white);
content: '';
display: block;
line-height: var(--size-3);
text-align: center;
}
@media(min-width: $screen-md) {
display: none;
}
}
~ .form-item {
animation: fadeIn 500ms;
display: block;
opacity: 1;
&.form-type-textfield {
display: block;
.uw-input--search {
border: var(--size-xs) solid var(--uw-white);
display: inline-block !important;
width: 100%;
}
}
&.form-type-select {
display: block;
height: inherit;
left: inherit;
opacity: 1;
overflow: hidden;
position: relative;
.uw-select--search {
appearance: none;
background-color: var(--uw-black); border-color: var(--uw-white);
color: var(--uw-white);
display: inline-block;
font-family: var(--font-book);
font-size: var(--font-size-0);
font-weight: 200;
height: 2.25rem;
line-height: 1.25rem;
margin: 0 0.725rem 0 0;
opacity: 1;
outline: none;
overflow: hidden;
padding: var(--size-1);
transition: opacity 0.5s ease;
width: var(--size-16);
&::placeholder {
color: var(--uw-black);
}
option {
color: var(--uw-black);
}
@media(min-width: $screen-md) {
display: none;
font-size: var(--font-size-000);
}
}
}
}
~ .form-actions {
margin: 0;
opacity: 1;
.uw-search-button__wrapper {
animation: fadeIn 500ms;
border-width: 0;
display: inherit;
@media(min-width: $screen-md) {
margin-right: 0;
}
.button--submit {
&__form {
position: relative;
}
}
}
}
}
}
}
.uw-search{
&--hidelabel {
display: block;
height: 0;
left: -1000rem;
overflow: hidden;
position: absolute;
}
&--checkboxlabel__labeltext {
color: var(--uw-white);
height: 0;
left: -1000rem;
overflow: hidden;
position: absolute;
}
&--labeltext {
color: var(--uw-white);
}
}
&:focus-within {
@media(min-width: $screen-md) {
.form-item-search-type {
width:auto;
}
.uw-input--search {
transition: width 0.3s ease;
width: 8rem;
&:hover {
~ .button--submit {
&__form {
color: var(--uw-white);
}
}
}
}
.form-type-select {
height: 2.25rem;
left: inherit;
opacity: 1;
overflow: inherit;
position: relative;
width: var(--size-15);
}
.uw-select--search {
border-width: 0;
color: var(--uw-white);
display: inline-block;
height: 2.25rem;
opacity: 1;
outline: none;
padding-left: var(--size-1); // LTR
padding-right: 0;
width: var(--size-16);
&:hover,
&:focus {
background-color: var(--uw-white);
border-width: 0;
color: var(--uw-black);
}
}
.form-action {
height: inherit;
margin: 0;
opacity: 1;
padding: 0;
transition: opacity 0.5s ease;
width: inherit;
}
.button--submit {
&__form {
border-color: var(--gray-6);
border-width: 0;
height: 2.25rem;
top: 0;
}
}
}
}
}
}