mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
html small fixes
This commit is contained in:
@@ -16,7 +16,7 @@ Premium and Open Source dashboard template with responsive and high-quality UI.
|
||||
|
||||
## 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
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
color = $this.attr('data-spark-color') || 'blue',
|
||||
type = $this.attr('data-spark-type') || 'line';
|
||||
|
||||
const $div = $('<div />').html(data);
|
||||
const $div = $('<div/>').html(data);
|
||||
$this.append($div);
|
||||
|
||||
let strokeColor = tabler.colors[color],
|
||||
|
||||
@@ -12,9 +12,9 @@ The `.btn` classes are designed to be used with the `<button>` element. However,
|
||||
{% example html wrapper=btn-list %}
|
||||
<a href="#" class="btn btn-primary" role="button">Link</a>
|
||||
<button class="btn btn-primary">Button</button>
|
||||
<input type="button" class="btn btn-primary" value="Input" />
|
||||
<input type="submit" class="btn btn-primary" value="Submit" />
|
||||
<input type="reset" class="btn btn-primary" value="Reset" />
|
||||
<input type="button" class="btn btn-primary" value="Input"/>
|
||||
<input type="submit" class="btn btn-primary" value="Submit"/>
|
||||
<input type="reset" class="btn btn-primary" value="Reset"/>
|
||||
{% endexample %}
|
||||
|
||||
### Button variations
|
||||
|
||||
@@ -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.
|
||||
|
||||
{% example html %}
|
||||
<progress class="progress progress-sm" value="15" max="100" />
|
||||
<progress class="progress progress-sm" value="15" max="100"/>
|
||||
{% endexample %}
|
||||
|
||||
@@ -21,23 +21,23 @@ description: Documentation and examples for common text utilities to control ali
|
||||
### Semantic text elements
|
||||
|
||||
{% example %}
|
||||
<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>
|
||||
<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>
|
||||
<del>Deleted</del><hide> <code class="ml-2">del</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>
|
||||
<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>
|
||||
<mark>Highlighted</mark><hide> <code class="ml-2">mark</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>
|
||||
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>
|
||||
<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>
|
||||
<var>x</var> = <var>y</var> + 2<hide> <code class="ml-2">var</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>
|
||||
<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>
|
||||
<del>Deleted</del><hide> <code class="ml-2">del</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>
|
||||
<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>
|
||||
<mark>Highlighted</mark><hide> <code class="ml-2">mark</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>
|
||||
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>
|
||||
<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>
|
||||
<var>x</var> = <var>y</var> + 2<hide> <code class="ml-2">var</code><br/></hide>
|
||||
{% endexample %}
|
||||
|
||||
### Horizontal rules
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
{% if site.data.libs %}
|
||||
<!-- 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 %}
|
||||
{% endif %}
|
||||
|
||||
<!-- 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 -->
|
||||
<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-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"/>
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
<div class="col-auto ml-auto">
|
||||
{% if page.page-title-actions == 'users' %}
|
||||
<div class="d-flex">
|
||||
<input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user…" />
|
||||
<input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user…"/>
|
||||
{% include_cached ui/button.html text="New user" color="primary" icon="plus" %}
|
||||
</div>
|
||||
{% elsif page.page-title-actions == 'calendar' %}
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
<fieldset class="form-fieldset">
|
||||
<div class="mb-3">
|
||||
<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 class="mb-3">
|
||||
<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 class="mb-3">
|
||||
<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 class="">
|
||||
<label class="form-label">Phone number</label>
|
||||
<input type="tel" class="form-control" autocomplete="off" />
|
||||
<input type="tel" class="form-control" autocomplete="off"/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<div class="mb-3">
|
||||
<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">
|
||||
{% for country in site.data.countries limit: 10 %}
|
||||
<option value="{{ country | escape }}" />{% endfor %}
|
||||
<option value="{{ country | escape }}"/>{% endfor %}
|
||||
</datalist>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
{% for photo in site.data.photos limit: limit offset: 30 %}
|
||||
<div class="{{ include.row-class | default: 'col-6 col-sm-4' }}">
|
||||
<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">
|
||||
<img src="{{ site.base }}/img/photos/{{ photo.file }}" alt="" class="imagecheck-image">
|
||||
</span>
|
||||
|
||||
@@ -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"/>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<!doctype 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>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
|
||||
|
||||
@@ -17,7 +17,7 @@ done: true
|
||||
<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>
|
||||
<strong>{{ color[1].name }}</strong><br />
|
||||
<strong>{{ color[1].name }}</strong><br/>
|
||||
<code>.bg-{{ color[0] }}</code>
|
||||
</div>
|
||||
</li>
|
||||
@@ -39,7 +39,7 @@ done: true
|
||||
<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>
|
||||
<strong>{{ color[1].name }} lite</strong><br />
|
||||
<strong>{{ color[1].name }} lite</strong><br/>
|
||||
<code>.bg-{{ color[0] }}-lt</code>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user