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

credit card element, input mask remove jquery, grid fixes

Browse Source
This commit is contained in:
codecalm
2020-02-01 19:30:16 +01:00
parent e7db397d7b
commit 33eac63eb6
11 changed files with 70 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/_docs/form-elements.md
View File

@@ -197,7 +197,7 @@ bootstrap-link: components/forms/
{% example %}
<div class="mb-2">
<label class="form-label">Date of birth</label>
<div class="row row-xs">
<div class="row row-sm">
<div class="col-5">
<select name="user[month]" class="form-select">
<option value="">Month</option>

47
pages/_includes/cards/credit-card.html Normal file
View File

@@ -0,0 +1,47 @@
<div class="card">
<div class="card-body">
<div class="mb-3">
<div class="form-label">Card number</div>
{% include ui/form/input-mask.html mask="0000 0000 0000 0000" visible=true %}
</div>
<div class="mb-3">
<div class="form-label">Card name</div>
<input type="text" class="form-control">
</div>
<div class="row">
<div class="col-8">
<div class="mb-3">
<label class="form-label">Expiration date</label>
<div class="row row-sm">
<div class="col">
<select class="form-select">
{% for month in (1..12) %}
<option value="{{ month }}">{{ month }}</option>
{% endfor %}
</select>
</div>
<div class="col">
<select class="form-select">
{% for year in (2020..2030) %}
<option value="{{ year }}">{{ year }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</div>
<div class="col">
<div class="mb-3">
<div class="form-label">CVV</div>
<input type="number" class="form-control">
</div>
</div>
</div>
<div class="mt-2">
{% include ui/button.html text="Pay now" color="primary" block=true %}
</div>
</div>
</div>

8
pages/_includes/cards/feed-card.html
View File

@@ -18,7 +18,7 @@
{% endif %}
{% if include.feed %}
<div class="row row-xs">
<div class="row row-sm">
{% if include.feed == 1 %}
<div class="col-6 mb-2">
<div class="media media-2x1 rounded">
@@ -61,7 +61,7 @@
<div class="media media-2x1 mb-2 rounded">
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[7].file }})"></a>
</div>
<div class="row row-xs">
<div class="row row-sm">
<div class="col-6">
<div class="media rounded">
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[8].file }})"></a>
@@ -109,7 +109,7 @@
</div>
</div>
<div class="col-6">
<div class="row row-xs">
<div class="row row-sm">
<div class="col-6">
<div class="media mb-2 rounded">
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[16].file }})"></a>
@@ -140,7 +140,7 @@
</div>
</div>
<div class="col-6">
<div class="row row-xs">
<div class="row row-sm">
<div class="col-6">
<div class="media mb-2 rounded">
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[21].file }})"></a>

2
pages/_includes/cards/timeline.html
View File

@@ -54,7 +54,7 @@
<div class="list-timeline-time">3 days ago</div>
<p class="list-timeline-title">+2 New photos</p>
<div class="mt-3">
<div class="row row-xs">
<div class="row row-sm">
<div class="col-6">
<div class="media media-2x1 rounded">
<a class="media-content" style="background-image: url({% include ui/image.html id=6 %})"></a>

2
pages/_includes/forms/form-elements-5.html
View File

@@ -41,7 +41,7 @@
<div class="mb-3">
<label class="form-label">Date of birth</label>
<div class="row row-xs">
<div class="row row-sm">
<div class="col-5">
<select name="user[month]" class="form-select">
<option value="">Month</option>

2
pages/_includes/parts/form/input-color.html
View File

@@ -5,7 +5,7 @@
<div class="mb-3">
<label class="form-label">Color Input</label>
<div class="row row-xs">
<div class="row row-sm">
{% for color in colors %}
<div class="col-auto">
<label class="form-colorinput{% if color == 'white' %} form-colorinput-light{% endif %}">

2
pages/_includes/parts/form/input-icon-separated.html
View File

@@ -1,6 +1,6 @@
<div class="mb-3">
<label class="form-label">Separated inputs</label>
<div class="row row-xs">
<div class="row row-sm">
<div class="col">
<input type="text" class="form-control" placeholder="Search for…">
</div>

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

@@ -1,7 +1,7 @@
{% assign limit = include.limit | default: 9 %}
<div class="mb-3">
<label class="form-label">Image Check</label>
<div class="row row-xs">
<div class="row row-sm">
{% assign photos = site.data.photos | where: 'horizontal', true %}
{% for photo in photos limit: limit %}

21
pages/_includes/ui/form/input-mask.html
View File

@@ -4,16 +4,17 @@
{% capture_once scripts %}
<script>
(function () {
const $elem = $('[data-mask]');
if ($elem) {
$elem.each(function () {
IMask($(this).get(0), {
mask: $(this).attr('data-mask'),
lazy: $(this).attr('data-mask-visible') === 'true',
});
});
}
/**
* Input mask
*/
var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'))
maskElementList.map(function (maskEl) {
console.log('maskEl', maskEl);
return new IMask(maskEl, {
mask: maskEl.dataset.mask,
lazy: maskEl.dataset['mask-visible'] === 'true'
})
});
})();
</script>
{% endcapture_once %}

1
pages/cards.html
View File

@@ -32,6 +32,7 @@ menu: base.cards
{% include cards/card.html status-bottom="success" title="Card with bottom status" %}
{% include cards/card.html status-left="primary" title="Card with side status" %}
{% include cards/card.html class="card-stacked" title="Stacked card" %}
{% include cards/credit-card.html %}
</div>
<div class="col-xl-6">
{% include cards/card.html title="Card title" subtitle="Card subtitle" %}

2
scss/ui/_grid.scss
View File

@@ -11,7 +11,7 @@
}
}
@each $name, $value in (0: 0, xs: .25rem, sm: .5rem, md: 1.5rem, lg: 3rem) {
@each $name, $value in (0: 0, sm: .375rem, md: 1.5rem, lg: 3rem) {
.row-#{$name} {
margin-right: (-$value);
margin-left: -($value);