I want the tab indicator to adjust its size based on the text.
For example:
https://i.sstatic.net/a8Y0I.png
https://i.sstatic.net/xniMb.png
Should I use JavaScript for this purpose? I am currently using Angular.
Here is my HTML code:
<div class="row ranking-wrapper">
<div class="col s12 tab-cor no-pd">
<ul class="tabs ranking-tabs tabs-fixed-width tabs-icon">
<li class="tab col s3">
<a href="#ranking-nivel1">
<div>
<i class="material-icons estrela-tabs tabs-icon">star</i>
</div>
<div>
{{NIVEL1}}
</div>
</a>
</li>
</ul>
</div>
</div>
And here is my CSS:
.tabs .indicator {
background-color:#f6a20d;
height: 5px !important;
}
.tab-cor{
background-color: #5c4438;
border-bottom: 2px solid #f6a20d;
}
.tabs-icon{
font-size: 10px;
overflow: hidden;
}
.tabs-icon i {
display: block;
margin-top: 5px;
margin-bottom: -15px;
font-size: 10px;
}