.search-menu { .search-input { position: relative; padding: 0.5em 3px; } .search-context .show-help { float: right; } .heading { padding: 5px 0 5px 5px; .filter { padding: 0 5px; } } input[type="text"] { box-sizing: border-box; width: calc(100% - 6px); height: 32px; } .search-context { padding: 0 5px; label { margin-bottom: 0; } } .search-context + .results { margin-top: 5px; } .results { display: flex; flex-direction: row; .list { min-width: 100px; .item { .blurb { // https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; margin-top: 0.25em; } } } .search-result-topic { .second-line { display: flex; flex-wrap: wrap; align-items: center; .discourse-tags { flex-wrap: wrap; display: contents; } } a.widget-link { color: $tertiary; } } .main-results { display: flex; flex: 1 1 auto; .topic-statuses { color: $primary-medium; } } .main-results + .secondary-results { border-left: 1px solid $primary-low; margin-left: 1em; padding-left: 1em; max-width: 33%; } .secondary-results { display: flex; flex-direction: column; flex: 1 1 auto; .separator { margin-bottom: 1em; margin-top: 1em; height: 1px; background: $primary-low; } .search-result-tag { .discourse-tag { font-size: $font-down-1; } } .search-result-category { .widget-link { margin-bottom: 0; } } .search-result-group { .search-link { color: $primary-high; &:hover { color: $primary; } } .group-result { display: flex; align-items: center; .d-icon, .avatar-flair { min-width: 25px; margin-right: 0.5em; .d-icon { margin-right: 0; } } .avatar-flair-image { background-repeat: no-repeat; background-size: 100% 100%; min-height: 25px; } .group-names { display: flex; flex-direction: column; overflow: auto; line-height: $line-height-medium; &:hover { .name, .slug { color: $primary-high; } } .name, .slug { @include ellipsis; } .name { font-weight: 700; } .slug { font-size: $font-down-1; color: $primary-high; } } } } .search-result-category, .search-result-user, .search-result-group, .search-result-tag { .list { display: block; .item { .widget-link.search-link { flex: 1; font-size: $font-0; padding: 5px; } } } } .search-result-user { .user-result { display: flex; flex-direction: row; align-items: center; .avatar { margin-right: 0.5em; display: block; min-width: 25px; } .user-titles { display: flex; flex-direction: column; overflow: auto; line-height: $line-height-medium; .username, .name { @include ellipsis; } .username { color: dark-light-choose($primary-high, $secondary-low); font-size: $font-down-1; } .name { color: dark-light-choose($primary-high, $secondary-low); font-size: $font-0; font-weight: 700; } } } } } .show-more { padding: 5px; } } .searching { position: absolute; top: 1.15em; right: 1em; .spinner { width: 10px; height: 10px; border-width: 2px; margin: 0; } } .no-results { padding: 5px; } .filter { padding: 0; &:hover { background: transparent; } } .search-link { margin-bottom: 0.25em; .badge-category-parent { line-height: $line-height-small; } .topic { display: inline-block; line-height: $line-height-medium; } .topic-title { overflow-wrap: anywhere; @supports not (overflow-wrap: anywhere) { word-break: break-word; } margin-right: 0.25em; } } }