src/modules/forking/components/forking-notification/forking-notification.styles.less
@import (reference) '~assets/styles/shared';
.ForkingNotification__Container {
position: absolute;
right: 0;
width: 100%;
}
.ForkingNotification {
background: @color-clay-red;
height: 100%;
padding-left: 1rem;
section {
display: flex;
@media @breakpoint-mobile {
align-items: flex-start;
display: grid;
font-size: @font-size-small;
grid-auto-flow: column;
grid-auto-rows: auto;
grid-template-columns: [left] 1.125rem [right] 1fr;
grid-template-rows: 1fr auto;
height: @global-banner-height-mobile;
left: 0;
line-height: 1rem;
padding: 1rem 0.75rem;
> img {
align-items: flex-start;
grid-column: left;
grid-row: 1 / span 1000;
margin: 0;
}
> div:first-of-type {
align-items: flex-start;
grid-area: auto / right;
margin-left: 1.125rem;
margin-right: 0;
}
> div:last-of-type {
grid-area: auto / right;
justify-content: flex-start;
margin-left: 1.125rem;
margin-top: 0.25rem;
}
}
@media @breakpoint-mobile-small {
height: @global-banner-height-mobile-small;
}
}
}
.ForkingNotification__message {
color: white;
font-size: 0.875rem;
line-height: 2.65rem;
margin-left: 1.25rem;
text-transform: capitalize;
}
.ForkingNotification__AlertIcon {
height: 1.125rem;
margin-bottom: auto;
margin-top: auto;
width: 1.125rem;
}
.ForkingNotification__addition_details {
color: white;
display: flex;
flex: 1;
font-size: 0.75rem;
justify-content: flex-end;
text-transform: uppercase;
}
.ForkingNotification__addition_details_button {
margin-bottom: auto;
margin-right: 1.5rem;
margin-top: auto;
text-transform: uppercase;
}
.ForkingNotification__arrow {
margin-left: 1em;
}
@media @breakpoint-mobile {
.ForkingNotification {
padding: 0;
}
.ForkingNotification__SubContainer {
padding-left: 0;
}
.ForkingNotification__message {
color: white;
font-size: 0.7rem;
line-height: 1em;
margin: 0 2em;
padding: 0.25em;
text-transform: uppercase;
}
.ForkingNotification__addition_details_button {
font-weight: bold;
margin-bottom: auto;
margin-right: 0.5em;
margin-top: auto;
text-transform: uppercase;
}
}
@media @breakpoint-mobile-small {
.ForkingNotification__message {
margin: 0 0.5em;
padding: 0.05em;
}
}