Staffordshire University Components

Table: Modules

There are no notes for this item.

<table class="table--modules">
    <caption class="visually-hidden">Year x compulsory modules</caption>
    <thead>
        <tr>
            <th colspan="2">Year x compulsory modules</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <a href="">
                    Introduction To Applied Clinical Paramedic Practice
                </a>
            </td>
            <td class="table--modules__credits">30 credits</td>
        </tr>
        <tr>
            <td>
                <a href="">
                    Introduction To Biological Sciences And Pharmacology For Paramedic Practice
                </a>
            </td>
            <td class="table--modules__credits">15 credits</td>
        </tr>
        <tr>
            <td>
                <a href="">
                    Introduction To Clinical Skills For Paramedic Practice
                </a>
            </td>
            <td class="table--modules__credits">30 credits</td>
        </tr>
        <tr>
            <td>
                <a href="" ">
        Introduction To Communication And Professionalism For Paramedic Practice
      </a>
    </td>
    <td class=" table--modules__credits">30 credits</td>
        </tr>
        <tr>
            <td>
                <a href="">
                    Vulnerable Groups And Social Determinants Of Healthcare
                </a>
            </td>
            <td class="table--modules__credits">15 credits</td>
        </tr>

    </tbody>
</table>
 
<table class="table--modules">
  <caption class="visually-hidden">Year x compulsory modules</caption>
  <thead>
  <tr>
    <th colspan="2">Year x compulsory modules</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
      <a href="">
        Introduction To Applied Clinical Paramedic Practice
      </a>
    </td>
    <td class="table--modules__credits">30 credits</td>
  </tr>
  <tr>
    <td>
      <a href="">
        Introduction To Biological Sciences And Pharmacology For Paramedic Practice
      </a>
    </td>
    <td class="table--modules__credits">15 credits</td>
  </tr>
  <tr>
    <td>
      <a href="" >
        Introduction To Clinical Skills For Paramedic Practice
      </a>
    </td>
    <td class="table--modules__credits">30 credits</td>
  </tr>
  <tr>
    <td>
      <a href="" ">
        Introduction To Communication And Professionalism For Paramedic Practice
      </a>
    </td>
    <td class="table--modules__credits">30 credits</td>
  </tr>
  <tr>
    <td>
      <a href="" >
        Vulnerable Groups And Social Determinants Of Healthcare
      </a>
    </td>
    <td class="table--modules__credits">15 credits</td>
  </tr>

  </tbody>
</table>
  • Content: 
    table {
  // there are some base styles set on this element in the 'base-elements' mixin,
  // in __vars/typography
}

.table {
}

.table--modules {
  thead {
    td, th {
      background: $table-accent;
      color: white;
    }
  }

  &__credits {
    text-align: center;
    background: $table-accent--light;
    color: white;
  }
}

.table--apply {
  font-size: 1em;

  &,
  tr,
  th {
    background: none; // reasons: this normally sits on a dark bg box
    color: inherit; // reasons: this normally sits on a dark bg box
    text-align: left;
  }

  thead, tr {
    border-bottom-color: rgba(#888, 0.2);
  }

  tr {
  }

  .button {
    margin: $spacing-sm 0;
    white-space: pre; // this is a bit strong, but we really want to avoid this wrapping
  }

  @media (max-width: 60rem) {
    // a MAX WIDTH media query? Not mobile-first?!
    // Yeah, I know. Tables are inherently horrible and not mobile-first.
    // This is an exception. *slaps own wrist*

    tr {
      width: 100%;
      padding: $spacing-sm 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
    }

    thead {
      display: none;
    }

    [data-label] {
      &:before {
        content: attr(data-label) ":";
        font-weight: 500;
        padding-right: 0.5em;
      }
    }

    &__buttonCell {
      flex: 1 1 100%;
    }
  }
}
  • URL: /components/raw/table/_tables.scss
  • Filesystem Path: src/components/table/_tables.scss
  • Size: 1.4 KB