GDL - Global Design Language

details 

<details open>
    <summary>
        Coronavirus, la fase 2 tra sicurezza e libertà: tutte le idee per ripartire
    </summary>
    <figure class="o-skeleton o-skeleton-media--horizontal u-relative">
        <picture class="u-block u-size-full u-absolute u-left u-top">
            <img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/600/338?random" alt="Coronavirus, la fase 2 tra sicurezza e libertà: tutte le idee per ripartire">
        </picture>
    </figure>
    <p>Nel dibattito su Ius culturae e Ius soli in molti criticano politiche di possibile apertura sostenendo che l’Italia sia tra i primi paesi UE per concessioni. Ma va fatto un ragionamento più ampio: La realtà è che fino a poco prima non l’avevamo concessa quasi a nessuno, come illustra con l&#39;abituale chiarezza su Twitter Matteo Villa di Ispi.</p>
</details>
 
<details {% if open %}open{% endif %}>
    <summary>
      {{title}}
    </summary>
    <figure class="o-skeleton o-skeleton-media--horizontal u-relative">
      <picture class="u-block u-size-full u-absolute u-left u-top">
        <img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="{{media.horizontal_mid}}" alt="{{title}}">
      </picture>
    </figure>
    <p>{{summary}}</p>
</details>
 
{
  "title": "Coronavirus, la fase 2 tra sicurezza e libertà: tutte le idee per ripartire",
  "summary": "Nel dibattito su Ius culturae e Ius soli in molti criticano politiche di possibile apertura sostenendo che l’Italia sia tra i primi paesi UE per concessioni. Ma va fatto un ragionamento più ampio: La realtà è che fino a poco prima non l’avevamo concessa quasi a nessuno, come illustra con l'abituale chiarezza su Twitter Matteo Villa di Ispi.",
  "open": true,
  "media": {
    "horizontal_mid": [
      "https://unsplash.it/600/338?random"
    ]
  }
}
  • Content: 
    body[data-model*="approfondimento"],
body[data-channel*="dossier"] {
  --details-bg: #{$approfondimento-gray-lighter};
  // --details-color: #{$approfondimento-gray-darker};
}

@media (prefers-color-scheme: dark) {
  body[data-model*="approfondimento"]:not([data-color-scheme*="light"]),
  body[data-channel*="dossier"]:not([data-color-scheme*="light"]) {
    --details-bg: #{$approfondimento-gray-darker};
    // --details-color: #{$approfondimento-white};

    details {
      summary {     
        &::before {
          background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXBsdXMtc3F1YXJlIj48cmVjdCB4PSIzIiB5PSIzIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHJ4PSIyIiByeT0iMiI+PC9yZWN0PjxsaW5lIHgxPSIxMiIgeTE9IjgiIHgyPSIxMiIgeTI9IjE2Ij48L2xpbmU+PGxpbmUgeDE9IjgiIHkxPSIxMiIgeDI9IjE2IiB5Mj0iMTIiPjwvbGluZT48L3N2Zz4=");
        }
      }

      &[open]{
        summary::before {
          background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLW1pbnVzLXNxdWFyZSI+PHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiByeD0iMiIgcnk9IjIiPjwvcmVjdD48bGluZSB4MT0iOCIgeTE9IjEyIiB4Mj0iMTYiIHkyPSIxMiI+PC9saW5lPjwvc3ZnPg==");
        }
      } 
    }
  }
}

body[data-color-scheme*="dark"][data-model*="approfondimento"],
body[data-color-scheme*="dark"][data-channel*="dossier"] {
  --details-bg: #{$approfondimento-gray-darker};
  // --details-color: #{$approfondimento-white}; 

}

@media (prefers-color-scheme: dark) {
  body:not([data-model*="approfondimento"]):not([data-color-scheme*="light"]):not([data-actual-url="/signup/premium-products/"]),
  body:not([data-channel*="dossier"]):not([data-color-scheme*="light"]):not([data-actual-url="/signup/premium-products/"]) {
    details {
      summary {     
        &::before {
          background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXBsdXMtc3F1YXJlIj48cmVjdCB4PSIzIiB5PSIzIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHJ4PSIyIiByeT0iMiI+PC9yZWN0PjxsaW5lIHgxPSIxMiIgeTE9IjgiIHgyPSIxMiIgeTI9IjE2Ij48L2xpbmU+PGxpbmUgeDE9IjgiIHkxPSIxMiIgeDI9IjE2IiB5Mj0iMTIiPjwvbGluZT48L3N2Zz4=");
        }
      }
      
      &[open]{
        summary::before {
          background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLW1pbnVzLXNxdWFyZSI+PHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiByeD0iMiIgcnk9IjIiPjwvcmVjdD48bGluZSB4MT0iOCIgeTE9IjEyIiB4Mj0iMTYiIHkyPSIxMiI+PC9saW5lPjwvc3ZnPg==");
        }
      } 
    }
  }
}

body[data-color-scheme*="dark"]:not([data-model*="approfondimento"]):not([data-channel*="dossier"]):not([data-actual-url="/signup/premium-products/"]){
  details {
    summary {     
      &::before {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXBsdXMtc3F1YXJlIj48cmVjdCB4PSIzIiB5PSIzIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHJ4PSIyIiByeT0iMiI+PC9yZWN0PjxsaW5lIHgxPSIxMiIgeTE9IjgiIHgyPSIxMiIgeTI9IjE2Ij48L2xpbmU+PGxpbmUgeDE9IjgiIHkxPSIxMiIgeDI9IjE2IiB5Mj0iMTIiPjwvbGluZT48L3N2Zz4=");
      }
    }
    
    &[open]{
      summary::before {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLW1pbnVzLXNxdWFyZSI+PHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiByeD0iMiIgcnk9IjIiPjwvcmVjdD48bGluZSB4MT0iOCIgeTE9IjEyIiB4Mj0iMTYiIHkyPSIxMiI+PC9saW5lPjwvc3ZnPg==");
      }
    } 
  }
}

details {
  margin-top: $margin-small;
  margin-bottom: $margin-small;
  padding: $padding-base;
  background-color: var(--background-color-gray);

  [data-model*="approfondimento"] & {
    background-color: var(--details-bg);
    color: var(--details-color);
  }

  summary {
    display: flex;
    margin: 0 0 $margin-small 0;
    list-style: none;
    cursor: pointer;
    @include type(heading-04);
    &::marker, /* Latest Chrome, Edge, Firefox */ 
    &::-webkit-details-marker /* Safari */ {
      display: none;
    }
    
    &::before {
      content: '\00a0';
      display:inline-block;
      width: 1.5rem;
      height: 1.5rem;
      margin-right: $margin-small;
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcGx1cy1zcXVhcmUiPjxyZWN0IHg9IjMiIHk9IjMiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgcng9IjIiIHJ5PSIyIj48L3JlY3Q+PGxpbmUgeDE9IjEyIiB5MT0iOCIgeDI9IjEyIiB5Mj0iMTYiPjwvbGluZT48bGluZSB4MT0iOCIgeTE9IjEyIiB4Mj0iMTYiIHkyPSIxMiI+PC9saW5lPjwvc3ZnPg==");
      background-repeat: no-repeat;
      background-size: contain;
    }
  }

  &[open]{

    summary::before {
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItbWludXMtc3F1YXJlIj48cmVjdCB4PSIzIiB5PSIzIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHJ4PSIyIiByeT0iMiI+PC9yZWN0PjxsaW5lIHgxPSI4IiB5MT0iMTIiIHgyPSIxNiIgeTI9IjEyIj48L2xpbmU+PC9zdmc+");
    }
  } 
}


.faq{
  details {
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.75rem;
    padding-top: 0.75rem;
  }
  details .faq-accordion{
    padding-top: 0.75rem;
  }
  details summary {
    @include type(label-04);
    display: flex;
    list-style: none;
    cursor: pointer;
  }
    details summary::marker, details summary::-webkit-details-marker {
      display: none; 
    }
    details summary::before {
      content: '\00a0';
      display: inline-block;
      width: 1.5rem;
      height: 1.5rem;
      margin-right: 0.75rem;
      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI0LjkzMzQgMTIuOTMzNEwxNi45MzM0IDIwLjkzMzRDMTYuNjY2NyAyMS4yIDE2LjQgMjEuMzMzNCAxNiAyMS4zMzM0QzE1LjYgMjEuMzMzNCAxNS4zMzM0IDIxLjIgMTUuMDY2NyAyMC45MzM0TDcuMDY2NjkgMTIuOTMzNEM2LjUzMzM1IDEyLjQgNi41MzMzNSAxMS42IDcuMDY2NjkgMTEuMDY2N0M3LjYwMDAyIDEwLjUzMzQgOC40MDAwMiAxMC41MzM0IDguOTMzMzUgMTEuMDY2N0wxNiAxOC4xMzM0TDIzLjA2NjcgMTEuMDY2N0MyMy42IDEwLjUzMzQgMjQuNCAxMC41MzM0IDI0LjkzMzQgMTEuMDY2N0MyNS40NjY3IDExLjYgMjUuNDY2NyAxMi40IDI0LjkzMzQgMTIuOTMzNFoiIGZpbGw9ImJsYWNrIi8+CjxtYXNrIGlkPSJtYXNrMF8wXzc1MCIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iNiIgeT0iMTAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIxMiI+CjxwYXRoIGQ9Ik0yNC45MzM0IDEyLjkzMzRMMTYuOTMzNCAyMC45MzM0QzE2LjY2NjcgMjEuMiAxNi40IDIxLjMzMzQgMTYgMjEuMzMzNEMxNS42IDIxLjMzMzQgMTUuMzMzNCAyMS4yIDE1LjA2NjcgMjAuOTMzNEw3LjA2NjY5IDEyLjkzMzRDNi41MzMzNSAxMi40IDYuNTMzMzUgMTEuNiA3LjA2NjY5IDExLjA2NjdDNy42MDAwMiAxMC41MzM0IDguNDAwMDIgMTAuNTMzNCA4LjkzMzM1IDExLjA2NjdMMTYgMTguMTMzNEwyMy4wNjY3IDExLjA2NjdDMjMuNiAxMC41MzM0IDI0LjQgMTAuNTMzNCAyNC45MzM0IDExLjA2NjdDMjUuNDY2NyAxMS42IDI1LjQ2NjcgMTIuNCAyNC45MzM0IDEyLjkzMzRaIiBmaWxsPSJ3aGl0ZSIvPgo8L21hc2s+CjxnIG1hc2s9InVybCgjbWFzazBfMF83NTApIj4KPHJlY3Qgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBmaWxsPSJibGFjayIvPgo8L2c+Cjwvc3ZnPgo=");
      background-repeat: no-repeat;
      background-size: contain; }
  details[open] summary::before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjAxIi8+CjxwYXRoIGQ9Ik0yNC45MzM0IDIwLjkzMzRDMjQuNjY2NyAyMS4yIDI0LjQgMjEuMzMzNCAyNCAyMS4zMzM0QzIzLjYgMjEuMzMzNCAyMy4zMzM0IDIxLjIgMjMuMDY2NyAyMC45MzM0TDE2IDEzLjg2NjdMOC45MzMzNSAyMC45MzM0QzguNDAwMDIgMjEuNDY2NyA3LjYwMDAyIDIxLjQ2NjcgNy4wNjY2OSAyMC45MzM0QzYuNTMzMzUgMjAuNCA2LjUzMzM1IDE5LjYgNy4wNjY2OSAxOS4wNjY3TDE1LjA2NjcgMTEuMDY2N0MxNS42IDEwLjUzMzQgMTYuNCAxMC41MzM0IDE2LjkzMzQgMTEuMDY2N0wyNC45MzM0IDE5LjA2NjdDMjUuNDY2NyAxOS42IDI1LjQ2NjcgMjAuNCAyNC45MzM0IDIwLjkzMzRaIiBmaWxsPSJibGFjayIvPgo8bWFzayBpZD0ibWFzazBfMF83MzgiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjYiIHk9IjEwIiB3aWR0aD0iMjAiIGhlaWdodD0iMTIiPgo8cGF0aCBkPSJNMjQuOTMzNCAyMC45MzM0QzI0LjY2NjcgMjEuMiAyNC40IDIxLjMzMzQgMjQgMjEuMzMzNEMyMy42IDIxLjMzMzQgMjMuMzMzNCAyMS4yIDIzLjA2NjcgMjAuOTMzNEwxNiAxMy44NjY3TDguOTMzMzUgMjAuOTMzNEM4LjQwMDAyIDIxLjQ2NjcgNy42MDAwMiAyMS40NjY3IDcuMDY2NjkgMjAuOTMzNEM2LjUzMzM1IDIwLjQgNi41MzMzNSAxOS42IDcuMDY2NjkgMTkuMDY2N0wxNS4wNjY3IDExLjA2NjdDMTUuNiAxMC41MzM0IDE2LjQgMTAuNTMzNCAxNi45MzM0IDExLjA2NjdMMjQuOTMzNCAxOS4wNjY3QzI1LjQ2NjcgMTkuNiAyNS40NjY3IDIwLjQgMjQuOTMzNCAyMC45MzM0WiIgZmlsbD0id2hpdGUiLz4KPC9tYXNrPgo8ZyBtYXNrPSJ1cmwoI21hc2swXzBfNzM4KSI+CjxyZWN0IHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iYmxhY2siLz4KPC9nPgo8L3N2Zz4K"); }
}
  • URL: /components/raw/details/details.scss
  • Filesystem Path: src/lib/components/details/details.scss
  • Size: 10.1 KB

No notes defined.