Sass themes issues

[Syleps]

Hi,

I have some issues with sass themes.

My context : Asp.Net MVC & scss files from https://github.com/telerik/kendo-theme-default

 

1) IE11 & grid

There are positioning problems with the filter, column and refresh icons on the grid (cf themebuilder & filter icon on header).
One of them comes from the use of nested calc for the bottom property

 

2) IE11 & charts

When launching the themebuilder/asp.net  on IE11, the first time the charts don't display correctly.
If we change the theme via color swatch, they are OK.

 

3) Tabstrip color

When you put an item (Treeview, ...) in a tab, it takes the main color ($accent) instead of the text color ($text-color).

This is due to the class '.k-tabstrip .k-item' which must be replaced by '.k-tabstrip .k-tabstrip-items .k-item'

 

Regards

[Syleps]

Correction : using scss from https://github.com/telerik/kendo-themes

[Ivan Zhekov]

Hello.

Thank you for your report.

2) is a limitation of IE and we've tried numerous times to improve the said experience to no avail.
3) seem like a genuine bug and we'll fix that

I am not sure about 1). Do you think you could upload a screenshot, so I can see exactly what you mean?

Regards,
Ivan Zhekov
Progress Telerik

[Syleps]

Hi,

 

For the 1), go to your site https://themebuilder.telerik.com/aspnet-mvc with IE11

you can see that the filter icon on the grid is shifted

This is due to the nesting of 2 calc for the bottom property :

bottom : calc( 8px + 0.71429em + (-1 * calc( 4px + 0.71429em) ))

And IE doesn't like that. He want :

bottom : calc( 8px + 0.71429em + (-1 * ( 4px + 0.71429em) ))

 

For 2) We use charts in our screens and it works even on IE, so ...

 

Regards

[Ivan Zhekov]

Hi.

For themebuilder we use node-sass, where as for theme development (and publish) we use webpack with various loaders (autoprefixer, reduce calc etc). Due to the nature of the themes, at times we need to add variables and if those happen to be in different unit types, we'll use calc; it's also possible that the result of a given calculation is used elsewhere, hence the nested calc.

While the production files are passed trough the aforementioned reduce calc, the themebuilder does not use such postcss plugins and that's why you get the nested calc expressions. Still, if you use the variables file against a theme and compile it locally, you should get rid of the nested calc.

We'll look into adding postcss in the themebuilder as well. But for now using the variables files and compiling locally seems like the only option to get rid of the nested calc.

Regards,
Ivan Zhekov
Progress Telerik