let icon = document.querySelector(".some-icon");
let text = icon.querySelector("text tspan");
let path = icon.querySelector("path");
text.addEventListener("mouseenter", function() {
path.style.fill = "red";
});
text.addEventListener("mouseleave", function() {
path.style.fill = "#626262";
});
path.addEventListener("mouseenter", function() {
text.style.fill = "green";
});
path.addEventListener("mouseleave", function() {
text.style.fill = "#626262";
});
function makePath(x1, y1, x2, y2) {
const weight = 0.3;
const dx = (x2 - x1) * weight;
const c1 = x1 + dx;
const c2 = x2 - dx;
return `<path d="M${x1},${y1} C${c1},${y1} ${c2},${y2} ${x2},${y2}" stroke="black" fill="transparent"/>`;
}
<div></div>
<span></span>
. left: 50%; top: 50%;
- загоняем левый-верхний угол в центр.transform: translate(-50%, -50%);
- сдвигаем левее-выше, чтобы не угол был в центре, а центр блока.flex
, это значит что для .row
можно задать align-items: stretch;
, это сделает все элементы в ряду одной высоты. Тебе останется задать содержимому ячейки высоту height: 100%
, возможно для ячеек придется задать display: flex;
. Содержимое ячейки должно быть обрамлено в некий контейнер. когда шрифт очень большой, например, 65px и тогда уже в маленький экран (320 px) это все выглядит не очень
Такая же проблема возникла у меня с отступами
<section class="table">
<div class="table__header">
<div class="table__heading">Order</div>
<div class="table__heading">Date</div>
<div class="table__heading">Name</div>
<div class="table__heading">city</div>
<div class="table__heading">payment status</div>
<div class="table__heading">order status</div>
<div class="table__heading table__heading--reverse">total</div>
</div>
<div class="table__row">
<div class="table__data">1</div>
<div class="table__data">2</div>
<div class="table__data">3</div>
<div class="table__data">4</div>
<div class="table__data">5</div>
<div class="table__data">6</div>
<div class="table__data table__data--reverse">7</div>
</div>
</section>
.table{
background: #eee;
padding: 0 10px 10px 10px;
}
.table__header{
display: flex;
align-items: center;
height: 40px;
padding: 0 10px;
}
.table__heading{
flex-grow: 1;
flex-basis: 100px;
color: #aaa;
text-transform: uppercase;
}
.table__heading--reverse{
text-align: right;
}
.table__row{
display: flex;
align-items: center;
height: 60px;
background: #fff;
box-shadow: 0 0 2px 0 #aaa;
border-radius: 2px;
padding: 0 10px;
}
.table__data{
flex-grow: 1;
flex-basis: 100px;
}
.table__data--reverse{
text-align: right;
}
<div class="container">
<section class="news">
<div class="news__item">Новость</div>
<div class="news__item">Новость</div>
<div class="news__item">Новость</div>
<div class="news__item">Новость</div>
<div class="news__item">Новость</div>
</section>
<aside class="sideBar">Боковое меню</aside>
</div>
.container{
display: flex;
max-width: 1200px;
background: #eee;
margin: 0 auto;
}
.news{
display: flex;
flex-wrap: wrap;
flex-grow: 1;
background: lightgreen;
}
.news__item{
flex-basis: 200px;
flex-grow: 1;
height: 300px;
margin: 10px;
background: lightblue;
}
.sideBar{
flex-grow: 1;
max-width: 400px;
}
var header = `<div class="header">
<h1>Lorem Ipsum</h1>
<ul class="header-menu">
<li><a href="">home</a></li>
<li><a href="">profile</a></li>
<li><a href="">portfolio</a></li>
<li><a href="">coontact my</a></li>
</ul>
</div>`;