From 04dd1c25df2ac7eca65f4cf93a8e1dd33da67947 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sat, 7 Mar 2020 21:34:32 +0300 Subject: [PATCH] refactor(v2): clean up and improve Algolia styles --- .../src/theme/SearchBar/algolia.css | 224 +----------------- 1 file changed, 7 insertions(+), 217 deletions(-) diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/algolia.css b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/algolia.css index 9a92921ac196..0cb6f6e24a26 100644 --- a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/algolia.css +++ b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/algolia.css @@ -43,197 +43,6 @@ } } -.searchbox { - display: inline-block; - position: relative; - width: 200px; - height: 32px !important; - white-space: nowrap; - box-sizing: border-box; - visibility: visible !important; -} - -.searchbox .algolia-autocomplete { - display: block; - width: 100%; - height: 100%; -} - -.searchbox__wrapper { - width: 100%; - height: 100%; - z-index: 999; - position: relative; -} - -.searchbox__input { - display: inline-block; - box-sizing: border-box; - -webkit-transition: box-shadow 0.4s ease, background 0.4s ease; - transition: box-shadow 0.4s ease, background 0.4s ease; - border: 0; - border-radius: 16px; - box-shadow: inset 0 0 0 1px #cccccc; - background: #ffffff !important; - padding: 0; - padding-right: 26px; - padding-left: 32px; - width: 100%; - height: 100%; - vertical-align: middle; - white-space: normal; - font-size: 12px; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - -.searchbox__input::-webkit-search-decoration, -.searchbox__input::-webkit-search-cancel-button, -.searchbox__input::-webkit-search-results-button, -.searchbox__input::-webkit-search-results-decoration { - display: none; -} - -.searchbox__input:hover { - box-shadow: inset 0 0 0 1px #b3b3b3; -} - -.searchbox__input:focus, -.searchbox__input:active { - outline: 0; - box-shadow: inset 0 0 0 1px #aaaaaa; - background: #ffffff; -} - -.searchbox__input::-webkit-input-placeholder { - color: #aaaaaa; -} - -.searchbox__input::-moz-placeholder { - color: #aaaaaa; -} - -.searchbox__input:-ms-input-placeholder { - color: #aaaaaa; -} - -.searchbox__input::placeholder { - color: #aaaaaa; -} - -.searchbox__submit { - position: absolute; - top: 0; - margin: 0; - border: 0; - border-radius: 16px 0 0 16px; - background-color: rgba(69, 142, 225, 0); - padding: 0; - width: 32px; - height: 100%; - vertical-align: middle; - text-align: center; - font-size: inherit; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - right: inherit; - left: 0; -} - -.searchbox__submit::before { - display: inline-block; - margin-right: -4px; - height: 100%; - vertical-align: middle; - content: ''; -} - -.searchbox__submit:hover, -.searchbox__submit:active { - cursor: pointer; -} - -.searchbox__submit:focus { - outline: 0; -} - -.searchbox__submit svg { - width: 14px; - height: 14px; - vertical-align: middle; - fill: #6d7e96; -} - -.searchbox__reset { - display: block; - position: absolute; - top: 8px; - right: 8px; - margin: 0; - border: 0; - background: none; - cursor: pointer; - padding: 0; - font-size: inherit; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - fill: rgba(0, 0, 0, 0.5); -} - -.searchbox__reset.hide { - display: none; -} - -.searchbox__reset:focus { - outline: 0; -} - -.searchbox__reset svg { - display: block; - margin: 4px; - width: 8px; - height: 8px; -} - -.searchbox__input:valid ~ .searchbox__reset { - display: block; - -webkit-animation-name: sbx-reset-in; - animation-name: sbx-reset-in; - -webkit-animation-duration: 0.15s; - animation-duration: 0.15s; -} - -@-webkit-keyframes sbx-reset-in { - 0% { - -webkit-transform: translate3d(-20%, 0, 0); - transform: translate3d(-20%, 0, 0); - opacity: 0; - } - 100% { - -webkit-transform: none; - transform: none; - opacity: 1; - } -} - -@keyframes sbx-reset-in { - 0% { - -webkit-transform: translate3d(-20%, 0, 0); - transform: translate3d(-20%, 0, 0); - opacity: 0; - } - 100% { - -webkit-transform: none; - transform: none; - opacity: 1; - } -} - .algolia-autocomplete pre { padding: 0; right: 0; @@ -277,7 +86,6 @@ padding: 0; text-align: left; height: auto; - position: relative; background: transparent; border: none; z-index: 999; @@ -304,30 +112,17 @@ } } -.algolia-autocomplete .ds-dropdown-menu .ds-suggestions { - position: relative; - z-index: 1000; -} - .algolia-autocomplete .ds-dropdown-menu .ds-suggestion { cursor: pointer; } .algolia-autocomplete .ds-dropdown-menu [class^='ds-dataset-'] { - position: relative; border-radius: 4px; overflow: auto; - padding: 0; - background: #ffffff; -} - -.algolia-autocomplete .ds-dropdown-menu * { - box-sizing: border-box; } .algolia-autocomplete .algolia-docsearch-suggestion { display: block; - position: relative; padding: 0; overflow: hidden; text-decoration: none; @@ -340,7 +135,7 @@ .algolia-autocomplete .algolia-docsearch-suggestion--highlight { background: #ffe564; - padding: 0.1em 0.05em; + padding: 0 0.05em; } .algolia-autocomplete @@ -369,7 +164,7 @@ float: right; width: 70%; position: relative; - padding: 5.33333px 0 5.33333px 10.66667px; + padding: 13.33333px 0 13.33333px 10.66667px; cursor: pointer; } @@ -393,7 +188,6 @@ background-color: #373940; text-transform: uppercase; color: #fff; - margin: 0; padding: 5px 8px; } @@ -401,7 +195,6 @@ background-color: #fff; width: 100%; float: left; - padding: 8px 0 0 0; } .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column { @@ -411,7 +204,7 @@ padding-left: 0; text-align: right; position: relative; - padding: 5.33333px 10.66667px; + padding: 13.33333px 10.66667px; color: #777; font-size: 0.9em; word-wrap: break-word; @@ -448,7 +241,6 @@ } .algolia-autocomplete .algolia-docsearch-suggestion--title { - margin-bottom: 4px; color: #02060c; font-size: 0.9em; font-weight: bold; @@ -518,21 +310,19 @@ width: 100%; height: 30px; z-index: 2000; - float: right; font-size: 0; line-height: 0; + border-top: 1px solid #ececec; } .algolia-autocomplete .algolia-docsearch-footer--logo { - background-image: url('data:image/svg+xml;utf8,'); - background-repeat: no-repeat; - background-position: center; + background: url('data:image/svg+xml;utf8,') + center no-repeat; background-size: 100%; overflow: hidden; text-indent: -9000px; width: 110px; height: 100%; display: block; - margin-left: auto; - margin-right: 5px; + margin: 0 5px 0 auto; }