When setting the Toolbar's "size" property to "none", the Kendo-UI SASS themes apply a default spacing of 0 between all items. This can be adapted by altering the $kendo-toolbar-spacing variable. However, adding a value bigger than 0 leads to additional space before the first toolbar item.

This DOJO reproduces the behavior (since SASS-variables cannot be adapted in the DOJO-editor, I have mimicked the effect by setting appropriate styles to the container).

Note that this only happens if the toolbar's size is set to "none".

Kendo Theme Version: 7.0.2

The Kendo-UI "Classic" SASS theme supports the $kendo-calendar-cell-border variable. However, its value is never applied. This also means that variables like $kendo-calendar-cell-selected-border etc. do not have any effect, because they only set the border-color, but not the border itself.

Kendo Theme Version 7.0.2

The Kendo-UI SASS themes support setting the amount of spacing between items using the $kendo-pager-item-spacing variable. However, no spacing is added between the next/previous buttons and the "number" section.

Also, spacing does not work properly if the "select" element is disabled and therefore not displayed.

Kendo Theme Version: 7.0.2

See here:

https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss#LL804C1-L804C24

$input-btn-border-width is now a custom variable.

(see bootstrap 5.2 version: https://github.com/twbs/bootstrap/blob/v5.2.3/scss/_variables.scss#L738 where $input-btn-border-width was a simple scss variable)

The main problem is that on file:

@progress\kendo-theme-bootstrap\scss\input\_variables.scss you are using:

$kendo-input-border-width: $input-border-width !default;
$kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;

so scss compilation gives me an error:

SassError: Undefined operation "var(--bs-border-width) * 2".
   ╷
10 │ $kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;

My temporary fix is to define, before importing _variables file:

$kendo-input-border-width:      1px !default;

Basically, the main problem is that package @progress/kendo-theme-bootstrap 6.4.0 with bootstrap 5.3 doesn't work anymore.

Thanks.

Diego

Using the latest Classic Kendo theme, when showing a grid with a pager, the button indicating the currently selected page has a background that's a function of the button's text color (opacity .2). This results in a background color that lacks sufficient contrast with the text color which is not compliant with WCAG contrast rules for display text.

https://webaim.org/resources/contrastchecker/?fcolor=F35800&bcolor=F1D2C0

#F35800 is the default primary button color in the default theme and F1D2C0 is the color that results from the interaction between a background with opacity .2 laid over the default background grey #F0F0F0. I've attached a screenshot of the PowerToys color picker showing the computed color of the button.

The button background color needs to pass all of the WCAG checks in the above link in our application and really should by default in my opinion.

Hello,

I'm adding sass-loader to my webpack build so that I can keep up to date with the latest theme builds more easily. We simply use the default theme.

Webpack is giving me the following warning, however ...

WARNING in ./node_modules/@progress/kendo-theme-default/dist/all.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/@progress/kendo-theme-default/dist/all.scss)
Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($a, $b) or calc($a / $b)

More info and automated migrator: https://sass-lang.com/d/slash-div

node_modules\@progress\kendo-theme-default\dist\all.scss 1039:15  k-math-div()
node_modules\@progress\kendo-theme-default\dist\all.scss 4138:21  root stylesheet

 @ ./node_modules/@progress/kendo-theme-default/dist/all.scss 8:6-188 22:17-24 26:7-21 52:25-39 53:36-47 53:50-64 57:6-67:7 58:54-65 58:68-82 64:42-53 64:56-70 66:21-28 77:0-158 77:0-158 78:22-29 78:33-47 78:50-64 55:4-68:5

1 warning has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

Hi Kendo Team,

after we updated to version 2022.2.301 we decided to modify our theme by compiling the Metro theme from the source files and adjusting some of the variables provided.

When working on the multiselect styles however we noticed that changing the variable '@chip-solid-hover-text' in the 'type-metro.less' file did not lead to any change. The attached screenshot shows that the chip still keeps its black text color on hover even though the variable was set to white.

We inspected the _theme.less file in the folder Default/chip and noticed that the variable is not used by the theme (see screenshot).  Looking at the code this also seems to be the case for the 'selected' styles.

We can add additional styles to fix that on our end but since there is a variable for both cases I am sure this is just an oversight and wasn't planned.

Thanks,

Markus

Describe the bug
Starting from v2022.1.119 the scrollbar of the View Html tool of the Editor is missing.

To reproduce

1. Run this Dojo or the All Tools Demo
2. Click on the "View Html" Tool

Expected behavior
The textarea of the View Html's popup should be scrollable

Screenshots

Affected package (please remove the unneeded items)

• all themes

Affected suites (please remove the unneeded items)

• Kendo UI for jQuery

Affected browsers (please remove the unneeded items)

• All

Build system information (please remove the unneeded items)

• Not Applicable

Additional context
Bug also observed with Less Kendo jQuery Themes

In version 2.27 of Telerik UI for Blazor the following problematic behavior is observed with long labels in the Grid PopUp edit form:

• If no space is included, they are cut from the form
• If space is included, they are wrapped and not cut but are not matching the alignment of the other labels