[gtk/wip/jimmac/rounded-lists] Adwaita: rounded lists



commit 04e84618b875415009b52efeef1d404513906971
Author: Jakub Steiner <jimmac gmail com>
Date:   Tue Oct 2 15:31:33 2018 +0200

    Adwaita: rounded lists
    
    - non-scrolled lists get a rounded corner
    - scrolled lists are rectangular

 gtk/theme/Adwaita/_common.scss           |  8 ++++++++
 gtk/theme/Adwaita/gtk-contained-dark.css | 12 ++++++++++--
 gtk/theme/Adwaita/gtk-contained.css      | 12 ++++++++++--
 3 files changed, 28 insertions(+), 4 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 5fd176598b..3cba4c061a 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -3637,6 +3637,10 @@ list {
   }
 
   row { padding: 2px; }
+
+  border-radius: 6px; /* rounded borders for lists ...*/
+  /* ... not for scrolled lists though */
+  scrolledwindow & { border-radius: 0; }
 }
 
 row {
@@ -3666,6 +3670,10 @@ row {
   }
 
   &:selected { @extend %selected_items; }
+  /* non scrolled lists get a rounded corner */
+  &:first-child { border-radius: 3px 3px 0 0; }
+  &:last-child { border-radius: 0 0 3px 3px; }
+     scrolledview &:first-child, scrolledview &:last-child { border-raidus: 0 }
 }
 
 
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 4b362f5505..c59f58cf84 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1576,13 +1576,15 @@ scrolledwindow junction:backdrop { border-image-source: linear-gradient(to botto
 separator { background: rgba(0, 0, 0, 0.1); min-width: 1px; min-height: 1px; }
 
 /********* Lists * */
-list { color: white; background-color: #232729; border-color: #1b1f20; }
+list { color: white; background-color: #232729; border-color: #1b1f20; border-radius: 6px; /* not for 
scrolled lists though */ }
 
 list:backdrop { background-color: #252a2c; border-color: #202425; }
 
 list row { padding: 2px; }
 
-row { transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
+scrolledwindow list { border-radius: 0; }
+
+row { transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); /* non scrolled lists get a rounded corner 
*/ }
 
 row:hover { transition: none; }
 
@@ -1600,6 +1602,12 @@ row.activatable:selected.has-open-popup, row.activatable:selected:hover { backgr
 
 row.activatable:selected:backdrop { background-color: #215d9c; }
 
+row:first-child { border-radius: 3px 3px 0 0; }
+
+row:last-child { border-radius: 0 0 3px 3px; }
+
+scrolledview row:first-child, scrolledview row:last-child { border-raidus: 0; }
+
 /********************* App Notifications * */
 .app-notification, .app-notification.frame { padding: 10px; border-radius: 0 0 5px 5px; background-color: 
rgba(28, 31, 32, 0.7); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px); 
background-clip: padding-box; }
 
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 67aef82932..3ef667da70 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1596,13 +1596,15 @@ scrolledwindow junction:backdrop { border-image-source: linear-gradient(to botto
 separator { background: rgba(0, 0, 0, 0.1); min-width: 1px; min-height: 1px; }
 
 /********* Lists * */
-list { color: black; background-color: #ffffff; border-color: #b6b6b3; }
+list { color: black; background-color: #ffffff; border-color: #b6b6b3; border-radius: 6px; /* not for 
scrolled lists though */ }
 
 list:backdrop { background-color: #fcfcfc; border-color: #c0c0bd; }
 
 list row { padding: 2px; }
 
-row { transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
+scrolledwindow list { border-radius: 0; }
+
+row { transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); /* non scrolled lists get a rounded corner 
*/ }
 
 row:hover { transition: none; }
 
@@ -1620,6 +1622,12 @@ row.activatable:selected.has-open-popup, row.activatable:selected:hover { backgr
 
 row.activatable:selected:backdrop { background-color: #4a90d9; }
 
+row:first-child { border-radius: 3px 3px 0 0; }
+
+row:last-child { border-radius: 0 0 3px 3px; }
+
+scrolledview row:first-child, scrolledview row:last-child { border-raidus: 0; }
+
 /********************* App Notifications * */
 .app-notification, .app-notification.frame { padding: 10px; border-radius: 0 0 5px 5px; background-color: 
rgba(28, 31, 32, 0.7); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px); 
background-clip: padding-box; }
 


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]