src/modules/notifications/components/notification-bar/notification-bar.styles.less
@import (reference) '~assets/styles/shared';
.notificationBar {
background: @color-outcome-six;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
display: flex;
flex-direction: column;
left: 20%;
overflow: hidden;
padding: 1.25rem;
position: absolute;
right: 20%;
top: @top-bar-height; // have to be under core stats bar
z-index: 10;
@media @breakpoint-mobile {
left: 5%;
right: 5%;
top: 3rem;
}
@media @breakpoint-mobile-medium {
left: 0;
right: 0;
}
}
.notificationBar__row {
display: flex;
flex-direction: row;
}
.notificationBar_dismissIcon {
display: block;
margin-left: 15px;
}
.notificationBar_dismissIconImg {
height: 1.438rem;
width: 1.438rem;
}
.notificationBar_textContainer {
display: flex;
flex-direction: column;
flex-grow: 1;
max-width: 550px;
@media @breakpoint-mobile-medium {
margin-top: 10px;
}
}
.notificationBar_text {
color: @color-almostblack;
flex-grow: 1;
font-size: @font-size-small;
font-weight: 500;
max-width: 90%;
overflow-wrap: normal;
}
.notificationBar_learnMore {
color: @color-purple;
font-size: @font-size-small;
font-weight: 700;
margin-top: 10px;
text-decoration: underline;
}
.notificationBar_dismiss {
align-items: flex-end;
color: @color-almostblack;
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: flex-start;
}
.notificationBar_button {
&:extend(.button--transparent all);
font-size: @font-size-medium;
font-weight: 500;
height: 35px;
letter-spacing: 0.3px;
margin: 0;
min-height: 35px;
min-width: 9rem;
text-align: center;
text-transform: none;
&.disabled {
&:extend(.button--transparent--disabled);
background-color: transparent;
pointer-events: none;
}
}
.notificationBar_container {
align-items: center;
display: flex;
flex-grow: 1;
justify-content: center;
}
.notificationBar_containerView {
align-items: center;
display: flex;
flex-grow: 1;
@media @breakpoint-mobile-medium {
justify-content: flex-end;
margin-top: 20px;
}
}