Sync with Kendo UI Professional

Author: Kendo Bot

LICENSE.md

@@ -1,4 +1,4 @@
-This project has been released under the [Apache License, version 2.0](http://www.apache.org/licenses/LICENSE-2.0.html), the text of which is included below. This license applies ONLY to the source of this repository and does not extend to any other Kendo UI distribution or variant, or any other 3rd party libraries used in a repository. For licensing information about Kendo UI, see the [License Agreements page](http://www.telerik.com/purchase/license-agreement/kendo-ui-professional) at [KendoUI.com](http://www.kendoui.com).
+This project has been released under the [Apache License, version 2.0](http://www.apache.org/licenses/LICENSE-2.0.html), the text of which is included below. This license applies ONLY to the source of this repository and does not extend to any other Kendo UI distribution or variant, or any other 3rd party libraries used in a repository. For licensing information about Kendo UI, see the [License Agreements page](https://www.kendoui.com/purchase/license-agreement.aspx) at [KendoUI.com](http://www.kendoui.com).
 
 > Copyright © 2014-2015 Telerik
 

styles/web/common/base.less

@@ -614,7 +614,7 @@ input.k-checkbox,
 .k-radio-label {
    display: inline-block;
    position: relative;
-   padding-left: (@checkbox-size + (4 * @checkbox-border-width));
+   padding-left: (@checkbox-size*1.8);
    vertical-align: text-top;
    line-height: 16px;
    cursor: pointer;

styles/web/kendo.blueopal.less

@@ -32,3 +32,4 @@
 @fallback-texture: url('textures/highlight.png');
 
 @import "type-default.less";
+@checkbox-active-border-color: contrast(@selected-background, lighten(@accent, 38%), darken(@accent, 29%), 0.5);

styles/web/kendo.default.less

@@ -32,3 +32,6 @@
 @fallback-texture: url('textures/highlight.png');
 
 @import "type-default.less";
+
+@checkbox-active-border-color: darken(@base, 24%);
+@checkbox-active-box-shadow: 0 0 2px 0 @checkbox-active-border-color;

styles/web/kendo.uniform.less

@@ -32,3 +32,5 @@
 @fallback-texture: url('textures/highlight.png');
 
 @import "type-default.less";
+
+@checkbox-active-box-shadow: 0 0 2px 0 @checkbox-active-border-color;

styles/web/themes/checkbox.less

@@ -45,7 +45,7 @@
 }
 
 .k-checkbox:checked:active + .k-checkbox-label:before,
-.k-checkbox:checked + .k-checkbox-label:before {
+.k-checkbox:checked + .k-checkbox-label:active:before {
     box-shadow: @checkbox-active-box-shadow;
     border-color: @checkbox-active-border-color;
 }
@@ -68,7 +68,8 @@
     border-radius: @checkbox-border-radius;
 }
 
-.k-checkbox:focus + .k-checkbox-label:before {
+.k-checkbox:focus + .k-checkbox-label:before,
+.k-checkbox:focus + .k-checkbox-label:hover:before {
     border-color: @checkbox-active-border-color;
     box-shadow: @checkbox-active-box-shadow;
 }

styles/web/type-highcontrast.less

@@ -2280,7 +2280,7 @@ html .km-pane-wrapper .km-widget,
 @checkbox-border-radius: 3px;
 @checkbox-background-color: darken(@base, 7%);
 @checkbox-hover-border-color: @normal-text-color;
-@checkbox-hover-box-shadow: 0 0 1px 0 #fff;
+@checkbox-hover-box-shadow: 0 0 0 1px #fff;
 @checkbox-checked-border-color: @normal-text-color;
 @checkbox-checked-color: @normal-text-color;
 @checkbox-active-border-color: @normal-text-color;

styles/web/type-material.less

@@ -2287,37 +2287,57 @@ html .km-pane-wrapper .km-widget,
 @checkbox-hover-border-color: lighten(@normal-text-color, 23%);
 @checkbox-checked-border-color: @accent;
 @checkbox-checked-background-color: @accent;
-@checkbox-checked-color: saturate(@background, 29%);
-@checkbox-active-border-color: lighten(@normal-text-color, 23%);
+@checkbox-checked-color: contrast(@checkbox-checked-background-color, saturate(@background, 29%), );
+@checkbox-active-border-color: lighten(@accent, 23%);
 @checkbox-active-box-shadow: none;
 @checkbox-disabled-background-color: contrast(@background, lighten(@background, 20%), darken(@background, 4%), 0.5);
 @checkbox-disabled-color: @disabled-text-color;
 @checkbox-disabled-border-color: contrast(@background, lighten(@background, 20%), darken(@background, 25%), 0.5);
 @checkbox-indeterminate-background-color: @accent;
 @checkbox-indeterminate-border-color: @accent;
 
+.k-checkbox-label:before {
+    background: transparent;
+}
+
 .k-checkbox + .k-checkbox-label:after {
     content: "";
     position: absolute;
     top: 1px;
     left: 1px;
     border-radius: 50%;
-    width: 1em;
-    height: 1em;
+    width: 16px;
+    height: 16px;
+    box-shadow: 0 0 0 0px transparent;
+    transition: box-shadow 0.3s;
+}
+
+.k-checkbox:focus + .k-checkbox-label:before {
+    border-color: @checkbox-border-color;
+}
+.k-checkbox:checked + .k-checkbox-label:before,
+.k-checkbox:checked:hover + .k-checkbox-label:before,
+.k-checkbox:checked + .k-checkbox-label:hover:before {
+    border-color: @checkbox-checked-border-color
 }
 
 .k-checkbox:focus + .k-checkbox-label:after {
-    box-shadow: 0 0 0 12px fadeout(@hover-background, 70%);
+    box-shadow: 0 0 0 12px fadeout(@checkbox-border-color, 80%);
+    background: fadeout(@checkbox-border-color, 80%);
 }
 
 .k-checkbox:active + .k-checkbox-label:after,
 .k-checkbox + .k-checkbox-label:active:after {
-    box-shadow: 0 0 0 12px fadeout(@hover-background, 70%);
+    box-shadow: 0 0 0 12px fadeout(@checkbox-active-border-color, 60%);
+    background: fadeout(@checkbox-active-border-color, 60%);
 }
 
+.k-checkbox:checked:focus + .k-checkbox-label:after,
+.k-checkbox:checked + .k-checkbox-label:focus:after,
 .k-checkbox:checked:active + .k-checkbox-label:after,
 .k-checkbox:checked + .k-checkbox-label:active:after {
-    box-shadow: 0 0 0 12px fadeout(@accent, 70%);
+    box-shadow: 0 0 0 12px fadeout(@checkbox-active-border-color, 60%);
+    background: fadeout(@checkbox-active-border-color, 60%);
 }
 
 .k-checkbox:disabled + .k-checkbox-label:active:after {

styles/web/type-nova.less

@@ -1529,7 +1529,7 @@ input.k-textbox:active {
 @checkbox-border-color: darken(@widget-background-color, 12%);
 @checkbox-border-radius: @inputs-border-radius;
 @checkbox-background-color: @widget-background-color;
-@checkbox-hover-border-color: darken(@base, 24%);
+@checkbox-hover-border-color: @checkbox-border-color;
 @checkbox-hover-box-shadow: none;
 @checkbox-checked-border-color: darken(@widget-background-color, 12%);
 @checkbox-checked-background-color: @widget-background-color;