Skip to content

Commit

Permalink
fix(css): Renaming all ads- prefix to algolia-docsearch-
Browse files Browse the repository at this point in the history
  • Loading branch information
@pixelastic
pixelastic committed Dec 21, 2015
1 parent 1f5d817 commit c6fc53f
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 45 deletions.
16 changes: 8 additions & 8 deletions 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;
Expand Down
6 changes: 1 addition & 5 deletions src/lib/DocSearch.js
View file
Expand Up @@ -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);
Expand Down
29 changes: 18 additions & 11 deletions 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>
`
};

Expand Down
42 changes: 21 additions & 21 deletions src/styles/main.scss
View file
Expand Up @@ -19,82 +19,82 @@
}

// Each suggestion
.ads-suggestion {
.algolia-docsearch-suggestion {
color: #333;
cursor: pointer;
overflow: hidden;
border-bottom: 1px solid $color-border;
}

// Main category headers
.ads-suggestion--category-header {
.algolia-docsearch-suggestion--category-header {
display: none;
background: $color-category-header-background;
color: white;
font-weight: 600;
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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down

0 comments on commit c6fc53f

Please sign in to comment.