css: added ui-icon-grid

css/themes.css

@@ -119,7 +119,8 @@ html .ui-page-theme-slapos-white .ui-table-caption {
   color: #aaa;
   text-shadow: #FFF 0px 1px 0px;
 }
-html .ui-page-theme-slapos-white .ui-table {
+html .ui-page-theme-slapos-white .ui-table,
+html .ui-page-theme-slapos-white .ui-listview.ui-icon-grid li {
   background-color: #fff;
   border-color: #aaa;
 }
@@ -361,7 +362,8 @@ html .ui-page-theme-slapos-black .ui-table-caption{
   text-shadow: 0 1px 0 #111111;
 }
 /* tables & controlbars */
-.ui-page-theme-slapos-black .ui-table {
+.ui-page-theme-slapos-black .ui-table,
+html .ui-page-theme-slapos-black .ui-listview.ui-icon-grid li {
   background-color: #222;
   border-color: rgb(232, 232, 232);
   border-color: rgba(255,255,255,.3);
@@ -1507,10 +1509,34 @@ html body .ui-page .ui-listview > li h6 {
     font-size: 3em;
   }
   /* Align center */
-  .ui-listview.responsive li > .ui-btn {
+  .ui-listview.responsive.ui-icon-grid li > .ui-btn {
     text-align: center;
   }
-  /* Make text wrap. */
+  /* ICONGRID: Make text wrap. */
+  .ui-listview.responsive.ui-icon-grid h1,
+  .ui-listview.responsive.ui-icon-grid p {
+    white-space: normal;
+    overflow: visible;
+    position: absolute;
+    left: 0;
+    right: 0;
+  }
+  /* ICONGRID Text position */
+  .ui-listview.responsive.ui-icon-grid h1 {
+    font-size: 1.25em;
+    margin: 0;
+    padding: .125em 1em;
+    bottom: 40%;
+  }
+  .ui-listview.responsive.ui-icon-grid p {
+    font-size: 1em;
+    margin: 0;
+    padding: 0 1.25em;
+    min-height: 40%;
+    bottom: 0;
+  }
+
+  /* REGULAR: Make text wrap. */
   .ui-listview.responsive h1,
   .ui-listview.responsive h2,
   .ui-listview.responsive h3,
@@ -1738,6 +1764,17 @@ html .ui-panel .ui-listview li .ui-checkbox .ui-btn.ui-checkbox-off:after {
   width: 22px;
   top: 29%; /* no friend... */
 }
+.ui-listview.responsive.ui-icon-grid li a {
+  border: 1px solid #aaa;
+}
+@media (max-width: 32em) {
+  .ui-listview.responsive.ui-icon-grid li:not(:first-child) a {
+    border-top-width: 0;
+  }
+}
+.ui-listview.ui-icon-grid li span.ui-li-icon-custom {
+  top: 0;
+}
 .ui-listview li span.ui-li-icon-custom:after {
   background: none repeat scroll 0 center transparent;
 }