<section class="collapsed-table">
      <details class="collapsed-table__details">
          <summary>
              <span class="summary-label">All publishers data</span>
              <span class="summary-icon" aria-hidden="true"><svg width="15" height="9" viewBox="0 0 15 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.5715 2L7.73867 7.66956L2 2.0128" stroke="#153634" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round" />
                  </svg>
              </span>
          </summary>
          <div class="collapsed-table--content">
              <div class="table table--zebra table--primary-light">
                  <table>

                      <thead>
                          <th colspan="3">Location</th>
                      </thead>
                      <tbody>
                          <tr>

                              <td class="table__lead-cell" data-header="Title">
                                  <div class="icon">

                                      <i class="material-icons icon__mat-icon">add_location</i>

                                  </div>

                                  Include recipient location codes: <strong>64%</strong>
                              </td>

                              <td class="table__lead-cell" data-header="Title">
                                  <div class="icon">

                                      <i class="material-icons icon__mat-icon">add_location</i>

                                  </div>

                                  Include grant location name: <strong>63%</strong>
                              </td>

                              <td class="table__lead-cell" data-header="Title">
                                  <div class="icon">

                                      <i class="material-icons icon__mat-icon">add_location</i>

                                  </div>

                                  Include grant location codes: <strong>62%</strong>
                              </td>

                          </tr>
                      </tbody>

                      <thead>
                          <th colspan="3">Organisation Information</th>
                      </thead>
                      <tbody>
                          <tr>

                              <td class="table__lead-cell" data-header="Title">
                                  <div class="icon">

                                      <i class="material-icons icon__mat-icon">tag</i>

                                  </div>

                                  Include charity or company nos.: <strong>64%</strong>
                              </td>

                              <td class="table__lead-cell" data-header="Title">
                                  <div class="icon">

                                      <i class="material-icons icon__mat-icon">confirmation_number</i>

                                  </div>

                                  Include external org IDs: <strong>45%</strong>
                              </td>

                          </tr>
                      </tbody>

                      <thead>
                          <th colspan="3">Grant Information</th>
                      </thead>
                      <tbody>
                          <tr>

                              <td class="table__lead-cell" data-header="Title">
                                  <div class="icon">

                                      <i class="material-icons icon__mat-icon">event_note</i>

                                  </div>

                                  Include grant duration: <strong>57%</strong>
                              </td>

                              <td class="table__lead-cell" data-header="Title">
                                  <div class="icon">

                                      <i class="material-icons icon__mat-icon">format_quote</i>

                                  </div>

                                  Include programme names: <strong>56%</strong>
                              </td>

                              <td class="table__lead-cell" data-header="Title">
                                  <div class="icon">

                                      <i class="material-icons icon__mat-icon">label</i>

                                  </div>

                                  Include classifications: <strong>55%</strong>
                              </td>

                          </tr>
                      </tbody>

                      <thead>
                          <th colspan="3">Files</th>
                      </thead>
                      <tbody>
                          <tr>

                              <td class="table__lead-cell" data-header="Title">
                                  <div class="icon">

                                      <i class="material-icons icon__mat-icon">reorder</i>

                                  </div>

                                  Include metadata: <strong>81%</strong>
                              </td>

                              <td class="table__lead-cell" data-header="Title">
                                  <div class="icon">

                                      <span class="icon__overlaid-text">json</span>

                                  </div>

                                  Publish using JSON: <strong>75%</strong>
                              </td>

                              <td class="table__lead-cell" data-header="Title">
                                  <div class="icon">

                                      <span class="icon__overlaid-text">xlsx</span>

                                  </div>

                                  Publish using spreadsheets: <strong>79%</strong>
                              </td>

                          </tr>
                      </tbody>

                      <thead>
                          <th colspan="3">Up To Date</th>
                      </thead>
                      <tbody>
                          <tr>

                              <td class="table__lead-cell" data-header="Title">
                                  <div class="icon">

                                      <i class="material-icons icon__mat-icon">event_available</i>

                                  </div>

                                  Published data in the last year: <strong>91%</strong>
                              </td>

                              <td class="table__lead-cell" data-header="Title">
                                  <div class="icon">

                                      <i class="material-icons icon__mat-icon">event_available</i>

                                  </div>

                                  Published data in the last month: <strong>88%</strong>
                              </td>

                          </tr>
                      </tbody>

                  </table>
              </div>

          </div>
      </details>
      </footer>
  </section>
<section class="collapsed-table">
    <details class="collapsed-table__details" {% if opened == true %} open{% endif %}>
      <summary>
        <span class="summary-label">All publishers data</span>
        <span class="summary-icon" aria-hidden="true">{% include '@chevron-down' %}</span>
      </summary>
      <div class="collapsed-table--content">
        {% render '@table--publishers' %}
      </div>
    </details>
  </footer>
</section>
/* No context defined. */
  • Content:
    // Adapted with tweaks from Search Summary
    .collapsed-table {
      &__details {
        &[open] {
          summary {
            .summary-icon {
              svg {
                transform: rotateX(180deg);
              }
            }
    
            &:hover {
              .summary-icon {
                svg {
                  transform: translateY(-2px) rotateX(180deg);
                }
              }
            }
          }
        }
      }
    
      summary {
        display: flex;
        align-items: center;
        justify-content: center;
        background: $orange-tint-lighter;
        padding: 0.8rem 1rem;
    
        &::-webkit-details-marker {
          display: none;
        }
    
        &:hover {
          cursor: pointer;
    
          .summary-icon {
            svg {
              transform: translateY(2px);
            }
          }
        }
      }
    
      .summary-label {
        font-size: 1rem;
        line-height: 130%;
        font-weight: 700;
      }
    
      .summary-icon {
        border: 1px solid $black;
        border-radius: 100%;
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateY(0px);
        transition: transform 0.2s ease;
        margin-left: 12px;
    
        svg {
          transition: transform 0.2s ease;
        }
      }
    }
    
  • URL: /components/raw/collapsed-publishers-table/collapsed-publishers-table.scss
  • Filesystem Path: src/components/04-modules/collapsed-publishers-table/collapsed-publishers-table.scss
  • Size: 1.2 KB

No notes defined.