This is a migrated thread and some comments may be shown as answers.

Kendo less file implementation

1 Answer 118 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Andreas
Top achievements
Rank 1
Andreas asked on 11 Dec 2014, 03:02 PM
Im trying to integrate kendos less-files into our own theme-handling in our webpage. I have a few starting variables that I want to implement, for example: 

@primary-color: #99a4ae; /*gray*/
@secondary-color: #00b3e3; /*panton blue*/
@third-color: #c21e24; /*panton green*/ 

I then add the kendo.material.less to my lesscompiler, and then use these variables to replace the ones I feel are applicable in my case. In my first trial I wanted to make all the buttons into our secondary color so I was very pleased when i found the following line in kendo.material.less:

@button-background-color: #f9f9f9;

And so I changed this to:

@button-background-color: @secondary-color;

Then I start my project and realize that the spans as well as my kendo dropdownlists have gotten this color. Have I missunderstood the use of this less-variable, it seems to be affecting way to much, and when I look at the code, its later used in several places not applicable to the button:

/* Splitter */
@splitbar-background-color: @button-background-color;.

k-dropdown .k-state-default
{
    border-color: @button-border-color;
    .composite-background(@widget-gradient);
    background-position: 50% 50%;
    background-color: @button-background-color;
}

.k-dropdown,
span.k-colorpicker {
background-color: @button-background-color;
}

Could I get som feedback on the proper use of your less files and how I can use my varibles to only affect the background of the button? Files used in the project are kendo.material.ess and theme-template.less















1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 13 Dec 2014, 02:16 PM
Hello Andreas,

According to our designs, Buttons, DropDownLists and Splitter splitbars should have consistent appearance, that's why we are using the same color variable. Of course, you are not required to follow this pattern and can use different colors, according to your preferences.

On a side note, please avoid posting duplicate support tickets and forum threads, and when it is necessary to do so, please notify us in at least one of the two places. Thanks.

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
Andreas
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or