Adjust warning/alert/... styling
This commit is contained in:
parent
fccd7625a2
commit
524eb67b9f
3 changed files with 84 additions and 20 deletions
|
@ -15,23 +15,70 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* short fix: SPR-891 - icons for notifications in message area are repeated */
|
||||
div.success,
|
||||
div.error,
|
||||
div.info,
|
||||
div.notify {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 8px 50%;
|
||||
border: 1px solid #eeb;
|
||||
font-size: 90%;
|
||||
margin: 0 0 .5em;
|
||||
padding: .4em;
|
||||
padding-left: 32px;
|
||||
overflow: hidden;
|
||||
border-radius: @fix_border-radius;
|
||||
@media @screen_max-md {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
* {
|
||||
color: inherit;
|
||||
display: flex;
|
||||
align-items: start;
|
||||
gap: 0.5rem;
|
||||
border: none;
|
||||
border-left: solid 0.5rem var(--color-shade-4);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1em;
|
||||
background-image: none;
|
||||
background-color: var(--color-shade-1);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.3em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
mask-size: contain;
|
||||
mask-position: center top;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
&.success {
|
||||
color: var(--color-success);
|
||||
|
||||
&::before {
|
||||
mask-image: url(img/tick_small.svg);
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
border-left-color: var(--color-error);
|
||||
color: var(--color-foreground);
|
||||
|
||||
&::before {
|
||||
background-color: var(--color-error);
|
||||
mask-image: url(img/power.svg);
|
||||
}
|
||||
}
|
||||
|
||||
&.info {
|
||||
color: var(--color-foreground);
|
||||
|
||||
&::before {
|
||||
mask-image: url(img/info.svg);
|
||||
}
|
||||
}
|
||||
|
||||
&.notify {
|
||||
border-left-color: var(--color-warning);
|
||||
color: var(--color-foreground);
|
||||
|
||||
&::before {
|
||||
background-color: var(--color-warning);
|
||||
mask-image: url(img/warning.svg);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
@ -14,6 +14,30 @@
|
|||
padding-left: .3rem;
|
||||
padding-right: .3rem;
|
||||
}
|
||||
|
||||
p.permerror {
|
||||
@media @screen_max-md {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
align-items: start;
|
||||
gap: 0.5rem;
|
||||
background: none;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.3em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
mask-size: contain;
|
||||
mask-position: center top;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url(img/warning.svg);
|
||||
background-color: var(--color-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.tabs {
|
||||
|
|
|
@ -39,11 +39,6 @@
|
|||
background-image: none;
|
||||
background-color: var(--color-shade-1);
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
max-width: calc(~"100% - 2.5rem");
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
flex-shrink: 0;
|
||||
|
@ -53,6 +48,7 @@
|
|||
mask-size: contain;
|
||||
mask-position: center top;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -60,7 +56,6 @@
|
|||
color: var(--color-foreground);
|
||||
|
||||
&::before {
|
||||
background-color: currentColor;
|
||||
mask-image: url(img/info.svg);
|
||||
}
|
||||
}
|
||||
|
@ -69,7 +64,6 @@
|
|||
color: var(--color-foreground);
|
||||
|
||||
&::before {
|
||||
background-color: currentColor;
|
||||
mask-image: url(img/lightbulb.svg);
|
||||
}
|
||||
}
|
||||
|
@ -118,7 +112,6 @@
|
|||
color: var(--color-foreground);
|
||||
|
||||
&::before {
|
||||
background-color: currentColor;
|
||||
mask-image: url(img/tick_small.svg);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue