Move all new docs to docs/ subfolder
This commit is contained in:
Pixelastic
parent
a15ac23cbc
commit
2a2b82fb6c
378 changed files with 652 additions and 22432 deletions
13
.babelrc
13
.babelrc
|
|
@ -1,15 +1,18 @@
|
|||
{
|
||||
"presets": [
|
||||
["env", {
|
||||
"targets": {
|
||||
"browsers": ["last 2 versions", "ie >= 9"]
|
||||
[
|
||||
"env",
|
||||
{
|
||||
"targets": {
|
||||
"browsers": ["last 2 versions", "ie >= 9"]
|
||||
}
|
||||
}
|
||||
}],
|
||||
],
|
||||
"stage-3"
|
||||
],
|
||||
"env": {
|
||||
"test": {
|
||||
"plugins": ["babel-plugin-rewire"]
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
coverage/
|
||||
dist/
|
||||
docs/
|
||||
docs/dist
|
||||
dist-es5-module/
|
||||
|
|
|
|||
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -10,3 +10,4 @@ docs/build
|
|||
docs/.sass-cache/
|
||||
dist-es5-module/
|
||||
yarn.lock
|
||||
tmp
|
||||
|
|
|
|||
|
|
@ -1,79 +0,0 @@
|
|||
---
|
||||
title: Customize my DocSearch
|
||||
---
|
||||
|
||||
## What content do we recommend to index?
|
||||
|
||||
### Code blocks
|
||||
|
||||
We **do not recommend** indexing **code tags** since code blocks are most likely
|
||||
very similar and redundant from one page to another.
|
||||
You can exclude code blocks by adding their matching selectors to `selectors_exclude`.
|
||||
|
||||
A good practice would be to emphasize the meaningful underlying part of it
|
||||
thanks to a dedicated class, which you will want to add to the `text` selector
|
||||
in your configuration file.
|
||||
|
||||
For example, in this code snippet, you can exclude the code but the parameters of the function:
|
||||
```
|
||||
<code>
|
||||
function(<toIndex>something useful to search for</toIndex>)
|
||||
...
|
||||
</code>
|
||||
```
|
||||
|
||||
### Table of contents
|
||||
|
||||
The elements of the table of contents only *target* but do not provide content.
|
||||
They are merely a step on the way to reaching relevant content. As a result, they are
|
||||
almost always in a different place from the payload. This is why we consider the
|
||||
table of contents an obstacle for DocSearch to find the coveted information.
|
||||
|
||||
We therefore **do not recommend** indexing the elements of the table of contents; their matching
|
||||
selectors should be added to `selectors_exclude`.
|
||||
|
||||
## How are my DocSearch records ranked?
|
||||
|
||||
DocSearch empowers the Algolia ranking strategy. The formula is completely
|
||||
based on [the tie-breaking approach](https://www.algolia.com/doc/guides/ranking/ranking-formula/#tie-breaking-approach).
|
||||
|
||||
The special feature of DocSearch's ranking resides in [the custom ranking](https://www.algolia.com/doc/guides/ranking/custom-ranking/):
|
||||
|
||||
We have defined 3 main weight indicators for every record. These values are
|
||||
ordered by importance following the tie-breaking approach:
|
||||
1. `page_rank`: this value, equal to `0` by default, can be set from the
|
||||
`start_urls` object. It can be customized in order to boost or restrain some
|
||||
records depending on **their webpage's URL**. It will need to match a **specific
|
||||
regular expression pattern**.
|
||||
|
||||
**Example:**
|
||||
```json
|
||||
{
|
||||
"index_name": "example",
|
||||
"start_urls": [
|
||||
{
|
||||
"url": "http://example.com/docs/api/v1\\.[0-9]",
|
||||
"page_rank": 1
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
2. `level`: this value depends on the `level` of the record. A record's level is
|
||||
its **deepest level attribute not null**. `text` records have a weight of 0.
|
||||
3. `position`: This value is the position of the matching element within every
|
||||
picked up element along the original HTML flow. The **sooner** the record appears,
|
||||
the **higher** it will be ranked.
|
||||
|
||||
You can override the way these elements are impacting the search thanks to `custom_settings`.
|
||||
|
||||
**Example:**
|
||||
|
||||
```json
|
||||
"custom_settings": {
|
||||
"customRanking": [
|
||||
"asc(weight.position)",
|
||||
"desc(weight.page_rank)",
|
||||
"desc(weight.level)"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
|
@ -1,422 +0,0 @@
|
|||
---
|
||||
layout: two-columns
|
||||
title: Make the most of your configuration
|
||||
---
|
||||
|
||||
## Introduction
|
||||
|
||||
The DocSearch scraper will use a configuration file specifying:
|
||||
- the Algolia index name that will store the records resulting from the crawling
|
||||
- the URLs it needs to crawl
|
||||
- the URLs it shouldn't crawl
|
||||
- the (hierarchical) CSS selectors to use to extract the relevant content from your webpages
|
||||
- the CSS selectors to skip
|
||||
- An optional sitemap URL that will be crawled and then scraped
|
||||
- additional options you might provide to fine-tune the scraping
|
||||
|
||||
## How it works
|
||||
|
||||
Once you run the DocSearch scraper on a specific configuration, it will:
|
||||
- crawl all the URLs you specified (from the `start_urls` or the `sitemap`)
|
||||
- follow all the hyperlinks mentioned in the page, and continue the crawling there
|
||||
- stop the crawling as soon as you've reached a URL that is not specified in your configuration or affiliated to a start url
|
||||
- extract the content of every single crawled page following the logic you defined using the CSS selectors
|
||||
- push the resulting records to the Algolia index you configured
|
||||
|
||||
## Configuration format
|
||||
|
||||
A configuration file looks like:
|
||||
|
||||
```json
|
||||
{
|
||||
"index_name": "stripe",
|
||||
"start_urls": [
|
||||
"https://stripe.com/docs"
|
||||
],
|
||||
"stop_urls": [
|
||||
"https://stripe.com/docs/api"
|
||||
],
|
||||
"selectors": {
|
||||
"lvl0": "#content header h1",
|
||||
"lvl1": "#content article h1",
|
||||
"lvl2": "#content section h3",
|
||||
"lvl3": "#content section h4",
|
||||
"lvl4": "#content section h5",
|
||||
"lvl5": "#content section h6",
|
||||
"text": "#content header p,#content section p,#content section ol"
|
||||
},
|
||||
"selectors_exclude": [
|
||||
".method-list",
|
||||
"aside.note"
|
||||
],
|
||||
// additional options
|
||||
[...]
|
||||
}
|
||||
```
|
||||
|
||||
It must be **a valid JSON file**
|
||||
|
||||
## DocSearch options
|
||||
|
||||
### `index_name` _Mandatory_
|
||||
|
||||
Name of the Algolia index where all the data will be pushed.
|
||||
|
||||
**On our own infrastructure, this name must be equal to the configuration file name**
|
||||
|
||||
We mostly attribute it on our own regarding plenty of underlying factors. The `apiKey` that we provide is generated with a restriction on the `index_name`. Changing the `index_name` would require to ask for a new key. Thus if you want to **change the name**, please **submit a new configuration**, we will generate a new key accordingly.
|
||||
|
||||
### `start_urls` _Mandatory_
|
||||
You can pass either a string or an array of urls. The crawler will go to each
|
||||
page in order, following every link it finds on the page. It will only stop if
|
||||
the domain is outside of the `allowed_domains` or if the link is blacklisted in
|
||||
`stop_urls`.
|
||||
|
||||
Note that it currently does not follow *301* redirects.
|
||||
|
||||
This parameter also behaves as a [regular expression](https://en.wikipedia.org/wiki/Regular_expression). If you don't use a sitemap, you must define at least one reachable URL (HTTP 20x). Otherwise the scraping will fail.
|
||||
|
||||
You can build a more advanced URL. You will need to use a JSON object with a `variables` attribute. This attribute is an array of variables that will be injected into the URLs:
|
||||
|
||||
**Example:**
|
||||
```json
|
||||
{
|
||||
"url": "http://example.com/docs/(?P<lang>.*?)/(?P<version>.*?)/",
|
||||
"variables": {
|
||||
"version": [
|
||||
"latest",
|
||||
"3.3",
|
||||
[...]
|
||||
],
|
||||
"lang": [
|
||||
"en",
|
||||
"fr",
|
||||
[...]
|
||||
]
|
||||
}
|
||||
```
|
||||
The whole pattern `(?P<version>.*?)` will be replaced by the value assigned in the related key `version`.
|
||||
|
||||
The variable name is not fixed. Please note that those variables will behave as
|
||||
[`attributesForFaceting`](https://www.algolia.com/doc/api-reference/api-parameters/attributesForFaceting/) which may help you [restrain the scope of the search from the snippet](https://www.algolia.com/doc/guides/searching/faceting/).
|
||||
|
||||
Thus you can limit the scope of the search to the records from the pages encompassed by `http://example.com/docs/en/latest/*` thanks to the following snippet:
|
||||
```js
|
||||
<script type="text/javascript">
|
||||
docsearch({
|
||||
apiKey: ${apiKey},
|
||||
indexName: ${indexName},
|
||||
inputSelector: '#search'
|
||||
algoliaOptions: { 'facetFilters': ["lang:en", "version:latest"] },
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
In order to promote some pages, you can set the `page_rank` attribute (default: `0`, can be a positive or negative integer).
|
||||
|
||||
Finally, If your website contains different parts and layouts, you can define specific `selectors` for each part and apply them using `selectors_key`:
|
||||
|
||||
**Example:**
|
||||
```json
|
||||
{
|
||||
"index_name": "example",
|
||||
"start_urls": [
|
||||
"http://example.com/docs/latest/",
|
||||
{
|
||||
"url": "http://example.com/docs/concepts/",
|
||||
"page_rank": 1,
|
||||
"selectors_key": "concepts"
|
||||
}
|
||||
],
|
||||
"selectors": {
|
||||
"default": {
|
||||
"lvl0": ".docSearch-content h1",
|
||||
"lvl1": ".docSearch-content h2",
|
||||
"lvl2": ".docSearch-content h3",
|
||||
"lvl3": ".docSearch-content h4",
|
||||
"lvl4": ".docSearch-content h5",
|
||||
"text": ".docSearch-content p, .docSearch-content li"
|
||||
},
|
||||
"concepts": {
|
||||
"lvl0": ".docSearch-header h2",
|
||||
"lvl1": ".docSearch-content h1",
|
||||
"lvl2": ".docSearch-content h2",
|
||||
"lvl3": ".docSearch-content h3",
|
||||
"lvl4": ".docSearch-content h5",
|
||||
"text": ".docSearch-content p"
|
||||
}
|
||||
}
|
||||
[...]
|
||||
}
|
||||
```
|
||||
|
||||
#### `start_urls.tags`
|
||||
|
||||
Tags will be apllied to every record from the matchin matched pages, i.e., its URL is matchin the `url`. These `tags` will [be processed as `attributesForFaceting`](https://www.algolia.com/doc/api-reference/api-parameters/attributesForFaceting/) . If you want further detail, [check the original documentation](https://www.algolia.com/doc/api-reference/api-parameters/facetFilters/).
|
||||
We do recommend to use `tags` if you want [to refine the scope of your search](https://www.algolia.com/doc/guides/searching/faceting/#faceting-overview).
|
||||
|
||||
From your search UI, you will need to use the following input:
|
||||
```js
|
||||
algoliaOptions: { 'facetFilters': ["tags:$VALUE"] },
|
||||
```
|
||||
|
||||
Default not used. Must be an array.
|
||||
|
||||
|
||||
**Example:**
|
||||
|
||||
From the config:
|
||||
```json
|
||||
"start_urls": [
|
||||
{
|
||||
"url": "http://example.com/docs/concepts/",
|
||||
"selectors_key": "concepts"
|
||||
}
|
||||
```
|
||||
|
||||
From the search UI:
|
||||
```js
|
||||
algoliaOptions: { 'facetFilters': ["tags:concepts"] },
|
||||
```
|
||||
### `scrape_start_urls`
|
||||
|
||||
This boolean let you decide if you want to extract the content of the starting pages.
|
||||
|
||||
Default is `false`
|
||||
|
||||
### `stop_urls` _Optional_
|
||||
|
||||
This array can be used to blacklist URLs. The crawler will stop on these and
|
||||
will not consider their content. Likewise, if a link within a crawled webpage
|
||||
targets such pages, the crawler will not follow the link.
|
||||
You can use a regular expression as well as plain urls.
|
||||
|
||||
Note: It is sometimes needed to add `http://www.example.com/index.html` pages to
|
||||
the `stop_urls` list if you set `http://www.example.com` as a `start_urls`, to
|
||||
avoid duplicated content.
|
||||
|
||||
### `selectors` _Mandatory_
|
||||
|
||||
This object contains all the CSS selectors that will be used to create the
|
||||
record hierarchy. It can contains up to 6 levels (`lvl0`, `lvl1`, `lvl2`, `lvl3`, `lvl4`,
|
||||
`lvl5`) and `text`.
|
||||
|
||||
A default config would be to target the page `title` or `h1` as `lvl0`, the `h2`
|
||||
as `lvl1` and `h3` as `lvl2`. `text` is usually any `p` of text.
|
||||
|
||||
We recommend making use of at least the three first levels for better relevancy.
|
||||
|
||||
### Global selectors _Optional_
|
||||
|
||||
It's possible to make a selector global which means that all records from the page will have
|
||||
this value. This is useful when you have a title that is in the right sidebar and
|
||||
the sidebar is placed after the content in the DOM.
|
||||
|
||||
```json
|
||||
"selectors": {
|
||||
"lvl0": {
|
||||
"selector": "#content header h1",
|
||||
"global": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Xpath selector _Optional_
|
||||
|
||||
By default, `selectors` are considered to be [css selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) but you can specify that a selector is an [XPath one](https://developer.mozilla.org/en-US/docs/Web/XPath).
|
||||
This is useful when you want to do more complex selection like selecting the parent of a target.
|
||||
|
||||
```json
|
||||
"selectors": {
|
||||
"lvl0": {
|
||||
"selector": "//li[@class=\"chapter active done\"]/../../a",
|
||||
"type": "xpath"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Default value _Optional_
|
||||
|
||||
You have the possibility to add a default value which will be used if the selector doesn't match anything.
|
||||
|
||||
```json
|
||||
"selectors": {
|
||||
"lvl0": {
|
||||
"selector": "#content article h1",
|
||||
"default_value": "Documentation"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### `selectors_exclude` _Optional_
|
||||
|
||||
By default, the `selectors` search is applied page-wide. If there are some parts
|
||||
of the page that you do not want to include (e.g. a table of content, a sidebar or a footer),
|
||||
you can add them to the `selectors_exclude` key.
|
||||
|
||||
### Sitemap crawling _Optional_
|
||||
|
||||
Our crawler offers you to crawl a site by discovering the URLs using Sitemaps. Thus, you can define the direct URL(s) to your sitemap XML file, `sitemap_urls`. In order to parse it, you should establish regex(s), `sitemap_urls_regex`, which will match the URLs to crawl. Otherwise it will use the `start_urls` pattern in order to match the expected URLs.
|
||||
|
||||
For sites that use Sitemap index files that point to other sitemap files, all those sitemaps will be followed.
|
||||
|
||||
### `sitemap_urls` _Optional_
|
||||
A list of urls pointing to the sitemaps (or sitemap index) you want to crawl. Must be provided if you want docsearch to discover your via sitemaps.
|
||||
|
||||
### `sitemap_urls_regexs` _Optional_
|
||||
A list of regular expressions that will be applied to each URL from the sitemap. If one of the patterns match a URL, this link will be scraped. If no regular expression is defined, the start_urls will be taken as a pattern.
|
||||
|
||||
### `force_sitemap_urls_crawling` _Optional_
|
||||
Specifies if the matched URLs should not respect the same rules as the crawled hyperlink. If set to true, each URL will be scraped even if it does comply with the `start_urls` or `stop_urls`. Default is `force_sitemap_urls_crawling` set to `false`
|
||||
|
||||
**Example:**
|
||||
```json
|
||||
{
|
||||
[...]
|
||||
"sitemap_urls": [
|
||||
"https://www.mySite.com/sitemap.xml"
|
||||
],
|
||||
"sitemap_urls_regexs": [
|
||||
"/doc/"
|
||||
],
|
||||
"force_sitemap_urls_crawling": true,
|
||||
[...]
|
||||
}
|
||||
```
|
||||
Given this configuration, every webpage of the sitemap whose URL contains '/doc/' will be scraped even if they don't comply with `start_urls` or `stop_urls`.
|
||||
|
||||
### `allowed_domains` _Optional_
|
||||
|
||||
You can pass an array of strings. This is the whitelist of
|
||||
domains the crawler will browse. If a link targets a page that is not in the
|
||||
whitelist, the crawler will not follow it.
|
||||
|
||||
Default is the domain of the first elements in the `start_urls`.
|
||||
|
||||
### `min_indexed_level` _Optional_
|
||||
|
||||
Lets you define the minimum level at which you want a record to be indexed. For
|
||||
example, with a `min_indexed_level: 1`, you will only index records that have at
|
||||
least a `lvl0` and a `lvl1` field.
|
||||
|
||||
This is especially useful when the documentation is split into several pages and
|
||||
all pages duplicate the main title or introduction (see [this issue][https://github.com/algolia/docsearch-configs/issues/83]).
|
||||
With `min_indexed_level`, you can ignore the duplicated title.
|
||||
|
||||
Default is `0`
|
||||
|
||||
### `only_content_level` _Optional_
|
||||
|
||||
When `only_content_level` is set to `true`, we only index builded records which match the `text` selectors. Every other record will be skipped. This parameter is more flexible than `min_indexed_level`. Once `only_content_level` is used, `min_indexed_level` becomes pointless.
|
||||
|
||||
Default is `false`
|
||||
|
||||
### `js_render` _Optional_
|
||||
|
||||
The HTML code that we crawl is sometimes generated using Javascript. In those
|
||||
cases, the `js_render` option must be set to `true`. It will enable our
|
||||
internal proxy (Selenium) to render pages before crawling them.
|
||||
|
||||
We highly recommend avoiding client-side rendering. It mainly decreases [the performance of your website](https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8).
|
||||
|
||||
Default is `false`
|
||||
|
||||
### `js_wait` _Optional_
|
||||
|
||||
When `js_render` is set to `true`, the `js_wait` parameter lets you change the default waiting time (in seconds) to render the
|
||||
webpage with the Selenium emulator.
|
||||
|
||||
Default is `0`s
|
||||
|
||||
### `use_anchors` _Optional_
|
||||
|
||||
The `use_anchors` needs to be set to True for a javascript doc when the hash is
|
||||
used to route the query. Internally, this will disable the canonicalize feature that
|
||||
is removing the hash from the url.
|
||||
|
||||
This parameter is optional and is set to `false` by default.
|
||||
|
||||
### `strip_chars` _Optional_
|
||||
|
||||
A list of characters to remove from the indexed text.
|
||||
|
||||
You can also override the default `strip_chars` per level
|
||||
|
||||
```json
|
||||
"selectors": {
|
||||
"lvl0": {
|
||||
"selector": "#content article h1",
|
||||
"strip_chars": " .,;:"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### `nb_hits` _Mandatory_
|
||||
|
||||
Each time the configuration is locally run, this attribute is set to the number of records indexed.
|
||||
|
||||
This attribute is used for purposed monitoring. We keep a track of its evolution in order to detect main changes.
|
||||
Default is `0`.
|
||||
|
||||
### `custom_settings` _Optional_
|
||||
|
||||
This object is [any custom Algolia settings](https://www.algolia.com/doc/api-client/settings/#the-scope-of-settings-and-parameters) you would like to pass to the index
|
||||
settings. You will [look under the hood of algolia](https://www.algolia.com/doc/).
|
||||
|
||||
### `nb_hits_max` _Optional_
|
||||
|
||||
The number of maximum records allowed for the whole indexing. If the scrapping is bigger, it will fail.
|
||||
|
||||
This value is not meant to be set from anyone except DocSearch maintainer.
|
||||
|
||||
Default is `600 000` (arbitrary, might change)
|
||||
|
||||
## Possible issues
|
||||
|
||||
### Duplicated content
|
||||
|
||||
It could happen that the crawled website returned duplicated data. Most of the time, this is because the crawled pages got the same urls with two different schemes.
|
||||
|
||||
If we have URLs like `http://website.com/page` and `http://website.com/page/` (notice the second one ends with `/`), the scraper will consider them as different. This can be fixed by adding a regex to the `stop_urls` in the `config.json`:
|
||||
|
||||
```json
|
||||
"stop_urls": [
|
||||
"/$"
|
||||
]
|
||||
```
|
||||
|
||||
In this attribute, you can also list the pages you want to skip:
|
||||
|
||||
```json
|
||||
"stop_urls": [
|
||||
"http://website.com/page/"
|
||||
]
|
||||
```
|
||||
|
||||
### Anchors
|
||||
|
||||
The scraper will also consider pages with anchors as different pages. Make sure you remove any hash sign from the urls that you put in the stop & start URLs:
|
||||
|
||||
*Bad:*
|
||||
|
||||
```json
|
||||
"stop_urls": [
|
||||
"http://website.com/page/#foo"
|
||||
]
|
||||
```
|
||||
|
||||
*Good:*
|
||||
|
||||
```json
|
||||
"stop_urls": [
|
||||
"/$"
|
||||
]
|
||||
```
|
||||
|
||||
Or :
|
||||
|
||||
```json
|
||||
"stop_urls": [
|
||||
"http://website.com/page/"
|
||||
]
|
||||
```
|
||||
|
|
@ -1,175 +0,0 @@
|
|||
---
|
||||
layout: two-columns
|
||||
title: DocSearch on your own infrastructure
|
||||
---
|
||||
|
||||
In the regular use of DocSearch, you don't have to bother, we **handle the whole stack**.
|
||||
|
||||
In some specific use cases, you may want to look under the hood and DIY.
|
||||
This is welcome with DocSearch since every tool is open source.
|
||||
DocSearch is composed of 3 different projects:
|
||||
* [The front-end of DocSearch](https://github.com/algolia/docsearch)
|
||||
* [The scraper](https://github.com/algolia/docsearch-scraper), which browses & indexes web pages
|
||||
* [The configuration repo](https://github.com/algolia/docsearch-configs) for the scraper.
|
||||
|
||||
## The DocSearch backend: [our scraper](https://github.com/algolia/docsearch-scraper):
|
||||
|
||||
This project is a collection of submodules, each one in its own directory:
|
||||
* cli: A command line tool to manage DocSearch. Run `./docsearch` and follow the steps
|
||||
* deployer: Tool used by Algolia to deploy the configuration in our Apache Mesos infrastructure
|
||||
* doctor: A monitoring/repair tool to check if the indices built by the scraper are in good shape
|
||||
* playground: An HTML page to easily test DocSearch indices
|
||||
* scraper: The core of the scraper. It reads the configuration file, fetches the web pages and indexes them in Algolia.
|
||||
|
||||
## Install
|
||||
|
||||
The DocSearch scraper is based on [Scrapy](https://scrapy.org), a famous python-based web scraper. Because it might need some JavaScript to render the pages it crawls, the scraper is also depending on [selenium](http://www.seleniumhq.org).
|
||||
|
||||
To ease the setup process, a Docker container is provided to help you run the scraper.
|
||||
|
||||
### Environment:
|
||||
|
||||
- Install `python` & `pip`
|
||||
- `brew install python # will install pip`
|
||||
- `apt-get install python`
|
||||
- Or any other way
|
||||
- `git clone git@github.com:algolia/docsearch-scraper.git`
|
||||
- `cd docsearch-scraper`
|
||||
- `pip install --user -r requirements.txt`
|
||||
|
||||
### With docker:
|
||||
|
||||
- Build the underlying Docker image: `./docsearch docker:build`
|
||||
|
||||
## Configure DocSearch
|
||||
|
||||
You need to create an [Algolia account](https://www.algolia.com/users/sign_up) to get the `APPLICATION_ID` and (admin) `API_KEY` credentials the scraper will use to create the underlying indices.
|
||||
|
||||
Create a file named `.env` file at the root of the project containing the following keys:
|
||||
|
||||
```
|
||||
APPLICATION_ID=
|
||||
API_KEY=
|
||||
```
|
||||
|
||||
And run the CLI to see the available commands:
|
||||
|
||||
```sh
|
||||
$ ./docsearch
|
||||
Docsearch CLI
|
||||
|
||||
Usage:
|
||||
./docsearch command [options] [arguments]
|
||||
|
||||
Options:
|
||||
--help Display help message
|
||||
|
||||
Available commands:
|
||||
bootstrap Bootstrap a docsearch config
|
||||
run Run a config
|
||||
playground Launch the playground
|
||||
docker
|
||||
docker:build Build the scraper images (dev, prod, test)
|
||||
docker:run Run a config using docker
|
||||
test Run tests
|
||||
```
|
||||
|
||||
## Use DocSearch
|
||||
|
||||
### Create a config
|
||||
|
||||
To use DocSearch, the first thing you need is to create a crawler config. For more details about configs, check out [our configuration repo](https://github.com/algolia/docsearch-configs), you'll have a list of options you can use and a lot of live and working examples.
|
||||
|
||||
### Crawl the website
|
||||
|
||||
#### With docker:
|
||||
|
||||
```sh
|
||||
$ ./docsearch docker:run /path/to/your/config
|
||||
```
|
||||
|
||||
#### Without docker
|
||||
|
||||
```sh
|
||||
$ ./docsearch run /path/to/your/config
|
||||
```
|
||||
|
||||
### Try it with our playground
|
||||
|
||||
You can open the included **Playground** to test your DocSearch index.
|
||||
|
||||
```sh
|
||||
$ ./docsearch playground
|
||||
```
|
||||
|
||||
Enter your credentials and the index name mentioned in the crawler config file, and try the search!
|
||||
|
||||
### Integrate DocSearch to your website
|
||||
|
||||
To add the DocSearch dropdown menu to your website, add the following snippet to your website:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
var search = docsearch({
|
||||
apiKey: '<API_KEY>', // use a SEARCH-ONLY api key here
|
||||
indexName: '<INDEX_NAME>',
|
||||
inputSelector: '<YOUR_INPUT_DOM_SELECTOR>',
|
||||
debug: false // set to `true` if you want to inspect the dropdown menu's CSS
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
And you are good to go!
|
||||
|
||||
### Specify your own appId
|
||||
|
||||
If you are running the scraper on your own, you will need to tell the widget about your Algolia application ID via the `appId` parameter.
|
||||
|
||||
```javascript
|
||||
var search = docsearch({
|
||||
appId: '<APP_ID>', // the application ID containing your DocSearch data
|
||||
... // other parameters as above
|
||||
});
|
||||
```
|
||||
|
||||
If Algolia is handling the crawling of your site, you do not need to specify `appId`.
|
||||
|
||||
## Admin task
|
||||
|
||||
If you are an Algolia employee and want to manage a DocSearch account,
|
||||
you'll need to add the following variables in your `.env` file:
|
||||
|
||||
```
|
||||
WEBSITE_USERNAME=
|
||||
WEBSITE_PASSWORD=
|
||||
SLACK_HOOK=
|
||||
SCHEDULER_USERNAME=
|
||||
SCHEDULER_PASSWORD=
|
||||
DEPLOY_KEY=
|
||||
```
|
||||
|
||||
The cli will then have more commands for you to run.
|
||||
|
||||
For some actions like deploying you might need to use different credentials than the ones in the _.env_ file.
|
||||
To do this you need to override them when running the cli tool:
|
||||
|
||||
```sh
|
||||
APPLICATION_ID=<your APPLICATION_ID> API_KEY=<your API_KEY> ./docsearch deploy:configs
|
||||
```
|
||||
|
||||
## Run the tests
|
||||
|
||||
### With docker:
|
||||
|
||||
```sh
|
||||
$ ./docsearch test
|
||||
```
|
||||
|
||||
### Without docker:
|
||||
|
||||
```sh
|
||||
$ pip install pytest
|
||||
$ API_KEY='test' APPLICATION_ID='test' python -m pytest
|
||||
```
|
||||
5
docs/.babelrc
Normal file
5
docs/.babelrc
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"presets": [["@babel/preset-env", { "targets": { "node": 6 } }]],
|
||||
"plugins": ["@babel/plugin-proposal-object-rest-spread"],
|
||||
"comments": false
|
||||
}
|
||||
39
docs/Gemfile
39
docs/Gemfile
|
|
@ -1,39 +0,0 @@
|
|||
# If you do not have OpenSSL installed, change
|
||||
# the following line to use 'http://'
|
||||
source 'https://rubygems.org'
|
||||
|
||||
# For faster file watcher updates on Windows:
|
||||
gem 'wdm', '~> 0.1.0', platforms: [:mswin, :mingw]
|
||||
|
||||
# Windows does not come with time zone data
|
||||
gem 'tzinfo-data', platforms: [:mswin, :mingw, :jruby]
|
||||
|
||||
gem 'rake'
|
||||
|
||||
# Middleman Gems
|
||||
gem 'middleman', '>= 4.0.0'
|
||||
gem 'middleman-livereload'
|
||||
gem 'middleman-syntax'
|
||||
gem 'middleman-autoprefixer'
|
||||
gem 'middleman-s3_sync', github: 'fredjean/middleman-s3_sync', ref: '8c4e57a'
|
||||
gem 'middleman-minify-html'
|
||||
gem 'sprockets', '4.0.0.beta4'
|
||||
gem 'middleman-sprockets'
|
||||
gem 'sprockets-es6'
|
||||
gem 'redcarpet', '>= 3.3.4'
|
||||
gem 'nokogiri'
|
||||
gem 'sassc'
|
||||
gem 'kramdown', '>= 1.12.0'
|
||||
gem 'pry-byebug'
|
||||
gem 'rb-readline'
|
||||
gem 'mime-types'
|
||||
gem 'highlight', :require => 'simplabs/highlight' # TODO: Replace with rouge
|
||||
gem 'htmlentities'
|
||||
gem 'better_errors'
|
||||
gem 'binding_of_caller'
|
||||
gem 'octokit'
|
||||
gem 'google-api-client', '0.8.6'
|
||||
gem 'algoliasearch'
|
||||
gem 'middleman-vcs-time'
|
||||
gem 'hashie', '3.4.6'
|
||||
gem 'haml', '4.0.7'
|
||||
|
|
@ -1,293 +0,0 @@
|
|||
GIT
|
||||
remote: git://github.com/fredjean/middleman-s3_sync.git
|
||||
revision: 8c4e57a67048a3bafa4529c8f46184d33996e52b
|
||||
ref: 8c4e57a
|
||||
specs:
|
||||
middleman-s3_sync (4.0.3)
|
||||
ansi (~> 1.5.0)
|
||||
fog-aws (>= 0.1.1)
|
||||
map
|
||||
middleman-cli
|
||||
middleman-core (>= 4.0.0)
|
||||
mime-types (~> 3.1)
|
||||
parallel
|
||||
ruby-progressbar
|
||||
unf
|
||||
|
||||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
activesupport (5.0.6)
|
||||
concurrent-ruby (~> 1.0, >= 1.0.2)
|
||||
i18n (~> 0.7)
|
||||
minitest (~> 5.1)
|
||||
tzinfo (~> 1.1)
|
||||
addressable (2.5.2)
|
||||
public_suffix (>= 2.0.2, < 4.0)
|
||||
algoliasearch (1.16.0)
|
||||
httpclient (~> 2.8.3)
|
||||
json (>= 1.5.1)
|
||||
ansi (1.5.0)
|
||||
autoparse (0.3.3)
|
||||
addressable (>= 2.3.1)
|
||||
extlib (>= 0.9.15)
|
||||
multi_json (>= 1.0.0)
|
||||
autoprefixer-rails (7.1.5)
|
||||
execjs
|
||||
babel-source (5.8.35)
|
||||
babel-transpiler (0.7.0)
|
||||
babel-source (>= 4.0, < 6)
|
||||
execjs (~> 2.0)
|
||||
backports (3.9.1)
|
||||
better_errors (2.3.0)
|
||||
coderay (>= 1.0.0)
|
||||
erubi (>= 1.0.0)
|
||||
rack (>= 0.9.0)
|
||||
binding_of_caller (0.7.2)
|
||||
debug_inspector (>= 0.0.1)
|
||||
builder (3.2.3)
|
||||
byebug (9.1.0)
|
||||
coderay (1.1.2)
|
||||
coffee-script (2.4.1)
|
||||
coffee-script-source
|
||||
execjs
|
||||
coffee-script-source (1.12.2)
|
||||
compass-import-once (1.0.5)
|
||||
sass (>= 3.2, < 3.5)
|
||||
concurrent-ruby (1.0.5)
|
||||
contracts (0.13.0)
|
||||
debug_inspector (0.0.3)
|
||||
dotenv (2.2.1)
|
||||
em-websocket (0.5.1)
|
||||
eventmachine (>= 0.12.9)
|
||||
http_parser.rb (~> 0.6.0)
|
||||
erubi (1.6.1)
|
||||
erubis (2.7.0)
|
||||
eventmachine (1.2.5)
|
||||
excon (0.59.0)
|
||||
execjs (2.7.0)
|
||||
extlib (0.9.16)
|
||||
faraday (0.13.1)
|
||||
multipart-post (>= 1.2, < 3)
|
||||
fast_blank (1.0.0)
|
||||
fastimage (2.1.0)
|
||||
ffi (1.9.18)
|
||||
fog-aws (1.4.1)
|
||||
fog-core (~> 1.38)
|
||||
fog-json (~> 1.0)
|
||||
fog-xml (~> 0.1)
|
||||
ipaddress (~> 0.8)
|
||||
fog-core (1.45.0)
|
||||
builder
|
||||
excon (~> 0.58)
|
||||
formatador (~> 0.2)
|
||||
fog-json (1.0.2)
|
||||
fog-core (~> 1.0)
|
||||
multi_json (~> 1.10)
|
||||
fog-xml (0.1.3)
|
||||
fog-core
|
||||
nokogiri (>= 1.5.11, < 2.0.0)
|
||||
formatador (0.2.5)
|
||||
google-api-client (0.8.6)
|
||||
activesupport (>= 3.2)
|
||||
addressable (~> 2.3)
|
||||
autoparse (~> 0.3)
|
||||
extlib (~> 0.9)
|
||||
faraday (~> 0.9)
|
||||
googleauth (~> 0.3)
|
||||
launchy (~> 2.4)
|
||||
multi_json (~> 1.10)
|
||||
retriable (~> 1.4)
|
||||
signet (~> 0.6)
|
||||
googleauth (0.5.3)
|
||||
faraday (~> 0.12)
|
||||
jwt (~> 1.4)
|
||||
logging (~> 2.0)
|
||||
memoist (~> 0.12)
|
||||
multi_json (~> 1.11)
|
||||
os (~> 0.9)
|
||||
signet (~> 0.7)
|
||||
haml (4.0.7)
|
||||
tilt
|
||||
hamster (3.0.0)
|
||||
concurrent-ruby (~> 1.0)
|
||||
hashie (3.4.6)
|
||||
highlight (2.0.0)
|
||||
htmlcompressor (0.2.0)
|
||||
htmlentities (4.3.4)
|
||||
http_parser.rb (0.6.0)
|
||||
httpclient (2.8.3)
|
||||
i18n (0.7.0)
|
||||
ipaddress (0.8.3)
|
||||
json (2.1.0)
|
||||
jwt (1.5.6)
|
||||
kramdown (1.15.0)
|
||||
launchy (2.4.3)
|
||||
addressable (~> 2.3)
|
||||
listen (3.0.8)
|
||||
rb-fsevent (~> 0.9, >= 0.9.4)
|
||||
rb-inotify (~> 0.9, >= 0.9.7)
|
||||
little-plugger (1.1.4)
|
||||
logging (2.2.2)
|
||||
little-plugger (~> 1.1)
|
||||
multi_json (~> 1.10)
|
||||
map (6.6.0)
|
||||
memoist (0.16.0)
|
||||
method_source (0.9.0)
|
||||
middleman (4.2.1)
|
||||
coffee-script (~> 2.2)
|
||||
compass-import-once (= 1.0.5)
|
||||
haml (>= 4.0.5)
|
||||
kramdown (~> 1.2)
|
||||
middleman-cli (= 4.2.1)
|
||||
middleman-core (= 4.2.1)
|
||||
sass (>= 3.4.0, < 4.0)
|
||||
middleman-autoprefixer (2.8.0)
|
||||
autoprefixer-rails (>= 7.0.1, < 8.0.0)
|
||||
middleman-core (>= 3.3.3)
|
||||
middleman-cli (4.2.1)
|
||||
thor (>= 0.17.0, < 2.0)
|
||||
middleman-core (4.2.1)
|
||||
activesupport (>= 4.2, < 5.1)
|
||||
addressable (~> 2.3)
|
||||
backports (~> 3.6)
|
||||
bundler (~> 1.1)
|
||||
contracts (~> 0.13.0)
|
||||
dotenv
|
||||
erubis
|
||||
execjs (~> 2.0)
|
||||
fast_blank
|
||||
fastimage (~> 2.0)
|
||||
hamster (~> 3.0)
|
||||
hashie (~> 3.4)
|
||||
i18n (~> 0.7.0)
|
||||
listen (~> 3.0.0)
|
||||
memoist (~> 0.14)
|
||||
padrino-helpers (~> 0.13.0)
|
||||
parallel
|
||||
rack (>= 1.4.5, < 3)
|
||||
sass (>= 3.4)
|
||||
servolux
|
||||
tilt (~> 2.0)
|
||||
uglifier (~> 3.0)
|
||||
middleman-livereload (3.4.6)
|
||||
em-websocket (~> 0.5.1)
|
||||
middleman-core (>= 3.3)
|
||||
rack-livereload (~> 0.3.15)
|
||||
middleman-minify-html (3.4.1)
|
||||
htmlcompressor (~> 0.2.0)
|
||||
middleman-core (>= 3.2)
|
||||
middleman-sprockets (4.1.1)
|
||||
middleman-core (~> 4.0)
|
||||
sprockets (>= 3.0)
|
||||
middleman-syntax (3.0.0)
|
||||
middleman-core (>= 3.2)
|
||||
rouge (~> 2.0)
|
||||
middleman-vcs-time (0.0.5)
|
||||
middleman-core (~> 4.0)
|
||||
mime-types (3.1)
|
||||
mime-types-data (~> 3.2015)
|
||||
mime-types-data (3.2016.0521)
|
||||
mini_portile2 (2.3.0)
|
||||
minitest (5.10.3)
|
||||
multi_json (1.12.2)
|
||||
multipart-post (2.0.0)
|
||||
nokogiri (1.8.1)
|
||||
mini_portile2 (~> 2.3.0)
|
||||
octokit (4.7.0)
|
||||
sawyer (~> 0.8.0, >= 0.5.3)
|
||||
os (0.9.6)
|
||||
padrino-helpers (0.13.3.4)
|
||||
i18n (~> 0.6, >= 0.6.7)
|
||||
padrino-support (= 0.13.3.4)
|
||||
tilt (>= 1.4.1, < 3)
|
||||
padrino-support (0.13.3.4)
|
||||
activesupport (>= 3.1)
|
||||
parallel (1.12.0)
|
||||
pry (0.11.1)
|
||||
coderay (~> 1.1.0)
|
||||
method_source (~> 0.9.0)
|
||||
pry-byebug (3.5.0)
|
||||
byebug (~> 9.1)
|
||||
pry (~> 0.10)
|
||||
public_suffix (3.0.0)
|
||||
rack (2.0.3)
|
||||
rack-livereload (0.3.16)
|
||||
rack
|
||||
rake (12.1.0)
|
||||
rb-fsevent (0.10.2)
|
||||
rb-inotify (0.9.10)
|
||||
ffi (>= 0.5.0, < 2)
|
||||
rb-readline (0.5.5)
|
||||
redcarpet (3.4.0)
|
||||
retriable (1.4.1)
|
||||
rouge (2.2.1)
|
||||
ruby-progressbar (1.9.0)
|
||||
sass (3.4.25)
|
||||
sassc (1.11.4)
|
||||
bundler
|
||||
ffi (~> 1.9.6)
|
||||
sass (>= 3.3.0)
|
||||
sawyer (0.8.1)
|
||||
addressable (>= 2.3.5, < 2.6)
|
||||
faraday (~> 0.8, < 1.0)
|
||||
servolux (0.13.0)
|
||||
signet (0.7.3)
|
||||
addressable (~> 2.3)
|
||||
faraday (~> 0.9)
|
||||
jwt (~> 1.5)
|
||||
multi_json (~> 1.10)
|
||||
sprockets (4.0.0.beta4)
|
||||
concurrent-ruby (~> 1.0)
|
||||
rack (> 1, < 3)
|
||||
sprockets-es6 (0.9.2)
|
||||
babel-source (>= 5.8.11)
|
||||
babel-transpiler
|
||||
sprockets (>= 3.0.0)
|
||||
thor (0.20.0)
|
||||
thread_safe (0.3.6)
|
||||
tilt (2.0.8)
|
||||
tzinfo (1.2.3)
|
||||
thread_safe (~> 0.1)
|
||||
uglifier (3.2.0)
|
||||
execjs (>= 0.3.0, < 3)
|
||||
unf (0.1.4)
|
||||
unf_ext
|
||||
unf_ext (0.0.7.4)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
|
||||
DEPENDENCIES
|
||||
algoliasearch
|
||||
better_errors
|
||||
binding_of_caller
|
||||
google-api-client (= 0.8.6)
|
||||
haml (= 4.0.7)
|
||||
hashie (= 3.4.6)
|
||||
highlight
|
||||
htmlentities
|
||||
kramdown (>= 1.12.0)
|
||||
middleman (>= 4.0.0)
|
||||
middleman-autoprefixer
|
||||
middleman-livereload
|
||||
middleman-minify-html
|
||||
middleman-s3_sync!
|
||||
middleman-sprockets
|
||||
middleman-syntax
|
||||
middleman-vcs-time
|
||||
mime-types
|
||||
nokogiri
|
||||
octokit
|
||||
pry-byebug
|
||||
rake
|
||||
rb-readline
|
||||
redcarpet (>= 3.3.4)
|
||||
sassc
|
||||
sprockets (= 4.0.0.beta4)
|
||||
sprockets-es6
|
||||
tzinfo-data
|
||||
wdm (~> 0.1.0)
|
||||
|
||||
BUNDLED WITH
|
||||
1.15.1
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
all: install
|
||||
bundle exec middleman server
|
||||
|
||||
install:
|
||||
bundle install
|
||||
|
||||
build:
|
||||
npm install
|
||||
rm -rf build
|
||||
bundle exec middleman build
|
||||
|
||||
.PHONY: build
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
require 'dotenv'
|
||||
require 'yaml'
|
||||
require_relative './lib/google_analytics_downloader.rb'
|
||||
|
||||
Dotenv.load('.env')
|
||||
|
||||
task :build do
|
||||
sh "STAGE=#{ENV['STAGE'] || 'beta'} bundle exec middleman build"
|
||||
end
|
||||
|
||||
task :s3_sync do
|
||||
sh "STAGE=#{ENV['STAGE'] || 'beta'} bundle exec middleman s3_sync"
|
||||
end
|
||||
|
||||
task :purge_cache do
|
||||
stage = ENV['STAGE'] || 'beta'
|
||||
# if stage == 'production'
|
||||
sh <<-SHELL
|
||||
curl -X DELETE "https://api.cloudflare.com/client/v4/zones/#{ENV['CLOUDFLARE_ZONE']}/purge_cache" \
|
||||
-H "X-Auth-Email: #{ENV['CLOUDFLARE_AUTH_EMAIL']}" \
|
||||
-H "X-Auth-Key: #{ENV['CLOUDFLARE_AUTH_KEY']}" \
|
||||
-H "Content-Type: application/json" \
|
||||
--data '{"tags":["algoliaweb-doc--#{stage}"]}'
|
||||
SHELL
|
||||
# else
|
||||
# puts "Not in production, not purging cache"
|
||||
# end
|
||||
end
|
||||
|
||||
task :deploy do
|
||||
Rake::Task[:build].invoke
|
||||
Rake::Task[:s3_sync].invoke
|
||||
Rake::Task[:purge_cache].invoke
|
||||
end
|
||||
|
||||
task :production do
|
||||
ENV['STAGE'] = 'production'
|
||||
end
|
||||
|
||||
task :beta do
|
||||
ENV['STAGE'] = 'beta'
|
||||
end
|
||||
|
||||
task :download_google_analytics_data do
|
||||
file = File.expand_path(File.join(__FILE__, '..', 'app_data', 'google_analytics.yml'))
|
||||
File.open(file, 'w') do |f|
|
||||
f << GoogleAnalyticsDownloader.fetch.to_yaml
|
||||
end
|
||||
end
|
||||
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
# algolia-aerial
|
||||
Aerial.css package
|
||||
|
||||
## Definition
|
||||
This project aims to provide a coherent and unified design system for algolia employees.
|
||||
This design system is also known as Aerial.
|
||||
|
||||
## Documentation
|
||||
Go to https://aerialcss.algolia.com to read the full documentation
|
||||
|
||||
## Usage
|
||||
|
||||
To start using aerial.css, simply do `npm install algolia-aerial` or `yarn add algolia-aerial`
|
||||
|
||||
then go to your main css / sass file, and add :
|
||||
|
||||
```css
|
||||
@import './node_modules/algolia-aerial/dist/aerial.css';
|
||||
```
|
||||
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
{
|
||||
"scripts": {
|
||||
"start": "webpack --config webpack.config.js && yarn optimize",
|
||||
"optimize": "cleancss dist/aerial-source.css -o dist/aerial.css && yarn done",
|
||||
"done": "echo '✨ Bundle done ✅' && du -h dist/aerial-source.css && du -h dist/aerial.css && yarn pj-version",
|
||||
"pj-version": "npm --loglevel silent run vars",
|
||||
"vars": "env | grep npm_package_version"
|
||||
},
|
||||
"devDependencies": {
|
||||
"extract-text-webpack-plugin": "3.0.2",
|
||||
"node-sass": "4.9.3",
|
||||
"sass-loader": "7.1.0",
|
||||
"webpack": "3.12.0",
|
||||
"webpack-auto-inject-version": "1.1.0",
|
||||
"webpack-livereload-plugin": "2.1.1"
|
||||
},
|
||||
"name": "algolia-aerial",
|
||||
"version": "1.2.6",
|
||||
"description": "algolia-aerial package",
|
||||
"main": "webpack.config.js",
|
||||
"author": "Lucas Bonomi <@LukyVj> (http://lucasbonomi.com)",
|
||||
"license": "ISC",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+ssh://github.com/algolia/algolia-aerial.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"clean-css-cli": "^4.1.6",
|
||||
"css-loader": "^1.0.0",
|
||||
"file-loader": "^1.0.0",
|
||||
"style-loader": "^0.22.0",
|
||||
"url-loader": "^1.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
/*! Aerial.css [AIV]v{version} - {date}[/AIV] */
|
||||
*
|
||||
box-sizing: border-box
|
||||
|
||||
@import 'modules/base'
|
||||
@import 'modules/mixins'
|
||||
|
||||
// AERIAL.CSS
|
||||
@import 'partials/bootstrap'
|
||||
@import 'partials/fonts'
|
||||
|
||||
@import 'components/scaffolding'
|
||||
@import 'components/buttons'
|
||||
@import 'components/cards'
|
||||
@import 'components/code'
|
||||
@import 'components/type'
|
||||
@import 'components/tables'
|
||||
@import 'components/forms'
|
||||
@import 'components/input-groups'
|
||||
@import 'components/alerts'
|
||||
|
||||
|
||||
@import 'partials/colors'
|
||||
@import 'partials/helpers'
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
.alert
|
||||
border-radius: 6px
|
||||
padding: 16px 24px
|
||||
|
||||
.alert.alert-danger
|
||||
background-color: rgba(255,79,129,0.1)
|
||||
border: solid 1px rgba(255,79,129,0.2)
|
||||
color: #ff4f81 !important
|
||||
|
||||
.alert.alert-danger p
|
||||
color: #ff4f81 !important
|
||||
|
||||
.alert.alert-info
|
||||
background-color: rgba(0,174,255,0.1)
|
||||
border: solid 1px rgba(0,174,255,0.2)
|
||||
color: #00aeff !important
|
||||
|
||||
.alert.alert-info a
|
||||
color: #007ab3 !important
|
||||
text-decoration: underline
|
||||
|
||||
.alert.alert-warning
|
||||
background-color: rgba(255,193,104,0.25)
|
||||
border: solid 1px rgba(255,193,104,0.4)
|
||||
color: #c57c14 !important
|
||||
|
||||
.alert.alert-success
|
||||
background-color: rgba($shamrock,0.1)
|
||||
border: solid 1px rgba($shamrock, 0.4)
|
||||
color: $shamrock !important
|
||||
|
|
@ -1,219 +0,0 @@
|
|||
.btn
|
||||
display: inline-block
|
||||
// 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
|
||||
+user-select(none)
|
||||
padding: 0 20px
|
||||
display: inline-block
|
||||
border-radius: 50px
|
||||
font-size: 16px
|
||||
font-weight: 400
|
||||
height: 40px
|
||||
line-height: 40px
|
||||
border: none
|
||||
box-sizing: border-box
|
||||
position: relative
|
||||
transition: background .2s, box-shadow .2s
|
||||
|
||||
&:active,
|
||||
&.active
|
||||
outline: 0
|
||||
background-image: none
|
||||
+box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.125))
|
||||
|
||||
&:focus,
|
||||
&.focus
|
||||
+tab-focus
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus
|
||||
color: $btn-default-color
|
||||
|
||||
&:hover, &:focus, &:active, &.active
|
||||
outline: 0 !important
|
||||
box-shadow: none
|
||||
text-decoration: none
|
||||
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
cursor: $cursor-disabled
|
||||
pointer-events: none
|
||||
// Future-proof disabling of clicks
|
||||
+opacity(0.65)
|
||||
+box-shadow(none)
|
||||
|
||||
@media (max-width: $screen-sm)
|
||||
font-size: 14px
|
||||
|
||||
.icon:before
|
||||
position: relative
|
||||
top: 2px
|
||||
|
||||
|
||||
.btn-static-default
|
||||
border: 2px solid $tertiary-color
|
||||
color: $text-color
|
||||
background-color: transparent
|
||||
line-height: 36px
|
||||
&:hover, &:focus
|
||||
color: $text-color
|
||||
background-color: rgba($tertiary-color,.3)
|
||||
|
||||
|
||||
.btn-static-primary
|
||||
border: none
|
||||
color: #fff
|
||||
background-image: linear-gradient(284deg, $java, $shamrock)
|
||||
&:hover, &:focus
|
||||
color: white
|
||||
background-image: linear-gradient(284deg, $java, $shamrock)
|
||||
&:active, &.active
|
||||
background-image: linear-gradient(284deg, darken($java, 4%), darken($shamrock, 4%))
|
||||
|
||||
&.btn-shadow
|
||||
box-shadow: 0 2px 6px 0 rgba($shamrock, 0.4)
|
||||
&:hover, &:focus
|
||||
box-shadow: 0 4px 12px rgba($shamrock, 0.4)
|
||||
|
||||
|
||||
.btn-static-secondary
|
||||
border: none
|
||||
color: #fff
|
||||
background-image: linear-gradient(80deg, $algolia-blue, $royal-blue)
|
||||
&:hover, &:focus
|
||||
color: white
|
||||
background-image: linear-gradient(80deg, $algolia-blue, $royal-blue)
|
||||
&:active, &.active
|
||||
background-image: linear-gradient(80deg, darken($algolia-blue, 4%), darken($royal-blue, 4%))
|
||||
&.btn-shadow
|
||||
box-shadow: 0 2px 6px 0 rgba($royal-blue, 0.4)
|
||||
&:hover, &:focus
|
||||
box-shadow: 0 4px 12px rgba($royal-blue, 0.4)
|
||||
|
||||
|
||||
|
||||
.btn-static-tertiary
|
||||
border: none
|
||||
color: #fff
|
||||
background-image: linear-gradient(112deg, $radical-red, $bittersweet)
|
||||
&:hover, &:focus
|
||||
color: white
|
||||
background-image: linear-gradient(112deg, $radical-red, $bittersweet)
|
||||
&:active, &.active
|
||||
background-image: linear-gradient(112deg, darken($radical-red, 4%), darken($bittersweet, 4%))
|
||||
&.btn-shadow
|
||||
box-shadow: 0 2px 6px 0 rgba($bittersweet, 0.4)
|
||||
&:hover, &:focus
|
||||
box-shadow: 0 4px 12px rgba($bittersweet, 0.4)
|
||||
|
||||
/*! This button is generated on build and colored with $theme-color.
|
||||
Think about changing the color of it to fit to your needs.*/
|
||||
.btn-static-theme
|
||||
border: none
|
||||
color: $bunting
|
||||
background-color: $theme-color
|
||||
&:hover, &:focus
|
||||
color: $deep-cove
|
||||
background-color: darken($theme-color, 10%)
|
||||
&:active, &.active
|
||||
background-image: darken($theme-color, 10%)
|
||||
&.btn-shadow
|
||||
box-shadow: 0 2px 6px 0 rgba($koromiko, 0.4)
|
||||
&:hover, &:focus
|
||||
box-shadow: 0 4px 12px rgba($koromiko, 0.4)
|
||||
|
||||
svg
|
||||
width: 16px
|
||||
height: 16px
|
||||
vertical-align: middle
|
||||
margin-left: 0.5em
|
||||
|
||||
use
|
||||
fill: $bunting
|
||||
|
||||
|
||||
.btn-static-inverse
|
||||
color: white
|
||||
&:hover, &:focus, &:active, &.active
|
||||
color: white
|
||||
|
||||
|
||||
|
||||
.btn-static-dark
|
||||
color: $white
|
||||
background-color: $deep-cove
|
||||
background-image: linear-gradient(283deg, $deep-cove, $bunting)
|
||||
border-color: $deep-cove
|
||||
&:hover, &:focus
|
||||
color: $white
|
||||
background-color: $bunting
|
||||
border-color: $bunting
|
||||
&.btn-shadow
|
||||
box-shadow: 0 2px 6px 0 rgba($bunting, 0.4)
|
||||
&:hover, &:focus
|
||||
box-shadow: 0 4px 12px rgba($bunting, 0.4)
|
||||
|
||||
&:active, &.active
|
||||
background-image: linear-gradient(283deg, darken($deep-cove, 10%), darken($bunting, 10%))
|
||||
|
||||
.btn-static-white
|
||||
color: $bunting
|
||||
background-color: $white
|
||||
border-color: $white
|
||||
&:hover, &:focus
|
||||
color: $bunting
|
||||
|
||||
|
||||
.btn-static-enterprise
|
||||
color: $white
|
||||
background-color: $deep-cove
|
||||
border: solid 2px $shamrock
|
||||
line-height: 36px
|
||||
|
||||
&:hover, &:focus
|
||||
color: white
|
||||
background-color: $shamrock
|
||||
border-color: $shamrock
|
||||
|
||||
|
||||
// Circles
|
||||
.btn-circle
|
||||
width: 42px
|
||||
height: 42px
|
||||
padding: 0
|
||||
line-height: 42px
|
||||
|
||||
|
||||
|
||||
// Shadows
|
||||
.btn-static-shadow-dark
|
||||
box-shadow: 0 2px 6px 0 rgba($deep-cove, 0.5)
|
||||
&:hover, &:focus
|
||||
box-shadow: 0 4px 12px rgba($deep-cove, 0.5)
|
||||
|
||||
|
||||
.btn-static-default,
|
||||
.btn-static-primary,
|
||||
.btn-static-secondary,
|
||||
.btn-static-tertiary,
|
||||
.btn-static-inverse,
|
||||
.btn-static-dark,
|
||||
.btn-static-enterprise
|
||||
&:active, &.active,
|
||||
&.btn-shadow:active, .btn-shadow.active,
|
||||
&.btn-static-shadow-dark:active, .btn-static-shadow-dark.active
|
||||
box-shadow: inset 0 0 4px 2px rgba(#050f2c, 0.3)
|
||||
|
||||
|
||||
// Sizes
|
||||
.btn-lg
|
||||
min-width: 210px
|
||||
|
|
@ -1,184 +0,0 @@
|
|||
|
||||
.al-card
|
||||
background-color: $white
|
||||
box-shadow: 0 2px 6px 0 rgba($deep-cove, 0.4)
|
||||
padding: 40px 24px
|
||||
position: relative
|
||||
border-radius: 4px
|
||||
|
||||
&.small-card
|
||||
.card-title,
|
||||
.card-icon,
|
||||
.card-text
|
||||
vertical-align: middle
|
||||
|
||||
.card-title
|
||||
color: $bunting
|
||||
font-size: 16px
|
||||
font-weight: 800
|
||||
padding: 0
|
||||
margin: 0
|
||||
opacity: 0.8
|
||||
margin-bottom: 8px
|
||||
text-transform: none
|
||||
|
||||
.card-icon svg
|
||||
width: 72px
|
||||
|
||||
.card-text
|
||||
font-size: 16px
|
||||
line-height: 24px
|
||||
color: $bunting
|
||||
opacity: 0.7
|
||||
|
||||
&.cover-card
|
||||
height: 240px
|
||||
margin: 0 auto 24px
|
||||
width: 240px
|
||||
border-radius: 5px
|
||||
overflow: hidden
|
||||
|
||||
.card-background
|
||||
width: 100%
|
||||
height: 100%
|
||||
position: absolute
|
||||
transition: transform 0.3s ease
|
||||
top: 50%
|
||||
left: 50%
|
||||
transform: translate(-50%, -50%)
|
||||
|
||||
&:after
|
||||
position: absolute
|
||||
display: block
|
||||
content: ''
|
||||
width: 100%
|
||||
height: 100%
|
||||
top: 0
|
||||
left: 0
|
||||
background: rgba($deep-cove, 0.5)
|
||||
transition: opacity 0.3s ease
|
||||
|
||||
.card-icon
|
||||
position: absolute
|
||||
z-index: 12
|
||||
top: 50%
|
||||
left: 50%
|
||||
transform: translate(-50%, -50%)
|
||||
transition: transform 0.3s ease
|
||||
|
||||
// Card border
|
||||
.card-border,
|
||||
.card-border-quote
|
||||
position: relative
|
||||
|
||||
.card-border-line
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
height: 5px
|
||||
width: 100%
|
||||
border-top-left-radius: 6px
|
||||
border-top-right-radius: 6px
|
||||
|
||||
.card-border
|
||||
height: 100%
|
||||
|
||||
|
||||
// Card border with media ( img, videos )
|
||||
.card-border-media
|
||||
overflow: hidden
|
||||
min-height: 200px
|
||||
|
||||
.card-header
|
||||
width: 100%
|
||||
height: 100%
|
||||
height: 228px
|
||||
overflow: hidden
|
||||
position: relative
|
||||
|
||||
img
|
||||
width: 100%
|
||||
height: 100%
|
||||
opacity: 0.8
|
||||
will-change: opacity, mix-blend-mode
|
||||
border-top-left-radius: 6px
|
||||
border-top-right-radius: 6px
|
||||
|
||||
@supports (mix-blend-mode: soft-light)
|
||||
mix-blend-mode: soft-light
|
||||
transition: opacity 0.2s ease, mix-blend-mode 0.2s ease
|
||||
|
||||
@supports (not (mix-blend-mode: soft-light))
|
||||
opacity: 0.6
|
||||
|
||||
@supports (not (object-fit: cover))
|
||||
height: auto
|
||||
position: absolute
|
||||
top: 50%
|
||||
transform: translateY(-50%)
|
||||
|
||||
@supports (object-fit: cover)
|
||||
object-fit: cover
|
||||
object-position: center center
|
||||
|
||||
.card-separator
|
||||
height: 5px
|
||||
width: 100%
|
||||
|
||||
|
||||
|
||||
&.card-border-media-effect
|
||||
.card-header img
|
||||
filter: grayscale(100%)
|
||||
&:hover .card-header img
|
||||
filter: grayscale(0)
|
||||
@supports (mix-blend-mode: soft-light)
|
||||
mix-blend-mode: unset
|
||||
opacity: 1
|
||||
|
||||
|
||||
// Card border quotes
|
||||
.card-border-quote
|
||||
|
||||
.card-container
|
||||
&:before
|
||||
content: ''
|
||||
display: block
|
||||
width: 14px
|
||||
height: 14px
|
||||
background: transparent
|
||||
position: absolute
|
||||
left: 0
|
||||
right: 0
|
||||
margin: auto
|
||||
bottom: -10px
|
||||
border-radius: 100px
|
||||
box-shadow: 0 4px 20px rgba($bunting,0.08), 0 2px 9px 0 rgba($bunting,0.07), 0 4px 18px rgba($bunting,0.07)
|
||||
z-index: -1
|
||||
&:after
|
||||
content: ''
|
||||
display: block
|
||||
width: 18px
|
||||
height: 18px
|
||||
background: #fff
|
||||
position: absolute
|
||||
left: 0
|
||||
right: 0
|
||||
margin: auto
|
||||
bottom: -9px
|
||||
transform: rotate(-45deg)
|
||||
|
||||
|
||||
.quote-author
|
||||
|
||||
.avatar
|
||||
position: relative
|
||||
width: 42px
|
||||
height: 42px
|
||||
border-radius: 100px
|
||||
float: left
|
||||
margin-right: 8px
|
||||
.author-infos
|
||||
width: calc(100% - 42px - 8px)
|
||||
float: left
|
||||
> span
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp
|
||||
font-family: $font-family-monospace
|
||||
|
||||
code
|
||||
padding: 2px 4px
|
||||
font-size: 90%
|
||||
color: $code-color
|
||||
background-color: $code-bg
|
||||
border-radius: $border-radius-base
|
||||
|
||||
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, 0.25)
|
||||
kbd
|
||||
padding: 0
|
||||
font-size: 100%
|
||||
font-weight: bold
|
||||
box-shadow: none
|
||||
|
||||
pre
|
||||
display: block
|
||||
padding: ($line-height-computed - 1) / 2
|
||||
margin: 0 0 $line-height-computed / 2
|
||||
font-size: $font-size-base - 1
|
||||
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
|
||||
code
|
||||
padding: 0
|
||||
font-size: inherit
|
||||
color: inherit
|
||||
white-space: pre-wrap
|
||||
background-color: transparent
|
||||
border-radius: 0
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
fieldset
|
||||
padding: 0
|
||||
margin: 0
|
||||
border: 0
|
||||
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%
|
||||
margin-bottom: 5px
|
||||
font-weight: bold
|
||||
|
||||
|
||||
input[type="search"]
|
||||
+box-sizing(border-box)
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"]
|
||||
margin: 4px 0 0
|
||||
margin-top: 1px \9
|
||||
line-height: normal
|
||||
|
||||
input[type="file"]
|
||||
display: block
|
||||
|
||||
input[type="range"]
|
||||
display: block
|
||||
width: 100%
|
||||
|
||||
select[multiple],
|
||||
select[size]
|
||||
height: auto
|
||||
|
||||
input[type="file"]:focus,
|
||||
input[type="radio"]:focus,
|
||||
input[type="checkbox"]:focus
|
||||
+tab-focus
|
||||
|
||||
output
|
||||
display: block
|
||||
padding-top: $padding-base-vertical + 1
|
||||
font-size: $font-size-base
|
||||
line-height: $line-height-base
|
||||
color: $input-color
|
||||
|
||||
|
||||
.form-control
|
||||
display: block
|
||||
width: 100%
|
||||
height: $input-height-base
|
||||
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
|
||||
border: 1px solid $input-border
|
||||
border-radius: $input-border-radius
|
||||
+box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075))
|
||||
+transition(border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s)
|
||||
+form-control-focus
|
||||
+placeholder
|
||||
|
||||
&[disabled],
|
||||
&[readonly],
|
||||
fieldset[disabled] &
|
||||
cursor: $cursor-disabled
|
||||
background-color: $input-bg-disabled
|
||||
opacity: 1
|
||||
|
||||
textarea.form-control
|
||||
height: auto
|
||||
|
||||
|
||||
input[type="search"]
|
||||
-webkit-appearance: none
|
||||
|
||||
|
||||
@media screen and (-webkit-min-device-pixel-ratio: 0)
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"]
|
||||
line-height: $input-height-base
|
||||
input[type="date"].input-sm,
|
||||
input[type="time"].input-sm,
|
||||
input[type="datetime-local"].input-sm,
|
||||
input[type="month"].input-sm
|
||||
line-height: $input-height-small
|
||||
input[type="date"].input-lg,
|
||||
input[type="time"].input-lg,
|
||||
input[type="datetime-local"].input-lg,
|
||||
input[type="month"].input-lg
|
||||
line-height: $input-height-large
|
||||
|
||||
|
||||
.form-group
|
||||
margin-bottom: 15px
|
||||
|
||||
|
|
@ -1,144 +0,0 @@
|
|||
|
||||
.input-group .form-control {
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.input-group {
|
||||
|
||||
display: table;
|
||||
|
||||
|
||||
&[class*="col-"] {
|
||||
float: none;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
float: left;
|
||||
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
|
||||
&:focus {
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
.input-group-addon,
|
||||
.input-group-btn,
|
||||
.input-group .form-control {
|
||||
display: table-cell;
|
||||
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
.input-group-addon,
|
||||
.input-group-btn {
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
.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: $input-border-radius;
|
||||
|
||||
&.input-sm {
|
||||
padding: $padding-small-vertical $padding-small-horizontal;
|
||||
font-size: $font-size-small;
|
||||
border-radius: $input-border-radius-small;
|
||||
}
|
||||
&.input-lg {
|
||||
padding: $padding-large-vertical $padding-large-horizontal;
|
||||
font-size: $font-size-large;
|
||||
border-radius: $input-border-radius-large;
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.input-group-btn {
|
||||
position: relative;
|
||||
font-size: 0;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
|
||||
> .btn {
|
||||
position: relative;
|
||||
+ .btn {
|
||||
margin-left: -1px;
|
||||
}
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
margin-right: -1px;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
z-index: 2;
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
*
|
||||
+box-sizing(border-box)
|
||||
|
||||
*:before,
|
||||
*:after
|
||||
+box-sizing(border-box)
|
||||
|
||||
|
||||
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
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea
|
||||
font-family: inherit
|
||||
font-size: inherit
|
||||
line-height: inherit
|
||||
|
||||
|
||||
a
|
||||
color: $link-color
|
||||
text-decoration: none
|
||||
&:hover,
|
||||
&:focus
|
||||
color: $link-hover-color
|
||||
text-decoration: $link-hover-decoration
|
||||
&:focus
|
||||
+tab-focus
|
||||
|
||||
figure
|
||||
margin: 0
|
||||
|
||||
img
|
||||
vertical-align: middle
|
||||
|
||||
hr
|
||||
margin-top: $line-height-computed
|
||||
margin-bottom: $line-height-computed
|
||||
border: 0
|
||||
border-top: 1px solid $hr-border
|
||||
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
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
|
||||
|
||||
|
||||
.table
|
||||
width: 100%
|
||||
max-width: 100%
|
||||
margin-bottom: $line-height-computed
|
||||
|
||||
> 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
|
||||
|
||||
> thead > tr > th
|
||||
vertical-align: bottom
|
||||
border-bottom: 2px solid $table-border-color
|
||||
|
||||
> caption + thead,
|
||||
> colgroup + thead,
|
||||
> thead:first-child
|
||||
> tr:first-child
|
||||
> th,
|
||||
> td
|
||||
border-top: 0
|
||||
|
||||
> tbody + tbody
|
||||
border-top: 2px solid $table-border-color
|
||||
|
||||
.table
|
||||
background-color: $body-bg
|
||||
|
|
@ -1,118 +0,0 @@
|
|||
|
||||
|
||||
|
||||
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
|
||||
|
||||
|
||||
p
|
||||
margin: 0 0 10px
|
||||
|
||||
|
||||
small,
|
||||
.small
|
||||
font-size: floor(100% * $font-size-small / $font-size-base)
|
||||
|
||||
mark,
|
||||
.mark
|
||||
background-color: $state-warning-bg
|
||||
padding: .2em
|
||||
|
||||
|
||||
ul,
|
||||
ol
|
||||
margin-top: 0
|
||||
margin-bottom: $line-height-computed / 2
|
||||
ul,
|
||||
ol
|
||||
margin-bottom: 0
|
||||
|
||||
dl
|
||||
margin-top: 0
|
||||
margin-bottom: $line-height-computed
|
||||
|
||||
dt,
|
||||
dd
|
||||
line-height: $line-height-base
|
||||
|
||||
dt
|
||||
font-weight: bold
|
||||
|
||||
dd
|
||||
margin-left: 0
|
||||
|
||||
|
||||
abbr[title],
|
||||
abbr[data-original-title]
|
||||
cursor: help
|
||||
border-bottom: 1px dotted $abbr-border-color
|
||||
|
||||
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
|
||||
footer,
|
||||
small,
|
||||
.small
|
||||
display: block
|
||||
font-size: 80%
|
||||
line-height: $line-height-base
|
||||
color: $blockquote-small-color
|
||||
&:before
|
||||
content: '\2014 \00A0'
|
||||
|
||||
address
|
||||
margin-bottom: $line-height-computed
|
||||
font-style: normal
|
||||
line-height: $line-height-base
|
||||
|
|
@ -1,151 +0,0 @@
|
|||
|
||||
//fonts
|
||||
$light: 300
|
||||
$regular: 400
|
||||
$medium: 500
|
||||
$bold: 600
|
||||
|
||||
//colors
|
||||
$white: white
|
||||
$black: black
|
||||
|
||||
//V2
|
||||
$purple-heart: rgb(142,67,231)
|
||||
$mulberry: rgb(184,69,146)
|
||||
$radical-red: rgb(255,79,129)
|
||||
$bittersweet: rgb(255,108,95)
|
||||
$koromiko: rgb(255,193,104)
|
||||
$shamrock: rgb(45,222,152)
|
||||
$java: rgb(28,199,208)
|
||||
$algolia-blue: rgb(0,174,255)
|
||||
$royal-blue: rgb(51,105,231)
|
||||
|
||||
$bunting: rgb(62,57,107)
|
||||
$titan-white: rgb(248,250,255)
|
||||
$logan: rgb(157,157,189)
|
||||
$deep-cove: rgb(5,15,44)
|
||||
|
||||
$port-gore: rgb(58, 69, 112)
|
||||
$east-bay: rgb(73, 85, 136)
|
||||
$portage: rgb(137, 148, 198)
|
||||
$blue-bell: rgb(166, 176, 216)
|
||||
|
||||
$ghost: rgb(196, 200, 216)
|
||||
$athens-gray: rgb(238, 240, 247)
|
||||
|
||||
$theme-color: #fecf50
|
||||
|
||||
$primary-color: $bunting
|
||||
$secondary-color: $titan-white
|
||||
$tertiary-color: $portage
|
||||
|
||||
// BOOTSTRAP
|
||||
$gray-darker: lighten(#000, 13.5%)
|
||||
$gray-dark: lighten(#000, 20%)
|
||||
$gray: lighten(#000, 33.5%)
|
||||
$gray-light: lighten(#000, 46.7%)
|
||||
$gray-lighter: lighten(#000, 93.5%)
|
||||
|
||||
$brand-primary: $algolia-blue
|
||||
$brand-secondary: #FA3870
|
||||
$brand-success: $shamrock
|
||||
|
||||
$brand-info: $algolia-blue
|
||||
$brand-warning: $koromiko
|
||||
$brand-danger: $radical-red
|
||||
|
||||
$font-size-base: 15px
|
||||
$font-size-h1: 36px
|
||||
$font-size-h2: 30px
|
||||
$font-size-h3: 18px
|
||||
$font-size-h4: 12px
|
||||
$font-size-h5: 1em
|
||||
$font-size-h6: 1em
|
||||
$line-height-base: 1.6
|
||||
|
||||
$body-bg: $white
|
||||
$text-color: $bunting
|
||||
|
||||
$text-muted: $portage
|
||||
|
||||
$border-radius-base: 3px
|
||||
$border-radius-large: 3px
|
||||
$border-radius-small: 3px
|
||||
|
||||
$link-color: $brand-primary
|
||||
$link-hover-color: darken($link-color, 15%)
|
||||
|
||||
//fonts
|
||||
$font-family-base: 'Montserrat', Helvetica, Arial, sans-serif
|
||||
$headings-font-family: $font-family-base
|
||||
$font-stack: $font-family-base
|
||||
$paragraphs-font-family: 'Open Sans', helvetica, sans-serif
|
||||
$headings-small-color: darken($tertiary-color,10%)
|
||||
|
||||
//Buttons
|
||||
$btn-font-weight: normal
|
||||
//default
|
||||
$btn-default-color: #777
|
||||
$btn-default-bg: $white
|
||||
$btn-default-border: #ccc
|
||||
//primary
|
||||
$btn-primary-color: $white
|
||||
$btn-primary-bg: $brand-primary
|
||||
$btn-primary-border: darken($btn-primary-bg, 5%)
|
||||
//success
|
||||
$btn-success-color: $white
|
||||
$btn-success-bg: $brand-success
|
||||
$btn-success-border: darken($btn-success-bg, 5%)
|
||||
//info
|
||||
$btn-info-color: $white
|
||||
$btn-info-bg: $brand-info
|
||||
$btn-info-border: darken($btn-info-bg, 5%)
|
||||
//warning
|
||||
$btn-warning-color: $white
|
||||
$btn-warning-bg: $brand-warning
|
||||
$btn-warning-border: darken($btn-warning-bg, 5%)
|
||||
//danger
|
||||
$btn-danger-color: $white
|
||||
$btn-danger-bg: $brand-danger
|
||||
$btn-danger-border: darken($btn-danger-bg, 5%)
|
||||
//link
|
||||
$btn-link-disabled-color: $gray-light
|
||||
$input-bg-disabled: $gray-lighter
|
||||
|
||||
//Panels
|
||||
$panel-bg: $white
|
||||
|
||||
//** Border color for elements within panels
|
||||
$panel-inner-border: lighten($tertiary-color,20%)
|
||||
$panel-footer-bg: lighten($secondary-color, 10%)
|
||||
|
||||
$panel-default-text: $gray-dark
|
||||
$panel-default-border: $white
|
||||
$panel-default-heading-bg: $white
|
||||
|
||||
//forms
|
||||
$input-group-addon-bg: lighten($secondary-color,3%)
|
||||
$input-border: lighten($gray,30%)
|
||||
|
||||
//tables
|
||||
$table-border-color: $secondary-color
|
||||
$table-bg-accent: lighten($secondary-color,5%)
|
||||
|
||||
//tooltip
|
||||
$tooltip-bg: $primary-color
|
||||
$tooltip-opacity: 1
|
||||
|
||||
//popover
|
||||
$popover-max-width: 300px
|
||||
|
||||
//Cards
|
||||
$card-border-transition: all 240ms ease-in-out
|
||||
|
||||
|
||||
//code
|
||||
$pre-bg: $bunting
|
||||
$pre-color: #C2CCCC
|
||||
|
||||
|
||||
// Searchboxes
|
||||
$searchbox-landing: (input-width: 300px, input-height: 50px, border-width: 2px, border-radius: 25px, input-border-color: #cccccc, input-focus-border-color: #ff2e83, input-background: white, input-focus-background: white, font-size: 14px, placeholder-color: #bbbbbb, icon: sbx-icon-search-18, icon-size: 30px, icon-position: left, icon-color: #ff2e83, icon-background: white, icon-background-opacity: 0, icon-clear: sbx-icon-clear-5, icon-clear-size: 18px)
|
||||
|
|
@ -1,230 +0,0 @@
|
|||
|
||||
//illus retina
|
||||
@mixin at2x($path, $ext: "png", $w: auto, $h: auto)
|
||||
background-image: url(image_path($path + "." + $ext))
|
||||
background-repeat: no-repeat
|
||||
$at2x_path: $path + "@2x" + "." + $ext
|
||||
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5)
|
||||
background-image: url(image_path($at2x_path))
|
||||
background-size: $w $h
|
||||
|
||||
@mixin text-truncate
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
white-space: nowrap
|
||||
|
||||
//vertical alignment
|
||||
@mixin vertical-align($position: relative)
|
||||
transform: translateY(-50%)
|
||||
position: $position
|
||||
top: 50%
|
||||
|
||||
@mixin horizontal-align($position)
|
||||
position: $position
|
||||
left: 50%
|
||||
transform: translateX(-50%)
|
||||
|
||||
@mixin center($position)
|
||||
position: $position
|
||||
left: 50%
|
||||
top: 50%
|
||||
transform: translate(-50%, -50%)
|
||||
|
||||
// Responsive
|
||||
// Responsive Breakpoints
|
||||
@mixin big-min-mq
|
||||
@media (min-width: $screen-lg)
|
||||
@content
|
||||
|
||||
@mixin big-mq
|
||||
@media (max-width: $screen-lg)
|
||||
@content
|
||||
|
||||
@mixin medium-mq
|
||||
@media (max-width: $screen-md)
|
||||
@content
|
||||
|
||||
@mixin small-mq
|
||||
@media (max-width: $screen-sm)
|
||||
@content
|
||||
|
||||
@mixin mobile-mq
|
||||
@media (max-width: $screen-xs)
|
||||
@content
|
||||
|
||||
// Placeholder
|
||||
@mixin placeholder
|
||||
&::-webkit-input-placeholder
|
||||
@content
|
||||
&:-moz-placeholder
|
||||
@content
|
||||
&::-moz-placeholder
|
||||
@content
|
||||
&:-ms-input-placeholder
|
||||
@content
|
||||
|
||||
//BEM helpers
|
||||
@mixin block($block)
|
||||
#{$block}
|
||||
@content
|
||||
|
||||
@mixin element($element)
|
||||
&__#{$element}
|
||||
@content
|
||||
|
||||
@mixin modifier($modifier)
|
||||
&--#{$modifier}
|
||||
@content
|
||||
|
||||
|
||||
@mixin diagonal($rotation, $background, $height, $pos: after)
|
||||
&:#{$pos}
|
||||
content: ''
|
||||
display: block
|
||||
position: absolute
|
||||
width: 100%
|
||||
height: $height
|
||||
background: #{$background}
|
||||
transform: skewY($rotation)
|
||||
z-index: 0
|
||||
|
||||
@media (min-width: $screen-lg)
|
||||
transform: skewY($rotation/2)
|
||||
|
||||
@content
|
||||
|
||||
@mixin clearfix()
|
||||
&:before,
|
||||
&:after
|
||||
content: " "
|
||||
display: table
|
||||
|
||||
&:after
|
||||
clear: both
|
||||
|
||||
|
||||
@function even-px($value)
|
||||
@if type-of($value) == "number"
|
||||
@if unitless($value)
|
||||
$value: $value * 1px
|
||||
@else if unit($value) == "em"
|
||||
$value: $value / 1em * 16px
|
||||
@else if unit($value) == "pts"
|
||||
$value: $value * 1.3333 * 1px
|
||||
@else if unit($value) == "%"
|
||||
$value: $value * 16 / 100% * 1px
|
||||
$value: round($value)
|
||||
@if $value % 2 != 0
|
||||
$value: $value + 1
|
||||
@return $value
|
||||
|
||||
=searchbox($font-size: 90%, $input-width: 350px, $input-height: $font-size * 2.4, $border-width: 1px, $border-radius: $input-height / 2, $input-border-color: #cccccc, $input-focus-border-color: #1ec9ea, $input-background: #f8f8f8, $input-focus-background: white, $placeholder-color: #aaaaaa, $icon: "sbx-icon-search-1", $icon-size: $input-height / 1.6, $icon-position: left, $icon-color: #888888, $icon-background: $input-focus-border-color, $icon-background-opacity: 0.1, $icon-clear: "sbx-icon-clear-1", $icon-clear-size: $font-size / 1.1)
|
||||
display: inline-block
|
||||
position: relative
|
||||
width: $input-width
|
||||
height: even-px($input-height)
|
||||
white-space: nowrap
|
||||
box-sizing: border-box
|
||||
font-size: $font-size
|
||||
&__wrapper
|
||||
width: 100%
|
||||
height: 100%
|
||||
&__input
|
||||
display: inline-block
|
||||
transition: box-shadow .4s ease, background .4s ease
|
||||
border: 0
|
||||
border-radius: even-px($border-radius)
|
||||
box-shadow: inset 0 0 0 $border-width $input-border-color
|
||||
background: $input-background
|
||||
padding: 0
|
||||
padding-right: if($icon-position == "right", even-px($input-height) + even-px($icon-clear-size) + 8px, even-px($input-height * 0.8)) + if($icon-background-opacity == 0, 0, even-px($font-size))
|
||||
padding-left: if($icon-position == "right", even-px($font-size / 2) + even-px($border-radius / 2), even-px($input-height) + if($icon-background-opacity == 0, 0, even-px($font-size * 1.2)))
|
||||
width: 100%
|
||||
height: 100%
|
||||
vertical-align: middle
|
||||
white-space: normal
|
||||
font-size: inherit
|
||||
appearance: none
|
||||
&::-webkit-search-decoration,
|
||||
&::-webkit-search-cancel-button,
|
||||
&::-webkit-search-results-button,
|
||||
&::-webkit-search-results-decoration
|
||||
display: none
|
||||
&:hover
|
||||
box-shadow: inset 0 0 0 $border-width darken($input-border-color, 10%)
|
||||
&:focus,
|
||||
&:active
|
||||
outline: 0
|
||||
box-shadow: inset 0 0 0 $border-width $input-focus-border-color
|
||||
background: $input-focus-background
|
||||
&::placeholder
|
||||
color: $placeholder-color
|
||||
&__submit
|
||||
position: absolute
|
||||
top: 0
|
||||
@if $icon-position == "right"
|
||||
right: 0
|
||||
left: inherit
|
||||
@else
|
||||
right: inherit
|
||||
left: 0
|
||||
margin: 0
|
||||
border: 0
|
||||
border-radius: if($icon-position == "right", 0 $border-radius $border-radius 0, $border-radius 0 0 $border-radius)
|
||||
background-color: rgba($icon-background, $icon-background-opacity)
|
||||
padding: 0
|
||||
width: even-px($input-height) + if($icon-background-opacity == 0, 0, even-px($font-size / 2))
|
||||
height: 100%
|
||||
vertical-align: middle
|
||||
text-align: center
|
||||
font-size: inherit
|
||||
user-select: none
|
||||
// Helper for vertical alignement of the icon
|
||||
&::before
|
||||
display: inline-block
|
||||
margin-right: -4px
|
||||
height: 100%
|
||||
vertical-align: middle
|
||||
content: ''
|
||||
&:hover,
|
||||
&:active
|
||||
cursor: pointer
|
||||
&:focus
|
||||
outline: 0
|
||||
svg
|
||||
width: even-px($icon-size)
|
||||
height: even-px($icon-size)
|
||||
vertical-align: middle
|
||||
fill: $icon-color
|
||||
&__reset
|
||||
display: none
|
||||
position: absolute
|
||||
top: (even-px($input-height) - even-px($icon-clear-size)) / 2 - 4px
|
||||
right: if($icon-position == "right", even-px($input-height) + if($icon-background-opacity == 0, 0, even-px($font-size)), (even-px($input-height) - even-px($icon-clear-size)) / 2 - 4px)
|
||||
margin: 0
|
||||
border: 0
|
||||
background: none
|
||||
cursor: pointer
|
||||
padding: 0
|
||||
font-size: inherit
|
||||
user-select: none
|
||||
fill: rgba(black, 0.5)
|
||||
&:focus
|
||||
outline: 0
|
||||
svg
|
||||
display: block
|
||||
margin: 4px
|
||||
width: even-px($icon-clear-size)
|
||||
height: even-px($icon-clear-size)
|
||||
&__input:valid ~ &__reset
|
||||
display: block
|
||||
animation-name: sbx-reset-in
|
||||
animation-duration: .15s
|
||||
@at-root
|
||||
@keyframes sbx-reset-in
|
||||
0%
|
||||
transform: translate3d(-20%, 0, 0)
|
||||
opacity: 0
|
||||
100%
|
||||
transform: none
|
||||
opacity: 1
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
@import "../modules/_base"
|
||||
|
||||
// Core variables and mixins
|
||||
@import "../vendors/bootstrap/variables"
|
||||
@import "../vendors/bootstrap/mixins"
|
||||
// Reset and dependencies
|
||||
@import "../vendors/bootstrap/normalize"
|
||||
// Core CSS
|
||||
@import "../vendors/bootstrap/grid"
|
||||
// Utility classes
|
||||
@import "../vendors/bootstrap/responsive-utilities"
|
||||
|
|
@ -1,124 +0,0 @@
|
|||
/* foreground colors */
|
||||
.color-white
|
||||
color: $white !important
|
||||
.color-titan
|
||||
color: $titan-white !important
|
||||
.color-primary
|
||||
color: $brand-primary !important
|
||||
.color-secondary
|
||||
color: $brand-secondary !important
|
||||
.color-purple-heart
|
||||
color: $purple-heart !important
|
||||
.color-mulberry
|
||||
color: $mulberry !important
|
||||
.color-radical-red
|
||||
color: $radical-red !important
|
||||
.color-bittersweet
|
||||
color: $bittersweet !important
|
||||
.color-koromiko
|
||||
color: $koromiko !important
|
||||
.color-shamrock
|
||||
color: $shamrock !important
|
||||
.color-java
|
||||
color: $java !important
|
||||
.color-algolia-blue
|
||||
color: $algolia-blue !important
|
||||
.color-royal-blue
|
||||
color: $royal-blue !important
|
||||
.color-bunting
|
||||
color: $bunting !important
|
||||
.color-deep-cove
|
||||
color: $deep-cove !important
|
||||
|
||||
.color-port-gore
|
||||
color: $port-gore !important
|
||||
.color-east-bay
|
||||
color: $east-bay !important
|
||||
.color-portage
|
||||
color: $portage !important
|
||||
.color-blue-bell
|
||||
color: $blue-bell !important
|
||||
.color-ghost
|
||||
color: $ghost !important
|
||||
.color-athens-gray
|
||||
color: $athens-gray !important
|
||||
.color-logan
|
||||
color: $logan !important
|
||||
|
||||
.color-current
|
||||
color: currentColor !important
|
||||
|
||||
|
||||
.fill-dark
|
||||
background-color: $primary-color !important
|
||||
.fill-white
|
||||
background-color: $white !important
|
||||
.fill-titan
|
||||
background-color: $titan-white !important
|
||||
.fill-purple-heart
|
||||
background-color: $purple-heart !important
|
||||
.fill-mulberry
|
||||
background-color: $mulberry !important
|
||||
.fill-radical-red
|
||||
background-color: $radical-red !important
|
||||
.fill-bittersweet
|
||||
background-color: $bittersweet !important
|
||||
.fill-koromiko
|
||||
background-color: $koromiko !important
|
||||
.fill-shamrock
|
||||
background-color: $shamrock !important
|
||||
.fill-java
|
||||
background-color: $java !important
|
||||
.fill-algolia-blue
|
||||
background-color: $algolia-blue !important
|
||||
.fill-royal-blue
|
||||
background-color: $royal-blue !important
|
||||
.fill-deep-cove
|
||||
background-color: $deep-cove !important
|
||||
.fill-bunting
|
||||
background-color: $bunting !important
|
||||
.fill-port-gore
|
||||
background-color: $port-gore !important
|
||||
.fill-east-bay
|
||||
background-color: $east-bay !important
|
||||
.fill-portage
|
||||
background-color: $portage !important
|
||||
.fill-blue-bell
|
||||
background-color: $blue-bell !important
|
||||
.fill-ghost
|
||||
background-color: $ghost !important
|
||||
.fill-athens-gray
|
||||
background-color: $athens-gray !important
|
||||
.fill-logan
|
||||
background-color: $logan !important
|
||||
|
||||
|
||||
.gradient-primary,
|
||||
.gradient-green
|
||||
background-image: linear-gradient(320deg, $shamrock, mix($shamrock,$java)) !important
|
||||
|
||||
.gradient-secondary,
|
||||
.gradient-blue
|
||||
background-image: linear-gradient(256deg, $algolia-blue, $royal-blue) !important
|
||||
|
||||
.gradient-tertiary,
|
||||
.gradient-pink
|
||||
background-image: linear-gradient(256deg, $bittersweet, $radical-red) !important
|
||||
|
||||
.gradient-orange
|
||||
background-image: linear-gradient(256deg, $koromiko, $bittersweet)
|
||||
|
||||
.gradient-purple
|
||||
background-image: linear-gradient(269deg, #8e43e6, #b84592)
|
||||
|
||||
.gradient-light-blue
|
||||
background-image: linear-gradient(269deg, $algolia-blue, $java)
|
||||
|
||||
.gradient-blue-purple
|
||||
background-image: linear-gradient(103deg, $royal-blue, $purple-heart)
|
||||
|
||||
.gradient-dark
|
||||
background-image: linear-gradient(283deg, $deep-cove, $bunting)
|
||||
|
||||
.gradient-white
|
||||
background-image: linear-gradient(0deg, $titan-white, #ffffff)
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800')
|
||||
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700,900')
|
||||
|
||||
|
||||
h1, h2, h3, h4
|
||||
font-family: $headings-font-family
|
||||
|
||||
|
||||
/*! The paragraphs also use Montserrat on the website, except on the documentation and other exceptions */
|
||||
p
|
||||
font-size: 15px
|
||||
font-family: $headings-font-family
|
||||
|
||||
strong
|
||||
font-family: $headings-font-family
|
||||
|
|
@ -1,698 +0,0 @@
|
|||
/**
|
||||
*spacer
|
||||
*/
|
||||
@mixin spacer
|
||||
width: 100%
|
||||
font-size: 0
|
||||
margin: 0
|
||||
padding: 0
|
||||
border: 0
|
||||
display: block
|
||||
|
||||
|
||||
.spacer8
|
||||
+spacer
|
||||
height: 8px
|
||||
.spacer16
|
||||
+spacer
|
||||
height: 16px
|
||||
.spacer24
|
||||
+spacer
|
||||
height: 24px
|
||||
.spacer32
|
||||
+spacer
|
||||
height: 32px
|
||||
.spacer40
|
||||
+spacer
|
||||
height: 40px
|
||||
.spacer48
|
||||
+spacer
|
||||
height: 48px
|
||||
.spacer56
|
||||
+spacer
|
||||
height: 56px
|
||||
.spacer64
|
||||
+spacer
|
||||
height: 64px
|
||||
.spacer80
|
||||
+spacer
|
||||
height: 80px
|
||||
.spacer120
|
||||
+spacer
|
||||
height: 120px
|
||||
|
||||
|
||||
/**
|
||||
*width
|
||||
*/
|
||||
.w100
|
||||
width: 100px
|
||||
.w150
|
||||
width: 150px
|
||||
.w200
|
||||
width: 200px
|
||||
.w100p
|
||||
width: 100%
|
||||
.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
|
||||
*/
|
||||
.h80
|
||||
height: 80px
|
||||
.h100
|
||||
height: 100px
|
||||
.h200
|
||||
height: 200px
|
||||
.h300
|
||||
height: 300px
|
||||
.h400
|
||||
height: 400px
|
||||
.h500
|
||||
height: 500px
|
||||
.h600
|
||||
height: 600px
|
||||
.h700
|
||||
height: 700px
|
||||
.h800
|
||||
height: 800px
|
||||
.hfull
|
||||
height: 100%
|
||||
|
||||
/**
|
||||
* positions
|
||||
*/
|
||||
.pos-rel
|
||||
position: relative
|
||||
.pos-stc
|
||||
position: static
|
||||
.pos-abt
|
||||
position: absolute
|
||||
.pos-fix
|
||||
position: fixed
|
||||
|
||||
/**
|
||||
* Indexing
|
||||
*/
|
||||
.z-1
|
||||
z-index: 1
|
||||
.z-2
|
||||
z-index: 2
|
||||
.z-3
|
||||
z-index: 3
|
||||
.z-4
|
||||
z-index: 4
|
||||
.z-5
|
||||
z-index: 5
|
||||
.z-10
|
||||
z-index: 10
|
||||
.z-20
|
||||
z-index: 20
|
||||
.z-100
|
||||
z-index: 100
|
||||
|
||||
|
||||
/**
|
||||
*font size
|
||||
*/
|
||||
.text-heading
|
||||
font-size: 56px
|
||||
|
||||
.text-xxl
|
||||
font-size: 40px
|
||||
|
||||
.text-xl
|
||||
font-size: 32px
|
||||
|
||||
.text-lg
|
||||
font-size: 24px
|
||||
|
||||
.text-bg
|
||||
font-size: 20px
|
||||
|
||||
.text-regular
|
||||
font-size: 15px
|
||||
|
||||
.text-sm
|
||||
font-size: 12px
|
||||
|
||||
.text-xsm
|
||||
font-size: 10px
|
||||
|
||||
.text-xs
|
||||
font-size: 8px
|
||||
|
||||
|
||||
/**
|
||||
*font weight
|
||||
*/
|
||||
.text-thin
|
||||
font-weight: 300
|
||||
.text-normal
|
||||
font-weight: 400
|
||||
.text-demi
|
||||
font-weight: 500
|
||||
p.text-demi
|
||||
font-weight: 600
|
||||
.text-bold
|
||||
font-weight: 700
|
||||
.text-bolder
|
||||
font-weight: 900
|
||||
p.text-bolder
|
||||
font-weight: 800
|
||||
|
||||
/**
|
||||
*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
|
||||
|
||||
.b-n
|
||||
border: none !important
|
||||
|
||||
|
||||
/**
|
||||
* Radius
|
||||
*/
|
||||
.radius6
|
||||
border-radius: 6px
|
||||
.radius100p
|
||||
border-radius: 100%
|
||||
|
||||
|
||||
/**
|
||||
*padding
|
||||
*/
|
||||
.padder
|
||||
padding: 0 15px
|
||||
.p-mini
|
||||
padding: 5px
|
||||
.p-small
|
||||
padding: 10px
|
||||
.p-large
|
||||
padding: 20px
|
||||
.p-xlarge
|
||||
padding: 30px
|
||||
|
||||
.p-t-mini
|
||||
padding-top: 5px
|
||||
.p-t-small
|
||||
padding-top: 10px
|
||||
.p-t-large
|
||||
padding-top: 20px
|
||||
.p-t-xlarge
|
||||
padding-top: 30px
|
||||
|
||||
.p-b-mini
|
||||
padding-bottom: 5px
|
||||
.p-b-small
|
||||
padding-bottom: 10px
|
||||
.p-b-large
|
||||
padding-bottom: 20px
|
||||
.p-b-xlarge
|
||||
padding-bottom: 30px
|
||||
|
||||
.p-l-small
|
||||
padding-left: 10px
|
||||
.p-l-large
|
||||
padding-left: 20px
|
||||
.p-l-xlarge
|
||||
padding-left: 30px
|
||||
.p-r-small
|
||||
padding-right: 10px
|
||||
.p-r-large
|
||||
padding-right: 20px
|
||||
.p-r-xlarge
|
||||
padding-right: 30px
|
||||
.p-l-xxlarge
|
||||
padding-left: 60px
|
||||
.p-r-xxlarge
|
||||
padding-right: 60px
|
||||
|
||||
.no-padding
|
||||
padding: 0 !important
|
||||
.no-p-l
|
||||
padding-left: 0
|
||||
.no-p-r
|
||||
padding-right: 0
|
||||
.no-p-t
|
||||
padding-top: 0 !important
|
||||
.no-p-b
|
||||
padding-bottom: 0
|
||||
|
||||
/**
|
||||
*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-xlarge
|
||||
margin-bottom: 30px
|
||||
.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
|
||||
|
||||
.no-margin
|
||||
margin: 0 !important
|
||||
|
||||
/**
|
||||
* text
|
||||
*/
|
||||
// Alignment
|
||||
.text-left
|
||||
text-align: left
|
||||
|
||||
.text-right
|
||||
text-align: right
|
||||
|
||||
.text-center
|
||||
text-align: center
|
||||
|
||||
.text-justify
|
||||
text-align: justify
|
||||
|
||||
// Contextual colors
|
||||
.text-muted
|
||||
color: $text-muted
|
||||
.vertical-align-middle
|
||||
display: inline-block !important
|
||||
vertical-align: middle !important
|
||||
.vertical-align-bottom
|
||||
display: inline-block !important
|
||||
vertical-align: bottom !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
|
||||
.lower-case
|
||||
text-transform: lowercase
|
||||
.upper-case
|
||||
text-transform: uppercase
|
||||
.capital-case
|
||||
text-transform: capitalize
|
||||
.hidden-text
|
||||
text-indent: -9999px
|
||||
color: transparent
|
||||
|
||||
/**
|
||||
* Line height
|
||||
*/
|
||||
.line-h-regular
|
||||
line-height: 1.5
|
||||
|
||||
.line-h-small
|
||||
line-height: 1.2
|
||||
|
||||
/**
|
||||
*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
|
||||
.headline
|
||||
border-bottom: 5px solid $black
|
||||
margin-top: 0
|
||||
line-height: 45px
|
||||
|
||||
.no-line
|
||||
border-width: 0
|
||||
.no-border
|
||||
border-color: transparent !important
|
||||
.no-radius
|
||||
border-radius: 0
|
||||
.block
|
||||
display: block
|
||||
.inline
|
||||
display: inline-block
|
||||
.pull-left
|
||||
float: left
|
||||
.pull-right
|
||||
float: right
|
||||
.pull-none
|
||||
float: none
|
||||
.pull-in
|
||||
margin-right: -15px
|
||||
margin-left: -15px
|
||||
.line-v
|
||||
border-left: 1px solid #dddddd
|
||||
padding-left: 20px
|
||||
.line-v-right
|
||||
border-right: 1px solid #dddddd
|
||||
padding-right: 20px
|
||||
|
||||
|
||||
/**
|
||||
* Flexbox
|
||||
*/
|
||||
.flex-container
|
||||
display: flex
|
||||
|
||||
.flex-dir-col
|
||||
flex-flow: column wrap
|
||||
&-reverse
|
||||
flex-flow: column-reverse wrap
|
||||
|
||||
.flex-dir-row
|
||||
flex-flow: row wrap
|
||||
&-reverse
|
||||
flex-flow: row-reverse wrap
|
||||
|
||||
/**
|
||||
* Flex space setting
|
||||
*/
|
||||
.flex-space-around
|
||||
justify-content: space-around
|
||||
|
||||
.flex-space-between
|
||||
justify-content: space-between
|
||||
|
||||
.flex-align-center
|
||||
align-items: center
|
||||
|
||||
/**
|
||||
* Flex item size
|
||||
*/
|
||||
.flex-it-4
|
||||
flex: 0 1 25%
|
||||
|
||||
_:-ms-input-placeholder, :root .flex-it-4
|
||||
-ms-flex-preferred-size: 21% !important
|
||||
|
||||
.flex-it-3
|
||||
flex: 0 1 33.33%
|
||||
|
||||
_:-ms-input-placeholder, :root .flex-it-3
|
||||
-ms-flex-preferred-size: 29% !important
|
||||
|
||||
.flex-it-2
|
||||
flex: 0 1 50%
|
||||
|
||||
_:-ms-input-placeholder, :root .flex-it-2
|
||||
-ms-flex-preferred-size: 48% !important
|
||||
@supports ( not ( mix-blend-mode: luminosity))
|
||||
flex: 0 1 49.95%
|
||||
|
||||
|
||||
.flex-it-1
|
||||
flex: 0 1 100%
|
||||
|
||||
// Responsive flex classes
|
||||
@media (min-width: 1200px)
|
||||
.flex-it-1-lg
|
||||
flex: 0 1 100%
|
||||
|
||||
.flex-it-2-lg
|
||||
flex: 0 1 50%
|
||||
_:-ms-input-placeholder, :root .flex-it-2-lg
|
||||
-ms-flex-preferred-size: 48% !important
|
||||
@supports ( not ( mix-blend-mode: luminosity))
|
||||
flex: 0 1 49.95%
|
||||
|
||||
.flex-it-3-lg
|
||||
flex: 0 1 33.33%
|
||||
_:-ms-input-placeholder, :root .flex-it-3-lg
|
||||
-ms-flex-preferred-size: 29% !important
|
||||
|
||||
.flex-it-4-lg
|
||||
flex: 0 1 25%
|
||||
_:-ms-input-placeholder, :root .flex-it-4-lg
|
||||
-ms-flex-preferred-size: 21% !important
|
||||
|
||||
@media (max-width: 768px)
|
||||
.flex-it-1-sm
|
||||
flex: 0 1 100%
|
||||
|
||||
.flex-it-2-sm
|
||||
flex: 0 1 50%
|
||||
_:-ms-input-placeholder, :root .flex-it-2-sm
|
||||
-ms-flex-preferred-size: 48% !important
|
||||
@supports ( not ( mix-blend-mode: luminosity))
|
||||
flex: 0 1 49.95%
|
||||
|
||||
.flex-it-3-sm
|
||||
flex: 0 1 33.33%
|
||||
_:-ms-input-placeholder, :root .flex-it-3-sm
|
||||
-ms-flex-preferred-size: 29% !important
|
||||
|
||||
.flex-it-4-sm
|
||||
flex: 0 1 25%
|
||||
_:-ms-input-placeholder, :root .flex-it-4-sm
|
||||
-ms-flex-preferred-size: 21% !important
|
||||
|
||||
/**
|
||||
* others
|
||||
*/
|
||||
.unscroll
|
||||
overflow: hidden !important
|
||||
|
||||
.clickable
|
||||
cursor: pointer
|
||||
|
||||
.rotate-45
|
||||
transform: rotate(45deg)
|
||||
|
||||
.content-box
|
||||
box-sizing: content-box
|
||||
|
||||
.faded
|
||||
opacity: .3
|
||||
|
||||
.op0
|
||||
opacity: 0
|
||||
|
||||
.line-through
|
||||
text-decoration: line-through
|
||||
|
||||
.no-decoration
|
||||
text-decoration: none
|
||||
|
||||
|
||||
/**
|
||||
* Centering
|
||||
*/
|
||||
.v-center
|
||||
position: absolute
|
||||
top: 50%
|
||||
transform: translateY(-50%)
|
||||
|
||||
.h-center
|
||||
position: absolute
|
||||
left: 50%
|
||||
transform: translateX(-50%)
|
||||
|
||||
.vh-center
|
||||
position: absolute
|
||||
top: 50%
|
||||
left: 50%
|
||||
transform: translate(-50%,-50%)
|
||||
|
||||
|
||||
/**
|
||||
* Hidden utilities
|
||||
*/
|
||||
.hidden-sm
|
||||
@media (max-width: $screen-sm)
|
||||
display: none !important
|
||||
|
||||
.visible-sm
|
||||
@media (max-width: $screen-sm)
|
||||
display: block !important
|
||||
|
||||
.hidden
|
||||
display: none !important
|
||||
visibility: hidden !important
|
||||
|
||||
/**
|
||||
* CSS for <sub> and <sup>
|
||||
*/
|
||||
sub, sup
|
||||
font-size: 50%
|
||||
line-height: 0
|
||||
position: relative
|
||||
vertical-align: baseline
|
||||
|
||||
sup
|
||||
top: -0.7em
|
||||
|
||||
sub
|
||||
bottom: -0.25em
|
||||
|
||||
[ng\:cloak], [ng-cloak], .ng-cloak
|
||||
display: none !important
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Lists
|
||||
*/
|
||||
.list-none
|
||||
list-style: none
|
||||
|
||||
/**
|
||||
* Clearfix
|
||||
*/
|
||||
.cf:before,
|
||||
.cf:after
|
||||
content: " "
|
||||
display: table
|
||||
|
||||
|
||||
.cf:after
|
||||
clear: both
|
||||
|
||||
/**
|
||||
* For IE 6/7 only
|
||||
* Include this rule to trigger hasLayout and contain floats.
|
||||
*/
|
||||
.cf
|
||||
*zoom: 1
|
||||
|
||||
|
||||
/**
|
||||
* Shadows
|
||||
*/
|
||||
|
||||
.elevation0
|
||||
box-shadow: 0 5px 15px 0 rgba(112, 128, 175, 0.2)
|
||||
|
||||
.elevation1
|
||||
box-shadow: 0 10px 40px 0 rgba($bunting,0.07), 0 2px 9px 0 rgba($bunting,0.06)
|
||||
|
||||
.elevation2
|
||||
box-shadow: 0 16px 32px 0 rgba($bunting, 0.2)
|
||||
|
||||
// Placeholders
|
||||
%elevation1
|
||||
box-shadow: 0 10px 40px 0 rgba($bunting,0.07), 0 2px 9px 0 rgba($bunting,0.06)
|
||||
|
||||
/**
|
||||
* For inputs
|
||||
*/
|
||||
.apn
|
||||
-webkit-appearance: none
|
||||
-moz-appearance: none
|
||||
appearance: none
|
||||
|
||||
.otn
|
||||
outline: none
|
||||
|
||||
/**
|
||||
* To use with gradient for text
|
||||
*/
|
||||
.gradient-text
|
||||
-webkit-background-clip: text
|
||||
-webkit-text-fill-color: transparent
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
//
|
||||
// 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);
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
// 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/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";
|
||||
|
|
@ -1,427 +0,0 @@
|
|||
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
|
||||
|
||||
//
|
||||
// 1. Set default font family to sans-serif.
|
||||
// 2. Prevent iOS text size adjust after 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/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 when focused and also mouse hovered in all browsers.
|
||||
//
|
||||
|
||||
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 {
|
||||
-moz-box-sizing: content-box;
|
||||
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
|
||||
// (include `-moz` to future-proof).
|
||||
//
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; // 1
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; // 2
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
|
|
@ -1,177 +0,0 @@
|
|||
//
|
||||
// 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/
|
||||
|
||||
@-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');
|
||||
}
|
||||
|
|
@ -1,864 +0,0 @@
|
|||
// When true, asset path helpers are used, otherwise the regular CSS `url()` is used.
|
||||
// When there no function is defined, `fn('')` is parsed as string that equals the right hand side
|
||||
// NB: in Sass 3.3 there is a native function: function-exists(twbs-font-path)
|
||||
$bootstrap-sass-asset-helper: (twbs-font-path("") != unquote('twbs-font-path("")')) !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;
|
||||
$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>`.
|
||||
$body-bg: #fff !default;
|
||||
//** Global text color on `<body>`.
|
||||
$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 `<code>`, `<kbd>`, and `<pre>`.
|
||||
$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 `<body>`.
|
||||
$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] Asset helpers such as Sprockets and Node.js Mincer do not resolve 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.33 !default;
|
||||
$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 `<th>`s and `<td>`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;
|
||||
|
||||
|
||||
//== Forms
|
||||
//
|
||||
//##
|
||||
|
||||
//** `<input>` background color
|
||||
$input-bg: #fff !default;
|
||||
//** `<input disabled>` background color
|
||||
$input-bg-disabled: $gray-lighter !default;
|
||||
|
||||
//** Text color for `<input>`s
|
||||
$input-color: $gray !default;
|
||||
//** `<input>` border color
|
||||
$input-border: #ccc !default;
|
||||
|
||||
// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
|
||||
//** Default `.form-control` border radius
|
||||
$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;
|
||||
|
||||
$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: 1040 !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;
|
||||
|
||||
|
||||
//== 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;
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
// 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%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
// Contextual backgrounds
|
||||
|
||||
// [converter] $parent hack
|
||||
@mixin bg-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
background-color: $color;
|
||||
}
|
||||
a#{$parent}:hover {
|
||||
background-color: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
// 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;
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
// 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;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:active,
|
||||
&.active,
|
||||
.open > &.dropdown-toggle {
|
||||
color: $color;
|
||||
background-color: darken($background, 10%);
|
||||
border-color: darken($border, 12%);
|
||||
}
|
||||
&:active,
|
||||
&.active,
|
||||
.open > &.dropdown-toggle {
|
||||
background-image: none;
|
||||
}
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
|
||||
&.btn-primary {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
// Center-align a block level element
|
||||
|
||||
@mixin center-block() {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
// 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. `<select>`
|
||||
// element gets special love because it's special, and that's a fact!
|
||||
// [converter] $parent hack
|
||||
@mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
|
||||
#{$parent} {
|
||||
height: $input-height;
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
font-size: $font-size;
|
||||
line-height: $line-height;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
select#{$parent} {
|
||||
height: $input-height;
|
||||
line-height: $input-height;
|
||||
}
|
||||
|
||||
textarea#{$parent},
|
||||
select[multiple]#{$parent} {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
// Gradients
|
||||
|
||||
|
||||
|
||||
// Horizontal gradient, from left to right
|
||||
//
|
||||
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
||||
// Color stops are not available in IE9 and below.
|
||||
@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
|
||||
background-image: -webkit-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
|
||||
background-image: -o-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Opera 12
|
||||
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down
|
||||
}
|
||||
|
||||
// Vertical gradient, from top to bottom
|
||||
//
|
||||
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
||||
// Color stops are not available in IE9 and below.
|
||||
@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
|
||||
background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
|
||||
background-image: -o-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Opera 12
|
||||
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
|
||||
}
|
||||
|
||||
@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
|
||||
background-repeat: repeat-x;
|
||||
background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1-6, Chrome 10+
|
||||
background-image: -o-linear-gradient($deg, $start-color, $end-color); // Opera 12
|
||||
background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
|
||||
}
|
||||
@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
|
||||
background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
|
||||
background-image: -o-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
|
||||
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
|
||||
background-repeat: no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback
|
||||
}
|
||||
@mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
|
||||
background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);
|
||||
background-image: -o-linear-gradient($start-color, $mid-color $color-stop, $end-color);
|
||||
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
|
||||
background-repeat: no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
|
||||
}
|
||||
@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
|
||||
background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color);
|
||||
background-image: radial-gradient(circle, $inner-color, $outer-color);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {
|
||||
background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
|
||||
}
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
// Framework grid generation
|
||||
//
|
||||
// Used only by Bootstrap to generate the correct number of grid classes given
|
||||
// any value of `$grid-columns`.
|
||||
|
||||
// [converter] This is defined recursively in LESS, but Sass supports real loops
|
||||
@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
|
||||
@for $i from (1 + 1) through $grid-columns {
|
||||
$list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
|
||||
}
|
||||
#{$list} {
|
||||
position: relative;
|
||||
// Prevent columns from collapsing when empty
|
||||
min-height: 1px;
|
||||
// Inner gutter via padding
|
||||
padding-left: ($grid-gutter-width / 2);
|
||||
padding-right: ($grid-gutter-width / 2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// [converter] This is defined recursively in LESS, but Sass supports real loops
|
||||
@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {
|
||||
@for $i from (1 + 1) through $grid-columns {
|
||||
$list: "#{$list}, .col-#{$class}-#{$i}";
|
||||
}
|
||||
#{$list} {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin calc-grid-column($index, $class, $type) {
|
||||
@if ($type == width) and ($index > 0) {
|
||||
.col-#{$class}-#{$index} {
|
||||
width: percentage(($index / $grid-columns));
|
||||
}
|
||||
}
|
||||
@if ($type == push) and ($index > 0) {
|
||||
.col-#{$class}-push-#{$index} {
|
||||
left: percentage(($index / $grid-columns));
|
||||
}
|
||||
}
|
||||
@if ($type == push) and ($index == 0) {
|
||||
.col-#{$class}-push-0 {
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
@if ($type == pull) and ($index > 0) {
|
||||
.col-#{$class}-pull-#{$index} {
|
||||
right: percentage(($index / $grid-columns));
|
||||
}
|
||||
}
|
||||
@if ($type == pull) and ($index == 0) {
|
||||
.col-#{$class}-pull-0 {
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
@if ($type == offset) {
|
||||
.col-#{$class}-offset-#{$index} {
|
||||
margin-left: percentage(($index / $grid-columns));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// [converter] This is defined recursively in LESS, but Sass supports real loops
|
||||
@mixin loop-grid-columns($columns, $class, $type) {
|
||||
@for $i from 0 through $columns {
|
||||
@include calc-grid-column($i, $class, $type);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Create grid for specific class
|
||||
@mixin make-grid($class) {
|
||||
@include float-grid-columns($class);
|
||||
@include loop-grid-columns($grid-columns, $class, width);
|
||||
@include loop-grid-columns($grid-columns, $class, pull);
|
||||
@include loop-grid-columns($grid-columns, $class, push);
|
||||
@include loop-grid-columns($grid-columns, $class, offset);
|
||||
}
|
||||
|
|
@ -1,122 +0,0 @@
|
|||
// Grid system
|
||||
//
|
||||
// Generate semantic grid columns with these mixins.
|
||||
|
||||
// Centered container element
|
||||
@mixin container-fixed($gutter: $grid-gutter-width) {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-left: ($gutter / 2);
|
||||
padding-right: ($gutter / 2);
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
// Creates a wrapper for a series of columns
|
||||
@mixin make-row($gutter: $grid-gutter-width) {
|
||||
margin-left: ($gutter / -2);
|
||||
margin-right: ($gutter / -2);
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
// Generate the extra small columns
|
||||
@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: percentage(($columns / $grid-columns));
|
||||
min-height: 1px;
|
||||
padding-left: ($gutter / 2);
|
||||
padding-right: ($gutter / 2);
|
||||
}
|
||||
@mixin make-xs-column-offset($columns) {
|
||||
margin-left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
@mixin make-xs-column-push($columns) {
|
||||
left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
@mixin make-xs-column-pull($columns) {
|
||||
right: percentage(($columns / $grid-columns));
|
||||
}
|
||||
|
||||
// Generate the small columns
|
||||
@mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: ($gutter / 2);
|
||||
padding-right: ($gutter / 2);
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
float: left;
|
||||
width: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-sm-column-offset($columns) {
|
||||
@media (min-width: $screen-sm-min) {
|
||||
margin-left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-sm-column-push($columns) {
|
||||
@media (min-width: $screen-sm-min) {
|
||||
left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-sm-column-pull($columns) {
|
||||
@media (min-width: $screen-sm-min) {
|
||||
right: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
// Generate the medium columns
|
||||
@mixin make-md-column($columns, $gutter: $grid-gutter-width) {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: ($gutter / 2);
|
||||
padding-right: ($gutter / 2);
|
||||
|
||||
@media (min-width: $screen-md-min) {
|
||||
float: left;
|
||||
width: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-md-column-offset($columns) {
|
||||
@media (min-width: $screen-md-min) {
|
||||
margin-left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-md-column-push($columns) {
|
||||
@media (min-width: $screen-md-min) {
|
||||
left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-md-column-pull($columns) {
|
||||
@media (min-width: $screen-md-min) {
|
||||
right: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
// Generate the large columns
|
||||
@mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: ($gutter / 2);
|
||||
padding-right: ($gutter / 2);
|
||||
|
||||
@media (min-width: $screen-lg-min) {
|
||||
float: left;
|
||||
width: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-lg-column-offset($columns) {
|
||||
@media (min-width: $screen-lg-min) {
|
||||
margin-left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-lg-column-push($columns) {
|
||||
@media (min-width: $screen-lg-min) {
|
||||
left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-lg-column-pull($columns) {
|
||||
@media (min-width: $screen-lg-min) {
|
||||
right: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
// CSS image replacement
|
||||
//
|
||||
// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
|
||||
// mixins being reused as classes with the same name, this doesn't hold up. As
|
||||
// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`.
|
||||
//
|
||||
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
|
||||
|
||||
// Deprecated as of v3.0.1 (will be removed in v4)
|
||||
@mixin hide-text() {
|
||||
font: #{0/0} a;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// New mixin to use as of v3.0.1
|
||||
@mixin text-hide() {
|
||||
@include hide-text;
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
// Image Mixins
|
||||
// - Responsive image
|
||||
// - Retina image
|
||||
|
||||
|
||||
// Responsive image
|
||||
//
|
||||
// Keep images from scaling beyond the width of their parents.
|
||||
@mixin img-responsive($display: block) {
|
||||
display: $display;
|
||||
max-width: 100%; // Part 1: Set a maximum relative to the parent
|
||||
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
|
||||
}
|
||||
|
||||
|
||||
// Retina image
|
||||
//
|
||||
// Short retina mixin for setting background-image and -size. Note that the
|
||||
// spelling of `min--moz-device-pixel-ratio` is intentional.
|
||||
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
|
||||
background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-1x}"), "#{$file-1x}"));
|
||||
|
||||
@media
|
||||
only screen and (-webkit-min-device-pixel-ratio: 2),
|
||||
only screen and ( min--moz-device-pixel-ratio: 2),
|
||||
only screen and ( -o-min-device-pixel-ratio: 2/1),
|
||||
only screen and ( min-device-pixel-ratio: 2),
|
||||
only screen and ( min-resolution: 192dpi),
|
||||
only screen and ( min-resolution: 2dppx) {
|
||||
background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-2x}"), "#{$file-2x}"));
|
||||
background-size: $width-1x $height-1x;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
// Labels
|
||||
|
||||
@mixin label-variant($color) {
|
||||
background-color: $color;
|
||||
|
||||
&[href] {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
// List Groups
|
||||
|
||||
@mixin list-group-item-variant($state, $background, $color) {
|
||||
.list-group-item-#{$state} {
|
||||
color: $color;
|
||||
background-color: $background;
|
||||
|
||||
// [converter] extracted a& to a.list-group-item-#{$state}
|
||||
}
|
||||
|
||||
a.list-group-item-#{$state} {
|
||||
color: $color;
|
||||
|
||||
.list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $color;
|
||||
background-color: darken($background, 5%);
|
||||
}
|
||||
&.active,
|
||||
&.active:hover,
|
||||
&.active:focus {
|
||||
color: #fff;
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
// Horizontal dividers
|
||||
//
|
||||
// Dividers (basically an hr) within dropdowns and nav lists
|
||||
|
||||
@mixin nav-divider($color: #e5e5e5) {
|
||||
height: 1px;
|
||||
margin: (($line-height-computed / 2) - 1) 0;
|
||||
overflow: hidden;
|
||||
background-color: $color;
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
// Navbar vertical align
|
||||
//
|
||||
// Vertically center elements in the navbar.
|
||||
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
|
||||
|
||||
@mixin navbar-vertical-align($element-height) {
|
||||
margin-top: (($navbar-height - $element-height) / 2);
|
||||
margin-bottom: (($navbar-height - $element-height) / 2);
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
// Opacity
|
||||
|
||||
@mixin opacity($opacity) {
|
||||
opacity: $opacity;
|
||||
// IE8 filter
|
||||
$opacity-ie: ($opacity * 100);
|
||||
filter: #{alpha(opacity=$opacity-ie)};
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
// Pagination
|
||||
|
||||
@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
|
||||
> li {
|
||||
> a,
|
||||
> span {
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
font-size: $font-size;
|
||||
}
|
||||
&:first-child {
|
||||
> a,
|
||||
> span {
|
||||
@include border-left-radius($border-radius);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
> a,
|
||||
> span {
|
||||
@include border-right-radius($border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
// Panels
|
||||
|
||||
@mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
|
||||
border-color: $border;
|
||||
|
||||
& > .panel-heading {
|
||||
color: $heading-text-color;
|
||||
background-color: $heading-bg-color;
|
||||
border-color: $heading-border;
|
||||
|
||||
+ .panel-collapse > .panel-body {
|
||||
border-top-color: $border;
|
||||
}
|
||||
.badge {
|
||||
color: $heading-bg-color;
|
||||
background-color: $heading-text-color;
|
||||
}
|
||||
}
|
||||
& > .panel-footer {
|
||||
+ .panel-collapse > .panel-body {
|
||||
border-bottom-color: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
// Progress bars
|
||||
|
||||
@mixin progress-bar-variant($color) {
|
||||
background-color: $color;
|
||||
|
||||
// Deprecated parent class requirement as of v3.2.0
|
||||
.progress-striped & {
|
||||
@include gradient-striped;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
// Reset filters for IE
|
||||
//
|
||||
// When you need to remove a gradient background, do not forget to use this to reset
|
||||
// the IE filter for IE9 and below.
|
||||
|
||||
@mixin reset-filter() {
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
// Resize anything
|
||||
|
||||
@mixin resizable($direction) {
|
||||
resize: $direction; // Options: horizontal, vertical, both
|
||||
overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
// Responsive utilities
|
||||
|
||||
//
|
||||
// More easily include all the states for responsive-utilities.less.
|
||||
// [converter] $parent hack
|
||||
@mixin responsive-visibility($parent) {
|
||||
#{$parent} {
|
||||
display: block !important;
|
||||
}
|
||||
table#{$parent} { display: table; }
|
||||
tr#{$parent} { display: table-row !important; }
|
||||
th#{$parent},
|
||||
td#{$parent} { display: table-cell !important; }
|
||||
}
|
||||
|
||||
// [converter] $parent hack
|
||||
@mixin responsive-invisibility($parent) {
|
||||
#{$parent} {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
// Sizing shortcuts
|
||||
|
||||
@mixin size($width, $height) {
|
||||
width: $width;
|
||||
height: $height;
|
||||
}
|
||||
|
||||
@mixin square($size) {
|
||||
@include size($size, $size);
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
// WebKit-style focus
|
||||
|
||||
@mixin tab-focus() {
|
||||
// Default
|
||||
outline: thin dotted;
|
||||
// WebKit
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
// Tables
|
||||
|
||||
@mixin table-row-variant($state, $background) {
|
||||
// Exact selectors below required to override `.table-striped` and prevent
|
||||
// inheritance to nested tables.
|
||||
.table > thead > tr,
|
||||
.table > tbody > tr,
|
||||
.table > tfoot > tr {
|
||||
> td.#{$state},
|
||||
> th.#{$state},
|
||||
&.#{$state} > td,
|
||||
&.#{$state} > th {
|
||||
background-color: $background;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover states for `.table-hover`
|
||||
// Note: this is not available for cells or rows within `thead` or `tfoot`.
|
||||
.table-hover > tbody > tr {
|
||||
> td.#{$state}:hover,
|
||||
> th.#{$state}:hover,
|
||||
&.#{$state}:hover > td,
|
||||
&:hover > .#{$state},
|
||||
&.#{$state}:hover > th {
|
||||
background-color: darken($background, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
// Typography
|
||||
|
||||
// [converter] $parent hack
|
||||
@mixin text-emphasis-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
color: $color;
|
||||
}
|
||||
a#{$parent}:hover {
|
||||
color: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
// Text overflow
|
||||
// Requires inline-block or block for proper styling
|
||||
|
||||
@mixin text-overflow() {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -1,222 +0,0 @@
|
|||
// Vendor Prefixes
|
||||
//
|
||||
// All vendor mixins are deprecated as of v3.2.0 due to the introduction of
|
||||
// Autoprefixer in our Gruntfile. They will be removed in v4.
|
||||
|
||||
// - Animations
|
||||
// - Backface visibility
|
||||
// - Box shadow
|
||||
// - Box sizing
|
||||
// - Content columns
|
||||
// - Hyphens
|
||||
// - Placeholder text
|
||||
// - Transformations
|
||||
// - Transitions
|
||||
// - User Select
|
||||
|
||||
|
||||
// Animations
|
||||
@mixin animation($animation) {
|
||||
-webkit-animation: $animation;
|
||||
-o-animation: $animation;
|
||||
animation: $animation;
|
||||
}
|
||||
@mixin animation-name($name) {
|
||||
-webkit-animation-name: $name;
|
||||
animation-name: $name;
|
||||
}
|
||||
@mixin animation-duration($duration) {
|
||||
-webkit-animation-duration: $duration;
|
||||
animation-duration: $duration;
|
||||
}
|
||||
@mixin animation-timing-function($timing-function) {
|
||||
-webkit-animation-timing-function: $timing-function;
|
||||
animation-timing-function: $timing-function;
|
||||
}
|
||||
@mixin animation-delay($delay) {
|
||||
-webkit-animation-delay: $delay;
|
||||
animation-delay: $delay;
|
||||
}
|
||||
@mixin animation-iteration-count($iteration-count) {
|
||||
-webkit-animation-iteration-count: $iteration-count;
|
||||
animation-iteration-count: $iteration-count;
|
||||
}
|
||||
@mixin animation-direction($direction) {
|
||||
-webkit-animation-direction: $direction;
|
||||
animation-direction: $direction;
|
||||
}
|
||||
@mixin animation-fill-mode($fill-mode) {
|
||||
-webkit-animation-fill-mode: $fill-mode;
|
||||
animation-fill-mode: $fill-mode;
|
||||
}
|
||||
|
||||
// Backface visibility
|
||||
// Prevent browsers from flickering when using CSS 3D transforms.
|
||||
// Default value is `visible`, but can be changed to `hidden`
|
||||
|
||||
@mixin backface-visibility($visibility){
|
||||
-webkit-backface-visibility: $visibility;
|
||||
-moz-backface-visibility: $visibility;
|
||||
backface-visibility: $visibility;
|
||||
}
|
||||
|
||||
// Drop shadows
|
||||
//
|
||||
// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
|
||||
// supported browsers that have box shadow capabilities now support it.
|
||||
|
||||
@mixin box-shadow($shadow...) {
|
||||
-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
|
||||
// Box sizing
|
||||
@mixin box-sizing($boxmodel) {
|
||||
-webkit-box-sizing: $boxmodel;
|
||||
-moz-box-sizing: $boxmodel;
|
||||
box-sizing: $boxmodel;
|
||||
}
|
||||
|
||||
// CSS3 Content Columns
|
||||
@mixin content-columns($column-count, $column-gap: $grid-gutter-width) {
|
||||
-webkit-column-count: $column-count;
|
||||
-moz-column-count: $column-count;
|
||||
column-count: $column-count;
|
||||
-webkit-column-gap: $column-gap;
|
||||
-moz-column-gap: $column-gap;
|
||||
column-gap: $column-gap;
|
||||
}
|
||||
|
||||
// Optional hyphenation
|
||||
@mixin hyphens($mode: auto) {
|
||||
word-wrap: break-word;
|
||||
-webkit-hyphens: $mode;
|
||||
-moz-hyphens: $mode;
|
||||
-ms-hyphens: $mode; // IE10+
|
||||
-o-hyphens: $mode;
|
||||
hyphens: $mode;
|
||||
}
|
||||
|
||||
// Placeholder text
|
||||
@mixin placeholder($color: $input-color-placeholder) {
|
||||
// Firefox
|
||||
&::-moz-placeholder {
|
||||
color: $color;
|
||||
opacity: 1; // See https://github.com/twbs/bootstrap/pull/11526
|
||||
}
|
||||
&:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
|
||||
&::-webkit-input-placeholder { color: $color; } // Safari and Chrome
|
||||
}
|
||||
|
||||
// Transformations
|
||||
@mixin scale($ratio...) {
|
||||
-webkit-transform: scale($ratio);
|
||||
-ms-transform: scale($ratio); // IE9 only
|
||||
-o-transform: scale($ratio);
|
||||
transform: scale($ratio);
|
||||
}
|
||||
|
||||
@mixin scaleX($ratio) {
|
||||
-webkit-transform: scaleX($ratio);
|
||||
-ms-transform: scaleX($ratio); // IE9 only
|
||||
-o-transform: scaleX($ratio);
|
||||
transform: scaleX($ratio);
|
||||
}
|
||||
@mixin scaleY($ratio) {
|
||||
-webkit-transform: scaleY($ratio);
|
||||
-ms-transform: scaleY($ratio); // IE9 only
|
||||
-o-transform: scaleY($ratio);
|
||||
transform: scaleY($ratio);
|
||||
}
|
||||
@mixin skew($x, $y) {
|
||||
-webkit-transform: skewX($x) skewY($y);
|
||||
-ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
|
||||
-o-transform: skewX($x) skewY($y);
|
||||
transform: skewX($x) skewY($y);
|
||||
}
|
||||
@mixin translate($x, $y) {
|
||||
-webkit-transform: translate($x, $y);
|
||||
-ms-transform: translate($x, $y); // IE9 only
|
||||
-o-transform: translate($x, $y);
|
||||
transform: translate($x, $y);
|
||||
}
|
||||
@mixin translate3d($x, $y, $z) {
|
||||
-webkit-transform: translate3d($x, $y, $z);
|
||||
transform: translate3d($x, $y, $z);
|
||||
}
|
||||
@mixin rotate($degrees) {
|
||||
-webkit-transform: rotate($degrees);
|
||||
-ms-transform: rotate($degrees); // IE9 only
|
||||
-o-transform: rotate($degrees);
|
||||
transform: rotate($degrees);
|
||||
}
|
||||
@mixin rotateX($degrees) {
|
||||
-webkit-transform: rotateX($degrees);
|
||||
-ms-transform: rotateX($degrees); // IE9 only
|
||||
-o-transform: rotateX($degrees);
|
||||
transform: rotateX($degrees);
|
||||
}
|
||||
@mixin rotateY($degrees) {
|
||||
-webkit-transform: rotateY($degrees);
|
||||
-ms-transform: rotateY($degrees); // IE9 only
|
||||
-o-transform: rotateY($degrees);
|
||||
transform: rotateY($degrees);
|
||||
}
|
||||
@mixin perspective($perspective) {
|
||||
-webkit-perspective: $perspective;
|
||||
-moz-perspective: $perspective;
|
||||
perspective: $perspective;
|
||||
}
|
||||
@mixin perspective-origin($perspective) {
|
||||
-webkit-perspective-origin: $perspective;
|
||||
-moz-perspective-origin: $perspective;
|
||||
perspective-origin: $perspective;
|
||||
}
|
||||
@mixin transform-origin($origin) {
|
||||
-webkit-transform-origin: $origin;
|
||||
-moz-transform-origin: $origin;
|
||||
-ms-transform-origin: $origin; // IE9 only
|
||||
transform-origin: $origin;
|
||||
}
|
||||
|
||||
|
||||
// Transitions
|
||||
|
||||
@mixin transition($transition...) {
|
||||
-webkit-transition: $transition;
|
||||
-o-transition: $transition;
|
||||
transition: $transition;
|
||||
}
|
||||
@mixin transition-property($transition-property...) {
|
||||
-webkit-transition-property: $transition-property;
|
||||
transition-property: $transition-property;
|
||||
}
|
||||
@mixin transition-delay($transition-delay) {
|
||||
-webkit-transition-delay: $transition-delay;
|
||||
transition-delay: $transition-delay;
|
||||
}
|
||||
@mixin transition-duration($transition-duration...) {
|
||||
-webkit-transition-duration: $transition-duration;
|
||||
transition-duration: $transition-duration;
|
||||
}
|
||||
@mixin transition-timing-function($timing-function) {
|
||||
-webkit-transition-timing-function: $timing-function;
|
||||
transition-timing-function: $timing-function;
|
||||
}
|
||||
@mixin transition-transform($transition...) {
|
||||
-webkit-transition: -webkit-transform $transition;
|
||||
-moz-transition: -moz-transform $transition;
|
||||
-o-transition: -o-transform $transition;
|
||||
transition: transform $transition;
|
||||
}
|
||||
|
||||
|
||||
// User select
|
||||
// For selecting text on the page
|
||||
|
||||
@mixin user-select($select) {
|
||||
-webkit-user-select: $select;
|
||||
-moz-user-select: $select;
|
||||
-ms-user-select: $select; // IE10+
|
||||
user-select: $select;
|
||||
}
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
const path = require('path');
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
const WebpackAutoInject = require('webpack-auto-inject-version');
|
||||
|
||||
module.exports = {
|
||||
entry: './src/stylesheet/aerial.sass',
|
||||
output: {
|
||||
path: path.join(__dirname, './dist/'),
|
||||
filename: 'aerial-source.css'
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.sass$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: 'style-loader',
|
||||
use: ['css-loader','sass-loader']
|
||||
})
|
||||
},
|
||||
{
|
||||
test: /\.(ttf|eot|woff|woff2|svg)$/,
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: 'fonts/[name].[ext]',
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new ExtractTextPlugin('aerial-source.css'), // css file will override generated js file
|
||||
new WebpackAutoInject({
|
||||
NAME: 'AIV custom name',
|
||||
SHORT: 'CUSTOM',
|
||||
SILENT: false,
|
||||
PACKAGE_JSON_PATH: './package.json',
|
||||
components: {
|
||||
AutoIncreaseVersion: false,
|
||||
InjectAsComment: true,
|
||||
InjectByTag: true
|
||||
},
|
||||
componentsOptions: {
|
||||
AutoIncreaseVersion: {
|
||||
runInWatchMode: false // it will increase version with every single build!
|
||||
},
|
||||
InjectAsComment: {
|
||||
tag: 'Version: {version} - {date}',
|
||||
dateFormat: 'h:MM:ss TT'
|
||||
},
|
||||
InjectByTag: {
|
||||
fileRegex: /\.+/,
|
||||
dateFormat: 'h:MM:ss TT'
|
||||
}
|
||||
},
|
||||
LOGS_TEXT: {
|
||||
AIS_START: 'DEMO AIV started'
|
||||
}
|
||||
})
|
||||
]
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"presets": [
|
||||
["env", {
|
||||
"targets": {
|
||||
"browsers": ["last 2 versions", "safari >= 7"]
|
||||
}
|
||||
}]
|
||||
]
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
/node_modules/
|
||||
/components/**/*.data.json
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
## Algolia front end components
|
||||
|
||||
This project was created so that we can more easily update our components across all of our websites and avoid issues with consistency.
|
||||
|
||||
### Why this approach
|
||||
|
||||
We have a lot of different websites running, a lot of community projects where our components are functionaly and design wise the same, yet we see offsets in CSS and changes to HTML structure which prove hard to maintain. There is no single source of truth for our components and thus we are seeing various different implementations and styles. In the future we want to avoid this and move faster. Changing a header on all of our websites should not take a week's time, but it should be as simple as pulling the components repository, rebuilding the components and re-deploying the websites. No manual cleaning of old CSS, copy/pasting html etc.
|
||||
|
||||
### How does it work?
|
||||
The package uses javascript to generate custom content inside your component. All you need to specify is the data for that package to render and include it in your project.
|
||||
|
||||
Each component has a `<component>.example.json` file which you can simply rename to `<component>.data.json` to have it use the json file.
|
||||
|
||||
|
||||
### Usage
|
||||
|
||||
Depending on your build process you can have a few different use cases.
|
||||
|
||||
### Build the components
|
||||
|
||||
Depending on the build tool, there a few use cases of how you can import components.
|
||||
|
||||
## @TODO write best practice for different build steps
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const chalk = require('chalk');
|
||||
const IMG_DIR = path.resolve(__dirname, './../images');
|
||||
|
||||
let assets = {}
|
||||
|
||||
if(!process.browser && !process.env.webpack) {
|
||||
assets = {
|
||||
algoliaLogo : fs.readFileSync(IMG_DIR + '/algolia-logo-darkbg.svg', 'utf8').toString(),
|
||||
communityLogo : fs.readFileSync(IMG_DIR + '/algolia-community-dark.svg', 'utf8').toString(),
|
||||
searchIcon : fs.readFileSync(IMG_DIR + '/search-icon.svg', 'utf8').toString(),
|
||||
searchCloseIcon : fs.readFileSync(IMG_DIR + '/search-close-icon.svg', 'utf8').toString(),
|
||||
iconSeparator : fs.readFileSync(IMG_DIR + '/icon-separator.svg', 'utf8').toString(),
|
||||
InstantSearchReact : fs.readFileSync(IMG_DIR + '/react-instantsearch.svg', 'utf8').toString(),
|
||||
instantSearchAndroid : fs.readFileSync(IMG_DIR + '/instantsearch-android.svg', 'utf8').toString(),
|
||||
shopify : fs.readFileSync(IMG_DIR + '/shopify.svg', 'utf8').toString(),
|
||||
wordpress : fs.readFileSync(IMG_DIR + '/wordpress.svg', 'utf8').toString()
|
||||
}
|
||||
} else if(process.env.webpack){
|
||||
assets = {
|
||||
algoliaLogo : fs.readFileSync(IMG_DIR + '/algolia-logo-darkbg.svg', 'utf8').toString(),
|
||||
communityLogo : fs.readFileSync(IMG_DIR + '/algolia-community-dark.svg', 'utf8').toString(),
|
||||
searchIcon : fs.readFileSync(IMG_DIR + '/search-icon.svg', 'utf8').toString(),
|
||||
searchCloseIcon : fs.readFileSync(IMG_DIR + '/search-close-icon.svg', 'utf8').toString(),
|
||||
iconSeparator : fs.readFileSync(IMG_DIR + '/icon-separator.svg', 'utf8').toString(),
|
||||
InstantSearchReact : fs.readFileSync(IMG_DIR + '/react-instantsearch.svg', 'utf8').toString(),
|
||||
instantSearchAndroid : fs.readFileSync(IMG_DIR + '/instantsearch-android.svg', 'utf8').toString(),
|
||||
shopify : fs.readFileSync(IMG_DIR + '/shopify.svg', 'utf8').toString(),
|
||||
wordpress : fs.readFileSync(IMG_DIR + '/wordpress.svg', 'utf8').toString()
|
||||
}
|
||||
} else if(process.env.NODE) {
|
||||
assets = {
|
||||
algoliaLogo : fs.readFileSync(IMG_DIR + '/algolia-logo-darkbg.svg', 'utf8').toString(),
|
||||
communityLogo : fs.readFileSync(IMG_DIR + '/algolia-community-dark.svg', 'utf8').toString(),
|
||||
searchIcon : fs.readFileSync(IMG_DIR + '/search-icon.svg', 'utf8').toString(),
|
||||
searchCloseIcon : fs.readFileSync(IMG_DIR + '/search-close-icon.svg', 'utf8').toString(),
|
||||
iconSeparator : fs.readFileSync(IMG_DIR + '/icon-separator.svg', 'utf8').toString(),
|
||||
InstantSearchReact : fs.readFileSync(IMG_DIR + '/react-instantsearch.svg', 'utf8').toString(),
|
||||
instantSearchAndroid : fs.readFileSync(IMG_DIR + '/instantsearch-android.svg', 'utf8').toString(),
|
||||
shopify : fs.readFileSync(IMG_DIR + '/shopify.svg', 'utf8').toString(),
|
||||
wordpress : fs.readFileSync(IMG_DIR + '/wordpress.svg', 'utf8').toString()
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = assets;
|
||||
|
|
@ -1,146 +0,0 @@
|
|||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const glob = require('glob');
|
||||
const chalk = require('chalk');
|
||||
const ProgressBar = require('progress');
|
||||
const sass = require('node-sass');
|
||||
const babel = require('babel-core');
|
||||
const assets = require('./assets');
|
||||
|
||||
const log = console.log;
|
||||
|
||||
const COMPONENT_DIR = path.resolve(__dirname, './../components');
|
||||
const IMG_DIR = path.resolve(__dirname, './../images');
|
||||
const DIST_DIR = path.resolve(__dirname, './../dist/');
|
||||
const jshtmlglob = COMPONENT_DIR + "/**/*.html.js";
|
||||
const cssglob = COMPONENT_DIR + "/**/*.scss";
|
||||
const jsglob = COMPONENT_DIR + "/**/*.js";
|
||||
const scssResolvePath = path.resolve(__dirname, '/stylesheets');
|
||||
|
||||
const outputMode = [...process.argv].indexOf('--erb') > 0 ? ".erb" : ".html";
|
||||
|
||||
const bar = new ProgressBar(`${chalk.green('building')} [:bar]`, { total: 40 });
|
||||
|
||||
const timer = setInterval(function() {
|
||||
bar.tick();
|
||||
if (bar.complete) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, 100);
|
||||
|
||||
const buildAssets = new Promise((resolve, reject) => {
|
||||
|
||||
fs.mkdir(DIST_DIR, function(e) {
|
||||
if (!e || (e && e.code === 'EEXIST')) {} else {
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
|
||||
const jsPromise = glob(jsglob, (err, files) => {
|
||||
const fl = files.length - 1;
|
||||
files.forEach((file, i) => {
|
||||
if (file.indexOf('.html.js') > 0) {
|
||||
return
|
||||
}
|
||||
const componentName = file.split('/')
|
||||
.filter((item, i, arr) => i === arr.length - 1)
|
||||
.map(name => {
|
||||
|
||||
// Write filename with '_' prefix
|
||||
// for middleman partials use case
|
||||
return '_' + name.split('.')[0];
|
||||
})[0];
|
||||
|
||||
const fileName = DIST_DIR + '/' + componentName + '.js';
|
||||
let jsCode = fs.readFileSync(file, "utf8");
|
||||
const removeExports = /(^module\.exports.*)/gm
|
||||
jsCode = jsCode.replace(removeExports, "");
|
||||
|
||||
const transpiled = babel.transform(jsCode, {
|
||||
env: "production",
|
||||
presets: ["es2015"]
|
||||
});
|
||||
|
||||
fs.writeFileSync(fileName, transpiled.code);
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
const htmlPromise = new Promise((resolve, reject) => {
|
||||
|
||||
glob(jshtmlglob, (err, files) => {
|
||||
const fl = files.length - 1;
|
||||
log(chalk.white('Start building algolia components'));
|
||||
log(chalk.white('Output to ', chalk.bold.underline(DIST_DIR)));
|
||||
|
||||
files.forEach((file, i) => {
|
||||
// Get component name from /path/to/file
|
||||
const componentName = file.split('/')
|
||||
.filter((item, i, arr) => i === arr.length - 1)
|
||||
.map(name => {
|
||||
|
||||
// Write filename with '_' prefix
|
||||
// for middleman partials use case
|
||||
return '_' + name.split('.')[0];
|
||||
})[0];
|
||||
|
||||
log(chalk.white('Building partial ->'), chalk.bold(componentName));
|
||||
|
||||
// Filename with path to dist dir
|
||||
const fileName = DIST_DIR + '/' + componentName + outputMode;
|
||||
// Require component
|
||||
const component = require(file);
|
||||
// Call it's render function
|
||||
const html = component({}, assets);
|
||||
|
||||
// Write file
|
||||
fs.writeFileSync(fileName, html);
|
||||
if (i === fl) {
|
||||
resolve({ message: 'Finished html assets' });
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const cssPromise = new Promise((resolve, reject) => {
|
||||
|
||||
glob(cssglob, (err, files) => {
|
||||
const fl = files.length - 1;
|
||||
files.forEach((file, i) => {
|
||||
const componentName = file.split('/')
|
||||
.filter((item, i, arr) => i === arr.length - 1)
|
||||
.map(name => {
|
||||
|
||||
// Write filename with '_' prefix
|
||||
// for middleman partials use case
|
||||
return '_' + name.split('.')[0];
|
||||
})[0];
|
||||
|
||||
const cssContent = fs.readFileSync(file, "utf8");
|
||||
|
||||
const result = sass.render({
|
||||
file: file,
|
||||
includePaths: [scssResolvePath]
|
||||
}, (err, result) => {
|
||||
if (err) { reject(err) }
|
||||
|
||||
fs.writeFileSync(DIST_DIR + '/' + componentName + '.css', result.css.toString());
|
||||
});
|
||||
if (i === fl) {
|
||||
resolve({ message: 'Finished CSS assets' });
|
||||
}
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
Promise.all([htmlPromise, cssPromise]).then((data) => {
|
||||
resolve('completed');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
buildAssets.then(data => {
|
||||
bar.complete = true;
|
||||
})
|
||||
|
||||
module.exports = buildAssets;
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const glob = require('glob');
|
||||
const buildAssets = require('./build.js');
|
||||
|
||||
const COMPONENT_DIR = path.resolve(__dirname, './../components');
|
||||
const FILE_GLOB = COMPONENT_DIR + "/**/*";
|
||||
|
||||
glob(FILE_GLOB, (err, files) => {
|
||||
files.forEach(file => {
|
||||
fs.watch(file, (eventType, filename) => {
|
||||
buildAssets();
|
||||
});
|
||||
})
|
||||
});
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
${require('./../components/communityHeader/communityHeader.html.js')({
|
||||
menu:{
|
||||
community: {
|
||||
"dropdownItems": [
|
||||
{
|
||||
"name": "React InstantSearch",
|
||||
"url": "https://community.algolia.com/instantsearch.js/react",
|
||||
"logo": "wordpress",
|
||||
"backgroundColor": "linear-gradient(to bottom left, #2C5EE2 0%, #17204F 150%)"
|
||||
},
|
||||
{
|
||||
"name": "instantsearch.js",
|
||||
"url": "https://community.algolia.com/instantsearch.js/",
|
||||
"logo": "https://community.algolia.com/assets/images/logo-is.svg",
|
||||
"backgroundColor": "#385D72"
|
||||
},{
|
||||
"name": "Shopify",
|
||||
"url": "https://community.algolia.com/shopify",
|
||||
"logo": "shopify",
|
||||
"backgroundColor": "linear-gradient(to bottom left, #29D98D, #03A8F6 450%)"
|
||||
},
|
||||
{
|
||||
"name": "Helper.js",
|
||||
"url": "https://community.algolia.com/algoliasearch-helper-js/",
|
||||
"logo": "https://community.algolia.com/assets/images/logo-helper.svg",
|
||||
"backgroundColor": "#FDBD57"
|
||||
},{
|
||||
"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)"
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
sideMenu:[
|
||||
{ name: "Test", dropdownItems: [ {name: "test" },{name: "test2" }]},
|
||||
{ name: "Test", dropdownItems: [ {name: "test" },{name: "test2" }]},
|
||||
{ name: "Github", image:" <img src='https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png'/>", dropdownItems: [ {name: "Magento 1"}, {name: "Magento2"}]}
|
||||
]
|
||||
}, assets)}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
|
||||
import base from './../stylesheets/_base.scss';
|
||||
import css from './../components/communityHeader/communityHeader.scss';
|
||||
import communityHeader from './../components/communityHeader/communityHeader';
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
var header = new communityHeader({
|
||||
apiKey: '52641df1ce4919ba42eb84595f4825c7',
|
||||
indexName: 'wordpress_algolia',
|
||||
inputSelector: '#searchbox'
|
||||
});
|
||||
});
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
const webpack = require('webpack');
|
||||
const path = require('path');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const server = require('webpack-dev-server');
|
||||
|
||||
process.env.webpack = true;
|
||||
|
||||
let a = require('./../build/assets');
|
||||
|
||||
const plugins = [
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new HtmlWebpackPlugin({
|
||||
template: path.join(process.cwd(), '/build/index.html'),
|
||||
inject: true,
|
||||
}),
|
||||
new webpack.DefinePlugin({
|
||||
'assets': JSON.stringify(a)
|
||||
}),
|
||||
]
|
||||
|
||||
const config = {
|
||||
entry: [
|
||||
path.join(process.cwd(),'build/preview.js')
|
||||
],
|
||||
|
||||
output: {
|
||||
path: path.resolve(process.cwd(), '/'),
|
||||
publicPath: '/',
|
||||
filename: '[name].js'
|
||||
},
|
||||
|
||||
module: {
|
||||
|
||||
rules: [
|
||||
{
|
||||
test: /\.(js)$/,
|
||||
exclude: [
|
||||
/node_modules/
|
||||
],
|
||||
loader: 'babel-loader',
|
||||
},
|
||||
{
|
||||
test: /\.svg$/,
|
||||
use: 'raw-loader'
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: [ {loader:'style-loader'}, {loader: 'css-loader'}, {loader:'sass-loader'}]
|
||||
},
|
||||
{
|
||||
test: /\.html$/,
|
||||
use: [
|
||||
{loader: 'html-loader', options: { interpolate: true}}
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.json$/,
|
||||
loader: 'json-loader',
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
resolve: {
|
||||
modules: ['.', 'node_modules', process.cwd()],
|
||||
extensions: [
|
||||
'.js',
|
||||
'.scss',
|
||||
'.svg'
|
||||
]
|
||||
},
|
||||
|
||||
plugins: plugins,
|
||||
|
||||
devServer: {
|
||||
historyApiFallback: true,
|
||||
hot: true,
|
||||
inline: true
|
||||
},
|
||||
}
|
||||
|
||||
module.exports = config;
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
{
|
||||
"menu": {
|
||||
"community": {
|
||||
"style": "widelist",
|
||||
"view": "integrations",
|
||||
"label": "",
|
||||
"caret": "",
|
||||
"dropdownItems": [{
|
||||
"name": "React InstantSearch",
|
||||
"url": "https://community.algolia.com/instantsearch.js/react",
|
||||
"logo": "InstantSearchReact",
|
||||
"backgroundColor": "linear-gradient(to bottom left, #2C5EE2 0%, #17204F 150%)"
|
||||
}, {
|
||||
"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/assets/images/illus-autocomplete.svg",
|
||||
"backgroundColor": "#00587f"
|
||||
}, {
|
||||
"name": "instantsearch.js",
|
||||
"url": "https://community.algolia.com/instantsearch.js/",
|
||||
"logo": "https://community.algolia.com/assets/images/logo-is.svg",
|
||||
"backgroundColor": "#385D72"
|
||||
}, {
|
||||
"name": "Helper.js",
|
||||
"url": "https://community.algolia.com/algoliasearch-helper-js/",
|
||||
"logo": "https://community.algolia.com/assets/images/logo-helper.svg",
|
||||
"backgroundColor": "#FDBD57"
|
||||
}, {
|
||||
"name": "Magento",
|
||||
"url": "https://community.algolia.com/magento/",
|
||||
"logo": "https://res.cloudinary.com/hilnmyskv/image/upload/v1477318624/magento-icon-white.svg",
|
||||
"backgroundColor": "linear-gradient(to bottom right, #ed9259, #e76d22)"
|
||||
}]
|
||||
},
|
||||
"project": {
|
||||
"view": "links",
|
||||
"label": "Shopify plugin",
|
||||
"logo": "",
|
||||
"caret": "",
|
||||
"dropdownItems": []
|
||||
}
|
||||
},
|
||||
"mobileMenu": [{
|
||||
"name": "Install",
|
||||
"url": "",
|
||||
"image": "",
|
||||
"target": ""
|
||||
}],
|
||||
"sideMenu": [{
|
||||
"name": "Install",
|
||||
"url": "https://community.algolia.com/shopify/try.html",
|
||||
"image": "",
|
||||
"target": "",
|
||||
"dropdownItems": []
|
||||
}],
|
||||
"docSearch": {
|
||||
"input_selector": "searchbox",
|
||||
"input_selector_placeholder": "Search the docs",
|
||||
"input_mobile_selector": "mobile-searchbox",
|
||||
"input_search_icon": "<img src='/images/icons/search-icon.svg'/>",
|
||||
"input_cancel_icon": "<img src='/images/icons/cancel-icon.svg'/>",
|
||||
"input_open_on_init": false
|
||||
}
|
||||
}
|
||||
|
|
@ -1,228 +0,0 @@
|
|||
let data = {};
|
||||
const merge = require('deepmerge');
|
||||
let assets = require('./../../build/assets');
|
||||
|
||||
try {
|
||||
data = require('./communityHeader.data.json');
|
||||
} catch (e) {
|
||||
data = require('./communityHeader.example.json');
|
||||
}
|
||||
|
||||
/**
|
||||
* Render item template
|
||||
* @param {[type]} t [template item]
|
||||
* @return {[String]} [rendered template]
|
||||
*/
|
||||
const renderDropdownItem = (done, t, assets) => {
|
||||
const isSvgTile = assets[t.logo] ? assets[t.logo] : false;
|
||||
return done += `
|
||||
<li>
|
||||
<div class="dropdown-item">
|
||||
<a href="${t.url || "#"}" ${t.target ? `target=${t.target}`: ""}>
|
||||
${isSvgTile ? `<span class="item-icon" style="background: ${t.backgroundColor}">${isSvgTile}</svg></span>` : `<span class="item-icon" style="background: ${t.backgroundColor}"><img src="${t.logo || ""}" alt="${t.name || ""}"/></span>`}
|
||||
<h4>${t.name}</h4>
|
||||
</a>
|
||||
</div>
|
||||
</li>`;
|
||||
}
|
||||
|
||||
const renderDropdownList = (data, assets) => {
|
||||
|
||||
let entireList = "";
|
||||
|
||||
Object.keys(data).forEach(list => {
|
||||
const listItem = data[list];
|
||||
const listArray = listItem.dropdownItems;
|
||||
let listString = `
|
||||
<div class="algc-dropdownroot__section">
|
||||
<div class="algc-dropdownroot__content" data-dropdown-content="${listItem.view.toLowerCase()}">
|
||||
<ul class="algc-dropdownroot__${listItem.style || 'widelist'}">`;
|
||||
|
||||
listString += listArray.reduce((prev, next, i) => renderDropdownItem(prev, next, assets), "");
|
||||
listString +=
|
||||
`</ul>
|
||||
<div class="algc-dropdownroot__footer">
|
||||
<a href="https://discourse.algolia.com/?utm_medium=social-owned&utm_source=communityHeader">
|
||||
<span style="font-weight:bold;">Community Forum</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
entireList += listString;
|
||||
});
|
||||
return entireList;
|
||||
}
|
||||
|
||||
const renderMenu = ({ label, type, dropdownItems, logo, view, url, target }) => {
|
||||
const link = (!dropdownItems || dropdownItems.length === 0) ? "#" : url
|
||||
return `
|
||||
<li class="algc-navigation__li">
|
||||
<a class='algc-badge algc-navigation__navitem' href='${url} ${target ? `target=${target}`: ""}'
|
||||
data-dropdown="${ view.toLowerCase() }" data-enabledropdown="${ dropdownItems.length > 0 }">
|
||||
<svg class="algc-arrowseparator" viewBox="0 0 18 35" xmlns="http://www.w3.org/2000/svg"><g id="Symbols" fill="none" fill-rule="evenodd"><g id="community/header" fill="#3369E6"><g id="Group-13"><g id="Group-2"><path id="Combined-Shape-Copy" d="M1.8537 34.7643l15.5597-17.268L1.8537 0H0l15.5597 17.4964L0 34.7644z"/></g></g></g></g></svg>
|
||||
${logo !== "" ? logo : ""}
|
||||
${label ? `<span>${ label }</span>`: ""}
|
||||
</a>
|
||||
</li>`
|
||||
}
|
||||
|
||||
const renderMenuList = (data) => {
|
||||
let entireList = "";
|
||||
const listItem = data["project"];
|
||||
entireList += renderMenu(listItem);
|
||||
|
||||
return entireList;
|
||||
}
|
||||
|
||||
const renderDocSearch = (docSearch, assets) => {
|
||||
if(!docSearch) return ""
|
||||
|
||||
return `
|
||||
<div class='algc-menu__search'>
|
||||
<div class='algc-menu__search--holder${docSearch.input_open_on_init ? ` open` : ""}'>
|
||||
<div class='algc-search__input algc-search__input--docsearch'>
|
||||
<input id='${docSearch.input_selector}' placeholder='${docSearch.input_selector_placeholder}' type='search'>
|
||||
<button id='search'>
|
||||
${assets['searchIcon']}
|
||||
</button>
|
||||
<button id='cancel'>
|
||||
${assets['searchCloseIcon']}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
const renderRightList = (sideList) => {
|
||||
if(!sideList.length) return;
|
||||
let markup = "<ul class='algc-menu__list'>"
|
||||
|
||||
markup += sideList.reduce((prev,next) => renderRightListItem(prev,next),"");
|
||||
markup += "</ul>"
|
||||
|
||||
return markup;
|
||||
}
|
||||
|
||||
const renderRightListItem = (prev, data) => {
|
||||
if(data.image){
|
||||
return prev += `
|
||||
<li class="algc-menu__list__item ${data.dropdownItems && data.dropdownItems.length ? "algc-menu--hassublist" : ""}">
|
||||
<a href="${data.url || "#"}"
|
||||
${data.target ? `target=${data.target}`: ""}
|
||||
class="${data.dropdownItems && data.dropdownItems.length ? "algc-menu--sublistlink" : ""}">
|
||||
${data.image}
|
||||
${ renderGlyph(data) }
|
||||
</a>
|
||||
${renderSubList(data.dropdownItems)}
|
||||
</li>`;
|
||||
} else {
|
||||
return prev += `
|
||||
<li class="algc-menu__list__item ${data.dropdownItems && data.dropdownItems.length ? "algc-menu--hassublist" : ""}">
|
||||
<a href="${data.url || "#"}" ${data.target ? `target=${data.target}`: ""} class="${data.dropdownItems && data.dropdownItems.length ? "algc-menu--sublistlink" : ""}">
|
||||
${data.name}
|
||||
${ renderGlyph(data) }
|
||||
</a>
|
||||
${renderSubList(data.dropdownItems)}
|
||||
</li>`
|
||||
}
|
||||
}
|
||||
|
||||
const renderGlyph = (data) => {
|
||||
if(data.dropdownItems && data.dropdownItems.length){
|
||||
return '<span class="algc-glyph">▼</span>'
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
const renderSubList = (subList) => {
|
||||
if(!subList || !subList.length) return "";
|
||||
let markup = "<ul class='algc-menu__sublist'>";
|
||||
markup += subList.reduce((prev,next) => renderSubListItem(prev,next),"");
|
||||
markup += "</ul>";
|
||||
|
||||
return markup;
|
||||
}
|
||||
|
||||
const renderSubListItem = (prev, data) => {
|
||||
return prev += `
|
||||
<li>
|
||||
<a href="${data.url || "#"}" ${data.target ? `target=${data.target}`: ""}>${data.name}</a>
|
||||
</li>
|
||||
`
|
||||
}
|
||||
|
||||
const renderMobileMenu = (sideList) => {
|
||||
if(!sideList.length) return;
|
||||
let markup = "<div class='algc-mobilemenu'><div class='algc-mobilemenuwrapper'><ul class='algc-mobilemenulist'>"
|
||||
markup += sideList.reduce((prev,next) => renderMobileMenuItem(prev,next),"");
|
||||
markup += "</ul></div></div>"
|
||||
return markup;
|
||||
}
|
||||
|
||||
const renderMobileMenuItem = (prev, data) => {
|
||||
if(data.image){
|
||||
return prev += `
|
||||
<li class="algc-mobilemenu__item">
|
||||
<a href="${data.url || "#"}" ${data.target ? `target=${data.target}`: ""}>
|
||||
${data.image}
|
||||
${data.name ? data.name : ""}
|
||||
</a>
|
||||
</li>`;
|
||||
} else {
|
||||
return prev += `
|
||||
<li class="algc-mobilemenu__item">
|
||||
<a href="${data.url || "#"}" ${data.target ? `target=${data.target}`: ""}>
|
||||
${data.name}
|
||||
</a>
|
||||
</li>`
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = function(paramData = {}, assetParams = {}){
|
||||
const d = merge(data, paramData);
|
||||
const a = merge(assets, assetParams);
|
||||
return `<!-- Start community header -->
|
||||
<nav class='algc-navigation'>
|
||||
<div class='algc-navigation__container'>
|
||||
<div class='algc-mainmenu'>
|
||||
<ul class='algc-navigation__brands'>
|
||||
<li class='algc-navigation__li algc-navigation__li--algolia'>
|
||||
<a href='https://www.algolia.com/'>
|
||||
${a['algoliaLogo']}
|
||||
</a>
|
||||
</li>
|
||||
<li class='algc-navigation__li algc-navigation__li--community'>
|
||||
<a href='https://community.algolia.com/' data-enabledropdown="true" data-dropdown="integrations">
|
||||
<svg class="algc-arrowseparator" viewBox="0 0 18 35" xmlns="http://www.w3.org/2000/svg"><g id="Symbols" fill="none" fill-rule="evenodd"><g id="community/header" fill="#3369E6"><g id="Group-13"><g id="Group-2"><path id="Combined-Shape-Copy" d="M1.8537 34.7643l15.5597-17.268L1.8537 0H0l15.5597 17.4964L0 34.7644z"/></g></g></g></g></svg>
|
||||
${a['communityLogo']}
|
||||
${a['iconSeparator']}
|
||||
</a>
|
||||
</li>
|
||||
${renderMenuList(d.menu)}
|
||||
</ul>
|
||||
|
||||
<div class='algc-navigation__menu'>
|
||||
${renderDocSearch(d.docSearch, a)}
|
||||
${renderRightList(d.sideMenu)}
|
||||
<button class='algc-openmobile'><span></span></button>
|
||||
</div>
|
||||
|
||||
<div class='algc-navigation__dropdown-holder'>
|
||||
<div class='algc-dropdownroot notransition'>
|
||||
<div class='algc-dropdownroot__dropdownbg'></div>
|
||||
<div class='algc-dropdownroot__dropdownarrow'></div>
|
||||
<div class='algc-dropdownroot__dropdowncontainer'>
|
||||
${renderDropdownList(d.menu, a)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${renderMobileMenu(d.mobileMenu)}
|
||||
|
||||
</nav>
|
||||
<!-- End community_header --> `;
|
||||
}
|
||||
|
|
@ -1,280 +0,0 @@
|
|||
/**
|
||||
* Main header function with docsearch
|
||||
* @param {Object} docSearch config
|
||||
*/
|
||||
|
||||
class communityHeader {
|
||||
|
||||
constructor(docSearchCredentials, docSearch) {
|
||||
this.docSearchCredentials = docSearchCredentials;
|
||||
this.docSearch = docSearch || null;
|
||||
|
||||
this.menuState = {
|
||||
isOpen: false,
|
||||
isOpenMobile: false
|
||||
}
|
||||
|
||||
this.INIT_VAL = {
|
||||
WIDTH: 490,
|
||||
HEIGHT: 360
|
||||
}
|
||||
|
||||
this.disableTransitionTimeout;
|
||||
|
||||
this.searchIcon = document.querySelector('#search');
|
||||
this.cancelIcon = document.querySelector('#cancel');
|
||||
this.searchInputContainer = document.querySelector('.algc-search__input');
|
||||
this.searchContainer = this.searchInputContainer ? this.searchInputContainer.parentNode : null;
|
||||
this.navRoot = document.querySelector('.algc-dropdownroot');
|
||||
this.dropdownRoot = document.querySelector('.algc-navigation__dropdown-holder');
|
||||
this.navItems = document.querySelectorAll('a[data-enabledropdown="true"]');
|
||||
this.navContainer = document.querySelector('.algc-dropdownroot__dropdowncontainer');
|
||||
this.menuContainer = document.querySelector('.algc-navigation__container');
|
||||
this.navBg = document.querySelector('.algc-dropdownroot__dropdownbg');
|
||||
this.navArrow = document.querySelector('.algc-dropdownroot__dropdownarrow');
|
||||
this.dropDownContainer = document.querySelector('.algc-dropdownroot__dropdowncontainer');
|
||||
this.menuTriggers = document.querySelectorAll('[data-enabledropdown="true"]');
|
||||
this.mobileMenuButton = document.querySelector('.algc-openmobile ');
|
||||
this.mobileMenu = document.querySelector('.algc-mobilemenu');
|
||||
this.subList = document.querySelectorAll('.algc-menu--sublistlink');
|
||||
this.subListHolders = [...this.subList].map(node => node.parentNode);
|
||||
this.menuDropdowns = {};
|
||||
|
||||
[].forEach.call(document.querySelectorAll('[data-dropdown-content]'), (item) => {
|
||||
this.menuDropdowns[item.dataset.dropdownContent] = {
|
||||
parent: item.parentNode,
|
||||
content: item
|
||||
}
|
||||
});
|
||||
|
||||
this.shouldInitDocSearch = this.shouldInitDocSearch.bind(this);
|
||||
this.docSearchInit = this.checkDocSearch(docSearch);
|
||||
this.enableDocSearch = this.verifyDocSearchParams(docSearchCredentials);
|
||||
this.hasDocSearchRendered = document.querySelector('.algc-navigation .algc-search__input--docsearch');
|
||||
this.triggerMenu = this.triggerMenu.bind(this);
|
||||
this.shouldTriggerMenu = this.shouldTriggerMenu.bind(this);
|
||||
this.closeMenu = this.closeMenu.bind(this);
|
||||
this.toggleMobileMenu = this.toggleMobileMenu.bind(this);
|
||||
this.docSearchToggling = this.docSearchToggling.bind(this);
|
||||
this.initDocSearchStrategy = this.initDocSearchStrategy.bind(this);
|
||||
this.openSublist = this.openSublist.bind(this);
|
||||
this.closeSubLists = this.closeSubLists.bind(this);
|
||||
this.bindListeners = this.bindListeners.bind(this);
|
||||
|
||||
this.calculatePosition = this.calculatePosition.bind(this);
|
||||
|
||||
this.verifyDocSearchParams();
|
||||
this.shouldInitDocSearch();
|
||||
this.initDocSearchStrategy();
|
||||
this.bindListeners();
|
||||
}
|
||||
|
||||
calculatePosition(sourceNode) {
|
||||
const box = sourceNode.getBoundingClientRect();
|
||||
const realWidth = sourceNode.offsetWidth;
|
||||
const realHeight = sourceNode.offsetHeight;
|
||||
|
||||
return {
|
||||
left: box.left,
|
||||
top: box.top,
|
||||
width: box.width,
|
||||
height: box.height,
|
||||
realWidth: realWidth,
|
||||
realHeight: realHeight,
|
||||
center: box.left + box.width / 2
|
||||
}
|
||||
}
|
||||
|
||||
shouldInitDocSearch() {
|
||||
if (!this.enableDocSearch && this.hasDocSearchRendered) {
|
||||
throw new Error('You need to pass docSearch: { apiKey, indexName, inputSelector } to communityHeader function in order to initialise docSearch');
|
||||
}
|
||||
}
|
||||
|
||||
checkDocSearch(docSearch = false) {
|
||||
if (docSearch) return docSearch;
|
||||
|
||||
if (typeof window.docsearch === "function" || typeof docsearch === "function") {
|
||||
return docsearch;
|
||||
}
|
||||
}
|
||||
|
||||
verifyDocSearchParams(docSearchCredentials) {
|
||||
return (docSearchCredentials &&
|
||||
docSearchCredentials.apiKey &&
|
||||
docSearchCredentials.indexName &&
|
||||
docSearchCredentials.inputSelector) ? true : false;
|
||||
}
|
||||
|
||||
triggerMenu(event) {
|
||||
|
||||
const dropdown = event.target.dataset.dropdown;
|
||||
const newTarget = this.menuDropdowns[dropdown].content;
|
||||
const newContent = this.menuDropdowns[dropdown].parent;
|
||||
|
||||
const navItem = this.calculatePosition(event.target);
|
||||
const newTargetCoordinates = this.calculatePosition(newTarget);
|
||||
const menuContainerOffset = this.calculatePosition(this.menuContainer);
|
||||
let leftDistance;
|
||||
|
||||
const scaleFactors = {
|
||||
X: newTargetCoordinates.realWidth / this.INIT_VAL.WIDTH,
|
||||
Y: newTargetCoordinates.realHeight / this.INIT_VAL.HEIGHT
|
||||
}
|
||||
|
||||
leftDistance = (navItem.center - menuContainerOffset.left) + "px";
|
||||
|
||||
if(menuContainerOffset.left < 20){
|
||||
leftDistance = "calc(50% - 36px)"
|
||||
}
|
||||
|
||||
this.navBg.style.cssText = `
|
||||
transform: translateX(${leftDistance}) scale(${scaleFactors.X}, ${scaleFactors.Y})`;
|
||||
|
||||
this.navArrow.style.cssText = `
|
||||
transform: translateX(${leftDistance}) rotate(45deg)`;
|
||||
|
||||
this.dropDownContainer.style.cssText = `
|
||||
transform: translateX(${leftDistance});
|
||||
width: ${newTargetCoordinates.realWidth}px;
|
||||
height: ${newTargetCoordinates.realHeight + 10}px;`;
|
||||
|
||||
this.dropdownRoot.style.pointerEvents = "auto";
|
||||
|
||||
Object.keys(this.menuDropdowns).forEach(key => {
|
||||
if (key === dropdown) {
|
||||
this.menuDropdowns[key].parent.classList.add('active');
|
||||
} else {
|
||||
this.menuDropdowns[key].parent.classList.remove('active');
|
||||
}
|
||||
})
|
||||
|
||||
if (!this.menuState.isOpen) {
|
||||
setTimeout(() => {
|
||||
this.navRoot.className = "algc-dropdownroot activeDropdown";
|
||||
}, 50);
|
||||
}
|
||||
|
||||
window.clearTimeout(this.disableTransitionTimeout);
|
||||
this.menuState.isOpen = true;
|
||||
}
|
||||
|
||||
shouldTriggerMenu(event) {
|
||||
if(this.menuState.isOpen) {
|
||||
this.triggerMenu(event);
|
||||
} else {
|
||||
this.triggerMenuTimeout = setTimeout(()=>{
|
||||
this.triggerMenu(event);
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
|
||||
closeMenu(event) {
|
||||
window.clearTimeout(this.triggerMenuTimeout);
|
||||
this.menuState.isOpen = false;
|
||||
this.disableTransitionTimeout = setTimeout(() => {
|
||||
this.dropdownRoot.style.pointerEvents = "none";
|
||||
this.navRoot.className = "algc-dropdownroot notransition"
|
||||
}, 50);
|
||||
}
|
||||
|
||||
toggleMobileMenu(event) {
|
||||
this.mobileMenuButton.classList.toggle('algc-openmobile--open');
|
||||
this.mobileMenu.classList.toggle('algc-mobilemenu--open');
|
||||
}
|
||||
|
||||
// Search
|
||||
docSearchToggling() {
|
||||
this.searchInput = document.querySelector(this.docSearchCredentials.inputSelector);
|
||||
const openSearchInput = () => {
|
||||
this.searchContainer.classList.add('open');
|
||||
this.searchInput.focus();
|
||||
}
|
||||
|
||||
const closeSearchInput = () => {
|
||||
this.searchInput.blur();
|
||||
this.searchContainer.classList.remove('open');
|
||||
}
|
||||
|
||||
const emptySearchInput = () => {
|
||||
if (this.searchInput.value !== '') {
|
||||
this.searchInput.value = '';
|
||||
} else {
|
||||
closeSearchInput();
|
||||
}
|
||||
}
|
||||
this.searchInput.setAttribute('value', '');
|
||||
this.searchIcon.addEventListener('click', openSearchInput);
|
||||
this.cancelIcon.addEventListener('click', emptySearchInput);
|
||||
};
|
||||
|
||||
initDocSearch() {
|
||||
this.docSearchToggling();
|
||||
this.docSearchInit(this.docSearchCredentials);
|
||||
}
|
||||
|
||||
initDocSearchStrategy() {
|
||||
if (this.enableDocSearch && typeof this.docSearchInit === "function") {
|
||||
this.initDocSearch();
|
||||
|
||||
} else if (this.docSearch === "lazy") {
|
||||
|
||||
const docSearchScript = document.createElement('script');
|
||||
docSearchScript.type = 'text/javascript';
|
||||
docSearchScript.async = true;
|
||||
document.body.appendChild(docSearchScript);
|
||||
|
||||
docSearchScript.onload = () => {
|
||||
this.docSearchInit = docsearch;
|
||||
this.initDocSearch();
|
||||
};
|
||||
|
||||
docSearchScript.src = "https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js";
|
||||
}
|
||||
}
|
||||
|
||||
openSublist(node) {
|
||||
const parent = node.parentNode;
|
||||
this.subListHolders.forEach(holder => {
|
||||
if (holder === parent && !parent.classList.contains('open')) {
|
||||
holder.classList.add('open');
|
||||
} else {
|
||||
holder.classList.remove('open');
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
closeSubLists(event) {
|
||||
this.subListHolders.forEach(holder => holder.classList.remove('open'));
|
||||
}
|
||||
|
||||
bindListeners() {
|
||||
var that = this;
|
||||
this.subList.forEach(link => {
|
||||
link.addEventListener('click', function(event){
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
that.openSublist(this);
|
||||
});
|
||||
});
|
||||
|
||||
this.menuTriggers.forEach(item => {
|
||||
item.addEventListener('mouseenter', this.shouldTriggerMenu);
|
||||
item.addEventListener('focus', this.triggerMenu);
|
||||
});
|
||||
|
||||
this.navItems.forEach(item => {
|
||||
item.addEventListener('mouseleave', this.closeMenu);
|
||||
});
|
||||
|
||||
this.navContainer.addEventListener('mouseenter', () => {
|
||||
clearTimeout(this.disableTransitionTimeout);
|
||||
});
|
||||
|
||||
this.mobileMenuButton.addEventListener('click', this.toggleMobileMenu);
|
||||
document.addEventListener('click', this.closeSubLists);
|
||||
document.querySelector('.algc-dropdownroot__dropdowncontainer').addEventListener('mouseleave', this.closeMenu);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = communityHeader
|
||||
|
|
@ -1,957 +0,0 @@
|
|||
@import "./../../stylesheets/_variables.scss";
|
||||
@import "./../../stylesheets/_functions.scss";
|
||||
@import "./../../stylesheets/_mixins.scss";
|
||||
|
||||
$nav-height: 56px;
|
||||
$nav-z-index: 50;
|
||||
$nav-background: $deep-cove;
|
||||
$nav-background-medium: mix($nav-background, #fff, 96%);
|
||||
$nav-background-light: mix($nav-background, #fff, 92%);
|
||||
|
||||
.algc-navigation {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
padding: 0 1em;
|
||||
z-index: $z-top;
|
||||
position: fixed;
|
||||
perspective: 2000px;
|
||||
transform-style: preserve-3d;
|
||||
background: $nav-background;
|
||||
font-size: 1em;
|
||||
will-change: transform;
|
||||
|
||||
@media (max-width: $breakpoint-sm){
|
||||
padding: 0 .5em;
|
||||
}
|
||||
|
||||
.algc-mainmenu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.algc-navigation__container{
|
||||
margin: 0 auto;
|
||||
max-width: $container-max-width;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.algc-navigation__brands {
|
||||
height: $nav-height;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
float: left;
|
||||
font-weight: $light;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
z-index: $z-1;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:visited {
|
||||
color: white;
|
||||
}
|
||||
|
||||
img,svg {
|
||||
max-width: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
.algc-navigation__li {
|
||||
float: left;
|
||||
text-align: center;
|
||||
min-height: 33px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media (min-width: $breakpoint-md) and (max-width: $breakpoint-lg) {
|
||||
|
||||
&:nth-child(2) {
|
||||
padding-left: 0;
|
||||
|
||||
img,svg {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.algc-arrowseparator {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
|
||||
&:nth-child(2) {
|
||||
a { padding-left: 0; }
|
||||
.algc-arrowseparator { display: none; }
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
|
||||
&:nth-child(2) {
|
||||
width: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding-right: 12px;
|
||||
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
padding: 0 1.2em;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: 0 .8em
|
||||
}
|
||||
}
|
||||
|
||||
.algc-navigation__li--algolia {
|
||||
|
||||
a {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.algolia-logo {
|
||||
width: auto;
|
||||
height: 23px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.algc-navigation__li--community {
|
||||
|
||||
a {
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
.algolia-community-logo{
|
||||
width: auto;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//---------------------------
|
||||
// Dropdown starts here
|
||||
//---------------------------
|
||||
.algc-navigation__dropdown-holder {
|
||||
position: absolute;
|
||||
top: $nav-height - 14px;
|
||||
left: 25px;
|
||||
max-width: 490px;
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
-webkit-perspective: 500px;
|
||||
perspective: 500px;
|
||||
pointer-events: none;
|
||||
font-size: 1.2em;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
left:0;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.algc-dropdownroot {
|
||||
top: 4px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transform-origin: 50% -50px;
|
||||
transition-property: transform, opacity;
|
||||
transition-duration: .25s;
|
||||
will-change: transform, opacity;
|
||||
pointer-events: none;
|
||||
z-index: $z-top;
|
||||
transform: rotateX(-15deg) translate(-50%, 0%);
|
||||
|
||||
&.notransition {
|
||||
|
||||
.algc-dropdownroot__dropdowncontainer,
|
||||
.algc-dropdownroot__dropdownbg,
|
||||
.algc-dropdownroot__section,
|
||||
.algc-dropdownroot__dropdownarrow {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.activeDropdown {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
pointer-events: all;
|
||||
|
||||
.algc-dropdownroot__dropdownbg {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transform-origin: 50% 0;
|
||||
}
|
||||
}
|
||||
|
||||
.algc-dropdownroot__dropdownbg {
|
||||
left: 0;
|
||||
top: 10px;
|
||||
box-shadow: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1);
|
||||
border-radius: 4px;
|
||||
transform-origin: 50% 0;
|
||||
background-color: #FFF;
|
||||
transition-property: transform, opacity;
|
||||
transition-duration: .25s;
|
||||
position: absolute;
|
||||
width: 490px;
|
||||
height: 360px;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.algc-dropdownroot__dropdownarrow {
|
||||
left: 50%;
|
||||
top: 6px;
|
||||
background-color: #FFF;
|
||||
box-shadow: -3px -3px 5px rgba(82, 95, 127, .04);
|
||||
will-change: transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
transition-duration: .25s;
|
||||
transform: rotate(45deg) translate(-50%, 0);
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.algc-dropdownroot__dropdowncontainer {
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
will-change: transform, width, height;
|
||||
transition-property: transform, width, height;
|
||||
transition-duration: .25s;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm){
|
||||
|
||||
transform: translate(0,0) rotateX(-15deg);
|
||||
|
||||
&.activeDropdown {
|
||||
transform: rotateX(0deg) translate(0,0) !important;
|
||||
}
|
||||
|
||||
.algc-dropdownroot__dropdownbg {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.algc-dropdownroot__widelist {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.algc-dropdownroot__content {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.algc-dropdownroot__section {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.algc-dropdownroot__dropdowncontainer {
|
||||
width: 100% !important;
|
||||
max-width: 100%;
|
||||
transform: translate(0,0) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.algc-dropdownroot__section {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
will-change: transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
transition-duration: .25s;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
z-index: $z-1
|
||||
}
|
||||
|
||||
&.right {
|
||||
transform: translateX(150px);
|
||||
}
|
||||
|
||||
&.left {
|
||||
transform: translateX(-150px);
|
||||
}
|
||||
|
||||
.algc-dropdownroot__content {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.algc-dropdownroot__widelist {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
width: 450px;
|
||||
padding: em(10) em(20);
|
||||
margin: 0;
|
||||
background-color: $titan-white;
|
||||
|
||||
li {
|
||||
flex: 50%;
|
||||
border-radius: 3px;
|
||||
margin: .5em auto;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
color: #333333;
|
||||
background-color: $titan-white;
|
||||
border-radius: 4px;
|
||||
transition: background 160ms ease;
|
||||
|
||||
&:hover {
|
||||
color: darken(#333333, 10%);
|
||||
background-color: $athens-gray;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
font-size: $text-sm;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
margin: 8px;
|
||||
border-radius: 4px;
|
||||
text-align:center;
|
||||
position: relative;
|
||||
|
||||
img,
|
||||
svg {
|
||||
max-width: 60%;
|
||||
transition: transform 0.2s ease 0.15s;
|
||||
}
|
||||
}
|
||||
|
||||
svg,
|
||||
img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top:50%;
|
||||
max-width: 32px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.algc-dropdownroot__footer {
|
||||
text-align: center;
|
||||
font-size: $text-sm;
|
||||
transition: filter 0.2s ease, opacity 0.2s ease;
|
||||
will-change: filter, opacity;
|
||||
|
||||
a {
|
||||
padding: .8em 0;
|
||||
display: block;
|
||||
color: $nav-background;
|
||||
opacity: 0.8;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
img,
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.algc-dropdownroot__links {
|
||||
|
||||
list-style-type: none;
|
||||
padding: em(10) em(20);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 290px;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1 0 50%;
|
||||
padding: em(10) em(10);
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img,
|
||||
svg {
|
||||
margin-right: 5px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.algc-navigation__menu {
|
||||
float: right;
|
||||
height: $nav-height;
|
||||
line-height: $nav-height;
|
||||
font-weight: $light;
|
||||
z-index: $z-2;
|
||||
|
||||
.algc-menu__list {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
float: left;
|
||||
position: relative;
|
||||
z-index: $z-1;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__item {
|
||||
position: relative;
|
||||
height: $nav-height;
|
||||
line-height: $nav-height;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
|
||||
img,
|
||||
svg {
|
||||
height: $text-lg;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 0 .5em 0 .5em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.algc-glyph {
|
||||
margin-left: 1em;
|
||||
font-size: .4em;
|
||||
}
|
||||
|
||||
.algc-menu__list__item.algc-menu--hassublist.open {
|
||||
|
||||
.algc-menu__sublist {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
pointer-events: auto;
|
||||
transition: .25s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.algc-menu__sublist {
|
||||
pointer-events: none;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top:100%;
|
||||
background-color: white;
|
||||
list-style-type: none;
|
||||
background-color: #FFF;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 4px 0 rgba(31, 59, 93, 0.5);
|
||||
font-size: 14px;
|
||||
opacity:0;
|
||||
transition: .14s;
|
||||
transform: translate(0, 6px);
|
||||
will-change: opacity, transform;
|
||||
text-align: left;
|
||||
|
||||
&:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: -4px;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 3px;
|
||||
transform: rotate(45deg);
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
li:not(:last-child) {
|
||||
border-bottom: solid 1px #eee;
|
||||
}
|
||||
|
||||
li a {
|
||||
text-transform: none;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
border: none;
|
||||
display: block;
|
||||
padding: 1em 2em;
|
||||
clear: both;
|
||||
font-weight: normal;
|
||||
line-height: 1.42857;
|
||||
color: #333333;
|
||||
white-space: nowrap;
|
||||
font-size: 1em;
|
||||
|
||||
&:hover {
|
||||
color: darken(#333333, 10%);
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.algc-mobilemenu{
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
padding: 64px $text-sm 0 $text-sm;
|
||||
height: 100vh;
|
||||
background-color: $deep-cove;
|
||||
text-align: right;
|
||||
font-weight: $light;
|
||||
transform: translate(100%, 0);
|
||||
transition: transform 140ms ease-out,
|
||||
opacity 140ms 100ms ease-out;
|
||||
opacity: 0;
|
||||
will-change: transform;
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:before{
|
||||
width:100%;
|
||||
height:100vh;
|
||||
position: absolute;
|
||||
content: "";
|
||||
left:0;
|
||||
top: 0;
|
||||
box-shadow: 0 0 36px 3px rgba(0, 0, 0, 0.2);
|
||||
z-index: $z--1;
|
||||
}
|
||||
|
||||
&:after {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 40px;
|
||||
bottom:0;
|
||||
left:0;
|
||||
position: fixed;
|
||||
content: "";
|
||||
background-image: -webkit-linear-gradient(bottom, transparent 0%,rgba(5,15,44,1) 100%);
|
||||
}
|
||||
|
||||
&--open {
|
||||
opacity: 1;
|
||||
transition: 360ms cubic-bezier(0.19, 1, 0.22, 1);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-md) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.algc-mobilemenulist {
|
||||
list-style-type: none;
|
||||
padding: 0 0 40px 0;
|
||||
margin-bottom: 0;
|
||||
position: absolute;
|
||||
top:74px;
|
||||
right:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.algc-mobilemenu__item {
|
||||
line-height: 2.6;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
bottom: 0;
|
||||
width:100%;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: block;
|
||||
background: linear-gradient(76deg, rgba(28,199,208,0.01) 0%,rgba(28,199,208,0) 18%, rgba(28,199,208,0.49) 46%,rgba(80,191,221,.7) 93%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
||||
&:after {
|
||||
background-color: trasparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 0 $text-xs;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
img, svg {
|
||||
height: 1em;
|
||||
margin-right: .4em;
|
||||
}
|
||||
}
|
||||
|
||||
// Docsearch input
|
||||
.algc-menu__search {
|
||||
width: auto;
|
||||
padding: 0 12px;
|
||||
height: $nav-height;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
font-size: $text-sm;
|
||||
|
||||
&--holder {
|
||||
position: relative;
|
||||
width: 32px;
|
||||
height: $nav-height;
|
||||
}
|
||||
|
||||
.algc-search__input {
|
||||
|
||||
button {
|
||||
appearance: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
z-index: $z-1;
|
||||
top: 50%;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
outline: none;
|
||||
display: none;
|
||||
width: 1.6em;
|
||||
height: 1.6em;
|
||||
transition: transform 0.28s ease;
|
||||
transform: translate(0,-50%);
|
||||
cursor: pointer;
|
||||
transform: translate(0,-50%);
|
||||
|
||||
img,
|
||||
svg {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-width: 16px;
|
||||
max-height: $nav-height;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
pointer-events: all;
|
||||
transition: opacity 0.28s ease 0.15s;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
use {
|
||||
fill: #fff
|
||||
}
|
||||
}
|
||||
|
||||
&#search {
|
||||
z-index: $z-2;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&#cancel {
|
||||
z-index: $z-1;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
right: -.35em;
|
||||
transition: 40ms ease;
|
||||
transform: translate(0, -40%) scale(.7);
|
||||
|
||||
img,
|
||||
svg {
|
||||
width: 12px;
|
||||
top: 50%;
|
||||
transform: translate(0,-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// DOCSEARCH RELATED
|
||||
input[type=search] {
|
||||
padding: 0;
|
||||
margin: 0 0 0 2.4em;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
width: 32px;
|
||||
max-height: 32px;
|
||||
border: 1px solid transparent;
|
||||
position: relative;
|
||||
left: 0;
|
||||
z-index: $z-1;
|
||||
cursor: pointer;
|
||||
transition: background 0.28s ease, transform 0.28s ease, width 0.28s ease;
|
||||
padding: 8px;
|
||||
outline: none;
|
||||
font-weight: $light;
|
||||
border-radius: 3px;
|
||||
padding-left: 1.8em;
|
||||
color: #fff;
|
||||
line-height: 1.3em;
|
||||
padding-right: 1.4em;
|
||||
}
|
||||
}
|
||||
|
||||
&--holder.open {
|
||||
// DOCSEARCH RELATED
|
||||
input[type="search"] {
|
||||
background-color: rgba(white, 0.2);
|
||||
width: 300px;
|
||||
transform: translate(-300px);
|
||||
outline: none;
|
||||
cursor: auto;
|
||||
|
||||
#searchbox {
|
||||
background-color: inherit !important;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-xl){
|
||||
transform: translate(-180px);
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-md) and (orientation: landscape) {
|
||||
transform: translate(-240px);
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
transform: translate(-140px);
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
@media (max-width: 370px) {
|
||||
transform: translate(-110px);
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
@include placeholder {
|
||||
color: rgba(#ffffff, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
button#search {
|
||||
transform: translate(calc(-300px + 4em), -50%);
|
||||
|
||||
@media (max-width: 1180px){
|
||||
transform: translate(calc(-180px + 4em), -50%);
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-md) and (orientation: landscape) {
|
||||
transform: translate(calc(-240px + 4em), -50%);
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
transform: translate(calc(-140px + 4em), -50%);
|
||||
}
|
||||
|
||||
@media (max-width: 370px) {
|
||||
transform: translate(calc(-110px + 4em), -50%)
|
||||
}
|
||||
}
|
||||
|
||||
button#cancel {
|
||||
transition: 300ms 300ms ease;
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.algolia-autocomplete {
|
||||
position: inherit !important;
|
||||
display: initial !important;
|
||||
|
||||
input#searchbox,
|
||||
input[type="search"] {
|
||||
vertical-align: middle !important;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
font-size: 16px;
|
||||
|
||||
@media (min-width: $breakpoint-sm) {
|
||||
margin-top: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.ds-dropdown-menu {
|
||||
top: $nav-height - 10px !important;
|
||||
left: -438px !important;
|
||||
right: inherit !important;
|
||||
line-height: 26px !important;
|
||||
font-size: $text-lg;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
margin-top: 0;
|
||||
top: $nav-height !important;
|
||||
left:0 !important;
|
||||
right:0 !important;
|
||||
width: 100% !important;
|
||||
position:fixed !important;
|
||||
min-width: 0 !important;
|
||||
border-radius: 0;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[class^=ds-dataset-] {
|
||||
border-radius: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--subcategory-column {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
padding-right: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.algc-openmobile {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
z-index: $z-1;
|
||||
cursor: pointer;
|
||||
z-index: $z-3;
|
||||
background-color: $deep-cove;
|
||||
border: none;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-md) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
height: 2px;
|
||||
width: 62%;
|
||||
top:50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: 140ms ease-out;
|
||||
background-color: rgba($white, .88);
|
||||
position: absolute;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: inherit;
|
||||
position: absolute;
|
||||
transition: 130ms ease-out;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
|
||||
&:before {
|
||||
transform-origin: left center;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
&:after{
|
||||
transform-origin: left center;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&--open {
|
||||
|
||||
span {
|
||||
transition: 130ms ease-out;
|
||||
transform: translate(-70%,-50%);
|
||||
|
||||
&:before,
|
||||
&:after{
|
||||
transition: 130ms ease-out;
|
||||
transform: translate(-20%,-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.algc-arrowseparator {
|
||||
height: 33px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 5.8 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 6.6 KiB |
|
|
@ -1,4 +0,0 @@
|
|||
<svg width="12" height="7" role="img" arial-labelledby="algc-icon-separator-alt" viewBox="0 0 12 7" xmlns="http://www.w3.org/2000/svg">
|
||||
<title id="algc-icon-separator-alt">menu with dropdown</title>
|
||||
<path d="M6.458 3.58L2.81.37C2.344-.04 1.634.01 1.225.477c-.41.468-.362 1.18.105 1.59L5.51 5.74s.537.375 1.05.356c.515-.02.984-.433.984-.433l4.072-3.596c.467-.41.515-1.12.107-1.59C11.315.01 10.605-.04 10.138.37l-3.68 3.21z" fill="#FFF" fill-rule="evenodd" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 469 B |
|
|
@ -1 +0,0 @@
|
|||
<svg viewBox="0 0 124 117" xmlns="http://www.w3.org/2000/svg"><title>InstantSearch Android</title><path d="M85.47 60.44c.212-1.2-.06-2.452-.702-3.403l-9.572-14.19c3.495-3.65 5.836-8.34 6.72-13.36C84.343 15.738 75.552 2.705 62.272.364 48.99-1.98 36.274 7.26 33.85 21.013c-2.426 13.75 6.364 26.783 19.644 29.124 4.848.855 9.896.178 14.395-1.98l9.577 14.154c.635.987 1.675 1.68 2.836 1.886 2.39.42 4.73-1.28 5.167-3.755zM53.696 85.99c.863-.863 2.043-1.358 3.19-1.378l17.115-.298c.985-4.955 3.485-9.563 7.09-13.167 9.873-9.874 25.59-10.148 35.125-.613 9.536 9.535 9.262 25.252-.612 35.126-9.874 9.874-25.59 10.148-35.126.613-3.48-3.48-5.822-8.003-6.633-12.927l-17.09.273c-1.172.046-2.336-.408-3.17-1.24-1.716-1.717-1.665-4.61.112-6.388zm-4.167-31.53c.294 1.185.11 2.45-.464 3.445l-8.56 14.824c3.742 3.396 6.404 7.91 7.637 12.857 3.378 13.55-4.482 27.162-17.566 30.425C17.492 119.27 4.162 110.94.783 97.39-2.595 83.842 5.265 70.23 18.35 66.968c4.776-1.19 9.858-.868 14.497.972l8.567-14.788c.566-1.03 1.554-1.793 2.698-2.08 2.354-.586 4.81.948 5.417 3.386zM86.817 78.37c-6.27 6.27-6.444 16.3-.39 22.355 6.055 6.054 16.084 5.88 22.353-.39 6.27-6.27 6.446-16.3.39-22.353-6.053-6.055-16.082-5.88-22.352.39zM39.475 88.605C37.33 80 28.825 74.686 20.515 76.757 12.208 78.83 7.193 87.515 9.338 96.117c2.145 8.604 10.65 13.92 18.96 11.848 8.308-2.07 13.323-10.758 11.178-19.36zm32.815-60.84c-1.54 8.73-9.655 14.627-18.087 13.14C45.77 39.417 40.16 31.102 41.7 22.37c1.54-8.732 9.655-14.627 18.088-13.14 8.432 1.486 14.04 9.802 12.502 18.534z" fill="#FFF" fill-rule="evenodd"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg viewBox="0 0 127 113" xmlns="http://www.w3.org/2000/svg"><title>React InstantSearch</title><path d="M51.438 52.172l-2.907-1.68-2.565 4.442c-1.52-.485-3.137-.746-4.816-.746-8.75 0-15.84 7.098-15.84 15.852 0 8.755 7.09 15.853 15.84 15.853 8.747 0 15.837-7.098 15.837-15.853 0-4.66-2.008-8.85-5.206-11.75l2.564-4.435 1.936-3.336-5.81-3.37-1.936 3.337 2.904 1.685zm19.292 14.51c1.54-7.14 7.885-12.494 15.482-12.494 8.75 0 15.84 7.098 15.84 15.852 0 8.755-7.09 15.853-15.84 15.853-7.597 0-13.943-5.353-15.482-12.495h-5.128v-6.715h5.128zm3.256-17.848l2.904-1.686-2.58-4.444c3.19-2.9 5.193-7.085 5.193-11.738 0-8.755-7.09-15.853-15.838-15.853s-15.84 7.098-15.84 15.853c0 8.754 7.092 15.853 15.84 15.853 1.685 0 3.31-.265 4.833-.753L71.07 50.5l1.86 3.316 5.858-3.287-1.874-3.34-2.928 1.644zm-5.46 48.817c9.465 7.297 18.232 9.824 23.72 6.652 4.93-2.854 7.322-10.372 6.404-21.197l6.692-.567c1.114 13.135-2.072 23.14-9.732 27.576-8.57 4.954-20.363 1.55-32.23-7.96-11.87 9.51-23.664 12.914-32.234 7.96-7.658-4.436-10.844-14.44-9.73-27.576l6.692.567c-.918 10.825 1.475 18.343 6.4 21.195 5.49 3.174 14.26.647 23.724-6.65-2.332-2.213-4.648-4.65-6.925-7.297l5.09-4.38c2.316 2.69 4.656 5.127 6.982 7.295 2.325-2.168 4.664-4.604 6.98-7.296l5.09 4.38c-2.276 2.647-4.593 5.085-6.924 7.3zM28.243 30.393c4.176-1.31 8.71-2.38 13.53-3.183l1.103 6.623c-4.92.82-9.467 1.933-13.557 3.273.776 3.706 1.885 7.634 3.337 11.715l-6.326 2.252c-1.41-3.96-2.532-7.827-3.363-11.545-10.185 4.496-16.25 10.552-16.25 16.62 0 5.608 5.14 11.386 14.597 15.885l-2.885 6.064C6.88 72.603 0 64.87 0 56.146 0 46.57 8.354 38.27 21.75 32.733c-1.89-14.33 1.134-25.656 9.416-30.45 7.857-4.593 18.53-2.077 29.646 6l-3.948 5.433c-9.196-6.682-17.264-8.584-22.32-5.63-5.25 3.04-7.485 11.27-6.3 22.306zm69.23 6.708c-4.098-1.34-8.655-2.452-13.586-3.266l1.094-6.626c4.834.798 9.38 1.87 13.567 3.178 1.182-11.033-1.055-19.263-6.312-22.306-5.045-2.948-13.113-1.046-22.31 5.636L65.98 8.283C77.094.206 87.766-2.31 95.612 2.275c8.29 4.8 11.314 16.124 9.427 30.45 13.376 5.528 21.718 13.83 21.718 23.42 0 8.724-6.882 16.458-18.43 21.95l-2.884-6.063c9.457-4.5 14.598-10.277 14.598-15.886 0-6.08-6.053-12.138-16.218-16.626-.83 3.72-1.954 7.588-3.365 11.552l-6.328-2.25c1.453-4.084 2.562-8.014 3.34-11.722zM61.79 73.398h3.812v-6.715h-3.81v6.715zm-20.64 5.78c-5.04 0-9.124-4.09-9.124-9.138 0-5.047 4.085-9.137 9.123-9.137 5.036 0 9.122 4.09 9.122 9.137 0 5.048-4.086 9.138-9.123 9.138zm45.062 0c5.038 0 9.123-4.09 9.123-9.138 0-5.047-4.085-9.137-9.123-9.137-5.037 0-9.122 4.09-9.122 9.137 0 5.048 4.085 9.138 9.122 9.138zM63.665 40.103c-5.038 0-9.123-4.09-9.123-9.137 0-5.047 4.085-9.137 9.123-9.137 5.037 0 9.123 4.09 9.123 9.136 0 5.047-4.086 9.137-9.123 9.137z" fill="#FFF" fill-rule="evenodd"/></svg>
|
||||
|
Before Width: | Height: | Size: 2.7 KiB |
|
|
@ -1,4 +0,0 @@
|
|||
<svg role="img" aria-labelledby="algc-top-search-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13">
|
||||
<title id="algc-top-search-close">Close search input</title>
|
||||
<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="#FFF" fill-rule="evenodd" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 420 B |
|
|
@ -1,4 +0,0 @@
|
|||
<svg role="img" aria-labelledby="algc-top-search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15">
|
||||
<title id="algc-top-search-icon">Open search input</title>
|
||||
<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="#FFF" fill-rule="evenodd" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 591 B |
|
|
@ -1 +0,0 @@
|
|||
<svg viewBox="0 0 95 108" xmlns="http://www.w3.org/2000/svg"><title>Algolia Shopify integration</title><path d="M82.996 20.982c-.074-.542-.548-.842-.94-.875-.392-.033-8.675-.646-8.675-.646S67.63 13.75 67 13.12c-.632-.632-1.866-.44-2.345-.3l-3.22.995c-1.92-5.53-5.312-10.61-11.278-10.61-.164 0-.334.006-.504.016C47.955.974 45.854 0 44.038 0 30.14 0 23.5 17.373 21.417 26.202c-5.4 1.674-9.236 2.863-9.726 3.017-3.013.945-3.108 1.04-3.504 3.88C7.886 35.25 0 96.247 0 96.247l61.46 11.515 33.3-7.204S83.07 21.523 82.996 20.982zm-24.96-6.118l-5.2 1.61c.003-.367.004-.728.004-1.122 0-3.437-.477-6.203-1.242-8.397 3.074.386 5.122 3.883 6.44 7.91zm-10.25-7.228c.853 2.142 1.41 5.215 1.41 9.363 0 .21-.003.405-.004.6-3.383 1.05-7.058 2.186-10.74 3.327 2.067-7.982 5.944-11.836 9.333-13.29zm-4.13-3.908c.6 0 1.204.203 1.782.6-4.454 2.097-9.228 7.376-11.244 17.917l-8.49 2.63c2.36-8.04 7.97-21.147 17.95-21.147zm6.5 34.78L46.048 50.72s-3.6-1.92-8.008-1.92c-6.465 0-6.79 4.06-6.79 5.08 0 5.58 14.54 7.717 14.54 20.783 0 10.28-6.52 16.9-15.31 16.9-10.55 0-15.946-6.566-15.946-6.566l2.824-9.333s5.546 4.76 10.226 4.76c3.057 0 4.3-2.406 4.3-4.165 0-7.278-11.93-7.603-11.93-19.56 0-10.063 7.225-19.802 21.805-19.802 5.62 0 8.395 1.61 8.395 1.61z" fill="#FFF" fill-rule="evenodd"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg width="51" height="52" viewBox="0 0 51 52" xmlns="http://www.w3.org/2000/svg"><title>icon-wordpress</title><path d="M26.055.81C16.215.79 6.953 6.626 2.703 15.862l11.95.028V17.2c-3.68-.442-3.355 1.47-2.834 3.497l7.845 19.663L25.43 26.84l-2.646-6.334c-.96-1.697-.982-3.58-4.916-3.402l.056-1.205 17.528.042v1.35c-2.052.12-4.523-.517-3.214 3.687l7.09 18.622 3.876-10.872c1.27-4.557.074-8.937-1.434-13.232-.84-2.88-.447-5.287 3.312-6.242C39.344 3.4 32.572.82 26.055.81zM49.895 18L38.53 47.625c3.14-2.72 6.357-3.708 10.295-11.23 2.62-6.255 2.35-12.05 1.07-18.393zm-48.395.48C.39 27.227.492 29.788 3.238 36.93c3.58 6.84 6.354 8.28 10.294 10.963L1.5 18.483zm25 11.096l-8.423 20.32c5.91 1.687 11.2 1.476 16.043-.4l-7.62-19.92z" fill="#FFF" fill-rule="evenodd"/></svg>
|
||||
|
Before Width: | Height: | Size: 763 B |
|
|
@ -1,5 +0,0 @@
|
|||
const htmlRender = {
|
||||
communityHeader: require('./components/communityHeader/communityHeader.html.js')
|
||||
}
|
||||
|
||||
module.exports = htmlRender;
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
const javascripts = {
|
||||
communityHeader: require('./components/communityHeader/communityHeader.js')
|
||||
}
|
||||
|
||||
module.exports = javascripts;
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
{
|
||||
"name": "algolia-frontend-components",
|
||||
"version": "0.0.34",
|
||||
"description": "Algolia components",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"clean": "rm -rf dist",
|
||||
"watch": "node build/development.js --erb",
|
||||
"build": "npm run clean --silent && node build/build.js --silent",
|
||||
"build:erb": "npm run clean --silent && node build/build.js --erb",
|
||||
"serve": "webpack-dev-server --config build/serve.js"
|
||||
},
|
||||
"author": "Jonas Badalic",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"babel-cli": "^6.23.0",
|
||||
"babel-core": "^6.23.1",
|
||||
"babel-polyfill": "^6.23.0",
|
||||
"babel-preset-env": "^1.1.9",
|
||||
"babel-preset-es2015": "^6.22.0",
|
||||
"chalk": "^2.0.0",
|
||||
"deepmerge": "^2.0.0",
|
||||
"glob": "^7.1.1",
|
||||
"node-sass": "^4.5.0",
|
||||
"path": "^0.12.7",
|
||||
"progress": "^2.0.0",
|
||||
"webpack": "^2.2.1",
|
||||
"webpack-dev-server": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-loader": "7.1.5",
|
||||
"css-loader": "1.0.0",
|
||||
"extract-loader": "2.0.1",
|
||||
"file-loader": "1.1.11",
|
||||
"html-loader": "0.5.5",
|
||||
"html-webpack-plugin": "3.2.0",
|
||||
"json-loader": "0.5.7",
|
||||
"raw-loader": "0.5.1",
|
||||
"sass-loader": "7.1.0",
|
||||
"style-loader": "0.22.1",
|
||||
"url-loader": "1.1.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
|
||||
@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;
|
||||
}
|
||||
|
||||
@function em($pixels, $context: $browser-context) {
|
||||
@return #{$pixels/$context}em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
|
||||
@mixin arrowSeparatorLeft($color, $stroke: false) {
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
height: 110%;
|
||||
width: 40px;
|
||||
top: -5%;
|
||||
left: -6px;
|
||||
|
||||
@if $stroke != false {
|
||||
background: url("data:image/svg+xml;utf8,<svg viewBox=\'0 0 31 62\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'><title>Rectangle</title><defs><path id=\'b\' d=\'M6 1l23 30L6 61H0V1z\'/><filter x=\'-50%\' y=\'-50%\' width=\'200%\' height=\'200%\' filterUnits=\'objectBoundingBox\' id=\'a\'><feOffset dx=\'1\' in=\'SourceAlpha\' result=\'shadowOffsetOuter1\'/><feGaussianBlur stdDeviation=\'.5\' in=\'shadowOffsetOuter1\' result=\'shadowBlurOuter1\'/><feColorMatrix values=\'0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0\' in=\'shadowBlurOuter1\'/></filter></defs><g fill=\'#{str-replace(#{$color}, '#','%23')}\' stroke=\'#{str-replace(#{$stroke}, '#','%23')}\' stroke-width=\'2\' fill-rule=\'evenodd\'><use filter=\'url(%23a)\' xlink:href=\'%23b\'/><use xlink:href=\'%23b\'/></g></svg>")no-repeat;
|
||||
} @else {
|
||||
background: url("data:image/svg+xml;utf8,<svg viewBox=\'0 0 31 62\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'><title>Rectangle</title><defs><path id=\'b\' d=\'M6 1l23 30L6 61H0V1z\'/><filter x=\'-50%\' y=\'-50%\' width=\'200%\' height=\'200%\' filterUnits=\'objectBoundingBox\' id=\'a\'><feOffset dx=\'1\' in=\'SourceAlpha\' result=\'shadowOffsetOuter1\'/><feGaussianBlur stdDeviation=\'.5\' in=\'shadowOffsetOuter1\' result=\'shadowBlurOuter1\'/><feColorMatrix values=\'0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0\' in=\'shadowBlurOuter1\'/></filter></defs><g fill=\'#{str-replace(#{$color}, '#','%23')}\' fill-rule=\'evenodd\'><use filter=\'url(%23a)\' xlink:href=\'%23b\'/><use xlink:href=\'%23b\'/></g></svg>")no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin placeholder {
|
||||
$placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
|
||||
@each $placeholder in $placeholders {
|
||||
&:#{$placeholder}-placeholder {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,158 +0,0 @@
|
|||
|
||||
// font sizes
|
||||
$text-xxl: 3.125em;
|
||||
$text-xl : 2em;
|
||||
$text-lg : 1.25em;
|
||||
$text-sm : .75em;
|
||||
$text-xs : .625em;
|
||||
|
||||
// breakpoints
|
||||
$breakpoint-xl: 1200px;
|
||||
$breakpoint-lg: 992px;
|
||||
$breakpoint-md: 768px;
|
||||
$breakpoint-sm: 576px;
|
||||
$breakpoint-xs: 576px;
|
||||
|
||||
// z-index layers
|
||||
$z--1: -10;
|
||||
$z-1: 10;
|
||||
$z-2: 50;
|
||||
$z-3: 100;
|
||||
$z-top: 9999;
|
||||
|
||||
//containers
|
||||
$container-max-width: 1160px;
|
||||
|
||||
//fonts;
|
||||
$browser-context: 16;
|
||||
$light: 300;
|
||||
$regular: 400;
|
||||
$bold: 600;
|
||||
|
||||
//colors;
|
||||
$white: white;
|
||||
$black: black;
|
||||
|
||||
//V2;
|
||||
$purple-heart: rgb(142, 67, 231);
|
||||
$mulberry: rgb(184, 69, 146);
|
||||
$radical-red: rgb(255, 79, 129);
|
||||
$bittersweet: rgb(255, 108, 95);
|
||||
$koromiko: rgb(255, 193, 104);
|
||||
$shamrock: rgb(45, 222, 152);
|
||||
$java: rgb(28, 199, 208);
|
||||
$algolia-blue: rgb(0, 174, 255);
|
||||
$royal-blue: rgb(51, 105, 231);
|
||||
$bunting: rgb(24, 35, 89);
|
||||
$titan-white: rgb(247, 247, 255);
|
||||
$logan: rgb(157, 157, 189);
|
||||
$deep-cove: rgb(5, 15, 44);
|
||||
$highlight-color: #f6624e;
|
||||
$cabaret: #E7486B;
|
||||
$rouge: #9C4274;
|
||||
$sea-green: #13C4A5;
|
||||
$blue-green: #10A4B8;
|
||||
$violet: #8A63B3;
|
||||
$chambray: #3B5295;
|
||||
$sunset-orange: #F6624E;
|
||||
$saffron-mango: #FDBD57;
|
||||
$red-pink: #fb366e;
|
||||
$plum: #65133a;
|
||||
$light-navy: #184a80;
|
||||
$primary-color: $bunting;
|
||||
$secondary-color: $titan-white;
|
||||
$tertiary-color: $logan;
|
||||
$athens-gray: #EEF0F7;
|
||||
$titan-white: #F7F7FF;
|
||||
$portage: #8995C7;
|
||||
|
||||
$cloudy-blue: #c4c8d7;
|
||||
$cloudy-blue-2: #a6b0d8;
|
||||
$cloudy-blue-3: #8995C7;
|
||||
$summertime: mix($radical-red, $bittersweet, 50%);
|
||||
|
||||
//header;
|
||||
$header-height: 60px;
|
||||
//BootStrap;
|
||||
$gray-darker: lighten(#000, 13.5%);
|
||||
/* #222 */
|
||||
$gray-dark: lighten(#000, 20%);
|
||||
/* #333 */
|
||||
|
||||
$gray: lighten(#000, 33.5%);
|
||||
/* #555 */
|
||||
|
||||
$gray-light: lighten(#000, 46.7%);
|
||||
/* #777 */
|
||||
|
||||
$gray-lighter: lighten(#000, 93.5%);
|
||||
/* #eee */
|
||||
|
||||
$brand-primary: $algolia-blue;
|
||||
$brand-secondary: #FA3870;
|
||||
$brand-success: $shamrock;
|
||||
$brand-info: $algolia-blue;
|
||||
$brand-warning: $koromiko;
|
||||
$brand-danger: $radical-red;
|
||||
$body-bg: $white;
|
||||
$text-color: $bunting;
|
||||
$text-muted: $logan;
|
||||
$border-radius-base: 3px;
|
||||
$border-radius-large: 3px;
|
||||
$border-radius-small: 3px;
|
||||
$link-color: $brand-primary;
|
||||
$link-hover-color: darken($link-color, 15%);
|
||||
//fonts;
|
||||
$font-family-base: "Open Sans", Helvetica,Arial,sans-serif;
|
||||
$headings-font-family: Raleway, "Times New Roman",Times,serif;
|
||||
$headings-font-weight: $light;
|
||||
$headings-small-color: darken($tertiary-color, 10%);
|
||||
//Buttons;
|
||||
$btn-font-weight: normal;
|
||||
//default;
|
||||
$btn-default-color: #777;
|
||||
$btn-default-bg: $white;
|
||||
$btn-default-border: #ccc;
|
||||
//primary;
|
||||
$btn-primary-color: $white;
|
||||
$btn-primary-bg: $brand-primary;
|
||||
$btn-primary-border: darken($btn-primary-bg, 5%);
|
||||
//success;
|
||||
$btn-success-color: $white;
|
||||
$btn-success-bg: $brand-success;
|
||||
$btn-success-border: darken($btn-success-bg, 5%);
|
||||
//info;
|
||||
$btn-info-color: $white;
|
||||
$btn-info-bg: $brand-info;
|
||||
$btn-info-border: darken($btn-info-bg, 5%);
|
||||
//warning;
|
||||
$btn-warning-color: $white;
|
||||
$btn-warning-bg: $brand-warning;
|
||||
$btn-warning-border: darken($btn-warning-bg, 5%);
|
||||
//danger;
|
||||
$btn-danger-color: $white;
|
||||
$btn-danger-bg: $brand-danger;
|
||||
$btn-danger-border: darken($btn-danger-bg, 5%);
|
||||
//link;
|
||||
$btn-link-disabled-color: $gray-light;
|
||||
$input-bg-disabled: $gray-lighter;
|
||||
//Panels;
|
||||
$panel-bg: $white;
|
||||
//** Border color for elements within panels;
|
||||
$panel-inner-border: lighten($tertiary-color, 20%);
|
||||
$panel-footer-bg: lighten($secondary-color, 10%);
|
||||
$panel-default-text: $gray-dark;
|
||||
$panel-default-border: $white;
|
||||
$panel-default-heading-bg: $white;
|
||||
//forms;
|
||||
$input-group-addon-bg: lighten($secondary-color, 3%);
|
||||
$input-border: lighten($gray, 30%);
|
||||
//tables;
|
||||
$table-border-color: $secondary-color;
|
||||
$table-bg-accent: lighten($secondary-color, 5%);
|
||||
//tooltip;
|
||||
$tooltip-bg: $primary-color;
|
||||
$tooltip-opacity: 1;
|
||||
//code;
|
||||
$pre-bg: $bunting;
|
||||
$pre-color: #C2CCCC;
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
# OpenGraph / Twitter
|
||||
title: DocSearch
|
||||
description: "Algolia DocSearch is the easiest way to add search to your documentation. Just send us your URL, and we'll send you the implementation code."
|
||||
tagline: DocSearch
|
||||
card_image: https://community.algolia.com/docsearch/assets/images/docsearch-social.png
|
||||
twitter_username: algolia
|
||||
github_username: algolia
|
||||
baseurl: /docsearch
|
||||
host: https://community.algolia.com
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
unslug:
|
||||
docsearch: DocSearch
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
---
|
||||
doc: 13599
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
- from: /documentation/index.html
|
||||
to: documentation/docsearch/introduction/
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
- name: Stripe
|
||||
url: "https://stripe.com/docs"
|
||||
gif: "assets/images/showcase/example-stripe.gif"
|
||||
logo: "assets/images/showcase/logo-stripe.png"
|
||||
|
||||
- name: Bootstrap
|
||||
url: "https://getbootstrap.com/docs/4.0"
|
||||
gif: "assets/images/showcase/example-bootstrap.gif"
|
||||
logo: "assets/images/showcase/logo-bootstrap.png"
|
||||
|
||||
- name: Vue
|
||||
url: "http://vuejs.org/guide/"
|
||||
gif: "assets/images/showcase/example-vuejs.gif"
|
||||
logo: "assets/images/showcase/logo-vuejs.png"
|
||||
|
||||
- name: React
|
||||
url: "https://reactjs.org"
|
||||
gif: "assets/images/showcase/example-react.gif"
|
||||
logo: "assets/images/showcase/logo-react.png"
|
||||
|
||||
- name: React Native
|
||||
url: "https://facebook.github.io/react-native/"
|
||||
gif: "assets/images/showcase/example-reactnative.gif"
|
||||
logo: "assets/images/showcase/logo-react.png"
|
||||
|
||||
- name: Docusaurus
|
||||
url: "https://docusaurus.io/"
|
||||
gif: "assets/images/showcase/example-docusaurus.gif"
|
||||
logo: "assets/images/showcase/logo-docusaurus.png"
|
||||
|
||||
- name: Cordova
|
||||
url: "http://cordova.apache.org/"
|
||||
gif: "assets/images/showcase/example-cordova.gif"
|
||||
logo: "assets/images/showcase/logo-cordova.png"
|
||||
|
||||
- name: Babel.js
|
||||
url: "https://babeljs.io/"
|
||||
gif: "assets/images/showcase/example-babel.gif"
|
||||
logo: "assets/images/showcase/logo-babel.png"
|
||||
|
||||
- name: Apiary
|
||||
url: "http://help.apiary.io/"
|
||||
gif: "assets/images/showcase/example-apiary.gif"
|
||||
logo: "assets/images/showcase/logo-apiary.png"
|
||||
|
||||
- name: Flow
|
||||
url: "https://flow.org/en/docs/"
|
||||
gif: "assets/images/showcase/example-flow.gif"
|
||||
logo: "assets/images/showcase/logo-flow.png"
|
||||
|
||||
- name: Moment.js
|
||||
url: "https://momentjs.com/docs/"
|
||||
gif: "assets/images/showcase/example-momentjs.gif"
|
||||
logo: "assets/images/showcase/logo-momentjs.png"
|
||||
|
||||
- name: Ant Design
|
||||
url: "https://ant.design/docs/react/introduce"
|
||||
gif: "assets/images/showcase/example-ant-design.gif"
|
||||
logo: "assets/images/showcase/logo-ant-design.png"
|
||||
|
||||
- name: Gitlab
|
||||
url: "https://docs.gitlab.com/"
|
||||
gif: "assets/images/showcase/example-gitlab.gif"
|
||||
logo: "assets/images/showcase/logo-gitlab.png"
|
||||
|
||||
- name: Symfony
|
||||
url: "https://symfony.com/doc/current/"
|
||||
gif: "assets/images/showcase/example-symfony.gif"
|
||||
logo: "assets/images/showcase/logo-symfony.png"
|
||||
|
||||
- name: PM2
|
||||
url: "http://pm2.keymetrics.io/docs/usage/cluster-mode/"
|
||||
gif: "assets/images/showcase/example-pm2.gif"
|
||||
logo: "assets/images/showcase/logo-pm2.png"
|
||||
|
||||
- name: Hugo
|
||||
url: "http://gohugo.io/documentation/"
|
||||
gif: "assets/images/showcase/example-hugo.gif"
|
||||
logo: "assets/images/showcase/logo-hugo.png"
|
||||
|
||||
- name: fastlane
|
||||
url: "https://docs.fastlane.tools/"
|
||||
gif: "assets/images/showcase/example-fastlane.gif"
|
||||
logo: "assets/images/showcase/logo-fastlane.png"
|
||||
|
||||
- name: Jekyll
|
||||
url: "https://jekyllrb.com/"
|
||||
gif: "assets/images/showcase/example-jekyll.gif"
|
||||
logo: "assets/images/showcase/logo-jekyll.png"
|
||||
|
||||
- name: Gatsby
|
||||
url: "https://www.gatsbyjs.org/"
|
||||
gif: "assets/images/showcase/example-gatsby.gif"
|
||||
logo: "assets/images/showcase/logo-gatsby.png"
|
||||
|
|
@ -4,6 +4,8 @@
|
|||
"description": "The easiest way to add search to your documentation",
|
||||
"url": "https://community.algolia.com/docsearch"
|
||||
},
|
||||
"placeholders": {
|
||||
},
|
||||
"sidebar": [
|
||||
{
|
||||
"title": "Essentials",
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
require 'better_errors'
|
||||
require 'extensions/custom_extension'
|
||||
require 'lib/php_code_blocks'
|
||||
require 'sprockets/es6'
|
||||
require 'lib/hash_ostruct'
|
||||
|
||||
activate :custom_extension
|
||||
|
||||
set :css_dir, 'doc/assets/stylesheets'
|
||||
set :js_dir, 'doc/assets/javascripts'
|
||||
set :images_dir, 'doc/assets/images'
|
||||
|
||||
ignore 'doc/assets/javascripts/vendors/*.js'
|
||||
ignore 'doc/assets/stylesheets/vendors/**/*'
|
||||
ignore 'templates/*'
|
||||
ignore 'layouts/*'
|
||||
ignore 'partials/*'
|
||||
ignore '**.yml'
|
||||
|
||||
page '/documentation/*', layout: 'page'
|
||||
|
||||
#app.logger.level = :debug
|
||||
redirects = []
|
||||
|
||||
config[:stage] = ENV['STAGE'] || 'develop'
|
||||
|
||||
config[:google_tag_mangager_id] = case config[:stage]
|
||||
when 'beta'
|
||||
'GTM-K4DF9Q'
|
||||
when 'production'
|
||||
'GTM-N8JP8G'
|
||||
else
|
||||
'GTM-K4DF9Q'
|
||||
end
|
||||
|
||||
activate :vcs_time
|
||||
activate :syntax
|
||||
activate :sprockets do |s|
|
||||
s.supported_output_extensions = ['.js', '.es6']
|
||||
s.expose_middleman_helpers = true
|
||||
end
|
||||
|
||||
set(:port, 4569)
|
||||
set :haml, { :ugly => true, :format => :html5 }
|
||||
set :markdown_engine, :kramdown
|
||||
set :markdown, parse_block_html: true, fenced_code_blocks: true, input: 'GFM', with_toc_data: true, smartypants: true, hard_wrap: false
|
||||
set :show_exceptions, false
|
||||
|
||||
activate :directory_indexes
|
||||
|
||||
configure :server do
|
||||
set :debug_assets, true
|
||||
#activate :livereload
|
||||
use BetterErrors::Middleware
|
||||
BetterErrors.application_root = __dir__
|
||||
end
|
||||
|
||||
# Build-specific configuration
|
||||
configure :build do
|
||||
activate :minify_css
|
||||
activate :minify_javascript
|
||||
#activate :asset_hash
|
||||
activate :minify_html
|
||||
activate :autoprefixer
|
||||
activate :gzip
|
||||
end
|
||||
|
||||
# Legacy Redirects
|
||||
app_data.redirects.each do |redirect|
|
||||
redirects.push({ from: redirect.from, to: redirect.to })
|
||||
end
|
||||
|
||||
|
||||
ready do
|
||||
redirects.each do |r|
|
||||
proxy r[:from][1..-1], 'templates/redirect.html', locals: {url: r[:to]}, ignore: true, layout: nil
|
||||
end
|
||||
|
||||
proxy '/_redirects', 'templates/redirects', locals: {redirects: redirects}, ignore: true
|
||||
|
||||
sitemap.ensure_resource_list_updated!
|
||||
app.sitemap.ensure_resource_list_updated!
|
||||
|
||||
app_data.set_auto_reload_files(app.config[:stage] != 'production')
|
||||
end
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue