Update cookie consent library to 3.0.0-rc14. (NatLibFi#2909)

This should fix functionality e.g. with older Safari versions.
The less files have been recreated to resemble the scss structure used in the library, and they are no longer so heavily modified for Bootstrap.

package.json

@@ -46,6 +46,6 @@
     "grunt-contrib-watch": "^1.1.0",
     "jshint": "^2.13.4",
     "jstree": "3.3.15",
-    "vanilla-cookieconsent": "3.0.0-rc.13"
+    "vanilla-cookieconsent": "3.0.0-rc.14"
   }
 }

themes/bootstrap3/less/bootstrap.less

@@ -16,7 +16,7 @@ $fa-font-path: "../../bootstrap3/css/fonts";
 @import "components/alphabrowse";
 @import "components/autocomplete";
 @import "components/channels";
-@import "components/cookie-consent";
+@import "components/cookie-consent/index";
 @import "components/devtools";
 @import "components/form";
 @import "components/icons";
@@ -496,14 +496,11 @@ div.holding-notes {
 }
 
 /* --- Cookie Consent --- */
-.disable--interaction #cc-main .cm-wrapper::before,
-.show--preferences #cc-main .cc--anim.pm-wrapper::before {
+.show--preferences #cc-main .cc--anim .pm-overlay {
   opacity: @modal-backdrop-opacity;
 }
 
 #cc-main {
-  z-index: @zindex-cookie-consent !important;
-
   a {
     &:hover {
       color: @link-hover-color;

themes/bootstrap3/less/components/cookie-consent/README.md

@@ -0,0 +1,9 @@
+These files have been converted from orestbida/cookieconsent/src/scss with the following changes:
+
+- Underscores have been removed from file names
+- Variables in core/base.less and abstracts/light-color-scheme.less get their values from Bootstrap variables
+- cc- prefix has been added to variables that were not prefixed
+- `$` in variable names has been replaced with `@`
+- Line feeds have been added in the end of each file
+- `#{$cc-btn-height}` has been replaced with `@cc-btn-height`
+- reset has been omitted so that e.g. link style remains correct

themes/bootstrap3/less/components/cookie-consent/abstracts/light-color-scheme.less

@@ -0,0 +1,51 @@
+/** Light color-scheme **/
+:root{
+    --cc-bg: @modal-content-bg;
+    --cc-primary-color: @text-color;
+    --cc-secondary-color: lighten(@text-color, 10%);;
+
+    --cc-btn-primary-bg: @btn-primary-bg;
+    --cc-btn-primary-color: @btn-primary-color;
+    --cc-btn-primary-border-color: @btn-primary-bg;
+    --cc-btn-primary-hover-bg: @btn-primary-color;
+    --cc-btn-primary-hover-color: @btn-primary-bg;
+    --cc-btn-primary-hover-border-color: darken(@btn-primary-border, 12%);
+
+    --cc-btn-secondary-bg: @btn-default-bg;
+    --cc-btn-secondary-color: @btn-default-color;
+    --cc-btn-secondary-border-color: @btn-default-border;
+    --cc-btn-secondary-hover-bg: @btn-default-color;
+    --cc-btn-secondary-hover-color: @btn-default-bg;
+    --cc-btn-secondary-hover-border-color: darken(@btn-default-border, 12%);
+
+    --cc-separator-border-color: @well-border;
+
+    --cc-toggle-on-bg: @gray-light;
+    --cc-toggle-off-bg: lighten(@gray-light, 10%);
+    --cc-toggle-on-knob-bg: @body-bg;
+    --cc-toggle-off-knob-bg: @body-bg;
+
+    --cc-toggle-enabled-icon-color: @modal-content-bg;   // yes (v tick)
+    --cc-toggle-disabled-icon-color: @modal-content-bg;  // no (x tick)
+
+    --cc-toggle-readonly-bg: lighten(@gray-light, 20%);
+    --cc-toggle-readonly-knob-bg: @body-bg;
+    --cc-toggle-readonly-knob-icon-color: lighten(@gray-light, 20%);
+
+    --cc-section-category-border: @gray-lighter;
+
+    --cc-cookie-category-block-bg: @gray-lighter;
+    --cc-cookie-category-block-border: @list-group-border;
+    --cc-cookie-category-block-hover-bg: darken(@gray-lighter, 10%);
+    --cc-cookie-category-block-hover-border: @list-group-border;
+    --cc-cookie-category-expanded-block-bg: @gray-lighter;
+    --cc-cookie-category-expanded-block-hover-bg: darken(@gray-lighter, 10%);
+
+    --cc-overlay-bg: @modal-backdrop-bg;
+    --cc-webkit-scrollbar-bg: @gray-lighter;
+    --cc-webkit-scrollbar-hover-bg: @btn-primary-color;
+
+    --cc-footer-bg: @panel-footer-bg;
+    --cc-footer-color: @text-color;
+    --cc-footer-border-color: @panel-default-border;
+}

themes/bootstrap3/less/components/cookie-consent/core/base.less

@@ -0,0 +1,119 @@
+@import "./global";
+
+/**
+ * Global styles/variables
+ */
+
+:root{
+    --cc-font-family: @font-family-base;
+    --cc-modal-border-radius: @border-radius-base;
+    --cc-btn-border-radius: @btn-border-radius-base;
+    --cc-modal-transition-duration: .25s;
+    --cc-link-color: @link-color;
+    --cc-modal-margin: 1rem;
+    --cc-z-index: @zindex-cookie-consent;
+}
+
+#cc-main {
+
+    color: var(--cc-primary-color);
+    font-family: var(--cc-font-family);
+    font-size: 16px;
+    font-weight: 400;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    position: relative;
+    line-height: 1.15;
+    -webkit-text-size-adjust: 100%;
+    z-index: var(--cc-z-index);
+    position: fixed;
+
+    &.cc--rtl{
+        direction: rtl;
+    }
+
+    b,
+    em,
+    strong,
+    a,
+    .cm__title{
+        font-weight: @cc-font-weight-bold;
+    }
+
+    button > span {
+        pointer-events: none;
+    }
+
+    a,
+    .cc__link{
+        font-weight: 600;
+        position: relative;
+        background-image: linear-gradient(currentColor, currentColor);
+        background-position: 0% 100%;
+        background-repeat: no-repeat;
+        background-size: 0% 1px;
+        transition: background-size .25s, color .25s ease;
+
+        &:hover{
+            color: var(--cc-primary-color);
+            background-size: 100% 1px;
+        }
+    }
+
+    .cc__link {
+        color: var(--cc-link-color);
+    }
+
+    /* Use Firefox's thin style scrollbar */
+    .cm__desc,
+    .pm__body{
+        scrollbar-width: thin;
+        overscroll-behavior: auto contain;
+    }
+
+    /* Show webkit's "cool" scrollbar only on non mobile screens */
+    @media screen and (min-width: 640px){
+
+        ::-webkit-scrollbar,
+        ::-webkit-scrollbar-track,
+        ::-webkit-scrollbar-thumb{
+            all: revert;
+        }
+
+        ::-webkit-scrollbar-thumb{
+            border: .25em solid var(--cc-bg);
+            -webkit-background-clip: padding-box;
+            background-clip: padding-box;
+            border-radius: 1em;
+            background: var(--cc-toggle-readonly-bg);
+
+            &:hover {
+                background: var(--cc-toggle-off-bg);
+            }
+        }
+
+        ::-webkit-scrollbar {
+            background: transparent;
+            width: 12px;
+        }
+
+    }
+}
+
+/** Disable page scroll **/
+html.disable--interaction{
+
+    &.show--consent,
+    &.show--consent body{
+        height: auto!important;
+        overflow: hidden!important;
+    }
+}
+
+// disable transition if prefers-reduced-motion detected
+@media (prefers-reduced-motion) {
+    #cc-main {
+        --cc-modal-transition-duration: 0s;
+    }
+}