School of Social Work

List: Item Border

No notes defined.

<ul class="list--item-border">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    <li>Consequat semper viverra nam libero. In ante metus dictum at tempor commodo ullamcorper a.</li>
    <li>Aliquam sem et tortor consequat id. Amet luctus venenatis lectus magna fringilla.</li>
</ul>

<ul class="list--item-border">
    <li>Lorem ipsum</li>
    <li>dolor sit amet</li>
    <li>consectetur adipiscing elit</li>
    <li>sed do eiusmod </li>
    <li>tempor incididunt</li>
    <li>ut labore et</li>
    <li>dolore magna aliqua</li>
    <li>Consequat semper viverra</li>
    <li>nam libero in ante metus dictum at tempor commodo ullamcorper a</li>
    <li>Aliquam sem et tortor consequat id</li>
    <li>Amet luctus venenatis lectus magna fringilla</li>
</ul>
 
<ul class="list--item-border">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  <li>Consequat semper viverra nam libero. In ante metus dictum at tempor commodo ullamcorper a.</li>
  <li>Aliquam sem et tortor consequat id. Amet luctus venenatis lectus magna fringilla.</li>
</ul>

<ul class="list--item-border">
  <li>Lorem ipsum</li>
  <li>dolor sit amet</li>
  <li>consectetur adipiscing elit</li>
  <li>sed do eiusmod </li>
  <li>tempor incididunt</li>
  <li>ut labore et</li>
  <li>dolore magna aliqua</li>
  <li>Consequat semper viverra</li>
  <li>nam libero in ante metus dictum at tempor commodo ullamcorper a</li>
  <li>Aliquam sem et tortor consequat id</li>
  <li>Amet luctus venenatis lectus magna fringilla</li>
</ul>
  • Content: 
    .list--spaced {
	> li {
		margin-bottom: 1rem;
	}
}

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

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

	> li {
		display: inline-block;
		margin-right: $spacing-md;
	}
}

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

	> li {
		display: inline-block;
	}
}

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

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

	a {
		display: block;
	}
}

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

	> li {
		display: inline-block;

		&::before {
			content: '|';
			padding-inline-end: $spacing-xs;
		}

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

.list--item-border {
	list-style: none;
	padding: 0;

	> li {
		padding: 0 0 $spacing-sm;
		border-bottom: 1px solid transparent;
		border-image: linear-gradient(90deg,
			rgba($grey--lightest, 1) 80%,
			rgba($grey--lightest, 0) 100%,
		) 1; // NB: the '1' here is not a typo, it is critical for border-slice!

		.tag {
			margin-bottom: 0;
		}
	}
}

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

	li {
		display: flex;
		align-content: flex-start;
		justify-content: flex-start;

		> * {
			flex: 1 1 auto;
		}
	}

	.icon {
		flex: 0 0 1em;
		height: 1em;
		margin: 0.1em 0.5em 0.1em 0;
	}

	a {
		color: var(--text-color, $text-color);
	}
}

.list--icon-bullets--big {
	> li {
		margin-bottom: $spacing-md;
	}

	.icon {
		font-size: 1.5em;
		margin-top: -0.1em;
	}
}

.list--arrow-bullets {
	padding-inline-start: 0;
	max-width: calc(#{$line-length-max-rem} - 1.5em); // subtract base ul left hand padding to match p width
	margin-bottom: $spacing-3xl;
	@include line-height('normal');

	> li {
		list-style-type: none;
		padding-left: 1.5em;
		margin-bottom: $spacing-sm;

		&::before {
			content: '';
			display: block;
			float: left;
			margin: 0.3em 0.5em 0 -1.5em;
			width: 1em;
			height: 1em;
			background: no-repeat left center / 90% 90% url('#{$assets-directory}/img/rarr-secondary.svg');
		}

		a {
			&:only-child {
				display: block;
				text-decoration: none;
				color: var(--text-color, #{$text-color});

				&:hover,
				&:focus-visible {
					text-decoration: underline;
				}
			}
		}
	}
}

.list--columns,
.list--columns-wide {
	max-width: none;
	column-gap: $grid-gutter;

	@media (min-width: 10em) {
		columns: 15em;
	}

	@media (min-width: 35em) {
		columns: 18em;
	}

	@media (min-width: 40em) {
		columns: 20em;
	}

	> li {
		display: inline-table; // counteracts overflowing columns
		margin: 0;
		break-inside: avoid-column;
		box-sizing: border-box;
		width: 100%;
	}

	&.list--item-border {
		> li {
			padding-top: $spacing-xs;
			padding-bottom: $spacing-xs;
		}
	}
}

.list--columns-wide {
	@media (min-width: 10em) {
		columns: 18em;
	}

	@media (min-width: 35em) {
		columns: 20em;
	}

	@media (min-width: 60em) {
		columns: 28em;
	}
}
  • URL: /components/raw/list/_lists.scss
  • Filesystem Path: web/themes/custom/um-ssw/components/list/_lists.scss
  • Size: 2.9 KB