@import "constants";
.AnalyticsNudge {
width: 100%;
min-height: $analyticsNudge-height;
background-color: $color-purple;
opacity: 0.98;
color: $color-gray-10;
padding: calc($spacing-unit / 2);
box-sizing: border-box;
position: fixed;
z-index: $z-analyticsNudge;
border: 1px solid $color-gray-50;
box-shadow: 0px 3px 10px 0px rgba($color-gray-20, $translucent-ish);
// by default, it's hidden
display: flex;
justify-content: space-between;
align-items: center;
top: -100%;
transition: top $animation-timing ease;
pre,
code {
font-weight: bold;
}
code {
display: inline;
}
&.is-visible {
top: 0;
}
}
.AnalyticsNudge-button {
align-content: center;
background-color: $color-gray-20;
color: $color-gray-lightest;
@include button-text;
border: 1px solid $color-gray-50;
padding: calc($spacing-unit / 3);
margin-left: calc($spacing-unit / 2);
min-width: $spacing-unit * 3;
}
.AnalyticsNudge-button:hover {
background-color: $color-gray-50;
cursor: pointer;
}
.opt-in {
color: $color-green;
}
.AnalyticsNudge-button + .AnalyticsNudge-button {
margin-left: calc($spacing-unit / 2);
}