dso-toolkit 95.2.0 → 97.0.0

package/src/components/banner/banner.scss

@@ -1,175 +0,0 @@
-@use "../../variables/colors";
-@use "../../variables/media-query-breakpoints";
-@use "../../variables/units";
-
-@use "../../di";
-
-@use "banner.mixins" as banner-mixins;
-@use "banner.variables" as banner-variables;
-
-// HTML/CSS
-.dso-banner {
-  @include banner-mixins.root();
-  @include banner-mixins.children();
-
-  .dso-banner-inner {
-    margin-inline: auto;
-
-    @media (min-width: media-query-breakpoints.$screen-sm-min) {
-      inline-size: banner-variables.$banner-sm;
-    }
-
-    @media (min-width: media-query-breakpoints.$screen-md-min) {
-      inline-size: banner-variables.$banner-md;
-    }
-
-    @media (min-width: media-query-breakpoints.$screen-lg-min) {
-      inline-size: banner-variables.$banner-lg;
-    }
-  }
-
-  .dso-banner-inner::before {
-    content: "";
-    display: inline-block;
-    inset-inline-start: units.$u2;
-    position: absolute;
-    inset-block-start: 0;
-  }
-
-  &.dso-icon {
-    .dso-banner-inner {
-      @media screen and (min-width: #{media-query-breakpoints.$screen-xs-min}) {
-        padding-inline-start: banner-variables.$inline-start-padding;
-      }
-
-      @media screen and (max-width: #{media-query-breakpoints.$screen-xs-min - 0.99}) {
-        padding-block-start: banner-variables.$small-padding-block-start;
-
-        > .dso-rich-content {
-          padding-inline-end: 0;
-        }
-      }
-    }
-  }
-
-  &.alert-success {
-    @include banner-mixins.success();
-
-    &.dso-icon {
-      @include banner-mixins.with-icon("success");
-    }
-  }
-
-  &.alert-error {
-    @include banner-mixins.error();
-
-    &.dso-icon {
-      @include banner-mixins.with-icon("error");
-    }
-  }
-
-  &.alert-info {
-    @include banner-mixins.info();
-
-    &.dso-icon {
-      @include banner-mixins.with-icon("info-solid");
-    }
-  }
-
-  &.alert-warning {
-    @include banner-mixins.warning();
-
-    &.dso-icon {
-      @include banner-mixins.with-icon("warning");
-    }
-  }
-
-  a {
-    &.download {
-      @include di.variant("download-grijs90");
-    }
-
-    &.extern {
-      @include di.variant("external-link-grijs90");
-    }
-  }
-}
-
-// Web Component
-dso-banner {
-  @include banner-mixins.children();
-
-  .dso-banner-inner {
-    margin-inline: auto;
-
-    @media (min-width: media-query-breakpoints.$screen-sm-min) {
-      inline-size: banner-variables.$banner-sm;
-    }
-
-    @media (min-width: media-query-breakpoints.$screen-md-min) {
-      inline-size: banner-variables.$banner-md;
-    }
-
-    @media (min-width: media-query-breakpoints.$screen-lg-min) {
-      inline-size: banner-variables.$banner-lg;
-    }
-  }
-
-  .dso-banner-inner::before {
-    content: "";
-
-    position: absolute;
-    inset-inline-start: units.$u2;
-    inset-block-start: 0;
-
-    display: inline-block;
-  }
-
-  &[icon] {
-    .dso-banner-inner {
-      @media screen and (min-width: #{media-query-breakpoints.$screen-xs-min}) {
-        padding-inline-start: banner-variables.$inline-start-padding;
-      }
-
-      @media screen and (max-width: #{media-query-breakpoints.$screen-xs-min - 0.99}) {
-        padding-block-start: banner-variables.$small-padding-block-start;
-
-        > .dso-rich-content {
-          padding-inline-end: 0;
-        }
-      }
-    }
-  }
-
-  &[status="success"] {
-    @include banner-mixins.success();
-
-    &[icon] {
-      @include banner-mixins.with-icon("success");
-    }
-  }
-
-  &[status="error"] {
-    @include banner-mixins.error();
-
-    &[icon] {
-      @include banner-mixins.with-icon("error");
-    }
-  }
-
-  &[status="info"] {
-    @include banner-mixins.info();
-
-    &[icon] {
-      @include banner-mixins.with-icon("info-solid");
-    }
-  }
-
-  &[status="warning"] {
-    @include banner-mixins.warning();
-
-    &[icon] {
-      @include banner-mixins.with-icon("warning");
-    }
-  }
-}

package/src/components/banner/banner.variables.scss

@@ -1,22 +0,0 @@
-@use "../../variables/units";
-@use "../../variables/states";
-
-$inline-start-padding: units.$u6;
-
-$small-padding-block-start: units.$u5 - 1px;
-
-$warning-bg: states.$warning-bg;
-$warning-border: states.$warning-border;
-
-$error-bg: states.$error-bg;
-$error-border: states.$error-border;
-
-$success-bg: states.$success-bg;
-$success-border: states.$success-border;
-
-$info-bg: states.$info-bg;
-$info-border: states.$info-border;
-
-$banner-sm: auto; // Small screen / tablet
-$banner-md: 922px; // Medium screen / desktop
-$banner-lg: 1152px; // Large screen / wide desktop

package/src/components/card-container/_index.scss

@@ -1 +0,0 @@
-@forward "card-container.variables";

package/src/components/card-container/card-container.scss

@@ -1,13 +0,0 @@
-@use "../card-container";
-
-dso-card-container[mode="list"] {
-  > li {
-    border-block-start: card-container.$border-width solid card-container.$border-color;
-  }
-}
-
-dso-card-container[mode="grid"] {
-  dso-card {
-    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
-  }
-}

package/src/components/card-container/card-container.variables.scss

@@ -1 +0,0 @@
-@forward "../card-list/card-list.variables";

package/src/components/card-grid/card-grid.scss

@@ -1,25 +0,0 @@
-@use "../../variables/media-query-breakpoints";
-
-@use "../grid/grid.variables" as css-grid-variables;
-
-.dso-card-grid {
-  display: grid;
-  gap: css-grid-variables.$grid-gutter-width;
-  grid-auto-rows: 1fr;
-
-  .dso-card {
-    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
-  }
-
-  @media (max-width: media-query-breakpoints.$screen-sm-max) {
-    grid-template-columns: repeat(1, 1fr);
-  }
-
-  @media (min-width: media-query-breakpoints.$screen-md-min) and (max-width: media-query-breakpoints.$screen-md-max) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  @media (min-width: media-query-breakpoints.$screen-lg-min) {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}

package/src/components/card-list/_index.scss

@@ -1 +0,0 @@
-@forward "card-list.variables";

package/src/components/card-list/card-list.scss

@@ -1,16 +0,0 @@
-@use "../card-list";
-@use "../list";
-
-ul,
-ol {
-  &.dso-card-list {
-    @include list.unstyled();
-
-    border-block-end: card-list.$border-width solid card-list.$border-color;
-    margin-block-start: card-list.$border-width * -1;
-
-    > li {
-      border-block-start: card-list.$border-width solid card-list.$border-color;
-    }
-  }
-}

package/src/components/card-list/card-list.variables.scss

@@ -1,4 +0,0 @@
-@use "../../variables/colors";
-
-$border-color: colors.$grijs-20;
-$border-width: 1px;