@erst-vg/dkfds-vite 8.0.1

package/dist/scss/_dkfds-base.scss

@@ -0,0 +1,76 @@
+
+// Mixins -------------- //
+
+@import './core/variables';
+@import 'core/mixins/breakpoints';
+@import 'core/mixins/add-background-svg';
+@import 'core/mixins/mixins';
+
+@import "settings/settings-general";
+@import "settings/settings-color";
+@import "settings/settings-typography";
+@import "settings/settings-components";
+
+
+@import "./core/properties";
+@import "./core/functions";
+@import "./core/system-tokens";
+
+// Core -------------- //
+@import 'core/fonts';
+@import 'core/base';
+@import 'core/grid';
+@import 'core/typography';
+
+// Utilities------------//
+@import 'core/utilities/background';
+@import 'core/utilities/width';
+@import 'core/utilities/textalign';
+@import 'core/utilities/flex';
+@import 'core/utilities/spacing';
+@import 'core/utilities/position';
+@import 'core/utilities/display';
+
+// Elements -------------- //
+// Styles basic HTML elements
+@import 'elements/section';
+@import 'elements/buttons';
+@import 'elements/tags';
+@import 'elements/toggle';
+@import 'elements/badge';
+@import 'elements/embed';
+@import 'elements/figure';
+@import 'elements/icons';
+@import 'elements/inputs';
+@import 'elements/list';
+@import 'elements/spinner';
+@import 'elements/page';
+@import 'elements/collapse';
+@import 'elements/forms';
+@import 'elements/table';
+@import 'elements/hr';
+
+// Components -------------- //
+@import 'components/accordions';
+@import 'components/alerts';
+@import 'components/breadcrumbs';
+@import 'components/cookie-message';
+@import 'components/details';
+@import 'components/date-picker';
+@import 'components/footer';
+@import 'components/header';
+@import 'components/modal';
+@import 'components/navigation';
+@import 'components/pagination';
+@import 'components/toast';
+@import 'components/search';
+@import 'components/sidenav';
+@import 'components/language-switcher';
+@import 'components/skipnav';
+@import 'components/cards';
+@import 'components/overflow-menu';
+@import 'components/tabnav';
+@import 'components/page-navigation';
+@import 'components/tooltip';
+
+@import 'core/print';

package/dist/scss/components/_accordions.scss

@@ -0,0 +1,162 @@
+/*
+----------------------------------------
+Accordion
+----------------------------------------
+*/
+.accordion-button {
+  @include button-unstyled;
+  background-color: color($accordion-button-background-color-default);
+  background-image: url($icons-folder-path+'/'+$accordion-button-closed-icon);
+  background-position: left units(4, 'rem') center;
+  background-repeat: no-repeat;
+  background-size: units($accordion-button-icon-size, 'rem');
+  color: color($accordion-button-color-default);
+  cursor: pointer;
+  display: inline-block;
+  margin: 0;
+  line-height: units($typography-body-text-line-height, 'rem');
+  padding: units(4, 'rem') units(4, 'rem') units(4, 'rem') units(9, 'rem');
+  width: 100%;
+  font-size: font-size($typography-body-text-font-size);
+  position: relative;
+  transition: none;
+  border-radius: $accordion-button-border-radius;
+  border: border($accordion-content-border);
+
+  &:hover {
+    background-color: color($accordion-button-background-color-hover);
+    color: color($accordion-button-color-hover);
+  }
+
+  h1, .h1,
+  h2, .h2,
+  h3, .h3,
+  h4, .h4,
+  h5, .h5,
+  h6, .h6 {
+    margin: 0;
+  }
+  .icon_text {
+    font-weight: font-weight("semibold");
+    margin-right: units(3);
+    float: left;
+  }
+  .accordion-icon {
+    right: units(4, 'rem');
+    height: units(5, 'rem');
+    line-height: units(5, 'rem');
+    position: initial;
+    text-align: left;
+    transform: none;
+    display: block;
+    top: 0.8rem;
+   @include media-breakpoint-up(md) {
+      text-align: center;
+      position: absolute;
+      transform: translateY(-50%);
+      top: 50%;
+      display: flex;
+   }
+
+    .icon-svg {
+      fill: color($accordion-button-color-default);
+      float: left;
+    }
+    &:hover .icon-svg{
+      fill: color($accordion-button-color-hover);
+    }
+  }
+}
+
+button.accordion-bulk-button{
+  @extend .function-link;
+  
+  background-repeat: no-repeat;
+  background-position: left top;
+  padding-left:units(505);
+  margin-bottom: units(4);
+  
+  &[data-accordion-bulk-expand="true"] {
+    background-image: url($icons-folder-path+'/'+$accordion-button-open-icon);
+  }
+  &[data-accordion-bulk-expand="false"] {
+    background-image: url($icons-folder-path+'/'+$accordion-button-closed-icon);
+  }
+}
+
+.accordion {
+  @include unstyled-list;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  > ul li ul {
+    list-style: disc;
+    > li > ul {
+      list-style: circle;
+      > li > ul {
+        list-style: square;
+      }
+    }
+  }
+
+  + .accordion {
+    margin-top: units(3, 'rem');
+  }
+  > li {
+    list-style: none;
+    margin-bottom: units(3, 'rem');
+    width: 100%;
+    > h1, > h2, > h3, > h4, > h5, > h6{
+      margin-top: 0px;
+      margin-bottom: 0px;
+      letter-spacing: normal;
+      max-width: none;
+    }
+  }
+}
+
+.accordion-content {
+  background-color: color($accordion-content-background-color);
+  color: color($accordion-content-color);
+  overflow: auto;
+  padding: units(4, 'rem');
+  border-bottom: border($accordion-content-border);
+  border-left: border($accordion-content-border);
+  border-right: border($accordion-content-border);
+  border-radius: $accordion-content-border-radius;
+  p, h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5{
+    color: color($accordion-content-color);
+  }
+
+  > *:first-child {
+    margin-top: 0;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+
+  &:not([aria-hidden]) {
+      display: none;
+  }
+
+  &[aria-hidden=true] {
+    display: none;
+  }
+}
+.accordion-button.accordion-error {
+  border: $accordion-button-error-border-width solid color($accordion-button-error-border-color);
+}
+.accordion-button[aria-expanded=true] {
+  background-color: color($accordion-button-open-background-color);
+  border-radius: $accordion-button-open-border-radius;
+  &:not(.accordion-error){
+    border-bottom: border($accordion-button-open-border);
+  }
+}
+.accordion-button[aria-expanded=false] {
+  background-image: url($icons-folder-path+'/'+$accordion-button-open-icon);
+  background-repeat: no-repeat;
+  background-size: units($accordion-button-icon-size, 'rem');
+  border-radius: $accordion-button-border-radius;
+}

package/dist/scss/components/_alerts.scss

@@ -0,0 +1,113 @@
+/*
+----------------------------------------
+Alert
+----------------------------------------
+*/
+$custom-alerts: () !default;
+$custom-alerts-bar: () !default;
+
+$alerts: (
+  success: $alert-success-background-color,
+  warning: $alert-warning-background-color,
+  error: $alert-error-background-color,
+  info: $alert-info-background-color
+);
+
+$alerts-bar: (
+  success: $alert-success-border-color,
+  warning: $alert-warning-border-color,
+  error: $alert-error-border-color,
+  info: $alert-info-border-color
+);
+
+$alerts: map-merge($alerts, $custom-alerts);
+$alerts-bar: map-merge($alerts-bar, $custom-alerts-bar);
+
+.alert {
+  background-color: color($alert-background-color);
+  background-position: 16px 16px;
+  background-repeat: no-repeat;
+  background-size: 24px;
+  padding-bottom: units($alert-padding);
+  padding-left: units($alert-padding);
+  padding-right: units($alert-padding);
+  padding-top: units($alert-padding);
+  position: relative;
+  margin-top: units(4);
+  margin-bottom: units(4);
+
+  border-left: units($alert-border-size) solid color($alert-border-color);
+
+  &:first-child {
+    margin-top:0;
+  }
+
+  &.alert--paragraph {
+    max-width: $typography-text-max-width;
+  }
+  .alert-close{
+    @include button-unstyled();
+    cursor:pointer;
+    position: absolute;
+    top: units(4);
+    right: units(4);
+    @include small-text;
+    color: color($alert-close-text-color);
+    text-decoration: underline;
+    .icon-svg{
+      margin-right: units(2);
+      width: 1.6rem;
+      height: 1.6rem;
+      fill: currentColor;
+    }
+  }
+
+  .alert-heading {
+    @include responsive-style($alert-heading-fontsize, font-size);
+    @include responsive-style($alert-heading-lineheight, line-height);
+    margin-top: 0;
+    margin-bottom: 0;
+    font-weight: font-weight("semibold");
+    color: color($alert-heading-color);
+    -ms-word-wrap: break-word;
+    word-wrap: break-word;
+  }
+
+  .alert-text {
+    margin-bottom: 0;
+    margin-top: 0;
+    color: color($alert-text-color);
+    max-width: $typography-text-max-width;
+    a, a:link, a:active, a:visited, a:hover{
+      color: color($alert-text-color);
+    }
+  }
+}
+
+@each $name, $bgcolor in $alerts {
+  .alert-#{$name} {
+    background-color: color($bgcolor);
+    border-color: color(map-get($alerts-bar, $name));
+
+    &.alert--show-icon{
+      $alert-icon: $name;
+      @if $name == error {
+        $alert-icon: 'highlight-off';
+      }
+      
+      @if $name == success {
+        $alert-icon: 'check-circle';
+      }
+      
+      @if $name == warning {
+        $alert-icon: 'report-problem';
+      }
+      background-image: url($icons-folder-path+'/'+$alert-icon+'.svg');
+      padding-left: calc(#{units($alert-padding)} + #{$alert-icon-size} + 8px);
+    }
+  }
+}
+
+.alert + .alert{
+  margin-top: units(4);
+}

package/dist/scss/components/_breadcrumbs.scss

@@ -0,0 +1,62 @@
+.breadcrumbs {
+  color: color($breadcrumbs-text-color);
+  font-size: font-size($breadcrumbs-font-size);
+}
+
+.breadcrumbs__list {
+  &:after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.breadcrumbs__list-item {
+  display: block;
+  list-style-type: none;
+  position: relative;
+  margin-top: 0;
+  margin-bottom: units(1);
+  margin-left: units(3);
+  padding-left: units(3) + $breadcrumbs-chevron-altitude-calculated;
+  float: left;
+
+  &:before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    // Offset by the difference between the width of the non-rotated square
+    // and its width when rotated
+    left: (($breadcrumbs-chevron-altitude-calculated * -2) + $breadcrumbs-chevron-size + $breadcrumbs-chevron-border-width);
+    width: $breadcrumbs-chevron-size;
+    height: $breadcrumbs-chevron-size;
+    margin: auto 0;
+    transform: rotate(45deg);
+    border: solid;
+    border-width: $breadcrumbs-chevron-border-width $breadcrumbs-chevron-border-width 0 0;
+    border-color: color($breadcrumbs-chevron-border-colour);
+  }
+
+  &:first-child {
+    margin-left: 0;
+    padding-left: 0;
+
+    &:before {
+      content: none;
+      display: none;
+    }
+  }
+}
+
+.breadcrumbs__link {
+  color: color($breadcrumbs-text-color);
+  &:visited, &:hover, &:active{
+    color: color($breadcrumbs-text-color);
+  }
+}

package/dist/scss/components/_cards.scss

@@ -0,0 +1,235 @@
+.card {
+  position: relative;
+  border-radius: units(0);
+  box-shadow: shadow($cards-shadow);
+  border: border($cards-border);
+  overflow: hidden;
+  background: color($cards-background-color);
+
+  //small card
+  &-small {
+    > :last-of-type {
+      padding-bottom:units(5);
+    }
+  }
+  //medium card
+  &-medium {
+    //The last
+    > :last-of-type {
+      padding-bottom:units(5);
+    }
+  }
+  //large card
+  &-large {
+    > :last-of-type {
+      padding-bottom:units(5);
+    }
+  }
+
+  &-align-height {
+    height: 100%;
+    -ms-box-orient: horizontal;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -moz-flex;
+    display: -webkit-flex;
+    display: flex;
+    flex-direction: column;
+
+    > *{
+      width: 100%;
+    }
+
+    .card-footer{
+      margin-top: auto;
+    }
+  }
+
+  p {
+    max-width: 60ch;
+    margin-top:units(4);
+    margin-bottom: units(0);
+    &:first-child {
+      margin-top:units(0);
+    }
+  }
+  h1, .h1,
+  h2, .h2,
+  h3, .h3,
+  h4, .h4,
+  h5, .h5 {
+    margin: units(0);
+  }
+}
+//card-header
+.card-header {
+  background-color: color($cards-header-background-color);
+  padding: units(4) units(5);
+  .header-title {
+    @include body-copy-text;
+    font-weight: font-weight("semibold");
+    color: color($cards-heading-color);
+    margin:units(0);
+
+    &.large-text {
+      @include h1;
+      color: color($cards-heading-large-color);
+    }
+  }
+  .sub-header {
+    @include body-copy-text;
+    margin-top:  units(0);
+    margin-bottom: units(0);
+    color: color($cards-sub-heading-color);
+  }
+}
+.card-text {
+  background-color: color($cards-text-background-color);
+  padding: units(4) units(5);
+  .text {
+    @include body-copy-text;
+    margin-top: units(4);
+    color: color($cards-text-color);
+    margin-bottom: units(0);
+  }
+}
+
+//card-content
+.card-content {
+  @include body-copy-text;
+  padding: units(0);
+  color: color($cards-text-color);
+  background-color: color($cards-content-background-color);
+  ul {
+    margin-bottom:units(0);
+  }
+  div:first-child {
+    margin-top:units(0);
+  }
+  .content-text {
+    margin-top:units(4);
+  }
+  .content {
+    text-align: center;
+  }
+}
+
+//card-action
+.card-action {
+  @include body-copy-text;
+  padding: units(4) units(5);
+  color: color($cards-text-color);
+  margin-bottom: units(0);
+  background-color: color($cards-action-background-color);
+
+  div:first-child {
+    margin-top:units(0);
+  }
+
+  &:last-child {
+    border-bottom: units(0);
+  }
+  .action-buttons {
+    button {
+      margin-right: units(4);
+      margin-top:units(3);
+
+      @include media-breakpoint-up(md) {
+        margin-right: units(4);
+        margin-top:units(3);
+      }
+    }
+    .button + .button{
+      @include media-breakpoint-up(sm) {
+        margin-left: 0px;
+        &:first-child{
+          margin-left: 0;
+        }
+      }
+    }
+  }
+  .action-links {
+    margin-top:units(4);
+    ul {
+      @include unstyled-list();
+      padding-left: units(0);
+      li {
+        margin-top:units(3) !important;
+      }
+    }
+  }
+  .action-functionlinks {
+    margin-top:units(4);
+    text-align: right;
+    .function-link {
+      margin-left: units(4);
+    }
+  }
+}
+
+//If text comes after header
+.card-header + .card-text{
+  padding-top:units(0);
+}
+//If content comes after header
+.card-header + .card-content {
+  padding-top:units(0);
+}
+//If action comes after header
+.card-header + .card-action{
+  padding-top:units(0);
+}
+//If header comes after header
+.card-header + .card-header{
+  padding-top:units(0);
+}
+//If header comes after text
+.card-text + .card-header {
+  padding-top:units(0);
+}
+//If content comes after text
+.card-text + .card-content {
+  padding-top:units(0);
+}
+//If action comes after text
+.card-text + .card-action{
+  padding-top:units(0);
+}
+//If text comes after text
+.card-text + .card-text{
+  padding-top:units(0);
+}
+//If text comes after action
+.card-action + .card-text{
+  padding-top:units(0);
+}
+//If header comes after action
+.card-action + .card-header{
+  padding-top:units(0);
+}
+//If content comes after action
+.card-action + .card-content{
+  padding-top:units(0);
+}
+//If action comes after action
+.card-action + .card-action{
+  padding-top:units(0);
+}
+.card {
+  > .list-group:first-child {
+      .list-group-item:first-child {
+          border-radius: 0px;
+      }
+  }
+
+  > .list-group:last-child {
+      .list-group-item:last-child {
+          border-radius: 0px;
+      }
+  }
+}
+
+.card-center {
+  text-align: center;
+}

package/dist/scss/components/_cookie-message.scss

@@ -0,0 +1,41 @@
+.cookie-container{
+  color: color($cookie-message-text-color);
+  position: fixed;
+  bottom: 0px;
+  right: 0px;
+  left: 0px;
+  z-index: 9500;
+  margin-bottom: units(3);
+  margin-left: units(3);
+  margin-right: units(3);
+
+  .cookie-message{
+    @include grid-container();
+    background-color: color($cookie-message-background-color);
+    border: border($cookie-message-border);
+    box-shadow: shadow($cookie-message-shadow);
+    padding-top: calc(#{units(6)} - 1px);
+    padding-bottom: calc(#{units(7)} - 1px);
+    position: relative;
+    overflow: hidden;
+
+    p, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
+      color: color($cookie-message-text-color);
+    }
+
+
+    @include media-breakpoint-up(xl) {
+      max-width: calc(#{map-get($container-max-widths, xl)} + #{units(7)} + #{units(7)});
+    }
+
+    .cookie-text, .cookie-actions{
+      @include media-breakpoint-up(xl) {
+        padding-left: units(7);
+        padding-right: units(7);
+      }
+    }
+    .cookie-actions{
+      margin-top: units(4);
+    }
+  }
+}