From 8aef27a8f720da82ae0aa591dd747a6286eea740 Mon Sep 17 00:00:00 2001 From: Sultan Khan Date: Sun, 23 Jun 2019 18:18:23 +0300 Subject: [PATCH] login page added --- .../authentication/login/login.component.html | 20 +-- .../authentication/login/login.component.scss | 29 ++++- .../authentication/login/login.component.ts | 2 - Mohem/src/assets/localization/i18n.json | 2 +- Mohem/src/theme/styles.scss | 14 ++- Mohem/src/theme/variables.scss | 114 +++++++++--------- 6 files changed, 107 insertions(+), 74 deletions(-) diff --git a/Mohem/src/app/authentication/login/login.component.html b/Mohem/src/app/authentication/login/login.component.html index 6ec76f1e..4062c360 100644 --- a/Mohem/src/app/authentication/login/login.component.html +++ b/Mohem/src/app/authentication/login/login.component.html @@ -34,14 +34,14 @@ - -
- {{ts.trPK('login','login')}} -
-
- -
+ - \ No newline at end of file + +
+ {{ts.trPK('login','login')}} +
+
+ +
\ No newline at end of file diff --git a/Mohem/src/app/authentication/login/login.component.scss b/Mohem/src/app/authentication/login/login.component.scss index 77d290f7..202787be 100644 --- a/Mohem/src/app/authentication/login/login.component.scss +++ b/Mohem/src/app/authentication/login/login.component.scss @@ -55,6 +55,33 @@ ion-img { // 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 { :root[dir="rtl"] { float: right; @@ -69,7 +96,7 @@ ion-img { color: var(--darkgray) !important; font-family: var(--fontFamilyIOSAR) !important; border-radius: 0px 2px 2px 0px !important; - } } + } diff --git a/Mohem/src/app/authentication/login/login.component.ts b/Mohem/src/app/authentication/login/login.component.ts index 01f7659d..bba190c2 100644 --- a/Mohem/src/app/authentication/login/login.component.ts +++ b/Mohem/src/app/authentication/login/login.component.ts @@ -46,13 +46,11 @@ export class LoginComponent implements OnInit, OnDestroy { } ngOnInit() { - //this.setIdPattern(); setTimeout(() => { this.checkIfLoggedInBefore(); // this.splash.hide(); }, 100); - console.log(this.ts); } ngOnDestroy(): void { diff --git a/Mohem/src/assets/localization/i18n.json b/Mohem/src/assets/localization/i18n.json index 7859c184..c0dc70ea 100644 --- a/Mohem/src/assets/localization/i18n.json +++ b/Mohem/src/assets/localization/i18n.json @@ -10,7 +10,7 @@ "ar": "الدخول" }, "username":{ - "en":"Username", + "en":"User Name", "ar":"اسم المستخدم" }, "login-type": { diff --git a/Mohem/src/theme/styles.scss b/Mohem/src/theme/styles.scss index 2d0a32a1..9a81e479 100644 --- a/Mohem/src/theme/styles.scss +++ b/Mohem/src/theme/styles.scss @@ -28,7 +28,9 @@ body{ } - +ion-label{ + color:var(--labelColor) !important; +} .tipsPadding{ padding: 0px 10px; } @@ -148,7 +150,7 @@ a{ color:var(--primary); } .button,.button-md, button-ios{ - background:(--customnavy); + background:var(--customnavy); white-space: normal; // background: $primary; // 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{ width:25px; height:25px; } +[dir="ltr"] .item-icon{ + margin: 9px 8px 9px 0; +} +[dir="rtl"] .item-icon{ + margin: 6px 0px 9px 9px; +} /**********text format**********/ p.text-caps{ text-transform: uppercase; diff --git a/Mohem/src/theme/variables.scss b/Mohem/src/theme/variables.scss index 9cf23aec..0edaf270 100644 --- a/Mohem/src/theme/variables.scss +++ b/Mohem/src/theme/variables.scss @@ -36,36 +36,36 @@ } :root { -$break-small: 450px; -$break-big:565px; +--break-small: 450px; +--break-big:565px; //$break-large: 1200px; -$fontFamilyLightEN:'WorkSans-Light'; -$fontFamilyLightAR:'GE_SS_Two_Light'; -$fontFamilyRegularEN:'WorkSans-Regular'; -$fontFamilyRegularAR:'GE_SS_TWO_MEDIUM'; -$fontFamilyMediumEN:'WorkSans-Regular'; -$fontFamilyMediumAR:'GE_SS_TWO_MEDIUM'; -$fontFamilyBoldEN:'WorkSans-Bold'; -$fontFamilyBoldAR:'GE_SS_Two_Bold'; -$fontFamilySemiBoldEN:'WorkSans-SemiBold'; -$fontFamilySemiBoldAR:'GE_SS_Two_Bold'; -$fontFamilyIOSAR:-apple-system, "Helvetica Neue", "Roboto", sans-serif; -$fontFamilyAndroidAR:"Roboto", "Helvetica Neue", sans-serif; - $primary: #3ac1f1; - $secondary: #19a163; - $danger: #f53d3d; - $customnavy: #1a586d; - $light: #ffffff; - $dark: #000000; - $gray: #e4e5e7; - $custgreen: #209a83; - $cusgray:#d9d9d9; - $darkgray:#7F8C8D; - $grayBG:#acacac; - - $font-family-base: $fontFamilyMediumEN !default; - $font-family-ios-base: $fontFamilyMediumEN !default; - $font-family-md-base:$fontFamilyMediumEN !default; +--fontFamilyLightEN:'WorkSans-Light'; +--ontFamilyLightAR:'GE_SS_Two_Light'; +--fontFamilyRegularEN:'WorkSans-Regular'; +--fontFamilyRegularAR:'GE_SS_TWO_MEDIUM'; +--fontFamilyMediumEN:'WorkSans-Regular'; +--fontFamilyMediumAR:'GE_SS_TWO_MEDIUM'; +--fontFamilyBoldEN:'WorkSans-Bold'; +--fontFamilyBoldAR:'GE_SS_Two_Bold'; +--fontFamilySemiBoldEN:'WorkSans-SemiBold'; +--fontFamilySemiBoldAR:'GE_SS_Two_Bold'; +--fontFamilyIOSAR:-apple-system, "Helvetica Neue", "Roboto", sans-serif; +--fontFamilyAndroidAR:"Roboto", "Helvetica Neue", sans-serif; + --primary: #3ac1f1; + --secondary: #19a163; + --danger: #f53d3d; + --customnavy: #1a586d; + --light: #ffffff; + --dark: #000000; + --gray: #e4e5e7; + --custgreen: #209a83; + --cusgray:#d9d9d9; + --darkgray:#7F8C8D; + --grayBG:#acacac; + --labelColor:#999; + // $font-family-base: $fontFamilyMediumEN !default; + // $font-family-ios-base: $fontFamilyMediumEN !default; + // $font-family-md-base:$fontFamilyMediumEN !default; // ion-app.ios { // font-family: -apple-system, "Helvetica Neue", "Roboto", sans-serif; @@ -79,45 +79,45 @@ $fontFamilyAndroidAR:"Roboto", "Helvetica Neue", sans-serif; // background-color: #fff; // } - $text-input-md-highlight-color:$primary; - $text-input-ios-highlight-color:$primary; + // $text-input-md-highlight-color:--primary; + // $text-input-ios-highlight-color:--primary; - $label-md-text-color-focused:$primary; - $label-ios-text-color-focused:$primary; + // $label-md-text-color-focused:--primary; + // $label-ios-text-color-focused:--primary; - $alert-md-button-text-color:$primary; - $alert-ios-button-text-color:$primary; + // $alert-md-button-text-color:--primary; + // $alert-ios-button-text-color:--primary; - $alert-md-input-border-color-focused:$primary; - $alert-ios-checkbox-background-color-on:$primary; - $alert-ios-checkbox-border-color-on:$primary; + // $alert-md-input-border-color-focused:--primary; + // $alert-ios-checkbox-background-color-on:--primary; + // $alert-ios-checkbox-border-color-on:--primary; - $checkbox-md-icon-background-color-on:$primary; - $checkbox-ios-background-color-on:$primary; - $checkbox-md-icon-border-color-on:$primary; + // $checkbox-md-icon-background-color-on:$primary; + // $checkbox-ios-background-color-on:$primary; + // $checkbox-md-icon-border-color-on:$primary; - $toggle-ios-background-color-on:$primary; - $toggle-md-active-color:$primary; + // $toggle-ios-background-color-on:$primary; + // $toggle-md-active-color:$primary; - $radio-md-color-on:$primary; - $radio-ios-color-on:$primary; + // $radio-md-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-option-selected-color:$primary; - $picker-ios-button-text-color:$primary; + // $picker-md-button-text-color:$primary; + // $picker-md-option-selected-color:$primary; + // $picker-ios-button-text-color:$primary; - $range-md-bar-active-background-color:$primary; - $range-ios-bar-active-background-color:$primary; - $text-input-ios-highlight-color:$primary; + // $range-md-bar-active-background-color:$primary; + // $range-ios-bar-active-background-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-ios-highlight-color-invalid:$danger; - $text-input-md-highlight-color-invalid:$danger; - $text-input-ios-show-focus-highlight: true; + // $text-input-highlight-color-invalid:$danger; + // $text-input-ios-highlight-color-invalid:$danger; + // $text-input-md-highlight-color-invalid:$danger; + // $text-input-ios-show-focus-highlight: true; } \ No newline at end of file