@erst-vg/dkfds-vite 8.0.1

package/dist/scss/components/_tabnav.scss

@@ -0,0 +1,122 @@
+
+.tabnav {
+  @extend .accordion;
+  @include media-breakpoint-up(md) {
+    @include unstyled-list;
+    list-style-type: none;
+    padding: 0;
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  > button {
+    max-width: none;
+
+    @extend .accordion-button;
+    text-decoration: none;
+    margin-top: units(3);
+    margin-bottom: 0;
+    @include media-breakpoint-up(md) {
+      border: none;
+    }
+
+    &[aria-selected=true]{
+      background-color: color($accordion-button-open-background-color);
+      border-radius: $accordion-button-open-border-radius;
+    }
+
+    &[aria-selected=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;
+      &:focus{
+        background-color: color($tavnav-button-default-background-color);
+      }
+    }
+
+    @include media-breakpoint-up(md) {
+      display: inline-block;
+      width: auto;
+      color: color($tavnav-button-text-color);
+      text-align: center;
+      text-decoration: none;
+      padding: 0px;
+      background-color: transparent;
+      border-radius: 0px;
+      line-height: normal;
+      padding-top: units(3);
+      padding-bottom: units(3);
+      padding-left: units(5);
+      padding-right: units(5);
+      margin: 0 units(2) units(2) 0px;
+      text-decoration: underline;
+      border-top: units(2) solid color('white');
+
+      &[aria-selected=false]{
+        background-color: color($tavnav-button-default-background-color);
+        background-image: none;
+        border-radius: 0px;
+      }
+
+      &:hover {
+          background-color: color($tavnav-button-hover-background-color);
+      }
+
+      &:focus{
+        outline: none;
+        span{
+          @include focus-outline();
+        }
+      }
+
+      &[aria-selected=true] {
+        background-color: color($tabnav-background-color);
+        background-image: none;
+        border: border($tabnav-border);
+        padding-left: calc(#{units(5)} - 1px);
+        padding-right: calc(#{units(5)} - 1px);
+        border-bottom: 1px solid color($tabnav-background-color);
+        border-radius: 0px;
+        text-decoration: none;
+        margin: 0 units(2) -1px 0px;
+        padding-bottom: calc(#{units(3)} + 2px);
+        position: relative;
+        z-index: 350;
+        span:not(.sr-only) {
+          display: block;
+        }
+      }
+
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    > button:last-of-type{
+      margin-right: units(3);
+    }
+  }
+
+  &-panel{
+    @extend .accordion-content;
+    @include media-breakpoint-up(md) {
+      display: none;
+      border: border($tabnav-border);
+      border-radius: 0;
+      overflow: hidden;
+      margin-bottom: calc(#{units(4)});
+      background-color: transparent;
+      position: relative;
+      z-index: 300;
+
+      &:focus{
+        @include focus();
+      }
+    }
+    &[aria-hidden=false]{
+      display: block;
+      order: 1000;
+      width: 100%;
+    }
+  }
+}

package/dist/scss/components/_toast.scss

@@ -0,0 +1,105 @@
+$toast-backgrounds: (
+    success: $toast-success-background-color,
+    warning: $toast-warning-background-color,
+    error: $toast-error-background-color,
+    info: $toast-info-background-color
+);
+
+$toast-icon-names: (
+    success: $toast-success-icon,
+    warning: $toast-warning-icon,
+    error: $toast-error-icon,
+    info: $toast-info-icon
+);
+
+$toast-icon-backgrounds: (
+    success: $toast-success-color,
+    warning: $toast-warning-color,
+    error: $toast-error-color,
+    info: $toast-info-color
+);
+.toast-container{
+    position: fixed;
+    right: 0px;
+    left: 0px;
+    bottom: 0px;
+    z-index: 7000;
+    
+    @include media-breakpoint-up(md) {   
+        right: units(4);
+        top: units(8);
+        left: auto;
+        bottom: auto;
+    }
+}
+.toast{
+    width: 100%;
+    max-width: 100%;
+    background-color: color($toast-default-background-color);
+    display: flex;
+    transition: opacity .15s linear;
+    margin-bottom: units(4);
+    box-shadow: shadow($toast-shadow);
+
+    &:not(.show){
+        opacity: 0;
+    }
+    &.hide{
+        display: none;
+    }
+
+    @include media-breakpoint-up(md) {    
+        width: 464px;
+    }
+    
+    .toast-icon {
+        align-items: center;
+        display: flex;
+        padding-left: calc(#{units(4)} + #{units(5)});
+        padding-right: units(4);
+        background-size: units(505);
+        background-repeat: no-repeat;
+        background-position: center center;
+    }
+    .toast-message{
+        padding: units(4);
+        position: relative;
+        width: 100%;
+        .toast-close{
+            @include button-unstyled;
+            position: absolute;
+            top: units(4);
+            right: units(4);
+            text-indent: -9999px;
+            width: 24px;
+            height: 24px;
+            
+            background-image: url($icons-folder-path+'/'+'close.svg');
+            background-repeat: no-repeat;
+        }
+        p{
+            margin: 0px;
+            word-break: break-word;
+            &:first-of-type{
+                margin-right: units(6);
+            }
+        }
+    }
+}
+@each $name, $bgcolor in $toast-backgrounds {
+    .toast-#{$name} {
+        background-color: color($bgcolor);
+    }
+}
+
+@each $name, $iconcolor in $toast-icon-backgrounds {
+    .toast-#{$name} .toast-icon {
+        background-color: color($iconcolor);
+    }
+}
+
+@each $name, $iconname in $toast-icon-names {
+    .toast-#{$name} .toast-icon{
+        background-image: url($icons-folder-path+'/'+$iconname+'.svg');
+    }
+}

package/dist/scss/components/_tooltip.scss

@@ -0,0 +1,72 @@
+.js-tooltip{
+  display: inline-block;
+
+  svg{
+    pointer-events: none;
+  }
+}
+
+.popover{
+    cursor: pointer;
+}
+.tooltip-link{
+  border-bottom: $tooltip-link-border-width $tooltip-link-border-style color($tooltip-link-border-color);
+  display: inline;
+  text-decoration: none;
+  &:link, &:active, &:hover, &:visited, &:focus{
+    color: color($tooltip-link-color);
+  }
+}
+.tooltip{
+  @include body-copy-text;
+  font-size: font-size('sm');
+  box-shadow: shadow($tooltip-shadow);
+  background-color: color($tooltip-background-color);
+  border: border($tooltip-border);
+  border-radius: 4px;
+  padding: .3rem .6rem;
+}
+
+.tooltip-popper{
+  position: absolute;
+  max-width: 66ch;
+}
+
+.tooltip-popper .tooltip-arrow {
+  position: absolute;
+}
+.tooltip-popper .tooltip-arrow.down{
+    border-top:8px solid border-color($tooltip-border);
+    border-right:8px solid transparent;
+    border-left:8px solid transparent;
+    bottom: -7px;
+    left: calc(50% - 8px);
+
+    &:after{
+        content: '';
+        border-top: 7px solid color($tooltip-background-color);
+        border-right: 7px solid transparent;
+        border-left: 7px solid transparent;
+        display: block;
+        position: absolute;
+        bottom: 1px;
+        margin-left: -7px;
+    }
+}
+.tooltip-popper .tooltip-arrow.up{
+    border-bottom:8px solid border-color($tooltip-border);
+    border-right:8px solid transparent;
+    border-left:8px solid transparent;
+    top: -7px;
+    left: calc(50% - 8px);
+    &:after{
+        content: '';
+        border-bottom: 7px solid color($tooltip-background-color);
+        border-right: 7px solid transparent;
+        border-left: 7px solid transparent;
+        display: block;
+        position: absolute;
+        top: 1px;
+        margin-left: -7px;
+    }
+}

package/dist/scss/core/_base.scss

@@ -0,0 +1,28 @@
+
+html {
+  box-sizing: border-box;
+  line-height: normal;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+body {
+  background-color: color('white');
+  color: color('black');
+  overflow-x: hidden;
+}
+
+// for IE < 11, see:
+// <http://caniuse.com/#feat=hidden>
+[hidden] {
+  display: none !important; 
+}
+
+a:focus, button:focus, input:focus, select:focus, textarea:focus, 
+.focus {
+  @include focus();
+}

package/dist/scss/core/_fonts.scss

@@ -0,0 +1,139 @@
+$font-system: 'system' !default;
+@if not $theme-use-custom-font {
+  @font-face {
+    font-family: 'IBM Plex Sans';
+    font-style: normal;
+    font-weight: font-weight("bold");
+    src: url($font-path + "complete/woff2/IBMPlexSans-Bold.woff2") format("woff2"), url($font-path + "complete/woff/IBMPlexSans-Bold.woff") format("woff");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'IBM Plex Sans';
+    font-style: italic;
+    font-weight: font-weight("bold");
+    src: url($font-path + "complete/woff2/IBMPlexSans-BoldItalic.woff2") format("woff2"), url($font-path + "complete/woff/IBMPlexSans-BoldItalic.woff") format("woff");
+    font-display: swap;
+  }
+
+  @if font-weight("extralight", false) != false{
+    @font-face {
+      font-family: 'IBM Plex Sans';
+      font-style: normal;
+      font-weight: font-weight("extralight");
+      src: url($font-path + "complete/woff2/IBMPlexSans-ExtraLight.woff2") format("woff2"), url($font-path + "complete/woff/IBMPlexSans-ExtraLight.woff") format("woff");
+      font-display: swap;
+    }
+
+    @font-face {
+      font-family: 'IBM Plex Sans';
+      font-style: italic;
+      font-weight: font-weight("extralight");
+      src: url($font-path + "complete/woff2/IBMPlexSans-ExtraLightItalic.woff2") format("woff2"), url($font-path + "complete/woff/IBMPlexSans-ExtraLightItalic.woff") format("woff");
+      font-display: swap;
+    }
+  }
+
+  @font-face {
+    font-family: 'IBM Plex Sans';
+    font-style: italic;
+    font-weight: font-weight("normal");
+    src: url($font-path + "complete/woff2/IBMPlexSans-Italic.woff2") format("woff2"), url($font-path + "complete/woff/IBMPlexSans-Italic.woff") format("woff");
+    font-display: swap;
+  }
+
+  @if font-weight("light", false) != false{
+    @font-face {
+      font-family: 'IBM Plex Sans';
+      font-style: normal;
+      font-weight: font-weight("light");
+      src: url($font-path + "complete/woff2/IBMPlexSans-Light.woff2") format("woff2"), url($font-path + "complete/woff/IBMPlexSans-Light.woff") format("woff");
+      font-display: swap;
+    }
+
+    @font-face {
+      font-family: 'IBM Plex Sans';
+      font-style: italic;
+      font-weight: font-weight("light");
+      src: url($font-path + "complete/woff2/IBMPlexSans-LightItalic.woff2") format("woff2"), url($font-path + "complete/woff/IBMPlexSans-LightItalic.woff") format("woff");
+      font-display: swap;
+    }
+  }
+
+  @font-face {
+    font-family: 'IBM Plex Sans';
+    font-style: normal;
+    font-weight: font-weight("medium");
+    src: url($font-path + "complete/woff2/IBMPlexSans-Medium.woff2") format("woff2"), url($font-path + "complete/woff/IBMPlexSans-Medium.woff") format("woff");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'IBM Plex Sans';
+    font-style: italic;
+    font-weight: font-weight("medium");
+    src: url($font-path + "complete/woff2/IBMPlexSans-MediumItalic.woff2") format("woff2"), url($font-path + "complete/woff/IBMPlexSans-MediumItalic.woff") format("woff");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'IBM Plex Sans';
+    font-style: normal;
+    font-weight: font-weight("normal");
+    src: url($font-path + 'complete/eot/IBMPlexSans-Regular.eot'); /* IE9 Compat Modes */
+    src: url($font-path + 'complete/eot/IBMPlexSans-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url($font-path + 'complete/woff/IBMPlexSans-Regular.woff') format('woff'), /* Modern Browsers */
+    url($font-path + 'complete/woff2/IBMPlexSans-Regular.woff2') format('woff2'), /* Modern Browsers */
+    url($font-path + 'complete/ttf/IBMPlexSans-Regular.ttf')  format('truet ype'); /* Safari, Android, iOS */
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'IBM Plex Sans';
+    font-style: normal;
+    font-weight: font-weight("semibold");
+    src: url($font-path + "complete/woff2/IBMPlexSans-SemiBold.woff2") format("woff2"), url($font-path + "complete/woff/IBMPlexSans-SemiBold.woff") format("woff");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'IBM Plex Sans';
+    font-style: italic;
+    font-weight: font-weight("semibold");
+    src: url($font-path + "complete/woff2/IBMPlexSans-SemiBoldItalic.woff2") format("woff2"), url($font-path + "complete/woff/IBMPlexSans-SemiBoldItalic.woff") format("woff");
+    font-display: swap;
+  }
+
+  @if font-weight("thin", false) != false{
+    @font-face {
+      font-family: 'IBM Plex Sans';
+      font-style: normal;
+      font-weight: font-weight("thin");
+      src: url($font-path + "complete/woff2/IBMPlexSans-Thin.woff2") format("woff2"), url($font-path + "complete/woff/IBMPlexSans-Thin.woff") format("woff");
+      font-display: swap;
+    }
+
+    @font-face {
+      font-family: 'IBM Plex Sans';
+      font-style: italic;
+      font-weight: font-weight("thin");
+      src: url($font-path + "complete/woff2/IBMPlexSans-ThinItalic.woff2") format("woff2"), url($font-path + "complete/woff/IBMPlexSans-ThinItalic.woff") format("woff");
+      font-display: swap;
+    }
+  }
+
+  @font-face {
+    font-family: system;
+    src:  local(".SFNSText-Light"), //Mac OS X - El Captain
+    local(".HelveticaNeueDeskInterface-Light"), //Mac OS X - Yosemite
+    local(".LucidaGrandeUI"), //Mac OS X - Mavericks
+    local("Ubuntu Light"), //Ubuntu
+    local("Segoe UI Light"), //Windows - Vista
+    local("Roboto-Light"), //Android - Ice Cream Sandwich (4.0)+
+    local("DroidSans"), //Android - Cupcake (1.5) to Honeycomb (3.2.6)
+    local("Tahoma"); //Windows - XP
+    font-style: normal;
+    font-weight: font-weight("normal");
+    font-display: swap;
+  }
+}