University of Staffordshire Pattern Library

Sliders: Modules

No notes defined.

<div class="slider--modules  js-slider--variable">
    <div>
        <table class="table--modules">
            <caption class="visually-hidden">Year x compulsory modules</caption>
            <thead>
                <tr>
                    <th colspan="2" class="th--pale-blue">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>
    </div>

    <div>
        <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>
                        Introduction To Applied Clinical Paramedic Practice
                    </td>
                    <td class="table--modules__credits">30 credits</td>
                </tr>
                <tr>
                    <td>
                        Introduction To Biological Sciences And Pharmacology For Paramedic Practice
                    </td>
                    <td class="table--modules__credits">15 credits</td>
                </tr>
                <tr>
                    <td>
                        Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                    </td>
                    <td class="table--modules__credits">999 credits</td>
                </tr>
                <tr>
                    <td>
                        The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.
                    </td>
                    <td class="table--modules__credits">999 credits</td>
                </tr>
                <tr>
                    <td>
                        Staffordshire University is going global with a programme packed full of free events to start the new decade.
                    </td>
                    <td class="table--modules__credits">999 credits</td>
                </tr>

            </tbody>
        </table>
    </div>

    <div>
        <table class="table--modules">
            <caption class="visually-hidden">Year x compulsory modules</caption>
            <thead>
                <tr>
                    <th colspan="2" class="th--pale-blue">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>
    </div>

    <div>
        <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>
                        Introduction To Applied Clinical Paramedic Practice
                    </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>
            </tbody>
        </table>
    </div>
</div>
 
<div class="slider--modules  js-slider--variable">
  <div>
    {% include '@table--modules' %}
  </div>

  <div>
    <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>
            Introduction To Applied Clinical Paramedic Practice
        </td>
        <td class="table--modules__credits">30 credits</td>
      </tr>
      <tr>
        <td>
            Introduction To Biological Sciences And Pharmacology For Paramedic Practice
        </td>
        <td class="table--modules__credits">15 credits</td>
      </tr>
      <tr>
        <td>
            {{ lorem }}
        </td>
        <td class="table--modules__credits">999 credits</td>
      </tr>
      <tr>
        <td>
            {{ placeholderPara1 }}
        </td>
        <td class="table--modules__credits">999 credits</td>
      </tr>
      <tr>
        <td>
            {{ placeholderPara2 }}
        </td>
        <td class="table--modules__credits">999 credits</td>
      </tr>

      </tbody>
    </table>
  </div>

  <div>
    {% include '@table--modules' %}
  </div>

  <div>
    <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>
            Introduction To Applied Clinical Paramedic Practice
        </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>
      </tbody>
    </table>
  </div>
</div>
  • Content: 
    @import '../../assets/js/vendor/slick-1.8.1/slick/slick.scss';

.slick-slider {
}

.slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: $page-gutter-small*2;
  width: 1em;
  height: 1em;
  padding: 0;
  text-indent: -999em;
  background: transparent;
  color: transparent;
  border: 0;
  cursor: pointer;
  z-index: 2;
  overflow: hidden; // prevents odd outline shape

  &:hover {
    opacity: 0.8;
  }

  @media (min-width: $wrap-large-gutter-width) {
    font-size: $page-gutter-large*2;
  }

  &:before {
    content: '';
    display: block;
    margin: auto;
    width: 1em;
    height: 1em;
    background: $neutral--primary url('#{$image-theme-directory-icon}/icon-gt-white.svg') no-repeat 55% 50%;
    background-size: 30%;
    border-radius: 100%;
  }
}

.slick-next {
  right: -#{$page-gutter-small/1.1};

  @media (min-width: $wrap-large-gutter-width) {
    right: -#{$page-gutter-large};
  }

  @media (min-width: $wrap-full-gutter-width) {
    right: -#{$page-gutter-full};
  }
}

.slick-prev {
  left: -#{$page-gutter-small/1.1};

  @media (min-width: $wrap-large-gutter-width) {
    left: -#{$page-gutter-large};
  }

  @media (min-width: $wrap-full-gutter-width) {
    left: -#{$page-gutter-full};
  }

  &:before {
    transform: rotate(180deg);
  }
}

.slick-disabled {
  opacity: 0;
  visibility: hidden;
}

// --

.slider {

}

.slider--tiles {
  .slick-slide {
    // these are sized in JS,
    // see sliderInit() in app.js for .js-facility-slider
    // not ideal as they're pixel based not (r)em, but will do for now.
  }
}

.slider--event-cards {
  .slick-slide {
    margin: 0 $grid-gutter 0 0;
  }
}

.slider--facilities {
  .slick-track {
    margin: 0 -$grid-gutter;
  }
  .slick-slide {
    margin: 0 $grid-gutter;
  }
}

.accolade-slider {
  &__item {
    text-align: center;
    margin: 0 $grid-gutter;
  }

  &__item-title {
    margin-bottom: $spacing-xs;
    border-bottom: 1px solid #FFF;
    padding-bottom: $spacing-xs;
    color: #FFF;
  }

  &__item-description {
    @include typescale('sm');
    @include line-height('normal');
  }

  &__item-img {
    margin: auto;
    width: auto;
    max-height: 2em;
  }

  &__item-figure {
    margin-left: auto!important;
    margin-right: auto!important;
    margin: 0 0 1rem 0;

    & svg {
      max-height: 100px;
    }
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
}

.js-slider--responsive {
  .slick-slide {
    margin: 0 $grid-gutter 0;
  }

  .slick-prev {
    left: 0;
  }

  .slick-next {
    right: 0;
  }
}


.slider--modules {
  // these are sized in JS,
  // see sliderInit() in app.js for .js-slider--variable

  .slick-slide {
    max-width: 80vw;
    margin: 0 $grid-gutter-small;

    @media (min-width: $wrap-width) {
      max-width: $wrap-width - 15rem;
    }
  }
}

.slider--gallery {

  &__nav {

    @at-root .no-js & {
      display: none;
    }

    img {
      box-sizing: border-box;
      border: $spacing-2xs solid transparent;
    }

    .slick-current {
      img {
        border-color: $primary;
      }
    }
  }
}

.js-slider--logos {

  .slick-slide {
    padding: 0 1rem;
  }

  .slick-track {
    display: flex;
  }

  .slick-track .slick-slide {
    display: flex;
    height: auto;
    align-items: center;
    justify-content: center;
  }

  .logo { margin: 0 10%; }
  .logo--low-aspect-ratio { margin: 0 25%; }
}
  • URL: /components/raw/slider/_slider.scss
  • Filesystem Path: src\components\slider\_slider.scss
  • Size: 3.6 KB