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

scss: introduce pk-information/attention/error classes (#33135)

This commit is contained in:
Frédéric Péters 2020-06-24 18:56:15 +02:00
parent 630f02233c
commit 9856b66086
4 changed files with 81 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
help/fr/misc-css-classes.page
View File

@ -61,6 +61,18 @@ de classes CSS réutilisables.
« titre et liens », pour cela le texte doit contenir un titre
(&lt;h2&gt;) suivi d'une liste de liens (&lt;ul&gt;).</p></td>
</tr>
<tr>
<td><p><code>pk-information</code></p></td>
<td><p>Donne à la cellule le style de bloc d’information.</p></td>
</tr>
<tr>
<td><p><code>pk-attention</code></p></td>
<td><p>Donne à la cellule le style de bloc d’attention.</p></td>
</tr>
<tr>
<td><p><code>pk-error</code></p></td>
<td><p>Donne à la cellule le style de bloc d’erreur.</p></td>
</tr>
</table>
</section>
@ -83,6 +95,18 @@ de classes CSS réutilisables.
<td><p>Marque le champ comme étant particulièrement important, le rendu sera
généralement un libellé mis en gras.</p></td>
</tr>
<tr>
<td><p><code>pk-information</code></p></td>
<td><p>Marque le champ commentaire avec le style de bloc d’information.</p></td>
</tr>
<tr>
<td><p><code>pk-attention</code></p></td>
<td><p>Marque le champ commentaire avec le style de bloc d’attention.</p></td>
</tr>
<tr>
<td><p><code>pk-error</code></p></td>
<td><p>Marque le champ commentaire avec le style de bloc d’erreur.</p></td>
</tr>
</table>
</section>

2
static/includes/_cells.scss
View File

@ -84,7 +84,7 @@ div#sidebar + div#columns {
div.a2-continue,
div#services > ul > li,
div.a2-block,
.gru-content div.cell,
.gru-content .cell,
.block {
text-align: left;
background: $cell-background;

12
static/includes/_library.scss
View File

@ -115,3 +115,15 @@ table.pk-data-table {
width: 30%;
}
}
.pk-information {
@include notification-message($notification_info_color, "\f05a");
}
.pk-attention {
@include notification-message($notification_warning_color, "\f071");
}
.pk-error {
@include notification-message($notification_error_color, "\f06a");
}

60
static/includes/_misc.scss
View File

@ -10,6 +10,11 @@ $notification_info_color: adjust-hue($notification_base_color, 220deg) !default;
// border-icon: colored icon on left boder
$notification-style: classic !default;
$notification-left-padding: 4rem;
@if $notification-style == border-icon {
$notification-left-padding: 2rem;
}
div.textcell {
h3, h4, h5, p, table {
margin: 0.7em 0.5rem;
@ -288,20 +293,18 @@ div#page-change-overlay.on {
}
}
@mixin notification-message($color, $symbol) {
box-sizing: content-box;
@mixin notification-message-base($color, $symbol) {
background: $color;
color: text-color($color);
margin: 1rem 0;
padding: 0.5rem;
padding-left: 4rem;
padding-left: $notification-left-padding !important;
position: relative;
@if $notification-style == border-icon {
border-left: 4px solid darken($color, 40%);
padding-left: 2rem;
}
min-height: 2rem;
min-height: 3rem;
&::before {
content: $symbol;
font-family: FontAwesome;
@ -332,21 +335,46 @@ div#page-change-overlay.on {
}
}
#messages li.error, .errornotice {
@include notification-message($notification_error_color, "\f06a");
@mixin notification-message($color, $symbol) {
@include notification-message-base($color, $symbol);
&[class*=grid-].comment-field {
// adapt when used as comment field in grid system.
@if $grid-gutter != 0px {
box-sizing: border-box;
}
margin-right: 1rem;
}
&:not([class*=grid-]).comment-field {
// clear everything if not in a grid.
clear: both;
}
&.cell {
// increased selector weight is required for cells.
background: $color !important;
padding-bottom: 0.5em !important;
h2:first-child {
background: transparent !important;
font-weight: bold !important;
margin: 0.7em 0.5rem !important;
padding: 0 !important;
color: darken($color, 40%) !important;
border-color: darken($color, 40%) !important;
}
}
}
#messages li.warning, .warningnotice {
@include notification-message($notification_warning_color, "\f071");
}
#messages li.error { @include notification-message-base($notification_error_color, "\f06a") }
.errornotice { @include notification-message($notification_error_color, "\f06a"); }
#messages li.success, .successnotice {
@include notification-message($notification_success_color, "\f058"); // check-circle
}
#messages li.warning { @include notification-message-base($notification_warning_color, "\f071"); }
.warningnotice { @include notification-message($notification_warning_color, "\f071"); }
#messages li.info, .infonotice {
@include notification-message($notification_info_color, "\f05a");
}
#messages li.success { @include notification-message-base($notification_success_color, "\f058"); } // check-circle
.successnotice { @include notification-message($notification_success_color, "\f058"); }
#messages li.info { @include notification-message-base($notification_info_color, "\f05a"); }
.infonotice { @include notification-message($notification_info_color, "\f05a"); }
form ul.errorlist.nonfield {
margin-top: 0;