From 06f4b44878ef59699ed6bd8d2725420346d3a9ca Mon Sep 17 00:00:00 2001
From: Samuel Georges <sam@daftspunk.com>
Date: Thu, 27 Jul 2017 17:28:56 +1000
Subject: [PATCH] Fixes styling found in Pages plugin

---
 modules/backend/assets/css/october.css        |  19 ++++++++--
 .../assets/images/treeview-submenu-tabs.png   | Bin 1341 -> 2714 bytes
 .../assets/less/controls/filelist.less        |  35 ++++++++++++++++--
 .../assets/less/controls/treeview.less        |  13 +++++++
 .../backend/assets/less/core/variables.less   |   6 ++-
 5 files changed, 63 insertions(+), 10 deletions(-)

diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css
index 1e705cec9..8ccbe68d4 100644
--- a/modules/backend/assets/css/october.css
+++ b/modules/backend/assets/css/october.css
@@ -232,15 +232,19 @@ html.mobile .control-scrollbar{overflow:auto;-webkit-overflow-scrolling:touch}
 .control-filelist.filelist-hero ul li > a span.title{font-size:14px;font-weight:normal;color:#2b3e50}
 .control-filelist.filelist-hero ul li > a span.description{font-size:13px}
 .control-filelist.filelist-hero ul li > a .list-icon{position:absolute;left:14px;top:15px;font-size:22px;color:#b7c0c2}
-.control-filelist.filelist-hero ul li > a:hover{background:#58b6f7;border-bottom:1px solid #58b6f7 !important}
+.control-filelist.filelist-hero ul li > a:hover{background:#4ea5e0;border-bottom:1px solid #4ea5e0 !important}
 .control-filelist.filelist-hero ul li > a:hover span.title,.control-filelist.filelist-hero ul li > a:hover span.description{color:#ffffff !important}
 .control-filelist.filelist-hero ul li > a:hover .list-icon{color:#ffffff !important}
+.control-filelist.filelist-hero ul li > a:active{background:#3498db;border-bottom:1px solid #3498db !important}
+.control-filelist.filelist-hero ul li > a:active span.title,.control-filelist.filelist-hero ul li > a:active span.description{color:#ffffff !important}
+.control-filelist.filelist-hero ul li > a:active .list-icon{color:#ffffff !important}
 .control-filelist.filelist-hero ul li .checkbox{top:-2px;right:0}
 .control-filelist.filelist-hero ul li.active > a{border-bottom:1px solid #dddddd}
 .control-filelist.filelist-hero ul li.active > a:after{top:-1px;bottom:-1px;height:auto}
 .control-filelist.filelist-hero ul li.active > a > span.borders:before{content:' ';position:absolute;width:100%;height:1px;display:block;left:0;background-color:#dddddd}
 .control-filelist.filelist-hero ul li.active > a > span.borders:before{top:-1px}
-.control-filelist.filelist-hero ul li.active > a:hover > span.borders:before{background-color:#58b6f7}
+.control-filelist.filelist-hero ul li.active > a:hover > span.borders:before{background-color:#4ea5e0}
+.control-filelist.filelist-hero ul li.active > a:active > span.borders:before{background-color:#3498db}
 .control-filelist.filelist-hero ul li > h4{padding-top:7px;padding-bottom:6px;border-bottom:1px solid #ecf0f1}
 .control-filelist.filelist-hero ul li > div.controls{display:none;position:absolute;right:16px;top:15px}
 .control-filelist.filelist-hero ul li > div.controls > a.control{width:16px;height:23px;background:transparent;overflow:hidden;display:inline-block;color:#ffffff !important;padding:0}
@@ -251,10 +255,14 @@ html.mobile .control-scrollbar{overflow:auto;-webkit-overflow-scrolling:touch}
 .control-filelist.filelist-hero ul li.separator:after{z-index:30;content:'';display:block;width:0;height:0;border-left:8.5px solid transparent;border-right:8.5px solid transparent;border-top:9px solid #95a5a6;border-bottom-width:0;position:absolute;left:14px;bottom:-9px}
 .control-filelist.filelist-hero ul li.separator h5{color:#2b3e50;font-size:14px;margin:0;font-weight:normal;padding:0}
 .control-filelist.filelist-hero ul > li.group > ul > li > a{padding-left:66px}
-.control-filelist.filelist-hero.single-level ul li:hover{background:#58b6f7}
-.control-filelist.filelist-hero.single-level ul li:hover > a{background:#58b6f7;border-bottom:1px solid #58b6f7 !important}
+.control-filelist.filelist-hero.single-level ul li:hover{background:#4ea5e0}
+.control-filelist.filelist-hero.single-level ul li:hover > a{background:#4ea5e0;border-bottom:1px solid #4ea5e0 !important}
 .control-filelist.filelist-hero.single-level ul li:hover > a span.title,.control-filelist.filelist-hero.single-level ul li:hover > a span.description{color:#ffffff !important}
 .control-filelist.filelist-hero.single-level ul li:hover > a .list-icon{color:#ffffff !important}
+.control-filelist.filelist-hero.single-level ul li:active{background:#3498db}
+.control-filelist.filelist-hero.single-level ul li:active > a{background:#3498db;border-bottom:1px solid #3498db !important}
+.control-filelist.filelist-hero.single-level ul li:active > a span.title,.control-filelist.filelist-hero.single-level ul li:active > a span.description{color:#ffffff !important}
+.control-filelist.filelist-hero.single-level ul li:active > a .list-icon{color:#ffffff !important}
 .touch .control-filelist li:not(.active) a:hover{background:transparent}
 .control-scrollpanel{position:relative;background:#ecf0f1}
 .control-scrollpanel .control-scrollbar.vertical > .scrollbar-scrollbar{right:0}
@@ -316,6 +324,9 @@ html.mobile .control-scrollbar{overflow:auto;-webkit-overflow-scrolling:touch}
 .control-treeview ol > li > div > ul.submenu li a{display:block;padding:4px 3px 0 3px;color:#ffffff;text-decoration:none;outline:none}
 .control-treeview ol > li > div > ul.submenu li a i{margin-right:5px}
 .control-treeview ol > li > div:hover > ul.submenu{display:block}
+.control-treeview ol > li > div:active > ul.submenu{background-position:left -116px}
+.control-treeview ol > li > div:active > ul.submenu:before{background-position:left -77px}
+.control-treeview ol > li > div:active > ul.submenu:after{background-position:-100px -77px}
 .control-treeview ol > li > div .checkbox{position:absolute;top:-2px;right:0}
 .control-treeview ol > li > div .checkbox label{margin-right:0}
 .control-treeview ol > li > div .checkbox label:before{border-color:#cccccc}
diff --git a/modules/backend/assets/images/treeview-submenu-tabs.png b/modules/backend/assets/images/treeview-submenu-tabs.png
index 4260a5ae88be69b980ff83c5c84f44963a429397..6c39867bada1d1380af79023b63857b8d905e2e8 100644
GIT binary patch
literal 2714
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
W%d8tG7McG_pnKg=`?qTjxPJmA&?X}Q

literal 1341
zcmeAS@N?(olHy`uVBq!ia0vp^6+rCE!3-p$cmw`1FfdLH@Ck8k=;{6c|38p~qnw3@
z;A{w^eCkp(5hA$}+rC3oVwwpQubMO$(;T=KG^zUDez-{LiYst7CL?eDKA>Q2|5UhC
z<krt{cFlwt5O!VPq=;?b;NlQQ!rF)F%g)0Efoh_*e1vm>4lbCp4Z;PwCuQaJs!4Nz
z+}I5-fXY%<-AG%05h4rpZ}O^}(VN~yZTSrJ5d=kT`4qe1Wz43x@#~+(Y<d&7;W^M@
zkz2n4#o=mzP6Dzu*{s5V@zhol<QEK#C?;kW7FITP4o*%kZXRAfegQ!tVG&U=aS2H&
zX=xcbIe7(T6;%xlO)YI5U3~)sLt_(D3rlNj8(UjD2S+Do7gsk=FE4NJfS{0&u!zXG
zgv8|3w2aKG+`{70va*V*nx?Mq?w-C0lV;AIzhJ@Q^@oofJ#p#Ey+==;K6~@_-MjZ6
zzW)0c{VeM)0|V1VPZ!6Kint@!o(DY&U|@Z4r&>7QiHC*5b;24C78h36qfN0J7c7d{
z(7*Tk#_#X!zWb@Y>f7|s``tY8AOGf97O!~KeZP{?N<DtZie(4Zr+@nJS>J)t!clHs
zLqpSs2Xjnn;usWJ1#MlV<Q54o5$NUCKY3_+>kK!MLvuE`h{Xw6tU0u2>6ccOKS5a!
zO(RO)Om6uu`^Y+{blZfM=s97cZ9OMneVRM5`FxGu>dr=yC6*Ue&rfPjPn~|^;smCS
ztvkF<$$K8`f2yj--F@Zck+kJ9ca&M*v!*VWbQVpk@Z|ftZ&G7?wezMU##%fA>Dqk9
z{7xQNzA<5Aud_p|qL^*!MoXg)F>B5!C#^Wx^B`<dZ@9{X)yGym5|iL%+v52t+%#u$
z!*=Oae<pRZN%2Ik)}QpE-axMIg}+NpnApC<4QAr4uXgkIwDa$J?d+N+Rdb-DSi@9y
zvA^44|HZPVUCqw(4UQ~|ndu`h#VfyT^3+Wo57l`D-t(!l9n0@&%|FI2q-frMAYNjV
zS^b{ul)qO!ew5ZO(SEmm;|Jzzuby_QuotVl9a7(UFy+YN(AUCkYnEJDx~cp6v4hvU
zZ-&fO+W3K+C*xrBMJt=lW$7X{+s%ycL_HME_#oPLW8IZyn?74_KXzcd_2-)*Ym<(D
zkmi~2fX{rX`t<F6@9%$UyZ^3#`!w~-zKPo#4wOq6Et1JS@3TJVo!m=a`L}uNe9~_%
z-gM%CjfBEAxsLL*BJS1FRfnZlbMN#?w@FABJkiehNTq(uPJLsurRFxK(_Uux{ZjQS
z{ha8vTd8xK+}?-twzZVmtf)UMkhu8?FU#So!w(Y<XwNikvOgfgnmJAUE#Kb6_Sh$p
zQbAYzH+U(tZLT`3lQ!Yhvx6$1|39>Ub5@ZNm`#`#e1G??=`0ibiOvcIvF@Wu8zXdp
zRP1X8#<oL@OguN4StK5@aTrwa3M5>RS2&<x=+Mwu+`z#6n1PWYXx+zv2P+;#1I=OZ
MboFyt=akR{03Snrc>n+a

diff --git a/modules/backend/assets/less/controls/filelist.less b/modules/backend/assets/less/controls/filelist.less
index cc9b3de89..0a18f932d 100644
--- a/modules/backend/assets/less/controls/filelist.less
+++ b/modules/backend/assets/less/controls/filelist.less
@@ -239,13 +239,25 @@
     &.filelist-hero {
         .a-hover() {
             background: @color-filelist-hero-hover-bg;
-            border-bottom: 1px solid @color-filelist-hero-hover-bg!important;
+            border-bottom: 1px solid @color-filelist-hero-hover-bg !important;
             span.title, span.description {
-                color: @color-filelist-hero-hover-text!important;
+                color: @color-filelist-hero-hover-text !important;
             }
 
             .list-icon {
-                color: @color-filelist-hero-hover-text!important;
+                color: @color-filelist-hero-hover-text !important;
+            }
+        }
+
+        .a-active() {
+            background: @color-filelist-hero-active-bg;
+            border-bottom: 1px solid @color-filelist-hero-active-bg !important;
+            span.title, span.description {
+                color: @color-filelist-hero-active-text !important;
+            }
+
+            .list-icon {
+                color: @color-filelist-hero-active-text !important;
             }
         }
 
@@ -280,6 +292,10 @@
                     &:hover {
                         .a-hover();
                     }
+
+                    &:active {
+                        .a-active();
+                    }
                 }
 
                 .checkbox {
@@ -314,6 +330,10 @@
                         &:hover > span.borders:before {
                             background-color: @color-filelist-hero-hover-bg;
                         }
+
+                        &:active > span.borders:before {
+                            background-color: @color-filelist-hero-active-bg;
+                        }
                     }
                 }
 
@@ -394,10 +414,17 @@
                     .a-hover();
                 }
             }
+            ul li:active {
+                background: @color-filelist-hero-active-bg;
+
+                > a {
+                    .a-active();
+                }
+            }
         }
     }
 }
 
 .touch .control-filelist li:not(.active) a:hover {
     background: transparent;
-}
\ No newline at end of file
+}
diff --git a/modules/backend/assets/less/controls/treeview.less b/modules/backend/assets/less/controls/treeview.less
index 47494ef01..07f270282 100644
--- a/modules/backend/assets/less/controls/treeview.less
+++ b/modules/backend/assets/less/controls/treeview.less
@@ -160,6 +160,19 @@
                     }
                 }
 
+                &:active {
+                    > ul.submenu {
+                        background-position: left -116px;
+
+                        &:before {
+                            background-position: left -77px;
+                        }
+                        &:after {
+                            background-position: -100px -77px;
+                        }
+                    }
+                }
+
                 .checkbox {
                     position: absolute;
                     top: -2px;
diff --git a/modules/backend/assets/less/core/variables.less b/modules/backend/assets/less/core/variables.less
index 05544ab84..cf36e5986 100644
--- a/modules/backend/assets/less/core/variables.less
+++ b/modules/backend/assets/less/core/variables.less
@@ -88,8 +88,10 @@
 @color-filelist-cb-border:                   #cccccc;
 @color-filelist-title-hero:                  #2b3e50;
 @color-filelist-hero-item-bg:                #ffffff;
-@color-filelist-hero-hover-bg:               #58b6f7;
-@color-filelist-hero-hover-text:             #ffffff;
+@color-filelist-hero-hover-bg:               @highlight-hover-bg;
+@color-filelist-hero-hover-text:             @highlight-hover-text;
+@color-filelist-hero-active-bg:              @highlight-active-bg;
+@color-filelist-hero-active-text:            @highlight-active-text;
 
 @color-fancy-master-tabs-bg:                 #d35400;
 @color-fancy-master-tabs-active-text:        #ffffff;