<p align="center">
  <a href="https://amocrm.ru/">
    <img src="https://storybook.amocrm.ru/logo.png" alt="Bootstrap logo" height="40">
  </a>
</p>

# Библиотека стилей amoCRM 
[![Latest release](https://gitlab.amgate.ru/libs/styles/-/badges/release.svg)](https://gitlab.amgate.ru/libs/styles)
[![NPM Version](https://img.shields.io/npm/v/@amocrm/styles)](https://www.npmjs.com/package/@amocrm/styles)
[![Generic badge](https://img.shields.io/badge/%D0%A7%D0%B0%D1%82%20%D0%B2%20Telegram-@amoCRM_Libs-0088cc.svg)](https://t.me/+VLU0W9nKe9sxMmIy)
[![license](https://img.shields.io/gitlab/license/libs/widget-template?gitlab_url=https%3A%2F%2Fgitlab.amgate.ru)](https://gitlab.amgate.ru/libs/styles)

Написана на основе SASS(1.56.0+).

Основано на:
- [Официальный Storybook amoCRM](https://storybook.amocrm.ru/) 
- [Документации для разработчиков публичных решений](https://www.amocrm.ru/developers/content/integrations/requirements#3-%D0%A0%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0-%D0%B8%D0%BD%D1%82%D0%B5%D0%B3%D1%80%D0%B0%D1%86%D0%B8%D0%B8)

## Быстрый старт

### 1. Установите зависимость
```bash
# npm
npm install @amocrm/styles --save

# yarn
yarn add @amocrm/styles
```

### 2. Соберите стили
```bash
# Стили будут собраны в папку <cwd>/src/styles в SASS и CSS форматах
amocrm-styles-generate --output=./src/styles

# Сборка с префиксом "amgate"
amocrm-styles-generate --output=./src/styles --prefix=amgate
```

### 3. Используйте стили
```scss
// импорт всех стилей (CSS)
@import './src/styles/css/amocrm.min.css';

// импорт всех стилей (SASS)
@import './src/styles/sass';

// импорт отдельно элемента button
@import './src/styles/sass/button';
```

# Документация
## 1. Кнопки

amoCRM включает в себя 5 предопределенных стилей кнопок

![Снимок_экрана_2022-11-10_в_3.11.30](https://gitlab.amgate.ru/libs/styles/uploads/55b619538c2d34c488ada5794ca789d6/Снимок_экрана_2022-11-10_в_3.11.30.png)

```html
<button class="amo-btn-primary">Primary</button>
<button class="amo-btn-secondary">Secondary</button>
<button class="amo-btn-dark">Dark</button>
<button class="amo-btn-light">Light</button>
<button class="amo-btn-link">Link</button>
```


### 1.1. Контурные кнопки (без фона)
___
Нужна кнопка, но без «тяжелых» фоновых цветов? Замените дефолтные классы-модификаторы на классы **`.amo-btn-outline-*`** для удаления всех фоновых цветов в любой кнопке.

![Снимок_экрана_2022-11-10_в_3.12.43](https://gitlab.amgate.ru/libs/styles/uploads/c11d5a7b4b34cd3cd37b9de997bef911/Снимок_экрана_2022-11-10_в_3.12.43.png)

```html
<button class="amo-btn-outline-primary">Primary</button>
<button class="amo-btn-outline-dark">Dark</button>
```


### 1.2. Размеры `EXT`
___
Хотите кнопки большего или меньшего размера? Добавьте **`.amo-btn-lg`** или **`.amo-btn-sm`**.

![Снимок_экрана_2022-11-10_в_3.18.31](https://gitlab.amgate.ru/libs/styles/uploads/485b09ac02052b3c57c2f2aa10d1c8ea/Снимок_экрана_2022-11-10_в_3.18.31.png)

```html
<button class="amo-btn-primary amo-btn-lg">Large button</button>
<button class="amo-btn-primary amo-btn-sm">Small button</button>
```

### 1.3. Отключенное состояние
___
Чтобы кнопки выглядели неактивными, добавьте логический атрибут **`disabled`** к любому элементу **`<button>`**. Отключенные кнопки имеют значение **`pointer-events: none;`**  что предотвращает срабатывание состояний наведения и активного состояния.

![Снимок_экрана_2022-11-10_в_3.37.10](https://gitlab.amgate.ru/libs/styles/uploads/7b819001d0fc195dbb836fe55b43e030/Снимок_экрана_2022-11-10_в_3.37.10.png)

```html
<button class="amo-btn-primary" disabled>Primary</button>
<button class="amo-btn-secondary" disabled>Secondary</button>
<button class="amo-btn-dark" disabled>Dark</button>
<button class="amo-btn-light" disabled>Light</button>
```

### 1.4. Группы кнопок
___

Сгруппируйте несколько кнопок в одну строку используя **`.amo-btn-group`**.

![Снимок_экрана_2022-11-10_в_5.36.34](https://gitlab.amgate.ru/libs/styles/uploads/19a0b3075b7cd0ac047e8967be489d95/Снимок_экрана_2022-11-10_в_5.36.34.png)

```html
<div class="amo-btn-group">
  <button type="button" class="amo-btn-primary">Left</button>
  <button type="button" class="amo-btn-primary">Middle</button>
  <button type="button" class="amo-btn-primary">Right</button>
</div>
```

# Copyright and license
Распространяется под лицензией MIT License. Документация под лицензией Creative Commons.
