@erst-vg/vg-design-wrapper 1.0.3

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

@@ -0,0 +1,98 @@
+.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;
+      }
+    }
+
+    .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;
+      }
+
+      .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
+    }
+  }
+}

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

@@ -0,0 +1,324 @@
+.button {
+  font-size: 16px;
+  font-weight: 400 !important;
+  line-height: 1.5 !important;
+  max-height: unset;
+  cursor: pointer;
+  border-radius: 20px;
+  display: inline-block;
+  min-height: 40px;
+
+  @include media-breakpoint-down(sm) {
+    width: max-content;
+  }
+
+  span + .icon-svg {
+    margin: 0 0 2px 5px;
+  }
+
+  .icon-svg {
+    margin-top: 0;
+    margin-right: 8px;
+  }
+
+  &:disabled,
+  &.disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  &:focus {
+    outline-width: 2px;
+  }
+}
+
+.button-primary {
+  color: var(--button-color) !important;
+  background-color: var(--button-bg-color) !important;
+  border: none;
+  padding: 7px 20px 8px !important;
+
+  &:hover {
+    background-color: var(--button-hover-bg-color) !important;
+  }
+
+  &:active {
+    background-color: var(--button-active-bg-color) !important;
+  }
+
+  &.warning {
+    color: white !important;
+    background-color: $color-button-warning !important;
+
+    &:hover {
+      background-color: $color-button-warning-hover !important;
+    }
+
+    &:active {
+      background-color: $color-button-warning-active !important;
+    }
+  }
+
+  svg {
+    fill: var(--button-color) !important;
+  }
+}
+
+// button-filled er kun for at være bagudkompatibel med knapper lavet i tiny-mce og må ikke bruges i koden /TNB
+.button-filled {
+  @extend .button-primary;
+}
+
+.button-secondary {
+  color: $font-color !important;
+  background-color: $color-white !important;
+  border: 2px solid $font-color !important;
+  text-decoration: none;
+  padding: 5px 20px 6px !important;
+
+  &.button-large {
+    padding: 10px 28px !important;
+  }
+
+  &:hover,
+  &:active {
+    color: $color-tag-text !important;
+    border-color: $font-color !important;
+  }
+
+  &:disabled,
+  &.button:disabled {
+    color: $color-tag-text !important;
+    border-color: $color-tag-text !important;
+  }
+
+  &-filled {
+    background-color: $color-very-dark-gray !important;
+    color: $color-white !important;
+
+    &:hover {
+      color: $color-white !important;
+    }
+  }
+}
+
+.button-secondary-dark {
+  color: $color-white !important;
+  background-color: rgba($color-white, 0.1) !important;
+  border: 2px solid $color-white !important;
+  text-decoration: none;
+  padding: 5px 20px 6px !important;
+
+  &:hover,
+  &:active {
+    border-color: $color-white !important;
+  }
+
+  &:focus {
+    border-color: $color-white !important;
+    outline: 2px solid $color-white;
+  }
+
+  &:disabled,
+  &.disabled {
+    border-color: $color-white !important;
+    opacity: 0.6;
+  }
+}
+
+// button-tertiary og button-quaternary er kun for at være bagudkompatibel med tredjeparts apps og må ikke bruges i koden /TNB
+.button-tertiary,
+.button-quaternary {
+  @extend .button-secondary;
+}
+
+.carousel-button {
+  background-color: $color-white;
+  border: 2px solid transparent;
+  padding: 0;
+  color: $color-black;
+  height: 56px;
+  width: 56px;
+  line-height: 1;
+  cursor: pointer;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .icon-svg {
+    color: var(--site-primary);
+    height: auto;
+    max-height: 24px;
+    width: auto;
+    max-width: 24px;
+  }
+
+  &:hover {
+    border-color: $color-grayish-blue;
+    outline: none;
+    box-shadow: none;
+  }
+
+  &:active {
+    border-color: $color-black;
+    outline: none;
+    box-shadow: none;
+  }
+
+  &:focus {
+    border-color: $color-grayish-blue;
+    outline: 2px solid;
+  }
+
+  &.disabled,
+  &:disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  &:visited {
+    color: $color-black;
+  }
+
+  @include media-breakpoint-down(sm) {
+    width: 40px;
+    height: 40px;
+  }
+}
+
+.text-button {
+  padding: 0px;
+  border: none;
+  background-color: transparent;
+  color: $font-color;
+  min-height: 20px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.3;
+  width: auto;
+  cursor: pointer;
+
+  &:disabled {
+    text-decoration: none;
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+}
+
+.button-link {
+  background-color: transparent;
+  color: $font-color;
+  box-shadow: none;
+  border: 0;
+  text-decoration: underline;
+  padding: 0;
+  text-align: left;
+  cursor: pointer;
+
+  &:disabled {
+    text-decoration: none;
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+}
+
+.redaktion {
+  button.lightbg {
+    color: $color-black;
+
+    &:hover {
+      color: $color-redaktion-lightbg-hover;
+    }
+
+    &:active {
+      color: $color-redaktion-lightbg-active;
+    }
+
+    &:disabled {
+      color: $color-redaktion-lightbg-disabled;
+    }
+  }
+
+  button.darkbg {
+    color: white;
+
+    &:hover {
+      color: $color-redaktion-light-blue;
+    }
+
+    &:active {
+      color: $color-white;
+    }
+
+    &:disabled {
+      color: $color-darkbg-disabled;
+    }
+  }
+
+  .text-button-blue {
+    border: none;
+    background-color: inherit;
+    padding: 0;
+    font-weight: 400;
+    text-decoration: underline;
+    color: $color-blue;
+
+    &:hover,
+    &.button-hover {
+      color: $color-blue-dark;
+    }
+
+    &:active,
+    &.button-active {
+      color: $primary-medium;
+    }
+
+    &.focus,
+    &:focus {
+      color: $primary-medium;
+    }
+
+    &:disabled,
+    &.disabled {
+      color: $color-blue !important;
+      &:hover {
+        color: $color-blue-dark !important;
+      }
+    }
+  }
+}
+
+.slim-button {
+  background-color: $color-white;
+  border-color: $color-redaktion-border;
+  border-width: 1px;
+  color: $font-color;
+  height: 32px;
+  min-height: 32px;
+  font-weight: 400;
+  font-size: 1em;
+  white-space: nowrap;
+  line-height: 1em;
+  padding-top: 0px;
+  padding-bottom: 0px;
+
+  &:hover,
+  &:focus {
+    color: $font-color;
+    border-color: $font-color;
+    outline: none !important;
+    box-shadow: none;
+  }
+  &:visited {
+    color: $font-color;
+  }
+}
+
+.white-text,
+.hero-boks .editor-tekst {
+  .button-secondary {
+    @extend .button-secondary-dark;
+  }
+}

package/src/styles/vg/card/_vg-cardText.scss

@@ -0,0 +1,74 @@
+.padding-between-children > div:not(:last-child) {
+  margin-bottom: 8px;
+}
+
+.font-1-2-cards {
+  font-size: 1.5em;
+  font-weight: 600;
+  @include media-breakpoint-down(md) {
+    font-size: 1.25em;
+    font-weight: 600;
+    line-height: 2.8rem;
+  }
+}
+
+pre {
+  color: $font-color;
+  font-family: var(--site-primary-font);
+  font-feature-settings: 'kern';
+  letter-spacing: -0.1px;
+  line-height: 1.5;
+  text-rendering: optimizelegibility;
+  white-space: pre-wrap;
+  -webkit-font-smoothing: antialiased;
+}
+
+.line-limit {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 6;
+  -webkit-box-orient: vertical;
+  max-height: 153px;
+}
+
+.break-word {
+  word-break: break-word;
+}
+
+.show-spaces {
+  white-space: pre-wrap;
+}
+
+.label-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  line-height: normal;
+
+  .ulaest-icon-container {
+    display: flex;
+    align-items: center;
+
+    .ulaest-icon {
+      width: 8px;
+      height: 8px;
+      background-color: $color-abonnement-ulaest;
+      border-radius: 4px;
+    }
+
+    .ulaest-text {
+      color: $font-color;
+      font-size: 0.8125em;
+      font-weight: 500;
+    }
+  }
+}
+
+.white-text {
+  h3,
+  .h6,
+  p,
+  pre {
+    color: $color-white !important;
+  }
+}