discourse/app/assets/stylesheets/common/base/search.scss
Joffrey JAFFEUX bd7100a062 FEATURE: revamp full-page-search UI (#5703)
This is the first iteration of this revamp, a following iteration will focus on improving the controls in the advanced search sidebar.
2018-04-09 11:51:09 -04:00

261 lines
4.7 KiB
SCSS

.search-container {
display: flex;
justify-content: space-between;
.search-bar {
display: flex;
justify-content: space-between;
align-items: center;
justify-content: space-between;
margin-bottom: 1em;
.search-query {
flex: 1;
margin: 0 .5em 0 0;
}
.search-cta {
padding-bottom: 6.5px;
padding-top: 6.5px;
}
}
.search-advanced {
width: 70%;
@include small-width { width: 65%; }
.search-actions,
.search-notice,
.search-results,
.search-title,
.search-bar {
margin-bottom: 1em;
}
.search-info {
display: flex;
flex-wrap: wrap;
border-bottom: 3px solid $primary-low;
padding-bottom: .5em;
margin-bottom: 1em;
flex-direction: row;
align-items: center;
.result-count {
display: flex;
.term {
font-weight: bold;
}
// spans can be in different orders depending of locale
span + span {
margin-left: .25em;
}
}
.sort-by {
display: flex;
margin-left: auto;
align-items: center;
.desc {
margin-right: .5em;
}
.combo-box {
min-width: 150px;
}
}
}
.search-title {
display: flex;
justify-content: flex-start;
align-items: center;
.bulk-select {
margin-left: .5em;
}
.fps-select a {
margin-left: .5em;
font-size: $font-down-1;
&:hover {
text-decoration: underline;
}
}
}
.search-notice {
.fps-invalid {
padding: .5em;
background-color: $danger-low;
border: 1px solid $danger-medium;
color: $danger;
}
}
}
.search-advanced-sidebar {
width: 30%;
@include small-width { width: 35%; }
margin-left: 1em;
display: flex;
flex-direction: column;
#search-min-post-count,
.date-picker,
.combo-box,
.ac-wrap,
.control-group,
.date-picker-wrapper,
.search-advanced-category-chooser {
box-sizing: border-box;
width: 100%;
min-width: 100%;
input, .item {
padding-left: 4px; // temporarily normalizing input padding for this section
}
}
.date-picker-wrapper {
margin-top: .5em;
}
.date-picker {
box-sizing: border-box;
text-align: left;
padding: 4px;
margin-bottom: 0;
}
.search-advanced-title {
background: $primary-low;
padding: .358em 1em;
@include small-width { padding: .358em .5em; }
font-weight: 700;
text-align: left;
font-weight: bold;
&.btn {
background: $primary-low;
}
.d-icon {
margin: 0;
}
}
.search-advanced-filters {
background: $primary-very-low;
padding: 1em;
.control-group {
margin-bottom: 15px;
}
section.field {
margin-top: 5px;
}
@include small-width {
padding: .75em .5em;
.ac-wrap, .choices, .select-kit.multi-select { // overriding inline width from JS
width: 100% !important;
}
.select-kit {
min-width: unset;
}
}
}
}
}
.fps-invalid {
margin-bottom: 1em;
}
.fps-result {
display: flex;
.author {
display: inline-block;
vertical-align: top;
}
.like-count {
color: dark-light-choose($primary-medium, $secondary-medium);
.fa { color: $love; font-size: $font-down-1; }
}
.badge-wrapper span.badge-category {
max-width: inherit;
}
.search-category {
padding-top:3px;
}
margin-bottom: 28px;
max-width: 780px;
.topic {
padding-bottom: 2px;
max-width:700px;
}
.avatar {
margin-right: 14px;
}
a.search-link:visited .topic-title {
color: $tertiary-high;
}
.search-link {
.topic-statuses, .topic-title {
font-size: $font-up-2;
line-height: $line-height-large;
}
.topic-statuses {
float: none;
display: inline-block;
color: dark-light-choose($primary-medium, $secondary-medium);
font-size: $font-0;
}
}
.blurb {
font-size: $font-0;
line-height: $line-height-large;
word-wrap: break-word;
max-width: 640px;
color: dark-light-choose($primary-medium, $secondary-medium);
.date {
color: dark-light-choose($primary-medium, $secondary-high);
}
.search-highlight {
color: dark-light-choose($primary, $secondary-low);
}
}
.discourse-tag {
font-size: $font-down-1;
}
}
.fps-topic {
display: inline-block;
}
.no-results-suggestion {
margin-top: 30px;
}
.search-footer {
margin-bottom: 30px;
}
.panel-body-contents .search-context label {
float: left;
}
.google-search-form {
margin-top: 2em;
}