Sass theme based on bootstrap 4 issues

[Dion]

Hi,

I've been trying to use the sass theme builder to replace the kendo theme delivered by the CDN here https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.bootstrap-v4.min.css

 

When I go on the SASS builder, select to start based on bootstrap 4, I change the colours and download the compiled .css but there are some fundamental differences in the bootstrap source between the standard theme and the generated theme.

My understanding is that the theme produced by the themebuilder should be the same with the only difference being the colour, however I've already noticed the following differences

CDN version

.k-textbox { padding: .375rem .75rem; ...

SASS generated version

.k-textbox { padding: 0; ...

 

another one (slightly different css selected but different display type for form component. 

CDN version 

.k-dropdown .k-dropdown-wrap .k-input, .k-dropdowntree .k-dropdown-wrap .k-input { display: flex;...

SASS version 

.k-dropdown, .k-dropdowntree { display: inline-flex;

 

So in summary if I use the SASS generated version, I will have to override a number of the generated css that is not relating to color theme in order to 'fix' it back to bootstrap standards. This is undesirable. I just want to be able to switch in the SASS generated version to replace the color set which is how I understand it should work.

 

thanks

 

[Dion]

Just further information, I have since found that selecting all controls to be included in the generated css reduces the number of differences between the CDN hosted styles and the SASS generated ones. I suspect there are a number of controls which are relying on css which is not included if you are selectively including controls.

for example the multiselect control which requires the following

.k-display-none, .k-hidden {
display: none !important;
}

which is not included in the generated css if you only select the multiselect control to include in the theme (the loading spinner then stays visible at all times.

 

this can be reproduced on the theme builder page just by making a new theme and only including the multi select. you can see straight away that the loading spinner is always there.

[Dion]

adding more things missing from the SASS generated bootstrap based theme

Had to add the following css in a custom css file to fix the location of the clear button and loading indicator in the autocomplete control 

.k-autocomplete .k-clear-value {
    justify-content: center;
    align-items: center;
    position: absolute;
    top: .375rem;
    right: 6.5px;
    flex-direction: row;
    height: 1.5rem;
    line-height: 1.5rem;
}

.k-autocomplete .k-i-loading {
    justify-content: center;
    align-items: center;
    position: absolute;
    top: .375rem;
    right: 6.5px;
    flex-direction: row;
    height: 1.5rem;
    line-height: 1.5rem;
}

 

without it they appear underneath the control if I use only the css downloaded from theme builder

[Aleksandar]

Hello Dion,

Thank you for reaching out. I will need some time to investigate and will get back to you in this thread with additional details.

Regards,
Aleksandar
Progress Telerik

[Aleksandar]

Hello Dion,

Thank you for your patience. The reason for the observed difference is that the ThemeBuilder is using the latest styles from the master branch of this repository:

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

And there were indeed changes made between v2020.2.513 and the latest v2020.3.1118. What I can suggest is either updating to the latest scripts and styles and creating a custom theme for them using the Themebuilder, or considering cloning locally the distribution matching the version you have v2020.2.513 based on the version compatibility list, modifying the variables you need changed and running a custom build

I hope this clarifies the observed differences.

Regards,
Aleksandar
Progress Telerik

[Dion]

Thankyou Aleksandar

I'm now referencing the 2020.3.1118 script files and and removed the css I mentioned above that was added and all seems to be working now.

It might help to have the themebuilder say which script version you need to reference, I don't see that mentioned anywhere on the theme builder site, so it didnt even occur to me.

thanks again