31.окт.2024
Компонент "Двойные табы" для 1С-Битрикс
Первые табы это разделы, внутри контента есть боковые табы - название элемента, по нажатию переключается инфо блок слева
PHP - template.php
<?
use Bitrix\Main\Diag\Debug;
if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);
?>
<section class="block_info_tabs container">
<div class="header">
<p class="above_desc"><?=$arResult['LEFT_SECTION']["DESCRIPTION"];?></p>
<p class="title"><?=$arResult['LEFT_SECTION']["NAME"];?></p>
</div>
<div class="tabs" id="tabs_subSection">
<ul class="tabs-nav">
<?foreach($arResult['LEFT_SECTION']["SUB_SECTION"] as $key => $tabsSectionName):?>
<?if($tabsSectionName["NAME"]):?>
<a href="#section-<?=$tabsSectionName['ID']?>" class="<?=$tabsSectionName['ID'] ? 'active' : ''?> tab">
<?=$tabsSectionName['NAME']?>
</a>
<?endif;?>
<?endforeach;?>
</ul>
<div class="items">
<?foreach($arResult['LEFT_SECTION']["SUB_SECTION"] as $key => $sectionItems):?>
<div class="item" id="section-<?=$key?>">
<div class="item_nav">
<?foreach($sectionItems["ITEMS"] as $keySubSection => $tabSubSectionName):?>
<?if($tabSubSectionName["NAME"]):?>
<a href="#sub_section-<?=$tabSubSectionName['ID']?>" class="<?=$tabSubSectionName['ID'] ? 'active' : ''?> tab">
<?=$tabSubSectionName['NAME']?>
</a>
<?endif;?>
<?endforeach;?>
</div>
<?foreach($sectionItems["ITEMS"] as $keySubSection => $item):?>
<div class="item__content" id="sub_section-<?=$item['ID']?>">
<?if(strlen($item['PREVIEW_TEXT'])):?>
<div class="previewtext" id="show_<?=$this->GetEditAreaId($item['ID'])?>" style="overflow: hidden;">
<?if(strlen($item['PREVIEW_TEXT'])):?>
<?if($item['PREVIEW_TEXT_TYPE'] == 'text'):?>
<p><?=$item['PREVIEW_TEXT']?></p>
<?else:?>
<?=$item['PREVIEW_TEXT']?>
<?endif;?>
<?endif;?>
</div>
<?endif;?>
<div class="footer__content">
<div class="price"><?=$item["PROPERTIES"]["ATTR_PRICE"]["VALUE"]?></div>
<div class="btns">
<?if($item["PROPERTIES"]["ATTR_BTN_MORE"]["VALUE"] && $item["PROPERTIES"]["ATTR_BTN_MORE"]["DESCRIPTION"]):?>
<a class="btn_more" href="<?=$item["ATTR_BTN_MORE"]["VALUE"];?>"> <?=$item["PROPERTIES"]["ATTR_BTN_MORE"]["DESCRIPTION"];?> </a>
<?endif;?>
<?if($item["PROPERTIES"]["ATTR_ORDER"]["VALUE"] && $item["PROPERTIES"]["ATTR_ORDER"]["DESCRIPTION"]):?>
<a class="btn_order" href="<?=$item["PROPERTIES"]["ATTR_ORDER"]["VALUE"];?>"> <?=$item["PROPERTIES"]["ATTR_ORDER"]["DESCRIPTION"];?> </a>
<?endif;?>
<a class="btn_tg" href="<?$APPLICATION->IncludeFile(SITE_TEMPLATE_PATH . "/includes/tg.php", [], ["SHOW_BORDER" => false]);?>"></a>
<a class="btn_whatsapp" href="<?$APPLICATION->IncludeFile(SITE_TEMPLATE_PATH . "/includes/whatsapp.php", [], ["SHOW_BORDER" => false]);?>"></a>
</div>
</div>
</div>
<?endforeach;?>
</div>
<?endforeach;?>
</div>
</div>
</section>
PHP - result_modifier.php
<?php
use Bitrix\Iblock\SectionElementTable;
$arSections = []; // Массив разделов
$arResult = []; // Массив для хранения элементов
// Формируем список разделов по фильтру
$dbResSect = CIBlockSection ::GetList(
["SORT" => 'asc'], // Параметры сортировки
[
"IBLOCK_ID" => $arParams["IBLOCK_ID"], // ID инфоблока
"ACTIVE" => "Y",
"SECTION_ID" => $arParams["PARENT_SECTION"], // ID родительского раздела
],
false,
['ID', 'NAME',], // Выбираем необходимые поля разделов
);
$arSections["LEFT_SECTION"] = CIBlockSection ::GetByID($arParams["PARENT_SECTION"]) -> GetNextElement() -> GetFields();
// Получаем разделы и собираем их в массив
while($sectRes = $dbResSect -> GetNext()){
$arSections["LEFT_SECTION"]["SUB_SECTION"][$sectRes['ID']] = $sectRes;
}
// Формируем массив элементов по фильтру
$arSelect = [
"ID",
"NAME",
"IBLOCK_ID",
"IBLOCK_SECTION_ID",
"PREVIEW_PICTURE",
"PREVIEW_TEXT",
"PROPERTY_*", // Выбираем все свойства
];
$arFilter = ["IBLOCK_ID" => $arParams["IBLOCK_ID"], "ACTIVE_DATE" => "Y", "ACTIVE" => "Y"];
$res = CIBlockElement ::GetList(["SORT" => "ASC"], $arFilter, false, false, $arSelect);
while($item = $res -> GetNextElement()){
$arElemFields = $item -> GetFields(); // Получаем поля элемента
$arProps = $item->GetProperties();
$arSelFlds = [
"ID" => $arElemFields["ID"],
"NAME" => $arElemFields["NAME"],
"PREVIEW_PICTURE" => CFile ::GetPath($arElemFields["PREVIEW_PICTURE"]),
"PREVIEW_TEXT" => $arElemFields["PREVIEW_TEXT"],
"DETAIL_PAGE_URL" => $arElemFields["DETAIL_PAGE_URL"],
"PROPERTIES" => $arProps,
];
// Добавляем элемент в массив $arResult с ключом по ID
$arResult["ITEMS"][$arElemFields['ID']] = $arSelFlds;
}
// Получаем связи элементов с разделами
$elementIdsBySectionIds = [];
$iterator = SectionElementTable ::getList([
'select' => ['IBLOCK_SECTION_ID', 'IBLOCK_ELEMENT_ID'],
'filter' => ['IBLOCK_ELEMENT_ID' => array_keys($arResult["ITEMS"])], // Фильтр по ID элементов
]);
while($row = $iterator -> fetch()){
$elementIdsBySectionIds[$row['IBLOCK_SECTION_ID']][] = $row['IBLOCK_ELEMENT_ID'];
}
// Вставляем элементы в соответствующие разделы
foreach($elementIdsBySectionIds as $sectionId => $elementIds){
if(isset($arSections["LEFT_SECTION"]["SUB_SECTION"][$sectionId])){ // Проверяем, существует ли раздел
foreach($elementIds as $elementId){
if(isset($arResult["ITEMS"][$elementId])){
$arSections["LEFT_SECTION"]["SUB_SECTION"][$sectionId]['ITEMS'][] = $arResult["ITEMS"][$elementId]; // Вставляем элемент в раздел
}
}
}
}
// Присваиваем результат
$arResult = $arSections;JavaScript - script.js
document.addEventListener("DOMContentLoaded", () => {
// Получение всех вкладок и элементов навигации
const tabsSection = document.querySelector('#tabs_subSection');
const tabItems = tabsSection.querySelectorAll('.items > .item');
const tabContents = tabsSection.querySelectorAll('.item__content');
const tabLinks = document.querySelectorAll('.tabs-nav > a');
const itemsNav = document.querySelectorAll('.item_nav');
// Функция для скрытия всех табов
const hideAll = (elements) => {
elements.forEach(item => item.style.display = 'none');
};
// Инициализация: скрыть все элементы и показать первый
const initTabs = () => {
hideAll(tabItems);
hideAll(tabContents);
if (tabItems.length > 0) tabItems[0].style.display = 'flex';
if (tabContents.length > 0) tabContents[0].style.display = 'flex';
if (itemsNav.length > 0) itemsNav[0].classList.add('active');
};
// Функция для обработки кликов по вкладкам
const handleTabClick = (tabLink, key) => {
tabLink.addEventListener('click', function (event) {
event.preventDefault();
// Скрыть все табы, контент и закрыть все подменю
hideAll(tabItems);
hideAll(tabContents);
// Показать текущий таб и связанный с ним контент
const href = this.getAttribute('href');
const targetContent = document.querySelector(href);
if (targetContent) {
targetContent.style.display = 'flex';
}
// Активировать выбранную вкладку
tabLinks.forEach((link, key) => {
link.classList.remove('active')
this.classList.add('active');
itemsNav[key].classList.remove("active");
});
// Открыть подменю, связанное с текущей вкладкой
if (tabItems[key].style.display === "flex") {
// Получаем только дочерние элементы с помощью children
const itemNavs = tabItems[key].children;
// Преобразуем HTMLCollection в массив и фильтруем по классу item_nav
const navElements = Array.from(itemNavs).filter(item => item.classList.contains('item_nav'));
// Если есть элементы с классом item_nav
if (navElements.length > 0) {
// Присваиваем класс active первому найденному элементу с классом item_nav
navElements[0].classList.add('active');
}
}
clickTab(key);
});
// Обработка кликов по элементам подменю
const itemNavLinks = itemsNav[key].querySelectorAll('a');
console.log(itemNavLinks);
itemNavLinks.forEach((itemNav) => {
itemNav.addEventListener('click', function (e) {
e.preventDefault();
itemsNav[key].classList.remove("active");
// Найти и показать соответствующий контент
const targetContent = document.querySelector(itemNav.getAttribute('href'));
if (targetContent) {
hideAll(tabContents);
targetContent.style.display = 'flex';
}
});
});
};
// Привязка обработчиков кликов для всех вкладок
tabLinks.forEach((tabLink, key) => handleTabClick(tabLink, key));
// Инициализация первого таба при загрузке
initTabs();
if (tabLinks.length > 0) tabLinks[0].classList.add('active');
// Обработчик для якорных ссылок
const anchors = document.querySelectorAll('.tabs-target');
anchors.forEach(anchor => {
anchor.addEventListener('click', function (event) {
event.preventDefault();
const targetTab = document.querySelector(`.tabs-nav a[href="${this.getAttribute('href')}"]`);
if (targetTab) {
targetTab.click();
}
});
});
// Функция для клика по первому элементу подменю внутри таба
function clickTab(tabKey) {
const firstItemNav = itemsNav[tabKey].querySelector('a');
if (!itemsNav[tabKey].classList.contains("active")) {
console.log(itemsNav[tabKey]);
firstItemNav.click();
}
}
});CSS - style.css
.block_info_tabs.container {
margin: var(--mt150) auto 0;
max-width: 1220px;
padding: 0 20px;
.header {
text-align: center;
margin: 0 auto 47px auto;
width: 100%;
max-width: 619px;
min-width: 300px;
display: block;
.title {
margin-top: 10px;
font-size: clamp(24px, 3vw, 30px);
line-height: var(--lh140);
font-weight: bold;
text-wrap: balance;
}
.above_desc {
line-height: var(--lh120);
font-size: 14px;
}
}
.tabs {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.tabs-nav {
display: flex;
gap: 5px;
align-items: flex-start;
margin: 0;
justify-content: center;
@media screen and (max-width: 480px) {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
padding: 0;
width: 100%;
margin-bottom: 10px;
}
.tab {
background-color: var(--grey-E8);
color: var(--black-22);
font-size: 14px;
line-height: var(--lh120);
padding: clamp(12px, 3vw, 20px) clamp(38px, 5.8vw, 71px);
font-weight: bold;
border-radius: 12px 12px 0 0;
box-shadow: 0 2px 28.2px rgb(0 0 0 / 8%);
text-wrap: nowrap;
@media screen and (max-width: 480px) {
border-radius: 10px;
background-color: var(--white);
text-wrap: balance;
height: 55px;
display: flex;
align-items: center;
&:after{
content:url("data:image/svg+xml,%3Csvg width='13' height='11' viewBox='0 0 13 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_502_1366)'%3E%3Cpath d='M6.80326 7.88404L10.9281 3.75928L12.1066 4.93779L6.80326 10.2411L1.5 4.93779L2.67851 3.75928L6.80326 7.88404Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_502_1366'%3E%3Crect width='12' height='9.48185' fill='white' transform='translate(0.5 0.759277)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
width: 13px;
margin-left:10px;
}
}
&:hover {
background-color: var(--white);
outline: solid 1px var(--grey-E8);
color: var(--red-7E);
box-shadow: 0 -6px 25.2px rgb(0 0 0 / 8%);
}
}
.active {
background-color: var(--white);
outline: solid 2px var(--grey-E8);
color: var(--red-7E);
box-shadow: 0 -6px 25.2px rgb(0 0 0 / 8%);
@media screen and (max-width: 480px) {
border-radius: 10px;
&:after{
content:url("data:image/svg+xml,%3Csvg width='13' height='11' viewBox='0 0 13 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_502_1362)'%3E%3Cpath d='M6.80326 7.88404L10.9281 3.75928L12.1066 4.93779L6.80326 10.2411L1.5 4.93779L2.67851 3.75928L6.80326 7.88404Z' fill='%237E3B42'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_502_1362'%3E%3Crect width='12' height='9.48185' fill='white' transform='translate(0.5 0.759277)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
width: 13px;
margin-left:10px;
}
}
}
}
.items {
width: 100%;
max-width: 100%;
min-width: 300px;
height: 100%;
display: block;
.item {
height: inherit;
display: flex;
gap: 55px;
align-items: flex-start;
border-radius: 0 0 10px 10px;
background: white;
box-shadow: 0 8px 28.2px rgba(0, 0, 0, 0.08);
padding: 40px clamp(24px, 3vw, 49px) 55px clamp(24px, 3vw, 49px);
position: relative;
.item_nav {
display: flex;
flex-direction: column;
gap: 10px;
@media screen and (max-width: 480px) {
display: none;
position: absolute;
z-index: 999;
background: white;
top: 10px;
left: 0;
right: auto;
width: 100%;
}
.tab {
box-shadow: 0 2px 28.2px rgba(0, 0, 0, 0.08);
padding: 19px clamp(11.5px, 1vw, 41px);
border-radius: 10px;
color: var(--black-22);
transition: all .4s;
font-size: 14px;
line-height: 120%;
font-weight: bold;
text-wrap: nowrap;
&:hover,
&.active {
color: var(--red-7E);
outline: 1px solid var(--red-7E);
}
}
}
.item_nav.active {
display: flex;
}
.item__content {
display: flex;
flex-direction: column;
align-items: flex-start;
.previewtext {
flex: 1 1 auto;
color: var(--black-22);
font-size: 14px;
line-height: 140%;
display: flex;
flex-direction: column;
gap: 15px;
}
.footer__content {
display: flex;
flex-direction: column;
gap: 23px;
align-items: flex-end;
width: 100%;
@media screen and (max-width: 1024px) {
align-items: flex-start;
}
.price {
color: var(--red-7E);
font-size: var(--h1);
line-height: var(--ln120);
font-weight: bold;
margin: clamp(17px, 5vw, 41px) 0 clamp(25px, 5vw, 41px) 0;
}
.btns {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
gap: 11px;
.btn_more,
.btn_order {
padding: 20px clamp(10px, 3vw, 30px);
font-size: 14px;
font-weight: bold;
line-height: var(--lh120);
color: var(--red-7E);
background-color: var(--white);
border-radius: 5px;
cursor: pointer;
outline: 2px solid var(--red-7E);
text-align: center;
@media screen and (max-width: 480px) {
width: 100%;
}
}
.btn_order {
color: var(--white);
background-color: var(--red-7E);
border: none;
outline: none;
}
.btn_tg, .btn_whatsapp {
padding: 10px;
border: 1px solid var(--red-7E);
background-color: var(--white);
border-radius: 5px;
transition: all .3s;
@media screen and (max-width: 480px) {
padding: 8.5px clamp(50px, 14.8vw, 80px);
}
&:before {
content: url("data:image/svg+xml,%3Csvg width='35' height='36' viewBox='0 0 35 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.5013 29.6667C23.9447 29.6667 29.168 24.4434 29.168 18.0001C29.168 11.5568 23.9447 6.33341 17.5013 6.33341C11.058 6.33341 5.83464 11.5568 5.83464 18.0001C5.83464 24.4434 11.058 29.6667 17.5013 29.6667ZM17.5013 32.5834C9.44715 32.5834 2.91797 26.0542 2.91797 18.0001C2.91797 9.94592 9.44715 3.41675 17.5013 3.41675C25.5554 3.41675 32.0847 9.94592 32.0847 18.0001C32.0847 26.0542 25.5554 32.5834 17.5013 32.5834ZM12.9661 19.7075L9.32312 18.5704C8.53575 18.3289 8.53106 17.7872 9.49941 17.3979L23.6934 11.9152C24.5166 11.5782 24.9848 12.004 24.7179 13.0657L22.3003 24.4717C22.132 25.2831 21.6426 25.4764 20.9647 25.1019L17.2447 22.3493L15.5109 24.0226C15.3326 24.1945 15.1877 24.3422 14.9147 24.3793C14.6415 24.4162 14.4164 24.3354 14.2527 23.8826L12.9846 19.6958L12.9661 19.7075Z' fill='%237E3B42'/%3E%3C/svg%3E");
width: 35px;
height: 35px;
display: block;
}
&:hover {
background-color: var(--black-22);
}
}
.btn_whatsapp {
&:before {
content: url("data:image/svg+xml,%3Csvg width='33' height='32' viewBox='0 0 33 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.1715 24.6593L11.1378 25.2227C12.7521 26.1641 14.5868 26.6667 16.5013 26.6667C22.3924 26.6667 27.168 21.8911 27.168 16.0001C27.168 10.109 22.3924 5.33341 16.5013 5.33341C10.6103 5.33341 5.83464 10.109 5.83464 16.0001C5.83464 17.9151 6.33761 19.7505 7.27954 21.3651L7.84272 22.3305L6.9714 25.5326L10.1715 24.6593ZM3.17354 29.3334L4.97616 22.7087C3.82658 20.7382 3.16797 18.4461 3.16797 16.0001C3.16797 8.63628 9.1375 2.66675 16.5013 2.66675C23.8651 2.66675 29.8347 8.63628 29.8347 16.0001C29.8347 23.3638 23.8651 29.3334 16.5013 29.3334C14.0561 29.3334 11.7647 28.6753 9.79448 27.5263L3.17354 29.3334ZM11.6898 9.74452C11.8683 9.73197 12.0474 9.73005 12.2261 9.73877C12.2983 9.74352 12.3702 9.75187 12.4421 9.76017C12.6545 9.78469 12.888 9.91401 12.9665 10.092C13.3642 10.9939 13.7502 11.9009 14.1243 12.8129C14.2068 13.0142 14.1571 13.2752 14 13.5277C13.9203 13.6571 13.795 13.8387 13.65 14.0245C13.4992 14.2174 13.1746 14.5722 13.1746 14.5722C13.1746 14.5722 13.0432 14.7298 13.0927 14.9259C13.112 15.0001 13.1736 15.1081 13.2294 15.1989C13.2604 15.2491 13.2891 15.2941 13.3077 15.3251C13.6489 15.8949 14.1076 16.4725 14.6679 17.0155C14.8284 17.1711 14.9841 17.3299 15.1516 17.4774C15.776 18.0279 16.4824 18.4778 17.2453 18.811L17.2521 18.8141C17.3648 18.8626 17.4227 18.8891 17.5876 18.9591C17.6708 18.9943 17.7559 19.0247 17.8432 19.0478C17.8748 19.0561 17.9072 19.0607 17.9397 19.063C18.1553 19.0759 18.28 18.9377 18.3332 18.8741C19.2979 17.7054 19.3861 17.6291 19.3928 17.6297V17.6318C19.5196 17.4982 19.7189 17.4518 19.8968 17.4627C19.978 17.4677 20.0588 17.4833 20.1327 17.517C20.8417 17.8405 22.0011 18.345 22.0011 18.345L22.7764 18.6935C22.9063 18.7562 23.0248 18.9038 23.0305 19.0473C23.034 19.1365 23.0436 19.2805 23.0117 19.5439C22.97 19.8889 22.8651 20.3042 22.7608 20.5218C22.6875 20.6745 22.5925 20.8099 22.4821 20.9246C22.3324 21.0801 22.2212 21.1745 22.0412 21.3086C21.9316 21.3902 21.8748 21.4286 21.8748 21.4286C21.6896 21.5454 21.5852 21.6038 21.3645 21.7213C21.0213 21.9041 20.6421 22.0091 20.2537 22.0291C20.0061 22.0418 19.7592 22.0597 19.5119 22.0463C19.5009 22.0457 18.7543 21.931 18.7543 21.931C16.8584 21.4323 15.1051 20.4982 13.6338 19.2027C13.333 18.9379 13.054 18.6514 12.7692 18.3679C11.5838 17.1878 10.6864 15.9153 10.1422 14.7115C9.8739 14.1179 9.70398 13.4822 9.7013 12.8281C9.69638 12.0188 9.96132 11.231 10.4542 10.5892C10.5514 10.4627 10.6436 10.3315 10.8028 10.1812C10.9713 10.0221 11.0786 9.93667 11.1941 9.87756C11.3481 9.79877 11.5172 9.75664 11.6898 9.74452Z' fill='%237E3B42'/%3E%3C/svg%3E");
}
&:hover {
&:before {
content: url("data:image/svg+xml,%3Csvg width='35' height='36' viewBox='0 0 35 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5781 27.4711L11.635 28.0874C13.4006 29.117 15.4073 29.6667 17.5013 29.6667C23.9447 29.6667 29.168 24.4434 29.168 18.0001C29.168 11.5568 23.9447 6.33341 17.5013 6.33341C11.058 6.33341 5.83464 11.5568 5.83464 18.0001C5.83464 20.0947 6.38476 22.1021 7.415 23.8681L8.03097 24.924L7.07797 28.4263L10.5781 27.4711ZM2.92406 32.5834L4.89567 25.3377C3.63833 23.1824 2.91797 20.6754 2.91797 18.0001C2.91797 9.94592 9.44715 3.41675 17.5013 3.41675C25.5554 3.41675 32.0847 9.94592 32.0847 18.0001C32.0847 26.0542 25.5554 32.5834 17.5013 32.5834C14.8269 32.5834 12.3206 31.8636 10.1657 30.6069L2.92406 32.5834ZM12.2387 11.1581C12.4339 11.1443 12.6298 11.1422 12.8253 11.1518C12.9043 11.157 12.9829 11.1661 13.0616 11.1752C13.2938 11.202 13.5492 11.3434 13.6351 11.5381C14.0701 12.5246 14.4923 13.5167 14.9014 14.5141C14.9917 14.7343 14.9373 15.0197 14.7655 15.2959C14.6783 15.4375 14.5413 15.6361 14.3827 15.8393C14.2177 16.0503 13.8628 16.4384 13.8628 16.4384C13.8628 16.4384 13.719 16.6107 13.7732 16.8252C13.7943 16.9063 13.8616 17.0245 13.9227 17.1238C13.9565 17.1787 13.9879 17.2279 14.0083 17.2619C14.3815 17.885 14.8832 18.5168 15.496 19.1107C15.6716 19.2809 15.8419 19.4546 16.0251 19.6159C16.708 20.2181 17.4806 20.7101 18.3151 21.0745L18.3225 21.0779C18.4457 21.131 18.509 21.16 18.6894 21.2366C18.7804 21.2751 18.8735 21.3083 18.969 21.3335C19.0036 21.3426 19.039 21.3477 19.0746 21.3502C19.3104 21.3643 19.4467 21.2131 19.5049 21.1435C20.56 19.8653 20.6566 19.7819 20.6639 19.7825V19.7848C20.8026 19.6387 21.0206 19.5879 21.2151 19.5999C21.3039 19.6053 21.3923 19.6223 21.4731 19.6592C22.2486 20.013 23.5167 20.5649 23.5167 20.5649L24.3647 20.9461C24.5067 21.0146 24.6364 21.176 24.6426 21.333C24.6464 21.4305 24.6569 21.588 24.6221 21.8762C24.5764 22.2535 24.4617 22.7077 24.3476 22.9457C24.2674 23.1127 24.1636 23.2609 24.0428 23.3863C23.8791 23.5563 23.7574 23.6596 23.5606 23.8063C23.4407 23.8955 23.3786 23.9375 23.3786 23.9375C23.176 24.0653 23.0618 24.1292 22.8205 24.2576C22.4451 24.4576 22.0303 24.5725 21.6055 24.5944C21.3347 24.6082 21.0646 24.6278 20.7941 24.6132C20.7821 24.6125 19.9655 24.487 19.9655 24.487C17.8919 23.9416 15.9742 22.9199 14.365 21.503C14.0359 21.2134 13.7308 20.9 13.4194 20.5899C12.1228 19.2992 11.1413 17.9073 10.5461 16.5907C10.2526 15.9415 10.0667 15.2462 10.0638 14.5307C10.0584 13.6456 10.3482 12.7839 10.8873 12.082C10.9936 11.9436 11.0945 11.8 11.2685 11.6357C11.4529 11.4617 11.5702 11.3682 11.6965 11.3036C11.865 11.2174 12.05 11.1713 12.2387 11.1581Z' fill='white'/%3E%3C/svg%3E");
}
}
}
.btn_tg {
&:hover {
&:before {
content: url("data:image/svg+xml,%3Csvg width='35' height='36' viewBox='0 0 35 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.5013 29.6667C23.9447 29.6667 29.168 24.4434 29.168 18.0001C29.168 11.5568 23.9447 6.33341 17.5013 6.33341C11.058 6.33341 5.83464 11.5568 5.83464 18.0001C5.83464 24.4434 11.058 29.6667 17.5013 29.6667ZM17.5013 32.5834C9.44715 32.5834 2.91797 26.0542 2.91797 18.0001C2.91797 9.94592 9.44715 3.41675 17.5013 3.41675C25.5554 3.41675 32.0847 9.94592 32.0847 18.0001C32.0847 26.0542 25.5554 32.5834 17.5013 32.5834ZM12.9661 19.7075L9.32312 18.5704C8.53575 18.3289 8.53106 17.7872 9.49941 17.3979L23.6934 11.9152C24.5166 11.5782 24.9848 12.004 24.7179 13.0657L22.3003 24.4717C22.132 25.2831 21.6426 25.4764 20.9647 25.1019L17.2447 22.3493L15.5109 24.0226C15.3326 24.1945 15.1877 24.3422 14.9147 24.3793C14.6415 24.4162 14.4164 24.3354 14.2527 23.8826L12.9846 19.6958L12.9661 19.7075Z' fill='white'/%3E%3C/svg%3E");
}
}
}
}
}
}
}
}
}
}© LazarovStudio 2017 - 2025
Есть что-то, что не любит ограждений ©