@erst-vg/dkfds-vite 8.0.1

package/src/stylesheets/core/mixins/_breakpoints.scss

@@ -0,0 +1,119 @@
+// Breakpoint viewport sizes and media queries.
+//
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+//
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+//
+// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
+
+// Name of the next breakpoint, or null for the last breakpoint.
+//
+//    >> breakpoint-next(sm)
+//    md
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    md
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+//    md
+@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+  $n: index($breakpoint-names, $name);
+  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+//
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    576px
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+  $min: map-get($breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+
+// Maximum breakpoint width. Null for the largest (last) breakpoint.
+// The maximum value is calculated as the minimum of the next one less 0.1.
+//
+//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    767px
+@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+  $next: breakpoint-next($name, $breakpoints);
+  @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
+// Useful for making responsive utilities.
+//
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    ""  (Returns a blank string)
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    "-sm"
+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($lower, $breakpoints);
+  $max: breakpoint-max($upper, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($lower) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($upper) {
+      @content;
+    }
+  }
+}
+
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  $max: breakpoint-max($name, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($name) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($name) {
+      @content;
+    }
+  }
+}

package/src/stylesheets/core/mixins/_grid-mixins.scss

@@ -0,0 +1,42 @@
+/// Grid system
+//
+// Generate semantic grid columns with these mixins.
+@use 'sass:math';
+
+@mixin grid-container() {
+  width: 100%;
+  padding-right: math.div($grid-gutter-width, 2);
+  padding-left: math.div($grid-gutter-width, 2);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+
+// For each breakpoint, define the maximum width of the container in a media query
+@mixin grid-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
+  @each $breakpoint, $container-max-width in $max-widths {
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      max-width: $container-max-width;
+    }
+  }
+}
+
+@mixin grid-row() {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: math.div($grid-gutter-width, -2);
+  margin-left: math.div($grid-gutter-width, -2);
+}
+
+@mixin grid-col($size, $columns: $grid-columns) {
+  flex: 0 0 percentage(math.div($size, $columns));
+  // Add a `max-width` to ensure content within each column does not blow out
+  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+  // do not appear to require this.
+  max-width: percentage(math.div($size, $columns));
+}
+
+@mixin grid-offset($size, $columns: $grid-columns) {
+  $num: math.div($size, $columns);
+  margin-left: if($num == 0, 0, percentage($num));
+}

package/src/stylesheets/core/mixins/_mixins.scss

@@ -0,0 +1,126 @@
+// Focus state mixin
+
+@mixin focus-outline {
+  outline: $theme-focus-width $theme-focus-style color($theme-focus-color);
+}
+@mixin focus-offset {
+  outline-offset: $theme-focus-offset;
+}
+
+@mixin focus {
+  @include focus-outline();
+  @include focus-offset();
+}
+
+// Screen reader only helper
+@mixin sr-only() {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  left: -999em;
+}
+
+// This "negates" the sr-only() helper; useful if
+// we want the default state of something to be
+// for screen readers only, but we want to force
+// it to show for sighted users under more specific
+// conditions.
+@mixin not-sr-only() {
+  position: static;
+}
+
+.sr-only {
+  @include sr-only();
+}
+
+// Unstyled list helper
+@mixin unstyled-list() {
+  margin: 0;
+  list-style-type: none;
+  padding-left: 0;
+
+  > li {
+    margin-bottom: 0;
+    margin-top: 0;
+    padding-left: 0;
+    &::before {
+      content: "" !important;
+      padding-right: 0 !important;
+    }
+  }
+}
+
+// nobullet list helper
+@mixin nobullet-list() {
+  list-style-type: none;
+  padding-left: 0;
+  > li {
+    padding-left: 0;
+    &::before {
+      content: "" !important;
+      padding-right: 0 !important;
+    }
+  }
+}
+// noindent list helper
+@mixin noindent-list() {
+  > li {
+    padding-left: calc(8px + 6px);
+    &::before {
+      left: 0px;
+    }
+  }
+}
+
+// Font smoothing mixin
+@mixin font-smoothing {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+
+/*
+----------------------------------------
+responsive-style
+----------------------------------------
+Sets styles within breakpoints
+----------------------------------------
+*/
+@mixin responsive-style($map, $style){
+  @if type-of($map) == 'map' {
+    @each $breakpoint, $value in $map{
+      @if $breakpoint == "default" {
+        @if $style == line-height{
+          #{$style}: units($value, 'rem');
+        }@else if $style == font-size{
+          #{$style}: font-size($value);
+        }@else{
+          #{$style}: $value;
+        }
+      } @else{
+        @include media-breakpoint-up($breakpoint) {
+          @if $style == line-height{
+            #{$style}: units($value, 'rem');
+          }@else if $style == font-size{
+            #{$style}: font-size($value);
+          }@else{
+            #{$style}: $value;
+          }
+        }
+      }
+    }
+  } @else{
+    @if $style == line-height{
+      #{$style}: units($map, 'rem');
+    }@else if $style == font-size{
+      #{$style}: font-size($map);
+    }@else{
+      #{$style}: $map;
+    }
+  }
+}

package/src/stylesheets/core/utilities/_background.scss

@@ -0,0 +1,15 @@
+//
+// Generates utility classes to control width in percent. 
+// Example: .w-percent-100 .w-percent-md-30
+//
+
+$backgroundcolors: (
+  normal: 'white',
+  alternative: 'gray-100',
+  modal: $modal-overlay-background-color
+) !default;
+
+
+@each $name, $color in $backgroundcolors { 
+  .bg-#{$name}         { background: color($color) !important; background-color: color($color) !important;}
+}

package/src/stylesheets/core/utilities/_display.scss

@@ -0,0 +1,26 @@
+//
+// Utilities for common `display` values
+//
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+      .d#{$infix}-none         { display: none !important; }
+      .d#{$infix}-inline-block { display: inline-block !important; }
+      .d#{$infix}-block        { display: block !important; }
+      .d#{$infix}-flex         { display: flex !important; }
+      .d#{$infix}-inline-flex  { display: inline-flex !important; }
+    }
+}
+
+@media print {
+  .d-print-none         { display: none !important; }
+  .d-print-inline       { display: inline !important; }
+  .d-print-inline-block { display: inline-block !important; }
+  .d-print-block        { display: block !important; }
+  .d-print-table        { display: table !important; }
+  .d-print-table-row    { display: table-row !important; }
+  .d-print-table-cell   { display: table-cell !important; }
+  .d-print-flex         { display: flex !important; }
+  .d-print-inline-flex  { display: inline-flex !important; }
+}

package/src/stylesheets/core/utilities/_flex.scss

@@ -0,0 +1,43 @@
+// Additional flex alignment options.
+// https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_flex.scss
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .flex#{$infix}-row            { flex-direction: row !important; }
+    .flex#{$infix}-column         { flex-direction: column !important; }
+    .flex#{$infix}-row-reverse    { flex-direction: row-reverse !important; }
+    .flex#{$infix}-column-reverse { flex-direction: column-reverse !important; }
+
+    .flex#{$infix}-wrap         { flex-wrap: wrap !important; }
+    .flex#{$infix}-nowrap       { flex-wrap: nowrap !important; }
+    .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }
+
+    .justify-content#{$infix}-start   { justify-content: flex-start !important; }
+    .justify-content#{$infix}-end     { justify-content: flex-end !important; }
+    .justify-content#{$infix}-center  { justify-content: center !important; }
+    .justify-content#{$infix}-between { justify-content: space-between !important; }
+    .justify-content#{$infix}-around  { justify-content: space-around !important; }
+
+    .align-items#{$infix}-start    { align-items: flex-start !important; }
+    .align-items#{$infix}-end      { align-items: flex-end !important; }
+    .align-items#{$infix}-center   { align-items: center !important; }
+    .align-items#{$infix}-baseline { align-items: baseline !important; }
+    .align-items#{$infix}-stretch  { align-items: stretch !important; }
+
+    .align-content#{$infix}-start   { align-content: flex-start !important; }
+    .align-content#{$infix}-end     { align-content: flex-end !important; }
+    .align-content#{$infix}-center  { align-content: center !important; }
+    .align-content#{$infix}-between { align-content: space-between !important; }
+    .align-content#{$infix}-around  { align-content: space-around !important; }
+    .align-content#{$infix}-stretch { align-content: stretch !important; }
+
+    .align-self#{$infix}-auto     { align-self: auto !important; }
+    .align-self#{$infix}-start    { align-self: flex-start !important; }
+    .align-self#{$infix}-end      { align-self: flex-end !important; }
+    .align-self#{$infix}-center   { align-self: center !important; }
+    .align-self#{$infix}-baseline { align-self: baseline !important; }
+    .align-self#{$infix}-stretch  { align-self: stretch !important; }
+  }
+}

package/src/stylesheets/core/utilities/_position.scss

@@ -0,0 +1,35 @@
+// Sass list not in variables since it's not intended for customization.
+$positions: static, relative, absolute, fixed, sticky;
+
+$zindex-sticky: 1020 !default;
+$zindex-fixed:  1030 !default;
+
+@each $position in $positions {
+  .position-#{$position} { position: $position !important; }
+}
+
+// Shorthand
+
+.fixed-top {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: $zindex-fixed;
+}
+
+.fixed-bottom {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $zindex-fixed;
+}
+
+.sticky-top {
+  @supports (position: sticky) {
+    position: sticky;
+    top: 0;
+    z-index: $zindex-sticky;
+  }
+}

package/src/stylesheets/core/utilities/_spacing.scss

@@ -0,0 +1,50 @@
+// Margin and padding utilities
+// https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_spacing.scss
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    @each $prop, $abbrev in (margin: m, padding: p) {
+      @each $size, $length in $spacers {
+
+        .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
+        .#{$abbrev}t#{$infix}-#{$size},
+        .#{$abbrev}y#{$infix}-#{$size} {
+          #{$prop}-top: $length !important;
+        }
+        .#{$abbrev}r#{$infix}-#{$size},
+        .#{$abbrev}x#{$infix}-#{$size} {
+          #{$prop}-right: $length !important;
+        }
+        .#{$abbrev}b#{$infix}-#{$size},
+        .#{$abbrev}y#{$infix}-#{$size} {
+          #{$prop}-bottom: $length !important;
+        }
+        .#{$abbrev}l#{$infix}-#{$size},
+        .#{$abbrev}x#{$infix}-#{$size} {
+          #{$prop}-left: $length !important;
+        }
+      }
+    }
+
+    // Some special margin utils
+    .m#{$infix}-auto { margin: auto !important; }
+    .mt#{$infix}-auto,
+    .my#{$infix}-auto {
+      margin-top: auto !important;
+    }
+    .mr#{$infix}-auto,
+    .mx#{$infix}-auto {
+      margin-right: auto !important;
+    }
+    .mb#{$infix}-auto,
+    .my#{$infix}-auto {
+      margin-bottom: auto !important;
+    }
+    .ml#{$infix}-auto,
+    .mx#{$infix}-auto {
+      margin-left: auto !important;
+    }
+  }
+}

package/src/stylesheets/core/utilities/_text-color.scss

@@ -0,0 +1,5 @@
+@mixin text-color($parent, $color) {
+  #{$parent} {
+    color: $color;
+  }
+}

package/src/stylesheets/core/utilities/_textalign.scss

@@ -0,0 +1,13 @@
+//
+// Generates utility classes to control text alignment
+// Example: .align-text-left .align-text-md-left
+//
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    .align-text#{$infix}-left        { text-align: left !important; }
+    .align-text#{$infix}-right       { text-align: right !important; }
+    .align-text#{$infix}-center      { text-align: center !important; }
+  }
+}

package/src/stylesheets/core/utilities/_width.scss

@@ -0,0 +1,26 @@
+//
+// Generates utility classes to control width in percent. 
+// Example: .w-percent-100 .w-percent-md-30
+//
+
+$percent-widths: (
+  10: 10%,
+  20: 20%,
+  30: 30%,
+  40: 40%,
+  50: 50%,
+  60: 60%,
+  70: 70%,
+  80: 80%,
+  90: 90%,
+  100: 100%,
+) !default;
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    @each $name, $size in $percent-widths { 
+      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+      .w-percent#{$infix}-#{$name}         { width: $size !important;}
+    }
+  }
+} 

package/src/stylesheets/dkfds-borgerdk.scss

@@ -0,0 +1,4 @@
+// borgerdk theme
+@import './lib/normalize';
+@import './themes/borgerdk'; 
+@import 'dkfds-base';

package/src/stylesheets/dkfds-virkdk.scss

@@ -0,0 +1,4 @@
+// virkdk theme
+@import './lib/normalize';
+@import './themes/virkdk';
+@import 'dkfds-base';

package/src/stylesheets/dkfds.scss

@@ -0,0 +1,4 @@
+// this is the neutral theme (so no virkdk or borgerdk specific stuff)
+
+@import './lib/normalize';
+@import 'dkfds-base';

package/src/stylesheets/elements/_badge.scss

@@ -0,0 +1,36 @@
+.badge{
+  padding:0;
+  padding-left: units(3);
+  padding-right:units(3);
+  border: none;
+  font-weight: font-weight($badge-font-weight);
+  color: color($badge-default-text-color);
+  background: color($badge-default-background-color);
+  @include font-smoothing;
+  text-align: center;
+  display: inline-block;
+  &.badge-large {
+    font-size: font-size($badge-large-font-size);
+    line-height: units($badge-large-line-height, 'rem');
+  }
+  &.badge-small {
+    font-size: font-size($badge-small-font-size);
+    line-height: units($badge-small-line-height, 'rem');
+  }
+  &.badge-info{
+    color: color($badge-info-text-color);
+    background-color: color($badge-info-background-color);
+  }
+  &.badge-success{
+    color: color($badge-success-text-color);
+    background-color: color($badge-success-background-color);
+  }
+  &.badge-warning{
+    color: color($badge-warning-text-color);
+    background-color: color($badge-warning-background-color);
+  }
+  &.badge-error{
+    color: color($badge-error-text-color);
+    background-color: color($badge-error-background-color);
+  }
+}