dso-toolkit 81.1.0 → 83.0.0

package/src/global/spacing.scss

@@ -27,6 +27,13 @@
   }
 }
 
+dso-accordion {
+  .dso-rich-content + dso-accordion,
+  dso-accordion + .dso-rich-content {
+    margin-block-start: units.$u2;
+  }
+}
+
 // TEMP fix for excessive whitespace within the accordion rich content
 // To do: a more permanent solution for vertical rhythm!
 .dso-accordion-section {
@@ -50,6 +57,16 @@
   }
 }
 
+dso-accordion-section {
+  *:first-child:not(.dso-info) {
+    margin-block-start: 0;
+  }
+
+  > *:last-child:not(.dso-info) {
+    margin-block-end: 0;
+  }
+}
+
 // #2440 temp fix
 // --------------
 // To do: integrate this with #2217 (103)

package/src/utilities.scss

@@ -47,9 +47,9 @@
   block-size: 1px;
   padding: 0;
   margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
   border: 0;
+  overflow: hidden;
+  clip-path: inset(0);
 }
 
 @mixin focus-outline($offset: units.$focus-outline-offset) {

package/src/components/accordion/_index.scss

@@ -1 +0,0 @@
-@forward "accordion.variables";

package/src/components/accordion/accordion-theme-compact.scss

@@ -1,161 +0,0 @@
-@use "../../variables/colors";
-@use "../../variables/units";
-@use "../../components/accordion";
-
-@use "../../di";
-
-@mixin compact() {
-  > .dso-accordion-section {
-    > .dso-section-handle {
-      border-block-end: 1px solid transparent;
-      border-block-start: 1px solid accordion.$compact-border-color;
-
-      a,
-      button {
-        color: accordion.$compact-color;
-        padding-inline-start: units.$u4;
-
-        &::before {
-          @include di.base("chevron-right-grasgroen");
-
-          // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-          & {
-            inset-inline-start: 0;
-          }
-        }
-
-        &:hover,
-        &:active,
-        &.active {
-          color: accordion.$compact-color;
-        }
-
-        .dso-status {
-          color: accordion.$compact-black-color;
-        }
-      }
-    }
-
-    &:last-child {
-      border-block-end: 1px solid accordion.$compact-border-color;
-    }
-
-    + .dso-accordion-section {
-      margin-block-start: 0;
-    }
-
-    > .dso-section-body {
-      margin-block-start: 0;
-      padding-inline-start: units.$u4;
-      padding-block-start: 0;
-      padding-inline-end: 0;
-      padding-block-end: units.$u1 * 1.5;
-    }
-
-    &.dso-open {
-      > .dso-section-handle {
-        background-color: transparent;
-
-        a,
-        button {
-          color: accordion.$compact-color;
-
-          &:hover,
-          &:active,
-          &.active {
-            color: accordion.$compact-color;
-          }
-
-          &::before {
-            @include di.variant("chevron-down-grasgroen");
-          }
-
-          dso-attachments-counter {
-            --dso-attachments-counter-color: #{colors.$grijs-60};
-            --dso-icon: var(--di-paperclip-grijs);
-          }
-
-          .dso-attachments {
-            color: colors.$grijs-60;
-
-            &::after {
-              @include di.variant("paperclip-grijs");
-            }
-          }
-        }
-      }
-
-      > .dso-section-body {
-        border-block-start: 0;
-      }
-
-      &.dso-nested-accordion {
-        > .dso-section-handle {
-          a,
-          button {
-            &::before {
-              @include di.base("chevron-down-grasgroen");
-            }
-          }
-        }
-
-        > .dso-section-body {
-          padding-block-end: 0;
-
-          .dso-accordion-section:last-child {
-            border-block-end: 0;
-          }
-        }
-      }
-    }
-  }
-
-  &.dso-accordion-reverse-align {
-    .dso-section-handle {
-      a,
-      button {
-        padding-inline: units.$u2 units.$u4;
-
-        &::before {
-          @include di.base("chevron-down-grasgroen");
-
-          // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-          & {
-            inset-inline-start: auto;
-          }
-        }
-      }
-    }
-
-    > .dso-accordion-section > .dso-section-body {
-      padding-inline-start: units.$u2;
-      padding-inline-end: 0;
-    }
-
-    .dso-accordion-section {
-      &.dso-open {
-        &:not(.dso-nested-accordion) {
-          > .dso-section-handle {
-            a,
-            button {
-              &::before {
-                @include di.base("chevron-up-grasgroen");
-              }
-            }
-          }
-        }
-
-        &.dso-nested-accordion {
-          > .dso-section-handle {
-            a,
-            button {
-              &::before {
-                @include di.variant("chevron-down-grasgroen");
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/src/components/accordion/accordion-theme-conclusion.scss

@@ -1,119 +0,0 @@
-@use "../../variables/colors";
-@use "../../components/accordion";
-
-@use "../../di";
-
-@mixin conclusion() {
-  &.dso-accordion-reverse-align {
-    .dso-section-handle {
-      a,
-      button {
-        &::before {
-          @include di.base("chevron-down-zwart");
-        }
-      }
-    }
-
-    .dso-accordion-section {
-      &.dso-open {
-        &:not(.dso-nested-accordion) {
-          > .dso-section-handle {
-            a,
-            button {
-              &::before {
-                @include di.base("chevron-up-zwart");
-              }
-            }
-          }
-        }
-
-        &.dso-nested-accordion {
-          > .dso-section-handle {
-            a,
-            button {
-              &::before {
-                @include di.variant("chevron-down-zwart");
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  > .dso-accordion-section {
-    > .dso-section-handle {
-      background-color: accordion.$conclusion-bgcolor;
-      border: 1px solid accordion.$conclusion-border-color;
-
-      a,
-      button {
-        color: accordion.$conclusion-color;
-
-        &::before {
-          @include di.base("chevron-right-zwart");
-        }
-
-        &:hover,
-        &:active,
-        &.active {
-          background-color: accordion.$conclusion-hover-bgcolor;
-        }
-      }
-    }
-
-    &.dso-open {
-      &:not(.dso-nested-accordion) {
-        > .dso-section-handle {
-          background-color: accordion.$conclusion-nested-handle-bgcolor;
-
-          a,
-          button {
-            color: accordion.$conclusion-color;
-
-            &::before {
-              @include di.base("chevron-down-zwart");
-            }
-          }
-        }
-      }
-
-      &.dso-nested-accordion {
-        background-color: accordion.$conclusion-nested-body-bgcolor;
-
-        > .dso-section-handle {
-          a,
-          button {
-            &::before {
-              @include di.base("chevron-down-zwart");
-            }
-          }
-        }
-      }
-    }
-
-    &:not(.dso-nested-accordion) {
-      > .dso-section-handle {
-        a,
-        button {
-          dso-attachments-counter {
-            --dso-attachments-counter-color: #{colors.$zwart};
-            --dso-icon: var(--di-paperclip-zwart);
-          }
-
-          .dso-attachments {
-            color: colors.$zwart;
-
-            &::after {
-              @include di.variant("paperclip-zwart");
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .dso-section-body {
-    border: 2px solid accordion.$conclusion-border-color;
-  }
-}

package/src/components/accordion/accordion-theme-default.scss

@@ -1,115 +0,0 @@
-@use "../../variables/colors";
-@use "../../components/accordion";
-
-@use "../../di";
-
-@mixin default() {
-  &.dso-accordion-reverse-align {
-    .dso-section-handle {
-      a,
-      button {
-        &::before {
-          @include di.base("chevron-down-mauve");
-        }
-      }
-    }
-
-    .dso-accordion-section {
-      &.dso-open {
-        &:not(.dso-nested-accordion) {
-          > .dso-section-handle {
-            a,
-            button {
-              &::before {
-                @include di.base("chevron-up-wit");
-              }
-            }
-          }
-        }
-
-        &.dso-nested-accordion {
-          > .dso-section-handle {
-            a,
-            button {
-              &::before {
-                @include di.variant("chevron-down-wit");
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .dso-section-handle {
-    background-color: colors.$wit;
-    border: 1px solid accordion.$default-border-color;
-    border-radius: accordion.$border-radius;
-
-    a,
-    button {
-      color: accordion.$default-color;
-
-      &::before {
-        @include di.base("chevron-right-mauve");
-      }
-
-      &:hover,
-      &:active,
-      &.active {
-        color: accordion.$default-color;
-      }
-
-      .dso-status {
-        text-decoration: underline;
-        color: colors.$zwart;
-      }
-    }
-  }
-
-  .dso-accordion-section {
-    &.dso-open {
-      > .dso-section-handle {
-        background-color: accordion.$default-nested-handle-bgcolor;
-        border-radius: 0;
-        border-start-start-radius: accordion.$border-radius;
-        border-start-end-radius: accordion.$border-radius;
-
-        a,
-        button {
-          color: colors.$wit;
-
-          &::before {
-            @include di.variant("chevron-down-wit");
-          }
-
-          dso-attachments-counter {
-            --dso-attachments-counter-color: #{colors.$wit};
-            --dso-icon: var(--di-paperclip-wit);
-          }
-
-          .dso-attachments {
-            color: colors.$wit;
-
-            &::after {
-              @include di.variant("paperclip-wit");
-            }
-          }
-
-          .dso-status {
-            color: colors.$wit;
-          }
-        }
-      }
-
-      &.dso-nested-accordion {
-        background-color: accordion.$default-nested-body-bgcolor;
-      }
-    }
-  }
-
-  .dso-section-body {
-    border: 1px solid accordion.$default-border-color;
-    border-radius: 0 0 accordion.$border-radius accordion.$border-radius;
-  }
-}