Quiz_dashboard/src/Styles/Pages/StudentInfoCard.scss
2024-09-14 14:39:13 +03:00

102 lines
2.2 KiB
SCSS

.single_student{
display: flex;
.single_student_body{
display: flex;
width: 100%;
.student_info{
width: 32%;
}
.student_table{
width: 68%;
}
}
}
.student_info_card{
width: 24vw;
box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.1);
border-radius: 10px;
padding: 20px 15px ;
.student_info_card_header{
display: flex;
gap: 10px;
img{
width: 24%;
}
.student_name_and_sub{
display: flex; flex-direction: column;justify-content: center;
span{
color: greenyellow;
}
h2{
font-size: 22px;
}
}
}
.student_info_card_body{
display: flex; flex-direction: column;
gap: 30px;
span{
display: flex;justify-content: space-between;
h4{
color: #202C4B;
font-size: 20px;
}
p{
color: #6A7287;
}
}
}
}
.student_address_card{
width: 24vw;
box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.1);
border-radius: 10px;
padding: 20px 15px ;
margin-top: 30px;
.student_address_card_body{
display: flex;align-items: center;
gap: 15px;
svg{
@include Flex;
border-radius: 5px;
background: #F2F4F8;
width: 40px;height: 40px;
padding: 7px;
}
p{
color: #6A7287;
}
}
}
@media screen and (max-width:1250px) {
.single_student{
display: flex;
.single_student_body{
display: flex;flex-direction: column !important;
width: 100%;
.student_info{
display: flex;
width: 100%;
gap: 20px;
.student_address_card{
width: 50%;
margin-top: 0 !important;
max-height: 17vw ;
}
.student_info_card{
width: 50%;
}
}
.student_table{
width: 100%;
}
}
}
}