diff --git a/src/Umbraco.Web.UI.Client/src/views/blockelements/inlineblock/inlineblock.editor.less b/src/Umbraco.Web.UI.Client/src/views/blockelements/inlineblock/inlineblock.editor.less
index a1e5b54c35..2702ca163a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/blockelements/inlineblock/inlineblock.editor.less
+++ b/src/Umbraco.Web.UI.Client/src/views/blockelements/inlineblock/inlineblock.editor.less
@@ -1,7 +1,7 @@
.blockelement-inlineblock-editor {
- margin-bottom: 2px;
- margin-top: 2px;
+ margin-bottom: 4px;
+ margin-top: 4px;
border: 1px solid @gray-9;
border-radius: @baseBorderRadius;
transition: border-color 120ms;
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.createButton.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.createButton.controller.js
new file mode 100644
index 0000000000..1a0b4f6241
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.createButton.controller.js
@@ -0,0 +1,18 @@
+(function () {
+ "use strict";
+
+ angular
+ .module("umbraco")
+ .controller("Umbraco.PropertyEditors.BlockListPropertyEditor.CreateButtonController",
+ function BlockListController($scope) {
+
+ var vm = this;
+ vm.plusPosX = 0;
+
+ vm.onMouseMove = function($event) {
+ vm.plusPosX = $event.offsetX;
+ }
+
+ });
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.html
index 4aa3b0f6b1..fc957ce003 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.html
@@ -11,7 +11,10 @@
type="button"
class="btn-reset umb-block-list__block--create-button"
ng-click="vm.showCreateDialog($index, $event)"
+ ng-controller="Umbraco.PropertyEditors.BlockListPropertyEditor.CreateButtonController as vm"
+ ng-mousemove="vm.onMouseMove($event)"
>
+
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.less b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.less
index d470ee97cf..4194b5d89e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.less
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.less
@@ -71,7 +71,7 @@
opacity: 0;
outline: none;
height: 12px;
- margin-top: -6px;
+ margin-top: -9px;
padding-top: 6px;
margin-bottom: -6px;
transition: opacity 240ms;
@@ -79,7 +79,9 @@
&::before {
content: '';
position: absolute;
- background-color: @ui-outline;
+ background-color: @blueMid;
+ border-top:1px solid white;
+ border-bottom:1px solid white;
border-radius: 2px;
top:5px;
right: 0;
@@ -92,21 +94,21 @@
100% { opacity: 0.5; }
}
}
- &::after {
- content: "+";
- margin-left: auto;
- margin-right: auto;
+ > .__plus {
+ position: absolute;
+ pointer-events: none;// lets stop avoiding the mouse values in JS move event.
+ margin-left: -18px - 10px;
margin-top: -18px;
margin-bottom: -18px;
width: 28px;
height: 25px;
padding-bottom: 3px;
border-radius: 3em;
- border: 2px solid @ui-outline;
+ border: 2px solid @blueMid;
display: flex;
justify-content: center;
align-items: center;
- color: @ui-outline;
+ color: @blueMid;
font-size: 20px;
font-weight: 800;
background-color: rgba(255, 255, 255, .96);
@@ -115,20 +117,20 @@
transition: transform 240ms ease-in;
animation: umb-block-list__block--create-button_after 800ms ease-in-out infinite;
@keyframes umb-block-list__block--create-button_after {
- 0% { color: rgba(@ui-outline, 0.8); }
- 50% { color: rgba(@ui-outline, 1); }
- 100% { color: rgba(@ui-outline, 0.8); }
+ 0% { color: rgba(@blueMid, 0.8); }
+ 50% { color: rgba(@blueMid, 1); }
+ 100% { color: rgba(@blueMid, 0.8); }
}
}
&:focus {
- &::after {
+ > .__plus {
border: 2px solid @ui-outline;
}
}
&:hover, &:focus {
opacity: 1;
transition-duration: 120ms;
- &::after {
+ > .__plus {
transform: scale(1);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}