CSS changes

MOE_MAIN
Sultan Khan 3 years ago
parent 80dd2817df
commit a7d2202897

@ -1,4 +1,4 @@
<ion-app [dir]="direction"> <ion-app [dir]="direction" id="lang">
<ion-split-pane> <ion-split-pane>
<ion-menu [swipeGesture]="false" side='start' *ngIf="direction ==='ltr'"> <ion-menu [swipeGesture]="false" side='start' *ngIf="direction ==='ltr'">
<ion-content class="sidebar-menu"> <ion-content class="sidebar-menu">

@ -2,12 +2,11 @@
height: 25vh; height: 25vh;
} }
.rowOutside{ ion-content {
// margin-top: -37px; --background: #f5f5f5;
} }
.button-digital-id{ .button-digital-id {
--background: white !important; --background: white !important;
background: white !important; background: white !important;
white-space: normal; white-space: normal;
@ -22,16 +21,16 @@
} }
.digital-id-en{ .digital-id-en {
color: black; color: black;
position: absolute; position: absolute;
right: 20px; right: 20px;
width: 10%; width: 10%;
} }
.digital-id-ar{ .digital-id-ar {
color: black; color: black;
position: absolute; position: absolute;
left: 20px; left: 20px;
width: 10%; width: 10%;
} }

@ -7,7 +7,9 @@
<div class="last-circle"></div> <div class="last-circle"></div>
</div> </div>
</ion-row> </ion-row>
</ion-grid>
<div class="login-container">
<ion-grid>
<ion-row> <ion-row>
<ion-col *ngIf="!user"> <ion-col *ngIf="!user">
<P class="pageTitle text-caps">{{ts.trPK('login','login')}}</P> <P class="pageTitle text-caps">{{ts.trPK('login','login')}}</P>
@ -16,13 +18,13 @@
</ion-grid> </ion-grid>
<div *ngIf="!user" [dir]="currentLang==1 ?'rtl': 'ltr'"> <div *ngIf="!user" [dir]="currentLang==1 ?'rtl': 'ltr'">
<ion-item class="item-input-login"> <ion-item class="item-input-login" lines="none">
<img style="margin: 9px 8px 9px 0 !important;" class="item-icon" src="assets/imgs/username.png" item-start /> <img style="margin: 9px 8px 9px 0 !important;" class="item-icon" src="assets/imgs/username.png" item-start />
<ion-input class="login-input" required type="text" [(ngModel)]="username" placeholder="{{ts.trPK('login','username')}}"> <ion-input class="login-input" required type="text" [(ngModel)]="username" placeholder="{{ts.trPK('login','username')}}">
</ion-input> </ion-input>
</ion-item> </ion-item>
<ion-item class="item-input-login"> <ion-item class="item-input-login" lines="none">
<img style="margin: 9px 8px 9px 0 !important;" class="item-icon" src="assets/imgs/password.png" item-start /> <img style="margin: 9px 8px 9px 0 !important;" class="item-icon" src="assets/imgs/password.png" item-start />
<ion-input class="login-input" required [type]="inputType" [(ngModel)]="password" placeholder="{{ts.trPK('login','password')}}"> <ion-input class="login-input" required [type]="inputType" [(ngModel)]="password" placeholder="{{ts.trPK('login','password')}}">
</ion-input> </ion-input>
@ -39,16 +41,16 @@
</div> </div>
</div> </div>
<div *ngIf="!user" class="centerDiv" style="margin: 25px 15px !important;">
<ion-button [ngClass]="{'disable-button-opacity': isValidForm()}" class="button-login" (click)="onLogin()" [disabled]="isValidForm()" style="width: 100% !important;">{{ts.trPK('login','login')}}</ion-button>
</div>
<!-- <div *ngIf="welcomeBack"> --> <!-- <div *ngIf="welcomeBack"> -->
<welcome-login (onLogin)="login()" (loginWithUser)="loginWithUser()" *ngIf="user"> <welcome-login (onLogin)="login()" (loginWithUser)="loginWithUser()" *ngIf="user">
</welcome-login> </welcome-login>
<!-- </div> --> <!-- </div> -->
<div *ngIf="!user" class="centerDiv" style="margin: 25px 15px !important;">
<ion-button [ngClass]="{'disable-button-opacity': isValidForm()}" class="button-login" (click)="onLogin()" [disabled]="isValidForm()" style="width: 100% !important;">{{ts.trPK('login','login')}}</ion-button>
<!-- digital ID button --> <!-- digital ID button -->
<!-- <ion-button *ngIf="userInfo" class="button-digital-id" (click)="openDigitalId()"> <!-- <ion-button *ngIf="userInfo" class="button-digital-id" (click)="openDigitalId()">
<p style="color: black;">{{ts.trPK('general','digital-id')}}</p> <p style="color: black;">{{ts.trPK('general','digital-id')}}</p>

@ -23,6 +23,7 @@
text-align: center; text-align: center;
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
font-weight: bold;
} }
.TxtPlace { .TxtPlace {
@ -97,10 +98,12 @@ img.centerDiv {
} }
button.arTxt { button.arTxt {
font-family: var(--fontFamilyIOSAR) !important;
:root[dir="rtl"] { :root[dir="rtl"] {
float: right; float: right;
color: var(--customnavy) !important; color: var(--customnavy) !important;
font-family: var(--fontFamilyIOSAR) !important;
font-weight: bold; font-weight: bold;
border-radius: 2px 0px 0px 2px !important; border-radius: 2px 0px 0px 2px !important;
} }
@ -118,10 +121,11 @@ img.centerDiv {
.login-input { .login-input {
border: none; border: none;
margin-right: 5px; margin-right: 5px;
font-family: 'Kufi';
} }
.item-input { .item-input {
--min-height: 1.0cm !important; --min-height: 1.5cm !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;
@ -141,7 +145,7 @@ img.centerDiv {
white-space: normal; white-space: normal;
color: var(--light); color: var(--light);
text-transform: capitalize; text-transform: capitalize;
min-height: 1.0cm; min-height: 1.3cm;
--border-radius: 33px !important; --border-radius: 33px !important;
border-radius: 33px !important; border-radius: 33px !important;
--min-height: 1.6cm !important; --min-height: 1.6cm !important;
@ -172,8 +176,8 @@ img.centerDiv {
.first-circle { .first-circle {
background: #024d71 !important; background: #024d71 !important;
border-radius: 50%; border-radius: 50%;
height: 292px; height: 310px;
width: 288px; width: 310px;
float: left; float: left;
margin-left: -55px; margin-left: -55px;
margin-top: -140px; margin-top: -140px;
@ -185,7 +189,7 @@ img.centerDiv {
background: #387c84 !important; background: #387c84 !important;
border-radius: 50%; border-radius: 50%;
height: 160px; height: 160px;
width: 170px; width: 190px;
margin: -115px 0px 0px 179px; margin: -115px 0px 0px 179px;
} }

@ -158,6 +158,7 @@ export class LoginComponent implements OnInit, OnDestroy {
} }
this.currentLang = langNumber; this.currentLang = langNumber;
document.getElementById('lang').lang = this.currentLang == 1 ? 'ar' : 'en';
} }
public forgetPasswordPage() { public forgetPasswordPage() {

@ -3,12 +3,10 @@
margin-left: 2%; margin-left: 2%;
margin-right: 2%; margin-right: 2%;
height: 4cm; height: 4cm;
box-shadow: 0px 0px 8px 2px #d5d5d5ab;
background: white; background: white;
margin-bottom: 0.3cm; margin-bottom: 0.3cm;
// border-color: #ececec; border-radius: 30px !important;
border-style: solid; border: 1.3px solid #8b8b8b;
border-width: 0.02cm;
} }
// .custom-button:hover { // .custom-button:hover {
@ -19,7 +17,7 @@
.icon{ .icon {
margin-top: 0.7cm; margin-top: 0.7cm;
margin-left: 27%; margin-left: 27%;
margin-right: 27%; margin-right: 27%;

@ -1,25 +1,27 @@
.custom-button { .custom-button {
background: white; background: white;
margin-bottom: 0px;
border: 1px solid #ccc;
border-radius: 20px; border-radius: 20px;
width: 100%; width: 100%;
max-width: 105px; max-width: 105px;
height: 100px; height: 100px;
padding: 10px; padding: 10px;
min-width: 96px; min-width: 100px;
box-shadow: 0px 0px 5px #ccc;
margin-bottom: 5px;
} }
.iconBox { .iconBox {
display: block; display: block;
width: 100%; width: 100%;
position: static; position: static;
height: 40px;
} }
.iconBox img { .iconBox img {
margin: 0px auto 10px !important; margin: 0px auto 10px !important;
display: block; display: block;
width: 35px; width: 35px;
height: 33px;
// max-width: 35%; // max-width: 35%;
} }
@ -34,5 +36,5 @@
margin-top: 10px; margin-top: 10px;
color: black; color: black;
font-weight: 600; font-weight: 600;
} letter-spacing: .6px;
}

@ -1,7 +1,8 @@
.custom-button { .custom-button {
box-shadow: 0px 0px 5px #ccc;
background: white; background: white;
margin-bottom: 0px; margin-bottom: 5px;
border: 1px solid #ccc;
border-radius: 20px; border-radius: 20px;
width: 200px; width: 200px;
max-width: 105px; max-width: 105px;

@ -51,6 +51,7 @@ ion-label {
.main-dashboard-container { .main-dashboard-container {
position: relative; position: relative;
width: 100%; width: 100%;
--background: #f5f5f5;
} }
.contentBg:before { .contentBg:before {

@ -356,7 +356,7 @@ ion-card {
.active-Segment { .active-Segment {
font-size: 0.3cm !important; font-size: 0.3cm !important;
background: #024d71 !important; background: #0ca2de !important;
text-transform: none; text-transform: none;
--color-checked: none; --color-checked: none;
border-radius: 100px; border-radius: 100px;

@ -43,7 +43,7 @@ ion-app[lang="ar"] {
ion-button, ion-button,
ion-title, ion-title,
span { span {
font-family: var(--fontFamilyIOSARSEMIBOLD) !important; font-family: var(--fontFamilyIOSAR) !important;
line-height: 1.3; line-height: 1.3;
} }
} }
@ -1447,6 +1447,8 @@ div.no-dataDiv {
border-radius: 25px !important; border-radius: 25px !important;
border: 1px solid #cccccc; border: 1px solid #cccccc;
margin-top: 10px; margin-top: 10px;
width: 98%;
margin: 10px 0;
} }
@ -1882,6 +1884,7 @@ ion-segment-button {
.menu-label { .menu-label {
margin-left: 5px; margin-left: 5px;
margin-bottom: 7px;
} }
ion-app[dir="rtl"] { ion-app[dir="rtl"] {
@ -1900,7 +1903,7 @@ ion-app[dir="rtl"] {
} }
.pClass { .pClass {
font-size: 12px; font-size: 11px;
} }
} }

Loading…
Cancel
Save