6-page-content-elements edit

search-form  edit

hard-coded

Copy
Edit
<!-- components/6-page-content-elements/search-form.php --> <!-- This is a hard-coded copy of search page output --> <div id="test"> <div id="___gcse_0"> <div class="gsc-control-cse gsc-control-cse-en"> <div class="gsc-control-wrapper-cse" dir="ltr"> <form class="gsc-search-box gsc-search-box-tools" accept-charset="utf-8" _lpchecked="1"> <table cellspacing="0" cellpadding="0" class="gsc-search-box"> <tbody> <tr> <td class="gsc-input"> <div class="gsc-input-box" id="gsc-iw-id1"> <table cellspacing="0" cellpadding="0" id="gs_id50" class="gstl_50 gsc-input" style="width: 100%; padding: 0px;"> <tbody> <tr> <td id="gs_tti50" class="gsib_a"><input autocomplete="off" type="text" size="10" class="gsc-input" name="search" title="search" id="gsc-i-id1" dir="ltr" spellcheck="false" style="width: 100%; padding: 0px; border: none; margin: -0.0625em 0px 0px; height: 1.25em; background: url(&quot;https://www.google.com/cse/static/images/1x/en/branding.png&quot;) left center no-repeat rgb(255, 255, 255); outline: none;"></td> <td class="gsib_b"> <div class="gsst_b" id="gs_st50" dir="ltr"><a class="gsst_a" href="javascript:void(0)" title="Clear search box" role="button" style="display: none;"><span class="gscb_a" id="gs_cb50" aria-hidden="true">×</span></a></div> </td> </tr> </tbody> </table> </div> </td> <td class="gsc-search-button"><button class="gsc-search-button gsc-search-button-v2"><svg width="13" height="13" viewBox="0 0 13 13"> <title>search</title> <path d="m4.8495 7.8226c0.82666 0 1.5262-0.29146 2.0985-0.87438 0.57232-0.58292 0.86378-1.2877 0.87438-2.1144 0.010599-0.82666-0.28086-1.5262-0.87438-2.0985-0.59352-0.57232-1.293-0.86378-2.0985-0.87438-0.8055-0.010599-1.5103 0.28086-2.1144 0.87438-0.60414 0.59352-0.8956 1.293-0.87438 2.0985 0.021197 0.8055 0.31266 1.5103 0.87438 2.1144 0.56172 0.60414 1.2665 0.8956 2.1144 0.87438zm4.4695 0.2115 3.681 3.6819-1.259 1.284-3.6817-3.7 0.0019784-0.69479-0.090043-0.098846c-0.87973 0.76087-1.92 1.1413-3.1207 1.1413-1.3553 0-2.5025-0.46363-3.4417-1.3909s-1.4088-2.0686-1.4088-3.4239c0-1.3553 0.4696-2.4966 1.4088-3.4239 0.9392-0.92727 2.0864-1.3969 3.4417-1.4088 1.3553-0.011889 2.4906 0.45771 3.406 1.4088 0.9154 0.95107 1.379 2.0924 1.3909 3.4239 0 1.2126-0.38043 2.2588-1.1413 3.1385l0.098834 0.090049z"></path> </svg></button></td> <td class="gsc-clear-button"> <div class="gsc-clear-button" title="clear results">&nbsp;</div> </td> </tr> </tbody> </table> </form> <div class="gsc-results-wrapper-nooverlay"> <div class="gsc-positioningWrapper"> <div class="gsc-tabsAreaInvisible"> <div aria-label="refinement" role="tab" class="gsc-tabHeader gsc-inline-block gsc-tabhActive">Custom Search</div><span class="gs-spacer"> </span> </div> </div> <div class="gsc-positioningWrapper"> <div class="gsc-tabsAreaInvisible"></div> </div> <div class="gsc-above-wrapper-area-invisible"> <table cellspacing="0" cellpadding="0" class="gsc-above-wrapper-area-container"> <tbody> <tr> <td class="gsc-result-info-container"> <div class="gsc-result-info-invisible"></div> </td> </tr> </tbody> </table> </div> <div class="gsc-adBlockInvisible"></div> <div class="gsc-wrapper"> <div class="gsc-adBlockInvisible"></div> <div class="gsc-resultsbox-invisible"> <div class="gsc-resultsRoot gsc-tabData gsc-tabdActive"> <div> <div class="gsc-expansionArea"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
Copy
Copy
Edit
/* scss/6-page-content-elements/_search-form.scss */ .gsc-search-button-v2:hover, .gsc-search-button-v2:focus { border-color: black !important; background: black !important; } // padding for clear button #test form.gsc-search-box { .gscb_a { line-height: 13px; } .gsib_b { padding: 0; } table.gsc-search-box td { vertical-align: top; } table.gsc-search-box td.gsc-input { padding: 0 12px 0 0 !important; } .gsc-search-button { padding: 0; } } // localized styles to help with local testing // body.local { // // found in _theme/headextra_search // #test { // .user_content table { // margin: 0; // } // } // #test button, // #test table { // margin: 0; // } // #test button { // padding: 12px 15px !important; // } // #test tr, // #test th, // #test td { // padding: 0; // } // table.gsc-search-box td.gsc-input { // padding-right: 12px !important; // } // #test input { // min-height: 30px; // } // .gsc-results .gsc-cursor-box .gsc-cursor-page { // background-color: transparent !important; // } // .gs-webResult.gs-result a.gs-title:link, // .gs-imageResult a.gs-title:link { // font-weight: 600 !important; // } // .gs-webResult.gs-result a.gs-title:link b, // .gs-imageResult a.gs-title:link b { // font-weight: 900 !important; // } // .gs-result .gs-title, // .gs-result .gs-title * { // height: 1.5em !important; // text-decoration: none !important; // color: #b58e5b !important; // } // .gs-result .gs-title:hover, // .gs-result .gs-title *:hover { // text-decoration: underline !important; // } // .cse .gs-result .gs-snippet, // .gs-result .gs-snippet, // .cse .gs-spelling-original, // .gs-spelling-original { // font-size: 15px !important; // line-height: 22px !important; // } // .cse input.gsc-search-button, // input.gsc-search-button { // height: 32px !important; // border-radius: none !important; // font-size: 14px !important; // font-weight: 400 !important; // } // .gsc-url-bottom { // display: block; // padding-bottom: 5px; // font-size: 14px !important; // } // .gsc-control-cse, // .gsc-control-cse .gsc-table-result { // font-family: "Avenir Next", Helvetica, Arial, sans-serif !important; // font-size: 14px !important; // } // .gsc-result .gs-title { // font-weight: 600 !important; // } // .gs-visibleUrl { // font-size: 14px !important; // font-weight: 700 !important; // } // .gsc-resultsHeader, // .gsc-webResult:after { // clear: none !important; // } // form.gsc-search-box { // width: 100% !important; // @include breakpoint($mobile-to-desktop-breakpoint) { // width: 80% !important; // } // } // .gsc-above-wrapper-area { // border-bottom: none !important; // } // .cse .gsc-control-cse, // .gsc-control-cse { // padding: 0.5em 0.5em 0.5em 0 !important; // } // .cse .gsc-results .gsc-cursor-page.gsc-cursor-current-page, // .gsc-results .gsc-cursor-page.gsc-cursor-current-page { // text-shadow: none !important; // } // .gsc-results .gsc-cursor-box .gsc-cursor-page { // margin-right: 17px !important; // } // .gsc-results .gsc-cursor-box .gsc-cursor-page, // .cse .gsc-results .gsc-cursor-page.gsc-cursor-current-page, // .gsc-results .gsc-cursor-page.gsc-cursor-current-page { // text-decoration: none !important; // color: #b58e5b !important; // font-weight: bold; // } // .cse .gsc-results .gsc-cursor-page.gsc-cursor-current-page, // .gsc-results .gsc-cursor-page.gsc-cursor-current-page { // margin-right: 13px !important; // padding: 3px 7px !important; // border: 1px solid var(--color-wmsilver-25) !important; // background: #ffffff !important; // } // .cse .gsc-webResult.gsc-result:hover, // .gsc-webResult.gsc-result:hover, // .gsc-webResult.gsc-result.gsc-promotion:hover, // .gsc-results .gsc-imageResult-classic:hover, // .gsc-results .gsc-imageResult-column:hover { // border-color: #c9c9c9; // } // .gsc-adBlock { // display: none !important; // } // .gsc-table-result, // .gsc-thumbnail-inside, // .gsc-url-top { // padding-right: 0 !important; // padding-left: 0 !important; // } // .gsc-webResult .gsc-result { // padding: 0.5em 0 1em !important; // border: 0 !important; // } // .cse .gsc-webResult.gsc-result:hover, // .gsc-webResult.gsc-result:hover, // .gsc-webResult.gsc-result.gsc-promotion:hover, // .gsc-results .gsc-imageResult-classic:hover, // .gsc-results .gsc-imageResult-column:hover { // border: 0 !important; // } // .gsib_a { // padding: 4px 6px !important; // } // .cse .gsc-search-button-v2, // .gsc-search-button-v2 { // padding: 10px 15px !important; // } // .gsst_a { // padding-top: 7px !important; // } // .gsst_a .gscb_a { // color: var(--color-wmsilver-25) !important; // } // .gsst_a .gscb_a:hover { // color: #000 !important; // } // .cse .gsc-search-button-v2, // .gsc-search-button-v2 { // margin-top: 0 !important; // border-radius: 0 !important; // } // // not sure where this is from, possibly 404/css/main.min.css // .gsc-control-cse { // font-family: arial, sans-serif; // } // .gsc-control-cse .gsc-table-result { // font-family: arial, sans-serif; // } // .gsc-refinementsGradient { // background: linear-gradient( // to left, // rgba(119, 119, 119, 1), // rgba(119, 119, 119, 0) // ); // } // .gsc-control-cse { // border-color: #ffffff; // background-color: #ffffff; // } // .gsc-input-box { // padding: 0; // border-radius: 0; // /* padding-top: 6px; */ // /* padding-bottom: 5px; */ // /* border-top-left-radius: 8px; */ // /* border-bottom-left-radius: 8px; */ // } // input.gsc-input, // .gsc-input-box, // .gsc-input-box-hover, // .gsc-input-box-focus { // border-color: #b3b3b3; // } // .gsc-search-button-v2, // .gsc-search-button-v2:hover, // .gsc-search-button-v2:focus { // border-color: #115740; // background-color: #115740; // background-image: none; // filter: none; // } // .gsc-search-button-v2 svg { // fill: #ffffff; // } // .gsc-tabHeader.gsc-tabhActive, // .gsc-refinementHeader.gsc-refinementhActive { // color: #ffffff; // border-color: #ffffff; // background-color: #333333; // } // .gsc-tabHeader.gsc-tabhInactive, // .gsc-refinementHeader.gsc-refinementhInactive { // color: #ffffff; // border-color: #ffffff; // background-color: #777777; // } // .gsc-webResult.gsc-result, // .gsc-results .gsc-imageResult { // border-color: #ffffff; // background-color: #ffffff; // } // .gsc-webResult.gsc-result:hover { // border-color: #ffffff; // background-color: #ffffff; // } // .gs-webResult.gs-result a.gs-title:link, // .gs-webResult.gs-result a.gs-title:link b, // .gs-imageResult a.gs-title:link, // .gs-imageResult a.gs-title:link b { // color: #b9975b; // } // .gs-webResult.gs-result a.gs-title:visited, // .gs-webResult.gs-result a.gs-title:visited b, // .gs-imageResult a.gs-title:visited, // .gs-imageResult a.gs-title:visited b { // color: #b9975b; // } // .gs-webResult.gs-result a.gs-title:hover, // .gs-webResult.gs-result a.gs-title:hover b, // .gs-imageResult a.gs-title:hover, // .gs-imageResult a.gs-title:hover b { // color: #b9975b; // } // .gs-webResult.gs-result a.gs-title:active, // .gs-webResult.gs-result a.gs-title:active b, // .gs-imageResult a.gs-title:active, // .gs-imageResult a.gs-title:active b { // color: #b9975b; // } // .gsc-cursor-page { // color: #b9975b; // } // a.gsc-trailing-more-results:link { // color: #b9975b; // } // .gs-webResult .gs-snippet, // .gs-fileFormatType { // color: #000000; // } // .gs-webResult div.gs-visibleUrl { // color: #4a4a4a; // } // .gs-webResult div.gs-visibleUrl-short { // color: #4a4a4a; // } // .gs-webResult div.gs-visibleUrl-short { // display: none; // } // .gs-webResult div.gs-visibleUrl-long { // display: block; // } // .gs-promotion div.gs-visibleUrl-short { // display: none; // } // .gs-promotion div.gs-visibleUrl-long { // display: block; // } // .gsc-cursor-box { // border-color: #ffffff; // } // .gsc-results .gsc-cursor-box .gsc-cursor-page { // color: #ffffff; // border-color: #ffffff; // background-color: #777777; // } // .gsc-results .gsc-cursor-box .gsc-cursor-current-page { // color: #ffffff; // border-color: #ffffff; // background-color: #333333; // } // .gsc-webResult.gsc-result.gsc-promotion { // border-color: #ffffff; // background-color: #ffffff; // } // .gsc-completion-title { // color: #b9975b; // } // .gsc-completion-snippet { // color: #000000; // } // .gs-promotion a.gs-title:link, // .gs-promotion a.gs-title:link *, // .gs-promotion .gs-snippet a:link { // color: #b9975b; // } // .gs-promotion a.gs-title:visited, // .gs-promotion a.gs-title:visited *, // .gs-promotion .gs-snippet a:visited { // color: #b9975b; // } // .gs-promotion a.gs-title:hover, // .gs-promotion a.gs-title:hover *, // .gs-promotion .gs-snippet a:hover { // color: #b9975b; // } // .gs-promotion a.gs-title:active, // .gs-promotion a.gs-title:active *, // .gs-promotion .gs-snippet a:active { // color: #b9975b; // } // .gs-promotion .gs-snippet, // .gs-promotion .gs-title .gs-promotion-title-right, // .gs-promotion .gs-title .gs-promotion-title-right * { // color: #000000; // } // .gs-promotion .gs-visibleUrl, // .gs-promotion .gs-visibleUrl-short { // color: #4a4a4a; // } // .gcsc-find-more-on-google { // color: #b9975b; // } // .gcsc-find-more-on-google-magnifier { // fill: #b9975b; // } // .gscb_a { // display: inline-block; // font: 27px/13px arial, sans-serif; // } // .gsst_a .gscb_a { // cursor: pointer; // color: #a1b9ed; // } // .gsst_a:hover .gscb_a, // .gsst_a:focus .gscb_a { // color: #36c; // } // .gsst_a { // display: inline-block; // } // .gsst_a { // padding: 0 4px; // cursor: pointer; // } // .gsst_a:hover { // text-decoration: none !important; // } // .gsst_b { // position: relative; // padding: 0 2px; // -webkit-user-select: none; // user-select: none; // white-space: nowrap; // font-size: 16px; // } // .gsst_e { // vertical-align: middle; // opacity: 0.55; // } // .gsst_a:hover .gsst_e, // .gsst_a:focus .gsst_e { // opacity: 0.72; // } // .gsst_a:active .gsst_e { // opacity: 1; // } // .gsst_f { // text-align: left; // background: white; // } // .gsst_g { // margin: -1px -3px; // padding: 0 6px; // border: 1px solid #ccc; // border-top-color: #d9d9d9; // background-color: white; // -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); // } // .gsst_h { // position: relative; // top: -1px; // height: 1px; // margin-bottom: -1px; // background-color: white; // } // .gsib_a { // width: 100%; // padding: 4px 6px 0; // } // .gsib_a, // .gsib_b { // vertical-align: top; // } // .gssb_c { // position: absolute; // z-index: 989; // border: 0; // } // .gssb_e { // cursor: default; // border: 1px solid #ccc; // border-top-color: #d9d9d9; // -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); // } // .gssb_f { // visibility: hidden; // white-space: nowrap; // } // .gssb_k { // position: absolute; // z-index: 988; // top: 0; // display: block; // border: 0; // } // .gsdd_a { // border: none !important; // } // .gsq_a { // padding: 0; // } // .gssb_a { // padding: 0 7px; // } // .gssb_a, // .gssb_a td { // overflow: hidden; // white-space: nowrap; // line-height: 22px; // } // #gssb_b { // text-decoration: none; // color: #36c; // font-size: 11px; // } // #gssb_b:hover { // text-decoration: underline; // color: #36c; // font-size: 11px; // } // .gssb_g { // position: relative; // padding: 8px 0 7px; // text-align: center; // } // .gssb_h { // height: 28px; // margin: 0.2em; // font-size: 15px; // -webkit-appearance: button; // } // .gssb_i { // background: #eee; // } // .gss_ifl { // visibility: hidden; // padding-left: 5px; // } // .gssb_i .gss_ifl { // visibility: visible; // } // a.gssb_j { // text-decoration: none; // color: #36c; // font-size: 13px; // line-height: 100%; // } // a.gssb_j:hover { // text-decoration: underline; // } // .gssb_l { // height: 1px; // background-color: #e5e5e5; // } // .gssb_m { // color: #000; // background: #fff; // } // .gssb_a { // padding: 0 9px; // } // .gsib_a { // padding: 5px 9px 4px 9px; // } // .gscb_a { // line-height: 27px; // } // .gssb_e { // border: 0; // } // .gssb_l { // margin: 5px 0; // } // input.gsc-input::-webkit-input-placeholder { // font-size: 14px; // } // input.gsc-input:-moz-placeholder { // font-size: 14px; // } // input.gsc-input::-moz-placeholder { // font-size: 14px; // } // input.gsc-input:-ms-input-placeholder { // font-size: 14px; // } // input.gsc-input:focus::-webkit-input-placeholder { // color: transparent; // } // input.gsc-input:focus:-moz-placeholder { // color: transparent; // } // input.gsc-input:focus::-moz-placeholder { // color: transparent; // } // input.gsc-input:focus:-ms-input-placeholder { // color: transparent; // } // .gssb_c .gsc-completion-container { // position: static; // } // .gssb_c { // z-index: 5000; // } // .gsc-completion-container table { // background: transparent; // font-family: inherit; // font-size: inherit; // } // .gssb_c > tbody > tr, // .gssb_c > tbody > tr > td, // .gssb_d, // .gssb_d > tbody > tr, // .gssb_d > tbody > tr > td, // .gssb_e, // .gssb_e > tbody > tr, // .gssb_e > tbody > tr > td { // margin: 0; // padding: 0; // border: 0; // } // .gssb_a table, // .gssb_a table tr, // .gssb_a table tr td { // margin: 0; // padding: 0; // border: 0; // } // }