Gnome: Fix issue with sidebar in rtl layouts, Fixes #199

EliverLara · Mar 17, 2022 · 808dce9 · 808dce9
1 parent 7dcb8b0
commit 808dce9
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 30 deletions.
diff --git a/gtk-3.0/_drawing.scss b/gtk-3.0/_drawing.scss
@@ -590,3 +590,13 @@
   border: none;
   box-shadow: none;
 }
+
+
+@mixin sidebar_bg ($dir, $c1, $c2) {
+
+
+  background-image: linear-gradient(to $dir, $c1 40px,
+                                    $c2 35px,$c2 36px,
+                                    $c2 36px,$c2 99%, 
+                                    $c2 100%);
+}
diff --git a/gtk-3.0/gtk-dark.css b/gtk-3.0/gtk-dark.css
diff --git a/gtk-3.0/gtk.css b/gtk-3.0/gtk.css
diff --git a/gtk-3.0/widgets/_sidebar.scss b/gtk-3.0/widgets/_sidebar.scss
@@ -120,10 +120,9 @@ stacksidebar {
 placessidebar{
 	&.sidebar{
 		background-color: transparent;
-		background-image:linear-gradient(to right, darken($main_dark_color, 5%) 40px,
-												$_sidebar_color 35px,$_sidebar_color 36px,
-												$_sidebar_color 36px,$_sidebar_color 99%, 
-												$_sidebar_color 100%);
+
+    @include sidebar_bg(right, darken($main_dark_color, 5%), $_sidebar_color);
+    &:dir(rtl) { @include sidebar_bg(left, darken($main_dark_color, 5%), $_sidebar_color); }
 		row{
 			&.sidebar-row {
 				&.sidebar-row{
@@ -133,13 +132,23 @@ placessidebar{
 						padding-left: 14px;
 						padding-right: 12px;
 						color: #98abb2;
+
+            &:dir(rtl) {
+              margin-right:-14px;
+              margin-left: 12px;
+              padding-right: 14px;
+              padding-left: 12px;
+
+            }
 					}
 				}
 				&:hover{
 					transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 					color: rgba(0,0,0,0.76);
-					background-color: transparent; /*rgba(65,67,75,0.4); */
-					background-image:linear-gradient(to right, rgba(65,67,75,0) 40px, rgba(0,0,0,0.12) 40px,rgba(0,0,0,0.12) 97%);
+					background-color: transparent;
+
+          @include sidebar_bg(right,rgba(65,67,75,0), rgba(0,0,0,0.12));
+          &:dir(rtl) { @include sidebar_bg(left,rgba(65,67,75,0), rgba(0,0,0,0.12)); }
 				}
 
 				&:active{
@@ -151,30 +160,26 @@ placessidebar{
 
 				&:selected{
           color: #fff;
-          label {
-            color: $selected_bg_color;
-          }
+          label { color: $selected_bg_color; }
 					background-color: transparent;
-					background-image:linear-gradient(to right, transparentize($selected_bg_color, 0.3) 40px,
-																rgba(65,67,75,0) 36px, rgba(65,67,75,0)97%);
-					&:hover{
+
+          @include sidebar_bg(right, transparentize($selected_bg_color, 0.3), rgba(65,67,75,0));
+          &:dir(rtl) { @include sidebar_bg(left, transparentize($selected_bg_color, 0.3), rgba(65,67,75,0)); }
+
+          &:hover{
 						color: #ffffff;
 						background-color: rgba(0,0,0,0.24);
 						.sidebar-icon {
 							color: #ffffff;
 						}
           }
           &:backdrop{
-            color: rgba(0,0,0,0.54);;
-            background-color: transparent;
-            background-image:linear-gradient(to right, $selected_bg_color 40px,
-                                  rgba(65,67,75,0) 36px, rgba(65,67,75,0)97%);
-
+            color: $backdrop_selected_fg_color;
             .sidebar-icon {
               -gtk-icon-shadow: none;  
             }
           }
-
+          
 					.sidebar-icon {
 						-gtk-icon-shadow: 0 1px transparentize(#fff, 0.2);
 						color: inherit;