login page added

production
Sultan Khan 7 years ago
parent 9266affe07
commit 8aef27a8f7

@ -34,14 +34,14 @@
<button class="gridBtn" ion-button (click)="changeLanguage()">English</button> <button class="gridBtn" ion-button (click)="changeLanguage()">English</button>
<button class="gridBtn arTxt" ion-button (click)="changeLanguage()">عربي</button> <button class="gridBtn arTxt" ion-button (click)="changeLanguage()">عربي</button>
</div> </div>
<ion-footer>
<div class="centerDiv">
<ion-button (click)="http_call()">{{ts.trPK('login','login')}}</ion-button>
</div>
<br/>
<div class="centerDiv">
<a (click)="forgetPasswordPage()">{{ts.trPK('login','forgot-password')}}</a>
</div>
</ion-footer>
</ion-content>
</ion-content>
<ion-footer>
<div class="centerDiv">
<ion-button color="customnavy" (click)="http_call()">{{ts.trPK('login','login')}}</ion-button>
</div>
<br/>
<div class="centerDiv">
<a (click)="forgetPasswordPage()">{{ts.trPK('login','forgot-password')}}</a>
</div>
</ion-footer>

@ -55,6 +55,33 @@ ion-img {
// margin-bottom: 5px; // margin-bottom: 5px;
} }
button {
font-family: var(--fontFamilyLightEN) !important;
min-width: auto;
ion-app[dir="ltr"] {
float: left;
border-radius: 2px 0px 0px 2px;
font-family: var(--fontFamilyBoldEN) !important;
color: var(--customnavy);
}
ion-app[dir="rtl"] {
float: right;
border-radius: 0px 2px 2px 0px;
color: var(--darkgray);
}
margin: 0px;
padding: 10px;
border: 1px solid var(--cusgray);
box-shadow: none;
-webkit-box-shadow:none;
-moz-box-shadow: none;
background: var(--light);
width: 50%;
}
button.arTxt { button.arTxt {
:root[dir="rtl"] { :root[dir="rtl"] {
float: right; float: right;
@ -69,7 +96,7 @@ ion-img {
color: var(--darkgray) !important; color: var(--darkgray) !important;
font-family: var(--fontFamilyIOSAR) !important; font-family: var(--fontFamilyIOSAR) !important;
border-radius: 0px 2px 2px 0px !important; border-radius: 0px 2px 2px 0px !important;
} }
} }
} }

@ -46,13 +46,11 @@ export class LoginComponent implements OnInit, OnDestroy {
} }
ngOnInit() { ngOnInit() {
//this.setIdPattern(); //this.setIdPattern();
setTimeout(() => { setTimeout(() => {
this.checkIfLoggedInBefore(); this.checkIfLoggedInBefore();
// this.splash.hide(); // this.splash.hide();
}, 100); }, 100);
console.log(this.ts);
} }
ngOnDestroy(): void { ngOnDestroy(): void {

@ -10,7 +10,7 @@
"ar": "الدخول" "ar": "الدخول"
}, },
"username":{ "username":{
"en":"Username", "en":"User Name",
"ar":"اسم المستخدم" "ar":"اسم المستخدم"
}, },
"login-type": { "login-type": {

@ -28,7 +28,9 @@ body{
} }
ion-label{
color:var(--labelColor) !important;
}
.tipsPadding{ .tipsPadding{
padding: 0px 10px; padding: 0px 10px;
} }
@ -148,7 +150,7 @@ a{
color:var(--primary); color:var(--primary);
} }
.button,.button-md, button-ios{ .button,.button-md, button-ios{
background:(--customnavy); background:var(--customnavy);
white-space: normal; white-space: normal;
// background: $primary; // background: $primary;
// background: -moz-linear-gradient(45deg, $primary 0%, $secondary 36%, $secondary 59%, $customnavy 100%); // background: -moz-linear-gradient(45deg, $primary 0%, $secondary 36%, $secondary 59%, $customnavy 100%);
@ -192,10 +194,16 @@ ion-item.item.item-block.item-ios.item-datetime.ng-touched.input-has-value.item-
} }
} }
/***********item icon************/ /***********item icon************/
.item-icon{ .item-icon{
width:25px; width:25px;
height:25px; height:25px;
} }
[dir="ltr"] .item-icon{
margin: 9px 8px 9px 0;
}
[dir="rtl"] .item-icon{
margin: 6px 0px 9px 9px;
}
/**********text format**********/ /**********text format**********/
p.text-caps{ p.text-caps{
text-transform: uppercase; text-transform: uppercase;

@ -36,36 +36,36 @@
} }
:root { :root {
$break-small: 450px; --break-small: 450px;
$break-big:565px; --break-big:565px;
//$break-large: 1200px; //$break-large: 1200px;
$fontFamilyLightEN:'WorkSans-Light'; --fontFamilyLightEN:'WorkSans-Light';
$fontFamilyLightAR:'GE_SS_Two_Light'; --ontFamilyLightAR:'GE_SS_Two_Light';
$fontFamilyRegularEN:'WorkSans-Regular'; --fontFamilyRegularEN:'WorkSans-Regular';
$fontFamilyRegularAR:'GE_SS_TWO_MEDIUM'; --fontFamilyRegularAR:'GE_SS_TWO_MEDIUM';
$fontFamilyMediumEN:'WorkSans-Regular'; --fontFamilyMediumEN:'WorkSans-Regular';
$fontFamilyMediumAR:'GE_SS_TWO_MEDIUM'; --fontFamilyMediumAR:'GE_SS_TWO_MEDIUM';
$fontFamilyBoldEN:'WorkSans-Bold'; --fontFamilyBoldEN:'WorkSans-Bold';
$fontFamilyBoldAR:'GE_SS_Two_Bold'; --fontFamilyBoldAR:'GE_SS_Two_Bold';
$fontFamilySemiBoldEN:'WorkSans-SemiBold'; --fontFamilySemiBoldEN:'WorkSans-SemiBold';
$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: #1a586d;
$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;
$font-family-base: $fontFamilyMediumEN !default; // $font-family-base: $fontFamilyMediumEN !default;
$font-family-ios-base: $fontFamilyMediumEN !default; // $font-family-ios-base: $fontFamilyMediumEN !default;
$font-family-md-base:$fontFamilyMediumEN !default; // $font-family-md-base:$fontFamilyMediumEN !default;
// ion-app.ios { // ion-app.ios {
// font-family: -apple-system, "Helvetica Neue", "Roboto", sans-serif; // font-family: -apple-system, "Helvetica Neue", "Roboto", sans-serif;
@ -79,45 +79,45 @@ $fontFamilyAndroidAR:"Roboto", "Helvetica Neue", sans-serif;
// background-color: #fff; // background-color: #fff;
// } // }
$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