Commit 7371ab9b authored by Lyza Danger Gardner's avatar Lyza Danger Gardner Committed by Lyza Gardner

Unroll arrow styling into SASS

There is so much modification of the `menu-arrow` mixin that it's
not worthwhile abstracting it out (and we're moving away from mixins).
parent 5b73a9cf
@use '../mixins/molecules';
@use '../variables' as var; @use '../variables' as var;
$adder-transition-duration: 80ms; $adder-transition-duration: 80ms;
...@@ -44,7 +43,11 @@ $adder-transition-duration: 80ms; ...@@ -44,7 +43,11 @@ $adder-transition-duration: 80ms;
} }
.AdderToolbar__arrow { .AdderToolbar__arrow {
@include molecules.menu-arrow; position: absolute;
z-index: 2;
color: var.$color-border;
fill: var.$color-background;
// Horizontal centering, part 1 // Horizontal centering, part 1
left: 50%; left: 50%;
...@@ -54,12 +57,8 @@ $adder-transition-duration: 80ms; ...@@ -54,12 +57,8 @@ $adder-transition-duration: 80ms;
&--down { &--down {
// These transforms: // These transforms:
// 1) Reimplement the "down" variant of the menu-arrow mixin, // 1) Translate -50% (left) on the X axis to complete horizontal centering
// rotating the arrow pointer SVG. // 2) Translate up (Y) by 1px to eliminate a faint border line visible in Safari
// Having this here is necessary because all transforms for an element
// must be in a single rule, and we also need to:
// 2) Translate -50% (left) on the X axis to complete horizontal centering
// 3) Translate up (Y) by 1px to eliminate a faint border line visible in Safari
transform: rotateX(180deg) translateX(-50%) translateY(1px); transform: rotateX(180deg) translateX(-50%) translateY(1px);
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment