Add vejlebib notification styling

Also adds first version of our own icomoon selection with useful
icons not in core.

themes/vejlebib/icomoon/selection.json

@@ -0,0 +1 @@
+{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M438.857 73.143c242.286 0 438.857 196.571 438.857 438.857s-196.571 438.857-438.857 438.857-438.857-196.571-438.857-438.857 196.571-438.857 438.857-438.857zM512 785.714v-108.571c0-10.286-8-18.857-17.714-18.857h-109.714c-10.286 0-18.857 8.571-18.857 18.857v108.571c0 10.286 8.571 18.857 18.857 18.857h109.714c9.714 0 17.714-8.571 17.714-18.857zM510.857 589.143l10.286-354.857c0-4-1.714-8-5.714-10.286-3.429-2.857-8.571-4.571-13.714-4.571h-125.714c-5.143 0-10.286 1.714-13.714 4.571-4 2.286-5.714 6.286-5.714 10.286l9.714 354.857c0 8 8.571 14.286 19.429 14.286h105.714c10.286 0 18.857-6.286 19.429-14.286z"],"width":877.7142857142857,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["exclamation-circle"],"defaultCode":61546,"grid":14},"attrs":[],"properties":{"name":"exclamation-circle","id":101,"order":3,"prevSize":28,"code":61546},"setIdx":0,"setId":1,"iconIdx":101},{"icon":{"paths":["M585.143 785.714v-108.571c0-10.286-8-18.857-18.286-18.857h-109.714c-10.286 0-18.286 8.571-18.286 18.857v108.571c0 10.286 8 18.857 18.286 18.857h109.714c10.286 0 18.286-8.571 18.286-18.857zM584 572l10.286-262.286c0-3.429-1.714-8-5.714-10.857-3.429-2.857-8.571-6.286-13.714-6.286h-125.714c-5.143 0-10.286 3.429-13.714 6.286-4 2.857-5.714 8.571-5.714 12l9.714 261.143c0 7.429 8.571 13.143 19.429 13.143h105.714c10.286 0 18.857-5.714 19.429-13.143zM576 38.286l438.857 804.571c12.571 22.286 12 49.714-1.143 72s-37.143 36-62.857 36h-877.714c-25.714 0-49.714-13.714-62.857-36s-13.714-49.714-1.143-72l438.857-804.571c12.571-23.429 37.143-38.286 64-38.286s51.429 14.857 64 38.286z"],"width":1024,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["exclamation-triangle","warning"],"defaultCode":61553,"grid":14},"attrs":[],"properties":{"name":"exclamation-triangle, warning","id":107,"order":4,"prevSize":28,"code":61553},"setIdx":0,"setId":1,"iconIdx":107},{"icon":{"paths":["M292.571 713.143v128c0 20-16.571 36.571-36.571 36.571h-146.286c-20 0-36.571-16.571-36.571-36.571v-128c0-20 16.571-36.571 36.571-36.571h146.286c20 0 36.571 16.571 36.571 36.571zM309.714 109.714l-16 438.857c-0.571 20-17.714 36.571-37.714 36.571h-146.286c-20 0-37.143-16.571-37.714-36.571l-16-438.857c-0.571-20 15.429-36.571 35.429-36.571h182.857c20 0 36 16.571 35.429 36.571z"],"width":365.71428571428567,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["exclamation"],"defaultCode":61738,"grid":14},"attrs":[],"properties":{"name":"exclamation","id":266,"order":5,"prevSize":28,"code":61738},"setIdx":0,"setId":1,"iconIdx":266},{"icon":{"paths":["M1025.5 800c0-288-256-224-256-448 0-18.56-1.788-34.42-5.048-47.928-16.83-113.018-92.156-203.72-189.772-231.36 0.866-3.948 1.32-8.032 1.32-12.21 0-33.278-28.8-60.502-64-60.502s-64 27.224-64 60.5c0 4.18 0.456 8.264 1.32 12.21-109.47 30.998-190.914 141.298-193.254 273.442-0.040 1.92-0.066 3.864-0.066 5.846 0 224.002-256 160.002-256 448.002 0 76.226 170.59 139.996 398.97 156.080 21.524 40.404 64.056 67.92 113.030 67.92s91.508-27.516 113.030-67.92c228.38-16.084 398.97-79.854 398.97-156.080 0-0.228-0.026-0.456-0.028-0.682l1.528 0.682zM826.246 854.096c-54.23 14.47-118.158 24.876-186.768 30.648-5.704-65.418-60.582-116.744-127.478-116.744s-121.774 51.326-127.478 116.744c-68.608-5.772-132.538-16.178-186.768-30.648-74.63-19.914-110.31-42.19-123.368-54.096 13.058-11.906 48.738-34.182 123.368-54.096 86.772-23.152 198.372-35.904 314.246-35.904s227.474 12.752 314.246 35.904c74.63 19.914 110.31 42.19 123.368 54.096-13.058 11.906-48.738 34.182-123.368 54.096z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["bell","alarm","notification"],"defaultCode":59729,"grid":16},"attrs":[],"properties":{"ligatures":"bell, alarm2","name":"bell","id":81,"order":6,"prevSize":32,"code":59729},"setIdx":1,"setId":0,"iconIdx":81},{"icon":{"paths":["M512 92.774l429.102 855.226h-858.206l429.104-855.226zM512 0c-22.070 0-44.14 14.882-60.884 44.648l-437.074 871.112c-33.486 59.532-5 108.24 63.304 108.24h869.308c68.3 0 96.792-48.708 63.3-108.24h0.002l-437.074-871.112c-16.742-29.766-38.812-44.648-60.882-44.648v0z","M576 832c0 35.346-28.654 64-64 64s-64-28.654-64-64c0-35.346 28.654-64 64-64s64 28.654 64 64z","M512 704c-35.346 0-64-28.654-64-64v-192c0-35.346 28.654-64 64-64s64 28.654 64 64v192c0 35.346-28.654 64-64 64z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["warning","sign"],"defaultCode":59911,"grid":16},"attrs":[],"properties":{"ligatures":"warning, sign","name":"warning1","id":263,"order":7,"prevSize":32,"code":59911},"setIdx":1,"setId":0,"iconIdx":263},{"icon":{"paths":["M512 96c-111.118 0-215.584 43.272-294.156 121.844s-121.844 183.038-121.844 294.156c0 111.118 43.272 215.584 121.844 294.156s183.038 121.844 294.156 121.844c111.118 0 215.584-43.272 294.156-121.844s121.844-183.038 121.844-294.156c0-111.118-43.272-215.584-121.844-294.156s-183.038-121.844-294.156-121.844zM512 0v0c282.77 0 512 229.23 512 512s-229.23 512-512 512c-282.77 0-512-229.23-512-512s229.23-512 512-512zM448 704h128v128h-128zM448 192h128v384h-128z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["notification","warning","notice","note","exclamation"],"defaultCode":59912,"grid":16},"attrs":[],"properties":{"ligatures":"notification, warning2","name":"notification","id":264,"order":8,"prevSize":32,"code":59912},"setIdx":1,"setId":0,"iconIdx":264}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showCodes":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icomoon"},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215},"historySize":50}}

themes/vejlebib/sass/base/_icomoon.scss

@@ -0,0 +1,51 @@
+/**
+ * Vejlebib icomoon collection.
+ */
+
+ @font-face {
+  font-family: 'vejlebib-icomoon';
+  src:  url('../icomoon/vejlebib-icomoon.eot?erld0k');
+  src:  url('../icomoon/vejlebib-icomoon.eot?erld0k#iefix') format('embedded-opentype'),
+    url('../icomoon/vejlebib-icomoon.ttf?erld0k') format('truetype'),
+    url('../icomoon/vejlebib-icomoon.woff?erld0k') format('woff'),
+    url('../icomoon/vejlebib-icomoon.svg?erld0k#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="vejlebib-icon-"], [class*=" vejlebib-icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'vejlebib-icomoon' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.vejlebib-icon-exclamation-circle:before {
+  content: "\f06a";
+}
+.vejlebib-icon-exclamation-triangle:before {
+  content: "\f071";
+}
+.vejlebib-icon-warning:before {
+  content: "\f071";
+}
+.vejlebib-icon-exclamation:before {
+  content: "\f12a";
+}
+.vejlebib-icon-bell:before {
+  content: "\e951";
+}
+.vejlebib-icon-warning1:before {
+  content: "\ea07";
+}
+.vejlebib-icon-notification:before {
+  content: "\ea08";
+}

themes/vejlebib/sass/components/_vejlebib_notifications.scss

@@ -0,0 +1,41 @@
+/**
+ * Vejlebib notifications styling.
+ */
+
+.panel-pane.vejlebib-notification {
+  // The base theme has stupidly specific selectors, so the cleanest option here
+  // is to just use important.
+  background-image: none !important;
+  background-color: #f1f2f2 !important;
+  padding-top: 20px;
+
+  .primary-content & {
+    padding-top: 0;
+    padding-bottom: 20px;
+  }
+
+  .panel-pane-inner {
+    background-color: $color-primary;
+    padding: 20px !important;
+  }
+
+  .pane-content p:last-of-type {
+    margin: 0;
+  }
+
+  &, .pane-title {
+    color: $color-text-on-primary;
+  }
+
+  .pane-title {
+    font-size: 30px;
+    line-height: 30px;
+
+    span {
+      display: inline-block;
+      margin-right: 10px;
+      position: relative;
+      top: 2px;
+    }
+  }
+}

themes/vejlebib/sass/vejlebib.styles.scss

@@ -2,6 +2,7 @@
 @import "configuration/_extend";
 @import "configuration/_mixin";
 @import "base/_form";
+@import "base/_icomoon";
 @import "base/_standard";
 @import "components/_ask_vopros";
 @import "components/_class";
@@ -22,6 +23,7 @@
 @import "components/_ting_object";
 @import "components/_ui_datepicker";
 @import "components/_user";
+@import "components/_vejlebib_notifications";
 @import "components/_view";
 @import "components/_wayf";
 @import "components/_campaign";

themes/vejlebib/template.php

@@ -20,3 +20,13 @@ function vejlebib_preprocess_html(&$vars) {
     }
   }
 }
+
+/**
+ * Implements hook_preprocess_panels_pane().
+ */
+function vejlebib_preprocess_panels_pane(&$vars) {
+  // Add notice icon before title on vejlebib notification panel panes.
+  if (isset($vars['pane']->css['css_class']) && $vars['pane']->css['css_class'] === 'vejlebib-notification') {
+    $vars['title'] = '<span class="vejlebib-icon-exclamation-circle"></span>' . $vars['title'];
+  }
+}