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

datepicker, selectize fixes

Browse Source
This commit is contained in:
codecalm
2020-01-28 00:14:56 +01:00
parent ee91838e31
commit 8e6b7aa908
12 changed files with 219 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -115,6 +115,7 @@
"bootstrap": "twbs/bootstrap#af78de3",
"countup.js": "2.0.4",
"daterangepicker": "3.0.5",
"flatpickr": "^4.6.3",
"fullcalendar": "3.10.1",
"imask": "6.0.1",
"jquery": "3.4.1",
pages/_data/libs.json
+4 -4
View File
@@ -22,9 +22,9 @@
"@fullcalendar/timegrid/main.min.js",
"@fullcalendar/list/main.min.js"
],
"daterangepicker": [
"daterangepicker/moment.min.js",
"daterangepicker/daterangepicker.js"
"flatpickr": [
"flatpickr/dist/flatpickr.min.js",
"flatpickr/dist/plugins/rangePlugin.js"
],
"countup": "countup.js/dist/countUp.min.js",
"nouislider": "nouislider/distribute/nouislider.min.js"
@@ -38,7 +38,7 @@
"@fullcalendar/timegrid/main.min.css",
"@fullcalendar/list/main.min.css"
],
"daterangepicker": "daterangepicker/daterangepicker.css",
"flatpickr": "flatpickr/dist/flatpickr.min.css",
"nouislider": "nouislider/distribute/nouislider.min.css"
}
}
pages/_includes/forms/form-elements-2.html
+11
View File
@@ -1,3 +1,14 @@
<div class="mb-3">
<label class="form-label">Form control rounded</label>
<input type="text" class="form-control form-control-rounded mb-2" name="Form control rounded" placeholder="Text..">
{% include ui/form/input-icon.html input-class="form-control-rounded" %}
</div>
<div class="mb-3">
<label class="form-label">Form control flush</label>
<input type="text" class="form-control form-control-flush" name="Form control flush" placeholder="Text..">
</div>
<div class="mb-3">
<label class="form-label">Input group</label>
{% include ui/form/input-group.html prepend="@" placeholder="username" class="mb-2" %}
pages/_includes/forms/form-elements-6.html
+11 -12
View File
@@ -1,13 +1,23 @@
{% include parts/input-datalist.html %}
{% include parts/input-range.html %}
<div class="mb-3">
<label class="form-label">Datepicker</label>
{% include ui/form/calendar.html class="mb-2" %}
{% include ui/form/calendar.html id="time" layout="icon" %}
</div>
<div class="mb-3">
<label class="form-label">Inline datepicker</label>
{% include ui/form/calendar.html id="inline" inline=true %}
</div>
<div class="mb-3">
<label class="form-label">Progress</label>
{% include ui/progress.html class="mb-2" %}
{% include ui/progress.html indeterminate=true color="green" %}
</div>
<div class="mb-3">
<label class="form-label">Form buttons</label>
<div class="btn-list">
@@ -16,17 +26,6 @@
</div>
</div>
<div class="mb-3">
<label class="form-label">Form control rounded</label>
<input type="text" class="form-control form-control-rounded mb-2" name="Form control rounded" placeholder="Text..">
{% include ui/form/input-icon.html input-class="form-control-rounded" %}
</div>
<div class="mb-3">
<label class="form-label">Form control flush</label>
<input type="text" class="form-control form-control-flush" name="Form control flush" placeholder="Text..">
</div>
<div class="mb-3">
<label class="form-label">Tags input</label>
{% include ui/form/selectize.html key="tags" %}
pages/_includes/ui/form/calendar.html
+40
View File
@@ -0,0 +1,40 @@
{% assign type = include.type | default: 'date' %}
{% assign placeholder = include.placeholder | default: 'Select a date' %}
{% assign id = include.id | default: 'simple' %}
{% capture input %}
<input id="calendar-{{ id }}" type="{{ type }}" class="form-control{% if include.class %} {{ include.class }}{% endif %}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %} />
{% endcapture %}
{% if include.inline %}
<div id="calendar-{{ id }}"></div>
{% elsif include.layout == 'icon' %}
<div class="input-icon{% if include.class %} {{ include.class }}{% endif %}">
{{ input | replace: include.class, '' }}
<span class="input-icon-addon">{% include ui/icon.html icon="calendar" %}</span>
</div>
{% elsif include.layout == 'icon-prepend' %}
<div class="input-icon{% if include.class %} {{ include.class }}{% endif %}">
<span class="input-icon-addon">{% include ui/icon.html icon="calendar" %}</span>
{{ input | replace: include.class, '' }}
</div>
{% else %}
{{ input }}
{% endif %}
{% append_lib flatpickr %}
{% capture_global scripts %}
<script>
document.addEventListener("DOMContentLoaded", function () {
{% if jekyll.environment == 'development' %}
window.tabler_calendar = window.tabler_calendar || {};
{% endif %}
{% if jekyll.environment == 'development' %}window.tabler_calendar["chart-{{ id }}"] = {% endif %}flatpickr(document.getElementById('calendar-{{ id }}'), {
{% if include.inline %}
inline: true,
{% endif %}
});
});
</script>
{% endcapture_global %}
pages/tmp.html
+8
View File
@@ -3,6 +3,14 @@ menu: a.b.c
---
<div class="row">
<div class="col-xl-4">
<div class="card">
<div class="card-body">
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
{% assign person = site.data.people[0] %}
<div class="card">
scss/_tabler-core.scss
+63
View File
@@ -0,0 +1,63 @@
@import "config";
@import "bootstrap-components";
@import "fonts/webfonts";
@import "layout/core";
@import "layout/layout";
@import "layout/navbar";
@import "layout/sidenav";
@import "layout/page";
@import "ui/alerts";
@import "ui/avatars";
@import "ui/badges";
@import "ui/breadcrumbs";
@import "ui/buttons";
@import "ui/calendars";
@import "ui/cards";
@import "ui/close";
@import "ui/dropdowns";
@import "ui/empty";
@import "ui/grid";
@import "ui/highlight";
@import "ui/icons";
@import "ui/forms";
@import "ui/forms/form-icon";
@import "ui/forms/form-colorinput";
@import "ui/forms/form-imagecheck";
@import "ui/forms/form-selectgroup";
@import "ui/forms/form-custom";
@import "ui/forms/validation";
@import "ui/legend";
@import "ui/lists";
@import "ui/loaders";
@import "ui/login";
@import "ui/modals";
@import "ui/nav";
@import "ui/stars";
@import "ui/pagination";
@import "ui/popovers";
@import "ui/progress";
@import "ui/ribbons";
@import "ui/stamps";
@import "ui/steps";
@import "ui/tables";
@import "ui/toasts";
@import "ui/toolbar";
@import "ui/typo";
@import "ui/charts";
@import "ui/examples";
@import "utils/border";
@import "utils/background";
@import "utils/colors";
@import "utils/scroll";
@import "utils/sizing";
@import "utils/opacity";
@import "utils/shadow";
@import "rtl";
@import "debug";
scss/_tabler-vendors.scss
+7
View File
@@ -0,0 +1,7 @@
@import "vendor/pace";
@import "vendor/selectize";
@import "vendor/jqvmap";
@import "vendor/apexcharts";
@import "vendor/fullcalendar";
@import "vendor/flatpickr";
@import "vendor/nouislider";
scss/tabler.scss
+3 -69
View File
@@ -5,75 +5,9 @@
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
*/
@import "config";
@import "bootstrap-components";
@import "fonts/webfonts";
@import "layout/core";
@import "layout/layout";
@import "layout/navbar";
@import "layout/sidenav";
@import "layout/page";
@import "ui/alerts";
@import "ui/avatars";
@import "ui/badges";
@import "ui/breadcrumbs";
@import "ui/buttons";
@import "ui/calendars";
@import "ui/cards";
@import "ui/close";
@import "ui/dropdowns";
@import "ui/empty";
@import "ui/grid";
@import "ui/highlight";
@import "ui/icons";
@import "ui/forms";
@import "ui/forms/form-icon";
@import "ui/forms/form-colorinput";
@import "ui/forms/form-imagecheck";
@import "ui/forms/form-selectgroup";
@import "ui/forms/form-custom";
@import "ui/forms/validation";
@import "ui/legend";
@import "ui/lists";
@import "ui/loaders";
@import "ui/login";
@import "ui/modals";
@import "ui/nav";
@import "ui/stars";
@import "ui/pagination";
@import "ui/popovers";
@import "ui/progress";
@import "ui/ribbons";
@import "ui/stamps";
@import "ui/steps";
@import "ui/tables";
@import "ui/toasts";
@import "ui/toolbar";
@import "ui/typo";
@import "ui/charts";
@import "ui/examples";
@import "vendor/pace";
@import "vendor/selectize";
@import "vendor/jqvmap";
@import "vendor/apexcharts";
@import "vendor/fullcalendar";
@import "vendor/nouislider";
@import "utils/border";
@import "utils/background";
@import "utils/colors";
@import "utils/scroll";
@import "utils/sizing";
@import "utils/opacity";
@import "utils/shadow";
@import "rtl";
@import "debug";
@import "tabler-core";
@import "tabler-vendors";
scss/ui/forms/_form-icon.scss
+1 -5
View File
@@ -24,11 +24,7 @@ Icon input
min-width: 2.5rem;
color: $text-muted;
pointer-events: none;
svg {
width: 1rem;
height: 1rem;
}
font-size: 1.2em;
&:last-child {
right: 0;
scss/vendor/_flatpickr.scss
Vendored
+57
View File
@@ -0,0 +1,57 @@
.flatpickr-input {
background: $input-bg !important;
}
.flatpickr-calendar {
border: $input-border-width solid $input-border-color;
border-radius: $input-border-radius;
padding: .5rem;
.flatpickr-innerContainer,
.flatpickr-rContainer,
.dayContainer,
.flatpickr-days {
width: 100%;
}
&.inline {
width: 100%;
box-shadow: none;
.dayContainer,
.flatpickr-day {
max-width: 100%;
min-width: 0;
}
}
}
.flatpickr-day {
color: inherit;
border-radius: $border-radius;
user-select: none;
&.today {
border-color: $border-color;
}
&.selected {
background-color: $primary;
}
}
span.flatpickr-weekday {
@include subheader;
}
.flatpickr-months {
.flatpickr-monthDropdown-months {
appearance: none;
font-weight: inherit;
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
display: block;
}
}
scss/vendor/_selectize.scss
Vendored
+13 -7
View File
@@ -2,13 +2,19 @@
padding: 0;
border: 0;
&.multi .selectize-input > div {
font-size: $h5-font-size;
margin: 0 8px 2px 0;
padding: 2px 8px;
border-radius: $border-radius;
background-color: $gray-200;
color: inherit;
&.multi .selectize-input {
&.has-items {
padding-left: 6px;
}
> div {
font-size: $h5-font-size;
margin: 0 6px 2px 0;
padding: 2px 8px;
border-radius: $border-radius;
background-color: $gray-200;
color: inherit;
}
}
.remove {