University of Leeds Design System v1.0.15

Widget

No notes defined.

{% set widgetWideContent = cards.wide_container %}

<div class="uol-widget-container uol-widget-container__{{ widget_type if widget_type }}">
  <div class="uol-widget{{ ' uol-widget--' + widget_type if widget_type }}{{ ' uol-widget--wide' if widgetWideContent }}">

    {% if widget_title or widget_lead or widget_link %}
      <div class="uol-widget__left-col">
    {% endif %}

        {% if widget_title or widget_lead or widget_link %}
          <div class="uol-widget__head">
        
            {% if widget_title %}
              <{{ widget_heading_level if widget_heading_level else 'h2' }} class="uol-widget__title">{{ widget_title }}</{{ widget_heading_level if widget_heading_level else 'h2' }}>
            {% endif %}

            {% if widget_lead %}
              <div class="uol-widget__lead">{{ widget_lead | safe }}</div>
            {% endif %}

            {% if widget_link %}
              <a class="uol-widget__link" href="{{ widget_link.url }}">{{ widget_link.text }}</a>
            {% endif %}
          </div>
        {% endif %}

        {% if widget_arrow_links.length > 0 %}
          <ul class="uol-widget__arrow-links">
            {% for link in widget_arrow_links %}
              <li class="uol-widget__arrow-links-item"><a href="{{link.url}}" class="uol-widget__arrow-link uol-arrow-link">{{link.title}}</a></li>
            {% endfor %}
          </ul>
        {% endif %}

    {% if widget_title or widget_lead or widget_link %}
      </div>
    {% endif %}

    <div class="uol-widget__content">
      {% block widget_content %}
    
      {% endblock %}
    </div>
  </div>
</div>
 
<div class="uol-widget-container uol-widget-container__">
    <div class="uol-widget">

        <div class="uol-widget__left-col">

            <div class="uol-widget__head">

                <h2 class="uol-widget__title">Widget Title only</h2>

            </div>

        </div>

        <div class="uol-widget__content">

        </div>
    </div>
</div>
  • Content: 
    .uol-widget-container {
  display: flex;
  justify-content: flex-start;
  box-sizing: border-box;
  margin-bottom: $spacing-4;
  width: 100%;
  
  .uol-col-debug & {
    background: rgba(hotpink, .3);
  }

  &:last-of-type {
    margin-bottom: $spacing-7;

    @include media(">=uol-media-m") {
      margin-bottom: $spacing-9;
    }

    // @include media(">=uol-media-l") {
    //   margin-bottom: ($spacing-7 * 2);
    // }
  }

  .uol-side-nav-container--populated + .uol-homepage-content & {
    @include media(">=uol-media-l") {
      padding-left: 0;
      padding-right: 0;
    }

    @include media(">=uol-media-xl") {
      padding-left: $spacing-1;
      padding-right: $spacing-1;
    }
  }
}

.uol-widget {
  position: relative;
  margin-top: $spacing-4;
  padding: 0 !important;
  flex-basis: 100% !important;

  @include media("<uol-media-l") {
    max-width: none;
  }

  @include media(">=uol-media-l") {
    margin-top: $spacing-8;
  }
}

  .uol-widget--cards {
    margin-top: 0;
    width: 100%;
  }

  .uol-widget--ctas,
  .uol-widget--content,
  .uol-widget--featured-content,
  .uol-widget--form,
  .uol-widget--news-events,
  .uol-widget--news-tiles,
  .uol-widget--events,
  .uol-widget--description-list,
  .uol-widget--accreditation-logos,
  .uol-widget--wide {
    @extend .uol-col;

    max-width: none;
  }

  .uol-widget--ctas {

    // @include media("<uol-media-m") {
    //   padding-top: $spacing-7 !important;
    // }


  }

  .uol-widget--featured-content {
    @include media("<uol-media-l") {
      border-bottom: $spacing-2 solid $color-brand--faded;
      padding-bottom: $spacing-5;
      margin-bottom: $spacing-5;
    }

    @include media(">=uol-media-l") {
      display: flex;
      flex: 2 1 auto;
      flex-basis: auto;
      align-items: flex-start;
    }
  }

  .uol-widget--ctas,
  .uol-widget--form {
    margin-top: 0;
    padding-bottom: 0;
  }

  .uol-widget {

    .uol-side-nav-container--populated + .uol-homepage-content & {
      flex-basis: 100%;
      max-width: none;
      padding: 0 !important;
    }
  }

  .uol-widget__head {
    position: relative;
    box-sizing: border-box;
    padding-bottom: $spacing-6;

    @include media(">=uol-media-l") {
      padding-bottom: calc(#{$spacing-6 * 1.25});
    }

    &:last-child {
      margin-bottom: 0;
    }

    display: flex;
    flex-direction: column;

    // TODO: Horrible IE hack - Find a better way
    .no-csspositionsticky & {
      padding: 3px;
    }

    @include media(">=uol-media-m") {
      // margin: 0 $spacing-5;
      margin: 0;
    }

    @include media(">=uol-media-l") {

      .no-csspositionsticky & {
        padding: 0;
      }
    }

    @include media(">=uol-media-xl") {
      // margin: 0 $spacing-6;
      margin: 0;
    }

    > * {
      max-width: 52rem;
    }

    .uol-widget--featured-content & {
      @include media(">=uol-media-l") {
        // width: 40%;
        // width: calc(100% / 3);
        padding: $spacing-4 $spacing-4 $spacing-7 0;

        // .uol-side-nav-container--populated + .uol-homepage-content & {
        //   width: 40%;
        // }

        &::before {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          width: $spacing-8;
          background: $color-brand--faded;
          border-radius: 0 0 0 6px;
          z-index: -1;
        }
      }
    }

    .uol-widget--news-events & {
      padding-bottom: 0;
    }

    .uol-widget--list-featured & {
      padding-bottom: $spacing-4;

      @include media(">=uol-media-m") {
        padding-bottom: $spacing-5;
      }

      @include media(">=uol-media-l") {
        padding-bottom: $spacing-6;
      }
    }
  }

  .uol-widget__title {
    @extend .uol-typography-heading-2;

    position: relative;
    margin: $spacing-6 0 0;
    overflow-wrap: break-word;

    @include media("<uol-media-l") {
      margin-top: $spacing-7;
    }

    &::before {
      content: "";
      position: absolute;
      display: inline-block;
      top: -#{$spacing-4};
      left: 0;
      width: $spacing-4;
      height: $spacing-2;
      background-color: $color-brand;

      @include media(">=uol-media-m") {
        width: $spacing-5;
      }

      @include media(">=uol-media-l") {
        width: $spacing-6;
        top: -#{$spacing-5};
      }
    }

    .uol-widget--featured-content & {
      max-width: none;
      margin: 0;

      @include media("<uol-media-l") {
        border-radius: 6px 6px 0 0;
        padding: $spacing-7 $spacing-4 $spacing-6;
        background: $color-brand--faded;

        &::before {
          top: $spacing-6;
          left: $spacing-4;
        }
      }

      @include media(">=uol-media-l") {
        margin-top: $spacing-2;
      }
    }
  }

  .uol-widget__lead {

    .uol-widget--featured-content & {

      @include media("<uol-media-l") {
        padding-left: $spacing-4;
        padding-right: $spacing-4;
      }

      @include media("<uol-media-l") {
        padding-top: $spacing-2;
      }
    }
  }

  .uol-widget__head,
  .uol-widget__lead {

    p {
      @extend %text-size-paragraph--intro;
      @extend %uol-font-sans-serif;
    }

    p:first-of-type {
      margin-top: $spacing-4; // add comment to force line update

      @include media(">=uol-media-l") {
        margin-top: $spacing-5;
      }

      @include media(">=uol-media-l") {
        margin-top: $spacing-5;
      }
    }

    &:last-child,
    p:last-of-type {
      margin-bottom: 0;
    }
  }

  .uol-widget__content {
    margin: $spacing-4 0 0;
    clear: both;

    > p {
      @extend .uol-typography-paragraph;
      
      &:first-of-type {
        margin-top: 0;
      }
    }
    // overflow-x: hidden;

    .uol-widget--cards & {
      overflow-x: initial;
    }

    @include media(">=uol-media-m") {
      margin: $spacing-4 0 0;
    }

    .uol-widget--featured-content & {
      @include media(">=uol-media-l") {
        margin-top: 0;
        width: calc(100% / 3 * 2);
        padding: 0 $spacing-6 $spacing-4;
        border-right: 4px solid $color-brand--faded;

        .uol-side-nav-container--populated + .uol-homepage-content & {
          width: 60%;
        }
      }
    }

    .uol-widget--list-featured & {
        margin-top: 0;
    }

    .uol-widget--form & {
      margin-top: $spacing-2;
    }
  }

    .uol-widget__content__text {
      @include media("<uol-media-l") {
        padding-left: $spacing-4;
        padding-right: $spacing-4;
      }
    }

  .uol-widget__link {
    @extend .uol-chevron-right;
    @include link_focus(1px);

    /*
    link chevrons not lined up in widget
    use of em in cehvron css so overwrite with em too
    */
    &::after {
      top: 0.25em;

      @include media(">=uol-media-m") {
        top: 0.473em;
      }
    }

    align-self: flex-start;
    font-size: 1.25rem;
    font-weight: $font-weight-medium--sans-serif;
    padding-right: 0.2em;
    color: inherit;
    text-decoration: none;
    text-decoration-color: rgba($color-white, 0);
    transition: text-decoration-color 0.3s ease;
    
    margin-top: $spacing-4;

    @include media(">=uol-media-l") {
      margin-top: $spacing-5;
    }

    @include media(">=uol-media-m") {
      font-weight: $font-weight-bold--sans-serif;
    }

    
  }

  .uol-widget__left-col {
    .uol-widget--featured-content & {
      @include media(">=uol-media-l") {
        width: calc(100% / 3);
      }
    }
  }

  .uol-widget__arrow-links {
    list-style-type: none;
    margin: 0;
    padding: 0;

    .uol-widget--featured-content & {
      @include media(">=uol-media-l") {
        margin-top: $spacing-5;
      }
    }
  }

  .uol-widget__arrow-links-item {
    margin: 0 0 $spacing-5 0;

    .uol-widget--featured-content & {
      margin: 0 $spacing-4 $spacing-5 $spacing-4;

      @include media(">=uol-media-l") {
        margin: 0 0 $spacing-4 0;
      }
    }
  }

  .uol-widget__arrow-link {
    @extend %text-size-paragraph;
    font-weight: $font-weight-bold--sans-serif;
    padding-top: $spacing-2;
    padding-bottom: $spacing-2;
    display: inline-block;
  }

/*
Rules for widget combinations
Generic spacing between widgets set on widget container
In following instances the widget itself has white space at the bottom
giving a net result white space too large
The following rules ensure visual gap is as required
*/

.uol-homepage-content {
  .uol-widget-container__facts-figures  + .uol-widget-container {
    margin-top: 0;
  
    @include media(">=uol-media-m") {
      margin-top: -40px;
    }
  }
  
  .uol-widget-container__description-list + .uol-widget-container {
    margin-top: -48px;
  
    @include media(">=uol-media-m") {
      margin-top: -32px;
    }
  }
  
  .uol-widget-container__tiles + .uol-widget-container {
    margin-top: - 8px;
  }
  
  .uol-widget-container__content .uol-spacing *:last-child  {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .uol-widget-container__content .uol-spacing .uol-in-text-cta  {
    padding-bottom: $spacing-6;
  }

  .uol-widget-container:last-of-type {
    margin-bottom: 0;
  }
  
  .uol-widget-container__facts-figures .uol-facts-figures:first-of-type {
    margin-top: 0;
  }
  
  .uol-widget-container__description-list .uol-description-list {
    margin-top: 0;
  }
}

.uol-homepage-content .uol-widget-container:last-of-type {
  margin-bottom: 48px;
}

.uol-homepage-content-container + .uol-section-nav-ctas {
  margin-top: 0;
}

.uol-widget__content {
  margin-top: 0;

  .uol-spacing >:first-child {
    margin-top: 0 !important;
  }
}
  • URL: /components/raw/uol-widget/_widget.scss
  • Filesystem Path: src/library/02-components/widget/_widget.scss
  • Size: 9.6 KB 
{
  "widget_title": "Widget Title only"
}