mirror of
https://github.com/gohugoio/hugo.git
synced 2026-08-24 15:28:54 +00:00
Update with more Getting Started and improve code block styles
This commit is contained in:
Ryan Watters
+12
-4
@@ -77,13 +77,21 @@ watch = true
|
||||
removefromexternalsearch = true
|
||||
## This is used when the BaseURL does not need to modified (eg, in share links)
|
||||
siteaddress = "https://gohugo.io"
|
||||
## GitHub Repository Base URL (should contain /edit/master/ to automatically link to edit-ready version of file and also include closing slash)
|
||||
ghrepourl = "https://github.com/rdwatters/hugo-docs-concept/edit/master/content/"
|
||||
## Gh repo for site footer
|
||||
ghrepo = "https://github.com/spf13/hugo/"
|
||||
## GitHub Docs Repository Base URL (include trailing slash)
|
||||
ghdocsrepo = "https://github.com/rdwatters/hugo-docs-concept/"
|
||||
## Github Wiki for Documentation
|
||||
ghdocswiki = ""
|
||||
## Github Wiki for Development
|
||||
ghdevwiki = ""
|
||||
## Gitter URL
|
||||
gitter = "https://gitter.im/spf13/hugo"
|
||||
## Discuss Forum URL
|
||||
forum = "https://discuss.hugo.io"
|
||||
gtmid = ""
|
||||
# Set to true to include a CDN call to FontAwesome
|
||||
usefontawesome = true
|
||||
# Sets the order of site sections in the sidebar navigation
|
||||
sitemenuitems = ["About Hugo", "Getting Started", "Project Organization", "Content Management", "Templates", "Functions", "Variables and Params", "Themes", "Hosting and Deployment", "Migrating to Hugo", "News and Articles", "Site Showcase", "Developer Tools", "Troubleshooting"]
|
||||
# MARKDOWN
|
||||
## Configuration for BlackFriday markdown parser: https://github.com/russross/blackfriday
|
||||
[blackfriday]
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Introduction to Hugo
|
||||
linktitle:
|
||||
description: Hugo's features, roadmap, license, and motivation.
|
||||
description: Hugo's features, roadmap, and license, as well as the motivation behind creating Hugo.
|
||||
date: 2016-11-01
|
||||
publishdate: 2016-11-01
|
||||
lastmod: 2016-11-01
|
||||
@@ -55,6 +55,10 @@ Hugo is for people building a blog, company site, portfolio, tumblog,
|
||||
documentation, single-page website, or a website with thousands of
|
||||
pages.
|
||||
|
||||
## See Also
|
||||
|
||||
* [Hugo Performance Benchmark(@bep)]
|
||||
|
||||
|
||||
[Aerobatic]: https://www.aerobatic.com/
|
||||
[Amazon S3]: http://aws.amazon.com/s3/
|
||||
@@ -67,15 +71,8 @@ pages.
|
||||
[GoDaddy]: https://www.godaddy.com/
|
||||
[Google Cloud Storage]: http://cloud.google.com/storage/
|
||||
[Heroku]: https://www.heroku.com/
|
||||
[Hugo Performance Benchmark(@bep)]: https://github.com/bep/hugo-benchmark
|
||||
[Jekyll]: http://jekyllrb.com/
|
||||
[Middleman]: https://middlemanapp.com/
|
||||
[Nanoc]: http://nanoc.ws/
|
||||
[Surge]: https://surge.sh
|
||||
|
||||
## Next Steps
|
||||
|
||||
* [Install Hugo](/overview/installing/)
|
||||
* [Quick start](/overview/quickstart/)
|
||||
* [Join the Mailing List](/community/mailing-list/)
|
||||
* [Star us on GitHub](https://github.com/spf13/hugo)
|
||||
* [Discussion Forum](http://discuss.gohugo.io/)
|
||||
[Surge]: https://surge.sh
|
||||
@@ -2,9 +2,9 @@
|
||||
title: License
|
||||
linktitle:
|
||||
description: Information on the Hugo license.
|
||||
date: 2016-11-01
|
||||
publishdate: 2016-11-01
|
||||
lastmod: 2016-11-01
|
||||
date: 2016-02-01
|
||||
publishdate: 2016-02-01
|
||||
lastmod: 2016-02-01
|
||||
weight: 50
|
||||
draft: false
|
||||
slug:
|
||||
|
||||
@@ -24,13 +24,14 @@ In no particular order, here is what is currently being worked on for the Hugo p
|
||||
* Native support for additional content formats (AsciiDoc [#1435][], reST [#1436][])
|
||||
* And, last but not least, *your* best ideas!
|
||||
|
||||
> Feel free to [contribute][] or open a new issue if you have an idea for a new feature.
|
||||
{{% note title="Contributions Welcome" %}}
|
||||
Feel free to [contribute](/tutorials/how-to-contribute-to-hugo/) or open a new issue if you have an idea for a new feature.
|
||||
{{% /note %}}
|
||||
|
||||
[#98]: https://github.com/spf13/hugo/issues/98
|
||||
[#1014]: https://github.com/spf13/hugo/issues/1014
|
||||
[#1435]: https://github.com/spf13/hugo/issues/1435
|
||||
[#1436]: https://github.com/spf13/hugo/issues/1436
|
||||
[contribute]: /tutorials/how-to-contribute-to-hugo/
|
||||
[hosting and deployment]: /hosting-and-deployment/
|
||||
[related Discuss thread]: https://discuss.gohugo.io/t/web-based-editor/155
|
||||
[themes]: /themes
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
---
|
||||
title: Sample Styles
|
||||
linktitle:
|
||||
description: This should be deleted before go live.
|
||||
date: 2016-02-01
|
||||
publishdate: 2016-02-01
|
||||
lastmod: 2016-02-01
|
||||
weight: 99
|
||||
draft: false
|
||||
slug:
|
||||
aliases:
|
||||
notes:
|
||||
---
|
||||
|
||||
Here is some body copy. Here is a bit of `inline code`. Here is a [link to Google](https://www.google.com). Here is some *emphasized and italics text*. Here is some **emphasized and bold text**.
|
||||
|
||||
## Lists
|
||||
|
||||
* Unordered list item lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad dolorum alias vero.
|
||||
* Unordered list item
|
||||
* Nested unordered list item
|
||||
* Nested unordered list item
|
||||
* Nested again
|
||||
* Nested again
|
||||
* Unordered list item
|
||||
|
||||
1. Ordered list item lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, quae nulla dolore eligendi.
|
||||
2. Ordered list item
|
||||
1. Nested ordered list item
|
||||
2. Nested ordered list item
|
||||
1. Nested again, ordered
|
||||
2. Nested again, ordered
|
||||
3. Ordered list item
|
||||
|
||||
## Callouts/CTAs/Admonitions
|
||||
|
||||
{{% note "Note Shortcode" %}}
|
||||
Here is *something in italic* in a shortcode. Here is **something in bold**.
|
||||
{{% /note %}}
|
||||
|
||||
{{% caution "Caution Shortcode" %}}
|
||||
Here is *something in italic* in a shortcode. Here is **something in bold**.
|
||||
{{% /caution %}}
|
||||
|
||||
{{% warning "Warning Shortcode" %}}
|
||||
Here is *something in italic* in a shortcode. Here is **something in bold**.
|
||||
{{% /warning %}}
|
||||
|
||||
## Code Block Shortcodes
|
||||
|
||||
### Code Input Shortcode
|
||||
|
||||
{{% input "my-first-template.html" %}}
|
||||
```go
|
||||
<ul>
|
||||
{{range $.Site.Pages}}
|
||||
<li>{{.Title}}</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
```
|
||||
{{% /input %}}
|
||||
|
||||
{{% input "first-script.js" %}}
|
||||
```js
|
||||
function myFunction(arg){
|
||||
console.log(arg);
|
||||
}
|
||||
```
|
||||
{{% /input %}}
|
||||
|
||||
### Code Output Shortcode
|
||||
|
||||
{{% output "/posts/index.html" %}}
|
||||
```go
|
||||
<ul>
|
||||
<li>My First Post</li>
|
||||
<li>My Second Post</li>
|
||||
<li>My Third Post</li>
|
||||
</ul>
|
||||
```
|
||||
{{% /output %}}
|
||||
|
||||
{{% output "/first-data.json" %}}
|
||||
```json
|
||||
{
|
||||
"glossary": {
|
||||
"title": "example glossary",
|
||||
"GlossDiv": {
|
||||
"title": "S"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
{{% /output %}}
|
||||
|
||||
### Markdown Code Block without Shortcode
|
||||
|
||||
```javascript
|
||||
function myFunction(val){
|
||||
console.log(val);
|
||||
}
|
||||
```
|
||||
@@ -14,7 +14,7 @@ notes:
|
||||
|
||||
Website generators render content into HTML files. Most are "dynamic site generators." That means the HTTP server (i.e., the program that communicates with your end user's browser) runs the generator to create a new HTML file every time an end user requests a page.
|
||||
|
||||
Creating the page dynamically requires the HTTP server have enough memory and CPU to effectively run the generator around the clock. If not, your end user will wait in a queue for the page to be generated.
|
||||
Creating the page dynamically requires the HTTP server to have enough memory and CPU to effectively run the generator nonstop. If not, your end user will wait in a queue for the page to be generated.
|
||||
|
||||
To prevent unnecessary delays in delivering pages to end users, dynamic site generators were programmed to cache their HTML files. A cached page is a copy that is temporarily stored on the computer. Sending a cached copy is faster than generating a new page at the time of request because the majority of the work is already done.
|
||||
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
---
|
||||
title: Cross References
|
||||
linktitle:
|
||||
description:
|
||||
date: 2017-02-01
|
||||
publishdate: 2017-02-01
|
||||
lastmod: 2017-01-09
|
||||
categories: [content]
|
||||
tags: [cross references, anchors]
|
||||
weight:
|
||||
draft: false
|
||||
slug:
|
||||
aliases: []
|
||||
notes:
|
||||
---
|
||||
@@ -13,6 +13,6 @@ aliases: [/content/markdown-extras/,/content/supported-formats/]
|
||||
notes:
|
||||
---
|
||||
|
||||
{{% note "Deeply Nested Lists" %}}
|
||||
{{% caution "Deeply Nested Lists" %}}
|
||||
Hugo uses [BlackFriday](https://github.com/russross/blackfriday), a markdown processor written in Go. A known issue [(#329)](https://github.com/russross/blackfriday/issues/329) in BlackFriday is the handling of deeply nested lists, but there is a workaround. If you write lists in markdown, be sure to include 4 spaces (i.e., <kbd>tab</kbd>) rather than 2 to delimit nesting of lists.
|
||||
{{% /note %}}
|
||||
{{% /caution %}}
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: Permalinks
|
||||
linktitle: Permalinks
|
||||
description:
|
||||
date: 2017-01-10
|
||||
publishdate: 2017-01-10
|
||||
lastmod: 2017-01-10
|
||||
tags: [permalinks,url,slug]
|
||||
weight:
|
||||
draft: false
|
||||
slug:
|
||||
aliases: []
|
||||
notes:
|
||||
---
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: How to Contribute to Hugo
|
||||
title: Contribute to Hugo Development
|
||||
linktitle:
|
||||
description: Tutorial developed by DigitalCraftsman of the Hugo community to explain to new developers how to contribute to the Hugo project.
|
||||
description: Contribute to Hugo development and documentation.
|
||||
date: 2017-02-01
|
||||
publishdate: 2017-02-01
|
||||
lastmod: 2017-02-01
|
||||
@@ -0,0 +1,16 @@
|
||||
---
|
||||
title: Contribute to Hugo Docs
|
||||
linktitle: Contribute to Hugo Docs
|
||||
description:
|
||||
date: 2017-02-01
|
||||
publishdate: 2017-02-01
|
||||
lastmod: 2017-02-01
|
||||
tags: [contribute,tutorials]
|
||||
author:
|
||||
authorprofileurl:
|
||||
weight:
|
||||
draft: false
|
||||
slug:
|
||||
aliases:
|
||||
notes:
|
||||
---
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Functions Quick Reference
|
||||
linktitle: Functions Quick Reference
|
||||
description: Description for templating functions.
|
||||
title: Quick Reference
|
||||
linktitle: Quick Reference
|
||||
description: Comprehensive list of Hugo templating functions, including basic and advanced usage examples.
|
||||
date: 2017-01-09
|
||||
publishdate: 2017-01-09
|
||||
lastmod: 2017-01-09
|
||||
|
||||
@@ -14,20 +14,4 @@ layout:
|
||||
slug:
|
||||
aliases: []
|
||||
notes:
|
||||
---
|
||||
|
||||
## Heading
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, praesentium quod magnam veritatis, itaque tenetur minima nihil a at cum doloremque accusantium fugiat quam! Cumque ad vero provident enim temporibus!
|
||||
|
||||
{{% note title="Note" %}}
|
||||
Here is *something in italic* in a shortcode. Here is **something in bold**.
|
||||
{{% /note %}}
|
||||
|
||||
{{% caution title="Caution" %}}
|
||||
Here is *something in italic* in a shortcode. Here is **something in bold**.
|
||||
{{% /caution %}}
|
||||
|
||||
{{% warn title="Warn" %}}
|
||||
Here is *something in italic* in a shortcode. Here is **something in bold**.
|
||||
{{% /warn %}}
|
||||
---
|
||||
@@ -1,9 +1,7 @@
|
||||
---
|
||||
title: default
|
||||
linktitle:
|
||||
linktitle: default
|
||||
description:
|
||||
qr_description:
|
||||
qr_returns:
|
||||
date: 2017-02-01
|
||||
publishdate: 2017-02-01
|
||||
lastmod: 2017-02-01
|
||||
|
||||
@@ -1,17 +1,19 @@
|
||||
---
|
||||
title: index
|
||||
linktitle:
|
||||
linktitle: index
|
||||
description:
|
||||
qr_description:
|
||||
qr_returns:
|
||||
workson: [map,slice,array]
|
||||
godocref: https://golang.org/pkg/text/template/#hdr-Functions
|
||||
tags: [iteration]
|
||||
categories: [functions]
|
||||
date: 2017-02-01
|
||||
publishdate: 2017-02-01
|
||||
lastmod: 2017-02-01
|
||||
weight:
|
||||
draft: false
|
||||
type:
|
||||
layout:
|
||||
slug:
|
||||
aliases: []
|
||||
notes:
|
||||
---
|
||||
|
||||
Here is some content for the `index` function.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: How to Use the Hugo Docs
|
||||
linktitle: Using the Hugo Docs
|
||||
description: Description for the Getting Started section.
|
||||
description: Quick start and guides for installing Hugo on your preferred operating system.
|
||||
date: 2017-02-01
|
||||
publishdate: 2017-02-01
|
||||
lastmod: 2017-02-01
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Building Your Static Site
|
||||
linktitle:
|
||||
description: Build process, automated deployments, and popular hosting solutions.
|
||||
description: Site builds, automated deployments, and popular hosting solutions.
|
||||
date: 2016-11-01
|
||||
publishdate: 2016-11-01
|
||||
lastmod: 2016-11-01
|
||||
|
||||
@@ -3,55 +3,206 @@ title: Configuration
|
||||
linktitle:
|
||||
description: Scaffolding new projects, configuration, and source organization.
|
||||
date: 2017-01-02
|
||||
tags: [configuration,fundamentals]
|
||||
publishdate: 2017-01-02
|
||||
lastmod: 2017-01-02
|
||||
weight: 10
|
||||
draft: false
|
||||
slug:
|
||||
aliases:
|
||||
aliases: [/overview/source-directory/]
|
||||
notes:
|
||||
---
|
||||
|
||||
Here is `some code` in the body copy.
|
||||
The [directory structure][] of a Hugo website—or more precisely, the source organization of files containing the website's content and templates—provide most of the configuration information that Hugo needs in order to statically generate a finished website.
|
||||
|
||||
{{% input "my-first-template.html" %}}
|
||||
```go
|
||||
<ul>
|
||||
{{range $.Site.Pages}}
|
||||
<li>{{.Title}}</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
Therefore, many websites wouldn't actually need a configuration file. This is because Hugo is designed to recognize certain typical usage patterns (and expects them, by default).
|
||||
|
||||
Nevertheless, Hugo searches for a configuration file in the root of your website's source directory as a default behavior. First, it looks for a `./config.toml` file. If that's not present, it will seek a `./config.yaml` file,
|
||||
followed by a `./config.json` file.
|
||||
|
||||
In this `config` file, you can include precise directions to Hugo regarding how it should render your website, control your website's menus, and arbitrarily define site-wide parameters specific to your project.
|
||||
|
||||
## Configure Through Environmental Variables
|
||||
|
||||
In addition to the 3 configuration file options already mentioned, website configuration can be accomplished through operating system environment variables.
|
||||
|
||||
For example, the following command will effectively set a website's title on Unix-like systems:
|
||||
|
||||
{{% input "environment-variable.sh" %}}
|
||||
```bash
|
||||
$ env HUGO_TITLE="Some Title" hugo
|
||||
```
|
||||
{{% /input %}}
|
||||
|
||||
{{% input "first-script.js" %}}
|
||||
```js
|
||||
function myFunction(arg){
|
||||
console.log(arg);
|
||||
}
|
||||
{{% note "Setting Environment Variables" %}}
|
||||
names must be prefixed with `HUGO_` when setting environment variables through operating system environment variables.
|
||||
{{% /note %}}
|
||||
|
||||
## Configuration in YAML
|
||||
|
||||
The following is a typical example of a YAML configuration file. Note the document opens with 3 hyphens and closes with 3 periods. The values nested under `params:` will populate the [`.Site.Params`][] variable for use in [templates][]:
|
||||
|
||||
{{% input "config.yml" %}}
|
||||
```yaml
|
||||
---
|
||||
baseURL: "http://yoursite.example.com/"
|
||||
title: "Yoyodyne Widget Blogging"
|
||||
footnoteReturnLinkContents: "↩"
|
||||
permalinks:
|
||||
post: /:year/:month/:title/
|
||||
params:
|
||||
Subtitle: "Spinning the cogs in the widgets"
|
||||
AuthorName: "John Doe"
|
||||
GitHubUser: "spf13"
|
||||
ListOfFoo:
|
||||
- "foo1"
|
||||
- "foo2"
|
||||
SidebarRecentLimit: 5
|
||||
...
|
||||
```
|
||||
{{% /input %}}
|
||||
|
||||
{{% input "first-data.json" %}}
|
||||
```json
|
||||
function myFunction(arg){
|
||||
console.log(arg);
|
||||
}
|
||||
## Configuration in TOML
|
||||
|
||||
The following is an example of a TOML configuration file. The values under `[params]` will populate the `.Site.Params` variable for use in [templates][]:
|
||||
|
||||
{{% input "config.toml" %}}
|
||||
```toml
|
||||
contentDir = "content"
|
||||
layoutDir = "layouts"
|
||||
publishDir = "public"
|
||||
buildDrafts = false
|
||||
baseURL = "http://yoursite.example.com/"
|
||||
canonifyURLs = true
|
||||
|
||||
[taxonomies]
|
||||
category = "categories"
|
||||
tag = "tags"
|
||||
|
||||
[params]
|
||||
description = "Tesla's Awesome Hugo Site"
|
||||
author = "Nikola Tesla"
|
||||
```
|
||||
{{% /input %}}
|
||||
|
||||
{{% output "layouts/_default/list.html" %}}
|
||||
```go
|
||||
<ul>
|
||||
{{range $.Site.Pages}}
|
||||
<li>{{.Title}}</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
```
|
||||
{{% /output %}}
|
||||
## Complete List of Configuration Variables
|
||||
|
||||
```javascript
|
||||
function myFunction(val){
|
||||
console.log(val);
|
||||
}
|
||||
The following is a list of Hugo-defined variables. The values assigned to each of the variables represents the default value used by Hugo if you not specifically change the value in your configuration.
|
||||
|
||||
{{% input "config.yml" %}}
|
||||
```yaml
|
||||
---
|
||||
archetypeDir: "archetypes"
|
||||
# hostname (and path) to the root, e.g. http://spf13.com/
|
||||
baseURL: ""
|
||||
# include content marked as draft
|
||||
buildDrafts: false
|
||||
# include content with publishdate in the future
|
||||
buildFuture: false
|
||||
# include content already expired
|
||||
buildExpired: false
|
||||
# enable this to make all relative URLs relative to content root. Note that this does not affect absolute URLs.
|
||||
relativeURLs: false
|
||||
canonifyURLs: false
|
||||
# config file (default is path/config.yaml|json|toml)
|
||||
config: "config.toml"
|
||||
contentDir: "content"
|
||||
dataDir: "data"
|
||||
defaultExtension: "html"
|
||||
defaultLayout: "post"
|
||||
# Missing translations will default to this content language
|
||||
defaultContentLanguage: "en"
|
||||
# Renders the default content language in subdir, e.g. /en/. The root directory / will redirect to /en/
|
||||
defaultContentLanguageInSubdir: false
|
||||
disableLiveReload: false
|
||||
# Do not build RSS files
|
||||
disableRSS: false
|
||||
# Do not build Sitemap file
|
||||
disableSitemap: false
|
||||
# Enable GitInfo feature
|
||||
enableGitInfo: false
|
||||
# Build robots.txt file
|
||||
enableRobotsTXT: false
|
||||
# Do not render 404 page
|
||||
disable404: false
|
||||
# Do not inject generator meta tag on homepage
|
||||
disableHugoGeneratorInject: false
|
||||
# edit new content with this editor, if provided
|
||||
editor: ""
|
||||
# Enable Emoji emoticons support for page content.
|
||||
# See www.emoji-cheat-sheet.com
|
||||
enableEmoji: false
|
||||
# Show a placeholder instead of the default value or an empty string if a translation is missing
|
||||
enableMissingTranslationPlaceholders: false
|
||||
footnoteAnchorPrefix: ""
|
||||
footnoteReturnLinkContents: ""
|
||||
# google analytics tracking id
|
||||
googleAnalytics: ""
|
||||
languageCode: ""
|
||||
layoutDir: "layouts"
|
||||
# Enable Logging
|
||||
log: false
|
||||
# Log File path (if set, logging enabled automatically)
|
||||
logFile: ""
|
||||
# "yaml", "toml", "json"
|
||||
metaDataFormat: "toml"
|
||||
newContentEditor: ""
|
||||
# Don't sync permission mode of files
|
||||
noChmod: false
|
||||
# Don't sync modification time of files
|
||||
noTimes: false
|
||||
paginate: 10
|
||||
paginatePath: "page"
|
||||
permalinks:
|
||||
# Pluralize titles in lists using inflect
|
||||
pluralizeListTitles: true
|
||||
# Preserve special characters in taxonomy names ("Gérard Depardieu" vs "Gerard Depardieu")
|
||||
preserveTaxonomyNames: false
|
||||
# filesystem path to write files to
|
||||
publishDir: "public"
|
||||
# enables syntax guessing for code fences without specified language
|
||||
pygmentsCodeFencesGuessSyntax: false
|
||||
# color-codes for highlighting derived from this style
|
||||
pygmentsStyle: "monokai"
|
||||
# true: use pygments-css or false: color-codes directly
|
||||
pygmentsUseClasses: false
|
||||
# default sitemap configuration map
|
||||
sitemap:
|
||||
# filesystem path to read files relative from
|
||||
source: ""
|
||||
staticDir: "static"
|
||||
# display memory and timing of different steps of the program
|
||||
stepAnalysis: false
|
||||
# theme to use (located by default in /themes/THEMENAME/)
|
||||
themesDir: "themes"
|
||||
theme: ""
|
||||
title: ""
|
||||
# if true, use /filename.html instead of /filename/
|
||||
uglyURLs: false
|
||||
# Do not make the url/path to lowercase
|
||||
disablePathToLower: false
|
||||
# if true, auto-detect Chinese/Japanese/Korean Languages in the content. (.Summary and .WordCount can work properly in CJKLanguage)
|
||||
hasCJKLanguage: false
|
||||
# verbose output
|
||||
verbose: false
|
||||
# verbose logging
|
||||
verboseLog: false
|
||||
# watch filesystem for changes and recreate as needed
|
||||
watch: true
|
||||
---
|
||||
```
|
||||
{{% /input %}}
|
||||
|
||||
## Ignoring Files When Rendering
|
||||
|
||||
The following statement inside `./config.toml` will cause Hugo to ignore files
|
||||
ending with `.foo` and `.boo` when rendering:
|
||||
|
||||
```toml
|
||||
ignoreFiles = [ "\\.foo$", "\\.boo$" ]
|
||||
```
|
||||
The above is a list of regular expressions. Note that the backslash (`\`) character is escaped in this example to keep TOML happy.
|
||||
|
||||
[`.Site.Params`]: /variables-and-params/
|
||||
[templates]: /templates
|
||||
[directory structure]: /project-organization/directory-structure
|
||||
@@ -0,0 +1,13 @@
|
||||
---
|
||||
title: Directory Structure
|
||||
linktitle:
|
||||
description: Explanation of the directory structure in a typical Hugo project and how Hugo traverses the file system therein.
|
||||
date: 2017-01-02
|
||||
publishdate: 2017-01-02
|
||||
lastmod: 2017-01-02
|
||||
weight: 10
|
||||
draft: false
|
||||
slug:
|
||||
aliases:
|
||||
notes:
|
||||
---
|
||||
@@ -6,9 +6,11 @@ date: 2017-02-01
|
||||
publishdate: 2017-02-01
|
||||
lastmod: 2017-02-01
|
||||
weight:
|
||||
tags: []
|
||||
tags: [blocks,base]
|
||||
draft: false
|
||||
slug:
|
||||
aliases:
|
||||
notes:
|
||||
---
|
||||
---
|
||||
|
||||
## Base Template Lookup Order
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: Template Types
|
||||
title: Sitemap Template
|
||||
linktitle:
|
||||
description:
|
||||
date: 2017-02-01
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: Template Types and Kinds
|
||||
linktitle: Template Types and Kinds
|
||||
description:
|
||||
date: 2017-02-01
|
||||
publishdate: 2017-02-01
|
||||
lastmod: 2017-02-01
|
||||
weight:
|
||||
tags: []
|
||||
draft: false
|
||||
slug:
|
||||
aliases:
|
||||
notes:
|
||||
---
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Introduction to Themes
|
||||
linktitle:
|
||||
description: Description of the theming section and its contents.
|
||||
description: Install, use, and create Hugo themes.
|
||||
date: 2017-02-01
|
||||
publishdate: 2017-02-01
|
||||
lastmod: 2017-02-01
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Troubleshooting
|
||||
linktitle:
|
||||
description: Frequently asked questions pulled from the Hugo forum and known issues and workarounds.
|
||||
description: FAQs pulled from the Hugo forum, known issues, and workarounds.
|
||||
date: 2017-02-01
|
||||
publishdate: 2017-02-01
|
||||
lastmod: 2017-02-01
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Submitting a Tutorial
|
||||
linktitle:
|
||||
description: Learn how to submit your tutorial to the Hugo docs.
|
||||
description: .
|
||||
date: 2017-02-01
|
||||
publishdate: 2017-02-01
|
||||
lastmod: 2017-02-01
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
---
|
||||
title: Create a Multilingual Site
|
||||
linktitle:
|
||||
description:
|
||||
date: 2017-02-01
|
||||
publishdate: 2017-02-01
|
||||
lastmod: 2017-02-01
|
||||
tags: [multilingual,]
|
||||
author:
|
||||
authorprofileurl:
|
||||
weight:
|
||||
draft: false
|
||||
slug:
|
||||
aliases:
|
||||
notes:
|
||||
---
|
||||
@@ -1,16 +1,16 @@
|
||||
---
|
||||
title: Introduction
|
||||
title: Variables vs Parameters
|
||||
linktitle:
|
||||
description: Description for the variables and parameters section of the site.
|
||||
description: Page-, file-, taxonomy-, and site-level variables and parameters available in templates.
|
||||
date: 2017-02-01
|
||||
publishdate: 2017-02-01
|
||||
lastmod: 2017-02-01
|
||||
weight:
|
||||
weight: 01
|
||||
draft: false
|
||||
slug:
|
||||
aliases: []
|
||||
notes:
|
||||
---
|
||||
|
||||
Here is some content for the homepage.
|
||||
Content for the Variables and Params Section
|
||||
|
||||
|
||||
@@ -13,3 +13,5 @@ slug:
|
||||
aliases: []
|
||||
notes:
|
||||
---
|
||||
|
||||
`.IsNamedParams` (reference to shortcodes)
|
||||
|
||||
@@ -82,8 +82,14 @@ newsandarticles:
|
||||
url: "news-and-articles"
|
||||
haschildren: true
|
||||
sortsubpagesby: "weight"
|
||||
siteshowcase:
|
||||
contributetohugo:
|
||||
order: 15
|
||||
title: "Contribute to Hugo"
|
||||
url: "contribute-to-hugo"
|
||||
haschildren: true
|
||||
sortsubpagesby: "weight"
|
||||
siteshowcase:
|
||||
order: 16
|
||||
title: "Site Showcase"
|
||||
url: "site-showcase"
|
||||
haschildren: false
|
||||
|
||||
@@ -1,13 +1,20 @@
|
||||
{{ define "main" }}
|
||||
{{$base := .Site.BaseURL}}
|
||||
<main class="main">
|
||||
<a role="button" target="_blank" class="edit-link" href="{{.Site.Params.ghrepourl}}{{.File.Path}}"><span class="edit-text">Edit</span> <i class="icon-pencil" aria-hidden="true"></i></a>
|
||||
<a role="button" target="_blank" class="edit-link" href="{{.Site.Params.ghdocsrepo}}edit/master/content/{{.File.Path}}"><span class="edit-text">Edit</span> <i class="icon-pencil" aria-hidden="true"></i></a>
|
||||
<header class="content-header">
|
||||
<h1 class="page-title {{.Section}}">{{with .LinkTitle}}{{ . |markdownify}}{{else}}{{ .Title | markdownify }}{{end}}</h1>
|
||||
<h1 class="page-title {{.Section}}">{{with .LinkTitle}}{{ . |markdownify}}{{else}}{{ .Title | markdownify }}{{end}}
|
||||
{{- with .Params.godocref -}}
|
||||
<a class="godoc-link" target="_blank" href="{{.}}" title="See the corresponding Golang Documentation for {{$.Title}}, {{$.Section}}.">
|
||||
{{ partial "svg-icons/godoc-icon.svg" .}}
|
||||
</a>
|
||||
{{- end -}}
|
||||
</h1>
|
||||
{{with .Params.tags}}
|
||||
<ul class="tags">
|
||||
<li><i class="icon-tags"></i></li>
|
||||
{{range .}}
|
||||
<li><a class="tag" href="/tags/{{.|urlize}}">{{.}}</a></li>
|
||||
<li><a class="tag" href="{{$base}}tags/{{.|urlize}}">{{.}}</a></li>
|
||||
{{end}}
|
||||
</ul>
|
||||
{{end}}
|
||||
|
||||
@@ -9,15 +9,14 @@
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="homepage-cards">
|
||||
{{range .Site.Params.sitemenuitems }}
|
||||
{{$sectionurl := . | urlize}}
|
||||
<a href="{{ $sectionurl | relURL }}" class="homepage-card">
|
||||
{{range $key,$params := sort ($.Site.Data.sitenavigation) "order" }}
|
||||
<a href="{{ $params.url }}" class="homepage-card">
|
||||
<section>
|
||||
<header>
|
||||
<h2>{{.}}</h2>
|
||||
<h2>{{ $params.title }}</h2>
|
||||
</header>
|
||||
<div class="homepage-card-copy">
|
||||
<p>{{ with $.Site.GetPage "section" $sectionurl }}{{ .Description | markdownify }}{{ end }}</p>
|
||||
<p>{{ with $.Site.GetPage "section" $params.url }}{{ .Description | markdownify }}{{ end }}</p>
|
||||
</div>
|
||||
</section>
|
||||
</a>
|
||||
|
||||
@@ -1,3 +1,14 @@
|
||||
<footer id="site-footer" class="site-footer">
|
||||
|
||||
<div>
|
||||
<span><i class="icon-heart"></i> By <a href="https://twitter.com/spf13" target="_blank">spf13</a> and friends.</span>
|
||||
<img src="{{"images/made-with-hugo-dark.png" | relURL}}" alt="Made with Hugo Logo">
|
||||
</div>
|
||||
<div>
|
||||
<ul class="footer-list">
|
||||
<li><a href="{{.Site.Params.ghdocsrepo}}"><i class="icon-github" target="_blank"></i><i class="icon-docs"></i> Docs Source</a></li>
|
||||
<li><a href="{{.Site.Params.ghrepo}}" target="_blank"><i class="icon-github"></i><i class="icon-code"></i> Project Source</a></li>
|
||||
<li><a href="{{.Site.Params.discuss}}" target="_blank"><i class="icon-forum"></i> Discuss Hugo</a></li>
|
||||
<li><a href="{{.Site.Params.gitter}}" target="_blank"><i class="icon-gitter"></i> Gitter (Dev Chat Only)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -4,6 +4,6 @@
|
||||
<img src="{{"images/hugo-logo-wide.png" | relURL}}" alt=""><span class="hugo-v">v{{.Hugo.Version}}</span>
|
||||
</a>
|
||||
<!-- From https://buttons.github.io/. -->
|
||||
<a class="github-button" href="https://github.com/spf13/hugo" data-icon="octicon-star" data-style="mega" data-count-href="/spf13/hugo/stargazers" data-count-api="/repos/spf13/hugo#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star spf13/hugo on GitHub">Star</a>
|
||||
<!-- <a class="github-button" href="https://github.com/spf13/hugo" data-icon="octicon-star" data-style="mega" data-count-href="/spf13/hugo/stargazers" data-count-api="/repos/spf13/hugo#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star spf13/hugo on GitHub">Star</a> -->
|
||||
</div>
|
||||
</header>
|
||||
@@ -29,32 +29,8 @@
|
||||
</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
<!-- <ul class="top-menu">
|
||||
{{ $menuitems := .Site.Params.sitemenuitems }}
|
||||
{{ $sitesections := .Site.Sections }}
|
||||
{{ $url := .URL }}
|
||||
{{ $kind := .Kind}}
|
||||
{{ $perma := .Permalink }}
|
||||
{{ range $menuitems }}
|
||||
{{ $menuitem := . }}
|
||||
{{ range $section,$content := $sitesections}}
|
||||
{{if eq $section ($menuitem | urlize)}}
|
||||
<li class="top-menu-item"><a class="top-menu-item-link{{if in $url $section }} active-section{{end}}" href="#">{{ replaceRE "And" "and" (replace $section "-" " "| title) }}</a>
|
||||
<ul class="submenu">
|
||||
{{ with $.Site.GetPage "section" $section }}
|
||||
<li class="submenu-item"><a class="submenu-item-link{{if and (in $perma .URL) (eq $kind "section")}} active-page{{end}}" href="{{.Permalink}}">{{with .LinkTitle}}{{. | markdownify }}{{else}}{{.Title | markdownify}}{{end}}</a></li>
|
||||
{{ end }}
|
||||
{{range $content.Pages}}
|
||||
<li class="submenu-item"><a class="submenu-item-link {{$section}}{{if in $perma .URL}} active-page{{end}}" href="{{.Permalink}}">{{with .LinkTitle}}{{. | markdownify }}{{else}}{{.Title | markdownify}}{{end}}</a></li>
|
||||
{{end}}
|
||||
</ul>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul> -->
|
||||
<div class="nav-buttons">
|
||||
<a role="button" class="icon-forum" href="https://discuss.gohugo.io" target="_blank">Discuss Hugo</a><br>
|
||||
<a role="button" class="icon-mailing-list" href="{{.Site.BaseURL}}mailing-list/">Mailing List</a>
|
||||
<a role="button" href="{{.Site.Params.discuss}}" target="_blank"><i class="icon-forum"></i> Discuss Hugo</a><br>
|
||||
<a role="button" href="{{.Site.BaseURL}}mailing-list/"><i class="icon-mail"></i>Mailing List</a>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -0,0 +1,35 @@
|
||||
<svg id="godoc-icon" class="svg-icon" width="100%" height="100%" viewBox="0 0 216 216" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
|
||||
<g transform="matrix(1,0,0,1,-1.76591,-3.82727)">
|
||||
<path d="M207.3,44.6C200.6,30.9 184.4,43 180.3,38.7C159.3,17.1 133.9,11.7 114,10.7L103,10.7C83,11.2 57.6,17 36.7,38.7C32.6,43 16.3,30.9 9.7,44.6C2,60.6 25.4,62.2 24.2,69.3C21.9,82.1 23.4,101.1 25.2,119.8C28,151.5 4.3,227.4 53.6,257.9C62.9,263.7 88,266.9 109.8,267.4L110,267.4C131.8,266.9 153.9,263.7 163.2,257.9C212.6,227.4 188.9,151.5 191.8,119.8C193.5,101.1 195,82.1 192.8,69.3C191.6,62.2 215,60.5 207.3,44.6Z" style="fill:rgb(140,197,231);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-1.76591,-3.82727)">
|
||||
<path d="M143.2,54.3C109.8,58.2 114.3,93 127.2,104.3C151.2,125.3 176.2,104.3 173.4,83.1C170.9,62.7 153.6,53.1 143.2,54.3Z" style="fill:rgb(224,222,220);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-1.76591,-3.82727)">
|
||||
<path d="M145.5,72.9C151.792,72.9 156.9,78.008 156.9,84.3C156.9,90.592 151.792,95.7 145.5,95.7C139.208,95.7 134.1,90.592 134.1,84.3C134.1,78.008 139.208,72.9 145.5,72.9ZM71.356,72.746C77.648,72.746 82.756,77.854 82.756,84.146C82.756,90.438 77.648,95.546 71.356,95.546C65.064,95.546 59.956,90.438 59.956,84.146C59.956,77.854 65.064,72.746 71.356,72.746Z" style="fill:rgb(17,18,18);"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-1.76591,-3.82727)">
|
||||
<path d="M142.5,75.8C144.487,75.8 146.1,77.413 146.1,79.4C146.1,81.387 144.487,83 142.5,83C140.513,83 138.9,81.387 138.9,79.4C138.9,77.413 140.513,75.8 142.5,75.8ZM74.274,75.192C76.261,75.192 77.874,76.805 77.874,78.792C77.874,80.779 76.261,82.392 74.274,82.392C72.287,82.392 70.674,80.779 70.674,78.792C70.674,76.805 72.287,75.192 74.274,75.192Z" style="fill:white;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-1.76591,-3.82727)">
|
||||
<path d="M108.5,107C92.5,109.4 86.8,114 88,121.2C90,133 127.7,131.7 128.9,121.8C129.9,113.3 114.8,106.1 108.5,107Z" style="fill:rgb(184,147,127);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-1.76591,-3.82727)">
|
||||
<path d="M98.2,111.8C95.5,121.6 119.9,120.1 119.3,113.8C119,110.1 115.7,105.4 107,105.6C103.6,105.7 99.4,107.2 98.2,111.8Z" style="fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-1.76591,-3.82727)">
|
||||
<path d="M99,127.7C98.1,128.1 96.6,137.9 101.2,138.4C104.3,138.7 112.8,139.7 114.8,138.4C118.7,135.9 118.3,129.9 116.1,128.4C112.4,126 100,127.2 99,127.7ZM73.6,54.3C107,58.2 102.5,93 89.6,104.3C65.6,125.3 40.6,104.3 43.4,83.1C46,62.7 63.3,53.1 73.6,54.3Z" style="fill:rgb(224,222,220);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-1.76591,-3.82727)">
|
||||
<circle cx="71.4" cy="84.3" r="11.4" style="fill:rgb(17,18,18);"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-1.76591,-3.82727)">
|
||||
<circle cx="74.4" cy="79.4" r="3.6" style="fill:white;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-1.76591,-3.82727)">
|
||||
<path d="M193.6,186.7C204.6,186.8 199.2,163.2 192.4,167.9C189.1,170.2 188.5,175.5 188.5,180C188.5,182.5 190.5,186.6 193.6,186.7ZM23.3,186.7C12.3,186.8 17.7,163.2 24.5,167.9C27.8,170.2 28.4,175.5 28.4,180C28.4,182.5 26.4,186.6 23.3,186.7ZM172.7,259.2C166.7,250.3 161.3,257.2 152.6,261.6C148.5,263.7 159.4,271.2 171.6,265.6C174.8,264.1 174.7,262.1 172.7,259.2ZM44.2,260.2C50.2,251.3 55.6,258.2 64.3,262.6C68.4,264.7 57.5,272.2 45.3,266.6C42.1,265.1 42.2,263.1 44.2,260.2Z" style="fill:rgb(184,147,127);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-1.76591,-3.82727)">
|
||||
<path d="M188.6,47C188,49.1 190.7,48.8 191.7,55.3C192.1,57.7 200.7,51.8 197.2,47.5C194.3,43.9 189.1,44.9 188.6,47ZM28.3,47C28.9,49.1 26.2,48.8 25.2,55.3C24.8,57.7 16.2,51.8 19.7,47.5C22.5,43.9 27.7,44.9 28.3,47Z" style="fill:rgb(60,137,191);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
@@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
|
||||
<g transform="matrix(1.83004,0,0,1.83004,-25.6194,-41.9158)">
|
||||
<path d="M207.83,81.074L209.287,83.605L209.287,182.87L207.803,185.419L121.073,234.649L118.185,234.648L31.596,185.417L30.114,182.869L30.114,83.606L31.569,81.077L118.156,30.691L121.102,30.69L207.83,81.074ZM41.043,88.208L41.043,178.216L119.633,222.899L198.358,178.214L198.358,88.211L119.633,42.475L41.043,88.208Z"/>
|
||||
</g>
|
||||
<g transform="matrix(1.7158,0,0,1.94423,-39.4209,96.8592)">
|
||||
<path d="M179.238,106.552L154.758,106.552L154.758,62.2L112.134,62.2L112.134,106.552L87.654,106.552L87.654,1.648L112.134,1.648L112.134,45.496L154.758,45.496L154.758,1.648L179.238,1.648L179.238,106.552Z" style="fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,24 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
|
||||
<svg version="1.1" baseProfile="basic"
|
||||
id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="100px"
|
||||
viewBox="0 0 80 100" xml:space="preserve">
|
||||
<path d="M57.537,44.892c-2.836,0.225-5.214,1.245-6.984,3.001c-1.823,1.808-2.693,4.013-2.693,6.812c0,4.186,1.718,7.112,5.551,9.43
|
||||
c0.975,0.585,2.303,1.223,4.599,2.213c3.128,1.343,4.291,1.98,5.034,2.776c0.915,0.983,1.17,2.551,0.593,3.751
|
||||
c-0.113,0.233-0.405,0.623-0.668,0.885c-0.885,0.893-2.281,1.365-4.013,1.365c-2.926,0-5.109-1.2-6.864-3.796
|
||||
c-0.24-0.345-0.458-0.63-0.488-0.63c-0.068,0-5.776,3.293-5.896,3.406c-0.075,0.068-0.015,0.225,0.278,0.705
|
||||
c2.281,3.841,5.844,6.091,10.66,6.737c1.26,0.173,3.623,0.165,4.831,0c3.031-0.428,5.304-1.433,7.067-3.143
|
||||
c1.875-1.808,2.798-4.149,2.798-7.082c0-1.875-0.308-3.338-1.005-4.786c-0.48-0.99-0.96-1.658-1.785-2.498
|
||||
c-1.583-1.605-3.631-2.821-7.719-4.576c-3.091-1.328-4.126-1.898-4.809-2.626c-0.653-0.698-0.93-1.515-0.87-2.536
|
||||
c0.053-0.81,0.278-1.358,0.773-1.89c0.713-0.773,1.538-1.095,2.813-1.088c1.448,0,2.386,0.375,3.338,1.335
|
||||
c0.338,0.33,0.773,0.863,0.975,1.185c0.233,0.368,0.405,0.57,0.465,0.548c0.195-0.083,5.649-3.608,5.649-3.661
|
||||
c0-0.03-0.278-0.465-0.615-0.975c-0.72-1.08-2.018-2.431-2.911-3.023c-1.65-1.095-3.413-1.658-5.739-1.83
|
||||
C58.76,44.81,58.61,44.81,57.537,44.892z M34.184,58.523l-0.023,13.263l-0.165,0.623c-0.218,0.818-0.473,1.305-0.923,1.755
|
||||
c-0.63,0.63-1.44,0.893-2.791,0.9c-1.928,0.008-3.083-0.81-4.426-3.106c-0.218-0.36-0.413-0.653-0.435-0.645
|
||||
c-0.03,0.015-1.388,0.833-3.016,1.815l-2.963,1.8l0.225,0.45c1.343,2.678,3.668,4.704,6.467,5.634
|
||||
c2.956,0.983,6.752,0.893,9.535-0.225c3.338-1.35,5.296-4.141,5.814-8.29c0.045-0.42,0.075-5.109,0.075-13.931V45.268h-3.676h-3.668
|
||||
L34.184,58.523z M8.858,12.252h62.284c3.667,0,6.619,2.952,6.619,6.619v62.284c0,3.667-2.952,6.619-6.619,6.619H8.858
|
||||
c-3.667,0-6.619-2.952-6.619-6.619V18.871C2.239,15.204,5.191,12.252,8.858,12.252z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
|
||||
<g transform="matrix(1.25131,0,0,1.25131,3,0)">
|
||||
<path d="M0.25,0C0.112,0 0,0.113 0,0.25L0,16L26,16L26,8L18.25,8C18.112,8 18,7.887 18,7.75L18,0L0.25,0ZM19,0L19,7L26,7L19,0ZM9.5,19.063C8.737,19.063 8.112,19.251 7.625,19.594C7.141,19.935 6.906,20.365 6.906,20.907C6.906,21.311 7.005,21.665 7.219,21.938C7.435,22.209 7.792,22.404 8.282,22.563C8.496,22.633 8.727,22.704 8.97,22.751C9.215,22.795 9.439,22.855 9.658,22.907C9.866,22.956 10.02,23.032 10.127,23.126C10.236,23.217 10.283,23.311 10.283,23.439C10.283,23.577 10.265,23.681 10.189,23.752C10.116,23.822 10.022,23.893 9.908,23.94C9.814,23.976 9.681,23.987 9.533,24.003C9.385,24.019 9.28,24.034 9.189,24.034C8.835,24.034 8.449,23.979 8.064,23.846C7.681,23.713 7.343,23.5 7.033,23.252L6.877,23.252L6.877,24.658C7.189,24.788 7.52,24.885 7.877,24.971C8.236,25.054 8.645,25.096 9.127,25.096C9.96,25.096 10.611,24.922 11.096,24.565C11.583,24.206 11.846,23.763 11.846,23.19C11.846,22.789 11.716,22.44 11.502,22.19C11.291,21.937 10.979,21.742 10.533,21.596C10.306,21.523 10.106,21.481 9.908,21.44C9.713,21.398 9.497,21.359 9.283,21.315C8.957,21.247 8.744,21.146 8.627,21.065C8.51,20.982 8.439,20.875 8.439,20.721C8.439,20.619 8.491,20.518 8.564,20.44C8.637,20.359 8.712,20.323 8.814,20.284C8.929,20.237 9.035,20.206 9.158,20.19C9.283,20.172 9.408,20.159 9.533,20.159C9.887,20.159 10.257,20.219 10.596,20.347C10.937,20.472 11.205,20.628 11.44,20.816L11.596,20.816L11.596,19.472C11.323,19.36 11.002,19.264 10.627,19.191C10.255,19.115 9.885,19.066 9.502,19.066L9.5,19.063ZM15.531,19.063C14.596,19.063 13.843,19.331 13.312,19.876C12.781,20.418 12.531,21.16 12.531,22.095C12.531,23.022 12.781,23.767 13.312,24.314C13.843,24.858 14.596,25.127 15.531,25.127C16.468,25.127 17.187,24.859 17.719,24.314C18.25,23.767 18.531,23.022 18.532,22.095C18.532,21.16 18.253,20.418 17.719,19.876C17.185,19.332 16.464,19.064 15.531,19.063L15.531,19.063ZM2.937,19.188L2.937,20.251L4.281,20.251L4.281,22.564C4.281,22.801 4.258,23.004 4.25,23.158C4.242,23.309 4.216,23.437 4.156,23.564C4.093,23.694 3.992,23.804 3.843,23.877C3.697,23.95 3.491,24.002 3.218,24.002C3.007,24.002 2.822,23.979 2.687,23.939C2.552,23.897 2.437,23.861 2.312,23.814L2.156,23.814L2.156,24.97C2.336,25.006 2.544,25.046 2.781,25.064C3.018,25.085 3.294,25.095 3.562,25.095C3.958,25.095 4.263,25.059 4.531,24.97C4.799,24.879 5.028,24.728 5.219,24.564C5.399,24.41 5.534,24.223 5.625,24.001C5.716,23.777 5.781,23.537 5.781,23.282L5.781,19.188L2.937,19.188L2.937,19.188ZM19.656,19.188L19.656,25.001L21.031,25.001L21.031,21.001L23.5,25.001L24.938,25.001L24.938,19.188L23.563,19.188L23.563,22.501L21.469,19.188L19.656,19.188ZM15.531,20.157C15.718,20.157 15.89,20.18 16.062,20.251C16.236,20.321 16.398,20.439 16.531,20.595C16.661,20.746 16.763,20.944 16.844,21.189C16.925,21.434 16.969,21.746 16.969,22.095C16.969,22.421 16.946,22.697 16.875,22.939C16.805,23.179 16.677,23.387 16.531,23.564C16.401,23.72 16.237,23.832 16.062,23.908C15.888,23.981 15.723,24.033 15.531,24.033C15.338,24.033 15.143,23.981 14.968,23.908C14.794,23.835 14.661,23.718 14.53,23.564C14.4,23.41 14.267,23.212 14.186,22.97C14.108,22.725 14.092,22.441 14.092,22.095C14.092,21.756 14.136,21.444 14.217,21.189C14.3,20.931 14.399,20.741 14.53,20.595C14.671,20.439 14.832,20.319 14.999,20.251C15.168,20.183 15.34,20.157 15.53,20.157L15.531,20.157ZM0,28.001L0,31.752C0,31.89 0.112,32.002 0.25,32.002L25.75,32.002C25.888,32.002 26,31.89 26,31.752L26,28.001L0,28.001L0,28.001Z" style="fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
@@ -1,5 +1,5 @@
|
||||
<div class="caution">
|
||||
<h2>{{with .Get "title"}}{{.}}{{else}}Note{{end}}</h2>
|
||||
<h2><i class="icon-caution"></i> {{if .Get 0}}{{.Get 0}}{{else}}Caution{{end}}</h2>
|
||||
<div class="shortcode-content">
|
||||
{{.Inner}}
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<div class="note">
|
||||
<h2>{{with .Get "title"}}{{.}}{{else}}Note{{end}}</h2>
|
||||
<h2><i class="icon-note"></i> {{if .Get 0}}{{.Get 0}}{{else}}Note{{end}}</h2>
|
||||
<div class="shortcode-content">
|
||||
{{.Inner}}
|
||||
</div>
|
||||
|
||||
@@ -1,15 +1,4 @@
|
||||
{{- if .IsNamedParams -}}
|
||||
{{$filenameclass := index (split (.Get "filename") ".") 1 }}
|
||||
<div class="code-copy" id="{{.Get "filename" | urlize}}">
|
||||
{{- with .Get "filename" -}}<div class="code-copy-header output"><div class="action-buttons"></div><span title="{{.}}" class="filename"><strong>Output to: </strong>{{- . -}}</span><i class="icon-{{$filenameclass}}"></i></div>{{- end -}}
|
||||
<div class="code-copy" id="{{.Get 0 | urlize}}">
|
||||
<div class="code-copy-header output"><div class="action-buttons"></div><span class="filename" title="{{.Get 0}}"><strong><em>Renders to... </em></strong>{{.Get 0}}</span><i class="icon-{{index (split (.Get 0) ".") 1 }}"></i></div>
|
||||
{{- .Inner -}}
|
||||
</div>
|
||||
{{- else -}}
|
||||
{{$filenameclass := index (split (.Get 0) ".") 1 }}
|
||||
<div class="code-copy" id="{{.Get 0|urlize}}">
|
||||
<div class="code-copy-header output"><div class="action-buttons"></div><span class="filename" title="{{.Get 0}}"><strong>Output to: </strong>{{.Get 0}}</span><i class="icon-{{$filenameclass}}"></i></div>
|
||||
{{- .Inner -}}
|
||||
</div>
|
||||
{{- end -}}
|
||||
|
||||
|
||||
</div>
|
||||
@@ -1,6 +0,0 @@
|
||||
<div class="warn">
|
||||
<h2>{{with .Get "title"}}{{.}}{{else}}Note{{end}}</h2>
|
||||
<div class="shortcode-content">
|
||||
{{.Inner}}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,6 @@
|
||||
<div class="warning">
|
||||
<h2><i class="icon-warning"></i> {{if .Get 0}}{{.Get 0}}{{else}}Warning{{end}}</h2>
|
||||
<div class="shortcode-content">
|
||||
{{.Inner}}
|
||||
</div>
|
||||
</div>
|
||||
@@ -30,7 +30,7 @@ $body-bg-color:$hugo-white;
|
||||
|
||||
//Typography
|
||||
$base-font-size: 18px;
|
||||
$base-font-family: 'muli','helvetica neue',helvetica,sans-serif;
|
||||
$base-font-family: 'muli',$helvetica;
|
||||
$heading-font-family: $base-font-family;
|
||||
$base-font-color: #333333;
|
||||
$base-line-height-content: 1.6;
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
@font-face {
|
||||
font-family: 'fontello';
|
||||
src: url('/fonts/fontello/fontello.eot?73509738');
|
||||
src: url('/fonts/fontello/fontello.eot?73509738#iefix') format('embedded-opentype'),
|
||||
url('/fonts/fontello/fontello.woff2?73509738') format('woff2'),
|
||||
url('/fonts/fontello/fontello.woff?73509738') format('woff'),
|
||||
url('/fonts/fontello/fontello.ttf?73509738') format('truetype'),
|
||||
url('/fonts/fontello/fontello.svg?73509738#fontello') format('svg');
|
||||
src: url('/fonts/fontello/fontello.eot');
|
||||
src: url('/fonts/fontello/fontello.woff2') format('woff2'),
|
||||
url('/fonts/fontello/fontello.woff') format('woff'),
|
||||
url('/fonts/fontello/fontello.ttf') format('truetype'),
|
||||
url('/fonts/fontello/fontello.svg?78165468#fontello') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@@ -15,7 +14,7 @@
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
@font-face {
|
||||
font-family: 'fontello';
|
||||
src: url('../font/fontello.svg?73509738#fontello') format('svg');
|
||||
src: url('../font/fontello.svg?78165468#fontello') format('svg');
|
||||
}
|
||||
}
|
||||
*/
|
||||
@@ -54,47 +53,77 @@
|
||||
/* Uncomment for 3D effect */
|
||||
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
|
||||
}
|
||||
|
||||
.icon-alert:before { content: '\e810'; } /* '' */
|
||||
.icon-angle-double-right:before { content: '\f101'; } /* '' */
|
||||
.icon-attach:before { content: '\e820'; } /* '' */
|
||||
.icon-attention:before { content: '\e80f'; } /* '' */
|
||||
.icon-bash:before { content: '\e804'; } /* '' */
|
||||
.icon-bell:before { content: '\e80d'; } /* '' */
|
||||
.icon-cancel:before { content: '\e81e'; } /* '' */
|
||||
.icon-caution:before { content: '\e80f'; } /* '' */
|
||||
.icon-chrome:before { content: '\e841'; } /* '' */
|
||||
.icon-clipboard:before { content: '\e817'; } /* '' */
|
||||
.icon-code:before { content: '\f121'; } /* '' */
|
||||
.icon-cog-alt:before { content: '\e814'; } /* '' */
|
||||
.icon-css3:before { content: '\f13c'; } /* '' */
|
||||
.icon-docs:before { content: '\f15c'; } /* '' */
|
||||
.icon-download:before { content: '\e815'; } /* '' */
|
||||
.icon-facebook-official:before { content: '\f230'; } /* '' */
|
||||
.icon-file-pdf:before { content: '\f1c1'; } /* '' */
|
||||
.icon-firefox:before { content: '\e840'; } /* '' */
|
||||
.icon-flag:before { content: '\e813'; } /* '' */
|
||||
.icon-forum:before {
|
||||
content: '\f03d';
|
||||
margin-right:.3em;
|
||||
} /* '' */
|
||||
.icon-github:before { content: '\f09b'; } /* '' */
|
||||
.icon-gitter:before { content: '\e819'; } /* '' */
|
||||
.icon-go:before { content: '\e801'; } /* '' */
|
||||
.icon-golang:before { content: '\e801'; } /* '' */
|
||||
.icon-gopher:before { content: '\e801'; } /* '' */
|
||||
.icon-heart:before { content: '\e81d'; } /* '' */
|
||||
.icon-help:before { content: '\e81b'; } /* '' */
|
||||
.icon-home:before { content: '\e812'; } /* '' */
|
||||
.icon-html.input:before { content: '\e801'; } /* '' */
|
||||
.icon-html.input:before { content: '\e81f'; } /* '' adds the hugo logo to "code" shortcode for filenames that end in ".html"*/
|
||||
.icon-html5:before { content: '\e800'; } /* '' */
|
||||
.icon-html:before { content: '\e800'; } /* '' */
|
||||
.icon-hugo:before { content: '\e81f'; } /* '' */
|
||||
.icon-ie:before { content: '\e843'; } /* '' */
|
||||
.icon-info:before { content: '\e811'; } /* '' */
|
||||
.icon-instagram:before { content: '\f32d'; } /* '' */
|
||||
.icon-javascript:before { content: '\e802'; } /* '' */
|
||||
.icon-js:before { content: '\e802'; } /* '' */
|
||||
.icon-json:before {content: '\E81C';}
|
||||
.icon-json:before { content: '\e81c'; } /* '' */
|
||||
.icon-link:before { content: '\e816'; } /* '' */
|
||||
.icon-linkedin:before { content: '\f30c'; } /* '' */
|
||||
.icon-love:before { content: '\e81d'; } /* '' */
|
||||
.icon-mail:before { content: '\e821'; } /* '' */
|
||||
.icon-markdown:before { content: '\e80e'; } /* '' */
|
||||
.icon-note:before { content: '\e80d'; } /* '' */
|
||||
.icon-opera:before { content: '\e842'; } /* '' */
|
||||
.icon-pdf:before { content: '\f1c1'; } /* '' */
|
||||
.icon-pencil:before { content: '\e80c'; } /* '' */
|
||||
.icon-picture:before { content: '\e808'; } /* '' */
|
||||
.icon-quote-left:before { content: '\e809'; } /* '' */
|
||||
.icon-quote-right:before { content: '\e80a'; } /* '' */
|
||||
.icon-sass:before { content: '\e803'; } /* '' */
|
||||
.icon-search:before { content: '\e80b'; } /* '' */
|
||||
.icon-sh:before { content: '\e804'; } /* '' */
|
||||
.icon-share:before { content: '\f1e0'; } /* '' */
|
||||
.icon-shell:before { content: '\e804'; } /* '' */
|
||||
.icon-tag:before { content: '\e806'; } /* '' */
|
||||
.icon-tags:before { content: '\e805'; } /* '' */
|
||||
.icon-sh:before { content: '\e804'; } /* '' */
|
||||
.icon-terminal:before { content: '\e804'; } /* '' */
|
||||
.icon-twitter:before { content: '\e807'; } /* '' */
|
||||
.icon-bash:before { content: '\e804'; } /* '' */
|
||||
.icon-thumbs-up:before { content: '\e81a'; } /* '' */
|
||||
.icon-twitter:before { content: '\e807'; } /* '' */
|
||||
.icon-warning:before { content: '\e810'; } /* '' */
|
||||
.icon-website:before { content: '\e818'; } /* '' */
|
||||
.icon-yaml:before,.icon-yml:before,.icon-toml:before {
|
||||
font-family:$code-font-family;
|
||||
left:-1em;
|
||||
margin-right:1em;
|
||||
}
|
||||
.icon-yaml:before,.icon-yml:before {
|
||||
content:'YAML';
|
||||
}
|
||||
.icon-toml:before{
|
||||
content:'TOML';
|
||||
}
|
||||
@@ -4,7 +4,6 @@ h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
letter-spacing: -.021em;
|
||||
font-weight: $heading-font-weight;
|
||||
margin: 0px;
|
||||
padding-bottom: 20px;
|
||||
@@ -13,6 +12,7 @@ h4 {
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
letter-spacing: -.021em;
|
||||
@include MQ(M) {
|
||||
font-size: 2.25em;
|
||||
}
|
||||
@@ -28,11 +28,17 @@ h3 {
|
||||
|
||||
h4 {
|
||||
font-size: 1em;
|
||||
color:$hugo-gray;
|
||||
text-transform:uppercase;
|
||||
color: $hugo-gray;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.functions {
|
||||
font-family: $code-font-family;
|
||||
font-weight: $base-font-weight;
|
||||
}
|
||||
//keeps index page from taking on code/pre font family
|
||||
.submenu-item:first-child {
|
||||
a.submenu-item-link.functions{
|
||||
font-family:$base-font-family;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,411 @@
|
||||
// The following features have been deprecated and will be removed in the next MAJOR version release
|
||||
|
||||
@mixin inline-block {
|
||||
display: inline-block;
|
||||
|
||||
@warn "The inline-block mixin is deprecated and will be removed in the next major version release";
|
||||
}
|
||||
|
||||
@mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) {
|
||||
|
||||
@if type-of($style) == string and type-of($base-color) == color {
|
||||
@include buttonstyle($style, $base-color, $text-size, $padding);
|
||||
}
|
||||
|
||||
@if type-of($style) == string and type-of($base-color) == number {
|
||||
$padding: $text-size;
|
||||
$text-size: $base-color;
|
||||
$base-color: #4294f0;
|
||||
|
||||
@if $padding == inherit {
|
||||
$padding: 7px 18px;
|
||||
}
|
||||
|
||||
@include buttonstyle($style, $base-color, $text-size, $padding);
|
||||
}
|
||||
|
||||
@if type-of($style) == color and type-of($base-color) == color {
|
||||
$base-color: $style;
|
||||
$style: simple;
|
||||
@include buttonstyle($style, $base-color, $text-size, $padding);
|
||||
}
|
||||
|
||||
@if type-of($style) == color and type-of($base-color) == number {
|
||||
$padding: $text-size;
|
||||
$text-size: $base-color;
|
||||
$base-color: $style;
|
||||
$style: simple;
|
||||
|
||||
@if $padding == inherit {
|
||||
$padding: 7px 18px;
|
||||
}
|
||||
|
||||
@include buttonstyle($style, $base-color, $text-size, $padding);
|
||||
}
|
||||
|
||||
@if type-of($style) == number {
|
||||
$padding: $base-color;
|
||||
$text-size: $style;
|
||||
$base-color: #4294f0;
|
||||
$style: simple;
|
||||
|
||||
@if $padding == #4294f0 {
|
||||
$padding: 7px 18px;
|
||||
}
|
||||
|
||||
@include buttonstyle($style, $base-color, $text-size, $padding);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@warn "The button mixin is deprecated and will be removed in the next major version release";
|
||||
}
|
||||
|
||||
// Selector Style Button
|
||||
@mixin buttonstyle($type, $b-color, $t-size, $pad) {
|
||||
// Grayscale button
|
||||
@if $type == simple and $b-color == grayscale($b-color) {
|
||||
@include simple($b-color, true, $t-size, $pad);
|
||||
}
|
||||
|
||||
@if $type == shiny and $b-color == grayscale($b-color) {
|
||||
@include shiny($b-color, true, $t-size, $pad);
|
||||
}
|
||||
|
||||
@if $type == pill and $b-color == grayscale($b-color) {
|
||||
@include pill($b-color, true, $t-size, $pad);
|
||||
}
|
||||
|
||||
@if $type == flat and $b-color == grayscale($b-color) {
|
||||
@include flat($b-color, true, $t-size, $pad);
|
||||
}
|
||||
|
||||
// Colored button
|
||||
@if $type == simple {
|
||||
@include simple($b-color, false, $t-size, $pad);
|
||||
}
|
||||
|
||||
@else if $type == shiny {
|
||||
@include shiny($b-color, false, $t-size, $pad);
|
||||
}
|
||||
|
||||
@else if $type == pill {
|
||||
@include pill($b-color, false, $t-size, $pad);
|
||||
}
|
||||
|
||||
@else if $type == flat {
|
||||
@include flat($b-color, false, $t-size, $pad);
|
||||
}
|
||||
}
|
||||
|
||||
// Simple Button
|
||||
@mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
||||
$color: hsl(0, 0, 100%);
|
||||
$border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
|
||||
$inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
|
||||
$stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
|
||||
$text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
|
||||
|
||||
@if is-light($base-color) {
|
||||
$color: hsl(0, 0, 20%);
|
||||
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
||||
}
|
||||
|
||||
@if $grayscale == true {
|
||||
$border: grayscale($border);
|
||||
$inset-shadow: grayscale($inset-shadow);
|
||||
$stop-gradient: grayscale($stop-gradient);
|
||||
$text-shadow: grayscale($text-shadow);
|
||||
}
|
||||
|
||||
border: 1px solid $border;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 1px 0 0 $inset-shadow;
|
||||
color: $color;
|
||||
display: inline-block;
|
||||
font-size: $textsize;
|
||||
font-weight: bold;
|
||||
@include linear-gradient ($base-color, $stop-gradient);
|
||||
padding: $padding;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 0 $text-shadow;
|
||||
background-clip: padding-box;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
$base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
|
||||
$inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
|
||||
$stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$base-color-hover: grayscale($base-color-hover);
|
||||
$inset-shadow-hover: grayscale($inset-shadow-hover);
|
||||
$stop-gradient-hover: grayscale($stop-gradient-hover);
|
||||
}
|
||||
|
||||
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
|
||||
|
||||
box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:active:not(:disabled),
|
||||
&:focus:not(:disabled) {
|
||||
$border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
|
||||
$inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$border-active: grayscale($border-active);
|
||||
$inset-shadow-active: grayscale($inset-shadow-active);
|
||||
}
|
||||
|
||||
border: 1px solid $border-active;
|
||||
box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active;
|
||||
}
|
||||
}
|
||||
|
||||
// Shiny Button
|
||||
@mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
||||
$color: hsl(0, 0, 100%);
|
||||
$border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
|
||||
$border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
|
||||
$fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
|
||||
$inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
|
||||
$second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
|
||||
$text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
|
||||
$third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
|
||||
|
||||
@if is-light($base-color) {
|
||||
$color: hsl(0, 0, 20%);
|
||||
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
||||
}
|
||||
|
||||
@if $grayscale == true {
|
||||
$border: grayscale($border);
|
||||
$border-bottom: grayscale($border-bottom);
|
||||
$fourth-stop: grayscale($fourth-stop);
|
||||
$inset-shadow: grayscale($inset-shadow);
|
||||
$second-stop: grayscale($second-stop);
|
||||
$text-shadow: grayscale($text-shadow);
|
||||
$third-stop: grayscale($third-stop);
|
||||
}
|
||||
|
||||
@include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
|
||||
|
||||
border: 1px solid $border;
|
||||
border-bottom: 1px solid $border-bottom;
|
||||
border-radius: 5px;
|
||||
box-shadow: inset 0 1px 0 0 $inset-shadow;
|
||||
color: $color;
|
||||
display: inline-block;
|
||||
font-size: $textsize;
|
||||
font-weight: bold;
|
||||
padding: $padding;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 -1px 1px $text-shadow;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
$first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
|
||||
$second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
|
||||
$third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
|
||||
$fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
|
||||
|
||||
@if $grayscale == true {
|
||||
$first-stop-hover: grayscale($first-stop-hover);
|
||||
$second-stop-hover: grayscale($second-stop-hover);
|
||||
$third-stop-hover: grayscale($third-stop-hover);
|
||||
$fourth-stop-hover: grayscale($fourth-stop-hover);
|
||||
}
|
||||
|
||||
@include linear-gradient(top, $first-stop-hover 0%,
|
||||
$second-stop-hover 50%,
|
||||
$third-stop-hover 50%,
|
||||
$fourth-stop-hover 100%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:active:not(:disabled),
|
||||
&:focus:not(:disabled) {
|
||||
$inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
|
||||
|
||||
@if $grayscale == true {
|
||||
$inset-shadow-active: grayscale($inset-shadow-active);
|
||||
}
|
||||
|
||||
box-shadow: inset 0 0 20px 0 $inset-shadow-active;
|
||||
}
|
||||
}
|
||||
|
||||
// Pill Button
|
||||
@mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
||||
$color: hsl(0, 0, 100%);
|
||||
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
|
||||
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
|
||||
$border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
|
||||
$inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
|
||||
$stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
|
||||
$text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
|
||||
|
||||
@if is-light($base-color) {
|
||||
$color: hsl(0, 0, 20%);
|
||||
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
||||
}
|
||||
|
||||
@if $grayscale == true {
|
||||
$border-bottom: grayscale($border-bottom);
|
||||
$border-sides: grayscale($border-sides);
|
||||
$border-top: grayscale($border-top);
|
||||
$inset-shadow: grayscale($inset-shadow);
|
||||
$stop-gradient: grayscale($stop-gradient);
|
||||
$text-shadow: grayscale($text-shadow);
|
||||
}
|
||||
|
||||
border: 1px solid $border-top;
|
||||
border-color: $border-top $border-sides $border-bottom;
|
||||
border-radius: 16px;
|
||||
box-shadow: inset 0 1px 0 0 $inset-shadow;
|
||||
color: $color;
|
||||
display: inline-block;
|
||||
font-size: $textsize;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
@include linear-gradient ($base-color, $stop-gradient);
|
||||
padding: $padding;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 -1px 1px $text-shadow;
|
||||
background-clip: padding-box;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
$base-color-hover: adjust-color($base-color, $lightness: -4.5%);
|
||||
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
|
||||
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
|
||||
$border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
|
||||
$inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
|
||||
$stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
|
||||
$text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$base-color-hover: grayscale($base-color-hover);
|
||||
$border-bottom: grayscale($border-bottom);
|
||||
$border-sides: grayscale($border-sides);
|
||||
$border-top: grayscale($border-top);
|
||||
$inset-shadow-hover: grayscale($inset-shadow-hover);
|
||||
$stop-gradient-hover: grayscale($stop-gradient-hover);
|
||||
$text-shadow-hover: grayscale($text-shadow-hover);
|
||||
}
|
||||
|
||||
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
|
||||
|
||||
background-clip: padding-box;
|
||||
border: 1px solid $border-top;
|
||||
border-color: $border-top $border-sides $border-bottom;
|
||||
box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
|
||||
cursor: pointer;
|
||||
text-shadow: 0 -1px 1px $text-shadow-hover;
|
||||
}
|
||||
|
||||
&:active:not(:disabled),
|
||||
&:focus:not(:disabled) {
|
||||
$active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
|
||||
$border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
|
||||
$border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
|
||||
$inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
|
||||
$text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$active-color: grayscale($active-color);
|
||||
$border-active: grayscale($border-active);
|
||||
$border-bottom-active: grayscale($border-bottom-active);
|
||||
$inset-shadow-active: grayscale($inset-shadow-active);
|
||||
$text-shadow-active: grayscale($text-shadow-active);
|
||||
}
|
||||
|
||||
background: $active-color;
|
||||
border: 1px solid $border-active;
|
||||
border-bottom: 1px solid $border-bottom-active;
|
||||
box-shadow: inset 0 0 6px 3px $inset-shadow-active;
|
||||
text-shadow: 0 -1px 1px $text-shadow-active;
|
||||
}
|
||||
}
|
||||
|
||||
// Flat Button
|
||||
@mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
||||
$color: hsl(0, 0, 100%);
|
||||
|
||||
@if is-light($base-color) {
|
||||
$color: hsl(0, 0, 20%);
|
||||
}
|
||||
|
||||
background-color: $base-color;
|
||||
border-radius: 3px;
|
||||
border: 0;
|
||||
color: $color;
|
||||
display: inline-block;
|
||||
font-size: $textsize;
|
||||
font-weight: bold;
|
||||
padding: $padding;
|
||||
text-decoration: none;
|
||||
background-clip: padding-box;
|
||||
|
||||
&:hover:not(:disabled){
|
||||
$base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$base-color-hover: grayscale($base-color-hover);
|
||||
}
|
||||
|
||||
background-color: $base-color-hover;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:active:not(:disabled),
|
||||
&:focus:not(:disabled) {
|
||||
$base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$base-color-active: grayscale($base-color-active);
|
||||
}
|
||||
|
||||
background-color: $base-color-active;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Flexible grid
|
||||
@function flex-grid($columns, $container-columns: $fg-max-columns) {
|
||||
$width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
|
||||
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
|
||||
@return percentage($width / $container-width);
|
||||
|
||||
@warn "The flex-grid function is deprecated and will be removed in the next major version release";
|
||||
}
|
||||
|
||||
// Flexible gutter
|
||||
@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
|
||||
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
|
||||
@return percentage($gutter / $container-width);
|
||||
|
||||
@warn "The flex-gutter function is deprecated and will be removed in the next major version release";
|
||||
}
|
||||
|
||||
@function grid-width($n) {
|
||||
@return $n * $gw-column + ($n - 1) * $gw-gutter;
|
||||
|
||||
@warn "The grid-width function is deprecated and will be removed in the next major version release";
|
||||
}
|
||||
|
||||
@function golden-ratio($value, $increment) {
|
||||
@return modular-scale($increment, $value, $ratio: $golden);
|
||||
|
||||
@warn "The golden-ratio function is deprecated and will be removed in the next major version release. Please use the modular-scale function, instead.";
|
||||
}
|
||||
|
||||
@mixin box-sizing($box) {
|
||||
@include prefixer(box-sizing, $box, webkit moz spec);
|
||||
|
||||
@warn "The box-sizing mixin is deprecated and will be removed in the next major version release. This property can now be used un-prefixed.";
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
// Bourbon 4.2.7
|
||||
// http://bourbon.io
|
||||
// Copyright 2011-2015 thoughtbot, inc.
|
||||
// MIT License
|
||||
|
||||
@import "settings/prefixer";
|
||||
@import "settings/px-to-em";
|
||||
@import "settings/asset-pipeline";
|
||||
|
||||
@import "functions/assign-inputs";
|
||||
@import "functions/contains";
|
||||
@import "functions/contains-falsy";
|
||||
@import "functions/is-length";
|
||||
@import "functions/is-light";
|
||||
@import "functions/is-number";
|
||||
@import "functions/is-size";
|
||||
@import "functions/px-to-em";
|
||||
@import "functions/px-to-rem";
|
||||
@import "functions/shade";
|
||||
@import "functions/strip-units";
|
||||
@import "functions/tint";
|
||||
@import "functions/transition-property-name";
|
||||
@import "functions/unpack";
|
||||
@import "functions/modular-scale";
|
||||
|
||||
@import "helpers/convert-units";
|
||||
@import "helpers/directional-values";
|
||||
@import "helpers/font-source-declaration";
|
||||
@import "helpers/gradient-positions-parser";
|
||||
@import "helpers/linear-angle-parser";
|
||||
@import "helpers/linear-gradient-parser";
|
||||
@import "helpers/linear-positions-parser";
|
||||
@import "helpers/linear-side-corner-parser";
|
||||
@import "helpers/radial-arg-parser";
|
||||
@import "helpers/radial-positions-parser";
|
||||
@import "helpers/radial-gradient-parser";
|
||||
@import "helpers/render-gradients";
|
||||
@import "helpers/shape-size-stripper";
|
||||
@import "helpers/str-to-num";
|
||||
|
||||
@import "css3/animation";
|
||||
@import "css3/appearance";
|
||||
@import "css3/backface-visibility";
|
||||
@import "css3/background";
|
||||
@import "css3/background-image";
|
||||
@import "css3/border-image";
|
||||
@import "css3/calc";
|
||||
@import "css3/columns";
|
||||
@import "css3/filter";
|
||||
@import "css3/flex-box";
|
||||
@import "css3/font-face";
|
||||
@import "css3/font-feature-settings";
|
||||
@import "css3/hidpi-media-query";
|
||||
@import "css3/hyphens";
|
||||
@import "css3/image-rendering";
|
||||
@import "css3/keyframes";
|
||||
@import "css3/linear-gradient";
|
||||
@import "css3/perspective";
|
||||
@import "css3/placeholder";
|
||||
@import "css3/radial-gradient";
|
||||
@import "css3/selection";
|
||||
@import "css3/text-decoration";
|
||||
@import "css3/transform";
|
||||
@import "css3/transition";
|
||||
@import "css3/user-select";
|
||||
|
||||
@import "addons/border-color";
|
||||
@import "addons/border-radius";
|
||||
@import "addons/border-style";
|
||||
@import "addons/border-width";
|
||||
@import "addons/buttons";
|
||||
@import "addons/clearfix";
|
||||
@import "addons/ellipsis";
|
||||
@import "addons/font-stacks";
|
||||
@import "addons/hide-text";
|
||||
@import "addons/margin";
|
||||
@import "addons/padding";
|
||||
@import "addons/position";
|
||||
@import "addons/prefixer";
|
||||
@import "addons/retina-image";
|
||||
@import "addons/size";
|
||||
@import "addons/text-inputs";
|
||||
@import "addons/timing-functions";
|
||||
@import "addons/triangle";
|
||||
@import "addons/word-wrap";
|
||||
|
||||
@import "bourbon-deprecated-upcoming";
|
||||
@@ -0,0 +1,26 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides a quick method for targeting `border-color` on specific sides of a box. Use a `null` value to “skip” a side.
|
||||
///
|
||||
/// @param {Arglist} $vals
|
||||
/// List of arguments
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include border-color(#a60b55 #76cd9c null #e8ae1a);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// border-left-color: #e8ae1a;
|
||||
/// border-right-color: #76cd9c;
|
||||
/// border-top-color: #a60b55;
|
||||
/// }
|
||||
///
|
||||
/// @require {mixin} directional-property
|
||||
///
|
||||
/// @output `border-color`
|
||||
|
||||
@mixin border-color($vals...) {
|
||||
@include directional-property(border, color, $vals...);
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides a quick method for targeting `border-radius` on both corners on the side of a box.
|
||||
///
|
||||
/// @param {Number} $radii
|
||||
/// List of arguments
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element-one {
|
||||
/// @include border-top-radius(5px);
|
||||
/// }
|
||||
///
|
||||
/// .element-two {
|
||||
/// @include border-left-radius(3px);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element-one {
|
||||
/// border-top-left-radius: 5px;
|
||||
/// border-top-right-radius: 5px;
|
||||
/// }
|
||||
///
|
||||
/// .element-two {
|
||||
/// border-bottom-left-radius: 3px;
|
||||
/// border-top-left-radius: 3px;
|
||||
/// }
|
||||
///
|
||||
/// @output `border-radius`
|
||||
|
||||
@mixin border-top-radius($radii) {
|
||||
border-top-left-radius: $radii;
|
||||
border-top-right-radius: $radii;
|
||||
}
|
||||
|
||||
@mixin border-right-radius($radii) {
|
||||
border-bottom-right-radius: $radii;
|
||||
border-top-right-radius: $radii;
|
||||
}
|
||||
|
||||
@mixin border-bottom-radius($radii) {
|
||||
border-bottom-left-radius: $radii;
|
||||
border-bottom-right-radius: $radii;
|
||||
}
|
||||
|
||||
@mixin border-left-radius($radii) {
|
||||
border-bottom-left-radius: $radii;
|
||||
border-top-left-radius: $radii;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides a quick method for targeting `border-style` on specific sides of a box. Use a `null` value to “skip” a side.
|
||||
///
|
||||
/// @param {Arglist} $vals
|
||||
/// List of arguments
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include border-style(dashed null solid);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// border-bottom-style: solid;
|
||||
/// border-top-style: dashed;
|
||||
/// }
|
||||
///
|
||||
/// @require {mixin} directional-property
|
||||
///
|
||||
/// @output `border-style`
|
||||
|
||||
@mixin border-style($vals...) {
|
||||
@include directional-property(border, style, $vals...);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides a quick method for targeting `border-width` on specific sides of a box. Use a `null` value to “skip” a side.
|
||||
///
|
||||
/// @param {Arglist} $vals
|
||||
/// List of arguments
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include border-width(1em null 20px);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// border-bottom-width: 20px;
|
||||
/// border-top-width: 1em;
|
||||
/// }
|
||||
///
|
||||
/// @require {mixin} directional-property
|
||||
///
|
||||
/// @output `border-width`
|
||||
|
||||
@mixin border-width($vals...) {
|
||||
@include directional-property(border, width, $vals...);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Generates variables for all buttons. Please note that you must use interpolation on the variable: `#{$all-buttons}`.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// #{$all-buttons} {
|
||||
/// background-color: #f00;
|
||||
/// }
|
||||
///
|
||||
/// #{$all-buttons-focus},
|
||||
/// #{$all-buttons-hover} {
|
||||
/// background-color: #0f0;
|
||||
/// }
|
||||
///
|
||||
/// #{$all-buttons-active} {
|
||||
/// background-color: #00f;
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// button,
|
||||
/// input[type="button"],
|
||||
/// input[type="reset"],
|
||||
/// input[type="submit"] {
|
||||
/// background-color: #f00;
|
||||
/// }
|
||||
///
|
||||
/// button:focus,
|
||||
/// input[type="button"]:focus,
|
||||
/// input[type="reset"]:focus,
|
||||
/// input[type="submit"]:focus,
|
||||
/// button:hover,
|
||||
/// input[type="button"]:hover,
|
||||
/// input[type="reset"]:hover,
|
||||
/// input[type="submit"]:hover {
|
||||
/// background-color: #0f0;
|
||||
/// }
|
||||
///
|
||||
/// button:active,
|
||||
/// input[type="button"]:active,
|
||||
/// input[type="reset"]:active,
|
||||
/// input[type="submit"]:active {
|
||||
/// background-color: #00f;
|
||||
/// }
|
||||
///
|
||||
/// @require assign-inputs
|
||||
///
|
||||
/// @type List
|
||||
///
|
||||
/// @todo Remove double assigned variables (Lines 59–62) in v5.0.0
|
||||
|
||||
$buttons-list: 'button',
|
||||
'input[type="button"]',
|
||||
'input[type="reset"]',
|
||||
'input[type="submit"]';
|
||||
|
||||
$all-buttons: assign-inputs($buttons-list);
|
||||
$all-buttons-active: assign-inputs($buttons-list, active);
|
||||
$all-buttons-focus: assign-inputs($buttons-list, focus);
|
||||
$all-buttons-hover: assign-inputs($buttons-list, hover);
|
||||
|
||||
$all-button-inputs: $all-buttons;
|
||||
$all-button-inputs-active: $all-buttons-active;
|
||||
$all-button-inputs-focus: $all-buttons-focus;
|
||||
$all-button-inputs-hover: $all-buttons-hover;
|
||||
@@ -0,0 +1,25 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides an easy way to include a clearfix for containing floats.
|
||||
///
|
||||
/// @link http://cssmojo.com/latest_new_clearfix_so_far/
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include clearfix;
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element::after {
|
||||
/// clear: both;
|
||||
/// content: "";
|
||||
/// display: table;
|
||||
/// }
|
||||
|
||||
@mixin clearfix {
|
||||
&::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Truncates text and adds an ellipsis to represent overflow.
|
||||
///
|
||||
/// @param {Number} $width [100%]
|
||||
/// Max-width for the string to respect before being truncated
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include ellipsis;
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// display: inline-block;
|
||||
/// max-width: 100%;
|
||||
/// overflow: hidden;
|
||||
/// text-overflow: ellipsis;
|
||||
/// white-space: nowrap;
|
||||
/// word-wrap: normal;
|
||||
/// }
|
||||
|
||||
@mixin ellipsis($width: 100%) {
|
||||
display: inline-block;
|
||||
max-width: $width;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Georgia font stack.
|
||||
///
|
||||
/// @type List
|
||||
|
||||
$georgia: "Georgia", "Cambria", "Times New Roman", "Times", serif;
|
||||
|
||||
/// Helvetica font stack.
|
||||
///
|
||||
/// @type List
|
||||
|
||||
$helvetica: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
|
||||
|
||||
/// Lucida Grande font stack.
|
||||
///
|
||||
/// @type List
|
||||
|
||||
$lucida-grande: "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif;
|
||||
|
||||
/// Monospace font stack.
|
||||
///
|
||||
/// @type List
|
||||
|
||||
$monospace: "Bitstream Vera Sans Mono", "Consolas", "Courier", monospace;
|
||||
|
||||
/// Verdana font stack.
|
||||
///
|
||||
/// @type List
|
||||
|
||||
$verdana: "Verdana", "Geneva", sans-serif;
|
||||
@@ -0,0 +1,27 @@
|
||||
/// Hides the text in an element, commonly used to show an image. Some elements will need block-level styles applied.
|
||||
///
|
||||
/// @link http://zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include hide-text;
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// overflow: hidden;
|
||||
/// text-indent: 101%;
|
||||
/// white-space: nowrap;
|
||||
/// }
|
||||
///
|
||||
/// @todo Remove height argument in v5.0.0
|
||||
|
||||
@mixin hide-text($height: null) {
|
||||
overflow: hidden;
|
||||
text-indent: 101%;
|
||||
white-space: nowrap;
|
||||
|
||||
@if $height {
|
||||
@warn "The `hide-text` mixin has changed and no longer requires a height. The height argument will no longer be accepted in v5.0.0";
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides a quick method for targeting `margin` on specific sides of a box. Use a `null` value to “skip” a side.
|
||||
///
|
||||
/// @param {Arglist} $vals
|
||||
/// List of arguments
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include margin(null 10px 3em 20vh);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// margin-bottom: 3em;
|
||||
/// margin-left: 20vh;
|
||||
/// margin-right: 10px;
|
||||
/// }
|
||||
///
|
||||
/// @require {mixin} directional-property
|
||||
///
|
||||
/// @output `margin`
|
||||
|
||||
@mixin margin($vals...) {
|
||||
@include directional-property(margin, false, $vals...);
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides a quick method for targeting `padding` on specific sides of a box. Use a `null` value to “skip” a side.
|
||||
///
|
||||
/// @param {Arglist} $vals
|
||||
/// List of arguments
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include padding(12vh null 10px 5%);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// padding-bottom: 10px;
|
||||
/// padding-left: 5%;
|
||||
/// padding-top: 12vh;
|
||||
/// }
|
||||
///
|
||||
/// @require {mixin} directional-property
|
||||
///
|
||||
/// @output `padding`
|
||||
|
||||
@mixin padding($vals...) {
|
||||
@include directional-property(padding, false, $vals...);
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides a quick method for setting an element’s position. Use a `null` value to “skip” a side.
|
||||
///
|
||||
/// @param {Position} $position [relative]
|
||||
/// A CSS position value
|
||||
///
|
||||
/// @param {Arglist} $coordinates [null null null null]
|
||||
/// List of values that correspond to the 4-value syntax for the edges of a box
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include position(absolute, 0 null null 10em);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// left: 10em;
|
||||
/// position: absolute;
|
||||
/// top: 0;
|
||||
/// }
|
||||
///
|
||||
/// @require {function} is-length
|
||||
/// @require {function} unpack
|
||||
|
||||
@mixin position($position: relative, $coordinates: null null null null) {
|
||||
@if type-of($position) == list {
|
||||
$coordinates: $position;
|
||||
$position: relative;
|
||||
}
|
||||
|
||||
$coordinates: unpack($coordinates);
|
||||
|
||||
$offsets: (
|
||||
top: nth($coordinates, 1),
|
||||
right: nth($coordinates, 2),
|
||||
bottom: nth($coordinates, 3),
|
||||
left: nth($coordinates, 4)
|
||||
);
|
||||
|
||||
position: $position;
|
||||
|
||||
@each $offset, $value in $offsets {
|
||||
@if is-length($value) {
|
||||
#{$offset}: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// A mixin for generating vendor prefixes on non-standardized properties.
|
||||
///
|
||||
/// @param {String} $property
|
||||
/// Property to prefix
|
||||
///
|
||||
/// @param {*} $value
|
||||
/// Value to use
|
||||
///
|
||||
/// @param {List} $prefixes
|
||||
/// Prefixes to define
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include prefixer(border-radius, 10px, webkit ms spec);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// -webkit-border-radius: 10px;
|
||||
/// -moz-border-radius: 10px;
|
||||
/// border-radius: 10px;
|
||||
/// }
|
||||
///
|
||||
/// @require {variable} $prefix-for-webkit
|
||||
/// @require {variable} $prefix-for-mozilla
|
||||
/// @require {variable} $prefix-for-microsoft
|
||||
/// @require {variable} $prefix-for-opera
|
||||
/// @require {variable} $prefix-for-spec
|
||||
|
||||
@mixin prefixer($property, $value, $prefixes) {
|
||||
@each $prefix in $prefixes {
|
||||
@if $prefix == webkit {
|
||||
@if $prefix-for-webkit {
|
||||
-webkit-#{$property}: $value;
|
||||
}
|
||||
} @else if $prefix == moz {
|
||||
@if $prefix-for-mozilla {
|
||||
-moz-#{$property}: $value;
|
||||
}
|
||||
} @else if $prefix == ms {
|
||||
@if $prefix-for-microsoft {
|
||||
-ms-#{$property}: $value;
|
||||
}
|
||||
} @else if $prefix == o {
|
||||
@if $prefix-for-opera {
|
||||
-o-#{$property}: $value;
|
||||
}
|
||||
} @else if $prefix == spec {
|
||||
@if $prefix-for-spec {
|
||||
#{$property}: $value;
|
||||
}
|
||||
} @else {
|
||||
@warn "Unrecognized prefix: #{$prefix}";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin disable-prefix-for-all() {
|
||||
$prefix-for-webkit: false !global;
|
||||
$prefix-for-mozilla: false !global;
|
||||
$prefix-for-microsoft: false !global;
|
||||
$prefix-for-opera: false !global;
|
||||
$prefix-for-spec: false !global;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) {
|
||||
@if $asset-pipeline {
|
||||
background-image: image-url("#{$filename}.#{$extension}");
|
||||
} @else {
|
||||
background-image: url("#{$filename}.#{$extension}");
|
||||
}
|
||||
|
||||
@include hidpi {
|
||||
@if $asset-pipeline {
|
||||
@if $retina-filename {
|
||||
background-image: image-url("#{$retina-filename}.#{$extension}");
|
||||
} @else {
|
||||
background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}");
|
||||
}
|
||||
} @else {
|
||||
@if $retina-filename {
|
||||
background-image: url("#{$retina-filename}.#{$extension}");
|
||||
} @else {
|
||||
background-image: url("#{$filename}#{$retina-suffix}.#{$extension}");
|
||||
}
|
||||
}
|
||||
|
||||
background-size: $background-size;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Sets the `width` and `height` of the element.
|
||||
///
|
||||
/// @param {List} $size
|
||||
/// A list of at most 2 size values.
|
||||
///
|
||||
/// If there is only a single value in `$size` it is used for both width and height. All units are supported.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .first-element {
|
||||
/// @include size(2em);
|
||||
/// }
|
||||
///
|
||||
/// .second-element {
|
||||
/// @include size(auto 10em);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .first-element {
|
||||
/// width: 2em;
|
||||
/// height: 2em;
|
||||
/// }
|
||||
///
|
||||
/// .second-element {
|
||||
/// width: auto;
|
||||
/// height: 10em;
|
||||
/// }
|
||||
///
|
||||
/// @todo Refactor in 5.0.0 to use a comma-separated argument
|
||||
|
||||
@mixin size($value) {
|
||||
$width: nth($value, 1);
|
||||
$height: $width;
|
||||
|
||||
@if length($value) > 1 {
|
||||
$height: nth($value, 2);
|
||||
}
|
||||
|
||||
@if is-size($height) {
|
||||
height: $height;
|
||||
} @else {
|
||||
@warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin.";
|
||||
}
|
||||
|
||||
@if is-size($width) {
|
||||
width: $width;
|
||||
} @else {
|
||||
@warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin.";
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Generates variables for all text-based inputs. Please note that you must use interpolation on the variable: `#{$all-text-inputs}`.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// #{$all-text-inputs} {
|
||||
/// border: 1px solid #f00;
|
||||
/// }
|
||||
///
|
||||
/// #{$all-text-inputs-focus},
|
||||
/// #{$all-text-inputs-hover} {
|
||||
/// border: 1px solid #0f0;
|
||||
/// }
|
||||
///
|
||||
/// #{$all-text-inputs-active} {
|
||||
/// border: 1px solid #00f;
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// input[type="color"],
|
||||
/// input[type="date"],
|
||||
/// input[type="datetime"],
|
||||
/// input[type="datetime-local"],
|
||||
/// input[type="email"],
|
||||
/// input[type="month"],
|
||||
/// input[type="number"],
|
||||
/// input[type="password"],
|
||||
/// input[type="search"],
|
||||
/// input[type="tel"],
|
||||
/// input[type="text"],
|
||||
/// input[type="time"],
|
||||
/// input[type="url"],
|
||||
/// input[type="week"],
|
||||
/// textarea {
|
||||
/// border: 1px solid #f00;
|
||||
/// }
|
||||
///
|
||||
/// input[type="color"]:focus,
|
||||
/// input[type="date"]:focus,
|
||||
/// input[type="datetime"]:focus,
|
||||
/// input[type="datetime-local"]:focus,
|
||||
/// input[type="email"]:focus,
|
||||
/// input[type="month"]:focus,
|
||||
/// input[type="number"]:focus,
|
||||
/// input[type="password"]:focus,
|
||||
/// input[type="search"]:focus,
|
||||
/// input[type="tel"]:focus,
|
||||
/// input[type="text"]:focus,
|
||||
/// input[type="time"]:focus,
|
||||
/// input[type="url"]:focus,
|
||||
/// input[type="week"]:focus,
|
||||
/// textarea:focus,
|
||||
/// input[type="color"]:hover,
|
||||
/// input[type="date"]:hover,
|
||||
/// input[type="datetime"]:hover,
|
||||
/// input[type="datetime-local"]:hover,
|
||||
/// input[type="email"]:hover,
|
||||
/// input[type="month"]:hover,
|
||||
/// input[type="number"]:hover,
|
||||
/// input[type="password"]:hover,
|
||||
/// input[type="search"]:hover,
|
||||
/// input[type="tel"]:hover,
|
||||
/// input[type="text"]:hover,
|
||||
/// input[type="time"]:hover,
|
||||
/// input[type="url"]:hover,
|
||||
/// input[type="week"]:hover,
|
||||
/// textarea:hover {
|
||||
/// border: 1px solid #0f0;
|
||||
/// }
|
||||
///
|
||||
/// input[type="color"]:active,
|
||||
/// input[type="date"]:active,
|
||||
/// input[type="datetime"]:active,
|
||||
/// input[type="datetime-local"]:active,
|
||||
/// input[type="email"]:active,
|
||||
/// input[type="month"]:active,
|
||||
/// input[type="number"]:active,
|
||||
/// input[type="password"]:active,
|
||||
/// input[type="search"]:active,
|
||||
/// input[type="tel"]:active,
|
||||
/// input[type="text"]:active,
|
||||
/// input[type="time"]:active,
|
||||
/// input[type="url"]:active,
|
||||
/// input[type="week"]:active,
|
||||
/// textarea:active {
|
||||
/// border: 1px solid #00f;
|
||||
/// }
|
||||
///
|
||||
/// @require assign-inputs
|
||||
///
|
||||
/// @type List
|
||||
|
||||
$text-inputs-list: 'input[type="color"]',
|
||||
'input[type="date"]',
|
||||
'input[type="datetime"]',
|
||||
'input[type="datetime-local"]',
|
||||
'input[type="email"]',
|
||||
'input[type="month"]',
|
||||
'input[type="number"]',
|
||||
'input[type="password"]',
|
||||
'input[type="search"]',
|
||||
'input[type="tel"]',
|
||||
'input[type="text"]',
|
||||
'input[type="time"]',
|
||||
'input[type="url"]',
|
||||
'input[type="week"]',
|
||||
'input:not([type])',
|
||||
'textarea';
|
||||
|
||||
$all-text-inputs: assign-inputs($text-inputs-list);
|
||||
$all-text-inputs-active: assign-inputs($text-inputs-list, active);
|
||||
$all-text-inputs-focus: assign-inputs($text-inputs-list, focus);
|
||||
$all-text-inputs-hover: assign-inputs($text-inputs-list, hover);
|
||||
@@ -0,0 +1,34 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
|
||||
///
|
||||
/// Timing functions are the same as demoed here: http://jqueryui.com/resources/demos/effect/easing.html
|
||||
///
|
||||
/// @type cubic-bezier
|
||||
|
||||
$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
|
||||
$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
||||
$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
|
||||
$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
||||
$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
|
||||
$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
|
||||
$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
|
||||
$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
|
||||
|
||||
$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
|
||||
$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
|
||||
$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
|
||||
$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
||||
$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
|
||||
$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
|
||||
$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
|
||||
|
||||
$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
|
||||
$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
|
||||
$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
|
||||
$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
|
||||
$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
|
||||
$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
|
||||
@@ -0,0 +1,63 @@
|
||||
@mixin triangle($size, $color, $direction) {
|
||||
$width: nth($size, 1);
|
||||
$height: nth($size, length($size));
|
||||
$foreground-color: nth($color, 1);
|
||||
$background-color: if(length($color) == 2, nth($color, 2), transparent);
|
||||
height: 0;
|
||||
width: 0;
|
||||
|
||||
@if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
|
||||
$width: $width / 2;
|
||||
$height: if(length($size) > 1, $height, $height/2);
|
||||
|
||||
@if $direction == up {
|
||||
border-bottom: $height solid $foreground-color;
|
||||
border-left: $width solid $background-color;
|
||||
border-right: $width solid $background-color;
|
||||
} @else if $direction == right {
|
||||
border-bottom: $width solid $background-color;
|
||||
border-left: $height solid $foreground-color;
|
||||
border-top: $width solid $background-color;
|
||||
} @else if $direction == down {
|
||||
border-left: $width solid $background-color;
|
||||
border-right: $width solid $background-color;
|
||||
border-top: $height solid $foreground-color;
|
||||
} @else if $direction == left {
|
||||
border-bottom: $width solid $background-color;
|
||||
border-right: $height solid $foreground-color;
|
||||
border-top: $width solid $background-color;
|
||||
}
|
||||
} @else if ($direction == up-right) or ($direction == up-left) {
|
||||
border-top: $height solid $foreground-color;
|
||||
|
||||
@if $direction == up-right {
|
||||
border-left: $width solid $background-color;
|
||||
} @else if $direction == up-left {
|
||||
border-right: $width solid $background-color;
|
||||
}
|
||||
} @else if ($direction == down-right) or ($direction == down-left) {
|
||||
border-bottom: $height solid $foreground-color;
|
||||
|
||||
@if $direction == down-right {
|
||||
border-left: $width solid $background-color;
|
||||
} @else if $direction == down-left {
|
||||
border-right: $width solid $background-color;
|
||||
}
|
||||
} @else if ($direction == inset-up) {
|
||||
border-color: $background-color $background-color $foreground-color;
|
||||
border-style: solid;
|
||||
border-width: $height $width;
|
||||
} @else if ($direction == inset-down) {
|
||||
border-color: $foreground-color $background-color $background-color;
|
||||
border-style: solid;
|
||||
border-width: $height $width;
|
||||
} @else if ($direction == inset-right) {
|
||||
border-color: $background-color $background-color $background-color $foreground-color;
|
||||
border-style: solid;
|
||||
border-width: $width $height;
|
||||
} @else if ($direction == inset-left) {
|
||||
border-color: $background-color $foreground-color $background-color $background-color;
|
||||
border-style: solid;
|
||||
border-width: $width $height;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides an easy way to change the `word-wrap` property.
|
||||
///
|
||||
/// @param {String} $wrap [break-word]
|
||||
/// Value for the `word-break` property.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .wrapper {
|
||||
/// @include word-wrap(break-word);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .wrapper {
|
||||
/// overflow-wrap: break-word;
|
||||
/// word-break: break-all;
|
||||
/// word-wrap: break-word;
|
||||
/// }
|
||||
|
||||
@mixin word-wrap($wrap: break-word) {
|
||||
overflow-wrap: $wrap;
|
||||
word-wrap: $wrap;
|
||||
|
||||
@if $wrap == break-word {
|
||||
word-break: break-all;
|
||||
} @else {
|
||||
word-break: $wrap;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
|
||||
// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
|
||||
|
||||
@mixin animation($animations...) {
|
||||
@include prefixer(animation, $animations, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin animation-name($names...) {
|
||||
@include prefixer(animation-name, $names, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin animation-duration($times...) {
|
||||
@include prefixer(animation-duration, $times, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin animation-timing-function($motions...) {
|
||||
// ease | linear | ease-in | ease-out | ease-in-out
|
||||
@include prefixer(animation-timing-function, $motions, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin animation-iteration-count($values...) {
|
||||
// infinite | <number>
|
||||
@include prefixer(animation-iteration-count, $values, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin animation-direction($directions...) {
|
||||
// normal | alternate
|
||||
@include prefixer(animation-direction, $directions, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin animation-play-state($states...) {
|
||||
// running | paused
|
||||
@include prefixer(animation-play-state, $states, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin animation-delay($times...) {
|
||||
@include prefixer(animation-delay, $times, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin animation-fill-mode($modes...) {
|
||||
// none | forwards | backwards | both
|
||||
@include prefixer(animation-fill-mode, $modes, webkit moz spec);
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
@mixin appearance($value) {
|
||||
@include prefixer(appearance, $value, webkit moz ms o spec);
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
@mixin backface-visibility($visibility) {
|
||||
@include prefixer(backface-visibility, $visibility, webkit spec);
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
//************************************************************************//
|
||||
// Background-image property for adding multiple background images with
|
||||
// gradients, or for stringing multiple gradients together.
|
||||
//************************************************************************//
|
||||
|
||||
@mixin background-image($images...) {
|
||||
$webkit-images: ();
|
||||
$spec-images: ();
|
||||
|
||||
@each $image in $images {
|
||||
$webkit-image: ();
|
||||
$spec-image: ();
|
||||
|
||||
@if (type-of($image) == string) {
|
||||
$url-str: str-slice($image, 1, 3);
|
||||
$gradient-type: str-slice($image, 1, 6);
|
||||
|
||||
@if $url-str == "url" {
|
||||
$webkit-image: $image;
|
||||
$spec-image: $image;
|
||||
}
|
||||
|
||||
@else if $gradient-type == "linear" {
|
||||
$gradients: _linear-gradient-parser($image);
|
||||
$webkit-image: map-get($gradients, webkit-image);
|
||||
$spec-image: map-get($gradients, spec-image);
|
||||
}
|
||||
|
||||
@else if $gradient-type == "radial" {
|
||||
$gradients: _radial-gradient-parser($image);
|
||||
$webkit-image: map-get($gradients, webkit-image);
|
||||
$spec-image: map-get($gradients, spec-image);
|
||||
}
|
||||
}
|
||||
|
||||
$webkit-images: append($webkit-images, $webkit-image, comma);
|
||||
$spec-images: append($spec-images, $spec-image, comma);
|
||||
}
|
||||
|
||||
background-image: $webkit-images;
|
||||
background-image: $spec-images;
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
//************************************************************************//
|
||||
// Background property for adding multiple backgrounds using shorthand
|
||||
// notation.
|
||||
//************************************************************************//
|
||||
|
||||
@mixin background($backgrounds...) {
|
||||
$webkit-backgrounds: ();
|
||||
$spec-backgrounds: ();
|
||||
|
||||
@each $background in $backgrounds {
|
||||
$webkit-background: ();
|
||||
$spec-background: ();
|
||||
$background-type: type-of($background);
|
||||
|
||||
@if $background-type == string or $background-type == list {
|
||||
$background-str: if($background-type == list, nth($background, 1), $background);
|
||||
|
||||
$url-str: str-slice($background-str, 1, 3);
|
||||
$gradient-type: str-slice($background-str, 1, 6);
|
||||
|
||||
@if $url-str == "url" {
|
||||
$webkit-background: $background;
|
||||
$spec-background: $background;
|
||||
}
|
||||
|
||||
@else if $gradient-type == "linear" {
|
||||
$gradients: _linear-gradient-parser("#{$background}");
|
||||
$webkit-background: map-get($gradients, webkit-image);
|
||||
$spec-background: map-get($gradients, spec-image);
|
||||
}
|
||||
|
||||
@else if $gradient-type == "radial" {
|
||||
$gradients: _radial-gradient-parser("#{$background}");
|
||||
$webkit-background: map-get($gradients, webkit-image);
|
||||
$spec-background: map-get($gradients, spec-image);
|
||||
}
|
||||
|
||||
@else {
|
||||
$webkit-background: $background;
|
||||
$spec-background: $background;
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
$webkit-background: $background;
|
||||
$spec-background: $background;
|
||||
}
|
||||
|
||||
$webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma);
|
||||
$spec-backgrounds: append($spec-backgrounds, $spec-background, comma);
|
||||
}
|
||||
|
||||
background: $webkit-backgrounds;
|
||||
background: $spec-backgrounds;
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
@mixin border-image($borders...) {
|
||||
$webkit-borders: ();
|
||||
$spec-borders: ();
|
||||
|
||||
@each $border in $borders {
|
||||
$webkit-border: ();
|
||||
$spec-border: ();
|
||||
$border-type: type-of($border);
|
||||
|
||||
@if $border-type == string or list {
|
||||
$border-str: if($border-type == list, nth($border, 1), $border);
|
||||
|
||||
$url-str: str-slice($border-str, 1, 3);
|
||||
$gradient-type: str-slice($border-str, 1, 6);
|
||||
|
||||
@if $url-str == "url" {
|
||||
$webkit-border: $border;
|
||||
$spec-border: $border;
|
||||
}
|
||||
|
||||
@else if $gradient-type == "linear" {
|
||||
$gradients: _linear-gradient-parser("#{$border}");
|
||||
$webkit-border: map-get($gradients, webkit-image);
|
||||
$spec-border: map-get($gradients, spec-image);
|
||||
}
|
||||
|
||||
@else if $gradient-type == "radial" {
|
||||
$gradients: _radial-gradient-parser("#{$border}");
|
||||
$webkit-border: map-get($gradients, webkit-image);
|
||||
$spec-border: map-get($gradients, spec-image);
|
||||
}
|
||||
|
||||
@else {
|
||||
$webkit-border: $border;
|
||||
$spec-border: $border;
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
$webkit-border: $border;
|
||||
$spec-border: $border;
|
||||
}
|
||||
|
||||
$webkit-borders: append($webkit-borders, $webkit-border, comma);
|
||||
$spec-borders: append($spec-borders, $spec-border, comma);
|
||||
}
|
||||
|
||||
-webkit-border-image: $webkit-borders;
|
||||
border-image: $spec-borders;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
//Examples:
|
||||
// @include border-image(url("image.png"));
|
||||
// @include border-image(url("image.png") 20 stretch);
|
||||
// @include border-image(linear-gradient(45deg, orange, yellow));
|
||||
// @include border-image(linear-gradient(45deg, orange, yellow) stretch);
|
||||
// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
|
||||
// @include border-image(radial-gradient(top, cover, orange, yellow, orange));
|
||||
@@ -0,0 +1,4 @@
|
||||
@mixin calc($property, $value) {
|
||||
#{$property}: -webkit-calc(#{$value});
|
||||
#{$property}: calc(#{$value});
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
@mixin columns($arg: auto) {
|
||||
// <column-count> || <column-width>
|
||||
@include prefixer(columns, $arg, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-count($int: auto) {
|
||||
// auto || integer
|
||||
@include prefixer(column-count, $int, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-gap($length: normal) {
|
||||
// normal || length
|
||||
@include prefixer(column-gap, $length, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-fill($arg: auto) {
|
||||
// auto || length
|
||||
@include prefixer(column-fill, $arg, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-rule($arg) {
|
||||
// <border-width> || <border-style> || <color>
|
||||
@include prefixer(column-rule, $arg, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-rule-color($color) {
|
||||
@include prefixer(column-rule-color, $color, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-rule-style($style: none) {
|
||||
// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
|
||||
@include prefixer(column-rule-style, $style, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-rule-width ($width: none) {
|
||||
@include prefixer(column-rule-width, $width, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-span($arg: none) {
|
||||
// none || all
|
||||
@include prefixer(column-span, $arg, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-width($length: auto) {
|
||||
// auto || length
|
||||
@include prefixer(column-width, $length, webkit moz spec);
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
@mixin filter($function: none) {
|
||||
// <filter-function> [<filter-function]* | none
|
||||
@include prefixer(filter, $function, webkit spec);
|
||||
}
|
||||
@@ -0,0 +1,287 @@
|
||||
// CSS3 Flexible Box Model and property defaults
|
||||
|
||||
// Custom shorthand notation for flexbox
|
||||
@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
|
||||
@include display-box;
|
||||
@include box-orient($orient);
|
||||
@include box-pack($pack);
|
||||
@include box-align($align);
|
||||
}
|
||||
|
||||
@mixin display-box {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox; // IE 10
|
||||
display: box;
|
||||
}
|
||||
|
||||
@mixin box-orient($orient: inline-axis) {
|
||||
// horizontal|vertical|inline-axis|block-axis|inherit
|
||||
@include prefixer(box-orient, $orient, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin box-pack($pack: start) {
|
||||
// start|end|center|justify
|
||||
@include prefixer(box-pack, $pack, webkit moz spec);
|
||||
-ms-flex-pack: $pack; // IE 10
|
||||
}
|
||||
|
||||
@mixin box-align($align: stretch) {
|
||||
// start|end|center|baseline|stretch
|
||||
@include prefixer(box-align, $align, webkit moz spec);
|
||||
-ms-flex-align: $align; // IE 10
|
||||
}
|
||||
|
||||
@mixin box-direction($direction: normal) {
|
||||
// normal|reverse|inherit
|
||||
@include prefixer(box-direction, $direction, webkit moz spec);
|
||||
-ms-flex-direction: $direction; // IE 10
|
||||
}
|
||||
|
||||
@mixin box-lines($lines: single) {
|
||||
// single|multiple
|
||||
@include prefixer(box-lines, $lines, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin box-ordinal-group($int: 1) {
|
||||
@include prefixer(box-ordinal-group, $int, webkit moz spec);
|
||||
-ms-flex-order: $int; // IE 10
|
||||
}
|
||||
|
||||
@mixin box-flex($value: 0) {
|
||||
@include prefixer(box-flex, $value, webkit moz spec);
|
||||
-ms-flex: $value; // IE 10
|
||||
}
|
||||
|
||||
@mixin box-flex-group($int: 1) {
|
||||
@include prefixer(box-flex-group, $int, webkit moz spec);
|
||||
}
|
||||
|
||||
// CSS3 Flexible Box Model and property defaults
|
||||
// Unified attributes for 2009, 2011, and 2012 flavours.
|
||||
|
||||
// 2009 - display (box | inline-box)
|
||||
// 2011 - display (flexbox | inline-flexbox)
|
||||
// 2012 - display (flex | inline-flex)
|
||||
@mixin display($value) {
|
||||
// flex | inline-flex
|
||||
@if $value == "flex" {
|
||||
// 2009
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: box;
|
||||
|
||||
// 2012
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
display: -ms-flexbox; // 2011 (IE 10)
|
||||
display: flex;
|
||||
} @else if $value == "inline-flex" {
|
||||
display: -webkit-inline-box;
|
||||
display: -moz-inline-box;
|
||||
display: inline-box;
|
||||
|
||||
display: -webkit-inline-flex;
|
||||
display: -moz-inline-flex;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
} @else {
|
||||
display: $value;
|
||||
}
|
||||
}
|
||||
|
||||
// 2009 - box-flex (integer)
|
||||
// 2011 - flex (decimal | width decimal)
|
||||
// 2012 - flex (integer integer width)
|
||||
@mixin flex($value) {
|
||||
|
||||
// Grab flex-grow for older browsers.
|
||||
$flex-grow: nth($value, 1);
|
||||
|
||||
// 2009
|
||||
@include prefixer(box-flex, $flex-grow, webkit moz spec);
|
||||
|
||||
// 2011 (IE 10), 2012
|
||||
@include prefixer(flex, $value, webkit moz ms spec);
|
||||
}
|
||||
|
||||
// 2009 - box-orient ( horizontal | vertical | inline-axis | block-axis)
|
||||
// - box-direction (normal | reverse)
|
||||
// 2011 - flex-direction (row | row-reverse | column | column-reverse)
|
||||
// 2012 - flex-direction (row | row-reverse | column | column-reverse)
|
||||
@mixin flex-direction($value: row) {
|
||||
|
||||
// Alt values.
|
||||
$value-2009: $value;
|
||||
$value-2011: $value;
|
||||
$direction: normal;
|
||||
|
||||
@if $value == row {
|
||||
$value-2009: horizontal;
|
||||
} @else if $value == "row-reverse" {
|
||||
$value-2009: horizontal;
|
||||
$direction: reverse;
|
||||
} @else if $value == column {
|
||||
$value-2009: vertical;
|
||||
} @else if $value == "column-reverse" {
|
||||
$value-2009: vertical;
|
||||
$direction: reverse;
|
||||
}
|
||||
|
||||
// 2009
|
||||
@include prefixer(box-orient, $value-2009, webkit moz spec);
|
||||
@include prefixer(box-direction, $direction, webkit moz spec);
|
||||
|
||||
// 2012
|
||||
@include prefixer(flex-direction, $value, webkit moz spec);
|
||||
|
||||
// 2011 (IE 10)
|
||||
-ms-flex-direction: $value;
|
||||
}
|
||||
|
||||
// 2009 - box-lines (single | multiple)
|
||||
// 2011 - flex-wrap (nowrap | wrap | wrap-reverse)
|
||||
// 2012 - flex-wrap (nowrap | wrap | wrap-reverse)
|
||||
@mixin flex-wrap($value: nowrap) {
|
||||
// Alt values
|
||||
$alt-value: $value;
|
||||
@if $value == nowrap {
|
||||
$alt-value: single;
|
||||
} @else if $value == wrap {
|
||||
$alt-value: multiple;
|
||||
} @else if $value == "wrap-reverse" {
|
||||
$alt-value: multiple;
|
||||
}
|
||||
|
||||
@include prefixer(box-lines, $alt-value, webkit moz spec);
|
||||
@include prefixer(flex-wrap, $value, webkit moz ms spec);
|
||||
}
|
||||
|
||||
// 2009 - TODO: parse values into flex-direction/flex-wrap
|
||||
// 2011 - TODO: parse values into flex-direction/flex-wrap
|
||||
// 2012 - flex-flow (flex-direction || flex-wrap)
|
||||
@mixin flex-flow($value) {
|
||||
@include prefixer(flex-flow, $value, webkit moz spec);
|
||||
}
|
||||
|
||||
// 2009 - box-ordinal-group (integer)
|
||||
// 2011 - flex-order (integer)
|
||||
// 2012 - order (integer)
|
||||
@mixin order($int: 0) {
|
||||
// 2009
|
||||
@include prefixer(box-ordinal-group, $int, webkit moz spec);
|
||||
|
||||
// 2012
|
||||
@include prefixer(order, $int, webkit moz spec);
|
||||
|
||||
// 2011 (IE 10)
|
||||
-ms-flex-order: $int;
|
||||
}
|
||||
|
||||
// 2012 - flex-grow (number)
|
||||
@mixin flex-grow($number: 0) {
|
||||
@include prefixer(flex-grow, $number, webkit moz spec);
|
||||
-ms-flex-positive: $number;
|
||||
}
|
||||
|
||||
// 2012 - flex-shrink (number)
|
||||
@mixin flex-shrink($number: 1) {
|
||||
@include prefixer(flex-shrink, $number, webkit moz spec);
|
||||
-ms-flex-negative: $number;
|
||||
}
|
||||
|
||||
// 2012 - flex-basis (number)
|
||||
@mixin flex-basis($width: auto) {
|
||||
@include prefixer(flex-basis, $width, webkit moz spec);
|
||||
-ms-flex-preferred-size: $width;
|
||||
}
|
||||
|
||||
// 2009 - box-pack (start | end | center | justify)
|
||||
// 2011 - flex-pack (start | end | center | justify)
|
||||
// 2012 - justify-content (flex-start | flex-end | center | space-between | space-around)
|
||||
@mixin justify-content($value: flex-start) {
|
||||
|
||||
// Alt values.
|
||||
$alt-value: $value;
|
||||
@if $value == "flex-start" {
|
||||
$alt-value: start;
|
||||
} @else if $value == "flex-end" {
|
||||
$alt-value: end;
|
||||
} @else if $value == "space-between" {
|
||||
$alt-value: justify;
|
||||
} @else if $value == "space-around" {
|
||||
$alt-value: distribute;
|
||||
}
|
||||
|
||||
// 2009
|
||||
@include prefixer(box-pack, $alt-value, webkit moz spec);
|
||||
|
||||
// 2012
|
||||
@include prefixer(justify-content, $value, webkit moz ms o spec);
|
||||
|
||||
// 2011 (IE 10)
|
||||
-ms-flex-pack: $alt-value;
|
||||
}
|
||||
|
||||
// 2009 - box-align (start | end | center | baseline | stretch)
|
||||
// 2011 - flex-align (start | end | center | baseline | stretch)
|
||||
// 2012 - align-items (flex-start | flex-end | center | baseline | stretch)
|
||||
@mixin align-items($value: stretch) {
|
||||
|
||||
$alt-value: $value;
|
||||
|
||||
@if $value == "flex-start" {
|
||||
$alt-value: start;
|
||||
} @else if $value == "flex-end" {
|
||||
$alt-value: end;
|
||||
}
|
||||
|
||||
// 2009
|
||||
@include prefixer(box-align, $alt-value, webkit moz spec);
|
||||
|
||||
// 2012
|
||||
@include prefixer(align-items, $value, webkit moz ms o spec);
|
||||
|
||||
// 2011 (IE 10)
|
||||
-ms-flex-align: $alt-value;
|
||||
}
|
||||
|
||||
// 2011 - flex-item-align (auto | start | end | center | baseline | stretch)
|
||||
// 2012 - align-self (auto | flex-start | flex-end | center | baseline | stretch)
|
||||
@mixin align-self($value: auto) {
|
||||
|
||||
$value-2011: $value;
|
||||
@if $value == "flex-start" {
|
||||
$value-2011: start;
|
||||
} @else if $value == "flex-end" {
|
||||
$value-2011: end;
|
||||
}
|
||||
|
||||
// 2012
|
||||
@include prefixer(align-self, $value, webkit moz spec);
|
||||
|
||||
// 2011 (IE 10)
|
||||
-ms-flex-item-align: $value-2011;
|
||||
}
|
||||
|
||||
// 2011 - flex-line-pack (start | end | center | justify | distribute | stretch)
|
||||
// 2012 - align-content (flex-start | flex-end | center | space-between | space-around | stretch)
|
||||
@mixin align-content($value: stretch) {
|
||||
|
||||
$value-2011: $value;
|
||||
@if $value == "flex-start" {
|
||||
$value-2011: start;
|
||||
} @else if $value == "flex-end" {
|
||||
$value-2011: end;
|
||||
} @else if $value == "space-between" {
|
||||
$value-2011: justify;
|
||||
} @else if $value == "space-around" {
|
||||
$value-2011: distribute;
|
||||
}
|
||||
|
||||
// 2012
|
||||
@include prefixer(align-content, $value, webkit moz spec);
|
||||
|
||||
// 2011 (IE 10)
|
||||
-ms-flex-line-pack: $value-2011;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
@mixin font-face(
|
||||
$font-family,
|
||||
$file-path,
|
||||
$weight: normal,
|
||||
$style: normal,
|
||||
$asset-pipeline: $asset-pipeline,
|
||||
$file-formats: eot woff2 woff ttf svg) {
|
||||
|
||||
$font-url-prefix: font-url-prefixer($asset-pipeline);
|
||||
|
||||
@font-face {
|
||||
font-family: $font-family;
|
||||
font-style: $style;
|
||||
font-weight: $weight;
|
||||
|
||||
src: font-source-declaration(
|
||||
$font-family,
|
||||
$file-path,
|
||||
$asset-pipeline,
|
||||
$file-formats,
|
||||
$font-url-prefix
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
@mixin font-feature-settings($settings...) {
|
||||
@if length($settings) == 0 { $settings: none; }
|
||||
@include prefixer(font-feature-settings, $settings, webkit moz ms spec);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
|
||||
@mixin hidpi($ratio: 1.3) {
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: $ratio),
|
||||
only screen and (min--moz-device-pixel-ratio: $ratio),
|
||||
only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
|
||||
only screen and (min-resolution: round($ratio * 96dpi)),
|
||||
only screen and (min-resolution: $ratio * 1dppx) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
@mixin hyphens($hyphenation: none) {
|
||||
// none | manual | auto
|
||||
@include prefixer(hyphens, $hyphenation, webkit moz ms spec);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
@mixin image-rendering ($mode:auto) {
|
||||
|
||||
@if ($mode == crisp-edges) {
|
||||
-ms-interpolation-mode: nearest-neighbor; // IE8+
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -o-crisp-edges;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
|
||||
@else {
|
||||
image-rendering: $mode;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
// Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content
|
||||
@mixin keyframes($name) {
|
||||
$original-prefix-for-webkit: $prefix-for-webkit;
|
||||
$original-prefix-for-mozilla: $prefix-for-mozilla;
|
||||
$original-prefix-for-microsoft: $prefix-for-microsoft;
|
||||
$original-prefix-for-opera: $prefix-for-opera;
|
||||
$original-prefix-for-spec: $prefix-for-spec;
|
||||
|
||||
@if $original-prefix-for-webkit {
|
||||
@include disable-prefix-for-all();
|
||||
$prefix-for-webkit: true !global;
|
||||
@-webkit-keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@if $original-prefix-for-mozilla {
|
||||
@include disable-prefix-for-all();
|
||||
$prefix-for-mozilla: true !global;
|
||||
@-moz-keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
$prefix-for-webkit: $original-prefix-for-webkit !global;
|
||||
$prefix-for-mozilla: $original-prefix-for-mozilla !global;
|
||||
$prefix-for-microsoft: $original-prefix-for-microsoft !global;
|
||||
$prefix-for-opera: $original-prefix-for-opera !global;
|
||||
$prefix-for-spec: $original-prefix-for-spec !global;
|
||||
|
||||
@if $original-prefix-for-spec {
|
||||
@keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
@mixin linear-gradient($pos, $g1, $g2: null,
|
||||
$g3: null, $g4: null,
|
||||
$g5: null, $g6: null,
|
||||
$g7: null, $g8: null,
|
||||
$g9: null, $g10: null,
|
||||
$fallback: null) {
|
||||
// Detect what type of value exists in $pos
|
||||
$pos-type: type-of(nth($pos, 1));
|
||||
$pos-spec: null;
|
||||
$pos-degree: null;
|
||||
|
||||
// If $pos is missing from mixin, reassign vars and add default position
|
||||
@if ($pos-type == color) or (nth($pos, 1) == "transparent") {
|
||||
$g10: $g9; $g9: $g8; $g8: $g7; $g7: $g6; $g6: $g5;
|
||||
$g5: $g4; $g4: $g3; $g3: $g2; $g2: $g1; $g1: $pos;
|
||||
$pos: null;
|
||||
}
|
||||
|
||||
@if $pos {
|
||||
$positions: _linear-positions-parser($pos);
|
||||
$pos-degree: nth($positions, 1);
|
||||
$pos-spec: nth($positions, 2);
|
||||
}
|
||||
|
||||
$full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10;
|
||||
|
||||
// Set $g1 as the default fallback color
|
||||
$fallback-color: nth($g1, 1);
|
||||
|
||||
// If $fallback is a color use that color as the fallback color
|
||||
@if (type-of($fallback) == color) or ($fallback == "transparent") {
|
||||
$fallback-color: $fallback;
|
||||
}
|
||||
|
||||
background-color: $fallback-color;
|
||||
background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
|
||||
background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
@mixin perspective($depth: none) {
|
||||
// none | <length>
|
||||
@include prefixer(perspective, $depth, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin perspective-origin($value: 50% 50%) {
|
||||
@include prefixer(perspective-origin, $value, webkit moz spec);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
@mixin placeholder {
|
||||
$placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
|
||||
@each $placeholder in $placeholders {
|
||||
&:#{$placeholder}-placeholder {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
// Requires Sass 3.1+
|
||||
@mixin radial-gradient($g1, $g2,
|
||||
$g3: null, $g4: null,
|
||||
$g5: null, $g6: null,
|
||||
$g7: null, $g8: null,
|
||||
$g9: null, $g10: null,
|
||||
$pos: null,
|
||||
$shape-size: null,
|
||||
$fallback: null) {
|
||||
|
||||
$data: _radial-arg-parser($g1, $g2, $pos, $shape-size);
|
||||
$g1: nth($data, 1);
|
||||
$g2: nth($data, 2);
|
||||
$pos: nth($data, 3);
|
||||
$shape-size: nth($data, 4);
|
||||
|
||||
$full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10;
|
||||
|
||||
// Strip deprecated cover/contain for spec
|
||||
$shape-size-spec: _shape-size-stripper($shape-size);
|
||||
|
||||
// Set $g1 as the default fallback color
|
||||
$first-color: nth($full, 1);
|
||||
$fallback-color: nth($first-color, 1);
|
||||
|
||||
@if (type-of($fallback) == color) or ($fallback == "transparent") {
|
||||
$fallback-color: $fallback;
|
||||
}
|
||||
|
||||
// Add Commas and spaces
|
||||
$shape-size: if($shape-size, "#{$shape-size}, ", null);
|
||||
$pos: if($pos, "#{$pos}, ", null);
|
||||
$pos-spec: if($pos, "at #{$pos}", null);
|
||||
$shape-size-spec: if(($shape-size-spec != " ") and ($pos == null), "#{$shape-size-spec}, ", "#{$shape-size-spec} ");
|
||||
|
||||
background-color: $fallback-color;
|
||||
background-image: -webkit-radial-gradient(#{$pos}#{$shape-size}#{$full});
|
||||
background-image: radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full});
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Outputs the spec and prefixed versions of the `::selection` pseudo-element.
|
||||
///
|
||||
/// @param {Bool} $current-selector [false]
|
||||
/// If set to `true`, it takes the current element into consideration.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include selection(true) {
|
||||
/// background-color: #ffbb52;
|
||||
/// }
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element::-moz-selection {
|
||||
/// background-color: #ffbb52;
|
||||
/// }
|
||||
///
|
||||
/// .element::selection {
|
||||
/// background-color: #ffbb52;
|
||||
/// }
|
||||
|
||||
@mixin selection($current-selector: false) {
|
||||
@if $current-selector {
|
||||
&::-moz-selection {
|
||||
@content;
|
||||
}
|
||||
|
||||
&::selection {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
::-moz-selection {
|
||||
@content;
|
||||
}
|
||||
|
||||
::selection {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
@mixin text-decoration($value) {
|
||||
// <text-decoration-line> || <text-decoration-style> || <text-decoration-color>
|
||||
@include prefixer(text-decoration, $value, moz);
|
||||
}
|
||||
|
||||
@mixin text-decoration-line($line: none) {
|
||||
// none || underline || overline || line-through
|
||||
@include prefixer(text-decoration-line, $line, moz);
|
||||
}
|
||||
|
||||
@mixin text-decoration-style($style: solid) {
|
||||
// solid || double || dotted || dashed || wavy
|
||||
@include prefixer(text-decoration-style, $style, moz webkit);
|
||||
}
|
||||
|
||||
@mixin text-decoration-color($color: currentColor) {
|
||||
// currentColor || <color>
|
||||
@include prefixer(text-decoration-color, $color, moz);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
@mixin transform($property: none) {
|
||||
// none | <transform-function>
|
||||
@include prefixer(transform, $property, webkit moz ms o spec);
|
||||
}
|
||||
|
||||
@mixin transform-origin($axes: 50%) {
|
||||
// x-axis - left | center | right | length | %
|
||||
// y-axis - top | center | bottom | length | %
|
||||
// z-axis - length
|
||||
@include prefixer(transform-origin, $axes, webkit moz ms o spec);
|
||||
}
|
||||
|
||||
@mixin transform-style($style: flat) {
|
||||
@include prefixer(transform-style, $style, webkit moz ms o spec);
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
|
||||
// Example: @include transition (all 2s ease-in-out);
|
||||
// @include transition (opacity 1s ease-in 2s, width 2s ease-out);
|
||||
// @include transition-property (transform, opacity);
|
||||
|
||||
@mixin transition($properties...) {
|
||||
// Fix for vendor-prefix transform property
|
||||
$needs-prefixes: false;
|
||||
$webkit: ();
|
||||
$moz: ();
|
||||
$spec: ();
|
||||
|
||||
// Create lists for vendor-prefixed transform
|
||||
@each $list in $properties {
|
||||
@if nth($list, 1) == "transform" {
|
||||
$needs-prefixes: true;
|
||||
$list1: -webkit-transform;
|
||||
$list2: -moz-transform;
|
||||
$list3: ();
|
||||
|
||||
@each $var in $list {
|
||||
$list3: join($list3, $var);
|
||||
|
||||
@if $var != "transform" {
|
||||
$list1: join($list1, $var);
|
||||
$list2: join($list2, $var);
|
||||
}
|
||||
}
|
||||
|
||||
$webkit: append($webkit, $list1);
|
||||
$moz: append($moz, $list2);
|
||||
$spec: append($spec, $list3);
|
||||
} @else {
|
||||
$webkit: append($webkit, $list, comma);
|
||||
$moz: append($moz, $list, comma);
|
||||
$spec: append($spec, $list, comma);
|
||||
}
|
||||
}
|
||||
|
||||
@if $needs-prefixes {
|
||||
-webkit-transition: $webkit;
|
||||
-moz-transition: $moz;
|
||||
transition: $spec;
|
||||
} @else {
|
||||
@if length($properties) >= 1 {
|
||||
@include prefixer(transition, $properties, webkit moz spec);
|
||||
} @else {
|
||||
$properties: all 0.15s ease-out 0s;
|
||||
@include prefixer(transition, $properties, webkit moz spec);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin transition-property($properties...) {
|
||||
-webkit-transition-property: transition-property-names($properties, "webkit");
|
||||
-moz-transition-property: transition-property-names($properties, "moz");
|
||||
transition-property: transition-property-names($properties, false);
|
||||
}
|
||||
|
||||
@mixin transition-duration($times...) {
|
||||
@include prefixer(transition-duration, $times, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin transition-timing-function($motions...) {
|
||||
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
|
||||
@include prefixer(transition-timing-function, $motions, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin transition-delay($times...) {
|
||||
@include prefixer(transition-delay, $times, webkit moz spec);
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
@mixin user-select($value: none) {
|
||||
@include prefixer(user-select, $value, webkit moz ms spec);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
@function assign-inputs($inputs, $pseudo: null) {
|
||||
$list: ();
|
||||
|
||||
@each $input in $inputs {
|
||||
$input: unquote($input);
|
||||
$input: if($pseudo, $input + ":" + $pseudo, $input);
|
||||
$list: append($list, $input, comma);
|
||||
}
|
||||
|
||||
@return $list;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Checks if a list does not contains a value.
|
||||
///
|
||||
/// @access private
|
||||
///
|
||||
/// @param {List} $list
|
||||
/// The list to check against.
|
||||
///
|
||||
/// @return {Bool}
|
||||
|
||||
@function contains-falsy($list) {
|
||||
@each $item in $list {
|
||||
@if not $item {
|
||||
@return true;
|
||||
}
|
||||
}
|
||||
|
||||
@return false;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Checks if a list contains a value(s).
|
||||
///
|
||||
/// @access private
|
||||
///
|
||||
/// @param {List} $list
|
||||
/// The list to check against.
|
||||
///
|
||||
/// @param {List} $values
|
||||
/// A single value or list of values to check for.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// contains($list, $value)
|
||||
///
|
||||
/// @return {Bool}
|
||||
|
||||
@function contains($list, $values...) {
|
||||
@each $value in $values {
|
||||
@if type-of(index($list, $value)) != "number" {
|
||||
@return false;
|
||||
}
|
||||
}
|
||||
|
||||
@return true;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Checks for a valid CSS length.
|
||||
///
|
||||
/// @param {String} $value
|
||||
|
||||
@function is-length($value) {
|
||||
@return type-of($value) != "null" and (str-slice($value + "", 1, 4) == "calc"
|
||||
or index(auto inherit initial 0, $value)
|
||||
or (type-of($value) == "number" and not(unitless($value))));
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Programatically determines whether a color is light or dark.
|
||||
///
|
||||
/// @link http://robots.thoughtbot.com/closer-look-color-lightness
|
||||
///
|
||||
/// @param {Color (Hex)} $color
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// is-light($color)
|
||||
///
|
||||
/// @return {Bool}
|
||||
|
||||
@function is-light($hex-color) {
|
||||
$-local-red: red(rgba($hex-color, 1));
|
||||
$-local-green: green(rgba($hex-color, 1));
|
||||
$-local-blue: blue(rgba($hex-color, 1));
|
||||
$-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255;
|
||||
|
||||
@return $-local-lightness > 0.6;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Checks for a valid number.
|
||||
///
|
||||
/// @param {Number} $value
|
||||
///
|
||||
/// @require {function} contains
|
||||
|
||||
@function is-number($value) {
|
||||
@return contains("0" "1" "2" "3" "4" "5" "6" "7" "8" "9" 0 1 2 3 4 5 6 7 8 9, $value);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Checks for a valid CSS size.
|
||||
///
|
||||
/// @param {String} $value
|
||||
///
|
||||
/// @require {function} contains
|
||||
/// @require {function} is-length
|
||||
|
||||
@function is-size($value) {
|
||||
@return is-length($value)
|
||||
or contains("fill" "fit-content" "min-content" "max-content", $value);
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
// Scaling Variables
|
||||
$golden: 1.618;
|
||||
$minor-second: 1.067;
|
||||
$major-second: 1.125;
|
||||
$minor-third: 1.2;
|
||||
$major-third: 1.25;
|
||||
$perfect-fourth: 1.333;
|
||||
$augmented-fourth: 1.414;
|
||||
$perfect-fifth: 1.5;
|
||||
$minor-sixth: 1.6;
|
||||
$major-sixth: 1.667;
|
||||
$minor-seventh: 1.778;
|
||||
$major-seventh: 1.875;
|
||||
$octave: 2;
|
||||
$major-tenth: 2.5;
|
||||
$major-eleventh: 2.667;
|
||||
$major-twelfth: 3;
|
||||
$double-octave: 4;
|
||||
|
||||
$modular-scale-ratio: $perfect-fourth !default;
|
||||
$modular-scale-base: em($em-base) !default;
|
||||
|
||||
@function modular-scale($increment, $value: $modular-scale-base, $ratio: $modular-scale-ratio) {
|
||||
$v1: nth($value, 1);
|
||||
$v2: nth($value, length($value));
|
||||
$value: $v1;
|
||||
|
||||
// scale $v2 to just above $v1
|
||||
@while $v2 > $v1 {
|
||||
$v2: ($v2 / $ratio); // will be off-by-1
|
||||
}
|
||||
@while $v2 < $v1 {
|
||||
$v2: ($v2 * $ratio); // will fix off-by-1
|
||||
}
|
||||
|
||||
// check AFTER scaling $v2 to prevent double-counting corner-case
|
||||
$double-stranded: $v2 > $v1;
|
||||
|
||||
@if $increment > 0 {
|
||||
@for $i from 1 through $increment {
|
||||
@if $double-stranded and ($v1 * $ratio) > $v2 {
|
||||
$value: $v2;
|
||||
$v2: ($v2 * $ratio);
|
||||
} @else {
|
||||
$v1: ($v1 * $ratio);
|
||||
$value: $v1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $increment < 0 {
|
||||
// adjust $v2 to just below $v1
|
||||
@if $double-stranded {
|
||||
$v2: ($v2 / $ratio);
|
||||
}
|
||||
|
||||
@for $i from $increment through -1 {
|
||||
@if $double-stranded and ($v1 / $ratio) < $v2 {
|
||||
$value: $v2;
|
||||
$v2: ($v2 / $ratio);
|
||||
} @else {
|
||||
$v1: ($v1 / $ratio);
|
||||
$value: $v1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@return $value;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user