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