discourse/app/assets/stylesheets/common/base/search-menu.scss

276 lines
5.0 KiB
SCSS

.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;
}
}
}
.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;
}
}
}