Kieran/zap.stream
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: profile tab borders

Browse Source
This commit is contained in:
Alejandro Gomez
2023-07-04 16:36:24 +02:00
parent 2971815417
commit 4a9fed34f0
2 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/pages/profile-page.css
View File

@ -119,10 +119,10 @@
} }
.tabs-tab { .tabs-tab {
background: black; background: #0A0A0A;
background-clip: padding-box; background-clip: padding-box;
color: white; color: white;
border: 1px solid black; border: 1px solid #0A0A0A;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
@ -137,18 +137,24 @@
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
line-height: 24px; line-height: 24px;
display: flex;
flex-direction: column;
} }
@media (max-width: 400px){ @media (max-width: 400px){
.tabs-tab { .tabs-tab {
font-size: 14px; font-size: 14px;
} }
} }
.tabs-tab[data-state='active']:before {
content: ''; .tab-border {
position: absolute; height: 1px;
top: 0; right: 0; bottom: 0; left: 0; margin-top: 12px;
z-index: -1; background: transparent;
margin: -1px; width: 100%;
}
.tabs-tab[data-state='active'] .tab-border {
height: 1px;
background: linear-gradient(94.73deg, #2BD9FF 0%, #8C8DED 47.4%, #F838D9 100%); background: linear-gradient(94.73deg, #2BD9FF 0%, #8C8DED 47.4%, #F838D9 100%);
} }

3
src/pages/profile-page.tsx
View File

@ -149,12 +149,15 @@ export function ProfilePage() {
> >
<Tabs.Trigger className="tabs-tab" value="top-zappers"> <Tabs.Trigger className="tabs-tab" value="top-zappers">
Top Zappers Top Zappers
<div className="tab-border"></div>
</Tabs.Trigger> </Tabs.Trigger>
<Tabs.Trigger className="tabs-tab" value="past-streams"> <Tabs.Trigger className="tabs-tab" value="past-streams">
Past Streams Past Streams
<div className="tab-border"></div>
</Tabs.Trigger> </Tabs.Trigger>
<Tabs.Trigger className="tabs-tab" value="schedule"> <Tabs.Trigger className="tabs-tab" value="schedule">
Schedule Schedule
<div className="tab-border"></div>
</Tabs.Trigger> </Tabs.Trigger>
</Tabs.List> </Tabs.List>
<Tabs.Content className="tabs-content" value="top-zappers"> <Tabs.Content className="tabs-content" value="top-zappers">