mirror of
https://github.com/tabler/tabler.git
synced 2026-08-10 21:32:22 +04:00
remove selectize
This commit is contained in:
codecalm
@@ -94,7 +94,6 @@
|
||||
"popper.js": "^1.16.1",
|
||||
"rollup-plugin-cleanup": "^3.2.1",
|
||||
"rollup-plugin-commonjs": "^10.1.0",
|
||||
"selectize": "^0.12.6",
|
||||
"@tabler/icons": "^1.38.1"
|
||||
},
|
||||
"resolutions": {
|
||||
|
||||
@@ -8,7 +8,6 @@
|
||||
},
|
||||
"js": {
|
||||
"bootstrap": "bootstrap/dist/js/bootstrap.bundle.min.js",
|
||||
"selectize": "selectize/dist/js/standalone/selectize.min.js",
|
||||
"apexcharts": "apexcharts/dist/apexcharts.min.js",
|
||||
"flatpickr": [
|
||||
"flatpickr/dist/flatpickr.min.js",
|
||||
|
||||
@@ -15,22 +15,6 @@ All options and features can be found [**here**](https://refreshless.com/nouisli
|
||||
{% endcapture %}
|
||||
{% include example.html code=code %}
|
||||
|
||||
That's how values are displayed:
|
||||
|
||||
```js
|
||||
/* Demo only */
|
||||
|
||||
$(document).ready(function() {
|
||||
/* Sliders value */
|
||||
let slidersText = document.querySelectorAll('[demo-slider]');
|
||||
for(let i = 0;i<slidersText.length;i++){
|
||||
window[slidersText[i].getAttribute("demo-slider")].on('update',function(values){
|
||||
slidersText[i].innerHTML = values.join(' | ');
|
||||
})
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
## Basic options
|
||||
|
||||
|
||||
@@ -81,79 +81,3 @@
|
||||
background: #5eba00;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
|
||||
|
||||
var $body = $('body'),
|
||||
$html = $('html');
|
||||
|
||||
$body
|
||||
.on('click', '[data-debug="dark"]', function (e) {
|
||||
$body.toggleClass('theme-dark');
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
})
|
||||
.on('click', '[data-debug="code"]', function (e) {
|
||||
$body.toggleClass('show-debug-code');
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
})
|
||||
.on('click', '[data-debug="folded"]', function (e) {
|
||||
$('.sidenav').toggleClass('sidenav-folded');
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
})
|
||||
.on('click', '[data-debug="fullscreen"]', function (e) {
|
||||
tabler.toggleFullscreen();
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
})
|
||||
.on('click', '[data-debug="header-sticky"]', function (e) {
|
||||
$body.toggleClass('header-sticky');
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
})
|
||||
.on('click', '[data-debug="rtl"]', function (e) {
|
||||
if ($html.attr('dir') === 'rtl') {
|
||||
$html.attr('dir', 'ltr');
|
||||
} else {
|
||||
$html.attr('dir', 'rtl');
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
$('.card').each(function () {
|
||||
var $card = $(this),
|
||||
htmlCode = $card[0].innerHTML.replace(/(^[ \t]*\n)/gm, '');
|
||||
|
||||
var $button = $('<div class="card-debug"><a href="#" class="text-muted" data-code>code</a></div>'),
|
||||
$codeLink = $button.find('[data-code]');
|
||||
|
||||
$codeLink
|
||||
// .data('htmlCode', htmlCode)
|
||||
.on('click', function (e) {
|
||||
|
||||
var $modal = $('<div class="modal hide"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-body"><pre class="m-0"></pre></div></div></div></div>');
|
||||
$modal.find('pre').text(htmlCode);
|
||||
$('body').append($modal);
|
||||
console.log();
|
||||
|
||||
$modal.modal('show');
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
$card.prepend($button);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -30,6 +30,7 @@
|
||||
</select>
|
||||
|
||||
{% capture_global scripts %}
|
||||
{% comment %}
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('#select-{{ id }}').selectize({
|
||||
@@ -62,4 +63,5 @@
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endcomment %}
|
||||
{% endcapture_global %}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Form elements
|
||||
page-header: Form elements
|
||||
menu: forms
|
||||
libs: nouislider, autosize, selectize, flatpickr, tabler-flags, tabler-payments
|
||||
libs: nouislider, autosize, flatpickr, tabler-flags, tabler-payments
|
||||
---
|
||||
|
||||
<div class="row row-cards">
|
||||
|
||||
+1
-2
@@ -95,8 +95,7 @@
|
||||
}
|
||||
|
||||
.list-group-item,
|
||||
.form-fieldset,
|
||||
.selectize-input {
|
||||
.form-fieldset {
|
||||
border-color: $input-border-color;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
@import "config";
|
||||
|
||||
@import "vendor/selectize";
|
||||
@import "vendor/apexcharts";
|
||||
@import "vendor/fullcalendar";
|
||||
@import "vendor/flatpickr";
|
||||
|
||||
Vendored
-101
@@ -1,101 +0,0 @@
|
||||
.selectize-control {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
height: auto;
|
||||
|
||||
&.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: $min-white;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.remove {
|
||||
font-size: inherit !important;
|
||||
font-weight: normal !important;
|
||||
border-left: 0 !important;
|
||||
color: $text-muted !important;
|
||||
}
|
||||
|
||||
@each $state, $data in $form-validation-states {
|
||||
$color: map-get($data, 'color');
|
||||
|
||||
&.is-#{$state} {
|
||||
padding: 0;
|
||||
|
||||
.selectize-input {
|
||||
border-color: $color;
|
||||
|
||||
&.focus {
|
||||
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
||||
}
|
||||
}
|
||||
|
||||
.selectize-dropdown {
|
||||
background: none;
|
||||
background-color: inherit;
|
||||
border-color: $border-color;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selectize-input {
|
||||
display: flex !important;
|
||||
border: 1px solid $border-color;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
font-size: $input-font-size;
|
||||
box-shadow: none;
|
||||
line-height: $input-line-height;
|
||||
background-color: inherit !important;
|
||||
color: inherit !important;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&.full {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
&.dropdown-active {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.selectize-control.single & {
|
||||
background: escape-svg($form-select-indicator) no-repeat $form-select-bg-position/$form-select-bg-size;
|
||||
}
|
||||
|
||||
&.focus {
|
||||
border-color: $form-select-focus-border-color;
|
||||
box-shadow: $form-select-focus-box-shadow;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.selectize-dropdown {
|
||||
height: auto;
|
||||
background: $form-select-bg;
|
||||
padding: $input-padding-y 0;
|
||||
margin-top: 1px;
|
||||
|
||||
.option,
|
||||
.option-header {
|
||||
padding: .25rem $input-padding-x;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: $hover-bg;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user