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

Fix styling of confirm actions in tags editor (#8528)

Browse Source
This commit is contained in:
Bjarne Fyrstenborg
2020-07-31 10:40:40 +02:00
committed by GitHub
parent 538b867447
commit c33229840f
7 changed files with 106 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Umbraco.Web.UI.Client/src/less/belle.less
+1
View File
@@ -175,6 +175,7 @@
@import "components/umb-dropdown.less";
@import "components/umb-range-slider.less";
@import "components/umb-number.less";
@import "components/umb-tags-editor.less";
@import "components/buttons/umb-button.less";
@import "components/buttons/umb-button-group.less";
src/Umbraco.Web.UI.Client/src/less/buttons.less
+1 -4
View File
@@ -336,20 +336,17 @@ input[type="submit"].btn {
// This is lifted from umb-group-builder.less
.btn-icon {
border: none;
border: none;
font-size: 18px;
position: relative;
cursor: pointer;
color: @ui-icon;
margin: 0;
padding: 5px 10px;
width: auto;
overflow: visible;
background: transparent;
line-height: normal;
outline: 0;
-webkit-appearance: none;
&:hover {
src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-action.less
+48 -81
View File
@@ -18,19 +18,6 @@
left: 0;
animation: fadeInUp 0.2s;
flex-direction: column;
.umb_confirm-action__overlay-action {
margin-bottom: 5px;
}
.umb_confirm-action__overlay-action.-confirm {
order: 1;
}
.umb_confirm-action__overlay-action.-cancel {
order: 2;
}
}
.umb_confirm-action__overlay.-right {
@@ -40,18 +27,6 @@
left: auto;
animation: fadeInLeft 0.2s;
flex-direction: row;
.umb_confirm-action__overlay-action {
margin-left: 5px;
}
.umb_confirm-action__overlay-action.-confirm {
order: 2;
}
.umb_confirm-action__overlay-action.-cancel {
order: 1;
}
}
.umb_confirm-action__overlay.-bottom {
@@ -61,18 +36,6 @@
left: 0;
animation: fadeInDown 0.2s;
flex-direction: column;
.umb_confirm-action__overlay-action {
margin-top: 5px;
}
.umb_confirm-action__overlay-action.-confirm {
order: 2;
}
.umb_confirm-action__overlay-action.-cancel {
order: 1;
}
}
.umb_confirm-action__overlay.-left {
@@ -82,55 +45,59 @@
left: -50px;
animation: fadeInRight 0.2s;
flex-direction: row;
}
.umb_confirm-action__overlay {
.umb_confirm-action__overlay-action {
margin-right: 5px;
&.-confirm {
order: 1;
}
&.-cancel {
order: 2;
}
}
.umb_confirm-action__overlay-action.-confirm {
order: 1;
}
// BUTTONS
.umb_confirm-action__overlay-action {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: @white;
border-radius: 40px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
font-size: 18px;
cursor: pointer;
user-select: none;
.umb_confirm-action__overlay-action.-cancel {
order: 2;
&:hover {
text-decoration: none;
color: @white;
}
// confirm button
&.-confirm {
background: @white;
color: @green !important;
&:hover {
color: @green !important;
}
}
// cancel button
&.-cancel {
background: @white;
color: @red !important;
&:hover {
color: @red !important;
}
}
}
}
// BUTTONS
.umb_confirm-action__overlay-action {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: @white;
border-radius: 40px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
font-size: 18px;
cursor: pointer;
}
.umb_confirm-action__overlay-action:hover {
text-decoration: none;
color: @white;
}
// confirm button
.umb_confirm-action__overlay-action.-confirm {
background: @white;
color: @green !important;
}
.umb_confirm-action__overlay-action.-confirm:hover {
color: @green !important;
}
// cancel button
.umb_confirm-action__overlay-action.-cancel {
background: @white;
color: @red !important;
}
.umb_confirm-action__overlay-action.-cancel:hover {
color: @red !important;
}
src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
+1 -3
View File
@@ -355,14 +355,12 @@ input.umb-group-builder__group-title-input:disabled:hover {
position: relative;
margin: 5px 0;
button {
> button {
border: none;
font-size: 18px;
position: relative;
cursor: pointer;
color: @ui-icon;
margin: 0;
padding: 5px 10px;
width: auto;
src/Umbraco.Web.UI.Client/src/less/components/umb-tags-editor.less
+53
View File
@@ -0,0 +1,53 @@
.umb-tags-editor {
border: @inputBorder solid 1px;
padding: 5px;
min-height: 54px;
font-size: 13px;
text-shadow: none;
box-sizing: border-box;
.tag {
cursor: default;
margin: 10px;
padding: 10px 15px;
background: @blueExtraDark;
position: relative;
user-select: all;
.umb_confirm-action {
> .btn-icon {
color: @white;
padding: 0;
position: relative;
cursor: pointer;
padding-left: 2px;
font-size: 15px;
right: -5px;
bottom: -1px;
user-select: none;
}
.umb_confirm-action__overlay.-left {
top: 8px;
left: auto;
right: 15px;
}
}
}
input {
border: none;
background: @white;
}
.twitter-typeahead {
margin: 10px;
margin-top: 16px;
vertical-align: top;
input {
padding-left: 0;
}
}
}
src/Umbraco.Web.UI.Client/src/less/property-editors.less
-44
View File
@@ -818,51 +818,7 @@
// Tags
// --------------------------------------------------
.umb-tags {
border: @inputBorder solid 1px;
padding: 5px;
min-height: 54px;
font-size: 13px;
text-shadow: none;
box-sizing: border-box;
.umb-property-editor--limit-width();
.tag {
cursor: default;
margin: 10px;
padding: 10px 15px;
background: @blueExtraDark;
position: relative;
user-select: all;
.icon-trash {
position: relative;
cursor: pointer;
padding-left: 2px;
font-size: 15px;
right: -5px;
bottom: -1px;
}
.umb_confirm-action__overlay.-left{
top: 6px;
left: auto;
right: 15px;
}
}
input {
border: none;
background: @white;
}
.twitter-typeahead {
margin: 10px;
margin-top: 16px;
vertical-align: top;
input {
padding-left: 0;
}
}
}
//
src/Umbraco.Web.UI.Client/src/views/components/tags/umb-tags-editor.html
+2 -1
View File
@@ -1,5 +1,6 @@
<div>
<div class="umb-tags-editor">
<ng-form name="vm.tagEditorForm">
<div ng-if="vm.isLoading">
<localize key="loading">Loading</localize>...
</div>