// Custom styling to the Google Custom Search used in `_includes/header-global.html` & `_includes/nav-global.html` // ================================================== // Styling for the Google Custom Search used in the `_includes/header-global.html` version of the nav // ================================================== .header-global__search-collapse #___gcse_0:hover gsc-iw-id1, .header-global__search-collapse #___gcse_0:focus gsc-iw-id1 {
filter: drop-shadow(2px 2px 6px rgba(128,128,128, 0.5));
}
.header-global__search-collapse gsc-iw-id1 {
border-radius: 2rem; padding-left: .5rem; border: solid thin $grey-5; line-height: 1; padding-top: 3px; padding-bottom: 3px;
}
.header-global__search-collapse .gsc-search-button-v2 {
background-color: transparent !important; border: none !important; pointer-events: auto; position: relative; right: -0.5rem; top: -.25rem; transition-property: right; transition-duration: .2s;
}
.header-global__search-collapse button.gsc-overrides__clear-x {
right: .5rem; padding-right: 5px !important;
}
@media screen and (min-width: 992px) {
.header-global__search-collapse .gsc-search-button-v2 { top: 0; right: .5rem; } .header-global__search-collapse button.gsc-overrides__clear-x { right: 1.125rem; padding-right: 5px !important; }
}
.header-global__search-collapse .gsst_a .gscb_a {
vertical-align: middle;
}
.header-global__search-collapse .gsc-search-button-v2 svg {
fill: $primary-blue !important; height: 1.25rem; width: 1.25rem; transition-property: fill; transition-duration: .2s;
}
.header-global__search-collapse .gsc-search-button-v2:hover svg, .header-global__search-collapse .gsc-search-button-v2:focus svg {
fill: $primary-red !important;
}
.header-global__search-collapse td.gsc-search-button {
display: inline; pointer-events: none; position: absolute; right: 50px;
}
@media screen and (min-width: 1400px) {
.header-global__search-collapse td.gsc-search-button { right: 44px; }
}
.header-global__search-collapse .gsc-search-box-tools .gsc-search-box .gsc-input {
padding-right: 0 !important;
}
// Similar styling for the Google Custom Search used in the `_includes/nav-global.html` version of the nav // ================================================== .nav-global__gcse-wrapper #___gcse_0:hover gsc-iw-id1, .nav-global__gcse-wrapper #___gcse_0:focus gsc-iw-id1 {
filter: drop-shadow(2px 2px 6px rgba(128,128,128, 0.5));
}
.nav-global__gcse-wrapper gsc-iw-id1 {
border-radius: 2rem; padding-left: .5rem; border: solid thin $grey-5; line-height: 1; padding-top: 3px; padding-bottom: 3px;
}
.nav-global__gcse-wrapper .gsc-search-button-v2 {
background-color: transparent !important; border: none !important; pointer-events: auto; position: relative; right: 30px; transition-property: right; transition-duration: .2s;
}
.nav-global__gcse-wrapper .gsst_a .gscb_a {
vertical-align: middle;
}
.nav-global__gcse-wrapper button.gsc-overrides__clear-x {
right: 48px; padding-right: 5px !important;
}
.nav-global__gcse-wrapper .gsc-search-button-v2 svg {
fill: $primary-blue !important; height: 1.25rem; width: 1.25rem; transition-property: fill; transition-duration: .2s;
}
.nav-global__gcse-wrapper .gsc-search-button-v2:hover svg, .nav-global__gcse-wrapper .gsc-search-button-v2:focus svg {
fill: $primary-red !important;
}
.nav-global__gcse-wrapper td.gsc-search-button {
display: inline; pointer-events: none; position: absolute; right: 50px;
}
@media screen and (min-width: 1400px) {
.nav-global__gcse-wrapper td.gsc-search-button { right: 44px; }
}
.nav-global__search-collapse–visible #___gcse_0 {
margin-bottom: 20px;
}