v2.4.9

• Update form controls readonly style.
  Since readonly is non-editable, must be able to select and the data will be send when form submitted.
  So, it should look like normal form controls but make it more noticable that it is read only by a little gray out the background color.
  Summary: remove not-allowed cursor, lighter gray background.
• Update input range disabled color.
• Fix missing variables.
• Fix alert dialog to listen enter key (close) properly.

v2.4.8

Update

• Update CSS & JS to support custom ticks for input range with datalist.

v2.4.7

New

• New custom input range with datalist.

Update

• Update CSS use pseudo-class instead of attribute selector. [disabled] replaced with :disabled.

v2.4.6

Update

• Update design for DataTables.js to supported version 2.
• Update <kbd> design.

v2.4.5

Fix

• Fix page options clear float cause blank space at top on some page design.

v2.4.4

New

• Add new class .rd-tabs-no-padding to tabs component.

v2.4.3

Fix

• Update dialog to listen events once.

v2.4.2

Fix

• Fix dialog didn't listen to close inside activate method.

v2.4.1

New

• Make dialog support HTML <dialog>.
• Add dialog JS method close().
• New! Page options.

Update

• Update to use :user-invalid for invalid form.
• Update accordion CSS for details to display the most same design as basic accordion.
• Update tooltips to listen dialog closed then hide all tooltips.
• Show alert dialog using text will be now escaped.
• Update accordion to use new JS event delegation.
• Update new JS event delegation in rundiz-template-admin.js file.
• Rename methods in rdta-tabs.js to be private methods.

v2.4.0

Fix

• Fix responsive table not restore on large screen after expanded.

Update

• Update accordion to support details tag.
• Update Node packages.
• Move assets/js-src folder to assets-src/js.
• Move assets/scss folder to assets-src/scss but..
  • Use more .css than .scss. Reduce Sass usage. New CSS source files are in assets-src/css.
  • Update to use new CSS variables, prepended with --rdta.

Breaking changes

CSS variables changed.
File rundiz-template-admin.css.
In the :root{} scope.

• --background-primary-disabled-color -> --rdta-background-primary-disabled-color
• --background-primary-hover-color -> --rdta-background-primary-hover-color
• --background-danger-disabled-color -> --rdta-background-danger-disabled-color
• --background-danger-hover-color -> --rdta-background-danger-hover-color
• --background-info-disabled-color -> --rdta-background-info-disabled-color
• --background-info-hover-color -> --rdta-background-info-hover-color
• --background-success-disabled-color -> --rdta-background-success-disabled-color
• --background-success-hover-color -> --rdta-background-success-hover-color
• --background-warning-disabled-color -> --rdta-background-warning-disabled-color
• --background-warning-hover-color -> --rdta-background-warning-hover-color
• --block-element-margin-horizontal -> --rdta-block-element-margin-horizontal
• --block-element-margin-vertical -> --rdta-block-element-margin-vertical
• --block-element-padding-horizontal -> --rdta-block-element-padding-horizontal
• --block-element-padding-vertical -> --rdta-block-element-padding-vertical
• --navbar-height_mobilescreen -> --rdta-navbar-height_mobilescreen
• --sidebar-expanded-width -> --rdta-sidebar-expanded-width
• --sidebar-collapsed-width -> --rdta-sidebar-collapsed-width
• --sidebar-transition-seconds moved to scope .rd-navbar, .rd-sidebar, .rd-sidebar-back, .sm-rdta{}
• --text-danger-color -> --rdta-text-danger-color
• --text-info-color -> --rdta-text-info-color
• --text-primary-color -> --rdta-text-primary-color
• --text-success-color -> --rdta-text-success-color
• --text-warning-color -> --rdta-text-warning-color
• --text-white-color -> --rdta-text-white-color

In the .rd-button, .rd-form{} scope.

• --form-large-font-size -> --rdta-form-large-font-size
• --form-small-font-size -> --rdta-form-small-font-size
• --form-tiny-font-size -> --rdta-form-tiny-font-size

.rd-navbar, .rd-sidebar, .rd-sidebar-back{} scope changed to .rd-navbar, .rd-sidebar, .rd-sidebar-back, .sm-rdta{}

• --navbar-height -> --rdta-navbar-height
• --navbar-z-index -> --rdta-navbar-z-index
• --navbarsidebar-background-color -> --rdta-navbar-sidebar-background-color
• --sidebar-z-index -> --rdta-sidebar-z-index

In the .rd-alertbox{} scope.

• --alertbox-z-index -> --rdta-alert-box-z-index

File typo-and-form/typo-and-form.css.
In the :root{} scope.

• --basic-focus-color -> --rdta-tpf-basic-focus-color
• --form-focus-color -> --rdta-tpf-form-focus-color
• --form-invalid-border-color -> --rdta-tpf-form-invalid-border-color
• --page-background-color -> --rdta-tpf-page-background-color
• --page-text-color -> --rdta-tpf-page-text-color
• --block-background-color -> --rdta-tpf-block-background-color
• --block-border-color -> --rdta-tpf-block-border-color
• --content-block-element-margin-vertical -> --rdta-tpf-content-block-element-margin-vertical
• --inputrange-thumb-border-color -> --rdta-tpf-input-range-thumb-border-color
• --text-link-color -> --rdta-tpf-text-link-color

File components/rdta-alertdialog.css.
In the .rd-alertdialog-modal{} scope.

• --alertdialog-backdrop-z-index -> --rdta-alert-dialog-backdrop-z-index

File components/rdta-dialog.css.
In the .rd-dialog-modal{} scope.

• --dialog-backdrop-z-index -> --rdta-dialog-backdrop-z-index

File components/rdta-embeds.css.
In the .rd-embed-responsivexxx{} scopes.

• --aspect-ratio -> --rdta-embeds-aspect-ratio