style: change notification style to only have colours on the edge (#28389)
This commit is contained in:
parent
aec563c4ca
commit
96b20b4478
|
@ -285,37 +285,6 @@ ul.messages {
|
|||
|
||||
li {
|
||||
font-size: 110%;
|
||||
background: #fafafa;
|
||||
margin: 1ex 0;
|
||||
padding: 1ex;
|
||||
padding-left: 25px;
|
||||
border: 1px solid transparent;
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 25px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-family: FontAwesome;
|
||||
color: white;
|
||||
}
|
||||
color: white;
|
||||
&.success {
|
||||
&:before { content: "\f058"; } /* check-circle */
|
||||
background: linear-gradient(to right, darken(adjust-hue(#f64474, 120deg), 20%), darken(adjust-hue(#f4635e, 120deg), 20%));
|
||||
}
|
||||
&.info {
|
||||
&:before { content: "\f05a"; } /* info-circle */
|
||||
background: linear-gradient(to right, adjust-hue(#f64474, 220deg), adjust-hue(#f4635e, 220deg));
|
||||
}
|
||||
&.warning {
|
||||
&:before { content: "\f071"; } /* exclamation-triangle */
|
||||
background: linear-gradient(to right, darken(adjust-hue(#f64474, 45deg), 10%), darken(adjust-hue(#f4635e, 45deg), 10%));
|
||||
}
|
||||
&.error {
|
||||
&:before { content: "\f06a"; } /* exclamation-circle */
|
||||
background: linear-gradient(to right, #f64474, #f4635e);
|
||||
}
|
||||
.close {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
|
@ -326,6 +295,7 @@ ul.messages {
|
|||
}
|
||||
}
|
||||
|
||||
ul.messages li,
|
||||
div.infonotice,
|
||||
div.successnotice,
|
||||
div.warningnotice,
|
||||
|
@ -350,37 +320,32 @@ div.errornotice {
|
|||
font-family: FontAwesome;
|
||||
color: white;
|
||||
}
|
||||
&.success,
|
||||
&.successnotice {
|
||||
&:before { content: "\f058"; } // check-circle
|
||||
border-color: #00b000;
|
||||
border-image: linear-gradient(#27eb00, #78ff31) 27;
|
||||
border-image: linear-gradient(#27eb00, lighten(#27eb00, 10%)) 2;
|
||||
}
|
||||
&.info,
|
||||
&.infonotice {
|
||||
&:before { content: "\f05a"; } // info-circle
|
||||
border-color: #0000b0;
|
||||
border-image: linear-gradient(#386ede, #00d6eb) 27;
|
||||
border-image: linear-gradient(#4474f6, lighten(#4474f6, 10%)) 2;
|
||||
}
|
||||
&.warning,
|
||||
&.warningnotice {
|
||||
&:before { content: "\f06a"; } //exclamation-circle
|
||||
border-color: #ffb000;
|
||||
border-image: linear-gradient(#ff7831, #ebd600) 27;
|
||||
border-image: linear-gradient(#f47f13, lighten(#f47f13, 15%)) 2;
|
||||
}
|
||||
&.error,
|
||||
&.errornotice {
|
||||
&:before { content: "\f071"; } // exclamation-triangle
|
||||
background: linear-gradient(to right, #f64474, #f4635e);
|
||||
color: white;
|
||||
border-color: #f64474;
|
||||
border-image: linear-gradient(#f64474, lighten(#f64474, 5%)) 2;
|
||||
}
|
||||
}
|
||||
|
||||
div.workflow-messages > div.errornotice {
|
||||
// slightly different style for error notices in workflow messages as
|
||||
// the messages can be longer.
|
||||
background: white;
|
||||
border-color: #f4635e;
|
||||
border-image: linear-gradient(#f64474, #f4635e) 27;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* main content */
|
||||
|
||||
#main {
|
||||
|
|
Loading…
Reference in New Issue