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
@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