diff --git a/.gitignore b/.gitignore index a1520c043b..c608fd86ad 100644 --- a/.gitignore +++ b/.gitignore @@ -1,8 +1,5 @@ -/docs/ -/docs-production/ node_modules/ dist/ dist-es5-module/ npm-debug.log .DS_Store -.happypack/ diff --git a/docgen/.eslintrc.js b/docgen/.eslintrc.js deleted file mode 100644 index bee5bd0cb5..0000000000 --- a/docgen/.eslintrc.js +++ /dev/null @@ -1,12 +0,0 @@ -var join = require('path').join; - -module.exports = { - "extends": join(__dirname, "../.eslintrc.js"), - "settings": { - "import/resolver": { - "webpack": { - "config": join(__dirname, "webpack.config.babel.js") - } - } - }, -}; diff --git a/docgen/assets/data/community-projects.json b/docgen/assets/data/community-projects.json deleted file mode 100644 index 53c4c2cfd8..0000000000 --- a/docgen/assets/data/community-projects.json +++ /dev/null @@ -1,38 +0,0 @@ -[ - { - "name":"places.js", - "url":"https://community.algolia.com/places/", - "logo":"https://community.algolia.com/places/images/svg/places-illustration-65745839.svg", - "backgroundColor": "#3a5395" - }, - { - "name":"wordpress", - "url":"https://community.algolia.com/wordpress", - "logo":"https://community.algolia.com/wordpress/img/icons/wp-icon.svg", - "backgroundColor": "linear-gradient(to bottom right, #4041B2, #516ED1)" - }, - { - "name":"Autocomplete.js", - "url":"https://github.com/algolia/autocomplete.js", - "logo":"https://community.algolia.com/img/illus-autocomplete.svg", - "backgroundColor": "#00587f" - }, - { - "name":"instantsearch.js", - "url":"https://community.algolia.com/instantsearch.js/", - "logo":"https://community.algolia.com/img/logo-is.svg", - "backgroundColor": "#385D72" - }, - { - "name":"Helper.js", - "url":"https://community.algolia.com/algoliasearch-helper-js/", - "logo":"https://community.algolia.com/img/logo-helper.svg", - "backgroundColor": "#FDBD57" - }, - { - "name":"magento", - "url":"https://community.algolia.com/magento/", - "logo":"http://res.cloudinary.com/hilnmyskv/image/upload/v1477318624/magento-icon-white.svg", - "backgroundColor": "linear-gradient(to bottom right, #ed9259, #e76d22)" - } -] \ No newline at end of file diff --git a/docgen/assets/img/material-ui.gif b/docgen/assets/img/material-ui.gif deleted file mode 100644 index 939de697d7..0000000000 Binary files a/docgen/assets/img/material-ui.gif and /dev/null differ diff --git a/docgen/assets/img/react-instant-favicon.png b/docgen/assets/img/react-instant-favicon.png deleted file mode 100644 index 16021e730e..0000000000 Binary files a/docgen/assets/img/react-instant-favicon.png and /dev/null differ diff --git a/docgen/assets/js/activateClipboard.js b/docgen/assets/js/activateClipboard.js deleted file mode 100644 index ca1e732e29..0000000000 --- a/docgen/assets/js/activateClipboard.js +++ /dev/null @@ -1,33 +0,0 @@ -import Clipboard from 'clipboard'; - -export default function activateClipboard(codeSamples) { - codeSamples.forEach(codeSample => { - const cleanAfter = 500; - let timeout; - const copyToClipboard = document.createElement('span'); - - const setup = () => { - clearTimeout(timeout); - copyToClipboard.textContent = 'Copy to clipboard'; - copyToClipboard.classList.remove('clipboard-done'); - copyToClipboard.classList.add('clipboard'); - }; - - const done = () => { - copyToClipboard.classList.add('clipboard-done'); - copyToClipboard.textContent = 'Copied!'; - }; - - const clipboard = new Clipboard(copyToClipboard, { - text: () => codeSample.querySelector('code').textContent, - }); - - setup(); - codeSample.querySelector('.heading').appendChild(copyToClipboard); - copyToClipboard.addEventListener('mouseleave', setup, true); - clipboard.on('success', () => { - done(); - timeout = setTimeout(setup, cleanAfter); - }); - }); -} diff --git a/docgen/assets/js/api.js b/docgen/assets/js/api.js deleted file mode 100644 index d8ca7303e8..0000000000 --- a/docgen/assets/js/api.js +++ /dev/null @@ -1,3 +0,0 @@ -/* eslint-disable no-console */ - -console.log('api'); diff --git a/docgen/assets/js/communityProjects.js b/docgen/assets/js/communityProjects.js deleted file mode 100644 index aa001e7578..0000000000 --- a/docgen/assets/js/communityProjects.js +++ /dev/null @@ -1,31 +0,0 @@ -import projects from '../data/community-projects.json'; - -function init() { - const list = []; - const target = document.querySelector('[data-inject-community]'); - - projects.forEach(e => { - list.push({ - name: e.name, - url: e.url, - logo: e.logo, - backgroundColor: e.backgroundColor ? e.backgroundColor : 'transparent', - }); - }); - - list.forEach(t => { - const tpl = ` - `; - target.innerHTML += tpl; - }); -} - -export default init; - diff --git a/docgen/assets/js/dropdowns.js b/docgen/assets/js/dropdowns.js deleted file mode 100644 index a324c0ffc3..0000000000 --- a/docgen/assets/js/dropdowns.js +++ /dev/null @@ -1,39 +0,0 @@ -function dropdowns() { - const openDropdown = document.querySelectorAll('[data-toggle-dropdown]'); - const otherDropdown = document.querySelectorAll('.simple-dropdown'); - - for (let i = 0; i < openDropdown.length; i++) { - toggleDropdown(openDropdown[i]); - } - - function toggleDropdown(element) { - const dropdown = element.getAttribute('data-toggle-dropdown'); - const theDropdown = document.getElementById(dropdown); - element.addEventListener('click', () => { - if (!theDropdown.classList.contains('opened')) { - for (let i = 0; i < otherDropdown.length; i++) { - otherDropdown[i].classList.remove('opened'); - } - - theDropdown.classList.add('opened'); - theDropdown.setAttribute('aria-expanded', 'true'); - theDropdown.setAttribute('aria-expanded', 'true'); - } else { - theDropdown.classList.remove('opened'); - theDropdown.setAttribute('aria-expanded', 'false'); - theDropdown.setAttribute('aria-expanded', 'false'); - } - }); - - // When there is a click event - // Check if the clicked element is the - // dropdown toggler, if not, close the dropdown - document.body.addEventListener('click', e => { - if (!element.contains(e.target)) { - theDropdown.classList.remove('opened'); - } - }); - } -} - -export default dropdowns; diff --git a/docgen/assets/js/editThisPage.js b/docgen/assets/js/editThisPage.js deleted file mode 100644 index 2529a2b1fb..0000000000 --- a/docgen/assets/js/editThisPage.js +++ /dev/null @@ -1,28 +0,0 @@ -if (document.querySelector('.documentation-container')) { - const $edit = document.createElement('a'); - $edit.classList.add('editThisPage'); - $edit.textContent = 'Edit this page'; - - let href = 'https://github.com/algolia/instantsearch.js/edit/v2/'; - const doc = 'docgen/src'; - const api = 'packages/react-instantsearch/src'; - - let pathname = document.location.pathname.replace( - '/instantsearch.js/react', - '', - ); - - if (/^\/(?:widgets|connectors)\/.+/.test(pathname)) { - href += `${api}${pathname.replace('.html', '.js')}`; - if (pathname === '/widgets/InstantSearch.html') { - href = href.replace('/widgets/', '/core/'); - } - } else { - if (/\/$/.test(pathname)) pathname += 'index.html'; - href += `${doc}${pathname.replace('.html', '.md')}`; - } - - pathname = pathname.replace('.html', '.md'); - $edit.href = href; - document.querySelector('.documentation-container').appendChild($edit); -} diff --git a/docgen/assets/js/header.js b/docgen/assets/js/header.js deleted file mode 100644 index 8b140747d4..0000000000 --- a/docgen/assets/js/header.js +++ /dev/null @@ -1,171 +0,0 @@ -export default function initHeader() { - const cmSearch = function () { - const searchIcon = document.querySelector('#search'); - const cancelIcon = document.querySelector('#cancel'); - const searchContainer = document.querySelector('.cm-search__input'); - const searchInput = document.querySelector('#searchbox'); - - function openSearchInput () { - searchContainer.classList.add('open'); - searchInput.focus(); - } - - function closeSearchInput () { - searchContainer.classList.remove('open'); - } - - function emptySearchInput () { - if (searchInput.value !== '') { - searchInput.value = ''; - } else { - closeSearchInput(); - } - } - - searchIcon.addEventListener('click', openSearchInput); - cancelIcon.addEventListener('click', emptySearchInput); - - window.onresize = function () { - emptySearchInput(); - closeSearchInput(); - }; - - return cmSearch; - }; - - const toggleMobileMenu = function(args) { - const trigger = args.trigger || '#open-menu'; - let opened = false; - const target = args.target || '.cm-navigation__menu'; - const openedClass = args.openedClass || 'opened'; - - document.querySelector(trigger).addEventListener('click', toggleMenu); - - function toggleMenu() { - /* eslint-disable no-undef */ - docsearch({ - apiKey: '5cb6763f264e31381e18639a1147634c', - indexName: 'react-instantsearch', - inputSelector: '#mobile-searchbox', - debug: true, - }); - - if (document.body.clientWidth < 768) { - if (opened === false) { - opened = true; - document.querySelector('#menu-wrapper').classList.add(openedClass); - } else { - opened = false; - document.querySelector('#menu-wrapper').classList.remove(openedClass); - } - } else if (opened === false) { - opened = true; - document.querySelector(target).classList.add(openedClass); - } else { - opened = false; - document.querySelector(target).classList.remove(openedClass); - } - - const cancelIconMobile = document.querySelector('#cancel-mobile'); - cancelIconMobile.addEventListener('click', mobileSearchBla); - - function mobileSearchBla() { - document.querySelector('#searchbox-mobile').value = ''; - } - } - }; - - function wrapMenuOnMobile() { - const container = document.querySelector('.cm-navigation'); - const wrapper = document.createElement('div'); - wrapper.id = 'menu-wrapper'; - wrapper.classList.add('cm-navigation__menu'); - wrapper.classList.add('mobile-navigation-wrapper'); - const innerMenu = document.querySelector('.cm-navigation__menu').innerHTML; - - if (!document.getElementById('menu-wrapper')) { - wrapper.innerHTML = innerMenu; - - container.appendChild(wrapper); - setTimeout(() => { - document.querySelector('#menu-wrapper .cm-menu__list:first-of-type').style.display = 'none'; - const links = document.querySelectorAll('#menu-wrapper a'); - const linksArray = []; - let linksTpl = ''; - const inm = document.querySelector('.mobile-navigation-wrapper input'); - const searchButton = document.querySelector('.mobile-navigation-wrapper button#search'); - const cancelButton = document.querySelector('.mobile-navigation-wrapper button#cancel'); - inm.id = 'mobile-searchbox'; - searchButton.id = 'search-mobile'; - cancelButton.id = 'cancel-mobile'; - - links.forEach(e => { - if (e.getAttribute('data-link')) { - linksArray.push({ - link: e.href, - name: e.textContent, - }); - } - }); - - linksArray.forEach(e => { - linksTpl += `
  • ${e.name}
  • `; - }); - wrapper.innerHTML += ``; - }); - } - } - - function displayDropdown() { - let active = false; - const trigger = document.querySelector('.cm-navigation__brands--community'); - document.querySelector('body').addEventListener('click', () => { - if (active) { - toggle(); - } - }); - - trigger.addEventListener('click', e => { - e.stopPropagation(); - e.preventDefault(); - toggle(); - }); - - function toggle() { - active = !active; - trigger.classList.toggle('dropdownActive'); - } - } - - // If the user type :"s" or "/", open the searchbox - function catchCmdF() { - document.addEventListener('keyup', maybeOpenSearchBox); - - function maybeOpenSearchBox(e) { - if (e.target.tagName !== 'INPUT' && e.keyCode === 83 || e.keyCode === 191) { - document.querySelector('.cm-search__input').classList.add('open'); - document.querySelector('#searchbox').focus(); - } else if (e.keyCode === 27) { - document.querySelector('.cm-search__input').classList.remove('open'); - document.querySelector('#searchbox').blur(); - } - } - } - - window.addEventListener('DOMContentLoaded', () => { - cmSearch(); - toggleMobileMenu({ - trigger: '#open-menu', - }); - - wrapMenuOnMobile(); - displayDropdown(); - catchCmdF(); - }); - - window.addEventListener('resize', () => { - if (document.body.clientWidth < 768) { - wrapMenuOnMobile(); - } - }); -} diff --git a/docgen/assets/js/main.js b/docgen/assets/js/main.js deleted file mode 100644 index 0c725fa350..0000000000 --- a/docgen/assets/js/main.js +++ /dev/null @@ -1,22 +0,0 @@ -import sidebar from './sidebar.js'; -import header from './header.js'; -import communityProjects from './communityProjects.js'; -import dropdowns from './dropdowns.js'; -import './editThisPage.js'; -import activateClipboard from './activateClipboard.js'; - -const container = document.querySelector('.documentation-container'); -const sidebarContainer = document.querySelector('.sidebar'); - -if (sidebarContainer) { - sidebar({ - headersContainer: container, - sidebarContainer, - headerStartLevel: 2, - }); -} - -header(); -communityProjects(); -dropdowns(); -activateClipboard([...document.querySelectorAll('.code-sample')]); diff --git a/docgen/assets/js/sidebar.js b/docgen/assets/js/sidebar.js deleted file mode 100644 index 2a9d8531c0..0000000000 --- a/docgen/assets/js/sidebar.js +++ /dev/null @@ -1,140 +0,0 @@ -export default function sidebar(options) { - const {headersContainer, sidebarContainer} = options; - - const list = document.createElement('ul'); - list.classList.add('no-mobile'); - - sidebarContainer.appendChild(list); - if (sidebarContainer.firstChild.classList.contains('sidebar-navScroll')) { - sidebarFollowScroll(sidebarContainer.firstChild); - } - activeLinks(sidebarContainer); - scrollSpy(sidebarContainer, headersContainer); -} - -function sidebarFollowScroll(sidebarContainer) { - const linksContainer = sidebarContainer.querySelector('ul'); - const {height, navHeight, footerHeight, menuHeight, sidebarTop, titleHeight} = - getPositionsKeyElements(sidebarContainer); - const positionSidebar = () => { - const currentScroll = window.pageYOffset; - if (currentScroll > sidebarTop - navHeight) { - const fold = height - footerHeight - menuHeight - navHeight; - if (currentScroll > fold) { - sidebarContainer.style.top = `${fold - currentScroll + navHeight}px`; - } else { - sidebarContainer.style.top = null; - } - sidebarContainer.classList.add('fixed'); - linksContainer.style.maxHeight = `calc(100vh - ${titleHeight + navHeight}px)`; - } else { - sidebarContainer.classList.remove('fixed'); - linksContainer.style.maxHeight = ''; - } - }; - - window.addEventListener('load', positionSidebar); - document.addEventListener('DOMContentLoaded', positionSidebar); - document.addEventListener('scroll', positionSidebar); -} - -function scrollSpy(sidebarContainer, headersContainer) { - const headers = [...headersContainer.querySelectorAll('h2')]; - - const setActiveSidebarLink = header => { - [...sidebarContainer.querySelectorAll('a')].forEach(item => { - const currentHref = item.getAttribute('href'); - const anchorToFind = `#${header.getAttribute('id')}`; - const isCurrentHeader = - currentHref.indexOf(anchorToFind) > 0 && - currentHref.indexOf(anchorToFind) === - currentHref.length - anchorToFind.length; - if (isCurrentHeader) { - item.classList.add('active'); - } else { - item.classList.remove('active'); - } - }); - }; - - const findActiveSidebarLink = () => { - const highestVisibleHeaders = headers - .map(header => ({element: header, rect: header.getBoundingClientRect()})) - .filter(({rect}) => - rect.top < window.innerHeight / 3 && rect.bottom < window.innerHeight - // top element relative viewport position should be at least 1/3 viewport - // and element should be in viewport - ) - // then we take the closest to this position as reference - .sort((header1, header2) => Math.abs(header1.rect.top) < Math.abs(header2.rect.top) ? -1 : 1); - - if (headers[0] && highestVisibleHeaders.length === 0) { - setActiveSidebarLink(headers[0]); - return; - } - - if (highestVisibleHeaders[0]) { - setActiveSidebarLink(highestVisibleHeaders[0].element); - } - }; - - findActiveSidebarLink(); - window.addEventListener('load', findActiveSidebarLink); - document.addEventListener('DOMContentLoaded', findActiveSidebarLink); - document.addEventListener('scroll', findActiveSidebarLink); -} - -// The Following code is used to set active items -// On the documentation sidebar depending on the -// clicked item -function activeLinks(sidebarContainer) { - const linksContainer = sidebarContainer.querySelector('ul'); - - linksContainer.addEventListener('click', e => { - if (e.target.tagName === 'A') { - [...linksContainer.querySelectorAll('a')].forEach(item => item.classList.remove('active')); - e.target.classList.add('active'); - } - }); -} -// The Following function will make the '.sidebar-opener' -// clickable and it will open/close the sidebar on the -// documentations - -function toggleDocumentationSidebar() { - const sidebarNav = document.querySelector('nav.sidebar'); - const trigger = document.querySelector('.sidebar-opener'); - - function init() { - const bodySize = document.body.clientWidth; - if (bodySize <= 960 && sidebarNav) { - trigger.addEventListener('click', () => { - sidebarNav.classList.toggle('Showed'); - trigger.classList.toggle('Showed'); - }); - } - } - init(); -} -toggleDocumentationSidebar(); - -window.addEventListener('resize', () => { - toggleDocumentationSidebar(); -}); - -function getPositionsKeyElements($sidebar) { - const sidebarBBox = $sidebar.getBoundingClientRect(); - const title = $sidebar.querySelector('.sidebar-header'); - const bodyBBox = document.body.getBoundingClientRect(); - const sidebarTop = sidebarBBox.top - bodyBBox.top; - const footer = document.querySelector('.ac-footer'); - const navigation = document.querySelector('.cm-navigation'); - const menu = document.querySelector('.sidebar-container'); - const height = document.querySelector('html').getBoundingClientRect().height; - const navHeight = navigation.offsetHeight; - const footerHeight = footer.offsetHeight; - const menuHeight = menu.offsetHeight; - const titleHeight = title.offsetHeight; - - return {sidebarTop, height, navHeight, footerHeight, menuHeight, titleHeight}; -} diff --git a/docgen/build.js b/docgen/build.js deleted file mode 100644 index b9fafbd74e..0000000000 --- a/docgen/build.js +++ /dev/null @@ -1,13 +0,0 @@ -import builder from './builder.js'; -import revAssets from './plugins/rev-assets.js'; -import {build as middlewares} from './middlewares'; - -builder({ - middlewares, -}, err => { - if (err) { - throw err; - } - - revAssets(); -}); diff --git a/docgen/builder.js b/docgen/builder.js deleted file mode 100644 index e6dc712d1d..0000000000 --- a/docgen/builder.js +++ /dev/null @@ -1,22 +0,0 @@ -/* eslint-disable no-console */ - -import metalsmith from 'metalsmith'; -import config from './config.js'; - -export default function builder({ - clean = true, - middlewares, -}, cb) { - console.time('metalsmith build'); - // default source directory is join(__dirname, 'src'); - // https://github.com/metalsmith/metalsmith#sourcepath - metalsmith(__dirname) - .metadata(config) - .clean(clean) - .destination(config.docsDist) - .use(middlewares) - .build(err => { - console.timeEnd('metalsmith build'); - cb(err); - }); -} diff --git a/docgen/config.js b/docgen/config.js deleted file mode 100644 index c63f1de667..0000000000 --- a/docgen/config.js +++ /dev/null @@ -1,15 +0,0 @@ -import pkg from '../package.json'; -import {rootPath} from './path'; - -const configs = { - production: { - docsDist: rootPath('docs-production'), - publicPath: '/instantsearch.js/', - }, - development: { - docsDist: rootPath('docs'), - publicPath: '/', - }, -}; - -export default {...configs[process.env.NODE_ENV], pkg}; diff --git a/docgen/devServer.js b/docgen/devServer.js deleted file mode 100644 index 921c376332..0000000000 --- a/docgen/devServer.js +++ /dev/null @@ -1,44 +0,0 @@ -// this file will start a browsersync server that will serve /docs -// it will automatically inject any css -// it will also use webpack and watch/build/hot reload - -import webpack from 'webpack'; -import browserSync from 'browser-sync'; -import webpackConfig from './webpack.config.start.babel'; -import webpackDevMiddleware from 'webpack-dev-middleware'; -import webpackHotMiddleware from 'webpack-hot-middleware'; -import compression from 'compression'; -import config from './config.js'; - -export default function() { - const compiler = webpack(webpackConfig); - const bs = browserSync.create(); - bs.init({ - server: config.docsDist, - open: false, - files: `${config.docsDist}/**/*`, - watchOptions: { - ignored: [ - /\.js$/, // any change to a JavaScript file must be ignored, webpack handles it - /\.css\.map$/, // no need to reload the whole page for CSS source maps - ], - awaitWriteFinish: { - stabilityThreshold: 150, // wait 150ms for the filesize to be stable (= write finished) - }, - }, - notify: { - styles: { - bottom: 0, - top: 'auto', - }, - }, - middleware: [ - compression(), - webpackDevMiddleware(compiler, { - noInfo: true, - publicPath: webpackConfig.output.publicPath, - }), - webpackHotMiddleware(compiler), - ], - }); -} diff --git a/docgen/layouts/archetypes/content-with-menu.pug b/docgen/layouts/archetypes/content-with-menu.pug deleted file mode 100644 index c96eb3de43..0000000000 --- a/docgen/layouts/archetypes/content-with-menu.pug +++ /dev/null @@ -1,15 +0,0 @@ -include ../common/meta.pug -body.documentation - include ../common/header.pug - include ../common/hero.pug - - section.documentation-section - a.sidebar-opener - .container - nav.sidebar - block navigation - .documentation-container - block content - include ../common/footer.pug - script(src=webpack.assets['js/common.js']) - script(src=webpack.assets['js/main.js']) diff --git a/docgen/layouts/archetypes/single-column-formatted.pug b/docgen/layouts/archetypes/single-column-formatted.pug deleted file mode 100644 index c3319770f6..0000000000 --- a/docgen/layouts/archetypes/single-column-formatted.pug +++ /dev/null @@ -1,11 +0,0 @@ -include ../common/meta.pug -body.documentation - include ../common/header.pug - include ../common/hero.pug - - section.examples-section - .container - block content - include ../common/footer.pug - script(src=webpack.assets['js/common.js']) - script(src=webpack.assets['js/main.js']) diff --git a/docgen/layouts/archetypes/single-column.pug b/docgen/layouts/archetypes/single-column.pug deleted file mode 100644 index 1a623b6709..0000000000 --- a/docgen/layouts/archetypes/single-column.pug +++ /dev/null @@ -1,10 +0,0 @@ -include ../common/meta.pug -body - include ../common/header.pug - include ../common/hero.pug - - div - block content - include ../common/footer.pug - script(src=webpack.assets['js/common.js']) - script(src=webpack.assets['js/main.js']) diff --git a/docgen/layouts/common/footer.pug b/docgen/layouts/common/footer.pug deleted file mode 100644 index f2c976654d..0000000000 --- a/docgen/layouts/common/footer.pug +++ /dev/null @@ -1,133 +0,0 @@ -footer.ac-footer - .ac-footer-container - p.ac-footer-links - | Code licensed under - a.ac-footer-link-item(href='https://github.com/raw/algolia/instantsearch.js/develop/LICENSE') MIT - br - a.ac-footer-link-item(href='https://github.com/algolia/instantsearch.js/tree/v2') GitHub - a.ac-footer-link-item(href='https://github.com/algolia/instantsearch.js/issues') issues - a.ac-footer-link-item(href = 'https://www.algolia.com/policies/privacy') Privacy policy - .ac-footer-container.ac-footer-brand - p This project is part of - img.ac-footer-brand-icon(src="images/community-badge.svg") - figure - img.ac-footer-brand-logo(src='https://res.cloudinary.com/hilnmyskv/image/upload/v1484219849/algolia-community-logo-words-darkbg.svg') - figcaption Algolia Community - a.ac-footer-btn.ac-footer-btn-cta(href='https://community.algolia.com/') See More - span.ac-icon.ac-icon-love-dark - p.ac-footer-version Latest version: #{pkg.version} - .ac-footer-actions - .footer-container - p Build unique search experiences with Algolia - a.ac-footer-btn.ac-footer-btn-ghost-grey(href='https://www.algolia.com/why?utm_medium=social-owned&utm_source=react%20instantsearch%20website&utm_campaign=homepage&utm_term=why') - | See Why - span.ac-icon-triangle - a.ac-footer-btn.ac-footer-btn-ghost-blue(href='https://www.algolia.com/users/sign_up?utm_medium=social-owned&utm_source=react%20instantsearch%20website&utm_campaign=homepage&utm_term=get_started') Get Started For Free - -script(src="https://cdn.jsdelivr.net/g/jquery@3(jquery.slim.min.js),docsearch.js@2,underscorejs@1") -script. - docsearch({ - apiKey: '5cb6763f264e31381e18639a1147634c', - indexName: 'react-instantsearch', - inputSelector: '#searchbox', - debug: true - }); - window.twttr = (function (d, s, id) { - var js, fjs = d.getElementsByTagName(s)[0], - t = window.twttr || {}; - if (d.getElementById(id)) return t; - js = d.createElement(s); - js.id = id; - js.src = "https://platform.twitter.com/widgets.js"; - fjs.parentNode.insertBefore(js, fjs); - - t._e = []; - t.ready = function (f) { - t._e.push(f); - }; - - return t; - }(document, "script", "twitter-wjs")); - -if navPath === 'index.html' - script. - $(function () { - - var ACTIONS = { - PREV: 'PREV', - NEXT: 'NEXT' - }; - var $prevBtn = $('.press__tweet__arrow--prev'); - var $nextBtn = $('.press__tweet__arrow--next'); - var $tweets = $('.press__tweet'); - var $tweetsContainer = $('.press__tweets'); - - var currentIndex = Math.floor($tweets.length / 2); - function setCurrentTweet(action) { - switch (action) { - case ACTIONS.PREV: - if (currentIndex <= $tweets.length) { - currentIndex--; - } - break; - case ACTIONS.NEXT: - if (currentIndex >= 0) { - currentIndex++; - } - break; - default: - currentIndex = action; - } - centerTweets(action); - } - function centerTweets() { - var action = arguments.length <= 0 || arguments[0] === undefined ? ACTIONS.PREV : arguments[0]; - var $centerElement = $($tweets[currentIndex]); - var tweetSize = $(_.first($tweets)).width(); - var _$centerElement$posit = $centerElement.position(); - var left = _$centerElement$posit.left; - var containerSize = $tweetsContainer.width(); - var gap = action === ACTIONS.NEXT ? tweetSize / 3 : tweetSize - 325; - var offset = -(containerSize / 2) + left + gap; - $tweets.removeClass('press__tweet--current'); - $centerElement.addClass('press__tweet--current'); - removeClickableTweets(); - $(_.first($tweetsContainer)).css('transform', 'translateX(' + (offset > 0 ? '-' + (offset + 150) : 0) + 'px)'); - } - function loadTweets() { - var promises = []; - $tweets.each(function (index, tweet) { - var $tweet = $(tweet); - var tweetId = $tweet.attr('data-tweet-id'); - promises.push(twttr.widgets.createTweet(tweetId, tweet, { - cards: 'hidden', - conversation: 'none' - })); - }); - return promises; - } - function removeLoadingClass() { - $tweetsContainer.removeClass('press__tweets--loading'); - } - function bindEvents() { - $prevBtn.on('click', _.partial(setCurrentTweet, ACTIONS.PREV)); - $nextBtn.on('click', _.partial(setCurrentTweet, ACTIONS.NEXT)); - $(window).on('resize', _.debounce(centerTweets, 100)); - } - - function showTab(e) { - window.location.hash = e.target.hash; - window.scrollTo(0, 0); - centerTweets(); - } - - function removeClickableTweets() { - $tweets.find('iframe').contents().find('.EmbeddedTweet').removeClass('js-clickToOpenTarget'); - $tweets.nextAll('.press__tweet--current').find('iframe').contents().find('.EmbeddedTweet').addClass('js-clickToOpenTarget'); - } - twttr.ready(function () { - Promise.all(loadTweets()).then(removeLoadingClass).then(centerTweets).then(removeClickableTweets); - }); - bindEvents(); - }); -include ./marketing.pug diff --git a/docgen/layouts/common/header.pug b/docgen/layouts/common/header.pug deleted file mode 100644 index 9e78278ded..0000000000 --- a/docgen/layouts/common/header.pug +++ /dev/null @@ -1,72 +0,0 @@ -nav.cm-navigation - .cm-navigation__brands - .cm-navigation__brands--algolia - a#algoliaLogo(href='https://algolia.com') - img(src="images/logo-algolia.svg", width="100", alt="Algolia logo") - .cm-navigation__brands--community - a.cm-badge.no-mobile(href='https://community.algolia.com', title='Click to go to community, hover to access latest community projects') - img(src="images/logo-community.svg") - | Community - .cm-navigation__brands--project - a(href="") React InstantSearch - .cm-navigation__dropdown-holder - .cm-navigation__brands-dropdown - .cm-navigation__brands-dropdown__container - div(data-inject-community='') - .cm-navigation__brands-dropdown__footer - a(href="https://community.algolia.com") - img(src="https://res.cloudinary.com/hilnmyskv/image/upload/v1484219849/algolia-community-logo-words.svg", class="community-logo") - .cm-navigation__menu-mobile-trigger - button#open-menu - img(src="images/menu-icon.svg") - .cm-navigation__menu - .cm-menu__search - .cm-menu__search--holder - .cm-search__input - input#searchbox(placeholder='Search something..', type='search') - button#search - svg - use(xlink:href='#search-icon') - button#cancel - svg - use(xlink:href='#cancel-icon') - ul.cm-menu__list - li.cm-menu__list__item(class=h.maybeActive(navPath, "Getting_started.html")) - a(href="Getting_started.html", data-link = 'true') Getting started - li.cm-menu__list__item(class=h.maybeActive(navPath, "guide/")) - a(href="guide/", data-link = 'true') Guide - li.cm-menu__list__item(class=h.maybeActive(navPath, ["widgets/", ["connectors/"]])) - a(aria-controls='dropdown-1', aria-expanded='false', data-toggle-dropdown='dropdown-1', class="dropdown-toggler") API - ul#dropdown-1.simple-dropdown(role='tree', tabindex='-1') - li - a(href="widgets/InstantSearch.html", role='treeitem', data-link = 'true') #{''} - li - a(href="widgets/", role='treeitem', data-link = 'true') Widgets - li - a(href="connectors/", role='treeitem', data-link = 'true') Connectors - li.cm-menu__list__item(class=h.maybeActive(navPath, "examples/")) - a(aria-controls='dropdown-2', aria-expanded='false', data-toggle-dropdown='dropdown-2', class="dropdown-toggler") Examples - ul#dropdown-2.simple-dropdown(role='tree', tabindex='-1') - li - a(href="examples/Demos.html", role='treeitem', data-link = 'true') Demos - li - a(href="examples/Recipes.html", role='treeitem', data-link = 'true') Recipes - - li.cm-menu__list__item - a(href='https://github.com/algolia/instantsearch.js/tree/v2', data-link = 'true') - figure.github-icon - svg(width='40px', height='39px') - use(xlink:href='#github-icon') - figcaption - | GitHub - -svg(style='display: none') - defs - symbol#search-icon(viewbox='0 0 15 15') - path(d='M10.052 10.88c-1.1.91-2.483 1.406-3.91 1.403C2.75 12.283 0 9.533 0 6.14 0 2.75 2.75 0 6.142 0c3.392 0 6.14 2.75 6.14 6.142 0 1.485-.526 2.847-1.403 3.91l3.95 3.95c.227.227.228.596-.002.826-.228.227-.597.228-.826 0l-3.95-3.95zm-3.91.234c2.745 0 4.972-2.227 4.972-4.972 0-2.747-2.227-4.972-4.972-4.972-2.747 0-4.972 2.225-4.972 4.972 0 2.745 2.225 4.972 4.972 4.972z', fill-rule='evenodd') - - symbol#cancel-icon(viewbox='0 0 13 13') - path(d='M5.274 6.5L.614 1.84 0 1.225 1.226 0l.613.613 4.66 4.66 4.66-4.66.614-.613L13 1.226l-.613.613-4.66 4.66 4.66 4.66.613.614L11.774 13l-.613-.613-4.66-4.66-4.66 4.66-.614.613L0 11.774l.613-.613', fill-rule='evenodd') - - symbol#github-icon(viewbox='0 0 40 39') - path#Shape(d='M19.998,0 C8.955,0 0,8.954 0,20 C0,28.837 5.73,36.333 13.678,38.977 C14.678,39.161 15.043,38.544 15.043,38.013 C15.043,37.538 15.026,36.281 15.016,34.613 C9.453,35.82 8.28,31.93 8.28,31.93 C7.37,29.62 6.058,29.005 6.058,29.005 C4.242,27.765 6.195,27.79 6.195,27.79 C8.203,27.93 9.259,29.85 9.259,29.85 C11.042,32.907 13.939,32.024 15.079,31.512 C15.259,30.222 15.777,29.339 16.349,28.839 C11.907,28.334 7.239,26.617 7.239,18.954 C7.239,16.771 8.019,14.984 9.297,13.587 C9.091,13.081 8.404,11.047 9.493,8.294 C9.493,8.294 11.173,7.756 14.993,10.344 C16.624924,9.89926425 18.308563,9.672627 20,9.67 C21.7,9.68 23.41,9.9 25.008,10.345 C28.826,7.757 30.502,8.295 30.502,8.295 C31.592,11.048 30.907,13.082 30.702,13.588 C31.984,14.985 32.757,16.772 32.757,18.955 C32.757,26.638 28.081,28.329 23.627,28.823 C24.343,29.441 24.983,30.661 24.983,32.526 C24.983,35.201 24.958,37.358 24.958,38.013 C24.958,38.549 25.318,39.171 26.334,38.976 C34.274,36.326 40,28.836 40,20 C40,8.955 31.045,0 19.998,0') diff --git a/docgen/layouts/common/hero.pug b/docgen/layouts/common/hero.pug deleted file mode 100644 index c7af47ae1f..0000000000 --- a/docgen/layouts/common/hero.pug +++ /dev/null @@ -1,20 +0,0 @@ -section.hero-section.shrink - .container - .hero-container - if navPath !== 'index.html' - .fl-left.article-title.doc-only - figure - img(src="images/react-instant-search-logo.svg", width="46") - figcaption - if mainTitle - h1 - | #{mainTitle + ' > '} - span=title - else - h1=title - else - .hero-content - h1.project-title="React InstantSearch" - h2.tagline. - ⚡ Lightning-fast search for React and React Native apps - a(href="Getting_started.html", class="btn btn-cta btn-fat-uc") Get Started diff --git a/docgen/layouts/common/marketing.pug b/docgen/layouts/common/marketing.pug deleted file mode 100644 index de2460ecc7..0000000000 --- a/docgen/layouts/common/marketing.pug +++ /dev/null @@ -1,82 +0,0 @@ -// GA -script. - (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ - (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), - m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) - })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); - ga('create', 'UA-32446386-12', 'auto'); - ga('send', 'pageview'); -// Google Tag Manager -noscript - iframe(src='//www.googletagmanager.com/ns.html?id=GTM-N8JP8G', height='0', width='0', style='display:none;visibility:hidden') -script. - (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': - new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], - j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= - '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); - })(window,document,'script','dataLayer','GTM-N8JP8G'); -// Twitter -script. - !function(e,t,n,s,u,a){e.twq||(s=e.twq=function(){s.exe?s.exe.apply(s,arguments):s.queue.push(arguments); - },s.version='1.1',s.queue=[],u=t.createElement(n),u.async=!0,u.src='//static.ads-twitter.com/uwt.js', - a=t.getElementsByTagName(n)[0],a.parentNode.insertBefore(u,a))}(window,document,'script'); - twq('init','nuosw'); - twq('track','PageView'); -// Facebook -script. - !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod? - n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n; - n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0; - t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, - document,'script','//connect.facebook.net/en_US/fbevents.js'); - fbq('init', '1654938174769952'); - fbq('track', "PageView"); -noscript - img(height='1', width='1', style='display:none', alt='', src='https://www.facebook.com/tr?id=1654938174769952&ev=PageView&noscript=1') -// Addroll -script(type='text/javascript'). - adroll_adv_id = "TGR7R4XSGVGYVPX4LQBDFQ"; - adroll_pix_id = "YQNWNHGUUBD2JMY7BVOBWM"; - // adroll_email = "username@example.com"; // OPTIONAL: provide email to improve user identification - (function () { - var _onload = function(){ - if (document.readyState && !/loaded|complete/.test(document.readyState)){setTimeout(_onload, 10);return} - if (!window.__adroll_loaded){__adroll_loaded=true;setTimeout(_onload, 50);return} - var scr = document.createElement("script"); - var host = (("https:" == document.location.protocol) ? "https://s.adroll.com" : "http://a.adroll.com"); - scr.setAttribute('async', 'true'); - scr.type = "text/javascript"; - scr.src = host + "/j/roundtrip.js"; - ((document.getElementsByTagName('head') || [null])[0] || - document.getElementsByTagName('script')[0].parentNode).appendChild(scr); - }; - if (window.addEventListener) {window.addEventListener('load', _onload, false);} - else {window.attachEvent('onload', _onload)} - }()); -// Pardot -script(type='text/javascript'). - piAId = '140121'; - piCId = '1667'; - (function() { - function async_load(){ - var s = document.createElement('script'); s.type = 'text/javascript'; - s.src = ('https:' == document.location.protocol ? 'https://pi' : 'http://cdn') + '.pardot.com/pd.js'; - var c = document.getElementsByTagName('script')[0]; c.parentNode.insertBefore(s, c); - } - if(window.attachEvent) { window.attachEvent('onload', async_load); } - else { window.addEventListener('load', async_load, false); } - })(); -// KM -script(type='text/javascript'). - var _kmq = _kmq || []; - var _kmk = _kmk || 'cb5a3adb92e8915a37a36ba1a50f2ce4fae4a1b9'; - function _kms(u){ - setTimeout(function(){ - var d = document, f = d.getElementsByTagName('script')[0], - s = d.createElement('script'); - s.type = 'text/javascript'; s.async = true; s.src = u; - f.parentNode.insertBefore(s, f); - }, 1); - } - _kms('//i.kissmetrics.com/i.js'); - _kms('//scripts.kissmetrics.com/' + _kmk + '.2.js'); diff --git a/docgen/layouts/common/meta.pug b/docgen/layouts/common/meta.pug deleted file mode 100644 index 5f1a5734cb..0000000000 --- a/docgen/layouts/common/meta.pug +++ /dev/null @@ -1,26 +0,0 @@ -doctype html -html - head - base(href=publicPath) - meta(content='IE=edge', http-equiv='X-UA-Compatible') - meta(charset='utf-8') - meta(content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no', name='viewport') - link(rel='icon', href="assets/img/react-instant-favicon.png") - meta(content='Add instant-search and autocomplete to your React and React Native apps with a few lines of code. Powered by Algolia.', name='description') - // / Twitter card - meta(content='summary_large_image', name='twitter:card') - meta(content='https://community.algolia.com/instantsearch.js/react/', name='twitter:site') - meta(content='Algolia', name='twitter:creator') - meta(content='React InstantSearch', name='twitter:title') - meta(content='⚡ Lightning-fast search for React and React Native apps', name='twitter:description') - meta(content='http://res.cloudinary.com/hilnmyskv/image/upload/v1481193392/meta-instant-search-react_hrf6st.jpg', name='twitter:image') - // / OG meta - meta(content='https://community.algolia.com/instantsearch.js/react/', property='og:url') - meta(content='React InstantSearch', property='og:title') - meta(content='http://res.cloudinary.com/hilnmyskv/image/upload/v1481193392/meta-instant-search-react_hrf6st.jpg', property='og:image') - meta(content='website', property='og:type') - meta(content='⚡ Lightning-fast search for React and React Native apps', property='og:description') - meta(content='React InstantSearch', property='og:site_name') - - title React InstantSearch | #{title} - link(rel='stylesheet', href="stylesheets/index.css") diff --git a/docgen/layouts/connector.pug b/docgen/layouts/connector.pug deleted file mode 100644 index a38417fde7..0000000000 --- a/docgen/layouts/connector.pug +++ /dev/null @@ -1,73 +0,0 @@ -extends archetypes/content-with-menu.pug - -include mixins/nav.pug - -block navigation - +nav(navPath, navigation, mainTitle || title, withHeadings && headings || []) - -block content - h2#description Description - a.anchor(href=`${navPath}#description`) - div!=h.markdown(description) - h2#proptypes Exposed props - a.anchor(href=`${navPath}#proptypes`) - if proptype - p Props exposed on the connected component: - table.api.proptypes - tbody - each type in proptype - tr.api-entry-values - td.api-entry-name - div.api-entry(id=`default-props-entry-${name}-${type.name}`) - =`${type.name}${type.isRequired ? '*' : ''}` - a.anchor(href=`${navPath}#default-props-entry-${name}-${type.name}`) - td.api-entry-type - span type: - = ' ' - code=type.type - td.api-entry-default-value - if type.defaultValue - span default: - = ' ' - code=type.defaultValue - else - span   - tr.api-entry-description - td(colspan=3)!=h.markdown(type.description) - else - p This connector does not expose external props. - h2#provided-props Provided props - a.anchor(href=`${navPath}#provided-props`) - if providedproptype - p These are the props that the wrapped Component will receive. - table.api.proptypes - tbody - each type in providedproptype - tr.api-entry-values - td.api-entry-name - div.api-entry(id=`default-props-entry-${name}-${type.name}`)=type.name - a.anchor(href=`${navPath}#default-props-entry-${name}-${type.name}`) - td.api-entry-type - span type: - = ' ' - code=type.type - td.api-entry-default-value - if type.defaultValue - span default: - = ' ' - code=type.defaultValue - else - span   - tr.api-entry-description - td(colspan=3)!=h.markdown(type.description) - else - p This connector does not provided props to its wrapped component. - if requirements - h2#requirements Requirements - a.anchor(href=`${navPath}#requirements`) - div!=h.markdown(requirements) - if examples - h2#example Example - a.anchor(href=`${navPath}#example`) - each example in examples - p!=h.highlight(example, {lang: 'jsx'}) diff --git a/docgen/layouts/example.pug b/docgen/layouts/example.pug deleted file mode 100644 index 8ba9e71ecc..0000000000 --- a/docgen/layouts/example.pug +++ /dev/null @@ -1,28 +0,0 @@ -doctype html -html - head - base(href=publicPath) - meta(content='IE=edge', http-equiv='X-UA-Compatible') - meta(charset='utf-8') - meta(content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no', name='viewport') - link(rel='icon', href="assets/favicon.png") - title React InstantSearch | Examples > #{title} - if stylesheets - for sheet in stylesheets - link(rel="stylesheet" href=sheet) - link(rel="stylesheet" href=`examples/${name}/style.css`) - link(rel='stylesheet', href="stylesheets/header.css") - body.example - include ./common/header.pug - .content!=contents - script(src=webpack.assets['js/common.js']) - script(src=webpack.assets['js/main.js']) - script(src=webpack.assets[`examples/${name}/index.js`]) - script(src="https://cdn.jsdelivr.net/g/docsearch.js@2") - script. - docsearch({ - apiKey: '5cb6763f264e31381e18639a1147634c', - indexName: 'react-instantsearch', - inputSelector: '#searchbox', - debug: true - }); diff --git a/docgen/layouts/examples.pug b/docgen/layouts/examples.pug deleted file mode 100644 index f86d7ef53f..0000000000 --- a/docgen/layouts/examples.pug +++ /dev/null @@ -1,16 +0,0 @@ -extends archetypes/single-column-formatted.pug - -block content - .content!=contents - - - var values = [] - if examples - - values = examples - div(class="examples-container") - each val in values - div.example-tile - h2=val.title - a(href=`${examplesEndpoint}/${val.id}`) - figure - img(src=`images/examples/${val.id}.png`) - figcaption=examplesCTA diff --git a/docgen/layouts/index.pug b/docgen/layouts/index.pug deleted file mode 100644 index 219cd98877..0000000000 --- a/docgen/layouts/index.pug +++ /dev/null @@ -1,372 +0,0 @@ -extends archetypes/single-column.pug - -block content - - var tweets =['816229504318406656','827061841457213441','820023150712946688','808725705978740736','830148696163631105']; - section.is-section__intro - div.illu-holder - img(src='images/Mockup.png', - srcset='images/Mockup.png, images/Mockup@2x.png 2000w', - alt='Mockup of Algolia experience', - class='intro-illu') - - section.is-section__widgets - .container - figure.widgets-illu - img(src='images/reactis-logo-inline-expanded.svg') - h2.title <InstantSearch> - div.section__graphic - img(src="images/components.png") - div.section__description - figure - svg.desc-icon - use(xlink:href="#pen-icon") - h3.title Built with design in mind - p Our search widgets feature slick design by default and benefit from our experience building thousands of search interfaces. - a(href="Getting_started.html", class="light-link") Get started > - - section.is-section__code-samples - div.section__description.text-right - figure - svg.desc-icon - use(xlink:href="#bulb-icon") - h3.title Intuitive API - p We crunched feedback from hundreds of users of #[a(href="https://community.algolia.com/instantsearch.js/") instantsearch.js] into building React InstantSearch API. - a(href="guide/", class="light-link") Read the guide  > - div.section__graphic.no-desktop - img(src="images/code.png") - div.section__graphic.no-mobile - pre(class="al-snippet" data-snippet-theme="dark") - code. - const SearchBox = connectSearchBox( - ({query, refine}) => - <div className="searchbox-container"> - <div className="input-group"> - <input type="text" - value={query} - onChange={e => refine(e.target.value)} - className="form-control"/> - - <span className="input-group-btn"> - <button className="btn btn-default"><i className="fa fa-search"></i></button> - </span> - </div> - </div> - ); - - const RefinementListLinks = connectRefinementList(({items, refine, createURL}) => { - const itemComponents = items.map(item => - <div className={item.isRefined ? ' active' : ''} key={item.label}> - <a className="item" href={createURL(item.value)} onClick={e => { - e.preventDefault(); - refine(item.value); - }}> - <span> {item.label}</span> - <span className="badge pull-right">{item.count}</span> - </a> - </div> - ); - - section.is-section__community - .container - div.section__graphic - img(src="images/illu-mobile.svg", class="phone_illustration") - img(src="images/react-laptop-12.svg", class="computer_illustration") - ul.subtle-check-list - li - | react-native - svg - use(xlink:href='#check-icon') - li - | react-ui* - svg - use(xlink:href='#check-icon') - li - | react-router - svg - use(xlink:href='#check-icon') - - - div.section__description - figure - svg.desc-icon - use(xlink:href="#react-icon") - h3.title React-community ready - p Connectors provide a way to plug any existing code or React library to React InstantSearch and Algolia. - a(href="guide/Connectors.html", class="light-link") Connectors guide  > - - section.is-section__live - h2.title See it live - .container - ul.live__examples.cm-large-tiles - li.examples-item.tile - a(href="examples/e-commerce") - .tile-container - figure - img(src="images/e-commerce.svg") - h3.item-title E-commerce - span(class="light-link") See it live > - - li.examples-item.tile - a(href="examples/e-commerce-infinite") - .tile-container - figure - img(src="images/e-commerce-infinite.svg") - h3.item-title E-commerce & Infinite Hits - span(class="light-link") See it live > - - li.examples-item.tile - a(href="examples/material-ui") - .tile-container - figure - img(src="images/material.svg") - h3.item-title Material UI - span(class="light-link") See it live > - - li.examples-item.tile - a(href="examples/media") - .tile-container - figure - img(src="images/media.svg") - h3.item-title Media - span(class="light-link") See it live > - - li.examples-item.tile - a(href="examples/tourism") - .tile-container - figure - img(src="images/tourism.svg") - h3.item-title Tourism - span(class="light-link") See it live > - - li.examples-item.tile.muted - .tile-container - figure - img(src="images/more-icon.svg") - h3.item-title More to come - - section.is-section__twitter - h2.title What they say - - div - ul.press__tweets.press__tweets--loading.text-center - each val in tweets - li.press__tweet(data-tweet-id=val) - span.press__tweet__arrow.press__tweet__arrow--prev - Path 111 - span.press__tweet__arrow.press__tweet__arrow--next - Path 111 - - - section.is-section__features - .container - .cm--feature-list - .list-item - svg(viewbox='0 0 40 40') - use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#feat-icon-speed') - span Unparalleled speed - .list-item - svg(viewbox='0 0 40 40') - use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#feat-icon-indexing') - span Seamless indexing - .list-item - svg(viewbox='0 0 40 40') - use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#feat-icon-typo') - span Typo tolerance - .list-item - svg(viewbox='0 0 40 40') - use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#feat-icon-highlighting') - span Smart highlighting - .list-item - svg(viewbox='0 0 40 40') - use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#feat-icon-facets') - span Instant faceting - .list-item - svg(viewbox='0 0 40 40') - use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#feat-icon-sla') - span 99.99% SLA - .list-item - svg(viewbox='0 0 40 40') - use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#feat-icon-security') - span First class hosting & security - .list-item - svg(viewbox='0 0 40 40') - use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#feat-icon-analytics') - span Comprehensive analytics - .list-item.list-item_muted - a(href='https://algolia.com') - svg(width='35', height='40', viewbox='0 0 35 40', xmlns='http://www.w3.org/2000/svg') - path(d='M20.63 14.624l-2.422 8.572 7.798-4.27a8.925 8.925 0 0 0-5.376-4.302zm-19.136 8.75C1.494 32.554 8.944 40 18.138 40c9.194 0 16.645-7.445 16.645-16.627 0-9.182-7.45-16.628-16.645-16.628-9.193 0-16.644 7.446-16.644 16.628zm16.644-11.878c6.555 0 11.89 5.328 11.89 11.877 0 6.548-5.335 11.876-11.89 11.876-6.555 0-11.89-5.33-11.89-11.878 0-6.55 5.335-11.877 11.89-11.877zm5.745-6.807c.005-.067.02-.128.02-.194v-1.5A2.994 2.994 0 0 0 20.913 0h-5.23a2.993 2.993 0 0 0-2.986 2.998V4.47a19.298 19.298 0 0 1 11.185.22zM5.63 7.62a2.982 2.982 0 0 0-4.227 0l-.528.53a3.006 3.006 0 0 0 0 4.24l.562.563a19.602 19.602 0 0 1 4.494-5.03l-.3-.303z', fill='#697782', fill-rule='evenodd') - span Learn more about Algolia - - section.is-section__marketing - .container - a(href="#", class="icon") - svg - use(xlink:href="#algolia-icon") - h2 Algolia is a leading provider of Search as a Service - h3 Join 2,000+ customers trusting us with their search - - ul.brands-list - li.brand - a(href="https://algolia.com/customers", alt="Algolia's customers") - img(src="images/mono-white_birchbox.svg") - li.brand - a(href="https://algolia.com/customers", alt="Algolia's customers") - img(src="images/mono-white_medium.svg") - li.brand - a(href="https://algolia.com/customers", alt="Algolia's customers") - img(src="images/mono-white_quicksilver.svg") - li.brand - a(href="https://algolia.com/customers", alt="Algolia's customers") - img(src="images/mono-white_periscope.svg") - li.brand - a(href="https://algolia.com/customers", alt="Algolia's customers") - img(src="images/mono-white_jadopado.svg") - li.brand - a(href="https://algolia.com/customers", alt="Algolia's customers") - img(src="images/mono-white_arcteryx.svg") - - section.is-section__footer - div.footer__community - .container - figure - svg.icon.icon-al - use(xlink:href="#algolia-icon") - svg.icon.icon-heart - use(xlink:href="#heart-icon") - svg.icon.icon-react - use(xlink:href="#react-icon") - h3 Join the community! - - ul - li Share your awesome projects - li Find useful tips & solutions - a(href="https://discourse.algolia.com/c/instantsearch", class="btn btn-ghost btn-ghost-blue") Join us on discourse > - - div.footer__call-to-action - .container - h2 React InstantSearch - a(href="Getting_started.html", class="btn btn-cta btn-ghost btn-black") Get started - a(href="guide/", class="btn btn-cta btn-ghost btn-ghost-white") Guide - - svg(style='display: none') - style. - .st0{fill:none;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;} - - defs - symbol#check-icon(viewbox="0 0 33 26") - path(d="M32.57872 2.63298L30.2617.31596c-.38617-.38617-1.01808-.38617-1.40425 0l-18.1851 18.20266-6.4947-6.49468c-.38616-.38617-1.01808-.38617-1.40425 0L.45638 14.34096c-.38617.38617-.38617 1.01808 0 1.40425l7.17926 7.17928 2.31702 2.31702c.38617.38616 1.01808.38616 1.40425 0l2.3346-2.29948 18.8872-18.9048c.38617-.38616.38617-1.01807 0-1.40424z" ,fill-rule="evenodd") - - symbol#heart-icon(viewbox="0 0 36 35") - path(d='M18 4.02C16.552 2.25 14.057.297 10.103.297 3.373.298 0 6.63 0 12.546c0 9.777 15.135 20.15 16.99 21.436a1.77 1.77 0 0 0 2.02 0C20.864 32.695 36 22.322 36 12.546 36 6.63 32.627.298 25.896.298c-3.953 0-6.448 1.954-7.896 3.72v.002z', fill-rule='evenodd') - - symbol#pen-icon(viewbox='0 0 100 100') - path.st0(d='M20.9 61.6l30.8-30.7L72 51.2 41.3 82m34.2-34.3L72 51.2 51.7 30.9l3.5-3.5') - path.st0(d='M55.2 27.4l3.5-3.5L79 44.2l-3.5 3.5') - path.st0(d='M79 44.2L58.7 23.9l2.3-2.3c4.8-4.8 12.6-4.8 17.4 0l3 3c4.8 4.8 4.8 12.6 0 17.4L79 44.2zM41.3 82H20.9V61.6m10.2 10.2L61.9 41') - path.st0(d='M21 75.7c1.1-1.1 3.3-.5 5 1.2s2.3 4 1.2 5m3.8-10l-3.2-7-6.9-3.2M41.2 82L38 75.1l-7-3.2') - - symbol#bulb-icon(viewbox='0 0 100 100') - path.st0(d='M69.9 49.9c0-11.3-9.5-20.4-20.9-19.8-10.3.6-18.6 9.2-18.7 19.5-.1 4.7 1.5 8.9 4.1 12.3 2.5 3.2 3.9 7 3.9 11.1v1.2h23.6v-1c0-4.2 1.5-8.1 4-11.4 2.5-3.3 4-7.5 4-11.9zm-11.1 35H41.4c-1.7 0-3.1-1.4-3.1-3.1v-7.6h23.6v7.6c0 1.7-1.4 3.1-3.1 3.1z') - path.st0(d='M52 92.1h-3.7c-4 0-7.3-3.3-7.3-7.3h18.3c-.1 4.1-3.3 7.3-7.3 7.3zm-8.5-17.9V55.6m13.2 18.6V55.6M43.5 52h13.2m-13.2 3.6h13.2m-6.6-33V7.9M30.6 30.6L20.2 20.2M22.5 50H7.8m22.7 19.5L20.1 79.9m49.3-10.3l10.4 10.5m-2.3-29.9h14.7M69.5 30.7l10.4-10.4') - - symbol#react-icon(viewBox='0 0 93 83') - g(transform='translate(1 1)', stroke-width='2', fill='none', fill-rule='evenodd') - ellipse(cx='45.5', cy='30', rx='4.5', ry='4.52612') - path(d='M45.5049 23.03117c11.3718 0 21.9359 1.64123 29.90118 4.3993 9.59704 3.32304 15.4977 8.36032 15.4977 12.92145 0 4.7532-6.2537 10.1043-16.55948 13.53872-7.79173 2.5966-18.0445 3.95185-28.8394 3.95185-11.06756 0-21.54793-1.27225-29.4256-3.98057C6.1105 50.4348.10604 45.01426.10604 40.35193c0-4.5241 5.6339-9.52235 15.09603-12.84046 7.995-2.8034 18.81995-4.4803 30.30284-4.4803z') - path(d='M30.51387 31.74147c5.681-9.90815 12.37212-18.29275 18.72675-23.8551 7.6565-6.70177 14.94274-9.32654 18.8711-7.048 4.09383 2.37446 5.57853 10.4967 3.38794 21.19176-1.65623 8.08608-5.61093 17.69638-11.00374 27.10206-5.52905 9.64322-11.8604 18.13905-18.12858 23.64994-7.93186 6.9738-15.6 9.49738-19.61565 7.16825-3.89648-2.2602-5.38675-9.66584-3.51745-19.56788 1.57942-8.3666 5.54306-18.63595 11.2796-28.64106z') - path(d='M30.52822 49.15732c-5.69738-9.89864-9.57796-19.91666-11.19553-28.23198-1.949-10.0187-.571-17.6789 3.35364-19.96404 4.08977-2.38143 11.82747.38106 19.9457 7.63132 6.13804 5.4815 12.44085 13.72704 17.84935 23.12372 5.5451 9.6339 9.7012 19.39398 11.31776 27.60826 2.04573 10.39466.38983 18.3369-3.62194 20.67283-3.89274 2.26665-11.01606-.13313-18.61178-6.70737-6.41777-5.5547-13.28397-14.1373-19.03723-24.13274z') - - symbol#logo-algolia(viewbox='0 0 91 29') - path(d='M54.778 11.404l-1.194 4.068 3.845-2.026c-.56-.985-1.512-1.73-2.652-2.042zm-7.33-3.334c-.592-.546-1.555-.546-2.15 0l-.267.247c-.593.546-.593 1.43 0 1.977l.286.263c.62-.908 1.392-1.702 2.286-2.346l-.153-.14zm8.74-1.274c0-.03.01-.06.01-.093v-.737c0-.813-.66-1.473-1.472-1.473H52.15c-.81 0-1.47.66-1.47 1.473v.724c1.807-.508 3.723-.47 5.507.107z') - path(d='M53.584 9.964c3.2 0 5.805 2.584 5.805 5.76 0 3.176-2.605 5.76-5.806 5.76-3.2 0-5.805-2.584-5.805-5.76 0-3.176 2.603-5.76 5.804-5.76zm-8.128 5.76c0 4.453 3.64 8.064 8.128 8.064 4.49 0 8.128-3.61 8.128-8.063 0-4.453-3.64-8.065-8.128-8.065-4.49 0-8.128 3.612-8.128 8.064zM16.484 23.5c-.337-.886-.65-1.756-.948-2.612-.302-.872-.608-1.742-.918-2.61H5.32l-1.865 5.22H.465c.73-2.004 1.47-4.005 2.22-6.003.658-1.752 1.334-3.498 2.03-5.236.66-1.655 1.317-3.233 1.968-4.738.65-1.504 1.332-2.994 2.043-4.47h2.636c.71 1.476 1.39 2.966 2.043 4.47.678 1.57 1.334 3.15 1.968 4.736.695 1.74 1.37 3.484 2.03 5.237.69 1.84 1.43 3.84 2.22 6.004h-3.14zm-2.695-7.583c-.615-1.662-1.242-3.32-1.882-4.972-.62-1.603-1.268-3.142-1.94-4.618C9.26 7.844 8.605 9.384 8 10.945c-.64 1.65-1.256 3.306-1.85 4.972h7.64zM26.503 23.5c-1.654-.04-2.828-.4-3.52-1.085-.694-.684-1.04-1.748-1.04-3.196V.93l2.683-.47v18.32c0 .45.04.82.116 1.113.077.293.202.527.375.704.173.175.404.307.693.395.29.088.646.162 1.07.22l-.376 2.286zm13.047-1.852c-.232.156-.684.355-1.354.598-.67.244-1.454.366-2.348.366-.913 0-1.773-.147-2.58-.438-.8-.288-1.522-.752-2.113-1.36-.603-.61-1.08-1.376-1.43-2.29-.35-.915-.524-2.005-.524-3.27 0-1.11.166-2.128.497-3.053.33-.923.81-1.722 1.443-2.394.63-.672 1.403-1.197 2.317-1.577.915-.38 1.945-.57 3.092-.57 1.262 0 2.365.093 3.308.278.942.186 1.734.355 2.375.51V22c0 2.337-.602 4.03-1.807 5.08-1.206 1.052-3.032 1.577-5.482 1.577-.904.005-1.806-.073-2.696-.232-.845-.157-1.58-.34-2.2-.555l.495-2.365c.544.213 1.21.404 1.996.57.81.167 1.635.25 2.463.248 1.613 0 2.774-.32 3.484-.963.71-.642 1.064-1.665 1.064-3.066v-.642zm-1.12-11.49c-.46-.07-1.076-.103-1.853-.103-1.458 0-2.58.477-3.368 1.43-.788.955-1.18 2.22-1.18 3.797 0 .875.11 1.625.334 2.25.224.62.525 1.137.904 1.546.362.397.81.706 1.312.905.496.195 1.007.292 1.53.292.72 0 1.38-.102 1.983-.306.602-.206 1.08-.444 1.43-.717v-8.876c-.273-.078-.637-.15-1.093-.22zm30.454 13.34c-1.655-.038-2.83-.398-3.52-1.083-.694-.684-1.04-1.75-1.04-3.196V.93l2.684-.47v18.32c0 .45.04.82.116 1.114.077.293.2.528.375.704.17.175.4.308.69.396.29.087.645.16 1.07.22l-.376 2.286zm5.02-18.305c-.485 0-.897-.162-1.235-.484-.34-.324-.508-.76-.508-1.307 0-.548.17-.984.507-1.306.337-.323.75-.485 1.232-.485.484 0 .895.16 1.234.485.338.323.508.758.508 1.305 0 .547-.17.982-.508 1.306-.34.323-.75.484-1.234.484zM72.567 7.95h2.7v15.262h-2.7V7.95zm12.294-.29c1.097 0 2.022.144 2.777.43.752.287 1.36.692 1.82 1.215.46.524.79 1.147.985 1.87.195.72.294 1.516.294 2.386v9.636l-.985.162c-.474.076-.95.14-1.426.193-.53.06-1.103.115-1.72.164-.617.05-1.23.074-1.836.074-.862 0-1.655-.09-2.38-.267-.725-.177-1.352-.458-1.88-.844-.53-.385-.94-.894-1.235-1.526-.295-.633-.442-1.394-.442-2.283 0-.85.17-1.58.515-2.194.332-.602.812-1.112 1.395-1.482.588-.374 1.274-.65 2.057-.83.81-.18 1.638-.27 2.47-.266.273 0 .557.015.85.044.295.03.574.07.84.12.264.048.494.093.69.133.195.04.333.07.41.088v-.77c0-.454-.05-.904-.146-1.35-.092-.426-.272-.83-.53-1.184-.254-.345-.602-.622-1.043-.83-.44-.208-1.014-.312-1.72-.312-.9 0-1.688.065-2.365.194-.675.128-1.18.262-1.512.4l-.323-2.283c.353-.158.94-.312 1.763-.46.823-.148 1.715-.222 2.674-.222h-.002zm.235 13.815c.573.002 1.147-.013 1.72-.045.498-.03.915-.083 1.248-.163v-4.595c-.197-.098-.515-.182-.955-.25-.442-.07-.975-.105-1.602-.105-.41 0-.847.03-1.307.09-.46.058-.882.182-1.263.37-.374.18-.7.444-.955.77-.254.326-.382.756-.382 1.29 0 .988.313 1.674.94 2.06.627.386 1.48.58 2.557.58v-.002z') - - symbol#algolia-icon - svg(viewbox='0 0 95 95', xmlns='http://www.w3.org/2000/svg') - path(d='M0 12.37C0 5.54 5.532 0 12.367 0h69.31c6.831 0 12.368 5.533 12.368 12.37v69.331c0 6.832-5.532 12.371-12.367 12.371h-69.31C5.536 94.072 0 88.539 0 81.702V12.37zm48.125 11.405c-14.671 0-26.58 11.898-26.58 26.588 0 14.69 11.895 26.588 26.58 26.588 14.685 0 26.58-11.912 26.58-26.602S62.81 23.775 48.125 23.775zm0 45.307c-10.343 0-18.727-8.386-18.727-18.733 0-10.346 8.384-18.732 18.727-18.732 10.344 0 18.727 8.386 18.727 18.732 0 10.347-8.383 18.733-18.727 18.733zm0-33.6v13.955c0 .408.436.68.803.49L61.3 43.501a.548.548 0 0 0 .217-.762c-2.572-4.506-7.335-7.596-12.834-7.8a.549.549 0 0 0-.558.544zM30.76 25.246l-1.62-1.62a4.082 4.082 0 0 0-5.77 0l-1.933 1.933a4.085 4.085 0 0 0 0 5.773l1.606 1.606c.245.245.64.204.844-.068a30.572 30.572 0 0 1 3.116-3.662 29.723 29.723 0 0 1 3.689-3.131c.272-.19.3-.6.068-.83zm26.063-4.234v-3.226a4.078 4.078 0 0 0-4.083-4.084h-9.5a4.078 4.078 0 0 0-4.083 4.084v3.308c0 .368.354.626.708.531a29.562 29.562 0 0 1 8.275-1.157c2.722 0 5.403.367 7.989 1.075a.55.55 0 0 0 .694-.53z', fill-rule='evenodd') - - symbol#icon-dev-friendly - svg(width='48', height='31', viewbox='0 0 48 31', xmlns='http://www.w3.org/2000/svg') - title Shape - path(d='M43.436 0H5.016C4.18 0 0 .406 0 4.755v21.73c0 4.35 4.56 4.337 5.39 4.337h36.92c.83 0 5.518.014 5.518-4.906V5.128C47.828.406 44.268 0 43.436 0zM19.298 15.61L6.456 21.504c-.662.312-1.447.015-1.75-.648-.078-.183-.116-.366-.116-.548 0-.504.282-.984.77-1.204l10.267-4.716-10.26-4.776c-.662-.304-.952-1.096-.64-1.76.22-.478.7-.76 1.196-.76.183 0 .373.038.556.12l12.81 5.994c.275.123.48.61.61.61h.008c.015 0 .03.038.038.07.305.653.015 1.416-.648 1.72zm20.91 10.266c-.04.054-.085.108-.14.145-.007.017-.02.032-.044.047-.016.015-.03.022-.047.038-.053.046-.113.09-.182.13-.25.144-.55.227-.87.227l-16.634.04c-.86 0-1.552-.595-1.56-1.327 0-.365.175-.693.457-.937.282-.236.663-.38 1.097-.388l16.635-.038c.852 0 1.553.594 1.553 1.325 0 .275-.098.527-.266.74z', fill='#41C8A0', fill-rule='evenodd') - - symbol#feat-icon-analytics - svg(width='41', height='28', viewbox='0 0 41 28', xmlns='http://www.w3.org/2000/svg') - g(stroke='#788895', fill='#F3F4F7', fill-rule='evenodd') - path(d='M12.092 5.48l7.588-4.315c.637-.362 1.674-.363 2.315 0l8.146 4.314v11.518l-8.146 4.206c-.64.353-1.682.351-2.325-.005l-7.569-4.196c-.646-.358-.647-11.16-.01-11.523z', stroke-width='1.28') - path(d='M22.567.977C21.61.436 20.058.44 19.088.99l-6.404 3.642c-.965.548-.97 1.423 0 1.961l6.404 3.55c.965.535 2.527.538 3.502 0l6.435-3.55c.969-.535.974-1.41.022-1.949L22.567.977z', stroke-width='1.28') - path(d='M1.012 22.623l7.57 4.196c.642.357 1.684.359 2.324.006l7.993-4.612V6.41l-7.993-4.734c-.64-.363-1.678-.362-2.315 0L.584 6.41l.428 16.213z', stroke-width='1.28') - path(d='M11.478 1.7c-.957-.54-2.509-.538-3.479.014L1.595 5.355c-.965.549-.97 1.424 0 1.962l6.404 3.55c.965.535 2.527.538 3.502 0l6.435-3.55c.969-.535.974-1.41.022-1.95l-6.48-3.666zm11.188 21.43l7.953 4.2c.643.357 1.685.359 2.324.006l7.906-4.513v-5.701l-7.906-4.714c-.64-.363-1.678-.362-2.315 0l-7.962 5.073v5.648z', stroke-width='1.28') - path(d='M34.015 13.014c-1.233-.698-3.235-.692-4.453 0l-5.456 3.102c-1.226.697-1.217 1.819.025 2.508l5.406 2.996c1.24.688 3.254.69 4.49.007l5.457-3.01c1.24-.684 1.254-1.799.012-2.501l-5.481-3.102z', stroke-width='1.28') - path(d='M9.65 12.013v13.836m10.948-14.361v9.25m11.47 2.354v3.268', stroke-linecap='square') - - symbol#feat-icon-code - svg(width='37', height='22', viewbox='0 0 37 22', xmlns='http://www.w3.org/2000/svg') - path(d='M9.932 4.648l.905 1.4-7.208 4.346 7.208 4.368-.986 1.358L2 11.287V9.481l7.932-4.833zm25.65 5.715v1.81l-7.85 4.83-.987-1.358 7.208-4.368-7.208-4.343.906-1.404 7.931 4.833zm-20.656 10.17l-1.437-.67L21.792 2l1.418.707-8.284 17.826z', stroke='#788895', stroke-width='1.3', fill='#F3F4F7', fill-rule='evenodd', stroke-linejoin='round') - - symbol#feat-icon-facets - svg(width='32', height='34', viewbox='0 0 32 34', xmlns='http://www.w3.org/2000/svg') - g(stroke='#788895', fill='#F3F4F7', fill-rule='evenodd') - path(d='M31.216 21.854l-5.679 7.771-9.187 2.968-9.188-2.968-5.679-7.77v-9.606l5.679-7.772L16.35 1.51l9.187 2.968 5.68 7.772v9.605z', stroke-width='1.5') - path(d='M10.191 25.327L6.574 14.1l9.47-6.94 9.47 6.94-3.617 11.227H10.191zM25.893 14.023l5.323-1.683-5.679-7.837-9.187-2.994V7.07', stroke-width='1.024') - path(d='M22.052 25.167l3.361 4.6 5.803-7.853v-9.707l-5.44 1.687-3.724 11.273z', stroke-width='1.024') - path(d='M22.233 25.327l3.281 4.398-9.164 2.868-9.165-2.868 3.281-4.398h11.767z', stroke-width='1.024') - path(d='M6.923 13.894l-5.44-1.687v9.707l5.803 7.853 3.361-4.6-3.724-11.273z', stroke-width='1.024') - - symbol#feat-icon-geosearch - svg(width='22', height='36', viewbox='0 0 22 36', xmlns='http://www.w3.org/2000/svg') - g(stroke='#788895', fill='none', fill-rule='evenodd') - path(d='M20.446 10.996c0 5.136-9.39 23.248-9.39 23.248s-9.39-18.112-9.39-23.248c0-5.135 4.204-9.299 9.39-9.299 5.186 0 9.39 4.164 9.39 9.3z', stroke-width='1.5', fill='#F3F4F7') - path(d='M11.056 15.099a4.022 4.022 0 0 1-4.024-4.02c0-2.22 1.801-4.021 4.024-4.021s4.024 1.8 4.024 4.02a4.02 4.02 0 0 1-4.024 4.02z', stroke-width='1.024', fill='#FFF') - - symbol#feat-icon-highlighting - svg(width='29', height='26', viewbox='0 0 29 26', xmlns='http://www.w3.org/2000/svg') - g(stroke='#788895', stroke-width='1.5', fill='#F3F4F7', fill-rule='evenodd') - path(d='M5.824 11.934L23.12 1.115l4.718 4.637L16.83 22.754 5.824 11.934z', stroke-linecap='round', stroke-linejoin='bevel') - path(d='M16.231 22.446c-2.88-.013-5.497-.037-8.215.997l-3.289-3.34C5.745 17.34 6.074 15.526 6.06 12.6l10.171 9.845z', stroke-linejoin='bevel') - path(d='M5.194 21.384L2 24.68h3.792l1.475-1.37-2.073-1.925z') - - symbol#feat-icon-indexing - svg(width='29', height='28', viewbox='0 0 29 28', xmlns='http://www.w3.org/2000/svg') - g(transform='translate(1 1)', stroke='#788895', fill='#F3F4F7', fill-rule='evenodd') - path(d='M26.923 17.382c0-2.335-6.027-4.229-13.462-4.229C6.027 13.153 0 15.047 0 17.383v4.228c0 2.335 6.027 4.229 13.461 4.229 7.435 0 13.462-1.894 13.462-4.23v-4.228z', stroke-width='1.6') - ellipse(stroke-width='1.6', cx='13.461', cy='17.26', rx='13.099', ry='4.115') - path(d='M26.923 17.382c0-2.335-6.027-4.229-13.462-4.229C6.027 13.153 0 15.047 0 17.383v4.228c0 2.335 6.027 4.229 13.461 4.229 7.435 0 13.462-1.894 13.462-4.23v-4.228z', stroke-width='1.6') - ellipse(stroke-width='.8', cx='13.461', cy='17.378', rx='13.335', ry='4.189') - path(d='M26.923 10.94c0-2.336-6.027-4.23-13.462-4.23C6.027 6.71 0 8.605 0 10.94v4.228c0 2.336 6.027 4.23 13.461 4.23 7.435 0 13.462-1.894 13.462-4.23V10.94z', stroke-width='1.6') - ellipse(stroke-width='.8', cx='13.461', cy='10.936', rx='13.335', ry='4.189') - path(d='M26.923 4.229C26.923 1.893 20.896 0 13.461 0 6.027 0 0 1.893 0 4.229v4.229c0 2.335 6.027 4.228 13.461 4.228 7.435 0 13.462-1.893 13.462-4.228v-4.23z', stroke-width='1.6') - ellipse(stroke-width='.8', cx='13.461', cy='4.225', rx='13.335', ry='4.189') - - symbol#feat-icon-ranking - svg(width='35', height='37', viewbox='0 0 35 37', xmlns='http://www.w3.org/2000/svg') - g(stroke='#788895', fill='#F3F4F7', fill-rule='evenodd') - path(stroke-width='2', d='M15.675 19.835h3.662v7.4h-3.662z') - path(d='M28.234 2.454c.029-.678.041-1.266.041-1.727H6.963c0 .46.012 1.049.04 1.729l-.184-.004c-3.09-.054-5.642 2.626-5.7 5.985-.06 3.36 2.398 6.127 5.487 6.18l2.616.046c1.792 3.682 4.085 6.761 8.285 6.761 4.202 0 7.163-2.983 8.737-6.766l2.328-.04c3.09-.055 5.546-2.822 5.488-6.181-.06-3.36-2.611-6.04-5.7-5.985l-.126.002zM28.1 4.738c-.185 2.414-.532 5.276-1.12 7.625l1.648-.028c1.933-.034 3.471-1.764 3.435-3.863-.037-2.1-1.634-3.775-3.568-3.74l-.395.006zM7.145 4.74c.196 2.423.57 5.296 1.23 7.627l-1.824-.032c-1.933-.034-3.471-1.763-3.435-3.863.037-2.1 1.634-3.774 3.568-3.74l.461.008zM25.023 27.91h1.286l2.688 2.19h.07v5.637H6.174v-5.636h.071l2.688-2.19h1.265c.765-.904 2.767-1.627 4.432-2.211l1.434-1.621s.387.433 1.556.433c1.168 0 1.644-.433 1.644-.433l1.29 1.62c1.656.469 3.682 1.297 4.47 2.211z', stroke-width='1.4', stroke-linejoin='round') - path(stroke-width='.5', stroke-linecap='square', d='M7.205 30.474h21.831') - path(stroke-width='.8', d='M18.1 12.093l-3.406 1.57.65-3.324-2.755-2.355 3.807-.484L18.1 4.475 19.802 7.5l3.807.484-2.755 2.355.65 3.324z') - path(d='M10.77 28.332s.703.754 6.71.754 7.321-.754 7.321-.754M6.498 30.624H28.47', stroke-linecap='square') - - symbol#feat-icon-security - svg(width='31', height='36', viewbox='0 0 31 36', xmlns='http://www.w3.org/2000/svg') - g(stroke='#788895', fill='#F3F4F7', fill-rule='evenodd') - path(d='M26.733 14.524H4.327L2.294 16.19v16.258l2.033 1.811h22.406l1.875-1.811V16.19l-1.875-1.666z', stroke-width='1.5') - path(d='M16.45 26.4a2.386 2.386 0 0 0 1.675-2.292c0-1.32-1.05-2.391-2.345-2.391-1.296 0-2.346 1.07-2.346 2.39 0 1.113.746 2.048 1.755 2.315v3.89h1.26V26.4z', stroke-linejoin='round') - path(d='M26.733 14.524H4.327L2.294 16.19l2.033 1.623h22.406l1.875-1.623-1.875-1.666z', stroke-linecap='square', stroke-linejoin='bevel') - path(d='M5.583 15.758v-4.586C5.583 5.394 10.295.71 16.109.71c5.813 0 10.525 4.685 10.525 10.463v4.586c0 .973-3.947.833-3.947 0v-4.763c0-3.617-2.945-6.55-6.578-6.55-3.634 0-6.579 2.933-6.579 6.55v4.763c0 .973-3.947.973-3.947 0z') - - symbol#feat-icon-sla - svg(width='25', height='26', viewbox='0 0 25 26', xmlns='http://www.w3.org/2000/svg') - g(stroke='#788895', stroke-width='1.597', fill='none', fill-rule='evenodd', stroke-linecap='round') - path(d='M7.07 12.402l4.047 4.093 7.226-7.309', stroke-linejoin='round') - path(d='M24.124 12.695c0 6.458-5.177 11.694-11.562 11.694C6.176 24.39 1 19.153 1 12.695 1 6.235 6.176 1 12.562 1c6.385 0 11.562 5.236 11.562 11.695z') - - symbol#feat-icon-speed - svg(width='22', height='39', viewbox='0 0 22 39', xmlns='http://www.w3.org/2000/svg') - path(d='M18.663 2l-6.39 14.658 7.976-1.086L2.217 37l7.071-15.745-7.69 1.092L18.664 2z', stroke='#788895', stroke-width='1.5', fill='none', fill-rule='evenodd', stroke-linejoin='round') - - symbol#feat-icon-typo - svg(width='24', height='31', viewbox='0 0 24 31', xmlns='http://www.w3.org/2000/svg') - g(stroke='#788895', fill='none', fill-rule='evenodd') - path(d='M15.853 19.636h-7.36v-.756a12.351 12.351 0 0 1 2.435-.626V2.73H6.922L5.533 6.462h-.655a17.017 17.017 0 0 1-.131-1.187 77.995 77.995 0 0 1-.157-2.713c-.018-.444-.026-.84-.026-1.187h15.218c0 .348-.009.74-.026 1.174-.018.435-.04.882-.066 1.343l-.078 1.357c-.027.443-.066.848-.118 1.213h-.681l-1.362-3.73h-4.008v15.522c.454.087.878.173 1.27.26.393.087.773.21 1.14.366v.756z', stroke-width='1.3') - path(d='M1.395 30s1.072-3.222 3.437-3.222c2.365 0 2.365 3.222 4.73 3.222 2.366 0 2.366-3.222 4.731-3.222 2.365 0 2.365 3.222 4.73 3.222 2.366 0 3.76-3.222 3.76-3.222', stroke-width='1.5', stroke-linecap='square') diff --git a/docgen/layouts/main.pug b/docgen/layouts/main.pug deleted file mode 100644 index 30177a6de2..0000000000 --- a/docgen/layouts/main.pug +++ /dev/null @@ -1,8 +0,0 @@ -extends archetypes/content-with-menu.pug -include mixins/nav.pug - -block navigation - +nav(navPath, navigation, mainTitle || title, withHeadings && headings || [], navScroll) - -block content - .content!=contents diff --git a/docgen/layouts/mixins/nav-main.pug b/docgen/layouts/mixins/nav-main.pug deleted file mode 100644 index 8d16ace17d..0000000000 --- a/docgen/layouts/mixins/nav-main.pug +++ /dev/null @@ -1,16 +0,0 @@ -mixin nav(currentPath, navItems, title, headings) - ul.category-content - if navItems - +navRec(currentPath, navItems, title, 2) - -mixin navRec(currentPath, navItems, title, depth) - for navItem in navItems - - var isCurrentFile = navItem.path === currentPath; - - var className = ['sidebar-element', ('level-h' + depth), (isCurrentFile ? 'navItem-active' : 'navItem')]; - - var activeClass = isCurrentFile ? 'navItem-active' : ''; - li(class=className) - a(href=navItem.path class=activeClass)=navItem.title - if navItem.metadata.source - span - | - - a(href=navItem.metadata.source) source code diff --git a/docgen/layouts/mixins/nav.pug b/docgen/layouts/mixins/nav.pug deleted file mode 100644 index f0ad4c13c3..0000000000 --- a/docgen/layouts/mixins/nav.pug +++ /dev/null @@ -1,33 +0,0 @@ -mixin nav(currentPath, navItems, title, headings, navScroll=false) - div(class={"sidebar-container": true, "sidebar-navScroll": navScroll}) - h2.sidebar-header=title - ul.sidebar-elements - if navItems - if navItems.length === 1 - +navContent(headings, 0, currentPath) - else - +navRec(currentPath, navItems, title, 2, headings) - -mixin navRec(currentPath, navItems, title, depth, headings) - for navItem in navItems - - if(navItem.metadata.showInNav !== false) - - var isCurrentFile = navItem.path === currentPath; - - var className = ['sidebar-element', ('level-h' + depth), (isCurrentFile ? 'navItem-active' : 'navItem'), currentPath.split('/')[0]]; - - var activeClass = isCurrentFile ? 'navItem-active' : ''; - li(class=className) - if navItem.title === 'InstantSearch' - a(href=navItem.path class=activeClass)='' - else - a(href=navItem.path class=activeClass)=navItem.title - ul - if(isCurrentFile) - +navContent(headings, depth, currentPath) - -mixin navContent(headings, currentDepth, currentPath) - if headings && headings.length > 1 - each item in headings - - var level = parseFloat(/h([0-9]+)/.exec(item.tag)[1]); - - var actualLevel = level + currentDepth - 1; - - var className = ['sidebar-element', 'level-h' + actualLevel] - li(class=className) - a(href=`${currentPath}#${item.id}`)= item.text diff --git a/docgen/layouts/widget.pug b/docgen/layouts/widget.pug deleted file mode 100644 index 95f932b94b..0000000000 --- a/docgen/layouts/widget.pug +++ /dev/null @@ -1,82 +0,0 @@ -extends archetypes/content-with-menu.pug - -include mixins/nav.pug - -block navigation - +nav(navPath, navigation, mainTitle || title, withHeadings && headings || []) - -block content - h2#description Description - a.anchor(href=`${navPath}#description`) - div!=h.markdown(description) - div.storybook-section - a.btn.btn-cta(href=`${storyBookPublicPath}?selectedKind=${name}&selectedStory=default` target='_blank') See live example - h2#proptypes Props - a.anchor(href=`${navPath}#proptypes`) - if proptype - table.api.proptypes - tbody - each type in proptype - tr.api-entry-values - td.api-entry-name - div.api-entry(id=`default-props-entry-${name}-${type.name}`) - =`${type.name}${type.isRequired ? '*' : ''}` - a.anchor(href=`${navPath}#default-props-entry-${name}-${type.name}`) - td.api-entry-type - span type: - = ' ' - code=type.type - td.api-entry-default-value - if type.defaultValue - span default: - = ' ' - code=type.defaultValue - else - span   - tr.api-entry-description - td(colspan=3)!=h.markdown(type.description) - else - p This widget has no props. - if requirements - h2#requirements Requirements - a.anchor(href=`${navPath}#requirements`) - div!=h.markdown(requirements) - if operations - h2#operations Operations - a.anchor(href=`${navPath}#operations`) - div!=h.markdown(operations) - h2#example Example usage - a.anchor(href=`${navPath}#example`) - if examples - each example in examples - p!=h.highlight(example, {lang: 'jsx'}) - h2#classnames CSS classes - a.anchor(href=`${navPath}#classnames`) - if themekey - table.api - tbody - each type in themekey - tr.api-entry-values - td.api-entry-name - - var themeId = `default-theme-entry-${name}-${type.key}`; - div.api-entry(id=themeId)=`.${type.key} {}` - a.anchor(href=`${navPath}#${themeId}`) - tr.api-entry-description - td(colspan=3)!=h.markdown(type.description) - else - p This widget has no theming options. - h2#translations Translation keys - a.anchor(href=`${navPath}#translations`) - if translationkey - table.api - tbody - each type in translationkey - tr.api-entry-values - td.api-entry-name - - var themeId = `default-theme-entry-${name}-${type.key}`; - div.api-entry(id=themeId)=type.key - a.anchor(href=`${navPath}#${themeId}`) - tr.api-entry-description - td(colspan=3)!=h.markdown(type.description) - else - p This widget has no translations. diff --git a/docgen/mdRenderer.js b/docgen/mdRenderer.js deleted file mode 100644 index d1b27e4462..0000000000 --- a/docgen/mdRenderer.js +++ /dev/null @@ -1,22 +0,0 @@ -import MarkdownIt from 'markdown-it'; -import markdownItAnchor from 'markdown-it-anchor'; - -import highlight from './syntaxHighlighting.js'; - -const md = - new MarkdownIt('default', { - highlight: (str, lang) => highlight(str, lang), - linkify: true, - typographer: true, - html: true, - }) - .use(markdownItAnchor, { - permalink: true, - permalinkClass: 'anchor', - permalinkSymbol: '', - // generate proper Getting_started.html#install hrefs since we are - // using the base href trick to handle different base urls (dev, prod) - permalinkHref: (slug, {env: {path}}) => `${path}#${slug}`, - }); - -export default md; diff --git a/docgen/middlewares.js b/docgen/middlewares.js deleted file mode 100644 index 0bc5fba55b..0000000000 --- a/docgen/middlewares.js +++ /dev/null @@ -1,124 +0,0 @@ -import headings from 'metalsmith-headings'; -import layouts from 'metalsmith-layouts'; -import msWebpack from 'ms-webpack'; -import navigation from 'metalsmith-navigation'; -import nav from './plugins/navigation.js'; -import sass from 'metalsmith-sass'; - -import assets from './plugins/assets.js'; -import helpers from './plugins/helpers.js'; -import ignore from './plugins/ignore.js'; -import jsdoc from './plugins/jsdoc-data.js'; -import markdown from './plugins/markdown.js'; -import onlyChanged from './plugins/onlyChanged.js'; -import webpackEntryMetadata from './plugins/webpackEntryMetadata.js'; -import autoprefixer from './plugins/autoprefixer.js'; -import sources from './plugins/sources.js'; - -// performance and debug info for metalsmith, when needed see usage below -// import {start as perfStart, stop as perfStop} from './plugins/perf.js'; - -import webpackStartConfig from './webpack.config.start.babel.js'; -import webpackBuildConfig from './webpack.config.build.babel'; - -import {reactPackage} from './path.js'; - -const common = [ - helpers, - assets({ - source: './assets/', - destination: './assets/', - }), - assets({ - source: './rootFiles', - destination: './', - }), - sources([ - reactPackage('src/widgets/*.js'), - reactPackage('src/connectors/*.js'), - reactPackage('src/core/InstantSearch.js'), - ], { - ignore: '**/*.test.js', - computeFilename: filename => `${filename}.jsdoc`, // denotes jsdoc file but also avoid js ignore - }), - ignore(fileName => { - // This is a fix for VIM swp files inside src/, - // We could also configure VIM to store swp files somewhere else - // http://stackoverflow.com/questions/1636297/how-to-change-the-folder-path-for-swp-files-in-vim - if (/\.swp$/.test(fileName)) return true; - - // if it's a build js file, keep it (`build`) - if (/-build\.js$/.test(fileName)) return false; - - // if it's any other JavaScript file, ignore it, it's handled by build files above - if (/\.js$/.test(fileName)) return true; - - // ignore scss partials, only include scss entrypoints - if (/_.*\.s[ac]ss/.test(fileName)) return true; - - // otherwise, keep file - return false; - }), - markdown, - jsdoc(), - headings('h2'), - nav(), - // After markdown, so that paths point to the correct HTML file - navigation({ - core: { - sortBy: 'nav_sort', - filterProperty: 'nav_groups', - }, - widget: { - sortBy: 'nav_sort', - filterProperty: 'nav_groups', - }, - connector: { - sortBy: 'nav_sort', - filterProperty: 'nav_groups', - }, - examples: { - sortBy: 'nav_sort', - filterProperty: 'nav_groups', - }, - gettingstarted: { - sortBy: 'nav_sort', - filterProperty: 'nav_groups', - }, - }, { - navListProperty: 'navs', - }), - // perfStart(), - sass({ - sourceMap: true, - sourceMapContents: true, - outputStyle: 'nested', - }), - // since we use @import, autoprefixer is used after sass - autoprefixer, - // perfStop(), -]; - -// development mode -export const start = [ - webpackEntryMetadata(webpackStartConfig), - ...common, - onlyChanged, - layouts('pug'), -]; - -export const build = [ - msWebpack({ - ...webpackBuildConfig, - stats: { - chunks: false, - modules: false, - chunkModules: false, - reasons: false, - cached: false, - cachedAssets: false, - }, - }), - ...common, - layouts('pug'), -]; diff --git a/docgen/path.js b/docgen/path.js deleted file mode 100644 index 3ced6c5fa9..0000000000 --- a/docgen/path.js +++ /dev/null @@ -1,4 +0,0 @@ -import {join} from 'path'; - -export const rootPath = (...args) => join(__dirname, '..', ...args); -export const reactPackage = (...args) => rootPath('packages/react-instantsearch/', ...args); diff --git a/docgen/plugins/assets.js b/docgen/plugins/assets.js deleted file mode 100644 index c123ae12b4..0000000000 --- a/docgen/plugins/assets.js +++ /dev/null @@ -1,79 +0,0 @@ -// extracted from https://github.com/treygriffith/metalsmith-assets -// converted to es6 (http://lebab.io/try-it) -// tweaked to add `stats` to the file object - -import fs from 'fs'; -import path from 'path'; -import readdir from 'recursive-readdir'; -import mode from 'stat-mode'; -import {each} from 'async'; - -/** - * Expose `assets`. - */ - -export default assets; - -/** - * Default plugin options - */ -const defaults = { - source: './public', - destination: '.', -}; - -/** - * Metalsmith plugin to include static assets. - * - * @param {Object} userOptions (optional) - * @property {String} source Path to copy static assets from (relative to working directory). Defaults to './public' - * @property {String} destination Path to copy static assets to (relative to destination directory). Defaults to '.' - * @return {Function} a Metalsmith plugin - */ -function assets(userOptions = {}) { - const options = { - ...defaults, - ...userOptions, - }; - - return (files, metalsmith, cb) => { - const src = metalsmith.path(options.source); - const dest = options.destination; - - // copied almost line for line from https://github.com/segmentio/metalsmith/blob/master/lib/index.js - readdir(src, (readDirError, arr) => { - if (readDirError) { - cb(readDirError); - return; - } - - each(arr, read, err => cb(err, files)); - }); - - function read(file, done) { - const name = path.join(dest, path.relative(src, file)); - fs.stat(file, (statError, stats) => { - if (statError) { - done(statError); - return; - } - - fs.readFile(file, (err, buffer) => { - if (err) { - done(err); - return; - } - - const newFile = {}; - - newFile.contents = buffer; - newFile.stats = stats; - - newFile.mode = mode(stats).toOctal(); - files[name] = newFile; - done(); - }); - }); - } - }; -} diff --git a/docgen/plugins/autoprefixer.js b/docgen/plugins/autoprefixer.js deleted file mode 100644 index ee01edca23..0000000000 --- a/docgen/plugins/autoprefixer.js +++ /dev/null @@ -1,17 +0,0 @@ -import postcss from 'postcss'; -import syntax from 'postcss-scss'; -import autoprefixer from 'autoprefixer'; - -export default function sassAutoprefixer(files, metalsmith, done) { - const processor = postcss([autoprefixer]); - Object - .keys(files) - .filter(file => (/\.css$/).test(file)) - .forEach(file => { - const originalContent = files[file].contents.toString(); - const autoprefixedContent = processor.process(originalContent, {syntax}).css; - files[file].contents = new Buffer(autoprefixedContent); - }); - - done(); -} diff --git a/docgen/plugins/helpers.js b/docgen/plugins/helpers.js deleted file mode 100644 index 3537273f95..0000000000 --- a/docgen/plugins/helpers.js +++ /dev/null @@ -1,23 +0,0 @@ -import highlight from '../syntaxHighlighting.js'; -import md from '../mdRenderer.js'; - -// this plugin provides ATM one helper to easily compute the publicPath of assets -export default function helpers(filenames, metalsmith, cb) { - metalsmith.metadata().h = { - markdown(src) { - return md.render(src); - }, - highlight(src, opts) { - const lang = opts && opts.lang; - return highlight(src, lang); - }, - maybeActive(navPath, singlePathOrArrayOfPaths) { - const pathsToTest = [].concat(singlePathOrArrayOfPaths); - return pathsToTest.some(pathToTest => navPath.indexOf(pathToTest) === 0) ? - 'active' : - ''; - }, - }; - - cb(); -} diff --git a/docgen/plugins/ignore.js b/docgen/plugins/ignore.js deleted file mode 100644 index 1d29a9a703..0000000000 --- a/docgen/plugins/ignore.js +++ /dev/null @@ -1,11 +0,0 @@ -export default function ignore(testFn) { - return (files, metalsmith, cb) => { - Object - .keys(files) - .forEach(fileName => { - if (testFn(fileName) === true) delete files[fileName]; - }); - - cb(null); - }; -} diff --git a/docgen/plugins/jsdoc-data.js b/docgen/plugins/jsdoc-data.js deleted file mode 100644 index ae543751d2..0000000000 --- a/docgen/plugins/jsdoc-data.js +++ /dev/null @@ -1,164 +0,0 @@ -import collectJson from 'collect-json'; -import jsdocParse from 'jsdoc-parse'; -import {forEach, groupBy} from 'lodash'; -import {hasChanged} from './onlyChanged.js'; -import {join} from 'path'; - -let cachedFiles; - -export default function() { - return function(files, metalsmith, done) { - const allFilles = Object - .entries(files) - .reduce((memo, [filename, file]) => - (/\.jsdoc$/).test(filename) ? - [...memo, {filename: filename.replace(/\.jsdoc$/, ''), ...file}] : - memo, - [] - ); - - const filesToParse = allFilles - .filter(file => hasChanged(file)) - .map(file => file.filename); - - if (cachedFiles) { - // remove any file from cache not present in filestoparse - Object.entries(cachedFiles).forEach(([buildFilename, file]) => { - if (!allFilles.some(({filename}) => file.filename === filename)) { - delete cachedFiles[buildFilename]; - } else { - files[buildFilename] = cachedFiles[buildFilename]; - } - }); - } else { - cachedFiles = {}; - } - - allFilles.forEach(({filename}) => delete files[`${filename}.jsdoc`]); - - if (filesToParse.length === 0) { - done(); - return; - } - - jsdocParse({ - src: filesToParse, - json: true, - }).pipe(collectJson(dataReady)); - - function dataReady(unfilteredSymbols) { - const symbolsByCategory = groupBy( - unfilteredSymbols.filter( - o => !o.deprecated && - o.kind && - (o.kind === 'component' || o.kind === 'widget' || o.kind === 'connector') - ), - 'kind' - ); - - forEach(symbolsByCategory, symbols => { - forEach(symbols, data => { - const buildFilename = `${data.kind}s/${data.name}.html`; - const customTags = parseCustomTags(data.customTags); - const isNameUnique = unfilteredSymbols.map(s => s.name).filter(n => n === data.name).length === 1; - const title = isNameUnique ? - data.name : - `${data.name} ${data.kind}`; - - const fileFromMetalsmith = allFilles - .find( - ({filename}) => - filename === join(data.meta.path, data.meta.filename) - ); - - files[buildFilename] = cachedFiles[buildFilename] = { - ...data, - ...customTags, - mode: '0764', - contents: '', - stats: fileFromMetalsmith && fileFromMetalsmith.stats, - filename: fileFromMetalsmith && fileFromMetalsmith.filename, - title, - mainTitle: `${data.kind.charAt(0).toUpperCase()}${data.kind.slice(1)}s`, // - withHeadings: false, - layout: `${data.kind}.pug`, - category: data.kind, - navWeight: data.name === 'InstantSearch' ? 1000 : 0, - }; - }); - }); - - done(); - } - }; -} - -/** - * This regexp aims to parse the following kind of jsdoc tag values: - * 1 - `{boolean} [showMore=false] - description` - * 2 - `{boolean} showMore - description` - * The groups output for 1/ are: - * [ - * '{boolean} [showMore=false] - description', - * 'boolean', - * '[', - * 'showMore', - * 'false', - * 'description' - * ] - * the first square bracket is matched in order to detect optional parameter - */ -const typeNameValueDescription = /\{(.+)\} (?:(\[?)(\S+?)(?:=(\S+?))?]? - )?([\s\S]*)/; -function parseTypeNameValueDescription(v) { - const parsed = typeNameValueDescription.exec(v); - if (!parsed) return null; - return { - type: parsed[1], - isRequired: parsed[2] !== '[', - name: parsed[3], - defaultValue: parsed[4], - description: parsed[5], - }; -} - -/** - * This regexp aims to parse simple key description tag values. Example - * showMore - container for the show more button - */ -const keyDescription = /(?:(\S+) - )?([\s\S]*)/; -function parseKeyDescription(v) { - const parsed = keyDescription.exec(v); - if (!parsed) return null; - return { - key: parsed[1], - description: parsed[2], - }; -} - -const customTagParsers = { - proptype: parseTypeNameValueDescription, - providedproptype: parseTypeNameValueDescription, - themekey: parseKeyDescription, - translationkey: parseKeyDescription, -}; - -function parseCustomTags(customTagObjects) { - if (!customTagObjects) return {}; - - const res = {}; - customTagObjects.forEach(({tag, value}) => { - const tagValueParser = customTagParsers[tag]; - - // when no custom tag parser found, just forward the value - // example: requirements - if (!tagValueParser) { - res[tag] = value; - return; - } - - res[tag] = res[tag] || []; - res[tag].push(tagValueParser(value)); - }); - - return res; -} diff --git a/docgen/plugins/markdown.js b/docgen/plugins/markdown.js deleted file mode 100644 index 02eb2f62c2..0000000000 --- a/docgen/plugins/markdown.js +++ /dev/null @@ -1,20 +0,0 @@ -import {basename, dirname, extname} from 'path'; -import md from '../mdRenderer'; - -const isMarkdown = filepath => (/\.md|\.markdown/).test(extname(filepath)); - -export default function markdown(files, metalsmith, done) { - Object.keys(files).forEach(file => { - if (!isMarkdown(file)) return; - const data = files[file]; - const dir = dirname(file); - let html = `${basename(file, extname(file))}.html`; - if (dir !== '.') html = `${dir}/${html}`; - const str = md.render(data.contents.toString(), {path: html}); - data.contents = new Buffer(str); - delete files[file]; - files[html] = data; - }); - - done(); -} diff --git a/docgen/plugins/navigation.js b/docgen/plugins/navigation.js deleted file mode 100644 index a86490f68d..0000000000 --- a/docgen/plugins/navigation.js +++ /dev/null @@ -1,42 +0,0 @@ -import {forEach} from 'lodash'; - -export default function() { - return function(files, metalsmith, done) { - const categories = {}; - - // First we scann all the HTML files to retrieve all the related documents based - // on the category attribute in the metadata - forEach(files, (data, path) => { - if (!path.match(/\.html$/) || data.tocVisibility === false) return; - const category = data.category || 'other'; - categories[category] = categories[category] || []; - categories[category].push({ - path, - title: data.title, - navWeight: data.navWeight, - metadata: data, - }); - }); - - // Then we go through all the files again to attach in the navigation attribute - // all the related documents - forEach(files, (data, path) => { - if (!path.match(/\.html$/)) return; - const category = data.category || 'other'; - // The navigation is sorted by weight first. A document with weigth is always more important - // than one without. - // Then navigation is sorted by title. - data.navigation = categories[category].sort((a, b) => { - if (a.title && b.title && - a.navWeight === b.navWeight) { - return a.title.localeCompare(b.title); - } else { - return b.navWeight - a.navWeight; - } - }); - data.navPath = path; - }); - - done(); - }; -} diff --git a/docgen/plugins/onlyChanged.js b/docgen/plugins/onlyChanged.js deleted file mode 100644 index 3af05e2784..0000000000 --- a/docgen/plugins/onlyChanged.js +++ /dev/null @@ -1,83 +0,0 @@ -// This plugin mutates the `files` map of metalsmith -// at build time to only keep what was updated -// We consider any update in layouts/ to trigger an update on every html file -// Otherwise, if it's an asset or a file with no layout then we compare -// the file's last modification time to the process start time - -import {join} from 'path'; - -import {parallel} from 'async'; -import {watch} from 'chokidar'; - -let lastRunTime = false; -let layoutChange = true; -let cssChange = true; -const layoutFiles = join(__dirname, '../layouts/**/*'); -const cssFiles = join(__dirname, '../src/stylesheets/**/*'); -const CSSEntryPoints = ['stylesheets/index.css', 'stylesheets/header.css']; - -export const hasChanged = file => file.stats && file.stats.ctime && file.stats.mtime ? - Date.parse(file.stats.ctime) > lastRunTime || Date.parse(file.stats.mtime) > lastRunTime : - true; - -export default function onlyChanged(files, metalsmith, cb) { - if (lastRunTime === false) { - watch(layoutFiles, {ignoreInitial: true}) - .on('all', () => { layoutChange = true; }) - .on('error', err => { throw err; }); - - watch(cssFiles, {ignoreInitial: true}) - .on('all', () => { cssChange = true; }) - .on('error', err => { throw err; }); - - lastRunTime = Date.now(); - layoutChange = false; - cssChange = false; - cb(null); - return; - } - - parallel( - Object - .entries(files) - .map(([name, file]) => done => { - if (!file.stats) { - done(null); // keep file, we do not know - return; - } - - if (!file.layout) { - const cssEntryPointNeedsUpdate = CSSEntryPoints.indexOf(name) !== -1 && cssChange === true; - - if (!hasChanged(file) && !cssEntryPointNeedsUpdate) { - // file has no layout and was not updated, remove file - // from files to process - delete files[name]; - } - - done(null); - return; - } - - if (/\.html$/.test(name) && layoutChange === true) { - done(null); // html page need rebuild, some layout files changed - return; - } - - if (!hasChanged(file)) { - delete files[name]; // file was not updated, layouts were not updated - } - - done(null); - }), - err => { - if (!err) { - lastRunTime = Date.now(); - layoutChange = false; - cssChange = false; - console.log(`[metalsmith]: onlyChanged | ${Object.keys(files)}`); // eslint-disable-line no-console - } - cb(err); - } - ); -} diff --git a/docgen/plugins/perf.js b/docgen/plugins/perf.js deleted file mode 100644 index 57809ed916..0000000000 --- a/docgen/plugins/perf.js +++ /dev/null @@ -1,12 +0,0 @@ -/* eslint-disable no-console */ - -export const start = (label = 'performance') => (files, metalsmith, cb) => { - console.time(label); - console.log(`${Object.entries(files).length} file(s) to process: ${Object.keys(files)}`); - cb(); -}; - -export const stop = (label = 'performance') => (files, metalsmith, cb) => { - console.timeEnd(label); - cb(); -}; diff --git a/docgen/plugins/rev-assets.js b/docgen/plugins/rev-assets.js deleted file mode 100644 index ecbc1fe4b9..0000000000 --- a/docgen/plugins/rev-assets.js +++ /dev/null @@ -1,67 +0,0 @@ -import fs from 'fs'; -import path from 'path'; -import glob from 'glob'; -import hasha from 'hasha'; -import replace from 'replace-in-file'; - -import config from '../config.js'; - -const DIST_PATH = path.resolve(config.docsDist); - -// HELPERS TO ADD REVISION HASH TO FILENAMES -// ----------------------------------------- -function computeHashForFiles(files: string[]): Promise<[{ file: string, hash: string }]> { - const promises = files.map( - file => hasha - .fromFile(file, {algorithm: 'md5'}) - .then(hash => ({file, hash})) - ); - - return Promise.all(promises); -} - -function renameFiles(files: { file: string, hash: string }[]): { oldPath: string, newPath: string }[] { - return files.map(({file, hash}) => { - const ext = path.extname(file); - const newPath = `${file.replace(ext, `-${hash}`)}${ext}`; - - // rename original with hash file - fs.renameSync(file, newPath); - - // check for `.[css|js].map` files to rename also - if ((ext === '.css' || ext === '.js') && fs.existsSync(`${file}.map`)) { - fs.renameSync(`${file}.map`, `${newPath}.map`); - } - - return {oldPath: file, newPath}; - }); -} - -function renameReferences(inFiles: string|string[], files: { oldPath: string, newPath: string }[]) { - const {from, to} = files.reduce((toRename, {oldPath, newPath}) => ({ - from: [...toRename.from, new RegExp(oldPath.replace(`${DIST_PATH}/`, ''), 'g')], - to: [...toRename.to, newPath.replace(`${DIST_PATH}/`, '')], - }), {from: [], to: []}); - - return replace({from, to, files: inFiles}); -} - -function computeFiles([filesGlob, replaceFilesGlob]: Array): Promise<*> { - const files = glob.sync(`${DIST_PATH}/${filesGlob}`); - return computeHashForFiles(files) - .then(renameFiles) - .then(result => renameReferences(`${DIST_PATH}/${replaceFilesGlob}`, result)); -} - -export default function revAssets(): Promise<*> { - // 1. compute MD5 for images / json -> replace in CSS, JS, HTML - // 2. compute MD5 for CSS -> replace in JS, HTML - // 3. compute MD5 for JS -> replace in HTML - const imagesJson = ['**/*.{json,svg,png,jpeg,jpg,gif}', '**/*.{js,html,css}']; - const css = ['**/*.css', '**/*.{js,html}']; - const js = ['**/*.js', '**/*.html']; - - return computeFiles(imagesJson) - .then(() => computeFiles(css)) - .then(() => computeFiles(js)); -} diff --git a/docgen/plugins/sources.js b/docgen/plugins/sources.js deleted file mode 100644 index 69ffb1fc41..0000000000 --- a/docgen/plugins/sources.js +++ /dev/null @@ -1,58 +0,0 @@ -import {glob} from 'glob'; -import {stat} from 'fs'; -import async from 'async'; - -export default function sourcesPlugin(sources, {ignore, computeFilename}) { - return (files, m, pluginDone) => - async.reduce( - sources, - {}, - (sourcesMemo, source, globDone) => { - glob( - source, - {ignore}, - (globErr, filenames) => { - if (globErr) { - globDone(globErr); - return; - } - - async.reduce( - filenames, - {}, - (statMemo, filename, statDone) => { - stat(filename, (statErr, stats) => { - if (statErr) { - pluginDone(statErr); - return; - } - - statDone(null, {...statMemo, [computeFilename(filename)]: {stats}}); - }); - }, - (err, filesnamesWithStat) => { - if (err) { - globDone(err); - return; - } - - globDone(null, { - ...sourcesMemo, - ...filesnamesWithStat, - }); - } - ); - } - ); - }, - (err, newFiles) => { - if (err) { - pluginDone(err); - return; - } - - Object.assign(files, newFiles); - pluginDone(null); - } - ); -} diff --git a/docgen/plugins/webpackEntryMetadata.js b/docgen/plugins/webpackEntryMetadata.js deleted file mode 100644 index 52d465fbe5..0000000000 --- a/docgen/plugins/webpackEntryMetadata.js +++ /dev/null @@ -1,20 +0,0 @@ -// this plugin adds the webpack entry points to metadata.webpack.assets -// useful in dev mode when not using ms-webpack -export default function webpackEntryMetadata(webpackConfig) { - return (filenames, metalsmith, cb) => { - const assets = Object - .keys(webpackConfig.entry) - .reduce((memo, entryName) => ({ - ...memo, - [`${entryName}.js`]: `${webpackConfig.output.publicPath}${entryName}.js`, - }), {}); - metalsmith.metadata().webpack = { - assets: { - ...assets, - 'js/common.js': `${webpackConfig.output.publicPath}js/common.js`, - }, - }; - - cb(); - }; -} diff --git a/docgen/readme-logo.png b/docgen/readme-logo.png deleted file mode 100644 index e842dd213e..0000000000 Binary files a/docgen/readme-logo.png and /dev/null differ diff --git a/docgen/rootFiles/_redirects b/docgen/rootFiles/_redirects deleted file mode 100644 index bd44143285..0000000000 --- a/docgen/rootFiles/_redirects +++ /dev/null @@ -1 +0,0 @@ -/ /instantsearch.js/react 301 diff --git a/docgen/src/Getting_started.md b/docgen/src/Getting_started.md deleted file mode 100644 index 1ae59ed9cf..0000000000 --- a/docgen/src/Getting_started.md +++ /dev/null @@ -1,317 +0,0 @@ ---- -title: Getting started tutorial -layout: main.pug -category: gettingstarted -withHeadings: true -navScroll: true ---- - -## Welcome to React InstantSearch - -React InstantSearch is the ultimate toolbox for creating instant-search -experiences using [React](https://facebook.github.io/react/) and [Algolia](https://www.algolia.com/). - -In this tutorial, you'll learn how to: - - - install `react-instantsearch` in your [React](https://facebook.github.io/react/) project - - bootstrap an app using the `` component - - display results from Algolia - - add widgets to filter the results - - connect your own component to the search - -## Before we start - -React InstantSearch is meant to be used with Algolia. - -Therefore, you'll need the credentials to an Algolia index. To ease -this getting started, here are the credentials to an already configured index: - - `appId`: `latency` - - `searchKey`: `3d9875e51fbd20c7754e65422f7ce5e1` - - `indexName`: `bestbuy` - -It contains sample data for an e-commerce website. - -This guide also expects you to have a working [React](https://facebook.github.io/react/) project. If you need to setup a React project, we suggest you use -[facebookincubator/create-react-app](https://github.com/facebookincubator/create-react-app#getting-started) which is the official React-CLI from Facebook. - -## Install `react-instantsearch` - -React InstantSearch is available in the [npm](https://www.npmjs.com) registry. Install it: - -```shell -yarn add react-instantsearch -``` - -Note: we use `yarn add` to install dependencies but React InstantSearch is also installable via `npm install`. - -## Add the `` component - -[``](widgets/InstantSearch.html) is the component that will connect to Algolia -and will synchronise all the widgets together. - -It maintains the state -of the search, does the queries, and provides the results to the widgets so -that they can update themselves when needed. - -```jsx -import React from 'react'; -import ReactDOM from 'react-dom'; - -import {InstantSearch} from 'react-instantsearch/dom'; - -const App = () => - - {/* Search widgets will go there */} - - -// Needed only if your js app doesn't do it already. -// Create-react-app does it for you -ReactDOM.render(, document.querySelector('#app')); -``` - -`appId`, `apiKey` and `indexName` are mandatory. Those props are the -credentials of your application in Algolia. They can be found in your [Algolia -dashboard](https://www.algolia.com/api-keys). - -Congrats 🎉! Your application is now connected to Algolia. - -In this section we've seen: - - How to connect a part of a [React](https://facebook.github.io/react/) application to Algolia - - How to configure your Algolia credentials - - > To get more *under the hood* information about the `` wrapper - > component, [read our guide](guide/.html). - -## Load the Algolia theme - -We do not inject any CSS in your application by default, only CSS class names are declared -on our widgets. It's your responsibility to then load a theme or style the CSS classes accordingly. - -We provide an Algolia theme that should be a good start. - -Include it in your webpage with this CDN link or copy paste the raw content: - -```html - -``` - -Read the [styling](guide/Styling_widgets.html) guide for more information. - -## Display results - -The core of a search experience is to display results. By default, React InstantSearch -will do a query at the start of the page and will retrieve the most relevant hits. - -To display results, we are gonna use the [Hits](widgets/Hits.html) widget. This widget will -display all the results returned by Algolia, and it will update when there -are new results. - -While we're doing that, let's create a new component for the search so we -ease the reading of our React code: - -```jsx -// First, we need to add the Hits component to our import -import {InstantSearch, Hits} from 'react-instantsearch/dom'; - -// [...] - -function Search() { - return ( -
    - -
    - ); -} -``` - -We can then call this component in the render of App: - -```jsx -const App = () => - - - -``` - -You should now be able to see the results without any styling. This -view lets you inspect the values that are retrieved from Algolia, in order -to build your custom view. - -In order to customize the view for each product, we can use a special prop -of the Hit widget: `hitComponent`. This prop accepts a Component that -will be used for each hit in the results from Algolia. - -```jsx -function Product({hit}) { - return ( -
    - {hit.name} -
    - ); -}; -``` - -The widget receives a prop `hit` that contains the content of the -record. Here we are only displaying the name for the sake of simplicity -but there is no limit as long as the data is in the record. - -Now let's modify the `Hits` usage to add our new `hitComponent`. - -```jsx -function Search() { - return ( -
    - -
    - ); -} -``` - -In this section we've seen: - - how to display the results from Algolia - - how to customize the display of those results - -## Add a SearchBox - -Now that we've added the results, we can start querying our index. To do this, we are gonna use the [Searchbox](widgets/SearchBox.html) widget. Let's add it -in the Search component that we created before: - -```jsx -// We need to add the SearchBox to our import -import {InstantSearch, Hits, SearchBox} from 'react-instantsearch/dom'; - -// [...] - -function Search() { - return ( -
    - - -
    - ); -} -``` - -The search is now interactive but we don't see what matched in each of the products. -Good thing for us, Algolia computes the matching part. Let's add this to our custom -search result component: - -```jsx -// We need to add the Highlight widget to our import -import {InstantSearch, Hits, SearchBox, Highlight} from 'react-instantsearch/dom'; - -// [...] - -function Product({hit}) { - return ( -    
    - - - -
    - ); -}; -``` - -Now the search displays the results and highlights the part of the hit attribute -that matches the query. This pattern is very important in search, especially with -Algolia, so that the user knows what's going on. This way we create the search -dialog between the user and the data. - -In this part, we've seen the following: - - how to add a SearchBox to make queries into the records - - how to highlight the matched part of the results - - the importance of highlighting in a text-based search - -## Add RefinementList - -While the SearchBox is the way to go when it comes to textual search, you -may also want to provide filters based on the structure of the records. - -Algolia provides a set of parameters for filtering by facets, numbers or geo -location. Instantsearch packages those into a set of widgets and connectors. - -Since the dataset used here is an e-commerce one, let's add a [RefinementList](widgets/RefinementList.html) -to filter the products by categories: - -```jsx -// We need to add the RefinementList to our import -import {InstantSearch, Hits, SearchBox, Highlight, RefinementList} from 'react-instantsearch/dom'; - -// [...] - -function Search() { - return ( -
    - - - -
    - ); -} -``` - -The `attributeName` props specifies the faceted attribute to use in this widget. This -attribute should be declared as a facet in the index configuration as well. - -The values displayed are computed by Algolia from the results. - -In this part, we've seen the following: - - there are components for all types of refinements - - the RefinementList works with facets - - facets are computed from the results - -## Refine the search experience further - -We now miss two elements in our search interface: - - the ability to browse beyond the first page of results - - the ability to reset the search state - -Those two features are implemented respectively with the [Pagination](widgets/Pagination.html), [ClearAll](widgets/ClearAll.html) -and [CurrentRefinements](widgets/CurrentRefinements.html) widgets. Both have nice defaults which means that -we can use them directly without further configuration. - -```jsx -// We need to add the RefinementList to our import -import {InstantSearch, Hits, SearchBox, Highlight, RefinementList, -Pagination, CurrentRefinements, ClearAll} from 'react-instantsearch/dom'; - -// [...] - -function Search() { - return ( -
    - - - - - - -
    - ); -} -``` - -Current filters will display all the filters currently selected by the user. -This gives the user a synthetic way of understanding the current search. `ClearAll` -displays a button to remove all the filters. - -In this part, we've seen the following: - - how to clear the filters - - how to paginate the results - -## Next steps - -At this point, you know the basics of React InstantSearch. Read the guide to know and do more with it. - -
    -Next: Guide → -
    diff --git a/docgen/src/connectors/index.md b/docgen/src/connectors/index.md deleted file mode 100644 index 2216b1f889..0000000000 --- a/docgen/src/connectors/index.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Connectors -layout: main.pug -category: connector -showInNav: false ---- - -Connectors are higher order components. They encapsulate the logic for -a specific search concept and they provide a way to interact with -the instantsearch context. - -The [connectors guide](guide/Connectors.html) explains in details what are connectors -and when to use them. diff --git a/docgen/src/examples/Demos.md b/docgen/src/examples/Demos.md deleted file mode 100644 index 033b373b48..0000000000 --- a/docgen/src/examples/Demos.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Demos -mainTitle: Examples -layout: examples.pug -category: examples -navWeight: 1000 -examplesCTA: 'Go to live demo' -examples: [{ - id: 'e-commerce', - title: 'E-commerce', - description: 'This demos shows the usage of react-instantsearch in the context of an e-commerce website.' - },{ - id: 'e-commerce-infinite', - title: 'Infinite hits', - description: 'This demos based on e-commerce demonstrates the usage of the load more UX pattern.' - }, { - id: 'material-ui', - title: 'Material-UI', - description: 'This demos based on e-commerce demonstrates the integration of the Material UI component library with react-instantsearch.' - }, { - id: 'media', - title: 'Media', - description: 'This demos shows the usage of react-instantsearch in the context of a media website' - }, { - id: 'tourism', - title: 'Tourism', - description: 'This demos shows the usage of react-instantsearch in the context of a home renting website' - }] -examplesEndpoint: examples ---- - -## Demos - -To demonstrate the flexibility of React InstantSearch we created some demos. -If you think about a new example or have any questions about them, [come talk to us](https://discourse.algolia.com/c/instantsearch). diff --git a/docgen/src/examples/Recipes.md b/docgen/src/examples/Recipes.md deleted file mode 100644 index 2410ab6a0c..0000000000 --- a/docgen/src/examples/Recipes.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Recipes -mainTitle: Examples -layout: examples.pug -category: examples -navWeight: 1000 -examplesCTA: 'Read the code' -examples: [{ - id: 'react-router', - title: 'Usage with react-router v3.' - }, { - id: 'react-native', - title: 'Usage with react-native.' - }, { - id: 'autocomplete', - title: 'Autocomplete integration.' - }, { - id: 'multi-index', - title: 'Requests on multiple indices at once.' - }, { - id: 'react-router-v4', - title: 'Usage with react-router v4.' - }, { - id: 'geo-search', - title: 'Geo search using dynamic search parameters' - }] -examplesEndpoint: https://github.com/algolia/instantsearch.js/tree/v2/packages/react-instantsearch/examples ---- - -## Recipes - -To demonstrate more complex use cases of React InstantSearch we created some recipes. -If you think about a new recipe or have any questions about them, [come talk to us](https://discourse.algolia.com/c/instantsearch). diff --git a/docgen/src/examples/default-theme/App.js b/docgen/src/examples/default-theme/App.js deleted file mode 100644 index b6b82e6f4a..0000000000 --- a/docgen/src/examples/default-theme/App.js +++ /dev/null @@ -1,148 +0,0 @@ -/* eslint react/prop-types: 0 */ -import React from 'react'; -import {createConnector} from 'react-instantsearch'; -import { - InstantSearch, - Hits, - HierarchicalMenu, - RefinementList, - SearchBox, - SortBy, - Stats, - Pagination, - ClearAll, - StarRating, - RangeInput, - Highlight, - Configure, -} from 'react-instantsearch/dom'; -import {withUrlSync} from '../urlSync'; -import 'react-instantsearch-theme-algolia/style.scss'; - -const App = props => - - -
    -
    - - -
    - ; - -const Header = () => -
    - - -
    ; - -const Facets = () => - - ; - -const SideBarSection = ({title, children}) => -
    -
    {title}
    - {children} -
    ; - -const Hit = ({hit}) => { - const icons = []; - for (let i = 0; i < 5; i++) { - const suffix = i >= hit.rating ? '_empty' : ''; - icons.push(); - } - return ( -
    -
    -
    -
    -
    - {icons} -
    ${hit.price}
    -
    -
    -
    ); -}; - -const CustomResults = createConnector({ - displayName: 'CustomResults', - - getProvidedProps(props, searchState, searchResults) { - const noResults = searchResults.results ? searchResults.results.nbHits === 0 : false; - return {query: searchState.query, noResults}; - }, -})(({noResults, query}) => { - if (noResults) { - return ( -
    -
    - No results found matching {query} -
    -
    - ); - } else { - return ( -
    -
    -
    - - -
    - -
    - -
    -
    - ); - } -}); - -export default withUrlSync(App); diff --git a/docgen/src/examples/default-theme/index.html b/docgen/src/examples/default-theme/index.html deleted file mode 100644 index 62d2b4d526..0000000000 --- a/docgen/src/examples/default-theme/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Default theme -layout: example.pug -name: default-theme -category: examples -source: https://github.com/algolia/instantsearch.js/tree/v2/docgen/src/examples/default-theme -navWeight: 1 ---- -
    diff --git a/docgen/src/examples/default-theme/index.js b/docgen/src/examples/default-theme/index.js deleted file mode 100644 index 4cac2a3729..0000000000 --- a/docgen/src/examples/default-theme/index.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import {AppContainer} from 'react-hot-loader'; - -import App from './App.js'; - -ReactDOM.render(, document.querySelector('#app')); - -// Hot Module Replacement API -// this and AppContainer are react-hot-loader 3 API needs -// https://github.com/gaearon/react-hot-loader/blob/123d940ff34c3178549fec9d57b9378ff48b4841/docs/README.md -if (module.hot) { - module.hot.accept('./App.js', () => { - const NextApp = require('./App.js').default; - ReactDOM.render( - - - - , - document.querySelector('#app') - ); - }); -} - diff --git a/docgen/src/examples/default-theme/style.css b/docgen/src/examples/default-theme/style.css deleted file mode 100644 index 9c748ebb76..0000000000 --- a/docgen/src/examples/default-theme/style.css +++ /dev/null @@ -1,43 +0,0 @@ -.ais-InstantSearch__root { - padding-top: 60px; -} - -header.header { - display: flex; - z-index: 99; - padding-top: 60px; - width: 100%; - height: 60px; - padding: 10px; - background: #222F3F; -} - -header.header .is-logo { - float: left; - margin-right: 12px; -} - -header.header .logo { - float: left; - margin-right: 16px; - font-size: 30px; - font-weight: bold; - color: #FFFFFF; -} - -header.header .logo:hover { - text-decoration: none; -} - -.content-wrapper { - display: flex; -} - -.thank-you, .facet-wrapper { - margin: 10px 5px; -} - -.facet-category-title { - margin-top: 20px; - font-size: 120%; -} diff --git a/docgen/src/examples/e-commerce-infinite/App.js b/docgen/src/examples/e-commerce-infinite/App.js deleted file mode 100644 index cfd7cca7c2..0000000000 --- a/docgen/src/examples/e-commerce-infinite/App.js +++ /dev/null @@ -1,212 +0,0 @@ -/* eslint react/prop-types: 0 */ - -import React from 'react'; -import {createConnector} from 'react-instantsearch'; -import { - InstantSearch, - HierarchicalMenu, - RefinementList, - SortBy, - Stats, - ClearAll, - StarRating, - RangeInput, - Highlight, - Panel, - Configure, -} from 'react-instantsearch/dom'; -import { - connectSearchBox, - connectRefinementList, - connectInfiniteHits, -} from 'react-instantsearch/connectors'; -import 'react-instantsearch-theme-algolia/style.scss'; - -export default function App() { - return ( - - -
    -
    - - -
    - - ); -} - -const Header = () => -
    - - aeki - -
    ; - -const Facets = () => - ; - -const CustomSearchBox = ({currentRefinement, refine}) => -
    - refine(e.target.value)} - autoComplete="off" - className="form-control" - id="q"/> - - - -
    - ; - -const ColorItem = ({item, createURL, refine}) => { - const active = item.isRefined ? 'checked' : ''; - return ( - { - e.preventDefault(); - refine(item.value); - }} - data-facet-value={item.label} - > - - ); -}; - -const CustomColorRefinementList = ({items, refine, createURL}) => - items.length > 0 ?
    -
    Colors
    - {items.map(item => - - )} -
    : null; - -function CustomHits({hits, refine, hasMore}) { - const loadMoreButton = hasMore ? - : - ; - return ( -
    - {hits.map((hit, idx) => - - )} - {loadMoreButton} -
    - ); -} - -const Hit = ({item}) => { - const icons = []; - for (let i = 0; i < 5; i++) { - const suffix = i >= item.rating ? '_empty' : ''; - icons.push(); - } - return ( -
    -
    -
    -
    -
    -
    -
    -
    - {icons} -
    ${item.price}
    -
    -
    -
    ); -}; - -const CustomResults = createConnector({ - displayName: 'CustomResults', - - getProvidedProps(props, searchState, searchResults) { - const noResults = searchResults.results ? searchResults.results.nbHits === 0 : false; - return {query: searchState.query, noResults}; - }, -})(({noResults, query}) => { - if (noResults) { - return ( -
    -
    - No results found matching {query} -
    -
    - ); - } else { - return ( -
    -
    -
    - - -
    - -
    - -
    - ); - } -}); - -const ConnectedSearchBox = connectSearchBox(CustomSearchBox); -const ConnectedColorRefinementList = connectRefinementList(CustomColorRefinementList); -const ConnectedHits = connectInfiniteHits(CustomHits); diff --git a/docgen/src/examples/e-commerce-infinite/index.html b/docgen/src/examples/e-commerce-infinite/index.html deleted file mode 100644 index f85c7679de..0000000000 --- a/docgen/src/examples/e-commerce-infinite/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: E-commerce with infinite hits -layout: example.pug -name: e-commerce-infinite -category: examples -source: https://github.com/algolia/instantsearch.js/tree/v2/docgen/src/examples/e-commerce-infinite -navWeight: 1 -stylesheets: - - https://cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap.min.css - - https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css ---- -
    diff --git a/docgen/src/examples/e-commerce-infinite/index.js b/docgen/src/examples/e-commerce-infinite/index.js deleted file mode 100644 index 005b3cd118..0000000000 --- a/docgen/src/examples/e-commerce-infinite/index.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import {AppContainer} from 'react-hot-loader'; - -import App from './App.js'; - -ReactDOM.render(, document.querySelector('#app')); - -// Hot Module Replacement API -// this and AppContainer are react-hot-loader 3 API needs -// https://github.com/gaearon/react-hot-loader/blob/123d940ff34c3178549fec9d57b9378ff48b4841/docs/README.md -if (module.hot) { - module.hot.accept('./App.js', () => { - const NextApp = require('./App.js').default; - ReactDOM.render( - - - - , - document.querySelector('#app') - ); - }); -} diff --git a/docgen/src/examples/e-commerce-infinite/style.css b/docgen/src/examples/e-commerce-infinite/style.css deleted file mode 100644 index 09cc1e8bb2..0000000000 --- a/docgen/src/examples/e-commerce-infinite/style.css +++ /dev/null @@ -1,595 +0,0 @@ -body { - font-family: Verdana, sans-serif; -} - -a { - color: #0063C3; - text-decoration: none; -} - -hr { - margin-top: 10px; - margin-bottom: 10px; -} - -hr:after { - content: ""; - display: table; - clear: both; -} - -.transparent { - opacity: 0; -} - -.content-wrapper { - min-width: 620px; -} - -header { - position: absolute; - z-index: 99; - top: 60px; - width: 100%; - height: 60px; - padding: 10px; - background: #222F3F; -} - -header .is-logo { - float: left; - margin-right: 12px; -} - -header .logo { - float: left; - margin-right: 16px; - font-size: 30px; - font-weight: bold; - color: #FFFFFF; -} - -header .logo:hover { - text-decoration: none; -} - -header .input-group { - float: left; - width: 350px; - margin-top: 5px; - border-radius: 5px; - overflow: hidden; -} - -header .input-group #q { - border: 0; - height: 100%; -} - -header .input-group #q:focus { - outline: none; - box-shadow: inset 0 0 0 1px #FFBE61; -} - -header .input-group .form-control { - border: 0; - height: 100%; -} - -header .input-group .form-control:focus { - outline: none; - box-shadow: inset 0 0 0 1px #FFBE61; -} - -header .input-group .input-group-btn button { - height: 100%; - padding: 0 30px; - border: 0; - background: #FFBE61; -} - -header .input-group .input-group-btn { - height: 100%; - border: 0; - background: #FFBE61; -} - -aside { - position: relative; - overflow-y: auto; - top: 120px; - left: 0; - bottom: 0; - width: 240px; - padding: 20px; - border-right: 1px solid #EEE; - background: #FFFFFF; - z-index: 99; -} - -aside .facet-category-title { - font-size: 1.2em; - color: #888; - margin: 0 0 8px; -} - -aside .facet-wrapper { - padding-bottom: 12px; - border-bottom: solid 1px #EEE; - margin-bottom: 12px; - font-size: .87em; - display: flex; - flex-direction: column; -} - -aside .facet { - margin-bottom: 16px; -} - -.ais-Panel__title { - font-weight: bold; - margin: 4px 0; - clear: both; - padding: initial; - text-transform: none; - border-bottom: none; -} - -aside .ais-HierarchicalMenu__itemLink, aside a { - color: #000000; -} - -aside .ais-HierarchicalMenu__item{ - margin-top: 0px; - font-size: 12px; -} - -aside .ais-HierarchicalMenu__item:after{ - content: none; -} - -aside .ais-HierarchicalMenu__itemLink:hover, aside a:hover, .ais-StarRating__ratingLink:hover { - color: #B32500; - text-decoration: none; -} - -aside .ais-HierarchicalMenu__itemSelected > a, .ais-HierarchicalMenu__itemSelectedParent > a { - font-weight: bold; -} - -aside .ais-HierarchicalMenu__itemLink input, aside a input { - margin-right: 4px; -} - -aside .ais-HierarchicalMenu__itemLabel:before { - content: "> " -} - -aside .ais-HierarchicalMenu__itemItems { - margin-left: 10px; -} - -aside .ais-RefinementList__item { - font-size: 12px; -} - -aside .ais-RefinementList__item label { - font-weight: 100; - color: #000000; -} - -aside .ais-RefinementList__item label input { - margin-right: 5px; -} - -aside .ais-RefinementList__itemCount, .ais-HierarchicalMenu__itemCount { - color: #6F6E6C; - background-color: initial; -} - -aside .ais-RefinementList__itemCount:before, .ais-HierarchicalMenu__itemCount:before { - content: '(' -} - -aside .ais-RefinementList__itemCount:after, .ais-HierarchicalMenu__itemCount:after { - content: ')' -} - -aside .facet-name { - width: 100%; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - display: inline-block; -} - -aside .facet-count { - margin-left: 4px; - color: #888; -} - -aside #colors:after { - content: ""; - display: table; - clear: both; -} - -aside .facet-color { - width: 28px; - height: 28px; - border-radius: 3px; - margin: 0 6px 6px; - display: block; - overflow: hidden; - float: left; -} - -aside .facet-color.checked { - box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.5); -} - -aside .facet-color[data-facet-value="White"] { - background-color: #FFFFFF; - box-shadow: inset 0 0 0 1px #CCC; -} - -aside .facet-color[data-facet-value="White"].checked { - box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.1); -} - -aside .facet-color[data-facet-value="Black"] { - background-color: #000000; -} - -aside .facet-color[data-facet-value="Black-brown"] { - background-color: #382919; -} - -aside .facet-color[data-facet-value="Pink"] { - background-color: #C0116D; -} - -aside .facet-color[data-facet-value="Gray"] { - background-color: #6F6E6C; -} - -aside .facet-color[data-facet-value="Blue"] { - background-color: #5182A1; -} - -aside .facet-color[data-facet-value="Green"] { - background-color: #1E9C5E; -} - -aside .facet-color[data-facet-value="Brown"] { - background-color: #7B6A63; -} - -aside .facet-color[data-facet-value="Red"] { - background-color: #BC1C1A; -} - -aside .facet-color[data-facet-value="Dark gray"] { - background-color: #444348; -} - -aside .facet-color[data-facet-value="Silver color"] { - background-color: #AAAAA8; -} - -aside .facet-color[data-facet-value="Light brown"] { - background-color: #C19A6E; -} - -aside .facet-color[data-facet-value="Black-brown stain"] { - background-color: #4B4640; -} - -aside .facet-color[data-facet-value="Off-white"] { - background-color: #D0C8B4; -} - -aside .facet-color[data-facet-value="Beige"] { - background-color: #C9B8A3; -} - -aside .facet-color[data-facet-value="Light green"] { - background-color: #ABBD9B; -} - -aside .facet-color[data-facet-value="White stain"] { - background-color: #E4E1DC; -} - -aside .facet-color[data-facet-value="Turquoise"] { - background-color: #46BCC9; -} - -aside .facet-color[data-facet-value="Birch effect"] { - background-color: #CBBFA4; -} - -aside .facet-color[data-facet-value="Yellow"] { - background-color: #F5E500; -} - -aside .facet-color[data-facet-value="Dark blue"] { - background-color: #374063; -} - -aside .facet-color[data-facet-value="Galvanized"] { - background-color: #726F6A; -} - -aside .facet-color[data-facet-value="Birch"] { - background-color: #726F6A; -} - -aside .facet-color[data-facet-value="Dark brown"] { - background-color: #74523E; -} - -aside .facet-color[data-facet-value="High gloss gray"] { - background-color: #E5E5E5; -} - -aside .facet-color[data-facet-value="Gray/white"] { - background-color: #E5E5E5; -} - -aside .facet-color[data-facet-value="Red/white"] { - background-color: #FA757B; -} - -aside .facet-color[data-facet-value="Clear"] { - background-color: #D5DAE0; -} - -aside .facet-color[data-facet-value="Matte black"] { - background-color: #616872; -} - -aside .facet-color[data-facet-value="Matte white"] { - background-color: #DCDBD7; -} - -aside .facet-color[data-facet-value="White stained oak effect"] { - background-color: #E7E8E0; -} - -.results-wrapper { - position: absolute; - top: 60px; - right: 0; - padding: 70px 10px 10px 240px; -} - -.results-wrapper .no-results { - text-align: center; -} - -.results-wrapper .no-results .query { - font-weight: 700; -} - -#results-topbar { - display: block; - width: 100%; - line-height: 22px; -} - -#results-topbar:after { - content: ""; - display: table; - clear: both; -} - -#results-topbar .sort-by { - float: right; -} - -#results-topbar .sort-by label { - margin-right: 5px; -} - -#results-topbar label { - font-weight: normal; - font-size: .8em; -} - -#results-topbar #sort-by-selector { - display: inline-block; -} - -.ais-ClearAll__root { - display: block; - margin-bottom: 16px; - font-size: 13px; - background-color: white; - border: 1px solid lightgray; - color: #000000; -} - -.ais-Stats__root { - padding-left: 10px; - font-size: .8em; -} - -#hits { - margin: 0 -.5%; -} - -#hits:after { - content: ""; - display: table; - clear: both; -} - -.hit { - width: 24%; - float: left; - padding: 10px 20px 20px; - margin-bottom: 10px; - border-bottom: solid 1px #EEE; - margin: .5%; - border: solid 1px #EEE; - box-shadow: 0 0 3px #f6f6f6; - position: relative; -} - -@media (max-width: 960px) { - .hit { - width: 49%; - } -} - -.hit .product-picture-wrapper { - display: table; - table-layout: fixed; - width: 100%; - text-align: center; - margin-bottom: 10px; -} - -.hit .product-picture { - display: table-cell; - vertical-align: middle; - margin: 0 auto; -} - -.hit .product-picture img { - -webkit-transition: opacity 500ms cubic-bezier(0.19, 1, 0.22, 1); - transition: opacity 500ms cubic-bezier(0.19, 1, 0.22, 1); - height: 150px; - max-width: 100%; -} - -@media (min-width: 1400px) { - .hit .product-picture img { - height: inherit; - } -} - -.hit .product-desc-wrapper { - height: 100px; - width: 100%; - overflow: hidden; - padding: 2px; -} - -.hit .product-name { - font-weight: bold; - color: #000000; - font-size: .9em; - margin: 0 0 8px; - min-width: 120px; -} - -.hit .product-type { - font-size: .8em; - margin: 0 0 10px; - color: #a2a2a2; -} - -.hit .product-price { - font-size: 1.1em; - font-weight: bold; - color: #000000; - float: right; - letter-spacing: -1px; -} - -.hit em { - color: #000000; - font-style: normal; - background-color: #FFBE61; -} - -.thank-you { - text-align: center; - font-size: .8em; - padding: 10px; -} - -.ais-price-ranges--item { - list-style-type: none; -} - -.ais-price-ranges--list { - padding: 0; -} - -footer { - margin-top: 10px; - font-size: 1.2em; - text-align: center; -} - -footer:after { - content: ""; - display: table; - clear: both; -} - -.ais-RangeInput__inputMin, .ais-RangeInput__inputMax { - width: 50px; - border-radius: 2px; - border: solid 1px #888; - font-weight: normal; - font-size: 12px; - padding: 0px; - margin: 0px; -} - -.ais-RangeInput__labelMin:before, .ais-RangeInput__labelMax:before { - content: '$'; -} - -.ais-RangeInput__labelMin, .ais-RangeInput__labelMax { - min-width: 0px; -} - -.ais-RangeInput__separator { - margin: 0px 5px; -} - -.ais-RangeInput__submit { - display: block; - float: right; - width: 22px; - height: 22px; - padding: 0; - margin-left: 4px; - font-size: 10px; - line-height: 20px; - border: solid 1px #888; - border-radius: 50%; - text-align: center; -} - -.ais-RangeInput__submit:hover { - color: #0063C3; - background-color: #FFFFFF; -} - -.ais-StarRating__ratingLabel, .ais-StarRating__ratingLabelSelected { - color: #000000; -} - -.ais-StarRating__ratingLabelSelected { - font-weight: 700; -} - -.ais-StarRating__ratingCount { - color: #6F6E6C; - background-color: initial; -} - -.ais-StarRating__ratingCount::before { - content: '(' -} - -.ais-StarRating__ratingCount::after { - content: ')' -} - diff --git a/docgen/src/examples/e-commerce/App.js b/docgen/src/examples/e-commerce/App.js deleted file mode 100644 index e39441e2b5..0000000000 --- a/docgen/src/examples/e-commerce/App.js +++ /dev/null @@ -1,213 +0,0 @@ -/* eslint react/prop-types: 0 */ - -import React from 'react'; -import {createConnector} from 'react-instantsearch'; -import { - InstantSearch, - HierarchicalMenu, - RefinementList, - SortBy, - Stats, - Pagination, - ClearAll, - StarRating, - RangeInput, - Highlight, - Panel, - Configure, -} from 'react-instantsearch/dom'; -import { - connectSearchBox, - connectRefinementList, - connectHits, -} from 'react-instantsearch/connectors'; -import {withUrlSync} from '../urlSync'; -import 'react-instantsearch-theme-algolia/style.scss'; - -const App = props => - - -
    -
    - - -
    - ; - -const Header = () => -
    - - aeki - -
    ; - -const Facets = () => - ; - -const CustomSearchBox = ({currentRefinement, refine}) => -
    - refine(e.target.value)} - autoComplete="off" - className="form-control" - id="q"/> - - - -
    - ; - -const ColorItem = ({item, createURL, refine}) => { - const active = item.isRefined ? 'checked' : ''; - return ( - { - e.preventDefault(); - refine(item.value); - }} - data-facet-value={item.label} - > - - ); -}; - -const CustomColorRefinementList = ({items, refine, createURL}) => - items.length > 0 ?
    -
    Colors
    - {items.map(item => - - )} -
    : null; - -function CustomHits({hits}) { - return ( -
    - {hits.map((hit, idx) => - - )} -
    - ); -} - -const Hit = ({item}) => { - const icons = []; - for (let i = 0; i < 5; i++) { - const suffix = i >= item.rating ? '_empty' : ''; - icons.push(); - } - return ( -
    -
    -
    -
    -
    -
    -
    -
    - {icons} -
    ${item.price}
    -
    -
    -
    ); -}; - -const CustomResults = createConnector({ - displayName: 'CustomResults', - - getProvidedProps(props, searchState, searchResults) { - const noResults = searchResults.results ? searchResults.results.nbHits === 0 : false; - return {query: searchState.query, noResults}; - }, -})(({noResults, query}) => { - if (noResults) { - return ( -
    -
    - No results found matching {query} -
    -
    - ); - } else { - return ( -
    -
    -
    - - -
    - -
    - -
    -
    - ); - } -}); - -const ConnectedSearchBox = connectSearchBox(CustomSearchBox); -const ConnectedColorRefinementList = connectRefinementList(CustomColorRefinementList); -const ConnectedHits = connectHits(CustomHits); - -export default withUrlSync(App); diff --git a/docgen/src/examples/e-commerce/index.html b/docgen/src/examples/e-commerce/index.html deleted file mode 100644 index 17cfc6f3ea..0000000000 --- a/docgen/src/examples/e-commerce/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: E-commerce -layout: example.pug -name: e-commerce -category: examples -source: https://github.com/algolia/instantsearch.js/tree/v2/docgen/src/examples/e-commerce -navWeight: 1 -stylesheets: - - https://cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap.min.css - - https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css ---- -
    diff --git a/docgen/src/examples/e-commerce/index.js b/docgen/src/examples/e-commerce/index.js deleted file mode 100644 index 005b3cd118..0000000000 --- a/docgen/src/examples/e-commerce/index.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import {AppContainer} from 'react-hot-loader'; - -import App from './App.js'; - -ReactDOM.render(, document.querySelector('#app')); - -// Hot Module Replacement API -// this and AppContainer are react-hot-loader 3 API needs -// https://github.com/gaearon/react-hot-loader/blob/123d940ff34c3178549fec9d57b9378ff48b4841/docs/README.md -if (module.hot) { - module.hot.accept('./App.js', () => { - const NextApp = require('./App.js').default; - ReactDOM.render( - - - - , - document.querySelector('#app') - ); - }); -} diff --git a/docgen/src/examples/e-commerce/style.css b/docgen/src/examples/e-commerce/style.css deleted file mode 100644 index 09cc1e8bb2..0000000000 --- a/docgen/src/examples/e-commerce/style.css +++ /dev/null @@ -1,595 +0,0 @@ -body { - font-family: Verdana, sans-serif; -} - -a { - color: #0063C3; - text-decoration: none; -} - -hr { - margin-top: 10px; - margin-bottom: 10px; -} - -hr:after { - content: ""; - display: table; - clear: both; -} - -.transparent { - opacity: 0; -} - -.content-wrapper { - min-width: 620px; -} - -header { - position: absolute; - z-index: 99; - top: 60px; - width: 100%; - height: 60px; - padding: 10px; - background: #222F3F; -} - -header .is-logo { - float: left; - margin-right: 12px; -} - -header .logo { - float: left; - margin-right: 16px; - font-size: 30px; - font-weight: bold; - color: #FFFFFF; -} - -header .logo:hover { - text-decoration: none; -} - -header .input-group { - float: left; - width: 350px; - margin-top: 5px; - border-radius: 5px; - overflow: hidden; -} - -header .input-group #q { - border: 0; - height: 100%; -} - -header .input-group #q:focus { - outline: none; - box-shadow: inset 0 0 0 1px #FFBE61; -} - -header .input-group .form-control { - border: 0; - height: 100%; -} - -header .input-group .form-control:focus { - outline: none; - box-shadow: inset 0 0 0 1px #FFBE61; -} - -header .input-group .input-group-btn button { - height: 100%; - padding: 0 30px; - border: 0; - background: #FFBE61; -} - -header .input-group .input-group-btn { - height: 100%; - border: 0; - background: #FFBE61; -} - -aside { - position: relative; - overflow-y: auto; - top: 120px; - left: 0; - bottom: 0; - width: 240px; - padding: 20px; - border-right: 1px solid #EEE; - background: #FFFFFF; - z-index: 99; -} - -aside .facet-category-title { - font-size: 1.2em; - color: #888; - margin: 0 0 8px; -} - -aside .facet-wrapper { - padding-bottom: 12px; - border-bottom: solid 1px #EEE; - margin-bottom: 12px; - font-size: .87em; - display: flex; - flex-direction: column; -} - -aside .facet { - margin-bottom: 16px; -} - -.ais-Panel__title { - font-weight: bold; - margin: 4px 0; - clear: both; - padding: initial; - text-transform: none; - border-bottom: none; -} - -aside .ais-HierarchicalMenu__itemLink, aside a { - color: #000000; -} - -aside .ais-HierarchicalMenu__item{ - margin-top: 0px; - font-size: 12px; -} - -aside .ais-HierarchicalMenu__item:after{ - content: none; -} - -aside .ais-HierarchicalMenu__itemLink:hover, aside a:hover, .ais-StarRating__ratingLink:hover { - color: #B32500; - text-decoration: none; -} - -aside .ais-HierarchicalMenu__itemSelected > a, .ais-HierarchicalMenu__itemSelectedParent > a { - font-weight: bold; -} - -aside .ais-HierarchicalMenu__itemLink input, aside a input { - margin-right: 4px; -} - -aside .ais-HierarchicalMenu__itemLabel:before { - content: "> " -} - -aside .ais-HierarchicalMenu__itemItems { - margin-left: 10px; -} - -aside .ais-RefinementList__item { - font-size: 12px; -} - -aside .ais-RefinementList__item label { - font-weight: 100; - color: #000000; -} - -aside .ais-RefinementList__item label input { - margin-right: 5px; -} - -aside .ais-RefinementList__itemCount, .ais-HierarchicalMenu__itemCount { - color: #6F6E6C; - background-color: initial; -} - -aside .ais-RefinementList__itemCount:before, .ais-HierarchicalMenu__itemCount:before { - content: '(' -} - -aside .ais-RefinementList__itemCount:after, .ais-HierarchicalMenu__itemCount:after { - content: ')' -} - -aside .facet-name { - width: 100%; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - display: inline-block; -} - -aside .facet-count { - margin-left: 4px; - color: #888; -} - -aside #colors:after { - content: ""; - display: table; - clear: both; -} - -aside .facet-color { - width: 28px; - height: 28px; - border-radius: 3px; - margin: 0 6px 6px; - display: block; - overflow: hidden; - float: left; -} - -aside .facet-color.checked { - box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.5); -} - -aside .facet-color[data-facet-value="White"] { - background-color: #FFFFFF; - box-shadow: inset 0 0 0 1px #CCC; -} - -aside .facet-color[data-facet-value="White"].checked { - box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.1); -} - -aside .facet-color[data-facet-value="Black"] { - background-color: #000000; -} - -aside .facet-color[data-facet-value="Black-brown"] { - background-color: #382919; -} - -aside .facet-color[data-facet-value="Pink"] { - background-color: #C0116D; -} - -aside .facet-color[data-facet-value="Gray"] { - background-color: #6F6E6C; -} - -aside .facet-color[data-facet-value="Blue"] { - background-color: #5182A1; -} - -aside .facet-color[data-facet-value="Green"] { - background-color: #1E9C5E; -} - -aside .facet-color[data-facet-value="Brown"] { - background-color: #7B6A63; -} - -aside .facet-color[data-facet-value="Red"] { - background-color: #BC1C1A; -} - -aside .facet-color[data-facet-value="Dark gray"] { - background-color: #444348; -} - -aside .facet-color[data-facet-value="Silver color"] { - background-color: #AAAAA8; -} - -aside .facet-color[data-facet-value="Light brown"] { - background-color: #C19A6E; -} - -aside .facet-color[data-facet-value="Black-brown stain"] { - background-color: #4B4640; -} - -aside .facet-color[data-facet-value="Off-white"] { - background-color: #D0C8B4; -} - -aside .facet-color[data-facet-value="Beige"] { - background-color: #C9B8A3; -} - -aside .facet-color[data-facet-value="Light green"] { - background-color: #ABBD9B; -} - -aside .facet-color[data-facet-value="White stain"] { - background-color: #E4E1DC; -} - -aside .facet-color[data-facet-value="Turquoise"] { - background-color: #46BCC9; -} - -aside .facet-color[data-facet-value="Birch effect"] { - background-color: #CBBFA4; -} - -aside .facet-color[data-facet-value="Yellow"] { - background-color: #F5E500; -} - -aside .facet-color[data-facet-value="Dark blue"] { - background-color: #374063; -} - -aside .facet-color[data-facet-value="Galvanized"] { - background-color: #726F6A; -} - -aside .facet-color[data-facet-value="Birch"] { - background-color: #726F6A; -} - -aside .facet-color[data-facet-value="Dark brown"] { - background-color: #74523E; -} - -aside .facet-color[data-facet-value="High gloss gray"] { - background-color: #E5E5E5; -} - -aside .facet-color[data-facet-value="Gray/white"] { - background-color: #E5E5E5; -} - -aside .facet-color[data-facet-value="Red/white"] { - background-color: #FA757B; -} - -aside .facet-color[data-facet-value="Clear"] { - background-color: #D5DAE0; -} - -aside .facet-color[data-facet-value="Matte black"] { - background-color: #616872; -} - -aside .facet-color[data-facet-value="Matte white"] { - background-color: #DCDBD7; -} - -aside .facet-color[data-facet-value="White stained oak effect"] { - background-color: #E7E8E0; -} - -.results-wrapper { - position: absolute; - top: 60px; - right: 0; - padding: 70px 10px 10px 240px; -} - -.results-wrapper .no-results { - text-align: center; -} - -.results-wrapper .no-results .query { - font-weight: 700; -} - -#results-topbar { - display: block; - width: 100%; - line-height: 22px; -} - -#results-topbar:after { - content: ""; - display: table; - clear: both; -} - -#results-topbar .sort-by { - float: right; -} - -#results-topbar .sort-by label { - margin-right: 5px; -} - -#results-topbar label { - font-weight: normal; - font-size: .8em; -} - -#results-topbar #sort-by-selector { - display: inline-block; -} - -.ais-ClearAll__root { - display: block; - margin-bottom: 16px; - font-size: 13px; - background-color: white; - border: 1px solid lightgray; - color: #000000; -} - -.ais-Stats__root { - padding-left: 10px; - font-size: .8em; -} - -#hits { - margin: 0 -.5%; -} - -#hits:after { - content: ""; - display: table; - clear: both; -} - -.hit { - width: 24%; - float: left; - padding: 10px 20px 20px; - margin-bottom: 10px; - border-bottom: solid 1px #EEE; - margin: .5%; - border: solid 1px #EEE; - box-shadow: 0 0 3px #f6f6f6; - position: relative; -} - -@media (max-width: 960px) { - .hit { - width: 49%; - } -} - -.hit .product-picture-wrapper { - display: table; - table-layout: fixed; - width: 100%; - text-align: center; - margin-bottom: 10px; -} - -.hit .product-picture { - display: table-cell; - vertical-align: middle; - margin: 0 auto; -} - -.hit .product-picture img { - -webkit-transition: opacity 500ms cubic-bezier(0.19, 1, 0.22, 1); - transition: opacity 500ms cubic-bezier(0.19, 1, 0.22, 1); - height: 150px; - max-width: 100%; -} - -@media (min-width: 1400px) { - .hit .product-picture img { - height: inherit; - } -} - -.hit .product-desc-wrapper { - height: 100px; - width: 100%; - overflow: hidden; - padding: 2px; -} - -.hit .product-name { - font-weight: bold; - color: #000000; - font-size: .9em; - margin: 0 0 8px; - min-width: 120px; -} - -.hit .product-type { - font-size: .8em; - margin: 0 0 10px; - color: #a2a2a2; -} - -.hit .product-price { - font-size: 1.1em; - font-weight: bold; - color: #000000; - float: right; - letter-spacing: -1px; -} - -.hit em { - color: #000000; - font-style: normal; - background-color: #FFBE61; -} - -.thank-you { - text-align: center; - font-size: .8em; - padding: 10px; -} - -.ais-price-ranges--item { - list-style-type: none; -} - -.ais-price-ranges--list { - padding: 0; -} - -footer { - margin-top: 10px; - font-size: 1.2em; - text-align: center; -} - -footer:after { - content: ""; - display: table; - clear: both; -} - -.ais-RangeInput__inputMin, .ais-RangeInput__inputMax { - width: 50px; - border-radius: 2px; - border: solid 1px #888; - font-weight: normal; - font-size: 12px; - padding: 0px; - margin: 0px; -} - -.ais-RangeInput__labelMin:before, .ais-RangeInput__labelMax:before { - content: '$'; -} - -.ais-RangeInput__labelMin, .ais-RangeInput__labelMax { - min-width: 0px; -} - -.ais-RangeInput__separator { - margin: 0px 5px; -} - -.ais-RangeInput__submit { - display: block; - float: right; - width: 22px; - height: 22px; - padding: 0; - margin-left: 4px; - font-size: 10px; - line-height: 20px; - border: solid 1px #888; - border-radius: 50%; - text-align: center; -} - -.ais-RangeInput__submit:hover { - color: #0063C3; - background-color: #FFFFFF; -} - -.ais-StarRating__ratingLabel, .ais-StarRating__ratingLabelSelected { - color: #000000; -} - -.ais-StarRating__ratingLabelSelected { - font-weight: 700; -} - -.ais-StarRating__ratingCount { - color: #6F6E6C; - background-color: initial; -} - -.ais-StarRating__ratingCount::before { - content: '(' -} - -.ais-StarRating__ratingCount::after { - content: ')' -} - diff --git a/docgen/src/examples/index.md b/docgen/src/examples/index.md deleted file mode 100644 index dd732124ed..0000000000 --- a/docgen/src/examples/index.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Examples -layout: examples.pug -category: examples -navWeight: 1000 ---- - -## Examples - -To demonstrate the flexibility of React InstantSearch we created some [live demos](examples/Demos.html) and [code recipes](examples/Recipes.html) linking React InstantSearch to popular React libraries like [React Router](https://github.com/ReactTraining/react-router). diff --git a/docgen/src/examples/material-ui/App.js b/docgen/src/examples/material-ui/App.js deleted file mode 100644 index 03660574d7..0000000000 --- a/docgen/src/examples/material-ui/App.js +++ /dev/null @@ -1,331 +0,0 @@ -/* eslint react/prop-types: 0 */ - -import injectTapEventPlugin from 'react-tap-event-plugin'; -import React from 'react'; -import { - connectSearchBox, - connectRefinementList, - connectHierarchicalMenu, - connectSortBy, - connectInfiniteHits, - connectCurrentRefinements, -} from 'react-instantsearch/connectors'; -import { - InstantSearch, - Highlight, - Configure, -} from 'react-instantsearch/dom'; - -import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; -import { - TextField, - Checkbox, - Subheader, - List, - ListItem, - FlatButton, - RaisedButton, - MenuItem, - Card, - Divider, - CardHeader, CardTitle, - AppBar, - FontIcon, - IconMenu, - Drawer, - IconButton, -} from 'material-ui'; -import SortIcon from 'material-ui/svg-icons/content/sort'; -import {withUrlSync} from '../urlSync'; - -injectTapEventPlugin(); - -const App = props => - - - ; - -const isMobile = window.innerWidth < 450; -const MaterialUiExample = props => - - - - ; - -const Content = React.createClass({ - getInitialState() { - return {drawer: !isMobile}; - }, - drawerAction () { - this.setState({drawer: !this.state.drawer}); - }, - render() { - const baseDrawerStyle = { - transition: 'none', - top: 120, - }; - const openDrawerStyle = { - ...baseDrawerStyle, - transform: 'translate(0)', - zIndex: 90, - }; - const closedDrawerStyle = { - ...baseDrawerStyle, - transform: 'translate(-300px)', - }; - const defaultMarginLeft = isMobile ? window.innerWidth : 300; - const marginLeft = this.state.drawer ? defaultMarginLeft : 0; - const displayDrawer = this.state.drawer ? openDrawerStyle : closedDrawerStyle; - return ( -
    - -
    - - -
    -
    -
    -
    - - - - - - - - -
    - -
    -
    -
    -
    - -
    -
    -
    - ); - }, -}); - -const MaterialUiSearchBox = ({currentRefinement, refine}) => { - const style = { - backgroundColor: 'white', - display: 'flex', - alignItems: 'center', - padding: '0px 10px', - marginLeft: 0, - flexGrow: 1, - }; - - const clear = currentRefinement ? - refine('')}>clear - : null; - - return ( -
    - search - refine(e.target.value)} - id="SearchBox" - hintText="Search for a product..." - fullWidth={true} - underlineShow={false} - /> - {clear} -
    ); -}; - -const CheckBoxItem = ({item, refine}) => - { - e.preventDefault(); - refine(item.value); - }} - />} - /> - ; - -const MaterialUiCheckBoxRefinementList = ({items, attributeName, refine, createURL}) => - - {attributeName.toUpperCase()} - {items.map(item => - - )} - - ; - -const MaterialUiNestedList = function ({id, items, refine}) { - return - {id.toUpperCase()} - {items.map((item, idx) => { - const nestedElements = item.items ? item.items.map((child, childIdx) => - { - e.preventDefault(); - refine(child.value); - }} - style={child.isRefined ? {fontWeight: 700} : {}} - /> - ) : []; - return { - e.preventDefault(); - refine(item.value); - }} - style={item.isRefined ? {fontWeight: 700} : {}} - />; - } - )} - ; -}; - -const MaterialUiSortBy = React.createClass({ - render() { - return ( - } - onChange={this.handleChange} - value={this.props.currentRefinement} - > - {this.props.items.map(item => - { - e.preventDefault(); - this.props.refine(item.value); - }}/> - )} - - ); - }, - -}); - -function CustomHits({hits, marginLeft, hasMore, refine}) { - const cardStyle = isMobile - ? { - width: '100%', - height: 250, - marginBottom: 10, - position: 'relative', - } : { - width: 270, - height: 250, - marginBottom: 10, - marginLeft: 10, - position: 'relative', - }; - - const containerCardStyle = { - marginLeft, - paddingLeft: isMobile ? 0 : 48, - display: 'flex', - flexWrap: 'wrap', - }; - const imageHolderStyle = { - textAlign: 'center', - }; - return ( -
    -
    - {hits.map((hit, idx) => - - } - /> -
    - -
    - - ${hit.price}} - subtitle={} - style={{position: 'absolute', bottom: 0, left: 0, right: 0, background: 'rgba(255, 255, 255, 0.6)'}} - titleStyle={{fontSize: 16}} - /> -
    - )} -
    -
    - { - if (hasMore) { - refine(); - } - }} - primary - disabled={!hasMore} - label="Load More" - style={{alignSelf: 'center', marginLeft, marginBottom: 10}} - /> -
    -
    - ); -} - -function MaterialUiClearAllFilters({items, refine}) { - return ( - refine(items)} - label="Clear All" - primary - style={{height: 48, width: '100%'}} - className="ClearAll" - /> - ); -} - -const ConnectedSearchBox = connectSearchBox(MaterialUiSearchBox); - -const ConnectedCheckBoxRefinementList = connectRefinementList(MaterialUiCheckBoxRefinementList); - -const ConnectedNestedList = connectHierarchicalMenu(MaterialUiNestedList); - -const ConnectedSortBy = connectSortBy(MaterialUiSortBy); - -const ConnectedHits = connectInfiniteHits(CustomHits); - -const ConnectedCurrentRefinements = connectCurrentRefinements(MaterialUiClearAllFilters); - -export default withUrlSync(App); diff --git a/docgen/src/examples/material-ui/index.html b/docgen/src/examples/material-ui/index.html deleted file mode 100644 index c6f18dd427..0000000000 --- a/docgen/src/examples/material-ui/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Material-UI -layout: example.pug -name: material-ui -category: examples -source: https://github.com/algolia/instantsearch.js/tree/v2/docgen/src/examples/material-ui -navWeight: 1 -stylesheets: - - https://fonts.googleapis.com/icon?family=Material+Icons ---- -
    diff --git a/docgen/src/examples/material-ui/index.js b/docgen/src/examples/material-ui/index.js deleted file mode 100644 index 005b3cd118..0000000000 --- a/docgen/src/examples/material-ui/index.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import {AppContainer} from 'react-hot-loader'; - -import App from './App.js'; - -ReactDOM.render(, document.querySelector('#app')); - -// Hot Module Replacement API -// this and AppContainer are react-hot-loader 3 API needs -// https://github.com/gaearon/react-hot-loader/blob/123d940ff34c3178549fec9d57b9378ff48b4841/docs/README.md -if (module.hot) { - module.hot.accept('./App.js', () => { - const NextApp = require('./App.js').default; - ReactDOM.render( - - - - , - document.querySelector('#app') - ); - }); -} diff --git a/docgen/src/examples/material-ui/style.css b/docgen/src/examples/material-ui/style.css deleted file mode 100644 index caef6b2f86..0000000000 --- a/docgen/src/examples/material-ui/style.css +++ /dev/null @@ -1,24 +0,0 @@ -em { - color: rgb(0, 188, 212);; -} - -html,body{ - -webkit-overflow-scrolling : touch !important; - overflow: auto !important; - height: 100% !important; -} - -.cm-navigation { - top: 0px -} - -.Header__appBar { - box-shadow: none !important; - position: fixed !important; - top: 60px; -} - -span[type='button']{ - background: white!important; - -webkit-appearance: inherit!important; -} \ No newline at end of file diff --git a/docgen/src/examples/media/App.js b/docgen/src/examples/media/App.js deleted file mode 100644 index 8d70e2da06..0000000000 --- a/docgen/src/examples/media/App.js +++ /dev/null @@ -1,150 +0,0 @@ - -/* eslint react/prop-types: 0 */ - -import React from 'react'; -import 'react-instantsearch-theme-algolia/style.scss'; - -import { - InstantSearch, - Hits, - Stats, - Pagination, - StarRating, - Highlight, - Configure, -} from 'react-instantsearch/dom'; - -import {connectSearchBox, connectRefinementList} from 'react-instantsearch/connectors'; -import {withUrlSync} from '../urlSync'; - -const App = props => - - -
    -
    - - -
    - ; - -const Header = () => -
    - - - You - -
    ; - -const SearchBox = connectSearchBox( - ({currentRefinement, refine}) => -
    -
    - refine(e.target.value)} - autoComplete="off" - className="form-control" - /> - - - -
    -
    -); - -const Facets = () => ; - -const Panel = ({title, children, id}) => -
    -
    {title}
    - {children} -
    ; - -const Star = ({active}) => ; -const Stars = ({rating}) => { - const stars = []; - for (let i = 1; i <= 5; ++i) { - stars.push(i <= rating); - } - return {stars.map((active, idx) => )}; -}; -const Genre = ({name}) => {name}; -const Genres = ({genres}) =>

    {genres.map((genre, idx) => )}

    ; - -const Hit = hit => { - const { - image, - rating, - year, - genre, - } = hit.hit; - return ( -
    -
    -
    -
    -
    -

    - - -

    -

    {year}

    - -
    -
    - ); -}; - -const Results = connectSearchBox(() => -
    -
    -
    -
    - -
    - ); - -const RefinementListLinks = connectRefinementList(({items, refine, createURL}) => { - const hitComponents = items.map(item => - - ); - - return ( -
    - {hitComponents} -
    - ); -}); - -export default withUrlSync(App); diff --git a/docgen/src/examples/media/index.html b/docgen/src/examples/media/index.html deleted file mode 100644 index e2f377b7e5..0000000000 --- a/docgen/src/examples/media/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Media -layout: example.pug -name: media -category: examples -source: https://github.com/algolia/instantsearch.js/tree/v2/docgen/src/examples/media -navWeight: 1 -stylesheets: - - https://cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap.min.css - - https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css - - https://fonts.googleapis.com/css?family=Roboto ---- -
    diff --git a/docgen/src/examples/media/index.js b/docgen/src/examples/media/index.js deleted file mode 100644 index 005b3cd118..0000000000 --- a/docgen/src/examples/media/index.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import {AppContainer} from 'react-hot-loader'; - -import App from './App.js'; - -ReactDOM.render(, document.querySelector('#app')); - -// Hot Module Replacement API -// this and AppContainer are react-hot-loader 3 API needs -// https://github.com/gaearon/react-hot-loader/blob/123d940ff34c3178549fec9d57b9378ff48b4841/docs/README.md -if (module.hot) { - module.hot.accept('./App.js', () => { - const NextApp = require('./App.js').default; - ReactDOM.render( - - - - , - document.querySelector('#app') - ); - }); -} diff --git a/docgen/src/examples/media/style.css b/docgen/src/examples/media/style.css deleted file mode 100644 index cb1d51197d..0000000000 --- a/docgen/src/examples/media/style.css +++ /dev/null @@ -1,294 +0,0 @@ -body { - min-height: 100%; - font-family: Roboto; - background: #F1F1F1; -} - -a { - color: #333333; -} - -article hr { - margin: 10px 14px; - float: none; - width: initial; -} - -.is-logo { - float: left; - margin-left: 18px; -} - -.logo { - margin-left: 15px; - font-size: 30px; - font-weight: bold; - float: left; -} - -.logo:hover { - text-decoration: none; -} - -.logo i { - margin-left: 5px; - color: #E91D00; -} - -header { - background: #FFFFFF; - padding: 10px; - border-bottom: 1px solid #E8E8E8; - position: relative; - top: 60px; - left: 0; - right: 0; - z-index: 2; -} - -.searchbox-container { - margin-left: 240px; - max-width: 400px; -} - -.searchbox-container .input-group { - margin-top: 5px; -} - -.searchbox-container .form-control:focus { - outline: none; - box-shadow: none; -} - -.searchbox-container button { - padding-left: 20px; - padding-right: 20px; - background: #F8F8F8; - border-radius: 0; -} - -section { - background: #F1F1F1; - min-height: 100%; - z-index: 1; -} - -section aside { - position: absolute; - top: 130px; - left: 0; - bottom: 0; - width: 230px; - background: #FFFFFF; - border-right: 1px solid #E8E8E8; -} - -.nav { - margin: 0 20px; -} - -.nav li a { - display: block; - padding: 2px 10px; - margin: 10px 0; -} - -.nav li a:hover { - color: #FFFFFF; - background: #333333; -} - -.nav li.separator { - height: 1px; - background: #E8E8E8; -} - -section aside h5 { - color: #CE1312; - margin-left: 30px; - text-transform: uppercase; - font-size: 10px; - margin-top: 20px; -} - -section aside .badge { - font-size: .8em; - background: #BBBBBB; - position: relative; - top: 1px; -} - -#genres .item { - display: block; - cursor: pointer; - padding: 4px 4px 4px 8px; - font-weight: normal; - font-size: .9em; - margin: 0 0 -1px; -} - -#genres .item:hover { - background: #333333; - color: #FFFFFF; - text-decoration: none; -} - -#genres .active .item { - border: 1px solid #CE1312; - margin-top: -1px; -} - -#genres .active .badge { - background: #333333; -} - -section article { - margin-top: 64px; - margin-bottom: 10px; - margin-left: 237px; - margin-right: 10px; - padding: 10px 0; - max-width: 100%; - background: #FFFFFF; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -} - -#stats { - padding-right: 14px; - font-size: .8em; - line-height: 24px; -} - -#hits { - padding: 0 15px; -} - -.ais-Pagination__root { - box-shadow: none; - border: none; - border-radius: initial; - padding: 0px; -} - -.ais-Pagination__item { - display: inline-block; - border: 1px solid; - border-color: #ddd; - padding: 0px; -} - -.ais-Pagination__item + .ais-Pagination__item { - margin-left: 4px; -} - -.ais-Pagination__itemDisabled{ - display: none; -} - -.ais-Pagination__itemLink{ - display:block; - background: #F8F8F8; - padding: 3px 8px; - color: #333333; -} - -.ais-Pagination__itemSelected { - background: #FF585B; -} - -.ais-Pagination__itemSelected .ais-Pagination__itemLink { - border-color: #b5b5b5; - background: #E8E8E8; -} - -.ais-Pagination__itemLink:hover { - text-decoration: none; - border-color: #cfcfcf; - background: #ebebeb; - color: #333333; -} - -.hit { - margin-bottom: 10px; - height: 130px; - border: 1px solid #F3F3F3; -} - -.hit em { - font-style: normal; - background: #FFFFD4; - text-decoration: underline; -} - -.hit .media-object { - height: 130px; - width: 130px; - overflow: hidden; - background-size: contain; - background-repeat: no-repeat; - background-position: center center; -} - -.hit .media-heading { - color: #167AC6; - font-weight: normal; - font-size: 18px; -} - -.thank-you { - font-size: .8em; - margin-top: 18px; - margin-left: 30px; -} - -.thank-you a { - color: #CE1312; -} - -.stars { - margin-left: 5px; -} - -.star { - /* item star */ - display: inline-block; - width: 1em; - height: 1em; -} - -.star:before { - content: '\2605'; - color: #FBAE00; -} - -.star__empty { - /* empty star */ - display: inline-block; - width: 1em; - height: 1em; -} - -.star__empty:before { - content: '\2606'; - color: #FBAE00; -} - -.genre, .year { - margin: 12px 0; -} - -.genre .badge + .badge { - margin-left: 4px; -} - -.year { - font-weight: bold; -} - -.genre .badge { - background: #BBBBBB; -} - -#ratings { - padding: 0 20px; -} diff --git a/docgen/src/examples/tourism/App.js b/docgen/src/examples/tourism/App.js deleted file mode 100644 index c5963b0481..0000000000 --- a/docgen/src/examples/tourism/App.js +++ /dev/null @@ -1,356 +0,0 @@ -/* eslint react/prop-types: 0 */ -import { - InstantSearch, - SearchBox, - Pagination, - Highlight, - Configure, -} from 'react-instantsearch/dom'; -import { - connectHits, - connectMultiRange, - connectRefinementList, - connectRange, -} from 'react-instantsearch/connectors'; - -import React, {PropTypes} from 'react'; -import GoogleMap from 'google-map-react'; -import {fitBounds} from 'google-map-react/utils'; - -import Rheostat from 'rheostat'; - -import {withUrlSync} from '../urlSync'; - -const App = props => - - -
    - - - ; - -function Header() { - return ( -
    -
    - - - - BnB - - -
    -
    - ); -} - -function Filters() { - return ( -
    -
    -
    - -
    - - - - -
    - -
    -
    -
    -
    - -
    - -
    -
    -
    - ); -} - -function CustomMarker() { - /* eslint-disable max-len */ - return ( - - - - - - - - ); - /* eslint-enable max-len */ -} - -function HitsMap({hits}) { - const availableSpace = { - width: document.body.getBoundingClientRect().width * 5 / 12, - height: 400, - }; - const boundingPoints = hits.reduce((bounds, hit) => { - const pos = hit; - if (pos.lat > bounds.nw.lat) bounds.nw.lat = pos.lat; - if (pos.lat < bounds.se.lat) bounds.se.lat = pos.lat; - - if (pos.lng < bounds.nw.lng) bounds.nw.lng = pos.lng; - if (pos.lng > bounds.se.lng) bounds.se.lng = pos.lng; - return bounds; - }, { - nw: {lat: -85, lng: 180}, - se: {lat: 85, lng: -180}, - }); - const boundsConfig = hits.length > 0 ? fitBounds(boundingPoints, availableSpace) : {}; - const markers = hits.map(hit => ); - const options = { - minZoomOverride: true, - minZoom: 2, - }; - return ( - options} - bootstrapURLKeys={{ - key: 'AIzaSyAl60n7p07HYQK6lVilAe_ggwbBJFktNw8', - }} - center={boundsConfig.center} - zoom={boundsConfig.zoom} - >{markers} - ); -} - -HitsMap.propTypes = { - hits: PropTypes.array, -}; - -const ConnectedHitsMap = connectHits(HitsMap); - -function Capacity() { - return ( -
    -
    Capacity
    -
    - -
    -
    - ); -} - -function OptionCapacity({label, value}) { - return ; -} - -OptionCapacity.propTypes = { - label: PropTypes.string, - value: PropTypes.string, -}; - -const CapacitySelector = connectMultiRange(({items, currentRefinement, refine}) => { - const selectValue = e => refine(e.target.value); - - const allOption = ; - - const options = items.map(item => { - const val = parseFloat(item.value.split(':')[0]); - const label = `${val} person${val > 1 ? 's' : ''}`; - return ; - }); - - options.unshift(allOption); - - return ( -
    - -
    - ); -}); - -function DatesAndGuest() { - return ( -
    -
    Dates
    -
    -
    -
    -
    - ); -} - -const RoomType = connectRefinementList(({items, refine}) => { - const sortedItems = items.sort((i1, i2) => i1.label.localeCompare(i2.label)); - const hitComponents = sortedItems.map(item => { - const selectedClassName = item.isRefined ? ' ais-refinement-list--item__active' : ''; - const itemClassName = `ais-refinement-list--item col-sm-3 ${selectedClassName}`; - return ( -
    -
    - -
    -
    - ); - }); - - return ( -
    -
    Room Type
    -
    - {hitComponents} -
    -
    - ); -}); - -function Price() { - return ( -
    -
    Price Range
    -
    - -
    -
    - ); -} - -const MyHits = connectHits(({hits}) => { - const hs = hits.map(hit => ); - return
    {hs}
    ; -}); - -function HitComponent({hit}) { - return ( -
    -
    - - -
    -
    -

    - -

    - -
    -
    - ); -} - -function HitDescription({hit}) { - return ( -

    - {hit.room_type} - , -

    - ); -} - -HitComponent.propTypes = { - hit: PropTypes.object, -}; - -function Results() { - return ( -
    -
    - -
    -
    - -
    - Data from airbnb.com, - user pics from randomuser.me -
    -
    -
    - ); -} - -const Range = React.createClass({ - propTypes: { - min: React.PropTypes.number, - max: React.PropTypes.number, - currentRefinement: React.PropTypes.object, - refine: React.PropTypes.func.isRequired, - canRefine: React.PropTypes.bool.isRequired, - }, - - getInitialState() { - return {currentValues: {min: this.props.min, max: this.props.max}}; - }, - - componentWillReceiveProps(sliderState) { - if (sliderState.canRefine) { - this.setState({currentValues: {min: sliderState.currentRefinement.min, max: sliderState.currentRefinement.max}}); - } - }, - - onValuesUpdated(sliderState) { - this.setState({currentValues: {min: sliderState.values[0], max: sliderState.values[1]}}); - }, - - onChange(sliderState) { - if (this.props.currentRefinement.min !== sliderState.values[0] || - this.props.currentRefinement.max !== sliderState.values[1]) { - this.props.refine({min: sliderState.values[0], max: sliderState.values[1]}); - } - }, - - render() { - const {min, max, currentRefinement} = this.props; - const {currentValues} = this.state; - return min !== max ? -
    - -
    -
    {currentValues.min}
    -
    {currentValues.max}
    -
    -
    : null; - }, -}); - -const ConnectedRange = connectRange(Range); - -export default withUrlSync(App); diff --git a/docgen/src/examples/tourism/index.html b/docgen/src/examples/tourism/index.html deleted file mode 100644 index 475fba5e50..0000000000 --- a/docgen/src/examples/tourism/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Tourism -layout: example.pug -name: tourism -category: examples -source: https://github.com/algolia/instantsearch.js/tree/v2/docgen/src/examples/tourism -navWeight: 1 -stylesheets: - - https://cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap.min.css - - https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css - - https://fonts.googleapis.com/css?family=Roboto - - https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.css ---- -
    diff --git a/docgen/src/examples/tourism/index.js b/docgen/src/examples/tourism/index.js deleted file mode 100644 index 005b3cd118..0000000000 --- a/docgen/src/examples/tourism/index.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import {AppContainer} from 'react-hot-loader'; - -import App from './App.js'; - -ReactDOM.render(, document.querySelector('#app')); - -// Hot Module Replacement API -// this and AppContainer are react-hot-loader 3 API needs -// https://github.com/gaearon/react-hot-loader/blob/123d940ff34c3178549fec9d57b9378ff48b4841/docs/README.md -if (module.hot) { - module.hot.accept('./App.js', () => { - const NextApp = require('./App.js').default; - ReactDOM.render( - - - - , - document.querySelector('#app') - ); - }); -} diff --git a/docgen/src/examples/tourism/style.css b/docgen/src/examples/tourism/style.css deleted file mode 100644 index 0083af97e8..0000000000 --- a/docgen/src/examples/tourism/style.css +++ /dev/null @@ -1,411 +0,0 @@ -/* VARIABLES -// ------------------------- */ -/* GENERAL -// ------------------------- */ -body { - font-family: Roboto; - font-size: 16px; - color: #565A5C; -} - -.aisdemo--left-column { - height: 400px; -} - -.aisdemo--right-column { - padding-right: 0; - padding-left: 0; - height: 400px; -} - -/* HEADER -// ------------------------- */ -.aisdemo-navbar { - margin: 0; - border-bottom: 1px solid #DCE0E0; - position: relative; - padding-top: 60px; - z-index: 99; -} - -.aisdemo-navbar .is-logo { - display: inline-block; - position: relative; - top: -8px; - left: 16px; -} - -.aisdemo-navbar .logo { - display: inline-block; - padding: 14px 22px; - font-size: 40px; - line-height: 1; - font-family: Courier; - color: #FF585B; - border-right: 1px solid #DCE0E0; -} - -.aisdemo-navbar .fa-search { - font-size: 30px; - margin-left: 10px; - color: #DCE0E0; -} - -.ais-SearchBox__root { - position: absolute; - width: 280px; - height: 33px; - white-space: nowrap; - box-sizing: border-box; - font-size: 14px; - top: 80px; - left: 165px; -} - -.ais-SearchBox__wrapper { - width: 100%; - height: 100%; -} - -.ais-SearchBox__input { - display: inline-block; - -webkit-transition: box-shadow .4s ease, background .4s ease; - transition: box-shadow .4s ease, background .4s ease; - border: 0; - border-radius: 1px; - box-shadow: inset 0 0 0 0px #CCCCCC; - background: #FFFFFF; - padding: 0; - width: 100%; - height: 100%; - vertical-align: middle; - white-space: normal; - font-size: inherit; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - -.ais-SearchBox__input::-webkit-search-decoration, .ais-SearchBox__input::-webkit-search-cancel-button, .ais-SearchBox__input::-webkit-search-results-button, .ais-SearchBox__input::-webkit-search-results-decoration { - display: none; -} - -.ais-SearchBox__input:hover { - box-shadow: inset 0 0 0 0px #b3b3b3; -} - -.ais-SearchBox__input:focus, .SearchBox__input:active { - outline: 0; - box-shadow: inset 0 0 0 0px #D6DEE3; - background: #FFFFFF; -} - -.ais-SearchBox__input::-webkit-input-placeholder { - color: #9AAEB5; -} - -.ais-SearchBox__input::-moz-placeholder { - color: #9AAEB5; -} - -.ais-SearchBox__input:-ms-input-placeholder { - color: #9AAEB5; -} - -.ais-SearchBox__input::placeholder { - color: #9AAEB5; -} - -.ais-SearchBox__submit { - display: none; -} - -.ais-SearchBox__reset { - display: none; -} - -/* FILTERS -// ------------------------- */ -.aisdemo-filters .aisdemo-filter { - margin-top: 0; - margin-bottom: 0; - padding-top: 15px; - padding-bottom: 15px; - border-bottom: 1px solid #DCE0E0; -} - -.aisdemo-filters .aisdemo-filter-title { - font-size: 1em; - font-weight: normal; - padding-top: 9px; - padding-left: 30px; -} - -.aisdemo-filters .date, .aisdemo-filters #guests select { - font-size: .8em; - padding: 8px 10px; - border: 1px solid #DCE0E0; -} - -.aisdemo-filters #guests select { - width: 100%; - padding-right: 20px; - border-radius: 0; - background: transparent; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - -.aisdemo-filters #guests select:focus { - outline: none; -} - -.aisdemo-filters .guests-caret:before { - line-height: 1; - position: absolute; - top: 0; - right: 20px; - width: 2em; - padding-top: .8em; - content: '\25bc'; - text-align: center; - pointer-events: none; - color: #82888A; -} - -.ais-refinement-list--count { - display: none; -} - -.ais-refinement-list--item { - display: inline-block; - cursor: pointer; -} - -.ais-refinement-list--item label { - font-size: .8em; - font-weight: normal; - box-sizing: border-box; - width: 100%; - padding: 9px 10px 7px; - background: #EDEFED; - border-radius: 4px; -} - -.ais-refinement-list--checkbox { - position: relative; - bottom: 3px; - float: right; - width: 1.25em; - height: 1.25em; - margin-left: 20px; - vertical-align: top; - border: 1px solid #DCE0E0; - background: #FFFFFF; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - -.ais-refinement-list--checkbox:focus { - outline: none; -} - -.ais-refinement-list--item__active .ais-refinement-list--checkbox:before { - font-size: .85em; - position: absolute; - width: 1.25em; - content: '\2713'; - text-align: center; - color: #FF5A5F; -} - -/* STATS -// ------------------------- */ -#stats { - font-size: 1em; - font-weight: normal; - position: absolute; - bottom: 0; - padding: 5px 15px; -} - -/* MAP -// ------------------------- */ -#map { - height: 400px; -} - -.marker { - transform: translate(-50%, -100%) scale(0.5, 0.5); -} - -.capacity-filter { - padding: 9px 10px 7px; - background: #EDEFED; -} - -.capacity-menu-wrapper { - font-size: .8em; - font-weight: normal; - box-sizing: border-box; - width: 100%; - padding: 6px 0px 5px; -} - -.capacity-menu-wrapper select { - width: 100%; - background: #EDEFED; - height: 27px; -} - -/* RESULTS -// ------------------------- */ -#results { - padding: 40px 20px; - background: #EDEFED; -} - -#hits .hit .pictures-wrapper { - position: relative; -} - -#hits .hit .pictures-wrapper .picture { - width: 100%; -} - -#hits .hit .pictures-wrapper .profile { - position: absolute; - bottom: -16px; - right: 12px; - width: 60px; - border: 4px solid rgba(255, 255, 255, 0.3); - border-radius: 30px; -} - -#hits .hit .infos { - height: 90px; - padding: 16px 20px; -} - -#hits .hit .infos h4 { - font-size: 1em; - font-weight: normal; -} - -#hits .hit .infos p { - font-size: .8em; - color: #949697; -} - -#hits .hit .infos em { - font-style: normal; - color: #FF585B; -} - -/* PAGINATION -// ------------------------- */ -.ais-Pagination__root { - text-align: center; -} - -.ais-Pagination__root .ais-Pagination__item { - display: inline-block; - border: 1px solid; - border-radius: 4px; - padding: 3px; - margin: 1px; - border-color: #ddd; - background: transparent; -} - -.ais-Pagination__item .ais-Pagination__itemLink { - display: block; - color: #FF585B; - line-height: 30px; - width: 30px; - height: 30px; -} - -.ais-Pagination__item.ais-Pagination__itemSelected.ais-Pagination__itemPage { - background: #FF585B; -} - -.ais-Pagination__item.ais-Pagination__itemSelected.ais-Pagination__itemPage .ais-Pagination__itemLink { - color: #FFFFFF; - border-color: #FF585B; -} - -.ais-Pagination__itemDisabled { - visibility: hidden; -} - -.thank-you { - text-align: center; - font-size: .8em; -} - -.thank-you a { - color: #FF585B; -} - -/* RHEOSTAT RANGE -// ------------------------- */ -.rheostat-container { - display: flex; - align-items: center; -} -.rheostat { - height: 24px; - position: relative; - overflow: visible -} - -.rheostat-background { - background: #dce0e0; - height: 2px; - position: relative; - top: 14px; - width: 100% -} - -.rheostat-values { - display: flex; - font-size: 12px; - justify-content: space-between; - color: rgba(0, 0, 0, 0.6); -} - -.rheostat--disabled .rheostat-progress { - background-color: #edefed -} - -.rheostat--disabled .rheostat-handle { - cursor: default -} - -.rheostat-progress { - background-color: #FF585B; - height: 4px; - position: absolute; - top: 13px -} - -.rheostat-handle { - border: 1px solid #FF585B; - background: #fff; - -webkit-border-radius: 100%; - -moz-border-radius: 100%; - border-radius: 100%; - -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - cursor: pointer; - height: 24px; - margin-left: -12px; - position: absolute; - z-index: 2; - width: 24px; - font-size: 0 -} diff --git a/docgen/src/examples/urlSync.js b/docgen/src/examples/urlSync.js deleted file mode 100644 index 71216e7983..0000000000 --- a/docgen/src/examples/urlSync.js +++ /dev/null @@ -1,38 +0,0 @@ -import React, {Component} from 'react'; -import qs from 'qs'; - -const updateAfter = 700; -const searchStateToUrl = - searchState => - searchState ? `${window.location.pathname}?${qs.stringify(searchState)}` : ''; - -export const withUrlSync = App => class extends Component { - constructor() { - super(); - this.state = {searchState: qs.parse(window.location.search.slice(1))}; - window.addEventListener( - 'popstate', - ({state: searchState}) => this.setState({searchState}) - ); - } - - onSearchStateChange = searchState => { - clearTimeout(this.debouncedSetState); - this.debouncedSetState = setTimeout(() => { - window.history.pushState( - searchState, - null, - searchStateToUrl(searchState) - ); - }, updateAfter); - this.setState({searchState}); - }; - - render() { - return ; - } -}; diff --git a/docgen/src/guide/.md b/docgen/src/guide/.md deleted file mode 100644 index 4360977042..0000000000 --- a/docgen/src/guide/.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: -mainTitle: Guide -layout: main.pug -category: guide -navWeight: 90 ---- - -Every React InstantSearch application starts by using a root `` component. - -This component provides the necessary context and information to its children (widgets), letting them interact with Algolia. - -As for props you will have to pass your Algolia application id, API Key and the index name to be targeted: - -```jsx -import {InstantSearch} from 'react-instantsearch/dom'; - -const App = () => - - {/* Use widgets here */} - ; -``` - -**Notes:** -* Just like we have `react-instantsearch/dom`, there's the corresponding `react-instantsearch/native` import endpoint, use the [React native guide](guide/React_native.html). -* `` manages search on a single search index. We have a guide covering [multi index search and -state synchronization](guide/Multi_index.html). -* Internally we use [React's context](https://facebook.github.io/react/docs/context.html) to link widgets to -``. -* You can still use any of your own components as children of ``. -* Other props are documented on the [`` API page](widgets/InstantSearch.html). - -
    -
    - Previous: ← Install -
    -
    - Next: Widgets → -
    -
    diff --git a/docgen/src/guide/Autocomplete_menu.md b/docgen/src/guide/Autocomplete_menu.md deleted file mode 100644 index 3b38dc3efb..0000000000 --- a/docgen/src/guide/Autocomplete_menu.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Autocomplete menu -mainTitle: Guide -layout: main.pug -category: guide -navWeight: 20 ---- - -You can build with React InstantSearch an autocomplete menu that uses an external autocomplete component. - -[Read the examples](https://github.com/algolia/instantsearch.js/tree/v2/packages/react-instantsearch/examples/autocomplete) - showing you how to build an autocomplete menu that will: -* display hits and facet values from the same index -* display hits from different indices - -Those examples use advanced concepts from React InstantSearch. If you're not familiar with -them you can read their guide first: - -* [Custom connectors](guide/Custom_connectors.html) -* [Virtual widgets](guide/Virtual_widgets.html) -* [Multi Index](guide/Multi_index.html) - -
    - -
    diff --git a/docgen/src/guide/Conditional_display.md b/docgen/src/guide/Conditional_display.md deleted file mode 100644 index b15087f10c..0000000000 --- a/docgen/src/guide/Conditional_display.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Conditional Display -mainTitle: Guide -layout: main.pug -category: guide -navWeight: 40 ---- - -Using our connector and [`createConnector`](guide/Custom_connectors.html) approach, you can conditionally display content based on the search state. - -## Displaying content when the query is empty - -```jsx -const Content = createConnector({ - displayName: 'ConditionalQuery', - getProvidedProps(props, searchState) { - return {query: searchState.query}; - }, - })(({query}) => { - const content = query - ?
    The query {query} exists
    - :
    No query
    ; - return
    {content}
    ; - }); -``` - -## Displaying content when there's no results - -```jsx -const content = createConnector({ - displayName: 'ConditionalResults', - getProvidedProps(props, searchState, searchResults) { - const noResults = searchResults.results ? searchResults.results.nbHits === 0 : false; - return {query: searchState.query, noResults}; - }, - })(({noResults, query}) => { - const content = noResults - ?
    No results found for {query}
    - :
    Some results
    ; - return
    {content}
    ; - }); -``` - -## Displaying content when there's an error - -```jsx -const content = createConnector({ - displayName: 'ConditionalError', - getProvidedProps(props, searchState, searchResults) { - return {error: searchResults.error}; - }, - })(({error}) => { - const content = error - ?
    An error occurred: {error.message}
    - :
    Some results
    ; - return
    {content}
    ; - }); -``` - -## Displaying content when loading - -In slow user network situations you might want to know when the search results are loading. - -```jsx -const content = createConnector({ - displayName: 'ConditionalError', - getProvidedProps(props, searchState, searchResults) { - return {loading: searchResults.loading}; - }, -})(({loading}) => { - const content = loading - ?
    We are loading
    - :
    Search finished
    ; - return
    {content}
    ; - }); -``` - -
    -
    - Previous: ← Custom Connectors -
    -
    - Next: React native → -
    -
    diff --git a/docgen/src/guide/Connectors.md b/docgen/src/guide/Connectors.md deleted file mode 100644 index 9741b11940..0000000000 --- a/docgen/src/guide/Connectors.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Connectors -mainTitle: Guide -layout: main.pug -category: guide -navWeight: 75 ---- - -React InstantSearch provides [widgets](guide/Widgets.html) out of the box, those are great when you want -a default style to be applied and you do not need heavy customization of the underlying DOM or behavior of -the widget. - -## When do I need to use connectors? - -* When you want to display our widgets using another UI library like [Material-UI](http://www.material-ui.com/) -* When you want to have full control on the rendering without having to reimplement business logic -* As soon as you hit a feature wall using our default widgets -* When you are a react-native user, read our [react-native guide](guide/React_native.html) - -## What are connectors? - -Connectors are higher order components. They encapsulate the logic for -a specific kind of widget and they provide a way to interact with -the instantsearch context. - -As higher order components, they have an outer component API that we call -**exposed props** and they will provide some other props to the wrapped -components which are called the **provided props**. - -## How to use them? - -If you want to create your own search box, you will need to use the [`connectSearchBox()`](connectors/connectSearchBox.html) connector: - -```jsx -import {connectSearchBox} from 'react-instantsearch/connectors'; - -const MySearchBox = ({currentRefinement, refine}) => - refine(e.target.value)} - />; - -// `ConnectedSearchBox` renders a `` widget that is connected to -// the state, providing it with `currentRefinement` and `refine` props for -// reading and manipulating the current query of the search. -// Note that this `ConnectedSearchBox` widget will only work when rendered -// as a child or a descendant of the `` component. -const ConnectedSearchBox = connectSearchBox(MySearchBox); -``` - -## Exposed props - -Connectors expose props to configure their behavior. Like the `attributeName` -being refined in a [``](widgets/Menu.html). - -One common exposed prop that you can use is the `defaultRefinement` one. Use it when as a way to provide the -[default refinement](guide/Default_refinements.html) when the connected component will be mounted. - -## Provided props - -Provided props always follow the same pattern for ease of use: -- `currentRefinement`: Search state representation of the connector, most of the time you do not need that -- `refine`: Function to call to refine the search state of the connector -- `createURL`: See the [routing guide](guide/Routing.html) -- `items[{label, value, count}]`: Only when dealing with list based connectors - - `label`: Text representation of the item to be shown - - `value`: State representation to be used when calling `refine()` or `createURL()` - - `count`: Number of hits concerned by the facet - - `isRefined`: Indicates if the item is currently selected refining the search state - - diff --git a/docgen/src/guide/Custom_connectors.md b/docgen/src/guide/Custom_connectors.md deleted file mode 100644 index ad7b91958a..0000000000 --- a/docgen/src/guide/Custom_connectors.md +++ /dev/null @@ -1,249 +0,0 @@ ---- -title: Custom connectors -mainTitle: Guide -layout: main.pug -category: guide -navWeight: 45 ---- - -If you wish to implement features that are not covered by the default widgets connectors, -you will need to create your own connector via the `createConnector` method. - -We tried very hard to make React InstantSearch a pluggable library that is able to solve -most use cases in with simple API entries. But we could not plan everything and thus -in some cases the current API may not be able to fulfill this promise of simplicity. - -If that's not the case or in doubt, **before diving into custom conectors** -please expose us your use case and come ask us questions on [discourse](https://discourse.algolia.com/c/instantsearch) -or [GitHub](https://github.com/algolia/instantsearch.js/issues) first. We will be glad -that you do so. - -If you are confident `createConnector` is what you need, here's its API: - -## `const connector = createConnector(implementation)` - -`implementation` is an object whose shape and properties matches the following conventions: - -## `{displayName, propTypes, defaultProps}` - -Those properties are directly applied to the higher-order component. Providing a `displayName` is mandatory. - -## `getProvidedProps(props, searchState, searchResults, meta, searchForFacetValuesResults)` - -This method should return the props to forward to the composed component. - -`props` are the props that were provided to the higher-order component. - -`searchState` holds the search state of all widgets. You can find the shape of all widgets search state in [the corresponding guide](guide/Search_state.html). - -`searchResults` holds the search results, search errors and search loading state, with the shape `{results: ?SearchResults, error: ?Error, loading: bool}`. The `SearchResults` type is described in the [Helper's documentation](https://community.algolia.com/algoliasearch-helper-js/reference.html#searchresults). - -`meta` is the list of metadata from all widgets whose connector defines a `getMetadata` method. - -`searchForFacetValuesResults` holds the search for facet values results. - -## `refine(props, searchState, ...args)` - -This method defines exactly how the `refine` prop of widgets affects the search state. - -It takes in the current props of the higher-order component, the [search state](guide/Search_state.html) of all widgets, as well as all arguments passed to the `refine` and `createURL` props of stateful widgets, and returns a new state. - -```jsx -import {createConnector} from 'react-instantsearch'; - -const CoolWidget = createConnector({ - displayName: 'CoolWidget', - - getProvidedProps(props, searchState) { - // Since the `queryAndPage` searchState entry isn't necessarily defined, we need - // to default its value. - const [query, page] = searchState.queryAndPage || ['', 0]; - - // Connect the underlying component to the `queryAndPage` searchState entry. - return { - query, - page, - } - }, - - refine(props, searchState, newQuery, newPage) { - // When the underlying component calls its `refine` prop, update the searchState - // with the new query and page. - return { - // `searchState` represents the search state of *all* widgets. We need to extend it - // instead of replacing it, otherwise other widgets will lose their - // respective state. - ...searchState, - queryAndPage: [newQuery, newPage], - }; - }, -})(props => -
    - The query is {props.query}, the page is {props.page}. - {/* - Clicking on this button will update the searchState to: - { - ...otherSearchState, - query: 'algolia', - page: 20, - } - */} -
    -); -``` - -In the example above, we create a widget that reads and manipulates the `queryAndPage` state entry. However, we haven't described how those entries should affect the search parameters passed to the Algolia client just yet. - -## `getSearchParameters(searchParameters, props, searchState)` - -This method applies the current props and state to the provided `SearchParameters`, and returns a new `SearchParameters`. The `SearchParameters` type is described in the [Helper's documentation](https://community.algolia.com/algoliasearch-helper-js/reference.html#searchparameters). - -Every time the props or state of a widget change, all the `getSearchParameters` methods of all the registered widgets are called in a chain to produce a new `SearchParameters`. Then, if the output `SearchParameters` differs from the previous one, a new search is triggered. - -As such, the `getSearchParameters` method allows you to describe how the state and props of a widget should affect the search parameters. - -```jsx -import {createConnector} from 'react-instantsearch'; - -const CoolWidget = createConnector({ - // displayName, getProvidedProps, refine - - getSearchParameters(searchParameters, props, searchState) { - // Since the `queryAndPage` state entry isn't necessarily defined, we need - // to default its value. - const [query, page] = state.queryAndPage || ['', 0]; - - // When the `queryAndPage` state entry changes, update the query and page of - // search. - return searchParameters - .setQuery(query) - .setPage(page); - }, -})(Widget); -``` - -## `getMetadata(props, searchState)` - -This method allows the widget to register a custom `metadata` object for any props and state combination. - -If your widget is stateful, the corresponding URL key should be declared on the metadata object as the `id` property, so that the `InstantSearch` component can determine which URL keys it controls and which are foreign and should be left intact. - -The metadata object also allows you to declare any data that you would like to pass down to all other widgets. The list of metadata objects of all components is available as the fourth argument to the `getProvidedProps` method. - -The `CurrentRefinements` widget leverages this mechanism in order to allow any widget to declare the filters it has applied. If you want to add your own filter, declare a `filters` property on your widget's metadata object: - -```jsx -import {createConnector} from 'react-instantsearch'; - -const CoolWidget = createConnector({ - // displayName, getProvidedProps, refine, getSearchParameters - - getMetadata(props, searchState) { - // Since the `queryAndPage` searchState entry isn't necessarily defined, we need - // to default its value. - const [query, page] = searchState.queryAndPage || ['', 0]; - - const filters = []; - if (query !== '') { - filters.push({ - // Unique identifier for this filter. - key: `queryAndPage.query`, - // String label (or node) that should appear in the CurrentRefinements - // component. - label: `Query: ${query}`, - // Describes how clearing this filter affects the InstantSearch searchState. - // In our case, clearing the query just resets it to an empty string - // without affecting the page. - clear: nextSearchState => { - return { - ...nextSearchState, - // Do not depend on the current `searchState` here. Since filters can be - // cleared in batches, the `searchState` parameter is not up-to-date when - // this method is called. - queryAndPage: ['', nextSearchState.queryAndPage[1]], - }; - }, - }); - } - - if (page !== 0) { - filters.push({ - key: `queryAndPage.page`, - label: `Page: ${page}`, - clear: nextSearchState => { - return { - ...nextSearchState, - queryAndPage: [nextSearchState.queryAndPage[0], 0], - }; - }, - }); - } - - return { - // This widget manipulates the `queryAndPage` state entry. - id: 'queryAndPage', - filters, - }; - }, -})(Widget); -``` - -## `searchForFacetValues(props, searchState, nextRefinement)` - -This method needs to be implemented if you want to have the ability to perform a search for facet values inside your widget. - -It takes in the current props of the higher-order component, the [search state](guide/Search_state.html) of all widgets, as well as all arguments passed to the `searchForFacetValues` props of stateful widgets, and returns an -object of the shape: `{facetName: string, query: string}` - -```jsx -import {createConnector} from 'react-instantsearch'; - -const CoolWidget = createConnector({ - // displayName, getProvidedProps, refine, getSearchParameters, getMetadata - - searchForFacetValues(props, searchState, nextRefinement) { - return {facetName: props.attributeName, query: nextRefinement}; - }, -})(Widget); -``` -## `cleanUp(props, searchState)` - -This method is called when a widget is about to unmount in order to clean the searchState. - -It takes in the current props of the higher-order component and the searchState of all widgets and expect a new searchState in return. - -`props` are the props that were provided to the higher-order component. - -`searchState` holds the searchState of all widgets, with the shape `{[widgetId]: widgetState}`. Stateful widgets describe the format of their searchState in their respective documentation entry. - -```jsx -import {omit} from 'lodash'; -import {createConnector} from 'react-instantsearch'; - -const CoolWidget = createConnector({ - // displayName, getProvidedProps, refine, getSearchParameters, getMetadata - - cleanUp(props, searchState) { - return omit('queryAndPage', searchState) - }, -})(Widget); -``` - -
    -
    - Previous: ← Multi_index -
    - -
    diff --git a/docgen/src/guide/Default_refinements.md b/docgen/src/guide/Default_refinements.md deleted file mode 100644 index bca31ff5d5..0000000000 --- a/docgen/src/guide/Default_refinements.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Default refinements -mainTitle: Guide -layout: main.pug -category: guide -navWeight: 70 ---- - -A frequent question that comes up is "How do I instantiate the [``](widgets/Menu.html) -widget with a pre selected item?". - -For this, widgets and connectors expose a `defaultRefinement` prop. - -The following example will instantiate a search page with a default query of "hi" and -will show a fruits menu where the item "Orange" is already selected: - -```jsx -import {InstantSearch, SearchBox, Menu} from 'react-instantsearch/dom'; - -const App = () => - - - - ; -``` - -## Hiding default refinements - -In some situations not only you want default refinements but you also do not want the user to be able to unselect them. - -To do this, you can use a [``](guide/Virtual_widgets.html). It allows you to pre refine any widget without -rendering anything. - -By default the [``](widgets/CurrentRefinements.html) widget or the -[`connectCurrentRefinements`](connectors/connectCurrentRefinements.html) connector will display your default refinements. If you want to hide them, you need to filter the items with `transformItems`. - -```jsx -import {InstantSearch, SearchBox, Menu} from 'react-instantsearch/dom'; -import {connectMenu} from 'react-instantsearch/connectors'; - -const VirtualMenu = connectMenu(() => null); - -const App = () => - -
    - items.filter(item => item.currentRefinement !== 'Orange')} - /> - - - -
    -
    ; -``` - -**Notes:** -* The [search state guide](guide/Search_state.html) details all widgets and connectors state values... -* Default refinements are handy when used as [Virtual widgets](guide/Virtual_widgets.html). - -
    -
    - Previous: ← Connectors -
    - -
    diff --git a/docgen/src/guide/Highlighting_results.md b/docgen/src/guide/Highlighting_results.md deleted file mode 100644 index 97c730d811..0000000000 --- a/docgen/src/guide/Highlighting_results.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Highlighting results -mainTitle: Guide -layout: main.pug -category: guide -navWeight: 78 ---- - -Search is all about helping users understand the results. This is especially true when using -text based search. When a user types a query in the searchbox, the results -must show why the results are matching the query. That's why Algolia implements -a powerful highlight that lets you display the matching parts of text attributes in -the results. - -This feature is already packaged for you in react-instantsearch and -like most of its features it comes in two flavors, depending on your use case: - - when using the DOM, widgets is the way to go - - when using another rendering (such as react native), you will use the connector - -## <Highlight> and <Snippet> widgets - -Highlighting is based on the results and you will need to make a custom Hit in order -to use the Highlighter. The Highlight and the Snippet widgets takes two props: - - attributeName: the path to the highlighted attribute - - hit: a single result object - -**Notes:** -* Use the `` widget when you want to display the regular value of an attribute. -* Use the `` widget when you want to display the snippet version of an attribute. - -Here is an example in which we create a custom Hit widget for results that have a -`description` field that is highlighted. - -```jsx -import React from 'react'; - -import {InstantSearch, Hits, Highlight} from 'InstantSearch'; - -const Hit = ({hit}) => -

    - -

    ; - -export default function App() { - return ( - - - - ); -} -``` - -## connectHighlight connector - -The connector provides a function that will extract the highlighting data -from the results. This function takes a single parameter object with three -properties: - - attributeName: the highlighted attribute name - - hit: a single result object - - path: the path to the structure containing the highlighted attribute - -Those parameters are taken from the context in which the the custom component -is used, therefore it's reasonable to have them as props. - -Here is an example of a custom Highlight widget. It can be used the same -way as the [widgets](guide/Highlighting_results.html#highlight-and-snippet-widgets). - -```jsx -const CustomHighlight = connectHighlight(({highlight, attributeName, hit}) => { - const parsedHit = highlight({attributeName, hit, highlightProperty: 'highlightProperty'}); - return parsedHit.map(part => { - if(part.isHighlighted) return {part.value}; - return part.value; - }); -}); -``` - -
    -
    - Previous: ← Styling Widgets -
    -
    - Next: i18n → -
    -
    diff --git a/docgen/src/guide/Install.md b/docgen/src/guide/Install.md deleted file mode 100644 index 3b79bc38ce..0000000000 --- a/docgen/src/guide/Install.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Install -mainTitle: Guide -layout: main.pug -category: guide -navWeight: 95 ---- - -Install `react-instantsearch` using [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/): - -```shell -npm install react-instantsearch --save -``` - -**Notes:** -* For [widgets](guide/Widgets.html) to be effectively styled, you need to load the Algolia theme. See the [styling guide](guide/Styling_widgets.html). -* You need to have `react`, `react-dom` or `react-native` (given your use case) dependencies installed for `react-instantsearch` to work. -* We recommend using [create-react-app](https://github.com/facebookincubator/create-react-app) if this is your first React application. - -
    -
    - Previous: ← Welcome -
    - -
    diff --git a/docgen/src/guide/Multi_index.md b/docgen/src/guide/Multi_index.md deleted file mode 100644 index f19de3e4a8..0000000000 --- a/docgen/src/guide/Multi_index.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Multi index -mainTitle: Guide -layout: main.pug -category: guide -navWeight: 50 ---- - -You can use multiple [``](guide/.html) instances for cases like: - -* displaying hits from different indices -* sharing a single SearchBox -* any use case involving synchronizing widgets between different [``](guide/.html) instances - -Two props on the [InstantSearch component](widgets/InstantSearch.html) can be used to inject searchState or be notified of searchState changes: - -* onSearchStateChange(onSearchStateChange): a function being called every time the [``](guide/.html) searchState is updated. -* [searchState](guide/Search_state.html): a search state - -The idea is to have a main component that will receive every new search state of the first instance -and then pass it back to each [``](guide/.html) instances. - -Refinements and parameters of an [``](guide/.html) searchState needs to have their corresponding widgets or -[virtual widget](guide/Virtual_widgets.html) added to be effectively applied. - -[Read the example](https://github.com/algolia/instantsearch.js/tree/v2/packages/react-instantsearch/examples/multi-index) displaying hits from two different indices. - -
    -
    - Previous: ← Search Parameters -
    - -
    diff --git a/docgen/src/guide/Operations.md b/docgen/src/guide/Operations.md deleted file mode 100644 index c1dc853ab3..0000000000 --- a/docgen/src/guide/Operations.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Operations -mainTitle: Guide -layout: main.pug -category: guide -navWeight: 52 ---- - -[Algolia pricing](https://www.algolia.com/pricing) structure is based on operations and records. - -This guide explains you how does using InstantSearch has an impact on your operations count. - -Everytime you press a key in InstantSearch using the SearchBox, we count one operation. -Then given the widgets you will be adding to your search interface, you will have more operations -being counted at each keystroke. - -For example, if you have a search made out of a SearchBox, a Menu and a RefinementList then every keystroke -will trigger two operations. - -Then if a user refines one of the Menu or RefinementList, it will trigger a third operation at each keystroke. - -A good rule to keep in mind is that most search interfaces using InstantSearch will trigger two operations -per keystroke. Then every refined widget (clicked widget) will add one more operation to the total count. - -
    -
    - Previous: ← Search state -
    -
    - Next: Multi index → -
    -
    diff --git a/docgen/src/guide/React_native.md b/docgen/src/guide/React_native.md deleted file mode 100644 index b0775bed7b..0000000000 --- a/docgen/src/guide/React_native.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: React native -mainTitle: Guide -layout: main.pug -category: guide -navWeight: 35 ---- - -React InstantSearch is compatible with [react-native](https://facebook.github.io/react-native/). - -[Read the example](https://github.com/algolia/instantsearch.js/tree/v2/packages/react-instantsearch/examples/react-native) linking `react-instantsearch` to [react-native](https://facebook.github.io/react-native/). - -
    -
    - Previous: ← Conditional Display -
    - -
    diff --git a/docgen/src/guide/Routing.md b/docgen/src/guide/Routing.md deleted file mode 100644 index b4b2f9bf1c..0000000000 --- a/docgen/src/guide/Routing.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Routing -mainTitle: Guide -layout: main.pug -category: guide -navWeight: 60 ---- - -React InstantSearch provides the necessary API entries to allow you to synchronize its state with the browser -url for example. The props you need to use are available on the [``](guide/.html) component: - -* `onSearchStateChange(nextSearchState)`: Function called every time the search state is updated. -* `searchState`: Inject a search state, turns the [``](guide/.html) component into a [controlled component](https://facebook.github.io/react/docs/forms.html#controlled-components). -* `createURL(searchState)`: Function used by every widget generating links and passed down to every connector. You -need to return a string. - -[Read the example](https://github.com/algolia/instantsearch.js/tree/v2/packages/react-instantsearch/examples/react-router) linking React InstantSearch to [react-router](https://github.com/ReactTraining/react-router). - -**Notes:** -* The [search state guide](guide/Search_state.html) details all widgets and connectors search state values. -* React InstantSearch can be plugged into any history or routing library, you only have to listen for searchState -changes and inject searchState appropriately. - -
    -
    - Previous: ← Virtual Widgets -
    - -
    diff --git a/docgen/src/guide/Search_parameters.md b/docgen/src/guide/Search_parameters.md deleted file mode 100644 index f9a76cc5b8..0000000000 --- a/docgen/src/guide/Search_parameters.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Search parameters -mainTitle: Guide -layout: main.pug -category: guide -navWeight: 57 ---- - -Algolia has a [wide range of parameters](https://www.algolia.com/doc/api-client/javascript/search#search-parameters). If one of the parameters you want to use is not covered by any widget or connector, then you can use the `` widget. - -Here's an example configuring the [distinct parameter](https://www.algolia.com/doc/api-client/javascript/parameters#distinct): - -```jsx - - - // widgets - -``` - -**Notes:** -* There's a dedicated guide showing how to [configure default refinements](guide/Default_refinements.html) on widgets. -* You could also pass `hitsPerPage: 20` to configure the number of hits being shown when not using -the [`` widget](widgets/HitsPerPage.html). - -## Dynamic search parameters updates - -Every applied search parameters can be retrieved by listening to the `onSearchStateChange` -hook from the [``](guide/.html) root component. - -But to update the search parameters, you will need to pass updated props to the `` widget, directly modifying the search `state` prop and injecting it will have no effect. - -[Read the example](https://github.com/algolia/instantsearch.js/tree/v2/packages/react-instantsearch/examples/geo-search) performing geo-search with `react-instantsearch` to see how you can update search parameters. - -
    -
    - Previous: ← Routing -
    -
    - Next: Search state → -
    -
    diff --git a/docgen/src/guide/Search_state.md b/docgen/src/guide/Search_state.md deleted file mode 100644 index 36a3fe4db9..0000000000 --- a/docgen/src/guide/Search_state.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Search state -mainTitle: Guide -layout: main.pug -category: guide -navWeight: 55 ---- - -The `searchState` contains all widgets states. -If a widget uses an attribute, we store it under its widget category to prevent collision. - -Here's the `searchState` shape for all the connectors or widgets that we provide: - -```jsx -{ - const searchState = { - range: { - price: { - min: 20, - max: 3000 - } - }, - refinementList: { - fruits: ['lemon', 'orange'] - }, - hierarchicalMenu: { - products: 'Laptops > Surface' - }, - menu: { - brands: 'Sony' - }, - multiRange: { - rank: '2:5' - }, - toggle: { - freeShipping: true - }, - hitsPerPage: 10, - sortBy: 'mostPopular', - query: 'ora', - page: 2 - } -} -``` - -
    -
    - Previous: ← Search parameters -
    -
    - Next: Operations → -
    -
    diff --git a/docgen/src/guide/Searching_in_Lists.md b/docgen/src/guide/Searching_in_Lists.md deleted file mode 100644 index 45f69f70fa..0000000000 --- a/docgen/src/guide/Searching_in_Lists.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Searching in *Lists -mainTitle: Guide -layout: main.pug -category: guide -navWeight: 68 ---- - -You can allow the user to search inside lists of items like [``](widgets/RefinementList.html), [``](widgets/Menu.html) widgets -or [`connectRefinementList`](connectors/connectRefinementList.html) and [``](widgets/Menu.html) connectors. - -## Using widgets -Use the `withSearchBox` prop to add a nice search box to supported widgets: -- [``](widgets/RefinementList.html) -- [``](widgets/Menu.html) - -```jsx - -``` - - - -## Using connectors -You can implement your own search box for searching for items in lists when using -[`connectRefinementList`](connectors/connectRefinementList.html) or -[`connectMenu`](connectors/connectMenu.html) by using those provided props. -* `searchForItems(query)`, call this method with a search query to trigger a new search for items -* `isFromSearch`, When `true` you are in search mode and the provided `items` are search items results - -```jsx -import {connectRefinementList} from 'react-instantsearch/connectors'; -import {Highlight} from 'react-instantsearch/dom'; -const RefinementListWithSearchBox = connectRefinementList(props => { - const values = props.items.map(item => { - const label = item._highlightResult - ? - : item.label; - return
  • - props.refine(item.value)}> - {label} {item.isRefined ? '- selected' : ''} - -
  • ; - }); - return ( -
    - props.searchForItems(e.target.value)}/> -
      {values}
    -
    - ); -}); - -``` - -
    -
    - Previous: ← Default refinements -
    - -
    diff --git a/docgen/src/guide/Server-side_rendering.md b/docgen/src/guide/Server-side_rendering.md deleted file mode 100644 index c633a523ef..0000000000 --- a/docgen/src/guide/Server-side_rendering.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Server-side rendering -mainTitle: Guide -layout: main.pug -category: guide -navWeight: 30 ---- - -React InstantSearch is not yet compatible with server-side rendering. This is one of our priority topics -right now. We will soon provide API entries to handle this usecase. - -
    -
    - Previous: ← React Native -
    - -
    diff --git a/docgen/src/guide/Sorting_and_filtering.md b/docgen/src/guide/Sorting_and_filtering.md deleted file mode 100644 index 800573add6..0000000000 --- a/docgen/src/guide/Sorting_and_filtering.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Sorting and filtering items -mainTitle: Guide -layout: main.pug -category: guide -navWeight: 78 ---- - -A frequent question that comes up is "How do I sort or filter the items of my widget". - -For this, widgets and connectors that are handling items expose a `transformItems` prop. This prop is a function that has the `items` provided -prop as a parameter. It will expect in return the `items` prop back. - -## Supported widgets and connectors - -Every widget or connector handling a list of items accepts a generic `transformItems` -prop where you can completely reorder or filter items. - -## Example - -The following example will show you how to change the default sort order of the [``](widgets/RefinementList.html) widget. - -```jsx -import {InstantSearch, RefinementList} from 'react-instantsearch/dom'; -import {orderBy} from 'lodash'; - -const App = () => - - - orderBy(items, ['label', 'count'], ['asc', 'desc'])}/> - ; -``` - -## Common use cases -* Sorting items -* Filtering items - -
    -
    - Previous: ← i18n -
    -
    - Next: Connectors → -
    -
    diff --git a/docgen/src/guide/Styling_widgets.md b/docgen/src/guide/Styling_widgets.md deleted file mode 100644 index 7ce01ffd91..0000000000 --- a/docgen/src/guide/Styling_widgets.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Styling widgets -mainTitle: Guide -layout: main.pug -category: guide -navWeight: 80 ---- - -All widgets under the `react-instantsearch/dom` namespace are shipped with fixed CSS class names. - -The format for those class names is `ais-NameOfWidget__elementModifier`. - -The different class names used by every widgets are described on their respective documentation page. You -can also inspect the underlying DOM and style accordingly. - -## Styling icons - -You can style icons colors too, for example the `SearchBox` ones: - -```css -.ais-SearchBox__reset svg, -.ais-SearchBox__button svg { - fill: red -} -``` - -## Loading the theme - -We do not load any CSS into your page automatically but we provide an Algolia theme that you can load -manually. - -### Via CDN - -The theme is available on unpkg.com: -- unminified: https://unpkg.com/react-instantsearch-theme-algolia@3.0.0/style.css -- minified: https://unpkg.com/react-instantsearch-theme-algolia@3.0.0/style.min.css - -You can either copy paste the content in your own app or use a direct link to unpkg.com: - -```html - -``` - -### Via npm, Webpack - -```shell -npm install react-instantsearch-theme-algolia --save -npm install sass-loader style-loader css-loader autoprefixer postcss-loader --save-dev -``` - -App.js: -```jsx -import 'react-instantsearch-theme-algolia/style.scss'; -// import 'react-instantsearch-theme-algolia/style.css' -// import 'react-instantsearch-theme-algolia/style.min.css' -``` - -webpack.config.babel.js: -```jsx -import autoprefixer from 'autoprefixer'; - -export default { - module: { - loaders: [ - { - test: /\.scss$/, - loaders: ['style?insertAt=top', 'css', 'postcss', 'sass'], - }, - ], - }, - postcss: [autoprefixer()], -} -``` - -### Other bundlers - -Any other module bundler like Browserify can be used to load our CSS. React InstantSearch -does not rely on any specific module bundler or module loader. - -
    -
    - Previous: ← Widgets -
    - -
    diff --git a/docgen/src/guide/Virtual_widgets.md b/docgen/src/guide/Virtual_widgets.md deleted file mode 100644 index b36aee374d..0000000000 --- a/docgen/src/guide/Virtual_widgets.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Virtual widgets -mainTitle: Guide -layout: main.pug -category: guide -navWeight: 65 ---- - -A lot of websites have "category pages" where the search context is already refined without the user having -to do it. For example an online shop for clothes could have a page like `https://www.clothes.com/hoodies` -that shows hoodies: - -```jsx -import {InstantSearch, SearchBox} from 'react-instantsearch/dom'; -import {connectMenu} from 'react-instantsearch/connectors'; - -const VirtualMenu = connectMenu(() => null); -const Hoodies = () => ; - -const App = () => - - - - - ; -``` - -**Notes**: -* The `` component is what we call a virtual widget. -* Virtual widgets allows you to pre refine any widget without rendering anything. -* The [search state guide](guide/Search_state.html) details all widgets and connectors state values.. - -
    - -
    - Next: Routing → -
    -
    diff --git a/docgen/src/guide/Widgets.md b/docgen/src/guide/Widgets.md deleted file mode 100644 index 5fdbb8ca11..0000000000 --- a/docgen/src/guide/Widgets.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Widgets -mainTitle: Guide -layout: main.pug -category: guide -navWeight: 85 ---- - -React InstantSearch provides a set of DOM widgets with pre-defined DOM structure and behavior. - -Here's an example using the [``](widgets/SearchBox.html): - -```jsx -import {InstantSearch, SearchBox} from 'react-instantsearch/dom'; - -const App = () => - - - ; -``` - -**Notes:** -* Find more widgets on [the API page](widgets/). -* Every widget controlling the search state expose a `defaultRefinement` prop to configure the [default -refinement](guide/Default_refinements.html) of the widget when it's mounted. -* Widgets are components that are [connected](guide/Connectors.html) to the index search context as soon -as they are mounted as children of the [`` component](guide/.html). -* Widget are not provided for react-native for now, react-native support is handled via connectors, read -the [react-native guide](guide/React_native.html). - -
    -
    - Previous: ← <InstantSearch> -
    - -
    diff --git a/docgen/src/guide/i18n.md b/docgen/src/guide/i18n.md deleted file mode 100644 index 7981824abf..0000000000 --- a/docgen/src/guide/i18n.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: i18n -mainTitle: Guide -layout: main.pug -category: guide -navWeight: 78 ---- - -All static text rendered by widgets, such as "Load more", "Show more" are translatable using the -`translations` prop on relevant widgets. - -This prop is a mapping of keys to translation values. Translation values can be either a `String` or a `Function`, as some take parameters. - -The different translation keys supported by widgets and their optional parameters are described on their respective documentation page. - -Here's an example configuring the "Show more" label on a [``](widgets/Menu.html): - -```jsx -import {InstantSearch, Menu} from 'react-instantsearch/dom'; - -const App = () => - - - ; -``` - - diff --git a/docgen/src/guide/index.md b/docgen/src/guide/index.md deleted file mode 100644 index 01493f6cd9..0000000000 --- a/docgen/src/guide/index.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Welcome -mainTitle: Guide -layout: main.pug -category: guide -navWeight: 100 ---- - -React InstantSearch is the ultimate toolbox for creating instant-search experiences using [React](https://facebook.github.io/react/) and [Algolia](https://www.algolia.com/). - -Algolia is a hosted Search API. React InstantSearch is built on top of it to make it easy to integrate of Algolia into your React applications. - -You will need an Algolia account to use React InstantSearch. If you don't already have one, sign up using GitHub, Google, or email at https://www.algolia.com/users/sign_up. New accounts are automatically enrolled in an unlimited 14-day trial. At the end of the trial you can upgrade to a paid plan or choose the Hacker Plan, which is completely free and lets you store up to 10,000 records. - -This guide will teach you the concepts around React InstantSearch in a progressive way, from -essentials to advanced topics. If you'd rather jump right in with some code, see the [Getting started tutorial](./Getting_started.html) instead. - - diff --git a/docgen/src/images/Mockup.png b/docgen/src/images/Mockup.png deleted file mode 100644 index fccacc16ec..0000000000 Binary files a/docgen/src/images/Mockup.png and /dev/null differ diff --git a/docgen/src/images/Mockup@2x.png b/docgen/src/images/Mockup@2x.png deleted file mode 100644 index 13aed65895..0000000000 Binary files a/docgen/src/images/Mockup@2x.png and /dev/null differ diff --git a/docgen/src/images/background_footer.svg b/docgen/src/images/background_footer.svg deleted file mode 100644 index 33fe1a2346..0000000000 --- a/docgen/src/images/background_footer.svg +++ /dev/null @@ -1,53 +0,0 @@ - - - - Group - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/docgen/src/images/check.svg b/docgen/src/images/check.svg deleted file mode 100644 index c82b95f917..0000000000 --- a/docgen/src/images/check.svg +++ /dev/null @@ -1 +0,0 @@ -Shape \ No newline at end of file diff --git a/docgen/src/images/code.png b/docgen/src/images/code.png deleted file mode 100644 index e8f50a7274..0000000000 Binary files a/docgen/src/images/code.png and /dev/null differ diff --git a/docgen/src/images/components.png b/docgen/src/images/components.png deleted file mode 100644 index ac749c2fed..0000000000 Binary files a/docgen/src/images/components.png and /dev/null differ diff --git a/docgen/src/images/e-commerce-infinite.svg b/docgen/src/images/e-commerce-infinite.svg deleted file mode 100644 index 0998c63804..0000000000 --- a/docgen/src/images/e-commerce-infinite.svg +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/docgen/src/images/e-commerce.svg b/docgen/src/images/e-commerce.svg deleted file mode 100644 index e91001a149..0000000000 --- a/docgen/src/images/e-commerce.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - - diff --git a/docgen/src/images/examples/autocomplete.png b/docgen/src/images/examples/autocomplete.png deleted file mode 100644 index 5661d07877..0000000000 Binary files a/docgen/src/images/examples/autocomplete.png and /dev/null differ diff --git a/docgen/src/images/examples/e-commerce-infinite.png b/docgen/src/images/examples/e-commerce-infinite.png deleted file mode 100644 index ee367e2aca..0000000000 Binary files a/docgen/src/images/examples/e-commerce-infinite.png and /dev/null differ diff --git a/docgen/src/images/examples/e-commerce.png b/docgen/src/images/examples/e-commerce.png deleted file mode 100644 index ee367e2aca..0000000000 Binary files a/docgen/src/images/examples/e-commerce.png and /dev/null differ diff --git a/docgen/src/images/examples/geo-search.png b/docgen/src/images/examples/geo-search.png deleted file mode 100644 index 5813233972..0000000000 Binary files a/docgen/src/images/examples/geo-search.png and /dev/null differ diff --git a/docgen/src/images/examples/material-ui.png b/docgen/src/images/examples/material-ui.png deleted file mode 100644 index 9e47b7a46c..0000000000 Binary files a/docgen/src/images/examples/material-ui.png and /dev/null differ diff --git a/docgen/src/images/examples/media.png b/docgen/src/images/examples/media.png deleted file mode 100644 index 6f7e69913e..0000000000 Binary files a/docgen/src/images/examples/media.png and /dev/null differ diff --git a/docgen/src/images/examples/multi-index.png b/docgen/src/images/examples/multi-index.png deleted file mode 100644 index 5efe089533..0000000000 Binary files a/docgen/src/images/examples/multi-index.png and /dev/null differ diff --git a/docgen/src/images/examples/react-native.png b/docgen/src/images/examples/react-native.png deleted file mode 100644 index bbed04bd75..0000000000 Binary files a/docgen/src/images/examples/react-native.png and /dev/null differ diff --git a/docgen/src/images/examples/react-router-v4.png b/docgen/src/images/examples/react-router-v4.png deleted file mode 100644 index 16316d1fbc..0000000000 Binary files a/docgen/src/images/examples/react-router-v4.png and /dev/null differ diff --git a/docgen/src/images/examples/react-router.png b/docgen/src/images/examples/react-router.png deleted file mode 100644 index 16316d1fbc..0000000000 Binary files a/docgen/src/images/examples/react-router.png and /dev/null differ diff --git a/docgen/src/images/examples/tourism.png b/docgen/src/images/examples/tourism.png deleted file mode 100644 index a23b72a850..0000000000 Binary files a/docgen/src/images/examples/tourism.png and /dev/null differ diff --git a/docgen/src/images/illu-mobile.svg b/docgen/src/images/illu-mobile.svg deleted file mode 100644 index 160f30116d..0000000000 --- a/docgen/src/images/illu-mobile.svg +++ /dev/null @@ -1,35 +0,0 @@ - - - - Mobile - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/docgen/src/images/lines-code.png b/docgen/src/images/lines-code.png deleted file mode 100644 index 55ecac4a14..0000000000 Binary files a/docgen/src/images/lines-code.png and /dev/null differ diff --git a/docgen/src/images/logo-algolia.svg b/docgen/src/images/logo-algolia.svg deleted file mode 100644 index a7d32ea21d..0000000000 --- a/docgen/src/images/logo-algolia.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/docgen/src/images/material.svg b/docgen/src/images/material.svg deleted file mode 100644 index 98da07faa4..0000000000 --- a/docgen/src/images/material.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/docgen/src/images/media.svg b/docgen/src/images/media.svg deleted file mode 100644 index 4a527f2a7f..0000000000 --- a/docgen/src/images/media.svg +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - diff --git a/docgen/src/images/menu-icon.svg b/docgen/src/images/menu-icon.svg deleted file mode 100644 index 7adacc85c1..0000000000 --- a/docgen/src/images/menu-icon.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - Menu-icon - Created with Sketch. - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/docgen/src/images/mono-white_arcteryx.svg b/docgen/src/images/mono-white_arcteryx.svg deleted file mode 100644 index 605c464a7c..0000000000 --- a/docgen/src/images/mono-white_arcteryx.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - arcteryx - Created with Sketch. - - - - - - - - - \ No newline at end of file diff --git a/docgen/src/images/mono-white_birchbox.svg b/docgen/src/images/mono-white_birchbox.svg deleted file mode 100644 index 9e9bbf2978..0000000000 --- a/docgen/src/images/mono-white_birchbox.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - Group - Created with Sketch. - - - - - - - \ No newline at end of file diff --git a/docgen/src/images/mono-white_jadopado.svg b/docgen/src/images/mono-white_jadopado.svg deleted file mode 100644 index ad7d2a0c74..0000000000 --- a/docgen/src/images/mono-white_jadopado.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - jadopado - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/docgen/src/images/mono-white_medium.svg b/docgen/src/images/mono-white_medium.svg deleted file mode 100644 index 33c0b68bdc..0000000000 --- a/docgen/src/images/mono-white_medium.svg +++ /dev/null @@ -1,30 +0,0 @@ - - - - medium - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/docgen/src/images/mono-white_periscope.svg b/docgen/src/images/mono-white_periscope.svg deleted file mode 100644 index b9b0525b58..0000000000 --- a/docgen/src/images/mono-white_periscope.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - mono-white_periscope - Created with Sketch. - - - - - - - - - \ No newline at end of file diff --git a/docgen/src/images/mono-white_quicksilver.svg b/docgen/src/images/mono-white_quicksilver.svg deleted file mode 100644 index 10fac10406..0000000000 --- a/docgen/src/images/mono-white_quicksilver.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - mono-white_quicksilver - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/docgen/src/images/more-icon.svg b/docgen/src/images/more-icon.svg deleted file mode 100644 index 244a4b1886..0000000000 --- a/docgen/src/images/more-icon.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - more-icon - Created with Sketch. - - - - - - - - - \ No newline at end of file diff --git a/docgen/src/images/open-doc-menu_icon.svg b/docgen/src/images/open-doc-menu_icon.svg deleted file mode 100644 index 03c87e7618..0000000000 --- a/docgen/src/images/open-doc-menu_icon.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - Combined Shape - Created with Sketch. - - - - - \ No newline at end of file diff --git a/docgen/src/images/phone.svg b/docgen/src/images/phone.svg deleted file mode 100644 index 8b67db93f7..0000000000 --- a/docgen/src/images/phone.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docgen/src/images/react-atom.svg b/docgen/src/images/react-atom.svg deleted file mode 100644 index ca5787c97e..0000000000 --- a/docgen/src/images/react-atom.svg +++ /dev/null @@ -1,809 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docgen/src/images/react-instant-search-logo-clean.svg b/docgen/src/images/react-instant-search-logo-clean.svg deleted file mode 100644 index b7709351eb..0000000000 --- a/docgen/src/images/react-instant-search-logo-clean.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - react-instant-search-logo - Created with Sketch. - - - - - \ No newline at end of file diff --git a/docgen/src/images/react-instant-search-logo-text.svg b/docgen/src/images/react-instant-search-logo-text.svg deleted file mode 100644 index 1d157c5997..0000000000 --- a/docgen/src/images/react-instant-search-logo-text.svg +++ /dev/null @@ -1,132 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docgen/src/images/react-instant-search-logo.svg b/docgen/src/images/react-instant-search-logo.svg deleted file mode 100644 index 5b8987b966..0000000000 --- a/docgen/src/images/react-instant-search-logo.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - react-instant-search-logo-text - Created with Sketch. - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/docgen/src/images/react-laptop-12.svg b/docgen/src/images/react-laptop-12.svg deleted file mode 100644 index e73a48ae6e..0000000000 --- a/docgen/src/images/react-laptop-12.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docgen/src/images/react-logo-bg.svg b/docgen/src/images/react-logo-bg.svg deleted file mode 100644 index ac0f3cdae9..0000000000 --- a/docgen/src/images/react-logo-bg.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - react-logo-bg - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/docgen/src/images/react-logo.svg b/docgen/src/images/react-logo.svg deleted file mode 100644 index e25b82fef4..0000000000 --- a/docgen/src/images/react-logo.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - react-logo - Created with Sketch. - - - - - \ No newline at end of file diff --git a/docgen/src/images/reactis-logo-inline-expanded.svg b/docgen/src/images/reactis-logo-inline-expanded.svg deleted file mode 100644 index f4b9783d6a..0000000000 --- a/docgen/src/images/reactis-logo-inline-expanded.svg +++ /dev/null @@ -1,71 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docgen/src/images/tourism.svg b/docgen/src/images/tourism.svg deleted file mode 100644 index 8ec22e40c4..0000000000 --- a/docgen/src/images/tourism.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - - - diff --git a/docgen/src/index.md b/docgen/src/index.md deleted file mode 100644 index 568157101b..0000000000 --- a/docgen/src/index.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: ⚡ Lightning-fast search for React and React Native apps -layout: index.pug ---- - diff --git a/docgen/src/stylesheets/components/_buttons.scss b/docgen/src/stylesheets/components/_buttons.scss deleted file mode 100644 index 09a12eb92b..0000000000 --- a/docgen/src/stylesheets/components/_buttons.scss +++ /dev/null @@ -1,114 +0,0 @@ -$color-map: ( - ('primary', #2897c6), - ('blue', #00aeff), - ('grey', #686C7C), - ('black', #33383e), - ('pink', #fb366e), - ('green', #94be46), - ('greenish', #3ecf8e), - ('wine', #6e205f), - ('white', #fff) -); - -$btn-primary-background-color: #00aeff; -$btn-primary-text-color: #FFF; -$btn-base-font-size: 12px; - -.btn { - display: inline-block; - position: relative; - padding: 1.083em 2.000em; - border-radius: 3px; - letter-spacing: 0.9px; - - font: { - family: 'Open Sans', Segoe UI, sans-serif; - weight: 500; - size: $btn-base-font-size; - }; - - text-align: center; - text-decoration: none; - line-height: 1; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); - transition: background 0.1s ease, transform 0.1s ease, font-size 0.05s ease; - will-change: background, transform, font-size ; - cursor: pointer; - background: $btn-primary-background-color; - color: #fff; - - &:hover { - transform: scale(1.05) - } - - &:active { - top: 2px; - } - - &[class*="-cta"] { - padding: 1.167em 4.000em; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.22); - } - - &[class*="-fat"] { - padding: 1.329em 1.999em; - font-size: 16px; - box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2); - } - - &[class*="-uc"] { - text-transform: uppercase; - } - - &[class*="-rd"] { - border-radius: 50px - } - - // Colors - @each $name, $color in $color-map { - &[class*="-#{$name}"] { - background: $color; - - @if $color == white { - color: #33383e, - } @else { - color: #fff; - } - - &:hover { - background: lighten($color, 5%); - } - } - } - - &[class*="-ghost"] { - max-width: inherit; - padding: 0.783em 2em 0.683em; - background: transparent; - border: 1px solid; - box-shadow: none; - font-weight: 800; - - &:hover { - font-size: 12px; - } - - @each $name, $color in $color-map { - &[class*="-#{$name}"] { - color: $color; - border-color: currentColor; - - &:hover { - background: lighten($color, 5%); - border-color: $color; - - @if $color == white { - color: #33383e, - } @else { - color: #fff; - } - } - } - } - } -} diff --git a/docgen/src/stylesheets/components/_code-sample.scss b/docgen/src/stylesheets/components/_code-sample.scss deleted file mode 100644 index a394c81aa3..0000000000 --- a/docgen/src/stylesheets/components/_code-sample.scss +++ /dev/null @@ -1,96 +0,0 @@ -.code-sample { - position: relative; - margin: 15px 0 15px 0; - background-color: #fff; - white-space: normal; - - .code-wrap { - padding: 15px 0 15px 15px; - overflow-x: auto; - overflow-scrolling: touch; - } - - code { - cursor: text; - color: #333; - background-color: #fff; - text-indent: 0; - tab-size: 4; - // for source code reading, - // `antialiased` smoothing (our default) does not looks good (too thin) - -webkit-font-smoothing: auto; - hyphens: none; - font-size: 14px; - line-height: 23px; - text-size-adjust: 100%; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - padding: 0; - font-family: "Operator Mono", "Fira Code", "Ubuntu Mono", "Droid Sans Mono", "Liberation Mono", "Source Code Pro", Menlo, Consolas, Courier, monospace; - - span { - -webkit-font-smoothing: auto; - } - - .cs-keyword { - color: #a71d5d; - } - - .cs-comment { - color: #969896; - } - - .cs-string { - color: #183691; - } - - .cs-property { - color: #795da3; - } - - .cs-number { - color: #0086b3; - } - - .cs-tag.cs-bracket { - color: #a71d5d; - } - - .cs-variable { - color: #795da3; - } - } - - .clipboard { - cursor: pointer; - position: absolute; - right: 0; - top: 0; - bottom: 0; - line-height: 22px; - text-align: center; - padding: 0 1em; - width: 13em; - background-color: rgb(235, 235, 235); - z-index: 20; - color: #999; - - &:hover { - background-color: rgb(220, 220, 220) - } - - &.clipboard-done { - color: #555; - } - } - - .heading { - position: relative; - padding: 3px 7px; - color: #999; - background-color: rgba(240, 240, 240, .8); - z-index: 10; - } -} diff --git a/docgen/src/stylesheets/components/_code-snippet.scss b/docgen/src/stylesheets/components/_code-snippet.scss deleted file mode 100644 index 26a743a6c7..0000000000 --- a/docgen/src/stylesheets/components/_code-snippet.scss +++ /dev/null @@ -1,95 +0,0 @@ -// This file is defining code snippets styling for the homepage - -$light-theme: ( - ('keyword', '#8e43e7'), - ('operator', '#f95faa'), - ('property', '#75de00'), - ('variable', '#3369e7'), - ('string', '#00aeff'), - ('comment', '#bbbbbb') -); - - - -$size: 13px; -$line-height: round(($size / 2)*2.6999999); -$gutter-width: 3.5em; -$padding: 13px; -$line-number-size: round(($size / 2)*1.538462); - -pre.al-snippet code { - transform: scale(0.765); - font-size: $size; -} -pre { - &.al-snippet { - box-sizing: border-box; - line-height: initial; - word-break: initial; - word-wrap: initial; - border-radius: 5px; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1); - display: inline-block; - margin: initial !important; - position: relative; - line-height: $line-height*1.02; - font-size: $size; - - &:before { - content: '1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28'; - display: block; - padding: 0 0 !important; - position: absolute; - width: $gutter-width; - top: 0; - left: 2em; - z-index: 9; - height: 100%; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - word-spacing: $gutter-width; - white-space: pre-line; - line-height: $line-height*1.02; - font-size: $size; - text-align: center; - transform: scale(0.765); - opacity: 0.2; - top: -0.5em; - } - - &:after { - content: ''; - display: block; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(to left, #1b192b, rgba(#1b192b, 0)); - pointer-events: none; - } - - code { - position: relative; - top: -0.5em; - } - - // Theme - &[data-snippet-theme="dark"] { - - // Now, let' give it colors - // Namespace : sn- - @each $name, $color in $light-theme { - .sn-#{$name} { - color: #{$color} - } - } - } - } -} - -[debug-code-snippet] pre.al-snippet { - background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%); - background-size: $size $size; - background-origin: content-box; -} diff --git a/docgen/src/stylesheets/components/_containers.scss b/docgen/src/stylesheets/components/_containers.scss deleted file mode 100644 index 5ab25416e8..0000000000 --- a/docgen/src/stylesheets/components/_containers.scss +++ /dev/null @@ -1,961 +0,0 @@ - - -// Avoid horizontal flickering when scrollbar appears -body { - overflow-y: scroll; - background: linear-gradient(to right, #ffffff, #ebf1f5); -} - -/* Containers -================*/ -.container { - margin: auto; - width: 100%; - max-width: $max-container-width; - float: none; -} - -.row { - float: left; - - body.example &{ - float: inherit - } -} - -.text-right { - text-align: right; -} - -body:not(.example) section { - min-height: 550px; - width: 100%; - float: left; - position: relative; - z-index: 1; - - &.oddbg { - background-color: #f9fafb - } - - @include medium-mq { - padding: 0 16px; - } -} - -.desc-icon { - width: 34px; - height: 34px; -} - -//--------------------------------------- -// -// Landing sections -// -//--------------------------------------- - - -[class*="is-section__"] { - min-height: inherit; - - > .container { - max-width: $container-width; - } - - - - [class*="__graphic"], - [class*="__description"] { - width: 50%; - float: left; - padding: 0 1em; - - @include mobile-mq { - width: 100%; - text-align: center; - - } - } - - // To handle diagonals - &.is-section__intro, - &.is-section__widgets, - &.is-section__code-samples, - &.is-section__community, - &.is-section__live, - &.is-section__twitter, - &.is-section__marketing, - &.is-section__features, - &.is-section__footer { - z-index: 0; - - - @include mobile-mq { - &:before, - &:after { - display: none !important; - - } - } - } -} - -//--------------------------------------- -// -// Intro section -// -//--------------------------------------- - -.is-section__intro { - background: #f6f9fc; - z-index: 1 !important; - min-height: 350px !important; - - - @include diagonal(-2deg, #f6f9fc, 170px, 'true', before) { - top: -100px; - z-index: 0; - } - - @include diagonal(2deg, #fff, 170px, 'true', after) { - top: 210px; - z-index: -1; - } - - .intro-illu { - position: absolute; - top: -200px; - max-width: 930px; - width: 60%; - margin: auto; - left: 0; - right: 0; - display: block; - z-index: 2; - } - - @include mobile-mq { - display: none; - } - - @include big-min-mq { - @include diagonal(-2deg, #f6f9fc, 200px, 'true', before) { - top: -100px; - z-index: 0; - } - - @include diagonal(2deg, #fff, 200px, 'true', after) { - top: 210px; - z-index: -1; - } - } -} - - - -//--------------------------------------- -// -// Widgets section -// -//--------------------------------------- -.is-section__widgets { - background: #fff; - z-index: 0; - padding-top: 60px; - padding-bottom: 160px; - - figure.widgets-illu { - width: 104px; - margin: auto; - - img { - width: 100%; - } - - &~ h2.title { - margin-top: 1em; - } - } - - .section__graphic { - img { - max-width: 100%; - } - - @include mobile-mq { - text-align: center; - - img { - max-width: 80%; - margin: 1em 0; - } - } - } - - .section__description { - padding-left: 3em; - svg { - stroke: #00aeff; - } - } - - @include diagonal(-2deg, #1b192b, 120px, 'true', after) { - top: 340px; - position: relative; - z-index: 3; - } - - - @include mobile-mq { - padding: 60px 0 !important; - } -} - - - -//--------------------------------------- -// -// Code samples section -// -//--------------------------------------- -.is-section__code-samples { - background: #1b192b; - color: #fff; - padding-top: 40px; - padding-bottom: 40px; - overflow: hidden; - - - @include small-mq { - overflow: hidden; - - } - - .section__description { - padding-right: 3em; - margin-top: 120px; - - svg { - stroke: #00aeff; - } - } - - .light-link { - float: right; - clear: both; - - @include mobile-mq { - float: none; - margin: auto; - width: 100%; - display: block; - margin-bottom: 2em; - } - } - - .title, - p { - color: #fff - } - p { - max-width: 400px; - float: right; - } - - - pre { - background: url('../images/lines-code.png')no-repeat center left 20% / 102%; - color: #fff; - - code { - position: relative; - display: block; - } - } - @include small-mq { - p { max-width: 100% } - } - @include mobile-mq { - overflow: hidden; - } -} - - - -//--------------------------------------- -// -// Community sections -// -//--------------------------------------- -.is-section__community { - background: #f6f9fc; - padding-top: 100px; - - .section__graphic { - position: relative; - min-height: 200px; - - - .phone_illustration, - .computer_illustration { - position: absolute; - - } - .computer_illustration { - max-width: 720px; - display: block; - left: -200px; - } - - .phone_illustration { - z-index: 4; - max-width: 200px; - left: 50%; - top: 50px; - } - } - .section__description { - position: relative; - top: 100px; - left: 3em; - z-index: 5; - - svg { - stroke: #00aeff; - } - } - - ul.subtle-check-list { - position: absolute; - z-index: 9; - top: 70%; - right: 20px; - width: 170px; - - li { - width: 100%; - } - - svg { - width: 12px; - float: right; - margin-top: 4px; - } - - use { - fill: $sweet-purple; - width: 12px; - } - } - - @include diagonal(-2deg, #1b192b, 100px, 'true', after) { - top: -140px; - position: relative; - z-index: 3; - } - @include diagonal(2deg, #FFF, 180px, 'true', before) { - top: 480px; - position: absolute; - z-index: 0; - } - - @include big-min-mq { - @include diagonal(-2deg, #1b192b, 140px, 'true', after) { - top: -180px; - position: relative; - z-index: 3; - } - } - - @include mobile-mq { - - .phone_illustration, - .computer_illustration { - display: none !important; - } - - .section__description { - left: 0; - } - - ul.subtle-check-list { - position: absolute; - z-index: 9; - top: 40%; - left: 0; - right: 0; - margin: auto; - } - } -} - - -//--------------------------------------- -// -// Live sections -// -//--------------------------------------- -.is-section__live { - background: #fff; - padding-top: 40px; - padding-bottom: 4em; -} - - -//--------------------------------------- -// -// Twitter sections -// -//--------------------------------------- -.is-section__twitter { - overflow: hidden; - background: #f6f9fc; - padding: 100px 0; - min-height: 500px; - - @include diagonal(-2deg, #FFF, 180px, 'true', before) { - top: -100px; - position: absolute; - z-index: 0; - } - - @include mobile-mq { - display: none; - } -} - -//--------------------------------------- -// -// Features sections -// -//--------------------------------------- -.is-section__features { - background: #fff; - - .container { - top: 50%; - position: absolute; - left: 50%; - transform: translate(-50%, -50%); - } - - - @include diagonal(-2deg, #FFF, 180px, 'true', before) { - top: -20px; - position: absolute; - z-index: 0; - } - - @include mobile-mq { - border-top: 1px solid rgba(black, 0.1); - - .container { - position: relative; - top: inherit; - left: inherit; - transform: none; - } - } -} - -//--------------------------------------- -// -// Marketing sections -// -//--------------------------------------- -.is-section__marketing { - background: #222432; - color: #fff; - text-align: center; - padding-top: 100px; - - .container { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - - h2 { - font-size: 36px; - font-weight: 400; - } - h3 { - font-family: 'Open Sans', $font-fallback; - font-size: 16px; - font-weight: 400; - margin-top: 1.5em; - } - - a.icon { - margin: auto; - - svg { - width: 40px; - height: 40px; - margin: 20px auto; - - use { - fill: #fff - } - } - } - - .brands-list { - list-style: none; - width: 100%; - margin-top: 50px; - - li { - display: inline-block; - opacity: 0.5; - padding: 0 20px; - max-width: calc(100% / 6); - transition: opacity 0.1s ease; - will-change: opacity; - - img { - vertical-align: middle; - max-width: 100% - } - - &:hover { - opacity: 1; - } - - - @include mobile-mq { - max-width: calc(100% / 3); - margin-bottom: 1em; - } - } - - @include mobile-mq { - padding: 0; - } - - &:hover { - li:not(:hover) { - opacity: 0.3; - } - } - } - - - @include diagonal(-2deg, #FFF, 180px, 'true', before) { - top: -120px; - position: absolute; - z-index: 0; - } -} - - -//--------------------------------------- -// -// Footer sections -// -//--------------------------------------- -.is-section__footer { - background-image: linear-gradient(45deg, #3369e7, #00aeff), linear-gradient(#fafafa, #fafafa); - - > div[class^="footer__"] { - width: 50%; - float: left; - position: relative; - min-height: 550px; - - @include mobile-mq { - width: 100%; - } - } - - .container { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: 3; - max-width: 60%; - - @include mobile-mq { - max-width: 90%; - } - } - - .footer__community { - color: #fff; - - @include diagonal(-2deg, 'linear-gradient(to right, #12161e, #222432), linear-gradient(#30373b, #30373b)', 800px, false) { - transform: skewX(-8deg); - top: -20px; - left: -80px; - width: 100%; - - @include mobile-mq { - display: none; - } - } - - h3 { - font-size: 24px; - } - - figure { - svg { - width: 33px; - - use { - width: 100%; - } - - &.icon-react { - stroke: #00aeff - } - &.icon-heart { - fill: $sweet-purple; - width: 14px; - margin: 0 8px; - } - &.icon-al { - fill: #fff - } - } - @include mobile-mq { - text-align: center; - } - } - - - ul { - list-style: none; - padding: 0; - margin: 0; - - li { - display: inline-block; - width: 100%; - color: #9299ad; - padding: 1em 0; - border-bottom: 1px solid rgba(#ffffff, 0.1); - } - - - svg { - width: 19px; - height: 20px; - display: inline-block; - float: right; - - use { - fill: $sweet-purple - } - } - } - - .btn { - margin-top: 3em; - font-size: 15px; - max-width: 300px; - - &:hover { - font-size: 15px; - } - - @include mobile-mq { - margin: 3em auto 0; - max-width: 100%; - width: 100%; - } - } - - - @include mobile-mq { - background: linear-gradient(to right, #12161e, #222432), linear-gradient(#30373b, #30373b); - - .btn { - width: 100%; - } - } - } - - .footer__call-to-action { - - - h2 { - font-size: 36px; - color: #fff; - font-weight: 400; - margin-bottom: 36px; - } - - .btn { - display: block; - float: left; - margin-right: 24px; - max-width: inherit; - color: #fff; - min-width: 160px; - font-size: 15px; - max-width: 300px; - - &:hover { - font-size: 15px; - } - - } - - @include mobile-mq { - text-align: center; - - .btn { - max-width: 100%; - width: 100%; - margin-bottom: 2em; - } - } - } - - - @include diagonal(2deg, #222432, 140px, 'true', before) { - top: -140px; - position: absolute; - z-index: 8; - } - - @include mobile-mq { - padding: 0 !important; - } -} - -//---------------------------- -// -// Subtle check list -// -//---------------------------- - -ul.subtle-check-list { - list-style: none; - padding: 0; - margin: 0; - width: 200px; - - li { - display: inline-block; - color: #00aeff; - font-weight: 400; - padding: 0 16px; - height: 40px; - min-width: 150px; - margin-bottom: 20px; - line-height: 40px; - clear: both; - background: rgba(#FFF, 0.9); - border-radius: 18px; - box-shadow: 0 2px 10px 0 rgba(40, 120, 236, 0.2); - text-transform: uppercase; - - svg { - width: 33px; - height: 33px; - - use { - fill: red - } - } - } -} -//---------------------------- -// -// Large tiles -// -//---------------------------- - -.cm-large-tiles { - width: 100%; - list-style: none; - position: relative; - float: left; - padding: 0; - - figure, - img { - height: 64px; - } - - figure { - margin-bottom: 30px; - } - - img { - width: 64px; - } - - .tile { - width: 33%; - text-align: center; - height: 284px; - border-radius: 3px; - float: left; - position: relative; - will-change: transform, box-shadow; - transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; - - .item-title { - color: #686d7d; - font-size: 20px; - } - - > a { - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - } - - .light-link { - margin-top: 8px; - display: inline-block; - - } - - .tile-container { - position: absolute; - top: 50%; - left: 50%; - width: 100%; - transform: translate(-50%, -50%); - } - - &:not(:last-child):hover { - box-shadow: 0 2px 10px 0 rgba(40, 120, 236, 0.2); - transform: scale(1.1) - } - - &:last-child:hover { - background: rgba(black, 0.035) - } - - @include mobile-mq { - width: 50%; - } - } - - @include mobile-mq { - padding: 1em; - } - - a { - display: inline-block; - } -} - - -//---------------------------- -// -// Features item -// -//---------------------------- - -.cm--feature-list { - display: flex; - flex-wrap: wrap; - flex-direction: row; - - .list-item { - flex: 0 1 30%; - border-radius: 3px; - background-color: #ffffff; - box-shadow: 0 2px 10px 0 rgba(40, 120, 236, 0.2);; - padding: 24px; - max-height: 74px; - margin-bottom: 20px; - margin-right: 30px; - position: relative; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &_muted { - border: solid 2px #e3e4e8; - padding: 35px; - box-shadow: none; - background: transparent; - } - - svg { - display: block; - float: left; - width: 40px; - } - - span { - color: #333; - margin-bottom: 8px; - line-height: 1.8; - font-family: "Open Sans", $font-fallback; - font-weight: 400; - padding-left: 28px; - font-size: 14px; - } - a { - display: block; - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - text-decoration: none; - border-radius: 3px; - - svg { - display: inline-block; - max-width: 26px; - margin: -2px 24px 0; - } - - span { - line-height: 74px; - } - - &:hover { - background: $brand-primary; - - span { - color: #fff; - } - - svg path{ - fill: #fff !important - } - } - } - &:last-of-type { - span { - padding-left: 0; - } - - a svg { - position: relative; - top: 50%; - left: 0; - transform: translateY(-50%); - } - } - - - @include mobile-mq { - flex: 0 1 100%; - margin-right: 0; - - &:last-of-type { - flex: 0 1 100%; - } - } - } - - @include mobile-mq { - justify-content: space-between; - padding-top: 30px; - } -} diff --git a/docgen/src/stylesheets/components/_documentation.scss b/docgen/src/stylesheets/components/_documentation.scss deleted file mode 100644 index c45ad680c0..0000000000 --- a/docgen/src/stylesheets/components/_documentation.scss +++ /dev/null @@ -1,482 +0,0 @@ -.documentation-section, -.examples-section { - .container { - article { - width: 100%; - position: relative; - margin-top: 60px; - } - } - - .guide-nav { - padding: 1em 0; - border-top: 1px solid #d8d8d8; - border-bottom: 1px solid #d8d8d8; - } - - .guide-nav:after { - clear: both; - content: ''; - display: block; - } - - .guide-nav-left { - float: left - } - - .guide-nav-right { - float: right - } - - p, - ul, - ol { - font-size: 16px; - line-height: 22px; - } - - h2 { - color: $charcoal-grey; - font-size: 28px; - padding-right: 1em; - border-bottom: 1px solid #d8d8d8; - margin-top: 32px; - padding-bottom: 8px; - - &:first-of-type { - margin-top: 0; - - .content &{ - margin-top: -10px; - } - } - - @include small-mq { - font-size: 22px; - } - } - - h4 { - font-weight: normal; - text-decoration: underline; - } - - .api-entry { - font-weight: bold; - position: relative; - - - code { - font-size: 100%; - font-weight: bold; - } - } - - .api tr td:first-child { - vertical-align: top; - - p, ul { - font-size: 90%; - margin: .5em 0; - line-height: 1.5em; - } - ul { - padding-left: 1.5em; - } - em { - text-decoration: underline; - font-style: normal; - } - } - - - .css-class { - white-space: nowrap; - } - - .chapter-summary { - background: $bg-pale-accent; - padding: 10px; - border-radius: 4px; - } - - .documentation-container { - float: left; - position: relative; - left: #{$sidebar-width}; - width: calc(100% - #{$sidebar-width}); - min-height: 1000px; - padding-left: 30px; - padding-bottom: 200px; - padding-top: 60px; - - .editThisPage { - position: absolute; - font-size: 12px; - right: 12px; - top: 12px; - padding: 3px 6px; - border: 1px solid #21A4D7; - border-radius: 3px; - text-transform: uppercase; - opacity: .7; - - &:hover { - background: #21A4D7; - color: #ebf1f5; - opacity: 1; - } - } - - p, - ul, - ol { - font-size: 16px; - line-height: 22px; - - li { - clear: both; - margin-bottom: 10px; - } - - ul { - font-weight: normal; - font-size: 14px; - position: relative; - - li { - height: 26px; - line-height: 26px; - - &:before { - content: '-'; - float: left; - margin-right: 6px; - color: $greyish - } - } - } - } - - .content { - h2:first-child { - margin-top: -16px; - } - & p:first-child { - margin-top: 0; - } - } - - h2, h3, .api-entry, .css-class { - overflow: hidden; - &:before { - content: ""; - display: block; - height: $offset-height; - margin-top: -$offset-height; - box-sizing: content-box; - } - &:target { - overflow: visible; - } - } - - // API tables - table.api { - padding: 0; - border-collapse: collapse; - border-spacing: 0; - width: 100%; - display: table; - table-layout: fixed; - margin: 0; - - tbody { - border: 1px solid #ccc; - - } - - tr { - background-color: white; - margin: 0; - padding: 0; - display: flex; - flex-direction: row; - flex-wrap: wrap; - - &:not(:last-child), - &:not(:only-child) { - border-bottom: 1px solid #ccc; - } - - &:nth-child(2n) { - background-color: #f8f8f8; - } - - th { - font-weight: bold; - text-align: left; - margin: 0; - padding: 6px 13px; - - &:first-child { - margin-top: 0; - } - - &:last-child { - margin-bottom: 0; - } - } - - td { - text-align: left; - margin: 0; - padding: .5em; - flex: 1; - white-space: normal; - - - &:first-child { - margin-top: 0; - flex-grow: 1; - min-width: 170px; - border-right: 1px solid #CCC; - white-space: normal; - - &:only-child { - border: none; - - } - - &[colspan] { - flex: 100%; - border-right: none; - } - } - - &:nth-child(3) { - margin-bottom: 0; - } - - &+ td:empty { - display: none; - } - &+ td:nth-child(3):not(:empty) { - border-left: 1px solid #CCC; - } - } - } - &+ h2, - &+ h3 { - margin-top: 2em; - } - - tr, td { - white-space: nowrap; - } - - @include small-mq { - display: block; - float: left; - margin-bottom: 2em; - - thead, tbody, th, td, tr { - display: block; - float: left; - width: 100%; - } - tbody { - - } - tr { - - - border-left: 1px solid #ccc; - - th { - border: none; - - &:nth-of-type(2) { - border-left: 1px solid #cccccc; - } - } - } - tr td { - border: none; - overflow: auto; - - - &:nth-of-type(2) { - border-left: 1px solid #cccccc; - } - } - - th, td { - width: 50%; - float: left; - } - - tr:nth-child(even) { - background: #f8f8f8 - } - } - } - - - .anchor { - margin-left: .2em; - display: inline; - visibility: hidden; - } - - .algolia-places { - color: #000000; - } - - h2, h3, .api-entry { - .anchor { - text-decoration: none; - position: absolute; - z-index: 2; - pointer-events: all; - } - .anchor:after{ - content: '#'; - color: $accent-color; - } - - &:hover { - .anchor { - visibility: visible; - } - } - - &:target { - .anchor { - visibility: visible; - } - } - } - - img { - max-width: 50%; - margin: 0 25%; - } -} - -tr.api-entry-values { - .api-entry-type { - white-space: nowrap; - } -} - -.DocProps { - .Prop, - .Type .Entry { - padding: 1.2em 0.8em; - background-color: #EEE; - } - - .Prop:nth-child(even), - .Type .Entry:nth-child(even) { - background-color: #E5E5E5; - } - - .Entry__head { - display: flex; - align-items: center; - padding-bottom: 1em; - } - - .Entry__badge { - padding: .3em .5em; - font-size: 0.8em; - background-color: #7FDBFF; - margin-right: 0.5em; - } - - .Entry__name { - font-weight: 700; - margin-right: 0.5em; - } - - .Entry__description ~ .Entry__default { - padding-top: 1em; - } - - .Entry__description p { - margin: 0; - } - - .Entry__link { - display: none; - margin-left: 0.5em; - } - - .Entry__head:hover .Entry__link { - display: inline; - } - - .Prop__types { - padding-top: 1em; - } - - .Type__head { - padding-bottom: 0.7em; - } - - .Type__name { - font-weight: 700; - } - - .Type__link { - display: none; - } - - .Type__head:hover .Type__link { - display: inline; - } - - .Type__entries { - font-size: 0.9em; - border: 1px solid #BBB; - } -} - -@include small-mq { - padding-top: 32px; - - .container { - - .documentation-container { - left: 0; - width: 100%; - padding: 32px 0; - } - - article { - float: left; - margin-top: 40px; - } - } - - .documentation .hero-section { - .fl-left { - max-width: 300px !important; - width: 300px !important; - } - } - } -} - -.examples-section > .container { - padding-top: 120px; -} - -.storybook-section { - margin-top: 20px; - text-align: center; - line-height: 42px; -} - -@import "docs/method"; diff --git a/docgen/src/stylesheets/components/_dropdown.scss b/docgen/src/stylesheets/components/_dropdown.scss deleted file mode 100644 index 006c5b63cd..0000000000 --- a/docgen/src/stylesheets/components/_dropdown.scss +++ /dev/null @@ -1,83 +0,0 @@ -/** - * Dropdown style starts here - * - */ -$sd-offset-right: 0; -$sd-offset-top: 60px; -$sd-font-size: 14px; -$sd-border-color: #ccc; -$sd-min-width: 160px; -$sd-background-color: white; -$sd-item-border-bottom: solid 1px #eee; -$sd-item-hover-background: #f9f9f9; - -ul.simple-dropdown { - position: absolute; - right: $sd-offset-right; - top: $sd-offset-top; - z-index: 1000; - display: none; - min-width: $sd-min-width; - padding: 5px 0; - margin: 2px 0 0; - list-style: none; - font-size: $sd-font-size; - text-align: left; - border: 1px solid $sd-border-color; - border-radius: 0 0 3px 3px; - background: $sd-background-color; - border: none; - padding: 0; - box-shadow: 0 1px 4px 0 rgba(31,59,93,0.5); - animation: fadeInDown 0.1s cubic-bezier(0.23, 1, 0.32, 1); - padding: 0; - margin: 0; - overflow: hidden; - will-change: opacity, transform; - - li { - border-bottom: $sd-item-border-bottom; - padding: 0; - margin: 0; - - &:hover { - background: $sd-item-hover-background; - } - } - - a { - text-transform: none; - margin: 0; - width: 100%; - border: none; - color: #325f96; - display: block; - padding: 1em 2em; - clear: both; - font-weight: normal; - line-height: 1.42857; - color: #333333; - white-space: nowrap; - font-size: 1em; - } - - &.opened { - display: block; - } -} - - - -@keyframes fadeInDown { - 0% { - opacity: 0; - transform: translate3d(0, -50%, 0); - } - 20% { - opacity: 0; - } - 100% { - opacity: 1; - transform: none; - } -} diff --git a/docgen/src/stylesheets/components/_examples-intro.scss b/docgen/src/stylesheets/components/_examples-intro.scss deleted file mode 100644 index 608ed4eaa2..0000000000 --- a/docgen/src/stylesheets/components/_examples-intro.scss +++ /dev/null @@ -1,115 +0,0 @@ -// icon - degree - colorStart - colorEnd -$square-map: ( - (input,135, #13c4a5, #10a4b8), - (form,138, #af84e3, #5071c7), - (city,314, #ec4918, #e25d8d), - (country,134, #fad961, #f76b1c), - (map,135, #81bf30, #00bdbd), - (advanced,135, #bfbfbf, #8a8a8a) -); - -.examples-intro { - margin-top: 4em; - margin-bottom: 6em; - - float: left; - width: 100%; - display: none; - - @include small-mq { - margin-bottom: 1.5em; - } - - body.examples &{ - display: block; - } - - .items-holder { - margin: 2em auto 2em; - display: block; - max-width: 940px; - padding: 0em; - display: flex; - flex-wrap: wrap; - flex-direction: row; - - @include small-mq { - align-items: center; - margin-bottom: 0; - } - - a { - text-decoration: none; - color: inherit; - } - - .item { - max-width: 120px; - height: 120px; - float: left; - flex:1 1 auto; - margin: 0 22px; - text-align: center; - - &:first-of-type { - margin-left: 0; - } - &:last-of-type { - margin-right: 0; - } - - @include small-mq { - margin: auto auto 58px; - width: 50%; - - &:first-of-type { - margin-left: auto; - } - &:last-of-type { - margin-right: auto; - } - } - - span.square { - display: block; - position: relative; - max-width: 120px; - height: 120px; - border-radius: 16px; - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3); - transition: box-shadow 0.3s ease, transform 0.1s ease; - - @each $class,$degrees, $color-a, $color-b in $square-map { - &.#{$class} { - background: linear-gradient(#{$degrees}deg, #{$color-a} 0, #{$color-b} 100%); - } - } - - &:hover { - box-shadow: none; - transform: scale(1.05); - - &~ .name { - opacity: 1; - } - } - } - - svg { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - - .name { - font-family: 'Open Sans', Helvetica Neue, helvetica, sans-serif; - opacity: 0.8; - font-size: 16px; - font-weight: 300; - line-height: 52px; - transition: opacity 0.3s ease; - } - } - } -} diff --git a/docgen/src/stylesheets/components/_examples.scss b/docgen/src/stylesheets/components/_examples.scss deleted file mode 100644 index fc80a24354..0000000000 --- a/docgen/src/stylesheets/components/_examples.scss +++ /dev/null @@ -1,154 +0,0 @@ -.examples-container { - display: flex; - flex-flow: row wrap; - justify-content: space-between; - - padding: 40px 0 60px; - - .example-tile { - flex: 0 1 47%; - margin-bottom: 4em; - padding: 1em; - display: flex; - flex-direction: column; - - h2 { - border-bottom: none; - flex-grow: 1; - } - - a { - background: #fefefe; - padding: 1em; - border: 1px solid #ebebeb; - box-shadow: 0 20px 20px rgba(0, 0, 0, 0.08); - border-radius: 3px; - position: relative; - text-align: center; - display: block; - width: 100%; - position: relative; - - - @include small-mq { - figcaption { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - width: 100%; - display: block; - height: 50px; - line-height: 1; - font-size: 12px; - top: 30px; - } - } - &:after { - content:''; - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - background: rgba($accent-color-darkish, 0.95); - opacity: 0; - z-index: 0; - border-radius: 3px; - transition: opacity 0.2s ease; - pointer-events: none; - } - - figure { - img { - width: 100%; - } - } - - figcaption { - width: 100%; - text-indent: 0; - color: inherit; - left: 0; - top: 50%; - transform: translateY(-50%); - text-transform: uppercase; - font-size: 1.6em; - font-weight: bold; - color: #fff; - transform: scale(0); - z-index: 2; - line-height: 0; - transition: transform 0.2s ease; - } - - &:hover { - &:after { - opacity: 1; - } - - figcaption { - transform: scale(1) - } - } - } - - } -} - - - -.form-control { - width: 100%; - box-sizing: border-box; - padding-left: 16px; - line-height: 40px; - height: 40px; - border: 1px solid #cccccc; - border-radius: 3px; - outline: none; -} - -.form-group { - margin-bottom: 1em; - clear: both; - - label { - display: block; - font-weight: bold; - font-size: .8em; - } -} - -#map-example-container, -#map-example-container-paris { - // trigger zindex value otherwise - // map goes hover other elements (like header) - position: relative; - z-index: 0; -} - - -body.example { - .cm-navigation { - z-index: 99999; - top: 0; - border-bottom: 1px solid darken(#1d2f40, 10%); - } - - aside { - float: left; - top: 130px; - } - .content-wrapper { - top: $nav-height; - } - - #results-topbar { - min-height: 60px; - } - - .btn{ - color: black; - } - -} diff --git a/docgen/src/stylesheets/components/_fonts.scss b/docgen/src/stylesheets/components/_fonts.scss deleted file mode 100644 index 4f9bcbf37e..0000000000 --- a/docgen/src/stylesheets/components/_fonts.scss +++ /dev/null @@ -1,142 +0,0 @@ -p a, -a { - color: #21A4D7; - text-decoration: none; -} - -/* heading settings -=======================*/ -h1,h2,h3,h4 { - padding: 0; - margin: 0; - font-family: 'Raleway', Helvetica Neue, helvetica, sans-serif; -} - -h1 { - font-size: 46px; -} - -h3 { - font-size: 20px; -} - -h3 { - font-size: 18px; -} - -/* Paragraphs -======================*/ -p { - font-family: 'Open Sans', Helvetica Neue, helvetica, sans-serif; - font-size: 20px; - line-height: 32px; - color: $blueish-grey; - - @include small-mq { - font-size: 16px; - } - - &+ul, - &+ol { - font-size: 20px; - line-height: 32px; - color: $charcoal-grey-75; - } -} - -li { - color: $blueish-grey; -} - -/* Big titles -======================*/ -h2.title { - text-align: center; - width: 100%; - font-size: 1.8em; - color: $charcoal-greyish; - display: block; - position: relative; - margin-top: 120px; - margin-bottom: 80px; - font-weight: 300; - font-family: 'Open Sans Light', 'Open Sans'; - - &:after { - content: ''; - position: absolute; - width: 50px; - height: 3px; - background: $sweet-purple; - top: 2.8em; - left: 0; - right: 0; - margin: auto; - } - - ~ p { - - font-size: 1.3em; - text-align: center; - margin: 1em; - - @include small-mq { - font-size: 16px; - } - } - - @include small-mq { - margin-top: 60px; - font-size: 22px; - } -} - -/* Small titles -======================*/ -h3.title { - font-size: 20px; - color: $greyish-brown; - margin: 0; - padding: 0; - line-height: 1.2em; - font-family: 'Open Sans', 'Open Sans', $font-fallback; - font-weight: 600; - - ~ p { - font-size: 14px; - margin: 1em 0; - padding: 8px 0 0; - } -} - -h4 { - font-size: 18px; -} - -/* Anchors / links -====================*/ -.link { - text-transform: uppercase; - font-size: 16px; - color: $accent-color; - font-weight: 600; - text-decoration: none; - padding: 0 8px; -} - -/* Glyphs -====================*/ -.glyph { - opacity: 0.8; - font-size: 0.75em; -} - - -/* codes -====================*/ - -pre code { - border: none; - padding: inherit; - border-radius: none -} diff --git a/docgen/src/stylesheets/components/_header.scss b/docgen/src/stylesheets/components/_header.scss deleted file mode 100755 index 252df30bb3..0000000000 --- a/docgen/src/stylesheets/components/_header.scss +++ /dev/null @@ -1,790 +0,0 @@ -@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700'; - -@import '../vendors/family', - '../vendors/mixins'; - -$nav-background: #1d2f40; -$nav-background-medium: mix($nav-background,#fff,96%); -$nav-background-light: mix($nav-background,#fff,92%); - - - -@include component('navigation') { - background: $nav-background; - width: 100%; - height: $nav-height; - font-family: $font-stack; - float: left; - transform-style: preserve-3d; - perspective: 2000px; - position: fixed; - z-index: 100; - - - a { - color: #fff; - text-decoration: none; - font-weight: 300; - } - - - @include component('navigation', 'brands') { - max-width: 560px; - width: auto; - height: $nav-height; - float: left; - overflow: hidden; - - > div { - float: left; - text-align: center; - line-height: $nav-height; - position: relative; - transition: transform 0.4s ease; - } - - a { - display: block; - width: 100%; - height: 100%; - float: left - } - - @media (max-width: 1140px) { - max-width: auto; - width: auto; - transform: translateX(-204px); - float: left; - overflow: visible; - - } - - @include small-mq { - width: 600px; - } - - - &--algolia { - width: 180px; - background: $nav-background-light; - @include arrowSeparator($nav-background-light); - z-index: 10; - height: $nav-height; - - img { - max-width: 100%; - vertical-align: middle; - } - - - - &:hover { - - svg path:nth-child(1) { - fill: #46AEDA; - } - svg { - transform: scale(1.1) - } - } - } - - &--community { - width: 180px; - background: $nav-background-medium; - @include arrowSeparator($nav-background-medium); - - img { - display: inline; - width: 32px; - vertical-align: middle; - margin-right: 0.5em; - margin-left: 1em; - } - - &.dropdownActive { - &~ .cm-navigation__dropdown-holder .cm-navigation__brands-dropdown, - .cm-navigation__dropdown-holder:hover { - transform: none; - opacity: 1; - z-index: 11; - visibility: visible; - pointer-events: auto; - } - } - - @include small-mq { - max-width: 80px; - - svg { - left: 16px; - } - - span { - display: none; - } - } - } - - - &--project { - padding-left: 2.5em; - - @include small-mq { - width: 200px; - padding-left: 0; - } - } - } - - - .cm-navigation__dropdown-holder { - position: absolute !important; - top: $nav-height; - left: 0; - max-width: 490px; - width: 100%; - height: 800px; - perspective: 500px; - pointer-events: none; - z-index: 999; - - @include small-mq { - display: none; - - } - } - @include component('navigation', 'brands-dropdown') { - width: 490px; - position: absolute !important; - z-index: -1; - top: 10px; - left: 1em; - background: #FFF; - border-radius: 8px; - box-shadow: 0 32px 44px 0 rgba(0, 0, 0, 0.2); - opacity: 0; - transform: rotateX(-20deg) translateZ(20px) scale(0.95); - transform-origin: 50% -50px; - opacity: 0; - will-change: transform, opacity, visibility; - transition-property: transform, opacity, -webkit-transform ,visibility; - transition-duration: .35s; - visibility: hidden; - display: flex; - flex-direction: column; - flex-wrap: wrap; - - @media (max-width: 1140px) { - left: 50%; - } - - @media ( max-width: 768px ) { - display: none; - } - - &:after { - content: ''; - display: block; - width: 24px; - height: 24px; - background: #fff; - position: absolute; - z-index: -1; - top: 0; - left: 0; - right: 0; - margin: auto; - transform: rotate(-45deg) translateY(-10px); - transform-origin: 50% 0; - border-radius: 3px; - - @media (max-width: 1140px) { - right: inherit; - left: 2em; - } - } - - &__container { - margin: 2em 0 0; - float: left; - width: 100%; - background: #f6f9fc; - } - - &__footer { - img, - svg { - vertical-align: middle - } - - font-size: 18px; - - a { - color: #000; - } - } - - p { - font-size: 16px; - font-weight: 600; - color: #1d3657; - } - - [data-inject-community] { - padding: 0 1em; - } - - .dropdown-item { - flex: 50%; - margin: 0.5em auto; - border-radius: 3px; - - &:hover { - background: rgba(black, 0.1); - - .item-icon { - transform: scale(1.1); - - img { - transform: scale(1.1) - } - } - } - - a { - display: flex; - flex-wrap: wrap; - flex-direction: row; - align-items: center; - color: #1d2f40; - } - - h4 { - flex: 60%; - text-align: center; - text-transform: capitalize; - text-align: left - } - - .item-icon { - width: 38px; - height: 38px; - margin: 8px; - border-radius: 4px; - padding: 8px; - display: flex; - flex-wrap: wrap; - align-items: center; - transition: transform 0.3s ease; - - img { - max-width: 100%; - transition: transform 0.3s ease 0.15s; - } - } - - svg, - img { - margin: 0 16px; - flex: 20%; - max-width: 32px; - text-align: center; - vertical-align: middle; - margin: auto; - } - } - - .community-logo { - max-width: 140px; - margin-right: 6px; - } - - .algolia-logo { - max-width: 80px; - } - } - - @include component('navigation', 'menu-mobile-trigger') { - float: right; - height: $nav-height; - line-height: $nav-height; - display: none; - - button { - appearance: none; - border: none; - background: transparent; - padding: 0 1em; - } - - @media (max-width: 768px) { - display: block; - position: absolute; - top: 0; - right: 0; - z-index: 9999; - } - } - - @include component('navigation', 'menu') { - float: right; - width: auto; - height: $nav-height; - line-height: $nav-height; - - @media (max-width: 960px) { - position: absolute; - right: 0; - top: 0; - } - - @include component('menu', 'list') { - list-style: none; - padding: 0; - margin: 0; - float: left; - position: relative; - - &__item { - display: inline-block; - padding: 0; - margin: 0; - height: $nav-height; - line-height: $nav-height; - float: left; - margin-right: 20px; - position: relative; - - &:hover, - &.active { - border-bottom: 4px solid $accent-color; - - @include small-mq { - border-bottom: none; - } - } - - - &.active:after { - content: ""; - width: 100%; - height: 4px; - position: absolute; - bottom: 0; - left: 0; - animation: slidebg 0.8s ease; - will-change: background-size; - } - - a:not([href]) { - cursor: pointer - } - - a { - display: block; - height: 100%; - } - - } - - - &.shrinked-nav { - - .cm-menu__list__item { - display: none - } - - &~ .hidden-nav { - display: block - } - } - } - - // Hidden nav if more than 5 items - .hidden-nav { - display: none; - width: 180px; - position: relative; - } - - - .github-icon { - height: 22px; - line-height: $nav-height; - - svg { - max-height: 100%; - vertical-align: middle; - - use { - fill: #fff - } - } - } - - @include component('menu', 'search') { - width: auto; - padding: 0 16px; - height: $nav-height; - float: left; - - &--holder { - float: left; - position: relative; - width: 32px; - height: $nav-height; - } - - @include component('search', 'input') { - position: relative; - width: auto; - overflow: visible; - transition: width 0.28s ease; - - button { - appearance: none; - border: none; - background: transparent; - position: absolute; - z-index: 3; - top: 0; - bottom: 0; - margin: auto; - outline: none; - display: none; - width: 16px; - height: 16px; - transition: transform 0.28s ease; - - - &#search, - &#search-mobile { - display: block; - left: 8px; - - svg { - pointer-events: none; - max-width: 16px; - max-height: $nav-height; - display: inline-block; - vertical-align: middle; - z-index: 1; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - margin: auto; - transition: opacity 0.28s ease 0.15s; - pointer-events: all; - margin: auto; - use { - fill: #fff - } - } - } - - &#cancel, - &#cancel-mobile { - - svg { - max-width: 16px; - display: inline-block; - vertical-align: middle; - max-height: $nav-height; - z-index: 1; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - margin: auto; - transition: opacity 0.28s ease 0.15s; - pointer-events: all; - opacity: 0; - right: 16px; - - use { - fill: #fff - } - } - - &:active svg { - transform: scale(0.9) - } - } - } - - // DOCSEARCH RELATED - .algolia-autocomplete { - position: inherit !important; - display: initial !important; - } - - input[type=search] { - padding: 0; - margin: 0; - appearance: none; - background: transparent; - width: 32px; - height: 32px; - border: 1px solid; - border: none; - position: relative; - left: 0; - z-index: 1; - cursor: pointer; - transition: background 0.28s ease, transform 0.28s ease, border-radius 0.28s ease, width 0.28s ease; - color: transparent; - padding: 8px; - @include placeholder { - color: transparent; - } - - &#searchbox { - vertical-align: middle !important - - } - } - - &.open { - width: 300px; - - // DOCSEARCH RELATED - .algolia-autocomplete input { - background: #2e3f4f; - width: 100%; - border-radius: 3px; - transform: translateX(calc(-300px + 1.5em)); - outline: none; - padding-left: 2.1em; - cursor: auto; - color: #fff; - @include placeholder { - color: rgba(#ffffff, 0.3); - } - } - - button#search { - transform: translateX(calc(-300px + 1.6em)); - } - button#cancel { - display: block; - svg { - opacity: 0.8; - - &:hover { - transform: scale(1.1); - opacity: 1; - } - } - } - - - @media (max-width: 1200px) { - width: 200px; - - .algolia-autocomplete input { - transform: translateX(calc(-200px + 1.5em)); - } - - button#search { - transform: translateX(calc(-200px + 1.6em)); - } - - } - } - } - } - - @media (max-width: 768px) { - width: 100%; - height: calc(100vh - #{$nav-height}); - background: #fff; - float: left; - transition: transform 0.18s ease; - will-change: transform; - perspective: 2000px; - - &:not(.mobile-navigation-wrapper) { - @media (max-width: 768px) { - display: none; - } - } - - .cm-menu__list { - width: 100%; - - &__item { - width: 100%; - border-bottom: 1px solid rgba(#1D3657, 0.10); - - &:first-child { - border-top: 1px solid rgba(#1D3657, 0.10); - } - } - - a { - color: #1D2F40; - font-weight: bold; - padding: 0 1em; - float: left; - display: block; - width: 100%; - height: 100%; - - &:hover { - background: darken(#f6f9fc, 5%) - } - } - - figure { - svg, - img { - display: none; - } - - figcaption { - text-indent: 0; - display: inline-block; - position: relative; - - } - } - } - - &:not(.opened) { - transform: translateX(100%) rotateY(10deg) skewY(10deg); - } - } - } - - .mobile-navigation-wrapper { - position: absolute; - z-index: 998; - top: $nav-height; - left: 0; - width: 100%; - height: 100vh; - transform-origin: 50% -100%; - background-color: #f6f9fc; - - &:not(.opened) { - transform: translateX(-100%); - } - - #mobile-searchbox, - .cm-menu__search, - .cm-menu__search--holder { - width: 100%; - } - - #mobile-searchbox { - display: block; - height: 60px; - } - - .cm-menu__search { - padding: 0; - } - - .cm-menu__search--holder { - background-color: #edf0f4; - } - &.cm-navigation__menu .cm-menu__search .cm-search__input button#search-mobile { - left: 1em; - } - &.cm-navigation__menu .cm-menu__search .cm-search__input button#cancel-mobile { - right: 1em; - opacity: 1; - display: block; - - svg { - opacity: 1; - } - } - - &.cm-navigation__menu .cm-menu__search .cm-search__input button#search-mobile svg use, - &.cm-navigation__menu .cm-menu__search .cm-search__input button#cancel-mobile svg use { - fill: #2f404f !important - } - &.cm-navigation__menu .cm-menu__search .cm-search__input input { - color: #2f404f; - padding-left: 2.5em; - } - - - .algolia-autocomplete { - width: 100%; - height: 60px; - position: relative !important; - - &.algolia-autocomplete-right .ds-dropdown-menu { - right: 0 !important!important; - left: 0 !important; - top: 0 !important; - min-width: 100% !important; - width: 100vw !important; - position: absolute; - } - } - } -} - - - -/** - * - */ -[data-inject-community] { - display: flex; - flex-wrap: wrap; - align-items: center; -} - -/** - * Interactions -*/ - -.cm-badge { - svg { - transition: transform 0.3s ease; - display: inline-block; - position: relative; - } - .cm-navigation__brands--community:hover &{ - svg { - transform: scale(1.3) rotate(-6deg) - } - } -} - -/** - * Animatitons - */ - - - -/** - * a11y -*/ - -figure { - figcaption { - position: absolute; - text-indent: -99999px; - top: 0; - } -} - - - -@keyframes slidebg{ - 0%, 40% { - background-size: 0 100%; - } - 100% { - background-size: 100% 100%; - } -} diff --git a/docgen/src/stylesheets/components/_hero.scss b/docgen/src/stylesheets/components/_hero.scss deleted file mode 100644 index 7836f0cb06..0000000000 --- a/docgen/src/stylesheets/components/_hero.scss +++ /dev/null @@ -1,331 +0,0 @@ -.tagline a { - color: $denim-blue; -} - -// Start the hero -$css: ".st0{ fill:none; stroke:%23FFF; stroke-miterlimit:10;}"; - -.hero-section { - background: url('../images/react-atom.svg'), linear-gradient(to bottom right, #322f4c, #1c1b2f); - background-repeat: no-repeat, repeat; - background-position: top center, top left; - background-size: 800px, 100%; - color: $hero-color-accent; - padding-top: $nav-height*1.5; - overflow: hidden; - position: relative; - z-index: 5; - height: 500px; - margin-top: $nav-height; - text-align: center; - - - - &:after { - content: ''; - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - z-index: -1; - - background: { - image: url("data:image/svg+xml;utf8, "); - position: center center; - size: 60px; - // blend-mode: overlay; - } - opacity: 0.05; - } - - - .container, - .hero-container { - position: relative; - z-index: 5; - } - - .relative { - margin-top: 4em; - float: left; - width: 100%; - display: none; - - body.index &{ - display: block; - } - - } - - - .btn.btn-fat-uc { - max-width: 230px; - margin-top: 2.25em; - - &:hover { - font-size: 16px - } - } - - - - .article-title { - width: 70%; - text-shadow: 1px 1px 3px rgba(0,0,0,0.3); - - a { - text-shadow: 1px 1px 3px rgba(255,255,255,0.2) - } - - .algolia-website-logo-link { - width: 20px; - display: inline-block; - position: relative; - z-index: 9; - } - - figure { - margin-top: 1em; - position: relative; - - img { - max-width: 500px; - margin: 0.5em 0; - } - } - - - - h2 { - font-weight: 300; - } - - &.doc-only { - width: 100%; - } - } - - h1.project-title { - position: relative; - top: -10px; - font-size: 14px !important; - font-weight: 800; - text-transform: uppercase; - } - - h2 { - font-size: 42px; - font-weight: 300; - } - - .icon { - width: 20px; - height: 20px; - display: block; - position: relative; - - &:after { - position: absolute; - display: block; - content: ''; - width: 16px; - height: 2px; - background: $hero-color-accent; - top: 30px; - left: 0; - right: 0; - margin: auto; - opacity: 0.5; - } - } - - - - @include small-mq { - text-align: center; - padding-top: 16px; - position: relative; - max-width: 100%; - background-position: center center, center center; - background-size: 500px, 100%; - - .hero-container { - top: 70px; - } - - .fl-left { - width: 100%; - margin-top: $nav-height * 1.5; - padding-left: 2em; - max-width: 500px; - float: none; - - - body.documentation &{ - margin-top: 0; - } - } - - .fl-left.project-logo { - display: none; - } - - .fl-right { - display: none; - } - - .small-illustration { - max-width: 30%; - display: block; - margin: auto; - - img { - width: 100%; - } - } - - h1.project-title { - font-size: 28px; - } - - .btn { - max-width: 100%; - } - - #json-response-text { - text-align: left; - } - } - - - &.shrink { - min-height: 314px; - } - - .fl-right svg { - max-width: 260px; - position: relative; - top: -20px; - - path, - ellipse { - transform: translateY(12px); - } - } - - body.documentation &{ - min-height: 150px; - height: 150px; - line-height: 150px; - padding: 0; - background-size: 250px, 100%; - background-position: center right 10vw, center center; - text-align: left; - - .doc-only { - display: block; - - figure { - line-height: 150px; - - img { - max-width: 46px; - margin-right: 16px; - vertical-align: middle; - } - - figcaption { - position: relative; - vertical-align: middle; - text-indent: inherit; - top: inherit; - color: #fff; - display: inline-block; - - @include small-mq { - width: calc(100% - 90px); - - h1 { - font-size: 28px; - line-height: 1.2; - } - } - } - } - } - - .btn { - display: none; - - } - - .fl-left { - height: 150px; - line-height: 150px; - padding-top: 0 !important; - } - - figure { - margin-top: 0; - height: 150px; - } - - h1.project-title { - font-size: 2.6em !important; - font-weight: 600; - text-transform: none; - } - - .tagline { - display: none; - } - - - &:before { - z-index: -1; - transform: translateZ(0); - } - - .container, - .relative { - margin-top: 0; - } - - .fl-right, - .fl-left { - padding-top: 2.5em; - } - - .project-logo svg{ - max-width: 20% !important; - top: 0px - } - - .article-title h1.project-title { - padding-top: 0.25em; - } - } -} - -@keyframes fill { - 0% { - fill-opacity: 0; - } - - 100% { - fill-opacity: 1; - } -} - - - -@keyframes swan-dash { - 100% { - stroke-dashoffset: 0; - } -} - -.documentation .hero-container { - top: 0; -} diff --git a/docgen/src/stylesheets/components/_home.scss b/docgen/src/stylesheets/components/_home.scss deleted file mode 100755 index 3744c41eee..0000000000 --- a/docgen/src/stylesheets/components/_home.scss +++ /dev/null @@ -1,18 +0,0 @@ -body { - font-family: $font-settings; -} - -.container { - width: 100%; - height: 100%; - margin: $nav-height auto; -} - - -.welcome { - padding: 2em 0; - text-align: center; - border: 1px solid rgba(black, 0.1); - max-width: $max-container-width; - margin: 6em auto 0 -} diff --git a/docgen/src/stylesheets/components/_icons.scss b/docgen/src/stylesheets/components/_icons.scss deleted file mode 100644 index 69037974e8..0000000000 --- a/docgen/src/stylesheets/components/_icons.scss +++ /dev/null @@ -1,44 +0,0 @@ -.icon { - text-indent: -99999px; - color: transparent; - transition: background 0.2s ease; - - &-love { - background: url($icon-heart)no-repeat center center / contain - } - - &-love-dark { - background: url($icon-heart-dark)no-repeat center center / contain - } - - &-algolia { - background: url($icon-algolia-dark)no-repeat center center / contain - } - - &-algolia-light { - background: url($icon-algolia-light)no-repeat center bottom / contain; - } - - &-mail { - background: url($icon-mail)no-repeat 8px 7px / 70% - } - - &-algolia-small { - background: url($icon-algolia-small)no-repeat center center / contain - } - &-algolia-small_white { - background: url($icon-algolia-small_white)no-repeat center center / contain - } -} - -// Small css shape -.ico-triangle { - width: 0; - height: 0; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-left: 5px solid $steel; - position: relative; - display: inline-block; - margin-left: 8px; -} \ No newline at end of file diff --git a/docgen/src/stylesheets/components/_inputs.scss b/docgen/src/stylesheets/components/_inputs.scss deleted file mode 100644 index ee4b1046ce..0000000000 --- a/docgen/src/stylesheets/components/_inputs.scss +++ /dev/null @@ -1,64 +0,0 @@ -input { - outline: none; - border-radius: 4px; - - @include appearance(none !important); - &::-webkit-search-decoration, - &::-webkit-search-cancel-button, - &::-webkit-search-results-button, - &::-webkit-search-results-decoration { - display: none !important; - } -} - - -// Style the input for the Demo page -.hero-section { - - .algolia-places { - top: 50px; - font-family: 'Open Sans', helvetica Neue; - - &:before { - content:'Try it!'; - position: absolute; - top: -44px; - left: 2px; - width: 100px; - height: 44px; - text-align: right; - font-style: italic; - font-weight: 600; - line-height: 44px; - color: $powder-blue; - background: { - image: url($icon-arrow); - repeat: no-repeat; - position: bottom 12px left 24px; - size: 24px; - } - } - - .hero-searchbar { - border: solid 1px rgba(255, 255, 255, 0.5); - box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1); - color: #8f94ad; - font-family: "Raleway", Helvetica Neue, helvetica; - height: 56px; - padding-left: 16px; - padding-right: 48px; - border-radius: 4px; - - @include appearance(none) - } - - .ap-suggestion { - color: #262626; - text-align: left; - } - - .ap-footer { - color: #797979; - } - } -} diff --git a/docgen/src/stylesheets/components/_sidebar.scss b/docgen/src/stylesheets/components/_sidebar.scss deleted file mode 100644 index 4f53b637ec..0000000000 --- a/docgen/src/stylesheets/components/_sidebar.scss +++ /dev/null @@ -1,157 +0,0 @@ -nav.sidebar { - float: left; - width: 100%; - height: 100%; - position: absolute; - max-width: $sidebar-width; - border-right: 1px solid #d8d8d8; - overflow: hidden; - padding-top: 60px; - user-select: none; - - .sidebar-container { - width: 100%; - max-width: $sidebar-width; - user-select: all; - - &.fixed { - position: fixed; - top: ($nav-height); - z-index: 9; - .sidebar-elements{ - overflow: auto; - } - } - - h2.sidebar-header { - font-weight: normal; - font-size: 1.8em; - line-height: 1.5em; - padding-bottom: 5px; - } - - ul { - list-style: none; - padding: 0; - } - - .sidebar-elements { - .sidebar-element { - width: 100%; - line-height: 32px; - margin-bottom: .5em; - - &.level-h2 {} - &.level-h3 { - line-height: 24px; - font-size: 12px; - padding-left: 12px; - font-family: "Open sans"; - } - - a { - text-decoration: none; - display: block; - width: 100%; - color: $charcoal-grey-75; - font-weight: 400; - padding: 0 0.15em; - line-height: 1.5; - transition: color 0.2s ease, box-shadow 0.2s ease, font-weight 0.2s ease; - font-size: 14px; - - &:focus, - &:target { - @extend %active-links; - } - &.active{ - transition: color 0.2s ease, box-shadow 0.2s ease; - @extend %active-links; - } - &.navItem-active{ - @extend %active-links; - } - } - - &.guide { - a.navItem-active { - box-shadow: none; - } - } - } - } - } - - - - @include small-mq { - width: calc(100% + 16px); - max-width: 320px; - position: fixed; - left: 0; - top: 16px; - border: none; - padding-top: 0; - background: #fefefe; - z-index: 9; - display: block; - top: 0; - padding: 1em; - box-shadow: -20px 0 100px rgba(0,0,0,0.25); - - transform: translateX(-100%); - will-change: transform; - transition: transform 0.3s ease; - - .sidebar-header { - max-width: calc(100% - 1em); - } - - &.Showed { - transform: translateX(0); - } - - .sidebar-container { - width: 100%; - max-width: 100%; - } - } -} - - -.sidebar-opener { - position: fixed; - left: 2em; - bottom: 2em; - height: 52px; - width: 52px; - background: #39b1de; - background-image: url(../images/open-doc-menu_icon.svg), linear-gradient(to right, #8f64f3 0%, #39b1de 90%); - background-repeat: no-repeat; - background-position: 65% center, center center; - background-size: 60%, 100%; - z-index: 1000; - border-radius: 50%; - box-shadow: 0 6px 8px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2); - transition: transform 0.2s ease, left 0.2s ease; - transform-origin: center center; - cursor: pointer; - display: none; - pointer-events: all; - - - @include small-mq { - display: block; - } - - &:active { - transform: scale(0.9) - } - - &.Showed { - transform: rotate(-180deg); - transform-origin: center center; - background-image: url(../images/open-doc-menu_icon.svg), linear-gradient(to left, #8f64f3 0%, #39b1de 90%); - left: 340px; - } -} diff --git a/docgen/src/stylesheets/components/_tweets.scss b/docgen/src/stylesheets/components/_tweets.scss deleted file mode 100644 index 1287d4ba3c..0000000000 --- a/docgen/src/stylesheets/components/_tweets.scss +++ /dev/null @@ -1,105 +0,0 @@ -.press__tweets { - position: relative; - width: 100%; - display: block; - overflow: visible; - white-space: nowrap; - padding: 0; - -webkit-transition: opacity 0.3s linear, -webkit-transform 0.5s ease; - transition: opacity 0.3s linear, -webkit-transform 0.5s ease; - transition: opacity 0.3s linear, transform 0.5s ease; - transition: opacity 0.3s linear, transform 0.5s ease, -webkit-transform 0.5s ease; -} -.press__tweets::-webkit-scrollbar { - width: 0px !important -} -.press__tweets--loading { - opacity: 0 -} - -body.safari ul.press__tweets{ - display: flex; -} - -.press__tweet { - border-radius: 4px; - display: inline-block; - opacity: .5; - vertical-align: middle; - -webkit-transform: scale(0.7); - transform: scale(0.7); - -webkit-transition: -webkit-transform 0.5s ease; - transition: -webkit-transform 0.5s ease; - transition: transform 0.5s ease; - transition: transform 0.5s ease, -webkit-transform 0.5s ease; - - body.safari &{ - min-width: 420px; - } -} -.press__tweet:last-child { - margin-right: 0 -} -.press__tweet--current { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - position: relative -} -.press__tweet__arrow { - position: absolute; - top: calc(50% - 14px); - cursor: pointer; - display: block; - height: 28px; - width: 48px; - display: none; - text-align: center; - -} -.press__tweet--current .press__tweet__arrow { - display: block -} -.press__tweet__arrow svg:hover { - cursor: pointer -} -.press__tweet__arrow svg:hover path { - stroke: #575757 -} -.press__tweet__arrow svg path { - -webkit-transition: stroke 0.12s ease-in; - transition: stroke 0.12s ease-in -} -.press__tweet__arrow--prev { - left: -47px; - -webkit-transform: scaleX(-1); - transform: scaleX(-1) -} -.press__tweet:first-child .press__tweet__arrow--prev { - display: none -} -.press__tweet__arrow--next { - right: -47px -} -.press__tweet:last-child .press__tweet__arrow--next { - display: none -} - -@media (max-width: $bp-small) { - .press__tweet--current { - max-width: 100%; - } - .press__tweet--current .press__tweet__arrow--prev, - .press__tweet--current .press__tweet__arrow--next { - width: 20% !important; - left: -25% !important; - } - .press__tweet--current .press__tweet__arrow--next { - left: 52% !important; - } - .twitter-tweet { - min-width: inherit !important; - width: 60% !important; - transform: translateX(-10%) rotate(0) !important; - } -} \ No newline at end of file diff --git a/docgen/src/stylesheets/components/docs/_method.scss b/docgen/src/stylesheets/components/docs/_method.scss deleted file mode 100644 index a095616575..0000000000 --- a/docgen/src/stylesheets/components/docs/_method.scss +++ /dev/null @@ -1,200 +0,0 @@ -.badge { - font-size: 14px; - line-height: 18px; - padding: 2px 4px; - border-radius: 5px; - display: inline; - margin-top: 0.5em; - - &.badge-event { background: $powder-blue; } - &.badge-chainable { background: $brand-primary; color: white; } -} - -.method, .property, .typedef, .event{ - margin: 10px 0; - width: 100%; - font-size: 16px; - line-height: 22px; - border: 1px solid $border; - border-radius: 5px; - - - > * { - padding: 0.5em; - } - - .api-entry { - text-decoration: none; - color: black; - font-weight: 500; - &:hover { - color: $accent-color; - } - &:focus { - outline: none; - } - } - - .summary { - border-bottom: 1px solid $pale-grey; - font-size: 1.3em; - .name { - margin-bottom: 5px; - .param { - &:after { - content:', '; - } - &:last-child:after { - content: initial; - } - &.optional:before { - content: '[' - } - &.optional:after { - content:'], '; - } - &.optional:last-child:after { - content:']'; - } - } - } - } - - .description { - } - - .parameters { - list-style-type: none; - margin: 0; - display: table; - width: 100%; - - &:before { - content: 'Parameters'; - font-size: 1.2em; - } - - .parameter{ - display: table-row; - width: 100%; - margin-top: 3px; - - .param, .type, .description { - display: table-cell; - } - - .param { - width: 20%; - font-family: $font-code; - } - - .type { - width: 15%; - padding-left: 3px; - } - - .description { - padding-left: 3px; - width: 65%; - } - } - } - - .type-properties { - list-style-type: none; - margin: 0; - display: table; - width: 100%; - - &:before { - content: 'Properties'; - font-size: 1.2em; - } - - .type-property { - display: table-row; - width: 100%; - margin-top: 3px; - - .param, .type, .description { - display: table-cell; - } - - .param { - width: 20%; - font-family: $font-code; - } - - .type { - width: 15%; - padding-left: 3px; - } - - .description { - padding-left: 3px; - width: 65%; - } - } - } - - .type{ - font-family: $font-code; - font-size: 0.9em; - - span:after { - content: ' | '; - } - - span:last-child:after { - content: initial; - } - } - - .returns { - display: table; - width: 100%; - - &:before { - content: 'Returns'; - font-size: 1.2em; - display: block; - } - - .return { - display: table-row; - width: 100%; - - .type, .description { - display: table-cell; - } - - .type { - width: 35%; - span:after { - content: ' or '; - } - span:last-child:after { - content: initial; - } - } - - .description { - font-family: $font-settings; - width: 65%; - padding-left: 3px; - } - } - } - - .examples { - &:before { - content: 'Examples'; - font-size: 1.2em; - } - } -} - -.signature .type { - font-family: $font-settings; - font-size: 1em; -} diff --git a/docgen/src/stylesheets/header.scss b/docgen/src/stylesheets/header.scss deleted file mode 100644 index e037dffea9..0000000000 --- a/docgen/src/stylesheets/header.scss +++ /dev/null @@ -1,14 +0,0 @@ -@charset 'utf-8'; - -@import 'vendors/normalize', - 'vendors/variables', - 'vendors/functions', - 'vendors/mixins', - 'vendors/base', - 'vendors/helpers', - 'vendors/family', - 'vendors/animations', - 'vendors/docsearch'; - -@import 'components/header', - 'components/dropdown'; diff --git a/docgen/src/stylesheets/index.scss b/docgen/src/stylesheets/index.scss deleted file mode 100755 index cd0fe969c8..0000000000 --- a/docgen/src/stylesheets/index.scss +++ /dev/null @@ -1,28 +0,0 @@ -@charset 'utf-8'; - -@import 'vendors/normalize', - 'vendors/variables', - 'vendors/functions', - 'vendors/mixins', - 'vendors/base', - 'vendors/helpers', - 'vendors/family', - 'vendors/animations', - 'vendors/docsearch'; - -@import 'components/code-sample', - 'components/footer', - 'components/icons', - 'components/containers', - 'components/code-snippet', - 'components/buttons', - 'components/inputs', - 'components/fonts', - 'components/sidebar', - 'components/documentation', - 'components/examples-intro', - 'components/examples', - 'components/hero', - 'components/header', - 'components/dropdown', - 'components/tweets'; diff --git a/docgen/src/stylesheets/vendors/_animations.scss b/docgen/src/stylesheets/vendors/_animations.scss deleted file mode 100644 index b19072634a..0000000000 --- a/docgen/src/stylesheets/vendors/_animations.scss +++ /dev/null @@ -1,125 +0,0 @@ -// Hero Illustration -$timingFunction: 3s ease infinite; - -@mixin anim($name, $p1, $p2, $p3) { - @keyframes #{$name}{ - 0%, 20%, 80%, 100% { - transform: #{$p1}; - } - 10%, 40%, 50% { - transform: #{$p2}; - } - 60% { - transform: #{$p3}; - } - } -} -@mixin animEllipse($name, $p1, $p2, $p3) { - @keyframes #{$name}{ - 0%, 20%, 80%, 100% { - transform: #{$p1}; - } - 10%, 40%, 50% { - transform: #{$p2}; - opacity: 0.6; - } - 60% { - transform: #{$p3}; - opacity: 0.6; - } - } -} - -.project-logo > #pin { - animation: bounce $timingFunction; -} -ellipse { - transform-origin: center center; - -moz-transform-origin: 50% 40%; - animation: bounceShadow $timingFunction; - -moz-animation: mozBounceShadow $timingFunction; - -} -// Fix svg in FF -#plan-holder { - -moz-transform: translateY(10px); -} -#plan { - -moz-transform: scale(1.1); -} - -@include anim('bounce', 'translateY(0)', 'translateY(-5px)', 'translateY(-5px)'); -@include animEllipse('bounceShadow', 'scale(1) translateY(12px)', 'scale(0.75) translateY(12px) ', 'scale(0.75) translateY(12px) '); -@include animEllipse('mozBounceShadow', 'scale(1) translateY(16px)', 'scale(0.75) translateY(16px) translateX(-8px) ', 'scale(0.75) translateY(16px) translateX(-8px) '); - -// Footer heartbeat -@keyframes pulse{ - 0% { - box-shadow: 0 0 0 0 rgba($red-pink, 0.4); - } - 70% { - - box-shadow: 0 0 0 30px rgba($red-pink , 0); - } - 100% { - - box-shadow: 0 0 0 0 rgba($red-pink, 0); - } -} - -@keyframes pulseHeart{ - 0% { - transform: scale(1.3) - } - 70% { - - transform: scale(1.15) - } - 100% { - - transform: scale(1) - } -} - -.icon-love-dark { - display: block; - position: relative; - - &:before { - content: ''; - display: block; - width: 8px; - height: 8px; - position: absolute; - top: 45%; - bottom: 0; - left: 50%; - transform: translate(-50%,-50%); - right: 0; - z-index: -1; - border-radius: 100%; - } -} - -.inner-bloc:hover .icon-love-dark{ - animation: pulseHeart 1s ease infinite; - - &:before { - animation: pulse 1s ease infinite !important; - } -} - - -// part of animate.css -@keyframes fadeInDown { - 0% { - opacity: 0; - transform: translate3d(0, -100%, 0); - } - - 100% { - opacity: 1; - transform: none; - } -} - diff --git a/docgen/src/stylesheets/vendors/_base.scss b/docgen/src/stylesheets/vendors/_base.scss deleted file mode 100755 index e17f9d1e92..0000000000 --- a/docgen/src/stylesheets/vendors/_base.scss +++ /dev/null @@ -1,27 +0,0 @@ -@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,600,700|Open+Sans:400,600,700); - -* { - box-sizing: border-box; - - @include isRetina{ - @include better-fonts(); - } -} - -:root { - font-size: 14px; - font-family: "Open Sans", Helvetica Neue, helvetica; -} - -hr { - margin: 0; -} - -figure { - padding: 0; - margin: 0; - figcaption { - text-indent: -9999px; - color: transparent; - } -} \ No newline at end of file diff --git a/docgen/src/stylesheets/vendors/_docsearch.scss b/docgen/src/stylesheets/vendors/_docsearch.scss deleted file mode 100644 index ceafece043..0000000000 --- a/docgen/src/stylesheets/vendors/_docsearch.scss +++ /dev/null @@ -1,474 +0,0 @@ -.searchbox { - display: inline-block; - position: relative; - width: 200px; - height: 33px !important; - white-space: nowrap; - box-sizing: border-box; - visibility: visible !important; -} - -.searchbox .algolia-autocomplete { - display: block; - width: 100%; - height: 100%; -} - -.searchbox__wrapper { - width: 100%; - height: 100%; - z-index: 999; - position: relative; -} - -.searchbox__input { - display: inline-block; - box-sizing: border-box; - transition: box-shadow .4s ease, background .4s ease; - border: 0; - border-radius: 17px; - box-shadow: inset 0 0 0 1px #CCCCCC; - background: #FFFFFF !important; - padding: 0; - padding-right: 27px; - padding-left: 33px; - width: 100%; - height: 100%; - vertical-align: middle; - white-space: normal; - font-size: 12px; - appearance: none; -} - -.searchbox__input::-webkit-search-decoration, .searchbox__input::-webkit-search-cancel-button, .searchbox__input::-webkit-search-results-button, .searchbox__input::-webkit-search-results-decoration { - display: none; -} - -.searchbox__input:hover { - box-shadow: inset 0 0 0 1px #b3b3b3; -} - -.searchbox__input:focus, .searchbox__input:active { - outline: 0; - box-shadow: inset 0 0 0 1px #AAAAAA; - background: #FFFFFF; -} - -.searchbox__input::placeholder { - color: #AAAAAA; -} - -.searchbox__submit { - position: absolute; - top: 0; - margin: 0; - border: 0; - border-radius: 16px 0 0 16px; - background-color: rgba(69, 142, 225, 0); - padding: 0; - width: 33px; - height: 100%; - vertical-align: middle; - text-align: center; - font-size: inherit; - user-select: none; - right: inherit; - left: 0; -} - -.searchbox__submit::before { - display: inline-block; - margin-right: -4px; - height: 100%; - vertical-align: middle; - content: ''; -} - -.searchbox__submit:hover, .searchbox__submit:active { - cursor: pointer; -} - -.searchbox__submit:focus { - outline: 0; -} - -.searchbox__submit svg { - width: 15px; - height: 15px; - vertical-align: middle; - fill: #6D7E96; -} - -.searchbox__reset { - display: block; - position: absolute; - top: 8px; - right: 8px; - margin: 0; - border: 0; - background: none; - cursor: pointer; - padding: 0; - font-size: inherit; - user-select: none; - fill: rgba(0, 0, 0, 0.5); -} - -.searchbox__reset.hide { - display: none; -} - -.searchbox__reset:focus { - outline: 0; -} - -.searchbox__reset svg { - display: block; - margin: 4px; - width: 9px; - height: 9px; -} - -.searchbox__input:valid ~ .searchbox__reset { - display: block; - animation-name: sbx-reset-in; - animation-duration: .15s; -} - -@keyframes sbx-reset-in { - 0% { - transform: translate3d(-20%, 0, 0); - opacity: 0; - } - - 100% { - transform: none; - opacity: 1; - } } - - .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu { - right: 0 !important; - left: inherit !important; - } - - .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu:before { - right: 48px; - } - - .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu { - left: 0 !important; - right: inherit !important; - } - - .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu:before { - left: 48px; - } - - .algolia-autocomplete .ds-dropdown-menu { - position: relative; - top: -6px; - border-radius: 3px; - margin: 6px 0 0; - padding: 0; - text-align: left; - height: auto; - position: relative; - background: transparent; - border: none; - z-index: 999; - max-width: 800px; - min-width: 600px; - box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); - } - - .algolia-autocomplete .ds-dropdown-menu:before { - display: block; - position: absolute; - content: ''; - width: 14px; - height: 14px; - background: #FFFFFF; - z-index: 1000; - top: -7px; - border-top: 1px solid #CCCCCC; - border-right: 1px solid #CCCCCC; - transform: rotate(-45deg); - border-radius: 2px; - } - - .algolia-autocomplete .ds-dropdown-menu .ds-suggestions { - position: relative; - z-index: 1000; - margin-top: 8px; - } - - .algolia-autocomplete .ds-dropdown-menu .ds-suggestion { - cursor: pointer; - } - - .algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion.suggestion-layout-simple { - background-color: rgba(57, 177, 222, 0.05); - } - - .algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content { - background-color: rgba(57, 177, 222, 0.05); - } - - .algolia-autocomplete .ds-dropdown-menu [class^="ds-dataset-"] { - position: relative; - border: solid 1px #CCCCCC; - background: #FFFFFF; - border-radius: 3px; - overflow: auto; - padding: 0 8px 8px; - } - - .algolia-autocomplete .ds-dropdown-menu * { - box-sizing: border-box; - } - - .algolia-autocomplete .algolia-docsearch-suggestion { - position: relative; - padding: 0 8px; - background: #FFFFFF; - color: #373E40; - overflow: hidden; - } - - .algolia-autocomplete .algolia-docsearch-suggestion--highlight { - color: #156380; - background: rgba(136, 208, 235, 0.4); - padding: 0.1em 0.05em; - } - - .algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--highlight, - .algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl1 .algolia-docsearch-suggestion--highlight { - color: inherit; - background: inherit; - } - - .algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight { - padding: 0 0 1px; - background: inherit; - box-shadow: inset 0 -2px 0 0 rgba(57, 177, 222, 0.8); - color: inherit; - } - - .algolia-autocomplete .algolia-docsearch-suggestion--content { - display: block; - float: right; - width: 66%; - position: relative; - padding: 5.33333px 0 5.33333px 10.66667px; - cursor: pointer; - } - - .algolia-autocomplete .algolia-docsearch-suggestion--content:before { - content: ''; - position: absolute; - display: block; - top: 0; - height: 100%; - width: 1px; - background: #ddd; - left: -1px; - } - - .algolia-autocomplete .algolia-docsearch-suggestion--category-header { - position: relative; - border-bottom: 1px solid #ddd; - display: none; - margin-top: 8px; - padding: 4px 0; - font-size: 1em; - color: #43494B; - } - - .algolia-autocomplete .algolia-docsearch-suggestion--wrapper { - width: 100%; - float: left; - padding: 8px 0 0 0; - } - - .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column { - float: left; - width: 34%; - display: none; - padding-left: 0; - text-align: left; - position: relative; - padding: 5.33333px 10.66667px; - padding-left: 0; - color: #39B1DE; - font-size: 0.9em; - word-wrap: break-word; - } - - .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:before { - content: ''; - position: absolute; - display: block; - top: 0; - height: 100%; - width: 1px; - background: #ddd; - right: 0; - } - - .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column .algolia-docsearch-suggestion--highlight { - background-color: inherit; - color: inherit; - } - - .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-inline { - display: none; - } - - .algolia-autocomplete .algolia-docsearch-suggestion--title { - margin-bottom: 4px; - color: #373E40; - font-size: 0.9em; - font-weight: bold; - } - - .algolia-autocomplete .algolia-docsearch-suggestion--text { - display: block; - line-height: 1.2em; - font-size: 0.85em; - color: #737373; - } - - .algolia-autocomplete .algolia-docsearch-suggestion--no-results { - width: 100%; - padding: 8px 0; - text-align: center; - font-size: 1.2em; - } - - .algolia-autocomplete .algolia-docsearch-suggestion--no-results::before { - display: none; - } - - .algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--category-header { - display: block; - } - - .algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__secondary .algolia-docsearch-suggestion--subcategory-column { - display: block; - } - - .algolia-autocomplete .suggestion-layout-simple.algolia-docsearch-suggestion { - border-bottom: solid 1px #eee; - padding: 8px; - margin: 0; - } - - .algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--content { - width: 100%; - padding: 0; - } - - .algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--content::before { - display: none; - } - - .algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header { - margin: 0; - padding: 0; - display: block; - width: 100%; - border: none; - } - - .algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header-lvl0 { - opacity: .6; - font-size: 0.85em; - } - - .algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header-lvl1 { - opacity: .6; - font-size: 0.85em; - } - - .algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header-lvl1::before { - background-image: url('data:image/svg+xml;utf8,'); - content: ''; - width: 10px; - height: 10px; - display: inline-block; - } - - .algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--wrapper { - width: 100%; - float: left; - margin: 0; - padding: 0; - } - - .algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--subcategory-column, .algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--duplicate-content, .algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--subcategory-inline { - display: none !important; - } - - .algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--title { - margin: 0; - color: #39B1DE; - font-size: 0.9em; - font-weight: normal; - } - - .algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--title::before { - content: "#"; - font-weight: bold; - color: #39B1DE; - display: inline-block; - } - - .algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--text { - margin: 4px 0 0; - display: block; - line-height: 1.4em; - padding: 5.33333px 8px; - background: #f8f8f8; - font-size: 0.85em; - opacity: .8; - } - - .algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight { - color: #4d4d4d; - font-weight: bold; - box-shadow: none; - } - - .algolia-autocomplete .algolia-docsearch-footer { - width: 130px; - height: 18px; - z-index: 2000; - margin-top: 10.66667px; - float: right; - font-size: 0; - line-height: 0; - } - - .algolia-autocomplete .algolia-docsearch-footer--logo { - background-image: url("data:image/svg+xml;utf8,"); - background-repeat: no-repeat; - background-position: center; - background-size: 100%; - overflow: hidden; - text-indent: -9000px; - padding: 0 !important; - width: 100%; - height: 100%; - display: block; - } - - - - .cm-navigation .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu { - right: 0!important; - left: -436px!important; - top: 40px !important; - min-width: 420px !important; - width: 420px !important; - line-height: 1.2 !important; - } diff --git a/docgen/src/stylesheets/vendors/_family.scss b/docgen/src/stylesheets/vendors/_family.scss deleted file mode 100644 index f5f65d6531..0000000000 --- a/docgen/src/stylesheets/vendors/_family.scss +++ /dev/null @@ -1,322 +0,0 @@ -/// Select all children from the first to `$num`. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -/// @param {number} $num - id of the child -@mixin first($num) { - @if $num == 1 { - &:first-child { - @content; - } - } @else { - &:nth-child(-n + #{$num}) { - @content; - } - } -} - -/// Select all children from the last to `$num`. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -/// @param {number} $num - id of the child -@mixin last($num) { - &:nth-last-child(-n + #{$num}) { - @content; - } -} - -/// Select all children after the first to `$num`. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -/// @param {number} $num - id of the child -@mixin after-first($num) { - &:nth-child(n + #{$num + 1}) { - @content; - } -} - -/// Select all children before `$num` from the last. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -/// @param {number} $num - id of the child -@mixin from-end($num) { - &:nth-last-child(#{$num}) { - @content; - } -} - -/// Select all children between `$first` and `$last`. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -@mixin between($first, $last) { - &:nth-child(n + #{$first}):nth-child(-n + #{$last}) { - @content; - } -} - -/// Select all even children between `$first` and `$last`. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -@mixin even-between($first, $last) { - &:nth-child(even):nth-child(n + #{$first}):nth-child(-n + #{$last}) { - @content; - } -} - -/// Select all odd children between `$first` and `$last`. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -@mixin odd-between($first, $last) { - &:nth-child(odd):nth-child(n + #{$first}):nth-child(-n + #{$last}) { - @content; - } -} - -/// Select all `$num` children between `$first` and `$last`. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -@mixin n-between($num, $first, $last) { - &:nth-child(#{$num}n):nth-child(n + #{$first}):nth-child(-n + #{$last}) { - @content; - } -} - - -/// Select all children but `$num`. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -/// @param {number} $num - id of the child -@mixin all-but($num) { - &:not(:nth-child(#{$num})) { - @content; - } -} - -/// Select children each `$num`. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -/// @param {number} $num - id of the child -/// @alias every -@mixin each($num) { - &:nth-child(#{$num}n) { - @content; - } -} - -/// Select children each `$num`. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -/// @param {number} $num - id of the child -@mixin every($num) { - &:nth-child(#{$num}n) { - @content; - } -} - -/// Select the `$num` child from the start and the `$num` child from the last. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -/// @param {number} $num - id of the child -@mixin from-first-last($num) { - &:nth-child(#{$num}), - &:nth-last-child(#{$num}) { - @content; - } -} - - -/// Select the item in the middle of `$num` child. Only works with odd number -/// chain. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -/// @param {number} $num - id of the child -@mixin middle($num) { - &:nth-child(#{round($num / 2)}) { - @content; - } -} - - -/// Select all children between the `$num` first and the `$num` last. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -/// @param {number} $num - id of the child -@mixin all-but-first-last($num) { - &:nth-child(n + #{$num}):nth-last-child(n + #{$num}) { - @content; - } -} - - -/// This quantity-query mixin will only select the first of `$limit` items. It will not -/// work if there is not as much as item as you set in `$limit`. -/// @group Quantity queries -/// @param {number} $limit -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -@mixin first-of($limit) { - &:nth-last-child(#{$limit}):first-child { - @content; - } -} - -/// This quantity-query mixin will only select the last of `$limit` items. It will not -/// if there is not as much as item as you set in `$limit`. -/// @group Quantity queries -/// @param {number} $limit -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -@mixin last-of($limit) { - &:nth-of-type(#{$limit}):nth-last-of-type(1) { - @content; - } -} - -/// This quantity-query mixin will select every items if there is at least `$num` items. It will not -/// if there is not as much as item as you set in `$num`. -/// @group Quantity queries -/// @param {number} $limit -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -@mixin at-least($num) { - $selector: &; - $child: nth(nth($selector, -1), -1); - - &:nth-last-child(n + #{$num}), - &:nth-last-child(n + #{$num}) ~ #{$child} { - @content; - } -} - -/// This quantity-query mixin will select every items if there is at most `$num` items. It will not -/// if there is not as much as item as you set in `$num`. -/// @group Quantity queries -/// @param {number} $limit -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -@mixin at-most($num) { - $selector: &; - $child: nth(nth($selector, -1), -1); - - &:nth-last-child(-n + #{$num}):first-child, - &:nth-last-child(-n + #{$num}):first-child ~ #{$child} { - @content; - } -} - -/// This quantity-query mixin will select every items only if there is between `$min` and `$max` items. -/// @group Quantity queries -/// @param {number} $limit -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -@mixin in-between($min, $max) { - $selector: &; - $child: nth(nth($selector, -1), -1); - - &:nth-last-child(n + #{$min}):nth-last-child(-n + #{$max}):first-child, - &:nth-last-child(n + #{$min}):nth-last-child(-n + #{$max}):first-child ~ #{$child} { - @content; - } -} - -/// Select the first exact child -/// @group no-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -@mixin first-child() { - &:first-of-type { - @content - } -} - -/// Select the last exact child -/// @group no-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -@mixin last-child() { - &:last-of-type { - @content - } -} - -/// Select all even children. -/// @group no-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -@mixin even() { - &:nth-child(even) { - @content; - } -} - -/// Select all odd children. -/// @group no-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -@mixin odd() { - &:nth-child(odd) { - @content; - } -} - -/// Select only the first and last child. -/// @group no-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -@mixin first-last() { - &:first-child, - &:last-child { - @content; - } -} - -/// Will only select the child if it’s unique. -/// @group no-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -/// @alias only -@mixin unique() { - &:only-child { - @content; - } -} - -/// Will only select the child if it’s unique. -/// @group no-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -@mixin only() { - &:only-child { - @content; - } -} - -/// Will only select children if they are not unique. Meaning if there is at -/// least 2 children, the style is applied. -/// @group no-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -@mixin not-unique() { - &:not(:only-child) { - @content; - } -} - - -/// This mixin is used to automatically sort z-index in numerical order. But it -/// can also sort them in anti-numerical order, depending the parameters you use. -/// @group using functions -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -/// @param {number} $num - Number of children -/// @param {string} $direction [forward] - Direction of the sort -/// @param {number} $index [0] - Index of the sorting -@mixin child-index($num, $direction: 'forward', $index: 0) { - @for $i from 1 through $num { - @if ($direction == 'forward') { - &:nth-child(#{$i}) { - z-index: order-index($i, $index); - @content; - } - } @else if ($direction == 'backward') { - &:nth-last-child(#{$i}) { - z-index: order-index($i, $index); - @content; - } - } - } -} - -/// Used by the child-index mixin. It will returned the proper sorted numbers -/// depending on the `$index` value. -/// @access private -/// @param {number} $num - Number of children -/// @param {number} $index - Index of the sorting -@function order-index($i, $index) { - @return ($index + $i); -} diff --git a/docgen/src/stylesheets/vendors/_functions.scss b/docgen/src/stylesheets/vendors/_functions.scss deleted file mode 100644 index 9b17acff05..0000000000 --- a/docgen/src/stylesheets/vendors/_functions.scss +++ /dev/null @@ -1,5 +0,0 @@ -$browser-context: 16; // Default - -@function em($pixels, $context: $browser-context) { - @return #{$pixels/$context}em; -} \ No newline at end of file diff --git a/docgen/src/stylesheets/vendors/_helpers.scss b/docgen/src/stylesheets/vendors/_helpers.scss deleted file mode 100644 index a5c9fc46c9..0000000000 --- a/docgen/src/stylesheets/vendors/_helpers.scss +++ /dev/null @@ -1,123 +0,0 @@ -$sizes: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10; - -[class*="bloc-"] { - float: left; -} -@each $size in $sizes { - .bloc-#{$size} { - $size: $size*10%; - width: $size; - } -} - -.relative { - position: relative; - overflow: hidden; -} - - -.center-text { - text-align: center; -} - -.fl-left { - float: left; -} - -.fl-right { - float: right; -} - -hr { - border: none; - float: left; - clear: both; - &:before, - &:after { - content: ''; - display: table; - clear: both; - - } - - width: 100%; - height: 1px; - background: #e5e5e5 -} - -.pipe { - width: 2px; - height: 20px; - background: $accent-color; - display: inline-block; - float: left; - margin: 20px 16px 0; - line-height: $nav-height; - - &+ span { - font-weight: bold; - width: 0; - float: left; - } - - body.index &{ - display: none; - - &+ span { - display: none !important; - } - } -} - -// The following helper classes -// made responsive desing easy -// - no-desktop : Only display on mobile -// - no-mobile : Only display on desktop -// - display-on-small : only display on smallish screen ( no mobile ) - -.no-desktop { - @include hide(); - @include small-mq { - @include hide(); - } - - @include mobile-mq { - @include unhide(block); - } - - -&.community-badge { - @include mobile-mq { - @include unhide(inline); - } -} - - @media screen and (orientation: landscape) { - @include hide(); - } -} - -.no-mobile { - @include unhide(block); - - &.nav-icon { - @include unhide(inline); - - @include small-mq { - @include hide(); - } - } - - @include small-mq { - @include hide(); - } -} - -.display-on-small { - @include hide(); - - @media (max-width: 960px){ - display: inline-block !important; - visibility: visible; - } -} diff --git a/docgen/src/stylesheets/vendors/_mixins.scss b/docgen/src/stylesheets/vendors/_mixins.scss deleted file mode 100644 index bbb2250baf..0000000000 --- a/docgen/src/stylesheets/vendors/_mixins.scss +++ /dev/null @@ -1,241 +0,0 @@ -// Mixins -@mixin placeholder { - $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input"; - @each $placeholder in $placeholders { - &:#{$placeholder}-placeholder { - @content; - } - } -} -@mixin better-fonts() { - h1,h2,h3,h4,h5,h6,span,div,p,pre,code,a,strong,em,i { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } -} - -@mixin arrowSeparatorLeft($color) { - &:before { - content: ''; - display: block; - position: absolute; - z-index: 10; - height: 100%; - width: 40px; - top: 0; - left: -6px; - background: url("data:image/svg+xml;utf8,Rectangle")no-repeat; - } -} - - -@mixin footer-text{ - color: #496f92; - text-transform: uppercase; - font-weight: bold; - font-size: 12px; - margin: 0; - font-family: 'Raleway', helvetica, sans-serif; - font-weight: 800; - float: none; -} - -@mixin hide() { - display: none !important; - visibility: hidden; -} - -@mixin unhide($type) { - display: $type !important; - visibility: visible; -} -@mixin appearance ($value) { - -webkit-appearance: $value; - -moz-appearance: $value; - appearance: $value; -} - -// Responsive Breakpoints -@mixin big-min-mq { - @media (min-width: $bp-big){ - @content - } -} -@mixin huge-min-mq { - @media (min-width: $bp-huge){ - @content - } -} - -@mixin big-mq { - @media (max-width: $bp-big){ - @content - } -} -@mixin medium-mq { - @media (max-width: $bp-medium){ - @content - } -} -@mixin small-mq { - @media (max-width: $bp-medium){ - @content - } -} -@mixin mobile-mq { - @media (max-width: $bp-small){ - @content - } -} -@mixin tablet-mq-portrait { - @media only screen - and (min-device-width : 768px) - and (max-device-width : 1024px) - and (orientation : portrait) { - @content - } -} -@mixin tablet-mq-landscape { - @media only screen - and (min-device-width : 768px) - and (max-device-width : 1024px) - and (orientation : landscape) { - @content - } -} - -@mixin component($component, $element: false, $modifier: false) { - @if $element !=false and $modifier==false { - .cm-#{$component}__#{$element} { - @content - } - } - @if $element !=false and $modifier !=false { - .cm-#{$component}__#{$element}--#{$modifier} { - @content - } - } - @if $element==false and $modifier !=false { - .cm-#{$component}--#{$modifier} { - @content - } - } - @else if $element==false and $modifier==false { - .cm-#{$component} { - @content - } - } -} - -@function str-replace($string, $search, $replace: '') { - $index: str-index($string, $search); - @if $index { - @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); - } - @return $string; -} - -@mixin isRetina { - @media(-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { - @content - } - @media(-webkit-min-device-pixel-ratio: 1.3), - (min-resolution: 124.8dpi) { - @content - } - @media(-webkit-min-device-pixel-ratio: 1.5), - (min-resolution: 144dpi) { - @content - } -} - -@mixin placeholder { - &::-webkit-input-placeholder { - @content - } - &:-moz-placeholder { - @content - } - &::-moz-placeholder { - @content - } - &:-ms-input-placeholder { - @content - } -} - -@mixin arrowSeparator($color) { - &:after { - content: ''; - display: block; - position: absolute; - z-index: 10; - height: 100%; - width: 40px; - top: 0; - right: -34px; - background: url("data:image/svg+xml;utf8,Rectangle")no-repeat; - } -} - - -//--------------------------- -// DIAGONAL HELPER -// Generate a diagonal edge on a before pseudo element -// $rotation: diagonal degree -// $background : background color, image, gradient -// $height: height of the edge ( px, %, cm, pc, etc) -// @content [Write the style you want to apply to the diagonal edge, and it will be added within the @content directive] -//--------------------------- -@mixin diagonal($rotation, $background, $height, $imp: false, $pos: after) { - &:#{$pos} { - content: ''; - display: block; - position: absolute; - width: 100%; - height: $height; - background: #{$background}; - @if $imp == 'true' { - transform: skewY($rotation) !important; - } - @else { - transform: skewY($rotation); - } - @content; - } -} - -// USE THIS ONE CAREFULLY - - -// Placeholders - - -%fadeInDown { - animation-name: fadeInDown; -} - -%animated { - -webkit-animation-duration: 0.3s; - animation-duration: 0.3s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; -} - -%active-links { - color: $accent-color; - box-shadow: inset -2px 0 0 0 $accent-color; - font-weight: bold; - - @supports (-webkit-background-clip: text) and (-webkit-text-fill-color: transparent) { - background: -webkit-linear-gradient(120deg, $accent-color, $accent-color-darkish); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - } - - @include small-mq { - font-weight: bold; - box-shadow: none; - color: #fff; - } -} diff --git a/docgen/src/stylesheets/vendors/_normalize.scss b/docgen/src/stylesheets/vendors/_normalize.scss deleted file mode 100755 index b0d3f972a8..0000000000 --- a/docgen/src/stylesheets/vendors/_normalize.scss +++ /dev/null @@ -1,424 +0,0 @@ -/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */ - -/** - * 1. Change the default font family in all browsers (opinionated). - * 2. Prevent adjustments of font size after orientation changes in IE and iOS. - */ - -html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/** - * Remove the margin in all browsers (opinionated). - */ - -body { - margin: 0; -} - -/* HTML5 display definitions - ========================================================================== */ - -/** - * Add the correct display in IE 9-. - * 1. Add the correct display in Edge, IE, and Firefox. - * 2. Add the correct display in IE. - */ - -article, -aside, -details, /* 1 */ -figcaption, -figure, -footer, -header, -main, /* 2 */ -menu, -nav, -section, -summary { /* 1 */ - display: block; -} - -/** - * Add the correct display in IE 9-. - */ - -audio, -canvas, -progress, -video { - display: inline-block; -} - -/** - * Add the correct display in iOS 4-7. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - vertical-align: baseline; -} - -/** - * Add the correct display in IE 10-. - * 1. Add the correct display in IE. - */ - -template, /* 1 */ -[hidden] { - display: none; -} - -/* Links - ========================================================================== */ - -/** - * Remove the gray background on active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * Remove the outline on focused links when they are also active or hovered - * in all browsers (opinionated). - */ - -a:active, -a:hover { - outline-width: 0; -} - -/* Text-level semantics - ========================================================================== */ - -/** - * 1. Remove the bottom border in Firefox 39-. - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} - -/** - * Prevent the duplicate application of `bolder` by the next rule in Safari 6. - */ - -b, -strong { - font-weight: inherit; -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - -/** - * Add the correct font style in Android 4.3-. - */ - -dfn { - font-style: italic; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/** - * Add the correct background and color in IE 9-. - */ - -mark { - background-color: #ff0; - color: #000; -} - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove the border on images inside links in IE 10-. - */ - -img { - border-style: none; -} - -/** - * Hide the overflow in IE. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* Grouping content - ========================================================================== */ - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** - * Add the correct margin in IE 8. - */ - -figure { - margin: 1em 40px; -} - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/* Forms - ========================================================================== */ - -/** - * Change font properties to `inherit` in all browsers (opinionated). - */ - -button, -input, -select, -textarea { - font: inherit; -} - -/** - * Restore the font weight unset by the previous rule. - */ - -optgroup { - font-weight: bold; -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - * 2. Show the overflow in Edge, Firefox, and IE. - */ - -button, -input, /* 1 */ -select { /* 2 */ - overflow: visible; -} - -/** - * Remove the margin in Safari. - * 1. Remove the margin in Firefox and Safari. - */ - -button, -input, -select, -textarea { /* 1 */ - margin: 0; -} - -/** - * Remove the inheritence of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritence of text transform in Firefox. - */ - -button, -select { /* 1 */ - text-transform: none; -} - -/** - * Change the cursor in all browsers (opinionated). - */ - -button, -[type="button"], -[type="reset"], -[type="submit"] { - cursor: pointer; -} - -/** - * Restore the default cursor to disabled elements unset by the previous rule. - */ - -[disabled] { - cursor: default; -} - -/** - * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` - * controls in Android 4. - * 2. Correct the inability to style clickable types in iOS. - */ - -button, -html [type="button"], /* 1 */ -[type="reset"], -[type="submit"] { - -webkit-appearance: button; /* 2 */ -} - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -input:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Change the border, margin, and padding in all browsers (opinionated). - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} - -/** - * Remove the default vertical scrollbar in IE. - */ - -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10-. - * 2. Remove the padding in IE 10-. - */ - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * Correct the odd appearance of search inputs in Chrome and Safari. - */ - -[type="search"] { - -webkit-appearance: textfield; -} - -/** - * Remove the inner padding and cancel buttons in Chrome on OS X and - * Safari on OS X. - */ - -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} diff --git a/docgen/src/stylesheets/vendors/_variables.scss b/docgen/src/stylesheets/vendors/_variables.scss deleted file mode 100644 index 9031941594..0000000000 --- a/docgen/src/stylesheets/vendors/_variables.scss +++ /dev/null @@ -1,86 +0,0 @@ -$debug: false; - -/* Breakpoints -=====================*/ -$bp-huge: 2000px; -$bp-big: 1500px; -$bp-wide: 1200px; -$bp-medium: 960px; -$bp-small: 768px; - -/* Colors -=====================*/ -$denim-blue: #3a5395; -$red-pink: #fb366e; -$darkish-pink: #e7486b; -$saffron-mango: #FDBD57; -$saffron-mango-light: #fef5e6; -$charcoal-grey: #4a4a4c; -$charcoal-grey-75: rgba(74, 74, 76, 0.75); -$charcoal-greyish: #686d7d; -$blueish-grey: #5c7080; -$greyish-brown: #4a4a4a; -$greyish: #a4a4a4; -$pale-grey: #f2f4f6; -$blue-grey: #9ba7bf; -$light-blue-grey: #becce0; -$powder-blue: #c2d5ff; -$grey-blue: #7183a7; -$silver: #d4d9de; -$steel: #788795; -$brand-primary: #1D96C7; -$black: #0a1724; -$white-75: rgba(white, 0.75); -$chocolate: #7d4704; -$nice-purple: #8f64f3; -$nice-blue: #39b1de; -$sweet-purple: #8e43e7; -// Business variables -$react-color: #00D8FF; -$hero-color: $saffron-mango; -$hero-color-accent: #FFF; -$accent-color: #00aeff; -$accent-color-darkish: $accent-color; -$bg-pale-accent: $saffron-mango-light; - -$border: $silver; - -/* Icons -==================*/ -$icon-heart: "data:image/svg+xml;utf8,icon-heart"; -$icon-heart-dark: "data:image/svg+xml;utf8,icon-heart"; -$icon-algolia-dark: "data:image/svg+xml;utf8,logo-algolia-small"; -$icon-algolia-light: "data:image/svg+xml;utf8,Algolia_logo_bg-dark Copy 4"; -$icon-search: "data:image/svg+xml;utf8,search-icon copy"; -$icon-search-white: "data:image/svg+xml;utf8,search-icon copy"; -$icon-mail: "data:image/svg+xml;utf8,"; -$icon-algolia-small: "data:image/svg+xml;utf8,logos/logo-algolia-avatar"; -$icon-algolia-small_white: "data:image/svg+xml;utf8,logos/logo-algolia-avatar"; -$icon-arrow: "data:image/svg+xml;utf8,Group 27 Copy"; - - -/* Dimensions -==================*/ -$max-container-width: 1100px; -$container-width: 980px; -$nav-height: 60px; -$margin: 16px; -$sidebar-width: 240px; -$offset-height: $nav-height + 20; - - -/* Fonts -==================*/ -$font-name: "Raleway"; -$font-fallback: Helvetica Neue, helvetica; -$font-settings: $font-name, $font-fallback; -$font-stack: 'Open Sans',open sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; -$font-code: 'inconsolata', monospace; - -/* Misc -==================*/ -$hero-logo-anim-length: 5s; -$hero-logo-anim-delay: 0.3s; - - - diff --git a/docgen/src/widgets/index.md b/docgen/src/widgets/index.md deleted file mode 100644 index e348d57aab..0000000000 --- a/docgen/src/widgets/index.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Widgets -layout: main.pug -category: widget -showInNav: false ---- - -Widgets are React components with predefined styling and behavior. You can use them in any DOM context. - -You will need to load the appropriate stylesheet, read our [styling guide](guide/Styling.html). - -There are no widgets for react-native for now, read our [react-native guide](guide/React_native.html). diff --git a/docgen/start.js b/docgen/start.js deleted file mode 100644 index b4f8b2c93d..0000000000 --- a/docgen/start.js +++ /dev/null @@ -1,35 +0,0 @@ -import {watch} from 'chokidar'; - -import devServer from './devServer.js'; -import builder from './builder.js'; -import {start as middlewares} from './middlewares'; -import {rootPath} from './path.js'; - -// we build once at start -builder({middlewares}, err => { - if (err) { - throw err; - } - - // watch and serve docs/ (browser sync) - devServer(); -}); - -// then we watch and rebuild -watch([ - // rootPath('packages/react-instantsearch/src/**/*.js'), - rootPath('docgen/assets/'), - rootPath('docgen/src/**/*'), - rootPath('docgen/layouts/**/*.pug'), -], { - ignoreInitial: true, - ignored: /assets\/js\/(.*)?\.js$/, -}) - .on('all', () => builder({clean: false, middlewares}, err => { - if (err) { - throw err; - } - })) - .on('error', err => { - throw err; - }); diff --git a/docgen/syntaxHighlighting.js b/docgen/syntaxHighlighting.js deleted file mode 100644 index fce23574dd..0000000000 --- a/docgen/syntaxHighlighting.js +++ /dev/null @@ -1,36 +0,0 @@ -import {runMode} from 'codemirror/addon/runmode/runmode.node'; -import 'codemirror/mode/shell/shell'; -import 'codemirror/mode/jsx/jsx'; -import 'codemirror/mode/htmlmixed/htmlmixed'; -import 'codemirror/mode/css/css'; -import escape from 'escape-html'; - -export default function highlight(source, lang) { - let tokenizedSource = ''; - - if (lang === 'html') { - lang = 'htmlmixed'; - } - - const heading = lang === 'shell' ? 'Command' : 'Code'; - - // this is a synchronous callback API - runMode(source, lang, (text, style) => { - text = escape(text); - - if (!style) { - tokenizedSource += text; - return; - } - - tokenizedSource += `${text}`; - }); - - return ( -`
    -  
    ${heading}
    -
    - ${tokenizedSource} -
    -
    `); -} diff --git a/docgen/webpack.config.babel.js b/docgen/webpack.config.babel.js deleted file mode 100644 index 5240fc463b..0000000000 --- a/docgen/webpack.config.babel.js +++ /dev/null @@ -1,62 +0,0 @@ -import webpack from 'webpack'; -import {join} from 'path'; -import config from './config.js'; -import HappyPack from 'happypack'; - -export default { - entry: { - 'js/main': join(__dirname, 'assets/js/main.js'), - // 'examples/e-commerce/index': join(__dirname, 'src/examples/e-commerce/index.js'), - // 'examples/e-commerce-infinite/index': join(__dirname, 'src/examples/e-commerce-infinite/index.js'), - // 'examples/media/index': join(__dirname, 'src/examples/media/index.js'), - // 'examples/default-theme/index': join(__dirname, 'src/examples/default-theme/index.js'), - // 'examples/tourism/index': join(__dirname, 'src/examples/tourism/index.js'), - // 'examples/material-ui/index': join(__dirname, 'src/examples/material-ui/index.js'), - }, - output: { - path: config.docsDist, - publicPath: config.publicPath, - filename: '[name].js', - }, - module: { - loaders: [ - { - test: /\.json$/, - exclude: /node_modules/, - loader: 'happypack/loader?id=json', - }, - { - test: /\.js$/, - exclude: /node_modules/, - loader: 'happypack/loader?id=babel', - }, - { - test: /\.scss$/, - exclude: /node_modules/, - loader: 'happypack/loader?id=style', - }, - ], - }, - plugins: [ - // new webpack.EnvironmentPlugin({ - // NODE_ENV: 'development', // use 'deve// lopment' unless process.env.NODE_ENV is defined - // }), - new webpack.optimize.CommonsChunkPlugin({ - name: 'js/common', - minChunks: module => - (/\/lodash\//).test(module.context), - }), - new HappyPack({ - loaders: ['json-loader'], - id: 'json', - }), - new HappyPack({ - loaders: ['babel-loader?cacheDirectory=true'], - id: 'babel', - }), - new HappyPack({ - loaders: ['style-loader?insertAt=top', 'css-loader', 'postcss-loader'], - id: 'style', - }), - ], -}; diff --git a/docgen/webpack.config.build.babel.js b/docgen/webpack.config.build.babel.js deleted file mode 100644 index 2f6c60fb10..0000000000 --- a/docgen/webpack.config.build.babel.js +++ /dev/null @@ -1,23 +0,0 @@ -// this is the webpack config when running `yarn docs:build` - -import webpack from 'webpack'; -import webpackConfig from './webpack.config.babel.js'; - -const { - optimize: {UglifyJsPlugin}, -} = webpack; - -export default { - ...webpackConfig, - devtool: 'source-map', - output: { - ...webpackConfig.output, - filename: '[name]-build.js', // hash is made with `plugins/rev-assets.js` - }, - plugins: [ - new UglifyJsPlugin({ - sourceMap: true, - }), - ...webpackConfig.plugins, - ], -}; diff --git a/docgen/webpack.config.start.babel.js b/docgen/webpack.config.start.babel.js deleted file mode 100644 index 6f12b59d7c..0000000000 --- a/docgen/webpack.config.start.babel.js +++ /dev/null @@ -1,32 +0,0 @@ -// this is the webpack config when running `npm start` - -import webpack from 'webpack'; -import webpackConfig from './webpack.config.babel.js'; - -const { - HotModuleReplacementPlugin, - NoErrorsPlugin, -} = webpack; - -export default { - ...webpackConfig, - devtool: 'cheap-module-eval-source-map', - entry: { - ...( - Object - .entries(webpackConfig.entry) - .reduce((memo, [entryName, entryValue]) => ({ - ...memo, - [entryName]: [ - 'webpack-hot-middleware/client?reload=true', - entryValue, - ], - }), {}) - ), - }, - plugins: [ - new HotModuleReplacementPlugin(), - new NoErrorsPlugin(), - ...webpackConfig.plugins, - ], -}; diff --git a/docs/.gitignore b/docs/.gitignore new file mode 100644 index 0000000000..8f9460de67 --- /dev/null +++ b/docs/.gitignore @@ -0,0 +1,4 @@ +_site +_site_preview +.sass-cache +.asset-cache diff --git a/docs/.ruby-version b/docs/.ruby-version new file mode 100644 index 0000000000..0bee604df7 --- /dev/null +++ b/docs/.ruby-version @@ -0,0 +1 @@ +2.3.3 diff --git a/docs/Gemfile b/docs/Gemfile new file mode 100644 index 0000000000..92868ed4a3 --- /dev/null +++ b/docs/Gemfile @@ -0,0 +1,24 @@ +# Ruby Gems for building and testing Bootstrap +# Run `grunt update-gemfile-lock` to update to the latest compatible versions + +source 'https://rubygems.org' + +group :development, :test do + gem 'jekyll', '< 3' + gem 'haml' + gem 'sass' + gem 'uglifier' + gem 'guard' + gem 'nokogiri' + gem 'autoprefixer-rails' + gem 'thin' + gem 'guard-livereload' + gem 'guard-bundler', require: false + gem 'rb-readline' +end + +group :jekyll_plugins do + gem 'algoliasearch-jekyll', '~> 0.5.3' + gem "jekyll-assets" + gem 'jekyll-contentblocks' +end diff --git a/docs/Gemfile.lock b/docs/Gemfile.lock new file mode 100644 index 0000000000..c4e84efaa8 --- /dev/null +++ b/docs/Gemfile.lock @@ -0,0 +1,183 @@ +GEM + remote: https://rubygems.org/ + specs: + addressable (2.3.8) + algoliasearch (1.12.6) + httpclient (~> 2.8.3) + json (>= 1.5.1) + algoliasearch-jekyll (0.5.3) + algoliasearch (~> 1.4) + awesome_print (~> 1.6) + json (~> 1.8) + nokogiri (~> 1.6) + autoprefixer-rails (6.7.3) + execjs + awesome_print (1.7.0) + blankslate (2.1.2.4) + classifier-reborn (2.1.0) + fast-stemmer (~> 1.0) + coderay (1.1.1) + coffee-script (2.4.1) + coffee-script-source + execjs + coffee-script-source (1.11.1) + colorator (0.1) + daemons (1.2.4) + em-websocket (0.5.1) + eventmachine (>= 0.12.9) + http_parser.rb (~> 0.6.0) + eventmachine (1.2.2) + execjs (2.7.0) + faraday (0.11.0) + multipart-post (>= 1.2, < 3) + fast-stemmer (1.0.2) + fastimage (1.9.0) + addressable (~> 2.3.5) + ffi (1.9.17) + formatador (0.2.5) + guard (2.14.1) + formatador (>= 0.2.4) + listen (>= 2.7, < 4.0) + lumberjack (~> 1.0) + nenv (~> 0.1) + notiffany (~> 0.0) + pry (>= 0.9.12) + shellany (~> 0.0) + thor (>= 0.18.1) + guard-bundler (2.1.0) + bundler (~> 1.0) + guard (~> 2.2) + guard-compat (~> 1.1) + guard-compat (1.2.1) + guard-livereload (2.5.2) + em-websocket (~> 0.5) + guard (~> 2.8) + guard-compat (~> 1.0) + multi_json (~> 1.8) + haml (4.0.7) + tilt + hike (1.2.3) + http_parser.rb (0.6.0) + httpclient (2.8.3) + jekyll (2.5.3) + classifier-reborn (~> 2.0) + colorator (~> 0.1) + jekyll-coffeescript (~> 1.0) + jekyll-gist (~> 1.0) + jekyll-paginate (~> 1.0) + jekyll-sass-converter (~> 1.0) + jekyll-watch (~> 1.1) + kramdown (~> 1.3) + liquid (~> 2.6.1) + mercenary (~> 0.3.3) + pygments.rb (~> 0.6.0) + redcarpet (~> 3.1) + safe_yaml (~> 1.0) + toml (~> 0.1.0) + jekyll-assets (1.0.0) + fastimage (~> 1.6) + jekyll (>= 2) + mini_magick (~> 4.1) + sass (~> 3.2) + sprockets (~> 2.10) + sprockets-helpers + sprockets-sass + jekyll-coffeescript (1.0.2) + coffee-script (~> 2.2) + coffee-script-source (~> 1.11.1) + jekyll-contentblocks (1.2.0) + jekyll + jekyll-gist (1.4.0) + octokit (~> 4.2) + jekyll-paginate (1.1.0) + jekyll-sass-converter (1.5.0) + sass (~> 3.4) + jekyll-watch (1.5.0) + listen (~> 3.0, < 3.1) + json (1.8.6) + kramdown (1.13.2) + liquid (2.6.3) + listen (3.0.8) + rb-fsevent (~> 0.9, >= 0.9.4) + rb-inotify (~> 0.9, >= 0.9.7) + lumberjack (1.0.11) + mercenary (0.3.6) + method_source (0.8.2) + mini_magick (4.6.1) + mini_portile2 (2.1.0) + multi_json (1.12.1) + multipart-post (2.0.0) + nenv (0.3.0) + nokogiri (1.7.0.1) + mini_portile2 (~> 2.1.0) + notiffany (0.1.1) + nenv (~> 0.1) + shellany (~> 0.0) + octokit (4.6.2) + sawyer (~> 0.8.0, >= 0.5.3) + parslet (1.5.0) + blankslate (~> 2.0) + posix-spawn (0.3.13) + pry (0.10.4) + coderay (~> 1.1.0) + method_source (~> 0.8.1) + slop (~> 3.4) + pygments.rb (0.6.3) + posix-spawn (~> 0.3.6) + yajl-ruby (~> 1.2.0) + rack (1.6.5) + rb-fsevent (0.9.8) + rb-inotify (0.9.8) + ffi (>= 0.5.0) + rb-readline (0.5.4) + redcarpet (3.4.0) + safe_yaml (1.0.4) + sass (3.4.23) + sawyer (0.8.1) + addressable (>= 2.3.5, < 2.6) + faraday (~> 0.8, < 1.0) + shellany (0.0.1) + slop (3.6.0) + sprockets (2.12.4) + hike (~> 1.2) + multi_json (~> 1.0) + rack (~> 1.0) + tilt (~> 1.1, != 1.3.0) + sprockets-helpers (1.2.1) + sprockets (>= 2.2) + sprockets-sass (1.3.1) + sprockets (~> 2.0) + tilt (~> 1.1) + thin (1.7.0) + daemons (~> 1.0, >= 1.0.9) + eventmachine (~> 1.0, >= 1.0.4) + rack (>= 1, < 3) + thor (0.19.4) + tilt (1.4.1) + toml (0.1.2) + parslet (~> 1.5.0) + uglifier (3.0.4) + execjs (>= 0.3.0, < 3) + yajl-ruby (1.2.1) + +PLATFORMS + ruby + +DEPENDENCIES + algoliasearch-jekyll (~> 0.5.3) + autoprefixer-rails + guard + guard-bundler + guard-livereload + haml + jekyll (< 3) + jekyll-assets + jekyll-contentblocks + nokogiri + rb-readline + sass + thin + uglifier + +BUNDLED WITH + 1.14.4 diff --git a/docs/Guardfile b/docs/Guardfile new file mode 100644 index 0000000000..124eaa2b0e --- /dev/null +++ b/docs/Guardfile @@ -0,0 +1,19 @@ +require 'json' + +ENV['VERSION'] = JSON.parse(File.read(File.join(File.dirname(__FILE__), '..', 'package.json')))['version'] + +guard 'livereload', port: '35730' do + watch /^_site/ +end + +guard :bundler do + require 'guard/bundler' + require 'guard/bundler/verify' + helper = Guard::Bundler::Verify.new + + files = ['Gemfile'] + files += Dir['*.gemspec'] if files.any? { |f| helper.uses_gemspec?(f) } + + # Assume files are symlinked from somewhere + files.each { |file| watch(helper.real_path(file)) } +end diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000000..5bfae1ad0f --- /dev/null +++ b/docs/README.md @@ -0,0 +1,19 @@ +instantsearch.js website +========================= + +# Development + +You need [ruby](https://www.ruby-lang.org/en/), [bundler](http://bundler.io/). + +```sh +npm run dev:docs +# open http://localhost:4000/ +``` + +# MacOS + +If you are using `brew` and you had `brew install openssl`, you may need to configure the build path of eventmachine with + +```sh +bundle config build.eventmachine --with-cppflags=-I$(brew --prefix openssl)/include +``` diff --git a/docs/_assets/images/about.svg b/docs/_assets/images/about.svg new file mode 100644 index 0000000000..156a024439 --- /dev/null +++ b/docs/_assets/images/about.svg @@ -0,0 +1,27 @@ + + + + icon-widget-star-rating + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/_assets/images/add-widgets.jpg b/docs/_assets/images/add-widgets.jpg new file mode 100644 index 0000000000..fcd2b17cff Binary files /dev/null and b/docs/_assets/images/add-widgets.jpg differ diff --git a/docs/_assets/images/algolia-logo.svg b/docs/_assets/images/algolia-logo.svg new file mode 100644 index 0000000000..90b85a18f3 --- /dev/null +++ b/docs/_assets/images/algolia-logo.svg @@ -0,0 +1 @@ +algolia-logoCreated with Sketch. \ No newline at end of file diff --git a/docs/_assets/images/algolia-mark-white.svg b/docs/_assets/images/algolia-mark-white.svg new file mode 100644 index 0000000000..d81f27da17 --- /dev/null +++ b/docs/_assets/images/algolia-mark-white.svg @@ -0,0 +1 @@ +algolia-new-logo copy \ No newline at end of file diff --git a/docs/_assets/images/arrow.svg b/docs/_assets/images/arrow.svg new file mode 100644 index 0000000000..374da3882e --- /dev/null +++ b/docs/_assets/images/arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/_assets/images/avatar-algolia.png b/docs/_assets/images/avatar-algolia.png new file mode 100644 index 0000000000..98dd0fbd35 Binary files /dev/null and b/docs/_assets/images/avatar-algolia.png differ diff --git a/docs/_assets/images/background_footer.svg b/docs/_assets/images/background_footer.svg new file mode 100644 index 0000000000..6277cd3903 --- /dev/null +++ b/docs/_assets/images/background_footer.svg @@ -0,0 +1,46 @@ + + + + footer copy + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docgen/src/images/community-badge.svg b/docs/_assets/images/community-badge.svg similarity index 100% rename from docgen/src/images/community-badge.svg rename to docs/_assets/images/community-badge.svg diff --git a/docs/_assets/images/drone-search.jpg b/docs/_assets/images/drone-search.jpg new file mode 100644 index 0000000000..7221723d83 Binary files /dev/null and b/docs/_assets/images/drone-search.jpg differ diff --git a/docs/_assets/images/favicon.ico b/docs/_assets/images/favicon.ico new file mode 100644 index 0000000000..9b6c57c5b6 Binary files /dev/null and b/docs/_assets/images/favicon.ico differ diff --git a/docs/_assets/images/favicon.png b/docs/_assets/images/favicon.png new file mode 100644 index 0000000000..1f4d62d08f Binary files /dev/null and b/docs/_assets/images/favicon.png differ diff --git a/docs/_assets/images/googleMaps.gif b/docs/_assets/images/googleMaps.gif new file mode 100644 index 0000000000..8e2841f34d Binary files /dev/null and b/docs/_assets/images/googleMaps.gif differ diff --git a/docs/_assets/images/icon-arrow-pipe.svg b/docs/_assets/images/icon-arrow-pipe.svg new file mode 100644 index 0000000000..cac4d0bf26 --- /dev/null +++ b/docs/_assets/images/icon-arrow-pipe.svg @@ -0,0 +1,10 @@ + + + + Shape + Created with Sketch. + + + + + \ No newline at end of file diff --git a/docs/_assets/images/icon-community.svg b/docs/_assets/images/icon-community.svg new file mode 100644 index 0000000000..dfb9eed66b --- /dev/null +++ b/docs/_assets/images/icon-community.svg @@ -0,0 +1,18 @@ + + + + icon-community + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/docgen/src/images/icon-github.svg b/docs/_assets/images/icon-github.svg old mode 100755 new mode 100644 similarity index 100% rename from docgen/src/images/icon-github.svg rename to docs/_assets/images/icon-github.svg diff --git a/docgen/src/images/icon-heart-dark.svg b/docs/_assets/images/icon-heart-dark.svg old mode 100755 new mode 100644 similarity index 100% rename from docgen/src/images/icon-heart-dark.svg rename to docs/_assets/images/icon-heart-dark.svg diff --git a/docgen/src/images/icon-heart-light.svg b/docs/_assets/images/icon-heart-light.svg old mode 100755 new mode 100644 similarity index 100% rename from docgen/src/images/icon-heart-light.svg rename to docs/_assets/images/icon-heart-light.svg diff --git a/docs/_assets/images/icon-infinite.svg b/docs/_assets/images/icon-infinite.svg new file mode 100644 index 0000000000..82d35d26f8 --- /dev/null +++ b/docs/_assets/images/icon-infinite.svg @@ -0,0 +1 @@ +icon-infiniteCreated with Sketch. \ No newline at end of file diff --git a/docgen/src/images/icon-search-white.svg b/docs/_assets/images/icon-search-white.svg old mode 100755 new mode 100644 similarity index 100% rename from docgen/src/images/icon-search-white.svg rename to docs/_assets/images/icon-search-white.svg diff --git a/docs/_assets/images/icon-theme.svg b/docs/_assets/images/icon-theme.svg new file mode 100644 index 0000000000..2b0a76759f --- /dev/null +++ b/docs/_assets/images/icon-theme.svg @@ -0,0 +1,17 @@ + + + + icon-theme + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/_assets/images/icon-update.svg b/docs/_assets/images/icon-update.svg new file mode 100644 index 0000000000..30e440cc38 --- /dev/null +++ b/docs/_assets/images/icon-update.svg @@ -0,0 +1 @@ +icon-updateCreated with Sketch. \ No newline at end of file diff --git a/docs/_assets/images/icon-ux.svg b/docs/_assets/images/icon-ux.svg new file mode 100644 index 0000000000..07a7c72e30 --- /dev/null +++ b/docs/_assets/images/icon-ux.svg @@ -0,0 +1 @@ +icon-uxCreated with Sketch. \ No newline at end of file diff --git a/docs/_assets/images/icon-widget-clearall.svg b/docs/_assets/images/icon-widget-clearall.svg new file mode 100644 index 0000000000..d49cbc53c6 --- /dev/null +++ b/docs/_assets/images/icon-widget-clearall.svg @@ -0,0 +1 @@ +icon-widget-clearallCreated with Sketch. \ No newline at end of file diff --git a/docs/_assets/images/icon-widget-custom.svg b/docs/_assets/images/icon-widget-custom.svg new file mode 100644 index 0000000000..4368cb51d2 --- /dev/null +++ b/docs/_assets/images/icon-widget-custom.svg @@ -0,0 +1 @@ +icon-widget-customCreated with Sketch. \ No newline at end of file diff --git a/docs/_assets/images/icon-widget-filter.svg b/docs/_assets/images/icon-widget-filter.svg new file mode 100644 index 0000000000..7a6306249d --- /dev/null +++ b/docs/_assets/images/icon-widget-filter.svg @@ -0,0 +1 @@ +icon-widget-filterCreated with Sketch. \ No newline at end of file diff --git a/docs/_assets/images/icon-widget-hierarchical.svg b/docs/_assets/images/icon-widget-hierarchical.svg new file mode 100644 index 0000000000..86a6d95b23 --- /dev/null +++ b/docs/_assets/images/icon-widget-hierarchical.svg @@ -0,0 +1 @@ +icon-widget-hierarchicalCreated with Sketch. \ No newline at end of file diff --git a/docs/_assets/images/icon-widget-hitperpage.svg b/docs/_assets/images/icon-widget-hitperpage.svg new file mode 100644 index 0000000000..087589e1d0 --- /dev/null +++ b/docs/_assets/images/icon-widget-hitperpage.svg @@ -0,0 +1 @@ +icon-widget-hitperpageCreated with Sketch. \ No newline at end of file diff --git a/docs/_assets/images/icon-widget-index.svg b/docs/_assets/images/icon-widget-index.svg new file mode 100644 index 0000000000..de5e675a06 --- /dev/null +++ b/docs/_assets/images/icon-widget-index.svg @@ -0,0 +1 @@ +icon-widget-indexCreated with Sketch. \ No newline at end of file diff --git a/docs/_assets/images/icon-widget-menu.svg b/docs/_assets/images/icon-widget-menu.svg new file mode 100644 index 0000000000..ba5f04540e --- /dev/null +++ b/docs/_assets/images/icon-widget-menu.svg @@ -0,0 +1 @@ +icon-widget-menuCreated with Sketch. \ No newline at end of file diff --git a/docs/_assets/images/icon-widget-numerical.svg b/docs/_assets/images/icon-widget-numerical.svg new file mode 100644 index 0000000000..220ccb0f27 --- /dev/null +++ b/docs/_assets/images/icon-widget-numerical.svg @@ -0,0 +1 @@ +icon-widget-numericalCreated with Sketch. \ No newline at end of file diff --git a/docs/_assets/images/icon-widget-pagination.svg b/docs/_assets/images/icon-widget-pagination.svg new file mode 100644 index 0000000000..0f4a20585e --- /dev/null +++ b/docs/_assets/images/icon-widget-pagination.svg @@ -0,0 +1 @@ +icon-widget-paginationCreated with Sketch. \ No newline at end of file diff --git a/docs/_assets/images/icon-widget-pricerange.svg b/docs/_assets/images/icon-widget-pricerange.svg new file mode 100644 index 0000000000..2c30512a28 --- /dev/null +++ b/docs/_assets/images/icon-widget-pricerange.svg @@ -0,0 +1 @@ +icon-widget-pricerangeCreated with Sketch. \ No newline at end of file diff --git a/docs/_assets/images/icon-widget-refinement.svg b/docs/_assets/images/icon-widget-refinement.svg new file mode 100644 index 0000000000..715e7afec2 --- /dev/null +++ b/docs/_assets/images/icon-widget-refinement.svg @@ -0,0 +1,30 @@ + + + + icon-widget-refinement + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/_assets/images/icon-widget-results.svg b/docs/_assets/images/icon-widget-results.svg new file mode 100644 index 0000000000..7bb7916fec --- /dev/null +++ b/docs/_assets/images/icon-widget-results.svg @@ -0,0 +1 @@ +icon-widget-resultsCreated with Sketch. \ No newline at end of file diff --git a/docs/_assets/images/icon-widget-searchbox.svg b/docs/_assets/images/icon-widget-searchbox.svg new file mode 100644 index 0000000000..4494df0a9f --- /dev/null +++ b/docs/_assets/images/icon-widget-searchbox.svg @@ -0,0 +1 @@ +icon-widget-searchboxCreated with Sketch. \ No newline at end of file diff --git a/docs/_assets/images/icon-widget-slider.svg b/docs/_assets/images/icon-widget-slider.svg new file mode 100644 index 0000000000..a4f07d843c --- /dev/null +++ b/docs/_assets/images/icon-widget-slider.svg @@ -0,0 +1 @@ +icon-widget-sliderCreated with Sketch. \ No newline at end of file diff --git a/docs/_assets/images/icon-widget-star-rating.svg b/docs/_assets/images/icon-widget-star-rating.svg new file mode 100644 index 0000000000..37533bead0 --- /dev/null +++ b/docs/_assets/images/icon-widget-star-rating.svg @@ -0,0 +1,27 @@ + + + + icon-widget-star-rating + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/_assets/images/icon-widget-stats.svg b/docs/_assets/images/icon-widget-stats.svg new file mode 100644 index 0000000000..8c84c5e416 --- /dev/null +++ b/docs/_assets/images/icon-widget-stats.svg @@ -0,0 +1 @@ +icon-widget-statsCreated with Sketch. \ No newline at end of file diff --git a/docs/_assets/images/icon-widget-toggle.svg b/docs/_assets/images/icon-widget-toggle.svg new file mode 100644 index 0000000000..80fb249090 --- /dev/null +++ b/docs/_assets/images/icon-widget-toggle.svg @@ -0,0 +1 @@ +icon-widget-toggleCreated with Sketch. \ No newline at end of file diff --git a/docs/_assets/images/icon-widget.svg b/docs/_assets/images/icon-widget.svg new file mode 100644 index 0000000000..ea48a8e3e4 --- /dev/null +++ b/docs/_assets/images/icon-widget.svg @@ -0,0 +1 @@ +icon-widgetCreated with Sketch. \ No newline at end of file diff --git a/docs/_assets/images/instantsearch-cover.png b/docs/_assets/images/instantsearch-cover.png new file mode 100644 index 0000000000..97d9dcba67 Binary files /dev/null and b/docs/_assets/images/instantsearch-cover.png differ diff --git a/docs/_assets/images/ionRangeSlider.gif b/docs/_assets/images/ionRangeSlider.gif new file mode 100644 index 0000000000..be3bf10f91 Binary files /dev/null and b/docs/_assets/images/ionRangeSlider.gif differ diff --git a/docs/_assets/images/logo UX.svg b/docs/_assets/images/logo UX.svg new file mode 100644 index 0000000000..d23beb8092 --- /dev/null +++ b/docs/_assets/images/logo UX.svg @@ -0,0 +1 @@ +logo UXCreated with Sketch. \ No newline at end of file diff --git a/docs/_assets/images/logo-UX.svg b/docs/_assets/images/logo-UX.svg new file mode 100644 index 0000000000..9af15f061f --- /dev/null +++ b/docs/_assets/images/logo-UX.svg @@ -0,0 +1 @@ +logo-UXCreated with Sketch. \ No newline at end of file diff --git a/docs/_assets/images/logo-algolia-dark.png b/docs/_assets/images/logo-algolia-dark.png new file mode 100644 index 0000000000..3983447306 Binary files /dev/null and b/docs/_assets/images/logo-algolia-dark.png differ diff --git a/docs/_assets/images/logo-algolia-notext.svg b/docs/_assets/images/logo-algolia-notext.svg new file mode 100644 index 0000000000..d83979add3 --- /dev/null +++ b/docs/_assets/images/logo-algolia-notext.svg @@ -0,0 +1 @@ +logo-algolia-notextCreated with Sketch. \ No newline at end of file diff --git a/docs/_assets/images/logo-algolia.svg b/docs/_assets/images/logo-algolia.svg new file mode 100644 index 0000000000..80a68041dd --- /dev/null +++ b/docs/_assets/images/logo-algolia.svg @@ -0,0 +1 @@ +logo-algoliaCreated with Sketch. \ No newline at end of file diff --git a/docgen/src/images/logo-community.svg b/docs/_assets/images/logo-community.svg similarity index 100% rename from docgen/src/images/logo-community.svg rename to docs/_assets/images/logo-community.svg diff --git a/docs/_assets/images/logo-instantsearch.svg b/docs/_assets/images/logo-instantsearch.svg new file mode 100644 index 0000000000..703c636cd9 --- /dev/null +++ b/docs/_assets/images/logo-instantsearch.svg @@ -0,0 +1 @@ +logo-instantsearchCreated with Sketch. \ No newline at end of file diff --git a/docs/_assets/images/logo-open-source.svg b/docs/_assets/images/logo-open-source.svg new file mode 100644 index 0000000000..e68efd24c2 --- /dev/null +++ b/docs/_assets/images/logo-open-source.svg @@ -0,0 +1 @@ +logo-open-sourceCreated with Sketch. \ No newline at end of file diff --git a/docs/_assets/images/sync.svg b/docs/_assets/images/sync.svg new file mode 100644 index 0000000000..818fa53816 --- /dev/null +++ b/docs/_assets/images/sync.svg @@ -0,0 +1 @@ +syncCreated with Sketch. \ No newline at end of file diff --git a/docs/_assets/javascripts/doc.js b/docs/_assets/javascripts/doc.js new file mode 100644 index 0000000000..3ad84e6c26 --- /dev/null +++ b/docs/_assets/javascripts/doc.js @@ -0,0 +1,201 @@ +/* global Clipboard */ +'use strict'; + +(function($) { + function q(select) { return Array.prototype.slice.call(document.querySelectorAll(select), 0);} + + function search() { + function t(tmpl, vars) { + Object.keys(vars).forEach(function(k) { + tmpl = tmpl.replace(new RegExp('\\$' + k, 'g'), vars[k]); + }); + return tmpl; + } + var constants = { + appId: 'latency', + apiKey: '6be0576ff61c053d5f9a3225e2a90f76', + indexName: 'instant_search' + }; + var initialSearchState = { + hitsPerPage: 6 + }; + var codeSnippets = q('.code-sample-snippet:not(.start):not(.config):not(.ignore)'); + var configSnippet = "var search = instantsearch({appId: '$appId', apiKey: '$apiKey'," + + "indexName: '$indexName', searchParameters: " + JSON.stringify(initialSearchState) + "});\n" + var startSnippet = q('.code-sample-snippet.start')[0]; + + var source = codeSnippets.map(function(snippet) { + var functionBody = [configSnippet, snippet, startSnippet] + .map(function(e) { return e.textContent ? e.textContent : e; }) + .join(';'); + return '(function() {' + functionBody + '})();'; + }); + + source = t(source.join('\n'), constants); + + eval(source); + } + + function codeTabs() { + $('.code-box').each(function() { + var $this = $(this); + var code = $this.find('.code-sample-snippet'); + var jsdoc = $this.find('.jsdoc'); + var requirements = $this.find('.requirements'); + var hasCode = code.length > 0; + var hasJsdoc = jsdoc.length > 0; + var hasRequirements = requirements.length > 0; + + var needButtons = (hasCode && (hasJsdoc || hasRequirements)); + if (!needButtons) { + return; + } + + function getButton(label, target) { + var $button = $(''); + $button.attr('name', target); + return $button; + } + var $btnGroup = $('
    '); + var $snippetButton = getButton('Example', 'snippet'); + if (hasJsdoc) { + $btnGroup.append(getButton('Usage', 'jsdoc').addClass('active')); + } else { + $snippetButton.addClass('active'); + } + if (hasRequirements) { + $btnGroup.append(getButton('Requirements', 'requirements')); + } + $btnGroup.append($snippetButton); + + $this.prepend($btnGroup); + setTimeout(function() { + $btnGroup.find('button:first-child').click(); + }, 1); + }); + $(document).on('click', '.toggle-doc-button', function() { + var $this = $(this); + var $codeBox = $this.closest('.code-box'); + var $btnGroup = $codeBox.find('.btn-group'); + // Set the current one as active + $btnGroup.find('.toggle-doc-button').removeClass('active'); + $this.addClass('active'); + // Show the specified target + $codeBox.find('.js-toggle-snippet,.js-toggle-jsdoc,.js-toggle-requirements,.js-toggle-html').hide(); + $codeBox.find('.js-toggle-' + $this.attr('name')).show(); + // Remove HTML debug if any + $('.debug-widget').removeClass('debug-widget'); + }); + } + + function cleanupAndHighlightMarkup(source) { + var lines = source + .replace(/ data-reactid="[^"]+"/g, '') // cleanup react-id + .replace(/ class=""/g, '') // cleanup empty classes + .replace(/(<|>|\n)/g, '\n$1').replace(/\n>/g, '>') // 1 tag per line + .replace(/\s*\n+\s*\n+\s*/g, '\n').replace(/^\n+/g, '') // normalize number of spaces + .replace(/
    \n<\/div>\n/g, '') // remove empty divs + .replace(/>([^<>]+)\n/g, '>\n$1\n').replace(/\n([^<>]+)View HTML'); + buttons.after(''); + }); + $(document).on('click', '.toggle-doc-button.html-btn', function() { + var $this = $(this); + var id = $this.data('widget-container'); + var $widget = $('#' + id); + var source = cleanupAndHighlightMarkup($widget.html()); + var htmlSource = $('
    ').text(source).html(); + $('#html-' + id).html(htmlSource + .replace(/ ([a-z]+=)"([^"]+)"/g, ' $1"$2"') // highlight classes + .replace(/(<\/?[a-z]+(>)?)/g, '$1') // highlight tags + .replace(/(>)\n/g, '>\n') // highlight closing chevron + ); + $widget.addClass('debug-widget'); + }); + } + + function anchorableTitles() { + $('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]').each(function() { + var h = $(this); + h.append(' '); + }); + } + + function copyButtons() { + $('.code-box').each(function() { + var $snippet = $(this).find('.code-sample-snippet'); + $snippet.prepend( + '' + ); + }); + new Clipboard('.copy-btn', { + text: function(trigger) { + return $(trigger).closest('.code-sample-snippet').find('pre').text(); + } + }); + } + + function tocMenu(){ + $('.toc-menu select').change(function(){ + var $body = $('body'); + var href = $(this).val(); + var scroll0 = $body.scrollTop(); + window.location.hash = href; + var scroll1 = $body.scrollTop(); + var deltaScroll = scroll1 - scroll0; + $body.scrollTop($body.scrollTop() - (deltaScroll>0?200:0)).animate({scrollTop: (deltaScroll>0?'+':'-')+'=100px'}, 300) + }); + } + + // given the dynamic height of the page (widgets init), we need to manually + // re-scroll on the right anchor on load + function scrollToRightAnchor() { + $(window).load(function() { + var anchor = $(window.location.hash)[0]; + if (anchor) { + anchor.scrollIntoView(true); + } + }); + } + + function foldableDetails() { + $('.attr-name').on('click', function() { + var $descriptionParagraph = $(this).next('.attr-description') + var isVisible = $descriptionParagraph.is(':visible'); + $('.attr-description:not(.important)').hide(); + if(!isVisible) $descriptionParagraph.show(); + }); + } + + search(); + codeTabs(); + htmlTabs(); + anchorableTitles(); + copyButtons(); + tocMenu(); + scrollToRightAnchor(); + foldableDetails(); +})(window.jQuery); diff --git a/docs/_assets/javascripts/home.js b/docs/_assets/javascripts/home.js new file mode 100644 index 0000000000..3a3921b0ee --- /dev/null +++ b/docs/_assets/javascripts/home.js @@ -0,0 +1,266 @@ +/* global $, TweenMax, TimelineMax, ScrollMagic, Power2, Bounce, THREE */ +'use strict'; + +// Park-Miller-Carta Pseudo-Random Number Generator +// https://github.com/pnitsch/BitmapData.js/blob/master/js/BitmapData.js +var PRNG = function () { + this.seed = 1; + this.next = function() { + return ( this.gen() / 2147483647 ); + }; + this.nextRange = function( min, max ) { + return min + ( ( max - min ) * this.next() ) + }; + this.gen = function() { + return this.seed = ( this.seed * 16807 ) % 2147483647; + }; +}; + +$(function () { + // init scroll magic + var controller = new ScrollMagic.Controller({ + globalSceneOptions:{ + triggerHook:'onLeave' + } + }); + + // get animation elements + var windows = $('section.window'); + var $anim = $('#anim'); + var $overlay = $('#anim-overlay'); + var $spaceOverlay = $('#space-overlay'); + var $screens = $('.screen'); + var $widgets = $('.widget'); + var $widgetsTooltips = $('.widget-intro'); + var $illusSync = $('.illus-sync'); + var $screenshotWebsite = $('#screenshot-website'); + var $widgetsIcons = $('#anim-overlay img'); + var $animWidget1 = $anim.find('.widget-1'); + var $animWidget2 = $anim.find('.widget-2'); + var $animWidget3 = $anim.find('.widget-3'); + var $animWidget4 = $anim.find('.widget-4'); + var $animWidget5 = $anim.find('.widget-5'); + var $animWidget6 = $anim.find('.widget-6'); + var $animWidget7 = $anim.find('.widget-7'); + + // Intro + var intro = new TimelineMax(); + intro + .set($screens, {opacity:0}) + .set($anim, {opacity:0, scale:0}) + .set($screenshotWebsite, {opacity:0}) + .set($overlay, {opacity:0}) + .set($widgetsIcons, {scale:0}) + .set($widgets, {opacity:0, scale:0}) + .to($anim, 2, {opacity:1, scale:1, rotationX:30, rotationZ:-6, ease:Power2.easeInOut}) + .to($screenshotWebsite, 1, {opacity:1}, '-=1') + .to($animWidget1, 0.3, {scale:1 , opacity:1 }) + .to($animWidget2, 0.3, {scale:1 , opacity:1 }) + .to($animWidget3, 0.3, {scale:1 , opacity:1 }) + .to($animWidget4, 0.3, {scale:1 , opacity:1 }, '-=.2') + .to($animWidget5, 0.3, {scale:1 , opacity:1 }, '-=.2') + .to($animWidget6, 0.3, {scale:1 , opacity:1 }, '-=.2') + .to($animWidget7, 0.3, {scale:1 , opacity:1 }, '-=.5') + .to($overlay, 0.3, {opacity:1, ease:Power2.easeInOut }, '3.5') + .to($widgetsIcons, 0.4, {scale:1, ease:Bounce.easeInOut }, '3.6'); + + // An array to stock our timelines, relative to each sections + var tl = []; + // First Section + tl[0] = new TimelineMax(); + tl[0] + .to($widgetsTooltips, 2, {opacity:0}) + .to($widgets, 8, {z:400, opacity:0}) + .to($animWidget1, 8, {y:-350 }, '-=8') + .to($animWidget3, 8, {x:-200, y:-50 }, '-=8') + .to($animWidget4, 8, {x:-200 }, '-=8') + .to($animWidget5, 8, {x:-200, y:50 }, '-=8') + .to($animWidget6, 8, {x:-200, y:200 }, '-=8') + .to($animWidget7, 8, {y:350 }, '-=8') + .to($anim, 8, {opacity:1, scale:1, rotationX:0, rotationZ:0, ease:Power2.easeInOut}, '-=8') + .to($illusSync, 4, {opacity:1}, '-=4') + .to($spaceOverlay, 8, {backgroundColor:'#00B6BA' }, '0'); + + // Second Section + tl[1] = new TimelineMax(); + tl[1] + .to($widgets, 0.2, {x:0, y:0, z:0, scale:0 }) + .to($illusSync, 3, {scale:0, opacity:0}, '+=3') + .to($anim, 3, {scale:0.5 }, '-=3') + .to($screenshotWebsite, 4, {opacity:0}, '-=5') + .to('#anim > .widget', 2, {opacity:1, scale:1}) + .to('#screen-1', 3, {opacity:1}) + .to('#screen-1 .widget', 5, {opacity:1, scale:1},'-=2') + .to('#screen-2', 3, {opacity:1}) + .to('#screen-2 .widget', 5, {opacity:1, scale:1},'-=2') + .to('#screen-3', 3, {opacity:1}) + .to('#screen-3 .widget', 5, {opacity:1, scale:1},'-=2') + .to($spaceOverlay, 8, {backgroundColor:'#F6624E' }, '0'); + + // Third Section + tl[2] = new TimelineMax(); + tl[2] + .to($anim, 10, {scale:1, y:100, rotationX:20, rotationZ:-6, ease:Power2.easeInOut }) + .to($screens, 5, {opacity:0}, '-=8') + .to($animWidget5, 4, {z:200}) + .to($animWidget5, 4, {rotationY:180, backgroundColor:'#674492'}, '-=2') + .to($animWidget5, 4, {z:0}) + .to($spaceOverlay, 8, {backgroundColor:'#674492' }, '0'); + + // Fourth Section + tl[3] = new TimelineMax(); + tl[3] + .to($anim, 12, {y:-400, rotationX:60}, '2s') + .to($anim, 4, {opacity:0}, '5'); + + // Create a scene for every window + var scenes = []; + for (var i=0; i 200) res += 30 * Math.max((Math.min(x, 800) - 200), 0); + if (x > 1100) res += 30 * Math.max((Math.min(x, 1700) - 1100), 0); + if (x > 2000) res += 30 * Math.max((Math.min(x, 2600) - 2000), 0); + return res / 100;/// 100; + }; + var currentTSpring = 0; + var previousTSping = null; + var render = function () { + requestAnimationFrame( render ); + + var dt = timelineMap(window.scrollY); + + currentTSpring += (dt - currentTSpring) / 10; + if ((dt + epsilon) > currentTSpring && (dt - epsilon) < currentTSpring) currentTSpring = dt; + + if (previousTSping === currentTSpring) return; + previousTSping = currentTSpring; + + var angle = currentTSpring/60; + + particleSystem.rotation.y = -angle; + renderer.render(scene, camera); + }; + + render(); + $space.className = 'loaded'; + }); + document.body.appendChild(threeScript); +}); + + +// Banner Marketing +function banner() { + let header = document.querySelector('.ac-nav'); + let banner = document.querySelector('.marketing-banner'); + let bannerHeight = banner.offsetHeight; + let headerHeight = header.offsetHeight; + let close = document.querySelector('.banner-close'); + + let inThreeMonth = new Date(); + inThreeMonth.setMonth(inThreeMonth.getMonth() + 3); + + // Cookies === js-cookie https://github.com/js-cookie/js-cookie + if (Cookies.get('showReactBanner') === undefined) { + Cookies.set('showReactBanner', true, {expires: 30}); // days + } + + /* Second security - force banner to offset */ + banner.style.webkitTransform = `translateY(-${bannerHeight}px)`; + banner.style.transform = `translateY(-${bannerHeight}px)`; + + /* Open banner after X seconds */ + if ( Cookies.getJSON('showReactBanner') === true) { + setTimeout( () => { + banner.style.webkitTransform = `translateY(${headerHeight}px)`; + banner.style.transform = `translateY(${headerHeight}px)`; + }, 200); + } + + /* Close banner if cross clicked */ + close.addEventListener('click', () => { + if (Cookies.getJSON('showReactBanner') === true) { // handle multiple clicks + banner.style.webkitTransform = `translateY(-${bannerHeight}px)`; + banner.style.transform = `translateY(-${bannerHeight}px)`; + Cookies.set('showReactBanner', false, {expires: 30}); + } + }); +} +banner(); diff --git a/docs/_assets/javascripts/responsiveNavigation.js b/docs/_assets/javascripts/responsiveNavigation.js new file mode 100644 index 0000000000..3bb72415cc --- /dev/null +++ b/docs/_assets/javascripts/responsiveNavigation.js @@ -0,0 +1,25 @@ +function responsiveNavigation() { + var navigation = document.querySelector('.ac-nav'); + var links = navigation.querySelectorAll('a'); + var navigationAsSelect = document.createElement('select'); + + if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { + navigationAsSelect.classList.add('display-on-small', 'device'); + } else { + navigationAsSelect.classList.add('display-on-small'); + } + + for( var i = 0; i' + item.category + '
    '); + } + html.push('
    '); + html.push('
    ' + (item.isSubcategoryHeader ? item.subcategory : '') + '
    '); + html.push('
    '); + html.push('
    ' + (item.title || '') + '
    '); + html.push('
    ' + (item.text || '') + '
    '); + html.push('
    '); + html.push('
    '); + return html.join(' '); + } + } + }; + + $searchInput.autocomplete({ + hint: false, + autoselect: true + }, dataset) + .on('autocomplete:selected', goToSuggestion); +})($); diff --git a/docs/_assets/stylesheets/_animation.scss b/docs/_assets/stylesheets/_animation.scss new file mode 100644 index 0000000000..525e1d6960 --- /dev/null +++ b/docs/_assets/stylesheets/_animation.scss @@ -0,0 +1,50 @@ +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + + +@keyframes fadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + } +} + + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + + +@keyframes arrow { + from { + opacity: 0; + transform: translateY(-16px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + + +@keyframes dash { + to { + stroke-dashoffset: 700; + } +} + diff --git a/docs/_assets/stylesheets/_base.scss b/docs/_assets/stylesheets/_base.scss new file mode 100644 index 0000000000..183c6585f8 --- /dev/null +++ b/docs/_assets/stylesheets/_base.scss @@ -0,0 +1,42 @@ +$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +$font-size-base: 14px; + +$headings-font-family: "Raleway"; +$headings-font-weight: 300; + +$brand-primary: #1D96C7; +$code-color: #65717D; + +$text-color: rgba(#000000, .75); + +$anchor-offset: 70px; +$community-color: #674492; +$success-color: #58D158; +$gray-light: #F3F3F3; +$dark-blue: #0D1D30; +$light-blue: lighten($dark-blue, 70%); + +$secondary-color: #008000; + + +// Breakpoints +$bp-huge: 2000px; +$bp-big: 1440px; +$bp-medium: 960px; +$bp-small: 768px; + +// Dimensions +$max-container-width: 940px; +$navigation-height: 50px; +$margin: 16px; + +// Colors +$red-pink: #FB366E; +$steel: #788795; +$black: #0A1724; +$white-75: rgba(#FFFFFF, .75); + +// Fonts +$font-name: "Raleway"; +$font-fallback: Helvetica Neue, helvetica; +$font-settings: $font-name, $font-fallback; diff --git a/docs/_assets/stylesheets/_bootstrap.scss b/docs/_assets/stylesheets/_bootstrap.scss new file mode 100644 index 0000000000..a4f32fa81e --- /dev/null +++ b/docs/_assets/stylesheets/_bootstrap.scss @@ -0,0 +1,56 @@ +/*! + * Bootstrap v3.3.5 (http://getbootstrap.com) + * Copyright 2011-2015 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ + +// Core variables and mixins +@import "bootstrap/variables"; +@import "bootstrap/mixins"; + +// Reset and dependencies +@import "bootstrap/normalize"; +// @import "bootstrap/print"; +// @import "bootstrap/glyphicons"; + +// Core CSS +@import "bootstrap/scaffolding"; +@import "bootstrap/type"; +@import "bootstrap/code"; +@import "bootstrap/grid"; +// @import "bootstrap/tables"; +@import "bootstrap/forms"; +@import "bootstrap/buttons"; + +// Components +@import "bootstrap/component-animations"; +// @import "bootstrap/dropdowns"; +// @import "bootstrap/button-groups"; +@import "bootstrap/input-groups"; +@import "bootstrap/navs"; +@import "bootstrap/navbar"; +// @import "bootstrap/breadcrumbs"; +// @import "bootstrap/pagination"; +// @import "bootstrap/pager"; +// @import "bootstrap/labels"; +// @import "bootstrap/badges"; +// @import "bootstrap/jumbotron"; +// @import "bootstrap/thumbnails"; +// @import "bootstrap/alerts"; +// @import "bootstrap/progress-bars"; +// @import "bootstrap/media"; +// @import "bootstrap/list-group"; +// @import "bootstrap/panels"; +// @import "bootstrap/responsive-embed"; +// @import "bootstrap/wells"; +// @import "bootstrap/close"; + +// Components w/ JavaScript +// @import "bootstrap/modals"; +// @import "bootstrap/tooltip"; +// @import "bootstrap/popovers"; +// @import "bootstrap/carousel"; + +// Utility classes +@import "bootstrap/utilities"; +@import "bootstrap/responsive-utilities"; diff --git a/docs/_assets/stylesheets/_debug.scss b/docs/_assets/stylesheets/_debug.scss new file mode 100644 index 0000000000..7cc5b87d42 --- /dev/null +++ b/docs/_assets/stylesheets/_debug.scss @@ -0,0 +1,93 @@ +// debug +.debug-widget { + position: relative; + &.widget-container { + &:after { + z-index: 11; + border: 0; + } + } + > [class^=ais-] { + outline: 1px solid #660000; + &:before { + content: "." attr(class); + text-align: right; + white-space: nowrap; + font-size: 11px; + z-index: 10; + position: absolute; + top: 0; + right: 0; + left: 0; + padding: 4px 6px; + line-height: 1em; + background-color: $gray-light; + color: #660000; + } + } + [class^=ais-] { + cursor: pointer; + padding: 4px; + &:hover { + outline: 1px solid #660000; + &:before { + content: "." attr(class); + text-align: right; + white-space: nowrap; + font-size: 12px; + font-weight: bold; + z-index: 10; + position: absolute; + top: 0; + right: 0; + left: 0; + padding: 4px 6px; + line-height: 1em; + background-color: $gray-light; + color: #660000; + } + } + [class^=ais-] { + &:hover { + outline: 1px solid #990000; + &:before { + color: #990000; + } + } + [class^=ais-] { + &:hover { + outline: 1px solid #CC3300; + &:before { + color: #CC3300; + } + } + [class^=ais-] { + &:hover { + outline: 1px solid #FF6600; + &:before { + color: #FF6600; + } + } + } + } + } + label { + &:hover { + // hovering a label containing a input forwards the `:hover` state to the input + // let's hide it except when you focus/activate it + [class^=ais-] { + &:hover { + &:before { + display: none; + } + } + &:focus, &:active { + &:before { + display: block; + } + } + } + } + } + } +} diff --git a/docs/_assets/stylesheets/_documentation.scss b/docs/_assets/stylesheets/_documentation.scss new file mode 100644 index 0000000000..c4a14982ba --- /dev/null +++ b/docs/_assets/stylesheets/_documentation.scss @@ -0,0 +1,527 @@ +code { + word-wrap: break-word; +} + +// Navigation +.widget-nav { + padding: 0; + padding-left: 15px; + font-weight: lighter; + background-color: $gray-light; + position: fixed; + @include position($navbar-height, null, 0, 0); +} + +.documentation-menu { + height: 100%; + overflow-y: auto; + padding: 0; + font-size: 1.2em; + font-weight: bold; + > ul { + line-height: 2em; + list-style: none; + margin: 0; + padding: 15px 0; + ul ul li { + font-weight: normal; + &:before { + display: inline-block; + content: ""; + width: 8px; + height: 8px; + background-color: $brand-primary; + border-radius: 1px; + margin-right: 4px; + } + } + a { + color: #242424; + &:hover { + color: $brand-primary; + text-decoration: none; + } + } + ul { + font-size: .85em; + padding: 0 0 5px 10px; + line-height: 1.7em; + list-style: none; + } + } +} + +// Left panel +.widget-description { + padding-right: 0; +} + +.main-documentation { + height: 100%; + padding-top: $navbar-height; + .description { + min-height: 84px; + } +} + +.shameless-marketing { + float: right; + width: 43%; + color: rgba(#FFFFFF, .75); + font-size: .9em; + img { + position: relative; + } + .sticker { + @include size(60px, 60px); + margin: 0 auto; + border-radius: 50%; + opacity: 0; + animation: arrow 1s ease-in-out; + animation-fill-mode: forwards; + border: solid 2px rgba(#FFFFFF, .5); + margin-bottom: 10px; + p { + height: 100%; + padding: 0; + margin: 0; + } + img { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } + .sticker-algolia { + animation-delay: .5s; + margin-top: -2px; + } + .sticker-open-source { + animation-delay: 1s; + } + .sticker-ux { + animation-delay: 1.5s; + } +} + +.documentation-content { + padding: 30px; + font-size: 14px; + color: rgba(0, 0, 0, .75); + p { + line-height: 1.8em; + } + h1, h2, h3 { + &[id] { + clear: both; + } + } + h1, h2, h3, h4, h5 { + &[id] { + &:before { + content: ""; + display: block; + height: $anchor-offset; + margin: -$anchor-offset 0 0; + } + } + .anchor { + display: inline-block; + font-size: .7em; + visibility: hidden; + padding-right: .2em; + margin-top: -.5em; + color: inherit; + &:hover, &:active, &:focus { + color: inherit; + text-decoration: none; + } + } + &:hover { + .anchor { + visibility: visible; + } + } + } + > p, > h1, > h2, > h3, > h4, > h5, > pre, > .highlight, > ul, > .row { + margin-right: 50%; + max-width: 50%; + } + > div { + &[id] { + margin-right: 50%; + max-width: 50%; + } + } + ul { + padding: 0 10px 0 30px; + } + li { + padding-bottom: 6px; + } + .highlight, .row .highlight { + pre { + border: 0; + .o { + color: inherit; + } + } + } + h2, .h2 { + margin-top: 3em; + font-size: 2em; + font-weight: normal; + text-transform: uppercase; + clear: both; + &:first-child { + margin-top: 0; + } + } + h3, .h3 { + margin: 2em 0 .8em; + font-size: 1.7em; + font-weight: bold; + clear: both; + } + h4, .h4 { + border-bottom: dashed 1px #CCCCCC; + padding: 0 0 8px; + margin: 2em 0 1em; + font-size: 1.3em; + font-weight: bold; + clear: both; + } + code { + background-color: #F3F3F3; + border: 1px solid darken(#F3F3F3, 7%); + color: $code-color; + font-weight: bold; + } + .code-box { + .text-#FFFFFF code { + color: #FFFFFF; + } + code { + background: transparent; + border: 0; + font-weight: normal; + } + } + .version { + font-size: .9em; + margin-top: 2em; + strong { + color: #FFFFFF; + } + } +} + +.widget-icon { + margin: 4px 20px 20px 0; +} + +.html-container { + border: 0; + color: #A3B6CB; + padding: 9.5px; + margin: 0 0 10px; + background-color: #0A1724; + word-wrap: normal; + white-space: pre; + overflow-x: auto; +} + +.widget-container { + padding: 50px 40px 40px; + border: solid 1px #E4E4E4; + border-radius: 5px; + position: relative; + overflow-x: hidden; + clear: left; + &:after { + font-size: 11px; + content: "Widget display"; + top: 0; + left: 0; + color: #999999; + padding: 4px 6px; + line-height: 1em; + position: absolute; + background-color: $gray-light; + border: solid 1px #E4E4E4; + border-width: 0 1px 1px 0; + border-radius: 5px 0 3px; + } +} + +.codebox-combo { + clear: both; + & > p, & > ul { + float: left; + max-width: 50%; + clear: left; + } + .code-box { + float: right; + } +} + +// Code box + +.code-samples { + background-color: #172C4F; + background: linear-gradient(to bottom, #0A1724 0%, #172C4F 100%); + position: absolute; + width: 46%; + @include position(0, 0, 0, null); +} + +.code-box { + position: relative; + width: 44%; + float: right; + clear: right; + .btn-group { + position: absolute; + right: 0; + top: -3em; + .toggle-doc-button { + text-align: right; + color: $brand-primary; + background-color: #0A1724; + border: 0; + transition: color .2s, background-color .2s; + &:hover, + &:active, + &:focus { + color: #FFFFFF; + outline: 0; + } + &.active { + color: #FFFFFF; + background: #163350; + } + } + } + .copy-btn { + display: block; + position: absolute; + right: 5px; + top: 5px; + opacity: 0; + font-size: .9em; + background-color: rgba($brand-primary, .1); + border: 0; + text-transform: uppercase; + color: rgba(#FFFFFF, .4); + transition: opacity .2s; + &:active, &:focus { + outline: 0; + } + &:active { + color: #0A1724; + background-color: $brand-primary; + border-color: #0A1724; + } + } + &:hover { + .copy-btn { + display: block; + opacity: 1; + } + } + .jsdoc { + border: 0; + color: #A3B6CB; + padding: 9.5px; + margin: 0 0 10px; + background-color: #0A1724; + code { + background-color: #0A1724; + } + .attr-name { + margin: 10px 0 0; + cursor: help; + .show-description { + padding: 0 6px; + background: #132F49; + margin-left: 3px; + font-weight: bold; + } + &:hover .show-description { + color: #FFF; + } + .attr-required, .attr-optional.important { + .show-description { + display: none; + } + } + } + .attr-optional code { + color: #46AEDA; + } + .attr-required code { + color: $success-color; + } + .attr-infos { + font-size: .8em; + margin-left: 10px; + float: right; + } + .attr-description { + margin: -5px 0 0; + display: none; + clear: both; + + &.important { + display: block; + } + } + h5 { + text-decoration: underline; + color: #DDDDDD; + } + pre { + background: transparent; + border: 0; + padding: 0; + margin-bottom: 1.5em; + } + table { + table-layout: fixed; + margin-top: 1em; + width: 100%; + th { + font-size: 11px; + font-weight: bold; + text-transform: uppercase; + border-bottom: solid 1px #758393; + } + td { + padding: .5em; + border-bottom: solid 1px #162B50; + code { + color: #FFFFFF; + } + } + } + .attr-legend { + padding: 10px; + margin: 0; + text-align: right; + span { + font-size: 10px; + color: #58D158; + } + } + } + .requirements { + display: none; + border: 0; + color: #A3B6CB; + padding: 9.5px; + margin: 0 0 10px; + background-color: #0A1724; + code { + font-size: 1em; + background: none; + color: #58D158; + } + } +} + +// Widgets +#q input { + width: 100%; + padding: 2px 3px; +} + +.ais-hierarchical-menu--item__active > div > a, +.ais-menu--item__active > div > a, +.ais-pagination--item__active a { + font-weight: bold; + color: #0A1724; +} + + +@media (max-width: $screen-sm-max) { + .main-documentation { + padding: 60px 0 0; + .row { + margin: 0; + } + img { + max-width: 100%; + } + } + .documentation-content { + padding: 60px 0 0; + font-size: .95em; + } + .toc-menu { + position: fixed; + top: $navbar-height; + left: 0; + width: 100%; + background: $gray-light; + padding: 8px 10px; + z-index: 2; + } + .widget-description { + p, h1, h2, h3, h4 { + padding: 0 0 0 20px; + } + } +} + +@media (max-width: $screen-xs-max) { + .widget-container { + clear: both; + } + .code-box { + width: 100%; + background: #172C4F; + margin-bottom: 1em; + .btn-group { + position: static; + } + .copy-btn { + display: none; + visibility: hidden; + } + .btn-group { + .toggle-doc-button { + background: #163350; + &.active { + background: #0A1724; + } + } + } + .jsdoc { + margin: 0; + } + } + .widget-description { + padding: 0; + p, h1, h2, h3, h4, ul, .highlight { + margin-right: 0; + width: 100%; + max-width: 100%; + } + p, h1, h2, h3, h4 { + padding: 9.5px; + } + div { + &[id] { + margin-right: 0; + width: 100%; + max-width: 100%; + } + } + } + .highlight pre { + margin: 0; + border-radius: 0; + } +} diff --git a/docs/_assets/stylesheets/_examples.scss b/docs/_assets/stylesheets/_examples.scss new file mode 100644 index 0000000000..ab7ad54c71 --- /dev/null +++ b/docs/_assets/stylesheets/_examples.scss @@ -0,0 +1,11 @@ +@media (max-width: 600px) { + .link-thumbnail { + width: 100%; + } +} + +@media (max-width: 450px) { + .link-thumbnail { + text-align: center; + } +} diff --git a/docgen/src/stylesheets/components/_footer.scss b/docs/_assets/stylesheets/_footer.scss old mode 100755 new mode 100644 similarity index 85% rename from docgen/src/stylesheets/components/_footer.scss rename to docs/_assets/stylesheets/_footer.scss index 734e0ad97a..5c84892309 --- a/docgen/src/stylesheets/components/_footer.scss +++ b/docs/_assets/stylesheets/_footer.scss @@ -1,27 +1,35 @@ +.site-footer { + padding-top: 2em; + margin-top: 0; + border-top: 1px solid $gray-lighter; + background-color: #FFFFFF; + text-align: center; + .fa.fa-heart { + color: #E61870; + } + .input-group-addon { + background-color: transparent; + } +} .ac-footer { - min-height: 550px; - float: left; - width: 100%; - min-height: 830px !important; + min-height: 830px; position: relative; text-align: center; color: $white-75; - background-color: #263748; - background-image: url("../images/background_footer.svg"); + background-color: #1D3657; + background-image: url(asset_path("../images/background_footer.svg")); background-repeat: no-repeat; background-position: center center; background-size: 1420px; - font-family: $font-settings !important; + font-family: $font-settings; font-weight: 600; box-sizing: border-box; - z-index: 10; p { font-size: 12px; + font-weight: 300; color: $white-75; - font-family: $font-settings !important; - line-height: inherit; } .ac-footer-brand { @@ -34,10 +42,9 @@ left: 50%; transform: translate(-50%, -50%); - &:hover { .ac-icon-love-dark { - background: url("../images/icon-heart-light.svg")no-repeat center center / contain; + background: url(asset_path("../images/icon-heart-light.svg"))no-repeat center center / contain; } } @@ -77,7 +84,6 @@ width: 100%; padding: 1em 0; float: left; - margin: 0; br { @media (min-width: 960px) { @@ -89,7 +95,7 @@ .ac-footer-link-item { font-size: 12px; - color: $nice-blue; + color: $red-pink; font-weight: 400; margin-left: $margin; text-decoration: none; @@ -129,11 +135,11 @@ background: $black; position: absolute; bottom: 0; - min-height: $nav-height; + min-height: $navigation-height; p { display: inline; - line-height: $nav-height; + line-height: $navigation-height; padding: 0; margin: 0; font-size: 14px; @@ -203,13 +209,13 @@ } - .ac-footer-btn-ghost-blue { - color: $accent-color-darkish; + .ac-footer-btn-ghost-pink { + color: $red-pink; &:hover { - background: $accent-color-darkish; - border-color: $accent-color-darkish; - color: #fff; + background: $red-pink; + border-color: $red-pink; + color: #FFFFFF; } } @@ -223,7 +229,7 @@ margin: auto; } .ac-icon-love-dark { - background: url("../images/icon-heart-dark.svg")no-repeat center center / contain; + background: url(asset_path("../images/icon-heart-dark.svg"))no-repeat center center / contain; } } @@ -242,7 +248,7 @@ display: block; } - .ac-footer-links:nth-child(3):before { + .ac-footer-link-item:nth-child(3):before { display: none; } } @@ -284,9 +290,11 @@ box-shadow: 0 0 0 0 rgba($red-pink, .4); } 70% { + box-shadow: 0 0 0 30px rgba($red-pink, 0); } 100% { + box-shadow: 0 0 0 0 rgba($red-pink, 0); } } diff --git a/docs/_assets/stylesheets/_header.scss b/docs/_assets/stylesheets/_header.scss new file mode 100644 index 0000000000..00446533a2 --- /dev/null +++ b/docs/_assets/stylesheets/_header.scss @@ -0,0 +1,216 @@ +.ac-nav { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: $navigation-height; + padding: 0 16px; + margin: 0; + line-height: $navigation-height; + z-index: 101; + font-family: $font-settings; + box-sizing: border-box; + color: #FFFFFF; + background: $black; + font-weight: 400; + + a { + color: #FFFFFF; + text-decoration: none; + } + + .ac-nav-container { + width: 100%; + height: $navigation-height; + margin: auto; + line-height: $navigation-height; + + @media (min-width: $bp-huge) { + max-width: calc(#{$max-container-width} + 260px); + } + + @media (max-width: $bp-big) { + max-width: 100%; + } + } + + .ac-nav-brand, + .ac-nav-menu { + max-height: 50px; + } + + .ac-nav-brand { + float: left; + } + .ac-nav-menu { + float: right; + } + + .ac-logo { + padding-left: 8px; + font-size: 26px; + font-weight: 100; + vertical-align: sub; + + @media (max-width: $bp-medium) { + padding: 0; + display: inline-block; + max-width: 30px; + } + + .ac-logo__lg, + .ac-logo__sm { + position: relative; + top: -2px; + width: 200px; + margin-right: 6px; + vertical-align: middle; + + &.ac-logo__sm { + width: 34px; + display: none; + visibility: hidden; + + @media (max-width: $bp-medium) { + display: inline-block; + visibility: visible; + } + } + + &.ac-logo__lg { + @media (max-width: $bp-medium) { + display: none; + } + } + } + } + + .ac-nav-brand-title { + position: relative; + font-size: 1.2em; + font-weight: 400; + vertical-align: middle; + padding-left: 8px; + top: -2px; + + @media (max-width: $bp-medium) { + padding-left: 0; + font-size: 1em; + } + } + + .ac-nav-menu svg { + position: relative; + } + + .ac-nav-searchbox { + float: left; + width: auto; + height: $navigation-height; + + .searchbox { + } + + .searchbox__submit svg { + width: 12px; + height: 12px; + vertical-align: middle; + top: -1px; + } + + .searchbox__input { + position: relative; + vertical-align: top; + line-height: 1.2; + font-weight: 500; + background: $black; + } + + .searchbox__input, + .searchbox__submit { + + @media (max-width: $bp-medium) { + display: none; + } + } + } + + .ac-nav-menu-list { + padding: 0; + margin: 0; + float: left; + list-style: none; + max-height: $navigation-height; + + @media (max-width: $bp-medium) { + display: none; + } + + .ac-nav-menu-list-item, + .ac-nav-menu-list-icon { + float: left; + padding: 0 14px; + font-size: 14px; + max-height: $navigation-height; + + &.active { + a { + padding-bottom: 15px; + border-bottom: 2px solid $red-pink; + } + } + + .ac-icon { + height: 50px; + } + } + } + + // Responsive nav + select { + display: none; + visibility: hidden; + position: absolute; + top: 12px; + right: 8px; + font-size: 16px; + color: #000; + + + &:not(.device) { + background: linear-gradient(#EFEFEF, #CCCCCC); + color: $black; + } + + @media (max-width: $bp-medium) { + display: inline-block; + visibility: visible; + max-width: 130px; + } + } + + + + .ac-nav-brand-breadcrumb { + display: inline-block; + width: 24px; + height: $navigation-height; + + background: url(asset_path("../images/icon-arrow-pipe.svg"))no-repeat center center / 20px 20px; + vertical-align: middle; + margin-top: -4px; + } + + .ac-icon { + display: inline-block; + position: relative; + width: 26px; + height: 36px; + margin: auto; + vertical-align: sub; + + &.ac-icon-github { + background: url(asset_path("../images/icon-github.svg"))no-repeat center center / contain; + } + } +} diff --git a/docs/_assets/stylesheets/_helper.scss b/docs/_assets/stylesheets/_helper.scss new file mode 100644 index 0000000000..395c705f80 --- /dev/null +++ b/docs/_assets/stylesheets/_helper.scss @@ -0,0 +1,531 @@ +//spacer +@mixin spacer { + width: 100%; + font-size: 0; + margin: 0; + padding: 0; + border: 0; + display: block; +} + +.spacer5 { + @include spacer; + height: 5px; +} + +.spacer10 { + @include spacer; + height: 10px; +} + +.spacer15 { + @include spacer; + height: 15px; +} + +.spacer20 { + @include spacer; + height: 20px; +} + +.spacer25 { + @include spacer; + height: 25px; +} + +.spacer30 { + @include spacer; + height: 30px; +} + +.spacer35 { + @include spacer; + height: 35px; +} + +.spacer40 { + @include spacer; + height: 40px; +} + +.spacer45 { + @include spacer; + height: 45px; +} + +.spacer50 { + @include spacer; + height: 50px; +} + +.spacer60 { + @include spacer; + height: 60px; +} + +.spacer80 { + @include spacer; + height: 80px; +} + +.spacer100 { + @include spacer; + height: 100px; +} + +.spacer200 { + @include spacer; + height: 200px; +} + +//width +.w100 { + width: 100px; +} + +.w150 { + width: 150px; +} + +.w200 { + width: 200px; +} + +.m100 { + max-width: 100px; +} + +.m200 { + max-width: 200px; +} + +.m300 { + max-width: 300px; +} + +.m400 { + max-width: 400px; +} + +.m500 { + max-width: 500px; +} + +.m600 { + max-width: 600px; +} + +.m700 { + max-width: 700px; +} + +.m800 { + max-width: 800px; +} + +.m900 { + max-width: 900px; +} + +.m1000 { + max-width: 1000px; +} + +.m1200 { + max-width: 1200px; +} + +.m100p { + max-width: 100%; +} + +//height +.h100 { + height: 100px; +} + +.h200 { + height: 200px; +} + +.h300 { + height: 300px; +} + +.h500 { + height: 500px; +} + +.hfull { + height: 100%; +} + +// positions +.pos-rel { + position: relative; +} + +.pos-stc { + position: static; +} + +.pos-abt { + position: absolute; +} + +//font size +.text-xxl { + font-size: 50px; +} + +.text-xl { + font-size: 32px; +} + +.text-lg { + font-size: 20px; +} + +.text-sm { + font-size: 12px; +} + +.text-xs { + font-size: 10px; +} + +// pull +.pull-in { + margin-left: -15px; + margin-right: -15px; +} + +.pull-out { + margin: -15px; +} + +//borders +.b-t { + border-top: 1px solid $secondary-color; +} + +.b-r { + border-right: 1px solid $secondary-color; +} + +.b-b { + border-bottom: 1px solid $secondary-color; +} + +.b-l { + border-left: 1px solid $secondary-color; +} + +//padding +.padder { + padding: 0 15px; +} + +.p-small { + padding: 10px; +} + +.p-large { + padding: 20px; +} + +.p-xlarge { + padding: 30px; +} + +.p-l-large { + padding-left: 20px; +} + +.p-l-xlarge { + padding-left: 30px; +} + +.p-r-large { + padding-right: 20px; +} + +.p-r-xlarge { + padding-right: 30px; +} + +.p-l-xxlarge { + padding-left: 60px; +} + +.p-r-xxlarge { + padding-right: 60px; +} + +//margin +.m-l-r-auto { + margin-left: auto; + margin-right: auto; +} + +.m-l { + margin-left: 15px; +} + +.m-l-none { + margin-left: 0; +} + +.m-l-mini { + margin-left: 5px; +} + +.m-l-small { + margin-left: 10px; +} + +.m-l-large { + margin-left: 20px; +} + +.m-l-n { + margin-left: -15px; +} + +.m-l-n-mini { + margin-left: -5px; +} + +.m-l-n-small { + margin-left: -10px; +} + +.m-l-n-large { + margin-left: -20px; +} + +.m-t { + margin-top: 15px; +} + +.m-t-none { + margin-top: 0; +} + +.m-t-mini { + margin-top: 5px; +} + +.m-t-small { + margin-top: 10px; +} + +.m-t-large { + margin-top: 20px; +} + +.m-t-n { + margin-top: -15px; +} + +.m-t-n-xmini { + margin-top: -1px; +} + +.m-t-n-mini { + margin-top: -5px; +} + +.m-t-n-small { + margin-top: -10px; +} + +.m-t-n-large { + margin-top: -20px; +} + +.m-r { + margin-right: 15px; +} + +.m-r-none { + margin-right: 0; +} + +.m-r-mini { + margin-right: 5px; +} + +.m-r-small { + margin-right: 10px; +} + +.m-r-large { + margin-right: 20px; +} + +.m-r-n { + margin-right: -15px; +} + +.m-r-n-mini { + margin-right: -5px; +} + +.m-r-n-small { + margin-right: -10px; +} + +.m-r-n-large { + margin-right: -20px; +} + +.m-b { + margin-bottom: 15px; +} + +.m-b-none { + margin-bottom: 0; +} + +.m-b-mini { + margin-bottom: 5px; +} + +.m-b-small { + margin-bottom: 10px; +} + +.m-b-large { + margin-bottom: 20px; +} + +.m-b-n { + margin-bottom: -15px; +} + +.m-b-n-mini { + margin-bottom: -5px; +} + +.m-b-n-small { + margin-bottom: -10px; +} + +.m-b-n-large { + margin-bottom: -20px; +} + +// text +.text-justify { + text-align: justify; +} + +.vertical-align-middle { + display: inline-block !important; + vertical-align: middle !important; +} + +.text-ellipsis { + white-space: nowrap; + overflow: hidden; + max-width: 100%; + text-overflow: ellipsis; +} + +.text-break-word { + word-wrap: break-word; +} + +.nowrap { + word-wrap: nowrap; + white-space: nowrap; +} + +//line +.line { + width: 100%; + height: 1px; + margin: 10px 0; + font-size: 0; + overflow: hidden; + border-width: 0; + background-color: $secondary-color; +} + +.line-dashed { + border-style: dashed; + background: transparent; +} + +.no-line { + border-width: 0; +} + +.no-border { + border-color: transparent !important; +} + +.no-radius { + border-radius: 0; +} + +.block { + display: block; +} + +.inline { + display: inline-block; +} + +.pull-none { + float: none; +} + +.line-v { + border-left: 1px solid #DDDDDD; + padding-left: 20px; +} + +.line-v-right { + border-right: 1px solid #DDDDDD; + padding-right: 20px; +} + +// others +.clickable { + cursor: pointer; +} + +.content-box { + @include box-sizing(content-box); +} + +.faded { + opacity: .3; +} + +// CSS for and +sub, sup { + font-size: 50%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -.7em; +} + +sub { + bottom: -.25em; +} + +.text-white { + color: #FFFFFF; +} + +.bg-white { + background-color: #FFFFFF; +} + diff --git a/docs/_assets/stylesheets/_home.scss b/docs/_assets/stylesheets/_home.scss new file mode 100644 index 0000000000..be7c3cd38e --- /dev/null +++ b/docs/_assets/stylesheets/_home.scss @@ -0,0 +1,318 @@ +html, body { + position: relative; + @include size(100%, 100%); + background-attachment: fixed; +} + +h2 { + font-size: 1.8em; + font-weight: normal; + letter-spacing: 1px; + margin-bottom: 1em; +} + +.lead { + font-size: 1.2em; + opacity: .8; + font-weight: 300; +} + +#space { + position: fixed; + top: 0; + left: 0; + z-index: -1; + opacity: 0; + transition: opacity ease-in-out 3s; + &.loaded { + opacity: 1; + } +} + +#space-overlay { + position: fixed; + @include size(100%, 100%); + top: 0; + left: 0; + z-index: -2; + background: linear-gradient(-30deg, rgba(#182848, .4) 0%, rgba(#182848, 1) 90%) #1D96C7; + &:after { + content: ""; + display: block; + @include size(64px, 19px); + position: fixed; + z-index: 99; + bottom: 24px; + left: 50%; + margin-left: -32px; + background-size: contain; + animation: arrow 1s ease-in-out infinite alternate; + } +} + +.window { + padding: 400px 0 200px; + width: 100%; + display: block; + color: #FFFFFF; +} + +.hero { + padding-top: 170px; + opacity: 1; +} + +.logo { + + @media (max-width: $bp-medium) { + max-width: 345px; + } + svg { + height: 70px; + } +} + +.vp { + font-size: 1.4em; + font-weight: 300; + color: rgba(#FFFFFF, .7); + a { + color: #FFFFFF; + border-bottom: solid 1px rgba(#1D96C7, .7); + text-decoration: none; + } +} + +.presented-by { + color: rgba(#FFFFFF, .5); + font-size: .9em; + img { + position: relative; + top: -5px; + margin-right: 4px; + } +} +.github-button iframe { + border: none; + overflow: hidden; +} + +#curveUpColor { + z-index: 99; + display: block; + width: 100%; + overflow: hidden; + @media (max-width: 800px){ + height: 40px; + } + path { + fill: #FFFFFF; + } +} + +.illus-wrapper { + min-height: 40px; +} + +#panel-get-started { + background-color: #EFEFEF; + padding: 4em 2em; +} + +.anim-container { + position: fixed; + top: 240px; + width: 100%; + perspective: 700px; + perspective-origin: 55% 75%; + color: #FFFFFF; + pointer-events: none; +} + +#anim-overlay { + position: absolute; + @include position(0, null, null, 0); + z-index: 9999; + opacity: 0; + .widget-intro { + font-weight: 300; + position: absolute; + width: 240px; + img { + position: relative; + float: left; + top: -6px; + } + } + .w-1 { + @include position(-60px, null, null, 340px); + } + .w-2 { + @include position(440px, null, null, 60px); + } + .w-3 { + @include position(-40px, null, null, 40px); + } + .w-4 { + @include position(140px, null, null, 450px); + } +} + +.illus-sync { + position: absolute; + @include position(350px, null, null, 350px); + opacity: 0; + .sync-path-out { + stroke-dasharray: 10; + animation: dash 20s linear infinite reverse; + } + .sync-path-in { + stroke-dasharray: 10; + animation: dash 20s linear infinite; + } +} + +// We're using a hack from http://stackoverflow.com/a/27065674 +// for anti-aliasing (`outline: 1px solid transparent`) +#anim { + position: relative; + @include size(420px, 400px); + z-index: 1200; + opacity: 0; + background-color: #FFFFFF; + border-radius: 10px; + perspective: 1200px; + transform-style: preserve-3d; + outline: 1px solid transparent; + img { + border-radius: 10px; + } + .widget { + background-color: rgba(#1D96C7, .4); + position: absolute; + transform-style: preserve-3d; + outline: 1px solid transparent; + } + .legend { + font-size: 1.2em; + border-left: solid 2px #FFFFFF; + padding: 0 0 60px 10px; + } + //searchbox + > .widget-1 { + @include size(280px, 30px); + @include position(10px, 10px); + } + //results + > .widget-2 { + @include size(280px, 270px); + @include position(70px, 10px); + } + //facet + > .widget-3 { + @include size(110px, 50px); + @include position(50px, null, null, 10px); + } + > .widget-4 { + @include size(110px, 70px); + @include position(110px, null, null, 10px); + } + > .widget-5 { + @include size(110px, 110px); + @include position(190px, null, null, 10px); + } + > .widget-6 { + @include size(110px, 80px); + @include position(310px, null, null, 10px); + } + //pagination + > .widget-7 { + @include size(170px, 20px); + @include position(350px, 60px); + } +} + +.screen { + position: absolute; + @include size(420px, 400px); + z-index: 1200; + opacity: 0; + background-color: #FFFFFF; + border-radius: 10px; + outline: 1px solid transparent; +} + +#screen-1 { + @include position(0, null, null, 460px); + //searchbox + .widget-1 { + @include size(400px, 50px); + @include position(10px, 10px); + } + //results + .widget-2 { + @include size(200px, 270px); + @include position(70px, 10px); + } + //facet + .widget-3 { + @include size(190px, 320px); + @include position(70px, null, null, 10px); + } + //pagination + .widget-4 { + @include size(200px, 40px); + @include position(350px, 10px); + } +} + +#screen-2 { + @include position(440px); + //searchbox + .widget-1 { + @include size(400px, 30px); + @include position(10px, 10px); + } + //filters + .widget-2 { + @include size(400px, 30px); + @include position(50px, 10px); + } + //facet + .widget-3 { + @include size(130px, 200px); + @include position(90px, null, null, 10px); + } + //results + .widget-4 { + @include size(260px, 300px); + @include position(90px, 10px); + } +} + +#screen-3 { + @include position(440px, null, null, 460px); + //searchbox + .widget-1 { + @include size(400px, 60px); + @include position(10px, 10px); + } + //map + .widget-2 { + @include size(400px, 180px); + @include position(80px, 10px); + } + //facet + .widget-3 { + @include size(130px, 120px); + @include position(270px, 10px); + } + .widget-4 { + @include size(120px, 120px); + @include position(270px, 150px); + } + .widget-5 { + @include size(130px, 120px); + @include position(270px, 280px); + } +} diff --git a/docs/_assets/stylesheets/_marketing-banner.scss b/docs/_assets/stylesheets/_marketing-banner.scss new file mode 100644 index 0000000000..edb85397b3 --- /dev/null +++ b/docs/_assets/stylesheets/_marketing-banner.scss @@ -0,0 +1,70 @@ +$banner-height: 50px; +$icon-height: $banner-height - 10px; +$banner-background: #6159E1; + +.marketing-banner { + height: $banner-height; + width: 100%; + position: relative; + background: linear-gradient(to bottom right, #69A0F6, $banner-background)no-repeat top left / 150%; + float: left; + line-height: $banner-height; + padding: 0 2em; + box-sizing: border-box; + transform: translateY(-#{$banner-height}); + transition: transform 0.2s ease, background-position 0.2s ease; + + a.banner-close { + position: absolute; + top: 0; + right: 0; + padding: 0 2.5em; + color: #FFFFFF; + text-decoration: none; + opacity: 0.5; + + &:hover { + color: #FB366E; + opacity: 1; + } + } + + &:hover { + background-position: bottom right + } + + .banner__description { + color: #FFFFFF; + text-align: center; + + a { + color: #FFFFFF; + text-decoration: none; + display: block; + width: 100%; + height: 100%; + } + + p { + margin: 0; + padding: 0; + display: inline-block; + + span { + @media (max-width: 765px) { + display: none; + } + } + } + + img { + max-height: $icon-height; + max-width: $icon-height; + vertical-align: middle; + display: inline-block; + margin-left: 1em; + box-shadow: 0 0 10px -4px rgba(white, 0.6); + border-radius: 50%; + } + } +} diff --git a/docs/_assets/stylesheets/_mixin.scss b/docs/_assets/stylesheets/_mixin.scss new file mode 100644 index 0000000000..294c6614e5 --- /dev/null +++ b/docs/_assets/stylesheets/_mixin.scss @@ -0,0 +1,6 @@ +@mixin position($top: null, $right: null, $bottom: null, $left: null) { + top: $top; + right: $right; + bottom: $bottom; + left: $left; +} diff --git a/docs/_assets/stylesheets/_page.scss b/docs/_assets/stylesheets/_page.scss new file mode 100644 index 0000000000..6dbe72e92c --- /dev/null +++ b/docs/_assets/stylesheets/_page.scss @@ -0,0 +1,11 @@ +.main-content { + padding-top: 70px; +} +.page-content { + font-size: 1.1em; + line-height: 1.5em; +} + +.url_about_ { + padding-top: $navigation-height; +} diff --git a/docs/_assets/stylesheets/_search.scss b/docs/_assets/stylesheets/_search.scss new file mode 100644 index 0000000000..d6878a4937 --- /dev/null +++ b/docs/_assets/stylesheets/_search.scss @@ -0,0 +1,85 @@ +// Import Searchbox Settings // +/////////////////////////////// +@import 'docsearch/docsearch'; +@import 'docsearch/searchbox'; + +@include searchbox($searchbox-config...); + + +// Search input in the navbar +.search-form { + position: relative; + top: -2px; + + input { + position: relative; + width: 36px; + height: 36px; + } + + // Main autocomplete wrapper + .aa-dropdown-menu { + background-color: #FFFFFF; + border-radius: 0 0 4px 4px; + box-shadow: 0 0 0 4px rgba($dark-blue, .3); + color: $text-color; + font-size: 14px; + margin: 2px 0 0; + padding: 8px; + text-align: left; + width: 510px; + } + // Suggestion category separator + .suggestion-category { + color: $brand-primary; + border-bottom: solid 2px $brand-primary; + font-size: 15px; + font-weight: bold; + padding: 10px 0 2px; + text-align: left; + } + // Use table display for the two columns + .suggestion { + display: table; + width: 100%; + } + em { + background-color: rgba($brand-primary, .2); + color: $dark-blue; + font-style: normal; + } + .suggestion-subcategory-main { + border-right: 1px solid $brand-primary; + display: table-cell; + max-width: 150px; + min-width: 150px; + overflow: hidden; + padding: 10px 15px 10px 10px; + text-align: right; + text-overflow: ellipsis; + vertical-align: top; + width: 150px; + font-weight: bold; + code { + color: $text-color; + } + } + .suggestion-content { + border-bottom: 1px solid rgba($brand-primary, .2); + cursor: pointer; + display: table-cell; + padding: 10px 15px; + } + .aa-cursor .suggestion-content { + background: rgba($brand-primary, .2); + color: $dark-blue; + } + .suggestion-title { + font-weight: bold; + } + .suggestion-text { + font-size: .9em; + line-height: 1.5em; + color: lighten($gray, 20%); + } +} diff --git a/docs/_assets/stylesheets/_syntax-highlighting.scss b/docs/_assets/stylesheets/_syntax-highlighting.scss new file mode 100644 index 0000000000..8d604bd252 --- /dev/null +++ b/docs/_assets/stylesheets/_syntax-highlighting.scss @@ -0,0 +1,83 @@ +/* Solarized Dark + +For use with Jekyll and Pygments + +http://ethanschoonover.com/solarized + +SOLARIZED HEX ROLE +--------- -------- ------------------------------------------ +base03 #002b36 background +base01 #586e75 comments / secondary content +base1 #93a1a1 body text / default code / primary content +orange #cb4b16 constants +red #dc322f regex, special keywords +blue #268bd2 reserved keywords +cyan #2aa198 strings, numbers +green #859900 operators, other keywords +*/ + +.highlight pre { + background: #0A1724; + border: 0; + color: #A3B6CB; +} +.highlight .hll { background-color: #49483E } +.highlight { color: #f8f8f2 } +.highlight .c { color: #75715E } /* Comment */ +.highlight .err { color: #960050; background-color: #1E0010 } /* Error */ +.highlight .k { color: #66D9EF } /* Keyword */ +.highlight .l { color: #AE81FF } /* Literal */ +.highlight .n { color: #F8F8F2 } /* Name */ +.highlight .o { color: #F92672 } /* Operator */ +.highlight .p { color: #F8F8F2 } /* Punctuation */ +.highlight .cm { color: #75715E } /* Comment.Multiline */ +.highlight .cp { color: #75715E } /* Comment.Preproc */ +.highlight .c1 { color: #75715E } /* Comment.Single */ +.highlight .cs { color: #75715E } /* Comment.Special */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gs { font-weight: bold } /* Generic.Strong */ +.highlight .kc { color: #66D9EF } /* Keyword.Constant */ +.highlight .kd { color: #66D9EF } /* Keyword.Declaration */ +.highlight .kn { color: #F92672 } /* Keyword.Namespace */ +.highlight .kp { color: #66D9EF } /* Keyword.Pseudo */ +.highlight .kr { color: #66D9EF } /* Keyword.Reserved */ +.highlight .kt { color: #66D9EF } /* Keyword.Type */ +.highlight .ld { color: #E6DB74 } /* Literal.Date */ +.highlight .m { color: #AE81FF } /* Literal.Number */ +.highlight .s { color: #E6DB74 } /* Literal.String */ +.highlight .na { color: #A6E22E } /* Name.Attribute */ +.highlight .nb { color: #F8F8F2 } /* Name.Builtin */ +.highlight .nc { color: #A6E22E } /* Name.Class */ +.highlight .no { color: #66D9EF } /* Name.Constant */ +.highlight .nd { color: #A6E22E } /* Name.Decorator */ +.highlight .ni { color: #F8F8F2 } /* Name.Entity */ +.highlight .ne { color: #A6E22E } /* Name.Exception */ +.highlight .nf { color: #A6E22E } /* Name.Function */ +.highlight .nl { color: #F8F8F2 } /* Name.Label */ +.highlight .nn { color: #F8F8F2 } /* Name.Namespace */ +.highlight .nx { color: #A6E22E } /* Name.Other */ +.highlight .py { color: #F8F8F2 } /* Name.Property */ +.highlight .nt { color: #F92672 } /* Name.Tag */ +.highlight .nv { color: #F8F8F2 } /* Name.Variable */ +.highlight .ow { color: #F92672 } /* Operator.Word */ +.highlight .w { color: #F8F8F2 } /* Text.Whitespace */ +.highlight .mf { color: #AE81FF } /* Literal.Number.Float */ +.highlight .mh { color: #AE81FF } /* Literal.Number.Hex */ +.highlight .mi { color: #AE81FF } /* Literal.Number.Integer */ +.highlight .mo { color: #AE81FF } /* Literal.Number.Oct */ +.highlight .sb { color: #E6DB74 } /* Literal.String.Backtick */ +.highlight .sc { color: #E6DB74 } /* Literal.String.Char */ +.highlight .sd { color: #E6DB74 } /* Literal.String.Doc */ +.highlight .s2 { color: #E6DB74 } /* Literal.String.Double */ +.highlight .se { color: #AE81FF } /* Literal.String.Escape */ +.highlight .sh { color: #E6DB74 } /* Literal.String.Heredoc */ +.highlight .si { color: #E6DB74 } /* Literal.String.Interpol */ +.highlight .sx { color: #E6DB74 } /* Literal.String.Other */ +.highlight .sr { color: #E6DB74 } /* Literal.String.Regex */ +.highlight .s1 { color: #E6DB74 } /* Literal.String.Single */ +.highlight .ss { color: #E6DB74 } /* Literal.String.Symbol */ +.highlight .bp { color: #F8F8F2 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #F8F8F2 } /* Name.Variable.Class */ +.highlight .vg { color: #F8F8F2 } /* Name.Variable.Global */ +.highlight .vi { color: #F8F8F2 } /* Name.Variable.Instance */ +.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */ \ No newline at end of file diff --git a/docs/_assets/stylesheets/bootstrap/_alerts.scss b/docs/_assets/stylesheets/bootstrap/_alerts.scss new file mode 100644 index 0000000000..7d1e1fddd1 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_alerts.scss @@ -0,0 +1,73 @@ +// +// Alerts +// -------------------------------------------------- + + +// Base styles +// ------------------------- + +.alert { + padding: $alert-padding; + margin-bottom: $line-height-computed; + border: 1px solid transparent; + border-radius: $alert-border-radius; + + // Headings for larger alerts + h4 { + margin-top: 0; + // Specified for the h4 to prevent conflicts of changing $headings-color + color: inherit; + } + + // Provide class for links that match alerts + .alert-link { + font-weight: $alert-link-font-weight; + } + + // Improve alignment and spacing of inner content + > p, + > ul { + margin-bottom: 0; + } + + > p + p { + margin-top: 5px; + } +} + +// Dismissible alerts +// +// Expand the right padding and account for the close button's positioning. + +.alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0. +.alert-dismissible { + padding-right: ($alert-padding + 20); + + // Adjust close link position + .close { + position: relative; + top: -2px; + right: -21px; + color: inherit; + } +} + +// Alternate styles +// +// Generate contextual modifier classes for colorizing the alert. + +.alert-success { + @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text); +} + +.alert-info { + @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text); +} + +.alert-warning { + @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text); +} + +.alert-danger { + @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text); +} diff --git a/docs/_assets/stylesheets/bootstrap/_badges.scss b/docs/_assets/stylesheets/bootstrap/_badges.scss new file mode 100644 index 0000000000..70002e085b --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_badges.scss @@ -0,0 +1,68 @@ +// +// Badges +// -------------------------------------------------- + + +// Base class +.badge { + display: inline-block; + min-width: 10px; + padding: 3px 7px; + font-size: $font-size-small; + font-weight: $badge-font-weight; + color: $badge-color; + line-height: $badge-line-height; + vertical-align: middle; + white-space: nowrap; + text-align: center; + background-color: $badge-bg; + border-radius: $badge-border-radius; + + // Empty badges collapse automatically (not available in IE8) + &:empty { + display: none; + } + + // Quick fix for badges in buttons + .btn & { + position: relative; + top: -1px; + } + + .btn-xs &, + .btn-group-xs > .btn & { + top: 0; + padding: 1px 5px; + } + + // [converter] extracted a& to a.badge + + // Account for badges in navs + .list-group-item.active > &, + .nav-pills > .active > a > & { + color: $badge-active-color; + background-color: $badge-active-bg; + } + + .list-group-item > & { + float: right; + } + + .list-group-item > & + & { + margin-right: 5px; + } + + .nav-pills > li > a > & { + margin-left: 3px; + } +} + +// Hover state, but only for links +a.badge { + &:hover, + &:focus { + color: $badge-link-hover-color; + text-decoration: none; + cursor: pointer; + } +} diff --git a/docs/_assets/stylesheets/bootstrap/_breadcrumbs.scss b/docs/_assets/stylesheets/bootstrap/_breadcrumbs.scss new file mode 100644 index 0000000000..3641e333b8 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_breadcrumbs.scss @@ -0,0 +1,26 @@ +// +// Breadcrumbs +// -------------------------------------------------- + + +.breadcrumb { + padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal; + margin-bottom: $line-height-computed; + list-style: none; + background-color: $breadcrumb-bg; + border-radius: $border-radius-base; + + > li { + display: inline-block; + + + li:before { + content: "#{$breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space + padding: 0 5px; + color: $breadcrumb-color; + } + } + + > .active { + color: $breadcrumb-active-color; + } +} diff --git a/docs/_assets/stylesheets/bootstrap/_button-groups.scss b/docs/_assets/stylesheets/bootstrap/_button-groups.scss new file mode 100644 index 0000000000..43d235c426 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_button-groups.scss @@ -0,0 +1,244 @@ +// +// Button groups +// -------------------------------------------------- + +// Make the div behave like a button +.btn-group, +.btn-group-vertical { + position: relative; + display: inline-block; + vertical-align: middle; // match .btn alignment given font-size hack above + > .btn { + position: relative; + float: left; + // Bring the "active" button to the front + &:hover, + &:focus, + &:active, + &.active { + z-index: 2; + } + } +} + +// Prevent double borders when buttons are next to each other +.btn-group { + .btn + .btn, + .btn + .btn-group, + .btn-group + .btn, + .btn-group + .btn-group { + margin-left: -1px; + } +} + +// Optional: Group multiple button groups together for a toolbar +.btn-toolbar { + margin-left: -5px; // Offset the first child's margin + @include clearfix; + + .btn, + .btn-group, + .input-group { + float: left; + } + > .btn, + > .btn-group, + > .input-group { + margin-left: 5px; + } +} + +.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { + border-radius: 0; +} + +// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match +.btn-group > .btn:first-child { + margin-left: 0; + &:not(:last-child):not(.dropdown-toggle) { + @include border-right-radius(0); + } +} +// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it +.btn-group > .btn:last-child:not(:first-child), +.btn-group > .dropdown-toggle:not(:first-child) { + @include border-left-radius(0); +} + +// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group) +.btn-group > .btn-group { + float: left; +} +.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} +.btn-group > .btn-group:first-child:not(:last-child) { + > .btn:last-child, + > .dropdown-toggle { + @include border-right-radius(0); + } +} +.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { + @include border-left-radius(0); +} + +// On active and open, don't show outline +.btn-group .dropdown-toggle:active, +.btn-group.open .dropdown-toggle { + outline: 0; +} + + +// Sizing +// +// Remix the default button sizing classes into new ones for easier manipulation. + +.btn-group-xs > .btn { @extend .btn-xs; } +.btn-group-sm > .btn { @extend .btn-sm; } +.btn-group-lg > .btn { @extend .btn-lg; } + + +// Split button dropdowns +// ---------------------- + +// Give the line between buttons some depth +.btn-group > .btn + .dropdown-toggle { + padding-left: 8px; + padding-right: 8px; +} +.btn-group > .btn-lg + .dropdown-toggle { + padding-left: 12px; + padding-right: 12px; +} + +// The clickable button for toggling the menu +// Remove the gradient and set the same inset shadow as the :active state +.btn-group.open .dropdown-toggle { + @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); + + // Show no shadow for `.btn-link` since it has no other button styles. + &.btn-link { + @include box-shadow(none); + } +} + + +// Reposition the caret +.btn .caret { + margin-left: 0; +} +// Carets in other button sizes +.btn-lg .caret { + border-width: $caret-width-large $caret-width-large 0; + border-bottom-width: 0; +} +// Upside down carets for .dropup +.dropup .btn-lg .caret { + border-width: 0 $caret-width-large $caret-width-large; +} + + +// Vertical button groups +// ---------------------- + +.btn-group-vertical { + > .btn, + > .btn-group, + > .btn-group > .btn { + display: block; + float: none; + width: 100%; + max-width: 100%; + } + + // Clear floats so dropdown menus can be properly placed + > .btn-group { + @include clearfix; + > .btn { + float: none; + } + } + + > .btn + .btn, + > .btn + .btn-group, + > .btn-group + .btn, + > .btn-group + .btn-group { + margin-top: -1px; + margin-left: 0; + } +} + +.btn-group-vertical > .btn { + &:not(:first-child):not(:last-child) { + border-radius: 0; + } + &:first-child:not(:last-child) { + border-top-right-radius: $btn-border-radius-base; + @include border-bottom-radius(0); + } + &:last-child:not(:first-child) { + border-bottom-left-radius: $btn-border-radius-base; + @include border-top-radius(0); + } +} +.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} +.btn-group-vertical > .btn-group:first-child:not(:last-child) { + > .btn:last-child, + > .dropdown-toggle { + @include border-bottom-radius(0); + } +} +.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { + @include border-top-radius(0); +} + + +// Justified button groups +// ---------------------- + +.btn-group-justified { + display: table; + width: 100%; + table-layout: fixed; + border-collapse: separate; + > .btn, + > .btn-group { + float: none; + display: table-cell; + width: 1%; + } + > .btn-group .btn { + width: 100%; + } + + > .btn-group .dropdown-menu { + left: auto; + } +} + + +// Checkbox and radio options +// +// In order to support the browser's form validation feedback, powered by the +// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use +// `display: none;` or `visibility: hidden;` as that also hides the popover. +// Simply visually hiding the inputs via `opacity` would leave them clickable in +// certain cases which is prevented by using `clip` and `pointer-events`. +// This way, we ensure a DOM element is visible to position the popover from. +// +// See https://github.com/twbs/bootstrap/pull/12794 and +// https://github.com/twbs/bootstrap/pull/14559 for more information. + +[data-toggle="buttons"] { + > .btn, + > .btn-group > .btn { + input[type="radio"], + input[type="checkbox"] { + position: absolute; + clip: rect(0,0,0,0); + pointer-events: none; + } + } +} diff --git a/docs/_assets/stylesheets/bootstrap/_buttons.scss b/docs/_assets/stylesheets/bootstrap/_buttons.scss new file mode 100644 index 0000000000..6452b709f1 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_buttons.scss @@ -0,0 +1,168 @@ +// +// Buttons +// -------------------------------------------------- + + +// Base styles +// -------------------------------------------------- + +.btn { + display: inline-block; + margin-bottom: 0; // For input.btn + font-weight: $btn-font-weight; + text-align: center; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 + border: 1px solid transparent; + white-space: nowrap; + @include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $btn-border-radius-base); + @include user-select(none); + + &, + &:active, + &.active { + &:focus, + &.focus { + @include tab-focus; + } + } + + &:hover, + &:focus, + &.focus { + color: $btn-default-color; + text-decoration: none; + } + + &:active, + &.active { + outline: 0; + background-image: none; + @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); + } + + &.disabled, + &[disabled], + fieldset[disabled] & { + cursor: $cursor-disabled; + @include opacity(.65); + @include box-shadow(none); + } + + // [converter] extracted a& to a.btn +} + +a.btn { + &.disabled, + fieldset[disabled] & { + pointer-events: none; // Future-proof disabling of clicks on `` elements + } +} + + +// Alternate buttons +// -------------------------------------------------- + +.btn-default { + @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border); +} +.btn-primary { + @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border); +} +// Success appears as green +.btn-success { + @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border); +} +// Info appears as blue-green +.btn-info { + @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border); +} +// Warning appears as orange +.btn-warning { + @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border); +} +// Danger and error appear as red +.btn-danger { + @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border); +} + + +// Link buttons +// ------------------------- + +// Make a button look and behave like a link +.btn-link { + color: $link-color; + font-weight: normal; + border-radius: 0; + + &, + &:active, + &.active, + &[disabled], + fieldset[disabled] & { + background-color: transparent; + @include box-shadow(none); + } + &, + &:hover, + &:focus, + &:active { + border-color: transparent; + } + &:hover, + &:focus { + color: $link-hover-color; + text-decoration: $link-hover-decoration; + background-color: transparent; + } + &[disabled], + fieldset[disabled] & { + &:hover, + &:focus { + color: $btn-link-disabled-color; + text-decoration: none; + } + } +} + + +// Button Sizes +// -------------------------------------------------- + +.btn-lg { + // line-height: ensure even-numbered height of button next to large input + @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $btn-border-radius-large); +} +.btn-sm { + // line-height: ensure proper height of button next to small input + @include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small); +} +.btn-xs { + @include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small); +} + + +// Block button +// -------------------------------------------------- + +.btn-block { + display: block; + width: 100%; +} + +// Vertically space out multiple block buttons +.btn-block + .btn-block { + margin-top: 5px; +} + +// Specificity overrides +input[type="submit"], +input[type="reset"], +input[type="button"] { + &.btn-block { + width: 100%; + } +} diff --git a/docs/_assets/stylesheets/bootstrap/_carousel.scss b/docs/_assets/stylesheets/bootstrap/_carousel.scss new file mode 100644 index 0000000000..f7006780e9 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_carousel.scss @@ -0,0 +1,269 @@ +// +// Carousel +// -------------------------------------------------- + + +// Wrapper for the slide container and indicators +.carousel { + position: relative; +} + +.carousel-inner { + position: relative; + overflow: hidden; + width: 100%; + + > .item { + display: none; + position: relative; + @include transition(.6s ease-in-out left); + + // Account for jankitude on images + > img, + > a > img { + @include img-responsive; + line-height: 1; + } + + // WebKit CSS3 transforms for supported devices + @media all and (transform-3d), (-webkit-transform-3d) { + @include transition-transform(0.6s ease-in-out); + @include backface-visibility(hidden); + @include perspective(1000px); + + &.next, + &.active.right { + @include translate3d(100%, 0, 0); + left: 0; + } + &.prev, + &.active.left { + @include translate3d(-100%, 0, 0); + left: 0; + } + &.next.left, + &.prev.right, + &.active { + @include translate3d(0, 0, 0); + left: 0; + } + } + } + + > .active, + > .next, + > .prev { + display: block; + } + + > .active { + left: 0; + } + + > .next, + > .prev { + position: absolute; + top: 0; + width: 100%; + } + + > .next { + left: 100%; + } + > .prev { + left: -100%; + } + > .next.left, + > .prev.right { + left: 0; + } + + > .active.left { + left: -100%; + } + > .active.right { + left: 100%; + } + +} + +// Left/right controls for nav +// --------------------------- + +.carousel-control { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: $carousel-control-width; + @include opacity($carousel-control-opacity); + font-size: $carousel-control-font-size; + color: $carousel-control-color; + text-align: center; + text-shadow: $carousel-text-shadow; + // We can't have this transition here because WebKit cancels the carousel + // animation if you trip this while in the middle of another animation. + + // Set gradients for backgrounds + &.left { + @include gradient-horizontal($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001)); + } + &.right { + left: auto; + right: 0; + @include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5)); + } + + // Hover/focus state + &:hover, + &:focus { + outline: 0; + color: $carousel-control-color; + text-decoration: none; + @include opacity(.9); + } + + // Toggles + .icon-prev, + .icon-next, + .glyphicon-chevron-left, + .glyphicon-chevron-right { + position: absolute; + top: 50%; + margin-top: -10px; + z-index: 5; + display: inline-block; + } + .icon-prev, + .glyphicon-chevron-left { + left: 50%; + margin-left: -10px; + } + .icon-next, + .glyphicon-chevron-right { + right: 50%; + margin-right: -10px; + } + .icon-prev, + .icon-next { + width: 20px; + height: 20px; + line-height: 1; + font-family: serif; + } + + + .icon-prev { + &:before { + content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) + } + } + .icon-next { + &:before { + content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) + } + } +} + +// Optional indicator pips +// +// Add an unordered list with the following class and add a list item for each +// slide your carousel holds. + +.carousel-indicators { + position: absolute; + bottom: 10px; + left: 50%; + z-index: 15; + width: 60%; + margin-left: -30%; + padding-left: 0; + list-style: none; + text-align: center; + + li { + display: inline-block; + width: 10px; + height: 10px; + margin: 1px; + text-indent: -999px; + border: 1px solid $carousel-indicator-border-color; + border-radius: 10px; + cursor: pointer; + + // IE8-9 hack for event handling + // + // Internet Explorer 8-9 does not support clicks on elements without a set + // `background-color`. We cannot use `filter` since that's not viewed as a + // background color by the browser. Thus, a hack is needed. + // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer + // + // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we + // set alpha transparency for the best results possible. + background-color: #000 \9; // IE8 + background-color: rgba(0,0,0,0); // IE9 + } + .active { + margin: 0; + width: 12px; + height: 12px; + background-color: $carousel-indicator-active-bg; + } +} + +// Optional captions +// ----------------------------- +// Hidden by default for smaller viewports +.carousel-caption { + position: absolute; + left: 15%; + right: 15%; + bottom: 20px; + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: $carousel-caption-color; + text-align: center; + text-shadow: $carousel-text-shadow; + & .btn { + text-shadow: none; // No shadow for button elements in carousel-caption + } +} + + +// Scale up controls for tablets and up +@media screen and (min-width: $screen-sm-min) { + + // Scale up the controls a smidge + .carousel-control { + .glyphicon-chevron-left, + .glyphicon-chevron-right, + .icon-prev, + .icon-next { + width: 30px; + height: 30px; + margin-top: -15px; + font-size: 30px; + } + .glyphicon-chevron-left, + .icon-prev { + margin-left: -15px; + } + .glyphicon-chevron-right, + .icon-next { + margin-right: -15px; + } + } + + // Show and left align the captions + .carousel-caption { + left: 20%; + right: 20%; + padding-bottom: 30px; + } + + // Move up the indicators + .carousel-indicators { + bottom: 20px; + } +} diff --git a/docs/_assets/stylesheets/bootstrap/_close.scss b/docs/_assets/stylesheets/bootstrap/_close.scss new file mode 100644 index 0000000000..3b74d8a973 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_close.scss @@ -0,0 +1,36 @@ +// +// Close icons +// -------------------------------------------------- + + +.close { + float: right; + font-size: ($font-size-base * 1.5); + font-weight: $close-font-weight; + line-height: 1; + color: $close-color; + text-shadow: $close-text-shadow; + @include opacity(.2); + + &:hover, + &:focus { + color: $close-color; + text-decoration: none; + cursor: pointer; + @include opacity(.5); + } + + // [converter] extracted button& to button.close +} + +// Additional properties for button version +// iOS requires the button element instead of an anchor tag. +// If you want the anchor version, it requires `href="#"`. +// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile +button.close { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; +} diff --git a/docs/_assets/stylesheets/bootstrap/_code.scss b/docs/_assets/stylesheets/bootstrap/_code.scss new file mode 100644 index 0000000000..caa5f06304 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_code.scss @@ -0,0 +1,69 @@ +// +// Code (inline and block) +// -------------------------------------------------- + + +// Inline and block code styles +code, +kbd, +pre, +samp { + font-family: $font-family-monospace; +} + +// Inline code +code { + padding: 2px 4px; + font-size: 90%; + color: $code-color; + background-color: $code-bg; + border-radius: $border-radius-base; +} + +// User input typically entered via keyboard +kbd { + padding: 2px 4px; + font-size: 90%; + color: $kbd-color; + background-color: $kbd-bg; + border-radius: $border-radius-small; + box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); + + kbd { + padding: 0; + font-size: 100%; + font-weight: bold; + box-shadow: none; + } +} + +// Blocks of code +pre { + display: block; + padding: (($line-height-computed - 1) / 2); + margin: 0 0 ($line-height-computed / 2); + font-size: ($font-size-base - 1); // 14px to 13px + line-height: $line-height-base; + word-break: break-all; + word-wrap: break-word; + color: $pre-color; + background-color: $pre-bg; + border: 1px solid $pre-border-color; + border-radius: $border-radius-base; + + // Account for some code outputs that place code tags in pre tags + code { + padding: 0; + font-size: inherit; + color: inherit; + white-space: pre-wrap; + background-color: transparent; + border-radius: 0; + } +} + +// Enable scrollable blocks of code +.pre-scrollable { + max-height: $pre-scrollable-max-height; + overflow-y: scroll; +} diff --git a/docs/_assets/stylesheets/bootstrap/_component-animations.scss b/docs/_assets/stylesheets/bootstrap/_component-animations.scss new file mode 100644 index 0000000000..ca3b43ca78 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_component-animations.scss @@ -0,0 +1,37 @@ +// +// Component animations +// -------------------------------------------------- + +// Heads up! +// +// We don't use the `.opacity()` mixin here since it causes a bug with text +// fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552. + +.fade { + opacity: 0; + @include transition(opacity .15s linear); + &.in { + opacity: 1; + } +} + +.collapse { + display: none; + + &.in { display: block; } + // [converter] extracted tr&.in to tr.collapse.in + // [converter] extracted tbody&.in to tbody.collapse.in +} + +tr.collapse.in { display: table-row; } + +tbody.collapse.in { display: table-row-group; } + +.collapsing { + position: relative; + height: 0; + overflow: hidden; + @include transition-property(height, visibility); + @include transition-duration(.35s); + @include transition-timing-function(ease); +} diff --git a/docs/_assets/stylesheets/bootstrap/_dropdowns.scss b/docs/_assets/stylesheets/bootstrap/_dropdowns.scss new file mode 100644 index 0000000000..aac84597a4 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_dropdowns.scss @@ -0,0 +1,216 @@ +// +// Dropdown menus +// -------------------------------------------------- + + +// Dropdown arrow/caret +.caret { + display: inline-block; + width: 0; + height: 0; + margin-left: 2px; + vertical-align: middle; + border-top: $caret-width-base dashed; + border-top: $caret-width-base solid \9; // IE8 + border-right: $caret-width-base solid transparent; + border-left: $caret-width-base solid transparent; +} + +// The dropdown wrapper (div) +.dropup, +.dropdown { + position: relative; +} + +// Prevent the focus on the dropdown toggle when closing dropdowns +.dropdown-toggle:focus { + outline: 0; +} + +// The dropdown menu (ul) +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: $zindex-dropdown; + display: none; // none by default, but block on "open" of the menu + float: left; + min-width: 160px; + padding: 5px 0; + margin: 2px 0 0; // override default ul + list-style: none; + font-size: $font-size-base; + text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) + background-color: $dropdown-bg; + border: 1px solid $dropdown-fallback-border; // IE8 fallback + border: 1px solid $dropdown-border; + border-radius: $border-radius-base; + @include box-shadow(0 6px 12px rgba(0,0,0,.175)); + background-clip: padding-box; + + // Aligns the dropdown menu to right + // + // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]` + &.pull-right { + right: 0; + left: auto; + } + + // Dividers (basically an hr) within the dropdown + .divider { + @include nav-divider($dropdown-divider-bg); + } + + // Links within the dropdown menu + > li > a { + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + line-height: $line-height-base; + color: $dropdown-link-color; + white-space: nowrap; // prevent links from randomly breaking onto new lines + } +} + +// Hover/Focus state +.dropdown-menu > li > a { + &:hover, + &:focus { + text-decoration: none; + color: $dropdown-link-hover-color; + background-color: $dropdown-link-hover-bg; + } +} + +// Active state +.dropdown-menu > .active > a { + &, + &:hover, + &:focus { + color: $dropdown-link-active-color; + text-decoration: none; + outline: 0; + background-color: $dropdown-link-active-bg; + } +} + +// Disabled state +// +// Gray out text and ensure the hover/focus state remains gray + +.dropdown-menu > .disabled > a { + &, + &:hover, + &:focus { + color: $dropdown-link-disabled-color; + } + + // Nuke hover/focus effects + &:hover, + &:focus { + text-decoration: none; + background-color: transparent; + background-image: none; // Remove CSS gradient + @include reset-filter; + cursor: $cursor-disabled; + } +} + +// Open state for the dropdown +.open { + // Show the menu + > .dropdown-menu { + display: block; + } + + // Remove the outline when :focus is triggered + > a { + outline: 0; + } +} + +// Menu positioning +// +// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown +// menu with the parent. +.dropdown-menu-right { + left: auto; // Reset the default from `.dropdown-menu` + right: 0; +} +// With v3, we enabled auto-flipping if you have a dropdown within a right +// aligned nav component. To enable the undoing of that, we provide an override +// to restore the default dropdown menu alignment. +// +// This is only for left-aligning a dropdown menu within a `.navbar-right` or +// `.pull-right` nav component. +.dropdown-menu-left { + left: 0; + right: auto; +} + +// Dropdown section headers +.dropdown-header { + display: block; + padding: 3px 20px; + font-size: $font-size-small; + line-height: $line-height-base; + color: $dropdown-header-color; + white-space: nowrap; // as with > li > a +} + +// Backdrop to catch body clicks on mobile, etc. +.dropdown-backdrop { + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: 0; + z-index: ($zindex-dropdown - 10); +} + +// Right aligned dropdowns +.pull-right > .dropdown-menu { + right: 0; + left: auto; +} + +// Allow for dropdowns to go bottom up (aka, dropup-menu) +// +// Just add .dropup after the standard .dropdown class and you're set, bro. +// TODO: abstract this so that the navbar fixed styles are not placed here? + +.dropup, +.navbar-fixed-bottom .dropdown { + // Reverse the caret + .caret { + border-top: 0; + border-bottom: $caret-width-base dashed; + border-bottom: $caret-width-base solid \9; // IE8 + content: ""; + } + // Different positioning for bottom up menu + .dropdown-menu { + top: auto; + bottom: 100%; + margin-bottom: 2px; + } +} + + +// Component alignment +// +// Reiterate per navbar.less and the modified component alignment there. + +@media (min-width: $grid-float-breakpoint) { + .navbar-right { + .dropdown-menu { + right: 0; left: auto; + } + // Necessary for overrides of the default right aligned menu. + // Will remove come v4 in all likelihood. + .dropdown-menu-left { + left: 0; right: auto; + } + } +} diff --git a/docs/_assets/stylesheets/bootstrap/_forms.scss b/docs/_assets/stylesheets/bootstrap/_forms.scss new file mode 100644 index 0000000000..de4befdb6f --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_forms.scss @@ -0,0 +1,611 @@ +// +// Forms +// -------------------------------------------------- + + +// Normalize non-controls +// +// Restyle and baseline non-control form elements. + +fieldset { + padding: 0; + margin: 0; + border: 0; + // Chrome and Firefox set a `min-width: min-content;` on fieldsets, + // so we reset that to ensure it behaves more like a standard block element. + // See https://github.com/twbs/bootstrap/issues/12359. + min-width: 0; +} + +legend { + display: block; + width: 100%; + padding: 0; + margin-bottom: $line-height-computed; + font-size: ($font-size-base * 1.5); + line-height: inherit; + color: $legend-color; + border: 0; + border-bottom: 1px solid $legend-border-color; +} + +label { + display: inline-block; + max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141) + margin-bottom: 5px; + font-weight: bold; +} + + +// Normalize form controls +// +// While most of our form styles require extra classes, some basic normalization +// is required to ensure optimum display with or without those classes to better +// address browser inconsistencies. + +// Override content-box in Normalize (* isn't specific enough) +input[type="search"] { + @include box-sizing(border-box); +} + +// Position radios and checkboxes better +input[type="radio"], +input[type="checkbox"] { + margin: 4px 0 0; + margin-top: 1px \9; // IE8-9 + line-height: normal; +} + +input[type="file"] { + display: block; +} + +// Make range inputs behave like textual form controls +input[type="range"] { + display: block; + width: 100%; +} + +// Make multiple select elements height not fixed +select[multiple], +select[size] { + height: auto; +} + +// Focus for file, radio, and checkbox +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus { + @include tab-focus; +} + +// Adjust output element +output { + display: block; + padding-top: ($padding-base-vertical + 1); + font-size: $font-size-base; + line-height: $line-height-base; + color: $input-color; +} + + +// Common form controls +// +// Shared size and type resets for form controls. Apply `.form-control` to any +// of the following form controls: +// +// select +// textarea +// input[type="text"] +// input[type="password"] +// input[type="datetime"] +// input[type="datetime-local"] +// input[type="date"] +// input[type="month"] +// input[type="time"] +// input[type="week"] +// input[type="number"] +// input[type="email"] +// input[type="url"] +// input[type="search"] +// input[type="tel"] +// input[type="color"] + +.form-control { + display: block; + width: 100%; + height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) + padding: $padding-base-vertical $padding-base-horizontal; + font-size: $font-size-base; + line-height: $line-height-base; + color: $input-color; + background-color: $input-bg; + background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 + border: 1px solid $input-border; + border-radius: $input-border-radius; // Note: This has no effect on s in CSS. + @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); + @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s); + + // Customize the `:focus` state to imitate native WebKit styles. + @include form-control-focus; + + // Placeholder + @include placeholder; + + // Disabled and read-only inputs + // + // HTML5 says that controls under a fieldset > legend:first-child won't be + // disabled if the fieldset is disabled. Due to implementation difficulty, we + // don't honor that edge case; we style them as disabled anyway. + &[disabled], + &[readonly], + fieldset[disabled] & { + background-color: $input-bg-disabled; + opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655 + } + + &[disabled], + fieldset[disabled] & { + cursor: $cursor-disabled; + } + + // [converter] extracted textarea& to textarea.form-control +} + +// Reset height for `textarea`s +textarea.form-control { + height: auto; +} + + +// Search inputs in iOS +// +// This overrides the extra rounded corners on search inputs in iOS so that our +// `.form-control` class can properly style them. Note that this cannot simply +// be added to `.form-control` as it's not specific enough. For details, see +// https://github.com/twbs/bootstrap/issues/11586. + +input[type="search"] { + -webkit-appearance: none; +} + + +// Special styles for iOS temporal inputs +// +// In Mobile Safari, setting `display: block` on temporal inputs causes the +// text within the input to become vertically misaligned. As a workaround, we +// set a pixel line-height that matches the given height of the input, but only +// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848 +// +// Note that as of 8.3, iOS doesn't support `datetime` or `week`. + +@media screen and (-webkit-min-device-pixel-ratio: 0) { + input[type="date"], + input[type="time"], + input[type="datetime-local"], + input[type="month"] { + &.form-control { + line-height: $input-height-base; + } + + &.input-sm, + .input-group-sm & { + line-height: $input-height-small; + } + + &.input-lg, + .input-group-lg & { + line-height: $input-height-large; + } + } +} + + +// Form groups +// +// Designed to help with the organization and spacing of vertical forms. For +// horizontal forms, use the predefined grid classes. + +.form-group { + margin-bottom: $form-group-margin-bottom; +} + + +// Checkboxes and radios +// +// Indent the labels to position radios/checkboxes as hanging controls. + +.radio, +.checkbox { + position: relative; + display: block; + margin-top: 10px; + margin-bottom: 10px; + + label { + min-height: $line-height-computed; // Ensure the input doesn't jump when there is no text + padding-left: 20px; + margin-bottom: 0; + font-weight: normal; + cursor: pointer; + } +} +.radio input[type="radio"], +.radio-inline input[type="radio"], +.checkbox input[type="checkbox"], +.checkbox-inline input[type="checkbox"] { + position: absolute; + margin-left: -20px; + margin-top: 4px \9; +} + +.radio + .radio, +.checkbox + .checkbox { + margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing +} + +// Radios and checkboxes on same line +.radio-inline, +.checkbox-inline { + position: relative; + display: inline-block; + padding-left: 20px; + margin-bottom: 0; + vertical-align: middle; + font-weight: normal; + cursor: pointer; +} +.radio-inline + .radio-inline, +.checkbox-inline + .checkbox-inline { + margin-top: 0; + margin-left: 10px; // space out consecutive inline controls +} + +// Apply same disabled cursor tweak as for inputs +// Some special care is needed because Star + +@at-root { + // Import the fonts + @font-face { + font-family: 'Glyphicons Halflings'; + src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot'), '#{$icon-font-path}#{$icon-font-name}.eot')); + src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot?#iefix'), '#{$icon-font-path}#{$icon-font-name}.eot?#iefix')) format('embedded-opentype'), + url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff2'), '#{$icon-font-path}#{$icon-font-name}.woff2')) format('woff2'), + url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff'), '#{$icon-font-path}#{$icon-font-name}.woff')) format('woff'), + url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.ttf'), '#{$icon-font-path}#{$icon-font-name}.ttf')) format('truetype'), + url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}'), '#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}')) format('svg'); + } +} + +// Catchall baseclass +.glyphicon { + position: relative; + top: 1px; + display: inline-block; + font-family: 'Glyphicons Halflings'; + font-style: normal; + font-weight: normal; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +// Individual icons +.glyphicon-asterisk { &:before { content: "\2a"; } } +.glyphicon-plus { &:before { content: "\2b"; } } +.glyphicon-euro, +.glyphicon-eur { &:before { content: "\20ac"; } } +.glyphicon-minus { &:before { content: "\2212"; } } +.glyphicon-cloud { &:before { content: "\2601"; } } +.glyphicon-envelope { &:before { content: "\2709"; } } +.glyphicon-pencil { &:before { content: "\270f"; } } +.glyphicon-glass { &:before { content: "\e001"; } } +.glyphicon-music { &:before { content: "\e002"; } } +.glyphicon-search { &:before { content: "\e003"; } } +.glyphicon-heart { &:before { content: "\e005"; } } +.glyphicon-star { &:before { content: "\e006"; } } +.glyphicon-star-empty { &:before { content: "\e007"; } } +.glyphicon-user { &:before { content: "\e008"; } } +.glyphicon-film { &:before { content: "\e009"; } } +.glyphicon-th-large { &:before { content: "\e010"; } } +.glyphicon-th { &:before { content: "\e011"; } } +.glyphicon-th-list { &:before { content: "\e012"; } } +.glyphicon-ok { &:before { content: "\e013"; } } +.glyphicon-remove { &:before { content: "\e014"; } } +.glyphicon-zoom-in { &:before { content: "\e015"; } } +.glyphicon-zoom-out { &:before { content: "\e016"; } } +.glyphicon-off { &:before { content: "\e017"; } } +.glyphicon-signal { &:before { content: "\e018"; } } +.glyphicon-cog { &:before { content: "\e019"; } } +.glyphicon-trash { &:before { content: "\e020"; } } +.glyphicon-home { &:before { content: "\e021"; } } +.glyphicon-file { &:before { content: "\e022"; } } +.glyphicon-time { &:before { content: "\e023"; } } +.glyphicon-road { &:before { content: "\e024"; } } +.glyphicon-download-alt { &:before { content: "\e025"; } } +.glyphicon-download { &:before { content: "\e026"; } } +.glyphicon-upload { &:before { content: "\e027"; } } +.glyphicon-inbox { &:before { content: "\e028"; } } +.glyphicon-play-circle { &:before { content: "\e029"; } } +.glyphicon-repeat { &:before { content: "\e030"; } } +.glyphicon-refresh { &:before { content: "\e031"; } } +.glyphicon-list-alt { &:before { content: "\e032"; } } +.glyphicon-lock { &:before { content: "\e033"; } } +.glyphicon-flag { &:before { content: "\e034"; } } +.glyphicon-headphones { &:before { content: "\e035"; } } +.glyphicon-volume-off { &:before { content: "\e036"; } } +.glyphicon-volume-down { &:before { content: "\e037"; } } +.glyphicon-volume-up { &:before { content: "\e038"; } } +.glyphicon-qrcode { &:before { content: "\e039"; } } +.glyphicon-barcode { &:before { content: "\e040"; } } +.glyphicon-tag { &:before { content: "\e041"; } } +.glyphicon-tags { &:before { content: "\e042"; } } +.glyphicon-book { &:before { content: "\e043"; } } +.glyphicon-bookmark { &:before { content: "\e044"; } } +.glyphicon-print { &:before { content: "\e045"; } } +.glyphicon-camera { &:before { content: "\e046"; } } +.glyphicon-font { &:before { content: "\e047"; } } +.glyphicon-bold { &:before { content: "\e048"; } } +.glyphicon-italic { &:before { content: "\e049"; } } +.glyphicon-text-height { &:before { content: "\e050"; } } +.glyphicon-text-width { &:before { content: "\e051"; } } +.glyphicon-align-left { &:before { content: "\e052"; } } +.glyphicon-align-center { &:before { content: "\e053"; } } +.glyphicon-align-right { &:before { content: "\e054"; } } +.glyphicon-align-justify { &:before { content: "\e055"; } } +.glyphicon-list { &:before { content: "\e056"; } } +.glyphicon-indent-left { &:before { content: "\e057"; } } +.glyphicon-indent-right { &:before { content: "\e058"; } } +.glyphicon-facetime-video { &:before { content: "\e059"; } } +.glyphicon-picture { &:before { content: "\e060"; } } +.glyphicon-map-marker { &:before { content: "\e062"; } } +.glyphicon-adjust { &:before { content: "\e063"; } } +.glyphicon-tint { &:before { content: "\e064"; } } +.glyphicon-edit { &:before { content: "\e065"; } } +.glyphicon-share { &:before { content: "\e066"; } } +.glyphicon-check { &:before { content: "\e067"; } } +.glyphicon-move { &:before { content: "\e068"; } } +.glyphicon-step-backward { &:before { content: "\e069"; } } +.glyphicon-fast-backward { &:before { content: "\e070"; } } +.glyphicon-backward { &:before { content: "\e071"; } } +.glyphicon-play { &:before { content: "\e072"; } } +.glyphicon-pause { &:before { content: "\e073"; } } +.glyphicon-stop { &:before { content: "\e074"; } } +.glyphicon-forward { &:before { content: "\e075"; } } +.glyphicon-fast-forward { &:before { content: "\e076"; } } +.glyphicon-step-forward { &:before { content: "\e077"; } } +.glyphicon-eject { &:before { content: "\e078"; } } +.glyphicon-chevron-left { &:before { content: "\e079"; } } +.glyphicon-chevron-right { &:before { content: "\e080"; } } +.glyphicon-plus-sign { &:before { content: "\e081"; } } +.glyphicon-minus-sign { &:before { content: "\e082"; } } +.glyphicon-remove-sign { &:before { content: "\e083"; } } +.glyphicon-ok-sign { &:before { content: "\e084"; } } +.glyphicon-question-sign { &:before { content: "\e085"; } } +.glyphicon-info-sign { &:before { content: "\e086"; } } +.glyphicon-screenshot { &:before { content: "\e087"; } } +.glyphicon-remove-circle { &:before { content: "\e088"; } } +.glyphicon-ok-circle { &:before { content: "\e089"; } } +.glyphicon-ban-circle { &:before { content: "\e090"; } } +.glyphicon-arrow-left { &:before { content: "\e091"; } } +.glyphicon-arrow-right { &:before { content: "\e092"; } } +.glyphicon-arrow-up { &:before { content: "\e093"; } } +.glyphicon-arrow-down { &:before { content: "\e094"; } } +.glyphicon-share-alt { &:before { content: "\e095"; } } +.glyphicon-resize-full { &:before { content: "\e096"; } } +.glyphicon-resize-small { &:before { content: "\e097"; } } +.glyphicon-exclamation-sign { &:before { content: "\e101"; } } +.glyphicon-gift { &:before { content: "\e102"; } } +.glyphicon-leaf { &:before { content: "\e103"; } } +.glyphicon-fire { &:before { content: "\e104"; } } +.glyphicon-eye-open { &:before { content: "\e105"; } } +.glyphicon-eye-close { &:before { content: "\e106"; } } +.glyphicon-warning-sign { &:before { content: "\e107"; } } +.glyphicon-plane { &:before { content: "\e108"; } } +.glyphicon-calendar { &:before { content: "\e109"; } } +.glyphicon-random { &:before { content: "\e110"; } } +.glyphicon-comment { &:before { content: "\e111"; } } +.glyphicon-magnet { &:before { content: "\e112"; } } +.glyphicon-chevron-up { &:before { content: "\e113"; } } +.glyphicon-chevron-down { &:before { content: "\e114"; } } +.glyphicon-retweet { &:before { content: "\e115"; } } +.glyphicon-shopping-cart { &:before { content: "\e116"; } } +.glyphicon-folder-close { &:before { content: "\e117"; } } +.glyphicon-folder-open { &:before { content: "\e118"; } } +.glyphicon-resize-vertical { &:before { content: "\e119"; } } +.glyphicon-resize-horizontal { &:before { content: "\e120"; } } +.glyphicon-hdd { &:before { content: "\e121"; } } +.glyphicon-bullhorn { &:before { content: "\e122"; } } +.glyphicon-bell { &:before { content: "\e123"; } } +.glyphicon-certificate { &:before { content: "\e124"; } } +.glyphicon-thumbs-up { &:before { content: "\e125"; } } +.glyphicon-thumbs-down { &:before { content: "\e126"; } } +.glyphicon-hand-right { &:before { content: "\e127"; } } +.glyphicon-hand-left { &:before { content: "\e128"; } } +.glyphicon-hand-up { &:before { content: "\e129"; } } +.glyphicon-hand-down { &:before { content: "\e130"; } } +.glyphicon-circle-arrow-right { &:before { content: "\e131"; } } +.glyphicon-circle-arrow-left { &:before { content: "\e132"; } } +.glyphicon-circle-arrow-up { &:before { content: "\e133"; } } +.glyphicon-circle-arrow-down { &:before { content: "\e134"; } } +.glyphicon-globe { &:before { content: "\e135"; } } +.glyphicon-wrench { &:before { content: "\e136"; } } +.glyphicon-tasks { &:before { content: "\e137"; } } +.glyphicon-filter { &:before { content: "\e138"; } } +.glyphicon-briefcase { &:before { content: "\e139"; } } +.glyphicon-fullscreen { &:before { content: "\e140"; } } +.glyphicon-dashboard { &:before { content: "\e141"; } } +.glyphicon-paperclip { &:before { content: "\e142"; } } +.glyphicon-heart-empty { &:before { content: "\e143"; } } +.glyphicon-link { &:before { content: "\e144"; } } +.glyphicon-phone { &:before { content: "\e145"; } } +.glyphicon-pushpin { &:before { content: "\e146"; } } +.glyphicon-usd { &:before { content: "\e148"; } } +.glyphicon-gbp { &:before { content: "\e149"; } } +.glyphicon-sort { &:before { content: "\e150"; } } +.glyphicon-sort-by-alphabet { &:before { content: "\e151"; } } +.glyphicon-sort-by-alphabet-alt { &:before { content: "\e152"; } } +.glyphicon-sort-by-order { &:before { content: "\e153"; } } +.glyphicon-sort-by-order-alt { &:before { content: "\e154"; } } +.glyphicon-sort-by-attributes { &:before { content: "\e155"; } } +.glyphicon-sort-by-attributes-alt { &:before { content: "\e156"; } } +.glyphicon-unchecked { &:before { content: "\e157"; } } +.glyphicon-expand { &:before { content: "\e158"; } } +.glyphicon-collapse-down { &:before { content: "\e159"; } } +.glyphicon-collapse-up { &:before { content: "\e160"; } } +.glyphicon-log-in { &:before { content: "\e161"; } } +.glyphicon-flash { &:before { content: "\e162"; } } +.glyphicon-log-out { &:before { content: "\e163"; } } +.glyphicon-new-window { &:before { content: "\e164"; } } +.glyphicon-record { &:before { content: "\e165"; } } +.glyphicon-save { &:before { content: "\e166"; } } +.glyphicon-open { &:before { content: "\e167"; } } +.glyphicon-saved { &:before { content: "\e168"; } } +.glyphicon-import { &:before { content: "\e169"; } } +.glyphicon-export { &:before { content: "\e170"; } } +.glyphicon-send { &:before { content: "\e171"; } } +.glyphicon-floppy-disk { &:before { content: "\e172"; } } +.glyphicon-floppy-saved { &:before { content: "\e173"; } } +.glyphicon-floppy-remove { &:before { content: "\e174"; } } +.glyphicon-floppy-save { &:before { content: "\e175"; } } +.glyphicon-floppy-open { &:before { content: "\e176"; } } +.glyphicon-credit-card { &:before { content: "\e177"; } } +.glyphicon-transfer { &:before { content: "\e178"; } } +.glyphicon-cutlery { &:before { content: "\e179"; } } +.glyphicon-header { &:before { content: "\e180"; } } +.glyphicon-compressed { &:before { content: "\e181"; } } +.glyphicon-earphone { &:before { content: "\e182"; } } +.glyphicon-phone-alt { &:before { content: "\e183"; } } +.glyphicon-tower { &:before { content: "\e184"; } } +.glyphicon-stats { &:before { content: "\e185"; } } +.glyphicon-sd-video { &:before { content: "\e186"; } } +.glyphicon-hd-video { &:before { content: "\e187"; } } +.glyphicon-subtitles { &:before { content: "\e188"; } } +.glyphicon-sound-stereo { &:before { content: "\e189"; } } +.glyphicon-sound-dolby { &:before { content: "\e190"; } } +.glyphicon-sound-5-1 { &:before { content: "\e191"; } } +.glyphicon-sound-6-1 { &:before { content: "\e192"; } } +.glyphicon-sound-7-1 { &:before { content: "\e193"; } } +.glyphicon-copyright-mark { &:before { content: "\e194"; } } +.glyphicon-registration-mark { &:before { content: "\e195"; } } +.glyphicon-cloud-download { &:before { content: "\e197"; } } +.glyphicon-cloud-upload { &:before { content: "\e198"; } } +.glyphicon-tree-conifer { &:before { content: "\e199"; } } +.glyphicon-tree-deciduous { &:before { content: "\e200"; } } +.glyphicon-cd { &:before { content: "\e201"; } } +.glyphicon-save-file { &:before { content: "\e202"; } } +.glyphicon-open-file { &:before { content: "\e203"; } } +.glyphicon-level-up { &:before { content: "\e204"; } } +.glyphicon-copy { &:before { content: "\e205"; } } +.glyphicon-paste { &:before { content: "\e206"; } } +// The following 2 Glyphicons are omitted for the time being because +// they currently use Unicode codepoints that are outside the +// Basic Multilingual Plane (BMP). Older buggy versions of WebKit can't handle +// non-BMP codepoints in CSS string escapes, and thus can't display these two icons. +// Notably, the bug affects some older versions of the Android Browser. +// More info: https://github.com/twbs/bootstrap/issues/10106 +// .glyphicon-door { &:before { content: "\1f6aa"; } } +// .glyphicon-key { &:before { content: "\1f511"; } } +.glyphicon-alert { &:before { content: "\e209"; } } +.glyphicon-equalizer { &:before { content: "\e210"; } } +.glyphicon-king { &:before { content: "\e211"; } } +.glyphicon-queen { &:before { content: "\e212"; } } +.glyphicon-pawn { &:before { content: "\e213"; } } +.glyphicon-bishop { &:before { content: "\e214"; } } +.glyphicon-knight { &:before { content: "\e215"; } } +.glyphicon-baby-formula { &:before { content: "\e216"; } } +.glyphicon-tent { &:before { content: "\26fa"; } } +.glyphicon-blackboard { &:before { content: "\e218"; } } +.glyphicon-bed { &:before { content: "\e219"; } } +.glyphicon-apple { &:before { content: "\f8ff"; } } +.glyphicon-erase { &:before { content: "\e221"; } } +.glyphicon-hourglass { &:before { content: "\231b"; } } +.glyphicon-lamp { &:before { content: "\e223"; } } +.glyphicon-duplicate { &:before { content: "\e224"; } } +.glyphicon-piggy-bank { &:before { content: "\e225"; } } +.glyphicon-scissors { &:before { content: "\e226"; } } +.glyphicon-bitcoin { &:before { content: "\e227"; } } +.glyphicon-btc { &:before { content: "\e227"; } } +.glyphicon-xbt { &:before { content: "\e227"; } } +.glyphicon-yen { &:before { content: "\00a5"; } } +.glyphicon-jpy { &:before { content: "\00a5"; } } +.glyphicon-ruble { &:before { content: "\20bd"; } } +.glyphicon-rub { &:before { content: "\20bd"; } } +.glyphicon-scale { &:before { content: "\e230"; } } +.glyphicon-ice-lolly { &:before { content: "\e231"; } } +.glyphicon-ice-lolly-tasted { &:before { content: "\e232"; } } +.glyphicon-education { &:before { content: "\e233"; } } +.glyphicon-option-horizontal { &:before { content: "\e234"; } } +.glyphicon-option-vertical { &:before { content: "\e235"; } } +.glyphicon-menu-hamburger { &:before { content: "\e236"; } } +.glyphicon-modal-window { &:before { content: "\e237"; } } +.glyphicon-oil { &:before { content: "\e238"; } } +.glyphicon-grain { &:before { content: "\e239"; } } +.glyphicon-sunglasses { &:before { content: "\e240"; } } +.glyphicon-text-size { &:before { content: "\e241"; } } +.glyphicon-text-color { &:before { content: "\e242"; } } +.glyphicon-text-background { &:before { content: "\e243"; } } +.glyphicon-object-align-top { &:before { content: "\e244"; } } +.glyphicon-object-align-bottom { &:before { content: "\e245"; } } +.glyphicon-object-align-horizontal{ &:before { content: "\e246"; } } +.glyphicon-object-align-left { &:before { content: "\e247"; } } +.glyphicon-object-align-vertical { &:before { content: "\e248"; } } +.glyphicon-object-align-right { &:before { content: "\e249"; } } +.glyphicon-triangle-right { &:before { content: "\e250"; } } +.glyphicon-triangle-left { &:before { content: "\e251"; } } +.glyphicon-triangle-bottom { &:before { content: "\e252"; } } +.glyphicon-triangle-top { &:before { content: "\e253"; } } +.glyphicon-console { &:before { content: "\e254"; } } +.glyphicon-superscript { &:before { content: "\e255"; } } +.glyphicon-subscript { &:before { content: "\e256"; } } +.glyphicon-menu-left { &:before { content: "\e257"; } } +.glyphicon-menu-right { &:before { content: "\e258"; } } +.glyphicon-menu-down { &:before { content: "\e259"; } } +.glyphicon-menu-up { &:before { content: "\e260"; } } diff --git a/docs/_assets/stylesheets/bootstrap/_grid.scss b/docs/_assets/stylesheets/bootstrap/_grid.scss new file mode 100644 index 0000000000..b15ca27bb5 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_grid.scss @@ -0,0 +1,84 @@ +// +// Grid system +// -------------------------------------------------- + + +// Container widths +// +// Set the container width, and override it for fixed navbars in media queries. + +.container { + @include container-fixed; + + @media (min-width: $screen-sm-min) { + width: $container-sm; + } + @media (min-width: $screen-md-min) { + width: $container-md; + } + @media (min-width: $screen-lg-min) { + width: $container-lg; + } +} + + +// Fluid container +// +// Utilizes the mixin meant for fixed width containers, but without any defined +// width for fluid, full width layouts. + +.container-fluid { + @include container-fixed; +} + + +// Row +// +// Rows contain and clear the floats of your columns. + +.row { + @include make-row; +} + + +// Columns +// +// Common styles for small and large grid columns + +@include make-grid-columns; + + +// Extra small grid +// +// Columns, offsets, pushes, and pulls for extra small devices like +// smartphones. + +@include make-grid(xs); + + +// Small grid +// +// Columns, offsets, pushes, and pulls for the small device range, from phones +// to tablets. + +@media (min-width: $screen-sm-min) { + @include make-grid(sm); +} + + +// Medium grid +// +// Columns, offsets, pushes, and pulls for the desktop device range. + +@media (min-width: $screen-md-min) { + @include make-grid(md); +} + + +// Large grid +// +// Columns, offsets, pushes, and pulls for the large desktop device range. + +@media (min-width: $screen-lg-min) { + @include make-grid(lg); +} diff --git a/docs/_assets/stylesheets/bootstrap/_input-groups.scss b/docs/_assets/stylesheets/bootstrap/_input-groups.scss new file mode 100644 index 0000000000..12f0c428c9 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_input-groups.scss @@ -0,0 +1,167 @@ +// +// Input groups +// -------------------------------------------------- + +// Base styles +// ------------------------- +.input-group { + position: relative; // For dropdowns + display: table; + border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table + + // Undo padding and float of grid classes + &[class*="col-"] { + float: none; + padding-left: 0; + padding-right: 0; + } + + .form-control { + // Ensure that the input is always above the *appended* addon button for + // proper border colors. + position: relative; + z-index: 2; + + // IE9 fubars the placeholder attribute in text inputs and the arrows on + // select elements in input groups. To fix it, we float the input. Details: + // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855 + float: left; + + width: 100%; + margin-bottom: 0; + } +} + +// Sizing options +// +// Remix the default form control sizing classes into new ones for easier +// manipulation. + +.input-group-lg > .form-control, +.input-group-lg > .input-group-addon, +.input-group-lg > .input-group-btn > .btn { + @extend .input-lg; +} +.input-group-sm > .form-control, +.input-group-sm > .input-group-addon, +.input-group-sm > .input-group-btn > .btn { + @extend .input-sm; +} + + +// Display as table-cell +// ------------------------- +.input-group-addon, +.input-group-btn, +.input-group .form-control { + display: table-cell; + + &:not(:first-child):not(:last-child) { + border-radius: 0; + } +} +// Addon and addon wrapper for buttons +.input-group-addon, +.input-group-btn { + width: 1%; + white-space: nowrap; + vertical-align: middle; // Match the inputs +} + +// Text input groups +// ------------------------- +.input-group-addon { + padding: $padding-base-vertical $padding-base-horizontal; + font-size: $font-size-base; + font-weight: normal; + line-height: 1; + color: $input-color; + text-align: center; + background-color: $input-group-addon-bg; + border: 1px solid $input-group-addon-border-color; + border-radius: $border-radius-base; + + // Sizing + &.input-sm { + padding: $padding-small-vertical $padding-small-horizontal; + font-size: $font-size-small; + border-radius: $border-radius-small; + } + &.input-lg { + padding: $padding-large-vertical $padding-large-horizontal; + font-size: $font-size-large; + border-radius: $border-radius-large; + } + + // Nuke default margins from checkboxes and radios to vertically center within. + input[type="radio"], + input[type="checkbox"] { + margin-top: 0; + } +} + +// Reset rounded corners +.input-group .form-control:first-child, +.input-group-addon:first-child, +.input-group-btn:first-child > .btn, +.input-group-btn:first-child > .btn-group > .btn, +.input-group-btn:first-child > .dropdown-toggle, +.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), +.input-group-btn:last-child > .btn-group:not(:last-child) > .btn { + @include border-right-radius(0); +} +.input-group-addon:first-child { + border-right: 0; +} +.input-group .form-control:last-child, +.input-group-addon:last-child, +.input-group-btn:last-child > .btn, +.input-group-btn:last-child > .btn-group > .btn, +.input-group-btn:last-child > .dropdown-toggle, +.input-group-btn:first-child > .btn:not(:first-child), +.input-group-btn:first-child > .btn-group:not(:first-child) > .btn { + @include border-left-radius(0); +} +.input-group-addon:last-child { + border-left: 0; +} + +// Button input groups +// ------------------------- +.input-group-btn { + position: relative; + // Jankily prevent input button groups from wrapping with `white-space` and + // `font-size` in combination with `inline-block` on buttons. + font-size: 0; + white-space: nowrap; + + // Negative margin for spacing, position for bringing hovered/focused/actived + // element above the siblings. + > .btn { + position: relative; + + .btn { + margin-left: -1px; + } + // Bring the "active" button to the front + &:hover, + &:focus, + &:active { + z-index: 2; + } + } + + // Negative margin to only have a 1px border between the two + &:first-child { + > .btn, + > .btn-group { + margin-right: -1px; + } + } + &:last-child { + > .btn, + > .btn-group { + z-index: 2; + margin-left: -1px; + } + } +} diff --git a/docs/_assets/stylesheets/bootstrap/_jumbotron.scss b/docs/_assets/stylesheets/bootstrap/_jumbotron.scss new file mode 100644 index 0000000000..439d23de25 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_jumbotron.scss @@ -0,0 +1,52 @@ +// +// Jumbotron +// -------------------------------------------------- + + +.jumbotron { + padding-top: $jumbotron-padding; + padding-bottom: $jumbotron-padding; + margin-bottom: $jumbotron-padding; + color: $jumbotron-color; + background-color: $jumbotron-bg; + + h1, + .h1 { + color: $jumbotron-heading-color; + } + + p { + margin-bottom: ($jumbotron-padding / 2); + font-size: $jumbotron-font-size; + font-weight: 200; + } + + > hr { + border-top-color: darken($jumbotron-bg, 10%); + } + + .container &, + .container-fluid & { + border-radius: $border-radius-large; // Only round corners at higher resolutions if contained in a container + } + + .container { + max-width: 100%; + } + + @media screen and (min-width: $screen-sm-min) { + padding-top: ($jumbotron-padding * 1.6); + padding-bottom: ($jumbotron-padding * 1.6); + + .container &, + .container-fluid & { + padding-left: ($jumbotron-padding * 2); + padding-right: ($jumbotron-padding * 2); + } + + h1, + .h1 { + font-size: $jumbotron-heading-font-size; + } + } +} diff --git a/docs/_assets/stylesheets/bootstrap/_labels.scss b/docs/_assets/stylesheets/bootstrap/_labels.scss new file mode 100644 index 0000000000..42ed6ea123 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_labels.scss @@ -0,0 +1,66 @@ +// +// Labels +// -------------------------------------------------- + +.label { + display: inline; + padding: .2em .6em .3em; + font-size: 75%; + font-weight: bold; + line-height: 1; + color: $label-color; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: .25em; + + // [converter] extracted a& to a.label + + // Empty labels collapse automatically (not available in IE8) + &:empty { + display: none; + } + + // Quick fix for labels in buttons + .btn & { + position: relative; + top: -1px; + } +} + +// Add hover effects, but only for links +a.label { + &:hover, + &:focus { + color: $label-link-hover-color; + text-decoration: none; + cursor: pointer; + } +} + +// Colors +// Contextual variations (linked labels get darker on :hover) + +.label-default { + @include label-variant($label-default-bg); +} + +.label-primary { + @include label-variant($label-primary-bg); +} + +.label-success { + @include label-variant($label-success-bg); +} + +.label-info { + @include label-variant($label-info-bg); +} + +.label-warning { + @include label-variant($label-warning-bg); +} + +.label-danger { + @include label-variant($label-danger-bg); +} diff --git a/docs/_assets/stylesheets/bootstrap/_list-group.scss b/docs/_assets/stylesheets/bootstrap/_list-group.scss new file mode 100644 index 0000000000..7cb83aab05 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_list-group.scss @@ -0,0 +1,130 @@ +// +// List groups +// -------------------------------------------------- + + +// Base class +// +// Easily usable on
      ,
        , or
        . + +.list-group { + // No need to set list-style: none; since .list-group-item is block level + margin-bottom: 20px; + padding-left: 0; // reset padding because ul and ol +} + + +// Individual list items +// +// Use on `li`s or `div`s within the `.list-group` parent. + +.list-group-item { + position: relative; + display: block; + padding: 10px 15px; + // Place the border on the list items and negative margin up for better styling + margin-bottom: -1px; + background-color: $list-group-bg; + border: 1px solid $list-group-border; + + // Round the first and last items + &:first-child { + @include border-top-radius($list-group-border-radius); + } + &:last-child { + margin-bottom: 0; + @include border-bottom-radius($list-group-border-radius); + } +} + + +// Interactive list items +// +// Use anchor or button elements instead of `li`s or `div`s to create interactive items. +// Includes an extra `.active` modifier class for showing selected items. + +a.list-group-item, +button.list-group-item { + color: $list-group-link-color; + + .list-group-item-heading { + color: $list-group-link-heading-color; + } + + // Hover state + &:hover, + &:focus { + text-decoration: none; + color: $list-group-link-hover-color; + background-color: $list-group-hover-bg; + } +} + +button.list-group-item { + width: 100%; + text-align: left; +} + +.list-group-item { + // Disabled state + &.disabled, + &.disabled:hover, + &.disabled:focus { + background-color: $list-group-disabled-bg; + color: $list-group-disabled-color; + cursor: $cursor-disabled; + + // Force color to inherit for custom content + .list-group-item-heading { + color: inherit; + } + .list-group-item-text { + color: $list-group-disabled-text-color; + } + } + + // Active class on item itself, not parent + &.active, + &.active:hover, + &.active:focus { + z-index: 2; // Place active items above their siblings for proper border styling + color: $list-group-active-color; + background-color: $list-group-active-bg; + border-color: $list-group-active-border; + + // Force color to inherit for custom content + .list-group-item-heading, + .list-group-item-heading > small, + .list-group-item-heading > .small { + color: inherit; + } + .list-group-item-text { + color: $list-group-active-text-color; + } + } +} + + +// Contextual variants +// +// Add modifier classes to change text and background color on individual items. +// Organizationally, this must come after the `:hover` states. + +@include list-group-item-variant(success, $state-success-bg, $state-success-text); +@include list-group-item-variant(info, $state-info-bg, $state-info-text); +@include list-group-item-variant(warning, $state-warning-bg, $state-warning-text); +@include list-group-item-variant(danger, $state-danger-bg, $state-danger-text); + + +// Custom content options +// +// Extra classes for creating well-formatted content within `.list-group-item`s. + +.list-group-item-heading { + margin-top: 0; + margin-bottom: 5px; +} +.list-group-item-text { + margin-bottom: 0; + line-height: 1.3; +} diff --git a/docs/_assets/stylesheets/bootstrap/_media.scss b/docs/_assets/stylesheets/bootstrap/_media.scss new file mode 100644 index 0000000000..8c835e861e --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_media.scss @@ -0,0 +1,66 @@ +.media { + // Proper spacing between instances of .media + margin-top: 15px; + + &:first-child { + margin-top: 0; + } +} + +.media, +.media-body { + zoom: 1; + overflow: hidden; +} + +.media-body { + width: 10000px; +} + +.media-object { + display: block; + + // Fix collapse in webkit from max-width: 100% and display: table-cell. + &.img-thumbnail { + max-width: none; + } +} + +.media-right, +.media > .pull-right { + padding-left: 10px; +} + +.media-left, +.media > .pull-left { + padding-right: 10px; +} + +.media-left, +.media-right, +.media-body { + display: table-cell; + vertical-align: top; +} + +.media-middle { + vertical-align: middle; +} + +.media-bottom { + vertical-align: bottom; +} + +// Reset margins on headings for tighter default spacing +.media-heading { + margin-top: 0; + margin-bottom: 5px; +} + +// Media list variation +// +// Undo default ul/ol styles +.media-list { + padding-left: 0; + list-style: none; +} diff --git a/docs/_assets/stylesheets/bootstrap/_mixins.scss b/docs/_assets/stylesheets/bootstrap/_mixins.scss new file mode 100644 index 0000000000..78cd5aa0ff --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_mixins.scss @@ -0,0 +1,40 @@ +// Mixins +// -------------------------------------------------- + +// Utilities +@import "mixins/hide-text"; +@import "mixins/opacity"; +@import "mixins/image"; +@import "mixins/labels"; +@import "mixins/reset-filter"; +@import "mixins/resize"; +@import "mixins/responsive-visibility"; +@import "mixins/size"; +@import "mixins/tab-focus"; +@import "mixins/reset-text"; +@import "mixins/text-emphasis"; +@import "mixins/text-overflow"; +@import "mixins/vendor-prefixes"; + +// Components +@import "mixins/alerts"; +@import "mixins/buttons"; +@import "mixins/panels"; +@import "mixins/pagination"; +@import "mixins/list-group"; +@import "mixins/nav-divider"; +@import "mixins/forms"; +@import "mixins/progress-bar"; +@import "mixins/table-row"; + +// Skins +@import "mixins/background-variant"; +@import "mixins/border-radius"; +@import "mixins/gradients"; + +// Layout +@import "mixins/clearfix"; +@import "mixins/center-block"; +@import "mixins/nav-vertical-align"; +@import "mixins/grid-framework"; +@import "mixins/grid"; diff --git a/docs/_assets/stylesheets/bootstrap/_modals.scss b/docs/_assets/stylesheets/bootstrap/_modals.scss new file mode 100644 index 0000000000..837558e934 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_modals.scss @@ -0,0 +1,150 @@ +// +// Modals +// -------------------------------------------------- + +// .modal-open - body class for killing the scroll +// .modal - container to scroll within +// .modal-dialog - positioning shell for the actual modal +// .modal-content - actual modal w/ bg and corners and shit + +// Kill the scroll on the body +.modal-open { + overflow: hidden; +} + +// Container that the modal scrolls within +.modal { + display: none; + overflow: hidden; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: $zindex-modal; + -webkit-overflow-scrolling: touch; + + // Prevent Chrome on Windows from adding a focus outline. For details, see + // https://github.com/twbs/bootstrap/pull/10951. + outline: 0; + + // When fading in the modal, animate it to slide down + &.fade .modal-dialog { + @include translate(0, -25%); + @include transition-transform(0.3s ease-out); + } + &.in .modal-dialog { @include translate(0, 0) } +} +.modal-open .modal { + overflow-x: hidden; + overflow-y: auto; +} + +// Shell div to position the modal with bottom padding +.modal-dialog { + position: relative; + width: auto; + margin: 10px; +} + +// Actual modal +.modal-content { + position: relative; + background-color: $modal-content-bg; + border: 1px solid $modal-content-fallback-border-color; //old browsers fallback (ie8 etc) + border: 1px solid $modal-content-border-color; + border-radius: $border-radius-large; + @include box-shadow(0 3px 9px rgba(0,0,0,.5)); + background-clip: padding-box; + // Remove focus outline from opened modal + outline: 0; +} + +// Modal background +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: $zindex-modal-background; + background-color: $modal-backdrop-bg; + // Fade for backdrop + &.fade { @include opacity(0); } + &.in { @include opacity($modal-backdrop-opacity); } +} + +// Modal header +// Top section of the modal w/ title and dismiss +.modal-header { + padding: $modal-title-padding; + border-bottom: 1px solid $modal-header-border-color; + min-height: ($modal-title-padding + $modal-title-line-height); +} +// Close icon +.modal-header .close { + margin-top: -2px; +} + +// Title text within header +.modal-title { + margin: 0; + line-height: $modal-title-line-height; +} + +// Modal body +// Where all modal content resides (sibling of .modal-header and .modal-footer) +.modal-body { + position: relative; + padding: $modal-inner-padding; +} + +// Footer (for actions) +.modal-footer { + padding: $modal-inner-padding; + text-align: right; // right align buttons + border-top: 1px solid $modal-footer-border-color; + @include clearfix; // clear it in case folks use .pull-* classes on buttons + + // Properly space out buttons + .btn + .btn { + margin-left: 5px; + margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs + } + // but override that for button groups + .btn-group .btn + .btn { + margin-left: -1px; + } + // and override it for block buttons as well + .btn-block + .btn-block { + margin-left: 0; + } +} + +// Measure scrollbar width for padding body during modal show/hide +.modal-scrollbar-measure { + position: absolute; + top: -9999px; + width: 50px; + height: 50px; + overflow: scroll; +} + +// Scale up the modal +@media (min-width: $screen-sm-min) { + // Automatically set modal's width for larger viewports + .modal-dialog { + width: $modal-md; + margin: 30px auto; + } + .modal-content { + @include box-shadow(0 5px 15px rgba(0,0,0,.5)); + } + + // Modal sizes + .modal-sm { width: $modal-sm; } +} + +@media (min-width: $screen-md-min) { + .modal-lg { width: $modal-lg; } +} diff --git a/docs/_assets/stylesheets/bootstrap/_navbar.scss b/docs/_assets/stylesheets/bootstrap/_navbar.scss new file mode 100644 index 0000000000..11e5c01c15 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_navbar.scss @@ -0,0 +1,662 @@ +// +// Navbars +// -------------------------------------------------- + + +// Wrapper and base class +// +// Provide a static navbar from which we expand to create full-width, fixed, and +// other navbar variations. + +.navbar { + position: relative; + min-height: $navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode) + margin-bottom: $navbar-margin-bottom; + border: 1px solid transparent; + + // Prevent floats from breaking the navbar + @include clearfix; + + @media (min-width: $grid-float-breakpoint) { + border-radius: $navbar-border-radius; + } +} + + +// Navbar heading +// +// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy +// styling of responsive aspects. + +.navbar-header { + @include clearfix; + + @media (min-width: $grid-float-breakpoint) { + float: left; + } +} + + +// Navbar collapse (body) +// +// Group your navbar content into this for easy collapsing and expanding across +// various device sizes. By default, this content is collapsed when <768px, but +// will expand past that for a horizontal display. +// +// To start (on mobile devices) the navbar links, forms, and buttons are stacked +// vertically and include a `max-height` to overflow in case you have too much +// content for the user's viewport. + +.navbar-collapse { + overflow-x: visible; + padding-right: $navbar-padding-horizontal; + padding-left: $navbar-padding-horizontal; + border-top: 1px solid transparent; + box-shadow: inset 0 1px 0 rgba(255,255,255,.1); + @include clearfix; + -webkit-overflow-scrolling: touch; + + &.in { + overflow-y: auto; + } + + @media (min-width: $grid-float-breakpoint) { + width: auto; + border-top: 0; + box-shadow: none; + + &.collapse { + display: block !important; + height: auto !important; + padding-bottom: 0; // Override default setting + overflow: visible !important; + } + + &.in { + overflow-y: visible; + } + + // Undo the collapse side padding for navbars with containers to ensure + // alignment of right-aligned contents. + .navbar-fixed-top &, + .navbar-static-top &, + .navbar-fixed-bottom & { + padding-left: 0; + padding-right: 0; + } + } +} + +.navbar-fixed-top, +.navbar-fixed-bottom { + .navbar-collapse { + max-height: $navbar-collapse-max-height; + + @media (max-device-width: $screen-xs-min) and (orientation: landscape) { + max-height: 200px; + } + } +} + + +// Both navbar header and collapse +// +// When a container is present, change the behavior of the header and collapse. + +.container, +.container-fluid { + > .navbar-header, + > .navbar-collapse { + margin-right: -$navbar-padding-horizontal; + margin-left: -$navbar-padding-horizontal; + + @media (min-width: $grid-float-breakpoint) { + margin-right: 0; + margin-left: 0; + } + } +} + + +// +// Navbar alignment options +// +// Display the navbar across the entirety of the page or fixed it to the top or +// bottom of the page. + +// Static top (unfixed, but 100% wide) navbar +.navbar-static-top { + z-index: $zindex-navbar; + border-width: 0 0 1px; + + @media (min-width: $grid-float-breakpoint) { + border-radius: 0; + } +} + +// Fix the top/bottom navbars when screen real estate supports it +.navbar-fixed-top, +.navbar-fixed-bottom { + position: fixed; + right: 0; + left: 0; + z-index: $zindex-navbar-fixed; + + // Undo the rounded corners + @media (min-width: $grid-float-breakpoint) { + border-radius: 0; + } +} +.navbar-fixed-top { + top: 0; + border-width: 0 0 1px; +} +.navbar-fixed-bottom { + bottom: 0; + margin-bottom: 0; // override .navbar defaults + border-width: 1px 0 0; +} + + +// Brand/project name + +.navbar-brand { + float: left; + padding: $navbar-padding-vertical $navbar-padding-horizontal; + font-size: $font-size-large; + line-height: $line-height-computed; + height: $navbar-height; + + &:hover, + &:focus { + text-decoration: none; + } + + > img { + display: block; + } + + @media (min-width: $grid-float-breakpoint) { + .navbar > .container &, + .navbar > .container-fluid & { + margin-left: -$navbar-padding-horizontal; + } + } +} + + +// Navbar toggle +// +// Custom button for toggling the `.navbar-collapse`, powered by the collapse +// JavaScript plugin. + +.navbar-toggle { + position: relative; + float: right; + margin-right: $navbar-padding-horizontal; + padding: 9px 10px; + @include navbar-vertical-align(34px); + background-color: transparent; + background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 + border: 1px solid transparent; + border-radius: $border-radius-base; + + // We remove the `outline` here, but later compensate by attaching `:hover` + // styles to `:focus`. + &:focus { + outline: 0; + } + + // Bars + .icon-bar { + display: block; + width: 22px; + height: 2px; + border-radius: 1px; + } + .icon-bar + .icon-bar { + margin-top: 4px; + } + + @media (min-width: $grid-float-breakpoint) { + display: none; + } +} + + +// Navbar nav links +// +// Builds on top of the `.nav` components with its own modifier class to make +// the nav the full height of the horizontal nav (above 768px). + +.navbar-nav { + margin: ($navbar-padding-vertical / 2) (-$navbar-padding-horizontal); + + > li > a { + padding-top: 10px; + padding-bottom: 10px; + line-height: $line-height-computed; + } + + @media (max-width: $grid-float-breakpoint-max) { + // Dropdowns get custom display when collapsed + .open .dropdown-menu { + position: static; + float: none; + width: auto; + margin-top: 0; + background-color: transparent; + border: 0; + box-shadow: none; + > li > a, + .dropdown-header { + padding: 5px 15px 5px 25px; + } + > li > a { + line-height: $line-height-computed; + &:hover, + &:focus { + background-image: none; + } + } + } + } + + // Uncollapse the nav + @media (min-width: $grid-float-breakpoint) { + float: left; + margin: 0; + + > li { + float: left; + > a { + padding-top: $navbar-padding-vertical; + padding-bottom: $navbar-padding-vertical; + } + } + } +} + + +// Navbar form +// +// Extension of the `.form-inline` with some extra flavor for optimum display in +// our navbars. + +.navbar-form { + margin-left: -$navbar-padding-horizontal; + margin-right: -$navbar-padding-horizontal; + padding: 10px $navbar-padding-horizontal; + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; + $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); + @include box-shadow($shadow); + + // Mixin behavior for optimum display + @include form-inline; + + .form-group { + @media (max-width: $grid-float-breakpoint-max) { + margin-bottom: 5px; + + &:last-child { + margin-bottom: 0; + } + } + } + + // Vertically center in expanded, horizontal navbar + @include navbar-vertical-align($input-height-base); + + // Undo 100% width for pull classes + @media (min-width: $grid-float-breakpoint) { + width: auto; + border: 0; + margin-left: 0; + margin-right: 0; + padding-top: 0; + padding-bottom: 0; + @include box-shadow(none); + } +} + + +// Dropdown menus + +// Menu position and menu carets +.navbar-nav > li > .dropdown-menu { + margin-top: 0; + @include border-top-radius(0); +} +// Menu position and menu caret support for dropups via extra dropup class +.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { + margin-bottom: 0; + @include border-top-radius($navbar-border-radius); + @include border-bottom-radius(0); +} + + +// Buttons in navbars +// +// Vertically center a button within a navbar (when *not* in a form). + +.navbar-btn { + @include navbar-vertical-align($input-height-base); + + &.btn-sm { + @include navbar-vertical-align($input-height-small); + } + &.btn-xs { + @include navbar-vertical-align(22); + } +} + + +// Text in navbars +// +// Add a class to make any element properly align itself vertically within the navbars. + +.navbar-text { + @include navbar-vertical-align($line-height-computed); + + @media (min-width: $grid-float-breakpoint) { + float: left; + margin-left: $navbar-padding-horizontal; + margin-right: $navbar-padding-horizontal; + } +} + + +// Component alignment +// +// Repurpose the pull utilities as their own navbar utilities to avoid specificity +// issues with parents and chaining. Only do this when the navbar is uncollapsed +// though so that navbar contents properly stack and align in mobile. +// +// Declared after the navbar components to ensure more specificity on the margins. + +@media (min-width: $grid-float-breakpoint) { + .navbar-left { + float: left !important; + } + .navbar-right { + float: right !important; + margin-right: -$navbar-padding-horizontal; + + ~ .navbar-right { + margin-right: 0; + } + } +} + + +// Alternate navbars +// -------------------------------------------------- + +// Default navbar +.navbar-default { + background-color: $navbar-default-bg; + border-color: $navbar-default-border; + + .navbar-brand { + color: $navbar-default-brand-color; + &:hover, + &:focus { + color: $navbar-default-brand-hover-color; + background-color: $navbar-default-brand-hover-bg; + } + } + + .navbar-text { + color: $navbar-default-color; + } + + .navbar-nav { + > li > a { + color: $navbar-default-link-color; + + &:hover, + &:focus { + color: $navbar-default-link-hover-color; + background-color: $navbar-default-link-hover-bg; + } + } + > .active > a { + &, + &:hover, + &:focus { + color: $navbar-default-link-active-color; + background-color: $navbar-default-link-active-bg; + } + } + > .disabled > a { + &, + &:hover, + &:focus { + color: $navbar-default-link-disabled-color; + background-color: $navbar-default-link-disabled-bg; + } + } + } + + .navbar-toggle { + border-color: $navbar-default-toggle-border-color; + &:hover, + &:focus { + background-color: $navbar-default-toggle-hover-bg; + } + .icon-bar { + background-color: $navbar-default-toggle-icon-bar-bg; + } + } + + .navbar-collapse, + .navbar-form { + border-color: $navbar-default-border; + } + + // Dropdown menu items + .navbar-nav { + // Remove background color from open dropdown + > .open > a { + &, + &:hover, + &:focus { + background-color: $navbar-default-link-active-bg; + color: $navbar-default-link-active-color; + } + } + + @media (max-width: $grid-float-breakpoint-max) { + // Dropdowns get custom display when collapsed + .open .dropdown-menu { + > li > a { + color: $navbar-default-link-color; + &:hover, + &:focus { + color: $navbar-default-link-hover-color; + background-color: $navbar-default-link-hover-bg; + } + } + > .active > a { + &, + &:hover, + &:focus { + color: $navbar-default-link-active-color; + background-color: $navbar-default-link-active-bg; + } + } + > .disabled > a { + &, + &:hover, + &:focus { + color: $navbar-default-link-disabled-color; + background-color: $navbar-default-link-disabled-bg; + } + } + } + } + } + + + // Links in navbars + // + // Add a class to ensure links outside the navbar nav are colored correctly. + + .navbar-link { + color: $navbar-default-link-color; + &:hover { + color: $navbar-default-link-hover-color; + } + } + + .btn-link { + color: $navbar-default-link-color; + &:hover, + &:focus { + color: $navbar-default-link-hover-color; + } + &[disabled], + fieldset[disabled] & { + &:hover, + &:focus { + color: $navbar-default-link-disabled-color; + } + } + } +} + +// Inverse navbar + +.navbar-inverse { + background-color: $navbar-inverse-bg; + border-color: $navbar-inverse-border; + + .navbar-brand { + color: $navbar-inverse-brand-color; + &:hover, + &:focus { + color: $navbar-inverse-brand-hover-color; + background-color: $navbar-inverse-brand-hover-bg; + } + } + + .navbar-text { + color: $navbar-inverse-color; + } + + .navbar-nav { + > li > a { + color: $navbar-inverse-link-color; + + &:hover, + &:focus { + color: $navbar-inverse-link-hover-color; + background-color: $navbar-inverse-link-hover-bg; + } + } + > .active > a { + &, + &:hover, + &:focus { + color: $navbar-inverse-link-active-color; + background-color: $navbar-inverse-link-active-bg; + } + } + > .disabled > a { + &, + &:hover, + &:focus { + color: $navbar-inverse-link-disabled-color; + background-color: $navbar-inverse-link-disabled-bg; + } + } + } + + // Darken the responsive nav toggle + .navbar-toggle { + border-color: $navbar-inverse-toggle-border-color; + &:hover, + &:focus { + background-color: $navbar-inverse-toggle-hover-bg; + } + .icon-bar { + background-color: $navbar-inverse-toggle-icon-bar-bg; + } + } + + .navbar-collapse, + .navbar-form { + border-color: darken($navbar-inverse-bg, 7%); + } + + // Dropdowns + .navbar-nav { + > .open > a { + &, + &:hover, + &:focus { + background-color: $navbar-inverse-link-active-bg; + color: $navbar-inverse-link-active-color; + } + } + + @media (max-width: $grid-float-breakpoint-max) { + // Dropdowns get custom display + .open .dropdown-menu { + > .dropdown-header { + border-color: $navbar-inverse-border; + } + .divider { + background-color: $navbar-inverse-border; + } + > li > a { + color: $navbar-inverse-link-color; + &:hover, + &:focus { + color: $navbar-inverse-link-hover-color; + background-color: $navbar-inverse-link-hover-bg; + } + } + > .active > a { + &, + &:hover, + &:focus { + color: $navbar-inverse-link-active-color; + background-color: $navbar-inverse-link-active-bg; + } + } + > .disabled > a { + &, + &:hover, + &:focus { + color: $navbar-inverse-link-disabled-color; + background-color: $navbar-inverse-link-disabled-bg; + } + } + } + } + } + + .navbar-link { + color: $navbar-inverse-link-color; + &:hover { + color: $navbar-inverse-link-hover-color; + } + } + + .btn-link { + color: $navbar-inverse-link-color; + &:hover, + &:focus { + color: $navbar-inverse-link-hover-color; + } + &[disabled], + fieldset[disabled] & { + &:hover, + &:focus { + color: $navbar-inverse-link-disabled-color; + } + } + } +} diff --git a/docs/_assets/stylesheets/bootstrap/_navs.scss b/docs/_assets/stylesheets/bootstrap/_navs.scss new file mode 100644 index 0000000000..9d369f3079 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_navs.scss @@ -0,0 +1,242 @@ +// +// Navs +// -------------------------------------------------- + + +// Base class +// -------------------------------------------------- + +.nav { + margin-bottom: 0; + padding-left: 0; // Override default ul/ol + list-style: none; + @include clearfix; + + > li { + position: relative; + display: block; + + > a { + position: relative; + display: block; + padding: $nav-link-padding; + &:hover, + &:focus { + text-decoration: none; + background-color: $nav-link-hover-bg; + } + } + + // Disabled state sets text to gray and nukes hover/tab effects + &.disabled > a { + color: $nav-disabled-link-color; + + &:hover, + &:focus { + color: $nav-disabled-link-hover-color; + text-decoration: none; + background-color: transparent; + cursor: $cursor-disabled; + } + } + } + + // Open dropdowns + .open > a { + &, + &:hover, + &:focus { + background-color: $nav-link-hover-bg; + border-color: $link-color; + } + } + + // Nav dividers (deprecated with v3.0.1) + // + // This should have been removed in v3 with the dropping of `.nav-list`, but + // we missed it. We don't currently support this anywhere, but in the interest + // of maintaining backward compatibility in case you use it, it's deprecated. + .nav-divider { + @include nav-divider; + } + + // Prevent IE8 from misplacing imgs + // + // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989 + > li > a > img { + max-width: none; + } +} + + +// Tabs +// ------------------------- + +// Give the tabs something to sit on +.nav-tabs { + border-bottom: 1px solid $nav-tabs-border-color; + > li { + float: left; + // Make the list-items overlay the bottom border + margin-bottom: -1px; + + // Actual tabs (as links) + > a { + margin-right: 2px; + line-height: $line-height-base; + border: 1px solid transparent; + border-radius: $border-radius-base $border-radius-base 0 0; + &:hover { + border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color; + } + } + + // Active state, and its :hover to override normal :hover + &.active > a { + &, + &:hover, + &:focus { + color: $nav-tabs-active-link-hover-color; + background-color: $nav-tabs-active-link-hover-bg; + border: 1px solid $nav-tabs-active-link-hover-border-color; + border-bottom-color: transparent; + cursor: default; + } + } + } + // pulling this in mainly for less shorthand + &.nav-justified { + @extend .nav-justified; + @extend .nav-tabs-justified; + } +} + + +// Pills +// ------------------------- +.nav-pills { + > li { + float: left; + + // Links rendered as pills + > a { + border-radius: $nav-pills-border-radius; + } + + li { + margin-left: 2px; + } + + // Active state + &.active > a { + &, + &:hover, + &:focus { + color: $nav-pills-active-link-hover-color; + background-color: $nav-pills-active-link-hover-bg; + } + } + } +} + + +// Stacked pills +.nav-stacked { + > li { + float: none; + + li { + margin-top: 2px; + margin-left: 0; // no need for this gap between nav items + } + } +} + + +// Nav variations +// -------------------------------------------------- + +// Justified nav links +// ------------------------- + +.nav-justified { + width: 100%; + + > li { + float: none; + > a { + text-align: center; + margin-bottom: 5px; + } + } + + > .dropdown .dropdown-menu { + top: auto; + left: auto; + } + + @media (min-width: $screen-sm-min) { + > li { + display: table-cell; + width: 1%; + > a { + margin-bottom: 0; + } + } + } +} + +// Move borders to anchors instead of bottom of list +// +// Mixin for adding on top the shared `.nav-justified` styles for our tabs +.nav-tabs-justified { + border-bottom: 0; + + > li > a { + // Override margin from .nav-tabs + margin-right: 0; + border-radius: $border-radius-base; + } + + > .active > a, + > .active > a:hover, + > .active > a:focus { + border: 1px solid $nav-tabs-justified-link-border-color; + } + + @media (min-width: $screen-sm-min) { + > li > a { + border-bottom: 1px solid $nav-tabs-justified-link-border-color; + border-radius: $border-radius-base $border-radius-base 0 0; + } + > .active > a, + > .active > a:hover, + > .active > a:focus { + border-bottom-color: $nav-tabs-justified-active-link-border-color; + } + } +} + + +// Tabbable tabs +// ------------------------- + +// Hide tabbable panes to start, show them when `.active` +.tab-content { + > .tab-pane { + display: none; + } + > .active { + display: block; + } +} + + +// Dropdowns +// ------------------------- + +// Specific dropdowns +.nav-tabs .dropdown-menu { + // make dropdown border overlap tab border + margin-top: -1px; + // Remove the top rounded corners here since there is a hard edge above the menu + @include border-top-radius(0); +} diff --git a/docs/_assets/stylesheets/bootstrap/_normalize.scss b/docs/_assets/stylesheets/bootstrap/_normalize.scss new file mode 100644 index 0000000000..9dddf73ad2 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_normalize.scss @@ -0,0 +1,424 @@ +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ + +// +// 1. Set default font family to sans-serif. +// 2. Prevent iOS and IE text size adjust after device orientation change, +// without disabling user zoom. +// + +html { + font-family: sans-serif; // 1 + -ms-text-size-adjust: 100%; // 2 + -webkit-text-size-adjust: 100%; // 2 +} + +// +// Remove default margin. +// + +body { + margin: 0; +} + +// HTML5 display definitions +// ========================================================================== + +// +// Correct `block` display not defined for any HTML5 element in IE 8/9. +// Correct `block` display not defined for `details` or `summary` in IE 10/11 +// and Firefox. +// Correct `block` display not defined for `main` in IE 11. +// + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} + +// +// 1. Correct `inline-block` display not defined in IE 8/9. +// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. +// + +audio, +canvas, +progress, +video { + display: inline-block; // 1 + vertical-align: baseline; // 2 +} + +// +// Prevent modern browsers from displaying `audio` without controls. +// Remove excess height in iOS 5 devices. +// + +audio:not([controls]) { + display: none; + height: 0; +} + +// +// Address `[hidden]` styling not present in IE 8/9/10. +// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. +// + +[hidden], +template { + display: none; +} + +// Links +// ========================================================================== + +// +// Remove the gray background color from active links in IE 10. +// + +a { + background-color: transparent; +} + +// +// Improve readability of focused elements when they are also in an +// active/hover state. +// + +a:active, +a:hover { + outline: 0; +} + +// Text-level semantics +// ========================================================================== + +// +// Address styling not present in IE 8/9/10/11, Safari, and Chrome. +// + +abbr[title] { + border-bottom: 1px dotted; +} + +// +// Address style set to `bolder` in Firefox 4+, Safari, and Chrome. +// + +b, +strong { + font-weight: bold; +} + +// +// Address styling not present in Safari and Chrome. +// + +dfn { + font-style: italic; +} + +// +// Address variable `h1` font-size and margin within `section` and `article` +// contexts in Firefox 4+, Safari, and Chrome. +// + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +// +// Address styling not present in IE 8/9. +// + +mark { + background: #ff0; + color: #000; +} + +// +// Address inconsistent and variable font size in all browsers. +// + +small { + font-size: 80%; +} + +// +// Prevent `sub` and `sup` affecting `line-height` in all browsers. +// + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +// Embedded content +// ========================================================================== + +// +// Remove border when inside `a` element in IE 8/9/10. +// + +img { + border: 0; +} + +// +// Correct overflow not hidden in IE 9/10/11. +// + +svg:not(:root) { + overflow: hidden; +} + +// Grouping content +// ========================================================================== + +// +// Address margin not present in IE 8/9 and Safari. +// + +figure { + margin: 1em 40px; +} + +// +// Address differences between Firefox and other browsers. +// + +hr { + box-sizing: content-box; + height: 0; +} + +// +// Contain overflow in all browsers. +// + +pre { + overflow: auto; +} + +// +// Address odd `em`-unit font size rendering in all browsers. +// + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +// Forms +// ========================================================================== + +// +// Known limitation: by default, Chrome and Safari on OS X allow very limited +// styling of `select`, unless a `border` property is set. +// + +// +// 1. Correct color not being inherited. +// Known issue: affects color of disabled elements. +// 2. Correct font properties not being inherited. +// 3. Address margins set differently in Firefox 4+, Safari, and Chrome. +// + +button, +input, +optgroup, +select, +textarea { + color: inherit; // 1 + font: inherit; // 2 + margin: 0; // 3 +} + +// +// Address `overflow` set to `hidden` in IE 8/9/10/11. +// + +button { + overflow: visible; +} + +// +// Address inconsistent `text-transform` inheritance for `button` and `select`. +// All other form control elements do not inherit `text-transform` values. +// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. +// Correct `select` style inheritance in Firefox. +// + +button, +select { + text-transform: none; +} + +// +// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` +// and `video` controls. +// 2. Correct inability to style clickable `input` types in iOS. +// 3. Improve usability and consistency of cursor style between image-type +// `input` and others. +// + +button, +html input[type="button"], // 1 +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; // 2 + cursor: pointer; // 3 +} + +// +// Re-set default cursor for disabled elements. +// + +button[disabled], +html input[disabled] { + cursor: default; +} + +// +// Remove inner padding and border in Firefox 4+. +// + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +// +// Address Firefox 4+ setting `line-height` on `input` using `!important` in +// the UA stylesheet. +// + +input { + line-height: normal; +} + +// +// It's recommended that you don't attempt to style these elements. +// Firefox's implementation doesn't respect box-sizing, padding, or width. +// +// 1. Address box sizing set to `content-box` in IE 8/9/10. +// 2. Remove excess padding in IE 8/9/10. +// + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; // 1 + padding: 0; // 2 +} + +// +// Fix the cursor style for Chrome's increment/decrement buttons. For certain +// `font-size` values of the `input`, it causes the cursor style of the +// decrement button to change from `default` to `text`. +// + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +// +// 1. Address `appearance` set to `searchfield` in Safari and Chrome. +// 2. Address `box-sizing` set to `border-box` in Safari and Chrome. +// + +input[type="search"] { + -webkit-appearance: textfield; // 1 + box-sizing: content-box; //2 +} + +// +// Remove inner padding and search cancel button in Safari and Chrome on OS X. +// Safari (but not Chrome) clips the cancel button when the search input has +// padding (and `textfield` appearance). +// + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +// +// Define consistent border, margin, and padding. +// + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +// +// 1. Correct `color` not being inherited in IE 8/9/10/11. +// 2. Remove padding so people aren't caught out if they zero out fieldsets. +// + +legend { + border: 0; // 1 + padding: 0; // 2 +} + +// +// Remove default vertical scrollbar in IE 8/9/10/11. +// + +textarea { + overflow: auto; +} + +// +// Don't inherit the `font-weight` (applied by a rule above). +// NOTE: the default cannot safely be changed in Chrome and Safari on OS X. +// + +optgroup { + font-weight: bold; +} + +// Tables +// ========================================================================== + +// +// Remove most spacing between table cells. +// + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} diff --git a/docs/_assets/stylesheets/bootstrap/_pager.scss b/docs/_assets/stylesheets/bootstrap/_pager.scss new file mode 100644 index 0000000000..c2342174ff --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_pager.scss @@ -0,0 +1,54 @@ +// +// Pager pagination +// -------------------------------------------------- + + +.pager { + padding-left: 0; + margin: $line-height-computed 0; + list-style: none; + text-align: center; + @include clearfix; + li { + display: inline; + > a, + > span { + display: inline-block; + padding: 5px 14px; + background-color: $pager-bg; + border: 1px solid $pager-border; + border-radius: $pager-border-radius; + } + + > a:hover, + > a:focus { + text-decoration: none; + background-color: $pager-hover-bg; + } + } + + .next { + > a, + > span { + float: right; + } + } + + .previous { + > a, + > span { + float: left; + } + } + + .disabled { + > a, + > a:hover, + > a:focus, + > span { + color: $pager-disabled-color; + background-color: $pager-bg; + cursor: $cursor-disabled; + } + } +} diff --git a/docs/_assets/stylesheets/bootstrap/_pagination.scss b/docs/_assets/stylesheets/bootstrap/_pagination.scss new file mode 100644 index 0000000000..fb23f9134f --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_pagination.scss @@ -0,0 +1,89 @@ +// +// Pagination (multiple pages) +// -------------------------------------------------- +.pagination { + display: inline-block; + padding-left: 0; + margin: $line-height-computed 0; + border-radius: $border-radius-base; + + > li { + display: inline; // Remove list-style and block-level defaults + > a, + > span { + position: relative; + float: left; // Collapse white-space + padding: $padding-base-vertical $padding-base-horizontal; + line-height: $line-height-base; + text-decoration: none; + color: $pagination-color; + background-color: $pagination-bg; + border: 1px solid $pagination-border; + margin-left: -1px; + } + &:first-child { + > a, + > span { + margin-left: 0; + @include border-left-radius($border-radius-base); + } + } + &:last-child { + > a, + > span { + @include border-right-radius($border-radius-base); + } + } + } + + > li > a, + > li > span { + &:hover, + &:focus { + z-index: 3; + color: $pagination-hover-color; + background-color: $pagination-hover-bg; + border-color: $pagination-hover-border; + } + } + + > .active > a, + > .active > span { + &, + &:hover, + &:focus { + z-index: 2; + color: $pagination-active-color; + background-color: $pagination-active-bg; + border-color: $pagination-active-border; + cursor: default; + } + } + + > .disabled { + > span, + > span:hover, + > span:focus, + > a, + > a:hover, + > a:focus { + color: $pagination-disabled-color; + background-color: $pagination-disabled-bg; + border-color: $pagination-disabled-border; + cursor: $cursor-disabled; + } + } +} + +// Sizing +// -------------------------------------------------- + +// Large +.pagination-lg { + @include pagination-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large); +} + +// Small +.pagination-sm { + @include pagination-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small); +} diff --git a/docs/_assets/stylesheets/bootstrap/_panels.scss b/docs/_assets/stylesheets/bootstrap/_panels.scss new file mode 100644 index 0000000000..be9410f5b9 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_panels.scss @@ -0,0 +1,271 @@ +// +// Panels +// -------------------------------------------------- + + +// Base class +.panel { + margin-bottom: $line-height-computed; + background-color: $panel-bg; + border: 1px solid transparent; + border-radius: $panel-border-radius; + @include box-shadow(0 1px 1px rgba(0,0,0,.05)); +} + +// Panel contents +.panel-body { + padding: $panel-body-padding; + @include clearfix; +} + +// Optional heading +.panel-heading { + padding: $panel-heading-padding; + border-bottom: 1px solid transparent; + @include border-top-radius(($panel-border-radius - 1)); + + > .dropdown .dropdown-toggle { + color: inherit; + } +} + +// Within heading, strip any `h*` tag of its default margins for spacing. +.panel-title { + margin-top: 0; + margin-bottom: 0; + font-size: ceil(($font-size-base * 1.125)); + color: inherit; + + > a, + > small, + > .small, + > small > a, + > .small > a { + color: inherit; + } +} + +// Optional footer (stays gray in every modifier class) +.panel-footer { + padding: $panel-footer-padding; + background-color: $panel-footer-bg; + border-top: 1px solid $panel-inner-border; + @include border-bottom-radius(($panel-border-radius - 1)); +} + + +// List groups in panels +// +// By default, space out list group content from panel headings to account for +// any kind of custom content between the two. + +.panel { + > .list-group, + > .panel-collapse > .list-group { + margin-bottom: 0; + + .list-group-item { + border-width: 1px 0; + border-radius: 0; + } + + // Add border top radius for first one + &:first-child { + .list-group-item:first-child { + border-top: 0; + @include border-top-radius(($panel-border-radius - 1)); + } + } + + // Add border bottom radius for last one + &:last-child { + .list-group-item:last-child { + border-bottom: 0; + @include border-bottom-radius(($panel-border-radius - 1)); + } + } + } + > .panel-heading + .panel-collapse > .list-group { + .list-group-item:first-child { + @include border-top-radius(0); + } + } +} +// Collapse space between when there's no additional content. +.panel-heading + .list-group { + .list-group-item:first-child { + border-top-width: 0; + } +} +.list-group + .panel-footer { + border-top-width: 0; +} + +// Tables in panels +// +// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and +// watch it go full width. + +.panel { + > .table, + > .table-responsive > .table, + > .panel-collapse > .table { + margin-bottom: 0; + + caption { + padding-left: $panel-body-padding; + padding-right: $panel-body-padding; + } + } + // Add border top radius for first one + > .table:first-child, + > .table-responsive:first-child > .table:first-child { + @include border-top-radius(($panel-border-radius - 1)); + + > thead:first-child, + > tbody:first-child { + > tr:first-child { + border-top-left-radius: ($panel-border-radius - 1); + border-top-right-radius: ($panel-border-radius - 1); + + td:first-child, + th:first-child { + border-top-left-radius: ($panel-border-radius - 1); + } + td:last-child, + th:last-child { + border-top-right-radius: ($panel-border-radius - 1); + } + } + } + } + // Add border bottom radius for last one + > .table:last-child, + > .table-responsive:last-child > .table:last-child { + @include border-bottom-radius(($panel-border-radius - 1)); + + > tbody:last-child, + > tfoot:last-child { + > tr:last-child { + border-bottom-left-radius: ($panel-border-radius - 1); + border-bottom-right-radius: ($panel-border-radius - 1); + + td:first-child, + th:first-child { + border-bottom-left-radius: ($panel-border-radius - 1); + } + td:last-child, + th:last-child { + border-bottom-right-radius: ($panel-border-radius - 1); + } + } + } + } + > .panel-body + .table, + > .panel-body + .table-responsive, + > .table + .panel-body, + > .table-responsive + .panel-body { + border-top: 1px solid $table-border-color; + } + > .table > tbody:first-child > tr:first-child th, + > .table > tbody:first-child > tr:first-child td { + border-top: 0; + } + > .table-bordered, + > .table-responsive > .table-bordered { + border: 0; + > thead, + > tbody, + > tfoot { + > tr { + > th:first-child, + > td:first-child { + border-left: 0; + } + > th:last-child, + > td:last-child { + border-right: 0; + } + } + } + > thead, + > tbody { + > tr:first-child { + > td, + > th { + border-bottom: 0; + } + } + } + > tbody, + > tfoot { + > tr:last-child { + > td, + > th { + border-bottom: 0; + } + } + } + } + > .table-responsive { + border: 0; + margin-bottom: 0; + } +} + + +// Collapsable panels (aka, accordion) +// +// Wrap a series of panels in `.panel-group` to turn them into an accordion with +// the help of our collapse JavaScript plugin. + +.panel-group { + margin-bottom: $line-height-computed; + + // Tighten up margin so it's only between panels + .panel { + margin-bottom: 0; + border-radius: $panel-border-radius; + + + .panel { + margin-top: 5px; + } + } + + .panel-heading { + border-bottom: 0; + + + .panel-collapse > .panel-body, + + .panel-collapse > .list-group { + border-top: 1px solid $panel-inner-border; + } + } + + .panel-footer { + border-top: 0; + + .panel-collapse .panel-body { + border-bottom: 1px solid $panel-inner-border; + } + } +} + + +// Contextual variations +.panel-default { + @include panel-variant($panel-default-border, $panel-default-text, $panel-default-heading-bg, $panel-default-border); +} +.panel-primary { + @include panel-variant($panel-primary-border, $panel-primary-text, $panel-primary-heading-bg, $panel-primary-border); +} +.panel-success { + @include panel-variant($panel-success-border, $panel-success-text, $panel-success-heading-bg, $panel-success-border); +} +.panel-info { + @include panel-variant($panel-info-border, $panel-info-text, $panel-info-heading-bg, $panel-info-border); +} +.panel-warning { + @include panel-variant($panel-warning-border, $panel-warning-text, $panel-warning-heading-bg, $panel-warning-border); +} +.panel-danger { + @include panel-variant($panel-danger-border, $panel-danger-text, $panel-danger-heading-bg, $panel-danger-border); +} diff --git a/docs/_assets/stylesheets/bootstrap/_popovers.scss b/docs/_assets/stylesheets/bootstrap/_popovers.scss new file mode 100644 index 0000000000..9b90a2e964 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_popovers.scss @@ -0,0 +1,131 @@ +// +// Popovers +// -------------------------------------------------- + + +.popover { + position: absolute; + top: 0; + left: 0; + z-index: $zindex-popover; + display: none; + max-width: $popover-max-width; + padding: 1px; + // Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element. + // So reset our font and text properties to avoid inheriting weird values. + @include reset-text; + font-size: $font-size-base; + + background-color: $popover-bg; + background-clip: padding-box; + border: 1px solid $popover-fallback-border-color; + border: 1px solid $popover-border-color; + border-radius: $border-radius-large; + @include box-shadow(0 5px 10px rgba(0,0,0,.2)); + + // Offset the popover to account for the popover arrow + &.top { margin-top: -$popover-arrow-width; } + &.right { margin-left: $popover-arrow-width; } + &.bottom { margin-top: $popover-arrow-width; } + &.left { margin-left: -$popover-arrow-width; } +} + +.popover-title { + margin: 0; // reset heading margin + padding: 8px 14px; + font-size: $font-size-base; + background-color: $popover-title-bg; + border-bottom: 1px solid darken($popover-title-bg, 5%); + border-radius: ($border-radius-large - 1) ($border-radius-large - 1) 0 0; +} + +.popover-content { + padding: 9px 14px; +} + +// Arrows +// +// .arrow is outer, .arrow:after is inner + +.popover > .arrow { + &, + &:after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } +} +.popover > .arrow { + border-width: $popover-arrow-outer-width; +} +.popover > .arrow:after { + border-width: $popover-arrow-width; + content: ""; +} + +.popover { + &.top > .arrow { + left: 50%; + margin-left: -$popover-arrow-outer-width; + border-bottom-width: 0; + border-top-color: $popover-arrow-outer-fallback-color; // IE8 fallback + border-top-color: $popover-arrow-outer-color; + bottom: -$popover-arrow-outer-width; + &:after { + content: " "; + bottom: 1px; + margin-left: -$popover-arrow-width; + border-bottom-width: 0; + border-top-color: $popover-arrow-color; + } + } + &.right > .arrow { + top: 50%; + left: -$popover-arrow-outer-width; + margin-top: -$popover-arrow-outer-width; + border-left-width: 0; + border-right-color: $popover-arrow-outer-fallback-color; // IE8 fallback + border-right-color: $popover-arrow-outer-color; + &:after { + content: " "; + left: 1px; + bottom: -$popover-arrow-width; + border-left-width: 0; + border-right-color: $popover-arrow-color; + } + } + &.bottom > .arrow { + left: 50%; + margin-left: -$popover-arrow-outer-width; + border-top-width: 0; + border-bottom-color: $popover-arrow-outer-fallback-color; // IE8 fallback + border-bottom-color: $popover-arrow-outer-color; + top: -$popover-arrow-outer-width; + &:after { + content: " "; + top: 1px; + margin-left: -$popover-arrow-width; + border-top-width: 0; + border-bottom-color: $popover-arrow-color; + } + } + + &.left > .arrow { + top: 50%; + right: -$popover-arrow-outer-width; + margin-top: -$popover-arrow-outer-width; + border-right-width: 0; + border-left-color: $popover-arrow-outer-fallback-color; // IE8 fallback + border-left-color: $popover-arrow-outer-color; + &:after { + content: " "; + right: 1px; + border-right-width: 0; + border-left-color: $popover-arrow-color; + bottom: -$popover-arrow-width; + } + } +} diff --git a/docs/_assets/stylesheets/bootstrap/_print.scss b/docs/_assets/stylesheets/bootstrap/_print.scss new file mode 100644 index 0000000000..66e54ab489 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_print.scss @@ -0,0 +1,101 @@ +/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */ + +// ========================================================================== +// Print styles. +// Inlined to avoid the additional HTTP request: h5bp.com/r +// ========================================================================== + +@media print { + *, + *:before, + *:after { + background: transparent !important; + color: #000 !important; // Black prints faster: h5bp.com/s + box-shadow: none !important; + text-shadow: none !important; + } + + a, + a:visited { + text-decoration: underline; + } + + a[href]:after { + content: " (" attr(href) ")"; + } + + abbr[title]:after { + content: " (" attr(title) ")"; + } + + // Don't show links that are fragment identifiers, + // or use the `javascript:` pseudo protocol + a[href^="#"]:after, + a[href^="javascript:"]:after { + content: ""; + } + + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + thead { + display: table-header-group; // h5bp.com/t + } + + tr, + img { + page-break-inside: avoid; + } + + img { + max-width: 100% !important; + } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { + page-break-after: avoid; + } + + // Bootstrap specific changes start + + // Bootstrap components + .navbar { + display: none; + } + .btn, + .dropup > .btn { + > .caret { + border-top-color: #000 !important; + } + } + .label { + border: 1px solid #000; + } + + .table { + border-collapse: collapse !important; + + td, + th { + background-color: #fff !important; + } + } + .table-bordered { + th, + td { + border: 1px solid #ddd !important; + } + } + + // Bootstrap specific changes end +} diff --git a/docs/_assets/stylesheets/bootstrap/_progress-bars.scss b/docs/_assets/stylesheets/bootstrap/_progress-bars.scss new file mode 100644 index 0000000000..343df6323c --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_progress-bars.scss @@ -0,0 +1,87 @@ +// +// Progress bars +// -------------------------------------------------- + + +// Bar animations +// ------------------------- + +// WebKit +@-webkit-keyframes progress-bar-stripes { + from { background-position: 40px 0; } + to { background-position: 0 0; } +} + +// Spec and IE10+ +@keyframes progress-bar-stripes { + from { background-position: 40px 0; } + to { background-position: 0 0; } +} + + +// Bar itself +// ------------------------- + +// Outer container +.progress { + overflow: hidden; + height: $line-height-computed; + margin-bottom: $line-height-computed; + background-color: $progress-bg; + border-radius: $progress-border-radius; + @include box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); +} + +// Bar of progress +.progress-bar { + float: left; + width: 0%; + height: 100%; + font-size: $font-size-small; + line-height: $line-height-computed; + color: $progress-bar-color; + text-align: center; + background-color: $progress-bar-bg; + @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); + @include transition(width .6s ease); +} + +// Striped bars +// +// `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the +// `.progress-bar-striped` class, which you just add to an existing +// `.progress-bar`. +.progress-striped .progress-bar, +.progress-bar-striped { + @include gradient-striped; + background-size: 40px 40px; +} + +// Call animation for the active one +// +// `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the +// `.progress-bar.active` approach. +.progress.active .progress-bar, +.progress-bar.active { + @include animation(progress-bar-stripes 2s linear infinite); +} + + +// Variations +// ------------------------- + +.progress-bar-success { + @include progress-bar-variant($progress-bar-success-bg); +} + +.progress-bar-info { + @include progress-bar-variant($progress-bar-info-bg); +} + +.progress-bar-warning { + @include progress-bar-variant($progress-bar-warning-bg); +} + +.progress-bar-danger { + @include progress-bar-variant($progress-bar-danger-bg); +} diff --git a/docs/_assets/stylesheets/bootstrap/_responsive-embed.scss b/docs/_assets/stylesheets/bootstrap/_responsive-embed.scss new file mode 100644 index 0000000000..080a5118fe --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_responsive-embed.scss @@ -0,0 +1,35 @@ +// Embeds responsive +// +// Credit: Nicolas Gallagher and SUIT CSS. + +.embed-responsive { + position: relative; + display: block; + height: 0; + padding: 0; + overflow: hidden; + + .embed-responsive-item, + iframe, + embed, + object, + video { + position: absolute; + top: 0; + left: 0; + bottom: 0; + height: 100%; + width: 100%; + border: 0; + } +} + +// Modifier class for 16:9 aspect ratio +.embed-responsive-16by9 { + padding-bottom: 56.25%; +} + +// Modifier class for 4:3 aspect ratio +.embed-responsive-4by3 { + padding-bottom: 75%; +} diff --git a/docs/_assets/stylesheets/bootstrap/_responsive-utilities.scss b/docs/_assets/stylesheets/bootstrap/_responsive-utilities.scss new file mode 100644 index 0000000000..f3f0c839be --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_responsive-utilities.scss @@ -0,0 +1,179 @@ +// +// Responsive: Utility classes +// -------------------------------------------------- + + +// IE10 in Windows (Phone) 8 +// +// Support for responsive views via media queries is kind of borked in IE10, for +// Surface/desktop in split view and for Windows Phone 8. This particular fix +// must be accompanied by a snippet of JavaScript to sniff the user agent and +// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at +// our Getting Started page for more information on this bug. +// +// For more information, see the following: +// +// Issue: https://github.com/twbs/bootstrap/issues/10497 +// Docs: http://getbootstrap.com/getting-started/#support-ie10-width +// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ +// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ + +@at-root { + @-ms-viewport { + width: device-width; + } +} + + +// Visibility utilities +// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0 + +@include responsive-invisibility('.visible-xs'); +@include responsive-invisibility('.visible-sm'); +@include responsive-invisibility('.visible-md'); +@include responsive-invisibility('.visible-lg'); + +.visible-xs-block, +.visible-xs-inline, +.visible-xs-inline-block, +.visible-sm-block, +.visible-sm-inline, +.visible-sm-inline-block, +.visible-md-block, +.visible-md-inline, +.visible-md-inline-block, +.visible-lg-block, +.visible-lg-inline, +.visible-lg-inline-block { + display: none !important; +} + +@media (max-width: $screen-xs-max) { + @include responsive-visibility('.visible-xs'); +} +.visible-xs-block { + @media (max-width: $screen-xs-max) { + display: block !important; + } +} +.visible-xs-inline { + @media (max-width: $screen-xs-max) { + display: inline !important; + } +} +.visible-xs-inline-block { + @media (max-width: $screen-xs-max) { + display: inline-block !important; + } +} + +@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { + @include responsive-visibility('.visible-sm'); +} +.visible-sm-block { + @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { + display: block !important; + } +} +.visible-sm-inline { + @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { + display: inline !important; + } +} +.visible-sm-inline-block { + @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { + display: inline-block !important; + } +} + +@media (min-width: $screen-md-min) and (max-width: $screen-md-max) { + @include responsive-visibility('.visible-md'); +} +.visible-md-block { + @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { + display: block !important; + } +} +.visible-md-inline { + @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { + display: inline !important; + } +} +.visible-md-inline-block { + @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { + display: inline-block !important; + } +} + +@media (min-width: $screen-lg-min) { + @include responsive-visibility('.visible-lg'); +} +.visible-lg-block { + @media (min-width: $screen-lg-min) { + display: block !important; + } +} +.visible-lg-inline { + @media (min-width: $screen-lg-min) { + display: inline !important; + } +} +.visible-lg-inline-block { + @media (min-width: $screen-lg-min) { + display: inline-block !important; + } +} + +@media (max-width: $screen-xs-max) { + @include responsive-invisibility('.hidden-xs'); +} + +@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { + @include responsive-invisibility('.hidden-sm'); +} + +@media (min-width: $screen-md-min) and (max-width: $screen-md-max) { + @include responsive-invisibility('.hidden-md'); +} + +@media (min-width: $screen-lg-min) { + @include responsive-invisibility('.hidden-lg'); +} + + +// Print utilities +// +// Media queries are placed on the inside to be mixin-friendly. + +// Note: Deprecated .visible-print as of v3.2.0 + +@include responsive-invisibility('.visible-print'); + +@media print { + @include responsive-visibility('.visible-print'); +} +.visible-print-block { + display: none !important; + + @media print { + display: block !important; + } +} +.visible-print-inline { + display: none !important; + + @media print { + display: inline !important; + } +} +.visible-print-inline-block { + display: none !important; + + @media print { + display: inline-block !important; + } +} + +@media print { + @include responsive-invisibility('.hidden-print'); +} diff --git a/docs/_assets/stylesheets/bootstrap/_scaffolding.scss b/docs/_assets/stylesheets/bootstrap/_scaffolding.scss new file mode 100644 index 0000000000..83adb5dd51 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_scaffolding.scss @@ -0,0 +1,161 @@ +// +// Scaffolding +// -------------------------------------------------- + + +// Reset the box-sizing +// +// Heads up! This reset may cause conflicts with some third-party widgets. +// For recommendations on resolving such conflicts, see +// http://getbootstrap.com/getting-started/#third-box-sizing +* { + @include box-sizing(border-box); +} +*:before, +*:after { + @include box-sizing(border-box); +} + + +// Body reset + +html { + font-size: 10px; + -webkit-tap-highlight-color: rgba(0,0,0,0); +} + +body { + font-family: $font-family-base; + font-size: $font-size-base; + line-height: $line-height-base; + color: $text-color; + background-color: $body-bg; +} + +// Reset fonts for relevant elements +input, +button, +select, +textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + + +// Links + +a { + color: $link-color; + text-decoration: none; + + &:hover, + &:focus { + color: $link-hover-color; + text-decoration: $link-hover-decoration; + } + + &:focus { + @include tab-focus; + } +} + + +// Figures +// +// We reset this here because previously Normalize had no `figure` margins. This +// ensures we don't break anyone's use of the element. + +figure { + margin: 0; +} + + +// Images + +img { + vertical-align: middle; +} + +// Responsive images (ensure images don't scale beyond their parents) +.img-responsive { + @include img-responsive; +} + +// Rounded corners +.img-rounded { + border-radius: $border-radius-large; +} + +// Image thumbnails +// +// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`. +.img-thumbnail { + padding: $thumbnail-padding; + line-height: $line-height-base; + background-color: $thumbnail-bg; + border: 1px solid $thumbnail-border; + border-radius: $thumbnail-border-radius; + @include transition(all .2s ease-in-out); + + // Keep them at most 100% wide + @include img-responsive(inline-block); +} + +// Perfect circle +.img-circle { + border-radius: 50%; // set radius in percents +} + + +// Horizontal rules + +hr { + margin-top: $line-height-computed; + margin-bottom: $line-height-computed; + border: 0; + border-top: 1px solid $hr-border; +} + + +// Only display content to screen readers +// +// See: http://a11yproject.com/posts/how-to-hide-content/ + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0,0,0,0); + border: 0; +} + +// Use in conjunction with .sr-only to only display content when it's focused. +// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 +// Credit: HTML5 Boilerplate + +.sr-only-focusable { + &:active, + &:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; + } +} + + +// iOS "clickable elements" fix for role="button" +// +// Fixes "clickability" issue (and more generally, the firing of events such as focus as well) +// for traditionally non-focusable elements with role="button" +// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile + +[role="button"] { + cursor: pointer; +} diff --git a/docs/_assets/stylesheets/bootstrap/_tables.scss b/docs/_assets/stylesheets/bootstrap/_tables.scss new file mode 100644 index 0000000000..affcc58c0b --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_tables.scss @@ -0,0 +1,234 @@ +// +// Tables +// -------------------------------------------------- + + +table { + background-color: $table-bg; +} +caption { + padding-top: $table-cell-padding; + padding-bottom: $table-cell-padding; + color: $text-muted; + text-align: left; +} +th { + text-align: left; +} + + +// Baseline styles + +.table { + width: 100%; + max-width: 100%; + margin-bottom: $line-height-computed; + // Cells + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + padding: $table-cell-padding; + line-height: $line-height-base; + vertical-align: top; + border-top: 1px solid $table-border-color; + } + } + } + // Bottom align for column headings + > thead > tr > th { + vertical-align: bottom; + border-bottom: 2px solid $table-border-color; + } + // Remove top border from thead by default + > caption + thead, + > colgroup + thead, + > thead:first-child { + > tr:first-child { + > th, + > td { + border-top: 0; + } + } + } + // Account for multiple tbody instances + > tbody + tbody { + border-top: 2px solid $table-border-color; + } + + // Nesting + .table { + background-color: $body-bg; + } +} + + +// Condensed table w/ half padding + +.table-condensed { + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + padding: $table-condensed-cell-padding; + } + } + } +} + + +// Bordered version +// +// Add borders all around the table and between all the columns. + +.table-bordered { + border: 1px solid $table-border-color; + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + border: 1px solid $table-border-color; + } + } + } + > thead > tr { + > th, + > td { + border-bottom-width: 2px; + } + } +} + + +// Zebra-striping +// +// Default zebra-stripe styles (alternating gray and transparent backgrounds) + +.table-striped { + > tbody > tr:nth-of-type(odd) { + background-color: $table-bg-accent; + } +} + + +// Hover effect +// +// Placed here since it has to come after the potential zebra striping + +.table-hover { + > tbody > tr:hover { + background-color: $table-bg-hover; + } +} + + +// Table cell sizing +// +// Reset default table behavior + +table col[class*="col-"] { + position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623) + float: none; + display: table-column; +} +table { + td, + th { + &[class*="col-"] { + position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623) + float: none; + display: table-cell; + } + } +} + + +// Table backgrounds +// +// Exact selectors below required to override `.table-striped` and prevent +// inheritance to nested tables. + +// Generate the contextual variants +@include table-row-variant('active', $table-bg-active); +@include table-row-variant('success', $state-success-bg); +@include table-row-variant('info', $state-info-bg); +@include table-row-variant('warning', $state-warning-bg); +@include table-row-variant('danger', $state-danger-bg); + + +// Responsive tables +// +// Wrap your tables in `.table-responsive` and we'll make them mobile friendly +// by enabling horizontal scrolling. Only applies <768px. Everything above that +// will display normally. + +.table-responsive { + overflow-x: auto; + min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837) + + @media screen and (max-width: $screen-xs-max) { + width: 100%; + margin-bottom: ($line-height-computed * 0.75); + overflow-y: hidden; + -ms-overflow-style: -ms-autohiding-scrollbar; + border: 1px solid $table-border-color; + + // Tighten up spacing + > .table { + margin-bottom: 0; + + // Ensure the content doesn't wrap + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + white-space: nowrap; + } + } + } + } + + // Special overrides for the bordered tables + > .table-bordered { + border: 0; + + // Nuke the appropriate borders so that the parent can handle them + > thead, + > tbody, + > tfoot { + > tr { + > th:first-child, + > td:first-child { + border-left: 0; + } + > th:last-child, + > td:last-child { + border-right: 0; + } + } + } + + // Only nuke the last row's bottom-border in `tbody` and `tfoot` since + // chances are there will be only one `tr` in a `thead` and that would + // remove the border altogether. + > tbody, + > tfoot { + > tr:last-child { + > th, + > td { + border-bottom: 0; + } + } + } + + } + } +} diff --git a/docs/_assets/stylesheets/bootstrap/_theme.scss b/docs/_assets/stylesheets/bootstrap/_theme.scss new file mode 100644 index 0000000000..df571ea744 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_theme.scss @@ -0,0 +1,291 @@ +/*! + * Bootstrap v3.3.5 (http://getbootstrap.com) + * Copyright 2011-2015 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ + +// +// Load core variables and mixins +// -------------------------------------------------- + +@import "variables"; +@import "mixins"; + + +// +// Buttons +// -------------------------------------------------- + +// Common styles +.btn-default, +.btn-primary, +.btn-success, +.btn-info, +.btn-warning, +.btn-danger { + text-shadow: 0 -1px 0 rgba(0,0,0,.2); + $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075); + @include box-shadow($shadow); + + // Reset the shadow + &:active, + &.active { + @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); + } + + &.disabled, + &[disabled], + fieldset[disabled] & { + @include box-shadow(none); + } + + .badge { + text-shadow: none; + } +} + +// Mixin for generating new styles +@mixin btn-styles($btn-color: #555) { + @include gradient-vertical($start-color: $btn-color, $end-color: darken($btn-color, 12%)); + @include reset-filter; // Disable gradients for IE9 because filter bleeds through rounded corners; see https://github.com/twbs/bootstrap/issues/10620 + background-repeat: repeat-x; + border-color: darken($btn-color, 14%); + + &:hover, + &:focus { + background-color: darken($btn-color, 12%); + background-position: 0 -15px; + } + + &:active, + &.active { + background-color: darken($btn-color, 12%); + border-color: darken($btn-color, 14%); + } + + &.disabled, + &[disabled], + fieldset[disabled] & { + &, + &:hover, + &:focus, + &.focus, + &:active, + &.active { + background-color: darken($btn-color, 12%); + background-image: none; + } + } +} + +// Common styles +.btn { + // Remove the gradient for the pressed/active state + &:active, + &.active { + background-image: none; + } +} + +// Apply the mixin to the buttons +.btn-default { @include btn-styles($btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; } +.btn-primary { @include btn-styles($btn-primary-bg); } +.btn-success { @include btn-styles($btn-success-bg); } +.btn-info { @include btn-styles($btn-info-bg); } +.btn-warning { @include btn-styles($btn-warning-bg); } +.btn-danger { @include btn-styles($btn-danger-bg); } + + +// +// Images +// -------------------------------------------------- + +.thumbnail, +.img-thumbnail { + @include box-shadow(0 1px 2px rgba(0,0,0,.075)); +} + + +// +// Dropdowns +// -------------------------------------------------- + +.dropdown-menu > li > a:hover, +.dropdown-menu > li > a:focus { + @include gradient-vertical($start-color: $dropdown-link-hover-bg, $end-color: darken($dropdown-link-hover-bg, 5%)); + background-color: darken($dropdown-link-hover-bg, 5%); +} +.dropdown-menu > .active > a, +.dropdown-menu > .active > a:hover, +.dropdown-menu > .active > a:focus { + @include gradient-vertical($start-color: $dropdown-link-active-bg, $end-color: darken($dropdown-link-active-bg, 5%)); + background-color: darken($dropdown-link-active-bg, 5%); +} + + +// +// Navbar +// -------------------------------------------------- + +// Default navbar +.navbar-default { + @include gradient-vertical($start-color: lighten($navbar-default-bg, 10%), $end-color: $navbar-default-bg); + @include reset-filter; // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered + border-radius: $navbar-border-radius; + $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075); + @include box-shadow($shadow); + + .navbar-nav > .open > a, + .navbar-nav > .active > a { + @include gradient-vertical($start-color: darken($navbar-default-link-active-bg, 5%), $end-color: darken($navbar-default-link-active-bg, 2%)); + @include box-shadow(inset 0 3px 9px rgba(0,0,0,.075)); + } +} +.navbar-brand, +.navbar-nav > li > a { + text-shadow: 0 1px 0 rgba(255,255,255,.25); +} + +// Inverted navbar +.navbar-inverse { + @include gradient-vertical($start-color: lighten($navbar-inverse-bg, 10%), $end-color: $navbar-inverse-bg); + @include reset-filter; // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered; see https://github.com/twbs/bootstrap/issues/10257 + border-radius: $navbar-border-radius; + .navbar-nav > .open > a, + .navbar-nav > .active > a { + @include gradient-vertical($start-color: $navbar-inverse-link-active-bg, $end-color: lighten($navbar-inverse-link-active-bg, 2.5%)); + @include box-shadow(inset 0 3px 9px rgba(0,0,0,.25)); + } + + .navbar-brand, + .navbar-nav > li > a { + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + } +} + +// Undo rounded corners in static and fixed navbars +.navbar-static-top, +.navbar-fixed-top, +.navbar-fixed-bottom { + border-radius: 0; +} + +// Fix active state of dropdown items in collapsed mode +@media (max-width: $grid-float-breakpoint-max) { + .navbar .navbar-nav .open .dropdown-menu > .active > a { + &, + &:hover, + &:focus { + color: #fff; + @include gradient-vertical($start-color: $dropdown-link-active-bg, $end-color: darken($dropdown-link-active-bg, 5%)); + } + } +} + + +// +// Alerts +// -------------------------------------------------- + +// Common styles +.alert { + text-shadow: 0 1px 0 rgba(255,255,255,.2); + $shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05); + @include box-shadow($shadow); +} + +// Mixin for generating new styles +@mixin alert-styles($color) { + @include gradient-vertical($start-color: $color, $end-color: darken($color, 7.5%)); + border-color: darken($color, 15%); +} + +// Apply the mixin to the alerts +.alert-success { @include alert-styles($alert-success-bg); } +.alert-info { @include alert-styles($alert-info-bg); } +.alert-warning { @include alert-styles($alert-warning-bg); } +.alert-danger { @include alert-styles($alert-danger-bg); } + + +// +// Progress bars +// -------------------------------------------------- + +// Give the progress background some depth +.progress { + @include gradient-vertical($start-color: darken($progress-bg, 4%), $end-color: $progress-bg) +} + +// Mixin for generating new styles +@mixin progress-bar-styles($color) { + @include gradient-vertical($start-color: $color, $end-color: darken($color, 10%)); +} + +// Apply the mixin to the progress bars +.progress-bar { @include progress-bar-styles($progress-bar-bg); } +.progress-bar-success { @include progress-bar-styles($progress-bar-success-bg); } +.progress-bar-info { @include progress-bar-styles($progress-bar-info-bg); } +.progress-bar-warning { @include progress-bar-styles($progress-bar-warning-bg); } +.progress-bar-danger { @include progress-bar-styles($progress-bar-danger-bg); } + +// Reset the striped class because our mixins don't do multiple gradients and +// the above custom styles override the new `.progress-bar-striped` in v3.2.0. +.progress-bar-striped { + @include gradient-striped; +} + + +// +// List groups +// -------------------------------------------------- + +.list-group { + border-radius: $border-radius-base; + @include box-shadow(0 1px 2px rgba(0,0,0,.075)); +} +.list-group-item.active, +.list-group-item.active:hover, +.list-group-item.active:focus { + text-shadow: 0 -1px 0 darken($list-group-active-bg, 10%); + @include gradient-vertical($start-color: $list-group-active-bg, $end-color: darken($list-group-active-bg, 7.5%)); + border-color: darken($list-group-active-border, 7.5%); + + .badge { + text-shadow: none; + } +} + + +// +// Panels +// -------------------------------------------------- + +// Common styles +.panel { + @include box-shadow(0 1px 2px rgba(0,0,0,.05)); +} + +// Mixin for generating new styles +@mixin panel-heading-styles($color) { + @include gradient-vertical($start-color: $color, $end-color: darken($color, 5%)); +} + +// Apply the mixin to the panel headings only +.panel-default > .panel-heading { @include panel-heading-styles($panel-default-heading-bg); } +.panel-primary > .panel-heading { @include panel-heading-styles($panel-primary-heading-bg); } +.panel-success > .panel-heading { @include panel-heading-styles($panel-success-heading-bg); } +.panel-info > .panel-heading { @include panel-heading-styles($panel-info-heading-bg); } +.panel-warning > .panel-heading { @include panel-heading-styles($panel-warning-heading-bg); } +.panel-danger > .panel-heading { @include panel-heading-styles($panel-danger-heading-bg); } + + +// +// Wells +// -------------------------------------------------- + +.well { + @include gradient-vertical($start-color: darken($well-bg, 5%), $end-color: $well-bg); + border-color: darken($well-bg, 10%); + $shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1); + @include box-shadow($shadow); +} diff --git a/docs/_assets/stylesheets/bootstrap/_thumbnails.scss b/docs/_assets/stylesheets/bootstrap/_thumbnails.scss new file mode 100644 index 0000000000..da0e1e76cf --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_thumbnails.scss @@ -0,0 +1,38 @@ +// +// Thumbnails +// -------------------------------------------------- + + +// Mixin and adjust the regular image class +.thumbnail { + display: block; + padding: $thumbnail-padding; + margin-bottom: $line-height-computed; + line-height: $line-height-base; + background-color: $thumbnail-bg; + border: 1px solid $thumbnail-border; + border-radius: $thumbnail-border-radius; + @include transition(border .2s ease-in-out); + + > img, + a > img { + @include img-responsive; + margin-left: auto; + margin-right: auto; + } + + // [converter] extracted a&:hover, a&:focus, a&.active to a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active + + // Image captions + .caption { + padding: $thumbnail-caption-padding; + color: $thumbnail-caption-color; + } +} + +// Add a hover state for linked versions only +a.thumbnail:hover, +a.thumbnail:focus, +a.thumbnail.active { + border-color: $link-color; +} diff --git a/docs/_assets/stylesheets/bootstrap/_tooltip.scss b/docs/_assets/stylesheets/bootstrap/_tooltip.scss new file mode 100644 index 0000000000..f0c1658274 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_tooltip.scss @@ -0,0 +1,101 @@ +// +// Tooltips +// -------------------------------------------------- + + +// Base class +.tooltip { + position: absolute; + z-index: $zindex-tooltip; + display: block; + // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. + // So reset our font and text properties to avoid inheriting weird values. + @include reset-text; + font-size: $font-size-small; + + @include opacity(0); + + &.in { @include opacity($tooltip-opacity); } + &.top { margin-top: -3px; padding: $tooltip-arrow-width 0; } + &.right { margin-left: 3px; padding: 0 $tooltip-arrow-width; } + &.bottom { margin-top: 3px; padding: $tooltip-arrow-width 0; } + &.left { margin-left: -3px; padding: 0 $tooltip-arrow-width; } +} + +// Wrapper for the tooltip content +.tooltip-inner { + max-width: $tooltip-max-width; + padding: 3px 8px; + color: $tooltip-color; + text-align: center; + background-color: $tooltip-bg; + border-radius: $border-radius-base; +} + +// Arrows +.tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} +// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1 +.tooltip { + &.top .tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -$tooltip-arrow-width; + border-width: $tooltip-arrow-width $tooltip-arrow-width 0; + border-top-color: $tooltip-arrow-color; + } + &.top-left .tooltip-arrow { + bottom: 0; + right: $tooltip-arrow-width; + margin-bottom: -$tooltip-arrow-width; + border-width: $tooltip-arrow-width $tooltip-arrow-width 0; + border-top-color: $tooltip-arrow-color; + } + &.top-right .tooltip-arrow { + bottom: 0; + left: $tooltip-arrow-width; + margin-bottom: -$tooltip-arrow-width; + border-width: $tooltip-arrow-width $tooltip-arrow-width 0; + border-top-color: $tooltip-arrow-color; + } + &.right .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -$tooltip-arrow-width; + border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0; + border-right-color: $tooltip-arrow-color; + } + &.left .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -$tooltip-arrow-width; + border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width; + border-left-color: $tooltip-arrow-color; + } + &.bottom .tooltip-arrow { + top: 0; + left: 50%; + margin-left: -$tooltip-arrow-width; + border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; + border-bottom-color: $tooltip-arrow-color; + } + &.bottom-left .tooltip-arrow { + top: 0; + right: $tooltip-arrow-width; + margin-top: -$tooltip-arrow-width; + border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; + border-bottom-color: $tooltip-arrow-color; + } + &.bottom-right .tooltip-arrow { + top: 0; + left: $tooltip-arrow-width; + margin-top: -$tooltip-arrow-width; + border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; + border-bottom-color: $tooltip-arrow-color; + } +} diff --git a/docs/_assets/stylesheets/bootstrap/_type.scss b/docs/_assets/stylesheets/bootstrap/_type.scss new file mode 100644 index 0000000000..a39a615857 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_type.scss @@ -0,0 +1,298 @@ +// +// Typography +// -------------------------------------------------- + + +// Headings +// ------------------------- + +h1, h2, h3, h4, h5, h6, +.h1, .h2, .h3, .h4, .h5, .h6 { + font-family: $headings-font-family; + font-weight: $headings-font-weight; + line-height: $headings-line-height; + color: $headings-color; + + small, + .small { + font-weight: normal; + line-height: 1; + color: $headings-small-color; + } +} + +h1, .h1, +h2, .h2, +h3, .h3 { + margin-top: $line-height-computed; + margin-bottom: ($line-height-computed / 2); + + small, + .small { + font-size: 65%; + } +} +h4, .h4, +h5, .h5, +h6, .h6 { + margin-top: ($line-height-computed / 2); + margin-bottom: ($line-height-computed / 2); + + small, + .small { + font-size: 75%; + } +} + +h1, .h1 { font-size: $font-size-h1; } +h2, .h2 { font-size: $font-size-h2; } +h3, .h3 { font-size: $font-size-h3; } +h4, .h4 { font-size: $font-size-h4; } +h5, .h5 { font-size: $font-size-h5; } +h6, .h6 { font-size: $font-size-h6; } + + +// Body text +// ------------------------- + +p { + margin: 0 0 ($line-height-computed / 2); +} + +.lead { + margin-bottom: $line-height-computed; + font-size: floor(($font-size-base * 1.15)); + font-weight: 300; + line-height: 1.4; + + @media (min-width: $screen-sm-min) { + font-size: ($font-size-base * 1.5); + } +} + + +// Emphasis & misc +// ------------------------- + +// Ex: (12px small font / 14px base font) * 100% = about 85% +small, +.small { + font-size: floor((100% * $font-size-small / $font-size-base)); +} + +mark, +.mark { + background-color: $state-warning-bg; + padding: .2em; +} + +// Alignment +.text-left { text-align: left; } +.text-right { text-align: right; } +.text-center { text-align: center; } +.text-justify { text-align: justify; } +.text-nowrap { white-space: nowrap; } + +// Transformation +.text-lowercase { text-transform: lowercase; } +.text-uppercase { text-transform: uppercase; } +.text-capitalize { text-transform: capitalize; } + +// Contextual colors +.text-muted { + color: $text-muted; +} + +@include text-emphasis-variant('.text-primary', $brand-primary); + +@include text-emphasis-variant('.text-success', $state-success-text); + +@include text-emphasis-variant('.text-info', $state-info-text); + +@include text-emphasis-variant('.text-warning', $state-warning-text); + +@include text-emphasis-variant('.text-danger', $state-danger-text); + +// Contextual backgrounds +// For now we'll leave these alongside the text classes until v4 when we can +// safely shift things around (per SemVer rules). +.bg-primary { + // Given the contrast here, this is the only class to have its color inverted + // automatically. + color: #fff; +} +@include bg-variant('.bg-primary', $brand-primary); + +@include bg-variant('.bg-success', $state-success-bg); + +@include bg-variant('.bg-info', $state-info-bg); + +@include bg-variant('.bg-warning', $state-warning-bg); + +@include bg-variant('.bg-danger', $state-danger-bg); + + +// Page header +// ------------------------- + +.page-header { + padding-bottom: (($line-height-computed / 2) - 1); + margin: ($line-height-computed * 2) 0 $line-height-computed; + border-bottom: 1px solid $page-header-border-color; +} + + +// Lists +// ------------------------- + +// Unordered and Ordered lists +ul, +ol { + margin-top: 0; + margin-bottom: ($line-height-computed / 2); + ul, + ol { + margin-bottom: 0; + } +} + +// List options + +// [converter] extracted from `.list-unstyled` for libsass compatibility +@mixin list-unstyled { + padding-left: 0; + list-style: none; +} +// [converter] extracted as `@mixin list-unstyled` for libsass compatibility +.list-unstyled { + @include list-unstyled; +} + + +// Inline turns list items into inline-block +.list-inline { + @include list-unstyled; + margin-left: -5px; + + > li { + display: inline-block; + padding-left: 5px; + padding-right: 5px; + } +} + +// Description Lists +dl { + margin-top: 0; // Remove browser default + margin-bottom: $line-height-computed; +} +dt, +dd { + line-height: $line-height-base; +} +dt { + font-weight: bold; +} +dd { + margin-left: 0; // Undo browser default +} + +// Horizontal description lists +// +// Defaults to being stacked without any of the below styles applied, until the +// grid breakpoint is reached (default of ~768px). + +.dl-horizontal { + dd { + @include clearfix; // Clear the floated `dt` if an empty `dd` is present + } + + @media (min-width: $grid-float-breakpoint) { + dt { + float: left; + width: ($dl-horizontal-offset - 20); + clear: left; + text-align: right; + @include text-overflow; + } + dd { + margin-left: $dl-horizontal-offset; + } + } +} + + +// Misc +// ------------------------- + +// Abbreviations and acronyms +abbr[title], +// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 +abbr[data-original-title] { + cursor: help; + border-bottom: 1px dotted $abbr-border-color; +} +.initialism { + font-size: 90%; + @extend .text-uppercase; +} + +// Blockquotes +blockquote { + padding: ($line-height-computed / 2) $line-height-computed; + margin: 0 0 $line-height-computed; + font-size: $blockquote-font-size; + border-left: 5px solid $blockquote-border-color; + + p, + ul, + ol { + &:last-child { + margin-bottom: 0; + } + } + + // Note: Deprecated small and .small as of v3.1.0 + // Context: https://github.com/twbs/bootstrap/issues/11660 + footer, + small, + .small { + display: block; + font-size: 80%; // back to default font-size + line-height: $line-height-base; + color: $blockquote-small-color; + + &:before { + content: '\2014 \00A0'; // em dash, nbsp + } + } +} + +// Opposite alignment of blockquote +// +// Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0. +.blockquote-reverse, +blockquote.pull-right { + padding-right: 15px; + padding-left: 0; + border-right: 5px solid $blockquote-border-color; + border-left: 0; + text-align: right; + + // Account for citation + footer, + small, + .small { + &:before { content: ''; } + &:after { + content: '\00A0 \2014'; // nbsp, em dash + } + } +} + +// Addresses +address { + margin-bottom: $line-height-computed; + font-style: normal; + line-height: $line-height-base; +} diff --git a/docs/_assets/stylesheets/bootstrap/_utilities.scss b/docs/_assets/stylesheets/bootstrap/_utilities.scss new file mode 100644 index 0000000000..8c99c71643 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_utilities.scss @@ -0,0 +1,55 @@ +// +// Utility classes +// -------------------------------------------------- + + +// Floats +// ------------------------- + +.clearfix { + @include clearfix; +} +.center-block { + @include center-block; +} +.pull-right { + float: right !important; +} +.pull-left { + float: left !important; +} + + +// Toggling content +// ------------------------- + +// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1 +.hide { + display: none !important; +} +.show { + display: block !important; +} +.invisible { + visibility: hidden; +} +.text-hide { + @include text-hide; +} + + +// Hide from screenreaders and browsers +// +// Credit: HTML5 Boilerplate + +.hidden { + display: none !important; +} + + +// For Affix plugin +// ------------------------- + +.affix { + position: fixed; +} diff --git a/docs/_assets/stylesheets/bootstrap/_variables.scss b/docs/_assets/stylesheets/bootstrap/_variables.scss new file mode 100644 index 0000000000..bf9373b922 --- /dev/null +++ b/docs/_assets/stylesheets/bootstrap/_variables.scss @@ -0,0 +1,872 @@ +$bootstrap-sass-asset-helper: false !default; +// +// Variables +// -------------------------------------------------- + + +//== Colors +// +//## Gray and brand colors for use across Bootstrap. + +$gray-base: #000 !default; +$gray-darker: lighten($gray-base, 13.5%) !default; // #222 +$gray-dark: lighten($gray-base, 20%) !default; // #333 +$gray: lighten($gray-base, 33.5%) !default; // #555 +$gray-light: lighten($gray-base, 46.7%) !default; // #777 +$gray-lighter: lighten($gray-base, 93.5%) !default; // #eee + +$brand-primary: darken(#428bca, 6.5%) !default; // #337ab7 +$brand-success: #5cb85c !default; +$brand-info: #5bc0de !default; +$brand-warning: #f0ad4e !default; +$brand-danger: #d9534f !default; + + +//== Scaffolding +// +//## Settings for some of the most global styles. + +//** Background color for ``. +$body-bg: #fff !default; +//** Global text color on ``. +$text-color: $gray-dark !default; + +//** Global textual link color. +$link-color: $brand-primary !default; +//** Link hover color set via `darken()` function. +$link-hover-color: darken($link-color, 15%) !default; +//** Link hover decoration. +$link-hover-decoration: underline !default; + + +//== Typography +// +//## Font, line-height, and color for body text, headings, and more. + +$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default; +$font-family-serif: Georgia, "Times New Roman", Times, serif !default; +//** Default monospace fonts for ``, ``, and `
        `.
        +$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
        +$font-family-base:        $font-family-sans-serif !default;
        +
        +$font-size-base:          14px !default;
        +$font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
        +$font-size-small:         ceil(($font-size-base * 0.85)) !default; // ~12px
        +
        +$font-size-h1:            floor(($font-size-base * 2.6)) !default; // ~36px
        +$font-size-h2:            floor(($font-size-base * 2.15)) !default; // ~30px
        +$font-size-h3:            ceil(($font-size-base * 1.7)) !default; // ~24px
        +$font-size-h4:            ceil(($font-size-base * 1.25)) !default; // ~18px
        +$font-size-h5:            $font-size-base !default;
        +$font-size-h6:            ceil(($font-size-base * 0.85)) !default; // ~12px
        +
        +//** Unit-less `line-height` for use in components like buttons.
        +$line-height-base:        1.428571429 !default; // 20/14
        +//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
        +$line-height-computed:    floor(($font-size-base * $line-height-base)) !default; // ~20px
        +
        +//** By default, this inherits from the ``.
        +$headings-font-family:    inherit !default;
        +$headings-font-weight:    500 !default;
        +$headings-line-height:    1.1 !default;
        +$headings-color:          inherit !default;
        +
        +
        +//== Iconography
        +//
        +//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
        +
        +//** Load fonts from this directory.
        +
        +// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
        +// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
        +$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
        +
        +//** File name for all font files.
        +$icon-font-name:          "glyphicons-halflings-regular" !default;
        +//** Element ID within SVG icon file.
        +$icon-font-svg-id:        "glyphicons_halflingsregular" !default;
        +
        +
        +//== Components
        +//
        +//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
        +
        +$padding-base-vertical:     6px !default;
        +$padding-base-horizontal:   12px !default;
        +
        +$padding-large-vertical:    10px !default;
        +$padding-large-horizontal:  16px !default;
        +
        +$padding-small-vertical:    5px !default;
        +$padding-small-horizontal:  10px !default;
        +
        +$padding-xs-vertical:       1px !default;
        +$padding-xs-horizontal:     5px !default;
        +
        +$line-height-large:         1.3333333 !default; // extra decimals for Win 8.1 Chrome
        +$line-height-small:         1.5 !default;
        +
        +$border-radius-base:        4px !default;
        +$border-radius-large:       6px !default;
        +$border-radius-small:       3px !default;
        +
        +//** Global color for active items (e.g., navs or dropdowns).
        +$component-active-color:    #fff !default;
        +//** Global background color for active items (e.g., navs or dropdowns).
        +$component-active-bg:       $brand-primary !default;
        +
        +//** Width of the `border` for generating carets that indicator dropdowns.
        +$caret-width-base:          4px !default;
        +//** Carets increase slightly in size for larger components.
        +$caret-width-large:         5px !default;
        +
        +
        +//== Tables
        +//
        +//## Customizes the `.table` component with basic values, each used across all table variations.
        +
        +//** Padding for ``s and ``s.
        +$table-cell-padding:            8px !default;
        +//** Padding for cells in `.table-condensed`.
        +$table-condensed-cell-padding:  5px !default;
        +
        +//** Default background color used for all tables.
        +$table-bg:                      transparent !default;
        +//** Background color used for `.table-striped`.
        +$table-bg-accent:               #f9f9f9 !default;
        +//** Background color used for `.table-hover`.
        +$table-bg-hover:                #f5f5f5 !default;
        +$table-bg-active:               $table-bg-hover !default;
        +
        +//** Border color for table and cell borders.
        +$table-border-color:            #ddd !default;
        +
        +
        +//== Buttons
        +//
        +//## For each of Bootstrap's buttons, define text, background and border color.
        +
        +$btn-font-weight:                normal !default;
        +
        +$btn-default-color:              #333 !default;
        +$btn-default-bg:                 #fff !default;
        +$btn-default-border:             #ccc !default;
        +
        +$btn-primary-color:              #fff !default;
        +$btn-primary-bg:                 $brand-primary !default;
        +$btn-primary-border:             darken($btn-primary-bg, 5%) !default;
        +
        +$btn-success-color:              #fff !default;
        +$btn-success-bg:                 $brand-success !default;
        +$btn-success-border:             darken($btn-success-bg, 5%) !default;
        +
        +$btn-info-color:                 #fff !default;
        +$btn-info-bg:                    $brand-info !default;
        +$btn-info-border:                darken($btn-info-bg, 5%) !default;
        +
        +$btn-warning-color:              #fff !default;
        +$btn-warning-bg:                 $brand-warning !default;
        +$btn-warning-border:             darken($btn-warning-bg, 5%) !default;
        +
        +$btn-danger-color:               #fff !default;
        +$btn-danger-bg:                  $brand-danger !default;
        +$btn-danger-border:              darken($btn-danger-bg, 5%) !default;
        +
        +$btn-link-disabled-color:        $gray-light !default;
        +
        +// Allows for customizing button radius independently from global border radius
        +$btn-border-radius-base:         $border-radius-base !default;
        +$btn-border-radius-large:        $border-radius-large !default;
        +$btn-border-radius-small:        $border-radius-small !default;
        +
        +
        +//== Forms
        +//
        +//##
        +
        +//** `` background color
        +$input-bg:                       #fff !default;
        +//** `` background color
        +$input-bg-disabled:              $gray-lighter !default;
        +
        +//** Text color for ``s
        +$input-color:                    $gray !default;
        +//** `` border color
        +$input-border:                   #ccc !default;
        +
        +// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
        +//** Default `.form-control` border radius
        +// This has no effect on ``s in CSS.
        +$input-border-radius:            $border-radius-base !default;
        +//** Large `.form-control` border radius
        +$input-border-radius-large:      $border-radius-large !default;
        +//** Small `.form-control` border radius
        +$input-border-radius-small:      $border-radius-small !default;
        +
        +//** Border color for inputs on focus
        +$input-border-focus:             #66afe9 !default;
        +
        +//** Placeholder text color
        +$input-color-placeholder:        #999 !default;
        +
        +//** Default `.form-control` height
        +$input-height-base:              ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
        +//** Large `.form-control` height
        +$input-height-large:             (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
        +//** Small `.form-control` height
        +$input-height-small:             (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
        +
        +//** `.form-group` margin
        +$form-group-margin-bottom:       15px !default;
        +
        +$legend-color:                   $gray-dark !default;
        +$legend-border-color:            #e5e5e5 !default;
        +
        +//** Background color for textual input addons
        +$input-group-addon-bg:           $gray-lighter !default;
        +//** Border color for textual input addons
        +$input-group-addon-border-color: $input-border !default;
        +
        +//** Disabled cursor for form controls and buttons.
        +$cursor-disabled:                not-allowed !default;
        +
        +
        +//== Dropdowns
        +//
        +//## Dropdown menu container and contents.
        +
        +//** Background for the dropdown menu.
        +$dropdown-bg:                    #fff !default;
        +//** Dropdown menu `border-color`.
        +$dropdown-border:                rgba(0,0,0,.15) !default;
        +//** Dropdown menu `border-color` **for IE8**.
        +$dropdown-fallback-border:       #ccc !default;
        +//** Divider color for between dropdown items.
        +$dropdown-divider-bg:            #e5e5e5 !default;
        +
        +//** Dropdown link text color.
        +$dropdown-link-color:            $gray-dark !default;
        +//** Hover color for dropdown links.
        +$dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
        +//** Hover background for dropdown links.
        +$dropdown-link-hover-bg:         #f5f5f5 !default;
        +
        +//** Active dropdown menu item text color.
        +$dropdown-link-active-color:     $component-active-color !default;
        +//** Active dropdown menu item background color.
        +$dropdown-link-active-bg:        $component-active-bg !default;
        +
        +//** Disabled dropdown menu item background color.
        +$dropdown-link-disabled-color:   $gray-light !default;
        +
        +//** Text color for headers within dropdown menus.
        +$dropdown-header-color:          $gray-light !default;
        +
        +//** Deprecated `$dropdown-caret-color` as of v3.1.0
        +$dropdown-caret-color:           #000 !default;
        +
        +
        +//-- Z-index master list
        +//
        +// Warning: Avoid customizing these values. They're used for a bird's eye view
        +// of components dependent on the z-axis and are designed to all work together.
        +//
        +// Note: These variables are not generated into the Customizer.
        +
        +$zindex-navbar:            1000 !default;
        +$zindex-dropdown:          1000 !default;
        +$zindex-popover:           1060 !default;
        +$zindex-tooltip:           1070 !default;
        +$zindex-navbar-fixed:      1030 !default;
        +$zindex-modal-background:  1040 !default;
        +$zindex-modal:             1050 !default;
        +
        +
        +//== Media queries breakpoints
        +//
        +//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
        +
        +// Extra small screen / phone
        +//** Deprecated `$screen-xs` as of v3.0.1
        +$screen-xs:                  480px !default;
        +//** Deprecated `$screen-xs-min` as of v3.2.0
        +$screen-xs-min:              $screen-xs !default;
        +//** Deprecated `$screen-phone` as of v3.0.1
        +$screen-phone:               $screen-xs-min !default;
        +
        +// Small screen / tablet
        +//** Deprecated `$screen-sm` as of v3.0.1
        +$screen-sm:                  768px !default;
        +$screen-sm-min:              $screen-sm !default;
        +//** Deprecated `$screen-tablet` as of v3.0.1
        +$screen-tablet:              $screen-sm-min !default;
        +
        +// Medium screen / desktop
        +//** Deprecated `$screen-md` as of v3.0.1
        +$screen-md:                  992px !default;
        +$screen-md-min:              $screen-md !default;
        +//** Deprecated `$screen-desktop` as of v3.0.1
        +$screen-desktop:             $screen-md-min !default;
        +
        +// Large screen / wide desktop
        +//** Deprecated `$screen-lg` as of v3.0.1
        +$screen-lg:                  1200px !default;
        +$screen-lg-min:              $screen-lg !default;
        +//** Deprecated `$screen-lg-desktop` as of v3.0.1
        +$screen-lg-desktop:          $screen-lg-min !default;
        +
        +// So media queries don't overlap when required, provide a maximum
        +$screen-xs-max:              ($screen-sm-min - 1) !default;
        +$screen-sm-max:              ($screen-md-min - 1) !default;
        +$screen-md-max:              ($screen-lg-min - 1) !default;
        +
        +
        +//== Grid system
        +//
        +//## Define your custom responsive grid.
        +
        +//** Number of columns in the grid.
        +$grid-columns:              12 !default;
        +//** Padding between columns. Gets divided in half for the left and right.
        +$grid-gutter-width:         30px !default;
        +// Navbar collapse
        +//** Point at which the navbar becomes uncollapsed.
        +$grid-float-breakpoint:     $screen-sm-min !default;
        +//** Point at which the navbar begins collapsing.
        +$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
        +
        +
        +//== Container sizes
        +//
        +//## Define the maximum width of `.container` for different screen sizes.
        +
        +// Small screen / tablet
        +$container-tablet:             (720px + $grid-gutter-width) !default;
        +//** For `$screen-sm-min` and up.
        +$container-sm:                 $container-tablet !default;
        +
        +// Medium screen / desktop
        +$container-desktop:            (940px + $grid-gutter-width) !default;
        +//** For `$screen-md-min` and up.
        +$container-md:                 $container-desktop !default;
        +
        +// Large screen / wide desktop
        +$container-large-desktop:      (1140px + $grid-gutter-width) !default;
        +//** For `$screen-lg-min` and up.
        +$container-lg:                 $container-large-desktop !default;
        +
        +
        +//== Navbar
        +//
        +//##
        +
        +// Basics of a navbar
        +$navbar-height:                    50px !default;
        +$navbar-margin-bottom:             $line-height-computed !default;
        +$navbar-border-radius:             $border-radius-base !default;
        +$navbar-padding-horizontal:        floor(($grid-gutter-width / 2)) !default;
        +$navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2) !default;
        +$navbar-collapse-max-height:       340px !default;
        +
        +$navbar-default-color:             #777 !default;
        +$navbar-default-bg:                #f8f8f8 !default;
        +$navbar-default-border:            darken($navbar-default-bg, 6.5%) !default;
        +
        +// Navbar links
        +$navbar-default-link-color:                #777 !default;
        +$navbar-default-link-hover-color:          #333 !default;
        +$navbar-default-link-hover-bg:             transparent !default;
        +$navbar-default-link-active-color:         #555 !default;
        +$navbar-default-link-active-bg:            darken($navbar-default-bg, 6.5%) !default;
        +$navbar-default-link-disabled-color:       #ccc !default;
        +$navbar-default-link-disabled-bg:          transparent !default;
        +
        +// Navbar brand label
        +$navbar-default-brand-color:               $navbar-default-link-color !default;
        +$navbar-default-brand-hover-color:         darken($navbar-default-brand-color, 10%) !default;
        +$navbar-default-brand-hover-bg:            transparent !default;
        +
        +// Navbar toggle
        +$navbar-default-toggle-hover-bg:           #ddd !default;
        +$navbar-default-toggle-icon-bar-bg:        #888 !default;
        +$navbar-default-toggle-border-color:       #ddd !default;
        +
        +
        +//=== Inverted navbar
        +// Reset inverted navbar basics
        +$navbar-inverse-color:                      lighten($gray-light, 15%) !default;
        +$navbar-inverse-bg:                         #222 !default;
        +$navbar-inverse-border:                     darken($navbar-inverse-bg, 10%) !default;
        +
        +// Inverted navbar links
        +$navbar-inverse-link-color:                 lighten($gray-light, 15%) !default;
        +$navbar-inverse-link-hover-color:           #fff !default;
        +$navbar-inverse-link-hover-bg:              transparent !default;
        +$navbar-inverse-link-active-color:          $navbar-inverse-link-hover-color !default;
        +$navbar-inverse-link-active-bg:             darken($navbar-inverse-bg, 10%) !default;
        +$navbar-inverse-link-disabled-color:        #444 !default;
        +$navbar-inverse-link-disabled-bg:           transparent !default;
        +
        +// Inverted navbar brand label
        +$navbar-inverse-brand-color:                $navbar-inverse-link-color !default;
        +$navbar-inverse-brand-hover-color:          #fff !default;
        +$navbar-inverse-brand-hover-bg:             transparent !default;
        +
        +// Inverted navbar toggle
        +$navbar-inverse-toggle-hover-bg:            #333 !default;
        +$navbar-inverse-toggle-icon-bar-bg:         #fff !default;
        +$navbar-inverse-toggle-border-color:        #333 !default;
        +
        +
        +//== Navs
        +//
        +//##
        +
        +//=== Shared nav styles
        +$nav-link-padding:                          10px 15px !default;
        +$nav-link-hover-bg:                         $gray-lighter !default;
        +
        +$nav-disabled-link-color:                   $gray-light !default;
        +$nav-disabled-link-hover-color:             $gray-light !default;
        +
        +//== Tabs
        +$nav-tabs-border-color:                     #ddd !default;
        +
        +$nav-tabs-link-hover-border-color:          $gray-lighter !default;
        +
        +$nav-tabs-active-link-hover-bg:             $body-bg !default;
        +$nav-tabs-active-link-hover-color:          $gray !default;
        +$nav-tabs-active-link-hover-border-color:   #ddd !default;
        +
        +$nav-tabs-justified-link-border-color:            #ddd !default;
        +$nav-tabs-justified-active-link-border-color:     $body-bg !default;
        +
        +//== Pills
        +$nav-pills-border-radius:                   $border-radius-base !default;
        +$nav-pills-active-link-hover-bg:            $component-active-bg !default;
        +$nav-pills-active-link-hover-color:         $component-active-color !default;
        +
        +
        +//== Pagination
        +//
        +//##
        +
        +$pagination-color:                     $link-color !default;
        +$pagination-bg:                        #fff !default;
        +$pagination-border:                    #ddd !default;
        +
        +$pagination-hover-color:               $link-hover-color !default;
        +$pagination-hover-bg:                  $gray-lighter !default;
        +$pagination-hover-border:              #ddd !default;
        +
        +$pagination-active-color:              #fff !default;
        +$pagination-active-bg:                 $brand-primary !default;
        +$pagination-active-border:             $brand-primary !default;
        +
        +$pagination-disabled-color:            $gray-light !default;
        +$pagination-disabled-bg:               #fff !default;
        +$pagination-disabled-border:           #ddd !default;
        +
        +
        +//== Pager
        +//
        +//##
        +
        +$pager-bg:                             $pagination-bg !default;
        +$pager-border:                         $pagination-border !default;
        +$pager-border-radius:                  15px !default;
        +
        +$pager-hover-bg:                       $pagination-hover-bg !default;
        +
        +$pager-active-bg:                      $pagination-active-bg !default;
        +$pager-active-color:                   $pagination-active-color !default;
        +
        +$pager-disabled-color:                 $pagination-disabled-color !default;
        +
        +
        +//== Jumbotron
        +//
        +//##
        +
        +$jumbotron-padding:              30px !default;
        +$jumbotron-color:                inherit !default;
        +$jumbotron-bg:                   $gray-lighter !default;
        +$jumbotron-heading-color:        inherit !default;
        +$jumbotron-font-size:            ceil(($font-size-base * 1.5)) !default;
        +$jumbotron-heading-font-size:    ceil(($font-size-base * 4.5)) !default;
        +
        +
        +//== Form states and alerts
        +//
        +//## Define colors for form feedback states and, by default, alerts.
        +
        +$state-success-text:             #3c763d !default;
        +$state-success-bg:               #dff0d8 !default;
        +$state-success-border:           darken(adjust-hue($state-success-bg, -10), 5%) !default;
        +
        +$state-info-text:                #31708f !default;
        +$state-info-bg:                  #d9edf7 !default;
        +$state-info-border:              darken(adjust-hue($state-info-bg, -10), 7%) !default;
        +
        +$state-warning-text:             #8a6d3b !default;
        +$state-warning-bg:               #fcf8e3 !default;
        +$state-warning-border:           darken(adjust-hue($state-warning-bg, -10), 5%) !default;
        +
        +$state-danger-text:              #a94442 !default;
        +$state-danger-bg:                #f2dede !default;
        +$state-danger-border:            darken(adjust-hue($state-danger-bg, -10), 5%) !default;
        +
        +
        +//== Tooltips
        +//
        +//##
        +
        +//** Tooltip max width
        +$tooltip-max-width:           200px !default;
        +//** Tooltip text color
        +$tooltip-color:               #fff !default;
        +//** Tooltip background color
        +$tooltip-bg:                  #000 !default;
        +$tooltip-opacity:             .9 !default;
        +
        +//** Tooltip arrow width
        +$tooltip-arrow-width:         5px !default;
        +//** Tooltip arrow color
        +$tooltip-arrow-color:         $tooltip-bg !default;
        +
        +
        +//== Popovers
        +//
        +//##
        +
        +//** Popover body background color
        +$popover-bg:                          #fff !default;
        +//** Popover maximum width
        +$popover-max-width:                   276px !default;
        +//** Popover border color
        +$popover-border-color:                rgba(0,0,0,.2) !default;
        +//** Popover fallback border color
        +$popover-fallback-border-color:       #ccc !default;
        +
        +//** Popover title background color
        +$popover-title-bg:                    darken($popover-bg, 3%) !default;
        +
        +//** Popover arrow width
        +$popover-arrow-width:                 10px !default;
        +//** Popover arrow color
        +$popover-arrow-color:                 $popover-bg !default;
        +
        +//** Popover outer arrow width
        +$popover-arrow-outer-width:           ($popover-arrow-width + 1) !default;
        +//** Popover outer arrow color
        +$popover-arrow-outer-color:           fade_in($popover-border-color, 0.05) !default;
        +//** Popover outer arrow fallback color
        +$popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%) !default;
        +
        +
        +//== Labels
        +//
        +//##
        +
        +//** Default label background color
        +$label-default-bg:            $gray-light !default;
        +//** Primary label background color
        +$label-primary-bg:            $brand-primary !default;
        +//** Success label background color
        +$label-success-bg:            $brand-success !default;
        +//** Info label background color
        +$label-info-bg:               $brand-info !default;
        +//** Warning label background color
        +$label-warning-bg:            $brand-warning !default;
        +//** Danger label background color
        +$label-danger-bg:             $brand-danger !default;
        +
        +//** Default label text color
        +$label-color:                 #fff !default;
        +//** Default text color of a linked label
        +$label-link-hover-color:      #fff !default;
        +
        +
        +//== Modals
        +//
        +//##
        +
        +//** Padding applied to the modal body
        +$modal-inner-padding:         15px !default;
        +
        +//** Padding applied to the modal title
        +$modal-title-padding:         15px !default;
        +//** Modal title line-height
        +$modal-title-line-height:     $line-height-base !default;
        +
        +//** Background color of modal content area
        +$modal-content-bg:                             #fff !default;
        +//** Modal content border color
        +$modal-content-border-color:                   rgba(0,0,0,.2) !default;
        +//** Modal content border color **for IE8**
        +$modal-content-fallback-border-color:          #999 !default;
        +
        +//** Modal backdrop background color
        +$modal-backdrop-bg:           #000 !default;
        +//** Modal backdrop opacity
        +$modal-backdrop-opacity:      .5 !default;
        +//** Modal header border color
        +$modal-header-border-color:   #e5e5e5 !default;
        +//** Modal footer border color
        +$modal-footer-border-color:   $modal-header-border-color !default;
        +
        +$modal-lg:                    900px !default;
        +$modal-md:                    600px !default;
        +$modal-sm:                    300px !default;
        +
        +
        +//== Alerts
        +//
        +//## Define alert colors, border radius, and padding.
        +
        +$alert-padding:               15px !default;
        +$alert-border-radius:         $border-radius-base !default;
        +$alert-link-font-weight:      bold !default;
        +
        +$alert-success-bg:            $state-success-bg !default;
        +$alert-success-text:          $state-success-text !default;
        +$alert-success-border:        $state-success-border !default;
        +
        +$alert-info-bg:               $state-info-bg !default;
        +$alert-info-text:             $state-info-text !default;
        +$alert-info-border:           $state-info-border !default;
        +
        +$alert-warning-bg:            $state-warning-bg !default;
        +$alert-warning-text:          $state-warning-text !default;
        +$alert-warning-border:        $state-warning-border !default;
        +
        +$alert-danger-bg:             $state-danger-bg !default;
        +$alert-danger-text:           $state-danger-text !default;
        +$alert-danger-border:         $state-danger-border !default;
        +
        +
        +//== Progress bars
        +//
        +//##
        +
        +//** Background color of the whole progress component
        +$progress-bg:                 #f5f5f5 !default;
        +//** Progress bar text color
        +$progress-bar-color:          #fff !default;
        +//** Variable for setting rounded corners on progress bar.
        +$progress-border-radius:      $border-radius-base !default;
        +
        +//** Default progress bar color
        +$progress-bar-bg:             $brand-primary !default;
        +//** Success progress bar color
        +$progress-bar-success-bg:     $brand-success !default;
        +//** Warning progress bar color
        +$progress-bar-warning-bg:     $brand-warning !default;
        +//** Danger progress bar color
        +$progress-bar-danger-bg:      $brand-danger !default;
        +//** Info progress bar color
        +$progress-bar-info-bg:        $brand-info !default;
        +
        +
        +//== List group
        +//
        +//##
        +
        +//** Background color on `.list-group-item`
        +$list-group-bg:                 #fff !default;
        +//** `.list-group-item` border color
        +$list-group-border:             #ddd !default;
        +//** List group border radius
        +$list-group-border-radius:      $border-radius-base !default;
        +
        +//** Background color of single list items on hover
        +$list-group-hover-bg:           #f5f5f5 !default;
        +//** Text color of active list items
        +$list-group-active-color:       $component-active-color !default;
        +//** Background color of active list items
        +$list-group-active-bg:          $component-active-bg !default;
        +//** Border color of active list elements
        +$list-group-active-border:      $list-group-active-bg !default;
        +//** Text color for content within active list items
        +$list-group-active-text-color:  lighten($list-group-active-bg, 40%) !default;
        +
        +//** Text color of disabled list items
        +$list-group-disabled-color:      $gray-light !default;
        +//** Background color of disabled list items
        +$list-group-disabled-bg:         $gray-lighter !default;
        +//** Text color for content within disabled list items
        +$list-group-disabled-text-color: $list-group-disabled-color !default;
        +
        +$list-group-link-color:         #555 !default;
        +$list-group-link-hover-color:   $list-group-link-color !default;
        +$list-group-link-heading-color: #333 !default;
        +
        +
        +//== Panels
        +//
        +//##
        +
        +$panel-bg:                    #fff !default;
        +$panel-body-padding:          15px !default;
        +$panel-heading-padding:       10px 15px !default;
        +$panel-footer-padding:        $panel-heading-padding !default;
        +$panel-border-radius:         $border-radius-base !default;
        +
        +//** Border color for elements within panels
        +$panel-inner-border:          #ddd !default;
        +$panel-footer-bg:             #f5f5f5 !default;
        +
        +$panel-default-text:          $gray-dark !default;
        +$panel-default-border:        #ddd !default;
        +$panel-default-heading-bg:    #f5f5f5 !default;
        +
        +$panel-primary-text:          #fff !default;
        +$panel-primary-border:        $brand-primary !default;
        +$panel-primary-heading-bg:    $brand-primary !default;
        +
        +$panel-success-text:          $state-success-text !default;
        +$panel-success-border:        $state-success-border !default;
        +$panel-success-heading-bg:    $state-success-bg !default;
        +
        +$panel-info-text:             $state-info-text !default;
        +$panel-info-border:           $state-info-border !default;
        +$panel-info-heading-bg:       $state-info-bg !default;
        +
        +$panel-warning-text:          $state-warning-text !default;
        +$panel-warning-border:        $state-warning-border !default;
        +$panel-warning-heading-bg:    $state-warning-bg !default;
        +
        +$panel-danger-text:           $state-danger-text !default;
        +$panel-danger-border:         $state-danger-border !default;
        +$panel-danger-heading-bg:     $state-danger-bg !default;
        +
        +
        +//== Thumbnails
        +//
        +//##
        +
        +//** Padding around the thumbnail image
        +$thumbnail-padding:           4px !default;
        +//** Thumbnail background color
        +$thumbnail-bg:                $body-bg !default;
        +//** Thumbnail border color
        +$thumbnail-border:            #ddd !default;
        +//** Thumbnail border radius
        +$thumbnail-border-radius:     $border-radius-base !default;
        +
        +//** Custom text color for thumbnail captions
        +$thumbnail-caption-color:     $text-color !default;
        +//** Padding around the thumbnail caption
        +$thumbnail-caption-padding:   9px !default;
        +
        +
        +//== Wells
        +//
        +//##
        +
        +$well-bg:                     #f5f5f5 !default;
        +$well-border:                 darken($well-bg, 7%) !default;
        +
        +
        +//== Badges
        +//
        +//##
        +
        +$badge-color:                 #fff !default;
        +//** Linked badge text color on hover
        +$badge-link-hover-color:      #fff !default;
        +$badge-bg:                    $gray-light !default;
        +
        +//** Badge text color in active nav link
        +$badge-active-color:          $link-color !default;
        +//** Badge background color in active nav link
        +$badge-active-bg:             #fff !default;
        +
        +$badge-font-weight:           bold !default;
        +$badge-line-height:           1 !default;
        +$badge-border-radius:         10px !default;
        +
        +
        +//== Breadcrumbs
        +//
        +//##
        +
        +$breadcrumb-padding-vertical:   8px !default;
        +$breadcrumb-padding-horizontal: 15px !default;
        +//** Breadcrumb background color
        +$breadcrumb-bg:                 #f5f5f5 !default;
        +//** Breadcrumb text color
        +$breadcrumb-color:              #ccc !default;
        +//** Text color of current page in the breadcrumb
        +$breadcrumb-active-color:       $gray-light !default;
        +//** Textual separator for between breadcrumb elements
        +$breadcrumb-separator:          "/" !default;
        +
        +
        +//== Carousel
        +//
        +//##
        +
        +$carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6) !default;
        +
        +$carousel-control-color:                      #fff !default;
        +$carousel-control-width:                      15% !default;
        +$carousel-control-opacity:                    .5 !default;
        +$carousel-control-font-size:                  20px !default;
        +
        +$carousel-indicator-active-bg:                #fff !default;
        +$carousel-indicator-border-color:             #fff !default;
        +
        +$carousel-caption-color:                      #fff !default;
        +
        +
        +//== Close
        +//
        +//##
        +
        +$close-font-weight:           bold !default;
        +$close-color:                 #000 !default;
        +$close-text-shadow:           0 1px 0 #fff !default;
        +
        +
        +//== Code
        +//
        +//##
        +
        +$code-color:                  #c7254e !default;
        +$code-bg:                     #f9f2f4 !default;
        +
        +$kbd-color:                   #fff !default;
        +$kbd-bg:                      #333 !default;
        +
        +$pre-bg:                      #f5f5f5 !default;
        +$pre-color:                   $gray-dark !default;
        +$pre-border-color:            #ccc !default;
        +$pre-scrollable-max-height:   340px !default;
        +
        +
        +//== Type
        +//
        +//##
        +
        +//** Horizontal offset for forms and lists.
        +$component-offset-horizontal: 180px !default;
        +//** Text muted color
        +$text-muted:                  $gray-light !default;
        +//** Abbreviations and acronyms border color
        +$abbr-border-color:           $gray-light !default;
        +//** Headings small color
        +$headings-small-color:        $gray-light !default;
        +//** Blockquote small color
        +$blockquote-small-color:      $gray-light !default;
        +//** Blockquote font size
        +$blockquote-font-size:        ($font-size-base * 1.25) !default;
        +//** Blockquote border color
        +$blockquote-border-color:     $gray-lighter !default;
        +//** Page header border color
        +$page-header-border-color:    $gray-lighter !default;
        +//** Width of horizontal description list titles
        +$dl-horizontal-offset:        $component-offset-horizontal !default;
        +//** Horizontal line color.
        +$hr-border:                   $gray-lighter !default;
        diff --git a/docs/_assets/stylesheets/bootstrap/_wells.scss b/docs/_assets/stylesheets/bootstrap/_wells.scss
        new file mode 100644
        index 0000000000..b8657118a6
        --- /dev/null
        +++ b/docs/_assets/stylesheets/bootstrap/_wells.scss
        @@ -0,0 +1,29 @@
        +//
        +// Wells
        +// --------------------------------------------------
        +
        +
        +// Base class
        +.well {
        +  min-height: 20px;
        +  padding: 19px;
        +  margin-bottom: 20px;
        +  background-color: $well-bg;
        +  border: 1px solid $well-border;
        +  border-radius: $border-radius-base;
        +  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
        +  blockquote {
        +    border-color: #ddd;
        +    border-color: rgba(0,0,0,.15);
        +  }
        +}
        +
        +// Sizes
        +.well-lg {
        +  padding: 24px;
        +  border-radius: $border-radius-large;
        +}
        +.well-sm {
        +  padding: 9px;
        +  border-radius: $border-radius-small;
        +}
        diff --git a/docs/_assets/stylesheets/bootstrap/mixins/_alerts.scss b/docs/_assets/stylesheets/bootstrap/mixins/_alerts.scss
        new file mode 100644
        index 0000000000..3faf0b5a50
        --- /dev/null
        +++ b/docs/_assets/stylesheets/bootstrap/mixins/_alerts.scss
        @@ -0,0 +1,14 @@
        +// Alerts
        +
        +@mixin alert-variant($background, $border, $text-color) {
        +  background-color: $background;
        +  border-color: $border;
        +  color: $text-color;
        +
        +  hr {
        +    border-top-color: darken($border, 5%);
        +  }
        +  .alert-link {
        +    color: darken($text-color, 10%);
        +  }
        +}
        diff --git a/docs/_assets/stylesheets/bootstrap/mixins/_background-variant.scss b/docs/_assets/stylesheets/bootstrap/mixins/_background-variant.scss
        new file mode 100644
        index 0000000000..4c7769e13a
        --- /dev/null
        +++ b/docs/_assets/stylesheets/bootstrap/mixins/_background-variant.scss
        @@ -0,0 +1,12 @@
        +// Contextual backgrounds
        +
        +// [converter] $parent hack
        +@mixin bg-variant($parent, $color) {
        +  #{$parent} {
        +    background-color: $color;
        +  }
        +  a#{$parent}:hover,
        +  a#{$parent}:focus {
        +    background-color: darken($color, 10%);
        +  }
        +}
        diff --git a/docs/_assets/stylesheets/bootstrap/mixins/_border-radius.scss b/docs/_assets/stylesheets/bootstrap/mixins/_border-radius.scss
        new file mode 100644
        index 0000000000..ce19499875
        --- /dev/null
        +++ b/docs/_assets/stylesheets/bootstrap/mixins/_border-radius.scss
        @@ -0,0 +1,18 @@
        +// Single side border-radius
        +
        +@mixin border-top-radius($radius) {
        +  border-top-right-radius: $radius;
        +   border-top-left-radius: $radius;
        +}
        +@mixin border-right-radius($radius) {
        +  border-bottom-right-radius: $radius;
        +     border-top-right-radius: $radius;
        +}
        +@mixin border-bottom-radius($radius) {
        +  border-bottom-right-radius: $radius;
        +   border-bottom-left-radius: $radius;
        +}
        +@mixin border-left-radius($radius) {
        +  border-bottom-left-radius: $radius;
        +     border-top-left-radius: $radius;
        +}
        diff --git a/docs/_assets/stylesheets/bootstrap/mixins/_buttons.scss b/docs/_assets/stylesheets/bootstrap/mixins/_buttons.scss
        new file mode 100644
        index 0000000000..ad31187310
        --- /dev/null
        +++ b/docs/_assets/stylesheets/bootstrap/mixins/_buttons.scss
        @@ -0,0 +1,68 @@
        +// Button variants
        +//
        +// Easily pump out default styles, as well as :hover, :focus, :active,
        +// and disabled options for all buttons
        +
        +@mixin button-variant($color, $background, $border) {
        +  color: $color;
        +  background-color: $background;
        +  border-color: $border;
        +
        +  &:focus,
        +  &.focus {
        +    color: $color;
        +    background-color: darken($background, 10%);
        +        border-color: darken($border, 25%);
        +  }
        +  &:hover {
        +    color: $color;
        +    background-color: darken($background, 10%);
        +        border-color: darken($border, 12%);
        +  }
        +  &:active,
        +  &.active,
        +  .open > &.dropdown-toggle {
        +    color: $color;
        +    background-color: darken($background, 10%);
        +        border-color: darken($border, 12%);
        +
        +    &:hover,
        +    &:focus,
        +    &.focus {
        +      color: $color;
        +      background-color: darken($background, 17%);
        +          border-color: darken($border, 25%);
        +    }
        +  }
        +  &:active,
        +  &.active,
        +  .open > &.dropdown-toggle {
        +    background-image: none;
        +  }
        +  &.disabled,
        +  &[disabled],
        +  fieldset[disabled] & {
        +    &,
        +    &:hover,
        +    &:focus,
        +    &.focus,
        +    &:active,
        +    &.active {
        +      background-color: $background;
        +          border-color: $border;
        +    }
        +  }
        +
        +  .badge {
        +    color: $background;
        +    background-color: $color;
        +  }
        +}
        +
        +// Button sizes
        +@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
        +  padding: $padding-vertical $padding-horizontal;
        +  font-size: $font-size;
        +  line-height: $line-height;
        +  border-radius: $border-radius;
        +}
        diff --git a/docs/_assets/stylesheets/bootstrap/mixins/_center-block.scss b/docs/_assets/stylesheets/bootstrap/mixins/_center-block.scss
        new file mode 100644
        index 0000000000..e06fb5e276
        --- /dev/null
        +++ b/docs/_assets/stylesheets/bootstrap/mixins/_center-block.scss
        @@ -0,0 +1,7 @@
        +// Center-align a block level element
        +
        +@mixin center-block() {
        +  display: block;
        +  margin-left: auto;
        +  margin-right: auto;
        +}
        diff --git a/docs/_assets/stylesheets/bootstrap/mixins/_clearfix.scss b/docs/_assets/stylesheets/bootstrap/mixins/_clearfix.scss
        new file mode 100644
        index 0000000000..dc3e2ab426
        --- /dev/null
        +++ b/docs/_assets/stylesheets/bootstrap/mixins/_clearfix.scss
        @@ -0,0 +1,22 @@
        +// Clearfix
        +//
        +// For modern browsers
        +// 1. The space content is one way to avoid an Opera bug when the
        +//    contenteditable attribute is included anywhere else in the document.
        +//    Otherwise it causes space to appear at the top and bottom of elements
        +//    that are clearfixed.
        +// 2. The use of `table` rather than `block` is only necessary if using
        +//    `:before` to contain the top-margins of child elements.
        +//
        +// Source: http://nicolasgallagher.com/micro-clearfix-hack/
        +
        +@mixin clearfix() {
        +  &:before,
        +  &:after {
        +    content: " "; // 1
        +    display: table; // 2
        +  }
        +  &:after {
        +    clear: both;
        +  }
        +}
        diff --git a/docs/_assets/stylesheets/bootstrap/mixins/_forms.scss b/docs/_assets/stylesheets/bootstrap/mixins/_forms.scss
        new file mode 100644
        index 0000000000..277aa5f8e1
        --- /dev/null
        +++ b/docs/_assets/stylesheets/bootstrap/mixins/_forms.scss
        @@ -0,0 +1,88 @@
        +// Form validation states
        +//
        +// Used in forms.less to generate the form validation CSS for warnings, errors,
        +// and successes.
        +
        +@mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {
        +  // Color the label and help text
        +  .help-block,
        +  .control-label,
        +  .radio,
        +  .checkbox,
        +  .radio-inline,
        +  .checkbox-inline,
        +  &.radio label,
        +  &.checkbox label,
        +  &.radio-inline label,
        +  &.checkbox-inline label  {
        +    color: $text-color;
        +  }
        +  // Set the border and box shadow on specific inputs to match
        +  .form-control {
        +    border-color: $border-color;
        +    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
        +    &:focus {
        +      border-color: darken($border-color, 10%);
        +      $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
        +      @include box-shadow($shadow);
        +    }
        +  }
        +  // Set validation states also for addons
        +  .input-group-addon {
        +    color: $text-color;
        +    border-color: $border-color;
        +    background-color: $background-color;
        +  }
        +  // Optional feedback icon
        +  .form-control-feedback {
        +    color: $text-color;
        +  }
        +}
        +
        +
        +// Form control focus state
        +//
        +// Generate a customized focus state and for any input with the specified color,
        +// which defaults to the `$input-border-focus` variable.
        +//
        +// We highly encourage you to not customize the default value, but instead use
        +// this to tweak colors on an as-needed basis. This aesthetic change is based on
        +// WebKit's default styles, but applicable to a wider range of browsers. Its
        +// usability and accessibility should be taken into account with any change.
        +//
        +// Example usage: change the default blue border and shadow to white for better
        +// contrast against a dark gray background.
        +@mixin form-control-focus($color: $input-border-focus) {
        +  $color-rgba: rgba(red($color), green($color), blue($color), .6);
        +  &:focus {
        +    border-color: $color;
        +    outline: 0;
        +    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba);
        +  }
        +}
        +
        +// Form control sizing
        +//
        +// Relative text size, padding, and border-radii changes for form controls. For
        +// horizontal sizing, wrap controls in the predefined grid classes. `
        +            {% else %}
        +            
        +            {% endif %}
        +            
        +            
        +          
        + + +
    +
      + {% assign url = page.url %} + {% for link in site.navigation %} +
    • + {{ link.text }} +
    • + {% endfor %} +
    • + + + +
    • +
    + + +
    diff --git a/docs/_includes/marketing.html b/docs/_includes/marketing.html new file mode 100644 index 0000000000..ef93cf91e8 --- /dev/null +++ b/docs/_includes/marketing.html @@ -0,0 +1,75 @@ +{% if site.env == 'production' %} + + + + + + + + + + + + + + +{% endif %} diff --git a/docs/_includes/newsletter-mc.html b/docs/_includes/newsletter-mc.html new file mode 100644 index 0000000000..776a4c0762 --- /dev/null +++ b/docs/_includes/newsletter-mc.html @@ -0,0 +1,22 @@ + +
    +
    +
    +

    Signup for our newsletter

    +
    +
    + + + + + +
    +
    + + +
    +
    +
    +
    +
    + diff --git a/docs/_includes/search-templates.html b/docs/_includes/search-templates.html new file mode 100644 index 0000000000..0491e7b192 --- /dev/null +++ b/docs/_includes/search-templates.html @@ -0,0 +1,18 @@ + + diff --git a/docs/_includes/widget-jsdoc/addWidget.md b/docs/_includes/widget-jsdoc/addWidget.md new file mode 100644 index 0000000000..6c20426930 --- /dev/null +++ b/docs/_includes/widget-jsdoc/addWidget.md @@ -0,0 +1,23 @@ +

    Parameters

    +

    +`widget` + (Object) +

    +

    The widget to add

    +

    +`widget.render` + (function) +

    +

    Called after each search response has been received

    +

    +`widget.getConfiguration` + (function) +

    +

    Let the widget update the configuration of the search with new parameters

    +

    +`widget.init` + (function) +

    +

    Called once before the first search

    + +

    * Required

    diff --git a/docs/_includes/widget-jsdoc/analytics.md b/docs/_includes/widget-jsdoc/analytics.md new file mode 100644 index 0000000000..4e424d6275 --- /dev/null +++ b/docs/_includes/widget-jsdoc/analytics.md @@ -0,0 +1,23 @@ +

    Parameters

    +

    +`options.pushFunction` + (function) +

    +

    Push function called when data are supposed to be pushed to analytic service

    +

    +`options.delay` + Default:3000(int) +

    +

    Number of milliseconds between last search key stroke and calling pushFunction

    +

    +`options.triggerOnUIInteraction` + Default:false(boolean) +

    +

    Trigger pushFunction after click on page or redirecting the page

    +

    +`options.pushInitialSearch` + Default:true(boolean) +

    +

    Trigger pushFunction after the initial search

    + +

    * Required

    diff --git a/docs/_includes/widget-jsdoc/clearAll.md b/docs/_includes/widget-jsdoc/clearAll.md new file mode 100644 index 0000000000..06002fa06e --- /dev/null +++ b/docs/_includes/widget-jsdoc/clearAll.md @@ -0,0 +1,78 @@ +

    Parameters

    +

    +`options.container` + (string | DOMElement) +

    +

    CSS Selector or DOMElement to insert the widget

    +

    +`options.excludeAttributes` + (Array.<string>) +

    +

    List of attributes names to exclude from clear actions

    +

    +`options.templates` + (Object) +

    +

    Templates to use for the widget

    +

    +`options.templates.header` + (string | function) +

    +

    Header template

    +

    +`options.templates.link` + (string | function) +

    +

    Link template

    +

    +`options.templates.footer` + (string | function) +

    +

    Footer template

    +

    +`options.autoHideContainer` + Default:true(boolean) +

    +

    Hide the container when there's no refinement to clear

    +

    +`options.cssClasses` + (Object) +

    +

    CSS classes to be added

    +

    +`options.cssClasses.root` + (string | Array.<string>) +

    +

    CSS class to add to the root element

    +

    +`options.cssClasses.header` + (string | Array.<string>) +

    +

    CSS class to add to the header element

    +

    +`options.cssClasses.body` + (string | Array.<string>) +

    +

    CSS class to add to the body element

    +

    +`options.cssClasses.footer` + (string | Array.<string>) +

    +

    CSS class to add to the footer element

    +

    +`options.cssClasses.link` + (string | Array.<string>) +

    +

    CSS class to add to the link element

    +

    +`options.collapsible` + Default:false(object | boolean) +

    +

    Hide the widget body and footer when clicking on header

    +

    +`options.collapsible.collapsed` + (boolean) +

    +

    Initial collapsed state of a collapsible widget

    + +

    * Required

    diff --git a/docs/_includes/widget-jsdoc/currentRefinedValues.md b/docs/_includes/widget-jsdoc/currentRefinedValues.md new file mode 100644 index 0000000000..f0d937c63b --- /dev/null +++ b/docs/_includes/widget-jsdoc/currentRefinedValues.md @@ -0,0 +1,138 @@ +

    Parameters

    +

    +`options.container` + (string | DOMElement) +

    +

    CSS Selector or DOMElement to insert the widget

    +

    +`option.attributes` + (Array) +

    +

    Attributes configuration

    +

    +`option.attributes[].name` + (string) +

    +

    Required attribute name

    +

    +`option.attributes[].label` + (string) +

    +

    Attribute label (passed to the item template)

    +

    +`option.attributes[].template` + (string | function) +

    +

    Attribute specific template

    +

    +`option.attributes[].transformData` + (function) +

    +

    Attribute specific transformData

    +

    +`option.clearAll` + Default:'before'(boolean | string) +

    +

    Clear all position (one of ('before', 'after', false))

    +

    +`options.onlyListedAttributes` + Default:false(boolean) +

    +

    Only use declared attributes

    +

    +`options.templates` + (Object) +

    +

    Templates to use for the widget

    +

    +`options.templates.header` + (string | function) +

    +

    Header template

    +

    +`options.templates.item` + (string | function) +

    +

    Item template

    +

    +`options.templates.clearAll` + (string | function) +

    +

    Clear all template

    +

    +`options.templates.footer` + (string | function) +

    +

    Footer template

    +

    +`options.transformData.item` + (function) +

    +

    Function to change the object passed to the `item` template

    +

    +`options.autoHideContainer` + Default:true(boolean) +

    +

    Hide the container when no current refinements

    +

    +`options.cssClasses` + (Object) +

    +

    CSS classes to be added

    +

    +`options.cssClasses.root` + (string) +

    +

    CSS classes added to the root element

    +

    +`options.cssClasses.header` + (string) +

    +

    CSS classes added to the header element

    +

    +`options.cssClasses.body` + (string) +

    +

    CSS classes added to the body element

    +

    +`options.cssClasses.clearAll` + (string) +

    +

    CSS classes added to the clearAll element

    +

    +`options.cssClasses.list` + (string) +

    +

    CSS classes added to the list element

    +

    +`options.cssClasses.item` + (string) +

    +

    CSS classes added to the item element

    +

    +`options.cssClasses.link` + (string) +

    +

    CSS classes added to the link element

    +

    +`options.cssClasses.count` + (string) +

    +

    CSS classes added to the count element

    +

    +`options.cssClasses.footer` + (string) +

    +

    CSS classes added to the footer element

    +

    +`options.collapsible` + Default:false(object | boolean) +

    +

    Hide the widget body and footer when clicking on header

    +

    +`options.collapsible.collapsed` + (boolean) +

    +

    Initial collapsed state of a collapsible widget

    + +

    * Required

    diff --git a/docs/_includes/widget-jsdoc/hierarchicalMenu.md b/docs/_includes/widget-jsdoc/hierarchicalMenu.md new file mode 100644 index 0000000000..1553cc2b40 --- /dev/null +++ b/docs/_includes/widget-jsdoc/hierarchicalMenu.md @@ -0,0 +1,133 @@ +

    Parameters

    +

    +`options.container` + (string | DOMElement) +

    +

    CSS Selector or DOMElement to insert the widget

    +

    +`options.attributes` + (Array.<string>) +

    +

    Array of attributes to use to generate the hierarchy of the menu. See the example for the convention to follow.

    +

    +`options.limit` + Default:10(number) +

    +

    How much facet values to get

    +

    +`options.separator` + Default:">"(string) +

    +

    Separator used in the attributes to separate level values.

    +

    +`options.rootPath` + (string) +

    +

    Prefix path to use if the first level is not the root level.

    +

    +`options.showParentLevel` + Default:false(string) +

    +

    Show the parent level of the current refined value

    +

    +`options.sortBy` + Default:['name:asc'](Array.<string> | function) +

    +

    How to sort refinements. Possible values: `count|isRefined|name:asc|name:desc`. You can also use a sort function that behaves like the standard Javascript [compareFunction](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Syntax).

    +

    +`options.templates` + (Object) +

    +

    Templates to use for the widget

    +

    +`options.templates.header` + Default:''(string | function) +

    +

    Header template (root level only)

    +

    +`options.templates.item` + (string | function) +

    +

    Item template, provided with `name`, `count`, `isRefined`, `url` data properties

    +

    +`options.templates.footer` + Default:''(string | function) +

    +

    Footer template (root level only)

    +

    +`options.transformData.item` + (function) +

    +

    Method to change the object passed to the `item` template

    +

    +`options.autoHideContainer` + Default:true(boolean) +

    +

    Hide the container when there are no items in the menu

    +

    +`options.cssClasses` + (Object) +

    +

    CSS classes to add to the wrapping elements

    +

    +`options.cssClasses.root` + (string | Array.<string>) +

    +

    CSS class to add to the root element

    +

    +`options.cssClasses.header` + (string | Array.<string>) +

    +

    CSS class to add to the header element

    +

    +`options.cssClasses.body` + (string | Array.<string>) +

    +

    CSS class to add to the body element

    +

    +`options.cssClasses.footer` + (string | Array.<string>) +

    +

    CSS class to add to the footer element

    +

    +`options.cssClasses.list` + (string | Array.<string>) +

    +

    CSS class to add to the list element

    +

    +`options.cssClasses.item` + (string | Array.<string>) +

    +

    CSS class to add to each item element

    +

    +`options.cssClasses.depth` + (string | Array.<string>) +

    +

    CSS class to add to each item element to denote its depth. The actual level will be appended to the given class name (ie. if `depth` is given, the widget will add `depth0`, `depth1`, ... according to the level of each item).

    +

    +`options.cssClasses.active` + (string | Array.<string>) +

    +

    CSS class to add to each active element

    +

    +`options.cssClasses.link` + (string | Array.<string>) +

    +

    CSS class to add to each link (when using the default template)

    +

    +`options.cssClasses.count` + (string | Array.<string>) +

    +

    CSS class to add to each count element (when using the default template)

    +

    +`options.collapsible` + Default:false(object | boolean) +

    +

    Hide the widget body and footer when clicking on header

    +

    +`options.collapsible.collapsed` + (boolean) +

    +

    Initial collapsed state of a collapsible widget

    + +

    * Required

    diff --git a/docs/_includes/widget-jsdoc/hits.md b/docs/_includes/widget-jsdoc/hits.md new file mode 100644 index 0000000000..4406a0d18a --- /dev/null +++ b/docs/_includes/widget-jsdoc/hits.md @@ -0,0 +1,73 @@ +

    Parameters

    +

    +`options.container` + (string | DOMElement) +

    +

    CSS Selector or DOMElement to insert the widget

    +

    +`options.hitsPerPage` + Default:20(number) +

    +

    The number of hits to display per page

    +

    +`options.templates` + (Object) +

    +

    Templates to use for the widget

    +

    +`options.templates.empty` + Default:''(string | function) +

    +

    Template to use when there are no results.

    +

    +`options.templates.item` + Default:''(string | function) +

    +

    Template to use for each result. This template will receive an object containing a single record.

    +

    +`options.templates.allItems` + Default:''(string | function) +

    +

    Template to use for the list of all results. (Can't be used with `item` template). This template will receive a complete SearchResults result object, this object contains the key hits that contains all the records retrieved.

    +

    +`options.transformData` + (Object) +

    +

    Method to change the object passed to the templates

    +

    +`options.transformData.empty` + (function) +

    +

    Method used to change the object passed to the `empty` template

    +

    +`options.transformData.item` + (function) +

    +

    Method used to change the object passed to the `item` template

    +

    +`options.transformData.allItems` + (function) +

    +

    Method used to change the object passed to the `allItems` template

    +

    +`options.cssClasses` + (Object) +

    +

    CSS classes to add

    +

    +`options.cssClasses.root` + (string | Array.<string>) +

    +

    CSS class to add to the wrapping element

    +

    +`options.cssClasses.empty` + (string | Array.<string>) +

    +

    CSS class to add to the wrapping element when no results

    +

    +`options.cssClasses.item` + (string | Array.<string>) +

    +

    CSS class to add to each result

    + +

    * Required

    diff --git a/docs/_includes/widget-jsdoc/hitsPerPageSelector.md b/docs/_includes/widget-jsdoc/hitsPerPageSelector.md new file mode 100644 index 0000000000..e014e8261c --- /dev/null +++ b/docs/_includes/widget-jsdoc/hitsPerPageSelector.md @@ -0,0 +1,43 @@ +

    Parameters

    +

    +`options.container` + (string | DOMElement) +

    +

    CSS Selector or DOMElement to insert the widget

    +

    +`options.options` + (Array) +

    +

    Array of objects defining the different values and labels

    +

    +`options.options[0].value` + (number) +

    +

    number of hits to display per page

    +

    +`options.options[0].label` + (string) +

    +

    Label to display in the option

    +

    +`options.autoHideContainer` + Default:false(boolean) +

    +

    Hide the container when no results match

    +

    +`options.cssClasses` + (Object) +

    +

    CSS classes to be added

    +

    +`options.cssClasses.root` + (string | Array.<string>) +

    +

    CSS classes added to the parent ``

    +

    +`options.cssClasses.item` + (string | Array.<string>) +

    +

    CSS classes added to each `

    + +

    * Required

    diff --git a/docs/_includes/widget-jsdoc/pagination.md b/docs/_includes/widget-jsdoc/pagination.md new file mode 100644 index 0000000000..dc10fda35f --- /dev/null +++ b/docs/_includes/widget-jsdoc/pagination.md @@ -0,0 +1,113 @@ +

    Parameters

    +

    +`options.container` + (string | DOMElement) +

    +

    CSS Selector or DOMElement to insert the widget

    +

    +`options.labels` + (Object) +

    +

    Text to display in the various links (prev, next, first, last)

    +

    +`options.labels.previous` + (string) +

    +

    Label for the Previous link

    +

    +`options.labels.next` + (string) +

    +

    Label for the Next link

    +

    +`options.labels.first` + (string) +

    +

    Label for the First link

    +

    +`options.labels.last` + (string) +

    +

    Label for the Last link

    +

    +`options.maxPages` + (number) +

    +

    The max number of pages to browse

    +

    +`options.padding` + Default:3(number) +

    +

    The number of pages to display on each side of the current page

    +

    +`options.scrollTo` + Default:'body'(string | DOMElement | boolean) +

    +

    Where to scroll after a click, set to `false` to disable

    +

    +`options.showFirstLast` + Default:true(boolean) +

    +

    Define if the First and Last links should be displayed

    +

    +`options.autoHideContainer` + Default:true(boolean) +

    +

    Hide the container when no results match

    +

    +`options.cssClasses` + (Object) +

    +

    CSS classes to be added

    +

    +`options.cssClasses.root` + (string | Array.<string>) +

    +

    CSS classes added to the parent `

      `

      +

      +`options.cssClasses.item` + (string | Array.<string>) +

      +

      CSS classes added to each `

    • `

      +

      +`options.cssClasses.link` + (string | Array.<string>) +

      +

      CSS classes added to each link

      +

      +`options.cssClasses.page` + (string | Array.<string>) +

      +

      CSS classes added to page `

    • `

      +

      +`options.cssClasses.previous` + (string | Array.<string>) +

      +

      CSS classes added to the previous `

    • `

      +

      +`options.cssClasses.next` + (string | Array.<string>) +

      +

      CSS classes added to the next `

    • `

      +

      +`options.cssClasses.first` + (string | Array.<string>) +

      +

      CSS classes added to the first `

    • `

      +

      +`options.cssClasses.last` + (string | Array.<string>) +

      +

      CSS classes added to the last `

    • `

      +

      +`options.cssClasses.active` + (string | Array.<string>) +

      +

      CSS classes added to the active `

    • `

      +

      +`options.cssClasses.disabled` + (string | Array.<string>) +

      +

      CSS classes added to the disabled `

    • `

      + +

      * Required

      diff --git a/docs/_includes/widget-jsdoc/priceRanges.md b/docs/_includes/widget-jsdoc/priceRanges.md new file mode 100644 index 0000000000..0b57793a38 --- /dev/null +++ b/docs/_includes/widget-jsdoc/priceRanges.md @@ -0,0 +1,133 @@ +

      Parameters

      +

      +`options.container` + (string | DOMElement) +

      +

      Valid CSS Selector as a string or DOMElement

      +

      +`options.attributeName` + (string) +

      +

      Name of the attribute for faceting

      +

      +`options.templates` + (Object) +

      +

      Templates to use for the widget

      +

      +`options.templates.item` + (string | function) +

      +

      Item template. Template data: `from`, `to` and `currency`

      +

      +`options.currency` + Default:'$'(string) +

      +

      The currency to display

      +

      +`options.labels` + (Object) +

      +

      Labels to use for the widget

      +

      +`options.labels.separator` + (string | function) +

      +

      Separator label, between min and max

      +

      +`options.labels.button` + (string | function) +

      +

      Button label

      +

      +`options.autoHideContainer` + Default:true(boolean) +

      +

      Hide the container when no refinements available

      +

      +`options.cssClasses` + (Object) +

      +

      CSS classes to add

      +

      +`options.cssClasses.root` + (string | Array.<string>) +

      +

      CSS class to add to the root element

      +

      +`options.cssClasses.header` + (string | Array.<string>) +

      +

      CSS class to add to the header element

      +

      +`options.cssClasses.body` + (string | Array.<string>) +

      +

      CSS class to add to the body element

      +

      +`options.cssClasses.list` + (string | Array.<string>) +

      +

      CSS class to add to the wrapping list element

      +

      +`options.cssClasses.item` + (string | Array.<string>) +

      +

      CSS class to add to each item element

      +

      +`options.cssClasses.active` + (string | Array.<string>) +

      +

      CSS class to add to the active item element

      +

      +`options.cssClasses.link` + (string | Array.<string>) +

      +

      CSS class to add to each link element

      +

      +`options.cssClasses.form` + (string | Array.<string>) +

      +

      CSS class to add to the form element

      +

      +`options.cssClasses.label` + (string | Array.<string>) +

      +

      CSS class to add to each wrapping label of the form

      +

      +`options.cssClasses.input` + (string | Array.<string>) +

      +

      CSS class to add to each input of the form

      +

      +`options.cssClasses.currency` + (string | Array.<string>) +

      +

      CSS class to add to each currency element of the form

      +

      +`options.cssClasses.separator` + (string | Array.<string>) +

      +

      CSS class to add to the separator of the form

      +

      +`options.cssClasses.button` + (string | Array.<string>) +

      +

      CSS class to add to the submit button of the form

      +

      +`options.cssClasses.footer` + (string | Array.<string>) +

      +

      CSS class to add to the footer element

      +

      +`options.collapsible` + Default:false(object | boolean) +

      +

      Hide the widget body and footer when clicking on header

      +

      +`options.collapsible.collapsed` + (boolean) +

      +

      Initial collapsed state of a collapsible widget

      + +

      * Required

      diff --git a/docs/_includes/widget-jsdoc/rangeSlider.md b/docs/_includes/widget-jsdoc/rangeSlider.md new file mode 100644 index 0000000000..b9aeca631b --- /dev/null +++ b/docs/_includes/widget-jsdoc/rangeSlider.md @@ -0,0 +1,93 @@ +

      Parameters

      +

      +`options.container` + (string | DOMElement) +

      +

      CSS Selector or DOMElement to insert the widget

      +

      +`options.attributeName` + (string) +

      +

      Name of the attribute for faceting

      +

      +`options.tooltips` + Default:true(boolean | Object) +

      +

      Should we show tooltips or not. The default tooltip will show the raw value. You can also provide `tooltips: {format: function(rawValue) {return '$' + Math.round(rawValue).toLocaleString()}}` So that you can format the tooltip display value as you want

      +

      +`options.templates` + (Object) +

      +

      Templates to use for the widget

      +

      +`options.templates.header` + Default:''(string | function) +

      +

      Header template

      +

      +`options.templates.footer` + Default:''(string | function) +

      +

      Footer template

      +

      +`options.autoHideContainer` + Default:true(boolean) +

      +

      Hide the container when no refinements available

      +

      +`options.cssClasses` + (Object) +

      +

      CSS classes to add to the wrapping elements

      +

      +`options.cssClasses.root` + (string | Array.<string>) +

      +

      CSS class to add to the root element

      +

      +`options.cssClasses.header` + (string | Array.<string>) +

      +

      CSS class to add to the header element

      +

      +`options.cssClasses.body` + (string | Array.<string>) +

      +

      CSS class to add to the body element

      +

      +`options.cssClasses.footer` + (string | Array.<string>) +

      +

      CSS class to add to the footer element

      +

      +`options.pips` + Default:true(boolean | object) +

      +

      Show slider pips.

      +

      +`options.step` + Default:1(boolean | object) +

      +

      Every handle move will jump that number of steps.

      +

      +`options.collapsible` + Default:false(object | boolean) +

      +

      Hide the widget body and footer when clicking on header

      +

      +`options.collapsible.collapsed` + (boolean) +

      +

      Initial collapsed state of a collapsible widget

      +

      +`options.min` + (number) +

      +

      Minimal slider value, default to automatically computed from the result set

      +

      +`options.max` + (number) +

      +

      Maximal slider value, defaults to automatically computed from the result set

      + +

      * Required

      diff --git a/docs/_includes/widget-jsdoc/refinementList.md b/docs/_includes/widget-jsdoc/refinementList.md new file mode 100644 index 0000000000..aab907c186 --- /dev/null +++ b/docs/_includes/widget-jsdoc/refinementList.md @@ -0,0 +1,168 @@ +

      Parameters

      +

      +`options.container` + (string | DOMElement) +

      +

      CSS Selector or DOMElement to insert the widget

      +

      +`options.attributeName` + (string) +

      +

      Name of the attribute for faceting

      +

      +`options.operator` + Default:'or'(string) +

      +

      How to apply refinements. Possible values: `or`, `and`

      +

      +`options.sortBy` + Default:['count:desc', 'name:asc'](Array.<string> | function) +

      +

      How to sort refinements. Possible values: `count:asc|count:desc|name:asc|name:desc|isRefined`. You can also use a sort function that behaves like the standard Javascript [compareFunction](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Syntax).

      +

      +`options.limit` + Default:10(string) +

      +

      How much facet values to get. When the show more feature is activated this is the minimum number of facets requested (the show more button is not in active state).

      +

      +`options.searchForFacetValues` + Default:false(object | boolean) +

      +

      Add a search input to let the user search for more facet values

      +

      +`options.searchForFacetValues.placeholder` + (string) +

      +

      Value of the search field placeholder

      +

      +`options.searchForFacetValues.templates` + (string) +

      +

      Templates to use for search for facet values

      +

      +`options.searchForFacetValues.templates.noResults` + (string) +

      +

      Templates to use for search for facet values

      +

      +`options.showMore` + Default:false(object | boolean) +

      +

      Limit the number of results and display a showMore button

      +

      +`options.showMore.templates` + (object) +

      +

      Templates to use for showMore

      +

      +`options.showMore.templates.active` + (object) +

      +

      Template used when showMore was clicked

      +

      +`options.showMore.templates.inactive` + (object) +

      +

      Template used when showMore not clicked

      +

      +`options.showMore.limit` + (object) +

      +

      Max number of facets values to display when showMore is clicked

      +

      +`options.templates` + (Object) +

      +

      Templates to use for the widget

      +

      +`options.templates.header` + (string | function) +

      +

      Header template, provided with `refinedFacetsCount` data property

      +

      +`options.templates.item` + (string | function) +

      +

      Item template, provided with `name`, `count`, `isRefined`, `url` data properties

      +

      +`options.templates.footer` + (string | function) +

      +

      Footer template

      +

      +`options.transformData.item` + (function) +

      +

      Function to change the object passed to the `item` template

      +

      +`options.autoHideContainer` + Default:true(boolean) +

      +

      Hide the container when no items in the refinement list

      +

      +`options.cssClasses` + (Object) +

      +

      CSS classes to add to the wrapping elements

      +

      +`options.cssClasses.root` + (string | Array.<string>) +

      +

      CSS class to add to the root element

      +

      +`options.cssClasses.header` + (string | Array.<string>) +

      +

      CSS class to add to the header element

      +

      +`options.cssClasses.body` + (string | Array.<string>) +

      +

      CSS class to add to the body element

      +

      +`options.cssClasses.footer` + (string | Array.<string>) +

      +

      CSS class to add to the footer element

      +

      +`options.cssClasses.list` + (string | Array.<string>) +

      +

      CSS class to add to the list element

      +

      +`options.cssClasses.item` + (string | Array.<string>) +

      +

      CSS class to add to each item element

      +

      +`options.cssClasses.active` + (string | Array.<string>) +

      +

      CSS class to add to each active element

      +

      +`options.cssClasses.label` + (string | Array.<string>) +

      +

      CSS class to add to each label element (when using the default template)

      +

      +`options.cssClasses.checkbox` + (string | Array.<string>) +

      +

      CSS class to add to each checkbox element (when using the default template)

      +

      +`options.cssClasses.count` + (string | Array.<string>) +

      +

      CSS class to add to each count element (when using the default template)

      +

      +`options.collapsible` + Default:false(object | boolean) +

      +

      Hide the widget body and footer when clicking on header

      +

      +`options.collapsible.collapsed` + (boolean) +

      +

      Initial collapsed state of a collapsible widget

      + +

      * Required

      diff --git a/docs/_includes/widget-jsdoc/searchBox.md b/docs/_includes/widget-jsdoc/searchBox.md new file mode 100644 index 0000000000..0ceb78cd34 --- /dev/null +++ b/docs/_includes/widget-jsdoc/searchBox.md @@ -0,0 +1,73 @@ +

      Parameters

      +

      +`options.container` + (string | DOMElement) +

      +

      CSS Selector or DOMElement to insert the widget

      +

      +`options.placeholder` + (string) +

      +

      Input's placeholder

      +

      +`options.poweredBy` + Default:false(boolean | Object) +

      +

      Define if a "powered by Algolia" link should be added near the input

      +

      +`options.poweredBy.template` + (function | string) +

      +

      Template used for displaying the link. Can accept a function or a Hogan string.

      +

      +`options.poweredBy.cssClasses` + (number) +

      +

      CSS classes to add

      +

      +`options.poweredBy.cssClasses.root` + (string | Array.<string>) +

      +

      CSS class to add to the root element

      +

      +`options.poweredBy.cssClasses.link` + (string | Array.<string>) +

      +

      CSS class to add to the link element

      +

      +`options.wrapInput` + Default:true(boolean) +

      +

      Wrap the input in a `div.ais-search-box`

      +

      +`autofocus` + Default:'auto'(boolean | string) +

      +

      autofocus on the input

      +

      +`options.searchOnEnterKeyPressOnly` + Default:false(boolean) +

      +

      If set, trigger the search once `` is pressed only

      +

      +`options.cssClasses` + (Object) +

      +

      CSS classes to add

      +

      +`options.cssClasses.root` + (string | Array.<string>) +

      +

      CSS class to add to the wrapping div (if `wrapInput` set to `true`)

      +

      +`options.cssClasses.input` + (string | Array.<string>) +

      +

      CSS class to add to the input

      +

      +`options.queryHook` + (function) +

      +

      A function that will be called every time a new search would be done. You will get the query as first parameter and a search(query) function to call as the second parameter. This queryHook can be used to debounce the number of searches done from the searchBox.

      + +

      * Required

      diff --git a/docs/_includes/widget-jsdoc/sortBySelector.md b/docs/_includes/widget-jsdoc/sortBySelector.md new file mode 100644 index 0000000000..2bd7b7d505 --- /dev/null +++ b/docs/_includes/widget-jsdoc/sortBySelector.md @@ -0,0 +1,43 @@ +

      Parameters

      +

      +`options.container` + (string | DOMElement) +

      +

      CSS Selector or DOMElement to insert the widget

      +

      +`options.indices` + (Array) +

      +

      Array of objects defining the different indices to choose from.

      +

      +`options.indices[0].name` + (string) +

      +

      Name of the index to target

      +

      +`options.indices[0].label` + (string) +

      +

      Label displayed in the dropdown

      +

      +`options.autoHideContainer` + Default:false(boolean) +

      +

      Hide the container when no results match

      +

      +`options.cssClasses` + (Object) +

      +

      CSS classes to be added

      +

      +`options.cssClasses.root` + (string | Array.<string>) +

      +

      CSS classes added to the parent ' + current_level = 1 + doc.css(@@selector).each do |tag| + level = tag.name[1].to_i + html << "" + current_level = level + end + + html << '' + + html.join + end + end + +end + +Liquid::Template.register_filter(Jekyll::TOCGenerator) diff --git a/docs/_preview.yml b/docs/_preview.yml new file mode 100644 index 0000000000..c42e9f8716 --- /dev/null +++ b/docs/_preview.yml @@ -0,0 +1,4 @@ +# waiting for https://github.com/imathis/guard-jekyll-plus/issues/49 +baseurl: "/instantsearch.js" +instantsearch_css: "/instantsearch.js/instantsearch.min.css" +instantsearch_js: "/instantsearch.js/instantsearch.min.js" diff --git a/docs/_production.yml b/docs/_production.yml new file mode 100644 index 0000000000..fc92d5c0e3 --- /dev/null +++ b/docs/_production.yml @@ -0,0 +1,4 @@ +# waiting for https://github.com/imathis/guard-jekyll-plus/issues/49 +baseurl: "/instantsearch.js" +instantsearch_css: "https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.css" +instantsearch_js: "https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js" diff --git a/docs/about.md b/docs/about.md new file mode 100644 index 0000000000..601b088821 --- /dev/null +++ b/docs/about.md @@ -0,0 +1,20 @@ +--- +layout: page +title: About instantsearch.js +permalink: /about/ +--- +**instantsearch.js** is an open source project developed and maintained by [Algolia](https://www.algolia.com) [on GitHub](https://github.com/algolia/instantsearch.js) and released under MIT license. Our mission has always been to help developers implement great search experiences in no time. We started by focusing our efforts on the speed and relevance of the search engine itself, and we quickly discovered that querying the engine from the frontend was important–end users crave Google-and-Amazon-like experiences: fast and relevant search results pages that don't require page reloads. + +We dedicated all our energy to developing a product that could be used directly from the frontend, without compromising on required security features. For example [secured API Keys](https://www.algolia.com/doc/ruby#secured-api-keys) allow us to replicate on the frontend all the restriction enforcements we take for granted on the backend. Unfortunately, we also discovered that implementing the UI itself is complex and time consuming because of tricky issues such as handling refinement states, updating the URL, etc... + +We started developing **instantsearch.js** in early 2015. Our initial idea was inspired by [Stripe Checkout](https://stripe.com/docs/checkout), a great payment UI/UX packaged as a JS library that anyone can easily use. The main difference between Stripe Checkout and **instantsearch.js** is that it is close to impossible to package all search use-cases in one monolithic script. This is why we chose a different approach—a UI library containing different widgets that you can assemble and customize to build great search experiences. + +

      + +# About Algolia +Founded in 2012, Algolia is a privately held company created by developers, veterans in the fields of algorithms, search engines and text mining. We develop a search-as-a-service API to help developers deliver an intuitive search-as-you-type experience in their applications and websites. + +We enable super fast and relevant search experiences in no time with our worldwide infrastructure deployed in 14 different regions (28 different datacenters). In one click, you can distribute your search on several regions with our [Distributed Search Network](https://www.algolia.com/dsn) infrastructure. + +Algolia is backed by international VC funds: Y Combinator (W14), Accel Partners, Storm ventures, Index Ventures, Alven Capital, 500 startups and Point Nine Capital. +
      diff --git a/docs/documentation.md b/docs/documentation.md new file mode 100644 index 0000000000..3934c129f0 --- /dev/null +++ b/docs/documentation.md @@ -0,0 +1,1558 @@ +--- +layout: documentation +title: Documentation +permalink: /documentation/ +noFooter: true +--- + +{::options parse_block_html="true" /} + +## Introduction + + + +**instantsearch.js** is a JavaScript library that lets you create an instant search results experience using Algolia's REST API. + +A search results page is made up of individual components, also known as widgets. Widgets are UI components for either the search input (search bar, facets/filters, etc.) or the search output (actual results). + +Each widget is independent, and their rendering is bound to the search. They follow the **instantsearch.js** lifecycle: + + - **Configuration**: each widget adds new query parameters to the underlying Algolia API client. + - **Initial rendering**: before the initial search, the widget may update the UI. + - **Rendering**: on each search, after the results come back from Algolia, the widgets update themselves. + +The library is open-source, based on [React.js](https://facebook.github.io/react/) and hosted on GitHub: [ algolia/instantsearch.js](https://github.com/algolia/instantsearch.js). All contributions are welcome. + +### Setup + +#### From a CDN +{:.no-toc} + +
      + +Use a built version of **instantsearch.js** from the [jsDelivr](https://www.jsdelivr.com/) CDN: + +
      +
      +{% highlight html %} + + +{% endhighlight %} +
      +
      + +You will then have access to the `instantsearch` function in the global scope (window). + +The jsDelivr CDN is highly available with [over 110 locations](https://www.jsdelivr.com/features/network-map) in the world. + +
      + +#### From NPM +{:.no-toc} + +
      + +If you have a JavaScript build system, you can install **instantsearch.js** from NPM: + +
      +
      +{% highlight sh %} +npm install instantsearch.js --save +{% endhighlight %} +
      +
      +
      +
      +{% highlight javascript %} +var instantsearch = require('instantsearch.js'); +{% endhighlight %} +
      +
      + +You need to manually load the companion [CSS file](http://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.css) into your page. + +
      + +### Bower + +Use jsDelivr builds to install with bower: + +
      +
      +{% highlight sh %} +bower install https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.js +{% endhighlight %} +
      +
      + +### Light build + +We created a light build that uses [Preact](https://preactjs.com/) instead of [React](http://reactjs.org/) internally. + +We recommend using the light build for new users and switching to it for existing users if you are not using +React on your side. + +To use it, require this file: + +
      +
      +{% highlight html %} + +{% endhighlight %} +
      +
      + +### React InstantSearch + +We also have a dedicated React library if you are already using React: [React InstantSearch](https://community.algolia.com/instantsearch.js/react/). + +### Initialization + +
      + +To initialize the **instantsearch.js** library, you need an Algolia account with a configured and non-empty index. + +
      +
      +{% highlight javascript %} +var search = instantsearch({ + appId: '$appId', + apiKey: '$apiKey', + indexName: '$indexName', + urlSync: true +}); +{% endhighlight %} +
      +
      +{% highlight javascript %} +instantsearch(options); +{% endhighlight %} + +{% include widget-jsdoc/instantsearch.md %} +
      +
      +Use your **search-only API key**. Your index should also contain data. +
      +
      + +You can find your Algolia credentials on the [credentials page of your dashboard](https://www.algolia.com/licensing). + +Use the **APPLICATION\_ID** `appId`, the **search only API\_KEY** `apiKey` and an index name `indexName` to configure the required parameters of the `instantsearch` function. + +If you don't have any indices yet, learn how to push your data with the [Algolia getting started guide](https://www.algolia.com/getstarted). + +**Url synchronization** + +You can synchronise the current search with the browser url. It provides two benefits: + + - Working back/next browser buttons + - Copy and share the current search url + +To configure this feature, pass `urlSync: true` option to `instantsearch()`. + +The `urlSync` option has more parameters, see the `instantsearch` function documentation. + +
      + +### Adding Widgets + +
      + +To build your search results page, you need to combine several widgets. Start by adding a `searchBox` widget, a `hits` widget and a `pagination` widget to build a basic results page. + +
      +
      +{% highlight html %} + + + +{% endhighlight %} +
      +
      +{% highlight javascript %} +search.addWidget(widget) +{% endhighlight %} + +{% include widget-jsdoc/addWidget.md %} + +
      +
      + +
      + +Note: **instantsearch.js** comes with [built-in widgets](#widgets), but you can also build your [own custom widgets](#custom-widgets). + +### Start + +
      + +Once all the widgets have been added to the instantsearch instance, start the rendering by calling the `start()` method. + +
      +
      +{% highlight javascript %} +search.start(); +{% endhighlight %} +
      +
      + +
      + +
      + +
      + +This example shows you how to create a very simple search results page that includes a searchBox, a list of hits and a pagination widget. + +
      +
      +{% highlight html %} + + + + + instantsearch.js basics + + + +
      +
      + + + + + +{% endhighlight %} +
      +
      + +
      + +
      + +Add widgets + +### Events + +
      +
      +{% highlight js %} +var search = instantsearch({ + appId: '$appId', + apiKey: '$apiKey', + indexName: '$indexName', + urlSync: true +}); + +var onRenderHandler = function() {}; +search.on('render', onRenderHandler); +// on renderHandler will be called +// until removeListener is called +search.removeListener(onRenderHandler); + +search.once('render', function(){ }); +// triggered once then removed automatically +{% endhighlight %} +
      +
      + +instantsearch emits events during its lifecycle. The currently supported events are: + + - `render`: fired when a rendering of all the widgets has been completed + +instantsearch events are based on the [Node EventEmitter](https://nodejs.org/api/events.html) +class. See the example for a quick overview of the API or go to the +[Node documentation](https://nodejs.org/api/events.html) for more details. + + +## Widgets + +### Basics + +#### searchBox + +
      + + +The search box widget is where you users type their search queries. +{:.description} + +
      +
      +{% highlight javascript %} +search.addWidget( + instantsearch.widgets.searchBox({ + container: '#q', + placeholder: 'Search for products', + autofocus: false, + poweredBy: true + }) +); +{% endhighlight %} +
      +
      +{% highlight javascript %} +instantsearch.widgets.searchBox(options) +{% endhighlight %} + +{% include widget-jsdoc/searchBox.md %} + +
      +
      +For better results, we suggest that you configure at least the +[attributeToIndex](https://www.algolia.com/doc/rest#param-attributesToIndex) and +[customRanking](https://www.algolia.com/doc/rest#param-customRanking) of your +index. +
      +
      + +
      + +
      + +#### hits + +
      + + +The hits widget is the main component that displays results from Algolia. It accepts a [Mustache]() template string or a function returning a string. See the [templates](#templates) section. +{:.description} + +
      +
      +{% highlight javascript %} +{% raw %} +search.addWidget( + instantsearch.widgets.hits({ + container: '#hits-container', + templates: { + empty: 'No results', + item: 'Hit {{objectID}}: {{{_highlightResult.name.value}}}' + }, + hitsPerPage: 6 + }) +); +{% endraw %} +{% endhighlight %} +
      +
      +{% highlight javascript %} +{% raw %} +instantsearch.widgets.hits(options); +{% endraw %} +{% endhighlight %} + +{% include widget-jsdoc/hits.md %} + +
      +
      +For better control over what kind of data is returned, we suggest you configure the +[attributeToRetrieve](https://www.algolia.com/doc/rest#param-attributesToRetrieve) +and +[attributeToHighlight](https://www.algolia.com/doc/rest#param-attributesToHighlight) of your index. +
      +
      + +
      + +
      + +#### Infinite hits + +
      + + +The infinite hits widget is like the hits widget but instead of relying on an external pagination widget, it displays a button to load more results.
      +It will display the results as one continuous long page. Its usage is particularly recommended in a mobile context. Even though it is not incompatible, it does not go well with the pagination widget.
      +It accepts a [Mustache](https://mustache.github.io/) template string or a function returning a string. See the [templates](#templates) section. +{:.description} + +
      +
      +{% highlight javascript %} +{% raw %} +search.addWidget( + instantsearch.widgets.infiniteHits({ + container: '#infinite-hits-container', + templates: { + empty: 'No results', + item: 'Hit {{objectID}}: {{{_highlightResult.name.value}}}' + }, + hitsPerPage: 3 + }) +); +{% endraw %} +{% endhighlight %} +
      +
      +{% highlight javascript %} +{% raw %} +instantsearch.widgets.infiniteHits(options); +{% endraw %} +{% endhighlight %} + +{% include widget-jsdoc/infiniteHits.md %} + +
      +
      +For better control over what kind of data is returned, we suggest you configure the +[attributeToRetrieve](https://www.algolia.com/doc/rest#param-attributesToRetrieve) +and +[attributeToHighlight](https://www.algolia.com/doc/rest#param-attributesToHighlight) of your index. +
      +
      + +
      + +
      + + +#### hitsPerPageSelector + +
      + + +The hitsPerPageSelector widget lets you select the number of results you want +displayed at once. +{:.description} + +
      +
      +{% highlight javascript %} +{% raw %} +search.addWidget( + instantsearch.widgets.hitsPerPageSelector({ + container: '#hits-per-page-selector', + options: [ + {value: 6, label: '6 per page'}, + {value: 12, label: '12 per page'}, + {value: 24, label: '24 per page'} + ] + }) +); +{% endraw %} +{% endhighlight %} +
      +
      +{% highlight javascript %} +{% raw %} +instantsearch.widgets.hitsPerPageSelector(options); +{% endraw %} +{% endhighlight %} + +{% include widget-jsdoc/hitsPerPageSelector.md %} + +
      +
      +The [hits](#hits) widget lets you define the default number of results +displayed. This value must be defined in the `options` parameter. +
      +
      + +
      + +
      + +### Navigation + +#### pagination + +
      + + +The pagination widget provides the ability to navigate through results +pages. +{:.description} + +
      +
      + {% highlight javascript %} +search.addWidget( + instantsearch.widgets.pagination({ + container: '#pagination-container', + maxPages: 20, + // default is to scroll to 'body', here we disable this behavior + scrollTo: false + }) +); + {% endhighlight %} +
      +
      +{% highlight javascript %} +instantsearch.widgets.pagination(options); +{% endhighlight %} + +{% include widget-jsdoc/pagination.md %} +
      +
      + +
      + +
      + +#### menu + +
      + + +The menu widget provides a way to navigate through results based on a single attribute. +Only one value can be selected at a time. This can be used for navigating through the categories +of an e-commerce website. +{:.description} + +
      +
      +{% highlight javascript %} +search.addWidget( + instantsearch.widgets.menu({ + container: '#categories', + attributeName: 'categories', + limit: 10, + templates: { + header: 'Categories' + } + }) +); +{% endhighlight %} +
      + +
      +{% highlight javascript %} +instantsearch.widgets.menu(options); +{% endhighlight %} + +{% include widget-jsdoc/menu.md %} +
      +
      +The attribute defined in `attributeName` must be defined as an +[attributesForFaceting](https://www.algolia.com/doc/rest#param-attributesForFaceting) in your index configuration. +
      +
      + +
      + +
      + +#### hierarchicalMenu + +
      + + +The hierarchical menu is a widget that lets the user explore a tree-like structure. +This is commonly used for multi-level categorization of products on e-commerce websites. +From a UX point of view, we suggest not displaying more than two levels deep. +{:.description} + +
      +
      +{% highlight javascript %} +search.addWidget( + instantsearch.widgets.hierarchicalMenu({ + container: '#hierarchical-categories', + attributes: ['hierarchicalCategories.lvl0', 'hierarchicalCategories.lvl1', 'hierarchicalCategories.lvl2'], + templates: { + header: 'Hierarchical categories' + } + }) +); +{% endhighlight %} +
      + +
      +{% highlight javascript %} +instantsearch.widgets.hierarchicalMenu(options); +{% endhighlight %} + +{% include widget-jsdoc/hierarchicalMenu.md %} +
      +
      +The attribute used for faceting must be an object that follows a [specific +convention](https://github.com/algolia/algoliasearch-helper-js#hierarchical-facets). + +For example, to build the example menu, our objects are defined like this: +{% highlight javascript %} +{ + "objectID": 4815162342, + "hierarchicalCategories": { + "lvl0": "Appliances" + "lvl1": "Appliances > Air Conditioners" + "lvl2": "Appliances > Air Conditioners > Portable Air Conditioners" + } +} +{% endhighlight %} + +All attributes (`hierarchicalCategories.lvl0/1/2`) should be defined as +[attributesForFaceting](https://www.algolia.com/doc/rest#param-attributesForFaceting) in your index configuration. + +Each level must repeat the parent breadcrumb. + +
      +
      +
      + +
      + +### Filters + +#### refinementList + +
      + + +This filtering widget lets the user refine the search results. You can specify if you want filters to be ORed or ANDed. For example, if you filter on `a` and `b` with `OR`, +results with either the value `a` or `b` will match. +{:.description} + +
      +
      +{% highlight javascript %} +search.addWidget( + instantsearch.widgets.refinementList({ + container: '#brands', + attributeName: 'brand', + operator: 'or', + limit: 10, + templates: { + header: 'Brands' + } + }) +); +{% endhighlight %} +
      +
      +{% highlight javascript %} +instantsearch.widgets.refinementList(options); +{% endhighlight %} + +{% include widget-jsdoc/refinementList.md %} +
      +
      +The attribute defined in `attributeName` must be defined as an +[attributesForFaceting](https://www.algolia.com/doc/rest#param-attributesForFaceting) in your index configuration. +
      +
      + +
      + +
      + +#### numericRefinementList + +
      + + +This widget lets the user refine search results based on a numerical attribute. You can specify a specific number or a range. +{:.description} + +
      +
      +{% highlight javascript %} +search.addWidget( + instantsearch.widgets.numericRefinementList({ + container: '#popularity', + attributeName: 'popularity', + options: [ + {name: 'All'}, + {end: 500, name: 'less than 500'}, + {start: 500, end: 2000, name: 'between 500 and 2000'}, + {start: 2000, name: 'more than 2000'} + ], + templates: { + header: 'Popularity' + } + }) +); +{% endhighlight %} +
      +
      +{% highlight javascript %} +instantsearch.widgets.numericRefinementList(options); +{% endhighlight %} + +{% include widget-jsdoc/numericRefinementList.md %} +
      +
      +The attribute defined in `attributeName` must be defined as an +[attributesForFaceting](https://www.algolia.com/doc/rest#param-attributesForFaceting) in your index configuration. +
      +
      + + +
      + +
      + +#### toggle + +
      + + +This widget provides an on/off filtering feature based on an attribute value. +Note that if you provide an "off" option, it will be refined at initialization. +{:.description} + +
      +
      +{% highlight javascript %} +search.addWidget( + instantsearch.widgets.toggle({ + container: '#free-shipping', + attributeName: 'free_shipping', + label: 'Free Shipping', + values: { + on: true, + off: false + }, + templates: { + header: 'Shipping' + } + }) +); +{% endhighlight %} +
      +
      +{% highlight javascript %} +instantsearch.widgets.toggle(options); +{% endhighlight %} +{% include widget-jsdoc/toggle.md %} +
      +
      +The attribute defined in `attributeName` must be defined as an +[attributesForFaceting](https://www.algolia.com/doc/rest#param-attributesForFaceting) in your index configuration. +
      +
      + +
      + +
      + +#### rangeSlider + +
      + + +The rangeSlider widget lets users filter results within a numerical range, based on an attribute. +The min and max values are automatically computed by Algolia using the data in the index. + +
      +
      +{% highlight javascript %} +search.addWidget( + instantsearch.widgets.rangeSlider({ + container: '#price', + attributeName: 'price', + templates: { + header: 'Price' + }, + tooltips: { + format: function(rawValue) { + return '$' + Math.round(rawValue).toLocaleString(); + } + } + }) +); +{% endhighlight %} +
      +
      +{% highlight javascript %} +instantsearch.widgets.rangeSlider(options); +{% endhighlight %} +{% include widget-jsdoc/rangeSlider.md %} +
      +
      +The attribute defined in `attributeName` must be defined as an +[attributesForFaceting](https://www.algolia.com/doc/rest#param-attributesForFaceting) in your index configuration. + +The values inside this attribute must be JavaScript numbers and not strings. +
      +
      + +
      + +
      + +#### priceRanges + +
      + + +This filtering widget lets the user choose a price range. The ranges are dynamically computed based on the returned results. + +
      +
      +{% highlight javascript %} +search.addWidget( + instantsearch.widgets.priceRanges({ + container: '#price-ranges', + attributeName: 'price', + labels: { + currency: '$', + separator: 'to', + button: 'Go' + }, + templates: { + header: 'Price' + } + }) +); +{% endhighlight %} +
      +
      +{% highlight javascript %} +instantsearch.widgets.priceRanges(options); +{% endhighlight %} + +{% include widget-jsdoc/priceRanges.md %} +
      +
      +The attribute defined in `attributeName` must be defined as an +[attributesForFaceting](https://www.algolia.com/doc/rest#param-attributesForFaceting) in your index configuration. + +The values inside this attribute must be JavaScript numbers and not strings. +
      +
      + +
      + +
      + +#### numericSelector + +
      + + +This filtering widget lets the user choose between numerical refinements from a dropdown menu. +{:.description} + +
      +
      +{% highlight javascript %} +search.addWidget( + instantsearch.widgets.numericSelector({ + container: '#popularity-selector', + attributeName: 'popularity', + operator: '>=', + options: [ + {label: 'Top 10', value: 9900}, + {label: 'Top 100', value: 9800}, + {label: 'Top 500', value: 9700} + ] + }) +); +{% endhighlight %} +
      +
      +{% highlight javascript %} +instantsearch.widgets.numericSelector(options); +{% endhighlight %} + +{% include widget-jsdoc/numericSelector.md %} +
      +
      +The attribute defined in `attributeName` must be defined as an +[attributesForFaceting](https://www.algolia.com/doc/rest#param-attributesForFaceting) in your index configuration. + +The values inside this attribute must be JavaScript numbers and not strings. +
      +
      + +
      + +
      + +#### starRating + +
      + + +This widget lets the user refine search results by clicking on stars. The stars are based on the selected `attributeName`. The underlying rating attribute needs to have from 0 to `max` stars. +{:.description} + +
      +
      +{% highlight javascript %} +search.addWidget( + instantsearch.widgets.starRating({ + container: '#stars', + attributeName: 'rating', + max: 5, + labels: { + andUp: '& Up' + } + }) +); +{% endhighlight %} +
      +
      +{% highlight javascript %} +instantsearch.widgets.starRating(options); +{% endhighlight %} + +{% include widget-jsdoc/starRating.md %} +
      +
      +The attribute defined in `attributeName` must be defined as an +[attributesForFaceting](https://www.algolia.com/doc/rest#param-attributesForFaceting) in your index configuration. + +The values inside this attribute must be JavaScript numbers and not strings. +
      +
      + +
      + +
      + +#### clearAll + +
      + + +This widget clears all the refinements that are currently applied. + +
      +
      +{% highlight javascript %} +search.addWidget( + instantsearch.widgets.clearAll({ + container: '#clear-all', + templates: { + link: 'Reset everything' + }, + autoHideContainer: false + }) +); +{% endhighlight %} +
      +
      +{% highlight javascript %} +instantsearch.widgets.clearAll(options); +{% endhighlight %} + +{% include widget-jsdoc/clearAll.md %} +
      +
      + +
      + +
      + +#### currentRefinedValues + +
      + + +This widget list all the refinements currently applied. It also lets +the user clear them one by one. This widget can also contain a +`clear all` link to remove all filters. + +
      +
      +{% highlight javascript %} +search.addWidget( + instantsearch.widgets.currentRefinedValues({ + container: '#current-refined-values', + clearAll: 'after' + }) +); +{% endhighlight %} +
      +
      +{% highlight javascript %} +instantsearch.widgets.currentRefinedValues(options); +{% endhighlight %} + +{% include widget-jsdoc/currentRefinedValues.md %} +
      +
      + +
      + +
      + + +### Sort + +#### sortBySelector + +
      + + +This widget lets you reorder your results. You need multiple indices for this to work. See requirements. +{:.description} + +
      +
      +{% highlight javascript %} +search.addWidget( + instantsearch.widgets.sortBySelector({ + container: '#sort-by-container', + indices: [ + {name: 'instant_search', label: 'Most relevant'}, + {name: 'instant_search_price_asc', label: 'Lowest price'}, + {name: 'instant_search_price_desc', label: 'Highest price'} + ] + }) +); +{% endhighlight %} +
      +
      +{% highlight javascript %} +instantsearch.widgets.sortBySelector(options); +{% endhighlight %} +{% include widget-jsdoc/sortBySelector.md %} +
      +
      +You must have slave indices for every sort order you need. Then +configure their `ranking` to use a custom attribute as the first criterion. + +Find detailed explanations [in our FAQ +page](https://www.algolia.com/doc/faq/index-configuration/how-to-sort-the-results-with-a-specific-attribute). +
      +
      + +
      + +
      + +### Metadata + +#### stats + +
      + + +This widget lets you display how many results matched the query and how fast the search was. +{:.description} + +
      +
      +{% highlight javascript %} +search.addWidget( + instantsearch.widgets.stats({ + container: '#stats-container' + }) +); +{% endhighlight %} +
      +
      +{% highlight javascript %} +instantsearch.widgets.stats(options); +{% endhighlight %} + +{% include widget-jsdoc/stats.md %} +
      +
      + +
      + +
      + +### Analytics + +#### analytics + +
      + + +This widget lets you send search data to your analytic services like Google Analytics, Segment.io, Kissmetrics and others. See example tab on the right side to see example codes of various analytics services. +{:.description} + +
      +
      +{% highlight javascript %} +search.addWidget( + instantsearch.widgets.analytics({ + pushFunction: function(formattedParameters, state, results) { + // Google Analytics + // window.ga('set', 'page', '/search/query/?query=' + state.query + '&' + formattedParameters + '&numberOfHits=' + results.nbHits); + // window.ga('send', 'pageView'); + + // GTM + // dataLayer.push({'event': 'search', 'Search Query': state.query, 'Facet Parameters': formattedParameters, 'Number of Hits': results.nbHits}); + + // Segment.io + // analytics.page( '[SEGMENT] instantsearch', { path: '/instantsearch/?query=' + state.query + '&' + formattedParameters }); + + // Kissmetrics + // var objParams = JSON.parse('{"' + decodeURI(formattedParameters.replace(/&/g, "\",\"").replace(/=/g,"\":\"")) + '"}'); + // var arrParams = $.map(objParams, function(value, index) { + // return [value]; + // }); + // + // _kmq.push(['record', '[KM] Viewed Result page', { + // 'Query': state.query , + // 'Number of Hits': results.nbHits, + // 'Search Params': arrParams + // }]); + + // any other analytics service + } + }) +); +{% endhighlight %} +
      +
      +{% highlight javascript %} +instantsearch.widgets.analytics(options); +{% endhighlight %} + +{% include widget-jsdoc/analytics.md %} +
      +
      + +
      + +## FAQ + +### Default filters + +
      +
      +
      +{% highlight javascript %} +var search = instantsearch({ + [...], + searchParameters: { + hierarchicalFacetsRefinements: { // menu is implemented as a hierarchicalFacetsRefinements +     categories: ['Cell Phones'] +   }, + facetsRefinements: { + isPremium: [true] + }, + disjunctiveFacetsRefinements: { + brand: ['Samsung', 'Apple'] + }, + // Add to "facets" all attributes for which you + // do NOT have a widget defined + facets: ['isPremium'] + }, +}); +// Below is just a common widget configuration, to show +// how it interacts with the above searchParameters +search.addWidget( + instantsearch.widgets.menu({ + [...], + attributeName: 'categories' + }) +); +search.addWidget( + instantsearch.widgets.refinementList({ + attributeName: 'brand', + operator: 'or' + }) +); +{% endhighlight %} +
      +
      + +Sometimes you might want to automatically add some filters on the first page +load. Maybe automatically filter on `Cell Phones` made by either `Samsung` or +`Apple`, or only display items that are somehow "premium". + +If you are already using a widget to perform a filter on that attribute (like +the `menu` or `refinementList` widgets), you can just use the +`searchParameters.facetsRefinements` or `searchParameters.disjunctiveFacetsRefinements` (for refinementList) and `searchParameters.hierarchicalFacetsRefinements` (for menu) attribute option when instantiating instantsearch. + +Pass it an object where each key is the attribute you want to filter and each +value is an array of the filtered values. If you are using `OR` filters instead +of `AND`, then just use `disjunctiveFacetsRefinements` in place of +`facetsRefinements`. + +If you want to filter on an attribute for which you're not using a widget, you +will have to also pass the `facets` key to the `searchParameters` with an array +containing the name of your attribute. Use `disjunctiveFacets` instead of +`facets` if you'd like to do an `OR` instead of an `AND`. Note that you still +need to add the attribute to the +[attributesForFacetting](https://www.algolia.com/doc/rest#param-attributesForFaceting) +in your index configuration. + +
      + +### Hide results on init + +
      +
      +
      +{% highlight javascript %} +var search = instantsearch({ + [...], + searchFunction: function(helper) { + var searchResults = $('.search-results'); + if (helper.state.query === '') { + searchResults.hide(); + return; + } + helper.search(); + searchResults.show(); + } +} +{% endhighlight %} +
      +
      + +By default, the library will do an empty query (`''`) on startup and display the +results for this query. If you'd like to display results only when users +actually start typing, you can use the `searchFunction` hook. + +This method takes only one argument, `helper`, on which you can call `.search()` +to actually start the search. `helper.state` also contains information about +the current state of your search. + +You can for example check for `helper.state.query` to see if the query is empty +or not, and act accordingly. You might also have to handle the case when users +start typing, then delete their query and hide the results when that happens. + +Note that for the sake of brevity, we use a jQuery-like syntax in the example, +but any other method to show/hide the results would work. + +
      + +## Community widgets + +Community widgets are solving specific use cases and so cannot make it into the core instantsearch.js library. + +You may want to create and publish your own community widget, we have a [dedicated section](#custom-widgets) on how to create them. + +If you want your widget to be listed here, [open an issue](https://github.com/algolia/instantsearch.js/issues). + +### ionRangeSlider + +Provides [Ion.RangeSlider](https://github.com/IonDen/ion.rangeSlider) as a widget. This is a jQuery plugin so you will need to use jQuery in your page. + +**Widget demo**: + + +See the [full documentation](https://github.com/instantsearch/instantsearch-ion.rangeSlider#readme). + +## Templates + +
      +
      +
      +{% highlight javascript %} +// Mustache template example +search.addWidget( + instantsearch.widgets.stats({ + container: '#stats', + templates: { + body: '{% raw %}
      You have {{nbHits}} results, fetched in {{processingTimeMS}}ms.
      {% endraw %}' + } + }) +); + +// Function template example +search.addWidget( + instantsearch.widgets.stats({ + container: '#stats', + templates: { + body: function(data) { + return '
      You have ' + data.nbHits + ' results, fetched in ' + + data.processingTimeMS +'ms.
      ' + } + } + }) +); +{% endhighlight %} +
      +
      + + Most of the widgets accept a template or templates option that let you change the default rendering. Templates can be defined either as a [Mustache](https://mustache.github.io/) string or as a function receiving the widget data and returning either a string or a React element. + + See the documentation of each widget to see which data is passed to the template. +
      + +### Helpers + +
      +
      +{% highlight javascript %} +search.templatesConfig.helpers.emphasis = function(text, render) { + return '' + render(text) + ''; +}; +{% endhighlight %} +
      +
      + In your helper, `this` always refers to the data +{% highlight javascript %} +search.templatesConfig.helpers.discount = function(/*text, render*/) { + var discount = this.price * 0.3; + return '$ -' + discount; +}; +{% endhighlight %} +
      +
      + +In order to help you use templates, **instantsearch.js** exposes a few helpers. + +All helpers are accessible in the Mustache templating through `{% raw %}{{#helpers.nameOfTheHelper}}{{valueToFormat}}{{/helpers.nameOfTheHelper}}{% endraw %}`. To use them in the function templates, you'll have to call `search.templatesConfig.helpers.nameOfTheHelper` where `search` is your current **instantsearch.js** instance. + +Currently we have one helper: + +`formatNumber`: Will accept a number as input and return the formatted version of the number in the locale defined with the `numberLocale` config option (defaults to `en-EN`). eg. `100000` will be formatted as `100 000` with `en-EN` + +### Options + +
      +
      +{% highlight javascript %} +var search = instantsearch({ + appId: '', + apiKey: '', + indexName: '', + templatesConfig: { + compileOptions: { + // all the Hogan compile options + } + } +}); +{% endhighlight %} +
      +
      + +You can configure the options passed to underlying `Hogan.compile` by using `search.templatesConfig.compileOptions`. We accept all [compile options](https://github.com/twitter/hogan.js/#compilation-options). + +Theses options will be passed to the `Hogan.compile` calls when you pass a custom template. + + +## Customize + +### Custom widgets + +
      + +
      +
      +{% highlight javascript %} +var customWidget = { + getConfiguration: function(searchParams) { + return { + // see "Usage" tab for more details on the API + }; + }, + + init: function(options) { + // see "Usage" tab for more details on the API + }, + + // Called every time there is new data + render: function(options) { + // see "Usage" tab for more details on the API + } +}; + +search.addWidget(customWidget); +{% endhighlight %} + +
      +
      + +{% highlight javascript %} +search.addWidget(widget) +{% endhighlight %} + +The widget may implement some of the following methods (depending on the need of the widget): + + - `widget.getConfiguration`: Configures the underlying AlgoliaSearch JS helper. Takes a [SearchParameters](https://community.algolia.com/algoliasearch-helper-js/reference.html#searchparameters) and should return the properties needed as an object. + - `widget.init` Initializes the widget (its DOM). Called before the first search. Takes an object with the following keys: + - state: the [search state](https://community.algolia.com/algoliasearch-helper-js/reference.html#searchparameters). + - helper: the [helper](https://community.algolia.com/algoliasearch-helper-js/reference.html#algoliasearchhelper) used to create a new search query + - templatesConfig: the template configuration + - `widget.render`: Renders the widget after the search results come back from algolia. Takes an object with the following keys: + - results: the [results](https://community.algolia.com/algoliasearch-helper-js/reference.html#searchresults) of the query + - state: the [search state](https://community.algolia.com/algoliasearch-helper-js/reference.html#searchparameters). + - helper: the [helper](https://community.algolia.com/algoliasearch-helper-js/reference.html#algoliasearchhelper) used to create a new search query + - createURL: function provided to create urls + +
      +
      +
      + +**instantsearch.js** was designed with extensibility in mind. You can build your own widget by creating an object that exposes some of those methods: + + * `getConfiguration()`: configures the underlying [AlgoliaSearch JS Helper](https://community.algolia.com/algoliasearch-helper-js/) + * `init()`: called once after the initialization + * `render()`: called every time we have new search data + +You must at least define `init` or `render` methods. + +#### jQuery widget +{:.no-toc} + +You can use [jQuery](https://jquery.com/) to power your custom widgets. + +To get started, check out our simple boilerplate [ instantsearch/instantsearch-jQuery-widget](https://github.com/instantsearch/instantsearch-jQuery-widget). + +To wrap an existing jQuery plugin, see our [ instantsearch/instantsearch-ion.rangeSlider](https://github.com/instantsearch/instantsearch-ion.rangeSlider) widget. + +#### plain JavaScript widget +{:.no-toc} + +You can extend the capabilities of instantsearch.js using plain JavaScript, no need to include any extra dependency. + +Have a look at our simple JavaScript example [ instantsearch/instantsearch-JavaScript-widget](https://github.com/instantsearch/instantsearch-JavaScript-widget) to get started. + +#### React widget +{:.no-toc} + +A third option for your widgets is [React](http://facebook.github.io/react/). instantsearch.js is already based on React. + +We have a simple commonJS boilerplate: [ instantsearch/instantsearch-React-widget ](https://github.com/instantsearch/instantsearch-React-widget). + +Or you can wrap an existing React component, see our [ instantsearch/instantsearch-googlemaps](https://github.com/instantsearch/instantsearch-googlemaps) example widget. + +### Custom themes + +All widgets have been designed to be heavily stylable with CSS rules. **instantsearch.js** ships with a default CSS theme that only includes the necessary CSS classes. + +You can see all the existing customizable CSS classes in the [non minified CSS](https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.css). + +We use [Sass](http://sass-lang.com/) to build the CSS. + +We're also following [BEM](http://getbem.com/introduction/), a methodology that helps you achieve reusable components and code sharing in the front-end. + +If you want to build you own theme, we recommend you to start from our default stylesheet: [instantsearch.scss](https://github.com/algolia/instantsearch.js/blob/master/src/css/instantsearch.scss). + +#### BEM modifiers +{:.no-toc} + +
      + +We're providing a few SCSS mixins to help you write BEM rules. Those mixins can be loaded from the `_base.scss` file. + +
      +
      +{% highlight scss %} +// .ais--- +@include bem(block, element) { + color: red +} + +// .ais---__ +@include bem(block, element, modifier) { + color: red +} + +// .ais- +@include block(block) { + // .ais--- + @include element(element) { + // .ais---__ + @include modifier(modifier) { + color: red + } + } +} +{% endhighlight %} +
      +
      + +
      + +
      + +#### Example +{:.no-toc} + +
      + +If you want to style the **search-box** widget, you can do: + +
      +
      +
      +
      +With SCSS +{% highlight scss %} +@import 'base' + +@include bem(search-box, input) { + border: 1px solid #A9A9A9; + height: 40px; + padding: 0 8px; + width: 100%; + color: #636363; +} +{% endhighlight %} +
      +
      +With CSS +{% highlight css %} +.ais-search-box--input { + border: 1px solid #A9A9A9; + height: 40px; + padding: 0 8px; + width: 100%; + color: #636363; +} +{% endhighlight %} +
      +
      +
      +
      +
      diff --git a/docs/examples.haml b/docs/examples.haml new file mode 100644 index 0000000000..abef02bf9f --- /dev/null +++ b/docs/examples.haml @@ -0,0 +1,73 @@ +--- +layout: default +title: Examples +permalink: /examples/ +--- + +.hero.container + %h1.text-center Check out our examples! + %p.text-center.lead instantsearch.js lets you build valuable search experiences. + +.spacer40 +.container + .m800.m-l-r-auto + .spacer40 + .demo-item.clearfix + %a.pull-left.link-thumbnail{href: '{{ "/examples/media/" | prepend: site.baseurl }}'} + %img.m-b.img-thumbnail.m-r{src: '{{ "/examples/media/capture.png" | prepend: site.baseurl }}', width: 270} + %a{href: '{{ "/examples/media/" | prepend: site.baseurl }}'} + %h3 Media + %p Browsing video, music and other media becomes much more intuitive with instant search. + .built-with.m-b + {% image 'icon-widget-searchbox.svg' title='searchBox' width=30 %} + {% image 'icon-widget-results.svg' title='hits' width=30 %} + {% image 'icon-widget-stats.svg' title='stats' width=30 %} + {% image 'icon-widget-pagination.svg' title='pagination' width=30 %} + {% image 'icon-widget-refinement.svg' title='refinementList' width=30 %} + {% image 'icon-widget-slider.svg' title='rangeSlider' width=30 %} + %a{href: '{{ "https://github.com/algolia/instantsearch.js/tree/master/docs/examples/media" }}'} View code + %span or + %a{href: '{{ "/examples/media.zip" | prepend: site.baseurl }}'} download + + .spacer40 + .demo-item.clearfix + %a.pull-left.link-thumbnail{href: '{{ "/examples/e-commerce/" | prepend: site.baseurl }}'} + %img.m-b.img-thumbnail.m-r{src: '{{ "/examples/e-commerce/capture.png" | prepend: site.baseurl }}', width: 270} + %a{href: '{{ "/examples/e-commerce/" | prepend: site.baseurl }}'} + %h3 E-commerce + %p An instant-search experience helps shoppers more easily find and buy what they want. + .built-with.m-b + {% image 'icon-widget-searchbox.svg' title='searchBox' width=30 %} + {% image 'icon-widget-results.svg' title='hits' width=30 %} + {% image 'icon-widget-stats.svg' title='stats' width=30 %} + {% image 'icon-widget-clearall.svg' title='clearAll' width=30 %} + {% image 'icon-widget-index.svg' title='sortBySelector' width=30 %} + {% image 'icon-widget-pagination.svg' title='pagination' width=30 %} + {% image 'icon-widget-hierarchical.svg' title='hierarchicalMenu' width=30 %} + {% image 'icon-widget-refinement.svg' title='refinementList' width=30 %} + {% image 'icon-widget-pricerange.svg' title='priceRanges' width=30 %} + {% image 'icon-widget-star-rating.svg' title='starRating' width=30 %} + %a{href: '{{ "https://github.com/algolia/instantsearch.js/tree/master/docs/examples/e-commerce" }}'} View code + %span or + %a{href: '{{ "/examples/e-commerce.zip" | prepend: site.baseurl }}'} download + + .spacer40 + .demo-item.clearfix + %a.pull-left.link-thumbnail{href: '{{ "/examples/tourism/" | prepend: site.baseurl }}'} + %img.m-b.img-thumbnail.m-r{src: '{{ "/examples/tourism/capture.png" | prepend: site.baseurl }}', width: 270} + %a{href: '{{ "/examples/tourism/" | prepend: site.baseurl }}'} + %h3 Tourism + %p Travel the world at the speed of search with instant results. + .built-with.m-b + {% image 'icon-widget-searchbox.svg' title='searchBox' width=30 %} + {% image 'icon-widget-stats.svg' title='stats' width=30 %} + {% image 'icon-widget-pagination.svg' title='pagination' width=30 %} + {% image 'icon-widget-results.svg' title='hits' width=30 %} + {% image 'icon-widget-slider.svg' title='rangeSlider' width=30 %} + {% image 'icon-widget-refinement.svg' title='refinementList' width=30 %} + {% image 'icon-widget-numerical.svg' title='numericRefinementList' width=30 %} + {% image 'icon-widget-custom.svg' title='custom' width=30 %} + %a{href: '{{ "https://github.com/algolia/instantsearch.js/tree/master/docs/examples/tourism" }}'} View code + %span or + %a{href: '{{ "/examples/tourism.zip" | prepend: site.baseurl }}'} download +.spacer80 diff --git a/docs/examples/e-commerce/capture.png b/docs/examples/e-commerce/capture.png new file mode 100644 index 0000000000..295a33e6f6 Binary files /dev/null and b/docs/examples/e-commerce/capture.png differ diff --git a/docs/examples/e-commerce/index.html b/docs/examples/e-commerce/index.html index d688c2ab1c..28a20e3802 100644 --- a/docs/examples/e-commerce/index.html +++ b/docs/examples/e-commerce/index.html @@ -1,7 +1,84 @@ -React InstantSearch | Examples > E-commerce
      -
      \ No newline at end of file +--- +# this ensures Jekyll reads the file to be transformed into HTML later +--- + + + + + + E-commerce search with instantsearch.js by Algolia + + + + {% if site.env == 'development' %} + + {% else %} + + {% endif %} + + + + + +
      +
      + + +
      + + + + +
      +
      + +
      + + + +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      + +
      +
      + + {% if site.env == 'development' %} + + {% else %} + + {% endif %} + + + + + + diff --git a/docs/examples/e-commerce/logo-is.png b/docs/examples/e-commerce/logo-is.png new file mode 100644 index 0000000000..bc1cd57348 Binary files /dev/null and b/docs/examples/e-commerce/logo-is.png differ diff --git a/docs/examples/e-commerce/main.scss b/docs/examples/e-commerce/main.scss new file mode 100644 index 0000000000..3f0f88a71c --- /dev/null +++ b/docs/examples/e-commerce/main.scss @@ -0,0 +1,447 @@ +--- +# this ensures Jekyll reads the file to be transformed into CSS later +--- +@charset 'utf-8'; + +$gray-light: #EEE; +$gray: #888; +$dark-blue: #222F3F; +$brand-primary: #0063C3; +$primary-color: #FFBE61; +$secondary-color: #B32500; +$highlight-color: #FFFFE4; +$shadow-color: rgba(0, 0, 0, .1); + +$header-height: 60px; +$sidebar-width: 230px; + +@mixin clearfix { + &:after { + content: ""; + display: table; + clear: both; + } +} + +// commons + +body { + font-family: Verdana, sans-serif; +} + +a { + color: $brand-primary; + text-decoration: none; +} + +hr { + @include clearfix; + margin-top: 10px; + margin-bottom: 10px; +} +.transparent { + opacity: 0; +} + +.content-wrapper { + margin: 0 -15px; + min-width: 620px; +} + +// Results + +header { + position: fixed; + z-index: 99; + top: 0; + width: 100%; + height: $header-height; + padding: 10px; + background: $dark-blue; + .is-logo { + float: left; + margin-right: 12px; + } + .logo { + float: left; + margin-right: 16px; + font-size: 30px; + font-weight: bold; + color: #FFFFFF; + &:hover { + text-decoration: none; + } + } + .input-group { + float: left; + width: 350px; + height: 30px; + margin-top: 5px; + border-radius: 5px; + overflow: hidden; + #q { + border: 0; + height: 100%; + &:focus { + outline: none; + box-shadow: inset 0 0 0 1px $primary-color; + } + } + .input-group-btn button { + height: 100%; + padding: 0 30px; + border: 0; + background: $primary-color; + } + } +} + +aside { + position: fixed; + overflow-y: auto; + top: $header-height; + left: 0; + bottom: 0; + width: $sidebar-width; + padding: 20px; + border-right: 1px solid $gray-light; + background: #FFFFFF; + .facet-category-title { + font-size: 1.2em; + color: $gray; + margin: 0 0 8px; + } + .facet-wrapper { + padding-bottom: 12px; + border-bottom: solid 1px $gray-light; + margin-bottom: 12px; + font-size: .87em; + } + .facet { + margin-bottom: 16px; + } + .facet-title { + font-weight: bold; + margin: 4px 0; + } + .facet-item, a { + color: #000000; + &:hover { + color: $secondary-color; + text-decoration: none; + } + &.active { + font-weight: bold; + } + input { + margin-right: 4px; + } + } + .facet-name { + width: 100%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + display: inline-block; + } + .facet-count { + margin-left: 4px; + color: $gray; + } + #colors { + @include clearfix; + } + .facet-color { + width: 28px; + height: 28px; + border-radius: 3px; + margin: 0 6px 6px; + display: block; + overflow: hidden; + float: left; + &.checked { + box-shadow: inset 0 0 0 4px rgba(#FFFFFF, .5); + } + &[data-facet-value="White"] { + background-color: #FFFFFF; + box-shadow: inset 0 0 0 1px #CCC; + &.checked { + box-shadow: inset 0 0 0 4px rgba(#000000, .1); + } + } + &[data-facet-value="Black"] { + background-color: #000000; + } + &[data-facet-value="Black-brown"] { + background-color: #382919; + } + &[data-facet-value="Pink"] { + background-color: #C0116D; + } + &[data-facet-value="Gray"] { + background-color: #6F6E6C; + } + &[data-facet-value="Blue"] { + background-color: #5182A1; + } + &[data-facet-value="Green"] { + background-color: #1E9C5E; + } + &[data-facet-value="Brown"] { + background-color: #7B6A63; + } + &[data-facet-value="Red"] { + background-color: #BC1C1A; + } + &[data-facet-value="Dark gray"] { + background-color: #444348; + } + &[data-facet-value="Silver color"] { + background-color: #AAAAA8; + } + &[data-facet-value="Light brown"] { + background-color: #C19A6E; + } + &[data-facet-value="Black-brown stain"] { + background-color: #4B4640; + } + &[data-facet-value="Off-white"] { + background-color: #D0C8B4; + } + &[data-facet-value="Beige"] { + background-color: #C9B8A3; + } + &[data-facet-value="Light green"] { + background-color: #ABBD9B; + } + &[data-facet-value="White stain"] { + background-color: #E4E1DC; + } + &[data-facet-value="Turquoise"] { + background-color: #46BCC9; + } + &[data-facet-value="Birch effect"] { + background-color: #CBBFA4; + } + &[data-facet-value="Yellow"] { + background-color: #F5E500; + } + &[data-facet-value="Dark blue"] { + background-color: #374063; + } + &[data-facet-value="Galvanized"] { + background-color: #726F6A; + } + &[data-facet-value="Birch"] { + background-color: #726F6A; + } + &[data-facet-value="Dark brown"] { + background-color: #74523E; + } + &[data-facet-value="High gloss gray"] { + background-color: #E5E5E5; + } + &[data-facet-value="Gray/white"] { + background-color: #E5E5E5; + } + &[data-facet-value="Red/white"] { + background-color: #FA757B; + } + &[data-facet-value="Clear"] { + background-color: #D5DAE0; + } + &[data-facet-value="Matte black"] { + background-color: #616872; + } + &[data-facet-value="Matte white"] { + background-color: #DCDBD7; + } + &[data-facet-value="White stained oak effect"] { + background-color: #E7E8E0; + } + // to fix - add more colors + } + .ais-price-ranges--form { + margin-top: 8px; + } + .ais-price-ranges--currency { + display: inline-block; + margin-right: 4px; + } + .ais-price-ranges--input { + display: inline-block; + width: 50px; + border-radius: 2px; + border: solid 1px $gray; + font-weight: normal; + } + .ais-price-ranges--button { + display: block; + float: right; + width: 22px; + height: 22px; + padding: 0; + margin-left: 4px; + font-size: 10px; + line-height: 20px; + border: solid 1px $gray; + border-radius: 50%; + text-align: center; + background-color: $gray-light; + &:hover { + color: $brand-primary; + background-color: #FFFFFF; + } + &:focus { + outline: none; + box-shadow: inset 0 0 0 1px $primary-color; + } + } +} + +.results-wrapper { + padding: 70px 10px 10px ($sidebar-width + 10px); +} + +#results-topbar { + display: block; + width: 100%; + line-height: 22px; + @include clearfix; + .sort-by { + float: right; + } + label { + font-weight: normal; + font-size: .8em; + } + #sort-by-selector { + display: inline-block; + } +} + +#clear-all { + display: block; + margin-bottom: 16px; + .btn { + font-size: 13px; + } +} + +#stats { + padding-right: 10px; + font-size: .8em; +} + +#hits { + @include clearfix; + margin: 0 -.5%; +} + +.hit { + width: 24%; + float: left; + padding: 10px 20px 20px; + margin-bottom: 10px; + border-bottom: solid 1px $gray-light; + margin: .5%; + border: solid 1px $gray-light; + box-shadow: 0 0 3px lighten($gray-light, 3%); + position: relative; + @media( max-width: 960px) { + width: 49%; + } + .product-picture-wrapper { + display: table; + table-layout: fixed; + width: 100%; + text-align: center; + margin-bottom: 10px; + } + .product-picture { + display: table-cell; + vertical-align: middle; + margin: 0 auto; + img { + transition: opacity 500ms cubic-bezier(.19, 1, .22, 1); + height: 150px; + max-width: 100%; + @media( min-width: 1400px) { + height: inherit; + } + } + } + .product-desc-wrapper { + height: 100px; + width: 100%; + overflow: hidden; + } + .product-name { + font-weight: bold; + color: #000000; + font-size: .9em; + margin: 0 0 8px; + min-width: 120px; + } + .product-type { + font-size: .8em; + margin: 0 0 10px; + color: lighten($gray, 10%); + } + .product-rating { + //float: right; + margin-bottom: 10px; + } + .product-price { + font-size: 1.1em; + font-weight: bold; + color: #000000; + float: right; + letter-spacing: -1px; + } + em { + color: #000000; + font-style: normal; + background-color: $primary-color; + } +} + +#pagination { + @include clearfix; + margin-top: 10px; + background-color: $gray-light; + font-size: 1.2em; + line-height: 3em; + text-align: center; + .ais-pagination--item__active a { + color: #000000; + font-weight: bold; + } + .ais-pagination--item__disabled { + visibility: visible; + a { + color: darken($gray-light, 20%); + &:hover { + cursor: default; + text-decoration: none; + } + } + } + ul { + margin: 0; + padding: 0; + } + li { + padding: 0 8px; + } + .fa { + position: relative; + top: 5px; + } +} + +.thank-you { + text-align: center; + font-size: .8em; + padding: 10px; +} diff --git a/docs/examples/e-commerce/search.js b/docs/examples/e-commerce/search.js new file mode 100644 index 0000000000..eb27a5b565 --- /dev/null +++ b/docs/examples/e-commerce/search.js @@ -0,0 +1,179 @@ +'use strict'; +/* global instantsearch */ + +var search = instantsearch({ + appId: 'latency', + apiKey: '6be0576ff61c053d5f9a3225e2a90f76', + indexName: 'ikea' +}); + +search.addWidget( + instantsearch.widgets.searchBox({ + container: '#q', + placeholder: 'Search a product' + }) +); + +search.addWidget( + instantsearch.widgets.stats({ + container: '#stats' + }) +); + +search.on('render', function() { + $('.product-picture img').addClass('transparent'); + $('.product-picture img').one('load', function() { + $(this).removeClass('transparent'); + }).each(function() { + if(this.complete) $(this).load(); + }); +}); + +var hitTemplate = + '
      ' + + '
      ' + + '
      ' + + '
      ' + + '
      ' + + '
      {{{_highlightResult.name.value}}}
      ' + + '
      {{{_highlightResult.type.value}}}
      ' + + '
      ${{price}}
      ' + + '
      {{#stars}}{{/stars}}
      ' + + '
      ' + + '
      '; + +var noResultsTemplate = + '
      No results found matching {{query}}.
      '; + +var menuTemplate = + ' {{name}}'; + +var facetTemplateCheckbox = + '' + + '{{name}}' + + '({{count}})' + + ''; + +var facetTemplateColors = + ''; + +search.addWidget( + instantsearch.widgets.hits({ + container: '#hits', + hitsPerPage: 16, + templates: { + empty: noResultsTemplate, + item: hitTemplate + }, + transformData: function(hit) { + hit.stars = []; + for (var i = 1; i <= 5; ++i) { + hit.stars.push(i <= hit.rating); + } + return hit; + } + }) +); + +search.addWidget( + instantsearch.widgets.pagination({ + container: '#pagination', + cssClasses: { + active: 'active' + }, + labels: { + previous: ' Previous page', + next: 'Next page ' + }, + showFirstLast: false + }) +); + +search.addWidget( + instantsearch.widgets.hierarchicalMenu({ + container: '#categories', + attributes: ['category', 'sub_category', 'sub_sub_category'], + sortBy: ['name:asc'], + templates: { + item: menuTemplate + } + }) +); + +search.addWidget( + instantsearch.widgets.refinementList({ + container: '#materials', + attributeName: 'materials', + operator: 'or', + limit: 10, + templates: { + item: facetTemplateCheckbox, + header: '
      Materials
      ' + } + }) +); + +search.addWidget( + instantsearch.widgets.refinementList({ + container: '#colors', + attributeName: 'colors', + operator: 'or', + limit: 10, + templates: { + item: facetTemplateColors, + header: '
      Colors
      ' + } + }) +); + +search.addWidget( + instantsearch.widgets.starRating({ + container: '#rating', + attributeName: 'rating', + templates: { + header: '
      Ratings
      ' + } + }) +); + +search.addWidget( + instantsearch.widgets.priceRanges({ + container: '#prices', + attributeName: 'price', + cssClasses: { + list: 'nav nav-list', + count: 'badge pull-right', + active: 'active' + }, + templates: { + header: '
      Prices
      ' + } + }) +); + +search.addWidget( + instantsearch.widgets.sortBySelector({ + container: '#sort-by-selector', + indices: [ + {name: 'ikea', label: 'Featured'}, + {name: 'ikea_price_asc', label: 'Price asc.'}, + {name: 'ikea_price_desc', label: 'Price desc.'} + ], + label:'sort by' + }) +); + +search.addWidget( + instantsearch.widgets.clearAll({ + container: '#clear-all', + templates: { + link: ' Clear all filters' + }, + cssClasses: { + root: 'btn btn-block btn-default' + }, + autoHideContainer: true + }) +); + +search.start(); diff --git a/docs/examples/media/capture.png b/docs/examples/media/capture.png new file mode 100644 index 0000000000..de56bc74ca Binary files /dev/null and b/docs/examples/media/capture.png differ diff --git a/docs/examples/media/index.html b/docs/examples/media/index.html index 0b523acebf..e036e7111d 100644 --- a/docs/examples/media/index.html +++ b/docs/examples/media/index.html @@ -1,7 +1,68 @@ -React InstantSearch | Examples > Media
      -
      \ No newline at end of file +--- +# this ensures Jekyll reads the file to be transformed into HTML later +--- + + + + + + Media search by Algolia + + + + {% if site.env == 'development' %} + + {% else %} + + {% endif %} + + + + +
      +
      + + +
      +
      +
      + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + +
      +
      + {% if site.env == 'development' %} + + {% else %} + + {% endif %} + + + diff --git a/docs/examples/media/logo-is.png b/docs/examples/media/logo-is.png new file mode 100644 index 0000000000..bc1cd57348 Binary files /dev/null and b/docs/examples/media/logo-is.png differ diff --git a/docs/examples/media/main.scss b/docs/examples/media/main.scss new file mode 100644 index 0000000000..efe36e8c11 --- /dev/null +++ b/docs/examples/media/main.scss @@ -0,0 +1,267 @@ +--- +# this ensures Jekyll reads the file to be transformed into CSS later +--- +@charset 'utf-8'; + +$white: #FFFFFF; +$media-red: #E91D00; +$media-red-dark: #CE1312; +$media-gray: #E8E8E8; +$media-gray-light: #F8F8F8; +$media-bg: #F1F1F1; +$media-text-color: #333333; +$media-blue: #167AC6; +$header-height: 56px; +$highlight-color: #FFFFD4; +$shadow-color: rgba(0, 0, 0, .1); + +body { + min-height: 100%; + font-family: Roboto; + background: #F1F1F1; +} + +a { + color: $media-text-color; +} + +hr { + margin: 10px 14px; +} +.is-logo { + float: left; + margin-left: 18px; +} +.logo { + margin-left: 15px; + font-size: 30px; + font-weight: bold; + float: left; + &:hover { + text-decoration: none; + } + i { + margin-left: 5px; + color: $media-red; + } +} + +header { + background: $white; + padding: 10px; + border-bottom: 1px solid $media-gray; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 2; + + .searchbox-container { + margin-left: 240px; + max-width: 400px; + .input-group { + margin-top: 5px; + .form-control { + &:focus { + outline: none; + box-shadow: none; + } + } + + .input-group-btn button { + padding-left: 20px; + padding-right: 20px; + background: $media-gray-light; + border-radius: 0; + } + } + } +} + +section { + background: $media-bg; + min-height: 100%; + z-index: 1; + + aside { + position: fixed; + top: $header-height + 14px; + left: 0; + bottom: 10px; + width: 230px; + background: $white; + border-right: 1px solid $media-gray; + + .nav { + margin: 0 20px; + li { + a { + display: block; + padding: 2px 10px; + margin: 10px 0; + &:hover { + color: $white; + background: $media-text-color; + } + } + + &.separator { + height: 1px; + background: $media-gray; + } + } + } + + h5 { + color: $media-red-dark; + margin-left: 30px; + text-transform: uppercase; + font-size: 10px; + margin-top: 20px; + } + + .badge { + font-size: .8em; + background: #BBBBBB; + position: relative; + top: 1px; + } + + #genres { + label { + display: block; + cursor: pointer; + padding: 4px 4px 4px 8px; + font-weight: normal; + font-size: .9em; + margin: 0 0 -1px; + &:hover { + color: $white; + background: $media-text-color; + } + input { + display: none; + } + } + .active { + label { + border: 1px solid $media-red-dark; + margin-top: -1px; + } + .badge { + background: $media-text-color; + } + } + } + + #ratings { + margin-left: 10px; + .ais-stars-list--link { + font-size: .9em; + &:hover, &:active, &:focus { + text-decoration: none; + } + } + .ais-stars-list--count { + font-size: 8px; + } + .ais-star-rating--item { + margin-bottom: 6px; + } + .ais-star-rating--item__active a { + color: $media-red-dark; + } + } + + } + + article { + margin-top: $header-height + 14px; + margin-bottom: 10px; + margin-left: 237px; + margin-right: 10px; + padding: 10px 0; + max-width: 100%; + background: $white; + box-shadow: 0 1px 2px $shadow-color; + + #stats { + padding-right: 14px; + font-size: .8em; + line-height: 24px; + } + + #hits { + padding: 0 15px; + } + + #pagination { + .pagination a { + background: $media-gray-light; + padding: 3px 8px; + color: $media-text-color; + margin-right: 4px; + &.active { + border-color: darken($media-gray, 20%); + background: $media-gray; + } + &:hover { + border-color: darken($media-gray, 10%); + background: darken($media-gray-light, 5%); + } + } + } + + .hit { + margin-bottom: 10px; + height: 130px; + border: 1px solid #F3F3F3; + + em { + font-style: normal; + background: $highlight-color; + text-decoration: underline; + } + + .media-object { + height: 130px; + width: 130px; + overflow: hidden; + background-size: contain; + background-repeat: no-repeat; + background-position: center center; + } + + .media-heading { + color: $media-blue; + font-weight: normal; + font-size: 18px; + } + } + } + + .thank-you { + font-size: .8em; + margin-top: 18px; + margin-left: 30px; + a { + color: #CE1312; + } + } +} + +.ais-search-box--input { + padding-left: 14px; +} + +.genre, .year { + margin: 12px 0; +} + +.year { + font-weight: bold; +} + +.genre .badge { + background: #BBBBBB; +} diff --git a/docs/examples/media/search.js b/docs/examples/media/search.js new file mode 100644 index 0000000000..c22ec5d3de --- /dev/null +++ b/docs/examples/media/search.js @@ -0,0 +1,89 @@ +/* global instantsearch */ + +var search = instantsearch({ + appId: 'latency', + apiKey: '6be0576ff61c053d5f9a3225e2a90f76', + indexName: 'movies', + urlSync: {} +}); + +search.addWidget( + instantsearch.widgets.searchBox({ + container: '#q' + }) +); + +search.addWidget( + instantsearch.widgets.stats({ + container: '#stats' + }) +); + +var hitTemplate = + '
      ' + + '
      ' + + '
      ' + + '
      ' + + '
      ' + + '

      {{{_highlightResult.title.value}}} {{#stars}}{{/stars}}

      ' + + '

      {{year}}

      {{#genre}}{{.}} {{/genre}}

      ' + + '
      ' + + '
      '; + +var noResultsTemplate = + '
      No results found matching {{query}}.
      '; + +search.addWidget( + instantsearch.widgets.hits({ + container: '#hits', + hitsPerPage: 10, + templates: { + empty: noResultsTemplate, + item: hitTemplate + }, + transformData: function(hit) { + hit.stars = []; + for (var i = 1; i <= 5; ++i) { + hit.stars.push(i <= hit.rating); + } + return hit; + } + }) +); + +search.addWidget( + instantsearch.widgets.pagination({ + container: '#pagination', + cssClasses: { + root: 'pagination', + active: 'active' + } + }) +); + +search.addWidget( + instantsearch.widgets.refinementList({ + container: '#genres', + attributeName: 'genre', + operator: 'and', + limit: 10, + cssClasses: { + list: 'nav nav-list', + count: 'badge pull-right', + active: 'active' + } + }) +); + +search.addWidget( + instantsearch.widgets.starRating({ + container: '#ratings', + attributeName: 'rating', + cssClasses: { + list: 'nav', + count: 'badge pull-right' + } + }) +); + +search.start(); diff --git a/docs/examples/tourism/capture.png b/docs/examples/tourism/capture.png new file mode 100644 index 0000000000..3b4031d397 Binary files /dev/null and b/docs/examples/tourism/capture.png differ diff --git a/docs/examples/tourism/index.html b/docs/examples/tourism/index.html index 914e51aa88..f6949ac215 100644 --- a/docs/examples/tourism/index.html +++ b/docs/examples/tourism/index.html @@ -1,7 +1,105 @@ -React InstantSearch | Examples > Tourism
      -
      \ No newline at end of file +--- +# this ensures Jekyll reads the file to be transformed into HTML later +--- + + + + + + Tourism search by Algolia + + + + {% if site.env == 'development' %} + + {% else %} + + {% endif %} + + + + + + +
      + +
      + + + +
      +
      + + +
      + +
      + +
      +
      Dates
      +
      +
      +
      +
      + +
      +
      Room Type
      +
      +
      + +
      +
      Price Range
      +
      +
      +
      + +
      +
      +
      + +
      + + + +
      +
      +
      + + +
      +
      + + + +
      +
      +
      +
      +
      + +
      Data from airbnb.com, user pics from randomuser.me
      +
      +
      + + + + {% if site.env == 'development' %} + + {% else %} + + {% endif %} + + + + diff --git a/docs/examples/tourism/logo-is.png b/docs/examples/tourism/logo-is.png new file mode 100644 index 0000000000..bc1cd57348 Binary files /dev/null and b/docs/examples/tourism/logo-is.png differ diff --git a/docs/examples/tourism/main.scss b/docs/examples/tourism/main.scss new file mode 100644 index 0000000000..917650c547 --- /dev/null +++ b/docs/examples/tourism/main.scss @@ -0,0 +1,309 @@ +--- +# this ensures Jekyll reads the file to be transformed into CSS later +--- +@charset 'utf-8'; + +/* VARIABLES +// ------------------------- */ +$aisdemo-primary-color: #FF585B; +$aisdemo-text-color: #565A5C; +$aisdemo-text-lighter-color: #949697; +$aisdemo-color-white: #FFFFFF; +$aisdemo-color-gray-light: #DCE0E0; +$aisdemo-color-gray-lighter: #EDEFED; + +/* GENERAL +// ------------------------- */ +body { + font-family: Roboto; + font-size: 16px; + color: $aisdemo-text-color; +} + +.aisdemo--left-column { + height: 400px; +} + +.aisdemo--right-column { + padding-right: 0; + padding-left: 0; +} + +/* HEADER +// ------------------------- */ +.aisdemo-navbar { + margin: 0; + padding: 0; + border-bottom: 1px solid $aisdemo-color-gray-light; + position: relative; + .is-logo { + display: inline-block; + position: relative; + top: -8px; + left: 16px; + } + .logo { + display: inline-block; + padding: 14px 22px; + font-size: 40px; + line-height: 1; + font-family: Courier; + color: $aisdemo-primary-color; + border-right: 1px solid $aisdemo-color-gray-light; + } + + .fa-search { + font-size: 30px; + position: absolute; + top: 17px; + left: 140px; + color: $aisdemo-color-gray-light; + } + + #q { + position: absolute; + top: 15px; + left: 180px; + width: 50%; + border: 0; + box-shadow: none; + &:focus { + outline: none; + box-shadow: none; + } + } +} + +/* FILTERS +// ------------------------- */ +.aisdemo-filters { + + .aisdemo-filter { + margin-top: 0; + margin-bottom: 0; + padding-top: 15px; + padding-bottom: 15px; + border-bottom: 1px solid $aisdemo-color-gray-light; + } + + .aisdemo-filter-title { + font-size: 1em; + font-weight: normal; + padding-top: 9px; + padding-left: 30px; + } + + .date, #guests select { + font-size: .8em; + padding: 8px 10px; + border: 1px solid $aisdemo-color-gray-light; + } + + #guests select { + width: 100%; + padding-right: 20px; + border-radius: 0; + background: transparent; + appearance: none; + &:focus { + outline: none; + } + } + + .guests-caret { + &:before { + line-height: 1; + position: absolute; + top: 0; + right: 20px; + width: 2em; + padding-top: .8em; + content: '\25bc'; + text-align: center; + pointer-events: none; + color: #82888A; + } + } + + #room_types { + .ais-refinement-list--count { + display: none; + } + + .ais-refinement-list--item { + display: inline-block; + cursor: pointer; + label { + font-size: .8em; + font-weight: normal; + box-sizing: border-box; + width: 100%; + padding: 9px 10px 7px; + background: $aisdemo-color-gray-lighter; + } + } + + .ais-refinement-list--checkbox { + position: relative; + bottom: 3px; + float: right; + width: 1.25em; + height: 1.25em; + margin-left: 20px; + vertical-align: top; + border: 1px solid $aisdemo-color-gray-light; + background: #FFFFFF; + appearance: none; + &:focus { + outline: none; + } + } + + .ais-refinement-list--item__active { + .ais-refinement-list--checkbox { + &:before { + font-size: .85em; + position: absolute; + width: 1.25em; + content: '\2713'; + text-align: center; + color: #FF5A5F; + } + } + } + } + + #price { + .ais-range-slider--target { + margin: 30px 9px 18px; + } + + .ais-range-slider--handle { + border-color: $aisdemo-primary-color; + } + + .ais-range-slider--handle-lower { + transform: translateX(-50%); + } + + .ais-range-slider--handle-upper { + transform: translateX(50%); + } + + .ais-range-slider--tooltip { + &:last-child { + right: 0; + } + } + + .ais-range-slider--connect { + background-color: $aisdemo-primary-color; + } + } +} + + +/* STATS +// ------------------------- */ +#stats { + font-size: 1em; + font-weight: normal; + position: absolute; + bottom: 0; + padding: 5px 15px; +} + + +/* MAP +// ------------------------- */ +#map { + height: 400px; +} + + +/* RESULTS +// ------------------------- */ +#results { + padding: 40px 20px; + background: #EDEFED; +} + +#hits { + .hit { + .pictures-wrapper { + position: relative; + .picture { + width: 100%; + } + .profile { + position: absolute; + bottom: -16px; + right: 12px; + width: 60px; + border: 4px solid rgba(255, 255, 255, .3); + border-radius: 30px; + } + } + .infos { + height: 90px; + padding: 16px 20px; + + h4 { + font-size: 1em; + font-weight: normal; + } + + p { + font-size: .8em; + color: $aisdemo-text-lighter-color; + } + + em { + font-style: normal; + color: $aisdemo-primary-color; + } + + } + } +} + + +/* PAGINATION +// ------------------------- */ +#pagination { + text-align: center; + + .ais-pagination--item { + display: inline-block; + margin: 1px; + } + + .ais-pagination--link { + color: $aisdemo-primary-color; + border-radius: 4px; + background: transparent; + } + + .pagination > .active > a { + color: $aisdemo-color-white; + border-color: $aisdemo-primary-color; + background: $aisdemo-primary-color; + } + + .pagination > li > a, .pagination > li > span { + &:focus, &:hover { + color: $aisdemo-color-white; + border-color: $aisdemo-primary-color; + background: $aisdemo-primary-color; + } + } +} + + +.thank-you { + text-align: center; + font-size: .8em; + a { + color: #FF585B; + } +} diff --git a/docs/examples/tourism/search.js b/docs/examples/tourism/search.js new file mode 100644 index 0000000000..3e2ad50654 --- /dev/null +++ b/docs/examples/tourism/search.js @@ -0,0 +1,101 @@ +'use strict'; +/* global instantsearch */ + +var search = instantsearch({ + appId: 'latency', + apiKey: '6be0576ff61c053d5f9a3225e2a90f76', + indexName: 'airbnb', + urlSync: true +}); + +search.addWidget( + instantsearch.widgets.searchBox({ + container: '#q', + placeholder: 'Where are you going?' + }) +); + +search.addWidget( + instantsearch.widgets.stats({ + container: '#stats' + }) +); + +var hitTemplate = + '
      ' + + '
      ' + + '' + + '' + + '
      ' + + '
      ' + + '

      {{{_highlightResult.name.value}}}

      ' + + '

      {{room_type}} - {{{_highlightResult.city.value}}}, {{{_highlightResult.country.value}}}

      ' + + '
      ' + + '
      '; + +var noResultsTemplate = '
      No results found matching {{query}}.
      '; + +search.addWidget( + instantsearch.widgets.hits({ + container: '#hits', + hitsPerPage: 12, + templates: { + empty: noResultsTemplate, + item: hitTemplate + } + }) +); + +search.addWidget( + instantsearch.widgets.pagination({ + container: '#pagination', + scrollTo: '#results', + cssClasses: { + root: 'pagination', + active: 'active' + } + }) +); + +search.addWidget( + instantsearch.widgets.refinementList({ + container: '#room_types', + attributeName: 'room_type', + operator: 'or', + cssClasses: {item: ['col-sm-3']}, + limit: 10 + }) +); + +search.addWidget( + instantsearch.widgets.rangeSlider({ + container: '#price', + attributeName: 'price', + pips: false, + tooltips: {format: function(rawValue) {return '$' + parseInt(rawValue)}} + }) + ); + +search.addWidget( + instantsearch.widgets.googleMaps({ + container: document.querySelector('#map') + }) +); + +search.addWidget( + instantsearch.widgets.numericSelector({ + container: '#guests', + attributeName: 'person_capacity', + operator: '>=', + options: [ + { label: '1 guest', value: 1}, + { label: '2 guests', value: 2}, + { label: '3 guests', value: 3}, + { label: '4 guests', value: 4}, + { label: '5 guests', value: 5}, + { label: '6 guests', value: 6} + ] + }) +); + +search.start(); diff --git a/docs/index.haml b/docs/index.haml new file mode 100644 index 0000000000..8b776156fc --- /dev/null +++ b/docs/index.haml @@ -0,0 +1,155 @@ +--- +layout: default +--- +.marketing-banner + %a{:href => "#closeBanner", :class => "banner-close"} ✕ + .banner__description + %a{:href => "https://community.algolia.com/instantsearch.js/react/"} + %p Looking for a React version of instantsearch.js? Have a look at React InstantSearch! + + %img{:src => "http://res.cloudinary.com/hilnmyskv/image/upload/v1481540222/react-favicon_y43wx4.svg", :alt => "React-instantsearch icon"}/ + +#space-overlay +%div#space +%section.hero.window + .container + .row + .col-sm-6 + .spacer100 + .presented-by + %a{href: "https://www.algolia.com", title: "Instant Search as a Service"} + %img{src:"{% asset_path algolia-logo.svg %}", width: 100, alt:"Logo Algolia"} + presents: + .spacer40 + %h1.logo + %img.img-responsive.m-r{src:"{% asset_path logo-instantsearch.svg %}", alt:"Logo instantsearch.js"} + %p.vp + A library of UI widgets to help you build the best instant-search experience with + %a{href:"https://www.algolia.com/?utm_medium=social-owned&utm_source=instantsearch.js%20website&utm_campaign=homepage"} Algolia's Hosted Search API. + .spacer20 + %p.github-button + + .spacer80 + %h2 There’s a widget for that + %p.lead + Pick from an extensive library of widgets to power your search + %br + and build a state-of-the-art instant-search experience. + +%section#widget-customization-1.window.pos-rel + .container + .row + .col-sm-6 + %img{src:"{% asset_path icon-theme.svg %}", width:70, alt:"Widgets"} + %h2 More than widgets + %p.lead Your code is easy to write and maintain. instantsearch.js provides the glue between the different parts of your search page. Everything is packaged in one library. +%section#widget-customization-2.window + .container + .row + .col-sm-6 + %img{src:"{% asset_path icon-infinite.svg %}", width:70, alt:"Infinite"} + %h2 Infinite possibilities + %p.lead Every website is different. The modular design of instantsearch.js allows you to configure, rearrange and combine the widgets to build your own experience. +%section#widget-customization-3.window + .container + .row + .col-sm-6 + %img{src:"{% asset_path icon-community.svg %}", width:70, alt:"Community"} + %h2 Bring your own widget + %p.lead Sometimes you want to build a custom feature. You can do that by forking a pre-built widget or coding your own. + .w-1 + %img.m-r.m-t{src:"{% asset_path icon-widget-custom.svg %}", width:50, alt:"Custom Widget"} + %h4 Custom widgets + %p Create and customize your own widgets. + .spacer30 + + .anim-container.hidden-xs + .container + .row + .col-xs-6 + .col-xs-6.pos-rel + #anim + %img#screenshot-website{src:"{% asset_path drone-search.jpg %}", width:420, alt:"Drone Shop Layout"} + .widget.widget-1 + .widget.widget-2 + .widget.widget-3 + .widget.widget-4 + .widget.widget-5 + .widget.widget-6 + .widget.widget-7 + .screen#screen-1 + .widget.widget-1 + .widget.widget-2 + .widget.widget-3 + .widget.widget-4 + .screen#screen-2 + .widget.widget-1 + .widget.widget-2 + .widget.widget-3 + .widget.widget-4 + .screen#screen-3 + .widget.widget-1 + .widget.widget-2 + .widget.widget-3 + .widget.widget-4 + .widget.widget-5 + #anim-overlay + .widget-intro.w-1 + %img.m-r.m-t{src:"{% asset_path icon-widget-searchbox.svg %}", width:50, alt:"searchBox widget"} + %h4 searchBox + %p Refine results at each keystroke + .widget-intro.w-2 + %img.m-r.m-t{src:"{% asset_path icon-widget-filter.svg %}", width:50, alt:"Widget Filters"} + %h4 filters + %p List of links or checkboxes + .widget-intro.w-3 + %img.m-r.m-t{src:"{% asset_path icon-widget-slider.svg %}", width:50, alt:"rangeSlider widget"} + %h4 rangeSlider + %p Filter on numerical values + .widget-intro.w-4 + %img.m-r.m-t{src:"{% asset_path icon-widget-results.svg %}", width:50, alt:"hits widget"} + %h4 hits + %p Grid of search results + .illus-sync + {% svg _assets/images/sync.svg %} +.spacer100 + +%section.white-bottom + +%svg#curveUpColor{xmlns:"http://www.w3.org/2000/svg", version:"1.1", width:"100%", height:"100", viewBox:"0 0 100 100", preserveAspectRatio:"none"} + %path{d:"M0 100 C40 0 60 0 100 100 Z"} + +%section.bg-white + .container + .spacer100 + .row + .col-md-4.col-md-offset-2.col-sm-offset-2.col-sm-8.m-b + %section#instantsearch-vp-1 + .text-center + .illus-wrapper + %img{src:"{% asset_path icon-ux.svg %}", alt:"UX", width:40} + %h2 Search UX done right + %p Algolia strives to build the best search experience for the end users. All of the best practices we learned while implementing search on hundreds of websites are now packed into our widgets. + .col-md-4.col-md-offset-0.col-sm-offset-2.col-sm-8 + %section#instantsearch-vp-2 + .text-center + .illus-wrapper + %img{src:"{% asset_path icon-update.svg %}", alt:"Update", width:40} + %h2 Always improving + %p The instant-search experience is already deployed on hundreds of websites. We inject all the feedback we get and our collective experience back into the widgets. + .spacer100 + #panel-get-started + .row + .col-sm-8.text-right + .spacer5 + %span.h4 + %strong Get inspired. + We created multiple examples using instantsearch.js + .col-sm-4 + %a.btn.btn-primary{href: "{{ '/examples/' | prepend: site.baseurl }}"} See it in action! + .spacer80 + +{% contentfor site-footer %} + +{% javascript home.js %} +{% endcontentfor %} diff --git a/docs/readme-animated.gif b/docs/readme-animated.gif new file mode 100644 index 0000000000..7d9c9f8bee Binary files /dev/null and b/docs/readme-animated.gif differ diff --git a/docs/readme-logo.png b/docs/readme-logo.png new file mode 100644 index 0000000000..08e69e557a Binary files /dev/null and b/docs/readme-logo.png differ diff --git a/package.json b/package.json index fb88dd9b5c..f78922fb07 100644 --- a/package.json +++ b/package.json @@ -11,8 +11,6 @@ "staging": "./scripts/staging-deploy.sh", "dev:docs": "./scripts/dev-docs.sh", "doctoc": "doctoc --maxlevel 3 README.md CONTRIBUTING.md", - "docs:build": "NODE_ENV=production babel-node docgen/build.js", - "docs:start": "NODE_ENV=development babel-node docgen/start.js", "lint": "npm run lint:js && npm run lint:css", "lint:js": "eslint .", "lint:css": "./scripts/lint-css", @@ -47,15 +45,10 @@ "babel-register": "^6.24.0", "babel-template": "^6.23.0", "babel-types": "^6.23.0", - "browser-sync": "^2.18.8", "cheerio": "^0.22.0", - "chokidar": "^1.6.1", - "clipboard": "^1.6.1", - "codemirror": "^5.25.0", "collect-json": "^1.0.8", "compression": "^1.6.2", "conventional-changelog-cli": "^1.3.1", - "css-loader": "^0.27.3", "dmd": "^2.1.2", "doctoc": "^1.3.0", "enzyme": "^2.7.1", @@ -69,41 +62,24 @@ "expect-jsx": "^2.6.0", "express": "^4.15.2", "gh-pages": "^0.12.0", - "glob": "^7.1.1", - "happypack": "^3.0.3", - "hasha": "^2.2.0", "http-server": "^0.9.0", "jest": "^19.0.2", "jsdoc-to-markdown": "^1.3.7", "json": "^9.0.6", - "json-loader": "^0.5.4", - "markdown-it": "^8.3.1", - "markdown-it-anchor": "^4.0.0", - "metalsmith": "^2.3.0", - "metalsmith-headings": "^0.1.0", - "metalsmith-layouts": "^1.8.0", - "metalsmith-navigation": "^0.2.9", - "metalsmith-sass": "^1.4.0", "mkdirp": "^0.5.1", - "ms-webpack": "^1.0.2", "mversion": "^1.10.1", "node-sass": "^4.5.0", "postcss-cli": "^2.6.0", - "postcss-loader": "^1.3.3", - "postcss-scss": "^0.4.1", "preact": "^7.2.0", "preact-compat": "^3.14.1", "pretty-bytes-cli": "^2.0.0", - "pug": "^2.0.0-beta11", "raw-loader": "^0.5.1", "react-addons-test-utils": "^15.4.2", "react-test-renderer": "^15.4.2", - "replace-in-file": "^2.5.0", "rimraf": "^2.6.1", "sass-lint": "^1.10.2", "semver": "^5.3.0", "sinon": "^2.0.0", - "style-loader": "^0.16.0", "surge": "^0.18.0", "uglify-js": "^2.8.12", "watch": "^1.0.2", @@ -112,8 +88,7 @@ "wdio-sauce-service": "^0.3.0", "webdriverio": "^4.6.2", "webpack": "^1.14.0", - "webpack-dev-server": "^1.16.2", - "webpack-hot-middleware": "^2.17.1" + "webpack-dev-server": "^1.16.2" }, "jest": { "testPathIgnorePatterns": [ diff --git a/yarn.lock b/yarn.lock index e76b74addd..bae587ce98 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,17 +2,6 @@ # yarn lockfile v1 -CSSselect@~0.4.0: - version "0.4.1" - resolved "https://registry.yarnpkg.com/CSSselect/-/CSSselect-0.4.1.tgz#f8ab7e1f8418ce63cda6eb7bd778a85d7ec492b2" - dependencies: - CSSwhat "0.4" - domutils "1.4" - -CSSwhat@0.4: - version "0.4.7" - resolved "https://registry.yarnpkg.com/CSSwhat/-/CSSwhat-0.4.7.tgz#867da0ff39f778613242c44cfea83f0aa4ebdf9b" - JSONStream@^1.0.4: version "1.2.1" resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.2.1.tgz#32aa5790e799481083b49b4b7fa94e23bae69bf9" @@ -28,18 +17,14 @@ abbrev@1: version "1.0.9" resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135" -absolute@0.0.1: - version "0.0.1" - resolved "https://registry.yarnpkg.com/absolute/-/absolute-0.0.1.tgz#c22822f87e1c939f579887504d9c109c4173829d" - -accepts@1.3.3, accepts@~1.3.3: +accepts@~1.3.3: version "1.3.3" resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.3.tgz#c3ca7434938648c3e0d9c1e328dd68b622c284ca" dependencies: mime-types "~2.1.11" negotiator "0.6.1" -acorn-globals@^3.0.0, acorn-globals@^3.1.0: +acorn-globals@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-3.1.0.tgz#fd8270f71fbb4996b004fa880ee5d46573a731bf" dependencies: @@ -51,17 +36,11 @@ acorn-jsx@^3.0.0, acorn-jsx@^3.0.1: dependencies: acorn "^3.0.4" -acorn-object-spread@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/acorn-object-spread/-/acorn-object-spread-1.0.0.tgz#48ead0f4a8eb16995a17a0db9ffc6acaada4ba68" - dependencies: - acorn "^3.1.0" - -acorn@4.0.4, acorn@^4.0.4, acorn@~4.0.2: +acorn@4.0.4, acorn@^4.0.4: version "4.0.4" resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.4.tgz#17a8d6a7a6c4ef538b814ec9abac2779293bf30a" -acorn@^3.0.0, acorn@^3.0.4, acorn@^3.1.0, acorn@^3.3.0, acorn@~3.3.0: +acorn@^3.0.0, acorn@^3.0.4, acorn@^3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a" @@ -73,10 +52,6 @@ adm-zip@~0.4.3: version "0.4.7" resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.7.tgz#8606c2cbf1c426ce8c8ec00174447fd49b6eafc1" -after@0.8.1: - version "0.8.1" - resolved "https://registry.yarnpkg.com/after/-/after-0.8.1.tgz#ab5d4fb883f596816d3515f8f791c0af486dd627" - agent-base@2: version "2.0.1" resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-2.0.1.tgz#bd8f9e86a8eb221fffa07bd14befd55df142815e" @@ -137,10 +112,6 @@ align-text@^0.1.1, align-text@^0.1.3: longest "^1.0.1" repeat-string "^1.5.2" -alphanum-sort@^1.0.1, alphanum-sort@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3" - amdefine@>=0.0.4: version "1.0.1" resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5" @@ -166,16 +137,6 @@ ansi-escapes@^1.1.0, ansi-escapes@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e" -ansi-html@0.0.7: - version "0.0.7" - resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e" - -ansi-red@^0.1.1: - version "0.1.1" - resolved "https://registry.yarnpkg.com/ansi-red/-/ansi-red-0.1.1.tgz#8c638f9d1080800a353c9c28c8a81ca4705d946c" - dependencies: - ansi-wrap "0.1.0" - ansi-regex@^0.2.0, ansi-regex@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-0.2.1.tgz#0d8e946967a3d8143f93e24e298525fc1b2235f9" @@ -198,10 +159,6 @@ ansi-styles@^3.0.0: dependencies: color-convert "^1.0.0" -ansi-wrap@0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf" - ansicolors@~0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/ansicolors/-/ansicolors-0.2.1.tgz#be089599097b74a5c9c4a84a0cdbcdb62bd87aef" @@ -287,10 +244,6 @@ array-back@^1.0.2, array-back@^1.0.3: dependencies: typical "^2.6.0" -array-differ@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/array-differ/-/array-differ-1.0.0.tgz#eff52e3758249d33be402b8bb8e564bb2b5d4031" - array-equal@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93" @@ -362,10 +315,6 @@ array.prototype.find@^2.0.1: define-properties "^1.1.2" es-abstract "^1.7.0" -arraybuffer.slice@0.0.6: - version "0.0.6" - resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.6.tgz#f33b2159f0532a3f3107a272c0ccfbd1ad2979ca" - arrify@^1.0.0, arrify@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d" @@ -408,10 +357,6 @@ assert@^1.1.1: dependencies: util "0.10.3" -async-each-series@0.1.1: - version "0.1.1" - resolved "https://registry.yarnpkg.com/async-each-series/-/async-each-series-0.1.1.tgz#7617c1917401fd8ca4a28aadce3dbae98afeb432" - async-each@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d" @@ -428,21 +373,17 @@ async@0.9.0, async@^0.9.0, async@~0.9.0: version "0.9.0" resolved "https://registry.yarnpkg.com/async/-/async-0.9.0.tgz#ac3613b1da9bed1b47510bb4651b8931e47146c7" -async@1.5.0, async@^1.3.0: - version "1.5.0" - resolved "https://registry.yarnpkg.com/async/-/async-1.5.0.tgz#2796642723573859565633fc6274444bee2f8ce3" - -async@1.5.2, async@^1.4.0, async@^1.4.2, async@^1.5.0: - version "1.5.2" - resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a" - -async@2.1.2: +async@2.1.2, async@^2.1.2: version "2.1.2" resolved "https://registry.yarnpkg.com/async/-/async-2.1.2.tgz#612a4ab45ef42a70cde806bad86ee6db047e8385" dependencies: lodash "^4.14.0" -async@^2.1.2, async@^2.1.4: +async@^1.3.0, async@^1.4.0, async@^1.4.2, async@^1.5.0: + version "1.5.2" + resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a" + +async@^2.1.4: version "2.1.5" resolved "https://registry.yarnpkg.com/async/-/async-2.1.5.tgz#e587c68580994ac67fc56ff86d3ac56bdbe810bc" dependencies: @@ -464,7 +405,7 @@ atob@~1.1.0: version "1.1.3" resolved "https://registry.yarnpkg.com/atob/-/atob-1.1.3.tgz#95f13629b12c3a51a5d215abdce2aa9f32f80773" -autoprefixer@^6.3.1, autoprefixer@^6.7.7: +autoprefixer@^6.7.7: version "6.7.7" resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014" dependencies: @@ -508,7 +449,7 @@ babel-cli@^6.24.0: optionalDependencies: chokidar "^1.6.1" -babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.22.0: +babel-code-frame@^6.16.0, babel-code-frame@^6.22.0: version "6.22.0" resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.22.0.tgz#027620bee567a88c32561574e7fd0801d33118e4" dependencies: @@ -1199,30 +1140,18 @@ babylon@^6.11.0, babylon@^6.13.0, babylon@^6.15.0: version "6.15.0" resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.15.0.tgz#ba65cfa1a80e1759b0e89fb562e27dccae70348e" -backo2@1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947" - bail@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.1.tgz#912579de8b391aadf3c5fdf4cd2a0fc225df3bc2" -balanced-match@^0.4.1, balanced-match@^0.4.2: +balanced-match@^0.4.1: version "0.4.2" resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838" -base64-arraybuffer@0.1.5: - version "0.1.5" - resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz#73926771923b5a19747ad666aa5cd4bf9c6e9ce8" - base64-js@^1.0.2: version "1.2.0" resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.0.tgz#a39992d723584811982be5e290bb6a53d86700f1" -base64id@0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/base64id/-/base64id-0.1.0.tgz#02ce0fdeee0cef4f40080e1e73e834f0b1bfce3f" - batch@0.5.3: version "0.5.3" resolved "https://registry.yarnpkg.com/batch/-/batch-0.5.3.tgz#3f3414f380321743bfc1042f9a83ff1d5824d464" @@ -1233,12 +1162,6 @@ bcrypt-pbkdf@^1.0.0: dependencies: tweetnacl "^0.14.3" -better-assert@~1.0.0: - version "1.0.2" - resolved "https://registry.yarnpkg.com/better-assert/-/better-assert-1.0.2.tgz#40866b9e1b9e0b55b481894311e68faffaebc522" - dependencies: - callsite "1.0.0" - big.js@^3.1.3: version "3.1.3" resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.1.3.tgz#4cada2193652eb3ca9ec8e55c9015669c9806978" @@ -1253,17 +1176,13 @@ bl@^1.0.0: dependencies: readable-stream "~2.0.5" -blob@0.0.4: - version "0.0.4" - resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.4.tgz#bcf13052ca54463f30f9fc7e95b9a47630a94921" - block-stream@*: version "0.0.9" resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a" dependencies: inherits "~2.0.0" -bluebird@^3.1.1, bluebird@~3.4.6: +bluebird@~3.4.6: version "3.4.6" resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.4.6.tgz#01da8d821d87813d158967e743d5fe6c62cf8c0f" @@ -1320,55 +1239,6 @@ browser-stdout@1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.0.tgz#f351d32969d32fa5d7a5567154263d928ae3bd1f" -browser-sync-client@2.4.5: - version "2.4.5" - resolved "https://registry.yarnpkg.com/browser-sync-client/-/browser-sync-client-2.4.5.tgz#976afab1a54f255baa38fe22ae3c0d3753ad337b" - dependencies: - etag "^1.7.0" - fresh "^0.3.0" - -browser-sync-ui@0.6.3: - version "0.6.3" - resolved "https://registry.yarnpkg.com/browser-sync-ui/-/browser-sync-ui-0.6.3.tgz#640a537c180689303d5be92bc476b9ebc441c0bc" - dependencies: - async-each-series "0.1.1" - connect-history-api-fallback "^1.1.0" - immutable "^3.7.6" - server-destroy "1.0.1" - stream-throttle "^0.1.3" - weinre "^2.0.0-pre-I0Z7U9OV" - -browser-sync@^2.18.8: - version "2.18.8" - resolved "https://registry.yarnpkg.com/browser-sync/-/browser-sync-2.18.8.tgz#2fb4de253798d7cfb839afb9c2f801968490cec2" - dependencies: - browser-sync-client "2.4.5" - browser-sync-ui "0.6.3" - bs-recipes "1.3.4" - chokidar "1.6.1" - connect "3.5.0" - dev-ip "^1.0.1" - easy-extender "2.3.2" - eazy-logger "3.0.2" - emitter-steward "^1.0.0" - fs-extra "1.0.0" - http-proxy "1.15.2" - immutable "3.8.1" - localtunnel "1.8.2" - micromatch "2.3.11" - opn "4.0.2" - portscanner "2.1.1" - qs "6.2.1" - resp-modifier "6.0.2" - rx "4.1.0" - serve-index "1.8.0" - serve-static "1.11.1" - server-destroy "1.0.1" - socket.io "1.6.0" - socket.io-client "1.6.0" - ua-parser-js "0.7.12" - yargs "6.4.0" - browserify-aes@0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-0.4.0.tgz#067149b668df31c4b58533e02d01e806d8608e2c" @@ -1426,17 +1296,13 @@ browserify-zlib@^0.1.4: dependencies: pako "~0.2.0" -browserslist@^1.0.1, browserslist@^1.5.2, browserslist@^1.7.6: +browserslist@^1.7.6: version "1.7.6" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.6.tgz#af98589ce6e7ab09618d29451faacb81220bd3ba" dependencies: caniuse-db "^1.0.30000631" electron-to-chromium "^1.2.5" -bs-recipes@1.3.4: - version "1.3.4" - resolved "https://registry.yarnpkg.com/bs-recipes/-/bs-recipes-1.3.4.tgz#0d2d4d48a718c8c044769fdc4f89592dc8b69585" - bser@1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/bser/-/bser-1.0.2.tgz#381116970b2a6deea5646dd15dd7278444b56169" @@ -1449,25 +1315,6 @@ bser@^2.0.0: dependencies: node-int64 "^0.4.0" -buble@^0.12.0: - version "0.12.5" - resolved "https://registry.yarnpkg.com/buble/-/buble-0.12.5.tgz#c66ffe92f9f4a3c65d3256079b711e2bd0bc5013" - dependencies: - acorn "^3.1.0" - acorn-jsx "^3.0.1" - acorn-object-spread "^1.0.0" - chalk "^1.1.3" - magic-string "^0.14.0" - minimist "^1.2.0" - os-homedir "^1.0.1" - -bubleify@^0.5.1: - version "0.5.1" - resolved "https://registry.yarnpkg.com/bubleify/-/bubleify-0.5.1.tgz#f65c47cee31b80cad8b9e747bbe187d7fe51e927" - dependencies: - buble "^0.12.0" - object-assign "^4.0.1" - buffer-crc32@^0.2.1: version "0.2.13" resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242" @@ -1516,10 +1363,6 @@ caller-path@^0.1.0: dependencies: callsites "^0.2.0" -callsite@1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20" - callsites@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/callsites/-/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca" @@ -1535,7 +1378,7 @@ camelcase-keys@^2.0.0: camelcase "^2.0.0" map-obj "^1.0.0" -camelcase@^1.0.2, camelcase@^1.2.1: +camelcase@^1.0.2: version "1.2.1" resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39" @@ -1547,16 +1390,7 @@ camelcase@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a" -caniuse-api@^1.5.2: - version "1.5.3" - resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.5.3.tgz#5018e674b51c393e4d50614275dc017e27c4a2a2" - dependencies: - browserslist "^1.0.1" - caniuse-db "^1.0.30000346" - lodash.memoize "^4.1.0" - lodash.uniq "^4.3.0" - -caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000631, caniuse-db@^1.0.30000634: +caniuse-db@^1.0.30000631, caniuse-db@^1.0.30000634: version "1.0.30000635" resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000635.tgz#ea159dfa062e00f25f97af3791baef93f17904a1" @@ -1620,25 +1454,10 @@ character-entities@^1.0.0: version "1.2.0" resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.0.tgz#a683e2cf75dbe8b171963531364e58e18a1b155f" -character-parser@^2.1.1: - version "2.2.0" - resolved "https://registry.yarnpkg.com/character-parser/-/character-parser-2.2.0.tgz#c7ce28f36d4bcd9744e5ffc2c5fcde1c73261fc0" - dependencies: - is-regex "^1.0.3" - character-reference-invalid@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.0.tgz#dec9ad1dfb9f8d06b4fcdaa2adc3c4fd97af1e68" -cheerio@^0.14.0: - version "0.14.0" - resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-0.14.0.tgz#209648d501846de95cdca6440f389a7f5c29dc8f" - dependencies: - CSSselect "~0.4.0" - entities "~1.0.0" - htmlparser2 "~3.7.0" - lodash "~2.4.1" - cheerio@^0.22.0: version "0.22.0" resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-0.22.0.tgz#a9baa860a3f9b595a6b81b1a86873121ed3a269e" @@ -1660,7 +1479,7 @@ cheerio@^0.22.0: lodash.reject "^4.4.0" lodash.some "^4.4.0" -chokidar@1.6.1, chokidar@^1.0.0, chokidar@^1.5.1, chokidar@^1.6.1: +chokidar@^1.0.0, chokidar@^1.5.1, chokidar@^1.6.1: version "1.6.1" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.6.1.tgz#2f4447ab5e96e50fb3d789fd90d4c72e0e4c70c2" dependencies: @@ -1689,12 +1508,6 @@ circular-json@^0.3.0: version "0.3.1" resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.1.tgz#be8b36aefccde8b3ca7aa2d6afc07a37242c0d2d" -clap@^1.0.9: - version "1.1.3" - resolved "https://registry.yarnpkg.com/clap/-/clap-1.1.3.tgz#b3bd36e93dd4cbfb395a3c26896352445265c05b" - dependencies: - chalk "^1.1.3" - classnames@^2.2.5: version "2.2.5" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d" @@ -1706,13 +1519,6 @@ clean-css-cli@^4.0.9: clean-css "^4.0.9" commander "2.x" -clean-css@^3.3.0: - version "3.4.25" - resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-3.4.25.tgz#9e9a52d5c1e6bc5123e1b2783fa65fe958946ede" - dependencies: - commander "2.8.x" - source-map "0.4.x" - clean-css@^4.0.9: version "4.0.9" resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.0.9.tgz#63ff450b3f939508cc0cd2989bb9daaedc98333e" @@ -1751,14 +1557,6 @@ cli-width@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.1.0.tgz#b234ca209b29ef66fc518d9b98d5847b00edf00a" -clipboard@^1.6.1: - version "1.6.1" - resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-1.6.1.tgz#65c5b654812466b0faab82dc6ba0f1d2f8e4be53" - dependencies: - good-listener "^1.2.0" - select "^1.1.2" - tiny-emitter "^1.0.0" - cliui@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1" @@ -1767,7 +1565,7 @@ cliui@^2.1.0: right-align "^0.1.1" wordwrap "0.0.2" -cliui@^3.0.3, cliui@^3.2.0: +cliui@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d" dependencies: @@ -1787,50 +1585,14 @@ clone@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149" -co-from-stream@~0.0.0: - version "0.0.0" - resolved "https://registry.yarnpkg.com/co-from-stream/-/co-from-stream-0.0.0.tgz#1a5cd8ced77263946094fa39f2499a63297bcaf9" - dependencies: - co-read "0.0.1" - -co-fs-extra@^1.2.1: - version "1.2.1" - resolved "https://registry.yarnpkg.com/co-fs-extra/-/co-fs-extra-1.2.1.tgz#3b6ad77cf2614530f677b1cf62664f5ba756b722" - dependencies: - co-from-stream "~0.0.0" - fs-extra "~0.26.5" - thunkify-wrap "~1.0.4" - -co-read@0.0.1: - version "0.0.1" - resolved "https://registry.yarnpkg.com/co-read/-/co-read-0.0.1.tgz#f81b3eb8a86675fec51e3d883a7f564e873c9389" - -co@3.1.0, co@~3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/co/-/co-3.1.0.tgz#4ea54ea5a08938153185e15210c68d9092bc1b78" - co@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184" -coa@~1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.1.tgz#7f959346cfc8719e3f7233cd6852854a7c67d8a3" - dependencies: - q "^1.1.2" - code-point-at@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77" -codemirror@^5.25.0: - version "5.25.0" - resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.25.0.tgz#78e06939c7bb41f65707b8aa9c5328111948b756" - -coffee-script@^1.12.4: - version "1.12.4" - resolved "https://registry.yarnpkg.com/coffee-script/-/coffee-script-1.12.4.tgz#fe1bced97fe1fb3927b998f2b45616e0658be1ff" - collapse-white-space@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.2.tgz#9c463fb9c6d190d2dcae21a356a01bcae9eeef6d" @@ -1864,38 +1626,16 @@ collections@^0.2.0: dependencies: weak-map "1.0.0" -color-convert@^1.0.0, color-convert@^1.3.0: +color-convert@^1.0.0: version "1.9.0" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a" dependencies: color-name "^1.1.1" -color-name@^1.0.0, color-name@^1.1.1: +color-name@^1.1.1: version "1.1.2" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.2.tgz#5c8ab72b64bd2215d617ae9559ebb148475cf98d" -color-string@^0.3.0: - version "0.3.0" - resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991" - dependencies: - color-name "^1.0.0" - -color@^0.11.0: - version "0.11.4" - resolved "https://registry.yarnpkg.com/color/-/color-0.11.4.tgz#6d7b5c74fb65e841cd48792ad1ed5e07b904d764" - dependencies: - clone "^1.0.2" - color-convert "^1.3.0" - color-string "^0.3.0" - -colormin@^1.0.5: - version "1.1.2" - resolved "https://registry.yarnpkg.com/colormin/-/colormin-1.1.2.tgz#ea2f7420a72b96881a38aae59ec124a6f7298133" - dependencies: - color "^0.11.0" - css-color-names "0.0.4" - has "^1.0.1" - colors@0.6.x: version "0.6.2" resolved "https://registry.yarnpkg.com/colors/-/colors-0.6.2.tgz#2423fe6678ac0c5dae8852e5d0e5be08c997abcc" @@ -1904,10 +1644,6 @@ colors@1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b" -colors@~1.1.2: - version "1.1.2" - resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63" - column-layout@^2.1.1: version "2.1.4" resolved "https://registry.yarnpkg.com/column-layout/-/column-layout-2.1.4.tgz#ed2857092ccf8338026fe538379d9672d70b3641" @@ -2008,13 +1744,7 @@ commander@1.1.x: dependencies: keypress "0.1.x" -commander@2.8.x: - version "2.8.1" - resolved "https://registry.yarnpkg.com/commander/-/commander-2.8.1.tgz#06be367febfda0c330aa1e2a072d3dc9762425d4" - dependencies: - graceful-readlink ">= 1.0.0" - -commander@2.9.0, commander@2.x, commander@^2.2.0, commander@^2.6.0, commander@^2.8.1, commander@^2.9.0: +commander@2.9.0, commander@2.x, commander@^2.8.1, commander@^2.9.0: version "2.9.0" resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4" dependencies: @@ -2035,22 +1765,6 @@ compare-func@^1.3.1: array-ify "^1.0.0" dot-prop "^3.0.0" -component-bind@1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/component-bind/-/component-bind-1.0.0.tgz#00c608ab7dcd93897c0009651b1d3a8e1e73bbd1" - -component-emitter@1.1.2: - version "1.1.2" - resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.1.2.tgz#296594f2753daa63996d2af08d15a95116c9aec3" - -component-emitter@1.2.1: - version "1.2.1" - resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6" - -component-inherit@0.0.3: - version "0.0.3" - resolved "https://registry.yarnpkg.com/component-inherit/-/component-inherit-0.0.3.tgz#645fc4adf58b72b649d5cae65135619db26ff143" - compress-commons@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/compress-commons/-/compress-commons-1.1.0.tgz#9f4460bb1288564c7473916e0298aa3c320dcadb" @@ -2110,27 +1824,10 @@ configstore@^0.3.1: uuid "^2.0.1" xdg-basedir "^1.0.0" -connect-history-api-fallback@^1.1.0, connect-history-api-fallback@^1.3.0: +connect-history-api-fallback@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.3.0.tgz#e51d17f8f0ef0db90a64fdb47de3051556e9f169" -connect@1.x: - version "1.9.2" - resolved "https://registry.yarnpkg.com/connect/-/connect-1.9.2.tgz#42880a22e9438ae59a8add74e437f58ae8e52807" - dependencies: - formidable "1.0.x" - mime ">= 0.0.1" - qs ">= 0.4.0" - -connect@3.5.0: - version "3.5.0" - resolved "https://registry.yarnpkg.com/connect/-/connect-3.5.0.tgz#b357525a0b4c1f50599cd983e1d9efeea9677198" - dependencies: - debug "~2.2.0" - finalhandler "0.5.0" - parseurl "~1.3.1" - utils-merge "1.0.0" - console-browserify@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10" @@ -2141,19 +1838,6 @@ console-control-strings@^1.0.0, console-control-strings@~1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e" -consolidate@^0.14.0: - version "0.14.5" - resolved "https://registry.yarnpkg.com/consolidate/-/consolidate-0.14.5.tgz#5a25047bc76f73072667c8cb52c989888f494c63" - dependencies: - bluebird "^3.1.1" - -constantinople@^3.0.1: - version "3.1.0" - resolved "https://registry.yarnpkg.com/constantinople/-/constantinople-3.1.0.tgz#7569caa8aa3f8d5935d62e1fa96f9f702cd81c79" - dependencies: - acorn "^3.1.0" - is-expression "^2.0.1" - constants-browserify@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75" @@ -2343,17 +2027,6 @@ corser@~2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/corser/-/corser-2.0.1.tgz#8eda252ecaab5840dcd975ceb90d9370c819ff87" -cosmiconfig@^2.1.0, cosmiconfig@^2.1.1: - version "2.1.1" - resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.1.1.tgz#817f2c2039347a1e9bf7d090c0923e53f749ca82" - dependencies: - js-yaml "^3.4.3" - minimist "^1.2.0" - object-assign "^4.1.0" - os-homedir "^1.0.1" - parse-json "^2.2.0" - require-from-string "^1.1.0" - crc32-stream@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/crc32-stream/-/crc32-stream-1.0.0.tgz#ea155e5e1d738ed3778438ffe92ffe2a141aeb3f" @@ -2427,27 +2100,6 @@ crypto-browserify@^3.11.0: public-encrypt "^4.0.0" randombytes "^2.0.0" -css-color-names@0.0.4: - version "0.0.4" - resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0" - -css-loader@^0.27.3: - version "0.27.3" - resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.27.3.tgz#69ab6f47b69bfb1b5acee61bac2aab14302ff0dc" - dependencies: - babel-code-frame "^6.11.0" - css-selector-tokenizer "^0.7.0" - cssnano ">=2.6.1 <4" - loader-utils "^1.0.2" - lodash.camelcase "^4.3.0" - object-assign "^4.0.1" - postcss "^5.0.6" - postcss-modules-extract-imports "^1.0.0" - postcss-modules-local-by-default "^1.0.1" - postcss-modules-scope "^1.0.0" - postcss-modules-values "^1.1.0" - source-list-map "^0.1.7" - css-parse@~2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-2.0.0.tgz#a468ee667c16d81ccf05c58c38d2a97c780dbfd4" @@ -2463,22 +2115,6 @@ css-select@~1.2.0: domutils "1.5.1" nth-check "~1.0.1" -css-selector-tokenizer@^0.6.0: - version "0.6.0" - resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.6.0.tgz#6445f582c7930d241dcc5007a43d6fcb8f073152" - dependencies: - cssesc "^0.1.0" - fastparse "^1.1.1" - regexpu-core "^1.0.0" - -css-selector-tokenizer@^0.7.0: - version "0.7.0" - resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz#e6988474ae8c953477bf5e7efecfceccd9cf4c86" - dependencies: - cssesc "^0.1.0" - fastparse "^1.1.1" - regexpu-core "^1.0.0" - css-value@~0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/css-value/-/css-value-0.0.1.tgz#5efd6c2eea5ea1fd6b6ac57ec0427b18452424ea" @@ -2496,54 +2132,6 @@ css@^2.0.0: source-map-resolve "^0.3.0" urix "^0.1.0" -cssesc@^0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4" - -"cssnano@>=2.6.1 <4": - version "3.10.0" - resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38" - dependencies: - autoprefixer "^6.3.1" - decamelize "^1.1.2" - defined "^1.0.0" - has "^1.0.1" - object-assign "^4.0.1" - postcss "^5.0.14" - postcss-calc "^5.2.0" - postcss-colormin "^2.1.8" - postcss-convert-values "^2.3.4" - postcss-discard-comments "^2.0.4" - postcss-discard-duplicates "^2.0.1" - postcss-discard-empty "^2.0.1" - postcss-discard-overridden "^0.1.1" - postcss-discard-unused "^2.2.1" - postcss-filter-plugins "^2.0.0" - postcss-merge-idents "^2.1.5" - postcss-merge-longhand "^2.0.1" - postcss-merge-rules "^2.0.3" - postcss-minify-font-values "^1.0.2" - postcss-minify-gradients "^1.0.1" - postcss-minify-params "^1.0.4" - postcss-minify-selectors "^2.0.4" - postcss-normalize-charset "^1.1.0" - postcss-normalize-url "^3.0.7" - postcss-ordered-values "^2.1.0" - postcss-reduce-idents "^2.2.2" - postcss-reduce-initial "^1.0.0" - postcss-reduce-transforms "^1.0.3" - postcss-svgo "^2.1.1" - postcss-unique-selectors "^2.0.2" - postcss-value-parser "^3.2.3" - postcss-zindex "^2.0.1" - -csso@~2.3.1: - version "2.3.2" - resolved "https://registry.yarnpkg.com/csso/-/csso-2.3.2.tgz#ddd52c587033f49e94b71fc55569f252e8ff5f85" - dependencies: - clap "^1.0.9" - source-map "^0.5.3" - cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0": version "0.3.2" resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.2.tgz#b8036170c79f07a90ff2f16e22284027a243848b" @@ -2675,10 +2263,6 @@ define-properties@^1.1.2, define-properties@~1.1.2: foreach "^2.0.5" object-keys "^1.0.8" -defined@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693" - del@^2.0.2: version "2.2.2" resolved "https://registry.yarnpkg.com/del/-/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8" @@ -2699,10 +2283,6 @@ delayed-stream@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" -delegate@^3.1.2: - version "3.1.2" - resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.1.2.tgz#1e1bc6f5cadda6cb6cbf7e6d05d0bcdd5712aebe" - delegates@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a" @@ -2728,10 +2308,6 @@ detect-indent@^4.0.0: dependencies: repeating "^2.0.0" -dev-ip@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/dev-ip/-/dev-ip-1.0.1.tgz#a76a3ed1855be7a012bb8ac16cb80f3c00dc28f0" - diff@1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/diff/-/diff-1.4.0.tgz#7f28d2eb9ee7b15a97efd89ce63dcfdaa3ccbabf" @@ -2805,10 +2381,6 @@ doctrine@1.5.0, doctrine@^1.2.2: esutils "^2.0.2" isarray "^1.0.0" -doctypes@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/doctypes/-/doctypes-1.1.0.tgz#ea80b106a87538774e8a3a4a5afe293de489e0a9" - dom-serializer@0, dom-serializer@~0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82" @@ -2832,25 +2404,13 @@ domelementtype@~1.1.1: version "1.1.3" resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b" -domhandler@2.2: - version "2.2.1" - resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.2.1.tgz#59df9dcd227e808b365ae73e1f6684ac3d946fc2" - dependencies: - domelementtype "1" - domhandler@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.3.0.tgz#2de59a0822d5027fabff6f032c2b25a2a8abe738" dependencies: domelementtype "1" -domutils@1.4: - version "1.4.3" - resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.4.3.tgz#0865513796c6b306031850e175516baf80b72a6f" - dependencies: - domelementtype "1" - -domutils@1.5, domutils@1.5.1, domutils@^1.5.1: +domutils@1.5.1, domutils@^1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf" dependencies: @@ -2878,18 +2438,6 @@ duplexify@^3.2.0: readable-stream "^2.0.0" stream-shift "^1.0.0" -easy-extender@2.3.2: - version "2.3.2" - resolved "https://registry.yarnpkg.com/easy-extender/-/easy-extender-2.3.2.tgz#3d3248febe2b159607316d8f9cf491c16648221d" - dependencies: - lodash "^3.10.1" - -eazy-logger@3.0.2: - version "3.0.2" - resolved "https://registry.yarnpkg.com/eazy-logger/-/eazy-logger-3.0.2.tgz#a325aa5e53d13a2225889b2ac4113b2b9636f4fc" - dependencies: - tfunk "^3.0.1" - ecc-jsbn@~0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505" @@ -2930,18 +2478,10 @@ elliptic@^6.0.0: hash.js "^1.0.0" inherits "^2.0.1" -emitter-steward@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/emitter-steward/-/emitter-steward-1.0.0.tgz#f3411ade9758a7565df848b2da0cbbd1b46cbd64" - emojis-list@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389" -enable@1: - version "1.3.2" - resolved "https://registry.yarnpkg.com/enable/-/enable-1.3.2.tgz#9eba6837d16d0982b59f87d889bf754443d52931" - encodeurl@~1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20" @@ -2958,45 +2498,6 @@ end-of-stream@1.0.0, end-of-stream@^1.0.0: dependencies: once "~1.3.0" -engine.io-client@1.8.0: - version "1.8.0" - resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-1.8.0.tgz#7b730e4127414087596d9be3c88d2bc5fdb6cf5c" - dependencies: - component-emitter "1.2.1" - component-inherit "0.0.3" - debug "2.3.3" - engine.io-parser "1.3.1" - has-cors "1.1.0" - indexof "0.0.1" - parsejson "0.0.3" - parseqs "0.0.5" - parseuri "0.0.5" - ws "1.1.1" - xmlhttprequest-ssl "1.5.3" - yeast "0.1.2" - -engine.io-parser@1.3.1: - version "1.3.1" - resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-1.3.1.tgz#9554f1ae33107d6fbd170ca5466d2f833f6a07cf" - dependencies: - after "0.8.1" - arraybuffer.slice "0.0.6" - base64-arraybuffer "0.1.5" - blob "0.0.4" - has-binary "0.1.6" - wtf-8 "1.0.0" - -engine.io@1.8.0: - version "1.8.0" - resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-1.8.0.tgz#3eeb5f264cb75dbbec1baaea26d61f5a4eace2aa" - dependencies: - accepts "1.3.3" - base64id "0.1.0" - cookie "0.3.1" - debug "2.3.3" - engine.io-parser "1.3.1" - ws "1.1.1" - enhanced-resolve@~0.9.0: version "0.9.1" resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-0.9.1.tgz#4d6e689b3725f86090927ccc86cd9f1635b89e2e" @@ -3005,10 +2506,6 @@ enhanced-resolve@~0.9.0: memory-fs "^0.2.0" tapable "^0.1.8" -entities@1.0, entities@~1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/entities/-/entities-1.0.0.tgz#b2987aa3821347fcde642b24fdfc9e4fb712bf26" - entities@^1.1.1, entities@~1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0" @@ -3342,14 +2839,14 @@ esprima@^2.6.0, esprima@^2.7.1: version "2.7.3" resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581" -esprima@^3.1.1, esprima@~3.1.0: - version "3.1.2" - resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.2.tgz#954b5d19321ca436092fa90f06d6798531fe8184" - esprima@~3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.0.0.tgz#53cf247acda77313e551c3aa2e73342d3fb4f7d9" +esprima@~3.1.0: + version "3.1.2" + resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.2.tgz#954b5d19321ca436092fa90f06d6798531fe8184" + esrecurse@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.1.0.tgz#4713b6536adf7f2ac4f327d559e7756bff648220" @@ -3373,14 +2870,10 @@ esutils@^2.0.0, esutils@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b" -etag@^1.7.0, etag@~1.8.0: +etag@~1.8.0: version "1.8.0" resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.0.tgz#6f631aef336d6c46362b51764044ce216be3c051" -etag@~1.7.0: - version "1.7.0" - resolved "https://registry.yarnpkg.com/etag/-/etag-1.7.0.tgz#03d30b5f67dd6e632d2945d30d6652731a34d5d8" - event-emitter@~0.3.4: version "0.3.4" resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.4.tgz#8d63ddfb4cfe1fae3b32ca265c4c720222080bb5" @@ -3450,15 +2943,6 @@ expect@^1.20.2: object-keys "^1.0.9" tmatch "^2.0.1" -express@2.5.x: - version "2.5.11" - resolved "https://registry.yarnpkg.com/express/-/express-2.5.11.tgz#4ce8ea1f3635e69e49f0ebb497b6a4b0a51ce6f0" - dependencies: - connect "1.x" - mime "1.2.4" - mkdirp "0.3.0" - qs "0.4.x" - express@^4.13.3, express@^4.15.2: version "4.15.2" resolved "https://registry.yarnpkg.com/express/-/express-4.15.2.tgz#af107fc148504457f2dca9a6f2571d7129b97b35" @@ -3492,12 +2976,6 @@ express@^4.13.3, express@^4.15.2: utils-merge "1.0.0" vary "~1.1.0" -extend-shallow@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f" - dependencies: - is-extendable "^0.1.0" - extend@3, extend@^3.0.0, extend@~3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.0.tgz#5a474353b9f3353ddd8176dfd37b91c83a46f1d4" @@ -3528,10 +3006,6 @@ fast-levenshtein@~2.0.4: version "2.0.5" resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.5.tgz#bd33145744519ab1c36c3ee9f31f08e9079b67f2" -fastparse@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8" - faye-websocket@^0.10.0: version "0.10.0" resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4" @@ -3639,16 +3113,6 @@ filter-where@^1.0.1: dependencies: test-value "^1.0.1" -finalhandler@0.5.0: - version "0.5.0" - resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-0.5.0.tgz#e9508abece9b6dba871a6942a1d7911b91911ac7" - dependencies: - debug "~2.2.0" - escape-html "~1.0.3" - on-finished "~2.3.0" - statuses "~1.3.0" - unpipe "~1.0.0" - finalhandler@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.0.0.tgz#b5691c2c0912092f18ac23e9416bde5cd7dc6755" @@ -3710,10 +3174,6 @@ flat-cache@^1.2.1: graceful-fs "^4.1.2" write "^0.2.1" -flatten@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782" - for-in@^0.1.5: version "0.1.6" resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.6.tgz#c9f96e89bfad18a545af5ec3ed352a1d9e5b4dc8" @@ -3758,18 +3218,10 @@ formatio@1.2.0: dependencies: samsam "1.x" -formidable@1.0.x: - version "1.0.17" - resolved "https://registry.yarnpkg.com/formidable/-/formidable-1.0.17.tgz#ef5491490f9433b705faa77249c99029ae348559" - forwarded@~0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.0.tgz#19ef9874c4ae1c297bcf078fde63a09b66a84363" -fresh@0.3.0, fresh@^0.3.0: - version "0.3.0" - resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.3.0.tgz#651f838e22424e7566de161d8358caa199f83d4f" - fresh@0.5.0: version "0.5.0" resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.0.tgz#f474ca5e6a9246d6fd8e0953cfa9b9c805afa78e" @@ -3780,7 +3232,7 @@ front-matter@2.1.0: dependencies: js-yaml "^3.4.6" -fs-extra@1.0.0, fs-extra@^1.0.0: +fs-extra@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-1.0.0.tgz#cd3ce5f7e7cb6145883fcae3191e9877f8587950" dependencies: @@ -3788,16 +3240,6 @@ fs-extra@1.0.0, fs-extra@^1.0.0: jsonfile "^2.1.0" klaw "^1.0.0" -fs-extra@~0.26.5: - version "0.26.7" - resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.26.7.tgz#9ae1fdd94897798edab76d0918cf42d0c3184fa9" - dependencies: - graceful-fs "^4.1.2" - jsonfile "^2.1.0" - klaw "^1.0.0" - path-is-absolute "^1.0.0" - rimraf "^2.2.8" - fs-readdir-recursive@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.0.0.tgz#8cd1745c8b4f8a29c8caec392476921ba195f560" @@ -4029,7 +3471,7 @@ glob2base@^0.0.12: dependencies: find-index "^0.1.1" -glob@7.0.5: +glob@7.0.5, glob@^7.0.0, glob@^7.0.3, glob@^7.0.5: version "7.0.5" resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.5.tgz#b4202a69099bbb4d292a7c1b95b6682b67ebdc95" dependencies: @@ -4059,7 +3501,7 @@ glob@^6.0.1: once "^1.3.0" path-is-absolute "^1.0.0" -glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.0, glob@^7.1.1, glob@~7.1.1: +glob@^7.1.0, glob@~7.1.1: version "7.1.1" resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8" dependencies: @@ -4143,12 +3585,6 @@ gonzales-pe@3.4.7: dependencies: minimist "1.1.x" -good-listener@^1.2.0: - version "1.2.2" - resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50" - dependencies: - delegate "^3.1.2" - got@^3.2.0: version "3.3.1" resolved "https://registry.yarnpkg.com/got/-/got-3.3.1.tgz#e5d0ed4af55fc3eef4d56007769d98192bcb2eca" @@ -4182,16 +3618,6 @@ graceful-fs@~1.2.0: version "1.0.1" resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725" -gray-matter@^2.0.0: - version "2.1.1" - resolved "https://registry.yarnpkg.com/gray-matter/-/gray-matter-2.1.1.tgz#3042d9adec2a1ded6a7707a9ed2380f8a17a430e" - dependencies: - ansi-red "^0.1.1" - coffee-script "^1.12.4" - extend-shallow "^2.0.1" - js-yaml "^3.8.1" - toml "^2.3.2" - growl@1.9.2: version "1.9.2" resolved "https://registry.yarnpkg.com/growl/-/growl-1.9.2.tgz#0ea7743715db8d8de2c5ede1775e1b45ac85c02f" @@ -4246,15 +3672,6 @@ handlebars@^4.0.2, handlebars@^4.0.3: optionalDependencies: uglify-js "^2.6" -happypack@^3.0.3: - version "3.0.3" - resolved "https://registry.yarnpkg.com/happypack/-/happypack-3.0.3.tgz#22f78c87a325cdb798c958cf4ec383fcd4d6fdc7" - dependencies: - async "1.5.0" - json-stringify-safe "5.0.1" - loader-utils "0.2.16" - mkdirp "0.5.1" - har-validator@~2.0.6: version "2.0.6" resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-2.0.6.tgz#cdcbc08188265ad119b6a5a7c8ab70eecfb5d27d" @@ -4276,34 +3693,14 @@ has-ansi@^2.0.0: dependencies: ansi-regex "^2.0.0" -has-binary@0.1.6: - version "0.1.6" - resolved "https://registry.yarnpkg.com/has-binary/-/has-binary-0.1.6.tgz#25326f39cfa4f616ad8787894e3af2cfbc7b6e10" - dependencies: - isarray "0.0.1" - -has-binary@0.1.7: - version "0.1.7" - resolved "https://registry.yarnpkg.com/has-binary/-/has-binary-0.1.7.tgz#68e61eb16210c9545a0a5cce06a873912fe1e68c" - dependencies: - isarray "0.0.1" - has-color@^0.1.7: version "0.1.7" resolved "https://registry.yarnpkg.com/has-color/-/has-color-0.1.7.tgz#67144a5260c34fc3cca677d041daf52fe7b78b2f" -has-cors@1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39" - has-flag@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa" -has-generators@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/has-generators/-/has-generators-1.0.1.tgz#a6a2e55486011940482e13e2c93791c449acf449" - has-unicode@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9" @@ -4320,13 +3717,6 @@ hash.js@^1.0.0: dependencies: inherits "^2.0.1" -hasha@^2.2.0: - version "2.2.0" - resolved "https://registry.yarnpkg.com/hasha/-/hasha-2.2.0.tgz#78d7cbfc1e6d66303fe79837365984517b2f6ee1" - dependencies: - is-stream "^1.0.1" - pinkie-promise "^2.0.0" - hawk@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/hawk/-/hawk-1.1.1.tgz#87cd491f9b46e4e2aeaca335416766885d2d1ed9" @@ -4379,20 +3769,12 @@ hosted-git-info@^2.1.4: version "2.1.5" resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.1.5.tgz#0ba81d90da2e25ab34a332e6ec77936e1598118b" -html-comment-regex@^1.1.0: - version "1.1.1" - resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e" - html-encoding-sniffer@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.1.tgz#79bf7a785ea495fe66165e734153f363ff5437da" dependencies: whatwg-encoding "^1.0.1" -html-entities@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.0.tgz#41948caf85ce82fed36e4e6a0ed371a6664379e2" - htmlparser2@^3.9.1, htmlparser2@~3.9.2: version "3.9.2" resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338" @@ -4404,16 +3786,6 @@ htmlparser2@^3.9.1, htmlparser2@~3.9.2: inherits "^2.0.1" readable-stream "^2.0.2" -htmlparser2@~3.7.0: - version "3.7.3" - resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.7.3.tgz#6a64c77637c08c6f30ec2a8157a53333be7cb05e" - dependencies: - domelementtype "1" - domhandler "2.2" - domutils "1.5" - entities "1.0" - readable-stream "1.1" - http-errors@~1.5.0: version "1.5.1" resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.5.1.tgz#788c0d2c1de2c81b9e6e8c01843b6b97eb920750" @@ -4440,14 +3812,7 @@ http-proxy-middleware@~0.17.1: lodash "^4.17.2" micromatch "^2.3.11" -http-proxy@1.15.2, http-proxy@^1.8.1: - version "1.15.2" - resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.15.2.tgz#642fdcaffe52d3448d2bda3b0079e9409064da31" - dependencies: - eventemitter3 "1.x.x" - requires-port "1.x.x" - -http-proxy@^1.16.2: +http-proxy@^1.16.2, http-proxy@^1.8.1: version "1.16.2" resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.16.2.tgz#06dff292952bf64dbe8471fa9df73066d4f37742" dependencies: @@ -4503,10 +3868,6 @@ iconv-lite@0.4.13, iconv-lite@~0.4.13: version "0.4.13" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2" -icss-replace-symbols@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.0.2.tgz#cb0b6054eb3af6edc9ab1d62d01933e2d4c8bfa5" - ieee754@^1.1.4: version "1.1.8" resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4" @@ -4515,10 +3876,6 @@ ignore@^3.1.2, ignore@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.0.tgz#8d88f03c3002a0ac52114db25d2c673b0bf1e435" -immutable@3.8.1, immutable@^3.7.6: - version "3.8.1" - resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.1.tgz#200807f11ab0f72710ea485542de088075f68cd2" - imurmurhash@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea" @@ -4533,10 +3890,6 @@ indent-string@^2.1.0: dependencies: repeating "^2.0.0" -indexes-of@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607" - indexof@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d" @@ -4627,10 +3980,6 @@ ipaddr.js@1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.2.0.tgz#8aba49c9192799585bdd643e0ccb50e8ae777ba4" -is-absolute-url@^2.0.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6" - is-absolute@^0.2.3: version "0.2.6" resolved "https://registry.yarnpkg.com/is-absolute/-/is-absolute-0.2.6.tgz#20de69f3db942ef2d87b9c2da36f172235b1b5eb" @@ -4727,21 +4076,7 @@ is-equal@^1.5.1: is-symbol "^1.0.1" object.entries "^1.0.3" -is-expression@^2.0.1: - version "2.1.0" - resolved "https://registry.yarnpkg.com/is-expression/-/is-expression-2.1.0.tgz#91be9d47debcfef077977e9722be6dcfb4465ef0" - dependencies: - acorn "~3.3.0" - object-assign "^4.0.1" - -is-expression@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/is-expression/-/is-expression-3.0.0.tgz#39acaa6be7fd1f3471dc42c7416e61c24317ac9f" - dependencies: - acorn "~4.0.2" - object-assign "^4.0.1" - -is-extendable@^0.1.0, is-extendable@^0.1.1: +is-extendable@^0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89" @@ -4802,13 +4137,6 @@ is-npm@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-1.0.0.tgz#f2fb63a65e4905b406c86072765a1a4dc793b9f4" -is-number-like@^1.0.3: - version "1.0.7" - resolved "https://registry.yarnpkg.com/is-number-like/-/is-number-like-1.0.7.tgz#a38d6b0fd2cd4282449128859eed86c03fd23552" - dependencies: - bubleify "^0.5.1" - lodash.isfinite "^3.3.2" - is-number-object@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.3.tgz#f265ab89a9f445034ef6aff15a8f00b00f551799" @@ -4857,7 +4185,7 @@ is-primitive@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575" -is-promise@^2.0.0, is-promise@^2.1.0: +is-promise@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa" @@ -4901,12 +4229,6 @@ is-subset@^0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/is-subset/-/is-subset-0.1.1.tgz#8a59117d932de1de00f245fcdd39ce43f1e939a6" -is-svg@^2.0.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-2.1.0.tgz#cf61090da0d9efbcab8722deba6f032208dbb0e9" - dependencies: - html-comment-regex "^1.1.0" - is-symbol@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572" @@ -4927,7 +4249,7 @@ is-unc-path@^0.1.1: dependencies: unc-path-regex "^0.1.0" -is-utf8@^0.2.0, is-utf8@~0.2.0: +is-utf8@^0.2.0: version "0.2.1" resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72" @@ -4935,10 +4257,6 @@ is-windows@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-0.2.0.tgz#de1aa6d63ea29dd248737b69f1ff8b8002d2108c" -is@^3.1.0: - version "3.2.1" - resolved "https://registry.yarnpkg.com/is/-/is-3.2.1.tgz#d0ac2ad55eb7b0bec926a5266f6c662aaa83dca5" - isarray@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf" @@ -5252,10 +4570,6 @@ js-base64@^2.1.9: version "2.1.9" resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.1.9.tgz#f0e80ae039a4bd654b5f281fc93f04a914a7fcce" -js-stringify@^1.0.1: - version "1.0.2" - resolved "https://registry.yarnpkg.com/js-stringify/-/js-stringify-1.0.2.tgz#1736fddfd9724f28a3682adc6230ae7e4e9679db" - js-tokens@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-2.0.0.tgz#79903f5563ee778cc1162e6dcf1a0027c97f9cb5" @@ -5264,14 +4578,7 @@ js-tokens@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.0.tgz#a2f2a969caae142fb3cd56228358c89366957bd1" -js-yaml@^3.1.0, js-yaml@^3.4.3, js-yaml@^3.4.6, js-yaml@^3.7.0, js-yaml@^3.8.1: - version "3.8.2" - resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.8.2.tgz#02d3e2c0f6beab20248d412c352203827d786721" - dependencies: - argparse "^1.0.7" - esprima "^3.1.1" - -js-yaml@^3.5.1, js-yaml@^3.5.4, js-yaml@~3.7.0: +js-yaml@^3.1.0, js-yaml@^3.4.6, js-yaml@^3.5.1, js-yaml@^3.5.4, js-yaml@^3.7.0: version "3.7.0" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80" dependencies: @@ -5390,10 +4697,6 @@ jsesc@~0.5.0: version "0.5.0" resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d" -json-loader@^0.5.4: - version "0.5.4" - resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.4.tgz#8baa1365a632f58a3c46d20175fc6002c96e37de" - json-schema@0.2.3: version "0.2.3" resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13" @@ -5404,7 +4707,7 @@ json-stable-stringify@^1.0.0, json-stable-stringify@^1.0.1: dependencies: jsonify "~0.0.0" -json-stringify-safe@5.0.1, json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.0, json-stringify-safe@~5.0.1: +json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.0, json-stringify-safe@~5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb" @@ -5446,13 +4749,6 @@ jsprim@^1.2.2: json-schema "0.2.3" verror "1.3.6" -jstransformer@1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/jstransformer/-/jstransformer-1.0.0.tgz#ed8bf0921e2f3f1ed4d5c1a44f68709ed24722c3" - dependencies: - is-promise "^2.0.0" - promise "^7.0.1" - jsx-ast-utils@^1.3.4: version "1.3.5" resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.3.5.tgz#9ba6297198d9f754594d62e59496ffb923778dd4" @@ -5509,16 +4805,6 @@ levn@^0.3.0, levn@~0.3.0: prelude-ls "~1.1.2" type-check "~0.3.2" -limiter@^1.0.5: - version "1.1.0" - resolved "https://registry.yarnpkg.com/limiter/-/limiter-1.1.0.tgz#6e2bd12ca3fcdaa11f224e2e53c896df3f08d913" - -linkify-it@^2.0.0: - version "2.0.3" - resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.0.3.tgz#d94a4648f9b1c179d64fa97291268bdb6ce9434f" - dependencies: - uc.micro "^1.0.1" - load-json-file@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0" @@ -5533,7 +4819,7 @@ load-script@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4" -loader-utils@0.2.16, loader-utils@^0.2.11, loader-utils@^0.2.16: +loader-utils@^0.2.11, loader-utils@^0.2.16: version "0.2.16" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.16.tgz#f08632066ed8282835dff88dfb52704765adee6d" dependencies: @@ -5542,23 +4828,6 @@ loader-utils@0.2.16, loader-utils@^0.2.11, loader-utils@^0.2.16: json5 "^0.5.0" object-assign "^4.0.1" -loader-utils@^1.0.2: - version "1.1.0" - resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd" - dependencies: - big.js "^3.1.3" - emojis-list "^2.0.0" - json5 "^0.5.0" - -localtunnel@1.8.2: - version "1.8.2" - resolved "https://registry.yarnpkg.com/localtunnel/-/localtunnel-1.8.2.tgz#913051e8328b51f75ad8a22ad1f5c5b8c599a359" - dependencies: - debug "2.2.0" - openurl "1.1.0" - request "2.78.0" - yargs "3.29.0" - locate-path@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e" @@ -5573,19 +4842,6 @@ lodash._baseassign@^3.0.0: lodash._basecopy "^3.0.0" lodash.keys "^3.0.0" -lodash._basecallback@^3.0.0: - version "3.3.1" - resolved "https://registry.yarnpkg.com/lodash._basecallback/-/lodash._basecallback-3.3.1.tgz#b7b2bb43dc2160424a21ccf26c57e443772a8e27" - dependencies: - lodash._baseisequal "^3.0.0" - lodash._bindcallback "^3.0.0" - lodash.isarray "^3.0.0" - lodash.pairs "^3.0.0" - -lodash._basecompareascending@^3.0.0: - version "3.0.2" - resolved "https://registry.yarnpkg.com/lodash._basecompareascending/-/lodash._basecompareascending-3.0.2.tgz#17e24f181eea9ed2b1f989dc800b7619644eac53" - lodash._basecopy@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz#8da0e6a876cf344c0ad8a54882111dd3c5c7ca36" @@ -5594,32 +4850,10 @@ lodash._basecreate@^3.0.0: version "3.0.3" resolved "https://registry.yarnpkg.com/lodash._basecreate/-/lodash._basecreate-3.0.3.tgz#1bc661614daa7fc311b7d03bf16806a0213cf821" -lodash._baseeach@^3.0.0: - version "3.0.4" - resolved "https://registry.yarnpkg.com/lodash._baseeach/-/lodash._baseeach-3.0.4.tgz#cf8706572ca144e8d9d75227c990da982f932af3" - dependencies: - lodash.keys "^3.0.0" - lodash._baseget@^3.0.0: version "3.7.2" resolved "https://registry.yarnpkg.com/lodash._baseget/-/lodash._baseget-3.7.2.tgz#1b6ae1d5facf3c25532350a13c1197cb8bb674f4" -lodash._baseisequal@^3.0.0: - version "3.0.7" - resolved "https://registry.yarnpkg.com/lodash._baseisequal/-/lodash._baseisequal-3.0.7.tgz#d8025f76339d29342767dcc887ce5cb95a5b51f1" - dependencies: - lodash.isarray "^3.0.0" - lodash.istypedarray "^3.0.0" - lodash.keys "^3.0.0" - -lodash._basesortby@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/lodash._basesortby/-/lodash._basesortby-3.0.0.tgz#d0a9aad47bb917c0ed90b1e22d0387ea189128cb" - -lodash._bindcallback@^3.0.0: - version "3.0.1" - resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e" - lodash._getnative@^3.0.0: version "3.9.1" resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5" @@ -5650,10 +4884,6 @@ lodash.bind@^4.1.4: version "4.2.1" resolved "https://registry.yarnpkg.com/lodash.bind/-/lodash.bind-4.2.1.tgz#7ae3017e939622ac31b7d7d7dcb1b34db1690d35" -lodash.camelcase@^4.3.0: - version "4.3.0" - resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6" - lodash.capitalize@^4.1.0: version "4.2.1" resolved "https://registry.yarnpkg.com/lodash.capitalize/-/lodash.capitalize-4.2.1.tgz#f826c9b4e2a8511d84e3aca29db05e1a4f3b72a9" @@ -5705,14 +4935,6 @@ lodash.isarray@^3.0.0: version "3.0.4" resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55" -lodash.isfinite@^3.3.2: - version "3.3.2" - resolved "https://registry.yarnpkg.com/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz#fb89b65a9a80281833f0b7478b3a5104f898ebb3" - -lodash.istypedarray@^3.0.0: - version "3.0.6" - resolved "https://registry.yarnpkg.com/lodash.istypedarray/-/lodash.istypedarray-3.0.6.tgz#c9a477498607501d8e8494d283b87c39281cef62" - lodash.kebabcase@^4.0.0: version "4.1.1" resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36" @@ -5729,10 +4951,6 @@ lodash.map@^4.4.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash.map/-/lodash.map-4.6.0.tgz#771ec7839e3473d9c4cde28b19394c3562f4f6d3" -lodash.memoize@^4.1.0: - version "4.1.2" - resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" - lodash.merge@^4.4.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.0.tgz#69884ba144ac33fe699737a6086deffadd0f89c5" @@ -5741,16 +4959,6 @@ lodash.mergewith@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz#150cf0a16791f5903b8891eab154609274bdea55" -lodash.omit@^4.0.2: - version "4.5.0" - resolved "https://registry.yarnpkg.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60" - -lodash.pairs@^3.0.0: - version "3.0.1" - resolved "https://registry.yarnpkg.com/lodash.pairs/-/lodash.pairs-3.0.1.tgz#bbe08d5786eeeaa09a15c91ebf0dcb7d2be326a9" - dependencies: - lodash.keys "^3.0.0" - lodash.pick@^4.2.1, lodash.pick@^4.4.0: version "4.4.0" resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3" @@ -5771,18 +4979,6 @@ lodash.some@^4.4.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash.some/-/lodash.some-4.6.0.tgz#1bb9f314ef6b8baded13b549169b2a945eb68e4d" -lodash.sortby@^3.1.1: - version "3.1.5" - resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-3.1.5.tgz#98403acf75fefb240693831f4bc0d951f94701b8" - dependencies: - lodash._basecallback "^3.0.0" - lodash._basecompareascending "^3.0.0" - lodash._baseeach "^3.0.0" - lodash._basesortby "^3.0.0" - lodash._isiterateecall "^3.0.0" - lodash.isarray "^3.0.0" - lodash.keys "^3.0.0" - lodash.template@^4.0.2: version "4.4.0" resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.4.0.tgz#e73a0385c8355591746e020b99679c690e68fba0" @@ -5796,14 +4992,6 @@ lodash.templatesettings@^4.0.0: dependencies: lodash._reinterpolate "~3.0.0" -lodash.uniq@^4.3.0: - version "4.5.0" - resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" - -lodash@^3.10.1: - version "3.10.1" - resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6" - lodash@^4.0.0, lodash@^4.1.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.16.6, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.8.0: version "4.17.4" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" @@ -5812,10 +5000,6 @@ lodash@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/lodash/-/lodash-1.0.2.tgz#8f57560c83b59fc270bd3d561b690043430e2551" -lodash@~2.4.1: - version "2.4.2" - resolved "https://registry.yarnpkg.com/lodash/-/lodash-2.4.2.tgz#fadd834b9683073da179b3eae6d9c0d15053f73e" - lodash@~4.16.4: version "4.16.6" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.16.6.tgz#d22c9ac660288f3843e16ba7d2b5d06cca27d777" @@ -5860,16 +5044,6 @@ lru-cache@^4.0.1: pseudomap "^1.0.1" yallist "^2.0.0" -macaddress@^0.2.8: - version "0.2.8" - resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12" - -magic-string@^0.14.0: - version "0.14.0" - resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.14.0.tgz#57224aef1701caeed273b17a39a956e72b172462" - dependencies: - vlq "^0.2.1" - makeerror@1.0.x: version "1.0.11" resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.11.tgz#e01a5c9109f2af79660e4e8b9587790184f5a96c" @@ -5880,22 +5054,6 @@ map-obj@^1.0.0, map-obj@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d" -markdown-it-anchor@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/markdown-it-anchor/-/markdown-it-anchor-4.0.0.tgz#e87fb5543e01965adf71506c6bf7b0491841b7e3" - dependencies: - string "^3.3.3" - -markdown-it@^8.3.1: - version "8.3.1" - resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-8.3.1.tgz#2f4b622948ccdc193d66f3ca2d43125ac4ac7323" - dependencies: - argparse "^1.0.7" - entities "~1.1.1" - linkify-it "^2.0.0" - mdurl "^1.0.1" - uc.micro "^1.0.3" - markdown-table@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-0.4.0.tgz#890c2c1b3bfe83fb00e4129b8e4cfe645270f9d1" @@ -5923,14 +5081,6 @@ marked@^0.3.5, marked@^0.3.6, marked@~0.3.6: version "0.3.6" resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.6.tgz#b2c6c618fccece4ef86c4fc6cb8a7cbf5aeda8d7" -math-expression-evaluator@^1.2.14: - version "1.2.16" - resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.16.tgz#b357fa1ca9faefb8e48d10c14ef2bcb2d9f0a7c9" - -mdurl@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e" - media-typer@0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" @@ -5939,7 +5089,7 @@ memory-fs@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.2.0.tgz#f2bb25368bc121e391c2520de92969caee0a0290" -memory-fs@^0.3.0, memory-fs@~0.3.0: +memory-fs@~0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.3.0.tgz#7bcc6b629e3a43e871d7e29aca6ae8a7f15cbb20" dependencies: @@ -5969,65 +5119,11 @@ merge@^1.1.3, merge@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.0.tgz#7531e39d4949c281a66b8c5a6e0265e8b05894da" -metalsmith-headings@^0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/metalsmith-headings/-/metalsmith-headings-0.1.0.tgz#3bf39524fa9b2b5a542253891e1ff1ab5763270d" - dependencies: - cheerio "^0.14.0" - -metalsmith-layouts@^1.8.0: - version "1.8.0" - resolved "https://registry.yarnpkg.com/metalsmith-layouts/-/metalsmith-layouts-1.8.0.tgz#6ce595ddef6e25bcbc3254c0e25313ac4db1dc5a" - dependencies: - async "^1.3.0" - consolidate "^0.14.0" - debug "^2.2.0" - extend "^3.0.0" - fs-readdir-recursive "^1.0.0" - is-utf8 "^0.2.0" - lodash.omit "^4.0.2" - multimatch "^2.0.0" - -metalsmith-navigation@^0.2.9: - version "0.2.9" - resolved "https://registry.yarnpkg.com/metalsmith-navigation/-/metalsmith-navigation-0.2.9.tgz#ea6ed6534ceef857bdad469a44d1ba196c56f30d" - dependencies: - lodash.sortby "^3.1.1" - merge "^1.1.3" - -metalsmith-sass@^1.4.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/metalsmith-sass/-/metalsmith-sass-1.4.0.tgz#589f95f3de6bb67b09e85fab5a63cc594428ee65" - dependencies: - async "^2.1.4" - node-sass "^4.2.0" - -metalsmith@^2.3.0: - version "2.3.0" - resolved "https://registry.yarnpkg.com/metalsmith/-/metalsmith-2.3.0.tgz#833afbb5a2a6385e2d9ae3d935e39e33eaea5231" - dependencies: - absolute "0.0.1" - chalk "^1.1.3" - clone "^1.0.2" - co-fs-extra "^1.2.1" - commander "^2.6.0" - gray-matter "^2.0.0" - has-generators "^1.0.1" - is "^3.1.0" - is-utf8 "~0.2.0" - recursive-readdir "^2.1.0" - rimraf "^2.2.8" - stat-mode "^0.2.0" - thunkify "^2.1.2" - unyield "0.0.1" - ware "^1.2.0" - win-fork "^1.1.1" - methods@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee" -micromatch@2.3.11, micromatch@^2.1.5, micromatch@^2.3.11: +micromatch@^2.1.5, micromatch@^2.3.11: version "2.3.11" resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565" dependencies: @@ -6066,11 +5162,7 @@ mime-types@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-1.0.2.tgz#995ae1392ab8affcbfcb2641dd054e943c0d5dce" -mime@1.2.4: - version "1.2.4" - resolved "https://registry.yarnpkg.com/mime/-/mime-1.2.4.tgz#11b5fdaf29c2509255176b80ad520294f5de92b7" - -mime@1.3.4, "mime@>= 0.0.1", mime@^1.2.11, mime@^1.3.4: +mime@1.3.4, mime@^1.2.11, mime@^1.3.4: version "1.3.4" resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53" @@ -6092,7 +5184,7 @@ minimalistic-assert@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3" -"minimatch@2 || 3", minimatch@3.0.3, minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@~3.0.2: +"minimatch@2 || 3", minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@~3.0.2: version "3.0.3" resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.3.tgz#2a4e4090b96b2db06a9d7df01055a62a77c9b774" dependencies: @@ -6168,15 +5260,6 @@ moniker@0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/moniker/-/moniker-0.1.2.tgz#872dfba575dcea8fa04a5135b13d5f24beccc97e" -ms-webpack@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/ms-webpack/-/ms-webpack-1.0.2.tgz#19ce68a7ff63dd934c652e7aa23c46a2af5cd23e" - dependencies: - chalk "^1.1.3" - memory-fs "^0.3.0" - supports-color "^3.1.2" - webpack "^1.13.2" - ms@0.7.1: version "0.7.1" resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098" @@ -6185,15 +5268,6 @@ ms@0.7.2: version "0.7.2" resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765" -multimatch@^2.0.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/multimatch/-/multimatch-2.1.0.tgz#9c7906a22fb4c02919e2f5f75161b4cdbd4b2a2b" - dependencies: - array-differ "^1.0.0" - array-union "^1.0.1" - arrify "^1.0.0" - minimatch "^3.0.0" - mute-stream@0.0.5: version "0.0.5" resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0" @@ -6370,7 +5444,7 @@ node-pre-gyp@^0.6.29: tar "~2.2.1" tar-pack "~3.3.0" -node-sass@^4.2.0, node-sass@^4.5.0: +node-sass@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.5.0.tgz#532e37bad0ce587348c831535dbc98ea4289508b" dependencies: @@ -6393,7 +5467,7 @@ node-sass@^4.2.0, node-sass@^4.5.0: sass-graph "^2.1.1" stdout-stream "^1.4.0" -node-uuid@~1.4.0, node-uuid@~1.4.7: +node-uuid@~1.4.0: version "1.4.7" resolved "https://registry.yarnpkg.com/node-uuid/-/node-uuid-1.4.7.tgz#6da5a17668c4b3dd59623bda11cf7fa4c1f60a6f" @@ -6407,7 +5481,7 @@ nopt@1.0.10: dependencies: abbrev "1" -"nopt@2 || 3", nopt@3.0.x, nopt@~3.0.6: +"nopt@2 || 3", nopt@~3.0.6: version "3.0.6" resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9" dependencies: @@ -6430,15 +5504,6 @@ normalize-range@^0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942" -normalize-url@^1.4.0: - version "1.9.1" - resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c" - dependencies: - object-assign "^4.0.1" - prepend-http "^1.0.0" - query-string "^4.1.0" - sort-keys "^1.0.0" - nouislider-algolia-fork@^10.0.0: version "10.0.0" resolved "https://registry.yarnpkg.com/nouislider-algolia-fork/-/nouislider-algolia-fork-10.0.0.tgz#66d0a941aaa0ca64e58379e67bd320956f3cf3ce" @@ -6493,10 +5558,6 @@ oauth-sign@~0.8.1: version "0.8.2" resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43" -object-assign@4.1.0, object-assign@^4.0.1, object-assign@^4.1.0: - version "4.1.0" - resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.0.tgz#7a3b3d0e98063d43f4c03f2e8ae6cd51a86883a0" - object-assign@^2.0.0: version "2.1.1" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-2.1.1.tgz#43c36e5d569ff8e4816c4efa8be02d26967c18aa" @@ -6505,13 +5566,9 @@ object-assign@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2" -object-assign@^4.1.1: - version "4.1.1" - resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" - -object-component@0.0.3: - version "0.0.3" - resolved "https://registry.yarnpkg.com/object-component/-/object-component-0.0.3.tgz#f0c69aa50efc95b866c186f400a33769cb2f1291" +object-assign@^4.0.1, object-assign@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.0.tgz#7a3b3d0e98063d43f4c03f2e8ae6cd51a86883a0" object-get@^2.0.0, object-get@^2.0.2, object-get@^2.0.4, object-get@^2.1.0: version "2.1.0" @@ -6529,10 +5586,6 @@ object-keys@^1.0.10, object-keys@^1.0.11, object-keys@^1.0.8, object-keys@^1.0.9 version "1.0.11" resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d" -object-path@^0.9.0: - version "0.9.2" - resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.9.2.tgz#0fd9a74fc5fad1ae3968b586bda5c632bd6c05a5" - object-to-spawn-args@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/object-to-spawn-args/-/object-to-spawn-args-1.1.0.tgz#031a200e37db2c3dfc9b98074a0d69a5be253c1c" @@ -6621,17 +5674,6 @@ opener@~1.4.0: version "1.4.2" resolved "https://registry.yarnpkg.com/opener/-/opener-1.4.2.tgz#b32582080042af8680c389a499175b4c54fff523" -openurl@1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/openurl/-/openurl-1.1.0.tgz#e2f2189d999c04823201f083f0f1a7cd8903187a" - -opn@4.0.2: - version "4.0.2" - resolved "https://registry.yarnpkg.com/opn/-/opn-4.0.2.tgz#7abc22e644dff63b0a96d5ab7f2790c0f01abc95" - dependencies: - object-assign "^4.0.1" - pinkie-promise "^2.0.0" - optimist@0.6.x, optimist@^0.6.1, optimist@~0.6.0, optimist@~0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686" @@ -6656,10 +5698,6 @@ optionator@^0.8.1, optionator@^0.8.2: type-check "~0.3.2" wordwrap "~1.0.0" -options@>=0.0.5: - version "0.0.6" - resolved "https://registry.yarnpkg.com/options/-/options-0.0.6.tgz#ec22d312806bb53e731773e7cdaefcf1c643128f" - ordered-read-streams@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/ordered-read-streams/-/ordered-read-streams-0.1.0.tgz#fd565a9af8eb4473ba69b6ed8a34352cb552f126" @@ -6674,7 +5712,7 @@ os-browserify@^0.2.0: version "0.2.1" resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.2.1.tgz#63fc4ccee5d2d7763d26bbf8601078e6c2e0044f" -os-homedir@^1.0.0, os-homedir@^1.0.1: +os-homedir@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3" @@ -6773,24 +5811,6 @@ parse5@^1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/parse5/-/parse5-1.5.1.tgz#9b7f3b0de32be78dc2401b17573ccaf0f6f59d94" -parsejson@0.0.3: - version "0.0.3" - resolved "https://registry.yarnpkg.com/parsejson/-/parsejson-0.0.3.tgz#ab7e3759f209ece99437973f7d0f1f64ae0e64ab" - dependencies: - better-assert "~1.0.0" - -parseqs@0.0.5: - version "0.0.5" - resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.5.tgz#d5208a3738e46766e291ba2ea173684921a8b89d" - dependencies: - better-assert "~1.0.0" - -parseuri@0.0.5: - version "0.0.5" - resolved "https://registry.yarnpkg.com/parseuri/-/parseuri-0.0.5.tgz#80204a50d4dbb779bfdc6ebe2778d90e4bce320a" - dependencies: - better-assert "~1.0.0" - parseurl@~1.3.1: version "1.3.1" resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.1.tgz#c8ab8c9223ba34888aa64a297b28853bec18da56" @@ -6900,21 +5920,6 @@ portfinder@0.4.x: async "0.9.0" mkdirp "0.5.x" -portscanner@2.1.1: - version "2.1.1" - resolved "https://registry.yarnpkg.com/portscanner/-/portscanner-2.1.1.tgz#eabb409e4de24950f5a2a516d35ae769343fbb96" - dependencies: - async "1.5.2" - is-number-like "^1.0.3" - -postcss-calc@^5.2.0: - version "5.3.1" - resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e" - dependencies: - postcss "^5.0.2" - postcss-message-helpers "^2.0.0" - reduce-css-calc "^1.2.6" - postcss-cli@^2.6.0: version "2.6.0" resolved "https://registry.yarnpkg.com/postcss-cli/-/postcss-cli-2.6.0.tgz#f0de393caa026fcfc1b1479822989af508ed515d" @@ -6929,316 +5934,61 @@ postcss-cli@^2.6.0: optionalDependencies: chokidar "^1.5.1" -postcss-colormin@^2.1.8: - version "2.2.2" - resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-2.2.2.tgz#6631417d5f0e909a3d7ec26b24c8a8d1e4f96e4b" - dependencies: - colormin "^1.0.5" - postcss "^5.0.13" - postcss-value-parser "^3.2.3" +postcss-value-parser@^3.2.3: + version "3.3.0" + resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15" -postcss-convert-values@^2.3.4: - version "2.6.1" - resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-2.6.1.tgz#bbd8593c5c1fd2e3d1c322bb925dcae8dae4d62d" +postcss@^5.0.0, postcss@^5.2.16: + version "5.2.16" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.16.tgz#732b3100000f9ff8379a48a53839ed097376ad57" dependencies: - postcss "^5.0.11" - postcss-value-parser "^3.1.2" + chalk "^1.1.3" + js-base64 "^2.1.9" + source-map "^0.5.6" + supports-color "^3.2.3" -postcss-discard-comments@^2.0.4: - version "2.0.4" - resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz#befe89fafd5b3dace5ccce51b76b81514be00e3d" +preact-compat@^3.14.1: + version "3.14.1" + resolved "https://registry.yarnpkg.com/preact-compat/-/preact-compat-3.14.1.tgz#20d2b448cd596a8b18ba61d0a3db9ac2b485adb1" dependencies: - postcss "^5.0.14" + preact-render-to-string "^3.6.0" + preact-transition-group "^1.1.0" + proptypes "^0.14.3" + standalone-react-addons-pure-render-mixin "^0.1.1" -postcss-discard-duplicates@^2.0.1: - version "2.1.0" - resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-2.1.0.tgz#b9abf27b88ac188158a5eb12abcae20263b91932" +preact-render-to-string@^3.6.0: + version "3.6.0" + resolved "https://registry.yarnpkg.com/preact-render-to-string/-/preact-render-to-string-3.6.0.tgz#03a49d2d755a766c3d421e8b06d6edbb33ed6bde" dependencies: - postcss "^5.0.4" + pretty-format "^3.5.1" -postcss-discard-empty@^2.0.1: - version "2.1.0" - resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz#d2b4bd9d5ced5ebd8dcade7640c7d7cd7f4f92b5" - dependencies: - postcss "^5.0.14" +preact-transition-group@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/preact-transition-group/-/preact-transition-group-1.1.0.tgz#97d0beff0790d721faecd2560c02cd30d5426f23" -postcss-discard-overridden@^0.1.1: - version "0.1.1" - resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz#8b1eaf554f686fb288cd874c55667b0aa3668d58" - dependencies: - postcss "^5.0.16" +preact@^7.2.0: + version "7.2.0" + resolved "https://registry.yarnpkg.com/preact/-/preact-7.2.0.tgz#8aacc97465a65509bc556604a7750d48e2fa7ad1" -postcss-discard-unused@^2.2.1: - version "2.2.3" - resolved "https://registry.yarnpkg.com/postcss-discard-unused/-/postcss-discard-unused-2.2.3.tgz#bce30b2cc591ffc634322b5fb3464b6d934f4433" - dependencies: - postcss "^5.0.14" - uniqs "^2.0.0" +prelude-ls@~1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" -postcss-filter-plugins@^2.0.0: - version "2.0.2" - resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-2.0.2.tgz#6d85862534d735ac420e4a85806e1f5d4286d84c" - dependencies: - postcss "^5.0.4" - uniqid "^4.0.0" +prepend-http@^1.0.0: + version "1.0.4" + resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" -postcss-load-config@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a" - dependencies: - cosmiconfig "^2.1.0" - object-assign "^4.1.0" - postcss-load-options "^1.2.0" - postcss-load-plugins "^2.3.0" +preserve@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b" -postcss-load-options@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/postcss-load-options/-/postcss-load-options-1.2.0.tgz#b098b1559ddac2df04bc0bb375f99a5cfe2b6d8c" +pretty-bytes-cli@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/pretty-bytes-cli/-/pretty-bytes-cli-2.0.0.tgz#e705662cffdc9c75291835333bc2f89ad3c033cf" dependencies: - cosmiconfig "^2.1.0" - object-assign "^4.1.0" - -postcss-load-plugins@^2.3.0: - version "2.3.0" - resolved "https://registry.yarnpkg.com/postcss-load-plugins/-/postcss-load-plugins-2.3.0.tgz#745768116599aca2f009fad426b00175049d8d92" - dependencies: - cosmiconfig "^2.1.1" - object-assign "^4.1.0" - -postcss-loader@^1.3.3: - version "1.3.3" - resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-1.3.3.tgz#a621ea1fa29062a83972a46f54486771301916eb" - dependencies: - loader-utils "^1.0.2" - object-assign "^4.1.1" - postcss "^5.2.15" - postcss-load-config "^1.2.0" - -postcss-merge-idents@^2.1.5: - version "2.1.7" - resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270" - dependencies: - has "^1.0.1" - postcss "^5.0.10" - postcss-value-parser "^3.1.1" - -postcss-merge-longhand@^2.0.1: - version "2.0.2" - resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-2.0.2.tgz#23d90cd127b0a77994915332739034a1a4f3d658" - dependencies: - postcss "^5.0.4" - -postcss-merge-rules@^2.0.3: - version "2.1.2" - resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.1.2.tgz#d1df5dfaa7b1acc3be553f0e9e10e87c61b5f721" - dependencies: - browserslist "^1.5.2" - caniuse-api "^1.5.2" - postcss "^5.0.4" - postcss-selector-parser "^2.2.2" - vendors "^1.0.0" - -postcss-message-helpers@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz#a4f2f4fab6e4fe002f0aed000478cdf52f9ba60e" - -postcss-minify-font-values@^1.0.2: - version "1.0.5" - resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-1.0.5.tgz#4b58edb56641eba7c8474ab3526cafd7bbdecb69" - dependencies: - object-assign "^4.0.1" - postcss "^5.0.4" - postcss-value-parser "^3.0.2" - -postcss-minify-gradients@^1.0.1: - version "1.0.5" - resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz#5dbda11373703f83cfb4a3ea3881d8d75ff5e6e1" - dependencies: - postcss "^5.0.12" - postcss-value-parser "^3.3.0" - -postcss-minify-params@^1.0.4: - version "1.2.2" - resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-1.2.2.tgz#ad2ce071373b943b3d930a3fa59a358c28d6f1f3" - dependencies: - alphanum-sort "^1.0.1" - postcss "^5.0.2" - postcss-value-parser "^3.0.2" - uniqs "^2.0.0" - -postcss-minify-selectors@^2.0.4: - version "2.1.1" - resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-2.1.1.tgz#b2c6a98c0072cf91b932d1a496508114311735bf" - dependencies: - alphanum-sort "^1.0.2" - has "^1.0.1" - postcss "^5.0.14" - postcss-selector-parser "^2.0.0" - -postcss-modules-extract-imports@^1.0.0: - version "1.0.1" - resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.0.1.tgz#8fb3fef9a6dd0420d3f6d4353cf1ff73f2b2a341" - dependencies: - postcss "^5.0.4" - -postcss-modules-local-by-default@^1.0.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.1.1.tgz#29a10673fa37d19251265ca2ba3150d9040eb4ce" - dependencies: - css-selector-tokenizer "^0.6.0" - postcss "^5.0.4" - -postcss-modules-scope@^1.0.0: - version "1.0.2" - resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.0.2.tgz#ff977395e5e06202d7362290b88b1e8cd049de29" - dependencies: - css-selector-tokenizer "^0.6.0" - postcss "^5.0.4" - -postcss-modules-values@^1.1.0: - version "1.2.2" - resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.2.2.tgz#f0e7d476fe1ed88c5e4c7f97533a3e772ad94ca1" - dependencies: - icss-replace-symbols "^1.0.2" - postcss "^5.0.14" - -postcss-normalize-charset@^1.1.0: - version "1.1.1" - resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz#ef9ee71212d7fe759c78ed162f61ed62b5cb93f1" - dependencies: - postcss "^5.0.5" - -postcss-normalize-url@^3.0.7: - version "3.0.8" - resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-3.0.8.tgz#108f74b3f2fcdaf891a2ffa3ea4592279fc78222" - dependencies: - is-absolute-url "^2.0.0" - normalize-url "^1.4.0" - postcss "^5.0.14" - postcss-value-parser "^3.2.3" - -postcss-ordered-values@^2.1.0: - version "2.2.3" - resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-2.2.3.tgz#eec6c2a67b6c412a8db2042e77fe8da43f95c11d" - dependencies: - postcss "^5.0.4" - postcss-value-parser "^3.0.1" - -postcss-reduce-idents@^2.2.2: - version "2.4.0" - resolved "https://registry.yarnpkg.com/postcss-reduce-idents/-/postcss-reduce-idents-2.4.0.tgz#c2c6d20cc958284f6abfbe63f7609bf409059ad3" - dependencies: - postcss "^5.0.4" - postcss-value-parser "^3.0.2" - -postcss-reduce-initial@^1.0.0: - version "1.0.1" - resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-1.0.1.tgz#68f80695f045d08263a879ad240df8dd64f644ea" - dependencies: - postcss "^5.0.4" - -postcss-reduce-transforms@^1.0.3: - version "1.0.4" - resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.4.tgz#ff76f4d8212437b31c298a42d2e1444025771ae1" - dependencies: - has "^1.0.1" - postcss "^5.0.8" - postcss-value-parser "^3.0.1" - -postcss-scss@^0.4.1: - version "0.4.1" - resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-0.4.1.tgz#ad771b81f0f72f5f4845d08aa60f93557653d54c" - dependencies: - postcss "^5.2.13" - -postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2: - version "2.2.3" - resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90" - dependencies: - flatten "^1.0.2" - indexes-of "^1.0.1" - uniq "^1.0.1" - -postcss-svgo@^2.1.1: - version "2.1.6" - resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-2.1.6.tgz#b6df18aa613b666e133f08adb5219c2684ac108d" - dependencies: - is-svg "^2.0.0" - postcss "^5.0.14" - postcss-value-parser "^3.2.3" - svgo "^0.7.0" - -postcss-unique-selectors@^2.0.2: - version "2.0.2" - resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz#981d57d29ddcb33e7b1dfe1fd43b8649f933ca1d" - dependencies: - alphanum-sort "^1.0.1" - postcss "^5.0.4" - uniqs "^2.0.0" - -postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0: - version "3.3.0" - resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15" - -postcss-zindex@^2.0.1: - version "2.2.0" - resolved "https://registry.yarnpkg.com/postcss-zindex/-/postcss-zindex-2.2.0.tgz#d2109ddc055b91af67fc4cb3b025946639d2af22" - dependencies: - has "^1.0.1" - postcss "^5.0.4" - uniqs "^2.0.0" - -postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.13, postcss@^5.2.15, postcss@^5.2.16: - version "5.2.16" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.16.tgz#732b3100000f9ff8379a48a53839ed097376ad57" - dependencies: - chalk "^1.1.3" - js-base64 "^2.1.9" - source-map "^0.5.6" - supports-color "^3.2.3" - -preact-compat@^3.14.1: - version "3.14.1" - resolved "https://registry.yarnpkg.com/preact-compat/-/preact-compat-3.14.1.tgz#20d2b448cd596a8b18ba61d0a3db9ac2b485adb1" - dependencies: - preact-render-to-string "^3.6.0" - preact-transition-group "^1.1.0" - proptypes "^0.14.3" - standalone-react-addons-pure-render-mixin "^0.1.1" - -preact-render-to-string@^3.6.0: - version "3.6.0" - resolved "https://registry.yarnpkg.com/preact-render-to-string/-/preact-render-to-string-3.6.0.tgz#03a49d2d755a766c3d421e8b06d6edbb33ed6bde" - dependencies: - pretty-format "^3.5.1" - -preact-transition-group@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/preact-transition-group/-/preact-transition-group-1.1.0.tgz#97d0beff0790d721faecd2560c02cd30d5426f23" - -preact@^7.2.0: - version "7.2.0" - resolved "https://registry.yarnpkg.com/preact/-/preact-7.2.0.tgz#8aacc97465a65509bc556604a7750d48e2fa7ad1" - -prelude-ls@~1.1.2: - version "1.1.2" - resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" - -prepend-http@^1.0.0: - version "1.0.4" - resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" - -preserve@^0.2.0: - version "0.2.0" - resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b" - -pretty-bytes-cli@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/pretty-bytes-cli/-/pretty-bytes-cli-2.0.0.tgz#e705662cffdc9c75291835333bc2f89ad3c033cf" - dependencies: - get-stdin "^5.0.1" - meow "^3.6.0" - pretty-bytes "^4.0.0" + get-stdin "^5.0.1" + meow "^3.6.0" + pretty-bytes "^4.0.0" pretty-bytes@^4.0.0: version "4.0.2" @@ -7278,7 +6028,7 @@ promise.prototype.finally@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/promise.prototype.finally/-/promise.prototype.finally-1.0.1.tgz#91182f91c92486995740fa05e0da942ac986befa" -"promise@>=3.2 <8", promise@^7.0.1, promise@^7.1.1: +"promise@>=3.2 <8", promise@^7.1.1: version "7.1.1" resolved "https://registry.yarnpkg.com/promise/-/promise-7.1.1.tgz#489654c692616b8aa55b0724fa809bb7db49c5bf" dependencies: @@ -7323,99 +6073,6 @@ public-encrypt@^4.0.0: parse-asn1 "^5.0.0" randombytes "^2.0.1" -pug-attrs@^2.0.2: - version "2.0.2" - resolved "https://registry.yarnpkg.com/pug-attrs/-/pug-attrs-2.0.2.tgz#8be2b2225568ffa75d1b866982bff9f4111affcb" - dependencies: - constantinople "^3.0.1" - js-stringify "^1.0.1" - pug-runtime "^2.0.3" - -pug-code-gen@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/pug-code-gen/-/pug-code-gen-1.1.1.tgz#1cf72744ef2a039eae6a3340caaa1105871258e8" - dependencies: - constantinople "^3.0.1" - doctypes "^1.1.0" - js-stringify "^1.0.1" - pug-attrs "^2.0.2" - pug-error "^1.3.2" - pug-runtime "^2.0.3" - void-elements "^2.0.1" - with "^5.0.0" - -pug-error@^1.3.2: - version "1.3.2" - resolved "https://registry.yarnpkg.com/pug-error/-/pug-error-1.3.2.tgz#53ae7d9d29bb03cf564493a026109f54c47f5f26" - -pug-filters@^2.1.1: - version "2.1.1" - resolved "https://registry.yarnpkg.com/pug-filters/-/pug-filters-2.1.1.tgz#10ab2b6d7e5aeec99cad28a1e4c8085f823fc754" - dependencies: - clean-css "^3.3.0" - constantinople "^3.0.1" - jstransformer "1.0.0" - pug-error "^1.3.2" - pug-walk "^1.1.1" - resolve "^1.1.6" - uglify-js "^2.6.1" - -pug-lexer@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/pug-lexer/-/pug-lexer-3.0.0.tgz#173b00a082e5684a60eb0deb5aae4e514a172e26" - dependencies: - character-parser "^2.1.1" - is-expression "^3.0.0" - pug-error "^1.3.2" - -pug-linker@^2.0.2: - version "2.0.2" - resolved "https://registry.yarnpkg.com/pug-linker/-/pug-linker-2.0.2.tgz#1deca67d741fab46b028c1366f178fbaee620233" - dependencies: - pug-error "^1.3.2" - pug-walk "^1.1.1" - -pug-load@^2.0.5: - version "2.0.5" - resolved "https://registry.yarnpkg.com/pug-load/-/pug-load-2.0.5.tgz#eaaf46ccace8aff7461e0fad1e2b67305514f2c6" - dependencies: - object-assign "^4.1.0" - pug-walk "^1.1.1" - -pug-parser@^2.0.2: - version "2.0.2" - resolved "https://registry.yarnpkg.com/pug-parser/-/pug-parser-2.0.2.tgz#53a680cfd05039dcb0c27d029094bc4a792689b0" - dependencies: - pug-error "^1.3.2" - token-stream "0.0.1" - -pug-runtime@^2.0.3: - version "2.0.3" - resolved "https://registry.yarnpkg.com/pug-runtime/-/pug-runtime-2.0.3.tgz#98162607b0fce9e254d427f33987a5aee7168bda" - -pug-strip-comments@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/pug-strip-comments/-/pug-strip-comments-1.0.2.tgz#d313afa01bcc374980e1399e23ebf2eb9bdc8513" - dependencies: - pug-error "^1.3.2" - -pug-walk@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/pug-walk/-/pug-walk-1.1.1.tgz#b9976240d213692e6993fbc13ae1205c54052efe" - -pug@^2.0.0-beta11: - version "2.0.0-beta11" - resolved "https://registry.yarnpkg.com/pug/-/pug-2.0.0-beta11.tgz#15abe6af5004c7e2cf4613e4b27465c9546b5f01" - dependencies: - pug-code-gen "^1.1.1" - pug-filters "^2.1.1" - pug-lexer "^3.0.0" - pug-linker "^2.0.2" - pug-load "^2.0.5" - pug-parser "^2.0.2" - pug-runtime "^2.0.3" - pug-strip-comments "^1.0.2" - punycode@1.3.2: version "1.3.2" resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d" @@ -7435,19 +6092,11 @@ q-io@1.13.2: qs "^1.2.1" url2 "^0.0.0" -q@1.4.1, q@^1.0.1, q@^1.1.2, q@^1.4.1, q@~1.4.1: +q@1.4.1, q@^1.0.1, q@^1.4.1, q@~1.4.1: version "1.4.1" resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e" -qs@0.4.x: - version "0.4.2" - resolved "https://registry.yarnpkg.com/qs/-/qs-0.4.2.tgz#3cac4c861e371a8c9c4770ac23cda8de639b8e5f" - -qs@6.2.1: - version "6.2.1" - resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.1.tgz#ce03c5ff0935bc1d9d69a9f14cbd18e568d67625" - -qs@6.4.0, "qs@>= 0.4.0": +qs@6.4.0: version "6.4.0" resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233" @@ -7467,18 +6116,11 @@ qs@~2.3.3: version "2.3.3" resolved "https://registry.yarnpkg.com/qs/-/qs-2.3.3.tgz#e9e85adbe75da0bbe4c8e0476a086290f863b404" -query-string@^4.1.0: - version "4.3.2" - resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.2.tgz#ec0fd765f58a50031a3968c2431386f8947a5cdd" - dependencies: - object-assign "^4.1.0" - strict-uri-encode "^1.0.0" - querystring-es3@^0.2.0, querystring-es3@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73" -querystring@0.2.0, querystring@^0.2.0: +querystring@0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620" @@ -7605,18 +6247,18 @@ read@1.0.5, read@1.0.x: dependencies: mute-stream "~0.0.4" -readable-stream@1.1, "readable-stream@>=1.1.13-1 <1.2.0-0": - version "1.1.13" - resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.13.tgz#f6eef764f514c89e2b9e23146a75ba106756d23e" +"readable-stream@>=1.0.33-1 <1.1.0-0": + version "1.0.34" + resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c" dependencies: core-util-is "~1.0.0" inherits "~2.0.1" isarray "0.0.1" string_decoder "~0.10.x" -"readable-stream@>=1.0.33-1 <1.1.0-0": - version "1.0.34" - resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c" +"readable-stream@>=1.1.13-1 <1.2.0-0": + version "1.1.13" + resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.13.tgz#f6eef764f514c89e2b9e23146a75ba106756d23e" dependencies: core-util-is "~1.0.0" inherits "~2.0.1" @@ -7681,12 +6323,6 @@ rechoir@^0.6.2: dependencies: resolve "^1.1.6" -recursive-readdir@^2.1.0: - version "2.1.1" - resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.1.1.tgz#a01cfc7f7f38a53ec096a096f63a50489c3e297c" - dependencies: - minimatch "3.0.3" - redent@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde" @@ -7700,14 +6336,6 @@ redeyed@~1.0.0: dependencies: esprima "~3.0.0" -reduce-css-calc@^1.2.6: - version "1.3.0" - resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716" - dependencies: - balanced-match "^0.4.2" - math-expression-evaluator "^1.2.14" - reduce-function-call "^1.0.1" - reduce-extract@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/reduce-extract/-/reduce-extract-1.0.0.tgz#67f2385beda65061b5f5f4312662e8b080ca1525" @@ -7718,12 +6346,6 @@ reduce-flatten@^1.0.0, reduce-flatten@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/reduce-flatten/-/reduce-flatten-1.0.1.tgz#258c78efd153ddf93cb561237f61184f3696e327" -reduce-function-call@^1.0.1: - version "1.0.2" - resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.2.tgz#5a200bf92e0e37751752fe45b0ab330fd4b6be99" - dependencies: - balanced-match "^0.4.2" - reduce-unique@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/reduce-unique/-/reduce-unique-1.0.0.tgz#7e586bcf87a4e32b6d7abd8277fad6cdec9f4803" @@ -7763,14 +6385,6 @@ regex-cache@^0.4.2: is-equal-shallow "^0.1.3" is-primitive "^2.0.0" -regexpu-core@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b" - dependencies: - regenerate "^1.2.1" - regjsgen "^0.2.0" - regjsparser "^0.1.4" - regexpu-core@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-2.0.0.tgz#49d038837b8dcf8bfa5b9a42139938e6ea2ae240" @@ -7844,14 +6458,6 @@ repeating@^2.0.0: dependencies: is-finite "^1.0.0" -replace-in-file@^2.5.0: - version "2.5.0" - resolved "https://registry.yarnpkg.com/replace-in-file/-/replace-in-file-2.5.0.tgz#1f6388225c8acb4db288a8189365e266f9824da4" - dependencies: - chalk "^1.1.3" - glob "^7.1.1" - yargs "^7.0.1" - req-then@^0.5.1: version "0.5.1" resolved "https://registry.yarnpkg.com/req-then/-/req-then-0.5.1.tgz#31c6e0b56f4ddd2acd6de0ba1bcea77b6079dfdf" @@ -7906,39 +6512,10 @@ request@2.40.0: tough-cookie ">=0.12.0" tunnel-agent "~0.4.0" -request@2.78.0: - version "2.78.0" - resolved "https://registry.yarnpkg.com/request/-/request-2.78.0.tgz#e1c8dec346e1c81923b24acdb337f11decabe9cc" - dependencies: - aws-sign2 "~0.6.0" - aws4 "^1.2.1" - caseless "~0.11.0" - combined-stream "~1.0.5" - extend "~3.0.0" - forever-agent "~0.6.1" - form-data "~2.1.1" - har-validator "~2.0.6" - hawk "~3.1.3" - http-signature "~1.1.0" - is-typedarray "~1.0.0" - isstream "~0.1.2" - json-stringify-safe "~5.0.1" - mime-types "~2.1.7" - node-uuid "~1.4.7" - oauth-sign "~0.8.1" - qs "~6.3.0" - stringstream "~0.0.4" - tough-cookie "~2.3.0" - tunnel-agent "~0.4.1" - require-directory@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42" -require-from-string@^1.1.0: - version "1.2.1" - resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418" - require-main-filename@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1" @@ -7976,13 +6553,6 @@ resolve@^1.1.6, resolve@^1.1.7, resolve@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.2.0.tgz#9589c3f2f6149d1417a40becc1663db6ec6bc26c" -resp-modifier@6.0.2: - version "6.0.2" - resolved "https://registry.yarnpkg.com/resp-modifier/-/resp-modifier-6.0.2.tgz#b124de5c4fbafcba541f48ffa73970f4aa456b4f" - dependencies: - debug "^2.2.0" - minimatch "^3.0.2" - restore-cursor@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541" @@ -8040,7 +6610,7 @@ rx-lite@^3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102" -rx@4.1.0, rx@^4.1.0: +rx@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782" @@ -8096,14 +6666,10 @@ sauce-connect-launcher@^1.1.1: lodash "^4.16.6" rimraf "^2.5.4" -sax@^1.2.1, sax@~1.2.1: +sax@^1.2.1: version "1.2.2" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.2.tgz#fd8631a23bc7826bef5d871bdb87378c95647828" -select@^1.1.2: - version "1.1.2" - resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d" - semver-diff@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36" @@ -8122,24 +6688,6 @@ semver@~5.0.1: version "5.0.3" resolved "https://registry.yarnpkg.com/semver/-/semver-5.0.3.tgz#77466de589cd5d3c95f138aa78bc569a3cb5d27a" -send@0.14.1: - version "0.14.1" - resolved "https://registry.yarnpkg.com/send/-/send-0.14.1.tgz#a954984325392f51532a7760760e459598c89f7a" - dependencies: - debug "~2.2.0" - depd "~1.1.0" - destroy "~1.0.4" - encodeurl "~1.0.1" - escape-html "~1.0.3" - etag "~1.7.0" - fresh "0.3.0" - http-errors "~1.5.0" - mime "1.3.4" - ms "0.7.1" - on-finished "~2.3.0" - range-parser "~1.2.0" - statuses "~1.3.0" - send@0.15.1: version "0.15.1" resolved "https://registry.yarnpkg.com/send/-/send-0.15.1.tgz#8a02354c26e6f5cca700065f5f0cdeba90ec7b5f" @@ -8158,7 +6706,7 @@ send@0.15.1: range-parser "~1.2.0" statuses "~1.3.1" -serve-index@1.8.0, serve-index@^1.7.2: +serve-index@^1.7.2: version "1.8.0" resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.8.0.tgz#7c5d96c13fb131101f93c1c5774f8516a1e78d3b" dependencies: @@ -8170,15 +6718,6 @@ serve-index@1.8.0, serve-index@^1.7.2: mime-types "~2.1.11" parseurl "~1.3.1" -serve-static@1.11.1: - version "1.11.1" - resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.11.1.tgz#d6cce7693505f733c759de57befc1af76c0f0805" - dependencies: - encodeurl "~1.0.1" - escape-html "~1.0.3" - parseurl "~1.3.1" - send "0.14.1" - serve-static@1.12.1: version "1.12.1" resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.12.1.tgz#7443a965e3ced647aceb5639fa06bf4d1bbe0039" @@ -8188,10 +6727,6 @@ serve-static@1.12.1: parseurl "~1.3.1" send "0.15.1" -server-destroy@1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/server-destroy/-/server-destroy-1.0.1.tgz#f13bf928e42b9c3e79383e61cc3998b5d14e6cdd" - set-blocking@^2.0.0, set-blocking@~2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7" @@ -8279,50 +6814,6 @@ sntp@1.x.x: dependencies: hoek "2.x.x" -socket.io-adapter@0.5.0: - version "0.5.0" - resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-0.5.0.tgz#cb6d4bb8bec81e1078b99677f9ced0046066bb8b" - dependencies: - debug "2.3.3" - socket.io-parser "2.3.1" - -socket.io-client@1.6.0: - version "1.6.0" - resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-1.6.0.tgz#5b668f4f771304dfeed179064708386fa6717853" - dependencies: - backo2 "1.0.2" - component-bind "1.0.0" - component-emitter "1.2.1" - debug "2.3.3" - engine.io-client "1.8.0" - has-binary "0.1.7" - indexof "0.0.1" - object-component "0.0.3" - parseuri "0.0.5" - socket.io-parser "2.3.1" - to-array "0.1.4" - -socket.io-parser@2.3.1: - version "2.3.1" - resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-2.3.1.tgz#dd532025103ce429697326befd64005fcfe5b4a0" - dependencies: - component-emitter "1.1.2" - debug "2.2.0" - isarray "0.0.1" - json3 "3.3.2" - -socket.io@1.6.0: - version "1.6.0" - resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-1.6.0.tgz#3e40d932637e6bd923981b25caf7c53e83b6e2e1" - dependencies: - debug "2.3.3" - engine.io "1.8.0" - has-binary "0.1.7" - object-assign "4.1.0" - socket.io-adapter "0.5.0" - socket.io-client "1.6.0" - socket.io-parser "2.3.1" - sockjs-client@^1.0.3: version "1.1.1" resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.1.tgz#284843e9a9784d7c474b1571b3240fca9dda4bb0" @@ -8349,19 +6840,13 @@ sort-array@^1.0.0: object-get "^2.0.4" typical "^2.4.2" -sort-keys@^1.0.0: - version "1.1.2" - resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad" - dependencies: - is-plain-obj "^1.0.0" - sortobject@^1.0.0: version "1.1.1" resolved "https://registry.yarnpkg.com/sortobject/-/sortobject-1.1.1.tgz#4f695d4d44ed0a4c06482c34c2582a2dcdc2ab34" dependencies: editions "^1.1.1" -source-list-map@^0.1.7, source-list-map@~0.1.7: +source-list-map@~0.1.7: version "0.1.7" resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.7.tgz#d4b5ce2a46535c72c7e8527c71a77d250618172e" @@ -8384,12 +6869,6 @@ source-map-url@~0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.3.0.tgz#7ecaf13b57bcd09da8a40c5d269db33799d4aaf9" -source-map@0.4.x, source-map@^0.4.4, source-map@~0.4.1: - version "0.4.4" - resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b" - dependencies: - amdefine ">=0.0.4" - source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1: version "0.5.6" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412" @@ -8400,6 +6879,12 @@ source-map@^0.1.38, source-map@^0.1.40, source-map@~0.1.7: dependencies: amdefine ">=0.0.4" +source-map@^0.4.4, source-map@~0.4.1: + version "0.4.4" + resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b" + dependencies: + amdefine ">=0.0.4" + source-map@~0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.2.0.tgz#dab73fbcfc2ba819b4de03bd6f6eaa48164b3f9d" @@ -8472,11 +6957,7 @@ standalone-react-addons-pure-render-mixin@^0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/standalone-react-addons-pure-render-mixin/-/standalone-react-addons-pure-render-mixin-0.1.1.tgz#3c7409f4c79c40de9ac72c616cf679a994f37551" -stat-mode@^0.2.0: - version "0.2.2" - resolved "https://registry.yarnpkg.com/stat-mode/-/stat-mode-0.2.2.tgz#e6c80b623123d7d80cf132ce538f346289072502" - -"statuses@>= 1.3.1 < 2", statuses@~1.3.0, statuses@~1.3.1: +"statuses@>= 1.3.1 < 2", statuses@~1.3.1: version "1.3.1" resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e" @@ -8524,13 +7005,6 @@ stream-shift@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952" -stream-throttle@^0.1.3: - version "0.1.3" - resolved "https://registry.yarnpkg.com/stream-throttle/-/stream-throttle-0.1.3.tgz#add57c8d7cc73a81630d31cd55d3961cfafba9c3" - dependencies: - commander "^2.2.0" - limiter "^1.0.5" - stream-via@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/stream-via/-/stream-via-1.0.3.tgz#cebd32a5a59d74b3b68e3404942e867184ad4ac9" @@ -8539,10 +7013,6 @@ stream-via@~0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/stream-via/-/stream-via-0.1.1.tgz#0cee5df9c959fb1d3f4eda4819f289d5f9205afc" -strict-uri-encode@^1.0.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713" - string-length@^1.0.0, string-length@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/string-length/-/string-length-1.0.1.tgz#56970fb1c38558e9e70b728bf3de269ac45adfac" @@ -8576,10 +7046,6 @@ string.prototype.codepointat@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/string.prototype.codepointat/-/string.prototype.codepointat-0.2.0.tgz#6b26e9bd3afcaa7be3b4269b526de1b82000ac78" -string@^3.3.3: - version "3.3.3" - resolved "https://registry.yarnpkg.com/string/-/string-3.3.3.tgz#5ea211cd92d228e184294990a6cc97b366a77cb0" - string_decoder@^0.10.25, string_decoder@~0.10.x: version "0.10.31" resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94" @@ -8658,12 +7124,6 @@ structured-source@^3.0.2: dependencies: boundary "^1.0.1" -style-loader@^0.16.0: - version "0.16.0" - resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.16.0.tgz#5f001a9bf58fff9fd40f8aa3b9738ab99d4000c7" - dependencies: - loader-utils "^1.0.2" - supports-color@3.1.2, supports-color@^3.1.0, supports-color@^3.1.1, supports-color@^3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.1.2.tgz#72a262894d9d408b956ca05ff37b2ed8a6e2a2d5" @@ -8708,18 +7168,6 @@ surge@^0.18.0: tar.gz "0.1.1" url-parse-as-address "1.0.0" -svgo@^0.7.0: - version "0.7.2" - resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5" - dependencies: - coa "~1.0.1" - colors "~1.1.2" - csso "~2.3.1" - js-yaml "~3.7.0" - mkdirp "~0.5.1" - sax "~1.2.1" - whet.extend "~0.9.9" - symbol-tree@^3.2.1: version "3.2.2" resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6" @@ -8855,13 +7303,6 @@ text-table@~0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" -tfunk@^3.0.1: - version "3.1.0" - resolved "https://registry.yarnpkg.com/tfunk/-/tfunk-3.1.0.tgz#38e4414fc64977d87afdaa72facb6d29f82f7b5b" - dependencies: - chalk "^1.1.1" - object-path "^0.9.0" - then-fs@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/then-fs/-/then-fs-2.0.0.tgz#72f792dd9d31705a91ae19ebfcf8b3f968c81da2" @@ -8897,16 +7338,6 @@ through@2, "through@>=2.2.7 <3", through@^2.3.6, through@~2.3.4: version "2.3.8" resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5" -thunkify-wrap@~1.0.4: - version "1.0.4" - resolved "https://registry.yarnpkg.com/thunkify-wrap/-/thunkify-wrap-1.0.4.tgz#b52be548ddfefda20e00b58c6096762b43dd6880" - dependencies: - enable "1" - -thunkify@^2.1.2: - version "2.1.2" - resolved "https://registry.yarnpkg.com/thunkify/-/thunkify-2.1.2.tgz#faa0e9d230c51acc95ca13a361ac05ca7e04553d" - ticky@1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/ticky/-/ticky-1.0.1.tgz#b7cfa71e768f1c9000c497b9151b30947c50e46d" @@ -8927,10 +7358,6 @@ timers-browserify@^2.0.2: dependencies: setimmediate "^1.0.4" -tiny-emitter@^1.0.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-1.1.0.tgz#ab405a21ffed814a76c19739648093d70654fecb" - tmatch@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/tmatch/-/tmatch-2.0.1.tgz#0c56246f33f30da1b8d3d72895abaf16660f38cf" @@ -8945,10 +7372,6 @@ tmpl@1.0.x: version "1.0.4" resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1" -to-array@0.1.4: - version "0.1.4" - resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890" - to-arraybuffer@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43" @@ -8961,14 +7384,6 @@ to-fast-properties@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320" -token-stream@0.0.1: - version "0.0.1" - resolved "https://registry.yarnpkg.com/token-stream/-/token-stream-0.0.1.tgz#ceeefc717a76c4316f126d0b9dbaa55d7e7df01a" - -toml@^2.3.2: - version "2.3.2" - resolved "https://registry.yarnpkg.com/toml/-/toml-2.3.2.tgz#5eded5ca42887924949fd06eb0e955656001e834" - tough-cookie@>=0.12.0, tough-cookie@^2.3.2, tough-cookie@~2.3.0: version "2.3.2" resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.2.tgz#f081f76e4c85720e6c37a5faced737150d84072a" @@ -9048,15 +7463,11 @@ typical@^2.1, typical@^2.2, typical@^2.3.0, typical@^2.4.2, typical@^2.5.0, typi version "2.6.0" resolved "https://registry.yarnpkg.com/typical/-/typical-2.6.0.tgz#89d51554ab139848a65bcc2c8772f8fb450c40ed" -ua-parser-js@0.7.12, ua-parser-js@^0.7.9: +ua-parser-js@^0.7.9: version "0.7.12" resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb" -uc.micro@^1.0.1, uc.micro@^1.0.3: - version "1.0.3" - resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.3.tgz#7ed50d5e0f9a9fb0a573379259f2a77458d50192" - -uglify-js@^2.6, uglify-js@^2.6.1, uglify-js@^2.8.12: +uglify-js@^2.6, uglify-js@^2.8.12: version "2.8.12" resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.12.tgz#8a50f5d482243650b7108f6080aa3a6afe2a6c55" dependencies: @@ -9089,10 +7500,6 @@ uid-number@~0.0.6: version "0.0.6" resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81" -ultron@1.0.x: - version "1.0.2" - resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.0.2.tgz#ace116ab557cd197386a4e88f4685378c8b2e4fa" - unc-path-regex@^0.1.0: version "0.1.2" resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa" @@ -9107,10 +7514,6 @@ underscore@1.6.0, underscore@~1.6.0: version "1.6.0" resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.6.0.tgz#8b38b10cacdef63337b8b24e4ff86d45aea529a8" -underscore@1.7.x: - version "1.7.0" - resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.7.0.tgz#6bbaf0877500d36be34ecaa584e0db9fef035209" - underscore@~1.8.3: version "1.8.3" resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.8.3.tgz#4f3fb53b106e6097fcf9cb4109f2a5e9bdfa5022" @@ -9139,20 +7542,6 @@ union@~0.4.3: dependencies: qs "~2.3.3" -uniq@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff" - -uniqid@^4.0.0: - version "4.1.1" - resolved "https://registry.yarnpkg.com/uniqid/-/uniqid-4.1.1.tgz#89220ddf6b751ae52b5f72484863528596bb84c1" - dependencies: - macaddress "^0.2.8" - -uniqs@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02" - unique-stream@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/unique-stream/-/unique-stream-1.0.0.tgz#d59a4a75427447d9aa6c91e70263f8d26a4b104b" @@ -9171,12 +7560,6 @@ unpipe@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec" -unyield@0.0.1: - version "0.0.1" - resolved "https://registry.yarnpkg.com/unyield/-/unyield-0.0.1.tgz#150e65da42bf7742445b958a64eb9b85d1d2b180" - dependencies: - co "~3.1.0" - update-notifier@^0.2.2: version "0.2.2" resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-0.2.2.tgz#e69b3a784b4e686a2acd98f5e66944591996e187" @@ -9307,10 +7690,6 @@ vary@~1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.0.tgz#e1e5affbbd16ae768dd2674394b9ad3022653140" -vendors@^1.0.0: - version "1.0.1" - resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.1.tgz#37ad73c8ee417fb3d580e785312307d274847f22" - verror@1.3.6: version "1.3.6" resolved "https://registry.yarnpkg.com/verror/-/verror-1.3.6.tgz#cff5df12946d297d2baaefaa2689e25be01c005c" @@ -9345,20 +7724,12 @@ vinyl@^0.4.0: clone "^0.2.0" clone-stats "^0.0.1" -vlq@^0.2.1: - version "0.2.1" - resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.1.tgz#14439d711891e682535467f8587c5630e4222a6c" - vm-browserify@0.0.4: version "0.0.4" resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73" dependencies: indexof "0.0.1" -void-elements@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec" - walk-back@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/walk-back/-/walk-back-2.0.1.tgz#554e2a9d874fac47a8cb006bf44c2f0c4998a0a4" @@ -9369,12 +7740,6 @@ walker@~1.0.5: dependencies: makeerror "1.0.x" -ware@^1.2.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/ware/-/ware-1.3.0.tgz#d1b14f39d2e2cb4ab8c4098f756fe4b164e473d4" - dependencies: - wrap-fn "^0.1.0" - watch@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/watch/-/watch-1.0.2.tgz#340a717bde765726fa0aa07d721e0147a551df0c" @@ -9501,16 +7866,7 @@ webpack-dev-server@^1.16.2: supports-color "^3.1.1" webpack-dev-middleware "^1.4.0" -webpack-hot-middleware@^2.17.1: - version "2.17.1" - resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.17.1.tgz#0c8fbf6f93ff29c095d684b07ab6d6c0f2f951d7" - dependencies: - ansi-html "0.0.7" - html-entities "^1.2.0" - querystring "^0.2.0" - strip-ansi "^3.0.0" - -webpack@^1.13.2, webpack@^1.14.0: +webpack@^1.14.0: version "1.14.0" resolved "https://registry.yarnpkg.com/webpack/-/webpack-1.14.0.tgz#54f1ffb92051a328a5b2057d6ae33c289462c823" dependencies: @@ -9540,14 +7896,6 @@ websocket-extensions@>=0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.1.tgz#76899499c184b6ef754377c2dbb0cd6cb55d29e7" -weinre@^2.0.0-pre-I0Z7U9OV: - version "2.0.0-pre-I0Z7U9OV" - resolved "https://registry.yarnpkg.com/weinre/-/weinre-2.0.0-pre-I0Z7U9OV.tgz#fef8aa223921f7b40bbbbd4c3ed4302f6fd0a813" - dependencies: - express "2.5.x" - nopt "3.0.x" - underscore "1.7.x" - wgxpath@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/wgxpath/-/wgxpath-1.0.0.tgz#eef8a4b9d558cc495ad3a9a2b751597ecd9af690" @@ -9569,10 +7917,6 @@ whatwg-url@^4.3.0: tr46 "~0.0.3" webidl-conversions "^3.0.0" -whet.extend@~0.9.9: - version "0.9.9" - resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1" - which-module@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f" @@ -9589,18 +7933,10 @@ wide-align@^1.1.0: dependencies: string-width "^1.0.1" -win-fork@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/win-fork/-/win-fork-1.1.1.tgz#8f58e0656fca00adc8c86a2b89e3cd2d6a2d5e5e" - window-size@0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d" -window-size@^0.1.2: - version "0.1.4" - resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.4.tgz#f8e1aa1ee5a53ec5bf151ffa09742a6ad7697876" - window-size@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.2.0.tgz#b4315bb4214a3d7058ebeee892e13fa24d98b075" @@ -9617,13 +7953,6 @@ winston@0.8.x: pkginfo "0.3.x" stack-trace "0.0.x" -with@^5.0.0: - version "5.1.1" - resolved "https://registry.yarnpkg.com/with/-/with-5.1.1.tgz#fa4daa92daf32c4ea94ed453c81f04686b575dfe" - dependencies: - acorn "^3.1.0" - acorn-globals "^3.0.0" - wordwrap@0.0.2: version "0.0.2" resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f" @@ -9666,12 +7995,6 @@ wrap-ansi@^2.0.0: string-width "^1.0.1" strip-ansi "^3.0.1" -wrap-fn@^0.1.0: - version "0.1.5" - resolved "https://registry.yarnpkg.com/wrap-fn/-/wrap-fn-0.1.5.tgz#f21b6e41016ff4a7e31720dbc63a09016bdf9845" - dependencies: - co "3.1.0" - wrappy@1: version "1.0.2" resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" @@ -9682,17 +8005,6 @@ write@^0.2.1: dependencies: mkdirp "^0.5.1" -ws@1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.1.tgz#082ddb6c641e85d4bb451f03d52f06eabdb1f018" - dependencies: - options ">=0.0.5" - ultron "1.0.x" - -wtf-8@1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/wtf-8/-/wtf-8-1.0.0.tgz#392d8ba2d0f1c34d1ee2d630f15d0efb68e1048a" - xdg-basedir@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-1.0.1.tgz#14ff8f63a4fdbcb05d5b6eea22b36f3033b9f04e" @@ -9703,15 +8015,11 @@ xml-name-validator@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-2.0.1.tgz#4d8b8f1eccd3419aa362061becef515e1e559635" -xmlhttprequest-ssl@1.5.3: - version "1.5.3" - resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.3.tgz#185a888c04eca46c3e4070d99f7b49de3528992d" - "xtend@>=4.0.0 <4.1.0-0", xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af" -y18n@^3.2.0, y18n@^3.2.1: +y18n@^3.2.1: version "3.2.1" resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41" @@ -9726,48 +8034,12 @@ yargs-parser@^2.4.1: camelcase "^3.0.0" lodash.assign "^4.0.6" -yargs-parser@^4.1.0: +yargs-parser@^4.2.0: version "4.2.1" resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-4.2.1.tgz#29cceac0dc4f03c6c87b4a9f217dd18c9f74871c" dependencies: camelcase "^3.0.0" -yargs-parser@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.0.tgz#275ecf0d7ffe05c77e64e7c86e4cd94bf0e1228a" - dependencies: - camelcase "^3.0.0" - -yargs@3.29.0: - version "3.29.0" - resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.29.0.tgz#1aab9660eae79d8b8f675bcaeeab6ee34c2cf69c" - dependencies: - camelcase "^1.2.1" - cliui "^3.0.3" - decamelize "^1.0.0" - os-locale "^1.4.0" - window-size "^0.1.2" - y18n "^3.2.0" - -yargs@6.4.0, yargs@^6.3.0: - version "6.4.0" - resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.4.0.tgz#816e1a866d5598ccf34e5596ddce22d92da490d4" - dependencies: - camelcase "^3.0.0" - cliui "^3.2.0" - decamelize "^1.1.1" - get-caller-file "^1.0.1" - os-locale "^1.4.0" - read-pkg-up "^1.0.1" - require-directory "^2.1.1" - require-main-filename "^1.0.1" - set-blocking "^2.0.0" - string-width "^1.0.2" - which-module "^1.0.0" - window-size "^0.2.0" - y18n "^3.2.1" - yargs-parser "^4.1.0" - yargs@^4.7.1: version "4.8.1" resolved "https://registry.yarnpkg.com/yargs/-/yargs-4.8.1.tgz#c0c42924ca4aaa6b0e6da1739dfb216439f9ddc0" @@ -9787,9 +8059,9 @@ yargs@^4.7.1: y18n "^3.2.1" yargs-parser "^2.4.1" -yargs@^7.0.1: - version "7.0.2" - resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.0.2.tgz#115b97df1321823e8b8648e8968c782521221f67" +yargs@^6.3.0: + version "6.6.0" + resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208" dependencies: camelcase "^3.0.0" cliui "^3.2.0" @@ -9803,7 +8075,7 @@ yargs@^7.0.1: string-width "^1.0.2" which-module "^1.0.0" y18n "^3.2.1" - yargs-parser "^5.0.0" + yargs-parser "^4.2.0" yargs@~3.10.0: version "3.10.0" @@ -9814,10 +8086,6 @@ yargs@~3.10.0: decamelize "^1.0.0" window-size "0.1.0" -yeast@0.1.2: - version "0.1.2" - resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419" - zip-stream@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-1.1.0.tgz#2ad479fffc168e05a888e8c348ff6813b3f13733"