Fixed styling on gridbox buttons

diff --git a/lib/enyo-x/source/less/screen.less b/lib/enyo-x/source/less/screen.less
index d169970..44bd146 100644 (file)
--- a/lib/enyo-x/source/less/screen.less
+++ b/lib/enyo-x/source/less/screen.less
@@ -49,7 +49,8 @@
 @panelsFontSize: 5em;
 @iconFontSize: 60%;
 @totalsFontSize: 14px;
-@buttonFontSize: 17px;
+@buttonFontSize: 20px;
+@buttonTextFontSize: 17px;
 
 // sizing
 @defaultPanelWidth: 320px;
@@ -137,13 +138,18 @@ body {
 
   .onyx-button {
     margin: 2px;
+    min-height: 40px;
     min-width: 60px;
     background: @button-gray;
     color: @charcoal;
     font-size: 20px;
+
+    &[class^="icon-"]:before, &[class*=" icon-"]:before {
+      vertical-align: middle;
+      margin-right: 5px;
+    }
     &.text {
-      font-size: @buttonFontSize;
-      font-family: @baseFont;
+      font-size: @buttonTextFontSize;
     }
     &.selected {
       background: @slate-blue;

diff --git a/lib/enyo-x/source/stylesheets/screen.css b/lib/enyo-x/source/stylesheets/screen.css
index 5be7fe3..8f3a404 100755 (executable)
--- a/lib/enyo-x/source/stylesheets/screen.css
+++ b/lib/enyo-x/source/stylesheets/screen.css
@@ -1579,14 +1579,19 @@ body {
 }
 .xv-buttons .onyx-button {
   margin: 2px;
+  min-height: 40px;
   min-width: 60px;
   background: #e1e1e1;
   color: #666666;
   font-size: 20px;
 }
+.xv-buttons .onyx-button[class^="icon-"]:before,
+.xv-buttons .onyx-button[class*=" icon-"]:before {
+  vertical-align: middle;
+  margin-right: 5px;
+}
 .xv-buttons .onyx-button.text {
   font-size: 17px;
-  font-family: 'Helvetica Neue', Helvetica, 'Nimbus Sans L', Arial, sans-serif;
 }
 .xv-buttons .onyx-button.selected {
   background: #357ec7;

diff --git a/lib/enyo-x/source/views/grid_box.js b/lib/enyo-x/source/views/grid_box.js
index ecdd49e..7f264d7 100644 (file)
--- a/lib/enyo-x/source/views/grid_box.js
+++ b/lib/enyo-x/source/views/grid_box.js
@@ -351,9 +351,10 @@ trailing:true, white:true, strict: false*/
         name: "navigationButtonPanel",
         classes: "xv-buttons",
         components: [
-          {kind: "onyx.Button", name: "newButton", ontap: "newItem", classes: "icon-plus"},
+          {kind: "onyx.Button", name: "newButton", ontap: "newItem", content: "_new".loc(),
+            classes: "icon-plus text"},
           {kind: "onyx.Button", name: "exportButton", ontap: "exportAttr",
-           icon: "share", content: "_export".loc(), classes: "icon-share"}
+            classes: "icon-share text", content: "_export".loc()}
         ]
       });