raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-04-04 07:09:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update style of flash messages

Browse Source 
They now hover near the bottom of the screen.

I've created new variables so as not to mess with the existing use of color-success etc.
This commit is contained in:
David Cook
2023-11-30 16:15:49 +11:00
parent 44187658be
commit 20afe5b99c
3 changed files with 28 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
app/webpacker/css/admin_v3/components/messages.scss
View File

@@ -27,35 +27,35 @@
.flash-container {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100%;
z-index: 1000;
display: flex;
justify-content: center;
.flash {
padding: 18px;
text-align: center;
font-size: 120%;
color: $color-1;
position: relative;
bottom: 3.5rem;
padding: 1rem;
min-width: 24rem;
max-width: 48.25em;
font-weight: 600;
margin-top: 0;
background-color: $light-grey;
border-radius: $border-radius;
box-shadow: $box-shadow;
&.notice {
background-color: rgba($color-notice, 0.8);
}
&.success {
background-color: rgba($color-success, 0.8);
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 {
background-color: rgba($color-error, 0.8);
}
// Adjust heights to fit main layout dimension (header, navbar...)
&:nth-child(2) {
padding: 24px;
}
&:nth-child(3) {
padding: 20px;
color: $color-flash-error-text;
background-color: $color-flash-error-bg;
}
}
}

6
app/webpacker/css/admin_v3/globals/variables.scss
View File

@@ -25,6 +25,12 @@ $color-success: $green !default;
$color-notice: $yellow !default;
$color-warning: $red !default;
$color-error: $red !default;
$color-flash-success-text: $white !default;
$color-flash-success-bg: $near-black !default;
$color-flash-notice-text: $color-body-text !default;
$color-flash-notice-bg: $fair-pink !default;
$color-flash-error-text: $white !default;
$color-flash-error-bg: $color-error !default;
// Table styles
$color-tbl-bg: $light-grey !default;

4
app/webpacker/css/admin_v3/shared/forms.scss
View File

@@ -269,8 +269,8 @@ fieldset {
box-shadow: $box-shadow;
background-color: $fair-pink;
border: none;
border-left: 4px solid $red;
border-radius: 4px;
border-left: $border-radius solid $red;
border-radius: $border-radius;
margin: 0.5em 0;
padding: 0;