nikon/docsearch
1
0
Fork 0
Code Activity Actions

fix(css): Renaming all ads- prefix to algolia-docsearch-

Browse source
This commit is contained in:
Pixelastic 2015-12-21 19:01:31 +01:00
parent 1f5d8177da
commit c6fc53f6d5
4 changed files with 48 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
dev/docsearch-styling.css
View file

@ -1,35 +1,35 @@
/* Bottom border of each suggestion */
.ads-suggestion {
.algolia-docsearch-suggestion {
border-bottom-color: #3A3DD1;
}
/* Main category headers */
.ads-suggestion--category-header {
.algolia-docsearch-suggestion--category-header {
background-color: #4B54DE;
}
/* Highlighted search terms */
.ads-suggestion--highlight {
.algolia-docsearch-suggestion--highlight {
color: #3A33D1;
}
/* Highligted search terms in the main category headers */
.ads-suggestion--category-header .ads-suggestion--highlight {
.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight {
background-color: #4D47D5;
}
/* Currently selected suggestion */
.aa-cursor .ads-suggestion--content {
.aa-cursor .algolia-docsearch-suggestion--content {
color: #272296;
}
.aa-cursor .ads-suggestion {
.aa-cursor .algolia-docsearch-suggestion {
background: #EBEBFB;
}
/* For bigger screens, when displaying results in two columns */
@media (min-width: 768px) {
/* Bottom border of each suggestion */
.ads-suggestion {
.algolia-docsearch-suggestion {
border-bottom-color: #7671df;
}
/* Left column, with secondary category header */
.ads-suggestion--subcategory-column {
.algolia-docsearch-suggestion--subcategory-column {
border-right-color: #7671df;
background-color: #F2F2FF;
color: #4E4726;

6
src/lib/DocSearch.js
View file

@ -50,11 +50,7 @@ class DocSearch {
source: this.getAutocompleteSource(),
templates: {
suggestion: this.getSuggestionTemplate(),
footer: `
<div class="ads-footer">
Search by <a class="ads-footer--logo" href="https://www.algolia.com/docsearch">Algolia</a>
</div>
`
footer: templates.footer
}
}]);
this.autocomplete.on('autocomplete:selected', this.handleSelected);

29
src/lib/templates.js
View file

@ -1,21 +1,28 @@
let prefix = 'ads-suggestion';
let prefix = 'algolia-docsearch';
let suggestionPrefix = `${prefix}-suggestion`;
let footerPrefix = `${prefix}-footer`;
let templates = {
suggestion: `
<div class="${prefix}
{{#isCategoryHeader}}${prefix}__main{{/isCategoryHeader}}
{{#isSubcategoryHeader}}${prefix}__secondary{{/isSubcategoryHeader}}
<div class="${suggestionPrefix}
{{#isCategoryHeader}}${suggestionPrefix}__main{{/isCategoryHeader}}
{{#isSubcategoryHeader}}${suggestionPrefix}__secondary{{/isSubcategoryHeader}}
">
<div class="${prefix}--category-header">{{{category}}}</div>
<div class="${prefix}--wrapper">
<div class="${prefix}--subcategory-column">{{{subcategory}}}</div>
<div class="${prefix}--content">
<div class="${prefix}--subcategory-inline">{{{subcategory}}}</div>
<div class="${prefix}--title">{{{title}}}</div>
<div class="${prefix}--text">{{{text}}}</div>
<div class="${suggestionPrefix}--category-header">{{{category}}}</div>
<div class="${suggestionPrefix}--wrapper">
<div class="${suggestionPrefix}--subcategory-column">{{{subcategory}}}</div>
<div class="${suggestionPrefix}--content">
<div class="${suggestionPrefix}--subcategory-inline">{{{subcategory}}}</div>
<div class="${suggestionPrefix}--title">{{{title}}}</div>
<div class="${suggestionPrefix}--text">{{{text}}}</div>
</div>
</div>
</div>
`,
footer: `
<div class="${footerPrefix}">
Search by <a class="${footerPrefix}--logo" href="https://www.algolia.com/docsearch">Algolia</a>
</div>
`
};

42
src/styles/main.scss
View file

@ -19,7 +19,7 @@
}
// Each suggestion
.ads-suggestion {
.algolia-docsearch-suggestion {
color: #333;
cursor: pointer;
overflow: hidden;
@ -27,7 +27,7 @@
}
// Main category headers
.ads-suggestion--category-header {
.algolia-docsearch-suggestion--category-header {
display: none;
background: $color-category-header-background;
color: white;
@ -35,66 +35,66 @@
padding: 5px 10px;
text-align: left;
// Only show it when flaggued as "__main"
.ads-suggestion__main & {
.algolia-docsearch-suggestion__main & {
display: block;
}
}
// Highlight
.ads-suggestion--highlight {
.algolia-docsearch-suggestion--highlight {
padding: 0;
color: $color-highlight-text;
background: none;
font-weight: 600;
// Highlight the background in header
.ads-suggestion--category-header & {
.algolia-docsearch-suggestion--category-header & {
color: inherit;
background: $color-highlight-header-background;
}
}
// Selected suggestion
.aa-cursor .ads-suggestion--content {
.aa-cursor .algolia-docsearch-suggestion--content {
color: $color-selected-text;
}
.aa-cursor .ads-suggestion {
.aa-cursor .algolia-docsearch-suggestion {
background: $color-selected-background;
}
// The secondary column is hidden on small screens
.ads-suggestion--subcategory-column {
.algolia-docsearch-suggestion--subcategory-column {
display: none;
}
// The text snippet is hidden on small screens
.ads-suggestion--text {
.algolia-docsearch-suggestion--text {
display: none;
}
.ads-suggestion--content {
.algolia-docsearch-suggestion--content {
padding: 3px 5px;
}
.ads-suggestion--subcategory-inline {
.algolia-docsearch-suggestion--subcategory-inline {
display: inline-block;
font-weight: bold;
&:after {
content: " › ";
}
}
.ads-suggestion--title {
.algolia-docsearch-suggestion--title {
display: inline;
}
// Footer
.ads-footer {
.algolia-docsearch-footer {
border-top: 1px solid $color-border-light;
text-align: right;
font-size: 12px;
padding: 4px 2px 0 0;
color: #333;
.ads-footer--logo {
.algolia-docsearch-footer--logo {
display: inline-block !important;
width: 45px;
height: 16px;
@ -111,7 +111,7 @@
// BREAKPOINT 1:
// Screen is big enough to display the text snippets
@media (min-width: $breakpoint-medium) {
.ads-suggestion--text {
.algolia-docsearch-suggestion--text {
display: block;
font-size: .9em;
padding: 2px 0;
@ -121,12 +121,12 @@
// BREAKPOINT 2:
// Screen is big enough to display results in two columns
@media (min-width: $breakpoint-large) {
.ads-suggestion {
.algolia-docsearch-suggestion {
display: table;
width: 100%;
border-bottom: 1px solid $color-border-light;
}
.ads-suggestion--subcategory-column {
.algolia-docsearch-suggestion--subcategory-column {
border-right: 1px solid $color-border-light;
background: $color-left-column-bg;
color: $color-left-column;
@ -141,17 +141,17 @@
max-width: 135px; // Hardcoded
min-width: 135px; // Hardcoded
}
.ads-suggestion--content {
.algolia-docsearch-suggestion--content {
display: table-cell;
padding: 5px 10px;
}
.ads-suggestion--subcategory-inline {
.algolia-docsearch-suggestion--subcategory-inline {
display: none;
}
.ads-suggestion--title {
.algolia-docsearch-suggestion--title {
font-weight: 600;
}
.ads-suggestion--text {
.algolia-docsearch-suggestion--text {
display: block;
font-weight: normal;
padding: 2px;