Skip to content

Commit

Permalink
fix(accordion): arrow alignment (#571)
Browse files Browse the repository at this point in the history
fix: arrow alignment
  • Loading branch information
mfranzke authored Sep 13, 2023
1 parent 3ed719a commit 2e198a3
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 9 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@import "../../00-base/icons/icons.variables";
@import "../../00-base/icons/icons.helpers";

$accordion---paddingLeft: 46 !default;
$accordion---paddingLeft: $db-spacing-m !default;
$accordion---paddingRight: to-rem(
$pxValue: 16
) !default;
23 changes: 15 additions & 8 deletions source/_patterns/02-components/accordion/accordion.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,16 @@
padding-right: $accordion---paddingRight;

summary {
@include icon(glyph(chevron-right), 24, "outline", $partial: $partial);
@include icon(
glyph(expand-more),
24,
"outline",
"after",
$partial: $partial
);
align-items: center;
display: flex;
justify-content: space-between;

padding-block: $db-spacing-sm;
// Negating the padding left for moving the element into that direction with the same measures
Expand All @@ -29,9 +36,9 @@
}

// Icon horizontal space
&::before {
--icon-margin-after: #{to-rem($pxValue: 8)};
margin-left: #{to-rem($pxValue: 14)};
&::after {
--icon-margin-before: #{to-rem($pxValue: 8)};
margin-right: #{to-rem($pxValue: 14)};
}

& + p {
Expand All @@ -40,7 +47,7 @@
}
// TODO: This might get simplified in the future with @nest
&[open] > summary {
&::before {
&::after {
content: glyph(expand-less);
}
}
Expand All @@ -56,7 +63,7 @@
font-weight: 700;
height: to-rem($pxValue: 56);

&::before {
&::after {
--icon-font-size: #{to-rem($pxValue: 32)};
}
}
Expand All @@ -78,7 +85,7 @@
// ToDo: This needs to get replaced by the correct variable
padding-block: 0.59375rem;

&::before {
&::after {
--icon-font-size: #{to-rem($pxValue: 20)};
--icon-margin-after: #{to-rem($pxValue: 6)};
margin-left: #{to-rem($pxValue: 6)};
Expand All @@ -96,7 +103,7 @@
font-size: to-rem($pxValue: 20);
padding-block: $db-spacing-m;

&::before {
&::after {
--icon-font-size: #{to-rem($pxValue: 32)};
}
}
Expand Down

0 comments on commit 2e198a3

Please sign in to comment.