Update: lab1

Добавлена подсветка карточки при наведении, а также появились иконки по правому краю
2025-10-16 13:38:31 +03:00
parent ef32a25500
commit d62bf03304
2 changed files with 72 additions and 1 deletions
--- a/lab/1/index.css
+++ b/lab/1/index.css
@@ -142,5 +142,57 @@ body {

            }
        }
+        & > .tasks-container {
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+
+            & > .task {
+                display: flex;
+                overflow: hidden;
+                box-sizing: border-box;
+                padding: 12px 16px;
+                border-radius: 8px;
+                background-color: var(--tm-app-cp-blue-30);
+                font-size: clamp(14px, 1.1vw, 24px);
+                list-style: none;
+                border: 2px solid transparent;
+
+                &:hover{
+                    background-color: var(--tm-app-cp-blue-50);
+                    border-color: var(--tm-app-cp-blue-90);
+                }
+
+                & > .task__text {
+                    flex: 1;
+                    text-align: left;
+                    transition: padding-right 0.3s ease;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+                .task__icons {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    gap: 4px;
+
+                    & > .icon-row {
+                        display: flex;
+                        gap: 6px;
+                    }
+
+                    .icon {
+                        width: clamp(16px, 1.3vw, 22px);
+                        height: auto;
+                        opacity: 60%;
+
+                        &:hover{
+                            opacity: 100%;
+                        }
+                    }
+                }
+            }
+        }
    }
 }