How can I add a gradient class to multiple items back to back within this flex container while respecting the number of items? currently it only works by adding a class to one particular group of 'unit' and that produces separate gradients.
I'd like a gradient to cover two or more items while keeping all items flex and equal.
.chart {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 15px;
margin-bottom: 50px;
}
.dot-black {
width: 8px;
height: 8px;
border-radius: 4px;
background: black;
}
.dot-grey {
width: 22px;
height: 22px;
border-radius: 11px;
background: grey;
}
.dot-green {
width: 22px;
height: 22px;
border-radius: 11px;
background: green;
}
.unit {
flex: 1;
display: flex;
align-items: center;
}
.line-black {
height: 2px;
background: black;
}
.line-grey {
height: 2px;
background: grey;
flex-grow: 1;
}
.gradient {
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}
<div class="chart">
<div class="unit gradient">
<div class="dot-black"></div>
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit gradient">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
</div>
You can control the gradient on the parent element where you can specify the background size you want in order to cover only the needed elements:
.chart {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 15px;
margin-bottom: 50px;
background:
linear-gradient(90deg, rgba(2, 0, 36, 1), rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1))
left /* Start from the left */
/
calc(var(--n,0)* 100%/8) 100% /* we have 8 circles so Nx(width)/8 */
content-box /* Cover only the content, don't account for padding */
no-repeat; /* Don' repeat */
}
.dot-black {
width: 8px;
height: 8px;
border-radius: 4px;
background: black;
}
.dot-grey {
width: 22px;
height: 22px;
border-radius: 11px;
background: grey;
}
.dot-green {
width: 22px;
height: 22px;
border-radius: 11px;
background: green;
}
.unit {
flex: 1;
display: flex;
align-items: center;
}
.line-black {
height: 2px;
background: black;
}
.line-grey {
height: 2px;
background: grey;
flex-grow: 1;
}
<div class="chart" style="--n:2">
<div class="unit">
<div class="dot-black"></div>
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
</div>
<div class="chart" style="--n:5">
<div class="unit">
<div class="dot-black"></div>
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
</div>
<div class="chart" style="--n:6">
<div class="unit">
<div class="dot-black"></div>
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
</div>
If you are intrested you can build the whole layout with only background and no html elements:
.chart {
margin: 0 15px 5px;
height:22px;
background:
/* Small dot */
radial-gradient(circle 4px,black 95%,transparent 100%) left center/8px 8px no-repeat,
/* horizontal line */
linear-gradient(grey,grey) center/100% 2px no-repeat,
/* big dots */
radial-gradient(circle 11px at calc(100% - 11px) 50% ,grey 95%,transparent 100%) left/calc(100%/8) 100%,
/* Our Gradient */
linear-gradient(90deg, rgba(2, 0, 36, 1), rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1)) left/calc(var(--n, 0)* 100%/8) 100% no-repeat;
}
<div class="chart" ></div>
<div class="chart" style="--n:2"></div>
<div class="chart" style="--n:5"></div>
<div class="chart" style="--n:8"></div>