Cписок используемых CSS переменных в Юнишоп2 v3.0.2.0

В чём удобство использования CSS-переменных? Задали один раз, используете многократно. Допустим, вам надо сделать для всех фото в вашей новости или статье закругление углов так, как задано в настройках шаблона.

Без иcпользования css переменных вам нужно будет каждый раз, при изменении настроек, переписывать радиус скругления, где 10 взято для примера и соответствует тому, что в настройках задано:

.news-page__description img{
  border-radius:10px
}

При использовании CSS переменных достаточно один раз добавить в стили строку:

.news-page__description img{
  border-radius:var(--border-radius-1)
}

И на этом всё - при любом изменении этой настройки в панели шаблона изменение радиуса закругления будет происходить автоматически.
Такие переменные удобно использовать при адаптации модулей и дополнений - не придется беспокоиться о изменении настроек стилей, всё произойдёт автоматически. Также очень удобно в случаях, когда вы не хотите искать настройку в панели шаблона и надо изменить здесь и сейчас.
Для этого просто добавьте в стили такой код (на примере скругления углов):

:root{
  --border-radius-1:15px
}

И значение этой переменной будет изменено везде, где она используется

Актуальный список используемых css переменных в шаблоне Юнишоп2.

• --body-font
• --body-c
• --body-bg
• --h1-c
• --h2-c
• --h3-c
• --h4-c
• --h5-c
• --heading-c
• --a-c
• --a-c-hover
• --btn-default-c
• --btn-default-bg
• --btn-default-c-hover
• --btn-default-bg-hover
• --btn-primary-c
• --btn-primary-bg
• --btn-primary-c-hover
• --btn-primary-bg-hover
• --btn-danger-c
• --btn-danger-bg
• --btn-danger-c-hover
• --btn-danger-bg-hover
• --input-checked-bg
• --input-warning-c
• --input-warning-border-c
• --border-radius-0
• --border-radius-1-0-0-0
• --border-radius-0-1-0-0
• --border-radius-0-0-1-0
• --border-radius-0-0-0-1
• --border-radius-1-1-0-0
• --border-radius-0-1-1-0
• --border-radius-0-0-1-1
• --border-radius-1-0-0-1
• --border-radius-0-1-1-1
• --border-radius-1-0-1-1
• --border-radius-1-1-0-1
• --border-radius-1-1-1-0
• --border-radius-1
• --rating-star-c-active
• --top-menu-bg
• --top-menu-btn-c
• --top-menu-btn-c-hover
• --header-bg
• --header-search-cat-btn-c
• --header-search-cat-btn-bg
• --header-search-input-c
• --header-search-input-bg
• --header-phones-m-c
• --header-phones-m-c-hover
• --header-phones-a-c
• --header-icon-c
• --header-icon-total-c
• --header-icon-total-bg
• --header-block-caption-c
• --menu-main-c
• --menu-main-bg
• --menu-main-header-c
• --menu-main-header-bg
• --menu-main-level-1-c
• --menu-main-level-1-c-hover
• --menu-main-level-2-c
• --menu-main-level-2-c-hover
• --menu-main-level-2-bg
• --menu-main-level-3-c
• --menu-main-level-3-c-hover
• --menu-main-before
• --menu-right-bg
• --menu-right-level-1-c
• --menu-right-level-1-c-hover
• --menu-right-level-2-c
• --menu-right-level-2-c-hover
• --menu-right-level-2-bg
• --menu-right-level-3-c
• --menu-right-level-3-c-hover
• --menu-module-bg
• --menu-module-c1
• --menu-module-c1-hover
• --menu-module-c2
• --menu-module-c2-hover
• --menu-module-c3
• --menu-module-c3-hover
• --slideshow-title-c
• --slideshow-text-c
• --slideshow-btn-c
• --slideshow-btn-bg
• --slideshow-nav-btn-c
• --slideshow-dot-bg
• --slideshow-dot-bg-active
• --swiper-pagination-bg
• --swiper-pagination-bg-active
• --home-banner-bg
• --home-banner-icon-c
• --home-banner-text-c
• --qty-indicator-5
• --qty-indicator-4
• --qty-indicator-3
• --qty-indicator-2
• --qty-indicator-1
• --qty-indicator-0
• --timer-bg
• --timer-text-c
• --timer-digit-c
• --prod-thumb-name
• --prod-thumb-name-hover
• --option-select-c
• --option-name-c
• --option-name-bg
• --option-name-c-hover
• --option-name-c-checked
• --option-name-bg-checked
• --option-img-hover
• --option-popup-img-w
• --price-c
• --price-old-c
• --price-new-c
• --add-to-cart-btn-c
• --add-to-cart-btn-bg
• --add-to-cart-btn-c-hover
• --add-to-cart-btn-bg-hover
• --add-to-cart-btn-c-incart
• --add-to-cart-btn-bg-incart
• --add-to-cart-btn-c-qty0
• --add-to-cart-btn-bg-qty0
• --add-to-cart-btn-c-disabled
• --add-to-cart-btn-bg-disabled
• --quick-order-btn-c
• --quick-order-btn-bg
• --quick-order-btn-c-hover
• --quick-order-btn-bg-hover
• --wishlist-btn-c
• --wishlist-btn-bg
• --wishlist-btn-c-hover
• --wishlist-btn-bg-hover
• --compare-btn-c
• --compare-btn-bg
• --compare-btn-c-hover
• --compare-btn-bg-hover
• --sticker-reward-c
• --sticker-reward-b
• --sticker-special-c
• --sticker-special-b
• --sticker-bestseller-c
• --sticker-bestseller-b
• --sticker-new-c
• --sticker-new-b
• --sticker-ean-c
• --sticker-ean-b
• --product-banner-bg
• --product-banner-icon
• --product-banner-text
• --nav-tabs-bg
• --nav-tabs-c
• --nav-tabs-c-active
• --carousel-dot-bg
• --carousel-dot-bg-active
• --carousel-nav-btn-c
• --carousel-nav-btn-bg
• --pagination-c
• --pagination-bg
• --pagination-c-active
• --pagination-bg-active
• --footer-c
• --footer-bg
• --footer-heading-c
• --subscribe-info-c
• --subscribe-points-c
• --subscribe-input-c
• --subscribe-input-bg
• --subscribe-btn-c
• --subscribe-btn-bg
• --fly-menu-bg
• --fly-menu-icon-c
• --fly-menu-icon-total-c
• --fly-menu-icon-total-bg
• --fly-menu-search-cat-btn-bg
• --fly-menu-search-cat-btn-c
• --fly-menu-search-input-bg
• --fly-menu-search-input-c
• --fly-menu-phone-c
• --fly-menu-caption-c
• --fly-menu-level-1-bg-hover
• --fly-contacts-btn-c
• --fly-contacts-btn-bg
• --fly-contacts-bg
• --fly-contacts-item-c
• --fly-contacts-item-bg
• --fly-callback-c
• --fly-callback-bg
• --notification-body-bg
• --notification-text-c
• --notification-btn-cancel-c
• --pwa-c
• --pwa-bg
• --pwa-install-c
• --pwa-install-bg
• --pwa-close-c
• --alert-success-c
• --alert-success-bg
• --alert-warning-c
• --alert-warning-bg
• --alert-danger-c
• --alert-danger-bg
• --preloader-border-c
• --tooltip-c
• --tooltip-bg

Некоторые пояснения:

• -c в конце - цвет элемента
• -bg в конце - цвет фона элемента
• -c-hover в конце - цвет элемента при наведении курсора
• -bg-hover в конце - цвет фона элемента при наведении курсора