Kendo theme scss build

[Matej]

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?

[Stefan]

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

[Matej]

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.

[Stefan]

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

[Matej]

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);"

[Stefan]

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

[Matej]

Thank you!

[James]

Heyy

i'm new to React

i'm learning bit by bit

thanks for the infomation here i learned a bit