diff --git a/docs/examples/airbnb/index.html b/docs/examples/airbnb/index.html index 4d5d1edd96..63c5465f78 100644 --- a/docs/examples/airbnb/index.html +++ b/docs/examples/airbnb/index.html @@ -1,3 +1,7 @@ +--- +# this ensures Jekyll reads the file to be transformed into HTML later +--- + @@ -6,6 +10,11 @@ + {% if site.env == 'development' %} + + {% else %} + + {% endif %} + {% if site.env == 'development' %} + + {% else %} + + {% endif %} diff --git a/docs/examples/airbnb/scss/_base.scss b/docs/examples/airbnb/scss/_base.scss deleted file mode 100644 index 844aa7ed4b..0000000000 --- a/docs/examples/airbnb/scss/_base.scss +++ /dev/null @@ -1,32 +0,0 @@ -@mixin block($block) { - .ais-#{$block} { - @content - } -} - -@mixin element($element) { - &--#{$element} { - @content - } -} - -@mixin modifier($modifier) { - &__#{$modifier} { - @content - } -} - -@mixin bem($block, $element, $modifier: "") { - @include block($block) { - @include element($element) { - @if $element != "" { - @include modifier($modifier) { - @content; - } - } @else { - @content; - } - } - } -} - diff --git a/docs/examples/airbnb/scss/_default.scss b/docs/examples/airbnb/scss/_default.scss deleted file mode 100644 index f5c5d1a8ec..0000000000 --- a/docs/examples/airbnb/scss/_default.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import "base"; -@import "search-box"; -@import "stats"; -@import "index-selector"; -@import "hits"; -@import "pagination"; -@import "refinement-list"; -@import "menu"; -@import "toggle"; -@import "hierarchical-menu"; -@import "range-slider"; -@import "price-ranges"; diff --git a/docs/examples/airbnb/scss/_hierarchical-menu.scss b/docs/examples/airbnb/scss/_hierarchical-menu.scss deleted file mode 100644 index c2514815d5..0000000000 --- a/docs/examples/airbnb/scss/_hierarchical-menu.scss +++ /dev/null @@ -1,19 +0,0 @@ -@import "base"; -@import "variables"; - -@include block(hierarchical-menu) { - @include element(header); - @include element(body); - @include element(list) { - @include modifier(lvl0); - @include modifier(lvl1); - } - - @include element(item) { - @include modifier(active); - } - - @include element(link); - @include element(count); - @include element(footer); -} diff --git a/docs/examples/airbnb/scss/_hits.scss b/docs/examples/airbnb/scss/_hits.scss deleted file mode 100644 index 5e4d3f2be4..0000000000 --- a/docs/examples/airbnb/scss/_hits.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import "base"; -@import "variables"; - -@include block(hits) { - @include modifier(empty); - @include element(item); -} diff --git a/docs/examples/airbnb/scss/_index-selector.scss b/docs/examples/airbnb/scss/_index-selector.scss deleted file mode 100644 index 105aff07b7..0000000000 --- a/docs/examples/airbnb/scss/_index-selector.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import "base"; -@import "variables"; - -@include block(index-selector) { - @include element(item); -} diff --git a/docs/examples/airbnb/scss/_menu.scss b/docs/examples/airbnb/scss/_menu.scss deleted file mode 100644 index b4191ed325..0000000000 --- a/docs/examples/airbnb/scss/_menu.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import "base"; -@import "variables"; - -@include block(menu) { - @include element(header); - @include element(body); - @include element(list); - @include element(item) { - @include modifier(active); - } - @include element(link); - @include element(count); - @include element(footer); -} diff --git a/docs/examples/airbnb/scss/_pagination.scss b/docs/examples/airbnb/scss/_pagination.scss deleted file mode 100644 index 041a67b669..0000000000 --- a/docs/examples/airbnb/scss/_pagination.scss +++ /dev/null @@ -1,15 +0,0 @@ -@import "base"; -@import "variables"; - -@include block(pagination) { - @include element(item) { - @include modifier(disabled); - @include modifier(active); - @include modifier(first); - @include modifier(previous); - @include modifier(page); - @include modifier(next); - @include modifier(last); - } - @include element(link); -} diff --git a/docs/examples/airbnb/scss/_price-ranges.scss b/docs/examples/airbnb/scss/_price-ranges.scss deleted file mode 100644 index 43dd1977fd..0000000000 --- a/docs/examples/airbnb/scss/_price-ranges.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import "base"; -@import "variables"; - -@include block(price-ranges) { - @include element(header); - @include element(body); - @include element(footer); - @include element(form); - @include element(range) { - @include modifier(active); - } - @include element(input-group); - @include element(button); -} diff --git a/docs/examples/airbnb/scss/_range-slider.scss b/docs/examples/airbnb/scss/_range-slider.scss deleted file mode 100644 index 3e0f9d47d8..0000000000 --- a/docs/examples/airbnb/scss/_range-slider.scss +++ /dev/null @@ -1,101 +0,0 @@ -@import "base"; -@import "variables"; - -@include block(range-slider) { - @include element(target) { - position: relative; - direction: ltr; - background: $gray-light; - height: 4px; - &, * { - box-sizing: border-box; - } - } - - @include element(base) { - width: 100%; - height: 100%; - position: relative; - z-index: 1; - } - - @include element(origin) { - position: absolute; - right: 0; - top: 0; - left: 0; - bottom: 0; - } - - @include element(state-tap) { - @include block(range-slider) { - @include element(origin) { - transition: left .3s, top .3s; - } - } - } - - @include element(state-drag) { - * { - cursor: inherit; - } - } - - // Painting and performance; - // Browsers can paint handles in their own layer. - // - @include element(base) { - transform: translate3d(0, 0, 0); - } - - @include element(connect) { - background: $blue-light; - transition: background 450ms; - } - - @include element(background) { - background: $gray-light; - } - - @include element(handle) { - border: 1px solid #ccc; - border-radius: 50%; - width: 20px; - height: 20px; - background: white; - position: relative; - z-index: 1; - cursor: pointer; - } - - @include element(handle-lower) { - bottom: 7px; - } - - @include element(handle-upper) { - bottom: 7px; - } - - @include element(tooltip) { - position: absolute; - top: -20px; - } - - @include element(active) { - @include block(range-slider) { - @include element(tooltip) { - background: $blue-light; - color: $white; - border-color: $blue-dark; - } - } - } - - @include element(handle-upper) { - @include block(range-slider) { - @include element(tooltip) { - right: 0; - } - } - } -} diff --git a/docs/examples/airbnb/scss/_refinement-list.scss b/docs/examples/airbnb/scss/_refinement-list.scss deleted file mode 100644 index 53a5cef578..0000000000 --- a/docs/examples/airbnb/scss/_refinement-list.scss +++ /dev/null @@ -1,15 +0,0 @@ -@import "base"; -@import "variables"; - -@include block(refinement-list) { - @include element(header); - @include element(body); - @include element(list); - @include element(item) { - @include modifier(active); - } - @include element(label); - @include element(checkbox); - @include element(count); - @include element(footer); -} diff --git a/docs/examples/airbnb/scss/_search-box.scss b/docs/examples/airbnb/scss/_search-box.scss deleted file mode 100644 index 0fe9dbecf0..0000000000 --- a/docs/examples/airbnb/scss/_search-box.scss +++ /dev/null @@ -1,26 +0,0 @@ -@import "base"; -@import "variables"; - -@include block(search-box) { - @include element(powered-by) { - font-size: .8em; - text-align: right; - margin-top: 2px; - } - // - // Image replacement technique used: - // http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ - // - @include element(powered-by-link) { - display: inline-block; - width: 45px; - height: 16px; - text-indent: 101%; - overflow: hidden; - white-space: nowrap; - background-image: url("data:image/png;base64,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"); - background-repeat: no-repeat; - background-size: contain; - vertical-align: middle; - } -} diff --git a/docs/examples/airbnb/scss/_stats.scss b/docs/examples/airbnb/scss/_stats.scss deleted file mode 100644 index 474f9ada61..0000000000 --- a/docs/examples/airbnb/scss/_stats.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import "base"; -@import "variables"; - -@include block(stats) { - @include element(header); - @include element(body); - @include element(time); - @include element(footer); -} diff --git a/docs/examples/airbnb/scss/_toggle.scss b/docs/examples/airbnb/scss/_toggle.scss deleted file mode 100644 index 92e9e973e2..0000000000 --- a/docs/examples/airbnb/scss/_toggle.scss +++ /dev/null @@ -1,15 +0,0 @@ -@import "base"; -@import "variables"; - -@include block(toggle) { - @include element(header); - @include element(body); - @include element(list); - @include element(item) { - @include modifier(active); - } - @include element(label); - @include element(checkbox); - @include element(count); - @include element(footer); -} diff --git a/docs/examples/airbnb/scss/_variables.scss b/docs/examples/airbnb/scss/_variables.scss deleted file mode 100644 index 1f075ccdfe..0000000000 --- a/docs/examples/airbnb/scss/_variables.scss +++ /dev/null @@ -1,4 +0,0 @@ -$white: #FFFFFF; -$gray-light: #F3F4F7; -$blue-dark: #CE1312; -$blue-light: #E91D00; diff --git a/docs/examples/airbnb/search.js b/docs/examples/airbnb/search.js index cbfc0f3f01..14139b26c9 100644 --- a/docs/examples/airbnb/search.js +++ b/docs/examples/airbnb/search.js @@ -56,19 +56,15 @@ search.addWidget( container: '#room_types', facetName: 'room_type', operator: 'or', - limit: 10, - cssClasses: { - item: 'item', - count: 'hide', - active: 'active' - } + limit: 10 }) ); search.addWidget( instantsearch.widgets.rangeSlider({ container: '#price', - facetName: 'price' + attributeName: 'price', + pips: false }) ); diff --git a/docs/examples/airbnb/style.scss b/docs/examples/airbnb/style.scss index 87ae6ccb55..d1b38c6cd3 100644 --- a/docs/examples/airbnb/style.scss +++ b/docs/examples/airbnb/style.scss @@ -2,10 +2,6 @@ # this ensures Jekyll reads the file to be transformed into CSS later --- -// the relative path is not working here, -// Jekyll will always look in the sass_dir -@import "../examples/airbnb/scss/default"; - $white: #FFFFFF; $airbnb-red: #FF585B; $airbnb-gray-light: #DCE0E0; @@ -106,18 +102,30 @@ nav { } #price { - padding-top: 30px; + .ais-range-slider--target { + } + + .ais-range-slider--handle { + border-color: $airbnb-red; + } + + .ais-range-slider--connect { + background-color: $airbnb-red; + } } #room_types { - .item { + .ais-refinement-list--count { + display: none; + } + .ais-refinement-list--item { display: inline-block; padding: 10px 20px 5px 15px; background: $airbnb-gray-lighter; margin-right: 10px; cursor: pointer; } - input { + .ais-refinement-list--checkbox { position: relative; float: right; -webkit-appearance: none; @@ -131,9 +139,8 @@ nav { outline: none; } } - - .active { - input:before { + .ais-refinement-list--item__active { + .ais-refinement-list--checkbox:before { content: "\2713"; position: absolute; font-size: 0.85em;