0001-scss-allow-left-cell-image-position-41741.patch
help/fr/misc-scss.page | ||
---|---|---|
767 | 767 |
<td><p>Position de l'image qui peut être associée à une cellule « démarches |
768 | 768 |
d'une catégorie », les valeurs possibles sont <var>top</var> pour |
769 | 769 |
avoir l'image en haut de cellule et <var>after-title</var> pour avoir |
770 |
l'image après le titre de cellule.</p></td> |
|
770 |
l'image après le titre de cellule, <var>left-of-title</var> pour |
|
771 |
avoir l'image à gauche du titre de la cellule</p></td> |
|
771 | 772 |
<td><p><var>after-title</var></p></td> |
772 | 773 |
</tr> |
774 |
<tr> |
|
775 |
<td><p><code>$cell-image-width</code></p></td> |
|
776 |
<td><p>Largeur, en pixels, de l'image qui peut être associée à une |
|
777 |
cellule « démarches d'une catégorie ». Le titre de la cellule sera |
|
778 |
afin de laisser de ne pas interférer avec l'image</p></td> |
|
779 |
<td><p><var>50px</var></p></td> |
|
780 |
</tr> |
|
773 | 781 |
<tr> |
774 | 782 |
<td><p><code>$cell-image-padding</code></p></td> |
775 | 783 |
<td><p>Espace autour de l'image qui peut être associée à une cellule « démarches |
static/includes/_cells.scss | ||
---|---|---|
25 | 25 |
// $cell-image-position: define where is set the associated image (in |
26 | 26 |
// "forms of category"; possible values are: |
27 | 27 |
// top: top of the cell |
28 |
// left-of-title: to the left of title |
|
28 | 29 |
// after-title: after the title (default) |
29 | 30 |
$cell-image-position: after-title !default; |
30 | 31 | |
32 |
// $cell-image-width: define the width of the associated image (in |
|
33 |
// "forms of category" cell; |
|
34 |
$cell-image-width: 50px !default; |
|
35 | ||
31 | 36 |
// $cell-image-padding: define padding of cell image. |
32 | 37 |
$cell-image-padding: 0.5rem !default; |
33 | 38 | |
... | ... | |
260 | 265 |
display: block; |
261 | 266 |
padding: $cell-image-padding; |
262 | 267 |
} |
263 |
@if $cell-image-position == top { |
|
268 |
@if $cell-image-position == top or $cell-image-position == left-of-title {
|
|
264 | 269 |
> div { |
265 | 270 |
display: -ms-flexbox; |
266 | 271 |
display: flex; |
267 | 272 |
flex-direction: column; |
268 | 273 |
-ms-flex-direction: column; |
274 |
picture { |
|
275 |
img { |
|
276 |
border-radius: $cell-border-radius $cell-border-radius 0 0; |
|
277 |
} |
|
278 |
@if $cell-title-cover-border == true { |
|
279 |
margin: #{extract-width($cell-border) * -1}; |
|
280 |
} |
|
281 |
} |
|
282 |
> h2:first-child { |
|
283 |
border-radius: 0; |
|
284 |
} |
|
285 |
} |
|
286 |
} |
|
287 |
@if $cell-image-position == top { |
|
288 |
> div { |
|
269 | 289 |
div { |
270 | 290 |
-ms-flex-order: 4; |
271 | 291 |
order: 4; |
... | ... | |
277 | 297 |
picture { |
278 | 298 |
-ms-flex-order: 0; |
279 | 299 |
order: 0; |
300 |
} |
|
301 |
> h2:first-child { |
|
302 |
-ms-flex-order: 1; |
|
303 |
order: 1; |
|
304 |
} |
|
305 |
} |
|
306 |
&.foldable { |
|
307 |
> div > picture { |
|
308 |
cursor: pointer; |
|
309 |
} |
|
310 |
} |
|
311 |
} |
|
312 |
@else if $cell-image-position == left-of-title { |
|
313 |
> div { |
|
314 |
position: relative; |
|
315 |
picture { |
|
316 |
position: absolute; |
|
317 |
top: $cell-image-padding / 2; |
|
318 |
left: 0; |
|
280 | 319 |
img { |
281 |
border-radius: $cell-border-radius $cell-border-radius 0 0;
|
|
320 |
width: $cell-image-width;
|
|
282 | 321 |
} |
283 | 322 |
@if $cell-title-cover-border == true { |
284 | 323 |
margin: #{extract-width($cell-border) * -1}; |
285 | 324 |
} |
286 | 325 |
} |
287 | 326 |
> h2:first-child { |
288 |
-ms-flex-order: 1; |
|
289 |
order: 1; |
|
290 |
border-radius: 0; |
|
327 |
padding-left: $cell-image-width + 5px; |
|
328 |
} |
|
329 |
> picture { |
|
330 |
display: block; |
|
291 | 331 |
} |
292 | 332 |
} |
293 | 333 |
&.foldable { |
294 | 334 |
> div > picture { |
295 |
cursor: pointer;
|
|
335 |
display: block;
|
|
296 | 336 |
} |
297 | 337 |
} |
298 | 338 |
} |
299 |
- |