diff --git a/docs/themes/oscalkit b/docs/themes/oscalkit deleted file mode 160000 index 5f68bf3e..00000000 --- a/docs/themes/oscalkit +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 5f68bf3e990eff4108fa251f3a3112d081fffba4 diff --git a/docs/themes/oscalkit/.gitignore b/docs/themes/oscalkit/.gitignore new file mode 100644 index 00000000..e43b0f98 --- /dev/null +++ b/docs/themes/oscalkit/.gitignore @@ -0,0 +1 @@ +.DS_Store diff --git a/docs/themes/oscalkit/LICENSE.md b/docs/themes/oscalkit/LICENSE.md new file mode 100644 index 00000000..ff11aa1e --- /dev/null +++ b/docs/themes/oscalkit/LICENSE.md @@ -0,0 +1,20 @@ +The MIT License (MIT) + +Copyright (c) 2017 mohamed jebli + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of +the Software, and to permit persons to whom the Software is furnished to do so, +subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS +FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR +COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER +IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN +CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/docs/themes/oscalkit/README.md b/docs/themes/oscalkit/README.md new file mode 100644 index 00000000..83ef2f54 --- /dev/null +++ b/docs/themes/oscalkit/README.md @@ -0,0 +1,177 @@ +# kube Theme for Hugo + +`kube` Kube is a professional and a responsive Hugo theme for developers and designers that offers a documentation section mixed with a landing page and a blog. + +I create this theme based on the `Version 6.5.2` [Kube Framework](https://imperavi.com/kube/). + +![kube hugo landingPage](https://cldup.com/RjWtdJZNae.png) + +# Demo + +To see this theme in action, check out [kube project](http://kube.elemnts.org) which is rendered with this theme and some content for documentation and blog posts. + +## Features + +- Mobile-first Design : Every element in kube is mobile-first and fully embraces latest and greatest tech. +- Responsive Design : Optimized for mobile, tablet, desktop +- Horizontal Rhythm : Like Kube framework this theme is based on a 4px vertical grid. +- Typography : beautiful typographie choice +- Google Analytics : Google Analytics using the internal async template +- Disqus Commenting : Post comments with Disqus using the internal template +- OpenGraph support : SEO-optimized using OpenGraph +- Schema Structured Data : Schema Structured Data and Meta tags +- Paginated Lists : Simple list pagination with page indicators +- Reading Time : Post reading time and update notice set user expectations +- Meta data for all blog article : Rich post data including links to category and tag taxonomy listings, author and word count +- Related Posts : Related Content for increased page views and reader loyalty +- Block Templates : Block Templates for foolproof layout extensions +- Table of Contents : Accessible Table of Contents for documentation +- SEO Site Verification : Site verification with Google, Bing Alexa and Yandex +- 404 page : 404 page with animated background + +## Installation + +Inside the folder of your Hugo site run: + + $ mkdir themes + $ cd themes + $ git clone https://github.com/jeblister/kube.git + +For more information read the official [setup guide](//gohugo.io/overview/installing/) for Hugo. + + +Copy custom archetypes to your site: + +```shell +cp themes/kube/archetypes/* archetypes +``` + + +Next, take a look in the `exampleSite` folder at. This directory contains an example config file and the content for the demo. It serves as an example setup for your blog. + +Copy at least the `config.toml` in the root directory of your website. Overwrite the existing config file if necessary. + +Hugo includes a development server, so you can view your changes as you go : + +``` sh +hugo server -w +``` + +Now you can go to [localhost:1313](http://localhost:1313) and the `kube` +theme should be visible. + + +## Getting Started + +There are a few concepts this theme employs to make a personal documentation site. It's important to read this as you may not see what you expect upon launching. It assumes you want to call your documentation posts `docs` and organizes them as such. For example, creating a new docs with Hugo would require you typing: + +``` + $ hugo new --kind docs docs/my-new-doc.md + +``` + +It also assumes you want to display three types of content `docs` and `blog` and some pages : the `faq`, `company` and `sign-in` pages and display links to this pages in the menu. This guide will take you through the steps to configure your documentation site to use the theme. + +### Configuring you website + +#### Where should blog post markdown files be stored? + +The theme works with other content types, but docs pages work best when grouped under `docs`. When using the `docs` content type you'll have a customized list page sorted by `weight` and the default list page for all documentation. Here's an example: + +![Custom List docs Page](https://cldup.com/8k1nU8TLuU.png) + + + +#### Defining yourself as the Author + +In this case you would want to add `author = "your name"` variable like your name to your post's Front Matter. + + +#### Webmaster Verification + +Verify your site with several webmaster tools including Google, Bing, Alexa and Yandex. To allow verification of your site with any or all of these providers simply add the following to your `config.toml` and fill in their respective values: + +```toml +[Params.seo.webmaster_verifications] + google = "" # Optional, Google verification code + bing = "" # Optional, Bing verification code + alexa = "" # Optional, Alexa verification code + yandex = "" # Optional, Yandex verification code +``` + +### Index Blocking + +Just because a page appears in your `sitemap.xml` does not mean you want it to appear in a SERP. Examples of pages which will appear in your `sitemap.xml` that you typically do not want indexed by crawlers include error pages, search pages, legal pages, and pages that simply list summaries of other pages. + +Though it's possible to block search indexing from a `robots.txt` file, kube makes it possible to block page indexing using Hugo configuration as well. By default the following page types will be blocked: + +- Section Pages (e.g. Post listings) +- Taxonomy Pages (e.g. Category and Tag listings) +- Taxonomy Terms Pages (e.g. Pages listing taxonomies) + +To customize default blocking configure the `noindex_kinds` setting in the `[params]` section of your `config.toml`. For example, if you want to enable crawling for sections appearing in [Section Menu](#adding-a-section-menu) add the following to your configuration file: + +``` +[params] + noindex_kinds = [ + "taxonomy", + "taxonomyTerm" + ] +``` + +To block individual pages from being indexed add `nofollow` to your page's front matter and set the value to `true`, like: + +```toml +noindex = true +``` + +And, finally, if you're using Hugo `v0.18` or better, you can also add an `_index.md` file with the `noindex` front matter to control indexing for specific section list layouts: + +```shell +├── content +│ ├── modules +│ │ ├── starry-night.md +│ │ └── flying-toilets.md +│ └── news +│ ├── _index.md +│ └── return-flying-toasters.md +``` + +To learn more about how crawlers use this feature read [block search indexing with meta tags](https://support.google.com/webmasters/answer/93710). + +### Custom CSS + +To add your own theme css or override existing CSS without having to change theme files do the following: + +1. Create a `style.css` in your site's `layouts/static/css directory` or use `custom.css` file in 'themes/kube/static/css/custom.css` +1. Add link to this file in 'themes/kube/layouts/_default/baseof.html'. + +Default `style block` : + +```html + + + +``` + + +## Contributing + +Did you find a bug or have an ideas for new features? Feel free to use the issue tracker to let me know or make a pull request. + +There's only one rule...there are no rules. + +## License + +MIT + +## Credits + +- [kube framework](https://imperavi.com/kube/) +- [after dark theme](https://github.com/comfusion/after-dark) + +## Contact + +This is the second theme I've made for Hugo, so I'm sure I've done some things wrong or assumed too much. If you have ideas or things that should be fixed, please let me know. + +- [Mohamed JEBLI](http://about.elemnts.org/) [@jebli_7](http://twitter.com/jebli_7) diff --git a/docs/themes/oscalkit/archetypes/blog.md b/docs/themes/oscalkit/archetypes/blog.md new file mode 100644 index 00000000..dcde13f5 --- /dev/null +++ b/docs/themes/oscalkit/archetypes/blog.md @@ -0,0 +1,7 @@ ++++ +title = "" +description = "" +date = {{ .Date }} +weight = 20 +draft = false ++++ diff --git a/docs/themes/oscalkit/archetypes/docs.md b/docs/themes/oscalkit/archetypes/docs.md new file mode 100644 index 00000000..29df1fa9 --- /dev/null +++ b/docs/themes/oscalkit/archetypes/docs.md @@ -0,0 +1,9 @@ ++++ +title = "" +description = "" +date = {{ .Date }} +weight = 20 +draft = false +bref = "" +toc = true ++++ diff --git a/docs/themes/oscalkit/exampleSite/config.toml b/docs/themes/oscalkit/exampleSite/config.toml new file mode 100644 index 00000000..280e9e4d --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/config.toml @@ -0,0 +1,25 @@ +baseURL = "/" +languageCode = "en-us" +title = "Kube for Hugo" +theme = "kube" +description = "Kube is a professional and a responsive Hugo theme for developers and designers that offers a documentation section mixed with a landing page and a blog" +Paginate = 4 +[Params] + RSSLink = "/index.xml" + author = "newpixcom" # add your company name + github = "" # add your github profile name + twitter = "" # add your twitter profile + email = "myemail@myaddress.xxx" + +[[menu.main]] + name = "Docs" + weight = -100 + url = "/docs/" +[[menu.main]] + name = "Blog" + weight = -100 + url = "/blog/" +[[menu.main]] + name = "Faq" + weight = -100 + url = "/faq/" diff --git a/docs/themes/oscalkit/exampleSite/content/_index.md b/docs/themes/oscalkit/exampleSite/content/_index.md new file mode 100644 index 00000000..4c9af782 --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/_index.md @@ -0,0 +1,6 @@ ++++ +description = "Kube is a professional and a responsive Hugo theme for developers and designers that offers a documentation section mixed with a landing page and a blog" +title = "Kube theme for Hugo" +draft = false + ++++ diff --git a/docs/themes/oscalkit/exampleSite/content/account.md b/docs/themes/oscalkit/exampleSite/content/account.md new file mode 100644 index 00000000..ad1f583d --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/account.md @@ -0,0 +1,20 @@ ++++ +title = "Sign In" ++++ +
+ +
+ + +
+ +
+ + +
+ +

+

Forgot password?

+

If you have any questions about authorization or you're our customer but haven't receive your login credentials, just send us a short email at support@company.com and we'll fix it right away.

+ +
diff --git a/docs/themes/oscalkit/exampleSite/content/blog/collapse.md b/docs/themes/oscalkit/exampleSite/content/blog/collapse.md new file mode 100644 index 00000000..55e431b5 --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/blog/collapse.md @@ -0,0 +1,207 @@ ++++ +date = "2017-04-10T16:42:50+01:00" +draft = false +weight = 180 +description = "Smoothly and reliably collapse elements for extra convenience" +title = "Collapse" +bref = "A demo to collapsable elements" + ++++ + +

Base

+
+
+

Item 1

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+

Item 2

+
+

I look active on load.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+

Item 3

+
+
Important Heading
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+ +
<div id="my-collapse" data-component="collapse">
+
+    <h4><a href="#box-1" class="collapse-toggle">...</a></h4>
+    <div class="collapse-box hide" id="box-1">...</div>
+
+    <h4><a href="#box-2" class="collapse-toggle">...</a></h4>
+    <div class="collapse-box" id="box-2">...</div>
+
+    <h4><a href="#box-3" class="collapse-toggle">...</a></h4>
+    <div class="collapse-box hide" id="box-3">...</div>
+
+</div>
+
+
+

Navigation Example

+

Here you can see a list of items forming a navigation menu, with a nested list which acts as a collapsable element

+
+ + 
<ul>
+    <li><a href="#">...</a></li>
+    <li data-component="collapse">
+        <a href="#toggle-box" class="collapse-toggle">
+            Toggle
+            <span class="caret down"></span>
+        </a>
+        <ul id="toggle-box" class="collapse-box">
+            <li><a href="#">...</a></li>
+        </ul>
+    </li>
+    <li><a href="#">...</a></li>
+</ul>
+
+
+

Settings

+

Settings are pretty straightforward: you can toggle, denote active element, turn animation on and off, and more.

+
toggle
+ +
active
+ +
toggleClass
+ +

Sets a class of a collapsable object.

+
boxClass
+ +

Sets a class for collapsable object's content

+
animation
+ +

Turns animation on and off.

+

Callbacks

+
open
+
$('#my-collapse').on('open.collapse', function()
+{
+    // do something...
+});
+
+
opened
+
$('#my-collapse').on('opened.collapse', function()
+{
+    // do something...
+});
+
+
close
+
$('#my-collapse').on('close.collapse', function()
+{
+    // do something...
+});
+
+
closed
+
$('#my-collapse').on('closed.collapse', function()
+{
+    // do something...
+});
+
+

API

+

We love APIs, and for interactive elements such as collapsable elements we offer ways to programmatically open and close individual elements, or all at once.

+
+


+
+

Item 1

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+

Item 2

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+

Item 3

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+ 
<button onclick="$('#my-collapse-api').collapse('open', '#box-2');">Open</button>
+<button onclick="$('#my-collapse-api').collapse('close', '#box-2');">Close</button>
+<button onclick="$('#my-collapse-api').collapse('openAll');">Open All</button>
+<button onclick="$('#my-collapse-api').collapse('closeAll');">Close All</button>
+
+<div id="my-collapse-api" data-component="collapse">
+
+    <h4><a href="#box-1" class="collapse-toggle">...</a></h4>
+    <div class="collapse-box hide" id="box-1">...</div>
+
+    <h4><a href="#box-2" class="collapse-toggle">...</a></h4>
+    <div class="collapse-box hide" id="box-2">...</div>
+
+    <h4><a href="#box-3" class="collapse-toggle">...</a></h4>
+    <div class="collapse-box hide" id="box-3">...</div>
+
+</div>
+
+
+
open
+
$('#my-collapse').collapse('open');
+
+
close
+
$('#my-collapse').collapse('close');
+
+
openAll
+
$('#my-collapse').collapse('openAll');
+
+
closeAll
+
$('#my-collapse').collapse('closeAll');
+
\ No newline at end of file diff --git a/docs/themes/oscalkit/exampleSite/content/blog/inline-style.md b/docs/themes/oscalkit/exampleSite/content/blog/inline-style.md new file mode 100644 index 00000000..02623be8 --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/blog/inline-style.md @@ -0,0 +1,10 @@ ++++ +date = "2017-04-02T21:56:55+01:00" +title = "Inline 🐣Text Styles" +tags = ["markdown","example"] +categories = ["general"] +draft = false +description = "This article is just a demo." ++++ + +Chocolate tiramisu pastry a link cotton candy sesame snaps. Dessert cake chocolate bar a bold part sugar plum bonbon marshmallow lollipop toffee soufflé. Donut caramels chocolate bar. Oat cake cookie a marked part cheesecake donut. Jelly-o $code marzipan cake. Bonbon sesame snaps chocolate an italic part oat cake pudding sweet roll caramels bonbon. Soufflé muffin 👻 gummies sugar plum dessert bonbon bear claw. Sweet ice cream jujubes. Marzipan sugar plum pastry chocolate ⌘+A bar fruitcake. Lollipop lollipop brownie. \ No newline at end of file diff --git a/docs/themes/oscalkit/exampleSite/content/blog/messages.md b/docs/themes/oscalkit/exampleSite/content/blog/messages.md new file mode 100644 index 00000000..5b884b76 --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/blog/messages.md @@ -0,0 +1,158 @@ ++++ +date = "2017-04-10T16:41:34+01:00" +draft = false +weight = 90 +description = "Versatile and refined messages, ideal for daily use" +title = "Messages" +bref = "Messages are an essential part of modern web and messages in Kube look nice" ++++ + +

Usage

+
+
+ You have 2 modules waiting to installation. Install +
+ 
<div class="message" data-component="message"> ...  <span class="close small"></span></div>
+
+
+
+ You have 2 modules waiting to installation. Install +
+ 
<div class="message error" data-component="message"> ...  <span class="close small"></span></div>
+
+
+
+ You have 2 modules waiting to installation. Install +
+ 
<div class="message success" data-component="message"> ...  <span class="close small"></span></div>
+
+
+
+
Warning!
You have 2 modules waiting to installation. Install +
+ 
<div class="message warning" data-component="message">
+    <h5>...</h5>
+    ...
+    <span class="close small"></span>
+</div>
+
+
+
+
+ You have 2 modules waiting to installation. Install +
+ 
<div class="message focus" data-component="message"> ...  <span class="close small"></span></div>
+
+
+
+ You have 2 modules waiting to installation. Install +
+ 
<div class="message black" data-component="message"> ...  <span class="close small"></span></div>
+
+
+
+ You have 2 modules waiting to installation. Install +
+ 
<div class="message inverted" data-component="message"> ...  <span class="close small"></span></div>
+
+

Options

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault
closeSelectorstring.close
closeEventstringclick
animationOpenstringfadeIn
animationClosestringfadeOut
+

Set an option

+

Via data attribute:

+
<div class="message" data-component="message" data-close-selector=".my-custom-close">
+    ... <span class="my-custom-close small"></span>
+</div>
+
+

Via Javascript:

+
$('#my-message').message({
+    closeSelector: '.my-custom-close'
+});
+
+

Methods

+

+
+ You have 2 modules waiting to installation. Install +
+ + + + + + + + + + + + + + + + + +
MethodDescription
closeManually closes a message.
openOpens a message if it has been closed.
+

Example

+
$('#my-message').message('close');
+

Callbacks

+ + + + + + + + + + + + + + + + + + + + + + + + + +
CallbackDescription
openThis event fires immediately when the open instance method is called.
openedThis event is fired when the message has been opened, will wait for CSS animation to complete.
closeThis event fires immediately when the close instance method is called.
closedThis event is fired when the message has been closed, will wait for CSS animation to complete.
+

Example

+
$('#my-message').on('closed.message', function()
+{
+    // do something
+})
+
diff --git a/docs/themes/oscalkit/exampleSite/content/blog/prototyping.md b/docs/themes/oscalkit/exampleSite/content/blog/prototyping.md new file mode 100644 index 00000000..f55d46ab --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/blog/prototyping.md @@ -0,0 +1,23 @@ ++++ +date = "2017-04-02T22:01:15+01:00" +title = "Prototyping with markdown" +tags = ["markdown","prototype", "hugo"] +categories = ["design"] +description = "An idea to make website protoype with markdown" +draft = false +weight = 30 ++++ + + + +I have been working on a large set of documentation for a prototype that will eventually make it into a product. One issue with the publishing system at my company is that it makes doing prototypes, or really anything not within the rigidly and narrowly scoped model, difficult to set up. It takes a lot of work just to get to the point where you can begin writing. + +Since time was of the essence and writing is expensive, I decided to do the prototype outside of the publishing system. I also decided to avoid using the rigid DocBook variant we use. Instead, **I figured I do the prototype in Markdown using Hugo generator**. It gives me reasonably ~full featured Markdown support, flexibility to work wherever I want, easy HTML~ ,nd the stack/sheet metaphor fits nicely with topic based writing. + + +I wasn't sure how well the experiment was going to work when I started, but a few weeks in I think it is great. ~I was able to rapidly prototype fifteen topics in about ten days.~ The prototype pages look fairly close to what our actual system generates. ~I can quickly make changes to the content as needed and republish.~ ~The fact that I can work multi-platform is great. I am not chained to my desk. I can demo changes easily.~ + + +~The fact that I am working in text that doesn't have to be structured in a rigid format makes the work flow faster~. It provides flexibility for quick changes, yet also allows for topic orientation. +For final production and long term maintenance, unstructured Markdown is not a great solution. There the benefits of the rigidity outweigh the cost. The rigidity enforces uniformity that large groups of variously skilled writers need to create and maintain content at scale. +> For small, fast projects or prototyping Markdown, with Hugo, have proven to be an excellent solution. \ No newline at end of file diff --git a/docs/themes/oscalkit/exampleSite/content/blog/typography.md b/docs/themes/oscalkit/exampleSite/content/blog/typography.md new file mode 100644 index 00000000..e5b631b4 --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/blog/typography.md @@ -0,0 +1,452 @@ ++++ +title = "Typography with kube" +weight = 25 +draft = false +description = "Always precise spacing and perfect font size" +bref = "Typography is perhaps one of the most important and most visible things on a web page. Even slightest imperfection can ruin otherwise perfect website. With Kube, you will have perfect typography with ideal spacing, font sizes and proportions, regardless of the exact style or font you choose for your site." + ++++ + +

Get Started

+

Typography of Kube based on the 4px horizontal grid, it means that for the headers, paragraphs, quotes and any other texts chosen are a combination of line-height, that fit into the 4px grid and help set the horizontal rhythm of design by default.

+
+ 4px horizontal rhythm +
+ 4px grid for typography - the magic of the horizontal rhythm +
+
+

With this feature, you can quickly and easily make a solid and harmonious-looking website and UI design. You do not need to do complicated calculations to find the size and proportions of the text baseline, no need to look for the magic formula to build a horizontal rhythm. Magic is already in Kube.

+

You can use all the default settings of typography and it will always look balanced. But also you can easily change any font sizes, just try to set the value of line-height fold for 4px and your texts will still look great.

+

Additional balance and harmony, creates a classic typography scale, used in Kube.

+
+ the typography scale +
+ The typography scale helps to build a balance between the size of headings and text elements +
+
+

Headings

+

Use h1-h6 tags or .h1-.h6 classes to define headers and class="title" for the title, which is suitable for the most important inscriptions, for example, in the hero or covers.

+
+

Title

+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ 
<h1 class="title">...</h1>
+<h1>...</h1>
+...
+<h6>...</h6>
+
+

Paragraphs

+

The base pragraph has an ideal ratio of font size and baseline. This text is easy to read in most cases.

+
+

16px/24px

+

By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.

+ 
<p>...</p>
+
+

In special cases, you can use modifiers which increase or decrease the text size. It is useful for building a variety of websites and UI, when you need to make a lead text or signatures with a small font size .

+
+

20px/32px

+

By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.

+ 
<p class="large">...</p>
+
+
+

18px/28px

+

By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.

+ 
<p class="big">...</p>
+
+
+

14px/20px

+

By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.

+ 
<p class="small">...</p>
+
+
+

12px/20px

+

By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.

+ 
<p class="smaller">...</p>
+
+

Columns

+

Kube has three classes of .columns-2 through .columns-4 to create a multi-column layout. All multi-column layouts will be in a single column on mobile.

+
+

2 columns

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+ 
<div class="columns-2">
+    <p>...</p>
+</div>
+
+
+
+

3 columns

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+ 
<div class="columns-3">
+    <p>...</p>
+</div>
+
+
+
+

4 columns

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+ 
<div class="columns-4">
+    <p>...</p>
+</div>
+
+
+

Quotes

+

Quotes in the text stand out for contrast and added variety to the text. In the quotes you can mark text as a paragraph tag and without it.

+
+
+

No, she'll probably make me do it. Goodbye, friends. I never thought I'd die like this. But I always really hoped. I saw you with those two "ladies of the evening" at Elzars. Explain that. I never loved you.

+
+ 
<blockquote>...</blockquote>
+
+

Use small tag for attribution. It's a prefer way for semantic code.

+
+
+

Who's brave enough to fly into something we all keep calling a death sphere? Yes. You gave me a dollar and some candy. I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense.

— Bender +
+ 
<blockquote>
+    <p>Quotation content</p>
+    <small>Author attribution</small>
+</blockquote>
+
+
+

Pre-formatted

+

Pre-formatted text most often used to display code snippets or other text elements, for which you wish to preserve the exact formatting they've got.

+
+ 
Function.prototype.inherits = function(parent)
+{
+    for (var key in parent.prototype)
+    {
+        this.prototype[key] = parent.prototype[key];
+    }
+};
+
+ 
<pre>...</pre>
+
+

You feel free to use code tag inside pre.

+
+ 
Function.prototype.inherits = function(parent)
+{
+    for (var key in parent.prototype)
+    {
+        this.prototype[key] = parent.prototype[key];
+    }
+};
+
+ 
<pre><code>...</code></pre>
+
+

Inline Elements

+

Kube features various inline formatting elements. They all have their own semantic meaning, but you're free to use them just for their style.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ExampleTagExampleTag
CSS<abbr>Cite<cite>
Code<code>Sample<samp>
Variable<var>Mark<mark>
Shortcut<kbd> + Deleted + <del>
Italic<i>Emphasis<em>
Highlighted<strong>Bold<b>
xsuperscript<sup>xsubscript<sub>
Small<small> + Inserted + <ins>
+

Modifiers

+

Modifiers - a set of helper classes for creating accents in the text and for the solution of useful tasks without writing CSS code, for example, the alignment of the text in the center.

+

Modifiers can be applied to any tags as inline elements, links or block tags.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ExampleModifier
Muted.muted
+ Muted link + .muted
+ Black link + .black
Highlight.highlight
upper.upper
LOWER.lower
Italic.italic
Strong.strong
Not strong.normal
Monospace.monospace
Nowrap.nowrap
Remove margin bottom.end
Highlight.highlight
Small.small
Smaller.smaller
Large.large
Big.big
Text left.text-left
Text center.text-center
Text right.text-right
+

Figure

+

A figure tag features an image, a video or a code plus a caption. It is a good accessibility practice. It also helps serve responsive video to various devices when you wrap video into .video-container class.

+
Images
+
+ Image +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit... +
+
+

HTML

+
<figure>
+    <img src="image.jpg">
+    <figcaption>...</figcaption>
+</figure>
+
+
Video
+
+
+ +
+
+ Journey Through The Ice | National Geographic +
+
+

HTML

+
<figure>
+    <div class="video-container">
+        <iframe>...</iframe>
+    </div>
+    <figcaption>...</figcaption>
+</figure>
+
+
Code
+
+ 
Function.prototype.inherits = function(parent)
+{
+    for (var key in parent.prototype)
+    {
+        this.prototype[key] = parent.prototype[key];
+    }
+};
+
+
+ One of the implementations of inheritance +
+
+

HTML

+
<figure>
+    <pre>...</pre>
+    <figcaption>...</figcaption>
+</figure>
+
+

Lists

+

Although you most likely will not ever need to do so, you can still nest as many list levels as you like.

+
+
+
+
    +
  • list item 1
    • +
  • list item 2 +
      +
    • list item 2.1
      • +
    • list item 2.2 +
        +
      • list item 2.2.1
        • +
      • list item 2.2.2
        • +
      +
      • +
    • list item 2.3
      • +
    • list item 2.4
      • +
    +
    • +
  • list item 3
    • +
  • list item 4
    • +
+ 
<ul>
+    <li>...</li>
+</ul>
+
+
+
+
+
+
    +
  1. list item 1
    2. +
  2. list item 2 +
      +
    1. list item 2.1
      2. +
    2. list item 2.2 +
        +
      1. list item 2.2.1
        2. +
      2. list item 2.2.2
        3. +
      +
      3. +
    3. list item 2.3
      4. +
    4. list item 2.4
      5. +
    +
    3. +
  3. list item 3
    4. +
  4. list item 4
    5. +
+ 
<ol>
+    <li>...</li>
+</ol>
+
+
+
+
+
Unstyled List
+

To remove default list styling, use .unstyled.

+
+ + 
<ul class="unstyled">
+    <li>...</li>
+</ul>
+
+
+
Definition List
+

From time to time, you may need to produce a list of definitions, and there's one nicely built-in into Kube. We love semantic things. And lists. We love lists.

+
+
+
Term 1
+
Description 1
+
Term 2
+
Description 2
+
Term 3
+
Description 3
+
+ 
<dl>
+    <dt>Term</dt>
+    <dd>Description</dd>
+</dl>
+
+
\ No newline at end of file diff --git a/docs/themes/oscalkit/exampleSite/content/blog/welcome.md b/docs/themes/oscalkit/exampleSite/content/blog/welcome.md new file mode 100644 index 00000000..9d8217f3 --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/blog/welcome.md @@ -0,0 +1,85 @@ ++++ +date = "2017-03-02T21:56:55+01:00" +title = "Welcome to Kube" +tags = ["markdown","example"] +categories = ["general"] +draft = false +description = "This article is just a demo post and shows you the style of common used elements writing in pure markdown without HTML code." +weight = 10 ++++ + +# Welcome to Kube – an open source documentation like theme for Hugo + +Hi there and welcome to kube - my two theme for the static site generator [hugo](https://gohugo.io/). kube is open source and can be found on [kube](https://kube.elemnts.org/). This article is just a demo post and shows you the style of common used elements. + +Bear claw danish chocolate lollipop soufflé jelly. Apple pie chocolate cake +jelly-o icing bonbon. Gingerbread pastry fruitcake muffin chocolate bar +cheesecake. Sugar plum bonbon bonbon lemon drops gummies. + +## Inline 🦄 Text Styles [a link](http://kube.elemnts.org) + +Chocolate tiramisu pastry [a link](http://zutrinken.com) cotton candy sesame snaps. Dessert cake chocolate bar **a bold part** sugar plum bonbon 🐓💨 marshmallow lollipop toffee soufflé. Donut caramels chocolate bar. Oat cake cookie a marked part cheesecake donut. Jelly-o ` $code` marzipan cake. Bonbon sesame snaps chocolate _an italic part_ oat cake pudding sweet roll caramels bonbon. Soufflé muffin 👻 gummies sugar plum dessert bonbon bear claw. Sweet ice cream jujubes. Marzipan sugar plum pastry chocolate ⌘+A bar fruitcake. Lollipop lollipop brownie. + +## Ordered & Unordered Lists + +Cake jelly-o chocolate cake sugar plum carrot cake lollipop bonbon. Jelly beans pudding oat cake pie. + +* Jelly beans pudding oat cake pie. +* Cupcake cupcake oat cake candy lemon +* Drops marzipan icing. Dessert topping croissant fruitcake sesame snaps cotton candy sweet danish +* Sweet roll sweet sugar plum donut + * Bear claw gingerbread cake donut chocolate bar + * Topping cake fruitcake fruitcake +* Ice cream icing chupa chups cupcake jelly-o candy +* Croissant jujubes topping tart soufflé pudding + * Cheesecake caramels icing + * Cake jelly-o chocolate cake sugar plum carrot cake lollipop bonbon + +Ice cream icing chupa chups cupcake jelly-o candy. Croissant jujubes topping tart soufflé pudding. Cheesecake caramels icing. + +1. Drops marzipan icing. Dessert topping croissant fruitcake sesame snaps cotton candy sweet danish +* Sweet roll sweet sugar plum donut + * Bear claw gingerbread cake donut chocolate bar + * Topping cake fruitcake fruitcake +3. Ice cream icing chupa chups cupcake jelly-o candy + +Liquorice marshmallow sweet macaroon. Cotton candy pastry ice cream fruitcake tiramisu jelly beans dragée. + +
Ice cream
icing chupa chups cupcake jelly-o candy. Croissant jujubes topping tart soufflé pudding
Cake
Jelly beans pudding oat cake pie
Drops marzipan icing
Cake jelly-o chocolate cake sugar plum carrot cake lollipop
+ +Soufflé tart topping gummi bears jujubes lollipop ice cream pudding. Apple pie jelly-o powder powder sweet. + +Cake soufflé icing gingerbread topping jujubes. Chocolate cake pudding sweet biscuit cake. Soufflé tart topping gummi bears jujubes lollipop ice cream pudding. Apple pie jelly-o powder powder sweet. Halvah chocolate bar cotton candy sugar plum cake. + +## Tables, Blockquotes and Codeblocks + +Apple pie chocolate cake jelly-o icing bonbon. Gingerbread pastry fruitcake muffin chocolate bar cheesecake. Sugar plum bonbon bonbon lemon drops gummies. + +| RGB | WMYN | +|---|---| +| Red | Cyan | +| Green | Magenta | +| Yellow | Black | + + +Brownie oat cake tart caramels croissant lollipop pastry soufflé lemon drops. Cotton candy pastry ice cream fruitcake tiramisu jelly beans dragée. + +> Jelly beans dessert toffee caramels brownie ice cream croissant chupa chups liquorice. Danish sweet roll croissant. Powder sugar plum powder danish wafer cake. +> +> Candy jelly beans jujubes muffin. Bear claw danish chocolate lollipop soufflé jelly. + +Cake soufflé icing gingerbread topping jujubes. Chocolate cake pudding sweet biscuit cake. Soufflé tart topping gummi bears jujubes lollipop ice cream pudding. + +Apple pie jelly-o powder powder sweet. Halvah chocolate bar cotton candy sugar plum cake. Liquorice marshmallow sweet macaroon. + +
+

For example.

+
+ +Macaroon jelly toffee cheesecake muffin lollipop dragée cake gummies. Cotton candy biscuit cupcake. Cupcake chupa chups carrot cake. Chocolate bar donut gummies wafer pastry sesame snaps oat cake. + +* * * + +Apple pie chocolate cake jelly-o icing bonbon. Gingerbread pastry fruitcake muffin chocolate bar cheesecake. Sugar plum bonbon bonbon lemon drops gummies. Brownie oat cake tart caramels croissant lollipop pastry soufflé lemon drops. Jelly beans dessert toffee caramels brownie ice cream croissant chupa chups liquorice. Danish sweet roll croissant. Powder sugar plum powder danish wafer cake. Candy jelly beans jujubes muffin. Bear claw danish chocolate lollipop soufflé jelly. + + diff --git a/docs/themes/oscalkit/exampleSite/content/company.md b/docs/themes/oscalkit/exampleSite/content/company.md new file mode 100644 index 00000000..bc2cdf2a --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/company.md @@ -0,0 +1,4 @@ ++++ +title = "Company" +description = "We create apps and websites since 2009. We aim for minimalism and efficiency in everything we do. Our products are simple yet beautiful. They help you focus on your goals, not on your tools." ++++ diff --git a/docs/themes/oscalkit/exampleSite/content/docs/animation.md b/docs/themes/oscalkit/exampleSite/content/docs/animation.md new file mode 100644 index 00000000..3ff71e4c --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/docs/animation.md @@ -0,0 +1,163 @@ ++++ +description = "Add some motion, shaking, pulsing, sliding and more" +title = "Animation" +date = "2017-04-10T16:43:08+01:00" +draft = false +weight = 200 +bref="Although it is quite easy to overuse animation effects, Kube makes it pretty easy to create meaningful, smooth and overall nice looking animation. Feel free to click every button below to see what it does, and then only use those effects that are essential to your project" +toc = true +script = 'animation' ++++ + +

Slide

+
+
+
+
+ slideUp +
+
+
+
+ slideDown +
+
+
Slide Up Slide Down + 
$('#element').animation('slideUp');
+$('#element').animation('slideDown');
+
+

Fade

+
+
+
+
+ fadeIn +
+
+
+
+ fadeOut +
+
+
Fade In Fade Out + 
$('#element').animation('fadeIn');
+$('#element').animation('fadeOut');
+
+

Flip

+
+
+
+
+ flipIn +
+
+
+
+ flipOut +
+
+
Flip In Flip Out + 
$('#element').animation('flipIn');
+$('#element').animation('flipOut');
+
+

Zoom

+
+
+
+
+ zoomIn +
+
+
+
+ zoomOut +
+
+
Zoom In Zoom Out + 
$('#element').animation('zoomIn');
+$('#element').animation('zoomOut');
+
+

Rotate

+
+
+
+
+ rotate +
+
+
Rotate + 
$('#element').animation('rotate');
+
+

Shake

+
+
+
+
+ shake +
+
+
Shake + 
$('#element').animation('shake');
+
+

Pulse

+
+
+
+
+ pulse +
+
+
Pulse + 
$('#element').animation('pulse');
+
+

Slide In

+
+
+
+
+ slideInRight +
+
+
+
+ slideInLeft +
+
+
+
+ slideInDown +
+
+
Slide In Right Slide In Left Slide In Down + 
$('#element').animation('slideInRight');
+$('#element').animation('slideInLeft');
+$('#element').animation('slideInDown');
+
+

Slide Out

+
+
+
+
+ slideOutRight +
+
+
+
+ slideOutLeft +
+
+
+
+ slideOutUp +
+
+
Slide Out Right Slide Out Left Slide Out Up + 
$('#element').animation('slideOutRight');
+$('#element').animation('slideOutLeft');
+$('#element').animation('slideOutUp');
+
+

Callback

+
$('#element').animation('fadeIn', function()
+{
+    // code ...
+});
\ No newline at end of file diff --git a/docs/themes/oscalkit/exampleSite/content/docs/breadcrumbs.md b/docs/themes/oscalkit/exampleSite/content/docs/breadcrumbs.md new file mode 100644 index 00000000..b195c9e8 --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/docs/breadcrumbs.md @@ -0,0 +1,99 @@ ++++ +date = "2017-04-10T16:41:54+01:00" +weight = 110 +description = "Traces for the users so they won't get lost" +title = "Breadcrumbs" +draft = false +bref= "Breadcrumbs in Kube are formed as lists with default separator. This separator can be customized with ease by simply changing a single CSS line" +toc = true ++++ + +

Base

+
+ + 
<nav class="breadcrumbs">
+    <ul>
+        <li><a href="">...</a></li>
+        <li><span>...</span></li>
+    </ul>
+</nav>
+
+
+

Centered

+
+ + 
<nav class="breadcrumbs push-center">
+    <ul>
+        <li><a href="">...</a></li>
+        <li class="active"><a href="">...</a></li>
+    </ul>
+</nav>
+
+
+

Custom Separator

+
+ + 
// css
+#breadcrumbs-custom-separator li:after {
+    content: '>';
+}
+
+// html
+<nav id="breadcrumbs-custom-separator" class="breadcrumbs">
+    <ul>
+        <li><a href="">...</a></li>
+        <li><span>...</span></li>
+    </ul>
+</nav>
+
+
\ No newline at end of file diff --git a/docs/themes/oscalkit/exampleSite/content/docs/buttons.md b/docs/themes/oscalkit/exampleSite/content/docs/buttons.md new file mode 100644 index 00000000..3027dc74 --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/docs/buttons.md @@ -0,0 +1,108 @@ ++++ +date = "2017-04-10T16:41:16+01:00" +weight = 70 +description = "Full variety of pressible, clickable and pushable buttons" +title = "Buttons" +draft = false +bref = "Buttons in Kube are minimalistic, designed for instant and convenient customization, and are ready to be pushed, pressed, clicked and manipulated in whichever ways. A lot of interactive components use buttons, and you should too!" +toc = true ++++ + +

Primary

+
+ Button + 
<button class="button">Button</button>
+<a href="#" class="button">Button</a>
+
+

Secondary

+
+ Button + 
<button class="button secondary">Button</button>
+<a href="#" class="button secondary">Button</a>
+
+

Outline

+

Outline class does exactly what it is supposed to do: styles a button with an outline with no fill color.

+
+ + 
<button class="button outline">Button</button>
+<button class="button secondary outline">Button</button>
+
+

Disabled

+

Disabled buttons are automatically styles with muted colors, inactive and not clickable. As you can see, there's no need to set disabled class for the button element, and disabled argument is enough. Having this said, both a link and a button input require disabled class.

+
+ Link +
+
<a href="#" class="button disabled" role="button">Link</a>
+<button class="button secondary" disabled>Button</button>
+

Small

+

Buttons come in all sizes and shapes.

+
+ Link +
+
<a href="#" class="button small" role="button">Link</a>
+<button class="button secondary small">Button</button>
+

Big

+
+ Link +
+
<a href="#" class="button big" role="button">Link</a>
+<button class="button secondary big">Button</button>
+

Large

+
+ Link +
+
<a href="#" class="button large" role="button">Link</a>
+<button class="button secondary large">Button</button>
+

Upper

+
+ Link Link +
+
<a href="#" class="button upper" role="button">Link</a>
+<button class="button secondary upper">Button</button>
+<a href="#" class="button upper outline" role="button">Link</a>
+<button class="button secondary upper outline">Button</button>
+

Round

+
+ Link Link +
+
<a href="#" class="button round" role="button">Link</a>
+<button class="button secondary round">Button</button>
+<a href="#" class="button round outline" role="button">Link</a>
+<button class="button secondary round outline">Button</button>
+

Inverted

+

For use on darker backgrounds, you can just introduce inverted class to have your button flip its color to the opposite one.

+
+ Link     + 
<a href="#" class="button inverted" role="button">Link</a>
+<button class="button inverted outline">Button</button>
+
+

Width

+
+

+

+ 
<button class="button w100">...</button>
+<button class="button secondary w50">...</button>
+
+

Icons

+
+ + 
<button class="button"><i class="kube-calendar"></i></button>
+<button class="button secondary"><i class="kube-calendar"></i> Change</button>
+
+<button class="button outline"><i class="kube-search"></i></button>
+<button class="button secondary outline"><i class="kube-search"></i> Search</button>
+
+

Custom

+

With some Sass magic, you can customize your buttons in a snap. Just include a color class declaration and set the color itself, and you're done.

+
+ + 
// scss
+.button.red {
+    // $text-color, $back-color
+    @include button(#fff, #ff3366);
+}
+
+// html
+<button class="button red">Button</button>
+<button class="button red outline">Button</button>
+
\ No newline at end of file diff --git a/docs/themes/oscalkit/exampleSite/content/docs/collapse.md b/docs/themes/oscalkit/exampleSite/content/docs/collapse.md new file mode 100644 index 00000000..fdc4029e --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/docs/collapse.md @@ -0,0 +1,207 @@ ++++ +date = "2017-04-10T16:42:50+01:00" +draft = false +weight = 180 +description = "Smoothly and reliably collapse elements for extra convenience" +title = "Collapse" +bref="Collapsable elements are horizontally aligned tabs, in a way. Jokes aside, collapsable elements are useful and easy to setup, both for direct purpose of switching between content while collapsing everything else, and for navigation use cases" +toc = true ++++ + +

Base

+
+
+

Item 1

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+

Item 2

+
+

I look active on load.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+

Item 3

+
+
Important Heading
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+ +
<div id="my-collapse" data-component="collapse">
+
+    <h4><a href="#box-1" class="collapse-toggle">...</a></h4>
+    <div class="collapse-box hide" id="box-1">...</div>
+
+    <h4><a href="#box-2" class="collapse-toggle">...</a></h4>
+    <div class="collapse-box" id="box-2">...</div>
+
+    <h4><a href="#box-3" class="collapse-toggle">...</a></h4>
+    <div class="collapse-box hide" id="box-3">...</div>
+
+</div>
+
+
+

Navigation Example

+

Here you can see a list of items forming a navigation menu, with a nested list which acts as a collapsable element

+
+ + 
<ul>
+    <li><a href="#">...</a></li>
+    <li data-component="collapse">
+        <a href="#toggle-box" class="collapse-toggle">
+            Toggle
+            <span class="caret down"></span>
+        </a>
+        <ul id="toggle-box" class="collapse-box">
+            <li><a href="#">...</a></li>
+        </ul>
+    </li>
+    <li><a href="#">...</a></li>
+</ul>
+
+
+

Settings

+

Settings are pretty straightforward: you can toggle, denote active element, turn animation on and off, and more.

+
toggle
+ +
active
+ +
toggleClass
+ +

Sets a class of a collapsable object.

+
boxClass
+ +

Sets a class for collapsable object's content

+
animation
+ +

Turns animation on and off.

+

Callbacks

+
open
+
$('#my-collapse').on('open.collapse', function()
+{
+    // do something...
+});
+
+
opened
+
$('#my-collapse').on('opened.collapse', function()
+{
+    // do something...
+});
+
+
close
+
$('#my-collapse').on('close.collapse', function()
+{
+    // do something...
+});
+
+
closed
+
$('#my-collapse').on('closed.collapse', function()
+{
+    // do something...
+});
+
+

API

+

We love APIs, and for interactive elements such as collapsable elements we offer ways to programmatically open and close individual elements, or all at once.

+
+


+
+

Item 1

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+

Item 2

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+

Item 3

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+ 
<button onclick="$('#my-collapse-api').collapse('open', '#box-2');">Open</button>
+<button onclick="$('#my-collapse-api').collapse('close', '#box-2');">Close</button>
+<button onclick="$('#my-collapse-api').collapse('openAll');">Open All</button>
+<button onclick="$('#my-collapse-api').collapse('closeAll');">Close All</button>
+
+<div id="my-collapse-api" data-component="collapse">
+
+    <h4><a href="#box-1" class="collapse-toggle">...</a></h4>
+    <div class="collapse-box hide" id="box-1">...</div>
+
+    <h4><a href="#box-2" class="collapse-toggle">...</a></h4>
+    <div class="collapse-box hide" id="box-2">...</div>
+
+    <h4><a href="#box-3" class="collapse-toggle">...</a></h4>
+    <div class="collapse-box hide" id="box-3">...</div>
+
+</div>
+
+
+
open
+
$('#my-collapse').collapse('open');
+
+
close
+
$('#my-collapse').collapse('close');
+
+
openAll
+
$('#my-collapse').collapse('openAll');
+
+
closeAll
+
$('#my-collapse').collapse('closeAll');
+
\ No newline at end of file diff --git a/docs/themes/oscalkit/exampleSite/content/docs/colors.md b/docs/themes/oscalkit/exampleSite/content/docs/colors.md new file mode 100644 index 00000000..d59e0fc9 --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/docs/colors.md @@ -0,0 +1,141 @@ ++++ +date = "2017-04-10T16:43:14+01:00" +draft = false +weight = 210 +description = "The basic set of colors" +title = "Colors" +bref="Kube has a basic set of colors for text, links, buttons, states and gray palette. These colors help to create uniformity and harmony in the look of UI elements. All colors are carefully selected and combined with each other. Of course, you can change the color scheme to your choice in the framework settings." +toc = true ++++ + +

Text

+

Contrasting black color for headings and less intense dark gray for the text helps to improve readability.

+
+
+
+ +
Headings
+

$color-headings

+
+
+ +
Text
+

$color-text

+
+
+
+ +

Classic blue links and soft red for the hover state makes links visible and predictable.

+
+
+
+ +
Link
+

$color-link

+
+
+ +
Hover
+

$color-link-hover

+
+
+
+

Buttons

+

Blue color for primary buttons for greater consistency with links. Black color for secondary buttons allows you build a variety of UI.

+
+
+
+ +
Primary
+

$color-button-primary

+
+
+ +
Secondary
+

$color-button-secondary

+
+
+
+

States

+

All possible states of the UI are in the simple and intuitive color scheme helps to focus the user's attention when creating an interactive UI.

+
+
+
+ +
Error
+

$color-error

+
+
+ +
Focus
+

$color-focus

+
+
+ +
Success
+

$color-success

+
+
+ +
Warning
+

$color-warning

+
+
+
+

Extra

+

Special color to highlight areas of interaction with the interface. And the white color for all cases.

+
+
+
+ +
Highlight
+

$color-highlight

+
+
+ +
Inverted
+

$color-inverted

+
+
+
+

Grayscale

+

Harmonious and well-thought-out scheme of gray for a broad range of tasks in the designing of the interface from controls to backgrounds.

+
+
+
+ +
Black
+

$color-black

+
+
+ +
Darkgray
+

$color-darkgray

+
+
+ +
Midgray
+

$color-midgray

+
+
+ +
Gray
+

$color-gray

+
+
+ +
Lightgray
+

$color-lightgray

+
+
+ +
Silver
+

$color-silver

+
+
+ +
Aluminum
+

$color-aluminum

+
+
+
\ No newline at end of file diff --git a/docs/themes/oscalkit/exampleSite/content/docs/custom-plugins.md b/docs/themes/oscalkit/exampleSite/content/docs/custom-plugins.md new file mode 100644 index 00000000..49e0b671 --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/docs/custom-plugins.md @@ -0,0 +1,96 @@ ++++ +title = "Custom Plugins" +description = "Flexible and extensible way to add custom features" +weight = 20 +draft = false +toc = true +bref = "Kube has a lot to offer in terms of extensibility and flexibility, and plugins are the way of doing incredible things without bloating the core. With plugins, you can extend existing features, make them more interactive, or you can crate completely new functionality." ++++ + +

Plugin Template

+

Here's what a generic plugin looks like. This template gives an overall idea of what you can do with plugins in Kube. Feel free to use this one as a boilerplate for your custom plugins.

+
(function(Kube)
+{
+    Kube.Myplugin = function(element, options)
+    {
+        this.namespace = 'myplugin';
+
+        // default settings
+        this.defaults = {
+            mysetting: true
+        };
+
+        // Parent Constructor
+        Kube.apply(this, arguments);
+
+        // Initialization
+        this.start();
+    };
+
+    // Functionality
+    Kube.Myplugin.prototype = {
+        start: function()
+        {
+            // plugin element
+            console.log(this.$element);
+
+            // call options
+            console.log(this.opts.mysetting);
+
+            // call methods
+            this.method();
+        },
+        method: function()
+        {
+            // do something...
+
+            // callback
+            this.callback('show');
+
+            // callback with arguments
+            this.callback('show', value1, value2);
+        }
+    };
+
+    // Inheritance
+    Kube.Myplugin.inherits(Kube);
+
+    // Plugin
+    Kube.Plugin.create('Myplugin');
+    Kube.Plugin.autoload('Myplugin');
+
+}(Kube));
+
+

Call

+

Calling a plugin is very easy, just add the data-component with the name of your plugin and it will start automatic.

+
<div data-component="myplugin"></div>
+

Or call manually

+
<div id="my-element"></div>
+
+<script>
+    $('#my-element').myplugin();
+</script>
+
+

Callbacks

+

Kube plugins can react on events with callbacks. Whenever you need your plugin to do something in response to an action or an event, just use a callback.

+
<div id="myplugin" data-component="myplugin"></div>
+
+<script>
+$('#myplugin').on('show.myplugin', function()
+{
+    // do something...
+});
+</script>
+
+

All plugin methods and variables are available within the plugin via this:

+
<script>
+$('#myplugin').on('show.myplugin', function()
+{
+    // plugin element
+    console.log(this.$element);
+
+    // call plugin method
+    this.method();
+});
+</script>
+
\ No newline at end of file diff --git a/docs/themes/oscalkit/exampleSite/content/docs/dropdown.md b/docs/themes/oscalkit/exampleSite/content/docs/dropdown.md new file mode 100644 index 00000000..2c2eaf5e --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/docs/dropdown.md @@ -0,0 +1,172 @@ ++++ +date = "2017-04-10T16:42:12+01:00" +draft = false +weight = 140 +description = "Popular and adjustable menu and navigation option" +title = "Dropdown" +bref= "Dropdown menus in Kube are simple and intuitive. You've got a link with data-component='dropdown' and a div with some kind of HTML content. Clicking outside of the dropdown or hitting Esc closes dropdown" +toc = true ++++ + +

Demo

+
+

Show Dropdown

+ + 
// Toggle
+<a href="#" data-component="dropdown" data-target="#my-dropdown">Show <span class="caret down"></span></a>
+
+// Dropdown
+<div class="dropdown hide" id="my-dropdown">
+    <a href="" class="close show-sm"></a>
+    <ul>
+        <li><a href="">...</a></li>
+    </ul>
+</div>
+
+
+
+

+ + 
// Toggle
+<button data-component="dropdown" data-target="#my-dropdown">Show Dropdown <span class="caret down"></span></button>
+
+// Dropdown
+<div class="dropdown hide" id="my-dropdown">
+
+    <p>...</p>
+    <a href="#" data-action="dropdown-close">Close</a>
+
+</div>
+
+
+

Navigation Fixed

+

Scroll down a bit to make a fixed navigation bar appear at the top of the page, and then try out "Account" dropdown.

+
+ + + 
<div id="navbar-demo" data-component="sticky">
+    <nav>
+        <ul>
+            <li><a href="">...</a></li>
+            <li>
+                <a href="" data-component="dropdown" data-target="#dropdown-fixed">
+                    Account
+                    <span class="caret down"></span>
+                </a>
+            </li>
+        </ul>
+    </nav>
+</div>
+
+// Dropdown
+<div class="dropdown hide" id="dropdown-fixed">
+    <ul>
+        <li><a href="">...</a></li>
+    </ul>
+</div>
+
+
+

Settings

+
target
+ +

Sets an ID of a target dropdown layer.

+
height
+ +

Sets dropdown height.

+
width
+ +

Sets dropdown width.

+
animation
+ +

Turns opening and closing animation on and off.

+

Callbacks

+
open
+
$('#my-dropdown').on('open.dropdown', function()
+{
+    // do something...
+});
+
opened
+
$('#my-dropdown').on('opened.dropdown', function()
+{
+    // do something...
+});
+
close
+
$('#my-dropdown').on('close.dropdown', function()
+{
+    // do something...
+});
+
closed
+
$('#my-dropdown').on('closed.dropdown', function()
+{
+    // do something...
+});
\ No newline at end of file diff --git a/docs/themes/oscalkit/exampleSite/content/docs/forms.md b/docs/themes/oscalkit/exampleSite/content/docs/forms.md new file mode 100644 index 00000000..20557931 --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/docs/forms.md @@ -0,0 +1,800 @@ ++++ +date = "2017-04-10T16:40:50+01:00" +title = "Forms" +draft = false +weight = 60 +description = "Rows and columns for all sorts of tables" +bref = 'Forms come in all forms and shapes in Kube, and you can do all sorts of things with them, especially when combining with custom plugins for extra interactivity. These forms are ideal building material for your awesome projects!' +toc = true ++++ + +

Base

+

This is the most basic form with all the basic inputs.

+
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
<form method="post" action="" class="form">
+
+    <div class="form-item">
+        <label>Email</label>
+        <input type="email" name="email" class="w50">
+    </div>
+
+    <div class="form-item">
+        <label>Country</label>
+        <select>
+            <option value="">---</option>
+        </select>
+    </div>
+
+    <div class="form-item">
+        <label class="checkbox"><input type="checkbox"> Check me</label>
+        <label class="checkbox"><input type="radio"> Radio me</label>
+    </div>
+
+    <div class="form-item">
+        <textarea rows="6"></textarea>
+    </div>
+
+    <div class="form-item">
+        <button>Log in</button>
+        <button class="button secondary outline">Cancel</button>
+    </div>
+
+</form>
+
+ +
+ +

Inputs

+

Here's a standard input field with type set as text. Label serves as input's label, and the following div with class desc serves as an optional description.

+
+
+
+ +
+ This information helps us deliver orders on time. +
+
+
+ 
<form class="form">
+    <div class="form-item">
+        <label>City</label>
+        <input type="text">
+        <div class="desc">...</div>
+    </div>
+</form>
+
+
+

Here are two text input fields, one with a placeholder and another one disabled, both set to be 6 grid columns wide.

+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ 
<form class="form">
+    <div class="row gutters">
+        <div class="col col-6">
+            <div class="form-item">
+                <input type="text" placeholder="Email">
+            </div>
+        </div>
+        <div class="col col-6">
+            <div class="form-item">
+                <input type="text" disabled="true" value="Disabled">
+            </div>
+        </div>
+    </div>
+</form>
+
+
+

Here's how you denote required fields with req class, and add descriptions to labels using span with class desc.

+
+
+
+
+
+ +
+
+
+
+ +
+ This information helps us deliver orders on time. +
+
+
+
+
+ 
<form class="form">
+    <div class="row gutters">
+        <div class="col col-6">
+            <div class="form-item">
+                <label>City <span class="req">*</span></label>
+                <input type="text">
+            </div>
+        </div>
+        <div class="col col-6">
+            <div class="form-item">
+                <label>City <span class="desc">...</span></label>
+                <input type="text">
+                <div class="desc">...</div>
+            </div>
+        </div>
+    </div>
+</form>
+
+
+ +
+
+
+ +
+
+ 
<form class="form">
+    <div class="form-item">
+        <input type="text" class="search">
+    </div>
+</form>
+
+
+

Checkboxes & Radio

+

Kube features full variety of stylish checkboxes and radio buttons. You can feature them on your pages by defining input type as checkbox or radio. There's also a neat option to place checkboxes inline by adding form-checkboxes class to the container (works for both checkboxes and radio buttons)

+
+
+ +
+ +
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item form-checkboxes">
+        <label class="checkbox"><input type="checkbox"> Check 1</label>
+        ...
+    </div>
+</form>
+
+
+
+
+ +
+ +
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item">
+        <label class="checkbox"><input type="checkbox"> Check 1</label>
+        ...
+    </div>
+</form>
+
+
+
+
+ +
+ +
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item form-checkboxes">
+        <label class="checkbox"><input type="radio"> Check 1</label>
+        ...
+    </div>
+</form>
+
+
+
+
+ +
+ +
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item">
+        <label class="checkbox"><input type="radio"> Check 1</label>
+        ...
+    </div>
+</form>
+
+
+

Fieldset

+

Fieldsets in Kube are nicely pre-formatted and ready to go. Just wrap your form in a fieldset tag and you're good to go.

+
+ +
+ Login data +
+ +
+
+ +
+
+ 
<fieldset>
+    <legend>Login data</legend>
+    <div class="form-item">
+        <label>Email</label>
+        <input type="email" name="user-email" class="w50">
+    </div>
+    <div class="form-item">
+        <label>Password</label>
+        <input type="password" name="user-password" class="w50">
+    </div>
+</fieldset>
+
+
+ About +
+ +
+
+ +
+
+
+
<fieldset>
+    <legend>About</legend>
+    <div class="form-item">
+        <textarea name="user-about" rows="5"></textarea>
+    </div>
+    <div class="form-item">
+        <button>Submit</button>
+    </div>
+</fieldset>
+
+

Small

+

Simple class .small makes your selects and fields, well, smaller.

+
+
+
+ +
+
+ +
+
+ 
<form class="form">
+    <div class="form-item">
+        <input type="text" class="small" placeholder="Title">
+    </div>
+    <div class="form-item">
+        <select class="small">
+            <option>...</option>
+        </select>
+    </div>
+</form>
+
+
+

Big

+

Simple class .big makes your selects and fields, well, bigger.

+
+
+
+ +
+
+ +
+
+ 
<form class="form">
+    <div class="form-item">
+        <input type="text" class="big" placeholder="Title">
+    </div>
+    <div class="form-item">
+        <select class="big">
+            <option>...</option>
+        </select>
+    </div>
+</form>
+
+
+

Width

+

Following framework-wide rules, it is very easy to manipulate form fields sizes. Just use w50 class to make a field 50% wide or w25 to a 25% wide.

+
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item">
+        <input type="text" class="w25">
+    </div>
+    <div class="form-item">
+        <input type="text" class="w50">
+    </div>
+    <div class="form-item">
+        <input type="text" class="w75">
+    </div>
+    <div class="form-item">
+        <input type="text" value="100% by default">
+    </div>
+</form>
+
+
+

States

+

By default, Kube features two different states: success and failure.

+
+
+ +
+ +
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item">
+        <label>Your height <span class="success">...</span></label>
+        <input type="text" class="success">
+    </div>
+</form>
+
+
+
+
+ +
+ +
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item">
+        <label>Enter your weight <span class="error">...</span></label>
+        <input type="text" class="error">
+    </div>
+</form>
+
+
+

Required

+

Along with making a field actually required, you can add a visual clue for the users using a span with req class.

+
+
+ +
+ +
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item">
+        <label>Email <span class="req">*</span></label>
+        <input type="email" name="user-email">
+    </div>
+</form>
+
+
+

Descriptions

+

Descriptions are simple: as long as form's element has desc class, Kube will treat it as a description.

+
+
+ +
+ +
+
+ +
+ Please enter your email. +
+
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item">
+        <label>Name <span class="desc">...</span></label>
+        <input type="text" name="user-name">
+    </div>
+    <div class="form-item">
+        <label>Email</label>
+        <input type="email" name="user-email">
+        <div class="desc">...</div>
+    </div>
+</form>
+
+
+

Disabled

+

Not only text inputs can be disabled, but checkboxes and radio buttons as well. Just add disabled attribute or .disabled class to the input.

+
+

+

+

+

+

+

+ 
<input type="text" value="" disabled>
+<input type="checkbox" class="disabled">
+<input type="radio" disabled>
+<textarea disabled></textarea>
+<select disabled>
+    <option>...</option>
+</select>
+
+
+

Append & Prepend

+

You can prepend or append certain elements within your input fields, such as currency characters.

+
+
+ +
+ +
+ $ +
+
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item">
+        <label>How much is it?</label>
+        <div class="prepend w50">
+            <span>$</span>
+            <input type="text">
+        </div>
+    </div>
+</form>
+
+
+
+
+ +
+ +
+ $ +
+
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item">
+        <label>It is much how?</label>
+        <div class="append">
+            <input type="text"><span>$</span>
+        </div>
+    </div>
+</form>
+
+
+

Button Append

+

Appending works for buttons as well. Here you can see a button that has been appended and included withing a text input field.

+
+
+ +
+ +
+ +
+
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item">
+        <label>Label</label>
+        <div class="append w50">
+            <input type="text" name="search" placeholder="Search">
+            <button class="button outline">Go</button>
+        </div>
+    </div>
+</form>
+
+
+

More Examples

+

The examples below are quite self explanatory and they cover multiple selections, selecting dates, filling in phone numbers, a ready feedback form template and more. Feel free to use any of these examples as templates for your sites.

+
+
+ +
+ +
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item">
+        <label>Select multiple</label>
+        <select class="w50" multiple="multiple" size="10">
+            <optgroup label="Group 1">
+                <option value="">...</option>
+            </optgroup>
+        </select>
+    </div>
+</form>
+
+
+
+
+ +
+
+
+ +
+ Month +
+
+
+
+
+ +
+ Day +
+
+
+
+
+ +
+ Year +
+
+
+
+
+ 
<form method="post" action="" class="form">
+    <label>Choose date</label>
+    <div class="row gutters">
+        <div class="col col-3">
+            <div class="form-item">
+                <select><option>---</option></select>
+                <div class="desc">Month</div>
+            </div>
+        </div>
+        <div class="col col-3">
+            <div class="form-item">
+                <select><option>---</option></select>
+                <div class="desc">Day</div>
+            </div>
+        </div>
+        <div class="col col-6">
+            <div class="form-item">
+                <select><option>---</option></select>
+                <div class="desc">Year</div>
+            </div>
+        </div>
+    </div>
+</form>
+
+
+
+
+ +
+ ( )  ext: +
+ Needed if there are questions about your order +
+
+
+ 
<form method="post" action="" class="form form-inline">
+    <div class="form-item">
+        <label>Phone number</label>
+        ( <input type="text" name="phone-prefix" size="3" class="small"> )
+        <input type="text" name="phone-number" class="small w50">
+        &nbsp;ext: <input type="text" name="phone-ext" size="3" class="small">
+        <div class="desc">...</div>
+    </div>
+</form>
+
+
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+
+ + +
+
+ 
<form method="post" class="form">
+    <div class="row gutters">
+        <div class="col col-6">
+            <div class="form-item">
+                <label>Email</label>
+                <input type="email">
+            </div>
+        </div>
+        <div class="col col-6">
+            <div class="form-item">
+                <label>Topic</label>
+                <select>
+                    <option value="">...</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    <div class="form-item">
+        <label>Message</label>
+        <textarea rows="6"></textarea>
+    </div>
+</form>
+
+
+
+
+ +
+
+
+ +
+ Where are you from? +
+
+
+
+
+ +
+
+
+
+ 
<form method="post" action="" class="form">
+    <div class="row gutters">
+        <div class="col col-6">
+            <div class="form-item">
+                <label>Country</label>
+                <select>
+                    <option>---</option>
+                </select>
+                <div class="desc">...</div>
+            </div>
+        </div>
+        <div class="col col-6">
+            <div class="form-item">
+                <label><br></label>
+                <button>Submit</button>
+            </div>
+        </div>
+    </div>
+</form>
+
+
+
+
+ +
+ + +
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item">
+        <label>Text</label>
+        <textarea rows="4"></textarea>
+    </div>
+</form>
+
+
+
+
+ +
+ + +
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item">
+        <label>Text</label>
+        <textarea rows="4" class="w50"></textarea>
+    </div>
+</form>
+
+
\ No newline at end of file diff --git a/docs/themes/oscalkit/exampleSite/content/docs/grid.md b/docs/themes/oscalkit/exampleSite/content/docs/grid.md new file mode 100644 index 00000000..f7506573 --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/docs/grid.md @@ -0,0 +1,588 @@ ++++ +draft = false +weight = 30 +description = "Flexible, fully responsive and ready to use" +title = "Grid" +bref = "Kube uses fully responsive, flexbox-enabled 12-column grid. You can combine or divide columns, nest them, center them horizontally or vertically, and do all sorts of things. Here are a few examples of what you can do with Kube's grid." +toc = true ++++ + +
+

Columns

+

Columns are building blocks for many websites. Here's how columns are formed in Kube, and here's how you can use them right away.

+
+
+
+ 1 +
+
+ 11 +
+
+
+
+ 2 +
+
+ 10 +
+
+
+
+ 3 +
+
+ 9 +
+
+
+
+ 4 +
+
+ 8 +
+
+
+
+ 5 +
+
+ 7 +
+
+
+
+ 6 +
+
+ 6 +
+
+
+
+ 7 +
+
+ 5 +
+
+
+
+ 8 +
+
+ 4 +
+
+
+
+ 9 +
+
+ 3 +
+
+
+
+ 10 +
+
+ 2 +
+
+
+
+ 11 +
+
+ 1 +
+
+
+
+ 12 +
+
+ 
<div class="row">
+    <div class="col col-4">...</div>
+    <div class="col col-8">...</div>
+</div>
+
+
+

Gutters

+
+
+
+ 3 +
+
+ 9 +
+
+ 
<div class="row gutters">
+    <div class="col col-3">...</div>
+    <div class="col col-9">...</div>
+</div>
+
+
+

Auto Width

+
+
+
+ auto +
+
+ auto +
+
+ auto +
+
+ 
<div class="row auto">
+    <div class="col">...</div>
+    <div class="col">...</div>
+    <div class="col">...</div>
+</div>
+
+
+
Auto + Gutters
+
+
+
+ auto +
+
+ auto +
+
+ auto +
+
+ auto +
+
+ 
<div class="row gutters auto">
+    <div class="col">...</div>
+    <div class="col">...</div>
+    <div class="col">...</div>
+    <div class="col">...</div>
+</div>
+
+
+

Bricks

+
+
+
+ 50% +
+
+ 50% +
+
+ 50% +
+
+ 50% +
+
+ 
<div class="row">
+    <div class="col col-6">...</div>
+    <div class="col col-6">...</div>
+    <div class="col col-6">...</div>
+    <div class="col col-6">...</div>
+</div>
+
+
+
Bricks + Gutters
+
+
+
+ 33% +
+
+ 33% +
+
+ 33% +
+
+ 33% +
+
+ 33% +
+
+ 33% +
+
+ 
<div class="row gutters">
+    <div class="col col-4">...</div>
+    <div class="col col-4">...</div>
+    <div class="col col-4">...</div>
+    <div class="col col-4">...</div>
+</div>
+
+
+

Offset

+

Offsetting columns is very simple in Kube. Just use column's class as usual, for example, col col-2 and then add the offset value offset-4. This will offset this column and all following columns by 4.

+
+
+
+ 2 +
+
+ 6 +
+
+ 
<div class="row">
+    <div class="col col-2">...</div>
+    <div class="col col-6 offset-4">...</div>
+</div>
+
+
+

Nested

+

Here's an example of nesting columns within columns. In this example, we have a single row, with two columns .col col-6, a div nested within the second column, with .row end class to denote where to inject nested columns, and the three nested columns.

+
+
+
+ 6 +
+
+
+
+ 4 +
+
+ 4 +
+
+ 4 +
+
+
+
+ 
<div class="row">
+    <div class="col col-6">...</div>
+    <div class="col col-6">
+        <div class="row">
+            <div class="col col-4">...</div>
+            <div class="col col-4">...</div>
+            <div class="col col-4">...</div>
+        </div>
+    </div>
+</div>
+
+
+

Equal Height Columns

+

Columns are equal height by default in Kube

+
+
+
+ 1 +
+
+ 1
+ 2
+ 3 +
+
+ 
<div class="row">
+    <div class="col col-6">
+        ...
+    </div>
+    <div class="col col-6">
+        ...
+        ...
+        ...
+    </div>
+</div>
+
+
+

Reordering

+
First
+
+
+
+ 4 +
+
+ 8 +
+
+ 
<div class="row">
+    <div class="col col-4">...</div>
+    <div class="col col-8 first">...</div>
+</div>
+
+
+
Last
+
+
+
+ 3 +
+
+ 9 +
+
+ 
<div class="row">
+    <div class="col col-3 last">...</div>
+    <div class="col col-9">...</div>
+</div>
+
+
+

Around

+

When you want your columns to be surrounded by an even margins on both sides, just use .around class.

+
+
+
+ 3 +
+
+ 3 +
+
+ 3 +
+
+ 
<div class="row around">
+    <div class="col col-3">...</div>
+    <div class="col col-3">...</div>
+    <div class="col col-3">...</div>
+</div>
+
+
+

Between

+

Sometime you just need space between columns, and not around them. Well, there's a class for that: .between

+
+
+
+ 3 +
+
+ 3 +
+
+ 3 +
+
+ 
<div class="row between">
+    <div class="col col-3">...</div>
+    <div class="col col-3">...</div>
+    <div class="col col-3">...</div>
+</div>
+
+
+

Alignment

+
Align Center
+
+
+
+ 6 +
+
+ 
<div class="row align-center">
+    <div class="col col-6">...</div>
+</div>
+
+
+
Align Right
+
+
+
+ 3 +
+
+ 3 +
+
+ 
<div class="row align-right">
+    <div class="col col-3">...</div>
+    <div class="col col-3">...</div>
+</div>
+
+
+
Align Middle
+
+
+
+ 4 +
+
+ 4 +
+
+ 4 +
+
+ 
<div class="row align-middle">
+    <div class="col col-4">...</div>
+    <div class="col col-4">...</div>
+    <div class="col col-4">...</div>
+</div>
+
+
+

Push

+
Push Center
+
+
+
+ .push-center +
+
+ 
<div class="row">
+    <div class="col col-4 push-center">...</div>
+</div>
+
+
+
Push Right
+
+
+
+ ... +
+
+ .push-right +
+
+ 
<div class="row">
+    <div class="col col-6">...</div>
+    <div class="col col-4 push-right">...</div>
+</div>
+
+
+
Push Middle
+
+
+
+ .push-middle +
+
+ 
<div class="row">
+    <div class="col col-8 push-middle">...</div>
+</div>
+
+
+
Push Mixed
+
+
+
+ .push-middle.push-center +
+
+ 
<div class="row">
+    <div class="col col-8 push-middle push-center">...</div>
+</div>
+
+
+
Push Bottom
+
+
+
+ .push-bottom +
+
+ 
<div class="row">
+    <div class="col col-8 push-bottom">...</div>
+</div>
+
+
+

Fixed Width Column

+

Here's one more bit of magic. You can set a fixed width column and still have a responsive and flexible layout right beside this fixed width column.

+
+
+
+ sidebar +
+
+ content +
+
+ 
<!-- scss -->
+#container {
+    @include grid-row;
+}
+#sidebar {
+    @include flex-item-width(300px);
+}
+#content {
+    @include flex-item-auto;
+}
+
+<!-- html -->
+<div id="container">
+    <div id="sidebar">Sidebar</div>
+    <div id="content">Content</div>
+</div>
+
+
+
+

Media Grid

+

Media grid is a great example of Kube's flexibility and versatility. Whenever you have some media to display, you can choose to use Media grid. This type of grid is ideal for featuring photos; it adds some visual music and slight randomness to your layout.

+
+
+
+ 1 +
+
+ 2 +
+
+ 3 +
+
+ 4 +
+
+ 5 +
+
+ 6 +
+
+ 7 +
+
+ 8 +
+
+ 9 +
+
+ 10 +
+
+ 
<!-- scss -->
+#media-grid {
+
+    @include grid-media-columns(2);
+
+    & > div {
+        margin-bottom: 20px;
+        height: 80px;
+    }
+    & > div:nth-child(2n) {
+      height: 200px;
+    }
+    & > div:nth-child(5n) {
+      height: 120px;
+    }
+}
+
+<!-- html -->
+<div id="media-grid">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+  <div>6</div>
+  <div>7</div>
+  <div>8</div>
+  <div>9</div>
+  <div>10</div>
+</div>
+
+
+
diff --git a/docs/themes/oscalkit/exampleSite/content/docs/labels.md b/docs/themes/oscalkit/exampleSite/content/docs/labels.md new file mode 100644 index 00000000..2069ff69 --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/docs/labels.md @@ -0,0 +1,51 @@ ++++ +date = "2017-04-10T16:40:43+01:00" +title = "Labels" +draft = false +weight = 80 +description = "Label things with all sorts of labels" +bref = "Labels have all standard Kube styling options available: outline, states (success, error, warning), inverted color, and more. You can also customize labels to your requirements, and place them inside other elements, such as buttons, for example" +toc = true ++++ + +

Base

+
+ Default   Success   Error   Warning   Focus   Black   Inverted +
+

Outline

+
+ Default   Success   Error   Warning   Focus   Black   Inverted +
+

Upper

+
+ Default   Success   Error   Warning   Focus   Black   Inverted +
+

Tag

+
+ Default   Success   Error   Warning   Focus   Black   Inverted +
+

Badges

+

Labels are ideal for use as badges with badge class.

+
+ 1 2 3 4 5 6 7 +
+

Outline Badges

+
+ 1 2 3 4 5 6 7 +
+

Custom

+

You can use mixins to customize your labels and badges.

+
+ Label   1   Tag + 
<!-- scss -->
+.label.custom {
+    // $text-color, $back-color
+    @include label(#fff, #ea48a7);
+}
+
+<!-- html -->
+<span class="label custom">Label</span>
+<span class="label badge custom">1</span>
+<span class="label tag custom">Tag</span>
+
+
\ No newline at end of file diff --git a/docs/themes/oscalkit/exampleSite/content/docs/messages.md b/docs/themes/oscalkit/exampleSite/content/docs/messages.md new file mode 100644 index 00000000..11bc2ec5 --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/docs/messages.md @@ -0,0 +1,159 @@ ++++ +date = "2017-04-10T16:41:34+01:00" +draft = false +weight = 90 +description = "Versatile and refined messages, ideal for daily use" +title = "Messages" +bref = "Messages are an essential part of modern web, and they can provide invaluable feedback to the users. Messages in Kube look nice, they are informative, simple and very easy to set up to whatever requirements you may have, style-wise or otherwise. Take a div, give it an message class, add a color using meaningful classes like error or success and you're practically done!" +toc = true ++++ + +

Usage

+
+
+ You have 2 modules waiting to installation. Install +
+ 
<div class="message" data-component="message"> ...  <span class="close small"></span></div>
+
+
+
+ You have 2 modules waiting to installation. Install +
+ 
<div class="message error" data-component="message"> ...  <span class="close small"></span></div>
+
+
+
+ You have 2 modules waiting to installation. Install +
+ 
<div class="message success" data-component="message"> ...  <span class="close small"></span></div>
+
+
+
+
Warning!
You have 2 modules waiting to installation. Install +
+ 
<div class="message warning" data-component="message">
+    <h5>...</h5>
+    ...
+    <span class="close small"></span>
+</div>
+
+
+
+
+ You have 2 modules waiting to installation. Install +
+ 
<div class="message focus" data-component="message"> ...  <span class="close small"></span></div>
+
+
+
+ You have 2 modules waiting to installation. Install +
+ 
<div class="message black" data-component="message"> ...  <span class="close small"></span></div>
+
+
+
+ You have 2 modules waiting to installation. Install +
+ 
<div class="message inverted" data-component="message"> ...  <span class="close small"></span></div>
+
+

Options

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault
closeSelectorstring.close
closeEventstringclick
animationOpenstringfadeIn
animationClosestringfadeOut
+

Set an option

+

Via data attribute:

+
<div class="message" data-component="message" data-close-selector=".my-custom-close">
+    ... <span class="my-custom-close small"></span>
+</div>
+
+

Via Javascript:

+
$('#my-message').message({
+    closeSelector: '.my-custom-close'
+});
+
+

Methods

+

+
+ You have 2 modules waiting to installation. Install +
+ + + + + + + + + + + + + + + + + +
MethodDescription
closeManually closes a message.
openOpens a message if it has been closed.
+

Example

+
$('#my-message').message('close');
+

Callbacks

+ + + + + + + + + + + + + + + + + + + + + + + + + +
CallbackDescription
openThis event fires immediately when the open instance method is called.
openedThis event is fired when the message has been opened, will wait for CSS animation to complete.
closeThis event fires immediately when the close instance method is called.
closedThis event is fired when the message has been closed, will wait for CSS animation to complete.
+

Example

+
$('#my-message').on('closed.message', function()
+{
+    // do something
+})
+
diff --git a/docs/themes/oscalkit/exampleSite/content/docs/mixins.md b/docs/themes/oscalkit/exampleSite/content/docs/mixins.md new file mode 100644 index 00000000..70a3b932 --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/docs/mixins.md @@ -0,0 +1,268 @@ ++++ +weight = 230 +description = "Mixins save countless hours and bring results faster" +date = "2017-04-10T16:43:36+01:00" +title = "Mixins" +draft = false +bref="Mixins are a great way to produce things and effects way faster with Sass then with pure CSS. Kube has a lot to offer in this respect; feel free to use any of these mixins with any Kube components." +toc = true ++++ + +

Get Started

+

Kube has been designed to help you with web development, that's why it's so easy to use Kube when building websites. To move forward quickly and efficiently, just link kube.scss from Kube package: this file contains variables, mixins and everything you need to simplify daily routine tasks.

+

For example, import kube.scss into your master.scss styles file, which you will later compile into master.css

+
// master.scss
+@import "dist/scss/kube.scss";
+
+

Now all Kube's variables and mixins are readily available in master.scss, and you can use them whenever needed.

+
// master.scss
+@import "dist/scss/kube.scss";
+
+// use mixins
+#my-layout {
+    @include flex;
+}
+
+// use variables
+#my-layout {
+    padding: $base-line;
+}
+
+

Fonts

+

Generates a font-family declarations for text, headings, buttons or inputs.

+
// import Kube
+@import "dist/scss/kube.scss";
+
+// use mixins
+@include text-font("Lato, 'Helvetica Neue', sans-serif");
+@include headings-font("Lato, 'Helvetica Neue', sans-serif");
+@include buttons-font("Lato, 'Helvetica Neue', sans-serif");
+@include inputs-font("Lato, 'Helvetica Neue', sans-serif");
+
+

CSS Output

+
// Text
+body {
+    font-family: Lato, 'Helvetica Neue', sans-serif;
+}
+
+// Headings
+h1.title, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+    font-family: Lato, 'Helvetica Neue', sans-serif;
+}
+
+// Buttons
+button, .button {
+    font-family: Lato, 'Helvetica Neue', sans-serif;
+}
+
+// Inputs
+input, textarea, select {
+    font-family: Lato, 'Helvetica Neue', sans-serif;
+}
+
+

Breakpoints

+

Breakpoint for small screens (max-width 768px by default).

+
@include breakpoint(sm) {
+    .span {
+        display: none;
+    }
+}
+
+

Breakpoint for medium screens (min-width 1024px by default).

+
@include breakpoint(md) {
+    .span {
+        display: none;
+    }
+}
+
+

Breakpoint for large screens (min-width 1200px by default).

+
@include breakpoint(lg) {
+    .span {
+        display: none;
+    }
+}
+
+

Custom breakpoints:

+
// min-width 768px;
+@include breakpoint(768px) {}
+
+// min-width 768px and max-width 1024px;
+@include breakpoint(768px, 1024px) {}
+
+// max-width 1024px;
+@include breakpoint(0, 1024px) {}
+
+

Grid

+
Row
+

Generates a grid row.

+
.my-row {
+    @include grid-row;
+}
+
+

CSS Output

+
.my-row {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+
+    -ms-flex-direction: row;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+
+    -ms-flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+}
+
+
Media Grid
+

Generates a media grid. See live example.

+
.my-media-grid {
+    @include grid-media-columns(3);
+}
+
+

CSS Output

+
.my-media-grid {
+    -webkit-column-count: 3;
+    -moz-column-count: 3;
+    column-count: 3;
+
+    // column gap is specified
+    // in the grid settings (variables.scss) as $grid-gutter
+    -webkit-column-gap: 2%;
+    -moz-column-gap: 2%;
+    column-gap: 2%;
+}
+
+.my-media-grid > div {
+    display: inline-block;
+    width: 100%;
+}
+
+@media (max-width: 768px) {
+    .my-media-grid {
+        -webkit-column-count: 1;
+        -moz-column-count: 1;
+        column-count: 1;
+    }
+}
+
+

Flex

+
@include flex;
+@include flex-basis($basis);
+
+// items
+@include flex-items-wrap;
+@include flex-items-nowrap;
+@include flex-items-row
+@include flex-items-column;
+@include flex-items-left;
+@include flex-items-right;
+@include flex-items-center;
+@include flex-items-space-between;
+@include flex-items-space-around;
+@include flex-items-top;
+@include flex-items-middle;
+@include flex-items-bottom;
+
+// item
+@include flex-item-grow($grow);
+@include flex-item-auto;
+@include flex-item-one;
+@include flex-item-shrink($shrink);
+@include flex-item-width($width);
+
+

Gradients

+
Vertical
+
@include gradient-vertical($startColor, $endColor);
+
+
@include gradient-vertical-to-opacity($startColor, $opacity);
+
+
Horizontal
+
@include gradient-horizontal($startColor, $endColor);
+
+
@include gradient-horizontal-to-opacity($startColor, $opacity);
+
+
Radial
+
@include gradient-radial($innerColor, $outerColor);
+
+

Utils

+
Clearfix
+

Provides an easy way to include a clearfix for containing floats.

+
.layout {
+    @include clearfix;
+}
+
+

CSS Output

+
.layout:after {
+    content: '';
+    display: table;
+    clear: both;
+}
+
+
Transition
+

This mixin provides a shorthand syntax for transitions.

+
// by default 'all linear .2s'
+@include transition;
+
+// custom transitions
+@include transition(all .2s ease-in-out);
+@include transition(opacity 1s ease-in, width .2s ease-in);
+
+
Transform
+

Provides a shorthand syntax for transforms.

+
.span {
+    @include transform(rotate(90deg));
+}
+
+

CSS Output

+
.span {
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+}
+
+
Blur
+

Provides a shorthand syntax for blur filter.

+
.span {
+    @include blur(5px);
+}
+
+

CSS Output

+
.span {
+    -webkit-filter: blur(5px);
+    -moz-filter: blur(5px);
+    -ms-filter: blur(5px);
+    filter: blur(5px);
+}
+
+
Retina Image
+

Retina image must have a suffix -2x, for example: image-2x.jpg

+
@include retina-background-image($image-url, $image-type, $image-width, $image-height);
+
+// $image-type - jpg, png, gif
+// $image-height - optional
+
+

Example:

+
.brand {
+    @include retina-background-image('../logo', 'png', 100px);
+}
+
+

CSS Output

+
.brand {
+    background-repeat: no-repeat;
+    background-image: url("../logo.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2),
+       only screen and (min--moz-device-pixel-ratio: 2),
+       only screen and (-o-min-device-pixel-ratio: 2 / 1),
+       only screen and (min-device-pixel-ratio: 2),
+       only screen and (min-resolution: 192dpi),
+       only screen and (min-resolution: 2dppx)
+       {
+            .brand {
+                background-image: url("../logo-2x.png");
+                background-size: 100px auto;
+            }
+       }
+
\ No newline at end of file diff --git a/docs/themes/oscalkit/exampleSite/content/docs/modal.md b/docs/themes/oscalkit/exampleSite/content/docs/modal.md new file mode 100644 index 00000000..1321b831 --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/docs/modal.md @@ -0,0 +1,189 @@ ++++ +title = "Modal" +draft = false +weight = 150 +date = "2017-04-10T16:42:18+01:00" +description = "Clean, functional, and extensible modal window dialogs" +bref="Modal windows are used for various reasons and purposes. Kube makes the way you design and operate modal windows very straightforward. First, you set a div which will represent the content of the modal window, then you set up a way to open and close this window, and finally you add a way to call the modal from the page" +toc = true ++++ + +

Calling

+

Here you add an actual call to the modal window. Clicking the "Open" button below will launch a modal with content of a #my-modal div. You can use buttons or links to open modals in Kube. Clicking anywhere outside of the modal or hitting ESC will close the window.

+
+

+ 
// Call
+<button data-component="modal" data-target="#my-modal">Open</button>
+
+// Markup
+<div id="my-modal" class="modal-box hide">
+    <div class="modal">
+        <span class="close"></span>
+        <div class="modal-header">Modal Header</div>
+        <div class="modal-body">...</div>
+    </div>
+</div>
+
+
+

Open from url

+
+

+ 
// Call
+<button data-component="modal" data-target="#ui-modal" data-url="modal.html">Open</button>
+
+// Markup
+<div id="ui-modal" class="modal-box hide">
+    <div class="modal">
+        <span class="close"></span>
+        <div class="modal-header">UI Modal</div>
+        <div class="modal-body">... content from modal.html ...</div>
+    </div>
+</div>
+
+// modal.html
+<p>...</p>
+<a href="#" data-action="modal-close">Close</a>
+
+
+

Direct open

+
+

+ 
// Call
+<button onclick="$.modalwindow({ target: '#ui-modal', url: 'modal.html' });">Open</button>
+
+
+ + +

Actions

+

Using modal-close action you now introducing a way to close you window, using a link or a button.

+
<div id="my-modal" class="modal-box hide">
+    <div class="modal">
+        <span class="close"></span>
+        <div class="modal-header">Modal Header</div>
+        <div class="modal-body">
+            ...
+            <a href="#" data-action="modal-close">Close</a>
+        </div>
+    </div>
+</div>
+
+

Settings

+
target
+ +

Defines a content layer for the modal window

+
url
+ +

Defines a URL in case your modal is opening via a URL.

+
header
+ +

Sets the header for the modal window. Optional, and is false by default.

+
width
+ +
height
+ +
maxHeight
+ +

This setting defines the maximum height of the window. A scrollbar will be introduced in case there's more text than maxHeight can accommodate.

+
position
+ +

This is where your modal appears when opened.

+
overlay
+ +

When this is set to false, you modal window will just appear on top ow your page, without an overlay effect. By default, your page will be "covered" with a semi-transparent layer when you open a modal.

+
animation
+ +

Turns opening and closing animation on and off.

+

Callbacks

+
open
+
$('#my-modal').on('open.modal', function()
+{
+    // do something...
+});
+
+
opened
+
$('#my-modal').on('opened.modal', function()
+{
+    // do something...
+});
+
+
close
+
$('#my-modal').on('close.modal', function()
+{
+    // do something...
+});
+
+
closed
+
$('#my-modal').on('closed.modal', function()
+{
+    // do something...
+});
+
+

API

+

You can use these API methods to programmatically operate and modify modal windows.

+
close
+
$('#my-modal').modal('close');
+
+
setHeader
+
$('#my-modal').modal('setHeader', 'My Header');
+
+

This is another way to set a header for the modal on the fly without introducing a div with a modal-header class.

+
setContent
+
$('#my-modal').modal('setContent', 'My Content');
+
+

Content of the modal window can be set up on the fly as well. No need for a div with modal class.

+
setWidth
+
$('#my-modal').modal('setWidth', '800px');
+
\ No newline at end of file diff --git a/docs/themes/oscalkit/exampleSite/content/docs/offcanvas.md b/docs/themes/oscalkit/exampleSite/content/docs/offcanvas.md new file mode 100644 index 00000000..37ed858a --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/docs/offcanvas.md @@ -0,0 +1,140 @@ ++++ +date = "2017-04-10T16:42:43+01:00" +draft = false +weight = 180 +description = "Navigation, menus and content sliding from outside the page" +title = "Offcanvas" +bref="Offcanvas makes it look like a menu is sliding from the outside of the page. This may be useful in many different cases, one of them being when you need to save space on screen and don't have to display sidebar at all times" +toc= true ++++ + +

Demo

+

This feature is very easy to set up. It is based on data-component set to offcanvas, data-target set to the menu layer (#offcanvas-right in example below) and a feature-specific data-direction which is required for right menu to be set to right.

+

Open Left Open Right

+
+ +
+
+ + +
+
// Left
+<a href="#" data-component="offcanvas" data-target="#offcanvas-left">Open Left</a>
+
+<div id="offcanvas-left" class="hide">
+    <nav>
+        <ul>
+            <li>...</li>
+        </ul>
+    </nav>
+</div>
+
+// Right + Close
+<a href="#" data-component="offcanvas" data-target="#offcanvas-right" data-direction="right">Open Right</a>
+
+<div id="offcanvas-right" class="hide">
+    <a href="#" class="close"></a>
+    <nav>
+        <ul>
+            <li>...</li>
+        </ul>
+    </nav>
+</div>
+
+

Settings

+
target
+ +

Sets ID selector of an element that will slide from the side.

+
push
+ +
direction
+ +

The direction in which page will shift to give way for the sidebar menu. Default is left and is not required for left-side navigation, however, right value must be set for the right-side menu to work.

+
clickOutside
+ +

Unless set to false, clicking anywhere on a page will make side menu to close.

+
width
+ +

Sidebar width in pixels.

+
animation
+ +

Setting this to false turns off opening and closing animation.

+

Callbacks

+
open
+
$('#my-offcanvas').on('open.offcanvas', function()
+{
+    // do something...
+});
+
+
opened
+
$('#my-offcanvas').on('opened.offcanvas', function()
+{
+    // do something...
+});
+
+
close
+
$('#my-offcanvas').on('close.offcanvas', function()
+{
+    // do something...
+});
+
+
closed
+
$('#my-offcanvas').on('closed.offcanvas', function()
+{
+    // do something...
+});
+
\ No newline at end of file diff --git a/docs/themes/oscalkit/exampleSite/content/docs/pagination.md b/docs/themes/oscalkit/exampleSite/content/docs/pagination.md new file mode 100644 index 00000000..e5a3d051 --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/docs/pagination.md @@ -0,0 +1,196 @@ ++++ +date = "2017-04-10T16:42:03+01:00" +draft = false +weight = 130 +description = "Various flexible pagination options for your site" +title = "Pagination" +bref= "Default pagination in Kube is organized using lists, with visual cues for the user what is the current page, and page numbers for easier navigation. Pagination buttons and multiline formats are available out-of-the-box as well" +toc =true ++++ + +

Base

+
+ + 
<nav class="pagination">
+    <ul>
+        <li class="prev"><a href="">&larr;</a></li>
+        <li>
+            <ul>
+                <li><span>...</span></li>
+                <li><a href="">...</a></li>
+            </ul>
+        </li>
+        <li class="next"><a href="">&rarr;</a></li>
+    </ul>
+</nav>
+
+
+

Centered

+
+ + 
<nav class="pagination align-center">
+    <ul>
+        <li class="prev"><a href="">&larr;</a></li>
+        <li>
+            <ul>
+                <li class="active"><a href="#">...</a></li>
+                <li><a href="">...</a></li>
+            </ul>
+        </li>
+        <li class="next"><a href="">&rarr;</a></li>
+    </ul>
+</nav>
+
+
+

Wide

+

Here you can see an example where previous and next buttons are aligned to the left and to the right, with a link in the center of the page.

+
+ + 
<nav class="pagination align-center upper strong">
+    <ul>
+        <li class="prev"><a href="">&lt; Prev</a></li>
+        <li class="w100">
+            <ul>
+                <li><a href="">...</a></li>
+            </ul>
+        </li>
+        <li class="next"><a href="">Next &gt;</a></li>
+    </ul>
+</nav>
+
+
+

Pager

+
+ + 
<nav class="pagination pager">
+    <ul>
+        <li class="prev"><a href="">Previous</a></li>
+        <li class="next"><a href="">Next</a></li>
+    </ul>
+</nav>
+
+
+
+ + 
<nav class="pagination pager align-center">
+    <ul>
+        <li class="prev"><a href="">Previous</a></li>
+        <li class="next"><a href="">Next</a></li>
+    </ul>
+</nav>
+
+
+

Elements within a single list item can be stacked to create a clean and intuitive pagination elements.

+
+ + 
<nav class="pagination pager flat">
+    <ul>
+        <li class="prev">
+            <span class="label tag">Prev</span>
+            <a href="">...</a>
+        </li>
+        <li class="next">
+            <span class="label tag">Next</span>
+            <a href="">...</a>
+        </li>
+    </ul>
+</nav>
+
+
\ No newline at end of file diff --git a/docs/themes/oscalkit/exampleSite/content/docs/quick-start.md b/docs/themes/oscalkit/exampleSite/content/docs/quick-start.md new file mode 100644 index 00000000..dc75490c --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/docs/quick-start.md @@ -0,0 +1,81 @@ ++++ +title = "Quick Start" +description = "Up and running in under a minute" +weight = 10 +draft = false +toc = true +bref = "As a complete and self-sufficient web framework, Kube is here to help you get the most out of your daily work. Kube takes care of routine stuff, saving you precious time for things that you love. Starting up with Kube is ridiculously fast you can start in under a minute. Here's how to set up Kube, and what basic customization are available out-of-the-box." ++++ + +

Basic Template

+ +

With Kube, you can set up your web framework and be on your way in under a minute. Just add this code to your web page for the basic template to take effect immediately.

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <title>Basic Template</title>
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Kube CSS -->
+    <link rel="stylesheet" href="assets/css/kube.css">
+
+</head>
+<body>
+    <h1>Hello, world!</h1>
+
+    <!-- Kube JS + jQuery are used for some functionality, but are not required for the basic setup -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+    <script src="assets/js/kube.js"></script>
+</body>
+</html>
+ + +

Supported Browsers

+ +

Kube supports the latest, stable releases of all major browsers:

+ + + +

Development with Kube

+ +

Kube has been designed to help you with web development, that's why it's so easy to use Kube when building websites. To move forward quickly and efficiently, just link kube.scss from Kube package: this file contains variables, mixins and everything you need to simplify daily routine tasks. +

+ +

+ For example, import kube.scss into your master.scss styles file, which you will later compile into master.css: +

+ +
// master.scss
+@import "dist/scss/kube.scss";
+ +

+ Now all Kube's variables and mixins are readily available in master.scss, + and you can use them whenever needed. For instance, here's how one of examples: +

+ +
// master.scss
+@import "dist/scss/kube.scss";
+
+#sidebar {
+    @include flex-item-width(200px);
+}
+ +

Also, you could use settings from variables.scss:

+ + +
// master.scss
+@import "dist/scss/kube.scss";
+
+#my-layout {
+    padding: $base-line;
+}
diff --git a/docs/themes/oscalkit/exampleSite/content/docs/sizing.md b/docs/themes/oscalkit/exampleSite/content/docs/sizing.md new file mode 100644 index 00000000..be164b99 --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/docs/sizing.md @@ -0,0 +1,99 @@ ++++ +title = "Sizing" +date = "2017-04-10T16:43:21+01:00" +draft = false +weight = 220 +description = "Helper tools for elements width and height" +bref="Helper tools for elements width and height." +toc = true ++++ + +

Width

+
+
+ w5 +
+
+ w10 +
+
+ w15 +
+
+ w20 +
+
+ w25 +
+
+ w30 +
+
+ w35 +
+
+ w40 +
+
+ w45 +
+
+ w50 +
+
+ w55 +
+
+ w60 +
+
+ w65 +
+
+ w70 +
+
+ w75 +
+
+ w80 +
+
+ w85 +
+
+ w90 +
+
+ w95 +
+
+ w100 +
+ 
<div class="w5">w5</div>
+...
+<div class="w100">w100</div>
+
+
+
+

100% width on small devices.

+
+ w100-sm +
+ 
<div class="w50 w100-sm">...</div>
+
+
+

Auto Width

+
+ .w-auto
+ .w-auto-sm +
+

Max Width

+
+ .max-w5 — .max-w100
+ .max-w-auto-sm +
+

Min Width

+
+ .min-w5 — .min-w100 +
diff --git a/docs/themes/oscalkit/exampleSite/content/docs/sticky.md b/docs/themes/oscalkit/exampleSite/content/docs/sticky.md new file mode 100644 index 00000000..9779ed53 --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/docs/sticky.md @@ -0,0 +1,66 @@ ++++ +date = "2017-04-10T16:42:26+01:00" +title = "Sticky" +draft = false +weight = 160 +description = "Make navigation menus stick to the top on scroll" +bref="Sticky navigation makes it easy to affix menus to the top of the page whenever a user scrolls the page down. This could be very helpful and useful on long pages. Sticky is disabled on mobile devices to avoid unwanted content overlaps and to preserve valuable screen real estate" +toc = true ++++ + +

Demo

+

Scroll down to fix the navigation.

+ +
<div data-component="sticky">...</div>
+
+

Settings

+
offset
+ +

Sets top offset in pixels when navigation is fixed.

+

Callbacks

+
fixed
+

Using this callback, you can act upon menu becoming fixed at the top of the page.

+
$('#my-nav').on('fixed.sticky', function()
+{
+    // do something...
+});
+
+
unfixed
+

Whenever fixed position of the menu is released, you can do something with this callback.

+
$('#my-nav').on('unfixed.sticky', function()
+{
+    // do something...
+});
+

+
+

Some scrollable material

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

\ No newline at end of file diff --git a/docs/themes/oscalkit/exampleSite/content/docs/tables.md b/docs/themes/oscalkit/exampleSite/content/docs/tables.md new file mode 100644 index 00000000..0bc6c26b --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/docs/tables.md @@ -0,0 +1,196 @@ ++++ +date = "2017-04-10T16:40:43+01:00" +title = "Tables" +draft = false +weight = 50 +description = "Rows and columns for all sorts of tables" +toc = true +bref = "Tables are an essential part of many different contexts. Kube serves them all and delivers full variety of tables, preformatted to save you time. Whatever your requirements are, tables are completely customizable to match them." ++++ + +

Base

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
First NameLast NamePoints
JillSmith50
EveJackson94
Total points223
+ 
<table>...</table>
+
+

Bordered

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
First NameLast NamePoints
JillSmith50
EveJackson94
Total points223
+ 
<table class="bordered">...</table>
+
+

Striped

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
First NameLast NamePoints
JillSmith50
EveJackson94
Total points223
+ 
<table class="striped">...</table>
+
+

Unstyled

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
First NameLast NamePoints
JillSmith50
EveJackson94
Total points223
+ 
<table class="unstyled">...</table>
+
+

Mixed

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
First NameLast NamePoints
JillSmith50
EveJackson94
Total points223
+ 
<table class="bordered striped">...</table>
+
+

Width

+
+ + + + + + + + + + + + + + + + + + + + +
First NameLast NamePoints
JillSmith50
EveJackson94
+ 
<table>
+<tr>
+    <td class="w40">...</td>
+    <td class="w40">...</td>
+    <td class="w20">...</td>
+</tr>
+</table>
+
\ No newline at end of file diff --git a/docs/themes/oscalkit/exampleSite/content/docs/tabs.md b/docs/themes/oscalkit/exampleSite/content/docs/tabs.md new file mode 100644 index 00000000..95b6e231 --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/docs/tabs.md @@ -0,0 +1,286 @@ ++++ +title = "Tabs" +date = "2017-04-10T16:41:40+01:00" +draft = false +weight = 100 +description = "User-friendly navigation for your content or app" +bref= "Tabs in Kube are crafted the way one would expect from the world's best CSS framework. With versatile API, wide range of settings an options, with callbacks and live examples. Take a look!" +toc= true ++++ + +

Base

+

Here's an example of basic tabs setup. Tabs bar is an unordered list, and each tab in tabs bar is a list item. For each tab there's a corresponding div, which contains the body of the tab (it can be any kind of HTML).

+
+ +
+
Home
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+
Shop
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+
Catalog
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+
T-Shirts
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+
Brand
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+ 
<nav class="tabs" data-component="tabs">
+    <ul>
+        <li class="active"><a href="#tab1">...</a></li>
+        <li><a href="#tab2">...</a></li>
+    </ul>
+</nav>
+
+<div id="tab1">...</div>
+<div id="tab2">...</div>
+
+
+

JavaScript behavior

+

Tabs are interactive elements, and can be opened, closed, switched, destroyed and selected programmatically via JavaScript. Try this example, poke around and then have a look at the self-explanatory code example below.

+
+


+ +
+
Home
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+
Shop
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+
Catalog
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+
T-Shirts
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+
Brand
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+ 
<button onclick="$('#tabs').tabs('destroy');">destroy</button>
+<button onclick="$('#tabs').tabs('prev');">prev</button>
+<button onclick="$('#tabs').tabs('next');">next</button>
+<button onclick="$('#tabs').tabs('open', 4);">open</button>
+<button onclick="$('#tabs').tabs('close', '#tab4');">close</button>
+<button onclick="$('#tabs').tabs('closeAll');">closeAll</button>
+
+<nav id="tabs" class="tabs" data-component="tabs">
+    <ul>
+        <li><a href="#tab1">Home</a></li>
+        <li class="active"><a href="#tab2">Shop</a></li>
+        <li><a href="#tab3">Catalog</a></li>
+        <li><a href="#tab4">T-Shirts</a></li>
+        <li><a href="#tab5">Brand</a></li>
+    </ul>
+</nav>
+
+<div id="tab1">...</div>
+<div id="tab2">...</div>
+<div id="tab3">...</div>
+<div id="tab4">...</div>
+<div id="tab4">...</div>
+
+
+

Equals

+

Often it is important to create tabs that are equal in width regardless of content. data-equals is here to help you with this task.

+
+ +
+
Tab 1
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+
Tab 2
+

...

+
+ 
<nav class="tabs" data-component="tabs" data-equals="true">
+    <ul>
+        <li class="active"><a href="#tab1">...</a></li>
+        <li><a href="#tab12">...</a></li>
+    </ul>
+</nav>
+
+<div id="tab1">...</div>
+<div id="tab2">...</div>
+
+
+

Livetabs

+

Livetabs provide a very seamless and smooth experience by blending content and tabs in this kind of live manner. Set up data-live class, and make sure your tabs have this same class. It's that simple.

+
+ +
+
General
+

This is very General Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+
Additional
+

Quite an additional is displayed here: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+ 
<nav id="livetabs" data-component="tabs" data-live=".tab-live"></nav>
+
+<div id="tab-general" data-title="General" class="tab-live">...</div>
+<div id="tab-additional" data-title="Additional" class="tab-live">...</div>
+
+
+

Active

+

To denote active tab, and to let users know where they are, use class active.

+
<nav class="tabs">
+    <ul>
+        <li><a href="">...</a></li>
+        <li class="active"><a href="">...</a></li>
+        <li><a href="">...</a></li>
+    </ul>
+</nav>
+
+

Settings

+
equals
+ +

Making all tabs in a set equal width

+
active
+ +

Responsible for denoting active tab.

+
live
+ +

Responsible for live tabs (see Livetabs example)

+
hash
+ +

This will add a hash and an ID to the URL.

+

Callbacks

+
init
+
$('#tabs').on('init.tabs', function()
+{
+    // do something...
+});
+
+
next
+
$('#tabs').on('next.tabs', function($item)
+{
+    // do something...
+});
+
+
prev
+
$('#tabs').on('prev.tabs', function($item)
+{
+    // do something...
+});
+
+
open
+
$('#tabs').on('open.tabs', function()
+{
+    // do something...
+});
+
+
opened
+
$('#tabs').on('opened.tabs', function()
+{
+    // do something...
+});
+
+
close
+
$('#tabs').on('close.tabs', function()
+{
+    // do something...
+});
+
+
closed
+
$('#tabs').on('closed.tabs', function()
+{
+    // do something...
+});
+
+

API

+
open
+
$('#tabs').tabs('open', 1);
+
+// or
+
+$('#tabs').tabs('open', '#tab1');
+
+
close
+
$('#tabs').tabs('close', 1);
+
+// or
+
+$('#tabs').tabs('close', '#tab1');
+
+
closeAll
+
$('#tabs').tabs('closeAll');
+
+
next
+
$('#tabs').tabs('next');
+
+
prev
+
$('#tabs').tabs('prev');
+
+
destroy
+
$('#tabs').tabs('destroy');
+
\ No newline at end of file diff --git a/docs/themes/oscalkit/exampleSite/content/docs/toggleme.md b/docs/themes/oscalkit/exampleSite/content/docs/toggleme.md new file mode 100644 index 00000000..a5bda7de --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/docs/toggleme.md @@ -0,0 +1,157 @@ ++++ +title = "Toggleme" +date = "2017-04-10T16:42:59+01:00" +draft = false +weight = 190 +description = "Display or hide elements with simple toggle" +bref= "Toggleme is a great way to add a binary option to either display some content or hide it. It works like a charm for menus, disclaimers and so much more!" +toc = true ++++ + +

Demo

+

Toggleme works on mobile devices as well as on desktops. To see Toggleme in action, just resize this window or open this page on a mobile device.

+
+
+ Toggle +
+ + 
<div class="show-sm">
+    <a href="#" data-component="toggleme" data-target="#navbar">Toggle</a>
+</div>
+
+<nav id="navbar" class="hide-sm">
+    <ul>
+        <li><a href="#">...</a></li>
+    </ul>
+</nav>
+
+
+

Usage

+
+

+
+

Ok, I'm opened. Now hide me

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+ 
<button data-component="toggleme" data-target="#togglebox-target" data-text="Hide Me">Show Me</button>
+
+<div id="togglebox-target" class="hide">
+    ...
+</div>
+
+
+

Multiple targets

+
+

+
+

Ok, I'm opened. Now hide me

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+

... and, I'm opened too. Now hide me

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+ 
<button data-component="toggleme" data-target="#togglebox-target-3, #togglebox-target-4" data-text="Hide Me">Show Me</button>
+
+<div id="togglebox-target-1" class="hide">
+    ...
+</div>
+
+<div id="togglebox-target-2" class="hide">
+    ...
+</div>
+
+
+

Settings

+
target
+ +

Defines which layer or layers should be displayed upon clicking the "open" button.

+
<button data-component="toggleme" data-target="#togglebox-target">Show Me</button>
+
+<button data-component="toggleme" data-target="#togglebox-target-1, #togglebox-target-2">Show Me</button>
+
+<button data-component="toggleme" data-target=".togglebox-target">Show Me</button>
+
+
+
text
+ +

Defines what text should a button have after the layer has been opened. If not set, button text will not change.

+
<button data-component="toggleme" data-target="#togglebox-target" data-text="Hide Me">Show Me</button>
+
+
+

Callbacks

+
open
+
$('#togglebox-target').on('open.toggleme', function()
+{
+    // do something...
+});
+
+
opened
+
$('#togglebox-target').on('opened.toggleme', function()
+{
+    // do something...
+});
+
+
close
+
$('#togglebox-target').on('close.toggleme', function()
+{
+    // do something...
+});
+
+
closed
+
$('#togglebox-target').on('closed.toggleme', function()
+{
+    // do something...
+});
+
+

API

+
toggle
+
$('#togglebox-target').toggleme('toggle');
+
+
open
+
$('#togglebox-target').toggleme('open');
+
+
close
+
$('#togglebox-target').toggleme('close');
+
+
isOpened
+
var isOpened = $('#togglebox-target').toggleme('isOpened');
+
+
isClosed
+
var isClosed = $('#togglebox-target').toggleme('isClosed');
+
+
destroy
+
$('#togglebox-target').toggleme('destroy');
+
diff --git a/docs/themes/oscalkit/exampleSite/content/docs/typography.md b/docs/themes/oscalkit/exampleSite/content/docs/typography.md new file mode 100644 index 00000000..40f30ef5 --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/docs/typography.md @@ -0,0 +1,452 @@ ++++ +title = "Typography" +weight = 25 +draft = false +description = "Always precise spacing and perfect font size" +bref = "Typography is perhaps one of the most important and most visible things on a web page. Even slightest imperfection can ruin otherwise perfect website. With Kube, you will have perfect typography with ideal spacing, font sizes and proportions, regardless of the exact style or font you choose for your site." +toc = true ++++ + +

Get Started

+

Typography of Kube based on the 4px horizontal grid, it means that for the headers, paragraphs, quotes and any other texts chosen are a combination of line-height, that fit into the 4px grid and help set the horizontal rhythm of design by default.

+
+ 4px horizontal rhythm +
+ 4px grid for typography - the magic of the horizontal rhythm +
+
+

With this feature, you can quickly and easily make a solid and harmonious-looking website and UI design. You do not need to do complicated calculations to find the size and proportions of the text baseline, no need to look for the magic formula to build a horizontal rhythm. Magic is already in Kube.

+

You can use all the default settings of typography and it will always look balanced. But also you can easily change any font sizes, just try to set the value of line-height fold for 4px and your texts will still look great.

+

Additional balance and harmony, creates a classic typography scale, used in Kube.

+
+ the typography scale +
+ The typography scale helps to build a balance between the size of headings and text elements +
+
+

Headings

+

Use h1-h6 tags or .h1-.h6 classes to define headers and class="title" for the title, which is suitable for the most important inscriptions, for example, in the hero or covers.

+
+

Title

+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ 
<h1 class="title">...</h1>
+<h1>...</h1>
+...
+<h6>...</h6>
+
+

Paragraphs

+

The base pragraph has an ideal ratio of font size and baseline. This text is easy to read in most cases.

+
+

16px/24px

+

By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.

+ 
<p>...</p>
+
+

In special cases, you can use modifiers which increase or decrease the text size. It is useful for building a variety of websites and UI, when you need to make a lead text or signatures with a small font size .

+
+

20px/32px

+

By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.

+ 
<p class="large">...</p>
+
+
+

18px/28px

+

By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.

+ 
<p class="big">...</p>
+
+
+

14px/20px

+

By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.

+ 
<p class="small">...</p>
+
+
+

12px/20px

+

By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.

+ 
<p class="smaller">...</p>
+
+

Columns

+

Kube has three classes of .columns-2 through .columns-4 to create a multi-column layout. All multi-column layouts will be in a single column on mobile.

+
+

2 columns

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+ 
<div class="columns-2">
+    <p>...</p>
+</div>
+
+
+
+

3 columns

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+ 
<div class="columns-3">
+    <p>...</p>
+</div>
+
+
+
+

4 columns

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+ 
<div class="columns-4">
+    <p>...</p>
+</div>
+
+
+

Quotes

+

Quotes in the text stand out for contrast and added variety to the text. In the quotes you can mark text as a paragraph tag and without it.

+
+
+

No, she'll probably make me do it. Goodbye, friends. I never thought I'd die like this. But I always really hoped. I saw you with those two "ladies of the evening" at Elzars. Explain that. I never loved you.

+
+ 
<blockquote>...</blockquote>
+
+

Use small tag for attribution. It's a prefer way for semantic code.

+
+
+

Who's brave enough to fly into something we all keep calling a death sphere? Yes. You gave me a dollar and some candy. I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense.

— Bender +
+ 
<blockquote>
+    <p>Quotation content</p>
+    <small>Author attribution</small>
+</blockquote>
+
+
+

Pre-formatted

+

Pre-formatted text most often used to display code snippets or other text elements, for which you wish to preserve the exact formatting they've got.

+
+ 
Function.prototype.inherits = function(parent)
+{
+    for (var key in parent.prototype)
+    {
+        this.prototype[key] = parent.prototype[key];
+    }
+};
+
+ 
<pre>...</pre>
+
+

You feel free to use code tag inside pre.

+
+ 
Function.prototype.inherits = function(parent)
+{
+    for (var key in parent.prototype)
+    {
+        this.prototype[key] = parent.prototype[key];
+    }
+};
+
+ 
<pre><code>...</code></pre>
+
+

Inline Elements

+

Kube features various inline formatting elements. They all have their own semantic meaning, but you're free to use them just for their style.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ExampleTagExampleTag
CSS<abbr>Cite<cite>
Code<code>Sample<samp>
Variable<var>Mark<mark>
Shortcut<kbd> + Deleted + <del>
Italic<i>Emphasis<em>
Highlighted<strong>Bold<b>
xsuperscript<sup>xsubscript<sub>
Small<small> + Inserted + <ins>
+

Modifiers

+

Modifiers - a set of helper classes for creating accents in the text and for the solution of useful tasks without writing CSS code, for example, the alignment of the text in the center.

+

Modifiers can be applied to any tags as inline elements, links or block tags.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ExampleModifier
Muted.muted
+ Muted link + .muted
+ Black link + .black
Highlight.highlight
upper.upper
LOWER.lower
Italic.italic
Strong.strong
Not strong.normal
Monospace.monospace
Nowrap.nowrap
Remove margin bottom.end
Highlight.highlight
Small.small
Smaller.smaller
Large.large
Big.big
Text left.text-left
Text center.text-center
Text right.text-right
+

Figure

+

A figure tag features an image, a video or a code plus a caption. It is a good accessibility practice. It also helps serve responsive video to various devices when you wrap video into .video-container class.

+
Images
+
+ Image +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit... +
+
+

HTML

+
<figure>
+    <img src="image.jpg">
+    <figcaption>...</figcaption>
+</figure>
+
+
Video
+
+
+ +
+
+ Journey Through The Ice | National Geographic +
+
+

HTML

+
<figure>
+    <div class="video-container">
+        <iframe>...</iframe>
+    </div>
+    <figcaption>...</figcaption>
+</figure>
+
+
Code
+
+ 
Function.prototype.inherits = function(parent)
+{
+    for (var key in parent.prototype)
+    {
+        this.prototype[key] = parent.prototype[key];
+    }
+};
+
+
+ One of the implementations of inheritance +
+
+

HTML

+
<figure>
+    <pre>...</pre>
+    <figcaption>...</figcaption>
+</figure>
+
+

Lists

+

Although you most likely will not ever need to do so, you can still nest as many list levels as you like.

+
+
+
+
    +
  • list item 1
    • +
  • list item 2 +
      +
    • list item 2.1
      • +
    • list item 2.2 +
        +
      • list item 2.2.1
        • +
      • list item 2.2.2
        • +
      +
      • +
    • list item 2.3
      • +
    • list item 2.4
      • +
    +
    • +
  • list item 3
    • +
  • list item 4
    • +
+ 
<ul>
+    <li>...</li>
+</ul>
+
+
+
+
+
+
    +
  1. list item 1
    2. +
  2. list item 2 +
      +
    1. list item 2.1
      2. +
    2. list item 2.2 +
        +
      1. list item 2.2.1
        2. +
      2. list item 2.2.2
        3. +
      +
      3. +
    3. list item 2.3
      4. +
    4. list item 2.4
      5. +
    +
    3. +
  3. list item 3
    4. +
  4. list item 4
    5. +
+ 
<ol>
+    <li>...</li>
+</ol>
+
+
+
+
+
Unstyled List
+

To remove default list styling, use .unstyled.

+
+
    +
  • list item 1
    • +
  • list item 2 +
      +
    • list item 2.1
      • +
    • list item 2.2
      • +
    +
    • +
  • list item 3
    • +
  • list item 4
    • +
+ 
<ul class="unstyled">
+    <li>...</li>
+</ul>
+
+
+
Definition List
+

From time to time, you may need to produce a list of definitions, and there's one nicely built-in into Kube. We love semantic things. And lists. We love lists.

+
+
+
Term 1
+
Description 1
+
Term 2
+
Description 2
+
Term 3
+
Description 3
+
+ 
<dl>
+    <dt>Term</dt>
+    <dd>Description</dd>
+</dl>
+
+
\ No newline at end of file diff --git a/docs/themes/oscalkit/exampleSite/content/docs/utils.md b/docs/themes/oscalkit/exampleSite/content/docs/utils.md new file mode 100644 index 00000000..3e58bcc4 --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/docs/utils.md @@ -0,0 +1,124 @@ ++++ +date = "2017-04-10T16:43:30+01:00" +draft = false +weight = 280 +description = "A dozen of useful utilities that come with Kube" +title = "Utils" +bref= "Here you can find over a dozen of examples of little tiny utilities, that can make developer's life that much easier, and your project progress that much faster." +toc = true ++++ + +

Group

+

Combines float elements to group with a clearfix.

+
+
+
+ This text is visibly floating left +
+
+ This text looks like a case of right float +
+
+ 
<div class="group">
+    <div class="float-left">...</div>
+    <div class="float-right">...</div>
+</div>
+
+
+

Visibility

+

Below is an invisible div with class invisible. You can't see it, because it is invisible. You can't see invisible things.

+
+ +
+ But you can see this div because it has visible class. +
+ 
<div class="invisible">...</div>
+<div class="visible">...</div>
+
+
+

Display

+

This is a very useful little bit. Whenever you need to hide some text or an element on a small screen, just throw in hide-sm class. Or, if you need to specifically show something only on small screens, show-sm class is yours for the job. You can also just plain hide stuff with hide class. Can you see red words "I'm hidden" below? Exactly.

+
+
+ I'm hidden +
+
+ This text will not show up on a small screen. +
+

Resize your window and trust us on this ↑ ↓

+
+ This text will only show up on a small screen +
+ 
<div class="hide">I'm hidden</div>
+<div class="hide-sm">This text will not show up on a small screen.</div>
+<div class="show-sm">This will only show up on a small screen</div>
+
+
+

Print

+

One more neat feature of Kube. It helps you produce better ready-to-print pages by simply hiding irrelevant things.

+
+
+ This will be hidden on print, because it is some sort of web-specific thing. +
+
+ This will be printed, because this text is somehow more relevant on paper than on screen. +
+ 
<div class="hide-print">...</div>
+<div class="show-print">...</div>
+
+
+

Video Container

+

Helps to serve responsive video to various devices.

+
+
+ +
+ 
<div class="video-container">
+    <iframe>...</iframe>
+</div>
+
+
+

Close

+

Closing icon to close anything you want.

+
+ + 
<span class="close small"></span>
+
+
+ + 
<span class="close"></span>
+
+
+ + 
<span class="close big"></span>
+
+

Caret

+

Kube has already built-in four-direction caret.

+
+ + 
<span class="caret down"></span>
+<span class="caret up"></span>
+<span class="caret left"></span>
+<span class="caret right"></span>
+
+
+

Example of usage:

+
+     Link     Text     +
+

Icons

+

Some useful icons are already built-in to Kube.

+
+ + 
<i class="kube-search"></i>
+
+
+ + 
<i class="kube-menu"></i>
+
+
+ + 
<i class="kube-calendar"></i>
+
\ No newline at end of file diff --git a/docs/themes/oscalkit/exampleSite/content/faq/_index.md b/docs/themes/oscalkit/exampleSite/content/faq/_index.md new file mode 100644 index 00000000..17c8963c --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/faq/_index.md @@ -0,0 +1,39 @@ ++++ +draft= false +title = "FAQ" +description = "Asked and answered" ++++ + +## Kube looks awesome. Who is it for? + +We designed Kube as a small and inconspicuous helper for the professional developers and designers. Why an emphasis on “professional”? Well, because Kube is neither a kit of ready elements nor a set of templates; Kube is mainly a tool, which helps to keep routine tasks to a minimum. Kube doesn’t impose its own styles and doesn’t require following any specific design rules or practices. It makes Kube ideal for creative and challenging tasks of making unique websites with the unique design. For those who know HTML/CSS/JS inside out, Kube may become an irreplaceable tool that saves countless hours of work. + +If you are new to HTML/CSS/JS, then you may have a hard time implementing Kube in your projects, and it may just not be a tool for you yet. But certainly feel free to download and explore Kube, and see where this journey will take you! + +## What? Where’s the Nav Bar and other navigation? + +With over 15 years of web development experience under the belt, we can assure you that Nav Bars and all other sorts of navigational elements are always faster and easier to build for a project from scratch than to modify, customize and rebuild an existing solution. + +Each and every project has its unique navigational needs and often requires more of a custom approach. Vast experience shows that writing code for navigation from ground up is less time-consuming and more efficient, than tweaking and creating the navigation based on a boilerplate solution. + +## Isn’t it a great idea to add some awesome features to Kube? + +Nope. We want to keep Kube minimalistic, small and flexible. So, actually, there’s more chance of us removing stuff from the code and functions while preserving features, than adding new code and new stuff. + +## What Does the Future Hold for Kube? What’s the plan? + +Right now, Kube is a self-sufficient, modern and complete product. We have no specific plans of adding any new components anytime soon; we do not plan to extend Kube as well. Our goal is to improve the things that make Kube so awesome by squashing bugs, refactoring the code and improving overall performance. + +Having this said, we are keeping our eyes on what’s new in the world of HTML, CSS, and JS, and if something truly exciting happens in future with these technologies (comparable, let’s say, to flexbox emergence), we most certainly will consider these changes and will be first to go ahead and implement them as soon as possible. + +## I’m using old Kube. How do I download it again, and where do I find old Documentation? + +Old versions of Kube are critically outdated, and we strongly encourage you to stop using them as soon as you can. We do not offer old versions for download, and we do not provide old documentation. We realize that this may be an inconvenience, however, we also deeply believe that upgrading to the new Kube will bring way greater positive effect to your projects than the ability to support legacy versions. + +## How do I migrate from an older version to the latest one? + +Basically, you take the new Kube and start afresh from scratch. The old Kube had been built on a completely different set of principles and technologies, and it is pretty much incompatible with the new Kube in every way. Starting anew with the new Kube will also give you an opportunity to reevaluate your project in a new light and improve it in general. + +## Can I create design themes for sale based on Kube? + +You absolutely can! You have our permission to use Kube in whatever projects you wish commercial, for sale, or otherwise, in whichever way you like. \ No newline at end of file diff --git a/docs/themes/oscalkit/exampleSite/content/password-recovery.md b/docs/themes/oscalkit/exampleSite/content/password-recovery.md new file mode 100644 index 00000000..73ae263c --- /dev/null +++ b/docs/themes/oscalkit/exampleSite/content/password-recovery.md @@ -0,0 +1,17 @@ + ++++ +title = "Password Recovery" ++++ +
+ +
+ + +
+ +

+ +

+ +

Back to Log In

+
\ No newline at end of file diff --git a/docs/themes/oscalkit/exampleSite/static/.gitkeep b/docs/themes/oscalkit/exampleSite/static/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/docs/themes/oscalkit/images/docs.png b/docs/themes/oscalkit/images/docs.png new file mode 100644 index 00000000..d1f3d2f6 Binary files /dev/null and b/docs/themes/oscalkit/images/docs.png differ diff --git a/docs/themes/oscalkit/images/faq.png b/docs/themes/oscalkit/images/faq.png new file mode 100644 index 00000000..c6f423e7 Binary files /dev/null and b/docs/themes/oscalkit/images/faq.png differ diff --git a/docs/themes/oscalkit/images/list-docs.png b/docs/themes/oscalkit/images/list-docs.png new file mode 100644 index 00000000..22cba88d Binary files /dev/null and b/docs/themes/oscalkit/images/list-docs.png differ diff --git a/docs/themes/oscalkit/images/post.png b/docs/themes/oscalkit/images/post.png new file mode 100644 index 00000000..83c7d618 Binary files /dev/null and b/docs/themes/oscalkit/images/post.png differ diff --git a/docs/themes/oscalkit/images/screenshot.png b/docs/themes/oscalkit/images/screenshot.png new file mode 100644 index 00000000..b6447d91 Binary files /dev/null and b/docs/themes/oscalkit/images/screenshot.png differ diff --git a/docs/themes/oscalkit/images/signin.png b/docs/themes/oscalkit/images/signin.png new file mode 100644 index 00000000..0a385c64 Binary files /dev/null and b/docs/themes/oscalkit/images/signin.png differ diff --git a/docs/themes/oscalkit/images/tn.png b/docs/themes/oscalkit/images/tn.png new file mode 100644 index 00000000..67fb6792 Binary files /dev/null and b/docs/themes/oscalkit/images/tn.png differ diff --git a/docs/themes/oscalkit/layouts/404.html b/docs/themes/oscalkit/layouts/404.html new file mode 100644 index 00000000..e69de29b diff --git a/docs/themes/oscalkit/layouts/_default/baseof.html b/docs/themes/oscalkit/layouts/_default/baseof.html new file mode 100644 index 00000000..cc107da0 --- /dev/null +++ b/docs/themes/oscalkit/layouts/_default/baseof.html @@ -0,0 +1,67 @@ + + + + + {{ .Hugo.Generator }} + + + + {{ block "title" . }}{{ .Title }} | {{ .Site.Title }}{{ end }} + + {{ with .Description }} + {{ end }} + + {{ $default_noindex_kinds := slice "section" "taxonomy" "taxonomyTerm" }} + {{ $noindex_kinds := .Site.Params.noindex_kinds | default $default_noindex_kinds }} + {{ $is_noindex_true := and (isset .Params "noindex") .Params.noindex }} + {{ if or (in $noindex_kinds .Kind) ($is_noindex_true) }} + + {{ end }} + + {{ partial "meta/name-author" . }} + {{ template "_internal/opengraph.html" . }} + {{ partial "meta/ogimage" . }} + + {{ if .IsHome }} {{ partial "site-verification" . }} {{ end }} + + {{ template "_internal/google_analytics_async.html" . }} + {{ if .RSSLink }} + {{ end }} + + {{ if (isset .Params "prev") }} + {{ end }} {{ if (isset .Params "next") }} + {{ end }} + + {{ partial "favicon" . }} + + + + + + + + + + + + + + + + + +
{{ block "header" . }}{{ end }}
+
{{ block "main" . }}{{ end }}
+
{{ block "footer" . }}{{ end }}
+ + + + + + + + diff --git a/docs/themes/oscalkit/layouts/_default/list.html b/docs/themes/oscalkit/layouts/_default/list.html new file mode 100644 index 00000000..514f3e5f --- /dev/null +++ b/docs/themes/oscalkit/layouts/_default/list.html @@ -0,0 +1,19 @@ +{{ define "title"}} {{ .Title}} {{end}} +{{ define "header"}} {{ partial "header" .}} {{end}} + +{{ define "main" }} + +
+

Voice of {{.Site.Params.author }} Developers

+

Our vision, news and ideas, and whatever feels important.
Follow us on Twitter

+
+ + +{{ end }} +{{ define "footer" }} + {{ partial "footer" . }} +{{ end }} diff --git a/docs/themes/oscalkit/layouts/_default/single.html b/docs/themes/oscalkit/layouts/_default/single.html new file mode 100644 index 00000000..ed6341c5 --- /dev/null +++ b/docs/themes/oscalkit/layouts/_default/single.html @@ -0,0 +1,18 @@ +{{ define "title"}} {{ .Title}} {{end}} +{{ define "header"}} {{ partial "header" .}} {{end}} + +{{ define "main" }} + +
+

{{.Title }}

+

{{.Params.description}}

+
+ +{{ end }} +{{ define "footer" }} + {{ partial "footer" . }} +{{ end }} \ No newline at end of file diff --git a/docs/themes/oscalkit/layouts/blog/single.html b/docs/themes/oscalkit/layouts/blog/single.html new file mode 100644 index 00000000..8148883b --- /dev/null +++ b/docs/themes/oscalkit/layouts/blog/single.html @@ -0,0 +1,58 @@ +{{ define "title"}} {{ .Title}} {{end}} +{{ define "header"}} {{ partial "header" .}} {{end}} + +{{ define "main"}} +
+ {{ template "_internal/schema.html" . }} +
+

{{.Title}}

+ {{ if .Description }} +
{{ .Description }}
+{{ end }} + +
+
+
+ + {{.Content | safeHTML}} + +
+ + + +
+ {{ partial "post/byauthor" . }} + {{ partial "post/related-content" . }} +
+ + {{ if .Site.DisqusShortname }} +
+ {{ template "_internal/disqus.html" . }} +
+ {{ end }} + +
+
+{{ end }} +{{ define "footer"}} {{ partial "footer.html" .}} {{ end }} \ No newline at end of file diff --git a/docs/themes/oscalkit/layouts/docs/single.html b/docs/themes/oscalkit/layouts/docs/single.html new file mode 100644 index 00000000..ed942e9e --- /dev/null +++ b/docs/themes/oscalkit/layouts/docs/single.html @@ -0,0 +1,23 @@ +{{ define "title"}} {{ .Title}} {{end}} +{{ define "header"}} {{ partial "header" .}} {{end}} +{{ define "main"}} +
+
+

{{ .Title}}

+

+ {{ .Params.bref | safeHTML }}. +

+ +
+
+ {{ partial "toc" .}} + + {{ .Content}} + + {{if .Params.script}} + {{ $script := (delimit (slice "scripts" .Params.script) "/")}} + {{ partial (string $script) .}} + {{end }} +
+
+{{ end }} diff --git a/docs/themes/oscalkit/layouts/index.html b/docs/themes/oscalkit/layouts/index.html new file mode 100644 index 00000000..0c87e8e5 --- /dev/null +++ b/docs/themes/oscalkit/layouts/index.html @@ -0,0 +1,59 @@ +{{ define "title"}} {{ .Site.Title}} {{end}} +{{ define "header"}} {{ partial "header" .}} {{end}} +{{ define "main"}} + +
+
+

{{.Title}}

+

{{.Description}}

+
+
+ Download View on Github +

Zip-archive, includes all the source and site example files

+
+
+ Kube from imperavi is an awesome CSS & JS Framework and i designed this template for hugo with the same original philosophy ! +
+
+
+
+
+ Baseline +
+

Horizontal Rhythm

+

In Kube horizontal rhythm based on a 4px vertical grid is something that we are truly proud of.

+
+
+
+ Typography +
+

Typography

+

We obsess over typography, and it shows throughout Kube.

+
+
+
+ Minimalism +
+

Minimalism

+

We strongly believe in minimalism as a general concept as well as a practical approach to everyday life.

+
+
+
+
+

Mobile-first Design

+

Every element in kube is mobile-first and fully embraces latest and greatest tech.

+
+
+

Cross-browser

+

Kube works in all modern browsers, both desktop and mobile, including latest Chrome, Firefox, Safari, Opera, IE and Edge.

+
+
+

License

+

Kube licensed under MIT.
+ Kube Framework is absolutely free for personal or commercial use.

+
+
+
+
+{{ end }} +{{ define "footer"}} {{ partial "footer" .}} {{end}} diff --git a/docs/themes/oscalkit/layouts/partials/favicon.html b/docs/themes/oscalkit/layouts/partials/favicon.html new file mode 100644 index 00000000..624b637d --- /dev/null +++ b/docs/themes/oscalkit/layouts/partials/favicon.html @@ -0,0 +1 @@ + diff --git a/docs/themes/oscalkit/layouts/partials/footer.html b/docs/themes/oscalkit/layouts/partials/footer.html new file mode 100644 index 00000000..212dd104 --- /dev/null +++ b/docs/themes/oscalkit/layouts/partials/footer.html @@ -0,0 +1,20 @@ + \ No newline at end of file diff --git a/docs/themes/oscalkit/layouts/partials/header.html b/docs/themes/oscalkit/layouts/partials/header.html new file mode 100644 index 00000000..783aa760 --- /dev/null +++ b/docs/themes/oscalkit/layouts/partials/header.html @@ -0,0 +1,29 @@ +
+ +
+
+ + + +
diff --git a/docs/themes/oscalkit/layouts/partials/meta/name-author.html b/docs/themes/oscalkit/layouts/partials/meta/name-author.html new file mode 100644 index 00000000..974c77f8 --- /dev/null +++ b/docs/themes/oscalkit/layouts/partials/meta/name-author.html @@ -0,0 +1,6 @@ + +{{ if isset .Params "author" }} + +{{ else }} + +{{ end }} diff --git a/docs/themes/oscalkit/layouts/partials/meta/ogimage.html b/docs/themes/oscalkit/layouts/partials/meta/ogimage.html new file mode 100644 index 00000000..7a87ff4a --- /dev/null +++ b/docs/themes/oscalkit/layouts/partials/meta/ogimage.html @@ -0,0 +1,8 @@ + +{{ if and (.IsNode) (.Site.Params.images) }} + +{{ end }} + +{{ if and (.IsPage) (not .Params.images) (.Site.Params.images) }} + +{{ end }} diff --git a/docs/themes/oscalkit/layouts/partials/page-summary.html b/docs/themes/oscalkit/layouts/partials/page-summary.html new file mode 100644 index 00000000..79c72e38 --- /dev/null +++ b/docs/themes/oscalkit/layouts/partials/page-summary.html @@ -0,0 +1,9 @@ +
  • +

    + {{ .Title }} +

    +
    + {{ if .Description }} +

    {{ .Description }}

    + {{ end }} +
    • diff --git a/docs/themes/oscalkit/layouts/partials/pagination.html b/docs/themes/oscalkit/layouts/partials/pagination.html new file mode 100644 index 00000000..95353e5f --- /dev/null +++ b/docs/themes/oscalkit/layouts/partials/pagination.html @@ -0,0 +1,15 @@ + \ No newline at end of file diff --git a/docs/themes/oscalkit/layouts/partials/post/byauthor.html b/docs/themes/oscalkit/layouts/partials/post/byauthor.html new file mode 100644 index 00000000..579a64d3 --- /dev/null +++ b/docs/themes/oscalkit/layouts/partials/post/byauthor.html @@ -0,0 +1,20 @@ +

    + Published + {{ if ne .Site.Params.hide_author true }} + {{ with .Params.author }} + by + {{ else }} + by + {{ end }} + {{ end }} + + {{ with .Params.categories }} + in {{ delimit (apply (apply (sort .) "partial" "post/category-link" ".") "chomp" ".") ", " " and " }} + {{ end }} + {{ with .Params.tags }} + and tagged {{ delimit (apply (apply (sort .) "partial" "post/tag-link" ".") "chomp" ".") ", " " and " }} + {{ end }} + using {{ .WordCount }} words. +

    diff --git a/docs/themes/oscalkit/layouts/partials/post/category-link.html b/docs/themes/oscalkit/layouts/partials/post/category-link.html new file mode 100644 index 00000000..6bee96b1 --- /dev/null +++ b/docs/themes/oscalkit/layouts/partials/post/category-link.html @@ -0,0 +1 @@ +{{ . }} diff --git a/docs/themes/oscalkit/layouts/partials/post/meta.html b/docs/themes/oscalkit/layouts/partials/post/meta.html new file mode 100644 index 00000000..62b4b451 --- /dev/null +++ b/docs/themes/oscalkit/layouts/partials/post/meta.html @@ -0,0 +1,14 @@ + + + +{{ .ReadingTime }} minute read + + + +{{ if .PublishDate.IsZero }} + Published: +{{ else if lt .PublishDate .Lastmod }} + Modified: +{{ else }} + Published: +{{ end }} diff --git a/docs/themes/oscalkit/layouts/partials/post/related-content.html b/docs/themes/oscalkit/layouts/partials/post/related-content.html new file mode 100644 index 00000000..49310b60 --- /dev/null +++ b/docs/themes/oscalkit/layouts/partials/post/related-content.html @@ -0,0 +1,16 @@ +{{ range first 1 (where (where .Site.Pages ".Params.tags" "intersect" .Params.tags) "Permalink" "!=" .Permalink) }} + {{ $.Scratch.Set "has_related" true }} +{{ end }} + +{{ if $.Scratch.Get "has_related" }} + +{{ end }} diff --git a/docs/themes/oscalkit/layouts/partials/post/tag-link.html b/docs/themes/oscalkit/layouts/partials/post/tag-link.html new file mode 100644 index 00000000..8c034210 --- /dev/null +++ b/docs/themes/oscalkit/layouts/partials/post/tag-link.html @@ -0,0 +1 @@ +{{ . }} diff --git a/docs/themes/oscalkit/layouts/partials/scripts/animation.html b/docs/themes/oscalkit/layouts/partials/scripts/animation.html new file mode 100644 index 00000000..ee13095f --- /dev/null +++ b/docs/themes/oscalkit/layouts/partials/scripts/animation.html @@ -0,0 +1,127 @@ + \ No newline at end of file diff --git a/docs/themes/oscalkit/layouts/partials/site-verification.html b/docs/themes/oscalkit/layouts/partials/site-verification.html new file mode 100644 index 00000000..c4d8b05d --- /dev/null +++ b/docs/themes/oscalkit/layouts/partials/site-verification.html @@ -0,0 +1,12 @@ +{{ if .Site.Params.seo.webmaster_verifications.google }} + +{{ end }} +{{ if .Site.Params.seo.webmaster_verifications.bing }} + +{{ end }} +{{ if .Site.Params.seo.webmaster_verifications.alexa }} + +{{ end }} +{{ if .Site.Params.seo.webmaster_verifications.yandex }} + +{{ end }} diff --git a/docs/themes/oscalkit/layouts/partials/toc.html b/docs/themes/oscalkit/layouts/partials/toc.html new file mode 100644 index 00000000..ccc3f3d9 --- /dev/null +++ b/docs/themes/oscalkit/layouts/partials/toc.html @@ -0,0 +1,21 @@ +{{ if and (isset .Params "toc") .Params.toc }} + + + +{{ end }} \ No newline at end of file diff --git a/docs/themes/oscalkit/layouts/section/docs.html b/docs/themes/oscalkit/layouts/section/docs.html new file mode 100644 index 00000000..09156ddb --- /dev/null +++ b/docs/themes/oscalkit/layouts/section/docs.html @@ -0,0 +1,22 @@ +{{ define "title"}} {{ .Title}} {{end}} +{{ define "header"}} {{ partial "header" .}} {{end}} +{{ define "main"}} +
    +
    +

    Documentation

    +
    +
    +
    + {{ range .Data.Pages.ByWeight }} +
    +

    {{ .Title }}

    +

    {{ .Params.description }}

    +
    + {{ end }} + +
    +
    +
    +{{ end }} + +{{ define "footer"}} {{ partial "footer" .}} {{end}} \ No newline at end of file diff --git a/docs/themes/oscalkit/layouts/section/faq.html b/docs/themes/oscalkit/layouts/section/faq.html new file mode 100644 index 00000000..23ed5e24 --- /dev/null +++ b/docs/themes/oscalkit/layouts/section/faq.html @@ -0,0 +1,16 @@ +{{ define "title"}} {{ .Title}} {{end}} +{{ define "header"}} {{ partial "header" .}} {{end}} + +{{ define "main" }} + +
    +

    {{.Title }}

    +

    {{.Params.description}}

    +
    +
    +{{.Content}} +
    +{{ end }} +{{ define "footer" }} + {{ partial "footer" . }} +{{ end }} \ No newline at end of file diff --git a/docs/themes/oscalkit/static/css/custom.css b/docs/themes/oscalkit/static/css/custom.css new file mode 100644 index 00000000..e69de29b diff --git a/docs/themes/oscalkit/static/css/font.css b/docs/themes/oscalkit/static/css/font.css new file mode 100644 index 00000000..9f19ed47 --- /dev/null +++ b/docs/themes/oscalkit/static/css/font.css @@ -0,0 +1,68 @@ +@font-face { + font-family: 'Lato'; + src: url('../font/Lato-Light.woff') format('woff'); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-family: 'Lato'; + src: url('../font/Lato-LightItalic.woff') format('woff'); + font-weight: 300; + font-style: italic; +} +@font-face { + font-family: 'Lato'; + src: url('../font/Lato-Black.woff') format('woff'); + font-weight: 900; + font-style: normal; +} + +@font-face { + font-family: 'Lato'; + src: url('../font/Lato-BlackItalic.woff') format('woff'); + font-weight: 900; + font-style: italic; +} + +@font-face { + font-family: 'Lato'; + src: url('../font/Lato-Bold.woff') format('woff'); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: 'Lato'; + src: url('../font/Lato-BoldItalic.woff') format('woff'); + font-weight: bold; + font-style: italic; +} + +@font-face { + font-family: 'Lato'; + src: url('../font/Lato-Semibold.woff') format('woff'); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: 'Lato'; + src: url('../font/Lato-SemiboldItalic.woff') format('woff'); + font-weight: 500; + font-style: italic; +} + +@font-face { + font-family: 'Lato'; + src: url('../font/Lato-Italic.woff') format('woff'); + font-weight: normal; + font-style: italic; +} + +@font-face { + font-family: 'Lato'; + src: url('../font/Lato-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; +} \ No newline at end of file diff --git a/docs/themes/oscalkit/static/css/highlight.css b/docs/themes/oscalkit/static/css/highlight.css new file mode 100644 index 00000000..7d8be18d --- /dev/null +++ b/docs/themes/oscalkit/static/css/highlight.css @@ -0,0 +1 @@ +.hljs{display:block;overflow-x:auto;padding:0.5em;background:#F0F0F0}.hljs,.hljs-subst{color:#444}.hljs-comment{color:#888888}.hljs-keyword,.hljs-attribute,.hljs-selector-tag,.hljs-meta-keyword,.hljs-doctag,.hljs-name{font-weight:bold}.hljs-type,.hljs-string,.hljs-number,.hljs-selector-id,.hljs-selector-class,.hljs-quote,.hljs-template-tag,.hljs-deletion{color:#880000}.hljs-title,.hljs-section{color:#880000;font-weight:bold}.hljs-regexp,.hljs-symbol,.hljs-variable,.hljs-template-variable,.hljs-link,.hljs-selector-attr,.hljs-selector-pseudo{color:#BC6060}.hljs-literal{color:#78A960}.hljs-built_in,.hljs-bullet,.hljs-code,.hljs-addition{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta-string{color:#4d99bf}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold} \ No newline at end of file diff --git a/docs/themes/oscalkit/static/css/kube.css b/docs/themes/oscalkit/static/css/kube.css new file mode 100644 index 00000000..d5960ce5 --- /dev/null +++ b/docs/themes/oscalkit/static/css/kube.css @@ -0,0 +1,2156 @@ +/* + Kube. CSS & JS Framework + Version 6.5.2 + Updated: February 2, 2017 + + http://imperavi.com/kube/ + + Copyright (c) 2009-2017, Imperavi LLC. + License: MIT +*/ +html { + box-sizing: border-box; } + +*, +*:before, +*:after { + box-sizing: inherit; } + +* { + margin: 0; + padding: 0; + outline: 0; + -webkit-overflow-scrolling: touch; } + +img, +video, +audio { + max-width: 100%; } + +img, +video { + height: auto; } + +svg { + max-height: 100%; } + +iframe { + border: none; } + +::-moz-focus-inner { + border: 0; + padding: 0; } + +input[type="radio"], +input[type="checkbox"] { + vertical-align: middle; + position: relative; + bottom: 0.15rem; + font-size: 115%; + margin-right: 3px; } + +input[type="search"] { + -webkit-appearance: textfield; } + +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; } + +.black { + color: #0d0d0e; } + +.inverted { + color: #fff; } + +.error { + color: #f03c69; } + +.success { + color: #35beb1; } + +.warning { + color: #f7ba45; } + +.focus { + color: #1c86f2; } + +.aluminum { + color: #f8f8f8; } + +.silver { + color: #e0e1e1; } + +.lightgray { + color: #d4d4d4; } + +.gray { + color: #bdbdbd; } + +.midgray { + color: #676b72; } + +.darkgray { + color: #313439; } + +.bg-black { + background-color: #0d0d0e; } + +.bg-inverted { + background-color: #fff; } + +.bg-error { + background-color: #f03c69; } + +.bg-success { + background-color: #35beb1; } + +.bg-warning { + background-color: #f7ba45; } + +.bg-focus { + background-color: #1c86f2; } + +.bg-aluminum { + background-color: #f8f8f8; } + +.bg-silver { + background-color: #e0e1e1; } + +.bg-lightgray { + background-color: #d4d4d4; } + +.bg-gray { + background-color: #bdbdbd; } + +.bg-midgray { + background-color: #676b72; } + +.bg-darkgray { + background-color: #313439; } + +.bg-highlight { + background-color: #edf2ff; } + +html, +body { + font-size: 16px; + line-height: 24px; } + +body { + font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; + color: #313439; + background-color: transparent; } + +a { + color: #3794de; } + +a:hover { + color: #f03c69; } + +h1.title, h1, h2, h3, h4, h5, h6 { + font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; + font-weight: bold; + color: #0d0d0e; + text-rendering: optimizeLegibility; + margin-bottom: 16px; } + +h1.title { + font-size: 60px; + line-height: 64px; + margin-bottom: 8px; } + +h1, +.h1 { + font-size: 48px; + line-height: 52px; } + +h2, +.h2 { + font-size: 36px; + line-height: 40px; } + +h3, +.h3 { + font-size: 24px; + line-height: 32px; } + +h4, +.h4 { + font-size: 21px; + line-height: 32px; } + +h5, +.h5 { + font-size: 18px; + line-height: 28px; } + +h6, +.h6 { + font-size: 16px; + line-height: 24px; } + +h1 a, .h1 a, +h2 a, .h2 a, +h3 a, .h3 a, +h4 a, .h4 a, +h5 a, .h5 a, +h6 a, .h6 a { + color: inherit; } + +p + h2, +p + h3, +p + h4, +p + h5, +p + h6, +ul + h2, +ul + h3, +ul + h4, +ul + h5, +ul + h6, +ol + h2, +ol + h3, +ol + h4, +ol + h5, +ol + h6, +dl + h2, +dl + h3, +dl + h4, +dl + h5, +dl + h6, +blockquote + h2, +blockquote + h3, +blockquote + h4, +blockquote + h5, +blockquote + h6, +hr + h2, +hr + h3, +hr + h4, +hr + h5, +hr + h6, +pre + h2, +pre + h3, +pre + h4, +pre + h5, +pre + h6, +table + h2, +table + h3, +table + h4, +table + h5, +table + h6, +form + h2, +form + h3, +form + h4, +form + h5, +form + h6, +figure + h2, +figure + h3, +figure + h4, +figure + h5, +figure + h6 { + margin-top: 24px; } + +ul, +ul ul, +ul ol, +ol, +ol ul, +ol ol { + margin: 0 0 0 24px; } + +ol ol li { + list-style-type: lower-alpha; } + +ol ol ol li { + list-style-type: lower-roman; } + +nav ul, +nav ol { + margin: 0; + list-style: none; } + nav ul ul, + nav ul ol, + nav ol ul, + nav ol ol { + margin-left: 24px; } + +dl dt { + font-weight: bold; } + +dd { + margin-left: 24px; } + +p, blockquote, hr, pre, ol, ul, dl, table, fieldset, figure, address, form { + margin-bottom: 16px; } + +hr { + border: none; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + margin-top: -1px; } + +blockquote { + padding-left: 1rem; + border-left: 4px solid rgba(0, 0, 0, 0.1); + font-style: italic; + color: rgba(49, 52, 57, 0.65); } + blockquote p { + margin-bottom: .5rem; } + +time, cite, small, figcaption { + font-size: 87.5%; } + +cite { + opacity: .6; } + +abbr[title], dfn[title] { + border-bottom: 1px dotted rgba(0, 0, 0, 0.5); + cursor: help; } + +var { + font-size: 16px; + opacity: .6; + font-style: normal; } + +mark, code, samp, kbd { + position: relative; + top: -1px; + padding: 4px 4px 2px 4px; + display: inline-block; + line-height: 1; + color: rgba(49, 52, 57, 0.85); } + +code { + background: #e0e1e1; } + +mark { + background: #f7ba45; } + +samp { + color: #fff; + background: #1c86f2; } + +kbd { + border: 1px solid rgba(0, 0, 0, 0.1); } + +sub, +sup { + font-size: x-small; + line-height: 0; + margin-left: 1rem/4; + position: relative; } + +sup { + top: 0; } + +sub { + bottom: 1px; } + +pre, code, samp, var, kbd { + font-family: Consolas, Monaco, "Courier New", monospace; } + +pre, code, samp, var, kbd, mark { + font-size: 87.5%; } + +pre, +pre code { + background: #f8f8f8; + padding: 0; + top: 0; + display: block; + line-height: 20px; + color: rgba(49, 52, 57, 0.85); + overflow: none; + white-space: pre-wrap; } + +pre { + padding: 1rem; } + +figcaption { + opacity: .6; } + +figure figcaption { + position: relative; + top: -1rem/2; } + +figure pre { + background: none; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 4px; } + +figure .video-container, +figure pre { + margin-bottom: 8px; } + +.text-left { + text-align: left; } + +.text-center { + text-align: center; } + +.text-right { + text-align: right; } + +ul.unstyled { + margin-left: 0; } + +ul.unstyled, +ul.unstyled ul { + list-style: none; } + +.monospace { + font-family: Consolas, Monaco, "Courier New", monospace; } + +.upper { + text-transform: uppercase; } + +.lower { + text-transform: lowercase; } + +.italic { + font-style: italic !important; } + +.strong { + font-weight: bold !important; } + +.normal { + font-weight: normal !important; } + +.muted { + opacity: .55; } + +a.muted { + color: #0d0d0e; } + +a.muted:hover { + opacity: 1; } + +.black { + color: #0d0d0e; } + +.smaller { + font-size: 12px; + line-height: 20px; } + +.small { + font-size: 14px; + line-height: 20px; } + +.big { + font-size: 18px; + line-height: 28px; } + +.large { + font-size: 20px; + line-height: 32px; } + +.end { + margin-bottom: 0 !important; } + +.highlight { + background-color: #edf2ff; } + +.nowrap, +.nowrap td { + white-space: nowrap; } + +@media (min-width: 768px) and (max-width: 1024px) { + .columns-2, + .columns-3, + .columns-4 { + column-gap: 24px; } + .columns-2 { + column-count: 2; } + .columns-3 { + column-count: 3; } + .columns-4 { + column-count: 4; } } + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; } + @media (max-width: 768px) { + .row { + flex-direction: column; + flex-wrap: nowrap; } } + .row.gutters, + .row.gutters > .row { + margin-left: -2%; } + @media (max-width: 768px) { + .row.gutters, + .row.gutters > .row { + margin-left: 0; } } + .row.gutters > .col, + .row.gutters > .row > .col { + margin-left: 2%; } + @media (max-width: 768px) { + .row.gutters > .col, + .row.gutters > .row > .col { + margin-left: 0; } } + .row.around { + justify-content: space-around; } + .row.between { + justify-content: space-between; } + .row.auto .col { + flex-grow: 1; } + +.col-1 { + width: 8.33333%; } + +.offset-1 { + margin-left: 8.33333%; } + +.col-2 { + width: 16.66667%; } + +.offset-2 { + margin-left: 16.66667%; } + +.col-3 { + width: 25%; } + +.offset-3 { + margin-left: 25%; } + +.col-4 { + width: 33.33333%; } + +.offset-4 { + margin-left: 33.33333%; } + +.col-5 { + width: 41.66667%; } + +.offset-5 { + margin-left: 41.66667%; } + +.col-6 { + width: 50%; } + +.offset-6 { + margin-left: 50%; } + +.col-7 { + width: 58.33333%; } + +.offset-7 { + margin-left: 58.33333%; } + +.col-8 { + width: 66.66667%; } + +.offset-8 { + margin-left: 66.66667%; } + +.col-9 { + width: 75%; } + +.offset-9 { + margin-left: 75%; } + +.col-10 { + width: 83.33333%; } + +.offset-10 { + margin-left: 83.33333%; } + +.col-11 { + width: 91.66667%; } + +.offset-11 { + margin-left: 91.66667%; } + +.col-12 { + width: 100%; } + +.offset-12 { + margin-left: 100%; } + +.gutters > .col-1 { + width: calc(8.33333% - 2%); } + +.gutters > .offset-1 { + margin-left: calc(8.33333% + 2%) !important; } + +.gutters > .col-2 { + width: calc(16.66667% - 2%); } + +.gutters > .offset-2 { + margin-left: calc(16.66667% + 2%) !important; } + +.gutters > .col-3 { + width: calc(25% - 2%); } + +.gutters > .offset-3 { + margin-left: calc(25% + 2%) !important; } + +.gutters > .col-4 { + width: calc(33.33333% - 2%); } + +.gutters > .offset-4 { + margin-left: calc(33.33333% + 2%) !important; } + +.gutters > .col-5 { + width: calc(41.66667% - 2%); } + +.gutters > .offset-5 { + margin-left: calc(41.66667% + 2%) !important; } + +.gutters > .col-6 { + width: calc(50% - 2%); } + +.gutters > .offset-6 { + margin-left: calc(50% + 2%) !important; } + +.gutters > .col-7 { + width: calc(58.33333% - 2%); } + +.gutters > .offset-7 { + margin-left: calc(58.33333% + 2%) !important; } + +.gutters > .col-8 { + width: calc(66.66667% - 2%); } + +.gutters > .offset-8 { + margin-left: calc(66.66667% + 2%) !important; } + +.gutters > .col-9 { + width: calc(75% - 2%); } + +.gutters > .offset-9 { + margin-left: calc(75% + 2%) !important; } + +.gutters > .col-10 { + width: calc(83.33333% - 2%); } + +.gutters > .offset-10 { + margin-left: calc(83.33333% + 2%) !important; } + +.gutters > .col-11 { + width: calc(91.66667% - 2%); } + +.gutters > .offset-11 { + margin-left: calc(91.66667% + 2%) !important; } + +.gutters > .col-12 { + width: calc(100% - 2%); } + +.gutters > .offset-12 { + margin-left: calc(100% + 2%) !important; } + +@media (max-width: 768px) { + [class^='offset-'], + [class*=' offset-'] { + margin-left: 0; } } + +.first { + order: -1; } + +.last { + order: 1; } + +@media (max-width: 768px) { + .row .col { + margin-left: 0; + width: 100%; } + .row.gutters .col { + margin-bottom: 16px; } + .first-sm { + order: -1; } + .last-sm { + order: 1; } } + +table { + border-collapse: collapse; + border-spacing: 0; + max-width: 100%; + width: 100%; + empty-cells: show; + font-size: 15px; + line-height: 24px; } + +table caption { + text-align: left; + font-size: 14px; + font-weight: 500; + color: #676b72; } + +th { + text-align: left; + font-weight: 700; + vertical-align: bottom; } + +td { + vertical-align: top; } + +tr.align-middle td, +td.align-middle { + vertical-align: middle; } + +th, +td { + padding: 1rem 1rem; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); } + th:first-child, + td:first-child { + padding-left: 0; } + th:last-child, + td:last-child { + padding-right: 0; } + +tfoot th, +tfoot td { + color: rgba(49, 52, 57, 0.5); } + +table.bordered td, +table.bordered th { + border: 1px solid rgba(0, 0, 0, 0.05); } + +table.striped tr:nth-child(odd) td { + background: #f8f8f8; } + +table.bordered td:first-child, +table.bordered th:first-child, +table.striped td:first-child, +table.striped th:first-child { + padding-left: 1rem; } + +table.bordered td:last-child, +table.bordered th:last-child, +table.striped td:last-child, +table.striped th:last-child { + padding-right: 1rem; } + +table.unstyled td, +table.unstyled th { + border: none; + padding: 0; } + +fieldset { + font-family: inherit; + border: 1px solid rgba(0, 0, 0, 0.1); + padding: 2rem; + margin-bottom: 2rem; + margin-top: 2rem; } + +legend { + font-weight: bold; + font-size: 12px; + text-transform: uppercase; + padding: 0 1rem; + margin-left: -1rem; + top: 2px; + position: relative; + line-height: 0; } + +input, +textarea, +select { + display: block; + width: 100%; + font-family: inherit; + font-size: 15px; + height: 40px; + outline: none; + vertical-align: middle; + background-color: #fff; + border: 1px solid #d4d4d4; + border-radius: 3px; + box-shadow: none; + padding: 0 12px; } + +input.small, +textarea.small, +select.small { + height: 36px; + font-size: 13px; + padding: 0 12px; + border-radius: 3px; } + +input.big, +textarea.big, +select.big { + height: 48px; + font-size: 17px; + padding: 0 12px; + border-radius: 3px; } + +input:focus, +textarea:focus, +select:focus { + outline: none; + background-color: #fff; + border-color: #1c86f2; + box-shadow: 0 0 1px #1c86f2 inset; } + +input.error, +textarea.error, +select.error { + background-color: rgba(240, 60, 105, 0.1); + border: 1px solid #f583a0; } + input.error:focus, + textarea.error:focus, + select.error:focus { + border-color: #f03c69; + box-shadow: 0 0 1px #f03c69 inset; } + +input.success, +textarea.success, +select.success { + background-color: rgba(53, 190, 177, 0.1); + border: 1px solid #6ad5cb; } + input.success:focus, + textarea.success:focus, + select.success:focus { + border-color: #35beb1; + box-shadow: 0 0 1px #35beb1 inset; } + +input:disabled, input.disabled, +textarea:disabled, +textarea.disabled, +select:disabled, +select.disabled { + resize: none; + opacity: 0.6; + cursor: default; + font-style: italic; + color: rgba(0, 0, 0, 0.5); } + +select { + -webkit-appearance: none; + background-image: url('data:image/svg+xml;utf8,'); + background-repeat: no-repeat; + background-position: right 1rem center; } + +select[multiple] { + background-image: none; + height: auto; + padding: .5rem .75rem; } + +textarea { + height: auto; + padding: 8px 12px; + line-height: 24px; + vertical-align: top; } + +input[type="file"] { + width: auto; + border: none; + padding: 0; + height: auto; + background: none; + box-shadow: none; + display: inline-block; } + +input[type="search"], +input.search { + background-repeat: no-repeat; + background-position: 8px 53%; + background-image: url('data:image/svg+xml;utf8,'); + padding-left: 32px; } + +input[type="radio"], +input[type="checkbox"] { + display: inline-block; + width: auto; + height: auto; + padding: 0; } + +label { + display: block; + color: #313439; + margin-bottom: 4px; + font-size: 15px; } + label.checkbox, + label .desc, + label .success, + label .error { + text-transform: none; + font-weight: normal; } + label.checkbox { + font-size: 16px; + line-height: 24px; + cursor: pointer; + color: inherit; } + label.checkbox input { + margin-top: 0; } + +.form-checkboxes label.checkbox { + display: inline-block; + margin-right: 16px; } + +.req { + position: relative; + top: 1px; + font-weight: bold; + color: #f03c69; + font-size: 110%; } + +.desc { + color: rgba(49, 52, 57, 0.5); + font-size: 12px; + line-height: 20px; } + +span.desc { + margin-left: 4px; } + +div.desc { + margin-top: 4px; + margin-bottom: -8px; } + +.form-buttons button, +.form-buttons .button { + margin-right: 8px; } + +form, +.form-item { + margin-bottom: 2rem; } + +.form > .form-item:last-child { + margin-bottom: 0; } + +.form .row:last-child .form-item { + margin-bottom: 0; } + +.form span.success, +.form span.error { + font-size: 12px; + line-height: 20px; + margin-left: 4px; } + +.form-inline input, +.form-inline textarea, +.form-inline select { + display: inline-block; + width: auto; } + +.append, +.prepend { + display: flex; } + .append input, + .prepend input { + flex: 1; } + .append .button, + .append span, + .prepend .button, + .prepend span { + flex-shrink: 0; } + .append span, + .prepend span { + display: flex; + flex-direction: column; + justify-content: center; + font-weight: normal; + border: 1px solid #d4d4d4; + background-color: #f8f8f8; + padding: 0 .875rem; + color: rgba(0, 0, 0, 0.5); + font-size: 12px; + white-space: nowrap; } + +.prepend input { + border-radius: 0 3px 3px 0; } + +.prepend .button { + margin-right: -1px; + border-radius: 3px 0 0 3px !important; } + +.prepend span { + border-right: none; + border-radius: 3px 0 0 3px; } + +.append input { + border-radius: 3px 0 0 3px; } + +.append .button { + margin-left: -1px; + border-radius: 0 3px 3px 0 !important; } + +.append span { + border-left: none; + border-radius: 0 3px 3px 0; } + +button, +.button { + font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; + font-size: 15px; + color: #fff; + background-color: #1c86f2; + border-radius: 3px; + min-height: 40px; + padding: 8px 20px; + font-weight: 500; + text-decoration: none; + cursor: pointer; + display: inline-block; + line-height: 20px; + border: 1px solid transparent; + vertical-align: middle; + -webkit-appearance: none; } + button i, + .button i { + position: relative; + top: 1px; + margin: 0 2px; } + +input[type="submit"] { + width: auto; } + +button:hover, +.button:hover { + outline: none; + text-decoration: none; + color: #fff; + background-color: #4ca0f5; } + +.button:disabled, +.button.disabled { + cursor: default; + font-style: normal; + color: rgba(255, 255, 255, 0.7); + background-color: rgba(28, 134, 242, 0.7); } + +.button.small { + font-size: 13px; + min-height: 36px; + padding: 6px 20px; + border-radius: 3px; } + +.button.big { + font-size: 17px; + min-height: 48px; + padding: 13px 24px; + border-radius: 3px; } + +.button.large { + font-size: 19px; + min-height: 56px; + padding: 20px 36px; + border-radius: 3px; } + +.button.outline { + background: none; + border-width: 2px; + border-color: #1c86f2; + color: #1c86f2; } + .button.outline:hover { + background: none; + color: rgba(28, 134, 242, 0.6); + border-color: rgba(28, 134, 242, 0.5); } + .button.outline:disabled, .button.outline.disabled { + background: none; + color: rgba(28, 134, 242, 0.7); + border-color: rgba(28, 134, 242, 0.5); } + +.button.inverted { + color: #000; + background-color: #fff; } + .button.inverted:hover { + color: #000; + background-color: white; } + .button.inverted:disabled, .button.inverted.disabled { + color: rgba(0, 0, 0, 0.7); + background-color: rgba(255, 255, 255, 0.7); } + .button.inverted.outline { + background: none; + color: #fff; + border-color: #fff; } + .button.inverted.outline:hover { + color: rgba(255, 255, 255, 0.6); + border-color: rgba(255, 255, 255, 0.5); } + .button.inverted.outline:disabled, .button.inverted.outline.disabled { + background: none; + color: rgba(255, 255, 255, 0.7); + border-color: rgba(255, 255, 255, 0.5); } + .button.inverted:hover { + opacity: .7; } + +.button.round { + border-radius: 56px; } + +.button.raised { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } + +.button.upper { + text-transform: uppercase; + letter-spacing: .04em; + font-size: 13px; } + .button.upper.small { + font-size: 11px; } + .button.upper.big { + font-size: 13px; } + .button.upper.large { + font-size: 15px; } + +.button.secondary { + color: #fff; + background-color: #313439; } + .button.secondary:hover { + color: #fff; + background-color: #606670; } + .button.secondary:disabled, .button.secondary.disabled { + color: rgba(255, 255, 255, 0.7); + background-color: rgba(49, 52, 57, 0.7); } + .button.secondary.outline { + background: none; + color: #313439; + border-color: #313439; } + .button.secondary.outline:hover { + color: rgba(49, 52, 57, 0.6); + border-color: rgba(49, 52, 57, 0.5); } + .button.secondary.outline:disabled, .button.secondary.outline.disabled { + background: none; + color: rgba(49, 52, 57, 0.7); + border-color: rgba(49, 52, 57, 0.5); } + +.label { + display: inline-block; + font-size: 13px; + background: #e0e1e1; + line-height: 18px; + padding: 0 10px; + font-weight: 500; + color: #313439; + border: 1px solid transparent; + vertical-align: middle; + text-decoration: none; + border-radius: 4px; } + .label a, + .label a:hover { + color: inherit; + text-decoration: none; } + +.label.big { + font-size: 14px; + line-height: 24px; + padding: 0 12px; } + +.label.upper { + text-transform: uppercase; + font-size: 11px; } + +.label.outline { + background: none; + border-color: #bdbdbd; } + +.label.badge { + text-align: center; + border-radius: 64px; + padding: 0 6px; } + .label.badge.big { + padding: 0 8px; } + +.label.tag { + padding: 0; + background: none; + border: none; + text-transform: uppercase; + font-size: 11px; } + .label.tag.big { + font-size: 13px; } + +.label.success { + background: #35beb1; + color: #fff; } + .label.success.tag, .label.success.outline { + background: none; + border-color: #35beb1; + color: #35beb1; } + +.label.error { + background: #f03c69; + color: #fff; } + .label.error.tag, .label.error.outline { + background: none; + border-color: #f03c69; + color: #f03c69; } + +.label.warning { + background: #f7ba45; + color: #0d0d0e; } + .label.warning.tag, .label.warning.outline { + background: none; + border-color: #f7ba45; + color: #f7ba45; } + +.label.focus { + background: #1c86f2; + color: #fff; } + .label.focus.tag, .label.focus.outline { + background: none; + border-color: #1c86f2; + color: #1c86f2; } + +.label.black { + background: #0d0d0e; + color: #fff; } + .label.black.tag, .label.black.outline { + background: none; + border-color: #0d0d0e; + color: #0d0d0e; } + +.label.inverted { + background: #fff; + color: #0d0d0e; } + .label.inverted.tag, .label.inverted.outline { + background: none; + border-color: #fff; + color: #fff; } + +.breadcrumbs { + font-size: 14px; + margin-bottom: 24px; } + .breadcrumbs ul { + display: flex; + align-items: center; } + .breadcrumbs.push-center ul { + justify-content: center; } + .breadcrumbs span, + .breadcrumbs a { + font-style: normal; + padding: 0 10px; + display: inline-block; + white-space: nowrap; } + .breadcrumbs li:after { + display: inline-block; + content: '/'; + color: rgba(0, 0, 0, 0.3); } + .breadcrumbs li:last-child:after { + display: none; } + .breadcrumbs li:first-child span, + .breadcrumbs li:first-child a { + padding-left: 0; } + .breadcrumbs li.active a { + color: #313439; + text-decoration: none; + cursor: text; } + +.pagination { + margin: 24px 0; + font-size: 14px; } + .pagination ul { + display: flex; + margin: 0; } + .pagination.align-center ul { + justify-content: center; } + .pagination span, + .pagination a { + border-radius: 3px; + display: inline-block; + padding: 8px 12px; + line-height: 1; + white-space: nowrap; + border: 1px solid transparent; } + .pagination a { + text-decoration: none; + color: #313439; } + .pagination a:hover { + color: rgba(0, 0, 0, 0.5); + border-color: #e0e1e1; } + .pagination span, + .pagination li.active a { + color: rgba(0, 0, 0, 0.5); + border-color: #e0e1e1; + cursor: text; } + .pagination.upper { + font-size: 12px; } + +.pager span { + line-height: 24px; } + +.pager span, +.pager a { + padding-left: 16px; + padding-right: 16px; + border-radius: 64px; + border-color: rgba(0, 0, 0, 0.1); } + +.pager li { + flex-basis: 50%; } + +.pager li.next { + text-align: right; } + +.pager.align-center li { + flex-basis: auto; + margin-left: 4px; + margin-right: 4px; } + +.pager.flat span, +.pager.flat a { + border: none; + display: block; + padding: 0; } + +.pager.flat a { + font-weight: bold; } + .pager.flat a:hover { + background: none; + text-decoration: underline; } + +@media (max-width: 768px) { + .pager.flat ul { + flex-direction: column; } + .pager.flat li { + flex-basis: 100%; + margin-bottom: 8px; + text-align: left; } } + +@font-face { + font-family: 'Kube'; + src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBfgAAAC8AAAAYGNtYXAXVtKOAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZsMn2SAAAAF4AAADeGhlYWQMP9EUAAAE8AAAADZoaGVhB8IDzQAABSgAAAAkaG10eCYABd4AAAVMAAAAMGxvY2EFWASuAAAFfAAAABptYXhwABcAmwAABZgAAAAgbmFtZfMJxocAAAW4AAABYnBvc3QAAwAAAAAHHAAAACAAAwPHAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpBwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6Qf//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAAKAAAAAAQAA8AADwAUACQANABEAFYAaAB4AIgAmAAAEyIGFREUFjMhMjY1ETQmIwUhESEREzgBMSIGFRQWMzI2NTQmIzM4ATEiBhUUFjMyNjU0JiMzOAExIgYVFBYzMjY1NCYjATIWHQEUBiMiJj0BNDYzOAExITIWHQEUBiMiJj0BNDYzOAExATgBMSIGFRQWMzI2NTQmIzM4ATEiBhUUFjMyNjU0JiMzOAExIgYVFBYzMjY1NCYjwFBwcFACgFBwcFD9IQM+/MKrHioqHh4qKh70HioqHh4qKh70HisrHh0rKh7+MBQdHRQUHBwUAbgUHBwUFB0dFP4wHioqHh4qKh70HioqHh4qKh70HisrHh0rKh4DYHBQ/iBQcHBQAeBQcF/9XwKh/n8qHh4qKh4eKioeHioqHh4qKh4eKioeHioCQBwVjhUcHBWOFRwcFY4VHBwVjhUc/rAqHh4qKh4eKioeHioqHh4qKh4eKioeHioAAAABAQAAwAMAAcAACwAAAQcXBycHJzcnNxc3AwDMAjMDAzMCzDTMzAGVqAIrAgIrAqgrqKgAAQGAAEACgAJAAAsAACUnByc3JzcXNxcHFwJVqAIrAgIrAqgrqKhAzAIzAwMzAsw0zMwAAAEBgABAAoACQAALAAABFzcXBxcHJwcnNycBq6gCKwICKwKoK6ioAkDMAjMDAzMCzDTMzAABAQAAwAMAAcAACwAAJTcnNxc3FwcXBycHAQDMAjMDAzMCzDTMzOuoAisCAisCqCuoqAAAAgAP/+UD1AOqAAQACAAAEwEHATcFAScBSwOJPPx3PAOJ/Hc8A4kDqvx3PAOJPDz8dzwDiQAAAAADAIAAgAOAAwAAAwAHAAsAADc1IRUBIRUhESEVIYADAP0AAwD9AAMA/QCAgIABgIABgIAAAgBPAA8DsgNxABgALQAAJQcBDgEjIi4CNTQ+AjMyHgIVFAYHAQEiDgIVFB4CMzI+AjU0LgIjA7JY/t4lWTBBc1YxMVZzQUFzVTIcGQEi/dgxVkAlJUBWMTFWQCUlQFYxZ1gBIRkcMlVzQUFzVjExVnNBMFkm/uACuyVAVjExVkAlJUBWMTFWQCUAAAABAAAAAQAABhlWm18PPPUACwQAAAAAANSQRjkAAAAA1JBGOQAA/+UEAAPAAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAQAAAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAAAAEAAEABAABgAQAAYAEAAEABAAADwQAAIAEAABPAAAAAAAKABQAHgDYAPIBDAEmAUABXAF2AbwAAAABAAAADACZAAoAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABAAAAAEAAAAAAAIABwBFAAEAAAAAAAMABAAtAAEAAAAAAAQABABaAAEAAAAAAAUACwAMAAEAAAAAAAYABAA5AAEAAAAAAAoAGgBmAAMAAQQJAAEACAAEAAMAAQQJAAIADgBMAAMAAQQJAAMACAAxAAMAAQQJAAQACABeAAMAAQQJAAUAFgAXAAMAAQQJAAYACAA9AAMAAQQJAAoANACAS3ViZQBLAHUAYgBlVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwS3ViZQBLAHUAYgBlS3ViZQBLAHUAYgBlUmVndWxhcgBSAGUAZwB1AGwAYQByS3ViZQBLAHUAYgBlRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format("truetype"); + font-weight: normal; + font-style: normal; } + +[class^="kube-"], [class*=" kube-"], .close, .caret { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'Kube' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } + +.kube-calendar:before { + content: "\e900"; } + +.caret.down:before, +.kube-caret-down:before { + content: "\e901"; } + +.caret.left:before, +.kube-caret-left:before { + content: "\e902"; } + +.caret.right:before, +.kube-caret-right:before { + content: "\e903"; } + +.caret.up:before, +.kube-caret-up:before { + content: "\e904"; } + +.close:before, +.kube-close:before { + content: "\e905"; } + +.kube-menu:before { + content: "\e906"; } + +.kube-search:before { + content: "\e907"; } + +.gutters .column.push-left, +.push-left { + margin-right: auto; } + +.gutters .column.push-right, +.push-right { + margin-left: auto; } + +.gutters .column.push-center, +.push-center { + margin-left: auto; + margin-right: auto; } + +.gutters .column.push-middle, +.push-middle { + margin-top: auto; + margin-bottom: auto; } + +.push-bottom { + margin-top: auto; } + +@media (max-width: 768px) { + .gutters .column.push-left-sm, + .push-left-sm { + margin-left: 0; } + .gutters .column.push-center-sm, + .push-center-sm { + margin-left: auto; + margin-right: auto; } + .push-top-sm { + margin-top: 0; } } + +.align-middle { + align-items: center; } + +.align-right { + justify-content: flex-end; } + +.align-center { + justify-content: center; } + +@media (max-width: 768px) { + .align-left-sm { + justify-content: flex-start; } } + +.float-right { + float: right; } + +.float-left { + float: left; } + +@media (max-width: 768px) { + .float-right { + float: none; } + .float-left { + float: none; } } + +.fixed { + position: fixed; + top: 0; + left: 0; + z-index: 100; + width: 100%; } + +.w5 { + width: 5%; } + +.w10 { + width: 10%; } + +.w15 { + width: 15%; } + +.w20 { + width: 20%; } + +.w25 { + width: 25%; } + +.w30 { + width: 30%; } + +.w35 { + width: 35%; } + +.w40 { + width: 40%; } + +.w45 { + width: 45%; } + +.w50 { + width: 50%; } + +.w55 { + width: 55%; } + +.w60 { + width: 60%; } + +.w65 { + width: 65%; } + +.w70 { + width: 70%; } + +.w75 { + width: 75%; } + +.w80 { + width: 80%; } + +.w85 { + width: 85%; } + +.w90 { + width: 90%; } + +.w95 { + width: 95%; } + +.w100 { + width: 100%; } + +.w-auto { + width: auto; } + +.w-small { + width: 480px; } + +.w-medium { + width: 600px; } + +.w-big { + width: 740px; } + +.w-large { + width: 840px; } + +@media (max-width: 768px) { + .w-auto-sm { + width: auto; } + .w100-sm, + .w-small, + .w-medium, + .w-big, + .w-large { + width: 100%; } } + +.max-w5 { + max-width: 5%; } + +.max-w10 { + max-width: 10%; } + +.max-w15 { + max-width: 15%; } + +.max-w20 { + max-width: 20%; } + +.max-w25 { + max-width: 25%; } + +.max-w30 { + max-width: 30%; } + +.max-w35 { + max-width: 35%; } + +.max-w40 { + max-width: 40%; } + +.max-w45 { + max-width: 45%; } + +.max-w50 { + max-width: 50%; } + +.max-w55 { + max-width: 55%; } + +.max-w60 { + max-width: 60%; } + +.max-w65 { + max-width: 65%; } + +.max-w70 { + max-width: 70%; } + +.max-w75 { + max-width: 75%; } + +.max-w80 { + max-width: 80%; } + +.max-w85 { + max-width: 85%; } + +.max-w90 { + max-width: 90%; } + +.max-w95 { + max-width: 95%; } + +.max-w100 { + max-width: 100%; } + +.max-w-small { + max-width: 480px; } + +.max-w-medium { + max-width: 600px; } + +.max-w-big { + max-width: 740px; } + +.max-w-large { + max-width: 840px; } + +@media (max-width: 768px) { + .max-w-auto-sm, + .max-w-small, + .max-w-medium, + .max-w-big, + .max-w-large { + max-width: auto; } } + +.min-w5 { + min-width: 5%; } + +.min-w10 { + min-width: 10%; } + +.min-w15 { + min-width: 15%; } + +.min-w20 { + min-width: 20%; } + +.min-w25 { + min-width: 25%; } + +.min-w30 { + min-width: 30%; } + +.min-w35 { + min-width: 35%; } + +.min-w40 { + min-width: 40%; } + +.min-w45 { + min-width: 45%; } + +.min-w50 { + min-width: 50%; } + +.min-w55 { + min-width: 55%; } + +.min-w60 { + min-width: 60%; } + +.min-w65 { + min-width: 65%; } + +.min-w70 { + min-width: 70%; } + +.min-w75 { + min-width: 75%; } + +.min-w80 { + min-width: 80%; } + +.min-w85 { + min-width: 85%; } + +.min-w90 { + min-width: 90%; } + +.min-w95 { + min-width: 95%; } + +.min-w100 { + min-width: 100%; } + +.h25 { + height: 25%; } + +.h50 { + height: 50%; } + +.h100 { + height: 100%; } + +.group:after { + content: ''; + display: table; + clear: both; } + +.flex { + display: flex; } + +@media (max-width: 768px) { + .flex-column-sm { + flex-direction: column; } + .flex-w100-sm { + flex: 0 0 100%; } } + @media (max-width: 768px) and (max-width: 768px) { + .flex-w100-sm { + flex: 0 0 100% !important; } } + +.invisible { + visibility: hidden; } + +.visible { + visibility: visible; } + +.display-block { + display: block; } + +.hide { + display: none !important; } + +@media (max-width: 768px) { + .hide-sm { + display: none !important; } } + +@media (min-width: 768px) { + .show-sm { + display: none !important; } } + +@media print { + .hide-print { + display: none !important; } + .show-print { + display: block !important; } } + +.no-scroll { + overflow: hidden; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100% !important; } + +.scrollbar-measure { + position: absolute; + top: -9999px; + width: 50px; + height: 50px; + overflow: scroll; } + +.video-container { + height: 0; + padding-bottom: 56.25%; + position: relative; + margin-bottom: 16px; } + .video-container iframe, + .video-container object, + .video-container embed { + position: absolute; + top: 0; + left: 0; + width: 100% !important; + height: 100% !important; } + +.close { + display: inline-block; + min-height: 16px; + min-width: 16px; + line-height: 16px; + vertical-align: middle; + text-align: center; + font-size: 12px; + opacity: .6; } + .close:hover { + opacity: 1; } + .close.small { + font-size: 8px; } + .close.big { + font-size: 18px; } + .close.white { + color: #fff; } + +.caret { + display: inline-block; } + +.button .caret { + margin-right: -8px; } + +.overlay { + position: fixed; + z-index: 200; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(255, 255, 255, 0.95); } + .overlay > .close { + position: fixed; + top: 1rem; + right: 1rem; } + +@media print { + * { + 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; } + p, h2, h3 { + orphans: 3; + widows: 3; } + thead { + display: table-header-group; } + tr, img { + page-break-inside: avoid; } + img { + max-width: 100% !important; } + h2, h3, h4 { + page-break-after: avoid; } + @page { + margin: 0.5cm; } } + +@keyframes slideUp { + to { + height: 0; + padding-top: 0; + padding-bottom: 0; } } + +@keyframes slideDown { + from { + height: 0; + padding-top: 0; + padding-bottom: 0; } } + +@keyframes fadeIn { + from { + opacity: 0; } + to { + opacity: 1; } } + +@keyframes fadeOut { + from { + opacity: 1; } + to { + opacity: 0; } } + +@keyframes flipIn { + from { + opacity: 0; + transform: scaleY(0); } + to { + opacity: 1; + transform: scaleY(1); } } + +@keyframes flipOut { + from { + opacity: 1; + transform: scaleY(1); } + to { + opacity: 0; + transform: scaleY(0); } } + +@keyframes zoomIn { + from { + opacity: 0; + transform: scale3d(0.3, 0.3, 0.3); } + 50% { + opacity: 1; } } + +@keyframes zoomOut { + from { + opacity: 1; } + 50% { + opacity: 0; + transform: scale3d(0.3, 0.3, 0.3); } + to { + opacity: 0; } } + +@keyframes slideInRight { + from { + transform: translate3d(100%, 0, 0); + visibility: visible; } + to { + transform: translate3d(0, 0, 0); } } + +@keyframes slideInLeft { + from { + transform: translate3d(-100%, 0, 0); + visibility: visible; } + to { + transform: translate3d(0, 0, 0); } } + +@keyframes slideInDown { + from { + transform: translate3d(0, -100%, 0); + visibility: visible; } + to { + transform: translate3d(0, 0, 0); } } + +@keyframes slideOutLeft { + from { + transform: translate3d(0, 0, 0); } + to { + visibility: hidden; + transform: translate3d(-100%, 0, 0); } } + +@keyframes slideOutRight { + from { + transform: translate3d(0, 0, 0); } + to { + visibility: hidden; + transform: translate3d(100%, 0, 0); } } + +@keyframes slideOutUp { + from { + transform: translate3d(0, 0, 0); } + to { + visibility: hidden; + transform: translate3d(0, -100%, 0); } } + +@keyframes rotate { + from { + transform: rotate(0deg); } + to { + transform: rotate(360deg); } } + +@keyframes pulse { + from { + transform: scale3d(1, 1, 1); } + 50% { + transform: scale3d(1.03, 1.03, 1.03); } + to { + transform: scale3d(1, 1, 1); } } + +@keyframes shake { + 15% { + transform: translateX(0.5rem); } + 30% { + transform: translateX(-0.4rem); } + 45% { + transform: translateX(0.3rem); } + 60% { + transform: translateX(-0.2rem); } + 75% { + transform: translateX(0.1rem); } + 90% { + transform: translateX(0); } + 90% { + transform: translateX(0); } } + +.fadeIn { + animation: fadeIn 250ms; } + +.fadeOut { + animation: fadeOut 250ms; } + +.zoomIn { + animation: zoomIn 200ms; } + +.zoomOut { + animation: zoomOut 500ms; } + +.slideInRight { + animation: slideInRight 500ms; } + +.slideInLeft { + animation: slideInLeft 500ms; } + +.slideInDown { + animation: slideInDown 500ms; } + +.slideOutLeft { + animation: slideOutLeft 500ms; } + +.slideOutRight { + animation: slideOutRight 500ms; } + +.slideOutUp { + animation: slideOutUp 500ms; } + +.slideUp { + overflow: hidden; + animation: slideUp 200ms ease-in-out; } + +.slideDown { + overflow: hidden; + animation: slideDown 80ms ease-in-out; } + +.flipIn { + animation: flipIn 250ms cubic-bezier(0.5, -0.5, 0.5, 1.5); } + +.flipOut { + animation: flipOut 500ms cubic-bezier(0.5, -0.5, 0.5, 1.5); } + +.rotate { + animation: rotate 500ms; } + +.pulse { + animation: pulse 250ms 2; } + +.shake { + animation: shake 500ms; } + +.dropdown { + position: absolute; + z-index: 100; + top: 0; + right: 0; + width: 280px; + color: #000; + font-size: 15px; + background: #fff; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); + border-radius: 3px; + max-height: 300px; + margin: 0; + padding: 0; + overflow: hidden; } + .dropdown.dropdown-mobile { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + max-height: none; + border: none; } + .dropdown .close { + margin: 20px auto; } + .dropdown.open { + overflow: auto; } + .dropdown ul { + list-style: none; + margin: 0; } + .dropdown ul li { + border-bottom: 1px solid rgba(0, 0, 0, 0.07); } + .dropdown ul li:last-child { + border-bottom: none; } + .dropdown ul a { + display: block; + padding: 12px; + text-decoration: none; + color: #000; } + .dropdown ul a:hover { + background: rgba(0, 0, 0, 0.05); } + +.message { + font-family: Consolas, Monaco, "Courier New", monospace; + font-size: 14px; + line-height: 20px; + background: #e0e1e1; + color: #313439; + padding: 1rem; + padding-right: 2.5em; + padding-bottom: .75rem; + margin-bottom: 24px; + position: relative; } + .message a { + color: inherit; } + .message h2, + .message h3, + .message h4, + .message h5, + .message h6 { + margin-bottom: 0; } + .message .close { + position: absolute; + right: 1rem; + top: 1.1rem; } + +.message.error { + background: #f03c69; + color: #fff; } + +.message.success { + background: #35beb1; + color: #fff; } + +.message.warning { + background: #f7ba45; } + +.message.focus { + background: #1c86f2; + color: #fff; } + +.message.black { + background: #0d0d0e; + color: #fff; } + +.message.inverted { + background: #fff; } + +.modal-box { + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + overflow-x: hidden; + overflow-y: auto; + z-index: 200; } + +.modal { + position: relative; + margin: auto; + margin-top: 16px; + padding: 0; + background: #fff; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); + border-radius: 8px; + color: #000; } + @media (max-width: 768px) { + .modal input, + .modal textarea { + font-size: 16px; } } + .modal .close { + position: absolute; + top: 18px; + right: 16px; + opacity: .3; } + .modal .close:hover { + opacity: 1; } + +.modal-header { + padding: 24px 32px; + font-size: 18px; + font-weight: bold; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); } + .modal-header:empty { + display: none; } + +.modal-body { + padding: 36px 56px; } + +@media (max-width: 768px) { + .modal-header, + .modal-body { + padding: 24px; } } + +.offcanvas { + background: #fff; + position: fixed; + padding: 24px; + height: 100%; + top: 0; + left: 0; + z-index: 300; + overflow-y: scroll; } + +.offcanvas .close { + position: absolute; + top: 8px; + right: 8px; } + +.offcanvas-left { + border-right: 1px solid rgba(0, 0, 0, 0.1); } + +.offcanvas-right { + left: auto; + right: 0; + border-left: 1px solid rgba(0, 0, 0, 0.1); } + +.offcanvas-push-body { + position: relative; } + +.tabs { + margin-bottom: 24px; + font-size: 14px; } + .tabs li em, + .tabs li.active a { + color: #313439; + border: 1px solid rgba(0, 0, 0, 0.1); + cursor: default; + text-decoration: none; + background: none; } + .tabs em, + .tabs a { + position: relative; + top: 1px; + font-style: normal; + display: block; + padding: .5rem 1rem; + border: 1px solid transparent; + color: rgba(0, 0, 0, 0.5); + text-decoration: none; } + .tabs a:hover { + -moz-transition: all linear 0.2s; + transition: all linear 0.2s; + color: #313439; + text-decoration: underline; + background-color: #e0e1e1; } + +@media (min-width: 768px) { + .tabs ul { + display: flex; + margin-top: -1px; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); } + .tabs li em, + .tabs li.active a { + border-bottom: 1px solid #fff; } } diff --git a/docs/themes/oscalkit/static/css/kube.demo.css b/docs/themes/oscalkit/static/css/kube.demo.css new file mode 100644 index 00000000..f4abaec8 --- /dev/null +++ b/docs/themes/oscalkit/static/css/kube.demo.css @@ -0,0 +1,404 @@ +body { + font-family: Lato, sans-serif; } + +h1.title, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { + font-family: Lato, sans-serif; } + +button, .button { + font-family: Lato, sans-serif; } + +.media { + padding: 24px; + border: 1px solid rgba(0, 0, 0, 0.07); + border-radius: 3px; + margin-bottom: 24px; + max-width: 400px; + display: flex; + align-items: flex-start; } + .media img { + margin: 4px 0; } + .media .media-body { + margin-left: 16px; } + .media .media-body h5 { + margin-bottom: 0; } + .media .media-body p { + margin-bottom: 0; } + +.section-head { + font-size: 24px; + line-height: 32px; + margin-top: 48px; + font-weight: 900; } + .section-head:after { + content: '#'; + font-size: 15px; + font-weight: normal; + line-height: 1; + color: rgba(0, 0, 0, 0.3); + margin-left: 8px; + position: relative; + top: -1px; } + .section-head a { + text-decoration: none; } + +.section-item-desc { + font-family: Consolas, Monaco, "Courier New", monospace; + font-size: 12px; + color: rgba(0, 0, 0, 0.5); } + +.example { + border: 1px solid rgba(0, 0, 0, 0.07); + padding: 32px; + margin-bottom: 16px; } + .example pre.code { + margin-top: 40px; + margin-bottom: 0; + background: none; + padding: 0; } + .example.bg-darkgray { + background: #313439; } + .example.bg-darkgray pre.code { + color: rgba(255, 255, 255, 0.85); } + +.demo-muted-link, +.demo-muted-link:hover { + text-decoration: none; + color: rgba(0, 0, 0, 0.3); } + +.demo-animation-wrap { + margin-bottom: 24px; } + .demo-animation-wrap:after { + content: ''; + display: table; + clear: both; } + +.demo-animation-box { + float: left; + margin-right: 16px; + width: 202px; + height: 82px; + border: 1px dashed rgba(0, 0, 0, 0.15); } + .demo-animation-box > div { + width: 200px; + height: 80px; + background: #f8f8f8; + text-align: center; + line-height: 80px; + color: rgba(0, 0, 0, 0.4); + font-size: 18px; } + +.demo-animation-btn { + font-size: 13px; + text-transform: uppercase; + font-weight: bold; + display: inline-block; + width: 200px; + margin-right: 16px; } + +.demo-sizing > div { + font-family: Consolas, Monaco, "Courier New", monospace; + font-size: 11px; + padding-left: 4px; + background: #d8e9fa; + margin-bottom: 4px; } + +.demo-grid .row { + margin-bottom: 4px; + background: #ebf4fc; } + +.demo-grid .row.gutters { + background: none; } + +.demo-grid .col { + font-family: Consolas, Monaco, "Courier New", monospace; + font-size: 12px; + padding: 8px 12px; + background: #d8e9fa; + border-left: 1px solid rgba(0, 0, 0, 0.1); } + +.demo-grid .demo-col-nested { + border-left: none; + padding: 0; } + .demo-grid .demo-col-nested .row { + margin-bottom: 0; } + +#demo-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; } + +#demo-sidebar { + flex: 0 0 300px; + background: #c4def7; } + +#demo-content { + flex: auto; + background: #ebf4fc; } + +#demo-sidebar, +#demo-content { + font-family: Consolas, Monaco, "Courier New", monospace; + font-size: 12px; + padding: 8px 12px; + min-height: 80px; } + +#demo-media-grid { + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; + -webkit-column-gap: 2%; + -moz-column-gap: 2%; + column-gap: 2%; } + #demo-media-grid > div { + display: inline-block; + width: 100%; } + @media (max-width: 768px) { + #demo-media-grid { + -webkit-column-count: 1; + -moz-column-count: 1; + column-count: 1; } } + #demo-media-grid > div { + font-family: Consolas, Monaco, "Courier New", monospace; + font-size: 12px; + padding: 8px 12px; + background: #eae2f2; + text-align: center; + margin-bottom: 20px; + height: 80px; } + #demo-media-grid > div:nth-child(2n) { + height: 200px; } + #demo-media-grid > div:nth-child(5n) { + height: 120px; } + +.button.red { + color: #fff; + background-color: #ff3366; } + .button.red:hover { + color: #fff; + background-color: #ff99b3; } + .button.red:disabled, .button.red.disabled { + color: rgba(255, 255, 255, 0.7); + background-color: rgba(255, 51, 102, 0.7); } + .button.red.outline { + background: none; + color: #ff3366; + border-color: #ff3366; } + .button.red.outline:hover { + color: rgba(255, 51, 102, 0.6); + border-color: rgba(255, 51, 102, 0.5); } + .button.red.outline:disabled, .button.red.outline.disabled { + background: none; + color: rgba(255, 51, 102, 0.7); + border-color: rgba(255, 51, 102, 0.5); } + +.label.custom { + background: #ea48a7; + color: #fff; } + .label.custom.tag, .label.custom.outline { + background: none; + border-color: #ea48a7; + color: #ea48a7; } + +#breadcrumbs-custom-separator li:after { + content: '>'; } + +.demo-gradient { + height: 40px; + margin-bottom: 24px; } + +.demo-gradient-vertical { + background-color: #5faac8; + background-image: linear-gradient(to bottom, #5faac8 0%, #65ccb8 100%); } + +.demo-gradient-vertical-to-opacity { + background: linear-gradient(to bottom, #5faac8 0%, rgba(95, 170, 200, 0) 100%); } + +.demo-gradient-horizontal { + background-color: #5faac8; + background: linear-gradient(to right, #5faac8 0%, #65ccb8 100%); } + +.demo-gradient-horizontal-to-opacity { + background: linear-gradient(to right, #5faac8 0%, rgba(95, 170, 200, 0) 100%); } + +.demo-gradient-radial { + background-image: radial-gradient(circle, #5faac8, #65ccb8); } + +.example-inverted-box { + display: inline-block; + padding: 6px 8px 6px 8px; + line-height: 1; + vertical-align: middle; + background: #d4d4d4; } + +#livetabs { + margin-bottom: 24px; + font-size: 14px; } + +#livetabs ul { + display: flex; } + +#livetabs a { + color: #000; + text-decoration: none; + background: #f4f4f4; + border-radius: 4px; + padding: 4px 12px; + border: 1px solid transparent; } + #livetabs a:hover { + opacity: .7; } + +#livetabs li { + margin-right: 4px; } + +#livetabs li.active a { + background: #fff; + border-color: #eee; + color: rgba(0, 0, 0, 0.5); + cursor: default; } + #livetabs li.active a:hover { + opacity: 1; } + +.togglebox-box { + padding: 24px; + padding-bottom: 16px; + background: #f8f8f8; + margin-bottom: 24px; } + +#navbar-demo { + display: flex; + align-items: center; + background: #f8f8f8; + padding: 24px 20px; + margin-bottom: 24px; } + +#navbar-brand { + margin-right: 24px; } + +#navbar-main ul:after { + content: ''; + display: table; + clear: both; } + +#navbar-main li { + float: left; + margin-right: 20px; } + +#navbar-demo.fixed { + background: rgba(255, 255, 255, 0.98); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } + +#navbar-main li a { + color: #000; + text-decoration: none; + display: block; } + #navbar-main li a:hover { + -moz-transition: all linear 0.2s; + transition: all linear 0.2s; + color: rgba(0, 0, 0, 0.6); + text-decoration: underline; } + +@media (max-width: 768px) { + #navbar-demo { + flex-direction: column; + text-align: center; } + #navbar-brand { + margin: 0; + margin-bottom: 20px; } + #navbar-main li { + float: none; + margin: 0; + margin-bottom: 20px; } } + +#demo-nav-collapse, +#demo-nav-collapse ul { + margin-left: 0; + list-style: none; } + +#demo-nav-collapse li { + line-height: 32px; } + +#demo-nav-collapse ul { + margin-left: 20px; + font-size: 14px; } + +#demo-nav-collapse a { + color: #000; + text-decoration: none; + display: block; } + #demo-nav-collapse a:hover { + -moz-transition: all linear 0.2s; + transition: all linear 0.2s; + color: rgba(0, 0, 0, 0.6); + text-decoration: underline; } + +.my-collapse { + margin-bottom: 24px; } + +.my-collapse h4 { + background: #f4f4f4; + padding: 8px 16px; + margin-bottom: 1px; + font-size: 15px; + line-height: 24px; } + +.my-collapse h4 a { + text-decoration: none; + color: #000; + display: block; } + +.my-collapse div { + border: 1px solid rgba(0, 0, 0, 0.1); + padding: 24px 32px 1px; + margin-bottom: 1px; } + +.swatch-box { + text-align: center; } + +.swatch-item { + display: inline-block; + margin: 24px; } + .swatch-item h5 { + font-family: Consolas, Monaco, "Courier New", monospace; + font-weight: bold; + font-size: 14px; + line-height: 24px; + margin-bottom: 0; } + .swatch-item p { + font-family: Consolas, Monaco, "Courier New", monospace; + font-size: 12px; + line-height: 20px; + color: rgba(46, 47, 51, 0.65); } + +.swatch { + display: inline-block; + height: 120px; + width: 120px; + border-radius: 120px; + margin-bottom: 8px; } + +.swatch-bg-headings { + background: #0d0d0e; } + +.swatch-bg-text { + background: #313439; } + +.swatch-bg-link { + background: #007eff; } + +.swatch-bg-link-hover { + background: #ff3366; } + +.swatch-bg-button-primary { + background: #007eff; } + +.swatch-bg-button-secondary { + background: #313439; } + +.swatch-bg-inverted { + background: #fff; } + +.swatch-bg-inverted { + position: relative; + bottom: -8px; + margin-top: -8px; + border: 8px solid #f8f8f8; } diff --git a/docs/themes/oscalkit/static/css/kube.legenda.css b/docs/themes/oscalkit/static/css/kube.legenda.css new file mode 100644 index 00000000..5e5288dd --- /dev/null +++ b/docs/themes/oscalkit/static/css/kube.legenda.css @@ -0,0 +1,406 @@ +.autocomplete { + position: absolute; + z-index: 1000; + left: 0; + display: none; + margin: 0; + list-style: none; + background: #fff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); + max-height: 250px; + overflow: auto; + font-size: 14px; } + .autocomplete a { + padding: 4px 10px; + color: #000; + display: block; + text-decoration: none; } + .autocomplete a:hover { + background: rgba(0, 0, 0, 0.05); } + .autocomplete a.active { + background: #007eff; + color: #fff; } + +.cardform label { + display: block; + text-transform: uppercase; + font-size: 12px; + color: rgba(0, 0, 0, 0.5); } + +.cardform-view select, +.cardform-view textarea, +.cardform-view input { + border: none !important; + background: none; + padding: 0; + cursor: text; + -webkit-appearance: none; } + .cardform-view select:focus, + .cardform-view textarea:focus, + .cardform-view input:focus { + box-shadow: none; + background: none; + outline: none; } + +.cardform-controls { + margin-bottom: 24px; } + +.combobox { + position: relative; } + .combobox input { + padding-right: 32px; + width: 100%; } + .combobox .caret { + position: absolute; + z-index: 2; + top: 0; + right: 0; + height: 100%; + width: 32px; } + .combobox .caret:before { + top: 45%; + left: 12px; } + +.combobox-list { + z-index: 1000; + position: absolute; + left: 0; + margin: 0; + list-style: none; + background: #fff; + font-size: 14px; + width: 100%; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); + max-height: 250px; + font-weight: normal; + overflow: auto; } + .combobox-list li { + padding: 4px 10px; + color: #000; + cursor: pointer; } + .combobox-list li:hover { + background: rgba(0, 0, 0, 0.05); } + .combobox-list li.active { + background: #007eff; + color: #fff; } + +.datepicker { + position: absolute; + background: #fff; + top: 0; + left: 0; + line-height: 24px; + padding: 20px 24px; + border-radius: 3px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } + .datepicker.datepicker-embed { + position: static; + box-shadow: none; + border: 1px solid rgba(0, 0, 0, 0.1); } + +.datepicker-head { + position: relative; + padding-bottom: 8px; } + +.datepicker-controls { + position: absolute; + top: 0; + right: 0; } + +.datepicker-control { + float: left; + width: 24px; + height: 24px; + background: #eee; + border-radius: 3px; + text-align: center; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -khtml-user-select: none; + -ms-user-select: none; + user-select: none; } + +.datepicker-control-next { + margin-left: 4px; } + +.datepicker-month-box { + font-size: 14px; + color: #000; + font-weight: bold; + padding-left: 4px; + height: 24px; } + +.datepicker-select-year { + display: inline-block; + cursor: pointer; + background: #eee; + padding: 0 8px; + position: relative; + border-radius: 3px; + height: 24px; + line-height: 24px; } + .datepicker-select-year .datepicker-select-year-caret { + position: relative; + top: -1px; + display: inline-block; + width: 0; + height: 0; + margin-left: .3em; + vertical-align: middle; + border-top: 4px solid; + border-right: 4px solid transparent; + border-left: 4px solid transparent; } + .datepicker-select-year select { + z-index: 2; + position: absolute; + top: 0; + left: 0; + opacity: 0; + height: 24px; + -webkit-appearance: menulist-button; + -moz-appearance: menulist-button; + -ms-appearance: menulist-button; + appearance: menulist-button; } + +.datepicker-weekdays { + white-space: nowrap; } + .datepicker-weekdays span { + display: inline-block; + text-align: center; + width: 28px; + height: 28px; + margin: 0 2px; + font-size: 12px; + font-weight: bold; + color: rgba(0, 0, 0, 0.5); } + +.datepicker-row { + white-space: nowrap; } + +.datepicker-cell { + display: inline-block; + text-align: center; + width: 28px; + height: 28px; + margin: 0 2px; + font-size: 12px; } + .datepicker-cell a { + display: block; + color: #000; + text-decoration: none; + border-radius: 40px; } + .datepicker-cell a:hover { + background: #eee; } + .datepicker-cell.datepicker-day-hidden a { + visibility: hidden; } + .datepicker-cell.datepicker-day-weekend a { + color: rgba(0, 0, 0, 0.4); + font-weight: bold; } + .datepicker-cell.datepicker-day-today a { + background: #f23d3d; + color: #fff; } + .datepicker-cell.datepicker-day-last a { + background: none; + color: rgba(0, 0, 0, 0.4); } + .datepicker-cell.datepicker-day-last a:hover { + color: #000; } + .datepicker-cell.datepicker-day-selected a { + background: #3d79f2; + color: #fff; } + .datepicker-cell.datepicker-day-selected a:hover { + color: #fff; } + .datepicker-cell.datepicker-day-disabled a, + .datepicker-cell.datepicker-day-disabled a:hover { + background: none !important; + color: rgba(0, 0, 0, 0.3) !important; + cursor: default; } + +.editable[placeholder]:empty:before { + content: attr(placeholder); + color: rgba(0, 0, 0, 0.4); + font-weight: normal; } + +.editable[placeholder]:empty:focus:before { + content: ""; } + +.livesearch-box { + position: relative; + display: block; + width: 100%; } + .livesearch-box input { + min-width: 120px; } + .livesearch-box .close { + position: absolute; + top: 50%; + margin-top: -6px; + right: 8px; } + +.livesearch-dropdown { + position: absolute; + z-index: 1000; + margin: 0; + list-style: none; + background: #fff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); + max-height: 250px; + overflow: auto; } + +.loader { + display: inline-block; + margin: auto; + position: relative; + width: 32px; + height: 32px; } + .loader.small { + width: 20px; + height: 20px; } + +button .loader { + margin-bottom: -4px; } + +.loader-spinner { + width: 100%; + height: 100%; + border-radius: 50%; + margin: auto; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; + border: 4px solid rgba(0, 0, 0, 0.25); + border-bottom-color: #000; + -webkit-animation: rotate 2s linear 0s infinite; + animation: rotate 2s linear 0s infinite; } + +.notification { + position: fixed; + top: 1rem; + right: 1rem; + padding: .75rem 1rem; + padding-bottom: .5rem; + font-family: Consolas, Monaco, "Courier New", monospace; + font-size: 14px; + line-height: 20px; + background: #e0e1e1; + color: #313439; + font-weight: bold; + min-width: 220px; + max-width: 280px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } + @media (max-width: 768px) { + .notification { + max-width: 100%; + left: 1rem; } } + +@keyframes progress-bar-stripes { + from { + background-position: 40px 0; } + to { + background-position: 0 0; } } + +.progress { + background: #d4d4d4; + height: 12px; } + .progress.absolute { + position: absolute; + top: 0; + left: 0; + width: 100%; } + .progress > div { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); + -webkit-animation: progress-bar-stripes 2s linear infinite; + -moz-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; + font-size: 10px; + line-height: 10px; + color: #fff; + padding: 1px 2px; + height: 100%; + background-color: #007eff; + background-size: 40px 40px; } + .progress > div:empty { + padding: 1px 0; } + +.selector { + position: relative; + display: inline-block; } + +.selector select { + z-index: 2; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + height: 100%; + width: 100%; + opacity: 0; + -webkit-appearance: menulist-button; + -moz-appearance: menulist-button; + -ms-appearance: menulist-button; + appearance: menulist-button; } + +.selector-trigger-box { + cursor: pointer; + position: relative; + display: block; + z-index: 1; + width: 100%; + padding-right: 8px; } + +.upload-box { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + position: relative; + font-size: 12px; + line-height: 20px; + width: 100%; + min-height: 80px; + border: 2px dashed #d4d4d4; + background: #e0e1e1; + cursor: pointer; + overflow: hidden; + text-align: center; } + +.upload-placeholder { + opacity: .6; } + +.upload-hover, +.upload-error { + border-color: rgba(0, 0, 0, 0.2); } + +.upload-hover { + background-color: rgba(0, 126, 255, 0.1); } + +.upload-error { + background-color: rgba(255, 51, 102, 0.1); } + +div.upload-target { + display: flex; } + +ol.upload-target, +ul.upload-target { + list-style: none; + margin-left: 0; } + ol.upload-target li, + ul.upload-target li { + display: flex; } + ol.upload-target .close, + ul.upload-target .close { + top: 2px; } + +.upload-target .close { + order: 1; + background: #d4d4d4; + border-radius: 20px; + margin-left: 4px; + width: 20px; + height: 20px; + line-height: 20px; } diff --git a/docs/themes/oscalkit/static/css/kube.min.css b/docs/themes/oscalkit/static/css/kube.min.css new file mode 100644 index 00000000..db60f9f5 --- /dev/null +++ b/docs/themes/oscalkit/static/css/kube.min.css @@ -0,0 +1 @@ +.button,body,button,h1,h1.title,h2,h3,h4,h5,h6{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif}hr,iframe{border:none}cite,figcaption,var{opacity:.6}figure pre,kbd{border:1px solid rgba(0,0,0,.1)}.dropdown ul,nav ol,nav ul,ul.unstyled,ul.unstyled ul{list-style:none}audio,img,table,video{max-width:100%}input,select,td.align-middle,textarea,tr.align-middle td{vertical-align:middle}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}*{margin:0;padding:0;outline:0;-webkit-overflow-scrolling:touch}img,video{height:auto}svg{max-height:100%}::-moz-focus-inner{border:0;padding:0}input[type=radio],input[type=checkbox]{vertical-align:middle;position:relative;bottom:.15rem;font-size:115%;margin-right:3px}input[type=search]{-webkit-appearance:textfield}.button,button,select{-webkit-appearance:none}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}.inverted{color:#fff}.error{color:#f03c69}.success{color:#35beb1}.warning{color:#f7ba45}.focus{color:#1c86f2}.aluminum{color:#f8f8f8}.silver{color:#e0e1e1}.lightgray{color:#d4d4d4}.gray{color:#bdbdbd}.midgray{color:#676b72}.darkgray,body{color:#313439}.bg-black{background-color:#0d0d0e}.bg-inverted{background-color:#fff}.bg-error{background-color:#f03c69}.bg-success{background-color:#35beb1}.bg-warning{background-color:#f7ba45}.bg-focus{background-color:#1c86f2}.bg-aluminum{background-color:#f8f8f8}.bg-silver{background-color:#e0e1e1}.bg-lightgray{background-color:#d4d4d4}.bg-gray{background-color:#bdbdbd}.bg-midgray{background-color:#676b72}.bg-darkgray{background-color:#313439}.bg-highlight{background-color:#edf2ff}body,html{font-size:16px;line-height:24px}body{background-color:transparent}a{color:#3794de}a:hover{color:#f03c69}h1,h1.title,h2,h3,h4,h5,h6{font-weight:700;color:#0d0d0e;text-rendering:optimizeLegibility;margin-bottom:16px}.message,.monospace,code,kbd,pre,samp,var{font-family:Consolas,Monaco,"Courier New",monospace}h1.title{font-size:60px;line-height:64px;margin-bottom:8px}.h1,h1{font-size:48px;line-height:52px}.h2,h2{font-size:36px;line-height:40px}.h3,.h4,h3,h4{line-height:32px}.h3,h3{font-size:24px}.h4,h4{font-size:21px}.h5,h5{font-size:18px;line-height:28px}.h6,h6{font-size:16px;line-height:24px}.h1 a,.h2 a,.h3 a,.h4 a,.h5 a,.h6 a,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:inherit}blockquote+h2,blockquote+h3,blockquote+h4,blockquote+h5,blockquote+h6,dl+h2,dl+h3,dl+h4,dl+h5,dl+h6,figure+h2,figure+h3,figure+h4,figure+h5,figure+h6,form+h2,form+h3,form+h4,form+h5,form+h6,hr+h2,hr+h3,hr+h4,hr+h5,hr+h6,ol+h2,ol+h3,ol+h4,ol+h5,ol+h6,p+h2,p+h3,p+h4,p+h5,p+h6,pre+h2,pre+h3,pre+h4,pre+h5,pre+h6,table+h2,table+h3,table+h4,table+h5,table+h6,ul+h2,ul+h3,ul+h4,ul+h5,ul+h6{margin-top:24px}ol,ol ol,ol ul,ul,ul ol,ul ul{margin:0 0 0 24px}ol ol li{list-style-type:lower-alpha}ol ol ol li{list-style-type:lower-roman}nav ol,nav ul{margin:0}dd,nav ol ol,nav ol ul,nav ul ol,nav ul ul{margin-left:24px}dl dt{font-weight:700}address,blockquote,dl,fieldset,figure,form,hr,ol,p,pre,table,ul{margin-bottom:16px}hr{border-bottom:1px solid rgba(0,0,0,.1);margin-top:-1px}blockquote{padding-left:1rem;border-left:4px solid rgba(0,0,0,.1);font-style:italic;color:rgba(49,52,57,.65)}blockquote p{margin-bottom:.5rem}cite,code,figcaption,kbd,mark,pre,samp,small,time,var{font-size:87.5%}abbr[title],dfn[title]{border-bottom:1px dotted rgba(0,0,0,.5);cursor:help}var{font-style:normal}code,kbd,mark,samp{position:relative;top:-1px;padding:4px 4px 2px;display:inline-block;line-height:1;color:rgba(49,52,57,.85)}code{background:#e0e1e1}mark{background:#f7ba45}samp{color:#fff;background:#1c86f2}sub,sup{font-size:x-small;line-height:0;margin-left:1rem/4;position:relative}.small,.smaller,pre,pre code{line-height:20px}sup{top:0}sub{bottom:1px}pre,pre code{background:#f8f8f8;padding:0;top:0;display:block;color:rgba(49,52,57,.85);overflow:none;white-space:pre-wrap}pre,td,th{padding:1rem}.black,a.muted{color:#0d0d0e}figure figcaption{position:relative;top:-1rem/2}figure pre{background:0 0;border-radius:4px}figure .video-container,figure pre{margin-bottom:8px}.text-left{text-align:left}.label.badge,.text-center{text-align:center}.text-right{text-align:right}ul.unstyled{margin-left:0}.upper{text-transform:uppercase}.lower{text-transform:lowercase}.italic{font-style:italic!important}.strong{font-weight:700!important}.normal{font-weight:400!important}.muted{opacity:.55}a.muted:hover{opacity:1}.smaller{font-size:12px}.small{font-size:14px}.big{font-size:18px;line-height:28px}.large{font-size:20px;line-height:32px}.end{margin-bottom:0!important}.highlight{background-color:#edf2ff}.nowrap,.nowrap td{white-space:nowrap}@media (min-width:768px) and (max-width:1024px){.columns-2,.columns-3,.columns-4{column-gap:24px}.columns-2{column-count:2}.columns-3{column-count:3}.columns-4{column-count:4}}.row{display:flex;flex-direction:row;flex-wrap:wrap}.row.gutters,.row.gutters>.row{margin-left:-2%}@media (max-width:768px){.row{flex-direction:column;flex-wrap:nowrap}.row.gutters,.row.gutters>.row{margin-left:0}}.row.gutters>.col,.row.gutters>.row>.col{margin-left:2%}@media (max-width:768px){.row.gutters>.col,.row.gutters>.row>.col{margin-left:0}}.row.around{justify-content:space-around}.row.between{justify-content:space-between}.row.auto .col{flex-grow:1}.col-1{width:8.33333%}.offset-1{margin-left:8.33333%}.col-2{width:16.66667%}.offset-2{margin-left:16.66667%}.col-3{width:25%}.offset-3{margin-left:25%}.col-4{width:33.33333%}.offset-4{margin-left:33.33333%}.col-5{width:41.66667%}.offset-5{margin-left:41.66667%}.col-6{width:50%}.offset-6{margin-left:50%}.col-7{width:58.33333%}.offset-7{margin-left:58.33333%}.col-8{width:66.66667%}.offset-8{margin-left:66.66667%}.col-9{width:75%}.offset-9{margin-left:75%}.col-10{width:83.33333%}.offset-10{margin-left:83.33333%}.col-11{width:91.66667%}.offset-11{margin-left:91.66667%}.col-12{width:100%}.offset-12{margin-left:100%}.gutters>.col-1{width:calc(8.33333% - 2%)}.gutters>.offset-1{margin-left:calc(8.33333% + 2%)!important}.gutters>.col-2{width:calc(16.66667% - 2%)}.gutters>.offset-2{margin-left:calc(16.66667% + 2%)!important}.gutters>.col-3{width:calc(25% - 2%)}.gutters>.offset-3{margin-left:calc(25% + 2%)!important}.gutters>.col-4{width:calc(33.33333% - 2%)}.gutters>.offset-4{margin-left:calc(33.33333% + 2%)!important}.gutters>.col-5{width:calc(41.66667% - 2%)}.gutters>.offset-5{margin-left:calc(41.66667% + 2%)!important}.gutters>.col-6{width:calc(50% - 2%)}.gutters>.offset-6{margin-left:calc(50% + 2%)!important}.gutters>.col-7{width:calc(58.33333% - 2%)}.gutters>.offset-7{margin-left:calc(58.33333% + 2%)!important}.gutters>.col-8{width:calc(66.66667% - 2%)}.gutters>.offset-8{margin-left:calc(66.66667% + 2%)!important}.gutters>.col-9{width:calc(75% - 2%)}.gutters>.offset-9{margin-left:calc(75% + 2%)!important}.gutters>.col-10{width:calc(83.33333% - 2%)}.gutters>.offset-10{margin-left:calc(83.33333% + 2%)!important}.gutters>.col-11{width:calc(91.66667% - 2%)}.gutters>.offset-11{margin-left:calc(91.66667% + 2%)!important}.gutters>.col-12{width:calc(100% - 2%)}.gutters>.offset-12{margin-left:calc(100% + 2%)!important}.first{order:-1}.last{order:1}@media (max-width:768px){[class*=' offset-'],[class^=offset-]{margin-left:0}.row .col{margin-left:0;width:100%}.row.gutters .col{margin-bottom:16px}.first-sm{order:-1}.last-sm{order:1}}table{border-collapse:collapse;border-spacing:0;width:100%;empty-cells:show;font-size:15px;line-height:24px}table caption{text-align:left;font-size:14px;font-weight:500;color:#676b72}legend,th{font-weight:700}th{text-align:left;vertical-align:bottom}td{vertical-align:top}td,th{border-bottom:1px solid rgba(0,0,0,.05)}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}tfoot td,tfoot th{color:rgba(49,52,57,.5)}table.bordered td,table.bordered th{border:1px solid rgba(0,0,0,.05)}table.striped tr:nth-child(odd) td{background:#f8f8f8}table.bordered td:first-child,table.bordered th:first-child,table.striped td:first-child,table.striped th:first-child{padding-left:1rem}table.bordered td:last-child,table.bordered th:last-child,table.striped td:last-child,table.striped th:last-child{padding-right:1rem}table.unstyled td,table.unstyled th{border:none;padding:0}fieldset{font-family:inherit;border:1px solid rgba(0,0,0,.1);padding:2rem;margin-bottom:2rem;margin-top:2rem}legend{font-size:12px;text-transform:uppercase;padding:0 1rem;margin-left:-1rem;top:2px;position:relative;line-height:0}.button i,.req,button i{position:relative;top:1px}input,select,textarea{display:block;width:100%;font-family:inherit;font-size:15px;height:40px;outline:0;background-color:#fff;border:1px solid #d4d4d4;border-radius:3px;box-shadow:none;padding:0 12px}input.small,select.small,textarea.small{height:36px;font-size:13px;padding:0 12px;border-radius:3px}input.big,select.big,textarea.big{height:48px;font-size:17px;padding:0 12px;border-radius:3px}input:focus,select:focus,textarea:focus{outline:0;background-color:#fff;border-color:#1c86f2;box-shadow:0 0 1px #1c86f2 inset}input.error,select.error,textarea.error{background-color:rgba(240,60,105,.1);border:1px solid #f583a0}input.error:focus,select.error:focus,textarea.error:focus{border-color:#f03c69;box-shadow:0 0 1px #f03c69 inset}input.success,select.success,textarea.success{background-color:rgba(53,190,177,.1);border:1px solid #6ad5cb}input.success:focus,select.success:focus,textarea.success:focus{border-color:#35beb1;box-shadow:0 0 1px #35beb1 inset}input.disabled,input:disabled,select.disabled,select:disabled,textarea.disabled,textarea:disabled{resize:none;opacity:.6;cursor:default;font-style:italic;color:rgba(0,0,0,.5)}select{background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;background-position:right 1rem center}select[multiple]{background-image:none;height:auto;padding:.5rem .75rem}textarea{height:auto;padding:8px 12px;line-height:24px;vertical-align:top}input[type=file]{width:auto;border:none;padding:0;height:auto;background:0 0;box-shadow:none;display:inline-block}input.search,input[type=search]{background-repeat:no-repeat;background-position:8px 53%;background-image:url('data:image/svg+xml;utf8,');padding-left:32px}input[type=radio],input[type=checkbox]{display:inline-block;width:auto;height:auto;padding:0}label{display:block;color:#313439;margin-bottom:4px;font-size:15px}label .desc,label .error,label .success,label.checkbox{text-transform:none;font-weight:400}label.checkbox{font-size:16px;line-height:24px;cursor:pointer;color:inherit}.button,.desc,.message,button{line-height:20px}label.checkbox input{margin-top:0}.form-checkboxes label.checkbox{display:inline-block;margin-right:16px}.req{font-weight:700;color:#f03c69;font-size:110%}.desc{color:rgba(49,52,57,.5);font-size:12px}span.desc{margin-left:4px}div.desc{margin-top:4px;margin-bottom:-8px}.form-buttons .button,.form-buttons button{margin-right:8px}.form-item,form{margin-bottom:2rem}.form .row:last-child .form-item,.form>.form-item:last-child{margin-bottom:0}.form span.error,.form span.success{font-size:12px;line-height:20px;margin-left:4px}.form-inline input,.form-inline select,.form-inline textarea{display:inline-block;width:auto}.append,.prepend{display:flex}.append input,.prepend input{flex:1}.append .button,.append span,.prepend .button,.prepend span{flex-shrink:0}.append span,.prepend span{display:flex;flex-direction:column;justify-content:center;font-weight:400;border:1px solid #d4d4d4;background-color:#f8f8f8;padding:0 .875rem;color:rgba(0,0,0,.5);font-size:12px;white-space:nowrap}.button,.label,button{display:inline-block;font-weight:500;text-decoration:none;vertical-align:middle}.prepend input{border-radius:0 3px 3px 0}.prepend .button{margin-right:-1px;border-radius:3px 0 0 3px!important}.append input,.prepend span{border-radius:3px 0 0 3px}.prepend span{border-right:none}.append .button{margin-left:-1px;border-radius:0 3px 3px 0!important}.append span{border-left:none;border-radius:0 3px 3px 0}.button,button{font-size:15px;color:#fff;background-color:#1c86f2;border-radius:3px;min-height:40px;padding:8px 20px;cursor:pointer;border:1px solid transparent}.button i,button i{margin:0 2px}.fixed,.no-scroll{position:fixed;top:0;left:0}input[type=submit]{width:auto}.button:hover,button:hover{outline:0;text-decoration:none;color:#fff;background-color:#4ca0f5}.button.disabled,.button:disabled{cursor:default;font-style:normal;color:rgba(255,255,255,.7);background-color:rgba(28,134,242,.7)}.breadcrumbs li.active a,.pagination li.active a,.pagination span{cursor:text}.button.small{font-size:13px;min-height:36px;padding:6px 20px;border-radius:3px}.button.big{font-size:17px;min-height:48px;padding:13px 24px;border-radius:3px}.button.large{font-size:19px;min-height:56px;padding:20px 36px;border-radius:3px}.button.outline{background:0 0;border-width:2px;border-color:#1c86f2;color:#1c86f2}.button.outline:hover{background:0 0;color:rgba(28,134,242,.6);border-color:rgba(28,134,242,.5)}.button.outline.disabled,.button.outline:disabled{background:0 0;color:rgba(28,134,242,.7);border-color:rgba(28,134,242,.5)}.button.inverted,.button.inverted:hover{color:#000;background-color:#fff}.button.inverted.disabled,.button.inverted:disabled{color:rgba(0,0,0,.7);background-color:rgba(255,255,255,.7)}.button.inverted.outline{background:0 0;color:#fff;border-color:#fff}.button.inverted.outline:hover{color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.5)}.button.inverted.outline.disabled,.button.inverted.outline:disabled{background:0 0;color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.5)}.button.inverted:hover{opacity:.7}.button.round{border-radius:56px}.button.raised{box-shadow:0 1px 3px rgba(0,0,0,.3)}.button.upper{text-transform:uppercase;letter-spacing:.04em;font-size:13px}.button.upper.small{font-size:11px}.button.upper.big{font-size:13px}.button.upper.large{font-size:15px}.button.secondary{color:#fff;background-color:#313439}.button.secondary:hover{color:#fff;background-color:#606670}.button.secondary.disabled,.button.secondary:disabled{color:rgba(255,255,255,.7);background-color:rgba(49,52,57,.7)}.button.secondary.outline{background:0 0;color:#313439;border-color:#313439}.button.secondary.outline:hover{color:rgba(49,52,57,.6);border-color:rgba(49,52,57,.5)}.button.secondary.outline.disabled,.button.secondary.outline:disabled{background:0 0;color:rgba(49,52,57,.7);border-color:rgba(49,52,57,.5)}.label{font-size:13px;background:#e0e1e1;line-height:18px;padding:0 10px;color:#313439;border:1px solid transparent;border-radius:4px}.label a,.label a:hover{color:inherit;text-decoration:none}.label.big{font-size:14px;line-height:24px;padding:0 12px}.label.tag,.label.upper{text-transform:uppercase;font-size:11px}.label.outline{background:0 0;border-color:#bdbdbd}.label.badge{border-radius:64px;padding:0 6px}.label.badge.big{padding:0 8px}.label.tag{padding:0;background:0 0;border:none}.label.tag.big{font-size:13px}.label.success{background:#35beb1;color:#fff}.label.success.outline,.label.success.tag{background:0 0;border-color:#35beb1;color:#35beb1}.label.error{background:#f03c69;color:#fff}.label.error.outline,.label.error.tag{background:0 0;border-color:#f03c69;color:#f03c69}.label.warning{background:#f7ba45;color:#0d0d0e}.label.warning.outline,.label.warning.tag{background:0 0;border-color:#f7ba45;color:#f7ba45}.label.focus{background:#1c86f2;color:#fff}.label.focus.outline,.label.focus.tag{background:0 0;border-color:#1c86f2;color:#1c86f2}.label.black{background:#0d0d0e;color:#fff}.label.black.outline,.label.black.tag{background:0 0;border-color:#0d0d0e;color:#0d0d0e}.label.inverted{background:#fff;color:#0d0d0e}.label.inverted.outline,.label.inverted.tag{background:0 0;border-color:#fff;color:#fff}.breadcrumbs{font-size:14px;margin-bottom:24px}.breadcrumbs ul{display:flex;align-items:center}.breadcrumbs.push-center ul{justify-content:center}.breadcrumbs a,.breadcrumbs span{font-style:normal;padding:0 10px;display:inline-block;white-space:nowrap}.breadcrumbs li:after{display:inline-block;content:'/';color:rgba(0,0,0,.3)}.breadcrumbs li.active a,.pagination a{text-decoration:none;color:#313439}.breadcrumbs li:last-child:after{display:none}.breadcrumbs li:first-child a,.breadcrumbs li:first-child span{padding-left:0}.pagination{margin:24px 0;font-size:14px}.close,.pagination.upper{font-size:12px}.pagination ul{display:flex;margin:0}.pagination.align-center ul{justify-content:center}.pagination a,.pagination span{border-radius:3px;display:inline-block;padding:8px 12px;line-height:1;white-space:nowrap;border:1px solid transparent}.pagination a:hover,.pagination li.active a,.pagination span{color:rgba(0,0,0,.5);border-color:#e0e1e1}.pager span{line-height:24px}.pager a,.pager span{padding-left:16px;padding-right:16px;border-radius:64px;border-color:rgba(0,0,0,.1)}.pager li{flex-basis:50%}.pager li.next{text-align:right}.pager.align-center li{flex-basis:auto;margin-left:4px;margin-right:4px}.pager.flat a,.pager.flat span{border:none;display:block;padding:0}.pager.flat a{font-weight:700}.pager.flat a:hover{background:0 0;text-decoration:underline}@media (max-width:768px){.pager.flat ul{flex-direction:column}.pager.flat li{flex-basis:100%;margin-bottom:8px;text-align:left}}@font-face{font-family:Kube;src:url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBfgAAAC8AAAAYGNtYXAXVtKOAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZsMn2SAAAAF4AAADeGhlYWQMP9EUAAAE8AAAADZoaGVhB8IDzQAABSgAAAAkaG10eCYABd4AAAVMAAAAMGxvY2EFWASuAAAFfAAAABptYXhwABcAmwAABZgAAAAgbmFtZfMJxocAAAW4AAABYnBvc3QAAwAAAAAHHAAAACAAAwPHAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpBwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6Qf//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAAKAAAAAAQAA8AADwAUACQANABEAFYAaAB4AIgAmAAAEyIGFREUFjMhMjY1ETQmIwUhESEREzgBMSIGFRQWMzI2NTQmIzM4ATEiBhUUFjMyNjU0JiMzOAExIgYVFBYzMjY1NCYjATIWHQEUBiMiJj0BNDYzOAExITIWHQEUBiMiJj0BNDYzOAExATgBMSIGFRQWMzI2NTQmIzM4ATEiBhUUFjMyNjU0JiMzOAExIgYVFBYzMjY1NCYjwFBwcFACgFBwcFD9IQM+/MKrHioqHh4qKh70HioqHh4qKh70HisrHh0rKh7+MBQdHRQUHBwUAbgUHBwUFB0dFP4wHioqHh4qKh70HioqHh4qKh70HisrHh0rKh4DYHBQ/iBQcHBQAeBQcF/9XwKh/n8qHh4qKh4eKioeHioqHh4qKh4eKioeHioCQBwVjhUcHBWOFRwcFY4VHBwVjhUc/rAqHh4qKh4eKioeHioqHh4qKh4eKioeHioAAAABAQAAwAMAAcAACwAAAQcXBycHJzcnNxc3AwDMAjMDAzMCzDTMzAGVqAIrAgIrAqgrqKgAAQGAAEACgAJAAAsAACUnByc3JzcXNxcHFwJVqAIrAgIrAqgrqKhAzAIzAwMzAsw0zMwAAAEBgABAAoACQAALAAABFzcXBxcHJwcnNycBq6gCKwICKwKoK6ioAkDMAjMDAzMCzDTMzAABAQAAwAMAAcAACwAAJTcnNxc3FwcXBycHAQDMAjMDAzMCzDTMzOuoAisCAisCqCuoqAAAAgAP/+UD1AOqAAQACAAAEwEHATcFAScBSwOJPPx3PAOJ/Hc8A4kDqvx3PAOJPDz8dzwDiQAAAAADAIAAgAOAAwAAAwAHAAsAADc1IRUBIRUhESEVIYADAP0AAwD9AAMA/QCAgIABgIABgIAAAgBPAA8DsgNxABgALQAAJQcBDgEjIi4CNTQ+AjMyHgIVFAYHAQEiDgIVFB4CMzI+AjU0LgIjA7JY/t4lWTBBc1YxMVZzQUFzVTIcGQEi/dgxVkAlJUBWMTFWQCUlQFYxZ1gBIRkcMlVzQUFzVjExVnNBMFkm/uACuyVAVjExVkAlJUBWMTFWQCUAAAABAAAAAQAABhlWm18PPPUACwQAAAAAANSQRjkAAAAA1JBGOQAA/+UEAAPAAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAQAAAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAAAAEAAEABAABgAQAAYAEAAEABAAADwQAAIAEAABPAAAAAAAKABQAHgDYAPIBDAEmAUABXAF2AbwAAAABAAAADACZAAoAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABAAAAAEAAAAAAAIABwBFAAEAAAAAAAMABAAtAAEAAAAAAAQABABaAAEAAAAAAAUACwAMAAEAAAAAAAYABAA5AAEAAAAAAAoAGgBmAAMAAQQJAAEACAAEAAMAAQQJAAIADgBMAAMAAQQJAAMACAAxAAMAAQQJAAQACABeAAMAAQQJAAUAFgAXAAMAAQQJAAYACAA9AAMAAQQJAAoANACAS3ViZQBLAHUAYgBlVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwS3ViZQBLAHUAYgBlS3ViZQBLAHUAYgBlUmVndWxhcgBSAGUAZwB1AGwAYQByS3ViZQBLAHUAYgBlRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("truetype");font-weight:400;font-style:normal}.caret,.close,[class*=" kube-"],[class^=kube-]{font-family:Kube!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.kube-calendar:before{content:"\e900"}.caret.down:before,.kube-caret-down:before{content:"\e901"}.caret.left:before,.kube-caret-left:before{content:"\e902"}.caret.right:before,.kube-caret-right:before{content:"\e903"}.caret.up:before,.kube-caret-up:before{content:"\e904"}.close:before,.kube-close:before{content:"\e905"}.kube-menu:before{content:"\e906"}.kube-search:before{content:"\e907"}.gutters .column.push-left,.push-left{margin-right:auto}.gutters .column.push-right,.push-right{margin-left:auto}.gutters .column.push-center,.push-center{margin-left:auto;margin-right:auto}.gutters .column.push-middle,.push-middle{margin-top:auto;margin-bottom:auto}.push-bottom{margin-top:auto}.align-middle{align-items:center}.align-right{justify-content:flex-end}.align-center{justify-content:center}.float-right{float:right}.float-left{float:left}.fixed{z-index:100;width:100%}.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%}.w90{width:90%}.w95{width:95%}.w100{width:100%}.w-auto{width:auto}.w-small{width:480px}.w-medium{width:600px}.w-big{width:740px}.w-large{width:840px}.max-w5{max-width:5%}.max-w10{max-width:10%}.max-w15{max-width:15%}.max-w20{max-width:20%}.max-w25{max-width:25%}.max-w30{max-width:30%}.max-w35{max-width:35%}.max-w40{max-width:40%}.max-w45{max-width:45%}.max-w50{max-width:50%}.max-w55{max-width:55%}.max-w60{max-width:60%}.max-w65{max-width:65%}.max-w70{max-width:70%}.max-w75{max-width:75%}.max-w80{max-width:80%}.max-w85{max-width:85%}.max-w90{max-width:90%}.max-w95{max-width:95%}.max-w100{max-width:100%}.max-w-small{max-width:480px}.max-w-medium{max-width:600px}.max-w-big{max-width:740px}.max-w-large{max-width:840px}.min-w5{min-width:5%}.min-w10{min-width:10%}.min-w15{min-width:15%}.min-w20{min-width:20%}.min-w25{min-width:25%}.min-w30{min-width:30%}.min-w35{min-width:35%}.min-w40{min-width:40%}.min-w45{min-width:45%}.min-w50{min-width:50%}.min-w55{min-width:55%}.min-w60{min-width:60%}.min-w65{min-width:65%}.min-w70{min-width:70%}.min-w75{min-width:75%}.min-w80{min-width:80%}.min-w85{min-width:85%}.min-w90{min-width:90%}.min-w95{min-width:95%}.min-w100{min-width:100%}.h25{height:25%}.h50{height:50%}.h100{height:100%}.group:after{content:'';display:table;clear:both}.flex{display:flex}@media (max-width:768px){.gutters .column.push-left-sm,.push-left-sm{margin-left:0}.gutters .column.push-center-sm,.push-center-sm{margin-left:auto;margin-right:auto}.push-top-sm{margin-top:0}.align-left-sm{justify-content:flex-start}.float-left,.float-right{float:none}.w-auto-sm{width:auto}.w-big,.w-large,.w-medium,.w-small,.w100-sm{width:100%}.max-w-auto-sm,.max-w-big,.max-w-large,.max-w-medium,.max-w-small{max-width:auto}.flex-column-sm{flex-direction:column}.flex-w100-sm{flex:0 0 100%}}@media (max-width:768px) and (max-width:768px){.flex-w100-sm{flex:0 0 100%!important}}.invisible{visibility:hidden}.visible{visibility:visible}.display-block{display:block}.hide{display:none!important}@media (max-width:768px){.hide-sm{display:none!important}}@media (min-width:768px){.show-sm{display:none!important}}@media print{.hide-print{display:none!important}.show-print{display:block!important}}.caret,.close{display:inline-block}.no-scroll{overflow:hidden;width:100%;height:100%!important}.scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}.dropdown,.slideDown,.slideUp{overflow:hidden}.video-container{height:0;padding-bottom:56.25%;position:relative;margin-bottom:16px}.video-container embed,.video-container iframe,.video-container object{position:absolute;top:0;left:0;width:100%!important;height:100%!important}.close{min-height:16px;min-width:16px;line-height:16px;vertical-align:middle;text-align:center;opacity:.6}.close:hover{opacity:1}.close.small{font-size:8px}.close.big{font-size:18px}.close.white{color:#fff}.button .caret{margin-right:-8px}.overlay{position:fixed;z-index:200;top:0;left:0;right:0;bottom:0;background-color:rgba(255,255,255,.95)}.overlay>.close{position:fixed;top:1rem;right:1rem}@media print{blockquote,img,pre,tr{page-break-inside:avoid}*{background:0 0!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}blockquote,pre{border:1px solid #999}h2,h3,p{orphans:3;widows:3}thead{display:table-header-group}img{max-width:100%!important}h2,h3,h4{page-break-after:avoid}@page{margin:.5cm}}.dropdown,.modal{box-shadow:0 10px 25px rgba(0,0,0,.15)}@keyframes slideUp{to{height:0;padding-top:0;padding-bottom:0}}@keyframes slideDown{from{height:0;padding-top:0;padding-bottom:0}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes flipIn{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}@keyframes flipOut{from{opacity:1;transform:scaleY(1)}to{opacity:0;transform:scaleY(0)}}@keyframes zoomIn{from{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomOut{from{opacity:1}50%{opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes slideInRight{from{transform:translate3d(100%,0,0);visibility:visible}to{transform:translate3d(0,0,0)}}@keyframes slideInLeft{from{transform:translate3d(-100%,0,0);visibility:visible}to{transform:translate3d(0,0,0)}}@keyframes slideInDown{from{transform:translate3d(0,-100%,0);visibility:visible}to{transform:translate3d(0,0,0)}}@keyframes slideOutLeft{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(-100%,0,0)}}@keyframes slideOutRight{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(100%,0,0)}}@keyframes slideOutUp{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(0,-100%,0)}}@keyframes rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{from,to{transform:scale3d(1,1,1)}50%{transform:scale3d(1.03,1.03,1.03)}}@keyframes shake{15%{transform:translateX(.5rem)}30%{transform:translateX(-.4rem)}45%{transform:translateX(.3rem)}60%{transform:translateX(-.2rem)}75%{transform:translateX(.1rem)}90%{transform:translateX(0)}}.fadeIn{animation:fadeIn 250ms}.fadeOut{animation:fadeOut 250ms}.zoomIn{animation:zoomIn .2s}.zoomOut{animation:zoomOut .5s}.slideInRight{animation:slideInRight .5s}.slideInLeft{animation:slideInLeft .5s}.slideInDown{animation:slideInDown .5s}.slideOutLeft{animation:slideOutLeft .5s}.slideOutRight{animation:slideOutRight .5s}.slideOutUp{animation:slideOutUp .5s}.slideUp{animation:slideUp .2s ease-in-out}.slideDown{animation:slideDown 80ms ease-in-out}.flipIn{animation:flipIn 250ms cubic-bezier(.5,-.5,.5,1.5)}.flipOut{animation:flipOut .5s cubic-bezier(.5,-.5,.5,1.5)}.rotate{animation:rotate .5s}.pulse{animation:pulse 250ms 2}.shake{animation:shake .5s}.dropdown{position:absolute;z-index:100;top:0;right:0;width:280px;color:#000;font-size:15px;background:#fff;border-radius:3px;max-height:300px;margin:0;padding:0}.dropdown.dropdown-mobile{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;max-height:none;border:none}.dropdown .close{margin:20px auto}.dropdown.open{overflow:auto}.dropdown ul{margin:0}.dropdown ul li{border-bottom:1px solid rgba(0,0,0,.07)}.dropdown ul li:last-child{border-bottom:none}.dropdown ul a{display:block;padding:12px;text-decoration:none;color:#000}.dropdown ul a:hover{background:rgba(0,0,0,.05)}.message{font-size:14px;background:#e0e1e1;color:#313439;padding:1rem 2.5em .75rem 1rem;margin-bottom:24px;position:relative}.message a{color:inherit}.message h2,.message h3,.message h4,.message h5,.message h6{margin-bottom:0}.message .close{position:absolute;right:1rem;top:1.1rem}.message.error{background:#f03c69;color:#fff}.message.success{background:#35beb1;color:#fff}.message.warning{background:#f7ba45}.message.focus{background:#1c86f2;color:#fff}.message.black{background:#0d0d0e;color:#fff}.message.inverted,.modal,.offcanvas{background:#fff}.modal-box{position:fixed;top:0;left:0;bottom:0;right:0;overflow-x:hidden;overflow-y:auto;z-index:200}.modal{position:relative;margin:16px auto auto;padding:0;border-radius:8px;color:#000}@media (max-width:768px){.modal input,.modal textarea{font-size:16px}}.modal .close{position:absolute;top:18px;right:16px;opacity:.3}.modal .close:hover{opacity:1}.modal-header{padding:24px 32px;font-size:18px;font-weight:700;border-bottom:1px solid rgba(0,0,0,.05)}.modal-header:empty{display:none}.modal-body{padding:36px 56px}@media (max-width:768px){.modal-body,.modal-header{padding:24px}}.offcanvas{position:fixed;padding:24px;height:100%;top:0;left:0;z-index:300;overflow-y:scroll}.offcanvas .close{position:absolute;top:8px;right:8px}.offcanvas-push-body,.tabs a,.tabs em{position:relative}.offcanvas-left{border-right:1px solid rgba(0,0,0,.1)}.offcanvas-right{left:auto;right:0;border-left:1px solid rgba(0,0,0,.1)}.tabs{margin-bottom:24px;font-size:14px}.tabs li em,.tabs li.active a{color:#313439;border:1px solid rgba(0,0,0,.1);cursor:default;text-decoration:none;background:0 0}.tabs a,.tabs em{top:1px;font-style:normal;display:block;padding:.5rem 1rem;border:1px solid transparent;color:rgba(0,0,0,.5);text-decoration:none}.tabs a:hover{-moz-transition:all linear .2s;transition:all linear .2s;color:#313439;text-decoration:underline;background-color:#e0e1e1}@media (min-width:768px){.tabs ul{display:flex;margin-top:-1px;border-bottom:1px solid rgba(0,0,0,.1)}.tabs li em,.tabs li.active a{border-bottom:1px solid #fff}} \ No newline at end of file diff --git a/docs/themes/oscalkit/static/css/master.css b/docs/themes/oscalkit/static/css/master.css new file mode 100644 index 00000000..ceb360e4 --- /dev/null +++ b/docs/themes/oscalkit/static/css/master.css @@ -0,0 +1,1132 @@ +body { + font-family: Lato, Arial, sans-serif; } + +h1.title, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { + font-family: Lato, Arial, sans-serif; } + +button, .button { + font-family: Lato, Arial, sans-serif; } + +h1, h2, h3, h4, h5, h6 { + color: #222; } + +.form-centered { + max-width: 400px; + margin: auto; + margin-bottom: 140px; } + +.form-subscribe { + text-align: center; + border-radius: 4px; + border: 3px dashed rgba(0, 0, 0, 0.1); + padding: 64px 40px; + margin-bottom: 24px; } + .form-subscribe h4 { + margin-bottom: 0; } + .form-subscribe p { + color: rgba(0, 0, 0, 0.5); + margin-bottom: 20px; } + .form-subscribe form { + max-width: 400px; + margin: auto; } + .form-subscribe #form-subscribe-success { + max-width: 500px; + margin: auto; + font-size: 18px; + line-height: 28px; } + .form-subscribe #subscribe-email-validation-error { + margin-bottom: 8px; + font-size: 15px; } + .form-subscribe .form-subscribe-twitter div { + margin: 24px 0; + font-size: 20px; + color: rgba(0, 0, 0, 0.3); } + .form-subscribe .form-subscribe-twitter a { + display: inline-block; + padding-left: 21px; + background: url("/img/common/icon-twitter.png") no-repeat left 4px; } + +#toggle-form-subscribe { + text-align: center; + margin-bottom: 20px; + font-size: 15px; + margin-top: -20px; } + +#nav-toggle-box { + display: flex; + align-items: center; + padding: 8px 16px; } + +#nav-toggle { + margin-left: auto; + color: #000; + text-decoration: none; + padding: 2px 8px; } + +#nav-toggle-brand { + position: relative; + top: -1px; } + +#nav-toggle-brand a, +#nav-toggle-brand span { + color: #000; + font-weight: bold; + text-decoration: none; } + +#top { + display: flex; + align-items: center; + margin-bottom: 24px; + padding: 0 36px; + height: 88px; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); } + #top #top-brand { + margin-right: 52px; } + #top #top-brand span, + #top #top-brand a { + background: none; + text-indent: -9999px; + width: 70px; + line-height: 11px; + background-repeat: no-repeat; } + + #top ul { + display: flex; + align-items: center; + margin: 0; } + #top #top-nav-main { + padding-left: 52px; + border-left: 1px solid rgba(0, 0, 0, 0.15); } + #top #top-nav-main li { + font-size: 16px; + font-weight: 500; + margin-right: 40px; } + #top #top-nav-main span, + #top #top-nav-main a { + display: inline-block; } + #top #top-nav-main a { + color: #000; + text-decoration: none; } + #top #top-nav-main a:hover { + -moz-transition: all linear 0.2s; + transition: all linear 0.2s; + color: rgba(0, 0, 0, 0.6); + text-decoration: underline; } + #top #top-nav-main b a, + #top #top-nav-main span { + font-weight: 500; + color: rgba(0, 0, 0, 0.4); } + #top #top-nav-main b a { + text-decoration: underline; } + #top #top-nav-main b a:hover { + color: #000; } + #top #top-nav-extra { + margin-left: auto; + font-size: 14px; } + #top #top-nav-extra span, + #top #top-nav-extra a { + color: rgba(0, 0, 0, 0.7); + display: inline-block; + border: 1px solid rgba(0, 0, 0, 0.5); + text-decoration: none; + line-height: 28px; + border-radius: 28px; + padding: 0 20px; } + #top #top-nav-extra a:hover { + -moz-transition: all linear 0.2s; + transition: all linear 0.2s; + color: #000; + text-decoration: underline; } + #top #top-nav-extra span { + color: rgba(0, 0, 0, 0.4); + border-color: rgba(0, 0, 0, 0.2); } + +#subnav { + margin-top: 24px; + margin-bottom: 24px; + font-size: 15px; } + #subnav ul { + margin: 0; + text-align: center; } + #subnav li { + display: inline-block; } + #subnav li.active a, + #subnav span { + color: rgba(0, 0, 0, 0.4); } + #subnav form, + #subnav em, + #subnav span, + #subnav a { + display: inline-block; + padding: 2px 16px; } + #subnav em { + font-style: normal; } + #subnav a { + color: #3794de; + text-decoration: none; } + #subnav a:hover { + -moz-transition: all linear 0.2s; + transition: all linear 0.2s; + color: #000; + text-decoration: underline; } + #subnav li:first-child b a { + color: #3794de; + font-weight: normal; + text-decoration: none; } + #subnav li:first-child b a:hover { + -moz-transition: all linear 0.2s; + transition: all linear 0.2s; + color: #000; + text-decoration: underline; } + #subnav b a { + color: #000; + text-decoration: underline; } + #subnav b a:hover { + -moz-transition: all linear 0.2s; + transition: all linear 0.2s; + color: rgba(0, 0, 0, 0.6); + text-decoration: underline; } + #subnav .action-button a { + background: rgba(28, 134, 242, 0.05); + font-size: 15px; + margin-left: 16px; + padding: 2px 16px; + border-radius: 3px; + border: 1px solid rgba(28, 134, 242, 0.5); } + #subnav .action-button a:hover { + background: #1c86f2; + border-color: #1c86f2; + color: #fff; + text-decoration: none; } + #subnav form { + margin: 0; } + #subnav form button { + font-size: 15px; + line-height: 24px; + color: #3794de; + height: auto; + padding: 0; + background: none; + box-shadow: none; + vertical-align: baseline; } + #subnav form button:hover { + -moz-transition: all linear 0.2s; + transition: all linear 0.2s; + color: #000; + text-decoration: underline; } + +#hero { + padding-top: 48px; + padding-bottom: 56px; + text-align: center; } + #hero h1 { + max-width: 880px; + margin-left: auto; + margin-right: auto; + margin-bottom: 12px; + font-size: 64px; + line-height: 72px; + font-weight: 900; } + #hero p { + max-width: 740px; + margin: auto; + font-size: 21px; + line-height: 32px; + color: rgba(0, 0, 0, 0.5); + margin-top: 28px; + padding-top: 28px; + margin-bottom: 0; + position: relative; } + #hero p a { + color: #000; } + #hero p a:hover { + color: rgba(0, 0, 0, 0.6); } + #hero p:before { + position: absolute; + content: ''; + width: 40px; + height: 3px; + top: 0; + left: 50%; + margin-left: -20px; + background: #ff3366; } + +#intro { + margin-top: 56px; + margin-bottom: 140px; + text-align: center; + position: relative; } + #intro:before { + position: absolute; + content: ''; + width: 40px; + height: 3px; + top: -68px; + left: 50%; + margin-left: -20px; + background: #ff3366; } + #intro h6 { + color: rgba(0, 0, 0, 0.5); + font-weight: normal; } + #intro h2 { + font-weight: 900; } + #intro h2 a { + color: #3794de; + text-decoration: none; } + #intro h2 a:hover { + -moz-transition: all linear 0.2s; + transition: all linear 0.2s; + color: #000; + text-decoration: underline; } + #intro p { + font-size: 15px; + margin: auto; + padding: 0 20px; } + @media (max-width: 768px) { + #intro .col { + margin-bottom: 48px; } } + +#action-buttons { + margin-bottom: 64px; + text-align: center; } + #action-buttons button, + #action-buttons .button { + margin: 0 4px; } + #action-buttons p { + margin: 0; + margin-top: 20px; + font-size: 13px; + line-height: 20px; + color: rgba(0, 0, 0, 0.5); } + +#contents { + counter-reset: count; + max-width: 400px; + margin: 24px auto 60px auto; + padding: 32px; + background: #fbfbfb; + border: 1px solid rgba(0, 0, 0, 0.08); } + #contents.wide { + max-width: none; + margin-bottom: 24px; } + #contents ol { + margin: 0; } + #contents li { + line-height: 40px; + border-bottom: 1px solid rgba(0, 0, 0, 0.06); + margin-right: 24px; + counter-increment: count; } + #contents li:last-child { + border-bottom: none; } + #contents a { + display: block; + text-decoration: none; + position: relative; + padding-left: 24px; + color: #259d92; } + #contents a:before { + position: absolute; + left: 0; + content: counter(count, decimal-leading-zero); + font-size: 13px; + color: rgba(0, 0, 0, 0.3); } + #contents a:hover { + -moz-transition: all linear 0.2s; + transition: all linear 0.2s; + color: #000; + text-decoration: underline; } + +#main { + margin: auto; + max-width: 1128px; } + +body.docs #main, +body.grafs-index #main, +body.page-redactor-index #main { + max-width: none; } + +body.grafs-index #footer, +body.page-redactor-index #footer { + margin-top: 0; } + +body.docs #top { + margin-bottom: 0; } + +body.page-account #hero { + padding: 0; } + body.page-account #hero h1 { + font-size: 32px; + line-height: 32px; + margin-bottom: 48px; } + +.content { + max-width: 840px; + margin: auto; } + +#redactor-intro-box { + max-width: 920px; + margin: auto; + margin-bottom: 48px; } + +#redactor-features { + text-align: center; + margin: 136px auto; + max-width: 1128px; } + +#redactor-features h3 { + font-size: 21px; + margin-top: 0; + margin-bottom: 4px; } + +#redactor-features p { + color: rgba(0, 0, 0, 0.5); } + +#redactor-buying-desc { + max-width: 720px; + margin: auto; + margin-top: 40px; + font-size: 13px; + line-height: 20px; } + +#redactor-buying-desc p { + color: rgba(0, 0, 0, 0.5); } + +#redactor-buy-box { + text-align: center; + margin: 116px auto; + max-width: 1128px; } + +#redactor-cloud { + text-align: center; + margin: 116px auto; + max-width: 1128px; } + #redactor-cloud h2 { + font-size: 48px; + line-height: 56px; + margin-bottom: 36px; + color: rgba(0, 0, 0, 0.15); } + #redactor-cloud ul { + margin: 0; + list-style: none; } + #redactor-cloud li { + list-style: none; + display: inline; + line-height: 44px; + margin: 0 12px; + white-space: nowrap; } + #redactor-cloud li:nth-child(3n) { + font-size: 1.25em; + color: #666; } + #redactor-cloud li:nth-child(4n) { + font-size: 1.5em; + color: #333; } + #redactor-cloud li:nth-child(5n) { + font-size: 1em; + color: #999; } + #redactor-cloud li:nth-child(7n) { + font-size: 2.25em; } + @media (max-width: 768px) { + #redactor-cloud { + display: none; } } + +#redactor-discover { + text-align: center; + background: #f8f8f8; + padding-bottom: 96px; } + #redactor-discover #redactor-discover-box { + max-width: 1128px; + margin: auto; } + #redactor-discover h3 { + font-size: 24px; + line-height: 32px; + text-align: center; + font-weight: 900; + padding: 40px 0; + margin-bottom: 60px; + color: rgba(0, 0, 0, 0.25); + border-bottom: 1px solid rgba(0, 0, 0, 0.05); } + #redactor-discover h4 { + margin-top: 0; } + #redactor-discover h4 a { + font-size: 21px; + color: #000; } + #redactor-discover h4 a:hover { + -moz-transition: all linear 0.2s; + transition: all linear 0.2s; + color: rgba(0, 0, 0, 0.5); } + #redactor-discover figure { + margin-bottom: 0; } + #redactor-discover .col { + max-width: 340px; } + #redactor-discover p { + font-size: 14px; + line-height: 20px; + color: rgba(0, 0, 0, 0.5); } + @media (max-width: 768px) { + #redactor-discover .col { + max-width: none; } + #redactor-discover p { + padding: 0 24px; } } + +#grafs-matrix-box { + padding: 0 20px; + max-width: 1128px; + margin: auto; + margin-bottom: 80px; } + #grafs-matrix-box .item { + padding-top: 72px; + text-align: center; } + #grafs-matrix-box .item.first { + padding-top: 24px; } + #grafs-matrix-box h5 { + font-size: 17px; + line-height: 24px; + margin-bottom: 8px; } + #grafs-matrix-box p { + max-width: 340px; + margin: auto; + margin-bottom: 32px; + font-size: 13px; + line-height: 20px; + color: rgba(0, 0, 0, 0.7); } + #grafs-matrix-box .row p { + max-width: 280px; + margin-bottom: 40px; } + +#grafs-buy-box { + padding: 0 20px; + padding-bottom: 104px; + max-width: 1128px; + margin: auto; + margin-top: 128px; + text-align: center; + border-bottom: 1px solid rgba(0, 0, 0, 0.07); } + #grafs-buy-box h2 { + font-size: 30px; + line-height: 40px; + font-weight: 900; + margin-bottom: 72px; } + #grafs-buy-box .button { + height: 60px; + padding-top: 20px; + padding-left: 36px; + padding-right: 36px; + font-size: 19px; + font-weight: 500; } + #grafs-buy-box p.desc { + font-size: 13px; + line-height: 20px; + color: rgba(0, 0, 0, 0.6); } + +#grafs-features { + text-align: center; + max-width: 1128px; + margin: 88px auto 104px auto; + padding: 0 20px; } + #grafs-features figure { + margin-bottom: 0; } + #grafs-features h3 { + margin-top: 0; + font-size: 21px; + line-height: 32px; } + #grafs-features p { + font-size: 15px; + color: rgba(0, 0, 0, 0.7); } + +#grafs-discover { + text-align: center; + background: #f8f8f8; + padding-bottom: 96px; } + #grafs-discover #grafs-discover-box { + max-width: 800px; + margin: auto; } + #grafs-discover h3 { + font-size: 24px; + line-height: 32px; + text-align: center; + font-weight: 900; + padding: 40px 0; + margin-bottom: 60px; + color: rgba(0, 0, 0, 0.25); + border-bottom: 1px solid rgba(0, 0, 0, 0.05); } + #grafs-discover h4 { + margin-top: 0; } + #grafs-discover h4 a { + font-size: 21px; + color: #000; } + #grafs-discover h4 a:hover { + -moz-transition: all linear 0.2s; + transition: all linear 0.2s; + color: rgba(0, 0, 0, 0.5); } + #grafs-discover figure { + margin-bottom: 0; } + #grafs-discover .col { + max-width: 280px; } + #grafs-discover p { + font-size: 14px; + line-height: 20px; + color: rgba(0, 0, 0, 0.5); } + @media (max-width: 768px) { + #grafs-discover .col { + max-width: none; } + #grafs-discover p { + padding: 0 24px; } } + +.grafs-examples-row { + display: flex; + justify-content: center; + flex-wrap: wrap; + margin-bottom: 40px; } + +.grafs-examples-col { + border-radius: 3px; + background: #f8f8f8; + padding: 32px; + padding-bottom: 56px; + width: 300px; + margin: 0 16px; + margin-bottom: 24px; } + .grafs-examples-col figure { + margin-bottom: 0; } + .grafs-examples-col h4 { + font-size: 17px; + line-height: 28px; + margin-top: 0; } + .grafs-examples-col ul { + list-style: none; + margin: 0; } + .grafs-examples-col ul li { + font-size: 15px; + line-height: 36px; } + .grafs-examples-col ul a { + display: block; + color: #3794de; + text-decoration: none; } + .grafs-examples-col ul a:hover { + -moz-transition: all linear 0.2s; + transition: all linear 0.2s; + color: #000; + text-decoration: underline; } + +#grafs-example-header, +#grafs-example-content { + max-width: 900px; + margin: auto; } + +#grafs-example-header { + margin-top: 72px; + margin-bottom: 44px; + text-align: center; } + #grafs-example-header .tag { + font-size: 13px; + line-height: 24px; + text-transform: uppercase; + color: rgba(0, 0, 0, 0.5); + margin-bottom: 8px; } + #grafs-example-header .tag a { + color: rgba(0, 0, 0, 0.6); } + #grafs-example-header .tag a:hover { + -moz-transition: all linear 0.2s; + transition: all linear 0.2s; + color: #000; } + #grafs-example-header h1 { + font-size: 48px; + line-height: 52px; + font-weight: 900; } + +#path { + font-size: 15px; + margin-bottom: 12px; } + #path a { + color: #3794de; } + #path a:hover { + color: #000; } + #path span { + color: rgba(0, 0, 0, 0.2); + font-size: 15px; + display: inline-block; + margin: 0 6px; } + #path b { + font-weight: 500; + color: rgba(0, 0, 0, 0.4); } + +#docs-main { + display: flex; } + #docs-main #side { + width: 24%; + padding: 28px 36px; + border-right: 1px solid rgba(0, 0, 0, 0.1); } + #docs-main #side nav li { + font-size: 15px; + line-height: 40px; } + #docs-main #side nav li a { + display: block; + color: #707070; + text-decoration: none; } + #docs-main #side nav li a:hover { + color: #ff3366; + text-decoration: underline; } + #docs-main #side nav span, + #docs-main #side nav li.active a { + color: #ff3366; + font-weight: bold; } + #docs-main #side nav span:hover, + #docs-main #side nav li.active a:hover { + text-decoration: none; } + #docs-main #side nav h6 { + border-top: 1px solid #eee; + padding-top: 16px; + margin-top: 8px; + margin-bottom: 8px; } + #docs-main #area { + width: 76%; + padding: 32px 64px 48px 64px; } + #docs-main #area h1 { + font-size: 36px; + line-height: 40px; + font-weight: 900; + margin-bottom: 28px; } + #docs-main #area h3 { + font-size: 18px; + line-height: 28px; } + #docs-main #area .lead { + font-size: 18px; + line-height: 28px; + margin-bottom: 24px; } + #docs-main #area .doc-head { + position: relative; + margin-top: 24px; + padding-bottom: 8px; + border-bottom: 1px solid #eee; } + #docs-main #area .doc-head span { + position: absolute; + right: 0; + top: 0; + font-weight: normal; + font-size: 13px; + color: rgba(0, 0, 0, 0.4); } + #docs-main #area .doc-head a { + text-decoration: none; + color: #000; + display: block; + font-size: 20px; } + +.chart-example { + position: relative; + margin-top: 44px; + margin-bottom: 40px; } + .chart-example.inverted { + padding: 32px; + background: #191d21; } + .chart-example.inverted .chart-selector a { + color: rgba(255, 255, 255, 0.85); + border-color: rgba(255, 255, 255, 0.3); } + .chart-example.inverted pre { + color: rgba(255, 255, 255, 0.85); + padding: 0; + background: #191d21; } + +.chart-selector { + text-align: center; + font-size: 14px; + margin-bottom: 24px; } + .chart-selector a { + display: inline-block; + background: rgba(46, 196, 182, 0.05); + border: 1px solid rgba(46, 196, 182, 0.25); + border-radius: 40px; + line-height: 28px; + padding: 0 12px; + color: #000; + text-decoration: none; + margin: 0 4px; } + .chart-selector a:hover, + .chart-selector a.active { + text-decoration: none; + background: #2ec4b6; + color: #fff; + border: 1px solid transparent; } + .chart-selector a:hover { + -moz-transition: all linear 0.2s; + transition: all linear 0.2s; } + +.chart-section-head { + text-align: center; + font-weight: 900; + margin-top: 64px; + margin-bottom: -16px; + font-size: 16px; + line-height: 28px; } + +#posts { + list-style: none; + margin: auto; + margin-top: 48px; + margin-bottom: 128px; + max-width: 680px; + text-align: center; } + +#posts li { + margin-bottom: 40px; } + +#posts h2 { + font-size: 22px; + font-weight: normal; + margin: 0; + line-height: 28px; } + +#posts h2 a { + color: #1eabf2; + text-decoration: none; } + +#posts h2 a:hover { + -moz-transition: all linear 0.2s; + transition: all linear 0.2s; + color: #000; + text-decoration: underline; } + +#posts time { + font-size: 12px; + color: rgba(0, 0, 0, 0.5); } + +#post-box { + max-width: 740px; + margin: auto; } + +#post { + font-size: 18px; + line-height: 32px; + margin-bottom: 40px; } + +#changelog { + max-width: 820px; + margin: auto; + margin-bottom: 104px; } + #changelog h3 { + margin-bottom: 4px; } + #changelog time { + font-size: 11px; + font-weight: bold; + display: block; + text-transform: uppercase; + margin-bottom: 40px; + color: rgba(0, 0, 0, 0.45); } + #changelog .item { + margin-bottom: 20px; + background: #f8f8f8; + padding: 40px; } + #changelog ul { + margin: 0; + list-style: none; } + #changelog li { + margin-bottom: 16px; + padding-bottom: 16px; + border-bottom: 1px solid #eee; } + #changelog li:last-child { + border-bottom: none; } + #changelog li .label { + margin-right: 4px; } + +#kube-features { + margin-top: 104px; + text-align: center; } + #kube-features h3 { + margin-top: 0; } + #kube-features .row:first-child { + padding-bottom: 32px; + margin-bottom: 64px; + border-bottom: 1px dashed rgba(0, 0, 0, 0.15); } + #kube-features p { + font-size: 15px; + color: rgba(0, 0, 0, 0.75); } + #kube-features .item { + padding: 0 24px; } + +#kube-faq { + max-width: 740px; + margin: auto; + font-size: 17px; + line-height: 28px; + margin-bottom: 104px; + border-top: 1px solid rgba(0, 0, 0, 0.07); } + #kube-faq h2 { + font-size: 24px; + font-weight: 900; + text-align: center; + line-height: 32px; + margin-top: 80px; + margin-bottom: 40px; } + +#components { + text-align: center; } + #components.lists { + text-align: left; } + #components.lists .item { + padding: 24px; } + #components.lists .item:hover { + background: #f8f8f8; } + #components .start { + font-size: 24px; + line-height: 32px; } + #components #search-box { + padding: 24px; + background: #ebf0f6; + margin-bottom: 24px; } + #components .item { + background: #f8f8f8; + padding: 68px 24px 60px 24px; + margin-bottom: 20px; } + #components .item:hover { + -moz-transition: all linear 0.2s; + transition: all linear 0.2s; + background: #fcfcfc; } + #components figure { + margin-bottom: 0; } + #components h4 { + font-size: 19px; + margin-top: 0; + margin-bottom: 8px; } + #components h4 a { + color: #3794de; + text-decoration: none; } + #components h4 a:hover { + -moz-transition: all linear 0.2s; + transition: all linear 0.2s; + color: #000; + text-decoration: underline; } + #components ul { + margin-left: 0; + margin-top: 24px; + list-style: none; } + #components li { + line-height: 32px; + margin-bottom: 4px; } + #components li a { + display: inline-block; + color: #3794de; + line-height: 24px; } + #components li a:hover { + -moz-transition: all linear 0.2s; + transition: all linear 0.2s; + color: #000; + text-decoration: underline; } + #components p { + max-width: 220px; + margin: auto; + font-size: 13px; + line-height: 20px; + color: rgba(0, 0, 0, 0.5); } + #components #docs-search-results p { + max-width: none; + margin-bottom: 16px; } + +.demo-head { + font-size: 24px; + line-height: 32px; + font-weight: 900; + margin-top: 80px; + margin-bottom: 20px; + text-align: center; } + +#price-box { + margin-top: 40px; } + #price-box .item { + text-align: center; + padding: 36px; + margin-bottom: 24px; } + #price-box .item-selected { + position: relative; + top: -28px; + background: #fafaf4; } + #price-box .price-label { + position: absolute; + top: -12px; + left: 50%; + margin-left: -60px; + background: #ff3366; + color: #fff; + font-size: 11px; + text-transform: uppercase; + padding: 0 8px; } + #price-box .price-name { + font-size: 12px; + text-transform: uppercase; + line-height: 24px; + font-weight: 900; } + #price-box .price-amount { + margin: 20px 0 32px 0; + font-size: 34px; } + #price-box ul { + margin-left: 0; + list-style: none; + line-height: 36px; } + #price-box li { + font-size: 14px; + border-bottom: 1px solid rgba(0, 0, 0, 0.07); } + #price-box li:last-child { + border-bottom-color: transparent; } + #price-box footer { + margin-top: 32px; } + #price-box button.stripe-button-el { + height: auto; + min-height: 0; } + +#price-secure-box { + text-align: center; + color: rgba(0, 0, 0, 0.6); } + #price-secure-box .extra { + margin-top: 36px; + font-size: 14px; + line-height: 22px; } + +.not-found { + padding: 40px 0; + text-align: center; + font-style: italic; + color: rgba(0, 0, 0, 0.5); } + +.callout { + background: #f8f8f8; + padding: 40px 48px; } + +.callout-form { + margin-bottom: 40px; } + +.color-black { + color: #000; } + +tr.border-none td { + border: none; } + +#purchases-table td { + padding-top: 24px; + padding-bottom: 24px; } + +#purchases-table tr:first-child td { + padding-top: 16px; } + +#purchases-table tr:last-child td { + border-bottom: none; } + +.purchase-table-license { + margin-top: -16px; + margin-bottom: 8px; } + +.purchase-table-version { + display: block; + margin-top: 8px; + margin-bottom: 8px; + line-height: 16px; + font-size: 11px; } + +#invoice-form, +#invoice-form-old { + margin-bottom: 24px; + padding: 40px; + border: 2px solid #eee; } + +#footer { + display: flex; + border-top: 1px solid #eee; + margin: 104px 0; + padding: 0 28px; + padding-top: 24px; + font-size: 13px; + color: rgba(0, 0, 0, 0.5); } + #footer p { + order: 1; } + #footer nav { + order: 2; + margin-left: auto; } + #footer nav ul { + display: flex; } + #footer nav ul li { + margin-left: 20px; } + #footer nav ul li span { + color: rgba(0, 0, 0, 0.3); } + #footer nav ul li a { + color: rgba(0, 0, 0, 0.65); + text-decoration: none; } + #footer nav ul li a:hover { + color: #000; + text-decoration: underline; } + +@media (max-width: 768px) { + #top { + display: block; + height: auto; + padding-bottom: 24px; } + #top ul { + display: block; } + #top #top-brand { + display: none; } + #top #top-nav-main { + padding: 0; + border: none; } + #top #top-nav-extra { + margin: 0; } + #top #top-nav-main li, + #top #top-nav-extra li { + text-align: center; + width: auto; + margin: 16px 0; + padding: 0; } + #subnav li, + #subnav ul li { + text-align: center; + border: none; + display: block; + margin: 16px 0; } + #hero { + margin-top: 32px; + padding-top: 0; + padding-left: 20px; + padding-right: 20px; } + #hero h1 { + font-size: 40px; + line-height: 48px; } + #hero p { + font-size: 16px; + line-height: 24px; } + #posts, + #post-box, + #main { + padding-left: 20px; + padding-right: 20px; } + #action-buttons .button, + #action-buttons button { + margin: 8px 0; } + #footer { + display: block; + text-align: center; } + #footer nav ul { + display: block; + margin-bottom: 40px; } + #footer nav ul li { + margin: 8px 0; } + #grafs-features ul { + margin-bottom: 24px; } + #grafs-features ul.br { + border: none; } + #grafs-features ul.br li, + #grafs-features ul li { + text-align: center; } + .grafs-call-to-action p { + font-size: 20px; + line-height: 32px; } + #docs-main { + display: block; } + #docs-main #side, + #docs-main #area { + width: 100%; + padding: 20px 0; + border: none; } + .grafs-examples-row { + flex-direction: column; } + .grafs-examples-col { + width: 100%; + margin: 0; + margin-bottom: 20px; } + #price-box .item-selected { + margin-top: 24px; + top: 0; } } diff --git a/docs/themes/oscalkit/static/font/Lato-Black.woff b/docs/themes/oscalkit/static/font/Lato-Black.woff new file mode 100644 index 00000000..a0ab25e9 Binary files /dev/null and b/docs/themes/oscalkit/static/font/Lato-Black.woff differ diff --git a/docs/themes/oscalkit/static/font/Lato-Bold.woff b/docs/themes/oscalkit/static/font/Lato-Bold.woff new file mode 100644 index 00000000..f6d8ebfd Binary files /dev/null and b/docs/themes/oscalkit/static/font/Lato-Bold.woff differ diff --git a/docs/themes/oscalkit/static/font/Lato-BoldItalic.woff b/docs/themes/oscalkit/static/font/Lato-BoldItalic.woff new file mode 100644 index 00000000..75077eb8 Binary files /dev/null and b/docs/themes/oscalkit/static/font/Lato-BoldItalic.woff differ diff --git a/docs/themes/oscalkit/static/font/Lato-Italic.woff b/docs/themes/oscalkit/static/font/Lato-Italic.woff new file mode 100644 index 00000000..33d61866 Binary files /dev/null and b/docs/themes/oscalkit/static/font/Lato-Italic.woff differ diff --git a/docs/themes/oscalkit/static/font/Lato-Regular.woff b/docs/themes/oscalkit/static/font/Lato-Regular.woff new file mode 100644 index 00000000..52074eed Binary files /dev/null and b/docs/themes/oscalkit/static/font/Lato-Regular.woff differ diff --git a/docs/themes/oscalkit/static/font/Lato-Semibold.woff b/docs/themes/oscalkit/static/font/Lato-Semibold.woff new file mode 100644 index 00000000..f8db4f90 Binary files /dev/null and b/docs/themes/oscalkit/static/font/Lato-Semibold.woff differ diff --git a/docs/themes/oscalkit/static/font/Lato-SemiboldItalic.woff b/docs/themes/oscalkit/static/font/Lato-SemiboldItalic.woff new file mode 100644 index 00000000..d1df7676 Binary files /dev/null and b/docs/themes/oscalkit/static/font/Lato-SemiboldItalic.woff differ diff --git a/docs/themes/oscalkit/static/img/common/icon-twitter.png b/docs/themes/oscalkit/static/img/common/icon-twitter.png new file mode 100644 index 00000000..1f907dcd Binary files /dev/null and b/docs/themes/oscalkit/static/img/common/icon-twitter.png differ diff --git a/docs/themes/oscalkit/static/img/common/logo.png b/docs/themes/oscalkit/static/img/common/logo.png new file mode 100644 index 00000000..519c2081 Binary files /dev/null and b/docs/themes/oscalkit/static/img/common/logo.png differ diff --git a/docs/themes/oscalkit/static/img/common/logx2.png b/docs/themes/oscalkit/static/img/common/logx2.png new file mode 100644 index 00000000..174cd3f7 Binary files /dev/null and b/docs/themes/oscalkit/static/img/common/logx2.png differ diff --git a/docs/themes/oscalkit/static/img/favicons/logo-384x384.png b/docs/themes/oscalkit/static/img/favicons/logo-384x384.png new file mode 100644 index 00000000..08cf70eb Binary files /dev/null and b/docs/themes/oscalkit/static/img/favicons/logo-384x384.png differ diff --git a/docs/themes/oscalkit/static/img/icon-minimalism.png b/docs/themes/oscalkit/static/img/icon-minimalism.png new file mode 100644 index 00000000..f0961ab6 Binary files /dev/null and b/docs/themes/oscalkit/static/img/icon-minimalism.png differ diff --git a/docs/themes/oscalkit/static/img/icon-typo.png b/docs/themes/oscalkit/static/img/icon-typo.png new file mode 100644 index 00000000..083b5b41 Binary files /dev/null and b/docs/themes/oscalkit/static/img/icon-typo.png differ diff --git a/docs/themes/oscalkit/static/img/kube/brand.png b/docs/themes/oscalkit/static/img/kube/brand.png new file mode 100644 index 00000000..15ab15e4 Binary files /dev/null and b/docs/themes/oscalkit/static/img/kube/brand.png differ diff --git a/docs/themes/oscalkit/static/img/kube/icon-baseline.png b/docs/themes/oscalkit/static/img/kube/icon-baseline.png new file mode 100644 index 00000000..e7de5d91 Binary files /dev/null and b/docs/themes/oscalkit/static/img/kube/icon-baseline.png differ diff --git a/docs/themes/oscalkit/static/img/kube/icon-minimalism.png b/docs/themes/oscalkit/static/img/kube/icon-minimalism.png new file mode 100644 index 00000000..f0961ab6 Binary files /dev/null and b/docs/themes/oscalkit/static/img/kube/icon-minimalism.png differ diff --git a/docs/themes/oscalkit/static/img/kube/icon-typo.png b/docs/themes/oscalkit/static/img/kube/icon-typo.png new file mode 100644 index 00000000..083b5b41 Binary files /dev/null and b/docs/themes/oscalkit/static/img/kube/icon-typo.png differ diff --git a/docs/themes/oscalkit/static/img/kube/typography/01.png b/docs/themes/oscalkit/static/img/kube/typography/01.png new file mode 100644 index 00000000..3d06a7be Binary files /dev/null and b/docs/themes/oscalkit/static/img/kube/typography/01.png differ diff --git a/docs/themes/oscalkit/static/img/kube/typography/02.png b/docs/themes/oscalkit/static/img/kube/typography/02.png new file mode 100644 index 00000000..8077f2b8 Binary files /dev/null and b/docs/themes/oscalkit/static/img/kube/typography/02.png differ diff --git a/docs/themes/oscalkit/static/js/jquery-2.1.4.min.js b/docs/themes/oscalkit/static/js/jquery-2.1.4.min.js new file mode 100644 index 00000000..6f435540 --- /dev/null +++ b/docs/themes/oscalkit/static/js/jquery-2.1.4.min.js @@ -0,0 +1,5 @@ +/*! jQuery v2.1.4 | (c) 2005, 2015 jQuery Foundation, Inc. | jquery.org/license */ +!function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){var c=[],d=c.slice,e=c.concat,f=c.push,g=c.indexOf,h={},i=h.toString,j=h.hasOwnProperty,k={},l=a.document,m="2.1.4",n=function(a,b){return new n.fn.init(a,b)},o=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,p=/^-ms-/,q=/-([\da-z])/gi,r=function(a,b){return b.toUpperCase()};n.fn=n.prototype={jquery:m,constructor:n,selector:"",length:0,toArray:function(){return d.call(this)},get:function(a){return null!=a?0>a?this[a+this.length]:this[a]:d.call(this)},pushStack:function(a){var b=n.merge(this.constructor(),a);return b.prevObject=this,b.context=this.context,b},each:function(a,b){return n.each(this,a,b)},map:function(a){return this.pushStack(n.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(d.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(0>a?b:0);return this.pushStack(c>=0&&b>c?[this[c]]:[])},end:function(){return this.prevObject||this.constructor(null)},push:f,sort:c.sort,splice:c.splice},n.extend=n.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||n.isFunction(g)||(g={}),h===i&&(g=this,h--);i>h;h++)if(null!=(a=arguments[h]))for(b in a)c=g[b],d=a[b],g!==d&&(j&&d&&(n.isPlainObject(d)||(e=n.isArray(d)))?(e?(e=!1,f=c&&n.isArray(c)?c:[]):f=c&&n.isPlainObject(c)?c:{},g[b]=n.extend(j,f,d)):void 0!==d&&(g[b]=d));return g},n.extend({expando:"jQuery"+(m+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new Error(a)},noop:function(){},isFunction:function(a){return"function"===n.type(a)},isArray:Array.isArray,isWindow:function(a){return null!=a&&a===a.window},isNumeric:function(a){return!n.isArray(a)&&a-parseFloat(a)+1>=0},isPlainObject:function(a){return"object"!==n.type(a)||a.nodeType||n.isWindow(a)?!1:a.constructor&&!j.call(a.constructor.prototype,"isPrototypeOf")?!1:!0},isEmptyObject:function(a){var b;for(b in a)return!1;return!0},type:function(a){return null==a?a+"":"object"==typeof a||"function"==typeof a?h[i.call(a)]||"object":typeof a},globalEval:function(a){var b,c=eval;a=n.trim(a),a&&(1===a.indexOf("use strict")?(b=l.createElement("script"),b.text=a,l.head.appendChild(b).parentNode.removeChild(b)):c(a))},camelCase:function(a){return a.replace(p,"ms-").replace(q,r)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toLowerCase()===b.toLowerCase()},each:function(a,b,c){var d,e=0,f=a.length,g=s(a);if(c){if(g){for(;f>e;e++)if(d=b.apply(a[e],c),d===!1)break}else for(e in a)if(d=b.apply(a[e],c),d===!1)break}else if(g){for(;f>e;e++)if(d=b.call(a[e],e,a[e]),d===!1)break}else for(e in a)if(d=b.call(a[e],e,a[e]),d===!1)break;return a},trim:function(a){return null==a?"":(a+"").replace(o,"")},makeArray:function(a,b){var c=b||[];return null!=a&&(s(Object(a))?n.merge(c,"string"==typeof a?[a]:a):f.call(c,a)),c},inArray:function(a,b,c){return null==b?-1:g.call(b,a,c)},merge:function(a,b){for(var c=+b.length,d=0,e=a.length;c>d;d++)a[e++]=b[d];return a.length=e,a},grep:function(a,b,c){for(var d,e=[],f=0,g=a.length,h=!c;g>f;f++)d=!b(a[f],f),d!==h&&e.push(a[f]);return e},map:function(a,b,c){var d,f=0,g=a.length,h=s(a),i=[];if(h)for(;g>f;f++)d=b(a[f],f,c),null!=d&&i.push(d);else for(f in a)d=b(a[f],f,c),null!=d&&i.push(d);return e.apply([],i)},guid:1,proxy:function(a,b){var c,e,f;return"string"==typeof b&&(c=a[b],b=a,a=c),n.isFunction(a)?(e=d.call(arguments,2),f=function(){return a.apply(b||this,e.concat(d.call(arguments)))},f.guid=a.guid=a.guid||n.guid++,f):void 0},now:Date.now,support:k}),n.each("Boolean Number String Function Array Date RegExp Object Error".split(" "),function(a,b){h["[object "+b+"]"]=b.toLowerCase()});function s(a){var b="length"in a&&a.length,c=n.type(a);return"function"===c||n.isWindow(a)?!1:1===a.nodeType&&b?!0:"array"===c||0===b||"number"==typeof b&&b>0&&b-1 in a}var t=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u="sizzle"+1*new Date,v=a.document,w=0,x=0,y=ha(),z=ha(),A=ha(),B=function(a,b){return a===b&&(l=!0),0},C=1<<31,D={}.hasOwnProperty,E=[],F=E.pop,G=E.push,H=E.push,I=E.slice,J=function(a,b){for(var c=0,d=a.length;d>c;c++)if(a[c]===b)return c;return-1},K="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",L="[\\x20\\t\\r\\n\\f]",M="(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",N=M.replace("w","w#"),O="\\["+L+"*("+M+")(?:"+L+"*([*^$|!~]?=)"+L+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+N+"))|)"+L+"*\\]",P=":("+M+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+O+")*)|.*)\\)|)",Q=new RegExp(L+"+","g"),R=new RegExp("^"+L+"+|((?:^|[^\\\\])(?:\\\\.)*)"+L+"+$","g"),S=new RegExp("^"+L+"*,"+L+"*"),T=new RegExp("^"+L+"*([>+~]|"+L+")"+L+"*"),U=new RegExp("="+L+"*([^\\]'\"]*?)"+L+"*\\]","g"),V=new RegExp(P),W=new RegExp("^"+N+"$"),X={ID:new RegExp("^#("+M+")"),CLASS:new RegExp("^\\.("+M+")"),TAG:new RegExp("^("+M.replace("w","w*")+")"),ATTR:new RegExp("^"+O),PSEUDO:new RegExp("^"+P),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+L+"*(even|odd|(([+-]|)(\\d*)n|)"+L+"*(?:([+-]|)"+L+"*(\\d+)|))"+L+"*\\)|)","i"),bool:new RegExp("^(?:"+K+")$","i"),needsContext:new RegExp("^"+L+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+L+"*((?:-\\d)?\\d*)"+L+"*\\)|)(?=[^-]|$)","i")},Y=/^(?:input|select|textarea|button)$/i,Z=/^h\d$/i,$=/^[^{]+\{\s*\[native \w/,_=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,aa=/[+~]/,ba=/'|\\/g,ca=new RegExp("\\\\([\\da-f]{1,6}"+L+"?|("+L+")|.)","ig"),da=function(a,b,c){var d="0x"+b-65536;return d!==d||c?b:0>d?String.fromCharCode(d+65536):String.fromCharCode(d>>10|55296,1023&d|56320)},ea=function(){m()};try{H.apply(E=I.call(v.childNodes),v.childNodes),E[v.childNodes.length].nodeType}catch(fa){H={apply:E.length?function(a,b){G.apply(a,I.call(b))}:function(a,b){var c=a.length,d=0;while(a[c++]=b[d++]);a.length=c-1}}}function ga(a,b,d,e){var f,h,j,k,l,o,r,s,w,x;if((b?b.ownerDocument||b:v)!==n&&m(b),b=b||n,d=d||[],k=b.nodeType,"string"!=typeof a||!a||1!==k&&9!==k&&11!==k)return d;if(!e&&p){if(11!==k&&(f=_.exec(a)))if(j=f[1]){if(9===k){if(h=b.getElementById(j),!h||!h.parentNode)return d;if(h.id===j)return d.push(h),d}else if(b.ownerDocument&&(h=b.ownerDocument.getElementById(j))&&t(b,h)&&h.id===j)return d.push(h),d}else{if(f[2])return H.apply(d,b.getElementsByTagName(a)),d;if((j=f[3])&&c.getElementsByClassName)return H.apply(d,b.getElementsByClassName(j)),d}if(c.qsa&&(!q||!q.test(a))){if(s=r=u,w=b,x=1!==k&&a,1===k&&"object"!==b.nodeName.toLowerCase()){o=g(a),(r=b.getAttribute("id"))?s=r.replace(ba,"\\$&"):b.setAttribute("id",s),s="[id='"+s+"'] ",l=o.length;while(l--)o[l]=s+ra(o[l]);w=aa.test(a)&&pa(b.parentNode)||b,x=o.join(",")}if(x)try{return H.apply(d,w.querySelectorAll(x)),d}catch(y){}finally{r||b.removeAttribute("id")}}}return i(a.replace(R,"$1"),b,d,e)}function ha(){var a=[];function b(c,e){return a.push(c+" ")>d.cacheLength&&delete b[a.shift()],b[c+" "]=e}return b}function ia(a){return a[u]=!0,a}function ja(a){var b=n.createElement("div");try{return!!a(b)}catch(c){return!1}finally{b.parentNode&&b.parentNode.removeChild(b),b=null}}function ka(a,b){var c=a.split("|"),e=a.length;while(e--)d.attrHandle[c[e]]=b}function la(a,b){var c=b&&a,d=c&&1===a.nodeType&&1===b.nodeType&&(~b.sourceIndex||C)-(~a.sourceIndex||C);if(d)return d;if(c)while(c=c.nextSibling)if(c===b)return-1;return a?1:-1}function ma(a){return function(b){var c=b.nodeName.toLowerCase();return"input"===c&&b.type===a}}function na(a){return function(b){var c=b.nodeName.toLowerCase();return("input"===c||"button"===c)&&b.type===a}}function oa(a){return ia(function(b){return b=+b,ia(function(c,d){var e,f=a([],c.length,b),g=f.length;while(g--)c[e=f[g]]&&(c[e]=!(d[e]=c[e]))})})}function pa(a){return a&&"undefined"!=typeof a.getElementsByTagName&&a}c=ga.support={},f=ga.isXML=function(a){var b=a&&(a.ownerDocument||a).documentElement;return b?"HTML"!==b.nodeName:!1},m=ga.setDocument=function(a){var b,e,g=a?a.ownerDocument||a:v;return g!==n&&9===g.nodeType&&g.documentElement?(n=g,o=g.documentElement,e=g.defaultView,e&&e!==e.top&&(e.addEventListener?e.addEventListener("unload",ea,!1):e.attachEvent&&e.attachEvent("onunload",ea)),p=!f(g),c.attributes=ja(function(a){return a.className="i",!a.getAttribute("className")}),c.getElementsByTagName=ja(function(a){return a.appendChild(g.createComment("")),!a.getElementsByTagName("*").length}),c.getElementsByClassName=$.test(g.getElementsByClassName),c.getById=ja(function(a){return o.appendChild(a).id=u,!g.getElementsByName||!g.getElementsByName(u).length}),c.getById?(d.find.ID=function(a,b){if("undefined"!=typeof b.getElementById&&p){var c=b.getElementById(a);return c&&c.parentNode?[c]:[]}},d.filter.ID=function(a){var b=a.replace(ca,da);return function(a){return a.getAttribute("id")===b}}):(delete d.find.ID,d.filter.ID=function(a){var b=a.replace(ca,da);return function(a){var c="undefined"!=typeof a.getAttributeNode&&a.getAttributeNode("id");return c&&c.value===b}}),d.find.TAG=c.getElementsByTagName?function(a,b){return"undefined"!=typeof b.getElementsByTagName?b.getElementsByTagName(a):c.qsa?b.querySelectorAll(a):void 0}:function(a,b){var c,d=[],e=0,f=b.getElementsByTagName(a);if("*"===a){while(c=f[e++])1===c.nodeType&&d.push(c);return d}return f},d.find.CLASS=c.getElementsByClassName&&function(a,b){return p?b.getElementsByClassName(a):void 0},r=[],q=[],(c.qsa=$.test(g.querySelectorAll))&&(ja(function(a){o.appendChild(a).innerHTML="",a.querySelectorAll("[msallowcapture^='']").length&&q.push("[*^$]="+L+"*(?:''|\"\")"),a.querySelectorAll("[selected]").length||q.push("\\["+L+"*(?:value|"+K+")"),a.querySelectorAll("[id~="+u+"-]").length||q.push("~="),a.querySelectorAll(":checked").length||q.push(":checked"),a.querySelectorAll("a#"+u+"+*").length||q.push(".#.+[+~]")}),ja(function(a){var b=g.createElement("input");b.setAttribute("type","hidden"),a.appendChild(b).setAttribute("name","D"),a.querySelectorAll("[name=d]").length&&q.push("name"+L+"*[*^$|!~]?="),a.querySelectorAll(":enabled").length||q.push(":enabled",":disabled"),a.querySelectorAll("*,:x"),q.push(",.*:")})),(c.matchesSelector=$.test(s=o.matches||o.webkitMatchesSelector||o.mozMatchesSelector||o.oMatchesSelector||o.msMatchesSelector))&&ja(function(a){c.disconnectedMatch=s.call(a,"div"),s.call(a,"[s!='']:x"),r.push("!=",P)}),q=q.length&&new RegExp(q.join("|")),r=r.length&&new RegExp(r.join("|")),b=$.test(o.compareDocumentPosition),t=b||$.test(o.contains)?function(a,b){var c=9===a.nodeType?a.documentElement:a,d=b&&b.parentNode;return a===d||!(!d||1!==d.nodeType||!(c.contains?c.contains(d):a.compareDocumentPosition&&16&a.compareDocumentPosition(d)))}:function(a,b){if(b)while(b=b.parentNode)if(b===a)return!0;return!1},B=b?function(a,b){if(a===b)return l=!0,0;var d=!a.compareDocumentPosition-!b.compareDocumentPosition;return d?d:(d=(a.ownerDocument||a)===(b.ownerDocument||b)?a.compareDocumentPosition(b):1,1&d||!c.sortDetached&&b.compareDocumentPosition(a)===d?a===g||a.ownerDocument===v&&t(v,a)?-1:b===g||b.ownerDocument===v&&t(v,b)?1:k?J(k,a)-J(k,b):0:4&d?-1:1)}:function(a,b){if(a===b)return l=!0,0;var c,d=0,e=a.parentNode,f=b.parentNode,h=[a],i=[b];if(!e||!f)return a===g?-1:b===g?1:e?-1:f?1:k?J(k,a)-J(k,b):0;if(e===f)return la(a,b);c=a;while(c=c.parentNode)h.unshift(c);c=b;while(c=c.parentNode)i.unshift(c);while(h[d]===i[d])d++;return d?la(h[d],i[d]):h[d]===v?-1:i[d]===v?1:0},g):n},ga.matches=function(a,b){return ga(a,null,null,b)},ga.matchesSelector=function(a,b){if((a.ownerDocument||a)!==n&&m(a),b=b.replace(U,"='$1']"),!(!c.matchesSelector||!p||r&&r.test(b)||q&&q.test(b)))try{var d=s.call(a,b);if(d||c.disconnectedMatch||a.document&&11!==a.document.nodeType)return d}catch(e){}return ga(b,n,null,[a]).length>0},ga.contains=function(a,b){return(a.ownerDocument||a)!==n&&m(a),t(a,b)},ga.attr=function(a,b){(a.ownerDocument||a)!==n&&m(a);var e=d.attrHandle[b.toLowerCase()],f=e&&D.call(d.attrHandle,b.toLowerCase())?e(a,b,!p):void 0;return void 0!==f?f:c.attributes||!p?a.getAttribute(b):(f=a.getAttributeNode(b))&&f.specified?f.value:null},ga.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)},ga.uniqueSort=function(a){var b,d=[],e=0,f=0;if(l=!c.detectDuplicates,k=!c.sortStable&&a.slice(0),a.sort(B),l){while(b=a[f++])b===a[f]&&(e=d.push(f));while(e--)a.splice(d[e],1)}return k=null,a},e=ga.getText=function(a){var b,c="",d=0,f=a.nodeType;if(f){if(1===f||9===f||11===f){if("string"==typeof a.textContent)return a.textContent;for(a=a.firstChild;a;a=a.nextSibling)c+=e(a)}else if(3===f||4===f)return a.nodeValue}else while(b=a[d++])c+=e(b);return c},d=ga.selectors={cacheLength:50,createPseudo:ia,match:X,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(a){return a[1]=a[1].replace(ca,da),a[3]=(a[3]||a[4]||a[5]||"").replace(ca,da),"~="===a[2]&&(a[3]=" "+a[3]+" "),a.slice(0,4)},CHILD:function(a){return a[1]=a[1].toLowerCase(),"nth"===a[1].slice(0,3)?(a[3]||ga.error(a[0]),a[4]=+(a[4]?a[5]+(a[6]||1):2*("even"===a[3]||"odd"===a[3])),a[5]=+(a[7]+a[8]||"odd"===a[3])):a[3]&&ga.error(a[0]),a},PSEUDO:function(a){var b,c=!a[6]&&a[2];return X.CHILD.test(a[0])?null:(a[3]?a[2]=a[4]||a[5]||"":c&&V.test(c)&&(b=g(c,!0))&&(b=c.indexOf(")",c.length-b)-c.length)&&(a[0]=a[0].slice(0,b),a[2]=c.slice(0,b)),a.slice(0,3))}},filter:{TAG:function(a){var b=a.replace(ca,da).toLowerCase();return"*"===a?function(){return!0}:function(a){return a.nodeName&&a.nodeName.toLowerCase()===b}},CLASS:function(a){var b=y[a+" "];return b||(b=new RegExp("(^|"+L+")"+a+"("+L+"|$)"))&&y(a,function(a){return b.test("string"==typeof a.className&&a.className||"undefined"!=typeof a.getAttribute&&a.getAttribute("class")||"")})},ATTR:function(a,b,c){return function(d){var e=ga.attr(d,a);return null==e?"!="===b:b?(e+="","="===b?e===c:"!="===b?e!==c:"^="===b?c&&0===e.indexOf(c):"*="===b?c&&e.indexOf(c)>-1:"$="===b?c&&e.slice(-c.length)===c:"~="===b?(" "+e.replace(Q," ")+" ").indexOf(c)>-1:"|="===b?e===c||e.slice(0,c.length+1)===c+"-":!1):!0}},CHILD:function(a,b,c,d,e){var f="nth"!==a.slice(0,3),g="last"!==a.slice(-4),h="of-type"===b;return 1===d&&0===e?function(a){return!!a.parentNode}:function(b,c,i){var j,k,l,m,n,o,p=f!==g?"nextSibling":"previousSibling",q=b.parentNode,r=h&&b.nodeName.toLowerCase(),s=!i&&!h;if(q){if(f){while(p){l=b;while(l=l[p])if(h?l.nodeName.toLowerCase()===r:1===l.nodeType)return!1;o=p="only"===a&&!o&&"nextSibling"}return!0}if(o=[g?q.firstChild:q.lastChild],g&&s){k=q[u]||(q[u]={}),j=k[a]||[],n=j[0]===w&&j[1],m=j[0]===w&&j[2],l=n&&q.childNodes[n];while(l=++n&&l&&l[p]||(m=n=0)||o.pop())if(1===l.nodeType&&++m&&l===b){k[a]=[w,n,m];break}}else if(s&&(j=(b[u]||(b[u]={}))[a])&&j[0]===w)m=j[1];else while(l=++n&&l&&l[p]||(m=n=0)||o.pop())if((h?l.nodeName.toLowerCase()===r:1===l.nodeType)&&++m&&(s&&((l[u]||(l[u]={}))[a]=[w,m]),l===b))break;return m-=e,m===d||m%d===0&&m/d>=0}}},PSEUDO:function(a,b){var c,e=d.pseudos[a]||d.setFilters[a.toLowerCase()]||ga.error("unsupported pseudo: "+a);return e[u]?e(b):e.length>1?(c=[a,a,"",b],d.setFilters.hasOwnProperty(a.toLowerCase())?ia(function(a,c){var d,f=e(a,b),g=f.length;while(g--)d=J(a,f[g]),a[d]=!(c[d]=f[g])}):function(a){return e(a,0,c)}):e}},pseudos:{not:ia(function(a){var b=[],c=[],d=h(a.replace(R,"$1"));return d[u]?ia(function(a,b,c,e){var f,g=d(a,null,e,[]),h=a.length;while(h--)(f=g[h])&&(a[h]=!(b[h]=f))}):function(a,e,f){return b[0]=a,d(b,null,f,c),b[0]=null,!c.pop()}}),has:ia(function(a){return function(b){return ga(a,b).length>0}}),contains:ia(function(a){return a=a.replace(ca,da),function(b){return(b.textContent||b.innerText||e(b)).indexOf(a)>-1}}),lang:ia(function(a){return W.test(a||"")||ga.error("unsupported lang: "+a),a=a.replace(ca,da).toLowerCase(),function(b){var c;do if(c=p?b.lang:b.getAttribute("xml:lang")||b.getAttribute("lang"))return c=c.toLowerCase(),c===a||0===c.indexOf(a+"-");while((b=b.parentNode)&&1===b.nodeType);return!1}}),target:function(b){var c=a.location&&a.location.hash;return c&&c.slice(1)===b.id},root:function(a){return a===o},focus:function(a){return a===n.activeElement&&(!n.hasFocus||n.hasFocus())&&!!(a.type||a.href||~a.tabIndex)},enabled:function(a){return a.disabled===!1},disabled:function(a){return a.disabled===!0},checked:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&!!a.checked||"option"===b&&!!a.selected},selected:function(a){return a.parentNode&&a.parentNode.selectedIndex,a.selected===!0},empty:function(a){for(a=a.firstChild;a;a=a.nextSibling)if(a.nodeType<6)return!1;return!0},parent:function(a){return!d.pseudos.empty(a)},header:function(a){return Z.test(a.nodeName)},input:function(a){return Y.test(a.nodeName)},button:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&"button"===a.type||"button"===b},text:function(a){var b;return"input"===a.nodeName.toLowerCase()&&"text"===a.type&&(null==(b=a.getAttribute("type"))||"text"===b.toLowerCase())},first:oa(function(){return[0]}),last:oa(function(a,b){return[b-1]}),eq:oa(function(a,b,c){return[0>c?c+b:c]}),even:oa(function(a,b){for(var c=0;b>c;c+=2)a.push(c);return a}),odd:oa(function(a,b){for(var c=1;b>c;c+=2)a.push(c);return a}),lt:oa(function(a,b,c){for(var d=0>c?c+b:c;--d>=0;)a.push(d);return a}),gt:oa(function(a,b,c){for(var d=0>c?c+b:c;++db;b++)d+=a[b].value;return d}function sa(a,b,c){var d=b.dir,e=c&&"parentNode"===d,f=x++;return b.first?function(b,c,f){while(b=b[d])if(1===b.nodeType||e)return a(b,c,f)}:function(b,c,g){var h,i,j=[w,f];if(g){while(b=b[d])if((1===b.nodeType||e)&&a(b,c,g))return!0}else while(b=b[d])if(1===b.nodeType||e){if(i=b[u]||(b[u]={}),(h=i[d])&&h[0]===w&&h[1]===f)return j[2]=h[2];if(i[d]=j,j[2]=a(b,c,g))return!0}}}function ta(a){return a.length>1?function(b,c,d){var e=a.length;while(e--)if(!a[e](b,c,d))return!1;return!0}:a[0]}function ua(a,b,c){for(var d=0,e=b.length;e>d;d++)ga(a,b[d],c);return c}function va(a,b,c,d,e){for(var f,g=[],h=0,i=a.length,j=null!=b;i>h;h++)(f=a[h])&&(!c||c(f,d,e))&&(g.push(f),j&&b.push(h));return g}function wa(a,b,c,d,e,f){return d&&!d[u]&&(d=wa(d)),e&&!e[u]&&(e=wa(e,f)),ia(function(f,g,h,i){var j,k,l,m=[],n=[],o=g.length,p=f||ua(b||"*",h.nodeType?[h]:h,[]),q=!a||!f&&b?p:va(p,m,a,h,i),r=c?e||(f?a:o||d)?[]:g:q;if(c&&c(q,r,h,i),d){j=va(r,n),d(j,[],h,i),k=j.length;while(k--)(l=j[k])&&(r[n[k]]=!(q[n[k]]=l))}if(f){if(e||a){if(e){j=[],k=r.length;while(k--)(l=r[k])&&j.push(q[k]=l);e(null,r=[],j,i)}k=r.length;while(k--)(l=r[k])&&(j=e?J(f,l):m[k])>-1&&(f[j]=!(g[j]=l))}}else r=va(r===g?r.splice(o,r.length):r),e?e(null,g,r,i):H.apply(g,r)})}function xa(a){for(var b,c,e,f=a.length,g=d.relative[a[0].type],h=g||d.relative[" "],i=g?1:0,k=sa(function(a){return a===b},h,!0),l=sa(function(a){return J(b,a)>-1},h,!0),m=[function(a,c,d){var e=!g&&(d||c!==j)||((b=c).nodeType?k(a,c,d):l(a,c,d));return b=null,e}];f>i;i++)if(c=d.relative[a[i].type])m=[sa(ta(m),c)];else{if(c=d.filter[a[i].type].apply(null,a[i].matches),c[u]){for(e=++i;f>e;e++)if(d.relative[a[e].type])break;return wa(i>1&&ta(m),i>1&&ra(a.slice(0,i-1).concat({value:" "===a[i-2].type?"*":""})).replace(R,"$1"),c,e>i&&xa(a.slice(i,e)),f>e&&xa(a=a.slice(e)),f>e&&ra(a))}m.push(c)}return ta(m)}function ya(a,b){var c=b.length>0,e=a.length>0,f=function(f,g,h,i,k){var l,m,o,p=0,q="0",r=f&&[],s=[],t=j,u=f||e&&d.find.TAG("*",k),v=w+=null==t?1:Math.random()||.1,x=u.length;for(k&&(j=g!==n&&g);q!==x&&null!=(l=u[q]);q++){if(e&&l){m=0;while(o=a[m++])if(o(l,g,h)){i.push(l);break}k&&(w=v)}c&&((l=!o&&l)&&p--,f&&r.push(l))}if(p+=q,c&&q!==p){m=0;while(o=b[m++])o(r,s,g,h);if(f){if(p>0)while(q--)r[q]||s[q]||(s[q]=F.call(i));s=va(s)}H.apply(i,s),k&&!f&&s.length>0&&p+b.length>1&&ga.uniqueSort(i)}return k&&(w=v,j=t),r};return c?ia(f):f}return h=ga.compile=function(a,b){var c,d=[],e=[],f=A[a+" "];if(!f){b||(b=g(a)),c=b.length;while(c--)f=xa(b[c]),f[u]?d.push(f):e.push(f);f=A(a,ya(e,d)),f.selector=a}return f},i=ga.select=function(a,b,e,f){var i,j,k,l,m,n="function"==typeof a&&a,o=!f&&g(a=n.selector||a);if(e=e||[],1===o.length){if(j=o[0]=o[0].slice(0),j.length>2&&"ID"===(k=j[0]).type&&c.getById&&9===b.nodeType&&p&&d.relative[j[1].type]){if(b=(d.find.ID(k.matches[0].replace(ca,da),b)||[])[0],!b)return e;n&&(b=b.parentNode),a=a.slice(j.shift().value.length)}i=X.needsContext.test(a)?0:j.length;while(i--){if(k=j[i],d.relative[l=k.type])break;if((m=d.find[l])&&(f=m(k.matches[0].replace(ca,da),aa.test(j[0].type)&&pa(b.parentNode)||b))){if(j.splice(i,1),a=f.length&&ra(j),!a)return H.apply(e,f),e;break}}}return(n||h(a,o))(f,b,!p,e,aa.test(a)&&pa(b.parentNode)||b),e},c.sortStable=u.split("").sort(B).join("")===u,c.detectDuplicates=!!l,m(),c.sortDetached=ja(function(a){return 1&a.compareDocumentPosition(n.createElement("div"))}),ja(function(a){return a.innerHTML="","#"===a.firstChild.getAttribute("href")})||ka("type|href|height|width",function(a,b,c){return c?void 0:a.getAttribute(b,"type"===b.toLowerCase()?1:2)}),c.attributes&&ja(function(a){return a.innerHTML="",a.firstChild.setAttribute("value",""),""===a.firstChild.getAttribute("value")})||ka("value",function(a,b,c){return c||"input"!==a.nodeName.toLowerCase()?void 0:a.defaultValue}),ja(function(a){return null==a.getAttribute("disabled")})||ka(K,function(a,b,c){var d;return c?void 0:a[b]===!0?b.toLowerCase():(d=a.getAttributeNode(b))&&d.specified?d.value:null}),ga}(a);n.find=t,n.expr=t.selectors,n.expr[":"]=n.expr.pseudos,n.unique=t.uniqueSort,n.text=t.getText,n.isXMLDoc=t.isXML,n.contains=t.contains;var u=n.expr.match.needsContext,v=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,w=/^.[^:#\[\.,]*$/;function x(a,b,c){if(n.isFunction(b))return n.grep(a,function(a,d){return!!b.call(a,d,a)!==c});if(b.nodeType)return n.grep(a,function(a){return a===b!==c});if("string"==typeof b){if(w.test(b))return n.filter(b,a,c);b=n.filter(b,a)}return n.grep(a,function(a){return g.call(b,a)>=0!==c})}n.filter=function(a,b,c){var d=b[0];return c&&(a=":not("+a+")"),1===b.length&&1===d.nodeType?n.find.matchesSelector(d,a)?[d]:[]:n.find.matches(a,n.grep(b,function(a){return 1===a.nodeType}))},n.fn.extend({find:function(a){var b,c=this.length,d=[],e=this;if("string"!=typeof a)return this.pushStack(n(a).filter(function(){for(b=0;c>b;b++)if(n.contains(e[b],this))return!0}));for(b=0;c>b;b++)n.find(a,e[b],d);return d=this.pushStack(c>1?n.unique(d):d),d.selector=this.selector?this.selector+" "+a:a,d},filter:function(a){return this.pushStack(x(this,a||[],!1))},not:function(a){return this.pushStack(x(this,a||[],!0))},is:function(a){return!!x(this,"string"==typeof a&&u.test(a)?n(a):a||[],!1).length}});var y,z=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,A=n.fn.init=function(a,b){var c,d;if(!a)return this;if("string"==typeof a){if(c="<"===a[0]&&">"===a[a.length-1]&&a.length>=3?[null,a,null]:z.exec(a),!c||!c[1]&&b)return!b||b.jquery?(b||y).find(a):this.constructor(b).find(a);if(c[1]){if(b=b instanceof n?b[0]:b,n.merge(this,n.parseHTML(c[1],b&&b.nodeType?b.ownerDocument||b:l,!0)),v.test(c[1])&&n.isPlainObject(b))for(c in b)n.isFunction(this[c])?this[c](b[c]):this.attr(c,b[c]);return this}return d=l.getElementById(c[2]),d&&d.parentNode&&(this.length=1,this[0]=d),this.context=l,this.selector=a,this}return a.nodeType?(this.context=this[0]=a,this.length=1,this):n.isFunction(a)?"undefined"!=typeof y.ready?y.ready(a):a(n):(void 0!==a.selector&&(this.selector=a.selector,this.context=a.context),n.makeArray(a,this))};A.prototype=n.fn,y=n(l);var B=/^(?:parents|prev(?:Until|All))/,C={children:!0,contents:!0,next:!0,prev:!0};n.extend({dir:function(a,b,c){var d=[],e=void 0!==c;while((a=a[b])&&9!==a.nodeType)if(1===a.nodeType){if(e&&n(a).is(c))break;d.push(a)}return d},sibling:function(a,b){for(var c=[];a;a=a.nextSibling)1===a.nodeType&&a!==b&&c.push(a);return c}}),n.fn.extend({has:function(a){var b=n(a,this),c=b.length;return this.filter(function(){for(var a=0;c>a;a++)if(n.contains(this,b[a]))return!0})},closest:function(a,b){for(var c,d=0,e=this.length,f=[],g=u.test(a)||"string"!=typeof a?n(a,b||this.context):0;e>d;d++)for(c=this[d];c&&c!==b;c=c.parentNode)if(c.nodeType<11&&(g?g.index(c)>-1:1===c.nodeType&&n.find.matchesSelector(c,a))){f.push(c);break}return this.pushStack(f.length>1?n.unique(f):f)},index:function(a){return a?"string"==typeof a?g.call(n(a),this[0]):g.call(this,a.jquery?a[0]:a):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(a,b){return this.pushStack(n.unique(n.merge(this.get(),n(a,b))))},addBack:function(a){return this.add(null==a?this.prevObject:this.prevObject.filter(a))}});function D(a,b){while((a=a[b])&&1!==a.nodeType);return a}n.each({parent:function(a){var b=a.parentNode;return b&&11!==b.nodeType?b:null},parents:function(a){return n.dir(a,"parentNode")},parentsUntil:function(a,b,c){return n.dir(a,"parentNode",c)},next:function(a){return D(a,"nextSibling")},prev:function(a){return D(a,"previousSibling")},nextAll:function(a){return n.dir(a,"nextSibling")},prevAll:function(a){return n.dir(a,"previousSibling")},nextUntil:function(a,b,c){return n.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return n.dir(a,"previousSibling",c)},siblings:function(a){return n.sibling((a.parentNode||{}).firstChild,a)},children:function(a){return n.sibling(a.firstChild)},contents:function(a){return a.contentDocument||n.merge([],a.childNodes)}},function(a,b){n.fn[a]=function(c,d){var e=n.map(this,b,c);return"Until"!==a.slice(-5)&&(d=c),d&&"string"==typeof d&&(e=n.filter(d,e)),this.length>1&&(C[a]||n.unique(e),B.test(a)&&e.reverse()),this.pushStack(e)}});var E=/\S+/g,F={};function G(a){var b=F[a]={};return n.each(a.match(E)||[],function(a,c){b[c]=!0}),b}n.Callbacks=function(a){a="string"==typeof a?F[a]||G(a):n.extend({},a);var b,c,d,e,f,g,h=[],i=!a.once&&[],j=function(l){for(b=a.memory&&l,c=!0,g=e||0,e=0,f=h.length,d=!0;h&&f>g;g++)if(h[g].apply(l[0],l[1])===!1&&a.stopOnFalse){b=!1;break}d=!1,h&&(i?i.length&&j(i.shift()):b?h=[]:k.disable())},k={add:function(){if(h){var c=h.length;!function g(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&g(c)})}(arguments),d?f=h.length:b&&(e=c,j(b))}return this},remove:function(){return h&&n.each(arguments,function(a,b){var c;while((c=n.inArray(b,h,c))>-1)h.splice(c,1),d&&(f>=c&&f--,g>=c&&g--)}),this},has:function(a){return a?n.inArray(a,h)>-1:!(!h||!h.length)},empty:function(){return h=[],f=0,this},disable:function(){return h=i=b=void 0,this},disabled:function(){return!h},lock:function(){return i=void 0,b||k.disable(),this},locked:function(){return!i},fireWith:function(a,b){return!h||c&&!i||(b=b||[],b=[a,b.slice?b.slice():b],d?i.push(b):j(b)),this},fire:function(){return k.fireWith(this,arguments),this},fired:function(){return!!c}};return k},n.extend({Deferred:function(a){var b=[["resolve","done",n.Callbacks("once memory"),"resolved"],["reject","fail",n.Callbacks("once memory"),"rejected"],["notify","progress",n.Callbacks("memory")]],c="pending",d={state:function(){return c},always:function(){return e.done(arguments).fail(arguments),this},then:function(){var a=arguments;return n.Deferred(function(c){n.each(b,function(b,f){var g=n.isFunction(a[b])&&a[b];e[f[1]](function(){var a=g&&g.apply(this,arguments);a&&n.isFunction(a.promise)?a.promise().done(c.resolve).fail(c.reject).progress(c.notify):c[f[0]+"With"](this===d?c.promise():this,g?[a]:arguments)})}),a=null}).promise()},promise:function(a){return null!=a?n.extend(a,d):d}},e={};return d.pipe=d.then,n.each(b,function(a,f){var g=f[2],h=f[3];d[f[1]]=g.add,h&&g.add(function(){c=h},b[1^a][2].disable,b[2][2].lock),e[f[0]]=function(){return e[f[0]+"With"](this===e?d:this,arguments),this},e[f[0]+"With"]=g.fireWith}),d.promise(e),a&&a.call(e,e),e},when:function(a){var b=0,c=d.call(arguments),e=c.length,f=1!==e||a&&n.isFunction(a.promise)?e:0,g=1===f?a:n.Deferred(),h=function(a,b,c){return function(e){b[a]=this,c[a]=arguments.length>1?d.call(arguments):e,c===i?g.notifyWith(b,c):--f||g.resolveWith(b,c)}},i,j,k;if(e>1)for(i=new Array(e),j=new Array(e),k=new Array(e);e>b;b++)c[b]&&n.isFunction(c[b].promise)?c[b].promise().done(h(b,k,c)).fail(g.reject).progress(h(b,j,i)):--f;return f||g.resolveWith(k,c),g.promise()}});var H;n.fn.ready=function(a){return n.ready.promise().done(a),this},n.extend({isReady:!1,readyWait:1,holdReady:function(a){a?n.readyWait++:n.ready(!0)},ready:function(a){(a===!0?--n.readyWait:n.isReady)||(n.isReady=!0,a!==!0&&--n.readyWait>0||(H.resolveWith(l,[n]),n.fn.triggerHandler&&(n(l).triggerHandler("ready"),n(l).off("ready"))))}});function I(){l.removeEventListener("DOMContentLoaded",I,!1),a.removeEventListener("load",I,!1),n.ready()}n.ready.promise=function(b){return H||(H=n.Deferred(),"complete"===l.readyState?setTimeout(n.ready):(l.addEventListener("DOMContentLoaded",I,!1),a.addEventListener("load",I,!1))),H.promise(b)},n.ready.promise();var J=n.access=function(a,b,c,d,e,f,g){var h=0,i=a.length,j=null==c;if("object"===n.type(c)){e=!0;for(h in c)n.access(a,b,h,c[h],!0,f,g)}else if(void 0!==d&&(e=!0,n.isFunction(d)||(g=!0),j&&(g?(b.call(a,d),b=null):(j=b,b=function(a,b,c){return j.call(n(a),c)})),b))for(;i>h;h++)b(a[h],c,g?d:d.call(a[h],h,b(a[h],c)));return e?a:j?b.call(a):i?b(a[0],c):f};n.acceptData=function(a){return 1===a.nodeType||9===a.nodeType||!+a.nodeType};function K(){Object.defineProperty(this.cache={},0,{get:function(){return{}}}),this.expando=n.expando+K.uid++}K.uid=1,K.accepts=n.acceptData,K.prototype={key:function(a){if(!K.accepts(a))return 0;var b={},c=a[this.expando];if(!c){c=K.uid++;try{b[this.expando]={value:c},Object.defineProperties(a,b)}catch(d){b[this.expando]=c,n.extend(a,b)}}return this.cache[c]||(this.cache[c]={}),c},set:function(a,b,c){var d,e=this.key(a),f=this.cache[e];if("string"==typeof b)f[b]=c;else if(n.isEmptyObject(f))n.extend(this.cache[e],b);else for(d in b)f[d]=b[d];return f},get:function(a,b){var c=this.cache[this.key(a)];return void 0===b?c:c[b]},access:function(a,b,c){var d;return void 0===b||b&&"string"==typeof b&&void 0===c?(d=this.get(a,b),void 0!==d?d:this.get(a,n.camelCase(b))):(this.set(a,b,c),void 0!==c?c:b)},remove:function(a,b){var c,d,e,f=this.key(a),g=this.cache[f];if(void 0===b)this.cache[f]={};else{n.isArray(b)?d=b.concat(b.map(n.camelCase)):(e=n.camelCase(b),b in g?d=[b,e]:(d=e,d=d in g?[d]:d.match(E)||[])),c=d.length;while(c--)delete g[d[c]]}},hasData:function(a){return!n.isEmptyObject(this.cache[a[this.expando]]||{})},discard:function(a){a[this.expando]&&delete this.cache[a[this.expando]]}};var L=new K,M=new K,N=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,O=/([A-Z])/g;function P(a,b,c){var d;if(void 0===c&&1===a.nodeType)if(d="data-"+b.replace(O,"-$1").toLowerCase(),c=a.getAttribute(d),"string"==typeof c){try{c="true"===c?!0:"false"===c?!1:"null"===c?null:+c+""===c?+c:N.test(c)?n.parseJSON(c):c}catch(e){}M.set(a,b,c)}else c=void 0;return c}n.extend({hasData:function(a){return M.hasData(a)||L.hasData(a)},data:function(a,b,c){ +return M.access(a,b,c)},removeData:function(a,b){M.remove(a,b)},_data:function(a,b,c){return L.access(a,b,c)},_removeData:function(a,b){L.remove(a,b)}}),n.fn.extend({data:function(a,b){var c,d,e,f=this[0],g=f&&f.attributes;if(void 0===a){if(this.length&&(e=M.get(f),1===f.nodeType&&!L.get(f,"hasDataAttrs"))){c=g.length;while(c--)g[c]&&(d=g[c].name,0===d.indexOf("data-")&&(d=n.camelCase(d.slice(5)),P(f,d,e[d])));L.set(f,"hasDataAttrs",!0)}return e}return"object"==typeof a?this.each(function(){M.set(this,a)}):J(this,function(b){var c,d=n.camelCase(a);if(f&&void 0===b){if(c=M.get(f,a),void 0!==c)return c;if(c=M.get(f,d),void 0!==c)return c;if(c=P(f,d,void 0),void 0!==c)return c}else this.each(function(){var c=M.get(this,d);M.set(this,d,b),-1!==a.indexOf("-")&&void 0!==c&&M.set(this,a,b)})},null,b,arguments.length>1,null,!0)},removeData:function(a){return this.each(function(){M.remove(this,a)})}}),n.extend({queue:function(a,b,c){var d;return a?(b=(b||"fx")+"queue",d=L.get(a,b),c&&(!d||n.isArray(c)?d=L.access(a,b,n.makeArray(c)):d.push(c)),d||[]):void 0},dequeue:function(a,b){b=b||"fx";var c=n.queue(a,b),d=c.length,e=c.shift(),f=n._queueHooks(a,b),g=function(){n.dequeue(a,b)};"inprogress"===e&&(e=c.shift(),d--),e&&("fx"===b&&c.unshift("inprogress"),delete f.stop,e.call(a,g,f)),!d&&f&&f.empty.fire()},_queueHooks:function(a,b){var c=b+"queueHooks";return L.get(a,c)||L.access(a,c,{empty:n.Callbacks("once memory").add(function(){L.remove(a,[b+"queue",c])})})}}),n.fn.extend({queue:function(a,b){var c=2;return"string"!=typeof a&&(b=a,a="fx",c--),arguments.lengthx",k.noCloneChecked=!!b.cloneNode(!0).lastChild.defaultValue}();var U="undefined";k.focusinBubbles="onfocusin"in a;var V=/^key/,W=/^(?:mouse|pointer|contextmenu)|click/,X=/^(?:focusinfocus|focusoutblur)$/,Y=/^([^.]*)(?:\.(.+)|)$/;function Z(){return!0}function $(){return!1}function _(){try{return l.activeElement}catch(a){}}n.event={global:{},add:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=L.get(a);if(r){c.handler&&(f=c,c=f.handler,e=f.selector),c.guid||(c.guid=n.guid++),(i=r.events)||(i=r.events={}),(g=r.handle)||(g=r.handle=function(b){return typeof n!==U&&n.event.triggered!==b.type?n.event.dispatch.apply(a,arguments):void 0}),b=(b||"").match(E)||[""],j=b.length;while(j--)h=Y.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o&&(l=n.event.special[o]||{},o=(e?l.delegateType:l.bindType)||o,l=n.event.special[o]||{},k=n.extend({type:o,origType:q,data:d,handler:c,guid:c.guid,selector:e,needsContext:e&&n.expr.match.needsContext.test(e),namespace:p.join(".")},f),(m=i[o])||(m=i[o]=[],m.delegateCount=0,l.setup&&l.setup.call(a,d,p,g)!==!1||a.addEventListener&&a.addEventListener(o,g,!1)),l.add&&(l.add.call(a,k),k.handler.guid||(k.handler.guid=c.guid)),e?m.splice(m.delegateCount++,0,k):m.push(k),n.event.global[o]=!0)}},remove:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=L.hasData(a)&&L.get(a);if(r&&(i=r.events)){b=(b||"").match(E)||[""],j=b.length;while(j--)if(h=Y.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o){l=n.event.special[o]||{},o=(d?l.delegateType:l.bindType)||o,m=i[o]||[],h=h[2]&&new RegExp("(^|\\.)"+p.join("\\.(?:.*\\.|)")+"(\\.|$)"),g=f=m.length;while(f--)k=m[f],!e&&q!==k.origType||c&&c.guid!==k.guid||h&&!h.test(k.namespace)||d&&d!==k.selector&&("**"!==d||!k.selector)||(m.splice(f,1),k.selector&&m.delegateCount--,l.remove&&l.remove.call(a,k));g&&!m.length&&(l.teardown&&l.teardown.call(a,p,r.handle)!==!1||n.removeEvent(a,o,r.handle),delete i[o])}else for(o in i)n.event.remove(a,o+b[j],c,d,!0);n.isEmptyObject(i)&&(delete r.handle,L.remove(a,"events"))}},trigger:function(b,c,d,e){var f,g,h,i,k,m,o,p=[d||l],q=j.call(b,"type")?b.type:b,r=j.call(b,"namespace")?b.namespace.split("."):[];if(g=h=d=d||l,3!==d.nodeType&&8!==d.nodeType&&!X.test(q+n.event.triggered)&&(q.indexOf(".")>=0&&(r=q.split("."),q=r.shift(),r.sort()),k=q.indexOf(":")<0&&"on"+q,b=b[n.expando]?b:new n.Event(q,"object"==typeof b&&b),b.isTrigger=e?2:3,b.namespace=r.join("."),b.namespace_re=b.namespace?new RegExp("(^|\\.)"+r.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,b.result=void 0,b.target||(b.target=d),c=null==c?[b]:n.makeArray(c,[b]),o=n.event.special[q]||{},e||!o.trigger||o.trigger.apply(d,c)!==!1)){if(!e&&!o.noBubble&&!n.isWindow(d)){for(i=o.delegateType||q,X.test(i+q)||(g=g.parentNode);g;g=g.parentNode)p.push(g),h=g;h===(d.ownerDocument||l)&&p.push(h.defaultView||h.parentWindow||a)}f=0;while((g=p[f++])&&!b.isPropagationStopped())b.type=f>1?i:o.bindType||q,m=(L.get(g,"events")||{})[b.type]&&L.get(g,"handle"),m&&m.apply(g,c),m=k&&g[k],m&&m.apply&&n.acceptData(g)&&(b.result=m.apply(g,c),b.result===!1&&b.preventDefault());return b.type=q,e||b.isDefaultPrevented()||o._default&&o._default.apply(p.pop(),c)!==!1||!n.acceptData(d)||k&&n.isFunction(d[q])&&!n.isWindow(d)&&(h=d[k],h&&(d[k]=null),n.event.triggered=q,d[q](),n.event.triggered=void 0,h&&(d[k]=h)),b.result}},dispatch:function(a){a=n.event.fix(a);var b,c,e,f,g,h=[],i=d.call(arguments),j=(L.get(this,"events")||{})[a.type]||[],k=n.event.special[a.type]||{};if(i[0]=a,a.delegateTarget=this,!k.preDispatch||k.preDispatch.call(this,a)!==!1){h=n.event.handlers.call(this,a,j),b=0;while((f=h[b++])&&!a.isPropagationStopped()){a.currentTarget=f.elem,c=0;while((g=f.handlers[c++])&&!a.isImmediatePropagationStopped())(!a.namespace_re||a.namespace_re.test(g.namespace))&&(a.handleObj=g,a.data=g.data,e=((n.event.special[g.origType]||{}).handle||g.handler).apply(f.elem,i),void 0!==e&&(a.result=e)===!1&&(a.preventDefault(),a.stopPropagation()))}return k.postDispatch&&k.postDispatch.call(this,a),a.result}},handlers:function(a,b){var c,d,e,f,g=[],h=b.delegateCount,i=a.target;if(h&&i.nodeType&&(!a.button||"click"!==a.type))for(;i!==this;i=i.parentNode||this)if(i.disabled!==!0||"click"!==a.type){for(d=[],c=0;h>c;c++)f=b[c],e=f.selector+" ",void 0===d[e]&&(d[e]=f.needsContext?n(e,this).index(i)>=0:n.find(e,this,null,[i]).length),d[e]&&d.push(f);d.length&&g.push({elem:i,handlers:d})}return h]*)\/>/gi,ba=/<([\w:]+)/,ca=/<|&#?\w+;/,da=/<(?:script|style|link)/i,ea=/checked\s*(?:[^=]|=\s*.checked.)/i,fa=/^$|\/(?:java|ecma)script/i,ga=/^true\/(.*)/,ha=/^\s*\s*$/g,ia={option:[1,""],thead:[1,"","
    "],col:[2,"","
    "],tr:[2,"","
    "],td:[3,"","
    "],_default:[0,"",""]};ia.optgroup=ia.option,ia.tbody=ia.tfoot=ia.colgroup=ia.caption=ia.thead,ia.th=ia.td;function ja(a,b){return n.nodeName(a,"table")&&n.nodeName(11!==b.nodeType?b:b.firstChild,"tr")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function ka(a){return a.type=(null!==a.getAttribute("type"))+"/"+a.type,a}function la(a){var b=ga.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function ma(a,b){for(var c=0,d=a.length;d>c;c++)L.set(a[c],"globalEval",!b||L.get(b[c],"globalEval"))}function na(a,b){var c,d,e,f,g,h,i,j;if(1===b.nodeType){if(L.hasData(a)&&(f=L.access(a),g=L.set(b,f),j=f.events)){delete g.handle,g.events={};for(e in j)for(c=0,d=j[e].length;d>c;c++)n.event.add(b,e,j[e][c])}M.hasData(a)&&(h=M.access(a),i=n.extend({},h),M.set(b,i))}}function oa(a,b){var c=a.getElementsByTagName?a.getElementsByTagName(b||"*"):a.querySelectorAll?a.querySelectorAll(b||"*"):[];return void 0===b||b&&n.nodeName(a,b)?n.merge([a],c):c}function pa(a,b){var c=b.nodeName.toLowerCase();"input"===c&&T.test(a.type)?b.checked=a.checked:("input"===c||"textarea"===c)&&(b.defaultValue=a.defaultValue)}n.extend({clone:function(a,b,c){var d,e,f,g,h=a.cloneNode(!0),i=n.contains(a.ownerDocument,a);if(!(k.noCloneChecked||1!==a.nodeType&&11!==a.nodeType||n.isXMLDoc(a)))for(g=oa(h),f=oa(a),d=0,e=f.length;e>d;d++)pa(f[d],g[d]);if(b)if(c)for(f=f||oa(a),g=g||oa(h),d=0,e=f.length;e>d;d++)na(f[d],g[d]);else na(a,h);return g=oa(h,"script"),g.length>0&&ma(g,!i&&oa(a,"script")),h},buildFragment:function(a,b,c,d){for(var e,f,g,h,i,j,k=b.createDocumentFragment(),l=[],m=0,o=a.length;o>m;m++)if(e=a[m],e||0===e)if("object"===n.type(e))n.merge(l,e.nodeType?[e]:e);else if(ca.test(e)){f=f||k.appendChild(b.createElement("div")),g=(ba.exec(e)||["",""])[1].toLowerCase(),h=ia[g]||ia._default,f.innerHTML=h[1]+e.replace(aa,"<$1>")+h[2],j=h[0];while(j--)f=f.lastChild;n.merge(l,f.childNodes),f=k.firstChild,f.textContent=""}else l.push(b.createTextNode(e));k.textContent="",m=0;while(e=l[m++])if((!d||-1===n.inArray(e,d))&&(i=n.contains(e.ownerDocument,e),f=oa(k.appendChild(e),"script"),i&&ma(f),c)){j=0;while(e=f[j++])fa.test(e.type||"")&&c.push(e)}return k},cleanData:function(a){for(var b,c,d,e,f=n.event.special,g=0;void 0!==(c=a[g]);g++){if(n.acceptData(c)&&(e=c[L.expando],e&&(b=L.cache[e]))){if(b.events)for(d in b.events)f[d]?n.event.remove(c,d):n.removeEvent(c,d,b.handle);L.cache[e]&&delete L.cache[e]}delete M.cache[c[M.expando]]}}}),n.fn.extend({text:function(a){return J(this,function(a){return void 0===a?n.text(this):this.empty().each(function(){(1===this.nodeType||11===this.nodeType||9===this.nodeType)&&(this.textContent=a)})},null,a,arguments.length)},append:function(){return this.domManip(arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=ja(this,a);b.appendChild(a)}})},prepend:function(){return this.domManip(arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=ja(this,a);b.insertBefore(a,b.firstChild)}})},before:function(){return this.domManip(arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this)})},after:function(){return this.domManip(arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this.nextSibling)})},remove:function(a,b){for(var c,d=a?n.filter(a,this):this,e=0;null!=(c=d[e]);e++)b||1!==c.nodeType||n.cleanData(oa(c)),c.parentNode&&(b&&n.contains(c.ownerDocument,c)&&ma(oa(c,"script")),c.parentNode.removeChild(c));return this},empty:function(){for(var a,b=0;null!=(a=this[b]);b++)1===a.nodeType&&(n.cleanData(oa(a,!1)),a.textContent="");return this},clone:function(a,b){return a=null==a?!1:a,b=null==b?a:b,this.map(function(){return n.clone(this,a,b)})},html:function(a){return J(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a&&1===b.nodeType)return b.innerHTML;if("string"==typeof a&&!da.test(a)&&!ia[(ba.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(aa,"<$1>");try{for(;d>c;c++)b=this[c]||{},1===b.nodeType&&(n.cleanData(oa(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)},replaceWith:function(){var a=arguments[0];return this.domManip(arguments,function(b){a=this.parentNode,n.cleanData(oa(this)),a&&a.replaceChild(b,this)}),a&&(a.length||a.nodeType)?this:this.remove()},detach:function(a){return this.remove(a,!0)},domManip:function(a,b){a=e.apply([],a);var c,d,f,g,h,i,j=0,l=this.length,m=this,o=l-1,p=a[0],q=n.isFunction(p);if(q||l>1&&"string"==typeof p&&!k.checkClone&&ea.test(p))return this.each(function(c){var d=m.eq(c);q&&(a[0]=p.call(this,c,d.html())),d.domManip(a,b)});if(l&&(c=n.buildFragment(a,this[0].ownerDocument,!1,this),d=c.firstChild,1===c.childNodes.length&&(c=d),d)){for(f=n.map(oa(c,"script"),ka),g=f.length;l>j;j++)h=c,j!==o&&(h=n.clone(h,!0,!0),g&&n.merge(f,oa(h,"script"))),b.call(this[j],h,j);if(g)for(i=f[f.length-1].ownerDocument,n.map(f,la),j=0;g>j;j++)h=f[j],fa.test(h.type||"")&&!L.access(h,"globalEval")&&n.contains(i,h)&&(h.src?n._evalUrl&&n._evalUrl(h.src):n.globalEval(h.textContent.replace(ha,"")))}return this}}),n.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){n.fn[a]=function(a){for(var c,d=[],e=n(a),g=e.length-1,h=0;g>=h;h++)c=h===g?this:this.clone(!0),n(e[h])[b](c),f.apply(d,c.get());return this.pushStack(d)}});var qa,ra={};function sa(b,c){var d,e=n(c.createElement(b)).appendTo(c.body),f=a.getDefaultComputedStyle&&(d=a.getDefaultComputedStyle(e[0]))?d.display:n.css(e[0],"display");return e.detach(),f}function ta(a){var b=l,c=ra[a];return c||(c=sa(a,b),"none"!==c&&c||(qa=(qa||n("