entrouvert
/
gadjo
15
0
Fork 0
Code Issues Pull Requests 2 Releases Activity

style: redo messages & add new .pk-{error,informtion,etc.} classes (#46794)
gitea/gadjo/pipeline/head Build started... Details

This commit is contained in:
Frédéric Péters 2020-09-18 17:24:20 +02:00
parent 3c1b7d0095
commit b4bb2ac9b3
1 changed files with 57 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
gadjo/static/css/gadjo.scss
View File

@ -336,18 +336,16 @@ ul.messages {
}
}
ul.messages li,
div.infonotice,
div.successnotice,
div.warningnotice,
div.errornotice {
@mixin notification-message-base($symbol, $border-color, $left-color-top, $left-color-bottom) {
position: relative;
font-size: 110%;
background: white;
color: #3c3c33;
font-weight: normal;
margin-left: 0;
margin-right: 0;
margin-bottom: 0.5em;
border-radius: 3px;
margin: 1rem 0;
padding: 0.5rem;
border: 1px solid transparent;
border-left-width: 25px;
@ -360,31 +358,37 @@ div.errornotice {
text-align: center;
font-family: FontAwesome;
color: white;
content: $symbol;
}
&.success,
&.successnotice {
&:before { content: "\f058"; } // check-circle
border-color: #00b000;
border-image: linear-gradient(#27eb00, lighten(#27eb00, 10%)) 2;
border-color: $border-color;
border-image: linear-gradient(#{$left-color-top}, #{$left-color-bottom}) 2;
p {
margin: 0 0 0.6rem 0;
&:last-child {
margin-bottom: 0;
}
}
&.info,
&.infonotice {
&:before { content: "\f05a"; } // info-circle
border-color: #0000b0;
border-image: linear-gradient(#4474f6, lighten(#4474f6, 10%)) 2;
}
@mixin extended-notification-message {
&.comment-field {
margin: 0 0 0.5em 0;
}
&.warning,
&.warningnotice {
&:before { content: "\f06a"; } //exclamation-circle
border-color: #ffb000;
border-image: linear-gradient(#f47f13, lighten(#f47f13, 15%)) 2;
&[class*=grid-].comment-field {
// adapt when used as comment field in grid system.
box-sizing: border-box;
margin-right: 1rem;
}
&.error,
&.errornotice {
&:before { content: "\f071"; } // exclamation-triangle
border-color: #f64474;
border-image: linear-gradient(#f64474, lighten(#f64474, 5%)) 2;
&:not([class*=grid-]).comment-field {
// clear everything if not in a grid.
clear: both;
}
&.cell {
padding-bottom: 0.5em !important;
}
.action {
margin: 0;
display: flex;
@ -409,6 +413,33 @@ div.errornotice {
}
}
.messages li.error, div.errornotice, .pk-error {
@include notification-message-base("\f071", #f64474, #f64474, lighten(#f64474, 5%));
}
.messages li.warning, .warningnotice, .pk-attention {
@include notification-message-base("\f06a", #ffb000, #f47f13, lighten(#f47f13, 15%));
}
.messages li.success, .successnotice, .pk-success {
@include notification-message-base("\f058", #00b000, #27eb00, lighten(#27eb00, 10%));
}
.messages li.info, div.infonotice, .pk-information {
@include notification-message-base("\f05a", #0000b0, #4474f6, lighten(#4474f6, 10%));
}
.errornotice, .warningnotice, .infonotice, .successnotice,
.pk-error, .pk-attention, .pk-information, .pk-success {
@include extended-notification-message();
}
.messages li {
&.error, &.warning, &.success, &.info {
margin-top: 0;
}
}
/* main content */
#main {