<!--https://dsgnmax.ru/useful/custom-me602--> <style>
:root{
--heightIconDesktop: 40px; /*Высота иконки на десктопе*/
--widthIconDesktop: 40px; /*Ширина иконки на десктопе*/
--borderNormal: 2px solid #0b82dd !important; /*Обводка таба в нормальном состоянии*/
--borderRadiusTabsDesktop: 48px; /*Радиус скругления углов у табов на десктопе*/
--paddingTabDesktop: 12px 24px; /*Внутренние отступы у табов на десктопе*/
--transformHoverTabs: scale(1.1); /*Размер увеличения таба при наведении*/
--gapTabsDesktop: 20px; /*Отступы между табами на десктопе*/
--paddingTabsMobile: 8px 16px; /*Внутренние отступы у табов на мобилке*/
--heightIconMobile: 24px; /*Высота иконки на мобилке*/
--widthIconMobile: 24px; /*Ширина иконки на мобилке*/
--borderRadiusTabsMobile: 16px; /*Радиус скругления углов у табов на мобилке*/
--gapTabsMobile: 16px; /*Отступы между табами на мобилке*/
}
.uc-tabs .t395__tab_active:after {
width: 0px !important;
top: 0px !important;
right: 0px !important;
bottom: 0px !important;
}
.t395__title {
padding: 0 !important;
padding-top: 10px !important;
}
.uc-tabs .t395__tab{
display: grid;
justify-items: center;
padding: var(--paddingTabDesktop);
border-radius: var(--borderRadiusTabsDesktop) !important;
width: 100%;
cursor: pointer;
border: var(--borderNormal) !important;
transition: all 0.2s ease-in-out;
}
.uc-tabs .t395__tab:hover {
transform: var(--transformHoverTabs);
}
.t395__wrapper{
display: flex;
flex-wrap: nowrap;
gap: var(--gapTabsDesktop);
}
/*Первая иконка*/
.uc-tabs li[data-tab-number="1"]:before{
content:"";
width: var(--widthIconDesktop);
height: var(--heightIconDesktop);
background-image:url(https://static.tildacdn.com/tild3335-6565-4361-b430-343336346562/1.png);
background-size: cover;
background-repeat: no-repeat;
display: inline-block;
}
/*Вторая иконка*/
.uc-tabs li[data-tab-number="2"]:before{
content:"";
width: var(--widthIconDesktop);
height: var(--heightIconDesktop);
background-image:url(https://static.tildacdn.com/tild3330-3636-4263-b631-376561366530/2.png);
background-size: cover;
background-repeat: no-repeat;
display: inline-block;
}
/*Третья иконка*/
.uc-tabs li[data-tab-number="3"]:before{
content:"";
width: var(--widthIconDesktop);
height: var(--heightIconDesktop);
background-image:url(https://static.tildacdn.com/tild3061-3239-4137-b434-643761373431/3.png);
background-size: cover;
background-repeat: no-repeat;
display: inline-block;
}
/*Четвёртая иконка*/
.uc-tabs li[data-tab-number="4"]:before{
content:"";
width: var(--widthIconDesktop);
height: var(--heightIconDesktop);
background-image:url(https://static.tildacdn.com/tild6139-3430-4130-b436-663063656530/4.png);
background-size: cover;
background-repeat: no-repeat;
display: inline-block;
}
/*Стиль табов для планшетной и мобильной версий*/
/*-------------------------------------------------*/
@media screen and (max-width:959px){
.t395__wrapper{
display: flex;
flex-wrap: nowrap;
gap: var(--gapTabsMobile);
margin-top: 5px !important;
}
.t395__title{
font-size: 14px; /*Размер текста таба*/
line-height: 14px;
padding-top: 2px !important;
}
.uc-tabs .t395__tab{
display:grid;
grid-auto-flow: column;
gap: 10px;
padding: var(--paddingTabsMobile)!important; /*Отступы у таба внутри*/
border-radius: var(--borderRadiusTabsMobile)!important; /*Скруглениу углов у табов*/
width: 100%;
}
.uc-tabs li[data-tab-number="1"]:before{
width: var(--widthIconMobile);
height: var(--heightIconMobile);
}
.uc-tabs li[data-tab-number="2"]:before{
width: var(--widthIconMobile);
height: var(--heightIconMobile);
}
.uc-tabs li[data-tab-number="3"]:before{
width: var(--widthIconMobile);
height: var(--heightIconMobile);
}
.uc-tabs li[data-tab-number="4"]:before{
width: var(--widthIconMobile);
height: var(--heightIconMobile);
}
}
</style>