Merge pull request #2816 from BatJan/features/temp-U4-11541

U4-11541 - Change the color pickers "active" appearance

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

@@ -115,6 +115,7 @@
 @import "components/umb-empty-state.less";
 @import "components/umb-property-editor.less";
 @import "components/umb-color-swatches.less";
+@import "components/check-circle.less";
 @import "components/umb-iconpicker.less";
 @import "components/umb-insert-code-box.less";
 @import "components/umb-packages.less";

src/Umbraco.Web.UI.Client/src/less/components/check-circle.less

@@ -0,0 +1,20 @@
+.check_circle {
+    display: flex;
+    opacity: 0;
+    width: 20px;
+    height: 20px;
+    margin: 0 auto;
+
+    .icon {
+        background-color: rgba(0,0,0,.15);
+        border-radius: 50%;
+        color: @white;
+        font-size: 1em;
+        display: flex;
+        width: 100%;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+        float: left;
+    }
+}

src/Umbraco.Web.UI.Client/src/less/components/umb-color-swatches.less

@@ -18,36 +18,12 @@
             box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
         }
 
-        .check_circle {
-            display: none;
-            visibility: hidden;
-            width: 20px;
-            height: 20px;
-            margin: 0 auto;
-
-            .icon {
-                font-size: 1em;
-                display: flex;
-                width: 100%;
-                height: 100%;
-                align-items: center;
-                justify-content: center;
-                border-radius: 50%;
-                background-color: rgba(0,0,0,.15);
-                float: left;
-            }
-        }
-
         &.active {
             .check_circle {
-                display: flex;
-                visibility: visible;
+                opacity: 1;
             }
         }
 
-        &.umb-color-box--s {
-        }
-
         &.umb-color-box--m {
             width: 40px;
             height: 40px;

src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less

@@ -53,26 +53,19 @@
         margin: 5px;
         border-radius: 3px;
     }
- 
-  
-    .check_circle{
-        width: 20px;
-        height: 20px;
-       
-    }
- 
+
     // Hide Circle when not active
     i.small{
     display: none;
     }
- 
+
     // Circle behind the checkmark
     i.small.active{
-    font-size: 14px;
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    background-color: rgba(0,0,0,.15);
-    float: right;
+        font-size: 14px;
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background-color: rgba(0,0,0,.15);
+        float: right;
     }

src/Umbraco.Web.UI.Client/src/less/property-editors.less

@@ -134,27 +134,32 @@ div.umb-codeeditor .umb-btn-toolbar {
 // Color picker
 // --------------------------------------------------
 ul.color-picker li {
-  padding: 2px;
-  margin: 3px;
-  border: 2px solid transparent;
-  width: 60px;
+    padding: 2px;
+    margin: 3px;
+    border: 2px solid transparent;
+    width: 60px;
 
-  .thumbnail{
-      min-width: auto;
-      width: 58px;
-      padding: 0;
-  }
-}
-ul.color-picker li.active {
-  border: 2px dashed @gray-8;
-}
-ul.color-picker li a  {
-  height: 50px;
-  display:block;
-  cursor:pointer;
-}
+    &.active {
+        .check_circle {
+            opacity: 1;
+        }
+    }
 
+    .thumbnail{
+        min-width: auto;
+        width: inherit;
+        padding: 0;
+    }
 
+    a {
+        height: 50px;
+        display:flex;
+        align-items: center;
+        justify-content: center;
+        cursor:pointer;
+        margin: 0 0 5px;
+    }
+}
 
 /* pre-value editor */
 .control-group.color-picker-preval {

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

@@ -7,7 +7,10 @@
     <ul class="thumbnails color-picker">
         <li ng-repeat="(key, val) in model.config.items" ng-class="{active: isActiveColor(val)}">
             <a ng-click="toggleItem(val)" class="thumbnail" hex-bg-color="{{val.value}}">
-            </a>
+                <div class="check_circle">
+                    <i class="icon icon-check small"></i>
+                </div>
+            </a>
             <span class="color-label" ng-if="model.useLabel" ng-bind="val.label"></span>
         </li>
     </ul>