Version 2.3
Version 2.3 includes a long awaited dark theme, library updates, bunch of improvements and a couple of components that have been removed due to various reasons. This update is the last one in 2.* series, next will be 3.0 that will include quite a lot of new app pages and general design update. Don't worry, without major changes for fellow users, I'll make sure upgrade process will be as simple as possible. And Bootstrap 3 version will be finally removed.
// # List of new things
// ------------------------------
[new] Dark theme
[new] SweetAlert toasts
[new] selection.json file for Icomoon icon set (to edit current set and generate new font)
// # List of updates
// ------------------------------
[updated] Select2 - select2.min.js - to 4.0.10
[updated] Form validation - validate.min.js - to 1.19.1
[updated] Fullcalendar - fullcalendar.min.js - to 4.3.1
[updated] File input - fileinput.min.js - to 5.0.6
[updated] Dropzone - dropzone.min.js - to 5.5.0
[updated] C3.js - c3.min.js - to 0.4.22
[updated] Footable - footable.min.js - to 3.1.6
[updated] Trumbowyg editor - trumbowyg.min.js and related - to 2.20.0
[updated] Summernote - summernote.min.js - to 0.8.12
[updated] Sweet Alert - sweet_alert.min.js - to 8.16.0
[updated] NoUI slider - nouislider.min.js - to 14.0.2
[updated] CKEditor - ckeditor.js - to 4.12.1
[updated] i18next - i18next.min.js and related - to 19.0.0
[updated] Moment.js - moment.min.js - to 2.24.0
[updated] gulpfile.js and package.json - updated dependencies to support latest version gulp version
// # List of fixes
// ------------------------------
[fixed] Scrollbars are always visible in sidebar
[fixed] Datatables - Copy dialog styling is missing
[fixed] Remove $table-dark-color duplicate
[fixed] Nav links show dotted borders in FF
[fixed] Summernote - sticky toolbar is hidden
[fixed] PNotify - bottom stacks are broken on mobile
[fixed] Update bootstrap.bundle.min.js to latest
[fixed] Dropdown items have smaller height in icons list
[fixed] Custom select has wrong right padding
[fixed] Fixed ECharts resizing bug if charts are loaded from multiple JS files
[fixed] Custom controls have extra shadow on focus
[fixed] Content sidebar overlaps main sidebar on mobile
[fixed] File input - xixed wrong vertical alignment in file selector
[fixed] jQuery UI - fixed border radius in combo autocomplete
[fixed] Fixed double background color in Inbox toolbars
[fixed] Vertical lines are always centered in timelines
[fixed] Mega menu dropdown positioning in RTL layout
[fixed] Summernote - image editor styling is broken
[fixed] RTL - mega menu with table displayed incorrectly
// # List of improvements
// ------------------------------
[improved] Added support for custom CKEditor themes and setup SCSS compilation (including new gulp task)
[improved] All chart configurations are now moved to separate files
[improved] Refactored SCSS files (replaced hard coded values with variables and cleaned up the code)
[improved] Improved custom controls styling
[improved] Google charts styling
[improved] Improved D3.js charts styling config in JS and SCSS
[improved] Replaced jQuery code with vanilla JS in chart configs
[improved] Folder structure in global assets
[improved] Dashboard JS configs
[improved] jQuery UI Datepicker - improved font styles in month and year selects
[improved] Improved toast component styling
[improved] Bunch of RTL improvements
[improved] Documentation
// # List of removed things
// ------------------------------
[removed] Dimple charts - outdated and not maintained anymore
[removed] Handsontable - the team merged free and premium versions and latest releases require license for commercial projects issued per developer. Latest free version is full of bugs and not maintained anymore.
SCSS files to update
This section displays a list of updated SCSS files. Includes file name, path to this file and general description of changes. All list items are grouped in categories. This information allows you to quickly find and replace necessary files. Please keep your copies of SCSS files always up-to-date to avoid upgrading issues.
File | Location | Description | |
---|---|---|---|
Updated core files | |||
_variables-core.scss |
/scss/layouts/[layout]/[theme]/variables/ |
Pagination variables for disabled state; Add !default to $input-dark-* styles in core variables in default theme; changed active and hover background color for dark navbar. List of variables that have been updated:
$custom-control-indicator-bg $custom-control-indicator-border-color $custom-control-indicator-border-width $custom-control-indicator-disabled-bg $custom-control-indicator-checked-color $custom-control-indicator-checked-bg $custom-control-indicator-checked-disabled-bg $custom-control-indicator-checked-border-color $custom-control-indicator-focus-border-color $custom-control-indicator-active-color $custom-control-indicator-active-bg $custom-control-indicator-active-border-color $custom-checkbox-indicator-indeterminate-bg $custom-checkbox-indicator-indeterminate-border-color $custom-select-indicator-padding (fixes bug) $custom-select-indicator-color $nav-link-padding-y $navbar-dark-hover-bg $pagination-disabled-color $pagination-disabled-bg $pagination-disabled-border-color $toast-color $toast-background-color $toast-border-color $toast-header-color $toast-header-background-color $toast-header-border-color |
|
_variables-custom.scss |
/scss/layouts/[layout]/[theme]/variables/ |
Changed active and hover background color for dark sidebar. List of variables that have been updated:
$navigation-dark-hover-bg $navigation-dark-sub-active-bgNew variables that have been added to all themes: $chart-text-color $chart-line-color $chart-axis-line-color $chart-axis-text-color $chart-grid-color-primary $chart-grid-color-secondary $chart-empty-bg $c3-region-bg $c3-region-opacity $c3-tooltip-border-color $map-btn-zoom-bg $map-btn-zoom-color $map-btn-zoom-hover-bg $map-btn-zoom-hover-color $drag-placeholder-bg - replace in _interactions.scss and _datatable-columns-reorder.scss $summernote-toolbar-bg $cke-toolbar-bg $cke-float-toolbar-bg $cke-resizer-size $swal2-toast-icon-size $swal2-toast-icon-border-width $swal2-toast-icon-spacer $swal2-steps-distance $swal2-steps-line-size $swal2-step-padding-y $swal2-step-padding-x $swal2-step-background $swal2-step-color $swal2-active-step-background $swal2-active-step-color $ft-inner-list-bg $slider-pips-spacer-x |
|
Updated components | |||
_tables.scss |
/scss/themes/[theme]/bootstrap_limitless/ | Change border-colour to border-bottom-color in .table-dark class |
|
_type.scss |
/scss/themes/[theme]/bootstrap_limitless/ | Changes in .list-icons-item class |
|
_nav.scss |
/scss/themes/[theme]/bootstrap_limitless/ | Removed focus from .nav-link class and added a bit of code that removes dotted border in Firefox |
|
_custom-forms.scss |
/scss/themes/[theme]/bootstrap_limitless/ | Disabled state for checkboxes and radios (.custom-control-input ); in material theme remove shadow from custom controls on focus |
|
_card.scss |
/scss/themes/[theme]/bootstrap_limitless/ | Replaced icons with variables in card actions, .card-group-control .card-title > a:before (collapse/expand icons) |
|
_buttons.scss |
/scss/themes/[theme]/bootstrap_limitless/ | Added a bit of code that removes dotted border in Firefox | |
_toasts.scss |
/scss/themes/[theme]/bootstrap_limitless/ | Added styles for .close button |
|
_datatables.scss |
/scss/themes/[theme]/components/tables/datatables/ | Disabled state in pagination. | |
_datatable-rows-reorder.scss |
/scss/themes/[theme]/components/tables/datatables/ | Replaced variables for border color (.dt-rowReorder-float and .dt-rowReorder-moving ) |
|
_datatable-column-reorder.scss |
/scss/themes/[theme]/components/tables/datatables/ | Replaced fixed values in background color (in .DTCR_clonedTable ) in placeholder with a new variable |
|
_datatable-keytable.scss |
/scss/themes/[theme]/components/tables/datatables/ | Removed focus background colors and replaced custom color variables with theme colors | |
_datatable-scroller.scss |
/scss/themes/[theme]/components/tables/datatables/ | Replaced $white with $card-bg in .dataTables_scrollHead and .dataTables_scrollFoot ; removed background-color from .DTS_Loading class |
|
_datatable-autofill.scss |
/scss/themes/[theme]/components/tables/datatables/ | Replaced $white with $card-bg variable in .dt-autofill-select |
|
_footable.scss |
/scss/themes/[theme]/components/tables/ | Refactored SCSS code | |
_handsontable.scss |
/scss/themes/[theme]/components/tables/ | Removed all SCSS files | |
_uniform.scss |
/scss/themes/[theme]/components/forms/ | Changed text color in .filename in uniform file input to $input-color |
|
_multiselect.scss |
/scss/themes/[theme]/components/forms/ | Added color: $input-disabled-color; opacity: 1; to .multiselect &.btn-light &.disabled - to make sure it appears like input field, not button |
|
_wizard.scss |
/scss/themes/[theme]/components/forms/ | Removed background-color: $wizard-step-number-active-color; from .wizard>.steps>ul>li.current .number |
|
_tokenfield.scss |
/scss/themes/[theme]/components/forms/ | Updated .token-input styling |
|
_tags-input.scss |
/scss/themes/[theme]/components/forms/ | Updated .bootstrap-tagsinput input styling |
|
_select2.scss |
/scss/themes/[theme]/components/forms/ | Add placeholder styles for .select2-search--inline .select2-search__field class in multiple select2 selects; add background-color: $input-bg; and color: $input-color; to .select2-search--dropdown .select2-search__field |
|
_alpaca.scss |
/scss/themes/[theme]/components/forms/ | Change .ace_editor border to card border styles |
|
_summernote.scss |
/scss/themes/[theme]/components/forms/editors/ | New icons, fixed image editor and borders, fixed z-index issue in floating toolbar | |
_trumbowyg.scss |
/scss/themes/[theme]/components/forms/editors/ | Add color: $trumbowyg-toolbar-color; to trumbowyg buttons, replace $gray-* colors with $trumbowyg-toolbar-color , add color: $body-color; to |
|
_widgets.scss |
/scss/themes/[theme]/components/jquery_ui/ | Improved font styles in month and year selects in datepicker (replaced variables to match input styles); fixed border radius in combo autocomplete (added styles for .ui-button inside .input-group-append and .input-group-prepend ); removed cursor: pointer; from .ui-selectmenu-button so that in disabled state cursor is reset to default; .ui-selectmenu-button:after - fixed wrong caret position in case when select has only icon and no text; fixed wrong button styling in combo select (.ui-controlgroup classes); fixed .ui-button-link styles |
|
_date.scss |
/scss/themes/[theme]/components/pickers/pickadate | Fixed footer buttons default styling (added fallback) | |
_time.scss |
/scss/themes/[theme]/components/pickers/pickadate | Fixed footer buttons default styling (added fallback) | |
_spectrum.scss |
/scss/themes/[theme]/components/pickers/ | Updated styles for .sp-replacer (replaced variables to match light button styles) |
|
_pnotify.scss |
/scss/themes/[theme]/components/notifications/ | Removed all styles for mobile | |
_sweet-alerts.scss |
/scss/themes/[theme]/components/notifications/ | Added toasts and refactored SCSS code | |
_plupload.scss |
/scss/themes/[theme]/components/forms/uploaders/ | Refactored SCSS code | |
_file-input.scss |
/scss/themes/[theme]/components/forms/uploaders/ | Fixed wrong vertical alignment in file selector (added .file-caption styles); added fallback text colors to file name and action buttons |
|
_fullcalendar.scss |
/scss/themes/[theme]/components/misc/ | Removed .fc-events-container class |
|
_noui-slider.scss |
/scss/themes/[theme]/components/sliders/ | Changes according to the code changes in the latest version | |
_c3.scss |
/scss/shared/charts/ | Cleaned up classes and added variables | |
_c3.scss |
/scss/shared/charts/ | Cleaned up classes and added variables | |
_jvectormap.scss |
/scss/shared/maps/ | Added variables for zoom buttons | |
_timelines.scss |
/scss/shared/pages/ | Fixed vertical line alignment in left and right timelines, adjusted dots position |
JS files to update
These are all JS files that have been changed during update process. It can be a library, plugin or a sample JS file with charts or specific page configuration - everything matters. Also includes file name, path to the file and brief description about changes made. Since JS files are responsible for template's functionality, it is required to keep them up-to-date.
File | Location | Description | |
---|---|---|---|
Updated core files | |||
bootstrap.bundle.min.js |
/js/main/ | Upgraded Bootstrap to the latest version | |
Updated demo pages | |||
extra_jgrowl_noty.js |
/js/demo_pages/ | Changed .text-teal-900 to .text-teal-800 class |
|
mail_list.js |
/js/demo_pages/ | Replaced .alpha-success with .table-secondary class |
|
gallery_library.js |
/js/demo_pages/ | Replaced success class with active class for selected rows | |
uploader_bootstrap.js |
/js/demo_pages/ | Added removeClass: ‘’, |
|
components_pagination.js |
/js/demo_pages/ | Fixed arrows in RTL version | |
dashboard.js |
/js/demo_pages/ | Removed all chart configs | |
invoice_template.js |
/js/demo_pages/ | Renamed to invoice_template_default.js |
|
editor_ckeditor.js |
/js/demo_pages/ | Renamed to editor_ckeditor_default.js and updated the code |
|
form_checkboxes_radios.js |
/js/demo_pages/ | Contextual colors in uniform inputs text color adjustment to match border color | |
All chart JS configs |
/js/demo_charts/ | All chart configs have been updated (new colors, new styling, replaced jQuery with JS etc) | |
Updated components | |||
sweet_alert.min.js |
/js/plugins/notifications/ | Sweet Alert notifications library | |
select2.min.js |
/js/plugins/forms/selects/ | Select2 selects | |
validate.min.js and related |
/js/plugins/forms/validation/ | Form validation | |
fullcalendar files |
/js/plugins/ui/fullcalendar/ | Fullcalendar files - full override | |
fileinput.min.js and related |
/js/plugins/uploaders/fileinput/ | Bootstrap file input and plugins | |
dropzone.min.js |
/js/plugins/uploaders/ | Dropzone file uploader | |
c3.min.js |
/js/plugins/visualization/c3/ | C3.js charting library | |
footable.min.js |
/js/plugins/tables/footable/ | Footable table extension | |
trumbowyg.min.js and related |
/js/plugins/editors/ | Trumbowyg text editor and plugins | |
summernote.min.js |
/js/plugins/editors/ | Summernote text editor | |
ckeditor.js and related |
/js/plugins/editors/ckeditor/ | CKEditor text editor | |
nouislider.min.js |
/js/plugins/sliders/ | NoUI slider library | |
i18next.min.js and related |
/js/plugins/internationalization/ | Localization library | |
moment.min.js and related |
/js/plugins/ui/moment/ | Moment.js library | |
gulpfile.js package.json |
/Template/ | Gulp tasks and dependencies | |
New JS files | |||
invoice_template_dark.js |
/js/demo_pages/ | Invoice template with dark CKEditor theme | |
invoice_template_material.js |
/js/demo_pages/ | Invoice template with material CKEditor theme | |
editor_ckeditor_dark.js |
/js/demo_pages/ | Dark CKEditor theme examples | |
editor_ckeditor_material.js |
/js/demo_pages/ | Material CKEditor theme examples | |
ECharts files |
/js/demo_charts/echarts/ | Theme specific ECharts demos | |
Page chart files |
/js/demo_charts/pages/ | Page specific chart demos |
HTML files to update
This section displays a list of updated HTML files. Includes file name, layout, theme and brief description of changes. This information allows you to quickly find and replace necessary files. Please keep your copies of HTML files always up-to-date to avoid upgrading issues.
File | Layout | Theme | Description |
---|---|---|---|
table_responsive.html |
1 | All | Updated current and added new examples |
components_alerts.html |
1 | All | Added toast component examples |
form_select2.html |
1 | All | Custom border and text color example - changed text color class to *-400 |
form_inputs_group.html |
1 | All | Validation states example - changed text color class to *-400 |
form_inputs.html |
1 | All | Validation color classes |
content_typography.html |
1 | All | Added .align-top to labels and badges in headings |
form_tag_inputs.html |
1 | All | Validation colors |
form_wizard.html |
1 | All | Removed .bg-white class |
components_modal.html |
1 | All | Replaced custom header styles with custom bg styles |
components_dropdowns.html |
1 | All | Dropdown with custom border color |
components_tabs.html |
1 | All | Add .justify-content-md-between to vertical tabs in right alignment, remove .bg-light from solid tabs |
components_pills.html |
1 | All | Vertical pills left alignment - removed .justify-content-lg-between |
components_buttons.html |
1 | All/Dark | Add proper footer (in all layouts), remove data-spinner-color="#333" from ladder buttons (in dark only) |
components_alerts.html |
1 | All | Add .text-teal-800 to alerts with custom alpha bg, remove bordered alerts example |
components_media.html |
1 | All | Bordered list headers - removed top borders from headers |
components_progress.html |
1 | Dark | Changed .bg-dark to .bg-light , added .bg-dark to .pace-demo container |
components_breadcrumbs.html |
1 | Dark | Breadcrumb line classes |
content_page_header.html |
1 | Dark | Page header examples |
content_cards.html |
1 | Dark | Add .text-muted to card header with subtitle examples, replace white card header example with transparent page header |
content_cards_header.html |
1 | Dark | Adjust markup |
content_cards_footer.html |
1 | All | Adjust markup |
extra_session_timeout.html |
1 | All | Added .alert-dismissible class to alert |
extra_session_idle.html |
1 | All | Added .alert-dismissible class to alert |
editor_summernote.html |
1 | All | Updated table styles in demo editors |
d3_lines_advanced.html |
1 | All | Replaced uniform checkboxes with custom bootstrap controls |
Dimple charts HTML files |
1 | All | Removed |
Handsontable HTML files |
1 | All | Removed |
Version 2.2
Version 2.2 is a quick update that includes mostly bug fixes reported by active users and updates of all components to the most recent version. Initial plan was to deliver a big update with lots of new things, but creating of those things take time and users asked to split it up into 2 separate updates. This is the first part. Although it's the first part, it includes some critical changes in SCSS files related to icon sets. Follow the list of changed files for more info.
// # List of updates
// ------------------------------
[updated] Bootstrap to 4.3.1
[updated] NoUI slider (nouislider.min.js) - to 13.1.3
[updated] ION range slider (ion_rangeslider.min.js) - to 2.3.0
[updated] ECharts (charts.min.js) - to 4.1.0
[updated] Image cropper (cropper.min.js) - to 4.0.0
[updated] Bootstrap file input (fileinput.min.js and related) - to 4.5.2
[updated] Fullcalendar files - to 4.0.1
[updated] Trumbowyg editor (trumbowyg.min.js and related) - to 2.14.0
[updated] SweetAlert2 (sweet_alert.min.js) - to 7.29.1
[updated] Font Awesome - to 5.5.0
[updated] AnimateCSS - to 3.7.0
[updated] Bootstrap file input (fileinput) - to 4.5.2
// # List of fixes
// ------------------------------
[fixed] Form wizard - Current/completed step icon in IE 11
[fixed] IE placeholder broken
[fixed] Inline form in jQuery UI dialog is broken
[fixed] SweetAlert - multiple issues popped up during library upgrade
[fixed] Trumbowyg - checkboxes in modals are misaligned
[fixed] IE11 - SweetAlert2 - Promise library is required
[fixed] IE11 - layouts 2 and 4 have extra scrollbar in content area
[fixed] IE11 - Datatable footer has extra whitespace
[fixed] Boxed layout - Timelines - vertical lines are not visible
[fixed] Wrong path to panel_bg.png file
[fixed] RTL layout - wrong icons in pagination
[fixed] RTL layout - newer Fullcalendar version breaks the layout
[fixed] NoUI slider pips styling
[fixed] Pickadate picker width
[fixed] ECharts library throws JS errors if DOM element doesn't exist
[fixed] Fullcalendar throws JS errors if DOM element doesn't exist
[fixed] AJAX and Dynamic Queue examples of Sweet Alert
[fixed] BlockUI in sidebar doesn't show up
// # List of improvements
// ------------------------------
[improved] Converted all icon sets to SCSS
[improved] Users now can replace default icon sets in SCSS
[improved] Replaced all hardcoded icon codes with a set of variables
[improved] Refactored bunch of JS and SCSS files
[improved] Removed unused mixin overrides
[improved] Now all icons include unicode
SCSS files to update
This section displays a list of updated SCSS files. Includes file name, path to this file and general description of changes. All list items are grouped in categories. This information allows you to quickly find and replace necessary files. Please keep your copies of SCSS files always up-to-date to avoid upgrading issues.
File | Location | Description | |
---|---|---|---|
Updated core files | |||
_sidebar.scss |
/scss/layouts/[layout]/[theme]/layout/ | Replaced icon code with variables in .nav-item-submenu > .nav-link:after class |
|
_bootstrap.scss |
/scss/layouts/[layout]/[theme]/compile/ | Added paths to toasts and spinners components | |
_bootstrap-limitless.scss |
/scss/layouts/[layout]/[theme]/compile/ | Added paths to toasts component | |
_variables-core.scss |
/scss/layouts/[layout]/[theme]/variables/ |
Lots of changes here. In all layouts new variables according to BS version: $table-border-color ; $table-bg ; $custom-select-feedback-icon-padding-right ; $custom-select-feedback-icon-size ; $custom-select-font-size-sm ; $custom-select-font-size-lg ; $form-feedback-icon-invalid ; move dropdown styles below navbar; $card-cap-color
|
|
_variables-custom.scss |
/scss/layouts/[layout]/[theme]/variables/ | Icon variables. All start with $icon-* prefix. And updated $pickadate-max-width variable |
|
Updated components | |||
_tables.scss |
/scss/themes/[theme]/bootstrap_limitless/ | Removed table backgrounds styles | |
_type.scss |
/scss/themes/[theme]/bootstrap_limitless/ | Replaced dot icon in .list-inline-dotted |
|
_navbar.scss |
/scss/themes/[theme]/bootstrap_limitless/ | Replaced icon with variable in .dropdown-submenu .dropdown-toggle:after (down arrow for mobile) |
|
_dropdown.scss |
/scss/themes/[theme]/bootstrap_limitless/ | Replaced icons with variables in .dropdown-menu > .dropdown-submenu > .dropdown-item:after (direction arrows for submenu), .dropdown-menu > .dropdown-submenu .dropdown-toggle:after in media query (down arrow for menu item on mobiles). Removed custom vertical margin from .dropdown-divider , use variable instead |
|
_card.scss |
/scss/themes/[theme]/bootstrap_limitless/ | Replaced icons with variables in card actions, .card-group-control .card-title > a:before (collapse/expand icons) |
|
_badge.scss |
/scss/themes/[theme]/bootstrap_limitless/ | Removed transitions since BS added variable for them | |
_close.scss |
/scss/themes/[theme]/bootstrap_limitless/ | Removed cursor: pointer; (according to BS changes), improved hover and focus states | |
_button-group.scss |
/scss/themes/[theme]/bootstrap_limitless/ | Margin for buttons with custom border size | |
_caret.scss |
/scss/themes/[theme]/bootstrap_limitless/ | Added 2 variables for vertical align and left spacing (according to BS changes) | |
_list-group |
/scss/themes/[theme]/bootstrap_limitless/ | Added styles for horizontal list groups | |
_toasts.scss |
/scss/themes/[theme]/bootstrap_limitless/ | Added new file and updated header styles | |
_alert.scss |
/scss/themes/[theme]/bootstrap_limitless/ | Replaced icon codes with variables in alert[class*=alert-styled-] , .alert.alert-styled-custom classes (alert types icons) |
|
_caret.scss |
/scss/themes/[theme]/bootstrap_limitless/mixins/ | Replaced icon codes with variables in directional arrow classes | |
_badge.scss |
/scss/themes/[theme]/bootstrap_limitless/mixins/ | Updated hover/focus states | |
_forms.scss |
/scss/themes/[theme]/bootstrap_limitless/mixins/ | Removed | |
_ll-mixins.scss |
/scss/shared/utils/ | Added size() mixin. I find it very helpful, but it was deprecated. Moved to custom mixins. |
|
_datatables.scss |
/scss/themes/[theme]/components/tables/datatables/ | Replaced icon codes with variables in .dataTables_filter class (search icon in filter input), .sorting related classes |
|
_datatable-select.scss |
/scss/themes/[theme]/components/tables/datatables/ | Replaced icon codes with variables in .select-checkbox class (checkbox tick) |
|
_datatable-responsive.scss |
/scss/themes/[theme]/components/tables/datatables/ | Replaced icon codes with variables in td.control , th.control icons (table row expand and collapse) |
|
_datatable-autofill.scss |
/scss/themes/[theme]/components/tables/datatables/ | Replaced icon codes with variables in .dt-autofill-button .btn:after class (confirm button checkmark) |
|
_footable.scss |
/scss/themes/[theme]/components/tables/ | Replaced icon codes with variables in .footable-toggle class (table row expand and collapse) |
|
_handsontable.scss |
/scss/themes/[theme]/components/tables/ | Replaced icon codes with variables in .columnSorting (sorting icons), .htSubmenu (submenu arrow), .changeTypeMenu li.active:after (checkbox tick), .htContextMenu td div span.selected:after (checkbox tick), .pika-prev:after/.pika-next:after (prev/next buttons icon) |
|
_uniform.scss |
/scss/themes/[theme]/components/forms/ | Replaced icon codes with variables in .uniform-checker:after class (checkbox tick), .uniform-select span:after (select down arrow) |
|
_multiselect.scss |
/scss/themes/[theme]/components/forms/ | Replaced icon codes with variables in .multiselect-item input[type=checkbox] class (checkbox tick) |
|
_wizard.scss |
/scss/themes/[theme]/components/forms/ | Replaced icon codes with variables in .wizard > .steps > ul > li.current .number:after (current step icon), .wizard > .steps > ul > done .number:after (completed step icon) |
|
_validation.scss |
/scss/themes/[theme]/components/forms/ | Replaced icon codes with variables in .validation-invalid-label:before and .validation-valid-label:before (error/success icons) |
|
_tokenfield.scss |
/scss/themes/[theme]/components/forms/ | Replaced icon codes with variables in .tokenfield .token > .close:after (close button icon) |
|
_tags-input.scss |
/scss/themes/[theme]/components/forms/ | Replaced icon codes with variables in .bootstrap-tagsinput .tag [data-role="remove"]:after (close button icon) |
|
_select2.scss |
/scss/themes/[theme]/components/forms/ | Replaced icon codes with variables in .select2-selection__clear:after (delete cross icon), .select2-selection__arrow:after (down menu arrow), .select2-search--dropdown:after (search icon) |
|
_dual-listbox.scss |
/scss/themes/[theme]/components/forms/ | Replaced icon codes with variables in .sidebar .bootstrap-duallistbox-container .box1:after (arrow between boxes in sidebar) |
|
_alpaca.scss |
/scss/themes/[theme]/components/forms/ | Replaced icon codes with variables in .alpaca-field .glyphicon-exclamation-sign:before (validation error icon) |
|
_slinky.scss |
/scss/themes/[theme]/components/forms/ | Replaced icon codes with variables in .next:after , .back:after classes |
|
_widgets.scss |
/scss/themes/[theme]/components/forms/editors/ | Some changes in button-size mixin |
|
_base.scss |
/scss/themes/[theme]/components/pickers/pickadate | Replaced icon codes with variables in .picker__nav--prev:before , .picker__nav—next:before (prev/next buttons) |
|
_daterange.scss |
/scss/themes/[theme]/components/pickers/ | Replaced icon codes with variables in .daterange-custom-display:after > (menu down arrow). And fixed bug in input with icons (wrong icon position) |
|
_anytime.scss |
/scss/themes/[theme]/components/pickers/ | Replaced ico codes with variables in .AnyTime-x-btn:after (close icon) |
|
_spectrum.scss |
/scss/themes/[theme]/components/pickers/ | Replaced icon codes with variables in .sp-clear-display:after (clear color selection), .sp-dd:after (menu down arrow), .sp-thumb-inner:after (checkbox tick) |
|
_pnotify.scss |
/scss/themes/[theme]/components/notifications/ | Replaced icon cides with variables in .brighttheme-icon-closer , .brighttheme-icon-sticker , .brighttheme-icon-stuck classes (notification controls) |
|
_sweet-alerts.scss |
/scss/themes/[theme]/components/notifications/ | Replaced icon codes with variables in .swal2-loading .swal2-confirm:before (loading spinner icon), .swal2-validation-message:before (validation error icon) |
|
_plupload.scss |
/scss/themes/[theme]/components/forms/uploaders/ | Replaced icon codes with variables in .plupload_header:after (uploader placeholder icon), li.plupload_droptext:before (uploader placeholder icon), .plupload_file_action:after (actions column placeholder), .plupload_delete a:after (delete button icon), .plupload_failed a:after and .plupload_done a:after (error/success icons) |
|
_file-input.scss |
/scss/themes/[theme]/components/forms/uploaders/ | Replaced icon codes with variables in .file-preview-other:after (unsupported file type placeholder), .file-thumb-loading:after and .file-uploading:after (loading spinner) |
|
_dropzone.scss |
/scss/themes/[theme]/components/forms/uploaders/ | Replaced icon codes with variables in .dz-default.dz-message:before (uploader placeholder), .dz-error-mark:after and .dz-success-mark:after (error/success icons) |
|
_fancytree.scss |
/scss/themes/[theme]/components/misc/ | Replaced icon codes with variables in .fancytree-checkbox class (checkbox tick) |
|
_fullcalendar.scss |
/scss/themes/[theme]/components/misc/ | Replaced icon codes with variables in .fc-icon-left-single-arrow:after , .fc-icon-right-single-arrow:after (arrows in prev/next buttons), .fc-icon-x:after (close icon). And updated some class names according to changes in latest version. |
|
_fancytree.scss |
/scss/themes/[theme]/components/misc/ | Replaced icon codes with variables in .fancytree-expander classes (collapse/expand icons), .fancytree-statusnode-error .fancytree-icon:after (validation error), .fancytree-loading .fancytree-expander:after , .fancytree-statusnode-wait .fancytree-icon:after (checkmark icon), .fancytree-drag-helper-img (accept/reject validation icons), .fancytree-ico-* icons (file, expand, collapse, folder icons) |
|
_fancybox.scss |
/scss/themes/[theme]/components/misc/ | Replaced icon codes with variables in #fancybox-loading div:after (loading icon), .fancybox-close:after (close icon), .fancybox-prev and .fancybox-next icons (direction arrows) |
|
_widgets.scss |
/scss/themes/[theme]/components/jquery_ui/ | Replaced icon codes with variables in .ui-accordion-header-icon:before (collapse/expand accordion icons), .ui-autocomplete-processing:after (loading spinner), .ui-datepicker-prev and .ui-datepicker-next (direction arrows), .ui-dialog-titlebar-close:after (close icon), .ui-menu-item-wrapper > .ui-menu-icon:after (submenu arrow), .ui-selectmenu-button:after (select menu direction al arrow), .ui-spinner-up:after and .ui-spinner-down:after (spinner +/- icons) |
|
_ion-range-slider.scss |
/scss/themes/[theme]/components/sliders/ | Renamed .irs-slider to .irs-handle |
JS files to update
These are all JS files that have been changed during update process. It can be a library, plugin or a sample JS file with charts or specific page configuration - everything matters. Also includes file name, path to the file and brief description about changes made. Since JS files are responsible for template's functionality, it is required to keep them up-to-date.
File | Location | Description | |
---|---|---|---|
Updated core files | |||
bootstrap.bundle.min.js |
/js/main/ | Upgraded Bootstrap to the latest version | |
Updated demo pages | |||
extra_sliders_noui.js |
/js/demo_pages/ | Filtered pips example | |
extension_image_cropper.js |
/js/demo_pages/ | Demo config | |
extension_blockui.js |
/js/demo_pages/ | Demo config (sidebar block) | |
Full calendar examples |
/js/demo_pages/ | fullcalendar_basic.js , fullcalendar_styling.js , fullcalendar_formats.js , fullcalendar_advanced.js and related HTML pages |
|
learning_detailed.js |
/js/demo_pages/ | Fullcalendar config | |
timelines.js |
/js/demo_pages/ | Fullcalendar config | |
user_pages_profile.js user_pages_profile_tabbed.js |
/js/demo_pages/ | Fullcalendar config | |
extra_sweetalert.js |
/js/demo_pages/ | AJAX and Dynamic Queue examples | |
Updated components | |||
sweet_alert.min.js |
/js/plugins/notifications/ | Sweet Alert notifications library | |
trumbowyg.min.js and related |
/js/plugins/editors/ | Trumbowyg text editor and plugins | |
fullcalendar files |
/js/plugins/ui/fullcalendar/ | Fullcalendar files - full override | |
nouislider.min.js |
/js/plugins/sliders/ | NoUI slider library | |
ion_rangeslider.min.js |
/js/plugins/sliders/ | ION rane slider library | |
echarts.min.js |
/js/plugins/visualization/echarts/ | ECharts library | |
cropper.min.js |
/js/plugins/media/ | Image cropper extension |
HTML files to update
This section displays a list of updated HTML files. Includes file name, layout, theme and brief description of changes. This information allows you to quickly find and replace necessary files. Please keep your copies of HTML files always up-to-date to avoid upgrading issues.
File | Layout | Theme | Description |
---|---|---|---|
editor_trumbowyg.html |
All | All | Minor changes |
*.html |
1 | All | Paths to fullcalendar files wherever used |
[RTL]*.html |
1 | All | Removed dir="rtl" wherever fullcalendar is used |
icons_fontawesome.html |
1 | All | Added icon codes |
components_alerts.html |
1 | All | Added toast examples |
Version 2.1
This version includes fixes for all bugs reported by fellow users - IE/Edge browsers issues, missing rules in various components and a bunch of improvements. This is the last update that is focused only on bug fixing, starting from the next one the main focus will be new layouts, themes and functionality. This means that migration from BS3 to BS4 is finally over.
// # List of updates
// ------------------------------
[updated] Bootstrap to 4.1.3
// # List of fixes
// ------------------------------
[fixed] IE11/Edge - userpic in navbar increases navbar height
[fixed] IE11/Edge - badges in navbar are misaligned
[fixed] IE11/Edge - sidebar content is hidden in fixed layout
[fixed] IE11/Edge - native scrollbar is visible in container with custom scrollbar
[fixed] Layouts 3/4/5 - Fixed sidebar styles still exist in _sidebar.scss
[fixed] Reversed rotation animation has incorrect animation name
[fixed] Pick-a-Date: Missing min-width CSS rule
[fixed] Pick-a-Date: Month/year drop-down
[fixed] Select2: in multiple select results text doesn't wrap
[fixed] Select2: custom light background applies incorrect shadow and placeholder color
[fixed] Replace input type="datetime" with input type="datetime-local"
[fixed] Pricing tables - text color in corner ribbon is incorrect
[fixed] RTL - Mail list page - dropdowns in mail selection appear behind sidebar
[fixed] RTL - In navbar button dropdowns don't support .dropdown-menu-right class
[fixed] Set of border utility classes mentioned in helpers has incorrect side names
[fixed] Documentation: Badge class still shows "badge-block" instead of "d-block"
// # List of improvements
// ------------------------------
[improved] Removed file extensions in components.scss
SCSS files to update
This section displays a list of updated SCSS files. Includes file name, path to this file and general description of changes. All list items are grouped in categories. This information allows you to quickly find and replace necessary files. Please keep your copies of SCSS files always up-to-date to avoid upgrading issues.
File | Location | Description | |
---|---|---|---|
Updated core files | |||
_sidebar.scss |
/scss/layouts/[layout]/[theme]/layout/ | In 3, 4, 5 layouts only - removed styles for .sidebar-fixed class; in 1 and 2 layouts made some changes in the same class |
|
components.scss |
/scss/layouts/[layout]/[theme]/compile/ | Removed file extensions | |
Updated components | |||
_base.scss |
/scss/themes/[theme]/components/pickers/pickadate/ | Added min-width to the picker (added new $pickadate-min-width variable), fixed year/month selects styling |
|
_select2.scss |
/scss/themes/[theme]/components/forms/ | Added new rules to .select2-selection__choice in multiple selection, fixed custom background classes selector in single select |
|
_perfect-scrollbar.scss |
/scss/themes/[theme]/components/ui/ | Added new rules to .ps class to fix IE/Edge bugs |
|
_helpers.scss |
/scss/shared/ | Fixed animation name in reversed rotation | |
_ecommerce.scss |
/scss/shared/pages/ | Removed background-colour and color properties from .ribbon class, removed related variables ($pricing-ribbon-bg, $pricing-ribbon-color) | |
_navbar.scss |
/scss/themes/[theme]/bootstrap_limitless/ | Added ignores to right aligned dropdowns for RTL layout, cleaned up .dropdown-user class |
JS files to update
These are all JS files that have been changed during update process. It can be a library, plugin or a sample JS file with charts or specific page configuration - everything matters. Also includes file name, path to the file and brief description about changes made. Since JS files are responsible for template's functionality, it is required to keep them up-to-date.
File | Location | Description | |
---|---|---|---|
Updated core files | |||
bootstrap.bundle.min.js |
/js/main/ | Upgraded Bootstrap to the latest version |
HTML files to update
This section displays a list of updated HTML files. Includes file name, layout, theme and brief description of changes. This information allows you to quickly find and replace necessary files. Please keep your copies of HTML files always up-to-date to avoid upgrading issues.
File | Layout | Theme | Description |
---|---|---|---|
components_badges.html |
1 | All | Replaced .badge-block with .d-block |
content_helpers.html |
1 | All | Replaced .text-size-[value] with .font-size-[value] , .spinner-inverse with .spinner-reverse , border side names in .border-[side]-0 class |
form_inputs.html |
1 | All | Replaced datetime input type with datetime-local |
mail_list.html mail_list_detached.html |
1 | All | Added .dropdown-menu-right to navbar dropdowns |
All |
All | All | All files where top navbar with badge and user image are used - make sure you added “height” property to the user image, this is important change since now image size is not controlled by CSS, because of IE/Edge issues |
Version 2.0.1
Quick update that includes bug fixes for version 2.0, the most important one is IE10/11 browser support - now all layouts work fine in IE10+. Here is a list of changes:
// # List of fixed
// ------------------------------
[fixed] Flexbox layout is broken in IE10 and IE11
[fixed] Right aligned custom checkers are misaligned
[fixed] Multiselect menu should have 100% width by default
[fixed] Sectioned sidebar with custom background color has wrong background in collapsed mode
SCSS files to update
This section displays a list of updated SCSS files. Includes file name, path to this file and general description of changes. All list items are grouped in categories. This information allows you to quickly find and replace necessary files. Please keep your copies of SCSS files always up-to-date to avoid upgrading issues.
File | Location | Description | |
---|---|---|---|
Updated core files | |||
_sidebar.scss |
/scss/layouts/[layout]/[theme]/layout/ | In 3, 4, 5 layouts only - updated .sidebar-xs styles |
|
_layout.scss |
/scss/layouts/[layout]/[theme]/layout/ | Updated styles for main containers | |
Updated components | |||
_multiselect.scss |
/scss/themes/[theme]/components/forms/ | Added width: 100%; to multiselect container |
HTML files to update
This section displays a list of updated HTML files. Includes file name, layout, theme and brief description of changes. This information allows you to quickly find and replace necessary files. Please keep your copies of HTML files always up-to-date to avoid upgrading issues.
File | Layout | Theme | Description |
---|---|---|---|
form_checkboxes_radios.html |
1 | All | Added .position-static to labels in right aligned custom checkers |
Version 2.0
Bootstrap 4 version has its own changelog, because 2 Bootstrap version are completely different. Major part of components have been customized in order to support BS4 and flexbox layout, so components from BS3 can be used in this version. Since all components are the same in all layouts, the template now supports 1 main layout and 4 child layouts - this means only 1st layout includes all components, child layouts include only layout-related files. This makes maintenance easy and fast. Main highlights:
- Adapted 3rd party components
- Latest versions of all main libraries
- Built with SCSS
- Improved gulp tasks
- Based on flexbox model
- Single set of assets for all layouts
- Moved to modular JS pattern
- All bugfixes and improvements from BS3 are included
- Updated all examples
- High attention to details
- Improved file structure
- Improved starter kit
- Improved vertical navigation
- Improved multi level navigation in navbar
- Mega menu has been extended
- Improved performance
- Removed old and unmaintained libraries
- Single SCSS configuration file with all components
- Improved theming support
- Simple style editing
- ... and much more