devstackr / kanban-angular-layout Goto Github PK

Hi I'm following this project to learn angular and also watched video. You are awesome!

I have a question here - while following your youtube video, I put .task { .. } inside .task-container { ... } style block like below -

.task-container {
            flex-grow: 1;
            overflow-y: auto;
            .task {
                display: flex;
                padding: 15px 12px;
                background: white;
                border-bottom: solid 1px #ddd;
                border-radius: 4px;
                margin-bottom: 10px;
                box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.05), 0 3px 14px 2px rgba(0, 0, 0, 0.05);
            }
        }

So when I used to drag items, it used to loose it's styling.

But when I separated them, I mean, I moved .task { ... } style block out of .task-container { ... } block, it works great.

I was curious to know why that is. This may be not related to angular but to SCSS/CSS. I'm new to all this, I would appreciate your help. Thanks.