Sass themes issues

5 posts, 0 answers
  1. Syleps
    Syleps avatar
    28 posts
    Member since:
    Nov 2013

    Posted 05 Aug 2018 Link to this post

    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

  2. Syleps
    Syleps avatar
    28 posts
    Member since:
    Nov 2013

    Posted 05 Aug 2018 Link to this post

    Correction : using scss from https://github.com/telerik/kendo-themes
  3. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    651 posts

    Posted 08 Aug 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  4. Syleps
    Syleps avatar
    28 posts
    Member since:
    Nov 2013

    Posted 08 Aug 2018 in reply to Ivan Zhekov Link to this post

    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

  5. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    651 posts

    Posted 10 Aug 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top