Adds TopBarNavButton class

TopBarNavButton can be used for browser-style back and forward
buttons in the title bar of a window.

TopBarNavButton currently uses CSS and rounded corners. 5-sided
button will be added later when assets are available.

[endlessm/eos-sdk#1294]

1 files changed, 63 insertions, 1 deletions

diff --git a/data/css/endless-widgets.css b/data/css/endless-widgets.css
index 0925f9c..d12a3f7 100644
--- a/data/css/endless-widgets.css
+++ b/data/css/endless-widgets.css
@@ -7,7 +7,7 @@
 
 /* Insensitive Text */
 
-GtkLabel:insensitive {
+.menu GtkLabel:insensitive {
     color: rgba(255, 255, 255, 0.5);
 }
 
@@ -80,6 +80,37 @@ EosWindow {
         color-stop(0, rgb(67, 67, 67)));
 }
 
+.top-bar .back,
+.top-bar .forward {
+    background-image: linear-gradient(-179deg,
+        rgba(98, 98, 98, 0.49) 0%,
+        alpha(black, 0.50) 100%);
+    border: 1px solid black;
+    box-shadow: inset 1px 1px alpha(white, 0.25);
+    padding: 2px 10px;
+}
+
+.top-bar .back:insensitive,
+.top-bar .forward:insensitive {
+    border: 1px solid alpha(black, 0.20);
+    background-color: transparent;
+    background-image: none;
+    box-shadow: none;
+    color: #5a5a5a;
+    icon-shadow: none;
+}
+
+.top-bar .back {
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    border-right: 0px none;
+}
+
+.top-bar .forward {
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
 .endless-search-box .cell{
     color: #464646;
     background-repeat: no-repeat;
@@ -90,3 +121,34 @@ EosWindow {
 .endless-search-box .cell:selected{
     background-image: url('resource:///com/endlessm/sdk/assets/autocomplete_list_middle_hover.png');
 }
+
+.top-bar .back,
+.top-bar .forward {
+    background-image: linear-gradient(-179deg,
+        rgba(98, 98, 98, 0.49) 0%,
+        alpha(black, 0.50) 100%);
+    border: 1px solid black;
+    box-shadow: inset 1px 1px alpha(white, 0.25);
+    padding: 4px 10px;
+}
+
+.top-bar .back:insensitive,
+.top-bar .forward:insensitive {
+    border: 1px solid alpha(black, 0.20);
+    background-color: transparent;
+    background-image: none;
+    box-shadow: none;
+    color: #5a5a5a;
+    icon-shadow: none;
+}
+
+.top-bar .back {
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    border-right: 0px none;
+}
+
+.top-bar .forward {
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+}