Staffordshire University Components

Lists: Inline

There are no notes for this item.

<ul class="list--inline">
    <li>This is</li>
    <li>A list of things</li>
    <li>Displayed inline</li>
    <li>Ta da!</li>
</ul>
 
<ul class="list--inline">
  <li>This is</li>
  <li>A list of things</li>
  <li>Displayed inline</li>
  <li>Ta da!</li>
</ul>
  • Content: 
    .list--unbulleted,
.list--unstyled {
  list-style: none;
  padding-left: 0;
}

.list--spaced {
  > li {
    margin-bottom: $spacing-lg;
  }
}

.list--inline {
  padding: 0;

  li {
    display: inline;
    margin-right: $spacing-xs;
  }
}

.list--links {
  @include line-height('normal');

  li {
    margin-bottom: $spacing-sm;
  }

  a {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.list--icon-bullets {
  list-style: none;
  padding: 0;

  li {
    padding-left: 1.5em;
  }

  .icon {
    float: left;
    top: 0.5em;
    margin-left: -1.5em;
  }

  a {
    display: inline-table; // prevents icon/text wrapping line
  }

  &.list--inline {
    li {
      margin-right: 1em;
    }
  }

  &.list--links {
    .icon {
      top: 0.2em;
    }
  }
}

.list--icon-bullets {

}

.list--inline-bulleted {
  padding: 0;

  li {
    display: inline;
    margin-right: $spacing-xs;

    &:before {
      content: '•';
      margin-right: $spacing-xs;
      font-weight: bold;
      color: $primary;
    }

    &:first-child {
      &:before {
        display: none;
      }
    }
  }
}



//.list-bordered-items {
//  list-style: none;
//  padding-left: 0;
//
//  li {
//    padding: $spacing-sm 0;
//    border-bottom: 1px solid $grey-light;
//  }
//}

//.list-icon-bullets {
//  list-style: none;
//  padding-left: 0;
//
//  li {
//    @include clearfix;
//    border-bottom: 1px solid $grey-light;
//  }
//
//  a {
//    @include typescale('md');
//    display: block;
//    text-decoration: none;
//    text-decoration-color: black;
//    padding: $spacing-md $spacing-md $spacing-md 3.5rem;
//
//    &:after {
//      bottom: 1.2rem;
//    }
//
//    .icon {
//      font-size: 2.5rem;
//      float: left;
//      margin-top: -0.75rem;
//      margin-left: -3.5rem;
//    }
//
//    &:hover {
//      text-decoration: underline;
//      @include link-pointy--hover;
//    }
//  }
//}
//
//.list-block {
//  list-style: none;
//  padding-left: 0;
//  margin-bottom: $spacing-4xl;
//
//  > li,
//  .item {
//    border-top: 1px solid $grey-light;
//    padding-top: $spacing-xl;
//    margin-bottom: $spacing-xl;
//  }
//
//  .item__title {
//    margin-top: 0;
//  }
//}
  • URL: /components/raw/list/_lists.scss
  • Filesystem Path: src/components/list/_lists.scss
  • Size: 2.2 KB