Fix status bubbles (#2503)

- Status indicator bubbles now right-align;
This commit is contained in:
Charles Hacskaylo 2019-09-19 18:44:35 -07:00 committed by Andrew Henry
parent b189a887e6
commit 45164a2f68

View File

@ -107,19 +107,19 @@
.c-indicator__label { .c-indicator__label {
box-shadow: $colorIndicatorMenuBgShdw; box-shadow: $colorIndicatorMenuBgShdw;
transform: scale(1.0); transform: scale(1.0);
transition: transform 100ms ease-out 100ms; transition: all 100ms ease-out 100ms;
} }
} }
.c-indicator__label { .c-indicator__label {
transition: transform 250ms ease-in 200ms; transition: all 250ms ease-in 200ms;
background: $colorIndicatorMenuBg; background: $colorIndicatorMenuBg;
color: $colorIndicatorMenuFg; color: $colorIndicatorMenuFg;
border-radius: $controlCr; border-radius: $controlCr;
left: 0; right: 0;
top: 130%; top: 130%;
padding: $interiorMargin $interiorMargin; padding: $interiorMargin $interiorMargin;
position: absolute; position: absolute;
transform-origin: 10px 0; transform-origin: 90% 0;
transform: scale(0.0); transform: scale(0.0);
overflow: visible; overflow: visible;
z-index: 50; z-index: 50;
@ -130,6 +130,7 @@
display: block; display: block;
position: absolute; position: absolute;
bottom: 100%; bottom: 100%;
right: 8px;
@include triangle('up', $size: 4px, $ratio: 1, $color: $colorIndicatorMenuBg); @include triangle('up', $size: 4px, $ratio: 1, $color: $colorIndicatorMenuBg);
} }
} }