Cochrane design system

List: Inline

No notes defined.

<h2 class="h4">Unordered list:</h2>

	<ul class="  list--inline">
	    <li>One</li>
	    <li>Two</li>
	    <li>Three</li>
	    <li>Four</li>
	    <li>Five</li>
	    <li>Six</li>
	</ul>

	<h2 class="h4">Ordered list:</h2>

	<ol class="  list--inline">
	    <li>One</li>
	    <li>Two</li>
	    <li>Three</li>
	    <li>Four</li>
	    <li>Five</li>
	    <li>Six</li>
	</ol>
 
{% set classString = '' %}
{% for modifier in modifiers %}
	{% set classString = classString ~ '  list--' ~ modifier %}
{% endfor %}

<h2 class="h4">Unordered list:</h2>

<ul class="{{ classString }}">
	<li>One</li>
	<li>Two</li>
	<li>Three</li>
	<li>Four</li>
	<li>Five</li>
	<li>Six</li>
</ul>

<h2 class="h4">Ordered list:</h2>

<ol class="{{ classString }}">
	<li>One</li>
	<li>Two</li>
	<li>Three</li>
	<li>Four</li>
	<li>Five</li>
	<li>Six</li>
</ol>
  • Content: 
    .list--unbulleted {
  list-style: none;
  padding-inline-start: 0;
}

.list--inline {
  list-style: none;
  padding-inline-start: 0;
  > li {
    display: inline-block;
    &:not(last-child) {
      margin-right: $spacing-3xs;
    }
  }
}
.list--inline-spaced {
  > li {
    &:not(last-child) {
      margin-right: $spacing-sm;
    }
  }
}

.list--buttons {
  list-style: none;
  padding-inline-start: 0;

  > li {
    display: inline-block;
    &:not(last-child) {
      margin-right: $spacing-2xs;
    }

    a, a:visited {
      padding: 0.25rem 0.55rem;
      background: $toolbar-button;
      color: #fff;
      @include typescale('sm', 'em');
      border-radius: 0.3rem;
      font-weight: 400;
      text-decoration: none;

      &.list--button-alt {
        background: $secondary;
      }

      &.list--button-light {
        background: $grey--light;
        color: $navy;
      }

      &.list--button-none {
        background: none;
        color: $navy;
        text-decoration: underline;
      }

      &.list--button-outline {
        background: none;
        color: $navy;
        box-shadow: inset 0 0 0 2px $primary;
      }

    }
  }

  &.list--buttons-light {
    > li {
      a, a:visited {
        background: $grey--light;
        color: $navy;
      }
    }
  }

  &.list--buttons-none {
    > li {
      a, a:visited {
        background: none;
        color: $navy;
        text-decoration: underline;
      }
    }
  }
}



.list--spaced {
  > li {
    padding-top: $spacing-xs;
    padding-bottom: $spacing-xs;
  }
}

.list--compact {
  > li {
    margin-bottom: 0;
  }
}

.list--spaced.list--inline {
  > li:not(last-child) {
    margin-right: $spacing-md;
  }
}

.list--icon-links {
  li {
    margin-bottom: 1em;
  }
  a {
    text-decoration: none;
  }
  .icon {
    margin-right: 0.5em;
  }
}
  • URL: /components/raw/list/_lists.scss
  • Filesystem Path: app/components/02-components/list/_lists.scss
  • Size: 1.8 KB