// 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; }