@erst-vg/dkfds-vite 8.0.1

package/src/stylesheets/core/_print.scss

@@ -0,0 +1,187 @@
+@media print{
+  html{
+    font-family: Georgia, "Times New Roman", Serif;
+    font-size: 48%;
+  }
+  body{
+    display: block;
+    min-height: 0;
+  }
+  .page-container{
+    display: block;
+  }
+
+  fieldset{
+    page-break-before: avoid;
+    page-break-inside: auto;
+    display: block;
+    overflow: visible !important;
+  }
+  .form-group{
+    page-break-inside: avoid;
+  }
+  .form-label{
+    page-break-after: avoid;
+  }
+
+  // header
+  .header {
+    .logo, .portal-header .logo{
+      height: auto;
+      width: auto;
+    }
+
+    .portal-header{
+      overflow:hidden;
+
+      .portal-header-inner{
+        display: block;
+      }
+
+      .portal-info{
+        display: block;
+        float: right;
+      }
+    }
+
+    .solution-header{
+      .solution-header-inner{
+        display: block;
+        overflow: hidden;
+      }
+
+      .solution-heading{
+        display: inline-block;
+      }
+      .solution-info{
+        display: block;
+        float: right;
+        margin-left: 0;
+        text-align: right;
+
+        @include media-breakpoint-up(#{$nav-responsive-breakpoint}) {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  // footer
+  footer{
+    .footer{
+      margin-top: units(6);
+      padding-bottom: 0;
+      .inline-list > li{
+        display: inline-block;
+        + li{
+          margin-left: units(4);
+        }
+      }
+    }
+  }
+
+  // card
+  .card{
+    box-shadow: none;
+  }
+
+  // modal
+  body.modal-active{
+    @media print{
+      > header{
+        display: none
+      }
+      .page-container{
+        display: none;
+      }
+      > footer{
+        display: none;
+      }
+    }
+  }
+
+  body .modal {
+    .modal__overlay {
+      display: block;
+      position: relative;
+      background-color: transparent;
+    }
+    .bg-modal{
+      background-color: transparent !important;
+      background: transparent !important;
+    }
+
+    .modal__header {
+      display: block;
+    }
+
+    .modal__footer{
+      @include media-breakpoint-up(lg) {
+        display: block;
+      }
+    }
+  }
+
+  // table
+  .table.table--responsive-headers:not(.d-print-table),
+  .table.table-sm-responsive-headers:not(.d-print-table),
+  .table.table-md-responsive-headers:not(.d-print-table),
+  .table.table-lg-responsive-headers:not(.d-print-table),
+  .table.table-xl-responsive-headers:not(.d-print-table) {
+    @include media-breakpoint-down(sm) {
+      display: block;
+
+      thead {
+        display: none;
+      }
+      tr {
+        border-bottom: border(20);
+        &: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("semibold");
+        }
+      }
+
+      &.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;
+        }
+      }
+    }
+  }
+
+  .form-radio.radio-large:checked + label:after{
+    border: units(3) solid color('black');
+  }
+  .form-radio:checked + label:after{
+    border: units(2) solid color('black');
+  }
+
+  .form-checkbox:checked + label{
+    &:before{
+      background-color: transparent;
+      border: 10px solid color('black');
+    }
+  }
+  .form-checkbox.checkbox-large:checked + label{
+    &:before{
+      border: units(4) solid color('black');
+    }
+  }
+}

package/src/stylesheets/core/_properties.scss

@@ -0,0 +1,145 @@
+//----------------
+// Borders
+// ----------------
+$system-border: (
+  border: (
+    10: (
+      'width': 1px,
+      'style': solid,
+      'color': 'gray-500'
+    ),
+    20: (
+      'width': 1px,
+      'style': solid,
+      'color': 'gray-300'
+    ),
+    30: (
+      'width': 1px,
+      'style': solid,
+      'color': 'gray-200'
+    )
+  )
+);
+
+
+//----------------
+// Font size
+// ----------------
+$system-font-size: (
+  font-size: (
+    "2xs": $typography-font-size-2xs,
+    "xs": $typography-font-size-xs,
+    "sm": $typography-font-size-sm,
+    "md": $typography-font-size-md,
+    "lg": $typography-font-size-lg,
+    "xl": $typography-font-size-xl,
+    "2xl": $typography-font-size-2xl,
+    "3xl": $typography-font-size-3xl,
+    "4xl": $typography-font-size-4xl,
+    "5xl": $typography-font-size-5xl,
+    "6xl": $typography-font-size-6xl
+  )
+);
+$project-custom-font-size: () !default;
+
+//----------------
+// Font weight
+// ----------------
+$system-font-weight: (
+  font-weight: (
+    "thin": $typography-font-weight-thin,
+    "extralight": $typography-font-weight-extralight,
+    "light": $typography-font-weight-light,
+    "normal": $typography-font-weight-normal,
+    "medium": $typography-font-weight-medium,
+    "semibold": $typography-font-weight-semibold,
+    "bold": $typography-font-weight-bold,
+    "heavy": $typography-font-weight-heavy
+  )
+);
+
+//----------------
+// Shadow
+// ----------------
+$system-shadow: (
+  shadow: (
+    'light': (
+      'h-offset': 0,
+      'v-offset': 2px, 
+      'blur': 4px,
+      'spread': 0,
+      'color': $theme-color-shadow
+      ),
+    'medium': (
+      'h-offset': 0,
+      'v-offset': 4px, 
+      'blur': 8px,
+      'spread': 0,
+      'color': $theme-color-shadow
+    ),
+    'heavy': (
+      'h-offset': 0,
+      'v-offset': 8px, 
+      'blur': 16px,
+      'spread': 0,
+      'color': $theme-color-shadow)
+  )
+);
+
+//----------------
+// Grid
+// ----------------
+
+// Common grid breakpoints variables
+$grid-xs:                     0 !default;
+$grid-sm:                     576px !default;
+$grid-md:                     768px !default;
+$grid-lg:                     992px !default;
+$grid-xl:                     1200px !default;
+
+// Grid breakpoints..
+$grid-breakpoints: (
+  xs: $grid-xs,
+  sm: $grid-sm,
+  md: $grid-md,
+  lg: $grid-lg,
+  xl: $grid-xl
+) !default;
+
+// Define the maximum width of `.container` for different screen sizes.
+$container-max-widths: (
+  sm: 100%,
+  md: 100%,
+  lg: 100%,
+  xl: 1200px
+) !default;
+
+$grid-columns:                  12 !default;
+$grid-gutter-width:             32px !default; //16px on each side of the columns
+
+// Spacing helpers
+//
+// Mostly used to control spacing.
+// You can add more entries to the $spacers map, should you need more variation.
+// How to use: units(2); This will give 4px (8*0.5).
+
+$spacer: 8px !default;
+$spacers: (
+  0: 0,
+  1: ($spacer * .25),   //2px
+  2: ($spacer * .5),    //4px
+  3: $spacer,           //8px
+  305:($spacer * 1.5),  //12px
+  4: ($spacer * 2),     //16px
+  405: ($spacer * 2.5), //20px
+  5: ($spacer * 3),     //24px
+  505: ($spacer * 3.5), //28px
+  6: ($spacer * 4),     //32px
+  605: ($spacer * 4.5), //36px
+  7: ($spacer * 5),     //40px
+  705: ($spacer * 5.5), //44px
+  8: ($spacer * 6),     //48px
+  805: ($spacer * 6.5), //52px
+  9: ($spacer * 7),     //56px
+  905: ($spacer * 7.5), //60px
+) !default;