본문 바로가기
CSS

텝 css

by 영감은어디에 2024. 4. 25.

<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