52 lines
1.2 KiB
SCSS
52 lines
1.2 KiB
SCSS
:host {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.categories-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.category {
|
|
border: 1px solid blue;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.category-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: .5em 1em;
|
|
|
|
mat-icon {
|
|
transition: transform .2s ease-in-out;
|
|
}
|
|
}
|
|
|
|
&.openned {
|
|
.category-header {
|
|
mat-icon {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
.sub-category-container {
|
|
max-height: none;
|
|
}
|
|
}
|
|
|
|
.sub-category-container {
|
|
border: 1px solid red;
|
|
overflow: hidden;
|
|
max-height: 0;
|
|
transition: max-height .2s ease-in-out;
|
|
|
|
.sub-category {
|
|
padding: .5em 1em .5em 2em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |