andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(app): new details footer appearance

Browse Source
This commit is contained in:
rektdeckard
2023-02-05 23:09:20 -07:00
parent 3756374140
commit eba876b3ea
19 changed files with 220 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Tabs/Tabs.css
View File

@@ -1,15 +1,12 @@
.tabs {
display: flex;
flex-direction: column;
border-left: 2px solid rgba(163, 159, 171, 0.1);
border-right: 2px solid rgba(163, 159, 171, 0.1);
}
.tabs-header {
display: flex;
align-items: center;
gap: 8px;
border-bottom: 2px solid rgba(163, 159, 171, 0.1);
}
button.tab {
@@ -19,14 +16,25 @@ button.tab {
text-align: center;
cursor: pointer;
flex: 1;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
button.tab:focus-within {
/* background-color: var(--tabs-background); */
}
.tab.active {
background-color: rgba(194, 186, 196, 0.25);
background-color: var(--tabs-background);
border-bottom: none;
}
.tab-content {
flex: 1;
padding: 8px 16px;
display: grid;
place-items: center;
border-radius: 8px;
background-color: var(--tabs-background);
overflow-y: auto;
}