summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorFrédéric Péters <fpeters@entrouvert.com>2020-09-18 15:24:20 (GMT)
committerFrédéric Péters <fpeters@entrouvert.com>2020-09-18 19:52:09 (GMT)
commitb4bb2ac9b3e3cce805f7b86036d688b298e1a005 (patch)
tree79225e1395658435d67d1c3ae92641b106cf4890
parent3c1b7d009549e424338eb1ff618f037ec62d841a (diff)
downloadgadjo-wip/46794-pk-messages.zip
gadjo-wip/46794-pk-messages.tar.gz
gadjo-wip/46794-pk-messages.tar.bz2
style: redo messages & add new .pk-{error,informtion,etc.} classes (#46794)wip/46794-pk-messages
-rw-r--r--gadjo/static/css/gadjo.scss89
1 files changed, 60 insertions, 29 deletions
diff --git a/gadjo/static/css/gadjo.scss b/gadjo/static/css/gadjo.scss
index 8eb3194..27055f6 100644
--- a/gadjo/static/css/gadjo.scss
+++ b/gadjo/static/css/gadjo.scss
@@ -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;
+ }
+ 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;
+ }
+ }
+}
+
+@mixin extended-notification-message {
+ &.comment-field {
+ margin: 0 0 0.5em 0;
}
- &.success,
- &.successnotice {
- &:before { content: "\f058"; } // check-circle
- border-color: #00b000;
- border-image: linear-gradient(#27eb00, lighten(#27eb00, 10%)) 2;
- }
- &.info,
- &.infonotice {
- &:before { content: "\f05a"; } // info-circle
- border-color: #0000b0;
- border-image: linear-gradient(#4474f6, lighten(#4474f6, 10%)) 2;
- }
- &.warning,
- &.warningnotice {
- &:before { content: "\f06a"; } //exclamation-circle
- border-color: #ffb000;
- border-image: linear-gradient(#f47f13, lighten(#f47f13, 15%)) 2;
- }
- &.error,
- &.errornotice {
- &:before { content: "\f071"; } // exclamation-triangle
- border-color: #f64474;
- border-image: linear-gradient(#f64474, lighten(#f64474, 5%)) 2;
+ &[class*=grid-].comment-field {
+ // adapt when used as comment field in grid system.
+ box-sizing: border-box;
+ margin-right: 1rem;
}
+ &: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 {