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

6
src/lib/DocSearch.js
View file

@ -50,11 +50,7 @@ class DocSearch {
source: this.getAutocompleteSource(), source: this.getAutocompleteSource(),
templates: { templates: {
suggestion: this.getSuggestionTemplate(), suggestion: this.getSuggestionTemplate(),
footer: ` footer: templates.footer
<div class="ads-footer">
Search by <a class="ads-footer--logo" href="https://www.algolia.com/docsearch">Algolia</a>
</div>
`
} }
}]); }]);
this.autocomplete.on('autocomplete:selected', this.handleSelected); 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 = { let templates = {
suggestion: ` suggestion: `
<div class="${prefix} <div class="${suggestionPrefix}
{{#isCategoryHeader}}${prefix}__main{{/isCategoryHeader}} {{#isCategoryHeader}}${suggestionPrefix}__main{{/isCategoryHeader}}
{{#isSubcategoryHeader}}${prefix}__secondary{{/isSubcategoryHeader}} {{#isSubcategoryHeader}}${suggestionPrefix}__secondary{{/isSubcategoryHeader}}
"> ">
<div class="${prefix}--category-header">{{{category}}}</div> <div class="${suggestionPrefix}--category-header">{{{category}}}</div>
<div class="${prefix}--wrapper"> <div class="${suggestionPrefix}--wrapper">
<div class="${prefix}--subcategory-column">{{{subcategory}}}</div> <div class="${suggestionPrefix}--subcategory-column">{{{subcategory}}}</div>
<div class="${prefix}--content"> <div class="${suggestionPrefix}--content">
<div class="${prefix}--subcategory-inline">{{{subcategory}}}</div> <div class="${suggestionPrefix}--subcategory-inline">{{{subcategory}}}</div>
<div class="${prefix}--title">{{{title}}}</div> <div class="${suggestionPrefix}--title">{{{title}}}</div>
<div class="${prefix}--text">{{{text}}}</div> <div class="${suggestionPrefix}--text">{{{text}}}</div>
</div> </div>
</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 // Each suggestion
.ads-suggestion { .algolia-docsearch-suggestion {
color: #333; color: #333;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
@ -27,7 +27,7 @@
} }
// Main category headers // Main category headers
.ads-suggestion--category-header { .algolia-docsearch-suggestion--category-header {
display: none; display: none;
background: $color-category-header-background; background: $color-category-header-background;
color: white; color: white;
@ -35,66 +35,66 @@
padding: 5px 10px; padding: 5px 10px;
text-align: left; text-align: left;
// Only show it when flaggued as "__main" // Only show it when flaggued as "__main"
.ads-suggestion__main & { .algolia-docsearch-suggestion__main & {
display: block; display: block;
} }
} }
// Highlight // Highlight
.ads-suggestion--highlight { .algolia-docsearch-suggestion--highlight {
padding: 0; padding: 0;
color: $color-highlight-text; color: $color-highlight-text;
background: none; background: none;
font-weight: 600; font-weight: 600;
// Highlight the background in header // Highlight the background in header
.ads-suggestion--category-header & { .algolia-docsearch-suggestion--category-header & {
color: inherit; color: inherit;
background: $color-highlight-header-background; background: $color-highlight-header-background;
} }
} }
// Selected suggestion // Selected suggestion
.aa-cursor .ads-suggestion--content { .aa-cursor .algolia-docsearch-suggestion--content {
color: $color-selected-text; color: $color-selected-text;
} }
.aa-cursor .ads-suggestion { .aa-cursor .algolia-docsearch-suggestion {
background: $color-selected-background; background: $color-selected-background;
} }
// The secondary column is hidden on small screens // The secondary column is hidden on small screens
.ads-suggestion--subcategory-column { .algolia-docsearch-suggestion--subcategory-column {
display: none; display: none;
} }
// The text snippet is hidden on small screens // The text snippet is hidden on small screens
.ads-suggestion--text { .algolia-docsearch-suggestion--text {
display: none; display: none;
} }
.ads-suggestion--content { .algolia-docsearch-suggestion--content {
padding: 3px 5px; padding: 3px 5px;
} }
.ads-suggestion--subcategory-inline { .algolia-docsearch-suggestion--subcategory-inline {
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
&:after { &:after {
content: " › "; content: " › ";
} }
} }
.ads-suggestion--title { .algolia-docsearch-suggestion--title {
display: inline; display: inline;
} }
// Footer // Footer
.ads-footer { .algolia-docsearch-footer {
border-top: 1px solid $color-border-light; border-top: 1px solid $color-border-light;
text-align: right; text-align: right;
font-size: 12px; font-size: 12px;
padding: 4px 2px 0 0; padding: 4px 2px 0 0;
color: #333; color: #333;
.ads-footer--logo { .algolia-docsearch-footer--logo {
display: inline-block !important; display: inline-block !important;
width: 45px; width: 45px;
height: 16px; height: 16px;
@ -111,7 +111,7 @@
// BREAKPOINT 1: // BREAKPOINT 1:
// Screen is big enough to display the text snippets // Screen is big enough to display the text snippets
@media (min-width: $breakpoint-medium) { @media (min-width: $breakpoint-medium) {
.ads-suggestion--text { .algolia-docsearch-suggestion--text {
display: block; display: block;
font-size: .9em; font-size: .9em;
padding: 2px 0; padding: 2px 0;
@ -121,12 +121,12 @@
// BREAKPOINT 2: // BREAKPOINT 2:
// Screen is big enough to display results in two columns // Screen is big enough to display results in two columns
@media (min-width: $breakpoint-large) { @media (min-width: $breakpoint-large) {
.ads-suggestion { .algolia-docsearch-suggestion {
display: table; display: table;
width: 100%; width: 100%;
border-bottom: 1px solid $color-border-light; border-bottom: 1px solid $color-border-light;
} }
.ads-suggestion--subcategory-column { .algolia-docsearch-suggestion--subcategory-column {
border-right: 1px solid $color-border-light; border-right: 1px solid $color-border-light;
background: $color-left-column-bg; background: $color-left-column-bg;
color: $color-left-column; color: $color-left-column;
@ -141,17 +141,17 @@
max-width: 135px; // Hardcoded max-width: 135px; // Hardcoded
min-width: 135px; // Hardcoded min-width: 135px; // Hardcoded
} }
.ads-suggestion--content { .algolia-docsearch-suggestion--content {
display: table-cell; display: table-cell;
padding: 5px 10px; padding: 5px 10px;
} }
.ads-suggestion--subcategory-inline { .algolia-docsearch-suggestion--subcategory-inline {
display: none; display: none;
} }
.ads-suggestion--title { .algolia-docsearch-suggestion--title {
font-weight: 600; font-weight: 600;
} }
.ads-suggestion--text { .algolia-docsearch-suggestion--text {
display: block; display: block;
font-weight: normal; font-weight: normal;
padding: 2px; padding: 2px;