6.0.0 (2023-01-11)
Bug Fixes
- button: fix svg icon size inside icon-button (85429b7)
- calendar: remove redundant today button customization (57c5307)
- dataviz: fluent chart colors should respect series color vars (6aea0d9)
- drawer: update hierarchy function and values (6d1eec0)
- dropdowngrid: add chip dependency (8e43add)
- editor: add styles for table inside editor when not using iframe (4a4b41b)
- editor: remove disabled styling when in readonly mode (b90a255)
- fluent: use json transformer for dart sass (9457acd)
- gantt: add a stronger td selector (1a60837)
- html-spec: appbar json file name (4344578)
- html: unify treeview disabled item rendering (313ae3d)
- html: update today button to use button instead of anchor or span (0612e6e)
- icon: adjust selectors for the new k-icon-wrapper-host element (e6422ee)
- input: wrong svg icon size inside input (4b1a384)
- list: update list styles (c588984)
- material: use editor styles from default theme (605bb47)
- notification: apply box-shadow to notification to match design (d82d9d9)
- nouvelle: update popup styles (98ba8cc)
- popover: popover inner and popover content should inherit border color (9f7413f)
- popover: use correct colors for popover header (ddeb214)
- remove scripts field from published pkgs (27199fa)
- replace slash division with k-math-div function (d1de3b7)
- textarea: native textarea should have a scrollbar by default (b792500)
- timedurationpicker: fix icons dependency (72ba9a0)
- toolbar: remove redundant styles (06c5b42)
- use utility class names from utils package (6445d04)
chore
- appbar: add kendo- prefix (d0a24e6)
- dialog: prefix dialog variables with $kendo- (1634081)
- drawer: prefix vars with $kendo (e295ce5)
- drop IE support (7e0487c)
- editor: prefix editor variables with $kendo- (23c1bb6)
- editor: remove obsolete editor styles (a920070)
- grid: add grouping drop container styles (34bcc02), closes #3776
- icons: update icon sizes and add kendo prefix to vars (c09c4cb)
- listbox: prefix variables with $kendo- (8c6c4eb)
- loader: add kendo- prefix (51e669a)
- notification: prefix variables with $kendo- (93466a0)
- prefix popover variables with
$kendo-
(fc9e021) - prefix root variables with
$kendo-
(3ca4739) - progressbar: prefix variables with $kendo- (41c1a29)
- remove tilde from import path (1f8951c)
- remove usages of
$spacer
variable (32a6899) - rename $spacing to $kendo-spacing (abdff63)
- treelist: prefix variables with $kendo- (61ffde9)
- update listview styles (414e586)
- upload: prefix upload variables with $kendo- (d28ff89)
- use functions and mixins only from theme-core (5d3fcbe)
- window: prefix window variables with $kendo- (bc3a7bd)
Features
- add default ocean blue a11y swatch (8ca8d04)
- button: extract focus ring opacity variable (f6098db)
- dialog: add styles for themeColor property (1653efd)
- dialog: update styles to match updated rendering (bd996b2)
- fab: remove styles for fab shape property (e21f33e)
- forms: add sizes (b9f3c05)
- grid: add grid sm and md sizes (9c197f3)
- grid: update grid header rendering (a1ad23f)
- grid: update styles to support chiplist in grid grouping (d9e5e9f)
- html-spec: add appbar structure (d537306)
- html-spec: add data-table json (7b5bfd1)
- html-spec: add dialog json spec (23b5227)
- html-spec: add dropdownlist structure (b15d45c)
- html-spec: add editor json spec (4d98287)
- html-spec: add forms structure (1012846)
- html-spec: add grid json spec (434fbc4)
- html-spec: add grid-layout structure (e51c51d)
- html-spec: add listbox structure (9209c58)
- html-spec: add listview json (037f522)
- html-spec: add loader structure (bd9bdba)
- html-spec: add notification structure (cb59c8c)
- html-spec: add pager structure (be10cfa)
- html-spec: add progressbar structure (a64a9bb)
- html-spec: add table json (cb48e7d)
- html-spec: add textbox structure (c1d8f3a)
- html-spec: add toolbar structure (30610c9)
- html-spec: add treelist structure (ba9ac25)
- html-spec: add upload json spec (91dfe38)
- html-spec: add window json spec (6418223)
- html: add appbar html helper (fcd8c45)
- html: add chunk-progressbar html helper (16e552e)
- html: add dialog html helper (3521a8d)
- html: add disabled prop to buttongroup (6c60b08)
- html: add editor html helper (e69cb35)
- html: add html helper for toolbar (5373b45)
- html: add listbox html helper (4ffe868)
- html: add listview html component (0f77b2c)
- html: add loader html helper (4009e62)
- html: add notification helper (c71ca2b)
- html: add pager html helper (a3d56b9)
- html: add progressbar html helper (5af1ff1)
- html: add upload html helper (5191a33)
- html: add window html helper (afa1a72)
- icons: use kendo-icons package in themes (0cfacca)
- listbox: wrap listbox actions in k-listbox-actions container (47f6048)
- multiselect: update chip list rendering to comply with accessibility standards (fcab7e5)
- notification: add notification action/s classes (46f5154)
- pager: add pager sizes (adcb88b)
- prefix variables with
$kendo-
(e9732c9) - progressbar: expose chunk-progressbar specific classes (48bb6c0)
- progressbar: expose k-progressbar-value class (52e7882)
- toolbar: add toolbar sizes (1db2cb1)
- update chart tooltip animation (4c364a0)
- upload: update upload styles to match new rendering (53dfbd6)
- use focus-indicator mixin for contrast shadows (18560fe)
- use utility class names from utils package (e4ab60e)
- window: add styles for themeColor property (e3bad3d)
- window: update styles to match updated rendering (85ed870)
Reverts
- revert several commits that broke the build (df19412)
BREAKING CHANGES
- Prefix variables with
$kendo-
to avoid conflicts with other libraries.
Streamline variable names to use the same naming convention:
- size suffixes are now size infixes.
- add missing medium size
## Misc variables
Old name | New name |
---|---|
$dark-theme | $kendo-is-dark-theme |
$base-bg | $kendo-base-bg |
$base-text | $kendo-base-text |
$base-border | $kendo-base-border |
$base-gradient | $kendo-base-gradient |
$link-text | $kendo-link-text |
$link-hover-text | $kendo-link-hover-text |
$grid-cols | Removed. See @progress/kendo-theme-utils package for alternatives |
$grid-rows | Removed. See @progress/kendo-theme-utils package for alternatives |
$grid-gap | Removed. See @progress/kendo-theme-utils package for alternatives |
## Typography
Old name | New name |
---|---|
$enable-typography | $kendo-enable-typography |
$font-family | $kendo-font-family |
$font-family-monospace | $kendo-font-family-monospace |
N/A | (new) $kendo-font-family-sans-serif |
$font-size | $kendo-font-size |
$font-size-xs | $kendo-font-size-xs |
$font-size-sm | $kendo-font-size-sm |
$font-size-md | $kendo-font-size-md |
$font-size-lg | $kendo-font-size-lg |
$font-size-xl | $kendo-font-size-xl |
$line-height | $kendo-line-height |
$line-height-xs | $kendo-line-height-xs |
$line-height-sm | $kendo-line-height-sm |
$line-height-md | $kendo-line-height-md |
$line-height-lg | $kendo-line-height-lg |
$line-height-xl | $kendo-line-height-xl |
$line-height-em | $kendo-line-height-em |
$font-weight-light | $kendo-font-weight-light |
$font-weight-normal | $kendo-font-weight-normal |
N/A | (new) $kendo-font-weight-medium |
N/A | (new) $kendo-font-weight-semibold |
$font-weight-bold | $kendo-font-weight-bold |
$letter-spacing | $kendo-letter-spacing |
$h1-* | $kendo-h1-* |
$h2-* | $kendo-h2-* |
$h3-* | $kendo-h3-* |
$h4-* | $kendo-h4-* |
$h5-* | $kendo-h5-* |
$h6-* | $kendo-h6-* |
$paragraph-* | $kendo-paragraph-* |
$code-* | $kendo-code-* |
$pre-* | $kendo-pre-* |
$display1-* | $kendo-display1-* |
$display2-* | $kendo-display2-* |
$display3-* | $kendo-display3-* |
$display4-* | $kendo-display4-* |
## Action buttons
Old name | New name |
---|---|
$actions-* | $kendo-actions-* |
## Actionsheet
Old name | New name |
---|---|
$actionsheet-* | $kendo-actionsheet-* |
## Adaptive
Old name | New name |
---|---|
$adaptive-* | $kendo-adaptive-* |
## Badge
Old name | New name |
---|---|
$kendo-badge-padding-x-sm | $kendo-badge-sm-padding-x |
$kendo-badge-padding-y-sm | $kendo-badge-sm-padding-y |
$kendo-badge-font-size-sm | $kendo-badge-sm-font-size |
$kendo-badge-line-height-sm | $kendo-badge-sm-line-height |
$kendo-badge-min-width-sm | $kendo-badge-sm-min-width |
$kendo-badge-padding-x-md | $kendo-badge-md-padding-x |
$kendo-badge-padding-y-md | $kendo-badge-md-padding-y |
$kendo-badge-font-size-md | $kendo-badge-md-font-size |
$kendo-badge-line-height-md | $kendo-badge-md-line-height |
$kendo-badge-min-width-md | $kendo-badge-md-min-width |
$kendo-badge-padding-x-lg | $kendo-badge-lg-padding-x |
$kendo-badge-padding-y-lg | $kendo-badge-lg-padding-y |
$kendo-badge-font-size-lg | $kendo-badge-lg-font-size |
$kendo-badge-line-height-lg | $kendo-badge-lg-line-height |
$kendo-badge-min-width-lg | $kendo-badge-lg-min-width |
## Bottom navigation
Old name | New name |
---|---|
$bottom-nav-* | $kendo-bottom-nav-* |
## Breadcrumb
Old name | New name |
---|---|
$breadcrumb-* | $kendo-breadcrumb-* |
## Button
Old name | New name |
---|---|
$kendo-button-padding-x-sm | $kendo-button-sm-padding-x |
$kendo-button-padding-y-sm | $kendo-button-sm-padding-y |
$kendo-button-font-size-sm | $kendo-button-sm-font-size |
$kendo-button-line-height-sm | $kendo-button-sm-line-height |
$kendo-button-calc-size-sm | $kendo-button-sm-calc-size |
$kendo-button-inner-calc-size-sm | $kendo-button-sm-inner-calc-size |
$kendo-button-padding-x-md | $kendo-button-md-padding-x |
$kendo-button-padding-y-md | $kendo-button-md-padding-y |
$kendo-button-font-size-md | $kendo-button-md-font-size |
$kendo-button-line-height-md | $kendo-button-md-line-height |
$kendo-button-calc-size-md | $kendo-button-md-calc-size |
$kendo-button-inner-calc-size-md | $kendo-button-md-inner-calc-size |
$kendo-button-padding-x-lg | $kendo-button-lg-padding-x |
$kendo-button-padding-y-lg | $kendo-button-lg-padding-y |
$kendo-button-font-size-lg | $kendo-button-lg-font-size |
$kendo-button-line-height-lg | $kendo-button-lg-line-height |
$kendo-button-calc-size-lg | $kendo-button-lg-calc-size |
$kendo-button-inner-calc-size-lg | $kendo-button-lg-inner-calc-size |
## Calendar
Old name | New name |
---|---|
$calendar-* | $kendo-calendar-* |
## Captcha
Old name | New name |
---|---|
$captcha-* | $kendo-captcha-* |
## Card
Old name | New name |
---|---|
$card-* | $kendo-card-* |
## Chat
Old name | New name |
---|---|
$chat-* | $kendo-chat-* |
## Chip
Old name | New name |
---|---|
$kendo-chip-padding-x-sm | $kendo-chip-sm-padding-x |
$kendo-chip-padding-y-sm | $kendo-chip-sm-padding-y |
$kendo-chip-font-size-sm | $kendo-chip-sm-font-size |
$kendo-chip-line-height-sm | $kendo-chip-sm-line-height |
$kendo-chip-calc-size-sm | $kendo-chip-sm-calc-size |
$kendo-chip-padding-x-md | $kendo-chip-md-padding-x |
$kendo-chip-padding-y-md | $kendo-chip-md-padding-y |
$kendo-chip-font-size-md | $kendo-chip-md-font-size |
$kendo-chip-line-height-md | $kendo-chip-md-line-height |
$kendo-chip-calc-size-md | $kendo-chip-md-calc-size |
$kendo-chip-padding-x-lg | $kendo-chip-lg-padding-x |
$kendo-chip-padding-y-lg | $kendo-chip-lg-padding-y |
$kendo-chip-font-size-lg | $kendo-chip-lg-font-size |
$kendo-chip-line-height-lg | $kendo-chip-lg-line-height |
$kendo-chip-calc-size-lg | $kendo-chip-lg-calc-size |
## Color editor
Old name | New name |
---|---|
$coloreditor-* | $kendo-color-editor-* |
## Color gradient
Old name | New name |
---|---|
$colorgradient-* | $kendo-color-gradient-* |
## Color palette
Old name | New name |
---|---|
$colorpalette-* | $kendo-color-palette-* |
## Color preview
Old name | New name |
---|---|
$color-preview-* | $kendo-color-preview-* |
## Dataviz
Old name | New name |
---|---|
$series-* | $kendo-series-* |
$chart-* | $kendo-chart-* |
$treemap-* | $kendo-treemap-* |
## Date time picker
Old name | New name |
---|---|
$datetime-* | $kendo-datetime-* |
## Draggable
Old name | New name |
---|---|
$drag-clue-* | $kendo-drag-hint-* |
$drop-hint-* | $kendo-drop-hint-* |
## Dropdown tree
Old name | New name |
---|---|
$dropdowntree-* | $kendo-dropdowntree-* |
## Dropzone
Old name | New name |
---|---|
$dropzone-* | $kendo-dropzone-* |
## Expansion panel
Old name | New name |
---|---|
$expander-* | $kendo-expander-* |
## Floating action button
Old name | New name |
---|---|
$kendo-fab-padding-x-sm | $kendo-fab-sm-padding-x |
$kendo-fab-padding-y-sm | $kendo-fab-sm-padding-y |
$kendo-fab-padding-x-md | $kendo-fab-md-padding-x |
$kendo-fab-padding-y-md | $kendo-fab-md-padding-y |
$kendo-fab-padding-x-lg | $kendo-fab-lg-padding-x |
$kendo-fab-padding-y-lg | $kendo-fab-lg-padding-y |
## File manager
Old name | New name |
---|---|
$filemanager-* | $kendo-file-manager-* |
## Filter
Old name | New name |
---|---|
$filter-* | $kendo-filter-* |
## Floating label
Old name | New name |
---|---|
$floating-label-* | $kendo-floating-label-* |
## Form
Old name | New name |
---|---|
$kendo-form-line-height-sm | $kendo-form-sm-line-height |
$kendo-form-line-height-lg | $kendo-form-lg-line-height |
$kendo-form-row-spacing-sm | $kendo-form-sm-row-spacing |
$kendo-form-row-spacing-md | $kendo-form-md-row-spacing |
$kendo-form-row-spacing-lg | $kendo-form-lg-row-spacing |
## Gantt
Old name | New name |
---|---|
$gantt-* | $kendo-gantt-* |
## Grid
Old name | New name |
---|---|
$kendo-grid-padding-x-sm | $kendo-grid-sm-padding-x |
$kendo-grid-padding-y-sm | $kendo-grid-sm-padding-y |
$kendo-grid-header-padding-x-sm | $kendo-grid-sm-header-padding-x |
$kendo-grid-header-padding-y-sm | $kendo-grid-sm-header-padding-y |
$kendo-grid-group-header-padding-x-sm | $kendo-grid-sm-group-header-padding-x |
$kendo-grid-group-header-padding-y-sm | $kendo-grid-sm-group-header-padding-y |
$kendo-grid-cell-padding-x-sm | $kendo-grid-sm-cell-padding-x |
$kendo-grid-cell-padding-y-sm | $kendo-grid-sm-cell-padding-y |
$kendo-grid-filter-cell-padding-x-sm | $kendo-grid-sm-filter-cell-padding-x |
$kendo-grid-filter-cell-padding-y-sm | $kendo-grid-sm-filter-cell-padding-y |
$kendo-grid-edit-cell-padding-x-sm | $kendo-grid-sm-edit-cell-padding-x |
$kendo-grid-edit-cell-padding-y-sm | $kendo-grid-sm-edit-cell-padding-y |
$kendo-grid-group-dropclue-height-sm | $kendo-grid-sm-group-drop-hint-height |
$kendo-grid-padding-x-md | $kendo-grid-md-padding-x |
$kendo-grid-padding-y-md | $kendo-grid-md-padding-y |
$kendo-grid-header-padding-x-md | $kendo-grid-md-header-padding-x |
$kendo-grid-header-padding-y-md | $kendo-grid-md-header-padding-y |
$kendo-grid-group-header-padding-x-md | $kendo-grid-md-group-header-padding-x |
$kendo-grid-group-header-padding-y-md | $kendo-grid-md-group-header-padding-y |
$kendo-grid-cell-padding-x-md | $kendo-grid-md-cell-padding-x |
$kendo-grid-cell-padding-y-md | $kendo-grid-md-cell-padding-y |
$kendo-grid-filter-cell-padding-x-md | $kendo-grid-md-filter-cell-padding-x |
$kendo-grid-filter-cell-padding-y-md | $kendo-grid-md-filter-cell-padding-y |
$kendo-grid-edit-cell-padding-x-md | $kendo-grid-md-edit-cell-padding-x |
$kendo-grid-edit-cell-padding-y-md | $kendo-grid-md-edit-cell-padding-y |
$kendo-grid-group-dropclue-height-md | $kendo-grid-md-group-drop-hint-height |
$kendo-grid-padding-x-lg | $kendo-grid-lg-padding-x |
$kendo-grid-padding-y-lg | $kendo-grid-lg-padding-y |
$kendo-grid-header-padding-x-lg | $kendo-grid-lg-header-padding-x |
$kendo-grid-header-padding-y-lg | $kendo-grid-lg-header-padding-y |
$kendo-grid-group-header-padding-x-lg | $kendo-grid-lg-group-header-padding-x |
$kendo-grid-group-header-padding-y-lg | $kendo-grid-lg-group-header-padding-y |
$kendo-grid-cell-padding-x-lg | $kendo-grid-lg-cell-padding-x |
$kendo-grid-cell-padding-y-lg | $kendo-grid-lg-cell-padding-y |
$kendo-grid-filter-cell-padding-x-lg | $kendo-grid-lg-filter-cell-padding-x |
$kendo-grid-filter-cell-padding-y-lg | $kendo-grid-lg-filter-cell-padding-y |
$kendo-grid-edit-cell-padding-x-lg | $kendo-grid-lg-edit-cell-padding-x |
$kendo-grid-edit-cell-padding-y-lg | $kendo-grid-lg-edit-cell-padding-y |
$kendo-grid-group-dropclue-height-lg | $kendo-grid-lg-group-drop-hint-height |
## Image Editor
Old name | New name |
---|---|
$imageeditor-* | $kendo-image-editor-* |
## Input
Old name | New name |
---|---|
$kendo-input-padding-x-sm | $kendo-input-sm-padding-x |
$kendo-input-padding-y-sm | $kendo-input-sm-padding-y |
$kendo-input-font-size-sm | $kendo-input-sm-font-size |
$kendo-input-line-height-sm | $kendo-input-sm-line-height |
$kendo-input-padding-x-md | $kendo-input-md-padding-x |
$kendo-input-padding-y-md | $kendo-input-md-padding-y |
$kendo-input-font-size-md | $kendo-input-md-font-size |
$kendo-input-line-height-md | $kendo-input-md-line-height |
$kendo-input-padding-x-lg | $kendo-input-lg-padding-x |
$kendo-input-padding-y-lg | $kendo-input-lg-padding-y |
$kendo-input-font-size-lg | $kendo-input-lg-font-size |
$kendo-input-line-height-lg | $kendo-input-lg-line-height |
## List
Old name | New name |
---|---|
$kendo-list-font-size-sm | $kendo-list-sm-font-size |
$kendo-list-line-height-sm | $kendo-list-sm-line-height |
$kendo-list-header-padding-x-sm | $kendo-list-sm-header-padding-x |
$kendo-list-header-padding-y-sm | $kendo-list-sm-header-padding-y |
$kendo-list-header-font-size-sm | $kendo-list-sm-header-font-size |
$kendo-list-header-line-height-sm | $kendo-list-sm-header-line-height |
$kendo-list-item-padding-x-sm | $kendo-list-sm-item-padding-x |
$kendo-list-item-padding-y-sm | $kendo-list-sm-item-padding-y |
$kendo-list-item-font-size-sm | $kendo-list-sm-item-font-size |
$kendo-list-item-line-height-sm | $kendo-list-sm-item-line-height |
$kendo-list-group-item-padding-x-sm | $kendo-list-sm-group-item-padding-x |
$kendo-list-group-item-padding-y-sm | $kendo-list-sm-group-item-padding-y |
$kendo-list-group-item-font-size-sm | $kendo-list-sm-group-item-font-size |
$kendo-list-group-item-line-height-sm | $kendo-list-sm-group-item-line-height |
$kendo-list-font-size-md | $kendo-list-md-font-size |
$kendo-list-line-height-md | $kendo-list-md-line-height |
$kendo-list-header-padding-x-md | $kendo-list-md-header-padding-x |
$kendo-list-header-padding-y-md | $kendo-list-md-header-padding-y |
$kendo-list-header-font-size-md | $kendo-list-md-header-font-size |
$kendo-list-header-line-height-md | $kendo-list-md-header-line-height |
$kendo-list-item-padding-x-md | $kendo-list-md-item-padding-x |
$kendo-list-item-padding-y-md | $kendo-list-md-item-padding-y |
$kendo-list-item-font-size-md | $kendo-list-md-item-font-size |
$kendo-list-item-line-height-md | $kendo-list-md-item-line-height |
$kendo-list-group-item-padding-x-md | $kendo-list-md-group-item-padding-x |
$kendo-list-group-item-padding-y-md | $kendo-list-md-group-item-padding-y |
$kendo-list-group-item-font-size-md | $kendo-list-md-group-item-font-size |
$kendo-list-group-item-line-height-md | $kendo-list-md-group-item-line-height |
$kendo-list-font-size-lg | $kendo-list-lg-font-size |
$kendo-list-line-height-lg | $kendo-list-lg-line-height |
$kendo-list-header-padding-x-lg | $kendo-list-lg-header-padding-x |
$kendo-list-header-padding-y-lg | $kendo-list-lg-header-padding-y |
$kendo-list-header-font-size-lg | $kendo-list-lg-header-font-size |
$kendo-list-header-line-height-lg | $kendo-list-lg-header-line-height |
$kendo-list-item-padding-x-lg | $kendo-list-lg-item-padding-x |
$kendo-list-item-padding-y-lg | $kendo-list-lg-item-padding-y |
$kendo-list-item-font-size-lg | $kendo-list-lg-item-font-size |
$kendo-list-item-line-height-lg | $kendo-list-lg-item-line-height |
$kendo-list-group-item-padding-x-lg | $kendo-list-lg-group-item-padding-x |
$kendo-list-group-item-padding-y-lg | $kendo-list-lg-group-item-padding-y |
$kendo-list-group-item-font-size-lg | $kendo-list-lg-group-item-font-size |
$kendo-list-group-item-line-height-lg | $kendo-list-lg-group-item-line-height |
## Listgroup
Old name | New name |
---|---|
$listgroup-* | $kendo-listgroup-* |
## Loader
Old name | New name |
---|---|
$kendo-loader-segment-size-sm | $kendo-loader-sm-segment-size |
$kendo-loader-padding-sm | $kendo-loader-sm-padding |
$kendo-loader-spinner-3-width-sm | $kendo-loader-sm-spinner-3-width |
$kendo-loader-spinner-3-height-sm | $kendo-loader-sm-spinner-3-height |
$kendo-loader-spinner-4-width-sm | $kendo-loader-sm-spinner-4-width |
$kendo-loader-spinner-4-height-sm | $kendo-loader-sm-spinner-4-height |
$kendo-loader-container-padding-sm | $kendo-loader-sm-container-padding |
$kendo-loader-container-gap-sm | $kendo-loader-sm-container-gap |
$kendo-loader-container-font-size-sm | $kendo-loader-sm-container-font-size |
$kendo-loader-segment-size-md | $kendo-loader-md-segment-size |
$kendo-loader-padding-md | $kendo-loader-md-padding |
$kendo-loader-spinner-3-width-md | $kendo-loader-md-spinner-3-width |
$kendo-loader-spinner-3-height-md | $kendo-loader-md-spinner-3-height |
$kendo-loader-spinner-4-width-md | $kendo-loader-md-spinner-4-width |
$kendo-loader-spinner-4-height-md | $kendo-loader-md-spinner-4-height |
$kendo-loader-container-padding-md | $kendo-loader-md-container-padding |
$kendo-loader-container-gap-md | $kendo-loader-md-container-gap |
$kendo-loader-container-font-size-md | $kendo-loader-md-container-font-size |
$kendo-loader-segment-size-lg | $kendo-loader-lg-segment-size |
$kendo-loader-padding-lg | $kendo-loader-lg-padding |
$kendo-loader-spinner-3-width-lg | $kendo-loader-lg-spinner-3-width |
$kendo-loader-spinner-3-height-lg | $kendo-loader-lg-spinner-3-height |
$kendo-loader-spinner-4-width-lg | $kendo-loader-lg-spinner-4-width |
$kendo-loader-spinner-4-height-lg | $kendo-loader-lg-spinner-4-height |
$kendo-loader-container-padding-lg | $kendo-loader-lg-container-padding |
$kendo-loader-container-gap-lg | $kendo-loader-lg-container-gap |
$kendo-loader-container-font-size-lg | $kendo-loader-lg-container-font-size |
## Map
Old name | New name |
---|---|
$map-* | $kendo-map-* |
## Media player
Old name | New name |
---|---|
$mediaplayer-* | $kendo-media-player-* |
## Menu
Old name | New name |
---|---|
$menu-* | $kendo-menu-* |
$kendo-menu-popup-font-size-sm | $kendo-menu-sm-popup-font-size |
$kendo-menu-popup-line-height-sm | $kendo-menu-sm-popup-line-height |
$kendo-menu-popup-item-padding-x-sm | $kendo-menu-sm-popup-item-padding-x |
$kendo-menu-popup-item-padding-y-sm | $kendo-menu-sm-popup-item-padding-y |
$kendo-menu-popup-item-padding-end-sm | $kendo-menu-sm-popup-item-padding-end |
$kendo-menu-popup-item-icon-margin-start-sm | $kendo-menu-sm-popup-item-icon-margin-start |
$kendo-menu-popup-item-icon-margin-end-sm | $kendo-menu-sm-popup-item-icon-margin-end |
$kendo-menu-popup-font-size-md | $kendo-menu-md-popup-font-size |
$kendo-menu-popup-line-height-md | $kendo-menu-md-popup-line-height |
$kendo-menu-popup-item-padding-x-md | $kendo-menu-md-popup-item-padding-x |
$kendo-menu-popup-item-padding-y-md | $kendo-menu-md-popup-item-padding-y |
$kendo-menu-popup-item-padding-end-md | $kendo-menu-md-popup-item-padding-end |
$kendo-menu-popup-item-icon-margin-start-md | $kendo-menu-md-popup-item-icon-margin-start |
$kendo-menu-popup-item-icon-margin-end-md | $kendo-menu-md-popup-item-icon-margin-end |
$kendo-menu-popup-font-size-lg | $kendo-menu-lg-popup-font-size |
$kendo-menu-popup-line-height-lg | $kendo-menu-lg-popup-line-height |
$kendo-menu-popup-item-padding-x-lg | $kendo-menu-lg-popup-item-padding-x |
$kendo-menu-popup-item-padding-y-lg | $kendo-menu-lg-popup-item-padding-y |
$kendo-menu-popup-item-padding-end-lg | $kendo-menu-lg-popup-item-padding-end |
$kendo-menu-popup-item-icon-margin-start-lg | $kendo-menu-lg-popup-item-icon-margin-start |
$kendo-menu-popup-item-icon-margin-end-lg | $kendo-menu-lg-popup-item-icon-margin-end |
## Message box
Old name | New name |
---|---|
$message-box-* | $kendo-message-box-* |
## Orgchart
Old name | New name |
---|---|
$orgchart-* | $kendo-orgchart-* |
## Overlay
Old name | New name |
---|---|
$overlay-* | $kendo-overlay-* |
## Pager
Old name | New name |
---|---|
$kendo-pager-padding-x-sm | $kendo-pager-sm-padding-x |
$kendo-pager-padding-y-sm | $kendo-pager-sm-padding-y |
$kendo-pager-item-min-width-sm | $kendo-pager-sm-item-min-width |
$kendo-pager-item-group-spacing-sm | $kendo-pager-sm-item-group-spacing |
$kendo-pager-dropdown-width-sm | $kendo-pager-sm-dropdown-width |
$kendo-pager-padding-x-md | $kendo-pager-md-padding-x |
$kendo-pager-padding-y-md | $kendo-pager-md-padding-y |
$kendo-pager-item-min-width-md | $kendo-pager-md-item-min-width |
$kendo-pager-item-group-spacing-md | $kendo-pager-md-item-group-spacing |
$kendo-pager-dropdown-width-md | $kendo-pager-md-dropdown-width |
$kendo-pager-padding-x-lg | $kendo-pager-lg-padding-x |
$kendo-pager-padding-y-lg | $kendo-pager-lg-padding-y |
$kendo-pager-item-min-width-lg | $kendo-pager-lg-item-min-width |
$kendo-pager-item-group-spacing-lg | $kendo-pager-lg-item-group-spacing |
$kendo-pager-dropdown-width-lg | $kendo-pager-lg-dropdown-width |
## Panelbar
Old name | New name |
---|---|
$panelbar-* | $kendo-panelbar-* |
## PDF viewer
Old name | New name |
---|---|
$pdf-viewer-* | $kendo-pdf-viewer-* |
## Pivotgrid
Old name | New name |
---|---|
$pivotgrid-* | $kendo-pivotgrid-* |
## Popup
Old name | New name |
---|---|
$popup-* | $kendo-popup-* |
## Rating
Old name | New name |
---|---|
$rating-* | $kendo-rating-* |
## Scheduler
Old name | New name |
---|---|
$scheduler-* | $kendo-scheduler-* |
## Scrollview
Old name | New name |
---|---|
$scrollview-* | $kendo-scrollview-* |
## Signature
Old name | New name |
---|---|
$kendo-signature-padding-x-sm | $kendo-signature-sm-padding-x |
$kendo-signature-padding-y-sm | $kendo-signature-sm-padding-y |
$kendo-signature-line-height-sm | $kendo-signature-sm-line-height |
$kendo-signature-padding-x-md | $kendo-signature-md-padding-x |
$kendo-signature-padding-y-md | $kendo-signature-md-padding-y |
$kendo-signature-line-height-md | $kendo-signature-md-line-height |
$kendo-signature-padding-x-lg | $kendo-signature-lg-padding-x |
$kendo-signature-padding-y-lg | $kendo-signature-lg-padding-y |
$kendo-signature-line-height-lg | $kendo-signature-lg-line-height |
## Skeleton
Old name | New name |
---|---|
$skeleton-* | $kendo-skeleton-* |
## Slider
Old name | New name |
---|---|
$slider-* | $kendo-slider-* |
## Split button
Old name | New name |
---|---|
$kendo-split-button-arrow-padding-x-sm | $kendo-split-button-sm-arrow-padding-x |
$kendo-split-button-arrow-padding-y-sm | $kendo-split-button-sm-arrow-padding-y |
$kendo-split-button-arrow-padding-x-md | $kendo-split-button-md-arrow-padding-x |
$kendo-split-button-arrow-padding-y-md | $kendo-split-button-md-arrow-padding-y |
$kendo-split-button-arrow-padding-x-lg | $kendo-split-button-lg-arrow-padding-x |
$kendo-split-button-arrow-padding-y-lg | $kendo-split-button-lg-arrow-padding-y |
## Splitter
Old name | New name |
---|---|
$splitter-* | $kendo-splitter-* |
$splitbar-* | $kendo-splitbar-* |
## Spreadsheet
Old name | New name |
---|---|
$spreadsheet-* | $kendo-spreadsheet-* |
## Stepper
Old name | New name |
---|---|
$stepper-* | $kendo-stepper-* |
## Table
Old name | New name |
---|---|
$kendo-table-cell-padding-x-sm | $kendo-table-sm-cell-padding-x |
$kendo-table-cell-padding-y-sm | $kendo-table-sm-cell-padding-y |
$kendo-table-cell-padding-x-md | $kendo-table-md-cell-padding-x |
$kendo-table-cell-padding-y-md | $kendo-table-md-cell-padding-y |
$kendo-table-cell-padding-x-lg | $kendo-table-lg-cell-padding-x |
$kendo-table-cell-padding-y-lg | $kendo-table-lg-cell-padding-y |
## Tabstrip
Old name | New name |
---|---|
$tabstrip-* | $kendo-tabstrip-* |
## Taskboard
Old name | New name |
---|---|
$taskboard-* | $kendo-taskboard-* |
## Tile layout
Old name | New name |
---|---|
$tilelayout-* | $kendo-tile-layout-* |
## Timeline
Old name | New name |
---|---|
$timeline-* | $kendo-timeline-* |
## Time selector
Old name | New name |
---|---|
$time-selector-* | $kendo-time-selector-* |
## Toolbar
Old name | New name |
---|---|
$kendo-toolbar-padding-x-sm | $kendo-toolbar-sm-padding-x |
$kendo-toolbar-padding-y-sm | $kendo-toolbar-sm-padding-y |
$kendo-toolbar-spacing-sm | $kendo-toolbar-sm-spacing |
$kendo-toolbar-padding-x-md | $kendo-toolbar-md-padding-x |
$kendo-toolbar-padding-y-md | $kendo-toolbar-md-padding-y |
$kendo-toolbar-spacing-md | $kendo-toolbar-md-spacing |
$kendo-toolbar-padding-x-lg | $kendo-toolbar-lg-padding-x |
$kendo-toolbar-padding-y-lg | $kendo-toolbar-lg-padding-y |
$kendo-toolbar-spacing-lg | $kendo-toolbar-lg-spacing |
## Tooltip
Old name | New name |
---|---|
$tooltip-* | $kendo-tooltip-* |
## Treeview
Old name | New name |
---|---|
$kendo-treeview-font-size-sm | $kendo-treeview-sm-font-size |
$kendo-treeview-line-height-sm | $kendo-treeview-sm-line-height |
$kendo-treeview-item-padding-x-sm | $kendo-treeview-sm-item-padding-x |
$kendo-treeview-item-padding-y-sm | $kendo-treeview-sm-item-padding-y |
$kendo-treeview-font-size-md | $kendo-treeview-md-font-size |
$kendo-treeview-line-height-md | $kendo-treeview-md-line-height |
$kendo-treeview-item-padding-x-md | $kendo-treeview-md-item-padding-x |
$kendo-treeview-item-padding-y-md | $kendo-treeview-md-item-padding-y |
$kendo-treeview-font-size-lg | $kendo-treeview-lg-font-size |
$kendo-treeview-line-height-lg | $kendo-treeview-lg-line-height |
$kendo-treeview-item-padding-x-lg | $kendo-treeview-lg-item-padding-x |
$kendo-treeview-item-padding-y-lg | $kendo-treeview-lg-item-padding-y |
## Wizard
Old name | New name |
---|---|
$wizard-* | $kendo-wizard-* |
- icons: Added kendo prefix to all icon variables:
Change variable names from $icon-*
to $kendo-icon-*
.
-
icons: Icons font sizes are updated as follows:
-
$kendo-icon-size-xs -> 12px (0.75 * $kendo-icon-size)
-
$kendo-icon-size-sm -> 14px (0.875 * $kendo-icon-size)
-
$kendo-icon-size-md -> 16px ($kendo-icon-size)
-
$kendo-icon-size-lg -> 20px (1.25 * $kendo-icon-size)
-
$kendo-icon-size-xl -> 24px (1.5 * $kendo-icon-size)
-
$kendo-icon-size-xxl -> 32px (2 * $kendo-icon-size)
-
$kendo-icon-size-xxxl -> 48px (3 * $kendo-icon-size)
-
icons: icons are now consumed from kendo-icons package and
used in default, bootstrap, material and classic themes -
Use utility class names from utils package
Previously, the utility classes were defined in the default theme and were
consumed from the derived themes.
While no class names were changed, we did try to move to a more consistent
naming convention for the class names. For example, the class name for
display: flex
was changed from k-display-flex
to k-d-flex
, as it's shorter
and unambiguous. Of course, the old class names are still supported and
will be removed in the next major version.
- Remove usages of
$spacer
variable
The $spacer
variable is removed in favour of spacing map, which yields
consistent spacing values across all components.
- Rename popover variables
Old name | New name |
---|---|
$popover-border-width
| $kendo-popover-border-width
|
$popover-border-style
| $kendo-popover-border-style
|
$popover-border-radius
| $kendo-popover-border-radius
|
$popover-font-size
| $kendo-popover-font-size
|
$popover-font-family
| $kendo-popover-font-family
|
$popover-line-height
| $kendo-popover-line-height
|
$popover-bg
| $kendo-popover-bg
|
$popover-text
| $kendo-popover-text
|
$popover-border
| $kendo-popover-border
|
$popover-shadow
| $kendo-popover-shadow
|
$popover-header-padding-y
| $kendo-popover-header-padding-y
|
$popover-header-padding-x
| $kendo-popover-header-padding-x
|
$popover-header-border-width
| $kendo-popover-header-border-width
|
$popover-header-border-style
| $kendo-popover-header-border-style
|
$popover-header-bg
| $kendo-popover-header-bg
|
$popover-header-text
| $kendo-popover-header-text
|
$popover-header-border
| $kendo-popover-header-border
|
$popover-body-padding-y
| $kendo-popover-body-padding-y
|
$popover-body-padding-x
| $kendo-popover-body-padding-x
|
$popover-actions-border-width
| $kendo-popover-actions-border-width
|
$popover-callout-width
| $kendo-popover-callout-width
|
$popover-callout-height
| $kendo-popover-callout-height
|
$popover-callout-border-width
| $kendo-popover-callout-border-width
|
$popover-callout-border-style
| $kendo-popover-callout-border-style
|
$popover-callout-bg
| $kendo-popover-callout-bg
|
$popover-callout-border
| $kendo-popover-callout-border
|
- Remove deprecated
$accent
and$accent-contrast
variables
Use $kendo-color-primary
and $kendo-color-primary-contrast
instead.
- Remove redundant styling modules
The styling module was already included as part of the utils module.
- Remove redundant cursor module
The cursor module was already included as part of theme utils.
- Merge placeholder line with skeleton
The styles for the placeholder line were merged with the skeleton styles.
As a result, the placeholder line is lightly darker and has rounded corners.
In a future release, the placeholder line will be removed in favor of the skeleton.
- Rename root variables
This commit introduces a consistent naming convention for root variables:
- Most root variables are prefixed with
$kendo-
. - If a variable is a color, it's infixed with
-color-
. - If a variable had
-hovered-
infix, it's now-hover-
. - If a variable had
-focused-
infix, it's now-focus-
. - If a variable had size infix and then direction, they are reversed
Here is a list of changes:
Old name | New name |
---|---|
$enable-rounded
| $kendo-enable-rounded
|
$enable-shadows
| $kendo-enable-shadows
|
$enable-gradients
| $kendo-enable-gradients
|
$enable-transitions
| $kendo-enable-transitions
|
$enable-flex-classes
| Removed (unused) |
$enable-grid-classes
| Removed (unused) |
$use-calc-badge-size
| Removed (unused) |
$use-input-button-width
| $kendo-use-input-button-width
|
$use-input-spinner-width
| $kendo-use-input-spinner-width
|
$use-input-spinner-icon-offset
| Removed (unused) |
$use-picker-select-width
| Removed. Use $kendo-use-input-button-width
|
$padding-x
| $kendo-padding-x
|
$padding-y
| $kendo-padding-y
|
$padding-x-sm
| $kendo-padding-sm-x
|
$padding-y-sm
| $kendo-padding-sm-y
|
N/A | New. $kendo-padding-md-x
|
N/A | New. $kendo-padding-md-y
|
$padding-x-lg
| $kendo-padding-lg-x
|
$padding-y-lg
| $kendo-padding-lg-y
|
$panel-padding-x
| Removed. Variable was not used consistently, so the usages were replaced with spacing map |
$panel-padding-y
| Removed. Variable was not used consistently, so the usages were replaced with spacing map |
$header-padding-x
| Removed. Variable was not used consistently, so the usages were replaced with spacing map |
$header-padding-y
| Removed. Variable was not used consistently, so the usages were replaced with spacing map |
$nav-item-margin
| Removed. Variable was not used consistently, so the usages were replaced with spacing map |
$nav-item-padding-x
| Removed. Variable was not used consistently, so the usages were replaced with spacing map |
$nav-item-padding-y
| Removed. Variable was not used consistently, so the usages were replaced with spacing map |
$zindex-popup
| $kendo-zindex-popup
|
$zindex-window
| $kendo-zindex-window
|
$zindex-loading
| $kendo-zindex-loading
|
$black
| $kendo-color-black
|
$white
| $kendo-color-white
|
$rgba-transparent
| $kendo-color-rgba-transparent
|
$gradient-transparent-to-black
| $kendo-gradient-transparent-to-black
|
$gradient-transparent-to-white
| $kendo-gradient-transparent-to-white
|
$gradient-black-to-transparent
| $kendo-gradient-black-to-transparent
|
$gradient-white-to-transparent
| $kendo-gradient-white-to-transparent
|
$accent
| Removed. Use $kendo-color-primary
|
$accent-contrast
| Removed. Use $kendo-color-primary-contrast
|
$primary
| $kendo-color-primary
|
$primary-lighter
| $kendo-color-primary-lighter
|
$primary-darker
| $kendo-color-primary-darker
|
$primary-contrast
| $kendo-color-primary-contrast
|
$secondary
| $kendo-color-secondary
|
$secondary-lighter
| $kendo-color-secondary-lighter
|
$secondary-darker
| $kendo-color-secondary-darker
|
$secondary-contrast
| $kendo-color-secondary-contrast
|
$tertiary
| $kendo-color-tertiary
|
$tertiary-lighter
| $kendo-color-tertiary-lighter
|
$tertiary-darker
| $kendo-color-tertiary-darker
|
$tertiary-contrast
| $kendo-color-tertiary-contrast
|
$info
| $kendo-color-info
|
$info-lighter
| $kendo-color-info-lighter
|
$info-darker
| $kendo-color-info-darker
|
$success
| $kendo-color-success
|
$success-lighter
| $kendo-color-success-lighter
|
$success-darker
| $kendo-color-success-darker
|
$warning
| $kendo-color-warning
|
$warning-lighter
| $kendo-color-warning-lighter
|
$warning-darker
| $kendo-color-warning-darker
|
$error
| $kendo-color-error
|
$error-lighter
| $kendo-color-error-lighter
|
$error-darker
| $kendo-color-error-darker
|
$dark
| $kendo-color-dark
|
$light
| $kendo-color-light
|
$inverse
| $kendo-color-inverse
|
$cursors
| Removed (redundant) |
$body-bg
| $kendo-body-bg
|
$body-text
| $kendo-body-text
|
$subtle-text
| $kendo-subtle-text
|
$app-bg
| $kendo-app-bg
|
$app-text
| $kendo-app-text
|
$app-border
| $kendo-app-border
|
$component-bg
| $kendo-component-bg
|
$component-text
| $kendo-component-text
|
$component-border
| $kendo-component-border
|
$header-bg
| $kendo-component-header-bg
|
$header-text
| $kendo-component-header-text
|
$header-border
| $kendo-component-header-border
|
$header-gradient
| $kendo-component-header-gradient
|
$hovered-bg
| $kendo-hover-bg
|
$hovered-text
| $kendo-hover-text
|
$hovered-border
| $kendo-hover-border
|
$hovered-gradient
| $kendo-hover-gradient
|
$selected-bg
| $kendo-selected-bg
|
$selected-text
| $kendo-selected-text
|
$selected-border
| $kendo-selected-border
|
$selected-gradient
| $kendo-selected-gradient
|
$focused-shadow
| $kendo-focus-shadow
|
$primary-focused-shadow
| Removed (unused) |
$disabled-bg
| $kendo-disabled-bg
|
$disabled-text
| $kendo-disabled-text
|
$disabled-border
| $kendo-disabled-border
|
$disabled-gradient
| $kendo-disabled-gradient
|
$disabled-filter
| $kendo-disabled-filter
|
$disabled-opacity
| $kendo-disabled-opacity
|
$disabled-styling
| $kendo-disabled-styling
|
$panel-bg
| Removed. Use $kendo-component-bg
|
$panel-text
| Removed. Use $kendo-component-text
|
$panel-border
| Removed. Use $kendo-component-border
|
$grouping-header-bg
| Removed. Use $kendo-component-header-bg
|
$grouping-header-text
| Removed. Use $kendo-component-header-text
|
$grouping-header-border
| Removed. Use $kendo-component-header-border
|
$frozen-grouping-header-text
| Removed (unused) |
$frozen-grouping-header-border-width
| Removed (unused) |
$placeholder-line-width
| Removed (unused) |
$placeholder-line-height
| Removed (unused) |
$placeholder-line-bg
| Removed. $skeleton-item-bg |
$invalid-bg
| $kendo-invalid-bg
|
$invalid-text
| $kendo-invalid-text
|
$invalid-border
| $kendo-invalid-border
|
$invalid-shadow
| $kendo-invalid-shadow
|
$transition
| $kendo-transition
|
$breadcrumb-link-hovered-bg
| $breadcrumb-link-hover-bg
|
$breadcrumb-link-hovered-text
| $breadcrumb-link-hover-text
|
$breadcrumb-link-hovered-border
| $breadcrumb-link-hover-border
|
$breadcrumb-link-focused-bg
| $breadcrumb-link-focus-bg
|
$breadcrumb-link-focused-text
| $breadcrumb-link-focus-text
|
$breadcrumb-link-focused-border
| $breadcrumb-link-focus-border
|
$breadcrumb-link-focused-shadow
| $breadcrumb-link-focus-shadow
|
$breadcrumb-root-link-hovered-bg
| $breadcrumb-root-link-hover-bg
|
$breadcrumb-root-link-hovered-text
| $breadcrumb-root-link-hover-text
|
$breadcrumb-root-link-hovered-border
| $breadcrumb-root-link-hover-border
|
$breadcrumb-root-link-focused-bg
| $breadcrumb-root-link-focus-bg
|
$breadcrumb-root-link-focused-text
| $breadcrumb-root-link-focus-text
|
$breadcrumb-root-link-focused-border
| $breadcrumb-root-link-focus-border
|
$breadcrumb-root-link-focused-shadow
| $breadcrumb-root-link-focus-shadow
|
$breadcrumb-focused-shadow
| $breadcrumb-focus-shadow
|
$calendar-cell-focused-shadow
| $calendar-cell-focus-shadow
|
$kendo-drawer-scrollbar-hovered-color
| $kendo-drawer-scrollbar-hover-color
|
$kendo-drawer-hovered-bg
| $kendo-drawer-hover-bg
|
$kendo-drawer-hovered-text
| $kendo-drawer-hover-text
|
$kendo-drawer-focused-bg
| $kendo-drawer-focus-bg
|
$kendo-drawer-focused-text
| $kendo-drawer-focus-text
|
$dropdownlist-*
| Removed (unused) |
$expander-header-focused-bg
| $expander-header-focus-bg
|
$expander-header-focused-shadow
| $expander-header-focus-shadow
|
$kendo-grid-hovered-bg
| $kendo-grid-hover-bg
|
$kendo-grid-hovered-text
| $kendo-grid-hover-text
|
$kendo-grid-hovered-border
| $kendo-grid-hover-border
|
$kendo-grid-focused-shadow
| $kendo-grid-focus-shadow
|
$kendo-grid-sticky-footer-hovered-bg
| $kendo-grid-sticky-footer-hover-bg
|
$kendo-grid-sticky-hovered-bg
| $kendo-grid-sticky-hover-bg
|
$kendo-grid-sticky-selected-hovered-bg
| $kendo-grid-sticky-selected-hover-bg
|
$panelbar-header-hovered-bg
| $panelbar-header-hover-bg
|
$panelbar-header-hovered-text
| $panelbar-header-hover-text
|
$panelbar-header-hovered-border
| $panelbar-header-hover-border
|
$panelbar-header-hovered-gradient
| $panelbar-header-hover-gradient
|
$panelbar-header-focused-bg
| $panelbar-header-focus-bg
|
$panelbar-header-focused-text
| $panelbar-header-focus-text
|
$panelbar-header-focused-border
| $panelbar-header-focus-border
|
$panelbar-header-focused-gradient
| $panelbar-header-focus-gradient
|
$panelbar-header-focused-shadow
| $panelbar-header-focus-shadow
|
$panelbar-header-hovered-focused-bg
| $panelbar-header-hover-focus-bg
|
$panelbar-header-hovered-focused-text
| $panelbar-header-hover-focus-text
|
$panelbar-header-hovered-focused-border
| $panelbar-header-hover-focus-border
|
$panelbar-header-hovered-focused-gradient
| $panelbar-header-hover-focus-gradient
|
$panelbar-header-selected-hovered-bg
| $panelbar-header-selected-hover-bg
|
$panelbar-header-selected-hovered-text
| $panelbar-header-selected-hover-text
|
$panelbar-header-selected-hovered-border
| $panelbar-header-selected-hover-border
|
$panelbar-header-selected-hovered-gradient
| $panelbar-header-selected-hover-gradient
|
$panelbar-header-selected-focused-bg
| $panelbar-header-selected-focus-bg
|
$panelbar-header-selected-focused-text
| $panelbar-header-selected-focus-text
|
$panelbar-header-selected-focused-border
| $panelbar-header-selected-focus-border
|
$panelbar-header-selected-focused-gradient
| $panelbar-header-selected-focus-gradient
|
$panelbar-header-selected-hovered-focused-bg
| $panelbar-header-selected-hover-focus-bg
|
$panelbar-header-selected-hovered-focused-text
| $panelbar-header-selected-hover-focus-text
|
$panelbar-header-selected-hovered-focused-border
| $panelbar-header-selected-hover-focus-border
|
$panelbar-header-selected-hovered-focused-gradient
| $panelbar-header-selected-hover-focus-gradient
|
$panelbar-item-hovered-bg
| $panelbar-item-hover-bg
|
$panelbar-item-hovered-text
| $panelbar-item-hover-text
|
$panelbar-item-hovered-border
| $panelbar-item-hover-border
|
$panelbar-item-hovered-gradient
| $panelbar-item-hover-gradient
|
$panelbar-item-focused-bg
| $panelbar-item-focus-bg
|
$panelbar-item-focused-text
| $panelbar-item-focus-text
|
$panelbar-item-focused-border
| $panelbar-item-focus-border
|
$panelbar-item-focused-gradient
| $panelbar-item-focus-gradient
|
$panelbar-item-focused-shadow
| $panelbar-item-focus-shadow
|
$panelbar-item-hovered-focused-bg
| $panelbar-item-hover-focus-bg
|
$panelbar-item-hovered-focused-text
| $panelbar-item-hover-focus-text
|
$panelbar-item-hovered-focused-border
| $panelbar-item-hover-focus-border
|
$panelbar-item-hovered-focused-gradient
| $panelbar-item-hover-focus-gradient
|
$panelbar-item-selected-hovered-bg
| $panelbar-item-selected-hover-bg
|
$panelbar-item-selected-hovered-text
| $panelbar-item-selected-hover-text
|
$panelbar-item-selected-hovered-border
| $panelbar-item-selected-hover-border
|
$panelbar-item-selected-hovered-gradient
| $panelbar-item-selected-hover-gradient
|
$panelbar-item-selected-focused-bg
| $panelbar-item-selected-focus-bg
|
$panelbar-item-selected-focused-text
| $panelbar-item-selected-focus-text
|
$panelbar-item-selected-focused-border
| $panelbar-item-selected-focus-border
|
$panelbar-item-selected-focused-gradient
| $panelbar-item-selected-focus-gradient
|
$panelbar-item-selected-hovered-focused-bg
| $panelbar-item-selected-hover-focus-bg
|
$panelbar-item-selected-hovered-focused-text
| $panelbar-item-selected-hover-focus-text
|
$panelbar-item-selected-hovered-focused-border
| $panelbar-item-selected-hover-focus-border
|
$panelbar-item-selected-hovered-focused-gradient
| $panelbar-item-selected-hover-focus-gradient
|
$rating-icon-focused-text
| $rating-icon-focus-text
|
$rating-icon-focused-shadow
| $rating-icon-focus-shadow
|
$rating-icon-focused-selected-shadow
| $rating-icon-focus-selected-shadow
|
$slider-button-focused-shadow
| $slider-button-focus-shadow
|
$slider-draghandle-hovered-bg
| $slider-draghandle-hover-bg
|
$slider-draghandle-hovered-text
| $slider-draghandle-hover-text
|
$slider-draghandle-hovered-border
| $slider-draghandle-hover-border
|
$slider-draghandle-hovered-gradient
| $slider-draghandle-hover-gradient
|
$slider-draghandle-focused-shadow
| $slider-draghandle-focus-shadow
|
$spreadsheet-insert-image-dialog-overlay-hovered-text
| $spreadsheet-insert-image-dialog-overlay-hover-text
|
$tabstrip-item-hovered-bg
| $tabstrip-item-hover-bg
|
$tabstrip-item-hovered-text
| $tabstrip-item-hover-text
|
$tabstrip-item-hovered-border
| $tabstrip-item-hover-border
|
$tabstrip-item-hovered-gradient
| $tabstrip-item-hover-gradient
|
$tabstrip-item-focused-shadow
| $tabstrip-item-focus-shadow
|
$tabstrip-content-border-focused
| $tabstrip-content-focus-border
|
$time-list-focused-bg
| $time-list-focus-bg
|
$kendo-upload-focused-shadow
| $upload-focus-shadow
|
$kendo-window-focused-shadow
| $window-focus-shadow
|
$kendo-wizard-focused-shadow
| Removed (unused) |
- Added
$kendo-
prefix to$spacing
map
Renamed $spacing
to $kendo-spacing
to avoid conflicts with other libraries.
- grid: grid grouping header indicators replaced with
- treelist: Added kendo prefix to all treelist variables:
Change variable names from $treelist-*
to $kendo-treelist-*
.
- grid: Grid header cell rendering updated
- grid: Added
size
appearance property: size
controls the overall physical size of the grid and it's components.- currently supports small and medium (default) sizes
The size
property generates component specific class name k-grid-{size}
.
- grid: Added kendo prefix to all grid variables:
Change variable names from $grid-*
to $kendo-grid-*
.
- Removed tilde from import path:
Going forward, all imports from node_modules will not be prefixed with ~.
- Use functions and mixins only from theme-core
All, but two, functions are prefixed with k-
to avoid conflicts with other libraries:
contrast-wcag
is renamed tok-contrast-legacy
, andyiq
is renamed tok-yiq-luma-information
as the new names describe them better.
Note: k-contrast-legacy
is deprecated and will be removed.
- Added kendo prefix to all listview variables
Change variables names from $listview-*
to $kendo-listview-*
.
-
editor: The Editor now uses div containers instead of table
-
editor:
k-editor-toolbar-wrap
wrapper removed -
editor: Toolbar component is used for the Editor toolbar
-
editor: Window component is used for all Editor popups
-
editor: Form component is used inside popups
-
editor: All inputs inside popups are replaced with the
respective component: TextBox, NumericTextBox, etc -
editor: The following classes are renamed:
-
k-resizable
renamed tok-editor-resizable
-
k-editor-table-wizard-dialog
renamed tok-editor-table-wizard-window
-
editor: Added kendo prefix to all editor variables:
Change variable names from $editor-*
to $kendo-editor-*
.
-
upload: The following classes are being renamed:
-
k-dropzone-hover/hovered
renamed tok-hover
-
k-file-group-wrapper
,k-file-invalid-group-wrapper
,
k-multiple-files-group-wrapper
,k-multiple-files-invalid-group-wrapper
renamed tok-file-icon-wrapper
-
k-file-group
replaced withk-file-icon
-
k-file-name-size-wrap class
replaced withk-file-info
-
k-file-information
class replaced withk-file-summary
-
upload actions buttons wrapper renamed from
k-upload-status
tok-upload-actions
-
upload: The following classes are being removed:
-
k-upload-status-total
removed fromk-upload-status
-
k-validation-icon
removed from upload-status icon -
k-file-name-invalid
removed from k-file-name -
k-text-success
and k-text-error removed fromk-validation-message
-
upload: Updated rendering of the upload area with button and input
-
upload: Added kendo prefix to all upload variables:
Change variable names from $upload-*
to $kendo-upload-*
.
- loader: Added kendo prefix to all loader variables:
Change variable names from $loader-*
to $kendo-loader-*
.
-
fab: Remove styles for fab shape property
-
window: The following classes are being renamed:
-
k-window-actions
renamed tok-window-titlebar-actions
-
k-window-buttongroup
,k-window-buttons
renamed tok-window-actions
-
window: The following classes are being removed:
-
k-window-titleless
removed -
k-dialog-*
classes removed -
window: By default, the color of the titlebar is now the base color
and can be changed via the new themeColor property of the component -
dialog: The following classes are being renamed:
-
k-dialog-actions
renamed tok-dialog-titlebar-actions
-
k-dialog-buttongroup
andk-dialog-buttons
renamed tok-dialog-actions
-
dialog: By default, the color of the titlebar is now the base color
and can be changed via the new themeColor property of the component -
dialog: Added kendo prefix to all dialog variables:
Change variable names from $dialog-*
to $kendo-dialog-*
.
- window: Added kendo prefix to all window variables:
Change variable names from $window-*
to $kendo-window-*
.
-
notification: The following changes have been made to the notification classes:
-
removed
k-notification-wrap
-
added
k-notification-actions
andk-notification-action
classes -
notification: Added kendo prefix to all notification variables:
Change variable names from $notification-
to $kendo-notification-
- listbox: Added kendo prefix to all listbox variables:
Change variable names from $listbox-*
to $kendo-listbox-*
.
-
listbox: The following classes have been renamed:
-
k-listbox-toolbar
renamed tok-listbox-actions
-
k-listbox-toolbar-left
renamed tok-listbox-actions-left
-
k-listbox-toolbar-right
renamed tok-listbox-actions-right
-
k-listbox-toolbar-top
renamed tok-listbox-actions-top
-
k-listbox-toolbar-bottom
renamed tok-listbox-actions-bottom
-
progressbar: Add kendo prefix to all progressbar variables:
Change variable names from $progressbar-*
to $kendo-progressbar-*
.
-
progressbar: The following changes are introduced:
-
added
k-progressbar-value
class -
renamed css variable name from
--kendo-progressbar-progress
to--kendo-progressbar-value
-
progressbar: Changes to the following Progressbar classes:
-
added
k-chunk-progressbar
class -
added
k-progressbar-chunks
class -
k-item
class is replaced withk-progressbar-chunk
-
appbar: Added kendo prefix to all appbar variables:
Change variable names from $appbar-*
to $kendo-appbar-*
.
- drawer: Added kendo prefix to all drawer variables:
Change variable names from $drawer-*
to $kendo-drawer-*
.
- drop IE support
- forms: Added
size
appearance property.
The size
appearance property generates component specific class name k-form-{size}
.
- forms: Added kendo prefix to all form variables
Change variable names from $form-*
to $kendo-form-*
.
-
pager: Added
size
appearance property: -
size
controls the overall physical size of the pager and it's components.
Generates pager specific class name k-pager-{size}
.
- pager: Added kendo prefix to all pager variables:
Change variable names from $pager-*
to $kendo-pager-*
.
- pager: Replaced pager numbers with buttons:
The rendering ot the Pager component has been changed to use buttons instead of spans.
- toolbar: Added
size
appearance property.
The size
appearance property generates component specific class name k-toolbar-{size}
.
- toolbar: Added kendo prefix to all toolbar variables
Change variable names from $toolbar-*
to $kendo-toolbar-*
.
- html: The
k-overflow-anchor
class is renamed tok-toolbar-overflow-button
.