enabling transclude for umb-form-check

src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js

@@ -71,6 +71,7 @@
         templateUrl: 'views/components/forms/umb-checkbox.html',
         controller: UmbCheckboxController,
         controllerAs: 'vm',
+        transclude: true,
         bindings: {
             model: "=",
             inputId: "@",

src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbradiobutton.directive.js

@@ -69,6 +69,7 @@
         templateUrl: 'views/components/forms/umb-radiobutton.html',
         controller: UmbRadiobuttonController,
         controllerAs: 'vm',
+        transclude: true,
         bindings: {
             model: "=",
             inputId: "@",

src/Umbraco.Web.UI.Client/src/less/components/umb-form-check.less

@@ -6,12 +6,19 @@
     flex-wrap: wrap;
     align-items: center;
     position: relative;
-    padding: 0 0 0 26px !important;
+    padding: 0 0 0 0px !important;
     margin: 0;
     min-height: 22px;
-    line-height: 22px;
     cursor: pointer !important;
 
+    .umb-form-check__symbol {
+        margin-right: 10px;
+    }
+    .umb-form-check__info {
+
+    }
+    
+
     &.-small-text{
         font-size: 13px;
     }
@@ -22,7 +29,6 @@
 
     &__text {
         position: relative;
-        top: 1px;
         user-select: none;
     }
 
@@ -90,10 +96,6 @@
     &__state {
         display: flex;
         height: 18px;
-        margin-top: 2px;
-        position: absolute;
-        top: 0;
-        left: 0;
     }
 
     &__check {
@@ -101,6 +103,7 @@
         position: relative;
         background: @white;
         border: 1px solid @inputBorder;
+        border-radius: @baseBorderRadius;
         width: @checkboxWidth;
         height: @checkboxHeight;
 

src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html

@@ -1,22 +1,28 @@
 <label class="checkbox umb-form-check umb-form-check--checkbox {{vm.cssClass}}" ng-class="{ 'umb-form-check--disabled': vm.disabled }">
-    <input type="checkbox"
-           id="{{vm.inputId}}"
-           name="{{vm.name}}"
-           value="{{vm.value}}"
-           class="umb-form-check__input"
-           val-server-field="{{vm.serverValidationField}}"
-           ng-model="vm.model"
-           ng-disabled="vm.disabled"
-           ng-required="vm.required"
-           ng-change="vm.change()"/>
 
-    <span class="umb-form-check__state" aria-hidden="true">
-        <span class="umb-form-check__check">
-            <i class="umb-form-check__icon icon-check"></i>
+    <div class="umb-form-check__symbol">
+        <input type="checkbox"
+            id="{{vm.inputId}}"
+            name="{{vm.name}}"
+            value="{{vm.value}}"
+            class="umb-form-check__input"
+            val-server-field="{{vm.serverValidationField}}"
+            ng-model="vm.model"
+            ng-disabled="vm.disabled"
+            ng-required="vm.required"
+            ng-change="vm.change()"/>
+
+        <span class="umb-form-check__state" aria-hidden="true">
+            <span class="umb-form-check__check">
+                <i class="umb-form-check__icon icon-check"></i>
+            </span>
         </span>
-    </span>
+    </div>
+    <div class="umb-form-check__info" ng-transclude>
 
-    <i ng-if="vm.iconClass.length" class="{{vm.iconClass}}" aria-hidden="true"></i>
+        <i ng-if="vm.iconClass.length" class="{{vm.iconClass}}" aria-hidden="true"></i>
 
-    <span ng-if="vm.text.length" class="umb-form-check__text">{{vm.text}}</span>
+        <span ng-if="vm.text.length" class="umb-form-check__text">{{vm.text}}</span>
+
+    </div>
 </label>

src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html

@@ -1,16 +1,20 @@
 <label class="radio umb-form-check umb-form-check--radiobutton" ng-class="{ 'umb-form-check--disabled': vm.disabled }">
-    <input type="radio"
-           id="{{vm.inputId}}"
-           name="{{vm.name}}"
-           value="{{vm.value}}"
-           class="umb-form-check__input"
-           ng-model="vm.model"
-           ng-disabled="vm.disabled"
-           ng-required="vm.required"
-           ng-change="vm.change()" />
+    <div class="umb-form-check__symbol">
+        <input type="radio"
+            id="{{vm.inputId}}"
+            name="{{vm.name}}"
+            value="{{vm.value}}"
+            class="umb-form-check__input"
+            ng-model="vm.model"
+            ng-disabled="vm.disabled"
+            ng-required="vm.required"
+            ng-change="vm.change()" />
 
-    <span class="umb-form-check__state" aria-hidden="true">
-        <span class="umb-form-check__check"></span>
-    </span>
-    <span class="umb-form-check__text">{{vm.text}}</span>
+        <span class="umb-form-check__state" aria-hidden="true">
+            <span class="umb-form-check__check"></span>
+        </span>
+    </div>
+    <div class="umb-form-check__info" ng-transclude>
+        <span class="umb-form-check__text">{{vm.text}}</span>
+    </div>
 </label>