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

color adjustments for proposal

Browse Source
This commit is contained in:
Niels Lyngsø
2019-01-28 13:15:40 +01:00
parent df00cfab40
commit 9a0f50291c
14 changed files with 131 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/Umbraco.Web.UI.Client/src/less/buttons.less
View File

@@ -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

5
src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less
View File

@@ -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;
}

4
src/Umbraco.Web.UI.Client/src/less/components/application/umb-dashboard.less
View File

@@ -31,5 +31,5 @@
}
.umb-dashboard__header .umb-tabs-nav .umb-tab > a {
padding-bottom: 23px;
}
padding-bottom: 21px;
}

15
src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less
View File

@@ -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;
}

11
src/Umbraco.Web.UI.Client/src/less/components/editor.less
View File

@@ -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;

10
src/Umbraco.Web.UI.Client/src/less/components/umb-avatar.less
View File

@@ -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;*/
/*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;*/

35
src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less
View File

@@ -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;

34
src/Umbraco.Web.UI.Client/src/less/components/umb-tabs.less
View File

@@ -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,

21
src/Umbraco.Web.UI.Client/src/less/mixins.less
View File

@@ -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

2
src/Umbraco.Web.UI.Client/src/less/sections.less
View File

@@ -28,7 +28,7 @@ ul.sections>li>a {
}
ul.sections>li>a .section__name {
opacity: 0.6;
opacity: 0.8;
transition: opacity .1s linear;
}

21
src/Umbraco.Web.UI.Client/src/less/variables.less
View File

@@ -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

8
src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
View File

@@ -13,7 +13,7 @@
<div id="nameField" style="flex: 1 1 auto;">
<div class="umb-editor-header__name-wrapper">
<ng-form name="headerNameForm">
<input
<input
data-element="editor-name-field"
type="text"
class="umb-editor-header__name-input"
@@ -61,15 +61,15 @@
</div>
<div ng-if="navigation && splitViewOpen !== true" style="margin-left: 20px;">
<umb-editor-navigation
<umb-editor-navigation
data-element="editor-sub-views"
navigation="navigation"
on-select="selectNavigationItem(item)">
</umb-editor-navigation>
</div>
<div ng-if="menu.currentNode && splitViewOpen !== true && hideMenu !== true" style="margin-left: 20px;">
<umb-editor-menu
<div ng-if="menu.currentNode && splitViewOpen !== true && hideMenu !== true">
<umb-editor-menu
data-element="editor-actions"
current-node="menu.currentNode"
current-section="{{menu.currentSection}}">

8
src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
View File

@@ -23,7 +23,7 @@
<div id="nameField" style="flex: 1 1 auto;">
<div class="umb-editor-header__name-wrapper">
<ng-form name="headerNameForm">
<input data-element="editor-name-field"
<input data-element="editor-name-field"
no-password-manager
title="{{key}}"
type="text"
@@ -70,15 +70,15 @@
</div>
<div ng-if="navigation && splitViewOpen !== true" style="margin-left: 20px;">
<umb-editor-navigation
<umb-editor-navigation
data-element="editor-sub-views"
navigation="navigation"
on-select="selectNavigationItem(item)">
</umb-editor-navigation>
</div>
<div ng-if="menu.currentNode && splitViewOpen !== true && hideMenu !== true" style="margin-left: 20px;">
<umb-editor-menu
<div ng-if="menu.currentNode && splitViewOpen !== true && hideMenu !== true">
<umb-editor-menu
data-element="editor-actions"
current-node="menu.currentNode"
current-section="{{menu.currentSection}}">

2
src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-menu.html
View File

@@ -2,7 +2,7 @@
<umb-button
type="button"
button-style="info"
button-style="transparent"
action="dropdown.isOpen = !dropdown.isOpen"
label-key="general_actions"
show-caret="true">