from bb

.enb/make.js

@@ -18,7 +18,7 @@ const techs = {
             require('postcss-calc')(),
             require('postcss-nested'),
             require('rebem-css'),
-            require('postcss-url')({ url: 'inline' }),
+            require('postcss-url')({ url: 'rebase' }),
             require('autoprefixer')(),
             require('postcss-reporter')()
         ],
@@ -41,7 +41,7 @@ const techs = {
         { path: 'node_modules/bem-components-custom/desktop.blocks', check: false },
         { path: 'node_modules/bem-components-custom/design/common.blocks', check: false },
         { path: 'node_modules/bem-components-custom/design/desktop.blocks', check: false },
-        { path: 'node_modules/whitepaper-bem', check: false },
+
         'common.blocks',
         'desktop.blocks',
     ];
@@ -120,4 +120,4 @@ module.exports = function(config) {
 
         // nodeConfig.addTargets([/* '?.bemtree.js', */ '../../?.html', '../../?.min.css', '../../?.min.js']);
     });
-};
+};

common.blocks/avatar/__photo/_size/avatar__photo_size_l.post.css

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

common.blocks/avatar/__photo/_size/avatar__photo_size_m.post.css

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

common.blocks/avatar/__photo/_size/avatar__photo_size_s.post.css

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

common.blocks/avatar/__photo/_size/avatar__photo_size_xs.post.css

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

common.blocks/avatar/__photo/avatar__photo.post.css

@@ -0,0 +1,8 @@
+.avatar__photo {
+    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;
+}

common.blocks/avatar/avatar.md

@@ -0,0 +1,26 @@
+# avatar
+
+Блок для отображения аватарки пользователя. Если изображение неопределено вставляется дефолтная картинка.
+
+``` html
+<div class="avatar">
+    <div class="avatar__photo avatar__photo_size_m"></div>
+</div>
+```
+
+## Живые примеры и дизайн
+
+[avatar на whitepaper.tools](http://whitepaper.tools/doc.html#/content-avatar)
+
+___
+
+
+## Элементы блока
+
+### Элемент photo
+
+Элемент в который вставляется аватарка пользователя. За счёт модификаторов регулируется размер изображения.
+
+Модификатор элемента | Значение         | Описание
+-------------------- | ---------------- | --------
+`size`               | `xs` `s` `m` `l` | Размер

common.blocks/avatar/avatar.post.css

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

common.blocks/badge/README.md

@@ -0,0 +1,19 @@
+# badge
+
+Блок для маркировки статуса сущности. Например, статус платежа.
+
+### Модификаторы блока
+Все модификаторы обязательны для корректного отображения бейджа
+
+| Название | Значения | Описание |
+| -------- | -------- | -------- |
+| `view` | `success` `warning` `alert` `normal` | Вид |
+| `weight` | `light` `heavy` | Тип отображения |
+| `size` | `s` `m` | Размер |
+
+```js
+{
+	block: 'badge',
+	mods: { weight: 'heavy', view: 'success', size: 's' }
+}
+```

common.blocks/badge/_size/badge_size_m.post.css

@@ -0,0 +1,6 @@
+.badge_size_m {
+	font-size: var(--size-typo-m);
+	line-height: var(--line-height-typo-m);
+	padding-left: var(--space-m);
+	padding-right: var(--space-m);
+}

common.blocks/badge/_size/badge_size_s.post.css

@@ -0,0 +1,6 @@
+.badge_size_s {
+	font-size: var(--size-typo-s);
+	line-height: var(--line-height-typo-s);
+	padding-left: var(--space-s);
+	padding-right: var(--space-s);
+}

common.blocks/badge/_view/badge_view_alert.post.css

@@ -0,0 +1,12 @@
+.badge_view_alert {
+	&.badge_weight_light {
+		color: var(--color-typo-alert);
+		background-color: var(--color-bg-default);
+		border: 1px solid var(--color-typo-alert);
+	}
+
+	&.badge_weight_heavy {
+		color: var(--color-bg-default);
+		background-color: var(--color-typo-alert);
+	}
+}

common.blocks/badge/_view/badge_view_normal.post.css

@@ -0,0 +1,12 @@
+.badge_view_normal {
+	&.badge_weight_light {
+		color: var(--color-typo-normal);
+		background-color: var(--color-bg-default);
+		border: 1px solid var(--color-typo-normal);
+	}
+
+	&.badge_weight_heavy {
+		color: var(--color-bg-default);
+		background-color: var(--color-typo-normal);
+	}
+}

common.blocks/badge/_view/badge_view_success.post.css

@@ -0,0 +1,12 @@
+.badge_view_success {
+	&.badge_weight_light {
+		color: var(--color-typo-success);
+		background-color: var(--color-bg-default);
+		border: 1px solid var(--color-typo-success);
+	}
+
+	&.badge_weight_heavy {
+		color: var(--color-bg-default);
+		background-color: var(--color-typo-success);
+	}
+}

common.blocks/badge/_view/badge_view_warning.post.css

@@ -0,0 +1,12 @@
+.badge_view_warning {
+	&.badge_weight_light {
+		color: var(--color-typo-warning);
+		background-color: var(--color-bg-default);
+		border: 1px solid var(--color-typo-warning);
+	}
+
+	&.badge_weight_heavy {
+		color: var(--color-bg-default);
+		background-color: var(--color-typo-warning);
+	}
+}

common.blocks/badge/badge.post.css

@@ -0,0 +1,10 @@
+.badge {
+	display: inline-block;
+	position: relative;
+	max-width: 100%;
+	box-sizing: border-box;
+	border-radius: 99em;
+	font-weight: 500;
+	padding-top: var(--space-xxs);
+	padding-bottom: var(--space-xxs);
+}

common.blocks/brand-logo/README.md

@@ -0,0 +1,20 @@
+# brand-logo
+
+Блок для отображения логотипов.
+
+### Модификаторы блока
+
+| Название | Значения | Описание |
+| -------- | --------- | ------- |
+| `name` | `absolute` `acado` `accion`, ...| Имя иконки |
+| `size` | `s` `m` `l` `xl` | Размер |
+
+```js
+{
+	block: 'brand-logo',
+	mods: { name: 'allo-inkognito', size: 's' }
+}
+```
+
+#### Список всех лого
+http://design.yamoney.ru

common.blocks/brand-logo/_name/brand-logo_name_101xp.post.css

@@ -0,0 +1,4 @@
+/* Этот файл сгенерирован автоматически: npm run generate:BrandLogo */
+.brand-logo_name_101xp {
+	background-image: url('brand-logo_name_101xp.svg');
+}

common.blocks/brand-logo/_name/brand-logo_name_1x.post.css

@@ -0,0 +1,4 @@
+/* Этот файл сгенерирован автоматически: npm run generate:BrandLogo */
+.brand-logo_name_1x {
+	background-image: url('brand-logo_name_1x.svg');
+}

common.blocks/brand-logo/_name/brand-logo_name_3ddd.post.css

@@ -0,0 +1,4 @@
+/* Этот файл сгенерирован автоматически: npm run generate:BrandLogo */
+.brand-logo_name_3ddd {
+	background-image: url('brand-logo_name_3ddd.svg');
+}

common.blocks/brand-logo/_name/brand-logo_name_4glaza.post.css

@@ -0,0 +1,4 @@
+/* Этот файл сгенерирован автоматически: npm run generate:BrandLogo */
+.brand-logo_name_4glaza {
+	background-image: url('brand-logo_name_4glaza.svg');
+}