[Gtk-3.22] Separate titlebar mixin from toolbar

Separate mixin for toolbar and titlebar
Symbolic icon for horizontal toolbar. Lets face it, toolbutton icons for gnome+hicolor are not as good as symbolic icons. We are using symbolic icons everywhere else anyway.
Button padding for horizontal toolbar is reduced to 4px. Horizontal toolbar requests GTK_ICON_SIZE_LARGE (24x24) by default. It doesn't make sense to use 5px padding on 24x24 icons.
Button (image, text, image-text, popup, radio) padding for vertical toolbar,headerbar remains same for now.

Author: khurshid-alam

src/gtk-3.20/scss/widgets/_toolbar.scss

@@ -5,15 +5,14 @@
  ! Toolbar
 **********/
 
-@mixin toolbar($bg, $fg) {
+@mixin titlebar($bg, $fg) {
     @include linear-gradient($bg);
     @include border($bg);
 
     color: $fg;
 
     &:disabled {
         @include linear-gradient(shade($bg, .9));
-
         color: mix($fg, $bg, .5);
     }
 
@@ -28,22 +27,65 @@
     }
 
     button { @include button($bg, $fg); }
-
     .linked > button { @include linked_button($bg); }
 
-    combobox, button {
-        padding: $spacing;
+    combobox { padding: 4px; }
+
+    separator {
+        &, &:disabled {
+            color: shade($bg, ($contrast - .2));
+            border-color: currentColor;
+            -GtkWidget-window-dragging: true;
+        }
+    }
+}
+
+
+
+
+
+@mixin toolbar($bg, $fg) {
+    @include linear-gradient($bg);
+    @include border($bg);
+
+    color: $fg;
+
+    &:disabled {
+        @include linear-gradient(shade($bg, .9));
+        color: mix($fg, $bg, .5);
+    }
+
+    .title {
+        font-weight: bold;
+        padding: 0 ($spacing * 2);
+    }
+
+    .subtitle {
+        font-size: smaller;
+        padding: 0 ($spacing * 2);
+    }
 
-        &.text-button { padding: $spacing; }
+    button { @include button($bg, $fg); }
+    .linked > button { @include linked_button($bg); }
 
-        &.image-button { padding: $spacing; }
+    &.horizontal combobox { padding: 4px; }
+    
+    &.horizontal button {
+        padding: 4px;
+        &.text-button { padding: 4px; }
+        &.image-button { padding: 4px; }
+    }
+
+    &.vertical button {
+        padding: 5px;
+        &.text-button { padding: 5px; }
+        &.image-button { padding: 5px; }
     }
 
     separator {
         &, &:disabled {
             color: shade($bg, ($contrast - .2));
             border-color: currentColor;
-
             -GtkWidget-window-dragging: true;
         }
     }
@@ -81,6 +123,7 @@
     %toolbar {
         padding: $spacing - 1px;
         border-style: none;
+        -gtk-icon-style: symbolic;
 
         // toolbar separators
         &.horizontal separator { margin: 0 ($spacing + 2px) 1px; }
@@ -99,6 +142,11 @@
         button { // Size height
             margin-top: $spacing + 3px;
             margin-bottom: $spacing + 3px;
+            &.popup { padding: 5px; }
+            &.image-button { padding: 5px; }
+            &.text-button.image-button { padding: 5px; }
+            &.text-button { padding: 5px; }
+
         }
 
         switch { // Size height
@@ -113,7 +161,7 @@
     }
 
     %titlebar { // Default headerbar and titlebar code.
-        @include toolbar($titlebar_bg_color, $titlebar_fg_color);
+        @include titlebar($titlebar_bg_color, $titlebar_fg_color);
         @include linear-gradient($titlebar_bg_color);
 
         border-radius: $roundness $roundness 0 0;
@@ -186,7 +234,6 @@
 @include exports("toolbar") {
     toolbar {
         @include toolbar($toolbar_bg_color, $toolbar_fg_color);
-
         @extend %toolbar;
 
         &.inline-toolbar { @include inline-toolbar($toolbar_bg_color, $toolbar_fg_color); }