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

scss: add new style for notifications (#58190)

This commit is contained in:
Frédéric Péters 2021-10-25 18:40:26 +02:00
parent d1ed05d296
commit 8d28dd2417
2 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
help/fr/misc-scss.page
View File

@ -111,9 +111,10 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
</tr>
<tr>
<td><p><code>$notification-style</code></p></td>
<td><p>Rendu des notifications (messages, erreurs, etc.), soit « classic »
soit « border-icon » pour un rendu plaçant l'icône en couleur sur une bordure
à gauche.</p></td>
<td><p>Rendu des notifications (messages, erreurs, etc.), soit « classic »,
soit « border-icon » pour un rendu plaçant l'icône en couleur sur un trait
à gauche, soit « border-bar » pour un rendu avec une bordure et une bande
de couleur pour l’icône.</p></td>
<td><p><var>classic</var></p></td>
</tr>
<tr>

20
static/includes/_misc.scss
View File

@ -8,12 +8,16 @@ $notification_info_color: adjust-hue($notification_base_color, 220deg) !default;
// $notification-style:
// classic: black icon
// border-icon: colored icon on left boder
// border-bar: colored bar with icon on the left
$notification-style: classic !default;
$notification-left-padding: 4rem;
@if $notification-style == border-icon {
$notification-left-padding: 2rem;
}
@if $notification-style == border-bar {
$notification-left-padding: 1rem;
}
// add a border with "OU" between authentication blocks
$or-separator: if($cell-border == none, true, false) !default;
@ -329,6 +333,12 @@ div#page-change-overlay.on {
@if $notification-style == border-icon {
border-left: 4px solid darken($color, 40%);
}
@if $notification-style == border-bar {
border: 1px solid $color;
border-left-width: 40px;
background: white;
color: $font-color;
}
min-height: 3rem;
&::before {
@ -348,12 +358,22 @@ div#page-change-overlay.on {
border-radius: 1rem;
padding: 0;
}
@if $notification-style == border-bar {
font-size: 1.5rem;
color: white;
left: -40px;
width: 40px;
text-align: center;
}
}
p {
margin: 0 0 0.6rem 0;
&:first-child {
padding-top: 0.5rem;
@if $notification-style == border-bar {
padding-top: 0.3rem;
}
}
&:last-child {
margin-bottom: 0;