0001-scss-introduce-pk-information-attention-error-classe.patch
help/fr/misc-css-classes.page | ||
---|---|---|
61 | 61 |
« titre et liens », pour cela le texte doit contenir un titre |
62 | 62 |
(<h2>) suivi d'une liste de liens (<ul>).</p></td> |
63 | 63 |
</tr> |
64 |
<tr> |
|
65 |
<td><p><code>pk-information</code></p></td> |
|
66 |
<td><p>Donne à la cellule le style de bloc d’information.</p></td> |
|
67 |
</tr> |
|
68 |
<tr> |
|
69 |
<td><p><code>pk-attention</code></p></td> |
|
70 |
<td><p>Donne à la cellule le style de bloc d’attention.</p></td> |
|
71 |
</tr> |
|
72 |
<tr> |
|
73 |
<td><p><code>pk-error</code></p></td> |
|
74 |
<td><p>Donne à la cellule le style de bloc d’erreur.</p></td> |
|
75 |
</tr> |
|
64 | 76 |
</table> |
65 | 77 | |
66 | 78 |
</section> |
... | ... | |
83 | 95 |
<td><p>Marque le champ comme étant particulièrement important, le rendu sera |
84 | 96 |
généralement un libellé mis en gras.</p></td> |
85 | 97 |
</tr> |
98 |
<tr> |
|
99 |
<td><p><code>pk-information</code></p></td> |
|
100 |
<td><p>Marque le champ commentaire avec le style de bloc d’information.</p></td> |
|
101 |
</tr> |
|
102 |
<tr> |
|
103 |
<td><p><code>pk-attention</code></p></td> |
|
104 |
<td><p>Marque le champ commentaire avec le style de bloc d’attention.</p></td> |
|
105 |
</tr> |
|
106 |
<tr> |
|
107 |
<td><p><code>pk-error</code></p></td> |
|
108 |
<td><p>Marque le champ commentaire avec le style de bloc d’erreur.</p></td> |
|
109 |
</tr> |
|
86 | 110 |
</table> |
87 | 111 |
</section> |
88 | 112 |
static/includes/_cells.scss | ||
---|---|---|
84 | 84 |
div.a2-continue, |
85 | 85 |
div#services > ul > li, |
86 | 86 |
div.a2-block, |
87 |
.gru-content div.cell,
|
|
87 |
.gru-content .cell, |
|
88 | 88 |
.block { |
89 | 89 |
text-align: left; |
90 | 90 |
background: $cell-background; |
static/includes/_library.scss | ||
---|---|---|
115 | 115 |
width: 30%; |
116 | 116 |
} |
117 | 117 |
} |
118 | ||
119 |
.pk-information { |
|
120 |
@include notification-message($notification_info_color, "\f05a"); |
|
121 |
} |
|
122 | ||
123 |
.pk-attention { |
|
124 |
@include notification-message($notification_warning_color, "\f071"); |
|
125 |
} |
|
126 | ||
127 |
.pk-error { |
|
128 |
@include notification-message($notification_error_color, "\f06a"); |
|
129 |
} |
static/includes/_misc.scss | ||
---|---|---|
10 | 10 |
// border-icon: colored icon on left boder |
11 | 11 |
$notification-style: classic !default; |
12 | 12 | |
13 |
$notification-left-padding: 4rem; |
|
14 |
@if $notification-style == border-icon { |
|
15 |
$notification-left-padding: 2rem; |
|
16 |
} |
|
17 | ||
13 | 18 |
div.textcell { |
14 | 19 |
h3, h4, h5, p, table { |
15 | 20 |
margin: 0.7em 0.5rem; |
... | ... | |
295 | 300 |
} |
296 | 301 |
} |
297 | 302 | |
298 |
@mixin notification-message($color, $symbol) { |
|
299 |
box-sizing: content-box; |
|
303 |
@mixin notification-message-base($color, $symbol) { |
|
300 | 304 |
background: $color; |
301 | 305 |
color: text-color($color); |
302 | 306 |
margin: 1rem 0; |
303 | 307 |
padding: 0.5rem; |
304 |
padding-left: 4rem;
|
|
308 |
padding-left: $notification-left-padding !important;
|
|
305 | 309 |
position: relative; |
306 | 310 |
@if $notification-style == border-icon { |
307 | 311 |
border-left: 4px solid darken($color, 40%); |
308 |
padding-left: 2rem; |
|
309 | 312 |
} |
310 | 313 | |
311 |
min-height: 2rem;
|
|
314 |
min-height: 3rem;
|
|
312 | 315 |
&::before { |
313 | 316 |
content: $symbol; |
314 | 317 |
font-family: FontAwesome; |
... | ... | |
339 | 342 |
} |
340 | 343 |
} |
341 | 344 | |
342 |
#messages li.error, .errornotice { |
|
343 |
@include notification-message($notification_error_color, "\f06a"); |
|
345 |
@mixin notification-message($color, $symbol) { |
|
346 |
@include notification-message-base($color, $symbol); |
|
347 |
&[class*=grid-].comment-field { |
|
348 |
// adapt when used as comment field in grid system. |
|
349 |
@if $grid-gutter != 0px { |
|
350 |
box-sizing: border-box; |
|
351 |
} |
|
352 |
margin-right: 1rem; |
|
353 |
} |
|
354 |
&:not([class*=grid-]).comment-field { |
|
355 |
// clear everything if not in a grid. |
|
356 |
clear: both; |
|
357 |
} |
|
358 | ||
359 |
&.cell { |
|
360 |
// increased selector weight is required for cells. |
|
361 |
background: $color !important; |
|
362 |
padding-bottom: 0.5em !important; |
|
363 |
h2:first-child { |
|
364 |
background: transparent !important; |
|
365 |
font-weight: bold !important; |
|
366 |
margin: 0.7em 0.5rem !important; |
|
367 |
padding: 0 !important; |
|
368 |
color: darken($color, 40%) !important; |
|
369 |
border-color: darken($color, 40%) !important; |
|
370 |
} |
|
371 |
} |
|
344 | 372 |
} |
345 | 373 | |
346 |
#messages li.warning, .warningnotice { |
|
347 |
@include notification-message($notification_warning_color, "\f071"); |
|
348 |
} |
|
374 |
#messages li.error { @include notification-message-base($notification_error_color, "\f06a") } |
|
375 |
.errornotice { @include notification-message($notification_error_color, "\f06a"); } |
|
349 | 376 | |
350 |
#messages li.success, .successnotice { |
|
351 |
@include notification-message($notification_success_color, "\f058"); // check-circle |
|
352 |
} |
|
377 |
#messages li.warning { @include notification-message-base($notification_warning_color, "\f071"); } |
|
378 |
.warningnotice { @include notification-message($notification_warning_color, "\f071"); } |
|
353 | 379 | |
354 |
#messages li.info, .infonotice { |
|
355 |
@include notification-message($notification_info_color, "\f05a"); |
|
356 |
} |
|
380 |
#messages li.success { @include notification-message-base($notification_success_color, "\f058"); } // check-circle |
|
381 |
.successnotice { @include notification-message($notification_success_color, "\f058"); } |
|
382 | ||
383 |
#messages li.info { @include notification-message-base($notification_info_color, "\f05a"); } |
|
384 |
.infonotice { @include notification-message($notification_info_color, "\f05a"); } |
|
357 | 385 | |
358 | 386 |
#messages li { |
359 | 387 |
&.error, &.warning, &.success, &.info { |
360 |
- |