$kendo-checkbox-border-width: 3;
$kendo-checkbox-border: grey;
$kendo-checkbox-bg: lightgrey;
$kendo-checkbox-checked-bg: blue;
$border-radius: 5px;
$kendo-checkbox-md-size: 32px;
.cbstyle{
appearance: none;
position: relative;
background-color: $kendo-checkbox-bg;
border-width: $kendo-checkbox-border-width;
border-style: solid;
border-color: $kendo-checkbox-border;
border-radius: $border-radius;
height: $kendo-checkbox-md-size;
width: $kendo-checkbox-md-size;
}
.checked::after{
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(#{$kendo-checkbox-md-size} * .8);
height: calc(#{$kendo-checkbox-md-size} * .8);
background-color: $kendo-checkbox-checked-bg;
clip-path: polygon(20% 39%, 8% 39%, 45% 93%, 81% 13%, 70% 13%, 43% 74%); // checkbox icon
}
The documentation for the Telerik Design System says "Starting with themes version 9.0.0, the CSS Utilities are no longer included in the Telerik and Kendo UI themes package."
This will be an issue for how I use the Telerik UI for Blazor package. I use the CSS utilities extensively. They should continue to be included in the themes.
If they are no longer in the themes, it will be very inconvenient to acquire them using NPM. I have no other need for NPM in my Blazor project. If I have to load them separately (which seems like a mistake to me) it would be much more "natural" if they would be distributed via NuGet.
Please consider a USWDS Theme. I'm referring to the design system https://designsystem.digital.gov/
This support would be a great way to incorporate Telerik components into projects for US Goverment clients.
Material 3:
Request for Telerik UI for Blazor toolkit and Figma UI Toolkit to support Material Design 3 (versus 2) guidelines published late October 2021. Competitors are supporting it.
Website is https://m3.material.io/
Hi, Team!
Currently, the Kendo Material theme is compliant with Material Design 2. I would like to request compliance with Material Design 3.
I would like to request that Telerik host all of the required nuget packages for Telerik.ui.for.Blazor on Telerik's nuget server.
Currently, all of the packages are there except for Telerik.FontIcons and Telerik.SvgIcons which are hosted on nuget.org instead. This is inconvenient when using Package Source mapping, where ideally all Telerik.* packages can be sourced direct from Telerik.
When you have a button inside a MultiSelect Footer template (for example), it is different visualized compared to the same button outside of the component. This comes from the k-list-container that is applied when a button is inside a toolbar.
-------ADMIN EDIT---------
A possible workaround for the scenario is to use custom styles as shown below:
<div class="row">
<div class="col-2">
<TelerikButton ButtonType="Telerik.Blazor.ButtonType.Button"
Icon="k-icon k-i-add"
Primary="true">
New Value
</TelerikButton>
</div>
<div class="col-10">
<TelerikMultiSelect Data="@(
new List<SelectListItem>()
{
{ new SelectListItem { Text = "Text 1", Value = "Value1" } },
{ new SelectListItem { Text = "Text 2", Value = "Value2" } },
{ new SelectListItem { Text = "Text 3", Value = "Value3" } },
{ new SelectListItem { Text = "Text 4", Value = "Value4" } }
})"
FilterOperator="StringFilterOperator.Contains"
Filterable="true"
TItem="SelectListItem"
TValue="string"
TextField="Text"
ValueField="Value">
<FooterTemplate>
<TelerikButton ButtonType="Telerik.Blazor.ButtonType.Button"
Class="my-nested-button"
Icon="k-icon k-i-add"
Primary="true">
New Value
</TelerikButton>
</FooterTemplate>
</TelerikMultiSelect>
</div>
</div>
@code{
public class SelectListItem
{
public string Value { get; set; }
public string Text { get; set; }
}
}
<style>
.k-list-container .k-button.my-nested-button {
background-color: #ff6358;
align-items: flex-start;
align-self: flex-start;
}
.k-list-container .k-button-primary.my-nested-button,
.k-list-container .k-button.k-primary.my-nested-button {
/*copy the colors from the basic button*/
border-color: #ff6358;
color: #ffffff;
background-color: #ff6358;
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.04));
/*change the flex alignment form the parent container*/
align-items: flex-start;
align-self: flex-start;
}
</style>
A new Kendo UI theme which is in compliance with and extends Zurb Foundation styles -> http://foundation.zurb.com/sites/docs/kitchen-sink.html
Currently there are 3 application themes: Default, Material, and Bootstrap.
These are nice and helpful however having 3 is quite a bit limiting.
I totally understand that a lot of people will and maybe should create a theme based on their own styles and preferences.
However I honestly think most people probably use a default theme and make small corrections to it in order to suit their needs.
-------
Admin edit: We will be keeping here a list of the suggestions, add your comment which one you would like to see implemented - if it's not on this list, we will add it:
------
In WPF there are 20 or so styles.
Why only 3 in Blazor when the web is just as easy to style as WPF?
Especially with dark themes such as Metro Black, the traditional browser scrollbar does not really fit. I know scrollbar customization is not available in all browsers, but no fallback support is required (as the css is simply ignored by these browsers), and I believe it would greatly benefit users of the browsers that are supported.
Hi there,
as we are building apps for SharePoint and Office we are in need of a theme that looks like Office 365. Kendo UI for jQuery has that but there's a big shift towards building those apps with Typescript and React. Unfortunately the Kendo UI React package doesn't provide an Office 365 theme so everything we build doesn't integrate well to the look and feel of SharePoint and Office.
It would be great if you were able to migrate that theme over from jQuery to the React components.
Thanks and kind regards
Christian