Extraxt radio buttons styles for Default, Boostrap, Flat, Highcontras…

…t and Metro themes

styles/web/themes/radiobutton.less

@@ -0,0 +1,60 @@
+@radio-border-color: darken(@base, 12%);
+@radio-border-radius: 50%;
+@radio-border-width: 1px;
+@radio-background-color: @background;
+@radio-hover-border-color: darken(@base, 24%);
+@radio-hover-box-shadow: none;
+@radio-checked-background-color: @accent;
+@radio-active-border-color: lighten(@accent, 13%);
+@radio-active-box-shadow: 0 0 2px 0 lighten(@accent, 13%);
+@radio-disabled-background-color: @background;
+@radio-disabled-color: darken(@base, 10%);
+@radio-disabled-border-color: darken(@base, 12%);
+@radio-disabled-box-shadow: none;
+
+.k-radio-label:before {  
+   border-color: @radio-border-color;
+   border-radius: @radio-border-radius;
+   background-color: @radio-background-color;
+   border-width: @radio-border-width;
+}
+
+.k-radio-label:hover:before,
+.k-radio:checked + .k-radio-label:hover:before {
+   border-color: @radio-hover-border-color;
+   box-shadow: @radio-hover-box-shadow;
+}
+
+.k-radio:checked + .k-radio-label:after {
+   background-color: @radio-checked-background-color;
+   border-radius: @radio-border-radius; 
+}
+
+.k-radio-label:active:before {
+   border-color: @radio-active-border-color; 
+   box-shadow: @radio-active-box-shadow;  
+}
+
+.k-radio:checked + .k-radio-label:active:before {
+  box-shadow: @radio-active-box-shadow;
+  border-color: @radio-active-border-color;
+}
+
+.k-radio:disabled + .k-radio-label {
+   color: @radio-disabled-color;
+}
+
+.k-radio:disabled + .k-radio-label:before,
+.k-radio:disabled + .k-radio-label:active:before,
+.k-radio:disabled + .k-radio-label:hover:after,
+.k-radio:disabled + .k-radio-label:hover:before {
+    background: @radio-disabled-background-color;       
+    border-color: @radio-disabled-border-color;
+    box-shadow: @radio-disabled-box-shadow;
+}
+
+.k-radio:focus + .k-radio-label:before {
+   border-color: @radio-active-border-color;
+   box-shadow: @radio-active-box-shadow;
+}
+

styles/web/type-bootstrap.less

@@ -2174,68 +2174,7 @@ html .km-pane-wrapper .km-widget,
 }
 
 @import "themes/checkbox.less";
-
-//Radio buttons
-.k-radio-label:before {  
-  border-color: @radio-border-color-before;
-  border-radius: 50%;
-  background-color: @radio-background-color;
-  border-width: @radio-border-width-before;
-}
-
-.k-radio-label:hover:before,
-.k-radio:checked + .k-radio-label:hover:before  {
-   border-color: @radio-hover-border-color;
-   box-shadow: @radio-hover-box-shadow;
-}
-
-.k-radio:checked + .k-radio-label:before {
-   border-color: @radio-checked-border-color-before;
-}
-
-.k-radio:checked + .k-radio-label:after {
-  background-color: @radio-checked-background-color-after;
-  border-radius: 50%; 
-}
-
-.k-radio-label:active:before {
-  box-shadow: @radio-active-box-shadow; 
-  border-radius: 50%;
-  border-color: @radio-active-border-color-before;
-}
-
-.k-radio:checked + .k-radio-label:active:before {
-  box-shadow: @radio-checked-active-box-shadow; 
-  border-radius: 50%;
-  border-color: @radio-checked-active-border-color-before;
-}
-
-.k-radio:disabled + .k-radio-label {
-   color: @radio-disabled-color;
-}
-
-.k-radio:disabled + .k-radio-label:before {       
-   border-color: #bfbfbf;
-}
-
-.k-radio:disabled + .k-radio-label:active:before {
-  box-shadow: @radio-disabled-box-shadow;
-  background: @radio-disabled-background-color-before;
-}
-
-.k-radio:disabled + .k-radio-label:before {
-    background: @radio-disabled-background-color-after;
-}
-
-.k-radio:disabled + .k-radio-label:hover:after,
-.k-radio:disabled + .k-radio-label:hover:before {
-  box-shadow: @radio-disabled-box-shadow;
-}
-
-.k-radio:focus + .k-radio-label:before {
-  border-color: @radio-active-border-color-before;
-  box-shadow: @radio-active-box-shadow;
-}
+@import "themes/radiobutton.less";
 
 // Retina sprite
 @media only screen and (-webkit-min-device-pixel-ratio: 2),

styles/web/type-default.less

@@ -2183,67 +2183,17 @@ textarea.k-textbox,
 @checkbox-disabled-color: contrast(@base, lighten(@base, 6%), darken(@base, 29%), 0.5);
 @checkbox-disabled-border-color: darken(@success, 21%);
 
-//Radio buttons
-.k-radio-label:before {  
-  border-color: @radio-border-color-before;
-  border-radius: 50%;
-  background-color: @radio-background-color;
-  border-width: @radio-border-width-before;
-}
-
-.k-radio-label:hover:before,
-.k-radio:checked + .k-radio-label:hover:before  {
-   border-color: @radio-hover-border-color;
-   box-shadow: @radio-hover-box-shadow;
-}
-
-.k-radio:checked + .k-radio-label:before {
-   border-color: @radio-checked-border-color-before;
-}
-
-.k-radio:checked + .k-radio-label:after {
-  background-color: @radio-checked-background-color-after;
-  border-radius: 50%; 
-}
-
-.k-radio-label:active:before {
-  box-shadow: @radio-active-box-shadow; 
-  border-radius: 50%;
-  border-color: @radio-active-border-color-before;
-}
-
-.k-radio:checked + .k-radio-label:active:before {
-  box-shadow: @radio-checked-active-box-shadow; 
-  border-radius: 50%;
-  border-color: @radio-checked-active-border-color-before;
-}
-
-.k-radio:disabled + .k-radio-label {
-   color: @radio-disabled-color;
-}
+@import "themes/radiobutton.less";
 
-.k-radio:disabled + .k-radio-label:before {       
-   border-color: #bfbfbf;
-}
-
-.k-radio:disabled + .k-radio-label:active:before {
-  box-shadow: @radio-disabled-box-shadow;
-  background: @radio-disabled-background-color-before;
-}
-
-.k-radio:disabled + .k-radio-label:before {
-    background: @radio-disabled-background-color-after;
-}
-
-.k-radio:disabled + .k-radio-label:hover:after,
-.k-radio:disabled + .k-radio-label:hover:before {
-  box-shadow: @radio-disabled-box-shadow;
-}
-
-.k-radio:focus + .k-radio-label:before {
-  border-color: @radio-active-border-color-before;
-  box-shadow: @radio-active-box-shadow;
-}
+@radio-border-color: contrast(@base, lighten(@base, 1%), darken(@base, 14%), 0.5);
+@radio-background-color: #fff;
+@radio-hover-border-color: contrast(@base, lighten(@base, 2%), darken(@base, 24%), 0.5);
+@radio-checked-background-color: contrast(@selected-background, lighten(@accent, 3%), darken(@accent, 29%), 0.5);
+@radio-active-border-color: contrast(@selected-background, lighten(@accent, 1%), darken(@accent, 29%), 0.5);
+@radio-active-box-shadow: 0 0 3px 0 @accent;
+@radio-disabled-background-color: lighten(@hover-background, 21%);
+@radio-disabled-color: contrast(@base, lighten(@base, 6%), darken(@base, 29%), 0.5);
+@radio-disabled-border-color: #bfbfbf;
 
 // Retina sprite
 @media only screen and (-webkit-min-device-pixel-ratio: 2),

styles/web/type-flat.less

@@ -2177,67 +2177,14 @@ html .km-pane-wrapper .km-widget,
 @checkbox-disabled-color: darken(@background, 24%);
 @checkbox-disabled-border-color: darken(@background, 20%);
 
-//Radio buttons
-.k-radio-label:before {  
-  border-color: @radio-border-color-before;
-  border-radius: 50%;
-  background-color: @radio-background-color;
-  border-width: @radio-border-width-before;
-}
-
-.k-radio-label:hover:before,
-.k-radio:checked + .k-radio-label:hover:before  {
-   border-color: @radio-hover-border-color;
-   box-shadow: @radio-hover-box-shadow;
-}
-
-.k-radio:checked + .k-radio-label:before {
-   border-color: @radio-checked-border-color-before;
-}
-
-.k-radio:checked + .k-radio-label:after {
-  background-color: @radio-checked-background-color-after;
-  border-radius: 50%; 
-}
-
-.k-radio-label:active:before {
-  box-shadow: @radio-active-box-shadow; 
-  border-radius: 50%;
-  border-color: @radio-active-border-color-before;
-}
-
-.k-radio:checked + .k-radio-label:active:before {
-  box-shadow: @radio-checked-active-box-shadow; 
-  border-radius: 50%;
-  border-color: @radio-checked-active-border-color-before;
-}
-
-.k-radio:disabled + .k-radio-label {
-   color: @radio-disabled-color;
-}
+@import "themes/radiobutton.less";
 
-.k-radio:disabled + .k-radio-label:before {       
-   border-color: #bfbfbf;
-}
-
-.k-radio:disabled + .k-radio-label:active:before {
-  box-shadow: @radio-disabled-box-shadow;
-  background: @radio-disabled-background-color-before;
-}
-
-.k-radio:disabled + .k-radio-label:before {
-    background: @radio-disabled-background-color-after;
-}
-
-.k-radio:disabled + .k-radio-label:hover:after,
-.k-radio:disabled + .k-radio-label:hover:before {
-  box-shadow: @radio-disabled-box-shadow;
-}
-
-.k-radio:focus + .k-radio-label:before {
-  border-color: @radio-active-border-color-before;
-  box-shadow: @radio-active-box-shadow;
-}
+@radio-border-color: @accent;
+@radio-hover-border-color: lighten(@hover-background, 8%);
+@radio-active-border-color: @base;
+@radio-active-box-shadow: none;
+@radio-disabled-color: darken(@background, 24%);
+@radio-disabled-border-color: darken(@background, 20%);
 
 // Retina sprite
 @media only screen and (-webkit-min-device-pixel-ratio: 2),

styles/web/type-highcontrast.less

@@ -2173,67 +2173,17 @@ html .km-pane-wrapper .km-widget,
 @checkbox-disabled-color: lighten(@base, 22%);
 @checkbox-disabled-border-color: lighten(@background, 26%);
 
-//Radio buttons
-.k-radio-label:before {  
-  border-color: @radio-border-color-before;
-  border-radius: 50%;
-  background-color: @radio-background-color;
-  border-width: @radio-border-width-before;
-}
-
-.k-radio-label:hover:before,
-.k-radio:checked + .k-radio-label:hover:before  {
-   border-color: @radio-hover-border-color;
-   box-shadow: @radio-hover-box-shadow;
-}
-
-.k-radio:checked + .k-radio-label:before {
-   border-color: @radio-checked-border-color-before;
-}
-
-.k-radio:checked + .k-radio-label:after {
-  background-color: @radio-checked-background-color-after;
-  border-radius: 50%; 
-}
-
-.k-radio-label:active:before {
-  box-shadow: @radio-active-box-shadow; 
-  border-radius: 50%;
-  border-color: @radio-active-border-color-before;
-}
-
-.k-radio:checked + .k-radio-label:active:before {
-  box-shadow: @radio-checked-active-box-shadow; 
-  border-radius: 50%;
-  border-color: @radio-checked-active-border-color-before;
-}
-
-.k-radio:disabled + .k-radio-label {
-   color: @radio-disabled-color;
-}
-
-.k-radio:disabled + .k-radio-label:before {       
-   border-color: #bfbfbf;
-}
-
-.k-radio:disabled + .k-radio-label:active:before {
-  box-shadow: @radio-disabled-box-shadow;
-  background: @radio-disabled-background-color-before;
-}
-
-.k-radio:disabled + .k-radio-label:before {
-    background: @radio-disabled-background-color-after;
-}
-
-.k-radio:disabled + .k-radio-label:hover:after,
-.k-radio:disabled + .k-radio-label:hover:before {
-  box-shadow: @radio-disabled-box-shadow;
-}
-
-.k-radio:focus + .k-radio-label:before {
-  border-color: @radio-active-border-color-before;
-  box-shadow: @radio-active-box-shadow;
-}
+@import "themes/radiobutton.less";
+
+@radio-border-color: contrast(@base, lighten(@base, 1%), darken(@base, 14%), 0.5);
+@radio-background-color: #fff;
+@radio-hover-border-color: contrast(@base, lighten(@base, 2%), darken(@base, 24%), 0.5);
+@radio-checked-background-color: contrast(@selected-background, lighten(@accent, 3%), darken(@accent, 29%), 0.5);
+@radio-active-border-color: contrast(@selected-background, lighten(@accent, 1%), darken(@accent, 29%), 0.5);
+@radio-active-box-shadow: 0 0 3px 0 @accent;
+@radio-disabled-background-color: lighten(@hover-background, 21%);
+@radio-disabled-color: contrast(@base, lighten(@base, 6%), darken(@base, 29%), 0.5);
+@radio-disabled-border-color: #bfbfbf;
 
 // Retina sprite
 @media only screen and (-webkit-min-device-pixel-ratio: 2),