Adding configuration options to change spacing between icons and labels inside the buttons in the bar. (#30)

* Branch protection check.

* Move button spacing config into the Configuration section instead of Theming.

* Partially Resolves #26 - Added the ability to configure outer spacing on the bar.

* Renamed all class names for buttons so they can be styled with margins.

* Added configurable spacing to buttons.

* Fixed styling for network module when using wifi.

* Fixed ghost margins that occur when labels are disabled in the bar buttons.

* Change the default page of the settings dialog to configuration.

scss/style/bar/audio.scss

@@ -1,11 +1,12 @@
 @import '../colors';
 @import '../../variables';
 
-.bar-volume_icon {
+.bar-button-icon.volume {
   font-size: 1.3em;
   color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-volume-icon);
 }
 
-.bar-volume_percentage {
+.bar-button-label.volume {
   color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-volume-text);
+  margin-left: $bar-buttons-volume-spacing;
 }

scss/style/bar/bar.scss

@@ -127,9 +127,9 @@
 }
 
 .box-left {
-  margin-left: 1.9rem;
+  margin-left: $bar-outer_spacing;
 }
 
 .box-right {
-  margin-right: 1.9rem;
+  margin-right: $bar-outer_spacing;
 }

scss/style/bar/battery.scss

@@ -3,10 +3,12 @@
 
 .bar {
   .battery {
-    label {
+    .bar-button-label.battery {
       color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-battery-text);
+      margin-left: $bar-buttons-battery-spacing;
     }
-    image {
+
+    .bar-button-icon.battery {
       color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-battery-icon);
     }
   }
@@ -15,6 +17,7 @@
 .menu-section-container.brightness {
   margin-bottom: 0em;
 }
+
 .menu-section-container.energy {
   margin-top: 0.5em;
 }

scss/style/bar/bluetooth.scss

@@ -1,13 +1,14 @@
 @import '../colors';
 @import '../../variables';
 
-.bar-bt_icon {
+.bar-button-icon.bluetooth {
   font-size: 1.15em;
   color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-bluetooth-icon);
 }
 
-.bar-bt_label {
+.bar-button-label.bluetooth {
   color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-bluetooth-text);
+  margin-left: $bar-buttons-bluetooth-spacing;
 }
 
 .bluetooth-disabled-menu {

scss/style/bar/media.scss

@@ -1,11 +1,12 @@
 @import "../colors";
 @import '../../variables';
 
-.media {
+.bar-button-label.media {
   color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-media-text);
+  margin-left: $bar-buttons-media-spacing;
 }
 
-.bar-media_icon {
+.bar-button-icon.media {
   font-size: 1.2em;
   color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-media-icon);
 }

scss/style/bar/network.scss

@@ -1,10 +1,11 @@
 @import "../colors";
 @import '../../variables';
 
-.bar-network-label {
+.bar-button-label.network {
   color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-network-text);
+  margin-left: $bar-buttons-network-spacing;
 }
 
-.bar-network-icon {
+.bar-button-icon.network {
   color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-network-icon);
 }

scss/style/bar/notifications.scss

@@ -1,12 +1,12 @@
 @import "../colors";
 
-.bar-notifications-label {
+.bar-button-icon.notifications {
   color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-notifications-icon);
   font-size: 1.3em;
   min-width: 1em;
 }
 
-.bar-notifications-total {
+.bar-button-label.notifications {
   color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-notifications-total);
-  margin-left: 0.4em;
+  margin-left: $bar-buttons-notifications-spacing;
 }

scss/style/bar/window_title.scss

@@ -1,6 +1,11 @@
 @import "../colors";
 @import '../../variables';
 
-.window_title {
-  color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-windowtitle-text);
+.bar-button-icon.windowtitle {
+  color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-windowtitle-icon);
+}
+
+.bar-button-label.windowtitle {
+  color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-windowtitle-text);
+  margin-left: $bar-buttons-windowtitle-spacing;
 }