frontdev/no-copy-admin-panel-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add status filter for content table

Browse Source
This commit is contained in:
smanylov
2026-06-02 17:45:07 +07:00
parent c74ef84d37
commit 03766057eb
7 changed files with 219 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/styles/global-styles.scss
+108 -26
View File
@@ -771,39 +771,121 @@
@media (max-width: 768px) {
width: auto;
}
}
.table-filtres-item {
display: flex;
flex-direction: column;
width: 12.5rem;
.table-filtres-item {
display: flex;
flex-direction: column;
width: 12.5rem;
}
.table-filtres-label {
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 0.25rem;
}
.table-filtres-text-filter {
background-color: #fff;
border: 2px solid v.$border-color-1;
border-radius: 12px;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
line-height: 1.25;
transition: background-color .2s ease-in-out;
display: flex;
box-shadow: 0 1px 2px #0000000d;
&:focus {
outline-offset: 2px;
outline: 2px solid v.$black;
box-shadow: 0 0 0 2px #6365f187;
}
}
.table-filtres-label {
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 0.25rem;
}
.status-filters {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
.table-filtres-text-filter {
background-color: #fff;
border: 2px solid v.$border-color-1;
border-radius: 12px;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 8px 16px;
.status-btn {
padding: 4px 12px;
border-radius: 16px;
border: 1px solid;
transition: all 0.2s ease;
cursor: pointer;
font-size: 14px;
font-weight: 500;
line-height: 1.25;
transition: background-color .2s ease-in-out;
display: flex;
box-shadow: 0 1px 2px #0000000d;
&:focus {
outline-offset: 2px;
outline: 2px solid v.$black;
box-shadow: 0 0 0 2px #6365f187;
&:hover {
transform: translateY(-1px);
}
&:active {
transform: translateY(0);
}
// BLOCK статус
&--block {
background-color: white;
color: #dc2626;
border-color: #fca5a5;
&:hover {
background-color: #fef2f2;
border-color: #f87171;
}
&.active {
background-color: #dc2626;
color: white;
border-color: #b91c1c;
box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}
}
// ACTIVE статус
&--active {
background-color: white;
color: #16a34a;
border-color: #86efac;
&:hover {
background-color: #f0fdf4;
border-color: #4ade80;
}
&.active {
background-color: #16a34a;
color: white;
border-color: #15803d;
box-shadow: 0 2px 4px rgba(22, 163, 74, 0.2);
}
}
// MODERATION статус
&--moderation {
background-color: white;
color: #ca8a04;
border-color: #fde047;
&:hover {
background-color: #fefce8;
border-color: #facc15;
}
&.active {
background-color: #ca8a04;
color: white;
border-color: #a16207;
box-shadow: 0 2px 4px rgba(202, 138, 4, 0.2);
}
}
}
}