Mirroring/my-links
1
0
Fork 0
mirror of https://github.com/Sonny93/my-links.git synced 2025-12-10 15:35:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

migration vers typescript + refonte total de l'app

Browse Source
This commit is contained in:
Sonny
2022-04-28 04:30:38 +02:00
parent 1568e9b4ac
commit b81137f004
33 changed files with 2738 additions and 7822 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
styles/home/categories.module.scss Normal file
View File

@@ -0,0 +1,136 @@
.categories-wrapper {
height: 100%;
width: 300px;
padding: 0 25px 0 10px;
border-right: 1px solid #dadce0;
margin-right: 15px;
display: flex;
align-items: center;
flex-direction: column;
overflow-x: none;
& .block-wrapper {
height: auto;
width: 100%;
& h4 {
user-select: none;
text-transform: uppercase;
font-size: 0.85em;
color: #bbb;
margin-bottom: 5px;
}
// List items
& .items .item {
user-select: none;
cursor: pointer;
background-color: #fff;
padding: 7px 12px;
border: 1px solid #dadce0;
border-bottom: 2px solid #dadce0;
border-radius: 3px;
transition: 0.15s;
&:not(:last-child) {
margin-bottom: 5px;
}
& .links-count {
color: #bbb;
font-size: 0.85em;
}
&.active {
color: #fff;
background: #3f88c5;
border-color: #3f88c5;
}
&:hover:not(.active) {
color: #3f88c5;
background: #f0eef6;
border-bottom: 2px solid #3f88c5;
}
}
}
// Favorites
& .block-wrapper.favorites {
margin-bottom: 15px;
& .items .item a {
text-decoration: none;
color: inherit;
}
& .items .item .category {
color: #bbb;
font-size: 0.85em;
}
}
// Categories
& .block-wrapper.categories {
min-height: 0;
display: flex;
flex: 1;
flex-direction: column;
& .items {
overflow: auto;
& .item {
margin-right: 5px;
}
}
}
// Controls
.controls {
margin: 10px 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
// User Card
& .user-card-wrapper {
position: relative;
height: fit-content;
width: 100%;
color: #333;
background-color: #fff;
& .user-card {
border-right: 1px solid #dadce0;
padding: 7px 12px;
display: flex;
gap: 10px;
align-items: center;
& img {
border-radius: 50%;
}
}
& .disconnect-btn {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
color: #fff;
background-color: red;
border: 1px solid red;
display: none;
}
&:hover .disconnect-btn {
display: block;
border: 1px solid darkred;
box-shadow: red 0 0 3px 1px;
}
}
}