From 9230de5383adc2c0bbd4af940d03abe887729c71 Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <jaskov@gmail.com>
Date: Tue, 23 Oct 2018 17:06:10 +0200
Subject: [PATCH] 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 |  1 +
 .../components/umb-radiobuttons-list.less     | 80 +++++++++++++++++++
 .../radiobuttons/radiobuttons.html            | 13 ++-
 3 files changed, 90 insertions(+), 4 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/umb-radiobuttons-list.less

diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index 7f10c3d4d7..9b9be85053 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/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";
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-radiobuttons-list.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-radiobuttons-list.less
new file mode 100644
index 0000000000..2fe3487a8f
--- /dev/null
+++ b/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;
+        }
+    }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.html
index cdb5a37ac8..7af6491641 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.html
+++ b/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>
\ No newline at end of file
+</div>