3225 - Suggestion: Style the default browser radio button as a custom one to provide a nicer UI experience (#3226)

src/Umbraco.Web.UI.Client/src/less/belle.less

@@ -101,6 +101,7 @@
 @import "components/umb-confirm-action.less";
 @import "components/umb-keyboard-shortcuts-overview.less";
 @import "components/umb-checkbox-list.less";
+@import "components/umb-radiobuttons-list.less";
 @import "components/umb-locked-field.less";
 @import "components/umb-tabs.less";
 @import "components/umb-load-indicator.less";

src/Umbraco.Web.UI.Client/src/less/components/umb-radiobuttons-list.less

@@ -0,0 +1,80 @@
+.umb-radiobuttons{
+    &__label{
+        position: relative;
+        padding: 0;
+
+        &-text{
+            margin: 0 0 0 32px;
+            position: relative;
+            top: 1px;
+        }
+    }
+
+    &__input{
+        position: absolute;
+        top: 0;
+        left: 0;
+        opacity: 0;
+
+        &:focus ~ .umb-radiobuttons__state{
+            box-shadow: 0 1px 3px fade(@black, 12%), 0 1px 2px fade(@black, 24%);
+        }
+
+        &:focus:checked ~ .umb-radiobuttons__state{
+            box-shadow: none;
+        }
+
+        &:checked ~ .umb-radiobuttons__state{
+            &:before{
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        &:checked ~ .umb-radiobuttons__state .umb-radiobuttons__icon{
+            opacity: 1;
+        }
+    }
+
+    &__state{
+        display: flex;
+        flex-wrap: wrap;
+        border: 1px solid @gray-8;
+        border-radius: 100%;
+        width: 22px;
+        height: 22px;
+        position: relative;
+
+        &:before{
+            content: "";
+            background: @green;
+            width: 0;
+            height: 0;
+            transition: .1s ease-out;
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            margin: auto;
+            border-radius: 100%;
+        }
+    }
+
+    &__icon{
+        color: @white;
+        text-align: center;
+        font-size: 15px;
+        opacity: 0;
+        transition: .3s ease-out;
+
+        &:before{
+            position: absolute;
+            top: 2px;
+            right: 0;
+            left: 0;
+            bottom: 0;
+            margin: auto;
+        }
+    }
+}

src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.html

@@ -1,12 +1,17 @@
 <div class="umb-editor umb-radiobuttons" ng-controller="Umbraco.PropertyEditors.RadioButtonsController">
     <ul class="unstyled">
         <li ng-repeat="item in model.config.items">
-            <label class="radio">
+            <label class="radio umb-radiobuttons__label">
                 <input type="radio" name="radiobuttons-{{model.alias}}"
                        value="{{item.id}}"
-                       ng-model="model.value" />
-                {{item.value}}
+                       ng-model="model.value"
+                       class="umb-radiobuttons__input" />
+
+                <div class="umb-radiobuttons__state">
+                    <i class="umb-radiobuttons__icon icon-check" aria-hidden="true"></i>
+                    <span class="umb-radiobuttons__label-text">{{item.value}}</span>
+                </div>
             </label>
         </li>
     </ul>
-</div>
+</div>