yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use icon-add instead of font plus + minor UI corrections

Browse Source
This commit is contained in:
Niels Lyngsø
2020-09-08 10:40:18 +02:00
parent 6091b9649a
commit ba399d8686
4 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.less
View File

@@ -4,7 +4,7 @@
margin-top: 4px;
border: 1px solid @gray-9;
border-radius: @baseBorderRadius;
transition: border-color 120ms;
transition: border-color 120ms, background-color 120ms;
.umb-block-list__block:not(.--active) &:hover {
border-color: @gray-8;

2
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.less
View File

@@ -14,7 +14,7 @@
padding-left: 20px;
padding-bottom: 2px;
user-select: none;
transition: border-color 120ms;
transition: border-color 120ms, background-color 120ms;
i {
font-size: 22px;

4
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-property-editor.html
View File

@@ -13,7 +13,9 @@
ng-click="vm.showCreateDialog($index, $event)"
ng-controller="Umbraco.PropertyEditors.BlockListPropertyEditor.CreateButtonController as inlineCreateButtonCtrl"
ng-mousemove="inlineCreateButtonCtrl.onMouseMove($event)">
<div class="__plus" ng-style="{'left':inlineCreateButtonCtrl.plusPosX}">+</div>
<div class="__plus" ng-style="{'left':inlineCreateButtonCtrl.plusPosX}">
<i class="icon icon-add" aria-hidden="true"></i>
</div>
</button>
<umb-block-list-row block-editor-api="vm.blockEditorApi"

21
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-property-editor.less
View File

@@ -179,6 +179,8 @@ ng-form.ng-invalid-val-server-match-settings > .umb-block-list__block > .umb-blo
left: 0;
height: 2px;
animation: umb-block-list__block--create-button_before 400ms ease-in-out alternate infinite;
transform: scaleX(.99);
transition: transform 240ms ease-out;
@keyframes umb-block-list__block--create-button_before {
0% { opacity: 1; }
@@ -197,39 +199,40 @@ ng-form.ng-invalid-val-server-match-settings > .umb-block-list__block > .umb-blo
height: 28px;
margin-left: -16px - 8px;
margin-top: -16px;
padding: 0;
border-radius: 3em;
font-size: 14px;
border: 2px solid @blueMid;
color: @blueMid;
line-height: 22px;
font-size: 20px;
font-weight: 800;
background-color: rgba(255, 255, 255, .96);
box-shadow: 0 0 0 2px rgba(255, 255, 255, .96);
transform: scale(0);
transition: transform 240ms ease-in;
animation: umb-block-list__block--create-button__plus 400ms ease-in-out infinite;
animation: umb-block-list__block--create-button__plus 400ms ease-in-out alternate infinite;
@keyframes umb-block-list__block--create-button__plus {
0% { color: rgba(@blueMid, 0.8); }
50% { color: rgba(@blueMid, 1); }
0% { color: rgba(@blueMid, 1); }
100% { color: rgba(@blueMid, 0.8); }
}
}
&:focus {
> .__plus {
border: 2px solid @ui-outline;
border-color: @ui-outline;
}
}
&:hover, &:focus {
opacity: 1;
transition-duration: 120ms;
&::before {
transform: scaleX(1);
}
> .__plus {
transform: scale(1);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
}
}