Add new flat/modern 'sandal' theme (#961)

Gruntfile.js

@@ -80,6 +80,13 @@ module.exports = function(grunt) {
             src: ['*.less'],
             ext: '.scss',
             dest: 'themes/bootprint3/scss'
+          },
+          {
+            expand: true,
+            cwd: 'themes/sandal/less',
+            src: ['*.less'],
+            ext: '.scss',
+            dest: 'themes/sandal/scss'
           }
         ],
         options: {
@@ -91,6 +98,13 @@ module.exports = function(grunt) {
               },
               order: 3
             },
+            { // Remove unquote
+              pattern: /(\s+)unquote\("([^"]+)"\)/gi,
+              replacement: function mixinCommas(match, space, $1) {
+                return space + $1;
+              },
+              order: 3
+            },
             { // Inline &:extends converted
               pattern: /&:extend\(([^\)]+)\)/gi,
               replacement: '@extend $1',

config/vufind/config.ini

@@ -31,6 +31,8 @@ title           = "Library Catalog"
 ;   bootstrap3 = HTML5 theme using Bootstrap 3 + jQuery libraries, with minimal styling
 ;   bootprint3 = bootstrap3 theme with more attractive default styling applied
 ;                (named after the earlier, now-deprecated blueprint theme)
+;   sandal     = bootstrap3 theme with a "flat" styling applied (a newer look
+;                than bootprint3).
 theme           = bootprint3
 
 ; Uncomment the following line to use a different default theme for mobile devices.

themes/bootprint3/scss/bootprint.scss

@@ -37,14 +37,14 @@ header .navbar {
     width: 170px;
     margin-top: 5px;
     color: transparent;
-    background-image: unquote("url('../../bootprint3/images/vufind_logo.png')");
+    background-image: url('../../bootprint3/images/vufind_logo.png');
     background-position: center center;
     background-repeat: no-repeat;
     background-size: contain;
     &:active,
     &:focus,
     &:hover { color: transparent; }
-    &.lang-ar { background-image: unquote("url('../../bootprint3/images/vufind_logo_ar.png')"); }
+    &.lang-ar { background-image: url('../../bootprint3/images/vufind_logo_ar.png'); }
   }
   .navbar-nav > li > a { padding: 12px 6px; }
   .navbar-right { margin-top: 12px; }

themes/sandal/less/colors.less

@@ -0,0 +1,49 @@
+@import "vendor/tachyons-colors.less"; // Import colors from the tachyons library
+
+/* Material Colors can be found here: https://material.io/guidelines/style/color.html */
+@brand-primary: #1976d2; /* Material Blue 700 */
+@brand-secondary: #ff6d00; /* Material Orange A700 */
+
+@header-bg: #607d8b; /* Material Blue Grey 500 */
+@header-light: #cfd8dc; /* Material Blue Grey 100 */
+
+@action-color: @brand-primary;
+@action-hover-bg: @white;
+@action-hover-color: @black;
+@passive-icon-color: @gray;
+@highlighter-color: lighten(#FF0, 20%);
+
+@search-row-bg: @white;
+@search-row-bg-alt: @light-gray;
+@search-row-bg-hover: @lightest-blue;
+@search-row-selected-bg: @brand-primary;
+@search-row-selected-color: @white;
+
+@sidebar-title-bg: @white;
+@sidebar-title-color: @near-black;
+@sidebar-title-icon-color: @gray-light;
+@sidebar-item-bg: @white;
+@sidebar-item-color: @black;
+@sidebar-item-hover-bg: @lightest-blue;
+@sidebar-item-badge: @gray;
+@sidebar-active-bg: @brand-secondary;
+@sidebar-active-color: @white;
+
+/* Bootstrap variable changes */
+
+@link-color: #1565c0; /* Material Blue 800 */
+@link-color-hover: #0d47a1; /* Material Blue 900 */
+
+@input-border:              @light-silver;
+@input-color:               @dark-gray;
+@btn-default-bg:            @light-gray;
+@btn-default-color:         @near-black;
+@btn-primary-bg:            @action-color;
+
+@input-border-radius:         .25rem;
+
+@autocomplete-hover-bg:     @header-light;
+@dropdown-link-hover-bg:    @header-light;
+@dropdown-link-hover-color: @black;
+@table-bg-hover:            @header-light;
+@pagination-color:          @header-bg;

themes/sandal/less/common.less

@@ -0,0 +1,123 @@
+/* ------ Border radius changes ------ */
+@list-group-border-radius: 0;
+@border-radius-large: 0; // modal
+
+/* ------ Common element changes ------ */
+h1, h2, h3, h4 {
+  margin: 0;
+  margin-bottom: 1rem;
+
+  .help-block & { margin: 0; }
+}
+.highlight,
+mark { background-color: @highlighter-color; }
+table { font-size: @reduced-font-size; }
+
+/* ------ Bootstrap class overrides ------ */
+.badge {
+  margin-bottom: 1px;
+  font-size: 10px;
+}
+.btn {
+  height: 34px;
+  border-radius: .25rem;
+  border-color: @silver;
+}
+.btn-default:hover,
+.btn-default:focus {
+  color: @white;
+  border-color: transparent;
+}
+.btn-link,
+.btn-primary { border-color: transparent; }
+.btn-primary:hover {
+  background-color: @action-hover-bg;
+  color: @action-color;
+  border-color: @brand-primary;
+}
+.btn-link { color: @brand-primary; }
+
+.form-control { box-shadow: none; }
+.form-control:hover,
+.form-control:focus { border-color: @brand-primary; }
+.form-control:focus {
+  padding-bottom: 4px; // Prevent jumping
+  border-bottom: 3px solid @brand-secondary;
+  box-shadow: none;
+}
+select.form-control {
+  padding-bottom: @padding-base-vertical;
+  border: 1px solid @light-silver;
+}
+
+.breadcrumb a { color: @dark-gray; }
+.breadcrumb .active { color: @near-black; }
+
+.nav > li > a { color: @brand-primary; }
+.navbar-collapse,
+.navbar-form { box-shadow: none; }
+
+.alert {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  border: 0;
+  color: @black;
+
+  .btn {
+    color: @mid-gray;
+    background-color: @white;
+    border-color: @gray;
+  }
+  .btn-primary {
+    color: @action-color;
+    background-color: @white;
+    border-color: @action-color;
+  }
+}
+.alert-info,
+.alert-info:hover {
+  color: @navy;
+  background-color: @lightest-blue;
+  a { color: @blue; }
+}
+.alert-success,
+.alert-success:hover {
+  color: @dark-green;
+  background-color: @light-green;
+  a { color: @white; }
+}
+.alert-danger,
+.alert-danger:hover {
+  color: @white;
+  background-color: @red;
+  a { color: @washed-red; }
+}
+
+.label { font-weight: 400; }
+
+@pagination-border: transparent;
+@pagination-hover-border: transparent;
+.pagination {
+  .clearfix();
+  display: table;
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: 0;
+}
+.pagination > li > a,
+.pagination > li > span {
+  padding-left: 1rem;
+  padding-right: 1rem;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1rem;
+
+  &.page-prev,
+  &.page-next {
+    font-size: 1rem;
+    font-weight: bold;
+    color: @brand-primary;
+  }
+}
+.pagination > .active > a,
+.pagination > .active > span { border-radius: @border-radius-base; }

themes/sandal/less/compiled.less

@@ -0,0 +1 @@
+@import "sandal";

themes/sandal/less/rtl.less

@@ -0,0 +1,14 @@
+body.rtl {
+  .result {
+    .media-body {
+      padding-left: 0;
+      padding-right: .5rem;
+    }
+
+    .result-body,
+    .result-links {
+      float: right;
+      text-align: right;
+    }
+  }
+}