profile page updated

MOE_DEV_NEW_TEMPORARY_DESIGN
Sultan Khan 3 years ago
parent a78efed0d1
commit c4d199c62b

@ -170,18 +170,19 @@
<ion-card *ngIf="basicDetailsSegment" [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' "> <ion-card *ngIf="basicDetailsSegment" [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' ">
<ion-card-content *ngIf="!editBasic && employeeBasicDetails"> <ion-card-content *ngIf="!editBasic && employeeBasicDetails">
<ion-grid> <ion-grid>
<ion-row [style]="direction == 'ltr' ? 'width: 113%;' : 'width:95%'"> <ion-row >
<ion-col size="10"> <ion-col size="10">
<ion-label> <ion-label>
<h1 [ngClass]="direction === 'ltr'? 'header-label-text-form': 'header-label-text-form-ar' ">{{ts.trPK('general','basic-details')}}</h1> <h1 [ngClass]="direction === 'ltr'? 'header-label-text-form': 'header-label-text-form-ar' ">{{ts.trPK('general','basic-details')}}</h1>
</ion-label> </ion-label>
</ion-col> </ion-col>
<!-- -->
<ion-col size="2" *ngIf="basicDetailsSubMenu && basicDetailsSubMenu.UPDATE_BUTTON === 'Y'"> <ion-col size="2" *ngIf="basicDetailsSubMenu && basicDetailsSubMenu.UPDATE_BUTTON === 'Y'" >
<img style="width: 18px;height: 18px;" src="../assets/imgs/profile-icons/editing@2x.png" <img class="icon-img" src="../assets/imgs/profile-icons/editing@2x.png"
(click)="allowEdit('basic')"> (click)="allowEdit('basic')">
</ion-col> </ion-col>
<ion-col size="2" *ngIf="basicDetailsSubMenu && basicDetailsSubMenu.ADD_BUTTON === 'Y'"> <!-- -->
<ion-col size="2" *ngIf="basicDetailsSubMenu && basicDetailsSubMenu.ADD_BUTTON === 'Y'">
<ion-icon class="add-icon-styling" name="add"></ion-icon> <ion-icon class="add-icon-styling" name="add"></ion-icon>
</ion-col> </ion-col>
</ion-row> </ion-row>
@ -213,16 +214,17 @@
<ion-card *ngIf="contactSegment" [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' "> <ion-card *ngIf="contactSegment" [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' ">
<ion-card-content *ngIf="!editAddress && employeeAdress"> <ion-card-content *ngIf="!editAddress && employeeAdress">
<ion-grid> <ion-grid>
<ion-row style="width: 113%;"> <ion-row>
<ion-col size="10"> <ion-col size="10">
<ion-label> <ion-label>
<h1 [ngClass]="direction === 'ltr'? 'header-label-text-form': 'header-label-text-form-ar' ">{{ts.trPK('userProfile','phone-no')}}</h1> <h1 [ngClass]="direction === 'ltr'? 'header-label-text-form': 'header-label-text-form-ar' ">{{ts.trPK('userProfile','phone-no')}}</h1>
</ion-label> </ion-label>
</ion-col> </ion-col>
<!-- -->
<ion-col size="2" *ngIf="phoneSubMenu && phoneSubMenu.UPDATE_BUTTON === 'Y'" (click)="allowEdit('contact')"> <ion-col size="2" *ngIf="phoneSubMenu && phoneSubMenu.UPDATE_BUTTON === 'Y'" (click)="allowEdit('contact')">
<img style="width: 18px; height: 18px;" src="../assets/imgs/profile-icons/editing@2x.png"> <img class="icon-img" src="../assets/imgs/profile-icons/editing@2x.png">
</ion-col> </ion-col>
<!-- -->
<ion-col size="2" *ngIf="phoneSubMenu && phoneSubMenu.ADD_BUTTON === 'Y'" (click)="allowEdit('contact')"> <ion-col size="2" *ngIf="phoneSubMenu && phoneSubMenu.ADD_BUTTON === 'Y'" (click)="allowEdit('contact')">
<ion-icon class="add-icon-styling" name="add"></ion-icon> <ion-icon class="add-icon-styling" name="add"></ion-icon>
</ion-col> </ion-col>
@ -249,16 +251,17 @@
<ion-card *ngIf="addressSegment" [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' "> <ion-card *ngIf="addressSegment" [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' ">
<ion-card-content *ngIf="!editAddress && employeeAdress"> <ion-card-content *ngIf="!editAddress && employeeAdress">
<ion-grid> <ion-grid>
<ion-row style="width: 113%;"> <ion-row>
<ion-col size="10"> <ion-col size="10">
<ion-label> <ion-label>
<h1 [ngClass]="direction === 'ltr'? 'header-label-text-form': 'header-label-text-form-ar' ">{{ts.trPK('general','main-address')}}</h1> <h1 [ngClass]="direction === 'ltr'? 'header-label-text-form': 'header-label-text-form-ar' ">{{ts.trPK('general','main-address')}}</h1>
</ion-label> </ion-label>
</ion-col> </ion-col>
<!-- -->
<ion-col size="2" *ngIf="addressSubMenu && addressSubMenu.UPDATE_BUTTON === 'Y'" (click)="allowEdit('address')"> <ion-col size="2" *ngIf="addressSubMenu && addressSubMenu.UPDATE_BUTTON === 'Y'" (click)="allowEdit('address')">
<img style="width: 18px; height: 18px;" src="../assets/imgs/profile-icons/editing@2x.png"> <img class="icon-img" src="../assets/imgs/profile-icons/editing@2x.png">
</ion-col> </ion-col>
<!-- -->
<ion-col size="2" *ngIf="addressSubMenu && addressSubMenu.ADD_BUTTON === 'Y'" (click)="allowEdit('address')"> <ion-col size="2" *ngIf="addressSubMenu && addressSubMenu.ADD_BUTTON === 'Y'" (click)="allowEdit('address')">
<ion-icon class="add-icon-styling" name="add"></ion-icon> <ion-icon class="add-icon-styling" name="add"></ion-icon>
</ion-col> </ion-col>

@ -17,9 +17,11 @@
.header-toolbar-new { .header-toolbar-new {
--background: #024d71; --background: #024d71;
} }
.colorBG { .colorBG {
--background: #f0efef; --background: #f0efef;
} }
.header-div { .header-div {
text-transform: capitalize; text-transform: capitalize;
background: #024d71; background: #024d71;
@ -84,6 +86,7 @@ ion-thumbnail.menu-thumb {
// margin-left: 30px; // margin-left: 30px;
// margin-right: 30px; // margin-right: 30px;
} }
.gridService-ar { .gridService-ar {
// margin-top: 87px; // margin-top: 87px;
// border-radius: 10px; // border-radius: 10px;
@ -101,6 +104,7 @@ ion-thumbnail.menu-thumb {
// padding-top: 19px; // padding-top: 19px;
// padding-bottom: 26px; // padding-bottom: 26px;
} }
.columns-ar { .columns-ar {
// margin: 10px; // margin: 10px;
// background: #0B4775; // background: #0B4775;
@ -119,10 +123,12 @@ ion-thumbnail.menu-thumb {
// font-weight: bold; // font-weight: bold;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
} }
.services { .services {
font-size: 12px; font-size: 12px;
color: white; color: white;
} }
.service-ar { .service-ar {
font-size: 20px; font-size: 20px;
color: white; color: white;
@ -130,6 +136,7 @@ ion-thumbnail.menu-thumb {
font-weight: bold; font-weight: bold;
margin-right: 10px; margin-right: 10px;
} }
.services-ar { .services-ar {
font-size: 20px; font-size: 20px;
color: white; color: white;
@ -144,19 +151,23 @@ ion-thumbnail.menu-thumb {
border: #bebbbb !important; border: #bebbbb !important;
padding: 2px; padding: 2px;
} }
.p { .p {
color: black !important; color: black !important;
font-size: medium; font-size: medium;
text-align: center; text-align: center;
border-bottom: rgb(190, 187, 187) solid 1px; border-bottom: rgb(190, 187, 187) solid 1px;
} }
.itemline { .itemline {
border-bottom: rgb(190, 187, 187) solid 1px; border-bottom: rgb(190, 187, 187) solid 1px;
} }
.itemlins { .itemlins {
border-bottom: rgb(190, 187, 187) solid 1px; border-bottom: rgb(190, 187, 187) solid 1px;
margin-bottom: 209px; margin-bottom: 209px;
} }
.empName { .empName {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -166,6 +177,7 @@ ion-thumbnail.menu-thumb {
font-size: 16px; font-size: 16px;
margin-top: 38px; margin-top: 38px;
} }
.empJob { .empJob {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -174,10 +186,12 @@ ion-thumbnail.menu-thumb {
font-size: 16px; font-size: 16px;
margin-top: 4px; margin-top: 4px;
} }
.arrow { .arrow {
width: 20px; width: 20px;
height: 22px !important; height: 22px !important;
} }
.arrow-ar { .arrow-ar {
float: left; float: left;
font-size: 25px; font-size: 25px;
@ -198,6 +212,7 @@ ion-thumbnail.menu-thumb {
width: 85%; width: 85%;
margin: -12px 0px 0px 25px; margin: -12px 0px 0px 25px;
} }
.service-row-ar { .service-row-ar {
width: 104%; width: 104%;
margin: -12px 0px 0px 0px; margin: -12px 0px 0px 0px;
@ -206,6 +221,7 @@ ion-thumbnail.menu-thumb {
ion-content { ion-content {
--ion-background-color: whitesmoke; --ion-background-color: whitesmoke;
} }
ion-title { ion-title {
color: white; color: white;
position: absolute; position: absolute;
@ -218,6 +234,7 @@ ion-title {
height: 100%; height: 100%;
font-family: WorkSans-Regular; font-family: WorkSans-Regular;
} }
.contentBg { .contentBg {
padding: 0px 20px; padding: 0px 20px;
} }
@ -236,6 +253,7 @@ ion-title {
.user-info { .user-info {
text-align: center; text-align: center;
margin-bottom: 15px; margin-bottom: 15px;
.user-image-container { .user-image-container {
position: relative; position: relative;
width: 100%; width: 100%;
@ -245,6 +263,7 @@ ion-title {
margin: 0 auto; margin: 0 auto;
align-items: center; align-items: center;
} }
// position: relative; // position: relative;
// width: 80px; // width: 80px;
// height: 80px; // height: 80px;
@ -278,6 +297,7 @@ ion-title {
margin-top: -125px; margin-top: -125px;
} }
} }
@media screen and (min-width: 768px) and (max-width: 1024px) { @media screen and (min-width: 768px) and (max-width: 1024px) {
.user-image { .user-image {
// position: relative; // position: relative;
@ -307,6 +327,7 @@ ion-title {
margin-top: -125px; margin-top: -125px;
} }
} }
@media screen and (min-width: 768px) and (max-width: 1024px) { @media screen and (min-width: 768px) and (max-width: 1024px) {
.user-image-ar { .user-image-ar {
// position: relative; // position: relative;
@ -322,7 +343,9 @@ ion-title {
border-radius: 80px; border-radius: 80px;
margin-bottom: 321px; margin-bottom: 321px;
margin-right: 52px; margin-right: 52px;
}} }
}
h1 { h1 {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -330,6 +353,7 @@ h1 {
font-size: 18px; font-size: 18px;
margin-bottom: 4px; margin-bottom: 4px;
} }
span { span {
font-size: 11px; font-size: 11px;
display: block; display: block;
@ -337,11 +361,14 @@ span {
} }
$actionBtnSize: 36px; $actionBtnSize: 36px;
.user-actions { .user-actions {
text-align: center; text-align: center;
.action-button { .action-button {
font-size: 11px; font-size: 11px;
font-weight: bold; font-weight: bold;
// white-space: nowrap; // white-space: nowrap;
// color: #888; // color: #888;
.action-button-icon { .action-button-icon {
@ -353,6 +380,7 @@ $actionBtnSize: 36px;
background-color: #024d71; background-color: #024d71;
line-height: $actionBtnSize; line-height: $actionBtnSize;
margin-bottom: 3px; margin-bottom: 3px;
img { img {
margin: 0 auto; margin: 0 auto;
vertical-align: middle; vertical-align: middle;
@ -360,6 +388,7 @@ $actionBtnSize: 36px;
} }
} }
} }
.employee-information-indetail { .employee-information-indetail {
background: white; background: white;
margin-top: 15px; margin-top: 15px;
@ -367,10 +396,12 @@ $actionBtnSize: 36px;
margin-bottom: 15px; margin-bottom: 15px;
border-radius: 20px; border-radius: 20px;
border: 1px solid #ccc; border: 1px solid #ccc;
ion-col { ion-col {
padding: 15px; padding: 15px;
// border-bottom: 1px solid #ccc; // border-bottom: 1px solid #ccc;
} }
h2 { h2 {
font-size: 13px; font-size: 13px;
// font-family: WorkSans-Bold; // font-family: WorkSans-Bold;
@ -378,6 +409,7 @@ $actionBtnSize: 36px;
font-weight: bold; font-weight: bold;
color: rgb(128, 124, 124); color: rgb(128, 124, 124);
} }
p { p {
font-size: 13px; font-size: 13px;
margin: 0; margin: 0;
@ -408,6 +440,7 @@ $actionBtnSize: 36px;
background-color: #024d71; background-color: #024d71;
} }
} }
@media screen and (min-width: 768px) and (max-width: 1024px) { @media screen and (min-width: 768px) and (max-width: 1024px) {
.active-Segment { .active-Segment {
width: 11%; width: 11%;
@ -438,6 +471,7 @@ $actionBtnSize: 36px;
background: #414040 !important; background: #414040 !important;
} }
} }
@media screen and (min-width: 768px) and (max-width: 1024px) { @media screen and (min-width: 768px) and (max-width: 1024px) {
.normal-Segment { .normal-Segment {
width: 11%; width: 11%;
@ -465,6 +499,7 @@ $actionBtnSize: 36px;
height: 18px; height: 18px;
} }
} }
@media screen and (min-width: 768px) and (max-width: 1024px) { @media screen and (min-width: 768px) and (max-width: 1024px) {
.imgSize { .imgSize {
position: absolute; position: absolute;
@ -480,6 +515,7 @@ $actionBtnSize: 36px;
padding: 15px; padding: 15px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }
.img { .img {
width: 100px; width: 100px;
height: 100px; height: 100px;
@ -491,6 +527,7 @@ $actionBtnSize: 36px;
background: transparent; background: transparent;
margin-left: 119%; margin-left: 119%;
} }
.img-ar { .img-ar {
width: 100px; width: 100px;
height: 100px; height: 100px;
@ -502,6 +539,7 @@ $actionBtnSize: 36px;
background: transparent; background: transparent;
margin-right: 119%; margin-right: 119%;
} }
///////////////////////// Team Members css //////////////////////@extend ///////////////////////// Team Members css //////////////////////@extend
.filters-row { .filters-row {
@ -510,10 +548,12 @@ $actionBtnSize: 36px;
.search-dropdown { .search-dropdown {
background: #024d71; background: #024d71;
ion-select { ion-select {
.select-text { .select-text {
margin-left: -10px; margin-left: -10px;
} }
.select-icon { .select-icon {
.select-icon-inner { .select-icon-inner {
opacity: 1; opacity: 1;
@ -526,6 +566,7 @@ $actionBtnSize: 36px;
.input-container { .input-container {
background: white; background: white;
ion-input { ion-input {
border-bottom-color: transparent; border-bottom-color: transparent;
} }
@ -533,17 +574,20 @@ $actionBtnSize: 36px;
.search-container { .search-container {
margin-top: 15px; margin-top: 15px;
ion-col { ion-col {
background: white; background: white;
border-radius: 12px; border-radius: 12px;
padding-right: 10px; padding-right: 10px;
flex: none; flex: none;
ion-icon { ion-icon {
margin-right: 3px; margin-right: 3px;
font-size: 14px; font-size: 14px;
margin-left: 3px; margin-left: 3px;
vertical-align: middle; vertical-align: middle;
} }
span { span {
font-size: 12px; font-size: 12px;
vertical-align: middle; vertical-align: middle;
@ -567,11 +611,13 @@ $actionBtnSize: 36px;
margin-top: -1px; margin-top: -1px;
margin-left: 43px; margin-left: 43px;
} }
.activeArrow { .activeArrow {
height: 20px; height: 20px;
width: 20px; width: 20px;
color: #024d71; color: #024d71;
} }
.disabledArrow { .disabledArrow {
height: 20px; height: 20px;
width: 20px; width: 20px;
@ -584,6 +630,7 @@ $actionBtnSize: 36px;
color: #024d71; color: #024d71;
margin-right: 275px; margin-right: 275px;
} }
.disabledArrow-ar { .disabledArrow-ar {
height: 20px; height: 20px;
width: 20px; width: 20px;
@ -608,6 +655,7 @@ $actionBtnSize: 36px;
width: 90%; width: 90%;
left: 5%; left: 5%;
} }
.result-graph-ar { .result-graph-ar {
position: relative; position: relative;
background: white; background: white;
@ -658,6 +706,7 @@ $actionBtnSize: 36px;
right: 5%; right: 5%;
} }
} }
.result-graph-attendence { .result-graph-attendence {
position: relative; position: relative;
background: white; background: white;
@ -678,6 +727,7 @@ $actionBtnSize: 36px;
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 10px; margin-left: 10px;
} }
.request-heading-ar { .request-heading-ar {
text-align: right; text-align: right;
display: block; display: block;
@ -695,12 +745,14 @@ $actionBtnSize: 36px;
display: block; display: block;
text-align: center; text-align: center;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
h2 { h2 {
font-size: 38px; font-size: 38px;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
margin: 0 auto; margin: 0 auto;
line-height: 36px; line-height: 36px;
} }
span { span {
width: 125px; width: 125px;
display: block; display: block;
@ -709,6 +761,7 @@ $actionBtnSize: 36px;
font-family: workSans-Regular; font-family: workSans-Regular;
} }
} }
.today-graph { .today-graph {
// width: 100%; // width: 100%;
max-height: 4cm; max-height: 4cm;
@ -753,6 +806,7 @@ $actionBtnSize: 36px;
line-height: 11px !important; line-height: 11px !important;
display: block; display: block;
} }
h2 { h2 {
font-size: 25px; font-size: 25px;
font-weight: bold; font-weight: bold;
@ -790,6 +844,7 @@ $actionBtnSize: 36px;
margin: 0; margin: 0;
font-size: 14px; font-size: 14px;
} }
span { span {
font-size: 9px; font-size: 9px;
} }
@ -801,6 +856,7 @@ $actionBtnSize: 36px;
margin: 0; margin: 0;
font-size: 14px; font-size: 14px;
} }
span { span {
font-size: 11px; font-size: 11px;
margin-bottom: 3px; margin-bottom: 3px;
@ -836,6 +892,7 @@ $actionBtnSize: 36px;
background-color: #292f42; background-color: #292f42;
margin-top: 30px; margin-top: 30px;
} }
.span-one { .span-one {
// display: block; // display: block;
// font-size: 12px; // font-size: 12px;
@ -847,6 +904,7 @@ $actionBtnSize: 36px;
margin-top: -2px; margin-top: -2px;
font-weight: bold; font-weight: bold;
} }
.span-two { .span-two {
// display: block; // display: block;
// font-size: 22px; // font-size: 22px;
@ -870,6 +928,7 @@ $actionBtnSize: 36px;
margin-top: 28px; margin-top: 28px;
font-weight: bold; font-weight: bold;
} }
.spa-two { .spa-two {
// display: block; // display: block;
// font-size: 22px; // font-size: 22px;
@ -881,11 +940,13 @@ $actionBtnSize: 36px;
font-weight: bold; font-weight: bold;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
} }
.graph-container { .graph-container {
margin-left: -50px; margin-left: -50px;
position: relative; position: relative;
margin-right: 50px; margin-right: 50px;
} }
.label-container { .label-container {
position: absolute; position: absolute;
// width: 20%; // width: 20%;
@ -894,12 +955,14 @@ $actionBtnSize: 36px;
margin-top: -27px; margin-top: -27px;
left: 20px; left: 20px;
} }
.attendance-summary .attendance-information { .attendance-summary .attendance-information {
span { span {
height: 32px; height: 32px;
display: block; display: block;
line-height: 14px; line-height: 14px;
} }
h2 { h2 {
// text-align: right; // text-align: right;
// font-family: WorkSans-Bold; // font-family: WorkSans-Bold;
@ -915,6 +978,7 @@ $actionBtnSize: 36px;
border-radius: 20px; border-radius: 20px;
border: 1px solid #ccc; border: 1px solid #ccc;
padding-bottom: 25px; padding-bottom: 25px;
span { span {
text-align: left; text-align: left;
display: block; display: block;
@ -923,11 +987,13 @@ $actionBtnSize: 36px;
margin-left: 10px; margin-left: 10px;
} }
} }
.calendar-container-ar { .calendar-container-ar {
background: white; background: white;
margin-bottom: 100px; margin-bottom: 100px;
margin-top: 20px; margin-top: 20px;
border-radius: 20px; border-radius: 20px;
span { span {
text-align: right; text-align: right;
display: block; display: block;
@ -958,6 +1024,7 @@ $actionBtnSize: 36px;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
font-size: 16px; font-size: 16px;
} }
.stats { .stats {
color: #289db8; color: #289db8;
font-size: 9px; font-size: 9px;
@ -1013,66 +1080,78 @@ $actionBtnSize: 36px;
text-align: center; text-align: center;
width: 20px; width: 20px;
} }
@media screen and (min-width: 1px) and (max-width:766px){
.grid-card {
right: 5px;
position: relative;
display: block;
z-index: 5;
width: 103%;
}}
@media screen and (min-width: 1px) and (max-width:766px){
.grid-card-ar {
left: 5px;
position: relative;
display: block;
z-index: 5;
width: 103%;
}}
@media screen and (min-width: 768px) and (max-width:1050px){
.grid-card {
right: 5px;
position: relative;
display: block;
z-index: 5;
width: 101%;
}}
@media screen and (min-width: 768px) and (max-width:1050px){
.grid-card-ar {
left: 5px;
position: relative;
display: block;
z-index: 5;
width: 101%;
}}
@media screen and (min-width: 1px) and (max-width:766px){ @media screen and (min-width: 1px) and (max-width:766px) {
.changeImgBtn { .grid-card {
position: absolute; right: 5px;
background: #f0ecec; position: relative;
min-height: 25px; display: block;
width: 24px !important; z-index: 5;
height: 20px; width: 103%;
border-radius: 50%; }
bottom: 55px; }
right: 36%;
top: -15%; @media screen and (min-width: 1px) and (max-width:766px) {
z-index: 99; .grid-card-ar {
}} left: 5px;
@media screen and (min-width: 768px) and (max-width:1050px){ position: relative;
.changeImgBtn { display: block;
position: absolute; z-index: 5;
background: #f0ecec; width: 103%;
min-height: 25px; }
width: 24px !important; }
height: 20px;
border-radius: 50%; @media screen and (min-width: 768px) and (max-width:1050px) {
bottom: 55px; .grid-card {
right: 41%; right: 5px;
top: -10%; position: relative;
z-index: 99; display: block;
}} z-index: 5;
@media screen and (min-width: 1060px) and (max-width:1090px){ width: 101%;
}
}
@media screen and (min-width: 768px) and (max-width:1050px) {
.grid-card-ar {
left: 5px;
position: relative;
display: block;
z-index: 5;
width: 101%;
}
}
@media screen and (min-width: 1px) and (max-width:766px) {
.changeImgBtn {
position: absolute;
background: #f0ecec;
min-height: 25px;
width: 24px !important;
height: 20px;
border-radius: 50%;
bottom: 55px;
right: 36%;
top: -15%;
z-index: 99;
}
}
@media screen and (min-width: 768px) and (max-width:1050px) {
.changeImgBtn {
position: absolute;
background: #f0ecec;
min-height: 25px;
width: 24px !important;
height: 20px;
border-radius: 50%;
bottom: 55px;
right: 41%;
top: -10%;
z-index: 99;
}
}
@media screen and (min-width: 1060px) and (max-width:1090px) {
.changeImgBtn { .changeImgBtn {
position: absolute; position: absolute;
background: #f0ecec; background: #f0ecec;
@ -1084,9 +1163,10 @@ $actionBtnSize: 36px;
right: 41%; right: 41%;
top: -10%; top: -10%;
z-index: 99; z-index: 99;
}} }
}
@media screen and (min-width: 1px) and (max-width:766px){ @media screen and (min-width: 1px) and (max-width:766px) {
.changeImgBtn-ar { .changeImgBtn-ar {
position: absolute; position: absolute;
background: #f0ecec; background: #f0ecec;
@ -1098,8 +1178,10 @@ $actionBtnSize: 36px;
left: 36%; left: 36%;
top: -15%; top: -15%;
z-index: 99; z-index: 99;
}} }
@media screen and (min-width: 768px) and (max-width:1050px){ }
@media screen and (min-width: 768px) and (max-width:1050px) {
.changeImgBtn-ar { .changeImgBtn-ar {
position: absolute; position: absolute;
background: #f0ecec; background: #f0ecec;
@ -1111,20 +1193,23 @@ $actionBtnSize: 36px;
left: 41%; left: 41%;
top: -10%; top: -10%;
z-index: 99; z-index: 99;
}} }
@media screen and (min-width: 1060px) and (max-width:1090px){ }
.changeImgBtn-ar {
position: absolute; @media screen and (min-width: 1060px) and (max-width:1090px) {
background: #f0ecec; .changeImgBtn-ar {
min-height: 25px; position: absolute;
width: 24px !important; background: #f0ecec;
height: 20px; min-height: 25px;
border-radius: 50%; width: 24px !important;
bottom: 55px; height: 20px;
left: 46%; border-radius: 50%;
top: -10%; bottom: 55px;
z-index: 99; left: 46%;
}} top: -10%;
z-index: 99;
}
}
.menubutton { .menubutton {
background: #f0ecec; background: #f0ecec;
@ -1165,18 +1250,18 @@ $actionBtnSize: 36px;
border: none; border: none;
} }
.card-size-info-en{ .card-size-info-en {
// width: 88%; // width: 88%;
// left: 2%; // left: 2%;
// width: 89%; // width: 89%;
// left: 10px; // left: 10px;
width: 90%; width: 90%;
left: 5%; left: 5%;
padding-left: 0px; padding-left: 0px;
margin-left: 0px; margin-left: 0px;
} }
.card-size-info-ar{ .card-size-info-ar {
width: 90%; width: 90%;
right: 3%; right: 3%;
padding-right: 0px; padding-right: 0px;
@ -1203,12 +1288,18 @@ $actionBtnSize: 36px;
// color: #2B353E; // color: #2B353E;
// opacity: 1; // opacity: 1;
// } // }
.update{ .update {
--background: #20A169; background: white; width: 100%; --background: #20A169;
background: white;
width: 100%;
} }
.add{
--background: #00bcd4; background: white; width: 100%; .add {
--background: #00bcd4;
background: white;
width: 100%;
} }
.add-icon-styling { .add-icon-styling {
background-color: #191814; background-color: #191814;
width: 35px; width: 35px;
@ -1216,10 +1307,11 @@ $actionBtnSize: 36px;
color: white; color: white;
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
right: 30px; left: 20px;
right: 20px;
} }
.name{ .name {
text-align: center; text-align: center;
letter-spacing: -0.84px; letter-spacing: -0.84px;
color: #2B353E; color: #2B353E;
@ -1228,7 +1320,8 @@ $actionBtnSize: 36px;
line-height: 21px; line-height: 21px;
font-size: 21px; font-size: 21px;
} }
.email{
.email {
text-align: center; text-align: center;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-size: 13px; font-size: 13px;
@ -1239,19 +1332,19 @@ $actionBtnSize: 36px;
} }
.subTitle{ .subTitle {
text-align: center; text-align: center;
letter-spacing: -0.52px; letter-spacing: -0.52px;
color: #A2A2A2; color: #A2A2A2;
opacity: 1; opacity: 1;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-size: 13px; font-size: 13px;
line-height: 0px; line-height: 0px;
margin-bottom: 7px; margin-bottom: 7px;
} }
.boldText{ .boldText {
text-align: center; text-align: center;
letter-spacing: -0.64px; letter-spacing: -0.64px;
color: #2B353E; color: #2B353E;
@ -1261,15 +1354,15 @@ $actionBtnSize: 36px;
line-height: 19px; line-height: 19px;
} }
.btnTitle{ .btnTitle {
text-align: center; text-align: center;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 10px; line-height: 10px;
font-size: 11px; font-size: 11px;
color: #4D4D4D; color: #4D4D4D;
} }
.Profileheader-label-text-form{ .Profileheader-label-text-form {
text-align: left; text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 30px; line-height: 30px;
@ -1281,8 +1374,8 @@ $actionBtnSize: 36px;
margin-bottom: 2px; margin-bottom: 2px;
} }
.header-label-text-form{ .header-label-text-form {
text-align: left; text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 30px; line-height: 30px;
font-size: 20px; font-size: 20px;
@ -1291,10 +1384,11 @@ $actionBtnSize: 36px;
opacity: 1; opacity: 1;
margin-top: -3px; margin-top: -3px;
margin-bottom: 2px; margin-bottom: 2px;
margin-left: -11px;} margin-left: -11px;
}
.type-label-text-form{ .type-label-text-form {
text-align: left; text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 20px; line-height: 20px;
@ -1304,7 +1398,7 @@ $actionBtnSize: 36px;
opacity: 1; opacity: 1;
} }
.result-label-text-form{ .result-label-text-form {
text-align: left; text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 20px; line-height: 20px;
@ -1315,7 +1409,7 @@ $actionBtnSize: 36px;
} }
.Profileheader-label-text-form-ar{ .Profileheader-label-text-form-ar {
text-align: right; text-align: right;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 30px; line-height: 30px;
@ -1327,8 +1421,8 @@ $actionBtnSize: 36px;
margin-bottom: 2px; margin-bottom: 2px;
} }
.header-label-text-form-ar{ .header-label-text-form-ar {
text-align: right; text-align: right;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 30px; line-height: 30px;
font-size: 20px; font-size: 20px;
@ -1337,10 +1431,11 @@ $actionBtnSize: 36px;
opacity: 1; opacity: 1;
margin-top: -3px; margin-top: -3px;
margin-bottom: 2px; margin-bottom: 2px;
margin-left: -11px;} margin-left: -11px;
}
.type-label-text-form-ar{ .type-label-text-form-ar {
text-align: right; text-align: right;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 20px; line-height: 20px;
@ -1350,7 +1445,7 @@ $actionBtnSize: 36px;
opacity: 1; opacity: 1;
} }
.result-label-text-form-ar{ .result-label-text-form-ar {
text-align: right; text-align: right;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 20px; line-height: 20px;
@ -1359,56 +1454,71 @@ $actionBtnSize: 36px;
color: #2B353E; color: #2B353E;
opacity: 1; opacity: 1;
} }
.create-edit{
.create-edit {
font-size: 20px; font-size: 20px;
} }
.profile-green{
background: #20A16A; .profile-green {
margin-right: 5px; background: #20A16A;
width: 80px; margin-right: 5px;
height: 8px; width: 80px;
height: 8px;
border-radius: 5px; border-radius: 5px;
} }
.profile-gray{ .profile-gray {
background: #D9D9D9; background: #D9D9D9;
margin-right: 5px; margin-right: 5px;
width: 80px; width: 80px;
height: 8px; height: 8px;
border-radius: 5px; border-radius: 5px;
} }
.family-member-button{
width: 115px; .family-member-button {
height: 45px; width: 115px;
background-color: #F5F5F5; height: 45px;
display: flex; background-color: #F5F5F5;
align-items: center; display: flex;
padding: 16px; align-items: center;
padding: 16px;
border-radius: 20px; border-radius: 20px;
box-shadow: 0px 0px 5px #00000029; box-shadow: 0px 0px 5px #00000029;
} }
.profile-note-en{
margin-left: 20px; .profile-note-en {
margin-top: 5px; margin-left: 20px;
margin-top: 5px;
font-size: 13px; font-size: 13px;
} }
.profile-note-ar{
margin-right: 20px; .profile-note-ar {
margin-top: 5px; margin-right: 20px;
margin-top: 5px;
font-size: 13px; font-size: 13px;
} }
.profile-compilation-en{ .profile-compilation-en {
margin-left: 20px; margin-left: 20px;
margin-top: 5px; margin-top: 5px;
font-size: 13px; font-size: 13px;
} }
.profile-compilation-ar{
margin-left: 20px; .profile-compilation-ar {
margin-top: 5px; margin-left: 20px;
margin-top: 5px;
font-size: 13px; font-size: 13px;
} }
.disabledButton{
opacity:.5; .disabledButton {
pointer-events: none; opacity: .5;
pointer-events: none;
} }
.icon-img {
width: 20px;
height: 20px;
position: relative;
left: 20px;
right: 20px;
}
Loading…
Cancel
Save