overleaf/services/web/frontend/stylesheets/components/notifications.less
Jessica Lawshe a3c54c7369 Merge pull request #14627 from overleaf/jel-new-alerts
[web] New notification styles

GitOrigin-RevId: ad8a102bbe1ab24be3fccc061f5bbf54912c77e4
2023-09-14 08:04:27 +00:00

224 lines
4 KiB
Text

.notification-body {
// will be deprecated once notifications moved to use .notification (see below)
flex-grow: 1;
width: 90%;
@media (min-width: @screen-sm-min) {
width: auto;
}
}
.notification-action {
// will be deprecated once notifications moved to use .notification (see below)
margin-top: (@line-height-computed / 2); // match paragraph padding
order: 1;
@media (min-width: @screen-sm-min) {
margin-top: 0;
order: 0;
padding-left: @padding-sm;
}
}
.notification-close {
// will be deprecated once notifications moved to use .notification (see below)
padding-left: @padding-sm;
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: rgba(@neutral-90, 0.08);
color: @text-color;
}
}
@media (min-width: @screen-sm-min) {
width: auto;
}
}
.notification {
border-radius: @border-radius-base-new;
color: @content-primary;
display: flex;
padding: 0 16px 0 16px; // vertical padding added by elements within notification
width: 100%;
a:not(.btn) {
text-decoration: underline;
}
p {
margin-bottom: 4px;
}
.notification-icon {
flex-grow: 0;
padding: 18px 16px 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: 16px 0 16px 0;
width: 100%;
}
.notification-cta {
padding-bottom: 16px;
a {
font-weight: 700;
}
a,
button {
white-space: nowrap;
}
}
.notification-close-btn {
height: 56px;
align-items: center;
display: flex;
}
.notification-close-btn {
padding: 0 0 0 16px;
button {
aspect-ratio: 1;
border-radius: 50%;
display: flex;
float: right;
padding: 5.5px;
cursor: pointer;
background: transparent;
border: 0;
&:hover,
&:focus {
background-color: rgba(@neutral-90, 0.08);
color: @text-color;
}
}
}
&.notification-type-info {
background-color: @blue-10;
border: 1px solid @blue-20;
.notification-icon {
color: @blue-50;
}
}
&.notification-type-success {
background-color: @green-10;
border: 1px solid @green-20;
.notification-icon {
color: @green-50;
}
}
&.notification-type-warning {
background-color: @yellow-10;
border: 1px solid @yellow-20;
.notification-icon {
color: @yellow-40;
}
}
&.notification-type-error {
background-color: @red-10;
border: 1px solid @red-20;
.notification-icon {
color: @red-50;
}
}
@media (min-width: @screen-sm-min) {
&:not(.notification-cta-below-content) {
.notification-content-and-cta {
flex-wrap: nowrap;
}
.notification-content {
width: auto;
}
.notification-cta {
height: 56px;
padding-left: 16px;
padding-bottom: 0;
align-items: center;
display: flex;
}
}
}
}
.notification-list {
.notification {
margin-bottom: @margin-md;
}
}
// Reconfirmation notification
.reconfirm-notification {
display: flex;
width: 100%;
.fa-warning {
margin-right: @margin-sm;
}
.btn-reconfirm {
float: right;
margin-left: @margin-sm;
text-transform: capitalize;
}
}
// Settings page
.affiliations-table {
.reconfirm-notification {
margin: 0px auto @margin-sm auto !important;
padding: @padding-md;
}
.reconfirm-row {
td {
border: 0;
.alert {
border: 0;
padding: 0;
}
:not(.alert) {
.reconfirm-notification {
background-color: @ol-blue-gray-0;
border-radius: @border-radius-base;
.fa-warning {
color: @brand-warning;
}
}
}
}
}
}