<div class="wTab">
<span class="active">
<i class="bi bi-bar-chart-line"></i>
</span>
<span>
<i class="bi bi-table"></i>
</span>
</div>
.dashWidget .wTab{display:grid;overflow:hidden;width:74px;height:35px;background-color:rgba(0,0,0,0.3);grid-template-columns:1fr 1fr;border-radius:4px}
.dashWidget .wTab span{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.3);width:100%;height:100%;cursor:pointer}
.dashWidget .wTab span i{font-size:16px;opacity:0.7}
.dashWidget .wTab span.active{border:0;background-color:#2062bf}
.dashWidget .wTab span.active i{opacity:1}
.dashWidget .wTab span:first-child{border-right:1px solid var(--color-navline)}
'CSS' 카테고리의 다른 글
scroll 스크롤바 css (0) | 2024.04.25 |
---|---|
tab 라디오버튼으로 만들기 (0) | 2024.04.25 |
input checkbox 만들기 (0) | 2024.04.25 |
input checkbox 스위치모양 (0) | 2024.04.25 |
Grid 레이아웃 한방 정리. 고정값 가변값 (0) | 2024.04.25 |