mirror of
https://github.com/tabler/tabler.git
synced 2026-07-26 04:54:40 +04:00
docs rewrite
This commit is contained in:
codecalm
@@ -3,7 +3,6 @@ source "https://rubygems.org"
|
||||
gem "jekyll", "4.1.1"
|
||||
|
||||
group :jekyll_plugins do
|
||||
gem 'jekyll-toc'
|
||||
gem "jekyll-random"
|
||||
gem "jekyll-tidy"
|
||||
gem "jekyll-timeago"
|
||||
|
||||
@@ -23,7 +23,6 @@ layout-dark: false
|
||||
|
||||
plugins:
|
||||
- jekyll-random
|
||||
- jekyll-toc
|
||||
- jekyll-tidy
|
||||
- jekyll-timeago
|
||||
- jekyll-redirect-from
|
||||
@@ -45,11 +44,6 @@ jekyll_tidy:
|
||||
compress_html: false
|
||||
ignore_env: development
|
||||
|
||||
toc:
|
||||
min_level: 2
|
||||
max_level: 3
|
||||
list_class: list-unstyled
|
||||
|
||||
collections:
|
||||
docs:
|
||||
output: true
|
||||
@@ -69,7 +63,6 @@ defaults:
|
||||
type: "docs"
|
||||
values:
|
||||
layout: docs
|
||||
toc: true
|
||||
|
||||
colors:
|
||||
blue:
|
||||
|
||||
@@ -0,0 +1,125 @@
|
||||
index:
|
||||
title: Getting started
|
||||
icon: brand-tabler
|
||||
children:
|
||||
index:
|
||||
title: Introduction
|
||||
icon: file
|
||||
url: docs/index.html
|
||||
|
||||
|
||||
components:
|
||||
title: Components
|
||||
icon: puzzle
|
||||
children:
|
||||
alerts:
|
||||
title: Alerts
|
||||
url: docs/alerts.html
|
||||
avatars:
|
||||
title: Avatars
|
||||
url: docs/avatars.html
|
||||
badges:
|
||||
title: Badges
|
||||
url: docs/badges.html
|
||||
breadcrumb:
|
||||
title: Breadcrumb
|
||||
url: docs/breadcrumb.html
|
||||
buttons:
|
||||
title: Buttons
|
||||
url: docs/buttons.html
|
||||
cards:
|
||||
title: Cards
|
||||
url: docs/cards.html
|
||||
carousel:
|
||||
title: Carousel
|
||||
url: docs/carousel.html
|
||||
colors:
|
||||
title: Colors
|
||||
url: docs/colors.html
|
||||
cursors:
|
||||
title: Cursors
|
||||
url: docs/cursors.html
|
||||
dropdowns:
|
||||
title: Dropdowns
|
||||
url: docs/dropdowns.html
|
||||
divider:
|
||||
title: Divider
|
||||
url: docs/divider.html
|
||||
empty:
|
||||
title: Empty states
|
||||
url: docs/empty.html
|
||||
form-elements:
|
||||
title: Form elements
|
||||
url: docs/form-elements.html
|
||||
form-helpers:
|
||||
title: Form helpers
|
||||
url: docs/form-helpers.html
|
||||
modals:
|
||||
title: Modals
|
||||
url: docs/modals.html
|
||||
progress:
|
||||
title: Progress
|
||||
url: docs/progress.html
|
||||
payments:
|
||||
title: Payments
|
||||
url: docs/payments.html
|
||||
range-slider:
|
||||
title: Range slider
|
||||
url: docs/range-slider.html
|
||||
ribbons:
|
||||
title: Ribbons
|
||||
url: docs/ribbons.html
|
||||
skeleton:
|
||||
title: Skeleton
|
||||
url: docs/skeleton.html
|
||||
spinners:
|
||||
title: Spinners
|
||||
url: docs/spinners.html
|
||||
steps:
|
||||
title: Steps
|
||||
url: docs/steps.html
|
||||
tables:
|
||||
title: Tables
|
||||
url: docs/tables.html
|
||||
tabs:
|
||||
title: Tabs
|
||||
url: docs/tabs.html
|
||||
timelines:
|
||||
title: Timelines
|
||||
url: docs/timelines.html
|
||||
toasts:
|
||||
title: Toasts
|
||||
url: docs/toasts.html
|
||||
tooltips:
|
||||
title: Tooltips
|
||||
url: docs/tooltips.html
|
||||
typography:
|
||||
title: Typography
|
||||
url: docs/typography.html
|
||||
utilities:
|
||||
title: Utilities
|
||||
icon: flame
|
||||
children:
|
||||
|
||||
plugins:
|
||||
title: Plugins
|
||||
icon: apps
|
||||
children:
|
||||
autosize:
|
||||
title: Autosize
|
||||
url: docs/autosize.html
|
||||
input-mask:
|
||||
title: Form input mask
|
||||
url: docs/input-mask.html
|
||||
flags:
|
||||
title: Flags
|
||||
url: docs/flags.html
|
||||
charts:
|
||||
title: Charts
|
||||
url: docs/charts.html
|
||||
|
||||
changelog:
|
||||
title: Changelog
|
||||
show-version: true
|
||||
icon: git-branch
|
||||
url: changelog.html
|
||||
+2
-105
@@ -183,113 +183,10 @@ layout:
|
||||
title: Fluid vertical
|
||||
|
||||
docs:
|
||||
title: Docs
|
||||
title: Documentation
|
||||
icon: file-text
|
||||
url: docs/index.html
|
||||
columns: 3
|
||||
children:
|
||||
index:
|
||||
title: Introduction
|
||||
url: docs/index.html
|
||||
alerts:
|
||||
title: Alerts
|
||||
url: docs/alerts.html
|
||||
autosize:
|
||||
title: Autosize
|
||||
url: docs/autosize.html
|
||||
avatars:
|
||||
title: Avatars
|
||||
url: docs/avatars.html
|
||||
badges:
|
||||
title: Badges
|
||||
url: docs/badges.html
|
||||
breadcrumb:
|
||||
title: Breadcrumb
|
||||
url: docs/breadcrumb.html
|
||||
buttons:
|
||||
title: Buttons
|
||||
url: docs/buttons.html
|
||||
cards:
|
||||
title: Cards
|
||||
url: docs/cards.html
|
||||
carousel:
|
||||
title: Carousel
|
||||
url: docs/carousel.html
|
||||
colors:
|
||||
title: Colors
|
||||
url: docs/colors.html
|
||||
# countup:
|
||||
# title: Countup
|
||||
# url: docs/countup.html
|
||||
cursors:
|
||||
title: Cursors
|
||||
url: docs/cursors.html
|
||||
charts:
|
||||
title: Charts
|
||||
url: docs/charts.html
|
||||
dropdowns:
|
||||
title: Dropdowns
|
||||
url: docs/dropdowns.html
|
||||
divider:
|
||||
title: Divider
|
||||
url: docs/divider.html
|
||||
empty:
|
||||
title: Empty states
|
||||
url: docs/empty.html
|
||||
flags:
|
||||
title: Flags
|
||||
url: docs/flags.html
|
||||
form-elements:
|
||||
title: Form elements
|
||||
url: docs/form-elements.html
|
||||
form-helpers:
|
||||
title: Form helpers
|
||||
url: docs/form-helpers.html
|
||||
input-mask:
|
||||
title: Form input mask
|
||||
url: docs/input-mask.html
|
||||
modals:
|
||||
title: Modals
|
||||
url: docs/modals.html
|
||||
progress:
|
||||
title: Progress
|
||||
url: docs/progress.html
|
||||
payments:
|
||||
title: Payments
|
||||
url: docs/payments.html
|
||||
range-slider:
|
||||
title: Range slider
|
||||
url: docs/range-slider.html
|
||||
ribbons:
|
||||
title: Ribbons
|
||||
url: docs/ribbons.html
|
||||
skeleton:
|
||||
title: Skeleton
|
||||
url: docs/skeleton.html
|
||||
spinners:
|
||||
title: Spinners
|
||||
url: docs/spinners.html
|
||||
steps:
|
||||
title: Steps
|
||||
url: docs/steps.html
|
||||
tables:
|
||||
title: Tables
|
||||
url: docs/tables.html
|
||||
tabs:
|
||||
title: Tabs
|
||||
url: docs/tabs.html
|
||||
timelines:
|
||||
title: Timelines
|
||||
url: docs/timelines.html
|
||||
toasts:
|
||||
title: Toasts
|
||||
url: docs/toasts.html
|
||||
tooltips:
|
||||
title: Tooltips
|
||||
url: docs/tooltips.html
|
||||
typography:
|
||||
title: Typography
|
||||
url: docs/typography.html
|
||||
|
||||
|
||||
|
||||
#changelog:
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Alerts
|
||||
menu: docs.alerts
|
||||
menu: docs.components.alerts
|
||||
description: Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app.
|
||||
bootstrap-link: components/alerts/
|
||||
---
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Autosize
|
||||
menu: docs.autosize
|
||||
menu: docs.plugins.autosize
|
||||
description: The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.
|
||||
libs: autosize
|
||||
---
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Avatars
|
||||
menu: docs.avatars
|
||||
menu: docs.components.avatars
|
||||
description: Avatars help customise various elements of a user interface and make the product experience more personalised. They are often used in communication apps, collaboration tools and social media.
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Badges
|
||||
menu: docs.badges
|
||||
menu: docs.components.badges
|
||||
description: Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info.
|
||||
bootstrap-link: components/badge/
|
||||
---
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Breadcrumb
|
||||
menu: docs.breadcrumb
|
||||
menu: docs.components.breadcrumb
|
||||
description: Breadcrumbs are used to show the current website or app location and reduce the number of actions users have to take. Thanks to breadcrumbs, they can easily navigate within the website hierarchy and better understand its structure.
|
||||
bootstrap-link: components/breadcrumb/
|
||||
---
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Buttons
|
||||
description: Use button styles that best suit your designs and encourage users to take the desired actions. You can customize the button's properties to improve the user experience of your website or system, changing the size, shape, color and many more.
|
||||
bootstrap-link: components/buttons/
|
||||
menu: docs.buttons
|
||||
menu: docs.components.buttons
|
||||
---
|
||||
|
||||
|
||||
@@ -86,6 +86,7 @@ Use the `.btn-ghost-*` class to make your button look simple yet aesthetically a
|
||||
Use the `.btn-square` class to remove the border radius, if you want the corners of your button to be square rather than rounded.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/button.html text="White" square=true %}
|
||||
{% for button in site.button-variants %}
|
||||
{% assign btn-color = button[1].class %}
|
||||
{% assign btn-title = button[1].title %}
|
||||
@@ -100,6 +101,7 @@ Use the `.btn-square` class to remove the border radius, if you want the corners
|
||||
Add the `.btn-pill` class to your button to make it rounded and give it a modern and attractive look.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/button.html text="White" pill=true %}
|
||||
{% for button in site.button-variants %}
|
||||
{% assign btn-color = button[1].class %}
|
||||
{% assign btn-title = button[1].title %}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Cards
|
||||
menu: docs.cards
|
||||
menu: docs.components.cards
|
||||
description: Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content.
|
||||
bootstrap-link: components/card/
|
||||
---
|
||||
@@ -28,7 +28,7 @@ Cards with the `.card-sm` class are well suited for small items such as snippets
|
||||
{% include cards/card.html class="card-md" body="This is some text within a card body." %}
|
||||
{% include cards/card.html class="card-lg" body="This is some text within a card body." %}
|
||||
{% endcapture %}
|
||||
{% include example.html code=code columns=2 %}
|
||||
{% include example.html code=code columns=2 wrapper="space-y" %}
|
||||
|
||||
|
||||
## Card with title
|
||||
@@ -39,7 +39,7 @@ Add a title to your card by including the `.card-title` class within `.card-body
|
||||
{% include cards/card.html title="Card title" body="This is some text within a card body." %}
|
||||
{% include cards/card.html header-title="Card title" body="This is some text within a card body." %}
|
||||
{% endcapture %}
|
||||
{% include example.html code=code columns=1 %}
|
||||
{% include example.html code=code columns=1 wrapper="space-y" %}
|
||||
|
||||
|
||||
## Card with title and image
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Carousel
|
||||
menu: docs.carousel
|
||||
menu: docs.components.carousel
|
||||
description: A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information.
|
||||
bootstrap-link: components/carousel/
|
||||
---
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Charts
|
||||
menu: docs.charts
|
||||
menu: docs.components.charts
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Colors
|
||||
menu: docs.colors
|
||||
menu: docs.components.colors
|
||||
description: The choice of colors for a website or app interface has an big influence on how users interact with the product and what decisions they make. Harmonic colors can contribute to a nice first impression and encourage users to engage with your product, so it's a very important aspect of a successful design, which needs to be well thought out.
|
||||
bootstrap-link: utilities/colors/
|
||||
---
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Countup
|
||||
description: A countup element is used to display numerical data in an interesting way and make the interface more interactive. All the available options can be found [here](https://inorganik.github.io/countUp.js/)
|
||||
menu: docs.countup
|
||||
menu: docs.components.countup
|
||||
libs: countup
|
||||
---
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Cursors
|
||||
description: You can use different cursors to reflect the intended user interaction with particular elements of an interface. The cursor will change when a user hovers over a given element to indicate the action which can be performed.
|
||||
menu: docs.cursors
|
||||
menu: docs.components.cursors
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Divider
|
||||
description: Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.
|
||||
bootstrap-link: components/dropdowns/#dividers
|
||||
menu: docs.components.divider
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Dropdowns
|
||||
description: Use dropdowns to display lists of options or include more positions in a menu without overwhelming users with too many buttons and long lists. Dropdowns facilitate users' interaction with your website or software and make your design look clear.
|
||||
bootstrap-link: components/dropdowns
|
||||
menu: docs.components.dropdowns
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Empty states
|
||||
description: Empty states or blank pages are commonly used as placeholders for first-use, empty data or error screens. Their aim is to engage users when there is no content to display and that is why their design is extremely important from the point of view of the user experience of your website or app.
|
||||
menu: docs.components.empty
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Flags
|
||||
menu: docs.flags
|
||||
menu: docs.components.flags
|
||||
description: Thanks to the Tabler flags plug-in, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more.
|
||||
plugin: flags
|
||||
libs: tabler-flags
|
||||
|
||||
@@ -3,6 +3,7 @@ title: Form elements
|
||||
description: Forms are one of the most important types of interaction with a website or app. Since their aim is to enable users to make a purchase, subscribe to a service or sign up to create an account, it's important to make sure they are easy to complete and help increase conversion rates. Use the available elements to create forms which are well-structured and user-friendly.
|
||||
bootstrap-link: components/forms/
|
||||
libs: nouislider
|
||||
menu: docs.components.form-elements
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Form helpers
|
||||
description: A form helper can be used to provide users with additional information about the elements of a form that may be unclear.
|
||||
menu: docs.components.form-helpers
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
---
|
||||
title: Introduction
|
||||
menu: docs.index
|
||||
menu: docs.index.index
|
||||
icon: flag
|
||||
order: -1
|
||||
redirect_from: docs.html
|
||||
---
|
||||
|
||||
|
||||
## What is Tabler?
|
||||
|
||||
Tabler is a UI kit that speeds up the development process and makes it easier than ever! Built on the latest version of Bootstrap, it helps you create templates based on fully customizable and ready-to-use UI components, which can be used by both simple websites and sophisticated systems. With basic knowledge of HTML and CSS, you’ll be able to create dashboards that are fully functional and beautifully designed!
|
||||
@@ -27,24 +26,19 @@ To use our build system and run our documentation locally, you'll need a copy of
|
||||
3. [Install Ruby](https://ruby-lang.org/en/documentation/installation/) - the recommended version is [2.5.5](https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz).
|
||||
4. [Install Bundler](https://bundler.io) with `gem install bundler` and, finally, run `bundle install`. It will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com).
|
||||
|
||||
**Windows users**:
|
||||
### Windows users
|
||||
1. [Install Git](https://git-scm.com/download/win) in `C:\Program Files\git\bin` directory and run `npm config set script-shell "C:\Program Files\git\bin\bash.exe"` to change the default shell.
|
||||
2. [Install Ruby+Devkit](https://rubyinstaller.org/downloads/) - recommended version is [2.5.5](https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.5.5-1/rubyinstaller-devkit-2.5.5-1-x86.exe).
|
||||
3. [Read guide](https://jekyllrb.com/docs/installation/windows/) to get Jekyll up and running without problems.
|
||||
|
||||
Once you've completed the setup, you'll be able to run the various commands provided from the command line.
|
||||
|
||||
|
||||
## Build Tabler locally
|
||||
|
||||
1. From the root `/tabler` directory, run `npm run start` in the command line.
|
||||
2. Open [http://localhost:4000](http://localhost:4000) in your browser, and voilà.
|
||||
3. Any change in `/pages` directory will build the application and refresh the page.
|
||||
|
||||
**Note**:
|
||||
Run `npm run build` for rerforms a one off build application without refresh.
|
||||
Open [http://localhost:3001](http://localhost:3001) to configure the Web server.
|
||||
|
||||
|
||||
## Bugs and feature requests
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Input mask
|
||||
description: An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors.
|
||||
menu: docs.plugins.input-mask
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Modals
|
||||
description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
|
||||
menu: docs.modals
|
||||
menu: docs.components.modals
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Payments
|
||||
menu: docs.payments
|
||||
menu: docs.components.payments
|
||||
description: The Tabler payments plug-in will let you use a set of payment provider icons to facilitate the payment process and make it more-user friendly.
|
||||
plugin: payments
|
||||
---
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Progress bars
|
||||
description: Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated.
|
||||
bootstrap-link: components/progress
|
||||
menu: docs.components.progress
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Range slider
|
||||
menu: docs.range-slider
|
||||
menu: docs.components.range-slider
|
||||
libs: nouislider
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Ribbons
|
||||
menu: docs.ribbons
|
||||
menu: docs.components.ribbons
|
||||
description: Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out.
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Skeleton
|
||||
menu: docs.skeleton
|
||||
menu: docs.components.skeleton
|
||||
description: Skeleton is used to reserve space for content that soon will appear in a layout.
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Spinners
|
||||
menu: docs.spinners
|
||||
menu: docs.components.spinners
|
||||
description: Spinners are used to show the loading state of a component or page. They provide feedback for an action a user has taken, when it takes a bit longer to complete.
|
||||
bootstrap-link: components/spinners/
|
||||
---
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Steps
|
||||
menu: docs.steps
|
||||
menu: docs.components.steps
|
||||
description: Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully.
|
||||
new: true
|
||||
---
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Tables
|
||||
menu: docs.tables
|
||||
menu: docs.components.tables
|
||||
description: Tables are a useful interface element that allows to visualise data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity.
|
||||
bootstrap-link: content/tables/
|
||||
---
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Tabs
|
||||
menu: docs.tabs
|
||||
menu: docs.components.tabs
|
||||
description: Tabs allow users to alternate between equally important views within the same context. By dividing content into meaningful sections, they improve its organization and make it easy for users to navigate.
|
||||
bootstrap-link: components/navs/
|
||||
---
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Timelines
|
||||
description: A timeline is a perfect way to visualize processes and projects, as it's easy to read and attractive for users. You can use it to give an overview of events, present an agenda or point out important points in time.
|
||||
menu: docs.timelines
|
||||
menu: docs.components.timelines
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Toasts
|
||||
menu: docs.toasts
|
||||
menu: docs.components.toasts
|
||||
description: Toasts are lightweight alert boxes which display for a few seconds after a user has taken an action, to inform them of the state or outcome. They can be used when a user clicks a button or submits a form and their aim is to provide feedback, rather than encourage to take action.
|
||||
bootstrap-link: components/toasts/
|
||||
---
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Tooltips
|
||||
menu: docs.tooltips
|
||||
menu: docs.components.tooltips
|
||||
description: Tooltips are text labels which appear when a user hovers over an interface element. They explain the interface elements that may be unclear for users and guide them when they need help. If used properly, tooltips can significantly enhance user experience and add value to your website or software.
|
||||
bootstrap-link: components/tooltips/
|
||||
---
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Typography
|
||||
menu: docs.typography
|
||||
menu: docs.components.typography
|
||||
description: Typography plays an important role in creating an attractive and clear interface design. Good typography will make the content easy to follow and improve the usability of your website.
|
||||
bootstrap-link: content/typography/
|
||||
---
|
||||
|
||||
@@ -11,11 +11,11 @@
|
||||
|
||||
<div class="text-muted">{{ article.description | truncate: truncate }}</div>
|
||||
|
||||
<div class="d-flex align-items-center pt-5 mt-auto">
|
||||
{% include ui/avatar.html person-id=avatar size="md" %}
|
||||
<div class="d-flex align-items-center pt-4 mt-auto">
|
||||
{% include ui/avatar.html person-id=avatar %}
|
||||
<div class="ml-3">
|
||||
<a href="{{ site.base }}/profile.html" class="text-body">{{ author.first_name }} {{ author.last_name }}</a>
|
||||
<small class="d-block text-muted">3 days ago</small>
|
||||
<div class="text-muted">3 days ago</div>
|
||||
</div>
|
||||
<div class="ml-auto">
|
||||
<a href="#" class="icon d-none d-md-inline-block ml-3 {% if liked %}text-red{% else %}text-muted{% endif %}">
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
{% assign current-menu = page.menu | split: '.' %}
|
||||
|
||||
<ul class="nav nav-pills nav-vertical">
|
||||
{% for doc in site.data.docs %}
|
||||
<li class="nav-item">
|
||||
{% assign key = doc[0] %}
|
||||
{% assign item = doc[1] %}
|
||||
|
||||
{% assign current-item = false %}
|
||||
{% if current-menu[1] == key %}
|
||||
{% assign current-item = true %}
|
||||
{% endif %}
|
||||
|
||||
<a href="{% if item.children %}#menu-{{ key }}{% else %}{{ site.base }}{{ item.url | relative_url }}{% endif %}" class="nav-link{% unless item.children %}{% if current-item %} active{% endif %}{% endunless %}"{% if item.children %} data-toggle="collapse" aria-expanded="{% if current-item %}true{% else %}false{% endif %}"{% endif %}>
|
||||
{% if item.icon %}
|
||||
<span class="nav-link-icon">{% include ui/icon.html icon=item.icon %}</span>
|
||||
{% endif %}
|
||||
|
||||
{{ item.title }}
|
||||
|
||||
{% if item.show-version %}
|
||||
<span class="badge bg-blue-lt ml-auto">{{ site.data.package.version }}</span>
|
||||
{% endif %}
|
||||
|
||||
{% if item.children %}
|
||||
<span class="nav-link-toggle"></span>
|
||||
{% endif %}
|
||||
</a>
|
||||
|
||||
{% if item.children %}
|
||||
<ul class="nav collapse{% if current-item %} show{% endif %}" id="menu-{{ key }}">
|
||||
{% for subdoc in item.children %}
|
||||
{% assign subkey = subdoc[0] %}
|
||||
{% assign subitem = subdoc[1] %}
|
||||
|
||||
{% assign current-subitem = false %}
|
||||
{% if current-menu[2] == subkey %}
|
||||
{% assign current-subitem = true %}
|
||||
{% endif %}
|
||||
|
||||
<li class="nav-item">
|
||||
<a href="{{ site.base }}{{ subitem.url | relative_url }}" class="nav-link{% if current-subitem %} active{% endif %}">
|
||||
{{ subitem.title }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
{% assign demo-code = code %}
|
||||
{% assign demo-code = demo-code | replace_regex: '\{% (end)?hide %\}', '' %}
|
||||
{% assign demo-code = demo-code | replace_regex: 'href="#"', 'href="javascript:void()"' %}
|
||||
|
||||
<div class="example no_toc_section{% if include.centered %} example-centered{% endif %}{% if include.columns %} example-bg{% endif %}">
|
||||
<div class="example-content">
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Checkboxes with description</label>
|
||||
|
||||
<label class="form-check form-check-highlight mb-2">
|
||||
<label class="form-check mb-2">
|
||||
<input class="form-check-input" type="checkbox">
|
||||
<div class="form-check-label">
|
||||
Default checkbox
|
||||
@@ -16,7 +16,7 @@
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
</div>
|
||||
</label>
|
||||
<label class="form-check form-check-highlight mb-2">
|
||||
<label class="form-check mb-2">
|
||||
<input class="form-check-input" type="checkbox">
|
||||
<div class="form-check-label">
|
||||
Longer checkbox item that wraps on to two separate lines
|
||||
@@ -25,7 +25,7 @@
|
||||
Ab alias aut, consequuntur cumque esse eveniet incidunt laborum minus molestiae.
|
||||
</div>
|
||||
</label>
|
||||
<label class="form-check form-check-highlight">
|
||||
<label class="form-check">
|
||||
<input class="form-check-input" type="checkbox">
|
||||
<div class="form-check-label">
|
||||
Default checkbox without description
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
All rights reserved.
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="{{ site.changelog-url }}" target="_blank" class="link-secondary">v{{ site.data.package.version }}</a>
|
||||
<a href="{{ site.base }}/changelog.html" class="link-secondary">v{{ site.data.package.version }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<span class="form-selectgroup-check"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="payment payment-provider-{{ item }} payment-sm mr-2"></span>
|
||||
<span class="payment payment-provider-{{ item }} payment-xs mr-2"></span>
|
||||
|
||||
{% if forloop.index < 3 %}
|
||||
ending in <strong>{{ forloop.index | random_number: 1000, 9999 }}</strong>
|
||||
|
||||
@@ -13,5 +13,5 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if include.close %}<a href="#" class="btn-close" data-dismiss="alert" aria-label="close">×</a>{% endif %}
|
||||
{% if include.close %}<a href="#" class="btn-close" data-dismiss="alert" aria-label="close"></a>{% endif %}
|
||||
</div>
|
||||
|
||||
@@ -7,47 +7,17 @@ page-header: Documentation
|
||||
|
||||
{% assign current-url = page.url | replace_regex: "^/", "" %}
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
|
||||
|
||||
{% assign toc = content | toc_only %}
|
||||
|
||||
|
||||
<div class="sticky-top lh-lg py-4">
|
||||
{% include ui/button.html href=site.github-url text="Browse source code" icon="brand/github" color="white" external=true block=true class="mb-6" %}
|
||||
|
||||
{% if toc != '' %}
|
||||
<h5 class="subheader">On this page</h5>
|
||||
{{ toc }}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{% comment %}
|
||||
<div class="list-group list-group-transparent mb-0">
|
||||
{% for doc in site.data.menu.docs.children %}
|
||||
{% assign key = doc[0] %}
|
||||
<a href="{{ site.base }}{{ doc[1].url | relative_url }}" class="list-group-item list-group-item-action{% if current-url == doc[1].url %} active{% endif %}">
|
||||
|
||||
{% if jekyll.environment == 'development' %}
|
||||
{% assign doc-page = site.docs | where: "slug", key | first %}
|
||||
{% if doc-page.done %}{% include ui/icon.html icon="check" color="green" class="mr-2" %}{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{{ doc[1].title }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endcomment %}
|
||||
<div class="row g-4">
|
||||
<div class="d-none d-lg-block col-lg-3">
|
||||
{% include docs/menu.html %}
|
||||
</div>
|
||||
<div class="col-lg-9">
|
||||
<div class="card card-lg">
|
||||
<div class="card-body">
|
||||
|
||||
<div class="markdown">
|
||||
<div class="d-flex">
|
||||
<h1 class="h2 mt-0 mb-3">{{ page.title }}</h1>
|
||||
<div class="mb-5">
|
||||
<div class="d-flex mb-3">
|
||||
<h1 class="mt-0">{{ page.title }}</h1>
|
||||
|
||||
{% if page.bootstrap-link %}
|
||||
<p class="ml-auto">
|
||||
@@ -68,8 +38,9 @@ page-header: Documentation
|
||||
{% if page.description %}
|
||||
<p>{{ page.description }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{{ content | toc_generate }}
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -10,12 +10,4 @@ layout: default
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if page.toc %}
|
||||
<div class="d-none d-xl-block col-xl-3">
|
||||
<div class="sticky-top py-4">
|
||||
<h5 class="subheader">On this page</h5>
|
||||
{{ content | toc_only }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -1,18 +1,15 @@
|
||||
---
|
||||
title: Changelog
|
||||
page-header: Changelog
|
||||
menu: changelog
|
||||
menu: docs.changelog
|
||||
layout: docs
|
||||
---
|
||||
<div class="card card-lg">
|
||||
<div class="card-body markdown">
|
||||
{% for page in site.changelog reversed %}
|
||||
<div class="mb-4">
|
||||
|
||||
{% for page in site.changelog reversed %}
|
||||
<div class="mb-4">
|
||||
<div class="mb-2">
|
||||
<span class="badge bg-blue-lt">{{ page.title }}</span> —
|
||||
<span class="text-muted">{{ page.date | date: '%B %d, %Y' }}</span>
|
||||
</div>
|
||||
<div>{{ page.content }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
redirect_to: ./docs/index.html
|
||||
layout: redirect
|
||||
title: Documentation
|
||||
---
|
||||
@@ -38,10 +38,10 @@ $line-height-base: (1.25rem/$font-size-base) !default;
|
||||
$line-height-sm: (1rem/$font-size-base) !default;
|
||||
$line-height-lg: (1.5rem/$font-size-base) !default;
|
||||
|
||||
$h1-font-size: (28rem / 16) !default;
|
||||
$h1-font-size: (24rem / 16) !default;
|
||||
$h1-line-height: (2rem/$h1-font-size) !default;
|
||||
|
||||
$h2-font-size: (20rem / 16) !default;
|
||||
$h2-font-size: (18rem / 16) !default;
|
||||
$h2-line-height: (1.75rem/$h2-font-size) !default;
|
||||
|
||||
$h3-font-size: (16rem / 16) !default;
|
||||
@@ -69,6 +69,7 @@ $blockquote-font-size: $font-size-base !default;
|
||||
$min-contrast-ratio: 1.5 !default;
|
||||
$text-muted-opacity: .66 !default;
|
||||
$text-muted-light-opacity: .4 !default;
|
||||
$text-muted-dark-opacity: .8 !default;
|
||||
|
||||
$border-opacity: .16 !default;
|
||||
$border-dark-opacity: .24 !default;
|
||||
@@ -117,6 +118,7 @@ $white: #ffffff !default;
|
||||
|
||||
$text-muted: mix($body-color, #fff, percentage($text-muted-opacity)) !default;
|
||||
$text-muted-light: mix($body-color, #fff, percentage($text-muted-light-opacity)) !default;
|
||||
$text-muted-dark: mix($body-color, #fff, percentage($text-muted-dark-opacity)) !default;
|
||||
|
||||
$border-color: mix($text-muted, #fff, percentage($border-opacity)) !default;
|
||||
$border-color-transparent: rgba($text-muted, $border-opacity) !default;
|
||||
@@ -368,9 +370,14 @@ $modal-md: 540px !default;
|
||||
$modal-sm: 380px !default;
|
||||
|
||||
//nav
|
||||
$nav-link-padding-y: .25rem !default;
|
||||
$nav-link-color: inherit !default;
|
||||
$nav-link-padding-y: .5rem !default;
|
||||
$nav-link-padding-x: .75rem !default;
|
||||
|
||||
$nav-pills-link-active-color: $primary !default;
|
||||
$nav-pills-link-active-bg: $active-bg !default;
|
||||
|
||||
|
||||
//navbar
|
||||
$navbar-height: 3.5rem !default;
|
||||
$navbar-padding-y: .25rem !default;
|
||||
@@ -481,7 +488,7 @@ $form-check-margin-bottom: .5rem !default;
|
||||
$form-check-input-width: 1rem !default;
|
||||
$form-check-padding-left: $form-check-input-width + .5rem !default;
|
||||
$form-check-input-bg: $white !default;
|
||||
$form-check-input-border: 1px solid $border-color-transparent !default;
|
||||
$form-check-input-border: 1px solid $border-color-dark-transparent !default;
|
||||
$form-check-input-border-radius: $border-radius !default;
|
||||
$form-check-input-checked-bg-size: 1rem !default;
|
||||
|
||||
@@ -491,7 +498,7 @@ $form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://w
|
||||
$form-check-input-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='#{$dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/></svg>") !default;
|
||||
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle r='3' fill='#{$form-check-input-checked-color}' cx='8' cy='8' /></svg>") !default;
|
||||
|
||||
$form-check-input-checked-border-color: $border-color-transparent !default;
|
||||
$form-check-input-checked-border-color: $border-color-dark-transparent !default;
|
||||
|
||||
$form-check-label-disabled-opacity: $text-muted-opacity;
|
||||
|
||||
|
||||
@@ -15,16 +15,6 @@ body.no-transitions * {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.toc-entry {
|
||||
&:before {
|
||||
content: '- '
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-demo {
|
||||
display: inline-block;
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
|
||||
.example-content {
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
@@ -31,6 +32,7 @@
|
||||
|
||||
.example-code {
|
||||
margin: 2rem 0;
|
||||
border: 1px solid $border-color;
|
||||
border-top: none;
|
||||
|
||||
pre {
|
||||
|
||||
@@ -12,17 +12,280 @@ pre.highlight,
|
||||
margin: 1.5rem 0;
|
||||
overflow: auto;
|
||||
font-size: $code-font-size;
|
||||
background: $dark;
|
||||
border-radius: $border-radius;
|
||||
color: #ffffff;
|
||||
@include scrollbar(true);
|
||||
@include scrollbar;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
.c, .c1 { color: $code-gray; }
|
||||
.na, .nx, .nl, .language-css & .na, .language-scss & .na { color: $code-yellow; }
|
||||
.s, .dl, .s1, .s2, .mh { color: $code-green; }
|
||||
.mi, .language-js .nb, .nc, .nd, .nt { color: $code-blue; }
|
||||
.language-html .nt, .nb { color: $code-red; }
|
||||
.k, .kd, .nv, .n { color: $code-purple; }
|
||||
margin: 0;
|
||||
|
||||
.dl {
|
||||
color: #4070a0
|
||||
}
|
||||
|
||||
.c {
|
||||
color: #727272
|
||||
}
|
||||
|
||||
.c1 {
|
||||
color: #727272
|
||||
}
|
||||
|
||||
.ch {
|
||||
font-style: italic;
|
||||
color: #60a0b0
|
||||
}
|
||||
|
||||
.cm {
|
||||
color: #727272
|
||||
}
|
||||
|
||||
.cp {
|
||||
color: #008085
|
||||
}
|
||||
|
||||
.cpf {
|
||||
color: #007020
|
||||
}
|
||||
|
||||
.cs {
|
||||
color: #727272
|
||||
}
|
||||
|
||||
.gd {
|
||||
background-color: #fcc;
|
||||
border: 1px solid #c00
|
||||
}
|
||||
|
||||
.ge {
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
.gh {
|
||||
color: #030
|
||||
}
|
||||
|
||||
.gi {
|
||||
background-color: #cfc;
|
||||
border: 1px solid #0c0
|
||||
}
|
||||
|
||||
.gl {
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
.go {
|
||||
color: #aaa
|
||||
}
|
||||
|
||||
.gp {
|
||||
color: #009
|
||||
}
|
||||
|
||||
.gr {
|
||||
color: #f00
|
||||
}
|
||||
|
||||
.gs {
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
.gt {
|
||||
color: #9c6
|
||||
}
|
||||
|
||||
.gu {
|
||||
color: #030
|
||||
}
|
||||
|
||||
.il {
|
||||
color: #c24f19
|
||||
}
|
||||
|
||||
.k {
|
||||
color: #069
|
||||
}
|
||||
|
||||
.kc {
|
||||
color: #069
|
||||
}
|
||||
|
||||
.kd {
|
||||
color: #069
|
||||
}
|
||||
|
||||
.kn {
|
||||
color: #069
|
||||
}
|
||||
|
||||
.kp {
|
||||
color: #069
|
||||
}
|
||||
|
||||
.kr {
|
||||
color: #069
|
||||
}
|
||||
|
||||
.kt {
|
||||
color: #078
|
||||
}
|
||||
|
||||
.m {
|
||||
color: #c24f19
|
||||
}
|
||||
|
||||
.mf {
|
||||
color: #c24f19
|
||||
}
|
||||
|
||||
.mb {
|
||||
color: #40a070
|
||||
}
|
||||
|
||||
.mh {
|
||||
color: #c24f19
|
||||
}
|
||||
|
||||
.mi {
|
||||
color: #c24f19
|
||||
}
|
||||
|
||||
.mo {
|
||||
color: #c24f19
|
||||
}
|
||||
|
||||
.na {
|
||||
color: #006ee0
|
||||
}
|
||||
|
||||
.nb {
|
||||
color: #366
|
||||
}
|
||||
|
||||
.nc {
|
||||
color: #168174
|
||||
}
|
||||
|
||||
.nd {
|
||||
color: #6b62de
|
||||
}
|
||||
|
||||
.ne {
|
||||
color: #c00
|
||||
}
|
||||
|
||||
.nf {
|
||||
color: #b715f4
|
||||
}
|
||||
|
||||
.ni {
|
||||
color: #727272
|
||||
}
|
||||
|
||||
.nl {
|
||||
color: #6b62de
|
||||
}
|
||||
|
||||
.nn {
|
||||
color: #007ca5
|
||||
}
|
||||
|
||||
.no {
|
||||
color: #360
|
||||
}
|
||||
|
||||
.nt {
|
||||
color: #2f6f9f
|
||||
}
|
||||
|
||||
.nv {
|
||||
color: #033
|
||||
}
|
||||
|
||||
.o {
|
||||
color: #555
|
||||
}
|
||||
|
||||
.ow {
|
||||
color: #000
|
||||
}
|
||||
|
||||
.s {
|
||||
color: #d73038
|
||||
}
|
||||
|
||||
.s1 {
|
||||
color: #c30
|
||||
}
|
||||
|
||||
.s2 {
|
||||
color: #c30
|
||||
}
|
||||
|
||||
.sa {
|
||||
color: #4070a0
|
||||
}
|
||||
|
||||
.sb {
|
||||
color: #c30
|
||||
}
|
||||
|
||||
.sc {
|
||||
color: #c30
|
||||
}
|
||||
|
||||
.sd {
|
||||
font-style: italic;
|
||||
color: #c30
|
||||
}
|
||||
|
||||
.se {
|
||||
color: #c30
|
||||
}
|
||||
|
||||
.sh {
|
||||
color: #c30
|
||||
}
|
||||
|
||||
.si {
|
||||
color: #a00
|
||||
}
|
||||
|
||||
.sr {
|
||||
color: #337e7e
|
||||
}
|
||||
|
||||
.ss {
|
||||
color: #fc3
|
||||
}
|
||||
|
||||
.sx {
|
||||
color: #c30
|
||||
}
|
||||
|
||||
.w {
|
||||
color: #bbb
|
||||
}
|
||||
|
||||
.language-bash::before,.language-sh::before {
|
||||
color: #009;
|
||||
content: "$ ";
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none
|
||||
}
|
||||
|
||||
.language-bash .m,.language-sh .m {
|
||||
color: inherit
|
||||
}
|
||||
|
||||
.language-powershell::before {
|
||||
color: #009;
|
||||
content: "PM> ";
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
align-items: center;
|
||||
background: $gray-500;
|
||||
overflow: hidden;
|
||||
vertical-align: text-bottom;
|
||||
user-select: none;
|
||||
padding: calc(.25rem - 1px) .25rem;
|
||||
height: 1.25rem;
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
&:hover {
|
||||
color: $body-color;
|
||||
border-color: $text-muted-light;
|
||||
background-color: $light;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@@ -130,7 +131,6 @@
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: -.5rem !important;
|
||||
margin-right: -.5rem;
|
||||
line-height: 1;
|
||||
|
||||
> * {
|
||||
margin: 0 .5rem .5rem 0;
|
||||
|
||||
@@ -15,8 +15,9 @@ Markdown
|
||||
|
||||
> {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: .25rem;
|
||||
margin-top: 3rem;
|
||||
margin-bottom: .5rem;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
+41
-11
@@ -1,4 +1,28 @@
|
||||
.nav {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-vertical {
|
||||
&,
|
||||
.nav {
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.nav {
|
||||
margin-inline-start: 1.25rem;
|
||||
border-left: 1px solid $border-color;
|
||||
padding-inline-start: .5rem;
|
||||
}
|
||||
|
||||
&.nav-pills {
|
||||
margin: 0 (-$nav-link-padding-x);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
margin: 0;
|
||||
|
||||
.icon {
|
||||
color: $text-muted;
|
||||
}
|
||||
@@ -39,28 +63,34 @@
|
||||
}
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
line-height: 1;
|
||||
margin-right: .25rem;
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: flex;
|
||||
transition: .3s color;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-link-toggle {
|
||||
margin-left: auto;
|
||||
padding: 0 .25rem;
|
||||
transition: .3s transform;
|
||||
@include caret();
|
||||
|
||||
&:after {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@at-root .nav-link[aria-expanded="true"] & {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin-inline-end: .5rem;
|
||||
opacity: $text-muted-opacity;
|
||||
|
||||
.icon {
|
||||
svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@@ -111,6 +111,7 @@ pre {
|
||||
tab-size: 3;
|
||||
border-radius: $border-radius;
|
||||
white-space: pre-wrap;
|
||||
background: mix($light, #fff, 50%);
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
|
||||
Reference in New Issue
Block a user