Merge pull request #62 from whitepapertools/v2.0.0

v2.0.0

avatar/__photo/_size/avatar__photo_size_l.post.css

@@ -1,4 +1,4 @@
 .avatar__photo_size_l {
-	width: 80px;
-	height: 80px;
+    width: var(--graphics-size-3xl);
+    height: var(--graphics-size-3xl);
 }

avatar/__photo/_size/avatar__photo_size_m.post.css

@@ -1,4 +1,4 @@
 .avatar__photo_size_m {
-	width: 60px;
-	height: 60px;
+    width: var(--graphics-size-2xl);
+    height: var(--graphics-size-2xl);
 }

avatar/__photo/_size/avatar__photo_size_s.post.css

@@ -1,4 +1,4 @@
 .avatar__photo_size_s {
-	width: 40px;
-	height: 40px;
+    width: var(--graphics-size-xl);
+    height: var(--graphics-size-xl);
 }

avatar/__photo/_size/avatar__photo_size_xs.post.css

@@ -1,4 +1,4 @@
 .avatar__photo_size_xs {
-	width: 32px;
-	height: 32px;
+    width: var(--graphics-size-l);
+    height: var(--graphics-size-l);
 }

avatar/__photo/avatar__photo.post.css

@@ -1,8 +1,8 @@
 .avatar__photo {
-	border-radius: 50%;
-	height: 100%;
-	overflow: hidden;
-	background-image: url('default.svg');
-	background-size: cover;
-	object-fit: cover;
+    border-radius: 50%;
+    height: 100%;
+    overflow: hidden;
+    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23D8D8D8' fill-rule='evenodd'%3E%3Cpath d='M78 80c0-22.091-12-30-38-30S2 57.909 2 80h76zM40 45c8.942 0 15.048-8.954 16-20 1.143-13.258-7.058-20-16-20s-17.143 6.741-16 20c.952 11.046 7.058 20 16 20z'/%3E%3C/g%3E%3C/svg%3E");
+    background-size: cover;
+    object-fit: cover;
 }

avatar/avatar.md

@@ -1,25 +1,26 @@
-# Аватар
-
-Блок, отображающий аватарку пользователя. [Пример](https://codepen.io/whitepapertools/pen/22222a8a7ecf82d941fe57a170619ac8/)
-
-```js
-{
-	block: 'avatar',
-	content: [
-	// здесь может быть блок счетчика или уведомлений, 
-	// которые располагаются поверх аватарки
-	{
-		elem: 'photo',
-		elemMods: { size: 'm' },
-		content: [
-		{
-			block: 'image',
-			url: 'http://image'
-		}]
-	}]
-}
+# avatar
+
+Блок для отображения аватарки пользователя. Если изображение неопределено вставляется дефолтная картинка.
+
+``` html
+<div class="avatar">
+    <div class="avatar__photo avatar__photo_size_m"></div>
+</div>
 ```
 
-Модификатор элемента 'photo'   | Значение
------------------------------- | --------------
-size                           | xs / s / m / l
+## Живые примеры и дизайн
+
+[avatar на whitepaper.tools](http://whitepaper.tools/doc.html#/content-avatar)
+
+___
+
+
+## Элементы блока
+
+### Элемент photo
+
+Элемент в который вставляется аватарка пользователя. За счёт модификаторов регулируется размер изображения.
+
+Модификатор элемента | Значение         | Описание
+-------------------- | ---------------- | --------
+`size`               | `xs` `s` `m` `l` | Размер

avatar/avatar.post.css

@@ -1,4 +1,4 @@
 .avatar {
-	display: inline-block;
-	position: relative;
+    display: inline-block;
+    position: relative;
 }

badge/_view/badge_view_alert.post.css

@@ -1,8 +1,8 @@
 .badge_view_alert {
-	color: var(--color-typo-alert);
+    color: var(--color-typo-alert);
 
-	&::before {
-		background: var(--color-bg-alert);
-		opacity: 0.15;
-	}
+    &::before {
+        background: var(--color-bg-alert);
+        opacity: 0.15;
+    }
 }

badge/_view/badge_view_default.post.css

@@ -1,7 +1,7 @@
 .badge_view_default {
-	color: var(--color-typo-secondary);
+    color: var(--color-typo-secondary);
 
-	&::before {
-		background: var(--color-bg-ghost);
-	}
+    &::before {
+        background: var(--color-bg-ghost);
+    }
 }

badge/_view/badge_view_success.post.css

@@ -1,8 +1,8 @@
 .badge_view_success {
-	color: var(--color-typo-success);
+    color: var(--color-typo-success);
 
-	&::before {
-		background: var(--color-bg-success);
-		opacity: 0.15;
-	}
+    &::before {
+        background: var(--color-bg-success);
+        opacity: 0.15;
+    }
 }

badge/_view/badge_view_warning.post.css

@@ -1,8 +1,8 @@
 .badge_view_warning {
-	color: var(--color-typo-warning);
+    color: var(--color-typo-warning);
 
-	&::before {
-		background: var(--color-bg-warning);
-		opacity: 0.15;
-	}
+    &::before {
+        background: var(--color-bg-warning);
+        opacity: 0.15;
+    }
 }

badge/badge.md

@@ -1,19 +1,18 @@
-# Бейдж
+# bagde
 
-Блок для маркировки статуса сущности. Например, статус платежа. [Пример](https://codepen.io/whitepapertools/pen/cfc6b56114a7d5664d69c12f693227da/)
+Для отображения статуса каких-либо сущностей используется блок `badge`. Статус определяется через модификацию.
 
-```js
-{
-	block: 'badge',
-	mods: { view: 'default' },
-	content: 'Badge'
-}
+```html
+<div class="badge badge_view_success"></div>
 ```
 
-| Модификатор | Значение                            |
-|-------------|-------------------------------------|
-| view        | default / success / warning / alert |
+## Живые примеры и дизайн
 
-## Задание
+[badge на whitepaper.tools](http://whitepaper.tools/doc.html#/content-badge)
 
-Расставь `badge` соответственно статусам в строках платежей.
+
+## Модификаторы блока
+
+Модификатор | Значение                              | Описание
+------------|---------------------------------------| ------------------------
+`view`      | `default` `success` `warning` `alert` | Определяет статус бейджа

badge/badge.post.css

@@ -1,25 +1,24 @@
 .badge {
-	position: relative;
-	display: inline-block;
-	height: var(--space-xl);
-	max-width: 100%;
-	box-sizing: border-box;
-	padding: var(--space-xxs) var(--space-s);
-	overflow: hidden;
-	border-radius: 99em;
-	font-size: var(--size-typo-s);
-	font-weight: 500;
-	font-family: $font-sans;
-	white-space: nowrap;
-	text-overflow: ellipsis;
+    position: relative;
+    display: inline-block;
+    height: var(--space-xl);
+    max-width: 100%;
+    box-sizing: border-box;
+    padding: var(--space-2xs) var(--space-s);
+    overflow: hidden;
+    border-radius: 99em;
+    font-size: var(--size-typo-s);
+    font-weight: 500;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 
-	&::before {
-		content: '';
-		position: absolute;
-		left: 0;
-		top: 0;
-		width: 100%;
-		height: 100%;
-		border-radius: 99em;
-	}
+    &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 99em;
+    }
 }