Модуль design (настройка)

Это модуль отвечает за дизайн кнопок, форм и т.д.

Особенностью этого модуля в том, что он имеет несколько файлов конфигурации.

• config/_buttons.scss — для настройки кнопок
• config/_forms.scss — для настройки форм

Соответственно переменные по умолчанию расположены в файлах

• modules/design/_default-buttons.scss — для кнопок
• modules/design/_default-forms.scss — для форм

Кнопки

Кнопки задаются двумя классами. Первый — .button, который создаёт базовое поведение. Второй — произвольный, формируемый из $buttons. Класс .button-var нужен для формирования произвольных кнопок через css-переменные.

// для .button
$button-padding: .4rem .8rem,
$button-line-height: 1.5,
$button-disabled-bg-color: #C5C7C9,
$button-disabled-text-color: #93999F,

// для .button-var
$button-bg-color: #0d6efd,
$button-text-color: #fff,
$button-hover-bg-color: #025CE2,
$button-hover-text-color: #fff,
$button-radius: 5px,
$button-focus-shadow: rgba(13, 110, 253, .3),
$button-focus-shadow-size: 2px,

// свойства кнопки
$button1: (
    "radius": 5px,
    "bg": #15fd0d,
    "text": #fff,
    "hover-bg": #025CE2,
    "hover-text": #fff,
    "focus-bg": #025CE2,
    "focus-text": #fff,
    "focus-border": solid 1px #97C1FE,
    "focus-shadow": 0 0 0 3px #97C1FE,
),

... и т.д. каждую кнопку

По умолчанию формируются классы .button1, .button2, .button3, .button-outline1 и .button-outline2, которых обычно хватает для большинства задач. Но, если нужно сделать новые классы кнопок, то в файле конфигурации config/_buttons.scss можно вначале создать переменные для кнопок, а потом их использовать в $buttons:

$btn1: (
	свойства кнопки
);

$btn2: (
	свойства кнопки
);
	
@use '../modules/design/default-buttons' with (
	$modules: (
		'buttons': true,
	),
	
	$buttons: (
		"my-button": $btn1, // класс кнопки .my-button
		"button-alert": $btn2, // класс кнопки .button-alert
	),
);

Формы

$placeholder-color: #828282,

$form-input-padding: 4px 6px,
$form-input-border: 1px solid #CED4DA,
$form-input-border-radius: 3px,

$form-input-focus-color: #495057,
$form-input-focus-background: #fff,
$form-input-focus-border-color: #80bdff,
$form-input-focus-shadow: 0 0 0 .2rem hsla(210, 100%, 50%, 0.25),

$form-input-disabled-color: #999,
$form-input-disabled-background: #f5f5f5,
$form-input-disabled-border-color: #ddd,

$form-invalid-shadow: 0 0 0 .2rem hsla(4, 100%, 50%, 0.3),
$form-invalid-border: 1px solid #FFB7B2,