mirror of https://github.com/lukechilds/docs.git
moxiegirl
6 years ago
committed by
Mary Anthony
Mary Anthony
399 changed files with 39021 additions and 16472 deletions
@ -0,0 +1,16 @@ |
|||
# A sample Guardfile |
|||
# More info at https://github.com/guard/guard#readme |
|||
|
|||
## Uncomment and set this to only include directories you want to watch |
|||
# directories %w(app lib config test spec features) \ |
|||
# .select{|d| Dir.exists?(d) ? d : UI.warning("Directory #{d} does not exist")} |
|||
|
|||
## Note: if you are using the `directories` clause above and you are not |
|||
## watching the project directory ('.'), then you will want to move |
|||
## the Guardfile to a watched dir and symlink it back, e.g. |
|||
# |
|||
# $ mkdir config |
|||
# $ mv Guardfile config/ |
|||
# $ ln -s config/Guardfile . |
|||
# |
|||
# and, you'll have to watch "config/Guardfile" instead of "Guardfile" |
|||
|
Can't render this file because it contains an unexpected character in line 14 and column 0.
|
@ -0,0 +1,17 @@ |
|||
- title: About Blockstack |
|||
docs: |
|||
- org/overview |
|||
- org/token |
|||
- org/explore |
|||
- title: Manage Stacks |
|||
docs: |
|||
- org/wallet-intro |
|||
- org/tokenholders |
|||
- title: Whitepapers |
|||
docs: |
|||
- org/whitepaper-tokensale |
|||
- org/whitepaper-token |
|||
- title: Reference |
|||
docs: |
|||
- org/faq |
|||
- org/terms |
|||
@ -1,4 +1,5 @@ |
|||
- docs: |
|||
- browser/ids-introduction |
|||
- browser/browser-introduction |
|||
- browser/purchase-id |
|||
- browser/faq_general |
|||
|
|||
@ -0,0 +1,32 @@ |
|||
<div class="uk-margin-large-top"> |
|||
<h3>Related Articles</h3> |
|||
|
|||
{% assign maxRelated = 4 %} |
|||
{% assign minCommonTags = 1 %} |
|||
{% assign maxRelatedCounter = 0 %} |
|||
|
|||
<ul class="uk-list"> |
|||
{% for doc in site.learn %} |
|||
|
|||
{% assign sameTagCount = 0 %} |
|||
{% assign commonTags = '' %} |
|||
|
|||
{% for tag in doc.tags %} |
|||
{% if doc.url != page.url %} |
|||
{% if page.tags contains tag %} |
|||
{% assign sameTagCount = sameTagCount | plus: 1 %} |
|||
{% endif %} |
|||
{% endif %} |
|||
{% endfor %} |
|||
|
|||
{% if sameTagCount >= minCommonTags %} |
|||
<li><a href="{{ site.baseurl }}{{ doc.url }}">{{ doc.title }}</a></li> |
|||
{% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %} |
|||
{% if maxRelatedCounter >= maxRelated %} |
|||
{% break %} |
|||
{% endif %} |
|||
{% endif %} |
|||
|
|||
{% endfor %} |
|||
</ul> |
|||
</div> |
|||
@ -1,2 +1,2 @@ |
|||
<title>{{page.title}}</title> |
|||
<meta http-equiv="refresh" content="0; url={{ page.redirect_url }}"> |
|||
<meta http-equiv="refresh" content="0; url={{ page.redirect }}"> |
|||
|
|||
@ -0,0 +1,74 @@ |
|||
--- |
|||
layout: default |
|||
--- |
|||
|
|||
<div class="uk-section"> |
|||
<div class="uk-container"> |
|||
<div class="uk-grid-large" data-uk-grid> |
|||
|
|||
<div class="sidebar-fixed-width uk-visible@m"> |
|||
<div class="sidebar-docs uk-position-fixed"> |
|||
<!-- --> |
|||
{% for section in site.data.navigation_org %} |
|||
{% if section.title %} |
|||
<h5>{{ section.title }}</h5> |
|||
{% endif %} |
|||
<ul class="uk-nav uk-nav-default doc-nav"> |
|||
{% for doc in section.docs %} |
|||
{% assign doc_url = doc | prepend:"/" | append:".html" %} |
|||
<!-- {% assign p = site.docs | where:"url", doc_url | first %} --> |
|||
{% for col in site.collections %} |
|||
{% for item in col.docs %} |
|||
{% if item.url == doc_url %} |
|||
{% assign doc_title = item.title %} |
|||
{% else %} |
|||
{% comment %}Do nothing{% endcomment %} |
|||
{% endif %} |
|||
{% endfor %} |
|||
{% endfor %} |
|||
<li class="{% if doc_url == page.url %}uk-active{% endif %}"><a href="{{ doc_url }}">{{ doc_title }}</a></li> |
|||
{% endfor %} |
|||
</ul> |
|||
{% endfor %} |
|||
<!-- --> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="uk-width-1-1 uk-width-expand@m"> |
|||
|
|||
<article markdown="span" class="uk-article"> |
|||
|
|||
<h1 class="uk-article-title">{{ page.title | escape }}</h1> |
|||
|
|||
{% if page.subtitle %}<p class="subtitle uk-text-lead uk-text-muted">{{ page.subtitle }}</p>{% endif %} |
|||
|
|||
|
|||
<div class="uk-article-meta uk-margin-top uk-margin-medium-bottom"> |
|||
{% include post-meta.html %} |
|||
</div> |
|||
|
|||
<div markdown="span" class="article-content"> |
|||
{{ content }} |
|||
{% include share.html %} |
|||
</div> |
|||
|
|||
<hr class="uk-margin-medium"> |
|||
|
|||
{% include paginate-doc.html %} |
|||
|
|||
<!-- {% include related-org.html %} --> |
|||
|
|||
</article> |
|||
|
|||
<script> |
|||
// Table of contents scroll to |
|||
UIkit.scroll('#markdown-toc a', { |
|||
duration: 400, |
|||
offset: 120 |
|||
}); |
|||
</script> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,24 @@ |
|||
--- |
|||
layout: org |
|||
permalink: /:collection/:path.html |
|||
--- |
|||
# Check your address |
|||
|
|||
We recommend that you confirm your address is correct by going through the following steps in the Stacks Wallet: |
|||
|
|||
* TOC |
|||
{:toc} |
|||
|
|||
|
|||
If you created a software wallet, using the "New Wallet" option, choose "Restore from Seed Phrase" when you start the Stacks Wallet application, then enter your Seed Phrase, and click "Restore." The address that you see on the next screen should match the address you created earlier. |
|||
|
|||
## For Hardware Wallets: |
|||
|
|||
If you used a hardware wallet originally, you can go through the same process again (clicking "Use a Hardware Wallet" when you first start the Stacks Wallet application), and your hardware wallet should produce the same address every time. If you used a "passphrase" make sure that you use the correct passphrase when checking your wallet address; using a different passphrase will result in generating a different address. (For more information on using passphrases with Trezor, see this page and for information with Ledger, see this page) |
|||
|
|||
Make sure to store your hardware wallet's seed phrase (sometimes referred to as a "Recovery Phrase" or "Recovery Seed") in the correct order safely. We recommend in at least two locations. If you used a passphrase, you should store that as well. |
|||
|
|||
## For Multi-Sig Wallets: |
|||
|
|||
If you used a multi-signature wallet (for advanced users), you will need to re-enter your public keys to check your address (by clicking “Create Multi-signature Wallet”). |
|||
The order that you enter the public keys into the multi-sig wallet is important! If you do not remember the order in which you entered your public keys, please contact hello@StacksToken.com. |
|||
@ -0,0 +1,103 @@ |
|||
--- |
|||
layout: org |
|||
permalink: /:collection/:path.html |
|||
--- |
|||
# Explore the Stacks blockchain |
|||
|
|||
Blockchains are often compared to databases. They are similar in that they store |
|||
information which users (people or programs) can examine or search. Each |
|||
blockchain platform provides a _blockchain explorer_ for searching the data in |
|||
their particular blockchain. This section explains how to use the Stacks |
|||
explorer to investigate the Stacks blockchain. |
|||
|
|||
This page is written for people who are blockchain beginners. If you are a developer interested in the technical specifications behind the Stacks explorer, please see [this discussion in the forum](https://forum.blockstack.org/t/announcing-blockstack-explorer/491). Detailed information about naming, registration, and so forth can be found in the [Using the Naming Service section](https://docs.blockstack.org/core/naming/introduction.html) of this documentation. |
|||
|
|||
## What you can search |
|||
|
|||
You use {::nomarkdown}<a href="https://explorer.blockstack.org/" target="\_blank"> the Stacks explorer</a>{:/} to search for the following objects: |
|||
|
|||
<table class="uk-table"> |
|||
<tr> |
|||
<th>Object</th> |
|||
<th>Description</th> |
|||
<th>Example of a search</th> |
|||
</tr> |
|||
<tr> |
|||
<td>name</td> |
|||
<td>An identifier or name. A name is a type of digital asset on the Blockstack network. If you have signed into the Blockstack Browser, you created a name. If an application developer registered an application within Blockstack, then they registered a name.</td> |
|||
<td><code>graphite.it</code> or <code>moxiegirl.id.blockstack</code></td> |
|||
</tr> |
|||
<tr> |
|||
<td>block</td> |
|||
<td>A block is a complete record on the blockchain. A good analogy is a diary entry. Each entry completes at a particular point in time, contains one or more activities which took place in the past. A block is a history of completed activity from a specific point of time on the blockchain. The sequential number associated with a block is called a <i>height</i>.</td> |
|||
<td><code class="uk-text-small">1001</code></td> |
|||
</tr> |
|||
<tr> |
|||
<td>transaction</td> |
|||
<td>A transaction is a unit of work within a block. To use the diary entry analogy, an entry for Sunday may include a run to the lake, lunch at Spago, and auditioning for a movie. Lunch at Spago is a "transaction" in this analogy. Each transaction, like a block, has a unique value associated with it called a <i>hash</i>. You can use this hash in the explorer to look up the transaction. And, you can be confident that no other transaction has that particular hash, it is unique.</td> |
|||
<td><code>000000007136b5c...</code> |
|||
This hash is a partial hash, an actual hash value is very long.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>address</td> |
|||
<td>An address is an identifier used during a transaction. It is a unique number that represents the origination or destination of a transaction. Addresses encrypt a participant in a transaction so that the person or entity that took part in the transaction remains private.</td> |
|||
<td><code>3AKx3kBhTFC58Ws</code> This address is a partial address, an actual address value is very long.</td> |
|||
</tr> |
|||
</table> |
|||
|
|||
People such as token holders or application users typically don't need to use an explorer. However, there are a few interesting things to do if you are a token holder, a user, or both. |
|||
|
|||
## Investigate the Explorer |
|||
|
|||
An easy thing to explore is an identity. If you have an identity through the |
|||
Blockstack Browser, you can explore that identity. Identities that you create |
|||
through the browser are free if you create them in the Blockstack namespace. If you don't have an identity, you [can create one]({{ site.baseurl }}/browser/ids-introduction.html). |
|||
|
|||
What is a namespace? Well, think of it a bit like an email address, you can get |
|||
an email address on your own suffix `yourname@myuniquename.com`, or you can get |
|||
email with a service type suffix such as `yahoo` or `msn` or `gmail`. |
|||
Blockstack identity behaves like this service type suffix. So, there is only one |
|||
`moxiegirl.id.blockstack` but someone else can be `moxiegirl2.id.blockstack`. You |
|||
can see this in action yourself with the explorer, by doing the following: |
|||
|
|||
1. Open the [explorer](https://explorer.blockstack.org/). |
|||
|
|||
2. Select the **Names** tag. |
|||
|
|||
 |
|||
|
|||
The **Names** page lists all the names (users or organizations) that are registered on the Stacks blockchain. There are over 77 thousand names on this list! So, you likely do not want to scroll down the page looking for yours. You can search for a known name, try searching for the `moxiegirl.id.blockstack` name. |
|||
|
|||
3. Place your cursor in the search bar in the right hand corner and type `moxiegirl.id.blockstack` and then press return. |
|||
|
|||
The explorer looks for the name and then loads the information for it. You should see this result: |
|||
|
|||
 |
|||
|
|||
At the left is some friendly looking information from the person whose |
|||
identity this is --- a photo maybe, personal name, and social community |
|||
verifications. This is the public information the person opted to share. |
|||
Identifying information is a step for establishing trust that a person is who |
|||
they say they are. This particular ID has an unverified account with the |
|||
social-coding network GitHub. So, perhaps they are shady. |
|||
|
|||
**View Raw Profile Data** allows you to see the information a Blockstack core |
|||
leverages, such as the identity and "map" it to stored data and other things. |
|||
On the right, you see a list of all the blocks |
|||
associated with this identity. |
|||
|
|||
4. Click on the block link to expand its information. |
|||
|
|||
This information is not as friendly for non-technical people. |
|||
|
|||
 |
|||
|
|||
You can click on transactions to go further down into this technical information. |
|||
|
|||
|
|||
Try searching for your own identity. If necessary, you can first [create your own identity]({{ site.baseurl }}/browser/ids-introduction.html). The identity `moxiegirl` looks a bit shady now but you may comeback and find the she has verified her identity. Try looking at the identity of our Blockstack founder, `muneeb.id`. You can see, he is a trusted and well known person. How does your identity compare? |
|||
|
|||
## For Stacks token holders |
|||
|
|||
In the section [For current token holders](tokenholders.html) current token holders can find out how to |
|||
use the explorer to search for details about your Stacks token allocation. |
|||
@ -0,0 +1,62 @@ |
|||
--- |
|||
layout: org |
|||
permalink: /:collection/:path.html |
|||
--- |
|||
# Frequently asked questions |
|||
|
|||
* TOC |
|||
{:toc} |
|||
|
|||
|
|||
### What is a seed phrase? |
|||
|
|||
When you create a wallet address, you also create a seed phrase. With one significant |
|||
exception, a seed phrase is similar to a banking pin in that it gives you access |
|||
to your wallet and your token allocation. Unlike a pin, if you lose |
|||
your seed phrase **you can never access your wallet or your token allocation |
|||
ever again**. |
|||
|
|||
{% include warning.html content="Losing a seed phrase is final and destructive. Blockstack does not keep a copy of your seed. Blockstack cannot give you a new seed, get your access to your wallet, or return your tokens if you lose your seed phrase." %} |
|||
|
|||
Keep your seed phrase secret. Just as with a banking pin, anyone that knows or |
|||
steals your seed phrase can access your allocation. |
|||
|
|||
You should write your seed phrase down and store the paper you write on in at |
|||
least two secure locations. A safe or lock box is a good location. You can also |
|||
store it online in an encrypted password manager such as 1Password. You should |
|||
_never_ simply store a seed phrase in Apple Cloud or Dropbox. |
|||
|
|||
### How do I keep my tokens secure? |
|||
|
|||
The safety of your Stacks Tokens is extremely important to us. To help ensure |
|||
that you complete the process of receiving your tokens correctly and securely, |
|||
please read the following guidelines: |
|||
|
|||
* **Website Safety**: When inputting data on a website or verifying the presence of data on a website it is essential that you confirm that the URL is correct and that your browser is using HTTPS. |
|||
|
|||
* **Email Safety**: Blockstack will never ask for your personal identifying information over e-mail, or call you directly. When we ask verifying questions, we will only do so when you call us to confirm your identity. We will never ask you for money or your Seed Phrase (private key). |
|||
|
|||
If you have large token holdings, make sure you take advantage of custodial |
|||
services. A wallet does not provide the security of a custodial service. |
|||
|
|||
### When will the new Stacks wallet be available? |
|||
|
|||
An initial version of the Stacks wallet was released for the token sale. With the |
|||
launch of the Stacks genesis block, that software wallet was retired. An updated version of the |
|||
Stacks wallet is expected to be released in November 2018. |
|||
|
|||
### What is a public Stacks wallet address? |
|||
|
|||
During the initial grant process, investors submitted a _public |
|||
Stacks wallet address_ to Blockstack. This is a string of letters and numbers |
|||
starting with an 'SP' or SM', for example |
|||
`SP017AUV5YRM7HT3TSQXJF7FCCYXETAB276BQ6XY` is a wallet address. |
|||
|
|||
If you purchased Stacks tokens through CoinList, you can find your address at |
|||
[CoinList](https://coinlist.co/distributions). If you submitted your Stacks address directly to Blockstack, you can either use the “Restore from Seed Phrase” feature on the Stacks wallet or contact us at <hello@stackstoken.com> for help. |
|||
|
|||
|
|||
|
|||
### How do I get help from a person? |
|||
|
|||
For questions or help regarding the Stacks token, you can contact us at <hello@stackstoken.com>. |
|||
|
After Width: | Height: | Size: 60 KiB |
|
After Width: | Height: | Size: 108 KiB |
|
After Width: | Height: | Size: 90 KiB |
|
After Width: | Height: | Size: 8.8 KiB |
|
After Width: | Height: | Size: 127 KiB |
|
After Width: | Height: | Size: 113 KiB |
|
After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 95 KiB |
|
After Width: | Height: | Size: 118 KiB |
|
After Width: | Height: | Size: 279 KiB |
|
After Width: | Height: | Size: 142 KiB |
|
After Width: | Height: | Size: 214 KiB |
@ -0,0 +1,71 @@ |
|||
--- |
|||
layout: org |
|||
permalink: /:collection/:path.html |
|||
--- |
|||
# Setup Stacks wallet |
|||
|
|||
You use the Stacks Wallet software to generate a unique address for storing your |
|||
Stacks tokens. This section teaches you how to install and verify your Stacks |
|||
token wallet and contains the following sections: |
|||
|
|||
Use this procedure if you are a Blockstack investor in the Blockstack Genesis |
|||
block. |
|||
|
|||
During you wallet download, you are at risk of a man-in-the-middle attack (as an |
|||
example) from hackers interested in stealing your tokens or your other |
|||
information. To protect yourself from this type of attack, you should verify |
|||
your downloaded wallet software before you install it. Verification confirms |
|||
that you received the software signed by Blockstack PBC. |
|||
|
|||
## Do not lose your Stacks tokens |
|||
|
|||
When you create a wallet you receive a _seed phrase_. With one very important |
|||
exception, a seed phrase is similar to a banking pin in that it gives you |
|||
access to your wallet and the tokens it contains. The exception is, that if you |
|||
lose your seed phrase you can never access your wallet or the tokens it contains |
|||
ever again. |
|||
|
|||
{% include warning.html content="Losing a seed phrase is final and destructive. |
|||
Blockstack does not keep a copy of your seed. Blockstack cannot give you a new |
|||
seed, get your access to your wallet, or return your tokens if you lose your |
|||
seed phrase." %} |
|||
|
|||
Keep your seed phrase secret. Just as with a banking pin, anyone that knows or |
|||
steals your seed phrase can access your tokens. |
|||
|
|||
For this reason, you should keep your seed phrase safe. You should write your |
|||
seed phrase down and store it in at least two locations. A safe or lock box is a |
|||
good location. You can also store it online in a password manager. |
|||
|
|||
## Before you start |
|||
|
|||
You link your wallet with a Coinleist account. Before you begin, make sure that |
|||
you have [an account with CoinList](https://coinlist.co/register). You must |
|||
create this account yourself. |
|||
|
|||
## Mac OSX: Download, verify, and install on Mac OSX |
|||
|
|||
You use the command line terminal to confirm your download in Mac OSX. Perform this procedure after you dowanlod |
|||
|
|||
|
|||
1. Log into your Coinlist Account |
|||
|
|||
2. [Download the stacks ](https://blockstack.org/wallet/macos-stacks-wallet.dmg) |
|||
|
|||
3. From your Mac desktop, click on the magnifying glass in the top, right corner of your screen. |
|||
|
|||
 |
|||
|
|||
The Spotlight search bar appears. |
|||
|
|||
2. Enter terminal in the search field. |
|||
|
|||
 |
|||
|
|||
3. Select the **Terminal.app** to launch it. |
|||
|
|||
4. tbd. |
|||
|
|||
## Windows: Download, verify, and install |
|||
|
|||
TBD |
|||
@ -0,0 +1,87 @@ |
|||
--- |
|||
layout: org |
|||
permalink: /:collection/:path.html |
|||
--- |
|||
# What is the Blockstack Ecosystem |
|||
|
|||
The Blockstack Ecosystem has a mission to bring a new internet where users |
|||
control the access to, and use of, their own identity and data. With this |
|||
mission in mind, three independent entities were formed: |
|||
|
|||
* TOC |
|||
{:toc} |
|||
|
|||
These three affiliated entities drive the advancement of the Blockstack mission. |
|||
In this section, you learn about the mechanisms each entity uses to advance the |
|||
overall mission. |
|||
|
|||
|
|||
## Blockstack Public Benefit Corp (PBC) |
|||
|
|||
Blockstack Public Benefit Corp. (PBC) started development of the Blockstack |
|||
platform in 2014 and launched an alpha of the platform in early 2017. The |
|||
platform’s development philosophy followed two simple principles. First, create |
|||
backend facilities that allow blockchain applications to be both performant and |
|||
scalable. Second, provide simple, familiar development interfaces to blockchain |
|||
technology. The result of this effort is a technology platform that allows |
|||
developers to: |
|||
|
|||
- Build a blockchain application in any Javascript framework. The platform does not require learning a new programming language or extending an existing application stack. |
|||
|
|||
- Use well-defined REST endpoints that simplify and encapsulate the blockchain backend. The Blockstack Javascript API reduces blockchain-backed applications to familiar `GET` and `PUT` operations. |
|||
|
|||
- Access the Blockstack’s Naming System (BNS). The system has over 70K users that can immediately start using your application. |
|||
|
|||
- Scale quickly to large, performant production systems. Blockstack’s GAIA storage system gives fast, scalable performance on a level comparable to Amazon S3, Google Drive, or Azure. |
|||
|
|||
Using Blockstack’s technology developers can start building immediately on the |
|||
blockchain with the knowledge you have today. You won’t need to spend time or |
|||
effort developing expertise in specialized languages or technologies. |
|||
|
|||
## Blockstack Signature Fund |
|||
|
|||
On 2017 Blockstack announced the Blockstack Signature Fund. The Signature Fund |
|||
is aimed at growing an ecosystem of decentralized applications on Blockstack. |
|||
The fund releases funds through a Signature Bounty program. This is a global |
|||
bounty program using a contest model. Teams from all over the world submit |
|||
products and a set of judges determine who wins the prize for the best product. |
|||
|
|||
In addition to the bounty program, Blockstack supports an application mining |
|||
program. This is an early stage program for developers. In this program, |
|||
application developers register their application on App.co. Then, each month, |
|||
application developers get paid each month depending on their application |
|||
quality ranking. The ranking is determined by a set of application reviewers. |
|||
|
|||
Application mining differs from the venture model or the app studio model |
|||
because the rewards are in cryptocurrency. Blockstack PBC administrates both the |
|||
review and delivery of these monthly payments. |
|||
|
|||
## Blockstack Token LLC |
|||
|
|||
Through the 2017 Blockstack token offering, Blockstack Token LLC created the |
|||
Stacks token. This year's hard fork is an especially exciting milestone for the ecosystem because it distributes the first Stacks tokens to existing purchasers and recipients. This hard fork launches the Stacks blockchain v1, and enables the following two features for the Blockstack network: |
|||
|
|||
* Registration of all digital assets and smart contracts for registering digital assets with the Stacks token. |
|||
|
|||
* A genesis block that distributes Stacks tokens to existing purchasers. |
|||
|
|||
A full technical description of the upgrade is available on <a href="https://forum.blockstack.org/t/blockstack-annual-hard-fork-2018/6518" target="\blank" >the Blockstack forum</a>. |
|||
|
|||
In future upgrades and hard forks, the blockchain will expand to introduce a new |
|||
scalable consensus algorithm to increase the number of transactions it can |
|||
process. This consensus algorithm is planned to be introduced in additional |
|||
hard forks in 2019. |
|||
|
|||
Addtionally, a future Stacks blockchain will support truly decentralized mobile |
|||
applications by removing the need to trust a remote Blockstack Core node. |
|||
Instead, it will be possible for light clients to calculate the economic weight |
|||
of different Stacks blockchain forks, and identify the fork with the most |
|||
economic activity. Today, light clients rely on other trusted sources for fork |
|||
selection and cannot make that decision independently. For mobile apps this |
|||
enables functionality like looking up names without having to rely on a remote |
|||
Blockstack Core node. |
|||
|
|||
Finally, Blockstack currently supports relatively simple smart contracts that |
|||
are used to register digital assets on the network. The Stacks blockchain v2 |
|||
will support general-purpose smart contracts written in a non-Turing-complete |
|||
language currently under development. |
|||
@ -0,0 +1,14 @@ |
|||
--- |
|||
layout: org |
|||
permalink: /:collection/:path.html |
|||
--- |
|||
# Glossary |
|||
|
|||
<table class="uk-table uk-table-large uk-table-striped"> |
|||
{% for member in site.data.glossary %} |
|||
<tr> |
|||
<th>{{ member.Term }}</th> |
|||
<td>{{ member.Definition }}</td> |
|||
</tr> |
|||
{% endfor %} |
|||
</table> |
|||
@ -1,10 +1,53 @@ |
|||
In XXX 2018 Blockstack introduced the stacks&tm; token. The token is specific to the Blockstack ecosystem. It ensures prices of names and namespaces will no longer fluctuate with Bitcoin. |
|||
--- |
|||
layout: org |
|||
permalink: /:collection/:path.html |
|||
--- |
|||
# Learn more about the Stacks token |
|||
|
|||
The Stacks token will follow Blockstack Core if it needs to be migrated to a new blockchain, so any tokens you hold now will be useable as long as Blockstack Core exists. |
|||
Stacks is the name of a token developed by Blockstack Token LLC in 2017 and |
|||
activated in the third quarter of 2018. This page discusses a brief history of |
|||
the Stacks token and deployment on the Blockstack network as well as the current |
|||
role of the Stacks token. |
|||
|
|||
The Stacks token will make it possible for light clients to calculate the economic weight of different Blockstack Core chain forks, and identify the fork with the most economic activity. Today, light clients have to be told a |
|||
priori which fork to use. |
|||
If you are a developer interested in the specific technical changes related to |
|||
the 2018 launch, see the <a href="https://forum.blockstack.org/t/blockstack-annual-hard-fork-2018/6518" target="\blank" >announcment in the Blockstack forum</a>. |
|||
|
|||
The Stacks token will make it possible to implement proof-of-burn mining, a new type of blockchain mining algorithm where instead of burning electricity to produce blocks, miners burn an existing cryptocurrency. PoB mining is useful because it moves Blockstack transactions off of Bitcoin while keeping the security properties Bitcoin offers, and it enables decentralized app-specific chains to be built on top of Blockstack. |
|||
## A brief history of the Stacks token |
|||
|
|||
The Stacks token will make it possible to implement full-fledged smart contracts. Right now, Blockstack Core supports a very simple kind of smart contract (namespaces), but in the future it will support any smart contract written in a non-Turing-complete Lisp dialect we’re developing. The language will be expressive enough to implement things like name/namespace auctions and name trading on-chain. Before this can go live, however, there needs to be a way to incentivize miners to process a smart contract’s execution. The Stacks token enables this.t |
|||
In 2017 Blockstack did a token sale. Participants became token holders when they |
|||
received allocations of Stacks tokens in the genesis block. A genesis block is |
|||
the first block of a blockchain. |
|||
|
|||
During the draft genesis block period token holders setup a seed phrase |
|||
(sometimes referred to as a _recovery phrase_ or a _recovery seed_ using the |
|||
Stacks wallet software or their own hardware wallet. |
|||
|
|||
It was each token holder’s responsibility to store their own seed phrase in a |
|||
private and secure location. Holders could use their wallet to verify their |
|||
holdings and allocations on the genesis block explorer. Beyond that, while in |
|||
draft state, token holders were in a lock down period. |
|||
|
|||
## State of the Stacks blockchain V1 |
|||
|
|||
The initial block in the Stacks blockchain V1 allocates 1.32 billion |
|||
tokens. The launch is the culmination of two year’s hard work across the greater |
|||
Blockstack community. With the launch, Stacks tokens unlock for accredited token |
|||
holders under a predetermined unlocking schedule. The events on the unlocking |
|||
schedule are the same for each investor, **the dates of these events** depend on the |
|||
holder's purchase date. |
|||
|
|||
<div class="uk-alert-success" uk-alert><b>Note:</b> If you are a token holder |
|||
and would like to review your unlocking schedule, visit the <a |
|||
href="tokenholders.html">For current token holders</a> page in this |
|||
documentation.</div> |
|||
|
|||
The genesis block launch makes possible the following interactions: |
|||
|
|||
* Token holders can purchase names and namespaces with the Stacks token. Previously, names and namespaces required the purchaser to hold Bitcoin. Initially, this process relies on the Blockstack command-line interface (CLI). |
|||
|
|||
* Application developers can earn Stacks by building an application on the Blockstack ecosystem. |
|||
|
|||
* Any Stacks tokens held at the time of launch or after remain usable under the Blockstack Core platform. |
|||
|
|||
Finally, in addition to the development of Stacks token, this launch enables |
|||
further development of Blockstack Core itself. |
|||
|
|||
@ -0,0 +1,67 @@ |
|||
--- |
|||
layout: org |
|||
permalink: /:collection/:path.html |
|||
--- |
|||
# Information for current token holders |
|||
|
|||
The information on this page is intended for current Stacks token holders who took part in |
|||
Blockstack's token sale in 2017. |
|||
|
|||
* TOC |
|||
{:toc} |
|||
|
|||
## Find your token balance and unlock date |
|||
|
|||
During your the initial grant process, you should have submitted a _public |
|||
Stacks wallet address_ to Blockstack. The wallet address is a string of letters and numbers |
|||
starting with an 'SP' or SM', for example: `SP017AUV5YRM7HT3TSQXJF7FCCYXETAB276BQ6XY` |
|||
|
|||
If you purchased Stacks tokens through CoinList, you can find your address at |
|||
[CoinList](https://coinlist.co/distributions). If you submitted your Stacks |
|||
address directly to Blockstack, you can either use the “Restore from Seed |
|||
Phrase” feature on the Stacks wallet or contact us at <hello@stackstoken.com> for |
|||
help. |
|||
|
|||
|
|||
Use the following form to check your Stacks allocation: |
|||
<div class="uk-background-secondary uk-padding uk-panel"> |
|||
<script> |
|||
function process() |
|||
{ |
|||
var url="https://explorer.blockstack.org/stacks/addresses/" + document.getElementById("url").value; |
|||
location.href=url; |
|||
return false; |
|||
} |
|||
</script> |
|||
|
|||
<form class="uk-form-horizontal" onSubmit="return process();" autocomplete="off"> |
|||
<div> |
|||
<input style="background: #fff !important;" class="uk-input" type="text" name="url" id="url" placeholder="Enter public Stacks wallet address"> |
|||
<input class="uk-button uk-button-default uk-form-width-medium uk-align-center" type="submit" value="Get allocation"> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
|
|||
You should see a report detailing the tokens allocated to your address and when they unlock: |
|||
|
|||
 |
|||
|
|||
If you have questions or concerns about your report, please contact <hello@StacksToken.com>. |
|||
|
|||
|
|||
## Understanding the timeline for unlocking your tokens |
|||
|
|||
In October 2018, the Stacks blockchain launched under the Stacks token. With the |
|||
launch, Stacks tokens unlock for accredited token holders under a predetermined |
|||
unlocking schedule. The events on the unlocking schedule are the same for each |
|||
token holder, the dates of these events depend on the holders’s purchase date. |
|||
|
|||
The general timeline for unlocking tokens and the capabilities that are |
|||
potentially possible, are as follows: |
|||
|
|||
|
|||
 |
|||
|
|||
Your specific unlock date depends on when you purchased or were granted tokens. |
|||
You can use the Blockstack Explorer to discover how many tokens you have |
|||
registered and when they will unlock. |
|||
@ -0,0 +1,51 @@ |
|||
--- |
|||
layout: org |
|||
permalink: /:collection/:path.html |
|||
--- |
|||
# Setup Hardware wallet |
|||
|
|||
How you setup a hardware wallet depends on the hardware you use. |
|||
|
|||
* TOC |
|||
{:toc} |
|||
|
|||
|
|||
## Suggested wallet vendors |
|||
|
|||
Suspendisse cursus venenatis ligula a porta. Vestibulum |
|||
ultricies elit eget leo dapibus, nec pulvinar risus porttitor. Integer vitae |
|||
lectus at tellus consectetur sollicitudin. Ut cursus finibus feugiat. Sed purus |
|||
ipsum, viverra congue velit vel, finibus vestibulum orci. Aliquam vitae vehicula |
|||
nisl. Phasellus semper aliquet imperdiet. Vivamus feugiat leo quis metus |
|||
facilisis congue. Nullam vel lectus sit amet enim aliquet sagittis vitae euismod |
|||
risus. |
|||
|
|||
## Do not lose your Stacks tokens |
|||
|
|||
When you create a wallet you receive a _seed phrase_. With one very important |
|||
exception, a seed phrase is similar to a banking pin in that it gives you |
|||
access to your wallet and the tokens it contains. The exception is, that if you |
|||
lose your seed phrase you can never access your wallet or the tokens it contains |
|||
ever again. |
|||
|
|||
{% include warning.html content="Losing a seed phrase is final and destructive. |
|||
Blockstack does not keep a copy of your seed. Blockstack cannot give you a new |
|||
seed, get your access to your wallet, or return your tokens if you lose your |
|||
seed phrase." %} |
|||
|
|||
Keep your seed phrase secret. Just as with a banking pin, anyone that knows or |
|||
steals your seed phrase can access your tokens. |
|||
|
|||
For this reason, you should keep your seed phrase safe. You should write your |
|||
seed phrase down and store it in at least two locations. A safe or lock box is a |
|||
good location. You can also store it online in a password manager. |
|||
|
|||
## If you already have a Stacks wallet |
|||
|
|||
Suspendisse cursus venenatis ligula a porta. Vestibulum |
|||
ultricies elit eget leo dapibus, nec pulvinar risus porttitor. Integer vitae |
|||
lectus at tellus consectetur sollicitudin. Ut cursus finibus feugiat. Sed purus |
|||
ipsum, viverra congue velit vel, finibus vestibulum orci. Aliquam vitae vehicula |
|||
nisl. Phasellus semper aliquet imperdiet. Vivamus feugiat leo quis metus |
|||
facilisis congue. Nullam vel lectus sit amet enim aliquet sagittis vitae euismod |
|||
risus. |
|||
@ -0,0 +1,86 @@ |
|||
--- |
|||
layout: org |
|||
permalink: /:collection/:path.html |
|||
--- |
|||
# Understand cryptocurrency wallets |
|||
|
|||
If you are, or plan to be a Stacks token holder, you need to think about how you |
|||
can manage your tokens. How can you review your token balance or send and |
|||
receive your tokens? You manage your tokens through a **cryptocurrency wallet**. |
|||
|
|||
Unlike the wallets you carry physical money in, a cryptocurrency wallet doesn’t |
|||
hold your tokens. Your tokens are recorded by transactions which are themselves |
|||
encrypted on the Stacks blockchain. The cryptocurrency wallet holds software |
|||
keys. You use these keys and some software to interact with the blockchain and |
|||
gain use of your tokens. |
|||
|
|||
|
|||
## Token flow and wallets |
|||
|
|||
Tokens move from one wallet to a another via the blockchain. For example, say |
|||
Lena decides to buy a book from Bitbooks, a company that accepts tokens. A |
|||
complete purchase, has the following general steps: |
|||
|
|||
 |
|||
|
|||
|
|||
## Large-scale or institutional token holders |
|||
|
|||
Just as you don’t keep all the money you have in your bank in a physical wallet, |
|||
you shouldn’t keep large amounts of tokens in your cryptocurrency wallet. |
|||
Instead, if you have a large number of crypto assets, you should store them with |
|||
a custodial service. Custodial services protect your token holdings using |
|||
high-security systems. |
|||
|
|||
Custodial services have different techniques for storing crypto assets. |
|||
The techniques vary according to factors such as the liquidity level you want to |
|||
maintain or the security you would like. If you own large numbers of token |
|||
assets as an investment, you should choose a custodial service as if you were |
|||
selecting any investment service. Consider your needs, the firm’s reputation, |
|||
fees, and so forth. |
|||
|
|||
{% include warning.html content="None of our ecosystem entities, Blockstack PBC, |
|||
Blockstack Signature Fund, and Blockstack Token LLC, are custodial services. |
|||
Neither the pre-genesis software wallet or the upcoming wallet are recommended for |
|||
institutional holdings." %} |
|||
|
|||
Blockstack suggests a firm such as [Coinbase |
|||
Custody](https://custody.coinbase.com/) for institutional holders. Coinbase |
|||
Custody charges its clients a management fee based on assets. Of course, like |
|||
any responsible asset holder, you should do your own research and select a |
|||
service that meets your needs. The Investopedia's article [What Are Cryptocurrency |
|||
Custody |
|||
Solutions?](https://www.investopedia.com/news/what-are-cryptocurrency-custody-solutions/) |
|||
is one place to start. |
|||
|
|||
|
|||
## Choosing a cryptocurrency wallet |
|||
|
|||
You can choose among different types of cryptocurrency wallets. There are mainly |
|||
two types of wallets, software and hardware. |
|||
|
|||
Software wallets run as programs on a computer desktop/tablet, online (web), or |
|||
mobile phone. Desktop software wallets are downloaded to one computer. Because |
|||
they are on one system, they are vulnerable to theft either of the computer |
|||
itself or through computer hacking. Computer viruses can also impact desktop |
|||
wallets. |
|||
|
|||
Similarly, mobile wallets are, but they also tend to be smaller and simpler. |
|||
Online wallets run over the web and are accessible from any networked device, |
|||
computer or phone. However, online wallets are vulnerable to hacking as well and |
|||
also rely on third-party service providers who themselves may also be |
|||
vulnerable. |
|||
|
|||
Hardware wallets store your seed and addresses on a device like a USB. To use |
|||
these wallets, you connect them to a networked computer, enter a pin, and |
|||
communicate to send and receive tokens across the web. |
|||
|
|||
Unlike a pure software wallet, hardware wallets can be disconnected and placed |
|||
offline in a secure physical location like a bank deposit box. For this reason, |
|||
hardware offers another level of security that software wallets don’t have. |
|||
Blockstack suggests that you use a hardware wallet such as |
|||
[Trezor](https://trezor.io/) or [Ledger](https://www.ledger.com/). |
|||
|
|||
Of course, you need not use a software or hardware wallet exclusively, you can |
|||
use multiple wallets choosing whichever works best for you at a specific time. |
|||
You'll just need to transform tokens to whichever wallet you want to move. |
|||
@ -0,0 +1,41 @@ |
|||
--- |
|||
layout: org |
|||
permalink: /:collection/:path.html |
|||
--- |
|||
# Use the Stacks wallet |
|||
|
|||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus |
|||
cursus purus, fermentum consequat nisl consequat vel. |
|||
|
|||
* TOC |
|||
{:toc} |
|||
|
|||
|
|||
In non posuere velit. |
|||
Pellentesque rutrum molestie arcu ac rhoncus. Ut id pretium ligula. Mauris vel |
|||
quam ac nisl fringilla tincidunt. |
|||
|
|||
## View your stacks |
|||
|
|||
Suspendisse cursus venenatis ligula a porta. Vestibulum |
|||
ultricies elit eget leo dapibus, nec pulvinar risus porttitor. Integer vitae |
|||
lectus at tellus consectetur sollicitudin. Ut cursus finibus feugiat. Sed purus |
|||
ipsum, viverra congue velit vel, finibus vestibulum orci. Aliquam vitae vehicula |
|||
nisl. Phasellus semper aliquet imperdiet. Vivamus feugiat leo quis metus |
|||
facilisis congue. Nullam vel lectus sit amet enim aliquet sagittis vitae euismod |
|||
risus. |
|||
|
|||
## Receive stacks |
|||
|
|||
Suspendisse ipsum turpis, malesuada sit amet varius eget, auctor vitae lectus. |
|||
Maecenas sit amet tellus metus. Sed in condimentum mi. Nulla ac tincidunt leo. |
|||
Suspendisse lectus elit, facilisis non mollis eu, rhoncus vel augue. Ut tempus |
|||
vel felis sit amet viverra. Aenean eu congue orci. Morbi massa mauris, |
|||
|
|||
|
|||
## Send stacks |
|||
|
|||
ullamcorper ac odio nec, mattis auctor turpis. Sed rhoncus viverra elit. In hac |
|||
habitasse platea dictumst. Vivamus eget mauris nec odio fringilla facilisis. |
|||
Cras id ligula at eros cursus varius. Quisque semper nulla ut lobortis |
|||
consequat. Aliquam hendrerit a neque id tempor. Sed porta id ligula in iaculis. |
|||
@ -0,0 +1,6 @@ |
|||
--- |
|||
title: Blockstack Token Sale Mechanics |
|||
layout: externalurl |
|||
permalink: /:collection/:path.html |
|||
redirect: https://blockstack.com/tokenpaper.pdf |
|||
--- |
|||
@ -0,0 +1,6 @@ |
|||
--- |
|||
title: Blockstack Token Whitepaper |
|||
layout: externalurl |
|||
permalink: /:collection/:path.html |
|||
redirect: https://blockstack.com/distribution.pdf |
|||
--- |
|||
@ -0,0 +1,289 @@ |
|||
/** |
|||
* Syntax highlighting styles |
|||
*/ |
|||
|
|||
|
|||
|
|||
.highlight, .highlighter-rouge { |
|||
background-color: #F7F8FA; |
|||
color: #5A6575; |
|||
border: none; |
|||
} |
|||
|
|||
.highlight .lineno { |
|||
color: #B1B8C4 |
|||
} |
|||
|
|||
.highlight .c { |
|||
color: #B1B8C4 |
|||
} |
|||
|
|||
.highlight .err { |
|||
color: #5A6575 |
|||
} |
|||
|
|||
.highlight .g { |
|||
color: #5A6575 |
|||
} |
|||
|
|||
.highlight .k { |
|||
color: #25BEA1 |
|||
} |
|||
|
|||
.highlight .l { |
|||
color: #5A6575 |
|||
} |
|||
|
|||
.highlight .n { |
|||
color: #5A6575 |
|||
} |
|||
|
|||
.highlight .o { |
|||
color: #25BEA1 |
|||
} |
|||
|
|||
.highlight .x { |
|||
color: #FBBC09 |
|||
} |
|||
|
|||
.highlight .p { |
|||
color: #25BEA1 |
|||
} |
|||
|
|||
.highlight .cm { |
|||
color: #B1B8C4 |
|||
} |
|||
|
|||
.highlight .cp { |
|||
color: #25BEA1 |
|||
} |
|||
|
|||
.highlight .c1 { |
|||
color: #B1B8C4 |
|||
} |
|||
|
|||
.highlight .cs { |
|||
color: #25BEA1 |
|||
} |
|||
|
|||
.highlight .gd { |
|||
color: #E56134 |
|||
} |
|||
|
|||
.highlight .ge { |
|||
color: #5A6575; |
|||
font-style: italic |
|||
} |
|||
|
|||
.highlight .gr { |
|||
color: #9961C9 |
|||
} |
|||
|
|||
.highlight .gh { |
|||
color: #FBBC09 |
|||
} |
|||
|
|||
.highlight .gi { |
|||
color: #25BEA1 |
|||
} |
|||
|
|||
.highlight .go { |
|||
color: #5A6575 |
|||
} |
|||
|
|||
.highlight .gp { |
|||
color: #FBBC09 |
|||
} |
|||
|
|||
.highlight .gs { |
|||
color: #5A6575; |
|||
font-weight: bold |
|||
} |
|||
|
|||
.highlight .gu { |
|||
color: #FBBC09 |
|||
} |
|||
|
|||
.highlight .gt { |
|||
color: #5A6575 |
|||
} |
|||
|
|||
.highlight .kc { |
|||
color: #FBBC09 |
|||
} |
|||
|
|||
.highlight .kd { |
|||
color: #11A0F3 |
|||
} |
|||
|
|||
.highlight .kn { |
|||
color: #25BEA1 |
|||
} |
|||
|
|||
.highlight .kp { |
|||
color: #25BEA1 |
|||
} |
|||
|
|||
.highlight .kr { |
|||
color: #11A0F3 |
|||
} |
|||
|
|||
.highlight .kt { |
|||
color: #9961C9 |
|||
} |
|||
|
|||
.highlight .ld { |
|||
color: #5A6575 |
|||
} |
|||
|
|||
.highlight .m { |
|||
color: #E56134 |
|||
} |
|||
|
|||
.highlight .s { |
|||
color: #E56134 |
|||
} |
|||
|
|||
.highlight .na { |
|||
color: #5A6575 |
|||
} |
|||
|
|||
.highlight .nb { |
|||
color: #5A6575 |
|||
} |
|||
|
|||
.highlight .nc { |
|||
color: #11A0F3 |
|||
} |
|||
|
|||
.highlight .no { |
|||
color: #5A6575 |
|||
} |
|||
|
|||
.highlight .nd { |
|||
color: #11A0F3 |
|||
} |
|||
|
|||
.highlight .ni { |
|||
color: #FBBC09 |
|||
} |
|||
|
|||
.highlight .ne { |
|||
color: #FBBC09 |
|||
} |
|||
|
|||
.highlight .nf { |
|||
color: #11A0F3 |
|||
} |
|||
|
|||
.highlight .nl { |
|||
color: #5A6575 |
|||
} |
|||
|
|||
.highlight .nn { |
|||
color: #5A6575 |
|||
} |
|||
|
|||
.highlight .nx { |
|||
color: #5A6575 |
|||
} |
|||
|
|||
.highlight .py { |
|||
color: #5A6575 |
|||
} |
|||
|
|||
.highlight .nt { |
|||
color: #11A0F3 |
|||
} |
|||
|
|||
.highlight .nv { |
|||
color: #5A6575 |
|||
} |
|||
|
|||
.highlight .ow { |
|||
color: #25BEA1 |
|||
} |
|||
|
|||
.highlight .w { |
|||
color: #5A6575 |
|||
} |
|||
|
|||
.highlight .mf { |
|||
color: #E56134 |
|||
} |
|||
|
|||
.highlight .mh { |
|||
color: #E56134 |
|||
} |
|||
|
|||
.highlight .mi { |
|||
color: #E56134 |
|||
} |
|||
|
|||
.highlight .mo { |
|||
color: #E56134 |
|||
} |
|||
|
|||
.highlight .sb { |
|||
color: #B1B8C4 |
|||
} |
|||
|
|||
.highlight .sc { |
|||
color: #E56134 |
|||
} |
|||
|
|||
.highlight .sd { |
|||
color: #5A6575 |
|||
} |
|||
|
|||
.highlight .s2 { |
|||
color: #E56134 |
|||
} |
|||
|
|||
.highlight .se { |
|||
color: #FBBC09 |
|||
} |
|||
|
|||
.highlight .sh { |
|||
color: #5A6575 |
|||
} |
|||
|
|||
.highlight .si { |
|||
color: #E56134 |
|||
} |
|||
|
|||
.highlight .sx { |
|||
color: #E56134 |
|||
} |
|||
|
|||
.highlight .sr { |
|||
color: #9961C9 |
|||
} |
|||
|
|||
.highlight .s1 { |
|||
color: #E56134 |
|||
} |
|||
|
|||
.highlight .ss { |
|||
color: #E56134 |
|||
} |
|||
|
|||
.highlight .bp { |
|||
color: #11A0F3 |
|||
} |
|||
|
|||
.highlight .vc { |
|||
color: #11A0F3 |
|||
} |
|||
|
|||
.highlight .vg { |
|||
color: #11A0F3 |
|||
} |
|||
|
|||
.highlight .vi { |
|||
color: #11A0F3 |
|||
} |
|||
|
|||
.highlight .il { |
|||
color: #E56134 |
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
## 2.0.0 (2017-06-28) |
|||
|
|||
- Changed from `system` to `system-ui` to match the CSS specification. |
|||
|
|||
## 1.1.0 (2015-08-02) |
|||
|
|||
- Added: Android fonts Roboto and Droid Sans after Ubuntu. |
|||
- Removed: Windows 3.1-ME font Microsoft Sans Serif. |
|||
- Updated: documentation. |
|||
|
|||
## 1.0.0 (2015-07-30) |
|||
|
|||
- Added: Initial version |
|||
@ -0,0 +1,15 @@ |
|||
# CC0 1.0 Universal License |
|||
|
|||
Public Domain Dedication |
|||
|
|||
The person(s) who associated a work with this deed has dedicated the work to the public domain by waiving all of his or her rights to the work worldwide under copyright law, including all related and neighboring rights, to the extent allowed by law. |
|||
|
|||
You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission. |
|||
|
|||
In no way are the patent or trademark rights of any person affected by CC0, nor are the rights that other persons may have in the work or in how the work is used, such as publicity or privacy rights. |
|||
|
|||
Unless expressly stated otherwise, the person(s) who associated a work with this deed makes no warranties about the work, and disclaims liability for all uses of the work, to the fullest extent permitted by applicable law. |
|||
|
|||
When using or citing the work, you should not imply endorsement by the author or the affirmer. |
|||
|
|||
This is a [human-readable summary of the Legal Code](https://creativecommons.org/publicdomain/zero/1.0/) ([read the full text](https://creativecommons.org/publicdomain/zero/1.0/legalcode)). |
|||
@ -0,0 +1,68 @@ |
|||
# System Font CSS |
|||
|
|||
System Font CSS is set of `@font-face` rules that let you use the native system font of the OS running the browser. |
|||
|
|||
```css |
|||
body { |
|||
font-family: system-ui; |
|||
} |
|||
``` |
|||
|
|||
[system-font.css](system-font.css) offers eight variations of the `system-ui` font family; **light** (300) **light italic**, **normal** (400), **normal italic**, **medium** (500), **medium italic**, **bold** (700), and **bold italic**. |
|||
|
|||
```css |
|||
blockquote { |
|||
font: italic 300 system-ui; |
|||
} |
|||
|
|||
p { |
|||
font: 400 system-ui; |
|||
} |
|||
``` |
|||
|
|||
## Quick Start |
|||
|
|||
### Install |
|||
|
|||
This package can be installed with: |
|||
|
|||
* [npm](https://www.npmjs.com/package/system-font-css): `npm install --save system-font-css` |
|||
|
|||
### Load |
|||
|
|||
When installed with npm, system-font.css will create both a SCSS and LESS partial for easy importing: |
|||
|
|||
```scss |
|||
@import 'system-font'; |
|||
``` |
|||
|
|||
## OSX |
|||
|
|||
**OSX** has used three system typefaces. Since **El Capitan** it has used **San Fransisco**. In **Yosemite** it used **Helvetica Neue**. From **Mavericks** back to **Kodiak** it used **Lucida Grande**. |
|||
|
|||
## Windows |
|||
|
|||
**Windows** has used four system typefaces. Since **Vista** it has used **Segoe UI**. In XP, it used **Tahoma**, which oddly enough does not have an italic variation. From **Windows ME** back to **Windows 3.1** it used **Microsoft Sans Serif**. Finally, from **Windows 2.0** back to **Windows 1.0** it used **Fixedsys**. Neither **Microsoft Sans Serif** or **Fixedsys** are included in this set, with apologies. |
|||
|
|||
Also, for those of opposed to joy, remember that **Internet Explorer 8** does not support local `@font-face` rules. Therefore, should you need to reference system fonts in that browser then you will need to do so from the `font` declaration. |
|||
|
|||
```css |
|||
body { |
|||
font-family: system-ui, "Segoe UI", Tahoma; |
|||
} |
|||
``` |
|||
|
|||
## Android |
|||
|
|||
**Android** has used two system typefaces. Since **Ice Cream Sandwich** it has used **Roboto**. From **Jelly Bean** back to **Cupcake** it used **Droid Sans**, which also lacks an italic variation. Do you suppose OS developers dislike *emphasis*? |
|||
|
|||
## Ubuntu |
|||
|
|||
Ubuntu has always used one system typeface, aptly named **Ubuntu**. That part was easy. |
|||
|
|||
## Native `system-ui` resources |
|||
|
|||
* [CSS Fonts Module Level 4 Editor’s Draft Specification](https://drafts.csswg.org/css-fonts-4/#system-ui-def) |
|||
* [Chrome Platform Status](https://www.chromestatus.com/feature/5640395337760768) |
|||
* Proposed for inclusion on [Can I Use](https://github.com/Fyrd/caniuse/issues/2918) |
|||
* Previous [discussions in the W3C](https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html) to standardize a generic `system` family. |
|||
@ -0,0 +1,57 @@ |
|||
/*! system-font.css v2.0.2 | CC0-1.0 License | github.com/jonathantneal/system-font-css */ |
|||
|
|||
@font-face { |
|||
font-family: system-ui; |
|||
font-style: normal; |
|||
font-weight: 300; |
|||
src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Segoe UI Light"), local("Ubuntu Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: system-ui; |
|||
font-style: italic; |
|||
font-weight: 300; |
|||
src: local(".SFNSText-LightItalic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Light Italic"), local("Ubuntu Light Italic"), local("Roboto-LightItalic"), local("DroidSans"), local("Tahoma"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: system-ui; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
src: local(".SFNSText-Regular"), local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"), local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"), local("DroidSans"), local("Tahoma"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: system-ui; |
|||
font-style: italic; |
|||
font-weight: 400; |
|||
src: local(".SFNSText-Italic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Italic"), local("Ubuntu Italic"), local("Roboto-Italic"), local("DroidSans"), local("Tahoma"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: system-ui; |
|||
font-style: normal; |
|||
font-weight: 500; |
|||
src: local(".SFNSText-Medium"), local(".HelveticaNeueDeskInterface-MediumP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold"), local("Ubuntu Medium"), local("Roboto-Medium"), local("DroidSans-Bold"), local("Tahoma Bold"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: system-ui; |
|||
font-style: italic; |
|||
font-weight: 500; |
|||
src: local(".SFNSText-MediumItalic"), local(".HelveticaNeueDeskInterface-MediumItalicP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold Italic"), local("Ubuntu Medium Italic"), local("Roboto-MediumItalic"), local("DroidSans-Bold"), local("Tahoma Bold"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: system-ui; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
src: local(".SFNSText-Bold"), local(".HelveticaNeueDeskInterface-Bold"), local(".LucidaGrandeUI"), local("Segoe UI Bold"), local("Ubuntu Bold"), local("Roboto-Bold"), local("DroidSans-Bold"), local("Tahoma Bold"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: system-ui; |
|||
font-style: italic; |
|||
font-weight: 700; |
|||
src: local(".SFNSText-BoldItalic"), local(".HelveticaNeueDeskInterface-BoldItalic"), local(".LucidaGrandeUI"), local("Segoe UI Bold Italic"), local("Ubuntu Bold Italic"), local("Roboto-BoldItalic"), local("DroidSans-Bold"), local("Tahoma Bold"); |
|||
} |
|||
@ -0,0 +1,189 @@ |
|||
<!doctype html> |
|||
<title>System Font CSS</title> |
|||
<meta charset="utf-8"> |
|||
<meta http-equiv="x-ua-compatible" content="ie=edge"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|||
<link href="system-font.css" rel="stylesheet"> |
|||
<style> |
|||
@font-face { |
|||
font-family: monospace; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
src: local("Menlo-Regular"), local("Monaco"), local("Consolas"), local("DejaVu Sans Mono"), local("DejaVu Sans Mono"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: monospace; |
|||
font-style: italic; |
|||
font-weight: 400; |
|||
src: local("Menlo-Regular"), local("Monaco"), local("Consolas-Italic"), local("DejaVu Sans Mono Oblique"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: monospace; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
src: local("Menlo-Regular"), local("Monaco"), local("Consolas-Bold"), local("DejaVu Sans Mono Bold"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: monospace; |
|||
font-style: italic; |
|||
font-weight: 700; |
|||
src: local("Menlo-Regular"), local("Monaco"), local("Consolas-BoldItalic"), local("DejaVu Sans Mono Bold Oblique"); |
|||
} |
|||
|
|||
body { |
|||
font: 1em/1.6 system-ui, Tahoma, sans-serif; |
|||
margin: 3em auto; |
|||
max-width: 40em; |
|||
} |
|||
|
|||
@media (max-width: 42em) { |
|||
body { |
|||
margin: 3em 1em; |
|||
} |
|||
} |
|||
|
|||
h1, |
|||
h2 { |
|||
border-bottom: 1px solid #eee; |
|||
padding-bottom: .3em; |
|||
} |
|||
|
|||
h1 { |
|||
margin: 1em 0 1rem; |
|||
font-size: 2.25em; |
|||
} |
|||
|
|||
h2 { |
|||
font-size: 1.75em; |
|||
line-height: 1.225; |
|||
margin: 1em 0 1rem; |
|||
} |
|||
|
|||
code, |
|||
pre { |
|||
border-radius: 3px; |
|||
font-family: "monospace", monospace; |
|||
font-size: 85%; |
|||
} |
|||
|
|||
p, |
|||
pre { |
|||
margin: 0 0 1em; |
|||
} |
|||
|
|||
code { |
|||
background-color: rgba(0,0,0,.04); |
|||
padding: .2em; |
|||
} |
|||
|
|||
pre { |
|||
background-color: #f7f7f7; |
|||
line-height: 1.45; |
|||
padding: 1em; |
|||
-moz-tab-size: 4; |
|||
tab-size: 4; |
|||
} |
|||
|
|||
a { |
|||
color: #4078c0; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
a:focus, |
|||
a:hover { |
|||
text-decoration: underline; |
|||
} |
|||
|
|||
.token-selector { |
|||
color: #0A0; |
|||
} |
|||
|
|||
.token-property-name { |
|||
color: #44B; |
|||
} |
|||
|
|||
.token-property-value { |
|||
color: #B50; |
|||
} |
|||
</style> |
|||
|
|||
<h1> |
|||
System Font CSS |
|||
</h1> |
|||
|
|||
<p> |
|||
System Font CSS is set of <code>@font-face</code> rules that let you use the native system font of the OS running the browser. |
|||
</p> |
|||
|
|||
<pre> |
|||
<span class="token-selector">body</span> { |
|||
<span class="token-property-name">font-family</span>: <span class="token-property-value">system</span>; |
|||
} |
|||
</pre> |
|||
|
|||
<p> |
|||
<a href="https://github.com/jonathantneal/system-font-css">system-font.css</a> offers eight variations of the <code>system</code> font family; <strong>light</strong> (300) <strong>light italic</strong>, <strong>normal</strong> (400), <strong>normal italic</strong>, <strong>medium</strong> (500), <strong>medium italic</strong>, <strong>bold</strong> (700), and <strong>bold italic</strong>. |
|||
</p> |
|||
|
|||
<pre> |
|||
<span class="token-selector">blockquote</span> { |
|||
<span class="token-property-name">font</span>: <span class="token-property-value">italic 300 system</span>; |
|||
} |
|||
|
|||
<span class="token-selector">p</span> { |
|||
<span class="token-property-name">font</span>: <span class="token-property-value">400 system</span>; |
|||
} |
|||
</pre> |
|||
|
|||
<h2> |
|||
OSX |
|||
</h2> |
|||
|
|||
<p> |
|||
<strong>OSX</strong> has used three system typefaces. Since <strong>El Capitan</strong> it has used <strong>San Fransisco</strong>. In <strong>Yosemite</strong> it used <strong>Helvetica Neue</strong>. From <strong>Mavericks</strong> back to <strong>Kodiak</strong> it used <strong>Lucida Grande</strong>. |
|||
</p> |
|||
|
|||
<h2> |
|||
Windows |
|||
</h2> |
|||
|
|||
<p> |
|||
<strong>Windows</strong> has used four system typefaces. Since <strong>Vista</strong> it has used <strong>Segoe UI</strong>. In XP, it used <strong>Tahoma</strong>, which oddly enough lacks an italic variation. From <strong>Windows ME</strong> back to <strong>Windows 3.1</strong> it used <strong>Microsoft Sans Serif</strong>. Finally, from <strong>Windows 2.0</strong> back to <strong>Windows 1.0</strong> it used <strong>Fixedsys</strong>. Neither <strong>Microsoft Sans Serif</strong> or <strong>Fixedsys</strong> are included in this set, with apologies. |
|||
</p> |
|||
|
|||
<p> |
|||
Also, for those of opposed to joy, remember that <strong>Internet Explorer 8</strong> does not support local <code>@font-face</code> rules. Therefore, should you need to reference system fonts in that browser then you will need to do so from the <code>font</code> declaration. |
|||
</p> |
|||
|
|||
<pre> |
|||
<span class="token-selector">body</span> { |
|||
<span class="token-property-name">font-family</span>: <span class="token-property-value">system, "Segoe UI", Tahoma</span>; |
|||
} |
|||
</pre> |
|||
|
|||
<h2> |
|||
Android |
|||
</h2> |
|||
|
|||
<p> |
|||
<strong>Android</strong> has used two system typefaces. Since <strong>Ice Cream Sandwich</strong> it has used <strong>Roboto</strong>. From <strong>Jelly Bean</strong> back to <strong>Cupcake</strong> it used <strong>Droid Sans</strong>, which also lacks an italic variation. Do you suppose OS developers dislike <em>emphasis</em>? |
|||
</p> |
|||
|
|||
<h2> |
|||
Ubuntu |
|||
</h2> |
|||
|
|||
<p> |
|||
Ubuntu has always used one system typeface, apty named <strong>Ubuntu</strong>. That part was easy. |
|||
</p> |
|||
|
|||
<h2> |
|||
Is <code>system</code> going to be a thing? |
|||
</h2> |
|||
|
|||
<p> |
|||
Maybe. There are <a href="https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html" target="_blank">discussions in the W3C</a> to standardize a generic <code>system</code> family. |
|||
</p> |
|||
@ -0,0 +1,83 @@ |
|||
{ |
|||
"_from": "system-font-css@^2.0.1", |
|||
"_id": "system-font-css@2.0.2", |
|||
"_inBundle": false, |
|||
"_integrity": "sha512-zK36lpja4NIi4Po99bXReeqeDcM1sW4hTKJt5Mby/IXX6kLSwjkQ4pZThFdgb/jDwfRsBvxxVG+VekP1sTdF0w==", |
|||
"_location": "/system-font-css", |
|||
"_phantomChildren": {}, |
|||
"_requested": { |
|||
"type": "range", |
|||
"registry": true, |
|||
"raw": "system-font-css@^2.0.1", |
|||
"name": "system-font-css", |
|||
"escapedName": "system-font-css", |
|||
"rawSpec": "^2.0.1", |
|||
"saveSpec": null, |
|||
"fetchSpec": "^2.0.1" |
|||
}, |
|||
"_requiredBy": [ |
|||
"/" |
|||
], |
|||
"_resolved": "https://registry.npmjs.org/system-font-css/-/system-font-css-2.0.2.tgz", |
|||
"_shasum": "88c4ae30eda94bc60705cba7d66c8c822f3c47db", |
|||
"_spec": "system-font-css@^2.0.1", |
|||
"_where": "/Users/ivan/Dev/jekyll/jekyll-theme-docs", |
|||
"author": { |
|||
"name": "Jonathan Neal", |
|||
"email": "jonathantneal@hotmail.com", |
|||
"url": "http://jonathantneal.com" |
|||
}, |
|||
"bugs": { |
|||
"url": "https://github.com/jonathantneal/system-font-css/issues" |
|||
}, |
|||
"bundleDependencies": false, |
|||
"contributors": [ |
|||
{ |
|||
"name": "Zach Leatherman", |
|||
"email": "zachleatherman@gmail.com", |
|||
"url": "https://zachleat.com/" |
|||
} |
|||
], |
|||
"dependencies": { |
|||
"cpr": "^2.2.0" |
|||
}, |
|||
"deprecated": false, |
|||
"description": "Use the native system font of the OS running the browser", |
|||
"devDependencies": {}, |
|||
"engines": { |
|||
"node": ">=0.8.0" |
|||
}, |
|||
"homepage": "https://github.com/jonathantneal/system-font-css", |
|||
"keywords": [ |
|||
"system", |
|||
"fonts", |
|||
"faces", |
|||
"rules", |
|||
"css", |
|||
"mac", |
|||
"windows", |
|||
"ubuntu", |
|||
"san", |
|||
"fransisco", |
|||
"helvetica", |
|||
"neue", |
|||
"lucida", |
|||
"grande", |
|||
"segoe", |
|||
"ui", |
|||
"microsoft", |
|||
"sans", |
|||
"serif" |
|||
], |
|||
"license": "CC0-1.0", |
|||
"main": "system-font.css", |
|||
"name": "system-font-css", |
|||
"repository": { |
|||
"type": "git", |
|||
"url": "git+ssh://git@github.com/jonathantneal/system-font-css.git" |
|||
}, |
|||
"scripts": { |
|||
"install": "cpr system-font.css _system-font.scss -o && cpr system-font.css system-font.less -o" |
|||
}, |
|||
"version": "2.0.2" |
|||
} |
|||
@ -0,0 +1,57 @@ |
|||
/*! system-font.css v2.0.2 | CC0-1.0 License | github.com/jonathantneal/system-font-css */ |
|||
|
|||
@font-face { |
|||
font-family: system-ui; |
|||
font-style: normal; |
|||
font-weight: 300; |
|||
src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Segoe UI Light"), local("Ubuntu Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: system-ui; |
|||
font-style: italic; |
|||
font-weight: 300; |
|||
src: local(".SFNSText-LightItalic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Light Italic"), local("Ubuntu Light Italic"), local("Roboto-LightItalic"), local("DroidSans"), local("Tahoma"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: system-ui; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
src: local(".SFNSText-Regular"), local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"), local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"), local("DroidSans"), local("Tahoma"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: system-ui; |
|||
font-style: italic; |
|||
font-weight: 400; |
|||
src: local(".SFNSText-Italic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Italic"), local("Ubuntu Italic"), local("Roboto-Italic"), local("DroidSans"), local("Tahoma"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: system-ui; |
|||
font-style: normal; |
|||
font-weight: 500; |
|||
src: local(".SFNSText-Medium"), local(".HelveticaNeueDeskInterface-MediumP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold"), local("Ubuntu Medium"), local("Roboto-Medium"), local("DroidSans-Bold"), local("Tahoma Bold"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: system-ui; |
|||
font-style: italic; |
|||
font-weight: 500; |
|||
src: local(".SFNSText-MediumItalic"), local(".HelveticaNeueDeskInterface-MediumItalicP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold Italic"), local("Ubuntu Medium Italic"), local("Roboto-MediumItalic"), local("DroidSans-Bold"), local("Tahoma Bold"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: system-ui; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
src: local(".SFNSText-Bold"), local(".HelveticaNeueDeskInterface-Bold"), local(".LucidaGrandeUI"), local("Segoe UI Bold"), local("Ubuntu Bold"), local("Roboto-Bold"), local("DroidSans-Bold"), local("Tahoma Bold"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: system-ui; |
|||
font-style: italic; |
|||
font-weight: 700; |
|||
src: local(".SFNSText-BoldItalic"), local(".HelveticaNeueDeskInterface-BoldItalic"), local(".LucidaGrandeUI"), local("Segoe UI Bold Italic"), local("Ubuntu Bold Italic"), local("Roboto-BoldItalic"), local("DroidSans-Bold"), local("Tahoma Bold"); |
|||
} |
|||
@ -0,0 +1,57 @@ |
|||
/*! system-font.css v2.0.2 | CC0-1.0 License | github.com/jonathantneal/system-font-css */ |
|||
|
|||
@font-face { |
|||
font-family: system-ui; |
|||
font-style: normal; |
|||
font-weight: 300; |
|||
src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Segoe UI Light"), local("Ubuntu Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: system-ui; |
|||
font-style: italic; |
|||
font-weight: 300; |
|||
src: local(".SFNSText-LightItalic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Light Italic"), local("Ubuntu Light Italic"), local("Roboto-LightItalic"), local("DroidSans"), local("Tahoma"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: system-ui; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
src: local(".SFNSText-Regular"), local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"), local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"), local("DroidSans"), local("Tahoma"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: system-ui; |
|||
font-style: italic; |
|||
font-weight: 400; |
|||
src: local(".SFNSText-Italic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Italic"), local("Ubuntu Italic"), local("Roboto-Italic"), local("DroidSans"), local("Tahoma"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: system-ui; |
|||
font-style: normal; |
|||
font-weight: 500; |
|||
src: local(".SFNSText-Medium"), local(".HelveticaNeueDeskInterface-MediumP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold"), local("Ubuntu Medium"), local("Roboto-Medium"), local("DroidSans-Bold"), local("Tahoma Bold"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: system-ui; |
|||
font-style: italic; |
|||
font-weight: 500; |
|||
src: local(".SFNSText-MediumItalic"), local(".HelveticaNeueDeskInterface-MediumItalicP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold Italic"), local("Ubuntu Medium Italic"), local("Roboto-MediumItalic"), local("DroidSans-Bold"), local("Tahoma Bold"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: system-ui; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
src: local(".SFNSText-Bold"), local(".HelveticaNeueDeskInterface-Bold"), local(".LucidaGrandeUI"), local("Segoe UI Bold"), local("Ubuntu Bold"), local("Roboto-Bold"), local("DroidSans-Bold"), local("Tahoma Bold"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: system-ui; |
|||
font-style: italic; |
|||
font-weight: 700; |
|||
src: local(".SFNSText-BoldItalic"), local(".HelveticaNeueDeskInterface-BoldItalic"), local(".LucidaGrandeUI"), local("Segoe UI Bold Italic"), local("Ubuntu Bold Italic"), local("Roboto-BoldItalic"), local("DroidSans-Bold"), local("Tahoma Bold"); |
|||
} |
|||
@ -0,0 +1,467 @@ |
|||
|
|||
@mixin hook-heading-hero(){ |
|||
font-weight: bold; |
|||
} |
|||
|
|||
@mixin hook-navbar(){ |
|||
font-weight: 500; |
|||
.uk-drop { |
|||
width: 360px; |
|||
} |
|||
.uk-search-navbar .uk-search-input { |
|||
height: 50px; |
|||
font-size: 1.0625rem; |
|||
padding-left: 1.1875rem; |
|||
background: #fff; |
|||
} |
|||
} |
|||
@mixin hook-button(){ |
|||
border-radius: 5px; |
|||
} |
|||
|
|||
// Doc navigation |
|||
$docs-sidebar-width: 260px; |
|||
$docs-sidebar-width-l: 360px; |
|||
.sidebar-fixed-width { |
|||
width: $docs-sidebar-width; |
|||
} |
|||
.sidebar-docs { |
|||
width: $docs-sidebar-width - $global-medium-gutter; |
|||
padding-right: $global-medium-gutter; |
|||
top: 112px; |
|||
bottom: 70px; |
|||
overflow-y: scroll; |
|||
overflow-x: hidden; |
|||
> h5 { |
|||
margin: 15px 0 0; |
|||
&:first-child { |
|||
margin-top: 17px |
|||
} |
|||
} |
|||
} |
|||
|
|||
@media (min-width: $breakpoint-large) { |
|||
.sidebar-fixed-width { |
|||
width: $docs-sidebar-width-l; |
|||
} |
|||
.sidebar-docs { |
|||
width: $docs-sidebar-width-l - $global-large-gutter; |
|||
padding-right: $global-large-gutter; |
|||
} |
|||
} |
|||
ul.doc-nav { |
|||
padding-left: 14px; |
|||
margin-top: 5px; |
|||
} |
|||
.doc-nav > li.uk-active > a { |
|||
position: relative; |
|||
&:before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 15px; |
|||
left: -14px; |
|||
width: 7px; |
|||
border-top: 1px solid $global-primary-background; |
|||
} |
|||
} |
|||
|
|||
// Home page hero |
|||
.hero-image img { |
|||
max-width: 400px; |
|||
max-height: 150px; |
|||
} |
|||
.button-cta:nth-child(2n), .button-cta:nth-child(3n) { |
|||
margin-top: $global-margin; |
|||
} |
|||
.heading-hero-2 { |
|||
font-size: 1.875rem |
|||
} |
|||
@media (min-width: $breakpoint-small) { |
|||
.heading-hero-2 { |
|||
font-size: 2.375rem; |
|||
} |
|||
} |
|||
@media (min-width: $breakpoint-medium) { |
|||
.heading-hero-2 { |
|||
font-size: 2.75rem; |
|||
} |
|||
} |
|||
@mixin hook-card-title(){ |
|||
font-size: 1.125rem; |
|||
} |
|||
|
|||
|
|||
|
|||
.list-featured>li:first-child { |
|||
margin-top: $list-large-margin-top; |
|||
} |
|||
|
|||
|
|||
@mixin hook-base-body(){ |
|||
//filter: blur(7px); |
|||
-moz-osx-font-smoothing: grayscale; |
|||
-webkit-font-smoothing: antialiased; |
|||
|
|||
} |
|||
@mixin hook-base-misc(){ |
|||
input[type="submit" i]{ |
|||
-webkit-appearance:none; |
|||
} |
|||
} |
|||
@mixin hook-card(){ |
|||
border: solid 1px lighten($global-border, 10%); |
|||
&:hover { |
|||
border-color: darken($global-border, 10%); |
|||
} |
|||
} |
|||
@mixin hook-card-body(){ |
|||
> p { |
|||
font-size: $global-small-font-size; |
|||
} |
|||
> span { |
|||
color: $global-primary-background; |
|||
} |
|||
} |
|||
|
|||
@mixin hook-card-misc(){ |
|||
.uk-position-cover { |
|||
z-index: 1; |
|||
} |
|||
.card-category { |
|||
h3:nth-child(2n) { |
|||
margin-top: 0 !important; |
|||
} |
|||
} |
|||
.card-post { |
|||
.uk-card-header{ |
|||
padding-top: $global-medium-margin; |
|||
padding-bottom: 0; |
|||
} |
|||
.uk-card-body{ |
|||
padding-top: $global-medium-margin / 2; |
|||
padding-bottom: $global-medium-margin / 2; |
|||
} |
|||
.uk-card-footer{ |
|||
padding-bottom: $global-medium-margin * 0.8; |
|||
padding-top: 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@mixin hook-form(){ |
|||
border: solid 1px $global-border; |
|||
} |
|||
|
|||
@mixin hook-offcanvas-bar(){ |
|||
font-weight: 500; |
|||
} |
|||
|
|||
@mixin hook-list-misc(){ |
|||
.uk-list { |
|||
margin: 0; |
|||
} |
|||
} |
|||
|
|||
@mixin hook-article(){ |
|||
.share { |
|||
} |
|||
figure, .uk-slideshow { |
|||
margin-top: $global-medium-margin * 1.1; |
|||
margin-bottom: $global-medium-margin * 1.5; |
|||
} |
|||
figure { |
|||
img + div .uk-overlay-icon { |
|||
color: rgba(255, 255, 255, 0); |
|||
} |
|||
img:hover + div .uk-overlay-icon { |
|||
color: rgba(255, 255, 255, 1); |
|||
} |
|||
figcaption { |
|||
margin-left: 0; |
|||
span { |
|||
padding-right: 20px; |
|||
margin-bottom: -43px; |
|||
margin-top: 20px; |
|||
border-right: solid 2px $global-muted-color; |
|||
font-style: italic; |
|||
font-size: 0.8rem; |
|||
line-height: 1.8; |
|||
} |
|||
} |
|||
} |
|||
blockquote { |
|||
border-left: solid 2px $global-muted-color; |
|||
padding-left: $base-margin-vertical; |
|||
line-height: 1.7; |
|||
margin-top: $global-medium-margin; |
|||
margin-bottom: $global-medium-margin; |
|||
} |
|||
.highlight, |
|||
.highlighter-rouge { |
|||
margin-top: $global-medium-margin; |
|||
margin-bottom: $global-medium-margin; |
|||
} |
|||
} |
|||
@mixin hook-article-title(){ |
|||
margin-bottom: $global-margin; |
|||
} |
|||
@mixin hook-article-meta(){ |
|||
a { |
|||
color: $article-meta-color; |
|||
&:hover { |
|||
color: $global-primary-background; |
|||
} |
|||
} |
|||
.avatar { |
|||
margin-right: 10px; |
|||
float: left; |
|||
} |
|||
} |
|||
@mixin hook-article-misc(){ |
|||
.article-content { |
|||
line-height: 1.8; |
|||
} |
|||
.avatar { |
|||
border-radius: 50%; |
|||
} |
|||
.paginate-post .uk-text-small { |
|||
line-height: 1.75; |
|||
} |
|||
} |
|||
|
|||
// |
|||
// Utility |
|||
// |
|||
// ======================================================================== |
|||
@mixin hook-utility-misc(){ |
|||
.remove-underline, .remove-underline:hover{ |
|||
text-decoration: none; |
|||
} |
|||
.link-dark { |
|||
color: $color-main !important; |
|||
} |
|||
.uk-container.uk-container-xsmall { |
|||
max-width: 700px; |
|||
} |
|||
.hvr-forward { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
-webkit-transform: perspective(1px) translateZ(0); |
|||
transform: perspective(1px) translateZ(0); |
|||
box-shadow: 0 0 1px transparent; |
|||
-webkit-transition-duration: 0.3s; |
|||
transition-duration: 0.3s; |
|||
-webkit-transition-property: transform; |
|||
transition-property: transform; |
|||
} |
|||
.hvr-forward:active, |
|||
.hvr-forward:focus, |
|||
.hvr-forward:hover { |
|||
-webkit-transform: translateX(6px); |
|||
transform: translateX(6px); |
|||
} |
|||
.hvr-back { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
-webkit-transform: perspective(1px) translateZ(0); |
|||
transform: perspective(1px) translateZ(0); |
|||
box-shadow: 0 0 1px transparent; |
|||
-webkit-transition-duration: 0.3s; |
|||
transition-duration: 0.3s; |
|||
-webkit-transition-property: transform; |
|||
transition-property: transform; |
|||
} |
|||
.hvr-back:hover, |
|||
.hvr-back:focus, |
|||
.hvr-back:active { |
|||
-webkit-transform: translateX(-6px); |
|||
transform: translateX(-6px); |
|||
} |
|||
.social-networks { |
|||
margin-top: $global-large-margin; |
|||
} |
|||
header { |
|||
.uk-logo { |
|||
color: $global-primary-background; |
|||
&:hover { |
|||
color: $global-primary-background; |
|||
} |
|||
} |
|||
} |
|||
.section-title { |
|||
margin-bottom: $global-medium-margin; |
|||
~ .section-title { |
|||
margin-top: $global-medium-margin; |
|||
} |
|||
} |
|||
@media (min-width: $breakpoint-medium) { |
|||
.section-title { |
|||
~ .section-title { |
|||
margin-top: $global-large-margin; |
|||
} |
|||
} |
|||
} |
|||
.section-hero { |
|||
.hero-search { |
|||
max-width: 550px; |
|||
margin: 60px auto 0 auto; |
|||
.uk-search-input { |
|||
height: 50px; |
|||
border-radius: 50px; |
|||
color: $global-muted-color; |
|||
font-style: normal; |
|||
&:focus { |
|||
background: #ffffff; |
|||
} |
|||
} |
|||
.uk-search-icon { |
|||
width: 50px; |
|||
color: $global-muted-color; |
|||
} |
|||
|
|||
} |
|||
} |
|||
footer { |
|||
.uk-subnav>.uk-active>a { |
|||
color: $global-muted-color; |
|||
} |
|||
} |
|||
#markdown-toc { |
|||
padding: 0 0 0 $global-margin; |
|||
border-left: solid 2px $global-muted-color; |
|||
list-style: none; |
|||
margin-bottom: $global-medium-margin; |
|||
> li > :last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
ul { |
|||
margin: 0; |
|||
padding-left: $global-margin; |
|||
list-style: none; |
|||
} |
|||
>li:nth-child(n+2), >li>ul { |
|||
margin-top: 5px; |
|||
} |
|||
a { |
|||
color: $global-muted-color; |
|||
} |
|||
|
|||
} |
|||
.uk-article-content .no_toc { |
|||
margin-top: $global-medium-margin; |
|||
margin-bottom: $global-medium-margin; |
|||
} |
|||
#hero-search-results, #navbar-search-results { |
|||
margin: 10px 0 0 0; |
|||
z-index: 1; |
|||
li { |
|||
margin: 0; |
|||
padding: 20px 25px 0; |
|||
background: #fff; |
|||
line-height: 1.4; |
|||
border-left: solid 1px $global-border; |
|||
border-right: solid 1px $global-border; |
|||
&:first-child { |
|||
border-top-left-radius: 5px; |
|||
border-top-right-radius: 5px; |
|||
border-top: solid 1px $global-border; |
|||
} |
|||
&:last-child { |
|||
border-bottom-left-radius: 5px; |
|||
border-bottom-right-radius: 5px; |
|||
padding-bottom: 25px; |
|||
border-bottom: solid 1px $global-border; |
|||
} |
|||
a:hover { |
|||
text-decoration: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
$tm-timeline-border-width: 4px; |
|||
$tm-timeline-dot-diameter: 20px; |
|||
|
|||
@media (min-width: $breakpoint-small) { |
|||
.tm-timeline { |
|||
box-sizing: border-box; |
|||
* { |
|||
box-sizing: border-box; |
|||
} |
|||
position: relative; |
|||
|
|||
&:before { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 0; |
|||
left: calc(30% - 2px); |
|||
bottom: 0; |
|||
width: $tm-timeline-border-width; |
|||
background: $color-main; |
|||
} |
|||
|
|||
&:after { |
|||
content: ""; |
|||
display: table; |
|||
clear: both; |
|||
} |
|||
} |
|||
|
|||
.tm-timeline-entry { |
|||
+ .tm-timeline-entry{ |
|||
margin-top: $global-large-margin; |
|||
} |
|||
clear: both; |
|||
text-align: left; |
|||
position: relative; |
|||
|
|||
&:after { |
|||
display: block; |
|||
content: ""; |
|||
clear: both; |
|||
} |
|||
|
|||
.tm-timeline-time { |
|||
float: left; |
|||
width: 30%; |
|||
padding-right: $global-large-margin; |
|||
text-align: right; |
|||
position: relative; |
|||
|
|||
&:before { |
|||
content: ''; |
|||
position: absolute; |
|||
width: $tm-timeline-dot-diameter; |
|||
height: $tm-timeline-dot-diameter; |
|||
border: $tm-timeline-border-width solid $color-main; |
|||
background-color: #fff; |
|||
border-radius: 100%; |
|||
top: 0; |
|||
right: - 14px; |
|||
z-index: 99; |
|||
} |
|||
|
|||
h5 { |
|||
margin: 3px 0 0; |
|||
} |
|||
} |
|||
|
|||
.tm-timeline-body { |
|||
float: right; |
|||
width: 70%; |
|||
padding-left: $global-large-margin; |
|||
margin-top: -2px; |
|||
h3 { |
|||
margin: 0 0 15px; |
|||
span { |
|||
font-size: .7rem; |
|||
margin-bottom: 4px; |
|||
padding: 0 5px; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,92 @@ |
|||
// Import UIkit components |
|||
|
|||
// Base |
|||
@import "../uikit/components/variables.scss"; |
|||
@import "../uikit/components/mixin.scss"; |
|||
@import "../uikit/components/base.scss"; |
|||
|
|||
// Elements |
|||
@import "../uikit/components/link.scss"; |
|||
@import "../uikit/components/heading.scss"; |
|||
@import "../uikit/components/divider.scss"; |
|||
@import "../uikit/components/list.scss"; |
|||
// @import "../uikit/components/description-list.scss"; |
|||
// @import "../uikit/components/table.scss"; |
|||
@import "../uikit/components/icon.scss"; |
|||
// @import "../uikit/components/form-range.scss"; |
|||
@import "../uikit/components/form.scss"; // After: Icon, Form Range |
|||
@import "../uikit/components/button.scss"; |
|||
|
|||
// Layout |
|||
@import "../uikit/components/section.scss"; |
|||
@import "../uikit/components/container.scss"; |
|||
@import "../uikit/components/grid.scss"; |
|||
@import "../uikit/components/tile.scss"; |
|||
@import "../uikit/components/card.scss"; |
|||
|
|||
// Common |
|||
@import "../uikit/components/close.scss"; // After: Icon |
|||
// @import "../uikit/components/spinner.scss"; // After: Icon |
|||
@import "../uikit/components/totop.scss"; // After: Icon |
|||
// @import "../uikit/components/marker.scss"; // After: Icon |
|||
// @import "../uikit/components/alert.scss"; // After: Close |
|||
// @import "../uikit/components/badge.scss"; |
|||
@import "../uikit/components/label.scss"; |
|||
@import "../uikit/components/overlay.scss"; // After: Icon |
|||
@import "../uikit/components/article.scss"; // After: Subnav |
|||
// @import "../uikit/components/comment.scss"; // After: Subnav |
|||
@import "../uikit/components/search.scss"; // After: Icon |
|||
|
|||
// Navs |
|||
@import "../uikit/components/nav.scss"; |
|||
@import "../uikit/components/navbar.scss"; // After: Card, Grid, Nav, Icon, Search |
|||
@import "../uikit/components/subnav.scss"; |
|||
// @import "../uikit/components/breadcrumb.scss"; |
|||
@import "../uikit/components/pagination.scss"; |
|||
// @import "../uikit/components/tab.scss"; |
|||
// @import "../uikit/components/slidenav.scss"; // After: Icon |
|||
// @import "../uikit/components/dotnav.scss"; |
|||
// @import "../uikit/components/thumbnav.scss"; |
|||
|
|||
// JavaScript |
|||
// @import "../uikit/components/accordion.scss"; |
|||
@import "../uikit/components/drop.scss"; // After: Card |
|||
@import "../uikit/components/dropdown.scss"; // After: Card |
|||
// @import "../uikit/components/modal.scss"; // After: Close |
|||
@import "../uikit/components/lightbox.scss"; // After: Close |
|||
@import "../uikit/components/slideshow.scss"; |
|||
@import "../uikit/components/sticky.scss"; |
|||
@import "../uikit/components/offcanvas.scss"; |
|||
// @import "../uikit/components/switcher.scss"; |
|||
// Scrollspy |
|||
// Toggle |
|||
// Scroll |
|||
|
|||
// Additional |
|||
// @import "../uikit/components/iconnav.scss"; |
|||
// @import "../uikit/components/notification.scss"; |
|||
// @import "../uikit/components/tooltip.scss"; |
|||
// @import "../uikit/components/placeholder.scss"; |
|||
// @import "../uikit/components/progress.scss"; |
|||
// @import "../uikit/components/sortable.scss"; |
|||
// @import "../uikit/components/countdown.scss"; |
|||
|
|||
// Utilities |
|||
@import "../uikit/components/animation.scss"; |
|||
@import "../uikit/components/width.scss"; |
|||
@import "../uikit/components/text.scss"; |
|||
@import "../uikit/components/column.scss"; |
|||
@import "../uikit/components/cover.scss"; |
|||
// @import "../uikit/components/background.scss"; |
|||
@import "../uikit/components/align.scss"; |
|||
@import "../uikit/components/utility.scss"; |
|||
@import "../uikit/components/flex.scss"; // After: Utility |
|||
@import "../uikit/components/margin.scss"; |
|||
@import "../uikit/components/padding.scss"; |
|||
@import "../uikit/components/position.scss"; |
|||
// @import "../uikit/components/transition.scss"; |
|||
@import "../uikit/components/visibility.scss"; |
|||
// @import "../uikit/components/inverse.scss"; |
|||
|
|||
// Need to be loaded last |
|||
@import "../uikit/components/print.scss"; |
|||
@ -0,0 +1,90 @@ |
|||
// Color scheme variables |
|||
|
|||
// Main content |
|||
$color-main: #0F1214; |
|||
|
|||
// Secondary content |
|||
$global-muted-color: #7a838a; |
|||
|
|||
// Accent color |
|||
$global-primary-background: $color-main; |
|||
|
|||
// Link and botton hover |
|||
$color-hover: #000; |
|||
|
|||
// Standard UIkit |
|||
//$global-muted-background: ; |
|||
$global-border: #c4c7ca; |
|||
|
|||
// Global |
|||
$global-font-family: system-ui; |
|||
$global-link-color: $global-muted-color; |
|||
$global-link-hover-color: $color-hover; |
|||
|
|||
$global-xxlarge-font-size: 1.875rem;; |
|||
$global-xlarge-font-size: 1.625rem; |
|||
$global-large-font-size: 1.375rem; |
|||
$global-medium-font-size: 1.125rem; |
|||
$global-small-font-size: 0.875rem; |
|||
|
|||
// Base |
|||
$base-body-color: $color-main; |
|||
$base-heading-color: $color-main; |
|||
$link-muted-hover-color: $color-main; |
|||
$button-primary-hover-background: $color-hover; |
|||
$base-hr-border: lighten($global-border, 13%); |
|||
$text-lead-font-size: 1.125rem; |
|||
$base-heading-font-weight: bold; |
|||
$base-heading-margin-top: 50px; |
|||
// $base-body-font-weight: 300; |
|||
$base-h2-line-height: 1.4; |
|||
$base-link-hover-text-decoration: underline; |
|||
// $base-h1-font-size: $global-xxlarge-font-size !default; |
|||
// $base-h2-font-size: $global-xlarge-font-size !default; |
|||
// $base-h3-font-size: $global-large-font-size !default; |
|||
// $base-h4-font-size: $global-medium-font-size !default; |
|||
// $base-h5-font-size: $global-font-size !default; |
|||
// $base-h6-font-size: $global-small-font-size !default; |
|||
|
|||
// Navbar |
|||
$navbar-background: #fff; |
|||
$navbar-nav-item-color: $global-muted-color; |
|||
$navbar-nav-item-hover-color: $color-main; |
|||
$navbar-nav-item-active-color: $color-main; |
|||
$navbar-toggle-color: $global-muted-color; |
|||
$navbar-toggle-hover-color: $color-main; |
|||
|
|||
// Subnav |
|||
$subnav-item-color: $global-muted-color; |
|||
$subnav-item-hover-color: $color-main; |
|||
|
|||
// Pagination links |
|||
$pagination-item-color: $color-main; |
|||
$pagination-item-hover-color: $color-main; |
|||
|
|||
$article-meta-font-size: 0.8125rem; |
|||
$article-meta-line-height: 1.3; |
|||
|
|||
$container-max-width: 1100px; |
|||
$container-small-max-width: 800px; |
|||
|
|||
$card-small-body-padding-horizontal: 25px; |
|||
$card-small-body-padding-vertical: 25px; |
|||
|
|||
$article-title-line-height: 1.4; |
|||
$article-title-font-size: 1.875rem; |
|||
$offcanvas-bar-color-mode: dark; |
|||
$offcanvas-bar-background: #fff; |
|||
|
|||
$heading-hero-font-size: 2.375rem; |
|||
$heading-hero-line-height: 1.3; |
|||
$heading-hero-font-size-s: 2.9375rem; |
|||
$heading-hero-line-height-s: 1.3; |
|||
$heading-hero-font-size-m: 3.625rem; |
|||
$heading-hero-line-height-m: 1.4; |
|||
|
|||
$navbar-nav-item-text-transform: none; |
|||
|
|||
$subnav-item-text-transform: none; |
|||
|
|||
$search-default-border: darken($global-border, 15%); |
|||
@ -0,0 +1,56 @@ |
|||
// Base |
|||
@import "variables.scss"; |
|||
@import "mixin.scss"; |
|||
@import "base.scss"; |
|||
|
|||
// Elements |
|||
@import "link.scss"; |
|||
@import "heading.scss"; |
|||
@import "divider.scss"; |
|||
@import "list.scss"; |
|||
@import "description-list.scss"; |
|||
@import "table.scss"; |
|||
@import "icon.scss"; |
|||
@import "form.scss"; // After: Icon |
|||
@import "button.scss"; |
|||
|
|||
// Layout |
|||
@import "section.scss"; |
|||
@import "container.scss"; |
|||
@import "grid.scss"; |
|||
@import "tile.scss"; |
|||
@import "card.scss"; |
|||
|
|||
// Common |
|||
@import "close.scss"; // After: Icon |
|||
@import "spinner.scss"; // After: Icon |
|||
@import "totop.scss"; // After: Icon |
|||
@import "alert.scss"; // After: Close |
|||
@import "badge.scss"; |
|||
@import "label.scss"; |
|||
@import "overlay.scss"; // After: Icon |
|||
@import "article.scss"; // After: Subnav |
|||
@import "comment.scss"; // After: Subnav |
|||
@import "search.scss"; // After: Icon |
|||
|
|||
// Navs |
|||
@import "nav.scss"; |
|||
@import "navbar.scss"; // After: Card, Grid, Nav, Icon, Search |
|||
@import "subnav.scss"; |
|||
@import "breadcrumb.scss"; |
|||
@import "pagination.scss"; |
|||
@import "tab.scss"; |
|||
@import "slidenav.scss"; // After: Icon |
|||
@import "dotnav.scss"; |
|||
|
|||
// JavaScript |
|||
@import "accordion.scss"; |
|||
@import "drop.scss"; // After: Card |
|||
@import "dropdown.scss"; // After: Card |
|||
@import "modal.scss"; // After: Close |
|||
@import "sticky.scss"; |
|||
@import "offcanvas.scss"; |
|||
@import "switcher.scss"; |
|||
// Scrollspy |
|||
// Toggle |
|||
// Scroll |
|||
@ -0,0 +1,91 @@ |
|||
// Base |
|||
@import "variables.scss"; |
|||
@import "mixin.scss"; |
|||
@import "base.scss"; |
|||
|
|||
// Elements |
|||
@import "link.scss"; |
|||
@import "heading.scss"; |
|||
@import "divider.scss"; |
|||
@import "list.scss"; |
|||
@import "description-list.scss"; |
|||
@import "table.scss"; |
|||
@import "icon.scss"; |
|||
@import "form-range.scss"; |
|||
@import "form.scss"; // After: Icon, Form Range |
|||
@import "button.scss"; |
|||
|
|||
// Layout |
|||
@import "section.scss"; |
|||
@import "container.scss"; |
|||
@import "grid.scss"; |
|||
@import "tile.scss"; |
|||
@import "card.scss"; |
|||
|
|||
// Common |
|||
@import "close.scss"; // After: Icon |
|||
@import "spinner.scss"; // After: Icon |
|||
@import "totop.scss"; // After: Icon |
|||
@import "marker.scss"; // After: Icon |
|||
@import "alert.scss"; // After: Close |
|||
@import "badge.scss"; |
|||
@import "label.scss"; |
|||
@import "overlay.scss"; // After: Icon |
|||
@import "article.scss"; // After: Subnav |
|||
@import "comment.scss"; // After: Subnav |
|||
@import "search.scss"; // After: Icon |
|||
|
|||
// Navs |
|||
@import "nav.scss"; |
|||
@import "navbar.scss"; // After: Card, Grid, Nav, Icon, Search |
|||
@import "subnav.scss"; |
|||
@import "breadcrumb.scss"; |
|||
@import "pagination.scss"; |
|||
@import "tab.scss"; |
|||
@import "slidenav.scss"; // After: Icon |
|||
@import "dotnav.scss"; |
|||
@import "thumbnav.scss"; |
|||
|
|||
// JavaScript |
|||
@import "accordion.scss"; |
|||
@import "drop.scss"; // After: Card |
|||
@import "dropdown.scss"; // After: Card |
|||
@import "modal.scss"; // After: Close |
|||
@import "lightbox.scss"; // After: Close |
|||
@import "slideshow.scss"; |
|||
@import "slider.scss"; |
|||
@import "sticky.scss"; |
|||
@import "offcanvas.scss"; |
|||
@import "switcher.scss"; |
|||
// Scrollspy |
|||
// Toggle |
|||
// Scroll |
|||
|
|||
// Additional |
|||
@import "iconnav.scss"; |
|||
@import "notification.scss"; |
|||
@import "tooltip.scss"; |
|||
@import "placeholder.scss"; |
|||
@import "progress.scss"; |
|||
@import "sortable.scss"; |
|||
@import "countdown.scss"; |
|||
|
|||
// Utilities |
|||
@import "animation.scss"; |
|||
@import "width.scss"; |
|||
@import "text.scss"; |
|||
@import "column.scss"; |
|||
@import "cover.scss"; |
|||
@import "background.scss"; |
|||
@import "align.scss"; |
|||
@import "utility.scss"; |
|||
@import "flex.scss"; // After: Utility |
|||
@import "margin.scss"; |
|||
@import "padding.scss"; |
|||
@import "position.scss"; |
|||
@import "transition.scss"; |
|||
@import "visibility.scss"; |
|||
@import "inverse.scss"; |
|||
|
|||
// Need to be loaded last |
|||
@import "print.scss"; |
|||
@ -0,0 +1,19 @@ |
|||
// Utilities |
|||
@import "animation.scss"; |
|||
@import "width.scss"; |
|||
@import "text.scss"; |
|||
@import "column.scss"; |
|||
@import "cover.scss"; |
|||
@import "background.scss"; |
|||
@import "align.scss"; |
|||
@import "utility.scss"; |
|||
@import "flex.scss"; // After: Utility |
|||
@import "margin.scss"; |
|||
@import "padding.scss"; |
|||
@import "position.scss"; |
|||
@import "transition.scss"; |
|||
@import "visibility.scss"; |
|||
@import "inverse.scss"; |
|||
|
|||
// Need to be loaded last |
|||
@import "print.scss"; |
|||
@ -0,0 +1,118 @@ |
|||
// Name: Accordion |
|||
// Description: Component to create accordions |
|||
// |
|||
// Component: `uk-accordion` |
|||
// |
|||
// Sub-objects: `uk-accordion-title` |
|||
// `uk-accordion-content` |
|||
// |
|||
// States: `uk-open` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$accordion-item-margin-top: $global-margin !default; |
|||
|
|||
$accordion-title-font-size: $global-medium-font-size !default; |
|||
$accordion-title-line-height: 1.4 !default; |
|||
$accordion-title-color: $global-emphasis-color !default; |
|||
$accordion-title-hover-color: $global-color !default; |
|||
|
|||
$accordion-content-margin-top: $global-margin !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Accordion |
|||
========================================================================== */ |
|||
|
|||
.uk-accordion { |
|||
padding: 0; |
|||
list-style: none; |
|||
@if(mixin-exists(hook-accordion)) {@include hook-accordion();} |
|||
} |
|||
|
|||
|
|||
/* Item |
|||
========================================================================== */ |
|||
|
|||
.uk-accordion > :nth-child(n+2) { |
|||
margin-top: $accordion-item-margin-top; |
|||
@if(mixin-exists(hook-accordion-item)) {@include hook-accordion-item();} |
|||
} |
|||
|
|||
|
|||
/* Title |
|||
========================================================================== */ |
|||
|
|||
.uk-accordion-title { |
|||
display: block; |
|||
font-size: $accordion-title-font-size; |
|||
line-height: $accordion-title-line-height; |
|||
color: $accordion-title-color; |
|||
@if(mixin-exists(hook-accordion-title)) {@include hook-accordion-title();} |
|||
} |
|||
|
|||
/* Hover + Focus */ |
|||
.uk-accordion-title:hover, |
|||
.uk-accordion-title:focus { |
|||
color: $accordion-title-hover-color; |
|||
text-decoration: none; |
|||
outline: none; |
|||
@if(mixin-exists(hook-accordion-title-hover)) {@include hook-accordion-title-hover();} |
|||
} |
|||
|
|||
|
|||
/* Content |
|||
========================================================================== */ |
|||
|
|||
.uk-accordion-content { |
|||
margin-top: $accordion-content-margin-top; |
|||
@if(mixin-exists(hook-accordion-content)) {@include hook-accordion-content();} |
|||
} |
|||
|
|||
/* |
|||
* Micro clearfix |
|||
*/ |
|||
|
|||
.uk-accordion-content::before, |
|||
.uk-accordion-content::after { |
|||
content: ""; |
|||
display: table; |
|||
} |
|||
|
|||
.uk-accordion-content::after { clear: both; } |
|||
|
|||
/* |
|||
* Remove margin from the last-child |
|||
*/ |
|||
|
|||
.uk-accordion-content > :last-child { margin-bottom: 0; } |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-accordion-misc)) {@include hook-accordion-misc();} |
|||
|
|||
// @mixin hook-accordion(){} |
|||
// @mixin hook-accordion-item(){} |
|||
// @mixin hook-accordion-title(){} |
|||
// @mixin hook-accordion-title-hover(){} |
|||
// @mixin hook-accordion-content(){} |
|||
// @mixin hook-accordion-misc(){} |
|||
|
|||
|
|||
// Inverse |
|||
// ======================================================================== |
|||
|
|||
$inverse-accordion-title-color: $inverse-global-emphasis-color !default; |
|||
$inverse-accordion-title-hover-color: $inverse-global-inverse-color !default; |
|||
|
|||
|
|||
|
|||
// @mixin hook-inverse-accordion-item(){} |
|||
// @mixin hook-inverse-accordion-title(){} |
|||
// @mixin hook-inverse-accordion-title-hover(){} |
|||
@ -0,0 +1,147 @@ |
|||
// Name: Alert |
|||
// Description: Component to create alert messages |
|||
// |
|||
// Component: `uk-alert` |
|||
// |
|||
// Adopted: `uk-alert-close` |
|||
// |
|||
// Modifiers: `uk-alert-primary` |
|||
// `uk-alert-success` |
|||
// `uk-alert-warning` |
|||
// `uk-alert-danger` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$alert-margin-vertical: $global-margin !default; |
|||
$alert-padding: $global-small-gutter !default; |
|||
$alert-padding-right: $alert-padding + 14px !default; |
|||
$alert-background: $global-muted-background !default; |
|||
$alert-color: $global-color !default; |
|||
|
|||
$alert-close-top: $alert-padding + 5px !default; |
|||
$alert-close-right: $alert-padding !default; |
|||
|
|||
$alert-primary-background: lighten(mix(white, $global-primary-background, 40%), 20%) !default; |
|||
$alert-primary-color: $global-primary-background !default; |
|||
|
|||
$alert-success-background: lighten(mix(white, $global-success-background, 40%), 25%) !default; |
|||
$alert-success-color: $global-success-background !default; |
|||
|
|||
$alert-warning-background: lighten(mix(white, $global-warning-background, 45%), 15%) !default; |
|||
$alert-warning-color: $global-warning-background !default; |
|||
|
|||
$alert-danger-background: lighten(mix(white, $global-danger-background, 40%), 20%) !default; |
|||
$alert-danger-color: $global-danger-background !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Alert |
|||
========================================================================== */ |
|||
|
|||
.uk-alert { |
|||
position: relative; |
|||
margin-bottom: $alert-margin-vertical; |
|||
padding: $alert-padding $alert-padding-right $alert-padding $alert-padding; |
|||
background: $alert-background; |
|||
color: $alert-color; |
|||
@if(mixin-exists(hook-alert)) {@include hook-alert();} |
|||
} |
|||
|
|||
/* Add margin if adjacent element */ |
|||
* + .uk-alert { margin-top: $alert-margin-vertical; } |
|||
|
|||
/* |
|||
* Remove margin from the last-child |
|||
*/ |
|||
|
|||
.uk-alert > :last-child { margin-bottom: 0; } |
|||
|
|||
|
|||
/* Close |
|||
* Adopts `uk-close` |
|||
========================================================================== */ |
|||
|
|||
.uk-alert-close { |
|||
position: absolute; |
|||
top: $alert-close-top; |
|||
right: $alert-close-right; |
|||
@if(mixin-exists(hook-alert-close)) {@include hook-alert-close();} |
|||
} |
|||
|
|||
/* |
|||
* Remove margin from adjacent element |
|||
*/ |
|||
|
|||
.uk-alert-close:first-child + * { margin-top: 0; } |
|||
|
|||
/* |
|||
* Hover + Focus |
|||
*/ |
|||
|
|||
.uk-alert-close:hover, |
|||
.uk-alert-close:focus { |
|||
@if(mixin-exists(hook-alert-close-hover)) {@include hook-alert-close-hover();} |
|||
} |
|||
|
|||
|
|||
/* Style modifiers |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Primary |
|||
*/ |
|||
|
|||
.uk-alert-primary { |
|||
background: $alert-primary-background; |
|||
color: $alert-primary-color; |
|||
@if(mixin-exists(hook-alert-primary)) {@include hook-alert-primary();} |
|||
} |
|||
|
|||
/* |
|||
* Success |
|||
*/ |
|||
|
|||
.uk-alert-success { |
|||
background: $alert-success-background; |
|||
color: $alert-success-color; |
|||
@if(mixin-exists(hook-alert-success)) {@include hook-alert-success();} |
|||
} |
|||
|
|||
/* |
|||
* Warning |
|||
*/ |
|||
|
|||
.uk-alert-warning { |
|||
background: $alert-warning-background; |
|||
color: $alert-warning-color; |
|||
@if(mixin-exists(hook-alert-warning)) {@include hook-alert-warning();} |
|||
} |
|||
|
|||
/* |
|||
* Danger |
|||
*/ |
|||
|
|||
.uk-alert-danger { |
|||
background: $alert-danger-background; |
|||
color: $alert-danger-color; |
|||
@if(mixin-exists(hook-alert-danger)) {@include hook-alert-danger();} |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-alert-misc)) {@include hook-alert-misc();} |
|||
|
|||
// @mixin hook-alert(){} |
|||
// @mixin hook-alert-close(){} |
|||
// @mixin hook-alert-close-hover(){} |
|||
// @mixin hook-alert-primary(){} |
|||
// @mixin hook-alert-success(){} |
|||
// @mixin hook-alert-warning(){} |
|||
// @mixin hook-alert-danger(){} |
|||
// @mixin hook-alert-misc(){} |
|||
@ -0,0 +1,142 @@ |
|||
// Name: Align |
|||
// Description: Utilities to align embedded content |
|||
// |
|||
// Component: `uk-align-left-*` |
|||
// `uk-align-right-*` |
|||
// `uk-align-center` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$align-margin-horizontal: $global-gutter !default; |
|||
$align-margin-vertical: $global-gutter !default; |
|||
|
|||
$align-margin-horizontal-l: $global-medium-gutter !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Align |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Default |
|||
*/ |
|||
|
|||
[class*='uk-align'] { |
|||
display: block; |
|||
margin-bottom: $align-margin-vertical; |
|||
} |
|||
|
|||
* + [class*='uk-align'] { margin-top: $align-margin-vertical; } |
|||
|
|||
/* |
|||
* Center |
|||
*/ |
|||
|
|||
.uk-align-center { |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
} |
|||
|
|||
/* |
|||
* Left/Right |
|||
*/ |
|||
|
|||
.uk-align-left { |
|||
margin-top: 0; |
|||
margin-right: $align-margin-horizontal; |
|||
float: left; |
|||
} |
|||
|
|||
.uk-align-right { |
|||
margin-top: 0; |
|||
margin-left: $align-margin-horizontal; |
|||
float: right; |
|||
} |
|||
|
|||
/* Phone landscape and bigger */ |
|||
@media (min-width: $breakpoint-small) { |
|||
|
|||
.uk-align-left\@s { |
|||
margin-top: 0; |
|||
margin-right: $align-margin-horizontal; |
|||
float: left; |
|||
} |
|||
|
|||
.uk-align-right\@s { |
|||
margin-top: 0; |
|||
margin-left: $align-margin-horizontal; |
|||
float: right; |
|||
} |
|||
|
|||
} |
|||
|
|||
/* Tablet landscape and bigger */ |
|||
@media (min-width: $breakpoint-medium) { |
|||
|
|||
.uk-align-left\@m { |
|||
margin-top: 0; |
|||
margin-right: $align-margin-horizontal; |
|||
float: left; |
|||
} |
|||
|
|||
.uk-align-right\@m { |
|||
margin-top: 0; |
|||
margin-left: $align-margin-horizontal; |
|||
float: right; |
|||
} |
|||
|
|||
} |
|||
|
|||
/* Desktop and bigger */ |
|||
@media (min-width: $breakpoint-large) { |
|||
|
|||
.uk-align-left\@l { |
|||
margin-top: 0; |
|||
float: left; |
|||
} |
|||
|
|||
.uk-align-right\@l { |
|||
margin-top: 0; |
|||
float: right; |
|||
} |
|||
|
|||
.uk-align-left, |
|||
.uk-align-left\@s, |
|||
.uk-align-left\@m, |
|||
.uk-align-left\@l { margin-right: $align-margin-horizontal-l; } |
|||
|
|||
.uk-align-right, |
|||
.uk-align-right\@s, |
|||
.uk-align-right\@m, |
|||
.uk-align-right\@l { margin-left: $align-margin-horizontal-l; } |
|||
|
|||
} |
|||
|
|||
/* Large screen and bigger */ |
|||
@media (min-width: $breakpoint-xlarge) { |
|||
|
|||
.uk-align-left\@xl { |
|||
margin-top: 0; |
|||
margin-right: $align-margin-horizontal-l; |
|||
float: left; |
|||
} |
|||
|
|||
.uk-align-right\@xl { |
|||
margin-top: 0; |
|||
margin-left: $align-margin-horizontal-l; |
|||
float: right; |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-align-misc)) {@include hook-align-misc();} |
|||
|
|||
// @mixin hook-align-misc(){} |
|||
@ -0,0 +1,390 @@ |
|||
// Name: Animation |
|||
// Description: Utilities for keyframe animations |
|||
// |
|||
// Component: `uk-animation-*` |
|||
// |
|||
// Modifiers: `uk-animation-reverse` |
|||
// `uk-animation-fast` |
|||
// `uk-animation-fade` |
|||
// `uk-animation-scale-up` |
|||
// `uk-animation-scale-down` |
|||
// `uk-animation-slide-top-*` |
|||
// `uk-animation-slide-bottom-*` |
|||
// `uk-animation-slide-left-*` |
|||
// `uk-animation-slide-right-*` |
|||
// `uk-animation-kenburns` |
|||
// `uk-animation-shake` |
|||
// |
|||
// Sub-objects: `uk-animation-toggle` |
|||
// |
|||
// States: `uk-hover` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$animation-duration: 0.5s !default; |
|||
$animation-fade-duration: 0.8s !default; |
|||
$animation-kenburns-duration: 15s !default; |
|||
$animation-fast-duration: 0.1s !default; |
|||
|
|||
$animation-slide-small-translate: 10px !default; |
|||
$animation-slide-medium-translate: 50px !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Animation |
|||
========================================================================== */ |
|||
|
|||
[class*='uk-animation-'] { |
|||
animation-duration: $animation-duration; |
|||
animation-timing-function: ease-out; |
|||
animation-fill-mode: both; |
|||
} |
|||
|
|||
|
|||
/* Direction modifier |
|||
========================================================================== */ |
|||
|
|||
.uk-animation-reverse { |
|||
animation-direction: reverse; |
|||
animation-timing-function: ease-in; |
|||
} |
|||
|
|||
|
|||
/* Animations for scrollspy |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Fade |
|||
*/ |
|||
|
|||
.uk-animation-fade { |
|||
animation-name: uk-fade; |
|||
animation-duration: $animation-fade-duration; |
|||
animation-timing-function: linear; |
|||
} |
|||
|
|||
/* |
|||
* Scale |
|||
*/ |
|||
|
|||
.uk-animation-scale-up { animation-name: uk-fade-scale-02; } |
|||
.uk-animation-scale-down { animation-name: uk-fade-scale-18; } |
|||
|
|||
/* |
|||
* Slide |
|||
*/ |
|||
|
|||
.uk-animation-slide-top { animation-name: uk-fade-top; } |
|||
.uk-animation-slide-bottom { animation-name: uk-fade-bottom; } |
|||
.uk-animation-slide-left { animation-name: uk-fade-left; } |
|||
.uk-animation-slide-right { animation-name: uk-fade-right; } |
|||
|
|||
/* |
|||
* Slide Small |
|||
*/ |
|||
|
|||
.uk-animation-slide-top-small { animation-name: uk-fade-top-small; } |
|||
.uk-animation-slide-bottom-small { animation-name: uk-fade-bottom-small; } |
|||
.uk-animation-slide-left-small { animation-name: uk-fade-left-small; } |
|||
.uk-animation-slide-right-small { animation-name: uk-fade-right-small; } |
|||
|
|||
/* |
|||
* Slide Medium |
|||
*/ |
|||
|
|||
.uk-animation-slide-top-medium { animation-name: uk-fade-top-medium; } |
|||
.uk-animation-slide-bottom-medium { animation-name: uk-fade-bottom-medium; } |
|||
.uk-animation-slide-left-medium { animation-name: uk-fade-left-medium; } |
|||
.uk-animation-slide-right-medium { animation-name: uk-fade-right-medium; } |
|||
|
|||
/* |
|||
* Kenburns |
|||
*/ |
|||
|
|||
.uk-animation-kenburns { |
|||
animation-name: uk-scale-kenburns; |
|||
animation-duration: $animation-kenburns-duration; |
|||
} |
|||
|
|||
/* |
|||
* Shake |
|||
*/ |
|||
|
|||
.uk-animation-shake { animation-name: uk-shake; } |
|||
|
|||
|
|||
/* Duration modifier |
|||
========================================================================== */ |
|||
|
|||
.uk-animation-fast { animation-duration: $animation-fast-duration; } |
|||
|
|||
|
|||
/* Enable animation only on hover |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Note: Firefox and IE needs this because animations are not triggered when switching between display `none` and `block` |
|||
*/ |
|||
|
|||
.uk-animation-toggle:not(:hover):not(.uk-hover) [class*='uk-animation-'] { animation-name: none; } |
|||
|
|||
|
|||
/* Keyframes used by animation classes |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Fade |
|||
*/ |
|||
|
|||
@keyframes uk-fade { |
|||
0% { opacity: 0; } |
|||
100% { opacity: 1; } |
|||
} |
|||
|
|||
/* |
|||
* Slide Top |
|||
*/ |
|||
|
|||
@keyframes uk-fade-top { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateY(-100%); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
/* |
|||
* Slide Bottom |
|||
*/ |
|||
|
|||
@keyframes uk-fade-bottom { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateY(100%); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
/* |
|||
* Slide Left |
|||
*/ |
|||
|
|||
@keyframes uk-fade-left { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateX(-100%); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: translateX(0); |
|||
} |
|||
} |
|||
|
|||
/* |
|||
* Slide Right |
|||
*/ |
|||
|
|||
@keyframes uk-fade-right { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateX(100%); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: translateX(0); |
|||
} |
|||
} |
|||
|
|||
/* |
|||
* Slide Top Small |
|||
*/ |
|||
|
|||
@keyframes uk-fade-top-small { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateY(-$animation-slide-small-translate); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
/* |
|||
* Slide Bottom Small |
|||
*/ |
|||
|
|||
@keyframes uk-fade-bottom-small { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateY($animation-slide-small-translate); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
/* |
|||
* Slide Left Small |
|||
*/ |
|||
|
|||
@keyframes uk-fade-left-small { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateX(-$animation-slide-small-translate); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: translateX(0); |
|||
} |
|||
} |
|||
|
|||
/* |
|||
* Slide Right Small |
|||
*/ |
|||
|
|||
@keyframes uk-fade-right-small { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateX($animation-slide-small-translate); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: translateX(0); |
|||
} |
|||
} |
|||
|
|||
/* |
|||
* Slide Top Medium |
|||
*/ |
|||
|
|||
@keyframes uk-fade-top-medium { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateY(-$animation-slide-medium-translate); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
/* |
|||
* Slide Bottom Medium |
|||
*/ |
|||
|
|||
@keyframes uk-fade-bottom-medium { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateY($animation-slide-medium-translate); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
/* |
|||
* Slide Left Medium |
|||
*/ |
|||
|
|||
@keyframes uk-fade-left-medium { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateX(-$animation-slide-medium-translate); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: translateX(0); |
|||
} |
|||
} |
|||
|
|||
/* |
|||
* Slide Right Medium |
|||
*/ |
|||
|
|||
@keyframes uk-fade-right-medium { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateX($animation-slide-medium-translate); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: translateX(0); |
|||
} |
|||
} |
|||
|
|||
/* |
|||
* Scale Up |
|||
*/ |
|||
|
|||
@keyframes uk-fade-scale-02 { |
|||
0% { |
|||
opacity: 0; |
|||
transform: scale(0.2); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: scale(1); |
|||
} |
|||
} |
|||
|
|||
/* |
|||
* Scale Down |
|||
*/ |
|||
|
|||
@keyframes uk-fade-scale-18 { |
|||
0% { |
|||
opacity: 0; |
|||
transform: scale(1.8); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: scale(1); |
|||
} |
|||
} |
|||
|
|||
/* |
|||
* Kenburns |
|||
*/ |
|||
|
|||
@keyframes uk-scale-kenburns { |
|||
0% { transform: scale(1); } |
|||
100% { transform: scale(1.2); } |
|||
} |
|||
|
|||
/* |
|||
* Shake |
|||
*/ |
|||
|
|||
@keyframes uk-shake { |
|||
0%, 100% { transform: translateX(0); } |
|||
10% { transform: translateX(-9px); } |
|||
20% { transform: translateX(8px); } |
|||
30% { transform: translateX(-7px); } |
|||
40% { transform: translateX(6px); } |
|||
50% { transform: translateX(-5px); } |
|||
60% { transform: translateX(4px); } |
|||
70% { transform: translateX(-3px); } |
|||
80% { transform: translateX(2px); } |
|||
90% { transform: translateX(-1px); } |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-animation-misc)) {@include hook-animation-misc();} |
|||
|
|||
// @mixin hook-animation-misc(){} |
|||
@ -0,0 +1,102 @@ |
|||
// Name: Article |
|||
// Description: Component to create articles |
|||
// |
|||
// Component: `uk-article` |
|||
// |
|||
// Sub-objects: `uk-article-title` |
|||
// `uk-article-meta` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$article-margin-top: $global-large-margin !default; |
|||
|
|||
$article-title-font-size: $global-xxlarge-font-size !default; |
|||
$article-title-line-height: 1.2 !default; |
|||
|
|||
$article-meta-font-size: $global-small-font-size !default; |
|||
$article-meta-line-height: 1.4 !default; |
|||
$article-meta-color: $global-muted-color !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Article |
|||
========================================================================== */ |
|||
|
|||
.uk-article { |
|||
@if(mixin-exists(hook-article)) {@include hook-article();} |
|||
} |
|||
|
|||
/* |
|||
* Micro clearfix |
|||
*/ |
|||
|
|||
.uk-article::before, |
|||
.uk-article::after { |
|||
content: ""; |
|||
display: table; |
|||
} |
|||
|
|||
.uk-article::after { clear: both; } |
|||
|
|||
/* |
|||
* Remove margin from the last-child |
|||
*/ |
|||
|
|||
.uk-article > :last-child { margin-bottom: 0; } |
|||
|
|||
|
|||
/* Adjacent sibling |
|||
========================================================================== */ |
|||
|
|||
.uk-article + .uk-article { |
|||
margin-top: $article-margin-top; |
|||
@if(mixin-exists(hook-article-adjacent)) {@include hook-article-adjacent();} |
|||
} |
|||
|
|||
|
|||
/* Title |
|||
========================================================================== */ |
|||
|
|||
.uk-article-title { |
|||
font-size: $article-title-font-size; |
|||
line-height: $article-title-line-height; |
|||
@if(mixin-exists(hook-article-title)) {@include hook-article-title();} |
|||
} |
|||
|
|||
|
|||
/* Meta |
|||
========================================================================== */ |
|||
|
|||
.uk-article-meta { |
|||
font-size: $article-meta-font-size; |
|||
line-height: $article-meta-line-height; |
|||
color: $article-meta-color; |
|||
@if(mixin-exists(hook-article-meta)) {@include hook-article-meta();} |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-article-misc)) {@include hook-article-misc();} |
|||
|
|||
// @mixin hook-article(){} |
|||
// @mixin hook-article-adjacent(){} |
|||
// @mixin hook-article-title(){} |
|||
// @mixin hook-article-meta(){} |
|||
// @mixin hook-article-misc(){} |
|||
|
|||
|
|||
// Inverse |
|||
// ======================================================================== |
|||
|
|||
$inverse-article-meta-color: $inverse-global-muted-color !default; |
|||
|
|||
|
|||
|
|||
// @mixin hook-inverse-article-title(){} |
|||
// @mixin hook-inverse-article-meta(){} |
|||
@ -0,0 +1,136 @@ |
|||
// Name: Background |
|||
// Description: Utilities for backgrounds |
|||
// |
|||
// Component: `uk-background-*` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$background-default-background: $global-background !default; |
|||
$background-muted-background: $global-muted-background !default; |
|||
$background-primary-background: $global-primary-background !default; |
|||
$background-secondary-background: $global-secondary-background !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Background |
|||
========================================================================== */ |
|||
|
|||
|
|||
/* Color |
|||
========================================================================== */ |
|||
|
|||
.uk-background-default { background-color: $background-default-background; } |
|||
.uk-background-muted { background-color: $background-muted-background; } |
|||
.uk-background-primary { background-color: $background-primary-background; } |
|||
.uk-background-secondary { background-color: $background-secondary-background; } |
|||
|
|||
|
|||
/* Size |
|||
========================================================================== */ |
|||
|
|||
.uk-background-cover, |
|||
.uk-background-contain { |
|||
background-position: 50% 50%; |
|||
background-repeat: no-repeat; |
|||
} |
|||
|
|||
.uk-background-cover { background-size: cover; } |
|||
.uk-background-contain { background-size: contain; } |
|||
|
|||
|
|||
/* Position |
|||
========================================================================== */ |
|||
|
|||
.uk-background-top-left { background-position: 0 0; } |
|||
.uk-background-top-center { background-position: 50% 0; } |
|||
.uk-background-top-right { background-position: 100% 0; } |
|||
.uk-background-center-left { background-position: 0 50%; } |
|||
.uk-background-center-center { background-position: 50% 50%; } |
|||
.uk-background-center-right { background-position: 100% 50%; } |
|||
.uk-background-bottom-left { background-position: 0 100%; } |
|||
.uk-background-bottom-center { background-position: 50% 100%; } |
|||
.uk-background-bottom-right { background-position: 100% 100%; } |
|||
|
|||
|
|||
/* Repeat |
|||
========================================================================== */ |
|||
|
|||
.uk-background-norepeat { background-repeat: no-repeat; } |
|||
|
|||
|
|||
/* Attachment |
|||
========================================================================== */ |
|||
|
|||
.uk-background-fixed { background-attachment: fixed; } |
|||
|
|||
/* |
|||
* Exclude touch devices because `fixed` doesn't work on iOS and Android |
|||
*/ |
|||
|
|||
@media (pointer: coarse) { |
|||
.uk-background-fixed { background-attachment: scroll; } |
|||
} |
|||
|
|||
|
|||
/* Image |
|||
========================================================================== */ |
|||
|
|||
/* Phone portrait and smaller */ |
|||
@media (max-width: $breakpoint-xsmall-max) { |
|||
|
|||
.uk-background-image\@s { background-image: none !important; } |
|||
|
|||
} |
|||
|
|||
/* Phone landscape and smaller */ |
|||
@media (max-width: $breakpoint-small-max) { |
|||
|
|||
.uk-background-image\@m { background-image: none !important; } |
|||
|
|||
} |
|||
|
|||
/* Tablet landscape and smaller */ |
|||
@media (max-width: $breakpoint-medium-max) { |
|||
|
|||
.uk-background-image\@l { background-image: none !important; } |
|||
|
|||
} |
|||
|
|||
/* Desktop and smaller */ |
|||
@media (max-width: $breakpoint-large-max) { |
|||
|
|||
.uk-background-image\@xl {background-image: none !important; } |
|||
|
|||
} |
|||
|
|||
|
|||
/* Blend modes |
|||
========================================================================== */ |
|||
|
|||
.uk-background-blend-multiply { background-blend-mode: multiply; } |
|||
.uk-background-blend-screen { background-blend-mode: screen; } |
|||
.uk-background-blend-overlay { background-blend-mode: overlay; } |
|||
.uk-background-blend-darken { background-blend-mode: darken; } |
|||
.uk-background-blend-lighten { background-blend-mode: lighten; } |
|||
.uk-background-blend-color-dodge { background-blend-mode: color-dodge; } |
|||
.uk-background-blend-color-burn { background-blend-mode: color-burn; } |
|||
.uk-background-blend-hard-light { background-blend-mode: hard-light; } |
|||
.uk-background-blend-soft-light { background-blend-mode: soft-light; } |
|||
.uk-background-blend-difference { background-blend-mode: difference; } |
|||
.uk-background-blend-exclusion { background-blend-mode: exclusion; } |
|||
.uk-background-blend-hue { background-blend-mode: hue; } |
|||
.uk-background-blend-saturation { background-blend-mode: saturation; } |
|||
.uk-background-blend-color { background-blend-mode: color; } |
|||
.uk-background-blend-luminosity { background-blend-mode: luminosity; } |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-background-misc)) {@include hook-background-misc();} |
|||
|
|||
// @mixin hook-background-misc(){} |
|||
@ -0,0 +1,83 @@ |
|||
// Name: Badge |
|||
// Description: Component to create notification badges |
|||
|
|||
// Component: `uk-badge` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$badge-size: 22px !default; |
|||
$badge-padding-vertical: 0 !default; |
|||
$badge-padding-horizontal: 5px !default; |
|||
$badge-border-radius: 500px !default; |
|||
$badge-background: $global-primary-background !default; |
|||
$badge-color: $global-inverse-color !default; |
|||
$badge-font-size: $global-small-font-size !default; |
|||
|
|||
$badge-hover-color: $global-inverse-color !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Badge |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Style |
|||
* 2. Center child vertically and horizontally |
|||
*/ |
|||
|
|||
.uk-badge { |
|||
box-sizing: border-box; |
|||
min-width: $badge-size; |
|||
height: $badge-size; |
|||
padding: $badge-padding-vertical $badge-padding-horizontal; |
|||
border-radius: $badge-border-radius; |
|||
vertical-align: middle; |
|||
/* 1 */ |
|||
background: $badge-background; |
|||
color: $badge-color; |
|||
font-size: $badge-font-size; |
|||
/* 2 */ |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
@if(mixin-exists(hook-badge)) {@include hook-badge();} |
|||
} |
|||
|
|||
/* |
|||
* Required for `a` |
|||
*/ |
|||
|
|||
.uk-badge:hover, |
|||
.uk-badge:focus { |
|||
color: $badge-hover-color; |
|||
text-decoration: none; |
|||
outline: none; |
|||
@if(mixin-exists(hook-badge-hover)) {@include hook-badge-hover();} |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-badge-misc)) {@include hook-badge-misc();} |
|||
|
|||
// @mixin hook-badge(){} |
|||
// @mixin hook-badge-hover(){} |
|||
// @mixin hook-badge-misc(){} |
|||
|
|||
|
|||
// Inverse |
|||
// ======================================================================== |
|||
|
|||
$inverse-badge-background: $inverse-global-primary-background !default; |
|||
$inverse-badge-color: $inverse-global-inverse-color !default; |
|||
$inverse-badge-hover-color: $inverse-global-inverse-color !default; |
|||
|
|||
|
|||
|
|||
// @mixin hook-inverse-badge(){} |
|||
// @mixin hook-inverse-badge-hover(){} |
|||
@ -0,0 +1,612 @@ |
|||
// Name: Base |
|||
// Description: Default values for HTML elements |
|||
// |
|||
// Component: `uk-link` |
|||
// `uk-h1`, `uk-h2`, `uk-h3`, `uk-h4`, `uk-h5`, `uk-h6` |
|||
// `uk-hr` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$base-body-background: $global-background !default; |
|||
$base-body-font-family: $global-font-family !default; |
|||
$base-body-font-weight: normal !default; |
|||
$base-body-font-size: $global-font-size !default; |
|||
$base-body-line-height: $global-line-height !default; |
|||
$base-body-color: $global-color !default; |
|||
|
|||
$base-link-color: $global-link-color !default; |
|||
$base-link-text-decoration: none !default; |
|||
$base-link-hover-color: $global-link-hover-color !default; |
|||
$base-link-hover-text-decoration: underline !default; |
|||
|
|||
$base-strong-font-weight: bolder !default; |
|||
$base-code-font-size: $global-small-font-size !default; |
|||
$base-code-font-family: Consolas, monaco, monospace !default; |
|||
$base-code-color: $global-danger-background !default; |
|||
$base-em-color: $global-danger-background !default; |
|||
$base-ins-background: #ffd !default; |
|||
$base-ins-color: $global-color !default; |
|||
$base-mark-background: #ffd !default; |
|||
$base-mark-color: $global-color !default; |
|||
$base-quote-font-style: italic !default; |
|||
$base-small-font-size: 80% !default; |
|||
|
|||
$base-margin-vertical: $global-margin !default; |
|||
|
|||
$base-heading-font-family: $global-font-family !default; |
|||
$base-heading-font-weight: normal !default; |
|||
$base-heading-color: $global-emphasis-color !default; |
|||
$base-heading-text-transform: none !default; |
|||
$base-heading-margin-top: $global-medium-margin !default; |
|||
$base-h1-font-size: $global-xxlarge-font-size !default; |
|||
$base-h1-line-height: 1.2 !default; |
|||
$base-h2-font-size: $global-xlarge-font-size !default; |
|||
$base-h2-line-height: 1.3 !default; |
|||
$base-h3-font-size: $global-large-font-size !default; |
|||
$base-h3-line-height: 1.4 !default; |
|||
$base-h4-font-size: $global-medium-font-size !default; |
|||
$base-h4-line-height: 1.4 !default; |
|||
$base-h5-font-size: $global-font-size !default; |
|||
$base-h5-line-height: 1.4 !default; |
|||
$base-h6-font-size: $global-small-font-size !default; |
|||
$base-h6-line-height: 1.4 !default; |
|||
|
|||
$base-list-padding-left: 30px !default; |
|||
|
|||
$base-hr-margin-vertical: $global-margin !default; |
|||
$base-hr-border-width: $global-border-width !default; |
|||
$base-hr-border: $global-border !default; |
|||
|
|||
$base-blockquote-font-size: $global-medium-font-size !default; |
|||
$base-blockquote-line-height: 1.5 !default; |
|||
$base-blockquote-font-style: italic !default; |
|||
$base-blockquote-margin-vertical: $global-margin !default; |
|||
$base-blockquote-footer-margin-top: $global-small-margin !default; |
|||
$base-blockquote-footer-font-size: $global-small-font-size !default; |
|||
$base-blockquote-footer-line-height: 1.5 !default; |
|||
|
|||
$base-pre-font-size: $global-small-font-size !default; |
|||
$base-pre-line-height: 1.5 !default; |
|||
$base-pre-font-family: $base-code-font-family !default; |
|||
$base-pre-color: $global-color !default; |
|||
|
|||
$base-selection-background: #39f !default; |
|||
$base-selection-color: $global-inverse-color !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Base |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Set `font-size` to support `rem` units |
|||
* Not using `font` property because a leading hyphen (e.g. -apple-system) causes the font to break in IE11 and Edge |
|||
* 2. Prevent adjustments of font size after orientation changes in iOS. |
|||
* 3. Style |
|||
*/ |
|||
|
|||
html { |
|||
/* 1 */ |
|||
font-family: $base-body-font-family; |
|||
font-size: $base-body-font-size; |
|||
font-weight: $base-body-font-weight; |
|||
line-height: $base-body-line-height; |
|||
/* 2 */ |
|||
-webkit-text-size-adjust: 100%; |
|||
/* 3 */ |
|||
background: $base-body-background; |
|||
color: $base-body-color; |
|||
@if(mixin-exists(hook-base-body)) {@include hook-base-body();} |
|||
} |
|||
|
|||
/* |
|||
* Remove the margin in all browsers. |
|||
*/ |
|||
|
|||
body { margin: 0; } |
|||
|
|||
|
|||
/* Links |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Remove gaps in links underline in iOS 8+ and Safari 8+. |
|||
*/ |
|||
|
|||
a { -webkit-text-decoration-skip: objects; } |
|||
|
|||
/* |
|||
* Remove the outline on focused links when they are also active or hovered |
|||
*/ |
|||
|
|||
a:active, |
|||
a:hover { outline: none; } |
|||
|
|||
/* |
|||
* Style |
|||
*/ |
|||
|
|||
a, |
|||
.uk-link { |
|||
color: $base-link-color; |
|||
text-decoration: $base-link-text-decoration; |
|||
cursor: pointer; |
|||
@if(mixin-exists(hook-base-link)) {@include hook-base-link();} |
|||
} |
|||
|
|||
a:hover, |
|||
.uk-link:hover { |
|||
color: $base-link-hover-color; |
|||
text-decoration: $base-link-hover-text-decoration; |
|||
@if(mixin-exists(hook-base-link-hover)) {@include hook-base-link-hover();} |
|||
} |
|||
|
|||
|
|||
/* Text-level semantics |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Remove the bottom border in Chrome 57-. |
|||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. |
|||
*/ |
|||
|
|||
abbr[title] { |
|||
/* 1 */ |
|||
border-bottom: none; |
|||
/* 2 */ |
|||
text-decoration: underline; |
|||
text-decoration: underline dotted; |
|||
} |
|||
|
|||
|
|||
/* |
|||
* Add the correct font weight in Chrome, Edge, and Safari. |
|||
*/ |
|||
|
|||
b, |
|||
strong { font-weight: $base-strong-font-weight; } |
|||
|
|||
/* |
|||
* 1. Consolas has a better baseline in running text compared to `Courier` |
|||
* 2. Correct the odd `em` font sizing in all browsers. |
|||
* 3. Style |
|||
*/ |
|||
|
|||
:not(pre) > code, |
|||
:not(pre) > kbd, |
|||
:not(pre) > samp { |
|||
/* 1 */ |
|||
font-family: $base-code-font-family; |
|||
/* 2 */ |
|||
font-size: $base-code-font-size; |
|||
/* 3 */ |
|||
color: $base-code-color; |
|||
white-space: nowrap; |
|||
@if(mixin-exists(hook-base-code)) {@include hook-base-code();} |
|||
} |
|||
|
|||
/* |
|||
* Emphasize |
|||
*/ |
|||
|
|||
em { color: $base-em-color; } |
|||
|
|||
/* |
|||
* Insert |
|||
*/ |
|||
|
|||
ins { |
|||
background: $base-ins-background; |
|||
color: $base-ins-color; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
/* |
|||
* Mark |
|||
*/ |
|||
|
|||
mark { |
|||
background: $base-mark-background; |
|||
color: $base-mark-color; |
|||
} |
|||
|
|||
/* |
|||
* Quote |
|||
*/ |
|||
|
|||
q { font-style: $base-quote-font-style; } |
|||
|
|||
/* |
|||
* Add the correct font size in all browsers. |
|||
*/ |
|||
|
|||
small { font-size: $base-small-font-size; } |
|||
|
|||
/* |
|||
* Prevents `sub` and `sup` affecting `line-height` in all browsers. |
|||
*/ |
|||
|
|||
sub, |
|||
sup { |
|||
font-size: 75%; |
|||
line-height: 0; |
|||
position: relative; |
|||
vertical-align: baseline; |
|||
} |
|||
|
|||
sup { top: -0.5em; } |
|||
sub { bottom: -0.25em; } |
|||
|
|||
|
|||
/* Embedded content |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Remove the gap between embedded content and the bottom of their containers. |
|||
*/ |
|||
|
|||
audio, |
|||
canvas, |
|||
iframe, |
|||
img, |
|||
svg, |
|||
video { vertical-align: middle; } |
|||
|
|||
/* |
|||
* Responsiveness |
|||
* 1. Set a maximum width |
|||
* 2. Auto scale the height. Only needed if `height` attribute is present |
|||
* 2. Corrects `max-width` behavior if padding and border are used |
|||
*/ |
|||
|
|||
audio, |
|||
canvas, |
|||
img, |
|||
video { |
|||
/* 1 */ |
|||
max-width: 100%; |
|||
/* 2 */ |
|||
height: auto; |
|||
/* 3 */ |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
/* |
|||
* Hide the overflow in IE. |
|||
*/ |
|||
|
|||
svg:not(:root) { overflow: hidden; } |
|||
|
|||
|
|||
/* Block elements |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Margins |
|||
*/ |
|||
|
|||
p, |
|||
ul, |
|||
ol, |
|||
dl, |
|||
pre, |
|||
address, |
|||
fieldset, |
|||
figure { margin: 0 0 $base-margin-vertical 0; } |
|||
|
|||
/* Add margin if adjacent element */ |
|||
* + p, |
|||
* + ul, |
|||
* + ol, |
|||
* + dl, |
|||
* + pre, |
|||
* + address, |
|||
* + fieldset, |
|||
* + figure { margin-top: $base-margin-vertical; } |
|||
|
|||
|
|||
/* Headings |
|||
========================================================================== */ |
|||
|
|||
h1, .uk-h1, |
|||
h2, .uk-h2, |
|||
h3, .uk-h3, |
|||
h4, .uk-h4, |
|||
h5, .uk-h5, |
|||
h6, .uk-h6 { |
|||
margin: 0 0 $base-margin-vertical 0; |
|||
font-family: $base-heading-font-family; |
|||
font-weight: $base-heading-font-weight; |
|||
color: $base-heading-color; |
|||
text-transform: $base-heading-text-transform; |
|||
@if(mixin-exists(hook-base-heading)) {@include hook-base-heading();} |
|||
} |
|||
|
|||
/* Add margin if adjacent element */ |
|||
* + h1, * + .uk-h1, |
|||
* + h2, * + .uk-h2, |
|||
* + h3, * + .uk-h3, |
|||
* + h4, * + .uk-h4, |
|||
* + h5, * + .uk-h5, |
|||
* + h6, * + .uk-h6 { margin-top: $base-heading-margin-top; } |
|||
|
|||
/* |
|||
* Sizes |
|||
*/ |
|||
|
|||
h1, .uk-h1 { |
|||
font-size: $base-h1-font-size; |
|||
line-height: $base-h1-line-height; |
|||
@if(mixin-exists(hook-base-h1)) {@include hook-base-h1();} |
|||
} |
|||
|
|||
h2, .uk-h2 { |
|||
font-size: $base-h2-font-size; |
|||
line-height: $base-h2-line-height; |
|||
@if(mixin-exists(hook-base-h2)) {@include hook-base-h2();} |
|||
} |
|||
|
|||
h3, .uk-h3 { |
|||
font-size: $base-h3-font-size; |
|||
line-height: $base-h3-line-height; |
|||
@if(mixin-exists(hook-base-h3)) {@include hook-base-h3();} |
|||
} |
|||
|
|||
h4, .uk-h4 { |
|||
font-size: $base-h4-font-size; |
|||
line-height: $base-h4-line-height; |
|||
@if(mixin-exists(hook-base-h4)) {@include hook-base-h4();} |
|||
} |
|||
|
|||
h5, .uk-h5 { |
|||
font-size: $base-h5-font-size; |
|||
line-height: $base-h5-line-height; |
|||
@if(mixin-exists(hook-base-h5)) {@include hook-base-h5();} |
|||
} |
|||
|
|||
h6, .uk-h6 { |
|||
font-size: $base-h6-font-size; |
|||
line-height: $base-h6-line-height; |
|||
@if(mixin-exists(hook-base-h6)) {@include hook-base-h6();} |
|||
} |
|||
|
|||
|
|||
/* Lists |
|||
========================================================================== */ |
|||
|
|||
ul, |
|||
ol { padding-left: $base-list-padding-left; } |
|||
|
|||
/* |
|||
* Reset margin for nested lists |
|||
*/ |
|||
|
|||
ul > li > ul, |
|||
ul > li > ol, |
|||
ol > li > ol, |
|||
ol > li > ul { margin: 0; } |
|||
|
|||
|
|||
/* Description lists |
|||
========================================================================== */ |
|||
|
|||
dt { font-weight: bold; } |
|||
dd { margin-left: 0; } |
|||
|
|||
|
|||
/* Horizontal rules |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Add the correct box sizing and height in Firefox. |
|||
* 2. Show the overflow in Edge and IE. |
|||
* 3. Add the correct text-align in Edge and IE. |
|||
* 4. Style |
|||
*/ |
|||
|
|||
hr, .uk-hr { |
|||
/* 1 */ |
|||
box-sizing: content-box; |
|||
height: 0; |
|||
/* 2 */ |
|||
overflow: visible; |
|||
/* 3 */ |
|||
text-align: inherit; |
|||
/* 4 */ |
|||
margin: 0 0 $base-hr-margin-vertical 0; |
|||
border: 0; |
|||
border-top: $base-hr-border-width solid $base-hr-border; |
|||
@if(mixin-exists(hook-base-hr)) {@include hook-base-hr();} |
|||
} |
|||
|
|||
/* Add margin if adjacent element */ |
|||
* + hr, |
|||
* + .uk-hr { margin-top: $base-hr-margin-vertical } |
|||
|
|||
|
|||
/* Address |
|||
========================================================================== */ |
|||
|
|||
address { font-style: normal; } |
|||
|
|||
|
|||
/* Blockquotes |
|||
========================================================================== */ |
|||
|
|||
blockquote { |
|||
margin: 0 0 $base-blockquote-margin-vertical 0; |
|||
font-size: $base-blockquote-font-size; |
|||
line-height: $base-blockquote-line-height; |
|||
font-style: $base-blockquote-font-style; |
|||
@if(mixin-exists(hook-base-blockquote)) {@include hook-base-blockquote();} |
|||
} |
|||
|
|||
/* Add margin if adjacent element */ |
|||
* + blockquote { margin-top: $base-blockquote-margin-vertical; } |
|||
|
|||
/* |
|||
* Content |
|||
*/ |
|||
|
|||
blockquote p:last-of-type { margin-bottom: 0; } |
|||
|
|||
blockquote footer { |
|||
margin-top: $base-blockquote-footer-margin-top; |
|||
font-size: $base-blockquote-footer-font-size; |
|||
line-height: $base-blockquote-footer-line-height; |
|||
@if(mixin-exists(hook-base-blockquote-footer)) {@include hook-base-blockquote-footer();} |
|||
} |
|||
|
|||
|
|||
/* Preformatted text |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Contain overflow in all browsers. |
|||
*/ |
|||
|
|||
pre { |
|||
font: $base-pre-font-size unquote("/") $base-pre-line-height $base-pre-font-family; |
|||
color: $base-pre-color; |
|||
-moz-tab-size: 4; |
|||
tab-size: 4; |
|||
/* 1 */ |
|||
overflow: auto; |
|||
@if(mixin-exists(hook-base-pre)) {@include hook-base-pre();} |
|||
} |
|||
|
|||
pre code { font-family: $base-pre-font-family; } |
|||
|
|||
|
|||
/* Selection pseudo-element |
|||
========================================================================== */ |
|||
|
|||
::-moz-selection { |
|||
background: $base-selection-background; |
|||
color: $base-selection-color; |
|||
text-shadow: none; |
|||
} |
|||
|
|||
::selection { |
|||
background: $base-selection-background; |
|||
color: $base-selection-color; |
|||
text-shadow: none; |
|||
} |
|||
|
|||
|
|||
/* HTML5 elements |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Add the correct display in Edge, IE 10+, and Firefox. |
|||
* 2. Add the correct display in IE. |
|||
*/ |
|||
|
|||
details, /* 1 */ |
|||
main { /* 2 */ |
|||
display: block; |
|||
} |
|||
|
|||
/* |
|||
* Add the correct display in all browsers. |
|||
*/ |
|||
|
|||
summary { display: list-item; } |
|||
|
|||
/* |
|||
* Add the correct display in IE. |
|||
*/ |
|||
|
|||
template { display: none; } |
|||
|
|||
|
|||
/* Iframe |
|||
========================================================================== */ |
|||
|
|||
iframe { border: 0; } |
|||
|
|||
|
|||
/* Prevent the 300ms delay for touchscreen interactions |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Most browsers prevent the 300ms delay automatically for sites that use the `width=device-width` property. |
|||
* For Safari on iOS 9.3+, IE 11 and Edge on desktops and IE 11 on Windows Phone 8.1 it must be applied manually. |
|||
*/ |
|||
|
|||
a, |
|||
area, |
|||
button, |
|||
input, |
|||
label, |
|||
select, |
|||
summary, |
|||
textarea { touch-action: manipulation; } |
|||
|
|||
|
|||
/* Pass media breakpoints to JS |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Breakpoints |
|||
*/ |
|||
|
|||
.var-media-s::before { content: '#{$breakpoint-small}'; } |
|||
.var-media-m::before { content: '#{$breakpoint-medium}'; } |
|||
.var-media-l::before { content: '#{$breakpoint-large}'; } |
|||
.var-media-xl::before { content: '#{$breakpoint-xlarge}'; } |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-base-misc)) {@include hook-base-misc();} |
|||
|
|||
// @mixin hook-base-body(){} |
|||
// @mixin hook-base-link(){} |
|||
// @mixin hook-base-link-hover(){} |
|||
// @mixin hook-base-code(){} |
|||
// @mixin hook-base-heading(){} |
|||
// @mixin hook-base-h1(){} |
|||
// @mixin hook-base-h2(){} |
|||
// @mixin hook-base-h3(){} |
|||
// @mixin hook-base-h4(){} |
|||
// @mixin hook-base-h5(){} |
|||
// @mixin hook-base-h6(){} |
|||
// @mixin hook-base-hr(){} |
|||
// @mixin hook-base-blockquote(){} |
|||
// @mixin hook-base-blockquote-footer(){} |
|||
// @mixin hook-base-pre(){} |
|||
// @mixin hook-base-misc(){} |
|||
|
|||
|
|||
// Inverse |
|||
// ======================================================================== |
|||
|
|||
$inverse-base-color: $inverse-global-color !default; |
|||
$inverse-base-link-color: $inverse-global-emphasis-color !default; |
|||
$inverse-base-link-hover-color: $inverse-global-emphasis-color !default; |
|||
$inverse-base-code-color: $inverse-global-color !default; |
|||
$inverse-base-em-color: $inverse-global-emphasis-color !default; |
|||
$inverse-base-heading-color: $inverse-global-emphasis-color !default; |
|||
$inverse-base-hr-border: $inverse-global-border !default; |
|||
|
|||
|
|||
|
|||
// @mixin hook-inverse-base-link(){} |
|||
// @mixin hook-inverse-base-link-hover(){} |
|||
// @mixin hook-inverse-base-code(){} |
|||
// @mixin hook-inverse-base-heading(){} |
|||
// @mixin hook-inverse-base-h1(){} |
|||
// @mixin hook-inverse-base-h2(){} |
|||
// @mixin hook-inverse-base-h3(){} |
|||
// @mixin hook-inverse-base-h4(){} |
|||
// @mixin hook-inverse-base-h5(){} |
|||
// @mixin hook-inverse-base-h6(){} |
|||
// @mixin hook-inverse-base-blockquote(){} |
|||
// @mixin hook-inverse-base-blockquote-footer(){} |
|||
// @mixin hook-inverse-base-hr(){} |
|||
@ -0,0 +1,122 @@ |
|||
// Name: Breadcrumb |
|||
// Description: Component to create a breadcrumb navigation |
|||
// |
|||
// Component: `uk-breadcrumb` |
|||
// |
|||
// States: `uk-disabled` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$breadcrumb-item-font-size: $global-small-font-size !default; |
|||
$breadcrumb-item-color: $global-muted-color !default; |
|||
$breadcrumb-item-hover-color: $global-color !default; |
|||
$breadcrumb-item-hover-text-decoration: none !default; |
|||
$breadcrumb-item-active-color: $global-color !default; |
|||
|
|||
$breadcrumb-divider: "/" !default; |
|||
$breadcrumb-divider-margin-horizontal: 20px !default; |
|||
$breadcrumb-divider-color: $global-muted-color !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Breadcrumb |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Allow items to wrap into the next line |
|||
* 2. Reset list |
|||
*/ |
|||
|
|||
.uk-breadcrumb { |
|||
display: flex; |
|||
/* 1 */ |
|||
flex-wrap: wrap; |
|||
/* 2 */ |
|||
padding: 0; |
|||
list-style: none; |
|||
@if(mixin-exists(hook-breadcrumb)) {@include hook-breadcrumb();} |
|||
} |
|||
|
|||
/* |
|||
* Space is allocated solely based on content dimensions: 0 0 auto |
|||
*/ |
|||
|
|||
.uk-breadcrumb > * { flex: none; } |
|||
|
|||
|
|||
/* Items |
|||
========================================================================== */ |
|||
|
|||
.uk-breadcrumb > * > * { |
|||
display: inline-block; |
|||
font-size: $breadcrumb-item-font-size; |
|||
color: $breadcrumb-item-color; |
|||
@if(mixin-exists(hook-breadcrumb-item)) {@include hook-breadcrumb-item();} |
|||
} |
|||
|
|||
/* Hover + Focus */ |
|||
.uk-breadcrumb > * > :hover, |
|||
.uk-breadcrumb > * > :focus { |
|||
color: $breadcrumb-item-hover-color; |
|||
text-decoration: $breadcrumb-item-hover-text-decoration; |
|||
@if(mixin-exists(hook-breadcrumb-item-hover)) {@include hook-breadcrumb-item-hover();} |
|||
} |
|||
|
|||
/* Disabled */ |
|||
.uk-breadcrumb > .uk-disabled > * { |
|||
@if(mixin-exists(hook-breadcrumb-item-disabled)) {@include hook-breadcrumb-item-disabled();} |
|||
} |
|||
|
|||
/* Active */ |
|||
.uk-breadcrumb > :last-child > * { |
|||
color: $breadcrumb-item-active-color; |
|||
@if(mixin-exists(hook-breadcrumb-item-active)) {@include hook-breadcrumb-item-active();} |
|||
} |
|||
|
|||
/* |
|||
* Divider |
|||
* `nth-child` makes it also work without JS if it's only one row |
|||
*/ |
|||
|
|||
.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before { |
|||
content: $breadcrumb-divider; |
|||
display: inline-block; |
|||
margin: 0 $breadcrumb-divider-margin-horizontal; |
|||
color: $breadcrumb-divider-color; |
|||
@if(mixin-exists(hook-breadcrumb-divider)) {@include hook-breadcrumb-divider();} |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-breadcrumb-misc)) {@include hook-breadcrumb-misc();} |
|||
|
|||
// @mixin hook-breadcrumb(){} |
|||
// @mixin hook-breadcrumb-item(){} |
|||
// @mixin hook-breadcrumb-item-hover(){} |
|||
// @mixin hook-breadcrumb-item-disabled(){} |
|||
// @mixin hook-breadcrumb-item-active(){} |
|||
// @mixin hook-breadcrumb-divider(){} |
|||
// @mixin hook-breadcrumb-misc(){} |
|||
|
|||
|
|||
// Inverse |
|||
// ======================================================================== |
|||
|
|||
$inverse-breadcrumb-item-color: $inverse-global-muted-color !default; |
|||
$inverse-breadcrumb-item-hover-color: $inverse-global-color !default; |
|||
$inverse-breadcrumb-item-active-color: $inverse-global-color !default; |
|||
$inverse-breadcrumb-divider-color: $inverse-global-muted-color !default; |
|||
|
|||
|
|||
|
|||
// @mixin hook-inverse-breadcrumb-item(){} |
|||
// @mixin hook-inverse-breadcrumb-item-hover(){} |
|||
// @mixin hook-inverse-breadcrumb-item-disabled(){} |
|||
// @mixin hook-inverse-breadcrumb-item-active(){} |
|||
// @mixin hook-inverse-breadcrumb-divider(){} |
|||
@ -0,0 +1,451 @@ |
|||
// Name: Button |
|||
// Description: Styles for buttons |
|||
// |
|||
// Component: `uk-button` |
|||
// |
|||
// Sub-objects: `uk-button-group` |
|||
// |
|||
// Modifiers: `uk-button-default` |
|||
// `uk-button-primary` |
|||
// `uk-button-secondary` |
|||
// `uk-button-danger` |
|||
// `uk-button-text` |
|||
// `uk-button-link` |
|||
// `uk-button-small` |
|||
// `uk-button-large` |
|||
// |
|||
// States: `uk-active` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$button-line-height: $global-control-height !default; |
|||
$button-small-line-height: $global-control-small-height !default; |
|||
$button-large-line-height: $global-control-large-height !default; |
|||
|
|||
$button-font-size: $global-font-size !default; |
|||
$button-small-font-size: $global-small-font-size !default; |
|||
$button-large-font-size: $global-medium-font-size !default; |
|||
|
|||
$button-padding-horizontal: $global-gutter !default; |
|||
$button-small-padding-horizontal: $global-small-gutter !default; |
|||
$button-large-padding-horizontal: $global-medium-gutter !default; |
|||
|
|||
$button-default-background: $global-muted-background !default; |
|||
$button-default-color: $global-emphasis-color !default; |
|||
$button-default-hover-background: darken($button-default-background, 5%) !default; |
|||
$button-default-hover-color: $global-emphasis-color !default; |
|||
$button-default-active-background: darken($button-default-background, 10%) !default; |
|||
$button-default-active-color: $global-emphasis-color !default; |
|||
|
|||
$button-primary-background: $global-primary-background !default; |
|||
$button-primary-color: $global-inverse-color !default; |
|||
$button-primary-hover-background: darken($button-primary-background, 5%) !default; |
|||
$button-primary-hover-color: $global-inverse-color !default; |
|||
$button-primary-active-background: darken($button-primary-background, 10%) !default; |
|||
$button-primary-active-color: $global-inverse-color !default; |
|||
|
|||
$button-secondary-background: $global-secondary-background !default; |
|||
$button-secondary-color: $global-inverse-color !default; |
|||
$button-secondary-hover-background: darken($button-secondary-background, 5%) !default; |
|||
$button-secondary-hover-color: $global-inverse-color !default; |
|||
$button-secondary-active-background: darken($button-secondary-background, 10%) !default; |
|||
$button-secondary-active-color: $global-inverse-color !default; |
|||
|
|||
$button-danger-background: $global-danger-background !default; |
|||
$button-danger-color: $global-inverse-color !default; |
|||
$button-danger-hover-background: darken($button-danger-background, 5%) !default; |
|||
$button-danger-hover-color: $global-inverse-color !default; |
|||
$button-danger-active-background: darken($button-danger-background, 10%) !default; |
|||
$button-danger-active-color: $global-inverse-color !default; |
|||
|
|||
$button-disabled-background: $global-muted-background !default; |
|||
$button-disabled-color: $global-muted-color !default; |
|||
|
|||
$button-text-line-height: $global-line-height !default; |
|||
$button-text-color: $global-muted-color !default; |
|||
$button-text-hover-color: $global-color !default; |
|||
$button-text-disabled-color: $global-muted-color !default; |
|||
|
|||
$button-link-line-height: $global-line-height !default; |
|||
$button-link-color: $global-link-color !default; |
|||
$button-link-hover-color: $global-link-hover-color !default; |
|||
$button-link-hover-text-decoration: underline !default; |
|||
$button-link-disabled-color: $global-muted-color !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Button |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Remove margins in Chrome, Safari and Opera. |
|||
* 2. Remove borders for `button`. |
|||
* 3. Remove border-radius in Chrome. |
|||
* 4. Address `overflow` set to `hidden` in IE. |
|||
* 5. Correct `font` properties and `color` not being inherited for `button`. |
|||
* 6. Remove the inheritance of text transform in Edge, Firefox, and IE. |
|||
* 7. Style |
|||
* 8. `line-height` is used to create a height because it also centers the text vertically for `a` elements. |
|||
* Better would be to use height and flexbox to center the text vertically but flexbox doesn't work in Firefox on `button` elements. |
|||
* 9. Align text if button has a width |
|||
* 10. Required for `a`. |
|||
*/ |
|||
|
|||
.uk-button { |
|||
/* 1 */ |
|||
margin: 0; |
|||
/* 2 */ |
|||
border: none; |
|||
/* 3 */ |
|||
border-radius: 0; |
|||
/* 4 */ |
|||
overflow: visible; |
|||
/* 5 */ |
|||
font: inherit; |
|||
color: inherit; |
|||
/* 6 */ |
|||
text-transform: none; |
|||
/* 7 */ |
|||
display: inline-block; |
|||
box-sizing: border-box; |
|||
padding: 0 $button-padding-horizontal; |
|||
vertical-align: middle; |
|||
font-size: $button-font-size; |
|||
/* 8 */ |
|||
line-height: $button-line-height; |
|||
/* 9 */ |
|||
text-align: center; |
|||
/* 10 */ |
|||
text-decoration: none; |
|||
@if(mixin-exists(hook-button)) {@include hook-button();} |
|||
} |
|||
|
|||
.uk-button:not(:disabled) { cursor: pointer; } |
|||
|
|||
/* |
|||
* Remove the inner border and padding in Firefox. |
|||
*/ |
|||
|
|||
.uk-button::-moz-focus-inner { |
|||
border: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
/* Hover */ |
|||
.uk-button:hover { |
|||
/* 8 */ |
|||
text-decoration: none; |
|||
@if(mixin-exists(hook-button-hover)) {@include hook-button-hover();} |
|||
} |
|||
|
|||
/* Focus */ |
|||
.uk-button:focus { |
|||
outline: none; |
|||
@if(mixin-exists(hook-button-focus)) {@include hook-button-focus();} |
|||
} |
|||
|
|||
/* OnClick + Active */ |
|||
.uk-button:active, |
|||
.uk-button.uk-active { |
|||
@if(mixin-exists(hook-button-active)) {@include hook-button-active();} |
|||
} |
|||
|
|||
|
|||
/* Style modifiers |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Default |
|||
*/ |
|||
|
|||
.uk-button-default { |
|||
background-color: $button-default-background; |
|||
color: $button-default-color; |
|||
@if(mixin-exists(hook-button-default)) {@include hook-button-default();} |
|||
} |
|||
|
|||
/* Hover + Focus */ |
|||
.uk-button-default:hover, |
|||
.uk-button-default:focus { |
|||
background-color: $button-default-hover-background; |
|||
color: $button-default-hover-color; |
|||
@if(mixin-exists(hook-button-default-hover)) {@include hook-button-default-hover();} |
|||
} |
|||
|
|||
/* OnClick + Active */ |
|||
.uk-button-default:active, |
|||
.uk-button-default.uk-active { |
|||
background-color: $button-default-active-background; |
|||
color: $button-default-active-color; |
|||
@if(mixin-exists(hook-button-default-active)) {@include hook-button-default-active();} |
|||
} |
|||
|
|||
/* |
|||
* Primary |
|||
*/ |
|||
|
|||
.uk-button-primary { |
|||
background-color: $button-primary-background; |
|||
color: $button-primary-color; |
|||
@if(mixin-exists(hook-button-primary)) {@include hook-button-primary();} |
|||
} |
|||
|
|||
/* Hover + Focus */ |
|||
.uk-button-primary:hover, |
|||
.uk-button-primary:focus { |
|||
background-color: $button-primary-hover-background; |
|||
color: $button-primary-hover-color; |
|||
@if(mixin-exists(hook-button-primary-hover)) {@include hook-button-primary-hover();} |
|||
} |
|||
|
|||
/* OnClick + Active */ |
|||
.uk-button-primary:active, |
|||
.uk-button-primary.uk-active { |
|||
background-color: $button-primary-active-background; |
|||
color: $button-primary-active-color; |
|||
@if(mixin-exists(hook-button-primary-active)) {@include hook-button-primary-active();} |
|||
} |
|||
|
|||
/* |
|||
* Secondary |
|||
*/ |
|||
|
|||
.uk-button-secondary { |
|||
background-color: $button-secondary-background; |
|||
color: $button-secondary-color; |
|||
@if(mixin-exists(hook-button-secondary)) {@include hook-button-secondary();} |
|||
} |
|||
|
|||
/* Hover + Focus */ |
|||
.uk-button-secondary:hover, |
|||
.uk-button-secondary:focus { |
|||
background-color: $button-secondary-hover-background; |
|||
color: $button-secondary-hover-color; |
|||
@if(mixin-exists(hook-button-secondary-hover)) {@include hook-button-secondary-hover();} |
|||
} |
|||
|
|||
/* OnClick + Active */ |
|||
.uk-button-secondary:active, |
|||
.uk-button-secondary.uk-active { |
|||
background-color: $button-secondary-active-background; |
|||
color: $button-secondary-active-color; |
|||
@if(mixin-exists(hook-button-secondary-active)) {@include hook-button-secondary-active();} |
|||
} |
|||
|
|||
/* |
|||
* Danger |
|||
*/ |
|||
|
|||
.uk-button-danger { |
|||
background-color: $button-danger-background; |
|||
color: $button-danger-color; |
|||
@if(mixin-exists(hook-button-danger)) {@include hook-button-danger();} |
|||
} |
|||
|
|||
/* Hover + Focus */ |
|||
.uk-button-danger:hover, |
|||
.uk-button-danger:focus { |
|||
background-color: $button-danger-hover-background; |
|||
color: $button-danger-hover-color; |
|||
@if(mixin-exists(hook-button-danger-hover)) {@include hook-button-danger-hover();} |
|||
} |
|||
|
|||
/* OnClick + Active */ |
|||
.uk-button-danger:active, |
|||
.uk-button-danger.uk-active { |
|||
background-color: $button-danger-active-background; |
|||
color: $button-danger-active-color; |
|||
@if(mixin-exists(hook-button-danger-active)) {@include hook-button-danger-active();} |
|||
} |
|||
|
|||
/* |
|||
* Disabled |
|||
* The same for all style modifiers |
|||
*/ |
|||
|
|||
.uk-button-default:disabled, |
|||
.uk-button-primary:disabled, |
|||
.uk-button-secondary:disabled, |
|||
.uk-button-danger:disabled { |
|||
background-color: $button-disabled-background; |
|||
color: $button-disabled-color; |
|||
@if(mixin-exists(hook-button-disabled)) {@include hook-button-disabled();} |
|||
} |
|||
|
|||
|
|||
/* Size modifiers |
|||
========================================================================== */ |
|||
|
|||
.uk-button-small { |
|||
padding: 0 $button-small-padding-horizontal; |
|||
line-height: $button-small-line-height; |
|||
font-size: $button-small-font-size; |
|||
@if(mixin-exists(hook-button-small)) {@include hook-button-small();} |
|||
} |
|||
|
|||
.uk-button-large { |
|||
padding: 0 $button-large-padding-horizontal; |
|||
line-height: $button-large-line-height; |
|||
font-size: $button-large-font-size; |
|||
@if(mixin-exists(hook-button-large)) {@include hook-button-large();} |
|||
} |
|||
|
|||
|
|||
/* Text modifiers |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Text |
|||
* 1. Reset |
|||
* 2. Style |
|||
*/ |
|||
|
|||
.uk-button-text { |
|||
/* 1 */ |
|||
padding: 0; |
|||
line-height: $button-text-line-height; |
|||
background: none; |
|||
/* 2 */ |
|||
color: $button-text-color; |
|||
@if(mixin-exists(hook-button-text)) {@include hook-button-text();} |
|||
} |
|||
|
|||
/* Hover + Focus */ |
|||
.uk-button-text:hover, |
|||
.uk-button-text:focus { |
|||
color: $button-text-hover-color; |
|||
@if(mixin-exists(hook-button-text-hover)) {@include hook-button-text-hover();} |
|||
} |
|||
|
|||
/* Disabled */ |
|||
.uk-button-text:disabled { |
|||
color: $button-text-disabled-color; |
|||
@if(mixin-exists(hook-button-text-disabled)) {@include hook-button-text-disabled();} |
|||
} |
|||
|
|||
/* |
|||
* Link |
|||
* 1. Reset |
|||
* 2. Style |
|||
*/ |
|||
|
|||
.uk-button-link { |
|||
/* 1 */ |
|||
padding: 0; |
|||
line-height: $button-link-line-height; |
|||
background: none; |
|||
/* 2 */ |
|||
color: $button-link-color; |
|||
@if(mixin-exists(hook-button-link)) {@include hook-button-link();} |
|||
} |
|||
|
|||
/* Hover + Focus */ |
|||
.uk-button-link:hover, |
|||
.uk-button-link:focus { |
|||
color: $button-link-hover-color; |
|||
text-decoration: $button-link-hover-text-decoration; |
|||
} |
|||
|
|||
/* Disabled */ |
|||
.uk-button-link:disabled { |
|||
color: $button-link-disabled-color; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
|
|||
/* Group |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Using `flex` instead of `inline-block` to prevent whitespace betweent child elements |
|||
* 2. Behave like button |
|||
* 3. Create position context |
|||
*/ |
|||
|
|||
.uk-button-group { |
|||
/* 1 */ |
|||
display: inline-flex; |
|||
/* 2 */ |
|||
vertical-align: middle; |
|||
/* 3 */ |
|||
position: relative; |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-button-misc)) {@include hook-button-misc();} |
|||
|
|||
// @mixin hook-button(){} |
|||
// @mixin hook-button-hover(){} |
|||
// @mixin hook-button-focus(){} |
|||
// @mixin hook-button-active(){} |
|||
// @mixin hook-button-default(){} |
|||
// @mixin hook-button-default-hover(){} |
|||
// @mixin hook-button-default-active(){} |
|||
// @mixin hook-button-primary(){} |
|||
// @mixin hook-button-primary-hover(){} |
|||
// @mixin hook-button-primary-active(){} |
|||
// @mixin hook-button-secondary(){} |
|||
// @mixin hook-button-secondary-hover(){} |
|||
// @mixin hook-button-secondary-active(){} |
|||
// @mixin hook-button-danger(){} |
|||
// @mixin hook-button-danger-hover(){} |
|||
// @mixin hook-button-danger-active(){} |
|||
// @mixin hook-button-disabled(){} |
|||
// @mixin hook-button-small(){} |
|||
// @mixin hook-button-large(){} |
|||
// @mixin hook-button-text(){} |
|||
// @mixin hook-button-text-hover(){} |
|||
// @mixin hook-button-text-disabled(){} |
|||
// @mixin hook-button-link(){} |
|||
// @mixin hook-button-misc(){} |
|||
|
|||
|
|||
// Inverse |
|||
// ======================================================================== |
|||
|
|||
$inverse-button-default-background: $inverse-global-primary-background !default; |
|||
$inverse-button-default-color: $inverse-global-inverse-color !default; |
|||
$inverse-button-default-hover-background: darken($inverse-button-default-background, 5%) !default; |
|||
$inverse-button-default-hover-color: $inverse-global-inverse-color !default; |
|||
$inverse-button-default-active-background: darken($inverse-button-default-background, 10%) !default; |
|||
$inverse-button-default-active-color: $inverse-global-inverse-color !default; |
|||
$inverse-button-primary-background: $inverse-global-primary-background !default; |
|||
$inverse-button-primary-color: $inverse-global-inverse-color !default; |
|||
$inverse-button-primary-hover-background: darken($inverse-button-primary-background, 5%) !default; |
|||
$inverse-button-primary-hover-color: $inverse-global-inverse-color !default; |
|||
$inverse-button-primary-active-background: darken($inverse-button-primary-background, 10%) !default; |
|||
$inverse-button-primary-active-color: $inverse-global-inverse-color !default; |
|||
$inverse-button-secondary-background: $inverse-global-primary-background !default; |
|||
$inverse-button-secondary-color: $inverse-global-inverse-color !default; |
|||
$inverse-button-secondary-hover-background: darken($inverse-button-secondary-background, 5%) !default; |
|||
$inverse-button-secondary-hover-color: $inverse-global-inverse-color !default; |
|||
$inverse-button-secondary-active-background: darken($inverse-button-secondary-background, 10%) !default; |
|||
$inverse-button-secondary-active-color: $inverse-global-inverse-color !default; |
|||
$inverse-button-text-color: $inverse-global-muted-color !default; |
|||
$inverse-button-text-hover-color: $inverse-global-color !default; |
|||
$inverse-button-text-disabled-color: $inverse-global-muted-color !default; |
|||
$inverse-button-link-color: $inverse-global-muted-color !default; |
|||
$inverse-button-link-hover-color: $inverse-global-color !default; |
|||
|
|||
|
|||
|
|||
// @mixin hook-inverse-button-default(){} |
|||
// @mixin hook-inverse-button-default-hover(){} |
|||
// @mixin hook-inverse-button-default-active(){} |
|||
// @mixin hook-inverse-button-primary(){} |
|||
// @mixin hook-inverse-button-primary-hover(){} |
|||
// @mixin hook-inverse-button-primary-active(){} |
|||
// @mixin hook-inverse-button-secondary(){} |
|||
// @mixin hook-inverse-button-secondary-hover(){} |
|||
// @mixin hook-inverse-button-secondary-active(){} |
|||
// @mixin hook-inverse-button-text(){} |
|||
// @mixin hook-inverse-button-text-hover(){} |
|||
// @mixin hook-inverse-button-text-disabled(){} |
|||
// @mixin hook-inverse-button-link(){} |
|||
@ -0,0 +1,363 @@ |
|||
// Name: Card |
|||
// Description: Component to create boxed content containers |
|||
// |
|||
// Component: `uk-card` |
|||
// |
|||
// Sub-objects: `uk-card-body` |
|||
// `uk-card-header` |
|||
// `uk-card-footer` |
|||
// `uk-card-media-*` |
|||
// `uk-card-title` |
|||
// `uk-card-badge` |
|||
// |
|||
// Modifiers: `uk-card-hover` |
|||
// `uk-card-default` |
|||
// `uk-card-primary` |
|||
// `uk-card-secondary` |
|||
// `uk-card-small` |
|||
// `uk-card-large` |
|||
// |
|||
// Uses: `uk-grid-stack` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$card-body-padding-horizontal: $global-gutter !default; |
|||
$card-body-padding-vertical: $global-gutter !default; |
|||
|
|||
$card-body-padding-horizontal-l: $global-medium-gutter !default; |
|||
$card-body-padding-vertical-l: $global-medium-gutter !default; |
|||
|
|||
$card-header-padding-horizontal: $global-gutter !default; |
|||
$card-header-padding-vertical: round($global-gutter / 2) !default; |
|||
|
|||
$card-header-padding-horizontal-l: $global-medium-gutter !default; |
|||
$card-header-padding-vertical-l: round($global-medium-gutter / 2) !default; |
|||
|
|||
$card-footer-padding-horizontal: $global-gutter !default; |
|||
$card-footer-padding-vertical: ($global-gutter / 2) !default; |
|||
|
|||
$card-footer-padding-horizontal-l: $global-medium-gutter !default; |
|||
$card-footer-padding-vertical-l: round($global-medium-gutter / 2) !default; |
|||
|
|||
$card-title-font-size: $global-large-font-size !default; |
|||
$card-title-line-height: 1.4 !default; |
|||
|
|||
$card-badge-top: $global-gutter !default; |
|||
$card-badge-right: $card-badge-top !default; |
|||
|
|||
$card-hover-background: $global-muted-background !default; |
|||
|
|||
$card-default-background: $global-muted-background !default; |
|||
$card-default-color: $global-color !default; |
|||
$card-default-title-color: $global-emphasis-color !default; |
|||
$card-default-hover-background: darken($card-default-background, 5%) !default; |
|||
|
|||
$card-primary-background: $global-primary-background !default; |
|||
$card-primary-color: $global-inverse-color !default; |
|||
$card-primary-title-color: $card-primary-color !default; |
|||
$card-primary-hover-background: darken($card-primary-background, 5%) !default; |
|||
$card-primary-color-mode: light !default; |
|||
|
|||
$card-secondary-background: $global-secondary-background !default; |
|||
$card-secondary-color: $global-inverse-color !default; |
|||
$card-secondary-title-color: $card-secondary-color !default; |
|||
$card-secondary-hover-background: darken($card-secondary-background, 5%) !default; |
|||
$card-secondary-color-mode: light !default; |
|||
|
|||
$card-small-body-padding-horizontal: $global-margin !default; |
|||
$card-small-body-padding-vertical: $global-margin !default; |
|||
$card-small-header-padding-horizontal: $global-margin !default; |
|||
$card-small-header-padding-vertical: round($global-margin / 1.5) !default; |
|||
$card-small-footer-padding-horizontal: $global-margin !default; |
|||
$card-small-footer-padding-vertical: round($global-margin / 1.5) !default; |
|||
|
|||
$card-large-body-padding-horizontal-l: $global-large-gutter !default; |
|||
$card-large-body-padding-vertical-l: $global-large-gutter !default; |
|||
$card-large-header-padding-horizontal-l: $global-large-gutter !default; |
|||
$card-large-header-padding-vertical-l: round($global-large-gutter / 2) !default; |
|||
$card-large-footer-padding-horizontal-l: $global-large-gutter !default; |
|||
$card-large-footer-padding-vertical-l: round($global-large-gutter / 2) !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Card |
|||
========================================================================== */ |
|||
|
|||
.uk-card { |
|||
position: relative; |
|||
box-sizing: border-box; |
|||
@if(mixin-exists(hook-card)) {@include hook-card();} |
|||
} |
|||
|
|||
|
|||
/* Sections |
|||
========================================================================== */ |
|||
|
|||
.uk-card-body { |
|||
padding: $card-body-padding-vertical $card-body-padding-horizontal; |
|||
@if(mixin-exists(hook-card-body)) {@include hook-card-body();} |
|||
} |
|||
|
|||
.uk-card-header { |
|||
padding: $card-header-padding-vertical $card-header-padding-horizontal; |
|||
@if(mixin-exists(hook-card-header)) {@include hook-card-header();} |
|||
} |
|||
|
|||
.uk-card-footer { |
|||
padding: $card-footer-padding-vertical $card-footer-padding-horizontal; |
|||
@if(mixin-exists(hook-card-footer)) {@include hook-card-footer();} |
|||
} |
|||
|
|||
/* Desktop and bigger */ |
|||
@media (min-width: $breakpoint-large) { |
|||
|
|||
.uk-card-body { padding: $card-body-padding-vertical-l $card-body-padding-horizontal-l; } |
|||
|
|||
.uk-card-header { padding: $card-header-padding-vertical-l $card-header-padding-horizontal-l; } |
|||
|
|||
.uk-card-footer { padding: $card-footer-padding-vertical-l $card-footer-padding-horizontal-l; } |
|||
|
|||
} |
|||
|
|||
/* |
|||
* Micro clearfix |
|||
*/ |
|||
|
|||
.uk-card-body::before, |
|||
.uk-card-body::after, |
|||
.uk-card-header::before, |
|||
.uk-card-header::after, |
|||
.uk-card-footer::before, |
|||
.uk-card-footer::after { |
|||
content: ""; |
|||
display: table; |
|||
} |
|||
|
|||
.uk-card-body::after, |
|||
.uk-card-header::after, |
|||
.uk-card-footer::after { clear: both; } |
|||
|
|||
/* |
|||
* Remove margin from the last-child |
|||
*/ |
|||
|
|||
.uk-card-body > :last-child, |
|||
.uk-card-header > :last-child, |
|||
.uk-card-footer > :last-child { margin-bottom: 0; } |
|||
|
|||
|
|||
/* Media |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Reserved alignment modifier to style the media element, e.g. with `border-radius` |
|||
* Implemented by the theme |
|||
*/ |
|||
|
|||
[class*='uk-card-media'] { |
|||
@if(mixin-exists(hook-card-media)) {@include hook-card-media();} |
|||
} |
|||
|
|||
.uk-card-media-top, |
|||
.uk-grid-stack > .uk-card-media-left, |
|||
.uk-grid-stack > .uk-card-media-right { |
|||
@if(mixin-exists(hook-card-media-top)) {@include hook-card-media-top();} |
|||
} |
|||
|
|||
.uk-card-media-bottom { |
|||
@if(mixin-exists(hook-card-media-bottom)) {@include hook-card-media-bottom();} |
|||
} |
|||
|
|||
:not(.uk-grid-stack) > .uk-card-media-left { |
|||
@if(mixin-exists(hook-card-media-left)) {@include hook-card-media-left();} |
|||
} |
|||
|
|||
:not(.uk-grid-stack) > .uk-card-media-right { |
|||
@if(mixin-exists(hook-card-media-right)) {@include hook-card-media-right();} |
|||
} |
|||
|
|||
|
|||
/* Title |
|||
========================================================================== */ |
|||
|
|||
.uk-card-title { |
|||
font-size: $card-title-font-size; |
|||
line-height: $card-title-line-height; |
|||
@if(mixin-exists(hook-card-title)) {@include hook-card-title();} |
|||
} |
|||
|
|||
|
|||
/* Badge |
|||
========================================================================== */ |
|||
|
|||
.uk-card-badge { |
|||
position: absolute; |
|||
top: $card-badge-top; |
|||
right: $card-badge-right; |
|||
z-index: 1; |
|||
@if(mixin-exists(hook-card-badge)) {@include hook-card-badge();} |
|||
} |
|||
|
|||
/* |
|||
* Remove margin from adjacent element |
|||
*/ |
|||
|
|||
.uk-card-badge:first-child + * { margin-top: 0; } |
|||
|
|||
|
|||
/* Hover modifier |
|||
========================================================================== */ |
|||
|
|||
.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):hover { |
|||
background: $card-hover-background; |
|||
@if(mixin-exists(hook-card-hover)) {@include hook-card-hover();} |
|||
} |
|||
|
|||
|
|||
/* Style modifiers |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Default |
|||
* Note: Header and Footer are only implemented for the default style |
|||
*/ |
|||
|
|||
.uk-card-default { |
|||
background: $card-default-background; |
|||
color: $card-default-color; |
|||
@if(mixin-exists(hook-card-default)) {@include hook-card-default();} |
|||
} |
|||
|
|||
.uk-card-default .uk-card-title { |
|||
color: $card-default-title-color; |
|||
@if(mixin-exists(hook-card-default-title)) {@include hook-card-default-title();} |
|||
} |
|||
|
|||
.uk-card-default.uk-card-hover:hover { |
|||
background-color: $card-default-hover-background; |
|||
@if(mixin-exists(hook-card-default-hover)) {@include hook-card-default-hover();} |
|||
} |
|||
|
|||
.uk-card-default .uk-card-header { |
|||
@if(mixin-exists(hook-card-default-header)) {@include hook-card-default-header();} |
|||
} |
|||
|
|||
.uk-card-default .uk-card-footer { |
|||
@if(mixin-exists(hook-card-default-footer)) {@include hook-card-default-footer();} |
|||
} |
|||
|
|||
/* |
|||
* Primary |
|||
*/ |
|||
|
|||
.uk-card-primary { |
|||
background: $card-primary-background; |
|||
color: $card-primary-color; |
|||
@if(mixin-exists(hook-card-primary)) {@include hook-card-primary();} |
|||
} |
|||
|
|||
.uk-card-primary .uk-card-title { |
|||
color: $card-primary-title-color; |
|||
@if(mixin-exists(hook-card-primary-title)) {@include hook-card-primary-title();} |
|||
} |
|||
|
|||
.uk-card-primary.uk-card-hover:hover { |
|||
background-color: $card-primary-hover-background; |
|||
@if(mixin-exists(hook-card-primary-hover)) {@include hook-card-primary-hover();} |
|||
} |
|||
|
|||
// Color Mode |
|||
@if ( $card-primary-color-mode == light ) { .uk-card-primary.uk-card-body { @extend .uk-light !optional;} } |
|||
@if ( $card-primary-color-mode == light ) { .uk-card-primary > :not([class*='uk-card-media']) { @extend .uk-light !optional;} } |
|||
@if ( $card-primary-color-mode == dark ) { .uk-card-primary.uk-card-body { @extend .uk-dark !optional;} } |
|||
@if ( $card-primary-color-mode == dark ) { .uk-card-primary > :not([class*='uk-card-media']) { @extend .uk-dark !optional;} } |
|||
|
|||
/* |
|||
* Secondary |
|||
*/ |
|||
|
|||
.uk-card-secondary { |
|||
background: $card-secondary-background; |
|||
color: $card-secondary-color; |
|||
@if(mixin-exists(hook-card-secondary)) {@include hook-card-secondary();} |
|||
} |
|||
|
|||
.uk-card-secondary .uk-card-title { |
|||
color: $card-secondary-title-color; |
|||
@if(mixin-exists(hook-card-secondary-title)) {@include hook-card-secondary-title();} |
|||
} |
|||
|
|||
.uk-card-secondary.uk-card-hover:hover { |
|||
background-color: $card-secondary-hover-background; |
|||
@if(mixin-exists(hook-card-secondary-hover)) {@include hook-card-secondary-hover();} |
|||
} |
|||
|
|||
// Color Mode |
|||
@if ( $card-secondary-color-mode == light ) { .uk-card-secondary.uk-card-body { @extend .uk-light !optional;} } |
|||
@if ( $card-secondary-color-mode == light ) { .uk-card-secondary > :not([class*='uk-card-media']) { @extend .uk-light !optional;} } |
|||
@if ( $card-secondary-color-mode == dark ) { .uk-card-secondary.uk-card-body { @extend .uk-dark !optional;} } |
|||
@if ( $card-secondary-color-mode == dark ) { .uk-card-secondary > :not([class*='uk-card-media']) { @extend .uk-dark !optional;} } |
|||
|
|||
|
|||
/* Size modifier |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Small |
|||
*/ |
|||
|
|||
.uk-card-small.uk-card-body, |
|||
.uk-card-small .uk-card-body { padding: $card-small-body-padding-vertical $card-small-body-padding-horizontal; } |
|||
|
|||
.uk-card-small .uk-card-header { padding: $card-small-header-padding-vertical $card-small-header-padding-horizontal; } |
|||
.uk-card-small .uk-card-footer { padding: $card-small-footer-padding-vertical $card-small-footer-padding-horizontal; } |
|||
|
|||
/* |
|||
* Large |
|||
*/ |
|||
|
|||
/* Desktop and bigger */ |
|||
@media (min-width: $breakpoint-large) { |
|||
|
|||
.uk-card-large.uk-card-body, |
|||
.uk-card-large .uk-card-body { padding: $card-large-body-padding-vertical-l $card-large-body-padding-horizontal-l; } |
|||
|
|||
.uk-card-large .uk-card-header { padding: $card-large-header-padding-vertical-l $card-large-header-padding-horizontal-l; } |
|||
.uk-card-large .uk-card-footer { padding: $card-large-footer-padding-vertical-l $card-large-footer-padding-horizontal-l; } |
|||
|
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-card-misc)) {@include hook-card-misc();} |
|||
|
|||
// @mixin hook-card(){} |
|||
// @mixin hook-card-body(){} |
|||
// @mixin hook-card-header(){} |
|||
// @mixin hook-card-footer(){} |
|||
// @mixin hook-card-media(){} |
|||
// @mixin hook-card-media-top(){} |
|||
// @mixin hook-card-media-bottom(){} |
|||
// @mixin hook-card-media-left(){} |
|||
// @mixin hook-card-media-right(){} |
|||
// @mixin hook-card-title(){} |
|||
// @mixin hook-card-badge(){} |
|||
// @mixin hook-card-hover(){} |
|||
// @mixin hook-card-default(){} |
|||
// @mixin hook-card-default-title(){} |
|||
// @mixin hook-card-default-hover(){} |
|||
// @mixin hook-card-default-header(){} |
|||
// @mixin hook-card-default-footer(){} |
|||
// @mixin hook-card-primary(){} |
|||
// @mixin hook-card-primary-title(){} |
|||
// @mixin hook-card-primary-hover(){} |
|||
// @mixin hook-card-secondary(){} |
|||
// @mixin hook-card-secondary-title(){} |
|||
// @mixin hook-card-secondary-hover(){} |
|||
// @mixin hook-card-misc(){} |
|||
@ -0,0 +1,57 @@ |
|||
// Name: Close |
|||
// Description: Component to create a close button |
|||
// |
|||
// Component: `uk-close` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$close-color: $global-muted-color !default; |
|||
$close-hover-color: $global-color !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Close |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Adopts `uk-icon` |
|||
*/ |
|||
|
|||
.uk-close { |
|||
color: $close-color; |
|||
@if(mixin-exists(hook-close)) {@include hook-close();} |
|||
} |
|||
|
|||
/* Hover + Focus */ |
|||
.uk-close:hover, |
|||
.uk-close:focus { |
|||
color: $close-hover-color; |
|||
outline: none; |
|||
@if(mixin-exists(hook-close-hover)) {@include hook-close-hover();} |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-close-misc)) {@include hook-close-misc();} |
|||
|
|||
// @mixin hook-close(){} |
|||
// @mixin hook-close-hover(){} |
|||
// @mixin hook-close-misc(){} |
|||
|
|||
|
|||
// Inverse |
|||
// ======================================================================== |
|||
|
|||
$inverse-close-color: $inverse-global-muted-color !default; |
|||
$inverse-close-hover-color: $inverse-global-color !default; |
|||
|
|||
|
|||
|
|||
// @mixin hook-inverse-close(){} |
|||
// @mixin hook-inverse-close-hover(){} |
|||
@ -0,0 +1,138 @@ |
|||
// Name: Column |
|||
// Description: Utilities for text columns |
|||
// |
|||
// Component: `uk-column-*` |
|||
// |
|||
// Sub-objects: `uk-column-span` |
|||
// |
|||
// Modifiers: `uk-column-divider` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$column-gutter: $global-gutter !default; |
|||
$column-gutter-l: $global-medium-gutter !default; |
|||
|
|||
$column-divider-rule-color: $global-border !default; |
|||
$column-divider-rule-width: 1px !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Column |
|||
========================================================================== */ |
|||
|
|||
[class*='uk-column-'] { column-gap: $column-gutter; } |
|||
|
|||
/* Desktop and bigger */ |
|||
@media (min-width: $breakpoint-large) { |
|||
|
|||
[class*='uk-column-'] { column-gap: $column-gutter-l; } |
|||
|
|||
} |
|||
|
|||
/* |
|||
* Fix image 1px line wrapping into the next column in Chrome |
|||
*/ |
|||
|
|||
[class*='uk-column-'] img { transform: translate3d(0,0,0); } |
|||
|
|||
|
|||
/* Divider |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Double the column gap |
|||
*/ |
|||
|
|||
.uk-column-divider { |
|||
column-rule: $column-divider-rule-width solid $column-divider-rule-color; |
|||
/* 1 */ |
|||
column-gap: ($column-gutter * 2); |
|||
} |
|||
|
|||
/* Desktop and bigger */ |
|||
@media (min-width: $breakpoint-large) { |
|||
|
|||
.uk-column-divider { |
|||
column-gap: ($column-gutter-l * 2); |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
/* Width modifiers |
|||
========================================================================== */ |
|||
|
|||
.uk-column-1-2 { column-count: 2;} |
|||
.uk-column-1-3 { column-count: 3; } |
|||
.uk-column-1-4 { column-count: 4; } |
|||
.uk-column-1-5 { column-count: 5; } |
|||
.uk-column-1-6 { column-count: 6; } |
|||
|
|||
/* Phone landscape and bigger */ |
|||
@media (min-width: $breakpoint-small) { |
|||
|
|||
.uk-column-1-2\@s { column-count: 2; } |
|||
.uk-column-1-3\@s { column-count: 3; } |
|||
.uk-column-1-4\@s { column-count: 4; } |
|||
.uk-column-1-5\@s { column-count: 5; } |
|||
.uk-column-1-6\@s { column-count: 6; } |
|||
|
|||
} |
|||
|
|||
/* Tablet landscape and bigger */ |
|||
@media (min-width: $breakpoint-medium) { |
|||
|
|||
.uk-column-1-2\@m { column-count: 2; } |
|||
.uk-column-1-3\@m { column-count: 3; } |
|||
.uk-column-1-4\@m { column-count: 4; } |
|||
.uk-column-1-5\@m { column-count: 5; } |
|||
.uk-column-1-6\@m { column-count: 6; } |
|||
|
|||
} |
|||
|
|||
/* Desktop and bigger */ |
|||
@media (min-width: $breakpoint-large) { |
|||
|
|||
.uk-column-1-2\@l { column-count: 2; } |
|||
.uk-column-1-3\@l { column-count: 3; } |
|||
.uk-column-1-4\@l { column-count: 4; } |
|||
.uk-column-1-5\@l { column-count: 5; } |
|||
.uk-column-1-6\@l { column-count: 6; } |
|||
|
|||
} |
|||
|
|||
/* Large screen and bigger */ |
|||
@media (min-width: $breakpoint-xlarge) { |
|||
|
|||
.uk-column-1-2\@xl { column-count: 2; } |
|||
.uk-column-1-3\@xl { column-count: 3; } |
|||
.uk-column-1-4\@xl { column-count: 4; } |
|||
.uk-column-1-5\@xl { column-count: 5; } |
|||
.uk-column-1-6\@xl { column-count: 6; } |
|||
|
|||
} |
|||
|
|||
/* Make element span across all columns |
|||
* Does not work in Firefox yet |
|||
========================================================================== */ |
|||
|
|||
.uk-column-span { column-span: all; } |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-column-misc)) {@include hook-column-misc();} |
|||
|
|||
// @mixin hook-column-misc(){} |
|||
|
|||
|
|||
// Inverse |
|||
// ======================================================================== |
|||
|
|||
$inverse-column-divider-rule-color: $inverse-global-border !default; |
|||
|
|||
@ -0,0 +1,171 @@ |
|||
// Name: Comment |
|||
// Description: Component to create nested comments |
|||
// |
|||
// Component: `uk-comment` |
|||
// |
|||
// Sub-objects: `uk-comment-body` |
|||
// `uk-comment-header` |
|||
// `uk-comment-title` |
|||
// `uk-comment-meta` |
|||
// `uk-comment-avatar` |
|||
// `uk-comment-list` |
|||
// |
|||
// Modifier: `uk-comment-primary` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$comment-header-margin-bottom: $global-margin !default; |
|||
|
|||
$comment-title-font-size: $global-medium-font-size !default; |
|||
$comment-title-line-height: 1.4 !default; |
|||
|
|||
$comment-meta-font-size: $global-small-font-size !default; |
|||
$comment-meta-line-height: 1.4 !default; |
|||
$comment-meta-color: $global-muted-color !default; |
|||
|
|||
$comment-list-margin-top: $global-large-margin !default; |
|||
$comment-list-padding-left: 30px !default; |
|||
$comment-list-padding-left-m: 100px !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Comment |
|||
========================================================================== */ |
|||
|
|||
.uk-comment { |
|||
@if(mixin-exists(hook-comment)) {@include hook-comment();} |
|||
} |
|||
|
|||
|
|||
/* Sections |
|||
========================================================================== */ |
|||
|
|||
.uk-comment-body { |
|||
@if(mixin-exists(hook-comment-body)) {@include hook-comment-body();} |
|||
} |
|||
|
|||
.uk-comment-header { |
|||
margin-bottom: $comment-header-margin-bottom; |
|||
@if(mixin-exists(hook-comment-header)) {@include hook-comment-header();} |
|||
} |
|||
|
|||
/* |
|||
* Micro clearfix |
|||
*/ |
|||
|
|||
.uk-comment-body::before, |
|||
.uk-comment-body::after, |
|||
.uk-comment-header::before, |
|||
.uk-comment-header::after { |
|||
content: ""; |
|||
display: table; |
|||
} |
|||
|
|||
.uk-comment-body::after, |
|||
.uk-comment-header::after { clear: both; } |
|||
|
|||
/* |
|||
* Remove margin from the last-child |
|||
*/ |
|||
|
|||
.uk-comment-body > :last-child, |
|||
.uk-comment-header > :last-child { margin-bottom: 0; } |
|||
|
|||
|
|||
/* Title |
|||
========================================================================== */ |
|||
|
|||
.uk-comment-title { |
|||
font-size: $comment-title-font-size; |
|||
line-height: $comment-title-line-height; |
|||
@if(mixin-exists(hook-comment-title)) {@include hook-comment-title();} |
|||
} |
|||
|
|||
|
|||
/* Meta |
|||
========================================================================== */ |
|||
|
|||
.uk-comment-meta { |
|||
font-size: $comment-meta-font-size; |
|||
line-height: $comment-meta-line-height; |
|||
color: $comment-meta-color; |
|||
@if(mixin-exists(hook-comment-meta)) {@include hook-comment-meta();} |
|||
} |
|||
|
|||
|
|||
/* Avatar |
|||
========================================================================== */ |
|||
|
|||
.uk-comment-avatar { |
|||
@if(mixin-exists(hook-comment-avatar)) {@include hook-comment-avatar();} |
|||
} |
|||
|
|||
|
|||
/* List |
|||
========================================================================== */ |
|||
|
|||
.uk-comment-list { |
|||
padding: 0; |
|||
list-style: none; |
|||
} |
|||
|
|||
/* Adjacent siblings */ |
|||
.uk-comment-list > :nth-child(n+2) { |
|||
margin-top: $comment-list-margin-top; |
|||
@if(mixin-exists(hook-comment-list-adjacent)) {@include hook-comment-list-adjacent();} |
|||
} |
|||
|
|||
/* |
|||
* Sublists |
|||
* Note: General sibling selector allows reply block between comment and sublist |
|||
*/ |
|||
|
|||
.uk-comment-list .uk-comment ~ ul { |
|||
margin: $comment-list-margin-top 0 0 0; |
|||
padding-left: $comment-list-padding-left; |
|||
list-style: none; |
|||
@if(mixin-exists(hook-comment-list-sub)) {@include hook-comment-list-sub();} |
|||
} |
|||
|
|||
/* Tablet and bigger */ |
|||
@media (min-width: $breakpoint-medium) { |
|||
|
|||
.uk-comment-list .uk-comment ~ ul { padding-left: $comment-list-padding-left-m; } |
|||
|
|||
} |
|||
|
|||
/* Adjacent siblings */ |
|||
.uk-comment-list .uk-comment ~ ul > :nth-child(n+2) { |
|||
margin-top: $comment-list-margin-top; |
|||
@if(mixin-exists(hook-comment-list-sub-adjacent)) {@include hook-comment-list-sub-adjacent();} |
|||
} |
|||
|
|||
|
|||
/* Style modifier |
|||
========================================================================== */ |
|||
|
|||
.uk-comment-primary { |
|||
@if(mixin-exists(hook-comment-primary)) {@include hook-comment-primary();} |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-comment-misc)) {@include hook-comment-misc();} |
|||
|
|||
// @mixin hook-comment(){} |
|||
// @mixin hook-comment-body(){} |
|||
// @mixin hook-comment-header(){} |
|||
// @mixin hook-comment-title(){} |
|||
// @mixin hook-comment-meta(){} |
|||
// @mixin hook-comment-avatar(){} |
|||
// @mixin hook-comment-list-adjacent(){} |
|||
// @mixin hook-comment-list-sub(){} |
|||
// @mixin hook-comment-list-sub-adjacent(){} |
|||
// @mixin hook-comment-primary(){} |
|||
// @mixin hook-comment-misc(){} |
|||
@ -0,0 +1,106 @@ |
|||
// Name: Container |
|||
// Description: Component to align and center your site and grid content |
|||
// |
|||
// Component: `uk-container` |
|||
// |
|||
// Modifier: `uk-container-small` |
|||
// `uk-container-large` |
|||
// `uk-container-expand` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$container-max-width: 1200px !default; |
|||
$container-small-max-width: 900px !default; |
|||
$container-large-max-width: 1600px !default; |
|||
|
|||
$container-padding-horizontal: 15px !default; |
|||
$container-padding-horizontal-s: $global-gutter !default; |
|||
$container-padding-horizontal-m: $global-medium-gutter !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Container |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Box sizing has to be `content-box` so the max-width is always the same and |
|||
* unaffected by the padding on different breakpoints. It's important for the size modifiers. |
|||
*/ |
|||
|
|||
.uk-container { |
|||
box-sizing: content-box; /* 1 */ |
|||
max-width: $container-max-width; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
padding-left: $container-padding-horizontal; |
|||
padding-right: $container-padding-horizontal; |
|||
} |
|||
|
|||
/* Phone landscape and bigger */ |
|||
@media (min-width: $breakpoint-small) { |
|||
|
|||
.uk-container { |
|||
padding-left: $container-padding-horizontal-s; |
|||
padding-right: $container-padding-horizontal-s; |
|||
} |
|||
|
|||
} |
|||
|
|||
/* Tablet landscape and bigger */ |
|||
@media (min-width: $breakpoint-medium) { |
|||
|
|||
.uk-container { |
|||
padding-left: $container-padding-horizontal-m; |
|||
padding-right: $container-padding-horizontal-m; |
|||
} |
|||
|
|||
} |
|||
|
|||
/* |
|||
* Micro clearfix |
|||
*/ |
|||
|
|||
.uk-container::before, |
|||
.uk-container::after { |
|||
content: ""; |
|||
display: table; |
|||
} |
|||
|
|||
.uk-container::after { clear: both; } |
|||
|
|||
/* |
|||
* Remove margin from the last-child |
|||
*/ |
|||
|
|||
.uk-container > :last-child { margin-bottom: 0; } |
|||
|
|||
/* |
|||
* Remove padding from nested containers |
|||
*/ |
|||
|
|||
.uk-container .uk-container { |
|||
padding-left: 0; |
|||
padding-right: 0; |
|||
} |
|||
|
|||
|
|||
/* Size modifier |
|||
========================================================================== */ |
|||
|
|||
.uk-container-small { max-width: $container-small-max-width; } |
|||
|
|||
.uk-container-large { max-width: $container-large-max-width; } |
|||
|
|||
.uk-container-expand { max-width: none; } |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-container-misc)) {@include hook-container-misc();} |
|||
|
|||
// @mixin hook-container-misc(){} |
|||
@ -0,0 +1,126 @@ |
|||
// Name: Countdown |
|||
// Description: Component to create countdown timers |
|||
// |
|||
// Component: `uk-countdown` |
|||
// |
|||
// Sub-objects: `uk-countdown-number` |
|||
// `uk-countdown-separator` |
|||
// `uk-countdown-label` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$countdown-item-line-height: 70px !default; |
|||
|
|||
$countdown-number-font-size: 2rem !default; // 32px |
|||
$countdown-number-font-size-s: 4rem !default; // 64px |
|||
$countdown-number-font-size-m: 6rem !default; // 96px |
|||
|
|||
$countdown-separator-font-size: 1rem !default; // 16px |
|||
$countdown-separator-font-size-s: 2rem !default; // 32px |
|||
$countdown-separator-font-size-m: 3rem !default; // 48px |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Countdown |
|||
========================================================================== */ |
|||
|
|||
.uk-countdown { |
|||
@if(mixin-exists(hook-countdown)) {@include hook-countdown();} |
|||
} |
|||
|
|||
|
|||
/* Item |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Center numbers and separators vertically |
|||
*/ |
|||
|
|||
.uk-countdown-number, |
|||
.uk-countdown-separator { |
|||
/* 1 */ |
|||
line-height: $countdown-item-line-height; |
|||
@if(mixin-exists(hook-countdown-item)) {@include hook-countdown-item();} |
|||
} |
|||
|
|||
|
|||
/* Number |
|||
========================================================================== */ |
|||
|
|||
.uk-countdown-number { |
|||
font-size: $countdown-number-font-size; |
|||
@if(mixin-exists(hook-countdown-number)) {@include hook-countdown-number();} |
|||
} |
|||
|
|||
/* Phone landscape and bigger */ |
|||
@media (min-width: $breakpoint-small) { |
|||
|
|||
.uk-countdown-number { font-size: $countdown-number-font-size-s; } |
|||
|
|||
} |
|||
|
|||
/* Tablet landscape and bigger */ |
|||
@media (min-width: $breakpoint-medium) { |
|||
|
|||
.uk-countdown-number { font-size: $countdown-number-font-size-m; } |
|||
|
|||
} |
|||
|
|||
|
|||
/* Separator |
|||
========================================================================== */ |
|||
|
|||
.uk-countdown-separator { |
|||
font-size: $countdown-separator-font-size; |
|||
@if(mixin-exists(hook-countdown-separator)) {@include hook-countdown-separator();} |
|||
} |
|||
|
|||
/* Phone landscape and bigger */ |
|||
@media (min-width: $breakpoint-small) { |
|||
|
|||
.uk-countdown-separator { font-size: $countdown-separator-font-size-s; } |
|||
|
|||
} |
|||
|
|||
/* Tablet landscape and bigger */ |
|||
@media (min-width: $breakpoint-medium) { |
|||
|
|||
.uk-countdown-separator { font-size: $countdown-separator-font-size-m; } |
|||
|
|||
} |
|||
|
|||
|
|||
/* Label |
|||
========================================================================== */ |
|||
|
|||
.uk-countdown-label { |
|||
@if(mixin-exists(hook-countdown-label)) {@include hook-countdown-label();} |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-countdown-misc)) {@include hook-countdown-misc();} |
|||
|
|||
// @mixin hook-countdown(){} |
|||
// @mixin hook-countdown-item(){} |
|||
// @mixin hook-countdown-number(){} |
|||
// @mixin hook-countdown-separator(){} |
|||
// @mixin hook-countdown-label(){} |
|||
// @mixin hook-countdown-misc(){} |
|||
|
|||
|
|||
// Inverse |
|||
// ======================================================================== |
|||
|
|||
|
|||
|
|||
// @mixin hook-inverse-countdown-item(){} |
|||
// @mixin hook-inverse-countdown-number(){} |
|||
// @mixin hook-inverse-countdown-separator(){} |
|||
// @mixin hook-inverse-countdown-label(){} |
|||
@ -0,0 +1,57 @@ |
|||
// Name: Cover |
|||
// Description: Utilities to let embedded content cover their container in a centered position |
|||
// |
|||
// Component: `uk-cover` |
|||
// |
|||
// Sub-object: `uk-cover-container` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Cover |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Works with iframes and embedded content |
|||
* 1. Reset responsiveness for embedded content |
|||
* 2. Center object |
|||
* Note: Percent values on the `top` property only works if this element |
|||
* is absolute positioned or if the container has a height |
|||
*/ |
|||
|
|||
.uk-cover { |
|||
/* 1 */ |
|||
max-width: none; |
|||
/* 2 */ |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%,-50%); |
|||
} |
|||
|
|||
iframe.uk-cover { pointer-events: none; } |
|||
|
|||
|
|||
/* Container |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Parent container which clips resized object |
|||
* 2. Needed if the child is positioned absolute. See note above |
|||
*/ |
|||
|
|||
.uk-cover-container { |
|||
/* 1 */ |
|||
overflow: hidden; |
|||
/* 2 */ |
|||
position: relative; |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-cover-misc)) {@include hook-cover-misc();} |
|||
|
|||
// @mixin hook-cover-misc(){} |
|||
@ -0,0 +1,71 @@ |
|||
// Name: Description list |
|||
// Description: Styles for description lists |
|||
// |
|||
// Component: `uk-description-list` |
|||
// |
|||
// Modifiers: `uk-description-list-divider` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$description-list-term-color: $global-emphasis-color !default; |
|||
$description-list-term-margin-top: $global-margin !default; |
|||
|
|||
$description-list-divider-term-margin-top: $global-margin !default; |
|||
$description-list-divider-term-border-width: $global-border-width !default; |
|||
$description-list-divider-term-border: $global-border !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Description list |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Term |
|||
*/ |
|||
|
|||
.uk-description-list > dt { |
|||
color: $description-list-term-color; |
|||
@if(mixin-exists(hook-description-list-term)) {@include hook-description-list-term();} |
|||
} |
|||
|
|||
.uk-description-list > dt:nth-child(n+2) { |
|||
margin-top: $description-list-term-margin-top; |
|||
} |
|||
|
|||
/* |
|||
* Description |
|||
*/ |
|||
|
|||
.uk-description-list > dd { |
|||
@if(mixin-exists(hook-description-list-description)) {@include hook-description-list-description();} |
|||
} |
|||
|
|||
|
|||
/* Style modifier |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Line |
|||
*/ |
|||
|
|||
.uk-description-list-divider > dt:nth-child(n+2) { |
|||
margin-top: $description-list-divider-term-margin-top; |
|||
padding-top: $description-list-divider-term-margin-top; |
|||
border-top: $description-list-divider-term-border-width solid $description-list-divider-term-border; |
|||
@if(mixin-exists(hook-description-list-divider-term)) {@include hook-description-list-divider-term();} |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-description-list-misc)) {@include hook-description-list-misc();} |
|||
|
|||
// @mixin hook-description-list-term(){} |
|||
// @mixin hook-description-list-description(){} |
|||
// @mixin hook-description-list-divider-term(){} |
|||
// @mixin hook-description-list-misc(){} |
|||
@ -0,0 +1,129 @@ |
|||
// Name: Divider |
|||
// Description: Styles for dividers |
|||
// |
|||
// Component: `uk-divider-icon` |
|||
// `uk-divider-small` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$divider-margin-vertical: $global-margin !default; |
|||
|
|||
$divider-icon-width: 50px !default; |
|||
$divider-icon-height: 20px !default; |
|||
$divider-icon-color: $global-border !default; |
|||
$divider-icon-line-top: 50% !default; |
|||
$divider-icon-line-width: 100% !default; |
|||
$divider-icon-line-border-width: $global-border-width !default; |
|||
$divider-icon-line-border: $global-border !default; |
|||
|
|||
$internal-divider-icon-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default; |
|||
|
|||
$divider-small-width: 100px !default; |
|||
$divider-small-border-width: $global-border-width !default; |
|||
$divider-small-border: $global-border !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Divider |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Reset default `hr` |
|||
* 2. Set margin if a `div` is used for semantical reason |
|||
*/ |
|||
|
|||
[class*='uk-divider'] { |
|||
/* 1 */ |
|||
border: none; |
|||
/* 2 */ |
|||
margin-bottom: $divider-margin-vertical; |
|||
} |
|||
|
|||
/* Add margin if adjacent element */ |
|||
* + [class*='uk-divider'] { margin-top: $divider-margin-vertical; } |
|||
|
|||
|
|||
/* Icon |
|||
========================================================================== */ |
|||
|
|||
.uk-divider-icon { |
|||
position: relative; |
|||
height: $divider-icon-height; |
|||
@include svg-fill($internal-divider-icon-image, "#000", $divider-icon-color); |
|||
background-repeat: no-repeat; |
|||
background-position: 50% 50%; |
|||
@if(mixin-exists(hook-divider-icon)) {@include hook-divider-icon();} |
|||
} |
|||
|
|||
.uk-divider-icon::before, |
|||
.uk-divider-icon::after { |
|||
content: ""; |
|||
position: absolute; |
|||
top: $divider-icon-line-top; |
|||
max-width: unquote('calc(50% - (#{$divider-icon-width} / 2))'); |
|||
border-bottom: $divider-icon-line-border-width solid $divider-icon-line-border; |
|||
@if(mixin-exists(hook-divider-icon-line)) {@include hook-divider-icon-line();} |
|||
} |
|||
|
|||
.uk-divider-icon::before { |
|||
right: unquote('calc(50% + (#{$divider-icon-width} / 2))'); |
|||
width: $divider-icon-line-width; |
|||
@if(mixin-exists(hook-divider-icon-line-left)) {@include hook-divider-icon-line-left();} |
|||
} |
|||
|
|||
.uk-divider-icon::after { |
|||
left: unquote('calc(50% + (#{$divider-icon-width} / 2))'); |
|||
width: $divider-icon-line-width; |
|||
@if(mixin-exists(hook-divider-icon-line-right)) {@include hook-divider-icon-line-right();} |
|||
} |
|||
|
|||
|
|||
/* Small |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Reset child height, caused by `inline-block` |
|||
*/ |
|||
|
|||
.uk-divider-small { line-height: 0; } |
|||
|
|||
.uk-divider-small::after { |
|||
content: ""; |
|||
display: inline-block; |
|||
width: $divider-small-width; |
|||
max-width: 100%; |
|||
border-top: $divider-small-border-width solid $divider-small-border; |
|||
vertical-align: top; |
|||
@if(mixin-exists(hook-divider-small)) {@include hook-divider-small();} |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-divider-misc)) {@include hook-divider-misc();} |
|||
|
|||
// @mixin hook-divider-icon(){} |
|||
// @mixin hook-divider-icon-line(){} |
|||
// @mixin hook-divider-icon-line-left(){} |
|||
// @mixin hook-divider-icon-line-right(){} |
|||
// @mixin hook-divider-small(){} |
|||
// @mixin hook-divider-misc(){} |
|||
|
|||
|
|||
// Inverse |
|||
// ======================================================================== |
|||
|
|||
$inverse-divider-icon-color: $inverse-global-border !default; |
|||
$inverse-divider-icon-line-border: $inverse-global-border !default; |
|||
$inverse-divider-small-border: $inverse-global-border !default; |
|||
|
|||
|
|||
|
|||
// @mixin hook-inverse-divider-icon(){} |
|||
// @mixin hook-inverse-divider-icon-line(){} |
|||
// @mixin hook-inverse-divider-small(){} |
|||
@ -0,0 +1,157 @@ |
|||
// Name: Dotnav |
|||
// Description: Component to create dot navigations |
|||
// |
|||
// Component: `uk-dotnav` |
|||
// |
|||
// Modifier: `uk-dotnav-vertical` |
|||
// |
|||
// States: `uk-active` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$dotnav-margin-horizontal: 12px !default; |
|||
$dotnav-margin-vertical: $dotnav-margin-horizontal !default; |
|||
|
|||
$dotnav-item-width: 10px !default; |
|||
$dotnav-item-height: $dotnav-item-width !default; |
|||
$dotnav-item-border-radius: 50% !default; |
|||
|
|||
$dotnav-item-background: rgba($global-color, 0.2) !default; |
|||
$dotnav-item-hover-background: rgba($global-color, 0.6) !default; |
|||
$dotnav-item-onclick-background: rgba($global-color, 0.2) !default; |
|||
$dotnav-item-active-background: rgba($global-color, 0.6) !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Dotnav |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Allow items to wrap into the next line |
|||
* 2. Reset list |
|||
* 3. Gutter |
|||
*/ |
|||
|
|||
.uk-dotnav { |
|||
display: flex; |
|||
/* 1 */ |
|||
flex-wrap: wrap; |
|||
/* 2 */ |
|||
margin: 0; |
|||
padding: 0; |
|||
list-style: none; |
|||
/* 3 */ |
|||
margin-left: (-$dotnav-margin-horizontal); |
|||
@if(mixin-exists(hook-dotnav)) {@include hook-dotnav();} |
|||
} |
|||
|
|||
/* |
|||
* 1. Space is allocated solely based on content dimensions: 0 0 auto |
|||
* 2. Gutter |
|||
*/ |
|||
|
|||
.uk-dotnav > * { |
|||
/* 1 */ |
|||
flex: none; |
|||
/* 2 */ |
|||
padding-left: $dotnav-margin-horizontal; |
|||
} |
|||
|
|||
|
|||
/* Items |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Items |
|||
* 1. Hide text if present |
|||
*/ |
|||
|
|||
.uk-dotnav > * > * { |
|||
display: block; |
|||
box-sizing: border-box; |
|||
width: $dotnav-item-width; |
|||
height: $dotnav-item-height; |
|||
border-radius: $dotnav-item-border-radius; |
|||
background: $dotnav-item-background; |
|||
/* 1 */ |
|||
text-indent: 100%; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
@if(mixin-exists(hook-dotnav-item)) {@include hook-dotnav-item();} |
|||
} |
|||
|
|||
/* Hover + Focus */ |
|||
.uk-dotnav > * > :hover, |
|||
.uk-dotnav > * > :focus { |
|||
background-color: $dotnav-item-hover-background; |
|||
outline: none; |
|||
@if(mixin-exists(hook-dotnav-item-hover)) {@include hook-dotnav-item-hover();} |
|||
} |
|||
|
|||
/* OnClick */ |
|||
.uk-dotnav > * > :active { |
|||
background-color: $dotnav-item-onclick-background; |
|||
@if(mixin-exists(hook-dotnav-item-onclick)) {@include hook-dotnav-item-onclick();} |
|||
} |
|||
|
|||
/* Active */ |
|||
.uk-dotnav > .uk-active > * { |
|||
background-color: $dotnav-item-active-background; |
|||
@if(mixin-exists(hook-dotnav-item-active)) {@include hook-dotnav-item-active();} |
|||
} |
|||
|
|||
|
|||
/* Modifier: 'uk-dotnav-vertical' |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Change direction |
|||
* 2. Gutter |
|||
*/ |
|||
|
|||
.uk-dotnav-vertical { |
|||
/* 1 */ |
|||
flex-direction: column; |
|||
/* 2 */ |
|||
margin-left: 0; |
|||
margin-top: (-$dotnav-margin-vertical); |
|||
} |
|||
|
|||
/* 2 */ |
|||
.uk-dotnav-vertical > * { |
|||
padding-left: 0; |
|||
padding-top: $dotnav-margin-vertical; |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-dotnav-misc)) {@include hook-dotnav-misc();} |
|||
|
|||
// @mixin hook-dotnav(){} |
|||
// @mixin hook-dotnav-item(){} |
|||
// @mixin hook-dotnav-item-hover(){} |
|||
// @mixin hook-dotnav-item-onclick(){} |
|||
// @mixin hook-dotnav-item-active(){} |
|||
// @mixin hook-dotnav-misc(){} |
|||
|
|||
|
|||
// Inverse |
|||
// ======================================================================== |
|||
|
|||
$inverse-dotnav-item-background: rgba($inverse-global-color, 0.5) !default; |
|||
$inverse-dotnav-item-hover-background: rgba($inverse-global-color, 0.9) !default; |
|||
$inverse-dotnav-item-onclick-background: rgba($inverse-global-color, 0.5) !default; |
|||
$inverse-dotnav-item-active-background: rgba($inverse-global-color, 0.9) !default; |
|||
|
|||
|
|||
|
|||
// @mixin hook-inverse-dotnav-item(){} |
|||
// @mixin hook-inverse-dotnav-item-hover(){} |
|||
// @mixin hook-inverse-dotnav-item-onclick(){} |
|||
// @mixin hook-inverse-dotnav-item-active(){} |
|||
@ -0,0 +1,74 @@ |
|||
// Name: Drop |
|||
// Description: Component to position any element next to any other element. |
|||
// |
|||
// Component: `uk-drop` |
|||
// |
|||
// Modifiers: `uk-drop-top-*` |
|||
// `uk-drop-bottom-*` |
|||
// `uk-drop-left-*` |
|||
// `uk-drop-right-*` |
|||
// `uk-drop-stack` |
|||
// `uk-drop-grid` |
|||
// |
|||
// States: `uk-open` |
|||
// |
|||
// Uses: Animation |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$drop-z-index: $global-z-index + 20 !default; |
|||
$drop-width: 300px !default; |
|||
$drop-margin: $global-margin !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Drop |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Hide by default |
|||
* 2. Set position |
|||
* 3. Set a default width |
|||
*/ |
|||
|
|||
.uk-drop { |
|||
/* 1 */ |
|||
display: none; |
|||
/* 2 */ |
|||
position: absolute; |
|||
z-index: $drop-z-index; |
|||
/* 3 */ |
|||
box-sizing: border-box; |
|||
width: $drop-width; |
|||
} |
|||
|
|||
/* Show */ |
|||
.uk-drop.uk-open { display: block; } |
|||
|
|||
|
|||
/* Direction / Alignment modifiers |
|||
========================================================================== */ |
|||
|
|||
/* Direction */ |
|||
[class*='uk-drop-top'] { margin-top: (-$drop-margin); } |
|||
[class*='uk-drop-bottom'] { margin-top: $drop-margin; } |
|||
[class*='uk-drop-left'] { margin-left: (-$drop-margin); } |
|||
[class*='uk-drop-right'] { margin-left: $drop-margin; } |
|||
|
|||
|
|||
/* Grid modifiers |
|||
========================================================================== */ |
|||
|
|||
.uk-drop-stack .uk-drop-grid > * { width: 100% !important; } |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-drop-misc)) {@include hook-drop-misc();} |
|||
|
|||
// @mixin hook-drop-misc(){} |
|||
@ -0,0 +1,150 @@ |
|||
// Name: Dropdown |
|||
// Description: Component to create dropdown menus |
|||
// |
|||
// Component: `uk-dropdown` |
|||
// |
|||
// Adopted: `uk-dropdown-nav` |
|||
// |
|||
// Modifiers: `uk-dropdown-top-*` |
|||
// `uk-dropdown-bottom-*` |
|||
// `uk-dropdown-left-*` |
|||
// `uk-dropdown-right-*` |
|||
// `uk-dropdown-stack` |
|||
// `uk-dropdown-grid` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$dropdown-z-index: $global-z-index + 20 !default; |
|||
$dropdown-min-width: 200px !default; |
|||
$dropdown-padding: 15px !default; |
|||
$dropdown-background: $global-muted-background !default; |
|||
$dropdown-color: $global-color !default; |
|||
$dropdown-margin: $global-small-margin !default; |
|||
|
|||
$dropdown-nav-item-color: $global-muted-color !default; |
|||
$dropdown-nav-item-hover-color: $global-color !default; |
|||
$dropdown-nav-header-color: $global-emphasis-color !default; |
|||
$dropdown-nav-divider-border-width: $global-border-width !default; |
|||
$dropdown-nav-divider-border: $global-border !default; |
|||
$dropdown-nav-sublist-item-color: $global-muted-color !default; |
|||
$dropdown-nav-sublist-item-hover-color: $global-color !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Dropdown |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Hide by default |
|||
* 2. Set position |
|||
* 3. Set a default width |
|||
* 4. Style |
|||
*/ |
|||
|
|||
.uk-dropdown { |
|||
/* 1 */ |
|||
display: none; |
|||
/* 2 */ |
|||
position: absolute; |
|||
z-index: $dropdown-z-index; |
|||
/* 3 */ |
|||
box-sizing: border-box; |
|||
min-width: $dropdown-min-width; |
|||
/* 4 */ |
|||
padding: $dropdown-padding; |
|||
background: $dropdown-background; |
|||
color: $dropdown-color; |
|||
@if(mixin-exists(hook-dropdown)) {@include hook-dropdown();} |
|||
} |
|||
|
|||
/* Show */ |
|||
.uk-dropdown.uk-open { display: block; } |
|||
|
|||
|
|||
/* Nav |
|||
* Adopts `uk-nav` |
|||
========================================================================== */ |
|||
|
|||
.uk-dropdown-nav { |
|||
white-space: nowrap; |
|||
@if(mixin-exists(hook-dropdown-nav)) {@include hook-dropdown-nav();} |
|||
} |
|||
|
|||
/* |
|||
* Items |
|||
*/ |
|||
|
|||
.uk-dropdown-nav > li > a { |
|||
color: $dropdown-nav-item-color; |
|||
@if(mixin-exists(hook-dropdown-nav-item)) {@include hook-dropdown-nav-item();} |
|||
} |
|||
|
|||
/* Hover + Focus + Active */ |
|||
.uk-dropdown-nav > li > a:hover, |
|||
.uk-dropdown-nav > li > a:focus, |
|||
.uk-dropdown-nav > li.uk-active > a { |
|||
color: $dropdown-nav-item-hover-color; |
|||
@if(mixin-exists(hook-dropdown-nav-item-hover)) {@include hook-dropdown-nav-item-hover();} |
|||
} |
|||
|
|||
/* |
|||
* Header |
|||
*/ |
|||
|
|||
.uk-dropdown-nav .uk-nav-header { |
|||
color: $dropdown-nav-header-color; |
|||
@if(mixin-exists(hook-dropdown-nav-header)) {@include hook-dropdown-nav-header();} |
|||
} |
|||
|
|||
/* |
|||
* Divider |
|||
*/ |
|||
|
|||
.uk-dropdown-nav .uk-nav-divider { |
|||
border-top: $dropdown-nav-divider-border-width solid $dropdown-nav-divider-border; |
|||
@if(mixin-exists(hook-dropdown-nav-divider)) {@include hook-dropdown-nav-divider();} |
|||
} |
|||
|
|||
/* |
|||
* Sublists |
|||
*/ |
|||
|
|||
.uk-dropdown-nav .uk-nav-sub a { color: $dropdown-nav-sublist-item-color; } |
|||
|
|||
.uk-dropdown-nav .uk-nav-sub a:hover, |
|||
.uk-dropdown-nav .uk-nav-sub a:focus { color: $dropdown-nav-sublist-item-hover-color; } |
|||
|
|||
|
|||
/* Direction / Alignment modifiers |
|||
========================================================================== */ |
|||
|
|||
/* Direction */ |
|||
[class*='uk-dropdown-top'] { margin-top: (-$dropdown-margin); } |
|||
[class*='uk-dropdown-bottom'] { margin-top: $dropdown-margin; } |
|||
[class*='uk-dropdown-left'] { margin-left: (-$dropdown-margin); } |
|||
[class*='uk-dropdown-right'] { margin-left: $dropdown-margin; } |
|||
|
|||
|
|||
/* Grid modifiers |
|||
========================================================================== */ |
|||
|
|||
.uk-dropdown-stack .uk-dropdown-grid > * { width: 100% !important; } |
|||
|
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-dropdown-misc)) {@include hook-dropdown-misc();} |
|||
|
|||
// @mixin hook-dropdown(){} |
|||
// @mixin hook-dropdown-nav(){} |
|||
// @mixin hook-dropdown-nav-item(){} |
|||
// @mixin hook-dropdown-nav-item-hover(){} |
|||
// @mixin hook-dropdown-nav-header(){} |
|||
// @mixin hook-dropdown-nav-divider(){} |
|||
// @mixin hook-dropdown-misc(){} |
|||
@ -0,0 +1,209 @@ |
|||
// Name: Flex |
|||
// Description: Utilities for layouts based on flexbox |
|||
// |
|||
// Component: `uk-flex-*` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Flex |
|||
========================================================================== */ |
|||
|
|||
.uk-flex { display: flex; } |
|||
.uk-flex-inline { display: inline-flex; } |
|||
|
|||
/* |
|||
* Remove pseudo elements created by micro clearfix as precaution |
|||
*/ |
|||
|
|||
.uk-flex::before, |
|||
.uk-flex::after, |
|||
.uk-flex-inline::before, |
|||
.uk-flex-inline::after { display: none; } |
|||
|
|||
|
|||
/* Alignment |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Align items along the main axis of the current line of the flex container |
|||
* Row: Horizontal |
|||
*/ |
|||
|
|||
// Default |
|||
.uk-flex-left { justify-content: flex-start; } |
|||
.uk-flex-center { justify-content: center; } |
|||
.uk-flex-right { justify-content: flex-end; } |
|||
.uk-flex-between { justify-content: space-between; } |
|||
.uk-flex-around { justify-content: space-around; } |
|||
|
|||
|
|||
/* Phone landscape and bigger */ |
|||
@media (min-width: $breakpoint-small) { |
|||
|
|||
.uk-flex-left\@s { justify-content: flex-start; } |
|||
.uk-flex-center\@s { justify-content: center; } |
|||
.uk-flex-right\@s { justify-content: flex-end; } |
|||
.uk-flex-between\@s { justify-content: space-between; } |
|||
.uk-flex-around\@s { justify-content: space-around; } |
|||
|
|||
} |
|||
|
|||
/* Tablet landscape and bigger */ |
|||
@media (min-width: $breakpoint-medium) { |
|||
|
|||
.uk-flex-left\@m { justify-content: flex-start; } |
|||
.uk-flex-center\@m { justify-content: center; } |
|||
.uk-flex-right\@m { justify-content: flex-end; } |
|||
.uk-flex-between\@m { justify-content: space-between; } |
|||
.uk-flex-around\@m { justify-content: space-around; } |
|||
|
|||
} |
|||
|
|||
/* Desktop and bigger */ |
|||
@media (min-width: $breakpoint-large) { |
|||
|
|||
.uk-flex-left\@l { justify-content: flex-start; } |
|||
.uk-flex-center\@l { justify-content: center; } |
|||
.uk-flex-right\@l { justify-content: flex-end; } |
|||
.uk-flex-between\@l { justify-content: space-between; } |
|||
.uk-flex-around\@l { justify-content: space-around; } |
|||
|
|||
} |
|||
|
|||
/* Large screen and bigger */ |
|||
@media (min-width: $breakpoint-xlarge) { |
|||
|
|||
.uk-flex-left\@xl { justify-content: flex-start; } |
|||
.uk-flex-center\@xl { justify-content: center; } |
|||
.uk-flex-right\@xl { justify-content: flex-end; } |
|||
.uk-flex-between\@xl { justify-content: space-between; } |
|||
.uk-flex-around\@xl { justify-content: space-around; } |
|||
|
|||
} |
|||
|
|||
/* |
|||
* Align items in the cross axis of the current line of the flex container |
|||
* Row: Vertical |
|||
*/ |
|||
|
|||
// Default |
|||
.uk-flex-stretch { align-items: stretch; } |
|||
.uk-flex-top { align-items: flex-start; } |
|||
.uk-flex-middle { align-items: center; } |
|||
.uk-flex-bottom { align-items: flex-end; } |
|||
|
|||
|
|||
/* Direction |
|||
========================================================================== */ |
|||
|
|||
// Default |
|||
.uk-flex-row { flex-direction: row; } |
|||
.uk-flex-row-reverse { flex-direction: row-reverse; } |
|||
.uk-flex-column { flex-direction: column; } |
|||
.uk-flex-column-reverse { flex-direction: column-reverse; } |
|||
|
|||
|
|||
/* Wrap |
|||
========================================================================== */ |
|||
|
|||
// Default |
|||
.uk-flex-nowrap { flex-wrap: nowrap; } |
|||
.uk-flex-wrap { flex-wrap: wrap; } |
|||
.uk-flex-wrap-reverse { flex-wrap: wrap-reverse; } |
|||
|
|||
/* |
|||
* Aligns items within the flex container when there is extra space in the cross-axis |
|||
* Only works if there is more than one line of flex items |
|||
*/ |
|||
|
|||
// Default |
|||
.uk-flex-wrap-stretch { align-content: stretch; } |
|||
.uk-flex-wrap-top { align-content: flex-start; } |
|||
.uk-flex-wrap-middle { align-content: center; } |
|||
.uk-flex-wrap-bottom { align-content: flex-end; } |
|||
.uk-flex-wrap-between { align-content: space-between; } |
|||
.uk-flex-wrap-around { align-content: space-around; } |
|||
|
|||
|
|||
/* Item ordering |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Default is 0 |
|||
*/ |
|||
|
|||
.uk-flex-first { order: -1;} |
|||
.uk-flex-last { order: 99;} |
|||
|
|||
|
|||
/* Phone landscape and bigger */ |
|||
@media (min-width: $breakpoint-small) { |
|||
|
|||
.uk-flex-first\@s { order: -1; } |
|||
.uk-flex-last\@s { order: 99; } |
|||
|
|||
} |
|||
|
|||
/* Tablet landscape and bigger */ |
|||
@media (min-width: $breakpoint-medium) { |
|||
|
|||
.uk-flex-first\@m { order: -1; } |
|||
.uk-flex-last\@m { order: 99; } |
|||
|
|||
} |
|||
|
|||
/* Desktop and bigger */ |
|||
@media (min-width: $breakpoint-large) { |
|||
|
|||
.uk-flex-first\@l { order: -1; } |
|||
.uk-flex-last\@l { order: 99; } |
|||
|
|||
} |
|||
|
|||
/* Large screen and bigger */ |
|||
@media (min-width: $breakpoint-xlarge) { |
|||
|
|||
.uk-flex-first\@xl { order: -1; } |
|||
.uk-flex-last\@xl { order: 99; } |
|||
|
|||
} |
|||
|
|||
|
|||
/* Item dimensions |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Initial: 0 1 auto |
|||
* Content dimensions, but shrinks |
|||
*/ |
|||
|
|||
/* |
|||
* No Flex: 0 0 auto |
|||
* Content dimensions |
|||
*/ |
|||
|
|||
.uk-flex-none { flex: none; } |
|||
|
|||
/* |
|||
* Relative Flex: 1 1 auto |
|||
* Space is allocated considering content |
|||
*/ |
|||
|
|||
.uk-flex-auto { flex: auto; } |
|||
|
|||
/* |
|||
* Absolute Flex: 1 1 0% |
|||
* Space is allocated solely based on flex |
|||
*/ |
|||
|
|||
.uk-flex-1 { flex: 1; } |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-flex-misc)) {@include hook-flex-misc();} |
|||
|
|||
// @mixin hook-flex-misc(){} |
|||
@ -0,0 +1,185 @@ |
|||
// Name: Form Range |
|||
// Description: Styles for the range input type |
|||
// |
|||
// Component: `uk-range` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$form-range-thumb-height: 15px !default; |
|||
$form-range-thumb-border-radius: 500px !default; |
|||
$form-range-thumb-background: $global-color !default; |
|||
|
|||
$form-range-track-height: 3px !default; |
|||
$form-range-track-background: darken($global-muted-background, 5%) !default; |
|||
$form-range-track-focus-background: darken($global-muted-background, 15%) !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Form Range |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Normalize and defaults |
|||
* 2. Prevent content overflow if a fixed width is used |
|||
* 3. Take the full width |
|||
* 4. Remove default style |
|||
* 5. Remove white background in Chrome |
|||
* 6. Remove padding in IE11 |
|||
*/ |
|||
|
|||
.uk-range { |
|||
/* 1 */ |
|||
box-sizing: border-box; |
|||
margin: 0; |
|||
vertical-align: middle; |
|||
/* 2 */ |
|||
max-width: 100%; |
|||
/* 3 */ |
|||
width: 100%; |
|||
/* 4 */ |
|||
-webkit-appearance: none; |
|||
/* 5 */ |
|||
background: transparent; |
|||
/* 6 */ |
|||
padding: 0; |
|||
@if(mixin-exists(hook-form-range)) {@include hook-form-range();} |
|||
} |
|||
|
|||
/* Focus */ |
|||
.uk-range:focus { outline: none; } |
|||
.uk-range::-moz-focus-outer { border: none; } |
|||
|
|||
/* IE11 Reset */ |
|||
.uk-range::-ms-track { |
|||
height: $form-range-thumb-height; |
|||
background: transparent; |
|||
border-color: transparent; |
|||
color: transparent; |
|||
} |
|||
|
|||
/* |
|||
* Improves consistency of cursor style for clickable elements |
|||
*/ |
|||
|
|||
.uk-range:not(:disabled)::-webkit-slider-thumb { cursor: pointer; } |
|||
.uk-range:not(:disabled)::-moz-range-thumb { cursor: pointer; } |
|||
.uk-range:not(:disabled)::-ms-thumb { cursor: pointer; } |
|||
|
|||
|
|||
/* Thumb |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Reset |
|||
* 2. Style |
|||
*/ |
|||
|
|||
/* Webkit */ |
|||
.uk-range::-webkit-slider-thumb { |
|||
/* 1 */ |
|||
-webkit-appearance: none; |
|||
margin-top: (floor($form-range-thumb-height / 2) * -1); |
|||
/* 2 */ |
|||
height: $form-range-thumb-height; |
|||
width: $form-range-thumb-height; |
|||
border-radius: $form-range-thumb-border-radius; |
|||
background: $form-range-thumb-background; |
|||
@if(mixin-exists(hook-form-range-thumb)) {@include hook-form-range-thumb();} |
|||
} |
|||
|
|||
/* Firefox */ |
|||
.uk-range::-moz-range-thumb { |
|||
/* 1 */ |
|||
border: none; |
|||
/* 2 */ |
|||
height: $form-range-thumb-height; |
|||
width: $form-range-thumb-height; |
|||
border-radius: $form-range-thumb-border-radius; |
|||
background: $form-range-thumb-background; |
|||
@if(mixin-exists(hook-form-range-thumb)) {@include hook-form-range-thumb();} |
|||
} |
|||
|
|||
/* Edge */ |
|||
.uk-range::-ms-thumb { |
|||
/* 1 */ |
|||
margin-top: 0; |
|||
} |
|||
|
|||
/* IE11 */ |
|||
.uk-range::-ms-thumb { |
|||
/* 1 */ |
|||
border: none; |
|||
/* 2 */ |
|||
height: $form-range-thumb-height; |
|||
width: $form-range-thumb-height; |
|||
border-radius: $form-range-thumb-border-radius; |
|||
background: $form-range-thumb-background; |
|||
@if(mixin-exists(hook-form-range-thumb)) {@include hook-form-range-thumb();} |
|||
} |
|||
|
|||
/* Edge + IE11 */ |
|||
.uk-range::-ms-tooltip { display: none; } |
|||
|
|||
|
|||
/* Track |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Safari doesn't have a focus state. Using active instead. |
|||
*/ |
|||
|
|||
/* Webkit */ |
|||
.uk-range::-webkit-slider-runnable-track { |
|||
height: $form-range-track-height; |
|||
background: $form-range-track-background; |
|||
@if(mixin-exists(hook-form-range-track)) {@include hook-form-range-track();} |
|||
} |
|||
|
|||
.uk-range:focus::-webkit-slider-runnable-track, |
|||
/* 1 */ |
|||
.uk-range:active::-webkit-slider-runnable-track { |
|||
background: $form-range-track-focus-background; |
|||
@if(mixin-exists(hook-form-range-track-focus)) {@include hook-form-range-track-focus();} |
|||
} |
|||
|
|||
/* Firefox */ |
|||
.uk-range::-moz-range-track { |
|||
height: $form-range-track-height; |
|||
background: $form-range-track-background; |
|||
@if(mixin-exists(hook-form-range-track)) {@include hook-form-range-track();} |
|||
} |
|||
|
|||
.uk-range:focus::-moz-range-track { |
|||
background: $form-range-track-focus-background; |
|||
@if(mixin-exists(hook-form-range-track-focus)) {@include hook-form-range-track-focus();} |
|||
} |
|||
|
|||
/* Edge */ |
|||
.uk-range::-ms-fill-lower, |
|||
.uk-range::-ms-fill-upper { |
|||
height: $form-range-track-height; |
|||
background: $form-range-track-background; |
|||
@if(mixin-exists(hook-form-range-track)) {@include hook-form-range-track();} |
|||
} |
|||
|
|||
.uk-range:focus::-ms-fill-lower, |
|||
.uk-range:focus::-ms-fill-upper { |
|||
background: $form-range-track-focus-background; |
|||
@if(mixin-exists(hook-form-range-track-focus)) {@include hook-form-range-track-focus();} |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-form-range-misc)) {@include hook-form-range-misc();} |
|||
|
|||
// @mixin hook-form-range(){} |
|||
// @mixin hook-form-range-thumb(){} |
|||
// @mixin hook-form-range-track(){} |
|||
// @mixin hook-form-range-track-focus(){} |
|||
// @mixin hook-form-range-misc(){} |
|||
@ -0,0 +1,756 @@ |
|||
// Name: Form |
|||
// Description: Styles for forms |
|||
// |
|||
// Component: `uk-form-*` |
|||
// `uk-input` |
|||
// `uk-select` |
|||
// `uk-textarea` |
|||
// `uk-radio` |
|||
// `uk-checkbox` |
|||
// `uk-legend` |
|||
// `uk-fieldset` |
|||
// |
|||
// Sub-objects: `uk-form-custom` |
|||
// `uk-form-stacked` |
|||
// `uk-form-horizontal` |
|||
// `uk-form-label` |
|||
// `uk-form-controls` |
|||
// `uk-form-icon` |
|||
// `uk-form-icon-flip` |
|||
// |
|||
// Modifiers: `uk-form-small` |
|||
// `uk-form-large` |
|||
// `uk-form-danger` |
|||
// `uk-form-success` |
|||
// `uk-form-blank` |
|||
// `uk-form-width-xsmall` |
|||
// `uk-form-width-small` |
|||
// `uk-form-width-medium` |
|||
// `uk-form-width-large` |
|||
// `uk-form-controls-text` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$form-height: $global-control-height !default; |
|||
$form-line-height: $form-height !default; |
|||
$form-padding-horizontal: 10px !default; |
|||
$form-padding-vertical: 4px !default; |
|||
|
|||
$form-background: $global-muted-background !default; |
|||
$form-color: $global-color !default; |
|||
|
|||
$form-focus-background: $global-muted-background !default; |
|||
$form-focus-color: $global-color !default; |
|||
|
|||
$form-disabled-background: $global-muted-background !default; |
|||
$form-disabled-color: $global-muted-color !default; |
|||
|
|||
$form-placeholder-color: $global-muted-color !default; |
|||
|
|||
$form-small-height: $global-control-small-height !default; |
|||
$form-small-padding-horizontal: 8px !default; |
|||
$form-small-line-height: $form-small-height !default; |
|||
$form-small-font-size: $global-small-font-size !default; |
|||
|
|||
$form-large-height: $global-control-large-height !default; |
|||
$form-large-padding-horizontal: 12px !default; |
|||
$form-large-line-height: $form-large-height !default; |
|||
$form-large-font-size: $global-medium-font-size !default; |
|||
|
|||
$form-danger-color: $global-danger-background !default; |
|||
$form-success-color: $global-success-background !default; |
|||
|
|||
$form-width-xsmall: 50px !default; |
|||
$form-width-small: 130px !default; |
|||
$form-width-medium: 200px !default; |
|||
$form-width-large: 500px !default; |
|||
|
|||
$form-select-padding-right: 20px !default; |
|||
$form-select-icon-color: $global-color !default; |
|||
$form-select-disabled-icon-color: $global-muted-color !default; |
|||
|
|||
$form-radio-size: 16px !default; |
|||
$form-radio-margin-top: -4px !default; |
|||
$form-radio-background: darken($global-muted-background, 5%) !default; |
|||
|
|||
$form-radio-checked-background: $global-primary-background !default; |
|||
$form-radio-checked-icon-color: $global-inverse-color !default; |
|||
|
|||
$form-radio-checked-focus-background: darken($global-primary-background, 10%) !default; |
|||
|
|||
$form-radio-disabled-background: $global-muted-background !default; |
|||
$form-radio-disabled-icon-color: $global-muted-color !default; |
|||
|
|||
$form-legend-font-size: $global-large-font-size !default; |
|||
$form-legend-line-height: 1.4 !default; |
|||
|
|||
$form-stacked-margin-bottom: $global-small-margin !default; |
|||
|
|||
$form-horizontal-label-width: 200px !default; |
|||
$form-horizontal-label-margin-top: 7px !default; |
|||
$form-horizontal-controls-margin-left: 215px !default; |
|||
$form-horizontal-controls-text-padding-top: 7px !default; |
|||
|
|||
$form-icon-width: $form-height !default; |
|||
$form-icon-font-size: $global-font-size !default; |
|||
$form-icon-color: $global-muted-color !default; |
|||
$form-icon-hover-color: $global-color !default; |
|||
|
|||
$internal-form-select-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default; |
|||
$internal-form-radio-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22#000%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E" !default; |
|||
$internal-form-checkbox-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default; |
|||
$internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E" !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Form |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Define consistent box sizing. |
|||
* Default is `content-box` with following exceptions set to `border-box` |
|||
* `select`, `input[type="checkbox"]` and `input[type="radio"]` |
|||
* `input[type="search"]` in Chrome, Safari and Opera |
|||
* `input[type="color"]` in Firefox |
|||
* 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera. |
|||
* 3. Remove `border-radius` in iOS. |
|||
* 4. Change font properties to `inherit` in all browsers. |
|||
*/ |
|||
|
|||
.uk-input, |
|||
.uk-select, |
|||
.uk-textarea, |
|||
.uk-radio, |
|||
.uk-checkbox { |
|||
/* 1 */ |
|||
box-sizing: border-box; |
|||
/* 2 */ |
|||
margin: 0; |
|||
/* 3 */ |
|||
border-radius: 0; |
|||
/* 4 */ |
|||
font: inherit; |
|||
} |
|||
|
|||
/* |
|||
* Show the overflow in Edge. |
|||
*/ |
|||
|
|||
.uk-input { overflow: visible; } |
|||
|
|||
/* |
|||
* Remove the inheritance of text transform in Firefox. |
|||
*/ |
|||
|
|||
.uk-select { text-transform: none; } |
|||
|
|||
/* |
|||
* 1. Change font properties to `inherit` in all browsers |
|||
* 2. Don't inherit the `font-weight` and use `bold` instead. |
|||
* NOTE: Both declarations don't work in Chrome, Safari and Opera. |
|||
*/ |
|||
|
|||
.uk-select optgroup { |
|||
/* 1 */ |
|||
font: inherit; |
|||
/* 2 */ |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/* |
|||
* Remove the default vertical scrollbar in IE 10+. |
|||
*/ |
|||
|
|||
.uk-textarea { overflow: auto; } |
|||
|
|||
/* |
|||
* Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X. |
|||
*/ |
|||
|
|||
.uk-input[type="search"]::-webkit-search-cancel-button, |
|||
.uk-input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } |
|||
|
|||
|
|||
/* |
|||
* Correct the cursor style of increment and decrement buttons in Chrome. |
|||
*/ |
|||
|
|||
.uk-input[type="number"]::-webkit-inner-spin-button, |
|||
.uk-input[type="number"]::-webkit-outer-spin-button { height: auto; } |
|||
|
|||
/* |
|||
* Removes placeholder transparency in Firefox. |
|||
*/ |
|||
|
|||
.uk-input::-moz-placeholder, |
|||
.uk-textarea::-moz-placeholder { opacity: 1; } |
|||
|
|||
/* |
|||
* Improves consistency of cursor style for clickable elements |
|||
*/ |
|||
|
|||
.uk-radio:not(:disabled), |
|||
.uk-checkbox:not(:disabled) { cursor: pointer; } |
|||
|
|||
/* |
|||
* Define consistent border, margin, and padding. |
|||
*/ |
|||
|
|||
.uk-fieldset { |
|||
border: none; |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
|
|||
/* Input, select and textarea |
|||
* Allowed: `text`, `password`, `datetime`, `datetime-local`, `date`, `month`, |
|||
`time`, `week`, `number`, `email`, `url`, `search`, `tel`, `color` |
|||
* Disallowed: `range`, `radio`, `checkbox`, `file`, `submit`, `reset` and `image` |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Remove default style in iOS. |
|||
*/ |
|||
|
|||
.uk-input, |
|||
.uk-textarea { -webkit-appearance: none; } |
|||
|
|||
/* |
|||
* 1. Prevent content overflow if a fixed width is used |
|||
* 2. Take the full width |
|||
* 3. Reset default |
|||
* 4. Style |
|||
*/ |
|||
|
|||
.uk-input, |
|||
.uk-select, |
|||
.uk-textarea { |
|||
/* 1 */ |
|||
max-width: 100%; |
|||
/* 2 */ |
|||
width: 100%; |
|||
/* 3 */ |
|||
border: 0 none; |
|||
/* 4 */ |
|||
padding: 0 $form-padding-horizontal; |
|||
background: $form-background; |
|||
color: $form-color; |
|||
@if(mixin-exists(hook-form)) {@include hook-form();} |
|||
} |
|||
|
|||
/* |
|||
* Single-line |
|||
* 1. Allow any element to look like an `input` or `select` element |
|||
* 2. Make sure line-height is not larger than height |
|||
* Also needed to center the text vertically |
|||
*/ |
|||
|
|||
.uk-input, |
|||
.uk-select:not([multiple]):not([size]) { |
|||
height: $form-height; |
|||
vertical-align: middle; |
|||
/* 1 */ |
|||
display: inline-block; |
|||
@if(mixin-exists(hook-form-single-line)) {@include hook-form-single-line();} |
|||
} |
|||
|
|||
/* 2 */ |
|||
.uk-input:not(input), |
|||
.uk-select:not(select) { line-height: $form-line-height; } |
|||
|
|||
/* |
|||
* Multi-line |
|||
*/ |
|||
|
|||
.uk-select[multiple], |
|||
.uk-select[size], |
|||
.uk-textarea { |
|||
padding-top: $form-padding-vertical; |
|||
padding-bottom: $form-padding-vertical; |
|||
vertical-align: top; |
|||
@if(mixin-exists(hook-form-multi-line)) {@include hook-form-multi-line();} |
|||
} |
|||
|
|||
/* Focus */ |
|||
.uk-input:focus, |
|||
.uk-select:focus, |
|||
.uk-textarea:focus { |
|||
outline: none; |
|||
background-color: $form-focus-background; |
|||
color: $form-focus-color; |
|||
@if(mixin-exists(hook-form-focus)) {@include hook-form-focus();} |
|||
} |
|||
|
|||
/* Disabled */ |
|||
.uk-input:disabled, |
|||
.uk-select:disabled, |
|||
.uk-textarea:disabled { |
|||
background-color: $form-disabled-background; |
|||
color: $form-disabled-color; |
|||
@if(mixin-exists(hook-form-disabled)) {@include hook-form-disabled();} |
|||
} |
|||
|
|||
/* |
|||
* Placeholder |
|||
*/ |
|||
|
|||
.uk-input:-ms-input-placeholder { color: $form-placeholder-color !important; } |
|||
.uk-input::placeholder { color: $form-placeholder-color; } |
|||
|
|||
.uk-textarea:-ms-input-placeholder { color: $form-placeholder-color !important; } |
|||
.uk-textarea::placeholder { color: $form-placeholder-color; } |
|||
|
|||
|
|||
/* Style modifier (`uk-input`, `uk-select` and `uk-textarea`) |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Small |
|||
*/ |
|||
|
|||
.uk-form-small { font-size: $form-small-font-size; } |
|||
|
|||
.uk-form-small:not(textarea):not([multiple]):not([size]) { |
|||
height: $form-small-height; |
|||
padding-left: $form-small-padding-horizontal; |
|||
padding-right: $form-small-padding-horizontal; |
|||
} |
|||
|
|||
.uk-form-small:not(select):not(input):not(textarea) { line-height: $form-small-line-height; } |
|||
|
|||
/* |
|||
* Large |
|||
*/ |
|||
|
|||
.uk-form-large { font-size: $form-large-font-size; } |
|||
|
|||
.uk-form-large:not(textarea):not([multiple]):not([size]) { |
|||
height: $form-large-height; |
|||
padding-left: $form-large-padding-horizontal; |
|||
padding-right: $form-large-padding-horizontal; |
|||
} |
|||
|
|||
.uk-form-large:not(select):not(input):not(textarea) { line-height: $form-large-line-height; } |
|||
|
|||
|
|||
/* Style modifier (`uk-input`, `uk-select` and `uk-textarea`) |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Error |
|||
*/ |
|||
|
|||
.uk-form-danger, |
|||
.uk-form-danger:focus { |
|||
color: $form-danger-color; |
|||
@if(mixin-exists(hook-form-danger)) {@include hook-form-danger();} |
|||
} |
|||
|
|||
/* |
|||
* Success |
|||
*/ |
|||
|
|||
.uk-form-success, |
|||
.uk-form-success:focus { |
|||
color: $form-success-color; |
|||
@if(mixin-exists(hook-form-success)) {@include hook-form-success();} |
|||
} |
|||
|
|||
/* |
|||
* Blank |
|||
*/ |
|||
|
|||
.uk-form-blank { |
|||
background: none; |
|||
@if(mixin-exists(hook-form-blank)) {@include hook-form-blank();} |
|||
} |
|||
|
|||
.uk-form-blank:focus { |
|||
@if(mixin-exists(hook-form-blank-focus)) {@include hook-form-blank-focus();} |
|||
} |
|||
|
|||
|
|||
/* Width modifiers (`uk-input`, `uk-select` and `uk-textarea`) |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Fixed widths |
|||
* Different widths for mini sized `input` and `select` elements |
|||
*/ |
|||
|
|||
input.uk-form-width-xsmall { width: $form-width-xsmall; } |
|||
|
|||
select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); } |
|||
|
|||
.uk-form-width-small { width: $form-width-small; } |
|||
|
|||
.uk-form-width-medium { width: $form-width-medium; } |
|||
|
|||
.uk-form-width-large { width: $form-width-large; } |
|||
|
|||
|
|||
/* Select |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Remove default style. Also works in Firefox |
|||
* 2. Style |
|||
* 3. Remove default style in IE 10/11 |
|||
*/ |
|||
|
|||
.uk-select:not([multiple]):not([size]) { |
|||
/* 1 */ |
|||
-webkit-appearance: none; |
|||
-moz-appearance: none; |
|||
/* 2 */ |
|||
padding-right: $form-select-padding-right; |
|||
@include svg-fill($internal-form-select-image, "#000", $form-select-icon-color); |
|||
background-repeat: no-repeat; |
|||
background-position: 100% 50%; |
|||
} |
|||
|
|||
/* 3 */ |
|||
.uk-select:not([multiple]):not([size])::-ms-expand { display: none; } |
|||
|
|||
/* |
|||
* Disabled |
|||
*/ |
|||
|
|||
.uk-select:not([multiple]):not([size]):disabled { @include svg-fill($internal-form-select-image, "#000", $form-select-disabled-icon-color); } |
|||
|
|||
|
|||
/* Radio and checkbox |
|||
* Note: Does not work in IE11 |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Style |
|||
* 2. Make box more robust so it clips the child element |
|||
* 3. Vertical alignment |
|||
* 4. Remove default style |
|||
* 5. Fix black background on iOS |
|||
* 6. Center icons |
|||
*/ |
|||
|
|||
.uk-radio, |
|||
.uk-checkbox { |
|||
/* 1 */ |
|||
display: inline-block; |
|||
height: $form-radio-size; |
|||
width: $form-radio-size; |
|||
/* 2 */ |
|||
overflow: hidden; |
|||
/* 3 */ |
|||
margin-top: $form-radio-margin-top; |
|||
vertical-align: middle; |
|||
/* 4 */ |
|||
-webkit-appearance: none; |
|||
-moz-appearance: none; |
|||
/* 5 */ |
|||
background-color: $form-radio-background; |
|||
/* 6 */ |
|||
background-repeat: no-repeat; |
|||
background-position: 50% 50%; |
|||
@if(mixin-exists(hook-form-radio)) {@include hook-form-radio();} |
|||
} |
|||
|
|||
.uk-radio { border-radius: 50%; } |
|||
|
|||
/* Focus */ |
|||
.uk-radio:focus, |
|||
.uk-checkbox:focus { |
|||
outline: none; |
|||
@if(mixin-exists(hook-form-radio-focus)) {@include hook-form-radio-focus();} |
|||
} |
|||
|
|||
/* |
|||
* Checked |
|||
*/ |
|||
|
|||
.uk-radio:checked, |
|||
.uk-checkbox:checked, |
|||
.uk-checkbox:indeterminate { |
|||
background-color: $form-radio-checked-background; |
|||
@if(mixin-exists(hook-form-radio-checked)) {@include hook-form-radio-checked();} |
|||
} |
|||
|
|||
/* Focus */ |
|||
.uk-radio:checked:focus, |
|||
.uk-checkbox:checked:focus, |
|||
.uk-checkbox:indeterminate:focus { |
|||
background-color: $form-radio-checked-focus-background; |
|||
@if(mixin-exists(hook-form-radio-checked-focus)) {@include hook-form-radio-checked-focus();} |
|||
} |
|||
|
|||
/* |
|||
* Icons |
|||
*/ |
|||
|
|||
.uk-radio:checked { @include svg-fill($internal-form-radio-image, "#000", $form-radio-checked-icon-color); } |
|||
.uk-checkbox:checked { @include svg-fill($internal-form-checkbox-image, "#000", $form-radio-checked-icon-color); } |
|||
.uk-checkbox:indeterminate { @include svg-fill($internal-form-checkbox-indeterminate-image, "#000", $form-radio-checked-icon-color); } |
|||
|
|||
/* |
|||
* Disabled |
|||
*/ |
|||
|
|||
.uk-radio:disabled, |
|||
.uk-checkbox:disabled { |
|||
background-color: $form-radio-disabled-background; |
|||
@if(mixin-exists(hook-form-radio-disabled)) {@include hook-form-radio-disabled();} |
|||
} |
|||
|
|||
.uk-radio:disabled:checked { @include svg-fill($internal-form-radio-image, "#000", $form-radio-disabled-icon-color); } |
|||
.uk-checkbox:disabled:checked { @include svg-fill($internal-form-checkbox-image, "#000", $form-radio-disabled-icon-color); } |
|||
.uk-checkbox:disabled:indeterminate { @include svg-fill($internal-form-checkbox-indeterminate-image, "#000", $form-radio-disabled-icon-color); } |
|||
|
|||
|
|||
/* Legend |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Legend |
|||
* 1. Behave like block element |
|||
* 2. Correct the color inheritance from `fieldset` elements in IE. |
|||
* 3. Remove padding so people aren't caught out if they zero out fieldsets. |
|||
* 4. Style |
|||
*/ |
|||
|
|||
.uk-legend { |
|||
/* 1 */ |
|||
width: 100%; |
|||
/* 2 */ |
|||
color: inherit; |
|||
/* 3 */ |
|||
padding: 0; |
|||
/* 4 */ |
|||
font-size: $form-legend-font-size; |
|||
line-height: $form-legend-line-height; |
|||
@if(mixin-exists(hook-form-legend)) {@include hook-form-legend();} |
|||
} |
|||
|
|||
|
|||
/* Custom controls |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Container fits its content |
|||
* 2. Create position context |
|||
* 3. Prevent content overflow |
|||
* 4. Behave like most inline-block elements |
|||
*/ |
|||
|
|||
.uk-form-custom { |
|||
/* 1 */ |
|||
display: inline-block; |
|||
/* 2 */ |
|||
position: relative; |
|||
/* 3 */ |
|||
max-width: 100%; |
|||
/* 4 */ |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
/* |
|||
* 1. Position and resize the form control to always cover its container |
|||
* 2. Required for Firefox for positioning to the left |
|||
* 3. Required for Webkit to make `height` work |
|||
* 4. Hide controle and show cursor |
|||
* 5. Needed for the cursor |
|||
* 6. Clip height caused by 5. Needed for Webkit only |
|||
*/ |
|||
|
|||
.uk-form-custom select, |
|||
.uk-form-custom input[type="file"] { |
|||
/* 1 */ |
|||
position: absolute; |
|||
top: 0; |
|||
z-index: 1; |
|||
width: 100%; |
|||
height: 100%; |
|||
/* 2 */ |
|||
left: 0; |
|||
/* 3 */ |
|||
-webkit-appearance: none; |
|||
/* 4 */ |
|||
opacity: 0; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.uk-form-custom input[type="file"] { |
|||
/* 5 */ |
|||
font-size: 500px; |
|||
/* 6 */ |
|||
overflow: hidden; |
|||
} |
|||
|
|||
|
|||
/* Label |
|||
========================================================================== */ |
|||
|
|||
.uk-form-label { |
|||
@if(mixin-exists(hook-form-label)) {@include hook-form-label();} |
|||
} |
|||
|
|||
|
|||
/* Layout |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Stacked |
|||
*/ |
|||
|
|||
.uk-form-stacked .uk-form-label { |
|||
display: block; |
|||
margin-bottom: $form-stacked-margin-bottom; |
|||
@if(mixin-exists(hook-form-stacked-label)) {@include hook-form-stacked-label();} |
|||
} |
|||
|
|||
/* |
|||
* Horizontal |
|||
*/ |
|||
|
|||
/* Tablet portrait and smaller */ |
|||
@media (max-width: $breakpoint-small-max) { |
|||
|
|||
/* Behave like `uk-form-stacked` */ |
|||
.uk-form-horizontal .uk-form-label { |
|||
display: block; |
|||
margin-bottom: $form-stacked-margin-bottom; |
|||
@if(mixin-exists(hook-form-stacked-label)) {@include hook-form-stacked-label();} |
|||
} |
|||
|
|||
} |
|||
|
|||
/* Tablet landscape and bigger */ |
|||
@media (min-width: $breakpoint-medium) { |
|||
|
|||
.uk-form-horizontal .uk-form-label { |
|||
width: $form-horizontal-label-width; |
|||
margin-top: $form-horizontal-label-margin-top; |
|||
float: left; |
|||
@if(mixin-exists(hook-form-horizontal-label)) {@include hook-form-horizontal-label();} |
|||
} |
|||
|
|||
.uk-form-horizontal .uk-form-controls { margin-left: $form-horizontal-controls-margin-left; } |
|||
|
|||
/* Better vertical alignment if controls are checkboxes and radio buttons with text */ |
|||
.uk-form-horizontal .uk-form-controls-text { padding-top: $form-horizontal-controls-text-padding-top; } |
|||
|
|||
} |
|||
|
|||
|
|||
/* Icons |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Set position |
|||
* 2. Set width |
|||
* 3. Center icon vertically and horizontally |
|||
* 4. Style |
|||
*/ |
|||
|
|||
.uk-form-icon { |
|||
/* 1 */ |
|||
position: absolute; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
/* 2 */ |
|||
width: $form-icon-width; |
|||
/* 3 */ |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
/* 4 */ |
|||
color: $form-icon-color; |
|||
} |
|||
|
|||
/* |
|||
* Required for `a`. |
|||
*/ |
|||
|
|||
.uk-form-icon:hover { color: $form-icon-hover-color; } |
|||
|
|||
/* |
|||
* Make `input` element clickable through icon, e.g. if it's a `span` |
|||
*/ |
|||
|
|||
.uk-form-icon:not(a):not(button):not(input) { pointer-events: none; } |
|||
|
|||
/* |
|||
* Input padding |
|||
*/ |
|||
|
|||
.uk-form-icon:not(.uk-form-icon-flip) + .uk-input { padding-left: $form-icon-width !important; } |
|||
|
|||
/* |
|||
* Position modifier |
|||
*/ |
|||
|
|||
.uk-form-icon-flip { |
|||
right: 0; |
|||
left: auto; |
|||
} |
|||
|
|||
.uk-form-icon-flip + .uk-input { padding-right: $form-icon-width !important; } |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-form-misc)) {@include hook-form-misc();} |
|||
|
|||
// @mixin hook-form(){} |
|||
// @mixin hook-form-single-line(){} |
|||
// @mixin hook-form-multi-line(){} |
|||
// @mixin hook-form-focus(){} |
|||
// @mixin hook-form-disabled(){} |
|||
// @mixin hook-form-danger(){} |
|||
// @mixin hook-form-success(){} |
|||
// @mixin hook-form-blank(){} |
|||
// @mixin hook-form-blank-focus(){} |
|||
// @mixin hook-form-radio(){} |
|||
// @mixin hook-form-radio-focus(){} |
|||
// @mixin hook-form-radio-checked(){} |
|||
// @mixin hook-form-radio-checked-focus(){} |
|||
// @mixin hook-form-radio-disabled(){} |
|||
// @mixin hook-form-legend(){} |
|||
// @mixin hook-form-label(){} |
|||
// @mixin hook-form-stacked-label(){} |
|||
// @mixin hook-form-horizontal-label(){} |
|||
// @mixin hook-form-misc(){} |
|||
|
|||
|
|||
// Inverse |
|||
// ======================================================================== |
|||
|
|||
$inverse-form-background: $inverse-global-muted-background !default; |
|||
$inverse-form-color: $inverse-global-color !default; |
|||
$inverse-form-focus-background: $inverse-global-muted-background !default; |
|||
$inverse-form-focus-color: $inverse-global-color !default; |
|||
$inverse-form-placeholder-color: $inverse-global-muted-color !default; |
|||
|
|||
$inverse-form-select-icon-color: $inverse-global-color !default; |
|||
|
|||
$inverse-form-radio-background: darken($inverse-global-muted-background, 5%) !default; |
|||
|
|||
$inverse-form-radio-checked-background: $inverse-global-primary-background !default; |
|||
$inverse-form-radio-checked-icon-color: $inverse-global-inverse-color !default; |
|||
|
|||
$inverse-form-radio-checked-focus-background: darken($inverse-global-primary-background, 10%) !default; |
|||
|
|||
|
|||
|
|||
// @mixin hook-inverse-form(){} |
|||
// @mixin hook-inverse-form-focus(){} |
|||
// @mixin hook-inverse-form-radio(){} |
|||
// @mixin hook-inverse-form-radio-focus(){} |
|||
// @mixin hook-inverse-form-radio-checked(){} |
|||
// @mixin hook-inverse-form-radio-checked-focus(){} |
|||
// @mixin hook-inverse-form-label(){} |
|||
@ -0,0 +1,352 @@ |
|||
// Name: Grid |
|||
// Description: Component to create responsive, fluid and nestable grids |
|||
// |
|||
// Component: `uk-grid` |
|||
// |
|||
// Modifiers: `uk-grid-small` |
|||
// `uk-grid-medium` |
|||
// `uk-grid-large` |
|||
// `uk-grid-collapse` |
|||
// `uk-grid-divider` |
|||
// `uk-grid-match` |
|||
// `uk-grid-stack` |
|||
// `uk-grid-margin` |
|||
// `uk-grid-margin-small` |
|||
// `uk-grid-margin-medium` |
|||
// `uk-grid-margin-large` |
|||
// `uk-grid-margin-collapse` |
|||
// |
|||
// Sub-modifier: `uk-grid-item-match` |
|||
// |
|||
// States: `uk-first-column` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$grid-gutter-horizontal: $global-gutter !default; |
|||
$grid-gutter-vertical: $grid-gutter-horizontal !default; |
|||
$grid-gutter-horizontal-l: $global-medium-gutter !default; |
|||
$grid-gutter-vertical-l: $grid-gutter-horizontal-l !default; |
|||
|
|||
$grid-small-gutter-horizontal: $global-small-gutter !default; |
|||
$grid-small-gutter-vertical: $grid-small-gutter-horizontal !default; |
|||
|
|||
$grid-medium-gutter-horizontal: $global-gutter !default; |
|||
$grid-medium-gutter-vertical: $grid-medium-gutter-horizontal !default; |
|||
|
|||
$grid-large-gutter-horizontal: $global-medium-gutter !default; |
|||
$grid-large-gutter-vertical: $grid-large-gutter-horizontal !default; |
|||
$grid-large-gutter-horizontal-l: $global-large-gutter !default; |
|||
$grid-large-gutter-vertical-l: $grid-large-gutter-horizontal-l !default; |
|||
|
|||
$grid-divider-border-width: $global-border-width !default; |
|||
$grid-divider-border: $global-border !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Grid |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Allow cells to wrap into the next line |
|||
* 2. Reset list |
|||
*/ |
|||
|
|||
.uk-grid { |
|||
display: flex; |
|||
/* 1 */ |
|||
flex-wrap: wrap; |
|||
/* 2 */ |
|||
margin: 0; |
|||
padding: 0; |
|||
list-style: none; |
|||
} |
|||
|
|||
/* |
|||
* Grid cell |
|||
* Note: Space is allocated solely based on content dimensions, but shrinks: 0 1 auto |
|||
* Reset margin for e.g. paragraphs |
|||
*/ |
|||
|
|||
.uk-grid > * { margin: 0; } |
|||
|
|||
/* |
|||
* Remove margin from the last-child |
|||
*/ |
|||
|
|||
.uk-grid > * > :last-child { margin-bottom: 0; } |
|||
|
|||
|
|||
/* Gutter |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Default |
|||
*/ |
|||
|
|||
/* Horizontal */ |
|||
.uk-grid { margin-left: (-$grid-gutter-horizontal); } |
|||
.uk-grid > * { padding-left: $grid-gutter-horizontal; } |
|||
|
|||
/* Vertical */ |
|||
.uk-grid + .uk-grid, |
|||
.uk-grid > .uk-grid-margin, |
|||
* + .uk-grid-margin { margin-top: $grid-gutter-vertical; } |
|||
|
|||
/* Desktop and bigger */ |
|||
@media (min-width: $breakpoint-large) { |
|||
|
|||
/* Horizontal */ |
|||
.uk-grid { margin-left: (-$grid-gutter-horizontal-l); } |
|||
.uk-grid > * { padding-left: $grid-gutter-horizontal-l; } |
|||
|
|||
/* Vertical */ |
|||
.uk-grid + .uk-grid, |
|||
.uk-grid > .uk-grid-margin, |
|||
* + .uk-grid-margin { margin-top: $grid-gutter-vertical-l; } |
|||
|
|||
} |
|||
|
|||
/* |
|||
* Small |
|||
*/ |
|||
|
|||
/* Horizontal */ |
|||
.uk-grid-small { margin-left: (-$grid-small-gutter-horizontal); } |
|||
.uk-grid-small > * { padding-left: $grid-small-gutter-horizontal; } |
|||
|
|||
/* Vertical */ |
|||
.uk-grid + .uk-grid-small, |
|||
.uk-grid-small > .uk-grid-margin, |
|||
* + .uk-grid-margin-small { margin-top: $grid-small-gutter-vertical; } |
|||
|
|||
/* |
|||
* Medium |
|||
*/ |
|||
|
|||
/* Horizontal */ |
|||
.uk-grid-medium { margin-left: (-$grid-medium-gutter-horizontal); } |
|||
.uk-grid-medium > * { padding-left: $grid-medium-gutter-horizontal; } |
|||
|
|||
/* Vertical */ |
|||
.uk-grid + .uk-grid-medium, |
|||
.uk-grid-medium > .uk-grid-margin, |
|||
* + .uk-grid-margin-medium { margin-top: $grid-medium-gutter-vertical; } |
|||
|
|||
/* |
|||
* Large |
|||
*/ |
|||
|
|||
/* Horizontal */ |
|||
.uk-grid-large { margin-left: (-$grid-large-gutter-horizontal); } |
|||
.uk-grid-large > * { padding-left: $grid-large-gutter-horizontal; } |
|||
|
|||
/* Vertical */ |
|||
.uk-grid + .uk-grid-large, |
|||
.uk-grid-large > .uk-grid-margin, |
|||
* + .uk-grid-margin-large { margin-top: $grid-large-gutter-vertical; } |
|||
|
|||
/* Desktop and bigger */ |
|||
@media (min-width: $breakpoint-large) { |
|||
|
|||
/* Horizontal */ |
|||
.uk-grid-large { margin-left: (-$grid-large-gutter-horizontal-l); } |
|||
.uk-grid-large > * { padding-left: $grid-large-gutter-horizontal-l; } |
|||
|
|||
/* Vertical */ |
|||
.uk-grid + .uk-grid-large, |
|||
.uk-grid-large > .uk-grid-margin, |
|||
* + .uk-grid-margin-large { margin-top: $grid-large-gutter-vertical-l; } |
|||
|
|||
} |
|||
|
|||
/* |
|||
* Collapse |
|||
*/ |
|||
|
|||
/* Horizontal */ |
|||
.uk-grid-collapse { margin-left: 0; } |
|||
.uk-grid-collapse > * { padding-left: 0; } |
|||
|
|||
/* Vertical */ |
|||
.uk-grid + .uk-grid-collapse, |
|||
.uk-grid-collapse > .uk-grid-margin { margin-top: 0; } |
|||
|
|||
|
|||
/* Divider |
|||
========================================================================== */ |
|||
|
|||
.uk-grid-divider > * { position: relative; } |
|||
|
|||
.uk-grid-divider > :not(.uk-first-column)::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
bottom: 0; |
|||
border-left: $grid-divider-border-width solid $grid-divider-border; |
|||
} |
|||
|
|||
/* Vertical */ |
|||
.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before { |
|||
content: ""; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
border-top: $grid-divider-border-width solid $grid-divider-border; |
|||
} |
|||
|
|||
/* |
|||
* Default |
|||
*/ |
|||
|
|||
/* Horizontal */ |
|||
.uk-grid-divider { margin-left: -($grid-gutter-horizontal * 2); } |
|||
.uk-grid-divider > * { padding-left: ($grid-gutter-horizontal * 2); } |
|||
|
|||
.uk-grid-divider > :not(.uk-first-column)::before { left: $grid-gutter-horizontal; } |
|||
|
|||
/* Vertical */ |
|||
.uk-grid-divider.uk-grid-stack > .uk-grid-margin { margin-top: ($grid-gutter-vertical * 2); } |
|||
|
|||
.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before { |
|||
top: (-$grid-gutter-vertical); |
|||
left: ($grid-gutter-horizontal * 2); |
|||
} |
|||
|
|||
/* Desktop and bigger */ |
|||
@media (min-width: $breakpoint-large) { |
|||
|
|||
/* Horizontal */ |
|||
.uk-grid-divider { margin-left: -($grid-gutter-horizontal-l * 2); } |
|||
.uk-grid-divider > * { padding-left: ($grid-gutter-horizontal-l * 2); } |
|||
|
|||
.uk-grid-divider > :not(.uk-first-column)::before { left: $grid-gutter-horizontal-l; } |
|||
|
|||
/* Vertical */ |
|||
.uk-grid-divider.uk-grid-stack > .uk-grid-margin { margin-top: ($grid-gutter-vertical-l * 2); } |
|||
|
|||
.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before { |
|||
top: (-$grid-gutter-vertical-l); |
|||
left: ($grid-gutter-horizontal-l * 2); |
|||
} |
|||
|
|||
} |
|||
|
|||
/* |
|||
* Small |
|||
*/ |
|||
|
|||
/* Horizontal */ |
|||
.uk-grid-divider.uk-grid-small { margin-left: -($grid-small-gutter-horizontal * 2); } |
|||
.uk-grid-divider.uk-grid-small > * { padding-left: ($grid-small-gutter-horizontal * 2); } |
|||
|
|||
.uk-grid-divider.uk-grid-small > :not(.uk-first-column)::before { left: $grid-small-gutter-horizontal; } |
|||
|
|||
/* Vertical */ |
|||
.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin { margin-top: ($grid-small-gutter-vertical * 2); } |
|||
|
|||
.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin::before { |
|||
top: (-$grid-small-gutter-vertical); |
|||
left: ($grid-small-gutter-horizontal * 2); |
|||
} |
|||
|
|||
/* |
|||
* Medium |
|||
*/ |
|||
|
|||
/* Horizontal */ |
|||
.uk-grid-divider.uk-grid-medium { margin-left: -($grid-medium-gutter-horizontal * 2); } |
|||
.uk-grid-divider.uk-grid-medium > * { padding-left: ($grid-medium-gutter-horizontal * 2); } |
|||
|
|||
.uk-grid-divider.uk-grid-medium > :not(.uk-first-column)::before { left: $grid-medium-gutter-horizontal; } |
|||
|
|||
/* Vertical */ |
|||
.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin { margin-top: ($grid-medium-gutter-vertical * 2); } |
|||
|
|||
.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin::before { |
|||
top: (-$grid-medium-gutter-vertical); |
|||
left: ($grid-medium-gutter-horizontal * 2); |
|||
} |
|||
|
|||
/* |
|||
* Large |
|||
*/ |
|||
|
|||
/* Horizontal */ |
|||
.uk-grid-divider.uk-grid-large { margin-left: -($grid-large-gutter-horizontal * 2); } |
|||
.uk-grid-divider.uk-grid-large > * { padding-left: ($grid-large-gutter-horizontal * 2); } |
|||
|
|||
.uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before { left: $grid-large-gutter-horizontal; } |
|||
|
|||
/* Vertical */ |
|||
.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin { margin-top: ($grid-large-gutter-vertical * 2); } |
|||
|
|||
.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before { |
|||
top: (-$grid-large-gutter-vertical); |
|||
left: ($grid-large-gutter-horizontal * 2); |
|||
} |
|||
|
|||
/* Desktop and bigger */ |
|||
@media (min-width: $breakpoint-large) { |
|||
|
|||
/* Horizontal */ |
|||
.uk-grid-divider.uk-grid-large { margin-left: -($grid-large-gutter-horizontal-l * 2); } |
|||
.uk-grid-divider.uk-grid-large > * { padding-left: ($grid-large-gutter-horizontal-l * 2); } |
|||
|
|||
.uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before { left: $grid-large-gutter-horizontal-l; } |
|||
|
|||
/* Vertical */ |
|||
.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin { margin-top: ($grid-large-gutter-vertical-l * 2); } |
|||
|
|||
.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before { |
|||
top: (-$grid-large-gutter-vertical-l); |
|||
left: ($grid-large-gutter-horizontal-l * 2); |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
/* Match child of a grid cell |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Behave like a block element |
|||
* 1. Wrap into the next line |
|||
* 2. Take the full width, at least 100%. Only if no class from the Width component is set. |
|||
* 3. Expand width even if larger than 100%, e.g. because of negative margin (Needed for nested grids) |
|||
*/ |
|||
|
|||
.uk-grid-match > *, |
|||
.uk-grid-item-match { |
|||
display: flex; |
|||
/* 1 */ |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.uk-grid-match > * > :not([class*='uk-width']), |
|||
.uk-grid-item-match > :not([class*='uk-width']) { |
|||
/* 2 */ |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
/* 3 */ |
|||
flex: auto; |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-grid-misc)) {@include hook-grid-misc();} |
|||
|
|||
// @mixin hook-grid-misc(){} |
|||
|
|||
|
|||
// Inverse |
|||
// ======================================================================== |
|||
|
|||
$inverse-grid-divider-border: $inverse-global-border !default; |
|||
|
|||
|
|||
@ -0,0 +1,214 @@ |
|||
// Name: Heading |
|||
// Description: Styles for headings |
|||
// |
|||
// Component: `uk-heading-primary` |
|||
// `uk-heading-hero` |
|||
// `uk-heading-divider` |
|||
// `uk-heading-bullet` |
|||
// `uk-heading-line` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$heading-primary-font-size: $global-xxlarge-font-size !default; |
|||
$heading-primary-line-height: 1.2 !default; |
|||
|
|||
$heading-primary-font-size-m: 3.75rem !default; // 54px |
|||
$heading-primary-line-height-m: 1.1 !default; |
|||
|
|||
$heading-hero-font-size: 4rem !default; // 64px |
|||
$heading-hero-line-height: 1.1 !default; |
|||
|
|||
$heading-hero-font-size-s: 6rem !default; // 96px |
|||
$heading-hero-line-height-s: 1 !default; |
|||
|
|||
$heading-hero-font-size-m: 8rem !default; // 128px |
|||
$heading-hero-line-height-m: 1 !default; |
|||
|
|||
$heading-divider-padding-bottom: 10px !default; |
|||
$heading-divider-border-width: $global-border-width !default; |
|||
$heading-divider-border: $global-border !default; |
|||
|
|||
$heading-bullet-top: unquote('calc(-0.1 * 1em)') !default; |
|||
$heading-bullet-height: 0.9em !default; |
|||
$heading-bullet-margin-right: 10px !default; |
|||
$heading-bullet-border-width: 5px !default; |
|||
$heading-bullet-border: $global-border !default; |
|||
|
|||
$heading-line-top: 50% !default; |
|||
$heading-line-height: $heading-line-border-width !default; |
|||
$heading-line-width: 2000px !default; |
|||
$heading-line-border-width: $global-border-width !default; |
|||
$heading-line-border: $global-border !default; |
|||
$heading-line-margin-horizontal: 0.6em !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Heading |
|||
========================================================================== */ |
|||
|
|||
|
|||
/* Primary |
|||
========================================================================== */ |
|||
|
|||
.uk-heading-primary { |
|||
font-size: $heading-primary-font-size; |
|||
line-height: $heading-primary-line-height; |
|||
@if(mixin-exists(hook-heading-primary)) {@include hook-heading-primary();} |
|||
} |
|||
|
|||
/* Tablet landscape and bigger */ |
|||
@media (min-width: $breakpoint-medium) { |
|||
|
|||
.uk-heading-primary { |
|||
font-size: $heading-primary-font-size-m; |
|||
line-height: $heading-primary-line-height-m; |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
/* Hero |
|||
========================================================================== */ |
|||
|
|||
.uk-heading-hero { |
|||
font-size: $heading-hero-font-size; |
|||
line-height: $heading-hero-line-height; |
|||
@if(mixin-exists(hook-heading-hero)) {@include hook-heading-hero();} |
|||
} |
|||
|
|||
/* Phone landscape and bigger */ |
|||
@media (min-width: $breakpoint-small) { |
|||
|
|||
.uk-heading-hero { |
|||
font-size: $heading-hero-font-size-s; |
|||
line-height: $heading-hero-line-height-s; |
|||
} |
|||
|
|||
} |
|||
|
|||
/* Tablet landscape and bigger */ |
|||
@media (min-width: $breakpoint-medium) { |
|||
|
|||
.uk-heading-hero { |
|||
font-size: $heading-hero-font-size-m; |
|||
line-height: $heading-hero-line-height-m; |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
/* Divider |
|||
========================================================================== */ |
|||
|
|||
.uk-heading-divider { |
|||
padding-bottom: $heading-divider-padding-bottom; |
|||
border-bottom: $heading-divider-border-width solid $heading-divider-border; |
|||
@if(mixin-exists(hook-heading-divider)) {@include hook-heading-divider();} |
|||
} |
|||
|
|||
|
|||
/* Bullet |
|||
========================================================================== */ |
|||
|
|||
.uk-heading-bullet { position: relative; } |
|||
|
|||
/* |
|||
* 1. Using `inline-block` to make it work with text alignment |
|||
* 2. Center vertically |
|||
* 3. Style |
|||
*/ |
|||
|
|||
.uk-heading-bullet::before { |
|||
content: ""; |
|||
/* 1 */ |
|||
display: inline-block; |
|||
/* 2 */ |
|||
position: relative; |
|||
top: $heading-bullet-top; |
|||
vertical-align: middle; |
|||
/* 3 */ |
|||
height: $heading-bullet-height; |
|||
margin-right: $heading-bullet-margin-right; |
|||
border-left: $heading-bullet-border-width solid $heading-bullet-border; |
|||
@if(mixin-exists(hook-heading-bullet)) {@include hook-heading-bullet();} |
|||
} |
|||
|
|||
|
|||
/* Line |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Clip the child element |
|||
*/ |
|||
|
|||
.uk-heading-line { overflow: hidden; } |
|||
|
|||
/* |
|||
* Extra markup is needed to make it work with text align |
|||
*/ |
|||
|
|||
.uk-heading-line > * { |
|||
display: inline-block; |
|||
position: relative; |
|||
} |
|||
|
|||
/* |
|||
* 1. Center vertically |
|||
* 2. Make the element as large as possible. It's clipped by the container. |
|||
* 3. Style |
|||
*/ |
|||
|
|||
.uk-heading-line > ::before, |
|||
.uk-heading-line > ::after { |
|||
content: ""; |
|||
/* 1 */ |
|||
position: absolute; |
|||
top: unquote('calc(#{$heading-line-top} - (#{$heading-line-height} / 2))'); |
|||
/* 2 */ |
|||
width: $heading-line-width; |
|||
/* 3 */ |
|||
border-bottom: $heading-line-border-width solid $heading-line-border; |
|||
@if(mixin-exists(hook-heading-line)) {@include hook-heading-line();} |
|||
} |
|||
|
|||
.uk-heading-line > ::before { |
|||
right: 100%; |
|||
margin-right: $heading-line-margin-horizontal; |
|||
} |
|||
.uk-heading-line > ::after { |
|||
left: 100%; |
|||
margin-left: $heading-line-margin-horizontal; |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-heading-misc)) {@include hook-heading-misc();} |
|||
|
|||
// @mixin hook-heading-primary(){} |
|||
// @mixin hook-heading-hero(){} |
|||
// @mixin hook-heading-divider(){} |
|||
// @mixin hook-heading-bullet(){} |
|||
// @mixin hook-heading-line(){} |
|||
// @mixin hook-heading-misc(){} |
|||
|
|||
|
|||
// Inverse |
|||
// ======================================================================== |
|||
|
|||
$inverse-heading-divider-border: $inverse-global-border !default; |
|||
$inverse-heading-bullet-border: $inverse-global-border !default; |
|||
$inverse-heading-line-border: $inverse-global-border !default; |
|||
|
|||
|
|||
|
|||
// @mixin hook-inverse-heading-primary(){} |
|||
// @mixin hook-inverse-heading-hero(){} |
|||
// @mixin hook-inverse-heading-divider(){} |
|||
// @mixin hook-inverse-heading-bullet(){} |
|||
// @mixin hook-inverse-heading-line(){} |
|||
@ -0,0 +1,223 @@ |
|||
// Name: Icon |
|||
// Description: Component to create icons |
|||
// |
|||
// Component: `uk-icon` |
|||
// |
|||
// Modifiers: `uk-icon-image` |
|||
// `uk-icon-link` |
|||
// `uk-icon-button` |
|||
// |
|||
// States: `uk-preserve` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$icon-image-size: 20px !default; |
|||
|
|||
$icon-link-color: $global-muted-color !default; |
|||
$icon-link-hover-color: $global-color !default; |
|||
$icon-link-active-color: darken($global-color, 5%) !default; |
|||
|
|||
$icon-button-size: 36px !default; |
|||
$icon-button-border-radius: 500px !default; |
|||
$icon-button-background: $global-muted-background !default; |
|||
$icon-button-color: $global-muted-color !default; |
|||
|
|||
$icon-button-hover-background: darken($icon-button-background, 5%) !default; |
|||
$icon-button-hover-color: $global-color !default; |
|||
|
|||
$icon-button-active-background: darken($icon-button-background, 10%) !default; |
|||
$icon-button-active-color: $global-color !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Icon |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Note: 1. - 7. is required for `button` elements. Needed for Close and Form Icon component. |
|||
* 1. Remove margins in Chrome, Safari and Opera. |
|||
* 2. Remove borders for `button`. |
|||
* 3. Remove border-radius in Chrome. |
|||
* 4. Address `overflow` set to `hidden` in IE. |
|||
* 5. Correct `font` properties and `color` not being inherited for `button`. |
|||
* 6. Remove the inheritance of text transform in Edge, Firefox, and IE. |
|||
* 7. Remove default `button` padding and background color |
|||
* 8. Style |
|||
* 9. Fill all SVG elements with the current text color if no `fill` attribute is set |
|||
* 10. Let the container fit the height of the icon |
|||
*/ |
|||
|
|||
.uk-icon { |
|||
/* 1 */ |
|||
margin: 0; |
|||
/* 2 */ |
|||
border: none; |
|||
/* 3 */ |
|||
border-radius: 0; |
|||
/* 4 */ |
|||
overflow: visible; |
|||
/* 5 */ |
|||
font: inherit; |
|||
color: inherit; |
|||
/* 6 */ |
|||
text-transform: none; |
|||
/* 7. */ |
|||
padding: 0; |
|||
background-color: transparent; |
|||
/* 8 */ |
|||
display: inline-block; |
|||
/* 9 */ |
|||
fill: currentcolor; |
|||
/* 10 */ |
|||
line-height: 0; |
|||
} |
|||
|
|||
/* Required for `button`. */ |
|||
button.uk-icon:not(:disabled) { cursor: pointer; } |
|||
|
|||
/* |
|||
* Remove the inner border and padding in Firefox. |
|||
*/ |
|||
|
|||
.uk-icon::-moz-focus-inner { |
|||
border: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
/* |
|||
* Set the fill and stroke color of all SVG elements to the current text color |
|||
* 1. Fix for uppercase attribute names in Edge. Will be fixed in Windows 10 builds 16251+ |
|||
*/ |
|||
|
|||
.uk-icon [fill*='#']:not(.uk-preserve), |
|||
.uk-icon [FILL*='#']:not(.uk-preserve) { fill: currentcolor; } // 1 |
|||
.uk-icon [stroke*='#']:not(.uk-preserve), |
|||
.uk-icon [STROKE*='#']:not(.uk-preserve) { stroke: currentcolor; } // 1 |
|||
|
|||
/* |
|||
* Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835 |
|||
*/ |
|||
|
|||
.uk-icon > * { transform: translate(0,0); } |
|||
|
|||
|
|||
/* Image modifier |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Display images in icon dimensions |
|||
*/ |
|||
|
|||
.uk-icon-image { |
|||
width: $icon-image-size; |
|||
height: $icon-image-size; |
|||
background-position: 50% 50%; |
|||
background-repeat: no-repeat; |
|||
background-size: contain; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
|
|||
/* Style modifiers |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Link |
|||
*/ |
|||
|
|||
.uk-icon-link { |
|||
color: $icon-link-color; |
|||
@if(mixin-exists(hook-icon-link)) {@include hook-icon-link();} |
|||
} |
|||
|
|||
.uk-icon-link:hover, |
|||
.uk-icon-link:focus { |
|||
color: $icon-link-hover-color; |
|||
outline: none; |
|||
@if(mixin-exists(hook-icon-link-hover)) {@include hook-icon-link-hover();} |
|||
} |
|||
|
|||
/* OnClick + Active */ |
|||
.uk-icon-link:active, |
|||
.uk-active > .uk-icon-link { |
|||
color: $icon-link-active-color; |
|||
@if(mixin-exists(hook-icon-link-active)) {@include hook-icon-link-active();} |
|||
} |
|||
|
|||
/* |
|||
* Button |
|||
* 1. Center icon vertically and horizontally |
|||
*/ |
|||
|
|||
.uk-icon-button { |
|||
box-sizing: border-box; |
|||
width: $icon-button-size; |
|||
height: $icon-button-size; |
|||
border-radius: $icon-button-border-radius; |
|||
background: $icon-button-background; |
|||
color: $icon-button-color; |
|||
vertical-align: middle; |
|||
/* 1 */ |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
@if(mixin-exists(hook-icon-button)) {@include hook-icon-button();} |
|||
} |
|||
|
|||
/* Hover + Focus */ |
|||
.uk-icon-button:hover, |
|||
.uk-icon-button:focus { |
|||
background-color: $icon-button-hover-background; |
|||
color: $icon-button-hover-color; |
|||
outline: none; |
|||
@if(mixin-exists(hook-icon-button-hover)) {@include hook-icon-button-hover();} |
|||
} |
|||
|
|||
/* OnClick + Active */ |
|||
.uk-icon-button:active, |
|||
.uk-active > .uk-icon-button { |
|||
background-color: $icon-button-active-background; |
|||
color: $icon-button-active-color; |
|||
@if(mixin-exists(hook-icon-button-active)) {@include hook-icon-button-active();} |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-icon-misc)) {@include hook-icon-misc();} |
|||
|
|||
// @mixin hook-icon-link(){} |
|||
// @mixin hook-icon-link-hover(){} |
|||
// @mixin hook-icon-link-active(){} |
|||
// @mixin hook-icon-button(){} |
|||
// @mixin hook-icon-button-hover(){} |
|||
// @mixin hook-icon-button-active(){} |
|||
// @mixin hook-icon-misc(){} |
|||
|
|||
|
|||
// Inverse |
|||
// ======================================================================== |
|||
|
|||
$inverse-icon-link-color: $inverse-global-muted-color !default; |
|||
$inverse-icon-link-hover-color: $inverse-global-color !default; |
|||
$inverse-icon-link-active-color: $inverse-global-color !default; |
|||
$inverse-icon-button-background: $inverse-global-muted-background !default; |
|||
$inverse-icon-button-color: $inverse-global-muted-color !default; |
|||
$inverse-icon-button-hover-background: darken($inverse-icon-button-background, 5%) !default; |
|||
$inverse-icon-button-hover-color: $inverse-global-color !default; |
|||
$inverse-icon-button-active-background: darken($inverse-icon-button-background, 10%) !default; |
|||
$inverse-icon-button-active-color: $inverse-global-color !default; |
|||
|
|||
|
|||
|
|||
// @mixin hook-inverse-icon-link(){} |
|||
// @mixin hook-inverse-icon-link-hover(){} |
|||
// @mixin hook-inverse-icon-link-active(){} |
|||
// @mixin hook-inverse-icon-button(){} |
|||
// @mixin hook-inverse-icon-button-hover(){} |
|||
// @mixin hook-inverse-icon-button-active(){} |
|||
@ -0,0 +1,140 @@ |
|||
// Name: Iconnav |
|||
// Description: Component to create icon navigations |
|||
// |
|||
// Component: `uk-iconnav` |
|||
// |
|||
// Modifier: `uk-iconnav-vertical` |
|||
// |
|||
// States: `uk-active` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$iconnav-margin-horizontal: $global-small-margin !default; |
|||
$iconnav-margin-vertical: $iconnav-margin-horizontal !default; |
|||
|
|||
$iconnav-item-color: $global-muted-color !default; |
|||
|
|||
$iconnav-item-hover-color: $global-color !default; |
|||
|
|||
$iconnav-item-active-color: $global-color !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Iconnav |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Allow items to wrap into the next line |
|||
* 2. Reset list |
|||
* 3. Gutter |
|||
*/ |
|||
|
|||
.uk-iconnav { |
|||
display: flex; |
|||
/* 1 */ |
|||
flex-wrap: wrap; |
|||
/* 2 */ |
|||
margin: 0; |
|||
padding: 0; |
|||
list-style: none; |
|||
/* 3 */ |
|||
margin-left: (-$iconnav-margin-horizontal); |
|||
@if(mixin-exists(hook-iconnav)) {@include hook-iconnav();} |
|||
} |
|||
|
|||
/* |
|||
* 1. Space is allocated solely based on content dimensions: 0 0 auto |
|||
* 2. Gutter |
|||
*/ |
|||
|
|||
.uk-iconnav > * { |
|||
/* 1 */ |
|||
flex: none; |
|||
/* 2 */ |
|||
padding-left: $iconnav-margin-horizontal; |
|||
} |
|||
|
|||
|
|||
/* Items |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Items must target `a` elements to exclude other elements (e.g. dropdowns) |
|||
* 1. Prevent gap if child element is `inline-block`, e.g. an icon |
|||
* 2. Style |
|||
*/ |
|||
|
|||
.uk-iconnav > * > a { |
|||
/* 1 */ |
|||
display: block; |
|||
/* 2 */ |
|||
color: $iconnav-item-color; |
|||
@if(mixin-exists(hook-iconnav-item)) {@include hook-iconnav-item();} |
|||
} |
|||
|
|||
/* Hover + Focus */ |
|||
.uk-iconnav > * > a:hover, |
|||
.uk-iconnav > * > a:focus { |
|||
color: $iconnav-item-hover-color; |
|||
outline: none; |
|||
@if(mixin-exists(hook-iconnav-item-hover)) {@include hook-iconnav-item-hover();} |
|||
} |
|||
|
|||
/* Active */ |
|||
.uk-iconnav > .uk-active > a { |
|||
color: $iconnav-item-active-color; |
|||
@if(mixin-exists(hook-iconnav-item-active)) {@include hook-iconnav-item-active();} |
|||
} |
|||
|
|||
|
|||
/* Modifier: 'uk-iconnav-vertical' |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Change direction |
|||
* 2. Gutter |
|||
*/ |
|||
|
|||
.uk-iconnav-vertical { |
|||
/* 1 */ |
|||
flex-direction: column; |
|||
/* 2 */ |
|||
margin-left: 0; |
|||
margin-top: (-$iconnav-margin-vertical); |
|||
} |
|||
|
|||
/* 2 */ |
|||
.uk-iconnav-vertical > * { |
|||
padding-left: 0; |
|||
padding-top: $iconnav-margin-vertical; |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-iconnav-misc)) {@include hook-iconnav-misc();} |
|||
|
|||
// @mixin hook-iconnav(){} |
|||
// @mixin hook-iconnav-item(){} |
|||
// @mixin hook-iconnav-item-hover(){} |
|||
// @mixin hook-iconnav-item-active(){} |
|||
// @mixin hook-iconnav-misc(){} |
|||
|
|||
|
|||
// Inverse |
|||
// ======================================================================== |
|||
|
|||
$inverse-iconnav-item-color: $inverse-global-muted-color !default; |
|||
$inverse-iconnav-item-hover-color: $inverse-global-color !default; |
|||
$inverse-iconnav-item-active-color: $inverse-global-color !default; |
|||
|
|||
|
|||
|
|||
// @mixin hook-inverse-iconnav-item(){} |
|||
// @mixin hook-inverse-iconnav-item-hover(){} |
|||
// @mixin hook-inverse-iconnav-item-active(){} |
|||
@ -0,0 +1,46 @@ |
|||
// Name: Inverse |
|||
// Description: Inverse component style for light or dark backgrounds |
|||
// |
|||
// Component: `uk-light` |
|||
// `uk-dark` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$inverse-global-color-mode: light !default; |
|||
|
|||
$inverse-global-color: rgba($global-inverse-color, 0.7) !default; |
|||
$inverse-global-emphasis-color: $global-inverse-color !default; |
|||
$inverse-global-muted-color: rgba($global-inverse-color, 0.5) !default; |
|||
$inverse-global-inverse-color: $global-color !default; |
|||
|
|||
$inverse-global-primary-background: $global-inverse-color !default; |
|||
$inverse-global-muted-background: rgba($global-inverse-color, 0.1) !default; |
|||
|
|||
$inverse-global-border: rgba($global-inverse-color, 0.2) !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Inverse |
|||
========================================================================== */ |
|||
|
|||
|
|||
|
|||
/* |
|||
* Implemented class depends on the general theme color |
|||
* `uk-light` is for light colors on dark backgrounds |
|||
* `uk-dark` is or dark colors on light backgrounds |
|||
*/ |
|||
|
|||
@if ($inverse-global-color-mode == light) { .uk-light { @if(mixin-exists(hook-inverse)) {@include hook-inverse();}}} |
|||
|
|||
@if ($inverse-global-color-mode == dark) { .uk-dark { @if(mixin-exists(hook-inverse)) {@include hook-inverse();}}} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
// @mixin hook-inverse(){} |
|||
@ -0,0 +1,102 @@ |
|||
// Name: Label |
|||
// Description: Component to indicate important notes |
|||
// |
|||
// Component: `uk-label` |
|||
// |
|||
// Modifiers: `uk-label-success` |
|||
// `uk-label-warning` |
|||
// `uk-label-danger` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$label-padding-vertical: 0 !default; |
|||
$label-padding-horizontal: $global-small-margin !default; |
|||
$label-background: $global-primary-background !default; |
|||
$label-line-height: $global-line-height !default; |
|||
$label-font-size: $global-small-font-size !default; |
|||
$label-color: $global-inverse-color !default; |
|||
|
|||
$label-success-background: $global-success-background !default; |
|||
$label-success-color: $global-inverse-color !default; |
|||
$label-warning-background: $global-warning-background !default; |
|||
$label-warning-color: $global-inverse-color !default; |
|||
$label-danger-background: $global-danger-background !default; |
|||
$label-danger-color: $global-inverse-color !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Label |
|||
========================================================================== */ |
|||
|
|||
.uk-label { |
|||
display: inline-block; |
|||
padding: $label-padding-vertical $label-padding-horizontal; |
|||
background: $label-background; |
|||
line-height: $label-line-height; |
|||
font-size: $label-font-size; |
|||
color: $label-color; |
|||
vertical-align: middle; |
|||
white-space: nowrap; |
|||
@if(mixin-exists(hook-label)) {@include hook-label();} |
|||
} |
|||
|
|||
|
|||
/* Color modifiers |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Success |
|||
*/ |
|||
|
|||
.uk-label-success { |
|||
background-color: $label-success-background; |
|||
color: $label-success-color; |
|||
@if(mixin-exists(hook-label-success)) {@include hook-label-success();} |
|||
} |
|||
|
|||
/* |
|||
* Warning |
|||
*/ |
|||
|
|||
.uk-label-warning { |
|||
background-color: $label-warning-background; |
|||
color: $label-warning-color; |
|||
@if(mixin-exists(hook-label-warning)) {@include hook-label-warning();} |
|||
} |
|||
|
|||
/* |
|||
* Danger |
|||
*/ |
|||
|
|||
.uk-label-danger { |
|||
background-color: $label-danger-background; |
|||
color: $label-danger-color; |
|||
@if(mixin-exists(hook-label-danger)) {@include hook-label-danger();} |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-label-misc)) {@include hook-label-misc();} |
|||
|
|||
// @mixin hook-label(){} |
|||
// @mixin hook-label-success(){} |
|||
// @mixin hook-label-warning(){} |
|||
// @mixin hook-label-danger(){} |
|||
// @mixin hook-label-misc(){} |
|||
|
|||
|
|||
// Inverse |
|||
// ======================================================================== |
|||
|
|||
$inverse-label-background: $inverse-global-primary-background !default; |
|||
$inverse-label-color: $inverse-global-inverse-color !default; |
|||
|
|||
|
|||
|
|||
// @mixin hook-inverse-label(){} |
|||
@ -0,0 +1,232 @@ |
|||
// Name: Lightbox |
|||
// Description: Component to create an lightbox image gallery |
|||
// |
|||
// Component: `uk-lightbox` |
|||
// |
|||
// Sub-objects: `uk-lightbox-page` |
|||
// `uk-lightbox-items` |
|||
// `uk-lightbox-toolbar` |
|||
// `uk-lightbox-toolbar-icon` |
|||
// `uk-lightbox-button` |
|||
// `uk-lightbox-caption` |
|||
// `uk-lightbox-iframe` |
|||
// |
|||
// States: `uk-open` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$lightbox-z-index: $global-z-index + 10 !default; |
|||
$lightbox-background: #000 !default; |
|||
|
|||
$lightbox-item-color: rgba(255,255,255,0.7) !default; |
|||
|
|||
$lightbox-toolbar-padding-vertical: 10px !default; |
|||
$lightbox-toolbar-padding-horizontal: 10px !default; |
|||
$lightbox-toolbar-background: rgba(0,0,0,0.3) !default; |
|||
$lightbox-toolbar-color: rgba(255,255,255,0.7) !default; |
|||
|
|||
$lightbox-toolbar-icon-padding: 5px !default; |
|||
$lightbox-toolbar-icon-color: rgba(255,255,255,0.7) !default; |
|||
|
|||
$lightbox-toolbar-icon-hover-color: #fff !default; |
|||
|
|||
$lightbox-button-size: 50px !default; |
|||
$lightbox-button-background: $lightbox-toolbar-background !default; |
|||
$lightbox-button-color: rgba(255,255,255,0.7) !default; |
|||
|
|||
$lightbox-button-hover-color: #fff !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Lightbox |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Hide by default |
|||
* 2. Set position |
|||
* 3. Allow scrolling for the modal dialog |
|||
* 4. Horizontal padding |
|||
* 5. Mask the background page |
|||
* 6. Fade-in transition |
|||
*/ |
|||
|
|||
.uk-lightbox { |
|||
/* 1 */ |
|||
display: none; |
|||
/* 2 */ |
|||
position: fixed; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: $lightbox-z-index; |
|||
/* 5 */ |
|||
background: $lightbox-background; |
|||
/* 6 */ |
|||
opacity: 0; |
|||
transition: opacity 0.15s linear; |
|||
@if(mixin-exists(hook-lightbox)) {@include hook-lightbox();} |
|||
} |
|||
|
|||
/* |
|||
* Open |
|||
* 1. Center child |
|||
* 2. Fade-in |
|||
*/ |
|||
|
|||
.uk-lightbox.uk-open { |
|||
display: block; |
|||
/* 2 */ |
|||
opacity: 1; |
|||
} |
|||
|
|||
|
|||
/* Page |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Prevent scrollbars |
|||
*/ |
|||
|
|||
.uk-lightbox-page { overflow: hidden; } |
|||
|
|||
|
|||
/* Item |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Center child within the viewport |
|||
* 2. Not visible by default |
|||
* 3. Color needed for spinner icon |
|||
* 4. Optimize animation |
|||
* 5. Responsiveness |
|||
* Using `vh` for `max-height` to fix image proportions after resize in Safari and Opera |
|||
* Using `vh` and `vw` to make responsive image work in IE11 |
|||
*/ |
|||
|
|||
.uk-lightbox-items > * { |
|||
/* 1 */ |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
/* 2 */ |
|||
display: none; |
|||
justify-content: center; |
|||
align-items: center; |
|||
/* 3 */ |
|||
color: $lightbox-item-color; |
|||
/* 4 */ |
|||
will-change: transform, opacity; |
|||
@if(mixin-exists(hook-lightbox-item)) {@include hook-lightbox-item();} |
|||
} |
|||
|
|||
/* 5 */ |
|||
.uk-lightbox-items > * > * { |
|||
max-width: 100vw; |
|||
max-height: 100vh; |
|||
} |
|||
|
|||
.uk-lightbox-items > * > :not(iframe) { |
|||
width: auto; |
|||
height: auto; |
|||
} |
|||
|
|||
.uk-lightbox-items > .uk-active { display: flex; } |
|||
|
|||
/* Toolbar |
|||
========================================================================== */ |
|||
|
|||
.uk-lightbox-toolbar { |
|||
padding: $lightbox-toolbar-padding-vertical $lightbox-toolbar-padding-horizontal; |
|||
background: $lightbox-toolbar-background; |
|||
color: $lightbox-toolbar-color; |
|||
@if(mixin-exists(hook-lightbox-toolbar)) {@include hook-lightbox-toolbar();} |
|||
} |
|||
|
|||
.uk-lightbox-toolbar * { color: $lightbox-toolbar-color; } |
|||
|
|||
|
|||
/* Toolbar Icon (Close) |
|||
========================================================================== */ |
|||
|
|||
.uk-lightbox-toolbar-icon { |
|||
padding: $lightbox-toolbar-icon-padding; |
|||
color: $lightbox-toolbar-icon-color; |
|||
@if(mixin-exists(hook-lightbox-toolbar-icon)) {@include hook-lightbox-toolbar-icon();} |
|||
} |
|||
|
|||
/* |
|||
* Hover |
|||
*/ |
|||
|
|||
.uk-lightbox-toolbar-icon:hover { |
|||
color: $lightbox-toolbar-icon-hover-color; |
|||
@if(mixin-exists(hook-lightbox-toolbar-icon-hover)) {@include hook-lightbox-toolbar-icon-hover();} |
|||
} |
|||
|
|||
|
|||
|
|||
/* Button (Slidenav) |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Center icon vertically and horizontally |
|||
*/ |
|||
|
|||
.uk-lightbox-button { |
|||
box-sizing: border-box; |
|||
width: $lightbox-button-size; |
|||
height: $lightbox-button-size; |
|||
background: $lightbox-button-background; |
|||
color: $lightbox-button-color; |
|||
/* 1 */ |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
@if(mixin-exists(hook-lightbox-button)) {@include hook-lightbox-button();} |
|||
} |
|||
|
|||
/* |
|||
* Hover |
|||
*/ |
|||
|
|||
.uk-lightbox-button:hover { |
|||
color: $lightbox-button-hover-color; |
|||
@if(mixin-exists(hook-lightbox-button-hover)) {@include hook-lightbox-button-hover();} |
|||
} |
|||
|
|||
|
|||
/* Caption |
|||
========================================================================== */ |
|||
|
|||
.uk-lightbox-caption {} |
|||
|
|||
|
|||
/* Iframe |
|||
========================================================================== */ |
|||
|
|||
.uk-lightbox-iframe { |
|||
width: 80%; |
|||
height: 80%; |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-lightbox-misc)) {@include hook-lightbox-misc();} |
|||
|
|||
// @mixin hook-lightbox(){} |
|||
// @mixin hook-lightbox-item(){} |
|||
// @mixin hook-lightbox-toolbar(){} |
|||
// @mixin hook-lightbox-toolbar-icon(){} |
|||
// @mixin hook-lightbox-toolbar-icon-hover(){} |
|||
// @mixin hook-lightbox-button(){} |
|||
// @mixin hook-lightbox-button-hover(){} |
|||
// @mixin hook-lightbox-misc(){} |
|||
@ -0,0 +1,123 @@ |
|||
// Name: Link |
|||
// Description: Styles for links |
|||
// |
|||
// Component: `uk-link-muted` |
|||
// `uk-link-text` |
|||
// `uk-link-heading` |
|||
// `uk-link-reset` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$link-muted-color: $global-muted-color !default; |
|||
$link-muted-hover-color: $global-color !default; |
|||
|
|||
$link-text-hover-color: $global-muted-color !default; |
|||
|
|||
$link-heading-hover-color: $global-primary-background !default; |
|||
$link-heading-hover-text-decoration: none !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Link |
|||
========================================================================== */ |
|||
|
|||
|
|||
/* Muted |
|||
========================================================================== */ |
|||
|
|||
a.uk-link-muted, |
|||
.uk-link-muted a { |
|||
color: $link-muted-color; |
|||
@if(mixin-exists(hook-link-muted)) {@include hook-link-muted();} |
|||
} |
|||
|
|||
a.uk-link-muted:hover, |
|||
.uk-link-muted a:hover { |
|||
color: $link-muted-hover-color; |
|||
@if(mixin-exists(hook-link-muted-hover)) {@include hook-link-muted-hover();} |
|||
} |
|||
|
|||
|
|||
/* Text |
|||
========================================================================== */ |
|||
|
|||
a.uk-link-text:not(:hover), |
|||
.uk-link-text a:not(:hover) { |
|||
color: inherit; |
|||
@if(mixin-exists(hook-link-text)) {@include hook-link-text();} |
|||
} |
|||
|
|||
a.uk-link-text:hover, |
|||
.uk-link-text a:hover { |
|||
color: $link-text-hover-color; |
|||
@if(mixin-exists(hook-link-text-hover)) {@include hook-link-text-hover();} |
|||
} |
|||
|
|||
|
|||
/* Heading |
|||
========================================================================== */ |
|||
|
|||
a.uk-link-heading:not(:hover), |
|||
.uk-link-heading a:not(:hover) { |
|||
color: inherit; |
|||
@if(mixin-exists(hook-link-heading)) {@include hook-link-heading();} |
|||
} |
|||
|
|||
a.uk-link-heading:hover, |
|||
.uk-link-heading a:hover { |
|||
color: $link-heading-hover-color; |
|||
text-decoration: $link-heading-hover-text-decoration; |
|||
@if(mixin-exists(hook-link-heading-hover)) {@include hook-link-heading-hover();} |
|||
} |
|||
|
|||
|
|||
/* Reset |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* `!important` needed to override inverse component |
|||
*/ |
|||
|
|||
a.uk-link-reset, |
|||
a.uk-link-reset:hover, |
|||
.uk-link-reset a, |
|||
.uk-link-reset a:hover { |
|||
color: inherit !important; |
|||
text-decoration: none !important; |
|||
@if(mixin-exists(hook-link-reset)) {@include hook-link-reset();} |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-link-misc)) {@include hook-link-misc();} |
|||
|
|||
// @mixin hook-link-muted(){} |
|||
// @mixin hook-link-muted-hover(){} |
|||
// @mixin hook-link-text(){} |
|||
// @mixin hook-link-text-hover(){} |
|||
// @mixin hook-link-heading(){} |
|||
// @mixin hook-link-heading-hover(){} |
|||
// @mixin hook-link-reset(){} |
|||
// @mixin hook-link-misc(){} |
|||
|
|||
|
|||
// Inverse |
|||
// ======================================================================== |
|||
|
|||
$inverse-link-muted-color: $inverse-global-muted-color !default; |
|||
$inverse-link-muted-hover-color: $inverse-global-color !default; |
|||
$inverse-link-text-hover-color: $inverse-global-muted-color !default; |
|||
$inverse-link-heading-hover-color: $inverse-global-primary-background !default; |
|||
|
|||
|
|||
|
|||
// @mixin hook-inverse-link-muted(){} |
|||
// @mixin hook-inverse-link-muted-hover(){} |
|||
// @mixin hook-inverse-link-text-hover(){} |
|||
// @mixin hook-inverse-link-heading-hover(){} |
|||
@ -0,0 +1,187 @@ |
|||
// Name: List |
|||
// Description: Styles for lists |
|||
// |
|||
// Component: `uk-list` |
|||
// |
|||
// Modifiers: `uk-list-divider` |
|||
// `uk-list-striped` |
|||
// `uk-list-bullet` |
|||
// `uk-list-large` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$list-margin-top: $global-small-margin !default; |
|||
|
|||
$list-nested-padding-left: $global-gutter !default; |
|||
|
|||
$list-divider-margin-top: $global-small-margin !default; |
|||
$list-divider-border-width: $global-border-width !default; |
|||
$list-divider-border: $global-border !default; |
|||
|
|||
$list-striped-padding-vertical: $global-small-margin !default; |
|||
$list-striped-padding-horizontal: $global-small-margin !default; |
|||
$list-striped-background: $global-muted-background !default; |
|||
|
|||
$list-bullet-width: ($global-line-height * 1em) !default; |
|||
$list-bullet-height: $list-bullet-width !default; |
|||
$list-bullet-margin-right: $global-small-margin !default; |
|||
$list-bullet-icon-color: $global-color !default; |
|||
|
|||
$list-large-margin-top: $global-margin !default; |
|||
$list-large-divider-margin-top: $global-margin !default; |
|||
$list-large-striped-padding-vertical: $global-margin !default; |
|||
$list-large-striped-padding-horizontal: $global-small-margin !default; |
|||
|
|||
$internal-list-bullet-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22#000%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E" !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: List |
|||
========================================================================== */ |
|||
|
|||
.uk-list { |
|||
padding: 0; |
|||
list-style: none; |
|||
} |
|||
|
|||
/* |
|||
* Micro clearfix |
|||
*/ |
|||
|
|||
.uk-list > li::before, |
|||
.uk-list > li::after { |
|||
content: ""; |
|||
display: table; |
|||
} |
|||
|
|||
.uk-list > li::after { clear: both; } |
|||
|
|||
/* |
|||
* Remove margin from the last-child |
|||
*/ |
|||
|
|||
.uk-list > li > :last-child { margin-bottom: 0; } |
|||
|
|||
/* |
|||
* Nested lists |
|||
*/ |
|||
|
|||
.uk-list ul { |
|||
margin: 0; |
|||
padding-left: $list-nested-padding-left; |
|||
list-style: none; |
|||
} |
|||
|
|||
/* |
|||
* Style |
|||
*/ |
|||
|
|||
.uk-list > li:nth-child(n+2), |
|||
.uk-list > li > ul { margin-top: $list-margin-top; } |
|||
|
|||
|
|||
/* Style modifiers |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Divider |
|||
*/ |
|||
|
|||
.uk-list-divider > li:nth-child(n+2) { |
|||
margin-top: $list-divider-margin-top; |
|||
padding-top: $list-divider-margin-top; |
|||
border-top: $list-divider-border-width solid $list-divider-border; |
|||
@if(mixin-exists(hook-list-divider)) {@include hook-list-divider();} |
|||
} |
|||
|
|||
/* |
|||
* Striped |
|||
*/ |
|||
|
|||
.uk-list-striped > li { |
|||
padding: $list-striped-padding-vertical $list-striped-padding-horizontal; |
|||
@if(mixin-exists(hook-list-striped)) {@include hook-list-striped();} |
|||
} |
|||
|
|||
.uk-list-striped > li:nth-of-type(odd) { background: $list-striped-background; } |
|||
|
|||
.uk-list-striped > li:nth-child(n+2) { margin-top: 0; } |
|||
|
|||
/* |
|||
* Bullet |
|||
*/ |
|||
|
|||
.uk-list-bullet > li { |
|||
position: relative; |
|||
padding-left: unquote('calc(#{$list-bullet-width} + #{$list-bullet-margin-right})'); |
|||
} |
|||
|
|||
.uk-list-bullet > li::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: $list-bullet-width; |
|||
height: $list-bullet-height; |
|||
@include svg-fill($internal-list-bullet-image, "#000", $list-bullet-icon-color); |
|||
background-repeat: no-repeat; |
|||
background-position: 50% 50%; |
|||
float: left; |
|||
@if(mixin-exists(hook-list-bullet)) {@include hook-list-bullet();} |
|||
} |
|||
|
|||
|
|||
/* Size modifier |
|||
========================================================================== */ |
|||
|
|||
.uk-list-large > li:nth-child(n+2), |
|||
.uk-list-large > li > ul { margin-top: $list-large-margin-top; } |
|||
|
|||
/* |
|||
* Divider |
|||
*/ |
|||
|
|||
.uk-list-large.uk-list-divider > li:nth-child(n+2) { |
|||
margin-top: $list-large-divider-margin-top; |
|||
padding-top: $list-large-divider-margin-top; |
|||
} |
|||
|
|||
/* |
|||
* Striped |
|||
*/ |
|||
|
|||
.uk-list-large.uk-list-striped > li { |
|||
padding: $list-large-striped-padding-vertical $list-large-striped-padding-horizontal; |
|||
@if(mixin-exists(hook-list-striped)) {@include hook-list-striped();} |
|||
} |
|||
|
|||
.uk-list-large.uk-list-striped > li:nth-child(n+2) { margin-top: 0; } |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-list-misc)) {@include hook-list-misc();} |
|||
|
|||
// @mixin hook-list-divider(){} |
|||
// @mixin hook-list-striped(){} |
|||
// @mixin hook-list-bullet(){} |
|||
// @mixin hook-list-misc(){} |
|||
|
|||
|
|||
// Inverse |
|||
// ======================================================================== |
|||
|
|||
$inverse-list-divider-border: $inverse-global-border !default; |
|||
$inverse-list-striped-background: $inverse-global-muted-background !default; |
|||
$inverse-list-bullet-icon-color: $inverse-global-color !default; |
|||
|
|||
|
|||
|
|||
// @mixin hook-inverse-list-divider(){} |
|||
// @mixin hook-inverse-list-striped(){} |
|||
// @mixin hook-inverse-list-bullet(){} |
|||
@ -0,0 +1,163 @@ |
|||
// Name: Margin |
|||
// Description: Utilities for margins |
|||
// |
|||
// Component: `uk-margin-*` |
|||
// `uk-margin-small-*` |
|||
// `uk-margin-medium-*` |
|||
// `uk-margin-large-*` |
|||
// `uk-margin-xlarge-*` |
|||
// `uk-margin-remove-*` |
|||
// `uk-margin-auto-*` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$margin-margin: $global-margin !default; |
|||
|
|||
$margin-small-margin: $global-small-margin !default; |
|||
|
|||
$margin-medium-margin: $global-medium-margin !default; |
|||
|
|||
$margin-large-margin: $global-medium-margin !default; |
|||
$margin-large-margin-l: $global-large-margin !default; |
|||
|
|||
$margin-xlarge-margin: $global-large-margin !default; |
|||
$margin-xlarge-margin-l: $global-xlarge-margin !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Margin |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Default |
|||
*/ |
|||
|
|||
.uk-margin { margin-bottom: $margin-margin; } |
|||
* + .uk-margin { margin-top: $margin-margin !important; } |
|||
|
|||
.uk-margin-top { margin-top: $margin-margin !important; } |
|||
.uk-margin-bottom { margin-bottom: $margin-margin !important; } |
|||
.uk-margin-left { margin-left: $margin-margin !important; } |
|||
.uk-margin-right { margin-right: $margin-margin !important; } |
|||
|
|||
|
|||
/* Small |
|||
========================================================================== */ |
|||
|
|||
.uk-margin-small { margin-bottom: $margin-small-margin; } |
|||
* + .uk-margin-small { margin-top: $margin-small-margin !important; } |
|||
|
|||
.uk-margin-small-top { margin-top: $margin-small-margin !important; } |
|||
.uk-margin-small-bottom { margin-bottom: $margin-small-margin !important; } |
|||
.uk-margin-small-left { margin-left: $margin-small-margin !important; } |
|||
.uk-margin-small-right { margin-right: $margin-small-margin !important; } |
|||
|
|||
|
|||
/* Medium |
|||
========================================================================== */ |
|||
|
|||
.uk-margin-medium { margin-bottom: $margin-medium-margin; } |
|||
* + .uk-margin-medium { margin-top: $margin-medium-margin !important; } |
|||
|
|||
.uk-margin-medium-top { margin-top: $margin-medium-margin !important; } |
|||
.uk-margin-medium-bottom { margin-bottom: $margin-medium-margin !important; } |
|||
.uk-margin-medium-left { margin-left: $margin-medium-margin !important; } |
|||
.uk-margin-medium-right { margin-right: $margin-medium-margin !important; } |
|||
|
|||
|
|||
/* Large |
|||
========================================================================== */ |
|||
|
|||
.uk-margin-large { margin-bottom: $margin-large-margin; } |
|||
* + .uk-margin-large { margin-top: $margin-large-margin !important; } |
|||
|
|||
.uk-margin-large-top { margin-top: $margin-large-margin !important; } |
|||
.uk-margin-large-bottom { margin-bottom: $margin-large-margin !important; } |
|||
.uk-margin-large-left { margin-left: $margin-large-margin !important; } |
|||
.uk-margin-large-right { margin-right: $margin-large-margin !important; } |
|||
|
|||
/* Desktop and bigger */ |
|||
@media (min-width: $breakpoint-large) { |
|||
|
|||
.uk-margin-large { margin-bottom: $margin-large-margin-l; } |
|||
* + .uk-margin-large { margin-top: $margin-large-margin-l !important; } |
|||
|
|||
.uk-margin-large-top { margin-top: $margin-large-margin-l !important; } |
|||
.uk-margin-large-bottom { margin-bottom: $margin-large-margin-l !important; } |
|||
.uk-margin-large-left { margin-left: $margin-large-margin-l !important; } |
|||
.uk-margin-large-right { margin-right: $margin-large-margin-l !important; } |
|||
|
|||
} |
|||
|
|||
|
|||
/* XLarge |
|||
========================================================================== */ |
|||
|
|||
.uk-margin-xlarge { margin-bottom: $margin-xlarge-margin; } |
|||
* + .uk-margin-xlarge { margin-top: $margin-xlarge-margin !important; } |
|||
|
|||
.uk-margin-xlarge-top { margin-top: $margin-xlarge-margin !important; } |
|||
.uk-margin-xlarge-bottom { margin-bottom: $margin-xlarge-margin !important; } |
|||
.uk-margin-xlarge-left { margin-left: $margin-xlarge-margin !important; } |
|||
.uk-margin-xlarge-right { margin-right: $margin-xlarge-margin !important; } |
|||
|
|||
/* Desktop and bigger */ |
|||
@media (min-width: $breakpoint-large) { |
|||
|
|||
.uk-margin-xlarge { margin-bottom: $margin-xlarge-margin-l; } |
|||
* + .uk-margin-xlarge { margin-top: $margin-xlarge-margin-l !important; } |
|||
|
|||
.uk-margin-xlarge-top { margin-top: $margin-xlarge-margin-l !important; } |
|||
.uk-margin-xlarge-bottom { margin-bottom: $margin-xlarge-margin-l !important; } |
|||
.uk-margin-xlarge-left { margin-left: $margin-xlarge-margin-l !important; } |
|||
.uk-margin-xlarge-right { margin-right: $margin-xlarge-margin-l !important; } |
|||
|
|||
} |
|||
|
|||
|
|||
/* Remove |
|||
========================================================================== */ |
|||
|
|||
.uk-margin-remove { margin: 0 !important; } |
|||
.uk-margin-remove-top { margin-top: 0 !important; } |
|||
.uk-margin-remove-bottom { margin-bottom: 0 !important; } |
|||
.uk-margin-remove-left { margin-left: 0 !important; } |
|||
.uk-margin-remove-right { margin-right: 0 !important; } |
|||
|
|||
.uk-margin-remove-vertical { |
|||
margin-top: 0 !important; |
|||
margin-bottom: 0 !important; |
|||
} |
|||
|
|||
.uk-margin-remove-adjacent + * { margin-top: 0 !important; } |
|||
|
|||
|
|||
/* Auto |
|||
========================================================================== */ |
|||
|
|||
.uk-margin-auto { |
|||
margin-left: auto !important; |
|||
margin-right: auto !important; |
|||
} |
|||
|
|||
.uk-margin-auto-top { margin-top: auto !important; } |
|||
.uk-margin-auto-bottom { margin-bottom: auto !important; } |
|||
.uk-margin-auto-left { margin-left: auto !important; } |
|||
.uk-margin-auto-right { margin-right: auto !important; } |
|||
|
|||
.uk-margin-auto-vertical { |
|||
margin-top: auto !important; |
|||
margin-bottom: auto !important; |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-margin-misc)) {@include hook-margin-misc();} |
|||
|
|||
// @mixin hook-margin-misc(){} |
|||
@ -0,0 +1,63 @@ |
|||
// Name: Marker |
|||
// Description: Component to create a marker icon |
|||
// |
|||
// Component: `uk-marker` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$marker-padding: 5px !default; |
|||
$marker-background: $global-secondary-background !default; |
|||
$marker-color: $global-inverse-color !default; |
|||
|
|||
$marker-hover-color: $global-inverse-color !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Marker |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Addopts `uk-icon` |
|||
*/ |
|||
|
|||
.uk-marker { |
|||
padding: $marker-padding; |
|||
background: $marker-background; |
|||
color: $marker-color; |
|||
@if(mixin-exists(hook-marker)) {@include hook-marker();} |
|||
} |
|||
|
|||
/* Hover + Focus */ |
|||
.uk-marker:hover, |
|||
.uk-marker:focus { |
|||
color: $marker-hover-color; |
|||
outline: none; |
|||
@if(mixin-exists(hook-marker-hover)) {@include hook-marker-hover();} |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-marker-misc)) {@include hook-marker-misc();} |
|||
|
|||
// @mixin hook-marker(){} |
|||
// @mixin hook-marker-hover(){} |
|||
// @mixin hook-marker-misc(){} |
|||
|
|||
|
|||
// Inverse |
|||
// ======================================================================== |
|||
|
|||
$inverse-marker-background: $global-muted-background !default; |
|||
$inverse-marker-color: $global-color !default; |
|||
$inverse-marker-hover-color: $global-color !default; |
|||
|
|||
|
|||
|
|||
// @mixin hook-inverse-marker(){} |
|||
// @mixin hook-inverse-marker-hover(){} |
|||
@ -0,0 +1,32 @@ |
|||
// |
|||
// Component: Mixin |
|||
// Description: Defines mixins which are used across all components |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// SVG |
|||
// ======================================================================== |
|||
|
|||
/// Replace `$search` with `$replace` in `$string` |
|||
/// @author Hugo Giraudel |
|||
/// @param {String} $string - Initial string |
|||
/// @param {String} $search - Substring to replace |
|||
/// @param {String} $replace ('') - New value |
|||
/// @return {String} - Updated string |
|||
@function str-replace($string, $search, $replace: '') { |
|||
$index: str-index($string, $search); |
|||
|
|||
@if $index { |
|||
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); |
|||
} |
|||
|
|||
@return $string; |
|||
} |
|||
|
|||
@mixin svg-fill($src, $color-default, $color-new){ |
|||
|
|||
$replace-src: str-replace($src, $color-default, $color-new) !default; |
|||
$replace-src: str-replace($replace-src, "#", "%23"); |
|||
background-image: url(quote($replace-src)); |
|||
} |
|||
@ -0,0 +1,368 @@ |
|||
// Name: Modal |
|||
// Description: Component to create modal dialogs |
|||
// |
|||
// Component: `uk-modal` |
|||
// |
|||
// Sub-objects: `uk-modal-page` |
|||
// `uk-modal-dialog` |
|||
// `uk-modal-header` |
|||
// `uk-modal-body` |
|||
// `uk-modal-footer` |
|||
// `uk-modal-title` |
|||
// `uk-modal-close` |
|||
// |
|||
// Adopted: `uk-modal-close-default` |
|||
// `uk-modal-close-outside` |
|||
// `uk-modal-close-full` |
|||
// |
|||
// Modifiers: `uk-modal-container` |
|||
// `uk-modal-full` |
|||
// |
|||
// States: `uk-open` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$modal-z-index: $global-z-index + 10 !default; |
|||
$modal-background: rgba(0,0,0,0.6) !default; |
|||
|
|||
$modal-padding-horizontal: 15px !default; |
|||
$modal-padding-horizontal-s: $global-gutter !default; |
|||
$modal-padding-horizontal-m: $global-medium-gutter !default; |
|||
$modal-padding-vertical: $modal-padding-horizontal !default; |
|||
$modal-padding-vertical-s: 50px !default; |
|||
|
|||
$modal-dialog-width: 600px !default; |
|||
$modal-dialog-background: $global-background !default; |
|||
|
|||
$modal-container-width: 1200px !default; |
|||
|
|||
$modal-body-padding-horizontal: $global-gutter !default; |
|||
$modal-body-padding-vertical: $global-gutter !default; |
|||
|
|||
$modal-header-padding-horizontal: $global-gutter !default; |
|||
$modal-header-padding-vertical: ($modal-header-padding-horizontal / 2) !default; |
|||
$modal-header-background: $global-muted-background !default; |
|||
|
|||
$modal-footer-padding-horizontal: $global-gutter !default; |
|||
$modal-footer-padding-vertical: ($modal-footer-padding-horizontal / 2) !default; |
|||
$modal-footer-background: $global-muted-background !default; |
|||
|
|||
$modal-title-font-size: $global-xlarge-font-size !default; |
|||
$modal-title-line-height: 1.3 !default; |
|||
|
|||
$modal-close-position: $global-small-margin !default; |
|||
$modal-close-padding: 5px !default; |
|||
|
|||
$modal-close-outside-position: 0 !default; |
|||
$modal-close-outside-translate: 100% !default; |
|||
$modal-close-outside-color: lighten($global-inverse-color, 20%) !default; |
|||
$modal-close-outside-hover-color: $global-inverse-color !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Modal |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Hide by default |
|||
* 2. Set position |
|||
* 3. Allow scrolling for the modal dialog |
|||
* 4. Horizontal padding |
|||
* 5. Mask the background page |
|||
* 6. Fade-in transition |
|||
*/ |
|||
|
|||
.uk-modal { |
|||
/* 1 */ |
|||
display: none; |
|||
/* 2 */ |
|||
position: fixed; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: $modal-z-index; |
|||
/* 3 */ |
|||
overflow-y: auto; |
|||
-webkit-overflow-scrolling: touch; |
|||
/* 4 */ |
|||
padding: $modal-padding-vertical $modal-padding-horizontal; |
|||
/* 5 */ |
|||
background: $modal-background; |
|||
/* 6 */ |
|||
opacity: 0; |
|||
transition: opacity 0.15s linear; |
|||
@if(mixin-exists(hook-modal)) {@include hook-modal();} |
|||
} |
|||
|
|||
/* Phone landscape and bigger */ |
|||
@media (min-width: $breakpoint-small) { |
|||
|
|||
.uk-modal { padding: $modal-padding-vertical-s $modal-padding-horizontal-s; } |
|||
|
|||
} |
|||
|
|||
/* Tablet landscape and bigger */ |
|||
@media (min-width: $breakpoint-medium) { |
|||
|
|||
.uk-modal { |
|||
padding-left: $modal-padding-horizontal-m; |
|||
padding-right: $modal-padding-horizontal-m; |
|||
} |
|||
|
|||
} |
|||
|
|||
/* |
|||
* Open |
|||
*/ |
|||
|
|||
.uk-modal.uk-open { opacity: 1; } |
|||
|
|||
|
|||
/* Page |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Prevent scrollbars |
|||
*/ |
|||
|
|||
.uk-modal-page { overflow: hidden; } |
|||
|
|||
|
|||
/* Dialog |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Create position context for spinner and close button |
|||
* 2. Dimensions |
|||
* 3. Fix `max-width: 100%` not working in combination with flex and responsive images in IE11 |
|||
* `!important` needed to overwrite `uk-width-auto`. See `#modal-media-image` in tests |
|||
* 4. Style |
|||
* 5. Slide-in transition |
|||
*/ |
|||
|
|||
.uk-modal-dialog { |
|||
/* 1 */ |
|||
position: relative; |
|||
/* 2 */ |
|||
box-sizing: border-box; |
|||
margin: 0 auto; |
|||
width: $modal-dialog-width; |
|||
/* 3 */ |
|||
max-width: unquote('calc(100% - 0.01px)') !important; |
|||
/* 4 */ |
|||
background: $modal-dialog-background; |
|||
/* 5 */ |
|||
opacity: 0; |
|||
transform: translateY(-100px); |
|||
transition: 0.3s linear; |
|||
transition-property: opacity, transform; |
|||
@if(mixin-exists(hook-modal-dialog)) {@include hook-modal-dialog();} |
|||
} |
|||
|
|||
/* |
|||
* Open |
|||
*/ |
|||
|
|||
.uk-open > .uk-modal-dialog { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
|
|||
|
|||
/* Size modifier |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Container size |
|||
* Take the same size as the Container component |
|||
*/ |
|||
|
|||
.uk-modal-container .uk-modal-dialog { width: $modal-container-width; } |
|||
|
|||
/* |
|||
* Full size |
|||
* 1. Remove padding and background from modal |
|||
* 2. Reset all default declarations from modal dialog |
|||
*/ |
|||
|
|||
/* 1 */ |
|||
.uk-modal-full { |
|||
padding: 0; |
|||
background: none; |
|||
} |
|||
|
|||
/* 2 */ |
|||
.uk-modal-full .uk-modal-dialog { |
|||
margin: 0; |
|||
width: 100%; |
|||
max-width: 100%; |
|||
transform: translateY(0); |
|||
@if(mixin-exists(hook-modal-full)) {@include hook-modal-full();} |
|||
} |
|||
|
|||
|
|||
/* Sections |
|||
========================================================================== */ |
|||
|
|||
.uk-modal-body { |
|||
padding: $modal-body-padding-vertical $modal-body-padding-horizontal; |
|||
@if(mixin-exists(hook-modal-body)) {@include hook-modal-body();} |
|||
} |
|||
|
|||
.uk-modal-header { |
|||
padding: $modal-header-padding-vertical $modal-header-padding-horizontal; |
|||
background: $modal-header-background; |
|||
@if(mixin-exists(hook-modal-header)) {@include hook-modal-header();} |
|||
} |
|||
|
|||
.uk-modal-footer { |
|||
padding: $modal-footer-padding-vertical $modal-footer-padding-horizontal; |
|||
background: $modal-footer-background; |
|||
@if(mixin-exists(hook-modal-footer)) {@include hook-modal-footer();} |
|||
} |
|||
|
|||
/* |
|||
* Micro clearfix |
|||
*/ |
|||
|
|||
.uk-modal-body::before, |
|||
.uk-modal-body::after, |
|||
.uk-modal-header::before, |
|||
.uk-modal-header::after, |
|||
.uk-modal-footer::before, |
|||
.uk-modal-footer::after { |
|||
content: ""; |
|||
display: table; |
|||
} |
|||
|
|||
.uk-modal-body::after, |
|||
.uk-modal-header::after, |
|||
.uk-modal-footer::after { clear: both; } |
|||
|
|||
/* |
|||
* Remove margin from the last-child |
|||
*/ |
|||
|
|||
.uk-modal-body > :last-child, |
|||
.uk-modal-header > :last-child, |
|||
.uk-modal-footer > :last-child { margin-bottom: 0; } |
|||
|
|||
|
|||
/* Title |
|||
========================================================================== */ |
|||
|
|||
.uk-modal-title { |
|||
font-size: $modal-title-font-size; |
|||
line-height: $modal-title-line-height; |
|||
@if(mixin-exists(hook-modal-title)) {@include hook-modal-title();} |
|||
} |
|||
|
|||
|
|||
/* Close |
|||
* Adopts `uk-close` |
|||
========================================================================== */ |
|||
|
|||
[class*='uk-modal-close-'] { |
|||
position: absolute; |
|||
z-index: $modal-z-index; |
|||
top: $modal-close-position; |
|||
right: $modal-close-position; |
|||
padding: $modal-close-padding; |
|||
@if(mixin-exists(hook-modal-close)) {@include hook-modal-close();} |
|||
} |
|||
|
|||
/* |
|||
* Remove margin from adjacent element |
|||
*/ |
|||
|
|||
[class*='uk-modal-close-']:first-child + * { margin-top: 0; } |
|||
|
|||
/* |
|||
* Hover |
|||
*/ |
|||
|
|||
[class*='uk-modal-close-']:hover { |
|||
@if(mixin-exists(hook-modal-close-hover)) {@include hook-modal-close-hover();} |
|||
} |
|||
|
|||
/* |
|||
* Default |
|||
*/ |
|||
|
|||
.uk-modal-close-default { |
|||
@if(mixin-exists(hook-modal-close-default)) {@include hook-modal-close-default();} |
|||
} |
|||
|
|||
.uk-modal-close-default:hover { |
|||
@if(mixin-exists(hook-modal-close-default-hover)) {@include hook-modal-close-default-hover();} |
|||
} |
|||
|
|||
/* |
|||
* Outside |
|||
* 1. Prevent scrollbar on small devices |
|||
*/ |
|||
|
|||
.uk-modal-close-outside { |
|||
top: $modal-close-outside-position; |
|||
/* 1 */ |
|||
right: (-$modal-close-padding); |
|||
transform: translate(0, -($modal-close-outside-translate)); |
|||
color: $modal-close-outside-color; |
|||
@if(mixin-exists(hook-modal-close-outside)) {@include hook-modal-close-outside();} |
|||
} |
|||
|
|||
.uk-modal-close-outside:hover { |
|||
color: $modal-close-outside-hover-color; |
|||
@if(mixin-exists(hook-modal-close-outside-hover)) {@include hook-modal-close-outside-hover();} |
|||
} |
|||
|
|||
/* Tablet landscape and bigger */ |
|||
@media (min-width: $breakpoint-medium) { |
|||
|
|||
/* 1 */ |
|||
.uk-modal-close-outside { |
|||
right: $modal-close-outside-position; |
|||
transform: translate($modal-close-outside-translate, -($modal-close-outside-translate)); |
|||
} |
|||
|
|||
} |
|||
|
|||
/* |
|||
* Full |
|||
*/ |
|||
|
|||
.uk-modal-close-full { |
|||
@if(mixin-exists(hook-modal-close-full)) {@include hook-modal-close-full();} |
|||
} |
|||
|
|||
.uk-modal-close-full:hover { |
|||
@if(mixin-exists(hook-modal-close-full-hover)) {@include hook-modal-close-full-hover();} |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-modal-misc)) {@include hook-modal-misc();} |
|||
|
|||
// @mixin hook-modal(){} |
|||
// @mixin hook-modal-dialog(){} |
|||
// @mixin hook-modal-full(){} |
|||
// @mixin hook-modal-header(){} |
|||
// @mixin hook-modal-body(){} |
|||
// @mixin hook-modal-footer(){} |
|||
// @mixin hook-modal-title(){} |
|||
// @mixin hook-modal-close(){} |
|||
// @mixin hook-modal-close-hover(){} |
|||
// @mixin hook-modal-close-default(){} |
|||
// @mixin hook-modal-close-default-hover(){} |
|||
// @mixin hook-modal-close-outside(){} |
|||
// @mixin hook-modal-close-outside-hover(){} |
|||
// @mixin hook-modal-close-full(){} |
|||
// @mixin hook-modal-close-full-hover(){} |
|||
// @mixin hook-modal-misc(){} |
|||
@ -0,0 +1,357 @@ |
|||
// Name: Nav |
|||
// Description: Defines styles for list navigations |
|||
// |
|||
// Component: `uk-nav` |
|||
// |
|||
// Sub-objects: `uk-nav-header` |
|||
// `uk-nav-divider` |
|||
// `uk-nav-sub` |
|||
// |
|||
// Modifiers: `uk-nav-parent-icon` |
|||
// `uk-nav-default` |
|||
// `uk-nav-primary` |
|||
// `uk-nav-center` |
|||
// |
|||
// States: `uk-active` |
|||
// `uk-parent` |
|||
// `uk-open` |
|||
// `uk-touch` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$nav-item-padding-vertical: 5px !default; |
|||
$nav-item-padding-horizontal: 0 !default; |
|||
|
|||
$nav-sublist-padding-vertical: 5px !default; |
|||
$nav-sublist-padding-left: 15px !default; |
|||
$nav-sublist-deeper-padding-left: 15px !default; |
|||
$nav-sublist-item-padding-vertical: 2px !default; |
|||
|
|||
$nav-parent-icon-width: ($global-line-height * 1em) !default; |
|||
$nav-parent-icon-height: $nav-parent-icon-width !default; |
|||
$nav-parent-icon-color: $global-color !default; |
|||
|
|||
$nav-header-padding-vertical: $nav-item-padding-vertical !default; |
|||
$nav-header-padding-horizontal: $nav-item-padding-horizontal !default; |
|||
$nav-header-font-size: $global-small-font-size !default; |
|||
$nav-header-text-transform: uppercase !default; |
|||
$nav-header-margin-top: $global-margin !default; |
|||
|
|||
$nav-divider-margin-vertical: 5px !default; |
|||
$nav-divider-margin-horizontal: 0 !default; |
|||
|
|||
$nav-default-item-color: $global-muted-color !default; |
|||
$nav-default-item-hover-color: $global-color !default; |
|||
$nav-default-item-active-color: $global-emphasis-color !default; |
|||
$nav-default-header-color: $global-emphasis-color !default; |
|||
$nav-default-divider-border-width: $global-border-width !default; |
|||
$nav-default-divider-border: $global-border !default; |
|||
$nav-default-sublist-item-color: $global-muted-color !default; |
|||
$nav-default-sublist-item-hover-color: $global-color !default; |
|||
|
|||
$nav-primary-item-font-size: $global-large-font-size !default; |
|||
$nav-primary-item-line-height: $global-line-height !default; |
|||
$nav-primary-item-color: $global-muted-color !default; |
|||
$nav-primary-item-hover-color: $global-color !default; |
|||
$nav-primary-item-active-color: $global-emphasis-color !default; |
|||
$nav-primary-header-color: $global-emphasis-color !default; |
|||
$nav-primary-divider-border-width: $global-border-width !default; |
|||
$nav-primary-divider-border: $global-border !default; |
|||
$nav-primary-sublist-item-color: $global-muted-color !default; |
|||
$nav-primary-sublist-item-hover-color: $global-color !default; |
|||
|
|||
$internal-nav-parent-close-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%2210%201%204%207%2010%2013%22%20%2F%3E%0A%3C%2Fsvg%3E" !default; |
|||
$internal-nav-parent-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E" !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Nav |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Reset |
|||
* 1. Prepare lists |
|||
* 2. Prepare links |
|||
* 3. Remove default focus style |
|||
*/ |
|||
|
|||
/* 1 */ |
|||
.uk-nav, |
|||
.uk-nav ul { |
|||
margin: 0; |
|||
padding: 0; |
|||
list-style: none; |
|||
} |
|||
|
|||
/* 2 */ |
|||
.uk-nav li > a { |
|||
display: block; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
/* 3 */ |
|||
.uk-nav li > a:focus { outline: none; } |
|||
|
|||
/* |
|||
* Items |
|||
* Must target `a` elements to exclude other elements (e.g. lists) |
|||
*/ |
|||
|
|||
.uk-nav > li > a { padding: $nav-item-padding-vertical $nav-item-padding-horizontal; } |
|||
|
|||
|
|||
/* Sublists |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Level 2 |
|||
* `ul` needed for higher specificity to override padding |
|||
*/ |
|||
|
|||
ul.uk-nav-sub { |
|||
padding: $nav-sublist-padding-vertical 0 $nav-sublist-padding-vertical $nav-sublist-padding-left; |
|||
@if(mixin-exists(hook-nav-sub)) {@include hook-nav-sub();} |
|||
} |
|||
|
|||
/* |
|||
* Level 3 and deeper |
|||
*/ |
|||
|
|||
.uk-nav-sub ul { padding-left: $nav-sublist-deeper-padding-left; } |
|||
|
|||
/* |
|||
* Items |
|||
*/ |
|||
|
|||
.uk-nav-sub a { padding: $nav-sublist-item-padding-vertical 0; } |
|||
|
|||
|
|||
/* Parent icon modifier |
|||
========================================================================== */ |
|||
|
|||
.uk-nav-parent-icon > .uk-parent > a::after { |
|||
content: ""; |
|||
width: $nav-parent-icon-width; |
|||
height: $nav-parent-icon-height; |
|||
float: right; |
|||
@include svg-fill($internal-nav-parent-close-image, "#000", $nav-parent-icon-color); |
|||
background-repeat: no-repeat; |
|||
background-position: 50% 50%; |
|||
@if(mixin-exists(hook-nav-parent-icon)) {@include hook-nav-parent-icon();} |
|||
} |
|||
|
|||
.uk-nav-parent-icon > .uk-parent.uk-open > a::after { @include svg-fill($internal-nav-parent-open-image, "#000", $nav-parent-icon-color); } |
|||
|
|||
|
|||
/* Header |
|||
========================================================================== */ |
|||
|
|||
.uk-nav-header { |
|||
padding: $nav-header-padding-vertical $nav-header-padding-horizontal; |
|||
text-transform: $nav-header-text-transform; |
|||
font-size: $nav-header-font-size; |
|||
@if(mixin-exists(hook-nav-header)) {@include hook-nav-header();} |
|||
} |
|||
|
|||
.uk-nav-header:not(:first-child) { margin-top: $nav-header-margin-top; } |
|||
|
|||
|
|||
/* Divider |
|||
========================================================================== */ |
|||
|
|||
.uk-nav-divider { |
|||
margin: $nav-divider-margin-vertical $nav-divider-margin-horizontal; |
|||
@if(mixin-exists(hook-nav-divider)) {@include hook-nav-divider();} |
|||
} |
|||
|
|||
|
|||
/* Default modifier |
|||
========================================================================== */ |
|||
|
|||
.uk-nav-default { |
|||
@if(mixin-exists(hook-nav-default)) {@include hook-nav-default();} |
|||
} |
|||
|
|||
/* |
|||
* Items |
|||
*/ |
|||
|
|||
.uk-nav-default > li > a { |
|||
color: $nav-default-item-color; |
|||
@if(mixin-exists(hook-nav-default-item)) {@include hook-nav-default-item();} |
|||
} |
|||
|
|||
/* Hover + Focus */ |
|||
.uk-nav-default > li > a:hover, |
|||
.uk-nav-default > li > a:focus { |
|||
color: $nav-default-item-hover-color; |
|||
@if(mixin-exists(hook-nav-default-item-hover)) {@include hook-nav-default-item-hover();} |
|||
} |
|||
|
|||
/* Active */ |
|||
.uk-nav-default > li.uk-active > a { |
|||
color: $nav-default-item-active-color; |
|||
@if(mixin-exists(hook-nav-default-item-active)) {@include hook-nav-default-item-active();} |
|||
} |
|||
|
|||
/* |
|||
* Header |
|||
*/ |
|||
|
|||
.uk-nav-default .uk-nav-header { |
|||
color: $nav-default-header-color; |
|||
@if(mixin-exists(hook-nav-default-header)) {@include hook-nav-default-header();} |
|||
} |
|||
|
|||
/* |
|||
* Divider |
|||
*/ |
|||
|
|||
.uk-nav-default .uk-nav-divider { |
|||
border-top: $nav-default-divider-border-width solid $nav-default-divider-border; |
|||
@if(mixin-exists(hook-nav-default-divider)) {@include hook-nav-default-divider();} |
|||
} |
|||
|
|||
/* |
|||
* Sublists |
|||
*/ |
|||
|
|||
.uk-nav-default .uk-nav-sub a { color: $nav-default-sublist-item-color; } |
|||
|
|||
.uk-nav-default .uk-nav-sub a:hover, |
|||
.uk-nav-default .uk-nav-sub a:focus { color: $nav-default-sublist-item-hover-color; } |
|||
|
|||
|
|||
/* Primary modifier |
|||
========================================================================== */ |
|||
|
|||
.uk-nav-primary { |
|||
@if(mixin-exists(hook-nav-primary)) {@include hook-nav-primary();} |
|||
} |
|||
|
|||
/* |
|||
* Items |
|||
*/ |
|||
|
|||
.uk-nav-primary > li > a { |
|||
font-size: $nav-primary-item-font-size; |
|||
line-height: $nav-primary-item-line-height; |
|||
color: $nav-primary-item-color; |
|||
@if(mixin-exists(hook-nav-primary-item)) {@include hook-nav-primary-item();} |
|||
} |
|||
|
|||
/* Hover + Focus */ |
|||
.uk-nav-primary > li > a:hover, |
|||
.uk-nav-primary > li > a:focus { |
|||
color: $nav-primary-item-hover-color; |
|||
@if(mixin-exists(hook-nav-primary-item-hover)) {@include hook-nav-primary-item-hover();} |
|||
} |
|||
|
|||
/* Active */ |
|||
.uk-nav-primary > li.uk-active > a { |
|||
color: $nav-primary-item-active-color; |
|||
@if(mixin-exists(hook-nav-primary-item-active)) {@include hook-nav-primary-item-active();} |
|||
} |
|||
|
|||
/* |
|||
* Header |
|||
*/ |
|||
|
|||
.uk-nav-primary .uk-nav-header { |
|||
color: $nav-primary-header-color; |
|||
@if(mixin-exists(hook-nav-primary-header)) {@include hook-nav-primary-header();} |
|||
} |
|||
|
|||
/* |
|||
* Divider |
|||
*/ |
|||
|
|||
.uk-nav-primary .uk-nav-divider { |
|||
border-top: $nav-primary-divider-border-width solid $nav-primary-divider-border; |
|||
@if(mixin-exists(hook-nav-primary-divider)) {@include hook-nav-primary-divider();} |
|||
} |
|||
|
|||
/* |
|||
* Sublists |
|||
*/ |
|||
|
|||
.uk-nav-primary .uk-nav-sub a { color: $nav-primary-sublist-item-color; } |
|||
|
|||
.uk-nav-primary .uk-nav-sub a:hover, |
|||
.uk-nav-primary .uk-nav-sub a:focus { color: $nav-primary-sublist-item-hover-color; } |
|||
|
|||
|
|||
/* Alignment modifier |
|||
========================================================================== */ |
|||
|
|||
.uk-nav-center { text-align: center; } |
|||
|
|||
/* Sublists */ |
|||
.uk-nav-center .uk-nav-sub, |
|||
.uk-nav-center .uk-nav-sub ul { padding-left: 0; } |
|||
|
|||
/* Parent icon modifier */ |
|||
.uk-nav-center.uk-nav-parent-icon > .uk-parent > a::after { position: absolute; } |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-nav-misc)) {@include hook-nav-misc();} |
|||
|
|||
// @mixin hook-nav-sub(){} |
|||
// @mixin hook-nav-parent-icon(){} |
|||
// @mixin hook-nav-header(){} |
|||
// @mixin hook-nav-divider(){} |
|||
// @mixin hook-nav-default(){} |
|||
// @mixin hook-nav-default-item(){} |
|||
// @mixin hook-nav-default-item-hover(){} |
|||
// @mixin hook-nav-default-item-active(){} |
|||
// @mixin hook-nav-default-header(){} |
|||
// @mixin hook-nav-default-divider(){} |
|||
// @mixin hook-nav-primary(){} |
|||
// @mixin hook-nav-primary-item(){} |
|||
// @mixin hook-nav-primary-item-hover(){} |
|||
// @mixin hook-nav-primary-item-active(){} |
|||
// @mixin hook-nav-primary-header(){} |
|||
// @mixin hook-nav-primary-divider(){} |
|||
// @mixin hook-nav-misc(){} |
|||
|
|||
|
|||
// Inverse |
|||
// ======================================================================== |
|||
|
|||
$inverse-nav-parent-icon-color: $inverse-global-color !default; |
|||
$inverse-nav-default-item-color: $inverse-global-muted-color !default; |
|||
$inverse-nav-default-item-hover-color: $inverse-global-color !default; |
|||
$inverse-nav-default-item-active-color: $inverse-global-emphasis-color !default; |
|||
$inverse-nav-default-header-color: $inverse-global-emphasis-color !default; |
|||
$inverse-nav-default-divider-border: $inverse-global-border !default; |
|||
$inverse-nav-default-sublist-item-color: $inverse-global-muted-color !default; |
|||
$inverse-nav-default-sublist-item-hover-color: $inverse-global-color !default; |
|||
|
|||
$inverse-nav-primary-item-color: $inverse-global-muted-color !default; |
|||
$inverse-nav-primary-item-hover-color: $inverse-global-color !default; |
|||
$inverse-nav-primary-item-active-color: $inverse-global-emphasis-color !default; |
|||
$inverse-nav-primary-header-color: $inverse-global-emphasis-color !default; |
|||
$inverse-nav-primary-divider-border: $inverse-global-border !default; |
|||
$inverse-nav-primary-sublist-item-color: $inverse-global-muted-color !default; |
|||
$inverse-nav-primary-sublist-item-hover-color: $inverse-global-color !default; |
|||
|
|||
|
|||
|
|||
// @mixin hook-inverse-nav-parent-icon(){} |
|||
// @mixin hook-inverse-nav-default-item(){} |
|||
// @mixin hook-inverse-nav-default-item-hover(){} |
|||
// @mixin hook-inverse-nav-default-item-active(){} |
|||
// @mixin hook-inverse-nav-default-header(){} |
|||
// @mixin hook-inverse-nav-default-divider(){} |
|||
// @mixin hook-inverse-nav-primary-item(){} |
|||
// @mixin hook-inverse-nav-primary-item-hover(){} |
|||
// @mixin hook-inverse-nav-primary-item-active(){} |
|||
// @mixin hook-inverse-nav-primary-header(){} |
|||
// @mixin hook-inverse-nav-primary-divider(){} |
|||
@ -0,0 +1,537 @@ |
|||
// Name: Navbar |
|||
// Description: Component to create horizontal navigation bars |
|||
// |
|||
// Component: `uk-navbar` |
|||
// |
|||
// Sub-objects: `uk-navbar-container` |
|||
// `uk-navbar-left` |
|||
// `uk-navbar-right` |
|||
// `uk-navbar-center` |
|||
// `uk-navbar-center-left` |
|||
// `uk-navbar-center-right` |
|||
// `uk-navbar-nav` |
|||
// `uk-navbar-item` |
|||
// `uk-navbar-toggle` |
|||
// `uk-navbar-subtitle` |
|||
// `uk-navbar-dropbar` |
|||
// |
|||
// Adopted: `uk-navbar-dropdown` + Modifiers |
|||
// `uk-navbar-dropdown-nav` |
|||
// `uk-navbar-dropdown-grid` |
|||
// `uk-navbar-toggle-icon` |
|||
// |
|||
// Modifiers: `uk-navbar-transparent` |
|||
// `uk-navbar-sticky` |
|||
// `uk-navbar-dropdown-stack` |
|||
// |
|||
// States: `uk-active` |
|||
// `uk-parent` |
|||
// `uk-open` |
|||
// |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$navbar-background: $global-muted-background !default; |
|||
$navbar-color-mode: none !default; |
|||
|
|||
$navbar-nav-item-height: 80px !default; |
|||
$navbar-nav-item-padding-horizontal: 15px !default; |
|||
$navbar-nav-item-color: $global-muted-color !default; |
|||
$navbar-nav-item-font-size: $global-font-size !default; |
|||
$navbar-nav-item-font-family: $global-font-family !default; |
|||
$navbar-nav-item-hover-color: $global-color !default; |
|||
$navbar-nav-item-onclick-color: $global-emphasis-color !default; |
|||
$navbar-nav-item-active-color: $global-emphasis-color !default; |
|||
|
|||
$navbar-item-color: $global-color !default; |
|||
|
|||
$navbar-toggle-color: $global-muted-color !default; |
|||
$navbar-toggle-hover-color: $global-color !default; |
|||
|
|||
$navbar-subtitle-font-size: $global-small-font-size !default; |
|||
|
|||
$navbar-dropdown-z-index: $global-z-index + 20 !default; |
|||
$navbar-dropdown-width: 200px !default; |
|||
$navbar-dropdown-margin: 0 !default; |
|||
$navbar-dropdown-padding: 15px !default; |
|||
$navbar-dropdown-background: $global-muted-background !default; |
|||
$navbar-dropdown-color: $global-color !default; |
|||
$navbar-dropdown-grid-gutter-horizontal: $global-gutter !default; |
|||
$navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default; |
|||
|
|||
$navbar-dropdown-dropbar-margin-top: 0 !default; |
|||
$navbar-dropdown-dropbar-margin-bottom: $navbar-dropdown-dropbar-margin-top !default; |
|||
|
|||
$navbar-dropdown-nav-item-color: $global-muted-color !default; |
|||
$navbar-dropdown-nav-item-hover-color: $global-color !default; |
|||
$navbar-dropdown-nav-item-active-color: $global-emphasis-color !default; |
|||
$navbar-dropdown-nav-header-color: $global-emphasis-color !default; |
|||
$navbar-dropdown-nav-divider-border-width: $global-border-width !default; |
|||
$navbar-dropdown-nav-divider-border: $global-border !default; |
|||
$navbar-dropdown-nav-sublist-item-color: $global-muted-color !default; |
|||
$navbar-dropdown-nav-sublist-item-hover-color: $global-color !default; |
|||
|
|||
$navbar-dropbar-background: $navbar-dropdown-background !default; |
|||
$navbar-dropbar-z-index: $global-z-index - 20 !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Navbar |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Create position context to center navbar group |
|||
*/ |
|||
|
|||
.uk-navbar { |
|||
display: flex; |
|||
/* 1 */ |
|||
position: relative; |
|||
@if(mixin-exists(hook-navbar)) {@include hook-navbar();} |
|||
} |
|||
|
|||
|
|||
/* Container |
|||
========================================================================== */ |
|||
|
|||
.uk-navbar-container:not(.uk-navbar-transparent) { |
|||
background: $navbar-background; |
|||
@if(mixin-exists(hook-navbar-container)) {@include hook-navbar-container();} |
|||
} |
|||
|
|||
// Color Mode |
|||
@if ( $navbar-color-mode == light ) { .uk-navbar-container:not(.uk-navbar-transparent) { @extend .uk-light !optional;} } |
|||
@if ( $navbar-color-mode == dark ) { .uk-navbar-container:not(.uk-navbar-transparent) { @extend .uk-dark !optional;} } |
|||
|
|||
/* |
|||
* Remove pseudo elements created by micro clearfix as precaution (if Container component is used) |
|||
*/ |
|||
|
|||
.uk-navbar-container > ::before, |
|||
.uk-navbar-container > ::after { display: none !important; } |
|||
|
|||
|
|||
/* Groups |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Align navs and items vertically if they have a different height |
|||
* 2. Note: IE 11 requires an extra `div` which affects the center selector |
|||
*/ |
|||
|
|||
.uk-navbar-left, |
|||
.uk-navbar-right, |
|||
// 2. [class*='uk-navbar-center'], |
|||
.uk-navbar-center, |
|||
.uk-navbar-center-left > *, |
|||
.uk-navbar-center-right > * { |
|||
display: flex; |
|||
/* 1 */ |
|||
align-items: center; |
|||
} |
|||
|
|||
/* |
|||
* Horizontal alignment |
|||
* 1. Create position context for centered navbar with sub groups (left/right) |
|||
* 2. Needed for dropdowns because a new position context is created |
|||
* `z-index` must be smaller than off-canvas |
|||
* 3. Fix text wrapping if the centered section is larger than 50% of the navbar |
|||
* 4. Align sub groups for centered navbar |
|||
*/ |
|||
|
|||
.uk-navbar-right { margin-left: auto; } |
|||
|
|||
.uk-navbar-center:only-child { |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
/* 1 */ |
|||
position: relative; |
|||
} |
|||
|
|||
.uk-navbar-center:not(:only-child) { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%,-50%); |
|||
/* 2 */ |
|||
z-index: $global-z-index - 10; |
|||
} |
|||
|
|||
/* 3 */ |
|||
.uk-navbar-center:not(:only-child) .uk-navbar-nav > li > a, |
|||
.uk-navbar-center:not(:only-child) .uk-navbar-item, |
|||
.uk-navbar-center:not(:only-child) .uk-navbar-toggle { white-space: nowrap; } |
|||
|
|||
/* 4 */ |
|||
.uk-navbar-center-left, |
|||
.uk-navbar-center-right { |
|||
position: absolute; |
|||
top: 0; |
|||
} |
|||
|
|||
.uk-navbar-center-left { right: 100%; } |
|||
.uk-navbar-center-right { left: 100%; } |
|||
|
|||
[class*='uk-navbar-center-'] .uk-navbar-nav > li > a, |
|||
[class*='uk-navbar-center-'] .uk-navbar-item, |
|||
[class*='uk-navbar-center-'] .uk-navbar-toggle { white-space: nowrap; } |
|||
|
|||
|
|||
/* Nav |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Reset list |
|||
*/ |
|||
|
|||
.uk-navbar-nav { |
|||
display: flex; |
|||
/* 1 */ |
|||
margin: 0; |
|||
padding: 0; |
|||
list-style: none; |
|||
} |
|||
|
|||
/* |
|||
* Allow items to wrap into the next line |
|||
* Only not `absolute` positioned groups |
|||
*/ |
|||
|
|||
.uk-navbar-left, |
|||
.uk-navbar-right, |
|||
.uk-navbar-center:only-child { flex-wrap: wrap; } |
|||
|
|||
/* |
|||
* Items |
|||
* 1. Center content vertically and horizontally |
|||
* 2. Dimensions |
|||
* 3. Style |
|||
* 4. Required for `a` |
|||
*/ |
|||
|
|||
.uk-navbar-nav > li > a, // Nav item |
|||
.uk-navbar-item, // Content item |
|||
.uk-navbar-toggle { // Clickable item |
|||
/* 1 */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
/* 2 */ |
|||
box-sizing: border-box; |
|||
height: $navbar-nav-item-height; |
|||
padding: 0 $navbar-nav-item-padding-horizontal; |
|||
/* 3 */ |
|||
font-size: $navbar-nav-item-font-size; |
|||
font-family: $navbar-nav-item-font-family; |
|||
/* 4 */ |
|||
text-decoration: none; |
|||
} |
|||
|
|||
/* |
|||
* Nav items |
|||
*/ |
|||
|
|||
.uk-navbar-nav > li > a { |
|||
color: $navbar-nav-item-color; |
|||
@if(mixin-exists(hook-navbar-nav-item)) {@include hook-navbar-nav-item();} |
|||
} |
|||
|
|||
/* |
|||
* Hover |
|||
* Apply hover style also to focus state and if dropdown is opened |
|||
*/ |
|||
|
|||
.uk-navbar-nav > li:hover > a, |
|||
.uk-navbar-nav > li > a:focus, |
|||
.uk-navbar-nav > li > a.uk-open { |
|||
color: $navbar-nav-item-hover-color; |
|||
outline: none; |
|||
@if(mixin-exists(hook-navbar-nav-item-hover)) {@include hook-navbar-nav-item-hover();} |
|||
} |
|||
|
|||
/* OnClick */ |
|||
.uk-navbar-nav > li > a:active { |
|||
color: $navbar-nav-item-onclick-color; |
|||
@if(mixin-exists(hook-navbar-nav-item-onclick)) {@include hook-navbar-nav-item-onclick();} |
|||
} |
|||
|
|||
/* Active */ |
|||
.uk-navbar-nav > li.uk-active > a { |
|||
color: $navbar-nav-item-active-color; |
|||
@if(mixin-exists(hook-navbar-nav-item-active)) {@include hook-navbar-nav-item-active();} |
|||
} |
|||
|
|||
|
|||
/* Item |
|||
========================================================================== */ |
|||
|
|||
.uk-navbar-item { |
|||
color: $navbar-item-color; |
|||
@if(mixin-exists(hook-navbar-item)) {@include hook-navbar-item();} |
|||
} |
|||
|
|||
|
|||
/* Toggle |
|||
========================================================================== */ |
|||
|
|||
.uk-navbar-toggle { |
|||
color: $navbar-toggle-color; |
|||
@if(mixin-exists(hook-navbar-toggle)) {@include hook-navbar-toggle();} |
|||
} |
|||
|
|||
.uk-navbar-toggle:hover, |
|||
.uk-navbar-toggle:focus, |
|||
.uk-navbar-toggle.uk-open { |
|||
color: $navbar-toggle-hover-color; |
|||
outline: none; |
|||
text-decoration: none; |
|||
@if(mixin-exists(hook-navbar-toggle-hover)) {@include hook-navbar-toggle-hover();} |
|||
} |
|||
|
|||
/* |
|||
* Icon |
|||
* Adopts `uk-icon` |
|||
*/ |
|||
|
|||
.uk-navbar-toggle-icon { |
|||
@if(mixin-exists(hook-navbar-toggle-icon)) {@include hook-navbar-toggle-icon();} |
|||
} |
|||
|
|||
/* Hover + Focus */ |
|||
:hover > .uk-navbar-toggle-icon, |
|||
:focus > .uk-navbar-toggle-icon { |
|||
@if(mixin-exists(hook-navbar-toggle-icon-hover)) {@include hook-navbar-toggle-icon-hover();} |
|||
} |
|||
|
|||
|
|||
/* Subtitle |
|||
========================================================================== */ |
|||
|
|||
.uk-navbar-subtitle { |
|||
font-size: $navbar-subtitle-font-size; |
|||
@if(mixin-exists(hook-navbar-subtitle)) {@include hook-navbar-subtitle();} |
|||
} |
|||
|
|||
|
|||
/* Style modifiers |
|||
========================================================================== */ |
|||
|
|||
.uk-navbar-transparent { |
|||
@if(mixin-exists(hook-navbar-transparent)) {@include hook-navbar-transparent();} |
|||
} |
|||
|
|||
.uk-navbar-sticky { |
|||
@if(mixin-exists(hook-navbar-sticky)) {@include hook-navbar-sticky();} |
|||
} |
|||
|
|||
|
|||
/* Dropdown |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Adopts `uk-dropdown` |
|||
* 1. Hide by default |
|||
* 2. Set position |
|||
* 3. Set a default width |
|||
* 4. Style |
|||
*/ |
|||
|
|||
.uk-navbar-dropdown { |
|||
/* 1 */ |
|||
display: none; |
|||
/* 2 */ |
|||
position: absolute; |
|||
z-index: $navbar-dropdown-z-index; |
|||
/* 3 */ |
|||
box-sizing: border-box; |
|||
width: $navbar-dropdown-width; |
|||
/* 4 */ |
|||
padding: $navbar-dropdown-padding; |
|||
background: $navbar-dropdown-background; |
|||
color: $navbar-dropdown-color; |
|||
@if(mixin-exists(hook-navbar-dropdown)) {@include hook-navbar-dropdown();} |
|||
} |
|||
|
|||
/* Show */ |
|||
.uk-navbar-dropdown.uk-open { display: block; } |
|||
|
|||
/* |
|||
* Direction / Alignment modifiers |
|||
*/ |
|||
|
|||
/* Direction */ |
|||
[class*='uk-navbar-dropdown-top'] { margin-top: (-$navbar-dropdown-margin); } |
|||
[class*='uk-navbar-dropdown-bottom'] { margin-top: $navbar-dropdown-margin; } |
|||
[class*='uk-navbar-dropdown-left'] { margin-left: (-$navbar-dropdown-margin); } |
|||
[class*='uk-navbar-dropdown-right'] { margin-left: $navbar-dropdown-margin; } |
|||
|
|||
/* |
|||
* Grid |
|||
* Adopts `uk-grid` |
|||
*/ |
|||
|
|||
/* Gutter Horizontal */ |
|||
.uk-navbar-dropdown-grid { margin-left: (-$navbar-dropdown-grid-gutter-horizontal); } |
|||
.uk-navbar-dropdown-grid > * { padding-left: $navbar-dropdown-grid-gutter-horizontal; } |
|||
|
|||
/* Gutter Vertical */ |
|||
.uk-navbar-dropdown-grid > .uk-grid-margin { margin-top: $navbar-dropdown-grid-gutter-vertical; } |
|||
|
|||
/* Stack */ |
|||
.uk-navbar-dropdown-stack .uk-navbar-dropdown-grid > * { width: 100% !important; } |
|||
|
|||
/* |
|||
* Width modifier |
|||
*/ |
|||
|
|||
.uk-navbar-dropdown-width-2:not(.uk-navbar-dropdown-stack) { width: ($navbar-dropdown-width * 2); } |
|||
.uk-navbar-dropdown-width-3:not(.uk-navbar-dropdown-stack) { width: ($navbar-dropdown-width * 3); } |
|||
.uk-navbar-dropdown-width-4:not(.uk-navbar-dropdown-stack) { width: ($navbar-dropdown-width * 4); } |
|||
.uk-navbar-dropdown-width-5:not(.uk-navbar-dropdown-stack) { width: ($navbar-dropdown-width * 5); } |
|||
|
|||
/* |
|||
* Dropbar modifier |
|||
*/ |
|||
|
|||
.uk-navbar-dropdown-dropbar { |
|||
margin-top: $navbar-dropdown-dropbar-margin-top; |
|||
margin-bottom: $navbar-dropdown-dropbar-margin-bottom; |
|||
@if(mixin-exists(hook-navbar-dropdown-dropbar)) {@include hook-navbar-dropdown-dropbar();} |
|||
} |
|||
|
|||
|
|||
/* Dropdown Nav |
|||
* Adopts `uk-nav` |
|||
========================================================================== */ |
|||
|
|||
.uk-navbar-dropdown-nav { |
|||
@if(mixin-exists(hook-navbar-dropdown-nav)) {@include hook-navbar-dropdown-nav();} |
|||
} |
|||
|
|||
/* |
|||
* Items |
|||
*/ |
|||
|
|||
.uk-navbar-dropdown-nav > li > a { |
|||
color: $navbar-dropdown-nav-item-color; |
|||
@if(mixin-exists(hook-navbar-dropdown-nav-item)) {@include hook-navbar-dropdown-nav-item();} |
|||
} |
|||
|
|||
/* Hover + Focus */ |
|||
.uk-navbar-dropdown-nav > li > a:hover, |
|||
.uk-navbar-dropdown-nav > li > a:focus { |
|||
color: $navbar-dropdown-nav-item-hover-color; |
|||
@if(mixin-exists(hook-navbar-dropdown-nav-item-hover)) {@include hook-navbar-dropdown-nav-item-hover();} |
|||
} |
|||
|
|||
/* Active */ |
|||
.uk-navbar-dropdown-nav > li.uk-active > a { |
|||
color: $navbar-dropdown-nav-item-active-color; |
|||
@if(mixin-exists(hook-navbar-dropdown-nav-item-active)) {@include hook-navbar-dropdown-nav-item-active();} |
|||
} |
|||
|
|||
/* |
|||
* Header |
|||
*/ |
|||
|
|||
.uk-navbar-dropdown-nav .uk-nav-header { |
|||
color: $navbar-dropdown-nav-header-color; |
|||
@if(mixin-exists(hook-navbar-dropdown-nav-header)) {@include hook-navbar-dropdown-nav-header();} |
|||
} |
|||
|
|||
/* |
|||
* Divider |
|||
*/ |
|||
|
|||
.uk-navbar-dropdown-nav .uk-nav-divider { |
|||
border-top: $navbar-dropdown-nav-divider-border-width solid $navbar-dropdown-nav-divider-border; |
|||
@if(mixin-exists(hook-navbar-dropdown-nav-divider)) {@include hook-navbar-dropdown-nav-divider();} |
|||
} |
|||
|
|||
/* |
|||
* Sublists |
|||
*/ |
|||
|
|||
.uk-navbar-dropdown-nav .uk-nav-sub a { color: $navbar-dropdown-nav-sublist-item-color; } |
|||
|
|||
.uk-navbar-dropdown-nav .uk-nav-sub a:hover, |
|||
.uk-navbar-dropdown-nav .uk-nav-sub a:focus { color: $navbar-dropdown-nav-sublist-item-hover-color; } |
|||
|
|||
|
|||
/* Dropbar |
|||
========================================================================== */ |
|||
|
|||
.uk-navbar-dropbar { |
|||
background: $navbar-dropbar-background; |
|||
@if(mixin-exists(hook-navbar-dropbar)) {@include hook-navbar-dropbar();} |
|||
} |
|||
|
|||
/* |
|||
* Slide modifier |
|||
*/ |
|||
|
|||
.uk-navbar-dropbar-slide { |
|||
position: absolute; |
|||
z-index: $navbar-dropbar-z-index; |
|||
left: 0; |
|||
right: 0; |
|||
@if(mixin-exists(hook-navbar-dropbar-slide)) {@include hook-navbar-dropbar-slide();} |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-navbar-misc)) {@include hook-navbar-misc();} |
|||
|
|||
// @mixin hook-navbar(){} |
|||
// @mixin hook-navbar-container(){} |
|||
// @mixin hook-navbar-nav-item(){} |
|||
// @mixin hook-navbar-nav-item-hover(){} |
|||
// @mixin hook-navbar-nav-item-onclick(){} |
|||
// @mixin hook-navbar-nav-item-active(){} |
|||
// @mixin hook-navbar-item(){} |
|||
// @mixin hook-navbar-toggle(){} |
|||
// @mixin hook-navbar-toggle-hover(){} |
|||
// @mixin hook-navbar-toggle-icon(){} |
|||
// @mixin hook-navbar-toggle-icon-hover(){} |
|||
// @mixin hook-navbar-subtitle(){} |
|||
// @mixin hook-navbar-transparent(){} |
|||
// @mixin hook-navbar-sticky(){} |
|||
// @mixin hook-navbar-dropdown(){} |
|||
// @mixin hook-navbar-dropdown-dropbar(){} |
|||
// @mixin hook-navbar-dropdown-nav(){} |
|||
// @mixin hook-navbar-dropdown-nav-item(){} |
|||
// @mixin hook-navbar-dropdown-nav-item-hover(){} |
|||
// @mixin hook-navbar-dropdown-nav-item-active(){} |
|||
// @mixin hook-navbar-dropdown-nav-header(){} |
|||
// @mixin hook-navbar-dropdown-nav-divider(){} |
|||
// @mixin hook-navbar-dropbar(){} |
|||
// @mixin hook-navbar-dropbar-slide(){} |
|||
// @mixin hook-navbar-misc(){} |
|||
|
|||
|
|||
// Inverse |
|||
// ======================================================================== |
|||
|
|||
$inverse-navbar-nav-item-color: $inverse-global-muted-color !default; |
|||
$inverse-navbar-nav-item-hover-color: $inverse-global-color !default; |
|||
$inverse-navbar-nav-item-onclick-color: $inverse-global-emphasis-color !default; |
|||
$inverse-navbar-nav-item-active-color: $inverse-global-emphasis-color !default; |
|||
$inverse-navbar-item-color: $inverse-global-color !default; |
|||
$inverse-navbar-toggle-color: $inverse-global-muted-color !default; |
|||
$inverse-navbar-toggle-hover-color: $inverse-global-color !default; |
|||
|
|||
|
|||
|
|||
// @mixin hook-inverse-navbar-nav-item(){} |
|||
// @mixin hook-inverse-navbar-nav-item-hover(){} |
|||
// @mixin hook-inverse-navbar-nav-item-onclick(){} |
|||
// @mixin hook-inverse-navbar-nav-item-active(){} |
|||
// @mixin hook-inverse-navbar-item(){} |
|||
// @mixin hook-inverse-navbar-toggle(){} |
|||
// @mixin hook-inverse-navbar-toggle-hover(){} |
|||
@ -0,0 +1,190 @@ |
|||
// Name: Notification |
|||
// Description: Component to create notification messages |
|||
// |
|||
// Component: `uk-notification` |
|||
// |
|||
// Sub-objects: `uk-notification-message` |
|||
// |
|||
// Adopted: `uk-notification-close` |
|||
// |
|||
// Modifiers: `uk-notification-top-center` |
|||
// `uk-notification-top-right` |
|||
// `uk-notification-bottom-left` |
|||
// `uk-notification-bottom-center` |
|||
// `uk-notification-bottom-right` |
|||
// `uk-notification-message-primary` |
|||
// `uk-notification-message-success` |
|||
// `uk-notification-message-warning` |
|||
// `uk-notification-message-danger` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$notification-position: 10px !default; |
|||
$notification-z-index: $global-z-index + 40 !default; |
|||
$notification-width: 350px !default; |
|||
|
|||
$notification-message-margin-bottom: 10px !default; |
|||
$notification-message-padding: $global-small-gutter !default; |
|||
$notification-message-background: $global-muted-background !default; |
|||
$notification-message-color: $global-color !default; |
|||
$notification-message-font-size: $global-medium-font-size !default; |
|||
$notification-message-line-height: 1.4 !default; |
|||
|
|||
$notification-close-top: $notification-message-padding + 5px !default; |
|||
$notification-close-right: $notification-message-padding !default; |
|||
|
|||
$notification-message-primary-color: $global-primary-background !default; |
|||
$notification-message-success-color: $global-success-background !default; |
|||
$notification-message-warning-color: $global-warning-background !default; |
|||
$notification-message-danger-color: $global-danger-background !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Notification |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Set position |
|||
* 2. Dimensions |
|||
*/ |
|||
|
|||
.uk-notification { |
|||
/* 1 */ |
|||
position: fixed; |
|||
top: $notification-position; |
|||
left: $notification-position; |
|||
z-index: $notification-z-index; |
|||
/* 2 */ |
|||
box-sizing: border-box; |
|||
width: $notification-width; |
|||
@if(mixin-exists(hook-notification)) {@include hook-notification();} |
|||
} |
|||
|
|||
|
|||
/* Position modifiers |
|||
========================================================================== */ |
|||
|
|||
.uk-notification-top-right, |
|||
.uk-notification-bottom-right { |
|||
left: auto; |
|||
right: $notification-position; |
|||
} |
|||
|
|||
.uk-notification-top-center, |
|||
.uk-notification-bottom-center { |
|||
left: 50%; |
|||
margin-left: ($notification-width / -2); |
|||
} |
|||
|
|||
.uk-notification-bottom-left, |
|||
.uk-notification-bottom-right, |
|||
.uk-notification-bottom-center { |
|||
top: auto; |
|||
bottom: $notification-position; |
|||
} |
|||
|
|||
|
|||
/* Responsiveness |
|||
========================================================================== */ |
|||
|
|||
/* Phones portrait and smaller */ |
|||
@media (max-width: $breakpoint-xsmall-max) { |
|||
|
|||
.uk-notification { |
|||
left: $notification-position; |
|||
right: $notification-position; |
|||
width: auto; |
|||
margin: 0; |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
/* Message |
|||
========================================================================== */ |
|||
|
|||
.uk-notification-message { |
|||
position: relative; |
|||
margin-bottom: $notification-message-margin-bottom; |
|||
padding: $notification-message-padding; |
|||
background: $notification-message-background; |
|||
color: $notification-message-color; |
|||
font-size: $notification-message-font-size; |
|||
line-height: $notification-message-line-height; |
|||
cursor: pointer; |
|||
@if(mixin-exists(hook-notification-message)) {@include hook-notification-message();} |
|||
} |
|||
|
|||
|
|||
/* Close |
|||
* Adopts `uk-close` |
|||
========================================================================== */ |
|||
|
|||
.uk-notification-close { |
|||
display: none; |
|||
position: absolute; |
|||
top: $notification-close-top; |
|||
right: $notification-close-right; |
|||
@if(mixin-exists(hook-notification-close)) {@include hook-notification-close();} |
|||
} |
|||
|
|||
.uk-notification-message:hover .uk-notification-close { display: block; } |
|||
|
|||
|
|||
/* Style modifiers |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Primary |
|||
*/ |
|||
|
|||
.uk-notification-message-primary { |
|||
color: $notification-message-primary-color; |
|||
@if(mixin-exists(hook-notification-message-primary)) {@include hook-notification-message-primary();} |
|||
} |
|||
|
|||
/* |
|||
* Success |
|||
*/ |
|||
|
|||
.uk-notification-message-success { |
|||
color: $notification-message-success-color; |
|||
@if(mixin-exists(hook-notification-message-success)) {@include hook-notification-message-success();} |
|||
} |
|||
|
|||
/* |
|||
* Warning |
|||
*/ |
|||
|
|||
.uk-notification-message-warning { |
|||
color: $notification-message-warning-color; |
|||
@if(mixin-exists(hook-notification-message-warning)) {@include hook-notification-message-warning();} |
|||
} |
|||
|
|||
/* |
|||
* Danger |
|||
*/ |
|||
|
|||
.uk-notification-message-danger { |
|||
color: $notification-message-danger-color; |
|||
@if(mixin-exists(hook-notification-message-danger)) {@include hook-notification-message-danger();} |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-notification-misc)) {@include hook-notification-misc();} |
|||
|
|||
// @mixin hook-notification(){} |
|||
// @mixin hook-notification-message(){} |
|||
// @mixin hook-notification-close(){} |
|||
// @mixin hook-notification-message-primary(){} |
|||
// @mixin hook-notification-message-success(){} |
|||
// @mixin hook-notification-message-warning(){} |
|||
// @mixin hook-notification-message-danger(){} |
|||
// @mixin hook-notification-misc(){} |
|||
@ -0,0 +1,301 @@ |
|||
// Name: Off-canvas |
|||
// Description: Component to create an off-canvas sidebar |
|||
// |
|||
// Component: `uk-offcanvas` |
|||
// |
|||
// Sub-objects: `uk-offcanvas-bar` |
|||
// `uk-offcanvas-container` |
|||
// `uk-offcanvas-content` |
|||
// `uk-offcanvas-page` |
|||
// |
|||
// Adopted: `uk-offcanvas-close` |
|||
// |
|||
// Modifiers: `uk-offcanvas-flip` |
|||
// `uk-offcanvas-bar-animation` |
|||
// `uk-offcanvas-reveal` |
|||
// `uk-offcanvas-overlay` |
|||
// `uk-offcanvas-content-animation` |
|||
// |
|||
// States: `uk-open` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$offcanvas-z-index: $global-z-index !default; |
|||
|
|||
$offcanvas-bar-width: 270px !default; |
|||
$offcanvas-bar-padding-vertical: $global-margin !default; |
|||
$offcanvas-bar-padding-horizontal: $global-margin !default; |
|||
$offcanvas-bar-background: $global-secondary-background !default; |
|||
$offcanvas-bar-color-mode: light !default; |
|||
|
|||
$offcanvas-bar-width-m: 350px !default; |
|||
$offcanvas-bar-padding-vertical-m: $global-medium-gutter !default; |
|||
$offcanvas-bar-padding-horizontal-m: $global-medium-gutter !default; |
|||
|
|||
$offcanvas-close-position: 20px !default; |
|||
$offcanvas-close-padding: 5px !default; |
|||
|
|||
$offcanvas-overlay-background: rgba(0,0,0,0.1) !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Off-canvas |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Hide by default |
|||
* 2. Set position |
|||
*/ |
|||
|
|||
.uk-offcanvas { |
|||
/* 1 */ |
|||
display: none; |
|||
/* 2 */ |
|||
position: fixed; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: $offcanvas-z-index; |
|||
} |
|||
|
|||
/* |
|||
* Flip modifier |
|||
*/ |
|||
|
|||
.uk-offcanvas-flip .uk-offcanvas { |
|||
right: 0; |
|||
left: auto; |
|||
} |
|||
|
|||
|
|||
/* Bar |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Set position |
|||
* 2. Size and style |
|||
* 3. Allow scrolling |
|||
* 4. Transform |
|||
*/ |
|||
|
|||
.uk-offcanvas-bar { |
|||
/* 1 */ |
|||
position: absolute; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
/* 2 */ |
|||
box-sizing: border-box; |
|||
width: $offcanvas-bar-width; |
|||
padding: $offcanvas-bar-padding-vertical $offcanvas-bar-padding-horizontal; |
|||
background: $offcanvas-bar-background; |
|||
/* 3 */ |
|||
overflow-y: auto; |
|||
-webkit-overflow-scrolling: touch; |
|||
/* 4 */ |
|||
transform: translateX(-100%); |
|||
@if(mixin-exists(hook-offcanvas-bar)) {@include hook-offcanvas-bar();} |
|||
} |
|||
|
|||
/* Tablet landscape and bigger */ |
|||
@media (min-width: $breakpoint-medium) { |
|||
|
|||
.uk-offcanvas-bar { |
|||
width: $offcanvas-bar-width-m; |
|||
padding: $offcanvas-bar-padding-vertical-m $offcanvas-bar-padding-horizontal-m; |
|||
} |
|||
|
|||
} |
|||
|
|||
// Color Mode |
|||
@if ( $offcanvas-bar-color-mode == light ) { .uk-offcanvas-bar { @extend .uk-light !optional;} } |
|||
@if ( $offcanvas-bar-color-mode == dark ) { .uk-offcanvas-bar { @extend .uk-dark !optional;} } |
|||
|
|||
/* Flip modifier */ |
|||
.uk-offcanvas-flip .uk-offcanvas-bar { |
|||
left: auto; |
|||
right: 0; |
|||
transform: translateX(100%); |
|||
} |
|||
|
|||
/* |
|||
* Open |
|||
*/ |
|||
|
|||
.uk-open > .uk-offcanvas-bar { transform: translateX(0); } |
|||
|
|||
/* |
|||
* Slide Animation (Used in slide and push mode) |
|||
*/ |
|||
|
|||
.uk-offcanvas-bar-animation { transition: transform 0.3s ease-out; } |
|||
|
|||
/* |
|||
* Reveal Animation |
|||
* 1. Set position |
|||
* 2. Clip the bar |
|||
* 3. Animation |
|||
* 4. Reset transform |
|||
*/ |
|||
|
|||
.uk-offcanvas-reveal { |
|||
/* 1 */ |
|||
position: absolute; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
/* 2 */ |
|||
width: 0; |
|||
overflow: hidden; |
|||
/* 3 */ |
|||
transition: width 0.3s ease-out; |
|||
} |
|||
|
|||
.uk-offcanvas-reveal .uk-offcanvas-bar { |
|||
/* 4 */ |
|||
transform: translateX(0); |
|||
} |
|||
|
|||
.uk-open > .uk-offcanvas-reveal { width: $offcanvas-bar-width; } |
|||
|
|||
/* Tablet landscape and bigger */ |
|||
@media (min-width: $breakpoint-medium) { |
|||
|
|||
.uk-open > .uk-offcanvas-reveal { width: $offcanvas-bar-width-m; } |
|||
|
|||
} |
|||
|
|||
/* |
|||
* Flip modifier |
|||
*/ |
|||
|
|||
.uk-offcanvas-flip .uk-offcanvas-reveal { |
|||
right: 0; |
|||
left: auto; |
|||
} |
|||
|
|||
|
|||
/* Close |
|||
* Adopts `uk-close` |
|||
========================================================================== */ |
|||
|
|||
.uk-offcanvas-close { |
|||
position: absolute; |
|||
z-index: $offcanvas-z-index; |
|||
top: $offcanvas-close-position; |
|||
right: $offcanvas-close-position; |
|||
padding: $offcanvas-close-padding; |
|||
@if(mixin-exists(hook-offcanvas-close)) {@include hook-offcanvas-close();} |
|||
} |
|||
|
|||
|
|||
/* Overlay |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Overlay the whole page. Needed for the `::before` |
|||
* 1. Using `100vw` so no modification is needed when off-canvas is flipped |
|||
* 2. Allow for closing with swipe gesture on devices with pointer events. |
|||
*/ |
|||
|
|||
.uk-offcanvas-overlay { |
|||
/* 1 */ |
|||
width: 100vw; |
|||
/* 2 */ |
|||
touch-action: none; |
|||
} |
|||
|
|||
/* |
|||
* 1. Mask the whole page |
|||
* 2. Fade-in transition |
|||
*/ |
|||
|
|||
.uk-offcanvas-overlay::before { |
|||
/* 1 */ |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
background: $offcanvas-overlay-background; |
|||
/* 2 */ |
|||
opacity: 0; |
|||
transition: opacity 0.15s linear; |
|||
@if(mixin-exists(hook-offcanvas-overlay)) {@include hook-offcanvas-overlay();} |
|||
} |
|||
|
|||
.uk-offcanvas-overlay.uk-open::before { opacity: 1; } |
|||
|
|||
|
|||
/* Container |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Prevent horizontal scrollbar when the content is slide-out |
|||
* Has to be on the `html` element too to make it work on the `body` |
|||
*/ |
|||
|
|||
.uk-offcanvas-page, |
|||
.uk-offcanvas-container { overflow-x: hidden; } |
|||
|
|||
/* |
|||
* Prevent all scrollbars if overlay is used |
|||
*/ |
|||
|
|||
.uk-offcanvas-container-overlay { overflow: hidden; } |
|||
|
|||
|
|||
/* Content |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Prepare slide-out animation (Used in reveal and push mode) |
|||
* Using `position: left` instead of `transform` because position `fixed` elements like sticky navbars |
|||
* lose their fixed state and behaves like `absolute` within a transformed container |
|||
* Note: JS sets a fixed width and height so the page can slide-out without shrinking |
|||
* 1. Smooth scrolling |
|||
*/ |
|||
|
|||
.uk-offcanvas-container .uk-offcanvas-content { |
|||
position: relative; |
|||
left: 0; |
|||
transition: left 0.3s ease-out; |
|||
/* 1 */ |
|||
-webkit-overflow-scrolling: touch; |
|||
} |
|||
|
|||
/* Disable scrolling if overlay mode */ |
|||
.uk-offcanvas-overlay .uk-offcanvas-content { overflow-y: hidden; } |
|||
|
|||
/* |
|||
* Activate slide-out animation |
|||
*/ |
|||
|
|||
:not(.uk-offcanvas-flip) > .uk-offcanvas-content-animation { left: $offcanvas-bar-width; } |
|||
|
|||
.uk-offcanvas-flip > .uk-offcanvas-content-animation { left: (-$offcanvas-bar-width); } |
|||
|
|||
/* Tablet landscape and bigger */ |
|||
@media (min-width: $breakpoint-medium) { |
|||
|
|||
:not(.uk-offcanvas-flip) > .uk-offcanvas-content-animation { left: $offcanvas-bar-width-m; } |
|||
|
|||
.uk-offcanvas-flip > .uk-offcanvas-content-animation { left: (-$offcanvas-bar-width-m); } |
|||
|
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-offcanvas-misc)) {@include hook-offcanvas-misc();} |
|||
|
|||
// @mixin hook-offcanvas-bar(){} |
|||
// @mixin hook-offcanvas-close(){} |
|||
// @mixin hook-offcanvas-overlay(){} |
|||
// @mixin hook-offcanvas-misc(){} |
|||
@ -0,0 +1,85 @@ |
|||
// Name: Overlay |
|||
// Description: Component to create content areas overlaying an image |
|||
// |
|||
// Component: `uk-overlay` |
|||
// |
|||
// Adopted: `uk-overlay-icon` |
|||
// |
|||
// Modifier: `uk-overlay-default` |
|||
// `uk-overlay-primary` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$overlay-padding-horizontal: $global-gutter !default; |
|||
$overlay-padding-vertical: $global-gutter !default; |
|||
|
|||
$overlay-default-background: rgba($global-background, 0.8) !default; |
|||
|
|||
$overlay-primary-background: rgba($global-secondary-background, 0.8) !default; |
|||
$overlay-primary-color-mode: light !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Overlay |
|||
========================================================================== */ |
|||
|
|||
.uk-overlay { |
|||
padding: $overlay-padding-vertical $overlay-padding-horizontal; |
|||
@if(mixin-exists(hook-overlay)) {@include hook-overlay();} |
|||
} |
|||
|
|||
/* |
|||
* Remove margin from the last-child |
|||
*/ |
|||
|
|||
.uk-overlay > :last-child { margin-bottom: 0; } |
|||
|
|||
|
|||
/* Icon |
|||
========================================================================== */ |
|||
|
|||
.uk-overlay-icon { |
|||
@if(mixin-exists(hook-overlay-icon)) {@include hook-overlay-icon();} |
|||
} |
|||
|
|||
|
|||
/* Style modifiers |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Default |
|||
*/ |
|||
|
|||
.uk-overlay-default { |
|||
background: $overlay-default-background; |
|||
@if(mixin-exists(hook-overlay-default)) {@include hook-overlay-default();} |
|||
} |
|||
|
|||
/* |
|||
* Primary |
|||
*/ |
|||
|
|||
.uk-overlay-primary { |
|||
background: $overlay-primary-background; |
|||
@if(mixin-exists(hook-overlay-primary)) {@include hook-overlay-primary();} |
|||
} |
|||
|
|||
// Color Mode |
|||
@if ( $overlay-primary-color-mode == light ) { .uk-overlay-primary { @extend .uk-light !optional;} } |
|||
@if ( $overlay-primary-color-mode == dark ) { .uk-overlay-primary { @extend .uk-dark !optional;} } |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-overlay-misc)) {@include hook-overlay-misc();} |
|||
|
|||
// @mixin hook-overlay(){} |
|||
// @mixin hook-overlay-icon(){} |
|||
// @mixin hook-overlay-default(){} |
|||
// @mixin hook-overlay-primary(){} |
|||
// @mixin hook-overlay-misc(){} |
|||
@ -0,0 +1,81 @@ |
|||
// Name: Padding |
|||
// Description: Utilities for padding |
|||
// |
|||
// Component: `uk-padding` |
|||
// `uk-padding-large` |
|||
// `uk-padding-remove-*` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$padding-padding: $global-gutter !default; |
|||
$padding-padding-l: $global-medium-gutter !default; |
|||
|
|||
$padding-small-padding: $global-small-gutter !default; |
|||
|
|||
$padding-large-padding: $global-gutter !default; |
|||
$padding-large-padding-l: $global-large-gutter !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Padding |
|||
========================================================================== */ |
|||
|
|||
.uk-padding { padding: $padding-padding; } |
|||
|
|||
/* Desktop and bigger */ |
|||
@media (min-width: $breakpoint-large) { |
|||
|
|||
.uk-padding { padding: $padding-padding-l; } |
|||
|
|||
} |
|||
|
|||
|
|||
/* Small |
|||
========================================================================== */ |
|||
|
|||
.uk-padding-small { padding: $padding-small-padding; } |
|||
|
|||
|
|||
/* Large |
|||
========================================================================== */ |
|||
|
|||
.uk-padding-large { padding: $padding-large-padding; } |
|||
|
|||
/* Desktop and bigger */ |
|||
@media (min-width: $breakpoint-large) { |
|||
|
|||
.uk-padding-large { padding: $padding-large-padding-l; } |
|||
|
|||
} |
|||
|
|||
|
|||
/* Remove |
|||
========================================================================== */ |
|||
|
|||
.uk-padding-remove { padding: 0 !important; } |
|||
.uk-padding-remove-top { padding-top: 0 !important; } |
|||
.uk-padding-remove-bottom { padding-bottom: 0 !important; } |
|||
.uk-padding-remove-left { padding-left: 0 !important; } |
|||
.uk-padding-remove-right { padding-right: 0 !important; } |
|||
|
|||
.uk-padding-remove-vertical { |
|||
padding-top: 0 !important; |
|||
padding-bottom: 0 !important; |
|||
} |
|||
|
|||
.uk-padding-remove-horizontal { |
|||
padding-left: 0 !important; |
|||
padding-right: 0 !important; |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-padding-misc)) {@include hook-padding-misc();} |
|||
|
|||
// @mixin hook-padding-misc(){} |
|||
@ -0,0 +1,128 @@ |
|||
// Name: Pagination |
|||
// Description: Component to create a page navigation |
|||
// |
|||
// Component: `uk-pagination` |
|||
// |
|||
// Adopted: `uk-pagination-next` |
|||
// `uk-pagination-previous` |
|||
// |
|||
// States: `uk-active` |
|||
// `uk-disabled` |
|||
// |
|||
// ======================================================================== |
|||
|
|||
|
|||
// Variables |
|||
// ======================================================================== |
|||
|
|||
$pagination-margin-horizontal: 20px !default; |
|||
|
|||
$pagination-item-color: $global-muted-color !default; |
|||
$pagination-item-hover-color: $global-color !default; |
|||
$pagination-item-hover-text-decoration: none !default; |
|||
$pagination-item-active-color: $global-color !default; |
|||
$pagination-item-disabled-color: $global-muted-color !default; |
|||
|
|||
|
|||
/* ======================================================================== |
|||
Component: Pagination |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Allow items to wrap into the next line |
|||
* 2. Gutter |
|||
* 3. Reset list |
|||
*/ |
|||
|
|||
.uk-pagination { |
|||
display: flex; |
|||
/* 1 */ |
|||
flex-wrap: wrap; |
|||
/* 2 */ |
|||
margin-left: (-$pagination-margin-horizontal); |
|||
/* 3 */ |
|||
padding: 0; |
|||
list-style: none; |
|||
@if(mixin-exists(hook-pagination)) {@include hook-pagination();} |
|||
} |
|||
|
|||
/* |
|||
* 1. Space is allocated solely based on content dimensions: 0 0 auto |
|||
* 2. Gutter |
|||
* 3. Create position context for dropdowns |
|||
*/ |
|||
|
|||
.uk-pagination > * { |
|||
/* 1 */ |
|||
flex: none; |
|||
/* 2 */ |
|||
padding-left: $pagination-margin-horizontal; |
|||
/* 3 */ |
|||
position: relative; |
|||
} |
|||
|
|||
|
|||
/* Items |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 1. Prevent gap if child element is `inline-block`, e.g. an icon |
|||
* 2. Style |
|||
*/ |
|||
|
|||
.uk-pagination > * > * { |
|||
/* 1 */ |
|||
display: block; |
|||
/* 2 */ |
|||
color: $pagination-item-color; |
|||
@if(mixin-exists(hook-pagination-item)) {@include hook-pagination-item();} |
|||
} |
|||
|
|||
/* Hover + Focus */ |
|||
.uk-pagination > * > :hover, |
|||
.uk-pagination > * > :focus { |
|||
color: $pagination-item-hover-color; |
|||
text-decoration: $pagination-item-hover-text-decoration; |
|||
@if(mixin-exists(hook-pagination-item-hover)) {@include hook-pagination-item-hover();} |
|||
} |
|||
|
|||
/* Active */ |
|||
.uk-pagination > .uk-active > * { |
|||
color: $pagination-item-active-color; |
|||
@if(mixin-exists(hook-pagination-item-active)) {@include hook-pagination-item-active();} |
|||
} |
|||
|
|||
/* Disabled */ |
|||
.uk-pagination > .uk-disabled > * { |
|||
color: $pagination-item-disabled-color; |
|||
@if(mixin-exists(hook-pagination-item-disabled)) {@include hook-pagination-item-disabled();} |
|||
} |
|||
|
|||
|
|||
// Hooks |
|||
// ======================================================================== |
|||
|
|||
@if(mixin-exists(hook-pagination-misc)) {@include hook-pagination-misc();} |
|||
|
|||
// @mixin hook-pagination(){} |
|||
// @mixin hook-pagination-item(){} |
|||
// @mixin hook-pagination-item-hover(){} |
|||
// @mixin hook-pagination-item-active(){} |
|||
// @mixin hook-pagination-item-disabled(){} |
|||
// @mixin hook-pagination-misc(){} |
|||
|
|||
|
|||
// Inverse |
|||
// ======================================================================== |
|||
|
|||
$inverse-pagination-item-color: $inverse-global-muted-color !default; |
|||
$inverse-pagination-item-hover-color: $inverse-global-color !default; |
|||
$inverse-pagination-item-active-color: $inverse-global-color !default; |
|||
$inverse-pagination-item-disabled-color: $inverse-global-muted-color !default; |
|||
|
|||
|
|||
|
|||
// @mixin hook-inverse-pagination-item(){} |
|||
// @mixin hook-inverse-pagination-item-hover(){} |
|||
// @mixin hook-inverse-pagination-item-active(){} |
|||
// @mixin hook-inverse-pagination-item-disabled(){} |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue