diff --git a/docs/organizzare-i-contenuti/liste-di-immagini.md b/docs/organizzare-i-contenuti/liste-di-immagini.md index d9dc486d9..2125a2d8f 100644 --- a/docs/organizzare-i-contenuti/liste-di-immagini.md +++ b/docs/organizzare-i-contenuti/liste-di-immagini.md @@ -16,47 +16,56 @@ Di seguito gli esempi di elemento singolo della lista di immagini: Per utilizzare la didascalia sovrapposta è sufficiente aggiungere la classe `.it-grid-item-overlay` al div `.it-grid-item-wrapper`. +{% capture callout %} + +#### Utilizzo delle icone + +In caso di utilizzo delle icone si raccomanda di descriverne il senso ai lettori di schermo. Se sono solo decorative si può nasconderle con l'attributo `aria-hidden=true`. + +{% endcapture %}{% include callout.html content=callout type="warning" %} + +{% capture callout %} +Breaking feature dalla versione **2.11.0** + +Utilizzare i tag `
` e `
` per liste di immagini con didascalia. + +{% endcapture %}{% include callout.html content=callout type="danger" %} + {% comment %}Example name: Varianti didascalia{% endcomment %} {% capture example %}
-
-
-
descrizione immagine
-
-
+
+ Un'immagine generica segnaposto con angoli arrotondati in una figura. +
-
-
-
descrizione immagine
-
-
- - Didascalia - - +
+ Un'immagine generica segnaposto con angoli arrotondati in una figura. +
+ Testo didascalia + Significato icona +
+
-
-
-
descrizione immagine
-
-
- - Didascalia - - +
+ Un'immagine generica segnaposto con angoli arrotondati in una figura. +
+ Testo didascalia + Significato icona +
+
@@ -155,90 +164,72 @@ Per la corretta formattazione degli spazi di questo tipo di griglia, occorre agg
-
-
-
descrizione immagine
-
-
- - Didascalia - - +
+ Un'immagine generica segnaposto con angoli arrotondati in una figura. +
Testo didascalia + Significato icona +
+
-
-
-
descrizione immagine
-
-
- - Didascalia - - +
+ Un'immagine generica segnaposto con angoli arrotondati in una figura. +
Testo didascalia + Significato icona +
+
-
-
-
descrizione immagine
-
-
- - Didascalia - - +
+ Un'immagine generica segnaposto con angoli arrotondati in una figura. +
Testo didascalia + Significato icona +
+
-
-
-
descrizione immagine
-
-
- - Didascalia - - +
+ Un'immagine generica segnaposto con angoli arrotondati in una figura. +
Testo didascalia + Significato icona +
+
-
-
-
descrizione immagine
-
-
- - Didascalia - - +
+ Un'immagine generica segnaposto con angoli arrotondati in una figura. +
Testo didascalia + Significato icona +
+
-
-
-
descrizione immagine
-
-
- - Didascalia - - +
+ Un'immagine generica segnaposto con angoli arrotondati in una figura. +
Testo didascalia + Significato icona +
+
@@ -265,16 +256,18 @@ Per utilizzare l'immagine orizzontale, occorre aggiungere la classe `.it-grid-it
- +
-
descrizione immagine
+
+ Un'immagine generica segnaposto con angoli arrotondati in una figura. +
+ Testo didascalia + Significato icona +
+
- - Didascalia - -
@@ -285,13 +278,15 @@ Per utilizzare l'immagine orizzontale, occorre aggiungere la classe `.it-grid-it
-
descrizione immagine
+
+ Un'immagine generica segnaposto con angoli arrotondati in una figura. +
+ Testo didascalia + Significato icona +
+
- - Didascalia - -
@@ -300,13 +295,15 @@ Per utilizzare l'immagine orizzontale, occorre aggiungere la classe `.it-grid-it
-
descrizione immagine
+
+ Un'immagine generica segnaposto con angoli arrotondati in una figura. +
+ Testo didascalia + Significato icona +
+
- - Didascalia - - @@ -315,13 +312,15 @@ Per utilizzare l'immagine orizzontale, occorre aggiungere la classe `.it-grid-it
-
descrizione immagine
+
+ Un'immagine generica segnaposto con angoli arrotondati in una figura. +
+ Testo didascalia + Significato icona +
+
- - Didascalia - - @@ -346,180 +345,156 @@ Aggiungendo `data-bs-toggle="masonry"` al contenitore `row`, verrà attivato l'e
-
-
-
descrizione immagine
-
-
- - Didascalia - - +
+ descrizione immagine +
+ Didascalia + Significato icona +
+
-
-
-
descrizione immagine
-
-
- - Didascalia - - +
+ descrizione immagine +
+ Didascalia + Significato icona +
+
-
-
-
descrizione immagine
-
-
- - Didascalia - - +
+ descrizione immagine +
+ Didascalia + Significato icona +
+
-
-
-
descrizione immagine
-
-
- - Didascalia - - +
+ descrizione immagine +
+ Didascalia + Significato icona +
+
-
-
-
descrizione immagine
-
-
- - Didascalia - - +
+ descrizione immagine +
+ Didascalia + Significato icona +
+
-
-
-
descrizione immagine
-
-
- - Didascalia - - +
+ descrizione immagine +
+ Didascalia + Significato icona +
+
-
-
-
descrizione immagine
-
-
- - Didascalia - - +
+ descrizione immagine +
+ Didascalia + Significato icona +
+
-
-
-
descrizione immagine
-
-
- - Didascalia - - +
+ descrizione immagine +
+ Didascalia + Significato icona +
+
-
-
-
descrizione immagine
-
-
- - Didascalia - - +
+ descrizione immagine +
+ Didascalia + Significato icona +
+
-
-
-
descrizione immagine
-
-
- - Didascalia - - +
+ descrizione immagine +
+ Didascalia + Significato icona +
+
-
-
-
descrizione immagine
-
-
- - Didascalia - - +
+ descrizione immagine +
+ Didascalia + Significato icona +
+
-
-
-
descrizione immagine
-
-
- - Didascalia - - +
+ descrizione immagine +
+ Didascalia + Significato icona +
+
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 70b55baa8..69b2e968c 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -551,16 +551,15 @@ $crs-landcape-bottom: 5px; // Gridlist ************** $grid-item-df-proportion: 66.81222707423581%; $grid-item-df-double-proportion: 33.4061135371179%; -$grid-item-text-size: 1rem; -$grid-item-text-size-mob: 0.8rem; +$grid-item-text-size: 0.75rem; $grid-item-text-color: $neutral-1 !default; // Missing in the UI kit - need more attention $grid-item-text-overlay-bg: $neutral-1-a10 !default; // Missing in the UI kit - need more attention $grid-list-default-gap: 2px; $grid-list-text-gap: $v-gap; $grid-item-sm-col: 50%; $grid-item-lg-col: 33.333333%; -$grid-item-icon-mob-size: 24px; -$grid-item-icon-size-desk: 32px; +$grid-item-icon-size: 24px; +$grid-item-overlay: hsla(210%, 54%, 20, 0.85); // list $list-font-size: 1rem; diff --git a/src/scss/custom/_figcaption.scss b/src/scss/custom/_figcaption.scss index 099a8ca7d..0dc694bcb 100644 --- a/src/scss/custom/_figcaption.scss +++ b/src/scss/custom/_figcaption.scss @@ -1,3 +1,3 @@ .figure-caption { - font-size: 90%; + font-size: 0.75rem; } diff --git a/src/scss/custom/_gridlist.scss b/src/scss/custom/_gridlist.scss index 8cfb7a830..d50adf1be 100644 --- a/src/scss/custom/_gridlist.scss +++ b/src/scss/custom/_gridlist.scss @@ -1,41 +1,47 @@ //mobile .it-grid-item-wrapper { position: relative; + // img default proportion .img-responsive-wrapper { border-radius: $border-radius; + .img-responsive { padding-bottom: $grid-item-df-proportion; } } + // text .it-griditem-text-wrapper { display: flex; justify-content: space-between; - padding: $v-gap; align-items: center; + .it-griditem-text { - font-size: $grid-item-text-size-mob; - color: $grid-item-text-color; - font-weight: 600; + font-size: $grid-item-text-size; + font-weight: $font-weight-semibold; } + .icon { flex-shrink: 0; position: relative; - right: -$v-gap; fill: $primary; - width: $grid-item-icon-mob-size; - height: $grid-item-icon-mob-size; + width: $grid-item-icon-size; + height: $grid-item-icon-size; } } + // text overlay &.it-grid-item-overlay { position: relative; + .img-responsive-wrapper { + position: relative; + &:after { content: ''; display: block; - background: rgba(0, 0, 0, 0.5); + background: $grid-item-overlay; position: absolute; left: 0; top: 0; @@ -43,6 +49,7 @@ height: 100%; } } + .it-griditem-text-wrapper { position: absolute; left: 0; @@ -59,7 +66,18 @@ fill: #fff; } } + + .figure-img { + margin-bottom: 0; + } + + .figure-caption { + position: absolute; + z-index: 10; + color: #fff; + } } + a { display: block; text-decoration: none; @@ -85,24 +103,29 @@ .it-grid-list-wrapper { padding-left: $grid-list-default-gap * 2; padding-right: $grid-list-default-gap * 2; + // grid changes div[class^='col-'] { padding: 0 $grid-list-default-gap $grid-list-default-gap * 2 $grid-list-default-gap; } + .grid-row { display: flex; margin-left: -$grid-list-default-gap; margin-right: -$grid-list-default-gap; flex-wrap: wrap; } + // grid with label &.it-image-label-grid { padding-left: $grid-list-text-gap * 2; padding-right: $grid-list-text-gap * 2; + // grid changes div[class^='col-'] { padding: 0 $grid-list-text-gap $grid-list-text-gap * 2 $grid-list-text-gap; } + .grid-row { margin-left: -(($grid-list-text-gap * 2) + ($grid-list-default-gap * 2)); margin-right: -(($grid-list-text-gap * 2) + ($grid-list-default-gap * 2)); @@ -117,12 +140,14 @@ .img-responsive { padding-bottom: initial; height: auto; + .img-wrapper { position: inherit; left: initial; right: initial; width: initial; height: initial; + img { height: auto; object-fit: initial; @@ -139,20 +164,11 @@ &.it-grid-item-overlay { .it-griditem-text-wrapper { padding: $v-gap * 2 $v-gap * 3; + .it-griditem-text { font-size: $grid-item-text-size; } } } - // text - .it-griditem-text-wrapper { - .it-griditem-text { - font-size: $grid-item-text-size; - } - .icon { - width: $grid-item-icon-size-desk; - height: $grid-item-icon-size-desk; - } - } } }