Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-12 22:32:21 +04:00
Code Issues Projects Releases Wiki Activity

divider fixes, documentation

Browse Source
This commit is contained in:
codecalm
2019-07-09 20:19:01 +02:00
parent bd7b8be915
commit 318f1c5b5e
11 changed files with 36 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_docs/alerts.md
+7 -6
View File
@@ -1,11 +1,12 @@
---
title: Alerts
menu: docs.alerts
done: true
---
Bootstrap provides an easy way to create predefined alert messages.
## Default markup
### Default markup
{% example %}
{% for variant in site.variants %}
@@ -17,7 +18,7 @@ Bootstrap provides an easy way to create predefined alert messages.
{% endexample %}
## Alert Links
### Alert Links
Add the `alert-link` class to any links inside the alert box to create "matching colored links":
@@ -31,7 +32,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching
{% endexample %}
## Dismissible Alerts
### Dismissible Alerts
{% example %}
{% for variant in site.variants %}
@@ -42,7 +43,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching
{% endfor %}
{% endexample %}
## Alerts with icons
### Alerts with icons
{% example %}
{% for variant in site.variants %}
@@ -53,7 +54,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching
{% endfor %}
{% endexample %}
## Alert with avatar
### Alert with avatar
{% assign person = site.data.people[1] %}
{% example %}
{% for variant in site.variants %}
@@ -64,7 +65,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching
{% endfor %}
{% endexample %}
## Alert with buttons
### Alert with buttons
{% example %}
{% capture variant-text %}
<h3>Some Title</h3>
pages/_docs/autosize.md
+1
View File
@@ -1,5 +1,6 @@
---
title: Autosize
done: true
---
A small, stand-alone script to automatically adjust textarea height.
pages/_docs/avatars.md
+9 -8
View File
@@ -1,11 +1,12 @@
---
title: Avatars
menu: docs.avatars
done: true
---
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 %}
@@ -13,7 +14,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.
@@ -25,7 +26,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.
@@ -38,7 +39,7 @@ Add an online or offline status indicator to show user's availability.
{% include ui/avatar.html person-id=16 status="gray" status-text="5" %}
{% endexample %}
## Avatar shape
### Avatar shape
Change the shape of an avatar with the default Bootstrap image classes.
@@ -50,7 +51,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" %}
@@ -61,7 +62,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 %})
@@ -73,7 +74,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" %}
@@ -81,7 +82,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 %}
<div class="avatar-list">
pages/_docs/badges.md
+1
View File
@@ -1,6 +1,7 @@
---
title: Badges
menu: docs.badges
done: true
---
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.
pages/_docs/divider.md
+6 -3
View File
@@ -1,13 +1,16 @@
---
title: Divider
description: A divider visually segments content into groups
---
{% example html %}
### Default markup
{% example html max-width=300 %}
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequatur maxime quia reprehenderit tempore? Aliquid atque deserunt dolore explicabo in, itaque laborum magnam minus odio placeat quibusdam reiciendis rem voluptatibus?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequatur maxime quia reprehenderit tempore?
</p>
<h6 class="divider">OR</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit! Aspernatur aut explicabo labore odit quisquam?
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
{% endexample %}
pages/_docs/toasts.md
+3 -2
View File
@@ -1,11 +1,12 @@
---
title: Toasts
menu: docs.toasts
description: 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.).
---
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 %}
{% include ui/toast.html %}
pages/_docs/tooltips.md
+3 -5
View File
@@ -1,12 +1,10 @@
---
title: Tooltips
menu: docs.tooltips
description: The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element.
---
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">
@@ -23,7 +21,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>">
pages/_layouts/docs.html
+1 -1
View File
@@ -26,7 +26,7 @@ page-title: Documentation
<div class="card-body p-lg-8">
<div class="markdown">
<h2 class="h1 mt-0 mb-4">{{ page.title }}{% if page.done %} {% include ui/icon.html icon="check" color="green" %}{% endif %}</h2>
<h2 class="mt-0 mb-4">{{ page.title }}{% if page.done %} {% include ui/icon.html icon="check" color="green" %}{% endif %}</h2>
{% if page.description %}
<p>{{ page.description }}</p>
pages/_plugins/jekyll-example.rb
+3 -3
View File
@@ -5,7 +5,7 @@ module Jekyll
class ExampleBlock < Liquid::Block
include Liquid::StandardFilters
SYNTAX = /^([a-zA-Z0-9.+#-]+)((\s+\w+(=((\w|[0-9_-])+|"([0-9]+\s)*[0-9]+"))?)*)$/
SYNTAX = /^([a-zA-Z0-9.+#-]+)((\s+[\w-]+(=((\w|[0-9_-])+|"([0-9]+\s)*[0-9]+"))?)*)$/
def initialize(tag_name, markup, tokens)
super
@@ -18,7 +18,7 @@ module Jekyll
@options = {}
if defined?($2) && $2 != ''
# Split along 3 possible forms -- key="<quoted list>", key=value, or key
$2.scan(/(?:\w+(?:=(?:(?:\w|[0-9_-])+|"[^"]*")?)?)/) do |opt|
$2.scan(/(?:[\w-]+(?:=(?:(?:\w|[0-9_-])+|"[^"]*")?)?)/) do |opt|
key, value = opt.split('=')
# If a quoted list, convert to array
if value && value.include?("\"")
@@ -60,7 +60,7 @@ Valid syntax: example <lang> [id=foo]
def example(output)
output = output.gsub(/<hide>/, "").gsub(/<\/hide>/, "")
"<div class=\"example" + (@options[:columns] ? " example-bg" : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + (@options[:wrapper] ? "<div class=\"" + @options[:wrapper] + "\">\n" : "") + "#{output}" + (@options[:wrapper] ? "\n</div>" : "") + (@options[:columns] ? "\n</div>" : "") + "\n</div>"
"<div class=\"example" + (@options[:columns] ? " example-bg" : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + (@options[:wrapper] ? "<div class=\"" + @options[:wrapper] + "\">\n" : "") + (@options[:"max-width"] ? "<div style=\"max-width: " + @options[:"max-width"] + "px; margin: 0 auto;\">\n" : "") + "#{output}" + (@options[:wrapper] ? "\n</div>" : "") + (@options[:columns] ? "\n</div>" : "") + (@options[:"max-width"] ? "\n</div>" : "") + "\n</div>"
end
def remove_example_classes(code)
scss/ui/_lists.scss
-1
View File
@@ -17,7 +17,6 @@
.list-timeline-time {
float: right;
margin-left: 1rem;
font-style: italic;
color: $text-muted;
}
scss/ui/_typo.scss
+2 -1
View File
@@ -101,10 +101,11 @@ Divider
flex: 0;
align-items: center;
width: 100%;
margin: 2rem auto;
margin: 1.5rem auto;
font-size: $h6-font-size;
color: $text-muted;
letter-spacing: .5px;
font-weight: 400;
&::before,
&::after {