mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-01-28 21:07:16 +00:00
81a8ee5a31
The flash container was set to 100% width to center the messages on the screen. The messages were covering only part of the screen though. So the container beyond the actual message box was covering part of the page, blocking clicks on elements. A new way of centering the container with CSS translate means that the width of the container can be the same as the content, not covering anyting accidentally. And moving the whole container up instead of only moving the contained message allows us to interact with elements below the flash message as well.
80 lines
1.5 KiB
SCSS
80 lines
1.5 KiB
SCSS
.errorExplanation {
|
|
padding: 10px;
|
|
border: 1px solid very-light($color-error, 12);
|
|
background-color: very-light($color-error, 6);
|
|
border-radius: 3px;
|
|
color: $color-error;
|
|
margin-bottom: 15px;
|
|
|
|
h2 {
|
|
font-size: 140%;
|
|
color: $color-error;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
p {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
ul {
|
|
list-style-position: inside;
|
|
|
|
li {
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.flash-container {
|
|
position: fixed;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 3.5rem;
|
|
z-index: $flash-message-z-index;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.flash {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.25rem;
|
|
min-width: 24rem;
|
|
max-width: 48.25em;
|
|
font-weight: 600;
|
|
background-color: $light-grey;
|
|
border-radius: $border-radius;
|
|
box-shadow: $box-shadow;
|
|
|
|
&.success {
|
|
color: $color-flash-success-text;
|
|
background-color: $color-flash-success-bg;
|
|
}
|
|
&.notice {
|
|
color: $color-flash-notice-text;
|
|
background-color: $color-flash-notice-bg;
|
|
border-left: $border-radius solid $red;
|
|
}
|
|
&.error {
|
|
color: $color-flash-error-text;
|
|
background-color: $color-flash-error-bg;
|
|
}
|
|
|
|
.msg {
|
|
flex-grow: 1;
|
|
margin: 0.25rem 0.75rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.notice:not(.flash) {
|
|
padding: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
background-color: $spree-light-blue;
|
|
border-radius: $border-radius;
|
|
|
|
a {
|
|
font-weight: bold;
|
|
}
|
|
}
|