mirror of https://github.com/lukechilds/docs.git
Thomas Osmonson
5 years ago
836 changed files with 13156 additions and 49800 deletions
@ -0,0 +1,18 @@ |
|||
module.exports = { |
|||
extends: ['@blockstack/eslint-config'], |
|||
parser: '@typescript-eslint/parser', |
|||
parserOptions: { |
|||
project: './tsconfig.json', |
|||
}, |
|||
env: { |
|||
browser: true, |
|||
node: true, |
|||
es6: true, |
|||
}, |
|||
globals: { |
|||
page: true, |
|||
browser: true, |
|||
context: true, |
|||
jestPuppeteer: true, |
|||
}, |
|||
}; |
|||
@ -0,0 +1 @@ |
|||
module.exports = require('@blockstack/prettier-config'); |
|||
@ -0,0 +1,7 @@ |
|||
.next |
|||
.vercel |
|||
.mdx-data |
|||
.idea |
|||
node_modules |
|||
build |
|||
README.md |
|||
@ -1,7 +0,0 @@ |
|||
--- |
|||
layout: page |
|||
title: Feeling Lost |
|||
permalink: /404.html |
|||
--- |
|||
|
|||
## The page you are looking for cannot be found. |
|||
@ -1,3 +0,0 @@ |
|||
FROM starefossen/github-pages:198 |
|||
|
|||
ADD . /usr/src/app |
|||
@ -1,43 +0,0 @@ |
|||
source "https://rubygems.org" |
|||
|
|||
# Update me once in a while: https://github.com/github/pages-gem/releases |
|||
# Please ensure, before upgrading, that this version exists as a tag in starefossen/github-pages here: |
|||
# https://hub.docker.com/r/starefossen/github-pages/tags/ |
|||
# |
|||
# Fresh install? |
|||
# |
|||
# Windows: |
|||
# Install Ruby 2.3.3 x64 and download the Development Kit for 64-bit: |
|||
# https://rubyinstaller.org/downloads/ |
|||
# |
|||
# Run this to install devkit after extracting: |
|||
# ruby <path_to_devkit>/dk.rb init |
|||
# ruby <path_to_devkit>/dk.rb install |
|||
# |
|||
# then: |
|||
# gem install bundler |
|||
# bundle install |
|||
# |
|||
# Mac/Linux: |
|||
# Install Ruby 2.3.x and then: |
|||
# gem install bundler |
|||
# bundle install |
|||
# |
|||
# --------------------- |
|||
# Upgrading? Probably best to reset your environment: |
|||
# |
|||
# Remove all gems: |
|||
# gem uninstall -aIx |
|||
# |
|||
# (If Windows, do the dk.rb bits above, then go to the next step below) |
|||
|
|||
# Install anew: |
|||
# gem install bundler |
|||
# bundle install |
|||
|
|||
# This only affects interactive builds (local build, Netlify) and not the |
|||
# live site deploy, which uses the Dockerfiles found in the publish-tools |
|||
# branch. |
|||
|
|||
gem "github-pages", "198" |
|||
gem 'wdm' if Gem.win_platform? |
|||
@ -1,150 +0,0 @@ |
|||
# Welcome to Jekyll! |
|||
# |
|||
# This config file is meant for settings that affect your whole blog. |
|||
# For technical reasons, this file is *NOT* reloaded automatically when you use |
|||
# 'bundle exec jekyll serve'. If you change this file, please restart the server process. |
|||
|
|||
# Site title and description |
|||
title: Blockstack |
|||
description: Docs |
|||
incremental: true |
|||
livereload: true |
|||
|
|||
# Site subpath, e.g. /blog |
|||
baseurl: "" |
|||
|
|||
# Permalink URLs structure, for permalink style options see: https://jekyllrb.com/docs/permalinks/ |
|||
# permalink: /:title/ |
|||
|
|||
# Site base hostname & protocol, e.g. http://example.com |
|||
url: "https://docs.blockstack.org" |
|||
|
|||
repository: blockstack/docs.blockstack |
|||
staticman: |
|||
branch: "master" |
|||
|
|||
github_editme_path: blockstack/docs.blockstack/edit/master |
|||
branch_url: master |
|||
# if you're using Github, provide the basepath to the branch you've created for reviews, following the sample here. if not, leave this value blank. |
|||
|
|||
|
|||
# Site logo, image or text |
|||
brand: |
|||
image: logo.png # e.g. logo.png, upload logo image file to /assets/img/ folder |
|||
text: Docs # if the above "logo:" image variable is not set, this text logo is displayed instead |
|||
|
|||
# Default author settings |
|||
author: |
|||
name: Blockstack |
|||
github: Blockstack # Github username for avatar |
|||
|
|||
# Author settings, displayed on post and doc pages if front matter references author name e.g. author: peter |
|||
authors: |
|||
peter: |
|||
name: Peter Brown |
|||
github: PressApps # Github username for avatar |
|||
|
|||
# Social icons displayed in footer |
|||
social: |
|||
email: |
|||
website: |
|||
facebook: https://www.facebook.com/ |
|||
flickr: |
|||
dribbble: |
|||
github: |
|||
googleplus: |
|||
instagram: https://www.instagram.com/ |
|||
linkedin: |
|||
pinterest: |
|||
twitter: https://twitter.com/ |
|||
vimeo: https://vimeo.com/ |
|||
youtube: |
|||
|
|||
# Twitter share button |
|||
twitter: |
|||
username: blockstack |
|||
image: /assets/img/twitter.png |
|||
card: summary |
|||
|
|||
|
|||
# Default footer image settings |
|||
footer: |
|||
copyright: "Blockstack Public Benefit Corp." |
|||
|
|||
# Disqus comments shortname, requires Disqus account https://disqus.com/ |
|||
# disqus: |
|||
# shortname: # 1234 |
|||
|
|||
# Google analytics code, get your code here https://www.google.com/analytics/ |
|||
google_analytics: UA-125894815-1 |
|||
|
|||
# Google maps API key, get your key here: https://developers.google.com/maps/documentation/javascript/get-api-key |
|||
google_maps_api_key: |
|||
|
|||
google: |
|||
tag_manager: |
|||
container_id: GTM-TPGGRT5 |
|||
|
|||
# Number of posts displayed on blog page |
|||
# paginate: 10 |
|||
|
|||
# Blog path |
|||
# paginate_path: "/news/:num/" |
|||
|
|||
# Path to content assets directory i.e post images, pdfs etc |
|||
post_assets: /assets/img/ |
|||
#keep_files: (`/images/`) |
|||
|
|||
|
|||
# Build settings |
|||
highlighter: rouge |
|||
markdown: kramdown |
|||
kramdown: |
|||
input: GFM |
|||
auto_ids: true |
|||
syntax_highlighter: rouge |
|||
toc: |
|||
min_level: 2 # default: 1 |
|||
max_level: 3 # default: 6 |
|||
# list_class: "uk-nav uk-nav-default" |
|||
# sublist_class: "uk-nav-sub doc-nav" |
|||
|
|||
plugins: |
|||
- jekyll-feed |
|||
- jekyll-seo-tag |
|||
- jekyll-gist |
|||
- jekyll-avatar |
|||
- jekyll-titles-from-headings |
|||
- jekyll-sitemap |
|||
- jekyll-redirect-from |
|||
|
|||
|
|||
titles_from_headings: |
|||
enabled: true |
|||
strip_title: true |
|||
collections: true |
|||
|
|||
include: |
|||
- _redirects |
|||
- _data |
|||
exclude: |
|||
- '*/glossary.md' |
|||
- '*/README.md' |
|||
- README.md |
|||
- Gemfile |
|||
- Gemfile.lock |
|||
- collections.json |
|||
- get-content.sh |
|||
|
|||
sass: |
|||
style: compressed |
|||
|
|||
defaults: |
|||
- scope: |
|||
path: "" |
|||
type: "pages" |
|||
values: |
|||
comments: true |
|||
image: /assets/img/touch-icon.png |
|||
description: "Blockstack Network docs for investors, users, and developers." |
|||
layout: docs |
|||
@ -1,2 +0,0 @@ |
|||
# Redirect default Netlify subdomain to primary domain |
|||
https://docsproduction.netlify.com/* https://docs.blockstack.org/:splat 301! |
|||
@ -1,289 +0,0 @@ |
|||
/** |
|||
* 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 |
|||
} |
|||
@ -1,13 +0,0 @@ |
|||
## 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 |
|||
@ -1,15 +0,0 @@ |
|||
# 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)). |
|||
@ -1,68 +0,0 @@ |
|||
# 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. |
|||
@ -1,57 +0,0 @@ |
|||
/*! 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"); |
|||
} |
|||
@ -1,189 +0,0 @@ |
|||
<!doctype html> |
|||
<title>System Font CSS</title> |
|||
<meta charset="utf-8"> |
|||
<meta http-equiv="x-ua-compatible" content="ie=edge"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|||
<link href="system-font.css" rel="stylesheet"> |
|||
<style> |
|||
@font-face { |
|||
font-family: monospace; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
src: local("Menlo-Regular"), local("Monaco"), local("Consolas"), local("DejaVu Sans Mono"), local("DejaVu Sans Mono"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: monospace; |
|||
font-style: italic; |
|||
font-weight: 400; |
|||
src: local("Menlo-Regular"), local("Monaco"), local("Consolas-Italic"), local("DejaVu Sans Mono Oblique"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: monospace; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
src: local("Menlo-Regular"), local("Monaco"), local("Consolas-Bold"), local("DejaVu Sans Mono Bold"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: monospace; |
|||
font-style: italic; |
|||
font-weight: 700; |
|||
src: local("Menlo-Regular"), local("Monaco"), local("Consolas-BoldItalic"), local("DejaVu Sans Mono Bold Oblique"); |
|||
} |
|||
|
|||
body { |
|||
font: 1em/1.6 system-ui, Tahoma, sans-serif; |
|||
margin: 3em auto; |
|||
max-width: 40em; |
|||
} |
|||
|
|||
@media (max-width: 42em) { |
|||
body { |
|||
margin: 3em 1em; |
|||
} |
|||
} |
|||
|
|||
h1, |
|||
h2 { |
|||
border-bottom: 1px solid #eee; |
|||
padding-bottom: .3em; |
|||
} |
|||
|
|||
h1 { |
|||
margin: 1em 0 1rem; |
|||
font-size: 2.25em; |
|||
} |
|||
|
|||
h2 { |
|||
font-size: 1.75em; |
|||
line-height: 1.225; |
|||
margin: 1em 0 1rem; |
|||
} |
|||
|
|||
code, |
|||
pre { |
|||
border-radius: 3px; |
|||
font-family: "monospace", monospace; |
|||
font-size: 85%; |
|||
} |
|||
|
|||
p, |
|||
pre { |
|||
margin: 0 0 1em; |
|||
} |
|||
|
|||
code { |
|||
background-color: rgba(0,0,0,.04); |
|||
padding: .2em; |
|||
} |
|||
|
|||
pre { |
|||
background-color: #f7f7f7; |
|||
line-height: 1.45; |
|||
padding: 1em; |
|||
-moz-tab-size: 4; |
|||
tab-size: 4; |
|||
} |
|||
|
|||
a { |
|||
color: #4078c0; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
a:focus, |
|||
a:hover { |
|||
text-decoration: underline; |
|||
} |
|||
|
|||
.token-selector { |
|||
color: #0A0; |
|||
} |
|||
|
|||
.token-property-name { |
|||
color: #44B; |
|||
} |
|||
|
|||
.token-property-value { |
|||
color: #B50; |
|||
} |
|||
</style> |
|||
|
|||
<h1> |
|||
System Font CSS |
|||
</h1> |
|||
|
|||
<p> |
|||
System Font CSS is set of <code>@font-face</code> rules that let you use the native system font of the OS running the browser. |
|||
</p> |
|||
|
|||
<pre> |
|||
<span class="token-selector">body</span> { |
|||
<span class="token-property-name">font-family</span>: <span class="token-property-value">system</span>; |
|||
} |
|||
</pre> |
|||
|
|||
<p> |
|||
<a href="https://github.com/jonathantneal/system-font-css">system-font.css</a> offers eight variations of the <code>system</code> font family; <strong>light</strong> (300) <strong>light italic</strong>, <strong>normal</strong> (400), <strong>normal italic</strong>, <strong>medium</strong> (500), <strong>medium italic</strong>, <strong>bold</strong> (700), and <strong>bold italic</strong>. |
|||
</p> |
|||
|
|||
<pre> |
|||
<span class="token-selector">blockquote</span> { |
|||
<span class="token-property-name">font</span>: <span class="token-property-value">italic 300 system</span>; |
|||
} |
|||
|
|||
<span class="token-selector">p</span> { |
|||
<span class="token-property-name">font</span>: <span class="token-property-value">400 system</span>; |
|||
} |
|||
</pre> |
|||
|
|||
<h2> |
|||
OSX |
|||
</h2> |
|||
|
|||
<p> |
|||
<strong>OSX</strong> has used three system typefaces. Since <strong>El Capitan</strong> it has used <strong>San Fransisco</strong>. In <strong>Yosemite</strong> it used <strong>Helvetica Neue</strong>. From <strong>Mavericks</strong> back to <strong>Kodiak</strong> it used <strong>Lucida Grande</strong>. |
|||
</p> |
|||
|
|||
<h2> |
|||
Windows |
|||
</h2> |
|||
|
|||
<p> |
|||
<strong>Windows</strong> has used four system typefaces. Since <strong>Vista</strong> it has used <strong>Segoe UI</strong>. In XP, it used <strong>Tahoma</strong>, which oddly enough lacks an italic variation. From <strong>Windows ME</strong> back to <strong>Windows 3.1</strong> it used <strong>Microsoft Sans Serif</strong>. Finally, from <strong>Windows 2.0</strong> back to <strong>Windows 1.0</strong> it used <strong>Fixedsys</strong>. Neither <strong>Microsoft Sans Serif</strong> or <strong>Fixedsys</strong> are included in this set, with apologies. |
|||
</p> |
|||
|
|||
<p> |
|||
Also, for those of opposed to joy, remember that <strong>Internet Explorer 8</strong> does not support local <code>@font-face</code> rules. Therefore, should you need to reference system fonts in that browser then you will need to do so from the <code>font</code> declaration. |
|||
</p> |
|||
|
|||
<pre> |
|||
<span class="token-selector">body</span> { |
|||
<span class="token-property-name">font-family</span>: <span class="token-property-value">system, "Segoe UI", Tahoma</span>; |
|||
} |
|||
</pre> |
|||
|
|||
<h2> |
|||
Android |
|||
</h2> |
|||
|
|||
<p> |
|||
<strong>Android</strong> has used two system typefaces. Since <strong>Ice Cream Sandwich</strong> it has used <strong>Roboto</strong>. From <strong>Jelly Bean</strong> back to <strong>Cupcake</strong> it used <strong>Droid Sans</strong>, which also lacks an italic variation. Do you suppose OS developers dislike <em>emphasis</em>? |
|||
</p> |
|||
|
|||
<h2> |
|||
Ubuntu |
|||
</h2> |
|||
|
|||
<p> |
|||
Ubuntu has always used one system typeface, apty named <strong>Ubuntu</strong>. That part was easy. |
|||
</p> |
|||
|
|||
<h2> |
|||
Is <code>system</code> going to be a thing? |
|||
</h2> |
|||
|
|||
<p> |
|||
Maybe. There are <a href="https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html" target="_blank">discussions in the W3C</a> to standardize a generic <code>system</code> family. |
|||
</p> |
|||
@ -1,83 +0,0 @@ |
|||
{ |
|||
"_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" |
|||
} |
|||
@ -1,57 +0,0 @@ |
|||
/*! 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"); |
|||
} |
|||
@ -1,57 +0,0 @@ |
|||
/*! 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"); |
|||
} |
|||
@ -1,467 +0,0 @@ |
|||
|
|||
@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; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
@ -1,92 +0,0 @@ |
|||
// 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"; |
|||
@ -1,90 +0,0 @@ |
|||
// 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%); |
|||
@ -1,56 +0,0 @@ |
|||
// 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 |
|||
@ -1,91 +0,0 @@ |
|||
// 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"; |
|||
@ -1,19 +0,0 @@ |
|||
// 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"; |
|||
@ -1,118 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,147 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,142 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,390 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,102 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,136 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,83 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,612 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,122 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,451 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,363 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,57 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,138 +0,0 @@ |
|||
// 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; |
|||
|
|||
@ -1,171 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,106 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,126 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,57 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,71 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,129 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,157 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,74 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,150 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,209 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,185 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,756 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,352 +0,0 @@ |
|||
// 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; |
|||
|
|||
|
|||
@ -1,214 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,223 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,140 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,46 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,102 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,232 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,123 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,187 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,163 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,63 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,32 +0,0 @@ |
|||
// |
|||
// 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)); |
|||
} |
|||
@ -1,368 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,357 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,537 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,190 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,301 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,85 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,81 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,128 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,45 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,250 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,61 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,105 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,328 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,224 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,122 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,99 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,93 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,101 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,74 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,53 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,232 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,47 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,191 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,317 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,262 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,123 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,224 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,84 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,71 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,145 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,570 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,117 +0,0 @@ |
|||
// |
|||
// 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; |
|||
@ -1,151 +0,0 @@ |
|||
// 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(){} |
|||
@ -1,398 +0,0 @@ |
|||
// 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(){} |
|||
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -1,78 +0,0 @@ |
|||
// 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"; |
|||
@ -1,58 +0,0 @@ |
|||
// |
|||
// 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(){} |
|||
|
|||
|
|||
@ -1,46 +0,0 @@ |
|||
// |
|||
// 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 |
|||
// ======================================================================== |
|||
|
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue