Projet

Général

Profil

0001-scss-introduce-pk-information-attention-error-classe.patch

Frédéric Péters, 19 août 2020 20:38

Télécharger (5,98 ko)

Voir les différences:

Subject: [PATCH] scss: introduce pk-information/attention/error classes
 (#33135)

 help/fr/misc-css-classes.page | 24 ++++++++++++++
 static/includes/_cells.scss   |  2 +-
 static/includes/_library.scss | 12 +++++++
 static/includes/_misc.scss    | 60 +++++++++++++++++++++++++----------
 4 files changed, 81 insertions(+), 17 deletions(-)
help/fr/misc-css-classes.page
61 61
   « titre et liens », pour cela le texte doit contenir un titre
62 62
   (&lt;h2&gt;) suivi d'une liste de liens (&lt;ul&gt;).</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
-