// // Citizen - Search Styles // https://starcitizen.tools // // TODO: Make it configurable and flexible #site-search { #search-form { position: absolute; z-index: -1; // Not interactable margin: 7px 0 8px; // 1px h3 screen reader top: 0; right: @icon-box-size + @icon-padding * 2; opacity: 0; .boxshadow(4); transition: @transition-opacity; // Search field #search-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 12px 15px; width: 0; max-width: calc(~"100vw -"@icon-box-size * 2 + @icon-padding * 4 + @margin-side ); border: 1px solid @base-90; transition: @transition-width, @transition-box-shadow; &:focus { outline: 0; .boxshadow(5); } } // Search field button #search-button { .button-blue; width: @icon-box-size + @icon-padding * 2; height: 41px; border: 0; cursor: pointer; //somehow it is not pointer &:hover, &:active, &:focus { .button-blue-active; } } } #search-toggle-icon-container { display: flex; align-items: center; justify-content: center; height: inherit; #search-toggle-icon { opacity: @opacity-icon; position: absolute; margin-top: -2px; margin-left: -2px; width: 10px; height: 10px; border: solid 2px @base-0; border-radius: 100%; transform: rotate(-45deg); transition: @transition-transform, @transition-height, @transition-opacity, @transition-border-color; &:before, &:after { content: ''; position: absolute; width: 2px; background-color: @base-0; transition: inherit; } &:before { top: 10px; left: 3px; height: 10px; } &:after { opacity: 0; top: -1px; left: 4px; height: 18px; transform: rotate(-90deg); } } } #search-toggle { &:checked { ~#search-form { z-index: 5; opacity: 1; #search-input { width: 400px; } } ~#search-toggle-icon-container #search-toggle-icon { border-color: transparent; &:before { height: 18px; transform: translate(1px, -11px); } &:after { opacity: 1; } &:hover { ~#search-toggle-icon-container #search-toggle-icon { border-color: @base-0; &:after { opacity: 0; } } } } &:hover { ~#search-toggle-icon-container #search-toggle-icon { border-color: @base-0; &:after { height: 12px; } } } } &:hover { ~#search-toggle-icon-container #search-toggle-icon { opacity: @opacity-icon-active; &:before { height: 5px; transform: translate(0px, 5px); } } } } } #typeahead-suggestions { position: relative; z-index: 99999; } .suggestions-dropdown { background: @base-100; .boxshadow(4); width: calc(~"400px +"@icon-box-size + @icon-padding * 2); max-width: calc(~"100vw -"@icon-box-size + @icon-padding * 2 + @margin-side ); } .suggestion-link { display: block; position: relative; min-height: 2rem * @content-scaling; padding: 1rem 1rem 1rem 8.5rem * @content-scaling; } .suggestion-title { margin: 0 0 0.78rem * @content-scaling 0; color: @base-10; font-size: 1.6rem * @content-scaling; font-weight: 400; line-height: 1.872rem * @content-scaling; } .suggestion-link.active .suggestion-title { color: @accent-50; } .suggestion-highlight { font-weight: 600; font-style: normal; } .suggestion-description { color: @base-30; margin: 0; font-family: @fonts; font-size: 1.3rem * @content-scaling; line-height: 1.43rem * @content-scaling; } .suggestion-link.active { background-color: @accent-90; } /* using element selector to override default anchor styles */ a.suggestion-link:hover { text-decoration: none; } .suggestion-thumbnail { background-color: @base-80; background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100%; width: 7rem * @content-scaling; position: absolute; top: 0; left: 0; } // RTL tweaks .rtl { #site-search { #search-form { left: @icon-box-size + @margin-side + @icon-padding; right: unset; } } }