src/app/child-dev-project/attendance/add-day-attendance/roll-call/roll-call.component.scss
@use "variables/sizes";
@use "variables/colors";
@use "sass:color";
.group-select-option {
width: 100%;
cursor: pointer;
box-sizing: border-box;
border: 1px solid;
border-top: 0;
&:first-child {
border-top: 1px solid;
}
}
.roll-call-complete {
display: flex;
flex-direction: column;
place-content: center;
place-items: center;
height: 200px;
gap: sizes.$small;
background-color: color.adjust(colors.$success, $alpha: -0.5);
border-radius: 4px;
}
.progress-label {
display: flex;
place-content: center;
}
.attendance-progress-bar {
display: flex;
flex-direction: column;
margin-top: sizes.$small;
margin-bottom: sizes.$small;
}
.progress-nav {
margin-top: -4px;
justify-content: space-between;
align-items: center;
}
.tab-body {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
overflow-x: hidden;
}
.tab-body-active {
position: relative;
flex-grow: 1;
place-content: center;
z-index: 1;
}
.tab-wrapper {
display: flex;
position: relative;
overflow-x: hidden;
}