Unplanned
Last Updated:
11 Oct 2024 10:30
by ADMIN
FranckSix
Created on:
04 Oct 2024 15:46
Type:
Feature Request
Svg for check-box background not suitable for scss variables
In theme builder the check-box and radio button have backgroud-image using svg to display the checkbox. But if I update $info or $primary or $kendo-checkbox-checked-text the svg is not updated.
Other way to diplay the check-box you can use clip-path, may be helpfull for this case.
An exemple working with variables
Other way to diplay the check-box you can use clip-path, may be helpfull for this case.
An exemple working with variables
$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
}
1 comment
ADMIN
Zhuliyan
Posted on:
11 Oct 2024 10:30