Custom radio inputs

customize.dist/src/less2/include/checkmark.less

@@ -52,6 +52,7 @@
             display: flex;
             justify-content: center;
             border: 1px solid @colortheme_form-border;
+            flex-shrink: 0;
             &:after {
                 content: "";
                 display: none;
@@ -65,4 +66,68 @@
         }
 
     }
+
+    .cp-radio {
+        margin: 0;
+        display: flex;
+        align-items: center;
+        position: relative;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+
+        &.cp-radio-secondary {
+            .cp-radio-mark {
+                &:after {
+                    border-color: @colortheme_checkmark-col2;
+                }
+            }
+            input {
+                &:checked ~ .cp-radio-mark {
+                    background-color: @colortheme_checkmark-back2;
+                }
+            }
+        }
+        &:hover .cp-radio-mark {
+            background-color: @colortheme_checkmark-back0-active;
+        }
+
+        input {
+            display: none;
+            &:checked ~ .cp-radio-mark {
+                background-color: @colortheme_checkmark-back1;
+                &:after {
+                    display: block;
+                }
+            }
+        }
+        @radio-size: @dim1 * 3;
+        .cp-radio-mark {
+            margin-right: 10px;
+            position: relative;
+            height: @radio-size;
+            width: @radio-size;
+            background-color: @colortheme_checkmark-back0;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border: 1px solid @colortheme_form-border;
+            flex-shrink: 0;
+            &:after {
+                display: none;
+                content: "";
+                border-radius: 50%;
+                background: white;
+                width: @dim1;
+                height: @dim1;
+
+                //transform: rotate(45deg);
+                //border: solid @colortheme_checkmark-col1;
+                //border-width: 0 @width @width 0;
+            }
+        }
+
+    }
 }

customize.dist/src/less2/include/creation.less

@@ -1,6 +1,5 @@
 @import (once) "./colortheme-all.less";
 @import (once) "./tools.less";
-@import (once) "./checkmark.less";
 @import (once) './icon-colors.less';
 
 .creation_main(
@@ -112,6 +111,8 @@
                 flex-wrap: wrap;
                 font-size: 16px;
                 margin: 10px 0;
+                min-height: 28px;
+                line-height: 28px;
                 label {
                     flex: 1;
                 }
@@ -135,9 +136,11 @@
                 display: block;
                 overflow: hidden;
                 max-height: 0px;
+                max-width: 0px;
                 //margin-top: 10px;
                 &.active {
                     transition: max-height 0.5s ease-in-out;
+                    max-width: unset;
                     max-height: 100px;
                 }
             }
@@ -147,7 +150,7 @@
                     input, select {
                         font-size: 14px;
                         border: 1px solid @colortheme_form-border;
-                        height: 28px;
+                        height: 26px;
                         background-color: @colortheme_form-bg;
                         color: @colortheme_form-color;
                     }
@@ -275,8 +278,6 @@
                 display: inline-block;
             }
         }
-
-        .checkmark_main(20px);
     }
 
         @media screen and (max-height: 700px) {

customize.dist/src/less2/include/framework.less

@@ -5,6 +5,7 @@
 @import (once) './tokenfield.less';
 @import (once) './creation.less';
 @import (once) './tippy.less';
+@import (once) "./checkmark.less";
 
 .framework_main(@bg-color, @warn-color, @color) {
     .toolbar_main(
@@ -16,6 +17,7 @@
     .alertify_main();
     .tokenfield_main();
     .tippy_main();
+    .checkmark_main(20px);
     .creation_main(
         @bg-color: @bg-color,
         @warn-color: @warn-color,
@@ -36,6 +38,7 @@
     .fileupload_main();
     .alertify_main();
     .tippy_main();
+    .checkmark_main(20px);
 }