entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 10 Releases Wiki Activity

scss: use mixin to style notification messages (#25297) 

This also allows replacing compound selector by a simple %extend, as
required for sassc ≥ 3.6.1.
This commit is contained in:
Frédéric Péters 2020-02-29 13:20:27 +01:00
parent 42602a8669
commit c293e97abb
3 changed files with 19 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/hautes-alpes-2018/_custom.scss
View File

@ -17,7 +17,7 @@ div#main-content-wrapper {
// override .errornotice (includes/misc)
%custom-error-notice {
@extend div.errornotice;
@extend .errornotice;
&::before {
font-size: 30px;
}

61
static/includes/_misc.scss
View File

@ -261,32 +261,28 @@ div#page-change-overlay.on {
}
}
#messages li,
div.infonotice,
div.successnotice,
div.warningnotice,
div.errornotice {
background: $notification_error_color;
color: text-color($notification_error_color);
@mixin notification-message($color, $symbol) {
background: $color;
color: text-color($color);
margin: 1rem 0;
padding: 0.5rem;
padding-left: 4rem;
position: relative;
@if $notification-style == border-icon {
border-left: 4px solid darken($notification_error_color, 40%);
border-left: 4px solid darken($color, 40%);
padding-left: 2rem;
}
min-height: 2rem;
&::before {
content: "\f06a";
content: $symbol;
font-family: FontAwesome;
font-size: 2rem;
position: absolute;
left: 1rem;
top: 0.5rem;
@if $notification-style == border-icon {
color: darken($notification_error_color, 40%);
color: darken($color, 40%);
left: calc(-0.5rem - 2px);
width: 1rem;
display: block;
@ -308,49 +304,26 @@ div.errornotice {
}
}
#messages li.warning,
div.warningnotice {
background: $notification_warning_color;
color: text-color($notification_warning_color);
border-color: darken($notification_warning_color, 40%);
&::before {
content: "\f071";
@if $notification-style == border-icon {
color: darken($notification_warning_color, 40%);
}
}
#messages li.error, .errornotice {
@include notification-message($notification_error_color, "\f06a");
}
#messages li.success,
div.successnotice {
background: $notification_success_color;
color: text-color($notification_success_color);
border-color: darken($notification_success_color, 40%);
&::before {
content: "\f058"; // check-circle
@if $notification-style == border-icon {
color: darken($notification_success_color, 40%);
}
}
#messages li.warning, .warningnotice {
@include notification-message($notification_warning_color, "\f071");
}
#messages li.info,
div.infonotice {
background: $notification_info_color;
color: text-color($notification_info_color);
border-color: darken($notification_info_color, 40%);
&::before {
content: "\f05a";
@if $notification-style == border-icon {
color: darken($notification_info_color, 40%);
}
}
#messages li.success, .successnotice {
@include notification-message($notification_success_color, "\f058"); // check-circle
}
#messages li.info, .infonotice {
@include notification-message($notification_info_color, "\f05a");
}
form ul.errorlist.nonfield {
margin-top: 0;
li {
@extend div.errornotice;
@extend .errornotice;
margin-top: 0;
}
}

2
static/strasbourg-2018/_custom.scss
View File

@ -398,7 +398,7 @@ div.dataview div.page::after {
}
div.widget div.content div.error {
@extend div.errornotice;
@extend .errornotice;
margin-top: 0;
}