Есть табы с декоративными кнопками. В некоторых кнопках идеально встаёт посередине. В других едет, рисунок...
Как сделать чтоб во всех было ровно? Пробовал задавать флексы, гриды. Менять позиционирование абсолютное/относительное. Менять top, left, bottom... — Если и поправлялось временно, то при следующем открытии - опять разъезжается всё!
window.tabaction = function(obj, i) {
obj.blocks.forEach((item) => item.classList.remove(obj.active_class));
obj.blocks[i].classList.add(obj.active_class);
if(obj.animation_class) {
obj.blocks.forEach((item) => item.classList.remove(obj.animation_class));
obj.blocks[i].classList.add(obj.animation_class);
}
};
const ACTIVE_CLASS = 'about__text--active';
const ANIMATION_CLASS = 'tab-animation';
const ACTIVE_BLOCK = 'scale__block--active';
var buttonsWrap = document.querySelector('.scale');
var buttons = document.querySelectorAll('.scale__button');
var blocks = document.querySelectorAll('.about__text');
buttonsWrap.addEventListener('click', onChangeTabs);
function onChangeTabs(evt) {
for (let i = 0; i < buttons.length; i++) {
if (evt.target.classList.contains('scale__button') && evt.target == buttons[i]){
window.tabaction({
buttons : buttons,
blocks : blocks,
active_class : ACTIVE_CLASS,
animation_class : ANIMATION_CLASS,
}, i);
сhangeButton(i);
}
}
}
function сhangeButton(i){
buttons.forEach((item) => item.parentNode.classList.remove(ACTIVE_BLOCK));
buttons[i].parentNode.classList.add(ACTIVE_BLOCK);
}
.scale
{
background: -webkit-gradient(linear,left top,right top,from(#d0d5e3),to(#d4d8e4)) #c8cede;
background: linear-gradient(to right,#d0d5e3 0,#d4d8e4 100%) #c8cede;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 610px;
height: 2px;
margin-top: 75px;
margin-left: 110px;
}
@media (max-width:1000px)
{
.scale
{
margin-left: 80px;
width: 400px;
}
}
@media (max-width:768px)
{
.scale
{
margin-left: auto;
margin-right: auto;
width: 270px;
}
}
.scale__block
{
position: relative;
top: -34px;
left: 0;
margin-right: -10px;
}
.scale__block--active.scale__block
{
top: -42px;
}
.scale__block--active:first-of-type
{
margin-left: -15px;
}
.scale__block--active:last-of-type
{
margin-right: -20px;
margin-left: 70px;
}
.scale__block--active:not(:last-of-type)
{
margin-right: 70px;
}
@media (max-width:1000px)
{
.scale__block--active:last-of-type
{
margin-left: 40px;
}
.scale__block--active:not(:last-of-type)
{
margin-right: 40px;
}
}
@media (max-width:768px)
{
.scale__block--active:last-of-type
{
margin-left: 20px;
}
.scale__block--active:not(:last-of-type)
{
margin-right: 20px;
}
}
.scale__text
{
font: normal 400 14px/30px "Exo 2";
color: #b1b6c4;
letter-spacing: normal;
padding-bottom: 0;
text-decoration: underline;
-webkit-text-decoration-style: dotted;
text-decoration-style: dotted;
}
.scale__block--active .scale__text
{
font: italic 400 16px/30px "Exo 2- Semi Bold Italic";
color: #333;
letter-spacing: normal;
text-decoration: none;
}
.scale__block--active .scale__button::before
{
background: #fff;
content: "";
position: absolute;
top: 1px;
left: 0;
text-align: center;
width: 18px;
height: 18px;
border: 3px solid #c8cede;
border-radius: 50%;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.scale__block--active .scale__button::after
{
background: -webkit-gradient(linear,left bottom,left top,from(#ed8439),to(#ffac70)) #fff;
background: linear-gradient(to top,#ed8439 0,#ffac70 100%) #fff;
content: "";
position: absolute;
top: 5.5px;
left: 9%;
text-align: center;
width: 12px;
height: 12px;
-webkit-box-shadow: 0 20px 30px rgba(0,0,0,.2);
box-shadow: 0 20px 30px rgba(0,0,0,.2);
border: 1px solid #c8cede;
border-radius: 50%;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.scale__block--active .scale__button:focus::before,.scale__block--active .scale__button:hover::before
{
border-width: 3px;
border-color: #333;
}
.scale__button
{
background: 0 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-decoration: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: none;
font-family: inherit;
text-transform: uppercase;
cursor: pointer;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 150ms;
transition-duration: 150ms;
position: relative;
}
.scale__button:focus,.scale__button:hover
{
opacity: .9;
}
.scale__button:active
{
opacity: .7;
}
.scale__button::before
{
background: #fff;
content: "";
position: relative;
bottom: 0;
left: 0;
width: 6px;
height: 6px;
border: 1px solid #c8cede;
border-radius: 50%;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.scale__button:focus::before,.scale__button:hover::before
{
border-width: 2px;
border-color: #333;
}
<section class="about">
<div class="scale">
<div class="scale__block scale__block--active">
<div class="scale__text text">2010 г.</div>
<div class="scale__button"></div>
</div>
<div class="scale__block">
<div class="scale__text text">2011 г.</div>
<div class="scale__button"></div>
</div>
<div class="scale__block">
<div class="scale__text text">2012 г.</div>
<div class="scale__button"></div>
</div>
<div class="scale__block">
<div class="scale__text text">2013 г.</div>
<div class="scale__button"></div>
</div>
<div class="scale__block">
<div class="scale__text text">2014 г.</div>
<div class="scale__button"></div>
</div>
<div class="scale__block">
<div class="scale__text text">2015 г.</div>
<div class="scale__button"></div>
</div>
</div>
<p class="about__text text about__text--active">2010 <strong>Производственно-Коммерческая Фирма</strong> создана, чтобы закрывать потребности в черном, оцинкованном, цветном и нержавеющем металлопрокате, а так-же трубах, трубопроводной арматуре и грузоподъёмном оборудовании.</p>
<p class="about__text text">2011 <strong>Производственно-Коммерческая Фирма </strong> создана, чтобы закрывать потребности в черном, оцинкованном, цветном и нержавеющем металлопрокате, а так-же трубах, трубопроводной арматуре и грузоподъёмном оборудовании.</p>
<p class="about__text text">2012 <strong>Производственно-Коммерческая Фирма</strong> создана, чтобы закрывать потребности в черном, оцинкованном, цветном и нержавеющем металлопрокате, а так-же трубах, трубопроводной арматуре и грузоподъёмном оборудовании.</p>
<p class="about__text text">2013 <strong>Производственно-Коммерческая Фирма</strong> создана, чтобы закрывать потребности в черном, оцинкованном, цветном и нержавеющем металлопрокате, а так-же трубах, трубопроводной арматуре и грузоподъёмном оборудовании.</p>
<p class="about__text text">2014 <strong>Производственно-Коммерческая Фирма </strong> создана, чтобы закрывать потребности в черном, оцинкованном, цветном и нержавеющем металлопрокате, а так-же трубах, трубопроводной арматуре и грузоподъёмном оборудовании.</p>
<p class="about__text text">2015 <strong>Производственно-Коммерческая Фирма </strong> создана, чтобы закрывать потребности в черном, оцинкованном, цветном и нержавеющем металлопрокате, а так-же трубах, трубопроводной арматуре и грузоподъёмном оборудовании.</p><a class="about__button" href="#"><span>компания</span></a>
</section>
top:5.5px; left:9%
?