From 646bf412e83d279ee030bf8bbbf933959d4d3b36 Mon Sep 17 00:00:00 2001 From: Andrea Stagi Date: Tue, 2 May 2023 14:09:28 +0200 Subject: [PATCH] feat: new callout component --- docs/componenti/callout.md | 69 ++++++++++++++++++++++++++++------- src/scss/custom/_callout.scss | 63 +++++++++++++++++++++++++++----- 2 files changed, 108 insertions(+), 24 deletions(-) diff --git a/docs/componenti/callout.md b/docs/componenti/callout.md index ca6307674d..fd26c59e6d 100644 --- a/docs/componenti/callout.md +++ b/docs/componenti/callout.md @@ -10,7 +10,13 @@ I Callout posso essere utilizzati per evidenziare alcune parti del testo che ric ## Esempi -Il Callout basico è costituito da un contenitore `
` con classe `.callout`, un titolo contenuto in un `
` con classe `.callout-title` e un testo contenuto in uno o più tag `

`. +{% capture callout %} +Breaking feature dalla versione **2.7.0** + +Il contenitore `

` con classe `.callout` deve essere seguito da un ulteriore contenitore `
` con classe `.callout-inner`. Seguire gli esempi e la successiva descrizione per capire la composizione del nuovo componente. +{% endcapture %}{% include callout.html content=callout type="danger" %} + +Il Callout basico è costituito da un contenitore `
` con classe `.callout`, un contenitore `
` con classe `.callout-inner` contenente a sua volta un titolo contenuto in un `
` con classe `.callout-title`. A seguire il testo del contenuto principale del Callout incluso in uno o più tag `

`. Al titolo può essere aggiunta un'icona a scelta fra quelle disponibili, avendo cura di nasconderla agli screen reader con la proprietà `aria-hidden="true"`. @@ -23,10 +29,15 @@ Nel caso l'icona comunicasse visivamente contenuti non disponibili nel testo (ad {% comment %}Example name: Testo{% endcomment %} {% capture example %} -

-
Titolo callout
-

Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.

+
+
+ + + Titolo callout +
+

Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.

+
{% endcapture %}{% include example.html content=example %} @@ -40,8 +51,14 @@ Aggiungere la classe `.success` per indicare una procedura andata a buon fine. {% capture example %}
-
Usa
-

Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.

+
+
+ + + Usa +
+

Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.

+
{% endcapture %}{% include example.html content=example %} @@ -53,8 +70,14 @@ Aggiungere la classe `.warning` per indicare una procedura o testo che richiede {% capture example %}
-
Attenzione
-

Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.

+
+
+ + + Attenzione +
+

Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.

+
{% endcapture %}{% include example.html content=example %} @@ -66,8 +89,14 @@ Aggiungere la classe `.danger` per indicare un errore o una procedura pericolosa {% capture example %}
-
Non usare
-

Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.

+
+
+ + + Non usare +
+

Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.

+
{% endcapture %}{% include example.html content=example %} @@ -79,8 +108,14 @@ Aggiungere la classe `.important` per attirare ulteriormente l'attenzione. {% capture example %}
-
Importante
-

Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.

+
+
+ + + Importante +
+

Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.

+
{% endcapture %}{% include example.html content=example %} @@ -92,8 +127,14 @@ Aggiungere la classe `.note` per caratterizzare il Callout come una nota. {% capture example %}
-
Note a riguardo
-

Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.

+
+
+ + + Note a riguardo +
+

Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.

+
{% endcapture %}{% include example.html content=example %} diff --git a/src/scss/custom/_callout.scss b/src/scss/custom/_callout.scss index 9f8ed7e516..37283c6bf7 100644 --- a/src/scss/custom/_callout.scss +++ b/src/scss/custom/_callout.scss @@ -1,10 +1,15 @@ .callout { - padding: 2.5rem 2.222rem; - border: 2px solid $color-border-secondary; position: relative; max-width: 60ch; - margin: 1.75rem 0 1rem; - border-radius: 8px; + overflow: hidden; + + .callout-inner { + padding: 1.1rem 2.222rem; + border: 2px solid; + border-top: 0; + border-color: $color-border-secondary; + margin: 1.75rem 0 1rem; + } // Highlights version &.callout-highlight { @@ -12,6 +17,11 @@ border-left: 2px solid $color-border-secondary; border-radius: 0; padding: 0 2.222rem; + p { + &:last-child { + margin: 0; + } + } .callout-title { margin-bottom: 1.556rem; } @@ -89,6 +99,9 @@ // color versions &.success { border-color: $success; + .callout-inner { + border-color: rgba($success, 1); + } .callout-title { color: $success; .icon { @@ -97,10 +110,19 @@ span { border-color: $success; } + .text:after { + border-color: $success; + } + &:before { + border-color: $success; + } } } &.warning { border-color: $warning; + .callout-inner { + border-color: $color-border-warning; + } .callout-title { color: $color-text-warning; .icon { @@ -113,6 +135,9 @@ } &.danger { border-color: $danger; + .callout-inner { + border-color: rgba($danger, 1); + } .callout-title { color: $danger; .icon { @@ -125,6 +150,9 @@ } &.important { border-color: $success; + .callout-inner { + border-color: $success; + } .callout-title { color: $success; .icon { @@ -137,6 +165,9 @@ } &.note { border-color: $primary; + .callout-inner { + border-color: $primary; + } .callout-title { color: $primary; .icon { @@ -185,11 +216,26 @@ // standard title &:not(.callout-highlight):not(.callout-more) { .callout-title { - position: absolute; + position: relative; font-size: 1rem; padding: 0 1.389rem; - background: $white; - top: -0.78em; + top: -2em; + .text:after { + content: ''; + top: 0.78em; + border-top: 2px solid; + position: absolute; + width: 200%; + margin-left: calc(10px + 0.7rem); + } + &:before { + content: ''; + top: 0.78em; + border-top: 2px solid; + position: absolute; + width: 3.222rem; + left: calc(-40px - 0.7rem); + } } } @@ -198,9 +244,6 @@ font-family: $font-family-serif; font-size: 0.889rem; color: $color-text-secondary; // UI kit - &:last-child { - margin: 0; - } &.callout-big-text { font-weight: bold; font-size: 1.111rem;