Quiz_dashboard/src/Styles/Pages/InfoCard.scss
Moaz Dawalibi e470e902e5 fixes
2024-09-15 14:21:11 +03:00

136 lines
2.4 KiB
SCSS

.single_student {
display: flex;
.single_student_body {
display: flex;
width: 100%;
.student_info {
width: 32%;
}
.student_table {
width: 68%;
}
}
}
.info_card,
.address_card,
.attachments_card {
width: 24vw;
box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.1);
border-radius: 10px;
padding: 20px 15px;
p {
color: #6A7287;
}
.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;
}
}
}
.info_card_body {
display: flex;
flex-direction: column;
gap: 30px;
span {
display: flex;
justify-content: space-between;
h4 {
color: #202C4B;
font-size: 20px;
}
}
.info_card_button{
background: var(--primary);
color: var(--white);
padding: 25px 0px;
border-radius: 9px;
}
}
}
.address_card {
margin-block: 30px;
.address_card_body {
display: flex;
flex-direction: column;
align-items: center;
div{
margin-block: 20px;
gap: 15px;
display: flex !important;
}
svg {
@include Flex;
border-radius: 5px;
background: #F2F4F8;
width: 40px;
height: 40px;
padding: 7px;
}
}
}
.tab_icon{
font-size: 30px ;
}
@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;
.address_card {
width: 50%;
margin-block: 0 !important;
max-height: 17vw;
}
.info_card {
width: 50%;
}
}
.student_table {
width: 100%;
}
}
}
}