При нажатии на одну из кнопок на левой панели, должна происходить плавная смена цвета таблицы на цвет кнопки, и в левой панели должен выдвигаться вперед элемент, обозначающий активный цвет.
Как реализовать изменение цвета таблицы ? Код на codepen.io
.page {
min-width: 320px;
max-width: 480px;
max-height: 800px;
min-height: 455px;
margin: 0 auto;
}
.content {
background-color: #edd3ea;
padding-top: 36px;
padding-right: 24px;
padding-bottom: 5.2%;
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
}
.bar__item {
width: 52px;
height: 70px;
transition: width .5s;
}
.bar__item_color_blue {
background-color: #4a48ba;
transition: .5s;
}
.bar__item_color_blue:hover {
width: 70px;
cursor: pointer;
}
.bar__item_color_red {
background-color: #f3535d;
}
.bar__item_color_red:hover {
width: 70px;
cursor: pointer;
}
.bar__item_color_green {
background-color: #0e9d59;
}
.bar__item_color_green:hover {
width: 70px;
cursor: pointer;
}
.bar__item_color_orange {
background-color: #ff961c;
}
.bar__item_color_orange:hover {
width: 70px;
cursor: pointer;
}
.table-grid {
display: grid;
grid-template-columns: repeat(2, minmax(81.25px, 130px));
grid-template-rows: repeat(4, minmax(81.25px, 130px));
align-items: stretch;
justify-items: stretch;
}
.table-grid__item {
display: flex;
align-items: center;
justify-content: center;
background-color: #4a48ba;
border: 2px solid #edd3ea;
box-sizing: border-box;
color: #ffff80;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 48px;
line-height: 56px;
}
<div class="page">
<main class="content">
<section class="bar">
<div class="bar__item bar__item_color_blue"></div>
<div class="bar__item bar__item_color_red"></div>
<div class="bar__item bar__item_color_green"></div>
<div class="bar__item bar__item_color_orange"></div>
</section>
<section class="table-grid">
<div class="table-grid__item">1</div>
<div class="table-grid__item">2</div>
<div class="table-grid__item">3</div>
<div class="table-grid__item">4</div>
<div class="table-grid__item">5</div>
<div class="table-grid__item">6</div>
<div class="table-grid__item">7</div>
<div class="table-grid__item">8</div>
</section>
</main>
</div>