@erst-vg/vg-design-wrapper 2.0.2 → 2.1.0

package/src/styles/custom/_vgVideo.scss

@@ -0,0 +1,86 @@
+@use '@/styles/utility' as *;
+
+.video {
+  .video-player {
+    position: relative;
+    overflow: hidden;
+    padding-top: 56.25%;
+    width: 100%;
+    background-color: $color-very-dark-gray;
+
+    .button-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      top: 0;
+      border: none;
+      left: 0;
+
+      &:focus {
+        .icon-svg {
+          outline: 2px solid $color-black !important;
+          border-radius: 50%;
+        }
+      }
+
+      .icon-svg {
+        color: var(--site-primary);
+        width: 72px;
+        height: 72px;
+        position: relative;
+        z-index: 3;
+
+        @include media-breakpoint-down-em(sm) {
+          width: 1.5em;
+          height: 1.5em;
+        }
+
+        &:hover {
+          cursor: pointer;
+        }
+
+        :deep(*) {
+          color: var(--site-primary);
+        }
+      }
+    }
+
+    .video-frame {
+      position: absolute;
+      background-size: cover;
+      background-repeat: no-repeat;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: $background-alternative;
+      cursor: pointer;
+      width: 100%;
+
+      &:before {
+        content: '';
+        position: absolute;
+        background-color: rgba($color-very-dark-blue, 0.25);
+        height: 100%;
+        width: 100%;
+        top: 0;
+        left: 0;
+        z-index: 2;
+      }
+    }
+  }
+
+  .cookie-banner {
+    width: 100%;
+    font-size: 0.875em;
+    font-style: italic;
+    color: $color-grey-1;
+    padding-top: 16px;
+
+    :deep(a) {
+      color: $color-grey-1 !important;
+    }
+  }
+}

package/src/styles/custom/_vgVideoFrame.scss

@@ -0,0 +1,9 @@
+.video-frame {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

package/src/styles/utility.scss

@@ -1,2 +1,2 @@
-@forward './vg/vg-colors';
-@forward './vg/mixins/vg-mediaquery-helpers';
+@forward './vg/vg-colors';
+@forward './vg/mixins/vg-mediaquery-helpers';

package/src/styles/vg/_vg-colors.scss

@@ -1,209 +1,209 @@
-// Brug https://www.colorhexa.com/ til at navngivning af farver
-
-$color-blue: #0052ff;
-$color-blue-dark: #002691;
-$color-very-dark-blue: #1f4665;
-$color-very-dark-blue-2: #091134;
-
-$color-vivid-orange: #f16913;
-$color-green: #218441;
-$color-lime-green: #41ab5d;
-$color-light-violet: #8d65ff;
-$color-bright-pink: #dd3497;
-$color-strong-cyan: #0ed4b1;
-$color-dark-gray: #a3a3a3;
-$color-dark-gray-2: #828282;
-$color-dark-gray-3: #747474;
-$color-dark-gray-4: #636363;
-$color-light-grayish-blue: #d4dbe1;
-$color-light-grayish-blue-2: #cedeed;
-$color-light-grayish-blue-3: #e8ecf2;
-$color-medium-grayish-blue: #e5e7ea;
-$color-dark-grayish-blue: #8a9295;
-$color-grayish-blue: #aab7c4;
-$color-pale-blue: #adc7ff;
-$color-light-gray: #c4c4c4;
-$color-light-gray-2: #e0e0e0;
-$color-very-pale-blue: #e5eeff;
-$color-very-dark-desaturated-blue: #334452;
-$color-very-dark-gray: #1a1a1a;
-$color-very-light-gray-mostly-white: #f5f5f5;
-
-// color palette from https://app.zeplin.io/project/60b0c4bdaeff251268a90816/styleguide
-$primary-color: #0052ff;
-$primary-lightest: #e7efff;
-$primary-lighter: #8bb0ff;
-$primary-light: #4581ff;
-$primary-dark: #0035a3;
-$primary-darker: #002674;
-$primary-darkest: #000f2f;
-
-$primary-medium: $color-very-dark-desaturated-blue;
-$secondary-blue: $color-blue-dark;
-
-$font-color: $color-very-dark-gray;
-$font-color-menu-hover: #00279163;
-
-$color-link: #257698;
-$color-cookie: #454545;
-
-$background-normal: $color-very-light-gray-mostly-white;
-$background-alternative: #e5eaee;
-$background-alternative-hover: #cdd6dd;
-$background-alternative-active: #b5c1cb;
-$background-pagination: #efefef;
-
-$color-darkblue: #00315c;
-$color-white: #ffffff;
-$color-light-grey: #bdbdbd;
-$color-black: #000000;
-$color-red: #ff5656;
-$color-darkPurple: #800080;
-$color-dark-blue: #141b28;
-
-$border-color-grey: #c3c3c3;
-$border-color-card: #dfe0e4;
-$border-color-cta: $color-light-grayish-blue;
-$border-color-light-grey: #e5eaee;
-$menu-color: $color-dark-gray-3;
-$border-grey: #d7dadf;
-
-$multiselector-disabled-text: #1d1d1d;
-$multiselector-disabled-background: #ededed;
-
-$color-tag-text: #454545;
-$color-tag-gray: #dcdcdc;
-$color-gray-004: #999999;
-$color-light-silver: #d9d9d9;
-
-// Redaktion colors
-$color-redaktion-grey: #3b3e46;
-$color-redaktion-menu-blue: #000f2f;
-$color-redaktion-menu-item: $primary-darker;
-$color-redaktion-border: $color-grayish-blue;
-$color-redaktion-sidebar-bg: #f5f7f9;
-$color-redaktion-shadow: rgba(0, 0, 0, 0.25);
-$color-redaktion-light-grey: #828282;
-$color-redaktion-lightest-blue: $primary-lightest;
-$color-redaktion-light-blue: $primary-lighter;
-$color-redaktion-picture-grey: #f3f3f3;
-$color-redaktion-themecolor-green: #078856;
-$color-redaktion-themecolor-brown: #691c27;
-$color-redaktion-topbar-bg: #edf2f5;
-$color-redaktion-lightbg-hover: #0052ff;
-$color-redaktion-lightbg-disabled: $color-grayish-blue;
-$color-redaktion-lightbg-active: $primary-darker;
-$color-redation-scrollbar-background: #c4c4c4;
-$color-redation-scrollbar-thumb: #856f6f;
-$color-redaktion-ghost: #cfdfec;
-$color-redaktion-blacklist-background: #f6f9fc;
-$color-redaktion-valgt-icon-grey: #d8e5ec;
-
-// Button
-$color-button-warning: #cc0000;
-$color-button-warning-hover: #aa0000;
-$color-button-warning-active: #7d0000;
-$color-button-mitid: #0060e6;
-$color-button-mitid-hover: #004cb8;
-
-// Data
-$color-data-cell: $primary-lightest;
-$color-data-sum-cell: $primary-lighter;
-
-// Highcharts graf farver
-$color-data-graph-fuchsia: #ae017e;
-$color-data-graph-green: $color-green;
-$color-data-graph-purple: #6a51a3;
-$color-data-graph-red: #e31a1c;
-$color-data-graph-blue: #2b8cbe;
-$color-data-graph-dark-blue: #08519c;
-$color-data-graph-grayish-blue: #9da5b6;
-$color-data-graph-orange: $color-vivid-orange;
-$color-data-graph-dark-purple: #8b2f8a;
-$color-data-graph-dark-orange: #fc4e2a;
-$color-data-graph-moderate-blue: #4292c6;
-$color-data-graph-lime: $color-lime-green;
-$color-data-graph-cyan: #4eb3d3;
-$color-data-graph-lavender: #807dba;
-$color-data-graph-pink: $color-bright-pink;
-$color-data-graph-very-dark-blue: #33415c;
-$color-data-graph-bright-red: #fc2a2a;
-$color-data-graph-darker-red: #dd3434;
-$color-data-graph-gray: $color-dark-gray;
-$color-data-graph-dark-lime: #74c476;
-$color-data-graph-dark-maroon: #800026;
-$color-data-graph-bright-orange: #feb24c;
-$color-data-graph-dark-green: #006d2c;
-$color-data-graph-light-pink: #fa9fb5;
-$color-data-graph-light-brown: #a08752;
-$color-data-graph-dark-lime-cyan: #31b284;
-$color-data-graph-darker-blue: #5e6a88;
-
-// Sitefarver
-$default-site-color-0: $color-white;
-$default-site-color-1: $background-normal;
-$default-site-color-2: $primary-lightest;
-$default-site-color-3: $color-very-dark-blue-2;
-$default-site-color-4: $color-light-grayish-blue-3;
-$default-site-color-5: $primary-darker;
-$default-site-color-6: $color-redaktion-themecolor-brown;
-$default-site-color-7: $color-redaktion-themecolor-green;
-
-// Other
-$color-border-light-grey: #bfbfbf;
-$color-darkbg-disabled: #758a9f;
-$color-mint-green: #eeffe2;
-$color-grey-1: #4f4f4f;
-
-// Masterbrand colors
-  $virksomhedsudvikling-danmark-color: #D2D0BB;
-
-/*  CSS variables used for site design which can be overridden on site level
-    Remember to override in siteDesign.service.ts. Only variables added to
-    /api/content/sites/, for component specific colors, should be added here. */
-:root {
-  // Global primary colors
-  --site-primary: #{$primary-color};
-  --site-primary-light: #{$primary-light};
-  --site-primary-lighter: #{$primary-lighter};
-  --site-primary-lighest: #{$primary-lightest};
-  --site-primary-dark: #{$primary-dark};
-  --site-primary-darker: #{$primary-darker};
-  --site-primary-darkest: #{$primary-darkest};
-
-  // Global background colors
-  --body-bg-color: #{$background-normal};
-  --footer-bg-color: #{$color-dark-blue};
-  --footer-font-color: #{$color-white};
-  --footer-link-color: #{$color-white};
-
-  // Header farver
-  --header-bg-color: #{$color-white};
-  --header-focus-color: #{$primary-color};
-
-  // Call to action colors
-  --button-color: #{$color-white};
-  --button-bg-color: #{$primary-color};
-  --button-hover-bg-color: hsl(from var(--button-bg-color) h s calc(l - 10));
-  --button-active-bg-color: hsl(from var(--button-bg-color) h s calc(l - 20));
-
-  // Link colors
-  --link-color: #{$color-link};
-  --link-color-hover: #{$color-link};
-  --link-color-visited: #{$color-darkPurple};
-
-  // Faktaboks colors
-  --editor-text-color: #{$font-color};
-  --editor-link-text-color: #{$primary-color};
-  --editor-link-text-visited-color: #{$color-darkPurple};
-  --editor-link-text-hover-color: #{$color-blue-dark};
-
-  // Kampagnecard
-  --ydelse-card-label: #{$primary-color};
-  --ydelse-card-titel: #{$primary-color};
-  --ydelse-card-beskrivelse: #{$primary-color};
-
-  // Other colors in siteDesign.service.ts
-  --citat-color: #{$primary-color};
-  --filter-bg-color: #{$color-very-pale-blue};
-}
+// Brug https://www.colorhexa.com/ til at navngivning af farver
+
+$color-blue: #0052ff;
+$color-blue-dark: #002691;
+$color-very-dark-blue: #1f4665;
+$color-very-dark-blue-2: #091134;
+
+$color-vivid-orange: #f16913;
+$color-green: #218441;
+$color-lime-green: #41ab5d;
+$color-light-violet: #8d65ff;
+$color-bright-pink: #dd3497;
+$color-strong-cyan: #0ed4b1;
+$color-dark-gray: #a3a3a3;
+$color-dark-gray-2: #828282;
+$color-dark-gray-3: #747474;
+$color-dark-gray-4: #636363;
+$color-light-grayish-blue: #d4dbe1;
+$color-light-grayish-blue-2: #cedeed;
+$color-light-grayish-blue-3: #e8ecf2;
+$color-medium-grayish-blue: #e5e7ea;
+$color-dark-grayish-blue: #8a9295;
+$color-grayish-blue: #aab7c4;
+$color-pale-blue: #adc7ff;
+$color-light-gray: #c4c4c4;
+$color-light-gray-2: #e0e0e0;
+$color-very-pale-blue: #e5eeff;
+$color-very-dark-desaturated-blue: #334452;
+$color-very-dark-gray: #1a1a1a;
+$color-very-light-gray-mostly-white: #f5f5f5;
+
+// color palette from https://app.zeplin.io/project/60b0c4bdaeff251268a90816/styleguide
+$primary-color: #0052ff;
+$primary-lightest: #e7efff;
+$primary-lighter: #8bb0ff;
+$primary-light: #4581ff;
+$primary-dark: #0035a3;
+$primary-darker: #002674;
+$primary-darkest: #000f2f;
+
+$primary-medium: $color-very-dark-desaturated-blue;
+$secondary-blue: $color-blue-dark;
+
+$font-color: $color-very-dark-gray;
+$font-color-menu-hover: #00279163;
+
+$color-link: #257698;
+$color-cookie: #454545;
+
+$background-normal: $color-very-light-gray-mostly-white;
+$background-alternative: #e5eaee;
+$background-alternative-hover: #cdd6dd;
+$background-alternative-active: #b5c1cb;
+$background-pagination: #efefef;
+
+$color-darkblue: #00315c;
+$color-white: #ffffff;
+$color-light-grey: #bdbdbd;
+$color-black: #000000;
+$color-red: #ff5656;
+$color-darkPurple: #800080;
+$color-dark-blue: #141b28;
+
+$border-color-grey: #c3c3c3;
+$border-color-card: #dfe0e4;
+$border-color-cta: $color-light-grayish-blue;
+$border-color-light-grey: #e5eaee;
+$menu-color: $color-dark-gray-3;
+$border-grey: #d7dadf;
+
+$multiselector-disabled-text: #1d1d1d;
+$multiselector-disabled-background: #ededed;
+
+$color-tag-text: #454545;
+$color-tag-gray: #dcdcdc;
+$color-gray-004: #999999;
+$color-light-silver: #d9d9d9;
+
+// Redaktion colors
+$color-redaktion-grey: #3b3e46;
+$color-redaktion-menu-blue: #000f2f;
+$color-redaktion-menu-item: $primary-darker;
+$color-redaktion-border: $color-grayish-blue;
+$color-redaktion-sidebar-bg: #f5f7f9;
+$color-redaktion-shadow: rgba(0, 0, 0, 0.25);
+$color-redaktion-light-grey: #828282;
+$color-redaktion-lightest-blue: $primary-lightest;
+$color-redaktion-light-blue: $primary-lighter;
+$color-redaktion-picture-grey: #f3f3f3;
+$color-redaktion-themecolor-green: #078856;
+$color-redaktion-themecolor-brown: #691c27;
+$color-redaktion-topbar-bg: #edf2f5;
+$color-redaktion-lightbg-hover: #0052ff;
+$color-redaktion-lightbg-disabled: $color-grayish-blue;
+$color-redaktion-lightbg-active: $primary-darker;
+$color-redation-scrollbar-background: #c4c4c4;
+$color-redation-scrollbar-thumb: #856f6f;
+$color-redaktion-ghost: #cfdfec;
+$color-redaktion-blacklist-background: #f6f9fc;
+$color-redaktion-valgt-icon-grey: #d8e5ec;
+
+// Button
+$color-button-warning: #cc0000;
+$color-button-warning-hover: #aa0000;
+$color-button-warning-active: #7d0000;
+$color-button-mitid: #0060e6;
+$color-button-mitid-hover: #004cb8;
+
+// Data
+$color-data-cell: $primary-lightest;
+$color-data-sum-cell: $primary-lighter;
+
+// Highcharts graf farver
+$color-data-graph-fuchsia: #ae017e;
+$color-data-graph-green: $color-green;
+$color-data-graph-purple: #6a51a3;
+$color-data-graph-red: #e31a1c;
+$color-data-graph-blue: #2b8cbe;
+$color-data-graph-dark-blue: #08519c;
+$color-data-graph-grayish-blue: #9da5b6;
+$color-data-graph-orange: $color-vivid-orange;
+$color-data-graph-dark-purple: #8b2f8a;
+$color-data-graph-dark-orange: #fc4e2a;
+$color-data-graph-moderate-blue: #4292c6;
+$color-data-graph-lime: $color-lime-green;
+$color-data-graph-cyan: #4eb3d3;
+$color-data-graph-lavender: #807dba;
+$color-data-graph-pink: $color-bright-pink;
+$color-data-graph-very-dark-blue: #33415c;
+$color-data-graph-bright-red: #fc2a2a;
+$color-data-graph-darker-red: #dd3434;
+$color-data-graph-gray: $color-dark-gray;
+$color-data-graph-dark-lime: #74c476;
+$color-data-graph-dark-maroon: #800026;
+$color-data-graph-bright-orange: #feb24c;
+$color-data-graph-dark-green: #006d2c;
+$color-data-graph-light-pink: #fa9fb5;
+$color-data-graph-light-brown: #a08752;
+$color-data-graph-dark-lime-cyan: #31b284;
+$color-data-graph-darker-blue: #5e6a88;
+
+// Sitefarver
+$default-site-color-0: $color-white;
+$default-site-color-1: $background-normal;
+$default-site-color-2: $primary-lightest;
+$default-site-color-3: $color-very-dark-blue-2;
+$default-site-color-4: $color-light-grayish-blue-3;
+$default-site-color-5: $primary-darker;
+$default-site-color-6: $color-redaktion-themecolor-brown;
+$default-site-color-7: $color-redaktion-themecolor-green;
+
+// Other
+$color-border-light-grey: #bfbfbf;
+$color-darkbg-disabled: #758a9f;
+$color-mint-green: #eeffe2;
+$color-grey-1: #4f4f4f;
+
+// Masterbrand colors
+  $virksomhedsudvikling-danmark-color: #D2D0BB;
+
+/*  CSS variables used for site design which can be overridden on site level
+    Remember to override in siteDesign.service.ts. Only variables added to
+    /api/content/sites/, for component specific colors, should be added here. */
+:root {
+  // Global primary colors
+  --site-primary: #{$primary-color};
+  --site-primary-light: #{$primary-light};
+  --site-primary-lighter: #{$primary-lighter};
+  --site-primary-lighest: #{$primary-lightest};
+  --site-primary-dark: #{$primary-dark};
+  --site-primary-darker: #{$primary-darker};
+  --site-primary-darkest: #{$primary-darkest};
+
+  // Global background colors
+  --body-bg-color: #{$background-normal};
+  --footer-bg-color: #{$color-dark-blue};
+  --footer-font-color: #{$color-white};
+  --footer-link-color: #{$color-white};
+
+  // Header farver
+  --header-bg-color: #{$color-white};
+  --header-focus-color: #{$primary-color};
+
+  // Call to action colors
+  --button-color: #{$color-white};
+  --button-bg-color: #{$primary-color};
+  --button-hover-bg-color: hsl(from var(--button-bg-color) h s calc(l - 10));
+  --button-active-bg-color: hsl(from var(--button-bg-color) h s calc(l - 20));
+
+  // Link colors
+  --link-color: #{$color-link};
+  --link-color-hover: #{$color-link};
+  --link-color-visited: #{$color-darkPurple};
+
+  // Faktaboks colors
+  --editor-text-color: #{$font-color};
+  --editor-link-text-color: #{$primary-color};
+  --editor-link-text-visited-color: #{$color-darkPurple};
+  --editor-link-text-hover-color: #{$color-blue-dark};
+
+  // Kampagnecard
+  --ydelse-card-label: #{$primary-color};
+  --ydelse-card-titel: #{$primary-color};
+  --ydelse-card-beskrivelse: #{$primary-color};
+
+  // Other colors in siteDesign.service.ts
+  --citat-color: #{$primary-color};
+  --filter-bg-color: #{$color-very-pale-blue};
+}