X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/0a7090f11131631647db366ff87976407e788412..f3ee4c1bfbf4e3856268fa79c63465f591f3499e:/src/wolnelektury/static/2022/styles/components/_search.scss?ds=sidebyside diff --git a/src/wolnelektury/static/2022/styles/components/_search.scss b/src/wolnelektury/static/2022/styles/components/_search.scss index 1063d6b24..511fbde00 100644 --- a/src/wolnelektury/static/2022/styles/components/_search.scss +++ b/src/wolnelektury/static/2022/styles/components/_search.scss @@ -29,6 +29,11 @@ font-size: 18px; line-height: 1.5em; + &:hover { + text-decoration: none; + background-color: #d2d2d2; + } + strong { font-weight: normal; background: #FFEA00; @@ -107,6 +112,7 @@ > div { display: flex; + flex-wrap: wrap; gap: 20px; margin-top: 26px; > div { @@ -134,3 +140,103 @@ } } } + + +.ui-autocomplete { + .ui-menu-item { + &:before { + } + + span { + border-radius: 18px; + padding: 0px 10px; + } + + &.type-info { + &:before { + content: '\1f6c8'; + position: absolute; + left: 0; + width:36px; + line-height: 36px; + text-align: center; + } + } + &.type-theme { + &:before { + content: '☆'; + position: absolute; + left: 0; + width:36px; + line-height: 36px; + text-align: center; + } + } + &.type-genre { + a, a:hover { + span { + color: black; + background: $wl-green; + } + } + } + &.type-epoch { + a, a:hover { + span { + background: $wl-teal; + color: white; + } + } + } + &.type-kind { + a, a:hover { + span { + color: black; + background: $wl-red; + } + } + } + &.type-author { + img { + border-radius: 18px; + } + } + &.type-set { + &:before { + content: ''; + position: absolute; + left: 0; + width:36px; + line-height: 36px; + text-align: center; + font-family: 'wl' !important; + color: $wl-red; + } + } + + a.ui-menu-item-wrapper { + display: flex; + transition: none; + padding: 0; + align-items: center; + + &:hover { + text-decoration: none; + } + + div { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + margin-right: 5px; + img { + max-height: 36px; + max-width: 36px; + } + } + } + } +} +