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

scss: introduce $notification-icon-size (#61625)

This commit is contained in:
Thomas Jund 2022-02-09 18:13:49 +01:00
parent ee2b430fbf
commit d0a726ab88
2 changed files with 50 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -109,14 +109,6 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
<td><p>Largeur minimale de la barre latérale, utile dans le cas où la valeur de <code>$sidebar-width</code> est définie en %</p></td>
<td><p><var>0</var></p></td>
</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 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>
<td><p><code>$columns-gutter</code></p></td>
<td><p>Espace (« gouttière ») entre les colonnes des modèles de page.</p></td>
@ -864,6 +856,30 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
</table>
</section>
<section>
<title>Messages</title>
<p>
Options pour paraméter l'affichage des messages. 4 types de messages : succès, information, avertissement, erreur.
</p>
<table shade="rows">
<tr>
<td><p><code>$notification-style</code></p></td>
<td><p>Rendu des messages, 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>
<td><p><code>$notification-icon-size</code></p></td>
<td><p>Taille de l'icône illustrant le message</p></td>
<td><p><var>1.5rem</var> ou <var>2rem</var></p></td>
</tr>
</table>
</section>
<section>
<title>Carrousels</title>

45
static/includes/_misc.scss
View File

@ -11,14 +11,20 @@ $notification_info_color: adjust-hue($notification_base_color, 220deg) !default;
// 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;
}
$notification-icon-size: null !default;
@if $notification-style == border-bar {
$notification-left-padding: 1rem;
$notification-icon-size: 1.5rem !default;
} @else {
$notification-icon-size: 2rem !default;
}
$notification-left-padding: calc(#{$notification-icon-size} + 2rem);
@if $notification-style == border-icon {
$notification-left-padding: $notification-icon-size;
}
@if $notification-style == border-bar {
$notification-left-padding: calc(#{$notification-icon-size} + 1rem);
}
// add a border with "OU" between authentication blocks
$or-separator: if($cell-border == none, true, false) !default;
@ -332,13 +338,14 @@ div#page-change-overlay.on {
padding-left: $notification-left-padding;
position: relative;
border: none;
min-height: 3rem;
min-height: calc(#{$notification-icon-size} + 1rem);
@if $notification-style == border-icon {
border-left: 4px solid darken($color, 40%);
}
@if $notification-style == border-bar {
padding-left: 1rem;
border: 1px solid $color;
border-left-width: 40px;
border-left-width: $notification-left-padding ;
background: white;
color: $font-color;
}
@ -346,26 +353,26 @@ div#page-change-overlay.on {
&::before {
content: $symbol;
font-family: FontAwesome;
font-size: 2rem;
font-size: $notification-icon-size;
text-align: center;
display: block;
width: 1em;
height: 1em;
position: absolute;
left: 1rem;
left: 0;
right: calc(100% - #{$notification-left-padding});
top: 0.5rem;
margin: auto;
@if $notification-style == border-icon {
color: darken($color, 40%);
left: calc(-1rem - 2px);
width: 2rem;
display: block;
text-align: center;
background: white;
border-radius: 1rem;
padding: 0;
border-radius: 50%;
transform: translateX(calc(#{$notification-icon-size / -2} - 2px));
}
@if $notification-style == border-bar {
font-size: 1.5rem;
color: white;
left: -40px;
width: 40px;
text-align: center;
left: calc( -1 * #{$notification-left-padding});
right: 100%;
}
}