mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
Merge remote-tracking branch 'origin/dev-v1' into dev-v1
# Conflicts: # pages/_includes/cards/blog-single.html
This commit is contained in:
mrszympek
21
_config.yml
21
_config.yml
@@ -97,7 +97,16 @@ colors:
|
||||
hex: '#354051'
|
||||
name: Dark
|
||||
|
||||
variants: [primary, secondary, success, info, warning, danger, dark]
|
||||
variants:
|
||||
- name: success
|
||||
icon: check
|
||||
- name: info
|
||||
icon: info
|
||||
- name: warning
|
||||
icon: alert-triangle
|
||||
- name: danger
|
||||
icon: x-octagon
|
||||
|
||||
socials: [facebook, twitter, google, youtube, vimeo, dribbble, github, instagram, pinterest, vk, rss, flickr, bitbucket]
|
||||
|
||||
months_short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
||||
@@ -105,9 +114,11 @@ months_long: ['January', 'Febuary', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'S
|
||||
|
||||
|
||||
docs-menu:
|
||||
- title: Getting started
|
||||
pages: [index]
|
||||
- title: Components
|
||||
pages: [avatars, badges, buttons, carousel, spinners, steps, toasts, tooltips, typography]
|
||||
intro:
|
||||
title: Getting started
|
||||
pages: [index]
|
||||
components:
|
||||
title: Components
|
||||
pages: [alerts, avatars, badges, buttons, cards, carousel, spinners, steps, tabs, toasts, tooltips, typography]
|
||||
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
"css-minify": "cleancss --level 1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/tabler.min.css dist/css/tabler.css",
|
||||
"css-copy": "cross-env-shell shx mkdir -p site/static/dist/ && cross-env-shell shx cp -r dist/css/ site/static/dist/",
|
||||
"css-lint": "stylelint \"scss/**/*.scss\" --cache --cache-location .cache/.stylelintcache",
|
||||
"css-main": "npm-run-all css-compile",
|
||||
"css-main": "npm-run-all css-compile css-prefix",
|
||||
"css-main-build": "npm-run-all css-lint css-compile css-prefix css-minify",
|
||||
"watch": "npm-run-all --parallel watch-*",
|
||||
"watch-css": "nodemon --watch scss/ --ext scss --exec \"npm run css-main\"",
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
---
|
||||
title: Page 400
|
||||
layout: error
|
||||
error: 400
|
||||
done: true
|
||||
---
|
||||
@@ -1,6 +0,0 @@
|
||||
---
|
||||
title: Page 401
|
||||
layout: error
|
||||
error: 401
|
||||
done: true
|
||||
---
|
||||
@@ -1,6 +0,0 @@
|
||||
---
|
||||
title: Page 403
|
||||
layout: error
|
||||
error: 403
|
||||
done: true
|
||||
---
|
||||
@@ -1,6 +0,0 @@
|
||||
---
|
||||
title: Page 500
|
||||
layout: error
|
||||
error: 500
|
||||
done: true
|
||||
---
|
||||
@@ -1,6 +0,0 @@
|
||||
---
|
||||
title: Page 503
|
||||
layout: error
|
||||
error: 503
|
||||
done: true
|
||||
---
|
||||
@@ -6,55 +6,7 @@ apps:
|
||||
docs:
|
||||
title: Documentation
|
||||
icon: file-text
|
||||
children:
|
||||
- title: Alerts
|
||||
url: '#'
|
||||
- title: Avatars
|
||||
url: '#'
|
||||
- title: Badges
|
||||
url: '#'
|
||||
- title: Breadcrumb
|
||||
url: '#'
|
||||
- title: Buttons
|
||||
url: '#'
|
||||
- title: Button group
|
||||
url: '#'
|
||||
- title: Cards
|
||||
url: '#'
|
||||
- title: Charts
|
||||
url: '#'
|
||||
- title: Dropdowns
|
||||
url: '#'
|
||||
- title: Forms
|
||||
url: '#'
|
||||
- title: Icons
|
||||
url: '#'
|
||||
- title: Lists
|
||||
url: '#'
|
||||
- title: Modal
|
||||
url: '#'
|
||||
- title: Navs
|
||||
url: '#'
|
||||
- title: Navbar
|
||||
url: '#'
|
||||
- title: Pagination
|
||||
url: '#'
|
||||
- title: Popovers
|
||||
url: '#'
|
||||
- title: Progress
|
||||
url: '#'
|
||||
- title: Spinners
|
||||
url: '#'
|
||||
- title: Tables
|
||||
url: '#'
|
||||
- title: Toasts
|
||||
url: '#'
|
||||
- title: Tooltips
|
||||
url: '#'
|
||||
- title: Typography
|
||||
url: '#'
|
||||
- title: Utilities
|
||||
url: '#'
|
||||
docs: components
|
||||
changelog:
|
||||
url: changelog.html
|
||||
active: true
|
||||
|
||||
53
pages/_docs/alerts.md
Normal file
53
pages/_docs/alerts.md
Normal file
@@ -0,0 +1,53 @@
|
||||
---
|
||||
title: Alerts
|
||||
---
|
||||
|
||||
Bootstrap provides an easy way to create predefined alert messages.
|
||||
|
||||
## Default markup
|
||||
|
||||
{% example html %}
|
||||
{% for variant in site.variants %}
|
||||
{% capture variant-text %}
|
||||
This is a {{ variant.name }} alert — check it out!
|
||||
{% endcapture %}
|
||||
{% include ui/alert.html type=variant.name text=variant-text %}
|
||||
{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
|
||||
## Alert Links
|
||||
|
||||
Add the `alert-link` class to any links inside the alert box to create "matching colored links":
|
||||
|
||||
{% example html %}
|
||||
{% for variant in site.variants %}
|
||||
{% capture variant-text %}
|
||||
This is a {{ variant.name }} alert — <a href="#">check it out!</a>
|
||||
{% endcapture %}
|
||||
{% include ui/alert.html type=variant.name text=variant-text %}
|
||||
{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
|
||||
## Closing Alerts
|
||||
|
||||
{% example html %}
|
||||
{% for variant in site.variants %}
|
||||
{% capture variant-text %}
|
||||
This is a {{ variant.name }} alert — check it out!
|
||||
{% endcapture %}
|
||||
{% include ui/alert.html type=variant.name text=variant-text close=true %}
|
||||
{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
## Alerts with icons
|
||||
|
||||
{% example html %}
|
||||
{% for variant in site.variants %}
|
||||
{% capture variant-text %}
|
||||
This is a {{ variant.name }} alert — check it out!
|
||||
{% endcapture %}
|
||||
{% include ui/alert.html type=variant.name icon=variant.icon text=variant-text close=true %}
|
||||
{% endfor %}
|
||||
{% endexample %}
|
||||
@@ -4,7 +4,7 @@ title: Avatars
|
||||
|
||||
Create and group avatars of various shapes and sizes with one component.
|
||||
|
||||
### Default markup
|
||||
## Default markup
|
||||
|
||||
{% example html wrapper=avatar-list %}
|
||||
{% include ui/avatar.html person-id=1 %}
|
||||
@@ -12,7 +12,7 @@ Create and group avatars of various shapes and sizes with one component.
|
||||
{% include ui/avatar.html person-id=3 %}
|
||||
{% endexample %}
|
||||
|
||||
### Avatar size
|
||||
## Avatar size
|
||||
|
||||
Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed.
|
||||
|
||||
@@ -24,7 +24,7 @@ Using Bootstrap’s typical naming structure, you can create a standard avatar,
|
||||
{% include ui/avatar.html person-id=6 size="sm" %}
|
||||
{% endexample %}
|
||||
|
||||
### Avatar status
|
||||
## Avatar status
|
||||
|
||||
Add an online or offline status indicator to show user's availability.
|
||||
|
||||
@@ -37,7 +37,7 @@ Add an online or offline status indicator to show user's availability.
|
||||
{% include ui/avatar.html person-id=16 status="gray" %}
|
||||
{% endexample %}
|
||||
|
||||
### Avatar shape
|
||||
## Avatar shape
|
||||
|
||||
Change the shape of an avatar with the default Bootstrap image classes.
|
||||
|
||||
@@ -49,7 +49,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
|
||||
{% include ui/avatar.html person-id=21 shape="rounded-lg" %}
|
||||
{% endexample %}
|
||||
|
||||
### Initials
|
||||
## Initials
|
||||
|
||||
{% example html wrapper=avatar-list %}
|
||||
{% include ui/avatar.html placeholder="AB" size="xl" %}
|
||||
@@ -60,7 +60,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
|
||||
{% endexample %}
|
||||
|
||||
|
||||
### Avatar initials color
|
||||
## Avatar initials color
|
||||
|
||||
[See more]({% docs_url colors %})
|
||||
|
||||
@@ -72,7 +72,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
|
||||
{% include ui/avatar.html placeholder="IJ" color="purple" %}
|
||||
{% endexample %}
|
||||
|
||||
### Avatar initials icons
|
||||
## Avatar initials icons
|
||||
|
||||
{% example html wrapper=avatar-list %}
|
||||
{% include ui/avatar.html icon="user" %}
|
||||
@@ -80,7 +80,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
|
||||
{% include ui/avatar.html icon="user-plus" %}
|
||||
{% endexample %}
|
||||
|
||||
### Avatars list
|
||||
## Avatars list
|
||||
|
||||
{% example html %}
|
||||
<div class="avatar-list">
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Badges
|
||||
|
||||
A small count and labeling component. Please read the [official Bootstrap documentation](https://getbootstrap.com/docs/4.3/components/badge/) for a full list of options.
|
||||
|
||||
### Default markup
|
||||
## Default markup
|
||||
|
||||
{% example html %}
|
||||
{% for color in site.colors %}
|
||||
@@ -12,7 +12,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
|
||||
{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
### Pill badges
|
||||
## Pill badges
|
||||
|
||||
{% example html %}
|
||||
{% for color in site.colors %}
|
||||
@@ -21,7 +21,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
|
||||
{% endexample %}
|
||||
|
||||
|
||||
### Soft badges
|
||||
## Soft badges
|
||||
|
||||
{% example html %}
|
||||
{% for color in site.colors %}
|
||||
@@ -30,7 +30,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
|
||||
{% endexample %}
|
||||
|
||||
|
||||
### Links
|
||||
## Links
|
||||
|
||||
{% example html %}
|
||||
{% for color in site.colors %}
|
||||
@@ -39,7 +39,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
|
||||
{% endexample %}
|
||||
|
||||
|
||||
### Empty badges
|
||||
## Empty badges
|
||||
|
||||
{% example html %}
|
||||
{% for color in site.colors %}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Buttons
|
||||
---
|
||||
|
||||
### Default markup
|
||||
## Default markup
|
||||
|
||||
{% example html wrapper=btn-list %}
|
||||
{% include ui/button.html color="primary" text="Button" %}
|
||||
|
||||
84
pages/_docs/cards.md
Normal file
84
pages/_docs/cards.md
Normal file
@@ -0,0 +1,84 @@
|
||||
---
|
||||
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.
|
||||
---
|
||||
|
||||
The `.card` element is simply a container with a shadow, a border, a radius, and some padding. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.
|
||||
|
||||
### Default card
|
||||
|
||||
{% example html columns=1 %}
|
||||
{% include cards/card.html hide-options=true %}
|
||||
{% endexample %}
|
||||
|
||||
### Advanced card
|
||||
|
||||
{% example html columns=1 %}
|
||||
{% include cards/card.html show-buttons=true show-footer=true %}
|
||||
{% endexample %}
|
||||
|
||||
### Blog post card
|
||||
|
||||
The best way to make your post eye-catching is adding an image to it. To do so, just add the image with the `.card-img-top` class. We've added the `.d-flex .flex-column` classes to the `.card-body` to have the author details be on the bottom of the card.
|
||||
|
||||
{% example html columns=1 %}
|
||||
{% include cards/blog-single.html type="image" %}
|
||||
{% endexample %}
|
||||
|
||||
### Row deck
|
||||
|
||||
If you want to create a couple of posts next to each other, add the `.row-deck` class to `.row`—then they will all have the same height.
|
||||
|
||||
{% example html columns=2 %}
|
||||
<div class="row row-cards row-deck">
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body">Short content</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body">Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body">Short content</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Post card with aside image
|
||||
|
||||
You can also add the image on the left side of the card. All you need do to is: add the `.card-aside` class to the element with the `.card` class. Then add the image in the `.card-aside-column` element. No worries, tabler will automatically center it and scale to right size:
|
||||
|
||||
{% example html columns=2 %}
|
||||
{% include cards/blog-single.html type="aside" liked=1 %}
|
||||
{% endexample %}
|
||||
|
||||
### Color variations
|
||||
|
||||
{% example html columns=2 %}
|
||||
<div class="row row-cards row-deck">
|
||||
<div class="col-md-6">
|
||||
{% include cards/card.html title="Card status" hide-options=true status="purple" %}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
{% include cards/card.html title="Card status on left side" hide-options=true status-left="blue" %}
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
### Card with switch
|
||||
|
||||
{% example html columns=1 %}
|
||||
{% include cards/card.html title="Card with switch" show-switch=true %}
|
||||
{% endexample %}
|
||||
|
||||
### Card with loader
|
||||
|
||||
{% example html columns=1 %}
|
||||
{% include cards/card.html title="Card with loader" hide-options=true show-loader=true %}
|
||||
{% endexample %}
|
||||
@@ -4,6 +4,6 @@ title: Carousel
|
||||
|
||||
The Carousel is a slideshow for cycling through elements.
|
||||
|
||||
{% example html %}
|
||||
{% example html columns=1 %}
|
||||
{% include ui/carousel.html show-indicators=true show-controls=true id="carousel-sample" %}
|
||||
{% endexample %}
|
||||
|
||||
@@ -8,7 +8,7 @@ We’ve created this admin panel for everyone who wants to create any templates
|
||||
|
||||
|
||||
|
||||
### Setup environment
|
||||
## Setup environment
|
||||
|
||||
To use our build system and run our documentation locally, you'll need a copy of Tabler's source files and Node. Follow these steps:
|
||||
|
||||
@@ -20,13 +20,13 @@ To use our build system and run our documentation locally, you'll need a copy of
|
||||
|
||||
When completed, you'll be able to run the various commands provided from the command line.
|
||||
|
||||
### Build Tabler locally
|
||||
## Build Tabler locally
|
||||
|
||||
1. From the root `/tabler` directory, run `npm run serve` in the command line.
|
||||
2. Open [http://localhost:4000](http://localhost:4000) in your browser, and voilà.
|
||||
3. Any change in `/src` directory will build application and refresh the page.
|
||||
|
||||
|
||||
### Bugs and feature requests
|
||||
## Bugs and feature requests
|
||||
|
||||
Have a bug or a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
title: Spinners
|
||||
---
|
||||
|
||||
### Default markup
|
||||
## Default markup
|
||||
|
||||
{% example html %}
|
||||
{% include ui/spinner.html %}
|
||||
{% endexample %}
|
||||
|
||||
|
||||
### Colors
|
||||
## Colors
|
||||
|
||||
{% example html %}
|
||||
{% for color in site.colors %}
|
||||
@@ -18,14 +18,14 @@ title: Spinners
|
||||
{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
### Size
|
||||
## Size
|
||||
|
||||
{% example html %}
|
||||
{% include ui/spinner.html %}
|
||||
{% include ui/spinner.html size="sm" %}
|
||||
{% endexample %}
|
||||
|
||||
### Growing spinner
|
||||
## Growing spinner
|
||||
|
||||
{% example html %}
|
||||
{% include ui/spinner.html type="grow" %}
|
||||
@@ -38,7 +38,7 @@ title: Spinners
|
||||
{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
### Buttons
|
||||
## Buttons
|
||||
|
||||
{% example html wrapper=btn-list %}
|
||||
{% include ui/button.html spinner=true text="Button" color="primary" %}
|
||||
|
||||
@@ -4,32 +4,32 @@ title: Steps
|
||||
|
||||
Steps are progress indicators of a sequence of task steps.
|
||||
|
||||
### Default markup
|
||||
## Default markup
|
||||
|
||||
{% example html %}
|
||||
{% include ui/steps.html show-title=true %}
|
||||
{% endexample %}
|
||||
|
||||
### Tooltips
|
||||
## Tooltips
|
||||
|
||||
{% example html %}
|
||||
{% include ui/steps.html show-title=true show-tooltip=true %}
|
||||
{% endexample %}
|
||||
|
||||
### Color
|
||||
## Color
|
||||
|
||||
{% example html %}
|
||||
{% include ui/steps.html color="green" show-title=true %}
|
||||
{% include ui/steps.html color="red" show-title=true %}
|
||||
{% endexample %}
|
||||
|
||||
### Steps without title
|
||||
## Steps without title
|
||||
|
||||
{% example html %}
|
||||
{% include ui/steps.html show-tooltip=true %}
|
||||
{% endexample %}
|
||||
|
||||
### Steps with numbers
|
||||
## Steps with numbers
|
||||
|
||||
{% example html %}
|
||||
{% include ui/steps.html count=5 active=2 numbers=true color="lime" %}
|
||||
|
||||
39
pages/_docs/tabs.md
Normal file
39
pages/_docs/tabs.md
Normal file
@@ -0,0 +1,39 @@
|
||||
---
|
||||
title: Tabs
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
{% example html columns=1 %}
|
||||
{% include cards/tabs.html id="ex1" %}
|
||||
{% endexample %}
|
||||
|
||||
## Tabs with icons
|
||||
|
||||
{% example html columns=1 %}
|
||||
{% include cards/tabs.html icons=true settings=true id="ex2" %}
|
||||
{% endexample %}
|
||||
|
||||
## Tabs only with icons
|
||||
|
||||
{% example html columns=1 %}
|
||||
{% include cards/tabs.html icons=true settings=true hide-text=true id="ex3" %}
|
||||
{% endexample %}
|
||||
|
||||
## Tabs with dropdown
|
||||
|
||||
{% example html columns=1 %}
|
||||
{% include cards/tabs.html dropdown=true id="ex4" %}
|
||||
{% endexample %}
|
||||
|
||||
## Full-width tabs
|
||||
|
||||
{% example html columns=1 %}
|
||||
{% include cards/tabs.html justified=true icons=true hide-text=true activity=true id="ex5" %}
|
||||
{% endexample %}
|
||||
|
||||
## Alternate style
|
||||
|
||||
{% example html columns=1 %}
|
||||
{% include cards/tabs.html icons=true alternative=true settings=true id="ex6" %}
|
||||
{% endexample %}
|
||||
@@ -4,7 +4,7 @@ title: Toasts
|
||||
|
||||
The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).
|
||||
|
||||
### Default markup
|
||||
## Default markup
|
||||
|
||||
{% example html %}
|
||||
{% include ui/toast.html %}
|
||||
|
||||
@@ -5,7 +5,7 @@ title: Tooltips
|
||||
The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element:
|
||||
|
||||
|
||||
### Default markup
|
||||
## Default markup
|
||||
|
||||
{% example html wrapper=btn-list %}
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
|
||||
@@ -22,7 +22,7 @@ The Tooltip component is small pop-up box that appears when the user moves the m
|
||||
</button>
|
||||
{% endexample %}
|
||||
|
||||
### Tooltip with HTML
|
||||
## Tooltip with HTML
|
||||
|
||||
{% example html wrapper=btn-list %}
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
|
||||
|
||||
@@ -3,7 +3,7 @@ title: Typography
|
||||
description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
|
||||
---
|
||||
|
||||
### Text alignment
|
||||
## Text alignment
|
||||
|
||||
Easily realign text to components with text alignment classes.
|
||||
|
||||
@@ -14,7 +14,7 @@ Easily realign text to components with text alignment classes.
|
||||
<p class="text-justify">Both aligned text on all viewport sizes. Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus.</p>
|
||||
{% endexample %}
|
||||
|
||||
### Text transform
|
||||
## Text transform
|
||||
|
||||
Transform text in components with text capitalization classes.
|
||||
|
||||
@@ -24,7 +24,7 @@ Transform text in components with text capitalization classes.
|
||||
<p class="text-capitalize">Capitalized text.</p>
|
||||
{% endexample %}
|
||||
|
||||
### Letter spacing
|
||||
## Letter spacing
|
||||
|
||||
Utilities for controlling the tracking (letter spacing) of an element.
|
||||
|
||||
@@ -34,7 +34,7 @@ Utilities for controlling the tracking (letter spacing) of an element.
|
||||
<p class="tracking-wide">Lorem ipsum dolor sit amet. Wide letter spacing.</p>
|
||||
{% endexample %}
|
||||
|
||||
### Line Height
|
||||
## Line Height
|
||||
|
||||
Utilities for controlling the leading (line height) of an element.
|
||||
|
||||
@@ -45,7 +45,7 @@ Utilities for controlling the leading (line height) of an element.
|
||||
<p class="leading-loose">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
|
||||
{% endexample %}
|
||||
|
||||
### Basic elements
|
||||
## Basic elements
|
||||
|
||||
When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use `.text-wrap` as container. It can handle almost any HTML tag.
|
||||
|
||||
|
||||
@@ -1,21 +1,29 @@
|
||||
{% assign id = 0 | random_id %}
|
||||
{% if include.id %}
|
||||
{% assign id = include.id %}
|
||||
{% endif %}
|
||||
{% assign icon-class = "mr-2" %}
|
||||
{% if include.hide-text %}
|
||||
{% assign icon-class = "" %}
|
||||
{% endif %}
|
||||
{% assign reverse = include.reverse | default: false %}
|
||||
|
||||
<div class="card">
|
||||
<ul class="nav nav-tabs{% if include.alternative %} nav-tabs-alt{% endif %}{% if reverse %} flex-row-reverse{% endif %}{% if include.justified %} nav-fill{% endif %}" data-toggle="tabs">
|
||||
<li class="nav-item ">
|
||||
<a href="#tabs-home-{{ id }}" class="nav-link active" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="home" class="mr-2" %}{% endif %}Home</a>
|
||||
<li class="nav-item">
|
||||
<a href="#tabs-home-{{ id }}" class="nav-link active" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="home" class=icon-class %}{% endif %}{% unless include.hide-text %}Home{% endunless %}</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#tabs-profile-{{ id }}" class="nav-link" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="user" class="mr-2" %}{% endif %}Profile</a>
|
||||
<a href="#tabs-profile-{{ id }}" class="nav-link" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="user" class=icon-class %}{% endif %}{% unless include.hide-text %}Profile{% endunless %}</a>
|
||||
</li>
|
||||
{% if include.activity %}
|
||||
<li class="nav-item">
|
||||
<a href="#tabs-activity-{{ id }}" class="nav-link" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="activity" class="mr-2" %}{% endif %}Activity</a>
|
||||
<a href="#tabs-activity-{{ id }}" class="nav-link" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="activity" class=icon-class %}{% endif %}{% unless include.hide-text %}Activity{% endunless %}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if include.disabled %}
|
||||
<li class="nav-item">
|
||||
<a href="#tabs-activity-{{ id }}" class="nav-link disabled" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="x" class="mr-2" %}{% endif %}Disabled</a>
|
||||
<a href="#tabs-activity-{{ id }}" class="nav-link disabled" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="x" class=icon-class %}{% endif %}{% unless include.hide-text %}Disabled{% endunless %}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if include.dropdown %}
|
||||
@@ -56,4 +64,4 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
1
pages/_includes/icons/x-octagon.svg
Normal file
1
pages/_includes/icons/x-octagon.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-octagon"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
|
||||
|
After Width: | Height: | Size: 406 B |
@@ -13,146 +13,28 @@
|
||||
{% for item in site.data.menu %}
|
||||
{% assign icon = item[1].icon %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link{% if item[1].active %} active{% endif %}" {% if item[1].children %}href="#sidebar-{{ id }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ item[1].url }}"{% endif %}>
|
||||
<a class="nav-link{% if item[1].active %} active{% endif %}" {% if item[1].children or item[1].docs %}href="#sidebar-{{ id }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ item[1].url }}"{% endif %}>
|
||||
{% include ui/icon.html icon=icon %}
|
||||
<span class="nav-link-text">{{ item[1].title }}</span>
|
||||
{% if item[1].label %}
|
||||
<span class="badge bg-primary text-white ml-auto">{{ item[1].label }}</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
{% if item[1].children %}
|
||||
<div class="collapse navbar-collapse" id="sidebar-{{ id }}">
|
||||
{% if item[1].children or item[1].docs %}
|
||||
<div class="collapse navbar-collapse show" id="sidebar-{{ id }}">
|
||||
<ul class="nav nav-sm flex-column">
|
||||
|
||||
{% if item[1].docs %}
|
||||
{% assign docs-key = item[1].docs %}
|
||||
{% for p in site.docs-menu[docs-key].pages %}
|
||||
{% assign doc = site.docs | where: "slug", p | first %}
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Alerts
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Avatars
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Badges
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Buttons
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Button group
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Cards
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Charts
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Forms
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Icons
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Lists
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Modal
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Navs
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Navbar
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Page headers
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Pagination
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Popovers
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Progress
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Social post
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Spinners
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Tables
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Toasts
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Tooltips
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Typography
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Utilities
|
||||
<a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="nav-link">
|
||||
{{ doc.title }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -3,8 +3,10 @@
|
||||
{% include layout/sidenav-content.html logo="white" %}
|
||||
</div>
|
||||
</div>
|
||||
{% comment %}
|
||||
<div class="sidenav sidenav-expand-xl">
|
||||
<div class="container">
|
||||
{% include layout/sidenav-content.html%}
|
||||
</div>
|
||||
</div>
|
||||
{% endcomment %}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
<div class="alert alert-{{ include.type | default: 'primary'}}" role="alert">
|
||||
{% if include.close %}<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>{% endif %}
|
||||
{% if include.icon %}{% include ui/icon.html icon=include.icon %}{% endif %} {{ include.text | default: "This is a custom alert box!" }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,9 +3,7 @@ layout: base
|
||||
---
|
||||
|
||||
<div class="d-flex h-auto min-h-screen">
|
||||
{% comment %}
|
||||
{% include_cached layout/sidenav.html %}
|
||||
{% endcomment %}
|
||||
|
||||
<div class="flex-fill d-flex flex-column mw-100">
|
||||
{% include_cached layout/header.html %}
|
||||
|
||||
@@ -13,9 +13,9 @@ page-title: Documentation
|
||||
</a>
|
||||
|
||||
{% for group in site.docs-menu %}
|
||||
{{ group.title }}
|
||||
{{ group[1].title }}
|
||||
<div class="list-group list-group-transparent mb-0">
|
||||
{% for p in group.pages %}
|
||||
{% for p in group[1].pages %}
|
||||
{% assign doc = site.docs | where: "slug", p | first %}
|
||||
<a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="list-group-item list-group-item-action{% if page.url == doc.url %} active{% endif %}">
|
||||
{{ doc.title }}
|
||||
@@ -29,7 +29,7 @@ page-title: Documentation
|
||||
<div class="card-body p-lg-5">
|
||||
|
||||
<div class="text-wrap">
|
||||
<h2 class="mt-0 mb-4">{{ page.title }}</h2>
|
||||
<h2 class="h1 mt-0 mb-4">{{ page.title }}</h2>
|
||||
|
||||
{% if page.description %}
|
||||
<p>{{ page.description }}</p>
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
---
|
||||
title: Alerts
|
||||
page-title: Alerts
|
||||
done: true
|
||||
---
|
||||
|
||||
{% for variant in site.variants %}
|
||||
{% capture text_with_variant %}
|
||||
This is a {{ variant }} alert — check it out!
|
||||
{% endcapture %}
|
||||
|
||||
{% include ui/alert.html type=variant text=text_with_variant %}
|
||||
{% endfor %}
|
||||
@@ -9,11 +9,11 @@ done: true
|
||||
{% for page in site.changelog reversed %}
|
||||
<div class="mb-4">
|
||||
<div class="mb-2">
|
||||
<span class="tag bg-blue-lt">{{ page.title }}</span> —
|
||||
<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>
|
||||
</div>
|
||||
|
||||
45
pages/forms.html
Normal file
45
pages/forms.html
Normal file
@@ -0,0 +1,45 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-3">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Add a new Credit Card</h3>
|
||||
|
||||
<div class="row row-xs">
|
||||
<div class="col-12 form-group">
|
||||
<input class="form-control" type="text" placeholder="Card Number" />
|
||||
<!-- todo: input mask -->
|
||||
</div>
|
||||
<div class="col-4 form-group">
|
||||
<select class="form-control custom-select">
|
||||
<option>01</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-4 form-group">
|
||||
<select class="form-control custom-select">
|
||||
<option>2020</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-4 form-group">
|
||||
<input class="form-control" type="text" placeholder="CVV" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include ui/button.html text="Save" color="primary" block=true %}
|
||||
|
||||
<div class="small text-muted mt-3">
|
||||
{% include ui/icon.html icon="lock" %}
|
||||
128-Bit SSL Encryption
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-3">2</div>
|
||||
<div class="col-3">3</div>
|
||||
<div class="col-3">4</div>
|
||||
</div>
|
||||
@@ -26,7 +26,7 @@ $gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
|
||||
$blue: #467fcf !default;
|
||||
$blue: #2E7CD9 !default;
|
||||
$azure: #45aaf2 !default;
|
||||
$indigo: #6574cd !default;
|
||||
$purple: #a55eea !default;
|
||||
@@ -110,9 +110,9 @@ $line-height-base: (24 / 15) !default;
|
||||
|
||||
$border-radius: 3px !default;
|
||||
|
||||
$h1-font-size: 1.875rem !default;
|
||||
$h2-font-size: 1.625rem !default;
|
||||
$h3-font-size: 1.25rem !default;
|
||||
$h1-font-size: 2rem !default;
|
||||
$h2-font-size: 1.5rem !default;
|
||||
$h3-font-size: 1.125rem !default;
|
||||
$h4-font-size: $font-size-base !default;
|
||||
$h5-font-size: .8125rem !default;
|
||||
$h6-font-size: .75rem !default;
|
||||
@@ -154,6 +154,10 @@ $container-max-widths: (
|
||||
xl: 1200px
|
||||
) !default;
|
||||
|
||||
//close
|
||||
$close-font-weight: 400 !default;
|
||||
$close-font-size: 1.5rem !default;
|
||||
|
||||
//badges
|
||||
$badge-font-weight: 600 !default;
|
||||
|
||||
|
||||
@@ -29,7 +29,6 @@
|
||||
@import "ui/buttons";
|
||||
@import "ui/cards";
|
||||
@import "ui/avatars";
|
||||
@import "ui/tags";
|
||||
@import "ui/inputs";
|
||||
@import "ui/inputs.custom";
|
||||
@import "ui/media";
|
||||
|
||||
@@ -66,7 +66,7 @@
|
||||
|
||||
.avatar-list-stacked {
|
||||
.avatar {
|
||||
margin-right: -.5em;
|
||||
margin-right: -.5em !important;
|
||||
box-shadow: 0 0 0 2px #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -89,8 +89,9 @@
|
||||
|
||||
.card-title {
|
||||
display: block;
|
||||
font-size: $h4-font-size;
|
||||
font-size: $h3-font-size;
|
||||
font-weight: 500;
|
||||
margin: 0 0 1.5rem;
|
||||
line-height: 1;
|
||||
color: inherit;
|
||||
|
||||
|
||||
@@ -1,99 +0,0 @@
|
||||
|
||||
.tag {
|
||||
display: inline-flex;
|
||||
padding: .25em .75em;
|
||||
font-size: px2rem(12px);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: $text-muted;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
background-color: $body-bg;
|
||||
border-radius: 3px;
|
||||
|
||||
@at-root a#{&} {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: .3s color, .3s background;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
background-color: rgba($text-muted, .2);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tag-addon {
|
||||
display: inline-block;
|
||||
min-width: 1.5rem;
|
||||
padding: 0 .5rem;
|
||||
margin: 0 -.5rem 0 .5rem;
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background: rgba(#000, .06);
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
i {
|
||||
margin: 0 -.25rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@at-root a#{&} {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: .3s color, .3s background;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
background: rgba(#000, .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tag-avatar {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin: 0 .5rem 0 -.5rem;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
@each $vendor, $color in $colors {
|
||||
.tag-#{$vendor} {
|
||||
color: #fff;
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@each $vendor, $color in $theme-colors {
|
||||
.tag-#{$vendor} {
|
||||
color: #fff;
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-rounded {
|
||||
border-radius: 50px;
|
||||
|
||||
.tag-avatar {
|
||||
border-radius: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
margin-bottom: -.5rem;
|
||||
font-size: 0;
|
||||
|
||||
> .tag {
|
||||
margin-bottom: .5rem;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user