@erst-vg/vg-design-wrapper 1.0.9 → 1.0.10

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

@@ -1,203 +1,206 @@
-// 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;
-
-// Button
-$color-button-warning: #cc0000;
-$color-button-warning-hover: #aa0000;
-$color-button-warning-active: #7d0000;
-
-// 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;
-
-/*  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;
+
+/*  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};
+}

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

@@ -1,111 +1,111 @@
-.accordion-wrapper.ydelse {
-  & > :last-child {
-    margin-bottom: 32px;
-  }
-
-  button.accordion-bulk-button {
-    display: block;
-    line-height: 1.5em;
-    padding-left: 0;
-    margin-left: auto;
-    background-image: none !important;
-    color: var(--site-primary);
-  }
-
-  p.prewrap {
-    font-family: var(--site-secondary-font);
-  }
-}
-
-.accordion {
-  li {
-    margin-bottom: 12px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    .accordion-button {
-      padding: 16px 16px 16px 40px;
-      background-color: $color-white;
-      background-image: none;
-      text-decoration: none;
-      border-radius: 0;
-      border: none;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      @include media-breakpoint-down(sm) {
-        padding-left: 24px;
-      }
-
-      .icon-svg {
-        color: var(--site-primary);
-        min-width: 2.4rem;
-        margin-left: 24px;
-      }
-
-      &[aria-expanded='true'] {
-        border-bottom: none;
-      }
-
-      @include media-breakpoint-down-em(sm) {
-        flex-wrap: wrap;
-        padding: 0.5em;
-
-        .icon-svg {
-          margin-left: 0;
-        }
-      }
-    }
-
-    .accordion-content {
-      background-color: transparent;
-      padding: 32px 16px 8px 40px;
-      border-radius: 0;
-      border: none;
-      max-width: none !important; // added to override max-width in FDS on 66ch
-
-      @include media-breakpoint-down(sm) {
-        padding: 24px 16px 8px 24px;
-      }
-
-      @include media-breakpoint-down-em(sm) {
-        padding: 0.5em;
-      }
-
-      .accordion-body {
-        li {
-          border: none;
-        }
-
-        ol {
-          padding-left: 16px;
-
-          li {
-            position: initial;
-            padding-left: 0px;
-
-            &:before {
-              content: none;
-            }
-          }
-        }
-
-        > :first-child {
-          margin-top: 0px;
-          margin-bottom: 0px;
-        }
-
-        > p:only-child {
-          margin-bottom: 16px;
-        }
-      }
-    }
-
-    a {
-      max-width: none; // added to override max-width in FDS on 66ch
-    }
-  }
-}
+.accordion-wrapper.ydelse {
+  & > :last-child {
+    margin-bottom: 32px;
+  }
+
+  button.accordion-bulk-button {
+    display: block;
+    line-height: 1.5em;
+    padding-left: 0;
+    margin-left: auto;
+    background-image: none !important;
+    color: var(--site-primary);
+  }
+
+  p.prewrap {
+    font-family: var(--site-secondary-font);
+  }
+}
+
+.accordion {
+  li {
+    margin-bottom: 12px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .accordion-button {
+      padding: 16px 16px 16px 40px;
+      background-color: $color-white;
+      background-image: none;
+      text-decoration: none;
+      border-radius: 0;
+      border: none;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      @include media-breakpoint-down(sm) {
+        padding-left: 24px;
+      }
+
+      .icon-svg {
+        color: var(--site-primary);
+        min-width: 2.4rem;
+        margin-left: 24px;
+      }
+
+      &[aria-expanded='true'] {
+        border-bottom: none;
+      }
+
+      @include media-breakpoint-down-em(sm) {
+        flex-wrap: wrap;
+        padding: 0.5em;
+
+        .icon-svg {
+          margin-left: 0;
+        }
+      }
+    }
+
+    .accordion-content {
+      background-color: transparent;
+      padding: 32px 16px 8px 40px;
+      border-radius: 0;
+      border: none;
+      max-width: none !important; // added to override max-width in FDS on 66ch
+
+      @include media-breakpoint-down(sm) {
+        padding: 24px 16px 8px 24px;
+      }
+
+      @include media-breakpoint-down-em(sm) {
+        padding: 0.5em;
+      }
+
+      .accordion-body {
+        li {
+          border: none;
+        }
+
+        ol {
+          padding-left: 16px;
+
+          li {
+            position: initial;
+            padding-left: 0px;
+
+            &:before {
+              content: none;
+            }
+          }
+        }
+
+        > :first-child {
+          margin-top: 0px;
+          margin-bottom: 0px;
+        }
+
+        > p:only-child {
+          margin-bottom: 16px;
+        }
+      }
+    }
+
+    a {
+      max-width: none; // added to override max-width in FDS on 66ch
+    }
+  }
+}