.search-container { display: flex; justify-content: space-between; .warning { background-color: var(--danger-medium); padding: 5px 8px; color: var(--secondary); } .search-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1em; .search-query { flex: 1 0 0px; margin: 0 0.5em 0 0; } .search-cta { padding-bottom: 6.5px; padding-top: 6.5px; } } .search-advanced { width: 70%; @include breakpoint(medium) { width: 65%; } .search-actions, .search-notice, .search-results, .search-title, .search-bar { margin-bottom: 1em; } .search-info { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--primary-low); padding-bottom: 1em; margin-bottom: 1.5em; 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: 0.25em; } } .sort-by { display: flex; margin-left: auto; align-items: center; .desc { margin-right: 0.5em; } .combo-box { min-width: 150px; } } } .search-title { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; button { margin: 0 0.5em 0.5em 0; } } .search-notice { .fps-invalid { padding: 0.5em; background-color: var(--danger-low); border: 1px solid var(--danger-medium); color: var(--danger); } } } .search-advanced-sidebar { width: 30%; @include breakpoint(medium) { width: 35%; } margin-left: 1em; display: flex; flex-direction: column; .input-small, .combo-box, .ac-wrap, .control-group, .multi-select, .search-advanced-category-chooser { box-sizing: border-box; width: 100%; min-width: 100%; margin: 0; input, .item { padding-left: 4px; // temporarily normalizing input padding for this section } } .d-date-input { margin-top: 0.5em; width: 100%; } .search-advanced-title { background: var(--primary-low); padding: 0.358em 1em; @include breakpoint(medium) { padding: 0.358em 0.5em; } font-weight: 700; text-align: left; cursor: pointer; .d-icon { margin: 0; } } .search-advanced-filters { background: var(--primary-very-low); padding: 1em; .control-group { margin-bottom: 15px; } section.field { margin-top: 5px; } @include breakpoint(medium) { padding: 0.75em 0.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; padding: 0 0.5em; margin-bottom: 28px; max-width: 780px; word-break: break-word; .author { display: inline-block; vertical-align: top; padding-top: 0.15em; padding-left: 0.15em; margin-right: 1em; } .topic { padding-bottom: 0.25em; max-width: 700px; display: grid; grid-template-areas: "bulk-select title" "meta meta"; grid-template-columns: auto 1fr; align-items: baseline; .bulk-select { grid-area: bulk-select; } .search-link { grid-area: title; } .search-category { grid-area: meta; } } .search-category { max-width: 100%; display: flex; flex-wrap: wrap; margin-top: 0.25em; .badge-wrapper { max-width: 100%; } } input[type="checkbox"] { margin-top: 0; margin-left: 0; // cross-browser alignment below position: relative; vertical-align: bottom; margin-bottom: 0.39em; } .blurb { font-size: $font-0; line-height: $line-height-large; max-width: 640px; color: var(--primary-medium); .date { color: var(--primary-high); } .search-highlight { color: var(--primary-high); } } .like-count { display: block; color: var(--primary-high); margin-top: 0.25em; .d-icon { color: var(--love); font-size: $font-down-1; } } a.search-link:visited .topic-title { color: var(--tertiary-high); } .search-link { .topic-title { font-size: $font-up-2; line-height: $line-height-medium; } .topic-statuses { display: inline-block; font-size: 1.3em; line-height: $line-height-medium; color: var(--primary-medium); span { line-height: 1; } } } .discourse-tag.simple { font-size: $font-down-1; margin-right: 0.25em; } } .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; }