From 874c89656c2f29da8bad9b3c19e5486cee6825f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 24 Jan 2019 15:57:28 +0100 Subject: [PATCH] action colors --- .../src/less/components/editor.less | 3 --- .../src/less/components/tree/umb-tree-item.less | 16 ++++++++-------- .../less/components/umb-editor-navigation.less | 6 +++--- .../src/less/components/umb-flatpickr.less | 6 +++--- .../src/less/components/umb-iconpicker.less | 2 +- .../less/components/umb-list-view-settings.less | 5 +++-- .../src/less/components/umb-node-preview.less | 12 +++++++----- .../src/less/variables.less | 10 +++++++++- 8 files changed, 34 insertions(+), 26 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor.less b/src/Umbraco.Web.UI.Client/src/less/components/editor.less index d699193c24..f193561ff3 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/editor.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/editor.less @@ -101,9 +101,6 @@ input.umb-editor-header__name-input { padding: 0 10px; background: @white; border: 1px solid @gray-8; - &:hover { - border-color: @turquoise-d1; - } } input.umb-editor-header__name-input:disabled { diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less index 002d076461..39facb1f48 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less @@ -42,13 +42,13 @@ .umb-tree-item.current > .umb-tree-item__inner { - background: @turquoise-d1; + background: @ui-active; // override small icon color. TODO => check usage -// &:before { -// color: @turquoise-l2; -// } - + &:before { + color: @turquoise-l2; + } + .umb-options { &:hover i { @@ -57,7 +57,7 @@ i { background: @white; - border-color: @turquoise-d1; + border-color: @ui-active; transition: opacity 120ms ease; } } @@ -66,7 +66,7 @@ .umb-tree-icon, ins { color: @white !important; - background-color: @turquoise-d1; - border-color: @turquoise-d1; + background-color: @ui-active; + border-color: @ui-active; } } diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less index d8b83af67a..db24210e30 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less @@ -32,8 +32,8 @@ } .umb-sub-views-nav-item.is-active { - color: @turquoise-d1; - border-bottom-color: @turquoise-d1; + color: @ui-active; + border-bottom-color: @ui-active; } .show-validation .umb-sub-views-nav-item.-has-error { @@ -98,7 +98,7 @@ // make dots green the an item is active .umb-sub-views-nav-item.is-active .umb-sub-views-nav-item__more i { - background-color: @turquoise-d1; + background-color: @ui-active; } .umb-sub-views-nav__dropdown.umb-sub-views-nav__dropdown { diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-flatpickr.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-flatpickr.less index 1848d55d96..8cdcc8b877 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-flatpickr.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-flatpickr.less @@ -13,9 +13,9 @@ span.flatpickr-day:hover { } span.flatpickr-day.selected { - background-color: @turquoise; + background-color: @ui-selected; } span.flatpickr-day.selected:hover { - background-color: @turquoise-d1; -} \ No newline at end of file + background-color: @ui-selected-hover; +} diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less index 6b03d80214..34070256ce 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less @@ -34,7 +34,7 @@ .umb-iconpicker-item.-selected { background: @gray-10; - border: solid 1px @turquoise-d1; + border: solid 1px @ui-active; border-radius: @baseBorderRadius; box-sizing: border-box; } diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-list-view-settings.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-list-view-settings.less index 4fb20f5c68..b23a9d14b8 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-list-view-settings.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-list-view-settings.less @@ -34,11 +34,12 @@ .umb-list-view-settings__create-new { font-size: 13px; - color: @turquoise-d1; + color: @ui-action; } .umb-list-view-settings__create-new:hover { - color: @turquoise-d1; + color: @ui-action-hover; + border-color: @ui-action-hover; } .umb-list-view-settings__remove-new { diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less index 07bc32d79a..3d1af014c7 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less @@ -71,12 +71,12 @@ margin-right: 5px; font-size: 13px; font-weight: bold; - color: @gray-5; + color: @ui-action-disgrete; cursor: pointer; } .umb-node-preview__action:hover { - color: @turquoise; + color: @ui-action-disgrete-hover; text-decoration: none; opacity: 1; } @@ -90,14 +90,16 @@ align-items: center; justify-content: center; border: 1px dashed @gray-7; - color: @turquoise-d1; + color: @ui-action; font-weight: bold; padding: 5px 15px; box-sizing: border-box; } .umb-node-preview-add:hover { - color: @turquoise-d1; + color: @ui-action-hover; + border-color: @ui-action-hover; + text-decoration: none; } .umb-editor-wrapper .umb-node-preview-add { @@ -112,4 +114,4 @@ .umb-node-preview-add { max-width: none; } -} \ No newline at end of file +} diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less index a7360148a9..be9276bf35 100644 --- a/src/Umbraco.Web.UI.Client/src/less/variables.less +++ b/src/Umbraco.Web.UI.Client/src/less/variables.less @@ -39,7 +39,7 @@ @pinkLight: #f5c1bc;// added 2019 @brown: #9d8057;// added 2019 -@u-grey: #f2ebe6;// added 2019 +@u-greyLight: #f2ebe6;// added 2019 @u-white: #f9f7f4;// added 2019 @@ -47,7 +47,15 @@ // ------------------------- @ui-active: @pinkLight; +@ui-active-hover: @pinkLight; @ui-selected: @pinkLight; +@ui-selected-hover: @pinkLight; + +@ui-action: @orange; +@ui-action-hover: @orange; + +@ui-action-disgrete: @gray-4; +@ui-action-disgrete-hover: @orange; // Colors