Адаптация существующих модулей и тем под CS-Cart 4.18.2¶
Изменения в ядре¶
Добавлены пакеты google/auth
, firebase/php-jwt
, psr/cache
.
Важно
Не используйте их, они будут удалены в ближайшем будущем.
Изменения в хуках¶
Новые хуки¶
Изменяет параметры запроса перед выбором городов местоположения магазина:
fn_set_hook('get_store_location_cities', $params, $condition);
Выполняется перед возвратом данных запроса:
fn_set_hook('rus_online_cache_register_receipt_request_json_post', $this, $result, $receipt);
Изменения в стилях¶
Использование цветовых переменных вместо цветов¶
Использование жестко запрограммированных цветов устарело. Используйте цветовые переменные CSS. Например:
- Вместо
#fff
используйтеvar(--cs-content-background)
для цвета фона. - Вместо
#2d2d2d
используйтеvar(--cs-text-color)
для цвета текста. - Вместо
#fff
используйтеvar(--cs-text-inverse-color)
для инвертированого цвета текста. - Вместо
#1d9ff8
используйтеvar(--cs-btn-primary-background)
для основного фона кнопки. - Вместо
#d80954
используйтеvar(--cs-error-text)
для цвета текста ошибки. - Вместо
rgba(0, 0, 0, 0.1)
используйтеvar(--cs-shadow10-color)
для тени.
Полный список переменных см. в design/backend/css/less_to_css_vars.less. Для темной темы требуются цветовые переменные. Проверьте свои модули в светлой и темной админ панели.
Устаревшие стили Less¶
Стили Less устарели и больше не будут поддерживаться в будущем. Вместо этого используйте собственные стили CSS. Например:
- Не используйте
переменные Less
. Используйте собственные переменные CSS. Например:- Вместо
@mainColor
используйтеvar(--cs-main-color)
. - Вместо
@media (min-width: @TabletBreakpoint + 1px) { ... }
используйте@media (min-width: 768px) { ... }
. - Вместо
-@iconSize;
используйте~"calc(var(--cs-icon-size) * -1)"
.
- Вместо
- Не используйте миксины Less. Описывайте свойства явно. Например:
- Вместо
.transition(all 200ms);
используйтеtransition: all 200ms;
. - Вместо
.display-flex();
используйтеdisplay: flex;
.
- Вместо
- Не используйте правила Less Intendered. Описывайте селекторы явно. Например:
- Вместо
a { opacity: 0.8; &:hover { opacity: 1; } }
используйтеa { opacity: 0.8; } a:hover { opacity: 1; }
. - Вместо
.block { padding: 10px; @media (min-width: 768px) { padding: 20px; } }
используйте.block { padding: 10px; } @media (min-width: 768px) { .block { padding: 20px; } }
.
- Вместо
- Не используйте функции Less. Используйте похожие цвета и значения свойств. Например:
- Вместо
spin(desaturate(lighten(@textColor, 30%), 25%), -15%);
используйтеvar(--cs-text-muted-color);
. - Вместо
darken(@btnBorder, 3%)
используйтеvar(--cs-shadow15-color)
. - Вместо
lighten(@textColor, 38%);
используйтеvar(--cs-text-muted-color);
. - Вместо
round(@baseLineHeight / 1.5385)
используйте13px;
.
- Вместо
- НО используйте экранирование для функций Less, которые похожи на функции CSS. Пример:
- Вместо
calc(100% - 5px)
используйте~"calc(100% - 5px)"
.
- Вместо
Новые классы CSS¶
cs-dark-theme-invert
- инвертирует цвета для темной темы.
Удаленные переменные стилей¶
UI¶
@isControlGroupHidden
.- Вместо
@spinnerSize
используйте24px
. - Вместо
@spinnerBorderWidth
используйте3px
. - Вместо
@spinnerBlockSize
используйте52px
. - Вместо
@uiDialogTitlebarCloseWidth
используйтеvar(--cs-ui-dialog-titlebar-close-width)
. - Вместо
@uiDialogTitlebarCloseHeight
используйтеvar(--cs-ui-dialog-titlebar-close-height)
. - Вместо
@global_individual_secondary
используйтеvar(--cs-global-individual-secondary)
. - Вместо
@global_individual_active_background
используйтеvar(--cs-global-individual-active-background)
. - Вместо
@global_individual_active_border
используйтеvar(--cs-global-individual-active-border)
. - Вместо
@global_individual_disabled
используйтеvar(--cs-global-individual-disabled)
. - Вместо
@global_individual_secondary_disabled
используйтеvar(--cs-global-individual-secondary-disabled)
. - Вместо
@global_individual_active_background_disabled
используйтеvar(--cs-global-individual-active-background-disabled)
. - Вместо
@global_individual_active_border_disabled
используйтеvar(--cs-global-individual-active-border-disabled)
. - Вместо
@button-color
используйте#fff
. - Вместо
@button-opacity-on-hover
используйте0.75
. - Вместо
@header-height
используйте40px
. - Вместо
@button-width
используйте45px
. - Вместо
@button-indent
используйте10px
. - Вместо
@img-indent
используйте10px
. - Вместо
@arrow-size
используйте60px
.
Панель управления (Dashboard)¶
- Вместо
@dashboardBorderColor
используйтеvar(--cs-dashboard-border-color)
. - Вместо
@dashboardBorderColor
используйтеvar(--cs-dashboard-border-color)
. - Вместо
@dashboardPrimaryColor
используйтеvar(--cs-dashboard-primary-color)
. - Вместо
@dashboardSecondaryColor
используйтеvar(--cs-dashboard-secondary-color)
.
Модули и Центр обновлений¶
- Вместо
@darkTransparentMainColor
используйтеvar(--cs-shadow10-color)
. - Вместо
@lightTextIconColor
используйтеvar(--cs-text-inverse-color)
. - Вместо
@darkTextIconColor
используйтеvar(--cs-form-actions-background)
. @middleTextIconColor
.
Настройки уведомлений¶
- Вместо
@editor-spacing
используйте16px
. - Вместо
@editor-width
используйте500px
. - Вместо
@editor-footer-border-color
используйте#eee
. - Вместо
@editor-padding
используйте17px
.
Менеджер блоков¶
- Вместо
@BlockManagerGrid
используйтеvar(--cs-block-manager-grid)
. - Вместо
@BlockManagerGrid12Col
используйтеvar(--cs-block-manager-grid12-col)
. - Вместо
@BlockManagerGrid16Col
используйтеvar(--cs-block-manager-grid16-col)
. - Вместо
@BlockManagerIconsSprite
используйтеvar(--cs-block-manager-icons-sprite)
. - Вместо
@BlockManagerOpenHand
используйтеvar(--cs-block-manager-open-hand)
. - Вместо
@BlockManagerClosedHand
используйтеvar(--cs-block-manager-closed-hand)
. - Вместо
@bm-block-border
используйтеvar(--bm-block-border)
. @bm-block-hover-color
.- Вместо
@bm-block-hover-border
используйтеvar(--bm-block-hover-border)
. @bm-block-hover-shadow
.- Вместо
@bm-block-hover-bg
используйтеvar(--bm-block-hover-bg)
. - Вместо
@bm-block-grabbing-shadow
используйтеvar(--bm-block-grabbing-shadow)
. - Вместо
@bm-block-menu
используйтеvar(--bm-block-menu)
. - Вместо
@bm-block-menu-arrow
используйтеvar(--bm-block-menu-arrow)
. @bm-border
.- Вместо
@bm-border-radius
используйтеvar(--bm-border-radius)
. - Вместо
@bm-icon-size
используйтеvar(--bm-icon-size)
. - Вместо
@bm-icon
используйтеvar(--bm-icon)
.
Модуль “Премодерация данных продавца”¶
- Вместо
@editColor
используйтеvar(--cs-vendor-data-premoderation-edit-color)
. @editBackground
.
Модуль “Мобильное приложени唶
- Вместо
@backgoundColor
используйтеvar(--cs-mobile-app-backgound-color)
.