diff --git a/Gemfile b/Gemfile index 05454e37..72dae01f 100644 --- a/Gemfile +++ b/Gemfile @@ -30,5 +30,10 @@ group :jekyll_plugins do gem 'jekyll-sitemap' end +group :development do + gem 'guard' +end + + # Windows does not include zoneinfo files, so bundle the tzinfo-data gem gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] diff --git a/Gemfile.lock b/Gemfile.lock index c5d0173a..9dc40a8f 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -3,15 +3,26 @@ GEM specs: addressable (2.5.2) public_suffix (>= 2.0.2, < 4.0) + coderay (1.1.2) colorator (1.1.0) em-websocket (0.5.1) eventmachine (>= 0.12.9) http_parser.rb (~> 0.6.0) eventmachine (1.2.7) - faraday (0.15.2) + faraday (0.15.3) multipart-post (>= 1.2, < 3) ffi (1.9.25) + formatador (0.2.5) forwardable-extended (2.6.0) + guard (2.14.2) + formatador (>= 0.2.4) + listen (>= 2.7, < 4.0) + lumberjack (>= 1.0.12, < 2.0) + nenv (~> 0.1) + notiffany (~> 0.0) + pry (>= 0.9.12) + shellany (~> 0.0) + thor (>= 0.18.1) http_parser.rb (0.6.0) jekyll (3.6.3) addressable (~> 2.4) @@ -26,7 +37,7 @@ GEM safe_yaml (~> 1.0) jekyll-avatar (0.6.0) jekyll (~> 3.0) - jekyll-feed (0.10.0) + jekyll-feed (0.11.0) jekyll (~> 3.3) jekyll-gist (1.5.0) octokit (~> 4.2) @@ -38,7 +49,7 @@ GEM sass (~> 3.4) jekyll-seo-tag (2.5.0) jekyll (~> 3.3) - jekyll-sitemap (1.1.1) + jekyll-sitemap (1.2.0) jekyll (~> 3.3) jekyll-titles-from-headings (0.5.1) jekyll (~> 3.3) @@ -50,12 +61,21 @@ GEM rb-fsevent (~> 0.9, >= 0.9.4) rb-inotify (~> 0.9, >= 0.9.7) ruby_dep (~> 1.2) + lumberjack (1.0.13) mercenary (0.3.6) + method_source (0.9.0) multipart-post (2.0.0) - octokit (4.10.0) + nenv (0.3.0) + notiffany (0.1.1) + nenv (~> 0.1) + shellany (~> 0.0) + octokit (4.13.0) sawyer (~> 0.8.0, >= 0.5.3) pathutil (0.16.1) forwardable-extended (~> 2.6) + pry (0.11.3) + coderay (~> 1.1.0) + method_source (~> 0.9.0) public_suffix (3.0.3) rb-fsevent (0.10.3) rb-inotify (0.9.10) @@ -71,11 +91,14 @@ GEM sawyer (0.8.1) addressable (>= 2.3.5, < 2.6) faraday (~> 0.8, < 1.0) + shellany (0.0.1) + thor (0.20.0) PLATFORMS ruby DEPENDENCIES + guard jekyll (= 3.6.3) jekyll-avatar jekyll-feed (~> 0.6) diff --git a/Guardfile b/Guardfile new file mode 100644 index 00000000..06d13675 --- /dev/null +++ b/Guardfile @@ -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" diff --git a/README.md b/README.md index f8251f74..039d1952 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,20 @@ To deploy to Netlify: git push -f origin ``` -# Writing content +## Test a Deploy with Surge -## Constructing links + +``` +cd _site +surge +``` + +``` +surge --domain raspy-songs.surge.sh +``` + + +# Technology Reference + +* [UIKit](https://getuikit.com/docs/grid) +* [Liquid templates](https://shopify.github.io/liquid/) diff --git a/_config.yml b/_config.yml index 622894d2..b2d042bd 100644 --- a/_config.yml +++ b/_config.yml @@ -85,12 +85,12 @@ post_assets: /assets/posts/ # Build settings +highlighter: rouge markdown: kramdown kramdown: - input: GFM - auto_ids: true - hard_wrap: false - syntax_highlighter: rouge + input: GFM + auto_ids: true + syntax_highlighter: rouge plugins: - jekyll-feed @@ -108,13 +108,14 @@ titles_from_headings: include: - _redirects exclude: + - Guardfile - '*/glossary.md' - '*/README.md' - README.md - THEME_README.md - Gemfile - Gemfile.lock - - node_modules + - '*/node_modules' - collections.json - get-content.sh - _core/aglio_templates @@ -167,3 +168,6 @@ collections: common: output: true basepath: "moxiegirl/docs.blockstack" + org: + output: true + basepath: "moxiegirl/docs.blockstack" diff --git a/_data/glossary.csv b/_data/glossary.csv new file mode 100644 index 00000000..f8bd3e6a --- /dev/null +++ b/_data/glossary.csv @@ -0,0 +1,57 @@ +Term,Definition,Areas +App Review,An incentive mechanism for application developers in the early stage (first four years) of the ecosystem and helps with bootstrapping the two-sided market., +App Mining,"​​A system where the Blockstack community funds decentralized app teams.", +Atlas,A peer network provide a global index for discovery,Blockstack Tech +block,"A discrete group of records written to a blockchain that can effectively be identified and referenced by the +use of headers that contain a digital fingerprint of the records each block contains.",Filing +blockchain,A database created and shared by the members of a peer-to-peer computer network which each member of that network can independently trust due to the rules governing the database’s creation. A blockchain can therefore be used to replace centralized databases.,Filing +Blockchain Name System (BNS),Replacement for DNS.,Blockstack Tech +blockstack browser,An application for accessing identity and storage.,Blockstack Tech +Blockstack Core,"A complete version of our open-source software available on Github at https://github.com/blockstack/blockstack-core/ that governs the creation of the blockchain, the smart contracts that may be written to our blockchain, and other systems that make up the Blockstack network, when run on the systems and devices of our users and developers.",Filing +blockstack id,See id.blockstack, +Burning,Burning a token means that the token is transferred to an address that is a black hole—one that is not owned by any entity and for which guessing the applicable private key is effectively impossible based on known mathematical principles. This effectively destroys the token by making it unavailable for future use and decreases the total number of tokens available from that point forward.,Filing +consensus hash,"A consensus hash is a cryptographic hash that each node calculates at each block. It is derived from the accepted state transitions in the last-processed block, and a geometric series of prior-calculated consensus hashes. +",General Tech +Consensus rules,"The rules governing the creation of new valid records in a blockchain database, and the mining algorithms used for this purpose.",Filing +control plane ,The part of a network that carries signaling traffic and is responsible for routing. Control packets originate from or are destined for a router. Functions of the control plane include system configuration and management.,General Tech +core node,A server that runs Blockstack Core services.,Filing +crypto-asset,"A digital asset which utilises cryptography, peer-to-peer networking, and a public ledger to regulate the creation of new units, verify transactions, and secure the transactions without the intervention of any middleman.",Filing +cryptography,"The practise and study of encryption and decryption - encoding data so that it can only be decoded by specific individuals. A system for encrypting and decrypting data is a cryptosystem.",General Tech +decentralized application (Dapp),"A Dapp is a service that enables direct interaction between end users and providers (e.g. connecting buyers and sellers in some marketplace, owners and stores in file storage). A term coined by Ethereum. See their glossary: http://ethdocs.org/en/latest/glossary.html",Blockchain general +digital asset,"Also referred to as a crypto-asset. Any set of unique digital information—including, for example, programs, decentralized programs, isolated chunks of programming code, collections of data, e-mail or web addresses or cryptocurrency tokens—that is capable of being stored and uniquely tracked on a computer network such as the Blockstack network and over which a user can maintain control through that network.",Filing +digital fingerprint,"A digital fingerprint is a unique number of a fixed length that can be produced by running any set of digital information through something called a cryptographic hash function. Each set of digital information (including a digital asset, and the digital record of any network operation on that digital asset) should (as a practical matter) have a unique digital fingerprint, which allows that set of digital information to be identified. However, it is almost impossible to recreate a digital asset from its digital fingerprint. The Blockstack network uses industry-standard algorithms such as SHA-256 to create digital fingerprints.",Filing +digital signature,"A digital signature is a sequence of digital information combining a user’s private key and any digital information that the user wishes to sign. Any other party can use the user’s paired public key to verify that the digital signature is authentic, i.e. that the public key was generated from a particular piece of digital information and the user’s private key.",Filing +distributed hash tables (DHT),"A form of network used to store some content in the form of key/value pairs. ... This experimental project try to avoid keeping all the blockchain, but instead prefers to store it in a DHT.",General Tech +ephemeral key,A cryptographic key is called ephemeral if it is generated for each execution of a key establishment process., +fork,"The term fork is used to refer both to any situation where there are two or more competing versions of a blockchain on a network (a situation that may arise and resolve itself in the ordinary course of network operations due to lags in communication between core nodes) and any software update that is proposed for adoption by the core nodes of a blockchain network that may result in a persistent fork on the network, with core nodes that adopt the update recognizing one version of the blockchain and those which do not recognizing another.",Filing +Gaia,Decentralized storage ,Blockstack Tech +genesis block,"The genesis block is the first block of the Stacks blockchain, which will create the initial 1.32 billion Stacks Tokens.",Filing +id.blockstack,"An identifier in the Blockstack, for example moxiegirl.id.blockstack. This is your name & identity that is registered in the .id namespace on Blockstack. Your personal data and storage are built around this ID. Apps that want to access your data use your permission and identity to find it. An id is usually a shorthand for a longer, hash ID string, for example ID-1Fj9kkw15P51Fj9kkw15P5xJmyefWhLKrQMKNPREfaqsJ +",Blockstack Tech +identity management (IDM),"Identity management, also known as identity and access management is, in computer security, the security and business discipline that enables the right individuals to access the right resources at the right times and for the right reason",General Tech +know your customer (KYC),"Or KYC, is a popular term used in the banking or financial field. KYC is a process where financial institutions, insurers and other companies obtain information about the identity and address of the customers as part of risk management.", +KYC,See know your customer, +light clients,"Clients that can independently validate the existence of transactions by downloading only block headers and not the entire blockchain.", +mesh network,"A local network topology in which the infrastructure nodes (i.e. bridges, switches, and other infrastructure devices) connect directly, dynamically and non-hierarchically to as many other nodes as possible and cooperate with one another to efficiently route data from/to clients.",General Tech +mining,"Mining generally refers to the process of performing certain functions for a network such as adding new records to a blockchain in exchange for mining rewards; it may also refer to other mechanisms whereby rewards (usually in the form of cryptocurrency) are provided for performing other tasks helpful to the network.",Filing +mining power,"A miner’s (or group of miners’) mining power is equal to the probability it will be selected to write a new block to the blockchain. Depending on the mechanism for mining, this is usually related to the overall share of computing power or cryptoassets the miner or miners possess relative to all miners for that blockchain.",Filing +mining rewards,Mining rewards are newly issued tokens received by miners in exchange for adding new records to the blockchain or other activities beneficial to the network.,Filing +name,"An identifier or name. Names are a type of digital asset in 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.",General +network operation,"A network operation is any change to the information about a digital asset (or smart contract) stored on a blockchain, including, for example, a change in the digital asset’s owner, or a change in the location at which it is stored on the network. How and when these network operations are performed for each digital asset is governed, on the Blockstack network, either by the Blockstack Core software or a smart contract.",Filing +Public Key Infrastructure (PKI),A system which returns a cryptographic public key associated with a name.,General Tech +private key,"A private key is a very large random sequence of digital information (effectively a very long password) that should be known only by a single user of the network and cannot be plausibly guessed by a third party in a reasonable amount of time. A user generates this large random sequence locally on a computer and should never share it with anyone. Each private key has a paired sequence of digital information, called a public key, which a user can share publicly.",Filing +proof-of-burn mining,"The consensus algorithm used in the Stacks blockchain where miners destroy a proof-of-work-based cryptocurrency (currently Bitcoin) to get tokens; this enables the functionality where nodes can select between conflicting blockchain forks, as the blockchain fork with the most amount of cryptocurrency burned is considered to be the correct fork.", +proof-of-work,"A proof-of-work system or proof-of-work mining is a mining mechanism where miners must expend computing power to solve complicated cryptographic puzzles, and prove that they have done so by writing the solution to the blockchain, in order to be allowed to add blocks to a blockchain. This is the mining system used, for example, by Bitcoin.",Filing +replicated state machines (RSMs),"This is a model for reasoning about distributed computer programs -- any program (plus it's input) can be represented as a state machine, and when trying to get a distributed set of servers to agree on the output of an algorithm, you can model that process as N different state machines",General Tech +smart contract,"A smart contract is a computer program written to a blockchain such as the Blockstack blockchain by developers. This computer program defines the various network operations that can be performed on the digital assets on the blockchain, the computations that can be performed using the smart contract, along with defining various important properties of the respective digital assets like ownership rights and the cost in fuel required to register the digital assets.",Filing +soft fork,"A soft fork is a proposed update to the software governing the network that results in a post-update network that is compatible with the network as it existed prior to the update, because it restricts the network operations that can be performed after the update.",Filing +Stacks blockchain,The Stacks blockchain is the custom blockchain being developed for use by the Blockstack network that will use the Stacks token as its native currency and which will include the genesis block and subsequent blocks created by the mining activities described in The Blockstack Network—Development of the Blockstack network.,Filing +Sybil attacks,"An attack wherein a reputation system is subverted by forging identities in peer-to-peer networks. It is named after the subject of the book Sybil, a case study of a woman diagnosed with dissociative identity disorder.",General Tech +transaction,"A transaction is a unit of work within a block.",General Tech +transaction fee,"A transaction fee is the charge users pay to initiate operations in the underlying blockchain.",Blockstack Tech +two-sided market problem,Economic platforms having two distinct user groups that provide each other with network benefits. The Blockstack platform is a classic two-sided market., +username,A shorthand name for your your id.blockstack.,Blockstack Tech +virtual blockchain,A layer that sits on top of a blockchain that introduces new functionality and operations without requiring changes to the underlying blockchain,Blockstack Tech +wallet address,A wallet address is the form in which a public key can be presented and recorded on a blockchain. Wallet addresses are therefore used to assign the ownership of digital assets on the Blockstack network.,Filing +Web of trust mining,"Web-of-trust mining provides incentive mechanisms for users where an initial trusted-set of unique users is curated in the genesis block and, in the future, the initial set of users can expand the web-of-trust after the network goes live. ", +Zone file,"A Domain Name System (DNS) zone file is a text filethat describes a DNS zone. A DNS zone is a subset, often a single domain, of the hierarchical domain name structure of the DNS.",General Tech diff --git a/_data/navigation_home.yml b/_data/navigation_home.yml index ea67e759..45c4a928 100644 --- a/_data/navigation_home.yml +++ b/_data/navigation_home.yml @@ -1,17 +1,17 @@ # Categories home page navigation -- title: Evaluate Blockstack - desc: Learn about the technology behind Blockstack. Understand the value it offers and how it provides it. +- title: Evaluate the Blockstack Ecosystem + desc: Learn the components that make up the Blockstack Ecosystem. Understand the value a blockchain offers. icon: info - doc: common/construction + doc: org/overview -- title: Use the New Internet - desc: Learn about the New Internet and its applications. Create an identity and learn how to use it. +- title: Use Blockchain Applications + desc: Learn about the New Internet and blockchain applications. Create an identity and learn how to use it. icon: settings doc: browser/browser-introduction -- title: Build Decentralized Applications - desc: Learn how to build an application that earns with Blockstack. +- title: Build Blockchain Applications + desc: Learn how to build a blockchain application with Blockstack. Work through web and mobile tutorials. icon: code doc: browser/hello-blockstack diff --git a/_data/navigation_org.yml b/_data/navigation_org.yml new file mode 100644 index 00000000..f0202c50 --- /dev/null +++ b/_data/navigation_org.yml @@ -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 diff --git a/_data/navigation_usenew.yml b/_data/navigation_usenew.yml index bb2b924e..271a6ffe 100644 --- a/_data/navigation_usenew.yml +++ b/_data/navigation_usenew.yml @@ -1,4 +1,5 @@ - docs: - browser/ids-introduction - browser/browser-introduction + - browser/purchase-id - browser/faq_general diff --git a/_includes/head.html b/_includes/head.html index 418f96dc..7da0e70a 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -12,4 +12,6 @@ {% if jekyll.environment == 'production' and site.google_analytics %} {% include google-analytics.html %} {% endif %} + + diff --git a/_includes/related-org.html b/_includes/related-org.html new file mode 100644 index 00000000..d46766ef --- /dev/null +++ b/_includes/related-org.html @@ -0,0 +1,32 @@ +
+

Related Articles

+ + {% assign maxRelated = 4 %} + {% assign minCommonTags = 1 %} + {% assign maxRelatedCounter = 0 %} + + +
diff --git a/_layouts/default.html b/_layouts/default.html index f4a819a2..83e4a732 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -22,8 +22,13 @@ {% endif %} - - + diff --git a/_layouts/externalurl.html b/_layouts/externalurl.html index a5acf476..e8850381 100644 --- a/_layouts/externalurl.html +++ b/_layouts/externalurl.html @@ -1,2 +1,2 @@ {{page.title}} - + diff --git a/_layouts/org.html b/_layouts/org.html new file mode 100644 index 00000000..6b303912 --- /dev/null +++ b/_layouts/org.html @@ -0,0 +1,74 @@ +--- +layout: default +--- + +
+
+
+ +
+
+ + {% for section in site.data.navigation_org %} + {% if section.title %} +
{{ section.title }}
+ {% endif %} +
    + {% for doc in section.docs %} + {% assign doc_url = doc | prepend:"/" | append:".html" %} + + {% 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 %} +
  • {{ doc_title }}
    • + {% endfor %} +
+ {% endfor %} + +
+
+ +
+ +
+ +

{{ page.title | escape }}

+ + {% if page.subtitle %}

{{ page.subtitle }}

{% endif %} + + +
+ {% include post-meta.html %} +
+ +
+ {{ content }} + {% include share.html %} +
+ +
+ + {% include paginate-doc.html %} + + + +
+ + + +
+ +
+
diff --git a/_org/address_check.md b/_org/address_check.md new file mode 100644 index 00000000..b34b6b22 --- /dev/null +++ b/_org/address_check.md @@ -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. diff --git a/_org/explore.md b/_org/explore.md new file mode 100644 index 00000000..e461ec0f --- /dev/null +++ b/_org/explore.md @@ -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} the Stacks explorer{:/} to search for the following objects: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ObjectDescriptionExample of a search
nameAn 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.graphite.it or moxiegirl.id.blockstack
blockA 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 height.1001
transactionA 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 hash. 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.000000007136b5c... + This hash is a partial hash, an actual hash value is very long.
addressAn 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.3AKx3kBhTFC58Ws This address is a partial address, an actual address value is very long.
+ +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. + + ![](images/names.png) + + 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: + + ![](images/identity.png) + + 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. + + ![](images/block-page.png) + + 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. diff --git a/_org/faq.md b/_org/faq.md new file mode 100644 index 00000000..b41df626 --- /dev/null +++ b/_org/faq.md @@ -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 for help. + + + +### How do I get help from a person? + +For questions or help regarding the Stacks token, you can contact us at . diff --git a/_org/images/block-number.png b/_org/images/block-number.png new file mode 100644 index 00000000..76b57fb6 Binary files /dev/null and b/_org/images/block-number.png differ diff --git a/_org/images/block-page.png b/_org/images/block-page.png new file mode 100644 index 00000000..352761e3 Binary files /dev/null and b/_org/images/block-page.png differ diff --git a/_org/images/distribution.png b/_org/images/distribution.png new file mode 100644 index 00000000..8ca07383 Binary files /dev/null and b/_org/images/distribution.png differ diff --git a/_org/images/history.png b/_org/images/history.png new file mode 100644 index 00000000..4b0f47f3 Binary files /dev/null and b/_org/images/history.png differ diff --git a/_org/images/identity.png b/_org/images/identity.png new file mode 100644 index 00000000..94a09f13 Binary files /dev/null and b/_org/images/identity.png differ diff --git a/_org/images/key.png b/_org/images/key.png new file mode 100644 index 00000000..599c4ccf Binary files /dev/null and b/_org/images/key.png differ diff --git a/_org/images/names.png b/_org/images/names.png new file mode 100644 index 00000000..dd469d3f Binary files /dev/null and b/_org/images/names.png differ diff --git a/_org/images/search-start.png b/_org/images/search-start.png new file mode 100644 index 00000000..80de931a Binary files /dev/null and b/_org/images/search-start.png differ diff --git a/_org/images/search-terminal.png b/_org/images/search-terminal.png new file mode 100644 index 00000000..8eb0af6f Binary files /dev/null and b/_org/images/search-terminal.png differ diff --git a/_org/images/unlocking-address.png b/_org/images/unlocking-address.png new file mode 100644 index 00000000..5e97654a Binary files /dev/null and b/_org/images/unlocking-address.png differ diff --git a/_org/images/unlocking.png b/_org/images/unlocking.png new file mode 100644 index 00000000..f7d714d9 Binary files /dev/null and b/_org/images/unlocking.png differ diff --git a/_org/images/wallet_intro.png b/_org/images/wallet_intro.png new file mode 100644 index 00000000..b3ef9b9d Binary files /dev/null and b/_org/images/wallet_intro.png differ diff --git a/_org/images/wallet_sequence.jpg b/_org/images/wallet_sequence.jpg new file mode 100644 index 00000000..9d8fe907 Binary files /dev/null and b/_org/images/wallet_sequence.jpg differ diff --git a/_org/install.md b/_org/install.md new file mode 100644 index 00000000..9d6d8b80 --- /dev/null +++ b/_org/install.md @@ -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. + + ![Spotlight search launch](images/search-start.png) + + The Spotlight search bar appears. + +2. Enter terminal in the search field. + + ![Terminal](images/search-terminal.png) + +3. Select the **Terminal.app** to launch it. + +4. tbd. + +## Windows: Download, verify, and install + +TBD diff --git a/_org/overview.md b/_org/overview.md new file mode 100644 index 00000000..682dafce --- /dev/null +++ b/_org/overview.md @@ -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 the Blockstack forum. + +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. diff --git a/_org/terms.md b/_org/terms.md new file mode 100644 index 00000000..ec89340d --- /dev/null +++ b/_org/terms.md @@ -0,0 +1,14 @@ +--- +layout: org +permalink: /:collection/:path.html +--- +# Glossary + + +{% for member in site.data.glossary %} + + + + +{% endfor %} +
{{ member.Term }}{{ member.Definition }}
diff --git a/_org/token.md b/_org/token.md index 2bd4e5e4..339d7052 100644 --- a/_org/token.md +++ b/_org/token.md @@ -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 announcment in the Blockstack forum. -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. + +
Note: If you are a token holder +and would like to review your unlocking schedule, visit the For current token holders page in this +documentation.
+ +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. diff --git a/_org/tokenholders.md b/_org/tokenholders.md new file mode 100644 index 00000000..655f141c --- /dev/null +++ b/_org/tokenholders.md @@ -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 for +help. + + +Use the following form to check your Stacks allocation: +
+ + +
+
+ + +
+
+
+ +You should see a report detailing the tokens allocated to your address and when they unlock: + +![](images/unlocking-address.png) + +If you have questions or concerns about your report, please contact . + + +## 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: + + +![](images/unlocking.png) + +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. diff --git a/_org/wallet-hardware.md b/_org/wallet-hardware.md new file mode 100644 index 00000000..bb238a8d --- /dev/null +++ b/_org/wallet-hardware.md @@ -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. diff --git a/_org/wallet-intro.md b/_org/wallet-intro.md new file mode 100644 index 00000000..7ddecc3d --- /dev/null +++ b/_org/wallet-intro.md @@ -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: + + ![](images/key.png) + + +## 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. diff --git a/_org/wallet-use.md b/_org/wallet-use.md new file mode 100644 index 00000000..ad2daaf4 --- /dev/null +++ b/_org/wallet-use.md @@ -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. diff --git a/_org/whitepaper-token.md b/_org/whitepaper-token.md new file mode 100644 index 00000000..d08e3b78 --- /dev/null +++ b/_org/whitepaper-token.md @@ -0,0 +1,6 @@ +--- +title: Blockstack Token Sale Mechanics +layout: externalurl +permalink: /:collection/:path.html +redirect: https://blockstack.com/tokenpaper.pdf +--- diff --git a/_org/whitepaper-tokensale.md b/_org/whitepaper-tokensale.md new file mode 100644 index 00000000..2ca55c20 --- /dev/null +++ b/_org/whitepaper-tokensale.md @@ -0,0 +1,6 @@ +--- +title: Blockstack Token Whitepaper +layout: externalurl +permalink: /:collection/:path.html +redirect: https://blockstack.com/distribution.pdf +--- diff --git a/_sass/_sass/syntax-highlighting/github.scss b/_sass/_sass/syntax-highlighting/github.scss new file mode 100644 index 00000000..c85e1ed1 --- /dev/null +++ b/_sass/_sass/syntax-highlighting/github.scss @@ -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 +} diff --git a/_sass/_sass/system-font-css/CHANGELOG.md b/_sass/_sass/system-font-css/CHANGELOG.md new file mode 100644 index 00000000..7a4eee3d --- /dev/null +++ b/_sass/_sass/system-font-css/CHANGELOG.md @@ -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 diff --git a/_sass/_sass/system-font-css/LICENSE.md b/_sass/_sass/system-font-css/LICENSE.md new file mode 100644 index 00000000..565f84e3 --- /dev/null +++ b/_sass/_sass/system-font-css/LICENSE.md @@ -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)). diff --git a/_sass/_sass/system-font-css/README.md b/_sass/_sass/system-font-css/README.md new file mode 100644 index 00000000..08268fb2 --- /dev/null +++ b/_sass/_sass/system-font-css/README.md @@ -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. diff --git a/_sass/_sass/system-font-css/_system-font.scss b/_sass/_sass/system-font-css/_system-font.scss new file mode 100644 index 00000000..fd078219 --- /dev/null +++ b/_sass/_sass/system-font-css/_system-font.scss @@ -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"); +} diff --git a/_sass/_sass/system-font-css/index.html b/_sass/_sass/system-font-css/index.html new file mode 100644 index 00000000..ec5ea862 --- /dev/null +++ b/_sass/_sass/system-font-css/index.html @@ -0,0 +1,189 @@ + +System Font CSS + + + + + + +

+ 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. +

+ +
+body {
+    font-family: system;
+}
+
+ +

+ system-font.css offers eight variations of the system font family; light (300) light italic, normal (400), normal italic, medium (500), medium italic, bold (700), and bold italic. +

+ +
+blockquote {
+    font: italic 300 system;
+}
+
+p {
+    font: 400 system;
+}
+
+ +

+ 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 lacks 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. +

+ +
+body {
+	font-family: system, "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, apty named Ubuntu. That part was easy. +

+ +

+ Is system going to be a thing? +

+ +

+ Maybe. There are discussions in the W3C to standardize a generic system family. +

diff --git a/_sass/_sass/system-font-css/package.json b/_sass/_sass/system-font-css/package.json new file mode 100644 index 00000000..91916c24 --- /dev/null +++ b/_sass/_sass/system-font-css/package.json @@ -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" +} diff --git a/_sass/_sass/system-font-css/system-font.css b/_sass/_sass/system-font-css/system-font.css new file mode 100644 index 00000000..fd078219 --- /dev/null +++ b/_sass/_sass/system-font-css/system-font.css @@ -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"); +} diff --git a/_sass/_sass/system-font-css/system-font.less b/_sass/_sass/system-font-css/system-font.less new file mode 100644 index 00000000..fd078219 --- /dev/null +++ b/_sass/_sass/system-font-css/system-font.less @@ -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"); +} diff --git a/_sass/_sass/theme/mixins.scss b/_sass/_sass/theme/mixins.scss new file mode 100644 index 00000000..d026f05a --- /dev/null +++ b/_sass/_sass/theme/mixins.scss @@ -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; + } + } + + } + } +} diff --git a/_sass/_sass/theme/uikit.scss b/_sass/_sass/theme/uikit.scss new file mode 100644 index 00000000..59e87618 --- /dev/null +++ b/_sass/_sass/theme/uikit.scss @@ -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"; diff --git a/_sass/_sass/theme/variables.scss b/_sass/_sass/theme/variables.scss new file mode 100644 index 00000000..a4d98d34 --- /dev/null +++ b/_sass/_sass/theme/variables.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%); diff --git a/_sass/_sass/uikit/components/_import.components.scss b/_sass/_sass/uikit/components/_import.components.scss new file mode 100644 index 00000000..445384fa --- /dev/null +++ b/_sass/_sass/uikit/components/_import.components.scss @@ -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 diff --git a/_sass/_sass/uikit/components/_import.scss b/_sass/_sass/uikit/components/_import.scss new file mode 100644 index 00000000..b3749a29 --- /dev/null +++ b/_sass/_sass/uikit/components/_import.scss @@ -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"; diff --git a/_sass/_sass/uikit/components/_import.utilities.scss b/_sass/_sass/uikit/components/_import.utilities.scss new file mode 100644 index 00000000..bea39e5c --- /dev/null +++ b/_sass/_sass/uikit/components/_import.utilities.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"; diff --git a/_sass/_sass/uikit/components/accordion.scss b/_sass/_sass/uikit/components/accordion.scss new file mode 100644 index 00000000..bfb0e815 --- /dev/null +++ b/_sass/_sass/uikit/components/accordion.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(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/components/alert.scss b/_sass/_sass/uikit/components/alert.scss new file mode 100644 index 00000000..8922cc85 --- /dev/null +++ b/_sass/_sass/uikit/components/alert.scss @@ -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(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/components/align.scss b/_sass/_sass/uikit/components/align.scss new file mode 100644 index 00000000..bee6702b --- /dev/null +++ b/_sass/_sass/uikit/components/align.scss @@ -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(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/components/animation.scss b/_sass/_sass/uikit/components/animation.scss new file mode 100644 index 00000000..c1d91928 --- /dev/null +++ b/_sass/_sass/uikit/components/animation.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/article.scss b/_sass/_sass/uikit/components/article.scss new file mode 100644 index 00000000..9cc470f2 --- /dev/null +++ b/_sass/_sass/uikit/components/article.scss @@ -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(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/components/background.scss b/_sass/_sass/uikit/components/background.scss new file mode 100644 index 00000000..ca7a344a --- /dev/null +++ b/_sass/_sass/uikit/components/background.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/badge.scss b/_sass/_sass/uikit/components/badge.scss new file mode 100644 index 00000000..d076c5d0 --- /dev/null +++ b/_sass/_sass/uikit/components/badge.scss @@ -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(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/components/base.scss b/_sass/_sass/uikit/components/base.scss new file mode 100644 index 00000000..138ecbb4 --- /dev/null +++ b/_sass/_sass/uikit/components/base.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/breadcrumb.scss b/_sass/_sass/uikit/components/breadcrumb.scss new file mode 100644 index 00000000..1f4ca502 --- /dev/null +++ b/_sass/_sass/uikit/components/breadcrumb.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/button.scss b/_sass/_sass/uikit/components/button.scss new file mode 100644 index 00000000..f65e1c22 --- /dev/null +++ b/_sass/_sass/uikit/components/button.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/card.scss b/_sass/_sass/uikit/components/card.scss new file mode 100644 index 00000000..e332a03f --- /dev/null +++ b/_sass/_sass/uikit/components/card.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/close.scss b/_sass/_sass/uikit/components/close.scss new file mode 100644 index 00000000..32e27756 --- /dev/null +++ b/_sass/_sass/uikit/components/close.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/column.scss b/_sass/_sass/uikit/components/column.scss new file mode 100644 index 00000000..54bae26e --- /dev/null +++ b/_sass/_sass/uikit/components/column.scss @@ -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; + diff --git a/_sass/_sass/uikit/components/comment.scss b/_sass/_sass/uikit/components/comment.scss new file mode 100644 index 00000000..8583dd8a --- /dev/null +++ b/_sass/_sass/uikit/components/comment.scss @@ -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(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/components/container.scss b/_sass/_sass/uikit/components/container.scss new file mode 100644 index 00000000..c518d6d7 --- /dev/null +++ b/_sass/_sass/uikit/components/container.scss @@ -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(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/components/countdown.scss b/_sass/_sass/uikit/components/countdown.scss new file mode 100644 index 00000000..3f53e70c --- /dev/null +++ b/_sass/_sass/uikit/components/countdown.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/cover.scss b/_sass/_sass/uikit/components/cover.scss new file mode 100644 index 00000000..b44a6847 --- /dev/null +++ b/_sass/_sass/uikit/components/cover.scss @@ -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(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/components/description-list.scss b/_sass/_sass/uikit/components/description-list.scss new file mode 100644 index 00000000..6683286d --- /dev/null +++ b/_sass/_sass/uikit/components/description-list.scss @@ -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(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/components/divider.scss b/_sass/_sass/uikit/components/divider.scss new file mode 100644 index 00000000..b51708cf --- /dev/null +++ b/_sass/_sass/uikit/components/divider.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/dotnav.scss b/_sass/_sass/uikit/components/dotnav.scss new file mode 100644 index 00000000..f1f2a402 --- /dev/null +++ b/_sass/_sass/uikit/components/dotnav.scss @@ -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(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/components/drop.scss b/_sass/_sass/uikit/components/drop.scss new file mode 100644 index 00000000..fb5e9e8c --- /dev/null +++ b/_sass/_sass/uikit/components/drop.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/dropdown.scss b/_sass/_sass/uikit/components/dropdown.scss new file mode 100644 index 00000000..49bb1277 --- /dev/null +++ b/_sass/_sass/uikit/components/dropdown.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/flex.scss b/_sass/_sass/uikit/components/flex.scss new file mode 100644 index 00000000..1301fc43 --- /dev/null +++ b/_sass/_sass/uikit/components/flex.scss @@ -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(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/components/form-range.scss b/_sass/_sass/uikit/components/form-range.scss new file mode 100644 index 00000000..f7a22a5d --- /dev/null +++ b/_sass/_sass/uikit/components/form-range.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/form.scss b/_sass/_sass/uikit/components/form.scss new file mode 100644 index 00000000..e731cffb --- /dev/null +++ b/_sass/_sass/uikit/components/form.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/grid.scss b/_sass/_sass/uikit/components/grid.scss new file mode 100644 index 00000000..455033c7 --- /dev/null +++ b/_sass/_sass/uikit/components/grid.scss @@ -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; + + diff --git a/_sass/_sass/uikit/components/heading.scss b/_sass/_sass/uikit/components/heading.scss new file mode 100644 index 00000000..97f1c185 --- /dev/null +++ b/_sass/_sass/uikit/components/heading.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/icon.scss b/_sass/_sass/uikit/components/icon.scss new file mode 100644 index 00000000..2ff70ecf --- /dev/null +++ b/_sass/_sass/uikit/components/icon.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/iconnav.scss b/_sass/_sass/uikit/components/iconnav.scss new file mode 100644 index 00000000..ae739c90 --- /dev/null +++ b/_sass/_sass/uikit/components/iconnav.scss @@ -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(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/components/inverse.scss b/_sass/_sass/uikit/components/inverse.scss new file mode 100644 index 00000000..c1b0c07c --- /dev/null +++ b/_sass/_sass/uikit/components/inverse.scss @@ -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(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/components/label.scss b/_sass/_sass/uikit/components/label.scss new file mode 100644 index 00000000..6600aedf --- /dev/null +++ b/_sass/_sass/uikit/components/label.scss @@ -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(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/components/lightbox.scss b/_sass/_sass/uikit/components/lightbox.scss new file mode 100644 index 00000000..4f9c698d --- /dev/null +++ b/_sass/_sass/uikit/components/lightbox.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/link.scss b/_sass/_sass/uikit/components/link.scss new file mode 100644 index 00000000..9e0ef0e7 --- /dev/null +++ b/_sass/_sass/uikit/components/link.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/list.scss b/_sass/_sass/uikit/components/list.scss new file mode 100644 index 00000000..ed810bb0 --- /dev/null +++ b/_sass/_sass/uikit/components/list.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/margin.scss b/_sass/_sass/uikit/components/margin.scss new file mode 100644 index 00000000..c3b13691 --- /dev/null +++ b/_sass/_sass/uikit/components/margin.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/marker.scss b/_sass/_sass/uikit/components/marker.scss new file mode 100644 index 00000000..97e43609 --- /dev/null +++ b/_sass/_sass/uikit/components/marker.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/mixin.scss b/_sass/_sass/uikit/components/mixin.scss new file mode 100644 index 00000000..5ed438a5 --- /dev/null +++ b/_sass/_sass/uikit/components/mixin.scss @@ -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)); +} \ No newline at end of file diff --git a/_sass/_sass/uikit/components/modal.scss b/_sass/_sass/uikit/components/modal.scss new file mode 100644 index 00000000..863f008a --- /dev/null +++ b/_sass/_sass/uikit/components/modal.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/nav.scss b/_sass/_sass/uikit/components/nav.scss new file mode 100644 index 00000000..9d990ca2 --- /dev/null +++ b/_sass/_sass/uikit/components/nav.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/navbar.scss b/_sass/_sass/uikit/components/navbar.scss new file mode 100644 index 00000000..a1f633a3 --- /dev/null +++ b/_sass/_sass/uikit/components/navbar.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/notification.scss b/_sass/_sass/uikit/components/notification.scss new file mode 100644 index 00000000..cc1ba552 --- /dev/null +++ b/_sass/_sass/uikit/components/notification.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/offcanvas.scss b/_sass/_sass/uikit/components/offcanvas.scss new file mode 100644 index 00000000..5fc05587 --- /dev/null +++ b/_sass/_sass/uikit/components/offcanvas.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/overlay.scss b/_sass/_sass/uikit/components/overlay.scss new file mode 100644 index 00000000..c3eb0a57 --- /dev/null +++ b/_sass/_sass/uikit/components/overlay.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/padding.scss b/_sass/_sass/uikit/components/padding.scss new file mode 100644 index 00000000..0c0f1ed1 --- /dev/null +++ b/_sass/_sass/uikit/components/padding.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/pagination.scss b/_sass/_sass/uikit/components/pagination.scss new file mode 100644 index 00000000..5dce23ad --- /dev/null +++ b/_sass/_sass/uikit/components/pagination.scss @@ -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(){} diff --git a/_sass/_sass/uikit/components/placeholder.scss b/_sass/_sass/uikit/components/placeholder.scss new file mode 100644 index 00000000..05c06f7d --- /dev/null +++ b/_sass/_sass/uikit/components/placeholder.scss @@ -0,0 +1,45 @@ +// Name: Placeholder +// Description: Component to create placeholder boxes +// +// Component: `uk-placeholder` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$placeholder-margin-vertical: $global-margin !default; +$placeholder-padding-vertical: $global-gutter !default; +$placeholder-padding-horizontal: $global-gutter !default; +$placeholder-background: $global-muted-background !default; + + +/* ======================================================================== + Component: Placeholder + ========================================================================== */ + +.uk-placeholder { + margin-bottom: $placeholder-margin-vertical; + padding: $placeholder-padding-vertical $placeholder-padding-horizontal; + background: $placeholder-background; + @if(mixin-exists(hook-placeholder)) {@include hook-placeholder();} +} + +/* Add margin if adjacent element */ +* + .uk-placeholder { margin-top: $placeholder-margin-vertical; } + +/* + * Remove margin from the last-child + */ + +.uk-placeholder > :last-child { margin-bottom: 0; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-placeholder-misc)) {@include hook-placeholder-misc();} + +// @mixin hook-placeholder(){} +// @mixin hook-placeholder-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/components/position.scss b/_sass/_sass/uikit/components/position.scss new file mode 100644 index 00000000..799b3587 --- /dev/null +++ b/_sass/_sass/uikit/components/position.scss @@ -0,0 +1,250 @@ +// Name: Position +// Description: Utilities to position content +// +// Component: `uk-position-absolute` +// `uk-position-relative` +// `uk-position-z-index` +// `uk-position-top` +// `uk-position-bottom` +// `uk-position-left` +// `uk-position-right` +// `uk-position-top-left` +// `uk-position-top-center` +// `uk-position-top-right` +// `uk-position-bottom-left` +// `uk-position-bottom-center` +// `uk-position-bottom-right` +// `uk-position-center` +// `uk-position-center-left` +// `uk-position-center-right` +// `uk-position-cover` +// +// Modifiers: `uk-position-small` +// `uk-position-medium` +// `uk-position-large` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$position-small-margin: $global-small-gutter !default; +$position-medium-margin: $global-gutter !default; +$position-large-margin: $global-gutter !default; +$position-large-margin-l: 50px !default; + + +/* ======================================================================== + Component: Position + ========================================================================== */ + + +/* Directions + ========================================================================== */ + +[class*='uk-position-top'], +[class*='uk-position-bottom'], +[class*='uk-position-left'], +[class*='uk-position-right'], +[class*='uk-position-center'] { position: absolute !important; } + + +/* Edges + ========================================================================== */ + +/* Don't use `width: 100%` because it is wrong if the parent has padding. */ +.uk-position-top { + top: 0; + left: 0; + right: 0; +} + +.uk-position-bottom { + bottom: 0; + left: 0; + right: 0; +} + +.uk-position-left { + top: 0; + bottom: 0; + left: 0; +} + +.uk-position-right { + top: 0; + bottom: 0; + right: 0; +} + + +/* Corners + ========================================================================== */ + +.uk-position-top-left { + top: 0; + left: 0; +} + +.uk-position-top-right { + top: 0; + right: 0; +} + +.uk-position-bottom-left { + bottom: 0; + left: 0; +} + +.uk-position-bottom-right { + bottom: 0; + right: 0; +} + +/* + * Center + * 1. Fix text wrapping if content is larger than 50% of the container (Not working in Firefox) + * 2. Fix text wrapping for Firefox + */ + +.uk-position-center { + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + /* 1 */ + display: table; + /* 2 */ + width: -moz-max-content; + max-width: 100%; + box-sizing: border-box; +} + +/* Vertical */ +[class*='uk-position-center-left'], +[class*='uk-position-center-right'] { + top: 50%; + transform: translateY(-50%); +} + +.uk-position-center-left { left: 0; } +.uk-position-center-right { right: 0; } + +.uk-position-center-left-out { + right: 100%; + width: max-content; +} + +.uk-position-center-right-out { + left: 100%; + width: max-content; +} + +/* Horizontal */ +.uk-position-top-center, +.uk-position-bottom-center { + left: 50%; + transform: translateX(-50%); + /* 1 */ + display: table; + /* 2 */ + width: -moz-max-content; + max-width: 100%; + box-sizing: border-box; +} + +.uk-position-top-center { top: 0; } +.uk-position-bottom-center { bottom: 0; } + + +/* Cover + ========================================================================== */ + +.uk-position-cover { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + + +/* Utility + ========================================================================== */ + +.uk-position-relative { position: relative !important; } + +.uk-position-absolute { position: absolute !important; } + +.uk-position-fixed { position: fixed !important; } + +.uk-position-z-index { z-index: 1; } + + +/* Margin modifier + ========================================================================== */ + +/* + * Small + */ + +.uk-position-small { margin: $position-small-margin; } + +.uk-position-small.uk-position-center { transform: translate(-50%, -50%) translate(-$position-small-margin, (-$position-small-margin)); } + +.uk-position-small[class*='uk-position-center-left'], +.uk-position-small[class*='uk-position-center-right'] { transform: translateY(-50%) translateY(-$position-small-margin); } + +.uk-position-small.uk-position-top-center, +.uk-position-small.uk-position-bottom-center { transform: translateX(-50%) translateX(-$position-small-margin); } + +/* + * Medium + */ + +.uk-position-medium { margin: $position-medium-margin; } + +.uk-position-medium.uk-position-center { transform: translate(-50%, -50%) translate(-$position-medium-margin, (-$position-medium-margin)); } + +.uk-position-medium[class*='uk-position-center-left'], +.uk-position-medium[class*='uk-position-center-right'] { transform: translateY(-50%) translateY(-$position-medium-margin); } + +.uk-position-medium.uk-position-top-center, +.uk-position-medium.uk-position-bottom-center { transform: translateX(-50%) translateX(-$position-medium-margin); } + +/* + * Large + */ + +.uk-position-large { margin: $position-large-margin; } + +.uk-position-large.uk-position-center { transform: translate(-50%, -50%) translate(-$position-large-margin, (-$position-large-margin)); } + +.uk-position-large[class*='uk-position-center-left'], +.uk-position-large[class*='uk-position-center-right'] { transform: translateY(-50%) translateY(-$position-large-margin); } + +.uk-position-large.uk-position-top-center, +.uk-position-large.uk-position-bottom-center { transform: translateX(-50%) translateX(-$position-large-margin); } + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + .uk-position-large { margin: $position-large-margin-l; } + + .uk-position-large.uk-position-center { transform: translate(-50%, -50%) translate(-$position-large-margin-l, (-$position-large-margin-l)); } + + .uk-position-large[class*='uk-position-center-left'], + .uk-position-large[class*='uk-position-center-right'] { transform: translateY(-50%) translateY(-$position-large-margin-l); } + + .uk-position-large.uk-position-top-center, + .uk-position-large.uk-position-bottom-center { transform: translateX(-50%) translateX(-$position-large-margin-l); } + +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-position-misc)) {@include hook-position-misc();} + +// @mixin hook-position-misc(){} diff --git a/_sass/_sass/uikit/components/print.scss b/_sass/_sass/uikit/components/print.scss new file mode 100644 index 00000000..6162df52 --- /dev/null +++ b/_sass/_sass/uikit/components/print.scss @@ -0,0 +1,61 @@ +// Name: Print +// Description: Optimize page for printing +// +// Adapted from http://github.com/h5bp/html5-boilerplate +// +// Modifications: Removed link `href` and `title` related rules +// +// ======================================================================== + + +/* ======================================================================== + Component: Print + ========================================================================== */ + +@media print { + + *, + *::before, + *::after { + background: transparent !important; + color: black !important; + box-shadow: none !important; + text-shadow: none !important; + } + + a, + a:visited { text-decoration: underline; } + + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + thead { display: table-header-group; } + + tr, + img { page-break-inside: avoid; } + + img { max-width: 100% !important; } + + @page { margin: 0.5cm; } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { page-break-after: avoid; } + + @if(mixin-exists(hook-print)) {@include hook-print();} + +} + +// Hooks +// ======================================================================== + +// @mixin hook-print(){} diff --git a/_sass/_sass/uikit/components/progress.scss b/_sass/_sass/uikit/components/progress.scss new file mode 100644 index 00000000..4575513e --- /dev/null +++ b/_sass/_sass/uikit/components/progress.scss @@ -0,0 +1,105 @@ +// Name: Progress +// Description: Component to create progress bars +// +// Component: `uk-progress` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$progress-height: 15px !default; +$progress-margin-vertical: $global-margin !default; +$progress-background: $global-muted-background !default; + +$progress-bar-background: $global-primary-background !default; + + +/* ======================================================================== + Component: Progress + ========================================================================== */ + +/* + * 1. Add the correct vertical alignment in Chrome, Firefox, and Opera. + * 2. Remove default style + * 3. Behave like a block element + * 4. Remove borders in Firefox and Edge + * 5. Set background color for progress container in Firefox, IE11 and Edge + * 6. Style + */ + +.uk-progress { + /* 1 */ + vertical-align: baseline; + /* 2 */ + -webkit-appearance: none; + -moz-appearance: none; + /* 3 */ + display: block; + width: 100%; + /* 4 */ + border: 0; + /* 5 */ + background-color: $progress-background; + /* 6 */ + margin-bottom: $progress-margin-vertical; + height: $progress-height; + @if(mixin-exists(hook-progress)) {@include hook-progress();} +} + +/* Add margin if adjacent element */ +* + .uk-progress { margin-top: $progress-margin-vertical; } + +/* + * Remove animated circles for indeterminate state in IE11 and Edge + */ + +.uk-progress:indeterminate { color: transparent; } + +/* + * Progress container + * 2. Remove progress bar for indeterminate state in Firefox + */ + +.uk-progress::-webkit-progress-bar { + background-color: $progress-background; + @if(mixin-exists(hook-progress)) {@include hook-progress();} +} + +/* 2 */ +.uk-progress:indeterminate::-moz-progress-bar { width: 0; } + +/* + * Progress bar + * 1. Remove right border in IE11 and Edge + */ + +.uk-progress::-webkit-progress-value { + background-color: $progress-bar-background; + transition: width 0.6s ease; + @if(mixin-exists(hook-progress-bar)) {@include hook-progress-bar();} +} + +.uk-progress::-moz-progress-bar { + background-color: $progress-bar-background; + @if(mixin-exists(hook-progress-bar)) {@include hook-progress-bar();} +} + +.uk-progress::-ms-fill { + background-color: $progress-bar-background; + transition: width 0.6s ease; + /* 1 */ + border: 0; + @if(mixin-exists(hook-progress-bar)) {@include hook-progress-bar();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-progress-misc)) {@include hook-progress-misc();} + +// @mixin hook-progress(){} +// @mixin hook-progress-bar(){} +// @mixin hook-progress-misc(){} diff --git a/_sass/_sass/uikit/components/search.scss b/_sass/_sass/uikit/components/search.scss new file mode 100644 index 00000000..78a1bf50 --- /dev/null +++ b/_sass/_sass/uikit/components/search.scss @@ -0,0 +1,328 @@ +// Name: Search +// Description: Component to create the search +// +// Component: `uk-search` +// +// Sub-objects: `uk-search-input` +// `uk-search-toggle` +// +// Adopted: `uk-search-icon` +// +// Modifier: `uk-search-default` +// `uk-search-navbar` +// `uk-search-large` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$search-color: $global-color !default; +$search-placeholder-color: $global-muted-color !default; + +$search-icon-color: $global-muted-color !default; + +$search-default-width: 180px !default; +$search-default-height: $global-control-height !default; +$search-default-padding-horizontal: 6px !default; +$search-default-background: $global-muted-background !default; +$search-default-focus-background: $search-default-background !default; + +$search-default-icon-width: $global-control-height !default; + +$search-navbar-width: 400px !default; +$search-navbar-height: 40px !default; +$search-navbar-background: transparent !default; +$search-navbar-font-size: $global-large-font-size !default; + +$search-navbar-icon-width: 40px !default; + +$search-large-width: 500px !default; +$search-large-height: 80px !default; +$search-large-background: transparent !default; +$search-large-font-size: $global-xxlarge-font-size !default; + +$search-large-icon-width: 80px !default; + +$search-toggle-color: $global-muted-color !default; +$search-toggle-hover-color: $global-color !default; + + +/* ======================================================================== + Component: Search + ========================================================================== */ + +/* + * 1. Container fits its content + * 2. Create position context + * 3. Prevent content overflow + * 4. Reset `form` + */ + +.uk-search { + /* 1 */ + display: inline-block; + /* 2 */ + position: relative; + /* 3 */ + max-width: 100%; + /* 4 */ + margin: 0; +} + + +/* Input + ========================================================================== */ + +/* + * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X. + */ + +.uk-search-input::-webkit-search-cancel-button, +.uk-search-input::-webkit-search-decoration { -webkit-appearance: none; } + +/* + * Removes placeholder transparency in Firefox. + */ + +.uk-search-input::-moz-placeholder { opacity: 1; } + +/* + * 1. Define consistent box sizing. + * 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 + * 5. Show the overflow in Edge. + * 6. Remove default style in iOS. + * 7. Vertical alignment + * 8. Take the full container width + * 9. Style + */ + +.uk-search-input { + /* 1 */ + box-sizing: border-box; + /* 2 */ + margin: 0; + /* 3 */ + border-radius: 0; + /* 4 */ + font: inherit; + /* 5 */ + overflow: visible; + /* 6 */ + -webkit-appearance: none; + /* 7 */ + vertical-align: middle; + /* 8 */ + width: 100%; + /* 9 */ + border: none; + color: $search-color; + @if(mixin-exists(hook-search-input)) {@include hook-search-input();} +} + +.uk-search-input:focus { outline: none; } + +/* Placeholder */ +.uk-search-input:-ms-input-placeholder { color: $search-placeholder-color !important; } +.uk-search-input::placeholder { color: $search-placeholder-color; } + + +/* Icon (Adopts `uk-icon`) + ========================================================================== */ + +/* + * Remove default focus style + */ + +.uk-search-icon:focus { outline: none; } + +/* + * Position above input + * 1. Set position + * 2. Center icon vertically and horizontally + * 3. Style + */ + +.uk-search .uk-search-icon { + /* 1 */ + position: absolute; + top: 0; + bottom: 0; + left: 0; + /* 2 */ + display: inline-flex; + justify-content: center; + align-items: center; + /* 3 */ + color: $search-icon-color; +} + +/* + * Required for `a`. + */ + +.uk-search .uk-search-icon:hover { color: $search-icon-color; } + +/* + * Make `input` element clickable through icon, e.g. if it's a `span` + */ + +.uk-search .uk-search-icon:not(a):not(button):not(input) { pointer-events: none; } + +/* + * Position modifier + */ + +.uk-search .uk-search-icon-flip { + right: 0; + left: auto; +} + + +/* Default modifier + ========================================================================== */ + +.uk-search-default { width: $search-default-width; } + +/* + * Input + */ + +.uk-search-default .uk-search-input { + height: $search-default-height; + padding-left: $search-default-padding-horizontal; + padding-right: $search-default-padding-horizontal; + background: $search-default-background; + @if(mixin-exists(hook-search-default-input)) {@include hook-search-default-input();} +} + +/* Focus */ +.uk-search-default .uk-search-input:focus { + background-color: $search-default-focus-background; + @if(mixin-exists(hook-search-default-input-focus)) {@include hook-search-default-input-focus();} +} + +/* + * Icon + */ + +.uk-search-default .uk-search-icon { width: $search-default-icon-width; } + +.uk-search-default .uk-search-icon:not(.uk-search-icon-flip) + .uk-search-input { padding-left: ($search-default-icon-width); } +.uk-search-default .uk-search-icon-flip + .uk-search-input { padding-right: ($search-default-icon-width); } + + +/* Navbar modifier + ========================================================================== */ + +.uk-search-navbar { width: $search-navbar-width; } + +/* + * Input + */ + +.uk-search-navbar .uk-search-input { + height: $search-navbar-height; + background: $search-navbar-background; + font-size: $search-navbar-font-size; + @if(mixin-exists(hook-search-navbar-input)) {@include hook-search-navbar-input();} +} + +/* + * Icon + */ + +.uk-search-navbar .uk-search-icon { width: $search-navbar-icon-width; } + +.uk-search-navbar .uk-search-icon:not(.uk-search-icon-flip) + .uk-search-input { padding-left: ($search-navbar-icon-width); } +.uk-search-navbar .uk-search-icon-flip + .uk-search-input { padding-right: ($search-navbar-icon-width); } + + +/* Large modifier + ========================================================================== */ + +.uk-search-large { width: $search-large-width; } + +/* + * Input + */ + +.uk-search-large .uk-search-input { + height: $search-large-height; + background: $search-large-background; + font-size: $search-large-font-size; + @if(mixin-exists(hook-search-large-input)) {@include hook-search-large-input();} +} + +/* + * Icon + */ + +.uk-search-large .uk-search-icon { width: $search-large-icon-width; } + +.uk-search-large .uk-search-icon:not(.uk-search-icon-flip) + .uk-search-input { padding-left: ($search-large-icon-width); } +.uk-search-large .uk-search-icon-flip + .uk-search-input { padding-right: ($search-large-icon-width); } + + +/* Toggle + ========================================================================== */ + +.uk-search-toggle { + color: $search-toggle-color; + @if(mixin-exists(hook-search-toggle)) {@include hook-search-toggle();} +} + +/* Hover + Focus */ +.uk-search-toggle:hover, +.uk-search-toggle:focus { + color: $search-toggle-hover-color; + @if(mixin-exists(hook-search-toggle-hover)) {@include hook-search-toggle-hover();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-search-misc)) {@include hook-search-misc();} + +// @mixin hook-search-input(){} +// @mixin hook-search-default-input(){} +// @mixin hook-search-default-input-focus(){} +// @mixin hook-search-navbar-input(){} +// @mixin hook-search-large-input(){} + +// @mixin hook-search-toggle(){} +// @mixin hook-search-toggle-hover(){} + +// @mixin hook-search-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-search-color: $inverse-global-color !default; +$inverse-search-placeholder-color: $inverse-global-muted-color !default; + +$inverse-search-icon-color: $inverse-global-muted-color !default; + +$inverse-search-default-background: $inverse-global-muted-background !default; +$inverse-search-default-focus-background: $inverse-search-default-background !default; + +$inverse-search-navbar-background: transparent !default; + +$inverse-search-large-background: transparent !default; + +$inverse-search-toggle-color: $inverse-global-muted-color !default; +$inverse-search-toggle-hover-color: $inverse-global-color !default; + + + +// @mixin hook-inverse-search-default-input(){} +// @mixin hook-inverse-search-default-input-focus(){} +// @mixin hook-inverse-search-navbar-input(){} +// @mixin hook-inverse-search-large-input(){} +// @mixin hook-inverse-search-toggle(){} +// @mixin hook-inverse-search-toggle-hover(){} diff --git a/_sass/_sass/uikit/components/section.scss b/_sass/_sass/uikit/components/section.scss new file mode 100644 index 00000000..ee7d2506 --- /dev/null +++ b/_sass/_sass/uikit/components/section.scss @@ -0,0 +1,224 @@ +// Name: Section +// Description: Component to create horizontal layout section +// +// Component: `uk-section` +// +// Modifiers: `uk-section-xsmall` +// `uk-section-small` +// `uk-section-large` +// `uk-section-xlarge` +// `uk-section-default` +// `uk-section-muted` +// `uk-section-primary` +// `uk-section-secondary` +// `uk-section-overlap` +// +// States: `uk-preserve-color` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$section-padding-vertical: $global-medium-margin !default; +$section-padding-vertical-m: $global-large-margin !default; + +$section-xsmall-padding-vertical: $global-margin !default; + +$section-small-padding-vertical: $global-medium-margin !default; + +$section-large-padding-vertical: $global-large-margin !default; +$section-large-padding-vertical-m: $global-xlarge-margin !default; + +$section-xlarge-padding-vertical: $global-xlarge-margin !default; +$section-xlarge-padding-vertical-m: ($global-large-margin + $global-xlarge-margin) !default; + +$section-default-background: $global-background !default; + +$section-muted-background: $global-muted-background !default; + +$section-primary-background: $global-primary-background !default; +$section-primary-color-mode: light !default; + +$section-secondary-background: $global-secondary-background !default; +$section-secondary-color-mode: light !default; + + +/* ======================================================================== + Component: Section + ========================================================================== */ + +/* + * 1. Make it work with `100vh` and height in general + */ + +.uk-section { + box-sizing: border-box; /* 1 */ + padding-top: $section-padding-vertical; + padding-bottom: $section-padding-vertical; + @if(mixin-exists(hook-section)) {@include hook-section();} +} + +/* Desktop and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-section { + padding-top: $section-padding-vertical-m; + padding-bottom: $section-padding-vertical-m; + } + +} + +/* + * Micro clearfix + */ + +.uk-section::before, +.uk-section::after { + content: ""; + display: table; +} + +.uk-section::after { clear: both; } + +/* + * Remove margin from the last-child + */ + +.uk-section > :last-child { margin-bottom: 0; } + + +/* Size modifiers + ========================================================================== */ + +/* + * XSmall + */ + +.uk-section-xsmall { + padding-top: $section-xsmall-padding-vertical; + padding-bottom: $section-xsmall-padding-vertical; +} + +/* + * Small + */ + +.uk-section-small { + padding-top: $section-small-padding-vertical; + padding-bottom: $section-small-padding-vertical; +} + +/* + * Large + */ + +.uk-section-large { + padding-top: $section-large-padding-vertical; + padding-bottom: $section-large-padding-vertical; +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-section-large { + padding-top: $section-large-padding-vertical-m; + padding-bottom: $section-large-padding-vertical-m; + } + +} + + +/* + * XLarge + */ + +.uk-section-xlarge { + padding-top: $section-xlarge-padding-vertical; + padding-bottom: $section-xlarge-padding-vertical; +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-section-xlarge { + padding-top: $section-xlarge-padding-vertical-m; + padding-bottom: $section-xlarge-padding-vertical-m; + } + +} + + +/* Style modifiers + ========================================================================== */ + +/* + * Default + */ + +.uk-section-default { + background: $section-default-background; + @if(mixin-exists(hook-section-default)) {@include hook-section-default();} +} + +/* + * Muted + */ + +.uk-section-muted { + background: $section-muted-background; + @if(mixin-exists(hook-section-muted)) {@include hook-section-muted();} +} + +/* + * Primary + */ + +.uk-section-primary { + background: $section-primary-background; + @if(mixin-exists(hook-section-primary)) {@include hook-section-primary();} +} + +@if ( $section-primary-color-mode == light ) { .uk-section-primary:not(.uk-preserve-color) { @extend .uk-light !optional;} } +@if ( $section-primary-color-mode == dark ) { .uk-section-primary:not(.uk-preserve-color) { @extend .uk-dark !optional;} } + + +/* + * Secondary + */ + +.uk-section-secondary { + background: $section-secondary-background; + @if(mixin-exists(hook-section-secondary)) {@include hook-section-secondary();} +} + +@if ( $section-secondary-color-mode == light ) { .uk-section-secondary:not(.uk-preserve-color) { @extend .uk-light !optional;} } +@if ( $section-secondary-color-mode == dark ) { .uk-section-secondary:not(.uk-preserve-color) { @extend .uk-dark !optional;} } + + +/* Overlap modifier + ========================================================================== */ + +/* + * Reserved modifier to make a section overlap another section with an border image + * Implemented by the theme + */ + +.uk-section-overlap { + @if(mixin-exists(hook-section-overlap)) {@include hook-section-overlap();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-section-misc)) {@include hook-section-misc();} + +// @mixin hook-section(){} +// @mixin hook-section-default(){} +// @mixin hook-section-muted(){} +// @mixin hook-section-secondary(){} +// @mixin hook-section-primary(){} +// @mixin hook-section-overlap(){} +// @mixin hook-section-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/components/slidenav.scss b/_sass/_sass/uikit/components/slidenav.scss new file mode 100644 index 00000000..0b9af8f2 --- /dev/null +++ b/_sass/_sass/uikit/components/slidenav.scss @@ -0,0 +1,122 @@ +// Name: Slidenav +// Description: Component to create previous/next icon navigations +// +// Component: `uk-slidenav` +// +// Sub-objects: `uk-slidenav-container` +// +// Modifiers: `uk-slidenav-previous` +// `uk-slidenav-next` +// `uk-slidenav-large` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$slidenav-padding-vertical: 5px !default; +$slidenav-padding-horizontal: 10px !default; + +$slidenav-color: rgba($global-color, 0.5) !default; +$slidenav-hover-color: rgba($global-color, 0.9) !default; +$slidenav-active-color: rgba($global-color, 0.5) !default; + +$slidenav-large-padding-vertical: 10px !default; +$slidenav-large-padding-horizontal: $slidenav-large-padding-vertical !default; + + +/* ======================================================================== + Component: Slidenav + ========================================================================== */ + +/* + * Adopts `uk-icon` + */ + +.uk-slidenav { + padding: $slidenav-padding-vertical $slidenav-padding-horizontal; + color: $slidenav-color; + @if(mixin-exists(hook-slidenav)) {@include hook-slidenav();} +} + +/* Hover + Focus */ +.uk-slidenav:hover, +.uk-slidenav:focus { + color: $slidenav-hover-color; + outline: none; + @if(mixin-exists(hook-slidenav-hover)) {@include hook-slidenav-hover();} +} + +/* OnClick */ +.uk-slidenav:active { + color: $slidenav-active-color; + @if(mixin-exists(hook-slidenav-active)) {@include hook-slidenav-active();} +} + + +/* Icon modifier + ========================================================================== */ + +/* + * Previous + */ + +.uk-slidenav-previous { + @if(mixin-exists(hook-slidenav-previous)) {@include hook-slidenav-previous();} +} + +/* + * Next + */ + +.uk-slidenav-next { + @if(mixin-exists(hook-slidenav-next)) {@include hook-slidenav-next();} +} + + +/* Size modifier + ========================================================================== */ + +.uk-slidenav-large { + padding: $slidenav-large-padding-vertical $slidenav-large-padding-horizontal; + @if(mixin-exists(hook-slidenav-large)) {@include hook-slidenav-large();} +} + + +/* Container + ========================================================================== */ + +.uk-slidenav-container { + display: flex; + @if(mixin-exists(hook-slidenav-container)) {@include hook-slidenav-container();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-slidenav-misc)) {@include hook-slidenav-misc();} + +// @mixin hook-slidenav(){} +// @mixin hook-slidenav-hover(){} +// @mixin hook-slidenav-active(){} +// @mixin hook-slidenav-previous(){} +// @mixin hook-slidenav-next(){} +// @mixin hook-slidenav-large(){} +// @mixin hook-slidenav-container(){} +// @mixin hook-slidenav-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-slidenav-color: rgba($inverse-global-color, 0.7) !default; +$inverse-slidenav-hover-color: rgba($inverse-global-color, 0.95) !default; +$inverse-slidenav-active-color: rgba($inverse-global-color, 0.7) !default; + + + +// @mixin hook-inverse-slidenav(){} +// @mixin hook-inverse-slidenav-hover(){} +// @mixin hook-inverse-slidenav-active(){} diff --git a/_sass/_sass/uikit/components/slider.scss b/_sass/_sass/uikit/components/slider.scss new file mode 100644 index 00000000..2799868e --- /dev/null +++ b/_sass/_sass/uikit/components/slider.scss @@ -0,0 +1,99 @@ +// Name: Slider +// Description: Component to create horizontal sliders +// +// Component: `uk-slider` +// +// Sub-objects: `uk-slider-container` +// `uk-slider-items` +// +// States: `uk-active` +// +// ======================================================================== + + +/* ======================================================================== + Component: Slider + ========================================================================== */ + +/* + * 1. Prevent tab highlighting on iOS. + */ + +.uk-slider { + /* 1 */ + -webkit-tap-highlight-color: transparent; + @if(mixin-exists(hook-slider)) {@include hook-slider();} +} + + +/* Container + ========================================================================== */ + +/* + * 1. Clip child elements + */ + +.uk-slider-container { + /* 1 */ + overflow: hidden; +} + +/* Items + ========================================================================== */ + +/* + * 1. Optimize animation + * 2. Create a containing block. In Safari it's neither created by `transform` nor `will-change`. + */ + +.uk-slider-items { + /* 1 */ + will-change: transform; + /* 2 */ + position: relative; +} + +/* + * 1. Reset list style without interfering with grid + * 2. Prevent displaying the callout information on iOS. + */ + +.uk-slider-items:not(.uk-grid) { + display: flex; + /* 1 */ + margin: 0; + padding: 0; + list-style: none; + /* 2 */ + -webkit-touch-callout: none; +} + +.uk-slider-items.uk-grid { flex-wrap: nowrap; } + + +/* Item + ========================================================================== */ + +/* + * 1. Let items take content dimensions (0 0 auto) + * 2. Create position context + * 3. Disable horizontal panning gestures in IE11 and Edge + */ + +.uk-slider-items > * { + /* 1 */ + flex: none; + /* 2 */ + position: relative; + /* 3 */ + touch-action: pan-y; +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-slider-misc)) {@include hook-slider-misc();} + +// @mixin hook-slider(){} +// @mixin hook-slider-misc(){} diff --git a/_sass/_sass/uikit/components/slideshow.scss b/_sass/_sass/uikit/components/slideshow.scss new file mode 100644 index 00000000..fc355d41 --- /dev/null +++ b/_sass/_sass/uikit/components/slideshow.scss @@ -0,0 +1,93 @@ +// Name: Slideshow +// Description: Component to create slideshows +// +// Component: `uk-slideshow` +// +// Sub-objects: `uk-slideshow-items` +// +// States: `uk-active` +// +// ======================================================================== + + +/* ======================================================================== + Component: Slideshow + ========================================================================== */ + +/* + * 1. Prevent tab highlighting on iOS. + */ + +.uk-slideshow { + /* 1 */ + -webkit-tap-highlight-color: transparent; + @if(mixin-exists(hook-slideshow)) {@include hook-slideshow();} +} + + +/* Items + ========================================================================== */ + +/* + * 1. Create position and stacking context + * 2. Reset list + * 3. Clip child elements + * 4. Prevent displaying the callout information on iOS. + */ + +.uk-slideshow-items { + /* 1 */ + position: relative; + z-index: 0; + /* 2 */ + margin: 0; + padding: 0; + list-style: none; + /* 3 */ + overflow: hidden; + /* 4 */ + -webkit-touch-callout: none; +} + + +/* Item + ========================================================================== */ + +/* + * 1. Position items above each other + * 2. Take the full width + * 3. Clip child elements, e.g. for `uk-cover` + * 4. Optimize animation + * 5. Disable horizontal panning gestures in IE11 and Edge + */ + +.uk-slideshow-items > * { + /* 1 */ + position: absolute; + top: 0; + left: 0; + /* 2 */ + right: 0; + bottom: 0; + /* 3 */ + overflow: hidden; + /* 4 */ + will-change: transform, opacity; + /* 5 */ + touch-action: pan-y; +} + +/* + * Hide not active items + */ + +.uk-slideshow-items > :not(.uk-active) { display: none; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-slideshow-misc)) {@include hook-slideshow-misc();} + +// @mixin hook-slideshow(){} +// @mixin hook-slideshow-misc(){} diff --git a/_sass/_sass/uikit/components/sortable.scss b/_sass/_sass/uikit/components/sortable.scss new file mode 100644 index 00000000..8895f11c --- /dev/null +++ b/_sass/_sass/uikit/components/sortable.scss @@ -0,0 +1,101 @@ +// Name: Sortable +// Description: Component to create sortable grids and lists +// +// Component: `uk-sortable` +// +// Sub-objects: `uk-sortable-drag` +// `uk-sortable-placeholder` +// `uk-sortable-handle` +// +// Modifiers: `uk-sortable-empty` +// +// States: `uk-drag` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$sortable-dragged-z-index: $global-z-index + 50 !default; + +$sortable-placeholder-opacity: 0 !default; + +$sortable-empty-height: 50px !default; + + +/* ======================================================================== + Component: Sortable + ========================================================================== */ + +.uk-sortable { + position: relative; + @if(mixin-exists(hook-sortable)) {@include hook-sortable();} +} + +/* + * Deactivate browser touch actions in IE11 and Edge + */ + +.uk-sortable > * { touch-action: none; } + +/* + * Deactivate pointer-events on SVGs in Safari + */ + +.uk-sortable svg { pointer-events: none; } + +/* + * Remove margin from the last-child + */ + +.uk-sortable > :last-child { margin-bottom: 0; } + + +/* Drag + ========================================================================== */ + +.uk-sortable-drag { + position: absolute !important; + z-index: $sortable-dragged-z-index !important; + pointer-events: none; + @if(mixin-exists(hook-sortable-drag)) {@include hook-sortable-drag();} +} + + +/* Placeholder + ========================================================================== */ + +.uk-sortable-placeholder { + opacity: $sortable-placeholder-opacity; + @if(mixin-exists(hook-sortable-placeholder)) {@include hook-sortable-placeholder();} +} + + +/* Empty modifier + ========================================================================== */ + +.uk-sortable-empty { + min-height: $sortable-empty-height; + @if(mixin-exists(hook-sortable-empty)) {@include hook-sortable-empty();} +} + + +/* Handle + ========================================================================== */ + +/* Hover */ +.uk-sortable-handle:hover { cursor: move; } + + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-sortable-misc)) {@include hook-sortable-misc();} + +// @mixin hook-sortable(){} +// @mixin hook-sortable-drag(){} +// @mixin hook-sortable-placeholder(){} +// @mixin hook-sortable-empty(){} +// @mixin hook-sortable-misc(){} diff --git a/_sass/_sass/uikit/components/spinner.scss b/_sass/_sass/uikit/components/spinner.scss new file mode 100644 index 00000000..a02f41d1 --- /dev/null +++ b/_sass/_sass/uikit/components/spinner.scss @@ -0,0 +1,74 @@ +// Name: Spinner +// Description: Component to create a loading spinner +// +// Component: `uk-spinner` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$spinner-size: 30px !default; +$spinner-stroke-width: 1 !default; +$spinner-radius: floor(($spinner-size - $spinner-stroke-width) / 2) !default; // Minus stroke width to prevent overflow clipping +$spinner-circumference: round(2 * 3.141 * $spinner-radius) !default; +$spinner-duration: 1.4s !default; + + +/* ======================================================================== + Component: Spinner + ========================================================================== */ + +/* + * Adopts `uk-icon` + */ + +.uk-spinner { + @if(mixin-exists(hook-spinner)) {@include hook-spinner();} +} + + +/* SVG + ========================================================================== */ + +.uk-spinner > * { animation: uk-spinner-rotate $spinner-duration linear infinite; } + +@keyframes uk-spinner-rotate { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(270deg); } +} + +/* + * Circle + */ + +.uk-spinner > * > * { + stroke-dasharray: $spinner-circumference; + stroke-dashoffset: 0; + transform-origin: center; + animation: uk-spinner-dash $spinner-duration ease-in-out infinite; + stroke-width: $spinner-stroke-width; + stroke-linecap: round; +} + +@keyframes uk-spinner-dash { + 0% { stroke-dashoffset: $spinner-circumference; } + 50% { + stroke-dashoffset: $spinner-circumference/4; + transform:rotate(135deg); + } + 100% { + stroke-dashoffset: $spinner-circumference; + transform:rotate(450deg); + } +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-spinner-misc)) {@include hook-spinner-misc();} + +// @mixin hook-spinner(){} +// @mixin hook-spinner-misc(){} diff --git a/_sass/_sass/uikit/components/sticky.scss b/_sass/_sass/uikit/components/sticky.scss new file mode 100644 index 00000000..e8e54f92 --- /dev/null +++ b/_sass/_sass/uikit/components/sticky.scss @@ -0,0 +1,53 @@ +// Name: Sticky +// Description: Component to make elements sticky in the viewport +// +// Component: `uk-sticky` +// +// Modifier: `uk-sticky-fixed` +// +// States: `uk-active` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$sticky-z-index: $global-z-index - 20 !default; + +$sticky-animation-duration: 0.2s !default; +$sticky-reverse-animation-duration: 0.2s !default; + + +/* ======================================================================== + Component: Sticky + ========================================================================== */ + +/* + * 1. Resolve frame rate issues on devices with lower frame rates by forcing hardware acceleration + */ + +.uk-sticky-fixed { + z-index: $sticky-z-index; + box-sizing: border-box; + margin: 0 !important; + /* 1 */ + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +/* + * Faster animations + */ + +.uk-sticky[class*='uk-animation-'] { animation-duration: $sticky-animation-duration; } + +.uk-sticky.uk-animation-reverse { animation-duration: $sticky-reverse-animation-duration; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-sticky-misc)) {@include hook-sticky-misc();} + +// @mixin hook-sticky-misc(){} diff --git a/_sass/_sass/uikit/components/subnav.scss b/_sass/_sass/uikit/components/subnav.scss new file mode 100644 index 00000000..53975016 --- /dev/null +++ b/_sass/_sass/uikit/components/subnav.scss @@ -0,0 +1,232 @@ +// Name: Subnav +// Description: Component to create a sub navigation +// +// Component: `uk-subnav` +// +// Modifiers: `uk-subnav-divider` +// `uk-subnav-pill` +// +// States: `uk-active` +// `uk-first-column` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$subnav-margin-horizontal: 20px !default; + +$subnav-item-color: $global-muted-color !default; +$subnav-item-hover-color: $global-color !default; +$subnav-item-hover-text-decoration: none !default; +$subnav-item-active-color: $global-emphasis-color !default; + +$subnav-divider-margin-horizontal: $subnav-margin-horizontal !default; +$subnav-divider-border-height: 1.5em !default; +$subnav-divider-border-width: $global-border-width !default; +$subnav-divider-border: $global-border !default; + +$subnav-pill-item-padding-vertical: 5px !default; +$subnav-pill-item-padding-horizontal: 10px !default; +$subnav-pill-item-background: transparent !default; +$subnav-pill-item-color: $subnav-item-color !default; +$subnav-pill-item-hover-background: $global-muted-background !default; +$subnav-pill-item-hover-color: $global-color !default; +$subnav-pill-item-onclick-background: $subnav-pill-item-hover-background !default; +$subnav-pill-item-onclick-color: $subnav-pill-item-hover-color !default; +$subnav-pill-item-active-background: $global-primary-background !default; +$subnav-pill-item-active-color: $global-inverse-color !default; + +$subnav-item-disabled-color: $global-muted-color !default; + + +/* ======================================================================== + Component: Subnav + ========================================================================== */ + +/* + * 1. Allow items to wrap into the next line + * 2. Gutter + * 3. Reset list + */ + +.uk-subnav { + display: flex; + /* 1 */ + flex-wrap: wrap; + /* 2 */ + margin-left: (-$subnav-margin-horizontal); + /* 3 */ + padding: 0; + list-style: none; + @if(mixin-exists(hook-subnav)) {@include hook-subnav();} +} + +/* + * 1. Space is allocated solely based on content dimensions: 0 0 auto + * 2. Gutter + * 3. Create position context for dropdowns + */ + +.uk-subnav > * { + /* 1 */ + flex: none; + /* 2 */ + padding-left: $subnav-margin-horizontal; + /* 3 */ + position: relative; +} + + +/* Items + ========================================================================== */ + +/* + * Items must target `a` elements to exclude other elements (e.g. dropdowns) + * Using `:first-child` instead of `a` to support `span` elements for text + * 1. Prevent gap if child element is `inline-block`, e.g. an icon + * 2. Style + */ + +.uk-subnav > * > :first-child { + /* 1 */ + display: block; + /* 2 */ + color: $subnav-item-color; + @if(mixin-exists(hook-subnav-item)) {@include hook-subnav-item();} +} + +/* Hover + Focus */ +.uk-subnav > * > a:hover, +.uk-subnav > * > a:focus { + color: $subnav-item-hover-color; + text-decoration: $subnav-item-hover-text-decoration; + outline: none; + @if(mixin-exists(hook-subnav-item-hover)) {@include hook-subnav-item-hover();} +} + +/* Active */ +.uk-subnav > .uk-active > a { + color: $subnav-item-active-color; + @if(mixin-exists(hook-subnav-item-active)) {@include hook-subnav-item-active();} +} + + +/* Divider modifier + ========================================================================== */ + +/* + * 1. Align items and divider vertically + */ + +.uk-subnav-divider > * { + /* 1 */ + display: flex; + align-items: center; +} + +/* + * Divider + * `nth-child` makes it also work without JS if it's only one row + */ + +.uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before { + content: ""; + height: $subnav-divider-border-height; + margin-left: ($subnav-divider-margin-horizontal - $subnav-margin-horizontal); + margin-right: $subnav-divider-margin-horizontal; + border-left: $subnav-divider-border-width solid $subnav-divider-border; + @if(mixin-exists(hook-subnav-divider)) {@include hook-subnav-divider();} +} + + +/* Pill modifier + ========================================================================== */ + +.uk-subnav-pill > * > :first-child { + padding: $subnav-pill-item-padding-vertical $subnav-pill-item-padding-horizontal; + background: $subnav-pill-item-background; + color: $subnav-pill-item-color; + @if(mixin-exists(hook-subnav-pill-item)) {@include hook-subnav-pill-item();} +} + +/* Hover + Focus */ +.uk-subnav-pill > * > a:hover, +.uk-subnav-pill > * > a:focus { + background-color: $subnav-pill-item-hover-background; + color: $subnav-pill-item-hover-color; + @if(mixin-exists(hook-subnav-pill-item-hover)) {@include hook-subnav-pill-item-hover();} +} + +/* OnClick */ +.uk-subnav-pill > * > a:active { + background-color: $subnav-pill-item-onclick-background; + color: $subnav-pill-item-onclick-color; + @if(mixin-exists(hook-subnav-pill-item-onclick)) {@include hook-subnav-pill-item-onclick();} +} + +/* Active */ +.uk-subnav-pill > .uk-active > a { + background-color: $subnav-pill-item-active-background; + color: $subnav-pill-item-active-color; + @if(mixin-exists(hook-subnav-pill-item-active)) {@include hook-subnav-pill-item-active();} +} + + +/* Disabled + * The same for all style modifiers + ========================================================================== */ + +.uk-subnav > .uk-disabled > a { + color: $subnav-item-disabled-color; + @if(mixin-exists(hook-subnav-item-disabled)) {@include hook-subnav-item-disabled();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-subnav-misc)) {@include hook-subnav-misc();} + +// @mixin hook-subnav(){} +// @mixin hook-subnav-item(){} +// @mixin hook-subnav-item-hover(){} +// @mixin hook-subnav-item-active(){} +// @mixin hook-subnav-divider(){} +// @mixin hook-subnav-pill-item(){} +// @mixin hook-subnav-pill-item-hover(){} +// @mixin hook-subnav-pill-item-onclick(){} +// @mixin hook-subnav-pill-item-active(){} +// @mixin hook-subnav-item-disabled(){} +// @mixin hook-subnav-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-subnav-item-color: $inverse-global-muted-color !default; +$inverse-subnav-item-hover-color: $inverse-global-color !default; +$inverse-subnav-item-active-color: $inverse-global-emphasis-color !default; +$inverse-subnav-divider-border: $inverse-global-border !default; +$inverse-subnav-pill-item-background: transparent !default; +$inverse-subnav-pill-item-color: $inverse-global-muted-color !default; +$inverse-subnav-pill-item-hover-background: $inverse-global-muted-background !default; +$inverse-subnav-pill-item-hover-color: $inverse-global-color !default; +$inverse-subnav-pill-item-onclick-background: $inverse-subnav-pill-item-hover-background !default; +$inverse-subnav-pill-item-onclick-color: $inverse-subnav-pill-item-hover-color !default; +$inverse-subnav-pill-item-active-background: $inverse-global-primary-background !default; +$inverse-subnav-pill-item-active-color: $inverse-global-inverse-color !default; +$inverse-subnav-item-disabled-color: $inverse-global-muted-color !default; + + + +// @mixin hook-inverse-subnav-item(){} +// @mixin hook-inverse-subnav-item-hover(){} +// @mixin hook-inverse-subnav-item-active(){} +// @mixin hook-inverse-subnav-divider(){} +// @mixin hook-inverse-subnav-pill-item(){} +// @mixin hook-inverse-subnav-pill-item-hover(){} +// @mixin hook-inverse-subnav-pill-item-onclick(){} +// @mixin hook-inverse-subnav-pill-item-active(){} +// @mixin hook-inverse-subnav-item-disabled(){} diff --git a/_sass/_sass/uikit/components/switcher.scss b/_sass/_sass/uikit/components/switcher.scss new file mode 100644 index 00000000..0d99cdf7 --- /dev/null +++ b/_sass/_sass/uikit/components/switcher.scss @@ -0,0 +1,47 @@ +// Name: Switcher +// Description: Component to navigate through different content panes +// +// Component: `uk-switcher` +// +// States: `uk-active` +// +// ======================================================================== + + +/* ======================================================================== + Component: Switcher + ========================================================================== */ + +/* + * Reset list + */ + +.uk-switcher { + margin: 0; + padding: 0; + list-style: none; +} + + +/* Items + ========================================================================== */ + +/* + * Hide not active items + */ + +.uk-switcher > :not(.uk-active) { display: none; } + +/* + * Remove margin from the last-child + */ + +.uk-switcher > * > :last-child { margin-bottom: 0; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-switcher-misc)) {@include hook-switcher-misc();} + +// @mixin hook-switcher-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/components/tab.scss b/_sass/_sass/uikit/components/tab.scss new file mode 100644 index 00000000..87e0a678 --- /dev/null +++ b/_sass/_sass/uikit/components/tab.scss @@ -0,0 +1,191 @@ +// Name: Tab +// Description: Component to create a tabbed navigation +// +// Component: `uk-tab` +// +// Modifiers: `uk-tab-bottom` +// `uk-tab-left` +// `uk-tab-right` +// +// States: `uk-active` +// `uk-disabled` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$tab-margin-horizontal: 20px !default; + +$tab-item-padding-horizontal: 10px !default; +$tab-item-padding-vertical: 5px !default; +$tab-item-color: $global-muted-color !default; +$tab-item-hover-color: $global-color !default; +$tab-item-hover-text-decoration: none !default; +$tab-item-active-color: $global-emphasis-color !default; +$tab-item-disabled-color: $global-muted-color !default; + + +/* ======================================================================== + Component: Tab + ========================================================================== */ + +/* + * 1. Allow items to wrap into the next line + * 2. Gutter + * 3. Reset list + */ + +.uk-tab { + display: flex; + /* 1 */ + flex-wrap: wrap; + /* 2 */ + margin-left: (-$tab-margin-horizontal); + /* 3 */ + padding: 0; + list-style: none; + @if(mixin-exists(hook-tab)) {@include hook-tab();} +} + +/* + * 1. Space is allocated solely based on content dimensions: 0 0 auto + * 2. Gutter + * 3. Create position context for dropdowns + */ + +.uk-tab > * { + /* 1 */ + flex: none; + /* 2 */ + padding-left: $tab-margin-horizontal; + /* 3 */ + position: relative; +} + + +/* Items + ========================================================================== */ + +/* + * Items must target `a` elements to exclude other elements (e.g. dropdowns) + * 1. Center text if a width is set + * 2. Style + */ + +.uk-tab > * > a { + /* 1 */ + display: block; + text-align: center; + /* 2 */ + padding: $tab-item-padding-vertical $tab-item-padding-horizontal; + color: $tab-item-color; + @if(mixin-exists(hook-tab-item)) {@include hook-tab-item();} +} + +/* Hover + Focus */ +.uk-tab > * > a:hover, +.uk-tab > * > a:focus { + color: $tab-item-hover-color; + text-decoration: $tab-item-hover-text-decoration; + @if(mixin-exists(hook-tab-item-hover)) {@include hook-tab-item-hover();} +} + +/* Active */ +.uk-tab > .uk-active > a { + color: $tab-item-active-color; + @if(mixin-exists(hook-tab-item-active)) {@include hook-tab-item-active();} +} + +/* Disabled */ +.uk-tab > .uk-disabled > a { + color: $tab-item-disabled-color; + @if(mixin-exists(hook-tab-item-disabled)) {@include hook-tab-item-disabled();} +} + + +/* Position modifier + ========================================================================== */ + +/* + * Bottom + */ + +.uk-tab-bottom { + @if(mixin-exists(hook-tab-bottom)) {@include hook-tab-bottom();} +} + +.uk-tab-bottom > * > a { + @if(mixin-exists(hook-tab-bottom-item)) {@include hook-tab-bottom-item();} +} + +/* + * Left + Right + * 1. Reset Gutter + */ + +.uk-tab-left, +.uk-tab-right { + flex-direction: column; + /* 1 */ + margin-left: 0; +} + +/* 1 */ +.uk-tab-left > *, +.uk-tab-right > * { padding-left: 0; } + +.uk-tab-left { + @if(mixin-exists(hook-tab-left)) {@include hook-tab-left();} +} + +.uk-tab-right { + @if(mixin-exists(hook-tab-right)) {@include hook-tab-right();} +} + +.uk-tab-left > * > a { + text-align: left; + @if(mixin-exists(hook-tab-left-item)) {@include hook-tab-left-item();} +} + +.uk-tab-right > * > a { + text-align: left; + @if(mixin-exists(hook-tab-right-item)) {@include hook-tab-right-item();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-tab-misc)) {@include hook-tab-misc();} + +// @mixin hook-tab(){} +// @mixin hook-tab-item(){} +// @mixin hook-tab-item-hover(){} +// @mixin hook-tab-item-active(){} +// @mixin hook-tab-item-disabled(){} +// @mixin hook-tab-bottom(){} +// @mixin hook-tab-bottom-item(){} +// @mixin hook-tab-left(){} +// @mixin hook-tab-left-item(){} +// @mixin hook-tab-right(){} +// @mixin hook-tab-right-item(){} +// @mixin hook-tab-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-tab-item-color: $inverse-global-muted-color !default; +$inverse-tab-item-hover-color: $inverse-global-color !default; +$inverse-tab-item-active-color: $inverse-global-emphasis-color !default; +$inverse-tab-item-disabled-color: $inverse-global-muted-color !default; + + + +// @mixin hook-inverse-tab(){} +// @mixin hook-inverse-tab-item(){} +// @mixin hook-inverse-tab-item-hover(){} +// @mixin hook-inverse-tab-item-active(){} +// @mixin hook-inverse-tab-item-disabled(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/components/table.scss b/_sass/_sass/uikit/components/table.scss new file mode 100644 index 00000000..85521b7d --- /dev/null +++ b/_sass/_sass/uikit/components/table.scss @@ -0,0 +1,317 @@ +// Name: Table +// Description: Styles for tables +// +// Component: `uk-table` +// +// Modifiers: `uk-table-middle` +// `uk-table-divider` +// `uk-table-striped` +// `uk-table-hover` +// `uk-table-small` +// `uk-table-justify` +// `uk-table-shrink` +// `uk-table-expand` +// `uk-table-link` +// `uk-table-responsive` +// +// States: `uk-active` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$table-margin-vertical: $global-margin !default; + +$table-cell-padding-vertical: 16px !default; +$table-cell-padding-horizontal: 12px !default; + +$table-header-cell-font-size: $global-font-size !default; +$table-header-cell-font-weight: bold !default; +$table-header-cell-color: $global-color !default; + +$table-footer-font-size: $global-small-font-size !default; + +$table-caption-font-size: $global-small-font-size !default; +$table-caption-color: $global-muted-color !default; + +$table-row-active-background: #ffd !default; + +$table-divider-border-width: $global-border-width !default; +$table-divider-border: $global-border !default; + +$table-striped-row-background: $global-muted-background !default; + +$table-hover-row-background: $table-row-active-background !default; + +$table-small-cell-padding-vertical: 10px !default; +$table-small-cell-padding-horizontal: 12px !default; + +$table-large-cell-padding-vertical: 22px !default; +$table-large-cell-padding-horizontal: 12px !default; + +$table-expand-min-width: 150px !default; + + +/* ======================================================================== + Component: Table + ========================================================================== */ + +/* + * 1. Remove most spacing between table cells. + * 2. Behave like a block element + * 3. Style + */ + +.uk-table { + /* 1 */ + border-collapse: collapse; + border-spacing: 0; + /* 2 */ + width: 100%; + /* 3 */ + margin-bottom: $table-margin-vertical; + @if(mixin-exists(hook-table)) {@include hook-table();} +} + +/* Add margin if adjacent element */ +* + .uk-table { margin-top: $table-margin-vertical; } + + +/* Header cell + ========================================================================== */ + +/* + * 1. Style + */ + +.uk-table th { + padding: $table-cell-padding-vertical $table-cell-padding-horizontal; + text-align: left; + vertical-align: top !important; /* custom from bottom */ + /* 1 */ + font-size: $table-header-cell-font-size; + font-weight: $table-header-cell-font-weight; + color: $table-header-cell-color; + @if(mixin-exists(hook-table-header-cell)) {@include hook-table-header-cell();} +} + + +/* Cell + ========================================================================== */ + +.uk-table td { + padding: $table-cell-padding-vertical $table-cell-padding-horizontal; + vertical-align: top; + @if(mixin-exists(hook-table-cell)) {@include hook-table-cell();} +} + +/* + * Remove margin from the last-child + */ + +.uk-table td > :last-child { margin-bottom: 0; } + + +/* Footer + ========================================================================== */ + +.uk-table tfoot { + font-size: $table-footer-font-size; + @if(mixin-exists(hook-table-footer)) {@include hook-table-footer();} +} + + +/* Caption + ========================================================================== */ + +.uk-table caption { + font-size: $table-caption-font-size; + text-align: left; + color: $table-caption-color; + @if(mixin-exists(hook-table-caption)) {@include hook-table-caption();} +} + + +/* Row + ========================================================================== */ + +.uk-table > tr.uk-active, +.uk-table tbody tr.uk-active { + background: $table-row-active-background; + @if(mixin-exists(hook-table-row-active)) {@include hook-table-row-active();} +} + + +/* Alignment modifier + ========================================================================== */ + +.uk-table-middle, +.uk-table-middle td { vertical-align: middle !important; } + + + +/* Style modifiers + ========================================================================== */ + +/* + * Divider + */ + +.uk-table-divider > tr:not(:first-child), +.uk-table-divider > :not(:first-child) > tr, +.uk-table-divider > :first-child > tr:not(:first-child) { + border-top: $table-divider-border-width solid $table-divider-border; + @if(mixin-exists(hook-table-divider)) {@include hook-table-divider();} +} + +/* + * Striped + */ + +.uk-table-striped > tr:nth-of-type(odd), +.uk-table-striped tbody tr:nth-of-type(odd) { + background: $table-striped-row-background; + @if(mixin-exists(hook-table-striped)) {@include hook-table-striped();} +} + +/* + * Hover + */ + +.uk-table-hover > tr:hover, +.uk-table-hover tbody tr:hover { + background: $table-hover-row-background; + @if(mixin-exists(hook-table-hover)) {@include hook-table-hover();} +} + + +/* Size modifier + ========================================================================== */ + +.uk-table-small th, +.uk-table-small td { + padding: $table-small-cell-padding-vertical $table-small-cell-padding-horizontal; + @if(mixin-exists(hook-table-small)) {@include hook-table-small();} +} + +.uk-table-large th, +.uk-table-large td { + padding: $table-large-cell-padding-vertical $table-large-cell-padding-horizontal; + @if(mixin-exists(hook-table-large)) {@include hook-table-large();} +} + + +/* Justify modifier + ========================================================================== */ + +.uk-table-justify th:first-child, +.uk-table-justify td:first-child { padding-left: 0; } + +.uk-table-justify th:last-child, +.uk-table-justify td:last-child { padding-right: 0; } + + +/* Cell size modifier + ========================================================================== */ + +.uk-table-shrink { width: 1px; } +.uk-table-expand { min-width: $table-expand-min-width; } + + +/* Cell link modifier + ========================================================================== */ + +/* + * Does not work with `uk-table-justify` at the moment + */ + +.uk-table-link { padding: 0 !important; } + +.uk-table-link > a { + display: block; + padding: $table-cell-padding-vertical $table-cell-padding-horizontal; +} + +.uk-table-small .uk-table-link > a { padding: $table-small-cell-padding-vertical $table-small-cell-padding-horizontal; } + + +/* Responsive table + ========================================================================== */ + + +/* Phone landscape and smaller */ +@media (max-width: $breakpoint-small-max) { + + .uk-table-responsive, + .uk-table-responsive tbody, + .uk-table-responsive th, + .uk-table-responsive td, + .uk-table-responsive tr { display: block; } + + .uk-table-responsive thead { display: none; } + + .uk-table-responsive th, + .uk-table-responsive td { + width: auto !important; + max-width: none !important; + min-width: 0 !important; + overflow: visible !important; + white-space: normal !important; + } + + .uk-table-responsive th:not(:first-child):not(.uk-table-link), + .uk-table-responsive td:not(:first-child):not(.uk-table-link), + .uk-table-responsive .uk-table-link:not(:first-child) > a { padding-top: round($table-cell-padding-vertical / 3) !important; } + + .uk-table-responsive th:not(:last-child):not(.uk-table-link), + .uk-table-responsive td:not(:last-child):not(.uk-table-link), + .uk-table-responsive .uk-table-link:not(:last-child) > a { padding-bottom: round($table-cell-padding-vertical / 3) !important; } + + .uk-table-justify.uk-table-responsive th, + .uk-table-justify.uk-table-responsive td { + padding-left: 0; + padding-right: 0; + } + +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-table-misc)) {@include hook-table-misc();} + +// @mixin hook-table(){} +// @mixin hook-table-header-cell(){} +// @mixin hook-table-cell(){} +// @mixin hook-table-footer(){} +// @mixin hook-table-caption(){} +// @mixin hook-table-row-active(){} +// @mixin hook-table-divider(){} +// @mixin hook-table-striped(){} +// @mixin hook-table-hover(){} +// @mixin hook-table-small(){} +// @mixin hook-table-large(){} +// @mixin hook-table-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-table-header-cell-color: $inverse-global-color !default; +$inverse-table-caption-color: $inverse-global-muted-color !default; +$inverse-table-row-active-background: fade-out($inverse-global-muted-background, 0.02) !default; +$inverse-table-divider-border: $inverse-global-border !default; +$inverse-table-striped-row-background: $inverse-global-muted-background !default; +$inverse-table-hover-row-background: $inverse-table-row-active-background !default; + + + +// @mixin hook-inverse-table-header-cell(){} +// @mixin hook-inverse-table-caption(){} +// @mixin hook-inverse-table-row-active(){} +// @mixin hook-inverse-table-divider(){} +// @mixin hook-inverse-table-striped(){} +// @mixin hook-inverse-table-hover(){} diff --git a/_sass/_sass/uikit/components/text.scss b/_sass/_sass/uikit/components/text.scss new file mode 100644 index 00000000..c60915b8 --- /dev/null +++ b/_sass/_sass/uikit/components/text.scss @@ -0,0 +1,262 @@ +// Name: Text +// Description: Utilities for text +// +// Component: `uk-text-*` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$text-lead-font-size: $global-large-font-size !default; +$text-lead-line-height: 1.5 !default; +$text-lead-color: $global-emphasis-color !default; + +$text-meta-font-size: $global-small-font-size !default; +$text-meta-line-height: 1.4 !default; +$text-meta-color: $global-muted-color !default; + +$text-small-font-size: $global-small-font-size !default; +$text-small-line-height: 1.5 !default; + +$text-large-font-size: $global-large-font-size !default; +$text-large-line-height: 1.5 !default; + +$text-bold-font-weight: bolder !default; + +$text-muted-color: $global-muted-color !default; +$text-primary-color: $global-primary-background !default; +$text-success-color: $global-success-background !default; +$text-warning-color: $global-warning-background !default; +$text-danger-color: $global-danger-background !default; + +$text-background-color: $global-primary-background !default; + + +/* ======================================================================== + Component: Text + ========================================================================== */ + + +/* Style modifiers + ========================================================================== */ + +.uk-text-lead { + font-size: $text-lead-font-size; + line-height: $text-lead-line-height; + color: $text-lead-color; + @if(mixin-exists(hook-text-lead)) {@include hook-text-lead();} +} + +.uk-text-meta { + font-size: $text-meta-font-size; + line-height: $text-meta-line-height; + color: $text-meta-color; + @if(mixin-exists(hook-text-meta)) {@include hook-text-meta();} +} + + +/* Size modifiers + ========================================================================== */ + +.uk-text-small { + font-size: $text-small-font-size; + line-height: $text-small-line-height; + @if(mixin-exists(hook-text-small)) {@include hook-text-small();} +} + +.uk-text-large { + font-size: $text-large-font-size; + line-height: $text-large-line-height; + @if(mixin-exists(hook-text-large)) {@include hook-text-large();} +} + + +/* Weight modifier + ========================================================================== */ + +.uk-text-bold { font-weight: $text-bold-font-weight; } + + +/* Transform modifier + ========================================================================== */ + +.uk-text-uppercase { text-transform: uppercase !important; } +.uk-text-capitalize { text-transform: capitalize !important; } +.uk-text-lowercase { text-transform: lowercase !important; } + + +/* Color modifiers + ========================================================================== */ + +.uk-text-muted { color: $text-muted-color !important; } +.uk-text-primary { color: $text-primary-color !important; } +.uk-text-success { color: $text-success-color !important; } +.uk-text-warning { color: $text-warning-color !important; } +.uk-text-danger { color: $text-danger-color !important; } + + +/* Background modifier + ========================================================================== */ + +/* + * 1. The background clips to the foreground text. Works in Chrome, Firefox, Safari, Edge and Opera + * Default color is set to transparent + * 2. Container fits the text + * 3. Fallback color for IE11 + */ + +.uk-text-background { + /* 1 */ + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + /* 2 */ + display: inline-block; + /* 3 */ + color: $text-background-color !important; +} + +@supports (-webkit-background-clip: text) { + + .uk-text-background { + background-color: $text-background-color; + @if(mixin-exists(hook-text-background)) {@include hook-text-background();} + } + +} + + +/* Alignment modifiers + ========================================================================== */ + +.uk-text-left { text-align: left !important; } +.uk-text-right { text-align: right !important; } +.uk-text-center { text-align: center !important; } +.uk-text-justify { text-align: justify !important; } + +/* Phone landscape and bigger */ +@media (min-width: $breakpoint-small) { + + .uk-text-left\@s { text-align: left !important; } + .uk-text-right\@s { text-align: right !important; } + .uk-text-center\@s { text-align: center !important; } + +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-text-left\@m { text-align: left !important; } + .uk-text-right\@m { text-align: right !important; } + .uk-text-center\@m { text-align: center !important; } + +} + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + .uk-text-left\@l { text-align: left !important; } + .uk-text-right\@l { text-align: right !important; } + .uk-text-center\@l { text-align: center !important; } + +} + +/* Large screen and bigger */ +@media (min-width: $breakpoint-xlarge) { + + .uk-text-left\@xl { text-align: left !important; } + .uk-text-right\@xl { text-align: right !important; } + .uk-text-center\@xl { text-align: center !important; } + +} + +/* + * Vertical + */ + +.uk-text-top { vertical-align: top !important; } +.uk-text-middle { vertical-align: middle !important; } +.uk-text-bottom { vertical-align: bottom !important; } +.uk-text-baseline { vertical-align: baseline !important; } + + +/* Wrap modifiers + ========================================================================== */ + +/* + * Prevent text from wrapping onto multiple lines + */ + +.uk-text-nowrap { white-space: nowrap; } + +/* + * 1. Make sure a max-width is set after which truncation can occur + * 2. Prevent text from wrapping onto multiple lines, and truncate with an ellipsis + * 3. Fix for table cells + */ + +.uk-text-truncate { + /* 1 */ + max-width: 100%; + /* 2 */ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* 2 */ +th.uk-text-truncate, +td.uk-text-truncate { max-width: 0; } + + +/* + * 1. Wrap long words onto the next line and break them if they are too long to fit + * 2. Legacy `word-wrap` as fallback for `overflow-wrap` + * 3. Add a hyphen where the word breaks + * 4. Fix `overflow-wrap` which doesn't work with table cells in Chrome, Opera, IE11 and Edge + * Must use `break-all` to support IE11 and Edge + */ + +.uk-text-break { + /* 1 */ + overflow-wrap: break-word; + /* 2 */ + word-wrap: break-word; + /* 3 */ + -ms-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; +} + +/* 4 */ +th.uk-text-break, +td.uk-text-break { word-break: break-all; } + + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-text-misc)) {@include hook-text-misc();} + +// @mixin hook-text-lead(){} +// @mixin hook-text-meta(){} +// @mixin hook-text-small(){} +// @mixin hook-text-large(){} +// @mixin hook-text-background(){} +// @mixin hook-text-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-text-lead-color: $inverse-global-color !default; +$inverse-text-meta-color: $inverse-global-muted-color !default; +$inverse-text-muted-color: $inverse-global-muted-color !default; +$inverse-text-primary-color: $inverse-global-color !default; + + + +// @mixin hook-inverse-text-lead(){} +// @mixin hook-inverse-text-meta(){} diff --git a/_sass/_sass/uikit/components/thumbnav.scss b/_sass/_sass/uikit/components/thumbnav.scss new file mode 100644 index 00000000..ee551f99 --- /dev/null +++ b/_sass/_sass/uikit/components/thumbnav.scss @@ -0,0 +1,123 @@ +// Name: Thumbnav +// Description: Component to create thumbnail navigations +// +// Component: `uk-thumbnav` +// +// Modifier: `uk-thumbnav-vertical` +// +// States: `uk-active` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$thumbnav-margin-horizontal: 15px !default; +$thumbnav-margin-vertical: $thumbnav-margin-horizontal !default; + + +/* ======================================================================== + Component: Thumbnav + ========================================================================== */ + +/* + * 1. Allow items to wrap into the next line + * 2. Reset list + * 3. Gutter + */ + +.uk-thumbnav { + display: flex; + /* 1 */ + flex-wrap: wrap; + /* 2 */ + margin: 0; + padding: 0; + list-style: none; + /* 3 */ + margin-left: (-$thumbnav-margin-horizontal); + @if(mixin-exists(hook-thumbnav)) {@include hook-thumbnav();} +} + +/* + * 1. Space is allocated solely based on content dimensions: 0 0 auto + * 2. Gutter + */ + +.uk-thumbnav > * { + /* 1 */ + flex: none; + /* 2 */ + padding-left: $thumbnav-margin-horizontal; +} + + +/* Items + ========================================================================== */ + +/* + * Items + */ + +.uk-thumbnav > * > * { + display: inline-block; + @if(mixin-exists(hook-thumbnav-item)) {@include hook-thumbnav-item();} +} + +/* Hover + Focus */ +.uk-thumbnav > * > :hover, +.uk-thumbnav > * > :focus { + outline: none; + @if(mixin-exists(hook-thumbnav-item-hover)) {@include hook-thumbnav-item-hover();} +} + +/* Active */ +.uk-thumbnav > .uk-active > * { + @if(mixin-exists(hook-thumbnav-item-active)) {@include hook-thumbnav-item-active();} +} + + +/* Modifier: 'uk-thumbnav-vertical' + ========================================================================== */ + +/* + * 1. Change direction + * 2. Gutter + */ + +.uk-thumbnav-vertical { + /* 1 */ + flex-direction: column; + /* 2 */ + margin-left: 0; + margin-top: (-$thumbnav-margin-vertical); +} + +/* 2 */ +.uk-thumbnav-vertical > * { + padding-left: 0; + padding-top: $thumbnav-margin-vertical; +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-thumbnav-misc)) {@include hook-thumbnav-misc();} + +// @mixin hook-thumbnav(){} +// @mixin hook-thumbnav-item(){} +// @mixin hook-thumbnav-item-hover(){} +// @mixin hook-thumbnav-item-active(){} +// @mixin hook-thumbnav-misc(){} + + +// Inverse +// ======================================================================== + + + +// @mixin hook-inverse-thumbnav-item(){} +// @mixin hook-inverse-thumbnav-item-hover(){} +// @mixin hook-inverse-thumbnav-item-active(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/components/tile.scss b/_sass/_sass/uikit/components/tile.scss new file mode 100644 index 00000000..3a364bfb --- /dev/null +++ b/_sass/_sass/uikit/components/tile.scss @@ -0,0 +1,224 @@ +// Name: Tile +// Description: Component to create tiled boxes +// +// Component: `uk-tile` +// +// Modifiers: `uk-tile-xsmall` +// `uk-tile-small` +// `uk-tile-large` +// `uk-tile-xlarge` +// `uk-tile-default` +// `uk-tile-muted` +// `uk-tile-primary` +// `uk-tile-secondary` +// +// States: `uk-preserve-color` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$tile-padding-horizontal: 15px !default; +$tile-padding-horizontal-s: $global-gutter !default; +$tile-padding-horizontal-m: $global-medium-gutter !default; +$tile-padding-vertical: $global-medium-margin !default; +$tile-padding-vertical-m: $global-large-margin !default; + +$tile-xsmall-padding-vertical: $global-margin !default; + +$tile-small-padding-vertical: $global-medium-margin !default; + +$tile-large-padding-vertical: $global-large-margin !default; +$tile-large-padding-vertical-m: $global-xlarge-margin !default; + +$tile-xlarge-padding-vertical: $global-xlarge-margin !default; +$tile-xlarge-padding-vertical-m: ($global-large-margin + $global-xlarge-margin) !default; + +$tile-default-background: $global-background !default; + +$tile-muted-background: $global-muted-background !default; + +$tile-primary-background: $global-primary-background !default; +$tile-primary-color-mode: light !default; + +$tile-secondary-background: $global-secondary-background !default; +$tile-secondary-color-mode: light !default; + + +/* ======================================================================== + Component: Tile + ========================================================================== */ + +.uk-tile { + position: relative; + box-sizing: border-box; + padding-left: $tile-padding-horizontal; + padding-right: $tile-padding-horizontal; + padding-top: $tile-padding-vertical; + padding-bottom: $tile-padding-vertical; + @if(mixin-exists(hook-tile)) {@include hook-tile();} +} + +/* Phone landscape and bigger */ +@media (min-width: $breakpoint-small) { + + .uk-tile { + padding-left: $tile-padding-horizontal-s; + padding-right: $tile-padding-horizontal-s; + } + +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-tile { + padding-left: $tile-padding-horizontal-m; + padding-right: $tile-padding-horizontal-m; + padding-top: $tile-padding-vertical-m; + padding-bottom: $tile-padding-vertical-m; + } + +} + +/* + * Micro clearfix + */ + +.uk-tile::before, +.uk-tile::after { + content: ""; + display: table; +} + +.uk-tile::after { clear: both; } + +/* + * Remove margin from the last-child + */ + +.uk-tile > :last-child { margin-bottom: 0; } + + +/* Size modifiers + ========================================================================== */ + +/* + * XSmall + */ + +.uk-tile-xsmall { + padding-top: $tile-xsmall-padding-vertical; + padding-bottom: $tile-xsmall-padding-vertical; +} + +/* + * Small + */ + +.uk-tile-small { + padding-top: $tile-small-padding-vertical; + padding-bottom: $tile-small-padding-vertical; +} + +/* + * Large + */ + +.uk-tile-large { + padding-top: $tile-large-padding-vertical; + padding-bottom: $tile-large-padding-vertical; +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-tile-large { + padding-top: $tile-large-padding-vertical-m; + padding-bottom: $tile-large-padding-vertical-m; + } + +} + + +/* + * XLarge + */ + +.uk-tile-xlarge { + padding-top: $tile-xlarge-padding-vertical; + padding-bottom: $tile-xlarge-padding-vertical; +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-tile-xlarge { + padding-top: $tile-xlarge-padding-vertical-m; + padding-bottom: $tile-xlarge-padding-vertical-m; + } + +} + + +/* Style modifiers + ========================================================================== */ + +/* + * Default + */ + +.uk-tile-default { + background: $tile-default-background; + @if(mixin-exists(hook-tile-default)) {@include hook-tile-default();} +} + +/* + * Muted + */ + +.uk-tile-muted { + background: $tile-muted-background; + @if(mixin-exists(hook-tile-muted)) {@include hook-tile-muted();} +} + +/* + * Primary + */ + +.uk-tile-primary { + background: $tile-primary-background; + @if(mixin-exists(hook-tile-primary)) {@include hook-tile-primary();} +} + +// Color Mode +@if ( $tile-primary-color-mode == light ) { .uk-tile-primary:not(.uk-preserve-color) { @extend .uk-light !optional;} } +@if ( $tile-primary-color-mode == dark ) { .uk-tile-primary:not(.uk-preserve-color) { @extend .uk-dark !optional;} } + +/* + * Secondary + */ + +.uk-tile-secondary { + background: $tile-secondary-background; + @if(mixin-exists(hook-tile-secondary)) {@include hook-tile-secondary();} +} + +// Color Mode +@if ( $tile-secondary-color-mode == light ) { .uk-tile-secondary:not(.uk-preserve-color) { @extend .uk-light !optional;} } +@if ( $tile-secondary-color-mode == dark ) { .uk-tile-secondary:not(.uk-preserve-color) { @extend .uk-dark !optional;} } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-tile-misc)) {@include hook-tile-misc();} + +// @mixin hook-tile(){} +// @mixin hook-tile-default(){} +// @mixin hook-tile-muted(){} +// @mixin hook-tile-primary(){} +// @mixin hook-tile-secondary(){} +// @mixin hook-tile-misc(){} diff --git a/_sass/_sass/uikit/components/tooltip.scss b/_sass/_sass/uikit/components/tooltip.scss new file mode 100644 index 00000000..1f8e8c88 --- /dev/null +++ b/_sass/_sass/uikit/components/tooltip.scss @@ -0,0 +1,84 @@ +// Name: Tooltip +// Description: Component to create tooltips +// +// Component: `uk-tooltip` +// +// Modifiers `uk-tooltip-top` +// `uk-tooltip-top-left` +// `uk-tooltip-top-right` +// `uk-tooltip-bottom` +// `uk-tooltip-bottom-left` +// `uk-tooltip-bottom-right` +// `uk-tooltip-left` +// `uk-tooltip-right` +// +// States: `uk-active` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$tooltip-z-index: $global-z-index + 30 !default; +$tooltip-max-width: 200px !default; +$tooltip-padding-vertical: 3px !default; +$tooltip-padding-horizontal: 6px !default; +$tooltip-background: #666 !default; +$tooltip-border-radius: 2px !default; +$tooltip-color: $global-inverse-color !default; +$tooltip-font-size: 12px !default; + +$tooltip-margin: 10px !default; + + +/* ======================================================================== + Component: Tooltip + ========================================================================== */ + +/* + * 1. Hide by default + * 2. Position + * 3. Dimensions + * 4. Style + */ + +.uk-tooltip { + /* 1 */ + display: none; + /* 2 */ + position: absolute; + z-index: $tooltip-z-index; + /* 3 */ + box-sizing: border-box; + max-width: $tooltip-max-width; + padding: $tooltip-padding-vertical $tooltip-padding-horizontal; + /* 4 */ + background: $tooltip-background; + border-radius: $tooltip-border-radius; + color: $tooltip-color; + font-size: $tooltip-font-size; + @if(mixin-exists(hook-tooltip)) {@include hook-tooltip();} +} + +/* Show */ +.uk-tooltip.uk-active { display: block; } + + +/* Direction / Alignment modifiers + ========================================================================== */ + +/* Direction */ +[class*='uk-tooltip-top'] { margin-top: (-$tooltip-margin); } +[class*='uk-tooltip-bottom'] { margin-top: $tooltip-margin; } +[class*='uk-tooltip-left'] { margin-left: (-$tooltip-margin); } +[class*='uk-tooltip-right'] { margin-left: $tooltip-margin; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-tooltip-misc)) {@include hook-tooltip-misc();} + +// @mixin hook-tooltip(){} +// @mixin hook-tooltip-misc(){} diff --git a/_sass/_sass/uikit/components/totop.scss b/_sass/_sass/uikit/components/totop.scss new file mode 100644 index 00000000..4b8aa1d8 --- /dev/null +++ b/_sass/_sass/uikit/components/totop.scss @@ -0,0 +1,71 @@ +// Name: Totop +// Description: Component to create an icon to scroll back to top +// +// Component: `uk-totop` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$totop-padding: 5px !default; +$totop-color: $global-muted-color !default; + +$totop-hover-color: $global-color !default; + +$totop-active-color: $global-emphasis-color !default; + + +/* ======================================================================== + Component: Totop + ========================================================================== */ + +/* + * Addopts `uk-icon` + */ + +.uk-totop { + padding: $totop-padding; + color: $totop-color; + @if(mixin-exists(hook-totop)) {@include hook-totop();} +} + +/* Hover + Focus */ +.uk-totop:hover, +.uk-totop:focus { + color: $totop-hover-color; + outline: none; + @if(mixin-exists(hook-totop-hover)) {@include hook-totop-hover();} +} + +/* OnClick */ +.uk-totop:active { + color: $totop-active-color; + @if(mixin-exists(hook-totop-active)) {@include hook-totop-active();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-totop-misc)) {@include hook-totop-misc();} + +// @mixin hook-totop(){} +// @mixin hook-totop-hover(){} +// @mixin hook-totop-active(){} +// @mixin hook-totop-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-totop-color: $inverse-global-muted-color !default; +$inverse-totop-hover-color: $inverse-global-color !default; +$inverse-totop-active-color: $inverse-global-emphasis-color !default; + + + +// @mixin hook-inverse-totop(){} +// @mixin hook-inverse-totop-hover(){} +// @mixin hook-inverse-totop-active(){} diff --git a/_sass/_sass/uikit/components/transition.scss b/_sass/_sass/uikit/components/transition.scss new file mode 100644 index 00000000..c9992743 --- /dev/null +++ b/_sass/_sass/uikit/components/transition.scss @@ -0,0 +1,145 @@ +// Name: Transition +// Description: Utilities for transitions +// +// Component: `uk-transition-*` +// +// Modifiers: `uk-transition-fade` +// `uk-transition-scale-up` +// `uk-transition-scale-down` +// `uk-transition-slide-top-*` +// `uk-transition-slide-bottom-*` +// `uk-transition-slide-left-*` +// `uk-transition-slide-right-*` +// `uk-transition-opaque` +// `uk-transition-slow` +// +// Sub-objects: `uk-transition-toggle`, +// `uk-transition-active` +// +// States: `uk-hover` +// `uk-active` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$transition-duration: 0.3s !default; + +$transition-scale: 1.1 !default; + +$transition-slide-small-translate: 10px !default; +$transition-slide-medium-translate: 50px !default; + +$transition-slow-duration: 0.7s !default; + + +/* ======================================================================== + Component: Transition + ========================================================================== */ + +/* + * Using multiple selectors to exclude `uk-transition-toggle` + * Note: Transitions don't work with `uk-postion-center-*` classes because they also use `transform` + * Just put the transition in an extra `div` + */ + +.uk-transition-fade, +[class*='uk-transition-scale'], +[class*='uk-transition-slide'] { + transition: $transition-duration ease-out; + transition-property: opacity, transform, filter; +} + +.uk-transition-toggle:focus { outline: none; } + +/* + * Fade + */ + +.uk-transition-fade { opacity: 0; } + +/* Show */ +.uk-transition-toggle:hover [class*='uk-transition-fade'], +.uk-transition-toggle.uk-hover [class*='uk-transition-fade'], +.uk-transition-toggle:focus [class*='uk-transition-fade'], +.uk-transition-active.uk-active [class*='uk-transition-fade'] { opacity: 1; } + +/* + * Scale + * Note: Using `scale3d` for better image rendering + */ + +[class*='uk-transition-scale'] { opacity: 0; } + +.uk-transition-scale-up { transform: scale3d(1,1,1); } + +.uk-transition-scale-down { transform: scale3d($transition-scale,$transition-scale,1); } + +/* Show */ +.uk-transition-toggle:hover .uk-transition-scale-up, +.uk-transition-toggle.uk-hover .uk-transition-scale-up, +.uk-transition-toggle:focus .uk-transition-scale-up, +.uk-transition-active.uk-active .uk-transition-scale-up { + opacity: 1; + transform: scale3d($transition-scale,$transition-scale,1); +} + +.uk-transition-toggle:hover .uk-transition-scale-down, +.uk-transition-toggle.uk-hover .uk-transition-scale-down, +.uk-transition-toggle:focus .uk-transition-scale-down, +.uk-transition-active.uk-active .uk-transition-scale-down { + opacity: 1; + transform: scale3d(1,1,1); +} + +/* + * Slide + */ + +[class*='uk-transition-slide'] { opacity: 0; } + +.uk-transition-slide-top { transform: translateY(-100%); } +.uk-transition-slide-bottom { transform: translateY(100%); } +.uk-transition-slide-left { transform: translateX(-100%); } +.uk-transition-slide-right { transform: translateX(100%); } + +.uk-transition-slide-top-small { transform: translateY(-$transition-slide-small-translate); } +.uk-transition-slide-bottom-small { transform: translateY($transition-slide-small-translate); } +.uk-transition-slide-left-small { transform: translateX(-$transition-slide-small-translate); } +.uk-transition-slide-right-small { transform: translateX($transition-slide-small-translate); } + +.uk-transition-slide-top-medium { transform: translateY(-$transition-slide-medium-translate); } +.uk-transition-slide-bottom-medium { transform: translateY($transition-slide-medium-translate); } +.uk-transition-slide-left-medium { transform: translateX(-$transition-slide-medium-translate); } +.uk-transition-slide-right-medium { transform: translateX($transition-slide-medium-translate); } + +/* Show */ +.uk-transition-toggle:hover [class*='uk-transition-slide'], +.uk-transition-toggle.uk-hover [class*='uk-transition-slide'], +.uk-transition-toggle:focus [class*='uk-transition-slide'], +.uk-transition-active.uk-active [class*='uk-transition-slide'] { + opacity: 1; + transform: translateX(0) translateY(0); +} + + +/* Opacity modifier +========================================================================== */ + +.uk-transition-opaque { opacity: 1; } + + +/* Duration modifiers +========================================================================== */ + +.uk-transition-slow { transition-duration: $transition-slow-duration; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-transition-misc)) {@include hook-transition-misc();} + +// @mixin hook-transition-misc(){} diff --git a/_sass/_sass/uikit/components/utility.scss b/_sass/_sass/uikit/components/utility.scss new file mode 100644 index 00000000..2ac17776 --- /dev/null +++ b/_sass/_sass/uikit/components/utility.scss @@ -0,0 +1,570 @@ +// Name: Utility +// Description: Utilities collection +// +// Component: `uk-panel-*` +// `uk-clearfix` +// `uk-float-*` +// `uk-overflow-*` +// `uk-resize-*` +// `uk-display-*` +// `uk-inline-*` +// `uk-height-*` +// `uk-responsive-*` +// `uk-preserve-width` +// `uk-border-*` +// `uk-box-shadow-*` +// `uk-box-shadow-bottom` +// `uk-dropcap` +// `uk-leader` +// `uk-logo` +// `uk-svg` +// `uk-blend-*` +// `uk-transform-*` +// `uk-transform-origin-*` +// +// States: `uk-disabled` +// `uk-drag` +// `uk-dragover` +// `uk-preserve` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$panel-scrollable-height: 170px !default; +$panel-scrollable-padding: 10px !default; +$panel-scrollable-border-width: $global-border-width !default; +$panel-scrollable-border: $global-border !default; + +$height-small-height: 150px !default; +$height-medium-height: 300px !default; +$height-large-height: 450px !default; + +$border-rounded-border-radius: 5px !default; + +$box-shadow-duration: 0.1s !default; + +$box-shadow-bottom-height: 30px !default; +$box-shadow-bottom-border-radius: 100% !default; +$box-shadow-bottom-background: #444 !default; +$box-shadow-bottom-blur: 20px !default; + +$dropcap-margin-right: 10px !default; +$dropcap-font-size: (($global-line-height * 3) * 1em) !default; + +$leader-fill-content: '.' !default; +$leader-fill-margin-left: $global-small-gutter !default; + +$logo-font-size: $global-large-font-size !default; +$logo-font-family: $global-font-family !default; +$logo-color: $global-color !default; +$logo-hover-color: $global-color !default; + +$dragover-box-shadow: 0 0 20px rgba(100,100,100,0.3) !default; + + +/* ======================================================================== + Component: Utility + ========================================================================== */ + + +/* Panel + ========================================================================== */ + +.uk-panel { + position: relative; + box-sizing: border-box; +} + +/* + * Micro clearfix + */ + +.uk-panel::before, +.uk-panel::after { + content: ""; + display: table; +} + +.uk-panel::after { clear: both; } + +/* + * Remove margin from the last-child + */ + +.uk-panel > :last-child { margin-bottom: 0; } + + +/* + * Scrollable + */ + +.uk-panel-scrollable { + height: $panel-scrollable-height; + padding: $panel-scrollable-padding; + border: $panel-scrollable-border-width solid $panel-scrollable-border; + overflow: auto; + -webkit-overflow-scrolling: touch; + resize: both; + @if(mixin-exists(hook-panel-scrollable)) {@include hook-panel-scrollable();} +} + + +/* Clearfix + ========================================================================== */ + +/* + * 1. `table-cell` is used with `::before` because `table` creates a 1px gap when it becomes a flex item, only in Webkit + * 2. `table` is used again with `::after` because `clear` only works with block elements. + * Note: `display: block` with `overflow: hidden` is currently not working in the latest Safari + */ + +/* 1 */ +.uk-clearfix::before { + content: ""; + display: table-cell; +} + +/* 2 */ +.uk-clearfix::after { + content: ""; + display: table; + clear: both; +} + + +/* Float + ========================================================================== */ + +/* + * 1. Prevent content overflow + */ + +.uk-float-left { float: left; } +.uk-float-right { float: right; } + +/* 1 */ +[class*='uk-float-'] { max-width: 100%; } + + +/* Overfow + ========================================================================== */ + +.uk-overflow-hidden { overflow: hidden; } + +/* + * Enable scrollbars if content is clipped + * Note: Firefox ignores `padding-bottom` for the scrollable overflow https://bugzilla.mozilla.org/show_bug.cgi?id=748518 + */ + +.uk-overflow-auto { + overflow: auto; + -webkit-overflow-scrolling: touch; +} + +.uk-overflow-auto > :last-child { margin-bottom: 0; } + + +/* Resize + ========================================================================== */ + +.uk-resize { resize: both; } +.uk-resize-vertical { resize: vertical; } + + +/* Display + ========================================================================== */ + +.uk-display-block { display: block !important; } +.uk-display-inline { display: inline !important; } +.uk-display-inline-block { display: inline-block !important; } + + +/* Inline + ========================================================================== */ + +/* + * 1. Container fits its content + * 2. Create position context + * 3. Prevent content overflow + * 4. Behave like most inline-block elements + * 5. Force hardware acceleration without creating a new stacking context + * to fix 1px glitch when combined with overlays and transitions in Webkit + * 6. Clip child elements + */ + +[class*='uk-inline'] { + /* 1 */ + display: inline-block; + /* 2 */ + position: relative; + /* 3 */ + max-width: 100%; + /* 4 */ + vertical-align: middle; + /* 5 */ + -webkit-backface-visibility: hidden; +} + +.uk-inline-clip { + /* 6 */ + overflow: hidden; +} + + +/* Height + ========================================================================== */ + +[class*='uk-height'] { box-sizing: border-box; } + +/* + * Only works if parent element has a height set + */ + +.uk-height-1-1 { height: 100%; } + +/* + * Useful to create image teasers + */ + +.uk-height-viewport { min-height: 100vh; } + +/* + * Pixel + * Useful for `overflow: auto` + */ + +.uk-height-small { height: $height-small-height; } +.uk-height-medium { height: $height-medium-height; } +.uk-height-large { height: $height-large-height; } + +.uk-height-max-small { max-height: $height-small-height; } +.uk-height-max-medium { max-height: $height-medium-height; } +.uk-height-max-large { max-height: $height-large-height; } + + +/* Responsive objects + ========================================================================== */ + +/* + * Preserve original dimensions + * Because `img, `video`, `canvas` and `audio` are already responsive by default, see Base component + */ + +.uk-preserve-width, +.uk-preserve-width audio, +.uk-preserve-width canvas, +.uk-preserve-width img, +.uk-preserve-width svg, +.uk-preserve-width video { max-width: none; } + +/* + * Responsiveness + * Corrects `max-width` and `max-height` behavior if padding and border are used + */ + +.uk-responsive-width, +.uk-responsive-height { box-sizing: border-box; } + +/* + * 1. Set a maximum width. `important` needed to override `uk-preserve-width img` + * 2. Auto scale the height. Only needed if `height` attribute is present + */ + +.uk-responsive-width { + /* 1 */ + max-width: 100% !important; + /* 2 */ + height: auto; +} + +/* + * 1. Set a maximum height. Only works if the parent element has a fixed height + * 2. Auto scale the width. Only needed if `width` attribute is present + * 3. Reset max-width, which `img, `video`, `canvas` and `audio` already have by default + */ + +.uk-responsive-height { + /* 1 */ + max-height: 100%; + /* 2 */ + width: auto; + /* 3 */ + max-width: none; +} + + +/* Border + ========================================================================== */ + +.uk-border-circle { border-radius: 50%; } +.uk-border-rounded { border-radius: $border-rounded-border-radius; } + +/* + * Fix `overflow: hidden` to be ignored with border-radius and CSS transforms in Webkit + */ + +.uk-inline-clip[class*='uk-border-'] { -webkit-transform: translateZ(0); } + + +/* Box-shadow + ========================================================================== */ + +.uk-box-shadow-small { box-shadow: $global-small-box-shadow; } +.uk-box-shadow-medium { box-shadow: $global-medium-box-shadow; } +.uk-box-shadow-large { box-shadow: $global-large-box-shadow; } +.uk-box-shadow-xlarge { box-shadow: $global-xlarge-box-shadow; } + +/* + * Hover + */ + +[class*='uk-box-shadow-hover'] { transition: box-shadow $box-shadow-duration ease-in-out; } + +.uk-box-shadow-hover-small:hover { box-shadow: $global-small-box-shadow; } +.uk-box-shadow-hover-medium:hover { box-shadow: $global-medium-box-shadow; } +.uk-box-shadow-hover-large:hover { box-shadow: $global-large-box-shadow; } +.uk-box-shadow-hover-xlarge:hover { box-shadow: $global-xlarge-box-shadow; } + + +/* Box-shadow bottom + ========================================================================== */ + +/* + * 1. Set position. + * 2. Set style + * 3. Blur doesn't work on pseudo elements with negative `z-index` in Edge. + * Solved by using `before` and add position context to child elements. + */ + +@supports (filter: blur(0)) { + + .uk-box-shadow-bottom { + display: inline-block; + position: relative; + max-width: 100%; + vertical-align: middle; + } + + .uk-box-shadow-bottom::before { + content: ''; + /* 1 */ + position: absolute; + bottom: (-$box-shadow-bottom-height); + left: 0; + right: 0; + /* 2 */ + height: $box-shadow-bottom-height; + border-radius: $box-shadow-bottom-border-radius; + background: $box-shadow-bottom-background; + filter: blur($box-shadow-bottom-blur); + @if(mixin-exists(hook-box-shadow-bottom)) {@include hook-box-shadow-bottom();} + } + + /* 3 */ + .uk-box-shadow-bottom > * { position: relative; } + +} + + +/* Drop cap + ========================================================================== */ + +.uk-dropcap::first-letter, +.uk-dropcap > p:first-of-type::first-letter { + display: block; + margin-right: $dropcap-margin-right; + float: left; + font-size: $dropcap-font-size; + line-height: 1; + @if(mixin-exists(hook-dropcap)) {@include hook-dropcap();} +} + + +/* Leader + ========================================================================== */ + +.uk-leader { overflow: hidden; } + +/* + * 1. Place element in text flow + * 2. Never break into a new line + * 3. Get a string back with as many repeating characters to fill the container + * 4. Prevent wrapping. Overflowing characters will be clipped by the container + */ + +.uk-leader-fill::after { + /* 1 */ + display: inline-block; + margin-left: $leader-fill-margin-left; + /* 2 */ + width: 0; + /* 3 */ + content: attr(data-fill); + /* 4 */ + white-space: nowrap; + @if(mixin-exists(hook-leader)) {@include hook-leader();} +} + +/* + * Hide if media does not match + */ + +.uk-leader-fill.uk-leader-hide::after { display: none; } + +/* Pass fill character to JS */ +.var-leader-fill:before { content: $leader-fill-content; } + + +/* Logo + ========================================================================== */ + +/* + * 1. Required for `a` + */ + +.uk-logo { + font-size: $logo-font-size; + font-family: $logo-font-family; + color: $logo-color; + /* 1 */ + text-decoration: none; + @if(mixin-exists(hook-logo)) {@include hook-logo();} +} + +/* Hover + Focus */ +.uk-logo:hover, +.uk-logo:focus { + color: $logo-hover-color; + outline: none; + /* 1 */ + text-decoration: none; + @if(mixin-exists(hook-logo-hover)) {@include hook-logo-hover();} +} + +.uk-logo-inverse { display: none; } + + +/* SVG + ========================================================================== */ + +/* + * 1. Fill all SVG elements with the current text color if no `fill` attribute is set + * 2. Set the fill and stroke color of all SVG elements to the current text color + * 3. Fix for uppercase attribute names in Edge. Will be fixed in Windows 10 builds 16251+ + */ + +/* 1 */ +.uk-svg, +/* 2 */ +.uk-svg:not(.uk-preserve) [fill*='#']:not(.uk-preserve), +.uk-svg:not(.uk-preserve) [FILL*='#']:not(.uk-preserve) { fill: currentcolor; } // 3 +.uk-svg:not(.uk-preserve) [stroke*='#']:not(.uk-preserve), +.uk-svg:not(.uk-preserve) [STROKE*='#']:not(.uk-preserve) { stroke: currentcolor; } // 3 + +/* + * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835 + */ + +.uk-svg { transform: translate(0,0); } + + +/* Disabled State + ========================================================================== */ + +.uk-disabled { pointer-events: none; } + + +/* Drag State + ========================================================================== */ + +/* + * 1. Needed if moving over elements with have their own cursor on hover, e.g. links or buttons + * 2. Fix dragging over iframes + */ + +.uk-drag, +/* 1 */ +.uk-drag * { cursor: move; } + +/* 2 */ +.uk-drag iframe { pointer-events: none; } + + +/* Dragover State + ========================================================================== */ + +/* + * Create a box-shadow when dragging a file over the upload area + */ + +.uk-dragover { box-shadow: $dragover-box-shadow; } + + +/* Blend modes + ========================================================================== */ + +.uk-blend-multiply { mix-blend-mode: multiply; } +.uk-blend-screen { mix-blend-mode: screen; } +.uk-blend-overlay { mix-blend-mode: overlay; } +.uk-blend-darken { mix-blend-mode: darken; } +.uk-blend-lighten { mix-blend-mode: lighten; } +.uk-blend-color-dodge { mix-blend-mode: color-dodge; } +.uk-blend-color-burn { mix-blend-mode: color-burn; } +.uk-blend-hard-light { mix-blend-mode: hard-light; } +.uk-blend-soft-light { mix-blend-mode: soft-light; } +.uk-blend-difference { mix-blend-mode: difference; } +.uk-blend-exclusion { mix-blend-mode: exclusion; } +.uk-blend-hue { mix-blend-mode: hue; } +.uk-blend-saturation { mix-blend-mode: saturation; } +.uk-blend-color { mix-blend-mode: color; } +.uk-blend-luminosity { mix-blend-mode: luminosity; } + + +/* Transform +========================================================================== */ + +.uk-transform-center { transform: translate(-50%, -50%); } + + +/* Transform Origin +========================================================================== */ + +.uk-transform-origin-top-left { transform-origin: 0 0; } +.uk-transform-origin-top-center { transform-origin: 50% 0; } +.uk-transform-origin-top-right { transform-origin: 100% 0; } +.uk-transform-origin-center-left { transform-origin: 0 50%; } +.uk-transform-origin-center-right { transform-origin: 100% 50%; } +.uk-transform-origin-bottom-left { transform-origin: 0 100%; } +.uk-transform-origin-bottom-center { transform-origin: 50% 100%; } +.uk-transform-origin-bottom-right { transform-origin: 100% 100%; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-utility-misc)) {@include hook-utility-misc();} + +// @mixin hook-panel-scrollable(){} +// @mixin hook-box-shadow-bottom(){} +// @mixin hook-dropcap(){} +// @mixin hook-leader(){} +// @mixin hook-logo(){} +// @mixin hook-logo-hover(){} +// @mixin hook-utility-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-logo-color: $inverse-global-color !default; +$inverse-logo-hover-color: $inverse-global-color !default; + + + +// @mixin hook-inverse-dropcap(){} +// @mixin hook-inverse-leader(){} +// @mixin hook-inverse-logo(){} +// @mixin hook-inverse-logo-hover(){} diff --git a/_sass/_sass/uikit/components/variables.scss b/_sass/_sass/uikit/components/variables.scss new file mode 100644 index 00000000..a08406a0 --- /dev/null +++ b/_sass/_sass/uikit/components/variables.scss @@ -0,0 +1,117 @@ +// +// Component: Variables +// Description: Defines common values which are used across all components +// +// ======================================================================== + + +// Breakpoints +// ======================================================================== + +// Phone Portrait: Galaxy (360x640), iPhone 6 (375x667), iPhone 6+ (414x736) +// Phone Landscape: Galaxy (640x360), iPhone 6 (667x375), iPhone 6+ (736x414) +// Tablet Portrait: iPad (768x1024), Galaxy Tab (800x1280), +// Tablet Landscape: iPad (1024x768), iPad Pro (1024x1366), +// Desktop: Galaxy Tab (1280x800), iPad Pro (1366x1024) + +$breakpoint-small: 640px !default; // Phone landscape +$breakpoint-medium: 960px !default; // Tablet Landscape +$breakpoint-large: 1200px !default; // Desktop +$breakpoint-xlarge: 1600px !default; // Large Screens + +$breakpoint-xsmall-max: ($breakpoint-small - 1) !default; +$breakpoint-small-max: ($breakpoint-medium - 1) !default; +$breakpoint-medium-max: ($breakpoint-large - 1) !default; +$breakpoint-large-max: ($breakpoint-xlarge - 1) !default; + + +// Global variables +// ======================================================================== + +// +// Typography +// + +$global-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; +$global-font-size: 16px !default; +$global-line-height: 1.5 !default; // 24px + +$global-xxlarge-font-size: 2.625rem !default; // 42px +$global-xlarge-font-size: 2rem !default; // 32px +$global-large-font-size: 1.5rem !default; // 24px +$global-medium-font-size: 1.25rem !default; // 20px +$global-small-font-size: 0.875rem !default; // 14px + +// +// Colors +// + +$global-color: #666 !default; +$global-emphasis-color: #333 !default; +$global-muted-color: #999 !default; + +$global-link-color: #1e87f0 !default; +$global-link-hover-color: #0f6ecd !default; + +$global-inverse-color: #fff !default; + +// +// Backgrounds +// + +$global-background: #fff !default; + +$global-muted-background: #f8f8f8 !default; +$global-primary-background: #1e87f0 !default; +$global-secondary-background: #222 !default; + +$global-success-background: #32d296 !default; +$global-warning-background: #faa05a !default; +$global-danger-background: #f0506e !default; + +// +// Borders +// + +$global-border-width: 1px !default; +$global-border: #e5e5e5 !default; + +// +// Box-Shadows +// + +$global-small-box-shadow: 0 2px 8px rgba(0,0,0,0.08) !default; +$global-medium-box-shadow: 0 5px 15px rgba(0,0,0,0.08) !default; +$global-large-box-shadow: 0 14px 25px rgba(0,0,0,0.16) !default; +$global-xlarge-box-shadow: 0 28px 50px rgba(0,0,0,0.16) !default; + +// +// Spacings +// + +// Used in margin, section, list +$global-margin: 20px !default; +$global-small-margin: 10px !default; +$global-medium-margin: 40px !default; +$global-large-margin: 70px !default; +$global-xlarge-margin: 140px !default; + +// Used in grid, column, container, align, card, padding +$global-gutter: 30px !default; +$global-small-gutter: 15px !default; +$global-medium-gutter: 40px !default; +$global-large-gutter: 70px !default; + +// +// Controls +// + +$global-control-height: 40px !default; +$global-control-small-height: 30px !default; +$global-control-large-height: 55px !default; + +// +// Z-index +// + +$global-z-index: 1000 !default; \ No newline at end of file diff --git a/_sass/_sass/uikit/components/visibility.scss b/_sass/_sass/uikit/components/visibility.scss new file mode 100644 index 00000000..ee800a15 --- /dev/null +++ b/_sass/_sass/uikit/components/visibility.scss @@ -0,0 +1,151 @@ +// Name: Visibility +// Description: Utilities to show or hide content on breakpoints, hover or touch +// +// Component: `uk-hidden-*` +// `uk-visible-*` +// `uk-invisible` +// `uk-visible-toggle` +// `uk-hidden-hover` +// `uk-invisible-hover` +// `uk-hidden-touch` +// `uk-hidden-notouch` +// +// ======================================================================== + + +/* ======================================================================== + Component: Visibility + ========================================================================== */ + +/* + * Hidden + * `hidden` attribute also set here to make it stronger + */ + +[hidden], +.uk-hidden { display: none !important; } + +/* Phone landscape and bigger */ +@media (min-width: $breakpoint-small) { + + .uk-hidden\@s { display: none !important; } + +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-hidden\@m { display: none !important; } + +} + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + .uk-hidden\@l { display: none !important; } + +} + +/* Large screen and bigger */ +@media (min-width: $breakpoint-xlarge) { + + .uk-hidden\@xl { display: none !important; } + +} + +/* + * Visible + */ + +/* Phone portrait and smaller */ +@media (max-width: $breakpoint-xsmall-max) { + + .uk-visible\@s { display: none !important; } + +} + +/* Phone landscape and smaller */ +@media (max-width: $breakpoint-small-max) { + + .uk-visible\@m { display: none !important; } + +} + +/* Tablet landscape and smaller */ +@media (max-width: $breakpoint-medium-max) { + + .uk-visible\@l { display: none !important; } + +} + +/* Desktop and smaller */ +@media (max-width: $breakpoint-large-max) { + + .uk-visible\@xl { display: none !important; } + +} + + +/* Visibility + ========================================================================== */ + +.uk-invisible { visibility: hidden !important; } + + +/* Hover + ========================================================================== */ + +/* + * Hidden + * Can't use `display: hidden` because it's not focusable. This is accessible through keyboard. + */ + +.uk-visible-toggle:not(:hover):not(.uk-hover) .uk-hidden-hover:not(:focus) { + position: absolute !important; + width: 0 !important; + height: 0 !important; + padding: 0 !important; + margin: 0 !important; + overflow: hidden !important; +} + +/* + * Invisible + * Can't use `visibility: hidden` because it's not focusable. This is accessible through keyboard. + */ + +.uk-visible-toggle:not(:hover):not(.uk-hover) .uk-invisible-hover:not(:focus) { opacity: 0 !important; } + + +/* Touch + ========================================================================== */ + +/* + * Hide if primary pointing device has limited accuracy, e.g. a touch screen. + * Works on mobile browsers: Safari, Chrome and Android browser + */ + +@media (pointer: coarse) { + .uk-hidden-touch { display: none !important; } +} + +/* + * Hide if primary pointing device is accurate, e.g. mouse. + * 1. Fallback for IE11 and Firefox, because `pointer` is not supported + * 2. Reset if supported + */ + +/* 1 */ +.uk-hidden-notouch { display: none !important; } + +@media (pointer: coarse) { + .uk-hidden-notouch { display: block !important; } +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-visibility-misc)) {@include hook-visibility-misc();} + +// @mixin hook-visibility-misc(){} diff --git a/_sass/_sass/uikit/components/width.scss b/_sass/_sass/uikit/components/width.scss new file mode 100644 index 00000000..7f4a2cb5 --- /dev/null +++ b/_sass/_sass/uikit/components/width.scss @@ -0,0 +1,398 @@ +// Name: Width +// Description: Utilities for widths +// +// Component: `uk-child-width-*` +// `uk-width-*` +// +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$width-small-width: 150px !default; +$width-medium-width: 300px !default; +$width-large-width: 450px !default; +$width-xlarge-width: 600px !default; +$width-xxlarge-width: 750px !default; + + +/* ======================================================================== + Component: Width + ========================================================================== */ + + +/* Equal child widths + ========================================================================== */ + +[class*='uk-child-width'] > * { + box-sizing: border-box; + width: 100%; +} + +.uk-child-width-1-2 > * { width: 50%; } +.uk-child-width-1-3 > * { width: unquote('calc(100% * 1 / 3.001)'); } +.uk-child-width-1-4 > * { width: 25%; } +.uk-child-width-1-5 > * { width: 20%; } +.uk-child-width-1-6 > * { width: unquote('calc(100% * 1 / 6.001)'); } + +.uk-child-width-auto > * { width: auto; } + +/* + * Instead of 0, 1px is needed to make cell wrap into next row if predecessor is 100% wide + * and the grid gutter is 0 pixels wide + */ + +.uk-child-width-expand > * { width: 1px; } + +/* + * 1. Make `width: 1px` work, because according to the spec flex items won’t shrink + * below their minimum content size. To change this, set the min-width. + * Only needed for Firefox. All other browsers ignore this. + * + * 2. `width` is ignored when wrapping flex items in Safari + * https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items + */ + +.uk-child-width-expand > :not([class*='uk-width']) { + flex: 1; + /* 1 */ + min-width: 0; + /* 2 */ + flex-basis: 1px; +} + +/* Phone landscape and bigger */ +@media (min-width: $breakpoint-small) { + + .uk-child-width-1-1\@s > * { width: 100%; } + .uk-child-width-1-2\@s > * { width: 50%; } + .uk-child-width-1-3\@s > * { width: unquote('calc(100% * 1 / 3.001)'); } + .uk-child-width-1-4\@s > * { width: 25%; } + .uk-child-width-1-5\@s > * { width: 20%; } + .uk-child-width-1-6\@s > * { width: unquote('calc(100% * 1 / 6.001)'); } + + .uk-child-width-auto\@s > * { width: auto; } + .uk-child-width-expand\@s > * { width: 1px; } + + .uk-child-width-expand\@s > :not([class*='uk-width']) { + flex: 1; + min-width: 0; + flex-basis: 1px; + } + +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-child-width-1-1\@m > * { width: 100%; } + .uk-child-width-1-2\@m > * { width: 50%; } + .uk-child-width-1-3\@m > * { width: unquote('calc(100% * 1 / 3.001)'); } + .uk-child-width-1-4\@m > * { width: 25%; } + .uk-child-width-1-5\@m > * { width: 20%; } + .uk-child-width-1-6\@m > * { width: unquote('calc(100% * 1 / 6.001)'); } + + .uk-child-width-auto\@m > * { width: auto; } + .uk-child-width-expand\@m > * { width: 1px; } + + .uk-child-width-expand\@m > :not([class*='uk-width']) { + flex: 1; + min-width: 0; + flex-basis: 1px; + } + +} + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + .uk-child-width-1-1\@l > * { width: 100%; } + .uk-child-width-1-2\@l > * { width: 50%; } + .uk-child-width-1-3\@l > * { width: unquote('calc(100% * 1 / 3.001)'); } + .uk-child-width-1-4\@l > * { width: 25%; } + .uk-child-width-1-5\@l > * { width: 20%; } + .uk-child-width-1-6\@l > * { width: unquote('calc(100% * 1 / 6.001)'); } + + .uk-child-width-auto\@l > * { width: auto; } + .uk-child-width-expand\@l > * { width: 1px; } + + .uk-child-width-expand\@l > :not([class*='uk-width']) { + flex: 1; + min-width: 0; + flex-basis: 1px; + } + +} + +/* Large screen and bigger */ +@media (min-width: $breakpoint-xlarge) { + + .uk-child-width-1-1\@xl > * { width: 100%; } + .uk-child-width-1-2\@xl > * { width: 50%; } + .uk-child-width-1-3\@xl > * { width: unquote('calc(100% * 1 / 3.001)'); } + .uk-child-width-1-4\@xl > * { width: 25%; } + .uk-child-width-1-5\@xl > * { width: 20%; } + .uk-child-width-1-6\@xl > * { width: unquote('calc(100% * 1 / 6.001)'); } + + .uk-child-width-auto\@xl > * { width: auto; } + .uk-child-width-expand\@xl > * { width: 1px; } + + .uk-child-width-expand\@xl > :not([class*='uk-width']) { + flex: 1; + min-width: 0; + flex-basis: 1px; + } + +} + + +/* Single Widths + ========================================================================== */ + +/* + * 1. `max-width` is needed for the pixel-based classes + */ + +[class*='uk-width'] { + box-sizing: border-box; + width: 100%; + /* 1 */ + max-width: 100%; +} + +/* Halves */ +.uk-width-1-2 { width: 50%; } + +/* Thirds */ +.uk-width-1-3 { width: unquote('calc(100% * 1 / 3.001)'); } +.uk-width-2-3 { width: unquote('calc(100% * 2 / 3.001)'); } + +/* Quarters */ +.uk-width-1-4 { width: 25%; } +.uk-width-3-4 { width: 75%; } + +/* Fifths */ +.uk-width-1-5 { width: 20%; } +.uk-width-2-5 { width: 40%; } +.uk-width-3-5 { width: 60%; } +.uk-width-4-5 { width: 80%; } + +/* Sixths */ +.uk-width-1-6 { width: unquote('calc(100% * 1 / 6.001)'); } +.uk-width-5-6 { width: unquote('calc(100% * 5 / 6.001)'); } + +/* Pixel */ +.uk-width-small { width: $width-small-width; } +.uk-width-medium { width: $width-medium-width; } +.uk-width-large { width: $width-large-width; } +.uk-width-xlarge { width: $width-xlarge-width; } +.uk-width-xxlarge { width: $width-xxlarge-width; } + +/* Auto */ +.uk-width-auto { width: auto; } + +/* Expand */ +.uk-width-expand { + width: 1px; + flex: 1; + min-width: 0; + flex-basis: 1px; +} + +/* Phone landscape and bigger */ +@media (min-width: $breakpoint-small) { + + /* Whole */ + .uk-width-1-1\@s { width: 100%; } + + /* Halves */ + .uk-width-1-2\@s { width: 50%; } + + /* Thirds */ + .uk-width-1-3\@s { width: unquote('calc(100% * 1 / 3.001)'); } + .uk-width-2-3\@s { width: unquote('calc(100% * 2 / 3.001)'); } + + /* Quarters */ + .uk-width-1-4\@s { width: 25%; } + .uk-width-3-4\@s { width: 75%; } + + /* Fifths */ + .uk-width-1-5\@s { width: 20%; } + .uk-width-2-5\@s { width: 40%; } + .uk-width-3-5\@s { width: 60%; } + .uk-width-4-5\@s { width: 80%; } + + /* Sixths */ + .uk-width-1-6\@s { width: unquote('calc(100% * 1 / 6.001)'); } + .uk-width-5-6\@s { width: unquote('calc(100% * 5 / 6.001)'); } + + /* Pixel */ + .uk-width-small\@s { width: $width-small-width; } + .uk-width-medium\@s { width: $width-medium-width; } + .uk-width-large\@s { width: $width-large-width; } + .uk-width-xlarge\@s { width: $width-xlarge-width; } + .uk-width-xxlarge\@s { width: $width-xxlarge-width; } + + /* Auto */ + .uk-width-auto\@s { width: auto; } + + /* Expand */ + .uk-width-expand\@s { + width: 1px; + flex: 1; + min-width: 0; + flex-basis: 1px; + } + +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + /* Whole */ + .uk-width-1-1\@m { width: 100%; } + + /* Halves */ + .uk-width-1-2\@m { width: 50%; } + + /* Thirds */ + .uk-width-1-3\@m { width: unquote('calc(100% * 1 / 3.001)'); } + .uk-width-2-3\@m { width: unquote('calc(100% * 2 / 3.001)'); } + + /* Quarters */ + .uk-width-1-4\@m { width: 25%; } + .uk-width-3-4\@m { width: 75%; } + + /* Fifths */ + .uk-width-1-5\@m { width: 20%; } + .uk-width-2-5\@m { width: 40%; } + .uk-width-3-5\@m { width: 60%; } + .uk-width-4-5\@m { width: 80%; } + + /* Sixths */ + .uk-width-1-6\@m { width: unquote('calc(100% * 1 / 6.001)'); } + .uk-width-5-6\@m { width: unquote('calc(100% * 5 / 6.001)'); } + + /* Pixel */ + .uk-width-small\@m { width: $width-small-width; } + .uk-width-medium\@m { width: $width-medium-width; } + .uk-width-large\@m { width: $width-large-width; } + .uk-width-xlarge\@m { width: $width-xlarge-width; } + .uk-width-xxlarge\@m { width: $width-xxlarge-width; } + + /* Auto */ + .uk-width-auto\@m { width: auto; } + + /* Expand */ + .uk-width-expand\@m { + width: 1px; + flex: 1; + min-width: 0; + flex-basis: 1px; + } + +} + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + /* Whole */ + .uk-width-1-1\@l { width: 100%; } + + /* Halves */ + .uk-width-1-2\@l { width: 50%; } + + /* Thirds */ + .uk-width-1-3\@l { width: unquote('calc(100% * 1 / 3.001)'); } + .uk-width-2-3\@l { width: unquote('calc(100% * 2 / 3.001)'); } + + /* Quarters */ + .uk-width-1-4\@l { width: 25%; } + .uk-width-3-4\@l { width: 75%; } + + /* Fifths */ + .uk-width-1-5\@l { width: 20%; } + .uk-width-2-5\@l { width: 40%; } + .uk-width-3-5\@l { width: 60%; } + .uk-width-4-5\@l { width: 80%; } + + /* Sixths */ + .uk-width-1-6\@l { width: unquote('calc(100% * 1 / 6.001)'); } + .uk-width-5-6\@l { width: unquote('calc(100% * 5 / 6.001)'); } + + /* Pixel */ + .uk-width-small\@l { width: $width-small-width; } + .uk-width-medium\@l { width: $width-medium-width; } + .uk-width-large\@l { width: $width-large-width; } + .uk-width-xlarge\@l { width: $width-xlarge-width; } + .uk-width-xxlarge\@l { width: $width-xxlarge-width; } + + /* Auto */ + .uk-width-auto\@l { width: auto; } + + /* Expand */ + .uk-width-expand\@l { + width: 1px; + flex: 1; + min-width: 0; + flex-basis: 1px; + } + +} + +/* Large screen and bigger */ +@media (min-width: $breakpoint-xlarge) { + + /* Whole */ + .uk-width-1-1\@xl { width: 100%; } + + /* Halves */ + .uk-width-1-2\@xl { width: 50%; } + + /* Thirds */ + .uk-width-1-3\@xl { width: unquote('calc(100% * 1 / 3.001)'); } + .uk-width-2-3\@xl { width: unquote('calc(100% * 2 / 3.001)'); } + + /* Quarters */ + .uk-width-1-4\@xl { width: 25%; } + .uk-width-3-4\@xl { width: 75%; } + + /* Fifths */ + .uk-width-1-5\@xl { width: 20%; } + .uk-width-2-5\@xl { width: 40%; } + .uk-width-3-5\@xl { width: 60%; } + .uk-width-4-5\@xl { width: 80%; } + + /* Sixths */ + .uk-width-1-6\@xl { width: unquote('calc(100% * 1 / 6.001)'); } + .uk-width-5-6\@xl { width: unquote('calc(100% * 5 / 6.001)'); } + + /* Pixel */ + .uk-width-small\@xl { width: $width-small-width; } + .uk-width-medium\@xl { width: $width-medium-width; } + .uk-width-large\@xl { width: $width-large-width; } + .uk-width-xlarge\@xl { width: $width-xlarge-width; } + .uk-width-xxlarge\@xl { width: $width-xxlarge-width; } + + /* Auto */ + .uk-width-auto\@xl { width: auto; } + + /* Expand */ + .uk-width-expand\@xl { + width: 1px; + flex: 1; + min-width: 0; + flex-basis: 1px; + } + +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-width-misc)) {@include hook-width-misc();} + +// @mixin hook-width-misc(){} diff --git a/_sass/_sass/uikit/mixins-theme.scss b/_sass/_sass/uikit/mixins-theme.scss new file mode 100644 index 00000000..993cf209 --- /dev/null +++ b/_sass/_sass/uikit/mixins-theme.scss @@ -0,0 +1,2033 @@ +@mixin hook-accordion(){} +@mixin hook-accordion-item(){} +@mixin hook-accordion-title(){ + + overflow: hidden; + + &::after { + content: ""; + width: ($accordion-title-line-height * 1em); + height: ($accordion-title-line-height * 1em); + float: right; + @include svg-fill($internal-accordion-close-image, "#000", $accordion-icon-color); + background-repeat: no-repeat; + background-position: 50% 50%; + } + + .uk-open > &::after { @include svg-fill($internal-accordion-open-image, "#000", $accordion-icon-color); } + +} +@mixin hook-accordion-title-hover(){} +@mixin hook-accordion-content(){} +@mixin hook-accordion-misc(){} +@mixin hook-inverse-accordion-item(){} +@mixin hook-inverse-accordion-title(){} +@mixin hook-inverse-accordion-title-hover(){} +@mixin hook-inverse-component-accordion(){ + + .uk-accordion-title::after { @include svg-fill($internal-accordion-close-image, "#000", $inverse-global-color); } + + .uk-open > .uk-accordion-title::after { @include svg-fill($internal-accordion-open-image, "#000", $inverse-global-color); } + +} +@mixin hook-align-misc(){} +@mixin hook-alert(){} +@mixin hook-alert-close(){ + color: inherit; + opacity: $alert-close-opacity; +} +@mixin hook-alert-close-hover(){ + color: inherit; + opacity: $alert-close-hover-opacity; +} +@mixin hook-alert-primary(){} +@mixin hook-alert-success(){} +@mixin hook-alert-warning(){} +@mixin hook-alert-danger(){} +@mixin hook-alert-misc(){ + + /* + * Content + */ + + .uk-alert h1, + .uk-alert h2, + .uk-alert h3, + .uk-alert h4, + .uk-alert h5, + .uk-alert h6 { color: inherit; } + + .uk-alert a:not([class]) { + color: inherit; + text-decoration: underline; + } + + .uk-alert a:not([class]):hover { + color: inherit; + text-decoration: underline; + } + +} +@mixin hook-article(){} +@mixin hook-article-adjacent(){} +@mixin hook-article-title(){} +@mixin hook-article-meta(){ + + a { color: $article-meta-link-color; } + + a:hover { + color: $article-meta-link-hover-color; + text-decoration: none; + } + +} +@mixin hook-article-misc(){} +@mixin hook-inverse-article-title(){} +@mixin hook-inverse-article-meta(){} +@mixin hook-inverse-component-article(){ + + .uk-article-title { + @if(mixin-exists(hook-inverse-article-title)) {@include hook-inverse-article-title();} + } + + .uk-article-meta { + color: $inverse-article-meta-color; + @if(mixin-exists(hook-inverse-article-meta)) {@include hook-inverse-article-meta();} + } + +} +@mixin hook-animation-misc(){} +@mixin hook-background-misc(){} +@mixin hook-badge(){} +@mixin hook-badge-hover(){} +@mixin hook-badge-misc(){} +@mixin hook-inverse-badge(){} +@mixin hook-inverse-badge-hover(){} +@mixin hook-inverse-component-badge(){ + + .uk-badge { + background-color: $inverse-badge-background; + color: $inverse-badge-color; + @if(mixin-exists(hook-inverse-badge)) {@include hook-inverse-badge();} + } + + .uk-badge:hover, + .uk-badge:focus { + color: $inverse-badge-hover-color; + @if(mixin-exists(hook-inverse-badge-hover)) {@include hook-inverse-badge-hover();} + } + +} +@mixin hook-base-body(){} +@mixin hook-base-link(){} +@mixin hook-base-link-hover(){} +@mixin hook-base-code(){ + padding: $base-code-padding-vertical $base-code-padding-horizontal; + background: $base-code-background; +} +@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(){ + color: $base-blockquote-color; +} +@mixin hook-base-blockquote-footer(){ + + color: $base-blockquote-footer-color; + + &::before { content: "— "; } + +} +@mixin hook-base-pre(){ + padding: $base-pre-padding; + border: $base-pre-border-width solid $base-pre-border; + border-radius: $base-pre-border-radius; + background: $base-pre-background; +} +@mixin hook-base-misc(){} +@mixin hook-inverse-base-link(){} +@mixin hook-inverse-base-link-hover(){} +@mixin hook-inverse-base-code(){ + background: $inverse-global-muted-background; +} +@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(){ color: $inverse-base-blockquote-color; } +@mixin hook-inverse-base-blockquote-footer(){ color: $inverse-base-blockquote-footer-color; } +@mixin hook-inverse-base-hr(){} +@mixin hook-inverse-component-base(){ + + color: $inverse-base-color; + + // Base + // ======================================================================== + + // + // Link + // + + a, + .uk-link { + color: $inverse-base-link-color; + @if(mixin-exists(hook-inverse-base-link)) {@include hook-inverse-base-link();} + } + + a:hover, + .uk-link:hover { + color: $inverse-base-link-hover-color; + @if(mixin-exists(hook-inverse-base-link-hover)) {@include hook-inverse-base-link-hover();} + } + + // + // Code + // + + :not(pre) > code, + :not(pre) > kbd, + :not(pre) > samp { + color: $inverse-base-code-color; + @if(mixin-exists(hook-inverse-base-code)) {@include hook-inverse-base-code();} + } + + // + // Emphasize + // + + em { color: $inverse-base-em-color; } + + // + // Headings + // + + h1, .uk-h1, + h2, .uk-h2, + h3, .uk-h3, + h4, .uk-h4, + h5, .uk-h5, + h6, .uk-h6 { + color: $inverse-base-heading-color; + @if(mixin-exists(hook-inverse-base-heading)) {@include hook-inverse-base-heading();} + } + + h1, .uk-h1 { + @if(mixin-exists(hook-inverse-base-h1)) {@include hook-inverse-base-h1();} + } + + h2, .uk-h2 { + @if(mixin-exists(hook-inverse-base-h2)) {@include hook-inverse-base-h2();} + } + + h3, .uk-h3 { + @if(mixin-exists(hook-inverse-base-h3)) {@include hook-inverse-base-h3();} + } + + h4, .uk-h4 { + @if(mixin-exists(hook-inverse-base-h4)) {@include hook-inverse-base-h4();} + } + + h5, .uk-h5 { + @if(mixin-exists(hook-inverse-base-h5)) {@include hook-inverse-base-h5();} + } + + h6, .uk-h6 { + @if(mixin-exists(hook-inverse-base-h6)) {@include hook-inverse-base-h6();} + } + + // + // Blockquotes + // + + blockquote { + @if(mixin-exists(hook-inverse-base-blockquote)) {@include hook-inverse-base-blockquote();} + } + + blockquote footer { + @if(mixin-exists(hook-inverse-base-blockquote-footer)) {@include hook-inverse-base-blockquote-footer();} + } + + // + // Horizontal rules + // + + hr, .uk-hr { + border-top-color: $inverse-base-hr-border; + @if(mixin-exists(hook-inverse-base-hr)) {@include hook-inverse-base-hr();} + } + +} +@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(){} +@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(){} +@mixin hook-inverse-component-breadcrumb(){ + + .uk-breadcrumb > * > * { + color: $inverse-breadcrumb-item-color; + @if(mixin-exists(hook-inverse-breadcrumb-item)) {@include hook-inverse-breadcrumb-item();} + } + + .uk-breadcrumb > * > :hover, + .uk-breadcrumb > * > :focus { + color: $inverse-breadcrumb-item-hover-color; + @if(mixin-exists(hook-inverse-breadcrumb-item-hover)) {@include hook-inverse-breadcrumb-item-hover();} + } + + + .uk-breadcrumb > .uk-disabled > * { + @if(mixin-exists(hook-inverse-breadcrumb-item-disabled)) {@include hook-inverse-breadcrumb-item-disabled();} + } + + .uk-breadcrumb > :last-child > * { + color: $inverse-breadcrumb-item-active-color; + @if(mixin-exists(hook-inverse-breadcrumb-item-active)) {@include hook-inverse-breadcrumb-item-active();} + } + + // + // Divider + // + + .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before { + color: $inverse-breadcrumb-divider-color; + @if(mixin-exists(hook-inverse-breadcrumb-divider)) {@include hook-inverse-breadcrumb-divider();} + } + +} +@mixin hook-button(){ + text-transform: $button-text-transform; + transition: 0.1s ease-in-out; + transition-property: color, background-color, border-color; +} +@mixin hook-button-hover(){} +@mixin hook-button-focus(){} +@mixin hook-button-active(){} +@mixin hook-button-default(){ border: $button-border-width solid $button-default-border; } +@mixin hook-button-default-hover(){ border-color: $button-default-hover-border; } +@mixin hook-button-default-active(){ border-color: $button-default-active-border; } +@mixin hook-button-primary(){ border: $button-border-width solid transparent; } +@mixin hook-button-primary-hover(){} +@mixin hook-button-primary-active(){} +@mixin hook-button-secondary(){ border: $button-border-width solid transparent; } +@mixin hook-button-secondary-hover(){} +@mixin hook-button-secondary-active(){} +@mixin hook-button-danger(){ border: $button-border-width solid transparent; } +@mixin hook-button-danger-hover(){} +@mixin hook-button-danger-active(){} +@mixin hook-button-disabled(){ border-color: $button-disabled-border; } +@mixin hook-button-small(){} +@mixin hook-button-large(){} +@mixin hook-button-text(){ + + position: relative; + + &::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + right: 100%; + border-bottom: $button-text-border-width solid $button-text-border; + transition: right 0.3s ease-out; + } + +} +@mixin hook-button-text-hover(){ + + &::before { right: 0; } + +} +@mixin hook-button-text-disabled(){ + + &::before { display: none; } + +} +@mixin hook-button-link(){} +@mixin hook-button-misc(){ + + /* Group + ========================================================================== */ + + /* + * Collapse border + */ + + .uk-button-group > .uk-button:nth-child(n+2), + .uk-button-group > div:nth-child(n+2) .uk-button { margin-left: (-$button-border-width); } + + /* + * Create position context to superimpose the successor elements border + * Known issue: If you use an `a` element as button and an icon inside, + * the active state will not work if you click the icon inside the button + * Workaround: Just use a `button` or `input` element as button + */ + + .uk-button-group .uk-button:hover, + .uk-button-group .uk-button:focus, + .uk-button-group .uk-button:active, + .uk-button-group .uk-button.uk-active { + position: relative; + z-index: 1; + } + +} +@mixin hook-inverse-button-default(){ border-color: $inverse-global-color; } +@mixin hook-inverse-button-default-hover(){ border-color: $inverse-global-emphasis-color; } +@mixin hook-inverse-button-default-active(){ border-color: $inverse-global-emphasis-color; } +@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(){ + &::before { border-bottom-color: $inverse-global-emphasis-color; } +} +@mixin hook-inverse-button-text-hover(){} +@mixin hook-inverse-button-text-disabled(){} +@mixin hook-inverse-button-link(){} +@mixin hook-inverse-component-button(){ + + // + // Default + // + + .uk-button-default { + background-color: $inverse-button-default-background; + color: $inverse-button-default-color; + @if(mixin-exists(hook-inverse-button-default)) {@include hook-inverse-button-default();} + } + + .uk-button-default:hover, + .uk-button-default:focus { + background-color: $inverse-button-default-hover-background; + color: $inverse-button-default-hover-color; + @if(mixin-exists(hook-inverse-button-default-hover)) {@include hook-inverse-button-default-hover();} + } + + .uk-button-default:active, + .uk-button-default.uk-active { + background-color: $inverse-button-default-active-background; + color: $inverse-button-default-active-color; + @if(mixin-exists(hook-inverse-button-default-active)) {@include hook-inverse-button-default-active();} + } + + // + // Primary + // + + .uk-button-primary { + background-color: $inverse-button-primary-background; + color: $inverse-button-primary-color; + @if(mixin-exists(hook-inverse-button-primary)) {@include hook-inverse-button-primary();} + } + + .uk-button-primary:hover, + .uk-button-primary:focus { + background-color: $inverse-button-primary-hover-background; + color: $inverse-button-primary-hover-color; + @if(mixin-exists(hook-inverse-button-primary-hover)) {@include hook-inverse-button-primary-hover();} + } + + .uk-button-primary:active, + .uk-button-primary.uk-active { + background-color: $inverse-button-primary-active-background; + color: $inverse-button-primary-active-color; + @if(mixin-exists(hook-inverse-button-primary-active)) {@include hook-inverse-button-primary-active();} + } + + // + // Secondary + // + + .uk-button-secondary { + background-color: $inverse-button-secondary-background; + color: $inverse-button-secondary-color; + @if(mixin-exists(hook-inverse-button-secondary)) {@include hook-inverse-button-secondary();} + } + + .uk-button-secondary:hover, + .uk-button-secondary:focus { + background-color: $inverse-button-secondary-hover-background; + color: $inverse-button-secondary-hover-color; + @if(mixin-exists(hook-inverse-button-secondary-hover)) {@include hook-inverse-button-secondary-hover();} + } + + .uk-button-secondary:active, + .uk-button-secondary.uk-active { + background-color: $inverse-button-secondary-active-background; + color: $inverse-button-secondary-active-color; + @if(mixin-exists(hook-inverse-button-secondary-active)) {@include hook-inverse-button-secondary-active();} + } + + // + // Text + // + + .uk-button-text { + color: $inverse-button-text-color; + @if(mixin-exists(hook-inverse-button-text)) {@include hook-inverse-button-text();} + } + + .uk-button-text:hover, + .uk-button-text:focus { + color: $inverse-button-text-hover-color; + @if(mixin-exists(hook-inverse-button-text-hover)) {@include hook-inverse-button-text-hover();} + } + + .uk-button-text:disabled { + color: $inverse-button-text-disabled-color; + @if(mixin-exists(hook-inverse-button-text-disabled)) {@include hook-inverse-button-text-disabled();} + } + + // + // Link + // + + .uk-button-link { + color: $inverse-button-link-color; + @if(mixin-exists(hook-inverse-button-link)) {@include hook-inverse-button-link();} + } + + .uk-button-link:hover, + .uk-button-link:focus { color: $inverse-button-link-hover-color; } + + +} +@mixin hook-card(){ transition: box-shadow 0.1s ease-in-out; } +@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(){ box-shadow: $card-hover-box-shadow; } +@mixin hook-card-default(){ box-shadow: $card-default-box-shadow; } +@mixin hook-card-default-title(){} +@mixin hook-card-default-hover(){ box-shadow: $card-default-hover-box-shadow; } +@mixin hook-card-default-header(){ border-bottom: $card-default-header-border-width solid $card-default-header-border; } +@mixin hook-card-default-footer(){ border-top: $card-default-footer-border-width solid $card-default-footer-border; } +@mixin hook-card-primary(){ box-shadow: $card-primary-box-shadow; } +@mixin hook-card-primary-title(){} +@mixin hook-card-primary-hover(){ box-shadow: $card-primary-hover-box-shadow; } +@mixin hook-card-secondary(){ box-shadow: $card-secondary-box-shadow; } +@mixin hook-card-secondary-title(){} +@mixin hook-card-secondary-hover(){ box-shadow: $card-secondary-hover-box-shadow; } +@mixin hook-card-misc(){ + + /* + * Default + */ + + .uk-card-body .uk-nav-default { margin: (-$card-body-padding-vertical + 15px) (-$card-body-padding-horizontal); } + .uk-card-title + .uk-nav-default { margin-top: 0; } + + .uk-card-body .uk-nav-default > li > a, + .uk-card-body .uk-nav-default .uk-nav-header, + .uk-card-body .uk-nav-default .uk-nav-divider { + padding-left: $card-body-padding-horizontal; + padding-right: $card-body-padding-horizontal; + } + + .uk-card-body .uk-nav-default .uk-nav-sub { padding-left: $nav-sublist-deeper-padding-left + $card-body-padding-horizontal; } + + + /* Desktop and bigger */ + @media (min-width: $breakpoint-large) { + + .uk-card-body .uk-nav-default { margin: (-$card-body-padding-vertical-l + 15px) (-$card-body-padding-horizontal-l); } + .uk-card-title + .uk-nav-default { margin-top: 0; } + + .uk-card-body .uk-nav-default > li > a, + .uk-card-body .uk-nav-default .uk-nav-header, + .uk-card-body .uk-nav-default .uk-nav-divider { + padding-left: $card-body-padding-horizontal-l; + padding-right: $card-body-padding-horizontal-l; + } + + .uk-card-body .uk-nav-default .uk-nav-sub { padding-left: $nav-sublist-deeper-padding-left + $card-body-padding-horizontal-l; } + + } + + /* + * Small + */ + + .uk-card-small .uk-nav-default { margin: (-$card-small-body-padding-vertical + 15px) (-$card-small-body-padding-horizontal); } + .uk-card-small .uk-card-title + .uk-nav-default { margin-top: 0; } + + .uk-card-small .uk-nav-default > li > a, + .uk-card-small .uk-nav-default .uk-nav-header, + .uk-card-small .uk-nav-default .uk-nav-divider { + padding-left: $card-small-body-padding-horizontal; + padding-right: $card-small-body-padding-horizontal; + } + + .uk-card-small .uk-nav-default .uk-nav-sub { padding-left: $nav-sublist-deeper-padding-left + $card-small-body-padding-horizontal; } + + /* + * Large + */ + + /* Desktop and bigger */ + @media (min-width: $breakpoint-large) { + + .uk-card-large .uk-nav-default { margin: (-$card-large-body-padding-vertical-l + 15px) (-$card-large-body-padding-horizontal-l); } + .uk-card-large .uk-card-title + .uk-nav-default { margin-top: 0; } + + } + +} +@mixin hook-close(){ + transition: 0.1s ease-in-out; + transition-property: color, opacity; +} +@mixin hook-close-hover(){} +@mixin hook-close-misc(){} +@mixin hook-inverse-close(){} +@mixin hook-inverse-close-hover(){} +@mixin hook-inverse-component-close(){ + + .uk-close { + color: $inverse-close-color; + @if(mixin-exists(hook-inverse-close)) {@include hook-inverse-close();} + } + + .uk-close:hover, + .uk-close:focus { + color: $inverse-close-hover-color; + @if(mixin-exists(hook-inverse-close-hover)) {@include hook-inverse-close-hover();} + } + +} +@mixin hook-column-misc(){} +@mixin hook-inverse-component-column(){ + + .uk-column-divider { column-rule-color: $inverse-column-divider-rule-color; } + +} +@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(){ + padding: $comment-primary-padding; + background-color: $comment-primary-background; +} +@mixin hook-comment-misc(){} +@mixin hook-container-misc(){} +@mixin hook-countdown(){} +@mixin hook-countdown-item(){} +@mixin hook-countdown-number(){} +@mixin hook-countdown-separator(){} +@mixin hook-countdown-label(){} +@mixin hook-countdown-misc(){} +@mixin hook-inverse-countdown-item(){} +@mixin hook-inverse-countdown-number(){} +@mixin hook-inverse-countdown-separator(){} +@mixin hook-inverse-countdown-label(){} +@mixin hook-inverse-component-countdown(){ + + .uk-countdown-number, + .uk-countdown-separator { + @if(mixin-exists(hook-inverse-countdown-item)) {@include hook-inverse-countdown-item();} + } + + .uk-countdown-number { + @if(mixin-exists(hook-inverse-countdown-number)) {@include hook-inverse-countdown-number();} + } + + .uk-countdown-separator { + @if(mixin-exists(hook-inverse-countdown-separator)) {@include hook-inverse-countdown-separator();} + } + + .uk-countdown-label { + @if(mixin-exists(hook-inverse-countdown-label)) {@include hook-inverse-countdown-label();} + } + +} +@mixin hook-cover-misc(){} +@mixin hook-description-list-term(){ + font-size: $description-list-term-font-size; + font-weight: $description-list-term-font-weight; + text-transform: $description-list-term-text-transform; +} +@mixin hook-description-list-description(){} +@mixin hook-description-list-divider-term(){} +@mixin hook-description-list-misc(){} +@mixin svg-fill($src, $color-default, $color-new, $property: background-image){ + + $escape-color-default: escape($color-default) !default; + $escape-color-new: escape("#{$color-new}") !default; + + $data-uri: data-uri('image/svg+xml;charset=UTF-8', "#{$src}") !default; + $replace-src: replace("#{$data-uri}", "#{$escape-color-default}", "#{$escape-color-new}", "g") !default; + + #{$property}: unquote($replace-src); +} +@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(){} +@mixin hook-inverse-divider-icon(){} +@mixin hook-inverse-divider-icon-line(){} +@mixin hook-inverse-divider-small(){} +@mixin hook-inverse-component-divider(){ + + .uk-divider-icon { + @include svg-fill($internal-divider-icon-image, "#000", $inverse-divider-icon-color); + @if(mixin-exists(hook-inverse-divider-icon)) {@include hook-inverse-divider-icon();} + } + + .uk-divider-icon::before, + .uk-divider-icon::after { + border-bottom-color: $inverse-divider-icon-line-border; + @if(mixin-exists(hook-inverse-divider-icon-line)) {@include hook-inverse-divider-icon-line();} + } + + .uk-divider-small::after { + border-top-color: $inverse-divider-small-border; + @if(mixin-exists(hook-inverse-divider-small)) {@include hook-inverse-divider-small();} + } + +} +@mixin hook-dotnav(){} +@mixin hook-dotnav-item(){ + border: $dotnav-item-border-width solid $dotnav-item-border; + transition: 0.2s ease-in-out; + transition-property: background-color, border-color; +} +@mixin hook-dotnav-item-hover(){ border-color: $dotnav-item-hover-border; } +@mixin hook-dotnav-item-onclick(){ border-color: $dotnav-item-onclick-border; } +@mixin hook-dotnav-item-active(){ border-color: $dotnav-item-active-border; } +@mixin hook-dotnav-misc(){} +@mixin hook-inverse-dotnav-item(){ border-color: rgba($inverse-global-color, 0.9); } +@mixin hook-inverse-dotnav-item-hover(){ border-color: transparent; } +@mixin hook-inverse-dotnav-item-onclick(){ border-color: transparent; } +@mixin hook-inverse-dotnav-item-active(){ border-color: transparent; } +@mixin hook-inverse-component-dotnav(){ + + .uk-dotnav > * > * { + background-color: $inverse-dotnav-item-background; + @if(mixin-exists(hook-inverse-dotnav-item)) {@include hook-inverse-dotnav-item();} + } + + .uk-dotnav > * > :hover, + .uk-dotnav > * > :focus { + background-color: $inverse-dotnav-item-hover-background; + @if(mixin-exists(hook-inverse-dotnav-item-hover)) {@include hook-inverse-dotnav-item-hover();} + } + + .uk-dotnav > * > :active { + background-color: $inverse-dotnav-item-onclick-background; + @if(mixin-exists(hook-inverse-dotnav-item-onclick)) {@include hook-inverse-dotnav-item-onclick();} + } + + .uk-dotnav > .uk-active > * { + background-color: $inverse-dotnav-item-active-background; + @if(mixin-exists(hook-inverse-dotnav-item-active)) {@include hook-inverse-dotnav-item-active();} + } + +} +@mixin hook-drop-misc(){} +@mixin hook-dropdown(){ box-shadow: $dropdown-box-shadow; } +@mixin hook-dropdown-nav(){ font-size: $dropdown-nav-font-size; } +@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(){} +@mixin hook-flex-misc(){} +@mixin hook-form-range(){} +@mixin hook-form-range-thumb(){ border: $form-range-thumb-border-width solid $form-range-thumb-border; } +@mixin hook-form-range-track(){ border-radius: $form-range-track-border-radius; } +@mixin hook-form-range-track-focus(){} +@mixin hook-form-range-misc(){} +@mixin hook-form(){ + border: $form-border-width solid $form-border; + transition: 0.2s ease-in-out; + transition-property: color, background-color, border; +} +@mixin hook-form-single-line(){} +@mixin hook-form-multi-line(){} +@mixin hook-form-focus(){ border-color: $form-focus-border; } +@mixin hook-form-disabled(){ border-color: $form-disabled-border; } +@mixin hook-form-danger(){ border-color: $form-danger-border; } +@mixin hook-form-success(){ border-color: $form-success-border; } +@mixin hook-form-blank(){ border-color: transparent; } +@mixin hook-form-blank-focus(){ + border-color: $form-blank-focus-border; + border-style: $form-blank-focus-border-style; +} +@mixin hook-form-radio(){ + border: $form-radio-border-width solid $form-radio-border; + transition: 0.2s ease-in-out; + transition-property: background-color, border; +} +@mixin hook-form-radio-focus(){ border-color: $form-radio-focus-border; } +@mixin hook-form-radio-checked(){ border-color: $form-radio-checked-border; } +@mixin hook-form-radio-checked-focus(){} +@mixin hook-form-radio-disabled(){ border-color: $form-radio-disabled-border; } +@mixin hook-form-legend(){} +@mixin hook-form-label(){ + color: $form-label-color; + font-size: $form-label-font-size; +} +@mixin hook-form-stacked-label(){} +@mixin hook-form-horizontal-label(){} +@mixin hook-form-misc(){} +@mixin hook-inverse-form(){ border-color: $inverse-global-border; } +@mixin hook-inverse-form-focus(){ border-color: $inverse-global-color; } +@mixin hook-inverse-form-radio(){ border-color: $inverse-global-border; } +@mixin hook-inverse-form-radio-focus(){ border-color: $inverse-global-color; } +@mixin hook-inverse-form-radio-checked(){ border-color: $inverse-global-color; } +@mixin hook-inverse-form-radio-checked-focus(){} +@mixin hook-inverse-form-label(){ color: $inverse-form-label-color; } +@mixin hook-inverse-component-form(){ + + .uk-input, + .uk-select, + .uk-textarea { + background-color: $inverse-form-background; + color: $inverse-form-color; + background-clip: padding-box; + @if(mixin-exists(hook-inverse-form)) {@include hook-inverse-form();} + + &:focus { + background-color: $inverse-form-focus-background; + color: $inverse-form-focus-color; + @if(mixin-exists(hook-inverse-form-focus)) {@include hook-inverse-form-focus();} + } + } + + // + // Placeholder + // + + .uk-input:-ms-input-placeholder { color: $inverse-form-placeholder-color !important; } + .uk-input::placeholder { color: $inverse-form-placeholder-color; } + + .uk-textarea:-ms-input-placeholder { color: $inverse-form-placeholder-color !important; } + .uk-textarea::placeholder { color: $inverse-form-placeholder-color; } + + // + // Radio and checkbox + // + + .uk-select:not([multiple]):not([size]) { @include svg-fill($internal-form-select-image, "#000", $inverse-form-select-icon-color); } + + // + // Radio and checkbox + // + + .uk-radio, + .uk-checkbox { + background-color: $inverse-form-radio-background; + @if(mixin-exists(hook-inverse-form-radio)) {@include hook-inverse-form-radio();} + } + + // Focus + .uk-radio:focus, + .uk-checkbox:focus { + @if(mixin-exists(hook-inverse-form-radio-focus)) {@include hook-inverse-form-radio-focus();} + } + + // Checked + .uk-radio:checked, + .uk-checkbox:checked, + .uk-checkbox:indeterminate { + background-color: $inverse-form-radio-checked-background; + @if(mixin-exists(hook-inverse-form-radio-checked)) {@include hook-inverse-form-radio-checked();} + } + + // Focus + .uk-radio:checked:focus, + .uk-checkbox:checked:focus, + .uk-checkbox:indeterminate:focus { + background-color: $inverse-form-radio-checked-focus-background; + @if(mixin-exists(hook-inverse-form-radio-checked-focus)) {@include hook-inverse-form-radio-checked-focus();} + } + + // Icon + .uk-radio:checked { @include svg-fill($internal-form-radio-image, "#000", $inverse-form-radio-checked-icon-color); } + .uk-checkbox:checked { @include svg-fill($internal-form-checkbox-image, "#000", $inverse-form-radio-checked-icon-color); } + .uk-checkbox:indeterminate { @include svg-fill($internal-form-checkbox-indeterminate-image, "#000", $inverse-form-radio-checked-icon-color); } + + // Label + .uk-form-label { + @if(mixin-exists(hook-inverse-form-label)) {@include hook-inverse-form-label();} + } + +} +@mixin hook-grid-misc(){} +@mixin hook-inverse-component-grid(){ + + .uk-grid-divider > :not(.uk-first-column)::before { border-left-color: $inverse-grid-divider-border; } + .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before { border-top-color: $inverse-grid-divider-border; } + +} +@mixin hook-heading-primary(){} +@mixin hook-heading-hero(){} +@mixin hook-heading-divider(){} +@mixin hook-heading-bullet(){} +@mixin hook-heading-line(){} +@mixin hook-heading-misc(){} +@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(){} +@mixin hook-inverse-component-heading(){ + + .uk-heading-primary { + @if(mixin-exists(hook-inverse-heading-primary)) {@include hook-inverse-heading-primary();} + } + + .uk-heading-hero { + @if(mixin-exists(hook-inverse-heading-hero)) {@include hook-inverse-heading-hero();} + } + + .uk-heading-divider { + border-bottom-color: $inverse-heading-divider-border; + @if(mixin-exists(hook-inverse-heading-divider)) {@include hook-inverse-heading-divider();} + } + + .uk-heading-bullet::before { + border-left-color: $inverse-heading-bullet-border; + @if(mixin-exists(hook-inverse-heading-bullet)) {@include hook-inverse-heading-bullet();} + } + + .uk-heading-line > ::before, + .uk-heading-line > ::after { + border-bottom-color: $inverse-heading-line-border; + @if(mixin-exists(hook-inverse-heading-line)) {@include hook-inverse-heading-line();} + } + +} +@mixin hook-icon-link(){} +@mixin hook-icon-link-hover(){} +@mixin hook-icon-link-active(){} +@mixin hook-icon-button(){ + transition: 0.1s ease-in-out; + transition-property: color, background-color +} +@mixin hook-icon-button-hover(){} +@mixin hook-icon-button-active(){} +@mixin hook-icon-misc(){} +@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(){} +@mixin hook-inverse-component-icon(){ + + // + // Link + // + + .uk-icon-link { + color: $inverse-icon-link-color; + @if(mixin-exists(hook-inverse-icon-link)) {@include hook-inverse-icon-link();} + } + + .uk-icon-link:hover, + .uk-icon-link:focus { + color: $inverse-icon-link-hover-color; + @if(mixin-exists(hook-inverse-icon-link-hover)) {@include hook-inverse-icon-link-hover();} + } + + .uk-icon-link:active, + .uk-active > .uk-icon-link { + color: $inverse-icon-link-active-color; + @if(mixin-exists(hook-inverse-icon-link-active)) {@include hook-inverse-icon-link-active();} + } + + // + // Button + // + + .uk-icon-button { + background-color: $inverse-icon-button-background; + color: $inverse-icon-button-color; + @if(mixin-exists(hook-inverse-icon-button)) {@include hook-inverse-icon-button();} + } + + .uk-icon-button:hover, + .uk-icon-button:focus { + background-color: $inverse-icon-button-hover-background; + color: $inverse-icon-button-hover-color; + @if(mixin-exists(hook-inverse-icon-button-hover)) {@include hook-inverse-icon-button-hover();} + } + + .uk-icon-button:active { + background-color: $inverse-icon-button-active-background; + color: $inverse-icon-button-active-color; + @if(mixin-exists(hook-inverse-icon-button-active)) {@include hook-inverse-icon-button-active();} + } + +} +@mixin hook-iconnav(){} +@mixin hook-iconnav-item(){} +@mixin hook-iconnav-item-hover(){} +@mixin hook-iconnav-item-active(){} +@mixin hook-iconnav-misc(){} +@mixin hook-inverse-iconnav-item(){} +@mixin hook-inverse-iconnav-item-hover(){} +@mixin hook-inverse-iconnav-item-active(){} +@mixin hook-inverse-component-iconnav(){ + + .uk-iconnav > * > a { + color: $inverse-iconnav-item-color; + @if(mixin-exists(hook-inverse-iconnav-item)) {@include hook-inverse-iconnav-item();} + } + + .uk-iconnav > * > a:hover, + .uk-iconnav > * > a:focus { + color: $inverse-iconnav-item-hover-color; + @if(mixin-exists(hook-inverse-iconnav-item-hover)) {@include hook-inverse-iconnav-item-hover();} + } + + .uk-iconnav > .uk-active > a { + color: $inverse-iconnav-item-active-color; + @if(mixin-exists(hook-inverse-iconnav-item-active)) {@include hook-inverse-iconnav-item-active();} + } + +} +@mixin hook-inverse-component-link(){ + + a.uk-link-muted, + .uk-link-muted a { + color: $inverse-link-muted-color; + @if(mixin-exists(hook-inverse-link-muted)) {@include hook-inverse-link-muted();} + } + + a.uk-link-muted:hover, + .uk-link-muted a:hover { + color: $inverse-link-muted-hover-color; + @if(mixin-exists(hook-inverse-link-muted-hover)) {@include hook-inverse-link-muted-hover();} + } + + a.uk-link-text:hover, + .uk-link-text a:hover { + color: $inverse-link-text-hover-color; + @if(mixin-exists(hook-inverse-link-text-hover)) {@include hook-inverse-link-text-hover();} + } + + a.uk-link-heading:hover, + .uk-link-heading a:hover { + color: $inverse-link-heading-hover-color; + @if(mixin-exists(hook-inverse-link-heading-hover)) {@include hook-inverse-link-heading-hover();} + } + +} +@mixin hook-inverse-component-list(){ + + .uk-list-divider > li:nth-child(n+2) { + border-top-color: $inverse-list-divider-border; + @if(mixin-exists(hook-inverse-list-divider)) {@include hook-inverse-list-divider();} + } + + .uk-list-striped > li { + @if(mixin-exists(hook-inverse-list-striped)) {@include hook-inverse-list-striped();} + } + + .uk-list-striped > li:nth-of-type(odd) { background-color: $inverse-list-striped-background; } + + .uk-list-bullet > li::before { + @include svg-fill($internal-list-bullet-image, "#000", $inverse-list-bullet-icon-color); + @if(mixin-exists(hook-inverse-list-bullet)) {@include hook-inverse-list-bullet();} + } + +} +@mixin hook-inverse-component-totop(){ + + .uk-totop { + color: $inverse-totop-color; + @if(mixin-exists(hook-inverse-totop)) {@include hook-inverse-totop();} + } + + .uk-totop:hover, + .uk-totop:focus { + color: $inverse-totop-hover-color; + @if(mixin-exists(hook-inverse-totop-hover)) {@include hook-inverse-totop-hover();} + } + + .uk-totop:active { + color: $inverse-totop-active-color; + @if(mixin-exists(hook-inverse-totop-active)) {@include hook-inverse-totop-active();} + } + +} +@mixin hook-inverse-component-label(){ + + .uk-label { + background-color: $inverse-label-background; + color: $inverse-label-color; + @if(mixin-exists(hook-inverse-label)) {@include hook-inverse-label();} + } + +} +@mixin hook-inverse-component-search(){ + + // + // Input + // + + .uk-search-input { color: $inverse-search-color; } + + .uk-search-input:-ms-input-placeholder { color: $inverse-search-placeholder-color !important; } + .uk-search-input::placeholder { color: $inverse-search-placeholder-color; } + + + // + // Icon + // + + .uk-search .uk-search-icon { color: $inverse-search-icon-color; } + + .uk-search .uk-search-icon:hover { color: $inverse-search-icon-color; } + + // + // Style modifier + // + + .uk-search-default .uk-search-input { + background-color: $inverse-search-default-background; + @if(mixin-exists(hook-inverse-search-default-input)) {@include hook-inverse-search-default-input();} + } + .uk-search-default .uk-search-input:focus { + background-color: $inverse-search-default-background; + @if(mixin-exists(hook-inverse-search-default-input-focus)) {@include hook-inverse-search-default-input-focus();} + } + + .uk-search-navbar .uk-search-input { + background-color: $inverse-search-navbar-background; + @if(mixin-exists(hook-inverse-search-navbar-input)) {@include hook-inverse-search-navbar-input();} + } + + .uk-search-large .uk-search-input { + background-color: $inverse-search-large-background; + @if(mixin-exists(hook-inverse-search-large-input)) {@include hook-inverse-search-large-input();} + } + + // + // Toggle + // + + .uk-search-toggle { + color: $inverse-search-toggle-color; + @if(mixin-exists(hook-inverse-search-toggle)) {@include hook-inverse-search-toggle();} + } + + .uk-search-toggle:hover, + .uk-search-toggle:focus { + color: $inverse-search-toggle-hover-color; + @if(mixin-exists(hook-inverse-search-toggle-hover)) {@include hook-inverse-search-toggle-hover();} + } + +} +@mixin hook-inverse-component-nav(){ + + // + // Parent icon modifier + // + + .uk-nav-parent-icon > .uk-parent > a::after { + @include svg-fill($internal-nav-parent-close-image, "#000", $inverse-nav-parent-icon-color); + @if(mixin-exists(hook-inverse-nav-parent-icon)) {@include hook-inverse-nav-parent-icon();} + } + + .uk-nav-parent-icon > .uk-parent.uk-open > a::after { @include svg-fill($internal-nav-parent-open-image, "#000", $inverse-nav-parent-icon-color); } + + // + // Default + // + + .uk-nav-default > li > a { + color: $inverse-nav-default-item-color; + @if(mixin-exists(hook-inverse-nav-default-item)) {@include hook-inverse-nav-default-item();} + } + + .uk-nav-default > li > a:hover, + .uk-nav-default > li > a:focus { + color: $inverse-nav-default-item-hover-color; + @if(mixin-exists(hook-inverse-nav-default-item-hover)) {@include hook-inverse-nav-default-item-hover();} + } + + .uk-nav-default > li.uk-active > a { + color: $inverse-nav-default-item-active-color; + @if(mixin-exists(hook-inverse-nav-default-item-active)) {@include hook-inverse-nav-default-item-active();} + } + + .uk-nav-default .uk-nav-header { + color: $inverse-nav-default-header-color; + @if(mixin-exists(hook-inverse-nav-default-header)) {@include hook-inverse-nav-default-header();} + } + + .uk-nav-default .uk-nav-divider { + border-top-color: $inverse-nav-default-divider-border; + @if(mixin-exists(hook-inverse-nav-default-divider)) {@include hook-inverse-nav-default-divider();} + } + + .uk-nav-default .uk-nav-sub a { color: $inverse-nav-default-sublist-item-color; } + + .uk-nav-default .uk-nav-sub a:hover, + .uk-nav-default .uk-nav-sub a:focus { color: $inverse-nav-default-sublist-item-hover-color; } + + // + // Primary + // + + .uk-nav-primary > li > a { + color: $inverse-nav-primary-item-color; + @if(mixin-exists(hook-inverse-nav-primary-item)) {@include hook-inverse-nav-primary-item();} + } + + .uk-nav-primary > li > a:hover, + .uk-nav-primary > li > a:focus { + color: $inverse-nav-primary-item-hover-color; + @if(mixin-exists(hook-inverse-nav-primary-item-hover)) {@include hook-inverse-nav-primary-item-hover();} + } + + .uk-nav-primary > li.uk-active > a { + color: $inverse-nav-primary-item-active-color; + @if(mixin-exists(hook-inverse-nav-primary-item-active)) {@include hook-inverse-nav-primary-item-active();} + } + + .uk-nav-primary .uk-nav-header { + color: $inverse-nav-primary-header-color; + @if(mixin-exists(hook-inverse-nav-primary-header)) {@include hook-inverse-nav-primary-header();} + } + + .uk-nav-primary .uk-nav-divider { + border-top-color: $inverse-nav-primary-divider-border; + @if(mixin-exists(hook-inverse-nav-primary-divider)) {@include hook-inverse-nav-primary-divider();} + } + + .uk-nav-primary .uk-nav-sub a { color: $inverse-nav-primary-sublist-item-color; } + + .uk-nav-primary .uk-nav-sub a:hover, + .uk-nav-primary .uk-nav-sub a:focus { color: $inverse-nav-primary-sublist-item-hover-color; } + +} +@mixin hook-inverse-component-navbar(){ + + .uk-navbar-nav > li > a { + color: $inverse-navbar-nav-item-color; + @if(mixin-exists(hook-inverse-navbar-nav-item)) {@include hook-inverse-navbar-nav-item();} + } + + .uk-navbar-nav > li:hover > a, + .uk-navbar-nav > li > a:focus, + .uk-navbar-nav > li > a.uk-open { + color: $inverse-navbar-nav-item-hover-color; + @if(mixin-exists(hook-inverse-navbar-nav-item-hover)) {@include hook-inverse-navbar-nav-item-hover();} + } + + .uk-navbar-nav > li > a:active { + color: $inverse-navbar-nav-item-onclick-color; + @if(mixin-exists(hook-inverse-navbar-nav-item-onclick)) {@include hook-inverse-navbar-nav-item-onclick();} + } + + .uk-navbar-nav > li.uk-active > a { + color: $inverse-navbar-nav-item-active-color; + @if(mixin-exists(hook-inverse-navbar-nav-item-active)) {@include hook-inverse-navbar-nav-item-active();} + } + + .uk-navbar-item { + color: $inverse-navbar-item-color; + @if(mixin-exists(hook-inverse-navbar-item)) {@include hook-inverse-navbar-item();} + } + + .uk-navbar-toggle { + color: $inverse-navbar-toggle-color; + @if(mixin-exists(hook-inverse-navbar-toggle)) {@include hook-inverse-navbar-toggle();} + } + + .uk-navbar-toggle:hover, + .uk-navbar-toggle:focus, + .uk-navbar-toggle.uk-open { + color: $inverse-navbar-toggle-hover-color; + @if(mixin-exists(hook-inverse-navbar-toggle-hover)) {@include hook-inverse-navbar-toggle-hover();} + } + +} +@mixin hook-inverse-component-subnav(){ + + .uk-subnav > * > :first-child { + color: $inverse-subnav-item-color; + @if(mixin-exists(hook-inverse-subnav-item)) {@include hook-inverse-subnav-item();} + } + + .uk-subnav > * > a:hover, + .uk-subnav > * > a:focus { + color: $inverse-subnav-item-hover-color; + @if(mixin-exists(hook-inverse-subnav-item-hover)) {@include hook-inverse-subnav-item-hover();} + } + + .uk-subnav > .uk-active > a { + color: $inverse-subnav-item-active-color; + @if(mixin-exists(hook-inverse-subnav-item-active)) {@include hook-inverse-subnav-item-active();} + } + + // + // Divider + // + + .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before { + border-left-color: $inverse-subnav-divider-border; + @if(mixin-exists(hook-inverse-subnav-divider)) {@include hook-inverse-subnav-divider();} + } + + // + // Pill + // + + .uk-subnav-pill > * > :first-child { + background-color: $inverse-subnav-pill-item-background; + color: $inverse-subnav-pill-item-color; + @if(mixin-exists(hook-inverse-subnav-pill-item)) {@include hook-inverse-subnav-pill-item();} + } + + .uk-subnav-pill > * > a:hover, + .uk-subnav-pill > * > a:focus { + background-color: $inverse-subnav-pill-item-hover-background; + color: $inverse-subnav-pill-item-hover-color; + @if(mixin-exists(hook-inverse-subnav-pill-item-hover)) {@include hook-inverse-subnav-pill-item-hover();} + } + + .uk-subnav-pill > * > a:active { + background-color: $inverse-subnav-pill-item-onclick-background; + color: $inverse-subnav-pill-item-onclick-color; + @if(mixin-exists(hook-inverse-subnav-pill-item-onclick)) {@include hook-inverse-subnav-pill-item-onclick();} + } + + .uk-subnav-pill > .uk-active > a { + background-color: $inverse-subnav-pill-item-active-background; + color: $inverse-subnav-pill-item-active-color; + @if(mixin-exists(hook-inverse-subnav-pill-item-active)) {@include hook-inverse-subnav-pill-item-active();} + } + + // + // Disabled + // + + .uk-subnav > .uk-disabled > a { + color: $inverse-subnav-item-disabled-color; + @if(mixin-exists(hook-inverse-subnav-item-disabled)) {@include hook-inverse-subnav-item-disabled();} + } + +} +@mixin hook-inverse-component-pagination(){ + + .uk-pagination > * > * { + color: $inverse-pagination-item-color; + @if(mixin-exists(hook-inverse-pagination-item)) {@include hook-inverse-pagination-item();} + } + + .uk-pagination > * > :hover, + .uk-pagination > * > :focus { + color: $inverse-pagination-item-hover-color; + @if(mixin-exists(hook-inverse-pagination-item-hover)) {@include hook-inverse-pagination-item-hover();} + } + + .uk-pagination > .uk-active > * { + color: $inverse-pagination-item-active-color; + @if(mixin-exists(hook-inverse-pagination-item-active)) {@include hook-inverse-pagination-item-active();} + } + + .uk-pagination > .uk-disabled > * { + color: $inverse-pagination-item-disabled-color; + @if(mixin-exists(hook-inverse-pagination-item-disabled)) {@include hook-inverse-pagination-item-disabled();} + } + +} +@mixin hook-inverse-component-tab(){ + + .uk-tab { + @if(mixin-exists(hook-inverse-tab)) {@include hook-inverse-tab();} + } + + .uk-tab > * > a { + color: $inverse-tab-item-color; + @if(mixin-exists(hook-inverse-tab-item)) {@include hook-inverse-tab-item();} + } + + .uk-tab > * > a:hover, + .uk-tab > * > a:focus{ + color: $inverse-tab-item-hover-color; + @if(mixin-exists(hook-inverse-tab-item-hover)) {@include hook-inverse-tab-item-hover();} + } + + .uk-tab > .uk-active > a { + color: $inverse-tab-item-active-color; + @if(mixin-exists(hook-inverse-tab-item-active)) {@include hook-inverse-tab-item-active();} + } + + .uk-tab > .uk-disabled > a { + color: $inverse-tab-item-disabled-color; + @if(mixin-exists(hook-inverse-tab-item-disabled)) {@include hook-inverse-tab-item-disabled();} + } + +} +@mixin hook-inverse-component-slidenav(){ + + .uk-slidenav { + color: $inverse-slidenav-color; + @if(mixin-exists(hook-inverse-slidenav)) {@include hook-inverse-slidenav();} + } + + .uk-slidenav:hover, + .uk-slidenav:focus { + color: $inverse-slidenav-hover-color; + @if(mixin-exists(hook-inverse-slidenav-hover)) {@include hook-inverse-slidenav-hover();} + } + + .uk-slidenav:active { + color: $inverse-slidenav-active-color; + @if(mixin-exists(hook-inverse-slidenav-active)) {@include hook-inverse-slidenav-active();} + } + +} +@mixin hook-inverse-component-text(){ + + .uk-text-lead { + color: $inverse-text-lead-color; + @if(mixin-exists(hook-inverse-text-lead)) {@include hook-inverse-text-lead();} + } + + .uk-text-meta { + color: $inverse-text-meta-color; + @if(mixin-exists(hook-inverse-text-meta)) {@include hook-inverse-text-meta();} + } + + .uk-text-muted { color: $inverse-text-muted-color !important; } + .uk-text-primary { color: $inverse-text-primary-color !important; } + +} +@mixin hook-inverse-component-utility(){ + + .uk-dropcap::first-letter, + .uk-dropcap p:first-of-type::first-letter { + @if(mixin-exists(hook-inverse-dropcap)) {@include hook-inverse-dropcap();} + } + + .uk-leader-fill { + @if(mixin-exists(hook-inverse-leader)) {@include hook-inverse-leader();} + } + + .uk-logo { + color: $inverse-logo-color; + @if(mixin-exists(hook-inverse-logo)) {@include hook-inverse-logo();} + } + + .uk-logo:hover, + .uk-logo:focus { + color: $inverse-logo-hover-color; + @if(mixin-exists(hook-inverse-logo-hover)) {@include hook-inverse-logo-hover();} + } + + .uk-logo > :not(.uk-logo-inverse):not(:only-of-type) { display: none; } + .uk-logo-inverse { display: inline; } + +} +@mixin hook-inverse(){ + @include hook-inverse-component-base(); + @include hook-inverse-component-link(); + @include hook-inverse-component-heading(); + @include hook-inverse-component-divider(); + @include hook-inverse-component-list(); + @include hook-inverse-component-icon(); + @include hook-inverse-component-form(); + @include hook-inverse-component-button(); + @include hook-inverse-component-grid(); + @include hook-inverse-component-close(); + @include hook-inverse-component-totop(); + @include hook-inverse-component-badge(); + @include hook-inverse-component-label(); + @include hook-inverse-component-article(); + @include hook-inverse-component-search(); + @include hook-inverse-component-nav(); + @include hook-inverse-component-navbar(); + @include hook-inverse-component-subnav(); + @include hook-inverse-component-breadcrumb(); + @include hook-inverse-component-pagination(); + @include hook-inverse-component-tab(); + @include hook-inverse-component-slidenav(); + @include hook-inverse-component-dotnav(); + @include hook-inverse-component-accordion(); + @include hook-inverse-component-iconnav(); + @include hook-inverse-component-text(); + @include hook-inverse-component-column(); + @include hook-inverse-component-utility(); +} +@mixin hook-label(){ + border-radius: $label-border-radius; + text-transform: $label-text-transform; +} +@mixin hook-label-success(){} +@mixin hook-label-warning(){} +@mixin hook-label-danger(){} +@mixin hook-label-misc(){} +@mixin hook-inverse-label(){} +@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(){} +@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(){} +@mixin hook-inverse-link-muted(){} +@mixin hook-inverse-link-muted-hover(){} +@mixin hook-inverse-link-text-hover(){} +@mixin hook-inverse-link-heading-hover(){} +@mixin hook-list-divider(){} +@mixin hook-list-striped(){ + + &:nth-of-type(odd) { + border-top: $list-striped-border-width solid $list-striped-border; + border-bottom: $list-striped-border-width solid $list-striped-border; + } + +} +@mixin hook-list-bullet(){} +@mixin hook-list-misc(){} +@mixin hook-inverse-list-divider(){} +@mixin hook-inverse-list-striped(){ + + &:nth-of-type(odd) { + border-top-color: $inverse-global-border; + border-bottom-color: $inverse-global-border; + } + +} +@mixin hook-inverse-list-bullet(){} +@mixin hook-margin-misc(){} +@mixin hook-marker(){ + border-radius: 500px; +} +@mixin hook-marker-hover(){} +@mixin hook-marker-misc(){} +@mixin hook-inverse-marker(){} +@mixin hook-inverse-marker-hover(){} +@mixin hook-inverse-component-marker(){ + + .uk-marker { + background: $inverse-marker-background; + color: $inverse-marker-color; + @if(mixin-exists(hook-inverse-marker)) {@include hook-inverse-marker();} + } + + .uk-marker:hover, + .uk-marker:focus { + color: $inverse-marker-hover-color; + @if(mixin-exists(hook-inverse-marker-hover)) {@include hook-inverse-marker-hover();} + } + +} +@mixin hook-modal(){} +@mixin hook-modal-dialog(){} +@mixin hook-modal-full(){} +@mixin hook-modal-body(){} +@mixin hook-modal-header(){ border-bottom: $modal-header-border-width solid $modal-header-border; } +@mixin hook-modal-footer(){ border-top: $modal-footer-border-width solid $modal-footer-border; } +@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(){ + top: 0; + right: 0; + padding: $modal-close-full-padding; + background: $modal-close-full-background; +} +@mixin hook-modal-close-full-hover(){} +@mixin hook-modal-misc(){} +@mixin hook-nav-sub(){} +@mixin hook-nav-parent-icon(){} +@mixin hook-nav-header(){} +@mixin hook-nav-divider(){} +@mixin hook-nav-default(){ font-size: $nav-default-font-size; } +@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(){} +@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(){} +@mixin hook-navbar(){} +@mixin hook-navbar-container(){} +@mixin hook-navbar-nav-item(){ + text-transform: $navbar-nav-item-text-transform; + transition: 0.1s ease-in-out; + transition-property: color, background-color; +} +@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(){ box-shadow: $navbar-dropdown-box-shadow; } +@mixin hook-navbar-dropdown-dropbar(){ box-shadow: none; } +@mixin hook-navbar-dropdown-nav(){ font-size: $navbar-dropdown-nav-font-size; } +@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(){ box-shadow: $navbar-dropbar-box-shadow; } +@mixin hook-navbar-misc(){ + + /* + * Navbar + */ + + .uk-navbar-container > .uk-container .uk-navbar-left { + margin-left: (-$navbar-nav-item-padding-horizontal); + margin-right: (-$navbar-nav-item-padding-horizontal); + } + .uk-navbar-container > .uk-container .uk-navbar-right { margin-right: (-$navbar-nav-item-padding-horizontal); } + + /* + * Grid Divider + */ + + .uk-navbar-dropdown-grid > * { position: relative; } + + .uk-navbar-dropdown-grid > :not(.uk-first-column)::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: ($navbar-dropdown-grid-gutter-horizontal / 2); + border-left: $navbar-dropdown-grid-divider-border-width solid $navbar-dropdown-grid-divider-border; + } + + /* Vertical */ + .uk-navbar-dropdown-grid.uk-grid-stack > .uk-grid-margin::before { + content: ""; + position: absolute; + top: -($navbar-dropdown-grid-gutter-vertical / 2); + left: $navbar-dropdown-grid-gutter-horizontal; + right: 0; + border-top: $navbar-dropdown-grid-divider-border-width solid $navbar-dropdown-grid-divider-border; + } + +} +@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(){} +@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(){} +@mixin hook-offcanvas-bar(){} +@mixin hook-offcanvas-close(){} +@mixin hook-offcanvas-overlay(){} +@mixin hook-offcanvas-misc(){} +@mixin hook-overlay(){} +@mixin hook-overlay-icon(){} +@mixin hook-overlay-default(){} +@mixin hook-overlay-primary(){} +@mixin hook-overlay-misc(){} +@mixin hook-padding-misc(){} +@mixin hook-pagination(){} +@mixin hook-pagination-item(){ transition: color 0.1s ease-in-out; } +@mixin hook-pagination-item-hover(){} +@mixin hook-pagination-item-active(){} +@mixin hook-pagination-item-disabled(){} +@mixin hook-pagination-misc(){} +@mixin hook-inverse-pagination-item(){} +@mixin hook-inverse-pagination-item-hover(){} +@mixin hook-inverse-pagination-item-active(){} +@mixin hook-inverse-pagination-item-disabled(){} +@mixin hook-placeholder(){ border: $placeholder-border-width dashed $placeholder-border; } +@mixin hook-placeholder-misc(){} +@mixin hook-position-misc(){} +@mixin hook-print(){} +@mixin hook-progress(){ + border-radius: $progress-border-radius; + overflow: hidden; +} +@mixin hook-progress-bar(){} +@mixin hook-progress-misc(){} +@mixin hook-search-input(){} +@mixin hook-search-default-input(){ border: $search-default-border-width solid $search-default-border; } +@mixin hook-search-default-input-focus(){} +@mixin hook-search-navbar-input(){} +@mixin hook-search-large-input(){} +@mixin hook-search-toggle(){} +@mixin hook-search-toggle-hover(){} +@mixin hook-search-misc(){} +@mixin hook-inverse-search-default-input(){ border-color: $inverse-global-border; } +@mixin hook-inverse-search-default-input-focus(){} +@mixin hook-inverse-search-navbar-input(){} +@mixin hook-inverse-search-large-input(){} +@mixin hook-inverse-search-toggle(){} +@mixin hook-inverse-search-toggle-hover(){} +@mixin hook-section(){} +@mixin hook-section-default(){} +@mixin hook-section-muted(){} +@mixin hook-section-primary(){} +@mixin hook-section-secondary(){} +@mixin hook-section-overlap(){} +@mixin hook-section-misc(){} +@mixin hook-slidenav(){ transition: color 0.1s ease-in-out; } +@mixin hook-slidenav-hover(){} +@mixin hook-slidenav-active(){} +@mixin hook-slidenav-previous(){} +@mixin hook-slidenav-next(){} +@mixin hook-slidenav-large(){} +@mixin hook-slidenav-container(){} +@mixin hook-slidenav-misc(){} +@mixin hook-inverse-slidenav(){} +@mixin hook-inverse-slidenav-hover(){} +@mixin hook-inverse-slidenav-active(){} +@mixin hook-slider(){} +@mixin hook-slider-misc(){} +@mixin hook-slideshow(){} +@mixin hook-slideshow-misc(){} +@mixin hook-sortable(){} +@mixin hook-sortable-drag(){} +@mixin hook-sortable-placeholder(){} +@mixin hook-sortable-empty(){} +@mixin hook-sortable-misc(){} +@mixin hook-spinner(){} +@mixin hook-spinner-misc(){} +@mixin hook-sticky-misc(){} +@mixin hook-subnav(){} +@mixin hook-subnav-item(){ + font-size: $subnav-item-font-size; + text-transform: $subnav-item-text-transform; + transition: 0.1s ease-in-out; + transition-property: color, background-color; +} +@mixin hook-subnav-item-hover(){} +@mixin hook-subnav-item-active(){} +@mixin hook-subnav-divider(){} +@mixin hook-subnav-pill-item(){} +@mixin hook-subnav-pill-item-hover(){} +@mixin hook-subnav-pill-item-onclick(){} +@mixin hook-subnav-pill-item-active(){} +@mixin hook-subnav-item-disabled(){} +@mixin hook-subnav-misc(){} +@mixin hook-inverse-subnav-item(){} +@mixin hook-inverse-subnav-item-hover(){} +@mixin hook-inverse-subnav-item-active(){} +@mixin hook-inverse-subnav-divider(){} +@mixin hook-inverse-subnav-pill-item(){} +@mixin hook-inverse-subnav-pill-item-hover(){} +@mixin hook-inverse-subnav-pill-item-onclick(){} +@mixin hook-inverse-subnav-pill-item-active(){} +@mixin hook-inverse-subnav-item-disabled(){} +@mixin hook-switcher-misc(){} +@mixin hook-tab(){ + + position: relative; + + &::before { + content: ""; + position: absolute; + bottom: 0; + left: $tab-margin-horizontal; + right: 0; + border-bottom: $tab-border-width solid $tab-border; + } + +} +@mixin hook-tab-item(){ + border-bottom: $tab-item-border-width solid transparent; + font-size: $tab-item-font-size; + text-transform: $tab-item-text-transform; + transition: color 0.1s ease-in-out; +} +@mixin hook-tab-item-hover(){} +@mixin hook-tab-item-active(){ border-color: $tab-item-active-border; } +@mixin hook-tab-item-disabled(){} +@mixin hook-tab-bottom(){ + + &::before { + top: 0; + bottom: auto; + } + +} +@mixin hook-tab-bottom-item(){ + border-top: $tab-item-border-width solid transparent; + border-bottom: none; +} +@mixin hook-tab-left(){ + + &::before { + top: 0; + bottom: 0; + left: auto; + right: 0; + border-left: $tab-border-width solid $tab-border; + border-bottom: none; + } + +} +@mixin hook-tab-right(){ + + &::before { + top: 0; + bottom: 0; + left: 0; + right: auto; + border-left: $tab-border-width solid $tab-border; + border-bottom: none; + } + +} +@mixin hook-tab-left-item(){ + border-right: $tab-item-border-width solid transparent; + border-bottom: none; +} +@mixin hook-tab-right-item(){ + border-left: $tab-item-border-width solid transparent; + border-bottom: none; +} +@mixin hook-tab-misc(){ + + .uk-tab .uk-dropdown { margin-left: ($tab-margin-horizontal + $tab-item-padding-horizontal) } + +} +@mixin hook-inverse-tab(){ + + &::before { border-color: $inverse-tab-border; } + +} +@mixin hook-inverse-tab-item(){} +@mixin hook-inverse-tab-item-hover(){} +@mixin hook-inverse-tab-item-active(){ border-color: $inverse-global-primary-background; } +@mixin hook-inverse-tab-item-disabled(){} +@mixin hook-table(){} +@mixin hook-table-header-cell(){ text-transform: uppercase; } +@mixin hook-table-cell(){} +@mixin hook-table-footer(){} +@mixin hook-table-caption(){} +@mixin hook-table-row-active(){} +@mixin hook-table-divider(){} +@mixin hook-table-striped(){ + border-top: $table-striped-border-width solid $table-striped-border; + border-bottom: $table-striped-border-width solid $table-striped-border; +} +@mixin hook-table-hover(){} +@mixin hook-table-small(){} +@mixin hook-table-large(){} +@mixin hook-table-misc(){ + + .uk-table tbody tr { transition: background-color 0.1s linear; } + +} +@mixin hook-inverse-table-header-cell(){} +@mixin hook-inverse-table-caption(){} +@mixin hook-inverse-table-row-active(){} +@mixin hook-inverse-table-divider(){} +@mixin hook-inverse-table-striped(){ + border-top-color: $inverse-global-border; + border-bottom-color: $inverse-global-border; +} +@mixin hook-inverse-table-hover(){} +@mixin hook-inverse-component-table(){ + + .uk-table th { + color: $inverse-table-header-cell-color; + @if(mixin-exists(hook-inverse-table-header-cell)) {@include hook-inverse-table-header-cell();} + } + + .uk-table caption { + color: $inverse-table-caption-color; + @if(mixin-exists(hook-inverse-table-caption)) {@include hook-inverse-table-caption();} + } + + .uk-table > tr.uk-active, + .uk-table tbody tr.uk-active { + background: $inverse-table-row-active-background; + @if(mixin-exists(hook-inverse-table-row-active)) {@include hook-inverse-table-row-active();} + } + + .uk-table-divider > tr:not(:first-child), + .uk-table-divider > :not(:first-child) > tr, + .uk-table-divider > :first-child > tr:not(:first-child) { + border-top-color: $inverse-table-divider-border; + @if(mixin-exists(hook-inverse-table-divider)) {@include hook-inverse-table-divider();} + } + + .uk-table-striped > tr:nth-of-type(odd), + .uk-table-striped tbody tr:nth-of-type(odd) { + background: $inverse-table-striped-row-background; + @if(mixin-exists(hook-inverse-table-striped)) {@include hook-inverse-table-striped();} + } + + .uk-table-hover > tr:hover, + .uk-table-hover tbody tr:hover { + background: $inverse-table-hover-row-background; + @if(mixin-exists(hook-inverse-table-hover)) {@include hook-inverse-table-hover();} + } + +} +@mixin hook-text-lead(){} +@mixin hook-text-meta(){ + + a { color: $text-meta-link-color; } + + a:hover { + color: $text-meta-link-hover-color; + text-decoration: none; + } + +} +@mixin hook-text-small(){} +@mixin hook-text-large(){} +@mixin hook-text-background(){} +@mixin hook-text-misc(){} +@mixin hook-inverse-text-lead(){} +@mixin hook-inverse-text-meta(){} +@mixin hook-thumbnav(){} +@mixin hook-thumbnav-item(){ + + position: relative; + + &::after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: $thumbnav-item-background; + transition: background-color 0.1s ease-in-out; + } + +} +@mixin hook-thumbnav-item-hover(){ + &::after { background-color: $thumbnav-item-hover-background; } +} +@mixin hook-thumbnav-item-active(){ + &::after { background-color: $thumbnav-item-active-background; } +} +@mixin hook-thumbnav-misc(){} +@mixin hook-inverse-thumbnav-item(){} +@mixin hook-inverse-thumbnav-item-hover(){} +@mixin hook-inverse-thumbnav-item-active(){} +@mixin hook-inverse-component-thumbnav(){ + + .uk-thumbnav > * > * { + @if(mixin-exists(hook-inverse-thumbnav-item)) {@include hook-inverse-thumbnav-item();} + } + + .uk-thumbnav > * > :hover, + .uk-thumbnav > * > :focus { + @if(mixin-exists(hook-inverse-thumbnav-item-hover)) {@include hook-inverse-thumbnav-item-hover();} + } + + .uk-thumbnav > .uk-active > * { + @if(mixin-exists(hook-inverse-thumbnav-item-active)) {@include hook-inverse-thumbnav-item-active();} + } + +} +@mixin hook-tile(){} +@mixin hook-tile-default(){} +@mixin hook-tile-muted(){} +@mixin hook-tile-primary(){} +@mixin hook-tile-secondary(){} +@mixin hook-tile-misc(){} +@mixin hook-tooltip(){} +@mixin hook-tooltip-misc(){} +@mixin hook-totop(){ transition: color 0.1s ease-in-out; } +@mixin hook-totop-hover(){} +@mixin hook-totop-active(){} +@mixin hook-totop-misc(){} +@mixin hook-inverse-totop(){} +@mixin hook-inverse-totop-hover(){} +@mixin hook-inverse-totop-active(){} +@mixin hook-transition-misc(){} +@mixin hook-panel-scrollable(){} +@mixin hook-box-shadow-bottom(){} +@mixin hook-dropcap(){ + // Prevent line wrap + margin-bottom: -2px; +} +@mixin hook-leader(){} +@mixin hook-logo(){} +@mixin hook-logo-hover(){} +@mixin hook-utility-misc(){} +@mixin hook-inverse-dropcap(){} +@mixin hook-inverse-leader(){} +@mixin hook-inverse-logo(){} +@mixin hook-inverse-logo-hover(){} +@mixin hook-visibility-misc(){} +@mixin hook-width-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/mixins.scss b/_sass/_sass/uikit/mixins.scss new file mode 100644 index 00000000..573b2f37 --- /dev/null +++ b/_sass/_sass/uikit/mixins.scss @@ -0,0 +1,1644 @@ +@mixin hook-accordion(){} +@mixin hook-accordion-item(){} +@mixin hook-accordion-title(){} +@mixin hook-accordion-title-hover(){} +@mixin hook-accordion-content(){} +@mixin hook-accordion-misc(){} +@mixin hook-inverse-accordion-item(){} +@mixin hook-inverse-accordion-title(){} +@mixin hook-inverse-accordion-title-hover(){} +@mixin hook-inverse-component-accordion(){ + + .uk-accordion > :nth-child(n+2) { + @if(mixin-exists(hook-inverse-accordion-item)) {@include hook-inverse-accordion-item();} + } + + .uk-accordion-title { + color: $inverse-accordion-title-color; + @if(mixin-exists(hook-inverse-accordion-title)) {@include hook-inverse-accordion-title();} + } + + .uk-accordion-title:hover, + .uk-accordion-title:focus { + color: $inverse-accordion-title-hover-color; + @if(mixin-exists(hook-inverse-accordion-title-hover)) {@include hook-inverse-accordion-title-hover();} + } + +} +@mixin hook-align-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(){} +@mixin hook-article(){} +@mixin hook-article-adjacent(){} +@mixin hook-article-title(){} +@mixin hook-article-meta(){} +@mixin hook-article-misc(){} +@mixin hook-inverse-article-title(){} +@mixin hook-inverse-article-meta(){} +@mixin hook-inverse-component-article(){ + + .uk-article-title { + @if(mixin-exists(hook-inverse-article-title)) {@include hook-inverse-article-title();} + } + + .uk-article-meta { + color: $inverse-article-meta-color; + @if(mixin-exists(hook-inverse-article-meta)) {@include hook-inverse-article-meta();} + } + +} +@mixin hook-animation-misc(){} +@mixin hook-background-misc(){} +@mixin hook-badge(){} +@mixin hook-badge-hover(){} +@mixin hook-badge-misc(){} +@mixin hook-inverse-badge(){} +@mixin hook-inverse-badge-hover(){} +@mixin hook-inverse-component-badge(){ + + .uk-badge { + background-color: $inverse-badge-background; + color: $inverse-badge-color; + @if(mixin-exists(hook-inverse-badge)) {@include hook-inverse-badge();} + } + + .uk-badge:hover, + .uk-badge:focus { + color: $inverse-badge-hover-color; + @if(mixin-exists(hook-inverse-badge-hover)) {@include hook-inverse-badge-hover();} + } + +} +@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(){} +@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(){} +@mixin hook-inverse-component-base(){ + + color: $inverse-base-color; + + // Base + // ======================================================================== + + // + // Link + // + + a, + .uk-link { + color: $inverse-base-link-color; + @if(mixin-exists(hook-inverse-base-link)) {@include hook-inverse-base-link();} + } + + a:hover, + .uk-link:hover { + color: $inverse-base-link-hover-color; + @if(mixin-exists(hook-inverse-base-link-hover)) {@include hook-inverse-base-link-hover();} + } + + // + // Code + // + + :not(pre) > code, + :not(pre) > kbd, + :not(pre) > samp { + color: $inverse-base-code-color; + @if(mixin-exists(hook-inverse-base-code)) {@include hook-inverse-base-code();} + } + + // + // Emphasize + // + + em { color: $inverse-base-em-color; } + + // + // Headings + // + + h1, .uk-h1, + h2, .uk-h2, + h3, .uk-h3, + h4, .uk-h4, + h5, .uk-h5, + h6, .uk-h6 { + color: $inverse-base-heading-color; + @if(mixin-exists(hook-inverse-base-heading)) {@include hook-inverse-base-heading();} + } + + h1, .uk-h1 { + @if(mixin-exists(hook-inverse-base-h1)) {@include hook-inverse-base-h1();} + } + + h2, .uk-h2 { + @if(mixin-exists(hook-inverse-base-h2)) {@include hook-inverse-base-h2();} + } + + h3, .uk-h3 { + @if(mixin-exists(hook-inverse-base-h3)) {@include hook-inverse-base-h3();} + } + + h4, .uk-h4 { + @if(mixin-exists(hook-inverse-base-h4)) {@include hook-inverse-base-h4();} + } + + h5, .uk-h5 { + @if(mixin-exists(hook-inverse-base-h5)) {@include hook-inverse-base-h5();} + } + + h6, .uk-h6 { + @if(mixin-exists(hook-inverse-base-h6)) {@include hook-inverse-base-h6();} + } + + // + // Blockquotes + // + + blockquote { + @if(mixin-exists(hook-inverse-base-blockquote)) {@include hook-inverse-base-blockquote();} + } + + blockquote footer { + @if(mixin-exists(hook-inverse-base-blockquote-footer)) {@include hook-inverse-base-blockquote-footer();} + } + + // + // Horizontal rules + // + + hr, .uk-hr { + border-top-color: $inverse-base-hr-border; + @if(mixin-exists(hook-inverse-base-hr)) {@include hook-inverse-base-hr();} + } + +} +@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(){} +@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(){} +@mixin hook-inverse-component-breadcrumb(){ + + .uk-breadcrumb > * > * { + color: $inverse-breadcrumb-item-color; + @if(mixin-exists(hook-inverse-breadcrumb-item)) {@include hook-inverse-breadcrumb-item();} + } + + .uk-breadcrumb > * > :hover, + .uk-breadcrumb > * > :focus { + color: $inverse-breadcrumb-item-hover-color; + @if(mixin-exists(hook-inverse-breadcrumb-item-hover)) {@include hook-inverse-breadcrumb-item-hover();} + } + + + .uk-breadcrumb > .uk-disabled > * { + @if(mixin-exists(hook-inverse-breadcrumb-item-disabled)) {@include hook-inverse-breadcrumb-item-disabled();} + } + + .uk-breadcrumb > :last-child > * { + color: $inverse-breadcrumb-item-active-color; + @if(mixin-exists(hook-inverse-breadcrumb-item-active)) {@include hook-inverse-breadcrumb-item-active();} + } + + // + // Divider + // + + .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before { + color: $inverse-breadcrumb-divider-color; + @if(mixin-exists(hook-inverse-breadcrumb-divider)) {@include hook-inverse-breadcrumb-divider();} + } + +} +@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(){} +@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(){} +@mixin hook-inverse-component-button(){ + + // + // Default + // + + .uk-button-default { + background-color: $inverse-button-default-background; + color: $inverse-button-default-color; + @if(mixin-exists(hook-inverse-button-default)) {@include hook-inverse-button-default();} + } + + .uk-button-default:hover, + .uk-button-default:focus { + background-color: $inverse-button-default-hover-background; + color: $inverse-button-default-hover-color; + @if(mixin-exists(hook-inverse-button-default-hover)) {@include hook-inverse-button-default-hover();} + } + + .uk-button-default:active, + .uk-button-default.uk-active { + background-color: $inverse-button-default-active-background; + color: $inverse-button-default-active-color; + @if(mixin-exists(hook-inverse-button-default-active)) {@include hook-inverse-button-default-active();} + } + + // + // Primary + // + + .uk-button-primary { + background-color: $inverse-button-primary-background; + color: $inverse-button-primary-color; + @if(mixin-exists(hook-inverse-button-primary)) {@include hook-inverse-button-primary();} + } + + .uk-button-primary:hover, + .uk-button-primary:focus { + background-color: $inverse-button-primary-hover-background; + color: $inverse-button-primary-hover-color; + @if(mixin-exists(hook-inverse-button-primary-hover)) {@include hook-inverse-button-primary-hover();} + } + + .uk-button-primary:active, + .uk-button-primary.uk-active { + background-color: $inverse-button-primary-active-background; + color: $inverse-button-primary-active-color; + @if(mixin-exists(hook-inverse-button-primary-active)) {@include hook-inverse-button-primary-active();} + } + + // + // Secondary + // + + .uk-button-secondary { + background-color: $inverse-button-secondary-background; + color: $inverse-button-secondary-color; + @if(mixin-exists(hook-inverse-button-secondary)) {@include hook-inverse-button-secondary();} + } + + .uk-button-secondary:hover, + .uk-button-secondary:focus { + background-color: $inverse-button-secondary-hover-background; + color: $inverse-button-secondary-hover-color; + @if(mixin-exists(hook-inverse-button-secondary-hover)) {@include hook-inverse-button-secondary-hover();} + } + + .uk-button-secondary:active, + .uk-button-secondary.uk-active { + background-color: $inverse-button-secondary-active-background; + color: $inverse-button-secondary-active-color; + @if(mixin-exists(hook-inverse-button-secondary-active)) {@include hook-inverse-button-secondary-active();} + } + + // + // Text + // + + .uk-button-text { + color: $inverse-button-text-color; + @if(mixin-exists(hook-inverse-button-text)) {@include hook-inverse-button-text();} + } + + .uk-button-text:hover, + .uk-button-text:focus { + color: $inverse-button-text-hover-color; + @if(mixin-exists(hook-inverse-button-text-hover)) {@include hook-inverse-button-text-hover();} + } + + .uk-button-text:disabled { + color: $inverse-button-text-disabled-color; + @if(mixin-exists(hook-inverse-button-text-disabled)) {@include hook-inverse-button-text-disabled();} + } + + // + // Link + // + + .uk-button-link { + color: $inverse-button-link-color; + @if(mixin-exists(hook-inverse-button-link)) {@include hook-inverse-button-link();} + } + + .uk-button-link:hover, + .uk-button-link:focus { color: $inverse-button-link-hover-color; } + + +} +@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(){} +@mixin hook-close(){} +@mixin hook-close-hover(){} +@mixin hook-close-misc(){} +@mixin hook-inverse-close(){} +@mixin hook-inverse-close-hover(){} +@mixin hook-inverse-component-close(){ + + .uk-close { + color: $inverse-close-color; + @if(mixin-exists(hook-inverse-close)) {@include hook-inverse-close();} + } + + .uk-close:hover, + .uk-close:focus { + color: $inverse-close-hover-color; + @if(mixin-exists(hook-inverse-close-hover)) {@include hook-inverse-close-hover();} + } + +} +@mixin hook-column-misc(){} +@mixin hook-inverse-component-column(){ + + .uk-column-divider { column-rule-color: $inverse-column-divider-rule-color; } + +} +@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(){} +@mixin hook-container-misc(){} +@mixin hook-countdown(){} +@mixin hook-countdown-item(){} +@mixin hook-countdown-number(){} +@mixin hook-countdown-separator(){} +@mixin hook-countdown-label(){} +@mixin hook-countdown-misc(){} +@mixin hook-inverse-countdown-item(){} +@mixin hook-inverse-countdown-number(){} +@mixin hook-inverse-countdown-separator(){} +@mixin hook-inverse-countdown-label(){} +@mixin hook-inverse-component-countdown(){ + + .uk-countdown-number, + .uk-countdown-separator { + @if(mixin-exists(hook-inverse-countdown-item)) {@include hook-inverse-countdown-item();} + } + + .uk-countdown-number { + @if(mixin-exists(hook-inverse-countdown-number)) {@include hook-inverse-countdown-number();} + } + + .uk-countdown-separator { + @if(mixin-exists(hook-inverse-countdown-separator)) {@include hook-inverse-countdown-separator();} + } + + .uk-countdown-label { + @if(mixin-exists(hook-inverse-countdown-label)) {@include hook-inverse-countdown-label();} + } + +} +@mixin hook-cover-misc(){} +@mixin hook-description-list-term(){} +@mixin hook-description-list-description(){} +@mixin hook-description-list-divider-term(){} +@mixin hook-description-list-misc(){} +@mixin svg-fill($src, $color-default, $color-new, $property: background-image){ + + $escape-color-default: escape($color-default) !default; + $escape-color-new: escape("#{$color-new}") !default; + + $data-uri: data-uri('image/svg+xml;charset=UTF-8', "#{$src}") !default; + $replace-src: replace("#{$data-uri}", "#{$escape-color-default}", "#{$escape-color-new}", "g") !default; + + #{$property}: unquote($replace-src); +} +@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(){} +@mixin hook-inverse-divider-icon(){} +@mixin hook-inverse-divider-icon-line(){} +@mixin hook-inverse-divider-small(){} +@mixin hook-inverse-component-divider(){ + + .uk-divider-icon { + @include svg-fill($internal-divider-icon-image, "#000", $inverse-divider-icon-color); + @if(mixin-exists(hook-inverse-divider-icon)) {@include hook-inverse-divider-icon();} + } + + .uk-divider-icon::before, + .uk-divider-icon::after { + border-bottom-color: $inverse-divider-icon-line-border; + @if(mixin-exists(hook-inverse-divider-icon-line)) {@include hook-inverse-divider-icon-line();} + } + + .uk-divider-small::after { + border-top-color: $inverse-divider-small-border; + @if(mixin-exists(hook-inverse-divider-small)) {@include hook-inverse-divider-small();} + } + +} +@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(){} +@mixin hook-inverse-dotnav-item(){} +@mixin hook-inverse-dotnav-item-hover(){} +@mixin hook-inverse-dotnav-item-onclick(){} +@mixin hook-inverse-dotnav-item-active(){} +@mixin hook-inverse-component-dotnav(){ + + .uk-dotnav > * > * { + background-color: $inverse-dotnav-item-background; + @if(mixin-exists(hook-inverse-dotnav-item)) {@include hook-inverse-dotnav-item();} + } + + .uk-dotnav > * > :hover, + .uk-dotnav > * > :focus { + background-color: $inverse-dotnav-item-hover-background; + @if(mixin-exists(hook-inverse-dotnav-item-hover)) {@include hook-inverse-dotnav-item-hover();} + } + + .uk-dotnav > * > :active { + background-color: $inverse-dotnav-item-onclick-background; + @if(mixin-exists(hook-inverse-dotnav-item-onclick)) {@include hook-inverse-dotnav-item-onclick();} + } + + .uk-dotnav > .uk-active > * { + background-color: $inverse-dotnav-item-active-background; + @if(mixin-exists(hook-inverse-dotnav-item-active)) {@include hook-inverse-dotnav-item-active();} + } + +} +@mixin hook-drop-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(){} +@mixin hook-flex-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(){} +@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(){} +@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(){} +@mixin hook-inverse-component-form(){ + + .uk-input, + .uk-select, + .uk-textarea { + background-color: $inverse-form-background; + color: $inverse-form-color; + background-clip: padding-box; + @if(mixin-exists(hook-inverse-form)) {@include hook-inverse-form();} + + &:focus { + background-color: $inverse-form-focus-background; + color: $inverse-form-focus-color; + @if(mixin-exists(hook-inverse-form-focus)) {@include hook-inverse-form-focus();} + } + } + + // + // Placeholder + // + + .uk-input:-ms-input-placeholder { color: $inverse-form-placeholder-color !important; } + .uk-input::placeholder { color: $inverse-form-placeholder-color; } + + .uk-textarea:-ms-input-placeholder { color: $inverse-form-placeholder-color !important; } + .uk-textarea::placeholder { color: $inverse-form-placeholder-color; } + + // + // Radio and checkbox + // + + .uk-select:not([multiple]):not([size]) { @include svg-fill($internal-form-select-image, "#000", $inverse-form-select-icon-color); } + + // + // Radio and checkbox + // + + .uk-radio, + .uk-checkbox { + background-color: $inverse-form-radio-background; + @if(mixin-exists(hook-inverse-form-radio)) {@include hook-inverse-form-radio();} + } + + // Focus + .uk-radio:focus, + .uk-checkbox:focus { + @if(mixin-exists(hook-inverse-form-radio-focus)) {@include hook-inverse-form-radio-focus();} + } + + // Checked + .uk-radio:checked, + .uk-checkbox:checked, + .uk-checkbox:indeterminate { + background-color: $inverse-form-radio-checked-background; + @if(mixin-exists(hook-inverse-form-radio-checked)) {@include hook-inverse-form-radio-checked();} + } + + // Focus + .uk-radio:checked:focus, + .uk-checkbox:checked:focus, + .uk-checkbox:indeterminate:focus { + background-color: $inverse-form-radio-checked-focus-background; + @if(mixin-exists(hook-inverse-form-radio-checked-focus)) {@include hook-inverse-form-radio-checked-focus();} + } + + // Icon + .uk-radio:checked { @include svg-fill($internal-form-radio-image, "#000", $inverse-form-radio-checked-icon-color); } + .uk-checkbox:checked { @include svg-fill($internal-form-checkbox-image, "#000", $inverse-form-radio-checked-icon-color); } + .uk-checkbox:indeterminate { @include svg-fill($internal-form-checkbox-indeterminate-image, "#000", $inverse-form-radio-checked-icon-color); } + + // Label + .uk-form-label { + @if(mixin-exists(hook-inverse-form-label)) {@include hook-inverse-form-label();} + } + +} +@mixin hook-grid-misc(){} +@mixin hook-inverse-component-grid(){ + + .uk-grid-divider > :not(.uk-first-column)::before { border-left-color: $inverse-grid-divider-border; } + .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before { border-top-color: $inverse-grid-divider-border; } + +} +@mixin hook-heading-primary(){} +@mixin hook-heading-hero(){} +@mixin hook-heading-divider(){} +@mixin hook-heading-bullet(){} +@mixin hook-heading-line(){} +@mixin hook-heading-misc(){} +@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(){} +@mixin hook-inverse-component-heading(){ + + .uk-heading-primary { + @if(mixin-exists(hook-inverse-heading-primary)) {@include hook-inverse-heading-primary();} + } + + .uk-heading-hero { + @if(mixin-exists(hook-inverse-heading-hero)) {@include hook-inverse-heading-hero();} + } + + .uk-heading-divider { + border-bottom-color: $inverse-heading-divider-border; + @if(mixin-exists(hook-inverse-heading-divider)) {@include hook-inverse-heading-divider();} + } + + .uk-heading-bullet::before { + border-left-color: $inverse-heading-bullet-border; + @if(mixin-exists(hook-inverse-heading-bullet)) {@include hook-inverse-heading-bullet();} + } + + .uk-heading-line > ::before, + .uk-heading-line > ::after { + border-bottom-color: $inverse-heading-line-border; + @if(mixin-exists(hook-inverse-heading-line)) {@include hook-inverse-heading-line();} + } + +} +@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(){} +@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(){} +@mixin hook-inverse-component-icon(){ + + // + // Link + // + + .uk-icon-link { + color: $inverse-icon-link-color; + @if(mixin-exists(hook-inverse-icon-link)) {@include hook-inverse-icon-link();} + } + + .uk-icon-link:hover, + .uk-icon-link:focus { + color: $inverse-icon-link-hover-color; + @if(mixin-exists(hook-inverse-icon-link-hover)) {@include hook-inverse-icon-link-hover();} + } + + .uk-icon-link:active, + .uk-active > .uk-icon-link { + color: $inverse-icon-link-active-color; + @if(mixin-exists(hook-inverse-icon-link-active)) {@include hook-inverse-icon-link-active();} + } + + // + // Button + // + + .uk-icon-button { + background-color: $inverse-icon-button-background; + color: $inverse-icon-button-color; + @if(mixin-exists(hook-inverse-icon-button)) {@include hook-inverse-icon-button();} + } + + .uk-icon-button:hover, + .uk-icon-button:focus { + background-color: $inverse-icon-button-hover-background; + color: $inverse-icon-button-hover-color; + @if(mixin-exists(hook-inverse-icon-button-hover)) {@include hook-inverse-icon-button-hover();} + } + + .uk-icon-button:active { + background-color: $inverse-icon-button-active-background; + color: $inverse-icon-button-active-color; + @if(mixin-exists(hook-inverse-icon-button-active)) {@include hook-inverse-icon-button-active();} + } + +} +@mixin hook-iconnav(){} +@mixin hook-iconnav-item(){} +@mixin hook-iconnav-item-hover(){} +@mixin hook-iconnav-item-active(){} +@mixin hook-iconnav-misc(){} +@mixin hook-inverse-iconnav-item(){} +@mixin hook-inverse-iconnav-item-hover(){} +@mixin hook-inverse-iconnav-item-active(){} +@mixin hook-inverse-component-iconnav(){ + + .uk-iconnav > * > a { + color: $inverse-iconnav-item-color; + @if(mixin-exists(hook-inverse-iconnav-item)) {@include hook-inverse-iconnav-item();} + } + + .uk-iconnav > * > a:hover, + .uk-iconnav > * > a:focus { + color: $inverse-iconnav-item-hover-color; + @if(mixin-exists(hook-inverse-iconnav-item-hover)) {@include hook-inverse-iconnav-item-hover();} + } + + .uk-iconnav > .uk-active > a { + color: $inverse-iconnav-item-active-color; + @if(mixin-exists(hook-inverse-iconnav-item-active)) {@include hook-inverse-iconnav-item-active();} + } + +} +@mixin hook-inverse-component-link(){ + + a.uk-link-muted, + .uk-link-muted a { + color: $inverse-link-muted-color; + @if(mixin-exists(hook-inverse-link-muted)) {@include hook-inverse-link-muted();} + } + + a.uk-link-muted:hover, + .uk-link-muted a:hover { + color: $inverse-link-muted-hover-color; + @if(mixin-exists(hook-inverse-link-muted-hover)) {@include hook-inverse-link-muted-hover();} + } + + a.uk-link-text:hover, + .uk-link-text a:hover { + color: $inverse-link-text-hover-color; + @if(mixin-exists(hook-inverse-link-text-hover)) {@include hook-inverse-link-text-hover();} + } + + a.uk-link-heading:hover, + .uk-link-heading a:hover { + color: $inverse-link-heading-hover-color; + @if(mixin-exists(hook-inverse-link-heading-hover)) {@include hook-inverse-link-heading-hover();} + } + +} +@mixin hook-inverse-component-list(){ + + .uk-list-divider > li:nth-child(n+2) { + border-top-color: $inverse-list-divider-border; + @if(mixin-exists(hook-inverse-list-divider)) {@include hook-inverse-list-divider();} + } + + .uk-list-striped > li { + @if(mixin-exists(hook-inverse-list-striped)) {@include hook-inverse-list-striped();} + } + + .uk-list-striped > li:nth-of-type(odd) { background-color: $inverse-list-striped-background; } + + .uk-list-bullet > li::before { + @include svg-fill($internal-list-bullet-image, "#000", $inverse-list-bullet-icon-color); + @if(mixin-exists(hook-inverse-list-bullet)) {@include hook-inverse-list-bullet();} + } + +} +@mixin hook-inverse-component-totop(){ + + .uk-totop { + color: $inverse-totop-color; + @if(mixin-exists(hook-inverse-totop)) {@include hook-inverse-totop();} + } + + .uk-totop:hover, + .uk-totop:focus { + color: $inverse-totop-hover-color; + @if(mixin-exists(hook-inverse-totop-hover)) {@include hook-inverse-totop-hover();} + } + + .uk-totop:active { + color: $inverse-totop-active-color; + @if(mixin-exists(hook-inverse-totop-active)) {@include hook-inverse-totop-active();} + } + +} +@mixin hook-inverse-component-label(){ + + .uk-label { + background-color: $inverse-label-background; + color: $inverse-label-color; + @if(mixin-exists(hook-inverse-label)) {@include hook-inverse-label();} + } + +} +@mixin hook-inverse-component-search(){ + + // + // Input + // + + .uk-search-input { color: $inverse-search-color; } + + .uk-search-input:-ms-input-placeholder { color: $inverse-search-placeholder-color !important; } + .uk-search-input::placeholder { color: $inverse-search-placeholder-color; } + + + // + // Icon + // + + .uk-search .uk-search-icon { color: $inverse-search-icon-color; } + + .uk-search .uk-search-icon:hover { color: $inverse-search-icon-color; } + + // + // Style modifier + // + + .uk-search-default .uk-search-input { + background-color: $inverse-search-default-background; + @if(mixin-exists(hook-inverse-search-default-input)) {@include hook-inverse-search-default-input();} + } + .uk-search-default .uk-search-input:focus { + background-color: $inverse-search-default-background; + @if(mixin-exists(hook-inverse-search-default-input-focus)) {@include hook-inverse-search-default-input-focus();} + } + + .uk-search-navbar .uk-search-input { + background-color: $inverse-search-navbar-background; + @if(mixin-exists(hook-inverse-search-navbar-input)) {@include hook-inverse-search-navbar-input();} + } + + .uk-search-large .uk-search-input { + background-color: $inverse-search-large-background; + @if(mixin-exists(hook-inverse-search-large-input)) {@include hook-inverse-search-large-input();} + } + + // + // Toggle + // + + .uk-search-toggle { + color: $inverse-search-toggle-color; + @if(mixin-exists(hook-inverse-search-toggle)) {@include hook-inverse-search-toggle();} + } + + .uk-search-toggle:hover, + .uk-search-toggle:focus { + color: $inverse-search-toggle-hover-color; + @if(mixin-exists(hook-inverse-search-toggle-hover)) {@include hook-inverse-search-toggle-hover();} + } + +} +@mixin hook-inverse-component-nav(){ + + // + // Parent icon modifier + // + + .uk-nav-parent-icon > .uk-parent > a::after { + @include svg-fill($internal-nav-parent-close-image, "#000", $inverse-nav-parent-icon-color); + @if(mixin-exists(hook-inverse-nav-parent-icon)) {@include hook-inverse-nav-parent-icon();} + } + + .uk-nav-parent-icon > .uk-parent.uk-open > a::after { @include svg-fill($internal-nav-parent-open-image, "#000", $inverse-nav-parent-icon-color); } + + // + // Default + // + + .uk-nav-default > li > a { + color: $inverse-nav-default-item-color; + @if(mixin-exists(hook-inverse-nav-default-item)) {@include hook-inverse-nav-default-item();} + } + + .uk-nav-default > li > a:hover, + .uk-nav-default > li > a:focus { + color: $inverse-nav-default-item-hover-color; + @if(mixin-exists(hook-inverse-nav-default-item-hover)) {@include hook-inverse-nav-default-item-hover();} + } + + .uk-nav-default > li.uk-active > a { + color: $inverse-nav-default-item-active-color; + @if(mixin-exists(hook-inverse-nav-default-item-active)) {@include hook-inverse-nav-default-item-active();} + } + + .uk-nav-default .uk-nav-header { + color: $inverse-nav-default-header-color; + @if(mixin-exists(hook-inverse-nav-default-header)) {@include hook-inverse-nav-default-header();} + } + + .uk-nav-default .uk-nav-divider { + border-top-color: $inverse-nav-default-divider-border; + @if(mixin-exists(hook-inverse-nav-default-divider)) {@include hook-inverse-nav-default-divider();} + } + + .uk-nav-default .uk-nav-sub a { color: $inverse-nav-default-sublist-item-color; } + + .uk-nav-default .uk-nav-sub a:hover, + .uk-nav-default .uk-nav-sub a:focus { color: $inverse-nav-default-sublist-item-hover-color; } + + // + // Primary + // + + .uk-nav-primary > li > a { + color: $inverse-nav-primary-item-color; + @if(mixin-exists(hook-inverse-nav-primary-item)) {@include hook-inverse-nav-primary-item();} + } + + .uk-nav-primary > li > a:hover, + .uk-nav-primary > li > a:focus { + color: $inverse-nav-primary-item-hover-color; + @if(mixin-exists(hook-inverse-nav-primary-item-hover)) {@include hook-inverse-nav-primary-item-hover();} + } + + .uk-nav-primary > li.uk-active > a { + color: $inverse-nav-primary-item-active-color; + @if(mixin-exists(hook-inverse-nav-primary-item-active)) {@include hook-inverse-nav-primary-item-active();} + } + + .uk-nav-primary .uk-nav-header { + color: $inverse-nav-primary-header-color; + @if(mixin-exists(hook-inverse-nav-primary-header)) {@include hook-inverse-nav-primary-header();} + } + + .uk-nav-primary .uk-nav-divider { + border-top-color: $inverse-nav-primary-divider-border; + @if(mixin-exists(hook-inverse-nav-primary-divider)) {@include hook-inverse-nav-primary-divider();} + } + + .uk-nav-primary .uk-nav-sub a { color: $inverse-nav-primary-sublist-item-color; } + + .uk-nav-primary .uk-nav-sub a:hover, + .uk-nav-primary .uk-nav-sub a:focus { color: $inverse-nav-primary-sublist-item-hover-color; } + +} +@mixin hook-inverse-component-navbar(){ + + .uk-navbar-nav > li > a { + color: $inverse-navbar-nav-item-color; + @if(mixin-exists(hook-inverse-navbar-nav-item)) {@include hook-inverse-navbar-nav-item();} + } + + .uk-navbar-nav > li:hover > a, + .uk-navbar-nav > li > a:focus, + .uk-navbar-nav > li > a.uk-open { + color: $inverse-navbar-nav-item-hover-color; + @if(mixin-exists(hook-inverse-navbar-nav-item-hover)) {@include hook-inverse-navbar-nav-item-hover();} + } + + .uk-navbar-nav > li > a:active { + color: $inverse-navbar-nav-item-onclick-color; + @if(mixin-exists(hook-inverse-navbar-nav-item-onclick)) {@include hook-inverse-navbar-nav-item-onclick();} + } + + .uk-navbar-nav > li.uk-active > a { + color: $inverse-navbar-nav-item-active-color; + @if(mixin-exists(hook-inverse-navbar-nav-item-active)) {@include hook-inverse-navbar-nav-item-active();} + } + + .uk-navbar-item { + color: $inverse-navbar-item-color; + @if(mixin-exists(hook-inverse-navbar-item)) {@include hook-inverse-navbar-item();} + } + + .uk-navbar-toggle { + color: $inverse-navbar-toggle-color; + @if(mixin-exists(hook-inverse-navbar-toggle)) {@include hook-inverse-navbar-toggle();} + } + + .uk-navbar-toggle:hover, + .uk-navbar-toggle:focus, + .uk-navbar-toggle.uk-open { + color: $inverse-navbar-toggle-hover-color; + @if(mixin-exists(hook-inverse-navbar-toggle-hover)) {@include hook-inverse-navbar-toggle-hover();} + } + +} +@mixin hook-inverse-component-subnav(){ + + .uk-subnav > * > :first-child { + color: $inverse-subnav-item-color; + @if(mixin-exists(hook-inverse-subnav-item)) {@include hook-inverse-subnav-item();} + } + + .uk-subnav > * > a:hover, + .uk-subnav > * > a:focus { + color: $inverse-subnav-item-hover-color; + @if(mixin-exists(hook-inverse-subnav-item-hover)) {@include hook-inverse-subnav-item-hover();} + } + + .uk-subnav > .uk-active > a { + color: $inverse-subnav-item-active-color; + @if(mixin-exists(hook-inverse-subnav-item-active)) {@include hook-inverse-subnav-item-active();} + } + + // + // Divider + // + + .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before { + border-left-color: $inverse-subnav-divider-border; + @if(mixin-exists(hook-inverse-subnav-divider)) {@include hook-inverse-subnav-divider();} + } + + // + // Pill + // + + .uk-subnav-pill > * > :first-child { + background-color: $inverse-subnav-pill-item-background; + color: $inverse-subnav-pill-item-color; + @if(mixin-exists(hook-inverse-subnav-pill-item)) {@include hook-inverse-subnav-pill-item();} + } + + .uk-subnav-pill > * > a:hover, + .uk-subnav-pill > * > a:focus { + background-color: $inverse-subnav-pill-item-hover-background; + color: $inverse-subnav-pill-item-hover-color; + @if(mixin-exists(hook-inverse-subnav-pill-item-hover)) {@include hook-inverse-subnav-pill-item-hover();} + } + + .uk-subnav-pill > * > a:active { + background-color: $inverse-subnav-pill-item-onclick-background; + color: $inverse-subnav-pill-item-onclick-color; + @if(mixin-exists(hook-inverse-subnav-pill-item-onclick)) {@include hook-inverse-subnav-pill-item-onclick();} + } + + .uk-subnav-pill > .uk-active > a { + background-color: $inverse-subnav-pill-item-active-background; + color: $inverse-subnav-pill-item-active-color; + @if(mixin-exists(hook-inverse-subnav-pill-item-active)) {@include hook-inverse-subnav-pill-item-active();} + } + + // + // Disabled + // + + .uk-subnav > .uk-disabled > a { + color: $inverse-subnav-item-disabled-color; + @if(mixin-exists(hook-inverse-subnav-item-disabled)) {@include hook-inverse-subnav-item-disabled();} + } + +} +@mixin hook-inverse-component-pagination(){ + + .uk-pagination > * > * { + color: $inverse-pagination-item-color; + @if(mixin-exists(hook-inverse-pagination-item)) {@include hook-inverse-pagination-item();} + } + + .uk-pagination > * > :hover, + .uk-pagination > * > :focus { + color: $inverse-pagination-item-hover-color; + @if(mixin-exists(hook-inverse-pagination-item-hover)) {@include hook-inverse-pagination-item-hover();} + } + + .uk-pagination > .uk-active > * { + color: $inverse-pagination-item-active-color; + @if(mixin-exists(hook-inverse-pagination-item-active)) {@include hook-inverse-pagination-item-active();} + } + + .uk-pagination > .uk-disabled > * { + color: $inverse-pagination-item-disabled-color; + @if(mixin-exists(hook-inverse-pagination-item-disabled)) {@include hook-inverse-pagination-item-disabled();} + } + +} +@mixin hook-inverse-component-tab(){ + + .uk-tab { + @if(mixin-exists(hook-inverse-tab)) {@include hook-inverse-tab();} + } + + .uk-tab > * > a { + color: $inverse-tab-item-color; + @if(mixin-exists(hook-inverse-tab-item)) {@include hook-inverse-tab-item();} + } + + .uk-tab > * > a:hover, + .uk-tab > * > a:focus{ + color: $inverse-tab-item-hover-color; + @if(mixin-exists(hook-inverse-tab-item-hover)) {@include hook-inverse-tab-item-hover();} + } + + .uk-tab > .uk-active > a { + color: $inverse-tab-item-active-color; + @if(mixin-exists(hook-inverse-tab-item-active)) {@include hook-inverse-tab-item-active();} + } + + .uk-tab > .uk-disabled > a { + color: $inverse-tab-item-disabled-color; + @if(mixin-exists(hook-inverse-tab-item-disabled)) {@include hook-inverse-tab-item-disabled();} + } + +} +@mixin hook-inverse-component-slidenav(){ + + .uk-slidenav { + color: $inverse-slidenav-color; + @if(mixin-exists(hook-inverse-slidenav)) {@include hook-inverse-slidenav();} + } + + .uk-slidenav:hover, + .uk-slidenav:focus { + color: $inverse-slidenav-hover-color; + @if(mixin-exists(hook-inverse-slidenav-hover)) {@include hook-inverse-slidenav-hover();} + } + + .uk-slidenav:active { + color: $inverse-slidenav-active-color; + @if(mixin-exists(hook-inverse-slidenav-active)) {@include hook-inverse-slidenav-active();} + } + +} +@mixin hook-inverse-component-text(){ + + .uk-text-lead { + color: $inverse-text-lead-color; + @if(mixin-exists(hook-inverse-text-lead)) {@include hook-inverse-text-lead();} + } + + .uk-text-meta { + color: $inverse-text-meta-color; + @if(mixin-exists(hook-inverse-text-meta)) {@include hook-inverse-text-meta();} + } + + .uk-text-muted { color: $inverse-text-muted-color !important; } + .uk-text-primary { color: $inverse-text-primary-color !important; } + +} +@mixin hook-inverse-component-utility(){ + + .uk-dropcap::first-letter, + .uk-dropcap p:first-of-type::first-letter { + @if(mixin-exists(hook-inverse-dropcap)) {@include hook-inverse-dropcap();} + } + + .uk-leader-fill { + @if(mixin-exists(hook-inverse-leader)) {@include hook-inverse-leader();} + } + + .uk-logo { + color: $inverse-logo-color; + @if(mixin-exists(hook-inverse-logo)) {@include hook-inverse-logo();} + } + + .uk-logo:hover, + .uk-logo:focus { + color: $inverse-logo-hover-color; + @if(mixin-exists(hook-inverse-logo-hover)) {@include hook-inverse-logo-hover();} + } + + .uk-logo > :not(.uk-logo-inverse):not(:only-of-type) { display: none; } + .uk-logo-inverse { display: inline; } + +} +@mixin hook-inverse(){ + @include hook-inverse-component-base(); + @include hook-inverse-component-link(); + @include hook-inverse-component-heading(); + @include hook-inverse-component-divider(); + @include hook-inverse-component-list(); + @include hook-inverse-component-icon(); + @include hook-inverse-component-form(); + @include hook-inverse-component-button(); + @include hook-inverse-component-grid(); + @include hook-inverse-component-close(); + @include hook-inverse-component-totop(); + @include hook-inverse-component-badge(); + @include hook-inverse-component-label(); + @include hook-inverse-component-article(); + @include hook-inverse-component-search(); + @include hook-inverse-component-nav(); + @include hook-inverse-component-navbar(); + @include hook-inverse-component-subnav(); + @include hook-inverse-component-breadcrumb(); + @include hook-inverse-component-pagination(); + @include hook-inverse-component-tab(); + @include hook-inverse-component-slidenav(); + @include hook-inverse-component-dotnav(); + @include hook-inverse-component-accordion(); + @include hook-inverse-component-iconnav(); + @include hook-inverse-component-text(); + @include hook-inverse-component-column(); + @include hook-inverse-component-utility(); +} +@mixin hook-label(){} +@mixin hook-label-success(){} +@mixin hook-label-warning(){} +@mixin hook-label-danger(){} +@mixin hook-label-misc(){} +@mixin hook-inverse-label(){} +@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(){} +@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(){} +@mixin hook-inverse-link-muted(){} +@mixin hook-inverse-link-muted-hover(){} +@mixin hook-inverse-link-text-hover(){} +@mixin hook-inverse-link-heading-hover(){} +@mixin hook-list-divider(){} +@mixin hook-list-striped(){} +@mixin hook-list-bullet(){} +@mixin hook-list-misc(){} +@mixin hook-inverse-list-divider(){} +@mixin hook-inverse-list-striped(){} +@mixin hook-inverse-list-bullet(){} +@mixin hook-margin-misc(){} +@mixin hook-marker(){} +@mixin hook-marker-hover(){} +@mixin hook-marker-misc(){} +@mixin hook-inverse-marker(){} +@mixin hook-inverse-marker-hover(){} +@mixin hook-inverse-component-marker(){ + + .uk-marker { + background: $inverse-marker-background; + color: $inverse-marker-color; + @if(mixin-exists(hook-inverse-marker)) {@include hook-inverse-marker();} + } + + .uk-marker:hover, + .uk-marker:focus { + color: $inverse-marker-hover-color; + @if(mixin-exists(hook-inverse-marker-hover)) {@include hook-inverse-marker-hover();} + } + +} +@mixin hook-modal(){} +@mixin hook-modal-dialog(){} +@mixin hook-modal-full(){} +@mixin hook-modal-body(){} +@mixin hook-modal-header(){} +@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(){} +@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(){} +@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(){} +@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(){} +@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(){} +@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(){} +@mixin hook-offcanvas-bar(){} +@mixin hook-offcanvas-close(){} +@mixin hook-offcanvas-overlay(){} +@mixin hook-offcanvas-misc(){} +@mixin hook-overlay(){} +@mixin hook-overlay-icon(){} +@mixin hook-overlay-default(){} +@mixin hook-overlay-primary(){} +@mixin hook-overlay-misc(){} +@mixin hook-padding-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(){} +@mixin hook-inverse-pagination-item(){} +@mixin hook-inverse-pagination-item-hover(){} +@mixin hook-inverse-pagination-item-active(){} +@mixin hook-inverse-pagination-item-disabled(){} +@mixin hook-placeholder(){} +@mixin hook-placeholder-misc(){} +@mixin hook-position-misc(){} +@mixin hook-print(){} +@mixin hook-progress(){} +@mixin hook-progress-bar(){} +@mixin hook-progress-misc(){} +@mixin hook-search-input(){} +@mixin hook-search-default-input(){} +@mixin hook-search-default-input-focus(){} +@mixin hook-search-navbar-input(){} +@mixin hook-search-large-input(){} +@mixin hook-search-toggle(){} +@mixin hook-search-toggle-hover(){} +@mixin hook-search-misc(){} +@mixin hook-inverse-search-default-input(){} +@mixin hook-inverse-search-default-input-focus(){} +@mixin hook-inverse-search-navbar-input(){} +@mixin hook-inverse-search-large-input(){} +@mixin hook-inverse-search-toggle(){} +@mixin hook-inverse-search-toggle-hover(){} +@mixin hook-section(){} +@mixin hook-section-default(){} +@mixin hook-section-muted(){} +@mixin hook-section-primary(){} +@mixin hook-section-secondary(){} +@mixin hook-section-overlap(){} +@mixin hook-section-misc(){} +@mixin hook-slidenav(){} +@mixin hook-slidenav-hover(){} +@mixin hook-slidenav-active(){} +@mixin hook-slidenav-previous(){} +@mixin hook-slidenav-next(){} +@mixin hook-slidenav-large(){} +@mixin hook-slidenav-container(){} +@mixin hook-slidenav-misc(){} +@mixin hook-inverse-slidenav(){} +@mixin hook-inverse-slidenav-hover(){} +@mixin hook-inverse-slidenav-active(){} +@mixin hook-slider(){} +@mixin hook-slider-misc(){} +@mixin hook-slideshow(){} +@mixin hook-slideshow-misc(){} +@mixin hook-sortable(){} +@mixin hook-sortable-drag(){} +@mixin hook-sortable-placeholder(){} +@mixin hook-sortable-empty(){} +@mixin hook-sortable-misc(){} +@mixin hook-spinner(){} +@mixin hook-spinner-misc(){} +@mixin hook-sticky-misc(){} +@mixin hook-subnav(){} +@mixin hook-subnav-item(){} +@mixin hook-subnav-item-hover(){} +@mixin hook-subnav-item-active(){} +@mixin hook-subnav-divider(){} +@mixin hook-subnav-pill-item(){} +@mixin hook-subnav-pill-item-hover(){} +@mixin hook-subnav-pill-item-onclick(){} +@mixin hook-subnav-pill-item-active(){} +@mixin hook-subnav-item-disabled(){} +@mixin hook-subnav-misc(){} +@mixin hook-inverse-subnav-item(){} +@mixin hook-inverse-subnav-item-hover(){} +@mixin hook-inverse-subnav-item-active(){} +@mixin hook-inverse-subnav-divider(){} +@mixin hook-inverse-subnav-pill-item(){} +@mixin hook-inverse-subnav-pill-item-hover(){} +@mixin hook-inverse-subnav-pill-item-onclick(){} +@mixin hook-inverse-subnav-pill-item-active(){} +@mixin hook-inverse-subnav-item-disabled(){} +@mixin hook-switcher-misc(){} +@mixin hook-tab(){} +@mixin hook-tab-item(){} +@mixin hook-tab-item-hover(){} +@mixin hook-tab-item-active(){} +@mixin hook-tab-item-disabled(){} +@mixin hook-tab-bottom(){} +@mixin hook-tab-bottom-item(){} +@mixin hook-tab-left(){} +@mixin hook-tab-right(){} +@mixin hook-tab-left-item(){} +@mixin hook-tab-right-item(){} +@mixin hook-tab-misc(){} +@mixin hook-inverse-tab(){} +@mixin hook-inverse-tab-item(){} +@mixin hook-inverse-tab-item-hover(){} +@mixin hook-inverse-tab-item-active(){} +@mixin hook-inverse-tab-item-disabled(){} +@mixin hook-table(){} +@mixin hook-table-header-cell(){} +@mixin hook-table-cell(){} +@mixin hook-table-footer(){} +@mixin hook-table-caption(){} +@mixin hook-table-row-active(){} +@mixin hook-table-divider(){} +@mixin hook-table-striped(){} +@mixin hook-table-hover(){} +@mixin hook-table-small(){} +@mixin hook-table-large(){} +@mixin hook-table-misc(){} +@mixin hook-inverse-table-header-cell(){} +@mixin hook-inverse-table-caption(){} +@mixin hook-inverse-table-row-active(){} +@mixin hook-inverse-table-divider(){} +@mixin hook-inverse-table-striped(){} +@mixin hook-inverse-table-hover(){} +@mixin hook-inverse-component-table(){ + + .uk-table th { + color: $inverse-table-header-cell-color; + @if(mixin-exists(hook-inverse-table-header-cell)) {@include hook-inverse-table-header-cell();} + } + + .uk-table caption { + color: $inverse-table-caption-color; + @if(mixin-exists(hook-inverse-table-caption)) {@include hook-inverse-table-caption();} + } + + .uk-table > tr.uk-active, + .uk-table tbody tr.uk-active { + background: $inverse-table-row-active-background; + @if(mixin-exists(hook-inverse-table-row-active)) {@include hook-inverse-table-row-active();} + } + + .uk-table-divider > tr:not(:first-child), + .uk-table-divider > :not(:first-child) > tr, + .uk-table-divider > :first-child > tr:not(:first-child) { + border-top-color: $inverse-table-divider-border; + @if(mixin-exists(hook-inverse-table-divider)) {@include hook-inverse-table-divider();} + } + + .uk-table-striped > tr:nth-of-type(odd), + .uk-table-striped tbody tr:nth-of-type(odd) { + background: $inverse-table-striped-row-background; + @if(mixin-exists(hook-inverse-table-striped)) {@include hook-inverse-table-striped();} + } + + .uk-table-hover > tr:hover, + .uk-table-hover tbody tr:hover { + background: $inverse-table-hover-row-background; + @if(mixin-exists(hook-inverse-table-hover)) {@include hook-inverse-table-hover();} + } + +} +@mixin hook-text-lead(){} +@mixin hook-text-meta(){} +@mixin hook-text-small(){} +@mixin hook-text-large(){} +@mixin hook-text-background(){} +@mixin hook-text-misc(){} +@mixin hook-inverse-text-lead(){} +@mixin hook-inverse-text-meta(){} +@mixin hook-thumbnav(){} +@mixin hook-thumbnav-item(){} +@mixin hook-thumbnav-item-hover(){} +@mixin hook-thumbnav-item-active(){} +@mixin hook-thumbnav-misc(){} +@mixin hook-inverse-thumbnav-item(){} +@mixin hook-inverse-thumbnav-item-hover(){} +@mixin hook-inverse-thumbnav-item-active(){} +@mixin hook-inverse-component-thumbnav(){ + + .uk-thumbnav > * > * { + @if(mixin-exists(hook-inverse-thumbnav-item)) {@include hook-inverse-thumbnav-item();} + } + + .uk-thumbnav > * > :hover, + .uk-thumbnav > * > :focus { + @if(mixin-exists(hook-inverse-thumbnav-item-hover)) {@include hook-inverse-thumbnav-item-hover();} + } + + .uk-thumbnav > .uk-active > * { + @if(mixin-exists(hook-inverse-thumbnav-item-active)) {@include hook-inverse-thumbnav-item-active();} + } + +} +@mixin hook-tile(){} +@mixin hook-tile-default(){} +@mixin hook-tile-muted(){} +@mixin hook-tile-primary(){} +@mixin hook-tile-secondary(){} +@mixin hook-tile-misc(){} +@mixin hook-tooltip(){} +@mixin hook-tooltip-misc(){} +@mixin hook-totop(){} +@mixin hook-totop-hover(){} +@mixin hook-totop-active(){} +@mixin hook-totop-misc(){} +@mixin hook-inverse-totop(){} +@mixin hook-inverse-totop-hover(){} +@mixin hook-inverse-totop-active(){} +@mixin hook-transition-misc(){} +@mixin hook-panel-scrollable(){} +@mixin hook-box-shadow-bottom(){} +@mixin hook-dropcap(){} +@mixin hook-leader(){} +@mixin hook-logo(){} +@mixin hook-logo-hover(){} +@mixin hook-utility-misc(){} +@mixin hook-inverse-dropcap(){} +@mixin hook-inverse-leader(){} +@mixin hook-inverse-logo(){} +@mixin hook-inverse-logo-hover(){} +@mixin hook-visibility-misc(){} +@mixin hook-width-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/_import.scss b/_sass/_sass/uikit/theme/_import.scss new file mode 100644 index 00000000..b08e50b6 --- /dev/null +++ b/_sass/_sass/uikit/theme/_import.scss @@ -0,0 +1,78 @@ +// Base +@import "variables.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"; +@import "button.scss"; + +// Layout +@import "section.scss"; +@import "container.scss"; +@import "grid.scss"; +@import "tile.scss"; +@import "card.scss"; + +// Common +@import "close.scss"; +@import "spinner.scss"; +@import "marker.scss"; +@import "totop.scss"; +@import "alert.scss"; +@import "badge.scss"; +@import "label.scss"; +@import "overlay.scss"; +@import "article.scss"; +@import "comment.scss"; +@import "search.scss"; + +// Navs +@import "nav.scss"; +@import "navbar.scss"; +@import "subnav.scss"; +@import "breadcrumb.scss"; +@import "pagination.scss"; +@import "tab.scss"; +@import "slidenav.scss"; +@import "dotnav.scss"; +@import "thumbnav.scss"; + +// JavaScript +@import "accordion.scss"; +@import "drop.scss"; +@import "dropdown.scss"; +@import "modal.scss"; +@import "lightbox.scss"; +@import "sticky.scss"; +@import "offcanvas.scss"; + +// 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 "background.scss"; +@import "align.scss"; +@import "utility.scss"; +@import "margin.scss"; +@import "padding.scss"; +@import "position.scss"; +@import "transition.scss"; +@import "inverse.scss"; diff --git a/_sass/_sass/uikit/theme/accordion.scss b/_sass/_sass/uikit/theme/accordion.scss new file mode 100644 index 00000000..3e44609f --- /dev/null +++ b/_sass/_sass/uikit/theme/accordion.scss @@ -0,0 +1,58 @@ +// +// Component: Accordion +// +// ======================================================================== + + +// Variables +// ======================================================================== + +// +// New +// + +$accordion-icon-color: $global-color !default; +$internal-accordion-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%3C%2Fsvg%3E" !default; +$internal-accordion-close-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%20%2F%3E%0A%3C%2Fsvg%3E" !default; + + +// Component +// ======================================================================== + +// @mixin hook-accordion(){} + + +// Item +// ======================================================================== + +// @mixin hook-accordion-item(){} + + +// Title +// ======================================================================== + + + +// @mixin hook-accordion-title-hover(){} + + +// Content +// ======================================================================== + +// @mixin hook-accordion-content(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-accordion-misc(){} + +// Inverse +// ======================================================================== + +// @mixin hook-inverse-accordion-item(){} + +// @mixin hook-inverse-accordion-title(){} +// @mixin hook-inverse-accordion-title-hover(){} + + diff --git a/_sass/_sass/uikit/theme/alert.scss b/_sass/_sass/uikit/theme/alert.scss new file mode 100644 index 00000000..c4baa7ca --- /dev/null +++ b/_sass/_sass/uikit/theme/alert.scss @@ -0,0 +1,46 @@ +// +// Component: Alert +// +// ======================================================================== + + +// Variables +// ======================================================================== + +// +// New +// + +$alert-close-opacity: 0.4 !default; +$alert-close-hover-opacity: 0.8 !default; + + +// Component +// ======================================================================== + +// @mixin hook-alert(){} + + +// Close +// ======================================================================== + + + + + + +// Style modifiers +// ======================================================================== + +// @mixin hook-alert-primary(){} + +// @mixin hook-alert-success(){} + +// @mixin hook-alert-warning(){} + +// @mixin hook-alert-danger(){} + + +// Miscellaneous +// ======================================================================== + diff --git a/_sass/_sass/uikit/theme/align.scss b/_sass/_sass/uikit/theme/align.scss new file mode 100644 index 00000000..290abd41 --- /dev/null +++ b/_sass/_sass/uikit/theme/align.scss @@ -0,0 +1,14 @@ +// +// Component: Align +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-align-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/animation.scss b/_sass/_sass/uikit/theme/animation.scss new file mode 100644 index 00000000..03ebbc6e --- /dev/null +++ b/_sass/_sass/uikit/theme/animation.scss @@ -0,0 +1,14 @@ +// +// Component: Animation +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-animation-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/article.scss b/_sass/_sass/uikit/theme/article.scss new file mode 100644 index 00000000..a698e3ed --- /dev/null +++ b/_sass/_sass/uikit/theme/article.scss @@ -0,0 +1,51 @@ +// +// Component: Article +// +// ======================================================================== + + +// Variables +// ======================================================================== + +// +// New +// + +$article-meta-link-color: $article-meta-color !default; +$article-meta-link-hover-color: $global-color !default; + + +// Component +// ======================================================================== + +// @mixin hook-article(){} + + +// Adjacent sibling +// ======================================================================== + +// @mixin hook-article-adjacent(){} + + +// Title +// ======================================================================== + +// @mixin hook-article-title(){} + + +// Meta +// ======================================================================== + + + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-article-misc(){} + + +// Inverse +// ======================================================================== + +// @mixin hook-inverse-article-meta(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/background.scss b/_sass/_sass/uikit/theme/background.scss new file mode 100644 index 00000000..29e062e9 --- /dev/null +++ b/_sass/_sass/uikit/theme/background.scss @@ -0,0 +1,14 @@ +// +// Component: Background +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-background-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/badge.scss b/_sass/_sass/uikit/theme/badge.scss new file mode 100644 index 00000000..22ae9371 --- /dev/null +++ b/_sass/_sass/uikit/theme/badge.scss @@ -0,0 +1,29 @@ +// +// Component: Badge +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Component +// ======================================================================== + +// @mixin hook-badge(){} + +// @mixin hook-badge-hover(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-badge-misc(){} + + +// Inverse +// ======================================================================== + +// @mixin hook-inverse-badge(){} +// @mixin hook-inverse-badge-hover(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/base.scss b/_sass/_sass/uikit/theme/base.scss new file mode 100644 index 00000000..2c1c3356 --- /dev/null +++ b/_sass/_sass/uikit/theme/base.scss @@ -0,0 +1,116 @@ +// +// Component: Base +// +// ======================================================================== + + +// Variables +// ======================================================================== + +// +// New +// + +$base-code-padding-horizontal: 6px !default; +$base-code-padding-vertical: 2px !default; +$base-code-background: $global-muted-background !default; + +$base-blockquote-color: $global-emphasis-color !default; + +$base-blockquote-footer-color: $global-color !default; + +$base-pre-padding: 10px !default; +$base-pre-background: $global-background !default; +$base-pre-border-width: $global-border-width !default; +$base-pre-border: $global-border !default; +$base-pre-border-radius: 3px !default; + + +// Body +// ======================================================================== + +// @mixin hook-base-body(){} + + +// Links +// ======================================================================== + +// @mixin hook-base-link(){} + +// @mixin hook-base-link-hover(){} + + +// Text-level semantics +// ======================================================================== + + + + +// Headings +// ======================================================================== + +// @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(){} + + +// Horizontal rules +// ======================================================================== + +// @mixin hook-base-hr(){} + + +// Blockquotes +// ======================================================================== + + + + + + +// Preformatted text +// ======================================================================== + + + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-base-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-base-blockquote-color: $inverse-global-emphasis-color !default; +$inverse-base-blockquote-footer-color: $inverse-global-color !default; + +// @mixin hook-inverse-base-link(){} +// @mixin hook-inverse-base-link-hover(){} + + + +// @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-hr(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/breadcrumb.scss b/_sass/_sass/uikit/theme/breadcrumb.scss new file mode 100644 index 00000000..40c04e5d --- /dev/null +++ b/_sass/_sass/uikit/theme/breadcrumb.scss @@ -0,0 +1,45 @@ +// +// Component: Breadcrumb +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Component +// ======================================================================== + +// @mixin hook-breadcrumb(){} + + +// Items +// ======================================================================== + +// @mixin hook-breadcrumb-item(){} + +// @mixin hook-breadcrumb-item-hover(){} + +// @mixin hook-breadcrumb-item-disabled(){} + +// @mixin hook-breadcrumb-item-active(){} + +// @mixin hook-breadcrumb-divider(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-breadcrumb-misc(){} + + +// Inverse +// ======================================================================== + +// @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(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/button.scss b/_sass/_sass/uikit/theme/button.scss new file mode 100644 index 00000000..6acb5094 --- /dev/null +++ b/_sass/_sass/uikit/theme/button.scss @@ -0,0 +1,161 @@ +// +// Component: Button +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$button-line-height: $global-control-height - ($button-border-width * 2) !default; +$button-small-line-height: $global-control-small-height - ($button-border-width * 2) !default; +$button-large-line-height: $global-control-large-height - ($button-border-width * 2) !default; + +$button-font-size: $global-small-font-size !default; +$button-large-font-size: $global-small-font-size !default; + +$button-default-background: transparent !default; +$button-default-hover-background: transparent !default; +$button-default-active-background: transparent !default; + +$button-disabled-background: transparent !default; + +$button-text-color: $global-emphasis-color !default; +$button-text-hover-color: $global-emphasis-color !default; + +// +// New +// + +$button-text-transform: uppercase !default; + +$button-border-width: $global-border-width !default; + +$button-default-border: $global-border !default; +$button-default-hover-border: darken($global-border, 20%) !default; +$button-default-active-border: darken($global-border, 30%) !default; + +$button-disabled-border: $global-border !default; + +$button-text-border-width: $global-border-width !default; +$button-text-border: $button-text-hover-color !default; + + +// Component +// ======================================================================== + + + +// @mixin hook-button-hover(){} + +// @mixin hook-button-focus(){} + +// @mixin hook-button-active(){} + + +// Style modifiers +// ======================================================================== + + + + + + + +// +// Primary +// + + + +// @mixin hook-button-primary-hover(){} + +// @mixin hook-button-primary-active(){} + +// +// Secondary +// + + + +// @mixin hook-button-secondary-hover(){} + +// @mixin hook-button-secondary-active(){} + +// +// Danger +// + + + +// @mixin hook-button-danger-hover(){} + +// @mixin hook-button-danger-active(){} + + +// Disabled +// ======================================================================== + + + + +// Size modifiers +// ======================================================================== + +// @mixin hook-button-small(){} + +// @mixin hook-button-large(){} + + +// Text modifier +// ======================================================================== + + + + + + + + +// Link modifier +// ======================================================================== + +// @mixin hook-button-link(){} + + +// Miscellaneous +// ======================================================================== + + + + +// Inverse +// ======================================================================== + +$inverse-button-default-background: transparent !default; +$inverse-button-default-color: $inverse-global-emphasis-color !default; +$inverse-button-default-hover-background: transparent !default; +$inverse-button-default-hover-color: $inverse-global-emphasis-color !default; +$inverse-button-default-active-background: transparent !default; +$inverse-button-default-active-color: $inverse-global-emphasis-color !default; + +$inverse-button-text-color: $inverse-global-emphasis-color !default; +$inverse-button-text-hover-color: $inverse-global-emphasis-color !default; + + + + + +// @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-hover(){} +// @mixin hook-inverse-button-text-disabled(){} + +// @mixin hook-inverse-button-link(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/card.scss b/_sass/_sass/uikit/theme/card.scss new file mode 100644 index 00000000..9e8fe2bc --- /dev/null +++ b/_sass/_sass/uikit/theme/card.scss @@ -0,0 +1,125 @@ +// +// Component: Card +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$card-hover-background: $global-background !default; + +$card-default-background: $global-background !default; +$card-default-hover-background: $card-default-background !default; + +$card-primary-hover-background: $card-primary-background !default; + +$card-secondary-hover-background: $card-secondary-background !default; + +// +// New +// + +$card-hover-box-shadow: $global-large-box-shadow !default; + +$card-default-box-shadow: $global-medium-box-shadow !default; +$card-default-hover-box-shadow: $global-large-box-shadow !default; + +$card-default-header-border-width: $global-border-width !default; +$card-default-header-border: $global-border !default; + +$card-default-footer-border-width: $global-border-width !default; +$card-default-footer-border: $global-border !default; + +$card-primary-box-shadow: $global-medium-box-shadow !default; +$card-primary-hover-box-shadow: $global-large-box-shadow !default; + +$card-secondary-box-shadow: $global-medium-box-shadow !default; +$card-secondary-hover-box-shadow: $global-large-box-shadow !default; + + +// Component +// ======================================================================== + + + + +// Sections +// ======================================================================== + +// @mixin hook-card-body(){} + +// @mixin hook-card-header(){} + +// @mixin hook-card-footer(){} + + +// Media +// ======================================================================== + +// @mixin hook-card-media(){} + +// @mixin hook-card-media-top(){} + +// @mixin hook-card-media-bottom(){} + +// @mixin hook-card-media-left(){} + +// @mixin hook-card-media-right(){} + + +// Title +// ======================================================================== + +// @mixin hook-card-title(){} + + +// Badge +// ======================================================================== + +// @mixin hook-card-badge(){} + + +// Hover modifier +// ======================================================================== + + + + +// Style modifiers +// ======================================================================== + + + +// @mixin hook-card-default-title(){} + + + + + + + +// +// Primary +// + + + +// @mixin hook-card-primary-title(){} + + + +// +// Secondary +// + + + +// @mixin hook-card-secondary-title(){} + + + + +// Miscellaneous +// ======================================================================== + diff --git a/_sass/_sass/uikit/theme/close.scss b/_sass/_sass/uikit/theme/close.scss new file mode 100644 index 00000000..f0762942 --- /dev/null +++ b/_sass/_sass/uikit/theme/close.scss @@ -0,0 +1,29 @@ +// +// Component: Close +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Component +// ======================================================================== + + + +// @mixin hook-close-hover(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-close-misc(){} + + +// Inverse +// ======================================================================== + +// @mixin hook-inverse-close(){} +// @mixin hook-inverse-close-hover(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/column.scss b/_sass/_sass/uikit/theme/column.scss new file mode 100644 index 00000000..80be8505 --- /dev/null +++ b/_sass/_sass/uikit/theme/column.scss @@ -0,0 +1,14 @@ +// +// Component: Column +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-column-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/comment.scss b/_sass/_sass/uikit/theme/comment.scss new file mode 100644 index 00000000..a486c591 --- /dev/null +++ b/_sass/_sass/uikit/theme/comment.scss @@ -0,0 +1,69 @@ +// +// Component: Comment +// +// ======================================================================== + + +// Variables +// ======================================================================== + +// +// New +// + +$comment-primary-padding: $global-gutter !default; +$comment-primary-background: $global-muted-background !default; + + +// Component +// ======================================================================== + +// @mixin hook-comment(){} + + +// Sections +// ======================================================================== + +// @mixin hook-comment-body(){} + +// @mixin hook-comment-header(){} + + +// Title +// ======================================================================== + +// @mixin hook-comment-title(){} + + +// Meta +// ======================================================================== + +// @mixin hook-comment-meta(){} + + +// Avatar +// ======================================================================== + +// @mixin hook-comment-avatar(){} + + +// List +// ======================================================================== + +// @mixin hook-comment-list-adjacent(){} + +// @mixin hook-comment-list-sub(){} + +// @mixin hook-comment-list-sub-adjacent(){} + + +// Style modifier +// ======================================================================== + + + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-comment-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/container.scss b/_sass/_sass/uikit/theme/container.scss new file mode 100644 index 00000000..ba77ded7 --- /dev/null +++ b/_sass/_sass/uikit/theme/container.scss @@ -0,0 +1,14 @@ +// +// Component: Container +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-container-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/countdown.scss b/_sass/_sass/uikit/theme/countdown.scss new file mode 100644 index 00000000..01f1761c --- /dev/null +++ b/_sass/_sass/uikit/theme/countdown.scss @@ -0,0 +1,53 @@ +// +// Component: Countdown +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Component +// ======================================================================== + +// @mixin hook-countdown(){} + + +// Item +// ======================================================================== + +// @mixin hook-countdown-item(){} + + +// Number +// ======================================================================== + +// @mixin hook-countdown-number(){} + + +// Separator +// ======================================================================== + +// @mixin hook-countdown-separator(){} + + +// Label +// ======================================================================== + +// @mixin hook-countdown-label(){} + + +// Miscellaneous +// ======================================================================== + +// @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(){} diff --git a/_sass/_sass/uikit/theme/description-list.scss b/_sass/_sass/uikit/theme/description-list.scss new file mode 100644 index 00000000..8f836d63 --- /dev/null +++ b/_sass/_sass/uikit/theme/description-list.scss @@ -0,0 +1,32 @@ +// +// Component: Description list +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$description-list-term-font-size: $global-small-font-size !default; +$description-list-term-font-weight: normal !default; +$description-list-term-text-transform: uppercase !default; + + +// Component +// ======================================================================== + + + +// @mixin hook-description-list-description(){} + + +// Style modifier +// ======================================================================== + +// @mixin hook-description-list-divider-term(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-description-list-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/divider.scss b/_sass/_sass/uikit/theme/divider.scss new file mode 100644 index 00000000..59e2c9cc --- /dev/null +++ b/_sass/_sass/uikit/theme/divider.scss @@ -0,0 +1,41 @@ +// +// Component: Divider +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Icon +// ======================================================================== + +// @mixin hook-divider-icon(){} + +// @mixin hook-divider-icon-line(){} + +// @mixin hook-divider-icon-line-left(){} + +// @mixin hook-divider-icon-line-right(){} + + +// Small +// ======================================================================== + +// @mixin hook-divider-small(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-divider-misc(){} + + +// Inverse +// ======================================================================== + +// @mixin hook-inverse-divider-icon(){} +// @mixin hook-inverse-divider-icon-line(){} + +// @mixin hook-inverse-divider-small(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/dotnav.scss b/_sass/_sass/uikit/theme/dotnav.scss new file mode 100644 index 00000000..1bc83597 --- /dev/null +++ b/_sass/_sass/uikit/theme/dotnav.scss @@ -0,0 +1,52 @@ +// +// Component: Dotnav +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$dotnav-item-background: transparent !default; + +// +// New +// + +$dotnav-item-border-width: 1px !default; + +$dotnav-item-border: rgba($global-color, 0.4) !default; +$dotnav-item-hover-border: transparent !default; +$dotnav-item-onclick-border: transparent !default; +$dotnav-item-active-border: transparent !default; + + +// Component +// ======================================================================== + +// @mixin hook-dotnav(){} + + + + + + + + + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-dotnav-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-dotnav-item-background: transparent !default; + +// @mixin hook-inverse-dotnav(){} + + + diff --git a/_sass/_sass/uikit/theme/drop.scss b/_sass/_sass/uikit/theme/drop.scss new file mode 100644 index 00000000..69409848 --- /dev/null +++ b/_sass/_sass/uikit/theme/drop.scss @@ -0,0 +1,14 @@ +// +// Component: Drop +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-drop-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/dropdown.scss b/_sass/_sass/uikit/theme/dropdown.scss new file mode 100644 index 00000000..c5aa02ef --- /dev/null +++ b/_sass/_sass/uikit/theme/dropdown.scss @@ -0,0 +1,45 @@ +// +// Component: Dropdown +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$dropdown-padding: 25px !default; +$dropdown-background: $global-background !default; + +// +// New +// + +$dropdown-nav-font-size: $global-small-font-size !default; + +$dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !default; + + +// Component +// ======================================================================== + + + + +// Nav +// ======================================================================== + + + +// @mixin hook-dropdown-nav-item(){} + +// @mixin hook-dropdown-nav-item-hover(){} + +// @mixin hook-dropdown-nav-header(){} + +// @mixin hook-dropdown-nav-divider(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-dropdown-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/form-range.scss b/_sass/_sass/uikit/theme/form-range.scss new file mode 100644 index 00000000..ca424f30 --- /dev/null +++ b/_sass/_sass/uikit/theme/form-range.scss @@ -0,0 +1,45 @@ +// +// Component: Form Range +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$form-range-thumb-background: $global-background !default; + +// +// New +// + +$form-range-thumb-border-width: $global-border-width !default; +$form-range-thumb-border: darken($global-border, 10%) !default; + +$form-range-track-border-radius: 500px !default; + + +// Component +// ======================================================================== + +// @mixin hook-form-range(){} + + +// Thumb +// ======================================================================== + + + + +// Track +// ======================================================================== + + + +// @mixin hook-form-range-track-focus(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-form-range-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/form.scss b/_sass/_sass/uikit/theme/form.scss new file mode 100644 index 00000000..ef806958 --- /dev/null +++ b/_sass/_sass/uikit/theme/form.scss @@ -0,0 +1,131 @@ +// +// Component: Form +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$form-line-height: $form-height - (2* $form-border-width) !default; + +$form-background: $global-background !default; +$form-focus-background: $global-background !default; + +$form-small-line-height: $form-small-height - (2* $form-border-width) !default; +$form-large-line-height: $form-large-height - (2* $form-border-width) !default; + +$form-radio-background: transparent !default; + +$form-stacked-margin-bottom: 5px !default; + +// +// New +// + +$form-border-width: $global-border-width !default; +$form-border: $global-border !default; + +$form-focus-border: $global-primary-background !default; + +$form-disabled-border: $global-border !default; + +$form-danger-border: $global-danger-background !default; +$form-success-border: $global-success-background !default; + +$form-blank-focus-border: $global-border !default; +$form-blank-focus-border-style: dashed !default; + +$form-radio-border-width: $global-border-width !default; +$form-radio-border: darken($global-border, 10%) !default; + +$form-radio-focus-border: $global-primary-background !default; + +$form-radio-checked-border: transparent !default; + +$form-radio-disabled-border: $global-border !default; + +$form-label-color: $global-emphasis-color !default; +$form-label-font-size: $global-small-font-size !default; + + +// Component +// ======================================================================== + + + +// @mixin hook-form-single-line(){} + +// @mixin hook-form-multi-line(){} + + + + + + +// Style modifiers +// ======================================================================== + + + + + + + + + + +// Radio and checkbox +// ======================================================================== + + + + + + + +// @mixin hook-form-radio-checked-focus(){} + + + + +// Legend +// ======================================================================== + +// @mixin hook-form-legend(){} + + +// Label +// ======================================================================== + + + + +// Layout +// ======================================================================== + +// @mixin hook-form-stacked-label(){} + +// @mixin hook-form-horizontal-label(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-form-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-form-label-color: $inverse-global-emphasis-color !default; + + + + + + + + +// @mixin hook-inverse-form-radio-checked-focus(){} + diff --git a/_sass/_sass/uikit/theme/grid.scss b/_sass/_sass/uikit/theme/grid.scss new file mode 100644 index 00000000..adc18adb --- /dev/null +++ b/_sass/_sass/uikit/theme/grid.scss @@ -0,0 +1,14 @@ +// +// Component: Grid +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-grid-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/heading.scss b/_sass/_sass/uikit/theme/heading.scss new file mode 100644 index 00000000..c6409f0b --- /dev/null +++ b/_sass/_sass/uikit/theme/heading.scss @@ -0,0 +1,59 @@ +// +// Component: Heading +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Primary +// ======================================================================== + +// @mixin hook-heading-primary(){} + + +// Hero +// ======================================================================== + +// @mixin hook-heading-hero(){} + + +// Divider +// ======================================================================== + +// @mixin hook-heading-divider(){} + + +// Bullet +// ======================================================================== + +// @mixin hook-heading-bullet(){} + + +// Line +// ======================================================================== + +// @mixin hook-heading-line(){} + + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-heading-misc(){} + + +// Inverse +// ======================================================================== + +// @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(){} diff --git a/_sass/_sass/uikit/theme/icon.scss b/_sass/_sass/uikit/theme/icon.scss new file mode 100644 index 00000000..b81c79ab --- /dev/null +++ b/_sass/_sass/uikit/theme/icon.scss @@ -0,0 +1,50 @@ +// +// Component: Icon +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Style modifiers +// ======================================================================== + +// +// Link +// + +// @mixin hook-icon-link(){} + +// @mixin hook-icon-link-hover(){} + +// @mixin hook-icon-link-active(){} + +// +// Button +// + + + +// @mixin hook-icon-button-hover(){} + +// @mixin hook-icon-button-active(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-icon-misc(){} + + +// Inverse +// ======================================================================== + +// @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(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/iconnav.scss b/_sass/_sass/uikit/theme/iconnav.scss new file mode 100644 index 00000000..94b4bbf1 --- /dev/null +++ b/_sass/_sass/uikit/theme/iconnav.scss @@ -0,0 +1,34 @@ +// +// Component: Iconnav +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Component +// ======================================================================== + +// @mixin hook-iconnav(){} + +// @mixin hook-iconnav-item(){} + +// @mixin hook-iconnav-item-hover(){} + +// @mixin hook-iconnav-item-active(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-iconnav-misc(){} + + +// Inverse +// ======================================================================== + +// @mixin hook-inverse-iconnav-item(){} +// @mixin hook-inverse-iconnav-item-hover(){} +// @mixin hook-inverse-iconnav-item-active(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/inverse.scss b/_sass/_sass/uikit/theme/inverse.scss new file mode 100644 index 00000000..75a5a3b1 --- /dev/null +++ b/_sass/_sass/uikit/theme/inverse.scss @@ -0,0 +1,14 @@ +// +// Component: Inverse +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Component +// ======================================================================== + +// @mixin hook-inverse(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/label.scss b/_sass/_sass/uikit/theme/label.scss new file mode 100644 index 00000000..ff09ac92 --- /dev/null +++ b/_sass/_sass/uikit/theme/label.scss @@ -0,0 +1,43 @@ +// +// Component: Label +// +// ======================================================================== + + +// Variables +// ======================================================================== + +// +// New +// + +$label-border-radius: 2px !default; +$label-text-transform: uppercase !default; + + +// Component +// ======================================================================== + + + + +// Color modifiers +// ======================================================================== + +// @mixin hook-label-success(){} + +// @mixin hook-label-warning(){} + +// @mixin hook-label-danger(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-label-misc(){} + + +// Inverse +// ======================================================================== + +// @mixin hook-inverse-label(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/lightbox.scss b/_sass/_sass/uikit/theme/lightbox.scss new file mode 100644 index 00000000..caabc625 --- /dev/null +++ b/_sass/_sass/uikit/theme/lightbox.scss @@ -0,0 +1,48 @@ +// +// Component: Lightbox +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Component +// ======================================================================== + +// @mixin hook-lightbox(){} + + +// Item +// ======================================================================== + +// @mixin hook-lightbox-item(){} + + +// Toolbar +// ======================================================================== + +// @mixin hook-lightbox-toolbar(){} + + +// Toolbar Icon +// ======================================================================== + +// @mixin hook-lightbox-toolbar-icon(){} + +// @mixin hook-lightbox-toolbar-icon-hover(){} + + +// Button +// ======================================================================== + +// @mixin hook-lightbox-button(){} + +// @mixin hook-lightbox-button-hover(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-lightbox-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/link.scss b/_sass/_sass/uikit/theme/link.scss new file mode 100644 index 00000000..0658b58a --- /dev/null +++ b/_sass/_sass/uikit/theme/link.scss @@ -0,0 +1,55 @@ +// +// Component: Link +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Muted +// ======================================================================== + +// @mixin hook-link-muted(){} + +// @mixin hook-link-muted-hover(){} + + +// Text +// ======================================================================== + +// @mixin hook-link-text(){} + +// @mixin hook-link-text-hover(){} + + +// Heading +// ======================================================================== + +// @mixin hook-link-heading(){} + +// @mixin hook-link-heading-hover(){} + + +// Reset +// ======================================================================== + +// @mixin hook-link-reset(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-link-misc(){} + + +// Inverse +// ======================================================================== + +// @mixin hook-inverse-link-muted(){} +// @mixin hook-inverse-link-muted-hover(){} + +// @mixin hook-inverse-link-text-hover(){} + +// @mixin hook-inverse-link-heading-hover(){} diff --git a/_sass/_sass/uikit/theme/list.scss b/_sass/_sass/uikit/theme/list.scss new file mode 100644 index 00000000..67e3c72c --- /dev/null +++ b/_sass/_sass/uikit/theme/list.scss @@ -0,0 +1,39 @@ +// +// Component: List +// +// ======================================================================== + + +// Variables +// ======================================================================== + +// +// New +// + +$list-striped-border-width: $global-border-width !default; +$list-striped-border: $global-border !default; + + +// Style modifiers +// ======================================================================== + +// @mixin hook-list-divider(){} + + + +// @mixin hook-list-bullet(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-list-misc(){} + + +// Inverse +// ======================================================================== + +// @mixin hook-inverse-list-divider(){} + +// @mixin hook-inverse-list-bullet(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/margin.scss b/_sass/_sass/uikit/theme/margin.scss new file mode 100644 index 00000000..a2cdb5ec --- /dev/null +++ b/_sass/_sass/uikit/theme/margin.scss @@ -0,0 +1,14 @@ +// +// Component: Margin +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-margin-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/marker.scss b/_sass/_sass/uikit/theme/marker.scss new file mode 100644 index 00000000..1e4fd5f3 --- /dev/null +++ b/_sass/_sass/uikit/theme/marker.scss @@ -0,0 +1,29 @@ +// +// Component: Marker +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Component +// ======================================================================== + + + +// @mixin hook-marker-hover(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-marker-misc(){} + + +// Inverse +// ======================================================================== + +// @mixin hook-inverse-marker(){} +// @mixin hook-inverse-marker-hover(){} diff --git a/_sass/_sass/uikit/theme/modal.scss b/_sass/_sass/uikit/theme/modal.scss new file mode 100644 index 00000000..adc21358 --- /dev/null +++ b/_sass/_sass/uikit/theme/modal.scss @@ -0,0 +1,84 @@ +// +// Component: Modal +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$modal-header-background: $modal-dialog-background !default; +$modal-footer-background: $modal-dialog-background !default; + +// +// New +// + +$modal-header-border-width: $global-border-width !default; +$modal-header-border: $global-border !default; + +$modal-footer-border-width: $global-border-width !default; +$modal-footer-border: $global-border !default; + +$modal-close-full-padding: $global-margin !default; +$modal-close-full-background: $modal-dialog-background !default; + + +// Component +// ======================================================================== + +// @mixin hook-modal(){} + + +// Dialog +// ======================================================================== + +// @mixin hook-modal-dialog(){} + + +// Full +// ======================================================================== + +// @mixin hook-modal-full(){} + + +// Sections +// ======================================================================== + + + +// @mixin hook-modal-body(){} + + + + +// Title +// ======================================================================== + +// @mixin hook-modal-title(){} + + +// Close +// ======================================================================== + +// @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-hover(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-modal-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/nav.scss b/_sass/_sass/uikit/theme/nav.scss new file mode 100644 index 00000000..31384982 --- /dev/null +++ b/_sass/_sass/uikit/theme/nav.scss @@ -0,0 +1,94 @@ +// +// Component: Nav +// +// ======================================================================== + + +// Variables +// ======================================================================== + +// +// New +// + +$nav-default-font-size: $global-small-font-size !default; + + +// Sublists +// ======================================================================== + +// @mixin hook-nav-sub(){} + + +// Parent icon modifier +// ======================================================================== + +// @mixin hook-nav-parent-icon(){} + + +// Header +// ======================================================================== + +// @mixin hook-nav-header(){} + + +// Divider +// ======================================================================== + +// @mixin hook-nav-divider(){} + + +// Default style modifier +// ======================================================================== + + + +// @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(){} + + +// Primary style modifier +// ======================================================================== + +// @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(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-nav-misc(){} + + +// Inverse +// ======================================================================== + +// @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(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/navbar.scss b/_sass/_sass/uikit/theme/navbar.scss new file mode 100644 index 00000000..2a6f237f --- /dev/null +++ b/_sass/_sass/uikit/theme/navbar.scss @@ -0,0 +1,136 @@ +// +// Component: Navbar +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$navbar-nav-item-font-size: $global-small-font-size !default; + +$navbar-dropdown-margin: 15px !default; +$navbar-dropdown-padding: 25px !default; +$navbar-dropdown-background: $global-background !default; +$navbar-dropdown-grid-gutter-horizontal: ($navbar-dropdown-padding * 2) !default; + +// +// New +// + +$navbar-nav-item-text-transform: uppercase !default; + +$navbar-dropdown-nav-font-size: $global-small-font-size !default; + +$navbar-dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !default; + +$navbar-dropbar-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.05) !default; + +$navbar-dropdown-grid-divider-border-width: $global-border-width !default; +$navbar-dropdown-grid-divider-border: $navbar-dropdown-nav-divider-border !default; + + +// Component +// ======================================================================== + +// @mixin hook-navbar(){} + + +// Container +// ======================================================================== + +// @mixin hook-navbar-container(){} + + +// Nav +// ======================================================================== + + + +// @mixin hook-navbar-nav-item-hover(){} + +// @mixin hook-navbar-nav-item-onclick(){} + +// @mixin hook-navbar-nav-item-active(){} + + +// Item +// ======================================================================== + +// @mixin hook-navbar-item(){} + + +// Toggle +// ======================================================================== + +// @mixin hook-navbar-toggle(){} + +// @mixin hook-navbar-toggle-hover(){} + +// @mixin hook-navbar-toggle-icon(){} + +// @mixin hook-navbar-toggle-icon-hover(){} + + +// Subtitle +// ======================================================================== + +// @mixin hook-navbar-subtitle(){} + + +// Style modifiers +// ======================================================================== + +// @mixin hook-navbar-transparent(){} + +// @mixin hook-navbar-sticky(){} + + +// Dropdown +// ======================================================================== + + + + + + +// Dropdown nav +// ======================================================================== + + + +// @mixin hook-navbar-dropdown-nav-item(){} + +// @mixin hook-navbar-dropdown-nav-item-hover(){} + +// @mixin hook-navbar-dropdown-nav-header(){} + +// @mixin hook-navbar-dropdown-nav-divider(){} + + +// Dropbar +// ======================================================================== + +// @mixin hook-navbar-dropbar(){} + + + + +// Miscellaneous +// ======================================================================== + + + + +// Inverse +// ======================================================================== + +// @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(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/notification.scss b/_sass/_sass/uikit/theme/notification.scss new file mode 100644 index 00000000..57d5b553 --- /dev/null +++ b/_sass/_sass/uikit/theme/notification.scss @@ -0,0 +1,44 @@ +// +// Component: Notification +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Component +// ======================================================================== + +// @mixin hook-notification(){} + + +// Message +// ======================================================================== + +// @mixin hook-notification-message(){} + + +// Close +// ======================================================================== + +// @mixin hook-notification-close(){} + + +// Style modifiers +// ======================================================================== + +// @mixin hook-notification-primary(){} + +// @mixin hook-notification-success(){} + +// @mixin hook-notification-warning(){} + +// @mixin hook-notification-danger(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-notification-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/offcanvas.scss b/_sass/_sass/uikit/theme/offcanvas.scss new file mode 100644 index 00000000..283078ef --- /dev/null +++ b/_sass/_sass/uikit/theme/offcanvas.scss @@ -0,0 +1,32 @@ +// +// Component: Off-canvas +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Bar +// ======================================================================== + +// @mixin hook-offcanvas-bar(){} + + +// Close +// ======================================================================== + +// @mixin hook-offcanvas-close(){} + + +// Overlay +// ======================================================================== + +// @mixin hook-offcanvas-overlay(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-offcanvas-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/overlay.scss b/_sass/_sass/uikit/theme/overlay.scss new file mode 100644 index 00000000..68cda452 --- /dev/null +++ b/_sass/_sass/uikit/theme/overlay.scss @@ -0,0 +1,33 @@ +// +// Component: Overlay +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Component +// ======================================================================== + +// @mixin hook-overlay(){} + +// Icon +// ======================================================================== + +// @mixin hook-overlay-icon(){} + + +// Style modifiers +// ======================================================================== + +// @mixin hook-overlay-default(){} + +// @mixin hook-overlay-primary(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-overlay-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/padding.scss b/_sass/_sass/uikit/theme/padding.scss new file mode 100644 index 00000000..f0737b87 --- /dev/null +++ b/_sass/_sass/uikit/theme/padding.scss @@ -0,0 +1,14 @@ +// +// Component: Padding +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-padding-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/pagination.scss b/_sass/_sass/uikit/theme/pagination.scss new file mode 100644 index 00000000..a777e0c9 --- /dev/null +++ b/_sass/_sass/uikit/theme/pagination.scss @@ -0,0 +1,41 @@ +// +// Component: Pagination +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Component +// ======================================================================== + +// @mixin hook-pagination(){} + + +// Items +// ======================================================================== + + + +// @mixin hook-pagination-item-hover(){} + +// @mixin hook-pagination-item-active(){} + +// @mixin hook-pagination-item-disabled(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-pagination-misc(){} + + +// Inverse +// ======================================================================== + +// @mixin hook-inverse-pagination-item(){} +// @mixin hook-inverse-pagination-item-hover(){} +// @mixin hook-inverse-pagination-item-active(){} +// @mixin hook-inverse-pagination-item-disabled(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/placeholder.scss b/_sass/_sass/uikit/theme/placeholder.scss new file mode 100644 index 00000000..4ab662cb --- /dev/null +++ b/_sass/_sass/uikit/theme/placeholder.scss @@ -0,0 +1,29 @@ +// +// Component: Placeholder +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$placeholder-background: transparent !default; + +// +// New +// + +$placeholder-border-width: $global-border-width !default; +$placeholder-border: $global-border !default; + + +// Component +// ======================================================================== + + + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-placeholder-misc(){} diff --git a/_sass/_sass/uikit/theme/position.scss b/_sass/_sass/uikit/theme/position.scss new file mode 100644 index 00000000..fc695208 --- /dev/null +++ b/_sass/_sass/uikit/theme/position.scss @@ -0,0 +1,14 @@ +// +// Component: Position +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-position-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/progress.scss b/_sass/_sass/uikit/theme/progress.scss new file mode 100644 index 00000000..9ca100a3 --- /dev/null +++ b/_sass/_sass/uikit/theme/progress.scss @@ -0,0 +1,24 @@ +// +// Component: Progress +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$progress-border-radius: 500px !default; + + +// Component +// ======================================================================== + + + +// @mixin hook-progress-bar(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-progress-misc(){} diff --git a/_sass/_sass/uikit/theme/search.scss b/_sass/_sass/uikit/theme/search.scss new file mode 100644 index 00000000..f9e710e2 --- /dev/null +++ b/_sass/_sass/uikit/theme/search.scss @@ -0,0 +1,73 @@ +// +// Component: Search +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$search-default-background: transparent !default; + +// +// New +// + +$search-default-border-width: $global-border-width !default; +$search-default-border: $global-border !default; + + +// Component +// ======================================================================== + +// @mixin hook-search-input(){} + + +// Default modifiers +// ======================================================================== + + + + +// Navbar modifiers +// ======================================================================== + +// @mixin hook-search-navbar-input(){} + +// @mixin hook-search-default-input-focus(){} + + +// Large modifiers +// ======================================================================== + +// @mixin hook-search-large-input(){} + + +// Toggle +// ======================================================================== + +// @mixin hook-search-toggle(){} + +// @mixin hook-search-toggle-hover(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-search-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-search-default-background: transparent !default; + + +// @mixin hook-inverse-search-default-input-focus(){} + +// @mixin hook-inverse-search-navbar-input(){} + +// @mixin hook-inverse-search-large-input(){} + +// @mixin hook-inverse-search-toggle(){} +// @mixin hook-inverse-search-toggle-hover(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/section.scss b/_sass/_sass/uikit/theme/section.scss new file mode 100644 index 00000000..6d7f761b --- /dev/null +++ b/_sass/_sass/uikit/theme/section.scss @@ -0,0 +1,32 @@ +// +// Component: Section +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Component +// ======================================================================== + +// @mixin hook-section(){} + + +// Style modifiers +// ======================================================================== + +// @mixin hook-section-default(){} + +// @mixin hook-section-muted(){} + +// @mixin hook-section-primary(){} + +// @mixin hook-section-secondary(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-section-misc(){} diff --git a/_sass/_sass/uikit/theme/slidenav.scss b/_sass/_sass/uikit/theme/slidenav.scss new file mode 100644 index 00000000..c1654e77 --- /dev/null +++ b/_sass/_sass/uikit/theme/slidenav.scss @@ -0,0 +1,52 @@ +// +// Component: Slidenav +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Component +// ======================================================================== + + + +// @mixin hook-slidenav-hover(){} + +// @mixin hook-slidenav-active(){} + + +// Icon modifier +// ======================================================================== + +// @mixin hook-slidenav-previous(){} + +// @mixin hook-slidenav-next(){} + + +// Size modifier +// ======================================================================== + +// @mixin hook-slidenav-large(){} + + +// Container +// ======================================================================== + +// @mixin hook-slidenav-container(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-icon-misc(){} + + +// Inverse +// ======================================================================== + +// @mixin hook-inverse-slidenav(){} +// @mixin hook-inverse-slidenav-hover(){} +// @mixin hook-inverse-slidenav-active(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/sortable.scss b/_sass/_sass/uikit/theme/sortable.scss new file mode 100644 index 00000000..3ab18c3d --- /dev/null +++ b/_sass/_sass/uikit/theme/sortable.scss @@ -0,0 +1,38 @@ +// +// Component: Sortable +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Component +// ======================================================================== + +// @mixin hook-sortable(){} + + +// Drag +// ======================================================================== + +// @mixin hook-sortable-drag(){} + + +// Placeholder +// ======================================================================== + +// @mixin hook-sortable-placeholder(){} + + +// Empty +// ======================================================================== + +// @mixin hook-sortable-empty(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-sortable-misc(){} diff --git a/_sass/_sass/uikit/theme/spinner.scss b/_sass/_sass/uikit/theme/spinner.scss new file mode 100644 index 00000000..d70e10fa --- /dev/null +++ b/_sass/_sass/uikit/theme/spinner.scss @@ -0,0 +1,14 @@ +// +// Component: Spinner +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-spinner-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/sticky.scss b/_sass/_sass/uikit/theme/sticky.scss new file mode 100644 index 00000000..94e5ee69 --- /dev/null +++ b/_sass/_sass/uikit/theme/sticky.scss @@ -0,0 +1,14 @@ +// +// Component: Sticky +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-sticky-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/subnav.scss b/_sass/_sass/uikit/theme/subnav.scss new file mode 100644 index 00000000..f4d1c7fd --- /dev/null +++ b/_sass/_sass/uikit/theme/subnav.scss @@ -0,0 +1,74 @@ +// +// Component: Subnav +// +// ======================================================================== + + +// Variables +// ======================================================================== + +// +// New +// + +$subnav-item-font-size: $global-small-font-size !default; +$subnav-item-text-transform: uppercase !default; + + +// Component +// ======================================================================== + +// @mixin hook-subnav(){} + + + +// @mixin hook-subnav-item-hover(){} + +// @mixin hook-subnav-item-active(){} + + +// Divider modifier +// ======================================================================== + +// @mixin hook-subnav-divider(){} + + +// Pill modifier +// ======================================================================== + +// @mixin hook-subnav-pill-item(){} + +// @mixin hook-subnav-pill-item-hover(){} + +// @mixin hook-subnav-pill-item-onclick(){} + +// @mixin hook-subnav-pill-item-active(){} + + +// Disabled +// ======================================================================== + +// @mixin hook-subnav-item-disabled(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-subnav-misc(){} + + +// Inverse +// ======================================================================== + +// @mixin hook-inverse-subnav-item(){} +// @mixin hook-inverse-subnav-item-hover(){} +// @mixin hook-inverse-subnav-item-active(){} + +// @mixin hook-inverse-subnav-divider(){} + +// @mixin hook-inverse-subnav-pill-item(){} +// @mixin hook-inverse-subnav-pill-item-hover(){} +// @mixin hook-inverse-subnav-pill-item-onclick(){} +// @mixin hook-inverse-subnav-pill-item-active(){} + +// @mixin hook-inverse-subnav-item-disabled(){} diff --git a/_sass/_sass/uikit/theme/tab.scss b/_sass/_sass/uikit/theme/tab.scss new file mode 100644 index 00000000..51c4ba28 --- /dev/null +++ b/_sass/_sass/uikit/theme/tab.scss @@ -0,0 +1,74 @@ +// +// Component: Tab +// +// ======================================================================== + + +// Variables +// ======================================================================== + +// +// New +// + +$tab-border-width: $global-border-width !default; +$tab-border: $global-border !default; + +$tab-item-border-width: $global-border-width !default; +$tab-item-font-size: $global-small-font-size !default; +$tab-item-text-transform: uppercase !default; + +$tab-item-active-border: $global-primary-background !default; + + +// Component +// ======================================================================== + + + + +// Items +// ======================================================================== + + + +// @mixin hook-tab-item-hover(){} + + + +// @mixin hook-tab-item-disabled(){} + + +// Position modifiers +// ======================================================================== + + + + + + + + + + + + + + +// Miscellaneous +// ======================================================================== + + + + +// Inverse +// ======================================================================== + +$inverse-tab-border: $inverse-global-border !default; + + + +// @mixin hook-inverse-tab-item(){} +// @mixin hook-inverse-tab-item-hover(){} + +// @mixin hook-inverse-tab-item-disabled(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/table.scss b/_sass/_sass/uikit/theme/table.scss new file mode 100644 index 00000000..d6a66079 --- /dev/null +++ b/_sass/_sass/uikit/theme/table.scss @@ -0,0 +1,68 @@ +// +// Component: Table +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$table-header-cell-font-size: $global-small-font-size !default; +$table-header-cell-font-weight: normal !default; +$table-header-cell-color: $global-muted-color !default; + +// +// New +// + +$table-striped-border-width: $global-border-width !default; +$table-striped-border: $global-border !default; + + +// Component +// ======================================================================== + + + +// @mixin hook-table-cell(){} + +// @mixin hook-table-footer(){} + +// @mixin hook-table-caption(){} + +// @mixin hook-table-row-active(){} + + +// Style modifiers +// ======================================================================== + +// @mixin hook-table-divider(){} + + + +// @mixin hook-table-hover(){} + + +// Size modifier +// ======================================================================== + +// @mixin hook-table-small(){} + +// @mixin hook-table-large(){} + + +// Miscellaneous +// ======================================================================== + + + + +// Inverse +// ======================================================================== + +// @mixin hook-inverse-table-header-cell(){} +// @mixin hook-inverse-table-caption(){} +// @mixin hook-inverse-table-row-active(){} +// @mixin hook-inverse-table-divider(){} + +// @mixin hook-inverse-table-hover(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/text.scss b/_sass/_sass/uikit/theme/text.scss new file mode 100644 index 00000000..b6e35c43 --- /dev/null +++ b/_sass/_sass/uikit/theme/text.scss @@ -0,0 +1,50 @@ +// +// Component: Text +// +// ======================================================================== + + +// Variables +// ======================================================================== + +// +// New +// + +$text-meta-link-color: $text-meta-color !default; +$text-meta-link-hover-color: $global-color !default; + + +// Style modifiers +// ======================================================================== + +// @mixin hook-text-lead(){} + + + + +// Size modifiers +// ======================================================================== + +// @mixin hook-text-small(){} + +// @mixin hook-text-large(){} + + +// Background modifier +// ======================================================================== + +// @mixin hook-text-background(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-text-misc(){} + + +// Inverse +// ======================================================================== + +// @mixin hook-inverse-text-lead(){} +// @mixin hook-inverse-text-meta(){} diff --git a/_sass/_sass/uikit/theme/thumbnav.scss b/_sass/_sass/uikit/theme/thumbnav.scss new file mode 100644 index 00000000..7f26c38a --- /dev/null +++ b/_sass/_sass/uikit/theme/thumbnav.scss @@ -0,0 +1,42 @@ +// +// Component: Thumbnav +// +// ======================================================================== + + +// Variables +// ======================================================================== + +// +// New +// + +$thumbnav-item-background: rgba($global-background, 0.4) !default; +$thumbnav-item-hover-background: transparent !default; +$thumbnav-item-active-background: transparent !default; + + +// Component +// ======================================================================== + +// @mixin hook-thumbnav(){} + + + + + + + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-thumbnav-misc(){} + + +// Inverse +// ======================================================================== + +// @mixin hook-inverse-thumbnav-item(){} +// @mixin hook-inverse-thumbnav-item-hover(){} +// @mixin hook-inverse-thumbnav-item-active(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/tile.scss b/_sass/_sass/uikit/theme/tile.scss new file mode 100644 index 00000000..2d043a63 --- /dev/null +++ b/_sass/_sass/uikit/theme/tile.scss @@ -0,0 +1,32 @@ +// +// Component: Tile +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Component +// ======================================================================== + +// @mixin hook-tile(){} + + +// Style modifiers +// ======================================================================== + +// @mixin hook-tile-default(){} + +// @mixin hook-tile-muted(){} + +// @mixin hook-tile-primary(){} + +// @mixin hook-tile-secondary(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-tile-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/tooltip.scss b/_sass/_sass/uikit/theme/tooltip.scss new file mode 100644 index 00000000..5115139c --- /dev/null +++ b/_sass/_sass/uikit/theme/tooltip.scss @@ -0,0 +1,20 @@ +// +// Component: Tooltip +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Component +// ======================================================================== + +// @mixin hook-tooltip(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-tooltip-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/totop.scss b/_sass/_sass/uikit/theme/totop.scss new file mode 100644 index 00000000..feb7165a --- /dev/null +++ b/_sass/_sass/uikit/theme/totop.scss @@ -0,0 +1,32 @@ +// +// Component: Totop +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Component +// ======================================================================== + + + +// @mixin hook-totop-hover(){} + +// @mixin hook-totop-active(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-icon-misc(){} + + +// Inverse +// ======================================================================== + +// @mixin hook-inverse-totop(){} +// @mixin hook-inverse-totop-hover(){} +// @mixin hook-inverse-totop-active(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/transition.scss b/_sass/_sass/uikit/theme/transition.scss new file mode 100644 index 00000000..fd7bdede --- /dev/null +++ b/_sass/_sass/uikit/theme/transition.scss @@ -0,0 +1,14 @@ +// +// Component: Transition +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-transition-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/utility.scss b/_sass/_sass/uikit/theme/utility.scss new file mode 100644 index 00000000..ae24e15c --- /dev/null +++ b/_sass/_sass/uikit/theme/utility.scss @@ -0,0 +1,57 @@ +// +// Component: Utility +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Panel +// ======================================================================== + +// @mixin hook-panel-scrollable(){} + + +// Box-shadow bottom +// ======================================================================== + +// @mixin hook-box-shadow-bottom(){} + + +// Drop cap +// ======================================================================== + + + + +// Leader +// ======================================================================== + +// @mixin hook-leader(){} + + +// Logo +// ======================================================================== + +// @mixin hook-logo(){} + +// @mixin hook-logo-hover(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-utility-misc(){} + + +// Inverse +// ======================================================================== + +// @mixin hook-inverse-dropcap(){} + +// @mixin hook-inverse-leader(){} + +// @mixin hook-inverse-logo(){} +// @mixin hook-inverse-logo-hover(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/variables.scss b/_sass/_sass/uikit/theme/variables.scss new file mode 100644 index 00000000..d74b3a99 --- /dev/null +++ b/_sass/_sass/uikit/theme/variables.scss @@ -0,0 +1,36 @@ +// +// Component: Variables +// +// ======================================================================== + + +// Global variables +// ======================================================================== + +// +// Typography +// + +// +// Colors +// + +// +// Backgrounds +// + +// +// Borders +// + +// +// Spacings +// + +// +// Controls +// + +// +// Z-index +// \ No newline at end of file diff --git a/_sass/_sass/uikit/theme/width.scss b/_sass/_sass/uikit/theme/width.scss new file mode 100644 index 00000000..b67a7954 --- /dev/null +++ b/_sass/_sass/uikit/theme/width.scss @@ -0,0 +1,14 @@ +// +// Component: Width +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-width-misc(){} \ No newline at end of file diff --git a/_sass/_sass/uikit/uikit-theme.scss b/_sass/_sass/uikit/uikit-theme.scss new file mode 100644 index 00000000..13dbd022 --- /dev/null +++ b/_sass/_sass/uikit/uikit-theme.scss @@ -0,0 +1,9 @@ +// +// Theme +// + +@import "theme/_import.scss"; + +@import "components/_import.scss"; + + diff --git a/_sass/_sass/uikit/uikit.scss b/_sass/_sass/uikit/uikit.scss new file mode 100644 index 00000000..66248231 --- /dev/null +++ b/_sass/_sass/uikit/uikit.scss @@ -0,0 +1,5 @@ +// +// Core +// + +@import "components/_import.scss"; \ No newline at end of file diff --git a/_sass/_sass/uikit/variables-theme.scss b/_sass/_sass/uikit/variables-theme.scss new file mode 100644 index 00000000..8aa5a9c4 --- /dev/null +++ b/_sass/_sass/uikit/variables-theme.scss @@ -0,0 +1,1093 @@ +$global-margin: 20px !default; +$accordion-item-margin-top: $global-margin !default; +$global-medium-font-size: 1.25rem !default; +$accordion-title-font-size: $global-medium-font-size !default; +$accordion-title-line-height: 1.4 !default; +$global-emphasis-color: #333 !default; +$accordion-title-color: $global-emphasis-color !default; +$global-color: #666 !default; +$accordion-title-hover-color: $global-color !default; +$accordion-content-margin-top: $global-margin !default; +$global-inverse-color: #fff !default; +$inverse-global-emphasis-color: $global-inverse-color !default; +$inverse-accordion-title-color: $inverse-global-emphasis-color !default; +$inverse-global-inverse-color: $global-color !default; +$inverse-accordion-title-hover-color: $inverse-global-inverse-color !default; +$global-gutter: 30px !default; +$align-margin-horizontal: $global-gutter !default; +$align-margin-vertical: $global-gutter !default; +$global-medium-gutter: 40px !default; +$align-margin-horizontal-l: $global-medium-gutter !default; +$alert-margin-vertical: $global-margin !default; +$global-small-gutter: 15px !default; +$alert-padding: $global-small-gutter !default; +$alert-padding-right: $alert-padding + 14px !default; +$global-muted-background: #f8f8f8 !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; +$global-primary-background: #1e87f0 !default; +$alert-primary-background: lighten(mix(white, $global-primary-background, 40%), 20%) !default; +$alert-primary-color: $global-primary-background !default; +$global-success-background: #32d296 !default; +$alert-success-background: lighten(mix(white, $global-success-background, 40%), 25%) !default; +$alert-success-color: $global-success-background !default; +$global-warning-background: #faa05a !default; +$alert-warning-background: lighten(mix(white, $global-warning-background, 45%), 15%) !default; +$alert-warning-color: $global-warning-background !default; +$global-danger-background: #f0506e !default; +$alert-danger-background: lighten(mix(white, $global-danger-background, 40%), 20%) !default; +$alert-danger-color: $global-danger-background !default; +$global-large-margin: 70px !default; +$article-margin-top: $global-large-margin !default; +$global-xxlarge-font-size: 2.625rem !default; +$article-title-font-size: $global-xxlarge-font-size !default; +$article-title-line-height: 1.2 !default; +$global-small-font-size: 0.875rem !default; +$article-meta-font-size: $global-small-font-size !default; +$article-meta-line-height: 1.4 !default; +$global-muted-color: #999 !default; +$article-meta-color: $global-muted-color !default; +$inverse-global-muted-color: rgba($global-inverse-color, 0.5) !default; +$inverse-article-meta-color: $inverse-global-muted-color !default; +$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; +$global-background: #fff !default; +$background-default-background: $global-background !default; +$background-muted-background: $global-muted-background !default; +$background-primary-background: $global-primary-background !default; +$global-secondary-background: #222 !default; +$background-secondary-background: $global-secondary-background !default; +$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; +$inverse-global-primary-background: $global-inverse-color !default; +$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; +$base-body-background: $global-background !default; +$global-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; +$base-body-font-family: $global-font-family !default; +$base-body-font-weight: normal !default; +$global-font-size: 16px !default; +$base-body-font-size: $global-font-size !default; +$global-line-height: 1.5 !default; +$base-body-line-height: $global-line-height !default; +$base-body-color: $global-color !default; +$global-link-color: #1e87f0 !default; +$base-link-color: $global-link-color !default; +$base-link-text-decoration: none !default; +$global-link-hover-color: #0f6ecd !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; +$global-medium-margin: 40px !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; +$global-xlarge-font-size: 2rem !default; +$base-h2-font-size: $global-xlarge-font-size !default; +$base-h2-line-height: 1.3 !default; +$global-large-font-size: 1.5rem !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; +$global-border-width: 1px !default; +$base-hr-border-width: $global-border-width !default; +$global-border: #e5e5e5 !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; +$global-small-margin: 10px !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; +$inverse-global-color: rgba($global-inverse-color, 0.7) !default; +$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-global-border: rgba($global-inverse-color, 0.2) !default; +$inverse-base-hr-border: $inverse-global-border !default; +$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; +$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; +$global-control-height: 40px !default; +$button-border-width: $global-border-width !default; +$button-line-height: $global-control-height - ($button-border-width * 2) !default; +$global-control-small-height: 30px !default; +$button-small-line-height: $global-control-small-height - ($button-border-width * 2) !default; +$global-control-large-height: 55px !default; +$button-large-line-height: $global-control-large-height - ($button-border-width * 2) !default; +$button-font-size: $global-small-font-size !default; +$button-small-font-size: $global-small-font-size !default; +$button-large-font-size: $global-small-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: transparent !default; +$button-default-color: $global-emphasis-color !default; +$button-default-hover-background: transparent !default; +$button-default-hover-color: $global-emphasis-color !default; +$button-default-active-background: transparent !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: transparent !default; +$button-disabled-color: $global-muted-color !default; +$button-text-line-height: $global-line-height !default; +$button-text-color: $global-emphasis-color !default; +$button-text-hover-color: $global-emphasis-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; +$inverse-button-default-background: transparent !default; +$inverse-button-default-color: $inverse-global-emphasis-color !default; +$inverse-button-default-hover-background: transparent !default; +$inverse-button-default-hover-color: $inverse-global-emphasis-color !default; +$inverse-button-default-active-background: transparent !default; +$inverse-button-default-active-color: $inverse-global-emphasis-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-emphasis-color !default; +$inverse-button-text-hover-color: $inverse-global-emphasis-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; +$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-background !default; +$card-default-background: $global-background !default; +$card-default-color: $global-color !default; +$card-default-title-color: $global-emphasis-color !default; +$card-default-hover-background: $card-default-background !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: $card-primary-background !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: $card-secondary-background !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; +$global-large-gutter: 70px !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; +$close-color: $global-muted-color !default; +$close-hover-color: $global-color !default; +$inverse-close-color: $inverse-global-muted-color !default; +$inverse-close-hover-color: $inverse-global-color !default; +$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; +$inverse-column-divider-rule-color: $inverse-global-border !default; +$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; +$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; +$countdown-item-line-height: 70px !default; +$countdown-number-font-size: 2rem !default; +$countdown-number-font-size-s: 4rem !default; +$countdown-number-font-size-m: 6rem !default; +$countdown-separator-font-size: 1rem !default; +$countdown-separator-font-size-s: 2rem !default; +$countdown-separator-font-size-m: 3rem !default; +$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; +$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; +$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; +$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: transparent !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; +$inverse-dotnav-item-background: transparent !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; +$global-z-index: 1000 !default; +$drop-z-index: $global-z-index + 20 !default; +$drop-width: 300px !default; +$drop-margin: $global-margin !default; +$dropdown-z-index: $global-z-index + 20 !default; +$dropdown-min-width: 200px !default; +$dropdown-padding: 25px !default; +$dropdown-background: $global-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; +$form-range-thumb-height: 15px !default; +$form-range-thumb-border-radius: 500px !default; +$form-range-thumb-background: $global-background !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; +$form-height: $global-control-height !default; +$form-border-width: $global-border-width !default; +$form-line-height: $form-height - (2* $form-border-width) !default; +$form-padding-horizontal: 10px !default; +$form-padding-vertical: 4px !default; +$form-background: $global-background !default; +$form-color: $global-color !default; +$form-focus-background: $global-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 - (2* $form-border-width) !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 - (2* $form-border-width) !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: transparent !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: 5px !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; +$inverse-global-muted-background: rgba($global-inverse-color, 0.1) !default; +$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; +$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; +$inverse-grid-divider-border: $inverse-global-border !default; +$heading-primary-font-size: $global-xxlarge-font-size !default; +$heading-primary-line-height: 1.2 !default; +$heading-primary-font-size-m: 3.75rem !default; +$heading-primary-line-height-m: 1.1 !default; +$heading-hero-font-size: 4rem !default; +$heading-hero-line-height: 1.1 !default; +$heading-hero-font-size-s: 6rem !default; +$heading-hero-line-height-s: 1 !default; +$heading-hero-font-size-m: 8rem !default; +$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-border-width: $global-border-width !default; +$heading-line-height: $heading-line-border-width !default; +$heading-line-width: 2000px !default; +$heading-line-border: $global-border !default; +$heading-line-margin-horizontal: 0.6em !default; +$inverse-heading-divider-border: $inverse-global-border !default; +$inverse-heading-bullet-border: $inverse-global-border !default; +$inverse-heading-line-border: $inverse-global-border !default; +$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; +$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; +$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; +$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; +$inverse-global-color-mode: light !default; +$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; +$inverse-label-background: $inverse-global-primary-background !default; +$inverse-label-color: $inverse-global-inverse-color !default; +$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; +$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; +$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; +$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; +$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; +$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; +$global-xlarge-margin: 140px !default; +$margin-xlarge-margin-l: $global-xlarge-margin !default; +$marker-padding: 5px !default; +$marker-background: $global-secondary-background !default; +$marker-color: $global-inverse-color !default; +$marker-hover-color: $global-inverse-color !default; +$inverse-marker-background: $global-muted-background !default; +$inverse-marker-color: $global-color !default; +$inverse-marker-hover-color: $global-color !default; +$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: $modal-dialog-background !default; +$modal-footer-padding-horizontal: $global-gutter !default; +$modal-footer-padding-vertical: ($modal-footer-padding-horizontal / 2) !default; +$modal-footer-background: $modal-dialog-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; +$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; +$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; +$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-small-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: 15px !default; +$navbar-dropdown-padding: 25px !default; +$navbar-dropdown-background: $global-background !default; +$navbar-dropdown-color: $global-color !default; +$navbar-dropdown-grid-gutter-horizontal: ($navbar-dropdown-padding * 2) !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; +$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; +$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; +$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; +$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; +$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; +$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; +$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; +$placeholder-margin-vertical: $global-margin !default; +$placeholder-padding-vertical: $global-gutter !default; +$placeholder-padding-horizontal: $global-gutter !default; +$placeholder-background: transparent !default; +$position-small-margin: $global-small-gutter !default; +$position-medium-margin: $global-gutter !default; +$position-large-margin: $global-gutter !default; +$position-large-margin-l: 50px !default; +$progress-height: 15px !default; +$progress-margin-vertical: $global-margin !default; +$progress-background: $global-muted-background !default; +$progress-bar-background: $global-primary-background !default; +$search-color: $global-color !default; +$search-placeholder-color: $global-muted-color !default; +$search-icon-color: $global-muted-color !default; +$search-default-width: 180px !default; +$search-default-height: $global-control-height !default; +$search-default-padding-horizontal: 6px !default; +$search-default-background: transparent !default; +$search-default-focus-background: $search-default-background !default; +$search-default-icon-width: $global-control-height !default; +$search-navbar-width: 400px !default; +$search-navbar-height: 40px !default; +$search-navbar-background: transparent !default; +$search-navbar-font-size: $global-large-font-size !default; +$search-navbar-icon-width: 40px !default; +$search-large-width: 500px !default; +$search-large-height: 80px !default; +$search-large-background: transparent !default; +$search-large-font-size: $global-xxlarge-font-size !default; +$search-large-icon-width: 80px !default; +$search-toggle-color: $global-muted-color !default; +$search-toggle-hover-color: $global-color !default; +$inverse-search-color: $inverse-global-color !default; +$inverse-search-placeholder-color: $inverse-global-muted-color !default; +$inverse-search-icon-color: $inverse-global-muted-color !default; +$inverse-search-default-background: transparent !default; +$inverse-search-default-focus-background: $inverse-search-default-background !default; +$inverse-search-navbar-background: transparent !default; +$inverse-search-large-background: transparent !default; +$inverse-search-toggle-color: $inverse-global-muted-color !default; +$inverse-search-toggle-hover-color: $inverse-global-color !default; +$section-padding-vertical: $global-medium-margin !default; +$section-padding-vertical-m: $global-large-margin !default; +$section-xsmall-padding-vertical: $global-margin !default; +$section-small-padding-vertical: $global-medium-margin !default; +$section-large-padding-vertical: $global-large-margin !default; +$section-large-padding-vertical-m: $global-xlarge-margin !default; +$section-xlarge-padding-vertical: $global-xlarge-margin !default; +$section-xlarge-padding-vertical-m: ($global-large-margin + $global-xlarge-margin) !default; +$section-default-background: $global-background !default; +$section-muted-background: $global-muted-background !default; +$section-primary-background: $global-primary-background !default; +$section-primary-color-mode: light !default; +$section-secondary-background: $global-secondary-background !default; +$section-secondary-color-mode: light !default; +$slidenav-padding-vertical: 5px !default; +$slidenav-padding-horizontal: 10px !default; +$slidenav-color: rgba($global-color, 0.5) !default; +$slidenav-hover-color: rgba($global-color, 0.9) !default; +$slidenav-active-color: rgba($global-color, 0.5) !default; +$slidenav-large-padding-vertical: 10px !default; +$slidenav-large-padding-horizontal: $slidenav-large-padding-vertical !default; +$inverse-slidenav-color: rgba($inverse-global-color, 0.7) !default; +$inverse-slidenav-hover-color: rgba($inverse-global-color, 0.95) !default; +$inverse-slidenav-active-color: rgba($inverse-global-color, 0.7) !default; +$sortable-dragged-z-index: $global-z-index + 50 !default; +$sortable-placeholder-opacity: 0 !default; +$sortable-empty-height: 50px !default; +$spinner-size: 30px !default; +$spinner-stroke-width: 1 !default; +$spinner-radius: floor(($spinner-size - $spinner-stroke-width) / 2) !default; +$spinner-circumference: round(2 * 3.141 * $spinner-radius) !default; +$spinner-duration: 1.4s !default; +$sticky-z-index: $global-z-index - 20 !default; +$sticky-animation-duration: 0.2s !default; +$sticky-reverse-animation-duration: 0.2s !default; +$subnav-margin-horizontal: 20px !default; +$subnav-item-color: $global-muted-color !default; +$subnav-item-hover-color: $global-color !default; +$subnav-item-hover-text-decoration: none !default; +$subnav-item-active-color: $global-emphasis-color !default; +$subnav-divider-margin-horizontal: $subnav-margin-horizontal !default; +$subnav-divider-border-height: 1.5em !default; +$subnav-divider-border-width: $global-border-width !default; +$subnav-divider-border: $global-border !default; +$subnav-pill-item-padding-vertical: 5px !default; +$subnav-pill-item-padding-horizontal: 10px !default; +$subnav-pill-item-background: transparent !default; +$subnav-pill-item-color: $subnav-item-color !default; +$subnav-pill-item-hover-background: $global-muted-background !default; +$subnav-pill-item-hover-color: $global-color !default; +$subnav-pill-item-onclick-background: $subnav-pill-item-hover-background !default; +$subnav-pill-item-onclick-color: $subnav-pill-item-hover-color !default; +$subnav-pill-item-active-background: $global-primary-background !default; +$subnav-pill-item-active-color: $global-inverse-color !default; +$subnav-item-disabled-color: $global-muted-color !default; +$inverse-subnav-item-color: $inverse-global-muted-color !default; +$inverse-subnav-item-hover-color: $inverse-global-color !default; +$inverse-subnav-item-active-color: $inverse-global-emphasis-color !default; +$inverse-subnav-divider-border: $inverse-global-border !default; +$inverse-subnav-pill-item-background: transparent !default; +$inverse-subnav-pill-item-color: $inverse-global-muted-color !default; +$inverse-subnav-pill-item-hover-background: $inverse-global-muted-background !default; +$inverse-subnav-pill-item-hover-color: $inverse-global-color !default; +$inverse-subnav-pill-item-onclick-background: $inverse-subnav-pill-item-hover-background !default; +$inverse-subnav-pill-item-onclick-color: $inverse-subnav-pill-item-hover-color !default; +$inverse-subnav-pill-item-active-background: $inverse-global-primary-background !default; +$inverse-subnav-pill-item-active-color: $inverse-global-inverse-color !default; +$inverse-subnav-item-disabled-color: $inverse-global-muted-color !default; +$tab-margin-horizontal: 20px !default; +$tab-item-padding-horizontal: 10px !default; +$tab-item-padding-vertical: 5px !default; +$tab-item-color: $global-muted-color !default; +$tab-item-hover-color: $global-color !default; +$tab-item-hover-text-decoration: none !default; +$tab-item-active-color: $global-emphasis-color !default; +$tab-item-disabled-color: $global-muted-color !default; +$inverse-tab-item-color: $inverse-global-muted-color !default; +$inverse-tab-item-hover-color: $inverse-global-color !default; +$inverse-tab-item-active-color: $inverse-global-emphasis-color !default; +$inverse-tab-item-disabled-color: $inverse-global-muted-color !default; +$table-margin-vertical: $global-margin !default; +$table-cell-padding-vertical: 16px !default; +$table-cell-padding-horizontal: 12px !default; +$table-header-cell-font-size: $global-small-font-size !default; +$table-header-cell-font-weight: normal !default; +$table-header-cell-color: $global-muted-color !default; +$table-footer-font-size: $global-small-font-size !default; +$table-caption-font-size: $global-small-font-size !default; +$table-caption-color: $global-muted-color !default; +$table-row-active-background: #ffd !default; +$table-divider-border-width: $global-border-width !default; +$table-divider-border: $global-border !default; +$table-striped-row-background: $global-muted-background !default; +$table-hover-row-background: $table-row-active-background !default; +$table-small-cell-padding-vertical: 10px !default; +$table-small-cell-padding-horizontal: 12px !default; +$table-large-cell-padding-vertical: 22px !default; +$table-large-cell-padding-horizontal: 12px !default; +$table-expand-min-width: 150px !default; +$inverse-table-header-cell-color: $inverse-global-color !default; +$inverse-table-caption-color: $inverse-global-muted-color !default; +$inverse-table-row-active-background: fade-out($inverse-global-muted-background, 0.02) !default; +$inverse-table-divider-border: $inverse-global-border !default; +$inverse-table-striped-row-background: $inverse-global-muted-background !default; +$inverse-table-hover-row-background: $inverse-table-row-active-background !default; +$text-lead-font-size: $global-large-font-size !default; +$text-lead-line-height: 1.5 !default; +$text-lead-color: $global-emphasis-color !default; +$text-meta-font-size: $global-small-font-size !default; +$text-meta-line-height: 1.4 !default; +$text-meta-color: $global-muted-color !default; +$text-small-font-size: $global-small-font-size !default; +$text-small-line-height: 1.5 !default; +$text-large-font-size: $global-large-font-size !default; +$text-large-line-height: 1.5 !default; +$text-bold-font-weight: bolder !default; +$text-muted-color: $global-muted-color !default; +$text-primary-color: $global-primary-background !default; +$text-success-color: $global-success-background !default; +$text-warning-color: $global-warning-background !default; +$text-danger-color: $global-danger-background !default; +$text-background-color: $global-primary-background !default; +$inverse-text-lead-color: $inverse-global-color !default; +$inverse-text-meta-color: $inverse-global-muted-color !default; +$inverse-text-muted-color: $inverse-global-muted-color !default; +$inverse-text-primary-color: $inverse-global-color !default; +$thumbnav-margin-horizontal: 15px !default; +$thumbnav-margin-vertical: $thumbnav-margin-horizontal !default; +$tile-padding-horizontal: 15px !default; +$tile-padding-horizontal-s: $global-gutter !default; +$tile-padding-horizontal-m: $global-medium-gutter !default; +$tile-padding-vertical: $global-medium-margin !default; +$tile-padding-vertical-m: $global-large-margin !default; +$tile-xsmall-padding-vertical: $global-margin !default; +$tile-small-padding-vertical: $global-medium-margin !default; +$tile-large-padding-vertical: $global-large-margin !default; +$tile-large-padding-vertical-m: $global-xlarge-margin !default; +$tile-xlarge-padding-vertical: $global-xlarge-margin !default; +$tile-xlarge-padding-vertical-m: ($global-large-margin + $global-xlarge-margin) !default; +$tile-default-background: $global-background !default; +$tile-muted-background: $global-muted-background !default; +$tile-primary-background: $global-primary-background !default; +$tile-primary-color-mode: light !default; +$tile-secondary-background: $global-secondary-background !default; +$tile-secondary-color-mode: light !default; +$tooltip-z-index: $global-z-index + 30 !default; +$tooltip-max-width: 200px !default; +$tooltip-padding-vertical: 3px !default; +$tooltip-padding-horizontal: 6px !default; +$tooltip-background: #666 !default; +$tooltip-border-radius: 2px !default; +$tooltip-color: $global-inverse-color !default; +$tooltip-font-size: 12px !default; +$tooltip-margin: 10px !default; +$totop-padding: 5px !default; +$totop-color: $global-muted-color !default; +$totop-hover-color: $global-color !default; +$totop-active-color: $global-emphasis-color !default; +$inverse-totop-color: $inverse-global-muted-color !default; +$inverse-totop-hover-color: $inverse-global-color !default; +$inverse-totop-active-color: $inverse-global-emphasis-color !default; +$transition-duration: 0.3s !default; +$transition-scale: 1.1 !default; +$transition-slide-small-translate: 10px !default; +$transition-slide-medium-translate: 50px !default; +$transition-slow-duration: 0.7s !default; +$panel-scrollable-height: 170px !default; +$panel-scrollable-padding: 10px !default; +$panel-scrollable-border-width: $global-border-width !default; +$panel-scrollable-border: $global-border !default; +$height-small-height: 150px !default; +$height-medium-height: 300px !default; +$height-large-height: 450px !default; +$border-rounded-border-radius: 5px !default; +$box-shadow-duration: 0.1s !default; +$box-shadow-bottom-height: 30px !default; +$box-shadow-bottom-border-radius: 100% !default; +$box-shadow-bottom-background: #444 !default; +$box-shadow-bottom-blur: 20px !default; +$dropcap-margin-right: 10px !default; +$dropcap-font-size: (($global-line-height * 3) * 1em) !default; +$leader-fill-content: '.' !default; +$leader-fill-margin-left: $global-small-gutter !default; +$logo-font-size: $global-large-font-size !default; +$logo-font-family: $global-font-family !default; +$logo-color: $global-color !default; +$logo-hover-color: $global-color !default; +$dragover-box-shadow: 0 0 20px rgba(100,100,100,0.3) !default; +$inverse-logo-color: $inverse-global-color !default; +$inverse-logo-hover-color: $inverse-global-color !default; +$breakpoint-small: 640px !default; +$breakpoint-medium: 960px !default; +$breakpoint-large: 1200px !default; +$breakpoint-xlarge: 1600px !default; +$breakpoint-xsmall-max: ($breakpoint-small - 1) !default; +$breakpoint-small-max: ($breakpoint-medium - 1) !default; +$breakpoint-medium-max: ($breakpoint-large - 1) !default; +$breakpoint-large-max: ($breakpoint-xlarge - 1) !default; +$global-small-box-shadow: 0 2px 8px rgba(0,0,0,0.08) !default; +$global-medium-box-shadow: 0 5px 15px rgba(0,0,0,0.08) !default; +$global-large-box-shadow: 0 14px 25px rgba(0,0,0,0.16) !default; +$global-xlarge-box-shadow: 0 28px 50px rgba(0,0,0,0.16) !default; +$width-small-width: 150px !default; +$width-medium-width: 300px !default; +$width-large-width: 450px !default; +$width-xlarge-width: 600px !default; +$width-xxlarge-width: 750px !default; +$accordion-icon-color: $global-color !default; +$internal-accordion-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%3C%2Fsvg%3E" !default; +$internal-accordion-close-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%20%2F%3E%0A%3C%2Fsvg%3E" !default; +$alert-close-opacity: 0.4 !default; +$alert-close-hover-opacity: 0.8 !default; +$article-meta-link-color: $article-meta-color !default; +$article-meta-link-hover-color: $global-color !default; +$base-code-padding-horizontal: 6px !default; +$base-code-padding-vertical: 2px !default; +$base-code-background: $global-muted-background !default; +$base-blockquote-color: $global-emphasis-color !default; +$base-blockquote-footer-color: $global-color !default; +$base-pre-padding: 10px !default; +$base-pre-background: $global-background !default; +$base-pre-border-width: $global-border-width !default; +$base-pre-border: $global-border !default; +$base-pre-border-radius: 3px !default; +$inverse-base-blockquote-color: $inverse-global-emphasis-color !default; +$inverse-base-blockquote-footer-color: $inverse-global-color !default; +$button-text-transform: uppercase !default; +$button-default-border: $global-border !default; +$button-default-hover-border: darken($global-border, 20%) !default; +$button-default-active-border: darken($global-border, 30%) !default; +$button-disabled-border: $global-border !default; +$button-text-border-width: $global-border-width !default; +$button-text-border: $button-text-hover-color !default; +$card-hover-box-shadow: $global-large-box-shadow !default; +$card-default-box-shadow: $global-medium-box-shadow !default; +$card-default-hover-box-shadow: $global-large-box-shadow !default; +$card-default-header-border-width: $global-border-width !default; +$card-default-header-border: $global-border !default; +$card-default-footer-border-width: $global-border-width !default; +$card-default-footer-border: $global-border !default; +$card-primary-box-shadow: $global-medium-box-shadow !default; +$card-primary-hover-box-shadow: $global-large-box-shadow !default; +$card-secondary-box-shadow: $global-medium-box-shadow !default; +$card-secondary-hover-box-shadow: $global-large-box-shadow !default; +$comment-primary-padding: $global-gutter !default; +$comment-primary-background: $global-muted-background !default; +$description-list-term-font-size: $global-small-font-size !default; +$description-list-term-font-weight: normal !default; +$description-list-term-text-transform: uppercase !default; +$dotnav-item-border-width: 1px !default; +$dotnav-item-border: rgba($global-color, 0.4) !default; +$dotnav-item-hover-border: transparent !default; +$dotnav-item-onclick-border: transparent !default; +$dotnav-item-active-border: transparent !default; +$dropdown-nav-font-size: $global-small-font-size !default; +$dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !default; +$form-range-thumb-border-width: $global-border-width !default; +$form-range-thumb-border: darken($global-border, 10%) !default; +$form-range-track-border-radius: 500px !default; +$form-border: $global-border !default; +$form-focus-border: $global-primary-background !default; +$form-disabled-border: $global-border !default; +$form-danger-border: $global-danger-background !default; +$form-success-border: $global-success-background !default; +$form-blank-focus-border: $global-border !default; +$form-blank-focus-border-style: dashed !default; +$form-radio-border-width: $global-border-width !default; +$form-radio-border: darken($global-border, 10%) !default; +$form-radio-focus-border: $global-primary-background !default; +$form-radio-checked-border: transparent !default; +$form-radio-disabled-border: $global-border !default; +$form-label-color: $global-emphasis-color !default; +$form-label-font-size: $global-small-font-size !default; +$inverse-form-label-color: $inverse-global-emphasis-color !default; +$label-border-radius: 2px !default; +$label-text-transform: uppercase !default; +$list-striped-border-width: $global-border-width !default; +$list-striped-border: $global-border !default; +$modal-header-border-width: $global-border-width !default; +$modal-header-border: $global-border !default; +$modal-footer-border-width: $global-border-width !default; +$modal-footer-border: $global-border !default; +$modal-close-full-padding: $global-margin !default; +$modal-close-full-background: $modal-dialog-background !default; +$nav-default-font-size: $global-small-font-size !default; +$navbar-nav-item-text-transform: uppercase !default; +$navbar-dropdown-nav-font-size: $global-small-font-size !default; +$navbar-dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !default; +$navbar-dropbar-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.05) !default; +$navbar-dropdown-grid-divider-border-width: $global-border-width !default; +$navbar-dropdown-grid-divider-border: $navbar-dropdown-nav-divider-border !default; +$placeholder-border-width: $global-border-width !default; +$placeholder-border: $global-border !default; +$progress-border-radius: 500px !default; +$search-default-border-width: $global-border-width !default; +$search-default-border: $global-border !default; +$subnav-item-font-size: $global-small-font-size !default; +$subnav-item-text-transform: uppercase !default; +$tab-border-width: $global-border-width !default; +$tab-border: $global-border !default; +$tab-item-border-width: $global-border-width !default; +$tab-item-font-size: $global-small-font-size !default; +$tab-item-text-transform: uppercase !default; +$tab-item-active-border: $global-primary-background !default; +$inverse-tab-border: $inverse-global-border !default; +$table-striped-border-width: $global-border-width !default; +$table-striped-border: $global-border !default; +$text-meta-link-color: $text-meta-color !default; +$text-meta-link-hover-color: $global-color !default; +$thumbnav-item-background: rgba($global-background, 0.4) !default; +$thumbnav-item-hover-background: transparent !default; +$thumbnav-item-active-background: transparent !default; \ No newline at end of file diff --git a/_sass/_sass/uikit/variables.scss b/_sass/_sass/uikit/variables.scss new file mode 100644 index 00000000..90b5afbb --- /dev/null +++ b/_sass/_sass/uikit/variables.scss @@ -0,0 +1,986 @@ +$global-margin: 20px !default; +$accordion-item-margin-top: $global-margin !default; +$global-medium-font-size: 1.25rem !default; +$accordion-title-font-size: $global-medium-font-size !default; +$accordion-title-line-height: 1.4 !default; +$global-emphasis-color: #333 !default; +$accordion-title-color: $global-emphasis-color !default; +$global-color: #666 !default; +$accordion-title-hover-color: $global-color !default; +$accordion-content-margin-top: $global-margin !default; +$global-inverse-color: #fff !default; +$inverse-global-emphasis-color: $global-inverse-color !default; +$inverse-accordion-title-color: $inverse-global-emphasis-color !default; +$inverse-global-inverse-color: $global-color !default; +$inverse-accordion-title-hover-color: $inverse-global-inverse-color !default; +$global-gutter: 30px !default; +$align-margin-horizontal: $global-gutter !default; +$align-margin-vertical: $global-gutter !default; +$global-medium-gutter: 40px !default; +$align-margin-horizontal-l: $global-medium-gutter !default; +$alert-margin-vertical: $global-margin !default; +$global-small-gutter: 15px !default; +$alert-padding: $global-small-gutter !default; +$alert-padding-right: $alert-padding + 14px !default; +$global-muted-background: #f8f8f8 !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; +$global-primary-background: #1e87f0 !default; +$alert-primary-background: lighten(mix(white, $global-primary-background, 40%), 20%) !default; +$alert-primary-color: $global-primary-background !default; +$global-success-background: #32d296 !default; +$alert-success-background: lighten(mix(white, $global-success-background, 40%), 25%) !default; +$alert-success-color: $global-success-background !default; +$global-warning-background: #faa05a !default; +$alert-warning-background: lighten(mix(white, $global-warning-background, 45%), 15%) !default; +$alert-warning-color: $global-warning-background !default; +$global-danger-background: #f0506e !default; +$alert-danger-background: lighten(mix(white, $global-danger-background, 40%), 20%) !default; +$alert-danger-color: $global-danger-background !default; +$global-large-margin: 70px !default; +$article-margin-top: $global-large-margin !default; +$global-xxlarge-font-size: 2.625rem !default; +$article-title-font-size: $global-xxlarge-font-size !default; +$article-title-line-height: 1.2 !default; +$global-small-font-size: 0.875rem !default; +$article-meta-font-size: $global-small-font-size !default; +$article-meta-line-height: 1.4 !default; +$global-muted-color: #999 !default; +$article-meta-color: $global-muted-color !default; +$inverse-global-muted-color: rgba($global-inverse-color, 0.5) !default; +$inverse-article-meta-color: $inverse-global-muted-color !default; +$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; +$global-background: #fff !default; +$background-default-background: $global-background !default; +$background-muted-background: $global-muted-background !default; +$background-primary-background: $global-primary-background !default; +$global-secondary-background: #222 !default; +$background-secondary-background: $global-secondary-background !default; +$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; +$inverse-global-primary-background: $global-inverse-color !default; +$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; +$base-body-background: $global-background !default; +$global-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; +$base-body-font-family: $global-font-family !default; +$base-body-font-weight: normal !default; +$global-font-size: 16px !default; +$base-body-font-size: $global-font-size !default; +$global-line-height: 1.5 !default; +$base-body-line-height: $global-line-height !default; +$base-body-color: $global-color !default; +$global-link-color: #1e87f0 !default; +$base-link-color: $global-link-color !default; +$base-link-text-decoration: none !default; +$global-link-hover-color: #0f6ecd !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; +$global-medium-margin: 40px !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; +$global-xlarge-font-size: 2rem !default; +$base-h2-font-size: $global-xlarge-font-size !default; +$base-h2-line-height: 1.3 !default; +$global-large-font-size: 1.5rem !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; +$global-border-width: 1px !default; +$base-hr-border-width: $global-border-width !default; +$global-border: #e5e5e5 !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; +$global-small-margin: 10px !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; +$inverse-global-color: rgba($global-inverse-color, 0.7) !default; +$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-global-border: rgba($global-inverse-color, 0.2) !default; +$inverse-base-hr-border: $inverse-global-border !default; +$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; +$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; +$global-control-height: 40px !default; +$button-line-height: $global-control-height !default; +$global-control-small-height: 30px !default; +$button-small-line-height: $global-control-small-height !default; +$global-control-large-height: 55px !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; +$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; +$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; +$global-large-gutter: 70px !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; +$close-color: $global-muted-color !default; +$close-hover-color: $global-color !default; +$inverse-close-color: $inverse-global-muted-color !default; +$inverse-close-hover-color: $inverse-global-color !default; +$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; +$inverse-column-divider-rule-color: $inverse-global-border !default; +$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; +$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; +$countdown-item-line-height: 70px !default; +$countdown-number-font-size: 2rem !default; +$countdown-number-font-size-s: 4rem !default; +$countdown-number-font-size-m: 6rem !default; +$countdown-separator-font-size: 1rem !default; +$countdown-separator-font-size-s: 2rem !default; +$countdown-separator-font-size-m: 3rem !default; +$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; +$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; +$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; +$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; +$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; +$global-z-index: 1000 !default; +$drop-z-index: $global-z-index + 20 !default; +$drop-width: 300px !default; +$drop-margin: $global-margin !default; +$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; +$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; +$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; +$inverse-global-muted-background: rgba($global-inverse-color, 0.1) !default; +$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; +$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; +$inverse-grid-divider-border: $inverse-global-border !default; +$heading-primary-font-size: $global-xxlarge-font-size !default; +$heading-primary-line-height: 1.2 !default; +$heading-primary-font-size-m: 3.75rem !default; +$heading-primary-line-height-m: 1.1 !default; +$heading-hero-font-size: 4rem !default; +$heading-hero-line-height: 1.1 !default; +$heading-hero-font-size-s: 6rem !default; +$heading-hero-line-height-s: 1 !default; +$heading-hero-font-size-m: 8rem !default; +$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-border-width: $global-border-width !default; +$heading-line-height: $heading-line-border-width !default; +$heading-line-width: 2000px !default; +$heading-line-border: $global-border !default; +$heading-line-margin-horizontal: 0.6em !default; +$inverse-heading-divider-border: $inverse-global-border !default; +$inverse-heading-bullet-border: $inverse-global-border !default; +$inverse-heading-line-border: $inverse-global-border !default; +$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; +$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; +$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; +$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; +$inverse-global-color-mode: light !default; +$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; +$inverse-label-background: $inverse-global-primary-background !default; +$inverse-label-color: $inverse-global-inverse-color !default; +$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; +$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; +$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; +$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; +$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; +$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; +$global-xlarge-margin: 140px !default; +$margin-xlarge-margin-l: $global-xlarge-margin !default; +$marker-padding: 5px !default; +$marker-background: $global-secondary-background !default; +$marker-color: $global-inverse-color !default; +$marker-hover-color: $global-inverse-color !default; +$inverse-marker-background: $global-muted-background !default; +$inverse-marker-color: $global-color !default; +$inverse-marker-hover-color: $global-color !default; +$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; +$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; +$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; +$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; +$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; +$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; +$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; +$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; +$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; +$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; +$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; +$placeholder-margin-vertical: $global-margin !default; +$placeholder-padding-vertical: $global-gutter !default; +$placeholder-padding-horizontal: $global-gutter !default; +$placeholder-background: $global-muted-background !default; +$position-small-margin: $global-small-gutter !default; +$position-medium-margin: $global-gutter !default; +$position-large-margin: $global-gutter !default; +$position-large-margin-l: 50px !default; +$progress-height: 15px !default; +$progress-margin-vertical: $global-margin !default; +$progress-background: $global-muted-background !default; +$progress-bar-background: $global-primary-background !default; +$search-color: $global-color !default; +$search-placeholder-color: $global-muted-color !default; +$search-icon-color: $global-muted-color !default; +$search-default-width: 180px !default; +$search-default-height: $global-control-height !default; +$search-default-padding-horizontal: 6px !default; +$search-default-background: $global-muted-background !default; +$search-default-focus-background: $search-default-background !default; +$search-default-icon-width: $global-control-height !default; +$search-navbar-width: 400px !default; +$search-navbar-height: 40px !default; +$search-navbar-background: transparent !default; +$search-navbar-font-size: $global-large-font-size !default; +$search-navbar-icon-width: 40px !default; +$search-large-width: 500px !default; +$search-large-height: 80px !default; +$search-large-background: transparent !default; +$search-large-font-size: $global-xxlarge-font-size !default; +$search-large-icon-width: 80px !default; +$search-toggle-color: $global-muted-color !default; +$search-toggle-hover-color: $global-color !default; +$inverse-search-color: $inverse-global-color !default; +$inverse-search-placeholder-color: $inverse-global-muted-color !default; +$inverse-search-icon-color: $inverse-global-muted-color !default; +$inverse-search-default-background: $inverse-global-muted-background !default; +$inverse-search-default-focus-background: $inverse-search-default-background !default; +$inverse-search-navbar-background: transparent !default; +$inverse-search-large-background: transparent !default; +$inverse-search-toggle-color: $inverse-global-muted-color !default; +$inverse-search-toggle-hover-color: $inverse-global-color !default; +$section-padding-vertical: $global-medium-margin !default; +$section-padding-vertical-m: $global-large-margin !default; +$section-xsmall-padding-vertical: $global-margin !default; +$section-small-padding-vertical: $global-medium-margin !default; +$section-large-padding-vertical: $global-large-margin !default; +$section-large-padding-vertical-m: $global-xlarge-margin !default; +$section-xlarge-padding-vertical: $global-xlarge-margin !default; +$section-xlarge-padding-vertical-m: ($global-large-margin + $global-xlarge-margin) !default; +$section-default-background: $global-background !default; +$section-muted-background: $global-muted-background !default; +$section-primary-background: $global-primary-background !default; +$section-primary-color-mode: light !default; +$section-secondary-background: $global-secondary-background !default; +$section-secondary-color-mode: light !default; +$slidenav-padding-vertical: 5px !default; +$slidenav-padding-horizontal: 10px !default; +$slidenav-color: rgba($global-color, 0.5) !default; +$slidenav-hover-color: rgba($global-color, 0.9) !default; +$slidenav-active-color: rgba($global-color, 0.5) !default; +$slidenav-large-padding-vertical: 10px !default; +$slidenav-large-padding-horizontal: $slidenav-large-padding-vertical !default; +$inverse-slidenav-color: rgba($inverse-global-color, 0.7) !default; +$inverse-slidenav-hover-color: rgba($inverse-global-color, 0.95) !default; +$inverse-slidenav-active-color: rgba($inverse-global-color, 0.7) !default; +$sortable-dragged-z-index: $global-z-index + 50 !default; +$sortable-placeholder-opacity: 0 !default; +$sortable-empty-height: 50px !default; +$spinner-size: 30px !default; +$spinner-stroke-width: 1 !default; +$spinner-radius: floor(($spinner-size - $spinner-stroke-width) / 2) !default; +$spinner-circumference: round(2 * 3.141 * $spinner-radius) !default; +$spinner-duration: 1.4s !default; +$sticky-z-index: $global-z-index - 20 !default; +$sticky-animation-duration: 0.2s !default; +$sticky-reverse-animation-duration: 0.2s !default; +$subnav-margin-horizontal: 20px !default; +$subnav-item-color: $global-muted-color !default; +$subnav-item-hover-color: $global-color !default; +$subnav-item-hover-text-decoration: none !default; +$subnav-item-active-color: $global-emphasis-color !default; +$subnav-divider-margin-horizontal: $subnav-margin-horizontal !default; +$subnav-divider-border-height: 1.5em !default; +$subnav-divider-border-width: $global-border-width !default; +$subnav-divider-border: $global-border !default; +$subnav-pill-item-padding-vertical: 5px !default; +$subnav-pill-item-padding-horizontal: 10px !default; +$subnav-pill-item-background: transparent !default; +$subnav-pill-item-color: $subnav-item-color !default; +$subnav-pill-item-hover-background: $global-muted-background !default; +$subnav-pill-item-hover-color: $global-color !default; +$subnav-pill-item-onclick-background: $subnav-pill-item-hover-background !default; +$subnav-pill-item-onclick-color: $subnav-pill-item-hover-color !default; +$subnav-pill-item-active-background: $global-primary-background !default; +$subnav-pill-item-active-color: $global-inverse-color !default; +$subnav-item-disabled-color: $global-muted-color !default; +$inverse-subnav-item-color: $inverse-global-muted-color !default; +$inverse-subnav-item-hover-color: $inverse-global-color !default; +$inverse-subnav-item-active-color: $inverse-global-emphasis-color !default; +$inverse-subnav-divider-border: $inverse-global-border !default; +$inverse-subnav-pill-item-background: transparent !default; +$inverse-subnav-pill-item-color: $inverse-global-muted-color !default; +$inverse-subnav-pill-item-hover-background: $inverse-global-muted-background !default; +$inverse-subnav-pill-item-hover-color: $inverse-global-color !default; +$inverse-subnav-pill-item-onclick-background: $inverse-subnav-pill-item-hover-background !default; +$inverse-subnav-pill-item-onclick-color: $inverse-subnav-pill-item-hover-color !default; +$inverse-subnav-pill-item-active-background: $inverse-global-primary-background !default; +$inverse-subnav-pill-item-active-color: $inverse-global-inverse-color !default; +$inverse-subnav-item-disabled-color: $inverse-global-muted-color !default; +$tab-margin-horizontal: 20px !default; +$tab-item-padding-horizontal: 10px !default; +$tab-item-padding-vertical: 5px !default; +$tab-item-color: $global-muted-color !default; +$tab-item-hover-color: $global-color !default; +$tab-item-hover-text-decoration: none !default; +$tab-item-active-color: $global-emphasis-color !default; +$tab-item-disabled-color: $global-muted-color !default; +$inverse-tab-item-color: $inverse-global-muted-color !default; +$inverse-tab-item-hover-color: $inverse-global-color !default; +$inverse-tab-item-active-color: $inverse-global-emphasis-color !default; +$inverse-tab-item-disabled-color: $inverse-global-muted-color !default; +$table-margin-vertical: $global-margin !default; +$table-cell-padding-vertical: 16px !default; +$table-cell-padding-horizontal: 12px !default; +$table-header-cell-font-size: $global-font-size !default; +$table-header-cell-font-weight: bold !default; +$table-header-cell-color: $global-color !default; +$table-footer-font-size: $global-small-font-size !default; +$table-caption-font-size: $global-small-font-size !default; +$table-caption-color: $global-muted-color !default; +$table-row-active-background: #ffd !default; +$table-divider-border-width: $global-border-width !default; +$table-divider-border: $global-border !default; +$table-striped-row-background: $global-muted-background !default; +$table-hover-row-background: $table-row-active-background !default; +$table-small-cell-padding-vertical: 10px !default; +$table-small-cell-padding-horizontal: 12px !default; +$table-large-cell-padding-vertical: 22px !default; +$table-large-cell-padding-horizontal: 12px !default; +$table-expand-min-width: 150px !default; +$inverse-table-header-cell-color: $inverse-global-color !default; +$inverse-table-caption-color: $inverse-global-muted-color !default; +$inverse-table-row-active-background: fade-out($inverse-global-muted-background, 0.02) !default; +$inverse-table-divider-border: $inverse-global-border !default; +$inverse-table-striped-row-background: $inverse-global-muted-background !default; +$inverse-table-hover-row-background: $inverse-table-row-active-background !default; +$text-lead-font-size: $global-large-font-size !default; +$text-lead-line-height: 1.5 !default; +$text-lead-color: $global-emphasis-color !default; +$text-meta-font-size: $global-small-font-size !default; +$text-meta-line-height: 1.4 !default; +$text-meta-color: $global-muted-color !default; +$text-small-font-size: $global-small-font-size !default; +$text-small-line-height: 1.5 !default; +$text-large-font-size: $global-large-font-size !default; +$text-large-line-height: 1.5 !default; +$text-bold-font-weight: bolder !default; +$text-muted-color: $global-muted-color !default; +$text-primary-color: $global-primary-background !default; +$text-success-color: $global-success-background !default; +$text-warning-color: $global-warning-background !default; +$text-danger-color: $global-danger-background !default; +$text-background-color: $global-primary-background !default; +$inverse-text-lead-color: $inverse-global-color !default; +$inverse-text-meta-color: $inverse-global-muted-color !default; +$inverse-text-muted-color: $inverse-global-muted-color !default; +$inverse-text-primary-color: $inverse-global-color !default; +$thumbnav-margin-horizontal: 15px !default; +$thumbnav-margin-vertical: $thumbnav-margin-horizontal !default; +$tile-padding-horizontal: 15px !default; +$tile-padding-horizontal-s: $global-gutter !default; +$tile-padding-horizontal-m: $global-medium-gutter !default; +$tile-padding-vertical: $global-medium-margin !default; +$tile-padding-vertical-m: $global-large-margin !default; +$tile-xsmall-padding-vertical: $global-margin !default; +$tile-small-padding-vertical: $global-medium-margin !default; +$tile-large-padding-vertical: $global-large-margin !default; +$tile-large-padding-vertical-m: $global-xlarge-margin !default; +$tile-xlarge-padding-vertical: $global-xlarge-margin !default; +$tile-xlarge-padding-vertical-m: ($global-large-margin + $global-xlarge-margin) !default; +$tile-default-background: $global-background !default; +$tile-muted-background: $global-muted-background !default; +$tile-primary-background: $global-primary-background !default; +$tile-primary-color-mode: light !default; +$tile-secondary-background: $global-secondary-background !default; +$tile-secondary-color-mode: light !default; +$tooltip-z-index: $global-z-index + 30 !default; +$tooltip-max-width: 200px !default; +$tooltip-padding-vertical: 3px !default; +$tooltip-padding-horizontal: 6px !default; +$tooltip-background: #666 !default; +$tooltip-border-radius: 2px !default; +$tooltip-color: $global-inverse-color !default; +$tooltip-font-size: 12px !default; +$tooltip-margin: 10px !default; +$totop-padding: 5px !default; +$totop-color: $global-muted-color !default; +$totop-hover-color: $global-color !default; +$totop-active-color: $global-emphasis-color !default; +$inverse-totop-color: $inverse-global-muted-color !default; +$inverse-totop-hover-color: $inverse-global-color !default; +$inverse-totop-active-color: $inverse-global-emphasis-color !default; +$transition-duration: 0.3s !default; +$transition-scale: 1.1 !default; +$transition-slide-small-translate: 10px !default; +$transition-slide-medium-translate: 50px !default; +$transition-slow-duration: 0.7s !default; +$panel-scrollable-height: 170px !default; +$panel-scrollable-padding: 10px !default; +$panel-scrollable-border-width: $global-border-width !default; +$panel-scrollable-border: $global-border !default; +$height-small-height: 150px !default; +$height-medium-height: 300px !default; +$height-large-height: 450px !default; +$border-rounded-border-radius: 5px !default; +$box-shadow-duration: 0.1s !default; +$box-shadow-bottom-height: 30px !default; +$box-shadow-bottom-border-radius: 100% !default; +$box-shadow-bottom-background: #444 !default; +$box-shadow-bottom-blur: 20px !default; +$dropcap-margin-right: 10px !default; +$dropcap-font-size: (($global-line-height * 3) * 1em) !default; +$leader-fill-content: '.' !default; +$leader-fill-margin-left: $global-small-gutter !default; +$logo-font-size: $global-large-font-size !default; +$logo-font-family: $global-font-family !default; +$logo-color: $global-color !default; +$logo-hover-color: $global-color !default; +$dragover-box-shadow: 0 0 20px rgba(100,100,100,0.3) !default; +$inverse-logo-color: $inverse-global-color !default; +$inverse-logo-hover-color: $inverse-global-color !default; +$breakpoint-small: 640px !default; +$breakpoint-medium: 960px !default; +$breakpoint-large: 1200px !default; +$breakpoint-xlarge: 1600px !default; +$breakpoint-xsmall-max: ($breakpoint-small - 1) !default; +$breakpoint-small-max: ($breakpoint-medium - 1) !default; +$breakpoint-medium-max: ($breakpoint-large - 1) !default; +$breakpoint-large-max: ($breakpoint-xlarge - 1) !default; +$global-small-box-shadow: 0 2px 8px rgba(0,0,0,0.08) !default; +$global-medium-box-shadow: 0 5px 15px rgba(0,0,0,0.08) !default; +$global-large-box-shadow: 0 14px 25px rgba(0,0,0,0.16) !default; +$global-xlarge-box-shadow: 0 28px 50px rgba(0,0,0,0.16) !default; +$width-small-width: 150px !default; +$width-medium-width: 300px !default; +$width-large-width: 450px !default; +$width-xlarge-width: 600px !default; +$width-xxlarge-width: 750px !default; \ No newline at end of file diff --git a/_sass/system-font-css/package.json b/_sass/system-font-css/package.json index 91916c24..7f339a92 100644 --- a/_sass/system-font-css/package.json +++ b/_sass/system-font-css/package.json @@ -21,7 +21,7 @@ "_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", + "_where": "/Users/manthony/repos/docs.blockstack", "author": { "name": "Jonathan Neal", "email": "jonathantneal@hotmail.com", diff --git a/_sass/theme/uikit.scss b/_sass/theme/uikit.scss index 1a194f23..7b9df604 100644 --- a/_sass/theme/uikit.scss +++ b/_sass/theme/uikit.scss @@ -10,10 +10,10 @@ @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/description-list.scss"; +@import "../uikit/components/table.scss"; @import "../uikit/components/icon.scss"; -// @import "../uikit/components/form-range.scss"; +@import "../uikit/components/form-range.scss"; @import "../uikit/components/form.scss"; // After: Icon, Form Range @import "../uikit/components/button.scss"; diff --git a/_sass/uikit/components/_import.scss b/_sass/uikit/components/_import.scss index b3749a29..0d5fbd87 100644 --- a/_sass/uikit/components/_import.scss +++ b/_sass/uikit/components/_import.scss @@ -57,6 +57,7 @@ @import "sticky.scss"; @import "offcanvas.scss"; @import "switcher.scss"; +@import "leader.scss"; // Scrollspy // Toggle // Scroll @@ -73,11 +74,13 @@ // Utilities @import "animation.scss"; @import "width.scss"; +@import "height.scss"; @import "text.scss"; @import "column.scss"; @import "cover.scss"; @import "background.scss"; @import "align.scss"; +@import "svg.scss"; @import "utility.scss"; @import "flex.scss"; // After: Utility @import "margin.scss"; diff --git a/_sass/uikit/components/article.scss b/_sass/uikit/components/article.scss index 9cc470f2..3d4011f9 100644 --- a/_sass/uikit/components/article.scss +++ b/_sass/uikit/components/article.scss @@ -14,7 +14,8 @@ $article-margin-top: $global-large-margin !default; -$article-title-font-size: $global-xxlarge-font-size !default; +$article-title-font-size-m: $global-xxlarge-font-size !default; +$article-title-font-size: $article-title-font-size-m * 0.85 !default; $article-title-line-height: 1.2 !default; $article-meta-font-size: $global-small-font-size !default; @@ -67,6 +68,13 @@ $article-meta-color: $global-muted-color !default; @if(mixin-exists(hook-article-title)) {@include hook-article-title();} } +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-article-title { font-size: $article-title-font-size-m; } + +} + /* Meta ========================================================================== */ diff --git a/_sass/uikit/components/background.scss b/_sass/uikit/components/background.scss index ca7a344a..0e145318 100644 --- a/_sass/uikit/components/background.scss +++ b/_sass/uikit/components/background.scss @@ -65,7 +65,15 @@ $background-secondary-background: $global-secondary-background !d /* Attachment ========================================================================== */ -.uk-background-fixed { background-attachment: fixed; } +/* + * 1. Fix bug introduced in Chrome 67: the background image is not visible if any element on the page uses `translate3d` + */ + +.uk-background-fixed { + background-attachment: fixed; + /* 1 */ + backface-visibility: hidden; +} /* * Exclude touch devices because `fixed` doesn't work on iOS and Android diff --git a/_sass/uikit/components/badge.scss b/_sass/uikit/components/badge.scss index d076c5d0..ab79ae28 100644 --- a/_sass/uikit/components/badge.scss +++ b/_sass/uikit/components/badge.scss @@ -1,6 +1,6 @@ // Name: Badge // Description: Component to create notification badges - +// // Component: `uk-badge` // // ======================================================================== diff --git a/_sass/uikit/components/base.scss b/_sass/uikit/components/base.scss index 80353528..fe9b4f51 100644 --- a/_sass/uikit/components/base.scss +++ b/_sass/uikit/components/base.scss @@ -42,9 +42,11 @@ $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-font-size-m: $global-xxlarge-font-size !default; +$base-h1-font-size: $base-h1-font-size-m * 0.85 !default; $base-h1-line-height: 1.2 !default; -$base-h2-font-size: $global-xlarge-font-size !default; +$base-h2-font-size-m: $global-xlarge-font-size !default; +$base-h2-font-size: $base-h2-font-size-m * 0.85 !default; $base-h2-line-height: 1.3 !default; $base-h3-font-size: $global-large-font-size !default; $base-h3-line-height: 1.4 !default; @@ -193,7 +195,7 @@ strong { font-weight: $base-strong-font-weight; } * Emphasize */ -em { color: $global-secondary-background } +em { color: $base-em-color; } /* * Insert @@ -257,10 +259,10 @@ 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 + * 1. Add responsiveness. + * 2. Auto-scale the height. Only needed if `height` attribute is present. + * 3. Corrects responsive `max-width` behavior if padding and border are used. + * 4. Exclude SVGs for IE11 because they don't preserve their aspect ratio. */ audio, @@ -275,12 +277,37 @@ video { box-sizing: border-box; } +/* 4 */ +@supports (display: block) { + + svg { + max-width: 100%; + height: auto; + box-sizing: border-box; + } + +} + /* * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } +/* + * Hide `alt` text for lazy load images + * Selector for background while loading img[data-src*='.jpg'][src*='data:image'] { background: grey; } + */ + +img:not([src]) { visibility: hidden; } + +/* + * Iframe + * Remove border in all browsers + */ + +iframe { border: 0; } + /* Block elements ========================================================================== */ @@ -374,6 +401,14 @@ h6, .uk-h6 { @if(mixin-exists(hook-base-h6)) {@include hook-base-h6();} } +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + h1, .uk-h1 { font-size: $base-h1-font-size-m; } + h2, .uk-h2 { font-size: $base-h2-font-size-m; } + +} + /* Lists ========================================================================== */ @@ -485,12 +520,6 @@ 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; @@ -524,30 +553,6 @@ summary { display: list-item; } 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 ========================================================================== */ @@ -555,11 +560,17 @@ textarea { touch-action: manipulation; } * 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}'; } +.uk-breakpoint-s::before { content: '#{$breakpoint-small}'; } +.uk-breakpoint-m::before { content: '#{$breakpoint-medium}'; } +.uk-breakpoint-l::before { content: '#{$breakpoint-large}'; } +.uk-breakpoint-xl::before { content: '#{$breakpoint-xlarge}'; } +:root { + --uk-breakpoint-s: $breakpoint-small; + --uk-breakpoint-m: $breakpoint-medium; + --uk-breakpoint-l: $breakpoint-large; + --uk-breakpoint-xl: $breakpoint-xlarge; +} // Hooks // ======================================================================== diff --git a/_sass/uikit/components/button.scss b/_sass/uikit/components/button.scss index f65e1c22..501de880 100644 --- a/_sass/uikit/components/button.scss +++ b/_sass/uikit/components/button.scss @@ -84,15 +84,14 @@ $button-link-disabled-color: $global-muted-color !default; /* * 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. + * 3. Address `overflow` set to `hidden` in IE. + * 4. Correct `font` properties and `color` not being inherited for `button`. + * 5. Remove the inheritance of text transform in Edge, Firefox, and IE. + * 6. Style + * 7. `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`. + * 8. Align text if button has a width + * 9. Required for `a`. */ .uk-button { @@ -101,25 +100,23 @@ $button-link-disabled-color: $global-muted-color !default; /* 2 */ border: none; /* 3 */ - border-radius: 0; - /* 4 */ overflow: visible; - /* 5 */ + /* 4 */ font: inherit; color: inherit; - /* 6 */ + /* 5 */ text-transform: none; - /* 7 */ + /* 6 */ display: inline-block; box-sizing: border-box; padding: 0 $button-padding-horizontal; vertical-align: middle; font-size: $button-font-size; - /* 8 */ + /* 7 */ line-height: $button-line-height; - /* 9 */ + /* 8 */ text-align: center; - /* 10 */ + /* 9 */ text-decoration: none; @if(mixin-exists(hook-button)) {@include hook-button();} } @@ -137,7 +134,7 @@ $button-link-disabled-color: $global-muted-color !default; /* Hover */ .uk-button:hover { - /* 8 */ + /* 9 */ text-decoration: none; @if(mixin-exists(hook-button-hover)) {@include hook-button-hover();} } diff --git a/_sass/uikit/components/comment.scss b/_sass/uikit/components/comment.scss index 8583dd8a..54631d61 100644 --- a/_sass/uikit/components/comment.scss +++ b/_sass/uikit/components/comment.scss @@ -45,6 +45,8 @@ $comment-list-padding-left-m: 100px !default; ========================================================================== */ .uk-comment-body { + overflow-wrap: break-word; + word-wrap: break-word; @if(mixin-exists(hook-comment-body)) {@include hook-comment-body();} } diff --git a/_sass/uikit/components/container.scss b/_sass/uikit/components/container.scss index c518d6d7..fef2a93a 100644 --- a/_sass/uikit/components/container.scss +++ b/_sass/uikit/components/container.scss @@ -14,6 +14,7 @@ // ======================================================================== $container-max-width: 1200px !default; +$container-xsmall-max-width: 750px !default; $container-small-max-width: 900px !default; $container-large-max-width: 1600px !default; @@ -91,6 +92,8 @@ $container-padding-horizontal-m: $global-medium-gutter !default; /* Size modifier ========================================================================== */ +.uk-container-xsmall { max-width: $container-xsmall-max-width; } + .uk-container-small { max-width: $container-small-max-width; } .uk-container-large { max-width: $container-large-max-width; } diff --git a/_sass/uikit/components/form.scss b/_sass/uikit/components/form.scss index e731cffb..e53b6b8a 100644 --- a/_sass/uikit/components/form.scss +++ b/_sass/uikit/components/form.scss @@ -71,6 +71,7 @@ $form-width-large: 500px !default; $form-select-padding-right: 20px !default; $form-select-icon-color: $global-color !default; +$form-select-option-color: #444 !default; $form-select-disabled-icon-color: $global-muted-color !default; $form-radio-size: 16px !default; @@ -299,10 +300,10 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,% * Placeholder */ -.uk-input:-ms-input-placeholder { color: $form-placeholder-color !important; } +.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::-ms-input-placeholder { color: $form-placeholder-color !important; } .uk-textarea::placeholder { color: $form-placeholder-color; } @@ -401,6 +402,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); } * 1. Remove default style. Also works in Firefox * 2. Style * 3. Remove default style in IE 10/11 + * 4. Set `color` for options in the select dropdown, because the inherited `color` might be too light. */ .uk-select:not([multiple]):not([size]) { @@ -417,6 +419,9 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); } /* 3 */ .uk-select:not([multiple]):not([size])::-ms-expand { display: none; } +/* 4 */ +.uk-select:not([multiple]):not([size]) option { color: $form-select-option-color; } + /* * Disabled */ @@ -687,7 +692,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); } * Input padding */ -.uk-form-icon:not(.uk-form-icon-flip) + .uk-input { padding-left: $form-icon-width !important; } +.uk-form-icon:not(.uk-form-icon-flip) ~ .uk-input { padding-left: $form-icon-width !important; } /* * Position modifier @@ -698,7 +703,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); } left: auto; } -.uk-form-icon-flip + .uk-input { padding-right: $form-icon-width !important; } +.uk-form-icon-flip ~ .uk-input { padding-right: $form-icon-width !important; } // Hooks @@ -745,6 +750,9 @@ $inverse-form-radio-checked-icon-color: $inverse-global-inverse-color !d $inverse-form-radio-checked-focus-background: darken($inverse-global-primary-background, 10%) !default; +$inverse-form-icon-color: $inverse-global-muted-color !default; +$inverse-form-icon-hover-color: $inverse-global-color !default; + // @mixin hook-inverse-form(){} diff --git a/_sass/uikit/components/grid-masonry.scss b/_sass/uikit/components/grid-masonry.scss new file mode 100644 index 00000000..935ea251 --- /dev/null +++ b/_sass/uikit/components/grid-masonry.scss @@ -0,0 +1,69 @@ +// Name: Grid +// Description: Component to create two dimensional grids +// +// Component: `uk-grid2` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$grid-column-xsmall: 100px !default; +$grid-column-small: 200px !default; +$grid-column-medium: 300px !default; +$grid-column-large: 400px !default; +$grid-column-xlarge: 500px !default; +$grid-column-xxlarge: 600px !default; + +$grid-gap-small: $global-small-gutter !default; +$grid-gap-medium: $global-gutter !default; +$grid-gap-large: $global-large-gutter !default; + + +/* ======================================================================== + Component: Grid + ========================================================================== */ + +.uk-grid-masonry { display: grid; } +.uk-grid-inline { display: inline-grid; } + + +/* Columns Width + ========================================================================== */ + +.uk-grid-column-xsmall { grid-template-columns: repeat(auto-fill, minmax($grid-column-xsmall,1fr)); } +.uk-grid-column-small { grid-template-columns: repeat(auto-fill, minmax($grid-column-small,1fr)); } +.uk-grid-column-medium { grid-template-columns: repeat(auto-fill, minmax($grid-column-medium,1fr)); } +.uk-grid-column-large { grid-template-columns: repeat(auto-fill, minmax($grid-column-large,1fr)); } +.uk-grid-column-xlarge { grid-template-columns: repeat(auto-fill, minmax($grid-column-xlarge,1fr)); } +.uk-grid-column-xxlarge { grid-template-columns: repeat(auto-fill, minmax($grid-column-xxlarge,1fr)); } + + +/* Gap + ========================================================================== */ + +.uk-grid-gap-none { grid-gap: 0; } +.uk-grid-gap-small { grid-gap: $grid-gap-small; } +.uk-grid-gap-medium { grid-gap: $grid-gap-medium; } +.uk-grid-gap-large { grid-gap: $grid-gap-large; } + + +/* Auto Placement + ========================================================================== */ + +// Default +.uk-grid-auto-flow-row { grid-auto-flow: row; } +.uk-grid-auto-flow-column { grid-auto-flow: column; } +.uk-grid-auto-flow-dense { grid-auto-flow: dense; } + + +/* Item Span + ========================================================================== */ + +// TODO Fix implicit tracks if span is too large +.uk-grid-item-span-2 { grid-column-start: span 2; } +.uk-grid-item-span-3 { grid-column-start: span 3; } +.uk-grid-item-span-4 { grid-column-start: span 4; } +.uk-grid-item-span-5 { grid-column-start: span 5; } + diff --git a/_sass/uikit/components/heading.scss b/_sass/uikit/components/heading.scss index 97f1c185..13f97229 100644 --- a/_sass/uikit/components/heading.scss +++ b/_sass/uikit/components/heading.scss @@ -13,21 +13,23 @@ // Variables // ======================================================================== -$heading-primary-font-size: $global-xxlarge-font-size !default; -$heading-primary-line-height: 1.2 !default; +$heading-primary-font-size-l: 3.75rem !default; // 60px +$heading-primary-line-height-l: 1.1 !default; -$heading-primary-font-size-m: 3.75rem !default; // 54px -$heading-primary-line-height-m: 1.1 !default; +$heading-primary-font-size-m: $heading-primary-font-size-l * 0.9 !default; // 54px -$heading-hero-font-size: 4rem !default; // 64px -$heading-hero-line-height: 1.1 !default; +$heading-primary-font-size: $heading-primary-font-size-l * 0.8 !default; // 48px +$heading-primary-line-height: 1.2 !default; -$heading-hero-font-size-s: 6rem !default; // 96px -$heading-hero-line-height-s: 1 !default; +$heading-hero-font-size-l: 8rem !default; // 128px +$heading-hero-line-height-l: 1 !default; -$heading-hero-font-size-m: 8rem !default; // 128px +$heading-hero-font-size-m: $heading-hero-font-size-l * 0.75 !default; // 96px $heading-hero-line-height-m: 1 !default; +$heading-hero-font-size: $heading-hero-font-size-l * 0.5 !default; // 64px +$heading-hero-line-height: 1.1 !default; + $heading-divider-padding-bottom: 10px !default; $heading-divider-border-width: $global-border-width !default; $heading-divider-border: $global-border !default; @@ -63,9 +65,16 @@ $heading-line-margin-horizontal: 0.6em !default; /* Tablet landscape and bigger */ @media (min-width: $breakpoint-medium) { + .uk-heading-primary { font-size: $heading-primary-font-size-m; } + +} + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + .uk-heading-primary { - font-size: $heading-primary-font-size-m; - line-height: $heading-primary-line-height-m; + font-size: $heading-primary-font-size-l; + line-height: $heading-primary-line-height-l; } } @@ -80,22 +89,22 @@ $heading-line-margin-horizontal: 0.6em !default; @if(mixin-exists(hook-heading-hero)) {@include hook-heading-hero();} } -/* Phone landscape and bigger */ -@media (min-width: $breakpoint-small) { +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { .uk-heading-hero { - font-size: $heading-hero-font-size-s; - line-height: $heading-hero-line-height-s; + font-size: $heading-hero-font-size-m; + line-height: $heading-hero-line-height-m; } } -/* Tablet landscape and bigger */ -@media (min-width: $breakpoint-medium) { +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { .uk-heading-hero { - font-size: $heading-hero-font-size-m; - line-height: $heading-hero-line-height-m; + font-size: $heading-hero-font-size-l; + line-height: $heading-hero-line-height-l; } } diff --git a/_sass/uikit/components/height.scss b/_sass/uikit/components/height.scss new file mode 100644 index 00000000..3bcc1504 --- /dev/null +++ b/_sass/uikit/components/height.scss @@ -0,0 +1,54 @@ +// Name: Height +// Description: Utilities for heights +// +// Component: `uk-height-*` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$height-small-height: 150px !default; +$height-medium-height: 300px !default; +$height-large-height: 450px !default; + + +/* ======================================================================== + Component: Height + ========================================================================== */ + +[class*='uk-height'] { box-sizing: border-box; } + +/* + * Only works if parent element has a height set + */ + +.uk-height-1-1 { height: 100%; } + +/* + * Useful to create image teasers + */ + +.uk-height-viewport { min-height: 100vh; } + +/* + * Pixel + * Useful for `overflow: auto` + */ + +.uk-height-small { height: $height-small-height; } +.uk-height-medium { height: $height-medium-height; } +.uk-height-large { height: $height-large-height; } + +.uk-height-max-small { max-height: $height-small-height; } +.uk-height-max-medium { max-height: $height-medium-height; } +.uk-height-max-large { max-height: $height-large-height; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-height-misc)) {@include hook-height-misc();} + +// @mixin hook-height-misc(){} diff --git a/_sass/uikit/components/icon.scss b/_sass/uikit/components/icon.scss index 2ff70ecf..8a6eeffb 100644 --- a/_sass/uikit/components/icon.scss +++ b/_sass/uikit/components/icon.scss @@ -90,13 +90,10 @@ button.uk-icon:not(:disabled) { cursor: pointer; } /* * 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 +.uk-icon [fill*='#']:not(.uk-preserve) { fill: currentcolor; } +.uk-icon [stroke*='#']:not(.uk-preserve) { stroke: currentcolor; } /* * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835 diff --git a/_sass/uikit/components/iconnav.scss b/_sass/uikit/components/iconnav.scss index ae739c90..6e2cfb86 100644 --- a/_sass/uikit/components/iconnav.scss +++ b/_sass/uikit/components/iconnav.scss @@ -47,14 +47,12 @@ $iconnav-item-active-color: $global-color !default; } /* - * 1. Space is allocated solely based on content dimensions: 0 0 auto - * 2. Gutter + * Space is allocated based on content dimensions, but shrinks: 0 1 auto + * 1. Gutter */ .uk-iconnav > * { /* 1 */ - flex: none; - /* 2 */ padding-left: $iconnav-margin-horizontal; } diff --git a/_sass/uikit/components/leader.scss b/_sass/uikit/components/leader.scss new file mode 100644 index 00000000..bf4ac04c --- /dev/null +++ b/_sass/uikit/components/leader.scss @@ -0,0 +1,70 @@ +// Name: Leader +// Description: Component to create dot leaders +// +// Component: `uk-leader` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$leader-fill-content: unquote('.') !default; +$leader-fill-margin-left: $global-small-gutter !default; + + +/* ======================================================================== + Component: Leader + ========================================================================== */ + +.uk-leader { overflow: hidden; } + +/* + * 1. Place element in text flow + * 2. Never break into a new line + * 3. Get a string back with as many repeating characters to fill the container + * 4. Prevent wrapping. Overflowing characters will be clipped by the container + */ + +.uk-leader-fill::after { + /* 1 */ + display: inline-block; + margin-left: $leader-fill-margin-left; + /* 2 */ + width: 0; + /* 3 */ + content: attr(data-fill); + /* 4 */ + white-space: nowrap; + @if(mixin-exists(hook-leader)) {@include hook-leader();} +} + +/* + * Hide if media does not match + */ + +.uk-leader-fill.uk-leader-hide::after { display: none; } + +/* + * Pass fill character to JS + */ + +.uk-leader-fill-content::before { content: '#{$leader-fill-content}'; } +:root { --uk-leader-fill-content: $leader-fill-content; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-leader-misc)) {@include hook-leader-misc();} + +// @mixin hook-leader(){} +// @mixin hook-leader-misc(){} + + +// Inverse +// ======================================================================== + + + +// @mixin hook-inverse-leader(){} diff --git a/_sass/uikit/components/list.scss b/_sass/uikit/components/list.scss index ed810bb0..b1ade998 100644 --- a/_sass/uikit/components/list.scss +++ b/_sass/uikit/components/list.scss @@ -113,6 +113,7 @@ $internal-list-bullet-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D /* * Bullet + * 1. Reset display table which causes issues in combination with multi column layouts */ .uk-list-bullet > li { @@ -130,7 +131,8 @@ $internal-list-bullet-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D @include svg-fill($internal-list-bullet-image, "#000", $list-bullet-icon-color); background-repeat: no-repeat; background-position: 50% 50%; - float: left; + /* 1 */ + display: block; @if(mixin-exists(hook-list-bullet)) {@include hook-list-bullet();} } diff --git a/_sass/uikit/components/navbar.scss b/_sass/uikit/components/navbar.scss index a1f633a3..f42ffc20 100644 --- a/_sass/uikit/components/navbar.scss +++ b/_sass/uikit/components/navbar.scss @@ -222,7 +222,7 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default; align-items: center; /* 2 */ box-sizing: border-box; - height: $navbar-nav-item-height; + min-height: $navbar-nav-item-height; padding: 0 $navbar-nav-item-padding-horizontal; /* 3 */ font-size: $navbar-nav-item-font-size; diff --git a/_sass/uikit/components/search.scss b/_sass/uikit/components/search.scss index 78a1bf50..a61002f5 100644 --- a/_sass/uikit/components/search.scss +++ b/_sass/uikit/components/search.scss @@ -211,8 +211,8 @@ $search-toggle-hover-color: $global-color !default; .uk-search-default .uk-search-icon { width: $search-default-icon-width; } -.uk-search-default .uk-search-icon:not(.uk-search-icon-flip) + .uk-search-input { padding-left: ($search-default-icon-width); } -.uk-search-default .uk-search-icon-flip + .uk-search-input { padding-right: ($search-default-icon-width); } +.uk-search-default .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-default-icon-width); } +.uk-search-default .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-default-icon-width); } /* Navbar modifier @@ -237,8 +237,8 @@ $search-toggle-hover-color: $global-color !default; .uk-search-navbar .uk-search-icon { width: $search-navbar-icon-width; } -.uk-search-navbar .uk-search-icon:not(.uk-search-icon-flip) + .uk-search-input { padding-left: ($search-navbar-icon-width); } -.uk-search-navbar .uk-search-icon-flip + .uk-search-input { padding-right: ($search-navbar-icon-width); } +.uk-search-navbar .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-navbar-icon-width); } +.uk-search-navbar .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-navbar-icon-width); } /* Large modifier @@ -263,8 +263,8 @@ $search-toggle-hover-color: $global-color !default; .uk-search-large .uk-search-icon { width: $search-large-icon-width; } -.uk-search-large .uk-search-icon:not(.uk-search-icon-flip) + .uk-search-input { padding-left: ($search-large-icon-width); } -.uk-search-large .uk-search-icon-flip + .uk-search-input { padding-right: ($search-large-icon-width); } +.uk-search-large .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-large-icon-width); } +.uk-search-large .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-large-icon-width); } /* Toggle diff --git a/_sass/uikit/components/section.scss b/_sass/uikit/components/section.scss index 3c0707a1..ee7d2506 100644 --- a/_sass/uikit/components/section.scss +++ b/_sass/uikit/components/section.scss @@ -64,10 +64,8 @@ $section-secondary-color-mode: light !default; @media (min-width: $breakpoint-medium) { .uk-section { - // padding-top: $section-padding-vertical-m; - // padding-bottom: $section-padding-vertical-m; - padding-top: 15px; - padding-bottom: 15px; + padding-top: $section-padding-vertical-m; + padding-bottom: $section-padding-vertical-m; } } @@ -223,4 +221,4 @@ $section-secondary-color-mode: light !default; // @mixin hook-section-secondary(){} // @mixin hook-section-primary(){} // @mixin hook-section-overlap(){} -// @mixin hook-section-misc(){} +// @mixin hook-section-misc(){} \ No newline at end of file diff --git a/_sass/uikit/components/sortable.scss b/_sass/uikit/components/sortable.scss index 8895f11c..ba05eecd 100644 --- a/_sass/uikit/components/sortable.scss +++ b/_sass/uikit/components/sortable.scss @@ -33,12 +33,6 @@ $sortable-empty-height: 50px !default; @if(mixin-exists(hook-sortable)) {@include hook-sortable();} } -/* - * Deactivate browser touch actions in IE11 and Edge - */ - -.uk-sortable > * { touch-action: none; } - /* * Deactivate pointer-events on SVGs in Safari */ diff --git a/_sass/uikit/components/svg.scss b/_sass/uikit/components/svg.scss new file mode 100644 index 00000000..bcf804af --- /dev/null +++ b/_sass/uikit/components/svg.scss @@ -0,0 +1,36 @@ +// Name: SVG +// Description: Component to style SVGs +// +// Component: `uk-svg` +// +// ======================================================================== + + +/* ======================================================================== + Component: SVG + ========================================================================== */ + +/* + * 1. Fill all SVG elements with the current text color if no `fill` attribute is set + * 2. Set the fill and stroke color of all SVG elements to the current text color + */ + +/* 1 */ +.uk-svg, +/* 2 */ +.uk-svg:not(.uk-preserve) [fill*='#']:not(.uk-preserve) { fill: currentcolor; } +.uk-svg:not(.uk-preserve) [stroke*='#']:not(.uk-preserve) { stroke: currentcolor; } + +/* + * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835 + */ + +.uk-svg { transform: translate(0,0); } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-svg-misc)) {@include hook-svg-misc();} + +// @mixin hook-svg-misc(){} diff --git a/_sass/uikit/components/table.scss b/_sass/uikit/components/table.scss index 313d218b..929ff91a 100644 --- a/_sass/uikit/components/table.scss +++ b/_sass/uikit/components/table.scss @@ -89,7 +89,7 @@ $table-expand-min-width: 150px !default; .uk-table th { padding: $table-cell-padding-vertical $table-cell-padding-horizontal; text-align: left; - vertical-align: bottom; + vertical-align: top; /* customized: bottom */ /* 1 */ font-size: $table-header-cell-font-size; font-weight: $table-header-cell-font-weight; @@ -134,16 +134,6 @@ $table-expand-min-width: 150px !default; } -/* Row - ========================================================================== */ - -.uk-table > tr.uk-active, -.uk-table tbody tr.uk-active { - background: $table-row-active-background; - @if(mixin-exists(hook-table-row-active)) {@include hook-table-row-active();} -} - - /* Alignment modifier ========================================================================== */ @@ -186,6 +176,15 @@ $table-expand-min-width: 150px !default; } +/* Active state + ========================================================================== */ + +.uk-table > tr.uk-active, +.uk-table tbody tr.uk-active { + background: $table-row-active-background; + @if(mixin-exists(hook-table-row-active)) {@include hook-table-row-active();} +} + /* Size modifier ========================================================================== */ @@ -313,4 +312,4 @@ $inverse-table-hover-row-background: $inverse-table-row-acti // @mixin hook-inverse-table-row-active(){} // @mixin hook-inverse-table-divider(){} // @mixin hook-inverse-table-striped(){} -// @mixin hook-inverse-table-hover(){} \ No newline at end of file +// @mixin hook-inverse-table-hover(){} diff --git a/_sass/uikit/components/text.scss b/_sass/uikit/components/text.scss index c60915b8..a4edbdab 100644 --- a/_sass/uikit/components/text.scss +++ b/_sass/uikit/components/text.scss @@ -213,9 +213,9 @@ td.uk-text-truncate { max-width: 0; } /* * 1. Wrap long words onto the next line and break them if they are too long to fit * 2. Legacy `word-wrap` as fallback for `overflow-wrap` - * 3. Add a hyphen where the word breaks - * 4. Fix `overflow-wrap` which doesn't work with table cells in Chrome, Opera, IE11 and Edge + * 3. Fix `overflow-wrap` which doesn't work with table cells in Chrome, Opera, IE11 and Edge * Must use `break-all` to support IE11 and Edge + * Note: Not using `hyphens: auto;` because it hyphenates text even if not needed */ .uk-text-break { @@ -223,13 +223,9 @@ td.uk-text-truncate { max-width: 0; } overflow-wrap: break-word; /* 2 */ word-wrap: break-word; - /* 3 */ - -ms-hyphens: auto; - -webkit-hyphens: auto; - hyphens: auto; } -/* 4 */ +/* 3 */ th.uk-text-break, td.uk-text-break { word-break: break-all; } diff --git a/_sass/uikit/components/thumbnav.scss b/_sass/uikit/components/thumbnav.scss index ee551f99..ce211a1f 100644 --- a/_sass/uikit/components/thumbnav.scss +++ b/_sass/uikit/components/thumbnav.scss @@ -41,14 +41,12 @@ $thumbnav-margin-vertical: $thumbnav-margin-horizontal !de } /* - * 1. Space is allocated solely based on content dimensions: 0 0 auto - * 2. Gutter + * Space is allocated based on content dimensions, but shrinks: 0 1 auto + * 1. Gutter */ .uk-thumbnav > * { /* 1 */ - flex: none; - /* 2 */ padding-left: $thumbnav-margin-horizontal; } diff --git a/_sass/uikit/components/utility.scss b/_sass/uikit/components/utility.scss index 2ac17776..93aa2e16 100644 --- a/_sass/uikit/components/utility.scss +++ b/_sass/uikit/components/utility.scss @@ -8,16 +8,13 @@ // `uk-resize-*` // `uk-display-*` // `uk-inline-*` -// `uk-height-*` // `uk-responsive-*` // `uk-preserve-width` // `uk-border-*` // `uk-box-shadow-*` // `uk-box-shadow-bottom` // `uk-dropcap` -// `uk-leader` // `uk-logo` -// `uk-svg` // `uk-blend-*` // `uk-transform-*` // `uk-transform-origin-*` @@ -38,10 +35,6 @@ $panel-scrollable-padding: 10px !default; $panel-scrollable-border-width: $global-border-width !default; $panel-scrollable-border: $global-border !default; -$height-small-height: 150px !default; -$height-medium-height: 300px !default; -$height-large-height: 450px !default; - $border-rounded-border-radius: 5px !default; $box-shadow-duration: 0.1s !default; @@ -54,9 +47,6 @@ $box-shadow-bottom-blur: 20px !default; $dropcap-margin-right: 10px !default; $dropcap-font-size: (($global-line-height * 3) * 1em) !default; -$leader-fill-content: '.' !default; -$leader-fill-margin-left: $global-small-gutter !default; - $logo-font-size: $global-large-font-size !default; $logo-font-family: $global-font-family !default; $logo-color: $global-color !default; @@ -214,37 +204,6 @@ $dragover-box-shadow: 0 0 20px rgba(100,100,100,0.3) } -/* Height - ========================================================================== */ - -[class*='uk-height'] { box-sizing: border-box; } - -/* - * Only works if parent element has a height set - */ - -.uk-height-1-1 { height: 100%; } - -/* - * Useful to create image teasers - */ - -.uk-height-viewport { min-height: 100vh; } - -/* - * Pixel - * Useful for `overflow: auto` - */ - -.uk-height-small { height: $height-small-height; } -.uk-height-medium { height: $height-medium-height; } -.uk-height-large { height: $height-large-height; } - -.uk-height-max-small { max-height: $height-small-height; } -.uk-height-max-medium { max-height: $height-medium-height; } -.uk-height-max-large { max-height: $height-large-height; } - - /* Responsive objects ========================================================================== */ @@ -300,6 +259,7 @@ $dragover-box-shadow: 0 0 20px rgba(100,100,100,0.3) ========================================================================== */ .uk-border-circle { border-radius: 50%; } +.uk-border-pill { border-radius: 500px; } .uk-border-rounded { border-radius: $border-rounded-border-radius; } /* @@ -372,7 +332,17 @@ $dragover-box-shadow: 0 0 20px rgba(100,100,100,0.3) /* Drop cap ========================================================================== */ +/* + * 1. Firefox doesn't apply `::first-letter` if the first letter is inside child elements + * https://bugzilla.mozilla.org/show_bug.cgi?id=214004 + * 2. In Firefox, a floating `::first-letter` doesn't have a line box and there for no `line-height` + * https://bugzilla.mozilla.org/show_bug.cgi?id=317933 + * 3. Caused by 1.: Edge creates two nested `::first-letter` containers, one for each selector + * This doubles the `font-size` exponential when using the `em` unit. + */ + .uk-dropcap::first-letter, +/* 1 */ .uk-dropcap > p:first-of-type::first-letter { display: block; margin-right: $dropcap-margin-right; @@ -382,40 +352,20 @@ $dragover-box-shadow: 0 0 20px rgba(100,100,100,0.3) @if(mixin-exists(hook-dropcap)) {@include hook-dropcap();} } +/* 2 */ +@-moz-document url-prefix() { -/* Leader - ========================================================================== */ - -.uk-leader { overflow: hidden; } - -/* - * 1. Place element in text flow - * 2. Never break into a new line - * 3. Get a string back with as many repeating characters to fill the container - * 4. Prevent wrapping. Overflowing characters will be clipped by the container - */ + .uk-dropcap::first-letter, + .uk-dropcap > p:first-of-type::first-letter { margin-top: 1.1%; } -.uk-leader-fill::after { - /* 1 */ - display: inline-block; - margin-left: $leader-fill-margin-left; - /* 2 */ - width: 0; - /* 3 */ - content: attr(data-fill); - /* 4 */ - white-space: nowrap; - @if(mixin-exists(hook-leader)) {@include hook-leader();} } -/* - * Hide if media does not match - */ +/* 3 */ +@supports (-ms-ime-align: auto) { -.uk-leader-fill.uk-leader-hide::after { display: none; } + .uk-dropcap > p:first-of-type::first-letter { font-size: 1em; } -/* Pass fill character to JS */ -.var-leader-fill:before { content: $leader-fill-content; } +} /* Logo @@ -447,30 +397,6 @@ $dragover-box-shadow: 0 0 20px rgba(100,100,100,0.3) .uk-logo-inverse { display: none; } -/* SVG - ========================================================================== */ - -/* - * 1. Fill all SVG elements with the current text color if no `fill` attribute is set - * 2. Set the fill and stroke color of all SVG elements to the current text color - * 3. Fix for uppercase attribute names in Edge. Will be fixed in Windows 10 builds 16251+ - */ - -/* 1 */ -.uk-svg, -/* 2 */ -.uk-svg:not(.uk-preserve) [fill*='#']:not(.uk-preserve), -.uk-svg:not(.uk-preserve) [FILL*='#']:not(.uk-preserve) { fill: currentcolor; } // 3 -.uk-svg:not(.uk-preserve) [stroke*='#']:not(.uk-preserve), -.uk-svg:not(.uk-preserve) [STROKE*='#']:not(.uk-preserve) { stroke: currentcolor; } // 3 - -/* - * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835 - */ - -.uk-svg { transform: translate(0,0); } - - /* Disabled State ========================================================================== */ @@ -550,7 +476,6 @@ $dragover-box-shadow: 0 0 20px rgba(100,100,100,0.3) // @mixin hook-panel-scrollable(){} // @mixin hook-box-shadow-bottom(){} // @mixin hook-dropcap(){} -// @mixin hook-leader(){} // @mixin hook-logo(){} // @mixin hook-logo-hover(){} // @mixin hook-utility-misc(){} @@ -565,6 +490,5 @@ $inverse-logo-hover-color: $inverse-global-color !default; // @mixin hook-inverse-dropcap(){} -// @mixin hook-inverse-leader(){} // @mixin hook-inverse-logo(){} // @mixin hook-inverse-logo-hover(){} diff --git a/_sass/uikit/components/variables.scss b/_sass/uikit/components/variables.scss index e8f0297f..a08406a0 100644 --- a/_sass/uikit/components/variables.scss +++ b/_sass/uikit/components/variables.scss @@ -50,7 +50,7 @@ $global-color: #666 !default; $global-emphasis-color: #333 !default; $global-muted-color: #999 !default; -$global-link-color: #0666b1 !default; +$global-link-color: #1e87f0 !default; $global-link-hover-color: #0f6ecd !default; $global-inverse-color: #fff !default; @@ -114,4 +114,4 @@ $global-control-large-height: 55px !default; // Z-index // -$global-z-index: 1000 !default; +$global-z-index: 1000 !default; \ No newline at end of file diff --git a/_sass/uikit/components/visibility.scss b/_sass/uikit/components/visibility.scss index ee800a15..d1c2266f 100644 --- a/_sass/uikit/components/visibility.scss +++ b/_sass/uikit/components/visibility.scss @@ -97,7 +97,7 @@ /* * Hidden - * Can't use `display: hidden` because it's not focusable. This is accessible through keyboard. + * Can't use `display: none` because it's not accessible through keyboard. */ .uk-visible-toggle:not(:hover):not(.uk-hover) .uk-hidden-hover:not(:focus) { @@ -111,7 +111,7 @@ /* * Invisible - * Can't use `visibility: hidden` because it's not focusable. This is accessible through keyboard. + * Can't use `visibility: hidden` because it's not accessible through keyboard. */ .uk-visible-toggle:not(:hover):not(.uk-hover) .uk-invisible-hover:not(:focus) { opacity: 0 !important; } diff --git a/_sass/uikit/components/width.scss b/_sass/uikit/components/width.scss index 7f4a2cb5..e7ee13b7 100644 --- a/_sass/uikit/components/width.scss +++ b/_sass/uikit/components/width.scss @@ -4,7 +4,6 @@ // Component: `uk-child-width-*` // `uk-width-*` // -// // ======================================================================== @@ -40,27 +39,16 @@ $width-xxlarge-width: 750px !default; .uk-child-width-auto > * { width: auto; } /* - * Instead of 0, 1px is needed to make cell wrap into next row if predecessor is 100% wide - * and the grid gutter is 0 pixels wide - */ - -.uk-child-width-expand > * { width: 1px; } - -/* - * 1. Make `width: 1px` work, because according to the spec flex items won’t shrink - * below their minimum content size. To change this, set the min-width. - * Only needed for Firefox. All other browsers ignore this. - * - * 2. `width` is ignored when wrapping flex items in Safari - * https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items + * 1. Reset the `min-width`, which is set to auto by default, because + * flex items won't shrink below their minimum intrinsic content size. + * Using `1px` instead of `0`, so items still wrap into the next line, + * if they have zero width and padding and the predecessor is 100% wide. */ .uk-child-width-expand > :not([class*='uk-width']) { flex: 1; /* 1 */ - min-width: 0; - /* 2 */ - flex-basis: 1px; + min-width: 1px; } /* Phone landscape and bigger */ @@ -74,12 +62,9 @@ $width-xxlarge-width: 750px !default; .uk-child-width-1-6\@s > * { width: unquote('calc(100% * 1 / 6.001)'); } .uk-child-width-auto\@s > * { width: auto; } - .uk-child-width-expand\@s > * { width: 1px; } - .uk-child-width-expand\@s > :not([class*='uk-width']) { flex: 1; - min-width: 0; - flex-basis: 1px; + min-width: 1px; } } @@ -95,12 +80,9 @@ $width-xxlarge-width: 750px !default; .uk-child-width-1-6\@m > * { width: unquote('calc(100% * 1 / 6.001)'); } .uk-child-width-auto\@m > * { width: auto; } - .uk-child-width-expand\@m > * { width: 1px; } - .uk-child-width-expand\@m > :not([class*='uk-width']) { flex: 1; - min-width: 0; - flex-basis: 1px; + min-width: 1px; } } @@ -116,12 +98,9 @@ $width-xxlarge-width: 750px !default; .uk-child-width-1-6\@l > * { width: unquote('calc(100% * 1 / 6.001)'); } .uk-child-width-auto\@l > * { width: auto; } - .uk-child-width-expand\@l > * { width: 1px; } - .uk-child-width-expand\@l > :not([class*='uk-width']) { flex: 1; - min-width: 0; - flex-basis: 1px; + min-width: 1px; } } @@ -137,12 +116,9 @@ $width-xxlarge-width: 750px !default; .uk-child-width-1-6\@xl > * { width: unquote('calc(100% * 1 / 6.001)'); } .uk-child-width-auto\@xl > * { width: auto; } - .uk-child-width-expand\@xl > * { width: 1px; } - .uk-child-width-expand\@xl > :not([class*='uk-width']) { flex: 1; - min-width: 0; - flex-basis: 1px; + min-width: 1px; } } @@ -195,10 +171,8 @@ $width-xxlarge-width: 750px !default; /* Expand */ .uk-width-expand { - width: 1px; flex: 1; - min-width: 0; - flex-basis: 1px; + min-width: 1px; } /* Phone landscape and bigger */ @@ -240,10 +214,8 @@ $width-xxlarge-width: 750px !default; /* Expand */ .uk-width-expand\@s { - width: 1px; flex: 1; - min-width: 0; - flex-basis: 1px; + min-width: 1px; } } @@ -287,10 +259,8 @@ $width-xxlarge-width: 750px !default; /* Expand */ .uk-width-expand\@m { - width: 1px; flex: 1; - min-width: 0; - flex-basis: 1px; + min-width: 1px; } } @@ -334,10 +304,8 @@ $width-xxlarge-width: 750px !default; /* Expand */ .uk-width-expand\@l { - width: 1px; flex: 1; - min-width: 0; - flex-basis: 1px; + min-width: 1px; } } @@ -381,10 +349,8 @@ $width-xxlarge-width: 750px !default; /* Expand */ .uk-width-expand\@xl { - width: 1px; flex: 1; - min-width: 0; - flex-basis: 1px; + min-width: 1px; } } diff --git a/_sass/uikit/mixins-theme.scss b/_sass/uikit/mixins-theme.scss index 376bbea6..24516bfb 100644 --- a/_sass/uikit/mixins-theme.scss +++ b/_sass/uikit/mixins-theme.scss @@ -4,17 +4,18 @@ overflow: hidden; - &::after { + &::before { content: ""; width: ($accordion-title-line-height * 1em); height: ($accordion-title-line-height * 1em); + margin-left: $accordion-icon-margin-left; float: right; @include svg-fill($internal-accordion-close-image, "#000", $accordion-icon-color); background-repeat: no-repeat; background-position: 50% 50%; } - .uk-open > &::after { @include svg-fill($internal-accordion-open-image, "#000", $accordion-icon-color); } + .uk-open > &::before { @include svg-fill($internal-accordion-open-image, "#000", $accordion-icon-color); } } @mixin hook-accordion-title-hover(){} @@ -25,12 +26,11 @@ @mixin hook-inverse-accordion-title-hover(){} @mixin hook-inverse-component-accordion(){ - .uk-accordion-title::after { @include svg-fill($internal-accordion-close-image, "#000", $inverse-global-color); } + .uk-accordion-title::before { @include svg-fill($internal-accordion-close-image, "#000", $inverse-global-color); } - .uk-open > .uk-accordion-title::after { @include svg-fill($internal-accordion-open-image, "#000", $inverse-global-color); } + .uk-open > .uk-accordion-title::before { @include svg-fill($internal-accordion-open-image, "#000", $inverse-global-color); } } -@mixin hook-align-misc(){} @mixin hook-alert(){} @mixin hook-alert-close(){ color: inherit; @@ -68,6 +68,8 @@ } } +@mixin hook-align-misc(){} +@mixin hook-animation-misc(){} @mixin hook-article(){} @mixin hook-article-adjacent(){} @mixin hook-article-title(){} @@ -96,7 +98,6 @@ } } -@mixin hook-animation-misc(){} @mixin hook-background-misc(){} @mixin hook-badge(){} @mixin hook-badge-hover(){} @@ -203,7 +204,7 @@ // Emphasize // - em { color: $global-secondary-background } + em { color: $inverse-base-em-color; } // // Headings @@ -539,8 +540,14 @@ * Default */ - .uk-card-body .uk-nav-default { margin: (-$card-body-padding-vertical + 15px) (-$card-body-padding-horizontal); } - .uk-card-title + .uk-nav-default { margin-top: 0; } + .uk-card-body > .uk-nav-default { + margin-left: (-$card-body-padding-horizontal); + margin-right: (-$card-body-padding-horizontal); + } + .uk-card-body > .uk-nav-default:only-child { + margin-top: (-$card-body-padding-vertical + 15px); + margin-bottom: (-$card-body-padding-vertical + 15px); + } .uk-card-body .uk-nav-default > li > a, .uk-card-body .uk-nav-default .uk-nav-header, @@ -555,8 +562,14 @@ /* Desktop and bigger */ @media (min-width: $breakpoint-large) { - .uk-card-body .uk-nav-default { margin: (-$card-body-padding-vertical-l + 15px) (-$card-body-padding-horizontal-l); } - .uk-card-title + .uk-nav-default { margin-top: 0; } + .uk-card-body > .uk-nav-default { + margin-left: (-$card-body-padding-horizontal-l); + margin-right: (-$card-body-padding-horizontal-l); + } + .uk-card-body > .uk-nav-default:only-child { + margin-top: (-$card-body-padding-vertical-l + 15px); + margin-bottom: (-$card-body-padding-vertical-l + 15px); + } .uk-card-body .uk-nav-default > li > a, .uk-card-body .uk-nav-default .uk-nav-header, @@ -573,8 +586,14 @@ * Small */ - .uk-card-small .uk-nav-default { margin: (-$card-small-body-padding-vertical + 15px) (-$card-small-body-padding-horizontal); } - .uk-card-small .uk-card-title + .uk-nav-default { margin-top: 0; } + .uk-card-small > .uk-nav-default { + margin-left: (-$card-small-body-padding-horizontal); + margin-right: (-$card-small-body-padding-horizontal); + } + .uk-card-small > .uk-nav-default:only-child { + margin-top: (-$card-small-body-padding-vertical + 15px); + margin-bottom: (-$card-small-body-padding-vertical + 15px); + } .uk-card-small .uk-nav-default > li > a, .uk-card-small .uk-nav-default .uk-nav-header, @@ -592,8 +611,17 @@ /* Desktop and bigger */ @media (min-width: $breakpoint-large) { - .uk-card-large .uk-nav-default { margin: (-$card-large-body-padding-vertical-l + 15px) (-$card-large-body-padding-horizontal-l); } - .uk-card-large .uk-card-title + .uk-nav-default { margin-top: 0; } + .uk-card-large > .uk-nav-default { margin: 0; } + .uk-card-large > .uk-nav-default:only-child { margin: 0; } + + .uk-card-large .uk-nav-default > li > a, + .uk-card-large .uk-nav-default .uk-nav-header, + .uk-card-large .uk-nav-default .uk-nav-divider { + padding-left: 0; + padding-right: 0; + } + + .uk-card-large .uk-nav-default .uk-nav-sub { padding-left: $nav-sublist-deeper-padding-left; } } @@ -831,10 +859,10 @@ // Placeholder // - .uk-input:-ms-input-placeholder { color: $inverse-form-placeholder-color !important; } + .uk-input::-ms-input-placeholder { color: $inverse-form-placeholder-color !important; } .uk-input::placeholder { color: $inverse-form-placeholder-color; } - .uk-textarea:-ms-input-placeholder { color: $inverse-form-placeholder-color !important; } + .uk-textarea::-ms-input-placeholder { color: $inverse-form-placeholder-color !important; } .uk-textarea::placeholder { color: $inverse-form-placeholder-color; } // @@ -885,6 +913,10 @@ @if(mixin-exists(hook-inverse-form-label)) {@include hook-inverse-form-label();} } + // Icon + .uk-form-icon { color: $inverse-form-icon-color; } + .uk-form-icon:hover { color: $inverse-form-icon-hover-color; } + } @mixin hook-grid-misc(){} @mixin hook-inverse-component-grid(){ @@ -931,12 +963,13 @@ } } +@mixin hook-height-misc(){} @mixin hook-icon-link(){} @mixin hook-icon-link-hover(){} @mixin hook-icon-link-active(){} @mixin hook-icon-button(){ transition: 0.1s ease-in-out; - transition-property: color, background-color + transition-property: color, background-color; } @mixin hook-icon-button-hover(){} @mixin hook-icon-button-active(){} @@ -1112,7 +1145,6 @@ // .uk-search .uk-search-icon { color: $inverse-search-icon-color; } - .uk-search .uk-search-icon:hover { color: $inverse-search-icon-color; } // @@ -1440,10 +1472,6 @@ @if(mixin-exists(hook-inverse-dropcap)) {@include hook-inverse-dropcap();} } - .uk-leader-fill { - @if(mixin-exists(hook-inverse-leader)) {@include hook-inverse-leader();} - } - .uk-logo { color: $inverse-logo-color; @if(mixin-exists(hook-inverse-logo)) {@include hook-inverse-logo();} @@ -1498,6 +1526,16 @@ @mixin hook-label-danger(){} @mixin hook-label-misc(){} @mixin hook-inverse-label(){} +@mixin hook-leader(){} +@mixin hook-leader-misc(){} +@mixin hook-inverse-leader(){} +@mixin hook-inverse-component-leader(){ + + .uk-leader-fill { + @if(mixin-exists(hook-inverse-leader)) {@include hook-inverse-leader();} + } + +} @mixin hook-lightbox(){} @mixin hook-lightbox-item(){} @mixin hook-lightbox-toolbar(){} @@ -1743,6 +1781,8 @@ @mixin hook-section-secondary(){} @mixin hook-section-overlap(){} @mixin hook-section-misc(){} +@mixin hook-slider(){} +@mixin hook-slider-misc(){} @mixin hook-slidenav(){ transition: color 0.1s ease-in-out; } @mixin hook-slidenav-hover(){} @mixin hook-slidenav-active(){} @@ -1754,8 +1794,6 @@ @mixin hook-inverse-slidenav(){} @mixin hook-inverse-slidenav-hover(){} @mixin hook-inverse-slidenav-active(){} -@mixin hook-slider(){} -@mixin hook-slider-misc(){} @mixin hook-slideshow(){} @mixin hook-slideshow-misc(){} @mixin hook-sortable(){} @@ -1791,6 +1829,7 @@ @mixin hook-inverse-subnav-pill-item-onclick(){} @mixin hook-inverse-subnav-pill-item-active(){} @mixin hook-inverse-subnav-item-disabled(){} +@mixin hook-svg-misc(){} @mixin hook-switcher-misc(){} @mixin hook-tab(){ @@ -1878,13 +1917,13 @@ @mixin hook-table-cell(){} @mixin hook-table-footer(){} @mixin hook-table-caption(){} -@mixin hook-table-row-active(){} @mixin hook-table-divider(){} @mixin hook-table-striped(){ border-top: $table-striped-border-width solid $table-striped-border; border-bottom: $table-striped-border-width solid $table-striped-border; } @mixin hook-table-hover(){} +@mixin hook-table-row-active(){} @mixin hook-table-small(){} @mixin hook-table-large(){} @mixin hook-table-misc(){ @@ -2021,13 +2060,11 @@ // Prevent line wrap margin-bottom: -2px; } -@mixin hook-leader(){} @mixin hook-logo(){} @mixin hook-logo-hover(){} @mixin hook-utility-misc(){} @mixin hook-inverse-dropcap(){} -@mixin hook-inverse-leader(){} @mixin hook-inverse-logo(){} @mixin hook-inverse-logo-hover(){} @mixin hook-visibility-misc(){} -@mixin hook-width-misc(){} +@mixin hook-width-misc(){} \ No newline at end of file diff --git a/_sass/uikit/mixins.scss b/_sass/uikit/mixins.scss index 3ec26708..36a16076 100644 --- a/_sass/uikit/mixins.scss +++ b/_sass/uikit/mixins.scss @@ -25,7 +25,6 @@ } } -@mixin hook-align-misc(){} @mixin hook-alert(){} @mixin hook-alert-close(){} @mixin hook-alert-close-hover(){} @@ -34,6 +33,8 @@ @mixin hook-alert-warning(){} @mixin hook-alert-danger(){} @mixin hook-alert-misc(){} +@mixin hook-align-misc(){} +@mixin hook-animation-misc(){} @mixin hook-article(){} @mixin hook-article-adjacent(){} @mixin hook-article-title(){} @@ -53,7 +54,6 @@ } } -@mixin hook-animation-misc(){} @mixin hook-background-misc(){} @mixin hook-badge(){} @mixin hook-badge-hover(){} @@ -142,7 +142,7 @@ // Emphasize // - em { color: $global-secondary-background } + em { color: $inverse-base-em-color; } // // Headings @@ -623,10 +623,10 @@ // Placeholder // - .uk-input:-ms-input-placeholder { color: $inverse-form-placeholder-color !important; } + .uk-input::-ms-input-placeholder { color: $inverse-form-placeholder-color !important; } .uk-input::placeholder { color: $inverse-form-placeholder-color; } - .uk-textarea:-ms-input-placeholder { color: $inverse-form-placeholder-color !important; } + .uk-textarea::-ms-input-placeholder { color: $inverse-form-placeholder-color !important; } .uk-textarea::placeholder { color: $inverse-form-placeholder-color; } // @@ -677,6 +677,10 @@ @if(mixin-exists(hook-inverse-form-label)) {@include hook-inverse-form-label();} } + // Icon + .uk-form-icon { color: $inverse-form-icon-color; } + .uk-form-icon:hover { color: $inverse-form-icon-hover-color; } + } @mixin hook-grid-misc(){} @mixin hook-inverse-component-grid(){ @@ -723,6 +727,7 @@ } } +@mixin hook-height-misc(){} @mixin hook-icon-link(){} @mixin hook-icon-link-hover(){} @mixin hook-icon-link-active(){} @@ -901,7 +906,6 @@ // .uk-search .uk-search-icon { color: $inverse-search-icon-color; } - .uk-search .uk-search-icon:hover { color: $inverse-search-icon-color; } // @@ -1229,10 +1233,6 @@ @if(mixin-exists(hook-inverse-dropcap)) {@include hook-inverse-dropcap();} } - .uk-leader-fill { - @if(mixin-exists(hook-inverse-leader)) {@include hook-inverse-leader();} - } - .uk-logo { color: $inverse-logo-color; @if(mixin-exists(hook-inverse-logo)) {@include hook-inverse-logo();} @@ -1284,6 +1284,16 @@ @mixin hook-label-danger(){} @mixin hook-label-misc(){} @mixin hook-inverse-label(){} +@mixin hook-leader(){} +@mixin hook-leader-misc(){} +@mixin hook-inverse-leader(){} +@mixin hook-inverse-component-leader(){ + + .uk-leader-fill { + @if(mixin-exists(hook-inverse-leader)) {@include hook-inverse-leader();} + } + +} @mixin hook-lightbox(){} @mixin hook-lightbox-item(){} @mixin hook-lightbox-toolbar(){} @@ -1464,6 +1474,8 @@ @mixin hook-section-secondary(){} @mixin hook-section-overlap(){} @mixin hook-section-misc(){} +@mixin hook-slider(){} +@mixin hook-slider-misc(){} @mixin hook-slidenav(){} @mixin hook-slidenav-hover(){} @mixin hook-slidenav-active(){} @@ -1475,8 +1487,6 @@ @mixin hook-inverse-slidenav(){} @mixin hook-inverse-slidenav-hover(){} @mixin hook-inverse-slidenav-active(){} -@mixin hook-slider(){} -@mixin hook-slider-misc(){} @mixin hook-slideshow(){} @mixin hook-slideshow-misc(){} @mixin hook-sortable(){} @@ -1507,6 +1517,7 @@ @mixin hook-inverse-subnav-pill-item-onclick(){} @mixin hook-inverse-subnav-pill-item-active(){} @mixin hook-inverse-subnav-item-disabled(){} +@mixin hook-svg-misc(){} @mixin hook-switcher-misc(){} @mixin hook-tab(){} @mixin hook-tab-item(){} @@ -1530,10 +1541,10 @@ @mixin hook-table-cell(){} @mixin hook-table-footer(){} @mixin hook-table-caption(){} -@mixin hook-table-row-active(){} @mixin hook-table-divider(){} @mixin hook-table-striped(){} @mixin hook-table-hover(){} +@mixin hook-table-row-active(){} @mixin hook-table-small(){} @mixin hook-table-large(){} @mixin hook-table-misc(){} @@ -1632,13 +1643,11 @@ @mixin hook-panel-scrollable(){} @mixin hook-box-shadow-bottom(){} @mixin hook-dropcap(){} -@mixin hook-leader(){} @mixin hook-logo(){} @mixin hook-logo-hover(){} @mixin hook-utility-misc(){} @mixin hook-inverse-dropcap(){} -@mixin hook-inverse-leader(){} @mixin hook-inverse-logo(){} @mixin hook-inverse-logo-hover(){} @mixin hook-visibility-misc(){} -@mixin hook-width-misc(){} +@mixin hook-width-misc(){} \ No newline at end of file diff --git a/_sass/uikit/theme/_import.scss b/_sass/uikit/theme/_import.scss index b08e50b6..01a7ea02 100644 --- a/_sass/uikit/theme/_import.scss +++ b/_sass/uikit/theme/_import.scss @@ -53,6 +53,7 @@ @import "lightbox.scss"; @import "sticky.scss"; @import "offcanvas.scss"; +@import "leader.scss"; // Additional @import "iconnav.scss"; @@ -66,6 +67,7 @@ // Utilities @import "animation.scss"; @import "width.scss"; +@import "height.scss"; @import "text.scss"; @import "column.scss"; @import "background.scss"; diff --git a/_sass/uikit/theme/accordion.scss b/_sass/uikit/theme/accordion.scss index 3e44609f..ae25a64a 100644 --- a/_sass/uikit/theme/accordion.scss +++ b/_sass/uikit/theme/accordion.scss @@ -11,6 +11,7 @@ // New // +$accordion-icon-margin-left: 10px !default; $accordion-icon-color: $global-color !default; $internal-accordion-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%3C%2Fsvg%3E" !default; $internal-accordion-close-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%20%2F%3E%0A%3C%2Fsvg%3E" !default; diff --git a/_sass/uikit/theme/height.scss b/_sass/uikit/theme/height.scss new file mode 100644 index 00000000..37f2c2f8 --- /dev/null +++ b/_sass/uikit/theme/height.scss @@ -0,0 +1,14 @@ +// +// Component: Height +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-height-misc(){} \ No newline at end of file diff --git a/_sass/uikit/theme/leader.scss b/_sass/uikit/theme/leader.scss new file mode 100644 index 00000000..6618325e --- /dev/null +++ b/_sass/uikit/theme/leader.scss @@ -0,0 +1,26 @@ +// +// Component: Leader +// +// ======================================================================== + + +// Variables +// ======================================================================== + + +// Component +// ======================================================================== + +// @mixin hook-leader(){} + + +// Miscellaneous +// ======================================================================== + +// @mixin hook-leader-misc(){} + + +// Inverse +// ======================================================================== + +// @mixin hook-inverse-leader(){} \ No newline at end of file diff --git a/_sass/uikit/theme/utility.scss b/_sass/uikit/theme/utility.scss index ae24e15c..69094998 100644 --- a/_sass/uikit/theme/utility.scss +++ b/_sass/uikit/theme/utility.scss @@ -26,12 +26,6 @@ -// Leader -// ======================================================================== - -// @mixin hook-leader(){} - - // Logo // ======================================================================== @@ -51,7 +45,5 @@ // @mixin hook-inverse-dropcap(){} -// @mixin hook-inverse-leader(){} - // @mixin hook-inverse-logo(){} // @mixin hook-inverse-logo-hover(){} \ No newline at end of file diff --git a/_sass/uikit/variables-theme.scss b/_sass/uikit/variables-theme.scss index 44c2ed93..8b5afee5 100644 --- a/_sass/uikit/variables-theme.scss +++ b/_sass/uikit/variables-theme.scss @@ -13,11 +13,6 @@ $inverse-global-emphasis-color: $global-inverse-color !default; $inverse-accordion-title-color: $inverse-global-emphasis-color !default; $inverse-global-inverse-color: $global-color !default; $inverse-accordion-title-hover-color: $inverse-global-inverse-color !default; -$global-gutter: 30px !default; -$align-margin-horizontal: $global-gutter !default; -$align-margin-vertical: $global-gutter !default; -$global-medium-gutter: 40px !default; -$align-margin-horizontal-l: $global-medium-gutter !default; $alert-margin-vertical: $global-margin !default; $global-small-gutter: 15px !default; $alert-padding: $global-small-gutter !default; @@ -39,10 +34,22 @@ $alert-warning-color: $global-warning-background !default; $global-danger-background: #f0506e !default; $alert-danger-background: lighten(mix(white, $global-danger-background, 40%), 20%) !default; $alert-danger-color: $global-danger-background !default; +$global-gutter: 30px !default; +$align-margin-horizontal: $global-gutter !default; +$align-margin-vertical: $global-gutter !default; +$global-medium-gutter: 40px !default; +$align-margin-horizontal-l: $global-medium-gutter !default; +$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; $global-large-margin: 70px !default; $article-margin-top: $global-large-margin !default; $global-xxlarge-font-size: 2.625rem !default; -$article-title-font-size: $global-xxlarge-font-size !default; +$article-title-font-size-m: $global-xxlarge-font-size !default; +$article-title-font-size: $article-title-font-size-m * 0.85 !default; $article-title-line-height: 1.2 !default; $global-small-font-size: 0.875rem !default; $article-meta-font-size: $global-small-font-size !default; @@ -51,12 +58,6 @@ $global-muted-color: #999 !default; $article-meta-color: $global-muted-color !default; $inverse-global-muted-color: rgba($global-inverse-color, 0.5) !default; $inverse-article-meta-color: $inverse-global-muted-color !default; -$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; $global-background: #fff !default; $background-default-background: $global-background !default; $background-muted-background: $global-muted-background !default; @@ -84,7 +85,7 @@ $base-body-font-size: $global-font-size !default; $global-line-height: 1.5 !default; $base-body-line-height: $global-line-height !default; $base-body-color: $global-color !default; -$global-link-color: #0666b1 !default; +$global-link-color: #1e87f0 !default; $base-link-color: $global-link-color !default; $base-link-text-decoration: none !default; $global-link-hover-color: #0f6ecd !default; @@ -108,10 +109,12 @@ $base-heading-color: $global-emphasis-color !default; $base-heading-text-transform: none !default; $global-medium-margin: 40px !default; $base-heading-margin-top: $global-medium-margin !default; -$base-h1-font-size: $global-xxlarge-font-size !default; +$base-h1-font-size-m: $global-xxlarge-font-size !default; +$base-h1-font-size: $base-h1-font-size-m * 0.85 !default; $base-h1-line-height: 1.2 !default; $global-xlarge-font-size: 2rem !default; -$base-h2-font-size: $global-xlarge-font-size !default; +$base-h2-font-size-m: $global-xlarge-font-size !default; +$base-h2-font-size: $base-h2-font-size-m * 0.85 !default; $base-h2-line-height: 1.3 !default; $global-large-font-size: 1.5rem !default; $base-h3-font-size: $global-large-font-size !default; @@ -297,6 +300,7 @@ $comment-list-margin-top: $global-large-margin !default; $comment-list-padding-left: 30px !default; $comment-list-padding-left-m: 100px !default; $container-max-width: 1200px !default; +$container-xsmall-max-width: 750px !default; $container-small-max-width: 900px !default; $container-large-max-width: 1600px !default; $container-padding-horizontal: 15px !default; @@ -393,6 +397,7 @@ $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-option-color: #444 !default; $form-select-disabled-icon-color: $global-muted-color !default; $form-radio-size: 16px !default; $form-radio-margin-top: -4px !default; @@ -428,6 +433,8 @@ $inverse-form-radio-background: darken($inverse-global-muted-background, 5%) !de $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; +$inverse-form-icon-color: $inverse-global-muted-color !default; +$inverse-form-icon-hover-color: $inverse-global-color !default; $grid-gutter-horizontal: $global-gutter !default; $grid-gutter-vertical: $grid-gutter-horizontal !default; $grid-gutter-horizontal-l: $global-medium-gutter !default; @@ -443,16 +450,17 @@ $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; $inverse-grid-divider-border: $inverse-global-border !default; -$heading-primary-font-size: $global-xxlarge-font-size !default; +$heading-primary-font-size-l: 3.75rem !default; +$heading-primary-line-height-l: 1.1 !default; +$heading-primary-font-size-m: $heading-primary-font-size-l * 0.9 !default; +$heading-primary-font-size: $heading-primary-font-size-l * 0.8 !default; $heading-primary-line-height: 1.2 !default; -$heading-primary-font-size-m: 3.75rem !default; -$heading-primary-line-height-m: 1.1 !default; -$heading-hero-font-size: 4rem !default; -$heading-hero-line-height: 1.1 !default; -$heading-hero-font-size-s: 6rem !default; -$heading-hero-line-height-s: 1 !default; -$heading-hero-font-size-m: 8rem !default; +$heading-hero-font-size-l: 8rem !default; +$heading-hero-line-height-l: 1 !default; +$heading-hero-font-size-m: $heading-hero-font-size-l * 0.75 !default; $heading-hero-line-height-m: 1 !default; +$heading-hero-font-size: $heading-hero-font-size-l * 0.5 !default; +$heading-hero-line-height: 1.1 !default; $heading-divider-padding-bottom: 10px !default; $heading-divider-border-width: $global-border-width !default; $heading-divider-border: $global-border !default; @@ -470,6 +478,9 @@ $heading-line-margin-horizontal: 0.6em !default; $inverse-heading-divider-border: $inverse-global-border !default; $inverse-heading-bullet-border: $inverse-global-border !default; $inverse-heading-line-border: $inverse-global-border !default; +$height-small-height: 150px !default; +$height-medium-height: 300px !default; +$height-large-height: 450px !default; $icon-image-size: 20px !default; $icon-link-color: $global-muted-color !default; $icon-link-hover-color: $global-color !default; @@ -514,6 +525,8 @@ $label-danger-background: $global-danger-background !default; $label-danger-color: $global-inverse-color !default; $inverse-label-background: $inverse-global-primary-background !default; $inverse-label-color: $inverse-global-inverse-color !default; +$leader-fill-content: unquote('.') !default; +$leader-fill-margin-left: $global-small-gutter !default; $lightbox-z-index: $global-z-index + 10 !default; $lightbox-background: #000 !default; $lightbox-item-color: rgba(255,255,255,0.7) !default; @@ -949,9 +962,6 @@ $panel-scrollable-height: 170px !default; $panel-scrollable-padding: 10px !default; $panel-scrollable-border-width: $global-border-width !default; $panel-scrollable-border: $global-border !default; -$height-small-height: 150px !default; -$height-medium-height: 300px !default; -$height-large-height: 450px !default; $border-rounded-border-radius: 5px !default; $box-shadow-duration: 0.1s !default; $box-shadow-bottom-height: 30px !default; @@ -960,8 +970,6 @@ $box-shadow-bottom-background: #444 !default; $box-shadow-bottom-blur: 20px !default; $dropcap-margin-right: 10px !default; $dropcap-font-size: (($global-line-height * 3) * 1em) !default; -$leader-fill-content: '.' !default; -$leader-fill-margin-left: $global-small-gutter !default; $logo-font-size: $global-large-font-size !default; $logo-font-family: $global-font-family !default; $logo-color: $global-color !default; @@ -986,6 +994,7 @@ $width-medium-width: 300px !default; $width-large-width: 450px !default; $width-xlarge-width: 600px !default; $width-xxlarge-width: 750px !default; +$accordion-icon-margin-left: 10px !default; $accordion-icon-color: $global-color !default; $internal-accordion-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%3C%2Fsvg%3E" !default; $internal-accordion-close-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%20%2F%3E%0A%3C%2Fsvg%3E" !default; @@ -1090,4 +1099,4 @@ $text-meta-link-color: $text-meta-color !default; $text-meta-link-hover-color: $global-color !default; $thumbnav-item-background: rgba($global-background, 0.4) !default; $thumbnav-item-hover-background: transparent !default; -$thumbnav-item-active-background: transparent !default; +$thumbnav-item-active-background: transparent !default; \ No newline at end of file diff --git a/_sass/uikit/variables.scss b/_sass/uikit/variables.scss index 1c938dfe..cf61578d 100644 --- a/_sass/uikit/variables.scss +++ b/_sass/uikit/variables.scss @@ -13,11 +13,6 @@ $inverse-global-emphasis-color: $global-inverse-color !default; $inverse-accordion-title-color: $inverse-global-emphasis-color !default; $inverse-global-inverse-color: $global-color !default; $inverse-accordion-title-hover-color: $inverse-global-inverse-color !default; -$global-gutter: 30px !default; -$align-margin-horizontal: $global-gutter !default; -$align-margin-vertical: $global-gutter !default; -$global-medium-gutter: 40px !default; -$align-margin-horizontal-l: $global-medium-gutter !default; $alert-margin-vertical: $global-margin !default; $global-small-gutter: 15px !default; $alert-padding: $global-small-gutter !default; @@ -39,10 +34,22 @@ $alert-warning-color: $global-warning-background !default; $global-danger-background: #f0506e !default; $alert-danger-background: lighten(mix(white, $global-danger-background, 40%), 20%) !default; $alert-danger-color: $global-danger-background !default; +$global-gutter: 30px !default; +$align-margin-horizontal: $global-gutter !default; +$align-margin-vertical: $global-gutter !default; +$global-medium-gutter: 40px !default; +$align-margin-horizontal-l: $global-medium-gutter !default; +$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; $global-large-margin: 70px !default; $article-margin-top: $global-large-margin !default; $global-xxlarge-font-size: 2.625rem !default; -$article-title-font-size: $global-xxlarge-font-size !default; +$article-title-font-size-m: $global-xxlarge-font-size !default; +$article-title-font-size: $article-title-font-size-m * 0.85 !default; $article-title-line-height: 1.2 !default; $global-small-font-size: 0.875rem !default; $article-meta-font-size: $global-small-font-size !default; @@ -51,12 +58,6 @@ $global-muted-color: #999 !default; $article-meta-color: $global-muted-color !default; $inverse-global-muted-color: rgba($global-inverse-color, 0.5) !default; $inverse-article-meta-color: $inverse-global-muted-color !default; -$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; $global-background: #fff !default; $background-default-background: $global-background !default; $background-muted-background: $global-muted-background !default; @@ -108,10 +109,12 @@ $base-heading-color: $global-emphasis-color !default; $base-heading-text-transform: none !default; $global-medium-margin: 40px !default; $base-heading-margin-top: $global-medium-margin !default; -$base-h1-font-size: $global-xxlarge-font-size !default; +$base-h1-font-size-m: $global-xxlarge-font-size !default; +$base-h1-font-size: $base-h1-font-size-m * 0.85 !default; $base-h1-line-height: 1.2 !default; $global-xlarge-font-size: 2rem !default; -$base-h2-font-size: $global-xlarge-font-size !default; +$base-h2-font-size-m: $global-xlarge-font-size !default; +$base-h2-font-size: $base-h2-font-size-m * 0.85 !default; $base-h2-line-height: 1.3 !default; $global-large-font-size: 1.5rem !default; $base-h3-font-size: $global-large-font-size !default; @@ -296,6 +299,7 @@ $comment-list-margin-top: $global-large-margin !default; $comment-list-padding-left: 30px !default; $comment-list-padding-left-m: 100px !default; $container-max-width: 1200px !default; +$container-xsmall-max-width: 750px !default; $container-small-max-width: 900px !default; $container-large-max-width: 1600px !default; $container-padding-horizontal: 15px !default; @@ -391,6 +395,7 @@ $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-option-color: #444 !default; $form-select-disabled-icon-color: $global-muted-color !default; $form-radio-size: 16px !default; $form-radio-margin-top: -4px !default; @@ -426,6 +431,8 @@ $inverse-form-radio-background: darken($inverse-global-muted-background, 5%) !de $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; +$inverse-form-icon-color: $inverse-global-muted-color !default; +$inverse-form-icon-hover-color: $inverse-global-color !default; $grid-gutter-horizontal: $global-gutter !default; $grid-gutter-vertical: $grid-gutter-horizontal !default; $grid-gutter-horizontal-l: $global-medium-gutter !default; @@ -441,16 +448,17 @@ $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; $inverse-grid-divider-border: $inverse-global-border !default; -$heading-primary-font-size: $global-xxlarge-font-size !default; +$heading-primary-font-size-l: 3.75rem !default; +$heading-primary-line-height-l: 1.1 !default; +$heading-primary-font-size-m: $heading-primary-font-size-l * 0.9 !default; +$heading-primary-font-size: $heading-primary-font-size-l * 0.8 !default; $heading-primary-line-height: 1.2 !default; -$heading-primary-font-size-m: 3.75rem !default; -$heading-primary-line-height-m: 1.1 !default; -$heading-hero-font-size: 4rem !default; -$heading-hero-line-height: 1.1 !default; -$heading-hero-font-size-s: 6rem !default; -$heading-hero-line-height-s: 1 !default; -$heading-hero-font-size-m: 8rem !default; +$heading-hero-font-size-l: 8rem !default; +$heading-hero-line-height-l: 1 !default; +$heading-hero-font-size-m: $heading-hero-font-size-l * 0.75 !default; $heading-hero-line-height-m: 1 !default; +$heading-hero-font-size: $heading-hero-font-size-l * 0.5 !default; +$heading-hero-line-height: 1.1 !default; $heading-divider-padding-bottom: 10px !default; $heading-divider-border-width: $global-border-width !default; $heading-divider-border: $global-border !default; @@ -468,6 +476,9 @@ $heading-line-margin-horizontal: 0.6em !default; $inverse-heading-divider-border: $inverse-global-border !default; $inverse-heading-bullet-border: $inverse-global-border !default; $inverse-heading-line-border: $inverse-global-border !default; +$height-small-height: 150px !default; +$height-medium-height: 300px !default; +$height-large-height: 450px !default; $icon-image-size: 20px !default; $icon-link-color: $global-muted-color !default; $icon-link-hover-color: $global-color !default; @@ -512,6 +523,8 @@ $label-danger-background: $global-danger-background !default; $label-danger-color: $global-inverse-color !default; $inverse-label-background: $inverse-global-primary-background !default; $inverse-label-color: $inverse-global-inverse-color !default; +$leader-fill-content: unquote('.') !default; +$leader-fill-margin-left: $global-small-gutter !default; $lightbox-z-index: $global-z-index + 10 !default; $lightbox-background: #000 !default; $lightbox-item-color: rgba(255,255,255,0.7) !default; @@ -947,9 +960,6 @@ $panel-scrollable-height: 170px !default; $panel-scrollable-padding: 10px !default; $panel-scrollable-border-width: $global-border-width !default; $panel-scrollable-border: $global-border !default; -$height-small-height: 150px !default; -$height-medium-height: 300px !default; -$height-large-height: 450px !default; $border-rounded-border-radius: 5px !default; $box-shadow-duration: 0.1s !default; $box-shadow-bottom-height: 30px !default; @@ -958,8 +968,6 @@ $box-shadow-bottom-background: #444 !default; $box-shadow-bottom-blur: 20px !default; $dropcap-margin-right: 10px !default; $dropcap-font-size: (($global-line-height * 3) * 1em) !default; -$leader-fill-content: '.' !default; -$leader-fill-margin-left: $global-small-gutter !default; $logo-font-size: $global-large-font-size !default; $logo-font-family: $global-font-family !default; $logo-color: $global-color !default; diff --git a/_site/2017/05/25/post63.html b/_site/2017/05/25/post63.html index beef1fd2..e56b1ffe 100644 --- a/_site/2017/05/25/post63.html +++ b/_site/2017/05/25/post63.html @@ -13,33 +13,24 @@ - - + + +{"datePublished":"2017-05-25T00:00:00-07:00","url":"http://localhost:4000/2017/05/25/post63.html","dateModified":"2017-05-25T00:00:00-07:00","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/2017/05/25/post63.html"},"author":{"@type":"Person","name":"John Black"},"description":"Site tags","@type":"BlogPosting","headline":"Site tags","@context":"http://schema.org"} - + - - - - - + + @@ -52,7 +43,7 @@
- +
- + Alt for image
@@ -179,7 +170,7 @@

Etiam in fermentum mi. Sed et tempor felis, eu aliquet nisi. Nam eget ullamcorper arcu. Nunc porttitor nisl a dolor blandit, eget consequat sem maximus. Phasellus lacinia quam porta orci malesuada, vel tincidunt.