SCRA colors changes

SRCA_DEV
Sultan Khan 4 years ago
parent 723cdde798
commit c6660fb925

@ -1,285 +1,298 @@
.imgSize{ .imgSize {
position: absolute; position: absolute;
right: 15px; right: 15px;
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto; margin: auto;
height:20px; height: 20px;
width:20px; width: 20px;
} }
.rowAH ion-col { .rowAH ion-col {
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
font-size: 13px; font-size: 13px;
} }
.titleH { .titleH {
font-size: 13px; font-size: 13px;
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
border-top-right-radius: 5px; border-top-right-radius: 5px;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-bottom: 0px; border-bottom: 0px;
} }
.gridAH { .gridAH {
text-align: center; text-align: center;
padding: 5px 5px !important; padding: 5px 5px !important;
border-radius: 5px; border-radius: 5px;
} }
ion-card-content.confirm-details{
padding: 0; ion-card-content.confirm-details {
padding: 0;
} }
.confirm-details label{
font-size: 13px; .confirm-details label {
font-size: 13px;
} }
/****************** NEW Design ***************************************/ /****************** NEW Design ***************************************/
.footer-button { .footer-button {
border-radius: 2px; border-radius: 2px;
padding: 0 1.1em; padding: 0 1.1em;
min-height: 45px; min-height: 45px;
min-width: 200px; min-width: 200px;
} }
.Header {
font-weight: bold;
color: #c6903e !important;
font-size: 10px;
}
.tbData {
font-size: 10px;
}
.btnBack {
background: transparent;
float: right;
}
.attachmentDiv {
background: #ffffff;
height: auto;
text-align: center;
padding-top: 1px;
margin: 10px;
border-radius: 15px;
border: 1px solid grey;
}
.noDataDiv {
background: #ffffff;
height: 11%;
text-align: center;
padding-top: 1px;
border-radius: 10px;
margin: 10px;
border-radius: 5px;
}
.submitNote {
background: #ffffff;
height: 80px;
padding-top: 1px;
margin: 10px;
border-radius: 15px;
border: 1px solid grey;
}
.approvalList {
--background: #f0efef;
height: auto;
text-align: center;
padding-top: 1px;
border-radius: 10px;
margin: 10px;
border-radius: 5px;
}
/************************New Design**********************************/
.notification-list {
background: none;
background: none;
border-radius: 32px;
ion-item {
// margin-top: 5px;
// margin-bottom: 5px;
background-color: transparent;
.item-date {
width: 100%;
font-size: 16px;
font-weight: bold;
text-align: start;
padding: 0;
margin: 0;
position: absolute;
left: 0;
top: 12%;
}
ion-label,
[item-end] {
white-space: normal;
font-size: 14px;
padding-top: 15%;
// :root[dir="ltr"]{
// margin-left: 10px;
// }
// :root[dir="rtl"]{
// margin-right: 10px;
// }
.Header {
font-weight: bold;
color: #1a586d !important;
font-size: 10px;
}
.tbData {
font-size: 10px;
}
.btnBack {
background: transparent;
float: right;
}
.attachmentDiv{
background: #ffffff;
height: auto;
text-align: center;
padding-top: 1px;
margin: 10px;
border-radius: 15px;
border: 1px solid grey;
}
.noDataDiv{
background: #ffffff;
height: 11%;
text-align: center;
padding-top: 1px;
border-radius: 10px;
margin: 10px;
border-radius: 5px;
}
.submitNote{
background: #ffffff;
height: 80px;
padding-top: 1px;
margin: 10px;
border-radius: 15px;
border: 1px solid grey;
}
.approvalList{
--background: #f0efef;
height: auto;
text-align: center;
padding-top: 1px;
border-radius: 10px;
margin: 10px;
border-radius: 5px;
}
/************************New Design**********************************/
.notification-list{
background: none;
background: none;
border-radius: 32px;
ion-item{
// margin-top: 5px;
// margin-bottom: 5px;
background-color: transparent;
.item-date{
width: 100%;
font-size: 16px;
font-weight: bold;
text-align: start;
padding: 0;
margin: 0;
position: absolute;
left: 0;
top: 12%;
}
ion-label , [item-end]{
white-space: normal;
font-size: 14px;
padding-top: 15%;
// :root[dir="ltr"]{
// margin-left: 10px;
// }
// :root[dir="rtl"]{
// margin-right: 10px;
// }
}
} }
}
.timeline {
position: relative;
margin: 15px 0 0 0;
// border-bottom: solid 1px var(--cusgray);
}
.timeline:before {
content: '';
position: inherit !important;
top: 0;
bottom: 0;
width: 4px;
// background: #e4e4e4;
z-index: 1;
left: 35px;
/* margin-left: -10px; */
/* z-index: 1; */
}
.timeline .timeline-thumb {
border-radius: 500px;
width: 70px !important;
z-index: 2;
position: absolute;
left: 0px;
// :root[dir="ltr"]{
// left: 37px;
// }
// :root[dir="rtl"]{
// right: 37px;
// }
float: right;
top: 9px;
}
.timeline .timeline-thumb.timeline-icon {
height: 70px;
// text-align: center;
// color: white;
// border: 5px solid #CBD0D3;
// transform: scale(0.2);
}
.timeline .timeline-item {
// width: 40px;
}
.timeline .timeline-stats {
position: relative;
font-size: 12px;
color: var(--darkgray);
}
.empImge{
border-radius: 50%;
width:60px;
height: 60px;
border: #dedede solid 1px;
}
.empImgeRep {
border-radius: 50% !important;
width: 80px;
height: 80px;
border: #dedede solid 1px;
}
.line{
padding-bottom:87px;
}
.attachLable{
position: absolute;
top: 0px;
z-index: 0;
background: #30b8c6;
color: #fff;
border-radius: 50%;
border: 0px;
width: 24px;
height: 24px;
text-align: center;
font-size: 5px;
}
.removeLable{
top: 0px;
z-index: 0;
background: #d8252d;
color: #fff;
border-radius: 50%;
border: 0px;
width: 20px;
height: 20px;
text-align: center;
font-size: 5px;
}
.note-modal {
// width: 90%;
// height: 50%;
// top: 20%;
// left: 5%;
// right: 5%;
// bottom: 5%;
background: rgba(0, 0, 0, 0.5) !important;
padding: 30% 10% !important;
--height: 12cm !important;
// --width: 80% !important;
--border-radius:20px;
}
.header-toolbar-new{
--background: #269DB8;
}
.confirmEitOkButton{
white-space: normal !important;
text-transform: capitalize !important;
min-height: 45px !important;
min-width: 5px !important;
margin: 8px !important;
--background: #269DB8;
width: 80% !important;
color: white!important;
border-radius: 16px !important;
}
.approvalTitle-ar{
font-weight: bold;
font-size: 16px;
text-align: right;
} }
.approvalTitle{ }
font-weight: bold;
font-size: 16px;
text-align: left;
}
.timeline {
position: relative;
margin: 15px 0 0 0;
// border-bottom: solid 1px var(--cusgray);
}
.timeline:before {
content: '';
position: inherit !important;
top: 0;
bottom: 0;
width: 4px;
// background: #e4e4e4;
z-index: 1;
left: 35px;
/* margin-left: -10px; */
/* z-index: 1; */
}
.timeline .timeline-thumb {
border-radius: 500px;
width: 70px !important;
z-index: 2;
position: absolute;
left: 0px;
// :root[dir="ltr"]{
// left: 37px;
// }
// :root[dir="rtl"]{
// right: 37px;
// }
float: right;
top: 9px;
}
.timeline .timeline-thumb.timeline-icon {
height: 70px;
// text-align: center;
// color: white;
// border: 5px solid #CBD0D3;
// transform: scale(0.2);
}
.timeline .timeline-item {
// width: 40px;
}
.timeline .timeline-stats {
position: relative;
font-size: 12px;
color: var(--darkgray);
}
.empImge {
border-radius: 50%;
width: 60px;
height: 60px;
border: #dedede solid 1px;
}
.empImgeRep {
border-radius: 50% !important;
width: 80px;
height: 80px;
border: #dedede solid 1px;
}
.line {
padding-bottom: 87px;
}
.attachLable {
position: absolute;
top: 0px;
z-index: 0;
background: #30b8c6;
color: #fff;
border-radius: 50%;
border: 0px;
width: 24px;
height: 24px;
text-align: center;
font-size: 5px;
}
.removeLable {
top: 0px;
z-index: 0;
background: #d8252d;
color: #fff;
border-radius: 50%;
border: 0px;
width: 20px;
height: 20px;
text-align: center;
font-size: 5px;
}
.note-modal {
// width: 90%;
// height: 50%;
// top: 20%;
// left: 5%;
// right: 5%;
// bottom: 5%;
background: rgba(0, 0, 0, 0.5) !important;
padding: 30% 10% !important;
--height: 12cm !important;
// --width: 80% !important;
--border-radius: 20px;
}
.header-toolbar-new {
--background: #BE332F;
}
.confirmEitOkButton {
white-space: normal !important;
text-transform: capitalize !important;
min-height: 45px !important;
min-width: 5px !important;
margin: 8px !important;
--background: #BE332F;
width: 80% !important;
color: white !important;
border-radius: 16px !important;
}
.approvalTitle-ar {
font-weight: bold;
font-size: 16px;
text-align: right;
}
.approvalTitle {
font-weight: bold;
font-size: 16px;
text-align: left;
}

@ -145,7 +145,7 @@
<div> <div>
<ion-row> <ion-row>
<ion-col class="colBold"> <ion-col class="colBold">
<label style="color:#269DB8;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','startDate')}} </label> <label style="color:#BE332F;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','startDate')}} </label>
<br> <br>
<label class="label" style="color:black;" for=""> {{item.START_DATE}}</label> <label class="label" style="color:black;" for=""> {{item.START_DATE}}</label>
<br> <br>
@ -154,7 +154,7 @@
</ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col class="colBold"> <ion-col class="colBold">
<label style="color:#269DB8;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','endDate')}}</label> <label style="color:#BE332F;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','endDate')}}</label>
<br> <br>
<label class="label" style="color:black;" for=""> {{item.END_DATE}}</label> <label class="label" style="color:black;" for=""> {{item.END_DATE}}</label>
<br> <br>
@ -163,7 +163,7 @@
</ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col class="colBold"> <ion-col class="colBold">
<label style="color:#269DB8;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','absenceType')}} </label> <label style="color:#BE332F;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','absenceType')}} </label>
<br> <br>
<label class="label" style="color:black;" for="">{{item.ABSENCE_TYPE}}</label> <label class="label" style="color:black;" for="">{{item.ABSENCE_TYPE}}</label>
<br> <br>
@ -172,7 +172,7 @@
</ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col class="colBold"> <ion-col class="colBold">
<label style="color:#269DB8;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','absenceCategory')}}</label> <label style="color:#BE332F;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','absenceCategory')}}</label>
<br> <br>
<label class="label" style="color:black;" for="">{{item.ABSENCE_CATEGORY}}</label> <label class="label" style="color:black;" for="">{{item.ABSENCE_CATEGORY}}</label>
<br> <br>
@ -181,7 +181,7 @@
</ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col class="colBold"> <ion-col class="colBold">
<label style="color:#269DB8;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','days')}}</label> <label style="color:#BE332F;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','days')}}</label>
<br> <br>
<label class="label" style="color:black;" for="">{{item.ABSENCE_DAYS}}</label> <label class="label" style="color:black;" for="">{{item.ABSENCE_DAYS}}</label>
<br> <br>
@ -190,7 +190,7 @@
</ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col class="colBold"> <ion-col class="colBold">
<label style="color:#269DB8;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','hours')}}</label> <label style="color:#BE332F;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','hours')}}</label>
<br> <br>
<label class="label" style="color:black;" for="">{{item.ABSENCE_HOURS}}</label> <label class="label" style="color:black;" for="">{{item.ABSENCE_HOURS}}</label>
<br> <br>
@ -199,7 +199,7 @@
</ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col class="colBold"> <ion-col class="colBold">
<label style="color:#269DB8;font-weight: bold;" for="">{{ts.trPK('absenceList','approvalStatus')}}</label> <label style="color:#BE332F;font-weight: bold;" for="">{{ts.trPK('absenceList','approvalStatus')}}</label>
<br> <br>
<label class="label" style="color:black;" for="">{{item.APPROVAL_STATUS}}</label> <label class="label" style="color:black;" for="">{{item.APPROVAL_STATUS}}</label>
<br> <br>
@ -208,7 +208,7 @@
</ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col class="colBold"> <ion-col class="colBold">
<label style="color:#269DB8;font-weight: bold;" for="">{{ts.trPK('absenceList','absenceStatus')}}</label> <label style="color:#BE332F;font-weight: bold;" for="">{{ts.trPK('absenceList','absenceStatus')}}</label>
<br> <br>
<label class="label" style="color:black;" for="">{{item.ABSENCE_STATUS}}</label> <label class="label" style="color:black;" for="">{{item.ABSENCE_STATUS}}</label>
<br> <br>

@ -1,125 +1,128 @@
.imgSize{ .imgSize {
position: absolute; position: absolute;
right: 15px; right: 15px;
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto; margin: auto;
height:20px; height: 20px;
width:20px; width: 20px;
} }
.addClass{
background-color: #269DB8;
width: 80px;
height: 80px;
right: 8%;
position: fixed;
color: white;
bottom: 5%;
border-radius: 50%;
z-index: 999;
-webkit-box-shadow: 2px -1px 13px 0px rgba(0,0,0,0.59);
-moz-box-shadow: 2px -1px 13px 0px rgba(0,0,0,0.59);
box-shadow: 2px -1px 13px 0px rgba(0,0,0,0.59);
}
.grids{ .addClass {
border-radius: 20px !important; background-color: #BE332F;
background: white; width: 80px;
padding-left: 1px; height: 80px;
padding-right: 1px; right: 8%;
margin: 13px; position: fixed;
padding-top: 0px; color: white;
padding-bottom: 3px; bottom: 5%;
padding-left: 13px; border-radius: 50%;
padding-right: 13px; z-index: 999;
border: 1px solid #cac8c8; -webkit-box-shadow: 2px -1px 13px 0px rgba(0, 0, 0, 0.59);
margin-bottom: 10% !important; -moz-box-shadow: 2px -1px 13px 0px rgba(0, 0, 0, 0.59);
} box-shadow: 2px -1px 13px 0px rgba(0, 0, 0, 0.59);
}
.bgcolor {
color: white;
border-top-right-radius: 19px;
border-top-left-radius: 15px;
padding-top: 1;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
/* border-radius: 12px !important; */
background: #269DB8;
border-bottom: 1px solid #a7a4a4;
border-top: 1px solid #cac8c8;
margin-left: -13px;
margin-right: -13px;
}
.header-div {
background-color: #269DB8;
text-transform: capitalize;
height: 100px;
}
.header-toolbar-new{
--background: #269DB8;
}
.hrClass{
border-width: 0;
box-sizing: content-box;
border-bottom: 1px solid #e6e6e6;
background: #fff !important;
height: 1px;
}
//////////////////////////////////////////////down .grids {
border-radius: 20px !important;
background: white;
padding-left: 1px;
padding-right: 1px;
margin: 13px;
padding-top: 0px;
padding-bottom: 3px;
padding-left: 13px;
padding-right: 13px;
border: 1px solid #cac8c8;
margin-bottom: 10% !important;
}
.colorBG{ .bgcolor {
--background: #f0efef;
} color: white;
border-top-right-radius: 19px;
border-top-left-radius: 15px;
padding-top: 1;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
/* border-radius: 12px !important; */
background: #BE332F;
border-bottom: 1px solid #a7a4a4;
border-top: 1px solid #cac8c8;
margin-left: -13px;
margin-right: -13px;
}
.header-div {
background-color: #BE332F;
text-transform: capitalize;
height: 100px;
}
.header-toolbar-new {
--background: #BE332F;
}
.Title{
text-align: center;
color: white;
margin-top: -33px;
font-size: 17px;
}
.result-graph{ .hrClass {
font-size: 14px; border-width: 0;
margin-left: -48px; box-sizing: content-box;
margin-right: 3px; border-bottom: 1px solid #e6e6e6;
margin-bottom: -30px; background: #fff !important;
} height: 1px;
}
.datetime{ //////////////////////////////////////////////down
text-align: center;
font-family: WorkSans-Bold; .colorBG {
margin-left: -120px; --background: #f0efef;
margin-top: -19px; }
.Title {
text-align: center;
color: white;
margin-top: -33px;
font-size: 17px;
}
.result-graph {
font-size: 14px;
margin-left: -48px;
margin-right: 3px;
margin-bottom: -30px;
}
.datetime {
text-align: center;
font-family: WorkSans-Bold;
margin-left: -120px;
margin-top: -19px;
}
.datelabel {
margin-left: 150px;
color: black !important;
font-family: WorkSans-Bold;
}
.iconCalendar {
// margin-left: -241px;
// margin-top: 5px;
margin-left: -12px !important;
width: 22% !important;
height: 26px !important;
margin-top: -50px !important;
margin-bottom: 23px !important;
}
}
.datelabel{
margin-left: 150px;
color: black !important;
font-family: WorkSans-Bold;
}
.iconCalendar{
// margin-left: -241px;
// margin-top: 5px;
margin-left: -12px !important;
width: 22% !important;
height: 26px !important;
margin-top: -50px !important;
margin-bottom: 23px !important;
}
// .today-graph{ // .today-graph{
// display: block !important; // display: block !important;
// height: 196px; // height: 196px;
// width: 385px; // width: 385px;
@ -137,100 +140,104 @@
// margin-bottom: -30px; // margin-bottom: -30px;
// } // }
.headerGrid{ .headerGrid {
background-color: white !important; background-color: white !important;
border: 1px solid #cac8c8 !important; border: 1px solid #cac8c8 !important;
border-radius: 20px !important; border-radius: 20px !important;
padding-top: 28px; padding-top: 28px;
padding-bottom: 26px; padding-bottom: 26px;
margin-left: 13px; margin-left: 13px;
margin-right: 13px; margin-right: 13px;
margin-top: -93px; margin-top: -93px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.header{
.header {
margin-top: -126px;
} margin-top: -126px;
.result-text-container { }
padding: 0;
margin: 0; .result-text-container {
position: absolute; padding: 0;
left: 31%; margin: 0;
top: 23%; position: absolute;
display: block; left: 31%;
text-align: center; top: 23%;
transform: translate(-50%, -50%); display: block;
text-align: center;
transform: translate(-50%, -50%);
h2 { h2 {
font-size: 25px; font-size: 25px;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
margin: 0 auto; margin: 0 auto;
// margin-top: 289px; // margin-top: 289px;
line-height: 36px; line-height: 36px;
} }
span { span {
width: 125px; width: 125px;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
font-size: 12px; font-size: 12px;
// margin-top: 289px; // margin-top: 289px;
font-family: workSans-Regular; font-family: workSans-Regular;
}
} }
.green-label{
font-size: 12px;
margin-top: -13px;
} }
.green-amount{ .green-label {
font-size: 12px;
margin-top: -13px;
}
.green-amount {
font-size: 15px; font-size: 15px;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
margin-top: 0px; margin-top: 0px;
} }
.red-label{ .red-label {
font-size: 12px; font-size: 12px;
margin-top: -13px; margin-top: -13px;
} }
.red-amount{ .red-amount {
font-size: 15px; font-size: 15px;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
margin-top: 0px; margin-top: 0px;
} }
.orng-label{
font-size: 12px; .orng-label {
margin-top: -13px; font-size: 12px;
} margin-top: -13px;
}
.orng-amount{
font-size: 15px; .orng-amount {
font-family: WorkSans-Bold; font-size: 15px;
margin-top: 0px; font-family: WorkSans-Bold;
} margin-top: 0px;
}
.contentEit:before {
position: absolute; .contentEit:before {
position: absolute;
content: ""; content: "";
// background: #269DB8; // background: #BE332F;
height: 140px; height: 140px;
width: 100%; width: 100%;
left: 0; left: 0;
top: 0px; top: 0px;
z-index: 1; z-index: 1;
} }
.div-green{
.div-green {
position: relative; position: relative;
left: 82%; left: 82%;
bottom: 141px; bottom: 141px;
@ -238,9 +245,9 @@ margin-top: -13px;
background-color: #1FA269; background-color: #1FA269;
width: 11%; width: 11%;
height: 6px; height: 6px;
} }
.div-red-ar{ .div-red-ar {
position: relative; position: relative;
bottom: 59px; bottom: 59px;
color: black; color: black;
@ -250,7 +257,8 @@ margin-top: -13px;
height: 6px; height: 6px;
right: 16px; right: 16px;
} }
// .div-red-ar{ // .div-red-ar{
// position: relative; // position: relative;
// bottom: 131px; // bottom: 131px;
@ -266,12 +274,12 @@ margin-top: -13px;
// bottom: 146px; // bottom: 146px;
// color: black; // color: black;
// background-color: #CB3232; // background-color: #CB3232;
// // background-color: #269DB8; // // background-color: #BE332F;
// width: 11%; // width: 11%;
// height: 6px; // height: 6px;
// } // }
.div-red{ .div-red {
position: relative; position: relative;
left: 82%; left: 82%;
bottom: 80px; bottom: 80px;
@ -280,8 +288,9 @@ margin-top: -13px;
// background-color: #DDB017; // background-color: #DDB017;
width: 11%; width: 11%;
height: 6px; height: 6px;
} }
.div-green-ar{
.div-green-ar {
position: relative; position: relative;
bottom: 124px; bottom: 124px;
color: black; color: black;
@ -290,15 +299,16 @@ margin-top: -13px;
width: 11%; width: 11%;
height: 6px; height: 6px;
right: 16px; right: 16px;
} }
.subTitle{
.subTitle {
margin-top: -10px; margin-top: -10px;
margin-left: 10px; margin-left: 10px;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
font-size: 16px; font-size: 16px;
} }
.subTitle-ar{ .subTitle-ar {
margin-top: -10px; margin-top: -10px;
margin-right: 10px; margin-right: 10px;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
@ -311,8 +321,8 @@ margin-top: -13px;
height: 102px; height: 102px;
width: 211px; width: 211px;
margin-top: 20px; margin-top: 20px;
margin-left: -39px; margin-left: -39px;
max-height: 4cm; max-height: 4cm;
} }
.today-graph-ar { .today-graph-ar {
@ -325,11 +335,12 @@ max-height: 4cm;
margin-right: 105px; margin-right: 105px;
} }
.graph-container{ .graph-container {
margin-left: 160px; margin-left: 160px;
position: relative; position: relative;
margin-top: -98px; margin-top: -98px;
} }
// .label-container{ // .label-container{
// position: absolute; // position: absolute;
// // width: 20%; // // width: 20%;
@ -337,26 +348,31 @@ max-height: 4cm;
// top: 50%; // top: 50%;
// margin-top: -27px; // margin-top: -27px;
// left: 20px; // left: 20px;
// } // }
.green-label-container{ .green-label-container {
margin-top: 20px; margin-left: 12px; margin-top: 20px;
margin-left: 12px;
} }
.green-label-container-ar{
margin-top: 20px; margin-right: 12px; .green-label-container-ar {
margin-top: 20px;
margin-right: 12px;
} }
.black-label-container{ .black-label-container {
margin-left: 12px; margin-left: 12px;
} }
.black-label-container-ar{
.black-label-container-ar {
margin-right: 12px; margin-right: 12px;
} }
.used-label-container{
.used-label-container {
// border-top: 5px solid #292F42; // border-top: 5px solid #292F42;
// padding: 1px 0px; // padding: 1px 0px;
// margin: 15px 0px // margin: 15px 0px
@ -367,7 +383,8 @@ max-height: 4cm;
background-color: #b60c0c; background-color: #b60c0c;
margin-top: 30px; margin-top: 30px;
} }
.current-label-container{
.current-label-container {
width: 12px; width: 12px;
height: 12px; height: 12px;
padding-right: -10px; padding-right: -10px;
@ -375,51 +392,53 @@ max-height: 4cm;
background-color: black; background-color: black;
margin-top: 21px; margin-top: 21px;
} }
.current-label{
.current-label {
width: 12px; width: 12px;
height: 12px; height: 12px;
padding-right: -10px; padding-right: -10px;
border-radius: 100%; border-radius: 100%;
background-color: #269DB8; background-color: #BE332F;
// margin-top: 30px; // margin-top: 30px;
} }
.span-one{
.span-one {
// display: block; // display: block;
// font-size: 12px; // font-size: 12px;
// color: black; // color: black;
display: block; display: block;
font-size: 12px; font-size: 12px;
color: #269DB8; color: #BE332F;
margin-left: 6px; margin-left: 6px;
margin-top: -2px; margin-top: -2px;
font-weight: bold; font-weight: bold;
} }
.span-one-ar{ .span-one-ar {
display: block; display: block;
font-size: 12px; font-size: 12px;
color: #269DB8; color: #BE332F;
margin-right: 6px; margin-right: 6px;
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;
display: block; display: block;
font-size: 12px; font-size: 12px;
color: #269DB8; color: #BE332F;
margin-left: 6px; margin-left: 6px;
margin-top: -2px; margin-top: -2px;
font-weight: bold; font-weight: bold;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
} }
.black-span1{ .black-span1 {
// display: block; // display: block;
// font-size: 12px; // font-size: 12px;
// color: black; // color: black;
@ -429,9 +448,10 @@ max-height: 4cm;
margin-left: 6px; margin-left: 6px;
margin-top: 20px; margin-top: 20px;
font-weight: bold; font-weight: bold;
} }
.black-span1-ar{
.black-span1-ar {
// display: block; // display: block;
// font-size: 12px; // font-size: 12px;
// color: black; // color: black;
@ -441,9 +461,10 @@ max-height: 4cm;
margin-right: 6px; margin-right: 6px;
margin-top: 20px; margin-top: 20px;
font-weight: bold; font-weight: bold;
} }
.black-span2{
.black-span2 {
// display: block; // display: block;
// font-size: 22px; // font-size: 22px;
display: block; display: block;
@ -453,9 +474,10 @@ max-height: 4cm;
margin-top: 20px; margin-top: 20px;
font-weight: bold; font-weight: bold;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
} }
.red-span1{
.red-span1 {
// display: block; // display: block;
// font-size: 12px; // font-size: 12px;
// color: black; // color: black;
@ -465,9 +487,10 @@ max-height: 4cm;
margin-left: 6px; margin-left: 6px;
margin-top: 28px; margin-top: 28px;
font-weight: bold; font-weight: bold;
} }
.red-span1-ar{
.red-span1-ar {
// display: block; // display: block;
// font-size: 12px; // font-size: 12px;
// color: black; // color: black;
@ -477,9 +500,10 @@ max-height: 4cm;
margin-right: 6px; margin-right: 6px;
margin-top: 28px; margin-top: 28px;
font-weight: bold; font-weight: bold;
} }
.red-span2{
.red-span2 {
// display: block; // display: block;
// font-size: 22px; // font-size: 22px;
display: block; display: block;
@ -489,16 +513,18 @@ max-height: 4cm;
margin-top: 28px; margin-top: 28px;
font-weight: bold; font-weight: bold;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
} }
.yearLabel{
.yearLabel {
font-size: 13px; font-size: 13px;
color: gray; color: gray;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
margin-left: 29px; margin-left: 29px;
margin-top: 5px; margin-top: 5px;
} }
.yearLabel-ar{
.yearLabel-ar {
font-size: 13px; font-size: 13px;
color: gray; color: gray;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;

@ -118,7 +118,7 @@ export class HomeComponent implements OnInit {
backgroundColor: [ backgroundColor: [
// '#1FA269', // '#1FA269',
// '#CB3232',], // '#CB3232',],
'#269DB8', '#BE332F',
'#b60c0c',], '#b60c0c',],
borderWidth: 1 borderWidth: 1
} }
@ -276,7 +276,7 @@ export class HomeComponent implements OnInit {
{ {
data: [this.accrualNet, this.accrualUsed], data: [this.accrualNet, this.accrualUsed],
backgroundColor: [ backgroundColor: [
'#269DB8', '#BE332F',
'#b60c0c',], '#b60c0c',],
borderWidth: 1 borderWidth: 1
} }

@ -1,53 +1,52 @@
.rowBtn{ .rowBtn {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.Header{ .Header {
color: black !important; color: black !important;
font-size: 25px !important; font-size: 25px !important;
font-weight: bold !important;; font-weight: bold !important;
;
margin: 0; margin: 0;
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
.labelRadio{ .labelRadio {
color: black !important; color: black !important;
font-weight: bold !important; font-weight: bold !important;
padding-bottom: 20px; padding-bottom: 20px;
} }
.labelcheck{ .labelcheck {
color: red !important; color: red !important;
font-weight: bold !important; font-weight: bold !important;
margin-bottom: 10px; margin-bottom: 10px;
} }
.submitOkButton{ .submitOkButton {
white-space: normal !important; white-space: normal !important;
text-transform: capitalize !important; text-transform: capitalize !important;
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
--background:: #269DB8; --background: #BE332F;
width: 100% !important; width: 100% !important;
color: white!important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
} }
.submitCancelButton{
.submitCancelButton {
white-space: normal !important; white-space: normal !important;
text-transform: capitalize !important; text-transform: capitalize !important;
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
--background:: #269DB8; --background: #BE332F;
width: 100% !important; width: 100% !important;
color: white!important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
} }

@ -1,114 +1,114 @@
.search-button{ .search-button {
background: transparent; background: transparent;
font-size: 25px; font-size: 25px;
color: #7F8C8D; color: #7F8C8D;
} }
.header-toolbar-new{ .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.confirmEitOkButton{ .confirmEitOkButton {
white-space: normal !important; white-space: normal !important;
text-transform: capitalize !important; text-transform: capitalize !important;
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
--background: #269DB8; --background: #BE332F;
width: 80% !important; width: 80% !important;
color: white!important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
} }
.label-Select{ .label-Select {
color: var(--dark); color: var(--dark);
font-size: 15px; font-size: 15px;
border: none; border: none;
font-weight: 400; font-weight: 400;
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
width: 80%; width: 80%;
padding: 1px 0px; padding: 1px 0px;
background-color: var(--light); background-color: var(--light);
border-bottom: var(--cusgray) solid 1px; border-bottom: var(--cusgray) solid 1px;
border-radius: 0px; border-radius: 0px;
// margin-left: 20px; // margin-left: 20px;
margin-left: 30px; margin-left: 30px;
// margin-top: -10px; // margin-top: -10px;
// -webkit-appearance: none; // -webkit-appearance: none;
// -moz-appearance: none; // -moz-appearance: none;
text-indent: 1px; text-indent: 1px;
// text-overflow: ''; // text-overflow: '';
box-shadow: none; box-shadow: none;
-webkit-box-shadow:none; -webkit-box-shadow: none;
-moz-box-shadow: none; -moz-box-shadow: none;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
:root[dir="ltr"]{ :root[dir="ltr"] {
background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%), linear-gradient(to right, #ffffff, #ffffff); background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%), linear-gradient(to right, #ffffff, #ffffff);
background-position: calc(100% - 14px) calc(1em + 2px), calc(100% - 8px) calc(1em + 2px), 100% 0; background-position: calc(100% - 14px) calc(1em + 2px), calc(100% - 8px) calc(1em + 2px), 100% 0;
background-size: 6px 6px, 6px 6px, 2.9em 2.9em; background-size: 6px 6px, 6px 6px, 2.9em 2.9em;
background-repeat: no-repeat; background-repeat: no-repeat;
padding-right: 20px; padding-right: 20px;
} }
:root[dir="rtl"]{
background-image: linear-gradient(-135deg, #999 50%, transparent 50%),linear-gradient(-45deg, transparent 50%, #999 50%), linear-gradient(to right, #ffffff, #ffffff); :root[dir="rtl"] {
background-position: calc(1em - 10px) calc(100% - 8px), calc(1em - 4px) calc(100% - 8px), 0 100%; background-image: linear-gradient(-135deg, #999 50%, transparent 50%), linear-gradient(-45deg, transparent 50%, #999 50%), linear-gradient(to right, #ffffff, #ffffff);
background-size: 6px 6px, 6px 6px, 2.9em 2.9em; background-position: calc(1em - 10px) calc(100% - 8px), calc(1em - 4px) calc(100% - 8px), 0 100%;
background-repeat: no-repeat; background-size: 6px 6px, 6px 6px, 2.9em 2.9em;
padding-left: 20px; background-repeat: no-repeat;
} padding-left: 20px;
}
} }
.label{ .label {
font-size: 16px; font-size: 16px;
// margin-left: 15px; // margin-left: 15px;
color: #a2a5a6 !important; color: #a2a5a6 !important;
display: block; display: block;
overflow: hidden; overflow: hidden;
-webkit-box-flex: 1; -webkit-box-flex: 1;
-webkit-flex: 1; -webkit-flex: 1;
-ms-flex: 1; -ms-flex: 1;
flex: 1; flex: 1;
/* font-size: inherit; */ /* font-size: inherit; */
// text-overflow: ellipsis; // text-overflow: ellipsis;
// white-space: nowrap; // white-space: nowrap;
white-space: normal; white-space: normal;
// padding-top: 10px; // padding-top: 10px;
padding: 5px 0px; padding: 5px 0px;
padding-left: 10px !important; padding-left: 10px !important;
margin: 10px auto; margin: 10px auto;
:root[dir="ltr"]{
font-family: var(--fontFamilySemiBoldEN) !important; :root[dir="ltr"] {
} font-family: var(--fontFamilySemiBoldEN) !important;
:root[dir="rtl"]{ }
font-family: var(--fontFamilyIOSAR) !important;
font-weight: bold; :root[dir="rtl"] {
} font-family: var(--fontFamilyIOSAR) !important;
font-weight: bold;
}
} }
.Field-en{ .Field-en {
border-radius: 30px; border-radius: 30px;
border: 1px solid #a2a5a6!important; border: 1px solid #a2a5a6 !important;
margin-bottom: 20px; margin-bottom: 20px;
padding-left: 20px !important; padding-left: 20px !important;
padding-top: 6px !important; padding-top: 6px !important;
color: #999999 !important; color: #999999 !important;
} }
.Field-ar{ .Field-ar {
border-radius: 30px; border-radius: 30px;
border: 1px solid #a2a5a6!important; border: 1px solid #a2a5a6 !important;
margin-bottom: 20px; margin-bottom: 20px;
padding-right: 20px !important; padding-right: 20px !important;
padding-top: 6px !important; padding-top: 6px !important;
color: #999999 !important; color: #999999 !important;
} }

@ -1,3 +1,3 @@
.header-toolbar-new{ .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }

@ -77,7 +77,7 @@ header
.logout { .logout {
background-color: #269DB8; background-color: #BE332F;
border: none; border: none;
color: white; color: white;
// padding: 20px; // padding: 20px;
@ -96,7 +96,7 @@ header
} }
.logout-ar { .logout-ar {
background-color: #269DB8; background-color: #BE332F;
border: none; border: none;
color: white; color: white;
text-align: center; text-align: center;

@ -44,14 +44,14 @@
left: 79%; left: 79%;
bottom: 35px; bottom: 35px;
color: black; color: black;
background-color: #269DB8; background-color: #BE332F;
width: 20%; height: 6px;"> width: 20%; height: 6px;">
</div> </div>
<div style="position: relative; <div style="position: relative;
left: 79%; left: 79%;
bottom: 20px; bottom: 20px;
color: black; color: black;
background-color: #269DB8; background-color: #BE332F;
width: 20%; height: 6px;"> width: 20%; height: 6px;">
</div> </div>

@ -1,14 +1,15 @@
.colorBG { .colorBG {
--background: #f0efef; --background: #f0efef;
} }
.header-div { .header-div {
background: #269DB8; background: #BE332F;
color: var(--light); color: var(--light);
text-transform: capitalize; text-transform: capitalize;
display: block; display: block;
position: relative; position: relative;
height: 210px; height: 210px;
margin-bottom: 60px; margin-bottom: 60px;
} }
@ -16,227 +17,230 @@
.chart-modal .modal-Wrapper { .chart-modal .modal-Wrapper {
--background: rgb(116, 108, 108) !important; --background: rgb(116, 108, 108) !important;
--border-color:white!important ; --border-color: white !important;
width: 85%!important ; width: 85% !important;
height: 40px !important ; height: 40px !important;
}
.navbar{ }
font-size: 10px !important;
--background: #269DB8 !important;
color: aliceblue !important;
// margin-top: 10px !important;
} .navbar {
font-size: 10px !important;
--background: #BE332F !important;
color: aliceblue !important;
// margin-top: 10px !important;
.menu{ }
// margin-left:330px !important;
margin-top: 0px !important;
font-size: 35px !important;
background: #269DB8;
color: aliceblue;
margin-left: 0px !important;
} .menu {
// margin-left:330px !important;
margin-top: 0px !important;
font-size: 35px !important;
background: #BE332F;
color: aliceblue;
margin-left: 0px !important;
.person{ }
margin-left:100px !important;
margin-top: 0px !important;
font-size: 23px !important;
background: #269DB8 !important;
color: aliceblue !important;
}
.grid{ .person {
margin-bottom: 550px !important;
margin-top: 20px !important;
margin-left: 15px !important;
margin-right: 15px !important;
background-color:white !important;
border-radius: 20px !important;
height: 250px !important;
}
.headerGrid{ margin-left: 100px !important;
margin-bottom: 550px !important; margin-top: 0px !important;
margin-top: 80px !important; font-size: 23px !important;
margin-left: 15px !important; background: #BE332F !important;
margin-right: 15px !important; color: aliceblue !important;
background-color:white !important;
border-radius: 20px !important;
height: 250px !important;
}
.bodyGrid{ }
margin-bottom: 550px !important;
margin-top: 20px !important;
margin-left: 15px !important;
margin-right: 15px !important;
background-color:white !important;
border-radius: 20px !important;
height: 270px !important;
}
.labelGrid{
margin-top: -30px !important;
background-color:white !important;
border-radius: 20px !important;
height: 100px !important;
}
.ionSliders{ .grid {
margin: 0px !important; margin-bottom: 550px !important;
padding: 0px !important; margin-top: 20px !important;
margin-left: 15px !important;
margin-right: 15px !important;
background-color: white !important;
border-radius: 20px !important;
height: 250px !important;
}
.headerGrid {
margin-bottom: 550px !important;
margin-top: 80px !important;
margin-left: 15px !important;
margin-right: 15px !important;
background-color: white !important;
border-radius: 20px !important;
height: 250px !important;
} }
.bodyGrid {
margin-bottom: 550px !important;
margin-top: 20px !important;
margin-left: 15px !important;
margin-right: 15px !important;
background-color: white !important;
border-radius: 20px !important;
height: 270px !important;
}
.ionSlide{ .labelGrid {
margin-top: 5px !important; margin-top: -30px !important;
margin-left: 190px !important; background-color: white !important;
color: black !important; border-radius: 20px !important;
height: 100px !important;
}
} .ionSliders {
.dateLable{ margin: 0px !important;
padding: 0px !important;
}
.ionSlide {
margin-top: 5px !important;
margin-left: 190px !important;
color: black !important;
}
.dateLable {
margin-left: 90px !important;
color: black !important;
font-size: small !important;
margin-top: 15px !important;
}
margin-left: 90px !important;
color: black !important;
font-size: small !important;
margin-top: 15px !important;
}
// h1{ // h1{
// font-size: 15px !important; // font-size: 15px !important;
// text-align: center !important; // text-align: center !important;
// } // }
.arrowDropright{ .arrowDropright {
margin-left:100px !important; margin-left: 100px !important;
font-size: 20px !important; font-size: 20px !important;
color: rgb(168, 165, 165) !important; color: rgb(168, 165, 165) !important;
margin-top: 15px !important; margin-top: 15px !important;
} }
.arrowDropleft{
font-size: 20px !important; .arrowDropleft {
font-size: 20px !important;
margin-left: 10px !important; margin-left: 10px !important;
margin-top: 15px !important; margin-top: 15px !important;
color: rgb(116, 108, 108) !important; color: rgb(116, 108, 108) !important;
} }
.ionLable{ .ionLable {
font-size: 10px !important; font-size: 10px !important;
} }
.number{ .number {
font-size: 18px !important; font-size: 18px !important;
font-weight: bolder !important; font-weight: bolder !important;
color: black !important; color: black !important;
} }
.header-div {
background: var(--primary);
background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%, var(--secondary) 59%, var(--customnavy) 100%);
background: -webkit-linear-gradient(45deg, (--primary) 0%, var(--secondary) 36%, var(--secondary) 59%, var(--customnavy) 100%);
background: #BE332F;
// background: linear-gradient(90deg, #85C48D 0%, #85C48D 13%, #2BB5C6 98%, #2BB5C6 100%);
color: var(--light);
text-transform: capitalize;
display: block;
position: relative;
height: 210px;
margin-bottom: 60px;
// border-radius: 0px 0px 70px 70px;
}
.request-heading {
span {
text-align: center;
.header-div{
background:var(--primary);
background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
background: -webkit-linear-gradient(45deg, (--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
background: #269DB8;
// background: linear-gradient(90deg, #85C48D 0%, #85C48D 13%, #2BB5C6 98%, #2BB5C6 100%);
color:var(--light);
text-transform: capitalize;
display: block; display: block;
position: relative;
height: 210px; padding-top: 8px;
margin-bottom:60px;
// border-radius: 0px 0px 70px 70px; font-family: workSans-Regular;
}
}
.request-heading {
}
span {
text-align: center;
.result-graph {
display: block;
position: relative;
padding-top: 8px;
background: white;
font-family: workSans-Regular;
margin-right: 20px;
}
margin-left: 20px;
margin-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
}
.result-text-container {
padding: 0;
margin: 0;
position: absolute;
left: 50%;
top: 50%;
display: block;
text-align: center;
transform: translate(-50%, -50%);
h2 {
font-size: 38px;
font-family: WorkSans-Bold;
margin: 0 auto;
line-height: 36px;
} }
span {
.result-graph { width: 125px;
position: relative;
background: white;
margin-right: 20px;
margin-left: 20px;
margin-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
}
.result-text-container {
padding: 0;
margin: 0;
position: absolute;
left: 50%;
top: 50%;
display: block; display: block;
text-align: center; margin: 0 auto;
transform: translate(-50%, -50%); font-size: 12px;
h2 { font-family: workSans-Regular;
font-size: 38px;
font-family: WorkSans-Bold;
margin: 0 auto;
line-height: 36px;
}
span {
width: 125px;
display: block;
margin: 0 auto;
font-size: 12px;
font-family: workSans-Regular;
}
} }
}

@ -40,7 +40,7 @@ export class MonthlyAttendanceComponent implements OnInit {
public data = { public data = {
datasets: [ datasets: [
@ -50,9 +50,9 @@ public data = {
backgroundColor: [ backgroundColor: [
'#269DB8', '#BE332F',
'#269DB8', '#BE332F',
], ],
borderWidth: 2 borderWidth: 2
@ -65,12 +65,12 @@ public data = {
ionViewWillEnter() { ionViewWillEnter() {
this.currentMonth = this.sharedData.getSharedData("currentMonth"); this.currentMonth = this.sharedData.getSharedData("currentMonth");
console.log(this.currentMonth); console.log(this.currentMonth);
let day = this.currentMonth.split(" "); let day = this.currentMonth.split(" ");
this.todayMonth =day[0]; this.todayMonth = day[0];
this.todayYear = day[1]; this.todayYear = day[1];
this.todayYear = parseInt(this.todayYear); this.todayYear = parseInt(this.todayYear);
console.log("MONTH: " +this.todayMonth); console.log("MONTH: " + this.todayMonth);
console.log("YEAR: " +this.todayYear); console.log("YEAR: " + this.todayYear);
this.getSubordinatesAttStatus() this.getSubordinatesAttStatus()
} }
@ -92,7 +92,7 @@ public data = {
} }
x(){ x() {
console.log("ENAD CHANge") console.log("ENAD CHANge")
} }

@ -1,8 +1,8 @@
.header-toolbar{ .header-toolbar {
--background: linear-gradient(45deg, #3ac1f1 0%, #19a163 36%, #19a163 59%, #1a586d 100%); --background: linear-gradient(45deg, #3ac1f1 0%, #19a163 36%, #19a163 59%, #c6903e 100%);
} }
.btnBack{ .btnBack {
background: transparent; background: transparent;
} }
@ -11,21 +11,22 @@
.login-input { .login-input {
border: none; border: none;
} }
.item-input{
.item-input {
--min-height: 1.0cm !important; --min-height: 1.0cm !important;
--border-radius: 12px; --border-radius: 12px;
--ion-color-base: white !important; --ion-color-base: white !important;
// --background: color: var(--darkgray) !important; // --background: color: var(--darkgray) !important;
// background: #7f8c8d !important; // background: #7f8c8d !important;
border-radius: 33px; border-radius: 33px;
--border: solid #9999992b !important; --border: solid #9999992b !important;
border: solid #9999992b !important; border: solid #9999992b !important;
margin-bottom :12px; margin-bottom: 12px;
margin-left: 12px; margin-left: 12px;
margin-right: 12px; margin-right: 12px;
} }
.button-login{ .button-login {
--background: var(--newgreen) !important; --background: var(--newgreen) !important;
background: var(--newgreen) !important; background: var(--newgreen) !important;
@ -38,4 +39,5 @@
--min-height: 1.6cm !important; --min-height: 1.6cm !important;
width: 315px; width: 315px;
} }
/////////////////////////////////////////// ///////////////////////////////////////////

@ -182,7 +182,7 @@ img.centerDiv {
.middle-circle { .middle-circle {
position: relative; position: relative;
background: #1a586d !important; background: #c6903e !important;
border-radius: 50%; border-radius: 50%;
height: 160px; height: 160px;
width: 170px; width: 170px;

@ -1,5 +1,5 @@
.header-toolbar { .header-toolbar {
--background: linear-gradient(45deg, #3ac1f1 0%, #19a163 36%, #19a163 59%, #1a586d 100%); --background: linear-gradient(45deg, #3ac1f1 0%, #19a163 36%, #19a163 59%, #c6903e 100%);
} }
.btnBack { .btnBack {

@ -13,7 +13,8 @@
width: 22px; width: 22px;
height: 22px; height: 22px;
} }
.Header { .Header {
font-weight: bold; font-weight: bold;
color: #1a586d; color: #c6903e;
} }

@ -1,45 +1,46 @@
.footer-button { .footer-button {
border-radius: 2px; border-radius: 2px;
padding: 0 1.1em; padding: 0 1.1em;
min-height: 45px; min-height: 45px;
min-width: 200px; min-width: 200px;
} }
ion-label {
color: var(--customnavy) !important;
}
.daynamicForm-Label {
font-size: 16px;
color: #a2a5a6 !important;
display: block;
overflow: hidden;
-webkit-flex: 1;
flex: 1;
font-size: inherit;
white-space: normal;
padding: 5px 0px;
margin: 10px auto;
padding-left: 10px;
}
.header-toolbar-new{
--background: #269DB8;
}
.addEitOkButton{
white-space: normal !important;
text-transform: capitalize !important;
min-height: 45px !important;
min-width: 5px !important;
margin: 8px !important;
background-color: #269DB8;
width: 80% !important;
color: white!important;
border-radius: 16px !important;
}
.country{ ion-label {
margin-top: 10px; color: var(--customnavy) !important;
padding: 10px; }
}
.daynamicForm-Label {
font-size: 16px;
color: #a2a5a6 !important;
display: block;
overflow: hidden;
-webkit-flex: 1;
flex: 1;
font-size: inherit;
white-space: normal;
padding: 5px 0px;
margin: 10px auto;
padding-left: 10px;
}
.header-toolbar-new {
--background: #BE332F;
}
.addEitOkButton {
white-space: normal !important;
text-transform: capitalize !important;
min-height: 45px !important;
min-width: 5px !important;
margin: 8px !important;
background-color: #BE332F;
width: 80% !important;
color: white !important;
border-radius: 16px !important;
}
.country {
margin-top: 10px;
padding: 10px;
}

@ -24,17 +24,18 @@ ion-label {
} }
.header-toolbar-new{ .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.addEitOkButton{
.addEitOkButton {
white-space: normal !important; white-space: normal !important;
text-transform: capitalize !important; text-transform: capitalize !important;
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
background-color: #269DB8; background-color: #BE332F;
width: 80% !important; width: 80% !important;
color: white!important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
} }

@ -63,7 +63,7 @@
<!-- <ion-footer style="background: #f5f5f5 !important;"> <!-- <ion-footer style="background: #f5f5f5 !important;">
<div class="centerDiv" (click)="gotoTransactionsPage()"> <div class="centerDiv" (click)="gotoTransactionsPage()">
<ion-button ion-button style="background: #269db8 !important; --background: #269db8"> <ion-button ion-button style="background: #BE332F !important; --background: #BE332F">
{{'vacation-rule, next-label' | translate}}</ion-button> {{'vacation-rule, next-label' | translate}}</ion-button>
</div> </div>
</ion-footer> --> </ion-footer> -->

@ -22,7 +22,7 @@
<div *ngFor="let item of EITTransactionList.Collection_Transaction"> <div *ngFor="let item of EITTransactionList.Collection_Transaction">
<ion-row *ngIf="item.DISPLAY_FLAG != 'N' " class=""> <ion-row *ngIf="item.DISPLAY_FLAG != 'N' " class="">
<ion-col class="" *ngIf="item.SEGMENT_PROMPT!=''"> <ion-col class="" *ngIf="item.SEGMENT_PROMPT!=''">
<label style="color:#269DB8;font-weight: bold;" class="label" for="">{{item.SEGMENT_PROMPT}} </label> <label style="color:#BE332F;font-weight: bold;" class="label" for="">{{item.SEGMENT_PROMPT}} </label>
<br> <br>
<label class="label" style="color:black;" for="">{{item.SEGMENT_VALUE_DSP}} </label> <label class="label" style="color:black;" for="">{{item.SEGMENT_VALUE_DSP}} </label>
<br> <br>

@ -1,330 +1,348 @@
.footer-button { .footer-button {
border-radius: 2px; border-radius: 2px;
padding: 0 1.1em; padding: 0 1.1em;
min-height: 45px; min-height: 45px;
min-width: 200px; min-width: 200px;
} }
.datetime{ .datetime {
text-align: center; text-align: center;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
margin-left: 47px; margin-left: 47px;
margin-top: -19px; margin-top: -19px;
} }
.iconCalendar{
margin-left: 30px !important; .iconCalendar {
width: 22% !important; margin-left: 30px !important;
height: 26px !important; width: 22% !important;
margin-top: -69px !important; height: 26px !important;
margin-bottom: 20px !important; margin-top: -69px !important;
} margin-bottom: 20px !important;
h4 { }
font-size: 2.2rem;
text-align: center; h4 {
color: #000000; font-size: 2.2rem;
} text-align: center;
.grids{ color: #000000;
border-radius: 20px !important; }
background: white;
padding-left: 1px; .grids {
padding-right: 1px; border-radius: 20px !important;
margin: 13px; background: white;
padding-top: 0px; padding-left: 1px;
padding-bottom: 3px; padding-right: 1px;
padding-left: 13px; margin: 13px;
padding-right: 13px; padding-top: 0px;
border: 1px solid #cac8c8; padding-bottom: 3px;
} padding-left: 13px;
padding-right: 13px;
.bgcolor { border: 1px solid #cac8c8;
}
color: white;
border-top-right-radius: 19px; .bgcolor {
border-top-left-radius: 15px;
padding-top: 1; color: white;
padding-bottom: 0; border-top-right-radius: 19px;
margin-top: 0; border-top-left-radius: 15px;
margin-bottom: 0; padding-top: 1;
/* border-radius: 12px !important; */ padding-bottom: 0;
background: #269DB8; margin-top: 0;
border-bottom: 1px solid #a7a4a4; margin-bottom: 0;
border-top: 1px solid #cac8c8; /* border-radius: 12px !important; */
margin-left: -13px; background: #BE332F;
margin-right: -13px; border-bottom: 1px solid #a7a4a4;
} border-top: 1px solid #cac8c8;
.colEit{ margin-left: -13px;
border-right: 1px solid #cac8c8; margin-right: -13px;
border-bottom-left-radius: -10px !important; }
padding-top: 8px;
padding-bottom: 8px; .colEit {
margin-left: 18px; border-right: 1px solid #cac8c8;
font-size: 12px !important; border-bottom-left-radius: -10px !important;
} padding-top: 8px;
padding-bottom: 8px;
.header-div { margin-left: 18px;
font-size: 12px !important;
background-color: #269DB8; }
text-transform: capitalize;
height: 160px; .header-div {
// position: relative;
display: block; background-color: #BE332F;
margin-bottom: -28px; text-transform: capitalize;
} height: 160px;
// position: relative;
.header-toolbar-new{ display: block;
--background: #269DB8; margin-bottom: -28px;
} }
.addClass{ .header-toolbar-new {
background-color: #269DB8; --background: #BE332F;
width: 80px; }
height: 80px;
right: 8%; .addClass {
position: fixed; background-color: #BE332F;
color: white; width: 80px;
bottom: 5%; height: 80px;
border-radius: 50%; right: 8%;
z-index: 999; position: fixed;
-webkit-box-shadow: 2px -1px 13px 0px rgba(0,0,0,0.59); color: white;
-moz-box-shadow: 2px -1px 13px 0px rgba(0,0,0,0.59); bottom: 5%;
box-shadow: 2px -1px 13px 0px rgba(0,0,0,0.59); border-radius: 50%;
} z-index: 999;
-webkit-box-shadow: 2px -1px 13px 0px rgba(0, 0, 0, 0.59);
.contentEit:before { -moz-box-shadow: 2px -1px 13px 0px rgba(0, 0, 0, 0.59);
position: absolute; box-shadow: 2px -1px 13px 0px rgba(0, 0, 0, 0.59);
}
.contentEit:before {
position: absolute;
content: ""; content: "";
// background: #269DB8; // background: #BE332F;
height: 140px; height: 140px;
width: 100%; width: 100%;
left: 0; left: 0;
top: 0px; top: 0px;
z-index: 1; z-index: 1;
} }
.hrClass{ .hrClass {
border-width: 0; border-width: 0;
box-sizing: content-box; box-sizing: content-box;
border-bottom: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;
background: #fff !important; background: #fff !important;
height: 1px; height: 1px;
} }
//////////////////////////////// ////////////////////////////////
.content:before { .content:before {
position: absolute; position: absolute;
content: ""; content: "";
background: #269DB8; background: #BE332F;
height: 140px; height: 140px;
width: 100%; width: 100%;
left: 0; left: 0;
top: 0px; top: 0px;
z-index: 1; z-index: 1;
} }
.colorBG{ .colorBG {
--background: #f0efef; --background: #f0efef;
} }
.Title{ .Title {
text-align: center; text-align: center;
color: white; color: white;
margin-top: -33px; margin-top: -33px;
font-size: 17px; font-size: 17px;
} }
.title{
text-align: center; .title {
color: black; text-align: center;
margin-top: 5px; color: black;
font-size: 17px; margin-top: 5px;
} font-size: 17px;
.today-graph{ }
display: block !important;
height: 196px; .today-graph {
width: 365px; display: block !important;
/* padding-left: 51px; */ height: 196px;
margin-left: 28px !important; width: 365px;
} /* padding-left: 51px; */
margin-left: 28px !important;
.headerGrid{ }
background-color: white !important;
border: 1px solid #cac8c8 !important; .headerGrid {
padding-bottom: 53px; background-color: white !important;
padding-top: -30px; border: 1px solid #cac8c8 !important;
margin-left: 13px; padding-bottom: 53px;
margin-right: 13px; padding-top: -30px;
margin-bottom: 10px; margin-left: 13px;
position: relative; margin-right: 13px;
z-index: 1; margin-bottom: 10px;
border-radius: 20px; position: relative;
margin-top: 17px; z-index: 1;
} border-radius: 20px;
.result-graph{ margin-top: 17px;
font-size: 14px; }
margin-left: -48px;
margin-right: 3px; .result-graph {
margin-bottom: -30px; font-size: 14px;
margin-left: -48px;
margin-right: 3px;
margin-bottom: -30px;
}
.green-label{
font-size: 15px !important; }
margin-left: 7px !important;
margin-right: 42px; .green-label {
} font-size: 15px !important;
.green-label-ar{ margin-left: 7px !important;
font-size: 15px !important; margin-right: 42px;
margin-left: 7px !important; }
margin-right: 15px;
} .green-label-ar {
.blue-label{ font-size: 15px !important;
font-size: 15px !important; margin-left: 7px !important;
margin-left: 7px !important; margin-right: 15px;
margin-right: 13px; }
}
.light-label{ .blue-label {
font-size: 15px !important; font-size: 15px !important;
margin-left: 7px !important; margin-left: 7px !important;
margin-right: -26px; margin-right: 13px;
} }
.light-label-ar{
font-size: 15px !important; .light-label {
margin-right: 7px !important; font-size: 15px !important;
margin-left: -26px; margin-left: 7px !important;
} margin-right: -26px;
}
.light-dote{
background-color: #3CB9D5; .light-label-ar {
width: 12px; font-size: 15px !important;
height: 12px; margin-right: 7px !important;
border-radius: 50% !important; margin-left: -26px;
display: inline-block; }
}
.blue-dote{ .light-dote {
background-color: #3CB9D5;
background-color: #269DB8; width: 12px;
width: 12px; height: 12px;
height: 12px; border-radius: 50% !important;
border-radius: 50% !important; display: inline-block;
display: inline-block; }
}
.green-dote{ .blue-dote {
background-color: #1FA269;
width: 12px; background-color: #BE332F;
height: 12px; width: 12px;
border-radius: 50% !important; height: 12px;
display: inline-block; border-radius: 50% !important;
margin-right: -1px; display: inline-block;
} }
.col{
text-align: right; .green-dote {
} background-color: #1FA269;
width: 12px;
.gridService{ height: 12px;
border-radius: 50% !important;
/* margin-top: 87px; */ display: inline-block;
border-radius: 10px; margin-right: -1px;
/* margin-bottom: -49px; */ }
margin-left: 14px;
margin-right: 14px; .col {
text-align: right;
} }
.columns{
margin: 3px; .gridService {
margin-bottom: 13px;
background: white; /* margin-top: 87px; */
border-radius: 27px; border-radius: 10px;
padding-left: 30px; /* margin-bottom: -49px; */
padding-right: 6px; margin-left: 14px;
padding-top: 19px; margin-right: 14px;
padding-bottom: 8px;
border: 1px solid #cac8c8 !important; }
}
.columns {
margin: 3px;
.service{ margin-bottom: 13px;
font-size: 22px; background: white;
color: black; border-radius: 27px;
letter-spacing: 1px; padding-left: 30px;
font-weight: bold; padding-right: 6px;
} padding-top: 19px;
.services{ padding-bottom: 8px;
border: 1px solid #cac8c8 !important;
font-size: 12px; }
color: black;
}
.service {
.adult-dote{ font-size: 22px;
background-color: #3CB9D5; color: black;
width: 15px; letter-spacing: 1px;
height: 15px; font-weight: bold;
border-radius: 50% !important; }
display: inline-block;
margin-left: -17px; .services {
margin-right: 5px;
} font-size: 12px;
color: black;
.adult-dote-ar{ }
background-color: #3CB9D5;
width: 15px; .adult-dote {
height: 15px; background-color: #3CB9D5;
border-radius: 50% !important; width: 15px;
display: inline-block; height: 15px;
margin-right: 0px; border-radius: 50% !important;
margin-left: 5px; display: inline-block;
} margin-left: -17px;
.child-dote{ margin-right: 5px;
}
background-color: #269DB8;
width: 15px; .adult-dote-ar {
height: 15px; background-color: #3CB9D5;
border-radius: 50% !important; width: 15px;
display: inline-block; height: 15px;
margin-left: -17px; border-radius: 50% !important;
margin-right: 5px; display: inline-block;
} margin-right: 0px;
.child-dote-ar{ margin-left: 5px;
background-color: #269DB8; }
width: 15px;
height: 15px; .child-dote {
border-radius: 50% !important;
display: inline-block; background-color: #BE332F;
margin-right: 1px; width: 15px;
margin-left: 5px; height: 15px;
} border-radius: 50% !important;
.infants-dote{ display: inline-block;
background-color: #1FA269; margin-left: -17px;
width: 15px; margin-right: 5px;
height: 15px; }
border-radius: 50% !important;
display: inline-block; .child-dote-ar {
margin-left: -17px; background-color: #BE332F;
margin-right: 5px; width: 15px;
// margin-bottom: 6px; height: 15px;
} border-radius: 50% !important;
display: inline-block;
.infants-dote-ar{ margin-right: 1px;
background-color: #1FA269; margin-left: 5px;
width: 15px; }
height: 15px;
border-radius: 50% !important; .infants-dote {
display: inline-block; background-color: #1FA269;
margin-right: 1px; width: 15px;
margin-left: 5px; height: 15px;
} border-radius: 50% !important;
.addEitOkButton{ display: inline-block;
white-space: normal !important; margin-left: -17px;
text-transform: capitalize !important; margin-right: 5px;
min-height: 45px !important; // margin-bottom: 6px;
min-width: 5px !important; }
margin: 8px !important;
background-color: #269DB8; .infants-dote-ar {
width: 80% !important; background-color: #1FA269;
color: white!important; width: 15px;
border-radius: 16px !important; height: 15px;
} border-radius: 50% !important;
display: inline-block;
margin-right: 1px;
margin-left: 5px;
}
.addEitOkButton {
white-space: normal !important;
text-transform: capitalize !important;
min-height: 45px !important;
min-width: 5px !important;
margin: 8px !important;
background-color: #BE332F;
width: 80% !important;
color: white !important;
border-radius: 16px !important;
}

@ -1,263 +1,273 @@
.footer-button { .footer-button {
border-radius: 2px; border-radius: 2px;
padding: 0 1.1em; padding: 0 1.1em;
min-height: 45px; min-height: 45px;
min-width: 200px; min-width: 200px;
} }
.imgSize { .imgSize {
width: 22px; width: 22px;
height: 22px; height: 22px;
} }
.Header { .Header {
font-weight: bold; font-weight: bold;
color: #1a586d !important; color: #c6903e !important;
font-size: 10px; font-size: 10px;
} }
.tbData { .tbData {
font-size: 10px; font-size: 10px;
} }
.btnBack { .btnBack {
background: transparent; background: transparent;
float: right; float: right;
} }
.attachmentDiv{ .attachmentDiv {
background: #ffffff; background: #ffffff;
height: auto; height: auto;
text-align: center; text-align: center;
padding-top: 1px; padding-top: 1px;
margin: 10px; margin: 10px;
border-radius: 15px; border-radius: 15px;
border: 1px solid grey; border: 1px solid grey;
} }
.noDataDiv{ .noDataDiv {
background: #ffffff; background: #ffffff;
height: 11%; height: 11%;
text-align: center; text-align: center;
padding-top: 1px; padding-top: 1px;
border-radius: 10px; border-radius: 10px;
margin: 10px; margin: 10px;
border-radius: 5px; border-radius: 5px;
} }
.submitNote{
background: #ffffff; .submitNote {
height: 80px; background: #ffffff;
padding-top: 1px; height: 80px;
margin: 10px; padding-top: 1px;
border-radius: 15px; margin: 10px;
border: 1px solid grey; border-radius: 15px;
} border: 1px solid grey;
}
.approvalList{
--background: #f0efef; .approvalList {
height: auto; --background: #f0efef;
text-align: center; height: auto;
padding-top: 1px; text-align: center;
border-radius: 10px; padding-top: 1px;
margin: 10px; border-radius: 10px;
border-radius: 5px; margin: 10px;
} border-radius: 5px;
}
/************************New Design**********************************/
.notification-list{ /************************New Design**********************************/
background: none; .notification-list {
background: none; background: none;
border-radius: 32px; background: none;
ion-item{ border-radius: 32px;
// margin-top: 5px;
// margin-bottom: 5px; ion-item {
// margin-top: 5px;
background-color: transparent; // margin-bottom: 5px;
.item-date{
width: 100%; background-color: transparent;
font-size: 16px;
font-weight: bold; .item-date {
width: 100%;
text-align: start; font-size: 16px;
padding: 0; font-weight: bold;
margin: 0;
text-align: start;
position: absolute; padding: 0;
left: 0; margin: 0;
top: 12%;
} position: absolute;
ion-label , [item-end]{ left: 0;
top: 12%;
white-space: normal;
font-size: 14px;
padding-top: 15%;
// :root[dir="ltr"]{
// margin-left: 10px;
// }
// :root[dir="rtl"]{
// margin-right: 10px;
// }
}
} }
ion-label,
[item-end] {
white-space: normal;
font-size: 14px;
padding-top: 15%;
// :root[dir="ltr"]{
// margin-left: 10px;
// }
// :root[dir="rtl"]{
// margin-right: 10px;
// }
}
} }
}
.timeline {
position: relative; .timeline {
margin: 15px 0 0 0; position: relative;
// border-bottom: solid 1px var(--cusgray); margin: 15px 0 0 0;
} // border-bottom: solid 1px var(--cusgray);
}
.timeline:before {
.timeline:before {
content: '';
position: inherit !important; content: '';
top: 0; position: inherit !important;
bottom: 0; top: 0;
width: 4px; bottom: 0;
// background: #e4e4e4; width: 4px;
z-index: 1; // background: #e4e4e4;
left: 35px; z-index: 1;
/* margin-left: -10px; */ left: 35px;
/* z-index: 1; */ /* margin-left: -10px; */
} /* z-index: 1; */
}
.timeline .timeline-thumb {
.timeline .timeline-thumb {
border-radius: 500px;
width: 70px !important; border-radius: 500px;
z-index: 2; width: 70px !important;
position: absolute; z-index: 2;
left: 0px; position: absolute;
// :root[dir="ltr"]{ left: 0px;
// left: 37px; // :root[dir="ltr"]{
// } // left: 37px;
// :root[dir="rtl"]{ // }
// right: 37px; // :root[dir="rtl"]{
// } // right: 37px;
float: right; // }
top: 9px; float: right;
} top: 9px;
}
.timeline .timeline-thumb.timeline-icon {
height: 70px; .timeline .timeline-thumb.timeline-icon {
// text-align: center; height: 70px;
// color: white; // text-align: center;
// border: 5px solid #CBD0D3; // color: white;
// transform: scale(0.2); // border: 5px solid #CBD0D3;
} // transform: scale(0.2);
}
.timeline .timeline-item {
width: 40px; .timeline .timeline-item {
width: 40px;
}
}
.timeline .timeline-stats {
position: relative; .timeline .timeline-stats {
font-size: 12px; position: relative;
color: var(--darkgray); font-size: 12px;
color: var(--darkgray);
}
}
.empImge{
border-radius: 50%; .empImge {
width:100%; border-radius: 50%;
height: 100%; width: 100%;
border: #dedede solid 1px; height: 100%;
border: #dedede solid 1px;
}
.empImgeRep { }
border-radius: 50% !important;
width: 80px; .empImgeRep {
height: 80px; border-radius: 50% !important;
border: #dedede solid 1px; width: 80px;
} height: 80px;
border: #dedede solid 1px;
.line{ }
padding-bottom:87px;
} .line {
padding-bottom: 87px;
.attachLable{ }
position: absolute;
top: 0px; .attachLable {
z-index: 0; position: absolute;
background: #30b8c6; top: 0px;
color: #fff; z-index: 0;
border-radius: 50%; background: #30b8c6;
border: 0px; color: #fff;
width: 24px; border-radius: 50%;
height: 24px; border: 0px;
text-align: center; width: 24px;
font-size: 5px; height: 24px;
} text-align: center;
font-size: 5px;
.removeLable{ }
top: 0px;
z-index: 0; .removeLable {
background: #d8252d; top: 0px;
color: #fff; z-index: 0;
border-radius: 50%; background: #d8252d;
border: 0px; color: #fff;
width: 20px; border-radius: 50%;
height: 20px; border: 0px;
text-align: center; width: 20px;
font-size: 5px; height: 20px;
} text-align: center;
font-size: 5px;
.note-modal { }
// width: 90%;
// height: 50%; .note-modal {
// top: 20%; // width: 90%;
// left: 5%; // height: 50%;
// right: 5%; // top: 20%;
// bottom: 5%; // left: 5%;
background: rgba(0, 0, 0, 0.5) !important; // right: 5%;
padding: 30% 10% !important; // bottom: 5%;
--height: 12cm !important; background: rgba(0, 0, 0, 0.5) !important;
// --width: 80% !important; padding: 30% 10% !important;
--border-radius:20px; --height: 12cm !important;
// --width: 80% !important;
} --border-radius: 20px;
.header-toolbar-new{
--background: #269DB8; }
}
.title{ .header-toolbar-new {
margin-top: -37px; --background: #BE332F;
margin-left: 85px; }
}
.title-ar{ .title {
margin-top: -37px; margin-top: -37px;
margin-right: 101px; margin-left: 85px;
} }
.confirmEitOkButton{
white-space: normal !important; .title-ar {
text-transform: capitalize !important; margin-top: -37px;
min-height: 45px !important; margin-right: 101px;
min-width: 5px !important; }
margin: 8px !important;
background-color: #269DB8; .confirmEitOkButton {
width: 80% !important; white-space: normal !important;
color: white!important; text-transform: capitalize !important;
border-radius: 16px !important; min-height: 45px !important;
} min-width: 5px !important;
margin: 8px !important;
.approvalTitle-ar{ background-color: #BE332F;
font-weight: bold; width: 80% !important;
font-size: 16px; color: white !important;
text-align: right; border-radius: 16px !important;
}
}
.approvalTitle{ .approvalTitle-ar {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
text-align: left; text-align: right;
}
}
.approvalTitle {
font-weight: bold;
font-size: 16px;
text-align: left;
}

@ -12,7 +12,7 @@
.Header { .Header {
font-weight: bold; font-weight: bold;
color: #1a586d !important; color: #c6903e !important;
font-size: 10px; font-size: 10px;
} }
@ -25,7 +25,7 @@
float: right; float: right;
} }
.attachmentDiv{ .attachmentDiv {
background: #ffffff; background: #ffffff;
height: auto; height: auto;
text-align: center; text-align: center;
@ -35,7 +35,7 @@
border: 1px solid grey; border: 1px solid grey;
} }
.noDataDiv{ .noDataDiv {
background: #ffffff; background: #ffffff;
height: 11%; height: 11%;
text-align: center; text-align: center;
@ -44,7 +44,8 @@
margin: 10px; margin: 10px;
border-radius: 5px; border-radius: 5px;
} }
.submitNote{
.submitNote {
background: #ffffff; background: #ffffff;
height: 80px; height: 80px;
padding-top: 1px; padding-top: 1px;
@ -53,7 +54,7 @@
border: 1px solid grey; border: 1px solid grey;
} }
.approvalList{ .approvalList {
--background: #f0efef; --background: #f0efef;
height: auto; height: auto;
text-align: center; text-align: center;
@ -64,41 +65,45 @@
} }
/************************New Design**********************************/ /************************New Design**********************************/
.notification-list{ .notification-list {
background: none; background: none;
background: none; background: none;
border-radius: 32px; border-radius: 32px;
ion-item{
// margin-top: 5px; ion-item {
// margin-bottom: 5px; // margin-top: 5px;
// margin-bottom: 5px;
background-color: transparent;
.item-date{ background-color: transparent;
width: 100%;
font-size: 16px; .item-date {
font-weight: bold; width: 100%;
font-size: 16px;
text-align: start; font-weight: bold;
padding: 0;
margin: 0; text-align: start;
padding: 0;
position: absolute; margin: 0;
left: 0;
top: 12%; position: absolute;
} left: 0;
ion-label , [item-end]{ top: 12%;
}
white-space: normal;
font-size: 14px; ion-label,
padding-top: 15%; [item-end] {
// :root[dir="ltr"]{
// margin-left: 10px; white-space: normal;
// } font-size: 14px;
// :root[dir="rtl"]{ padding-top: 15%;
// margin-right: 10px; // :root[dir="ltr"]{
// } // margin-left: 10px;
// }
} // :root[dir="rtl"]{
// margin-right: 10px;
// }
}
} }
} }
@ -109,13 +114,13 @@
.timeline { .timeline {
position: relative; position: relative;
margin: 15px 0 0 0; margin: 15px 0 0 0;
// border-bottom: solid 1px var(--cusgray); // border-bottom: solid 1px var(--cusgray);
} }
.timeline:before { .timeline:before {
content: ''; content: '';
position: inherit !important; position: inherit !important;
top: 0; top: 0;
@ -129,7 +134,7 @@
} }
.timeline .timeline-thumb { .timeline .timeline-thumb {
border-radius: 500px; border-radius: 500px;
width: 70px !important; width: 70px !important;
z-index: 2; z-index: 2;
@ -146,7 +151,7 @@
} }
.timeline .timeline-thumb.timeline-icon { .timeline .timeline-thumb.timeline-icon {
height: 70px; height: 70px;
// text-align: center; // text-align: center;
// color: white; // color: white;
// border: 5px solid #CBD0D3; // border: 5px solid #CBD0D3;
@ -161,19 +166,20 @@
} }
.timeline .timeline-stats { .timeline .timeline-stats {
position: relative; position: relative;
font-size: 12px; font-size: 12px;
color: var(--darkgray); color: var(--darkgray);
} }
.empImge{ .empImge {
border-radius: 50%; border-radius: 50%;
width:100%; width: 100%;
height: 100%; height: 100%;
border: #dedede solid 1px; border: #dedede solid 1px;
} }
.empImgeRep { .empImgeRep {
border-radius: 50% !important; border-radius: 50% !important;
width: 80px; width: 80px;
@ -181,25 +187,25 @@
border: #dedede solid 1px; border: #dedede solid 1px;
} }
.line{ .line {
padding-bottom:87px; padding-bottom: 87px;
} }
.attachLable{ .attachLable {
position: absolute; position: absolute;
top: 0px; top: 0px;
z-index: 0; z-index: 0;
background: #30b8c6; background: #30b8c6;
color: #fff; color: #fff;
border-radius: 50%; border-radius: 50%;
border: 0px; border: 0px;
width: 24px; width: 24px;
height: 24px; height: 24px;
text-align: center; text-align: center;
font-size: 5px; font-size: 5px;
} }
.removeLable{ .removeLable {
top: 0px; top: 0px;
z-index: 0; z-index: 0;
background: #d8252d; background: #d8252d;
@ -223,40 +229,45 @@
padding: 30% 10% !important; padding: 30% 10% !important;
--height: 12cm !important; --height: 12cm !important;
// --width: 80% !important; // --width: 80% !important;
--border-radius:20px; --border-radius: 20px;
} }
.header-toolbar-new{
--background: #269DB8; .header-toolbar-new {
--background: #BE332F;
} }
.title{
.title {
margin-top: -37px; margin-top: -37px;
margin-left: 85px; margin-left: 85px;
} }
.title-ar{
.title-ar {
margin-top: -37px; margin-top: -37px;
margin-right: 101px; margin-right: 101px;
} }
.confirmEitOkButton{
.confirmEitOkButton {
white-space: normal !important; white-space: normal !important;
text-transform: capitalize !important; text-transform: capitalize !important;
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
background-color: #269DB8; background-color: #BE332F;
width: 80% !important; width: 80% !important;
color: white!important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
} }
.approvalTitle-ar{ .approvalTitle-ar {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
text-align: right; text-align: right;
} }
.approvalTitle{
.approvalTitle {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
text-align: left; text-align: left;
} }

@ -223,7 +223,7 @@
<ion-row *ngIf="item.DISPLAY_FLAG != 'N' " class=""> <ion-row *ngIf="item.DISPLAY_FLAG != 'N' " class="">
<ion-col class="" *ngIf="item.SEGMENT_PROMPT!=''"> <ion-col class="" *ngIf="item.SEGMENT_PROMPT!=''">
<label style="color:#269DB8;font-weight: bold;" class="label" for="">{{item.SEGMENT_PROMPT}} </label> <label style="color:#BE332F;font-weight: bold;" class="label" for="">{{item.SEGMENT_PROMPT}} </label>
<br> <br>
<label class="label" style="color:black;" for="">{{item.SEGMENT_VALUE_DSP}} </label> <label class="label" style="color:black;" for="">{{item.SEGMENT_VALUE_DSP}} </label>
<br> <br>

@ -5,7 +5,7 @@
min-width: 200px; min-width: 200px;
} }
.datetime{ .datetime {
// text-align: center; // text-align: center;
// font-family: WorkSans-Bold; // font-family: WorkSans-Bold;
// margin-left: 111px; // margin-left: 111px;
@ -14,8 +14,9 @@
margin-left: 47px; margin-left: 47px;
margin-top: -19px; margin-top: -19px;
} }
.iconCalendar{
.iconCalendar {
// margin-left: -241px; // margin-left: -241px;
// margin-top: 5px; // margin-top: 5px;
margin-left: 30px !important; margin-left: 30px !important;
@ -23,13 +24,15 @@
height: 26px !important; height: 26px !important;
margin-top: -69px !important; margin-top: -69px !important;
margin-bottom: 20px !important; margin-bottom: 20px !important;
} }
h4 { h4 {
font-size: 2.2rem; font-size: 2.2rem;
text-align: center; text-align: center;
color: #000000; color: #000000;
} }
.grids{
.grids {
border-radius: 20px !important; border-radius: 20px !important;
background: white; background: white;
padding-left: 1px; padding-left: 1px;
@ -40,9 +43,9 @@ h4 {
padding-left: 13px; padding-left: 13px;
padding-right: 13px; padding-right: 13px;
border: 1px solid #cac8c8; border: 1px solid #cac8c8;
} }
.bgcolor { .bgcolor {
color: white; color: white;
border-top-right-radius: 19px; border-top-right-radius: 19px;
@ -52,24 +55,25 @@ h4 {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
/* border-radius: 12px !important; */ /* border-radius: 12px !important; */
background: #269DB8; background: #BE332F;
border-bottom: 1px solid #a7a4a4; border-bottom: 1px solid #a7a4a4;
border-top: 1px solid #cac8c8; border-top: 1px solid #cac8c8;
margin-left: -13px; margin-left: -13px;
margin-right: -13px; margin-right: -13px;
} }
.colEit{
.colEit {
border-right: 1px solid #cac8c8; border-right: 1px solid #cac8c8;
border-bottom-left-radius: -10px !important; border-bottom-left-radius: -10px !important;
padding-top: 8px; padding-top: 8px;
padding-bottom: 8px; padding-bottom: 8px;
margin-left: 18px; margin-left: 18px;
font-size: 12px !important; font-size: 12px !important;
} }
.header-div { .header-div {
background-color: #269DB8; background-color: #BE332F;
text-transform: capitalize; text-transform: capitalize;
height: 160px; height: 160px;
// position: relative; // position: relative;
@ -77,74 +81,76 @@ h4 {
margin-bottom: -28px; margin-bottom: -28px;
} }
.header-toolbar-new{ .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.addClass{ .addClass {
background-color: #269DB8; background-color: #BE332F;
width: 80px; width: 80px;
height: 80px; height: 80px;
right: 8%; right: 8%;
position: fixed; position: fixed;
color: white; color: white;
bottom: 5%; bottom: 5%;
border-radius: 50%; border-radius: 50%;
z-index: 999; z-index: 999;
-webkit-box-shadow: 2px -1px 13px 0px rgba(0,0,0,0.59); -webkit-box-shadow: 2px -1px 13px 0px rgba(0, 0, 0, 0.59);
-moz-box-shadow: 2px -1px 13px 0px rgba(0,0,0,0.59); -moz-box-shadow: 2px -1px 13px 0px rgba(0, 0, 0, 0.59);
box-shadow: 2px -1px 13px 0px rgba(0,0,0,0.59); box-shadow: 2px -1px 13px 0px rgba(0, 0, 0, 0.59);
} }
.contentEit:before { .contentEit:before {
position: absolute; position: absolute;
content: ""; content: "";
// background: #269DB8; // background: #BE332F;
height: 140px; height: 140px;
width: 100%; width: 100%;
left: 0; left: 0;
top: 0px; top: 0px;
z-index: 1; z-index: 1;
} }
.hrClass{ .hrClass {
border-width: 0; border-width: 0;
box-sizing: content-box; box-sizing: content-box;
border-bottom: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;
background: #fff !important; background: #fff !important;
height: 1px; height: 1px;
} }
//////////////////////////////// ////////////////////////////////
.content:before { .content:before {
position: absolute; position: absolute;
content: ""; content: "";
background: #269DB8; background: #BE332F;
height: 140px; height: 140px;
width: 100%; width: 100%;
left: 0; left: 0;
top: 0px; top: 0px;
z-index: 1; z-index: 1;
} }
.colorBG{ .colorBG {
--background: #f0efef; --background: #f0efef;
} }
.Title{ .Title {
text-align: center; text-align: center;
color: white; color: white;
margin-top: -33px; margin-top: -33px;
font-size: 17px; font-size: 17px;
} }
.title{
.title {
text-align: center; text-align: center;
color: black; color: black;
margin-top: 5px; margin-top: 5px;
font-size: 17px; font-size: 17px;
} }
.today-graph{
.today-graph {
display: block !important; display: block !important;
height: 196px; height: 196px;
width: 365px; width: 365px;
@ -152,183 +158,195 @@ z-index: 1;
margin-left: 28px !important; margin-left: 28px !important;
} }
.headerGrid{ .headerGrid {
// background-color: white !important; // background-color: white !important;
// border: 1px solid #cac8c8 !important; // border: 1px solid #cac8c8 !important;
// border-radius: 20px !important; // border-radius: 20px !important;
// padding-top: 28px; // padding-top: 28px;
// padding-bottom: 53px; // padding-bottom: 53px;
// margin-left: 9px; // margin-left: 9px;
// margin-right: 13px; // margin-right: 13px;
// margin-top: -94px; // margin-top: -94px;
// margin-bottom: 10px; // margin-bottom: 10px;
background-color: white !important; background-color: white !important;
border: 1px solid #cac8c8 !important; border: 1px solid #cac8c8 !important;
/* padding-top: 28px; */ /* padding-top: 28px; */
padding-bottom: 53px; padding-bottom: 53px;
padding-top: -30px; padding-top: -30px;
margin-left: 13px; margin-left: 13px;
margin-right: 13px; margin-right: 13px;
/* margin-top: -86px; */ /* margin-top: -86px; */
margin-bottom: 10px; margin-bottom: 10px;
position: relative; position: relative;
z-index: 1; z-index: 1;
border-radius: 20px; border-radius: 20px;
margin-top: 17px; margin-top: 17px;
} }
.result-graph{
font-size: 14px; .result-graph {
margin-left: -48px; font-size: 14px;
margin-right: 3px; margin-left: -48px;
margin-bottom: -30px; margin-right: 3px;
margin-bottom: -30px;
}
}
.green-label{
font-size: 15px !important; .green-label {
margin-left: 7px !important; font-size: 15px !important;
margin-right: 42px; margin-left: 7px !important;
} margin-right: 42px;
.green-label-ar{ }
font-size: 15px !important;
margin-left: 7px !important; .green-label-ar {
margin-right: 15px; font-size: 15px !important;
} margin-left: 7px !important;
.blue-label{ margin-right: 15px;
font-size: 15px !important; }
margin-left: 7px !important;
margin-right: 13px; .blue-label {
} font-size: 15px !important;
.light-label{ margin-left: 7px !important;
font-size: 15px !important; margin-right: 13px;
margin-left: 7px !important; }
margin-right: -26px;
} .light-label {
.light-label-ar{ font-size: 15px !important;
font-size: 15px !important; margin-left: 7px !important;
margin-right: 7px !important; margin-right: -26px;
margin-left: -26px; }
}
.light-label-ar {
.light-dote{ font-size: 15px !important;
background-color: #3CB9D5; margin-right: 7px !important;
width: 12px; margin-left: -26px;
height: 12px; }
border-radius: 50% !important;
display: inline-block; .light-dote {
} background-color: #3CB9D5;
.blue-dote{ width: 12px;
height: 12px;
background-color: #269DB8; border-radius: 50% !important;
width: 12px; display: inline-block;
height: 12px; }
border-radius: 50% !important;
display: inline-block; .blue-dote {
}
.green-dote{ background-color: #BE332F;
background-color: #1FA269; width: 12px;
width: 12px; height: 12px;
height: 12px; border-radius: 50% !important;
border-radius: 50% !important; display: inline-block;
display: inline-block; }
margin-right: -1px;
} .green-dote {
.col{ background-color: #1FA269;
text-align: right; width: 12px;
} height: 12px;
border-radius: 50% !important;
.gridService{ display: inline-block;
margin-right: -1px;
/* margin-top: 87px; */ }
border-radius: 10px;
/* margin-bottom: -49px; */ .col {
margin-left: 14px; text-align: right;
margin-right: 14px; }
} .gridService {
.columns{
margin: 3px; /* margin-top: 87px; */
margin-bottom: 13px; border-radius: 10px;
background: white; /* margin-bottom: -49px; */
border-radius: 27px; margin-left: 14px;
padding-left: 30px; margin-right: 14px;
padding-right: 6px;
padding-top: 19px; }
padding-bottom: 8px;
border: 1px solid #cac8c8 !important; .columns {
} margin: 3px;
margin-bottom: 13px;
background: white;
.service{ border-radius: 27px;
font-size: 22px; padding-left: 30px;
color: black; padding-right: 6px;
letter-spacing: 1px; padding-top: 19px;
font-weight: bold; padding-bottom: 8px;
} border: 1px solid #cac8c8 !important;
.services{ }
font-size: 12px;
color: black; .service {
} font-size: 22px;
color: black;
.adult-dote{ letter-spacing: 1px;
background-color: #3CB9D5; font-weight: bold;
width: 15px; }
height: 15px;
border-radius: 50% !important; .services {
display: inline-block;
margin-left: -17px; font-size: 12px;
margin-right: 5px; color: black;
} }
.adult-dote-ar{ .adult-dote {
background-color: #3CB9D5; background-color: #3CB9D5;
width: 15px; width: 15px;
height: 15px; height: 15px;
border-radius: 50% !important; border-radius: 50% !important;
display: inline-block; display: inline-block;
margin-right: 0px; margin-left: -17px;
margin-left: 5px; margin-right: 5px;
} }
.child-dote{
.adult-dote-ar {
background-color: #269DB8; background-color: #3CB9D5;
width: 15px; width: 15px;
height: 15px; height: 15px;
border-radius: 50% !important; border-radius: 50% !important;
display: inline-block; display: inline-block;
margin-left: -17px; margin-right: 0px;
margin-right: 5px; margin-left: 5px;
} }
.child-dote-ar{
background-color: #269DB8; .child-dote {
width: 15px;
height: 15px; background-color: #BE332F;
border-radius: 50% !important; width: 15px;
display: inline-block; height: 15px;
margin-right: 1px; border-radius: 50% !important;
margin-left: 5px; display: inline-block;
} margin-left: -17px;
.infants-dote{ margin-right: 5px;
background-color: #1FA269; }
width: 15px;
height: 15px; .child-dote-ar {
border-radius: 50% !important; background-color: #BE332F;
display: inline-block; width: 15px;
margin-left: -17px; height: 15px;
margin-right: 5px; border-radius: 50% !important;
// margin-bottom: 6px; display: inline-block;
} margin-right: 1px;
margin-left: 5px;
.infants-dote-ar{ }
background-color: #1FA269;
width: 15px; .infants-dote {
height: 15px; background-color: #1FA269;
border-radius: 50% !important; width: 15px;
display: inline-block; height: 15px;
margin-right: 1px; border-radius: 50% !important;
margin-left: 5px; display: inline-block;
} margin-left: -17px;
margin-right: 5px;
// margin-bottom: 6px;
}
.infants-dote-ar {
background-color: #1FA269;
width: 15px;
height: 15px;
border-radius: 50% !important;
display: inline-block;
margin-right: 1px;
margin-left: 5px;
}

@ -21,7 +21,7 @@ import { AuthenticatedUser } from 'src/app/hmg-common/services/authentication/mo
export class EitListComponent implements OnInit { export class EitListComponent implements OnInit {
Sdate: any; Sdate: any;
emp_no: any; emp_no: any;
balance:any; balance: any;
//////////////up //////////////up
P_PAGE_NUM: number; P_PAGE_NUM: number;
P_PAGE_LIMIT: number; P_PAGE_LIMIT: number;
@ -53,17 +53,18 @@ export class EitListComponent implements OnInit {
public options = { public options = {
cutoutPercentage: 80, cutoutPercentage: 80,
tooltips: { enabled: false }, tooltips: { enabled: false },
legend: { display: false }}; legend: { display: false }
gaugeType = 'full'; };
gaugeType = 'full';
accrualBalancesList: any; accrualBalancesList: any;
common: any; common: any;
direction: string; direction: string;
// gaugeValue = 11.200; // gaugeValue = 11.200;
// gaugeLabel = ""; // gaugeLabel = "";
// tslint:disable-next-line: max-line-length // tslint:disable-next-line: max-line-length
constructor(private cs: CommonService, private EITService: EitService, public ts: TranslatorService, constructor(private cs: CommonService, private EITService: EitService, public ts: TranslatorService,
private modalCtrl: ModalController, public accrualService: AccrualService, public authService:AuthenticationService,) { private modalCtrl: ModalController, public accrualService: AccrualService, public authService: AuthenticationService,) {
this.direction = TranslatorService.getCurrentLanguageName(); this.direction = TranslatorService.getCurrentLanguageName();
this.selMenu = this.cs.sharedService.getSharedData(MenuResponse.SHARED_DATA, false); this.selMenu = this.cs.sharedService.getSharedData(MenuResponse.SHARED_DATA, false);
this.selEmp = this.cs.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false); this.selEmp = this.cs.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false);
@ -86,35 +87,36 @@ export class EitListComponent implements OnInit {
this.getEITTransactions(); this.getEITTransactions();
this.accrualBalancesList = this.cs.sharedService.getSharedData('tickitsbalance', false); this.accrualBalancesList = this.cs.sharedService.getSharedData('tickitsbalance', false);
// accrualNetInfants // accrualNetInfants
// accrualUNetChild // accrualUNetChild
// accrualNetAdult // accrualNetAdult
if(this.accrualBalancesList){ if (this.accrualBalancesList) {
this.accrualNetAdult = this.accrualBalancesList[1].ACCRUAL_NET_ENTITLEMENT; this.accrualNetAdult = this.accrualBalancesList[1].ACCRUAL_NET_ENTITLEMENT;
this.accrualUNetChild = this.accrualBalancesList[2].ACCRUAL_NET_ENTITLEMENT; this.accrualUNetChild = this.accrualBalancesList[2].ACCRUAL_NET_ENTITLEMENT;
this. accrualNetInfants = this.accrualBalancesList[3].ACCRUAL_NET_ENTITLEMENT; this.accrualNetInfants = this.accrualBalancesList[3].ACCRUAL_NET_ENTITLEMENT;
} }
this.data = { this.data = {
// labels: ['earingTotal', 'deductionTotal'], // labels: ['earingTotal', 'deductionTotal'],
datasets: [ datasets: [
{ data: [this.accrualNetInfants, this.accrualUNetChild, this.accrualNetAdult], {
backgroundColor: [ data: [this.accrualNetInfants, this.accrualUNetChild, this.accrualNetAdult],
'#1FA269', backgroundColor: [
'#269DB8', '#1FA269',
'#3CB9D5', ], '#BE332F',
borderWidth: 2 '#3CB9D5',],
} borderWidth: 2
] }
}; ]
};
} }
getUserDetails(){ getUserDetails() {
this.authService.loadAuthenticatedUser().subscribe((user: AuthenticatedUser) => { this.authService.loadAuthenticatedUser().subscribe((user: AuthenticatedUser) => {
if (user) { if (user) {
// this.emp_no=user.EMPLOYEE_NUMBER; // this.emp_no=user.EMPLOYEE_NUMBER;
} }
}); });
} }
public getAccrualBalance() { public getAccrualBalance() {
if (this.Sdate) { if (this.Sdate) {
@ -137,11 +139,11 @@ export class EitListComponent implements OnInit {
} }
handleAccrualResult(result) { handleAccrualResult(result) {
if (this.cs.validResponse(result)) { if (this.cs.validResponse(result)) {
this.balance=result.GetAccrualBalancesList; this.balance = result.GetAccrualBalancesList;
this.accrualNetAdult = this.balance[1].ACCRUAL_NET_ENTITLEMENT; this.accrualNetAdult = this.balance[1].ACCRUAL_NET_ENTITLEMENT;
this.accrualUNetChild = this.balance[2].ACCRUAL_NET_ENTITLEMENT; this.accrualUNetChild = this.balance[2].ACCRUAL_NET_ENTITLEMENT;
this. accrualNetInfants = this.balance[3].ACCRUAL_NET_ENTITLEMENT; this.accrualNetInfants = this.balance[3].ACCRUAL_NET_ENTITLEMENT;
} }
} }
/////////////////////////////////// ///////////////////////////////////
@ -190,7 +192,7 @@ export class EitListComponent implements OnInit {
this.EITTransactionsListObj.P_PAGE_NUM = this.P_PAGE_NUM; this.EITTransactionsListObj.P_PAGE_NUM = this.P_PAGE_NUM;
result.GetEITTransactionList.forEach(vr => { result.GetEITTransactionList.forEach(vr => {
console.log(vr.length); console.log(vr.length);
if(vr.length && vr.length != 0){ if (vr.length && vr.length != 0) {
if (vr.Collection_Transaction[0].ROW_NUM == vr.Collection_Transaction[0].NO_OF_ROWS) { if (vr.Collection_Transaction[0].ROW_NUM == vr.Collection_Transaction[0].NO_OF_ROWS) {
this.IsReachEnd = true; this.IsReachEnd = true;
} else { } else {
@ -379,7 +381,7 @@ export class EitListComponent implements OnInit {
} }
else if (item.APPLICATION_COLUMN_NAME == 'PEI_EXTRA_INFO_ID') { else if (item.APPLICATION_COLUMN_NAME == 'PEI_EXTRA_INFO_ID') {
obj.peiExtraInfoID = item.NUMBER_VALUE; obj.peiExtraInfoID = item.NUMBER_VALUE;
} }
} }
}// end for }// end for
@ -568,40 +570,40 @@ export class EitListComponent implements OnInit {
this.removeItems(item.Collection_Transaction[0].TRANSACTION_NUMBER); this.removeItems(item.Collection_Transaction[0].TRANSACTION_NUMBER);
} }
////////////////////////// //////////////////////////
// getUserDetails(){ // getUserDetails(){
// this.authService.loadAuthenticatedUser().subscribe((user: AuthenticatedUser) => { // this.authService.loadAuthenticatedUser().subscribe((user: AuthenticatedUser) => {
// if (user) { // if (user) {
// this.emp_no=user.EMPLOYEE_NUMBER; // this.emp_no=user.EMPLOYEE_NUMBER;
// } // }
// }); // });
// } // }
// public getAccrualBalance() { // public getAccrualBalance() {
// if (this.Sdate) { // if (this.Sdate) {
// let today = new Date(this.Sdate); // let today = new Date(this.Sdate);
// let day = today.getDate(); // let day = today.getDate();
// let month = today.getMonth() + 1; // let month = today.getMonth() + 1;
// let year = today.getFullYear(); // let year = today.getFullYear();
// let todayDate = month + '/' + day + '/' + year; // let todayDate = month + '/' + day + '/' + year;
// let effectiveDate = todayDate; // let effectiveDate = todayDate;
// const request = { // const request = {
// P_SELECTED_EMPLOYEE_NUMBER: this.emp_no, // P_SELECTED_EMPLOYEE_NUMBER: this.emp_no,
// P_EFFECTIVE_DATE: effectiveDate // P_EFFECTIVE_DATE: effectiveDate
// }; // };
// this.accrualService // this.accrualService
// .getAccrualBalances(request) // .getAccrualBalances(request)
// .subscribe((result: any) => { // .subscribe((result: any) => {
// this.handleAccrualResult(result); // this.handleAccrualResult(result);
// }); // });
// } // }
// } // }
// handleAccrualResult(result) { // handleAccrualResult(result) {
// if (this.cs.validResponse(result)) { // if (this.cs.validResponse(result)) {
// this.balance=result.GetAccrualBalancesList; // this.balance=result.GetAccrualBalancesList;
// } // }
// } // }
} }
////////////////////////////////up ////////////////////////////////up

@ -29,7 +29,7 @@
<div *ngFor="let notificationBody of item.Collection_Notification "> <div *ngFor="let notificationBody of item.Collection_Notification ">
<ion-row *ngIf=" notificationBody.DISPLAY_FLAG != 'N' "> <ion-row *ngIf=" notificationBody.DISPLAY_FLAG != 'N' ">
<ion-col class="colBold"> <ion-col class="colBold">
<label style="color:#269DB8;font-weight: bold;" class="label" for="">{{notificationBody.SEGMENT_PROMPT}}</label> <label style="color:#BE332F;font-weight: bold;" class="label" for="">{{notificationBody.SEGMENT_PROMPT}}</label>
<!-- </ion-col> <!-- </ion-col>
<ion-col class="colBold"> --> <ion-col class="colBold"> -->
<br> <br>

@ -1,17 +1,17 @@
.addEitOkButton{ .addEitOkButton {
white-space: normal !important; white-space: normal !important;
text-transform: capitalize !important; text-transform: capitalize !important;
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
background-color: #269DB8; background-color: #BE332F;
width: 80% !important; width: 80% !important;
color: white!important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
} }
.editIconDiv{ .editIconDiv {
right: 10px; right: 10px;
position: absolute; position: absolute;
top: 10px; top: 10px;
} }

@ -12,8 +12,8 @@ ion-item.custCollabs.item.item-block.item-ios {
border-bottom: 1px solid #c8c8c8; border-bottom: 1px solid #c8c8c8;
} }
.header-toolbar-new{ .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
ion-item.item.item-block { ion-item.item.item-block {
@ -25,6 +25,7 @@ ion-item.item.item-block {
ion-item.childItem.item.item-block { ion-item.childItem.item.item-block {
padding: 0px 5px; padding: 0px 5px;
width: 100%; width: 100%;
ion-label.label.label-md, ion-label.label.label-md,
ion-label.label.label-ios { ion-label.label.label-ios {
-webkit-box-shadow: none; -webkit-box-shadow: none;
@ -46,9 +47,11 @@ ion-item.item.item-block {
padding: 0px 10px; padding: 0px 10px;
min-height: 40px; min-height: 40px;
} }
div.notSelected { div.notSelected {
padding: 0px 10px; padding: 0px 10px;
} }
// ion-label.label.label-md, // ion-label.label.label-md,
// ion-label.label.label-ios { // ion-label.label.label-ios {
} }
@ -56,40 +59,43 @@ ion-item.item.item-block {
ion-icon::before { ion-icon::before {
line-height: 2; line-height: 2;
} }
.arrow-down{
.arrow-down {
position: absolute; position: absolute;
top: 0; top: 0;
right:0; right: 0;
} }
// .list-md > .item-block:last-child .item-inner, // .list-md > .item-block:last-child .item-inner,
// .list-ios > .item-block:last-child .item-inner{ // .list-ios > .item-block:last-child .item-inner{
// border-bottom: 1px solid #dedede; // border-bottom: 1px solid #dedede;
// } // }
.span-arrow-en{ .span-arrow-en {
float: right; float: right;
font-size: 25px; font-size: 25px;
color: grey; color: grey;
transform: rotate(0deg); transform: rotate(0deg);
} }
.span-arrow-ar{ .span-arrow-ar {
float: left; float: left;
font-size: 25px; font-size: 25px;
color: grey; color: grey;
transform: rotate(180deg); transform: rotate(180deg);
} }
.arrow-forward{ .arrow-forward {
float: right; float: right;
font-size: 25px; font-size: 25px;
color: grey; color: grey;
} }
.arrow-forward-ar{
.arrow-forward-ar {
float: left; float: left;
font-size: 25px; font-size: 25px;
color: grey; color: grey;
-webkit-transform: rotate(180deg); -webkit-transform: rotate(180deg);
transform: rotate(180deg); transform: rotate(180deg);
} }

@ -1,53 +1,52 @@
.rowBtn{ .rowBtn {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.Header{ .Header {
color: black !important; color: black !important;
font-size: 25px !important; font-size: 25px !important;
font-weight: bold !important;; font-weight: bold !important;
;
margin: 0; margin: 0;
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
.labelRadio{ .labelRadio {
color: black !important; color: black !important;
font-weight: bold !important; font-weight: bold !important;
padding-bottom: 20px; padding-bottom: 20px;
} }
.labelcheck{ .labelcheck {
color: red !important; color: red !important;
font-weight: bold !important; font-weight: bold !important;
margin-bottom: 10px; margin-bottom: 10px;
} }
.submitOkButton{ .submitOkButton {
white-space: normal !important; white-space: normal !important;
text-transform: capitalize !important; text-transform: capitalize !important;
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
--background:: #269DB8; --background: #BE332F;
width: 100% !important; width: 100% !important;
color: white!important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
} }
.submitCancelButton{
.submitCancelButton {
white-space: normal !important; white-space: normal !important;
text-transform: capitalize !important; text-transform: capitalize !important;
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
--background:: #269DB8; --background: #BE332F;
width: 100% !important; width: 100% !important;
color: white!important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
} }

@ -27,16 +27,16 @@ export class ConnectorService {
public static retryTimes = 0; public static retryTimes = 0;
public static timeOut = 180 * 1000; public static timeOut = 180 * 1000;
// public static host = 'https://uat.hmgwebservices.com/'; public static host = 'https://uat.hmgwebservices.com/';
// public static host = 'https://hmgwebservices.com/'; // public static host = 'https://hmgwebservices.com/';
// public static host = 'http://riyt-mohemm1:1010/' //MOE // public static host = 'http://riyt-mohemm1:1010/' //MOE
public static host = 'http://riyt-mohemm1.mopm.gov.sa:1010/' // public static host = 'http://riyt-mohemm1.mopm.gov.sa:1010/'
// public static host = 'http://mohemm-app-test.srca.org.sa:1010/' // public static host = 'http://mohemm-app-test.srca.org.sa:1010/'
// public static host = 'http://10.254.212.41:1010/' // public static host = 'http://10.254.212.41:1010/'
constructor(public httpClient: HttpClient, constructor(public httpClient: HttpClient,
public cs: CommonService, public cs: CommonService,
private events: Events, private events: Events,

@ -2,5 +2,5 @@
<div class="main-container" [ngStyle]="active === true ? {'color': color} : {}"> <div class="main-container" [ngStyle]="active === true ? {'color': color} : {}">
<div class="main-container-radius" [ngStyle]="active === true ? {'color': '#ffffff'} : {'color': color}"></div> <div class="main-container-radius" [ngStyle]="active === true ? {'color': '#ffffff'} : {'color': color}"></div>
<span class="text-span" [ngStyle]="active === true ? {'color': '#269DB8'} : {}">{{text}}</span> <span class="text-span" [ngStyle]="active === true ? {'color': '#BE332F'} : {}">{{text}}</span>
</div> </div>

@ -1,111 +1,114 @@
.chart-modal .modal-Wrapper { .chart-modal .modal-Wrapper {
--background: rgb(116, 108, 108) !important; --background: rgb(116, 108, 108) !important;
--border-color:white!important ; --border-color: white !important;
width: 85%!important ; width: 85% !important;
height: 40px !important ; height: 40px !important;
} }
.navbar{ .navbar {
font-size: 10px !important; font-size: 10px !important;
--background: #269DB8 !important; --background: #BE332F !important;
color: aliceblue !important; color: aliceblue !important;
} }
.menu { .menu {
margin-top: 0px !important; margin-top: 0px !important;
font-size: 35px !important; font-size: 35px !important;
background: #269DB8; background: #BE332F;
color: aliceblue; color: aliceblue;
margin-left: 0px !important; margin-left: 0px !important;
} }
.person{ .person {
margin-left:100px !important; margin-left: 100px !important;
margin-top: 0px !important; margin-top: 0px !important;
font-size: 23px !important; font-size: 23px !important;
background: #269DB8 !important; background: #BE332F !important;
color: aliceblue !important; color: aliceblue !important;
} }
.grid{ .grid {
margin-bottom: 550px !important; margin-bottom: 550px !important;
margin-top: 20px !important; margin-top: 20px !important;
margin-left: 15px !important; margin-left: 15px !important;
margin-right: 15px !important; margin-right: 15px !important;
background-color:white !important; background-color: white !important;
border-radius: 20px !important; border-radius: 20px !important;
height: 250px !important; height: 250px !important;
} }
.ionSliders{ .ionSliders {
margin: 0px !important; margin: 0px !important;
padding: 0px !important; padding: 0px !important;
} }
.ionSlide{ .ionSlide {
margin-top: 5px !important; margin-top: 5px !important;
margin-left: 190px !important; margin-left: 190px !important;
color: black !important; color: black !important;
} }
.dateLable{
.dateLable {
margin-left: 90px !important;
color: black !important; margin-left: 90px !important;
font-size: small !important; color: black !important;
margin-top: 15px !important; font-size: small !important;
} margin-top: 15px !important;
}
// h1{ // h1{
// font-size: 15px !important; // font-size: 15px !important;
// text-align: center !important; // text-align: center !important;
// } // }
.arrowDropright{ .arrowDropright {
margin-left:100px !important; margin-left: 100px !important;
font-size: 20px !important; font-size: 20px !important;
color: rgb(168, 165, 165) !important; color: rgb(168, 165, 165) !important;
margin-top: 15px !important; margin-top: 15px !important;
} }
.arrowDropleft{
font-size: 20px !important; .arrowDropleft {
font-size: 20px !important;
margin-left: 10px !important; margin-left: 10px !important;
margin-top: 15px !important; margin-top: 15px !important;
color: rgb(116, 108, 108) !important; color: rgb(116, 108, 108) !important;
} }
.ionLable{ .ionLable {
font-size: 10px !important; font-size: 10px !important;
} }
.number{ .number {
font-size: 18px !important; font-size: 18px !important;
font-weight: bolder !important; font-weight: bolder !important;
color: black !important; color: black !important;
} }
.header-div{ .header-div {
background:var(--primary); background: var(--primary);
background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%); background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%, var(--secondary) 59%, var(--customnavy) 100%);
background: -webkit-linear-gradient(45deg, (--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%); background: -webkit-linear-gradient(45deg, (--primary) 0%, var(--secondary) 36%, var(--secondary) 59%, var(--customnavy) 100%);
background: #269DB8; background: #BE332F;
// background: linear-gradient(90deg, #85C48D 0%, #85C48D 13%, #2BB5C6 98%, #2BB5C6 100%); // background: linear-gradient(90deg, #85C48D 0%, #85C48D 13%, #2BB5C6 98%, #2BB5C6 100%);
color:var(--light); color: var(--light);
text-transform: capitalize; text-transform: capitalize;
display: block; display: block;
position: relative; position: relative;
height: 210px; height: 210px;
margin-bottom:60px; margin-bottom: 60px;
// border-radius: 0px 0px 70px 70px; // border-radius: 0px 0px 70px 70px;
} }
.advanced-search-modal { .advanced-search-modal {
--height: 12cm !important; --height: 12cm !important;
--width: 80% !important; --width: 80% !important;
--border-radius: 0.4cm; --border-radius: 0.4cm;
} }

@ -7,12 +7,14 @@
display: block; display: block;
text-align: center; text-align: center;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
h2 { h2 {
font-size: 25px; font-size: 25px;
font-weight: bold; font-weight: bold;
margin: 0 auto; margin: 0 auto;
line-height: 36px; line-height: 36px;
} }
span { span {
width: 125px; width: 125px;
display: block; display: block;
@ -61,19 +63,22 @@
color: rgb(163, 163, 163) !important; color: rgb(163, 163, 163) !important;
} }
} }
.today-graph{
.today-graph {
display: block; display: block;
height: 127px; height: 127px;
width: 270px; width: 270px;
margin-left: -60px; margin-left: -60px;
} }
.today-graph-ar{
.today-graph-ar {
display: block; display: block;
height: 127px; height: 127px;
width: 270px; width: 270px;
margin-right: -70px; margin-right: -70px;
} }
.amountlabel{
.amountlabel {
color: black !important; color: black !important;
font-weight: bold !important; font-weight: bold !important;
font-size: 13px !important; font-size: 13px !important;
@ -82,136 +87,153 @@
display: block; display: block;
text-align: center; text-align: center;
} }
.rowlabel{
color: #a3a3a3 !important;
font-size: 13px !important;
font-family: WorkSans-Bold;
display: block;
width: 100%;
text-align: center;
padding: 1px;
}
.grid{
padding-bottom: -20px !important;
padding-top: -20px !important;
height: 360px !important;
} .rowlabel {
.liftcol{ color: #a3a3a3 !important;
border-right: 1px solid rgb(163, 163, 163) !important; font-size: 13px !important;
} font-family: WorkSans-Bold;
.liftcol-ar{ display: block;
width: 100%;
border-left: 1px solid rgb(163, 163, 163) !important; text-align: center;
} padding: 1px;
}
.rightcol{ .grid {
padding-bottom: -20px !important;
padding-top: -20px !important;
height: 360px !important;
margin-left: 5px !important; }
}
.gridrow{
border-top: 1px solid rgb(163, 163, 163) !important;
margin-left: 19px;
margin-right: 12px;
}
.div{
border: 1px solid #a3a3a3 !important;
border-radius: 10px;
margin-bottom:10px;
}
.div-ar{
border: 1px solid #a3a3a3 !important;
border-radius: 9px;
width: 264%;
margin-right: -302px;
}
.p0{
margin-bottom: -13px !important;
color: black !important;
font-weight: bold !important;
font-size: 14px !important;
margin-top: 8px;
text-align: center;
display: block;
width: 100%;
}
.p1{
margin-bottom: -7px !important;
color: black !important;
font-family: WorkSans-Bold !important;
font-size: 33px;
margin-top: 10px;
text-align: center;
display: block;
width: 100%;
}
.p2{
font-weight: bold !important;
font-size: 17px !important;
margin-bottom: 43px !important;
margin-top: 0px !important;
color: black !important;
font-weight: bold !important;
text-align: center;
display: block;
width: 100%;
}
.p3{
color: black !important;
font-weight: bold !important;
font-size: 19px;
margin-top: -43px;
text-align: center;
display: block;
width: 100%;
}
.p2-ar{ font-weight: bold !important; .liftcol {
font-size: 17px !important; border-right: 1px solid rgb(163, 163, 163) !important;
margin-bottom: 43px !important; }
margin-top: 0px !important;
color: black !important;
font-weight: bold !important;
margin-right: 33px;
}
.p3-ar{ /* margin-bottom: -72px !important; */
color: black !important;
font-weight: bold !important;
font-size: 19px;
margin-top: -43px;
margin-right: 27px;
}
.p4{ margin-bottom: 56px !important;
margin-top: -26px !important;
color: black !important;
}
// .pdiv{background-color: gray;height: 26px;}
.p5{
font-size: 14px;
text-align: center;
background-color: #269DB8;
color: white;
margin-top: -13px;
margin-bottom: -3px;
height: 21px;
width: 110px;
padding-top: 7px;
padding-bottom: 21px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.slider-container { .liftcol-ar {
padding-bottom: 20px;
} border-left: 1px solid rgb(163, 163, 163) !important;
.col{ }
border-bottom: 1px solid rgb(204, 204, 204);
border-right: 1px solid rgb(204, 204, 204);
} .rightcol {
.col-ar{
border-bottom: 1px solid rgb(204, 204, 204); margin-left: 5px !important;
border-left: 1px solid rgb(204, 204, 204); }
}
.gridrow {
border-top: 1px solid rgb(163, 163, 163) !important;
margin-left: 19px;
margin-right: 12px;
}
.div {
border: 1px solid #a3a3a3 !important;
border-radius: 10px;
margin-bottom: 10px;
}
.div-ar {
border: 1px solid #a3a3a3 !important;
border-radius: 9px;
width: 264%;
margin-right: -302px;
}
.p0 {
margin-bottom: -13px !important;
color: black !important;
font-weight: bold !important;
font-size: 14px !important;
margin-top: 8px;
text-align: center;
display: block;
width: 100%;
}
.p1 {
margin-bottom: -7px !important;
color: black !important;
font-family: WorkSans-Bold !important;
font-size: 33px;
margin-top: 10px;
text-align: center;
display: block;
width: 100%;
}
.p2 {
font-weight: bold !important;
font-size: 17px !important;
margin-bottom: 43px !important;
margin-top: 0px !important;
color: black !important;
font-weight: bold !important;
text-align: center;
display: block;
width: 100%;
}
.p3 {
color: black !important;
font-weight: bold !important;
font-size: 19px;
margin-top: -43px;
text-align: center;
display: block;
width: 100%;
}
.p2-ar {
font-weight: bold !important;
font-size: 17px !important;
margin-bottom: 43px !important;
margin-top: 0px !important;
color: black !important;
font-weight: bold !important;
margin-right: 33px;
}
.p3-ar {
/* margin-bottom: -72px !important; */
color: black !important;
font-weight: bold !important;
font-size: 19px;
margin-top: -43px;
margin-right: 27px;
}
.p4 {
margin-bottom: 56px !important;
margin-top: -26px !important;
color: black !important;
}
// .pdiv{background-color: gray;height: 26px;}
.p5 {
font-size: 14px;
text-align: center;
background-color: #BE332F;
color: white;
margin-top: -13px;
margin-bottom: -3px;
height: 21px;
width: 110px;
padding-top: 7px;
padding-bottom: 21px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.slider-container {
padding-bottom: 20px;
}
.col {
border-bottom: 1px solid rgb(204, 204, 204);
border-right: 1px solid rgb(204, 204, 204);
}
.col-ar {
border-bottom: 1px solid rgb(204, 204, 204);
border-left: 1px solid rgb(204, 204, 204);
}

@ -54,16 +54,16 @@ export class DateInfoModalComponent implements OnInit {
public navParams: NavParams, public navParams: NavParams,
public ts: TranslatorService, public ts: TranslatorService,
public common: CommonService public common: CommonService
) { ) {
this.direction = TranslatorService.getCurrentDirection(); this.direction = TranslatorService.getCurrentDirection();
} }
ngOnInit() { ngOnInit() {
console.log(this.TODAYDATE); console.log(this.TODAYDATE);
this.excess = this.TODAYDATE.EXCESS_HRS; this.excess = this.TODAYDATE.EXCESS_HRS;
this.lateIn = this.TODAYDATE.LATE_IN_HRS; this.lateIn = this.TODAYDATE.LATE_IN_HRS;
this.shortage = this.TODAYDATE.SHORTAGE_HRS; this.shortage = this.TODAYDATE.SHORTAGE_HRS;
this.earlyOut = this.TODAYDATE.EARLY_OUT_HRS ; this.earlyOut = this.TODAYDATE.EARLY_OUT_HRS;
this.scheduleDate = this.TODAYDATE.SCHEDULE_DATE; this.scheduleDate = this.TODAYDATE.SCHEDULE_DATE;
this.assignData(this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0]); this.assignData(this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0]);
} }
@ -94,19 +94,19 @@ export class DateInfoModalComponent implements OnInit {
{ {
data: [this.percChart], data: [this.percChart],
backgroundColor: [ backgroundColor: [
'#269DB8' '#BE332F'
], ],
borderWidth: 2 borderWidth: 2
}] }]
}; };
} }
slideChanged(ev) { slideChanged(ev) {
this.slides.getActiveIndex().then(index => { this.slides.getActiveIndex().then(index => {
const shiftDetails = this.SHIFTDETAILS.GetScheduleShiftsDetailsList[index]; const shiftDetails = this.SHIFTDETAILS.GetScheduleShiftsDetailsList[index];
this.assignData(shiftDetails); this.assignData(shiftDetails);
}); });
} }
getHeaderDay(date: any) { getHeaderDay(date: any) {
if (this.direction === 'ltr') { if (this.direction === 'ltr') {

@ -1,31 +1,33 @@
//test //test
.changeImgBtn{ .changeImgBtn {
margin: 0; margin: 0;
position: absolute; position: absolute;
top: 80%; top: 80%;
left: 53%; left: 53%;
-ms-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.btnImge{
// button{
border-color:transparent !important;
--background: #269DB8 !important;
background: #269DB8 !important;
height: 57px !important; .btnImge {
width: 60px !important; // button{
border-radius: 50% !important; border-color: transparent !important;
// } --background: #BE332F !important;
background: #BE332F !important;
}
//test height: 57px !important;
.changeIcon{ width: 60px !important;
background: #269DB8 !important; border-radius: 50% !important;
border-radius: 50% !important; // }
width: 73px;
height: 55px; }
color: white !important;
width: 80px; //test
height: 71px; .changeIcon {
} background: #BE332F !important;
border-radius: 50% !important;
width: 73px;
height: 55px;
color: white !important;
width: 80px;
height: 71px;
}

@ -1,4 +1,4 @@
.profile-image-container{ .profile-image-container {
display: block; display: block;
margin: 7px auto 0; margin: 7px auto 0;
width: 32px; width: 32px;
@ -6,13 +6,15 @@
border-radius: 100%; border-radius: 100%;
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
img{
img {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
max-width: 100%; max-width: 100%;
} }
} }
.ion-title{
.ion-title {
color: white; color: white;
font-size: 0.5cm; font-size: 0.5cm;
font-weight: bold; font-weight: bold;
@ -21,10 +23,12 @@
text-align: center; text-align: center;
line-height: 46px; line-height: 46px;
} }
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.setting-conatainer{
.setting-conatainer {
height: 40px !important; height: 40px !important;
width: 40px !important; width: 40px !important;
} }

@ -1,9 +1,10 @@
.float-left{ .float-left {
float: left; float: left;
} }
ion-menu-button { ion-menu-button {
font-size: 0.8cm; font-size: 0.8cm;
color: white; color: white;
background: #269DB8; background: #BE332F;
margin: 0 auto; margin: 0 auto;
} }

@ -4,7 +4,7 @@ ion-row {
} }
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.profile-image-container { .profile-image-container {
@ -56,7 +56,7 @@ ion-label {
.contentBg:before { .contentBg:before {
position: absolute; position: absolute;
content: ""; content: "";
background: #269DB8; background: #BE332F;
height: 100px; height: 100px;
width: 100%; width: 100%;
left: 0; left: 0;
@ -101,7 +101,7 @@ ion-label {
ion-button { ion-button {
border-radius: 10px; border-radius: 10px;
padding: 10px; padding: 10px;
background: #269db8; background: #BE332F;
--background: transparent; --background: transparent;
--box-shadow: none !important; --box-shadow: none !important;
height: auto; height: auto;
@ -149,7 +149,7 @@ ion-label {
// z-index: 2; // z-index: 2;
// height: 112px; // height: 112px;
// width: 112px; // width: 112px;
// background-color: #269DB8; // background-color: #BE332F;
// border-radius: 50%; // border-radius: 50%;
// display: inline-block; // display: inline-block;
// img { // img {

@ -1,25 +1,23 @@
.header-toolbar-new {
--background: #BE332F;
}
.contentBg {
.header-toolbar-new{
--background: #269DB8;
}
.contentBg{
padding: 0px 20px; padding: 0px 20px;
} }
.contentBg:before { .contentBg:before {
position: absolute; position: absolute;
content: ""; content: "";
background: #269DB8; background: #BE332F;
height: 140px; height: 140px;
width: 100%; width: 100%;
left: 0; left: 0;
top: 0px; top: 0px;
z-index: 1; z-index: 1;
} }
@media screen and (min-width: 1px) and (max-width:767px){ @media screen and (min-width: 1px) and (max-width:767px) {
.result-graph { .result-graph {
position: relative; position: relative;
background: white; background: white;
@ -32,142 +30,152 @@
border-radius: 20px; border-radius: 20px;
border: 1px solid #ccc; border: 1px solid #ccc;
padding-top: 12px; padding-top: 12px;
}} }
}
@media screen and (min-width: 768px) and (max-width:1024px){
.result-graph { @media screen and (min-width: 768px) and (max-width:1024px) {
position: relative; .result-graph {
background: white; position: relative;
// margin-top: 20px; background: white;
padding-bottom: 20px; // margin-top: 20px;
border-radius: 20px; padding-bottom: 20px;
z-index: 1; border-radius: 20px;
margin-bottom: 10px; z-index: 1;
margin-top: 89px; margin-bottom: 10px;
border-radius: 20px; margin-top: 89px;
border: 1px solid #ccc; border-radius: 20px;
padding-top: 114px !important; border: 1px solid #ccc;
}} padding-top: 114px !important;
}
.user-info{ }
text-align: center;
margin-bottom: 3px; .user-info {
.user-image-container{ text-align: center;
position: relative; margin-bottom: 3px;
width: 100%;
height: 24px; .user-image-container {
justify-content: space-between; position: relative;
display: flex; width: 100%;
margin: 0 auto; height: 24px;
align-items: center; justify-content: space-between;
}} display: flex;
margin: 0 auto;
.Boldtext{ align-items: center;
font-size: 13px; }
font-family: WorkSans-Bold; }
color: black !important;
display: block !important; .Boldtext {
// line-height: 0px !important; font-size: 13px;
} font-family: WorkSans-Bold;
color: black !important;
.Nametext{ display: block !important;
font-size: 15px; // line-height: 0px !important;
font-family: WorkSans-Bold; }
color: black !important;
display: block !important; .Nametext {
// line-height: 0px !important; font-size: 15px;
} font-family: WorkSans-Bold;
color: black !important;
.employee-information-indetail{ display: block !important;
background: white; // line-height: 0px !important;
margin-top: 15px; }
border-radius: 20px;
margin-bottom: 15px; .employee-information-indetail {
border-radius: 20px; background: white;
border: 1px solid #ccc; margin-top: 15px;
ion-col{ border-radius: 20px;
padding: 15px; margin-bottom: 15px;
// border-bottom: 1px solid #ccc; border-radius: 20px;
} border: 1px solid #ccc;
h2{
font-size: 13px; ion-col {
// font-family: WorkSans-Bold; padding: 15px;
margin: 0; // border-bottom: 1px solid #ccc;
font-weight: bold; }
color: rgb(128, 124, 124);
} h2 {
p{ font-size: 13px;
font-size: 13px; // font-family: WorkSans-Bold;
margin: 0; margin: 0;
font-family: WorkSans-Bold; font-weight: bold;
// margin-bottom: 10px; color: rgb(128, 124, 124);
} }
}
p {
@media screen and (min-width: 1px) and (max-width:767px){ font-size: 13px;
.user-image{ margin: 0;
position: relative; font-family: WorkSans-Bold;
display: block; // margin-bottom: 10px;
width: 95%; }
height: 100%; }
border-radius: 80px;
/* border: 1px solid #ccc; */ @media screen and (min-width: 1px) and (max-width:767px) {
margin-top: -125px; .user-image {
position: relative;
}} display: block;
@media screen and (min-width: 768px) and (max-width:1024px){ width: 95%;
.user-image{ height: 100%;
position: relative; border-radius: 80px;
display: block; /* border: 1px solid #ccc; */
width: 95%; margin-top: -125px;
height: 100%;
border-radius: 80px; }
margin-bottom: 371px; }
}}
@media screen and (min-width: 768px) and (max-width:1024px) {
.img{ .user-image {
width: 100px; position: relative;
height: 100px; display: block;
display: inline-flex; width: 95%;
overflow: hidden; height: 100%;
background: transparent; border-radius: 80px;
border-radius: 70% !important; margin-bottom: 371px;
position: relative; }
top: 3px; }
}
.img {
.sendCodeBtn{ width: 100px;
--background: #269DB8; height: 100px;
color: white; display: inline-flex;
text-align: center; overflow: hidden;
text-decoration: none; background: transparent;
display: inline-block; border-radius: 70% !important;
font-size: 12px; position: relative;
margin-left: 5px !important; top: 3px;
margin-top: 15px !important; }
margin-bottom: 20px !important;
/* border-radius: 4px; */ .sendCodeBtn {
height: 26px; --background: #BE332F;
/* padding: 6px 24px; */ color: white;
font-size: 15px; text-align: center;
width: 322px; text-decoration: none;
} display: inline-block;
font-size: 12px;
.verify-code{ margin-left: 5px !important;
position: relative; margin-top: 15px !important;
background: white; margin-bottom: 20px !important;
border-radius: 20px; /* border-radius: 4px; */
z-index: 1; height: 26px;
border-radius: 20px; /* padding: 6px 24px; */
border: 1px solid #ccc; font-size: 15px;
padding: 21px 3px 34px 14px; width: 322px;
margin: 25px 22px 2px 22px; }
.verify-code {
} position: relative;
background: white;
border-radius: 20px;
z-index: 1;
border-radius: 20px;
border: 1px solid #ccc;
padding: 21px 3px 34px 14px;
margin: 25px 22px 2px 22px;
}
// .sms_code{ // .sms_code{
// margin: 0px; // margin: 0px;
// text-align: center; // text-align: center;
@ -186,18 +194,19 @@ ion-input {
transition: all .2s ease-in-out; transition: all .2s ease-in-out;
border-radius: 3px; border-radius: 3px;
display: inline-block; display: inline-block;
&:focus { &:focus {
border-color:var(--ion-color-secondary) !important; border-color: var(--ion-color-secondary) !important;
box-shadow: 0 0 5px var(--ion-color-secondary) !important; box-shadow: 0 0 5px var(--ion-color-secondary) !important;
} }
&::selection { &::selection {
background: transparent; background: transparent;
} }
} }
.sendVerifyBtn{ .sendVerifyBtn {
--background: #269DB8; --background: #BE332F;
color: white; color: white;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@ -210,9 +219,9 @@ ion-input {
font-size: 15px; font-size: 15px;
width: 322px; width: 322px;
margin-left: 22px; margin-left: 22px;
} }
@media screen and (min-width: 1px) and (max-width:320px){ @media screen and (min-width: 1px) and (max-width:320px) {
.custom-radio .radio-icon { .custom-radio .radio-icon {
margin: 0px; margin: 0px;
border-radius: 50%; border-radius: 50%;
@ -220,157 +229,162 @@ ion-input {
border-style: var(--border-style); border-style: var(--border-style);
border-color: #dcdcdc; border-color: #dcdcdc;
margin-top: 6px !important; margin-top: 6px !important;
border-color: #d8d4d4 !important; border-color: #d8d4d4 !important;
margin-bottom: 18px;} margin-bottom: 18px;
.text-label{
color: black !important;
font-size: 9px;
margin-left: 2px;
margin-right: 2px;
font-family: 'WorkSans-Bold';
} }
@media screen and (min-width: 325px){
.custom-radio .radio-icon {
margin: 0px;
border-radius: 50%;
border-width: var(--border-width);
border-style: var(--border-style);
border-color: #dcdcdc;
margin-top: 6px !important;
border-color: #d8d4d4 !important;
margin-bottom: 18px;}
.text-label{
color: black !important;
font-size: 10px;
margin-left: 15px;
margin-right: 13px;
font-family: 'WorkSans-Bold';
} }
// .radio-list{
// background: white;
// margin-left: 18px;
// /* margin-right: 10px; */
// margin-top: 12px;
// }
.result-serviceType{
position: relative;
background: white;
border-radius: 20px;
z-index: 1;
border-radius: 25px;
border: 1px solid #ccc;
margin: 15px;
} }
.request-heading { .text-label {
span { color: black !important;
display: block; font-size: 9px;
margin-bottom: 15px; margin-left: 2px;
// padding-top: 8px; margin-right: 2px;
padding-left: 3px; font-family: 'WorkSans-Bold';
/* font-weight: bold; */
font-size: 14px;
font-family: 'WorkSans-Bold';
}
} }
}
.filed1{ @media screen and (min-width: 325px) {
border-radius: 30px; .custom-radio .radio-icon {
border: 1px solid #d3d5d5 !important; margin: 0px;
margin: 10px; border-radius: 50%;
padding-left: 10px !important; border-width: var(--border-width);
padding-top: 10px !important; border-style: var(--border-style);
color: #636161; border-color: #dcdcdc;
padding-bottom: 10px; margin-top: 6px !important;
width: 130% !important; border-color: #d8d4d4 !important;
} margin-bottom: 18px;
.filedDesc{
border-radius: 30px;
border: 1px solid #d3d5d5 !important;
// margin: 10px;
padding-left: 20px !important;
padding-top: 6px !important;
color: #636161;
--padding-bottom: 90px;
font-size: 13px;
text-align: start;
} }
.filedDesc-ar{
border-radius: 30px; .text-label {
border: 1px solid #d3d5d5 !important; color: black !important;
// margin: 10px; font-size: 10px;
padding-right: 20px !important; margin-left: 15px;
padding-top: 6px !important; margin-right: 13px;
color: #636161; font-family: 'WorkSans-Bold';
--padding-bottom: 90px;
font-size: 13px;
text-align: start;
} }
}
.labelDesc{ // .radio-list{
// background: white;
// margin-left: 18px;
// /* margin-right: 10px; */
// margin-top: 12px;
// }
.result-serviceType {
position: relative;
background: white;
border-radius: 20px;
z-index: 1;
border-radius: 25px;
border: 1px solid #ccc;
margin: 15px;
}
.request-heading {
span {
display: block; display: block;
margin-bottom: 15px;
// padding-top: 8px;
padding-left: 3px;
/* font-weight: bold; */
font-size: 14px;
font-family: 'WorkSans-Bold';
}
}
.filed1 {
border-radius: 30px;
border: 1px solid #d3d5d5 !important;
margin: 10px;
padding-left: 10px !important;
padding-top: 10px !important;
color: #636161;
padding-bottom: 10px;
width: 130% !important;
}
.filedDesc {
border-radius: 30px;
border: 1px solid #d3d5d5 !important;
// margin: 10px;
padding-left: 20px !important;
padding-top: 6px !important;
color: #636161;
--padding-bottom: 90px;
font-size: 13px;
text-align: start;
}
.filedDesc-ar {
border-radius: 30px;
border: 1px solid #d3d5d5 !important;
// margin: 10px;
padding-right: 20px !important;
padding-top: 6px !important;
color: #636161;
--padding-bottom: 90px;
font-size: 13px;
text-align: start;
}
.labelDesc {
display: block;
padding-top: 8px; padding-top: 8px;
padding-left: 15px; padding-left: 15px;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
color: #adabab; color: #adabab;
} }
.selectLabel {
display: block;
padding-top: 8px;
padding-left: 15px;
font-size: 14px;
/* font-family: 'WorkSans-Bold'; */
font-weight: bold;
color: black;
}
.selectLabel{
display: block;
padding-top: 8px;
padding-left: 15px;
font-size: 14px;
/* font-family: 'WorkSans-Bold'; */
font-weight: bold;
color: black;
}
// .cancelRequest{
// .cancelRequest{ // padding: 10px 7px 10px 0px;
// padding: 10px 7px 10px 0px; // ion-button{
// ion-button{ // border-radius: 7px;
// border-radius: 7px; // padding: 12px 30px 12px 30px;
// padding: 12px 30px 12px 30px; // background: #d00a0a;
// background: #d00a0a; // --background: transparent;
// --background: transparent; // --box-shadow: none !important;
// --box-shadow: none !important; // height: auto;
// height: auto; // min-height: inherit;
// min-height: inherit; // font-size: 16px;
// font-size: 16px; // font-weight: bold;
// font-weight: bold; // margin-top: -5px;
// margin-top: -5px; // }}
// }} // .submitRequest{
// .submitRequest{ // padding: 10px 7px 10px 0px;
// padding: 10px 7px 10px 0px; // ion-button{
// ion-button{ // border-radius: 7px;
// border-radius: 7px; // padding: 12px 30px 12px 30px;
// padding: 12px 30px 12px 30px; // background: #19a163;
// background: #19a163; // --background: transparent;
// --background: transparent; // --box-shadow: none !important;
// --box-shadow: none !important; // height: auto;
// height: auto; // min-height: inherit;
// min-height: inherit; // font-size: 16px;
// font-size: 16px; // font-weight: bold;
// font-weight: bold; // margin-top: -5px;
// margin-top: -5px; // }}
// }}
.gridDiv {
.gridDiv{
width: 100%; width: 100%;
height: 40px; height: 40px;
margin-top: 18px; margin-top: 18px;
font-size: 14px; font-size: 14px;
} }
.gridCancelBtn{ .gridCancelBtn {
min-width: auto; min-width: auto;
// margin: 0px; // margin: 0px;
padding: 10px; padding: 10px;
@ -391,11 +405,11 @@ ion-input {
--background: #d00a0a !important; --background: #d00a0a !important;
} }
.main-button{ .main-button {
--box-shadow:none; --box-shadow: none;
} }
.gridSubmitBtn{ .gridSubmitBtn {
min-width: auto; min-width: auto;
// margin: 0px; // margin: 0px;
padding: 10px; padding: 10px;
@ -413,25 +427,26 @@ ion-input {
font-family: 'WorkSans-bold'; font-family: 'WorkSans-bold';
font-size: 16px; font-size: 16px;
min-height: 1.0cm; min-height: 1.0cm;
--background: #19a163 !important;} --background: #19a163 !important;
}
.filed-container{ .filed-container {
margin-right: -17px; margin-right: -17px;
margin-left: -25px; margin-left: -25px;
} }
.labels{ .labels {
display: block; display: block;
margin-top: 15px; margin-top: 15px;
padding-top: 8px; padding-top: 8px;
padding-left: 3px; padding-left: 3px;
font-size: 14px; font-size: 14px;
font-family: 'WorkSans-Bold'; font-family: 'WorkSans-Bold';
} }
.CreateBtn{ .CreateBtn {
--background: var(--newgreen) !important; --background: var(--newgreen) !important;
background: var(--newgreen) !important; background: var(--newgreen) !important;
white-space: normal; white-space: normal;
color: var(--light); color: var(--light);
@ -441,92 +456,102 @@ ion-input {
border-radius: 7px !important; border-radius: 7px !important;
--min-height: 1.6cm !important; --min-height: 1.6cm !important;
width: 315px; width: 315px;
} }
.footer{
.footer {
padding: 15px 0px 0px 0px; padding: 15px 0px 0px 0px;
background-color: var(--light) !important; background-color: var(--light) !important;
border: 0px !important; border: 0px !important;
box-shadow: none !important; box-shadow: none !important;
-webkit-box-shadow: none; -webkit-box-shadow: none;
} }
.Btn{
margin: auto; text-align: center; display: block;
}
.footer2{
padding: 15px 0px 0px 24px;
background-color: var(--light) !important;
border: 0px !important;
box-shadow: none !important;
-webkit-box-shadow: none;
}
ion-footer .footer-button{ .Btn {
--background: #259CB8; margin: auto;
width: 80%; text-align: center;
} display: block;
@media screen and (min-width: 325px){ }
.footer2 {
padding: 15px 0px 0px 24px;
background-color: var(--light) !important;
border: 0px !important;
box-shadow: none !important;
-webkit-box-shadow: none;
}
ion-footer .footer-button {
--background: #259CB8;
width: 80%;
}
@media screen and (min-width: 325px) {
.fileUpload { .fileUpload {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
margin: 10px; margin: 10px;
margin-left: -233px; margin-left: -233px;
}} }
@media screen and (min-width: 1px) and (max-width:320px){ }
@media screen and (min-width: 1px) and (max-width:320px) {
.fileUpload { .fileUpload {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
margin: 10px; margin: 10px;
margin-left: -158px; margin-left: -158px;
}}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
} }
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.iconButton .imgSize{ .iconButton .imgSize {
width: 10px !important; width: 10px !important;
height: 10px; height: 10px;
} }
button.iconButton.button.button-ios.button-default.button-default-ios, button.iconButton.button.button-ios.button-default.button-default-ios,
button.iconButton.button.button-md.button-default.button-default-md { button.iconButton.button.button-md.button-default.button-default-md {
padding: 0px; padding: 0px;
} }
select option[data-default] { select option[data-default] {
color: #888; color: #888;
} }
.Field-en{ .Field-en {
border-radius: 30px; border-radius: 30px;
border: 1px solid #a2a5a6!important; border: 1px solid #a2a5a6 !important;
margin-bottom: 20px; margin-bottom: 20px;
padding-left: 20px !important; padding-left: 20px !important;
padding-top: 6px !important; padding-top: 6px !important;
color: #999999 !important; color: #999999 !important;
} }
.Field-ar{ .Field-ar {
border-radius: 30px; border-radius: 30px;
border: 1px solid #a2a5a6!important; border: 1px solid #a2a5a6 !important;
margin-bottom: 20px; margin-bottom: 20px;
padding-right: 20px !important; padding-right: 20px !important;
padding-top: 6px !important; padding-top: 6px !important;
color: #999999 !important; color: #999999 !important;
} }
.button-native { .button-native {
box-shadow: none!important; box-shadow: none !important;
} }
.gridAH{
text-align: justify; .gridAH {
} text-align: justify;
}

@ -1,414 +1,449 @@
ion-content {
ion-content {
--ion-background-color: whitesmoke; --ion-background-color: whitesmoke;
} }
.sendCodeBtn{ .sendCodeBtn {
--background: #269DB8; --background: #BE332F;
color: white; color: white;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
font-size: 12px;
margin-left: 23px !important;
margin-top: 15px !important;
margin-bottom: 20px !important;
/* border-radius: 4px; */
height: 26px;
/* padding: 6px 24px; */
font-size: 15px;
width: 322px;
}
.empty-en {
color: black;
text-align: center;
font-size: 15px;
font-family: WorkSans-Bold;
margin: 50px 0px 0px 100px;
}
.empty-ar {
color: black;
text-align: center;
font-size: 15px;
font-family: WorkSans-Bold;
margin: 50px 100px 0px 0px;
}
.result-container {
// position: relative;
// background: white;
// border-radius: 20px;
// z-index: 1;
// margin: 15px;
// border-radius: 10px;
// border: 1px solid #ccc;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 0px 5px #00000029;
border-radius: 10px;
opacity: 1;
}
.result-containerList {
// position: relative;
// background: white;
// border-radius: 20px;
// z-index: 1;
// margin: 15px;
// border-radius: 10px;
// border: 1px solid #ccc;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 0px 5px #00000029;
border-radius: 10px;
opacity: 1;
}
.text {
text-align: left;
/* font-family: var(--fontFamilyPoppins-Medium, inherit); */
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 11px;
font-size: 16px;
letter-spacing: -0.64px;
color: #2B353E;
opacity: 1;
}
.text-ar {
text-align: right;
/* font-family: var(--fontFamilyPoppins-Medium, inherit); */
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 11px;
font-size: 16px;
letter-spacing: -0.64px;
color: #2B353E;
opacity: 1;
}
@media screen and (min-width: 1px) and (max-width:320px) {
.date {
// margin-right: -38px;
color: gray;
font-size: 12px;
margin-left: -44px;
}
}
@media screen and (min-width: 325px) {
.date {
// margin-top: -9px;
margin-right: -49px;
color: gray;
font-size: 12px; font-size: 12px;
margin-left: 23px !important; }
margin-top: 15px !important; }
margin-bottom: 20px !important;
/* border-radius: 4px; */ @media screen and (min-width: 1px) and (max-width:320px) {
height: 26px; .date-ar {
/* padding: 6px 24px; */ // margin-right: -38px;
font-size: 15px; color: gray;
width: 322px; font-size: 10px;
} margin-left: 58px;
}
.empty-en{ }
color: black;
text-align: center; @media screen and (min-width: 325px) {
font-size: 15px; .date-ar {
font-family: WorkSans-Bold; // margin-top: -9px;
margin: 50px 0px 0px 100px; margin-right: -49px;
} color: gray;
.empty-ar{ font-size: 12px;
color: black; }
text-align: center; }
font-size: 15px;
font-family: WorkSans-Bold; .labels {
margin: 50px 100px 0px 0px; // font-size: 13px;
} // margin-bottom: 0px;
// margin-top: -10px;
.result-container{ // color: #a9a5a5;
// position: relative; // font-family: 'WorkSans-bold';
// background: white; text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
// border-radius: 20px; // font-weight: 600;
// z-index: 1; line-height: 20px;
// margin: 15px; font-size: 13px;
// border-radius: 10px; // font: normal normal 600 13px/20px Poppins;
// border: 1px solid #ccc; letter-spacing: -0.52px;
background: #FFFFFF 0% 0% no-repeat padding-box; color: #A2A2A2;
box-shadow: 0px 0px 5px #00000029; opacity: 1;
border-radius: 10px; padding-bottom: 3px;
opacity: 1; }
}
.labels-ar {
.result-containerList{ // font-size: 13px;
// position: relative;
// background: white;
// border-radius: 20px;
// z-index: 1;
// margin: 15px;
// border-radius: 10px;
// border: 1px solid #ccc;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 0px 5px #00000029;
border-radius: 10px;
opacity: 1;
}
.text{
text-align: left;
/* font-family: var(--fontFamilyPoppins-Medium, inherit); */
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 11px;
font-size: 16px;
letter-spacing: -0.64px;
color: #2B353E;
opacity: 1;
}
.text-ar{
text-align: right;
/* font-family: var(--fontFamilyPoppins-Medium, inherit); */
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 11px;
font-size: 16px;
letter-spacing: -0.64px;
color: #2B353E;
opacity: 1;
}
@media screen and (min-width: 1px) and (max-width:320px) {
.date{
// margin-right: -38px;
color: gray;
font-size: 12px;
margin-left: -44px;
}}
@media screen and (min-width: 325px) {
.date{
// margin-top: -9px;
margin-right: -49px;
color: gray;
font-size: 12px;
}}
@media screen and (min-width: 1px) and (max-width:320px) {
.date-ar{
// margin-right: -38px;
color: gray;
font-size: 10px;
margin-left: 58px;
}}
@media screen and (min-width: 325px) {
.date-ar{
// margin-top: -9px;
margin-right: -49px;
color: gray;
font-size: 12px;
}}
.labels{
// font-size: 13px;
// margin-bottom: 0px;
// margin-top: -10px;
// color: #a9a5a5;
// font-family: 'WorkSans-bold';
text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
// font-weight: 600;
line-height: 20px;
font-size: 13px;
// font: normal normal 600 13px/20px Poppins;
letter-spacing: -0.52px;
color: #A2A2A2;
opacity: 1;
padding-bottom: 3px;
}
.labels-ar{
// font-size: 13px;
// margin-bottom: 0px;
// margin-top: -10px;
// color: #a9a5a5;
// font-family: 'WorkSans-bold';
text-align: right;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
// font-weight: 600;
line-height: 20px;
font-size: 13px;
// font: normal normal 600 13px/20px Poppins;
letter-spacing: -0.52px;
color: #A2A2A2;
opacity: 1;
padding-bottom: 3px;
}
.request-list-container {
position: relative;
padding-left: 37px;
clear: both;
min-height: 200px;
padding-top: 15px;
}
.request-list-container:before{
content: "";
position: absolute;
height: 100%;
width: 4px;
left: 7px;
top: 15px;
background-color: #f5f4f4;
}
.request-list-container-ar {
position: relative;
padding-left: 60px;
clear: both;
min-height: 200px;
// margin-bottom: 80px;
padding-top: 15px;
}
.request-list-container-ar:before{
content: "";
position: absolute;
height: 100%;
width: 4px;
left: 30px;
top: 15px;
right: 6px;
background-color: #dddddd;
}
.text-span {
position: relative;
display: block;
letter-spacing: -0.64px;
color: #2B353E;
opacity: 1;
// font-weight: 600;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 25px;
font-size: 16px;
}
.text-span:before{
content: "";
position: absolute;
left: -35px;
border-radius: 50%;
width: 15px;
height: 15px;
background-color: #269db8;
top: 1px;
}
.text-span-ar{
position: relative;
display: block;
letter-spacing: -0.64px;
color: #2B353E;
opacity: 1;
// font-weight: 600;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 25px;
font-size: 16px;
margin-right: 37px;
}
.text-span-ar:before{
content: "";
position: absolute;
right: -35px;
border-radius: 50%;
width: 15px;
height: 15px;
background-color: #269db8;
top: 1px;
}
.action-data{
background-color: white;
padding: 1px;
border-radius: 20px;
font-family: WorkSans-Regular;
// padding-left: 15px;
margin-right: 20px;
margin-bottom: 15px;
p{
// font-size: 14px;
text-align: left;
letter-spacing: -0.52px;
color: #535353;
opacity: 1;
//font-weight: 500;
font-family: var(--fontFamilyPoppins-Medium, inherit);
line-height: 18px;
font-size: 13px;
}
}
.action-data-ar{
background-color: white;
padding: 1px;
border-radius: 20px;
font-family: WorkSans-Regular;
// padding-left: 15px;
margin-right: 20px;
margin-bottom: 15px;
p{
// font-size: 14px;
text-align: right;
letter-spacing: -0.52px;
color: #535353;
opacity: 1;
//font-weight: 500;
font-family: var(--fontFamilyPoppins-Medium, inherit);
line-height: 18px;
font-size: 13px;
}
}
.date-span{
text-align: right;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
//font-weight: 600;
line-height: 20px;
font-size: 13px;
// font: normal normal 600 13px/20px Poppins;
letter-spacing: -0.52px;
color: #A2A2A2;
opacity: 1;
}
// @media screen and (min-width: 325px){
// .date-span{
// font-size: 13px;
// margin-bottom: 0px;
// margin-top: -10px;
// color: gray;
// margin-left: 160px;
// }}
// @media screen and (min-width: 1px) and (max-width:320px) {
// .date-span{
// font-size: 13px;
// margin-bottom: 0px;
// margin-top: -10px;
// color: gray;
// margin-left: 76px;
// }}
// @media screen and (min-width: 1px) and (max-width:320px) {
// .date-span-ar{
// font-size: 13px;
// margin-bottom: 0px; // margin-bottom: 0px;
// margin-top: -10px; // margin-top: -10px;
// color: gray; // color: #a9a5a5;
// margin-right: 60px; // font-family: 'WorkSans-bold';
// }} text-align: right;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
// @media screen and (min-width: 325px){ // font-weight: 600;
// .date-span-ar{ line-height: 20px;
// font-size: 13px; font-size: 13px;
// margin-bottom: 0px; // font: normal normal 600 13px/20px Poppins;
// margin-top: -10px; letter-spacing: -0.52px;
// color: gray; color: #A2A2A2;
// margin-right: 140px; opacity: 1;
// }} padding-bottom: 3px;
}
.New{ .request-list-container {
margin-top: 5px; position: relative;
color: #1FA169; padding-left: 37px;
font-family:'WorkSans-bold'; clear: both;
min-height: 200px;
padding-top: 15px;
}
.request-list-container:before {
content: "";
position: absolute;
height: 100%;
width: 4px;
left: 7px;
top: 15px;
background-color: #f5f4f4;
}
.request-list-container-ar {
position: relative;
padding-left: 60px;
clear: both;
min-height: 200px;
// margin-bottom: 80px;
padding-top: 15px;
}
.request-list-container-ar:before {
content: "";
position: absolute;
height: 100%;
width: 4px;
left: 30px;
top: 15px;
right: 6px;
background-color: #dddddd;
}
.text-span {
position: relative;
display: block;
letter-spacing: -0.64px;
color: #2B353E;
opacity: 1;
// font-weight: 600;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 25px;
font-size: 16px;
}
.text-span:before {
content: "";
position: absolute;
left: -35px;
border-radius: 50%;
width: 15px;
height: 15px;
background-color: #BE332F;
top: 1px;
}
.text-span-ar {
position: relative;
display: block;
letter-spacing: -0.64px;
color: #2B353E;
opacity: 1;
// font-weight: 600;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 25px;
font-size: 16px;
margin-right: 37px;
}
.text-span-ar:before {
content: "";
position: absolute;
right: -35px;
border-radius: 50%;
width: 15px;
height: 15px;
background-color: #BE332F;
top: 1px;
}
.action-data {
background-color: white;
padding: 1px;
border-radius: 20px;
font-family: WorkSans-Regular;
// padding-left: 15px;
margin-right: 20px;
margin-bottom: 15px;
p {
// font-size: 14px;
text-align: left;
letter-spacing: -0.52px;
color: #535353;
opacity: 1;
//font-weight: 500;
font-family: var(--fontFamilyPoppins-Medium, inherit);
line-height: 18px;
font-size: 13px;
} }
}
.action-data-ar {
background-color: white;
padding: 1px;
border-radius: 20px;
font-family: WorkSans-Regular;
// padding-left: 15px;
margin-right: 20px;
margin-bottom: 15px;
p {
// font-size: 14px;
text-align: right;
letter-spacing: -0.52px;
color: #535353;
opacity: 1;
//font-weight: 500;
font-family: var(--fontFamilyPoppins-Medium, inherit);
line-height: 18px;
font-size: 13px;
}
}
.date-span {
text-align: right;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
//font-weight: 600;
line-height: 20px;
font-size: 13px;
// font: normal normal 600 13px/20px Poppins;
letter-spacing: -0.52px;
color: #A2A2A2;
opacity: 1;
}
// @media screen and (min-width: 325px){
// .date-span{
// font-size: 13px;
// margin-bottom: 0px;
// margin-top: -10px;
// color: gray;
// margin-left: 160px;
// }}
// @media screen and (min-width: 1px) and (max-width:320px) {
// .date-span{
// font-size: 13px;
// margin-bottom: 0px;
// margin-top: -10px;
// color: gray;
// margin-left: 76px;
// }}
// @media screen and (min-width: 1px) and (max-width:320px) {
// .date-span-ar{
// font-size: 13px;
// margin-bottom: 0px;
// margin-top: -10px;
// color: gray;
// margin-right: 60px;
// }}
// @media screen and (min-width: 325px){
// .date-span-ar{
// font-size: 13px;
// margin-bottom: 0px;
// margin-top: -10px;
// color: gray;
// margin-right: 140px;
// }}
.New {
margin-top: 5px;
color: #1FA169;
font-family: 'WorkSans-bold';
}
.ReOpen {
margin-top: 5px;
color: #1FA169;
}
.ReOpen{ margin-top: 5px; .AssToManager {
color: #1FA169; margin-top: 5px;
} color: #259CB8;
.AssToManager{ margin-top: 5px; }
color: #259CB8;
} .AssToSpec {
.AssToSpec{ margin-top: 5px; margin-top: 5px;
color: #259CB8; color: #259CB8;
} }
.Pending{ margin-top: 5px;
color: #E29D03; .Pending {
} margin-top: 5px;
.BackToSpec{ margin-top: 5px; color: #E29D03;
color: #3A476E; }
}
.Closed{ margin-top: 5px; .BackToSpec {
color: #CA3332; margin-top: 5px;
} color: #3A476E;
.BackToManager{ margin-top: 5px; }
color: #3A476E;
} .Closed {
.AssignedToHR{ margin-top: 5px; margin-top: 5px;
color: #259CB8; color: #CA3332;
} }
// .card-content{ .BackToManager {
// margin-left: -3px; margin-right: -9px;} margin-top: 5px;
// .card-content-ar{ color: #3A476E;
// margin-left: -122px; }
// }
.AssignedToHR {
margin-top: 5px;
.status{ color: #259CB8;
text-align: left; }
/* font: normal normal 600 10px/16px Poppins; */
letter-spacing: -0.4px; // .card-content{
opacity: 1; // margin-left: -3px; margin-right: -9px;}
// .card-content-ar{
font-family: var(--fontFamilyPoppins-SemiBold, inherit); // margin-left: -122px;
// font-weight: 600; // }
line-height: 16px;
font-size: 10px;
color: #269db8; .status {
} text-align: left;
.postedDate{ /* font: normal normal 600 10px/16px Poppins; */
text-align: left !important; letter-spacing: -0.4px;
// font-weight: 600; opacity: 1;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 16px !important; font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-size: 10px !important; // font-weight: 600;
letter-spacing: -0.4px !important; line-height: 16px;
color: #969696 !important; font-size: 10px;
opacity: 1 !important; color: #BE332F;
} }
.DescrText{
text-align: left; .postedDate {
// font: normal normal medium 13px/18px Poppins; text-align: left !important;
letter-spacing: -0.52px; // font-weight: 600;
color: #535353; font-family: var(--fontFamilyPoppins-SemiBold, inherit);
opacity: 1; line-height: 16px !important;
// font-weight: 500; font-size: 10px !important;
font-family: var(--fontFamilyPoppins-Medium, inherit); letter-spacing: -0.4px !important;
line-height: 5px; color: #969696 !important;
font-size: 13px; opacity: 1 !important;
} }
.DescrText-ar{
text-align: right; .DescrText {
// font: normal normal medium 13px/18px Poppins; text-align: left;
letter-spacing: -0.52px; // font: normal normal medium 13px/18px Poppins;
color: #535353; letter-spacing: -0.52px;
opacity: 1; color: #535353;
// font-weight: 500; opacity: 1;
font-family: var(--fontFamilyPoppins-Medium, inherit); // font-weight: 500;
line-height: 5px; font-family: var(--fontFamilyPoppins-Medium, inherit);
font-size: 13px; line-height: 5px;
} font-size: 13px;
.div{ }
position: relative;
display: flex; .DescrText-ar {
justify-content: space-between; text-align: right;
margin-bottom: -12px; // font: normal normal medium 13px/18px Poppins;
} letter-spacing: -0.52px;
color: #535353;
opacity: 1;
// font-weight: 500;
font-family: var(--fontFamilyPoppins-Medium, inherit);
line-height: 5px;
font-size: 13px;
}
.div {
position: relative;
display: flex;
justify-content: space-between;
margin-bottom: -12px;
}

File diff suppressed because it is too large Load Diff

@ -449,7 +449,7 @@ export class DetailsComponent implements OnInit {
data: [this.absentDays, this.attendedDays], data: [this.absentDays, this.attendedDays],
backgroundColor: [ backgroundColor: [
'black', 'black',
'#269DB8' '#BE332F'
], ],
borderWidth: 1, borderWidth: 1,
// cutoutPrecentage:20 , // cutoutPrecentage:20 ,
@ -793,7 +793,7 @@ export class DetailsComponent implements OnInit {
selEmp.EMPLOYEE_DISPLAY_NAME = selEmp.EMPLOYEE_DISPLAY_NAME ? selEmp.EMPLOYEE_DISPLAY_NAME : selEmp.NAME; selEmp.EMPLOYEE_DISPLAY_NAME = selEmp.EMPLOYEE_DISPLAY_NAME ? selEmp.EMPLOYEE_DISPLAY_NAME : selEmp.NAME;
selEmp.EMPLOYEE_IMAGE = selEmp.EMPLOYEE_IMAGE ? selEmp.EMPLOYEE_IMAGE : ''; selEmp.EMPLOYEE_IMAGE = selEmp.EMPLOYEE_IMAGE ? selEmp.EMPLOYEE_IMAGE : '';
selEmp.EMAIL_ADDRESS = selEmp.EMAIL_ADDRESS ? selEmp.EMAIL_ADDRESS : ''; selEmp.EMAIL_ADDRESS = selEmp.EMAIL_ADDRESS ? selEmp.EMAIL_ADDRESS : '';
if(!this.isFavorite) { if (!this.isFavorite) {
let confirmBoxhtml = `<div> let confirmBoxhtml = `<div>
<h4>Do you want to add ` + selEmp.EMPLOYEE_DISPLAY_NAME + ` in your favorite list </h4> <h4>Do you want to add ` + selEmp.EMPLOYEE_DISPLAY_NAME + ` in your favorite list </h4>
<br/> <br/>
@ -817,31 +817,31 @@ export class DetailsComponent implements OnInit {
confirmBoxhtml confirmBoxhtml
, () => { , () => {
const request = const request =
[ [
{ {
"USER_NAME": this.employee.EMPLOYEE_NUMBER, "USER_NAME": this.employee.EMPLOYEE_NUMBER,
"EMPLOYEE_DISPLAY_NAME": this.employee.EMPLOYEE_DISPLAY_NAME, "EMPLOYEE_DISPLAY_NAME": this.employee.EMPLOYEE_DISPLAY_NAME,
"EMAIL_ADDRESS": this.employee.EMAIL_ADDRESS, "EMAIL_ADDRESS": this.employee.EMAIL_ADDRESS,
"EMPLOYEE_IMAGE": this.employee.EMPLOYEE_IMAGE, "EMPLOYEE_IMAGE": this.employee.EMPLOYEE_IMAGE,
"IsFavorite": true "IsFavorite": true
} }
]; ];
this.saveUserFavruiteList(request); this.saveUserFavruiteList(request);
}, },
() => {}); () => { });
} }
} else { } else {
const request = const request =
[ [
{ {
"USER_NAME": this.employee.EMPLOYEE_NUMBER, "USER_NAME": this.employee.EMPLOYEE_NUMBER,
"EMPLOYEE_DISPLAY_NAME": this.employee.EMPLOYEE_DISPLAY_NAME, "EMPLOYEE_DISPLAY_NAME": this.employee.EMPLOYEE_DISPLAY_NAME,
"EMAIL_ADDRESS": this.employee.EMAIL_ADDRESS, "EMAIL_ADDRESS": this.employee.EMAIL_ADDRESS,
"EMPLOYEE_IMAGE": this.employee.EMPLOYEE_IMAGE, "EMPLOYEE_IMAGE": this.employee.EMPLOYEE_IMAGE,
"IsFavorite": false "IsFavorite": false
} }
]; ];
this.saveUserFavruiteList(request); this.saveUserFavruiteList(request);
} }
} }

@ -1,4 +1,4 @@
ion-title{ ion-title {
color: white; color: white;
position: absolute; position: absolute;
top: 0; top: 0;
@ -11,31 +11,34 @@ ion-title{
} }
@media only screen and (max-width: 360px) { @media only screen and (max-width: 360px) {
.contentBg{ .contentBg {
padding: 0px 15px !important; padding: 0px 15px !important;
} }
} }
.contentBg{ .contentBg {
padding: 0px 20px; padding: 0px 20px;
} }
.contentBg:before { .contentBg:before {
position: absolute; position: absolute;
content: ""; content: "";
background: #269DB8; background: #BE332F;
height: 140px; height: 140px;
width: 100%; width: 100%;
left: 0; left: 0;
top: 0px; top: 0px;
z-index: 1; z-index: 1;
} }
ion-content { ion-content {
--ion-background-color: whitesmoke; --ion-background-color: whitesmoke;
} }
.request-heading { .request-heading {
padding-left: 15px; padding-left: 15px;
margin-top: 10px; margin-top: 10px;
span { span {
// display: block; // display: block;
// padding-top: 8px; // padding-top: 8px;
@ -53,7 +56,7 @@ ion-content {
} }
} }
.search-label{ .search-label {
// border: 1px solid #ccc; // border: 1px solid #ccc;
// margin-left: 15px; // margin-left: 15px;
// margin-right: 15px; // margin-right: 15px;
@ -80,8 +83,9 @@ ion-content {
border-radius: 20px; border-radius: 20px;
z-index: 1; z-index: 1;
border: 1px solid #ccc; border: 1px solid #ccc;
} }
.result-text-container {
.result-text-container {
padding: 0; padding: 0;
margin: 0; margin: 0;
position: absolute; position: absolute;
@ -90,12 +94,14 @@ ion-content {
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;
@ -103,35 +109,42 @@ ion-content {
font-size: 12px; font-size: 12px;
font-family: workSans-Regular; font-family: workSans-Regular;
} }
} }
.today-graph {
.today-graph {
width: 100%; width: 100%;
max-height: 4cm; max-height: 4cm;
} }
.swiper-container { .swiper-container {
margin: 0 !important; margin: 0 !important;
width: 100% !important; width: 100% !important;
} }
.filters-row { .filters-row {
margin-top: 10px; margin-top: 10px;
} }
.search-input { .search-input {
margin-top: 15px; margin-top: 15px;
background: white; background: white;
border-radius: 15px; border-radius: 15px;
ion-input { ion-input {
border-bottom-color: transparent; border-bottom-color: transparent;
} }
} }
.search-dropdown{
background: #269DB8; .search-dropdown {
background: #BE332F;
ion-select { ion-select {
.select-text{ .select-text {
margin-left: -10px; margin-left: -10px;
} }
.select-icon{
.select-icon-inner{ .select-icon {
.select-icon-inner {
opacity: 1; opacity: 1;
color: white; color: white;
margin-top: -1px; margin-top: -1px;
@ -139,36 +152,41 @@ ion-content {
} }
} }
} }
.input-container{
.input-container {
background: white; background: white;
ion-input{
ion-input {
border-bottom-color: transparent; border-bottom-color: transparent;
} }
} }
.user-image-container{ .user-image-container {
position: relative; position: relative;
width: 80px; width: 80px;
height: 80px; height: 80px;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
&:before{
position: absolute; &:before {
content: ""; position: absolute;
width: 20px; content: "";
height: 20px; width: 20px;
border-radius: 20px; height: 20px;
border: 1px solid white; border-radius: 20px;
top: 0; border: 1px solid white;
right: 0; top: 0;
background-color: red; right: 0;
z-index: 9; background-color: red;
} z-index: 9;
&.present:before{ }
background-color: green !important;
} &.present:before {
background-color: green !important;
}
} }
.user-image{
.user-image {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
display: block; display: block;
@ -179,7 +197,7 @@ ion-content {
margin: 0px auto 6px; margin: 0px auto 6px;
} }
.search-container{ .search-container {
// margin-top: 15px; // margin-top: 15px;
// margin-top: -35px; // margin-top: -35px;
// margin-left: 262px; // margin-left: 262px;
@ -189,18 +207,21 @@ ion-content {
top: 45px; top: 45px;
right: 38px; right: 38px;
z-index: 999999; z-index: 999999;
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;
} }
@ -215,19 +236,19 @@ ion-content {
// } // }
@media only screen and (max-width: 375px) { @media only screen and (max-width: 375px) {
.text-label{ .text-label {
margin-left: 6px !important; margin-left: 6px !important;
} }
} }
@media only screen and (max-width: 320px) { @media only screen and (max-width: 320px) {
.text-label{ .text-label {
margin-left: 2px !important; margin-left: 2px !important;
} }
} }
.text-label{ .text-label {
// --color: black !important; // --color: black !important;
// font-size: 13px; // font-size: 13px;
// margin-left: 15px; // margin-left: 15px;
@ -242,9 +263,9 @@ ion-content {
opacity: 1; opacity: 1;
margin-left: 15px; margin-left: 15px;
margin-right: 18px; margin-right: 18px;
} }
.radio-list{ .radio-list {
background: white; background: white;
// margin-left: 18px; // margin-left: 18px;
/* margin-right: 10px; */ /* margin-right: 10px; */
@ -256,18 +277,20 @@ ion-content {
// color: red; // color: red;
// } // }
.radio-icon{ .radio-icon {
.custom-radio .radio-icon { .custom-radio .radio-icon {
margin: 0px; margin: 0px;
border-radius: 50%; border-radius: 50%;
border-width: var(--border-width); border-width: var(--border-width);
border-style: var(--border-style); border-style: var(--border-style);
border-color: #dcdcdc; border-color: #dcdcdc;
margin-top: 6px !important; margin-top: 6px !important;
border-color: #d8d4d4 !important;} border-color: #d8d4d4 !important;
}
} }
.text{
.text {
// font-size: 16px; // font-size: 16px;
// font-weight: bolder; // font-weight: bolder;
// font-family: 'WorkSans-Bold'; // font-family: 'WorkSans-Bold';
@ -289,7 +312,7 @@ ion-content {
// height: 21px; // height: 21px;
// padding-right: -10px; // padding-right: -10px;
// border-radius: 100%; // border-radius: 100%;
// background-color: #269DB8; // background-color: #BE332F;
// z-index: 9; // z-index: 9;
// margin-top: 26px; // margin-top: 26px;
// } // }
@ -301,25 +324,27 @@ ion-content {
// margin-left: 3px; // margin-left: 3px;
// padding-top: 2px; // padding-top: 2px;
// } // }
.number{ .number {
width: 22px; width: 22px;
height: 20px; height: 20px;
border-radius: 100%; border-radius: 100%;
background-color: #269DB8; background-color: #BE332F;
z-index: 9; z-index: 9;
margin-top: 25px; margin-top: 25px;
padding-left: 4px; padding-left: 4px;
} }
.number-ar{
.number-ar {
width: 22px; width: 22px;
height: 20px; height: 20px;
border-radius: 100%; border-radius: 100%;
background-color: #269DB8; background-color: #BE332F;
z-index: 9; z-index: 9;
margin-top: 25px; margin-top: 25px;
padding-right: 4px; padding-right: 4px;
} }
.numberEmp{
.numberEmp {
color: white; color: white;
font-size: 12px; font-size: 12px;
font-weight: bolder; font-weight: bolder;
@ -329,14 +354,15 @@ ion-content {
width: 23px; width: 23px;
height: 23px; height: 23px;
border-radius: 100%; border-radius: 100%;
background-color: #269DB8; background-color: #BE332F;
z-index: 9; z-index: 9;
margin-top: 25px; margin-top: 25px;
/* padding-left: 4px; */ /* padding-left: 4px; */
text-align: center; text-align: center;
padding-top: 3px; padding-top: 3px;
} }
.numberEmp-ar{
.numberEmp-ar {
color: white; color: white;
font-size: 12px; font-size: 12px;
font-weight: bolder; font-weight: bolder;
@ -346,16 +372,17 @@ ion-content {
width: 23px; width: 23px;
height: 23px; height: 23px;
border-radius: 100%; border-radius: 100%;
background-color: #269DB8; background-color: #BE332F;
z-index: 9; z-index: 9;
margin-top: 25px; margin-top: 25px;
/* padding-left: 4px; */ /* padding-left: 4px; */
text-align: center; text-align: center;
padding-top: 3px; padding-top: 3px;
} }
.div{
.div {
position: relative; position: relative;
display: flex; display: flex;
// justify-content: space-between; // justify-content: space-between;
margin-bottom: -12px; margin-bottom: -12px;
} }

@ -32,7 +32,7 @@ export class HomeComponent implements OnInit {
myColor: string = 'secondary'; myColor: string = 'secondary';
public EmpTotal = []; public EmpTotal = [];
public EmployeeTotal: any; public EmployeeTotal: any;
public direction:any; public direction: any;
public options = { public options = {
cutoutPercentage: 80, cutoutPercentage: 80,
@ -41,13 +41,13 @@ export class HomeComponent implements OnInit {
}; };
public data = { public data = {
datasets: [ datasets: [
{ {
data: [100], data: [100],
backgroundColor: [ backgroundColor: [
'#269DB8' '#BE332F'
], ],
borderWidth: 5 borderWidth: 5
}] }]
}; };
// public filters = [ // public filters = [
// { // {
@ -104,15 +104,15 @@ export class HomeComponent implements OnInit {
} }
ngOnInit() { ngOnInit() {
this.common.sharedService.setSharedData( [], DetailsComponent.opendEmployeesARR); this.common.sharedService.setSharedData([], DetailsComponent.opendEmployeesARR);
this.setIntitial(); this.setIntitial();
// this.getSuborinatesAttStatus(); // this.getSuborinatesAttStatus();
} }
toggleColor() { toggleColor() {
this.myColor = 'secondary'; this.myColor = 'secondary';
// this.myColor = '#269DB8' // this.myColor = '#BE332F'
} }
// activeFilter(index: number) { // activeFilter(index: number) {
// this.previousActiveIndex = this.currentActiveIndex; // this.previousActiveIndex = this.currentActiveIndex;
@ -144,23 +144,23 @@ export class HomeComponent implements OnInit {
this.empSubordinate = this.arrList; this.empSubordinate = this.arrList;
this.isSearch = false; this.isSearch = false;
} }
if(this.searchKeySelect === 'Name'){ if (this.searchKeySelect === 'Name') {
this.empSubordinate = this.arrList.filter((item) => { this.empSubordinate = this.arrList.filter((item) => {
this.isSearch = true; this.isSearch = true;
return (item.EMPLOYEE_NAME.toLowerCase().indexOf(val.toLowerCase()) > -1); return (item.EMPLOYEE_NAME.toLowerCase().indexOf(val.toLowerCase()) > -1);
}); });
} else if(this.searchKeySelect === 'User Name'){ } else if (this.searchKeySelect === 'User Name') {
this.empSubordinate = this.arrList.filter((item) => { this.empSubordinate = this.arrList.filter((item) => {
this.isSearch = true; this.isSearch = true;
return (item.EMPLOYEE_NUMBER.toLowerCase().indexOf(val.toLowerCase()) > -1); return (item.EMPLOYEE_NUMBER.toLowerCase().indexOf(val.toLowerCase()) > -1);
}); });
} else if(this.searchKeySelect === 'Email'){ } else if (this.searchKeySelect === 'Email') {
this.empSubordinate = this.arrList.filter((item) => { this.empSubordinate = this.arrList.filter((item) => {
this.isSearch = true; this.isSearch = true;
return (item.EMPLOYEE_EMAIL_ADDRESS.toLowerCase().indexOf(val.toLowerCase()) > -1); return (item.EMPLOYEE_EMAIL_ADDRESS.toLowerCase().indexOf(val.toLowerCase()) > -1);
}); });
} }
} }
getEmpSubordinate() { getEmpSubordinate() {
@ -186,57 +186,57 @@ export class HomeComponent implements OnInit {
}; };
this.getEmployeeSubordinatesRequestObject = body; this.getEmployeeSubordinatesRequestObject = body;
this.myTeamService.getEmployeeSubordinates(body).subscribe((result: any) => { this.myTeamService.getEmployeeSubordinates(body).subscribe((result: any) => {
if (this.common.validResponse(result)) { if (this.common.validResponse(result)) {
if (!this.pageFirstVisit) { if (!this.pageFirstVisit) {
this.pageFirstVisit = true; this.pageFirstVisit = true;
this.totalEmployees = result.P_NUM_OF_SUBORDINATES; this.totalEmployees = result.P_NUM_OF_SUBORDINATES;
}
this.handleEmpResult(result.GetEmployeeSubordinatesList);
} }
this.handleEmpResult(result.GetEmployeeSubordinatesList);
}
}); });
} }
handleEmpResult(result) { handleEmpResult(result) {
this.EmployeeTotal = result.length; this.EmployeeTotal = result.length;
const lastItemIndex = result.length - 1; const lastItemIndex = result.length - 1;
const lastItem = result[lastItemIndex]; const lastItem = result[lastItemIndex];
if (lastItem) { if (lastItem) {
if (lastItem.NO_OF_ROWS === lastItem.ROW_NUM) { if (lastItem.NO_OF_ROWS === lastItem.ROW_NUM) {
this.isReachEnd = true; this.isReachEnd = true;
if (this.infiniteScroll) { if (this.infiniteScroll) {
this.infiniteScroll.complete(); this.infiniteScroll.complete();
}
} else {
this.isReachEnd = false;
if (this.infiniteScroll) {
this.infiniteScroll.complete();
}
} }
} } else {
if (this.common.hasData(result)) { this.isReachEnd = false;
this.getEmployeeSubordinatesRequestObject.P_PAGE_NUM++; if (this.infiniteScroll) {
if (this.empSubordinate.length === 0) { this.infiniteScroll.complete();
this.empSubordinate = result;
} else {
this.empSubordinate = this.empSubordinate.concat(result);
} }
}
}
if (this.common.hasData(result)) {
this.getEmployeeSubordinatesRequestObject.P_PAGE_NUM++;
if (this.empSubordinate.length === 0) {
this.empSubordinate = result;
} else { } else {
this.empSubordinate = []; this.empSubordinate = this.empSubordinate.concat(result);
} }
this.arrList = this.empSubordinate; } else {
this.empSubordinate = [];
}
this.arrList = this.empSubordinate;
} }
doInfinite(infiniteScroll) { doInfinite(infiniteScroll) {
if (!this.isReachEnd) { if (!this.isReachEnd) {
this.myTeamService.getEmployeeSubordinates(this.getEmployeeSubordinatesRequestObject).subscribe((result: any) => { this.myTeamService.getEmployeeSubordinates(this.getEmployeeSubordinatesRequestObject).subscribe((result: any) => {
if (this.common.validResponse(result)) { if (this.common.validResponse(result)) {
this.handleEmpResult(result.GetEmployeeSubordinatesList); this.handleEmpResult(result.GetEmployeeSubordinatesList);
} }
this.infiniteScroll.complete(); this.infiniteScroll.complete();
}); });
} else { } else {
if (this.infiniteScroll) { if (this.infiniteScroll) {
this.infiniteScroll.complete(); this.infiniteScroll.complete();
} }
} }
} }
@ -283,7 +283,7 @@ export class HomeComponent implements OnInit {
} }
} }
// getSuborinatesAttStatus(){ // getSuborinatesAttStatus(){
// const request = { // const request = {
@ -295,7 +295,7 @@ export class HomeComponent implements OnInit {
// this.myTeamService.getSuborinatesAttStatus(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=> // this.myTeamService.getSuborinatesAttStatus(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=>
// { // {
// this.handleRespondSuborinatesAttStatusResult(result); // this.handleRespondSuborinatesAttStatusResult(result);
// }) // })
// } // }

@ -1,16 +1,16 @@
.confirmEitOkButton{ .confirmEitOkButton {
white-space: normal !important; white-space: normal !important;
text-transform: capitalize !important; text-transform: capitalize !important;
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
--background: #269DB8; --background: #BE332F;
width: 80% !important; width: 80% !important;
color: white!important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
} }
.team-member-container{ .team-member-container {
// background: white; // background: white;
// border-radius: 100px 20px 20px 100px; // border-radius: 100px 20px 20px 100px;
// margin-top: 15px; // margin-top: 15px;
@ -50,7 +50,7 @@
// background-color: green !important; // background-color: green !important;
// } // }
// } // }
.user-image{ .user-image {
// overflow: hidden; // overflow: hidden;
// position: relative; // position: relative;
// display: block; // display: block;
@ -70,10 +70,11 @@
} }
} }
.employee-name{ .employee-name {
display: inline-block; display: inline-block;
width: 80%; width: 80%;
.name{
.name {
// font-size: 16px; // font-size: 16px;
// color: black; // color: black;
// // margin: 0; // // margin: 0;
@ -84,51 +85,52 @@
// margin-left: -10px; // margin-left: -10px;
// margin-top: -5px; // margin-top: -5px;
// font-family: 'WorkSans-Bold'; // font-family: 'WorkSans-Bold';
font-size: 16px; font-size: 16px;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
margin-left: -10px; margin-left: -10px;
margin-top: -5px; margin-top: -5px;
text-align: left; text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 25px; line-height: 25px;
letter-spacing: -0.64px; letter-spacing: -0.64px;
color: #2B353E; color: #2B353E;
opacity: 1; opacity: 1;
} }
.title{ .title {
// font-size: 13px; // font-size: 13px;
// color: #888; // color: #888;
// width: 100%; // width: 100%;
// text-overflow: ellipsis; // text-overflow: ellipsis;
// white-space: nowrap; // white-space: nowrap;
// overflow: hidden; // overflow: hidden;
// display: block; // display: block;
// margin-left: -10px; // margin-left: -10px;
// margin-top: -6px; // margin-top: -6px;
// color: black; // color: black;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 12px; line-height: 12px;
letter-spacing: -0.56px; letter-spacing: -0.56px;
color: #575757; color: #575757;
opacity: 1; opacity: 1;
font-size: 14px; font-size: 14px;
width: 100%; width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
display: block; display: block;
margin-left: -10px; margin-left: -10px;
margin-top: -10px; margin-top: -10px;
} }
} }
.employee-name-ar{ .employee-name-ar {
display: inline-block; display: inline-block;
width: 80%; width: 80%;
.name{
.name {
// font-size: 16px; // font-size: 16px;
// color: black; // color: black;
// // margin: 0; // // margin: 0;
@ -139,61 +141,64 @@
// margin-left: -10px; // margin-left: -10px;
// margin-top: -5px; // margin-top: -5px;
// font-family: 'WorkSans-Bold'; // font-family: 'WorkSans-Bold';
font-size: 16px; font-size: 16px;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
margin-left: -10px; margin-left: -10px;
margin-top: -5px; margin-top: -5px;
text-align: right; text-align: right;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 25px; line-height: 25px;
letter-spacing: -0.64px; letter-spacing: -0.64px;
color: #2B353E; color: #2B353E;
opacity: 1; opacity: 1;
} }
.title{ .title {
// font-size: 13px; // font-size: 13px;
// color: #888; // color: #888;
// width: 100%; // width: 100%;
// text-overflow: ellipsis; // text-overflow: ellipsis;
// white-space: nowrap; // white-space: nowrap;
// overflow: hidden; // overflow: hidden;
// display: block; // display: block;
// margin-left: -10px; // margin-left: -10px;
// margin-top: -6px; // margin-top: -6px;
// color: black; // color: black;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 12px; line-height: 12px;
letter-spacing: -0.56px; letter-spacing: -0.56px;
color: #575757; color: #575757;
opacity: 1; opacity: 1;
font-size: 14px; font-size: 14px;
width: 100%; width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
display: block; display: block;
margin-left: -10px; margin-left: -10px;
margin-top: -10px; margin-top: -10px;
} }
} }
.image-container{
.image-container {
width: 20%; width: 20%;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
vertical-align: top; vertical-align: top;
margin-top: 5px; margin-top: 5px;
} }
.swipe-information{
.swipe-information {
color: #888; color: #888;
font-size: 12px; font-size: 12px;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
padding-top: 6px; padding-top: 6px;
margin-top: 6px; margin-top: 6px;
.check-in { .check-in {
font-size: 12px; font-size: 12px;
margin-right: 15px; margin-right: 15px;
} }
} }

@ -270,7 +270,7 @@ ion-title {
.contentBg:before { .contentBg:before {
position: absolute; position: absolute;
content: ""; content: "";
background: #269DB8; background: #BE332F;
height: 140px; height: 140px;
width: 100%; width: 100%;
left: 0; left: 0;
@ -423,7 +423,7 @@ ion-content {
border-radius: 50%; border-radius: 50%;
width: 15px; width: 15px;
height: 15px; height: 15px;
background-color: #269db8; background-color: #BE332F;
top: 1px; top: 1px;
} }
@ -498,7 +498,7 @@ ion-content {
.text-span-active { .text-span-active {
font-size: 12px; font-size: 12px;
color: white; color: white;
background-color: #269DB8; background-color: #BE332F;
width: auto; width: auto;
height: 40px; height: 40px;
border: 1px solid; border: 1px solid;

@ -3,39 +3,46 @@ ion-card-content.card-content.card-content-ios {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
} }
.col { .col {
//border: #dedede solid 1px; //border: #dedede solid 1px;
padding: 2px !important; padding: 2px !important;
text-align: center; text-align: center;
font-size: 15px; font-size: 15px;
} }
.item-md.item-block .item-inner, .item-md.item-block .item-inner,
.item-ios.item-block .item-inner { .item-ios.item-block .item-inner {
padding: 0px !important; padding: 0px !important;
} }
.itemAH { .itemAH {
padding: 0px !important padding: 0px !important;
;
font-size: 13px; font-size: 13px;
} }
.gridAH { .gridAH {
text-align: center; text-align: center;
padding: 5px 5px !important; padding: 5px 5px !important;
border-radius: 5px; border-radius: 5px;
} }
.rowAH { .rowAH {
white-space: normal; white-space: normal;
.col { .col {
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
} }
} }
.Header { .Header {
font-weight: bold; font-weight: bold;
// font-family: "WorkSans-SemiBold" !important; // font-family: "WorkSans-SemiBold" !important;
color: #1a586d; color: #c6903e;
// padding: 0px !important; // padding: 0px !important;
// margin: 0px !important; // margin: 0px !important;
} }
.titleH { .titleH {
//background-color:$custgreen; //background-color:$custgreen;
//height: 40px; //height: 40px;
@ -45,18 +52,24 @@ ion-card-content.card-content.card-content-ios {
border-top-right-radius: 5px; border-top-right-radius: 5px;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-bottom: 0px; border-bottom: 0px;
.col { .col {
border: 0px; border: 0px;
} }
} }
ion-label.label.label-md, ion-label.label.label-md,
ion-label.label.label-ios { ion-label.label.label-ios {
margin: 0px; margin: 0px;
} }
.rowAH .col{
.rowAH .col {
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
padding: 2px !important; padding: 2px !important;
text-align: center; text-align: center;
font-size: 15px; font-size: 15px;
} }
.ion-card-content{padding:0;}
.ion-card-content {
padding: 0;
}

@ -1,3 +1,3 @@
.header-toolbar-new{ .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }

@ -154,7 +154,7 @@
<ion-col size='3'> <ion-col size='3'>
<button [disabled]='searchKey == undefined || 1 > searchKey.length' (click)='onChangeInput()' <button [disabled]='searchKey == undefined || 1 > searchKey.length' (click)='onChangeInput()'
style="--background: white; background: transparent; margin-top: 4px; --background-hover: transparent !important;"> style="--background: white; background: transparent; margin-top: 4px; --background-hover: transparent !important;">
<ion-label><p style="color: #269db8;">{{"general, search" | translate}}</p></ion-label> <ion-label><p style="color: #BE332F;">{{"general, search" | translate}}</p></ion-label>
</button> </button>
</ion-col> </ion-col>
</ion-row> </ion-row>

@ -9,7 +9,7 @@
} }
ion-radio { ion-radio {
--color-checked: #269db8; --color-checked: #BE332F;
} }
.center { .center {
@ -247,7 +247,7 @@ button.item-button.button.button-md.button-clear.button-clear-md {
} }
ion-radio { ion-radio {
--color-checked: #269db8; --color-checked: #BE332F;
} }
.center { .center {
@ -313,7 +313,7 @@ ion-radio {
} }
.isFavLetterActive { .isFavLetterActive {
color: #269db8; color: #BE332F;
display: block; display: block;
width: 60%; width: 60%;
float: right; float: right;
@ -328,7 +328,7 @@ ion-radio {
.searchText { .searchText {
background: transparent; background: transparent;
color: #269db8; color: #BE332F;
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline;
} }

@ -73,7 +73,7 @@
</ion-col> </ion-col>
<ion-col size='3'> <ion-col size='3'>
<button [disabled]='inputSearch == undefined || inputSearch.length < 1' (click)='onChangeInput()' style="--background: white;background: transparent;--background-hover: transparent !important; margin-top: 4px;"> <button [disabled]='inputSearch == undefined || inputSearch.length < 1' (click)='onChangeInput()' style="--background: white;background: transparent;--background-hover: transparent !important; margin-top: 4px;">
<ion-label><p style="color: #269db8;">{{"general, search" | translate}}</p></ion-label> <ion-label><p style="color: #BE332F;">{{"general, search" | translate}}</p></ion-label>
</button> </button>
</ion-col> </ion-col>
</ion-row> </ion-row>

@ -160,7 +160,7 @@ button.item-button.button.button-md.button-clear.button-clear-md {
} }
ion-radio { ion-radio {
--color-checked: #269db8; --color-checked: #BE332F;
} }
.center { .center {
@ -228,10 +228,10 @@ ion-radio {
} }
.isFavLetterActive { .isFavLetterActive {
// background: #269db8; // background: #BE332F;
// width: 55px; // width: 55px;
// border-radius: 60px; // border-radius: 60px;
color: #269db8; color: #BE332F;
display: block; display: block;
width: 60%; width: 60%;
float: right; float: right;
@ -253,7 +253,7 @@ ion-radio {
.searchText { .searchText {
background: transparent; background: transparent;
color: #269db8; color: #BE332F;
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline;
} }

@ -1,50 +1,56 @@
.no-padding-label { .no-padding-label {
padding: 0px !important; padding: 0px !important;
} }
.margin-left { .margin-left {
margin-left: 0px; margin-left: 0px;
} }
.active-Segment { .active-Segment {
font-size: 0.3cm !important; font-size: 0.3cm !important;
background: #269DB8 !important; background: #BE332F !important;
text-transform: none; text-transform: none;
--color-checked: none; --color-checked: none;
border-radius: 100px; border-radius: 100px;
border:0; border: 0;
} }
.active-Segment ion-label{
font-size: 11px; .active-Segment ion-label {
color: white !important; font-size: 11px;
} color: white !important;
.normal-Segment ion-label{ }
color: black !important;
font-size: 11px; .normal-Segment ion-label {
} color: black !important;
.normal-Segment { font-size: 11px;
font-size: 0.3cm !important; }
text-transform: none;
--color-checked: none; .normal-Segment {
border: 0; font-size: 0.3cm !important;
} text-transform: none;
.action-btn { --color-checked: none;
white-space: nowrap; border: 0;
font-size: 10px; }
}
.name{ .action-btn {
color:black !important ;font-weight: bold; white-space: nowrap;
} font-size: 10px;
.timeline-item{ }
margin: 0;
white-space: nowrap; .name {
font-size: 10px; color: black !important;
} font-weight: bold;
.req_info{ }
width: 20px;
height: 20px; .timeline-item {
display: inline-block; margin: 0;
margin:15px 10px 0px 0px; white-space: nowrap;
} font-size: 10px;
}
.req_info {
width: 20px;
height: 20px;
display: inline-block;
margin: 15px 10px 0px 0px;
}

@ -1,27 +1,31 @@
.no-padding-label { .no-padding-label {
padding: 0px !important; padding: 0px !important;
} }
.margin-left { .margin-left {
margin-left: 0px; margin-left: 0px;
} }
@media only screen and (max-width: 320px) { @media only screen and (max-width: 320px) {
.active-Segment { .active-Segment {
font-size: 0.3cm !important; font-size: 0.3cm !important;
background: #269DB8 !important; background: #BE332F !important;
text-transform: none; text-transform: none;
--color-checked: none; --color-checked: none;
border-radius: 100px; border-radius: 100px;
border:0; border: 0;
} }
.active-Segment ion-label{
.active-Segment ion-label {
font-size: 8px !important; font-size: 8px !important;
color: white !important; color: white !important;
} }
.normal-Segment ion-label{
.normal-Segment ion-label {
color: black; color: black;
font-size: 8px !important; font-size: 8px !important;
} }
.normal-Segment { .normal-Segment {
font-size: 0.3cm; font-size: 0.3cm;
text-transform: none; text-transform: none;
@ -29,44 +33,52 @@
border: 0; border: 0;
} }
} }
.active-Segment { .active-Segment {
font-size: 0.3cm !important; font-size: 0.3cm !important;
background: #269DB8 !important; background: #BE332F !important;
text-transform: none; text-transform: none;
--color-checked: none; --color-checked: none;
border-radius: 100px; border-radius: 100px;
border:0; border: 0;
} }
.active-Segment ion-label{
font-size: 11px;
color: white !important;
}
.normal-Segment ion-label{
color: black !important;
font-size: 11px;
}
.normal-Segment {
font-size: 0.3cm !important;
text-transform: none;
--color-checked: none;
border: 0;
}
.action-btn { .active-Segment ion-label {
white-space: nowrap; font-size: 11px;
font-size: 10px; color: white !important;
} }
.req_info{
width: 20px; .normal-Segment ion-label {
height: 20px; color: black !important;
display: inline-block; font-size: 11px;
margin: 15px 10px 0px 0px; }
}
.name{ .normal-Segment {
color:black !important ;font-weight: bold; font-size: 0.3cm !important;
} text-transform: none;
.timeline-item{ --color-checked: none;
margin: 0; border: 0;
white-space: nowrap; }
font-size: 10px;
} .action-btn {
white-space: nowrap;
font-size: 10px;
}
.req_info {
width: 20px;
height: 20px;
display: inline-block;
margin: 15px 10px 0px 0px;
}
.name {
color: black !important;
font-weight: bold;
}
.timeline-item {
margin: 0;
white-space: nowrap;
font-size: 10px;
}

@ -1,29 +1,31 @@
.no-padding-label { .no-padding-label {
padding: 0px !important; padding: 0px !important;
} }
.margin-left { .margin-left {
margin-left: 0px; margin-left: 0px;
} }
@media only screen and (max-width: 320px) { @media only screen and (max-width: 320px) {
.active-Segment { .active-Segment {
font-size: 0.3cm !important; font-size: 0.3cm !important;
background: #269DB8 !important; background: #BE332F !important;
text-transform: none; text-transform: none;
--color-checked: none; --color-checked: none;
border-radius: 100px; border-radius: 100px;
border:0; border: 0;
} }
.active-Segment ion-label{
.active-Segment ion-label {
font-size: 8px !important; font-size: 8px !important;
color: white !important; color: white !important;
} }
.normal-Segment ion-label{
.normal-Segment ion-label {
color: black; color: black;
font-size: 8px !important; font-size: 8px !important;
} }
.normal-Segment { .normal-Segment {
font-size: 0.3cm; font-size: 0.3cm;
text-transform: none; text-transform: none;
@ -33,45 +35,51 @@
} }
.active-Segment { .active-Segment {
font-size: 0.3cm; font-size: 0.3cm;
background: #269DB8 ; background: #BE332F;
text-transform: none; text-transform: none;
--color-checked: none; --color-checked: none;
border-radius: 100px; border-radius: 100px;
border:0; border: 0;
} }
.active-Segment ion-label{
font-size: 11px;
color: white !important;
}
.normal-Segment ion-label{
color: black;
font-size: 11px;
}
.normal-Segment {
font-size: 0.3cm;
text-transform: none;
--color-checked: none;
border: 0;
}
.action-btn { .active-Segment ion-label {
white-space: nowrap; font-size: 11px;
font-size: 10px; color: white !important;
} }
.name{
color:black !important ;font-weight: bold; .normal-Segment ion-label {
} color: black;
.timeline-item{ font-size: 11px;
margin: 0; }
white-space: nowrap;
font-size: 10px; .normal-Segment {
} font-size: 0.3cm;
.req_info{ text-transform: none;
width: 20px; --color-checked: none;
height: 20px; border: 0;
display: inline-block; }
margin: 15px 10px 0px 0px;
}
.action-btn {
white-space: nowrap;
font-size: 10px;
}
.name {
color: black !important;
font-weight: bold;
}
.timeline-item {
margin: 0;
white-space: nowrap;
font-size: 10px;
}
.req_info {
width: 20px;
height: 20px;
display: inline-block;
margin: 15px 10px 0px 0px;
}

@ -1,51 +1,57 @@
.no-padding-label { .no-padding-label {
padding: 0px !important; padding: 0px !important;
} }
.margin-left { .margin-left {
margin-left: 0px; margin-left: 0px;
} }
.active-Segment { .active-Segment {
font-size: 0.3cm !important; font-size: 0.3cm !important;
background: #269DB8 !important; background: #BE332F !important;
text-transform: none; text-transform: none;
--color-checked: none; --color-checked: none;
border-radius: 100px; border-radius: 100px;
border:0; border: 0;
} }
.active-Segment ion-label{
font-size: 11px; .active-Segment ion-label {
color: white !important; font-size: 11px;
} color: white !important;
.normal-Segment ion-label{ }
color: black !important;
font-size: 11px; .normal-Segment ion-label {
} color: black !important;
.normal-Segment { font-size: 11px;
font-size: 0.3cm !important; }
text-transform: none;
--color-checked: none; .normal-Segment {
border: 0; font-size: 0.3cm !important;
} text-transform: none;
.action-btn { --color-checked: none;
// white-space: pre-wrap; border: 0;
white-space: nowrap; }
font-size: 10px;
} .action-btn {
// white-space: pre-wrap;
.name{ white-space: nowrap;
color:black !important ;font-weight: bold; font-size: 10px;
} }
.timeline-item{
.name {
color: black !important;
font-weight: bold;
}
.timeline-item {
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;
font-size: 10px; font-size: 10px;
} }
.req_info{
.req_info {
width: 20px; width: 20px;
height: 20px; height: 20px;
display: inline-block; display: inline-block;
margin:15px 10px 0px 0px; margin: 15px 10px 0px 0px;
} }

@ -315,12 +315,12 @@
<ion-card-content> <ion-card-content>
<div> <div>
<ion-row> <ion-row>
<ion-col class="rowBorder" style="background: #269db8;"> <ion-col class="rowBorder" style="background: #BE332F;">
<ion-label> <ion-label>
<p style="color: white;">{{ 'general, current' | translate}}</p> <p style="color: white;">{{ 'general, current' | translate}}</p>
</ion-label> </ion-label>
</ion-col> </ion-col>
<ion-col class="rowBorder" style="background: #269db8;"> <ion-col class="rowBorder" style="background: #BE332F;">
<ion-label> <ion-label>
<p style="color: white;">{{ 'general, proposed' | translate}}</p> <p style="color: white;">{{ 'general, proposed' | translate}}</p>
</ion-label> </ion-label>

@ -1,264 +1,281 @@
.actionBtn {
height: auto;
.actionBtn{ min-height: 35px !important;
padding: 10px;
height: auto; font-size: 12px;
min-height: 35px !important; white-space: normal;
padding: 10px;
font-size: 12px; }
white-space: normal;
button.actionBtn.button.button-md,
} button.actionBtn.button.button-ios,
button.actionBtn.button.button-md, button.actionBtn.button.button {
button.actionBtn.button.button-ios, width: 90%;
button.actionBtn.button.button }
{
width: 90%; .actionBtnCol {
text-align: center;
}
.actionBtnGrid {
padding: 0px;
}
.notColBtn {
min-height: 150px !important;
padding: 0px;
background: transparent;
border: 2px solid #e4e5e7;
p {
color: var(--secondary);
margin-top: 0px;
margin-bottom: 0px;
font-weight: normal;
font-size: 14px;
white-space: normal;
padding: 3px 0px;
min-height: 50px;
} }
.actionBtnCol{
text-align: center; span {
display: block;
} }
.actionBtnGrid{
.serviceItemImg {
padding:0px; min-width: 60px !important;
min-height: 70px !important;
width: 70px;
height: 70px;
margin: 10px auto;
background: transparent !important;
} }
.notColBtn {
}
min-height: 150px !important;
padding: 0px; .notColBtn.button,
background: transparent; .notColBtn.button-md,
border: 2px solid #e4e5e7; .notColBtn.button-ios {
p{ background: transparent !important;
color: var(--secondary); color: var(--dark);
margin-top: 0px; margin-bottom:0px; box-shadow: none;
font-weight: normal; -webkit-box-shadow: none;
font-size: 14px; -moz-box-shadow: none;
white-space: normal; padding: 0px;
padding: 3px 0px; color: var(--secondary);
min-height: 50px; border: 2px solid var(--gray);
} min-width: auto;
span { }
display: block;
}
.serviceItemImg {
min-width: 60px !important;
min-height: 70px !important;
width: 70px;
height: 70px;
margin: 10px auto;
background: transparent !important;
}
}
.notColBtn.button,.notColBtn.button-md, .notColBtn.button-ios{
background: transparent !important;
color: var(--dark);
box-shadow: none;
-webkit-box-shadow:none;
-moz-box-shadow: none;
padding: 0px;
color: var(--secondary);
border: 2px solid var(--gray);
min-width: auto;
}
//////////////////////// ////////////////////////
.itemHISBtn{ .itemHISBtn {
padding: 5px; padding: 5px;
color: var(--light); color: var(--light);
background: var(--darkgray); background: var(--darkgray);
border-radius: 3px; border-radius: 3px;
width: 85%; width: 85%;
height: 40px; height: 40px;
} }
.rowBtn{ .rowBtn {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: white; background: white;
} }
.rowBorder{ .rowBorder {
border-bottom: solid 0.02cm var(--grayBG); border-bottom: solid 0.02cm var(--grayBG);
} }
.colBorder{
border-right: solid 0.02cm var(--grayBG); .colBorder {
border-right: solid 0.02cm var(--grayBG);
}
}
.dateActionHistory{
display: inline-block; .dateActionHistory {
margin-left: 5px; display: inline-block;
text-align: left; margin-left: 5px;
} text-align: left;
.req_info{ }
width: 25px;
height: 25px; .req_info {
display: inline-block; width: 25px;
margin: 0; height: 25px;
} display: inline-block;
margin: 0;
.deligate{ }
margin-left: 25px;
} .deligate {
.actionBtn{ margin-left: 25px;
--border-radius: 50% !important; }
height: 55px;
width: 55px; .actionBtn {
--background: var(--newgreen); // will be dynamic --border-radius: 50% !important;
background: transparent; height: 55px;
margin:10px; width: 55px;
} --background: var(--newgreen); // will be dynamic
background: transparent;
.itemAttch{ margin: 10px;
border-radius: 11px; }
margin: 8px;
--min-height: 60px; .itemAttch {
--max-height: 60px; border-radius: 11px;
} margin: 8px;
--min-height: 60px;
.less { --max-height: 60px;
max-height: 54px; }
}
.less {
.noDataDiv{ max-height: 54px;
background: #ffffff; }
height: 11%;
text-align: center; .noDataDiv {
padding-top: 1px; background: #ffffff;
border-radius: 10px; height: 11%;
margin: 10px; text-align: center;
} padding-top: 1px;
border-radius: 10px;
.no-data-div{ margin: 10px;
background: #ffffff; }
height: 100%;
text-align: center; .no-data-div {
padding-top: 1px; background: #ffffff;
border-radius: 10px; height: 100%;
margin: 10px; text-align: center;
} padding-top: 1px;
border-radius: 10px;
.container { margin: 10px;
font-size: 14px; }
line-height: 14px;
height: 15px; .container {
overflow: hidden; font-size: 14px;
text-align: justify; line-height: 14px;
} height: 15px;
overflow: hidden;
.show { text-align: justify;
overflow: visible; }
height: auto;
} .show {
overflow: visible;
.showMore{ height: auto;
padding: 0px; }
background: transparent;
color: blue; .showMore {
text-decoration: underline; padding: 0px;
font-size: 14px; background: transparent;
} color: blue;
text-decoration: underline;
// .succssfullMSG{ font-size: 14px;
// height: 100%; }
// width: 100%;
// background: var(--newgreen); // .succssfullMSG{
// color: white; // height: 100%;
// font-weight: bold; // width: 100%;
// font-size: 20px; // background: var(--newgreen);
// text-align: center; // color: white;
// vertical-align: middle; // font-weight: bold;
// padding-top: 30px; // font-size: 20px;
// } // text-align: center;
// vertical-align: middle;
// .succssfullIcon{ // padding-top: 30px;
// width: 60%; // }
// text-align: center;
// height: 36%; // .succssfullIcon{
// padding-top: 100px; // width: 60%;
// } // text-align: center;
//////////////////////////////// // height: 36%;
.subOrdinateList{ // padding-top: 100px;
// margin: 10px; // }
// border-top-left-radius: 45px; ////////////////////////////////
// border-bottom-left-radius: 45px; .subOrdinateList {
// border: var(--cusgray) 1px solid !important; // margin: 10px;
--background: transparent; // border-top-left-radius: 45px;
margin-left: -15px; // border-bottom-left-radius: 45px;
margin-right: 6px; // border: var(--cusgray) 1px solid !important;
margin-bottom:8px; --background: transparent;
} margin-left: -15px;
.status{ margin-right: 6px;
margin-bottom: 8px;
}
.status {
text-align: center; text-align: center;
// background: green; // background: green;
border-radius: 10px; border-radius: 10px;
font-size: 10px !important; font-size: 10px !important;
height: 40px; height: 40px;
color: white; color: white;
position: relative; position: relative;
} }
.rowHeader{
.rowHeader {
border-bottom: 1px solid var(--cusgray); border-bottom: 1px solid var(--cusgray);
padding-bottom: 10px; padding-bottom: 10px;
margin-bottom: -17px; margin-bottom: -17px;
} }
.container{ .container {
position:relative; position: relative;
} }
.overflow-hid-div{
overflow:hidden; .overflow-hid-div {
margin-left:50px; overflow: hidden;
width:200px; margin-left: 50px;
width: 200px;
height: 200px; height: 200px;
background-color:red; background-color: red;
} }
.inner{
width:50px; .inner {
width: 50px;
height: 50px; height: 50px;
background-color:green; background-color: green;
position: absolute; position: absolute;
left:25px; left: 25px;
top:25px; top: 25px;
} }
.gridSubordinates{
margin-left: 3%;//38px; .gridSubordinates {
border-top-left-radius: 16px;//28px; margin-left: 3%; //38px;
border-bottom-left-radius: 16px;//40px; border-top-left-radius: 16px; //28px;
// padding-left: 8px; border-bottom-left-radius: 16px; //40px;
background:var(--light); // padding-left: 8px;
border-top-right-radius: 16px; background: var(--light);
border-bottom-right-radius: 16px; border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
} }
.subOrdinateDiv{ .subOrdinateDiv {
z-index: 4; z-index: 4;
margin-left: 0px;//-32px; margin-left: 0px; //-32px;
// position: absolute; // position: absolute;
top: 5px;//-2px; top: 5px; //-2px;
float: left; float: left;
margin-right: 10px; margin-right: 10px;
} }
.subOrdinateImg{
width: 85px; .subOrdinateImg {
border: #e4e4e4 solid 2px; width: 85px;
-moz-border-radius: 50%; border: #e4e4e4 solid 2px;
border-radius: 50%; -moz-border-radius: 50%;
border: 3px solid #f0efef; border-radius: 50%;
border: 3px solid #f0efef;
} }
.subOrdinateRow{ .subOrdinateRow {
margin-left: 55px; margin-left: 55px;
} }
@ -270,7 +287,8 @@ position: relative;
margin-right: -13px; margin-right: -13px;
margin-bottom: 8px; margin-bottom: 8px;
} }
.gridSubordinates-Ar{
.gridSubordinates-Ar {
border-top-right-radius: 28px; border-top-right-radius: 28px;
border-bottom-right-radius: 40px; border-bottom-right-radius: 40px;
background: var(--light); background: var(--light);
@ -289,39 +307,46 @@ position: relative;
position: absolute; position: absolute;
top: -2px; top: -2px;
} }
/////////////////////////////////////////////// ///////////////////////////////////////////////
.label{ .label {
font-size: 14px; font-size: 14px;
} }
.subjectNotification{ .subjectNotification {
text-align: center; text-align: center;
padding-top: 10px; padding-top: 10px;
font-weight: bold; font-weight: bold;
} }
.action-history ion-card-content{
padding:0; .action-history ion-card-content {
padding: 0;
} }
ion-card.action-history { ion-card.action-history {
margin:10px margin: 10px
} }
.submitterInfo{
.submitterInfo {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
} }
ion-card{
ion-card {
color: black !important; color: black !important;
} }
//// ////
.tabBar{ .tabBar {
height:70px height: 70px
} }
.cardAlignTextEn{ .cardAlignTextEn {
text-align: left; text-align: left;
} }
.cardAlignTextAr{
.cardAlignTextAr {
text-align: right; text-align: right;
} }
@ -331,34 +356,41 @@ ion-card{
.active-Segment { .active-Segment {
font-size: 0.3cm !important; font-size: 0.3cm !important;
background: #269DB8 !important; background: #BE332F !important;
text-transform: none; text-transform: none;
--color-checked: none; --color-checked: none;
border-radius: 100px; border-radius: 100px;
border:0; border: 0;
} }
.active-Segment ion-label{
.active-Segment ion-label {
font-size: 11px; font-size: 11px;
color: white !important; color: white !important;
} }
.normal-Segment ion-label{
.normal-Segment ion-label {
color: black !important; color: black !important;
font-size: 11px; font-size: 11px;
} }
.normal-Segment { .normal-Segment {
font-size: 0.3cm !important; font-size: 0.3cm !important;
text-transform: none; text-transform: none;
--color-checked: none; --color-checked: none;
border: 0; border: 0;
} }
.action-btn { .action-btn {
white-space: pre-wrap; white-space: pre-wrap;
font-size: 11px; font-size: 11px;
} }
.name{
color:black !important ;font-weight: bold; .name {
color: black !important;
font-weight: bold;
} }
.timeline-item{
.timeline-item {
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;
font-size: 10px; font-size: 10px;

@ -1,7 +1,7 @@
.header-toolbar{ .header-toolbar {
--background: #269DB8; --background: #BE332F;
} }
ion-toggle{ ion-toggle {
--background-checked: #269DB8; --background-checked: #BE332F;
} }

@ -75,7 +75,7 @@
} }
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.colorBG { .colorBG {
@ -83,7 +83,7 @@
} }
.header-div { .header-div {
background-color: #269DB8; background-color: #BE332F;
text-transform: capitalize; text-transform: capitalize;
height: 119px; height: 119px;
position: relative; position: relative;
@ -323,7 +323,7 @@
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
/* border-radius: 12px !important; */ /* border-radius: 12px !important; */
background: #269DB8; background: #BE332F;
border-bottom: 1px solid #a7a4a4; border-bottom: 1px solid #a7a4a4;
border-top: 1px solid #cac8c8; border-top: 1px solid #cac8c8;
margin-left: -13px; margin-left: -13px;
@ -377,7 +377,7 @@
left: 83%; left: 83%;
bottom: 117px; bottom: 117px;
color: black; color: black;
background-color: #269DB8; background-color: #BE332F;
width: 16%; width: 16%;
height: 6px; height: 6px;
} }
@ -387,13 +387,13 @@
// left: 77%; // left: 77%;
// bottom: 117px; // bottom: 117px;
// color: black; // color: black;
// background-color: #269DB8; // background-color: #BE332F;
// width: 20%; height: 6px; // width: 20%; height: 6px;
position: relative; position: relative;
left: 4%; left: 4%;
bottom: 117px; bottom: 117px;
color: black; color: black;
background-color: #269DB8; background-color: #BE332F;
width: 15%; width: 15%;
height: 6px; height: 6px;
} }
@ -405,7 +405,7 @@
left: 83%; left: 83%;
bottom: 67px; bottom: 67px;
color: black; color: black;
background-color: #269DB8; background-color: #BE332F;
width: 16%; width: 16%;
height: 6px; height: 6px;
} }
@ -415,13 +415,13 @@
// left: 77%; // left: 77%;
// bottom: 67px; // bottom: 67px;
// color: black; // color: black;
// background-color: #269DB8; // background-color: #BE332F;
// width: 20%; height: 6px; // width: 20%; height: 6px;
position: relative; position: relative;
left: 4%; left: 4%;
bottom: 67px; bottom: 67px;
color: black; color: black;
background-color: #269DB8; background-color: #BE332F;
width: 15%; width: 15%;
height: 6px; height: 6px;
} }

@ -1,11 +1,11 @@
import { Component, OnInit, ViewChild, SimpleChanges } from '@angular/core'; import { Component, OnInit, ViewChild, SimpleChanges } from '@angular/core';
import {PayslipService} from '../service/payslip.service' import { PayslipService } from '../service/payslip.service'
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service'; import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
import { CommonService } from 'src/app/hmg-common/services/common/common.service'; import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-response'; import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-response';
import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.service'; import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.service';
import { DeductionRequest } from '../model/deductionReq'; import { DeductionRequest } from '../model/deductionReq';
import { IonInfiniteScroll,IonSlides} from '@ionic/angular'; import { IonInfiniteScroll, IonSlides } from '@ionic/angular';
import { AuthenticationService } from "src/app/hmg-common/services/authentication/authentication.service"; import { AuthenticationService } from "src/app/hmg-common/services/authentication/authentication.service";
import { AuthenticatedUser } from "src/app/hmg-common/services/authentication/models/authenticated-user"; import { AuthenticatedUser } from "src/app/hmg-common/services/authentication/models/authenticated-user";
import { UIChart } from 'primeng/components/chart/chart'; import { UIChart } from 'primeng/components/chart/chart';
@ -19,99 +19,100 @@ export class HomeComponent implements OnInit {
selEmp: string; selEmp: string;
respID: number; respID: number;
selMenu: MenuResponse; selMenu: MenuResponse;
GetPayslipList:any=''; GetPayslipList: any = '';
GetSummaryOfPaymentList:any=''; GetSummaryOfPaymentList: any = '';
GetPaymentInformationList:any=''; GetPaymentInformationList: any = '';
showPaySlip:any=[]; showPaySlip: any = [];
ActionContextID:any; ActionContextID: any;
public static ACTION_CONTEXT_ID = "passActionContectID"; public static ACTION_CONTEXT_ID = "passActionContectID";
GetEarningsList: any=''; GetEarningsList: any = '';
GetDeductionsList: any=''; GetDeductionsList: any = '';
earingTotal: any; earingTotal: any;
deductionTotal: any; deductionTotal: any;
firstPayslip: any; firstPayslip: any;
defultSelected: any; defultSelected: any;
IsReachEnd: any; IsReachEnd: any;
private deductionReq: DeductionRequest; private deductionReq: DeductionRequest;
doinfiniteDedReq:any; doinfiniteDedReq: any;
doinfinitEarReq:any; doinfinitEarReq: any;
personalInfo: any; personalInfo: any;
setImage:any; setImage: any;
imageSrc: any = "../assets/imgs/profile.png"; imageSrc: any = "../assets/imgs/profile.png";
slideView: any; slideView: any;
sliderOne: any; sliderOne: any;
payslipIndex :any; payslipIndex: any;
data:any; data: any;
public direction: string; public direction: string;
@ViewChild('slides') slides: IonSlides; @ViewChild('slides') slides: IonSlides;
@ViewChild('slideWithNav') slideWithNav: IonSlides; @ViewChild('slideWithNav') slideWithNav: IonSlides;
@ViewChild('chart') chart: UIChart; @ViewChild('chart') chart: UIChart;
slideOptsOne = { slideOptsOne = {
initialSlide: 0, initialSlide: 0,
slidesPerView: 1, slidesPerView: 1,
autoplay:true autoplay: true
}; };
@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll; @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
public options = { public options = {
cutoutPercentage: 85, cutoutPercentage: 85,
tooltips: { enabled: false }, tooltips: { enabled: false },
legend: { display: false }}; legend: { display: false }
gaugeType = "full"; };
gaugeType = "full";
// gaugeValue = 11.200;
// gaugeLabel = ""; // gaugeValue = 11.200;
// gaugeLabel = "";
constructor( constructor(
public payslipService:PayslipService, public payslipService: PayslipService,
public ts: TranslatorService, public ts: TranslatorService,
public common: CommonService, public common: CommonService,
public sharedData: SharedDataService, public sharedData: SharedDataService,
public authService: AuthenticationService, public authService: AuthenticationService,
public cs: CommonService, public cs: CommonService,
) { ) {
this.direction = TranslatorService.getCurrentDirection(); this.direction = TranslatorService.getCurrentDirection();
} }
ngOnInit() { ngOnInit() {
this.direction = TranslatorService.getCurrentLanguageName() this.direction = TranslatorService.getCurrentLanguageName()
// this.selEmp = this.common.sharedService.getSharedData( // this.selEmp = this.common.sharedService.getSharedData(
// MenuResponse.SHARED_SEL_EMP, // MenuResponse.SHARED_SEL_EMP,
// false // false
// ); // );
// if(this.selEmp){}else{ // if(this.selEmp){}else{
// this.authService.loadAuthenticatedUser().subscribe((user: AuthenticatedUser) => { // this.authService.loadAuthenticatedUser().subscribe((user: AuthenticatedUser) => {
// if (user) { // if (user) {
// this.selEmp = user.ASSIGNMENT_NUMBER; // this.selEmp = user.ASSIGNMENT_NUMBER;
// } // }
// }); // });
// } // }
// console.log(" this.selEmp" + this.selEmp); // console.log(" this.selEmp" + this.selEmp);
// this.respID = this.common.sharedService.getSharedData( // this.respID = this.common.sharedService.getSharedData(
// MenuResponse.SHARED_SEL_RESP_ID, // MenuResponse.SHARED_SEL_RESP_ID,
// false // false
// ); // );
// if(this.respID){}else{ // if(this.respID){}else{
// this.respID=-999; // this.respID=-999;
// } // }
// console.log(" this.respID" + this.respID); // console.log(" this.respID" + this.respID);
// this.selMenu = new MenuResponse(); // this.selMenu = new MenuResponse();
// this.selMenu = this.common.sharedService.getSharedData( // this.selMenu = this.common.sharedService.getSharedData(
// MenuResponse.SHARED_DATA, // MenuResponse.SHARED_DATA,
// false // false
// ); // );
// console.log(" this.selMenu" + this.selMenu); // console.log(" this.selMenu" + this.selMenu);
this.getPayslip(); this.getPayslip();
// this.getProfile(); // this.getProfile();
} }
@ -119,7 +120,7 @@ export class HomeComponent implements OnInit {
if (changes.inputData.currentValue) { if (changes.inputData.currentValue) {
// update this.data here // update this.data here
// then chart is getting updated // then chart is getting updated
setTimeout(() => { setTimeout(() => {
this.chart.reinit(); this.chart.reinit();
}, 100); }, 100);
@ -127,19 +128,19 @@ export class HomeComponent implements OnInit {
} }
slideNext(object, slideView) { slideNext(object, slideView) {
if(this.payslipIndex!=0){ if (this.payslipIndex != 0) {
this.payslipIndex=this.payslipIndex-1; this.payslipIndex = this.payslipIndex - 1;
this.showInfo(); this.showInfo();
}
} }
}
slidePrev(object, slideView) { slidePrev(object, slideView) {
if(this.payslipIndex<this.GetPayslipList.length-1){ if (this.payslipIndex < this.GetPayslipList.length - 1) {
// console.log(this.payslipIndex); // console.log(this.payslipIndex);
this.payslipIndex=this.payslipIndex+1; this.payslipIndex = this.payslipIndex + 1;
this.showInfo(); this.showInfo();
}
} }
}
// getProfile() { // getProfile() {
@ -166,162 +167,159 @@ slidePrev(object, slideView) {
// } // }
getPayslip(){
// this.selEmp ="13777"; getPayslip() {
console.log("this.selEmp????????"+this.selEmp) // this.selEmp ="13777";
this.respID=-999; console.log("this.selEmp????????" + this.selEmp)
this.respID = -999;
const request = { const request = {
P_SELECTED_EMPLOYEE_NUMBER: this.selEmp,//'125346',//this.selEmp, P_SELECTED_EMPLOYEE_NUMBER: this.selEmp,//'125346',//this.selEmp,
P_MENU_TYPE:"E",// 'E',//this.selMenu.List_Menu.MENU_TYPE, P_MENU_TYPE: "E",// 'E',//this.selMenu.List_Menu.MENU_TYPE,
P_SELECTED_RESP_ID: this.respID//"-999" //this.respID, P_SELECTED_RESP_ID: this.respID//"-999" //this.respID,
// P_PAGE_NUM: this.P_PAGE_NUM, // P_PAGE_NUM: this.P_PAGE_NUM,
// P_PAGE_LIMIT: this.P_PAGE_LIMIT // P_PAGE_LIMIT: this.P_PAGE_LIMIT
}; };
this.payslipService.getPayslip(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=> this.payslipService.getPayslip(request, () => { }, this.ts.trPK('general', 'retry')).subscribe((result) => {
{ this.handleRespondGetPayslipResult(result);
this.handleRespondGetPayslipResult(result);
} }
); );
} }
handleRespondGetPayslipResult(result){ handleRespondGetPayslipResult(result) {
if (result.GetPayslipList != null) { if (result.GetPayslipList != null) {
this.GetPayslipList = result.GetPayslipList; this.GetPayslipList = result.GetPayslipList;
this.firstPayslip= this.GetPayslipList[0] this.firstPayslip = this.GetPayslipList[0]
this.defultSelected=this.firstPayslip.PAYSLIP_CHOICE this.defultSelected = this.firstPayslip.PAYSLIP_CHOICE
} }
this.showPaySlip = this.GetPayslipList[0]; this.showPaySlip = this.GetPayslipList[0];
this.payslipIndex=0; this.payslipIndex = 0;
this.getAllPayslipData(this.GetPayslipList[0].ACTION_CONTEXT_ID); this.getAllPayslipData(this.GetPayslipList[0].ACTION_CONTEXT_ID);
} }
showInfo(){ showInfo() {
//console.log(event.detail.value); //console.log(event.detail.value);
//const index = parseInt(event.detail.value); //const index = parseInt(event.detail.value);
this.showPaySlip =this.GetPayslipList[this.payslipIndex]; this.showPaySlip = this.GetPayslipList[this.payslipIndex];
this.ActionContextID=this.GetPayslipList[this.payslipIndex].ACTION_CONTEXT_ID; this.ActionContextID = this.GetPayslipList[this.payslipIndex].ACTION_CONTEXT_ID;
this.getAllPayslipData(this.ActionContextID); this.getAllPayslipData(this.ActionContextID);
} }
getAllPayslipData(ActionContextID){ getAllPayslipData(ActionContextID) {
this.common.sharedService.setSharedData(ActionContextID,HomeComponent.ACTION_CONTEXT_ID); this.common.sharedService.setSharedData(ActionContextID, HomeComponent.ACTION_CONTEXT_ID);
this.getSummeryOfPayment(ActionContextID); this.getSummeryOfPayment(ActionContextID);
this.getPaymentInfo(ActionContextID); this.getPaymentInfo(ActionContextID);
this.getDeduction(ActionContextID); this.getDeduction(ActionContextID);
this.getEarings(ActionContextID); this.getEarings(ActionContextID);
} }
getSummeryOfPayment(ActionContextID){ getSummeryOfPayment(ActionContextID) {
const request = { const request = {
P_ACTION_CONTEXT_ID: ActionContextID, P_ACTION_CONTEXT_ID: ActionContextID,
}; };
this.payslipService.getSummeryOFPayment(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=> this.payslipService.getSummeryOFPayment(request, () => { }, this.ts.trPK('general', 'retry')).subscribe((result) => {
{ this.handleSummeryOfPaymentResult(result);
this.handleSummeryOfPaymentResult(result);
} }
); );
} }
handleSummeryOfPaymentResult(result){ handleSummeryOfPaymentResult(result) {
if (result.GetSummaryOfPaymentList != null) { if (result.GetSummaryOfPaymentList != null) {
this.GetSummaryOfPaymentList = result.GetSummaryOfPaymentList[0]; this.GetSummaryOfPaymentList = result.GetSummaryOfPaymentList[0];
this.earingTotal = this.GetSummaryOfPaymentList.TOTAL_EARNINGS_AMOUNT; this.earingTotal = this.GetSummaryOfPaymentList.TOTAL_EARNINGS_AMOUNT;
this.deductionTotal = this.GetSummaryOfPaymentList.TOTAL_DEDUCTIONS_AMOUNT; this.deductionTotal = this.GetSummaryOfPaymentList.TOTAL_DEDUCTIONS_AMOUNT;
this.data = { this.data = {
labels: ['earingTotal', 'deductionTotal'], labels: ['earingTotal', 'deductionTotal'],
datasets: [ datasets: [
{ data: [this.earingTotal,this.deductionTotal], {
backgroundColor: [ data: [this.earingTotal, this.deductionTotal],
'#269DB8', backgroundColor: [
'#269DB8', ], '#BE332F',
borderWidth: 2 '#BE332F',],
} borderWidth: 2
] }
}; } ]
};
}
} }
getPaymentInfo(ActionContextID){ getPaymentInfo(ActionContextID) {
const request = { const request = {
P_ACTION_CONTEXT_ID: ActionContextID, P_ACTION_CONTEXT_ID: ActionContextID,
}; };
this.payslipService.getPaymentInfo(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=>
{
this.handleGetPaymentInfoResult(result);
}
);
}
handleGetPaymentInfoResult(result){ this.payslipService.getPaymentInfo(request, () => { }, this.ts.trPK('general', 'retry')).subscribe((result) => {
if (result.GetPaymentInformationList != null) { this.handleGetPaymentInfoResult(result);
this.GetPaymentInformationList = result.GetPaymentInformationList; }
);
} }
}
openEarings(){ handleGetPaymentInfoResult(result) {
this.common.openEarningsPage(); if (result.GetPaymentInformationList != null) {
this.GetPaymentInformationList = result.GetPaymentInformationList;
}
}
} openEarings() {
openDeductions(){ this.common.openEarningsPage();
this.common.openDeductionsPage();
}
getEarings(ActionContextID){
console.log("getEarings");
// this.deductionReq.P_ACTION_CONTEXT_ID=ActionContextID;
// this.deductionReq.P_PAGE_NUM=1;
// this.deductionReq.P_PAGE_LIMIT=100;
const request ={
P_ACTION_CONTEXT_ID:ActionContextID,
P_PAGE_NUM:1,
P_PAGE_LIMIT:100
}
this.doinfinitEarReq=request;
this.payslipService.getEarings(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=>
{
this.handleGetEaringsResult(result);
} }
); openDeductions() {
} this.common.openDeductionsPage();
}
getEarings(ActionContextID) {
console.log("getEarings");
handleGetEaringsResult(result){ // this.deductionReq.P_ACTION_CONTEXT_ID=ActionContextID;
if (result.GetEarningsList != null) { // this.deductionReq.P_PAGE_NUM=1;
this.GetEarningsList = result.GetEarningsList; // this.deductionReq.P_PAGE_LIMIT=100;
const request = {
P_ACTION_CONTEXT_ID: ActionContextID,
P_PAGE_NUM: 1,
P_PAGE_LIMIT: 100
}
this.doinfinitEarReq = request;
this.payslipService.getEarings(request, () => { }, this.ts.trPK('general', 'retry')).subscribe((result) => {
this.handleGetEaringsResult(result);
}
);
} }
handleGetEaringsResult(result) {
if (result.GetEarningsList != null) {
this.GetEarningsList = result.GetEarningsList;
}
}
getDeduction(ActionContextID){
console.log("getDeduction");
const request ={
P_ACTION_CONTEXT_ID:ActionContextID,
P_PAGE_NUM:1,
P_PAGE_LIMIT:100
} }
// this.deductionReq.P_ACTION_CONTEXT_ID=ActionContextID;
// this.deductionReq.P_PAGE_NUM=1; getDeduction(ActionContextID) {
// this.deductionReq.P_PAGE_LIMIT=100; console.log("getDeduction");
this.doinfiniteDedReq=request; const request = {
P_ACTION_CONTEXT_ID: ActionContextID,
this.payslipService.getDeduction(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=> P_PAGE_NUM: 1,
{ P_PAGE_LIMIT: 100
this.handleGetDeductionResult(result); }
// this.deductionReq.P_ACTION_CONTEXT_ID=ActionContextID;
// this.deductionReq.P_PAGE_NUM=1;
// this.deductionReq.P_PAGE_LIMIT=100;
this.doinfiniteDedReq = request;
this.payslipService.getDeduction(request, () => { }, this.ts.trPK('general', 'retry')).subscribe((result) => {
this.handleGetDeductionResult(result);
} }
); );
} }
handleGetDeductionResult(result){ handleGetDeductionResult(result) {
if (result.GetDeductionsList != null) { if (result.GetDeductionsList != null) {
this.GetDeductionsList = result.GetDeductionsList; this.GetDeductionsList = result.GetDeductionsList;
} }
@ -389,6 +387,6 @@ getDeduction(ActionContextID){
} else { } else {
if (this.infiniteScroll) this.infiniteScroll.complete(); if (this.infiniteScroll) this.infiniteScroll.complete();
} }
} }
} }

@ -1,44 +1,46 @@
.footer-button { .footer-button {
border-radius: 2px; border-radius: 2px;
padding: 0 1.1em; padding: 0 1.1em;
min-height: 45px; min-height: 45px;
min-width: 200px; min-width: 200px;
} }
ion-label { ion-label {
color: var(--customnavy) !important; color: var(--customnavy) !important;
} }
.daynamicForm-Label { .daynamicForm-Label {
font-size: 16px; font-size: 16px;
color: #a2a5a6 !important; color: #a2a5a6 !important;
display: block; display: block;
overflow: hidden; overflow: hidden;
-webkit-flex: 1; -webkit-flex: 1;
flex: 1; flex: 1;
font-size: inherit; font-size: inherit;
white-space: normal; white-space: normal;
padding: 5px 0px; padding: 5px 0px;
margin: 10px auto; margin: 10px auto;
padding-left: 10px; padding-left: 10px;
} }
.header-toolbar-new{ .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.addEitOkButton{
white-space: normal !important; .addEitOkButton {
text-transform: capitalize !important; white-space: normal !important;
min-height: 45px !important; text-transform: capitalize !important;
min-width: 5px !important; min-height: 45px !important;
margin: 8px !important; min-width: 5px !important;
background-color: #269DB8; margin: 8px !important;
width: 80% !important; background-color: #BE332F;
color: white!important; width: 80% !important;
border-radius: 16px !important; color: white !important;
} border-radius: 16px !important;
.country{ }
margin-top: 10px;
padding: 10px; .country {
} margin-top: 10px;
padding: 10px;
}

@ -1,45 +1,46 @@
.footer-button { .footer-button {
border-radius: 2px; border-radius: 2px;
padding: 0 1.1em; padding: 0 1.1em;
min-height: 45px; min-height: 45px;
min-width: 200px; min-width: 200px;
} }
ion-label {
color: var(--customnavy) !important;
}
.daynamicForm-Label {
font-size: 16px;
color: #a2a5a6 !important;
display: block;
overflow: hidden;
-webkit-flex: 1;
flex: 1;
font-size: inherit;
white-space: normal;
padding: 5px 0px;
margin: 10px auto;
padding-left: 10px;
}
.header-toolbar-new{
--background: #269DB8;
}
.addEitOkButton{
white-space: normal !important;
text-transform: capitalize !important;
min-height: 45px !important;
min-width: 5px !important;
margin: 8px !important;
background-color: #269DB8;
width: 80% !important;
color: white!important;
border-radius: 16px !important;
}
.country{ ion-label {
margin-top: 10px; color: var(--customnavy) !important;
padding: 10px; }
}
.daynamicForm-Label {
font-size: 16px;
color: #a2a5a6 !important;
display: block;
overflow: hidden;
-webkit-flex: 1;
flex: 1;
font-size: inherit;
white-space: normal;
padding: 5px 0px;
margin: 10px auto;
padding-left: 10px;
}
.header-toolbar-new {
--background: #BE332F;
}
.addEitOkButton {
white-space: normal !important;
text-transform: capitalize !important;
min-height: 45px !important;
min-width: 5px !important;
margin: 8px !important;
background-color: #BE332F;
width: 80% !important;
color: white !important;
border-radius: 16px !important;
}
.country {
margin-top: 10px;
padding: 10px;
}

@ -1,263 +1,273 @@
.footer-button { .footer-button {
border-radius: 2px; border-radius: 2px;
padding: 0 1.1em; padding: 0 1.1em;
min-height: 45px; min-height: 45px;
min-width: 200px; min-width: 200px;
} }
.imgSize { .imgSize {
width: 22px; width: 22px;
height: 22px; height: 22px;
} }
.Header { .Header {
font-weight: bold; font-weight: bold;
color: #1a586d !important; color: #c6903e !important;
font-size: 10px; font-size: 10px;
} }
.tbData { .tbData {
font-size: 10px; font-size: 10px;
} }
.btnBack { .btnBack {
background: transparent; background: transparent;
float: right; float: right;
} }
.attachmentDiv{ .attachmentDiv {
background: #ffffff; background: #ffffff;
height: auto; height: auto;
text-align: center; text-align: center;
padding-top: 1px; padding-top: 1px;
margin: 10px; margin: 10px;
border-radius: 15px; border-radius: 15px;
border: 1px solid grey; border: 1px solid grey;
} }
.noDataDiv{ .noDataDiv {
background: #ffffff; background: #ffffff;
height: 11%; height: 11%;
text-align: center; text-align: center;
padding-top: 1px; padding-top: 1px;
border-radius: 10px; border-radius: 10px;
margin: 10px; margin: 10px;
border-radius: 5px; border-radius: 5px;
} }
.submitNote{
background: #ffffff; .submitNote {
height: 80px; background: #ffffff;
padding-top: 1px; height: 80px;
margin: 10px; padding-top: 1px;
border-radius: 15px; margin: 10px;
border: 1px solid grey; border-radius: 15px;
} border: 1px solid grey;
}
.approvalList{
--background: #f0efef; .approvalList {
height: auto; --background: #f0efef;
text-align: center; height: auto;
padding-top: 1px; text-align: center;
border-radius: 10px; padding-top: 1px;
margin: 10px; border-radius: 10px;
border-radius: 5px; margin: 10px;
} border-radius: 5px;
}
/************************New Design**********************************/
.notification-list{ /************************New Design**********************************/
background: none; .notification-list {
background: none; background: none;
border-radius: 32px; background: none;
ion-item{ border-radius: 32px;
// margin-top: 5px;
// margin-bottom: 5px; ion-item {
// margin-top: 5px;
background-color: transparent; // margin-bottom: 5px;
.item-date{
width: 100%; background-color: transparent;
font-size: 16px;
font-weight: bold; .item-date {
width: 100%;
text-align: start; font-size: 16px;
padding: 0; font-weight: bold;
margin: 0;
text-align: start;
position: absolute; padding: 0;
left: 0; margin: 0;
top: 12%;
} position: absolute;
ion-label , [item-end]{ left: 0;
top: 12%;
white-space: normal;
font-size: 14px;
padding-top: 15%;
// :root[dir="ltr"]{
// margin-left: 10px;
// }
// :root[dir="rtl"]{
// margin-right: 10px;
// }
}
} }
ion-label,
[item-end] {
white-space: normal;
font-size: 14px;
padding-top: 15%;
// :root[dir="ltr"]{
// margin-left: 10px;
// }
// :root[dir="rtl"]{
// margin-right: 10px;
// }
}
} }
}
.timeline {
position: relative; .timeline {
margin: 15px 0 0 0; position: relative;
// border-bottom: solid 1px var(--cusgray); margin: 15px 0 0 0;
} // border-bottom: solid 1px var(--cusgray);
}
.timeline:before {
.timeline:before {
content: '';
position: inherit !important; content: '';
top: 0; position: inherit !important;
bottom: 0; top: 0;
width: 4px; bottom: 0;
// background: #e4e4e4; width: 4px;
z-index: 1; // background: #e4e4e4;
left: 35px; z-index: 1;
/* margin-left: -10px; */ left: 35px;
/* z-index: 1; */ /* margin-left: -10px; */
} /* z-index: 1; */
}
.timeline .timeline-thumb {
.timeline .timeline-thumb {
border-radius: 500px;
width: 70px !important; border-radius: 500px;
z-index: 2; width: 70px !important;
position: absolute; z-index: 2;
left: 0px; position: absolute;
// :root[dir="ltr"]{ left: 0px;
// left: 37px; // :root[dir="ltr"]{
// } // left: 37px;
// :root[dir="rtl"]{ // }
// right: 37px; // :root[dir="rtl"]{
// } // right: 37px;
float: right; // }
top: 9px; float: right;
} top: 9px;
}
.timeline .timeline-thumb.timeline-icon {
height: 70px; .timeline .timeline-thumb.timeline-icon {
// text-align: center; height: 70px;
// color: white; // text-align: center;
// border: 5px solid #CBD0D3; // color: white;
// transform: scale(0.2); // border: 5px solid #CBD0D3;
} // transform: scale(0.2);
}
.timeline .timeline-item {
width: 40px; .timeline .timeline-item {
width: 40px;
}
}
.timeline .timeline-stats {
position: relative; .timeline .timeline-stats {
font-size: 12px; position: relative;
color: var(--darkgray); font-size: 12px;
color: var(--darkgray);
}
}
.empImge{
border-radius: 50%; .empImge {
width:100%; border-radius: 50%;
height: 100%; width: 100%;
border: #dedede solid 1px; height: 100%;
border: #dedede solid 1px;
}
.empImgeRep { }
border-radius: 50% !important;
width: 80px; .empImgeRep {
height: 80px; border-radius: 50% !important;
border: #dedede solid 1px; width: 80px;
} height: 80px;
border: #dedede solid 1px;
.line{ }
padding-bottom:87px;
} .line {
padding-bottom: 87px;
.attachLable{ }
position: absolute;
top: 0px; .attachLable {
z-index: 0; position: absolute;
background: #30b8c6; top: 0px;
color: #fff; z-index: 0;
border-radius: 50%; background: #30b8c6;
border: 0px; color: #fff;
width: 24px; border-radius: 50%;
height: 24px; border: 0px;
text-align: center; width: 24px;
font-size: 5px; height: 24px;
} text-align: center;
font-size: 5px;
.removeLable{ }
top: 0px;
z-index: 0; .removeLable {
background: #d8252d; top: 0px;
color: #fff; z-index: 0;
border-radius: 50%; background: #d8252d;
border: 0px; color: #fff;
width: 20px; border-radius: 50%;
height: 20px; border: 0px;
text-align: center; width: 20px;
font-size: 5px; height: 20px;
} text-align: center;
font-size: 5px;
.note-modal { }
// width: 90%;
// height: 50%; .note-modal {
// top: 20%; // width: 90%;
// left: 5%; // height: 50%;
// right: 5%; // top: 20%;
// bottom: 5%; // left: 5%;
background: rgba(0, 0, 0, 0.5) !important; // right: 5%;
padding: 30% 10% !important; // bottom: 5%;
--height: 12cm !important; background: rgba(0, 0, 0, 0.5) !important;
// --width: 80% !important; padding: 30% 10% !important;
--border-radius:20px; --height: 12cm !important;
// --width: 80% !important;
} --border-radius: 20px;
.header-toolbar-new{
--background: #269DB8; }
}
.title{ .header-toolbar-new {
margin-top: -37px; --background: #BE332F;
margin-left: 85px; }
}
.title-ar{ .title {
margin-top: -37px; margin-top: -37px;
margin-right: 101px; margin-left: 85px;
} }
.confirmEitOkButton{
white-space: normal !important; .title-ar {
text-transform: capitalize !important; margin-top: -37px;
min-height: 45px !important; margin-right: 101px;
min-width: 5px !important; }
margin: 8px !important;
background-color: #269DB8; .confirmEitOkButton {
width: 80% !important; white-space: normal !important;
color: white!important; text-transform: capitalize !important;
border-radius: 16px !important; min-height: 45px !important;
} min-width: 5px !important;
margin: 8px !important;
.approvalTitle-ar{ background-color: #BE332F;
font-weight: bold; width: 80% !important;
font-size: 16px; color: white !important;
text-align: right; border-radius: 16px !important;
}
}
.approvalTitle{ .approvalTitle-ar {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
text-align: left; text-align: right;
}
}
.approvalTitle {
font-weight: bold;
font-size: 16px;
text-align: left;
}

@ -1,263 +1,273 @@
.footer-button { .footer-button {
border-radius: 2px; border-radius: 2px;
padding: 0 1.1em; padding: 0 1.1em;
min-height: 45px; min-height: 45px;
min-width: 200px; min-width: 200px;
} }
.imgSize { .imgSize {
width: 22px; width: 22px;
height: 22px; height: 22px;
} }
.Header { .Header {
font-weight: bold; font-weight: bold;
color: #1a586d !important; color: #c6903e !important;
font-size: 10px; font-size: 10px;
} }
.tbData { .tbData {
font-size: 10px; font-size: 10px;
} }
.btnBack { .btnBack {
background: transparent; background: transparent;
float: right; float: right;
} }
.attachmentDiv{ .attachmentDiv {
background: #ffffff; background: #ffffff;
height: auto; height: auto;
text-align: center; text-align: center;
padding-top: 1px; padding-top: 1px;
margin: 10px; margin: 10px;
border-radius: 15px; border-radius: 15px;
border: 1px solid grey; border: 1px solid grey;
} }
.noDataDiv{ .noDataDiv {
background: #ffffff; background: #ffffff;
height: 11%; height: 11%;
text-align: center; text-align: center;
padding-top: 1px; padding-top: 1px;
border-radius: 10px; border-radius: 10px;
margin: 10px; margin: 10px;
border-radius: 5px; border-radius: 5px;
} }
.submitNote{
background: #ffffff; .submitNote {
height: 80px; background: #ffffff;
padding-top: 1px; height: 80px;
margin: 10px; padding-top: 1px;
border-radius: 15px; margin: 10px;
border: 1px solid grey; border-radius: 15px;
} border: 1px solid grey;
}
.approvalList{
--background: #f0efef; .approvalList {
height: auto; --background: #f0efef;
text-align: center; height: auto;
padding-top: 1px; text-align: center;
border-radius: 10px; padding-top: 1px;
margin: 10px; border-radius: 10px;
border-radius: 5px; margin: 10px;
} border-radius: 5px;
}
/************************New Design**********************************/
.notification-list{ /************************New Design**********************************/
background: none; .notification-list {
background: none; background: none;
border-radius: 32px; background: none;
ion-item{ border-radius: 32px;
// margin-top: 5px;
// margin-bottom: 5px; ion-item {
// margin-top: 5px;
background-color: transparent; // margin-bottom: 5px;
.item-date{
width: 100%; background-color: transparent;
font-size: 16px;
font-weight: bold; .item-date {
width: 100%;
text-align: start; font-size: 16px;
padding: 0; font-weight: bold;
margin: 0;
text-align: start;
position: absolute; padding: 0;
left: 0; margin: 0;
top: 12%;
} position: absolute;
ion-label , [item-end]{ left: 0;
top: 12%;
white-space: normal;
font-size: 14px;
padding-top: 15%;
// :root[dir="ltr"]{
// margin-left: 10px;
// }
// :root[dir="rtl"]{
// margin-right: 10px;
// }
}
} }
ion-label,
[item-end] {
white-space: normal;
font-size: 14px;
padding-top: 15%;
// :root[dir="ltr"]{
// margin-left: 10px;
// }
// :root[dir="rtl"]{
// margin-right: 10px;
// }
}
} }
}
.timeline {
position: relative; .timeline {
margin: 15px 0 0 0; position: relative;
// border-bottom: solid 1px var(--cusgray); margin: 15px 0 0 0;
} // border-bottom: solid 1px var(--cusgray);
}
.timeline:before {
.timeline:before {
content: '';
position: inherit !important; content: '';
top: 0; position: inherit !important;
bottom: 0; top: 0;
width: 4px; bottom: 0;
// background: #e4e4e4; width: 4px;
z-index: 1; // background: #e4e4e4;
left: 35px; z-index: 1;
/* margin-left: -10px; */ left: 35px;
/* z-index: 1; */ /* margin-left: -10px; */
} /* z-index: 1; */
}
.timeline .timeline-thumb {
.timeline .timeline-thumb {
border-radius: 500px;
width: 70px !important; border-radius: 500px;
z-index: 2; width: 70px !important;
position: absolute; z-index: 2;
left: 0px; position: absolute;
// :root[dir="ltr"]{ left: 0px;
// left: 37px; // :root[dir="ltr"]{
// } // left: 37px;
// :root[dir="rtl"]{ // }
// right: 37px; // :root[dir="rtl"]{
// } // right: 37px;
float: right; // }
top: 9px; float: right;
} top: 9px;
}
.timeline .timeline-thumb.timeline-icon {
height: 70px; .timeline .timeline-thumb.timeline-icon {
// text-align: center; height: 70px;
// color: white; // text-align: center;
// border: 5px solid #CBD0D3; // color: white;
// transform: scale(0.2); // border: 5px solid #CBD0D3;
} // transform: scale(0.2);
}
.timeline .timeline-item {
width: 40px; .timeline .timeline-item {
width: 40px;
}
}
.timeline .timeline-stats {
position: relative; .timeline .timeline-stats {
font-size: 12px; position: relative;
color: var(--darkgray); font-size: 12px;
color: var(--darkgray);
}
}
.empImge{
border-radius: 50%; .empImge {
width:100%; border-radius: 50%;
height: 100%; width: 100%;
border: #dedede solid 1px; height: 100%;
border: #dedede solid 1px;
}
.empImgeRep { }
border-radius: 50% !important;
width: 80px; .empImgeRep {
height: 80px; border-radius: 50% !important;
border: #dedede solid 1px; width: 80px;
} height: 80px;
border: #dedede solid 1px;
.line{ }
padding-bottom:87px;
} .line {
padding-bottom: 87px;
.attachLable{ }
position: absolute;
top: 0px; .attachLable {
z-index: 0; position: absolute;
background: #30b8c6; top: 0px;
color: #fff; z-index: 0;
border-radius: 50%; background: #30b8c6;
border: 0px; color: #fff;
width: 24px; border-radius: 50%;
height: 24px; border: 0px;
text-align: center; width: 24px;
font-size: 5px; height: 24px;
} text-align: center;
font-size: 5px;
.removeLable{ }
top: 0px;
z-index: 0; .removeLable {
background: #d8252d; top: 0px;
color: #fff; z-index: 0;
border-radius: 50%; background: #d8252d;
border: 0px; color: #fff;
width: 20px; border-radius: 50%;
height: 20px; border: 0px;
text-align: center; width: 20px;
font-size: 5px; height: 20px;
} text-align: center;
font-size: 5px;
.note-modal { }
// width: 90%;
// height: 50%; .note-modal {
// top: 20%; // width: 90%;
// left: 5%; // height: 50%;
// right: 5%; // top: 20%;
// bottom: 5%; // left: 5%;
background: rgba(0, 0, 0, 0.5) !important; // right: 5%;
padding: 30% 10% !important; // bottom: 5%;
--height: 12cm !important; background: rgba(0, 0, 0, 0.5) !important;
// --width: 80% !important; padding: 30% 10% !important;
--border-radius:20px; --height: 12cm !important;
// --width: 80% !important;
} --border-radius: 20px;
.header-toolbar-new{
--background: #269DB8; }
}
.title{ .header-toolbar-new {
margin-top: -37px; --background: #BE332F;
margin-left: 85px; }
}
.title-ar{ .title {
margin-top: -37px; margin-top: -37px;
margin-right: 101px; margin-left: 85px;
} }
.confirmEitOkButton{
white-space: normal !important; .title-ar {
text-transform: capitalize !important; margin-top: -37px;
min-height: 45px !important; margin-right: 101px;
min-width: 5px !important; }
margin: 8px !important;
background-color: #269DB8; .confirmEitOkButton {
width: 80% !important; white-space: normal !important;
color: white!important; text-transform: capitalize !important;
border-radius: 16px !important; min-height: 45px !important;
} min-width: 5px !important;
margin: 8px !important;
.approvalTitle-ar{ background-color: #BE332F;
font-weight: bold; width: 80% !important;
font-size: 16px; color: white !important;
text-align: right; border-radius: 16px !important;
}
}
.approvalTitle{ .approvalTitle-ar {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
text-align: left; text-align: right;
}
}
.approvalTitle {
font-weight: bold;
font-size: 16px;
text-align: left;
}

@ -1,263 +1,273 @@
.footer-button { .footer-button {
border-radius: 2px; border-radius: 2px;
padding: 0 1.1em; padding: 0 1.1em;
min-height: 45px; min-height: 45px;
min-width: 200px; min-width: 200px;
} }
.imgSize { .imgSize {
width: 22px; width: 22px;
height: 22px; height: 22px;
} }
.Header { .Header {
font-weight: bold; font-weight: bold;
color: #1a586d !important; color: #c6903e !important;
font-size: 10px; font-size: 10px;
} }
.tbData { .tbData {
font-size: 10px; font-size: 10px;
} }
.btnBack { .btnBack {
background: transparent; background: transparent;
float: right; float: right;
} }
.attachmentDiv{ .attachmentDiv {
background: #ffffff; background: #ffffff;
height: auto; height: auto;
text-align: center; text-align: center;
padding-top: 1px; padding-top: 1px;
margin: 10px; margin: 10px;
border-radius: 15px; border-radius: 15px;
border: 1px solid grey; border: 1px solid grey;
} }
.noDataDiv{ .noDataDiv {
background: #ffffff; background: #ffffff;
height: 11%; height: 11%;
text-align: center; text-align: center;
padding-top: 1px; padding-top: 1px;
border-radius: 10px; border-radius: 10px;
margin: 10px; margin: 10px;
border-radius: 5px; border-radius: 5px;
} }
.submitNote{
background: #ffffff; .submitNote {
height: 80px; background: #ffffff;
padding-top: 1px; height: 80px;
margin: 10px; padding-top: 1px;
border-radius: 15px; margin: 10px;
border: 1px solid grey; border-radius: 15px;
} border: 1px solid grey;
}
.approvalList{
--background: #f0efef; .approvalList {
height: auto; --background: #f0efef;
text-align: center; height: auto;
padding-top: 1px; text-align: center;
border-radius: 10px; padding-top: 1px;
margin: 10px; border-radius: 10px;
border-radius: 5px; margin: 10px;
} border-radius: 5px;
}
/************************New Design**********************************/
.notification-list{ /************************New Design**********************************/
background: none; .notification-list {
background: none; background: none;
border-radius: 32px; background: none;
ion-item{ border-radius: 32px;
// margin-top: 5px;
// margin-bottom: 5px; ion-item {
// margin-top: 5px;
background-color: transparent; // margin-bottom: 5px;
.item-date{
width: 100%; background-color: transparent;
font-size: 16px;
font-weight: bold; .item-date {
width: 100%;
text-align: start; font-size: 16px;
padding: 0; font-weight: bold;
margin: 0;
text-align: start;
position: absolute; padding: 0;
left: 0; margin: 0;
top: 12%;
} position: absolute;
ion-label , [item-end]{ left: 0;
top: 12%;
white-space: normal;
font-size: 14px;
padding-top: 15%;
// :root[dir="ltr"]{
// margin-left: 10px;
// }
// :root[dir="rtl"]{
// margin-right: 10px;
// }
}
} }
ion-label,
[item-end] {
white-space: normal;
font-size: 14px;
padding-top: 15%;
// :root[dir="ltr"]{
// margin-left: 10px;
// }
// :root[dir="rtl"]{
// margin-right: 10px;
// }
}
} }
}
.timeline {
position: relative; .timeline {
margin: 15px 0 0 0; position: relative;
// border-bottom: solid 1px var(--cusgray); margin: 15px 0 0 0;
} // border-bottom: solid 1px var(--cusgray);
}
.timeline:before {
.timeline:before {
content: '';
position: inherit !important; content: '';
top: 0; position: inherit !important;
bottom: 0; top: 0;
width: 4px; bottom: 0;
// background: #e4e4e4; width: 4px;
z-index: 1; // background: #e4e4e4;
left: 35px; z-index: 1;
/* margin-left: -10px; */ left: 35px;
/* z-index: 1; */ /* margin-left: -10px; */
} /* z-index: 1; */
}
.timeline .timeline-thumb {
.timeline .timeline-thumb {
border-radius: 500px;
width: 70px !important; border-radius: 500px;
z-index: 2; width: 70px !important;
position: absolute; z-index: 2;
left: 0px; position: absolute;
// :root[dir="ltr"]{ left: 0px;
// left: 37px; // :root[dir="ltr"]{
// } // left: 37px;
// :root[dir="rtl"]{ // }
// right: 37px; // :root[dir="rtl"]{
// } // right: 37px;
float: right; // }
top: 9px; float: right;
} top: 9px;
}
.timeline .timeline-thumb.timeline-icon {
height: 70px; .timeline .timeline-thumb.timeline-icon {
// text-align: center; height: 70px;
// color: white; // text-align: center;
// border: 5px solid #CBD0D3; // color: white;
// transform: scale(0.2); // border: 5px solid #CBD0D3;
} // transform: scale(0.2);
}
.timeline .timeline-item {
width: 40px; .timeline .timeline-item {
width: 40px;
}
}
.timeline .timeline-stats {
position: relative; .timeline .timeline-stats {
font-size: 12px; position: relative;
color: var(--darkgray); font-size: 12px;
color: var(--darkgray);
}
}
.empImge{
border-radius: 50%; .empImge {
width:100%; border-radius: 50%;
height: 100%; width: 100%;
border: #dedede solid 1px; height: 100%;
border: #dedede solid 1px;
}
.empImgeRep { }
border-radius: 50% !important;
width: 80px; .empImgeRep {
height: 80px; border-radius: 50% !important;
border: #dedede solid 1px; width: 80px;
} height: 80px;
border: #dedede solid 1px;
.line{ }
padding-bottom:87px;
} .line {
padding-bottom: 87px;
.attachLable{ }
position: absolute;
top: 0px; .attachLable {
z-index: 0; position: absolute;
background: #30b8c6; top: 0px;
color: #fff; z-index: 0;
border-radius: 50%; background: #30b8c6;
border: 0px; color: #fff;
width: 24px; border-radius: 50%;
height: 24px; border: 0px;
text-align: center; width: 24px;
font-size: 5px; height: 24px;
} text-align: center;
font-size: 5px;
.removeLable{ }
top: 0px;
z-index: 0; .removeLable {
background: #d8252d; top: 0px;
color: #fff; z-index: 0;
border-radius: 50%; background: #d8252d;
border: 0px; color: #fff;
width: 20px; border-radius: 50%;
height: 20px; border: 0px;
text-align: center; width: 20px;
font-size: 5px; height: 20px;
} text-align: center;
font-size: 5px;
.note-modal { }
// width: 90%;
// height: 50%; .note-modal {
// top: 20%; // width: 90%;
// left: 5%; // height: 50%;
// right: 5%; // top: 20%;
// bottom: 5%; // left: 5%;
background: rgba(0, 0, 0, 0.5) !important; // right: 5%;
padding: 30% 10% !important; // bottom: 5%;
--height: 12cm !important; background: rgba(0, 0, 0, 0.5) !important;
// --width: 80% !important; padding: 30% 10% !important;
--border-radius:20px; --height: 12cm !important;
// --width: 80% !important;
} --border-radius: 20px;
.header-toolbar-new{
--background: #269DB8; }
}
.title{ .header-toolbar-new {
margin-top: -37px; --background: #BE332F;
margin-left: 85px; }
}
.title-ar{ .title {
margin-top: -37px; margin-top: -37px;
margin-right: 101px; margin-left: 85px;
} }
.confirmEitOkButton{
white-space: normal !important; .title-ar {
text-transform: capitalize !important; margin-top: -37px;
min-height: 45px !important; margin-right: 101px;
min-width: 5px !important; }
margin: 8px !important;
background-color: #269DB8; .confirmEitOkButton {
width: 80% !important; white-space: normal !important;
color: white!important; text-transform: capitalize !important;
border-radius: 16px !important; min-height: 45px !important;
} min-width: 5px !important;
margin: 8px !important;
.approvalTitle-ar{ background-color: #BE332F;
font-weight: bold; width: 80% !important;
font-size: 16px; color: white !important;
text-align: right; border-radius: 16px !important;
}
}
.approvalTitle{ .approvalTitle-ar {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
text-align: left; text-align: right;
}
}
.approvalTitle {
font-weight: bold;
font-size: 16px;
text-align: left;
}

@ -1,13 +1,15 @@
ion-col.colBold, ion-col.colBold > label{ ion-col.colBold,
font-weight:bold; ion-col.colBold>label {
font-weight: bold;
} }
.colorBG{ .colorBG {
--background: #f0efef; --background: #f0efef;
} }
.header-div{
.header-div {
text-transform: capitalize; text-transform: capitalize;
background: #269DB8; background: #BE332F;
display: block; display: block;
position: relative; position: relative;
height: 160px; height: 160px;
@ -19,36 +21,38 @@ ion-col.colBold, ion-col.colBold > label{
.menubutton { .menubutton {
background: #f0ecec; background: #f0ecec;
min-height: 39px; min-height: 39px;
width: 35px !important; width: 35px !important;
height: 20px; height: 20px;
border-radius: 50%; border-radius: 50%;
} }
.changeIcon{ .changeIcon {
/* background: #c1c1c1; */ /* background: #c1c1c1; */
width: 21px; width: 21px;
/* height: 26px; */ /* height: 26px; */
border-radius: 50% !important; border-radius: 50% !important;
position: relative; position: relative;
color: #7f8c8d; color: #7f8c8d;
height: 35px; height: 35px;
} }
.changeImgBtn{ .changeImgBtn {
position: absolute; position: absolute;
top: 80%; top: 80%;
left: 65%; left: 65%;
} }
.changeImgBtn-ar{
.changeImgBtn-ar {
position: absolute; position: absolute;
top: 80%; top: 80%;
left: 66%; left: 66%;
} }
.profileImg{
.profileImg {
width: 160px; width: 160px;
height: 160px; height: 160px;
display: -webkit-inline-box; display: -webkit-inline-box;
@ -73,27 +77,28 @@ border-radius: 50%;
text-align: center; text-align: center;
} }
.line{ .line {
padding-top: 0px !important; padding-top: 0px !important;
/* margin-bottom: 0px; */ /* margin-bottom: 0px; */
/* margin: 0px; */ /* margin: 0px; */
border-right: 1px #c5c2c2 solid !important; border-right: 1px #c5c2c2 solid !important;
line-height: 10px !important; line-height: 10px !important;
} }
.proTitles { .proTitles {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
font-weight: bolder; font-weight: bolder;
color: white; color: white;
margin-top: -33px; margin-top: -33px;
} }
.profileGrid{ .profileGrid {
border: #bebbbb solid 1px; border: #bebbbb solid 1px;
border-radius: 9px; border-radius: 9px;
padding: 0px; padding: 0px;
@ -110,16 +115,17 @@ border-radius: 50%;
.lebl{ .lebl {
color: black; color: black;
font-size: 14px !important; font-size: 14px !important;
font-weight: bold !important; font-weight: bold !important;
padding-top: 9px; padding-top: 9px;
padding-left: 5px; padding-left: 5px;
} }
.rowBolds{
.rowBolds {
color: black !important; color: black !important;
font-size: 14px !important; font-size: 14px !important;
/* padding: 6px !important; */ /* padding: 6px !important; */

@ -15,14 +15,16 @@
} }
.header-toolbar-new { .header-toolbar-new {
--background: #269db8; --background: #BE332F;
} }
.colorBG { .colorBG {
--background: #f0efef; --background: #f0efef;
} }
.header-div { .header-div {
text-transform: capitalize; text-transform: capitalize;
background: #269db8; background: #BE332F;
display: block; display: block;
position: relative; position: relative;
height: 113px; height: 113px;
@ -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;
} }
@ -225,7 +242,7 @@ ion-title {
.contentBg:before { .contentBg:before {
position: absolute; position: absolute;
content: ""; content: "";
background: #269db8; background: #BE332F;
height: 140px; height: 140px;
width: 100%; width: 100%;
left: 0; left: 0;
@ -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 {
@ -350,9 +377,10 @@ $actionBtnSize: 36px;
border-radius: $actionBtnSize; border-radius: $actionBtnSize;
margin: 0 auto; margin: 0 auto;
display: block; display: block;
background-color: #269db8; background-color: #BE332F;
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;
@ -405,9 +437,10 @@ $actionBtnSize: 36px;
border-radius: 50% !important; border-radius: 50% !important;
margin-right: 22px; margin-right: 22px;
margin-left: 22px; margin-left: 22px;
background-color: #269db8; background-color: #BE332F;
} }
} }
@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%;
@ -419,7 +452,7 @@ $actionBtnSize: 36px;
border-radius: 50% !important; border-radius: 50% !important;
margin-right: 62px; margin-right: 62px;
margin-left: 45px; margin-left: 45px;
background: #269db8 !important; background: #BE332F !important;
padding-left: 17px; padding-left: 17px;
} }
} }
@ -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 {
@ -509,11 +547,13 @@ $actionBtnSize: 36px;
} }
.search-dropdown { .search-dropdown {
background: #269db8; background: #BE332F;
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: #269db8; color: #BE332F;
} }
.disabledArrow { .disabledArrow {
height: 20px; height: 20px;
width: 20px; width: 20px;
@ -581,9 +627,10 @@ $actionBtnSize: 36px;
.activeArrow-ar { .activeArrow-ar {
height: 20px; height: 20px;
width: 20px; width: 20px;
color: #269db8; color: #BE332F;
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;
@ -815,14 +871,14 @@ $actionBtnSize: 36px;
} }
.green-label-container { .green-label-container {
// border-top: 5px solid #269DB8; // border-top: 5px solid #BE332F;
// padding: 1px 0px; // padding: 1px 0px;
// margin: 15px 0px // margin: 15px 0px
width: 12px; width: 12px;
height: 12px; height: 12px;
padding-right: -10px; padding-right: -10px;
border-radius: 100%; border-radius: 100%;
background-color: #269db8; background-color: #BE332F;
} }
.blue-label-container { .blue-label-container {
@ -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;
@ -977,7 +1044,7 @@ $actionBtnSize: 36px;
height: 20px; height: 20px;
padding-right: -10px; padding-right: -10px;
border-radius: 100%; border-radius: 100%;
background-color: #269db8; background-color: #BE332F;
z-index: 9; z-index: 9;
margin-top: 26px; margin-top: 26px;
} }
@ -1005,7 +1072,7 @@ $actionBtnSize: 36px;
.header-background-style-card { .header-background-style-card {
padding-top: 1px; padding-top: 1px;
background: #269db8; background: #BE332F;
height: 115px; height: 115px;
} }
@ -1013,66 +1080,63 @@ $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 { .changeImgBtn {
position: absolute; position: absolute;
background: #f0ecec; background: #f0ecec;
@ -1084,9 +1148,25 @@ $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: 1060px) and (max-width:1090px) {
.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: 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;
@ -1219,7 +1310,7 @@ $actionBtnSize: 36px;
right: 30px; right: 30px;
} }
.name{ .name {
text-align: center; text-align: center;
letter-spacing: -0.84px; letter-spacing: -0.84px;
color: #2B353E; color: #2B353E;
@ -1228,7 +1319,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 +1331,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 +1353,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 +1373,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 +1383,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 +1397,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 +1408,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 +1420,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 +1430,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 +1444,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 +1453,63 @@ $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;
}

@ -34,7 +34,7 @@
</ion-col> </ion-col>
<ion-col> <ion-col>
<ion-button style=" width: 90%; background: white; --background: #269db8" (click)="dismiss('next')" [disabled]="!isChange">{{ts.trPK('general','next')}}</ion-button> <ion-button style=" width: 90%; background: white; --background: #BE332F" (click)="dismiss('next')" [disabled]="!isChange">{{ts.trPK('general','next')}}</ion-button>
</ion-col> </ion-col>
</ion-row> </ion-row>
</ion-grid> </ion-grid>

@ -16,9 +16,9 @@ export class EditDetailProfileComponent implements OnInit {
public ts: TranslatorService, public ts: TranslatorService,
) { } ) { }
colorRadio = "#269db8" colorRadio = "#BE332F"
ngOnInit() { ngOnInit() {
console.log(this.sourceName); console.log(this.sourceName);
} }

@ -1,20 +1,18 @@
.colorBG {
--background: #f0efef;
}
.header-div {
text-transform: capitalize;
background: #BE332F;
display: block;
position: relative;
height: 160px;
margin-bottom: 60px;
padding-top: 10px;
}
.btnBack {
.colorBG{
--background: #f0efef;
}
.header-div{
text-transform: capitalize;
background: #269DB8;
display: block;
position: relative;
height: 160px;
margin-bottom: 60px;
padding-top: 10px;
}
.btnBack{
background: var(--customnavy); background: var(--customnavy);
white-space: normal; white-space: normal;
color: var(--light); color: var(--light);
@ -23,11 +21,12 @@
margin-top: -8px !important; margin-top: -8px !important;
} }
.profilediv{ .profilediv {
margin-left: 337px; margin-left: 337px;
} }
.profileImg{
.profileImg {
width: 25px; width: 25px;
height: 24px; height: 24px;
/* display: -webkit-inline-box; */ /* display: -webkit-inline-box; */
@ -38,72 +37,74 @@
position: relative; position: relative;
top: -22px; top: -22px;
// margin-left: 337px; // margin-left: 337px;
} }
.proTitles { .proTitles {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
font-weight: bolder; font-weight: bolder;
color: white; color: white;
margin-top: -33px; margin-top: -33px;
} }
.grid{ .grid {
background-color: #f9f9f9; background-color: #f9f9f9;
margin-top: 9px; margin-top: 9px;
margin-bottom: 7px !important; margin-bottom: 7px !important;
border-radius: 21px; border-radius: 21px;
margin-bottom: 26px; margin-bottom: 26px;
margin-left: 14px; margin-left: 14px;
margin-right: 14px; margin-right: 14px;
padding-bottom: 1px; padding-bottom: 1px;
border: solid #d7d4d4 !important; border: solid #d7d4d4 !important;
} }
.Text {
margin: 0; .Text {
padding: 0; margin: 0;
text-align: center; padding: 0;
font-weight: bolder; text-align: center;
color: black; font-weight: bolder;
font-size: 16px; color: black;
margin-top: 5px; font-size: 16px;
margin-bottom: 10px; margin-top: 5px;
text-align: center; margin-bottom: 10px;
// margin-left: 74px; text-align: center;
width: 100%; // margin-left: 74px;
} width: 100%;
.Text-ar{ }
margin: 0;
padding: 0; .Text-ar {
text-align: center; margin: 0;
font-weight: bolder; padding: 0;
color: black; text-align: center;
font-size: 16px; font-weight: bolder;
margin-top: 5px; color: black;
margin-bottom: 10px; font-size: 16px;
text-align: center; margin-top: 5px;
margin-bottom: 10px;
margin-right: 131px; text-align: center;
}
margin-right: 131px;
.leftgrid{ }
margin-left: 10px;
background: white; .leftgrid {
border: solid #d7d4d4; margin-left: 10px;
margin: 7px; background: white;
border-radius: 24px; border: solid #d7d4d4;
width: 30% !important; margin: 7px;
padding-bottom: 9px; border-radius: 24px;
padding-top: 11px; width: 30% !important;
padding-left: 10px; padding-bottom: 9px;
} padding-top: 11px;
padding-left: 10px;
.rightgrid{ }
.rightgrid {
margin-left: 10px; margin-left: 10px;
background: white; background: white;
border: solid #d7d4d4; border: solid #d7d4d4;
@ -114,10 +115,10 @@
padding-top: 11px; padding-top: 11px;
padding-left: 10px; padding-left: 10px;
margin-right: 189px; margin-right: 189px;
} }
.performancecolor{ .performancecolor {
border: solid #bebbbb 1px !important; border: solid #bebbbb 1px !important;
border-radius: 13px; border-radius: 13px;
margin-top: 0px !important; margin-top: 0px !important;
@ -125,29 +126,31 @@
padding-right: 8px !important; padding-right: 8px !important;
width: 65px; width: 65px;
margin-bottom: -10px; margin-bottom: -10px;
} }
.label{ .label {
font-size: 13px !important; font-size: 13px !important;
margin-top: -7px !important; margin-top: -7px !important;
font-weight: bold !important; font-weight: bold !important;
} }
.label-ar{
font-size: 15px !important; .label-ar {
margin-top: -7px !important; font-size: 15px !important;
font-weight: bold !important; margin-top: -7px !important;
font-weight: bold !important;
} }
.labelvalue{ .labelvalue {
font-size: 25px !important; font-size: 25px !important;
font-weight: bold !important; font-weight: bold !important;
margin-top: 7px !important; margin-top: 7px !important;
margin-left: 90px !important; margin-left: 90px !important;
} }
.labelvalue-ar{
.labelvalue-ar {
// margin-right: 19px !important; // margin-right: 19px !important;
font-size: 24px !important; font-size: 24px !important;
font-weight: bold !important; font-weight: bold !important;
@ -155,29 +158,29 @@
} }
.percentage{ .percentage {
font-size: 20px !important; font-size: 20px !important;
margin-top: 15px !important; margin-top: 15px !important;
margin-left: -7px; margin-left: -7px;
} }
.percentage-ar{
.percentage-ar {
// margin-right: -54px; // margin-right: -54px;
font-size: 19px !important; font-size: 19px !important;
margin-right: -51px; margin-right: -51px;
} }
.gauge{ .gauge {
// transform: translate(-24px, -65px); // transform: translate(-24px, -65px);
margin-bottom: -140px; margin-bottom: -140px;
margin-top: -70px; margin-top: -70px;
} }
.gauge-ar{
.gauge-ar {
transform: translate(-24px, -65px); transform: translate(-24px, -65px);
margin-bottom: -187px; margin-bottom: -187px;
margin-top: -20px; margin-top: -20px;
margin-right: -56px; margin-right: -56px;
} }

@ -48,7 +48,7 @@ export class PerformanceEvaluationComponent implements OnInit {
colorScheme = { colorScheme = {
domain: ['#269DB8', '#269DB8', '#3CB9D5', '#1FA269', '#0D155E'] domain: ['#BE332F', '#BE332F', '#3CB9D5', '#1FA269', '#0D155E']
}; };
ngOnInit() { ngOnInit() {

@ -8,23 +8,23 @@
// background: transparent; // background: transparent;
// border-radius: 50% !important; // border-radius: 50% !important;
// } // }
.header-toolbar-new{ .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.imgCircle{ .imgCircle {
// width: 90px; // width: 90px;
// height: 90px; // height: 90px;
// display: inline-flex; // display: inline-flex;
// overflow: hidden; // overflow: hidden;
// background: transparent; // background: transparent;
// -webkit-border-radius:50% !important; // -webkit-border-radius:50% !important;
// -moz-border-radius:50% !important; // -moz-border-radius:50% !important;
// border-radius: 50% !important; // border-radius: 50% !important;
// // margin:0 auto 40px; // // margin:0 auto 40px;
position: relative; position: relative;
width: 234px; width: 234px;
height: 215px; height: 215px;
margin-top: 33px !important; margin-top: 33px !important;
margin: auto; margin: auto;
@ -33,22 +33,23 @@ width: 234px;
overflow: hidden; overflow: hidden;
background: transparent; background: transparent;
border-radius: 50% !important; border-radius: 50% !important;
color:#fff; color: #fff;
// background-color: rgba(0,0,0,0.1); // background-color: rgba(0,0,0,0.1);
// box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); // box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
img{ img {
-webkit-border-radius:50% !important; -webkit-border-radius: 50% !important;
-moz-border-radius:50% !important; -moz-border-radius: 50% !important;
border-radius: 50% !important; border-radius: 50% !important;
height: auto !important; height: auto !important;
width: 70% !important; width: 70% !important;
} }
//box-shadow: 0px 0px 0px 10px #8c8c8c; //box-shadow: 0px 0px 0px 10px #8c8c8c;
} }
.header-toolbar-new{ .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }

@ -1,53 +1,52 @@
.rowBtn{ .rowBtn {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.Header{ .Header {
color: black !important; color: black !important;
font-size: 25px !important; font-size: 25px !important;
font-weight: bold !important;; font-weight: bold !important;
;
margin: 0; margin: 0;
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
.labelRadio{ .labelRadio {
color: black !important; color: black !important;
font-weight: bold !important; font-weight: bold !important;
padding-bottom: 20px; padding-bottom: 20px;
} }
.labelcheck{ .labelcheck {
color: red !important; color: red !important;
font-weight: bold !important; font-weight: bold !important;
margin-bottom: 10px; margin-bottom: 10px;
} }
.submitOkButton{ .submitOkButton {
white-space: normal !important; white-space: normal !important;
text-transform: capitalize !important; text-transform: capitalize !important;
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
--background:: #269DB8; --background: #BE332F;
width: 100% !important; width: 100% !important;
color: white!important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
} }
.submitCancelButton{
.submitCancelButton {
white-space: normal !important; white-space: normal !important;
text-transform: capitalize !important; text-transform: capitalize !important;
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
--background:: #269DB8; --background: #BE332F;
width: 100% !important; width: 100% !important;
color: white!important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
} }

@ -1,263 +1,273 @@
.footer-button { .footer-button {
border-radius: 2px; border-radius: 2px;
padding: 0 1.1em; padding: 0 1.1em;
min-height: 45px; min-height: 45px;
min-width: 200px; min-width: 200px;
} }
.imgSize { .imgSize {
width: 22px; width: 22px;
height: 22px; height: 22px;
} }
.Header { .Header {
font-weight: bold; font-weight: bold;
color: #1a586d !important; color: #c6903e !important;
font-size: 10px; font-size: 10px;
} }
.tbData { .tbData {
font-size: 10px; font-size: 10px;
} }
.btnBack { .btnBack {
background: transparent; background: transparent;
float: right; float: right;
} }
.attachmentDiv{ .attachmentDiv {
background: #ffffff; background: #ffffff;
height: auto; height: auto;
text-align: center; text-align: center;
padding-top: 1px; padding-top: 1px;
margin: 10px; margin: 10px;
border-radius: 15px; border-radius: 15px;
border: 1px solid grey; border: 1px solid grey;
} }
.noDataDiv{ .noDataDiv {
background: #ffffff; background: #ffffff;
height: 11%; height: 11%;
text-align: center; text-align: center;
padding-top: 1px; padding-top: 1px;
border-radius: 10px; border-radius: 10px;
margin: 10px; margin: 10px;
border-radius: 5px; border-radius: 5px;
} }
.submitNote{
background: #ffffff; .submitNote {
height: 80px; background: #ffffff;
padding-top: 1px; height: 80px;
margin: 10px; padding-top: 1px;
border-radius: 15px; margin: 10px;
border: 1px solid grey; border-radius: 15px;
} border: 1px solid grey;
}
.approvalList{
--background: #f0efef; .approvalList {
height: auto; --background: #f0efef;
text-align: center; height: auto;
padding-top: 1px; text-align: center;
border-radius: 10px; padding-top: 1px;
margin: 10px; border-radius: 10px;
border-radius: 5px; margin: 10px;
} border-radius: 5px;
}
/************************New Design**********************************/
.notification-list{ /************************New Design**********************************/
background: none; .notification-list {
background: none; background: none;
border-radius: 32px; background: none;
ion-item{ border-radius: 32px;
// margin-top: 5px;
// margin-bottom: 5px; ion-item {
// margin-top: 5px;
background-color: transparent; // margin-bottom: 5px;
.item-date{
width: 100%; background-color: transparent;
font-size: 16px;
font-weight: bold; .item-date {
width: 100%;
text-align: start; font-size: 16px;
padding: 0; font-weight: bold;
margin: 0;
text-align: start;
position: absolute; padding: 0;
left: 0; margin: 0;
top: 12%;
} position: absolute;
ion-label , [item-end]{ left: 0;
top: 12%;
white-space: normal;
font-size: 14px;
padding-top: 15%;
// :root[dir="ltr"]{
// margin-left: 10px;
// }
// :root[dir="rtl"]{
// margin-right: 10px;
// }
}
} }
ion-label,
[item-end] {
white-space: normal;
font-size: 14px;
padding-top: 15%;
// :root[dir="ltr"]{
// margin-left: 10px;
// }
// :root[dir="rtl"]{
// margin-right: 10px;
// }
}
} }
}
.timeline {
position: relative; .timeline {
margin: 15px 0 0 0; position: relative;
// border-bottom: solid 1px var(--cusgray); margin: 15px 0 0 0;
} // border-bottom: solid 1px var(--cusgray);
}
.timeline:before {
.timeline:before {
content: '';
position: inherit !important; content: '';
top: 0; position: inherit !important;
bottom: 0; top: 0;
width: 4px; bottom: 0;
// background: #e4e4e4; width: 4px;
z-index: 1; // background: #e4e4e4;
left: 35px; z-index: 1;
/* margin-left: -10px; */ left: 35px;
/* z-index: 1; */ /* margin-left: -10px; */
} /* z-index: 1; */
}
.timeline .timeline-thumb {
.timeline .timeline-thumb {
border-radius: 500px;
width: 70px !important; border-radius: 500px;
z-index: 2; width: 70px !important;
position: absolute; z-index: 2;
left: 0px; position: absolute;
// :root[dir="ltr"]{ left: 0px;
// left: 37px; // :root[dir="ltr"]{
// } // left: 37px;
// :root[dir="rtl"]{ // }
// right: 37px; // :root[dir="rtl"]{
// } // right: 37px;
float: right; // }
top: 9px; float: right;
} top: 9px;
}
.timeline .timeline-thumb.timeline-icon {
height: 70px; .timeline .timeline-thumb.timeline-icon {
// text-align: center; height: 70px;
// color: white; // text-align: center;
// border: 5px solid #CBD0D3; // color: white;
// transform: scale(0.2); // border: 5px solid #CBD0D3;
} // transform: scale(0.2);
}
.timeline .timeline-item {
width: 40px; .timeline .timeline-item {
width: 40px;
}
}
.timeline .timeline-stats {
position: relative; .timeline .timeline-stats {
font-size: 12px; position: relative;
color: var(--darkgray); font-size: 12px;
color: var(--darkgray);
}
}
.empImge{
border-radius: 50%; .empImge {
width:100%; border-radius: 50%;
height: 100%; width: 100%;
border: #dedede solid 1px; height: 100%;
border: #dedede solid 1px;
}
.empImgeRep { }
border-radius: 50% !important;
width: 80px; .empImgeRep {
height: 80px; border-radius: 50% !important;
border: #dedede solid 1px; width: 80px;
} height: 80px;
border: #dedede solid 1px;
.line{ }
padding-bottom:87px;
} .line {
padding-bottom: 87px;
.attachLable{ }
position: absolute;
top: 0px; .attachLable {
z-index: 0; position: absolute;
background: #30b8c6; top: 0px;
color: #fff; z-index: 0;
border-radius: 50%; background: #30b8c6;
border: 0px; color: #fff;
width: 24px; border-radius: 50%;
height: 24px; border: 0px;
text-align: center; width: 24px;
font-size: 5px; height: 24px;
} text-align: center;
font-size: 5px;
.removeLable{ }
top: 0px;
z-index: 0; .removeLable {
background: #d8252d; top: 0px;
color: #fff; z-index: 0;
border-radius: 50%; background: #d8252d;
border: 0px; color: #fff;
width: 20px; border-radius: 50%;
height: 20px; border: 0px;
text-align: center; width: 20px;
font-size: 5px; height: 20px;
} text-align: center;
font-size: 5px;
.note-modal { }
// width: 90%;
// height: 50%; .note-modal {
// top: 20%; // width: 90%;
// left: 5%; // height: 50%;
// right: 5%; // top: 20%;
// bottom: 5%; // left: 5%;
background: rgba(0, 0, 0, 0.5) !important; // right: 5%;
padding: 30% 10% !important; // bottom: 5%;
--height: 12cm !important; background: rgba(0, 0, 0, 0.5) !important;
// --width: 80% !important; padding: 30% 10% !important;
--border-radius:20px; --height: 12cm !important;
// --width: 80% !important;
} --border-radius: 20px;
.header-toolbar-new{
--background: #269DB8; }
}
.title{ .header-toolbar-new {
margin-top: -37px; --background: #BE332F;
margin-left: 85px; }
}
.title-ar{ .title {
margin-top: -37px; margin-top: -37px;
margin-right: 101px; margin-left: 85px;
} }
.confirmEitOkButton{
white-space: normal !important; .title-ar {
text-transform: capitalize !important; margin-top: -37px;
min-height: 45px !important; margin-right: 101px;
min-width: 5px !important; }
margin: 8px !important;
background-color: #269DB8; .confirmEitOkButton {
width: 80% !important; white-space: normal !important;
color: white!important; text-transform: capitalize !important;
border-radius: 16px !important; min-height: 45px !important;
} min-width: 5px !important;
margin: 8px !important;
.approvalTitle-ar{ background-color: #BE332F;
font-weight: bold; width: 80% !important;
font-size: 16px; color: white !important;
text-align: right; border-radius: 16px !important;
}
}
.approvalTitle{ .approvalTitle-ar {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
text-align: left; text-align: right;
}
}
.approvalTitle {
font-weight: bold;
font-size: 16px;
text-align: left;
}

@ -99,7 +99,7 @@
// color: #606161; // color: #606161;
// font-family: WorkSans-Bold; // font-family: WorkSans-Bold;
// } // }
// .card-summary-heading-hours-extended-heading{ // .card-summary-heading-hours-extended-heading{
// color: #D3D3D3; // color: #D3D3D3;
// font-family: WorkSans-Bold; // font-family: WorkSans-Bold;
@ -185,7 +185,7 @@
// .header-div { // .header-div {
// background-color: #269DB8; // background-color: #BE332F;
// text-transform: capitalize; // text-transform: capitalize;
// height: 180px; // height: 180px;
// position: relative; // position: relative;
@ -209,12 +209,12 @@
// --border-color:white!important ; // --border-color:white!important ;
// width: 85%!important ; // width: 85%!important ;
// height: 40px !important ; // height: 40px !important ;
// } // }
// .navbar{ // .navbar{
// font-size: 10px !important; // font-size: 10px !important;
// --background: #269DB8 !important; // --background: #BE332F !important;
// color: aliceblue !important; // color: aliceblue !important;
// // margin-top: 10px !important; // // margin-top: 10px !important;
@ -224,20 +224,20 @@
// // margin-left:330px !important; // // margin-left:330px !important;
// margin-top: 0px !important; // margin-top: 0px !important;
// font-size: 35px !important; // font-size: 35px !important;
// background: #269DB8; // background: #BE332F;
// color: aliceblue; // color: aliceblue;
// margin-left: 0px !important; // margin-left: 0px !important;
// } // }
// .person{ // .person{
// margin-left:100px !important; // margin-left:100px !important;
// margin-top: 0px !important; // margin-top: 0px !important;
// font-size: 23px !important; // font-size: 23px !important;
// background: #269DB8 !important; // background: #BE332F !important;
// color: aliceblue !important; // color: aliceblue !important;
// } // }
// .grid{ // .grid{
@ -264,24 +264,24 @@
// font-size: 12px; // font-size: 12px;
// margin-top: -13px; // margin-top: -13px;
// } // }
// .green-amount{ // .green-amount{
// font-size: 17px; // font-size: 17px;
// font-family: WorkSans-Bold; // font-family: WorkSans-Bold;
// margin-top: -3px; // margin-top: -3px;
// } // }
// .blue-label{ // .blue-label{
// font-size: 12px; // font-size: 12px;
// margin-top: -13px; // margin-top: -13px;
// } // }
// .blue-amount{ // .blue-amount{
// font-size: 17px; // font-size: 17px;
// font-family: WorkSans-Bold; // font-family: WorkSans-Bold;
// margin-top: -4px; // margin-top: -4px;
// } // }
// .today-graph{ // .today-graph{
// display:block !important; // display:block !important;
// height: 150px !important; // height: 150px !important;
@ -297,7 +297,7 @@
// // border-radius: 20px !important; // // border-radius: 20px !important;
// // height: 270px !important; // // height: 270px !important;
// // border: 1px solid #d6d4d4 !important; // // border: 1px solid #d6d4d4 !important;
// margin-top: 7px !important; // margin-top: 7px !important;
// margin-left: 15px !important; // margin-left: 15px !important;
// margin-right: 15px !important; // margin-right: 15px !important;
@ -305,7 +305,7 @@
// border-radius: 20px !important; // border-radius: 20px !important;
// height: 321px !important; // height: 321px !important;
// border: 1px solid #d6d4d4 !important; // border: 1px solid #d6d4d4 !important;
// } // }
// .labelGrid{ // .labelGrid{
// // margin-top: -30px !important; // // margin-top: -30px !important;
@ -374,11 +374,11 @@
// background:var(--primary); // background:var(--primary);
// background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%); // background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
// background: -webkit-linear-gradient(45deg, (--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%); // background: -webkit-linear-gradient(45deg, (--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
// background: #269DB8; // background: #BE332F;
// // background: linear-gradient(90deg, #85C48D 0%, #85C48D 13%, #2BB5C6 98%, #2BB5C6 100%); // // background: linear-gradient(90deg, #85C48D 0%, #85C48D 13%, #2BB5C6 98%, #2BB5C6 100%);
// color:var(--light); // color:var(--light);
// text-transform: capitalize; // text-transform: capitalize;
// display: block; // display: block;
// position: relative; // position: relative;
// height: 210px; // height: 210px;
@ -389,13 +389,13 @@
// .request-heading { // .request-heading {
// span { // span {
// // text-align: center; // // text-align: center;
// // display: block; // // display: block;
// // padding-top: 8px; // // padding-top: 8px;
// // font-family: workSans-Regular; // // font-family: workSans-Regular;
// // text-align: center; // // text-align: center;
// display: block; // display: block;
@ -404,81 +404,81 @@
// margin-left: -157px; // margin-left: -157px;
// margin-top: -19px; // margin-top: -19px;
// padding-bottom: 16px; // padding-bottom: 16px;
// } // }
// } // }
// .result-graph { // .result-graph {
// position: relative; // position: relative;
// background: white; // background: white;
// margin-right: 20px; // margin-right: 20px;
// margin-left: 20px; // margin-left: 20px;
// margin-top: 20px; // margin-top: 20px;
// padding-bottom: 20px; // padding-bottom: 20px;
// border-radius: 20px; // border-radius: 20px;
// } // }
// .result-text-container { // .result-text-container {
// padding: 0; // padding: 0;
// margin: 0; // margin: 0;
// position: absolute; // position: absolute;
// left: 38%; // left: 38%;
// top: 60%; // top: 60%;
// display: block; // display: block;
// text-align: center; // text-align: center;
// transform: translate(-50%, -50%); // transform: translate(-50%, -50%);
// h2 { // h2 {
// font-size: 25px; // font-size: 25px;
// font-family: WorkSans-Bold; // font-family: WorkSans-Bold;
// color: black !important; // color: black !important;
// margin: 0 auto; // margin: 0 auto;
// line-height: 36px; // line-height: 36px;
// } // }
// p { // p {
// font-size: 20px; // font-size: 20px;
// color: black !important; // color: black !important;
// // 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;
// margin: 0 auto; // margin: 0 auto;
// font-size: 12px; // font-size: 12px;
// color: black !important; // color: black !important;
// font-family: workSans-Regular; // font-family: workSans-Regular;
@ -490,7 +490,8 @@
ion-content { ion-content {
--ion-background-color: whitesmoke; --ion-background-color: whitesmoke;
} }
ion-title{
ion-title {
color: white; color: white;
position: absolute; position: absolute;
top: 0; top: 0;
@ -501,109 +502,123 @@ ion-title{
font-weight: bold; font-weight: bold;
height: 100%; height: 100%;
} }
.contentBg{
.contentBg {
padding: 0px 20px; padding: 0px 20px;
} }
.contentBg:before { .contentBg:before {
position: absolute; position: absolute;
content: ""; content: "";
background: #269DB8; background: #BE332F;
height: 140px; height: 140px;
width: 100%; width: 100%;
left: 0; left: 0;
top: 0px; top: 0px;
z-index: 1; z-index: 1;
} }
.user-info{ .user-info {
text-align: center; text-align: center;
margin-bottom: 15px; margin-bottom: 15px;
.user-image-container{
position: relative; .user-image-container {
width: 80px; position: relative;
height: 80px; width: 80px;
display: block; height: 80px;
margin: 0 auto; display: block;
// &:before{ margin: 0 auto;
// position: absolute; // &:before{
// content: ""; // position: absolute;
// width: 20px; // content: "";
// height: 20px; // width: 20px;
// border-radius: 20px; // height: 20px;
// border: 1px solid white; // border-radius: 20px;
// top: 0; // border: 1px solid white;
// right: 0; // top: 0;
// background-color: red; // right: 0;
// z-index: 9; // background-color: red;
// } // z-index: 9;
// &.present:before{ // }
// background-color: green !important; // &.present:before{
// } // background-color: green !important;
} // }
.user-image{ }
overflow: hidden;
position: relative; .user-image {
display: block; overflow: hidden;
width: 100%; position: relative;
height: 100%; display: block;
border-radius: 80px; width: 100%;
border: 1px solid #ccc; height: 100%;
margin: 0px auto 6px; border-radius: 80px;
} border: 1px solid #ccc;
h1{ margin: 0px auto 6px;
margin: 0; }
padding: 0;
font-family: WorkSans-Bold; h1 {
font-size: 18px; margin: 0;
margin-bottom: 4px; padding: 0;
} font-family: WorkSans-Bold;
span{ font-size: 18px;
font-size: 14px; margin-bottom: 4px;
display: block; }
color: #888
} span {
font-size: 14px;
display: block;
color: #888
}
} }
$actionBtnSize : 36px; $actionBtnSize : 36px;
.user-actions{
text-align: center; .user-actions {
.action-button{ text-align: center;
font-size: 11px;
white-space: nowrap; .action-button {
color: #888; font-size: 11px;
.action-button-icon{ white-space: nowrap;
width: $actionBtnSize; color: #888;
height: $actionBtnSize;
border-radius: $actionBtnSize; .action-button-icon {
margin: 0 auto; width: $actionBtnSize;
display: block; height: $actionBtnSize;
background-color: #269DB8; border-radius: $actionBtnSize;
line-height: $actionBtnSize; margin: 0 auto;
margin-bottom: 3px; display: block;
img{ background-color: #BE332F;
margin: 0 auto; line-height: $actionBtnSize;
vertical-align: middle; margin-bottom: 3px;
}
} img {
margin: 0 auto;
vertical-align: middle;
}
} }
}
} }
.employee-information-indetail{
.employee-information-indetail {
background: white; background: white;
margin-top: 15px; margin-top: 15px;
border-radius: 20px; border-radius: 20px;
margin-bottom: 15px; margin-bottom: 15px;
ion-col{
padding: 15px; ion-col {
border-bottom: 1px solid #ccc; padding: 15px;
border-bottom: 1px solid #ccc;
} }
h2{
font-size: 13px; h2 {
font-family: WorkSans-Bold; font-size: 13px;
margin: 0; font-family: WorkSans-Bold;
margin: 0;
} }
p{
font-size: 13px; p {
margin: 0; font-size: 13px;
margin: 0;
} }
} }
@ -617,27 +632,31 @@ $actionBtnSize : 36px;
.active-Segment { .active-Segment {
font-size: 0.3cm !important; font-size: 0.3cm !important;
background: #269DB8 !important; background: #BE332F !important;
text-transform: none; text-transform: none;
--color-checked: none; --color-checked: none;
border-radius: 100px; border-radius: 100px;
border:0; border: 0;
} }
.active-Segment ion-label{
.active-Segment ion-label {
font-size: 11px; font-size: 11px;
color: white !important; color: white !important;
} }
.normal-Segment ion-label{
.normal-Segment ion-label {
color: black !important; color: black !important;
font-size: 11px; font-size: 11px;
} }
.normal-Segment { .normal-Segment {
font-size: 0.3cm !important; font-size: 0.3cm !important;
text-transform: none; text-transform: none;
--color-checked: none; --color-checked: none;
border: 0; border: 0;
} }
.colum-container{
.colum-container {
padding: 15px; padding: 15px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }
@ -648,72 +667,80 @@ $actionBtnSize : 36px;
margin-top: 10px; margin-top: 10px;
} }
.search-dropdown{ .search-dropdown {
background: #269DB8; background: #BE332F;
ion-select { ion-select {
.select-text{ .select-text {
margin-left: -10px; margin-left: -10px;
} }
.select-icon{
.select-icon-inner{ .select-icon {
opacity: 1; .select-icon-inner {
color: white; opacity: 1;
margin-top: -1px; color: white;
} margin-top: -1px;
} }
}
} }
} }
.input-container{ .input-container {
background: white; background: white;
ion-input{
border-bottom-color: transparent; ion-input {
border-bottom-color: transparent;
} }
} }
.search-container{ .search-container {
margin-top: 15px; margin-top: 15px;
ion-col{
background: white; ion-col {
border-radius: 12px; background: white;
padding-right: 10px; border-radius: 12px;
flex: none; padding-right: 10px;
ion-icon{ flex: none;
margin-right: 3px;
font-size: 14px; ion-icon {
margin-left: 3px; margin-right: 3px;
vertical-align: middle; font-size: 14px;
} margin-left: 3px;
span{ vertical-align: middle;
font-size: 12px; }
vertical-align: middle;
} span {
font-size: 12px;
vertical-align: middle;
}
} }
} }
/////////////////////////////////////////////////////// Attendance /////////////////////// /////////////////////////////////////////////////////// Attendance ///////////////////////
.header{ .header {
position: relative; position: relative;
z-index: 999; z-index: 999;
} }
.slidPrev{ .slidPrev {
margin-left: 10px; margin-left: 10px;
background: transparent; background: transparent;
} }
.slidNext{ .slidNext {
background: transparent; background: transparent;
margin-top: -1px; margin-top: -1px;
margin-left: 43px; margin-left: 43px;
} }
.activeArrow{
.activeArrow {
height: 20px; height: 20px;
width: 20px; width: 20px;
color: white; color: white;
} }
.disabledArrow{
.disabledArrow {
height: 20px; height: 20px;
width: 20px; width: 20px;
color: gray; color: gray;
@ -729,14 +756,16 @@ $actionBtnSize : 36px;
z-index: 1; z-index: 1;
margin-bottom: 10px; margin-bottom: 10px;
} }
.request-heading { .request-heading {
text-align: left; text-align: left;
display: block; display: block;
padding-top: 8px; padding-top: 8px;
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;
padding-top: 8px; padding-top: 8px;
@ -753,48 +782,51 @@ $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;
margin: 0 auto; margin: 0 auto;
font-size: 12px; font-size: 12px;
font-family: workSans-Regular; font-family: workSans-Regular;
} }
} }
.today-graph { .today-graph {
width: 100%; width: 100%;
max-height: 4cm; max-height: 4cm;
} }
.green-label{ .green-label {
font-size: 12px; font-size: 12px;
margin-top: -13px; margin-top: -13px;
} }
.green-amount{ .green-amount {
font-size: 17px; font-size: 17px;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
margin-top: -3px; margin-top: -3px;
} }
.blue-label{ .blue-label {
font-size: 12px; font-size: 12px;
margin-top: -13px; margin-top: -13px;
} }
.blue-amount{ .blue-amount {
font-size: 17px; font-size: 17px;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
margin-top: -4px; margin-top: -4px;
} }
.labelGrid{ .labelGrid {
background-color: white !important; background-color: white !important;
border-radius: 20px !important; border-radius: 20px !important;
height: 88px !important; height: 88px !important;
@ -803,25 +835,26 @@ $actionBtnSize : 36px;
padding: 10px; padding: 10px;
label { label {
font-size: 9px; font-size: 9px;
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;
display: block; display: block;
text-align: right; text-align: right;
margin:0; margin: 0;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left:0; left: 0;
width: 100%; width: 100%;
padding: 10px; padding: 10px;
} }
} }
.bodyGrid{ .bodyGrid {
margin-top: 7px !important; margin-top: 7px !important;
margin-left: 15px !important; margin-left: 15px !important;
margin-right: 15px !important; margin-right: 15px !important;
@ -830,29 +863,33 @@ $actionBtnSize : 36px;
height: 321px !important; height: 321px !important;
border: 1px solid #d6d4d4 !important; border: 1px solid #d6d4d4 !important;
} }
.attendance-information{
.attendance-information {
background: white; background: white;
border-radius: 20px; border-radius: 20px;
padding: 10px; padding: 10px;
@media screen and (min-width: 300px) and (max-width:359px) { @media screen and (min-width: 300px) and (max-width:359px) {
h2{ h2 {
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 14px; font-size: 14px;
} }
span{
font-size: 9px; span {
} font-size: 9px;
}
} }
@media screen and (min-width: 360px) { @media screen and (min-width: 360px) {
h2{ h2 {
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 18px; font-size: 18px;
} }
span{
font-size: 9px; span {
font-size: 9px;
} }
} }
} }
@ -863,79 +900,84 @@ $actionBtnSize : 36px;
color: #0a5d53; color: #0a5d53;
} }
.green-label-container{ .green-label-container {
border-top: 5px solid #269DB8; border-top: 5px solid #BE332F;
padding: 1px 0px; padding: 1px 0px;
margin: 15px 0px margin: 15px 0px
} }
.blue-label-container{ .blue-label-container {
border-top: 5px solid #292F42; border-top: 5px solid #292F42;
padding: 1px 0px; padding: 1px 0px;
margin: 15px 0px margin: 15px 0px
} }
.span-one{
.span-one {
display: block; display: block;
font-size: 12px; font-size: 12px;
color: black; color: black;
} }
.span-two{
.span-two {
display: block; display: block;
font-size: 22px; font-size: 22px;
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%;
right: 30px; right: 30px;
top: 50%; top: 50%;
margin-top: -60px; margin-top: -60px;
} }
.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{
text-align: right; h2 {
font-family: WorkSans-Bold; text-align: right;
font-family: WorkSans-Bold;
} }
} }
.calendar-container{
.calendar-container {
background: white; background: white;
margin-bottom: 100px; margin-bottom: 100px;
margin-top: 20px; margin-top: 20px;
border-radius: 20px; border-radius: 20px;
span{
text-align: left; span {
display: block; text-align: left;
padding-top: 8px; display: block;
margin-bottom: 10px; padding-top: 8px;
margin-left: 10px; margin-bottom: 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;
padding-top: 8px; padding-top: 8px;
margin-bottom: 6px; margin-bottom: 6px;
margin-right: 12px; margin-right: 12px;
} }
} }

@ -82,7 +82,7 @@ export class TimeCardDetailsComponent implements OnInit {
this.preMonth = new Date().getMonth(); this.preMonth = new Date().getMonth();
const monthIndex = new Date().getMonth() + 1; const monthIndex = new Date().getMonth() + 1;
this.currentMonthName = this.direction === 'ltr' ? this.common.getMonthName(monthIndex) : this.common.getMonthNameAr(monthIndex); this.currentMonthName = this.direction === 'ltr' ? this.common.getMonthName(monthIndex) : this.common.getMonthNameAr(monthIndex);
this.calendarConfig(this.common.getMonthName(new Date().getMonth() + 1) , new Date().getFullYear()); this.calendarConfig(this.common.getMonthName(new Date().getMonth() + 1), new Date().getFullYear());
} }
calendarConfig(month?, year?) { calendarConfig(month?, year?) {
@ -102,7 +102,7 @@ export class TimeCardDetailsComponent implements OnInit {
this.selMenu = this.common.sharedService.getSharedData(MenuResponse.SHARED_DATA, false); this.selMenu = this.common.sharedService.getSharedData(MenuResponse.SHARED_DATA, false);
this.menuType = this.selMenu.List_Menu.MENU_TYPE; this.menuType = this.selMenu.List_Menu.MENU_TYPE;
dayAndHoursReqObj.P_SELECTED_EMPLOYEE_NUMBER = this.selEmp; dayAndHoursReqObj.P_SELECTED_EMPLOYEE_NUMBER = this.selEmp;
dayAndHoursReqObj.P_MENU_TYPE = this.menuType; dayAndHoursReqObj.P_MENU_TYPE = this.menuType;
dayAndHoursReqObj.P_SELECTED_RESP_ID = this.respID; dayAndHoursReqObj.P_SELECTED_RESP_ID = this.respID;
@ -130,14 +130,14 @@ export class TimeCardDetailsComponent implements OnInit {
allDays[i].customDaysOff = false; allDays[i].customDaysOff = false;
allDays[i].customSchedule = false; allDays[i].customSchedule = false;
allDays[i].customScheduleDate = new Date(allDays[i].SCHEDULE_DATE); allDays[i].customScheduleDate = new Date(allDays[i].SCHEDULE_DATE);
// tslint:disable-next-line: triple-equals // tslint:disable-next-line: triple-equals
} else if (allDays[i].ATTENDED_FLAG == 'N' && allDays[i].ABSENT_FLAG == 'Y') { } else if (allDays[i].ATTENDED_FLAG == 'N' && allDays[i].ABSENT_FLAG == 'Y') {
allDays[i].customPresent = false; allDays[i].customPresent = false;
allDays[i].customAbsent = true; allDays[i].customAbsent = true;
allDays[i].customDaysOff = false; allDays[i].customDaysOff = false;
allDays[i].customSchedule = false; allDays[i].customSchedule = false;
allDays[i].customScheduleDate = new Date(allDays[i].SCHEDULE_DATE); allDays[i].customScheduleDate = new Date(allDays[i].SCHEDULE_DATE);
// tslint:disable-next-line: triple-equals // tslint:disable-next-line: triple-equals
} else if (allDays[i].ATTENDED_FLAG == 'N' && allDays[i].DAY_TYPE === 'OFF') { } else if (allDays[i].ATTENDED_FLAG == 'N' && allDays[i].DAY_TYPE === 'OFF') {
allDays[i].customPresent = false; allDays[i].customPresent = false;
allDays[i].customAbsent = false; allDays[i].customAbsent = false;
@ -185,7 +185,7 @@ export class TimeCardDetailsComponent implements OnInit {
data: [this.absentDays, this.attendedDays], data: [this.absentDays, this.attendedDays],
backgroundColor: [ backgroundColor: [
'#292F42', '#292F42',
'#269DB8' '#BE332F'
], ],
borderWidth: 2 borderWidth: 2
}] }]
@ -197,16 +197,16 @@ export class TimeCardDetailsComponent implements OnInit {
nextSlide() { nextSlide() {
if (this.currentMonthName !== this.month) { if (this.currentMonthName !== this.month) {
this.common.startLoading(); this.common.startLoading();
this.showData = false; this.showData = false;
if (this.nextMonth > 12) { if (this.nextMonth > 12) {
this.currentYear = this.currentYear + 1; this.currentYear = this.currentYear + 1;
this.nextMonth = 1; this.nextMonth = 1;
} }
this.currentDate = new Date(this.currentYear, (this.nextMonth - 1), 1); this.currentDate = new Date(this.currentYear, (this.nextMonth - 1), 1);
this.calendarConfig(this.common.getMonthName(this.nextMonth) , this.currentYear); this.calendarConfig(this.common.getMonthName(this.nextMonth), this.currentYear);
this.nextMonth = this.nextMonth + 1; this.nextMonth = this.nextMonth + 1;
this.preMonth = this.nextMonth - 2; this.preMonth = this.nextMonth - 2;
} }
} }
@ -214,11 +214,11 @@ export class TimeCardDetailsComponent implements OnInit {
this.common.startLoading(); this.common.startLoading();
this.showData = false; this.showData = false;
if (this.preMonth === 0) { if (this.preMonth === 0) {
this.currentYear = this.currentYear - 1; this.currentYear = this.currentYear - 1;
this.preMonth = 12; this.preMonth = 12;
} }
this.currentDate = new Date(this.currentYear, (this.preMonth - 1), 1); this.currentDate = new Date(this.currentYear, (this.preMonth - 1), 1);
this.calendarConfig(this.common.getMonthName(this.preMonth) , this.currentYear); this.calendarConfig(this.common.getMonthName(this.preMonth), this.currentYear);
this.preMonth = this.preMonth - 1; this.preMonth = this.preMonth - 1;
this.nextMonth = this.preMonth + 2; this.nextMonth = this.preMonth + 2;
} }

@ -2,13 +2,16 @@
.item-md ios { .item-md ios {
white-space: normal; white-space: normal;
} }
.col { .col {
white-space: normal; white-space: normal;
font-size: 14px; font-size: 14px;
} }
ion-col.colBold { ion-col.colBold {
color: #1a586d; color: #c6903e;
} }
.imgSize { .imgSize {
width: 22px; width: 22px;
height: 22px; height: 22px;
@ -24,7 +27,7 @@ ion-card-header {
} }
.header-toolbar { .header-toolbar {
--background: linear-gradient(45deg, #3ac1f1 0%, #19a163 36%, #19a163 59%, #1a586d 100%); --background: linear-gradient(45deg, #3ac1f1 0%, #19a163 36%, #19a163 59%, #c6903e 100%);
} }
.btnBack { .btnBack {
@ -49,6 +52,7 @@ ion-card-header {
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-top-right-radius: 10px; border-top-right-radius: 10px;
background: #acacac; background: #acacac;
.hrTitle { .hrTitle {
white-space: normal; white-space: normal;
padding: 5px; padding: 5px;
@ -57,6 +61,7 @@ ion-card-header {
min-height: 45px; min-height: 45px;
line-height: 1.2; line-height: 1.2;
} }
.button, .button,
.button-md, .button-md,
button-ios { button-ios {
@ -71,62 +76,65 @@ ion-card-header {
} }
//////////new design//////////////////////// //////////new design////////////////////////
.itemVR .itemVR {
{ background: #f0efef !important;
background: #f0efef !important; --background: #f0efef !important;
--background: #f0efef !important; border: #dbdbdb 1px solid;
border: #dbdbdb 1px solid; border-radius: 10px;
border-radius: 10px; margin-bottom: 7px;
margin-bottom: 7px; }
}
.listVR{ .listVR {
background: transparent !important; background: transparent !important;
} }
.red-status{ .red-status {
color: var(--light) !important; color: var(--light) !important;
font-weight:bold; font-weight: bold;
background: var( --red); background: var(--red);
border-radius: 9px; border-radius: 9px;
text-align: center; text-align: center;
margin-top: 10px; margin-top: 10px;
position: relative; position: relative;
width: auto; width: auto;
height: 100%; height: 100%;
display: inline-block !important; display: inline-block !important;
padding: 0px 15px 0px 15px; padding: 0px 15px 0px 15px;
} }
.green-status{ .green-status {
color: var(--light) !important; color: var(--light) !important;
font-weight:bold; font-weight: bold;
background: var( --custgreen); background: var(--custgreen);
border-radius: 9px; border-radius: 9px;
text-align: center; text-align: center;
margin-top: 10px; margin-top: 10px;
position: relative; position: relative;
width: auto; width: auto;
height: 100%; height: 100%;
display: inline-block !important; display: inline-block !important;
padding: 0px 15px 0px 15px; padding: 0px 15px 0px 15px;
} }
.textBold{ .textBold {
color: black; color: black;
font-weight: bold; font-weight: bold;
font-size: 17px; font-size: 17px;
} }
.label{
.label {
margin-top: -19px; margin-top: -19px;
// border-bottom: #eaeaea solid; // border-bottom: #eaeaea solid;
padding-bottom: 8px; padding-bottom: 8px;
color: black !important; color: black !important;
} }
.createdOn{
.createdOn {
margin: -12px 0px -14px 0px; margin: -12px 0px -14px 0px;
} }
.optionBtn{
background: transparent !important; .optionBtn {
} background: transparent !important;
}

@ -40,7 +40,7 @@ button {
} }
.header-toolbar { .header-toolbar {
--background: linear-gradient(45deg, #3ac1f1 0%, #19a163 36%, #19a163 59%, #1a586d 100%); --background: linear-gradient(45deg, #3ac1f1 0%, #19a163 36%, #19a163 59%, #c6903e 100%);
} }
ion-label { ion-label {
@ -114,7 +114,7 @@ ion-label {
} }
.header-toolbar { .header-toolbar {
--background: linear-gradient(45deg, #3ac1f1 0%, #19a163 36%, #19a163 59%, #1a586d 100%); --background: linear-gradient(45deg, #3ac1f1 0%, #19a163 36%, #19a163 59%, #c6903e 100%);
} }
.btnBack { .btnBack {
@ -1481,7 +1481,7 @@ div.no-dataDiv {
} }
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
@ -1501,7 +1501,7 @@ div.no-dataDiv {
// margin-left:0; // margin-left:0;
// } // }
// .search-dropdown{ // .search-dropdown{
// background: #269DB8; // background: #BE332F;
// ion-select { // ion-select {
// .select-text{ // .select-text{
// margin-left: -10px; // margin-left: -10px;
@ -1591,7 +1591,7 @@ div.no-dataDiv {
color: #fff !important; color: #fff !important;
&:before { &:before {
background-color: #269DB8 !important; background-color: #BE332F !important;
} }
} }
@ -1655,7 +1655,7 @@ div.no-dataDiv {
// border-radius: 50%; // border-radius: 50%;
// } // }
// .absent::after{ // .absent::after{
// background: #269DB8; // background: #BE332F;
// } // }
// .present::after{ // .present::after{
@ -1705,7 +1705,7 @@ table.monthview-datetable th small {
bottom: -8px; bottom: -8px;
.swiper-pagination-bullet-active { .swiper-pagination-bullet-active {
background: #269DB8; background: #BE332F;
} }
} }
@ -1846,4 +1846,8 @@ ion-app[dir="rtl"] {
.iconBox img { .iconBox img {
margin: 5px !important; margin: 5px !important;
} }
.pClass {
text-align: right !important;
}
} }

@ -1,43 +1,53 @@
@font-face { @font-face {
font-family: WorkSans-Light; font-family: WorkSans-Light;
src: url('../assets/font/WorkSans-Light.otf'); src: url('../assets/font/WorkSans-Light.otf');
} }
@font-face { @font-face {
font-family: GE_SS_TWO_MEDIUM; font-family: GE_SS_TWO_MEDIUM;
src: url('../assets/font/GE_SS_TWO_MEDIUM.otf'); src: url('../assets/font/GE_SS_TWO_MEDIUM.otf');
} }
@font-face { @font-face {
font-family: WorkSans-Medium; font-family: WorkSans-Medium;
src: url('../assets/font/WorkSans-Medium.otf'); src: url('../assets/font/WorkSans-Medium.otf');
} }
@font-face { @font-face {
font-family: GE_SS_Two_Light; font-family: GE_SS_Two_Light;
src: url('../assets/font/GE_SS_Two_Light.otf'); src: url('../assets/font/GE_SS_Two_Light.otf');
} }
@font-face { @font-face {
font-family: WorkSans-Regular; font-family: WorkSans-Regular;
src: url('../assets/font/WorkSans-Regular.otf'); src: url('../assets/font/WorkSans-Regular.otf');
} }
@font-face { @font-face {
font-family: GE_SS_Two_Bold; font-family: GE_SS_Two_Bold;
src: url('../assets/font/GE_SS_Two_Bold.otf'); src: url('../assets/font/GE_SS_Two_Bold.otf');
} }
@font-face { @font-face {
font-family: WorkSans-SemiBold; font-family: WorkSans-SemiBold;
src: url('../assets/font/WorkSans-SemiBold.otf'); src: url('../assets/font/WorkSans-SemiBold.otf');
} }
@font-face { @font-face {
font-family: GE_SS_Two_Bold; font-family: GE_SS_Two_Bold;
src: url('../assets/font/GE_SS_Two_Bold.otf'); src: url('../assets/font/GE_SS_Two_Bold.otf');
} }
@font-face { @font-face {
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
src: url('../assets/font/WorkSans-Bold.otf'); src: url('../assets/font/WorkSans-Bold.otf');
} }
@font-face { @font-face {
font-family: Poppins-SemiBold; font-family: Poppins-SemiBold;
src: url('../assets/font/Poppins-SemiBold.ttf'); src: url('../assets/font/Poppins-SemiBold.ttf');
} }
@font-face { @font-face {
font-family: Poppins-Medium; font-family: Poppins-Medium;
src: url('../assets/font/Poppins-Medium.ttf'); src: url('../assets/font/Poppins-Medium.ttf');
@ -47,52 +57,55 @@
font-family: Poppins-Bold; font-family: Poppins-Bold;
src: url('../assets/font/Poppins/Poppins-Bold.ttf'); src: url('../assets/font/Poppins/Poppins-Bold.ttf');
} }
@font-face { @font-face {
font-family: Poppins-Medium; font-family: Poppins-Medium;
src: url('../assets/font/Poppins/Poppins-Medium.ttf'); src: url('../assets/font/Poppins/Poppins-Medium.ttf');
} }
@font-face { @font-face {
font-family: Poppins; font-family: Poppins;
src: url('../assets/font/Poppins/Poppins-Regular.ttf'); src: url('../assets/font/Poppins/Poppins-Regular.ttf');
} }
:root { :root {
--ion-font-family: 'Poppins'; --ion-font-family: 'Poppins';
--break-small: 450px; --break-small: 450px;
--break-big:565px; --break-big: 565px;
//$break-large: 1200px; //$break-large: 1200px;
--fontFamilyLightEN:'Poppins'; --fontFamilyLightEN: 'Poppins';
--ontFamilyLightAR:'GE_SS_Two_Light'; --ontFamilyLightAR: 'GE_SS_Two_Light';
--fontFamilyRegularEN:'Poppins'; --fontFamilyRegularEN: 'Poppins';
--fontFamilyRegularAR:'GE_SS_TWO_MEDIUM'; --fontFamilyRegularAR: 'GE_SS_TWO_MEDIUM';
--fontFamilyMediumEN:'Poppins-Regular'; --fontFamilyMediumEN: 'Poppins-Regular';
--fontFamilyMediumAR:'GE_SS_TWO_MEDIUM'; --fontFamilyMediumAR: 'GE_SS_TWO_MEDIUM';
--fontFamilyBoldEN:'Poppins-Bold'; --fontFamilyBoldEN: 'Poppins-Bold';
--fontFamilyBoldAR:'GE_SS_Two_Bold'; --fontFamilyBoldAR: 'GE_SS_Two_Bold';
--fontFamilySemiBoldEN:'Poppins-Bold'; --fontFamilySemiBoldEN: 'Poppins-Bold';
--fontFamilySemiBoldAR:'GE_SS_Two_Bold'; --fontFamilySemiBoldAR: 'GE_SS_Two_Bold';
--fontFamilyIOSAR:-apple-system, "Helvetica Neue", "Roboto", sans-serif; --fontFamilyIOSAR: -apple-system, "Helvetica Neue", "Roboto", sans-serif;
--fontFamilyAndroidAR:"Roboto", "Helvetica Neue", sans-serif; --fontFamilyAndroidAR: "Roboto", "Helvetica Neue", sans-serif;
--primary: #3ac1f1; --primary: #3ac1f1;
--secondary: #19a163; --secondary: #19a163;
--danger: #f53d3d; --danger: #f53d3d;
--customnavy: #1a586d; --customnavy: #c6903e;
--light: #ffffff; --light: #ffffff;
--dark: #000000; --dark: #000000;
--gray: #e4e5e7; --gray: #e4e5e7;
--custgreen: #209a83; --custgreen: #209a83;
--cusgray:#d9d9d9; --cusgray: #d9d9d9;
--darkgray:#7F8C8D; --darkgray: #7F8C8D;
--grayBG:#acacac; --grayBG: #acacac;
--labelColor:#999; --labelColor: #999;
--orange:#F7941D; --orange: #F7941D;
--green:#209B48; --green: #209B48;
--red:#BE1E2D; --red: #BE1E2D;
--blue:#223262; --blue: #223262;
--cyanblue:#1b75bc; --cyanblue: #1b75bc;
--newgreen:#269DB8; --newgreen: #BE332F;
--darkblue:#269DB8; --darkblue: #BE332F;
--lightblue:#3cb9d5; --lightblue: #3cb9d5;
--newred:#cb3232; --newred: #cb3232;
--fontFamilyPoppins-SemiBold: 'Poppins-SemiBold'; --fontFamilyPoppins-SemiBold: 'Poppins-SemiBold';
--fontFamilyPoppins-Medium: 'Poppins-Medium'; --fontFamilyPoppins-Medium: 'Poppins-Medium';
// $font-family-base: $fontFamilyMediumEN !default; // $font-family-base: $fontFamilyMediumEN !default;
@ -104,7 +117,7 @@
// font-size: 1.4rem; // font-size: 1.4rem;
// background-color: #fff; // background-color: #fff;
// } // }
// ion-app.md { // ion-app.md {
// font-family: "Roboto", "Helvetica Neue", sans-serif; // font-family: "Roboto", "Helvetica Neue", sans-serif;
// font-size: 1.4rem; // font-size: 1.4rem;
@ -113,43 +126,43 @@
// $text-input-md-highlight-color:--primary; // $text-input-md-highlight-color:--primary;
// $text-input-ios-highlight-color:--primary; // $text-input-ios-highlight-color:--primary;
// $label-md-text-color-focused:--primary; // $label-md-text-color-focused:--primary;
// $label-ios-text-color-focused:--primary; // $label-ios-text-color-focused:--primary;
// $alert-md-button-text-color:--primary; // $alert-md-button-text-color:--primary;
// $alert-ios-button-text-color:--primary; // $alert-ios-button-text-color:--primary;
// $alert-md-input-border-color-focused:--primary; // $alert-md-input-border-color-focused:--primary;
// $alert-ios-checkbox-background-color-on:--primary; // $alert-ios-checkbox-background-color-on:--primary;
// $alert-ios-checkbox-border-color-on:--primary; // $alert-ios-checkbox-border-color-on:--primary;
// $checkbox-md-icon-background-color-on:$primary; // $checkbox-md-icon-background-color-on:$primary;
// $checkbox-ios-background-color-on:$primary; // $checkbox-ios-background-color-on:$primary;
// $checkbox-md-icon-border-color-on:$primary; // $checkbox-md-icon-border-color-on:$primary;
// $toggle-ios-background-color-on:$primary; // $toggle-ios-background-color-on:$primary;
// $toggle-md-active-color:$primary; // $toggle-md-active-color:$primary;
// $radio-md-color-on:$primary; // $radio-md-color-on:$primary;
// $radio-ios-color-on:$primary; // $radio-ios-color-on:$primary;
// $button-ios-background-color:$primary; // $button-ios-background-color:$primary;
// $picker-md-button-text-color:$primary; // $picker-md-button-text-color:$primary;
// $picker-md-option-selected-color:$primary; // $picker-md-option-selected-color:$primary;
// $picker-ios-button-text-color:$primary; // $picker-ios-button-text-color:$primary;
// $range-md-bar-active-background-color:$primary; // $range-md-bar-active-background-color:$primary;
// $range-ios-bar-active-background-color:$primary; // $range-ios-bar-active-background-color:$primary;
// $text-input-ios-highlight-color:$primary; // $text-input-ios-highlight-color:$primary;
// $loading-md-spinner-color:$primary; // $loading-md-spinner-color:$primary;
// $text-input-highlight-color-invalid:$danger; // $text-input-highlight-color-invalid:$danger;
// $text-input-ios-highlight-color-invalid:$danger; // $text-input-ios-highlight-color-invalid:$danger;
// $text-input-md-highlight-color-invalid:$danger; // $text-input-md-highlight-color-invalid:$danger;
// $text-input-ios-show-focus-highlight: true; // $text-input-ios-show-focus-highlight: true;
} }
Loading…
Cancel
Save