diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml new file mode 100644 index 000000000..5067a374a --- /dev/null +++ b/.github/workflows/codeql-analysis.yml @@ -0,0 +1,67 @@ +# For most projects, this workflow file will not need changing; you simply need +# to commit it to your repository. +# +# You may wish to alter this file to override the set of languages analyzed, +# or to provide custom queries or build logic. +# +# ******** NOTE ******** +# We have attempted to detect the languages in your repository. Please check +# the `language` matrix defined below to confirm you have the correct set of +# supported CodeQL languages. +# +name: "CodeQL" + +on: + push: + branches: [ dev, master ] + pull_request: + # The branches below must be a subset of the branches above + branches: [ dev ] + schedule: + - cron: '32 8 * * 2' + +jobs: + analyze: + name: Analyze + runs-on: ubuntu-latest + + strategy: + fail-fast: false + matrix: + language: [ 'javascript' ] + # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ] + # Learn more: + # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed + + steps: + - name: Checkout repository + uses: actions/checkout@v2 + + # Initializes the CodeQL tools for scanning. + - name: Initialize CodeQL + uses: github/codeql-action/init@v1 + with: + languages: ${{ matrix.language }} + # If you wish to specify custom queries, you can do so here or in a config file. + # By default, queries listed here will override any specified in a config file. + # Prefix the list here with "+" to use these queries and those in the config file. + # queries: ./path/to/local/query, your-org/your-repo/queries@main + + # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). + # If this step fails, then you should remove it and run the build manually (see below) + - name: Autobuild + uses: github/codeql-action/autobuild@v1 + + # ℹ️ Command-line programs to run using the OS shell. + # 📚 https://git.io/JvXDl + + # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines + # and modify them (or add more) to build your code if your project + # uses a compiled language + + #- run: | + # make bootstrap + # make release + + - name: Perform CodeQL Analysis + uses: github/codeql-action/analyze@v1 diff --git a/Gemfile b/Gemfile index e4104f6a2..d533afffe 100644 --- a/Gemfile +++ b/Gemfile @@ -1,6 +1,6 @@ source "https://rubygems.org" -gem "jekyll", "4.1.1" +gem "jekyll", "4.2.0" group :jekyll_plugins do gem "jekyll-random" diff --git a/LICENSE b/LICENSE index ec54a05c5..e2807c0cd 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2018-2019 The Tabler Authors +Copyright (c) 2018-2021 The Tabler Authors Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index db16412c0..015fe9284 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,31 @@ -# Tabler - +

+A premium and open source dashboard template with a responsive and high-quality UI.

A premium and open source dashboard template with a responsive and high-quality UI. +

-View Demo | Download ZIP +

+NPM version +NPM Downloads +Tabler preview +License +Tabler preview +
+GitHub stars +

-![Tabler preview](/src/static/tabler-preview.png?raw=true) +

+ + + +

-## Status +## Preview - Total Downloads License Latest Release +Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern, user-friendly design you can create a fully functional interface that users will love! Choose the layouts and components you need and customize them to make your design consistent and eye-catching. Every component has been created with attention to detail to make your interface beautiful! Show me demo + +Tabler preview ## Features @@ -24,7 +39,6 @@ We've created this admin panel for everyone who wants to create templates based * **Demo pages**: Tabler features over 20 individual pages using various components, which gives you the freedom to choose and combine. All components can vary in color and styling that you can easily modify using Sass. Sky is the limit! * **Single Page Application versions:** [Tabler React](https://github.com/tabler/tabler-react) has React components for Tabler. - ## Sponsor Tabler Sponsor Tabler diff --git a/_config.yml b/_config.yml index 4f930918a..0fad267a7 100644 --- a/_config.yml +++ b/_config.yml @@ -16,6 +16,7 @@ title: Tabler description: Premium and Open Source dashboard template with responsive and high quality UI. homepage: https://tabler.io github-url: https://github.com/tabler/tabler +github-sponsors-url: https://github.com/sponsors/codecalm changelog-url: https://github.com/tabler/tabler/releases sponsor-url: https://github.com/sponsors/codecalm preview-url: https://preview.tabler.io @@ -23,6 +24,7 @@ preview-url: https://preview.tabler.io mapbox-key: pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ google-maps-key: AIzaSyAr5mRB4U1KRkVznIrDWEvZjroYcD202DI google-maps-dev-key: AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw +npm-package: "@tabler/core" debug: false @@ -34,7 +36,7 @@ plugins: - jekyll-timeago - jekyll-redirect-from -tabler-plugins: +tabler-css-plugins: - tabler-flags - tabler-payments - tabler-vendors @@ -62,7 +64,6 @@ defaults: path: "*.md" values: layout: markdown - - scope: type: "pages" values: @@ -131,7 +132,7 @@ variants: - name: danger icon: alert-circle -button-variants: +theme-colors: primary: class: primary title: Primary diff --git a/demo/accordion.html b/demo/accordion.html index a6a3f0a84..82bec2482 100644 --- a/demo/accordion.html +++ b/demo/accordion.html @@ -1,10 +1,10 @@ @@ -21,7 +21,7 @@ -
+
- -
-
- This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+
+
+
+

+ +

+
+
+ This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
-
-
-

- -

-
-
- This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+

+ +

+
+
+ This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
-
-
-

- -

-
-
- This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+

+ +

+
+
+ This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
-
-
-

- -

-
@@ -422,7 +449,6 @@
- diff --git a/demo/activity.html b/demo/activity.html index f9a3b9181..3f4ea962f 100644 --- a/demo/activity.html +++ b/demo/activity.html @@ -1,10 +1,10 @@ @@ -21,7 +21,7 @@ -
+
-

- - Tabler - -

-
-
- - - - -
-
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. -
-
-
-
-
- - -
-
Paweł Kuna
-
UI Designer
-
- -
- Set status - Profile & account - Feedback -
- Settings - Logout -
-
-
-
-
-
- -
-
-
- -
-
-
-

- Heatmap Charts -

-
-
-
-
-
-
-
-

Basic Heatmap - Single Series

-
-
-
-
-
-
-
-

Heatmap - Multiple series

-
-
-
-
-
-
-
-

Heatmap - Labels included

-
-
-
-
-
-
-
-

Heatmap - Color range

-
-
-
-
-
-
- -
-
- - - - - - - - - - - \ No newline at end of file diff --git a/demo/charts.html b/demo/charts.html index bef594fe1..29913b035 100644 --- a/demo/charts.html +++ b/demo/charts.html @@ -1,10 +1,10 @@ @@ -21,7 +21,7 @@ -
+
\n \n ",this.options.singleMode){if(1===this.datePicked.length){var e=this.datePicked[0].format(this.options.format,this.options.lang);t.querySelector("."+a.previewDateRange).innerHTML=e}}else if(1===this.datePicked.length&&t.querySelector("."+a.buttonApply).setAttribute("disabled",""),2===this.datePicked.length){e=this.datePicked[0].format(this.options.format,this.options.lang);var i=this.datePicked[1].format(this.options.format,this.options.lang);t.querySelector("."+a.previewDateRange).innerHTML=""+e+this.options.delimiter+i}return this.emit("render:footer",t),t},e.prototype.renderWeekNumber=function(t){var e=document.createElement("div"),i=t.getWeek(this.options.firstDay);return e.className=a.weekNumber,e.innerHTML=53===i&&0===t.getMonth()?"53 / 1":i,e},e.prototype.renderTooltip=function(){var t=document.createElement("div");return t.className=a.containerTooltip,t},e.prototype.weekdayName=function(t,e){return void 0===e&&(e="short"),new Date(1970,0,t,12,0,0,0).toLocaleString(this.options.lang,{weekday:e})},e.prototype.calcSkipDays=function(t){var e=t.getDay()-this.options.firstDay;return e<0&&(e+=7),e},e}(s.LPCore);e.Calendar=c},function(t,e,i){"use strict";var n,o=this&&this.__extends||(n=function(t,e){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])})(t,e)},function(t,e){function i(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}),s=this&&this.__assign||function(){return(s=Object.assign||function(t){for(var e,i=1,n=arguments.length;i',nextMonth:'',reset:'\n \n \n '},tooltipText:{one:"day",other:"days"}},i.options=s(s({},i.options),e.element.dataset),Object.keys(i.options).forEach((function(t){"true"!==i.options[t]&&"false"!==i.options[t]||(i.options[t]="true"===i.options[t])}));var n=s(s({},i.options.dropdowns),e.dropdowns),o=s(s({},i.options.buttonText),e.buttonText),r=s(s({},i.options.tooltipText),e.tooltipText);i.options=s(s({},i.options),e),i.options.dropdowns=s({},n),i.options.buttonText=s({},o),i.options.tooltipText=s({},r),i.options.elementEnd||(i.options.allowRepick=!1),i.options.lockDays.length&&(i.options.lockDays=a.DateTime.convertArray(i.options.lockDays,i.options.lockDaysFormat)),i.options.highlightedDays.length&&(i.options.highlightedDays=a.DateTime.convertArray(i.options.highlightedDays,i.options.highlightedDaysFormat));var l=i.parseInput(),c=l[0],h=l[1];i.options.startDate&&(i.options.singleMode||i.options.endDate)&&(c=new a.DateTime(i.options.startDate,i.options.format,i.options.lang)),c&&i.options.endDate&&(h=new a.DateTime(i.options.endDate,i.options.format,i.options.lang)),c instanceof a.DateTime&&!isNaN(c.getTime())&&(i.options.startDate=c),i.options.startDate&&h instanceof a.DateTime&&!isNaN(h.getTime())&&(i.options.endDate=h),!i.options.singleMode||i.options.startDate instanceof a.DateTime||(i.options.startDate=null),i.options.singleMode||i.options.startDate instanceof a.DateTime&&i.options.endDate instanceof a.DateTime||(i.options.startDate=null,i.options.endDate=null);for(var p=0;pwindow.innerHeight,c=e.top+s-i.height>=i.height;l&&c&&(r=e.top+s-i.height)}if(/left|right/.test(n[0])||n[1]&&"auto"!==n[1]&&/left|right/.test(n[1]))a=/left|right/.test(n[0])?e[n[0]]+o:e[n[1]]+o,"right"!==n[0]&&"right"!==n[1]||(a-=i.width);else{a=e.left+o;l=e.left+i.width>window.innerWidth;var h=e.right+o-i.width>=0;l&&h&&(a=e.right+o-i.width)}return{left:a,top:r}},e}(r.EventEmitter);e.LPCore=c},function(t,e,i){"use strict";var n,o="object"==typeof Reflect?Reflect:null,s=o&&"function"==typeof o.apply?o.apply:function(t,e,i){return Function.prototype.apply.call(t,e,i)};n=o&&"function"==typeof o.ownKeys?o.ownKeys:Object.getOwnPropertySymbols?function(t){return Object.getOwnPropertyNames(t).concat(Object.getOwnPropertySymbols(t))}:function(t){return Object.getOwnPropertyNames(t)};var r=Number.isNaN||function(t){return t!=t};function a(){a.init.call(this)}t.exports=a,a.EventEmitter=a,a.prototype._events=void 0,a.prototype._eventsCount=0,a.prototype._maxListeners=void 0;var l=10;function c(t){return void 0===t._maxListeners?a.defaultMaxListeners:t._maxListeners}function h(t,e,i,n){var o,s,r,a;if("function"!=typeof i)throw new TypeError('The "listener" argument must be of type Function. Received type '+typeof i);if(void 0===(s=t._events)?(s=t._events=Object.create(null),t._eventsCount=0):(void 0!==s.newListener&&(t.emit("newListener",e,i.listener?i.listener:i),s=t._events),r=s[e]),void 0===r)r=s[e]=i,++t._eventsCount;else if("function"==typeof r?r=s[e]=n?[i,r]:[r,i]:n?r.unshift(i):r.push(i),(o=c(t))>0&&r.length>o&&!r.warned){r.warned=!0;var l=new Error("Possible EventEmitter memory leak detected. "+r.length+" "+String(e)+" listeners added. Use emitter.setMaxListeners() to increase limit");l.name="MaxListenersExceededWarning",l.emitter=t,l.type=e,l.count=r.length,a=l,console&&console.warn&&console.warn(a)}return t}function p(){for(var t=[],e=0;e0&&(r=e[0]),r instanceof Error)throw r;var a=new Error("Unhandled error."+(r?" ("+r.message+")":""));throw a.context=r,a}var l=o[t];if(void 0===l)return!1;if("function"==typeof l)s(l,this,e);else{var c=l.length,h=f(l,c);for(i=0;i=0;s--)if(i[s]===e||i[s].listener===e){r=i[s].listener,o=s;break}if(o<0)return this;0===o?i.shift():function(t,e){for(;e+1=0;n--)this.removeListener(t,e[n]);return this},a.prototype.listeners=function(t){return u(this,t,!0)},a.prototype.rawListeners=function(t){return u(this,t,!1)},a.listenerCount=function(t,e){return"function"==typeof t.listenerCount?t.listenerCount(e):m.call(t,e)},a.prototype.listenerCount=m,a.prototype.eventNames=function(){return this._eventsCount>0?n(this._events):[]}},function(t,e,i){(e=i(9)(!1)).push([t.i,':root{--litepicker-container-months-color-bg: #fff;--litepicker-container-months-box-shadow-color: #ddd;--litepicker-footer-color-bg: #fafafa;--litepicker-footer-box-shadow-color: #ddd;--litepicker-tooltip-color-bg: #fff;--litepicker-month-header-color: #333;--litepicker-button-prev-month-color: #9e9e9e;--litepicker-button-next-month-color: #9e9e9e;--litepicker-button-prev-month-color-hover: #2196f3;--litepicker-button-next-month-color-hover: #2196f3;--litepicker-month-width: calc(var(--litepicker-day-width) * 7);--litepicker-month-weekday-color: #9e9e9e;--litepicker-month-week-number-color: #9e9e9e;--litepicker-day-width: 38px;--litepicker-day-color: #333;--litepicker-day-color-hover: #2196f3;--litepicker-is-today-color: #f44336;--litepicker-is-in-range-color: #bbdefb;--litepicker-is-locked-color: #9e9e9e;--litepicker-is-start-color: #fff;--litepicker-is-start-color-bg: #2196f3;--litepicker-is-end-color: #fff;--litepicker-is-end-color-bg: #2196f3;--litepicker-button-cancel-color: #fff;--litepicker-button-cancel-color-bg: #9e9e9e;--litepicker-button-apply-color: #fff;--litepicker-button-apply-color-bg: #2196f3;--litepicker-button-reset-color: #909090;--litepicker-button-reset-color-hover: #2196f3;--litepicker-highlighted-day-color: #333;--litepicker-highlighted-day-color-bg: #ffeb3b}.show-week-numbers{--litepicker-month-width: calc(var(--litepicker-day-width) * 8)}.litepicker{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;font-size:0.8em;display:none}.litepicker button{border:none;background:none}.litepicker .container__main{display:-webkit-box;display:-ms-flexbox;display:flex}.litepicker .container__months{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;background-color:var(--litepicker-container-months-color-bg);border-radius:5px;-webkit-box-shadow:0 0 5px var(--litepicker-container-months-box-shadow-color);box-shadow:0 0 5px var(--litepicker-container-months-box-shadow-color);width:calc(var(--litepicker-month-width) + 10px);-webkit-box-sizing:content-box;box-sizing:content-box}.litepicker .container__months.columns-2{width:calc((var(--litepicker-month-width) * 2) + 20px)}.litepicker .container__months.columns-3{width:calc((var(--litepicker-month-width) * 3) + 30px)}.litepicker .container__months.columns-4{width:calc((var(--litepicker-month-width) * 4) + 40px)}.litepicker .container__months.split-view .month-item-header .button-previous-month,.litepicker .container__months.split-view .month-item-header .button-next-month{visibility:visible}.litepicker .container__months .month-item{padding:5px;width:var(--litepicker-month-width);-webkit-box-sizing:content-box;box-sizing:content-box}.litepicker .container__months .month-item-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;font-weight:500;padding:10px 5px;text-align:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--litepicker-month-header-color)}.litepicker .container__months .month-item-header div{-webkit-box-flex:1;-ms-flex:1;flex:1}.litepicker .container__months .month-item-header div>.month-item-name{margin-right:5px}.litepicker .container__months .month-item-header div>.month-item-year{padding:0}.litepicker .container__months .month-item-header .reset-button{color:var(--litepicker-button-reset-color)}.litepicker .container__months .month-item-header .reset-button>svg{fill:var(--litepicker-button-reset-color)}.litepicker .container__months .month-item-header .reset-button *{pointer-events:none}.litepicker .container__months .month-item-header .reset-button:hover{color:var(--litepicker-button-reset-color-hover)}.litepicker .container__months .month-item-header .reset-button:hover>svg{fill:var(--litepicker-button-reset-color-hover)}.litepicker .container__months .month-item-header .button-previous-month,.litepicker .container__months .month-item-header .button-next-month{visibility:hidden;text-decoration:none;padding:3px 5px;border-radius:3px;-webkit-transition:color 0.3s, border 0.3s;transition:color 0.3s, border 0.3s;cursor:default}.litepicker .container__months .month-item-header .button-previous-month *,.litepicker .container__months .month-item-header .button-next-month *{pointer-events:none}.litepicker .container__months .month-item-header .button-previous-month{color:var(--litepicker-button-prev-month-color)}.litepicker .container__months .month-item-header .button-previous-month>svg,.litepicker .container__months .month-item-header .button-previous-month>img{fill:var(--litepicker-button-prev-month-color)}.litepicker .container__months .month-item-header .button-previous-month:hover{color:var(--litepicker-button-prev-month-color-hover)}.litepicker .container__months .month-item-header .button-previous-month:hover>svg{fill:var(--litepicker-button-prev-month-color-hover)}.litepicker .container__months .month-item-header .button-next-month{color:var(--litepicker-button-next-month-color)}.litepicker .container__months .month-item-header .button-next-month>svg,.litepicker .container__months .month-item-header .button-next-month>img{fill:var(--litepicker-button-next-month-color)}.litepicker .container__months .month-item-header .button-next-month:hover{color:var(--litepicker-button-next-month-color-hover)}.litepicker .container__months .month-item-header .button-next-month:hover>svg{fill:var(--litepicker-button-next-month-color-hover)}.litepicker .container__months .month-item-weekdays-row{display:-webkit-box;display:-ms-flexbox;display:flex;justify-self:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;color:var(--litepicker-month-weekday-color)}.litepicker .container__months .month-item-weekdays-row>div{padding:5px 0;font-size:85%;-webkit-box-flex:1;-ms-flex:1;flex:1;width:var(--litepicker-day-width);text-align:center}.litepicker .container__months .month-item:first-child .button-previous-month{visibility:visible}.litepicker .container__months .month-item:last-child .button-next-month{visibility:visible}.litepicker .container__months .month-item.no-previous-month .button-previous-month{visibility:hidden}.litepicker .container__months .month-item.no-next-month .button-next-month{visibility:hidden}.litepicker .container__days{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-self:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:center;-webkit-box-sizing:content-box;box-sizing:content-box}.litepicker .container__days>div,.litepicker .container__days>a{padding:5px 0;width:var(--litepicker-day-width)}.litepicker .container__days .day-item{color:var(--litepicker-day-color);text-align:center;text-decoration:none;border-radius:3px;-webkit-transition:color 0.3s, border 0.3s;transition:color 0.3s, border 0.3s;cursor:default}.litepicker .container__days .day-item:hover{color:var(--litepicker-day-color-hover);-webkit-box-shadow:inset 0 0 0 1px var(--litepicker-day-color-hover);box-shadow:inset 0 0 0 1px var(--litepicker-day-color-hover)}.litepicker .container__days .day-item.is-today{color:var(--litepicker-is-today-color)}.litepicker .container__days .day-item.is-locked{color:var(--litepicker-is-locked-color)}.litepicker .container__days .day-item.is-locked:hover{color:var(--litepicker-is-locked-color);-webkit-box-shadow:none;box-shadow:none;cursor:default}.litepicker .container__days .day-item.is-in-range{background-color:var(--litepicker-is-in-range-color);border-radius:0}.litepicker .container__days .day-item.is-start-date{color:var(--litepicker-is-start-color);background-color:var(--litepicker-is-start-color-bg);border-top-left-radius:5px;border-bottom-left-radius:5px;border-top-right-radius:0;border-bottom-right-radius:0}.litepicker .container__days .day-item.is-start-date.is-flipped{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:5px;border-bottom-right-radius:5px}.litepicker .container__days .day-item.is-end-date{color:var(--litepicker-is-end-color);background-color:var(--litepicker-is-end-color-bg);border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:5px;border-bottom-right-radius:5px}.litepicker .container__days .day-item.is-end-date.is-flipped{border-top-left-radius:5px;border-bottom-left-radius:5px;border-top-right-radius:0;border-bottom-right-radius:0}.litepicker .container__days .day-item.is-start-date.is-end-date{border-top-left-radius:5px;border-bottom-left-radius:5px;border-top-right-radius:5px;border-bottom-right-radius:5px}.litepicker .container__days .day-item.is-highlighted{color:var(--litepicker-highlighted-day-color);background-color:var(--litepicker-highlighted-day-color-bg)}.litepicker .container__days .week-number{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:var(--litepicker-month-week-number-color);font-size:85%}.litepicker .container__footer{text-align:right;padding:10px 5px;margin:0 5px;background-color:var(--litepicker-footer-color-bg);-webkit-box-shadow:inset 0px 3px 3px 0px var(--litepicker-footer-box-shadow-color);box-shadow:inset 0px 3px 3px 0px var(--litepicker-footer-box-shadow-color);border-bottom-left-radius:5px;border-bottom-right-radius:5px}.litepicker .container__footer .preview-date-range{margin-right:10px;font-size:90%}.litepicker .container__footer .button-cancel{background-color:var(--litepicker-button-cancel-color-bg);color:var(--litepicker-button-cancel-color);border:0;padding:3px 7px 4px;border-radius:3px}.litepicker .container__footer .button-cancel *{pointer-events:none}.litepicker .container__footer .button-apply{background-color:var(--litepicker-button-apply-color-bg);color:var(--litepicker-button-apply-color);border:0;padding:3px 7px 4px;border-radius:3px;margin-left:10px;margin-right:10px}.litepicker .container__footer .button-apply:disabled{opacity:0.7}.litepicker .container__footer .button-apply *{pointer-events:none}.litepicker .container__tooltip{position:absolute;margin-top:-4px;padding:4px 8px;border-radius:4px;background-color:var(--litepicker-tooltip-color-bg);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25);box-shadow:0 1px 3px rgba(0,0,0,0.25);white-space:nowrap;font-size:11px;pointer-events:none;visibility:hidden}.litepicker .container__tooltip:before{position:absolute;bottom:-5px;left:calc(50% - 5px);border-top:5px solid rgba(0,0,0,0.12);border-right:5px solid transparent;border-left:5px solid transparent;content:""}.litepicker .container__tooltip:after{position:absolute;bottom:-4px;left:calc(50% - 4px);border-top:4px solid var(--litepicker-tooltip-color-bg);border-right:4px solid transparent;border-left:4px solid transparent;content:""}\n',""]),e.locals={showWeekNumbers:"show-week-numbers",litepicker:"litepicker",containerMain:"container__main",containerMonths:"container__months",columns2:"columns-2",columns3:"columns-3",columns4:"columns-4",splitView:"split-view",monthItemHeader:"month-item-header",buttonPreviousMonth:"button-previous-month",buttonNextMonth:"button-next-month",monthItem:"month-item",monthItemName:"month-item-name",monthItemYear:"month-item-year",resetButton:"reset-button",monthItemWeekdaysRow:"month-item-weekdays-row",noPreviousMonth:"no-previous-month",noNextMonth:"no-next-month",containerDays:"container__days",dayItem:"day-item",isToday:"is-today",isLocked:"is-locked",isInRange:"is-in-range",isStartDate:"is-start-date",isFlipped:"is-flipped",isEndDate:"is-end-date",isHighlighted:"is-highlighted",weekNumber:"week-number",containerFooter:"container__footer",previewDateRange:"preview-date-range",buttonCancel:"button-cancel",buttonApply:"button-apply",containerTooltip:"container__tooltip"},t.exports=e},function(t,e,i){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var i=function(t,e){var i=t[1]||"",n=t[3];if(!n)return i;if(e&&"function"==typeof btoa){var o=(r=n,a=btoa(unescape(encodeURIComponent(JSON.stringify(r)))),l="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(a),"/*# ".concat(l," */")),s=n.sources.map((function(t){return"/*# sourceURL=".concat(n.sourceRoot||"").concat(t," */")}));return[i].concat(s).concat([o]).join("\n")}var r,a,l;return[i].join("\n")}(e,t);return e[2]?"@media ".concat(e[2]," {").concat(i,"}"):i})).join("")},e.i=function(t,i,n){"string"==typeof t&&(t=[[null,t,""]]);var o={};if(n)for(var s=0;sthis.options.endDate.getTime()&&(this.options.endDate=this.options.startDate.clone(),this.options.startDate=new o.DateTime(t,this.options.format,this.options.lang)),this.updateInput())},s.Litepicker.prototype.setDateRange=function(t,e,i){void 0===i&&(i=!1),this.triggerElement=void 0;var n=new o.DateTime(t,this.options.format,this.options.lang),s=new o.DateTime(e,this.options.format,this.options.lang);(this.options.disallowLockDaysInRange?r.rangeIsLocked([n,s],this.options):r.dateIsLocked(n,this.options,[n,s])||r.dateIsLocked(s,this.options,[n,s]))&&!i?this.emit("error:range",[n,s]):(this.setStartDate(n),this.setEndDate(s),this.options.inlineMode&&this.render(),this.updateInput(),this.emit("selected",this.getStartDate(),this.getEndDate()))},s.Litepicker.prototype.gotoDate=function(t,e){void 0===e&&(e=0);var i=new o.DateTime(t);i.setDate(1),this.calendars[e]=i.clone(),this.render()},s.Litepicker.prototype.setLockDays=function(t){this.options.lockDays=o.DateTime.convertArray(t,this.options.lockDaysFormat),this.render()},s.Litepicker.prototype.setHighlightedDays=function(t){this.options.highlightedDays=o.DateTime.convertArray(t,this.options.highlightedDaysFormat),this.render()},s.Litepicker.prototype.setOptions=function(t){delete t.element,delete t.elementEnd,delete t.parentEl,t.startDate&&(t.startDate=new o.DateTime(t.startDate,this.options.format,this.options.lang)),t.endDate&&(t.endDate=new o.DateTime(t.endDate,this.options.format,this.options.lang));var e=n(n({},this.options.dropdowns),t.dropdowns),i=n(n({},this.options.buttonText),t.buttonText),s=n(n({},this.options.tooltipText),t.tooltipText);this.options=n(n({},this.options),t),this.options.dropdowns=n({},e),this.options.buttonText=n({},i),this.options.tooltipText=n({},s),!this.options.singleMode||this.options.startDate instanceof o.DateTime||(this.options.startDate=null,this.options.endDate=null),this.options.singleMode||this.options.startDate instanceof o.DateTime&&this.options.endDate instanceof o.DateTime||(this.options.startDate=null,this.options.endDate=null);for(var r=0;r.noUi-tooltip{-webkit-transform:translate(50%,0);transform:translate(50%,0);left:auto;bottom:10px}.noUi-vertical .noUi-origin>.noUi-tooltip{-webkit-transform:translate(0,-18px);transform:translate(0,-18px);top:auto;right:28px} \ No newline at end of file diff --git a/demo/dist/libs/selectize/dist/css/selectize.css b/demo/dist/libs/selectize/dist/css/selectize.css deleted file mode 100644 index 3ec90ad0e..000000000 --- a/demo/dist/libs/selectize/dist/css/selectize.css +++ /dev/null @@ -1,333 +0,0 @@ -/** - * selectize.css (v0.12.6) - * Copyright (c) 2013–2015 Brian Reavis & contributors - * - * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this - * file except in compliance with the License. You may obtain a copy of the License at: - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF - * ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - * - * @author Brian Reavis - */ - -.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder { - visibility: visible !important; - background: #f2f2f2 !important; - background: rgba(0, 0, 0, 0.06) !important; - border: 0 none !important; - -webkit-box-shadow: inset 0 0 12px 4px #fff; - box-shadow: inset 0 0 12px 4px #fff; -} -.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after { - content: '!'; - visibility: hidden; -} -.selectize-control.plugin-drag_drop .ui-sortable-helper { - -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); -} -.selectize-dropdown-header { - position: relative; - padding: 5px 8px; - border-bottom: 1px solid #d0d0d0; - background: #f8f8f8; - -webkit-border-radius: 3px 3px 0 0; - -moz-border-radius: 3px 3px 0 0; - border-radius: 3px 3px 0 0; -} -.selectize-dropdown-header-close { - position: absolute; - right: 8px; - top: 50%; - color: #303030; - opacity: 0.4; - margin-top: -12px; - line-height: 20px; - font-size: 20px !important; -} -.selectize-dropdown-header-close:hover { - color: #000000; -} -.selectize-dropdown.plugin-optgroup_columns .optgroup { - border-right: 1px solid #f2f2f2; - border-top: 0 none; - float: left; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child { - border-right: 0 none; -} -.selectize-dropdown.plugin-optgroup_columns .optgroup:before { - display: none; -} -.selectize-dropdown.plugin-optgroup_columns .optgroup-header { - border-top: 0 none; -} -.selectize-control.plugin-remove_button [data-value] { - position: relative; - padding-right: 24px !important; -} -.selectize-control.plugin-remove_button [data-value] .remove { - z-index: 1; - /* fixes ie bug (see #392) */ - position: absolute; - top: 0; - right: 0; - bottom: 0; - width: 17px; - text-align: center; - font-weight: bold; - font-size: 12px; - color: inherit; - text-decoration: none; - vertical-align: middle; - display: inline-block; - padding: 2px 0 0 0; - border-left: 1px solid #d0d0d0; - -webkit-border-radius: 0 2px 2px 0; - -moz-border-radius: 0 2px 2px 0; - border-radius: 0 2px 2px 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -.selectize-control.plugin-remove_button [data-value] .remove:hover { - background: rgba(0, 0, 0, 0.05); -} -.selectize-control.plugin-remove_button [data-value].active .remove { - border-left-color: #cacaca; -} -.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover { - background: none; -} -.selectize-control.plugin-remove_button .disabled [data-value] .remove { - border-left-color: #ffffff; -} -.selectize-control.plugin-remove_button .remove-single { - position: absolute; - right: 0; - top: 0; - font-size: 23px; -} -.selectize-control { - position: relative; -} -.selectize-dropdown, -.selectize-input, -.selectize-input input { - color: #303030; - font-family: inherit; - font-size: 13px; - line-height: 18px; - -webkit-font-smoothing: inherit; -} -.selectize-input, -.selectize-control.single .selectize-input.input-active { - background: #fff; - cursor: text; - display: inline-block; -} -.selectize-input { - border: 1px solid #d0d0d0; - padding: 8px 8px; - display: inline-block; - width: 100%; - overflow: hidden; - position: relative; - z-index: 1; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -} -.selectize-control.multi .selectize-input.has-items { - padding: 6px 8px 3px; -} -.selectize-input.full { - background-color: #fff; -} -.selectize-input.disabled, -.selectize-input.disabled * { - cursor: default !important; -} -.selectize-input.focus { - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); -} -.selectize-input.dropdown-active { - -webkit-border-radius: 3px 3px 0 0; - -moz-border-radius: 3px 3px 0 0; - border-radius: 3px 3px 0 0; -} -.selectize-input > * { - vertical-align: baseline; - display: -moz-inline-stack; - display: inline-block; - zoom: 1; - *display: inline; -} -.selectize-control.multi .selectize-input > div { - cursor: pointer; - margin: 0 3px 3px 0; - padding: 2px 6px; - background: #f2f2f2; - color: #303030; - border: 0 solid #d0d0d0; -} -.selectize-control.multi .selectize-input > div.active { - background: #e8e8e8; - color: #303030; - border: 0 solid #cacaca; -} -.selectize-control.multi .selectize-input.disabled > div, -.selectize-control.multi .selectize-input.disabled > div.active { - color: #7d7d7d; - background: #ffffff; - border: 0 solid #ffffff; -} -.selectize-input > input { - display: inline-block !important; - padding: 0 !important; - min-height: 0 !important; - max-height: none !important; - max-width: 100% !important; - margin: 0 2px 0 0 !important; - text-indent: 0 !important; - border: 0 none !important; - background: none !important; - line-height: inherit !important; - -webkit-user-select: auto !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; -} -.selectize-input > input::-ms-clear { - display: none; -} -.selectize-input > input:focus { - outline: none !important; -} -.selectize-input::after { - content: ' '; - display: block; - clear: left; -} -.selectize-input.dropdown-active::before { - content: ' '; - display: block; - position: absolute; - background: #f0f0f0; - height: 1px; - bottom: 0; - left: 0; - right: 0; -} -.selectize-dropdown { - position: absolute; - z-index: 10; - border: 1px solid #d0d0d0; - background: #fff; - margin: -1px 0 0 0; - border-top: 0 none; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); - -webkit-border-radius: 0 0 3px 3px; - -moz-border-radius: 0 0 3px 3px; - border-radius: 0 0 3px 3px; -} -.selectize-dropdown [data-selectable] { - cursor: pointer; - overflow: hidden; -} -.selectize-dropdown [data-selectable] .highlight { - background: rgba(125, 168, 208, 0.2); - -webkit-border-radius: 1px; - -moz-border-radius: 1px; - border-radius: 1px; -} -.selectize-dropdown .option, -.selectize-dropdown .optgroup-header { - padding: 5px 8px; -} -.selectize-dropdown .option, -.selectize-dropdown [data-disabled], -.selectize-dropdown [data-disabled] [data-selectable].option { - cursor: inherit; - opacity: 0.5; -} -.selectize-dropdown [data-selectable].option { - opacity: 1; -} -.selectize-dropdown .optgroup:first-child .optgroup-header { - border-top: 0 none; -} -.selectize-dropdown .optgroup-header { - color: #303030; - background: #fff; - cursor: default; -} -.selectize-dropdown .active { - background-color: #f5fafd; - color: #495c68; -} -.selectize-dropdown .active.create { - color: #495c68; -} -.selectize-dropdown .create { - color: rgba(48, 48, 48, 0.5); -} -.selectize-dropdown-content { - overflow-y: auto; - overflow-x: hidden; - max-height: 200px; - -webkit-overflow-scrolling: touch; -} -.selectize-control.single .selectize-input, -.selectize-control.single .selectize-input input { - cursor: pointer; -} -.selectize-control.single .selectize-input.input-active, -.selectize-control.single .selectize-input.input-active input { - cursor: text; -} -.selectize-control.single .selectize-input:after { - content: ' '; - display: block; - position: absolute; - top: 50%; - right: 15px; - margin-top: -3px; - width: 0; - height: 0; - border-style: solid; - border-width: 5px 5px 0 5px; - border-color: #808080 transparent transparent transparent; -} -.selectize-control.single .selectize-input.dropdown-active:after { - margin-top: -4px; - border-width: 0 5px 5px 5px; - border-color: transparent transparent #808080 transparent; -} -.selectize-control.rtl.single .selectize-input:after { - left: 15px; - right: auto; -} -.selectize-control.rtl .selectize-input > input { - margin: 0 4px 0 -2px !important; -} -.selectize-control .selectize-input.disabled { - opacity: 0.5; - background-color: #fafafa; -} diff --git a/demo/dist/libs/selectize/dist/js/standalone/selectize.min.js b/demo/dist/libs/selectize/dist/js/standalone/selectize.min.js deleted file mode 100644 index 43046c90d..000000000 --- a/demo/dist/libs/selectize/dist/js/standalone/selectize.min.js +++ /dev/null @@ -1,4 +0,0 @@ -/*! selectize.js - v0.12.6 | https://github.com/selectize/selectize.js | Apache License (v2) */ - -!function(a,b){"function"==typeof define&&define.amd?define("sifter",b):"object"==typeof exports?module.exports=b():a.Sifter=b()}(this,function(){var a=function(a,b){this.items=a,this.settings=b||{diacritics:!0}};a.prototype.tokenize=function(a){if(!(a=e(String(a||"").toLowerCase()))||!a.length)return[];var b,c,d,g,i=[],j=a.split(/ +/);for(b=0,c=j.length;b0)&&d.items.push({score:c,id:e})}):g.iterator(g.items,function(a,b){d.items.push({score:1,id:b})}),e=g.getSortFunction(d,b),e&&d.items.sort(e),d.total=d.items.length,"number"==typeof b.limit&&(d.items=d.items.slice(0,b.limit)),d};var b=function(a,b){return"number"==typeof a&&"number"==typeof b?a>b?1:ab?1:b>a?-1:0)},c=function(a,b){var c,d,e,f;for(c=1,d=arguments.length;c=0&&a.data.length>0){var f=a.data.match(c),g=document.createElement("span");g.className="highlight";var h=a.splitText(e),i=(h.splitText(f[0].length),h.cloneNode(!0));g.appendChild(i),h.parentNode.replaceChild(g,h),b=1}}else if(1===a.nodeType&&a.childNodes&&!/(script|style)/i.test(a.tagName)&&("highlight"!==a.className||"SPAN"!==a.tagName))for(var j=0;j/g,">").replace(/"/g,""")},m={};m.before=function(a,b,c){var d=a[b];a[b]=function(){return c.apply(a,arguments),d.apply(a,arguments)}},m.after=function(a,b,c){var d=a[b];a[b]=function(){var b=d.apply(a,arguments);return c.apply(a,arguments),b}};var n=function(a){var b=!1;return function(){b||(b=!0,a.apply(this,arguments))}},o=function(a,b){var c;return function(){var d=this,e=arguments;window.clearTimeout(c),c=window.setTimeout(function(){a.apply(d,e)},b)}},p=function(a,b,c){var d,e=a.trigger,f={};a.trigger=function(){var c=arguments[0];if(-1===b.indexOf(c))return e.apply(a,arguments);f[c]=arguments},c.apply(a,[]),a.trigger=e;for(d in f)f.hasOwnProperty(d)&&e.apply(a,f[d])},q=function(a,b,c,d){a.on(b,c,function(b){for(var c=b.target;c&&c.parentNode!==a[0];)c=c.parentNode;return b.currentTarget=c,d.apply(this,[b])})},r=function(a){var b={};if("selectionStart"in a)b.start=a.selectionStart,b.length=a.selectionEnd-b.start;else if(document.selection){a.focus();var c=document.selection.createRange(),d=document.selection.createRange().text.length;c.moveStart("character",-a.value.length),b.start=c.text.length-d,b.length=d}return b},s=function(a,b,c){var d,e,f={};if(c)for(d=0,e=c.length;d").css({position:"absolute",top:-99999,left:-99999,width:"auto",padding:0,whiteSpace:"pre"}).appendTo("body")),w.$testInput.text(b),s(c,w.$testInput,["letterSpacing","fontSize","fontFamily","fontWeight","textTransform"]),w.$testInput.width()):0},u=function(a){var b=null,c=function(c,d){var e,f,g,h,i,j,k,l;c=c||window.event||{},d=d||{},c.metaKey||c.altKey||(d.force||!1!==a.data("grow"))&&(e=a.val(),c.type&&"keydown"===c.type.toLowerCase()&&(f=c.keyCode,g=f>=48&&f<=57||f>=65&&f<=90||f>=96&&f<=111||f>=186&&f<=222||32===f,46===f||8===f?(l=r(a[0]),l.length?e=e.substring(0,l.start)+e.substring(l.start+l.length):8===f&&l.start?e=e.substring(0,l.start-1)+e.substring(l.start+1):46===f&&void 0!==l.start&&(e=e.substring(0,l.start)+e.substring(l.start+1))):g&&(j=c.shiftKey,k=String.fromCharCode(c.keyCode),k=j?k.toUpperCase():k.toLowerCase(),e+=k)),h=a.attr("placeholder"),!e&&h&&(e=h),(i=t(e,a)+4)!==b&&(b=i,a.width(i),a.triggerHandler("resize")))};a.on("keydown keyup update blur",c),c()},v=function(a){var b=document.createElement("div");return b.appendChild(a.cloneNode(!0)),b.innerHTML},w=function(c,d){var e,f,g,h,i=this;h=c[0],h.selectize=i;var j=window.getComputedStyle&&window.getComputedStyle(h,null);if(g=j?j.getPropertyValue("direction"):h.currentStyle&&h.currentStyle.direction,g=g||c.parents("[dir]:first").attr("dir")||"",a.extend(i,{order:0,settings:d,$input:c,tabIndex:c.attr("tabindex")||"",tagType:"select"===h.tagName.toLowerCase()?1:2,rtl:/rtl/i.test(g),eventNS:".selectize"+ ++w.count,highlightedValue:null,isBlurring:!1,isOpen:!1,isDisabled:!1,isRequired:c.is("[required]"),isInvalid:!1,isLocked:!1,isFocused:!1,isInputHidden:!1,isSetup:!1,isShiftDown:!1,isCmdDown:!1,isCtrlDown:!1,ignoreFocus:!1,ignoreBlur:!1,ignoreHover:!1,hasOptions:!1,currentResults:null,lastValue:"",caretPos:0,loading:0,loadedSearches:{},$activeOption:null,$activeItems:[],optgroups:{},options:{},userOptions:{},items:[],renderCache:{},onSearchChange:null===d.loadThrottle?i.onSearchChange:o(i.onSearchChange,d.loadThrottle)}),i.sifter=new b(this.options,{diacritics:d.diacritics}),i.settings.options){for(e=0,f=i.settings.options.length;e").addClass(r.wrapperClass).addClass(m).addClass(l),c=a("
").addClass(r.inputClass).addClass("items").appendTo(b),d=a('').appendTo(c).attr("tabindex",w.is(":disabled")?"-1":p.tabIndex),k=a(r.dropdownParent||b),e=a("
").addClass(r.dropdownClass).addClass(l).hide().appendTo(k),j=a("
").addClass(r.dropdownContentClass).appendTo(e),(o=w.attr("id"))&&(d.attr("id",o+"-selectized"),a("label[for='"+o+"']").attr("for",o+"-selectized")),p.settings.copyClassesToDropdown&&e.addClass(m),b.css({width:w[0].style.width}),p.plugins.names.length&&(n="plugin-"+p.plugins.names.join(" plugin-"),b.addClass(n),e.addClass(n)),(null===r.maxItems||r.maxItems>1)&&1===p.tagType&&w.attr("multiple","multiple"),p.settings.placeholder&&d.attr("placeholder",r.placeholder),!p.settings.splitOn&&p.settings.delimiter){var x=p.settings.delimiter.replace(/[-\/\\^$*+?.()|[\]{}]/g,"\\$&");p.settings.splitOn=new RegExp("\\s*"+x+"+\\s*")}w.attr("autocorrect")&&d.attr("autocorrect",w.attr("autocorrect")),w.attr("autocapitalize")&&d.attr("autocapitalize",w.attr("autocapitalize")),d[0].type=w[0].type,p.$wrapper=b,p.$control=c,p.$control_input=d,p.$dropdown=e,p.$dropdown_content=j,e.on("mouseenter mousedown click","[data-disabled]>[data-selectable]",function(a){a.stopImmediatePropagation()}),e.on("mouseenter","[data-selectable]",function(){return p.onOptionHover.apply(p,arguments)}),e.on("mousedown click","[data-selectable]",function(){return p.onOptionSelect.apply(p,arguments)}),q(c,"mousedown","*:not(input)",function(){return p.onItemSelect.apply(p,arguments)}),u(d),c.on({mousedown:function(){return p.onMouseDown.apply(p,arguments)},click:function(){return p.onClick.apply(p,arguments)}}),d.on({mousedown:function(a){a.stopPropagation()},keydown:function(){return p.onKeyDown.apply(p,arguments)},keyup:function(){return p.onKeyUp.apply(p,arguments)},keypress:function(){return p.onKeyPress.apply(p,arguments)},resize:function(){p.positionDropdown.apply(p,[])},blur:function(){return p.onBlur.apply(p,arguments)},focus:function(){return p.ignoreBlur=!1,p.onFocus.apply(p,arguments)},paste:function(){return p.onPaste.apply(p,arguments)}}),v.on("keydown"+s,function(a){p.isCmdDown=a[f?"metaKey":"ctrlKey"],p.isCtrlDown=a[f?"altKey":"ctrlKey"],p.isShiftDown=a.shiftKey}),v.on("keyup"+s,function(a){a.keyCode===h&&(p.isCtrlDown=!1),16===a.keyCode&&(p.isShiftDown=!1),a.keyCode===g&&(p.isCmdDown=!1)}),v.on("mousedown"+s,function(a){if(p.isFocused){if(a.target===p.$dropdown[0]||a.target.parentNode===p.$dropdown[0])return!1;p.$control.has(a.target).length||a.target===p.$control[0]||p.blur(a.target)}}),t.on(["scroll"+s,"resize"+s].join(" "),function(){p.isOpen&&p.positionDropdown.apply(p,arguments)}),t.on("mousemove"+s,function(){p.ignoreHover=!1}),this.revertSettings={$children:w.children().detach(),tabindex:w.attr("tabindex")},w.attr("tabindex",-1).hide().after(p.$wrapper),a.isArray(r.items)&&(p.setValue(r.items),delete r.items),i&&w.on("invalid"+s,function(a){a.preventDefault(),p.isInvalid=!0,p.refreshState()}),p.updateOriginalInput(),p.refreshItems(),p.refreshState(),p.updatePlaceholder(),p.isSetup=!0,w.is(":disabled")&&p.disable(),p.on("change",this.onChange),w.data("selectize",p),w.addClass("selectized"),p.trigger("initialize"),!0===r.preload&&p.onSearchChange("")},setupTemplates:function(){var b=this,c=b.settings.labelField,d=b.settings.optgroupLabelField,e={optgroup:function(a){return'
'+a.html+"
"},optgroup_header:function(a,b){return'
'+b(a[d])+"
"},option:function(a,b){return'
'+b(a[c])+"
"},item:function(a,b){return'
'+b(a[c])+"
"},option_create:function(a,b){return'
Add '+b(a.input)+"…
"}};b.settings.render=a.extend({},e,b.settings.render)},setupCallbacks:function(){var a,b,c={initialize:"onInitialize",change:"onChange",item_add:"onItemAdd",item_remove:"onItemRemove",clear:"onClear",option_add:"onOptionAdd",option_remove:"onOptionRemove",option_clear:"onOptionClear",optgroup_add:"onOptionGroupAdd",optgroup_remove:"onOptionGroupRemove",optgroup_clear:"onOptionGroupClear",dropdown_open:"onDropdownOpen",dropdown_close:"onDropdownClose",type:"onType",load:"onLoad",focus:"onFocus",blur:"onBlur"};for(a in c)c.hasOwnProperty(a)&&(b=this.settings[c[a]])&&this.on(a,b)},onClick:function(a){var b=this;b.isFocused&&b.isOpen||(b.focus(),a.preventDefault())},onMouseDown:function(b){var c=this,d=b.isDefaultPrevented();a(b.target);if(c.isFocused){if(b.target!==c.$control_input[0])return"single"===c.settings.mode?c.isOpen?c.close():c.open():d||c.setActiveItem(null),!1}else d||window.setTimeout(function(){c.focus()},0)},onChange:function(){this.$input.trigger("change")},onPaste:function(b){var c=this;if(c.isFull()||c.isInputHidden||c.isLocked)return void b.preventDefault();c.settings.splitOn&&setTimeout(function(){var b=c.$control_input.val();if(b.match(c.settings.splitOn))for(var d=a.trim(b).split(c.settings.splitOn),e=0,f=d.length;eh&&(j=g,g=h,h=j),e=g;e<=h;e++)i=l.$control[0].childNodes[e],-1===l.$activeItems.indexOf(i)&&(a(i).addClass("active"),l.$activeItems.push(i));c.preventDefault()}else"mousedown"===d&&l.isCtrlDown||"keydown"===d&&this.isShiftDown?b.hasClass("active")?(f=l.$activeItems.indexOf(b[0]),l.$activeItems.splice(f,1),b.removeClass("active")):l.$activeItems.push(b.addClass("active")[0]):(a(l.$activeItems).removeClass("active"),l.$activeItems=[b.addClass("active")[0]]);l.hideInput(),this.isFocused||l.focus()}},setActiveOption:function(b,c,d){var e,f,g,h,i,k=this;k.$activeOption&&k.$activeOption.removeClass("active"),k.$activeOption=null,b=a(b),b.length&&(k.$activeOption=b.addClass("active"),!c&&j(c)||(e=k.$dropdown_content.height(),f=k.$activeOption.outerHeight(!0),c=k.$dropdown_content.scrollTop()||0,g=k.$activeOption.offset().top-k.$dropdown_content.offset().top+c,h=g,i=g-e+f,g+f>e+c?k.$dropdown_content.stop().animate({scrollTop:i},d?k.settings.scrollDuration:0):g=0;c--)-1!==f.items.indexOf(k(d.items[c].id))&&d.items.splice(c,1);return d},refreshOptions:function(b){var c,e,f,g,h,i,j,l,m,n,o,p,q,r,s,t;void 0===b&&(b=!0);var u=this,w=a.trim(u.$control_input.val()),x=u.search(w),y=u.$dropdown_content,z=u.$activeOption&&k(u.$activeOption.attr("data-value"));for(g=x.items.length,"number"==typeof u.settings.maxOptions&&(g=Math.min(g,u.settings.maxOptions)),h={},i=[],c=0;c0||q,u.hasOptions?(x.items.length>0?(s=z&&u.getOption(z),s&&s.length?r=s:"single"===u.settings.mode&&u.items.length&&(r=u.getOption(u.items[0])),r&&r.length||(r=t&&!u.settings.addPrecedence?u.getAdjacentOption(t,1):y.find("[data-selectable]:first"))):r=t,u.setActiveOption(r),b&&!u.isOpen&&u.open()):(u.setActiveOption(null),b&&u.isOpen&&u.close())},addOption:function(b){var c,d,e,f=this;if(a.isArray(b))for(c=0,d=b.length;c=0&&e0),b.$control_input.data("grow",!c&&!d)},isFull:function(){ -return null!==this.settings.maxItems&&this.items.length>=this.settings.maxItems},updateOriginalInput:function(a){var b,c,d,e,f=this;if(a=a||{},1===f.tagType){for(d=[],b=0,c=f.items.length;b'+l(e)+"");d.length||this.$input.attr("multiple")||d.push(''),f.$input.html(d.join(""))}else f.$input.val(f.getValue()),f.$input.attr("value",f.$input.val());f.isSetup&&(a.silent||f.trigger("change",f.$input.val()))},updatePlaceholder:function(){if(this.settings.placeholder){var a=this.$control_input;this.items.length?a.removeAttr("placeholder"):a.attr("placeholder",this.settings.placeholder),a.triggerHandler("update",{force:!0})}},open:function(){var a=this;a.isLocked||a.isOpen||"multi"===a.settings.mode&&a.isFull()||(a.focus(),a.isOpen=!0,a.refreshState(),a.$dropdown.css({visibility:"hidden",display:"block"}),a.positionDropdown(),a.$dropdown.css({visibility:"visible"}),a.trigger("dropdown_open",a.$dropdown))},close:function(){var a=this,b=a.isOpen;"single"===a.settings.mode&&a.items.length&&(a.hideInput(),a.isBlurring||a.$control_input.blur()),a.isOpen=!1,a.$dropdown.hide(),a.setActiveOption(null),a.refreshState(),b&&a.trigger("dropdown_close",a.$dropdown)},positionDropdown:function(){var a=this.$control,b="body"===this.settings.dropdownParent?a.offset():a.position();b.top+=a.outerHeight(!0),this.$dropdown.css({width:a[0].getBoundingClientRect().width,top:b.top,left:b.left})},clear:function(a){var b=this;b.items.length&&(b.$control.children(":not(input)").remove(),b.items=[],b.lastQuery=null,b.setCaret(0),b.setActiveItem(null),b.updatePlaceholder(),b.updateOriginalInput({silent:a}),b.refreshState(),b.showInput(),b.trigger("clear"))},insertAtCaret:function(a){var b=Math.min(this.caretPos,this.items.length),c=a[0],d=this.buffer||this.$control[0];0===b?d.insertBefore(c,d.firstChild):d.insertBefore(c,d.childNodes[b]),this.setCaret(b+1)},deleteSelection:function(b){var c,d,e,f,g,h,i,j,k,l=this;if(e=b&&8===b.keyCode?-1:1,f=r(l.$control_input[0]),l.$activeOption&&!l.settings.hideSelected&&(i=l.getAdjacentOption(l.$activeOption,-1).attr("data-value")),g=[],l.$activeItems.length){for(k=l.$control.children(".active:"+(e>0?"last":"first")),h=l.$control.children(":not(input)").index(k),e>0&&h++,c=0,d=l.$activeItems.length;c0&&f.start===l.$control_input.val().length&&g.push(l.items[l.caretPos]));if(!g.length||"function"==typeof l.settings.onDelete&&!1===l.settings.onDelete.apply(l,[g]))return!1;for(void 0!==h&&l.setCaret(h);g.length;)l.removeItem(g.pop());return l.showInput(),l.positionDropdown(),l.refreshOptions(!0),i&&(j=l.getOption(i),j.length&&l.setActiveOption(j)),!0},advanceSelection:function(a,b){var c,d,e,f,g,h=this;0!==a&&(h.rtl&&(a*=-1),c=a>0?"last":"first",d=r(h.$control_input[0]),h.isFocused&&!h.isInputHidden?(f=h.$control_input.val().length,(a<0?0===d.start&&0===d.length:d.start===f)&&!f&&h.advanceCaret(a,b)):(g=h.$control.children(".active:"+c),g.length&&(e=h.$control.children(":not(input)").index(g),h.setActiveItem(null),h.setCaret(a>0?e+1:e))))},advanceCaret:function(a,b){var c,d,e=this;0!==a&&(c=a>0?"next":"prev",e.isShiftDown?(d=e.$control_input[c](),d.length&&(e.hideInput(),e.setActiveItem(d),b&&b.preventDefault())):e.setCaret(e.caretPos+a))},setCaret:function(b){var c=this;if(b="single"===c.settings.mode?c.items.length:Math.max(0,Math.min(c.items.length,b)),!c.isPending){var d,e,f,g;for(f=c.$control.children(":not(input)"),d=0,e=f.length;d
'+a.title+'×
'}},b),c.setup=function(){var d=c.setup;return function(){d.apply(c,arguments),c.$dropdown_header=a(b.html(b)),c.$dropdown.prepend(c.$dropdown_header)}}()}),w.define("optgroup_columns",function(b){var c=this;b=a.extend({equalizeWidth:!0,equalizeHeight:!0},b),this.getAdjacentOption=function(b,c){var d=b.closest("[data-group]").find("[data-selectable]"),e=d.index(b)+c;return e>=0&&e
',a=a.firstChild,c.body.appendChild(a),b=d.width=a.offsetWidth-a.clientWidth,c.body.removeChild(a)),b},e=function(){var e,f,g,h,i,j,k;if(k=a("[data-group]",c.$dropdown_content),(f=k.length)&&c.$dropdown_content.width()){if(b.equalizeHeight){for(g=0,e=0;e1&&(i=j-h*(f-1),k.eq(f-1).css({width:i})))}};(b.equalizeHeight||b.equalizeWidth)&&(m.after(this,"positionDropdown",e),m.after(this,"refreshOptions",e))}),w.define("remove_button",function(b){b=a.extend({label:"×",title:"Remove",className:"remove",append:!0},b);if("single"===this.settings.mode)return void function(b,c){c.className="remove-single";var d=b,e=''+c.label+"",f=function(b,c){return a("").append(b).append(c)};b.setup=function(){var g=d.setup;return function(){if(c.append){var h=a(d.$input.context).attr("id"),i=(a("#"+h),d.settings.render.item);d.settings.render.item=function(a){return f(i.apply(b,arguments),e)}}g.apply(b,arguments),b.$control.on("click","."+c.className,function(a){a.preventDefault(),d.isLocked||d.clear()})}}()}(this,b);!function(b,c){var d=b,e=''+c.label+"",f=function(a,b){var c=a.search(/(<\/[^>]+>\s*)$/);return a.substring(0,c)+b+a.substring(c)};b.setup=function(){var g=d.setup;return function(){if(c.append){var h=d.settings.render.item;d.settings.render.item=function(a){return f(h.apply(b,arguments),e)}}g.apply(b,arguments),b.$control.on("click","."+c.className,function(b){if(b.preventDefault(),!d.isLocked){var c=a(b.currentTarget).parent();d.setActiveItem(c),d.deleteSelection()&&d.setCaret(d.items.length)}})}}()}(this,b)}),w.define("restore_on_backspace",function(a){var b=this;a.text=a.text||function(a){return a[this.settings.labelField]},this.onKeyDown=function(){var c=b.onKeyDown;return function(b){var d,e;return 8===b.keyCode&&""===this.$control_input.val()&&!this.$activeItems.length&&(d=this.caretPos-1)>=0&&d @@ -21,7 +21,7 @@ -
+
- diff --git a/demo/docs/badges.html b/demo/docs/badges.html index cb7850913..357992647 100644 --- a/demo/docs/badges.html +++ b/demo/docs/badges.html @@ -1,10 +1,10 @@ @@ -21,7 +21,7 @@ -
+
- + +
+

Button with badge

+

Badges can be used as part of links or buttons to provide a counter.

+
+
+
+ + +
-
-
-
- 
<button type="button" class="btn">
+                      

+                        

+                          
<button type="button" class="btn">
   Notifications <span class="badge bg-red ms-2">4</span>
 </button>
 <button type="button" class="btn">
   Notifications <span class="badge bg-green ms-2">4</span>
 </button>

-                      

+
+
@@ -851,17 +936,24 @@
  • Documentation
  • License
  • Source code
    • +
  • + + + + Sponsor + +
    • @@ -871,7 +963,6 @@
    - diff --git a/demo/docs/borders.html b/demo/docs/borders.html new file mode 100644 index 000000000..e20fe1ac1 --- /dev/null +++ b/demo/docs/borders.html @@ -0,0 +1,838 @@ + + + + + + + + Borders - Tabler - Premium and Open Source dashboard template with responsive and high quality UI. + + + + + + + + +
    +
    +
    + +

    + + Tabler + +

    +
    +
    +
    + + + + Source code + + + + + Sponsor + +
    +
    +
    + + + + + +
    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. +
    +
    +
    +
    +
    + + +
    +
    Paweł Kuna
    +
    UI Designer
    +
    +     +
    + Set status + Profile & account + Feedback +
    + Settings + Logout +
    +
    +
    +
    +
    +
    + +
    +
    +
    + +
    +
    +
    +

    + Documentation +

    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +

    Borders

    +
    +

    Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

    +
    +

    Border direction

    +

    The following border utilities classes will add border to any side of an element.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + 
    <div class="w-5 h-5 bg-light border"></div>
+<div class="w-5 h-5 bg-light border-top"></div>
+<div class="w-5 h-5 bg-light border-end"></div>
+<div class="w-5 h-5 bg-light border-bottom"></div>
+<div class="w-5 h-5 bg-light border-start"></div>
+<div class="w-5 h-5 bg-light border-x"></div>
+<div class="w-5 h-5 bg-light border-y"></div>
    +
    +
    +

    Border size

    +

    Below are the available border size utilities classes.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + 
    <div class="w-5 h-5 bg-light border-0"></div>
+<div class="w-5 h-5 bg-light border"></div>
+<div class="w-5 h-5 bg-light border-wide"></div>
    +
    +
    +

    Remove border

    +

    You can remove a border on a single side of an element by using the following border utilities classes.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + 
    <div class="w-5 h-5 bg-light border border-top-0"></div>
+<div class="w-5 h-5 bg-light border border-end-0"></div>
+<div class="w-5 h-5 bg-light border border-bottom-0"></div>
+<div class="w-5 h-5 bg-light border border-start-0"></div>
+<div class="w-5 h-5 bg-light border border-x-0"></div>
+<div class="w-5 h-5 bg-light border border-y-0"></div>
    +
    +
    +

    Border color

    +

    You can set a border color of any side of an element by adding the following utilities classes below.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + 
    <div class="w-5 h-5 bg-light border border-primary"></div>
+<div class="w-5 h-5 bg-light border border-secondary"></div>
+<div class="w-5 h-5 bg-light border border-success"></div>
+<div class="w-5 h-5 bg-light border border-warning"></div>
+<div class="w-5 h-5 bg-light border border-danger"></div>
+<div class="w-5 h-5 bg-light border border-info"></div>
+<div class="w-5 h-5 bg-light border border-light"></div>
+<div class="w-5 h-5 bg-light border border-dark"></div>
    +
    +
    +

    Border radius

    +

    You can set a border to any element by using the following utilities classes below.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + 
    <div class="w-5 h-5 bg-light border rounded-0"></div>
+<div class="w-5 h-5 bg-light border rounded"></div>
+<div class="w-5 h-5 bg-light border rounded-1"></div>
+<div class="w-5 h-5 bg-light border rounded-2"></div>
+<div class="w-5 h-5 bg-light border rounded-3"></div>
+<div class="w-5 h-5 bg-light border rounded-circle"></div>
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    + + + + + \ No newline at end of file diff --git a/demo/docs/breadcrumb.html b/demo/docs/breadcrumb.html index fc3ae28c3..649c642fb 100644 --- a/demo/docs/breadcrumb.html +++ b/demo/docs/breadcrumb.html @@ -1,10 +1,10 @@ @@ -21,7 +21,7 @@ -
    +
    +

    + + Tabler + +

    +
    +
    +
    + + + + Source code + + + + + Sponsor + +
    +
    +
    + + + + + +
    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. +
    +
    +
    +
    +
    + + +
    +
    Paweł Kuna
    +
    UI Designer
    +
    +     +
    + Set status + Profile & account + Feedback +
    + Settings + Logout +
    +
    +
    +
    +
    +
    + +
    +
    +
    + +
    +
    +
    +

    + Documentation +

    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +

    Browser Support

    +
    +
    +

    As of this latest release, Tabler has launched many new features that may not be compatible with all browsers, especially older ones.

    +

    For instance, Tabler no longer uses vendor prefixes in styles that are known to have some compatibility issues except for a few parts. Tabler also supports new features such as CSS grid, object fit, and sticky positioning which is not yet supported on all browsers. In short, Tabler supports all the latest supported browsers with only partial support for Internet Explorer.

    +

    Supported Browsers

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    BrowserVersion
    Edgelast 3 versions
    Firefoxlast 3 versions, ESR
    Chromelast 3 versions
    Safarilast 3 versions
    Operalast 3 versions
    Electronlast 3 versions
    Bravelast 3 versions
    Vivaldilast 3 versions
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    + + + + + \ No newline at end of file diff --git a/demo/docs/buttons.html b/demo/docs/buttons.html index c416946d7..a5e827ef3 100644 --- a/demo/docs/buttons.html +++ b/demo/docs/buttons.html @@ -1,10 +1,10 @@ @@ -21,7 +21,7 @@ -
    +
    - - - +

    Button tag

    +

    As one of the most common elements of UI design, buttons have a very important function of engaging users with your website or app and guiding them in their actions. Use the .btn classes with the <button> element and add additional styling that will make your buttons serve their purpose and draw users’ attention.

    +
    +
    +
    + Link + + + + +
    -
    -
    -
    - 
    <a href="#" class="btn" role="button">Link</a>
+                      
    
+                        
    
+                          
    <a href="#" class="btn" role="button">Link</a>
 <button class="btn">Button</button>
 <input type="button" class="btn" value="Input"/>
 <input type="submit" class="btn" value="Submit"/>
 <input type="reset" class="btn" value="Reset"/>
    
-                      
    
-                    
    
-                    
    Default button
    
-                    
    The standard button creates a white background and subtle hover animation. It’s meant to look and behave as an interactive element of your page.
    
-                    
    
-                      
    
-                        
    
-                          Link
+
    +
    +

    Default button

    +

    The standard button creates a white background and subtle hover animation. It’s meant to look and behave as an interactive element of your page.

    +
    +
    +
    + Link +
    -
    -
    -
    - 
    <a href="#" class="btn" role="button">Link</a>
    -
    -
    -

    Button variations

    -

    Use the button classes that correspond to the function of your button. The big range of available colors will help you show your buttons’ purpose and make them easy to spot.

    -
    -
    -
    - - Primary - - - Secondary - - - Success - - - Warning - - - Danger - - - Info - - - Light - - - Dark - +
    +
    + 
    <a href="#" class="btn" role="button">Link</a>
    +
    +
    +

    Button variations

    +

    Use the button classes that correspond to the function of your button. The big range of available colors will help you show your buttons’ purpose and make them easy to spot.

    +
    +
    +
    + + Primary + + + Secondary + + + Success + + + Warning + + + Danger + + + Info + + + Light + + + Dark + +
    -
    -
    -
    - 
    <a href="#" class="btn btn-primary">
+                      
    
+                        
    
+                          
    <a href="#" class="btn btn-primary">
   Primary
 </a>
 <a href="#" class="btn btn-secondary">
@@ -687,43 +771,43 @@
 <a href="#" class="btn btn-dark">
   Dark
 </a>
    
-                      
    
-                    
    
-                    
    Disabled buttons
    
-                    
    Make buttons look inactive to show that an action is possible once the user meets certain criteria, such as completing the required fields to submit a form.
    
-                    
    
-                      
    
-                        
    
-                          
-                            Primary
-                          
-                          
-                            Secondary
-                          
-                          
-                            Success
-                          
-                          
-                            Warning
-                          
-                          
-                            Danger
-                          
-                          
-                            Info
-                          
-                          
-                            Light
-                          
-                          
-                            Dark
-                          
+
    +
    +

    Disabled buttons

    +

    Make buttons look inactive to show that an action is possible once the user meets certain criteria, such as completing the required fields to submit a form.

    +
    +
    +
    + + Primary + + + Secondary + + + Success + + + Warning + + + Danger + + + Info + + + Light + + + Dark + +
    -
    -
    -
    - 
    <a href="#" class="btn btn-primary disabled">
+                      
    
+                        
    
+                          
    <a href="#" class="btn btn-primary disabled">
   Primary
 </a>
 <a href="#" class="btn btn-secondary disabled">
@@ -747,31 +831,31 @@
 <a href="#" class="btn btn-dark disabled">
   Dark
 </a>
    
-                      
    
-                    
    
-                    
    Color variations
    
-                    
    Choose the right color for your button to make it go well with your design and draw users’ attention. Button colors can have a big influence on users’ decisions, which is why it’s important to choose them based on the intended purpose.
    
-                    
    
-                      
    
-                        
    
-                          Blue
-                          Azure
-                          Indigo
-                          Purple
-                          Pink
-                          Red
-                          Orange
-                          Yellow
-                          Lime
-                          Green
-                          Teal
-                          Cyan
+
    +
    +

    Color variations

    +

    Choose the right color for your button to make it go well with your design and draw users’ attention. Button colors can have a big influence on users’ decisions, which is why it’s important to choose them based on the intended purpose.

    +
    +
    +
    + Blue + Azure + Indigo + Purple + Pink + Red + Orange + Yellow + Lime + Green + Teal + Cyan +
    -
    -
    -
    - 
    <a href="#" class="btn btn-blue">Blue</a>
+                      
    
+                        
    
+                          
    <a href="#" class="btn btn-blue">Blue</a>
 <a href="#" class="btn btn-azure">Azure</a>
 <a href="#" class="btn btn-indigo">Indigo</a>
 <a href="#" class="btn btn-purple">Purple</a>
@@ -783,27 +867,27 @@
 <a href="#" class="btn btn-green">Green</a>
 <a href="#" class="btn btn-teal">Teal</a>
 <a href="#" class="btn btn-cyan">Cyan</a>
    
-                      
    
-                    
    
-                    
    Ghost buttons
    
-                    
    Use the .btn-ghost-* class to make your button look simple yet aesthetically appealing. Ghost buttons help focus users’ attention on the website’s primary design, at the same time encouraging them to take action.
    
-                    
    
-                      
    
-                        
    
-                          Primary
-                          Secondary
-                          Success
-                          Warning
-                          Danger
-                          Info
-                          Light
-                          Dark
+
    +
    +

    Ghost buttons

    +

    Use the .btn-ghost-* class to make your button look simple yet aesthetically appealing. Ghost buttons help focus users’ attention on the website’s primary design, at the same time encouraging them to take action.

    +
    +
    +
    + Primary + Secondary + Success + Warning + Danger + Info + Light + Dark +
    -
    -
    -
    - 
    <a href="#" class="btn btn-ghost-primary">Primary</a>
+                      
    
+                        
    
+                          
    <a href="#" class="btn btn-ghost-primary">Primary</a>
 <a href="#" class="btn btn-ghost-secondary">Secondary</a>
 <a href="#" class="btn btn-ghost-success">Success</a>
 <a href="#" class="btn btn-ghost-warning">Warning</a>
@@ -811,616 +895,558 @@
 <a href="#" class="btn btn-ghost-info">Info</a>
 <a href="#" class="btn btn-ghost-light">Light</a>
 <a href="#" class="btn btn-ghost-dark">Dark</a>
    
-                      
    
-                    
    
-                    
    Square buttons
    
-                    
    Use the .btn-square class to remove the border radius, if you want the corners of your button to be square rather than rounded.
    
-                    
    
-                      
    
-                        
    
-                          
-                            White
-                          
-                          
-                            Primary
-                          
-                          
-                            Secondary
-                          
-                          
-                            Success
-                          
-                          
-                            Warning
-                          
-                          
-                            Danger
-                          
-                          
-                            Info
-                          
-                          
-                            Light
-                          
-                          
-                            Dark
-                          
+
    +
    +

    Square buttons

    +

    Use the .btn-square class to remove the border radius, if you want the corners of your button to be square rather than rounded.

    +
    +
    +
    + + White + +
    -
    -
    -
    - 
    <a href="#" class="btn btn-white btn-square">
+                      
    
+                        
    
+                          
    <a href="#" class="btn btn-white btn-square">
   White
-</a>
-<a href="#" class="btn btn-primary btn-square">
-  Primary
-</a>
-<a href="#" class="btn btn-secondary btn-square">
-  Secondary
-</a>
-<a href="#" class="btn btn-success btn-square">
-  Success
-</a>
-<a href="#" class="btn btn-warning btn-square">
-  Warning
-</a>
-<a href="#" class="btn btn-danger btn-square">
-  Danger
-</a>
-<a href="#" class="btn btn-info btn-square">
-  Info
-</a>
-<a href="#" class="btn btn-light btn-square">
-  Light
-</a>
-<a href="#" class="btn btn-dark btn-square">
-  Dark
 </a>
    
-                      
    
-                    
    
-                    
    Pill buttons
    
-                    
    Add the .btn-pill class to your button to make it rounded and give it a modern and attractive look.
    
-                    
    
-                      
    
-                        
    
-                          
-                            White
-                          
-                          
-                            Primary
-                          
-                          
-                            Secondary
-                          
-                          
-                            Success
-                          
-                          
-                            Warning
-                          
-                          
-                            Danger
-                          
-                          
-                            Info
-                          
-                          
-                            Light
-                          
-                          
-                            Dark
-                          
+
    +
    +

    Pill buttons

    +

    Add the .btn-pill class to your button to make it rounded and give it a modern and attractive look.

    +
    +
    +
    + + White + +
    -
    -
    -
    - 
    <a href="#" class="btn btn-white btn-pill">
+                      
    
+                        
    
+                          
    <a href="#" class="btn btn-white btn-pill">
   White
-</a>
-<a href="#" class="btn btn-primary btn-pill">
-  Primary
-</a>
-<a href="#" class="btn btn-secondary btn-pill">
-  Secondary
-</a>
-<a href="#" class="btn btn-success btn-pill">
-  Success
-</a>
-<a href="#" class="btn btn-warning btn-pill">
-  Warning
-</a>
-<a href="#" class="btn btn-danger btn-pill">
-  Danger
-</a>
-<a href="#" class="btn btn-info btn-pill">
-  Info
-</a>
-<a href="#" class="btn btn-light btn-pill">
-  Light
-</a>
-<a href="#" class="btn btn-dark btn-pill">
-  Dark
 </a>
    
-                      
    
-                    
    
-                    
    Outline buttons
    
-                    
    Replace the default modifier class with the .btn-outline-* class, if you want to remove the color and the background of your button and give it a more subtle look. Outline buttons are perfect to use as secondary buttons, as they don’t distract users from the main action.
    
-                    
    
-                      
    
-                        
    
-                          
-                            Primary
-                          
-                          
-                            Secondary
-                          
-                          
-                            Success
-                          
-                          
-                            Warning
-                          
-                          
-                            Danger
-                          
-                          
-                            Info
-                          
-                          
-                            Light
-                          
-                          
-                            Dark
-                          
+
    +
    +

    Outline buttons

    +

    Replace the default modifier class with the .btn-outline-* class, if you want to remove the color and the background of your button and give it a more subtle look. Outline buttons are perfect to use as secondary buttons, as they don’t distract users from the main action.

    +
    +
    +
    +
    -
    -
    -
    - 
    <a href="#" class="btn btn-outline-primary">
-  Primary
-</a>
-<a href="#" class="btn btn-outline-secondary">
-  Secondary
-</a>
-<a href="#" class="btn btn-outline-success">
-  Success
-</a>
-<a href="#" class="btn btn-outline-warning">
-  Warning
-</a>
-<a href="#" class="btn btn-outline-danger">
-  Danger
-</a>
-<a href="#" class="btn btn-outline-info">
-  Info
-</a>
-<a href="#" class="btn btn-outline-light">
-  Light
-</a>
-<a href="#" class="btn btn-outline-dark">
-  Dark
-</a>
    -
    -
    -

    Button size

    -

    Add .btn-lg or .btn-sm to change the size of your button and differentiate those which should have primary focus from those of secondary importance. Adapt the button size to your design and encourage users to take actions.

    -
    -
    -
    - - +
    +
    +
    +
    +
    +

    Button size

    +

    Add .btn-lg or .btn-sm to change the size of your button and differentiate those which should have primary focus from those of secondary importance. Adapt the button size to your design and encourage users to take actions.

    +
    +
    +
    + + +
    -
    -
    -
    - 
    <button type="button" class="btn btn-primary btn-lg">Large button</button>
+                      
    
+                        
    
+                          
    <button type="button" class="btn btn-primary btn-lg">Large button</button>
 <button type="button" class="btn btn-lg">Large button</button>
    
-                      
    
-                    
    
-                    
    
-                      
    
-                        
    
-                          
-                          
+
    +
    +
    +
    +
    + + +
    -
    -
    -
    - 
    <button type="button" class="btn btn-primary btn-sm">Small button</button>
+                      
    
+                        
    
+                          
    <button type="button" class="btn btn-primary btn-sm">Small button</button>
 <button type="button" class="btn btn-sm">Small button</button>
    
-                      
    
-                    
    
-                    
    Buttons with icons
    
-                    
    Label your button with text and add an icon to communiacate the action and make it easy to identify for users. Icons are easily recognized and improve the aesthetics of your button design, giving it a modern and atractive look.
    
-                    
    Icons can be found here
    
-                    
    
-                      
    
-                        
    
-                          
-                          
-                          
-                          
-                          
-                          
+
    +
    +

    Buttons with icons

    +

    Label your button with text and add an icon to communiacate the action and make it easy to identify for users. Icons are easily recognized and improve the aesthetics of your button design, giving it a modern and atractive look.

    +

    Icons can be found here

    +
    +
    +
    + + + + + + +
    -
    -
    -
    - 
    <button type="button" class="btn">
+                      
    
+                        
    
+                          
    <button type="button" class="btn">
+  <!-- Download SVG icon from http://tabler-icons.io/i/upload -->
   <!-- SVG icon code -->
   Upload
 </button>
 <button type="button" class="btn btn-warning">
+  <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
   <!-- SVG icon code -->
   I like
 </button>
 <button type="button" class="btn btn-success">
+  <!-- Download SVG icon from http://tabler-icons.io/i/check -->
   <!-- SVG icon code -->
   I agree
 </button>
 <button type="button" class="btn btn-primary">
+  <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
   <!-- SVG icon code -->
   More
 </button>
 <button type="button" class="btn btn-danger">
+  <!-- Download SVG icon from http://tabler-icons.io/i/link -->
   <!-- SVG icon code -->
   Link
 </button>
 <button type="button" class="btn btn-info">
+  <!-- Download SVG icon from http://tabler-icons.io/i/message-circle -->
   <!-- SVG icon code -->
   Comment
 </button>
    
-                      
    
-                    
    
-                    
    Social buttons
    
-                    
    You can use the icons of popular social networking sites, which users are familiar with. Thanks to buttons with social media icons users can share content or follow a website with just one click, without leaving the website.
    
-                    
    
-                      
    
-                        
    
-                          
-                            
-                            Facebook
-                          
-                          
-                            
-                            Twitter
-                          
-                          
-                            
-                            Google
-                          
-                          
-                            
-                            Youtube
-                          
-                          
-                            
-                            Vimeo
-                          
-                          
-                            
-                            Dribbble
-                          
-                          
-                            
-                            Github
-                          
-                          
-                            
-                            Instagram
-                          
-                          
-                            
-                            Pinterest
-                          
-                          
-                            
-                            VK
-                          
-                          
-                            
-                            RSS
-                          
-                          
-                            
-                            Flickr
-                          
-                          
-                            
-                            Bitbucker
-                          
-                          
-                            
-                            Tabler
-                          
+
    +
    +

    Social buttons

    +

    You can use the icons of popular social networking sites, which users are familiar with. Thanks to buttons with social media icons users can share content or follow a website with just one click, without leaving the website.

    +
    +
    +
    + + + + Facebook + + + + + Twitter + + + + + Google + + + + + Youtube + + + + + Vimeo + + + + + Dribbble + + + + + Github + + + + + Instagram + + + + + Pinterest + + + + + VK + + + + + RSS + + + + + Flickr + + + + + Bitbucker + + + + + Tabler + +
    -
    -
    -
    - 
    <a href="#" class="btn btn-facebook">
+                      
    
+                        
    
+                          
    <a href="#" class="btn btn-facebook">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-facebook -->
   <!-- SVG icon code -->
   Facebook
 </a>
 <a href="#" class="btn btn-twitter">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter -->
   <!-- SVG icon code -->
   Twitter
 </a>
 <a href="#" class="btn btn-google">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-google -->
   <!-- SVG icon code -->
   Google
 </a>
 <a href="#" class="btn btn-youtube">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-youtube -->
   <!-- SVG icon code -->
   Youtube
 </a>
 <a href="#" class="btn btn-vimeo">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-vimeo -->
   <!-- SVG icon code -->
   Vimeo
 </a>
 <a href="#" class="btn btn-dribbble">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-dribbble -->
   <!-- SVG icon code -->
   Dribbble
 </a>
 <a href="#" class="btn btn-github">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
   <!-- SVG icon code -->
   Github
 </a>
 <a href="#" class="btn btn-instagram">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-instagram -->
   <!-- SVG icon code -->
   Instagram
 </a>
 <a href="#" class="btn btn-pinterest">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-pinterest -->
   <!-- SVG icon code -->
   Pinterest
 </a>
 <a href="#" class="btn btn-vk">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-vk -->
   <!-- SVG icon code -->
   VK
 </a>
 <a href="#" class="btn btn-rss">
+  <!-- Download SVG icon from http://tabler-icons.io/i/rss -->
   <!-- SVG icon code -->
   RSS
 </a>
 <a href="#" class="btn btn-flickr">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-flickr -->
   <!-- SVG icon code -->
   Flickr
 </a>
 <a href="#" class="btn btn-bitbucket">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-bitbucket -->
   <!-- SVG icon code -->
   Bitbucker
 </a>
 <a href="#" class="btn btn-tabler">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-tabler -->
   <!-- SVG icon code -->
   Tabler
 </a>
    
-                      
    
-                    
    
-                    
    You can also add an icon without the name of a social networking site, if you want to display more buttons on a small space.
    
-                    
    
-                      
    
-                        
    
-                          
-                            
-                          
-                          
-                            
-                          
-                          
-                            
-                          
-                          
-                            
-                          
-                          
-                            
-                          
-                          
-                            
-                          
-                          
-                            
-                          
-                          
-                            
-                          
-                          
-                            
-                          
-                          
-                            
-                          
-                          
-                            
-                          
-                          
-                            
-                          
-                          
-                            
-                          
-                          
-                            
-                          
+
    +
    +

    You can also add an icon without the name of a social networking site, if you want to display more buttons on a small space.

    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    -
    -
    -
    - 
    <a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
+                      
    
+                        
    
+                          
    <a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-facebook -->
   <!-- SVG icon code -->
 </a>
 <a href="#" class="btn btn-twitter btn-icon" aria-label="Button">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter -->
   <!-- SVG icon code -->
 </a>
 <a href="#" class="btn btn-google btn-icon" aria-label="Button">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-google -->
   <!-- SVG icon code -->
 </a>
 <a href="#" class="btn btn-youtube btn-icon" aria-label="Button">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-youtube -->
   <!-- SVG icon code -->
 </a>
 <a href="#" class="btn btn-vimeo btn-icon" aria-label="Button">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-vimeo -->
   <!-- SVG icon code -->
 </a>
 <a href="#" class="btn btn-dribbble btn-icon" aria-label="Button">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-dribbble -->
   <!-- SVG icon code -->
 </a>
 <a href="#" class="btn btn-github btn-icon" aria-label="Button">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
   <!-- SVG icon code -->
 </a>
 <a href="#" class="btn btn-instagram btn-icon" aria-label="Button">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-instagram -->
   <!-- SVG icon code -->
 </a>
 <a href="#" class="btn btn-pinterest btn-icon" aria-label="Button">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-pinterest -->
   <!-- SVG icon code -->
 </a>
 <a href="#" class="btn btn-vk btn-icon" aria-label="Button">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-vk -->
   <!-- SVG icon code -->
 </a>
 <a href="#" class="btn btn-rss btn-icon" aria-label="Button">
+  <!-- Download SVG icon from http://tabler-icons.io/i/rss -->
   <!-- SVG icon code -->
 </a>
 <a href="#" class="btn btn-flickr btn-icon" aria-label="Button">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-flickr -->
   <!-- SVG icon code -->
 </a>
 <a href="#" class="btn btn-bitbucket btn-icon" aria-label="Button">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-bitbucket -->
   <!-- SVG icon code -->
 </a>
 <a href="#" class="btn btn-tabler btn-icon" aria-label="Button">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-tabler -->
   <!-- SVG icon code -->
 </a>
    
-                      
    
-                    
    
-                    
    Icon buttons
    
-                    
    Add the .btn-icon class to remove unnecessary padding from your button and use an icon without any additional label. Thanks to that, you can save space and make the action easy to recognize for international users.
    
-                    
    
-                      
    
-                        
    
-                          
-                            
-                          
-                          
-                            
-                          
-                          
-                            
-                          
-                          
-                            
-                          
-                          
-                            
-                          
-                          
-                            
-                          
-                          
-                            
-                          
+
    +
    +

    Icon buttons

    +

    Add the .btn-icon class to remove unnecessary padding from your button and use an icon without any additional label. Thanks to that, you can save space and make the action easy to recognize for international users.

    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    -
    -
    -
    - 
    <a href="#" class="btn btn-primary btn-icon" aria-label="Button">
+                      
    
+                        
    
+                          
    <a href="#" class="btn btn-primary btn-icon" aria-label="Button">
+  <!-- Download SVG icon from http://tabler-icons.io/i/activity -->
   <!-- SVG icon code -->
 </a>
 <a href="#" class="btn btn-github btn-icon" aria-label="Button">
+  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
   <!-- SVG icon code -->
 </a>
 <a href="#" class="btn btn-success btn-icon" aria-label="Button">
+  <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
   <!-- SVG icon code -->
 </a>
 <a href="#" class="btn btn-warning btn-icon" aria-label="Button">
+  <!-- Download SVG icon from http://tabler-icons.io/i/star -->
   <!-- SVG icon code -->
 </a>
 <a href="#" class="btn btn-danger btn-icon" aria-label="Button">
+  <!-- Download SVG icon from http://tabler-icons.io/i/trash -->
   <!-- SVG icon code -->
 </a>
 <a href="#" class="btn btn-purple btn-icon" aria-label="Button">
+  <!-- Download SVG icon from http://tabler-icons.io/i/chart-bar -->
   <!-- SVG icon code -->
 </a>
 <a href="#" class="btn btn-white btn-icon" aria-label="Button">
+  <!-- Download SVG icon from http://tabler-icons.io/i/git-merge -->
   <!-- SVG icon code -->
 </a>
    
-                      
    
-                    
    
-                    
-                    
    Create a dropdown button that will encourage users to click for more options. You can add a label with an icon or remove the label and add an icon on its own if you want to save space. Choose the option that will best suit your design and improve the user experience.
    
-                    
    
-                      
    
-                        
    
-                          
    
-                            
-                            
    
-                              
-                                Action
-                              
-                              
-                                Another action
-                              
+
    +
    + +

    Create a dropdown button that will encourage users to click for more options. You can add a label with an icon or remove the label and add an icon on its own if you want to save space. Choose the option that will best suit your design and improve the user experience.

    +
    +
    +
    +
    + +
    + + Action + + + Another action + +
    -
    -
    - -
    - - Action - - - Another action - +
    + +
    + + Action + + + Another action + +
    -
    -
    - -
    - - Action - - - Another action - +
    + +
    + + Action + + + Another action + +
    -
    -
    -
    - 
    <div class="dropdown">
+                      
    
+                        
    
+                          
    <div class="dropdown">
   <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
+    <!-- Download SVG icon from http://tabler-icons.io/i/calendar -->
     <!-- SVG icon code -->
   </button>
   <div class="dropdown-menu">
@@ -1434,6 +1460,7 @@
 </div>
 <div class="dropdown">
   <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
+    <!-- Download SVG icon from http://tabler-icons.io/i/calendar -->
     <!-- SVG icon code -->
     Show calendar
   </button>
@@ -1459,97 +1486,97 @@
     </a>
   </div>
 </div>
    
-                      
    
-                    
    
-                    
    Loading buttons
    
-                    
    Add the .btn-loading class to show a button’s loading state, which can be useful in the case of operations that take longer to process. Thanks to that, users will be aware of the current state of their action and won’t give it up before it’s finished.
    
-                    
    
-                      
    
-                        
    
-                          
-                            Button
-                          
-                          
-                            Loading button with loooong content
-                          
+
    +
    +

    Loading buttons

    +

    Add the .btn-loading class to show a button’s loading state, which can be useful in the case of operations that take longer to process. Thanks to that, users will be aware of the current state of their action and won’t give it up before it’s finished.

    +
    +
    +
    + + Button + + + Loading button with loooong content + +
    -
    -
    -
    - 
    <a href="#" class="btn btn-primary btn-loading">
+                      
    
+                        
    
+                          
    <a href="#" class="btn btn-primary btn-loading">
   Button
 </a>
 <a href="#" class="btn btn-primary btn-loading">
   Loading button with loooong content
 </a>
    
-                      
    
-                    
    
-                    
    
-                      
    
-                        
-                          
-                          Button
-                        
+
    -
    -
    -
    - 
    <a href="#" class="btn btn-primary">
+                      
    
+                        
    
+                          
+                            
+                            Button
+                          
+                        
    
+                      
    
+                      
    
+                        
    
+                          
    <a href="#" class="btn btn-primary">
   <span class="spinner-border spinner-border-sm me-2" role="status"></span>
   Button
 </a>
    
-                      
    
-                    
    
-                    
    List of buttons
    
-                    
    Create a list of buttons using the .btn-list container to display different actions a user can take. If you add aditional styling, such as colours, you will be able to focus users’ attention on a particular action or suggest the result.
    
-                    
    
-                      
    
-                        
    
-                          Save changes
-                          Save and continue
-                          Cancel
+
    +
    +

    List of buttons

    +

    Create a list of buttons using the .btn-list container to display different actions a user can take. If you add aditional styling, such as colours, you will be able to focus users’ attention on a particular action or suggest the result.

    +
    +
    +
    + Save changes + Save and continue + Cancel +
    -
    -
    -
    - 
    <div class="btn-list">
+                      
    
+                        
    
+                          
    <div class="btn-list">
   <a href="#" class="btn btn-success">Save changes</a>
   <a href="#" class="btn">Save and continue</a>
   <a href="#" class="btn btn-danger">Cancel</a>
 </div>
    
-                      
    
-                    
    
-                    
    If the list is long, it will be wrapped and some buttons will be moved to the next line, keeping them all evenly spaced.
    
-                    
    
-                      
    
-                        
    
-                          One
-                          Two
-                          Three
-                          Four
-                          Five
-                          Six
-                          Seven
-                          Eight
-                          Nine
-                          Ten
-                          Eleven
-                          Twelve
-                          Thirteen
-                          Fourteen
-                          Fifteen
-                          Sixteen
-                          Seventeen
-                          Eighteen
-                          Nineteen
+
    +
    +

    If the list is long, it will be wrapped and some buttons will be moved to the next line, keeping them all evenly spaced.

    +
    +
    +
    + One + Two + Three + Four + Five + Six + Seven + Eight + Nine + Ten + Eleven + Twelve + Thirteen + Fourteen + Fifteen + Sixteen + Seventeen + Eighteen + Nineteen +
    -
    -
    -
    - 
    <div class="btn-list">
+                      
    
+                        
    
+                          
    <div class="btn-list">
   <a href="#" class="btn">One</a>
   <a href="#" class="btn">Two</a>
   <a href="#" class="btn">Three</a>
@@ -1570,82 +1597,82 @@
   <a href="#" class="btn">Eighteen</a>
   <a href="#" class="btn">Nineteen</a>
 </div>
    
-                      
    
-                    
    
-                    
    Use the .text-center or the .text-end modifiers to change the buttons’ alignment and place them where they suit best.
    
-                    
    
-                      
    
-                        
    
-                          Save and continue
-                          Save changes
+
    +
    +

    Use the .text-center or the .text-end modifiers to change the buttons’ alignment and place them where they suit best.

    +
    +
    +
    + Save and continue + Save changes +
    -
    -
    -
    - 
    <div class="btn-list justify-content-center">
+                      
    
+                        
    
+                          
    <div class="btn-list justify-content-center">
   <a href="#" class="btn">Save and continue</a>
   <a href="#" class="btn btn-primary">Save changes</a>
 </div>
    
-                      
    
-                    
    
-                    
    
-                      
    
-                        
    
-                          Save and continue
-                          Save changes
+
    +
    +
    +
    +
    + Save and continue + Save changes +
    -
    -
    -
    - 
    <div class="btn-list justify-content-end">
+                      
    
+                        
    
+                          
    <div class="btn-list justify-content-end">
   <a href="#" class="btn">Save and continue</a>
   <a href="#" class="btn btn-primary">Save changes</a>
 </div>
    
-                      
    
-                    
    
-                    
    
-                      
    
-                        
    
-                          Delete
-                          Save and continue
-                          Save changes
+
    +
    +
    +
    +
    + Delete + Save and continue + Save changes +
    -
    -
    -
    - 
    <div class="btn-list">
+                      
    
+                        
    
+                          
    <div class="btn-list">
   <a href="#" class="btn btn-outline-danger me-auto">Delete</a>
   <a href="#" class="btn">Save and continue</a>
   <a href="#" class="btn btn-primary">Save changes</a>
 </div>
    
-                      
    
-                    
    
-                    
    Buttons with avatars
    
-                    
    Use buttons with avatars to simplify the process of interaction and make your design more personalized. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space.
    
-                    
    
-                      
    
-                        
    
-                          
-                            
-                            Avatar
-                          
-                          
-                            
-                            Avatar
-                          
-                          
-                            
-                            Avatar
-                          
+
    +
    +

    Buttons with avatars

    +

    Use buttons with avatars to simplify the process of interaction and make your design more personalized. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space.

    +
    +
    +
    + + + Avatar + + + + Avatar + + + + Avatar + +
    -
    -
    -
    - 
    <a href="#" class="btn">
+                      
    
+                        
    
+                          
    <a href="#" class="btn">
   <span class="avatar" style="background-image: url(...)"></span>
   Avatar
 </a>
@@ -1657,7 +1684,8 @@
   <span class="avatar" style="background-image: url(...)"></span>
   Avatar
 </a>
    
-                      
    
+
    +
    @@ -1673,17 +1701,24 @@
  • Documentation
  • License
  • Source code
    • +
  • + + + + Sponsor + +
    • @@ -1693,7 +1728,6 @@ - diff --git a/demo/docs/cards.html b/demo/docs/cards.html index e78fc4f83..ce729177f 100644 --- a/demo/docs/cards.html +++ b/demo/docs/cards.html @@ -1,10 +1,10 @@ @@ -21,7 +21,7 @@ -
    +
    +

    + + Tabler + +

    +
    +
    +
    + + + + Source code + + + + + Sponsor + +
    +
    +
    + + + + + +
    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. +
    +
    +
    +
    +
    + + +
    +
    Paweł Kuna
    +
    UI Designer
    +
    +     +
    + Set status + Profile & account + Feedback +
    + Settings + Logout +
    +
    +
    +
    +
    +
    + +
    +
    +
    + +
    +
    +
    +

    + Documentation +

    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +

    Download

    +
    +

    Download Tabler to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, yarn and more.

    +
    +

    CDN via unpkg

    +

    All files included in @tabler/core npm package are available over a unpkg CDN. Use it to deliver cached version of Tabler’s compiled CSS and JS to your project.

    +
    +
    + 
    <script src="https://unpkg.com/@tabler/core@1.0.0-beta2/dist/js/tabler.min.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/@tabler/core@1.0.0-beta2/dist/css/tabler.min.css">
+
    +
    +
    +

    You can also include additional Tabler plugins:

    +
    +
    + 
    <link rel="stylesheet" href="https://unpkg.com/@tabler/core@1.0.0-beta2/dist/css/tabler-flags.min.css">
+<link rel="stylesheet" href="https://unpkg.com/@tabler/core@1.0.0-beta2/dist/css/tabler-payments.min.css">
+<link rel="stylesheet" href="https://unpkg.com/@tabler/core@1.0.0-beta2/dist/css/tabler-vendors.min.css">
+
    +
    +
    +

    Package managers

    +

    Install Tabler in your Node.js powered apps with the npm package:

    +
    +
    + 
    npm install @tabler/core
+
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    + + + + + \ No newline at end of file diff --git a/demo/docs/dropdowns.html b/demo/docs/dropdowns.html index 28f276c0a..d1e797100 100644 --- a/demo/docs/dropdowns.html +++ b/demo/docs/dropdowns.html @@ -1,10 +1,10 @@ @@ -21,7 +21,7 @@ -
    +
    +

    + + Tabler + +

    +
    +
    +
    + + + + Source code + + + + + Sponsor + +
    +
    +
    + + + + + +
    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. +
    +
    +
    +
    +
    + + +
    +
    Paweł Kuna
    +
    UI Designer
    +
    +     +
    + Set status + Profile & account + Feedback +
    + Settings + Logout +
    +
    +
    +
    +
    +
    + +
    +
    +
    + +
    +
    +
    +

    + Documentation +

    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +

    Color check

    +
    +
    +

    Your input controls can come in a variety of colors, depending on your preferences. Click here to see the list of available colors.

    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +
    + 
    <div class="mb-3">
+  <label class="form-label">Color Input</label>
+  <div class="row g-2">
+    <div class="col-auto">
+      <label class="form-colorinput">
+        <input name="color" type="radio" value="dark" class="form-colorinput-input" />
+        <span class="form-colorinput-color bg-dark"></span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-colorinput form-colorinput-light">
+        <input name="color" type="radio" value="white" class="form-colorinput-input"  checked/>
+        <span class="form-colorinput-color bg-white"></span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-colorinput">
+        <input name="color" type="radio" value="blue" class="form-colorinput-input" />
+        <span class="form-colorinput-color bg-blue"></span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-colorinput">
+        <input name="color" type="radio" value="azure" class="form-colorinput-input" />
+        <span class="form-colorinput-color bg-azure"></span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-colorinput">
+        <input name="color" type="radio" value="indigo" class="form-colorinput-input" />
+        <span class="form-colorinput-color bg-indigo"></span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-colorinput">
+        <input name="color" type="radio" value="purple" class="form-colorinput-input" />
+        <span class="form-colorinput-color bg-purple"></span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-colorinput">
+        <input name="color" type="radio" value="pink" class="form-colorinput-input" />
+        <span class="form-colorinput-color bg-pink"></span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-colorinput">
+        <input name="color" type="radio" value="red" class="form-colorinput-input" />
+        <span class="form-colorinput-color bg-red"></span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-colorinput">
+        <input name="color" type="radio" value="orange" class="form-colorinput-input" />
+        <span class="form-colorinput-color bg-orange"></span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-colorinput">
+        <input name="color" type="radio" value="yellow" class="form-colorinput-input" />
+        <span class="form-colorinput-color bg-yellow"></span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-colorinput">
+        <input name="color" type="radio" value="lime" class="form-colorinput-input" />
+        <span class="form-colorinput-color bg-lime"></span>
+      </label>
+    </div>
+  </div>
+</div>
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +
    + 
    <div class="mb-3">
+  <label class="form-label">Color Input</label>
+  <div class="row g-2">
+    <div class="col-auto">
+      <label class="form-colorinput">
+        <input name="color-rounded" type="radio" value="dark" class="form-colorinput-input" />
+        <span class="form-colorinput-color bg-dark rounded-circle"></span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-colorinput form-colorinput-light">
+        <input name="color-rounded" type="radio" value="white" class="form-colorinput-input"  checked/>
+        <span class="form-colorinput-color bg-white rounded-circle"></span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-colorinput">
+        <input name="color-rounded" type="radio" value="blue" class="form-colorinput-input" />
+        <span class="form-colorinput-color bg-blue rounded-circle"></span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-colorinput">
+        <input name="color-rounded" type="radio" value="azure" class="form-colorinput-input" />
+        <span class="form-colorinput-color bg-azure rounded-circle"></span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-colorinput">
+        <input name="color-rounded" type="radio" value="indigo" class="form-colorinput-input" />
+        <span class="form-colorinput-color bg-indigo rounded-circle"></span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-colorinput">
+        <input name="color-rounded" type="radio" value="purple" class="form-colorinput-input" />
+        <span class="form-colorinput-color bg-purple rounded-circle"></span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-colorinput">
+        <input name="color-rounded" type="radio" value="pink" class="form-colorinput-input" />
+        <span class="form-colorinput-color bg-pink rounded-circle"></span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-colorinput">
+        <input name="color-rounded" type="radio" value="red" class="form-colorinput-input" />
+        <span class="form-colorinput-color bg-red rounded-circle"></span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-colorinput">
+        <input name="color-rounded" type="radio" value="orange" class="form-colorinput-input" />
+        <span class="form-colorinput-color bg-orange rounded-circle"></span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-colorinput">
+        <input name="color-rounded" type="radio" value="yellow" class="form-colorinput-input" />
+        <span class="form-colorinput-color bg-yellow rounded-circle"></span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-colorinput">
+        <input name="color-rounded" type="radio" value="lime" class="form-colorinput-input" />
+        <span class="form-colorinput-color bg-lime rounded-circle"></span>
+      </label>
+    </div>
+  </div>
+</div>
    +
    +
    +

    Input color picker

    +

    Add an color picker to your form to let users customise it according to their preferences.

    +
    +
    +
    + + +
    +
    +
    +
    +
    + 
    <div class="mb-3">
+  <label class="form-label">Color picker</label>
+  <input type="color" class="form-control form-control-color" value="#206bc4" title="Choose your color">
+</div>
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    + + + + + \ No newline at end of file diff --git a/demo/docs/form-elements.html b/demo/docs/form-elements.html index eaf8d50b7..e31505bed 100644 --- a/demo/docs/form-elements.html +++ b/demo/docs/form-elements.html @@ -1,10 +1,10 @@ @@ -14,7 +14,6 @@ Form elements - Tabler - Premium and Open Source dashboard template with responsive and high quality UI. - @@ -22,7 +21,7 @@ -
    +
    +

    + + Tabler + +

    +
    +
    +
    + + + + Source code + + + + + Sponsor + +
    +
    +
    + + + + + +
    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. +
    +
    +
    +
    +
    + + +
    +
    Paweł Kuna
    +
    UI Designer
    +
    +     +
    + Set status + Profile & account + Feedback +
    + Settings + Logout +
    +
    +
    +
    +
    +
    + +
    +
    +
    + +
    +
    +
    +

    + Documentation +

    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +

    Form fieldset

    +
    +
    +

    Group parts of your form to make it well-structured and clearer for users, using the fieldset element.

    +
    +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    + +
    +
    +
    +
    +
    + 
    <fieldset class="form-fieldset">
+  <div class="mb-3">
+    <label class="form-label required">Full name</label>
+    <input type="text" class="form-control" autocomplete="off"/>
+  </div>
+  <div class="mb-3">
+    <label class="form-label required">Company</label>
+    <input type="text" class="form-control"  autocomplete="off"/>
+  </div>
+  <div class="mb-3">
+    <label class="form-label required">Email</label>
+    <input type="email" class="form-control"  autocomplete="off"/>
+  </div>
+  <div class="mb-3">
+    <label class="form-label">Phone number</label>
+    <input type="tel" class="form-control" autocomplete="off"/>
+  </div>
+  <label class="form-check">
+    <input type="checkbox" class="form-check-input"/>
+    <span class="form-check-label required">I agree to the Terms & Conditions</span>
+  </label>
+</fieldset>
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    + + + + + \ No newline at end of file diff --git a/demo/docs/form-helpers.html b/demo/docs/form-helpers.html index 7d66954c9..3a38fb6b4 100644 --- a/demo/docs/form-helpers.html +++ b/demo/docs/form-helpers.html @@ -1,10 +1,10 @@ @@ -21,7 +21,7 @@ -
    +
    +

    + + Tabler + +

    +
    +
    +
    + + + + Source code + + + + + Sponsor + +
    +
    +
    + + + + + +
    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. +
    +
    +
    +
    +
    + + +
    +
    Paweł Kuna
    +
    UI Designer
    +
    +     +
    + Set status + Profile & account + Feedback +
    + Settings + Logout +
    +
    +
    +
    +
    +
    + +
    +
    +
    + +
    +
    +
    +

    + Documentation +

    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +

    Image check

    +
    +
    +

    Add an image check to your form and give users visually attractive options to choose from.

    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    + 
    <div class="mb-3">
+  <label class="form-label">Image Check</label>
+  <div class="row g-2">
+    <div class="col-6 col-sm-4">
+      <label class="form-imagecheck mb-2">
+        <input name="form-imagecheck" type="checkbox" value="1" class="form-imagecheck-input" />
+        <span class="form-imagecheck-figure">
+          <img src="..." alt="Breakfast served with tea, bread and eggs" class="form-imagecheck-image">
+        </span>
+      </label>
+    </div>
+    <div class="col-6 col-sm-4">
+      <label class="form-imagecheck mb-2">
+        <input name="form-imagecheck" type="checkbox" value="2" class="form-imagecheck-input"  checked/>
+        <span class="form-imagecheck-figure">
+          <img src="..." alt="Book, fairy lights" class="form-imagecheck-image">
+        </span>
+      </label>
+    </div>
+    <div class="col-6 col-sm-4">
+      <label class="form-imagecheck mb-2">
+        <input name="form-imagecheck" type="checkbox" value="3" class="form-imagecheck-input" />
+        <span class="form-imagecheck-figure">
+          <img src="..." alt="Healthy Dinner" class="form-imagecheck-image">
+        </span>
+      </label>
+    </div>
+    <div class="col-6 col-sm-4">
+      <label class="form-imagecheck mb-2">
+        <input name="form-imagecheck" type="checkbox" value="4" class="form-imagecheck-input"  checked/>
+        <span class="form-imagecheck-figure">
+          <img src="..." alt="Aperol Spritz is a cocktail consisting of prosecco, aperitif and soda water" class="form-imagecheck-image">
+        </span>
+      </label>
+    </div>
+    <div class="col-6 col-sm-4">
+      <label class="form-imagecheck mb-2">
+        <input name="form-imagecheck" type="checkbox" value="5" class="form-imagecheck-input" />
+        <span class="form-imagecheck-figure">
+          <img src="..." alt="Beautiful blonde woman on a wooden pier by the lake" class="form-imagecheck-image">
+        </span>
+      </label>
+    </div>
+    <div class="col-6 col-sm-4">
+      <label class="form-imagecheck mb-2">
+        <input name="form-imagecheck" type="checkbox" value="6" class="form-imagecheck-input" />
+        <span class="form-imagecheck-figure">
+          <img src="..." alt="Still life of mandarin oranges with leaves" class="form-imagecheck-image">
+        </span>
+      </label>
+    </div>
+    <div class="col-6 col-sm-4">
+      <label class="form-imagecheck mb-2">
+        <input name="form-imagecheck" type="checkbox" value="7" class="form-imagecheck-input"  checked/>
+        <span class="form-imagecheck-figure">
+          <img src="..." alt="Blonde woman having a healthy snack at the wooden pier" class="form-imagecheck-image">
+        </span>
+      </label>
+    </div>
+    <div class="col-6 col-sm-4">
+      <label class="form-imagecheck mb-2">
+        <input name="form-imagecheck" type="checkbox" value="8" class="form-imagecheck-input" />
+        <span class="form-imagecheck-figure">
+          <img src="..." alt="Woman working on a laptop while enjoying a breakfast coffee and chocolate in bed" class="form-imagecheck-image">
+        </span>
+      </label>
+    </div>
+    <div class="col-6 col-sm-4">
+      <label class="form-imagecheck mb-2">
+        <input name="form-imagecheck" type="checkbox" value="9" class="form-imagecheck-input" />
+        <span class="form-imagecheck-figure">
+          <img src="..." alt="Overhead view of macarons on a marble slab" class="form-imagecheck-image">
+        </span>
+      </label>
+    </div>
+  </div>
+</div>
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +
    + 
    <div class="mb-3">
+  <label class="form-label">Person Check</label>
+  <div class="row g-2">
+    <div class="col-auto">
+      <label class="form-imagecheck mb-2">
+        <input name="form-imagecheck" type="checkbox" value="1" class="form-imagecheck-input" />
+        <span class="form-imagecheck-figure">
+          <span class="form-imagecheck-image">
+            <span class="avatar avatar-md" style="background-image: url(...)"></span>
+          </span>
+        </span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-imagecheck mb-2">
+        <input name="form-imagecheck" type="checkbox" value="2" class="form-imagecheck-input"  checked/>
+        <span class="form-imagecheck-figure">
+          <span class="form-imagecheck-image">
+            <span class="avatar avatar-md">HS</span>
+          </span>
+        </span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-imagecheck mb-2">
+        <input name="form-imagecheck" type="checkbox" value="3" class="form-imagecheck-input" />
+        <span class="form-imagecheck-figure">
+          <span class="form-imagecheck-image">
+            <span class="avatar avatar-md" style="background-image: url(...)"></span>
+          </span>
+        </span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-imagecheck mb-2">
+        <input name="form-imagecheck" type="checkbox" value="4" class="form-imagecheck-input"  checked/>
+        <span class="form-imagecheck-figure">
+          <span class="form-imagecheck-image">
+            <span class="avatar avatar-md" style="background-image: url(...)"></span>
+          </span>
+        </span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-imagecheck mb-2">
+        <input name="form-imagecheck" type="checkbox" value="5" class="form-imagecheck-input" />
+        <span class="form-imagecheck-figure">
+          <span class="form-imagecheck-image">
+            <span class="avatar avatar-md" style="background-image: url(...)"></span>
+          </span>
+        </span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-imagecheck mb-2">
+        <input name="form-imagecheck" type="checkbox" value="6" class="form-imagecheck-input" />
+        <span class="form-imagecheck-figure">
+          <span class="form-imagecheck-image">
+            <span class="avatar avatar-md">SA</span>
+          </span>
+        </span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-imagecheck mb-2">
+        <input name="form-imagecheck" type="checkbox" value="7" class="form-imagecheck-input"  checked/>
+        <span class="form-imagecheck-figure">
+          <span class="form-imagecheck-image">
+            <span class="avatar avatar-md" style="background-image: url(...)"></span>
+          </span>
+        </span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-imagecheck mb-2">
+        <input name="form-imagecheck" type="checkbox" value="8" class="form-imagecheck-input" />
+        <span class="form-imagecheck-figure">
+          <span class="form-imagecheck-image">
+            <span class="avatar avatar-md" style="background-image: url(...)"></span>
+          </span>
+        </span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-imagecheck mb-2">
+        <input name="form-imagecheck" type="checkbox" value="9" class="form-imagecheck-input" />
+        <span class="form-imagecheck-figure">
+          <span class="form-imagecheck-image">
+            <span class="avatar avatar-md" style="background-image: url(...)"></span>
+          </span>
+        </span>
+      </label>
+    </div>
+  </div>
+</div>
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    + + + + + \ No newline at end of file diff --git a/demo/docs/form-selectboxes.html b/demo/docs/form-selectboxes.html new file mode 100644 index 000000000..f7bb86d7f --- /dev/null +++ b/demo/docs/form-selectboxes.html @@ -0,0 +1,1184 @@ + + + + + + + + Form selectboxes - Tabler - Premium and Open Source dashboard template with responsive and high quality UI. + + + + + + + + +
    +
    +
    + +

    + + Tabler + +

    +
    +
    +
    + + + + Source code + + + + + Sponsor + +
    +
    +
    + + + + + +
    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. +
    +
    +
    +
    +
    + + +
    +
    Paweł Kuna
    +
    UI Designer
    +
    +     +
    + Set status + Profile & account + Feedback +
    + Settings + Logout +
    +
    +
    +
    +
    +
    + +
    +
    +
    + +
    +
    +
    +

    + Documentation +

    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +

    Form selectboxes

    +
    +
    +

    Add selectboxes to make your form more intuitive by providing users with a set of options to choose from. You can add simple selectboxes with a label, use icons only or icons with labels. Alternatively, you can use pill selectboxes if they go well with your design.

    +
    +
    +
    + +
    + + + + +
    +
    +
    + +
    + + + + + +
    +
    +
    + +
    + + + + +
    +
    +
    + +
    + + + + +
    +
    +
    +
    +
    +
    + 
    <div class="mb-3">
+  <label class="form-label">Simple selectgroup</label>
+  <div class="form-selectgroup">
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked>
+      <span class="form-selectgroup-label">HTML</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input">
+      <span class="form-selectgroup-label">CSS</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="PHP" class="form-selectgroup-input">
+      <span class="form-selectgroup-label">PHP</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input">
+      <span class="form-selectgroup-label">JavaScript</span>
+    </label>
+  </div>
+</div>
+<div class="mb-3">
+  <label class="form-label">Icon input</label>
+  <div class="form-selectgroup">
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="sun" class="form-selectgroup-input" checked>
+      <span class="form-selectgroup-label"><!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+        <!-- SVG icon code -->
+      </span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="moon" class="form-selectgroup-input">
+      <span class="form-selectgroup-label"><!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+        <!-- SVG icon code -->
+      </span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="cloud-rain" class="form-selectgroup-input">
+      <span class="form-selectgroup-label"><!-- Download SVG icon from http://tabler-icons.io/i/cloud-rain -->
+        <!-- SVG icon code -->
+      </span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="cloud" class="form-selectgroup-input">
+      <span class="form-selectgroup-label"><!-- Download SVG icon from http://tabler-icons.io/i/cloud -->
+        <!-- SVG icon code -->
+      </span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="Other" class="form-selectgroup-input">
+      <span class="form-selectgroup-label">Other</span>
+    </label>
+  </div>
+</div>
+<div class="mb-3">
+  <label class="form-label">Selectgroup with icons and text</label>
+  <div class="form-selectgroup">
+    <label class="form-selectgroup-item">
+      <input type="radio" name="icons" value="home" class="form-selectgroup-input" checked>
+      <span class="form-selectgroup-label"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
+        <!-- SVG icon code with class="me-1" -->
+        Home</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="radio" name="icons" value="user" class="form-selectgroup-input">
+      <span class="form-selectgroup-label"><!-- Download SVG icon from http://tabler-icons.io/i/user -->
+        <!-- SVG icon code with class="me-1" -->
+        User</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="radio" name="icons" value="circle" class="form-selectgroup-input">
+      <span class="form-selectgroup-label"><!-- Download SVG icon from http://tabler-icons.io/i/circle -->
+        <!-- SVG icon code with class="me-1" -->
+        Circle</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="radio" name="icons" value="square" class="form-selectgroup-input">
+      <span class="form-selectgroup-label"><!-- Download SVG icon from http://tabler-icons.io/i/square -->
+        <!-- SVG icon code with class="me-1" -->
+        Square</span>
+    </label>
+  </div>
+</div>
+<div class="mb-3">
+  <label class="form-label">Different style</label>
+  <div class="form-selectgroup form-selectgroup-pills">
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked>
+      <span class="form-selectgroup-label">HTML</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input">
+      <span class="form-selectgroup-label">CSS</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="PHP" class="form-selectgroup-input">
+      <span class="form-selectgroup-label">PHP</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input">
+      <span class="form-selectgroup-label">JavaScript</span>
+    </label>
+  </div>
+</div>
    +
    +
    +

    Advanced selectboxes

    +

    Use more advanced selectboxes to display the range of available options. You can choose selectboxes with radio buttons, if you want users to select only one option or with checkboxes, if they are allowed to choose multiple options.

    +
    +
    +
    + +
    + + + +
    +
    +
    + +
    + + + + + +
    +
    +
    +
    +
    +
    + 
    <div class="mb-3">
+  <label class="form-label">Payment method</label>
+  <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
+    <label class="form-selectgroup-item flex-fill">
+      <input type="radio" name="form-payment" value="visa" class="form-selectgroup-input">
+      <div class="form-selectgroup-label d-flex align-items-center p-3">
+        <div class="me-3">
+          <span class="form-selectgroup-check"></span>
+        </div>
+        <div>
+          <span class="payment payment-provider-visa payment-xs me-2"></span>
+          ending in <strong>7998</strong>
+        </div>
+      </div>
+    </label>
+    <label class="form-selectgroup-item flex-fill">
+      <input type="radio" name="form-payment" value="mastercard" class="form-selectgroup-input" checked>
+      <div class="form-selectgroup-label d-flex align-items-center p-3">
+        <div class="me-3">
+          <span class="form-selectgroup-check"></span>
+        </div>
+        <div>
+          <span class="payment payment-provider-mastercard payment-xs me-2"></span>
+          ending in <strong>2807</strong>
+        </div>
+      </div>
+    </label>
+    <label class="form-selectgroup-item flex-fill">
+      <input type="radio" name="form-payment" value="paypal" class="form-selectgroup-input">
+      <div class="form-selectgroup-label d-flex align-items-center p-3">
+        <div class="me-3">
+          <span class="form-selectgroup-check"></span>
+        </div>
+        <div>
+          <span class="payment payment-provider-paypal payment-xs me-2"></span>
+        </div>
+      </div>
+    </label>
+  </div>
+</div>
+<div class="mb-3">
+  <label class="form-label">Project Manager</label>
+  <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
+    <label class="form-selectgroup-item flex-fill">
+      <input type="checkbox" name="form-project-manager[]" value="1" class="form-selectgroup-input" >
+      <div class="form-selectgroup-label d-flex align-items-center p-3">
+        <div class="me-3">
+          <span class="form-selectgroup-check"></span>
+        </div>
+        <div class="form-selectgroup-label-content d-flex align-items-center">
+          <span class="avatar me-3" style="background-image: url(...)"></span>
+          <div>
+            <div class="font-weight-medium">Paweł Kuna</div>
+            <div class="text-muted">UI Designer</div>
+          </div>
+        </div>
+      </div>
+    </label>
+    <label class="form-selectgroup-item flex-fill">
+      <input type="checkbox" name="form-project-manager[]" value="2" class="form-selectgroup-input"  checked>
+      <div class="form-selectgroup-label d-flex align-items-center p-3">
+        <div class="me-3">
+          <span class="form-selectgroup-check"></span>
+        </div>
+        <div class="form-selectgroup-label-content d-flex align-items-center">
+          <span class="avatar me-3">JL</span>
+          <div>
+            <div class="font-weight-medium">Jeffie Lewzey</div>
+            <div class="text-muted">Chemical Engineer</div>
+          </div>
+        </div>
+      </div>
+    </label>
+    <label class="form-selectgroup-item flex-fill">
+      <input type="checkbox" name="form-project-manager[]" value="3" class="form-selectgroup-input" >
+      <div class="form-selectgroup-label d-flex align-items-center p-3">
+        <div class="me-3">
+          <span class="form-selectgroup-check"></span>
+        </div>
+        <div class="form-selectgroup-label-content d-flex align-items-center">
+          <span class="avatar me-3" style="background-image: url(...)"></span>
+          <div>
+            <div class="font-weight-medium">Mallory Hulme</div>
+            <div class="text-muted">Geologist IV</div>
+          </div>
+        </div>
+      </div>
+    </label>
+    <label class="form-selectgroup-item flex-fill">
+      <input type="checkbox" name="form-project-manager[]" value="4" class="form-selectgroup-input" >
+      <div class="form-selectgroup-label d-flex align-items-center p-3">
+        <div class="me-3">
+          <span class="form-selectgroup-check"></span>
+        </div>
+        <div class="form-selectgroup-label-content d-flex align-items-center">
+          <span class="avatar me-3" style="background-image: url(...)"></span>
+          <div>
+            <div class="font-weight-medium">Dunn Slane</div>
+            <div class="text-muted">Research Nurse</div>
+          </div>
+        </div>
+      </div>
+    </label>
+    <label class="form-selectgroup-item flex-fill">
+      <input type="checkbox" name="form-project-manager[]" value="5" class="form-selectgroup-input" >
+      <div class="form-selectgroup-label d-flex align-items-center p-3">
+        <div class="me-3">
+          <span class="form-selectgroup-check"></span>
+        </div>
+        <div class="form-selectgroup-label-content d-flex align-items-center">
+          <span class="avatar me-3" style="background-image: url(...)"></span>
+          <div>
+            <div class="font-weight-medium">Emmy Levet</div>
+            <div class="text-muted">VP Product Management</div>
+          </div>
+        </div>
+      </div>
+    </label>
+  </div>
+</div>
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    + + + + + \ No newline at end of file diff --git a/demo/docs/form-validation.html b/demo/docs/form-validation.html new file mode 100644 index 000000000..9aee1c0c3 --- /dev/null +++ b/demo/docs/form-validation.html @@ -0,0 +1,758 @@ + + + + + + + + Validation states - Tabler - Premium and Open Source dashboard template with responsive and high quality UI. + + + + + + + + +
    +
    +
    + +

    + + Tabler + +

    +
    +
    +
    + + + + Source code + + + + + Sponsor + +
    +
    +
    + + + + + +
    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. +
    +
    +
    +
    +
    + + +
    +
    Paweł Kuna
    +
    UI Designer
    +
    +     +
    + Set status + Profile & account + Feedback +
    + Settings + Logout +
    +
    +
    +
    +
    +
    + +
    +
    +
    + +
    +
    +
    +

    + Documentation +

    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +

    Validation states

    +
    +

    To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.

    +
    +
    +
    +
    + + + +
    Invalid feedback
    +
    +
    +
    +
    +
    + 
    <div class="mb-3">
+  <label class="form-label">Validation States</label>
+  <input type="text" class="form-control is-valid mb-2" placeholder="Valid State..">
+  <input type="text" class="form-control is-invalid" placeholder="Invalid State..">
+  <div class="invalid-feedback">Invalid feedback</div>
+</div>
    +
    +
    +

    Subtle validation states

    +

    If you prefer a more subtle manner of informing users of the input control validation state, you can use tick and cross symbols and resign from colored control frames and the validation feedback.

    +
    +
    +
    + + + +
    +
    +
    +
    +
    + 
    <div class="mb-3">
+  <label class="form-label">Validation States</label>
+  <input type="text" class="form-control is-valid is-valid-lite mb-2" placeholder="Valid State..">
+  <input type="text" class="form-control is-invalid is-invalid-lite" placeholder="Invalid State..">
+</div>
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    + + + + + \ No newline at end of file diff --git a/demo/docs/getting-started.html b/demo/docs/getting-started.html new file mode 100644 index 000000000..3461e16bb --- /dev/null +++ b/demo/docs/getting-started.html @@ -0,0 +1,742 @@ + + + + + + + + Getting started - Tabler - Premium and Open Source dashboard template with responsive and high quality UI. + + + + + + + + +
    +
    +
    + +

    + + Tabler + +

    +
    +
    +
    + + + + Source code + + + + + Sponsor + +
    +
    +
    + + + + + +
    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. +
    +
    +
    +
    +
    + + +
    +
    Paweł Kuna
    +
    UI Designer
    +
    +     +
    + Set status + Profile & account + Feedback +
    + Settings + Logout +
    +
    +
    +
    +
    +
    + +
    +
    +
    + +
    +
    +
    +

    + Documentation +

    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +

    Getting started

    +
    +
    +

    What are the benefits?

    +

    Tabler is a perfect solution if you want to create an interface which is not only user-friendly but also fully responsive. Thanks to the big choice of ready-made components, you can customize your design and adapt it to the needs of even the most demanding users. On top of that, Tabler is an open source solution, continuously developed and improved by the open source community.

    +

    Set up the environment

    +

    To use our build system and run our documentation locally, you’ll need a copy of Tabler’s source files. Follow the steps below:

    +
      +
    1. Install Node.js, which we use to manage our dependencies.
      2. +
    2. Navigate to the root /tabler directory and run npm install to install our local dependencies listed in package.json.
      3. +
    3. Install Ruby - the recommended version is 2.5.5.
      4. +
    4. Install Bundler with gem install bundler and, finally, run bundle install. It will install all Ruby dependencies, such as Jekyll and plugins.
      5. +
    +

    Windows users

    +
      +
    1. Install Git in C:\Program Files\git\bin directory and run npm config set script-shell "C:\Program Files\git\bin\bash.exe" to change the default shell.
      2. +
    2. Install Ruby+Devkit - recommended version is 2.5.5.
      3. +
    3. Read guide to get Jekyll up and running without problems.
      4. +
    +

    Once you’ve completed the setup, you’ll be able to run the various commands provided from the command line.

    +

    Build Tabler locally

    +
      +
    1. From the root /tabler directory, run npm run start in the command line.
      2. +
    2. Open http://localhost:3000 in your browser, and voilà.
      3. +
    3. Any change in /src directory will build the application and refresh the page.
      4. +
    +

    Bugs and feature requests

    +

    Found a bug or have a feature request? Please open a new issue.

    +
    +
    +
    +
    +
    +
    +
    + +
    +
    + + + + + \ No newline at end of file diff --git a/demo/docs/icons.html b/demo/docs/icons.html index a1e5c7c71..bcf99d693 100644 --- a/demo/docs/icons.html +++ b/demo/docs/icons.html @@ -1,10 +1,10 @@ @@ -21,7 +21,7 @@ -
    +
    +

    + + Tabler + +

    +
    +
    +
    + + + + Source code + + + + + Sponsor + +
    +
    +
    + + + + + +
    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. +
    +
    +
    +
    +
    + + +
    +
    Paweł Kuna
    +
    UI Designer
    +
    +     +
    + Set status + Profile & account + Feedback +
    + Settings + Logout +
    +
    +
    +
    +
    +
    + +
    +
    +
    + +
    +
    +
    +

    + Documentation +

    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +

    Interactions

    +
    +

    Utility classes that change how users interact with contents of a website.

    +
    +

    Text selection

    +

    Change the way in which the content is selected when the user interacts with it.

    +
    +
    +

    This paragraph will be entirely selected when clicked by the user.

    +

    This paragraph has default select behavior.

    +

    This paragraph will not be selectable when clicked by the user.

    +
    +
    +
    +
    + 
    <p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
+<p class="user-select-auto">This paragraph has default select behavior.</p>
+<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
    +
    +
    +

    Pointer events

    +

    Tabler provides .pe-none and .pe-auto classes to prevent or add element interactions.

    +
    +
    +

    This link can not be clicked.

    +

    This link can be clicked (this is default behavior).

    +
    +
    +
    +
    + 
    <p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
+<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    + + + + + \ No newline at end of file diff --git a/demo/docs/modals.html b/demo/docs/modals.html index 38a286d6e..a5fa3e42a 100644 --- a/demo/docs/modals.html +++ b/demo/docs/modals.html @@ -1,10 +1,10 @@ @@ -21,7 +21,7 @@ -
    +
    -
    -
    - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde. -
    -
    - - +

    Default markup

    +
    +
    +
    +
    +
    +
    +
    Modal title
    + +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde. +
    +
    + + +
    -
    -
    -
    - 
    <div class="modal-dialog" role="document">
+                      
    
+                        
    
+                          
    <div class="modal-dialog" role="document">
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title">Modal title</h5>
@@ -625,44 +708,46 @@
     </div>
   </div>
 </div>
    
-                      
    
-                    
    
-                    
    Prompt and alert
    
-                    
    
-                      
    
-                        
    
-                        
    
-                          
    
-                            
-                            
    
-                            
    
-                              
-                              
    Are you sure?
    
-                              
    Do you really want to remove 84 files? What you've done cannot be undone.
    
-                            
    
-                            
    
-                              
    
-                                
    
-                                  
    
-                                      Cancel
-                                    
    
-                                  
    
-                                      Delete 84 items
-                                    
    
+
    +
    +

    Prompt and alert

    +
    +
    +
    +
    +
    + +
    +
    + + +

    Are you sure?

    +
    Do you really want to remove 84 files? What you've done cannot be undone.
    +
    +
    +
    +
    +
    + Cancel +
    +
    + Delete 84 items +
    +
    -
    -
    -
    - 
    <div class="modal-dialog modal-sm" role="document">
+                      
    
+                        
    
+                          
    <div class="modal-dialog modal-sm" role="document">
   <div class="modal-content">
     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
     <div class="modal-status bg-danger"></div>
     <div class="modal-body text-center py-4">
+      <!-- Download SVG icon from http://tabler-icons.io/i/alert-triangle -->
       <!-- SVG icon code with class="mb-2 text-danger icon-lg" -->
       <h3>Are you sure?</h3>
       <div class="text-muted">Do you really want to remove 84 files? What you've done cannot be undone.</div>
@@ -681,43 +766,45 @@
     </div>
   </div>
 </div>
    
-                      
    
-                    
    
-                    
    
-                      
    
-                        
    
-                        
    
-                          
    
-                            
-                            
    
-                            
    
-                              
-                              
    Payment succedeed
    
-                              
    Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io.
    
-                            
    
-                            
    
-                              
    
-                                
    
-                                  
    
-                                      Go to dashboard
-                                    
    
-                                  
    
-                                      View invoice
-                                    
    
+
    +
    +
    +
    +
    +
    +
    + +
    +
    + + +

    Payment succedeed

    +
    Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io.
    +
    +
    +
    +
    +
    + Go to dashboard +
    +
    + View invoice +
    +
    -
    -
    -
    - 
    <div class="modal-dialog modal-sm" role="document">
+                      
    
+                        
    
+                          
    <div class="modal-dialog modal-sm" role="document">
   <div class="modal-content">
     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
     <div class="modal-status bg-success"></div>
     <div class="modal-body text-center py-4">
+      <!-- Download SVG icon from http://tabler-icons.io/i/circle-check -->
       <!-- SVG icon code with class="mb-2 text-green icon-lg" -->
       <h3>Payment succedeed</h3>
       <div class="text-muted">Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io.</div>
@@ -736,116 +823,117 @@
     </div>
   </div>
 </div>
    
-                      
    
-                    
    
-                    
-                    
    
-                      
    
-                        
    
-                        
    
-                          
    
-                            
    
-                              
    New report
    
-                              
-                            
    
-                            
    
-                              
    
-                                
-                                
+
    +
    + +
    +
    +
    +
    +
    +
    +
    New report
    +
    - -
    -
    - +
    +
    + +
    -
    -
    -
    -
    -
    - -
    - - https://tabler.io/reports/ - - +
    +
    +
    + +
    + + https://tabler.io/reports/ + + +
    +
    +
    +
    +
    + +
    -
    -
    - - +
    +
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    -
    -
    -
    -
    -
    - - -
    -
    -
    -
    - - -
    -
    -
    -
    - - -
    -
    +
    + + Cancel + + + + + Create new report +
    -
    - - Cancel - - - - Create new report - -
    -
    -
    -
    - 
    <div class="modal-dialog modal-lg" role="document">
+                      
    
+                        
    
+                          
    <div class="modal-dialog modal-lg" role="document">
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title">New report</h5>
@@ -938,13 +1026,15 @@
         Cancel
       </a>
       <a href="#" class="btn btn-primary ms-auto" data-bs-dismiss="modal">
+        <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
         <!-- SVG icon code -->
         Create new report
       </a>
     </div>
   </div>
 </div>
    
-                      
    
+
    +
    @@ -960,17 +1050,24 @@
  • Documentation
  • License
  • Source code
    • +
  • + + + + Sponsor + +
    • @@ -980,7 +1077,6 @@
    - diff --git a/demo/docs/page-headers.html b/demo/docs/page-headers.html index ad04eb373..ca3208274 100644 --- a/demo/docs/page-headers.html +++ b/demo/docs/page-headers.html @@ -1,10 +1,10 @@ @@ -12,7 +12,7 @@ - Page Headers - Tabler - Premium and Open Source dashboard template with responsive and high quality UI. + Page headers - Tabler - Premium and Open Source dashboard template with responsive and high quality UI. @@ -21,7 +21,7 @@ -
    +
    +

    Default markup

    +

    To replace the icons, all should add active class to the switch-icon component.

    +
    +
    +
    + +
    -
    -
    -
    - 
    <button class="switch-icon" data-bs-toggle="switch-icon">
+                      
    
+                        
    
+                          
    <button class="switch-icon" data-bs-toggle="switch-icon">
   <span class="switch-icon-a text-muted">
+    <!-- Download SVG icon from http://tabler-icons.io/i/circle -->
     <!-- SVG icon code -->
   </span>
   <span class="switch-icon-b text-blue">
+    <!-- Download SVG icon from http://tabler-icons.io/i/square -->
     <!-- SVG icon code -->
   </span>
 </button>
    
-                      
    
-                    
    
-                    
    Switch animations
    
-                    
    You can also add a fancy animation to add variety to your button. See demo below:
    
-                    
    
-                      
    
-                        
    
-                          
-                          
-                          
-                          
-                          
-                          
-                          
-                          
+
    +
    +

    Switch animations

    +

    You can also add a fancy animation to add variety to your button. See demo below:

    +
    +
    +
    + + + + + + + + +
    -
    -
    -
    - 
    <button class="switch-icon" data-bs-toggle="switch-icon">
+                      
    
+                        
    
+                          
    <button class="switch-icon" data-bs-toggle="switch-icon">
   <span class="switch-icon-a text-muted">
+    <!-- Download SVG icon from http://tabler-icons.io/i/circle -->
     <!-- SVG icon code -->
   </span>
   <span class="switch-icon-b text-blue">
+    <!-- Download SVG icon from http://tabler-icons.io/i/circle -->
     <!-- SVG icon code with class="icon-filled" -->
   </span>
 </button>
 <button class="switch-icon switch-icon-fade" data-bs-toggle="switch-icon">
   <span class="switch-icon-a text-muted">
+    <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
     <!-- SVG icon code -->
   </span>
   <span class="switch-icon-b text-red">
+    <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
     <!-- SVG icon code with class="icon-filled" -->
   </span>
 </button>
 <button class="switch-icon switch-icon-scale" data-bs-toggle="switch-icon">
   <span class="switch-icon-a text-muted">
+    <!-- Download SVG icon from http://tabler-icons.io/i/star -->
     <!-- SVG icon code -->
   </span>
   <span class="switch-icon-b text-yellow">
+    <!-- Download SVG icon from http://tabler-icons.io/i/star -->
     <!-- SVG icon code with class="icon-filled" -->
   </span>
 </button>
 <button class="switch-icon switch-icon-flip" data-bs-toggle="switch-icon">
   <span class="switch-icon-a text-muted">
+    <!-- Download SVG icon from http://tabler-icons.io/i/thumb-up -->
     <!-- SVG icon code -->
   </span>
   <span class="switch-icon-b text-facebook">
+    <!-- Download SVG icon from http://tabler-icons.io/i/thumb-up -->
     <!-- SVG icon code -->
   </span>
 </button>
 <button class="switch-icon switch-icon-slide-up" data-bs-toggle="switch-icon">
   <span class="switch-icon-a text-muted">
+    <!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter -->
     <!-- SVG icon code -->
   </span>
   <span class="switch-icon-b text-twitter">
+    <!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter -->
     <!-- SVG icon code -->
   </span>
 </button>
 <button class="switch-icon switch-icon-slide-left" data-bs-toggle="switch-icon">
   <span class="switch-icon-a text-muted">
+    <!-- Download SVG icon from http://tabler-icons.io/i/check -->
     <!-- SVG icon code -->
   </span>
   <span class="switch-icon-b text-red">
+    <!-- Download SVG icon from http://tabler-icons.io/i/x -->
     <!-- SVG icon code -->
   </span>
 </button>
 <button class="switch-icon switch-icon-slide-down" data-bs-toggle="switch-icon">
   <span class="switch-icon-a text-muted">
+    <!-- Download SVG icon from http://tabler-icons.io/i/arrow-down -->
     <!-- SVG icon code -->
   </span>
   <span class="switch-icon-b text-muted">
+    <!-- Download SVG icon from http://tabler-icons.io/i/arrow-up -->
     <!-- SVG icon code -->
   </span>
 </button>
 <button class="switch-icon switch-icon-slide-right" data-bs-toggle="switch-icon">
   <span class="switch-icon-a text-muted">
+    <!-- Download SVG icon from http://tabler-icons.io/i/car -->
     <!-- SVG icon code -->
   </span>
   <span class="switch-icon-b text-muted">
+    <!-- Download SVG icon from http://tabler-icons.io/i/scooter -->
     <!-- SVG icon code -->
   </span>
 </button>
    
-                      
    
+
    +
    @@ -769,17 +889,24 @@
  • Documentation
  • License
  • Source code
    • +
  • + + + + Sponsor + +
    • @@ -789,7 +916,6 @@
    - diff --git a/demo/docs/tables.html b/demo/docs/tables.html index 65117a874..6c1071d07 100644 --- a/demo/docs/tables.html +++ b/demo/docs/tables.html @@ -1,10 +1,10 @@ @@ -21,7 +21,7 @@ -
    +
    -
    -
    - Hello, world! This is a toast message. -
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +

    Toasts

    +

    + + + + Bootstrap documentation + +

    +

    Toasts are lightweight alert boxes which display for a few seconds after a user has taken an action, to inform them of the state or outcome. They can be used when a user clicks a button or submits a form and their aim is to provide feedback, rather than encourage to take action.

    -
    -
    -
    - 
    <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-bs-toggle="toast">
-  <div class="toast-header">
-    <span class="avatar avatar-xs me-2" style="background-image: url(...)"></span>
-    <strong class="me-auto">Mallory Hulme</strong>
-    <small>11 mins ago</small>
-    <button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
-  </div>
-  <div class="toast-body">
-    Hello, world! This is a toast message.
-  </div>
-</div>
    -
    -
    -

    Translucent

    -

    Toasts blend over the elements they appear over. If a browser supports the backdrop-filter CSS property, the elements under a toast will be blurred.

    -
    -
    - -
    -
    -
    -
    - 
    <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-bs-toggle="toast">
-  <div class="toast-header">
-    <span class="avatar avatar-xs me-2" style="background-image: url(...)"></span>
-    <strong class="me-auto">Mallory Hulme</strong>
-    <small>11 mins ago</small>
-    <button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
-  </div>
-  <div class="toast-body">
-    Hello, world! This is a toast message.
-  </div>
-</div>
    -
    -
    -

    Stacking toasts

    -

    Stack multiple toasts together by putting them within one .toast-container.

    -
    -
    -
    - -
    -
    - 
    <div class="toast-container">
-  <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-bs-toggle="toast">
+                      
    
+                        
    
+                          
    <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-toggle="toast">
+  <div class="toast-header">
+    <span class="avatar avatar-xs me-2" style="background-image: url(...)"></span>
+    <strong class="me-auto">Mallory Hulme</strong>
+    <small>11 mins ago</small>
+    <button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+  </div>
+  <div class="toast-body">
+    Hello, world! This is a toast message.
+  </div>
+</div>
    
+                        
    
+                      
    
+                      
    Stacking toasts
    
+                      
    Stack multiple toasts together by putting them within one .toast-container.
    
+                      
    
+                        
    
+                          
    
+                            
+                            
+                          
    
+                        
    
+                      
    
+                      
    
+                        
    
+                          
    <div class="toast-container">
+  <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-toggle="toast">
     <div class="toast-header">
       <span class="avatar avatar-xs me-2" style="background-image: url(...)"></span>
       <strong class="me-auto">Dunn Slane</strong>
@@ -701,7 +785,7 @@
       Hello, world! This is a toast message.
     </div>
   </div>
-  <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-bs-toggle="toast">
+  <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-toggle="toast">
     <div class="toast-header">
       <span class="avatar avatar-xs me-2" style="background-image: url(...)"></span>
       <strong class="me-auto">Mallory Hulme</strong>
@@ -713,7 +797,8 @@
     </div>
   </div>
 </div>
    
-                      
    
+
    +
    @@ -729,17 +814,24 @@
  • Documentation
  • License
  • Source code
    • +
  • + + + + Sponsor + +
    • @@ -749,7 +841,6 @@
    - diff --git a/demo/docs/tooltips.html b/demo/docs/tooltips.html index 1a1f07e2f..df28508fa 100644 --- a/demo/docs/tooltips.html +++ b/demo/docs/tooltips.html @@ -1,10 +1,10 @@ @@ -21,7 +21,7 @@ -
    +
    - - - +

    Default markup

    +

    Use the default markup to create tooltips that will help users understand particular elements of your interface. You can decide where the text label is to be displayed - at the top, bottom or on either side of the element.

    +
    +
    + + + + +
    -
    -
    -
    - 
    <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
+                      
    
+                        
    
+                          
    <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
   Tooltip on top
 </button>
 <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
@@ -625,23 +709,24 @@
 <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
   Tooltip on left
 </button>
    
-                      
    
-                    
    
-                    
    Tooltip with HTML
    
-                    
    If the default tooltip is not enough, you can add the option to use HTML code in the text to highlight particular bits of information and make the content more attractive.
    
-                    
    
-                      
    
-                        
+
    -
    -
    -
    - 
    <button type="button" class="btn" data-bs-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
+                      
    Tooltip with HTML
    
+                      
    If the default tooltip is not enough, you can add the option to use HTML code in the text to highlight particular bits of information and make the content more attractive.
    
+                      
    
+                        
    
+                          
+                        
    
+                      
    
+                      
    
+                        
    
+                          
    <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
 Tooltip with HTML
 </button>
    
-                      
    
+
    +
    @@ -657,17 +742,24 @@ Tooltip with HTML
  • Documentation
  • License
  • Source code
    • +
  • + + + + Sponsor + +
    • @@ -677,7 +769,6 @@ Tooltip with HTML
    - diff --git a/demo/docs/typography.html b/demo/docs/typography.html index a9f7943d3..be40dd5be 100644 --- a/demo/docs/typography.html +++ b/demo/docs/typography.html @@ -1,10 +1,10 @@ @@ -21,7 +21,7 @@ -
    +
    -

    - - Tabler - -

    -
    -
    - - - - -
    -
    -
    - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. -
    -
    -
    -
    -
    - - -
    -
    Paweł Kuna
    -
    UI Designer
    -
    -     -
    - Set status - Profile & account - Feedback -
    - Settings - Logout -
    -
    -
    -
    -
    -
    - -
    -
    -
    - -
    -
    -
    -

    - Documentation -

    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -

    Usage

    -
    -

    Tabler distributions are available on npm. Add tabler as a dependency in your npm project or use a specific version directly in your HTML files via CDN includes.

    -
    -

    Installation

    -

    To install the latest tabler npm package in your project run:

    -
    -
    - 
    npm install @tabler/core
-
    -
    -
    -

    Tabler 1.0.0 major version is now in active development. To get the latest alpha version run:

    -
    -
    - 
    npm install @tabler/core@alpha
-
    -
    -
    -

    CDN support

    -

    All files included in @tabler/core npm package are available over a CDN.

    -

    Javascript

    -
    -
    - 
    <script src="https://unpkg.com/@tabler/core@latest/dist/js/tabler.min.js"></script>
-
    -
    -
    -

    Styles

    -
    -
    - 
    <link rel="stylesheet" href="https://unpkg.com/@tabler/core@latest/dist/css/tabler.min.css">
-
    -
    -
    -

    Other versions

    -

    To load a specific version replace latest with the desired version number.

    -
    -
    - 
    <link rel="stylesheet" href="https://unpkg.com/@tabler/core@1.0.0-alpha.13/dist/css/tabler.min.css">
-
    -
    -
    -

    To load the latest alpha version replace latest with alpha.

    -
    -
    - 
    <script src="https://unpkg.com/@tabler/core@alpha/dist/js/tabler.min.js"></script>
-
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    - - - - - - \ No newline at end of file diff --git a/demo/dropdowns.html b/demo/dropdowns.html index 739119ed8..768a261af 100644 --- a/demo/dropdowns.html +++ b/demo/dropdowns.html @@ -1,10 +1,10 @@ @@ -21,7 +21,7 @@ -
    +
    - diff --git a/demo/error-404.html b/demo/error-404.html index b154bda5c..69f4897be 100644 --- a/demo/error-404.html +++ b/demo/error-404.html @@ -1,10 +1,10 @@ @@ -21,8 +21,8 @@ -
    -
    +
    +
    404

    Oops… You just found an error page

    @@ -31,6 +31,7 @@

    + Take me home @@ -39,7 +40,6 @@
    - diff --git a/demo/error-500.html b/demo/error-500.html index 93f5616bc..111216e68 100644 --- a/demo/error-500.html +++ b/demo/error-500.html @@ -1,10 +1,10 @@ @@ -21,8 +21,8 @@ -
    -
    +
    +
    500

    Oops… You just found an error page

    @@ -31,6 +31,7 @@

    + Take me home @@ -39,7 +40,6 @@
    - diff --git a/demo/error-maintenance.html b/demo/error-maintenance.html index 48865f1e1..c7fabb140 100644 --- a/demo/error-maintenance.html +++ b/demo/error-maintenance.html @@ -1,10 +1,10 @@ @@ -21,8 +21,8 @@ -
    -
    +
    +
    @@ -32,6 +32,7 @@

    + Take me home @@ -40,7 +41,6 @@
    - diff --git a/demo/favicon.ico b/demo/favicon.ico index 9c3cd64d1..916f5ba7c 100644 Binary files a/demo/favicon.ico and b/demo/favicon.ico differ diff --git a/demo/forgot-password.html b/demo/forgot-password.html index b5ebd26ee..368cac302 100644 --- a/demo/forgot-password.html +++ b/demo/forgot-password.html @@ -1,10 +1,10 @@ @@ -21,8 +21,8 @@ -
    -
    +
    +
    @@ -36,6 +36,7 @@
    + Send me new password @@ -48,7 +49,6 @@
    - diff --git a/demo/form-elements.html b/demo/form-elements.html index 4e197af1e..b0efe1574 100644 --- a/demo/form-elements.html +++ b/demo/form-elements.html @@ -1,10 +1,10 @@ @@ -14,9 +14,6 @@ Form elements - Tabler - Premium and Open Source dashboard template with responsive and high quality UI. - - - @@ -24,7 +21,7 @@ -
    +
    +
    +
    + +
    + + Action + + + Another action + +
    + +
    +
    +
    + +
    + + + +
    + + Action + + + Another action + +
    +
    +
    +
    + +
    + + + + + +
    +
    + + + + + +
    +
    +
    + +
    + + + + +
    +
    + + + + +
    +
    +
    + +
    +
    + +
    +
    + + + + +
    +
    +
    +
    + +
    +
    + +
    +
    + ? +
    +
    +
    +
    - -
    Input value
    + + +
    + + + + + +
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    -
    Select
    - -
    -
    -
    Select multiple
    - + +
    - - + + @ + + +
    +
    + + + .tabler.io +
    - -
    - - Action - - - Another action - -
    - + + https:// + + + + .tabler.io +
    - + +
    + + + + +
    - - - -
    - - Action + + + + +
    +
    +
    + +
    + + https://tabler.io/users/ + + +
    +
    +
    + +
    + + + .tabler.io + +
    +
    +
    + +
    + + + Show password + +
    +
    +
    + +
    + + + + - - Another action + + + + + + +
    +
    +
    + +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + + +
    +
    + + + +
    Invalid feedback
    +
    +
    + + + +
    + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    + +
    +
    +
    +
    + +
    + + + +
    -
    - - - - -
    -
    - - - - +
    + + + + +
    - -
    - - - - -
    -
    - - - - + +
    + + + +
    - -
    -
    - + +
    + + + + +
    +
    +
    + +
    + + + +
    +
    +
    + +
    + + + + + +
    +
    +
    + +
    + + + + +
    +
    +
    + +
    + + +
    + +
    + + Option 4 + + + Option 5 + + + Option 6 + +
    -
    - - +
    +
    +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Radios
    +
    + + + + +
    +
    +
    +
    Inline Radios
    +
    + + + +
    +
    +
    +
    Checkboxes
    +
    + + + +
    +
    +
    +
    Inline Checkboxes
    +
    + + + +
    +
    +
    + + + + +
    +
    +
    Toggle switches
    + + + +
    +
    +
    Single switch
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    Custom File Input
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    +
    + + + + +
    +
    + + +
    +
    +
    +
    +
    + + +
    + + + + +
    +
    + + + + +
    +
    +
    + +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +
    + +
    +
    + + + + Login with Github + +
    +
    + + + + Login with Twitter
    - -
    -
    - -
    -
    - ? -
    -
    -
    -
    -
    -
    - - -
    - - - - -
    -
    -
    - - -
    -
    - -
    - - @ - - -
    -
    - - - .tabler.io - -
    -
    - - https:// - - - - .tabler.io - -
    -
    -
    - -
    - - - - -
    -
    - - - - -
    -
    -
    - -
    - - https://tabler.io/users/ - - -
    -
    -
    - -
    - - - .tabler.io - -
    -
    -
    - -
    - - - Show password - -
    -
    -
    - -
    - - - - - - - - - -
    -
    -
    - -
    - - -
    -
    - - -
    -
    - + + + + + + + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + + -
    -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - - -
    -
    - - - -
    Invalid feedback
    -
    -
    - - - -
    - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    -
    -
    -
    - -
    - - - - -
    -
    -
    - -
    - - - - - -
    -
    -
    - -
    - - - - -
    -
    -
    - -
    - - - - -
    -
    -
    - -
    - - - -
    -
    -
    - -
    - - - - - -
    -
    -
    - -
    - - - - -
    -
    -
    - -
    - - -
    - -
    - - Option 4 - - - Option 5 - - - Option 6 - -
    -
    -
    -
    -
    - -
    - - - - - - - - - - - - - - - - - - - - - -
    -
    +
    +
    +
    + Cancel + +
    +
    + +
    +
    +
    +
    +

    Basic form

    +
    +
    +
    +
    + +
    + + We'll never share your email with anyone else.
    -
    -
    -
    -
    -
    -
    Radios
    -
    - - - - -
    -
    -
    -
    Inline Radios
    -
    - - - -
    -
    -
    -
    Checkboxes
    -
    - - - -
    -
    -
    -
    Inline Checkboxes
    -
    - - - -
    -
    -
    - - - - -
    -
    -
    Toggle switches
    - - - -
    -
    -
    Single switch
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    -
    Custom File Input
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - - -
    -
    - - -
    -
    - - -
    +
    + +
    + + + Your password must be 8-20 characters long, contain letters and numbers, and must not contain + spaces, special characters, or emoji. +
    -
    -
    - - - - -
    -
    - - -
    -
    -
    -
    -
    - - -
    - - - -
    -
    -
    - -
    -
    -
    - -
    -
    - -
    -
    -
    -
    -
    -
    -
    - -
    -
    - - - Login with Github - -
    -
    - - - Login with Twitter - -
    -
    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    -
    -
    -
    -
    -
    -
    - Cancel - -
    -
    - -
    -
    -
    -
    -

    Basic form

    -
    -
    -
    -
    - -
    - - We'll never share your email with anyone else. +
    +
    + +
    + +
    +
    +
    + +
    + + + +
    +
    +
    + +
    + +
    +
    +
    +
    +
    +
    +

    Horizontal form

    +
    +
    +
    +
    + +
    + + We'll never share your email with anyone else. +
    +
    +
    + +
    + + + Your password must be 8-20 characters long, contain letters and numbers, and must not contain + spaces, special characters, or emoji. + +
    +
    +
    + +
    + +
    +
    +
    + +
    + + + +
    +
    +
    + +
    +
    +
    +
    +
    -
    - -
    - - - Your password must be 8-20 characters long, contain letters and numbers, and must not contain - spaces, special characters, or emoji. - -
    -
    -
    - -
    - -
    -
    -
    - -
    - - - -
    -
    -
    - -
    - -
    -
    -
    -
    -
    -
    -

    Horizontal form

    -
    -
    -
    -
    - -
    - - We'll never share your email with anyone else. -
    -
    -
    - -
    - - - Your password must be 8-20 characters long, contain letters and numbers, and must not contain - spaces, special characters, or emoji. - -
    -
    -
    - -
    - -
    -
    -
    - -
    - - - -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    - -
    -
    - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/demo/gallery.html b/demo/gallery.html index 2b481bff2..b3d05cea2 100644 --- a/demo/gallery.html +++ b/demo/gallery.html @@ -1,10 +1,10 @@ @@ -21,7 +21,7 @@ -
    +
    -
    +
    @@ -386,1401 +402,1392 @@ + Create new report +
    -
    -
    -
    -
    -
    -
    Sales
    -
    -
    - -
    - Last 7 days - Last 30 days - Last 3 months +
    +
    +
    +
    +
    +
    +
    +
    +
    Sales
    +
    +
    + +
    + Last 7 days + Last 30 days + Last 3 months +
    -
    -
    75%
    -
    -
    Conversion rate
    -
    - - 7% - -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Revenue
    -
    -
    - -
    - Last 7 days - Last 30 days - Last 3 months -
    -
    -
    -
    -
    -
    $4,300
    -
    - - 8% - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    New clients
    -
    -
    - -
    - Last 7 days - Last 30 days - Last 3 months -
    -
    -
    -
    -
    -
    6,782
    -
    - - 0% - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Active users
    -
    -
    - -
    - Last 7 days - Last 30 days - Last 3 months -
    -
    -
    -
    -
    -
    2,986
    -
    - - 4% - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    Traffic summary

    -
    -
    -
    -
    -
    -
    -
    -

    Using Storage 6854.45 MB of 8 GB

    -
    -
    -
    -
    -
    -
    -
    - - Regular - 915MB -
    -
    - - System - 415MB -
    -
    - - Shared - 201MB -
    -
    - - Free - 612MB -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    Top countries

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - W -

    New website

    -

    Due to: 28 Aug 2019

    -

    - Waiting -

    -
    -
    - - JL - - - -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    - W -

    UI Redesign

    -

    Due to: 11 Nov 2019

    -

    - Final review -

    -
    -
    - HS - - -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    +
    75%
    +
    +
    Conversion rate
    +
    - 6% + 7% +
    -
    43
    -
    New Tickets
    -
    -
    -
    -
    -
    -
    - - -2% - +
    +
    +
    -
    95
    -
    Daily Earnings
    -
    -
    -
    -
    -
    -
    -
    - - 9% - -
    -
    7
    -
    New Replies
    -
    -
    -
    -
    -
    Development activity
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    Revenue
    +
    +
    + +
    + Last 7 days + Last 30 days + Last 3 months +
    +
    -
    -
    Today's Earning: $4,262.40
    -
    - +5% more than yesterday
    +
    +
    +
    $4,300
    +
    + + 8% + +
    -
    +
    -
    +
    +
    +
    +
    +
    +
    New clients
    +
    +
    + +
    + Last 7 days + Last 30 days + Last 3 months +
    +
    +
    +
    +
    +
    6,782
    +
    + + 0% + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Active users
    +
    +
    + +
    + Last 7 days + Last 30 days + Last 3 months +
    +
    +
    +
    +
    +
    2,986
    +
    + + 4% + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Traffic summary

    +
    +
    +
    +
    +
    +
    +
    +

    Using Storage 6854.45 MB of 8 GB

    +
    +
    +
    +
    +
    +
    +
    + + Regular + 915MB +
    +
    + + System + 415MB +
    +
    + + Shared + 201MB +
    +
    + + Free + 612MB +
    +
    +
    +
    +
    +
    +
    +
    +
    + + 6% + + +
    +
    43
    +
    New Tickets
    +
    +
    +
    +
    +
    +
    +
    + + -2% + + +
    +
    95
    +
    Daily Earnings
    +
    +
    +
    +
    +
    +
    +
    + + 9% + + +
    +
    7
    +
    New Replies
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Development activity
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Today's Earning: $4,262.40
    +
    + + +5% more than yesterday
    +
    +
    +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    UserCommitDate
    + + +
    + Fix dart Sass compatibility (#29755) +
    +     		28 Nov 2019
    + JL + +
    + Change deprecated html tags to text decoration classes (#29604) +
    +     		27 Nov 2019
    + + +
    + justify-content:between ⇒ justify-content:space-between (#29734) +
    +     		26 Nov 2019
    + + +
    + Update change-version.js (#29736) +
    +     		26 Nov 2019
    + + +
    + Regenerate package-lock.json (#29730) +
    +     		25 Nov 2019
    + + +
    + Some minor text tweaks +
    +     		24 Nov 2019
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + JL +
    +
    +
    + Jeffie Lewzey commented on your "I'm not a witch." post. +
    +
    yesterday
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + It's Mallory Hulme's birthday. Wish him well! +
    +
    2 days ago
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + Dunn Slane posted "Well, what do you want?". +
    +
    today
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + Emmy Levet created a new project Morning alarm clock. +
    +
    4 days ago
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + Maryjo Lebarree liked your photo. +
    +
    2 days ago
    +
    +
    +
    +
    +
    +
    + EP +
    +
    +
    + Egan Poetz registered new client as Trilia. +
    +
    yesterday
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + Kellie Skingley closed a new deal on project Pen Pineapple Apple Pen. +
    +
    2 days ago
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + Christabel Charlwood created a new project for Wikibox. +
    +
    4 days ago
    +
    +
    +
    +
    +
    +
    + HS +
    +
    +
    + Haskel Shelper change status of Tabler Icons from open to closed. +
    +
    today
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + Lorry Mion liked Tabler UI Kit. +
    +
    yesterday
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + Leesa Beaty posted new video. +
    +
    2 days ago
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + Perren Keemar and 3 others followed you. +
    +
    2 days ago
    +
    +
    +
    +
    +
    +
    + SA +
    +
    +
    + Sunny Airey upload 3 new photos to category Inspirations. +
    +
    2 days ago
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + Geoffry Flaunders made a $10 donation. +
    +
    2 days ago
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + Thatcher Keel created a profile. +
    +
    3 days ago
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + Dyann Escala hosted the event Tabler UI Birthday. +
    +
    4 days ago
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + Avivah Mugleston mentioned you on Best of 2020. +
    +
    2 days ago
    +
    +
    +
    +
    +
    +
    + AA +
    +
    +
    + Arlie Armstead sent a Review Request to Amanda Blake. +
    +
    2 days ago
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + 132 Sales +
    +
    + 12 waiting payments +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + 78 Orders +
    +
    + 32 shipped +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + 1352 Members +
    +
    + 163 registered today +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + 623 Shares +
    +
    + 16 today +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + 132 Likes +
    +
    + 21 today +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Most Visited Pages

    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Page nameVisitorsUniqueBounce rate
    + /about.html + + + + 4,8963,65482.54% +
    +
    + /special-promo.html + + + + 3,6523,21576.29% +
    +
    + /news/1,new-ui-kit.html + + + + 3,2562,86572.65% +
    +
    + /lorem-ipsum-dolor-sit-amet-very-long-url.html + + + + 98686544.89% +
    +
    + /colors.html + + + + 91282241.12% +
    +
    + /docs/index.html + + + + 85579832.65% +
    +
    +
    +
    +
    +
    + +
    +     +
    +
    +
    +
    +

    Social Media Traffic

    +
    - - - + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    UserCommitDateNetworkVisitors
    + Instagram3,550 +
    +
    +
    +
    Twitter1,798 +
    +
    +
    +
    Facebook1,245 +
    +
    +
    +
    TikTok986 +
    +
    +
    +
    Pinterest854 +
    +
    +
    +
    VK650 +
    +
    +
    +
    Pinterest420 +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Tasks

    +
    +
    + + + + + + + + - - - + + + + + - - - + + + + + - - - + + + + + - - - + + + + + - - - -
    + + + Extend the data model. + + + + January 01, 2019 + + + + + 2/7 + + + + + + 3 + -
    - Fix dart Sass compatibility (#29755) -
    -     		28 Nov 2019
    + + + + Verify the event flow. + + + + January 01, 2019 + + + + + 3/10 + + + + + + 6 + JL -
    - Change deprecated html tags to text decoration classes (#29604) -
    -     		27 Nov 2019
    + + + + Database backup and maintenance + + + + January 01, 2019 + + + + + 0/6 + + + + + + 1 + -
    - justify-content:between ⇒ justify-content:space-between (#29734) -
    -     		26 Nov 2019
    + + + + Identify the implementation team. + + + + January 01, 2019 + + + + + 6/10 + + + + + + 12 + -
    - Update change-version.js (#29736) -
    -     		26 Nov 2019
    + + + + Define users and workflow + + + + January 01, 2019 + + + + + 3/7 + + + + + + 5 + -
    - Regenerate package-lock.json (#29730) -
    -     		25 Nov 2019
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - JL -
    -
    -
    - Jeffie Lewzey commented on your "I'm not a witch." post. -
    -
    yesterday
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    - It's Mallory Hulme's birthday. Wish him well! -
    -
    2 days ago
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    - Dunn Slane posted "Well, what do you want?". -
    -
    today
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    - Emmy Levet created a new project Morning alarm clock. -
    -
    4 days ago
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    - Maryjo Lebarree liked your photo. -
    -
    2 days ago
    -
    -
    -
    -
    -
    -
    - EP -
    -
    -
    - Egan Poetz registered new client as Trilia. -
    -
    yesterday
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    - Kellie Skingley closed a new deal on project Pen Pineapple Apple Pen. -
    -
    2 days ago
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    - Christabel Charlwood created a new project for Wikibox. -
    -
    4 days ago
    -
    -
    -
    -
    -
    -
    - HS -
    -
    -
    - Haskel Shelper change status of Tabler Icons from open to closed. -
    -
    today
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    - Lorry Mion liked Tabler UI Kit. -
    -
    yesterday
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    - Leesa Beaty posted new video. -
    -
    2 days ago
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    - Perren Keemar and 3 others followed you. -
    -
    2 days ago
    -
    -
    -
    -
    -
    -
    - SA -
    -
    -
    - Sunny Airey upload 3 new photos to category Inspirations. -
    -
    2 days ago
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    - Geoffry Flaunders made a $10 donation. -
    -
    2 days ago
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    - Thatcher Keel created a profile. -
    -
    3 days ago
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    - Dyann Escala hosted the event Tabler UI Birthday. -
    -
    4 days ago
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    - Avivah Mugleston mentioned you on Best of 2020. -
    -
    2 days ago
    -
    -
    -
    -
    -
    -
    - AA -
    -
    -
    - Arlie Armstead sent a Review Request to Amanda Blake. -
    -
    2 days ago
    -
    -
    -
    + + + + + + Check Pull Requests + + + + + January 01, 2019 + + + + + + 2/9 + + + + + + + 3 + + + + + +
    -
    -
    -
    -
    -
    -
    -
    -
    - - +
    +
    +
    +

    Invoices

    +
    +
    +
    +
    + Show +
    +
    -
    -
    - 132 Sales -
    -
    - 12 waiting payments -
    + entries +
    +
    + Search: +
    +
    -
    -
    -
    -
    -
    -
    - - -
    -
    -
    - 78 Orders -
    -
    - 32 shipped -
    -
    -
    -
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    No. + + Invoice SubjectClientVAT No.CreatedStatusPrice
    001401Design Works + + Carlson Limited + + 87956621 + + 15 Dec 2017 + + Paid + $887 + + +
    + + Action + + + Another action + +
    +     +
    001402UX Wireframes + + Adobe + + 87956421 + + 12 Apr 2017 + + Pending + $1200 + + +
    + + Action + + + Another action + +
    +     +
    001403New Dashboard + + Bluewolf + + 87952621 + + 23 Oct 2017 + + Pending + $534 + + +
    + + Action + + + Another action + +
    +     +
    001404Landing Page + + Salesforce + + 87953421 + + 2 Sep 2017 + + Due in 2 Weeks + $1500 + + +
    + + Action + + + Another action + +
    +     +
    001405Marketing Templates + + Printic + + 87956621 + + 29 Jan 2018 + + Paid Today + $648 + + +
    + + Action + + + Another action + +
    +     +
    001406Sales Presentation + + Tabdaq + + 87956621 + + 4 Feb 2018 + + Due in 3 Weeks + $300 + + +
    + + Action + + + Another action + +
    +     +
    001407Logo & Print + + Apple + + 87956621 + + 22 Mar 2018 + + Paid Today + $2500 + + +
    + + Action + + + Another action + +
    +     +
    001408Icons + + Tookapic + + 87956621 + + 13 May 2018 + + Paid Today + $940 + + +
    + + Action + + + Another action + +
    +     +
    -
    -
    -
    -
    -
    -
    - - -
    -
    -
    - 1352 Members -
    -
    - 163 registered today -
    -
    -
    -
    +
    +

    Showing 1 to 8 of 16 entries

    +
    -
    -
    -
    -
    -
    - - -
    -
    -
    - 623 Shares -
    -
    - 16 today -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - - -
    -
    -
    - 132 Likes -
    -
    - 21 today -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    Most Visited Pages

    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Page nameVisitorsUniqueBounce rate
    - /about.html - - - 4,8963,65482.54% -
    -
    - /special-promo.html - - - 3,6523,21576.29% -
    -
    - /news/1,new-ui-kit.html - - - 3,2562,86572.65% -
    -
    - /lorem-ipsum-dolor-sit-amet-very-long-url.html - - - 98686544.89% -
    -
    - /colors.html - - - 91282241.12% -
    -
    - /docs/index.html - - - 85579832.65% -
    -
    -
    -
    -
    -
    - -
    -     -
    -
    -
    -
    -

    Social Media Traffic

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NetworkVisitors
    Instagram3,550 -
    -
    -
    -
    Twitter1,798 -
    -
    -
    -
    Facebook1,245 -
    -
    -
    -
    TikTok986 -
    -
    -
    -
    Pinterest854 -
    -
    -
    -
    VK650 -
    -
    -
    -
    Pinterest420 -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    Tasks

    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - Extend the data model. - - - January 01, 2019 - - - - 2/7 - - - - - 3 - - -
    - - - Verify the event flow. - - - January 01, 2019 - - - - 3/10 - - - - - 6 - - JL -
    - - - Database backup and maintenance - - - January 01, 2019 - - - - 0/6 - - - - - 1 - - -
    - - - Identify the implementation team. - - - January 01, 2019 - - - - 6/10 - - - - - 12 - - -
    - - - Define users and workflow - - - January 01, 2019 - - - - 3/7 - - - - - 5 - - -
    - - - Check Pull Requests - - - January 01, 2019 - - - - 2/9 - - - - - 3 - - -
    -
    -
    -
    -
    -
    -
    -

    Invoices

    -
    -
    -
    -
    - Show -
    - -
    - entries -
    -
    - Search: -
    - -
    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    No. - Invoice SubjectClientVAT No.CreatedStatusPrice
    001401Design Works - - Carlson Limited - - 87956621 - - 15 Dec 2017 - - Paid - $887 - - -
    - - Action - - - Another action - -
    -     -
    001402UX Wireframes - - Adobe - - 87956421 - - 12 Apr 2017 - - Pending - $1200 - - -
    - - Action - - - Another action - -
    -     -
    001403New Dashboard - - Bluewolf - - 87952621 - - 23 Oct 2017 - - Pending - $534 - - -
    - - Action - - - Another action - -
    -     -
    001404Landing Page - - Salesforce - - 87953421 - - 2 Sep 2017 - - Due in 2 Weeks - $1500 - - -
    - - Action - - - Another action - -
    -     -
    001405Marketing Templates - - Printic - - 87956621 - - 29 Jan 2018 - - Paid Today - $648 - - -
    - - Action - - - Another action - -
    -     -
    001406Sales Presentation - - Tabdaq - - 87956621 - - 4 Feb 2018 - - Due in 3 Weeks - $300 - - -
    - - Action - - - Another action - -
    -     -
    001407Logo & Print - - Apple - - 87956621 - - 22 Mar 2018 - - Paid Today - $2500 - - -
    - - Action - - - Another action - -
    -     -
    001408Icons - - Tookapic - - 87956621 - - 13 May 2018 - - Paid Today - $940 - - -
    - - Action - - - Another action - -
    -     -
    -
    -
    -

    Showing 1 to 8 of 16 entries

    - -
    @@ -1793,17 +1800,24 @@
  • Documentation
  • License
  • Source code
    • +
  • + + + + Sponsor + +
    • @@ -1906,6 +1920,7 @@ Cancel + Create new report @@ -1914,11 +1929,7 @@
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/demo/lists.html b/demo/lists.html index d262d4ae3..433aaf121 100644 --- a/demo/lists.html +++ b/demo/lists.html @@ -1,10 +1,10 @@ @@ -21,7 +21,7 @@ -
    +
    +

    Payment succedeed

    Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io.
    @@ -649,6 +678,7 @@
    +

    Are you sure?

    Do you really want to remove 84 files? What you've done cannot be undone.
    @@ -679,6 +709,7 @@
    + Add @@ -772,7 +803,6 @@
    - diff --git a/demo/music.html b/demo/music.html index 374c7921c..3d8988c68 100644 --- a/demo/music.html +++ b/demo/music.html @@ -1,10 +1,10 @@ @@ -21,7 +21,7 @@ -
    +
    - -
    -
    -
    - +
    + Górą ty +
    +
    + Górą ty +
    + GOLEC UORKIESTRA, + Gromee, + Bedoes +
    +
    +
    + 03:41 +
    +
    + + -
    - - Action - - - Another action +
    +
    +
    + + +
    + + Action + + + Another action + +
    -
    -
    -
    -
    - 2 -
    -
    - High Life -
    -
    - High Life -
    - Daft Punk +
    +
    +
    + 2
    -
    -
    - 03:21 -
    -
    - - - -
    -
    -
    - +
    + High Life +
    +
    + High Life +
    + Daft Punk +
    +
    +
    + 03:21 +
    +
    + + -
    - - Action - - - Another action +
    +
    +
    + + +
    + + Action + + + Another action + +
    -
    -
    -
    -
    - 3 -
    -
    - Houdini -
    -
    - Houdini -
    - Foster The People +
    +
    +
    + 3
    -
    -
    - 03:23 -
    -
    - - - -
    -
    -
    - +
    + Houdini +
    +
    + Houdini +
    + Foster The People +
    +
    +
    + 03:23 +
    +
    + + -
    - - Action - - - Another action +
    +
    +
    + + +
    + + Action + + + Another action + +
    -
    -
    -
    -
    - 4 -
    -
    - Safe And Sound -
    -
    - Safe And Sound -
    - Capital Cities +
    +
    +
    + 4
    -
    -
    - 03:12 -
    -
    - - - -
    -
    -
    - +
    + Safe And Sound +
    +
    + Safe And Sound +
    + Capital Cities +
    +
    +
    + 03:12 +
    +
    + + -
    - - Action - - - Another action +
    +
    +
    + + +
    + + Action + + + Another action + +
    -
    -
    -
    -
    - 5 -
    -
    - Partied Out -
    -
    - Partied Out -
    - Con Bro Chill +
    +
    +
    + 5
    -
    -
    - 03:17 -
    -
    - - - -
    -
    -
    - +
    + Partied Out +
    +
    + Partied Out +
    + Con Bro Chill +
    +
    +
    + 03:17 +
    +
    + + -
    - - Action - - - Another action +
    +
    +
    + + +
    + + Action + + + Another action + +
    -
    -
    -
    -
    - 6 -
    -
    - Runaway (U & I) -
    -
    - Runaway (U & I) -
    - Galantis +
    +
    +
    + 6
    -
    -
    - 03:47 -
    -
    - - - -
    -
    -
    - +
    + Runaway (U & I) +
    +
    + Runaway (U & I) +
    + Galantis +
    +
    +
    + 03:47 +
    +
    + + -
    - - Action - - - Another action +
    +
    +
    + + +
    + + Action + + + Another action + +
    -
    -
    -
    -
    - 7 -
    -
    - Light It Up (feat. Nyla & Fuse ODG) - Remix -
    -
    - Light It Up (feat. Nyla & Fuse ODG) - Remix -
    - Major Lazer, - Nyla, - Fuse ODG +
    +
    +
    + 7
    -
    -
    - 02:46 -
    -
    - - - -
    -
    -
    - +
    + Light It Up (feat. Nyla & Fuse ODG) - Remix +
    +
    + Light It Up (feat. Nyla & Fuse ODG) - Remix +
    + Major Lazer, + Nyla, + Fuse ODG +
    +
    +
    + 02:46 +
    +
    + + -
    - - Action - - - Another action +
    +
    +
    + + +
    + + Action + + + Another action + +
    -
    -
    -
    -
    - 8 -
    -
    - Hangover -
    -
    - Hangover -
    - Taio Cruz, - Flo Rida +
    +
    +
    + 8
    -
    -
    - 04:04 -
    -
    - - - -
    -
    -
    - +
    + Hangover +
    +
    + Hangover +
    + Taio Cruz, + Flo Rida +
    +
    +
    + 04:04 +
    +
    + + -
    - - Action - - - Another action +
    +
    +
    + + +
    + + Action + + + Another action + +
    -
    -
    -
    -
    - 9 -
    -
    - Shape of You -
    -
    - Shape of You -
    - Ed Sheeran +
    +
    +
    + 9
    -
    -
    - 03:53 -
    -
    - - - -
    -
    -
    - +
    + Shape of You +
    +
    + Shape of You +
    + Ed Sheeran +
    +
    +
    + 03:53 +
    +
    + + -
    - - Action - - - Another action +
    +
    +
    + + +
    + + Action + + + Another action + +
    -
    -
    -
    -
    - 10 -
    -
    - Alone -
    -
    - Alone -
    - Alan Walker +
    +
    +
    + 10
    -
    -
    - 02:41 -
    -
    - - - -
    -
    -
    - +
    + Alone +
    +
    + Alone +
    + Alan Walker +
    +
    +
    + 02:41 +
    +
    + + -
    - - Action - - - Another action +
    +
    +
    + + +
    + + Action + + + Another action + +
    -
    -
    -
    -
    - 11 -
    -
    - Langrennsfar -
    -
    - Langrennsfar -
    - Ylvis +
    +
    +
    + 11
    -
    -
    - 02:43 -
    -
    - - - -
    -
    -
    - +
    + Langrennsfar +
    +
    + Langrennsfar +
    + Ylvis +
    +
    +
    + 02:43 +
    +
    + + -
    - - Action - - - Another action +
    +
    +
    + + +
    + + Action + + + Another action + +
    -
    -
    -
    -
    - 12 -
    -
    - Skibidi - Romantic Edition -
    -
    - Skibidi - Romantic Edition -
    - Little Big +
    +
    +
    + 12
    -
    -
    - 03:12 -
    -
    - - - -
    -
    -
    - +
    + Skibidi - Romantic Edition +
    +
    + Skibidi - Romantic Edition +
    + Little Big +
    +
    +
    + 03:12 +
    +
    + + -
    - - Action - - - Another action +
    +
    +
    + + +
    + + Action + + + Another action + +
    @@ -890,109 +946,109 @@
    -
    -
    -

    Top tracks

    -
    -
    -
    -
    -
    - Shape of You -
    -
    -
    - Shape of You -
    - Ed Sheeran +
    +

    Top tracks

    +
    +
    +
    +
    +
    + Shape of You +
    +
    +
    + Shape of You +
    + Ed Sheeran +
    -
    -
    -
    -
    -
    - Alone -
    -
    -
    - Alone -
    - Alan Walker +
    +
    +
    +
    + Alone +
    +
    +
    + Alone +
    + Alan Walker +
    -
    -
    -
    -
    -
    - Langrennsfar -
    -
    -
    - Langrennsfar -
    - Ylvis +
    +
    +
    +
    + Langrennsfar +
    +
    +
    + Langrennsfar +
    + Ylvis +
    -
    -
    -
    -
    -
    - Skibidi - Romantic Edition -
    -
    -
    - Skibidi - Romantic Edition -
    - Little Big +
    +
    +
    +
    + Skibidi - Romantic Edition +
    +
    +
    + Skibidi - Romantic Edition +
    + Little Big +
    -
    -
    -
    -
    -
    - Miracle -
    -
    -
    - Miracle -
    - Caravan Palace +
    +
    +
    +
    + Miracle +
    +
    +
    + Miracle +
    + Caravan Palace +
    -
    -
    -
    -
    -
    - Different World (feat. CORSAK) -
    -
    -
    - Different World (feat. CORSAK) -
    - Alan Walker, - K-391, - Sofia Carson, - CORSAK +
    +
    +
    +
    + Different World (feat. CORSAK) +
    +
    +
    + Different World (feat. CORSAK) +
    + Alan Walker, + K-391, + Sofia Carson, + CORSAK +
    @@ -1011,17 +1067,24 @@
  • Documentation
  • License
  • Source code
    • +
  • + + + + Sponsor + +
    • @@ -1031,7 +1094,6 @@
    - diff --git a/demo/navigation.html b/demo/navigation.html index bb45fdda3..49ed69522 100644 --- a/demo/navigation.html +++ b/demo/navigation.html @@ -1,10 +1,10 @@ @@ -21,7 +21,7 @@ -
    +
    -

    - - Tabler - -

    -
    -
    - - - +
    +
    +
    +
    +
    +
    +
    + +

    + + Tabler -
    -
    -
    - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. -
    -
    -
    -

    -
    - - -
    -
    Mallory Hulme
    -
    Geologist IV
    -
    -     -
    - Set status - Profile & account - Feedback -
    - Settings - Logout -
    -
    -
    - -
    -
    -
    -
    -
    -
    - -

    - - Tabler - -

    -
    -
    - - - - -
    -
    -
    - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. -
    -
    -
    -
    -
    - - -
    -
    Dunn Slane
    -
    Research Nurse
    -
    -     -
    - Set status - Profile & account - Feedback -
    - Settings - Logout -
    -
    -
    - -
    -
    -
    -
    -
    -
    - -

    - - Dashboard - -

    -
    -
    - - - - -
    -
    -
    - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. -
    -
    -
    -
    -
    - - - -
    - Set status - Profile & account - Feedback -
    - Settings - Logout -
    -
    -
    - -
    -
    -
    -
    -
    -
    - -

    - - Tabler - -

    -
    -
    - - - - -
    -
    -
    - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. -
    -
    -
    -
    -
    - - -
    -
    Maryjo Lebarree
    -
    Civil Engineer
    -
    -     -
    - Set status - Profile & account - Feedback -
    - Settings - Logout -
    -
    -
    - -
    -
    -
    -
    -
    -
    - -
    -
    - - - - -
    -
    -
    - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. +
    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. +
    +
    + + +
    +
    Mallory Hulme
    +
    Geologist IV
    +
    +     +
    + Set status + Profile & account + Feedback +
    + Settings + Logout +
    +
    -
    - - EP - -
    - Set status - Profile & account - Feedback -
    - Settings - Logout +
    +
    +
    +
    +
    +
    + +

    + + Tabler + +

    +
    +
    + + + + + +
    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. +
    +
    +
    +
    +
    + + +
    +
    Dunn Slane
    +
    Research Nurse
    +
    +     +
    + Set status + Profile & account + Feedback +
    + Settings + Logout +
    +
    +
    + +
    +
    +
    +
    +
    +
    + +

    + + Dashboard + +

    +
    +
    + + + + + +
    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. +
    +
    +
    +
    +
    + + + +
    + Set status + Profile & account + Feedback +
    + Settings + Logout +
    +
    +
    + +
    +
    +
    +
    +
    +
    + +

    + + Tabler + +

    +
    +
    + + + + + +
    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. +
    +
    +
    +
    +
    + + +
    +
    Maryjo Lebarree
    +
    Civil Engineer
    +
    +     +
    + Set status + Profile & account + Feedback +
    + Settings + Logout +
    +
    +
    + +
    +
    +
    +
    +
    +
    + +
    +
    + + + + + +
    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. +
    +
    +
    +
    +
    + + EP + +
    + Set status + Profile & account + Feedback +
    + Settings + Logout +
    +
    +
    + +
    +
    +
    +
    +
    +
    + +

    + + Tabler + Dashboard + +

    +
    +
    +
    + + + + Source code + + + + + Sponsor + +
    +
    +
    + + + + + +
    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. +
    +
    +
    +
    +
    + + +
    +
    Kellie Skingley
    +
    Teacher
    +
    +     +
    + Set status + Profile & account + Feedback +
    + Settings + Logout +
    +
    +
    +
    +
    +
    -
    -
    -
    -
    -
    -
    - -

    - - Tabler - Dashboard - -

    -
    -
    - - - - -
    -
    -
    - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. -
    +
    + + First + + + Second + + + Third + +
    + +
  • + + + + + + Disabled + + +
    • + +
    +
    +
    + + + + + +
    +
    -
    - - -
    -
    Kellie Skingley
    -
    Teacher
    -
    -     -
    - Set status - Profile & account - Feedback -
    - Settings - Logout -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -

    - - Tabler - -

    -
    -
    - - - +
    +
    +
    + +

    + + Tabler -
    -
    -
    - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. +

    +
    +
    +
    + + + + Source code + + + + + Sponsor + +
    +
    +
    + + + + + +
    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. +
    -
    -
    - - -
    -
    Christabel Charlwood
    -
    Tax Accountant
    +
    + + +
    +
    Christabel Charlwood
    +
    Tax Accountant
    +
    +     +
    + Set status + Profile & account + Feedback +
    + Settings + Logout
    - -
    - Set status - Profile & account - Feedback -
    - Settings - Logout
    -
    -
    -
    -
    +
    + @@ -1088,17 +1125,24 @@
  • Documentation
  • License
  • Source code
    • +
  • + + + + Sponsor + +
    • @@ -1108,7 +1152,6 @@
    - diff --git a/demo/page-headers.html b/demo/page-headers.html deleted file mode 100644 index caec9c611..000000000 --- a/demo/page-headers.html +++ /dev/null @@ -1,621 +0,0 @@ - - - - - - - - Page headers - Tabler - Premium and Open Source dashboard template with responsive and high quality UI. - - - - - - - - -
    -
    -
    - -

    - - Tabler - -

    -
    -
    - - - - -
    -
    -
    - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. -
    -
    -
    -
    -
    - - -
    -
    Paweł Kuna
    -
    UI Designer
    -
    -     -
    - Set status - Profile & account - Feedback -
    - Settings - Logout -
    -
    -
    -
    -
    -
    - -
    -
    -
    - -
    -
    -
    -

    - Page headers -

    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -

    Paweł Kuna

    -
    -
    -
    - - UI Designer at Tabler -
    -
    - - 194 friends -
    -
    - - Verified -
    -
    -
    -
    -
    - - - Send message - -
    -
    -
    -
    -
    -
    -
    -
    -

    Gallery

    -
    1-12 of 241 photos
    -
    -
    -
    -
    -
    - - - - -
    -
    - - - Add photo - -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    Improve cards with no border

    -
    - #693 - opened by Jeffie Lewzey - in Calendar Page -
    -
    -
    -
    - - - Edit - - - - Subscribe - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
      -
    1. Home
      2. -
    2. Library
      3. -
    3. Articles
      4. -
    -
    -

    - Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. -

    -
    -
    -
    - - - Edit - - - Publish - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - Overview -
    -

    - Dashboard -

    -
    -
    -
    - - - New view - - - - - Create new report - - - - -
    -
    -
    -
    -
    -
    - -
    -
    - - - - - - - \ No newline at end of file diff --git a/demo/pagination.html b/demo/pagination.html index 68e9d533f..9fb16908b 100644 --- a/demo/pagination.html +++ b/demo/pagination.html @@ -1,10 +1,10 @@ @@ -21,7 +21,7 @@ -
    +
    - - Reset to defaults - -
    - -
    -
    -
    -
    -
    - -
    -
    - -
    -
    Paweł Kuna
    -
    3 days ago
    +
    + + + Reset to defaults + +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    Paweł Kuna
    +
    3 days ago
    +
    -
    -
    -
    - -
    -
    - JL -
    -
    Jeffie Lewzey
    -
    5 days ago
    +
    +
    + +
    +
    + JL +
    +
    Jeffie Lewzey
    +
    5 days ago
    +
    -
    -
    -
    - -
    -
    - -
    -
    Mallory Hulme
    -
    yesterday
    +
    +
    + +
    +
    + +
    +
    Mallory Hulme
    +
    yesterday
    +
    -
    -
    -
    - -
    -
    - -
    -
    Dunn Slane
    -
    1 week and 3 days ago
    +
    +
    + +
    +
    + +
    +
    Dunn Slane
    +
    1 week and 3 days ago
    +
    -
    -
    -
    - -
    -
    - -
    -
    Emmy Levet
    -
    5 days ago
    +
    +
    + +
    +
    + +
    +
    Emmy Levet
    +
    5 days ago
    +
    -
    -
    -
    - -
    -
    - -
    -
    Maryjo Lebarree
    -
    3 days ago
    +
    +
    + +
    +
    + +
    +
    Maryjo Lebarree
    +
    3 days ago
    +
    -
    -
    -
    - -
    -
    - EP -
    -
    Egan Poetz
    -
    6 days ago
    +
    +
    + +
    +
    + EP +
    +
    Egan Poetz
    +
    6 days ago
    +
    -
    -
    -
    - -
    -
    - -
    -
    Kellie Skingley
    -
    1 week and 2 days ago
    +
    +
    + +
    +
    + +
    +
    Kellie Skingley
    +
    1 week and 2 days ago
    +
    -
    -
    -
    - -
    -
    - -
    -
    Christabel Charlwood
    -
    today
    +
    +
    + +
    +
    + +
    +
    Christabel Charlwood
    +
    today
    +
    -
    -
    -
    - -
    -
    - HS -
    -
    Haskel Shelper
    -
    2 days ago
    +
    +
    + +
    +
    + HS +
    +
    Haskel Shelper
    +
    2 days ago
    +
    -
    -
    -
    - -
    -
    - -
    -
    Lorry Mion
    -
    5 days ago
    +
    +
    + +
    +
    + +
    +
    Lorry Mion
    +
    5 days ago
    +
    -
    -
    -
    - -
    -
    - -
    -
    Leesa Beaty
    -
    6 days ago
    +
    +
    + +
    +
    + +
    +
    Leesa Beaty
    +
    6 days ago
    +
    -
    -
    -
    - -
    -
    - -
    -
    Perren Keemar
    -
    4 days ago
    +
    +
    + +
    +
    + +
    +
    Perren Keemar
    +
    4 days ago
    +
    -
    -
    -
    - -
    -
    - SA -
    -
    Sunny Airey
    -
    5 days ago
    +
    +
    + +
    +
    + SA +
    +
    Sunny Airey
    +
    5 days ago
    +
    -
    -
    -
    - -
    -
    - -
    -
    Geoffry Flaunders
    -
    1 week ago
    +
    +
    + +
    +
    + +
    +
    Geoffry Flaunders
    +
    1 week ago
    +
    -
    -
    -
    - -
    -
    - -
    -
    Thatcher Keel
    -
    1 week and 2 days ago
    +
    +
    + +
    +
    + +
    +
    Thatcher Keel
    +
    1 week and 2 days ago
    +
    -
    -
    -
    - -
    -
    - -
    -
    Dyann Escala
    -
    4 days ago
    +
    +
    + +
    +
    + +
    +
    Dyann Escala
    +
    4 days ago
    +
    -
    -
    -
    - -
    -
    - -
    -
    Avivah Mugleston
    -
    6 days ago
    +
    +
    + +
    +
    + +
    +
    Avivah Mugleston
    +
    6 days ago
    +
    -
    -
    -
    - -
    -
    - AA -
    -
    Arlie Armstead
    -
    1 week and 1 day ago
    +
    +
    + +
    +
    + AA +
    +
    Arlie Armstead
    +
    1 week and 1 day ago
    +
    -
    -
    -
    - -
    -
    - -
    -
    Tessie Curzon
    -
    3 days ago
    +
    +
    + +
    +
    + +
    +
    Tessie Curzon
    +
    3 days ago
    +
    -
    -
    -
    - -
    -
    - -
    -
    Flossi Uttley
    -
    4 days ago
    +
    +
    + +
    +
    + +
    +
    Flossi Uttley
    +
    4 days ago
    +
    -
    -
    -
    - -
    -
    - -
    -
    Cesya Spritt
    -
    1 week ago
    +
    +
    + +
    +
    + +
    +
    Cesya Spritt
    +
    1 week ago
    +
    -
    -
    -
    - -
    -
    - -
    -
    Johnnie Gilby
    -
    1 week and 1 day ago
    +
    +
    + +
    +
    + +
    +
    Johnnie Gilby
    +
    1 week and 1 day ago
    +
    -
    -
    -
    - -
    -
    - -
    -
    Ban Rzehor
    -
    1 week and 1 day ago
    +
    +
    + +
    +
    + +
    +
    Ban Rzehor
    +
    1 week and 1 day ago
    +
    -
    -
    -
    - -
    -
    - -
    -
    Carroll Erat
    -
    6 days ago
    +
    +
    + +
    +
    + +
    +
    Carroll Erat
    +
    6 days ago
    +
    -
    -
    -
    - -
    -
    - -
    -
    Marsha Labat
    -
    today
    +
    +
    + +
    +
    + +
    +
    Marsha Labat
    +
    today
    +
    -
    -
    -
    - -
    -
    - -
    -
    Elston Muffett
    -
    1 week and 3 days ago
    +
    +
    + +
    +
    + +
    +
    Elston Muffett
    +
    1 week and 3 days ago
    +
    -
    -
    -
    - -
    -
    - -
    -
    Leigha Gorce
    -
    1 week and 1 day ago
    +
    +
    + +
    +
    + +
    +
    Leigha Gorce
    +
    1 week and 1 day ago
    +
    -
    -
    -
    - -
    -
    - TB -
    -
    Tallie Bettis
    -
    3 days ago
    +
    +
    + +
    +
    + TB +
    +
    Tallie Bettis
    +
    3 days ago
    +
    -
    -
    -
    - -
    -
    - -
    -
    Merrily Garforth
    -
    3 days ago
    +
    +
    + +
    +
    + +
    +
    Merrily Garforth
    +
    3 days ago
    +
    -
    -
    -
    - -
    -
    - EB -
    -
    Errol Blackley
    -
    2 days ago
    +
    +
    + +
    +
    + EB +
    +
    Errol Blackley
    +
    2 days ago
    +
    -
    -
    -
    - -
    -
    - -
    -
    Ninon Don
    -
    1 week and 1 day ago
    +
    +
    + +
    +
    + +
    +
    Ninon Don
    +
    1 week and 1 day ago
    +
    -
    -
    -
    - -
    -
    - -
    -
    Delaney Cairney
    -
    1 week and 3 days ago
    +
    +
    + +
    +
    + +
    +
    Delaney Cairney
    +
    1 week and 3 days ago
    +
    -
    -
    -
    - -
    -
    - -
    -
    Gratia Gooley
    -
    6 days ago
    +
    +
    + +
    +
    + +
    +
    Gratia Gooley
    +
    6 days ago
    +
    -
    -
    -
    - -
    -
    - -
    -
    Odelinda McCosh
    -
    1 week and 3 days ago
    +
    +
    + +
    +
    + +
    +
    Odelinda McCosh
    +
    1 week and 3 days ago
    +
    @@ -944,17 +964,24 @@
  • Documentation
  • License
  • Source code
    • +
  • + + + + Sponsor + +
    • @@ -964,7 +991,6 @@
    - diff --git a/demo/sign-in.html b/demo/sign-in.html index aed29553b..f9449ce0c 100644 --- a/demo/sign-in.html +++ b/demo/sign-in.html @@ -1,10 +1,10 @@ @@ -21,8 +21,8 @@ -
    -
    +
    +
    @@ -43,7 +43,8 @@
    - + +
    @@ -62,10 +63,12 @@
    + Login with Github
    + Login with Twitter
    @@ -78,7 +81,6 @@
    - diff --git a/demo/sign-up.html b/demo/sign-up.html index 24fea93cb..2e3133b52 100644 --- a/demo/sign-up.html +++ b/demo/sign-up.html @@ -1,10 +1,10 @@ @@ -21,8 +21,8 @@ -
    -
    +
    +
    @@ -42,7 +42,8 @@
    - + +
    @@ -64,7 +65,6 @@
    - diff --git a/demo/sitemap.xml b/demo/sitemap.xml index c5b5c8139..630ba87da 100644 --- a/demo/sitemap.xml +++ b/demo/sitemap.xml @@ -2,155 +2,191 @@ /docs/alerts.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/autosize.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/avatars.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/badges.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 + + + /docs/borders.html + 2021-03-29T01:34:56+02:00 /docs/breadcrumb.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 + + + /docs/browser-support.html + 2021-03-29T01:34:56+02:00 /docs/buttons.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/cards.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/carousel.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/charts.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/colors.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/countup.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/cursors.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/divider.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 + + + /docs/download.html + 2021-03-29T01:34:56+02:00 /docs/dropdowns.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/empty.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/flags.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 + + + /docs/form-color-check.html + 2021-03-29T01:34:56+02:00 /docs/form-elements.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 + + + /docs/form-fieldset.html + 2021-03-29T01:34:56+02:00 /docs/form-helpers.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 + + + /docs/form-image-check.html + 2021-03-29T01:34:56+02:00 + + + /docs/form-selectboxes.html + 2021-03-29T01:34:56+02:00 + + + /docs/form-validation.html + 2021-03-29T01:34:56+02:00 + + + /docs/getting-started.html + 2021-03-29T01:34:56+02:00 /docs/icons.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/ - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/input-mask.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 + + + /docs/interactions.html + 2021-03-29T01:34:56+02:00 /docs/modals.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/page-headers.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/payments.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/progress.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/range-slider.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/ribbons.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/skeleton.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/spinners.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/steps.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/switch-icon.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/tables.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/tabs.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/timelines.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/toasts.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/tooltips.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /docs/typography.html - 2020-12-19T17:53:23+01:00 - - - /docs/usage.html - 2020-12-19T17:53:23+01:00 + 2021-03-29T01:34:56+02:00 /accordion.html @@ -182,9 +218,6 @@ /changelog.html - - /charts-heatmap.html - /charts.html @@ -275,9 +308,6 @@ /map-fullsize.html - - /maps-vector.html - /maps.html @@ -294,10 +324,10 @@ /navigation.html - /page-headers.html + /pagination.html - /pagination.html + /playground.html /pricing.html diff --git a/demo/skeleton.html b/demo/skeleton.html index 789539916..7f3aa5cc2 100644 --- a/demo/skeleton.html +++ b/demo/skeleton.html @@ -1,10 +1,10 @@ @@ -21,7 +21,7 @@ -
    +
    -
    -
    -
    - +
    +
    +
    - - - - - - - - - - - - - - + + + + + + + + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + - - -
    NameTitleRole
    -
    - -
    -
    Thatcher Keel
    -
    tkeelf@blogger.com
    -
    -
    -     		-
    VP Sales
    -
    Business Development
    -     		- User - -
    - - Edit - -
    - -
    - - Action - - - Another action - +
    NameTitleRole
    +
    + +
    +
    Thatcher Keel
    +
    tkeelf@blogger.com
    - -
    -
    - -
    -
    Dyann Escala
    -
    descalag@usatoday.com
    -
    -
    -     		-
    Mechanical Systems Engineer
    -
    Sales
    -     		- Admin - -
    - - Edit - -
    - -
    - - Action - - - Another action - +
    		+
    VP Sales
    +
    Business Development
    +     		+ User + +
    + + Edit + +
    + +
    + + Action + + + Another action + +
    - -
    -
    - -
    -
    Avivah Mugleston
    -
    amuglestonh@intel.com
    -
    -
    -     		-
    Actuary
    -
    Sales
    -     		- User - -
    - - Edit - -
    - -
    - - Action - - - Another action - +
    +
    + +
    +
    Dyann Escala
    +
    descalag@usatoday.com
    - -
    -
    - AA -
    -
    Arlie Armstead
    -
    aarmsteadi@yellowpages.com
    -
    -
    -     		-
    VP Quality Control
    -
    Accounting
    -     		- Owner - -
    - - Edit - -
    - -
    - - Action - - - Another action - +
    		+
    Mechanical Systems Engineer
    +
    Sales
    +     		+ Admin + +
    + + Edit + +
    + +
    + + Action + + + Another action + +
    - -
    -
    - -
    -
    Tessie Curzon
    -
    tcurzonj@hp.com
    -
    -
    -     		-
    Research Nurse
    -
    Product Management
    -     		- Admin - -
    - - Edit - -
    - -
    - - Action - - - Another action - +
    +
    + +
    +
    Avivah Mugleston
    +
    amuglestonh@intel.com
    - -
    + + +
    Actuary
    +
    Sales
    + + + User + + +
    + + Edit + +
    + +
    + + Action + + + Another action + +
    +
    +
    + + + + +
    + AA +
    +
    Arlie Armstead
    +
    aarmsteadi@yellowpages.com
    +
    +
    + + +
    VP Quality Control
    +
    Accounting
    + + + Owner + + +
    + + Edit + +
    + +
    + + Action + + + Another action + +
    +
    +
    + + + + +
    + +
    +
    Tessie Curzon
    +
    tcurzonj@hp.com
    +
    +
    + + +
    Research Nurse
    +
    Product Management
    + + + Admin + + +
    + + Edit + +
    + +
    + + Action + + + Another action + +
    +
    +
    + + + + +
    -
    -
    -
    -
    -

    Invoices

    -
    -
    -
    -
    - Show -
    - +
    +
    +
    +

    Invoices

    +
    +
    +
    +
    + Show +
    + +
    + entries
    - entries -
    -
    - Search: -
    - +
    + Search: +
    + +
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    No. - Invoice SubjectClientVAT No.CreatedStatusPrice
    001401Design Works - - Carlson Limited - - 87956621 - - 15 Dec 2017 - - Paid - $887 - - -
    - - Action - - - Another action - -
    -     -
    001402UX Wireframes - - Adobe - - 87956421 - - 12 Apr 2017 - - Pending - $1200 - - -
    - - Action - - - Another action - -
    -     -
    001403New Dashboard - - Bluewolf - - 87952621 - - 23 Oct 2017 - - Pending - $534 - - -
    - - Action - - - Another action - -
    -     -
    001404Landing Page - - Salesforce - - 87953421 - - 2 Sep 2017 - - Due in 2 Weeks - $1500 - - -
    - - Action - - - Another action - -
    -     -
    001405Marketing Templates - - Printic - - 87956621 - - 29 Jan 2018 - - Paid Today - $648 - - -
    - - Action - - - Another action - -
    -     -
    001406Sales Presentation - - Tabdaq - - 87956621 - - 4 Feb 2018 - - Due in 3 Weeks - $300 - - -
    - - Action - - - Another action - -
    -     -
    001407Logo & Print - - Apple - - 87956621 - - 22 Mar 2018 - - Paid Today - $2500 - - -
    - - Action - - - Another action - -
    -     -
    001408Icons - - Tookapic - - 87956621 - - 13 May 2018 - - Paid Today - $940 - - -
    - - Action - - - Another action - -
    -     -
    -
    -
    -

    Showing 1 to 8 of 16 entries

    - +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    No. + + Invoice SubjectClientVAT No.CreatedStatusPrice
    001401Design Works + + Carlson Limited + + 87956621 + + 15 Dec 2017 + + Paid + $887 + + +
    + + Action + + + Another action + +
    +     +
    001402UX Wireframes + + Adobe + + 87956421 + + 12 Apr 2017 + + Pending + $1200 + + +
    + + Action + + + Another action + +
    +     +
    001403New Dashboard + + Bluewolf + + 87952621 + + 23 Oct 2017 + + Pending + $534 + + +
    + + Action + + + Another action + +
    +     +
    001404Landing Page + + Salesforce + + 87953421 + + 2 Sep 2017 + + Due in 2 Weeks + $1500 + + +
    + + Action + + + Another action + +
    +     +
    001405Marketing Templates + + Printic + + 87956621 + + 29 Jan 2018 + + Paid Today + $648 + + +
    + + Action + + + Another action + +
    +     +
    001406Sales Presentation + + Tabdaq + + 87956621 + + 4 Feb 2018 + + Due in 3 Weeks + $300 + + +
    + + Action + + + Another action + +
    +     +
    001407Logo & Print + + Apple + + 87956621 + + 22 Mar 2018 + + Paid Today + $2500 + + +
    + + Action + + + Another action + +
    +     +
    001408Icons + + Tookapic + + 87956621 + + 13 May 2018 + + Paid Today + $940 + + +
    + + Action + + + Another action + +
    +     +
    +
    +
    +

    Showing 1 to 8 of 16 entries

    + +
    @@ -1174,17 +1197,24 @@
  • Documentation
  • License
  • Source code
    • +
  • + + + + Sponsor + +
    • @@ -1194,7 +1224,6 @@
    - diff --git a/demo/tabs.html b/demo/tabs.html index b13688455..7863c7ceb 100644 --- a/demo/tabs.html +++ b/demo/tabs.html @@ -1,10 +1,10 @@ @@ -21,7 +21,7 @@ -
    +
    \n \n ",this.options.singleMode){if(1===this.datePicked.length){var e=this.datePicked[0].format(this.options.format,this.options.lang);t.querySelector("."+a.previewDateRange).innerHTML=e}}else if(1===this.datePicked.length&&t.querySelector("."+a.buttonApply).setAttribute("disabled",""),2===this.datePicked.length){e=this.datePicked[0].format(this.options.format,this.options.lang);var i=this.datePicked[1].format(this.options.format,this.options.lang);t.querySelector("."+a.previewDateRange).innerHTML=""+e+this.options.delimiter+i}return this.emit("render:footer",t),t},e.prototype.renderWeekNumber=function(t){var e=document.createElement("div"),i=t.getWeek(this.options.firstDay);return e.className=a.weekNumber,e.innerHTML=53===i&&0===t.getMonth()?"53 / 1":i,e},e.prototype.renderTooltip=function(){var t=document.createElement("div");return t.className=a.containerTooltip,t},e.prototype.weekdayName=function(t,e){return void 0===e&&(e="short"),new Date(1970,0,t,12,0,0,0).toLocaleString(this.options.lang,{weekday:e})},e.prototype.calcSkipDays=function(t){var e=t.getDay()-this.options.firstDay;return e<0&&(e+=7),e},e}(s.LPCore);e.Calendar=c},function(t,e,i){"use strict";var n,o=this&&this.__extends||(n=function(t,e){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])})(t,e)},function(t,e){function i(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}),s=this&&this.__assign||function(){return(s=Object.assign||function(t){for(var e,i=1,n=arguments.length;i',nextMonth:'',reset:'\n \n \n '},tooltipText:{one:"day",other:"days"}},i.options=s(s({},i.options),e.element.dataset),Object.keys(i.options).forEach((function(t){"true"!==i.options[t]&&"false"!==i.options[t]||(i.options[t]="true"===i.options[t])}));var n=s(s({},i.options.dropdowns),e.dropdowns),o=s(s({},i.options.buttonText),e.buttonText),r=s(s({},i.options.tooltipText),e.tooltipText);i.options=s(s({},i.options),e),i.options.dropdowns=s({},n),i.options.buttonText=s({},o),i.options.tooltipText=s({},r),i.options.elementEnd||(i.options.allowRepick=!1),i.options.lockDays.length&&(i.options.lockDays=a.DateTime.convertArray(i.options.lockDays,i.options.lockDaysFormat)),i.options.highlightedDays.length&&(i.options.highlightedDays=a.DateTime.convertArray(i.options.highlightedDays,i.options.highlightedDaysFormat));var l=i.parseInput(),c=l[0],h=l[1];i.options.startDate&&(i.options.singleMode||i.options.endDate)&&(c=new a.DateTime(i.options.startDate,i.options.format,i.options.lang)),c&&i.options.endDate&&(h=new a.DateTime(i.options.endDate,i.options.format,i.options.lang)),c instanceof a.DateTime&&!isNaN(c.getTime())&&(i.options.startDate=c),i.options.startDate&&h instanceof a.DateTime&&!isNaN(h.getTime())&&(i.options.endDate=h),!i.options.singleMode||i.options.startDate instanceof a.DateTime||(i.options.startDate=null),i.options.singleMode||i.options.startDate instanceof a.DateTime&&i.options.endDate instanceof a.DateTime||(i.options.startDate=null,i.options.endDate=null);for(var p=0;pwindow.innerHeight,c=e.top+s-i.height>=i.height;l&&c&&(r=e.top+s-i.height)}if(/left|right/.test(n[0])||n[1]&&"auto"!==n[1]&&/left|right/.test(n[1]))a=/left|right/.test(n[0])?e[n[0]]+o:e[n[1]]+o,"right"!==n[0]&&"right"!==n[1]||(a-=i.width);else{a=e.left+o;l=e.left+i.width>window.innerWidth;var h=e.right+o-i.width>=0;l&&h&&(a=e.right+o-i.width)}return{left:a,top:r}},e}(r.EventEmitter);e.LPCore=c},function(t,e,i){"use strict";var n,o="object"==typeof Reflect?Reflect:null,s=o&&"function"==typeof o.apply?o.apply:function(t,e,i){return Function.prototype.apply.call(t,e,i)};n=o&&"function"==typeof o.ownKeys?o.ownKeys:Object.getOwnPropertySymbols?function(t){return Object.getOwnPropertyNames(t).concat(Object.getOwnPropertySymbols(t))}:function(t){return Object.getOwnPropertyNames(t)};var r=Number.isNaN||function(t){return t!=t};function a(){a.init.call(this)}t.exports=a,a.EventEmitter=a,a.prototype._events=void 0,a.prototype._eventsCount=0,a.prototype._maxListeners=void 0;var l=10;function c(t){return void 0===t._maxListeners?a.defaultMaxListeners:t._maxListeners}function h(t,e,i,n){var o,s,r,a;if("function"!=typeof i)throw new TypeError('The "listener" argument must be of type Function. Received type '+typeof i);if(void 0===(s=t._events)?(s=t._events=Object.create(null),t._eventsCount=0):(void 0!==s.newListener&&(t.emit("newListener",e,i.listener?i.listener:i),s=t._events),r=s[e]),void 0===r)r=s[e]=i,++t._eventsCount;else if("function"==typeof r?r=s[e]=n?[i,r]:[r,i]:n?r.unshift(i):r.push(i),(o=c(t))>0&&r.length>o&&!r.warned){r.warned=!0;var l=new Error("Possible EventEmitter memory leak detected. "+r.length+" "+String(e)+" listeners added. Use emitter.setMaxListeners() to increase limit");l.name="MaxListenersExceededWarning",l.emitter=t,l.type=e,l.count=r.length,a=l,console&&console.warn&&console.warn(a)}return t}function p(){for(var t=[],e=0;e0&&(r=e[0]),r instanceof Error)throw r;var a=new Error("Unhandled error."+(r?" ("+r.message+")":""));throw a.context=r,a}var l=o[t];if(void 0===l)return!1;if("function"==typeof l)s(l,this,e);else{var c=l.length,h=f(l,c);for(i=0;i=0;s--)if(i[s]===e||i[s].listener===e){r=i[s].listener,o=s;break}if(o<0)return this;0===o?i.shift():function(t,e){for(;e+1=0;n--)this.removeListener(t,e[n]);return this},a.prototype.listeners=function(t){return u(this,t,!0)},a.prototype.rawListeners=function(t){return u(this,t,!1)},a.listenerCount=function(t,e){return"function"==typeof t.listenerCount?t.listenerCount(e):m.call(t,e)},a.prototype.listenerCount=m,a.prototype.eventNames=function(){return this._eventsCount>0?n(this._events):[]}},function(t,e,i){(e=i(9)(!1)).push([t.i,':root{--litepicker-container-months-color-bg: #fff;--litepicker-container-months-box-shadow-color: #ddd;--litepicker-footer-color-bg: #fafafa;--litepicker-footer-box-shadow-color: #ddd;--litepicker-tooltip-color-bg: #fff;--litepicker-month-header-color: #333;--litepicker-button-prev-month-color: #9e9e9e;--litepicker-button-next-month-color: #9e9e9e;--litepicker-button-prev-month-color-hover: #2196f3;--litepicker-button-next-month-color-hover: #2196f3;--litepicker-month-width: calc(var(--litepicker-day-width) * 7);--litepicker-month-weekday-color: #9e9e9e;--litepicker-month-week-number-color: #9e9e9e;--litepicker-day-width: 38px;--litepicker-day-color: #333;--litepicker-day-color-hover: #2196f3;--litepicker-is-today-color: #f44336;--litepicker-is-in-range-color: #bbdefb;--litepicker-is-locked-color: #9e9e9e;--litepicker-is-start-color: #fff;--litepicker-is-start-color-bg: #2196f3;--litepicker-is-end-color: #fff;--litepicker-is-end-color-bg: #2196f3;--litepicker-button-cancel-color: #fff;--litepicker-button-cancel-color-bg: #9e9e9e;--litepicker-button-apply-color: #fff;--litepicker-button-apply-color-bg: #2196f3;--litepicker-button-reset-color: #909090;--litepicker-button-reset-color-hover: #2196f3;--litepicker-highlighted-day-color: #333;--litepicker-highlighted-day-color-bg: #ffeb3b}.show-week-numbers{--litepicker-month-width: calc(var(--litepicker-day-width) * 8)}.litepicker{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;font-size:0.8em;display:none}.litepicker button{border:none;background:none}.litepicker .container__main{display:-webkit-box;display:-ms-flexbox;display:flex}.litepicker .container__months{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;background-color:var(--litepicker-container-months-color-bg);border-radius:5px;-webkit-box-shadow:0 0 5px var(--litepicker-container-months-box-shadow-color);box-shadow:0 0 5px var(--litepicker-container-months-box-shadow-color);width:calc(var(--litepicker-month-width) + 10px);-webkit-box-sizing:content-box;box-sizing:content-box}.litepicker .container__months.columns-2{width:calc((var(--litepicker-month-width) * 2) + 20px)}.litepicker .container__months.columns-3{width:calc((var(--litepicker-month-width) * 3) + 30px)}.litepicker .container__months.columns-4{width:calc((var(--litepicker-month-width) * 4) + 40px)}.litepicker .container__months.split-view .month-item-header .button-previous-month,.litepicker .container__months.split-view .month-item-header .button-next-month{visibility:visible}.litepicker .container__months .month-item{padding:5px;width:var(--litepicker-month-width);-webkit-box-sizing:content-box;box-sizing:content-box}.litepicker .container__months .month-item-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;font-weight:500;padding:10px 5px;text-align:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--litepicker-month-header-color)}.litepicker .container__months .month-item-header div{-webkit-box-flex:1;-ms-flex:1;flex:1}.litepicker .container__months .month-item-header div>.month-item-name{margin-right:5px}.litepicker .container__months .month-item-header div>.month-item-year{padding:0}.litepicker .container__months .month-item-header .reset-button{color:var(--litepicker-button-reset-color)}.litepicker .container__months .month-item-header .reset-button>svg{fill:var(--litepicker-button-reset-color)}.litepicker .container__months .month-item-header .reset-button *{pointer-events:none}.litepicker .container__months .month-item-header .reset-button:hover{color:var(--litepicker-button-reset-color-hover)}.litepicker .container__months .month-item-header .reset-button:hover>svg{fill:var(--litepicker-button-reset-color-hover)}.litepicker .container__months .month-item-header .button-previous-month,.litepicker .container__months .month-item-header .button-next-month{visibility:hidden;text-decoration:none;padding:3px 5px;border-radius:3px;-webkit-transition:color 0.3s, border 0.3s;transition:color 0.3s, border 0.3s;cursor:default}.litepicker .container__months .month-item-header .button-previous-month *,.litepicker .container__months .month-item-header .button-next-month *{pointer-events:none}.litepicker .container__months .month-item-header .button-previous-month{color:var(--litepicker-button-prev-month-color)}.litepicker .container__months .month-item-header .button-previous-month>svg,.litepicker .container__months .month-item-header .button-previous-month>img{fill:var(--litepicker-button-prev-month-color)}.litepicker .container__months .month-item-header .button-previous-month:hover{color:var(--litepicker-button-prev-month-color-hover)}.litepicker .container__months .month-item-header .button-previous-month:hover>svg{fill:var(--litepicker-button-prev-month-color-hover)}.litepicker .container__months .month-item-header .button-next-month{color:var(--litepicker-button-next-month-color)}.litepicker .container__months .month-item-header .button-next-month>svg,.litepicker .container__months .month-item-header .button-next-month>img{fill:var(--litepicker-button-next-month-color)}.litepicker .container__months .month-item-header .button-next-month:hover{color:var(--litepicker-button-next-month-color-hover)}.litepicker .container__months .month-item-header .button-next-month:hover>svg{fill:var(--litepicker-button-next-month-color-hover)}.litepicker .container__months .month-item-weekdays-row{display:-webkit-box;display:-ms-flexbox;display:flex;justify-self:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;color:var(--litepicker-month-weekday-color)}.litepicker .container__months .month-item-weekdays-row>div{padding:5px 0;font-size:85%;-webkit-box-flex:1;-ms-flex:1;flex:1;width:var(--litepicker-day-width);text-align:center}.litepicker .container__months .month-item:first-child .button-previous-month{visibility:visible}.litepicker .container__months .month-item:last-child .button-next-month{visibility:visible}.litepicker .container__months .month-item.no-previous-month .button-previous-month{visibility:hidden}.litepicker .container__months .month-item.no-next-month .button-next-month{visibility:hidden}.litepicker .container__days{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-self:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:center;-webkit-box-sizing:content-box;box-sizing:content-box}.litepicker .container__days>div,.litepicker .container__days>a{padding:5px 0;width:var(--litepicker-day-width)}.litepicker .container__days .day-item{color:var(--litepicker-day-color);text-align:center;text-decoration:none;border-radius:3px;-webkit-transition:color 0.3s, border 0.3s;transition:color 0.3s, border 0.3s;cursor:default}.litepicker .container__days .day-item:hover{color:var(--litepicker-day-color-hover);-webkit-box-shadow:inset 0 0 0 1px var(--litepicker-day-color-hover);box-shadow:inset 0 0 0 1px var(--litepicker-day-color-hover)}.litepicker .container__days .day-item.is-today{color:var(--litepicker-is-today-color)}.litepicker .container__days .day-item.is-locked{color:var(--litepicker-is-locked-color)}.litepicker .container__days .day-item.is-locked:hover{color:var(--litepicker-is-locked-color);-webkit-box-shadow:none;box-shadow:none;cursor:default}.litepicker .container__days .day-item.is-in-range{background-color:var(--litepicker-is-in-range-color);border-radius:0}.litepicker .container__days .day-item.is-start-date{color:var(--litepicker-is-start-color);background-color:var(--litepicker-is-start-color-bg);border-top-left-radius:5px;border-bottom-left-radius:5px;border-top-right-radius:0;border-bottom-right-radius:0}.litepicker .container__days .day-item.is-start-date.is-flipped{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:5px;border-bottom-right-radius:5px}.litepicker .container__days .day-item.is-end-date{color:var(--litepicker-is-end-color);background-color:var(--litepicker-is-end-color-bg);border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:5px;border-bottom-right-radius:5px}.litepicker .container__days .day-item.is-end-date.is-flipped{border-top-left-radius:5px;border-bottom-left-radius:5px;border-top-right-radius:0;border-bottom-right-radius:0}.litepicker .container__days .day-item.is-start-date.is-end-date{border-top-left-radius:5px;border-bottom-left-radius:5px;border-top-right-radius:5px;border-bottom-right-radius:5px}.litepicker .container__days .day-item.is-highlighted{color:var(--litepicker-highlighted-day-color);background-color:var(--litepicker-highlighted-day-color-bg)}.litepicker .container__days .week-number{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:var(--litepicker-month-week-number-color);font-size:85%}.litepicker .container__footer{text-align:right;padding:10px 5px;margin:0 5px;background-color:var(--litepicker-footer-color-bg);-webkit-box-shadow:inset 0px 3px 3px 0px var(--litepicker-footer-box-shadow-color);box-shadow:inset 0px 3px 3px 0px var(--litepicker-footer-box-shadow-color);border-bottom-left-radius:5px;border-bottom-right-radius:5px}.litepicker .container__footer .preview-date-range{margin-right:10px;font-size:90%}.litepicker .container__footer .button-cancel{background-color:var(--litepicker-button-cancel-color-bg);color:var(--litepicker-button-cancel-color);border:0;padding:3px 7px 4px;border-radius:3px}.litepicker .container__footer .button-cancel *{pointer-events:none}.litepicker .container__footer .button-apply{background-color:var(--litepicker-button-apply-color-bg);color:var(--litepicker-button-apply-color);border:0;padding:3px 7px 4px;border-radius:3px;margin-left:10px;margin-right:10px}.litepicker .container__footer .button-apply:disabled{opacity:0.7}.litepicker .container__footer .button-apply *{pointer-events:none}.litepicker .container__tooltip{position:absolute;margin-top:-4px;padding:4px 8px;border-radius:4px;background-color:var(--litepicker-tooltip-color-bg);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25);box-shadow:0 1px 3px rgba(0,0,0,0.25);white-space:nowrap;font-size:11px;pointer-events:none;visibility:hidden}.litepicker .container__tooltip:before{position:absolute;bottom:-5px;left:calc(50% - 5px);border-top:5px solid rgba(0,0,0,0.12);border-right:5px solid transparent;border-left:5px solid transparent;content:""}.litepicker .container__tooltip:after{position:absolute;bottom:-4px;left:calc(50% - 4px);border-top:4px solid var(--litepicker-tooltip-color-bg);border-right:4px solid transparent;border-left:4px solid transparent;content:""}\n',""]),e.locals={showWeekNumbers:"show-week-numbers",litepicker:"litepicker",containerMain:"container__main",containerMonths:"container__months",columns2:"columns-2",columns3:"columns-3",columns4:"columns-4",splitView:"split-view",monthItemHeader:"month-item-header",buttonPreviousMonth:"button-previous-month",buttonNextMonth:"button-next-month",monthItem:"month-item",monthItemName:"month-item-name",monthItemYear:"month-item-year",resetButton:"reset-button",monthItemWeekdaysRow:"month-item-weekdays-row",noPreviousMonth:"no-previous-month",noNextMonth:"no-next-month",containerDays:"container__days",dayItem:"day-item",isToday:"is-today",isLocked:"is-locked",isInRange:"is-in-range",isStartDate:"is-start-date",isFlipped:"is-flipped",isEndDate:"is-end-date",isHighlighted:"is-highlighted",weekNumber:"week-number",containerFooter:"container__footer",previewDateRange:"preview-date-range",buttonCancel:"button-cancel",buttonApply:"button-apply",containerTooltip:"container__tooltip"},t.exports=e},function(t,e,i){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var i=function(t,e){var i=t[1]||"",n=t[3];if(!n)return i;if(e&&"function"==typeof btoa){var o=(r=n,a=btoa(unescape(encodeURIComponent(JSON.stringify(r)))),l="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(a),"/*# ".concat(l," */")),s=n.sources.map((function(t){return"/*# sourceURL=".concat(n.sourceRoot||"").concat(t," */")}));return[i].concat(s).concat([o]).join("\n")}var r,a,l;return[i].join("\n")}(e,t);return e[2]?"@media ".concat(e[2]," {").concat(i,"}"):i})).join("")},e.i=function(t,i,n){"string"==typeof t&&(t=[[null,t,""]]);var o={};if(n)for(var s=0;sthis.options.endDate.getTime()&&(this.options.endDate=this.options.startDate.clone(),this.options.startDate=new o.DateTime(t,this.options.format,this.options.lang)),this.updateInput())},s.Litepicker.prototype.setDateRange=function(t,e,i){void 0===i&&(i=!1),this.triggerElement=void 0;var n=new o.DateTime(t,this.options.format,this.options.lang),s=new o.DateTime(e,this.options.format,this.options.lang);(this.options.disallowLockDaysInRange?r.rangeIsLocked([n,s],this.options):r.dateIsLocked(n,this.options,[n,s])||r.dateIsLocked(s,this.options,[n,s]))&&!i?this.emit("error:range",[n,s]):(this.setStartDate(n),this.setEndDate(s),this.options.inlineMode&&this.render(),this.updateInput(),this.emit("selected",this.getStartDate(),this.getEndDate()))},s.Litepicker.prototype.gotoDate=function(t,e){void 0===e&&(e=0);var i=new o.DateTime(t);i.setDate(1),this.calendars[e]=i.clone(),this.render()},s.Litepicker.prototype.setLockDays=function(t){this.options.lockDays=o.DateTime.convertArray(t,this.options.lockDaysFormat),this.render()},s.Litepicker.prototype.setHighlightedDays=function(t){this.options.highlightedDays=o.DateTime.convertArray(t,this.options.highlightedDaysFormat),this.render()},s.Litepicker.prototype.setOptions=function(t){delete t.element,delete t.elementEnd,delete t.parentEl,t.startDate&&(t.startDate=new o.DateTime(t.startDate,this.options.format,this.options.lang)),t.endDate&&(t.endDate=new o.DateTime(t.endDate,this.options.format,this.options.lang));var e=n(n({},this.options.dropdowns),t.dropdowns),i=n(n({},this.options.buttonText),t.buttonText),s=n(n({},this.options.tooltipText),t.tooltipText);this.options=n(n({},this.options),t),this.options.dropdowns=n({},e),this.options.buttonText=n({},i),this.options.tooltipText=n({},s),!this.options.singleMode||this.options.startDate instanceof o.DateTime||(this.options.startDate=null,this.options.endDate=null),this.options.singleMode||this.options.startDate instanceof o.DateTime&&this.options.endDate instanceof o.DateTime||(this.options.startDate=null,this.options.endDate=null);for(var r=0;r.noUi-tooltip{-webkit-transform:translate(50%,0);transform:translate(50%,0);left:auto;bottom:10px}.noUi-vertical .noUi-origin>.noUi-tooltip{-webkit-transform:translate(0,-18px);transform:translate(0,-18px);top:auto;right:28px} \ No newline at end of file diff --git a/dist/libs/selectize/dist/css/selectize.css b/dist/libs/selectize/dist/css/selectize.css deleted file mode 100644 index 3ec90ad0e..000000000 --- a/dist/libs/selectize/dist/css/selectize.css +++ /dev/null @@ -1,333 +0,0 @@ -/** - * selectize.css (v0.12.6) - * Copyright (c) 2013–2015 Brian Reavis & contributors - * - * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this - * file except in compliance with the License. You may obtain a copy of the License at: - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF - * ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - * - * @author Brian Reavis - */ - -.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder { - visibility: visible !important; - background: #f2f2f2 !important; - background: rgba(0, 0, 0, 0.06) !important; - border: 0 none !important; - -webkit-box-shadow: inset 0 0 12px 4px #fff; - box-shadow: inset 0 0 12px 4px #fff; -} -.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after { - content: '!'; - visibility: hidden; -} -.selectize-control.plugin-drag_drop .ui-sortable-helper { - -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); -} -.selectize-dropdown-header { - position: relative; - padding: 5px 8px; - border-bottom: 1px solid #d0d0d0; - background: #f8f8f8; - -webkit-border-radius: 3px 3px 0 0; - -moz-border-radius: 3px 3px 0 0; - border-radius: 3px 3px 0 0; -} -.selectize-dropdown-header-close { - position: absolute; - right: 8px; - top: 50%; - color: #303030; - opacity: 0.4; - margin-top: -12px; - line-height: 20px; - font-size: 20px !important; -} -.selectize-dropdown-header-close:hover { - color: #000000; -} -.selectize-dropdown.plugin-optgroup_columns .optgroup { - border-right: 1px solid #f2f2f2; - border-top: 0 none; - float: left; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child { - border-right: 0 none; -} -.selectize-dropdown.plugin-optgroup_columns .optgroup:before { - display: none; -} -.selectize-dropdown.plugin-optgroup_columns .optgroup-header { - border-top: 0 none; -} -.selectize-control.plugin-remove_button [data-value] { - position: relative; - padding-right: 24px !important; -} -.selectize-control.plugin-remove_button [data-value] .remove { - z-index: 1; - /* fixes ie bug (see #392) */ - position: absolute; - top: 0; - right: 0; - bottom: 0; - width: 17px; - text-align: center; - font-weight: bold; - font-size: 12px; - color: inherit; - text-decoration: none; - vertical-align: middle; - display: inline-block; - padding: 2px 0 0 0; - border-left: 1px solid #d0d0d0; - -webkit-border-radius: 0 2px 2px 0; - -moz-border-radius: 0 2px 2px 0; - border-radius: 0 2px 2px 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -.selectize-control.plugin-remove_button [data-value] .remove:hover { - background: rgba(0, 0, 0, 0.05); -} -.selectize-control.plugin-remove_button [data-value].active .remove { - border-left-color: #cacaca; -} -.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover { - background: none; -} -.selectize-control.plugin-remove_button .disabled [data-value] .remove { - border-left-color: #ffffff; -} -.selectize-control.plugin-remove_button .remove-single { - position: absolute; - right: 0; - top: 0; - font-size: 23px; -} -.selectize-control { - position: relative; -} -.selectize-dropdown, -.selectize-input, -.selectize-input input { - color: #303030; - font-family: inherit; - font-size: 13px; - line-height: 18px; - -webkit-font-smoothing: inherit; -} -.selectize-input, -.selectize-control.single .selectize-input.input-active { - background: #fff; - cursor: text; - display: inline-block; -} -.selectize-input { - border: 1px solid #d0d0d0; - padding: 8px 8px; - display: inline-block; - width: 100%; - overflow: hidden; - position: relative; - z-index: 1; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -} -.selectize-control.multi .selectize-input.has-items { - padding: 6px 8px 3px; -} -.selectize-input.full { - background-color: #fff; -} -.selectize-input.disabled, -.selectize-input.disabled * { - cursor: default !important; -} -.selectize-input.focus { - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); -} -.selectize-input.dropdown-active { - -webkit-border-radius: 3px 3px 0 0; - -moz-border-radius: 3px 3px 0 0; - border-radius: 3px 3px 0 0; -} -.selectize-input > * { - vertical-align: baseline; - display: -moz-inline-stack; - display: inline-block; - zoom: 1; - *display: inline; -} -.selectize-control.multi .selectize-input > div { - cursor: pointer; - margin: 0 3px 3px 0; - padding: 2px 6px; - background: #f2f2f2; - color: #303030; - border: 0 solid #d0d0d0; -} -.selectize-control.multi .selectize-input > div.active { - background: #e8e8e8; - color: #303030; - border: 0 solid #cacaca; -} -.selectize-control.multi .selectize-input.disabled > div, -.selectize-control.multi .selectize-input.disabled > div.active { - color: #7d7d7d; - background: #ffffff; - border: 0 solid #ffffff; -} -.selectize-input > input { - display: inline-block !important; - padding: 0 !important; - min-height: 0 !important; - max-height: none !important; - max-width: 100% !important; - margin: 0 2px 0 0 !important; - text-indent: 0 !important; - border: 0 none !important; - background: none !important; - line-height: inherit !important; - -webkit-user-select: auto !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; -} -.selectize-input > input::-ms-clear { - display: none; -} -.selectize-input > input:focus { - outline: none !important; -} -.selectize-input::after { - content: ' '; - display: block; - clear: left; -} -.selectize-input.dropdown-active::before { - content: ' '; - display: block; - position: absolute; - background: #f0f0f0; - height: 1px; - bottom: 0; - left: 0; - right: 0; -} -.selectize-dropdown { - position: absolute; - z-index: 10; - border: 1px solid #d0d0d0; - background: #fff; - margin: -1px 0 0 0; - border-top: 0 none; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); - -webkit-border-radius: 0 0 3px 3px; - -moz-border-radius: 0 0 3px 3px; - border-radius: 0 0 3px 3px; -} -.selectize-dropdown [data-selectable] { - cursor: pointer; - overflow: hidden; -} -.selectize-dropdown [data-selectable] .highlight { - background: rgba(125, 168, 208, 0.2); - -webkit-border-radius: 1px; - -moz-border-radius: 1px; - border-radius: 1px; -} -.selectize-dropdown .option, -.selectize-dropdown .optgroup-header { - padding: 5px 8px; -} -.selectize-dropdown .option, -.selectize-dropdown [data-disabled], -.selectize-dropdown [data-disabled] [data-selectable].option { - cursor: inherit; - opacity: 0.5; -} -.selectize-dropdown [data-selectable].option { - opacity: 1; -} -.selectize-dropdown .optgroup:first-child .optgroup-header { - border-top: 0 none; -} -.selectize-dropdown .optgroup-header { - color: #303030; - background: #fff; - cursor: default; -} -.selectize-dropdown .active { - background-color: #f5fafd; - color: #495c68; -} -.selectize-dropdown .active.create { - color: #495c68; -} -.selectize-dropdown .create { - color: rgba(48, 48, 48, 0.5); -} -.selectize-dropdown-content { - overflow-y: auto; - overflow-x: hidden; - max-height: 200px; - -webkit-overflow-scrolling: touch; -} -.selectize-control.single .selectize-input, -.selectize-control.single .selectize-input input { - cursor: pointer; -} -.selectize-control.single .selectize-input.input-active, -.selectize-control.single .selectize-input.input-active input { - cursor: text; -} -.selectize-control.single .selectize-input:after { - content: ' '; - display: block; - position: absolute; - top: 50%; - right: 15px; - margin-top: -3px; - width: 0; - height: 0; - border-style: solid; - border-width: 5px 5px 0 5px; - border-color: #808080 transparent transparent transparent; -} -.selectize-control.single .selectize-input.dropdown-active:after { - margin-top: -4px; - border-width: 0 5px 5px 5px; - border-color: transparent transparent #808080 transparent; -} -.selectize-control.rtl.single .selectize-input:after { - left: 15px; - right: auto; -} -.selectize-control.rtl .selectize-input > input { - margin: 0 4px 0 -2px !important; -} -.selectize-control .selectize-input.disabled { - opacity: 0.5; - background-color: #fafafa; -} diff --git a/dist/libs/selectize/dist/js/standalone/selectize.min.js b/dist/libs/selectize/dist/js/standalone/selectize.min.js deleted file mode 100644 index 43046c90d..000000000 --- a/dist/libs/selectize/dist/js/standalone/selectize.min.js +++ /dev/null @@ -1,4 +0,0 @@ -/*! selectize.js - v0.12.6 | https://github.com/selectize/selectize.js | Apache License (v2) */ - -!function(a,b){"function"==typeof define&&define.amd?define("sifter",b):"object"==typeof exports?module.exports=b():a.Sifter=b()}(this,function(){var a=function(a,b){this.items=a,this.settings=b||{diacritics:!0}};a.prototype.tokenize=function(a){if(!(a=e(String(a||"").toLowerCase()))||!a.length)return[];var b,c,d,g,i=[],j=a.split(/ +/);for(b=0,c=j.length;b0)&&d.items.push({score:c,id:e})}):g.iterator(g.items,function(a,b){d.items.push({score:1,id:b})}),e=g.getSortFunction(d,b),e&&d.items.sort(e),d.total=d.items.length,"number"==typeof b.limit&&(d.items=d.items.slice(0,b.limit)),d};var b=function(a,b){return"number"==typeof a&&"number"==typeof b?a>b?1:ab?1:b>a?-1:0)},c=function(a,b){var c,d,e,f;for(c=1,d=arguments.length;c=0&&a.data.length>0){var f=a.data.match(c),g=document.createElement("span");g.className="highlight";var h=a.splitText(e),i=(h.splitText(f[0].length),h.cloneNode(!0));g.appendChild(i),h.parentNode.replaceChild(g,h),b=1}}else if(1===a.nodeType&&a.childNodes&&!/(script|style)/i.test(a.tagName)&&("highlight"!==a.className||"SPAN"!==a.tagName))for(var j=0;j/g,">").replace(/"/g,""")},m={};m.before=function(a,b,c){var d=a[b];a[b]=function(){return c.apply(a,arguments),d.apply(a,arguments)}},m.after=function(a,b,c){var d=a[b];a[b]=function(){var b=d.apply(a,arguments);return c.apply(a,arguments),b}};var n=function(a){var b=!1;return function(){b||(b=!0,a.apply(this,arguments))}},o=function(a,b){var c;return function(){var d=this,e=arguments;window.clearTimeout(c),c=window.setTimeout(function(){a.apply(d,e)},b)}},p=function(a,b,c){var d,e=a.trigger,f={};a.trigger=function(){var c=arguments[0];if(-1===b.indexOf(c))return e.apply(a,arguments);f[c]=arguments},c.apply(a,[]),a.trigger=e;for(d in f)f.hasOwnProperty(d)&&e.apply(a,f[d])},q=function(a,b,c,d){a.on(b,c,function(b){for(var c=b.target;c&&c.parentNode!==a[0];)c=c.parentNode;return b.currentTarget=c,d.apply(this,[b])})},r=function(a){var b={};if("selectionStart"in a)b.start=a.selectionStart,b.length=a.selectionEnd-b.start;else if(document.selection){a.focus();var c=document.selection.createRange(),d=document.selection.createRange().text.length;c.moveStart("character",-a.value.length),b.start=c.text.length-d,b.length=d}return b},s=function(a,b,c){var d,e,f={};if(c)for(d=0,e=c.length;d").css({position:"absolute",top:-99999,left:-99999,width:"auto",padding:0,whiteSpace:"pre"}).appendTo("body")),w.$testInput.text(b),s(c,w.$testInput,["letterSpacing","fontSize","fontFamily","fontWeight","textTransform"]),w.$testInput.width()):0},u=function(a){var b=null,c=function(c,d){var e,f,g,h,i,j,k,l;c=c||window.event||{},d=d||{},c.metaKey||c.altKey||(d.force||!1!==a.data("grow"))&&(e=a.val(),c.type&&"keydown"===c.type.toLowerCase()&&(f=c.keyCode,g=f>=48&&f<=57||f>=65&&f<=90||f>=96&&f<=111||f>=186&&f<=222||32===f,46===f||8===f?(l=r(a[0]),l.length?e=e.substring(0,l.start)+e.substring(l.start+l.length):8===f&&l.start?e=e.substring(0,l.start-1)+e.substring(l.start+1):46===f&&void 0!==l.start&&(e=e.substring(0,l.start)+e.substring(l.start+1))):g&&(j=c.shiftKey,k=String.fromCharCode(c.keyCode),k=j?k.toUpperCase():k.toLowerCase(),e+=k)),h=a.attr("placeholder"),!e&&h&&(e=h),(i=t(e,a)+4)!==b&&(b=i,a.width(i),a.triggerHandler("resize")))};a.on("keydown keyup update blur",c),c()},v=function(a){var b=document.createElement("div");return b.appendChild(a.cloneNode(!0)),b.innerHTML},w=function(c,d){var e,f,g,h,i=this;h=c[0],h.selectize=i;var j=window.getComputedStyle&&window.getComputedStyle(h,null);if(g=j?j.getPropertyValue("direction"):h.currentStyle&&h.currentStyle.direction,g=g||c.parents("[dir]:first").attr("dir")||"",a.extend(i,{order:0,settings:d,$input:c,tabIndex:c.attr("tabindex")||"",tagType:"select"===h.tagName.toLowerCase()?1:2,rtl:/rtl/i.test(g),eventNS:".selectize"+ ++w.count,highlightedValue:null,isBlurring:!1,isOpen:!1,isDisabled:!1,isRequired:c.is("[required]"),isInvalid:!1,isLocked:!1,isFocused:!1,isInputHidden:!1,isSetup:!1,isShiftDown:!1,isCmdDown:!1,isCtrlDown:!1,ignoreFocus:!1,ignoreBlur:!1,ignoreHover:!1,hasOptions:!1,currentResults:null,lastValue:"",caretPos:0,loading:0,loadedSearches:{},$activeOption:null,$activeItems:[],optgroups:{},options:{},userOptions:{},items:[],renderCache:{},onSearchChange:null===d.loadThrottle?i.onSearchChange:o(i.onSearchChange,d.loadThrottle)}),i.sifter=new b(this.options,{diacritics:d.diacritics}),i.settings.options){for(e=0,f=i.settings.options.length;e").addClass(r.wrapperClass).addClass(m).addClass(l),c=a("
    ").addClass(r.inputClass).addClass("items").appendTo(b),d=a('').appendTo(c).attr("tabindex",w.is(":disabled")?"-1":p.tabIndex),k=a(r.dropdownParent||b),e=a("
    ").addClass(r.dropdownClass).addClass(l).hide().appendTo(k),j=a("
    ").addClass(r.dropdownContentClass).appendTo(e),(o=w.attr("id"))&&(d.attr("id",o+"-selectized"),a("label[for='"+o+"']").attr("for",o+"-selectized")),p.settings.copyClassesToDropdown&&e.addClass(m),b.css({width:w[0].style.width}),p.plugins.names.length&&(n="plugin-"+p.plugins.names.join(" plugin-"),b.addClass(n),e.addClass(n)),(null===r.maxItems||r.maxItems>1)&&1===p.tagType&&w.attr("multiple","multiple"),p.settings.placeholder&&d.attr("placeholder",r.placeholder),!p.settings.splitOn&&p.settings.delimiter){var x=p.settings.delimiter.replace(/[-\/\\^$*+?.()|[\]{}]/g,"\\$&");p.settings.splitOn=new RegExp("\\s*"+x+"+\\s*")}w.attr("autocorrect")&&d.attr("autocorrect",w.attr("autocorrect")),w.attr("autocapitalize")&&d.attr("autocapitalize",w.attr("autocapitalize")),d[0].type=w[0].type,p.$wrapper=b,p.$control=c,p.$control_input=d,p.$dropdown=e,p.$dropdown_content=j,e.on("mouseenter mousedown click","[data-disabled]>[data-selectable]",function(a){a.stopImmediatePropagation()}),e.on("mouseenter","[data-selectable]",function(){return p.onOptionHover.apply(p,arguments)}),e.on("mousedown click","[data-selectable]",function(){return p.onOptionSelect.apply(p,arguments)}),q(c,"mousedown","*:not(input)",function(){return p.onItemSelect.apply(p,arguments)}),u(d),c.on({mousedown:function(){return p.onMouseDown.apply(p,arguments)},click:function(){return p.onClick.apply(p,arguments)}}),d.on({mousedown:function(a){a.stopPropagation()},keydown:function(){return p.onKeyDown.apply(p,arguments)},keyup:function(){return p.onKeyUp.apply(p,arguments)},keypress:function(){return p.onKeyPress.apply(p,arguments)},resize:function(){p.positionDropdown.apply(p,[])},blur:function(){return p.onBlur.apply(p,arguments)},focus:function(){return p.ignoreBlur=!1,p.onFocus.apply(p,arguments)},paste:function(){return p.onPaste.apply(p,arguments)}}),v.on("keydown"+s,function(a){p.isCmdDown=a[f?"metaKey":"ctrlKey"],p.isCtrlDown=a[f?"altKey":"ctrlKey"],p.isShiftDown=a.shiftKey}),v.on("keyup"+s,function(a){a.keyCode===h&&(p.isCtrlDown=!1),16===a.keyCode&&(p.isShiftDown=!1),a.keyCode===g&&(p.isCmdDown=!1)}),v.on("mousedown"+s,function(a){if(p.isFocused){if(a.target===p.$dropdown[0]||a.target.parentNode===p.$dropdown[0])return!1;p.$control.has(a.target).length||a.target===p.$control[0]||p.blur(a.target)}}),t.on(["scroll"+s,"resize"+s].join(" "),function(){p.isOpen&&p.positionDropdown.apply(p,arguments)}),t.on("mousemove"+s,function(){p.ignoreHover=!1}),this.revertSettings={$children:w.children().detach(),tabindex:w.attr("tabindex")},w.attr("tabindex",-1).hide().after(p.$wrapper),a.isArray(r.items)&&(p.setValue(r.items),delete r.items),i&&w.on("invalid"+s,function(a){a.preventDefault(),p.isInvalid=!0,p.refreshState()}),p.updateOriginalInput(),p.refreshItems(),p.refreshState(),p.updatePlaceholder(),p.isSetup=!0,w.is(":disabled")&&p.disable(),p.on("change",this.onChange),w.data("selectize",p),w.addClass("selectized"),p.trigger("initialize"),!0===r.preload&&p.onSearchChange("")},setupTemplates:function(){var b=this,c=b.settings.labelField,d=b.settings.optgroupLabelField,e={optgroup:function(a){return'
    '+a.html+"
    "},optgroup_header:function(a,b){return'
    '+b(a[d])+"
    "},option:function(a,b){return'
    '+b(a[c])+"
    "},item:function(a,b){return'
    '+b(a[c])+"
    "},option_create:function(a,b){return'
    Add '+b(a.input)+"…
    "}};b.settings.render=a.extend({},e,b.settings.render)},setupCallbacks:function(){var a,b,c={initialize:"onInitialize",change:"onChange",item_add:"onItemAdd",item_remove:"onItemRemove",clear:"onClear",option_add:"onOptionAdd",option_remove:"onOptionRemove",option_clear:"onOptionClear",optgroup_add:"onOptionGroupAdd",optgroup_remove:"onOptionGroupRemove",optgroup_clear:"onOptionGroupClear",dropdown_open:"onDropdownOpen",dropdown_close:"onDropdownClose",type:"onType",load:"onLoad",focus:"onFocus",blur:"onBlur"};for(a in c)c.hasOwnProperty(a)&&(b=this.settings[c[a]])&&this.on(a,b)},onClick:function(a){var b=this;b.isFocused&&b.isOpen||(b.focus(),a.preventDefault())},onMouseDown:function(b){var c=this,d=b.isDefaultPrevented();a(b.target);if(c.isFocused){if(b.target!==c.$control_input[0])return"single"===c.settings.mode?c.isOpen?c.close():c.open():d||c.setActiveItem(null),!1}else d||window.setTimeout(function(){c.focus()},0)},onChange:function(){this.$input.trigger("change")},onPaste:function(b){var c=this;if(c.isFull()||c.isInputHidden||c.isLocked)return void b.preventDefault();c.settings.splitOn&&setTimeout(function(){var b=c.$control_input.val();if(b.match(c.settings.splitOn))for(var d=a.trim(b).split(c.settings.splitOn),e=0,f=d.length;eh&&(j=g,g=h,h=j),e=g;e<=h;e++)i=l.$control[0].childNodes[e],-1===l.$activeItems.indexOf(i)&&(a(i).addClass("active"),l.$activeItems.push(i));c.preventDefault()}else"mousedown"===d&&l.isCtrlDown||"keydown"===d&&this.isShiftDown?b.hasClass("active")?(f=l.$activeItems.indexOf(b[0]),l.$activeItems.splice(f,1),b.removeClass("active")):l.$activeItems.push(b.addClass("active")[0]):(a(l.$activeItems).removeClass("active"),l.$activeItems=[b.addClass("active")[0]]);l.hideInput(),this.isFocused||l.focus()}},setActiveOption:function(b,c,d){var e,f,g,h,i,k=this;k.$activeOption&&k.$activeOption.removeClass("active"),k.$activeOption=null,b=a(b),b.length&&(k.$activeOption=b.addClass("active"),!c&&j(c)||(e=k.$dropdown_content.height(),f=k.$activeOption.outerHeight(!0),c=k.$dropdown_content.scrollTop()||0,g=k.$activeOption.offset().top-k.$dropdown_content.offset().top+c,h=g,i=g-e+f,g+f>e+c?k.$dropdown_content.stop().animate({scrollTop:i},d?k.settings.scrollDuration:0):g=0;c--)-1!==f.items.indexOf(k(d.items[c].id))&&d.items.splice(c,1);return d},refreshOptions:function(b){var c,e,f,g,h,i,j,l,m,n,o,p,q,r,s,t;void 0===b&&(b=!0);var u=this,w=a.trim(u.$control_input.val()),x=u.search(w),y=u.$dropdown_content,z=u.$activeOption&&k(u.$activeOption.attr("data-value"));for(g=x.items.length,"number"==typeof u.settings.maxOptions&&(g=Math.min(g,u.settings.maxOptions)),h={},i=[],c=0;c0||q,u.hasOptions?(x.items.length>0?(s=z&&u.getOption(z),s&&s.length?r=s:"single"===u.settings.mode&&u.items.length&&(r=u.getOption(u.items[0])),r&&r.length||(r=t&&!u.settings.addPrecedence?u.getAdjacentOption(t,1):y.find("[data-selectable]:first"))):r=t,u.setActiveOption(r),b&&!u.isOpen&&u.open()):(u.setActiveOption(null),b&&u.isOpen&&u.close())},addOption:function(b){var c,d,e,f=this;if(a.isArray(b))for(c=0,d=b.length;c=0&&e0),b.$control_input.data("grow",!c&&!d)},isFull:function(){ -return null!==this.settings.maxItems&&this.items.length>=this.settings.maxItems},updateOriginalInput:function(a){var b,c,d,e,f=this;if(a=a||{},1===f.tagType){for(d=[],b=0,c=f.items.length;b'+l(e)+"");d.length||this.$input.attr("multiple")||d.push(''),f.$input.html(d.join(""))}else f.$input.val(f.getValue()),f.$input.attr("value",f.$input.val());f.isSetup&&(a.silent||f.trigger("change",f.$input.val()))},updatePlaceholder:function(){if(this.settings.placeholder){var a=this.$control_input;this.items.length?a.removeAttr("placeholder"):a.attr("placeholder",this.settings.placeholder),a.triggerHandler("update",{force:!0})}},open:function(){var a=this;a.isLocked||a.isOpen||"multi"===a.settings.mode&&a.isFull()||(a.focus(),a.isOpen=!0,a.refreshState(),a.$dropdown.css({visibility:"hidden",display:"block"}),a.positionDropdown(),a.$dropdown.css({visibility:"visible"}),a.trigger("dropdown_open",a.$dropdown))},close:function(){var a=this,b=a.isOpen;"single"===a.settings.mode&&a.items.length&&(a.hideInput(),a.isBlurring||a.$control_input.blur()),a.isOpen=!1,a.$dropdown.hide(),a.setActiveOption(null),a.refreshState(),b&&a.trigger("dropdown_close",a.$dropdown)},positionDropdown:function(){var a=this.$control,b="body"===this.settings.dropdownParent?a.offset():a.position();b.top+=a.outerHeight(!0),this.$dropdown.css({width:a[0].getBoundingClientRect().width,top:b.top,left:b.left})},clear:function(a){var b=this;b.items.length&&(b.$control.children(":not(input)").remove(),b.items=[],b.lastQuery=null,b.setCaret(0),b.setActiveItem(null),b.updatePlaceholder(),b.updateOriginalInput({silent:a}),b.refreshState(),b.showInput(),b.trigger("clear"))},insertAtCaret:function(a){var b=Math.min(this.caretPos,this.items.length),c=a[0],d=this.buffer||this.$control[0];0===b?d.insertBefore(c,d.firstChild):d.insertBefore(c,d.childNodes[b]),this.setCaret(b+1)},deleteSelection:function(b){var c,d,e,f,g,h,i,j,k,l=this;if(e=b&&8===b.keyCode?-1:1,f=r(l.$control_input[0]),l.$activeOption&&!l.settings.hideSelected&&(i=l.getAdjacentOption(l.$activeOption,-1).attr("data-value")),g=[],l.$activeItems.length){for(k=l.$control.children(".active:"+(e>0?"last":"first")),h=l.$control.children(":not(input)").index(k),e>0&&h++,c=0,d=l.$activeItems.length;c0&&f.start===l.$control_input.val().length&&g.push(l.items[l.caretPos]));if(!g.length||"function"==typeof l.settings.onDelete&&!1===l.settings.onDelete.apply(l,[g]))return!1;for(void 0!==h&&l.setCaret(h);g.length;)l.removeItem(g.pop());return l.showInput(),l.positionDropdown(),l.refreshOptions(!0),i&&(j=l.getOption(i),j.length&&l.setActiveOption(j)),!0},advanceSelection:function(a,b){var c,d,e,f,g,h=this;0!==a&&(h.rtl&&(a*=-1),c=a>0?"last":"first",d=r(h.$control_input[0]),h.isFocused&&!h.isInputHidden?(f=h.$control_input.val().length,(a<0?0===d.start&&0===d.length:d.start===f)&&!f&&h.advanceCaret(a,b)):(g=h.$control.children(".active:"+c),g.length&&(e=h.$control.children(":not(input)").index(g),h.setActiveItem(null),h.setCaret(a>0?e+1:e))))},advanceCaret:function(a,b){var c,d,e=this;0!==a&&(c=a>0?"next":"prev",e.isShiftDown?(d=e.$control_input[c](),d.length&&(e.hideInput(),e.setActiveItem(d),b&&b.preventDefault())):e.setCaret(e.caretPos+a))},setCaret:function(b){var c=this;if(b="single"===c.settings.mode?c.items.length:Math.max(0,Math.min(c.items.length,b)),!c.isPending){var d,e,f,g;for(f=c.$control.children(":not(input)"),d=0,e=f.length;d
    '+a.title+'×
    '}},b),c.setup=function(){var d=c.setup;return function(){d.apply(c,arguments),c.$dropdown_header=a(b.html(b)),c.$dropdown.prepend(c.$dropdown_header)}}()}),w.define("optgroup_columns",function(b){var c=this;b=a.extend({equalizeWidth:!0,equalizeHeight:!0},b),this.getAdjacentOption=function(b,c){var d=b.closest("[data-group]").find("[data-selectable]"),e=d.index(b)+c;return e>=0&&e
    ',a=a.firstChild,c.body.appendChild(a),b=d.width=a.offsetWidth-a.clientWidth,c.body.removeChild(a)),b},e=function(){var e,f,g,h,i,j,k;if(k=a("[data-group]",c.$dropdown_content),(f=k.length)&&c.$dropdown_content.width()){if(b.equalizeHeight){for(g=0,e=0;e1&&(i=j-h*(f-1),k.eq(f-1).css({width:i})))}};(b.equalizeHeight||b.equalizeWidth)&&(m.after(this,"positionDropdown",e),m.after(this,"refreshOptions",e))}),w.define("remove_button",function(b){b=a.extend({label:"×",title:"Remove",className:"remove",append:!0},b);if("single"===this.settings.mode)return void function(b,c){c.className="remove-single";var d=b,e=''+c.label+"",f=function(b,c){return a("").append(b).append(c)};b.setup=function(){var g=d.setup;return function(){if(c.append){var h=a(d.$input.context).attr("id"),i=(a("#"+h),d.settings.render.item);d.settings.render.item=function(a){return f(i.apply(b,arguments),e)}}g.apply(b,arguments),b.$control.on("click","."+c.className,function(a){a.preventDefault(),d.isLocked||d.clear()})}}()}(this,b);!function(b,c){var d=b,e=''+c.label+"",f=function(a,b){var c=a.search(/(<\/[^>]+>\s*)$/);return a.substring(0,c)+b+a.substring(c)};b.setup=function(){var g=d.setup;return function(){if(c.append){var h=d.settings.render.item;d.settings.render.item=function(a){return f(h.apply(b,arguments),e)}}g.apply(b,arguments),b.$control.on("click","."+c.className,function(b){if(b.preventDefault(),!d.isLocked){var c=a(b.currentTarget).parent();d.setActiveItem(c),d.deleteSelection()&&d.setCaret(d.items.length)}})}}()}(this,b)}),w.define("restore_on_backspace",function(a){var b=this;a.text=a.text||function(a){return a[this.settings.labelField]},this.onKeyDown=function(){var c=b.onKeyDown;return function(b){var d,e;return 8===b.keyCode&&""===this.$control_input.val()&&!this.$activeItems.length&&(d=this.caretPos-1)>=0&&d { format: 'umd', }, plugins: [ + rollupReplace({ + 'process.env.NODE_ENV': JSON.stringify(BUILD ? 'production' : 'development'), + }), rollupBabel({ exclude: 'node_modules/**' }), diff --git a/package.json b/package.json index 3e5ca7c43..7e146b518 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@tabler/core", - "version": "1.0.0-alpha.21", + "version": "1.0.0-beta2", "description": "Premium and Open Source dashboard template with responsive and high quality UI.", "scripts": { "start": "gulp start", @@ -48,14 +48,15 @@ "main": "dist/js/tabler.js", "homepage": "https://tabler.io", "devDependencies": { - "@babel/core": "^7.12.10", - "@babel/preset-env": "^7.12.11", - "@rollup/plugin-commonjs": "^17.0.0", - "@rollup/plugin-node-resolve": "^11.0.1", + "@babel/core": "^7.13.10", + "@babel/preset-env": "^7.13.10", + "@rollup/plugin-commonjs": "^17.1.0", + "@rollup/plugin-node-resolve": "^11.2.0", + "@rollup/plugin-replace": "^2.4.1", "@rollup/stream": "^2.0.0", - "autoprefixer": "^10.1.0", - "browser-sync": "^2.26.13", - "critical": "^2.0.6", + "autoprefixer": "^10.2.5", + "browser-sync": "^2.26.14", + "critical": "^3.0.0", "cross-spawn": "^7.0.3", "gulp": "^4.0.2", "gulp-clean": "^0.4.0", @@ -64,41 +65,32 @@ "gulp-header": "^2.0.9", "gulp-minify": "^3.1.0", "gulp-postcss": "^9.0.0", - "gulp-purgecss": "^3.1.3", + "gulp-purgecss": "^4.0.2", "gulp-rename": "^2.0.0", "gulp-rtlcss": "^1.4.1", "gulp-sass": "^4.1.0", - "postcss": "^8.2.1", - "release-it": "^14.2.2", - "rollup": "^2.35.1", + "postcss": "^8.2.8", + "release-it": "^14.4.1", + "rollup": "^2.41.2", "rollup-plugin-babel": "^4.4.0", + "rollup-plugin-cleanup": "^3.2.1", "vinyl-buffer": "^1.0.1", "vinyl-source-stream": "^2.0.0", - "yaml": "^1.10.0", + "yaml": "^1.10.1", "yargs": "^16.2.0" }, "dependencies": { - "@fullcalendar/core": "^5.4.0", - "@fullcalendar/daygrid": "^5.4.0", - "@fullcalendar/interaction": "^5.4.0", - "@fullcalendar/list": "^5.4.0", - "@fullcalendar/timegrid": "^5.4.0", - "apexcharts": "^3.23.0", + "@popperjs/core": "^2.9.1", + "@tabler/icons": "^1.39.1", + "apexcharts": "^3.25.0", "autosize": "^4.0.2", - "bootstrap": "twbs/bootstrap#561c0d8cde549c24ba7c451a6d0742089290b3a7", + "bootstrap": "twbs/bootstrap#232e392c9126fcb1dbe13c963e7edcdbd62cfeb8", + "choices.js": "^9.0.1", "countup.js": "^2.0.7", - "daterangepicker": "^3.1.0", - "flatpickr": "^4.6.6", - "fullcalendar": "^5.4.0", - "imask": "^6.0.5", - "jquery": "^3.5.1", - "jqvmap": "^1.5.1", - "nouislider": "^14.6.3", - "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" + "flatpickr": "^4.6.9", + "imask": "^6.0.7", + "litepicker": "^2.0.11", + "nouislider": "^14.6.3" }, "resolutions": { "**/**/node-gyp": "^5.0.0" diff --git a/src/js/autosize.js b/src/js/src/autosize.js similarity index 100% rename from src/js/autosize.js rename to src/js/src/autosize.js diff --git a/src/js/dropdown.js b/src/js/src/dropdown.js similarity index 69% rename from src/js/dropdown.js rename to src/js/src/dropdown.js index dfb5da89e..51a80b13f 100644 --- a/src/js/dropdown.js +++ b/src/js/src/dropdown.js @@ -1,5 +1,17 @@ -// Nested dropdowns +import { Dropdown } from 'bootstrap'; +/* +Core dropdowns + */ +let dropdownTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="dropdown"]')); +dropdownTriggerList.map(function (dropdownTriggerEl) { + return new Dropdown(dropdownTriggerEl); +}); + + +/* +Nested dropdowns + */ const selectors = '.dropdown, .dropup, .dropend, .dropstart', dropdowns = document.querySelectorAll(selectors); diff --git a/src/js/input-mask.js b/src/js/src/input-mask.js similarity index 100% rename from src/js/input-mask.js rename to src/js/src/input-mask.js diff --git a/src/js/src/popover.js b/src/js/src/popover.js new file mode 100644 index 000000000..1866f624a --- /dev/null +++ b/src/js/src/popover.js @@ -0,0 +1,15 @@ +import { Popover } from 'bootstrap'; + + +/* +Core popovers + */ +let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')); +popoverTriggerList.map(function (popoverTriggerEl) { + let options = { + delay: {show: 50, hide: 50}, + html: popoverTriggerEl.getAttribute('data-bs-html') === "true" ?? false, + placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto' + }; + return new Popover(popoverTriggerEl, options); +}); \ No newline at end of file diff --git a/src/js/src/switch-icon.js b/src/js/src/switch-icon.js new file mode 100644 index 000000000..8ba95423a --- /dev/null +++ b/src/js/src/switch-icon.js @@ -0,0 +1,11 @@ +/* +Switch icons + */ +let switchesTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="switch-icon"]')); +switchesTriggerList.map(function (switchTriggerEl) { + switchTriggerEl.addEventListener('click', (e) => { + e.stopPropagation(); + + switchTriggerEl.classList.toggle('active'); + }); +}); \ No newline at end of file diff --git a/src/js/src/toast.js b/src/js/src/toast.js new file mode 100644 index 000000000..7eafb684b --- /dev/null +++ b/src/js/src/toast.js @@ -0,0 +1,9 @@ +import { Toast } from 'bootstrap'; + +/* +Toasts + */ +let toastsTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="toast"]')); +toastsTriggerList.map(function (toastTriggerEl) { + return new Toast(toastTriggerEl); +}); \ No newline at end of file diff --git a/src/js/src/tooltip.js b/src/js/src/tooltip.js new file mode 100644 index 000000000..4e48d1cad --- /dev/null +++ b/src/js/src/tooltip.js @@ -0,0 +1,11 @@ +import { Tooltip } from 'bootstrap'; + +let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); +tooltipTriggerList.map(function (tooltipTriggerEl) { + let options = { + delay: {show: 50, hide: 50}, + html: tooltipTriggerEl.getAttribute("data-bs-html") === "true" ?? false, + placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto' + }; + return new Tooltip(tooltipTriggerEl, options); +}); \ No newline at end of file diff --git a/src/js/tabler.js b/src/js/tabler.js index 940c64715..c0e605828 100644 --- a/src/js/tabler.js +++ b/src/js/tabler.js @@ -1,48 +1,10 @@ //Vendor -import './autosize'; -import './input-mask'; -import './dropdown'; -import './tab'; +import './src/autosize'; +import './src/input-mask'; +import './src/dropdown'; +import './src/tooltip'; +import './src/popover'; +import './src/switch-icon'; +import './src/toast'; -(function() { - /** - */ - let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); - tooltipTriggerList.map(function (tooltipTriggerEl) { - let options = { - delay: {show: 50, hide: 50}, - html: true, - placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto' - }; - return new bootstrap.Tooltip(tooltipTriggerEl, options); - }); - - /** - */ - let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')); - popoverTriggerList.map(function (popoverTriggerEl) { - let options = { - delay: {show: 50, hide: 50}, - html: popoverTriggerEl.getAttribute('data-bs-html') ?? false, - placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto' - }; - return new bootstrap.Popover(popoverTriggerEl, options); - }); - - let dropdownTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="dropdown"]')); - dropdownTriggerList.map(function (dropdownTriggerEl) { - return new bootstrap.Dropdown(dropdownTriggerEl); - }); - - - let switchesTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="switch-icon"]')); - switchesTriggerList.map(function (switchTriggerEl) { - switchTriggerEl.addEventListener('click', (e) => { - e.stopPropagation(); - - switchTriggerEl.classList.toggle('active'); - }); - }); - -})(); diff --git a/src/pages/_data/changelog.yml b/src/pages/_data/changelog.yml new file mode 100644 index 000000000..569aea708 --- /dev/null +++ b/src/pages/_data/changelog.yml @@ -0,0 +1,6 @@ +- version: 1.0.0-beta + date: 2021-02-17 + description: Initial release of Tabler v1.0! Lots more coming soon though 😁 + changes: + - Updated to Bootstrap v5.0.0-beta2 + - Updated other dependencies. \ No newline at end of file diff --git a/src/pages/_data/charts.yml b/src/pages/_data/charts.yml index 088aad604..f223d32d5 100644 --- a/src/pages/_data/charts.yml +++ b/src/pages/_data/charts.yml @@ -1,3 +1,74 @@ +demo-pie: + type: donut + demo: true + sparkline: true + legend: true + series: + - name: Direct + color: blue + data: 44 + - name: Affilliate + color: blue-300 + data: 55 + - name: E-mail + color: blue-100 + data: 12 + - name: Other + color: gray-300 + data: 2 + +demo-bar: + type: bar + legend: true + horizontal: true + stacked: true + categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014] + x-formatter: 'val + "K"' + series: + - name: Container for a Fanta + color: purple + data: [ 44, 55, 41, 37, 22, 43, 21 ] + - name: Strange sunglasses + color: green + data: [ 53, 32, 33, 52, 13, 43, 32 ] + - name: Pen Pineapple Apple Pen + color: yellow + data: [ 12, 17, 11, 9, 15, 11, 20 ] + - name: Binoculars + color: red + data: [ 9, 7, 5, 8, 6, 9, 4 ] + - name: Magical notebook + color: blue + data: [ 25, 12, 19, 32, 25, 24, 10 ] + +demo-area: + type: area + legend: true + datetime: true + series: + - name: series1 + color: blue + data: [ 56, 40, 39, 47, 34, 48, 44 ] + - name: series2 + color: purple + data: [ 45, 43, 30, 23, 38, 39, 54 ] + +demo-line: + type: line + datetime: true + stroke-curve: straight + legend: true + series: + - name: Session Duration + color: yellow + data: [ 117, 92, 94, 98, 75, 110, 69, 80, 109, 113, 115, 95 ] + - name: Page Views + color: green + data: [ 59, 80, 61, 66, 70, 84, 87, 64, 94, 56, 55, 67 ] + - name: Total Visits + color: blue + data: [ 53, 51, 52, 41, 46, 60, 45, 43, 30, 50, 58, 59 ] + social-referrals: demo: false type: line @@ -5,6 +76,7 @@ social-referrals: height: 12 legend: true show-x: true + name: Social referrals series: - name: Facebook color: facebook @@ -40,41 +112,41 @@ completion-tasks: - name: Tasks completion data: [155, 65, 465, 265, 225, 325, 80] -completion-tasks2: +completion-tasks-2: demo: true extend: completion-tasks type: line -completion-tasks3: +completion-tasks-3: demo: true extend: completion-tasks type: area -completion-tasks4: +completion-tasks-4: demo: true extend: completion-tasks stroke-curve: straight type: line -completion-tasks5: +completion-tasks-5: demo: true extend: completion-tasks stroke-curve: stepline type: line -completion-tasks6: +completion-tasks-6: demo: true extend: completion-tasks type: bar horizontal: true -completion-tasks7: +completion-tasks-7: demo: true extend: completion-tasks type: line datalabels: true -completion-tasks8: +completion-tasks-8: demo: true datetime: true type: bar @@ -83,19 +155,19 @@ completion-tasks8: - data: [113, 42, 65, 54, 76, 65, 35] color: red -completion-tasks9: +completion-tasks-9: demo: true - extend: completion-tasks8 + extend: completion-tasks-8 stacked: true -completion-tasks10: +completion-tasks-10: demo: true - extend: completion-tasks8 + extend: completion-tasks-8 type: area -completion-tasks11: +completion-tasks-11: demo: true - extend: completion-tasks8 + extend: completion-tasks-8 type: area stacked: true @@ -107,23 +179,7 @@ tasks-overview: - name: A data: [44, 32, 48, 72, 60, 16, 44, 32, 78, 50, 68, 34, 26, 48, 72, 60, 84, 64, 74, 52, 62, 50, 32, 22] -total-sales: - type: donut - demo: true - sparkline: true - series: - - name: Direct - color: blue - data: 44 - - name: Affilliate - color: blue-300 - data: 55 - - name: E-mail - color: green-200 - data: 12 - - name: Other - color: gray-300 - data: 2 + campaigns: type: radialBar @@ -148,7 +204,6 @@ tasks: fill: true remove-padding: true hide-tooltip: true - legend-position: 'top' series: - name: 'New' color: blue @@ -165,7 +220,6 @@ development-activity: groups: [1, 2, 3] hide-points: true remove-padding: true - legend-position: 'top' sparkline: true datetime: true series: diff --git a/src/pages/_data/docs.yml b/src/pages/_data/docs.yml index bfc5aca70..0dbdb5b3b 100644 --- a/src/pages/_data/docs.yml +++ b/src/pages/_data/docs.yml @@ -1,13 +1,25 @@ +index: + title: Introduction + url: docs/ + hide-in-index: true + base: title: Getting started - icon: brand-tabler +# icon: brand-tabler + children: + getting-started: + title: Getting Started + url: docs/getting-started.html + download: + title: Download + url: docs/download.html + browser-support: + title: Browser Support + url: docs/browser-support.html + +content: + title: Content children: - index: - title: Introduction - url: docs/index.html - usage: - title: Usage - url: docs/usage.html colors: title: Colors url: docs/colors.html @@ -18,9 +30,44 @@ base: title: Icons url: docs/icons.html +layout: + title: Layout + children: + headers: + title: Page headers + url: docs/page-headers.html + +forms: + title: Form components +# icon: forms + children: + form-elements: + title: Form elements + url: docs/form-elements.html + form-helpers: + title: Form helpers + url: docs/form-helpers.html + validation-states: + title: Validation states + url: docs/form-validation.html + image-check: + title: Image check + url: docs/form-image-check.html + color-check: + title: Color check + url: docs/form-color-check.html + selectboxes: + title: Form selectboxes + url: docs/form-selectboxes.html + fieldset: + title: Form fieldset + url: docs/form-fieldset.html + + components: title: Components - icon: puzzle + columns: 2 +# icon: puzzle children: alerts: title: Alerts @@ -52,12 +99,6 @@ components: empty: title: Empty states url: docs/empty.html - form-elements: - title: Form elements - url: docs/form-elements.html - form-helpers: - title: Form helpers - url: docs/form-helpers.html modals: title: Modals url: docs/modals.html @@ -103,15 +144,21 @@ components: utils: title: Utilities - icon: flame +# icon: flame children: + borders: + title: Borders + url: docs/borders.html cursors: title: Cursors url: docs/cursors.html + interactions: + title: Interactions + url: docs/interactions.html plugins: title: Plugins - icon: apps +# icon: apps children: autosize: title: Autosize @@ -132,5 +179,6 @@ plugins: changelog: title: Changelog show-version: true - icon: git-branch + hide-in-index: true +# icon: git-branch url: changelog.html \ No newline at end of file diff --git a/src/pages/_data/icons.yml b/src/pages/_data/icons.yml index 16cc85bf8..248a6444f 100644 --- a/src/pages/_data/icons.yml +++ b/src/pages/_data/icons.yml @@ -84,6 +84,20 @@ adjustments: +aerial-lift: +affiliate: alarm: + 0h24v24H0z" fill="none"/> arrow-bottom-circle: + 0h24v24H0z" fill="none"/> arrow-bottom-square: + 0h24v24H0z" fill="none"/> arrow-bottom-tail: + 0h24v24H0z" fill="none"/> arrow-down-circle: + fill="none"/> arrow-left-circle: + 0h24v24H0z" fill="none"/> arrow-left-square: + 0h24v24H0z" fill="none"/> arrow-left-tail: + fill="none"/> arrow-left: + fill="none"/> arrow-right-circle: + r="2" /> arrow-right-square: +arrows-left-down: arrows-left-right: +arrows-right-down: arrows-right-left: +arrows-up-left: +arrows-up-right: arrows-up: +ball-american-football: ball-basketball: +ball-football-off: +ball-football: ball-tennis: +battery-automotive: battery-charging: +binary: biohazard: +blockquote: bluetooth-connected: +border-style: border-top: +box-margin: +box-model: +box-multiple-0: +box-multiple-1: +box-multiple-2: +box-multiple-3: +box-multiple-4: +box-multiple-5: +box-multiple-6: +box-multiple-7: +box-multiple-8: +box-multiple-9: +box-multiple: +box-padding: box: +brightness-2: brightness-down: +brightness-half: brightness-up: +building-cottage: +building-factory: building-fortress: -buldozer: +businessplan: calculator: +calendar-off: calendar-plus: +calendar-stats: +calendar-time: calendar: +camera-rotate: +camera-selfie: camera: +cash-banknote-off: +cash-banknote: cash: +charging-pile: +chart-arcs-3: +chart-arcs: chart-area-line: +chart-arrows-vertical: +chart-arrows: chart-bar: +chart-circles: +chart-donut-2: +chart-donut-3: +chart-donut-4: chart-donut: +chart-dots: +chart-infographic: chart-line: +chart-pie-2: +chart-pie-3: +chart-pie-4: chart-pie: +circle-0: +circle-1: +circle-2: +circle-3: +circle-4: +circle-5: +circle-6: +circle-7: +circle-8: +circle-9: circle-check: +circle-half-vertical: +circle-half: circle-minus: +circle-off: circle-plus: +clear-all: clear-formatting: +code-minus: +code-plus: code: + fill="none"/> color-swatch: +column-insert-left: +column-insert-right: columns: +confetti: +container: contrast: +corner-down-left-double: corner-down-left: +corner-down-right-double: corner-down-right: +corner-left-down-double: corner-left-down: +corner-left-up-double: corner-left-up: +corner-right-down-double: corner-right-down: +corner-right-up-double: corner-right-up: +corner-up-left-double: corner-up-left: +corner-up-right-double: corner-up-right: +crown-off: crown: +currency-bahraini: +currency-bath: currency-bitcoin: +currency-cent: +currency-dinar: +currency-dirham: +currency-dollar-australian: +currency-dollar-canadian: +currency-dollar-singapore: currency-dollar: +currency-ethereum: currency-euro: +currency-forint: +currency-frank: +currency-krone-czech: +currency-krone-danish: +currency-krone-swedish: +currency-leu: +currency-lira: +currency-litecoin: +currency-naira: currency-pound: +currency-real: +currency-renminbi: +currency-ripple: +currency-riyal: +currency-rubel: currency-rupee: + fill="none"/> +currency-shekel: +currency-taka: +currency-tugrik: +currency-won: currency-yen: +currency-zloty: current-location: +cursor-text: cut: +database-export: +database-import: +database-off: database: +details: +device-analytics: +device-audio-tape: +device-cctv: +device-computer-camera-off: +device-computer-camera: +device-desktop-analytics: +device-desktop-off: device-desktop: +device-mobile-message: device-mobile-rotated: +devices-pc: devices: +dimensions: direction-horizontal: -discount: +discount: divide: +dna: dots-circle-horizontal: +drone-off: drone: +droplet-filled-2: +droplet-filled: +droplet-half-2: +droplet-half: +droplet-off: droplet: + fill="none"/> +ear-off: ear: +edit-circle: edit: +equal-not: +equal: eraser: +eye-check: eye-off: +eyeglass-2: +eyeglass: face-id: +feather: file-alert: +flag-2: +flag-3: flag: + fill="none"/> +flare: flask: +forms: frame: + fill="none"/> gauge: +geometry: ghost: + x2="12" y2="21" /> +glass-off: glass: + x2="12" y2="21" /> globe: +grain: grid-dots: +growth: h-1: + fill="none"/> h-2: + fill="none"/> h-3: + fill="none"/> h-4: + fill="none"/> h-5: + fill="none"/> h-6: + fill="none"/> +hand-finger: +hand-little-finger: hand-middle-finger: + 0h24v24H0z" fill="none"/> hand-off: +hand-ring-finger: +hand-rock: hand-stop: + fill="none"/> +hand-three-fingers: +hand-two-fingers: +hanger: hash: +heading: headphones-off: +hexagon-off: hexagon: +hierarchy-2: +hierarchy: history: +ice-cream-2: ice-cream: + fill="none"/> id: +keyboard-off: keyboard-show: +layers-linked: layers-subtract: + rx="1" /> layout-grid: +letter-case-lower: +letter-case-toggle: +letter-case-upper: +letter-case: letter-d: +letter-spacing: letter-t: +line-dashed: +line-dotted: line-height: +list-search: list: +lock-access: lock-off: +macro: magnet: +mail-forward: mail-opened: +mailbox: man: +marquee-2: marquee: +mask-off: +mask: +massage: +math-function: +math-symbols: math: +minus-vertical: minus: +mood-empty: mood-happy: + y2="10" /> mood-sad: +motorbike: mouse: + fill="none"/> movie: + fill="none"/> music: +nfc: note: +octagon-off: octagon: +old: +olympics: omega: +overline: package: +pacman: page-break: +perspective: phone-call: +physotherapist: picture-in-picture-off: +play-card: player-pause: +playlist: plug: +pokeball: +polaroid: pool: +presentation-analytics: presentation: +propeller: puzzle: +pyramid: qrcode: +radius-bottom-left: +radius-bottom-right: +radius-top-left: +radius-top-right: rainbow: +recharging: record-mail: +report-analytics: +report-medical: +report-money: +report: +resize: ripple: +row-insert-bottom: +row-insert-top: rss: +ruler-2: ruler: +satellite: scale: + fill="none"/> scan: +scuba-mask: search: +section: seeding: +settings-automation: settings: +shadow-off: +shadow: +shape-2: +shape-3: shape: +shopping-cart-discount: +shopping-cart-off: +shopping-cart-plus: +shopping-cart-x: shopping-cart: + fill="none"/> +shredder: +signature: sitemap: +sock: +sort-ascending-2: sort-ascending: +sort-descending-2: sort-descending: +sport-billard: +square-0: +square-1: +square-2: +square-3: +square-4: +square-5: +square-6: +square-7: +square-8: +square-9: square-check: +square-off: square-plus: +square-root-2: +square-root: +square-rotated-off: square-rotated: +square-toggle-horizontal: +square-toggle: square-x: +squares-diagonal: +squares-filled: +stack-2: stack: + fill="none"/> submarine: +table-export: +table-import: +table-off: table: +tent: terminal-2: +text-direction-ltr: +text-direction-rtl: text-wrap-disabled: +tilt-shift: tir: +tools-kitchen-2: tools-kitchen: + fill="none"/> +track: tractor: +tree: trees: + fill="none"/> trending-down-2: +triangle-off: triangle-square-circle: +truck-off: truck-return: + fill="none"/> unlink: +vaccine: +variable: vector-beizer-2: +window: wiper-wash: +writing-sign: +writing: x: +zoom-check: zoom-in: +zoom-money: zoom-out:
    +
    +
    +
    +
    +
    +
    +{% endcapture %} +{% include example.html code=code centered=true wrapper="d-flex space-x-3" %} + +## Border size + +Below are the available border size utilities classes. + +{% capture code %} +
    +
    +
    +{% endcapture %} +{% include example.html code=code centered=true wrapper="d-flex space-x-3" %} + + +## Remove border + +You can remove a border on a single side of an element by using the following border utilities classes. + +{% capture code %} +
    +
    +
    +
    +
    +
    +{% endcapture %} +{% include example.html code=code centered=true wrapper="d-flex space-x-3" %} + +## Border color + +You can set a border color of any side of an element by adding the following utilities classes below. + +{% capture code %} +{% for color in site.theme-colors %} +
    +{% endfor %} +{% endcapture %} +{% include example.html code=code wrapper="btn-list" centered=true %} + + +## Border radius + +You can set a border to any element by using the following utilities classes below. + +{% capture code %} +
    +
    +
    +
    +
    +
    +{% endcapture %} +{% include example.html code=code centered=true wrapper="d-flex space-x-3" %} \ No newline at end of file diff --git a/src/pages/_docs/browser-support.md b/src/pages/_docs/browser-support.md new file mode 100644 index 000000000..260687a7f --- /dev/null +++ b/src/pages/_docs/browser-support.md @@ -0,0 +1,21 @@ +--- +title: Browser Support +menu: docs.base.browser-support +--- + +As of this latest release, Tabler has launched many new features that may not be compatible with all browsers, especially older ones. + +For instance, Tabler no longer uses **vendor prefixes** in styles that are known to have some compatibility issues except for a few parts. Tabler also supports new features such as **CSS grid**, **object fit**, and **sticky positioning** which is not yet supported on all browsers. In short, Tabler supports all the latest supported browsers with **only** partial support for Internet Explorer. + +## Supported Browsers + +Browser|Version +---|---------- + Edge|last 3 versions + Firefox|last 3 versions, ESR + Chrome|last 3 versions + Safari|last 3 versions + Opera|last 3 versions + Electron|last 3 versions + Brave|last 3 versions + Vivaldi|last 3 versions \ No newline at end of file diff --git a/src/pages/_docs/buttons.md b/src/pages/_docs/buttons.md index 2046bd7b1..1b6721ab1 100644 --- a/src/pages/_docs/buttons.md +++ b/src/pages/_docs/buttons.md @@ -34,7 +34,7 @@ The standard button creates a white background and subtle hover animation. It's Use the button classes that correspond to the function of your button. The big range of available colors will help you show your buttons' purpose and make them easy to spot. {% capture code %} -{% for button in site.button-variants %} +{% for button in site.theme-colors %} {% assign btn-color = button[1].class %} {% assign btn-title = button[1].title %} {% include ui/button.html color=btn-color text=btn-title %} @@ -48,7 +48,7 @@ Use the button classes that correspond to the function of your button. The big r Make buttons look inactive to show that an action is possible once the user meets certain criteria, such as completing the required fields to submit a form. {% capture code %} -{% for button in site.button-variants %} +{% for button in site.theme-colors %} {% assign btn-color = button[1].class %} {% assign btn-title = button[1].title %} {% include ui/button.html color=btn-color text=btn-title disabled=true %} @@ -74,7 +74,7 @@ Choose the right color for your button to make it go well with your design and d Use the `.btn-ghost-*` class to make your button look simple yet aesthetically appealing. Ghost buttons help focus users' attention on the website's primary design, at the same time encouraging them to take action. {% capture code %} -{% for button in site.button-variants %} +{% for button in site.theme-colors %} {{ button[1].title }} {% endfor %} {% endcapture %} diff --git a/src/pages/_docs/charts.md b/src/pages/_docs/charts.md index deeb0af2f..c9c7fecb4 100644 --- a/src/pages/_docs/charts.md +++ b/src/pages/_docs/charts.md @@ -1,26 +1,60 @@ --- title: Charts -menu: docs.components.charts +menu: docs.plugins.charts +libs: apexcharts +description: Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages. --- +[ApexCharts](https://apexcharts.com/) documentation. -## Default markup +## Line Chart + +Line charts are a typical pictorial representation that depicts trends and behaviors over time. -{% for chart in site.data.charts %} -{% if chart[1].display %} {% capture code %} -{% assign data = chart[0] %} -{% assign key = 'chart-' | append: data %} -
    -
    -

    {{ chart[1].name }} {{ chart[0] }}

    -
    -
    -
    -
    -
    - {% include ui/chart.html id=key chart-id=data show-scripts=true %} +{% include docs/chart.html chart="demo-line" %} {% endcapture %} -{% include example.html code=code %} -{% endif %} -{% endfor %} +{% include example.html code=code columns=1 %} + +## Area Chart + +Area charts are used to represent quantitative variations. + +{% capture code %} +{% include docs/chart.html chart="demo-area" %} +{% endcapture %} +{% include example.html code=code columns=1 %} + +## Bar Chart + +A bar chart is the best tool for displaying comparisons between categories of data. + +{% capture code %} +{% include docs/chart.html chart="demo-bar" %} +{% endcapture %} +{% include example.html code=code columns=2 %} + +## Pie Chart + +Pie charts are an instrumental visualization tool useful in expressing data and information in terms of percentages, ratio. + +{% capture code %} +{% include docs/chart.html chart="demo-pie" %} +{% endcapture %} +{% include example.html code=code columns=1 %} + +# Heatmap Chart + +Heatmap is a visualization tool that employs color the way a bar chart employs height and width in representing data. + +{% capture code %} +{% include docs/chart.html chart="heatmap-basic" heatmap=true %} +{% endcapture %} +{% include example.html code=code columns=2 %} + +# Advanced example + +{% capture code %} +{% include docs/chart.html chart="social-referrals" %} +{% endcapture %} +{% include example.html code=code columns=2 %} \ No newline at end of file diff --git a/src/pages/_docs/colors.md b/src/pages/_docs/colors.md index 4e2c2e0a4..54360b8e0 100644 --- a/src/pages/_docs/colors.md +++ b/src/pages/_docs/colors.md @@ -1,6 +1,6 @@ --- title: Colors -menu: docs.base.colors +menu: docs.content.colors description: The choice of colors for a website or app interface has an big influence on how users interact with the product and what decisions they make. Harmonic colors can contribute to a nice first impression and encourage users to engage with your product, so it's a very important aspect of a successful design, which needs to be well thought out. bootstrap-link: utilities/colors/ --- diff --git a/src/pages/_docs/download.md b/src/pages/_docs/download.md new file mode 100644 index 000000000..9ca1bb3de --- /dev/null +++ b/src/pages/_docs/download.md @@ -0,0 +1,33 @@ +--- +title: Download +menu: docs.base.download +description: Download Tabler to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, yarn and more. +--- + + +## CDN via unpkg + +All files included in `{{ site.npm-package }}` npm package are available over a unpkg CDN. Use it to deliver cached version of Tabler’s compiled CSS and JS to your project. + +```html + + +``` + +You can also include additional Tabler plugins: + +```html +{% removeemptylines %} +{% for plugin in site.tabler-css-plugins %} + +{% endfor %} +{% endremoveemptylines %} +``` + +## Package managers + +Install Tabler in your Node.js powered apps with the npm package: + +``` +npm install {{ site.npm-package }} +``` \ No newline at end of file diff --git a/src/pages/_docs/flags.md b/src/pages/_docs/flags.md index 719c58ef2..44d4c8f37 100644 --- a/src/pages/_docs/flags.md +++ b/src/pages/_docs/flags.md @@ -1,6 +1,6 @@ --- title: Flags -menu: docs.components.flags +menu: docs.plugins.flags description: Thanks to the Tabler flags plug-in, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more. plugin: flags libs: tabler-flags diff --git a/src/pages/_docs/form-color-check.md b/src/pages/_docs/form-color-check.md new file mode 100644 index 000000000..b194e846f --- /dev/null +++ b/src/pages/_docs/form-color-check.md @@ -0,0 +1,27 @@ +--- +title: Color check +menu: docs.forms.color-check +--- + +Your input controls can come in a variety of colors, depending on your preferences. Click [here]({% docs_url colors %}) to see the list of available colors. + +{% capture code %} +{% include parts/form/input-color.html %} +{% endcapture %} +{% include example.html code=code %} + +{% capture code %} +{% include parts/form/input-color.html name="color-rounded" rounded=true %} +{% endcapture %} +{% include example.html code=code %} + + +## Input color picker + +Add an color picker to your form to let users customise it according to their preferences. + +{% capture code %} +{% include parts/form/input-colorpicker.html %} +{% endcapture %} +{% include example.html code=code %} + diff --git a/src/pages/_docs/form-elements.md b/src/pages/_docs/form-elements.md index e565a730c..37c25aa90 100644 --- a/src/pages/_docs/form-elements.md +++ b/src/pages/_docs/form-elements.md @@ -3,7 +3,7 @@ title: Form elements description: Forms are one of the most important types of interaction with a website or app. Since their aim is to enable users to make a purchase, subscribe to a service or sign up to create an account, it's important to make sure they are easy to complete and help increase conversion rates. Use the available elements to create forms which are well-structured and user-friendly. bootstrap-link: components/forms/ libs: nouislider -menu: docs.components.form-elements +menu: docs.forms.form-elements --- @@ -79,26 +79,6 @@ Add one of the available selects - either a dropdown or a multiple choice select {% include example.html code=code %} -## Validation states - -To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect. - -{% capture code %} -{% include parts/form/validation-states.html %} -{% endcapture %} -{% include example.html code=code %} - - -### Subtle validation states - -If you prefer a more subtle manner of informing users of the input control validation state, you can use tick and cross symbols and resign from colored control frames and the validation feedback. - -{% capture code %} -{% include parts/form/validation-states.html lite=true %} -{% endcapture %} -{% include example.html code=code %} - - ## Input size Choose the size of an input control that will go well with your form design. Apart from the default size, you can also use small and large input controls. @@ -109,35 +89,6 @@ Choose the size of an input control that will go well with your form design. Apa {% include example.html code=code %} -## Image check - -Add an image check to your form and give users visually attractive options to choose from. - -{% capture code %} -{% include parts/form/input-image.html %} -{% endcapture %} -{% include example.html code=code max-width="25rem" %} - - -## Input color - -Your input controls can come in a variety of colors, depending on your preferences. Click [here]({% docs_url colors %}) to see the list of available colors. - -{% capture code %} -{% include parts/form/input-color.html %} -{% endcapture %} -{% include example.html code=code %} - - -## Input color picker - -Add an color picker to your form to let users customise it according to their preferences. - -{% capture code %} -{% include parts/form/input-colorpicker.html %} -{% endcapture %} -{% include example.html code=code %} - ## Datalists @@ -149,27 +100,6 @@ Use the ``datalist`` element to add an autocomplete feature to your input contro {% include example.html code=code %} -## Custom selectboxes - -Add selectboxes to make your form more intuitive by providing users with a set of options to choose from. You can add simple selectboxes with a label, use icons only or icons with labels. Alternatively, you can use pill selectboxes if they go well with your design. - -{% capture code %} -{% include parts/form/input-selectgroups.html %} -{% endcapture %} -{% include example.html code=code %} - - -## Advanced selectboxes - -Use more advanced selectboxes to display the range of available options. You can choose selectboxes with radio buttons, if you want users to select only one option or with checkboxes, if they are allowed to choose multiple options. - -{% capture code %} -{% include parts/form/selectgroup-payments.html %} -{% include parts/form/selectgroup-project-manager.html %} -{% endcapture %} -{% include example.html code=code %} - - ## Toggle switches Use toggle switches for the elements of your form which require choosing between two opposing states. @@ -213,16 +143,6 @@ Add a range slider to make it possible for users to set a value or range, such a {% include example.html code=code %} -## Fieldset - -Group parts of your form to make it well-structured and clearer for users, using the ``fieldset`` element. - -{% capture code %} -{% include parts/form/fieldset.html %} -{% endcapture %} -{% include example.html code=code %} - - ## Input group Create a group of input controls and place add-ons on either side of an input. diff --git a/src/pages/_docs/form-fieldset.md b/src/pages/_docs/form-fieldset.md new file mode 100644 index 000000000..8777ca9c6 --- /dev/null +++ b/src/pages/_docs/form-fieldset.md @@ -0,0 +1,11 @@ +--- +title: Form fieldset +menu: docs.forms.fieldset +--- + +Group parts of your form to make it well-structured and clearer for users, using the ``fieldset`` element. + +{% capture code %} +{% include parts/form/fieldset.html %} +{% endcapture %} +{% include example.html code=code %} \ No newline at end of file diff --git a/src/pages/_docs/form-helpers.md b/src/pages/_docs/form-helpers.md index cc9a2f4b4..050ebaac5 100644 --- a/src/pages/_docs/form-helpers.md +++ b/src/pages/_docs/form-helpers.md @@ -1,7 +1,7 @@ --- title: Form helpers description: A form helper can be used to provide users with additional information about the elements of a form that may be unclear. -menu: docs.components.form-helpers +menu: docs.forms.form-helpers --- @@ -10,6 +10,6 @@ menu: docs.components.form-helpers Use an input helper to display additional information about a form element. The text label will appear once a user hovers over the helper. {% capture code %} -? +? {% endcapture %} {% include example.html code=code %} diff --git a/src/pages/_docs/form-image-check.md b/src/pages/_docs/form-image-check.md new file mode 100644 index 000000000..21090d97b --- /dev/null +++ b/src/pages/_docs/form-image-check.md @@ -0,0 +1,17 @@ +--- +title: Image check +menu: docs.forms.image-check +--- + +Add an image check to your form and give users visually attractive options to choose from. + +{% capture code %} +{% include parts/form/input-image.html %} +{% endcapture %} +{% include example.html code=code max-width="25rem" %} + + +{% capture code %} +{% include parts/form/input-image-people.html %} +{% endcapture %} +{% include example.html code=code %} diff --git a/src/pages/_docs/form-selectboxes.md b/src/pages/_docs/form-selectboxes.md new file mode 100644 index 000000000..552c346a4 --- /dev/null +++ b/src/pages/_docs/form-selectboxes.md @@ -0,0 +1,23 @@ +--- +title: Form selectboxes +menu: docs.forms.selectboxes +--- + +Add selectboxes to make your form more intuitive by providing users with a set of options to choose from. You can add simple selectboxes with a label, use icons only or icons with labels. Alternatively, you can use pill selectboxes if they go well with your design. + +{% capture code %} +{% include parts/form/input-selectgroups.html %} +{% endcapture %} +{% include example.html code=code %} + + +## Advanced selectboxes + +Use more advanced selectboxes to display the range of available options. You can choose selectboxes with radio buttons, if you want users to select only one option or with checkboxes, if they are allowed to choose multiple options. + +{% capture code %} +{% include parts/form/selectgroup-payments.html %} +{% include parts/form/selectgroup-project-manager.html %} +{% endcapture %} +{% include example.html code=code %} + diff --git a/src/pages/_docs/form-validation.md b/src/pages/_docs/form-validation.md new file mode 100644 index 000000000..3c2248544 --- /dev/null +++ b/src/pages/_docs/form-validation.md @@ -0,0 +1,20 @@ +--- +title: Validation states +menu: docs.forms.validation-states +description: To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect. +--- + +{% capture code %} +{% include parts/form/validation-states.html %} +{% endcapture %} +{% include example.html code=code %} + + +## Subtle validation states + +If you prefer a more subtle manner of informing users of the input control validation state, you can use tick and cross symbols and resign from colored control frames and the validation feedback. + +{% capture code %} +{% include parts/form/validation-states.html lite=true %} +{% endcapture %} +{% include example.html code=code %} \ No newline at end of file diff --git a/src/pages/_docs/index.md b/src/pages/_docs/getting-started.md similarity index 60% rename from src/pages/_docs/index.md rename to src/pages/_docs/getting-started.md index 0f49964ff..aca60db40 100644 --- a/src/pages/_docs/index.md +++ b/src/pages/_docs/getting-started.md @@ -1,21 +1,11 @@ --- -title: Introduction -menu: docs.base.index -icon: flag -redirect_from: docs.html +title: Getting started +menu: docs.base.getting-started --- -## What is Tabler? - -Tabler is a UI kit that speeds up the development process and makes it easier than ever! Built on the latest version of Bootstrap, it helps you create templates based on fully customizable and ready-to-use UI components, which can be used by both simple websites and sophisticated systems. With basic knowledge of HTML and CSS, you’ll be able to create dashboards that are fully functional and beautifully designed! - - ## What are the benefits? -Tabler is a perfect solution if you want to create an interface which is not only user-friendly but also fully reponsive. Thanks to the big choice of ready-made components, you can customize your design and adapt it to the needs of even the most demanding users. On top of that, Tabler is an open source solution, continuously developed and improved by the open source community. - -To start using Tabler, first you need to set up the environment. - +Tabler is a perfect solution if you want to create an interface which is not only user-friendly but also fully responsive. Thanks to the big choice of ready-made components, you can customize your design and adapt it to the needs of even the most demanding users. On top of that, Tabler is an open source solution, continuously developed and improved by the open source community. ## Set up the environment @@ -25,21 +15,21 @@ To use our build system and run our documentation locally, you'll need a copy of 2. Navigate to the root `/tabler` directory and run `npm install` to install our local dependencies listed in `package.json`. 3. [Install Ruby](https://ruby-lang.org/en/documentation/installation/) - the recommended version is [2.5.5](https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz). 4. [Install Bundler](https://bundler.io) with `gem install bundler` and, finally, run `bundle install`. It will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com). - + ### Windows users 1. [Install Git](https://git-scm.com/download/win) in `C:\Program Files\git\bin` directory and run `npm config set script-shell "C:\Program Files\git\bin\bash.exe"` to change the default shell. 2. [Install Ruby+Devkit](https://rubyinstaller.org/downloads/) - recommended version is [2.5.5](https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.5.5-1/rubyinstaller-devkit-2.5.5-1-x86.exe). 3. [Read guide](https://jekyllrb.com/docs/installation/windows/) to get Jekyll up and running without problems. - + Once you've completed the setup, you'll be able to run the various commands provided from the command line. ## Build Tabler locally 1. From the root `/tabler` directory, run `npm run start` in the command line. -2. Open [http://localhost:4000](http://localhost:4000) in your browser, and voilà. -3. Any change in `/pages` directory will build the application and refresh the page. +2. Open [http://localhost:3000](http://localhost:3000) in your browser, and voilà. +3. Any change in `/src` directory will build the application and refresh the page. ## Bugs and feature requests -Found a bug or have a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new). +Found a bug or have a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new). \ No newline at end of file diff --git a/src/pages/_docs/icons.md b/src/pages/_docs/icons.md index d2afbfe24..58c92d193 100644 --- a/src/pages/_docs/icons.md +++ b/src/pages/_docs/icons.md @@ -1,8 +1,11 @@ --- title: Icons -menu: docs.base.icons +menu: docs.content.icons --- +All icons come from the Tabler Icons set and are MIT-licensed. Visit tabler-icons.io, download the icons you need in SVG, PNG or React and use them in your favourite design tools. You can show all icons and SVG codes [here]({{ site.base }}/icons.html). + + ## Base icon {% capture code %} diff --git a/src/pages/_docs/index.html b/src/pages/_docs/index.html new file mode 100644 index 000000000..8de775d48 --- /dev/null +++ b/src/pages/_docs/index.html @@ -0,0 +1,27 @@ +--- +title: Introduction +menu: docs.index +redirect_from: docs.html +--- + +

    Tabler is a UI kit that speeds up the development process and makes it easier than ever! Built on the latest version of Bootstrap, it helps you create templates based on fully customizable and ready-to-use UI components, which can be used by both simple websites and sophisticated systems. With basic knowledge of HTML and CSS, you’ll be able to create dashboards that are fully functional and beautifully designed!

    + +
    +
    + {% for doc in site.data.docs %} + {% unless doc[1].hide-in-index %} +
    +

    {{ doc[1].title }}

    + + +
    + {% endunless %} + {% endfor %} +
    +
    diff --git a/src/pages/_docs/interactions.md b/src/pages/_docs/interactions.md new file mode 100644 index 000000000..7da2a82b9 --- /dev/null +++ b/src/pages/_docs/interactions.md @@ -0,0 +1,26 @@ +--- +title: Interactions +description: Utility classes that change how users interact with contents of a website. +menu: docs.utils.interactions +--- + +## Text selection + +Change the way in which the content is selected when the user interacts with it. + +{% capture code %} +

    This paragraph will be entirely selected when clicked by the user.

    +

    This paragraph has default select behavior.

    +

    This paragraph will not be selectable when clicked by the user.

    +{% endcapture %} +{% include example.html code=code %} + +## Pointer events + +Tabler provides .pe-none and .pe-auto classes to prevent or add element interactions. + +{% capture code %} +

    This link can not be clicked.

    +

    This link can be clicked (this is default behavior).

    +{% endcapture %} +{% include example.html code=code %} \ No newline at end of file diff --git a/src/pages/_docs/page-headers.md b/src/pages/_docs/page-headers.md index b7dc1d730..693c8a96b 100644 --- a/src/pages/_docs/page-headers.md +++ b/src/pages/_docs/page-headers.md @@ -1,24 +1,40 @@ --- -menu: docs.components.page-headers +title: Page headers +menu: docs.layout.headers +description: Page heading examples for Tabler --- -{% capture code %} -{% include layout/page-header-1.html %} -{% endcapture %} -{% include example.html code=code %} - - -{% capture code %} -{% include layout/page-header-3.html %} -{% endcapture %} -{% include example.html code=code %} - -{% capture code %} -{% include layout/page-header-4.html %} -{% endcapture %} -{% include example.html code=code %} +## Simple header {% capture code %} {% include layout/page-header-5.html %} {% endcapture %} -{% include example.html code=code %} \ No newline at end of file +{% include example.html code=code columns=2 %} + +## With meta, avatar and actions + +{% capture code %} +{% include layout/page-header-1.html %} +{% endcapture %} +{% include example.html code=code columns=2 %} + +## With meta, search and actions + +{% capture code %} +{% include layout/page-header-2.html %} +{% endcapture %} +{% include example.html code=code columns=2 %} + +## Bordered header + +{% capture code %} +{% include layout/page-header-3.html %} +{% endcapture %} +{% include example.html code=code columns=2 %} + +## Header with breadcrumb and actions + +{% capture code %} +{% include layout/page-header-4.html %} +{% endcapture %} +{% include example.html code=code columns=2 %} diff --git a/src/pages/_docs/payments.md b/src/pages/_docs/payments.md index 8ae7c6a03..ec4dd97fd 100644 --- a/src/pages/_docs/payments.md +++ b/src/pages/_docs/payments.md @@ -1,6 +1,6 @@ --- title: Payments -menu: docs.components.payments +menu: docs.plugins.payments description: The Tabler payments plug-in will let you use a set of payment provider icons to facilitate the payment process and make it more-user friendly. plugin: payments --- diff --git a/src/pages/_docs/range-slider.md b/src/pages/_docs/range-slider.md index cb5cf5309..2b354eede 100644 --- a/src/pages/_docs/range-slider.md +++ b/src/pages/_docs/range-slider.md @@ -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 + {% endcapture %} diff --git a/src/pages/_docs/typography.md b/src/pages/_docs/typography.md index f1c5880d6..d76fc566c 100644 --- a/src/pages/_docs/typography.md +++ b/src/pages/_docs/typography.md @@ -1,6 +1,6 @@ --- title: Typography -menu: docs.base.typography +menu: docs.content.typography description: Typography plays an important role in creating an attractive and clear interface design. Good typography will make the content easy to follow and improve the usability of your website. bootstrap-link: content/typography/ --- diff --git a/src/pages/_docs/usage.md b/src/pages/_docs/usage.md deleted file mode 100644 index caea2bb46..000000000 --- a/src/pages/_docs/usage.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Usage -menu: docs.base.usage -description: Tabler distributions are available on npm. Add tabler as a dependency in your npm project or use a specific version directly in your HTML files via CDN includes. ---- - -## Installation - -To install the latest `tabler` npm package in your project run: -```sh -npm install @tabler/core -``` - -Tabler `1.0.0` major version is now in active development. To get the latest `alpha` version run: -```sh -npm install @tabler/core@alpha -``` - -## CDN support - -All files included in `@tabler/core` npm package are available over a CDN. - -### Javascript - -```html - -``` - -### Styles - -```html - -``` - -### Other versions - -To load a specific version replace `latest` with the desired version number. - -```html - -``` - -To load the latest `alpha` version replace `latest` with `alpha`. - -```html - -``` diff --git a/src/pages/_includes/cards/development-activity.html b/src/pages/_includes/cards/development-activity.html index 9f890d9f0..8c5398f48 100644 --- a/src/pages/_includes/cards/development-activity.html +++ b/src/pages/_includes/cards/development-activity.html @@ -15,8 +15,8 @@ {% include ui/chart.html chart-id="development-activity" height=12 %}
    -
    - +
    +
    @@ -25,7 +25,7 @@ - {% for commit in site.data.commits limit: 5 %} + {% for commit in site.data.commits limit: 6 %}
    User
    {% include ui/avatar.html person-id=forloop.index size="sm" %} diff --git a/src/pages/_includes/cards/icons.html b/src/pages/_includes/cards/icons.html index 66b68c7c5..ad87e8ffe 100644 --- a/src/pages/_includes/cards/icons.html +++ b/src/pages/_includes/cards/icons.html @@ -27,7 +27,7 @@
    {% for icon in icons limit: limit %} - + {% include ui/icon.html icon=icon %}
    {{ icon }}
     @@ -41,36 +41,3 @@
    - -{% capture_once scripts %} - -{% endcapture_once %} \ No newline at end of file diff --git a/src/pages/_includes/cards/small-stats.html b/src/pages/_includes/cards/small-stats.html index 9653552e5..a7d15e552 100644 --- a/src/pages/_includes/cards/small-stats.html +++ b/src/pages/_includes/cards/small-stats.html @@ -5,7 +5,7 @@
    {% if include.icon %}
    - {% include ui/icon.html icon=include.icon %} + {% include ui/icon.html icon=include.icon %}
    {% elsif include.person-id %}
    diff --git a/src/pages/_includes/docs/chart.html b/src/pages/_includes/docs/chart.html new file mode 100644 index 000000000..095da7d2f --- /dev/null +++ b/src/pages/_includes/docs/chart.html @@ -0,0 +1,19 @@ +{% assign chart-id = include.chart %} +{% assign data = site.data.charts[chart-id] %} + +{% if data or include.heatmap %} +
    + {% if include.title %} +
    +

    {{ include.title }}

    +
    + {% endif %} +
    + {% if include.heatmap %} + {% include ui/chart-heatmap.html chart-id=chart-id show-scripts=true size="lg" %} + {% else %} + {% include ui/chart.html chart-id=chart-id show-scripts=true size="lg" %} + {% endif %} +
    +
    +{% endif %} \ No newline at end of file diff --git a/src/pages/_includes/docs/menu.html b/src/pages/_includes/docs/menu.html index 360ce52cd..d435ecc6b 100644 --- a/src/pages/_includes/docs/menu.html +++ b/src/pages/_includes/docs/menu.html @@ -1,6 +1,6 @@ {% assign current-menu = page.menu | split: '.' %} -
      +
        {% for doc in site.data.docs %}
      • {% assign key = doc[0] %} diff --git a/src/pages/_includes/docs/plugin.html b/src/pages/_includes/docs/plugin.html index cbad90043..eee73078a 100644 --- a/src/pages/_includes/docs/plugin.html +++ b/src/pages/_includes/docs/plugin.html @@ -1,4 +1,9 @@ -
        -

        Important!

        -

        This part of Tabler is distributed as plugin. To enable it you should include tabler-{{ include.plugin }}.css or tabler-{{ include.plugin }}.min.css file to your page.

        -
        \ No newline at end of file +

        Installation

        + +

        This part of Tabler is distributed as plugin. To enable it you should include tabler-{{ include.plugin }}.css or tabler-{{ include.plugin }}.min.css file to your page.

        + +

        You can also include plugin via CDN:

        + +{% highlight html %} + +{% endhighlight %} \ No newline at end of file diff --git a/src/pages/_includes/example.html b/src/pages/_includes/example.html index 15c51f6bf..a03fda053 100644 --- a/src/pages/_includes/example.html +++ b/src/pages/_includes/example.html @@ -1,5 +1,3 @@ -{% assign code = code | replace_regex: '// @formatter:(off|on)', '' %} - {% assign demo-code = code %} {% assign demo-code = demo-code | replace_regex: '\{% (end)?hide %\}', '' %} {% assign demo-code = demo-code | replace_regex: 'href="#"', 'href="javascript:void(0)"' %} @@ -19,23 +17,34 @@
    -{% assign code = code | strip %} + +{% capture html %} +{{ code }} + +{% removeemptylines %} +{{ site.captured_global.scripts | last }} +{% endremoveemptylines %} +{% endcapture %} + +{% assign html = html | strip %} +{% assign html = html | replace_regex: '// @formatter:(off|on)', '' %} + {% capture new_line %} {% endcapture %} -{% assign code = code | replace_regex: "\n\n+", new_line %} +{% assign html = html | replace_regex: "\n\n+", new_line %} {% unless include.show-svg %} - {% assign code = code | replace_regex: ']*class="icon ([^"]+)"[^>]*>.*?<\/svg>', '' %} - {% assign code = code | replace_regex: ']*>.*?<\/svg>', '' %} +{% assign html = html | replace_regex: ']*class="icon ([^"]+)"[^>]*>.*?<\/svg>', '' %} +{% assign html = html | replace_regex: ']*>.*?<\/svg>', '' %} {% endunless %} -{% assign code = code | replace_regex: 'url\(([^\)]+)\)', 'url(...)' %} -{% assign code = code | replace_regex: 'src="([^"]+)"', 'src="..."' %} -{% assign code = code | replace_regex: 'href="([^#][^"]+)"', 'href="#"' %} -{% assign code = code | replace_regex: '\{% hide %\}.*?\{% endhide %\}', '' %} -{% assign code = code | htmlbeautifier %} +{% assign html = html | replace_regex: 'url\(([^\)]+)\)', 'url(...)' %} +{% assign html = html | replace_regex: 'src="([^"]+)"', 'src="..."' %} +{% assign html = html | replace_regex: 'href="([^#][^"]+)"', 'href="#"' %} +{% assign html = html | replace_regex: '\{% hide %\}.*?\{% endhide %\}', '' %} + +{% assign html = html | htmlbeautifier %}
    - {% highlight html %}{{ code }}{% endhighlight %} + {% highlight html %}{{ html }}{% endhighlight %}
    - diff --git a/src/pages/_includes/forms/form-elements-1.html b/src/pages/_includes/forms/form-elements-1.html index d15c293fe..fa56d5d26 100644 --- a/src/pages/_includes/forms/form-elements-1.html +++ b/src/pages/_includes/forms/form-elements-1.html @@ -60,8 +60,8 @@
    ? + data-bs-content="

    ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.

    USP ZIP codes lookup tools

    " + data-bs-html="true">?
    diff --git a/src/pages/_includes/forms/form-elements-6.html b/src/pages/_includes/forms/form-elements-6.html index 01f380117..66db532e5 100644 --- a/src/pages/_includes/forms/form-elements-6.html +++ b/src/pages/_includes/forms/form-elements-6.html @@ -3,13 +3,14 @@
    - {% include ui/form/calendar.html class="mb-2" %} - {% include ui/form/calendar.html id="time" layout="icon" %} + {% include ui/datepicker.html id="default" class="mb-2" %} + {% include ui/datepicker.html id="icon" layout="icon" class="mb-2" %} + {% include ui/datepicker.html id="icon-prepend" layout="icon-prepend" %}
    - {% include ui/form/calendar.html id="inline" inline=true %} + {% include ui/datepicker.html id="inline" inline=true %}
    @@ -32,30 +33,36 @@
    - {% include ui/form/selectize.html key="tags" %} + {% include ui/select.html key="tags" %}
    - {% include ui/form/selectize.html key="tags-advanced" %} + {% include ui/select.html key="tags-advanced" %}
    - {% include ui/form/selectize.html key="users" %} + {% include ui/select.html key="users" %}
    - {% include ui/form/selectize.html key="people" %} + {% include ui/select.html key="people" indicator="avatar" %}
    - {% include ui/form/selectize.html key="countries" %} + {% include ui/select.html key="countries" indicator="flag" %} +
    + +
    + + {% include ui/select.html key="labels" indicator="label" %}
    - {% include ui/form/selectize.html key="countries" state="valid" select-id="states" %} + {% include ui/select.html id="countries-valid" key="countries" state="valid" class="mb-3" %} + {% include ui/select.html id="countries-invalid" key="countries" state="invalid" %}
    \ No newline at end of file diff --git a/src/pages/_includes/layout/css.html b/src/pages/_includes/layout/css.html index 595730bbe..7e7d63c49 100644 --- a/src/pages/_includes/layout/css.html +++ b/src/pages/_includes/layout/css.html @@ -17,7 +17,7 @@ -{% for plugin in site.tabler-plugins %} +{% for plugin in site.tabler-css-plugins %} {% endfor %} diff --git a/src/pages/_includes/layout/debug.html b/src/pages/_includes/layout/debug.html index e4a5a4ac5..274a399cc 100644 --- a/src/pages/_includes/layout/debug.html +++ b/src/pages/_includes/layout/debug.html @@ -59,7 +59,7 @@ height: 6px; display: inline-block; background: rgba(255, 255, 255, .3); - border-radius: $border-radius-full; + border-radius: $border-radius-pill; } body.show-debug-code .card-debug { @@ -81,79 +81,3 @@ background: #5eba00; } - diff --git a/src/pages/_includes/layout/footer.html b/src/pages/_includes/layout/footer.html index 75eb8c14e..e006215ae 100644 --- a/src/pages/_includes/layout/footer.html +++ b/src/pages/_includes/layout/footer.html @@ -6,6 +6,12 @@
  • Documentation
  • License
  • Source code
    • +
  • + + {% include ui/icon.html icon="heart" inline=true filled=true color="pink" %} + Sponsor + +
    • diff --git a/src/pages/_includes/layout/homepage.html b/src/pages/_includes/layout/homepage.html index 78e856770..126e8b00d 100644 --- a/src/pages/_includes/layout/homepage.html +++ b/src/pages/_includes/layout/homepage.html @@ -57,21 +57,6 @@
    - - - -
    - {% include cards/map.html title="Top countries" %} -
    - -
    -
    -
    - {% include cards/project-summary.html stage-color="red" %} -
    -
    - {% include cards/project-summary.html title="UI Redesign" date="11 Nov 2019" stage="Final review" avatar-limit=3 avatar-offset=9 project-color="green" value=80 percentage-color="green" %} -
    {% include cards/small-stats-3.html number=43 title="New Tickets" percentage=6 %} diff --git a/src/pages/_includes/layout/navbar-side.html b/src/pages/_includes/layout/navbar-side.html index e2179e6af..03d91a045 100644 --- a/src/pages/_includes/layout/navbar-side.html +++ b/src/pages/_includes/layout/navbar-side.html @@ -1,6 +1,16 @@ {% assign person-id = include.person-id | default: 1 %} {% assign person = site.data.people[person-id] %}
    + + {% unless include.condensed %} +
    +
    + {% include ui/button.html icon="brand-github" icon-color="github" outline=true text="Source code" href=site.github-url external=true %} + {% include ui/button.html icon="heart" icon-color="pink" outline=true text="Sponsor" href=site.github-sponsors-url external=true %} +
    +
    + {% endunless %} +
    {% include ui/icon.html icon="bell" %} diff --git a/src/pages/_includes/layout/navbar.html b/src/pages/_includes/layout/navbar.html index 4ad549a6a..5edfa15de 100644 --- a/src/pages/_includes/layout/navbar.html +++ b/src/pages/_includes/layout/navbar.html @@ -13,7 +13,7 @@ {% include layout/navbar-logo.html dark=include.dark small-logo=include.small-logo hide-logo=include.hide-logo class="d-none-navbar-horizontal pe-0 pe-md-3" breakpoint=breakpoint show-title=include.show-title header=true %} {% endunless %} - {% include layout/navbar-side.html class="order-md-last" hide-username=include.hide-username person-id=include.person-id %} + {% include layout/navbar-side.html class="order-md-last" hide-username=include.hide-username condensed=condensed person-id=include.person-id %} {% if condensed %} diff --git a/src/pages/_includes/parts/activity.html b/src/pages/_includes/parts/activity.html index b2ba79506..220977392 100644 --- a/src/pages/_includes/parts/activity.html +++ b/src/pages/_includes/parts/activity.html @@ -1,5 +1,5 @@ {% assign limit = include.limit | default: false %} -
    +
    {% for item in site.data.activity limit:limit %} {% assign person = site.data.people[forloop.index] %}
    diff --git a/src/pages/_includes/parts/buttons-table.html b/src/pages/_includes/parts/buttons-table.html index d138dfb69..de70c3929 100644 --- a/src/pages/_includes/parts/buttons-table.html +++ b/src/pages/_includes/parts/buttons-table.html @@ -2,7 +2,7 @@ {% assign show-link = include.show-link | default: false %} {% assign show-states = include.show-states | default: false %} {% assign hide-labels = include.hide-labels | default: false %} -{% assign variants = include.variants | default: site.button-variants %} +{% assign variants = include.variants | default: site.theme-colors %} {% for state in site.button-states %} {% if show-states or (state.class != 'active' and state.class != 'disabled') %} diff --git a/src/pages/_includes/parts/form/fieldset.html b/src/pages/_includes/parts/form/fieldset.html index 14d084212..efc6bb318 100644 --- a/src/pages/_includes/parts/form/fieldset.html +++ b/src/pages/_includes/parts/form/fieldset.html @@ -15,8 +15,8 @@
    -
    +
    + I agree to the Terms & Conditions + diff --git a/src/pages/_includes/parts/form/input-image-people.html b/src/pages/_includes/parts/form/input-image-people.html new file mode 100644 index 000000000..8497ef50c --- /dev/null +++ b/src/pages/_includes/parts/form/input-image-people.html @@ -0,0 +1,18 @@ +{% assign limit = include.limit | default: 9 %} +
    + +
    + {% for person in site.data.people limit: limit offset: 8 %} +
    + +
    + {% endfor %} +
    +
    diff --git a/src/pages/_includes/parts/form/input-range.html b/src/pages/_includes/parts/form/input-range.html index fd6df9c39..c4962306e 100644 --- a/src/pages/_includes/parts/form/input-range.html +++ b/src/pages/_includes/parts/form/input-range.html @@ -1,8 +1,8 @@
    - {% include ui/form/range.html value=40 %} - {% include ui/form/range.html value="20" id="simple" connect=true %} - {% include ui/form/range.html value="60,90" id="connect" %} - {% include ui/form/range.html value="40" id="color" class="text-green" connect=true %} + {% include ui/range.html value=40 %} + {% include ui/range.html value="20" id="simple" connect=true %} + {% include ui/range.html value="60,90" id="connect" %} + {% include ui/range.html value="40" id="color" class="text-green" connect=true %}
    diff --git a/src/pages/_includes/ui/chart-heatmap.html b/src/pages/_includes/ui/chart-heatmap.html index 59da929fb..1db3c4ffb 100644 --- a/src/pages/_includes/ui/chart-heatmap.html +++ b/src/pages/_includes/ui/chart-heatmap.html @@ -58,17 +58,30 @@ ], xaxis: { type: "category" - } + }, + legend: { + {% if include.legend %} + show: true, + position: 'bottom', + offsetY: 8, + markers: { + width: 10, + height: 10, + radius: 100, + }, + itemMargin: { + horizontal: 8, + }, + {% else %} + show: false, + {% endif %} + }, }; (new ApexCharts(document.querySelector("#chart-{{ id }}"),options)).render(); {% endcapture %} -{% if include.show-scripts %} -{{ script }} -{% else %} {% capture_global scripts %} {{ script }} {% endcapture_global %} -{% endif %} diff --git a/src/pages/_includes/ui/chart.html b/src/pages/_includes/ui/chart.html index 7ab5c6e6a..15028cef8 100644 --- a/src/pages/_includes/ui/chart.html +++ b/src/pages/_includes/ui/chart.html @@ -26,7 +26,7 @@ {% if jekyll.environment == 'development' %} window.tabler_chart = window.tabler_chart || {}; {% endif %} - + window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), { chart: { type: "{{ chart-type }}", @@ -144,7 +144,12 @@ {% if data.categories or data.datetime %} xaxis: { labels: { - padding: 0 + padding: 0, + {% if data.x-formatter %} + formatter: function(val) { + return {{ data.x-formatter }} + }, + {% endif %} }, tooltip: { enabled: false @@ -155,7 +160,7 @@ }, {% endif %} {% if data.categories %} - categories: [{% for category in data.categories %}"{{ category }}"{% unless forloop.last %}, {% endunless %}{% endfor %}], + categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}], {% endif %} {% if data.datetime %} @@ -191,18 +196,18 @@ {% endif %} legend: { - {% if include.legend %} + {% if data.legend %} show: true, position: 'bottom', - height: 32, - offsetY: 8, + offsetY: 12, markers: { - width: 8, - height: 8, + width: 10, + height: 10, radius: 100, }, itemMargin: { horizontal: 8, + vertical: 8 }, {% else %} show: false, @@ -238,12 +243,8 @@ {% endcapture %} -{% if include.show-scripts %} -{{ script }} -{% else %} {% capture_global scripts %} {{ script }} {% endcapture_global %} -{% endif %} {% endif %} diff --git a/src/pages/_includes/ui/datepicker.html b/src/pages/_includes/ui/datepicker.html new file mode 100644 index 000000000..1285b6532 --- /dev/null +++ b/src/pages/_includes/ui/datepicker.html @@ -0,0 +1,58 @@ +{% assign value = include.value | default: '2020-06-20' %} +{% assign placeholder = include.placeholder | default: 'Select a date' %} +{% assign id = include.id %} + +{% if id %} + +{% capture input %} + +{% endcapture %} + + +{% if include.inline %} +
    +{% elsif include.layout == 'icon' %} +
    + {{ input | replace: include.class, '' }} + {% include ui/icon.html icon="calendar" %} +
    +{% elsif include.layout == 'icon-prepend' %} +
    + {% include ui/icon.html icon="calendar" %} + {{ input | replace: include.class, '' }} +
    +{% else %} + {{ input }} +{% endif %} + +{% capture script %} + +{% endcapture %} + +{% if include.show-scripts %} +{{ script }} +{% else %} +{% capture_global scripts %} +{{ script }} +{% endcapture_global %} +{% endif %} + +{% endif %} \ No newline at end of file diff --git a/src/pages/_includes/ui/form/calendar.html b/src/pages/_includes/ui/form/calendar.html deleted file mode 100644 index bff6d6a65..000000000 --- a/src/pages/_includes/ui/form/calendar.html +++ /dev/null @@ -1,40 +0,0 @@ -{% assign type = include.type | default: 'date' %} -{% assign value = include.value | default: '2020-06-20' %} -{% assign placeholder = include.placeholder | default: 'Select a date' %} -{% assign id = include.id | default: 'simple' %} - -{% capture input %} - -{% endcapture %} - -{% if include.inline %} -
    -{% elsif include.layout == 'icon' %} -
    - {{ input | replace: include.class, '' }} - {% include ui/icon.html icon="calendar" %} -
    -{% elsif include.layout == 'icon-prepend' %} -
    - {% include ui/icon.html icon="calendar" %} - {{ input | replace: include.class, '' }} -
    -{% else %} - {{ input }} -{% endif %} - -{% capture_global scripts %} - -{% endcapture_global %} \ No newline at end of file diff --git a/src/pages/_includes/ui/form/selectize.html b/src/pages/_includes/ui/form/selectize.html deleted file mode 100644 index 323367d65..000000000 --- a/src/pages/_includes/ui/form/selectize.html +++ /dev/null @@ -1,65 +0,0 @@ -{% assign key = include.key | default: 'people' %} -{% assign id = include.select-id | default: key %} -{% assign data = site.data.selects[key] %} -{% assign options = data.options %} - - - -{% capture_global scripts %} - -{% endcapture_global %} diff --git a/src/pages/_includes/ui/fullcalendar.html b/src/pages/_includes/ui/fullcalendar.html deleted file mode 100644 index 8cf7f9fbd..000000000 --- a/src/pages/_includes/ui/fullcalendar.html +++ /dev/null @@ -1,86 +0,0 @@ -{% assign calendar-id = include.calendar-id | default: 'main' %} - -
    - -{% capture_global scripts %} - -{% endcapture_global %} diff --git a/src/pages/_includes/ui/icon.html b/src/pages/_includes/ui/icon.html index 12707b7ed..d3adbe132 100644 --- a/src/pages/_includes/ui/icon.html +++ b/src/pages/_includes/ui/icon.html @@ -16,6 +16,10 @@ {% assign replace-to = replace-to | append: ' icon-filled' %} {% endif %} +{% if include.inline %} +{% assign replace-to = replace-to | append: ' icon-inline' %} +{% endif %} + {% if include['size'] %} {% assign replace-to = replace-to | append: ' icon-' | append: include['size'] %} {% endif %} @@ -25,6 +29,7 @@ {% if site.use-iconfont %} {% else %} + {% assign svg-icon = site.data.icons[icon-name] | default: '' %} {{ svg-icon | replace_regex: 'class=\"[^"]+\"', replace-to }} {% endif %} diff --git a/src/pages/_includes/ui/form/range.html b/src/pages/_includes/ui/range.html similarity index 100% rename from src/pages/_includes/ui/form/range.html rename to src/pages/_includes/ui/range.html diff --git a/src/pages/_includes/ui/select.html b/src/pages/_includes/ui/select.html new file mode 100644 index 000000000..78c82d88d --- /dev/null +++ b/src/pages/_includes/ui/select.html @@ -0,0 +1,102 @@ +{% assign id = include.id | default: include.key %} +{% assign value = include.value %} + +{% if id %} + + + + +{% capture script %} + +{% endcapture %} + + +{% if include.show-scripts %} +{{ script }} +{% else %} +{% capture_global scripts %} +{{ script }} +{% endcapture_global %} +{% endif %} + +{% endif %} \ No newline at end of file diff --git a/src/pages/_includes/ui/toast.html b/src/pages/_includes/ui/toast.html index ba1904696..cec8a2764 100644 --- a/src/pages/_includes/ui/toast.html +++ b/src/pages/_includes/ui/toast.html @@ -1,6 +1,6 @@ {% assign person-id = include.person-id | default: 2 %} {% assign person = site.data.people[person-id] %} -