From 4da234a2e64c3f82f4315eaafd71b1e4f307ae4f Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Thu, 30 Jul 2020 20:06:50 +0200 Subject: [PATCH 1/7] Adjust styling for tags action buttons --- src/Umbraco.Web.UI.Client/src/less/buttons.less | 5 +---- src/Umbraco.Web.UI.Client/src/less/property-editors.less | 9 ++++++++- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/buttons.less b/src/Umbraco.Web.UI.Client/src/less/buttons.less index 2b50b60ae847..2caa2236470d 100644 --- a/src/Umbraco.Web.UI.Client/src/less/buttons.less +++ b/src/Umbraco.Web.UI.Client/src/less/buttons.less @@ -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 { diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less index 54ce94263221..400f3e73c799 100644 --- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less +++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less @@ -835,15 +835,21 @@ user-select: all; .icon-trash { + } + + .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{ + .umb_confirm-action__overlay.-left { top: 6px; left: auto; right: 15px; @@ -859,6 +865,7 @@ margin: 10px; margin-top: 16px; vertical-align: top; + input { padding-left: 0; } From b578d81b6370d95e2b462cf54e6b5e92a37be014 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Thu, 30 Jul 2020 20:07:34 +0200 Subject: [PATCH 2/7] Simplify less syntax --- .../less/components/umb-confirm-action.less | 104 +++++++++--------- 1 file changed, 51 insertions(+), 53 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-action.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-action.less index 6ecfd520724b..0305d657bd05 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-action.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-action.less @@ -21,16 +21,15 @@ .umb_confirm-action__overlay-action { margin-bottom: 5px; - } - .umb_confirm-action__overlay-action.-confirm { - order: 1; - } + &.-confirm { + order: 2; + } - .umb_confirm-action__overlay-action.-cancel { - order: 2; + &.-cancel { + order: 1; + } } - } .umb_confirm-action__overlay.-right { @@ -43,14 +42,14 @@ .umb_confirm-action__overlay-action { margin-left: 5px; - } - .umb_confirm-action__overlay-action.-confirm { - order: 2; - } + &.-confirm { + order: 2; + } - .umb_confirm-action__overlay-action.-cancel { - order: 1; + &.-cancel { + order: 1; + } } } @@ -64,14 +63,13 @@ .umb_confirm-action__overlay-action { margin-top: 5px; - } - - .umb_confirm-action__overlay-action.-confirm { - order: 2; - } - .umb_confirm-action__overlay-action.-cancel { - order: 1; + &.-confirm { + order: 2; + } + &.-cancel { + order: 1; + } } } @@ -98,39 +96,39 @@ // 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; -} + 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; + + &:hover { + text-decoration: none; + color: @white; + } -// cancel button -.umb_confirm-action__overlay-action.-cancel { - background: @white; - color: @red !important; -} + // confirm button + &.-confirm { + background: @white; + color: @green !important; -.umb_confirm-action__overlay-action.-cancel:hover { - color: @red !important; + &:hover { + color: @green !important; + } + } + // cancel button + &.-cancel { + background: @white; + color: @red !important; + + &:hover { + color: @red !important; + } + } } From a627bc21de7ef1457ad6082921d7866406c24166 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Thu, 30 Jul 2020 20:11:17 +0200 Subject: [PATCH 3/7] Simplify less syntax further --- .../less/components/umb-confirm-action.less | 109 +++++++----------- 1 file changed, 39 insertions(+), 70 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-action.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-action.less index 0305d657bd05..a6548123ac7f 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-action.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-action.less @@ -18,18 +18,6 @@ left: 0; animation: fadeInUp 0.2s; flex-direction: column; - - .umb_confirm-action__overlay-action { - margin-bottom: 5px; - - &.-confirm { - order: 2; - } - - &.-cancel { - order: 1; - } - } } .umb_confirm-action__overlay.-right { @@ -39,18 +27,6 @@ left: auto; animation: fadeInLeft 0.2s; flex-direction: row; - - .umb_confirm-action__overlay-action { - margin-left: 5px; - - &.-confirm { - order: 2; - } - - &.-cancel { - order: 1; - } - } } .umb_confirm-action__overlay.-bottom { @@ -60,17 +36,6 @@ left: 0; animation: fadeInDown 0.2s; flex-direction: column; - - .umb_confirm-action__overlay-action { - margin-top: 5px; - - &.-confirm { - order: 2; - } - &.-cancel { - order: 1; - } - } } .umb_confirm-action__overlay.-left { @@ -80,55 +45,59 @@ left: -50px; animation: fadeInRight 0.2s; flex-direction: row; +} + +.umb_confirm-action__overlay { .umb_confirm-action__overlay-action { margin-right: 5px; - } - .umb_confirm-action__overlay-action.-confirm { - order: 1; - } + &.-confirm { + order: 1; + } - .umb_confirm-action__overlay-action.-cancel { - order: 2; + &.-cancel { + order: 2; + } } -} - -// 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; - &:hover { - text-decoration: none; + // BUTTONS + .umb_confirm-action__overlay-action { + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; color: @white; - } - - // confirm button - &.-confirm { - background: @white; - color: @green !important; + border-radius: 40px; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); + font-size: 18px; + cursor: pointer; + user-select: none; &: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 { + // cancel button + &.-cancel { + background: @white; color: @red !important; + + &:hover { + color: @red !important; + } } } } From fe8ab54a1ce59f6439db156f25d28e7b50a110d5 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Thu, 30 Jul 2020 20:17:22 +0200 Subject: [PATCH 4/7] Adjust styling of confirm actions in tags --- src/Umbraco.Web.UI.Client/src/less/property-editors.less | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less index 400f3e73c799..87d787731901 100644 --- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less +++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less @@ -834,10 +834,7 @@ position: relative; user-select: all; - .icon-trash { - } - - .btn-icon { + > .btn-icon { color: @white; padding: 0; position: relative; @@ -850,7 +847,7 @@ } .umb_confirm-action__overlay.-left { - top: 6px; + top: 8px; left: auto; right: 15px; } From f45138bb3a42ab6872568612ac624b7000e7e92e Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Thu, 30 Jul 2020 20:19:59 +0200 Subject: [PATCH 5/7] Adjust delete button and confirm action overlay --- .../src/less/property-editors.less | 33 ++++++++++--------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less index 87d787731901..bd2888845e2f 100644 --- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less +++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less @@ -834,22 +834,25 @@ position: relative; user-select: all; - > .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 { - .umb_confirm-action__overlay.-left { - top: 8px; - left: auto; - right: 15px; + > .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; + } } } From c5d70245bcbf802f419f2fadff16d0bf6c5763ab Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Thu, 30 Jul 2020 20:41:51 +0200 Subject: [PATCH 6/7] Move umb-tags-editor styling to separate component less file --- src/Umbraco.Web.UI.Client/src/less/belle.less | 1 + .../src/less/components/umb-tags-editor.less | 53 +++++++++++++++++++ .../src/less/property-editors.less | 51 ------------------ .../components/tags/umb-tags-editor.html | 3 +- 4 files changed, 56 insertions(+), 52 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/umb-tags-editor.less diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less index 180418dbf343..889ebbd842f8 100644 --- a/src/Umbraco.Web.UI.Client/src/less/belle.less +++ b/src/Umbraco.Web.UI.Client/src/less/belle.less @@ -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"; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-tags-editor.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-tags-editor.less new file mode 100644 index 000000000000..9a80aa4ff3ba --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-tags-editor.less @@ -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; + } + } +} diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less index bd2888845e2f..49aa453de314 100644 --- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less +++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less @@ -818,58 +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; - - .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; - } - } } // diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tags/umb-tags-editor.html b/src/Umbraco.Web.UI.Client/src/views/components/tags/umb-tags-editor.html index 4bb5232c9e7f..cce613782e0f 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/tags/umb-tags-editor.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/tags/umb-tags-editor.html @@ -1,5 +1,6 @@ -
+
+
Loading...
From 81da67c4cf5cd45d3881ab3eafa7b0176aa98495 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Fri, 31 Jul 2020 10:16:39 +0200 Subject: [PATCH 7/7] Only target child button element, not nested buttons in e.g. umb-confirm-action --- .../src/less/components/umb-group-builder.less | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less index 8bfe38f49013..2590e0610ad6 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less @@ -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;