diff --git a/_config.yml b/_config.yml index dfab59a65..c5ce99454 100644 --- a/_config.yml +++ b/_config.yml @@ -47,7 +47,6 @@ markdown: kramdown highlighter: rouge kramdown: - input: GFM syntax_highlighter: rouge syntax_highlighter_opts: css_class: '' diff --git a/_docs/buttons.md b/_docs/buttons.md index 7282fa2dc..8daad28c1 100644 --- a/_docs/buttons.md +++ b/_docs/buttons.md @@ -1,14 +1,17 @@ --- title: Buttons +description: Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more. +toc: true --- -Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more. + +{:toc} ### Button tag The `.btn` classes are designed to be used with the ` @@ -18,7 +21,7 @@ The `.btn` classes are designed to be used with the ` {% endexample %} -{% example html %} +{% example html wrapper=btn-list %} {% endexample %} @@ -118,4 +121,40 @@ Icon only button. Add `.btn-icon` class to remove unnecessary padding from butto +{% endexample %} + +### Button dropdown + +Wrap the dropdown’s toggle (your button or link) and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Dropdowns can be triggered from `` or ` +
+ Dropdown link + Dropdown link +
+ + +
+ +
+ Dropdown link + Dropdown link +
+
+ +
+ +
+ Dropdown link + Dropdown link +
+
{% endexample %} \ No newline at end of file diff --git a/_docs/cards.md b/_docs/cards.md index cd926275a..58815b9f3 100644 --- a/_docs/cards.md +++ b/_docs/cards.md @@ -1,9 +1,8 @@ --- title: Cards +description: A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. --- -A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. - Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. ### Default card diff --git a/_docs/index.md b/_docs/index.md index 85d19412f..cbce9f6a3 100644 --- a/_docs/index.md +++ b/_docs/index.md @@ -1,36 +1,6 @@ --- title: Getting started +hide: true +redirect_to: buttons.html +layout: redirect --- - -We’ve created this admin panel for everyone who wants to create any templates based on our ready components. Our mission is to deliver a user-friendly, clear and easy administration panel, that can be used by both, simple websites and sophisticated systems. The only requirement is a basic HTML and CSS knowledge—as a reward, you'll be able to manage and visualize different types of data in the easiest possible way! - -After using many of different admin panels, no matter free or paid, we've noticed they all had a lot of defects—and the main one was resource intensity. -They were loading loads of useless components that you wouldn't ever use, so we've decided to choose a different way. The whole system is plugin-based, what means that you have a control over what is needed and what not. - -To make the system works fast and reliable, we've converted most of the components to CSS. Thanks to this, you don't have to load a lot of unnecessary libraries into your browser what really boosts the overall speed. - -In this documentation we're going to describe common use-cases for most of our components since we want to make our tool be accessible to everyone. - -If you miss any component, feel free to drop us a line at: [email]—we'll do our best to add it. - -### What’s included - -Within template you’ll find the following directories and files, grouping common resources and providing both compiled and minified distribution files, as well as raw source files. It's up to you how you're going to use them. - -``` -tabler.io/ - ├── assets/ - ├── docs/ - └── README.md -``` - - - -### Browser Support - -{{ site.title }} is build in Bootstrap, which supports the latest, stable releases of all major browsers and platforms. On Windows, we support Internet Explorer 10-11 / Microsoft Edge. - -### License - -tabler.io is released under MIT license. tabler.io is a free Bootstrap 4 admin template developed from [codecalm.net](http://codecalm.net). Feel free to download it, use it, share it, get creative with it. - diff --git a/_layouts/docs.html b/_layouts/docs.html index 5bfee54aa..d0f838658 100644 --- a/_layouts/docs.html +++ b/_layouts/docs.html @@ -12,7 +12,7 @@ title: Documentation
@@ -24,11 +24,15 @@ title: Documentation

{{ page.title }}

+ {% if page.description %} +

{{ page.description }}

+ {% endif %} + {% if page.toc %} {{ content | toc_only }} {% endif %} - {{ content }} + {{ content | toc_generate }}
diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css index 837336e70..d40830683 100644 --- a/assets/css/dashboard.css +++ b/assets/css/dashboard.css @@ -9549,10 +9549,29 @@ img { margin-top: 0; } +.text-wrap > :last-child { + margin-bottom: 0; +} + .text-wrap > h1, .text-wrap > h2, .text-wrap > h3, .text-wrap > h4, .text-wrap > h5, .text-wrap > h6 { margin-top: 1.5em; } +.section-nav { + background-color: #f8f9fa; + margin: 1rem 0; + padding: .5rem 1rem; + border: 1px solid rgba(0, 40, 100, 0.12); + border-radius: 3px; + list-style: none; +} + +.section-nav:before { + content: 'Table of contents:'; + display: block; + font-weight: 600; +} + @media print { .container { max-width: none; @@ -10381,6 +10400,8 @@ a.icon:hover { .btn-pill { border-radius: 10rem; + padding-left: 1.5em; + padding-right: 1.5em; } .btn-square { @@ -11369,7 +11390,8 @@ a.icon:hover { font-size: 0; } -.btn-list .btn { +.btn-list > .btn, +.btn-list > .dropdown { margin-right: .5rem; margin-bottom: .5rem; } diff --git a/assets/scss/dashboard/_button.scss b/assets/scss/dashboard/_button.scss index dcac9522b..e6b9912c4 100644 --- a/assets/scss/dashboard/_button.scss +++ b/assets/scss/dashboard/_button.scss @@ -24,6 +24,8 @@ .btn-pill { border-radius: 10rem; + padding-left: 1.5em; + padding-right: 1.5em; } .btn-square { @@ -71,7 +73,8 @@ margin-bottom: -.5rem; font-size: 0; - .btn { + >.btn, + >.dropdown { margin-right: .5rem; margin-bottom: .5rem; } diff --git a/assets/scss/dashboard/_type.scss b/assets/scss/dashboard/_type.scss index 11784bd7b..76fd27369 100644 --- a/assets/scss/dashboard/_type.scss +++ b/assets/scss/dashboard/_type.scss @@ -76,9 +76,28 @@ img { margin-top: 0; } + >:last-child { + margin-bottom: 0; + } + > { h1, h2, h3, h4, h5, h6 { margin-top: 1.5em; } } +} + +.section-nav { + background-color: $gray-100; + margin: 1rem 0; + padding: .5rem 1rem; + border: 1px solid $border-color; + border-radius: 3px; + list-style: none; + + &:before { + content: 'Table of contents:'; + display: block; + font-weight: 600; + } } \ No newline at end of file