overleaf/services/web/frontend/stylesheets/bootstrap-5/components/notifications.scss

260 lines
4.7 KiB
SCSS
Raw Normal View History

.notification-body {
// will be deprecated once notifications moved to use .notification (see below)
flex-grow: 1;
width: 90%;
@include media-breakpoint-up(md) {
width: auto;
}
}
.notification-action {
$line-height-computed: $font-size-base * $line-height-base; // 24px
// will be deprecated once notifications moved to use .notification (see below)
margin-top: calc($line-height-computed / 2); // match paragraph padding
order: 1;
@include media-breakpoint-up(md) {
margin-top: 0;
order: 0;
padding-left: $spacing-05;
}
}
.notification-close {
// will be deprecated once notifications moved to use .notification (see below)
padding-left: $spacing-05;
text-align: right;
width: 10%;
button {
aspect-ratio: 1;
border-radius: 50%;
display: flex;
float: right;
padding: 5.5px;
cursor: pointer;
background: transparent;
border: 0;
&:hover,
&:focus {
background-color: rgb(var(--neutral-90) 0.08);
color: var(--content-secondary);
}
}
@include media-breakpoint-up(md) {
width: auto;
}
}
.notification {
border-radius: $border-radius-base;
color: var(--content-primary);
display: flex;
padding: 0 $spacing-06; // vertical padding added by elements within notification
width: 100%;
a:not(.btn) {
text-decoration: underline;
}
p {
margin-bottom: $spacing-02;
}
.notification-icon {
flex-grow: 0;
padding: 18px $spacing-06 0 0;
}
.notification-content-and-cta {
// shared container to align cta with text on smaller screens
display: flex;
flex-grow: 1;
flex-wrap: wrap;
p:last-child {
margin-bottom: 0;
}
}
.notification-content {
flex-grow: 1;
padding: $spacing-06 0;
width: 100%;
}
.notification-cta {
padding-bottom: $spacing-06;
a {
font-weight: 700;
}
a,
button {
white-space: nowrap;
}
}
.notification-disclaimer {
color: var(--neutral-60);
font-size: $font-size-sm;
padding-bottom: $spacing-06;
}
.notification-close-btn {
height: $spacing-12;
align-items: center;
display: flex;
padding: 0 0 0 $spacing-06;
button {
aspect-ratio: 1;
border-radius: 50%;
display: flex;
float: right;
padding: 5.5px;
cursor: pointer;
background: transparent;
border: 0;
&:hover,
&:focus {
background-color: rgb(var(--neutral-90) 0.08);
color: var(--content-secondary);
}
}
}
&.notification-type-info {
background-color: var(--bg-info-03);
border: 1px solid var(--blue-20);
.notification-icon {
color: var(--blue-50);
}
}
&.notification-type-success {
background-color: var(--bg-accent-03);
border: 1px solid var(--green-20);
.notification-icon {
color: var(--green-50);
}
}
&.notification-type-warning {
background-color: var(--bg-warning-03);
border: 1px solid var(--yellow-20);
.notification-icon {
color: var(--yellow-40);
}
}
&.notification-type-error {
background-color: var(--bg-danger-03);
border: 1px solid var(--red-20);
.notification-icon {
color: var(--red-50);
}
}
&.notification-type-offer {
background-color: var(--bg-light-primary);
border: 1px solid var(--neutral-20);
.notification-icon {
color: var(--neutral-50);
}
}
@include media-breakpoint-up(md) {
&:not(.notification-cta-below-content) {
.notification-content-and-cta {
flex-wrap: nowrap;
}
.notification-content {
width: auto;
}
.notification-cta {
height: $spacing-12;
padding-left: $spacing-06;
padding-bottom: 0;
align-items: center;
display: flex;
}
}
}
}
.notification-with-scroll-margin {
scroll-margin: $spacing-06;
}
.notification-list {
.notification {
margin-bottom: $spacing-07;
}
}
// Reconfirmation notification
.reconfirm-notification {
display: flex;
width: 100%;
.fa-warning {
margin-right: $spacing-05;
}
.btn-reconfirm {
float: right;
margin-left: $spacing-05;
text-transform: capitalize;
}
}
.group-invitation-cancel-subscription-notification-buttons {
display: flex;
align-items: center;
}
// Settings page
.affiliations-table {
.reconfirm-notification {
margin: 0 auto $spacing-05 auto !important;
padding: $spacing-07;
}
.reconfirm-row {
td {
border: 0;
.alert {
border: 0;
padding: 0;
}
:not(.alert) {
.reconfirm-notification {
background-color: var(--neutral-10);
border-radius: $border-radius-base;
.fa-warning {
color: var(--yellow-40);
}
}
}
}
}
}