65 lines
872 B
SCSS
65 lines
872 B
SCSS
.expense-container {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
mat-card {
|
|
max-width: 800px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
mat-card-header {
|
|
padding-bottom: 1rem;
|
|
|
|
.expense-header {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
.expense-content {
|
|
display: grid;
|
|
}
|
|
|
|
mat-form-field {
|
|
width: 100%;
|
|
}
|
|
|
|
.view-tags {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
|
|
@media (min-width: 550px) {
|
|
.expense-content {
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.view-note {
|
|
grid-column: 1 / span 2;
|
|
}
|
|
|
|
.view-tags {
|
|
grid-column: 1 / span 2;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 800px) {
|
|
.expense-content {
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
}
|
|
|
|
.view-note {
|
|
grid-column: 2 / span 2;
|
|
}
|
|
|
|
.view-tags {
|
|
grid-column: 1 / span 3;
|
|
}
|
|
}
|