I'm currently in the process of rewriting a page using Angular. I've successfully copied over all the styles and layout from the original page, but for some reason the colors aren't being applied correctly. After comparing the original and new pages, I can't seem to pinpoint what's causing the discrepancy. I suspect it might be due to CSS specificity or the way Angular handles style encapsulation. Could you please lend me a hand?
Below are the styles that I've copied exactly as they were:
.table-main {
display: flex;
flex-direction: column;
margin-right: -1px;
overflow-x: scroll;
overflow-y: hidden;
.main-head {
display: flex;
.head-inner {
display: flex;
flex-direction: column;
}
.table-col {
background-color: white;
cursor: pointer;
}
}
.table-col {
height: 45px;
padding: 0 5px;
border-bottom: 1px solid gainsboro;
&.locked {
background-color: darkkhaki;
}
}