From 9a0f50291c87bf1a2ac1ac5d860d2e1d5b93742b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 28 Jan 2019 13:15:40 +0100 Subject: [PATCH] color adjustments for proposal --- .../src/less/buttons.less | 22 +++++++----- .../application/umb-app-header.less | 5 ++- .../components/application/umb-dashboard.less | 4 +-- .../application/umb-language-picker.less | 15 +++++--- .../src/less/components/editor.less | 11 +++++- .../src/less/components/umb-avatar.less | 10 +++--- .../components/umb-editor-navigation.less | 35 ++++++++++++------- .../src/less/components/umb-tabs.less | 34 ++++++++++++++---- .../src/less/mixins.less | 21 +++++------ .../src/less/sections.less | 2 +- .../src/less/variables.less | 21 ++++++++--- .../editor/umb-editor-content-header.html | 8 ++--- .../components/editor/umb-editor-header.html | 8 ++--- .../components/editor/umb-editor-menu.html | 2 +- 14 files changed, 131 insertions(+), 67 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/buttons.less b/src/Umbraco.Web.UI.Client/src/less/buttons.less index c99b759b59..f1e132dce3 100644 --- a/src/Umbraco.Web.UI.Client/src/less/buttons.less +++ b/src/Umbraco.Web.UI.Client/src/less/buttons.less @@ -176,7 +176,7 @@ input[type="button"] { // Set the backgrounds // ------------------------- .btn-primary { - .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight); + .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackground); } // Warning appears are orange @@ -199,6 +199,10 @@ input[type="button"] { .btn-action { .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight, @btnInfoType); } +// Made for Umbraco, 2019, used for buttons that has to stand back. +.btn-transparent { + .buttonBackground(@btnWhiteBackground, @btnWhiteBackgroundHighlight, @btnWhiteType); +} // Inverse appears as dark gray .btn-inverse { .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight); @@ -230,25 +234,27 @@ input[type="button"] { background: @green; color: @white; font-weight: bold; - &:hover { + &:hover { background: @green-d1; - } + } } // outlined .btn-outline { - border: 1px solid @gray-8; + border: 1px solid; + border-color: @gray-8; background: @white; - color: @black; + color: @ui-light-type; padding: 5px 13px; + transition: all .2s linear; } .btn-outline:hover, .btn-outline:focus, .btn-outline:active { - border-color: @gray-7; - background: transparent; - color: @black; + border-color: @ui-light-type-hover; + color: @ui-light-type-hover; + background: @white; } // Cross-browser Jank diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less index 1e3aa332fa..86ead685b8 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less @@ -1,5 +1,5 @@ .umb-app-header { - background: @blueNight; + background: @blueExtraDark; display: flex; align-items: center; justify-content: space-between; @@ -31,7 +31,7 @@ } .umb-app-header__action-icon { - opacity: 0.6; + opacity: 0.8; color: @white; font-size: 22px; } @@ -40,4 +40,3 @@ .umb-app-header__action a:focus .umb-app-header__action-icon { opacity: 1; } - diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-dashboard.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-dashboard.less index 2a1d5eb6d3..fc6baead4e 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-dashboard.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-dashboard.less @@ -31,5 +31,5 @@ } .umb-dashboard__header .umb-tabs-nav .umb-tab > a { - padding-bottom: 23px; -} \ No newline at end of file + padding-bottom: 21px; +} diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less index cf252020ee..b2fb1fa6d6 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less @@ -16,14 +16,16 @@ border-bottom: 1px solid @gray-9; height: @editorHeaderHeight; box-sizing: border-box; + color: @ui-light-active-type; } .umb-language-picker__toggle:hover { - background: @gray-10; + //background: @gray-10; + color:@ui-light-active-type-hover; } .umb-language-picker__expand { - color: @gray-6; + //color: @gray-6; font-size: 14px; } @@ -48,9 +50,12 @@ .umb-language-picker__dropdown a:focus { background: @gray-10; text-decoration: none; + color:@ui-light-active-type-hover; } -.umb-language-picker__dropdown-item--current { - background-color: @gray-10; - border-left: 2px solid @ui-active; +.umb-language-picker__dropdown a.umb-language-picker__dropdown-item--current { + //background-color: @gray-10; + padding-left: 16px; + border-left: 4px solid @ui-light-active-border; + color:@ui-light-active-type; } 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 c917b7e031..d091c1a442 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/editor.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/editor.less @@ -65,7 +65,7 @@ .umb-editor-header { background: @white; position: absolute; - padding: 0 20px; + padding-left: 20px; z-index: @zIndexEditor; border-bottom: 1px solid @gray-9; width: 100%; @@ -124,6 +124,15 @@ a.umb-editor-header__close-split-view:hover { color: @black; } +.umb-editor-header { + .btn-transparent { + height:69px; + border-radius: 0; + padding-left: 30px; + padding-right: 30px; + } +} + /* variant switcher */ .umb-variant-switcher__toggle { display: flex; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-avatar.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-avatar.less index de746090b9..21f4a7bda8 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-avatar.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-avatar.less @@ -70,13 +70,13 @@ } .umb-avatar--primary { - background-color: @turquoise-l1; - color: @white; + background-color: @pinkLight; + color: @blueExtraDark; } .umb-avatar--secondary { - background-color: @purple-l3; - color: @white; + background-color: @pinkLight; + color: @blueExtraDark; } .umb-avatar--success { @@ -114,4 +114,4 @@ a.umb-avatar-btn .umb-avatar span { font-size: 50px; } -/*border-radius: 50%; width: 100px; height: 100px; font-size: 50px; text-align: center; display: flex; align-items: center; justify-content: center; background-color: #F3F3F5; border: 2px dashed #A2A1A6; color: #A2A1A6;*/ \ No newline at end of file +/*border-radius: 50%; width: 100px; height: 100px; font-size: 50px; text-align: center; display: flex; align-items: center; justify-content: center; background-color: #F3F3F5; border: 2px dashed #A2A1A6; color: #A2A1A6;*/ 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 3875df1ce0..d432310dab 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 @@ -10,7 +10,7 @@ cursor: pointer; display: block; padding: 4px 10px 0 10px; - border-bottom: 2px solid transparent; + //border-bottom: 4px solid transparent; min-width: 70px; border-right: 1px solid @gray-9; box-sizing: border-box; @@ -20,6 +20,23 @@ justify-content: center; height: @editorHeaderHeight; position: relative; + + &:hover { + color: @ui-light-active-type-hover !important; + } + + &::after { + content: ""; + height: 0px; + left: 8px; + right: 8px; + background-color: @ui-light-active-border; + position: absolute; + bottom: 0; + border-radius: 3px 3px 0 0; + opacity: 0; + transition: all .2s linear; + } } .umb-sub-views-nav-item:focus { @@ -36,20 +53,12 @@ //border-bottom-color: @ui-active; //background-color: rgba(@ui-active, 0.25); - color: @ui-active-type; - border-bottom-color: @ui-active; - /* + color: @ui-light-active-type; + //border-bottom-color: @ui-active; &::after { - content: ""; + opacity: 1; height: 4px; - background-color: @ui-active; - position: absolute; - bottom: -1px; - border-radius: 3px 3px 0 0; - left: 8px; - right: 8px; } - */ } .show-validation .umb-sub-views-nav-item.-has-error { @@ -69,7 +78,7 @@ right: 6px; min-width: 16px; color: @white; - background-color: @turquoise-d1; + background-color: @ui-active-type; border: 2px solid @white; border-radius: 50%; font-size: 10px; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-tabs.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-tabs.less index f0f294ae4a..2a5b98df30 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-tabs.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-tabs.less @@ -14,24 +14,42 @@ } .umb-tab > a { + + display: flex; + justify-content: center; + align-items: center; + position: relative; + cursor: pointer; - border-bottom: 2px solid transparent; - color: @ui-action-disgrete; + //border-bottom: 4px solid transparent; + color: @ui-light-type; padding: 5px 20px 15px 20px; transition: color 150ms ease-in-out; &:focus { - color: @ui-action-disgrete-hover; + color: @ui-light-type-hover; } &:hover { - color: @ui-action-disgrete-hover; + color: @ui-light-type-hover; text-decoration: none; } + &::after { + content: ""; + height: 0px; + left: 14px; + right: 14px; + background-color: @ui-light-active-border; + position: absolute; + bottom: 0; + border-radius: 3px 3px 0 0; + opacity: 0; + transition: all .2s linear; + } } .umb-tab--active > a { - color: @ui-active; - border-bottom-color: @ui-active; + color: @ui-light-active-type; + //border-bottom-color: @ui-active; /* &:focus { border-bottom-color: @ui-active; @@ -40,6 +58,10 @@ border-bottom-color: @ui-active-hover; } */ + &::after { + opacity: 1; + height: 4px; + } } .show-validation .umb-tab--error > a, diff --git a/src/Umbraco.Web.UI.Client/src/less/mixins.less b/src/Umbraco.Web.UI.Client/src/less/mixins.less index ffeaae680b..02654459a1 100644 --- a/src/Umbraco.Web.UI.Client/src/less/mixins.less +++ b/src/Umbraco.Web.UI.Client/src/less/mixins.less @@ -515,7 +515,7 @@ // Button backgrounds // ------------------ -.buttonBackground(@startColor, @endColor, @textColor: #fff) { +.buttonBackground(@startColor, @hoverColor: @startColor, @textColor: #fff) { // gradientBar will set the background to a pleasing blend of these, to support IE<=9 //.gradientBar(@startColor, @endColor, @textColor); @@ -523,7 +523,7 @@ border-color: @startColor @startColor darken(@startColor, 15%); border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); - background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ + background-color: @startColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ .reset-filter(); .caret { @@ -531,22 +531,23 @@ border-bottom-color: @textColor; } - // button states - &:hover, &:focus, &:active { - background-color: darken(@startColor, 2%); - } - // in these cases the gradient won't cover the background, so we override - &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] { + &:hover, &:focus, &:active, &.active { color: @textColor; - background-color: darken(@endColor, 5%); + background-color: @hoverColor; } - + + &.disabled, &[disabled] { + color: @textColor; + background-color: @gray-4; + } + /* // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves &:active, &.active { background-color: darken(@endColor, 10%) e("\9"); } + */ } // Navbar vertical align diff --git a/src/Umbraco.Web.UI.Client/src/less/sections.less b/src/Umbraco.Web.UI.Client/src/less/sections.less index 70fb3d353b..c0a95c97c5 100644 --- a/src/Umbraco.Web.UI.Client/src/less/sections.less +++ b/src/Umbraco.Web.UI.Client/src/less/sections.less @@ -28,7 +28,7 @@ ul.sections>li>a { } ul.sections>li>a .section__name { - opacity: 0.6; + opacity: 0.8; transition: opacity .1s linear; } diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less index a8fdc57a68..a836912041 100644 --- a/src/Umbraco.Web.UI.Client/src/less/variables.less +++ b/src/Umbraco.Web.UI.Client/src/less/variables.less @@ -57,7 +57,7 @@ @yellow-washed: #FFFAEB; @green-d1: #1FB572; -@green: #36B37E;// updated 2019 +@green: #2bc37c;// updated 2019 @green-l1: #4ECF95; @green-l2: #79E1B2; @green-l3: #A6F0CF; @@ -130,6 +130,15 @@ @ui-active: @pinkLight; @ui-active-type: @blueExtraDark; @ui-active-hover: @blueMid; + +@ui-light-border: @pinkLight; +@ui-light-type: @gray-4; +@ui-light-type-hover: @blueMid; + +@ui-light-active-border: @pinkLight; +@ui-light-active-type: @blueExtraDark; +@ui-light-active-type-hover: @blueMid; + @ui-selected: @blueMid;//not used jet. @ui-selected-hover: @blueMid;//not used jet. @@ -142,9 +151,9 @@ @type-white: @u-white; @type-black: @blueNight; -@ui-btn: @brownLight; -@ui-btn-hover: @ui-btn; -@ui-btn-type: @blueExtraDark; +@ui-btn: @blueExtraDark; +@ui-btn-hover: @blueMid; +@ui-btn-type: @white; @ui-btn-positive: @green; @ui-btn-positive-hover: @green; @@ -307,6 +316,10 @@ @btnInfoBackground: @ui-btn;// updated 2019 @btnInfoBackgroundHighlight: @ui-btn-hover;// updated 2019 +@btnWhiteType: @black;// updated 2019 +@btnWhiteBackground: @white;// updated 2019 +@btnWhiteBackgroundHighlight: @white;// updated 2019 + @btnSuccessType: @ui-btn-positive-type;// updated 2019 @btnSuccessBackground: @ui-btn-positive;// updated 2019 @btnSuccessBackgroundHighlight: @ui-btn-positive-hover;// updated 2019 diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html index dad9dc5ba9..edf04d5297 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html @@ -13,7 +13,7 @@
-
-
-
- + diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html index 25925f42ed..1023953ce0 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html @@ -23,7 +23,7 @@
-
-
-
- + diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-menu.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-menu.html index 54a33a705f..65935c3795 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-menu.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-menu.html @@ -2,7 +2,7 @@