Цвета

Типографика

В проекте используется шрифт Inter.

Buttons

Inputs

Базовые состояния и размеры

//large  
<input
  type="text"
  placeholder="Поле для ввода"
  class="large"
/>
 
//medium
<input
  type="text"
  placeholder="Поле для ввода"
  class="medium"
>
                        
//small
<input
  type="text"
  placeholder="Поле для ввода"
  class="small"
/>

//large  
<input
  type="text"
    placeholder="Поле для ввода"
    class="large disabled"
/>
                     
//medium
  <input
  type="text"
  placeholder="Поле для ввода"
  class="medium disabled"
/>
                                            
//small
<input
  type="text"
  placeholder="Поле для ввода"
  class="small disabled"
/>

//large  
<input
  type="text"
    placeholder="Поле для ввода"
    class="large success"
/>
                     
//medium
  <input
  type="text"
  placeholder="Поле для ввода"
  class="medium success"
/>
                                            
//small
<input
  type="text"
  placeholder="Поле для ввода"
  class="small success"
/>

//large  
<input
  type="text"
    placeholder="Поле для ввода"
    class="large error"
/>
                     
//medium
  <input
  type="text"
  placeholder="Поле для ввода"
  class="medium error"
/>
                                            
//small
<input
  type="text"
  placeholder="Поле для ввода"
  class="small error"
/>

Поля с иконками

large

medium

<input
  type="text"
  placeholder="Поле для ввода"
  class="large"
/>
 
<input
  type="tel"
  placeholder="Телефон"
  class="large"
>
 
<input
  type="email"
  placeholder="Почта"
  class="large"
/>
 
<input
  type="password"
  placeholder="Пароль"
  class="large"
>
 
<input
  type="search"
  placeholder="Поиск"
  class="large"
>

<input
  type="text"
  placeholder="Поле для ввода"
  class="medium"
/>
 
<input
  type="tel"
  placeholder="Телефон"
  class="medium"
>
 
<input
  type="email"
  placeholder="Почта"
  class="medium"
/>
 
<input
  type="password"
  placeholder="Пароль"
  class="medium"
>
 
<input
  type="search"
  placeholder="Поиск"
  class="medium"
>

Обязательные поля

<label 
  for="in-1" 
  class="required"> 
  Введите логин
</label> 
<input 
  type="text" 
  name="in-1"
  placeholder="Поле для ввода" 
  class="large" //medium small
  required="" 
/>

<label>Поле для ввода<br />
  <input
    type="text"
    placeholder="Поле для ввода"
    class="large" //medium small
    required
  />
</label>

Поля по ширине контейнера

<input
  type="text"
  placeholder="Поле для ввода"
  class="stretch"
/>

Таблицы

Базовая структура

Таблица оформляется с помощью тегаtable и может иметь дополнительные классы для расширения функциональности и стилизации:

• .tabular — основной класс для таблиц, включает базовые стили.
• .countable — добавляет автоматическую нумерацию строк.
• .sortable— добавляет стили для сортируемых заголовков (например, стрелки).
• .cards— скрывает заголовок таблицы, используется для карточного вида.

Классы строк и ячеек

• tr.blocked— строка становится неактивной (серый цвет, курсор "запрещено", иконки становятся чёрно-белыми)
• tr.hoverable:hover— при наведении строка подсвечивается
• td/th.text-middle— вертикальное выравнивание по центру
• td.counter— ячейка для нумерации строк
• td.thumbnail— ячейка для миниатюры (картинки)
• td.checkbox— ячейка для чекбокса, выравнивание по центру

Цветовые схемы

Чётные и нечётные строки имеют разные цвета фона ($table-color-even, $table-color-odd).

При наведении цвет строки становится светлее.

Обычная таблица

Особенности:

Вторая строка .blocked — неактивная, с серым цветом и недоступным курсором.

<table class="tabular wide">
  <thead>
    <tr>
      <th>Имя</th>
      <th>Email</th>
      <th>Статус</th>
    </tr>
  </thead>
  <tbody>
  <tr>
    <td>Иван Иванов</td>
    <td>ivan@example.com</td>
    <td>Активен</td>
  </tr>
    <tr class="blocked">
      <td>Мария Петрова</td>
      <td>maria@example.com</td>
      <td>Заблокирован</td>
    </tr>
  </tbody>
</table>

Таблица с нумерацией строк

Особенности:

Класс .counter автоматически пронумерует строки с помощью CSS-счётчика.

<table class="tabular countable wide">
  <thead>
    <tr>
      <th>Имя</th>
      <th>Email</th>
      <th>Статус</th>
    </tr>
  </thead>
  <tbody>
  <tr class="counter">
    <td>Иван Иванов</td>
    <td>ivan@example.com</td>
    <td>Активен</td>
  </tr>
    <tr class="counter">
      <td>Мария Петрова</td>
      <td>maria@example.com</td>
      <td>Заблокирован</td>
    </tr>
  </tbody>
</table>

Таблица с миниатюрами и чекбоксами

Фото	Имя	Выбрать
	Иван Иванов
	Мария Петрова

<table class="tabular wide">
  <thead>
    <tr>
      <th>Фото</th>
      <th>Имя</th>
      <th class="checkbox">Выбрать</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="thumbnail">
        <img src="/img/no-avatar.png" alt="Фото" />
      </td>
      <td class="text-center text-middle">Иван Иванов</td>
      <td class="checkbox"><input type="checkbox" /></td>
    </tr>
    <tr>
      <td class="thumbnail">
        <img src="/img/no-avatar.png" alt="Фото" />
      </td>
      <td class="text-center text-middle">Мария Петрова</td>
      <td class="checkbox"><input type="checkbox" /></td>
    </tr>
  </tbody>
</table>

Особенности:

Класс .thumbnail — миниатюра изображения.

Класс .checkbox — выравнивание чекбокса по центру.

Класс .text-middle — вертикальное выравнивание по центру.

Сортируемая таблица.

<table class="tabular sortable wide"> 
  <thead>
    <tr> 
      <th class="caret">Имя</th> 
      <th class="caret">Email</th> 
    </tr> 
  </thead>
  <tbody> 
    <tr> 
      <td>Иван Иванов</td>
      <td>ivan@example.com</td> 
    </tr> 
    <tr>
      <td>Мария Петрова</td>
      <td>maria@example.com</td> 
    </tr>
  </tbody> 
</table>

Особенности:

Класс .caret — добавляет визуальный индикатор сортировки (стрелку).

Расширенный пример таблицы.

#	Артикул	Изображениме	Описание	Стоимость	Элементы управления
	03453D		Наименование Это просто пример описания продукта соссылкой куда нибудь	500₽	тут кнопки
	03453B		Наименование Это просто пример описания продукта соссылкой куда нибудь	500₽	тут кнопки
	53532		Наименование Это просто пример описания продукта соссылкой куда нибудь	500₽	тут кнопки
	036333		Наименование Это просто пример описания продукта соссылкой куда нибудь	500₽	тут кнопки
	XY0645-INYA		Наименование Это просто пример описания продукта соссылкой куда нибудь	500₽	тут кнопки