2020-11-10 06:21:04 +01:00
|
|
|
.nudge {
|
|
|
|
|
z-index: 3;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
2020-11-10 07:10:22 +01:00
|
|
|
top: 4rem;
|
2020-11-10 06:21:04 +01:00
|
|
|
white-space: normal;
|
|
|
|
|
overflow: visible;
|
|
|
|
|
padding: var(--spacing-m);
|
|
|
|
|
border-radius: var(--border-radius);
|
|
|
|
|
box-shadow: var(--card-box-shadow);
|
|
|
|
|
background-color: var(--color-secondary);
|
|
|
|
|
color: var(--color-white);
|
|
|
|
|
|
|
|
|
|
.button--close {
|
|
|
|
|
.icon {
|
|
|
|
|
stroke: var(--color-white);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-11-10 07:10:22 +01:00
|
|
|
@media (min-width: $breakpoint-small) {
|
|
|
|
|
top: calc(var(--height-button) + var(--spacing-s));
|
|
|
|
|
}
|
|
|
|
|
|
2020-11-10 06:21:04 +01:00
|
|
|
&::after {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
height: 1rem;
|
|
|
|
|
width: 1rem;
|
|
|
|
|
top: -0.5rem;
|
|
|
|
|
left: 3rem;
|
|
|
|
|
transform: rotate(45deg);
|
|
|
|
|
background-color: var(--color-secondary);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nudge__wrapper {
|
|
|
|
|
width: 10rem;
|
|
|
|
|
margin-right: var(--spacing-m);
|
|
|
|
|
|
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
|
|
|
width: 12.5rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
