@tabler/core 1.0.0-beta20 → 1.0.0-beta21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -6
- package/dist/css/demo.css +8 -8
- package/dist/css/demo.min.css +5 -5
- package/dist/css/demo.rtl.css +8 -8
- package/dist/css/demo.rtl.min.css +5 -5
- package/dist/css/tabler-flags.css +10 -10
- package/dist/css/tabler-flags.min.css +5 -5
- package/dist/css/tabler-flags.rtl.css +10 -10
- package/dist/css/tabler-flags.rtl.min.css +5 -5
- package/dist/css/tabler-payments.css +4 -4
- package/dist/css/tabler-payments.min.css +4 -4
- package/dist/css/tabler-payments.rtl.css +4 -4
- package/dist/css/tabler-payments.rtl.min.css +4 -4
- package/dist/css/tabler-social.css +4 -4
- package/dist/css/tabler-social.min.css +4 -4
- package/dist/css/tabler-social.rtl.css +4 -4
- package/dist/css/tabler-social.rtl.min.css +4 -4
- package/dist/css/tabler-vendors.css +246 -253
- package/dist/css/tabler-vendors.min.css +5 -5
- package/dist/css/tabler-vendors.rtl.css +246 -253
- package/dist/css/tabler-vendors.rtl.min.css +5 -5
- package/dist/css/tabler.css +643 -426
- package/dist/css/tabler.min.css +8 -8
- package/dist/css/tabler.rtl.css +667 -441
- package/dist/css/tabler.rtl.min.css +8 -8
- package/dist/js/demo-theme.js +4 -4
- package/dist/js/demo-theme.min.js +4 -4
- package/dist/js/demo.js +41 -42
- package/dist/js/demo.min.js +5 -5
- package/dist/js/tabler.esm.js +1949 -1248
- package/dist/js/tabler.esm.min.js +8 -8
- package/dist/js/tabler.js +1949 -1248
- package/dist/js/tabler.min.js +8 -8
- package/dist/libs/apexcharts/dist/apexcharts.amd.js +1 -1
- package/dist/libs/apexcharts/dist/apexcharts.common.js +5 -5
- package/dist/libs/apexcharts/dist/apexcharts.css +166 -65
- package/dist/libs/apexcharts/dist/apexcharts.esm.js +5 -5
- package/dist/libs/apexcharts/dist/apexcharts.js +7964 -8527
- package/dist/libs/apexcharts/dist/apexcharts.min.js +5 -5
- package/dist/libs/apexcharts/dist/locales/be-cyrl.json +55 -0
- package/dist/libs/apexcharts/dist/locales/be-latn.json +55 -0
- package/dist/libs/apexcharts/dist/locales/da.json +55 -0
- package/dist/libs/apexcharts/dist/locales/ms.json +63 -0
- package/dist/libs/apexcharts/dist/locales/pt.json +3 -3
- package/dist/libs/apexcharts/dist/locales/vi.json +63 -0
- package/dist/libs/apexcharts/dist/locales/zh-tw.json +1 -1
- package/dist/libs/bootstrap/dist/js/bootstrap.bundle.js +8 -8
- package/dist/libs/bootstrap/dist/js/bootstrap.bundle.js.map +1 -1
- package/dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js +3 -3
- package/dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js.map +1 -1
- package/dist/libs/bootstrap/dist/js/bootstrap.esm.js +8 -8
- package/dist/libs/bootstrap/dist/js/bootstrap.esm.js.map +1 -1
- package/dist/libs/bootstrap/dist/js/bootstrap.esm.min.js +3 -3
- package/dist/libs/bootstrap/dist/js/bootstrap.esm.min.js.map +1 -1
- package/dist/libs/bootstrap/dist/js/bootstrap.js +8 -8
- package/dist/libs/bootstrap/dist/js/bootstrap.js.map +1 -1
- package/dist/libs/bootstrap/dist/js/bootstrap.min.js +3 -3
- package/dist/libs/bootstrap/dist/js/bootstrap.min.js.map +1 -1
- package/dist/libs/countup.js/dist/countUp.d.ts +1 -0
- package/dist/libs/countup.js/dist/countUp.js +4 -1
- package/dist/libs/countup.js/dist/countUp.min.js +1 -1
- package/dist/libs/countup.js/dist/countUp.umd.js +1 -1
- package/dist/libs/jsvectormap/dist/jsvectormap.cjs +2279 -0
- package/dist/libs/jsvectormap/dist/jsvectormap.css +121 -0
- package/dist/libs/jsvectormap/dist/jsvectormap.esm.js +2277 -0
- package/dist/libs/jsvectormap/dist/jsvectormap.js +2285 -0
- package/dist/libs/jsvectormap/dist/jsvectormap.min.css +1 -0
- package/dist/libs/jsvectormap/dist/jsvectormap.min.js +1 -0
- package/dist/libs/jsvectormap/dist/maps/world-merc.js +1 -1
- package/dist/libs/jsvectormap/dist/maps/world.js +1 -1
- package/dist/libs/nouislider/dist/nouislider.d.ts +8 -10
- package/dist/libs/nouislider/dist/nouislider.js +64 -5
- package/dist/libs/nouislider/dist/nouislider.min.js +1 -1
- package/dist/libs/nouislider/dist/nouislider.min.mjs +1 -1
- package/dist/libs/nouislider/dist/nouislider.mjs +64 -5
- package/dist/libs/star-rating.js/dist/star-rating.cjs.js +5 -2
- package/dist/libs/star-rating.js/dist/star-rating.css +23 -20
- package/dist/libs/star-rating.js/dist/star-rating.esm.js +5 -2
- package/dist/libs/star-rating.js/dist/star-rating.js +5 -9
- package/dist/libs/star-rating.js/dist/star-rating.min.css +1 -8
- package/dist/libs/star-rating.js/dist/star-rating.min.js +1 -8
- package/dist/libs/tinymce/CHANGELOG.md +471 -12
- package/dist/libs/tinymce/README.md +16 -10
- package/dist/libs/tinymce/bower.json +1 -1
- package/dist/libs/tinymce/composer.json +2 -2
- package/dist/libs/tinymce/icons/default/icons.js +13 -2
- package/dist/libs/tinymce/icons/default/icons.min.js +1 -1
- package/dist/libs/tinymce/license.md +6 -0
- package/dist/libs/tinymce/models/dom/model.js +237 -213
- package/dist/libs/tinymce/models/dom/model.min.js +2 -2
- package/dist/libs/tinymce/package.json +2 -2
- package/dist/libs/tinymce/plugins/accordion/index.js +7 -0
- package/dist/libs/tinymce/plugins/accordion/plugin.js +1055 -0
- package/dist/libs/tinymce/plugins/accordion/plugin.min.js +4 -0
- package/dist/libs/tinymce/plugins/advlist/plugin.js +4 -4
- package/dist/libs/tinymce/plugins/advlist/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/anchor/plugin.js +21 -3
- package/dist/libs/tinymce/plugins/anchor/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/autolink/plugin.js +1 -1
- package/dist/libs/tinymce/plugins/autolink/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/autoresize/plugin.js +20 -33
- package/dist/libs/tinymce/plugins/autoresize/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/autosave/plugin.js +1 -1
- package/dist/libs/tinymce/plugins/autosave/plugin.min.js +1 -1
- package/dist/libs/tinymce/plugins/charmap/plugin.js +15 -3
- package/dist/libs/tinymce/plugins/charmap/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/code/plugin.js +1 -1
- package/dist/libs/tinymce/plugins/code/plugin.min.js +1 -1
- package/dist/libs/tinymce/plugins/codesample/plugin.js +27 -13
- package/dist/libs/tinymce/plugins/codesample/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/directionality/plugin.js +33 -27
- package/dist/libs/tinymce/plugins/directionality/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/emoticons/plugin.js +17 -4
- package/dist/libs/tinymce/plugins/emoticons/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/fullscreen/plugin.js +168 -105
- package/dist/libs/tinymce/plugins/fullscreen/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/ar.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/bg_BG.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/ca.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/cs.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/da.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/de.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/el.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/en.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/es.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/eu.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/fa.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/fi.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/fr_FR.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/he_IL.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/hi.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/hr.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/hu_HU.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/id.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/it.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/ja.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/kk.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/ko_KR.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/ms.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/nb_NO.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/nl.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/pl.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/pt_BR.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/pt_PT.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/ro.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/ru.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/sk.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/sl_SI.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/sv_SE.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/th_TH.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/tr.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/uk.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/vi.js +93 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/zh_CN.js +87 -0
- package/dist/libs/tinymce/plugins/help/js/i18n/keynav/zh_TW.js +93 -0
- package/dist/libs/tinymce/plugins/help/plugin.js +115 -135
- package/dist/libs/tinymce/plugins/help/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/image/plugin.js +23 -5
- package/dist/libs/tinymce/plugins/image/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/importcss/plugin.js +4 -3
- package/dist/libs/tinymce/plugins/importcss/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/insertdatetime/plugin.js +15 -3
- package/dist/libs/tinymce/plugins/insertdatetime/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/link/plugin.js +193 -114
- package/dist/libs/tinymce/plugins/link/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/lists/plugin.js +290 -66
- package/dist/libs/tinymce/plugins/lists/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/media/plugin.js +80 -33
- package/dist/libs/tinymce/plugins/media/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/nonbreaking/plugin.js +15 -3
- package/dist/libs/tinymce/plugins/nonbreaking/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/pagebreak/plugin.js +15 -3
- package/dist/libs/tinymce/plugins/pagebreak/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/preview/plugin.js +1 -1
- package/dist/libs/tinymce/plugins/preview/plugin.min.js +1 -1
- package/dist/libs/tinymce/plugins/quickbars/plugin.js +19 -7
- package/dist/libs/tinymce/plugins/quickbars/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/save/plugin.js +3 -2
- package/dist/libs/tinymce/plugins/save/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/searchreplace/plugin.js +42 -36
- package/dist/libs/tinymce/plugins/searchreplace/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/table/plugin.js +121 -76
- package/dist/libs/tinymce/plugins/table/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/visualblocks/plugin.js +1 -1
- package/dist/libs/tinymce/plugins/visualblocks/plugin.min.js +1 -1
- package/dist/libs/tinymce/plugins/visualchars/plugin.js +1 -1
- package/dist/libs/tinymce/plugins/visualchars/plugin.min.js +1 -1
- package/dist/libs/tinymce/plugins/wordcount/plugin.js +27 -19
- package/dist/libs/tinymce/plugins/wordcount/plugin.min.js +2 -2
- package/dist/libs/tinymce/skins/content/dark/content.js +1 -0
- package/dist/libs/tinymce/skins/content/default/content.js +1 -0
- package/dist/libs/tinymce/skins/content/document/content.js +1 -0
- package/dist/libs/tinymce/skins/content/tinymce-5/content.js +1 -0
- package/dist/libs/tinymce/skins/content/tinymce-5-dark/content.js +1 -0
- package/dist/libs/tinymce/skins/content/writer/content.js +1 -0
- package/dist/libs/tinymce/skins/ui/oxide/content.css +32 -29
- package/dist/libs/tinymce/skins/ui/oxide/content.inline.css +32 -29
- package/dist/libs/tinymce/skins/ui/oxide/content.inline.js +1 -0
- package/dist/libs/tinymce/skins/ui/oxide/content.inline.min.css +1 -1
- package/dist/libs/tinymce/skins/ui/oxide/content.js +1 -0
- package/dist/libs/tinymce/skins/ui/oxide/content.min.css +1 -1
- package/dist/libs/tinymce/skins/ui/oxide/skin.css +1003 -105
- package/dist/libs/tinymce/skins/ui/oxide/skin.js +1 -0
- package/dist/libs/tinymce/skins/ui/oxide/skin.min.css +1 -1
- package/dist/libs/tinymce/skins/ui/oxide/skin.shadowdom.js +1 -0
- package/dist/libs/tinymce/skins/ui/oxide-dark/content.css +32 -22
- package/dist/libs/tinymce/skins/ui/oxide-dark/content.inline.css +32 -29
- package/dist/libs/tinymce/skins/ui/oxide-dark/content.inline.js +1 -0
- package/dist/libs/tinymce/skins/ui/oxide-dark/content.inline.min.css +1 -1
- package/dist/libs/tinymce/skins/ui/oxide-dark/content.js +1 -0
- package/dist/libs/tinymce/skins/ui/oxide-dark/content.min.css +1 -1
- package/dist/libs/tinymce/skins/ui/oxide-dark/skin.css +1008 -110
- package/dist/libs/tinymce/skins/ui/oxide-dark/skin.js +1 -0
- package/dist/libs/tinymce/skins/ui/oxide-dark/skin.min.css +1 -1
- package/dist/libs/tinymce/skins/ui/oxide-dark/skin.shadowdom.js +1 -0
- package/dist/libs/tinymce/skins/ui/tinymce-5/content.css +32 -29
- package/dist/libs/tinymce/skins/ui/tinymce-5/content.inline.css +32 -29
- package/dist/libs/tinymce/skins/ui/tinymce-5/content.inline.js +1 -0
- package/dist/libs/tinymce/skins/ui/tinymce-5/content.inline.min.css +1 -1
- package/dist/libs/tinymce/skins/ui/tinymce-5/content.js +1 -0
- package/dist/libs/tinymce/skins/ui/tinymce-5/content.min.css +1 -1
- package/dist/libs/tinymce/skins/ui/tinymce-5/skin.css +1003 -86
- package/dist/libs/tinymce/skins/ui/tinymce-5/skin.js +1 -0
- package/dist/libs/tinymce/skins/ui/tinymce-5/skin.min.css +1 -1
- package/dist/libs/tinymce/skins/ui/tinymce-5/skin.shadowdom.js +1 -0
- package/dist/libs/tinymce/skins/ui/tinymce-5-dark/content.css +32 -22
- package/dist/libs/tinymce/skins/ui/tinymce-5-dark/content.inline.css +32 -29
- package/dist/libs/tinymce/skins/ui/tinymce-5-dark/content.inline.js +1 -0
- package/dist/libs/tinymce/skins/ui/tinymce-5-dark/content.inline.min.css +1 -1
- package/dist/libs/tinymce/skins/ui/tinymce-5-dark/content.js +1 -0
- package/dist/libs/tinymce/skins/ui/tinymce-5-dark/content.min.css +1 -1
- package/dist/libs/tinymce/skins/ui/tinymce-5-dark/skin.css +1009 -92
- package/dist/libs/tinymce/skins/ui/tinymce-5-dark/skin.js +1 -0
- package/dist/libs/tinymce/skins/ui/tinymce-5-dark/skin.min.css +1 -1
- package/dist/libs/tinymce/skins/ui/tinymce-5-dark/skin.shadowdom.js +1 -0
- package/dist/libs/tinymce/themes/silver/theme.js +26361 -24936
- package/dist/libs/tinymce/themes/silver/theme.min.js +2 -2
- package/dist/libs/tinymce/tinymce.d.ts +205 -136
- package/dist/libs/tinymce/tinymce.js +4400 -2838
- package/dist/libs/tinymce/tinymce.min.js +2 -2
- package/dist/libs/tom-select/dist/js/plugins/caret_position.js +11 -16
- package/dist/libs/tom-select/dist/js/plugins/caret_position.js.map +1 -1
- package/dist/libs/tom-select/dist/js/plugins/change_listener.js +3 -2
- package/dist/libs/tom-select/dist/js/plugins/change_listener.js.map +1 -1
- package/dist/libs/tom-select/dist/js/plugins/checkbox_options.js +47 -34
- package/dist/libs/tom-select/dist/js/plugins/checkbox_options.js.map +1 -1
- package/dist/libs/tom-select/dist/js/plugins/clear_button.js +3 -13
- package/dist/libs/tom-select/dist/js/plugins/clear_button.js.map +1 -1
- package/dist/libs/tom-select/dist/js/plugins/drag_drop.js +249 -29
- package/dist/libs/tom-select/dist/js/plugins/drag_drop.js.map +1 -1
- package/dist/libs/tom-select/dist/js/plugins/dropdown_header.js +3 -11
- package/dist/libs/tom-select/dist/js/plugins/dropdown_header.js.map +1 -1
- package/dist/libs/tom-select/dist/js/plugins/dropdown_input.js +15 -24
- package/dist/libs/tom-select/dist/js/plugins/dropdown_input.js.map +1 -1
- package/dist/libs/tom-select/dist/js/plugins/input_autogrow.js +4 -6
- package/dist/libs/tom-select/dist/js/plugins/input_autogrow.js.map +1 -1
- package/dist/libs/tom-select/dist/js/plugins/no_active_items.js +2 -1
- package/dist/libs/tom-select/dist/js/plugins/no_active_items.js.map +1 -1
- package/dist/libs/tom-select/dist/js/plugins/no_backspace_delete.js +2 -2
- package/dist/libs/tom-select/dist/js/plugins/no_backspace_delete.js.map +1 -1
- package/dist/libs/tom-select/dist/js/plugins/optgroup_columns.js +3 -15
- package/dist/libs/tom-select/dist/js/plugins/optgroup_columns.js.map +1 -1
- package/dist/libs/tom-select/dist/js/plugins/remove_button.js +11 -15
- package/dist/libs/tom-select/dist/js/plugins/remove_button.js.map +1 -1
- package/dist/libs/tom-select/dist/js/plugins/restore_on_backspace.js +2 -3
- package/dist/libs/tom-select/dist/js/plugins/restore_on_backspace.js.map +1 -1
- package/dist/libs/tom-select/dist/js/plugins/virtual_scroll.js +41 -50
- package/dist/libs/tom-select/dist/js/plugins/virtual_scroll.js.map +1 -1
- package/dist/libs/tom-select/dist/js/tom-select.base.js +411 -685
- package/dist/libs/tom-select/dist/js/tom-select.base.js.map +1 -1
- package/dist/libs/tom-select/dist/js/tom-select.base.min.js +87 -78
- package/dist/libs/tom-select/dist/js/tom-select.base.min.js.map +1 -1
- package/dist/libs/tom-select/dist/js/tom-select.complete.js +614 -820
- package/dist/libs/tom-select/dist/js/tom-select.complete.js.map +1 -1
- package/dist/libs/tom-select/dist/js/tom-select.complete.min.js +195 -176
- package/dist/libs/tom-select/dist/js/tom-select.complete.min.js.map +1 -1
- package/dist/libs/tom-select/dist/js/tom-select.popular.js +436 -705
- package/dist/libs/tom-select/dist/js/tom-select.popular.js.map +1 -1
- package/dist/libs/tom-select/dist/js/tom-select.popular.min.js +87 -78
- package/dist/libs/tom-select/dist/js/tom-select.popular.min.js.map +1 -1
- package/docs/base/colors.mdx +25 -0
- package/docs/base/typography.mdx +296 -0
- package/docs/components/alerts.mdx +430 -0
- package/docs/components/autosize.mdx +16 -0
- package/docs/components/avatars.mdx +172 -0
- package/docs/components/badges.mdx +127 -0
- package/docs/components/breadcrumb.mdx +107 -0
- package/docs/components/buttons.mdx +863 -0
- package/docs/components/cards.mdx +343 -0
- package/docs/components/carousel.mdx +235 -0
- package/docs/components/charts.mdx +526 -0
- package/docs/components/countup.mdx +136 -0
- package/docs/components/datagrid.mdx +90 -0
- package/docs/components/divider.mdx +63 -0
- package/docs/components/dropdowns.mdx +245 -0
- package/docs/components/dropzone.mdx +63 -0
- package/docs/components/empty.mdx +103 -0
- package/docs/components/icons.mdx +120 -0
- package/docs/components/inline-player.mdx +31 -0
- package/docs/components/modals.mdx +222 -0
- package/docs/components/placeholder.mdx +270 -0
- package/docs/components/popover.mdx +55 -0
- package/docs/components/progress.mdx +92 -0
- package/docs/components/progressbg.mdx +16 -0
- package/docs/components/range-slider.mdx +17 -0
- package/docs/components/ribbons.mdx +151 -0
- package/docs/components/spinners.mdx +119 -0
- package/docs/components/statuses.mdx +285 -0
- package/docs/components/steps.mdx +111 -0
- package/docs/components/switch-icon.mdx +155 -0
- package/docs/components/tables.mdx +410 -0
- package/docs/components/tabs.mdx +243 -0
- package/docs/components/timelines.mdx +506 -0
- package/docs/components/tinymce.mdx +44 -0
- package/docs/components/toasts.mdx +73 -0
- package/docs/components/tooltips.mdx +34 -0
- package/docs/components/tracking.mdx +162 -0
- package/docs/forms/form-color-check.mdx +179 -0
- package/docs/forms/form-elements.mdx +498 -0
- package/docs/forms/form-fieldset.mdx +44 -0
- package/docs/forms/form-helpers.mdx +12 -0
- package/docs/forms/form-image-check.mdx +162 -0
- package/docs/forms/form-input-mask.mdx +18 -0
- package/docs/forms/form-selectboxes.mdx +205 -0
- package/docs/forms/form-validation.mdx +25 -0
- package/docs/getting-started/browser-support.mdx +20 -0
- package/docs/getting-started/customize.mdx +24 -0
- package/docs/getting-started/download.mdx +42 -0
- package/docs/getting-started/faq.mdx +28 -0
- package/docs/getting-started/index.mdx +40 -0
- package/docs/icons/eps.mdx +13 -0
- package/docs/icons/figma.mdx +7 -0
- package/docs/icons/index.mdx +103 -0
- package/docs/icons/pdf.mdx +13 -0
- package/docs/icons/png.mdx +19 -0
- package/docs/icons/preact.mdx +40 -0
- package/docs/icons/react.mdx +40 -0
- package/docs/icons/solidjs.mdx +39 -0
- package/docs/icons/svelte.mdx +40 -0
- package/docs/icons/svg.mdx +74 -0
- package/docs/icons/vue.mdx +45 -0
- package/docs/icons/webfont.mdx +52 -0
- package/docs/layout/page-headers.mdx +226 -0
- package/docs/layout/page-layouts.mdx +204 -0
- package/docs/menu.json +317 -0
- package/docs/plugins/flags.mdx +52 -0
- package/docs/plugins/payments.mdx +43 -0
- package/docs/utilities/borders.mdx +114 -0
- package/docs/utilities/cursors.mdx +92 -0
- package/docs/utilities/interactions.mdx +23 -0
- package/package.json +37 -37
- package/src/js/src/toast.js +9 -1
- package/src/scss/_variables-dark.scss +3 -3
- package/src/scss/_variables.scss +38 -33
- package/src/scss/layout/_dark.scss +10 -2
- package/src/scss/layout/_navbar.scss +22 -13
- package/src/scss/layout/_page.scss +4 -4
- package/src/scss/layout/_root.scss +1 -1
- package/src/scss/mixins/_mixins.scss +4 -4
- package/src/scss/ui/_alerts.scss +2 -2
- package/src/scss/ui/_buttons.scss +4 -4
- package/src/scss/ui/_dropdowns.scss +1 -0
- package/src/scss/ui/_empty.scss +0 -5
- package/src/scss/ui/_flags.scss +2 -2
- package/src/scss/ui/_forms.scss +5 -4
- package/src/scss/ui/_modals.scss +3 -3
- package/src/scss/ui/_ribbons.scss +1 -0
- package/src/scss/ui/_toasts.scss +0 -1
- package/src/scss/ui/_type.scss +4 -2
- package/src/scss/vendor/_apexcharts.scss +2 -2
- package/src/scss/vendor/_jsvectormap.scss +1 -1
- package/src/scss/vendor/_litepicker.scss +1 -1
- package/dist/libs/jsvectormap/dist/js/jsvectormap.js +0 -2318
- package/dist/libs/jsvectormap/dist/js/jsvectormap.min.js +0 -1
- package/dist/libs/tinymce/license.txt +0 -21
- package/dist/libs/tinymce/plugins/template/index.js +0 -7
- package/dist/libs/tinymce/plugins/template/plugin.js +0 -554
- package/dist/libs/tinymce/plugins/template/plugin.min.js +0 -4
|
@@ -0,0 +1,285 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Statuses
|
|
3
|
+
description: Status dots are particularly useful if you want to make an interface element more noticeable regardless of limited space.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
## Default markup
|
|
7
|
+
|
|
8
|
+
```html example vertical height="7rem"
|
|
9
|
+
<span class="status status-blue">Blue</span>
|
|
10
|
+
<span class="status status-azure">Azure</span>
|
|
11
|
+
<span class="status status-indigo">Indigo</span>
|
|
12
|
+
<span class="status status-purple">Purple</span>
|
|
13
|
+
<span class="status status-pink">Pink</span>
|
|
14
|
+
<span class="status status-red">Red</span>
|
|
15
|
+
<span class="status status-orange">Orange</span>
|
|
16
|
+
<span class="status status-yellow">Yellow</span>
|
|
17
|
+
<span class="status status-lime">Lime</span>
|
|
18
|
+
<span class="status status-green">Green</span>
|
|
19
|
+
<span class="status status-teal">Teal</span>
|
|
20
|
+
<span class="status status-cyan">Cyan</span>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
```html
|
|
24
|
+
<span class="status status-blue">Blue</span>
|
|
25
|
+
<span class="status status-azure">Azure</span>
|
|
26
|
+
...
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Status with dot
|
|
30
|
+
|
|
31
|
+
```html example code vertical height="7rem"
|
|
32
|
+
<span class="status status-blue">
|
|
33
|
+
<span class="status-dot"></span>
|
|
34
|
+
Blue
|
|
35
|
+
</span>
|
|
36
|
+
<span class="status status-azure">
|
|
37
|
+
<span class="status-dot"></span>
|
|
38
|
+
Azure
|
|
39
|
+
</span>
|
|
40
|
+
<span class="status status-indigo">
|
|
41
|
+
<span class="status-dot"></span>
|
|
42
|
+
Indigo
|
|
43
|
+
</span>
|
|
44
|
+
<span class="status status-purple">
|
|
45
|
+
<span class="status-dot"></span>
|
|
46
|
+
Purple
|
|
47
|
+
</span>
|
|
48
|
+
<span class="status status-pink">
|
|
49
|
+
<span class="status-dot"></span>
|
|
50
|
+
Pink
|
|
51
|
+
</span>
|
|
52
|
+
<span class="status status-red">
|
|
53
|
+
<span class="status-dot"></span>
|
|
54
|
+
Red
|
|
55
|
+
</span>
|
|
56
|
+
<span class="status status-orange">
|
|
57
|
+
<span class="status-dot"></span>
|
|
58
|
+
Orange
|
|
59
|
+
</span>
|
|
60
|
+
<span class="status status-yellow">
|
|
61
|
+
<span class="status-dot"></span>
|
|
62
|
+
Yellow
|
|
63
|
+
</span>
|
|
64
|
+
<span class="status status-lime">
|
|
65
|
+
<span class="status-dot"></span>
|
|
66
|
+
Lime
|
|
67
|
+
</span>
|
|
68
|
+
<span class="status status-green">
|
|
69
|
+
<span class="status-dot"></span>
|
|
70
|
+
Green
|
|
71
|
+
</span>
|
|
72
|
+
<span class="status status-teal">
|
|
73
|
+
<span class="status-dot"></span>
|
|
74
|
+
Teal
|
|
75
|
+
</span>
|
|
76
|
+
<span class="status status-cyan">
|
|
77
|
+
<span class="status-dot"></span>
|
|
78
|
+
Cyan
|
|
79
|
+
</span>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
### Animated dot
|
|
83
|
+
|
|
84
|
+
```html example code vertical height="7rem"
|
|
85
|
+
<span class="status status-blue">
|
|
86
|
+
<span class="status-dot status-dot-animated"></span>
|
|
87
|
+
Blue
|
|
88
|
+
</span>
|
|
89
|
+
<span class="status status-azure">
|
|
90
|
+
<span class="status-dot status-dot-animated"></span>
|
|
91
|
+
Azure
|
|
92
|
+
</span>
|
|
93
|
+
<span class="status status-indigo">
|
|
94
|
+
<span class="status-dot status-dot-animated"></span>
|
|
95
|
+
Indigo
|
|
96
|
+
</span>
|
|
97
|
+
<span class="status status-purple">
|
|
98
|
+
<span class="status-dot status-dot-animated"></span>
|
|
99
|
+
Purple
|
|
100
|
+
</span>
|
|
101
|
+
<span class="status status-pink">
|
|
102
|
+
<span class="status-dot status-dot-animated"></span>
|
|
103
|
+
Pink
|
|
104
|
+
</span>
|
|
105
|
+
<span class="status status-red">
|
|
106
|
+
<span class="status-dot status-dot-animated"></span>
|
|
107
|
+
Red
|
|
108
|
+
</span>
|
|
109
|
+
<span class="status status-orange">
|
|
110
|
+
<span class="status-dot status-dot-animated"></span>
|
|
111
|
+
Orange
|
|
112
|
+
</span>
|
|
113
|
+
<span class="status status-yellow">
|
|
114
|
+
<span class="status-dot status-dot-animated"></span>
|
|
115
|
+
Yellow
|
|
116
|
+
</span>
|
|
117
|
+
<span class="status status-lime">
|
|
118
|
+
<span class="status-dot status-dot-animated"></span>
|
|
119
|
+
Lime
|
|
120
|
+
</span>
|
|
121
|
+
<span class="status status-green">
|
|
122
|
+
<span class="status-dot status-dot-animated"></span>
|
|
123
|
+
Green
|
|
124
|
+
</span>
|
|
125
|
+
<span class="status status-teal">
|
|
126
|
+
<span class="status-dot status-dot-animated"></span>
|
|
127
|
+
Teal
|
|
128
|
+
</span>
|
|
129
|
+
<span class="status status-cyan">
|
|
130
|
+
<span class="status-dot status-dot-animated"></span>
|
|
131
|
+
Cyan
|
|
132
|
+
</span>
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
## Lite status
|
|
136
|
+
|
|
137
|
+
```html example code vertical height="7rem"
|
|
138
|
+
<span class="status status-blue status-lite">
|
|
139
|
+
<span class="status-dot"></span>
|
|
140
|
+
Blue
|
|
141
|
+
</span>
|
|
142
|
+
<span class="status status-azure status-lite">
|
|
143
|
+
<span class="status-dot"></span>
|
|
144
|
+
Azure
|
|
145
|
+
</span>
|
|
146
|
+
<span class="status status-indigo status-lite">
|
|
147
|
+
<span class="status-dot"></span>
|
|
148
|
+
Indigo
|
|
149
|
+
</span>
|
|
150
|
+
<span class="status status-purple status-lite">
|
|
151
|
+
<span class="status-dot"></span>
|
|
152
|
+
Purple
|
|
153
|
+
</span>
|
|
154
|
+
<span class="status status-pink status-lite">
|
|
155
|
+
<span class="status-dot"></span>
|
|
156
|
+
Pink
|
|
157
|
+
</span>
|
|
158
|
+
<span class="status status-red status-lite">
|
|
159
|
+
<span class="status-dot"></span>
|
|
160
|
+
Red
|
|
161
|
+
</span>
|
|
162
|
+
<span class="status status-orange status-lite">
|
|
163
|
+
<span class="status-dot"></span>
|
|
164
|
+
Orange
|
|
165
|
+
</span>
|
|
166
|
+
<span class="status status-yellow status-lite">
|
|
167
|
+
<span class="status-dot"></span>
|
|
168
|
+
Yellow
|
|
169
|
+
</span>
|
|
170
|
+
<span class="status status-lime status-lite">
|
|
171
|
+
<span class="status-dot"></span>
|
|
172
|
+
Lime
|
|
173
|
+
</span>
|
|
174
|
+
<span class="status status-green status-lite">
|
|
175
|
+
<span class="status-dot"></span>
|
|
176
|
+
Green
|
|
177
|
+
</span>
|
|
178
|
+
<span class="status status-teal status-lite">
|
|
179
|
+
<span class="status-dot"></span>
|
|
180
|
+
Teal
|
|
181
|
+
</span>
|
|
182
|
+
<span class="status status-cyan status-lite">
|
|
183
|
+
<span class="status-dot"></span>
|
|
184
|
+
Cyan
|
|
185
|
+
</span>
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
## Status dots
|
|
189
|
+
|
|
190
|
+
```html code example centered separated height="7rem"
|
|
191
|
+
<span class="status-dot status-blue"></span>
|
|
192
|
+
<span class="status-dot status-azure"></span>
|
|
193
|
+
<span class="status-dot status-indigo"></span>
|
|
194
|
+
<span class="status-dot status-purple"></span>
|
|
195
|
+
<span class="status-dot status-pink"></span>
|
|
196
|
+
<span class="status-dot status-red"></span>
|
|
197
|
+
<span class="status-dot status-orange"></span>
|
|
198
|
+
<span class="status-dot status-yellow"></span>
|
|
199
|
+
<span class="status-dot status-lime"></span>
|
|
200
|
+
<span class="status-dot status-green"></span>
|
|
201
|
+
<span class="status-dot status-teal"></span>
|
|
202
|
+
<span class="status-dot status-cyan"></span>
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
### Animated dots
|
|
206
|
+
|
|
207
|
+
```html code example centered separated height="7rem"
|
|
208
|
+
<span class="status-dot status-dot-animated status-blue"></span>
|
|
209
|
+
<span class="status-dot status-dot-animated status-azure"></span>
|
|
210
|
+
<span class="status-dot status-dot-animated status-indigo"></span>
|
|
211
|
+
<span class="status-dot status-dot-animated status-purple"></span>
|
|
212
|
+
<span class="status-dot status-dot-animated status-pink"></span>
|
|
213
|
+
<span class="status-dot status-dot-animated status-red"></span>
|
|
214
|
+
<span class="status-dot status-dot-animated status-orange"></span>
|
|
215
|
+
<span class="status-dot status-dot-animated status-yellow"></span>
|
|
216
|
+
<span class="status-dot status-dot-animated status-lime"></span>
|
|
217
|
+
<span class="status-dot status-dot-animated status-green"></span>
|
|
218
|
+
<span class="status-dot status-dot-animated status-teal"></span>
|
|
219
|
+
<span class="status-dot status-dot-animated status-cyan"></span>
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
## Status indicator
|
|
223
|
+
|
|
224
|
+
```html code example vertical centered height="7rem"
|
|
225
|
+
<span class="status-indicator status-blue status-indicator-animated">
|
|
226
|
+
<span class="status-indicator-circle"></span>
|
|
227
|
+
<span class="status-indicator-circle"></span>
|
|
228
|
+
<span class="status-indicator-circle"></span>
|
|
229
|
+
</span>
|
|
230
|
+
<span class="status-indicator status-azure status-indicator-animated">
|
|
231
|
+
<span class="status-indicator-circle"></span>
|
|
232
|
+
<span class="status-indicator-circle"></span>
|
|
233
|
+
<span class="status-indicator-circle"></span>
|
|
234
|
+
</span>
|
|
235
|
+
<span class="status-indicator status-indigo status-indicator-animated">
|
|
236
|
+
<span class="status-indicator-circle"></span>
|
|
237
|
+
<span class="status-indicator-circle"></span>
|
|
238
|
+
<span class="status-indicator-circle"></span>
|
|
239
|
+
</span>
|
|
240
|
+
<span class="status-indicator status-purple status-indicator-animated">
|
|
241
|
+
<span class="status-indicator-circle"></span>
|
|
242
|
+
<span class="status-indicator-circle"></span>
|
|
243
|
+
<span class="status-indicator-circle"></span>
|
|
244
|
+
</span>
|
|
245
|
+
<span class="status-indicator status-pink status-indicator-animated">
|
|
246
|
+
<span class="status-indicator-circle"></span>
|
|
247
|
+
<span class="status-indicator-circle"></span>
|
|
248
|
+
<span class="status-indicator-circle"></span>
|
|
249
|
+
</span>
|
|
250
|
+
<span class="status-indicator status-red status-indicator-animated">
|
|
251
|
+
<span class="status-indicator-circle"></span>
|
|
252
|
+
<span class="status-indicator-circle"></span>
|
|
253
|
+
<span class="status-indicator-circle"></span>
|
|
254
|
+
</span>
|
|
255
|
+
<span class="status-indicator status-orange status-indicator-animated">
|
|
256
|
+
<span class="status-indicator-circle"></span>
|
|
257
|
+
<span class="status-indicator-circle"></span>
|
|
258
|
+
<span class="status-indicator-circle"></span>
|
|
259
|
+
</span>
|
|
260
|
+
<span class="status-indicator status-yellow status-indicator-animated">
|
|
261
|
+
<span class="status-indicator-circle"></span>
|
|
262
|
+
<span class="status-indicator-circle"></span>
|
|
263
|
+
<span class="status-indicator-circle"></span>
|
|
264
|
+
</span>
|
|
265
|
+
<span class="status-indicator status-lime status-indicator-animated">
|
|
266
|
+
<span class="status-indicator-circle"></span>
|
|
267
|
+
<span class="status-indicator-circle"></span>
|
|
268
|
+
<span class="status-indicator-circle"></span>
|
|
269
|
+
</span>
|
|
270
|
+
<span class="status-indicator status-green status-indicator-animated">
|
|
271
|
+
<span class="status-indicator-circle"></span>
|
|
272
|
+
<span class="status-indicator-circle"></span>
|
|
273
|
+
<span class="status-indicator-circle"></span>
|
|
274
|
+
</span>
|
|
275
|
+
<span class="status-indicator status-teal status-indicator-animated">
|
|
276
|
+
<span class="status-indicator-circle"></span>
|
|
277
|
+
<span class="status-indicator-circle"></span>
|
|
278
|
+
<span class="status-indicator-circle"></span>
|
|
279
|
+
</span>
|
|
280
|
+
<span class="status-indicator status-cyan status-indicator-animated">
|
|
281
|
+
<span class="status-indicator-circle"></span>
|
|
282
|
+
<span class="status-indicator-circle"></span>
|
|
283
|
+
<span class="status-indicator-circle"></span>
|
|
284
|
+
</span>
|
|
285
|
+
```
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Steps
|
|
3
|
+
description: Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully.
|
|
4
|
+
new: true
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Default markup
|
|
8
|
+
|
|
9
|
+
Steps show users where they are within a process, what steps they have already completed and what they are expected to complete. Making multi-step processes more user-friendly facilitates users' interaction with your interface.
|
|
10
|
+
|
|
11
|
+
Use the `steps` class to create the default progress tracker and name the steps accordingly.
|
|
12
|
+
|
|
13
|
+
```html code example
|
|
14
|
+
<div class="steps">
|
|
15
|
+
<a href="#" class="step-item">
|
|
16
|
+
Step 1
|
|
17
|
+
</a>
|
|
18
|
+
<a href="#" class="step-item">
|
|
19
|
+
Step 2
|
|
20
|
+
</a>
|
|
21
|
+
<a href="#" class="step-item active">
|
|
22
|
+
Step 3
|
|
23
|
+
</a>
|
|
24
|
+
<span href="#" class="step-item">
|
|
25
|
+
Step 4
|
|
26
|
+
</span>
|
|
27
|
+
</div>
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Tooltips
|
|
31
|
+
|
|
32
|
+
Add tooltips, if you want to provide users with additional information about the steps they are expected to complete. Tooltips are displayed when a user hovers over a given step and help clarify what might not be clear from the interface.
|
|
33
|
+
|
|
34
|
+
```html code example
|
|
35
|
+
<div class="steps">
|
|
36
|
+
<a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 1 description">
|
|
37
|
+
Step 1
|
|
38
|
+
</a>
|
|
39
|
+
<a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 2 description">
|
|
40
|
+
Step 2
|
|
41
|
+
</a>
|
|
42
|
+
<a href="#" class="step-item active" data-bs-toggle="tooltip" title="Step 3 description">
|
|
43
|
+
Step 3
|
|
44
|
+
</a>
|
|
45
|
+
<span href="#" class="step-item" data-bs-toggle="tooltip" title="Step 4 description">
|
|
46
|
+
Step 4
|
|
47
|
+
</span>
|
|
48
|
+
</div>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Color
|
|
52
|
+
|
|
53
|
+
You can customize the default progress indicator by changing the color to one that better suits your design. Click [here](colors) to see the range of available colors.
|
|
54
|
+
|
|
55
|
+
```html code example
|
|
56
|
+
<div class="steps steps-green">
|
|
57
|
+
<a href="#" class="step-item">
|
|
58
|
+
Step 1
|
|
59
|
+
</a>
|
|
60
|
+
<a href="#" class="step-item">
|
|
61
|
+
Step 2
|
|
62
|
+
</a>
|
|
63
|
+
<a href="#" class="step-item active">
|
|
64
|
+
Step 3
|
|
65
|
+
</a>
|
|
66
|
+
<span href="#" class="step-item">
|
|
67
|
+
Step 4
|
|
68
|
+
</span>
|
|
69
|
+
</div>
|
|
70
|
+
<div class="steps steps-red">
|
|
71
|
+
<a href="#" class="step-item">
|
|
72
|
+
Step 1
|
|
73
|
+
</a>
|
|
74
|
+
<a href="#" class="step-item">
|
|
75
|
+
Step 2
|
|
76
|
+
</a>
|
|
77
|
+
<a href="#" class="step-item active">
|
|
78
|
+
Step 3
|
|
79
|
+
</a>
|
|
80
|
+
<span href="#" class="step-item">
|
|
81
|
+
Step 4
|
|
82
|
+
</span>
|
|
83
|
+
</div>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
## Steps without title
|
|
87
|
+
|
|
88
|
+
For designs with limited space, use progress indicators without titles and add tooltips to provide the necessary details.
|
|
89
|
+
|
|
90
|
+
```html code example
|
|
91
|
+
<div class="steps">
|
|
92
|
+
<a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 1 description"></a>
|
|
93
|
+
<a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 2 description"></a>
|
|
94
|
+
<a href="#" class="step-item active" data-bs-toggle="tooltip" title="Step 3 description"></a>
|
|
95
|
+
<span href="#" class="step-item" data-bs-toggle="tooltip" title="Step 4 description"></span>
|
|
96
|
+
</div>
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## Steps with numbers
|
|
100
|
+
|
|
101
|
+
Use the `steps-counter` class to create a progress tracker with numbers instead of titles and change the color to customize it.
|
|
102
|
+
|
|
103
|
+
```html code example
|
|
104
|
+
<div class="steps steps-counter steps-lime">
|
|
105
|
+
<a href="#" class="step-item"></a>
|
|
106
|
+
<a href="#" class="step-item active"></a>
|
|
107
|
+
<span href="#" class="step-item"></span>
|
|
108
|
+
<span href="#" class="step-item"></span>
|
|
109
|
+
<span href="#" class="step-item"></span>
|
|
110
|
+
</div>
|
|
111
|
+
```
|
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Switch icon
|
|
3
|
+
description: The Switch Icon component is used to create a transition between two icons. You can use any icon, both line and filled version.
|
|
4
|
+
banner: icons
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Default markup
|
|
8
|
+
|
|
9
|
+
To replace the icons, all should add `active` class to the `switch-icon` component.
|
|
10
|
+
|
|
11
|
+
```html code example centered
|
|
12
|
+
<button class="switch-icon" data-bs-toggle="switch-icon">
|
|
13
|
+
<span class="switch-icon-a text-secondary">
|
|
14
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
15
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
16
|
+
<path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
|
|
17
|
+
</svg>
|
|
18
|
+
</span>
|
|
19
|
+
<span class="switch-icon-b text-red">
|
|
20
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
21
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
22
|
+
<path d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z" stroke-width="0" fill="currentColor"></path>
|
|
23
|
+
</svg>
|
|
24
|
+
</span>
|
|
25
|
+
</button>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Switch animations
|
|
29
|
+
|
|
30
|
+
You can also add a fancy animation to add variety to your button. See demo below:
|
|
31
|
+
|
|
32
|
+
```html example code centered separated
|
|
33
|
+
<button class="switch-icon" data-bs-toggle="switch-icon">
|
|
34
|
+
<span class="switch-icon-a text-secondary">
|
|
35
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
36
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
37
|
+
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
|
|
38
|
+
</svg>
|
|
39
|
+
</span>
|
|
40
|
+
<span class="switch-icon-b text-primary">
|
|
41
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
42
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
43
|
+
<path d="M7 3.34a10 10 0 1 1 -4.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 4.995 -8.336z" stroke-width="0" fill="currentColor"></path>
|
|
44
|
+
</svg>
|
|
45
|
+
</span>
|
|
46
|
+
</button>
|
|
47
|
+
<button class="switch-icon switch-icon-fade" data-bs-toggle="switch-icon">
|
|
48
|
+
<span class="switch-icon-a text-secondary">
|
|
49
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
50
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
51
|
+
<path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
|
|
52
|
+
</svg>
|
|
53
|
+
</span>
|
|
54
|
+
<span class="switch-icon-b text-red">
|
|
55
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
56
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
57
|
+
<path d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z" stroke-width="0" fill="currentColor"></path>
|
|
58
|
+
</svg>
|
|
59
|
+
</span>
|
|
60
|
+
</button>
|
|
61
|
+
<button class="switch-icon switch-icon-scale" data-bs-toggle="switch-icon">
|
|
62
|
+
<span class="switch-icon-a text-secondary">
|
|
63
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
64
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
65
|
+
<path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path>
|
|
66
|
+
</svg>
|
|
67
|
+
</span>
|
|
68
|
+
<span class="switch-icon-b text-yellow">
|
|
69
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
70
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
71
|
+
<path d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z" stroke-width="0" fill="currentColor"></path>
|
|
72
|
+
</svg>
|
|
73
|
+
</span>
|
|
74
|
+
</button>
|
|
75
|
+
<button class="switch-icon switch-icon-flip" data-bs-toggle="switch-icon">
|
|
76
|
+
<span class="switch-icon-a text-secondary">
|
|
77
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-thumb-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
78
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
79
|
+
<path d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3"></path>
|
|
80
|
+
</svg>
|
|
81
|
+
</span>
|
|
82
|
+
<span class="switch-icon-b text-facebook">
|
|
83
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-thumb-up-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
84
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
85
|
+
<path d="M13 3a3 3 0 0 1 2.995 2.824l.005 .176v4h2a3 3 0 0 1 2.98 2.65l.015 .174l.005 .176l-.02 .196l-1.006 5.032c-.381 1.626 -1.502 2.796 -2.81 2.78l-.164 -.008h-8a1 1 0 0 1 -.993 -.883l-.007 -.117l.001 -9.536a1 1 0 0 1 .5 -.865a2.998 2.998 0 0 0 1.492 -2.397l.007 -.202v-1a3 3 0 0 1 3 -3z" stroke-width="0" fill="currentColor"></path>
|
|
86
|
+
<path d="M5 10a1 1 0 0 1 .993 .883l.007 .117v9a1 1 0 0 1 -.883 .993l-.117 .007h-1a2 2 0 0 1 -1.995 -1.85l-.005 -.15v-7a2 2 0 0 1 1.85 -1.995l.15 -.005h1z" stroke-width="0" fill="currentColor"></path>
|
|
87
|
+
</svg>
|
|
88
|
+
</span>
|
|
89
|
+
</button>
|
|
90
|
+
<button class="switch-icon switch-icon-slide-up" data-bs-toggle="switch-icon">
|
|
91
|
+
<span class="switch-icon-a text-secondary">
|
|
92
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
93
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
94
|
+
<path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
|
|
95
|
+
</svg>
|
|
96
|
+
</span>
|
|
97
|
+
<span class="switch-icon-b text-twitter">
|
|
98
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
99
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
100
|
+
<path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
|
|
101
|
+
</svg>
|
|
102
|
+
</span>
|
|
103
|
+
</button>
|
|
104
|
+
<button class="switch-icon switch-icon-slide-left" data-bs-toggle="switch-icon">
|
|
105
|
+
<span class="switch-icon-a text-secondary">
|
|
106
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
107
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
108
|
+
<path d="M5 12l5 5l10 -10" />
|
|
109
|
+
</svg>
|
|
110
|
+
</span>
|
|
111
|
+
<span class="switch-icon-b text-red">
|
|
112
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
113
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
114
|
+
<line x1="18" y1="6" x2="6" y2="18" />
|
|
115
|
+
<line x1="6" y1="6" x2="18" y2="18" />
|
|
116
|
+
</svg>
|
|
117
|
+
</span>
|
|
118
|
+
</button>
|
|
119
|
+
<button class="switch-icon switch-icon-slide-down" data-bs-toggle="switch-icon">
|
|
120
|
+
<span class="switch-icon-a text-secondary">
|
|
121
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
122
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
123
|
+
<line x1="12" y1="5" x2="12" y2="19" />
|
|
124
|
+
<line x1="18" y1="13" x2="12" y2="19" />
|
|
125
|
+
<line x1="6" y1="13" x2="12" y2="19" />
|
|
126
|
+
</svg>
|
|
127
|
+
</span>
|
|
128
|
+
<span class="switch-icon-b text-secondary">
|
|
129
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
130
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
131
|
+
<line x1="12" y1="5" x2="12" y2="19" />
|
|
132
|
+
<line x1="18" y1="11" x2="12" y2="5" />
|
|
133
|
+
<line x1="6" y1="11" x2="12" y2="5" />
|
|
134
|
+
</svg>
|
|
135
|
+
</span>
|
|
136
|
+
</button>
|
|
137
|
+
<button class="switch-icon switch-icon-slide-right" data-bs-toggle="switch-icon">
|
|
138
|
+
<span class="switch-icon-a text-secondary">
|
|
139
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
140
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
141
|
+
<circle cx="7" cy="17" r="2" />
|
|
142
|
+
<circle cx="17" cy="17" r="2" />
|
|
143
|
+
<path d="M5 17h-2v-6l2 -5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6 -6h15m-6 0v-5" />
|
|
144
|
+
</svg>
|
|
145
|
+
</span>
|
|
146
|
+
<span class="switch-icon-b text-secondary">
|
|
147
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
148
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
149
|
+
<circle cx="18" cy="17" r="2" />
|
|
150
|
+
<circle cx="6" cy="17" r="2" />
|
|
151
|
+
<path d="M8 17h5a6 6 0 0 1 5 -5v-5a2 2 0 0 0 -2 -2h-1" />
|
|
152
|
+
</svg>
|
|
153
|
+
</span>
|
|
154
|
+
</button>
|
|
155
|
+
```
|