/
DevDenzo
/
ERP
Обзор
Документация
Войти
/
DevDenzo
/
ERP
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
src/components/forms/styles/_form-entry.less
408 строк
17 KB
Denis Sklyarskij
Инициализирован репозиторий
14 янв 2026, 23:32
14 янв 2026, 23:32
1df3d47
Код
Авторство
О чём код?
// Подключаем палитру формы добавления оборудования @import '_form-entry-vars'; .container-add-form { // Включаем взаимодействие с курсором pointer-events: auto; // Фиксируем положение контейнера в левом верхнем углы // Задаем фиксированное положение position: fixed; // Назначаем смещение сверху top: 0; // Устанавливаем левое смещение left: 0; // Назначаем внутренний отступ сверху padding-top: 80px; // Задаем отступ слева форме padding-left: 180px; // Растягиваем контейнер на весь экран width: 100%; // Задаем полноразмерную высоту height: 100%; // Задаем приоритет отображения для контейнера формы z-index: 1000; // Назначаем полупрозрачный песочный фон формы background-color: rgba(245, 245, 220, 0.5); } // Контейнер формы ввода оборудования .form-entry { // Ограничиваем область перемещения дочерних элементов position: relative; // Задаем ширину родительскому элементу формы width: 50%; // Вычисляем высоту формы height: 100%; // Назначаем белый фон background-color: #ffffff; // Устанавливаем внутренние отступы padding: 20px; // Задаем скругление углов border-radius: 16px; // Задаем тень со смещением форме для создания объема box-shadow: 8px -8px 16px rgba(0, 0, 0, 0.2); // Добавляем светло-серую границу border: 1px solid #c0c0c0; // Стили формы в темном режиме &.is-active-switch { // Назначаем темно-синий фон background-color: #1266cc; } // Стили заголовочного контейнера формы &__header { // Выравниваем содержимое по краям display: flex; justify-content: space-between; // Устанавливаем отступ снизу margin-bottom: 20px; } // Стили текста заголовка формы &__title { // Назначаем размер шрифта font-size: 22px; // Задаем форматирование текста text-transform: capitalize; // Задаем темно-синий текст color: #212529; // Добавляем жирность тексту font-weight: 600; // Назначаем максимальную ширину заголовку max-width: 220px; // Задаем стили скрытия переполнения // Убираем переполнение overflow: hidden; // Запрещаем перенос на новую строку white-space: nowrap; // Добавляем многоточие в конец строки text-overflow: ellipsis; // Стили заголовка в темном режиме &.is-active-switch { // Задаем белый текст color: #ffffff; } } // Стили верхней кнопки закрытия &__button-close { // Задаем фиксированные размеры кнопки // Назначаем фиксированную ширину width: 32px; // Устанавливаем фиксированную высоту height: 32px; // Сбрасываем внутренние отступы кнопки padding: 0; // Устанавливаем тонкую синюю границу вокруг элемента border: 1px solid @form-entry-borderColorButtonClose; // Устанавливаем скругленные углы для элемента border-radius: 16px; // Задаем основной цвет текста color: @form-entry-buttonCloseColor; // Задаем анимации плавных переходов свойств transition: background-color .3s ease-in-out, // анимированный плавный переход фона color .3s ease-in-out, // анимированный плавный переход текста box-shadow .3s ease-in-out; // анимированный плавный переход тени // Стили кнопки закрытия формы при наведении &:hover { // Задаем прозрачную границу кнопке закрытия border-color: transparent; // Назначаем синий фон кнопке закрытия background-color: @form-entry-backgroundButtonClose; // Устанавливаем белый текст color: #ffffff; } // Стили кнопки закрытия формы при получении фокуса &:focus { // Убираем тень при получении фокуса box-shadow: none; // Назначаем белый цвет текста в фокусе color: #ffffff; } // Стили кнопки закрытия формы в темном режиме &.is-active-switch { // Делаем границу невидимой border-color: transparent; // Задаем очень светлый фон background-color: #ced4da; // Назначаем темный цвет иконки color: #1266cc; } } // Стили основного содержимого формы &__body { // Скрываем горизонтальную прокрутку overflow-x: hidden; // Задаем автоматическую вертикальную прокрутку overflow-y: auto; } // Стили нижнего контейнера формы &__footer { // Перемещаем элемент к нижнему краю контейнера position: absolute; bottom: 0; // Растягиваем подвал формы на всю ширину // Устанавливаем смещение слева left: 0; // Назначаем смещение справа right: 0; // Задаем внутренние отступы контейнеру padding: 20px; // Выравниваем элементы по правому краю display: flex; justify-content: flex-end; } // Стили кнопки редактирования подписей &__button-edited { // Задаем фиксированную ширину кнопке width: 150px; // Задаем скругление углов для кнопки border-radius: 16px; // Назначаем кнопке отступ справа margin-right: 12px; // Скрываем переполнение overflow: hidden; // Добавляем многоточие в конец строки text-overflow: ellipsis; // Прижимаем элемент рядом с кнопкой к левому краю margin-left: auto; // Стили кнопки редактирования полей &:focus { // Убираем тень кнопки редактирования при фокусе box-shadow: none; } // Кнопка редактирования текстовых полей в темном режиме &.is-active-switch { // Задаем мягкий синий фон кнопки редактирования background-color: #159fd9; } } // Стили для кнопки отмены в форме &__button-cancel { // Задаем фиксированную ширину для кнопки width: 80px; // Задаем тонкую темно-синюю границу для кнопки border: 1px solid @form-entry-borderColorButtonCancel; // Назначаем скругление углов border-radius: 16px; // Назначаем темно-синий текст color: @form-entry-buttonCancelColor; // Задаем отступ справа для кнопки margin-right: 12px; // Задаем анимацию плавного перехода для фона кнопки transition: background-color .3s ease-in-out; // Скрываем переполнение overflow: hidden; // Добавляем многоточие text-overflow: ellipsis; // Стили при наведении курсора на кнопку &:hover { // Устанавливаем прозрачный цвет границы border-color: transparent; // Назначаем темной синий фон кнопки background-color: @form-entry-backgroundColorButtonCancel; // Задаем белый текст при наведении color: #ffffff; } // Стили для кнопки при получении фокуса &:focus { // Сбрасываем тень при фокусе box-shadow: none; // Оставляем прозрачную границу border-color: transparent; // Оставляем темно-синий фон background-color: @form-entry-backgroundColorButtonCancel; // Устанавливаем белый текст color: #ffffff; } // Стили кнопки отмены в темном режиме &.is-active-switch { // Задаем мягкий синий цвет границы border-color: #159fd9; // Назначаем очень светлый цвет фона background-color: #ced4da; // Задаем мягкий синий цвет для текста color: #159fd9; } } // Стили для кнопки отправки данных на сервер &__button-submit { // Устанавливаем ширину кнопки отправки width: 120px; // Задаем прозрачную границу border-color: transparent; // Делаем заливку темно-синим фоном background-color: @form-entry-backgroundColorButtonSubmit; // Задаем белый текст color: #ffffff; // Устанавливаем скругление углов для формы отправки border-radius: 16px; // Задаем плавный переход фона для кнопки отправки transition: background-color .3s ease-in-out; // Убираем переполнение overflow: hidden; // Добавляем многоточие в конец строки text-overflow: ellipsis; // Стили кнопки отправки данных при наведении &:hover { // Задаем темно-синюю границу border-color: @form-entry-borderColorHoverButtonSubmit; // Назначаем белый фон при наведении background-color: #ffffff; // Задаем темно-синий текст color: @form-entry-colorHoverButtonSubmit; } // Стили кнопки отправки данных при фокусе &:focus { // Оставляем темно-синюю границу border-color: @form-entry-borderColorHoverButtonSubmit; // Задаем аналогичный фон кнопки background-color: #ffffff; // Назначаем аналогичный цвет текста color: @form-entry-colorHoverButtonSubmit; // Сбрасываем тень кнопки отправки box-shadow: none; } // Стили темного режима для кнопки отправки &.is-active-switch { // Назначаем кнопке мягкий синий фон background-color: #159fd9; } } } // Основной контейнер поля ввода .form-group { // Меняем расположение элементов на вертикальный flex-direction: column; // Стили подписи поля формы &__label { // Устанавливаем ширину для текстовой подписи width: 50%; // Назначаем размер текста подписи font-size: 18px; // Цвет текстовой подписи поля формы color: @form-entry-colorText; // Задаем форматирования текстовой подписи text-transform: capitalize; // Задаем жирность текста font-weight: 600; // Добавляем стили скрывающие переполнение // Скрываем переполнение overflow: hidden; // Запрещаем перенос текста на новую строку white-space: nowrap; // Добавляем многоточие в конце text-overflow: ellipsis; // Стили текстовой подписи в темном режиме &.is-active-switch { // Задаем светло-серый цвет текста color: #ced4da; } } // Стили редактируемого инпута формы &__edited-input { // Обнуляем верхнюю границу border-top: 0 !important; // Обнуляем левую границу border-left: 0 !important; // И обнуляем правую границу border-right: 0 !important; // Обнуляем скругление углов border-radius: 0 !important; // Стили поля ввода в темном режиме &.is-active-switch { // Задаем невидимый фон background-color: transparent; // Назначаем белый цвет тексту color: #ffffff; } // Стили валидного инпута при фокусе &.is-valid:focus { // Сбрасываем тень валидному полю box-shadow: none; } // Стили невалидного инпута при фокусе &.is-invalid { // Убираем у невалидного поля фоновое изображение background-image: none; // Стили невалидного инпута при фокусе &:focus { // Сбрасываем тень невалидному поля box-shadow: none; } } // Стили инпута при фокусе &:focus { // Убираем тень поля редактирования box-shadow: none; } } // Стили списка выбора формы &__selected-list { // Задаем светло-серую границу border: 1px solid #c0c0c0; // Задаем скругление всех углов списка выбора формы border-radius: 16px !important; // Выравниваем текст по правому краю text-align: right; // Назначаем светло-серый цвет текста color: #c0c0c0; // Задаем левый отступ списку выбора margin-left: 12px; // Стили невалидного списка выбора &.is-invalid { // Убираем фоновое изображение списка background-image: none; } // Стили списка выбора в темном режиме &.is-active-switch { // Задам мягкий синий фон background-color: #159fd9; // Устанавливаем белый цвет текста color: #ffffff; } } // Стили поля ввода формы &__input { // Делаем элемент полноэкранным width: 100% !important; // Задаем светло-серую границу border: 1px solid #c0c0c0; // Назначаем скругление углов для поля ввода формы border-radius: 16px !important; // Назначаем цвет текста в поле ввода color: #c0c0c0; // Стили невалидного инпута &.is-invalid { // Сбрасываем фоновое изображение у инпута background-image: none; } // Стили поля ввода в темном режиме &.is-active-switch { // Назначаем мягкий синий фон background-color: #159fd9; // Задаем белый цвет текста color: #ffffff; } } }