GUI -- Toolbar and ButtonService appearance work - styled light and dark themed buttons and toolbar.
Change-Id: I07f2d6adcf5a028fa76f50301d6bdfd1e75b1188
diff --git a/web/gui/src/main/webapp/app/fw/widget/button.css b/web/gui/src/main/webapp/app/fw/widget/button.css
index e4439b6e0..f14e1f7 100644
--- a/web/gui/src/main/webapp/app/fw/widget/button.css
+++ b/web/gui/src/main/webapp/app/fw/widget/button.css
@@ -18,8 +18,64 @@
ONOS GUI -- Button Service -- CSS file
*/
-.btn svg.embeddedIcon,
-.tog svg.embeddedIcon,
-.rad svg.embeddedIcon {
+.light .tbarArrow svg.embeddedIcon .icon.tableColSortAsc .glyph {
+ fill: #838383;
+}
+.dark .tbarArrow svg.embeddedIcon .icon.tableColSortAsc .glyph {
+ fill: #B2B2B2;
+}
+
+.button,
+.toggleButton,
+.radioSet,
+.separator {
+ display: inline-block;
+}
+.button,
+.toggleButton {
+ padding: 0 4px 0 4px;
+}
+.radioSet .toggleButton {
+ padding: 0 0 0 4px;
+}
+
+.button svg.embeddedIcon,
+.toggleButton svg.embeddedIcon {
cursor: pointer;
}
+.button svg.embeddedIcon .icon rect,
+.toggleButton svg.embeddedIcon .icon rect {
+ stroke: none;
+}
+
+/* Selected button color */
+.light .button svg.embeddedIcon,
+.light .toggleButton.selected svg.embeddedIcon {
+ fill: #838383;
+}
+.light .button svg.embeddedIcon .glyph,
+.light .toggleButton.selected svg.embeddedIcon .glyph {
+ fill: white;
+}
+.dark .button svg.embeddedIcon,
+.dark .toggleButton.selected svg.embeddedIcon {
+ fill: #151515;
+}
+.dark .button svg.embeddedIcon .glyph,
+.dark .toggleButton.selected svg.embeddedIcon .glyph {
+ fill: #B2B2B2;
+}
+
+/* Unselected button color */
+.light .toggleButton svg.embeddedIcon {
+ fill: #eee;
+}
+.light .toggleButton svg.embeddedIcon .glyph {
+ fill: #bbb;
+}
+.dark .toggleButton svg.embeddedIcon {
+ fill: #303030;
+}
+.dark .toggleButton svg.embeddedIcon .glyph {
+ fill: #565656;
+}