From 87340d6c2c998f8f38ed629068cc80bc80974547 Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <jaskov@gmail.com>
Date: Wed, 31 Oct 2018 21:24:35 +0100
Subject: [PATCH] Fix width issue on the checkbox label

---
 .../src/less/components/umb-checkbox-list.less | 18 ++++++++++++------
 .../checkboxlist/checkboxlist.html             |  4 +++-
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less
index bd914ab65c..a05c376ccc 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less
@@ -72,9 +72,10 @@
     &__label{
         position: relative;
         padding: 0;
+        margin: 0 0 15px 0;
 
         &-text{
-            margin: 0 0 0 32px;
+            margin: 0 0 0 10px;
             position: relative;
             top: 2px;
         }
@@ -86,14 +87,14 @@
         left: 0;
         opacity: 0;
 
-        &:focus ~ .umb-checkboxlist__state{
+        &:focus ~ .umb-checkboxlist__state .umb-checkboxlist__check{
             box-shadow: 0 1px 3px fade(@black, 12%), 0 1px 2px fade(@black, 24%);
         }
 
-        &:checked ~ .umb-checkboxlist__state{
+        &:checked ~ .umb-checkboxlist__state .umb-checkboxlist__check{
             &:before{
-                width: 100%;
-                height: 100%;
+                width: 20px;
+                height: 20px;
             }
         }
 
@@ -105,10 +106,15 @@
     &__state{
         display: flex;
         flex-wrap: wrap;
+        height: 20px;
+        position: relative;
+    }
+
+    &__check{
+        position: relative;
         border: 1px solid @gray-8;
         width: 20px;
         height: 20px;
-        position: relative;
 
         &:before{
             content: "";
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.html
index 52c3c11b70..8ddbfd5801 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.html
@@ -9,7 +9,9 @@
                        class="umb-checkboxlist__input" />
 
                 <div class="umb-checkboxlist__state">
-                    <i class="umb-checkboxlist__icon icon-check" aria-hidden="true"></i>
+                    <div class="umb-checkboxlist__check">
+                        <i class="umb-checkboxlist__icon icon-check" aria-hidden="true"></i>
+                    </div>
                     <span class="umb-checkboxlist__label-text">{{item.val}}</span>
                 </div>
             </label>