@erst-vg/dkfds-vite 8.0.1

package/dist/scss/elements/_spinner.scss

@@ -0,0 +1,76 @@
+
+$spinner-color: color($spinner-animation-color);
+.spinner {
+    margin: 50px auto;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    border-radius: 50%;
+    position: relative;
+    text-indent: -9999em;
+    -webkit-animation: spinner 1.1s infinite ease;
+    animation: spinner 1.1s infinite ease;
+    -webkit-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+  .spinner-status{
+    text-align: center;
+  }
+
+
+  @-webkit-keyframes spinner {
+    0%,
+    100% {
+      box-shadow: 0em -2.6em 0em 0em $spinner-color, 1.8em -1.8em 0 0em rgba($spinner-color, 0.2), 2.5em 0em 0 0em rgba($spinner-color, 0.2), 1.75em 1.75em 0 0em rgba($spinner-color, 0.2), 0em 2.5em 0 0em rgba($spinner-color, 0.2), -1.8em 1.8em 0 0em rgba($spinner-color, 0.2), -2.6em 0em 0 0em rgba($spinner-color, 0.5), -1.8em -1.8em 0 0em rgba($spinner-color, 0.7);
+    }
+    12.5% {
+      box-shadow: 0em -2.6em 0em 0em rgba($spinner-color, 0.7), 1.8em -1.8em 0 0em $spinner-color, 2.5em 0em 0 0em rgba($spinner-color, 0.2), 1.75em 1.75em 0 0em rgba($spinner-color, 0.2), 0em 2.5em 0 0em rgba($spinner-color, 0.2), -1.8em 1.8em 0 0em rgba($spinner-color, 0.2), -2.6em 0em 0 0em rgba($spinner-color, 0.2), -1.8em -1.8em 0 0em rgba($spinner-color, 0.5);
+    }
+    25% {
+      box-shadow: 0em -2.6em 0em 0em rgba($spinner-color, 0.5), 1.8em -1.8em 0 0em rgba($spinner-color, 0.7), 2.5em 0em 0 0em $spinner-color, 1.75em 1.75em 0 0em rgba($spinner-color, 0.2), 0em 2.5em 0 0em rgba($spinner-color, 0.2), -1.8em 1.8em 0 0em rgba($spinner-color, 0.2), -2.6em 0em 0 0em rgba($spinner-color, 0.2), -1.8em -1.8em 0 0em rgba($spinner-color, 0.2);
+    }
+    37.5% {
+      box-shadow: 0em -2.6em 0em 0em rgba($spinner-color, 0.2), 1.8em -1.8em 0 0em rgba($spinner-color, 0.5), 2.5em 0em 0 0em rgba($spinner-color, 0.7), 1.75em 1.75em 0 0em $spinner-color, 0em 2.5em 0 0em rgba($spinner-color, 0.2), -1.8em 1.8em 0 0em rgba($spinner-color, 0.2), -2.6em 0em 0 0em rgba($spinner-color, 0.2), -1.8em -1.8em 0 0em rgba($spinner-color, 0.2);
+    }
+    50% {
+      box-shadow: 0em -2.6em 0em 0em rgba($spinner-color, 0.2), 1.8em -1.8em 0 0em rgba($spinner-color, 0.2), 2.5em 0em 0 0em rgba($spinner-color, 0.5), 1.75em 1.75em 0 0em rgba($spinner-color, 0.7), 0em 2.5em 0 0em $spinner-color, -1.8em 1.8em 0 0em rgba($spinner-color, 0.2), -2.6em 0em 0 0em rgba($spinner-color, 0.2), -1.8em -1.8em 0 0em rgba($spinner-color, 0.2);
+    }
+    62.5% {
+      box-shadow: 0em -2.6em 0em 0em rgba($spinner-color, 0.2), 1.8em -1.8em 0 0em rgba($spinner-color, 0.2), 2.5em 0em 0 0em rgba($spinner-color, 0.2), 1.75em 1.75em 0 0em rgba($spinner-color, 0.5), 0em 2.5em 0 0em rgba($spinner-color, 0.7), -1.8em 1.8em 0 0em $spinner-color, -2.6em 0em 0 0em rgba($spinner-color, 0.2), -1.8em -1.8em 0 0em rgba($spinner-color, 0.2);
+    }
+    75% {
+      box-shadow: 0em -2.6em 0em 0em rgba($spinner-color, 0.2), 1.8em -1.8em 0 0em rgba($spinner-color, 0.2), 2.5em 0em 0 0em rgba($spinner-color, 0.2), 1.75em 1.75em 0 0em rgba($spinner-color, 0.2), 0em 2.5em 0 0em rgba($spinner-color, 0.5), -1.8em 1.8em 0 0em rgba($spinner-color, 0.7), -2.6em 0em 0 0em $spinner-color, -1.8em -1.8em 0 0em rgba($spinner-color, 0.2);
+    }
+    87.5% {
+      box-shadow: 0em -2.6em 0em 0em rgba($spinner-color, 0.2), 1.8em -1.8em 0 0em rgba($spinner-color, 0.2), 2.5em 0em 0 0em rgba($spinner-color, 0.2), 1.75em 1.75em 0 0em rgba($spinner-color, 0.2), 0em 2.5em 0 0em rgba($spinner-color, 0.2), -1.8em 1.8em 0 0em rgba($spinner-color, 0.5), -2.6em 0em 0 0em rgba($spinner-color, 0.7), -1.8em -1.8em 0 0em $spinner-color;
+    }
+  }
+  @keyframes spinner {
+    0%,
+    100% {
+      box-shadow: 0em -2.6em 0em 0em $spinner-color, 1.8em -1.8em 0 0em rgba($spinner-color, 0.2), 2.5em 0em 0 0em rgba($spinner-color, 0.2), 1.75em 1.75em 0 0em rgba($spinner-color, 0.2), 0em 2.5em 0 0em rgba($spinner-color, 0.2), -1.8em 1.8em 0 0em rgba($spinner-color, 0.2), -2.6em 0em 0 0em rgba($spinner-color, 0.5), -1.8em -1.8em 0 0em rgba($spinner-color, 0.7);
+    }
+    12.5% {
+      box-shadow: 0em -2.6em 0em 0em rgba($spinner-color, 0.7), 1.8em -1.8em 0 0em $spinner-color, 2.5em 0em 0 0em rgba($spinner-color, 0.2), 1.75em 1.75em 0 0em rgba($spinner-color, 0.2), 0em 2.5em 0 0em rgba($spinner-color, 0.2), -1.8em 1.8em 0 0em rgba($spinner-color, 0.2), -2.6em 0em 0 0em rgba($spinner-color, 0.2), -1.8em -1.8em 0 0em rgba($spinner-color, 0.5);
+    }
+    25% {
+      box-shadow: 0em -2.6em 0em 0em rgba($spinner-color, 0.5), 1.8em -1.8em 0 0em rgba($spinner-color, 0.7), 2.5em 0em 0 0em $spinner-color, 1.75em 1.75em 0 0em rgba($spinner-color, 0.2), 0em 2.5em 0 0em rgba($spinner-color, 0.2), -1.8em 1.8em 0 0em rgba($spinner-color, 0.2), -2.6em 0em 0 0em rgba($spinner-color, 0.2), -1.8em -1.8em 0 0em rgba($spinner-color, 0.2);
+    }
+    37.5% {
+      box-shadow: 0em -2.6em 0em 0em rgba($spinner-color, 0.2), 1.8em -1.8em 0 0em rgba($spinner-color, 0.5), 2.5em 0em 0 0em rgba($spinner-color, 0.7), 1.75em 1.75em 0 0em $spinner-color, 0em 2.5em 0 0em rgba($spinner-color, 0.2), -1.8em 1.8em 0 0em rgba($spinner-color, 0.2), -2.6em 0em 0 0em rgba($spinner-color, 0.2), -1.8em -1.8em 0 0em rgba($spinner-color, 0.2);
+    }
+    50% {
+      box-shadow: 0em -2.6em 0em 0em rgba($spinner-color, 0.2), 1.8em -1.8em 0 0em rgba($spinner-color, 0.2), 2.5em 0em 0 0em rgba($spinner-color, 0.5), 1.75em 1.75em 0 0em rgba($spinner-color, 0.7), 0em 2.5em 0 0em $spinner-color, -1.8em 1.8em 0 0em rgba($spinner-color, 0.2), -2.6em 0em 0 0em rgba($spinner-color, 0.2), -1.8em -1.8em 0 0em rgba($spinner-color, 0.2);
+    }
+    62.5% {
+      box-shadow: 0em -2.6em 0em 0em rgba($spinner-color, 0.2), 1.8em -1.8em 0 0em rgba($spinner-color, 0.2), 2.5em 0em 0 0em rgba($spinner-color, 0.2), 1.75em 1.75em 0 0em rgba($spinner-color, 0.5), 0em 2.5em 0 0em rgba($spinner-color, 0.7), -1.8em 1.8em 0 0em $spinner-color, -2.6em 0em 0 0em rgba($spinner-color, 0.2), -1.8em -1.8em 0 0em rgba($spinner-color, 0.2);
+    }
+    75% {
+      box-shadow: 0em -2.6em 0em 0em rgba($spinner-color, 0.2), 1.8em -1.8em 0 0em rgba($spinner-color, 0.2), 2.5em 0em 0 0em rgba($spinner-color, 0.2), 1.75em 1.75em 0 0em rgba($spinner-color, 0.2), 0em 2.5em 0 0em rgba($spinner-color, 0.5), -1.8em 1.8em 0 0em rgba($spinner-color, 0.7), -2.6em 0em 0 0em $spinner-color, -1.8em -1.8em 0 0em rgba($spinner-color, 0.2);
+    }
+    87.5% {
+      box-shadow: 0em -2.6em 0em 0em rgba($spinner-color, 0.2), 1.8em -1.8em 0 0em rgba($spinner-color, 0.2), 2.5em 0em 0 0em rgba($spinner-color, 0.2), 1.75em 1.75em 0 0em rgba($spinner-color, 0.2), 0em 2.5em 0 0em rgba($spinner-color, 0.2), -1.8em 1.8em 0 0em rgba($spinner-color, 0.5), -2.6em 0em 0 0em rgba($spinner-color, 0.7), -1.8em -1.8em 0 0em $spinner-color;
+    }
+  }
+  

package/dist/scss/elements/_table.scss

@@ -0,0 +1,283 @@
+
+@mixin responsive-table() {
+  display: block;
+  thead {
+    display: none;
+  }
+  tbody, tr {
+    display: block;
+  }
+  tr {
+    border-bottom: border($table-row-border);
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+  tr td, tr th {
+    display: block;
+    border: none !important;
+
+    &[data-title]:not([data-title=""]):before {
+      content: attr(data-title);
+      text-align: left;
+      display: block;
+      font-weight: font-weight($table-head-font-weight);
+    }
+  }
+
+  &.table--borderless tbody tr {
+    &:first-child {
+      border-top: border($table-row-border);
+    }
+    &:last-child {
+      border-bottom: border($table-row-border);
+    }
+    td:first-child, th:first-child {
+      padding-left: 16px;
+    }
+  }
+}
+.table {
+    margin: 0;
+    line-height: units($table-text-line-height, 'rem');
+    border: border($table-border);
+    width: calc(100% - 2px);
+    color: color($table-text-color);
+    font-size: font-size($table-font-size);
+    border-collapse: inherit;
+    border-spacing: 0;
+
+    &.table--compact {
+      th,td {
+        padding-top: calc(#{units(3)} - 1px);
+        padding-bottom: #{units(3)};
+      }
+
+      tbody tr:last-child th, tbody tr:last-child td {
+        padding-bottom: calc(#{units(3)} - 1px);
+      }
+
+    }
+
+    &.table--extracompact {
+      th,td, tr:last-child td, tr:last-child th {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+      
+    }
+
+    td, th {
+        padding: calc(#{units(4)} - 1px); //16px -1px (for the border)
+        padding-bottom: #{units(4)}; //16px -1px (for the border)
+        background-color: inherit;
+        border-right: border($table-cell-border);
+        vertical-align: top;
+        text-align: left;
+        border-bottom: border($table-row-border);
+
+        &:last-child{
+            border-right: none;
+        }
+      &.break-word{
+        word-break: break-all;
+      }
+      &.vertical-align-middle{
+        vertical-align: middle;
+      }
+      &.vertical-align-top{
+        vertical-align: top;
+      }
+      &.vertical-align-bottom{
+        vertical-align: bottom;
+      }
+    }
+
+    thead {
+        background-color: color($table-head-background-color);
+        th{
+            font-weight: font-weight($table-head-font-weight);
+            text-align: left;
+            border-bottom: border($table-row-border);
+            &.table-header-no-wrap{
+              white-space: nowrap;
+            }
+            button, .button{
+              width: auto;
+            }
+        }
+    }
+    tbody{
+      th{
+          font-weight: font-weight($table-head-font-weight);
+      }
+      tr {
+        background-color: transparent;
+        &:last-child{
+          td, th{
+            padding-bottom: calc(#{units(4)} - 1px);
+          }
+          & > td, & > th{
+              border-bottom: none;
+          }
+        }
+      }
+    }
+
+    //no border
+    &.table--borderless {
+        tr {
+            &:last-child{
+                border-bottom: border($table-row-border);
+            }
+        }
+        border: 0;
+        width: 100%;
+        td, th {
+          padding-left: #{units(4)}; //16px -1px (for the border)
+          padding-right: #{units(4)}; //16px -1px (for the border)
+        }
+        thead {
+            background-color: transparent;
+            th{
+                background-color: transparent;
+                border-top-color: transparent;
+                border-left: 0;
+                border-right: 0;
+                border-bottom: border($table-row-border);
+
+                &:first-child{
+                    padding-left: 0;
+                }
+                &:last-child{
+                    padding-right: 0;
+
+                }
+            }
+        }
+        tbody{
+            tr{
+                td, th {
+                    border-bottom: border($table-row-border);
+                    border-left: 0;
+                    border-right: 0;
+                    &:first-child{
+                        padding-left: 0;
+                    }
+                    &:last-child{
+                        padding-right: 0;
+                    }
+                }
+            }
+        }
+    }
+
+    //No call borders right (row arrear as one single line)
+    &.table--lines {
+        thead {
+            th{
+                border-right-color: transparent;
+            }
+        }
+
+        tbody{
+            td, th{
+                border-right: transparent;
+            }
+        }
+    }
+
+
+    //zebra lines
+    &.table--zebra {
+        thead {
+          th{
+              border-right-color: transparent;
+          }
+        }
+        tr:nth-child(even) {
+            background-color: color($table-row-even-background-color);
+        }
+
+        tbody{
+            td, th{
+                border-right: transparent;
+            }
+            
+          tr:nth-child(odd) {
+            background-color: color($table-row-odd-background-color);
+          }
+        }
+
+        &.table--borderless {
+            thead{
+                background-color: color($table-row-even-background-color);
+            }
+            td,th {
+                border-color: transparent;
+                &:first-child{
+                    border-left-color: transparent;
+                    border-right-color: transparent;
+                }
+                &:last-child{
+                    border-left-color: transparent;
+                    border-right-color: transparent;
+                }
+            }
+          tr:last-child th,
+          tr:last-child td{
+                border-bottom-color: transparent
+            }
+        }
+    }
+
+    @media screen {
+      //make row into a "card" on phone
+      &.table--responsive-headers {
+        @include media-breakpoint-down(sm) {
+          @include responsive-table();
+        }
+      }
+      
+      @each $breakpoint in map-keys($grid-breakpoints) {
+        @if $breakpoint != xs {
+          @include media-breakpoint-down($breakpoint) {
+            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+            &.table#{$infix}-responsive-headers{
+              @include responsive-table();
+            }
+          }
+        }
+      }
+    }
+}
+.table--selectable{
+  width: 100%;
+  tbody tr:hover{
+    background-color: color($table-selectable-hover-background-color);
+  }
+  &.table.table--zebra tr.table-row-selected:nth-child(even), &.table.table--zebra tr.table-row-selected:nth-child(even):hover,
+  .table-row-selected, .table-row-selected:hover{
+    background-color: color($table-selectable-selected-background-color);
+  }
+}
+
+.table-actions{
+  border-right: border($table-border);
+  border-bottom: border($table-border);
+  border-left: border($table-border);
+  overflow: hidden;
+  padding: #{units(4)} calc(#{units(4)} - 1px) calc(#{units(4)} - 1px) calc(#{units(4)} - 1px);
+
+  .table-selected-number{
+    margin-top: 0px;
+    &.no-selected{
+      color: color($table-selectable-help-text-color);
+    }
+  }
+  
+}
+.table--responsive-scroll{
+    overflow-x: auto;
+    min-height: .01%;
+}

package/dist/scss/elements/_tags.scss

@@ -0,0 +1,64 @@
+// Tags
+.tag{
+  appearance: none;
+  display: inline-block;
+  width: auto;
+  padding:0;
+  padding-left: units(3);
+  padding-right:units(3);
+  margin-right:units(3);
+  margin-bottom:units(3);
+  border-radius: $tag-border-radius;
+  border: none;
+  font-size: font-size($tag-font-size);
+  font-weight: font-weight($tag-font-weight);
+  color: color($tag-text-color);
+  background-color: color($tag-default-background-color);
+  @include font-smoothing;
+  line-height: units($tag-line-height, rem);
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  transition: all .2s ease-in-out;
+
+  &.tag-icon {
+    padding:0;
+    padding-left:units(3);
+  }
+
+  & + .tag {
+    margin-bottom: units(3);
+  }
+
+  &:hover,
+  &.tag-hover {
+    background-color: color($tag-hover-background-color);
+  }
+
+  &:active,
+  &.tag-active {
+    background-color: color($tag-active-background-color);
+  }
+
+  &.focus,
+  &:focus {
+    background-color: color($tag-focus-background-color);
+  }
+
+  &.focus,
+  &:focus {
+    @include focus();
+    position: relative;
+  }
+
+  .icon-svg {
+    float: right;
+    margin: 0px 0px 0px 5px;
+    fill: color($tag-icon-color);
+  }
+}
+
+.button-row {
+  display: flex;
+  margin: 2rem 0 1rem;
+}

package/dist/scss/elements/_toggle.scss

@@ -0,0 +1,113 @@
+/* hide the default checkbox */
+input[type='checkbox'].form-toggle {
+  @include sr-only();
+}
+
+input[type='checkbox'].form-toggle ~ .form-toggle-label {
+  position: relative;
+  display: inline-block;
+  min-height: 20px; /* required in case the label is empty */
+  padding-left: 68px;
+  line-height: 20px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  padding-top: 8px;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent
+}
+
+input[type='checkbox'].form-toggle ~ .form-toggle-label:before {
+  content: $toggle-text-off;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  bottom: 0;
+  border-radius: 50%;
+  background-color: color($toggle-button-background-color);
+  width: 29px;
+  height: 29px;
+  color: color('black');
+  font-size: font-size('2xs');
+  font-weight: font-weight("medium");
+  padding-top: 5px;
+  -webkit-transition: all 0.15s ease-out;
+  -moz-transition: all 0.15s ease-out;
+  -o-transition: all 0.15s ease-out;
+  transition: all 0.15s ease-out;
+  z-index: 10;
+  text-align: center;
+  box-shadow: shadow($toggle-shadow);
+}
+
+input[type='checkbox'].form-toggle:disabled ~ .form-toggle-label{
+  cursor: not-allowed;
+}
+input[type='checkbox'].form-toggle:disabled ~ .form-toggle-label:before,
+input[type='checkbox'].form-toggle:disabled ~ .form-toggle-label:hover:before,
+input[type='checkbox'].form-toggle:disabled ~ .form-toggle-label:active:before,
+input[type='checkbox'].form-toggle:checked:disabled ~ .form-toggle-label:before{
+  color: color($input-disabled-text-color);
+}
+input[type='checkbox'].form-toggle:disabled ~ .form-toggle-label:after,
+input[type='checkbox'].form-toggle:disabled ~ .form-toggle-label:hover:after,
+input[type='checkbox'].form-toggle:disabled ~ .form-toggle-label:active:after{
+  opacity:0.5;
+  background-color: color($input-disabled-text-color);
+}
+
+input[type='checkbox'].form-toggle:checked:disabled ~ .form-toggle-label:after,
+input[type='checkbox'].form-toggle:checked:disabled ~ .form-toggle-label:hover:after,
+input[type='checkbox'].form-toggle:checked:disabled ~ .form-toggle-label:active:after{
+  opacity:0.5;
+  background-color: color($toggle-button-on-default-background-color);
+}
+
+input[type='checkbox'].form-toggle ~ .form-toggle-label:after {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  bottom: 3px;
+  width: 56px;
+  height: 33px;
+  border-radius: 20px;
+  line-height: 1;
+  text-align: center;
+  background-color: color($toggle-default-background-color);
+  -webkit-transition: all 0.15s ease-out;
+  -moz-transition: all 0.15s ease-out;
+  -o-transition: all 0.15s ease-out;
+  transition: all 0.15s ease-out;
+}
+
+input[type='checkbox'].form-toggle ~ .form-toggle-label:hover:after{
+  background-color: color($toggle-hover-background-color);
+}
+
+input[type='checkbox'].form-toggle ~ .form-toggle-label:active:after{
+  background-color: color($toggle-active-background-color);
+}
+
+input[type='checkbox'].form-toggle:checked ~ .form-toggle-label:after {
+  background-color: color($toggle-button-on-default-background-color);
+}
+
+input[type='checkbox'].form-toggle:checked ~ .form-toggle-label:hover:after {
+  background-color: color($toggle-button-on-hover-background-color);
+}
+
+input[type='checkbox'].form-toggle:checked ~ .form-toggle-label:active:after {
+  background-color: color($toggle-button-on-active-background-color);
+}
+
+input[type='checkbox'].form-toggle:focus ~ .form-toggle-label:after {
+  @include focus();
+}
+
+/* checked state */
+input[type='checkbox'].form-toggle:checked ~ .form-toggle-label:before {
+  content: $toggle-text-on;
+  left: 26px;
+}