From 97f379ff440dc1b1bcfea29c0d5c8b38193cd62f Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 13 Mar 2017 20:06:57 +0100 Subject: [PATCH 01/16] add more contrast to placeholder text --- src/Umbraco.Web.UI.Client/src/less/forms.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/forms.less b/src/Umbraco.Web.UI.Client/src/less/forms.less index cfb06d4dc0..869d0b7740 100644 --- a/src/Umbraco.Web.UI.Client/src/less/forms.less +++ b/src/Umbraco.Web.UI.Client/src/less/forms.less @@ -331,7 +331,7 @@ input[type="checkbox"]:focus { // Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector input, textarea { - .placeholder(); + .placeholder(@gray-6); } From aa7e739b0e3d6176dfc7c3e8f4b242561c15f354 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 13 Mar 2017 20:09:44 +0100 Subject: [PATCH 02/16] increase sections label font size --- src/Umbraco.Web.UI.Client/src/less/sections.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/sections.less b/src/Umbraco.Web.UI.Client/src/less/sections.less index 9e5c48b87b..51ec5c7436 100644 --- a/src/Umbraco.Web.UI.Client/src/less/sections.less +++ b/src/Umbraco.Web.UI.Client/src/less/sections.less @@ -51,7 +51,7 @@ ul.sections li a { } ul.sections a span { - font-size: 10px; + font-size: 11px; line-height: 1.4em; opacity: 0; -webkit-transition: all .3s linear; From fd8e200bd7166945e4dc9be77c4875c015b38b17 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 13 Mar 2017 20:38:02 +0100 Subject: [PATCH 03/16] make property editor placeholder lighter + increase font size --- .../src/less/components/umb-group-builder.less | 4 ++-- 1 file changed, 2 insertions(+), 2 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 ad585b967c..09b605bcb1 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 @@ -367,7 +367,7 @@ input.umb-group-builder__group-sort-value { /* ---------- PLACEHOLDER BOX ---------- */ .umb-group-builder__placeholder-box { - background: @gray-8; + background: @gray-9; box-sizing: border-box; display: flex; align-items: center; @@ -475,7 +475,7 @@ input.umb-group-builder__group-sort-value { border-radius: 5px; color: @gray-3; font-weight: bold; - font-size: 13px; + font-size: 14px; color: @turquoise-d1; &:hover { text-decoration: none; From 76a6449ffa506a45ff85b5485e1afa758f70e912 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 13 Mar 2017 20:47:36 +0100 Subject: [PATCH 04/16] increase font size on actions menu --- src/Umbraco.Web.UI.Client/src/less/tree.less | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/tree.less b/src/Umbraco.Web.UI.Client/src/less/tree.less index 0cb345f871..e3fbd15c04 100644 --- a/src/Umbraco.Web.UI.Client/src/less/tree.less +++ b/src/Umbraco.Web.UI.Client/src/less/tree.less @@ -377,12 +377,15 @@ div.locked:before{ .umb-actions a { white-space: nowrap; display: block; - font-size: 14px; + font-size: 15px; color: @black; - padding: 8px 25px 8px 20px; + padding: 9px 25px 9px 20px; text-decoration: none; cursor: pointer; + display: flex; + align-items: center; } + .umb-actions a:hover, .umb-actions a:focus, .umb-actions li.selected { color: @black !important; @@ -393,11 +396,10 @@ div.locked:before{ display: inline-block; vertical-align: middle; padding-left: 15px; - padding-top: 2px; } + .umb-actions i { color: @gray-6; - margin-top: 2px; font-size: 18px; vertical-align: middle; color: @gray-3; @@ -430,15 +432,16 @@ div.locked:before{ display: block; clear: right; line-height: 14px; - color: @gray-7; + color: @gray-6; white-space: normal; + margin-top: 2px; } .umb-actions-child li a:hover .menuLabel small { text-decoration: none !important } .umb-actions-child i { - font-size: 32px; - min-width: 32px; + font-size: 30px; + min-width: 30px; text-align: center; line-height: 24px; /* set line-height to ensure all icons use same line-height */ } From 874c679bfe62fff164341fa5b881be36bcc6ee20 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 13 Mar 2017 20:53:55 +0100 Subject: [PATCH 05/16] update tree header --- src/Umbraco.Web.UI.Client/src/less/tree.less | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/tree.less b/src/Umbraco.Web.UI.Client/src/less/tree.less index e3fbd15c04..f2815f445c 100644 --- a/src/Umbraco.Web.UI.Client/src/less/tree.less +++ b/src/Umbraco.Web.UI.Client/src/less/tree.less @@ -119,10 +119,9 @@ .umb-tree li.root > div a, .umb-tree li.root h5, .umb-tree-header { - text-transform: uppercase; - color: @gray-7; + color: @gray-2; font-weight: bold; - font-size: 13px; + font-size: 15px; } .umb-tree ins { From 185af08e755a43dfe379e8a74b51309003571d7f Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 13 Mar 2017 21:02:43 +0100 Subject: [PATCH 06/16] increase header description font-size --- src/Umbraco.Web.UI.Client/src/less/panel.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/panel.less b/src/Umbraco.Web.UI.Client/src/less/panel.less index c4ac2f4861..6bc2a2b2de 100644 --- a/src/Umbraco.Web.UI.Client/src/less/panel.less +++ b/src/Umbraco.Web.UI.Client/src/less/panel.less @@ -470,7 +470,7 @@ input.umb-panel-header-description { background: transparent; border-color: transparent; margin-bottom: 0; - font-size: 12px; + font-size: 13px; box-sizing: border-box; height: 25px; line-height: 25px; From 9ebe7f683a6bbea930d7919100fc037bb21b33a7 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 13 Mar 2017 22:40:12 +0100 Subject: [PATCH 07/16] increase font size for validation label --- .../src/less/forms/umb-validation-label.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/forms/umb-validation-label.less b/src/Umbraco.Web.UI.Client/src/less/forms/umb-validation-label.less index 733f054669..a57748c35e 100644 --- a/src/Umbraco.Web.UI.Client/src/less/forms/umb-validation-label.less +++ b/src/Umbraco.Web.UI.Client/src/less/forms/umb-validation-label.less @@ -3,7 +3,7 @@ padding: 1px 5px; background: @red; color: @white; - font-size: 10px; + font-size: 11px; line-height: 1.5em; } From fdfae0f78ad04ee6b2427384b9536ae7f47e29fc Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 13 Mar 2017 22:43:24 +0100 Subject: [PATCH 08/16] increase font size for template insert description --- .../src/less/components/umb-insert-code-box.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-insert-code-box.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-insert-code-box.less index efa40f8f6e..b0f9a7db3d 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-insert-code-box.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-insert-code-box.less @@ -24,7 +24,8 @@ } .umb-insert-code-box__description { - font-size: 12px; + font-size: 13px; + line-height: 1.6em; } .umb-insert-code-box__check { From 691c13d1e1054de976cdd5d03bea340c66942727 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 15 Mar 2017 10:26:05 +0100 Subject: [PATCH 09/16] less bright and "dangerous" alerts, notifications and validation messages --- .../src/less/alerts.less | 16 ++++-- .../notifications/umb-notifications.less | 53 ++++++++++--------- src/Umbraco.Web.UI.Client/src/less/forms.less | 4 +- src/Umbraco.Web.UI.Client/src/less/navs.less | 7 +-- .../src/less/variables.less | 48 ++++++++--------- .../notifications/umb-notifications.html | 2 +- 6 files changed, 72 insertions(+), 58 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/alerts.less b/src/Umbraco.Web.UI.Client/src/less/alerts.less index c575f58f0c..1798e0b7fa 100644 --- a/src/Umbraco.Web.UI.Client/src/less/alerts.less +++ b/src/Umbraco.Web.UI.Client/src/less/alerts.less @@ -7,10 +7,10 @@ // ------------------------- .alert { - padding: 8px 35px 8px 14px; + padding: 5px 35px 5px 14px; margin-bottom: @baseLineHeight; background-color: @warningBackground; - border: 1px solid @warningBorder; + border-left: 2px solid @warningBorder; .border-radius(@baseBorderRadius); } .alert, @@ -44,31 +44,36 @@ border-color: @successBorder; color: @successText; } + .alert-success h4 { color: @successText; } + .alert-danger, .alert-error { background-color: @errorBackground; border-color: @errorBorder; color: @errorText; } + .alert-danger h4, .alert-error h4 { color: @errorText; } + .alert-info { background-color: @infoBackground; border-color: @infoBorder; color: @infoText; } + .alert-info h4 { color: @infoText; } .alert-form { background-color: @gray-10; - border: 1px solid @gray-3 !important; + border-color: @gray-7; color: @gray-3; } @@ -77,7 +82,10 @@ } .alert-form h4 { - color: @gray-3; + color: @gray-1; + margin-bottom: 5px; + font-weight: bold; + font-size: 16px; } diff --git a/src/Umbraco.Web.UI.Client/src/less/components/notifications/umb-notifications.less b/src/Umbraco.Web.UI.Client/src/less/components/notifications/umb-notifications.less index 77dc6c6995..76d5d47a8f 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/notifications/umb-notifications.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/notifications/umb-notifications.less @@ -1,35 +1,40 @@ .umb-notifications { - z-index: 1000; - position: absolute; - bottom: 52px; - left: 0; - right: 0; - border-bottom: none; - margin: auto; - padding: 0px; - border: none; - background: none; - border-radius: 0; + z-index: 1000; + position: absolute; + bottom: 53px; + left: 0; + right: 0; + border-bottom: none; + margin: auto; + padding: 0px; + background: none; + border-radius: 0; } .umb-notifications__notifications { - list-style: none; - margin: 0; - position: relative; + list-style: none; + margin: 0; + position: relative; } - .umb-notifications__notification { - padding: 5px 20px; - text-shadow: none; - font-size: 14px; - border: none; - border-radius: 0; - position: relative; - margin-bottom: 0; + border-width: 1px; + border-style: solid; + padding: 5px 20px; + text-shadow: none; + font-size: 14px; + border-radius: 3px; + position: relative; + margin-bottom: 0; + left: 50%; + transform: translate(-50%); + width: 85%; + bottom: 10px; + margin-bottom: 2px; + box-shadow: 0 5px 10px rgba(0,0,0,0.05), 0 3px 3px rgba(0,0,0,0.12); } .umb-notifications__notification.-extra-padding { - padding-top: 20px; - padding-bottom: 20px; + padding-top: 20px; + padding-bottom: 20px; } diff --git a/src/Umbraco.Web.UI.Client/src/less/forms.less b/src/Umbraco.Web.UI.Client/src/less/forms.less index 869d0b7740..97d91d6c27 100644 --- a/src/Umbraco.Web.UI.Client/src/less/forms.less +++ b/src/Umbraco.Web.UI.Client/src/less/forms.less @@ -19,7 +19,7 @@ label small, .guiDialogTiny { label.control-label, .control-label { padding: 0 10px 0 0 !important; font-weight: bold; - color: @black; + color: @gray-2; } @@ -483,7 +483,7 @@ input[type="checkbox"][readonly] { // Error .show-validation.ng-invalid .control-group.error, .show-validation.ng-invalid .umb-panel-header-content-wrapper { - .formFieldState(@formErrorText, @formErrorText, @formErrorBackground); + .formFieldState(@formErrorText, @formErrorBorder, @formErrorBackground); } //val-highlight directive styling diff --git a/src/Umbraco.Web.UI.Client/src/less/navs.less b/src/Umbraco.Web.UI.Client/src/less/navs.less index da0dfc0110..c594789b6c 100644 --- a/src/Umbraco.Web.UI.Client/src/less/navs.less +++ b/src/Umbraco.Web.UI.Client/src/less/navs.less @@ -158,9 +158,10 @@ .show-validation .tab-error a, .show-validation .tab-error a:hover, .show-validation .tab-error a:focus { - color: @white !important; - background-color: @red !important; - border-color: @errorBorder; + background-color: @red-washed !important; + border-top-color: @errorBorder; + border-left-color: @errorBorder; + border-right-color: @errorBorder; } .show-validation .tab-error a:before { diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less index 314035f1ae..5d757fef9b 100644 --- a/src/Umbraco.Web.UI.Client/src/less/variables.less +++ b/src/Umbraco.Web.UI.Client/src/less/variables.less @@ -310,21 +310,21 @@ // alerts // ------------------------- -@warningText: @white; -@warningBackground: @orange; -@warningBorder: transparent; +@warningText: @black; +@warningBackground: @yellow-washed; +@warningBorder: @yellow; -@errorText: @white; -@errorBackground: @red-d1; -@errorBorder: transparent; +@errorText: @black; +@errorBackground: @red-washed; +@errorBorder: @red; -@successText: @white; -@successBackground: @green-d1; -@successBorder: transparent; +@successText: @black; +@successBackground: @green-washed; +@successBorder: @green; -@infoText: @white; -@infoBackground: @turquoise-d1; -@infoBorder: transparent; +@infoText: @black; +@infoBackground: @turquoise-washed; +@infoBorder: @turquoise; // SD: Had to duplicate the above but prefix with 'form' inversed colors // because we cannot share the above alert colors with forms otherwise we end up with white @@ -332,21 +332,21 @@ // Form states // ------------------------- -@formWarningText: @warningBackground; -@formWarningBackground: lighten(@warningBackground, 38%); -@formWarningBorder: darken(spin(@warningBackground, -10), 3%); +@formWarningText: @black; +@formWarningBackground: @yellow-washed; +@formWarningBorder: @yellow; -@formErrorText: @errorBackground; -@formErrorBackground: lighten(@errorBackground, 55%); -@formErrorBorder: darken(spin(@errorBackground, -10), 3%); +@formErrorText: @black; +@formErrorBackground: @red-washed; +@formErrorBorder: @red; -@formSuccessText: @successBackground; -@formSuccessBackground: lighten(@successBackground, 48%); -@formSuccessBorder: darken(spin(@successBackground, -10), 5%); +@formSuccessText: @black; +@formSuccessBackground: @green-washed; +@formSuccessBorder: @green; -@formInfoText: @infoBackground; -@formInfoBackground: lighten(@infoBackground, 41%); -@formInfoBorder: darken(spin(@infoBackground, -10), 7%); +@formInfoText: @black; +@formInfoBackground: @turquoise-washed; +@formInfoBorder: @turquoise; // Tooltips and popovers diff --git a/src/Umbraco.Web.UI.Client/src/views/components/notifications/umb-notifications.html b/src/Umbraco.Web.UI.Client/src/views/components/notifications/umb-notifications.html index 9962e2dd84..ab3b9abcbd 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/notifications/umb-notifications.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/notifications/umb-notifications.html @@ -2,7 +2,7 @@