Hello,

we are using one custom LESS-file to configure our kendo theme and get our generated, bundled result CSS file. This LESS-file is referencing the specific theme files (in our case 'office365') inside the kendo styles-folder. Unfortunately there are rules with the 'calc' function, that are specially handled by the LESS compiler. Its not pushing the default statement to the CSS file, but a self-calculated one.

 

So this (kendo.common-office365.less - line 92):

calc(1.143em + (2*@button-padding-y) + 2px)

gets converted in the result CSS to this:

calc(4.001em)

 

And thats a wrong value, that shows me oversized buttons in the UI. To prevent this behaviour you should use the rule like this:

~'calc(1.143em + (2*@{button-padding-y}) + 2px)'

which gets the following correct result in the CSS file:

calc(1.143em + (2*.429em) + 2px)

Hi Jan,

We have inspected the element and it works properly on our side. Could you please specify what is the theme and if there is some our online demo where the issue is reproduced?

Regards,
Magdalena
Progress Telerik

We are using Visual Studio 2017 + LESS Compiler. Compiling the .less returns the wrong result as written in the first post. You will find more about this topic when googling "less calc problem".

Hello Jan,

Thank you for pointing the issue. We have updated your Telerik points because of reporting a bug. We have logged it for fixing here, so you can follow the issue.

Regards,
Magdalena
Progress Telerik

2018.3.1017 - default-v2 theme

 

Still this problem. Can this be fixed too please?

Jan,

could you point us to the location where the issue is? We've recently updated our theme build process and I think the issue might be solved, but I need to compare the output first.

Regards,
Ivan Zhekov
Progress Telerik

When I open the "kendo-ui/src/styles/web/kendo.default-v2.less" (Kendo UI v2018.3.1017) and search for "calc", I just find calc(...) instead of escaped ~'calc(...)'.

The next bit is probably going bore everyone, but it explains why there are differences in our themes. At the end I will answer the question, but we need the following to establish context.

(A quick note about sass and less: both are preprocessors for css meaning they compile down to pure css. sass is a bit older; both were originally written on ruby; less was moved to javascript; sass kinda stayed in the ruby until libsass which allowed various other implementations, including node-sass) 

Initially, themes for kendo were built with less, so they could be compiled in the browser. For the time, at that early stage it meant you could ship everything with a single js file, albeit not a small one. However, as kendo continued to be developed, it was no longer viable to compile the styles in the browser, so we compiled them build time and shipped the compiled css.

That part hasn't changed at all and it is important to know that the infrastructure around kendo themes is based on less.

When we started implementing the sass based themes, we had an issue: how to compile the themes. Like I just stated, our infrastructure was based on less. Adding another compiler would have increased the complexity and introduce a fork in our build process. Instead, since the sass themes are npm modules, we depend on the sass themes, get the dist file, rename it to less and then it's "compiled" with the rest of the less themes.

Which brings me to the question: why there is no escaped calc in default-v2, bootstrap-v4 and material-v2? The answer is quite simple: those themes are already compiled down to css and any optimizations that might have been made are already there, courtesy of postcss and plugins. Which is unlike the less themes which need to be compiled and when we need to calculate something, say add padding and border-width, we need to escape those variables for the calc to work correctly.

Regards,
Ivan Zhekov
Progress Telerik

Thank you for the clarification. Well after thinking a bit about the problem, I don't understand why I am using the .less file instead of the .css directly, because I add it to a bundle anyway. So I will bypass the less file now and my problem should be fixed.