<commit_before>/*doc
---
title: Divided list
name: list
category: Layout
---
Standard divided/spaced list; similar to
an iOS table view.

Bottom spacing is provided with `chunk`.

```html_example
<ul class="list">
	<li class="list-item">
		<h2 class="chunk">Just a list item</h2>
	</li>
	<li class="list-item">
		<h2 class="chunk">Just a list item</h2>
	</li>
	<li class="list-item">
		<h2 class="chunk">Just a list item</h2>
	</li>
</ul>
```
*/

@include _modifier(list, reset) {
  list-style: none;
  padding-left: 0;
}

// TODO: consider moving this placeholder to util/_border.scss and documenting
%listBorders {
	@include standardBorder();
	display: block;
	padding-top: $space;
	&:first-child:not(a) {
		border-top: none;
		padding-top: 0;
	}
}

.list {
	@extend %list--reset;
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
}

/*doc
---
title: List item variants
name: listItemVariants
parent: list
---

A class of `.list-item` is __required__ on list items. The
following classes are optional variants:

Class                   | Description
----------------------- | -------------------------------
`.list-item--active`    | adds a background color to denote selected/active state
`.list-item--gutters`   | adds left and right padding to list item


```html_example
<div class="chunk">
	<h2>Touchable list items with selection</h2>
	<p>The <code>list-item</code> class can be applied to anchors instead for a touchable list</p>
</div>
<ul class="list">
	<li>
		<a href="#" class="list-item list-item--gutters">
			<div class="chunk">
				<h3 class="text--bold">Member Name</h3>
				<p class="text--caption">Something blah blah</p>
			</div>
		</a>
	</li>
	<li>
		<a href="#" class="list-item list-item--gutters list-item--active">
			<div class="chunk">
				<h3 class="text--bold">Member Name</h3>
				<p class="text--caption">Something blah blah</p>
			</div>
		</a>
	</li>
	<li>
		<a href="#" class="list-item list-item--gutters">
			<div class="chunk">
				<h3 class="text--bold">Member Name</h3>
				<p class="text--caption">Something blah blah</p>
			</div>
		</a>
	</li>
</ul>
```
*/
.list-item {
	@extend %listBorders;
	margin: 0;
	border-bottom: 1px solid transparent; // prevents margin collapse
}

.list-item--gutters {
	padding-left: $space;
	padding-right: $space;
}

.list-item--active {
	background-color: $C_lightGray;
	font-weight: $W_bold;
}<commit_msg>limit list item active styling to medium & up<commit_after>/*doc
---
title: Divided list
name: list
category: Layout
---
Standard divided/spaced list; similar to
an iOS table view.

Bottom spacing is provided with `chunk`.

```html_example
<ul class="list">
	<li class="list-item">
		<h2 class="chunk">Just a list item</h2>
	</li>
	<li class="list-item">
		<h2 class="chunk">Just a list item</h2>
	</li>
	<li class="list-item">
		<h2 class="chunk">Just a list item</h2>
	</li>
</ul>
```
*/

@include _modifier(list, reset) {
  list-style: none;
  padding-left: 0;
}

// TODO: consider moving this placeholder to util/_border.scss and documenting
%listBorders {
	@include standardBorder();
	display: block;
	padding-top: $space;
	&:first-child:not(a) {
		border-top: none;
		padding-top: 0;
	}
}

.list {
	@extend %list--reset;
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
}

/*doc
---
title: List item variants
name: listItemVariants
parent: list
---

A class of `.list-item` is __required__ on list items. The
following classes are optional variants:

Class                   | Description
----------------------- | -------------------------------
`.list-item--active`    | adds a background color to denote selected/active state (at medium & up only)
`.list-item--gutters`   | adds left and right padding to list item


```html_example
<div class="chunk">
	<h2>Touchable list items with selection</h2>
	<p>The <code>list-item</code> class can be applied to anchors instead for a touchable list</p>
</div>
<ul class="list">
	<li>
		<a href="#" class="list-item list-item--gutters">
			<div class="chunk">
				<h3 class="text--bold">Member Name</h3>
				<p class="text--caption">Something blah blah</p>
			</div>
		</a>
	</li>
	<li>
		<a href="#" class="list-item list-item--gutters list-item--active">
			<div class="chunk">
				<h3 class="text--bold">Member Name</h3>
				<p class="text--caption">Something blah blah</p>
			</div>
		</a>
	</li>
	<li>
		<a href="#" class="list-item list-item--gutters">
			<div class="chunk">
				<h3 class="text--bold">Member Name</h3>
				<p class="text--caption">Something blah blah</p>
			</div>
		</a>
	</li>
</ul>
```
*/
.list-item {
	@extend %listBorders;
	margin: 0;
	border-bottom: 1px solid transparent; // prevents margin collapse
}

.list-item--gutters {
	padding-left: $space;
	padding-right: $space;
}

@include atMediaUp(medium) {
	.list-item--active {
		background-color: $C_lightGray;
		font-weight: $W_bold;
	}
}
{'fraction_non_alphanumeric': 0.1945757139921923, 'fraction_numerical': 0.009451407437846723, 'mean_word_length': 3.189328743545611, 'pattern_counts': {'":': 0, '<': 111, '<?xml version=': 0, '>': 111, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1332824', 'n_tokens_mistral': 1881, 'n_tokens_neox': 1728, 'n_words': 479}