From 36f5364a85f6447a3e8550c7d3d9a9ce613f8e04 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hn@stylite.de>
Date: Wed, 16 Sep 2015 13:40:00 +0000
Subject: [PATCH] WIP toggle sidebar menu: - Implement reload icon in a better
 position

---
 pixelegg/css/mobile.css                  | 35 ++++--------------------
 pixelegg/css/pixelegg.css                | 35 ++++--------------------
 pixelegg/less/layout_raster_sidebar.less | 35 +++++++++---------------
 3 files changed, 23 insertions(+), 82 deletions(-)

diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css
index 9c3b0d480c..de44759f33 100644
--- a/pixelegg/css/mobile.css
+++ b/pixelegg/css/mobile.css
@@ -4738,33 +4738,6 @@ td.message span.message {
   font-size: 1.4em;
   color: #000000;
   padding-top: .8em;
-  background-image: url(../images/reload.png);
-  background-repeat: no-repeat;
-  background-size: 16px;
-  background-position-x: 74%;
-  background-position-y: 60%;
-  background-position: 74%;
-}
-#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active h1:active {
-  background-image: url(../images/ajax-loader.gif) !important;
-}
-#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active:hover {
-  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-  -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-  -webkit-border-top-right-radius: 5px;
-  -webkit-border-bottom-right-radius: 0px;
-  -webkit-border-bottom-left-radius: 0px;
-  -webkit-border-top-left-radius: 27px;
-  -moz-border-radius-topright: 5px;
-  -moz-border-radius-bottomright: 0px;
-  -moz-border-radius-bottomleft: 0px;
-  -moz-border-radius-topleft: 27px;
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 0px;
-  border-bottom-left-radius: 0px;
-  border-top-left-radius: 27px;
-  /*.background-clip(padding-box);*/
 }
 #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active:active {
   -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
@@ -4784,6 +4757,9 @@ td.message span.message {
   border-top-left-radius: 27px;
   /*.background-clip(padding-box);*/
 }
+#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active:hover img {
+  content: url(../images/reload.png);
+}
 #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active:focus {
   background-image: url("../images/ajax-loader.gif");
   background-repeat: no-repeat;
@@ -4803,8 +4779,7 @@ td.message span.message {
   height: 16px;
 }
 #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active .egw_fw_ui_ajaxloader {
-  margin-top: -15%;
-  margin-right: 25%;
+  margin-top: -26px;
 }
 #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content {
   display: block;
@@ -4997,7 +4972,7 @@ td.message span.message {
   margin-top: 0;
   margin-bottom: -30px;
   float: right;
-  margin-right: 5px;
+  margin-right: -15px;
 }
 #egw_fw_sidebar #egw_fw_toggler span {
   background-color: transparent;
diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index 38af34f725..ed3c6b4b4f 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -4727,33 +4727,6 @@ td.message span.message {
   font-size: 1.4em;
   color: #000000;
   padding-top: .8em;
-  background-image: url(../images/reload.png);
-  background-repeat: no-repeat;
-  background-size: 16px;
-  background-position-x: 74%;
-  background-position-y: 60%;
-  background-position: 74%;
-}
-#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active h1:active {
-  background-image: url(../images/ajax-loader.gif) !important;
-}
-#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active:hover {
-  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-  -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-  -webkit-border-top-right-radius: 5px;
-  -webkit-border-bottom-right-radius: 0px;
-  -webkit-border-bottom-left-radius: 0px;
-  -webkit-border-top-left-radius: 27px;
-  -moz-border-radius-topright: 5px;
-  -moz-border-radius-bottomright: 0px;
-  -moz-border-radius-bottomleft: 0px;
-  -moz-border-radius-topleft: 27px;
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 0px;
-  border-bottom-left-radius: 0px;
-  border-top-left-radius: 27px;
-  /*.background-clip(padding-box);*/
 }
 #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active:active {
   -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
@@ -4773,6 +4746,9 @@ td.message span.message {
   border-top-left-radius: 27px;
   /*.background-clip(padding-box);*/
 }
+#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active:hover img {
+  content: url(../images/reload.png);
+}
 #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active:focus {
   background-image: url("../images/ajax-loader.gif");
   background-repeat: no-repeat;
@@ -4792,8 +4768,7 @@ td.message span.message {
   height: 16px;
 }
 #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active .egw_fw_ui_ajaxloader {
-  margin-top: -15%;
-  margin-right: 25%;
+  margin-top: -26px;
 }
 #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content {
   display: block;
@@ -4986,7 +4961,7 @@ td.message span.message {
   margin-top: 0;
   margin-bottom: -30px;
   float: right;
-  margin-right: 5px;
+  margin-right: -15px;
 }
 #egw_fw_sidebar #egw_fw_toggler span {
   background-color: transparent;
diff --git a/pixelegg/less/layout_raster_sidebar.less b/pixelegg/less/layout_raster_sidebar.less
index 7b4d3d230e..739c2c4e33 100644
--- a/pixelegg/less/layout_raster_sidebar.less
+++ b/pixelegg/less/layout_raster_sidebar.less
@@ -54,11 +54,11 @@
             // DRAG AND DROP
             div.ui-sortable {
 
-                div {
-                    padding: 3px 0 1px 3px;
-                    cursor: pointer;
-                }
-            }
+				div {
+					padding: 3px 0 1px 3px;
+					cursor: pointer;
+				}
+			}
 
 
             //####################################################
@@ -120,23 +120,14 @@
 
                 img {padding-left: 9px; padding-top: 6px; height: 18px;}
 
-                h1 {
-					text-transform: uppercase;
-					font-size: 1.4em;
-					.color_100_gray;
-					padding-top: .8em;
-					background-image: url(../images/reload.png);
-					background-repeat: no-repeat;
-					background-size: 16px;
-					background-position-x: 74%;
-					background-position-y: 60%;
-					background-position: 74%;
-					&:active {background-image: url(../images/ajax-loader.gif) !important;}
-				}
+                h1 {text-transform: uppercase;font-size: 1.4em;.color_100_gray;padding-top: .8em;}
 
-                &:hover {.box_shadow_standard_light_hover; .border_radius ( 5px, 0px, 0px, 27px );}
                 &:active {.box_shadow_standard_light_active; .border_radius ( 5px, 0px, 0px, 27px );}
-
+				&:hover {
+					img {
+						content: url(../images/reload.png);
+					}
+				}
                 &:focus {
                     background-image: url("../images/ajax-loader.gif");
                     background-repeat: no-repeat;
@@ -153,7 +144,7 @@
                     .dimension_width_height_s;
                 }
 
-                .egw_fw_ui_ajaxloader {margin-top: -15%;margin-right: 25%;}
+                .egw_fw_ui_ajaxloader {margin-top: -26px;}
 
             }
 
@@ -349,7 +340,7 @@
 		margin-top: 0;
 		margin-bottom: -30px;
 		float: right;
-		margin-right:5px;
+		margin-right:-15px;
 
 		span {
 			background-color: transparent;