[gtk/wip/jimmac/adwaita-3-32: 41/67] Adwaita: round buttons

[Matthias Clasen <matthiasc src gnome org>]

commit 6ef7c2ef295bbb82749ba0d86ad0486b9e52f31a
Author: Jakub Steiner <jimmac gmail com>
Date:   Tue Dec 11 16:30:49 2018 +0100

    Adwaita: round buttons
    
    - Grumpy old man commits the first thing he dislikes on
      Allan's proposal.
    
    https://gitlab.gnome.org/GNOME/gtk/issues/1510

 gtk/theme/Adwaita/_common.scss           | 15 ++++++++-------
 gtk/theme/Adwaita/gtk-contained-dark.css | 10 +++++-----
 gtk/theme/Adwaita/gtk-contained.css      | 10 +++++-----
 3 files changed, 18 insertions(+), 17 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index fd959ac93a..6d2169e5e1 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -6,6 +6,7 @@ $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 $asset_suffix: if($variant=='dark', '-dark', '');
 $backdrop_transition: 200ms ease-out;
 $button_transition: all 200ms $ease-out-quad;
+$button_radius: 5px;
 $menu_radius: 5px;
 
 * {
@@ -527,7 +528,7 @@ button {
     min-width: 16px;
     padding: 4px 8px;
     border: 1px solid;
-    border-radius: 3px;
+    border-radius: $button_radius;
     transition: $button_transition;
 
     @include button(normal);
@@ -968,8 +969,8 @@ toolbar.inline-toolbar toolbutton:backdrop {
 }
 
 %linked_left {
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px;
+    border-top-left-radius: $button_radius;
+    border-bottom-left-radius: $button_radius;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     border-right-style: none;
@@ -978,8 +979,8 @@ toolbar.inline-toolbar toolbutton:backdrop {
 %linked_right {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
+    border-top-right-radius: $button_radius;
+    border-bottom-right-radius: $button_radius;
     border-right-style: solid;
 }
 
@@ -991,7 +992,7 @@ toolbar.inline-toolbar toolbutton:backdrop {
   &:last-child { @extend %linked_right; }
 
   &:only-child {
-    border-radius: 3px;
+    border-radius: $button_radius;
     border-style: solid;
   }
 }
@@ -1057,7 +1058,7 @@ modelbutton.flat,
   min-height: 26px;
   padding-left: 5px;
   padding-right: 5px;
-  border-radius: 3px;
+  border-radius: $button_radius;
   outline-offset: -2px;
 
   @extend %undecorated_button;
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 2fc8286b51..b3f546affd 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -188,7 +188,7 @@ treeview entry.flat:focus, treeview entry:focus { border-color: #15539e; }
 @keyframes needs_attention { from { background-image: -gtk-gradient(radial, center center, 0, center center, 
0.01, to(#1f76e1), to(transparent)); }
   to { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#15539e), 
to(transparent)); } }
 
-notebook > header > tabs > arrow, button.titlebutton, button { min-height: 24px; min-width: 16px; padding: 
4px 8px; border: 1px solid; border-radius: 3px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 
color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #252526; border-bottom-color: #111111; 
background-image: linear-gradient(to top, #302f30 2px, #3c3c3d 2px, #3f3e40); text-shadow: 0 -1px rgba(0, 0, 
0, 0.802353); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.802353); box-shadow: inset 0 1px rgba(255, 255, 255, 
0.05); }
+notebook > header > tabs > arrow, button.titlebutton, button { min-height: 24px; min-width: 16px; padding: 
4px 8px; border: 1px solid; border-radius: 5px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 
color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #252526; border-bottom-color: #111111; 
background-image: linear-gradient(to top, #302f30 2px, #3c3c3d 2px, #3f3e40); text-shadow: 0 -1px rgba(0, 0, 
0, 0.802353); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.802353); box-shadow: inset 0 1px rgba(255, 255, 255, 
0.05); }
 
 notebook > header > tabs > arrow, button.sidebar-button, button.titlebutton, button.flat { border-color: 
transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 
255, 0); text-shadow: none; -gtk-icon-shadow: none; transition: none; }
 
@@ -426,11 +426,11 @@ button.circular:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) {
 
 toolbar.inline-toolbar toolbutton > button.flat, toolbar.inline-toolbar toolbutton:backdrop > button.flat, 
.linked:not(.vertical) > spinbutton:not(.vertical), .linked:not(.vertical) > entry, .inline-toolbar button, 
.inline-toolbar button:backdrop, .linked > button, .linked > button:hover, .linked > button:active, .linked > 
button:checked, .linked > button:backdrop, filechooser .path-bar.linked > button, .linked > combobox > box > 
button.combo:dir(ltr), .linked > combobox > box > button.combo:dir(rtl) { border-radius: 0; 
border-right-style: none; }
 
-.linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > entry:first-child, 
.inline-toolbar button:first-child, .linked > button:first-child, toolbar.inline-toolbar 
toolbutton:first-child > button.flat, toolbar.inline-toolbar toolbutton:backdrop:first-child > button.flat, 
combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > 
button.combo, filechooser .path-bar.linked > button:dir(ltr):first-child, filechooser .path-bar.linked > 
button:dir(rtl):last-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; 
border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: none; }
+.linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > entry:first-child, 
.inline-toolbar button:first-child, .linked > button:first-child, toolbar.inline-toolbar 
toolbutton:first-child > button.flat, toolbar.inline-toolbar toolbutton:backdrop:first-child > button.flat, 
combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > 
button.combo, filechooser .path-bar.linked > button:dir(ltr):first-child, filechooser .path-bar.linked > 
button:dir(rtl):last-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; 
border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: none; }
 
-.linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > entry:last-child, 
.inline-toolbar button:last-child, .linked > button:last-child, toolbar.inline-toolbar toolbutton:last-child 
> button.flat, toolbar.inline-toolbar toolbutton:backdrop:last-child > button.flat, combobox.linked 
button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo, filechooser 
.path-bar.linked > button:dir(ltr):last-child, filechooser .path-bar.linked > button:dir(rtl):first-child { 
border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 3px; 
border-bottom-right-radius: 3px; border-right-style: solid; }
+.linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > entry:last-child, 
.inline-toolbar button:last-child, .linked > button:last-child, toolbar.inline-toolbar toolbutton:last-child 
> button.flat, toolbar.inline-toolbar toolbutton:backdrop:last-child > button.flat, combobox.linked 
button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo, filechooser 
.path-bar.linked > button:dir(ltr):last-child, filechooser .path-bar.linked > button:dir(rtl):first-child { 
border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 5px; 
border-bottom-right-radius: 5px; border-right-style: solid; }
 
-.linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > entry:only-child, 
.inline-toolbar button:only-child, .linked > button:only-child, toolbar.inline-toolbar toolbutton:only-child 
> button.flat, toolbar.inline-toolbar toolbutton:backdrop:only-child > button.flat, .linked:not(.vertical) > 
combobox:only-child > box > button.combo { border-radius: 3px; border-style: solid; }
+.linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > entry:only-child, 
.inline-toolbar button:only-child, .linked > button:only-child, toolbar.inline-toolbar toolbutton:only-child 
> button.flat, toolbar.inline-toolbar toolbutton:backdrop:only-child > button.flat, .linked:not(.vertical) > 
combobox:only-child > box > button.combo { border-radius: 5px; border-style: solid; }
 
 filechooser .path-bar.linked > button:only-child { border-radius: 3px; border-style: solid; }
 
@@ -445,7 +445,7 @@ filechooser .path-bar.linked > button:only-child { border-radius: 3px; border-st
 modelbutton.flat, .menuitem.button.flat, modelbutton.flat:backdrop, modelbutton.flat:backdrop:hover, 
.menuitem.button.flat:backdrop, .menuitem.button.flat:backdrop:hover, list row button, button:link, 
button:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, 
button:visited:active, button:visited:checked, calendar.button, .scale-popup button:hover, .scale-popup 
button:backdrop:hover, .scale-popup button:backdrop:disabled, .scale-popup button:backdrop { 
background-color: transparent; background-image: none; border-color: transparent; box-shadow: inset 0 1px 
rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
 
 /* menu buttons */
-modelbutton.flat, .menuitem.button.flat { min-height: 26px; padding-left: 5px; padding-right: 5px; 
border-radius: 3px; outline-offset: -2px; }
+modelbutton.flat, .menuitem.button.flat { min-height: 26px; padding-left: 5px; padding-right: 5px; 
border-radius: 5px; outline-offset: -2px; }
 
 modelbutton.flat:hover, .menuitem.button.flat:hover { background-color: #4c4b4d; }
 
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 1858bf4658..83365d7b89 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -188,7 +188,7 @@ treeview entry.flat:focus, treeview entry:focus { border-color: #3584e4; }
 @keyframes needs_attention { from { background-image: -gtk-gradient(radial, center center, 0, center center, 
0.01, to(#3584e4), to(transparent)); }
   to { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3584e4), 
to(transparent)); } }
 
-notebook > header > tabs > arrow, button.titlebutton, button { min-height: 24px; min-width: 16px; padding: 
4px 8px; border: 1px solid; border-radius: 3px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 
color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #cdc7c2; border-bottom-color: #bfb8b1; 
background-image: linear-gradient(to top, #dad6d2 2px, #edebe9 2px, #f6f5f4); text-shadow: 0 1px rgba(255, 
255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); box-shadow: inset 0 1px white; }
+notebook > header > tabs > arrow, button.titlebutton, button { min-height: 24px; min-width: 16px; padding: 
4px 8px; border: 1px solid; border-radius: 5px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 
color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #cdc7c2; border-bottom-color: #bfb8b1; 
background-image: linear-gradient(to top, #dad6d2 2px, #edebe9 2px, #f6f5f4); text-shadow: 0 1px rgba(255, 
255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); box-shadow: inset 0 1px white; }
 
 notebook > header > tabs > arrow, button.sidebar-button, button.titlebutton, button.flat { border-color: 
transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 
255, 0); text-shadow: none; -gtk-icon-shadow: none; transition: none; }
 
@@ -428,11 +428,11 @@ button.circular:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) {
 
 toolbar.inline-toolbar toolbutton > button.flat, toolbar.inline-toolbar toolbutton:backdrop > button.flat, 
.linked:not(.vertical) > spinbutton:not(.vertical), .linked:not(.vertical) > entry, .inline-toolbar button, 
.inline-toolbar button:backdrop, .linked > button, .linked > button:hover, .linked > button:active, .linked > 
button:checked, .linked > button:backdrop, filechooser .path-bar.linked > button, .linked > combobox > box > 
button.combo:dir(ltr), .linked > combobox > box > button.combo:dir(rtl) { border-radius: 0; 
border-right-style: none; }
 
-.linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > entry:first-child, 
.inline-toolbar button:first-child, .linked > button:first-child, toolbar.inline-toolbar 
toolbutton:first-child > button.flat, toolbar.inline-toolbar toolbutton:backdrop:first-child > button.flat, 
combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > 
button.combo, filechooser .path-bar.linked > button:dir(ltr):first-child, filechooser .path-bar.linked > 
button:dir(rtl):last-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; 
border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: none; }
+.linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > entry:first-child, 
.inline-toolbar button:first-child, .linked > button:first-child, toolbar.inline-toolbar 
toolbutton:first-child > button.flat, toolbar.inline-toolbar toolbutton:backdrop:first-child > button.flat, 
combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > 
button.combo, filechooser .path-bar.linked > button:dir(ltr):first-child, filechooser .path-bar.linked > 
button:dir(rtl):last-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; 
border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: none; }
 
-.linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > entry:last-child, 
.inline-toolbar button:last-child, .linked > button:last-child, toolbar.inline-toolbar toolbutton:last-child 
> button.flat, toolbar.inline-toolbar toolbutton:backdrop:last-child > button.flat, combobox.linked 
button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo, filechooser 
.path-bar.linked > button:dir(ltr):last-child, filechooser .path-bar.linked > button:dir(rtl):first-child { 
border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 3px; 
border-bottom-right-radius: 3px; border-right-style: solid; }
+.linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > entry:last-child, 
.inline-toolbar button:last-child, .linked > button:last-child, toolbar.inline-toolbar toolbutton:last-child 
> button.flat, toolbar.inline-toolbar toolbutton:backdrop:last-child > button.flat, combobox.linked 
button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo, filechooser 
.path-bar.linked > button:dir(ltr):last-child, filechooser .path-bar.linked > button:dir(rtl):first-child { 
border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 5px; 
border-bottom-right-radius: 5px; border-right-style: solid; }
 
-.linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > entry:only-child, 
.inline-toolbar button:only-child, .linked > button:only-child, toolbar.inline-toolbar toolbutton:only-child 
> button.flat, toolbar.inline-toolbar toolbutton:backdrop:only-child > button.flat, .linked:not(.vertical) > 
combobox:only-child > box > button.combo { border-radius: 3px; border-style: solid; }
+.linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > entry:only-child, 
.inline-toolbar button:only-child, .linked > button:only-child, toolbar.inline-toolbar toolbutton:only-child 
> button.flat, toolbar.inline-toolbar toolbutton:backdrop:only-child > button.flat, .linked:not(.vertical) > 
combobox:only-child > box > button.combo { border-radius: 5px; border-style: solid; }
 
 filechooser .path-bar.linked > button:only-child { border-radius: 3px; border-style: solid; }
 
@@ -447,7 +447,7 @@ filechooser .path-bar.linked > button:only-child { border-radius: 3px; border-st
 modelbutton.flat, .menuitem.button.flat, modelbutton.flat:backdrop, modelbutton.flat:backdrop:hover, 
.menuitem.button.flat:backdrop, .menuitem.button.flat:backdrop:hover, list row button, button:link, 
button:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, 
button:visited:active, button:visited:checked, calendar.button, .scale-popup button:hover, .scale-popup 
button:backdrop:hover, .scale-popup button:backdrop:disabled, .scale-popup button:backdrop { 
background-color: transparent; background-image: none; border-color: transparent; box-shadow: inset 0 1px 
rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
 
 /* menu buttons */
-modelbutton.flat, .menuitem.button.flat { min-height: 26px; padding-left: 5px; padding-right: 5px; 
border-radius: 3px; outline-offset: -2px; }
+modelbutton.flat, .menuitem.button.flat { min-height: 26px; padding-left: 5px; padding-right: 5px; 
border-radius: 5px; outline-offset: -2px; }
 
 modelbutton.flat:hover, .menuitem.button.flat:hover { background-color: white; }