fix(convert-components-sdc): fixes in announcement, accordion and bre…

…adcrumbs
emulsify-ds · Oct 23, 2024 · 1a77bab · 1a77bab
1 parent 7e27dcf
commit 1a77bab
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 60 deletions.
diff --git a/src/components/accordion/accordion.scss b/src/components/accordion/accordion.scss
@@ -32,6 +32,39 @@
   }
 }
 
+.button.accordion__toggle-all {
+  & {
+    display: flex;
+    gap: var(--spacing-lg);
+    align-items: center;
+    cursor: pointer;
+    padding: 0;
+    line-height: var(--line-height-tight);
+    font-weight: var(--font-weight-primary-regular);
+    text-transform: none;
+  }
+
+  .toggle-all__content {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+  }
+}
+
+.accordion-item__icon {
+  @include transition;
+
+  & {
+    height: var(--size-xl);
+    width: var(--size-xl);
+  }
+
+  [aria-expanded='true'] & {
+    transform: rotate(-180deg);
+    fill: var(--accordion-color-header);
+  }
+}
+
 .accordion-item__toggle {
   & {
     background: none;
@@ -50,10 +83,18 @@
 
   [data-accordion-expanded='true'] & {
     color: var(--accordion-color-header);
+
+    .accordion-item__icon {
+      fill: var(--accordion-color-header);
+    }
   }
 
   &:hover {
     color: var(--accordion-color-header-hover);
+
+    .accordion-item__icon {
+      fill: var(--accordion-color-header-hover);
+    }
   }
 
   .toggle__content {
@@ -64,31 +105,48 @@
   }
 }
 
-.button.accordion__toggle-all {
-  & {
-    display: flex;
-    gap: var(--spacing-lg);
-    align-items: center;
-    cursor: pointer;
-    padding: 0;
-    line-height: var(--line-height-tight);
-    font-weight: var(--font-weight-primary-regular);
-    text-transform: none;
+.accordion-item__heading {
+  font-size: var(--font-size-h4);
+  font-weight: normal;
+  display: flex;
+  color: var(--accordion-color-body);
+  margin: 0;
+
+  [data-accordion-expanded='true'] & {
+    color: var(--accordion-color-header);
+
+    .accordion-item__icon {
+      fill: var(--accordion-color-header);
+    }
   }
 
-  .toggle-all__content {
-    display: flex;
-    align-items: flex-end;
-    gap: var(--spacing-md);
+  &:hover {
+    color: var(--accordion-color-header-hover);
+
+    .accordion-item__icon {
+      fill: var(--accordion-color-header-hover);
+
+      [data-accordion-expanded='false'] & {
+        fill: var(--accordion-color-header);
+      }
+    }
   }
 }
 
 .button[data-button-style='clean'].accordion__toggle-all {
   color: var(--accordion-color-header-hover);
 
+  .accordion-item__icon {
+    fill: var(--accordion-color-header-hover);
+  }
+
   &:hover,
   &:focus {
     color: var(--accordion-color-header);
+
+    .accordion-item__icon {
+      fill: var(--accordion-color-header);
+    }
   }
 }
 
@@ -137,44 +195,6 @@
   }
 }
 
-.accordion-item__icon {
-  @include transition;
-
-  & {
-    height: var(--size-xl);
-    width: var(--size-xl);
-  }
-
-  [aria-expanded='true'] & {
-    transform: rotate(-180deg);
-    fill: var(--accordion-color-header);
-  }
-}
-
-.accordion-item__heading {
-  font-size: var(--font-size-h4);
-  font-weight: normal;
-  display: flex;
-  color: var(--accordion-color-body);
-  margin: 0;
-
-  [data-accordion-expanded='true'] & {
-    color: var(--accordion-color-header);
-  }
-
-  &:hover {
-    color: var(--accordion-color-header-hover);
-
-    .accordion-item__icon {
-      fill: var(--accordion-color-header-hover);
-
-      [data-accordion-expanded='false'] & {
-        fill: var(--accordion-color-header-hover);
-      }
-    }
-  }
-}
-
 .accordion-item__content {
   margin-inline: 0;
   max-width: 90ch;

diff --git a/src/components/announcement/announcement.scss b/src/components/announcement/announcement.scss
@@ -1,14 +1,23 @@
 @use '../../foundation/typography/typography' as *;
+@use '../../foundation/breakpoints/breakpoints' as *;
 
 .announcement {
   display: flex;
-  align-items: center;
-  column-gap: var(--spacing-xl);
+  flex-direction: column;
+  align-items: flex-start;
+  row-gap: var(--spacing-lg);
   padding: var(--spacing-xl);
+
+  @include breakpoint('medium') {
+    flex-direction: row;
+    column-gap: var(--spacing-xl);
+    align-items: center;
+  }
 }
 
 .announcement__icon {
   width: 3.5rem;
+  height: 3.5rem;
 }
 
 .announcement__content {

diff --git a/src/components/navigation/breadcrumbs/breadcrumbs.scss b/src/components/navigation/breadcrumbs/breadcrumbs.scss
@@ -22,18 +22,15 @@
   &:not(:last-child)::after {
     content: '/';
     margin-left: var(--spacing-md);
+    color: var(--breadcrumb-text-default);
+    font-size: var(--font-size-x-small);
   }
 }
 
 .breadcrumbs__wrapper {
   display: flex;
   position: relative;
   z-index: 1;
-
-  @include breakpoint('medium') {
-    margin-left: calc(var(--spacing-lg) * -1);
-    margin-bottom: 0;
-  }
 }
 
 .breadcrumbs {

diff --git a/src/layout/container/_container.scss b/src/layout/container/_container.scss
@@ -136,7 +136,7 @@
   &--with-bg {
     @include section-padding(2);
 
-    & {
+    &:not(:has(.breadcrumbs__wrapper)) {
       background-color: var(--color-primary-lighter);
     }
   }