mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-01-25 20:46:48 +00:00
4027ce0c05
The default aqua link colour looked aweful on orange/red background. I tried a few different standard colours but couldn't get it right. So I reverted to the web standard link style: underline. That's looks pretty good. I personally think that we should use the more for links.
85 lines
1.6 KiB
SCSS
85 lines
1.6 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;
|
|
|
|
a:not(.button) {
|
|
color: $color-flash-error-text;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|