Changed klaro cookies modal styles according to TUL requirements. (#288)

Author: milanmajchrak

src/app/shared/cookies/klaro-configuration.ts

@@ -23,14 +23,18 @@ export const klaroConfiguration: any = {
   storageName: ANONYMOUS_STORAGE_NAME_KLARO,
 
   privacyPolicy: '/info/privacy',
-
   /*
   Setting 'hideLearnMore' to 'true' will hide the "learn more / customize" link in
   the consent notice. We strongly advise against using this under most
   circumstances, as it keeps the user from customizing their consent choices.
   */
   hideLearnMore: false,
 
+  /*
+  Override cookies modal styles according to customer TUL requirements.
+   */
+  stylePrefix: 'klaro tul-cookies',
+
   /*
   Setting 'acceptAll' to 'true' will show an "accept all" button in the notice and
   modal, which will enable all third-party services if the user clicks on it. If set

src/styles/_clarin-styles.scss

@@ -20,3 +20,32 @@
 .cursor-pointer {
   cursor: pointer;
 }
+
+.tul-cookies {
+  .cm-modal {
+    background-color: #fff !important;
+    box-shadow: 0 10px 15px 0 rgba(0,0,0,0.2), 10px 10px 10px 2px rgba(0,0,0,0.19) !important;
+    border: 1px var(--bs-secondary) solid !important;
+    border-radius: var(--border-radius, 10px) !important;
+  }
+
+  .cm-header span, .cm-list-title {
+    color: #343a40 !important;
+  }
+
+  .slider.round.active {
+    background-color: var(--lt-tul-purple) !important;
+  }
+
+  .cm-caret a {
+    color: var(--lt-tul-purple) !important;
+  }
+
+  button.cm-btn {
+    background-color: var(--lt-tul-purple) !important;
+  }
+
+  button.cm-btn:hover {
+    box-shadow: 0 0 0 0.2rem var(--lt-tul-purple) !important;
+  }
+}