Kendo theme scss build

8 posts, 1 answers
  1. Matej
    Matej avatar
    69 posts
    Member since:
    Jun 2019

    Posted 31 Jan 2020 Link to this post

    Hi I have a problem with custom scss build and "x" clear button in ComboBox. With your css '@progress/kendo-theme-bootstrap/dist/all.css' the 'x' has style:

    .k-combobox .k-dropdown-wrap .k-clear-value {
        height: 1.5rem;
        line-height: 1.5rem;
        outline: 0;
        cursor: pointer;
        display: none;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        opacity: .5;
        position: absolute;
        top: .375rem;
        right: calc(0.75rem + 23.5px);
    }

     

    When I try to build "@progress/kendo-theme-bootstrap/scss/all.scss" the result is:

    .k-combobox .k-dropdown-wrap .k-clear-value {
        height: 1.5rem;
        line-height: 1.5rem;
        outline: 0;
        cursor: pointer;
        display: none;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        opacity: .5;
        position: absolute;
        top: 0.375rem;
        right: calc( calc( 0.75rem + 16px) + 1px + 6.5px); // this is invalid in IE11
    }

     

    My problem is that "right: calc( calc( 0.75rem + 16px) + 1px + 6.5px)" is not working in IE11 and the 'x' is on top of an arrow button.

    This example:

    - was created with "node-sass node_modules/@progress/kendo-theme-bootstrap/scss/all.scss src/common/styles/kendo-theme.css" 

    - not using any custom variable

    - not using any other css outside of this generated kendo-theme.css

    - "@progress/kendo-theme-bootstrap": "4.10.0",

    - "node-sass": "4.13.0",

     

    Shouldn't be this two code snippets identical?

  2. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 03 Feb 2020 Link to this post

    Hello, Matej,

    Thank you for the details.

    I used the approach described here to build the themes locally and the result was the same as in the distributed version:

    https://www.telerik.com/kendo-react-ui/components/styling/#toc-customizing-themes - changed 'npm run build' with 'npm run sass' we will fix it as soon as possible.

    I have attached the build version.

    Please let me know if you have followed the same steps.

    Regards,
    Stefan
    Progress Telerik

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Matej
    Matej avatar
    69 posts
    Member since:
    Jun 2019

    Posted 03 Feb 2020 Link to this post

    I didn't followed these steps because I don't want to use "the Build Process of the Themes". My goal is to use "(Recommended) Use the build process of your application" steps and my application is using node-sass for the scss compilation. If try to build your all.scss style with a script "node-sass node_modules/@progress/kendo-theme-bootstrap/scss/all.scss src/common/styles/kendo-theme.css" I  will get a kendo-theme.css which is not working in IE. 

    This is just an example I will have a lot of custom variables and scss styles in the future.

  4. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 04 Feb 2020 Link to this post

    Hello, Matej,

    I tested using the build process of an application created with Create React App, node-sass 4.13.0 and the result was as expected.

    Is it possible to share more details about the build process as there is maybe small detail that we are missing?

    Also, is sharing a runnable project is possible, I will be happy to inspect it locally and pinpoint where the issue is coming from.

    Regards,
    Stefan
    Progress Telerik

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Matej
    Matej avatar
    69 posts
    Member since:
    Jun 2019

    Posted 04 Feb 2020 in reply to Stefan Link to this post

    Hi,

    I attached a demo and generated src\kendo-theme.css file with "npm run build_kendo".  On a line 9237 is "right: calc( calc( 0.75rem + 16px) + 1px  + 6.5px);"

  6. Answer
    Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 05 Feb 2020 Link to this post

    Hello, Matej,

    Thank you for the project.

    This is indeed expected as we have a more complex building of the themes.

    The entire setup can be seen in our repository:

    https://github.com/telerik/kendo-themes

    The based requirements are in the new "gulpfile.js". It is started with `gulp sass`.

    I have attached the modified project.

    The generated file is in public/css.

    Regards,
    Stefan
    Progress Telerik

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Matej
    Matej avatar
    69 posts
    Member since:
    Jun 2019

    Posted 05 Feb 2020 in reply to Stefan Link to this post

    Thank you!
  8. James
    James avatar
    2 posts
    Member since:
    Mar 2020

    Posted 21 Mar 2020 Link to this post

    Heyy

    i'm new to React

    i'm learning bit by bit

    thanks for the infomation here i learned a bit 

Back to Top