@erst-vg/dkfds-vite 8.0.1

package/src/stylesheets/elements/_inputs.scss

@@ -0,0 +1,589 @@
+@use 'sass:math';
+
+.form-group{
+  margin-top: units(5); //4
+  &:first-child{
+    margin-top: 0;
+  }
+}
+
+.form-group-radio{
+  margin-top: map-get($spacers, 3);
+  position: relative;
+}
+
+// Hint text
+.form-hint {
+  display: block;
+  color: color($form-hint-text-color);
+  font-size: font-size($form-hint-font-size);
+  line-height: units($form-hint-line-height, 'rem');
+  letter-spacing: $form-hint-letter-spacing;
+  font-weight: font-weight($form-hint-font-weight);
+}
+.form-label {
+  display: inline-block;
+  @include form-label-text();
+}
+
+////////////////////
+//** Text input **//
+////////////////////
+
+.form-input{
+  appearance: none;
+  border: border($input-border);
+  border-radius: $input-border-radius;
+  color: color($input-text-color); // standardize on firefox
+  display: block;
+  font-size: font-size($input-font-size);
+  line-height: units($input-line-height, 'rem');
+  padding: calc(8px - #{border-width($input-border)}) calc(16px - #{border-width($input-border)});
+  width: 100%;
+  max-width: 32rem;
+  margin-top: units(3);
+  text-align: left;
+  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    /* IE10+ CSS styles go here */
+    height: calc(#{units($input-line-height, 'rem')} + (8px * 2));
+  }
+
+  &:focus, &.focus{
+    @include focus();
+  }
+}
+
+table {
+  .form-input {
+    margin-top:0;
+  }
+}
+textarea.form-input{
+  height: auto;
+}
+textarea.no-resize{
+  resize: none;
+}
+
+.form-input-wrapper{
+  display:flex;
+  .form-input{
+    -webkit-box-flex: 0;
+    -ms-flex: 0 1 auto;
+    flex: 0 1 auto;
+    &:focus{
+      position: relative;
+      z-index: 1;
+    }
+  }
+  .form-input-prefix + .form-input, &.form-input-wrapper--prefix .form-input{
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  &.form-input-wrapper--suffix .form-input{
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .form-input-prefix, .form-input-suffix {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: font-weight("normal");
+    font-size: font-size($input-font-size);
+    line-height: units($input-line-height, 'rem');
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    display: inline-block;
+    min-width: 40px;
+    padding: calc(#{units(3)} - #{border-width($input-border)}) calc(#{units(3)} - #{border-width($input-border)});
+    margin-top: units(3);
+    border: border($input-border);
+    background-color: color($input-prefix-suffix-background-color);
+    text-align: center;
+    white-space: nowrap;
+    cursor: default;
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    
+  }
+  .form-input-suffix {
+    border-left: 0;
+    border-top-right-radius: $input-border-radius;
+    border-bottom-right-radius: $input-border-radius;
+  }
+  .form-input-prefix {
+    border-right: 0;
+    border-top-left-radius: $input-border-radius;
+    border-bottom-left-radius: $input-border-radius;
+  }
+}
+
+////////////////
+//** Select **//
+////////////////
+
+.form-select {
+  background-color: color($select-background-color);
+  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /%3E%3C/svg%3E");
+  background-position: calc(100% - 10px);
+  background-repeat: no-repeat;
+  border: border($select-border);
+  border-radius: $select-border-radius;
+  color: color($select-text-color);
+  display: block;
+  font-size: font-size($select-font-size);
+  line-height: units($select-line-height, 'rem');
+  height: calc(#{units($select-line-height, 'rem')} + (8px * 2));
+  max-width: 32rem;
+  width: 100%;
+  margin-top: units(3);
+  text-align: left;
+  padding: calc(8px - #{border-width($select-border)}) calc(16px - #{border-width($select-border)});
+  padding-right: 32px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  
+  &:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 color('black');
+  }
+
+  &:focus, &.focus{
+    @include focus();
+  }
+  &::-ms-expand {
+    display: none;
+  }
+
+  &:disabled {
+    background-color: color($input-disabled-background-color);
+    color: color($input-disabled-text-color);
+    cursor: not-allowed;
+  }
+  option {
+    @-moz-document url-prefix() {
+      font-family: Helvetica, Arial, sans-serif;
+    }
+  }
+
+}
+
+table {
+  .form-select {
+    margin-top:0;
+  }
+}
+
+//////////////////////
+//** Input states **//
+//////////////////////
+
+
+$input-top-bottom-padding-feedback: calc(8px - #{$input-border-width-feedback});
+$input-left-right-padding-feedback: calc(16px - #{$input-border-width-feedback});
+
+.form-group.form-error {
+  border-left: $form-group-error-border-width solid color($form-group-error-border-color);
+  padding-left: calc(#{units(4)} - 4px);
+
+  .form-input,
+  .form-select {
+    border: $input-border-width-feedback solid color($input-border-color-feedback-error);
+    padding: $input-top-bottom-padding-feedback $input-left-right-padding-feedback;
+  }
+
+}
+.form-error-message {
+  @include form-label-text();
+  display: block;
+  color: color('error');
+  margin-top: units(2);
+}
+
+.form-group.form-success {
+  .form-input,
+  .form-select {
+    border: $input-border-width-feedback solid color($input-border-color-feedback-success);
+    padding: $input-top-bottom-padding-feedback $input-left-right-padding-feedback;
+  }
+}
+
+input[type=text]:disabled, textarea:disabled{
+  background-color: color($input-disabled-background-color);
+  color: color($input-disabled-text-color);
+  cursor: not-allowed;
+}
+input[readonly][type=text]{
+  margin-top: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  height: auto;
+}
+input[readonly][type=text], textarea[readonly]{
+  background-color: transparent;
+  color: color($input-text-color);
+  border: none;
+  cursor: default;
+  padding: 0;
+}
+
+/////////////////////////////////
+// Custom checkboxes & radios
+/////////////////////////////////
+$checkbox-size: units($input-checkbox-radio-small-size);
+$radio-size: units($input-checkbox-radio-small-size);
+$checkbox-size-large: units($input-checkbox-radio-large-size);
+$checkbox-radio-line-height-large: 4.0rem;
+$radio-size-large: units($input-checkbox-radio-large-size);
+
+
+.form-checkbox{
+  // The actual input element is only visible to screen readers, because
+  // all visual styling is done via the label.
+  @include sr-only();
+}
+.form-radio {
+  position: absolute;
+  cursor: pointer;
+  position: absolute;
+  z-index: 1;
+  margin: 0;
+  opacity: 0;
+  left: 0px;
+  top: 3px;
+}
+
+.form-checkbox + label,
+.form-radio + label {
+  cursor: pointer;
+  font-weight: font-weight("normal");
+  line-height: units($typography-body-text-line-height, 'rem');
+  margin-bottom: 0;
+  display: inline-block;
+  outline: none;
+  color: color($input-text-color);
+  position: relative;
+  padding-left: calc(#{$checkbox-size} + 8px);
+  min-height: $checkbox-size;
+}
+
+.form-checkbox + label + .form-hint,
+.form-radio + label + .form-hint{
+  padding-left: calc(#{$checkbox-size} + 8px);
+}
+
+//Outline for checkbox and radio
+.form-checkbox + label::before,
+.form-radio + label::before {
+  content: '';
+  display: inline-block;
+  background: color('white');
+  border-radius: $input-checkbox-border-radius;
+  border: 2px solid color('black');
+  height: $checkbox-size;
+  line-height: units($typography-body-text-line-height, 'rem');
+  margin-right: units(3);
+  width: $checkbox-size;
+  position: absolute;
+  top: 3px;
+  left: 0;
+}
+//outline large
+.form-checkbox.checkbox-large + label {
+  padding-top: 8px;
+  padding-left: calc(#{$checkbox-size-large} + 8px);
+  padding-bottom: 8px;
+  min-height: $checkbox-size-large;
+
+  &:before{
+    height: $checkbox-size-large;
+    width: $checkbox-size-large;
+  }
+}
+
+.form-checkbox.checkbox-large + label + .form-hint{
+  padding-left: calc(#{$checkbox-size-large} + 8px);
+}
+
+//extra for radio outline
+.form-radio{
+  height: $radio-size;
+  width: $radio-size;
+
+  &.radio-large{
+    height: $radio-size-large;
+    width: $radio-size-large;
+  }
+}
+.form-radio + label::before {
+  border-radius: 100%;
+  height: $radio-size;
+  width: $radio-size;
+}
+.form-radio.radio-large + label{
+  padding-top: 8px;
+  padding-left: calc(#{$radio-size-large} + 8px);
+  padding-bottom: 8px;
+
+  &:before{
+    height: $radio-size-large;
+    width: $radio-size-large;
+  }
+}
+
+.form-radio.radio-large + label + .form-hint{
+  padding-left: calc(#{$radio-size-large} + 8px);
+}
+//checked checkbox
+.form-checkbox.checkbox-large{
+  width: $checkbox-size;
+  height: $checkbox-size;
+
+  &.checkbox-large{
+    width: $checkbox-size-large;
+    height: $checkbox-size-large;
+  }
+}
+
+.form-checkbox:checked + label{
+  &:before{
+    background-color: color('black');
+  }
+  &:after{
+    content: "";
+    height: 7px;
+    width: 12px;
+    position: absolute;
+    left: 4px;
+    top: 5px;
+    box-shadow: -2px 2px 0 0 #fff;
+    transform: rotate(-46deg);
+  }
+}
+//checkmark large
+.form-checkbox.checkbox-large{
+  width: 22px;
+  height: 22px;
+}
+.form-checkbox.checkbox-large:checked + label{
+  &:after{
+    height: 12px;
+    width: 20px;
+    left: 6px;
+    top: 6px;
+    box-shadow: -3px 3px 0 0 #fff;
+  }
+}
+
+//checked radio
+.form-radio:checked + label{
+  position: relative;
+  &:after{
+    content: "";
+    height: calc(#{$radio-size} - 10px);
+    width: calc(#{$radio-size} - 10px);
+    background-color: color('black');
+    position: absolute;
+    left: 5px;
+    top: 8px;
+    border-radius: 100%;
+  }
+}
+//checked radio large
+.form-radio.radio-large:checked + label{
+  &:after{
+    content: "";
+    height: calc(#{$radio-size-large} - 16px);
+    width: calc(#{$radio-size-large} - 16px);
+    left: 8px;
+    top: 11px;
+  }
+}
+
+//Disable
+.form-checkbox:disabled + label,
+.form-radio:disabled + label {
+  color: color($input-disabled-text-color);
+  cursor: not-allowed;
+  &:before{
+    border-color: color($input-disabled-text-color);
+    background-color: color($input-disabled-background-color);
+  }
+}
+
+//Disable checked
+.form-checkbox:checked[disabled] + label:before {
+  background-color: color('black');
+  border-color: color('black');
+  opacity:0.5;
+}
+
+//Disable checked
+.form-radio:checked[disabled] + label:before {
+  background-color: color('black');
+  border-color: color('black');
+  opacity:0.5;
+}
+
+
+// checkbox focus
+.form-checkbox:focus + label::before,
+.form-checkbox.focus + label::before{
+  @include focus();
+}
+.form-radio:focus + label::before,
+.form-radio.focus + label::before {
+  @include focus();
+}
+
+// checkbox mixed
+.form-checkbox[aria-checked="mixed"] + label{
+  &:before{
+    background-color: color('black');
+  }
+  &:after{
+    content: "";
+    height: 2px;
+    width: 8px;
+    left: 8px;
+    top: 10px;  
+    position: absolute;
+    box-shadow: -2px 2px 0 0 color('white');
+  }
+}
+.form-checkbox.checkbox-large[aria-checked="mixed"] + label{
+  
+  &:after{
+    width: 12px;
+    left: 13px;
+    top: 16px;
+    box-shadow: -3px 3px 0 0 color('white');
+  }
+}
+
+.checkbox-content, .radio-content{
+  padding-left: calc(#{map-get($spacers, $input-checkbox-radio-content-padding-left)} - #{map-get($spacers, $input-checkbox-radio-content-border-width)});
+  padding-top: map-get($spacers, $input-checkbox-radio-content-padding-top);
+  padding-bottom: units(5);
+	border-left: map-get($spacers, $input-checkbox-radio-content-border-width) solid color($input-checkbox-radio-content-border-color);
+  margin-left: math.div((map-get($spacers, $input-checkbox-radio-small-size) - map-get($spacers, $input-checkbox-radio-content-border-width)), 2);
+  margin-top: units(2);
+  margin-bottom: units(3);
+  
+  &-large{
+    padding-left: calc(#{map-get($spacers, $input-checkbox-radio-content-large-padding-left)} - #{map-get($spacers, $input-checkbox-radio-content-border-width)} - (#{map-get($spacers, $input-checkbox-radio-content-border-width)} / 2));
+    margin-left: math.div((map-get($spacers, $input-checkbox-radio-large-size) - map-get($spacers, $input-checkbox-radio-content-border-width)), 2);
+  }
+  &[aria-hidden="true"]{
+    display:none;
+  }
+}
+
+/////////////////////////
+// Range inputs
+/////////////////////////
+[type=range] {
+  appearance: none;
+  border: none;
+  padding-left: 0;
+  width: 100%;
+}
+
+[type=range]::-webkit-slider-runnable-track {
+  background: color($input-range-track-default-background-color);
+  border: border($input-range-track-default-border);
+  cursor: pointer;
+  height: 1.2rem;
+  width: 100%;
+}
+
+[type=range]::-moz-range-track {
+  background: color($input-range-track-default-background-color);
+  border: border($input-range-track-default-border);
+  cursor: pointer;
+  height: 1.2rem;
+  width: 100%;
+}
+
+[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  border: border($input-range-thumb-default-border);
+  height: 2.2rem;
+  border-radius: 1.5rem;
+  background: color($input-range-thumb-default-background-color);
+  cursor: pointer;
+  margin-top: -.65rem;
+  width: 2.2rem;
+}
+
+[type=range]::-moz-range-thumb {
+  background: color($input-range-thumb-default-background-color);
+  border: border($input-range-thumb-default-border);
+  border-radius: 1.5rem;
+  cursor: pointer;
+  height: 2.2rem;
+  width: 2.2rem;
+}
+
+/////////////////////////
+//Date input
+/////////////////////////
+.date-group {
+  display: flex;
+  align-items: flex-end;
+  label {
+    margin-top: 0;
+    font-weight: font-weight("normal");
+  }
+
+  input[type=number]::-webkit-inner-spin-button,
+  input[type=number]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  .form-group-day,
+  .form-group-month,
+  .form-group-year {
+    margin-right: units(4);
+    margin-top: 0;
+  }
+
+  .form-group-day,
+  .form-group-month{
+    width: calc(2px + #{units(4)} + #{units(4)} + 2ch );
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      width: 6.4ex;
+    }
+  }
+
+  .form-group-year {
+    width: calc(2px + #{units(4)} + #{units(4)} + 4ch );
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      width: 9ex;
+    }
+  }
+
+  .button-open-calendar{
+    margin-bottom: 8px;
+    display: inline-flex;
+  }
+}
+
+input[type='number'] {
+  -moz-appearance:textfield !important;
+}
+//Below fix bug where date-inputs to number-wheels in chrome.
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none !important;
+}
+
+.form-label + input[type=file]{
+  margin-top: units(3);
+}
+
+input[type=file]{
+  display: block;
+}

package/src/stylesheets/elements/_list.scss

@@ -0,0 +1,83 @@
+
+ //Ul lists
+
+ ul {
+   padding-left: 0;
+   list-style-type: none;
+   color: color($typography-body-text-color);
+   font-size: font-size($typography-body-text-font-size);
+   line-height: units($typography-body-text-line-height, 'rem');
+   > li {
+     margin-top:units(3);
+     list-style-type: none;
+     position: relative;
+     padding-left: units(4);
+     line-height: units($typography-body-text-line-height, 'rem');
+     &::before {
+       content: "\2022";
+       position: absolute;
+       left: 0px;
+       top: -1px;
+       font-size: font-size('lg');
+     }
+   }
+ }
+//Ol lists
+ol {
+  padding-left: units(505);
+  li{
+    margin-top: units(3);
+    line-height: units(5, 'rem');
+  }
+}
+
+.article{
+  ul > li, ol > li{
+    font-size: font-size($typography-article-font-size);
+    line-height: units($typography-article-line-height, 'rem');
+    letter-spacing: $typography-article-letter-spacing;
+  }
+}
+
+// Unstyled lists
+.unstyled-list {
+  @include unstyled-list;
+}
+
+.bordered-list{
+  @include unstyled-list;
+  border-top: border(20);
+  li{
+    padding: units(3) 0px;
+    border-bottom: border(20);
+  }
+}
+
+ // No bullet lists
+ .nobullet-list {
+   @include nobullet-list;
+ }
+
+ // No indententation list
+ .noindent-list {
+   @include noindent-list;
+ }
+
+
+.inline-list {
+  @include unstyled-list;
+  > li {
+    display: block;
+
+    @include media-breakpoint-up(md) {
+      display: inline-block;
+    }
+  }
+
+  li + li{
+    margin-top: units(305);
+    @include media-breakpoint-up(md) {
+      margin-top: 0;
+    }
+  }
+}

package/src/stylesheets/elements/_page.scss

@@ -0,0 +1,34 @@
+.page-header{
+
+}
+.page-content{
+
+}
+.page-footer{
+
+}
+
+
+.page-header + .page-content{
+    margin-top: 40px;
+}
+.page-content + .page-footer{
+    margin-top: 40px;
+}
+
+.page-container{
+    padding-top: units(5, 'rem');
+    @include media-breakpoint-up(md) {
+        padding-top: units(7, 'rem');
+    }
+}
+
+//sticky footer
+body {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+}
+.page-container {
+    flex: 1 0 auto;
+}

package/src/stylesheets/elements/_section.scss

@@ -0,0 +1,3 @@
+.section + .section{
+    margin-top: units(5)
+}