@erst-vg/dkfds-vite 8.0.1

package/src/stylesheets/components/_overflow-menu.scss

@@ -0,0 +1,234 @@
+.overflow-menu + h1{
+    margin-top: 0;
+}
+
+.overflow-menu {
+    display: block;
+    position: relative;
+    width: 100%;
+
+    
+    @include media-breakpoint-up(md) {
+        width: auto;
+        display: inline-block;
+    }
+
+    .button-overflow-menu{
+        @include button-unstyled;
+        min-height: 40px;
+        min-width: 40px;
+        padding: 8px 0;
+        align-items: center;
+        justify-content: center;
+        color: color($overflow-menu-button-text-color);
+        position: relative;
+        cursor: pointer;
+        &:hover{
+            text-decoration: underline;
+        }
+
+        //below: arrow with border
+        &:after, &:before {
+            display: none;
+            bottom: 100%;
+            left: 50%;
+            border: solid transparent;
+            content: " ";
+            height: 0;
+            width: 0;
+            position: absolute;
+            pointer-events: none;
+            z-index: 3;
+            bottom: calc(#{$overflow-menu-dropdown-distance} * -1 - 1px);
+        }
+        &:after {
+            border-bottom-color: color($overflow-menu-content-background-color);
+            border-width: calc(#{$overflow-menu-arrow-size} - 1px);
+            margin-left: calc((#{$overflow-menu-arrow-size} - 1px)*-1);
+        }
+        &:before {
+            border-bottom-color: border-color($overflow-menu-content-border);
+            border-width: $overflow-menu-arrow-size;
+            margin-left: calc(#{$overflow-menu-arrow-size} *-1);
+        }
+
+        &[aria-expanded="true"]{
+            &:after, &:before{
+                display: block;
+            }
+        }
+
+    }
+
+    &.overflow-menu--hover-bg{ //used when button only contains an icon
+        .button-overflow-menu{
+            padding: 0;
+            &:hover{
+                background-color: color($overflow-menu-button-icon-only-hover-background-color);
+            }
+        }
+    }
+
+    .overflow-menu-inner {
+        position: absolute;
+        width: 100%;
+        z-index: 2;
+        border: border($overflow-menu-content-border);
+        box-shadow: shadow($overflow-menu-content-shadow);
+        background: color($overflow-menu-content-background-color);
+        padding-top: units(3);
+        padding-bottom: units(3);
+        top: calc(100% + #{$overflow-menu-dropdown-distance});
+        min-width: 28rem;
+
+        @include media-breakpoint-up(md) {
+            width: auto;
+        }
+
+        &[aria-hidden="true"]{
+            display: none;
+        }
+    }
+
+    .overflow-list{
+        @include unstyled-list;
+        font-size: font-size($overflow-menu-content-font-size);
+        line-height: units($overflow-menu-content-line-height, 'rem');
+        color: color($overflow-menu-content-text-color);
+
+        button{
+            @include button-unstyled;
+            line-height: units(5, 'rem');
+            cursor: pointer;
+        }
+        a{
+            @include body-copy-text;
+            display: block;
+            text-decoration: none;
+            line-height: units(5, 'rem');
+            &:hover, &:visited, &:focus{
+                color: color($overflow-menu-content-text-color);
+            }
+        }
+
+        button, a{
+            padding: 8px 16px;
+            width: 100%;
+            &:hover{
+                background-color: color($overflow-menu-content-link-hover-background-color);
+            }
+        }
+    }
+
+    &:not(.overflow-menu--md-no-responsive):not(.overflow-menu--lg-no-responsive) .sidenav-list{
+        border-top: 0;
+        border-bottom: 0;
+    }
+  &.overflow-menu--md-no-responsive .sidenav-list{
+        @include media-breakpoint-down(md) {
+            border-top: 0;
+            border-bottom: 0;
+        }
+    }
+
+  &.overflow-menu--lg-no-responsive .sidenav-list{
+    @include media-breakpoint-down(lg) {
+      border-top: 0;
+      border-bottom: 0;
+    }
+  }
+
+
+    &--open-right {
+        .overflow-menu-inner{
+            @include media-breakpoint-up(md) {
+                left: calc(50% - 19px);
+                &:after {
+                    left: 13px;
+                }
+            }
+        }
+    }
+    &--open-left {
+        .overflow-menu-inner{
+            right: calc(50% - 19px);
+            &:after {
+                right: 13px;
+            }
+            li, a, button{
+                text-align: right;
+                .icon-svg{
+                    float: right;
+                    margin-right: 4px;
+                }
+            }
+        }
+    }
+
+    &.overflow-menu--md-no-responsive{
+        //overflow content always visible on large screens.
+        //does not look like a dropdown.
+        @include media-breakpoint-up(md) {
+            display: block;
+            &:before, &:after{
+                display: none; //hide arrow
+            }
+            .button-overflow-menu{
+                display: none;
+            }
+            .overflow-menu-inner{
+                display: block !important;
+                width: 100%;
+                max-width: 100%;
+                position: static;
+                box-shadow: none;
+                border: none;
+                min-width: auto;
+            }
+		}
+    }
+  &.overflow-menu--lg-no-responsive{
+    //overflow content always visible on large screens.
+    //does not look like a dropdown.
+    @include media-breakpoint-up(lg) {
+      display: block;
+      &:before, &:after{
+        display: none; //hide arrow
+      }
+      .button-overflow-menu{
+        display: none;
+      }
+      .overflow-menu-inner{
+        display: block !important;
+        width: 100%;
+        max-width: 100%;
+        position: static;
+        box-shadow: none;
+        border: none;
+        min-width: auto;
+      }
+    }
+  }
+
+  &--sort{
+    .button-overflow-menu{
+        text-decoration: underline;
+        line-height: units(5, 'rem');
+        .selected-value{
+            text-decoration: none;
+            display: inline-block;
+            margin-left: units(2);
+            font-weight: font-weight("semibold");
+        }
+        svg {
+            margin-right: units(2);
+        }
+    }
+    .overflow-menu-inner .overflow-list li[aria-selected="true"] button{
+        font-weight: font-weight("semibold");
+        @include add-background-svg('done');
+        background-repeat: no-repeat;
+        background-position: calc(100% - #{units(4)}) center;
+    }
+  }
+}

package/src/stylesheets/components/_page-navigation.scss

@@ -0,0 +1,12 @@
+.page-navigation{
+    margin-top: units(7);
+    display: flex;
+    flex-direction: column;
+    @include media-breakpoint-up(md) {
+        display: inline-flex;
+    }
+    .button + .button{
+        margin-top: units(3);
+        margin-left: 0;
+    }
+}

package/src/stylesheets/components/_pagination.scss

@@ -0,0 +1,136 @@
+.pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: units(5);
+    margin-bottom: units(5);
+
+    .pagination__dropdown {
+        display: none;
+
+        @include media-breakpoint-down(sm) {
+            display: inline-flex;
+        }
+    }
+
+    .pagination__items {
+        align-items: center;
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: center;
+
+        @include media-breakpoint-down(sm) {
+            display: none;
+        }
+    }
+
+    .button {
+        &.button-arrow {
+            font-size: font-size($pagination-button-arrow-font-size);
+            appearance: none;
+            display: inline-block;
+            background-color: color($pagination-button-arrow-background-color);
+            border-style: none;
+            color: color($pagination-button-arrow-color);
+            text-decoration: underline;
+            white-space: nowrap;
+            width: auto;
+            padding-left: units(3);
+            padding-right: units(3);
+
+            &.hidden {
+                visibility: hidden;
+            }
+
+            .icon-svg {
+                margin-right: units(0);
+            }
+
+            .pagination-nav-link {
+                @include media-breakpoint-down(sm) {
+                    display: none;
+                }
+            }
+        }
+
+        &.button-first, &.button-last {
+            @include media-breakpoint-up(md) {
+                display: none;
+            }
+        }
+
+        &.button-previous {
+            .icon-svg {
+                margin-right: units(2);
+
+                @include media-breakpoint-down(sm) {
+                    margin-right: units(0);
+                }
+            }
+        }
+
+        &.button-next {
+            .icon-svg {
+                margin-left: units(2);
+
+                @include media-breakpoint-down(sm) {
+                    margin-left: units(0);
+                }
+            }
+        }
+    }
+
+    .pagination-mobile {
+        white-space: nowrap;
+        display: inline-flex;
+        align-items: center;
+        margin-left: units(3);
+        margin-right: units(3);
+
+        @include media-breakpoint-up(md) {
+            display: none;
+        }
+    }
+
+    .pagination__items {
+        @include unstyled-list;
+        width: auto;
+
+        .pagination-item {
+            margin-left: units(3);
+            margin-right: units(3);
+
+            .current-page {
+                appearance: none;
+                display: inline-block;
+                width: 100%;
+                padding: units(3) calc(#{units(4)} - #{$button-border-width}) calc(#{units(3)} - #{$button-border-width});
+                border-radius: $button-border-radius;
+                border-width: $button-border-width $button-border-width $button-border-bottom-width $button-border-width;
+                border-style: solid;
+                font-weight: font-weight("medium");
+                @include font-smoothing;
+                line-height: 2rem;
+                text-align: center;
+                justify-content: center;
+                text-decoration: none;
+                user-select: text;
+
+                font-size: font-size('md');
+                color: color($pagination-current-page-color);
+                background-color: color($pagination-current-page-background-color);
+                border-color: color($pagination-current-page-border-color);
+            }
+        }
+    }
+
+}
+
+
+
+
+
+
+
+
+

package/src/stylesheets/components/_search.scss

@@ -0,0 +1,33 @@
+.search {
+  display: flex;
+  
+  .form-input{
+    margin-top: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    &:focus{
+      z-index: 1;
+    }
+  }
+
+  .button-search{
+    background-color: color($button-search-default-background-color);
+    border: border($input-border);
+    border-left: none;
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    color: color($button-search-text-color);
+    font-weight: font-weight("normal");
+    width: inherit; //not 100& width on mobile
+    &:hover{
+      background-color: color($button-search-hover-background-color);
+    }
+  }
+}
+
+// Extra specificity to override rules set in reset.css.
+input[type=search] { /* stylelint-disable-line selector-no-qualifying-type */
+  box-sizing: border-box;
+  appearance: none;
+  -webkit-appearance: none; //Fixes border-radius bug on iPhone X Safari. 
+}

package/src/stylesheets/components/_sidenav.scss

@@ -0,0 +1,205 @@
+.sidenav-list {
+  @include unstyled-list();
+
+  ul{
+    @include unstyled-list();
+  }
+  border-bottom: border($sidenav-border);
+  border-top: border($sidenav-border);
+
+  a {
+    display: block;
+    border: none;
+    color: color($sidenav-link-default-color);
+    line-height: units($sidenav-link-line-height, 'rem');
+    padding: $spacer;
+    padding-top: calc(8px - #{border-width($sidenav-list-level1-border)});
+    padding-left: units(4);
+    padding-right: units(4);
+    text-decoration: none;
+    max-width: none;
+    &:focus {
+      outline-offset: 0;
+      position: relative;
+      z-index: 1;
+    }
+  }
+  > li.current{
+    > a, > ul > li > a{
+      padding-left: calc(#{units(4)} - #{$sidenav-active-border-width});
+    }
+  }
+  li {
+    &:hover {
+      background-color: color($sidenav-link-hover-background-color);
+    }
+    a:hover {
+      text-decoration: none;
+      color: color($sidenav-link-active-color);
+    }
+
+    a {
+      overflow:hidden;
+      display: flex;
+      flex-wrap: wrap;
+
+      ul {
+        width:100%
+      }
+
+      .sidenav-icon-before {
+        line-height: 23px;
+        text-align: left;
+      }
+
+      .sidenav-icon {
+        margin-left: auto;
+        width: 22px;
+        height: 22px;
+        line-height: 23px;
+        text-align: center;
+        float: right;
+      }
+      .sidenav-title{
+        margin-left: units(2);
+        white-space: pre-line;
+      }
+
+      .sidenav-information {
+        color: color($sidenav-link-default-extra-information-text-color);
+        margin: 0;
+        display: block;
+        width: 100%;
+      }
+
+      &:focus{
+        background-color: transparent;
+      }
+    }
+
+    &.current {
+      > a {
+        font-weight: font-weight("medium");
+      }
+
+      .sidenav-information {
+        color: color($sidenav-link-current-extra-information-text-color);
+        font-weight: font-weight("normal");
+      }
+    }
+    &.active{
+      > a{
+        color: color($sidenav-link-active-color);
+        font-weight: font-weight("medium");
+      }
+    }
+  }
+
+  > li > ul > li > ul > li > a{
+    padding-left: units(5);
+  }
+  > li > ul > li > ul > li > ul > li > a{
+    padding-left: units(6);
+  }
+  > li > ul > li > ul > li > ul > li > ul > li > a{
+    padding-left: units(7);
+  }
+  > li > ul > li > ul > li > ul > li > ul > li > ul > li > a{
+    padding-left: units(8);
+  }
+
+  > li.has-anchor-links > ul > li > a{
+    padding-left: calc(#{units(3)} * 4);
+  }
+  > li:not(.has-anchor-links) > ul > li.has-anchor-links > ul > li > a{
+    padding-left: calc(#{units(3)} * 4);
+  }
+  > li:not(.has-anchor-links) > ul > li:not(.has-anchor-links) > ul > li.has-anchor-links > ul > li > a{
+    padding-left: calc(#{units(3)} * 5);
+  }
+  > li:not(.has-anchor-links) > ul > li:not(.has-anchor-links) > ul > li:not(.has-anchor-links) > ul > li.has-anchor-links > ul > li > a{
+    padding-left: calc(#{units(3)} * 6);
+  }
+  > li:not(.has-anchor-links) > ul > li:not(.has-anchor-links) > ul > li:not(.has-anchor-links) > ul > li:not(.has-anchor-links) > ul > li.has-anchor-links > ul > li > a{
+    padding-left: calc(#{units(3)} * 7);
+  }
+
+  > li {
+    background-color: transparent;
+    font-size: font-size($typography-base-font-size);
+    border-top: border($sidenav-list-level1-border);
+
+    &.active > a{
+      color: color('black');
+    }
+
+    &.current{
+      border-left: $sidenav-active-border-width solid color($sidenav-active-border-color);
+      background-color: color($sidenav-link-current-background-color);
+    }
+    &:first-child {
+      border-top: none;
+    }
+    &:last-child {
+      a {
+        padding-bottom: calc(8px - #{border-width($input-border)});
+      }
+    }
+    li{
+      border-top: border($sidenav-list-level2-border);
+      font-size: font-size($typography-small-text-font-size);
+    }
+  }
+  
+  li.disabled {
+    cursor: not-allowed;
+    a {
+      cursor: not-allowed;
+      color: color($sidenav-link-disabled-color);
+
+      &:hover {
+        background-color: transparent;
+        text-decoration: none;
+        color: color($sidenav-link-disabled-color);
+        cursor: not-allowed;
+      }
+    }
+
+    &.active, &.active a{color: color($sidenav-link-active-color); background-color: transparent;}
+    &:hover , &.active a:hover{color: color($sidenav-link-active-color); background-color: color($sidenav-link-default-background-color);}
+  }
+}
+
+.sidenav-sub_list {
+  @include unstyled-list();
+  margin: 0;
+  width: 100%;
+
+  li {
+    border: none;
+    &:last-child {
+      a {
+        padding-bottom: units(3);
+      }
+    }
+  }
+
+  a {
+    padding-top: units(3);
+    line-height: units($typography-base-line-height, 'rem');
+  }
+  li:not(.has-anchor-links) .sidenav-sub_list {
+    a {
+      &:focus {
+        outline-offset: 0;
+      }
+    }
+  }
+
+}
+
+.sidebar-col{
+  @include media-breakpoint-up(md) {
+    flex: 0 0 300px; //300 = 3 columns width
+  }
+}

package/src/stylesheets/components/_skipnav.scss

@@ -0,0 +1,31 @@
+@use 'sass:math';
+a.skipnav {
+  color: color($skipnav-text-color);
+  left: 0;
+  padding: 1rem 1.5rem;
+  position: absolute;
+  top: -4.2rem;
+  transition: all 0.2s ease-in-out;
+  z-index: 8000;
+  max-width: none;
+  outline-offset: 0;
+
+  &:focus {
+    @include media-breakpoint-up(sm) {
+      
+      @include focus-outline();
+      background-color: color($skipnav-background-color);
+      left: 0;
+      position: absolute;
+      top: 0;
+      transition: all 0.2s ease-in-out;
+      padding: 1rem math.div(math.div($grid-gutter-width, 2), 2);
+      margin-top: calc(#{units(4)} - 1px);
+      margin-left: math.div(math.div($grid-gutter-width, 2), 2);
+    }
+  }
+}
+
+#main-content:focus{
+  @include focus-outline();
+}