@amocrm/styles NPM

Библиотека стилей amoCRM

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

Основано на:

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

1. Установите зависимость

# npm
npm install @amocrm/styles --save

# yarn
yarn add @amocrm/styles

2. Соберите стили

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

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

3. Используйте стили

// импорт всех стилей (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

<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

<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

<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

<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

<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>