forked from entrouvert/publik-base-theme
scss: introduce $notification-icon-size (#61625)
This commit is contained in:
parent
ee2b430fbf
commit
d0a726ab88
|
@ -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>
|
||||
|
||||
|
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue