Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-22 01:44:25 +04:00
Code Issues Projects Releases Wiki Activity

html small fixes

Browse Source
This commit is contained in:
codecalm
2019-12-09 16:41:28 +01:00
parent 0198984c0c
commit 3ef10ea55e
13 changed files with 39 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -16,7 +16,7 @@ Premium and Open Source dashboard template with responsive and high-quality UI.
## Status ## Status
<a href="https://www.npmjs.com/package/tabler-ui"><a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg" /></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg" /></a> <img src="https://img.shields.io/npm/dt/tabler-ui.svg" alt="Total Downloads"></a> <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler-ui.svg" alt="License"></a> <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler-ui.svg" alt="Latest Release"></a> <a href="https://www.npmjs.com/package/tabler-ui"><a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg"/></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg"/></a> <img src="https://img.shields.io/npm/dt/tabler-ui.svg" alt="Total Downloads"></a> <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler-ui.svg" alt="License"></a> <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler-ui.svg" alt="Latest Release"></a>
## Features ## Features

2
js/tabler-charts.js
View File

@@ -7,7 +7,7 @@
color = $this.attr('data-spark-color') || 'blue', color = $this.attr('data-spark-color') || 'blue',
type = $this.attr('data-spark-type') || 'line'; type = $this.attr('data-spark-type') || 'line';
const $div = $('<div />').html(data); const $div = $('<div/>').html(data);
$this.append($div); $this.append($div);
let strokeColor = tabler.colors[color], let strokeColor = tabler.colors[color],

6
pages/_docs/buttons.md
View File

@@ -12,9 +12,9 @@ The `.btn` classes are designed to be used with the `<button>` element. However,
{% example html wrapper=btn-list %} {% example html wrapper=btn-list %}
<a href="#" class="btn btn-primary" role="button">Link</a> <a href="#" class="btn btn-primary" role="button">Link</a>
<button class="btn btn-primary">Button</button> <button class="btn btn-primary">Button</button>
<input type="button" class="btn btn-primary" value="Input" /> <input type="button" class="btn btn-primary" value="Input"/>
<input type="submit" class="btn btn-primary" value="Submit" /> <input type="submit" class="btn btn-primary" value="Submit"/>
<input type="reset" class="btn btn-primary" value="Reset" /> <input type="reset" class="btn btn-primary" value="Reset"/>
{% endexample %} {% endexample %}
### Button variations ### Button variations

2
pages/_docs/progress.md
View File

@@ -34,5 +34,5 @@ To create a default progress bar, add a `.progress` class to a `<div>` element:
You can also use native HTML5 `<progress>` element. You can also use native HTML5 `<progress>` element.
{% example html %} {% example html %}
<progress class="progress progress-sm" value="15" max="100" /> <progress class="progress progress-sm" value="15" max="100"/>
{% endexample %} {% endexample %}

34
pages/_docs/typography.md
View File

@@ -21,23 +21,23 @@ description: Documentation and examples for common text utilities to control ali
### Semantic text elements ### Semantic text elements
{% example %} {% example %}
<abbr title="Internationalization">I18N</abbr><hide> <code class="ml-2">abbr</code><br /></hide> <abbr title="Internationalization">I18N</abbr><hide> <code class="ml-2">abbr</code><br/></hide>
<strong>Bold</strong><hide> <code class="ml-2">strong</code> <code>b</code><br /></hide> <strong>Bold</strong><hide> <code class="ml-2">strong</code> <code>b</code><br/></hide>
<cite>Citation</cite><hide> <code class="ml-2">cite</code><br /></hide> <cite>Citation</cite><hide> <code class="ml-2">cite</code><br/></hide>
<code>Hello World!</code><hide> <code class="ml-2">code</code><br /></hide> <code>Hello World!</code><hide> <code class="ml-2">code</code><br/></hide>
<del>Deleted</del><hide> <code class="ml-2">del</code><br /></hide> <del>Deleted</del><hide> <code class="ml-2">del</code><br/></hide>
<em>Emphasis</em><hide> <code class="ml-2">em</code><br /></hide> <em>Emphasis</em><hide> <code class="ml-2">em</code><br/></hide>
<i>Italic</i><hide> <code class="ml-2">i</code><br /></hide> <i>Italic</i><hide> <code class="ml-2">i</code><br/></hide>
<ins>Inserted</ins><hide> <code class="ml-2">ins</code><br /></hide> <ins>Inserted</ins><hide> <code class="ml-2">ins</code><br/></hide>
<kbd>Ctrl + S</kbd><hide> <code class="ml-2">kbd</code><br /></hide> <kbd>Ctrl + S</kbd><hide> <code class="ml-2">kbd</code><br/></hide>
<mark>Highlighted</mark><hide> <code class="ml-2">mark</code><br /></hide> <mark>Highlighted</mark><hide> <code class="ml-2">mark</code><br/></hide>
<s>Strikethrough</s<hide>> <code class="ml-2">s</code><br /></hide> <s>Strikethrough</s<hide>> <code class="ml-2">s</code><br/></hide>
<samp>Sample</samp><hide> <code class="ml-2">samp</code><br /></hide> <samp>Sample</samp><hide> <code class="ml-2">samp</code><br/></hide>
Text <sub>Subscripted</sub><hide> <code class="ml-2">sub</code><br /></hide> Text <sub>Subscripted</sub><hide> <code class="ml-2">sub</code><br/></hide>
Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br /></hide> Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br/></hide>
<time>20:00</time><hide> <code class="ml-2">time</code><br /></hide> <time>20:00</time><hide> <code class="ml-2">time</code><br/></hide>
<u>Underline</u><hide> <code class="ml-2">u</code><br /></hide> <u>Underline</u><hide> <code class="ml-2">u</code><br/></hide>
<var>x</var> = <var>y</var> + 2<hide> <code class="ml-2">var</code><br /></hide> <var>x</var> = <var>y</var> + 2<hide> <code class="ml-2">var</code><br/></hide>
{% endexample %} {% endexample %}
### Horizontal rules ### Horizontal rules

8
pages/_includes/layout/css.html
View File

@@ -1,13 +1,13 @@
{% if site.data.libs %} {% if site.data.libs %}
<!-- Libs CSS --> <!-- Libs CSS -->
{% for lib in site.data.libs.css %} {% for lib in site.data.libs.css %}
<link href="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ lib | replace: '@', '' }}{% else %}{{ lib }}{% endif %}?{{ site.time | date: '%s' }}" rel="stylesheet" /> <link href="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ lib | replace: '@', '' }}{% else %}{{ lib }}{% endif %}?{{ site.time | date: '%s' }}" rel="stylesheet"/>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
<!-- Tabler Core --> <!-- Tabler Core -->
<link href="{{ site.base }}/dist/css/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet" /> <link href="{{ site.base }}/dist/css/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
<!-- Tabler Plugins --> <!-- Tabler Plugins -->
<link href="{{ site.base }}/dist/css/tabler-flags{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet" /> <link href="{{ site.base }}/dist/css/tabler-flags{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
<link href="{{ site.base }}/dist/css/tabler-charts{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet" /> <link href="{{ site.base }}/dist/css/tabler-charts{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>

2
pages/_includes/layout/page-title.html
View File

@@ -26,7 +26,7 @@
<div class="col-auto ml-auto"> <div class="col-auto ml-auto">
{% if page.page-title-actions == 'users' %} {% if page.page-title-actions == 'users' %}
<div class="d-flex"> <div class="d-flex">
<input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user&hellip;" /> <input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user&hellip;"/>
{% include_cached ui/button.html text="New user" color="primary" icon="plus" %} {% include_cached ui/button.html text="New user" color="primary" icon="plus" %}
</div> </div>
{% elsif page.page-title-actions == 'calendar' %} {% elsif page.page-title-actions == 'calendar' %}

8
pages/_includes/parts/form-fieldset.html
View File

@@ -1,18 +1,18 @@
<fieldset class="form-fieldset"> <fieldset class="form-fieldset">
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Full name<span class="form-required">*</span></label> <label class="form-label">Full name<span class="form-required">*</span></label>
<input type="text" class="form-control" autocomplete="off" /> <input type="text" class="form-control" autocomplete="off"/>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Company<span class="form-required">*</span></label> <label class="form-label">Company<span class="form-required">*</span></label>
<input type="text" class="form-control" autocomplete="off" /> <input type="text" class="form-control" autocomplete="off"/>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Email<span class="form-required">*</span></label> <label class="form-label">Email<span class="form-required">*</span></label>
<input type="email" class="form-control" autocomplete="off" /> <input type="email" class="form-control" autocomplete="off"/>
</div> </div>
<div class=""> <div class="">
<label class="form-label">Phone number</label> <label class="form-label">Phone number</label>
<input type="tel" class="form-control" autocomplete="off" /> <input type="tel" class="form-control" autocomplete="off"/>
</div> </div>
</fieldset> </fieldset>

4
pages/_includes/parts/input-datalist.html
View File

@@ -1,8 +1,8 @@
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Datalist example</label> <label class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" placeholder="Type to search..." /> <input class="form-control" list="datalistOptions" placeholder="Type to search..."/>
<datalist id="datalistOptions"> <datalist id="datalistOptions">
{% for country in site.data.countries limit: 10 %} {% for country in site.data.countries limit: 10 %}
<option value="{{ country | escape }}" />{% endfor %} <option value="{{ country | escape }}"/>{% endfor %}
</datalist> </datalist>
</div> </div>

2
pages/_includes/parts/input-image.html
View File

@@ -5,7 +5,7 @@
{% for photo in site.data.photos limit: limit offset: 30 %} {% for photo in site.data.photos limit: limit offset: 30 %}
<div class="{{ include.row-class | default: 'col-6 col-sm-4' }}"> <div class="{{ include.row-class | default: 'col-6 col-sm-4' }}">
<label class="imagecheck mb-2"> <label class="imagecheck mb-2">
<input name="imagecheck" type="checkbox" value="{{ forloop.index }}" class="imagecheck-input" {% if forloop.index == 2 or forloop.index == 4 or forloop.index == 7 %} checked{% endif %} /> <input name="imagecheck" type="checkbox" value="{{ forloop.index }}" class="imagecheck-input" {% if forloop.index == 2 or forloop.index == 4 or forloop.index == 7 %} checked{% endif %}/>
<span class="imagecheck-figure"> <span class="imagecheck-figure">
<img src="{{ site.base }}/img/photos/{{ photo.file }}" alt="" class="imagecheck-image"> <img src="{{ site.base }}/img/photos/{{ photo.file }}" alt="" class="imagecheck-image">
</span> </span>

2
pages/_includes/ui/input-mask.html
View File

@@ -1 +1 @@
<input type="text" name="input-{{ include.name | default: 'mask' }}" class="form-control" data-mask="{{ include.mask | default: '00/00/0000' }}"{% if include.visible %} data-mask-visible="true"{% endif %}{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %} autocomplete="off" /> <input type="text" name="input-{{ include.name | default: 'mask' }}" class="form-control" data-mask="{{ include.mask | default: '00/00/0000' }}"{% if include.visible %} data-mask-visible="true"{% endif %}{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %} autocomplete="off"/>

2
pages/_layouts/base.html
View File

@@ -1,6 +1,6 @@
<!doctype html> <!doctype html>
{% include_cached layout/banner.html %} {% include_cached layout/banner.html %}
<html lang="en" {% if page.rtl %} dir="rtl" {% endif %}> <html lang="en"{% if page.rtl %} dir="rtl" {% endif %}>
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>

4
pages/colors.html
View File

@@ -17,7 +17,7 @@ done: true
<li class="d-flex align-items-center mb-3"> <li class="d-flex align-items-center mb-3">
<div class="stamp bg-{{ color[0] }} text-white mr-3">{{ color[1].name | first_letters | upcase }}</div> <div class="stamp bg-{{ color[0] }} text-white mr-3">{{ color[1].name | first_letters | upcase }}</div>
<div> <div>
<strong>{{ color[1].name }}</strong><br /> <strong>{{ color[1].name }}</strong><br/>
<code>.bg-{{ color[0] }}</code> <code>.bg-{{ color[0] }}</code>
</div> </div>
</li> </li>
@@ -39,7 +39,7 @@ done: true
<li class="d-flex align-items-center mb-3"> <li class="d-flex align-items-center mb-3">
<div class="stamp bg-{{ color[0] }}-lt mr-3">{{ color[1].name | first_letters | upcase }}</div> <div class="stamp bg-{{ color[0] }}-lt mr-3">{{ color[1].name | first_letters | upcase }}</div>
<div> <div>
<strong>{{ color[1].name }} lite</strong><br /> <strong>{{ color[1].name }} lite</strong><br/>
<code>.bg-{{ color[0] }}-lt</code> <code>.bg-{{ color[0] }}-lt</code>
</div> </div>
</li> </li>