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

bootstrap update, form elements fixes

Browse Source
This commit is contained in:
codecalm
2020-11-02 01:32:56 +01:00
parent 667327a0d9
commit 1a30f78307
26 changed files with 70 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -78,7 +78,7 @@
"@fullcalendar/timegrid": "^5.3.1",
"apexcharts": "^3.22.0",
"autosize": "^4.0.2",
"bootstrap": "twbs/bootstrap#a6156ed",
"bootstrap": "twbs/bootstrap#e0b8fcd",
"countup.js": "^2.0.7",
"daterangepicker": "^3.1.0",
"flatpickr": "^4.6.6",

11
src/js/input-mask.js Normal file
View File

@@ -0,0 +1,11 @@
// Input mask plugin
import IMask from 'imask';
var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'));
maskElementList.map(function (maskEl) {
return new IMask(maskEl, {
mask: maskEl.dataset.mask,
lazy: maskEl.dataset['mask-visible'] === 'true'
})
});

1
src/js/tabler.js
View File

@@ -1,6 +1,7 @@
//Vendor
import './autosize';
import './input-mask';
(function() {
/**

2
src/pages/_data/libs.json
View File

@@ -9,8 +9,6 @@
"js": {
"bootstrap": "bootstrap/dist/js/bootstrap.bundle.min.js",
"jquery": "jquery/dist/jquery.slim.min.js",
"autosize": "autosize/dist/autosize.min.js",
"imask": "imask/dist/imask.min.js",
"selectize": "selectize/dist/js/standalone/selectize.min.js",
"apexcharts": "apexcharts/dist/apexcharts.min.js",
"jqvmap": "jqvmap/dist/jquery.vmap.min.js",

2
src/pages/_includes/cards/order-statistics.html
View File

@@ -12,7 +12,7 @@
<ul class="list-unstyled">
{% for item in site.data.orders %}
<li class="row row-sm lh-sm align-items-center mb-2">
<li class="row row-sm align-items-center mb-2">
<div class="col-auto"><span class="legend bg-{{ item.color }}"></span></div>
<div class="col">
{{ item.title }}

4
src/pages/_includes/forms/form-elements-4.html
View File

@@ -8,7 +8,7 @@
<label class="form-label">Buttons group</label>
<div class="btn-group w-100">
<button type="button" class="btn">1 min</button>
<button type="button" class="btn active">5 min</button>
<button type="button" class="btn btn-primary">5 min</button>
<button type="button" class="btn">10 min</button>
<button type="button" class="btn">30 min</button>
</div>
@@ -19,7 +19,7 @@
<div class="btn-group w-100">
<button type="button" class="btn">Option 1</button>
<button type="button" class="btn">Option 2</button>
<button type="button" class="btn active">Option 3</button>
<button type="button" class="btn btn-primary">Option 3</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Other

7
src/pages/_includes/layout/content.html
View File

@@ -3,7 +3,12 @@
<div class="content">
<div class="container{% if page.layout-fluid %}-fluid{% else %}-xl{% endif %}{% if page.container-centered %} d-flex flex-column justify-content-center{% endif %}">
{% if page-header %}
{% include layout/page-header.html title=page-header description=page.page-header-description actions=page.page-header-actions pretitle=page.page-header-pretitle class=page.page-header-class%}
{% assign description = page.page-header-description | default: layout.page-header-description %}
{% assign actions = page.page-header-actions | default: layout.page-header-actions %}
{% assign pretitle = page.page-header-pretitle | default: layout.page-header-pretitle %}
{% assign class = page.page-header-class | default: layout.page-header-class %}
{% include layout/page-header.html title=page-header description=description actions=actions pretitle=pretitle class=class %}
{% endif %}
{{ content }}

5
src/pages/_includes/layout/css.html
View File

@@ -1,8 +1,9 @@
<!-- CSS files -->
{% assign libs = page.libs | default: layout.libs %}
{% if page.libs %}
{% if libs %}
{% for lib in site.data.libs.css %}
{% if page.libs contains lib[0] %}
{% if libs contains lib[0] %}
{% for file in lib[1] %}
<link href="{% if file contains 'http://' or file contains 'https://' %}{{ file }}{% else %}{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}{% if site.preview %}?{{ site.time | date: '%s' }}{% endif %}{% endif %}" rel="stylesheet"/>
{% endfor %}

7
src/pages/_includes/layout/js.html
View File

@@ -1,6 +1,8 @@
<!-- Libs JS -->
{% assign libs = page.libs | default: layout.libs %}
{% for lib in site.data.libs.js %}
{% if page.libs contains lib[0] or site.data.libs.global-libs contains lib[0] %}
{% if libs contains lib[0] or site.data.libs.global-libs contains lib[0] %}
{% for file in lib[1] %}
<script src="{% if file contains 'http://' or file contains 'https://' %}{{ file }}{% else %}{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}{% if site.preview %}?{{ site.time | date: '%s' }}{% endif %}{% endif %}"></script>
{% endfor %}
@@ -22,8 +24,9 @@
{% endfor %}
{% endremoveemptylines %}
{% assign libs = page.libs | default: layout.libs %}
{% for lib in site.data.libs.js-files %}
{% if page.libs contains lib[0] or site.data.libs.global-libs contains lib[0] %}
{% if libs contains lib[0] or site.data.libs.global-libs contains lib[0] %}
{% for file in lib[1] %}
{% assign filename = 'js/' | append: file | append: '.html' %}

2
src/pages/_includes/parts/form/selectgroup-project-manager.html
View File

@@ -12,7 +12,7 @@
</div>
<div class="form-selectgroup-label-content d-flex align-items-center">
{% include ui/avatar.html person=person class="mr-3" %}
<div class="lh-sm">
<div>
<div class="font-weight-medium">{{ person.full_name }}</div>
<div class="text-muted">{{ person.job_title }}</div>
</div>

8
src/pages/_includes/ui/form/input-file.html
View File

@@ -1,7 +1 @@
<div class="form-file">
<input type="file" class="form-file-input" id="customFile">
<label class="form-file-label" for="customFile">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
<input type="file" class="form-control" />

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

@@ -1,18 +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"/>
{% capture_once scripts %}
<script>
(function () {
/**
* Input mask
*/
var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'))
maskElementList.map(function (maskEl) {
return new IMask(maskEl, {
mask: maskEl.dataset.mask,
lazy: maskEl.dataset['mask-visible'] === 'true'
})
});
})();
</script>
{% endcapture_once %}

2
src/pages/_includes/ui/table.html
View File

@@ -25,7 +25,7 @@
<tr>
{% if include.avatars %}
<td {% if include.mobile %}data-label="Name"{% endif %}>
<div class="d-flex lh-sm py-1 align-items-center">
<div class="d-flex py-1 align-items-center">
{% include ui/avatar.html person-id=person.id class="mr-2" %}
<div class="flex-fill">
<div class="font-weight-medium">{{ person.full_name }}</div>

3
src/pages/_layouts/base.html
View File

@@ -1,12 +1,13 @@
<!doctype html>
{% include layout/banner.html %}
{% assign title = page.title | default: layout.title %}
<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"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>{% if page.title %}{{ page.title }} - {% endif %}{% if layout.title %}{{ layout.title }} - {% endif %}{% if site.title %}{{ site.title }} - {% endif %}{{ site.description }}</title>
<title>{% if title %}{{ title }} - {% endif %}{% if site.title %}{{ site.title }} - {% endif %}{{ site.description }}</title>
{% if jekyll.environment == 'production' %}
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

10
src/pages/_layouts/homepage.html Normal file
View File

@@ -0,0 +1,10 @@
---
title: Dashboard
layout: default
page-header: Dashboard
page-header-pretitle: Overview
page-header-actions: buttons
libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
---
{% include layout/homepage.html %}

1
src/pages/cards.html
View File

@@ -2,7 +2,6 @@
title: Cards
page-header: Cards
menu: base.cards
libs: imask
---
<div class="row">

4
src/pages/form-elements.html
View File

@@ -2,10 +2,10 @@
title: Form elements
page-header: Form elements
menu: forms
libs: jquery, nouislider, imask, autosize, selectize, flatpickr, tabler-flags, tabler-payments
libs: jquery, nouislider, autosize, selectize, flatpickr, tabler-flags, tabler-payments
---
<div class="row">
<div class="row row-cards">
<div class="col-12">
<form action="https://httpbin.org/post" method="post" class="card">
<div class="card-header">

8
src/pages/index.html
View File

@@ -1,10 +1,4 @@
---
title: Dashboard
page-header: Dashboard
page-header-pretitle: Overview
page-header-actions: buttons
menu: home
libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
layout: homepage
---
{% include layout/homepage.html %}

9
src/pages/layout-rtl.html
View File

@@ -1,11 +1,8 @@
---
title: Dashboard
page-header: Dashboard
page-header-pretitle: Overview
page-header-actions: buttons
rtl: true
menu: home
libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
rtl: true
layout: homepage
title: RTL mode
---
{% include layout/homepage.html %}

2
src/scss/_config.scss
View File

@@ -1,3 +1,5 @@
@import "~bootstrap/scss/functions";
@import "variables";
@import "utilities";
@import "mixins";

4
src/scss/_variables.scss
View File

@@ -503,7 +503,9 @@ $form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://w
$form-check-input-checked-border-color: $border-color-transparent !default;
$form-select-indicator-color: opacify($border-color, .24) !default;
$form-check-label-disabled-opacity: $text-muted-opacity;
$form-select-indicator-color: $border-color-dark !default;
$form-switch-width: 1.75rem !default;
$form-switch-padding-left: $form-switch-width + .5rem !default;

2
src/scss/layout/_footer.scss
View File

@@ -1,7 +1,7 @@
.footer {
border-top: 1px solid $footer-border-color;
background-color: $footer-bg;
padding: 1rem 0;
padding: 2rem 0;
color: $text-muted;
margin-bottom: (-$content-padding-y);

9
src/scss/ui/_buttons.scss
View File

@@ -24,7 +24,8 @@
svg {
width: 1.25rem;
height: 1.25rem;
margin: 0 .5rem 0 -.25rem;
margin: 0 .5rem 0;
margin-inline-start: -.25rem;
vertical-align: bottom;
}
@@ -32,11 +33,13 @@
width: 1.25rem;
height: 1.25rem;
vertical-align: text-top;
margin: 0 .5rem 0 -.5rem;
margin: 0 .5rem 0;
margin-inline-start: -.25rem;
}
.icon-right {
margin: 0 -.25rem 0 .5rem;
margin: 0 .5rem 0;
margin-inline-end: -.25rem;
}
.badge {

4
src/scss/ui/_forms.scss
View File

@@ -155,13 +155,13 @@ Form switch
user-select: none;
&.form-check-highlight .form-check-input:not(:checked) ~ .form-check-label {
opacity: .64;
opacity: $text-muted-opacity;
}
}
.form-check-input {
background-size: $form-check-input-width;
margin-top: .25rem;
margin-top: .125rem;
.form-switch & {
transition: .3s background-color, .3s background-position;

6
src/scss/ui/_type.scss
View File

@@ -10,8 +10,10 @@ a {
ul,
ol {
margin: 0 0 1rem 1rem;
padding: 0 0 0 1rem;
margin: 0 0 1rem 0;
margin-inline-start: 1rem;
padding: 0;
padding-inline-start: 1rem;
}
h1,

1
src/scss/ui/forms/_form-selectgroup.scss
View File

@@ -91,7 +91,6 @@ Select group
color: $primary;
background: rgba($primary, .04);
border-color: $input-focus-border-color;
box-shadow: 0 1px 1px 0 rgba($primary, .2);
}
.form-selectgroup-input:focus + .form-selectgroup-label {