client-app/src/app/home/home.component.scss

114 lines
2.7 KiB
SCSS

.dashboard-container {
// padding: 24px;
// .quick-actions {
// display: flex;
// justify-content: end;
// button {
// margin-bottom: 16px;
// }
// }
.app-container {
display: flex;
gap: 16px;
box-sizing: border-box;
.chart-section {
flex: 0 0 30%;
}
.questions-section {
flex: 0 0 70%;
padding: 12px 16px;
margin-bottom: 46px;
margin-left: 1rem;
margin-top: 24px;
background: var(--mat-sys-surface);
border-radius: 4px;
.question-row {
margin-bottom: 1rem;
mat-radio-group {
display: flex;
gap: 8px;
.question {
color: var(--mat-sys-on-surface);
font-family: var(--mat-sys-body-medium-font);
line-height: var(--mat-sys-body-medium-line-height);
font-size: var(--mat-sys-body-medium-size);
letter-spacing: var(--mat-sys-body-medium-tracking);
font-weight: var(--mat-sys-medium-font-weight);
}
mat-radio-button {
margin-top: -5px;
}
}
}
}
}
.table-actions {
display: flex;
justify-content: end;
button {
margin-bottom: 16px;
}
}
.table-container {
position: relative;
overflow: auto;
border-radius: 8px;
.loading-shade {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.7);
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
mat-table {
width: 100%;
mat-icon {
cursor: pointer;
transition: all 0.2s ease;
&:hover {
transform: scale(1.1);
}
}
}
.no-data-message {
text-align: center;
padding: 0.9rem;
color: rgba(0, 0, 0, 0.54);
mat-icon {
font-size: 1rem;
width: 1rem;
height: 1rem;
margin-bottom: -3px;
}
}
mat-paginator {
border-top: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 0 0 8px 8px;
padding-top: 4px;
}
}
}