diff --git a/docs/static_site/src/_sass/globalSearch.scss b/docs/static_site/src/_sass/globalSearch.scss index d727526042ed..a3867cf9365b 100644 --- a/docs/static_site/src/_sass/globalSearch.scss +++ b/docs/static_site/src/_sass/globalSearch.scss @@ -2,6 +2,7 @@ float: right; } +/* Search bar - wide screen */ .gs-search-border { padding-left: 25px; float: right; @@ -19,6 +20,77 @@ margin-bottom: 19px; } +#gs-search-icon { + background: url(/assets/img/search-icon.svg) center no-repeat; + background-size: 1em; + height: 30px; + width: 30px; + position: relative; + top: 10px; + cursor: pointer; + display: inline-block; +} + +#global-search-form { + display: none; + padding: 5px; + line-height: 1em; +} + +#global-search-close { + cursor: pointer; +} + +#global-search-dropdown-container { + display: inline-block; + position: relative; +} + +#global-search-dropdown-container button { + background-color: inherit; + color: white; + font-size: 17px; + margin: 0px; + border: none; + min-width: 100%; + outline: 0; + height: 37px; + width: 90px; + padding: 0px; + cursor: pointer; +} + +#global-search-dropdown-container-mobile + .gs-current-version-mobile + .gs-dropdown-caret, +#global-search-dropdown-container .gs-current-version .gs-dropdown-caret { + position: relative; + top: 4px; + height: 18px; +} + +ul.gs-version-dropdown { + display: none; + position: absolute; + text-align: center; + background-color: whitesmoke; + box-shadow: none; + z-index: 1; + margin: 0px; + padding: 0px; + list-style-type: none; +} + +li.gs-opt.gs-versions { + padding: 10px; + cursor: pointer; +} + +.gs-version-dropdown li:hover { + color: #ff4500 !important; +} + +/* Search bar - mobile */ #global-search-mobile { width: 120px; margin-right: 10px; @@ -81,25 +153,20 @@ color: #eeeeee; } -#gs-search-icon { - background: url(/assets/img/search-icon.svg) center no-repeat; - background-size: 1em; - height: 30px; - width: 30px; - position: relative; - top: 10px; - cursor: pointer; - display: inline-block; -} - -#global-search-form { - display: none; - padding: 5px; - line-height: 1em; +.gs-version-dropdown-mobile li.active, +.gs-version-dropdown li.active { + color: #ff4500 !important; + font-weight: lighter; } -#global-search-close { - cursor: pointer; +.gs-version-dropdown-mobile li, +.gs-version-dropdown li { + color: #424242; + text-decoration: none; + display: block; + padding-left: 5px; + padding-right: 5px; + font-size: 17px; } /* Main dropdown wrapper */ @@ -113,32 +180,32 @@ } #global-search-mobile-border .algolia-autocomplete .ds-dropdown-menu > div { - min-width: 80vw; - max-height: 90vh; + min-width: 80vw; + max-height: 90vh; } .gs-search-border .algolia-autocomplete .ds-dropdown-menu { min-width: 680px; } -/* Main category (eg. Getting Started) */ +/* Main category */ .algolia-autocomplete .algolia-docsearch-suggestion--category-header { color: #000000; text-align: center; } -/* Category (eg. Downloads) */ +/* Category */ .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column { color: gray; } -/* Title (eg. Bootstrap CDN) */ +/* Title */ .algolia-autocomplete .algolia-docsearch-suggestion--title { color: black; font-weight: 300; } -/* Description description (eg. Bootstrap currently works...) */ +/* Description description */ .algolia-autocomplete .algolia-docsearch-suggestion--text { font-size: 0.8rem; color: gray; @@ -148,68 +215,3 @@ .algolia-autocomplete .algolia-docsearch-suggestion--highlight { color: blue; } - -#global-search-dropdown-container { - display: inline-block; - position: relative; -} - -#global-search-dropdown-container button { - background-color: inherit; - color: white; - font-size: 17px; - margin: 0px; - border: none; - min-width: 100%; - outline: 0; - height: 37px; - width: 90px; - padding: 0px; - cursor: pointer; -} - -#global-search-dropdown-container-mobile - .gs-current-version-mobile - .gs-dropdown-caret, -#global-search-dropdown-container .gs-current-version .gs-dropdown-caret { - position: relative; - top: 4px; - height: 18px; -} - -ul.gs-version-dropdown { - display: none; - position: absolute; - text-align: center; - background-color: whitesmoke; - box-shadow: none; - z-index: 1; - margin: 0px; - padding: 0px; - list-style-type: none; -} - -li.gs-opt.gs-versions { - padding: 10px; - cursor: pointer; -} - -.gs-version-dropdown li:hover { - color: #ff4500 !important; -} - -.gs-version-dropdown-mobile li.active, -.gs-version-dropdown li.active { - color: #ff4500 !important; - font-weight: lighter; -} - -.gs-version-dropdown-mobile li, -.gs-version-dropdown li { - color: #424242; - text-decoration: none; - display: block; - padding-left: 5px; - padding-right: 5px; - font-size: 17px; -}