<commit_before>/*doc
---
title: Avatar
name: avatar
category: UI Components
---

```html_example
<ul class="inlineblockList">
	<li>
		<a href="#" class="avatar avatar--person" style="background-image: url(http://photos3.meetupstatic.com/photos/member/9/1/8/4/thumb_141217252.jpeg);"></a>
	</li>
	<li>
		<a href="#" class="avatar avatar--person avatar--small" style="background-image: url(http://photos3.meetupstatic.com/photos/member/9/1/8/4/thumb_141217252.jpeg);"></a>
	</li>
	<li>
		<a href="#" class="avatar avatar--person avatar--big" style="background-image: url(http://photos4.meetupstatic.com/photos/member/d/0/2/c/member_156833292.jpeg);"></a>
	</li>
	<li>
		<a href="#" class="avatar avatar--person avatar--fb-friend" style="background-image: url(http://photos4.meetupstatic.com/photos/member/5/a/2/thumb_109681442.jpeg);"></a>
	</li>
</ul>
```
*/

//
// Avatar base
//
%avatar,
.avatar {
	@extend %imgFill;
	background-color: $C_collectionBGLight;
	background-position: center 42%;
	display: inline-block;
	font-size: $media-m * 2/3;
	height: $media-m;
	text-indent: 100%;
	white-space: nowrap;
	vertical-align: top;
	width: $media-m;
}


//
// Size variants
//
.avatar--xsmall {
	font-size: $media-xs;
	height: $media-xs;
	width: $media-xs;
}
.avatar--small {
	width: $media-s;
	height: $media-s;
	font-size: $media-s;
}
.avatar--big {
	width: $media-xl;
	height: $media-xl;
	font-size: $media-l * 2/3;
}


//
// Type variants
//
.avatar--person {
	@extend %avatar;
	vertical-align: middle;
	border-radius: 999px;
	box-sizing: border-box;
}


//
// Extras
//
// TODO: fix selectors
%avatarCharm {
	position: relative;
	overflow: visible;

	&:after {
		background-position: center;
		background-repeat: no-repeat;
		background-size: 10px;
		border-radius: 999px;
		bottom: 0;
		content: "";
		display: block;
		font-size: 10px;
		font-weight: $W_bold;
		height: $space;
		line-height: $space;
		position: absolute;
		right: 0;
		text-align: center;
		text-indent: 0%;
		width: $space;
	}
}

.avatar--fb-friend {
	@extend %avatarCharm;
	&:after {
		background-color: $C_facebook;
		color: $C_textPrimaryInverted;
		content: "f";
	}
}

.avatar--org {
	@extend %avatarCharm;
	&:after {
		background-color: $C_accent;
		background-image: url('img/org-badge.svg'); // TODO: no imgs in sassquatch... what do we do with this...
		color: $C_textPrimaryInverted;
	}
}
<commit_msg>avatars are -s at mobile, -m above mobile<commit_after>/*doc
---
title: Avatar
name: avatar
category: UI Components
---

```html_example
<ul class="inlineblockList">
	<li>
		<a href="#" class="avatar avatar--person" style="background-image: url(http://photos3.meetupstatic.com/photos/member/9/1/8/4/thumb_141217252.jpeg);"></a>
	</li>
	<li>
		<a href="#" class="avatar avatar--person avatar--small" style="background-image: url(http://photos3.meetupstatic.com/photos/member/9/1/8/4/thumb_141217252.jpeg);"></a>
	</li>
	<li>
		<a href="#" class="avatar avatar--person avatar--big" style="background-image: url(http://photos4.meetupstatic.com/photos/member/d/0/2/c/member_156833292.jpeg);"></a>
	</li>
	<li>
		<a href="#" class="avatar avatar--person avatar--fb-friend" style="background-image: url(http://photos4.meetupstatic.com/photos/member/5/a/2/thumb_109681442.jpeg);"></a>
	</li>
</ul>
```
*/

//
// Avatar base
//
%avatar,
.avatar {
	@extend %imgFill;
	background-color: $C_collectionBGLight;
	background-position: center 42%;
	display: inline-block;
	font-size: $media-s * 2/3;
	height: $media-s;
	text-indent: 100%;
	white-space: nowrap;
	vertical-align: top;
	width: $media-s;

	@include atMediaUp(small) {
		font-size: $media-m;
		height: $media-m;
		width: $media-m;
	}

}


//
// Size variants
//
.avatar--small {
	font-size: $media-xs;
	height: $media-xs;
	width: $media-xs;
}
.avatar--big {
	font-size: $media-l * 2/3;
	height: $media-xl;
	width: $media-xl;
}


//
// Type variants
//
.avatar--person {
	@extend %avatar;
	vertical-align: middle;
	border-radius: 999px;
	box-sizing: border-box;
}


//
// Extras
//
// TODO: fix selectors
%avatarCharm {
	position: relative;
	overflow: visible;

	&:after {
		background-position: center;
		background-repeat: no-repeat;
		background-size: 10px;
		border-radius: 999px;
		bottom: 0;
		content: "";
		display: block;
		font-size: 10px;
		font-weight: $W_bold;
		height: $space;
		line-height: $space;
		position: absolute;
		right: 0;
		text-align: center;
		text-indent: 0%;
		width: $space;
	}
}

.avatar--fb-friend {
	@extend %avatarCharm;
	&:after {
		background-color: $C_facebook;
		color: $C_textPrimaryInverted;
		content: "f";
	}
}

.avatar--org {
	@extend %avatarCharm;
	&:after {
		background-color: $C_accent;
		background-image: url('img/org-badge.svg'); // TODO: no imgs in sassquatch... what do we do with this...
		color: $C_textPrimaryInverted;
	}
}

{'fraction_non_alphanumeric': 0.19317945518818883, 'fraction_numerical': 0.03077562902890414, 'mean_word_length': 3.6653734238603297, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 39, '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': '4603019', 'n_tokens_mistral': 2128, 'n_tokens_neox': 1924, 'n_words': 368}