From 34f93331bd310b9411710c19aa73fdbf061b0e87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Tue, 29 Jan 2019 13:31:54 +0100
Subject: [PATCH] brandcolor 2019 corrections

---
 .../subheader/umb-editor-sub-header.less      |  7 ++++
 .../less/components/tree/umb-tree-item.less   |  4 +-
 .../src/less/components/tree/umb-tree.less    |  8 +++-
 .../less/components/umb-file-dropzone.less    |  6 +--
 .../src/less/components/umb-folder-grid.less  | 23 +++++++++--
 .../src/less/components/umb-media-grid.less   | 39 ++++++++++++-------
 src/Umbraco.Web.UI.Client/src/less/main.less  |  2 +-
 .../src/less/variables.less                   |  6 ++-
 .../src/views/components/umb-folder-grid.html |  2 +-
 .../src/views/components/umb-media-grid.html  |  2 +-
 10 files changed, 69 insertions(+), 30 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less b/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less
index 10296b58e3..2b9f1e31a5 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less
@@ -48,10 +48,17 @@
    padding-right: 10px;
 }
 
+.umb-editor-sub-header__content-left .umb-editor-sub-header__section {
+   padding-left: 0;
+}
+
 .umb-editor-sub-header__content-left .umb-editor-sub-header__section:first-child {
    padding-left: 0;
 }
 
+.umb-editor-sub-header__content-right .umb-editor-sub-header__section {
+   padding-right: 0;
+}
 .umb-editor-sub-header__content-right .umb-editor-sub-header__section:last-child {
    padding-right: 0;
 }
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 377b61c225..d6202c5665 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
@@ -24,11 +24,11 @@
     // ------------------------
     .l {
         width: 100%;
-        height: 1px;
+        height: 2px;
         overflow: hidden;
         position: absolute;
         left: 0;
-        bottom: 0;
+        bottom: -1;
 
         div { 
             .umb-loader;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
index 6b6f0c5f60..13e2a55089 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
@@ -89,13 +89,15 @@ body.touch .umb-tree {
 
 // active is equivilant to selected, its the item that is begin affected by the actions performed in the right-click-dialog.
 .umb-tree-item > .umb-tree-item__inner.active {
-    background: @ui-selected;
+    //background: @ui-selected;
+    border-color: @ui-selected-border;
     color: @ui-selected-type;
     a {
         color: @ui-selected-type;
     }
     &:hover {
-        background: @ui-selected-hover;
+        //background: @ui-selected-hover;
+        border-color: @ui-selected-border-hover;
         color: @ui-selected-type-hover;
         a {
             color: @ui-selected-type-hover;
@@ -110,6 +112,8 @@ body.touch .umb-tree {
     flex-wrap: nowrap;
     align-items: center;
     
+    border:2px dashed transparent;
+    
     color: @ui-option-type;
     a {
         color: @ui-option-type;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-file-dropzone.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-file-dropzone.less
index b7c58ad3cf..63190f0ed3 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-file-dropzone.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-file-dropzone.less
@@ -43,14 +43,14 @@
   // file select link
   .file-select {
     font-size: 15px;
-    color: @turquoise-d1;
+    color: @ui-action-disgrete-type;
     cursor: pointer;
 
     margin-top: 10px;
 
     &:hover {
-        color: @turquoise-d1;
-        text-decoration: underline;
+        color: @ui-action-disgrete-type-hover;
+        text-decoration: none;
     }
   }
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less
index d91f24cbca..f5ca1f8438 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less
@@ -14,7 +14,7 @@
    padding: 10px 20px;
    box-sizing: border-box;
    flex: 1 1 200px;
-   border: 1px solid transparent;
+   border: 2px dashed transparent;
    transition: border 0.2s;
    position: relative;
    justify-content: space-between;
@@ -22,8 +22,24 @@
    user-select: none;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16);
    border-radius: 3px;
+   
+   transition: box-shadow 150ms ease-in-out;
 }
 
+.umb-folder-grid__folder.-selected {
+    box-shadow: 0 2px 8px 0 darken(@ui-selected-border, 20);
+    
+    //background: @ui-selected;
+    color:@ui-selected-type;
+    border-color:@ui-selected-border;
+    
+    &:hover {
+        color:@ui-selected-type-hover;
+        border-color:@ui-selected-border-hover;
+    }
+}
+
+
 .umb-folder-grid__folder:focus,
 .umb-folder-grid__folder:active {
    text-decoration: none;
@@ -31,8 +47,6 @@
 
 .umb-folder-grid__folder:hover {
    text-decoration: none;
-   box-shadow: 0 3px 6px 0 rgba(0,0,0,0.16);
-   transition: box-shadow 150ms ease-in-out;
 }
 
 .umb-folder-grid__folder-description {
@@ -57,7 +71,7 @@
 .umb-folder-grid__folder-name:hover {
    text-decoration: underline;
 }
-
+/*
 .umb-folder-grid__action {
    opacity: 0;
    border: 2px solid @white;
@@ -78,3 +92,4 @@
    opacity: 1;
    background: @green;
 }
+*/
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
index 3356c1de68..8185040f23 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
@@ -23,16 +23,30 @@
     position: relative;
     overflow: hidden;
     cursor: pointer;
-
+    
+    border: 2px dashed transparent;
     box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);
-
-    transition: box-shadow 100ms;
+    
+    transition: box-shadow 150ms ease-in-out;
 }
 
 .umb-media-grid__item.-file {
     background-color: @white;
 }
 
+.umb-media-grid__item.-selected {
+    box-shadow: 0 2px 8px 0 darken(@ui-selected-border, 20);
+    
+    //background: @ui-selected;
+    color:@ui-selected-type;
+    border-color:@ui-selected-border;
+    
+    &:hover {
+        color:@ui-selected-type-hover;
+        border-color:@ui-selected-border-hover;
+    }
+}
+
 .umb-media-grid__item-file-icon > span {
     color: @white;
     background: @gray-4;
@@ -45,10 +59,6 @@
     position: relative;
 }
 
-.umb-media-grid__item.-selected {
-    box-shadow: 0 2px 8px 0 rgba(0,0,0,.35);
-}
-
 .umb-media-grid__item:hover {
    text-decoration: none;
 }
@@ -90,12 +100,13 @@
    box-sizing: border-box;
    font-size: 12px;
    overflow: hidden;
-   color: @white;
+   color: @black;
    white-space: nowrap;
-   background: @purple;
+   border-top:1px solid @gray-9;
+   background: @white;
    transition: opacity 150ms;
 }
-
+/*
 .umb-media-grid__item.-file .umb-media-grid__item-overlay {
     opacity: 1;
     color: @gray-4;
@@ -105,9 +116,9 @@
 .umb-media-grid__item.-file:hover .umb-media-grid__item-overlay,
 .umb-media-grid__item.-file.-selected .umb-media-grid__item-overlay {
     color: @white;
-    background: @purple;
+    background: @blueExtraDark;
 }
-
+*/
 .umb-media-grid__info {
     margin-right: 5px;
 }
@@ -134,7 +145,7 @@
    font-size: 40px !important;
    transform: translate(-50%,-50%);
 }
-
+/*
 .umb-media-grid__checkmark {
     position: absolute;
     z-index: 2;
@@ -152,7 +163,7 @@
     color: @white;
     transition: background 100ms;
 }
-
+*/
 .umb-media-grid__edit {
     position: absolute;
     opacity: 0;
diff --git a/src/Umbraco.Web.UI.Client/src/less/main.less b/src/Umbraco.Web.UI.Client/src/less/main.less
index 3a8228bde5..51892106e1 100644
--- a/src/Umbraco.Web.UI.Client/src/less/main.less
+++ b/src/Umbraco.Web.UI.Client/src/less/main.less
@@ -519,7 +519,7 @@ animation-duration:1s;
 animation-iteration-count:infinite;
 animation-timing-function:linear;
 width:100%;
-height:1px;
+height:2px;
 }
 
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less
index 6c906f3161..31d0095836 100644
--- a/src/Umbraco.Web.UI.Client/src/less/variables.less
+++ b/src/Umbraco.Web.UI.Client/src/less/variables.less
@@ -43,7 +43,7 @@
 // UI Colors
 @red-d1:                #F02E28;
 @red:                   #D42054;// updated 2019
-@red-l1:			    #FE6561;
+@red-l1:			    #e22c60;// updated 2019
 @red-l2:			    #FE8B88;
 @red-l3:			    #FFB2B0;
 @red-washed:		    #FFECEB;
@@ -146,8 +146,10 @@
 
 @ui-selected:           @sand-1;
 @ui-selected-hover:     ligthen(@sand-1, 10);
-@ui-selected-type:           @blueMid;
+@ui-selected-type:           @blueExtraDark;
 @ui-selected-type-hover:     @blueMid;
+@ui-selected-border:           @pinkLight;
+@ui-selected-border-hover:     @pinkLight;
 
 @ui-light-border:           @pinkLight;
 @ui-light-type:             @gray-4;
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-folder-grid.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-folder-grid.html
index df5eafbbca..6796b7d64b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-folder-grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-folder-grid.html
@@ -11,7 +11,7 @@
          <div ng-click="clickFolderName(folder, $event, $index)" class="umb-folder-grid__folder-name">{{ folder.name }}</div>
       </div>
 
-      <i class="icon-check umb-folder-grid__action" ng-class="{'-selected': folder.selected}"></i>
+      <!--<i class="icon-check umb-folder-grid__action" ng-class="{'-selected': folder.selected}"></i>-->
 
    </div>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
index 360c6b2bb7..da94729562 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
@@ -1,7 +1,7 @@
 <div data-element="media-grid" class="umb-media-grid">
     <div data-element="media-grid-item-{{$index}}" class="umb-media-grid__item" title="{{item.name}}" ng-click="clickItem(item, $event, $index)" ng-repeat="item in items | filter:filterBy" ng-style="item.flexStyle" ng-class="{'-selected': item.selected, '-file': !item.thumbnail, '-svg': item.extension == 'svg'}">
         <div>
-            <i ng-show="item.selected" class="icon-check umb-media-grid__checkmark"></i>
+            <!--<i ng-show="item.selected" class="icon-check umb-media-grid__checkmark"></i>-->
             <a ng-if="allowOnClickEdit === 'true'" ng-click="clickEdit(item, $event)" ng-href="" class="icon-edit umb-media-grid__edit"></a>
 
             <div data-element="media-grid-item-edit" class="umb-media-grid__item-overlay" ng-class="{'-locked': item.selected}" ng-click="clickItemName(item, $event, $index)">