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

Merge pull request #8843 from umbraco/v8/bugfix/8839-use-icon-for-plus-sign

Browse Source 
Review 8839 use icon for plus sign
This commit is contained in:
Warren Buckley
2020-10-01 12:11:44 +01:00
committed by GitHub
parent ad3ff4d4d4 ba399d8686
commit 182184d1db
5 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/blockpicker/blockpicker.html
View File

@@ -16,7 +16,7 @@
<div class="umb-pane" ng-if="vm.activeTab.alias === 'empty'">
<div class="form-search" ng-hide="vm.model.filter === false" style="margin-bottom: 20px;">
<div class="form-search" ng-if="vm.model.filter === true" style="margin-bottom: 20px;">
<i class="icon-search"></i>
<input type="text"
ng-model="searchTerm"
@@ -31,6 +31,7 @@
<umb-block-card
class="umb-outline"
umb-auto-focus="vm.model.filter === false && $index === 0"
ng-repeat="block in vm.model.availableItems | filter:searchTerm"
block-config-model="block.blockConfigModel"
element-type-model="block.elementTypeModel"

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 @@
text-align: left;
padding: 0 20px;
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);
}
}
}