@erst-vg/dkfds-vite 8.0.1

package/src/stylesheets/elements/_buttons.scss

@@ -0,0 +1,280 @@
+// Buttons
+
+a.button{
+  padding: units(3) calc(#{units(4)} - #{$button-border-width}) calc(#{units(3)} - #{$button-border-width});
+  line-height: units($button-line-height, 'rem');
+}
+.button{
+  appearance: none;
+  display: inline-block;
+  width: 100%;
+  max-height: units(7);
+  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;
+  border-color: color($button-primary-default-border-color);
+  font-size: font-size('md');
+  font-weight: font-weight("medium");
+  color: color($button-primary-default-color);
+  @include font-smoothing;
+  line-height: units($button-line-height, 'rem');
+  text-align: center;
+  justify-content: center;
+  text-decoration: none;
+  user-select: text;
+  cursor: pointer;
+  & + button{
+    margin-top: units(3);
+  }
+
+  @include media-breakpoint-up(sm) {
+    width: auto;
+    & + button{
+      margin-top: 0;
+    }
+  }
+
+  &.focus,
+  &:focus {
+    @include focus();
+    color: color($button-primary-focus-color);
+  }
+
+  //############ Primary ###############
+  &.button-primary {
+    color: color($button-primary-default-color);
+    background-color: color($button-primary-default-background-color);
+    border-color: color($button-primary-default-border-color);
+
+    &:hover,
+    &.button-hover {
+      background-color: color($button-primary-hover-background-color);
+      border-color: color($button-primary-hover-border-color);
+    }
+
+    &.focus,
+    &:focus {
+      background-color: color($button-primary-focus-background-color);
+      border-color: color($button-primary-focus-border-color);
+    }
+
+    &:active,
+    &.button-active {
+      background-color: color($button-primary-active-background-color);
+      border-color: color($button-primary-active-border-color);
+    }
+
+    &:disabled,
+    &.disabled {
+      opacity: $button-disabled-opacity;
+      box-shadow: none !important;
+      cursor: not-allowed;
+
+      &:hover {
+        color: color($button-primary-hover-color) !important;
+        background-color: color($button-primary-default-background-color) !important;
+        border-color: color($button-primary-default-border-color) !important;
+        opacity:$button-disabled-opacity !important;
+        box-shadow: none !important;
+      }
+    }
+  }
+
+  //############ Secondary ##############
+  &.button-secondary {
+    color: color($button-secondary-default-color);
+    background-color: color($button-secondary-default-background-color);
+    border-color: color($button-secondary-default-border-color);
+
+    &:hover,
+    &.button-hover {
+      color: color($button-secondary-hover-color);
+      background-color: color($button-secondary-hover-background-color);
+      border-color: color($button-secondary-hover-border-color);
+    }
+
+    &.focus,
+    &:focus {
+      color: color($button-secondary-focus-color);
+      background-color: color($button-secondary-focus-background-color);
+      border-color: color($button-secondary-focus-border-color);
+    }
+
+    &:active,
+    &.button-active {
+      color: color($button-secondary-active-color);
+      background-color: color($button-secondary-active-background-color);
+      border-color: color($button-secondary-active-border-color);
+    }
+
+    &:disabled,
+    &.disabled {
+      opacity:$button-disabled-opacity;
+      box-shadow: none !important;
+      cursor: not-allowed;
+      border-color: color($button-secondary-disabled-border-color) !important;
+
+      &:hover {
+        color: color($button-secondary-default-color) !important;
+        background-color: color($button-secondary-default-background-color) !important;
+        border-color: color($button-secondary-disabled-border-color) !important;
+        opacity:$button-disabled-opacity !important;
+        box-shadow: none !important;
+      }
+    }
+  }
+
+  //############### tertiary ############
+  &.button-tertiary {
+    border-color: color($button-tertiary-default-border-color);
+    background-color: color($button-tertiary-default-background-color);
+    color: color($button-tertiary-default-color);
+    font-weight: font-weight("normal");
+
+    &:hover,
+    &.button-hover {
+      border-color: color($button-tertiary-hover-border-color);
+      background-color: color($button-tertiary-hover-background-color);
+      color: color($button-tertiary-hover-color);
+    }
+
+    &.focus,
+    &:focus {
+      border-color: color($button-tertiary-focus-border-color);
+      background-color: color($button-tertiary-focus-background-color);
+      color: color($button-tertiary-focus-color);
+    }
+
+    &:active,
+    &.button-active {
+      border-color: color($button-tertiary-active-border-color);
+      background-color: color($button-tertiary-active-background-color);
+      color: color($button-tertiary-active-color);
+    }
+
+    &:disabled,
+    &.disabled {
+      opacity:$button-disabled-opacity;
+      box-shadow: none !important;
+      cursor: not-allowed;
+
+      &:hover {
+        border-color: color($button-tertiary-default-background-color) !important;
+        background-color: color($button-tertiary-default-background-color) !important;
+        color: color($button-tertiary-default-color);
+        font-weight: font-weight("normal") !important;
+        opacity:$button-disabled-opacity;
+        box-shadow: none !important;
+      }
+    }
+  }
+
+  //############ Button quaternary - button styled as a link #################
+  &.button-quaternary {
+    color: color($button-quaternary-default-color);
+    background-color: color($button-quaternary-default-background-color);
+    border-color: transparent;
+    text-decoration: none;
+    font-weight: font-weight("normal");
+    padding-left: calc(8px - #{$button-border-width});
+
+    &:hover,
+    &.button-hover {
+      background-color: color($button-quaternary-hover-background-color);
+      box-shadow:none;
+      border-bottom-color: transparent;
+    }
+
+    &.focus,
+    &:focus {
+      color: color($button-quaternary-default-color);
+      box-shadow:none;
+      border-bottom-color: transparent;
+      background-color: color($button-quaternary-focus-background-color);
+    }
+
+    &:active,
+    &.button-active {
+      background-color: color($button-quaternary-active-background-color);
+      box-shadow:none;
+      border-bottom-color: transparent;
+    }
+
+    &:disabled,
+    &.disabled {
+      opacity: $button-disabled-opacity;
+      box-shadow: none !important;
+      cursor: not-allowed;
+
+      &:hover {
+        color: color($button-quaternary-default-color) !important;
+        background-color: color($button-quaternary-default-background-color) !important;
+        font-weight: font-weight("normal") !important;
+        opacity: $button-disabled-opacity !important;
+        box-shadow: none !important;
+      }
+    }
+
+    .icon-svg{
+      margin-right: 0;
+      margin-bottom: -2px;
+      margin-top: -4px;
+    }
+  }
+
+  &.button-small {
+    padding: calc(#{units(1)}) calc(#{units(4)} - #{$button-border-width}) 0px;
+    font-size: font-size($typography-small-text-font-size);
+    min-height: 24px;
+  }
+
+  .icon-svg {
+    margin-right: 4px;
+    fill: currentColor;
+    margin-top: -0.2em;
+  }
+}
+
+@mixin button-unstyled {
+  background-color: transparent;
+  border: 0;
+  border-radius: 0;
+  font-weight: font-weight("normal");
+  margin: 0;
+  padding: 0;
+  text-align: left;
+  -webkit-font-smoothing: auto;
+  color: inherit;
+  min-height: auto;
+
+  &:hover, &:focus {
+    background-color: transparent;
+    color: inherit;
+  }
+}
+
+.button-unstyled {
+  @include button-unstyled;
+}
+
+.button + .button{
+  @include media-breakpoint-up(md) {
+    margin-left: 8px;
+    &:first-child{
+      margin-left: 0;
+    }
+  }
+}
+.button-column{
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  .button{
+    margin-top: 8px;
+    margin-left: 0;
+    &:first-child{
+      margin-top: 0;
+    }
+  }
+}

package/src/stylesheets/elements/_collapse.scss

@@ -0,0 +1,17 @@
+// deprecated
+.collapsed:not(.dataTable){
+    display: none;
+}
+.collapse-transition-collapse{
+    position: relative;
+    height: 0;
+    overflow: hidden;
+    transition: height .2s ease;
+}
+.collapse-transition-expand{
+    position: relative;
+    overflow: hidden;
+    transition: height .2s ease;
+}
+  
+      

package/src/stylesheets/elements/_embed.scss

@@ -0,0 +1,27 @@
+@use 'sass:math';
+$aspect-height: 9;
+$aspect-width: 16;
+
+@mixin embed-container ($height, $width) {
+  padding-bottom: percentage(math.div($height,$width));
+}
+
+.embed-container {
+  iframe,
+  object,
+  embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.embed-container {
+  @include embed-container($aspect-height, $aspect-width);
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  max-width: 100%;
+}

package/src/stylesheets/elements/_figure.scss

@@ -0,0 +1,7 @@
+img {
+  max-width: 100%;
+}
+figure{
+  margin-left: 0;
+  margin-right: 0;
+}

package/src/stylesheets/elements/_forms.scss

@@ -0,0 +1,93 @@
+fieldset {
+  position: relative;
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+fieldset ul{
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+fieldset + fieldset{
+  margin-top: units(5);
+}
+
+legend{
+  h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{
+    margin-bottom: 0px;
+  }
+}
+
+input, select, textarea {
+  //Input width with rem
+  &.input-width-xxs {
+    max-width: 8rem !important;
+    width: 100%;
+  }
+  &.input-width-xs {
+    max-width: 16rem !important;
+    width: 100%;
+  }
+  &.input-width-s {
+    max-width: 24rem !important;
+    width: 100%;
+  }
+  &.input-width-m {
+    max-width: 32rem !important;
+    width: 100%;
+  }
+  &.input-width-l {
+    max-width: 40rem !important;
+    width: 100%;
+  }
+  &.input-width-xl {
+    max-width: 48rem !important;
+    width: 100%;
+  }
+
+  //Input width with characters
+  &.input-char-4 {
+    max-width: calc(2px + 16px + 16px + 4ch);
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      max-width: 9ex;
+    }
+
+    &::-ms-clear {
+      display: none;
+    }
+    width: 100%;
+  }
+  &.input-char-8 {
+    max-width: calc(2px + 16px + 16px + 8ch);
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      max-width: 14ex;
+    }
+
+    &::-ms-clear {
+      display: none;
+    }
+    width: 100%;
+  }
+  &.input-char-11 {
+    max-width: calc(2px + 16px + 16px + 11ch);
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      max-width: 17ex;
+    }
+    &::-ms-clear {
+      display: none;
+    }
+    width: 100%;
+  }
+  &.input-char-27 {
+    max-width: calc(2px + 16px + 16px + 27ch);
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      max-width: 36ex;
+    }
+
+    &::-ms-clear {
+      display: none;
+    }
+    width: 100%;
+  }
+}

package/src/stylesheets/elements/_hr.scss

@@ -0,0 +1,5 @@
+hr{
+    border-top: border($hr-border); //inner border color
+    display: block;
+    border-bottom-width: 0;
+}

package/src/stylesheets/elements/_icons.scss

@@ -0,0 +1,204 @@
+$icons: (
+    "accessibility-new",
+    "account-circle",
+    "add-a-photo",
+    "add",
+    "agriculture",
+    "apps",
+    "arrow-back",
+    "arrow-downward",
+    "arrow-drop-down",
+    "arrow-drop-up",
+    "arrow-forward",
+    "arrow-left",
+    "arrow-right",
+    "arrow-upward",
+    "assessment",
+    "assignment",
+    "attach-file",
+    "bookmark-border",
+    "bookmarks",
+    "cached",
+    "calculator",
+    "card-account-details",
+    "card-text",
+    "chat",
+    "check-circle-white",
+    "check-circle",
+    "chevron-double-left",
+    "chevron-double-right",
+    "chevron-left",
+    "chevron-right",
+    "close",
+    "construction",
+    "contact-support",
+    "content-copy",
+    "coronavirus",
+    "create-new-folder",
+    "credit-card",
+    "database",
+    "delete",
+    "desktop-windows",
+    "domain",
+    "done",
+    "download-done",
+    "drive-eta",
+    "email",
+    "engineering",
+    "expand-less",
+    "expand-more-white",
+    "expand-more",
+    "face",
+    "feedback",
+    "file-download",
+    "file-excel",
+    "file-image",
+    "file-pdf",
+    "file-upload",
+    "file-word",
+    "first-page",
+    "flag",
+    "folder-open",
+    "folder",
+    "format-align-center",
+    "format-align-justify",
+    "format-align-left",
+    "format-align-right",
+    "format-bold",
+    "format-clear",
+    "format-color-fill",
+    "format-color-text",
+    "format-indent-decrease",
+    "format-indent-increase",
+    "format-italic",
+    "format-list-bulleted",
+    "format-list-checks",
+    "format-list-numbered",
+    "format-size",
+    "format-underlined",
+    "forum",
+    "forward",
+    "fullscreen-exit",
+    "fullscreen",
+    "grade-outline",
+    "grade",
+    "groups",
+    "headphones",
+    "help",
+    "highlight-off-white",
+    "highlight-off",
+    "home",
+    "hourglass-empty",
+    "how-to-reg",
+    "info-white",
+    "info",
+    "insert-drive-file",
+    "insert-invitation",
+    "language",
+    "laptop",
+    "last-page",
+    "link",
+    "list-alt",
+    "local-shipping",
+    "location-on",
+    "lock-open",
+    "lock",
+    "map",
+    "menu",
+    "mode",
+    "more-horiz",
+    "more-vert",
+    "mouse",
+    "note-add",
+    "notifications",
+    "open-in-new",
+    "open-with",
+    "outlined-flag",
+    "palette",
+    "payments",
+    "people-alt",
+    "person-add-alt-1",
+    "person-remove",
+    "person",
+    "phone-iphone",
+    "photo-camera",
+    "playlist-add-check",
+    "playlist-add",
+    "print",
+    "query-builder",
+    "refresh",
+    "remove",
+    "reply",
+    "report-problem",
+    "save",
+    "school",
+    "science",
+    "search",
+    "send",
+    "settings",
+    "share",
+    "shopping-cart",
+    "sort-ascending",
+    "sort-by-alpha",
+    "sort-default",
+    "sort-descending",
+    "sort-table-ascending",
+    "sort-table-descending",
+    "sort-table-none",
+    "sort",
+    "subdirectory-arrow-left",
+    "subdirectory-arrow-right",
+    "support-agent",
+    "text-format",
+    "trash-can",
+    "tune",
+    "vertical-split",
+    "videocam",
+    "view-headline",
+    "visibility-off",
+    "visibility",
+    "zoom-in",
+    "zoom-out"
+) !default;
+
+.icon{
+    height: units($typography-body-text-line-height, 'rem');
+    width: units($typography-body-text-line-height, 'rem');
+    background-repeat: no-repeat;
+    display: inline-block;
+    background-size: 100%;
+}
+.icon-svg {
+    height: units($typography-body-text-line-height, 'rem');
+    width: units($typography-body-text-line-height, 'rem');
+    vertical-align: middle;
+    &--inherit-color{
+        fill: currentColor; //svg inherit color
+    }
+    &:focus{
+      outline: none;
+    }
+}
+.inline-svg{
+  height: 1em;
+  width: 1em;
+}
+
+.icon-svg-large {
+    height: font-size($typography-display-1-heading-font-size);
+    width: font-size($typography-display-1-heading-font-size);
+    vertical-align: middle;
+    &--inherit-color{
+        fill: currentColor;
+    }
+}
+
+@each $icon in $icons {
+    .icon-#{$icon}:not(a) {
+        background-image: url($icons-folder-path+'/'+$icon+".svg");
+    }
+}
+
+.hide-base-svg{ //hide inline svgs
+    display: none;
+}