added new fonts

MOHEMM-SFH-COLORS
Fatimah Alshammari 5 years ago
parent a30e9c3da2
commit 4e6702dbf6

@ -16,5 +16,6 @@
.text-span{
font-size: 13px;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
}

@ -9,7 +9,7 @@
</ion-col>
<ion-col [size]="9" style="padding: 8px 5px 0px;margin-top: 14px;">
<div>
<span class="employee-name" (click)="getDetails()">
<span [ngClass]=" direction == 'en'? 'employee-name' : 'employee-name-ar'" (click)="getDetails()">
<h2 class="name">{{name}}</h2>
<span class="title">{{title}}</span>
</span>

@ -61,28 +61,109 @@
display: inline-block;
width: 80%;
.name{
font-size: 16px;
color: black;
// margin: 0;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-left: -10px;
margin-top: -5px;
font-family: 'WorkSans-Bold';
// font-size: 16px;
// color: black;
// // margin: 0;
// width: 100%;
// text-overflow: ellipsis;
// white-space: nowrap;
// overflow: hidden;
// margin-left: -10px;
// margin-top: -5px;
// font-family: 'WorkSans-Bold';
font-size: 16px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-left: -10px;
margin-top: -5px;
text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 25px;
letter-spacing: -0.64px;
color: #2B353E;
opacity: 1;
}
.title{
// font-size: 13px;
// color: #888;
// width: 100%;
// text-overflow: ellipsis;
// white-space: nowrap;
// overflow: hidden;
// display: block;
// margin-left: -10px;
// margin-top: -6px;
// color: black;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 12px;
letter-spacing: -0.56px;
color: #575757;
opacity: 1;
font-size: 14px;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
margin-left: -10px;
margin-top: -10px;
}
}
.employee-name-ar{
display: inline-block;
width: 80%;
.name{
// font-size: 16px;
// color: black;
// // margin: 0;
// width: 100%;
// text-overflow: ellipsis;
// white-space: nowrap;
// overflow: hidden;
// margin-left: -10px;
// margin-top: -5px;
// font-family: 'WorkSans-Bold';
font-size: 16px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-left: -10px;
margin-top: -5px;
text-align: right;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 25px;
letter-spacing: -0.64px;
color: #2B353E;
opacity: 1;
}
.title{
font-size: 13px;
color: #888;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
margin-left: -10px;
margin-top: -6px;
color: black;
// font-size: 13px;
// color: #888;
// width: 100%;
// text-overflow: ellipsis;
// white-space: nowrap;
// overflow: hidden;
// display: block;
// margin-left: -10px;
// margin-top: -6px;
// color: black;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 12px;
letter-spacing: -0.56px;
color: #575757;
opacity: 1;
font-size: 14px;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
margin-left: -10px;
margin-top: -10px;
}
}
.image-container{

@ -1,12 +1,13 @@
import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
@Component({
selector: 'app-employee-information',
templateUrl: './employee-information.component.html',
styleUrls: ['./employee-information.component.scss'],
})
export class EmployeeInformationComponent implements OnInit {
public direction: string;
public userImage: any = '../assets/imgs/profile.png';
@Input() name: string;
@Input() title: string;
@ -15,7 +16,11 @@ export class EmployeeInformationComponent implements OnInit {
// tslint:disable-next-line: no-output-on-prefix
@Output() onGetDetails = new EventEmitter();
constructor() { }
constructor(
public ts: TranslatorService,
) {
this.direction = TranslatorService.getCurrentLanguageName();
}
ngOnInit() {}

@ -15,21 +15,21 @@
<img class="img" [src]="EmpImg ? 'data:image/png;base64,'+ EmpImg : '../assets/imgs/profile.png'" alt="Team Member Image"/>
</div>
</div>
<div style="margin-top: 18px;">
<div style="margin-top: 25px;">
<span class="Nametext">{{EmpName}}</span>
<p style=" font-size: 12px; color: rgb(128, 124, 124);">{{EmpEmail}}</p>
<p class="p1">{{EmpEmail}}</p>
<!-- <span>{{EmpJob}}</span> -->
</div>
<div >
<ion-row>
<ion-col style="border-right: 1px solid rgb(221 221 221);">
<p style="font-size: 12px; color: rgb(128, 124, 124);">{{ts.trPK('userProfile','role')}}</p>
<p class="p">{{ts.trPK('userProfile','role')}}</p>
<span class="Boldtext">{{EmpJob}}</span>
</ion-col>
<ion-col>
<p style="font-size: 12px; color: rgb(128, 124, 124);">{{ts.trPK('userProfile','empNo')}}</p>
<p class="p">{{ts.trPK('userProfile','empNo')}}</p>
<span class="Boldtext">{{EmpNum}}</span>
</ion-col>
@ -38,47 +38,47 @@
</div>
</div>
<div class="employee-information-indetail">
<div [ngClass]="direction == 'en' ? 'employee-information-indetail':'employee-information-indetail-ar' ">
<ion-row style="padding-left: 13px;">
<ion-col>
<p style="font-size: 16px; font-family: WorkSans-Bold; margin-top: 15px;">{{ts.trPK('userProfile','profile-details')}}</p>
<div [ngClass]="direction == 'en' ? 'title':'title-ar' " >{{ts.trPK('userProfile','profile-details')}}</div>
</ion-col>
<ion-col [size]="12">
<ion-col style="margin-bottom: -22px;" [size]="12">
<h2>{{ts.trPK('userProfile','category')}}</h2>
<p>{{EmpCatMeaning}}</p>
</ion-col>
<ion-col [size]="12">
</ion-col >
<ion-col style="margin-bottom: -22px;" [size]="12">
<h2>{{ts.trPK('userProfile','address')}}</h2>
<p>{{EmpLocation}}</p>
<p class="hL">{{EmpLocation}}</p>
</ion-col>
<ion-col [size]="12">
<ion-col style="margin-bottom: -22px;" [size]="12">
<h2>{{ts.trPK('userProfile','phone-no')}}</h2>
<p>{{EmpMobile}}</p>
</ion-col>
<ion-col [size]="12">
<ion-col style="margin-bottom: -22px;" [size]="12">
<h2>{{ts.trPK('userProfile','busG')}}</h2>
<p>{{EmpOrgName}}</p>
</ion-col>
<ion-col [size]="12">
<ion-col style="margin-bottom: -22px;" [size]="12">
<h2>{{ts.trPK('userProfile','job')}}</h2>
<p>{{EmpJob}}</p>
</ion-col>
<ion-col [size]="12">
<ion-col style="margin-bottom: -22px;" [size]="12">
<h2>{{ts.trPK('userProfile','payrol')}}</h2>
<p>{{EmpPayrol}}</p>
</ion-col>
<ion-col [size]="12">
<ion-col style="margin-bottom: -22px;" [size]="12">
<h2>{{ts.trPK('userProfile','position')}}</h2>
<p>{{EmpPosition}}</p>
<p class="hL">{{EmpPosition}}</p>
</ion-col>
<ion-col [size]="12" style="border-bottom: none;">
<ion-col style="margin-bottom: -22px;" [size]="12" style="border-bottom: none;">
<h2>{{ts.trPK('userProfile','grade')}}</h2>
<p>{{EmpGRADENAME}}</p>

@ -65,26 +65,85 @@
}}
.Boldtext{
// font-size: 13px;
// font-family: WorkSans-Bold;
// color: black !important;
// display: block !important;
text-align: center;
// font: normal normal 600 16px/19px Poppins;
letter-spacing: -0.64px;
color: #2B353E;
opacity: 1;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-size: 16px;
line-height: 19px;
}
.p{
text-align: center;
// font: normal normal 600 13px/0px Poppins;
letter-spacing: -0.52px;
color: #A2A2A2;
opacity: 1;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-size: 13px;
font-family: WorkSans-Bold;
color: black !important;
display: block !important;
// line-height: 0px !important;
line-height: 0px;
}
.p1{
text-align: center;
// font: normal normal 600 13px/6px Poppins;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-size: 13px;
line-height: 6px;
letter-spacing: -0.52px;
color: #A2A2A2;
opacity: 1;
}
.Nametext{
// font-size: 15px;
// font-family: WorkSans-Bold;
// color: black !important;
// display: block !important;
text-align: center;
/* font: normal normal 600 21px/31px Poppins; */
letter-spacing: -0.84px;
color: #2B353E;
opacity: 1;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 21px;
font-size: 21px;
}
.Nametext{
font-size: 15px;
font-family: WorkSans-Bold;
color: black !important;
display: block !important;
// line-height: 0px !important;
.title{
text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 20px;
font-size: 20px;
letter-spacing: -0.8px;
color: #2B353E;
opacity: 1;
margin-top: 12px;
margin-bottom: -22px;
}
.title-ar{
text-align: right;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 20px;
font-size: 20px;
letter-spacing: -0.8px;
color: #2B353E;
opacity: 1;
margin-top: 12px;
margin-bottom: -22px;
}
.employee-information-indetail{
background: white;
margin-top: 15px;
// margin-top: 15px;
border-radius: 20px;
margin-bottom: 15px;
// margin-bottom: 15px;
border-radius: 20px;
border: 1px solid #ccc;
ion-col{
@ -92,17 +151,75 @@
// border-bottom: 1px solid #ccc;
}
h2{
// font-size: 13px;
// margin: 0;
// font-weight: bold;
// color: rgb(128, 124, 124);
text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 0px;
font-size: 13px;
// font-family: WorkSans-Bold;
margin: 0;
font-weight: bold;
color: rgb(128, 124, 124);
letter-spacing: -0.52px;
color: #A2A2A2;
opacity: 1;
}
p{
// font-size: 13px;
// margin: 0;
// font-family: WorkSans-Bold;
text-align: left;
// font: normal normal 600 16px/5px Poppins;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 5px;
font-size: 16px;
letter-spacing: -0.64px;
color: #2B353E;
opacity: 1;
}
}
.employee-information-indetail-ar{
background: white;
// margin-top: 15px;
border-radius: 20px;
// margin-bottom: 15px;
border-radius: 20px;
border: 1px solid #ccc;
ion-col{
padding: 15px;
// border-bottom: 1px solid #ccc;
}
h2{
// font-size: 13px;
// margin: 0;
// font-weight: bold;
// color: rgb(128, 124, 124);
text-align: right;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 0px;
font-size: 13px;
margin: 0;
font-family: WorkSans-Bold;
// margin-bottom: 10px;
letter-spacing: -0.52px;
color: #A2A2A2;
opacity: 1;
}
p{
// font-size: 13px;
// margin: 0;
// font-family: WorkSans-Bold;
text-align: right;
// font: normal normal 600 16px/5px Poppins;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 5px;
font-size: 16px;
letter-spacing: -0.64px;
color: #2B353E;
opacity: 1;
}
}
@ -435,6 +552,7 @@ ion-input {
border-radius: 7px !important;
--min-height: 1.6cm !important;
width: 315px;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
}}
@media screen and (min-width: 1px) and (max-width:320px) {
.CreateBtn{
@ -448,6 +566,7 @@ ion-input {
border-radius: 7px !important;
--min-height: 1.6cm !important;
width: 231px;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
}}
@ -490,4 +609,8 @@ ion-input {
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.hL{
line-height: 19px !important;
}

@ -12,11 +12,15 @@
<div *ngIf="ticketsInfo.length !=0">
<ion-card *ngFor="let ticket of ticketsInfo ;let i = index" class="result-container" (click)="openRequestDetailsPage(ticket)">
<ion-card-content>
<ion-row style="margin-left: -3px; margin-right: -9px;">
<div class="div">
<div class="text">{{ticket.ticketTypeName}}</div>
<div [ngClass]=" direction == 'en'? 'date' : 'date-ar'" >{{ts.trPK('userProfile','postedDate')}} {{(ticket.created)?.substring(0,10)}}</div>
</div>
<!-- <ion-row style="margin-left: -3px; margin-right: -9px;">
<ion-col class="text">{{ticket.ticketTypeName}}</ion-col>
<ion-col [ngClass]=" direction == 'en'? 'date' : 'date-ar'" >{{ts.trPK('userProfile','postedDate')}} {{(ticket.created)?.substring(0,10)}}</ion-col>
</ion-row>
<ion-row>{{ticket.description}}</ion-row>
</ion-row> -->
<ion-row class="desc">{{ticket.description}}</ion-row>
<!-- <ion-row [ngClass]="{
'New': ticket.ticketStatusId === 1 ,
'ReOpen': ticket.ticketStatusId === 2,
@ -27,7 +31,7 @@
'Closed': ticket.ticketStatusId === 7,
'BackToManager': ticket.ticketStatusId === 8,
'AssignedToHR': ticket.ticketStatusId === 9,}">{{ticket.ticketStatusName}}</ion-row> -->
<ion-row style="margin-top: 5px;color: #259CB8; font-family:'WorkSans-bold';">{{ticket.ticketStatusName}}</ion-row>
<ion-row class="status">{{ticket.ticketStatusName}}</ion-row>
</ion-card-content>
</ion-card>
<div *ngIf=" ticketsInfo.length >= 10 && ticketTotal != ticketsInfo.length" style=" position: relative; display: flex;">

@ -20,56 +20,104 @@ ion-content {
}
.result-container{
position: relative;
background: white;
/* padding-bottom: 3px; */
border-radius: 20px;
z-index: 1;
margin: 15px;
// 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;
border: 1px solid #ccc;
opacity: 1;
}
.text{
font-size: 15px;
margin-top: -9px;
font-family: 'WorkSans-bold';
// font-size: 15px;
// margin-top: -9px;
// font-family: 'WorkSans-bold';
//font-weight: 600;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
// width: 77px;
// height: 20px;
text-align: left;
letter-spacing: -0.56px;
color: #2B353E;
opacity: 1;
font-size: 14px;
line-height: 11px;
}
@media screen and (min-width: 325px){
.date{
margin-top: -9px;
margin-right: -49px;
color: gray;
font-size: 12px;
}}
// @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{
margin-top: -9px;
margin-right: -55px;
color: gray;
font-size: 12px;
margin-left: -88px;
}}
// @media screen and (min-width: 1px) and (max-width:320px) {
// .date{
// margin-top: -9px;
// margin-right: -55px;
// color: gray;
// font-size: 12px;
// margin-left: -88px;
// }}
@media screen and (min-width: 325px){
.date-ar{
margin-top: -9px;
// margin-right: -49px;
color: gray;
font-size: 12px;
}}
// @media screen and (min-width: 325px){
// .date-ar{
// margin-top: -9px;
// // margin-right: -49px;
// color: gray;
// font-size: 12px;
// }}
@media screen and (min-width: 1px) and (max-width:320px) {
.date-ar{
margin-top: -9px;
margin-right: -55px;
color: gray;
font-size: 12px;
margin-left: -88px;
}}
// @media screen and (min-width: 1px) and (max-width:320px) {
// .date-ar{
// margin-top: -9px;
// margin-right: -55px;
// color: gray;
// font-size: 12px;
// margin-left: -88px;
// }}
.date{
text-align: left;
letter-spacing: -0.4px;
color: #969696;
opacity: 1;
// font-weight: 600;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-size: 10px;
line-height: 16px;
}
.desc{
// width: 287px;
// height: 32px;
text-align: left;
// font: normal normal medium 11px/16px Poppins;
letter-spacing: -0.44px;
color: #535353;
opacity: 1;
font-family: var(--fontFamilyPoppins-Medium, inherit);
// font-weight: 500;
font-size: 11px;
line-height: 16px;
}
.status{
color: #259CB8;
width: 75px;
height: 15px;
text-align: left;
letter-spacing: -0.4px;
opacity: 1;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
// font-family: 'Poppins';
//font-weight: 600;
font-size: 10px;
line-height: 16px;
}
@media screen and (min-width: 300px){
.CreateBtn{
@ -83,6 +131,7 @@ ion-content {
border-radius: 7px !important;
--min-height: 1.6cm !important;
width: 315px;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
}}
@media screen and (min-width: 1px) and (max-width:290px) {
@ -97,6 +146,7 @@ ion-content {
border-radius: 7px !important;
--min-height: 1.6cm !important;
width: 257px;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
}}
.footer{
@ -194,4 +244,10 @@ ion-content {
// border-radius: 30px;
height: 26px;
padding: 6px 24px;
}
.div{
position: relative;
display: flex;
justify-content: space-between;
}

@ -12,35 +12,29 @@
<div>
<ion-card class="result-container" >
<ion-card-content>
<ion-row [ngClass]=" direction == 'en'? 'card-content' : 'card-content-ar'" >
<!-- <ion-col [ngClass]="{
'New': statusID === 1 ,
'ReOpen': statusID === 2,
'AssToManager': statusID === 3,
'AssToSpec': statusID === 4,
'Pending': statusID === 5,
'BackToSpec': statusID === 6,
'Closed': statusID === 7,
'BackToManager': statusID === 8,
'AssignedToHR': statusID === 9,}" > {{status}}</ion-col> -->
<div class="div">
<div class="status">{{status}}</div>
<div class="postedDate">{{ts.trPK('userProfile','postedDate')}}{{date}}</div>
</div>
<!-- <ion-row [ngClass]=" direction == 'en'? 'card-content' : 'card-content-ar'" >
<ion-col style="color: #259CB8; font-weight: bold;" > {{status}}</ion-col>
<ion-col [ngClass]=" direction == 'en'? 'date' : 'date-ar'" >{{ts.trPK('userProfile','postedDate')}}{{date}}</ion-col>
</ion-row>
</ion-row> -->
<ion-col [size]="12">
<h2 class="labels">{{ts.trPK('userProfile','refrence')}}</h2>
<p class="text">{{ticketRefre}}</p>
<h2 [ngClass]="direction == 'en' ? 'labels':'labels-ar' " >{{ts.trPK('userProfile','refrence')}}</h2>
<p [ngClass]="direction == 'en' ? 'text':'text-ar' " >{{ticketRefre}}</p>
</ion-col>
<ion-col [size]="12">
<h2 class="labels"> {{ts.trPK('userProfile','section')}}</h2>
<p class="text">{{section}}</p>
<h2 [ngClass]="direction == 'en' ? 'labels':'labels-ar' "> {{ts.trPK('userProfile','section')}}</h2>
<p [ngClass]="direction == 'en' ? 'text':'text-ar' ">{{section}}</p>
</ion-col>
<ion-col [size]="12">
<h2 class="labels"> {{ts.trPK('userProfile','topic')}}</h2>
<p class="text">{{topic}}</p>
<h2 [ngClass]="direction == 'en' ? 'labels':'labels-ar' "> {{ts.trPK('userProfile','topic')}}</h2>
<p [ngClass]="direction == 'en' ? 'text':'text-ar' ">{{topic}}</p>
</ion-col>
<ion-col [size]="12">
<h2 class="labels">{{ts.trPK('userProfile','Description')}}</h2>
<p class="DescrText">{{description}}</p>
<h2 [ngClass]="direction == 'en' ? 'labels':'labels-ar' ">{{ts.trPK('userProfile','Description')}}</h2>
<p [ngClass]="direction == 'en' ? 'DescrText':'DescrText-ar' " >{{description}}</p>
</ion-col>
</ion-card-content>
</ion-card>
@ -49,14 +43,18 @@
<div>
<ion-card class="result-containerList" >
<ion-card-content>
<div *ngFor="let action of actionInfo ;let i = index" style="position: relative;">
<div *ngFor="let action of actionInfo ;let i = index">
<div [ngClass]=" direction == 'en'? 'request-list-container' : 'request-list-container-ar'" >
<div>
<!-- <div *ngFor="let formattedAction of showFormattedAction; let i = index"> -->
<span [ngClass]="direction == 'en'? 'text-span':'text-span-ar'">{{ts.trPK('userProfile','actionBy')}}{{action.actionBy}}</span>
<div class="action-data">
<div [ngClass]="direction == 'en' ? 'action-data':'action-data-ar' " >
<p >{{action.comments}}</p>
<span [ngClass]="direction == 'en'? 'date-span':'date-span-ar'">{{(action.actionDate)?.substring(0,10)}}</span>
<!-- <span [ngClass]="direction == 'en'? 'date-span':'date-span-ar'">{{(action.actionDate)?.substring(0,10)}}</span> -->
</div>
<div class="div">
<div ></div>
<div class="postedDate">{{(action.actionDate)?.substring(0,10)}}</div>
</div>
</div>
</div>

@ -36,30 +36,55 @@
}
.result-container{
position: relative;
background: white;
/* padding-bottom: 3px; */
border-radius: 20px;
z-index: 1;
margin: 15px;
// 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;
border: 1px solid #ccc;
opacity: 1;
}
.result-containerList{
position: relative;
background: white;
/* padding-bottom: 3px; */
border-radius: 20px;
z-index: 1;
margin: 15px;
// 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;
border: 1px solid #ccc;
opacity: 1;
}
.text{
font-size: 15px;
// margin-top: -9px;
font-family: 'WorkSans-bold';
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{
@ -94,13 +119,39 @@
}}
.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;
margin-bottom: 0px;
margin-top: -10px;
color: #a9a5a5;
font-family: 'WorkSans-bold';
// 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;
@ -137,10 +188,15 @@
}
.text-span {
position: relative;
display: block;
// margin-bottom: 10px;
font-family: 'WorkSans-bold';
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: "";
@ -155,15 +211,20 @@
.text-span-ar{
position: relative;
display: block;
// margin-bottom: 10px;
/* margin-top: 10px; */
margin-right: 30px;
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: -29px;
right: -35px;
border-radius: 50%;
width: 15px;
height: 15px;
@ -180,45 +241,86 @@
margin-right: 20px;
margin-bottom: 15px;
p{
font-size: 14px;
// 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: 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{
// 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: 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;
}}
// @media screen and (min-width: 325px){
// .date-span-ar{
// font-size: 13px;
// margin-bottom: 0px;
// margin-top: -10px;
// color: gray;
// margin-right: 140px;
// }}
.New{
@ -252,9 +354,61 @@
color: #259CB8;
}
.card-content{
margin-left: -3px; margin-right: -9px;}
.card-content-ar{
margin-left: -122px;
// .card-content{
// margin-left: -3px; margin-right: -9px;}
// .card-content-ar{
// margin-left: -122px;
// }
.status{
text-align: left;
/* font: normal normal 600 10px/16px Poppins; */
letter-spacing: -0.4px;
opacity: 1;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
// font-weight: 600;
line-height: 16px;
font-size: 10px;
color: #269db8;
}
.postedDate{
text-align: left !important;
// font-weight: 600;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 16px !important;
font-size: 10px !important;
letter-spacing: -0.4px !important;
color: #969696 !important;
opacity: 1 !important;
}
.DescrText{
text-align: left;
// 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;
}
.DescrText-ar{
text-align: right;
// 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;
}

@ -24,59 +24,80 @@
<img src="../assets/imgs/profile.svg">
</a> -->
</div>
<div style="margin-top: 18px;">
<h1>{{employee.EMPLOYEE_NAME}}</h1>
<span>{{employee.EMPLOYEE_EMAIL_ADDRESS}}</span>
<div style="margin-top: 25px;">
<h1 class="name">{{employee.EMPLOYEE_NAME}}</h1>
<span class="email">{{employee.EMPLOYEE_EMAIL_ADDRESS}}</span>
<!-- <span>{{employee.JOB_NAME}}</span> -->
</div>
<div >
<ion-row>
<ion-row style="margin-top: 11px;">
<ion-col style="border-right: 1px solid rgb(221 221 221);">
<p style="font-size: 12px; color: rgb(128, 124, 124);">{{ts.trPK('userProfile','role')}}</p>
<p class="subTitle">{{ts.trPK('userProfile','role')}}</p>
<span class="Boldtext">{{employee.JOB_NAME}}</span>
</ion-col>
<ion-col>
<p style="font-size: 12px; color: rgb(128, 124, 124);">{{ts.trPK('userProfile','empNo')}}</p>
<p class="subTitle">{{ts.trPK('userProfile','empNo')}}</p>
<span class="Boldtext">{{employee.EMPLOYEE_NUMBER}}</span>
</ion-col>
</ion-row>
</div>
</div>
<div >
<ion-row>
<div class="btnDiv">
<ion-segment
(ionChange)="segmentChanged($event)"
[value]="activeSegment">
<ion-col [size]="3">
<ion-col>
<ion-segment-button
value="About"
[ngClass]="activeSegment == 'About' ? 'active-Segment' : 'normal-Segment'">
<!-- <ion-label> Team Members</ion-label> -->
<img class="imgSize" src="../assets/imgs/profile.svg">
</ion-segment-button>
</ion-segment-button>
</ion-col>
<ion-col>
<span class="btnTitle">{{ts.trPK('myTeam','profile-details')}}</span>
</ion-col>
</ion-col>
<ion-col [size]="3">
<ion-col>
<ion-segment-button
value="create-request"
[ngClass]="activeSegment == 'create-request' ? 'active-Segment' : 'normal-Segment'">
<img (click)="getMenuEntries(employee)" class="imgSize" src="../assets/imgs/create-req.svg">
<!-- <ion-label> {{ts.trPK('vacation-rule','create-request')}}</ion-label> -->
</ion-segment-button>
</ion-col>
<ion-col (click)="getMenuEntries(employee)"> <span class="btnTitle">{{ts.trPK('vacation-rule','create-request')}}</span></ion-col>
</ion-col>
<ion-col [size]="3">
<ion-col>
<ion-segment-button
value="Attendance"
[ngClass]="activeSegment == 'Attendance' ? 'active-Segment' : 'normal-Segment'" >
<!-- <ion-label>{{ts.trPK('attendance','attendance')}}</ion-label> -->
<img class="imgSize" src="../assets/imgs/view-attendance.svg">
</ion-segment-button>
</ion-col>
<ion-col> <span class="btnTitle">{{ts.trPK('myTeam','view-attendence')}} </span></ion-col>
</ion-col>
<ion-col [size]="3">
<ion-col>
<ion-segment-button
value="TeamMembers"
[ngClass]="activeSegment == 'TeamMembers' ? 'active-Segment' : 'normal-Segment'">
<!-- <ion-label>{{ts.trPK('myTeam','team-members')}}</ion-label> -->
<img class="imgSize" src="../assets/imgs/team-members.svg">
</ion-segment-button>
</ion-col>
<ion-col><span class="btnTitle">{{ts.trPK('myTeam','team-members')}}</span></ion-col>
</ion-col>
</ion-segment>
</ion-row>
</div>
<div class="user-actions">
<!-- <div class="user-actions">
<ion-row class="ion-justify-content-center">
<ion-col [size]="3">
<div class="action-button col-button">
@ -98,8 +119,8 @@
<span>{{ts.trPK('myTeam','team-members')}}</span>
</div>
</ion-col>
</ion-row>
</div>
</div> -->
<!-- <div class="user-actions">
<ion-row class="ion-justify-content-center">
@ -200,20 +221,19 @@
<div *ngIf="showAttendence" class="result-graph-attendence">
<div >
<ion-row style="margin-top: 8px; margin-left: 12px;">
<div style="margin-top: 8px;position: relative;
display: flex;
justify-content: space-between;">
<ion-col [size]="8">
<span class="attendence-text"> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
</ion-col>
<ion-col [size]="4">
<ion-row>
<ion-col [size]="4" style="text-align: end;">
<button (click)="showCalender()" style="background: white; margin-left: 15px;">
<label class="stats" >{{ts.trPK('attendance-tracking','view-days')}}</label>
<label [ngClass]="direction == 'en' ? 'stats':'stats-ar' " >{{ts.trPK('attendance-tracking','view-days')}}</label>
<img src="../assets/imgs/view-days.svg">
</button>
</ion-row>
</ion-col>
</ion-row>
</div>
<div class="header">
@ -326,20 +346,19 @@
<div *ngIf="!showAttendence">
<div *ngIf="showData" [ngClass]="direction == 'en' ? 'calendar-container':'calendar-container-ar' ">
<div>
<ion-row style="margin-top: 8px; margin-left: 12px;">
<div style="margin-top: 8px;position: relative;
display: flex;
justify-content: space-between;">
<ion-col [size]="8">
<span class="attendence-text"> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
</ion-col>
<ion-col [size]="4">
<ion-row>
<ion-col [size]="4" style="text-align: end;">
<button (click)="showCalender()" [ngClass]="direction == 'en' ? 'statsIcon':'statsIcon-ar' " >
<label class="stats" >{{ts.trPK('attendance-tracking','view-stats')}}</label>
<label [ngClass]="direction == 'en' ? 'stats':'stats-ar' " >{{ts.trPK('attendance-tracking','view-stats')}}</label>
<img src="../assets/imgs/view-stats.svg">
</button>
</ion-row>
</ion-col>
</ion-row>
</div>
<div class="header">
@ -398,14 +417,18 @@
</div>
<div *ngIf="activeSegment === 'TeamMembers'">
<div style="margin-top: -23px;">
<div class="MyTeamdiv">
<div class="MyTeamtext" >{{ts.trPK('myTeam','my-team-members')}}</div>
<div class="numberEmp">{{EmployeeTotal}}</div>
</div>
<!-- <div style="margin-top: -23px;">
<ion-row>
<ion-col><p class="text">{{ts.trPK('myTeam','my-team-members')}}</p></ion-col>
<ion-col> <div [ngClass]="direction == 'en' ? 'number':'number-ar' ">
<p class="numberEmp">{{EmployeeTotal}}</p></div></ion-col>
</ion-row>
</div>
</div> -->
<!-- <div style="margin-top: 15px;background: white;border-radius: 100px;overflow: hidden;">
<ion-row no-padding>
<ion-col [size]="3" class="search-dropdown" no-padding>
@ -458,43 +481,43 @@
<p>{{employee.EMPLOYEE_NUMBER}}</p>
</ion-col> -->
<ion-col>
<p style="font-size: 16px; font-family: WorkSans-Bold; margin-top: 15px;">{{ts.trPK('userProfile','profile-details')}}</p>
<p [ngClass]="direction == 'en' ? 'profile':'profile-ar' " >{{ts.trPK('userProfile','profile-details')}}</p>
</ion-col>
<ion-col [size]="12">
<h2>{{ts.trPK('userProfile','category')}}</h2>
<p>{{employee.EMPLOYMENT_CATEGORY_MEANING}}</p>
<h2 [ngClass]="direction == 'en' ? 'label1':'label1-ar' " >{{ts.trPK('userProfile','category')}}</h2>
<p [ngClass]="direction == 'en' ? 'label2':'label2-ar' " >{{employee.EMPLOYMENT_CATEGORY_MEANING}}</p>
</ion-col>
<ion-col [size]="12">
<h2>{{ts.trPK('userProfile','address')}}</h2>
<p>{{employee.LOCATION_NAME}}</p>
<h2 [ngClass]="direction == 'en' ? 'label1':'label1-ar' ">{{ts.trPK('userProfile','address')}}</h2>
<p [ngClass]="direction == 'en' ? 'label2':'label2-ar' " style="line-height: 19px !important;">{{employee.LOCATION_NAME}}</p>
</ion-col>
<ion-col [size]="12">
<h2>{{ts.trPK('userProfile','phone-no')}}</h2>
<p>{{employee.EMPLOYEE_MOBILE_NUMBER}}</p>
<h2 [ngClass]="direction == 'en' ? 'label1':'label1-ar' ">{{ts.trPK('userProfile','phone-no')}}</h2>
<p [ngClass]="direction == 'en' ? 'label2':'label2-ar' ">{{employee.EMPLOYEE_MOBILE_NUMBER}}</p>
</ion-col>
<ion-col [size]="12">
<h2>{{ts.trPK('userProfile','busG')}}</h2>
<p>{{employee.ORGANIZATION_NAME}}</p>
<h2 [ngClass]="direction == 'en' ? 'label1':'label1-ar' ">{{ts.trPK('userProfile','busG')}}</h2>
<p [ngClass]="direction == 'en' ? 'label2':'label2-ar' ">{{employee.ORGANIZATION_NAME}}</p>
</ion-col>
<ion-col [size]="12">
<h2>{{ts.trPK('userProfile','job')}}</h2>
<p>{{employee.JOB_NAME}}</p>
<h2 [ngClass]="direction == 'en' ? 'label1':'label1-ar' ">{{ts.trPK('userProfile','job')}}</h2>
<p [ngClass]="direction == 'en' ? 'label2':'label2-ar' ">{{employee.JOB_NAME}}</p>
</ion-col>
<ion-col [size]="12">
<h2>{{ts.trPK('userProfile','payrol')}}</h2>
<p>{{employee.PAYROLL_NAME}}</p>
<h2 [ngClass]="direction == 'en' ? 'label1':'label1-ar' ">{{ts.trPK('userProfile','payrol')}}</h2>
<p [ngClass]="direction == 'en' ? 'label2':'label2-ar' ">{{employee.PAYROLL_NAME}}</p>
</ion-col>
<!-- <ion-col [size]="12">
<h2>{{ts.trPK('userProfile','orgEmail')}}</h2>
<p>{{employee.EMPLOYEE_EMAIL_ADDRESS}}</p>
</ion-col> -->
<ion-col [size]="12">
<h2>{{ts.trPK('userProfile','position')}}</h2>
<p>{{employee.POSITION_NAME}}</p>
<h2 [ngClass]="direction == 'en' ? 'label1':'label1-ar' ">{{ts.trPK('userProfile','position')}}</h2>
<p [ngClass]="direction == 'en' ? 'label2':'label2-ar' ">{{employee.POSITION_NAME}}</p>
</ion-col>
<ion-col [size]="12" style="border-bottom: none;">
<h2>{{ts.trPK('userProfile','grade')}}</h2>
<p>{{employee.GRADE_NAME}}</p>
<h2 [ngClass]="direction == 'en' ? 'label1':'label1-ar' ">{{ts.trPK('userProfile','grade')}}</h2>
<p [ngClass]="direction == 'en' ? 'label2':'label2-ar' ">{{employee.GRADE_NAME}}</p>
</ion-col>
</ion-row>
</div>

@ -99,6 +99,7 @@ ion-title{
$actionBtnSize : 36px;
.user-actions{
text-align: center;
margin-left: 1px;
.action-button{
font-size: 11px;
font-weight: bold;
@ -113,38 +114,52 @@ ion-title{
background-color: #269DB8;
line-height: $actionBtnSize;
margin-bottom: 3px;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
display: flex;
img{
margin: 0 auto;
vertical-align: middle;
}
.span{
font-size: 10px;
display: block;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
}
}
}
}
.employee-information-indetail{
background: white;
margin-top: 15px;
border-radius: 20px;
margin-bottom: 15px;
.employee-information-indetail{
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 0px 5px #00000029;
border-radius: 20px;
border: 1px solid #ccc;
ion-col{
padding: 15px;
// border-bottom: 1px solid #ccc;
}
h2{
font-size: 13px;
// font-family: WorkSans-Bold;
margin: 0;
font-weight: bold;
color: rgb(128, 124, 124);
}
p{
font-size: 13px;
margin: 0;
font-family: WorkSans-Bold;
// margin-bottom: 10px;
}
}
opacity: 1;
}
// .employee-information-indetail{
// background: white;
// margin-top: 15px;
// border-radius: 20px;
// margin-bottom: 15px;
// border-radius: 20px;
// border: 1px solid #ccc;
// ion-col{
// padding: 15px;
// // border-bottom: 1px solid #ccc;
// }
// h2{
// font-size: 13px;
// // font-family: WorkSans-Bold;
// margin: 0;
// font-weight: bold;
// color: rgb(128, 124, 124);
// }
// p{
// font-size: 13px;
// margin: 0;
// font-family: WorkSans-Bold;
// // margin-bottom: 10px;
// }
// }
.segments-container {
border-radius: 100px;
@ -158,56 +173,70 @@ ion-title{
.active-Segment {
width: 11%;
max-width: 11%;
min-width: 11%;
min-width: 39px;
height: 30% !important;
min-height: 36px;
min-height: 39px;
padding-right: -10px;
border-radius: 50% !important;
margin-right: 22px;
margin-left: 22px;
background-color: #269DB8;
}}
display: flex;
}
}
@media screen and (min-width: 768px) and (max-width:1024px){
.active-Segment{
width: 11%;
max-width: 11%;
min-width: 11%;
height: 56% !important;
min-height: 68px;
padding-right: -10px;
border-radius: 50% !important;
margin-right: 62px;
margin-left: 45px;
background: #269DB8 !important;
padding-left: 17px;}}
// padding-left: 17px;
// display: flex;
width: 11%;
max-width: 11%;
min-width: 39px;
height: 30% !important;
min-height: 39px;
padding-right: -10px;
border-radius: 50% !important;
padding-left: 6px;
margin-right: 10px;
margin-left: 57px;
display: flex;
}}
@media screen and (min-width: 1px) and (max-width:767px){
.normal-Segment {
width: 11%;
max-width: 11%;
min-width: 11%;
min-width: 39px;
height: 30% !important;
min-height: 36px;
min-height: 39px;
padding-right: -10px;
border-radius: 50% !important;
margin-right: 22px;
margin-left: 22px;
background: #414040 !important;
display: flex;
}}
}
}
@media screen and (min-width: 768px) and (max-width:1024px){
.normal-Segment{
width: 11%;
max-width: 11%;
min-width: 11%;
height: 56% !important;
min-height: 68px;
padding-right: -10px;
border-radius: 50% !important;
margin-right: 62px;
margin-left: 45px;
background: #414040 !important;
padding-left: 17px;}}
max-width: 11%;
min-width: 39px;
height: 30% !important;
min-height: 39px;
padding-right: -10px;
border-radius: 50% !important;
padding-left: 6px;
margin-right: 10px;
margin-left: 57px;
background: #414040 !important;
display: flex;
}}
@media screen and (min-width: 1px) and (max-width:767px){
.imgSize{
@ -218,14 +247,16 @@ ion-title{
left: 7px;
margin: auto;
height: 18px;
display: flex;
}}
@media screen and (min-width: 768px) and (max-width:1024px){
.imgSize{position: absolute;
top: 0;
bottom: 0;
left: 9px;
left: 2px;
margin: auto;
height: 28px;}}
height: 28px;
display: flex;}}
.colum-container{
@ -507,30 +538,34 @@ ion-title{
font-weight: bolder;
// border-right: 1px solid rgb(221, 221, 221);
@media screen and (min-width: 300px) and (max-width:359px) {
// @media screen and (min-width: 300px) and (max-width:359px) {
h2{
padding: 0;
margin: 0;
font-size: 14px;
font-size: 10px;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
}
span{
font-size: 9px;
font-size: 10px;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
}
}
// }
@media screen and (min-width: 360px) {
h2{
padding: 0;
margin: 0;
font-size: 14px;
}
span{
font-size: 12px;
margin-bottom: 3px;
}
// @media screen and (min-width: 360px) {
// h2{
// padding: 0;
// margin: 0;
// font-size: 10px;
// font-family: var(--fontFamilyPoppins-SemiBold, inherit);
// }
// span{
// font-size: 10px;
// font-family: var(--fontFamilyPoppins-SemiBold, inherit);
// margin-bottom: 3px;
// }
}
// }
}
@media screen and (min-width: 325px) {
.statsIcon{
@ -655,6 +690,7 @@ ion-title{
left: 20px;
}
@media screen and (min-width: 325px){
.attendance-summary .attendance-information {
span{
height: 32px;
@ -668,7 +704,23 @@ ion-title{
font-size: 13px;
}
}
}}
@media screen and (min-width: 1px) and (max-width:320px) {
.attendance-summary .attendance-information {
span{
height: 32px;
display: block;
line-height: 7px;
font-size: 7px;
}
h2{
// text-align: right;
// font-family: WorkSans-Bold;
font-weight: bolder;
font-size: 13px;
}
}}
.calendar-container{
background: white;
@ -701,11 +753,17 @@ ion-title{
.Boldtext{
font-size: 13px;
font-family: WorkSans-Bold;
color: black !important;
display: block !important;
// line-height: 0px !important;
// font-size: 13px;
// font-family: WorkSans-Bold;
// color: black !important;
// display: block !important;
text-align: center;
letter-spacing: -0.64px;
color: #2B353E;
opacity: 1;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-size: 16px;
line-height: 19px;
}
.attendence{
@ -718,8 +776,9 @@ ion-title{
.attendence-text{
margin-bottom: 1px;
margin-left: 10px;
font-family: WorkSans-Bold;
// font-family: WorkSans-Bold;
font-size: 16px;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
}
.stats{
color: #289DB8; font-size: 9px;
@ -727,6 +786,12 @@ ion-title{
font-family: 'WorkSans-Bold';
}
.stats-ar{
color: #289DB8; font-size: 9px;
margin-left: 5px;
font-family: 'WorkSans-Bold';
}
.text{
font-size: 16px;
font-weight: bolder;
@ -790,10 +855,157 @@ ion-title{
.call-ar{
margin-left: 16px;
}
.name{
text-align: center;
letter-spacing: -0.84px;
color: #2B353E;
opacity: 1;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 21px;
font-size: 21px;
}
.email{
text-align: center;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-size: 13px;
line-height: 6px;
letter-spacing: -0.52px;
color: #A2A2A2;
opacity: 1;
}
.subTitle{
text-align: center;
letter-spacing: -0.52px;
color: #A2A2A2;
opacity: 1;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-size: 13px;
line-height: 0px;
}
.profile{
text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 20px;
font-size: 20px;
letter-spacing: -0.8px;
color: #2B353E;
opacity: 1;
margin-top: 20px;
margin-bottom: 2px;
}
.label1{
text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 0px;
font-size: 13px;
letter-spacing: -0.52px;
color: #A2A2A2;
opacity: 1;
}
.label2{
text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 5px;
font-size: 16px;
letter-spacing: -0.64px;
color: #2B353E;
opacity: 1;
}
.profile-ar{
text-align: right;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 20px;
font-size: 20px;
letter-spacing: -0.8px;
color: #2B353E;
opacity: 1;
margin-top: 20px;
margin-bottom: 2px;
}
.label1-ar{
text-align: right;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 0px;
font-size: 13px;
letter-spacing: -0.52px;
color: #A2A2A2;
opacity: 1;
}
.label2-ar{
text-align: right;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 5px;
font-size: 16px;
letter-spacing: -0.64px;
color: #2B353E;
opacity: 1;
}
@media screen and (min-width: 768px) and (max-width:1024px){
.div{
position: relative;
display: flex;
margin-left: 48px;
}}
@media screen and (min-width: 1px) and (max-width:767px){
.div{
position: relative;
display: flex;
margin-left: -1px;
}}
.MyTeamdiv{
position: relative;
display: flex;
margin-bottom: -12px;
}
.numberEmp{
color: white;
font-size: 12px;
font-weight: bolder;
/* padding-top: 5px; */
/* padding-right: 20px; */
margin-left: 13px;
width: 23px;
height: 23px;
border-radius: 100%;
background-color: #269DB8;
z-index: 9;
margin-top: 25px;
/* padding-left: 4px; */
text-align: center;
padding-top: 3px;
}
.MyTeamtext{
text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 11px;
font-size: 20px;
letter-spacing: -0.8px;
color: #2B353E;
opacity: 1;
margin-top: 30px;
margin-bottom: 28px;
}
.btnTitle{
text-align: center;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 10px;
font-size: 11px;
color: #4D4D4D;
}
.btnDiv{
position: relative;
display: flex;
justify-content: space-between;
margin-bottom: -15px;
margin-top: -12px;
}

@ -51,14 +51,18 @@
</div> -->
</div>
<div>
<div class="div">
<div class="text" >{{ts.trPK('myTeam','my-team-members')}}</div>
<div class="numberEmp">{{EmployeeTotal}}</div>
</div>
<!-- <div>
<ion-row>
<ion-col><p class="text">{{ts.trPK('myTeam','my-team-members')}}</p></ion-col>
<ion-col> <div [ngClass]="direction == 'en' ? 'number':'number-ar' ">
<p class="numberEmp">{{EmployeeTotal}}</p></div></ion-col>
</ion-row>
</div>
</div> -->

@ -29,17 +29,22 @@ ion-content {
--ion-background-color: whitesmoke;
}
.request-heading {
padding-left: 15px;
margin-top: 10px;
span {
// text-align: center;
// display: block;
// padding-top: 8px;
// font-family: workSans-Regular;
display: block;
padding-top: 8px;
padding-left: 15px;
font-weight: bold;
// padding-left: 15px;
// font-weight: bold;
// font-size: 12px;
// margin-top: 9px;
text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 18px;
font-size: 12px;
margin-top: 9px;
letter-spacing: -0.48px;
color: #2B353E;
opacity: 1;
}
}
@ -190,8 +195,18 @@ ion-content {
// }
.text-label{
--color: black !important;
font-size: 13px;
// --color: black !important;
// font-size: 13px;
// margin-left: 15px;
// margin-right: 18px;
text-align: left;
// font: normal normal 600 12px/18px Poppins;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 18px;
font-size: 12px;
letter-spacing: -0.48px;
color: #575757 !important;
opacity: 1;
margin-left: 15px;
margin-right: 18px;
}
@ -217,13 +232,22 @@ ion-content {
border-style: var(--border-style);
border-color: #dcdcdc;
margin-top: 6px !important;
border-color: #d8d4d4 !important;}
border-color: #d8d4d4 !important;}
}
.text{
font-size: 16px;
font-weight: bolder;
font-family: 'WorkSans-Bold';
margin-top: 27px;
// font-size: 16px;
// font-weight: bolder;
// font-family: 'WorkSans-Bold';
// margin-top: 27px;
text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 11px;
font-size: 20px;
letter-spacing: -0.8px;
color: #2B353E;
opacity: 1;
margin-top: 30px;
margin-bottom: 28px;
}
@ -266,7 +290,22 @@ ion-content {
color: white;
font-size: 12px;
font-weight: bolder;
/* margin-left: 3px; */
padding-top: 2px;
/* padding-top: 5px; */
/* padding-right: 20px; */
margin-left: 13px;
width: 23px;
height: 23px;
border-radius: 100%;
background-color: #269DB8;
z-index: 9;
margin-top: 25px;
/* padding-left: 4px; */
text-align: center;
padding-top: 3px;
}
.div{
position: relative;
display: flex;
// justify-content: space-between;
margin-bottom: -12px;
}

@ -1189,7 +1189,7 @@
},
"actionBy": {
"en": "Action By :",
"ar": " : بواسطة"
"ar": "الرد بواسطة :"
},
"postedDate": {
"en": "Posted on",

@ -34,6 +34,14 @@
font-family: WorkSans-Bold;
src: url('../assets/font/WorkSans-Bold.otf');
}
@font-face {
font-family: Poppins-SemiBold;
src: url('../assets/font/Poppins-SemiBold.ttf');
}
@font-face {
font-family: Poppins-Medium;
src: url('../assets/font/Poppins-Medium.ttf');
}
@font-face {
font-family: Poppins-Bold;
@ -85,6 +93,8 @@
--darkblue:#269DB8;
--lightblue:#3cb9d5;
--newred:#cb3232;
--fontFamilyPoppins-SemiBold: 'Poppins-SemiBold';
--fontFamilyPoppins-Medium: 'Poppins-Medium';
// $font-family-base: $fontFamilyMediumEN !default;
// $font-family-ios-base: $fontFamilyMediumEN !default;
// $font-family-md-base:$fontFamilyMediumEN !default;

Loading…
Cancel
Save