From acf4c404413372c941e56344929297f85fd96265 Mon Sep 17 00:00:00 2001
From: Serghei Mihai Position de l'image qui peut être associée à une cellule « démarches
d'une catégorie », les valeurs possibles sont top pour
avoir l'image en haut de cellule et after-title pour avoir
- l'image après le titre de cellule.
+ l'image après le titre de cellule, left-of-title pour
+ avoir l'image à gauche du titre de la cellule
after-title
$cell-image-width
Largeur, en pixels, de l'image qui peut être associée à une + cellule « démarches d'une catégorie ». Le titre de la cellule sera + afin de laisser de ne pas interférer avec l'image
50px
$cell-image-padding
Espace autour de l'image qui peut être associée à une cellule « démarches diff --git a/static/includes/_cells.scss b/static/includes/_cells.scss index 1ac859cd..efa9c4d8 100644 --- a/static/includes/_cells.scss +++ b/static/includes/_cells.scss @@ -25,9 +25,14 @@ $cell-entry-hover-effect: none !default; // $cell-image-position: define where is set the associated image (in // "forms of category"; possible values are: // top: top of the cell +// left-of-title: to the left of title // after-title: after the title (default) $cell-image-position: after-title !default; +// $cell-image-width: define the width of the associated image (in +// "forms of category" cell; +$cell-image-width: 50px !default; + // $cell-image-padding: define padding of cell image. $cell-image-padding: 0.5rem !default; @@ -260,12 +265,27 @@ div.wcscurrentformscell ul { display: block; padding: $cell-image-padding; } - @if $cell-image-position == top { + @if $cell-image-position == top or $cell-image-position == left-of-title { > div { display: -ms-flexbox; display: flex; flex-direction: column; -ms-flex-direction: column; + picture { + img { + border-radius: $cell-border-radius $cell-border-radius 0 0; + } + @if $cell-title-cover-border == true { + margin: #{extract-width($cell-border) * -1}; + } + } + > h2:first-child { + border-radius: 0; + } + } + } + @if $cell-image-position == top { + > div { div { -ms-flex-order: 4; order: 4; @@ -277,22 +297,42 @@ div.wcscurrentformscell ul { picture { -ms-flex-order: 0; order: 0; + } + > h2:first-child { + -ms-flex-order: 1; + order: 1; + } + } + &.foldable { + > div > picture { + cursor: pointer; + } + } + } + @else if $cell-image-position == left-of-title { + > div { + position: relative; + picture { + position: absolute; + top: $cell-image-padding / 2; + left: 0; img { - border-radius: $cell-border-radius $cell-border-radius 0 0; + width: $cell-image-width; } @if $cell-title-cover-border == true { margin: #{extract-width($cell-border) * -1}; } } > h2:first-child { - -ms-flex-order: 1; - order: 1; - border-radius: 0; + padding-left: $cell-image-width + 5px; + } + > picture { + display: block; } } &.foldable { > div > picture { - cursor: pointer; + display: block; } } } -- 2.26.1