feat(auth): remove bootstrap, use custom styles (#738)

akveo · Sep 25, 2018 · b585490 · b585490
1 parent d08c4d5
commit b585490
Show file tree

Hide file tree

Showing 28 changed files with 733 additions and 603 deletions.
diff --git a/angular.json b/angular.json
@@ -26,7 +26,6 @@
               "src/favicon.ico"
             ],
             "styles": [
-              "node_modules/bootstrap/dist/css/bootstrap.css",
               "node_modules/nebular-icons/scss/nebular-icons.scss",
               "src/styles.scss"
             ],
@@ -78,7 +77,6 @@
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
             "styles": [
-              "node_modules/bootstrap/dist/css/bootstrap.css",
               "node_modules/nebular-icons/scss/nebular-icons.scss",
               "src/styles.scss"
             ],
@@ -147,7 +145,6 @@
               "src/favicon.ico"
             ],
             "styles": [
-              "node_modules/bootstrap/dist/css/bootstrap.css",
               "node_modules/nebular-icons/scss/nebular-icons.scss",
               "src/styles.scss"
             ],
@@ -199,7 +196,6 @@
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
             "styles": [
-              "node_modules/bootstrap/dist/css/bootstrap.css",
               "node_modules/nebular-icons/scss/nebular-icons.scss",
               "src/styles.scss"
             ],

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -1,3 +1,18 @@
 .framework-options-bar {
   display: flex;
 }
+
+/deep/ {
+  .options-bar {
+    display: flex;
+    align-items: center;
+  }
+  .options-show {
+    margin-left: auto;
+  }
+  .options-show.fixed {
+    position: fixed;
+    right: 0;
+    top: 0;
+  }
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -22,20 +22,6 @@ import { Component } from '@angular/core';
     </div>
     <router-outlet></router-outlet>
   `,
-  styles: [`
-    .options-bar {
-      display: flex;
-      align-items: center;
-    }
-    .options-show {
-      margin-left: auto;
-    }
-    .options-show.fixed {
-      position: fixed;
-      right: 0;
-      top: 0;
-    }
-  `],
 })
 export class NbAppComponent {
 

diff --git a/src/framework/auth/components/_auth.component.theme.scss b/src/framework/auth/components/_auth.component.theme.scss
@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@mixin nb-auth-theme() {
+  nb-auth .navigation .link .icon {
+    font-weight: nb-theme(font-weight-bold);
+  }
+}
diff --git a/src/framework/auth/components/auth-block/_auth-block.component.theme.scss b/src/framework/auth/components/auth-block/_auth-block.component.theme.scss
@@ -6,16 +6,16 @@
 
 @mixin nb-auth-block-theme() {
   nb-auth-block {
-
-    .form-text a {
+    .text-link {
       color: nb-theme(color-fg);
+      font-weight: nb-theme(font-weight-bold);
     }
 
-    .accept-group {
-      nb-checkbox .custom-control-description {
-        color: nb-theme(color-fg);
-      }
+    .error-message {
+      color: nb-theme(color-danger);
+    }
 
+    .accept-group {
       a {
         color: nb-theme(accept-group-link-color);
       }
@@ -32,3 +32,4 @@
     }
   }
 }
+
diff --git a/src/framework/auth/components/auth-block/auth-block.component.scss b/src/framework/auth/components/auth-block/auth-block.component.scss
@@ -4,66 +4,101 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-:host /deep/ {
-  // TODO rewrite when develop responsive
-  @media (max-width: 550px) {
-    .accept-group {
-      font-size: 12px;
-      padding: 0;
+:host {
+  display: block;
+  width: 100%;
+  max-width: 35rem;
+
+  /deep/ {
+    form {
+      width: 100%;
     }
-  }
 
-  form {
-    width: 100%;
-  }
+    .label {
+      display: block;
+      margin-bottom: 0.5rem;
+    }
 
-  .alert {
-    text-align: center;
-  }
+    .error-message {
+      margin-top: 0.5rem;
+    }
 
-  .title {
-    margin-bottom: 0.75rem;
-    text-align: center;
-  }
+    .alert {
+      text-align: center;
+    }
 
-  .sub-title {
-    margin-bottom: 2rem;
-    text-align: center;
-  }
+    .title {
+      margin-top: 0;
+      margin-bottom: 0.75rem;
+      text-align: center;
+    }
 
-  .checkbox {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 10px;
-    font-weight: normal;
-  }
+    .sub-title {
+      margin-bottom: 2rem;
+      text-align: center;
+    }
+
+    .checkbox {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 10px;
+      font-weight: normal;
+    }
+
+    .form-control-group {
+      margin-bottom: 2rem;
+    }
 
-  .form-group.accept-group {
-    display: flex;
-    justify-content: space-between;
-    margin: 2rem 0;
+    .form-control-group.accept-group {
+      display: flex;
+      justify-content: space-between;
+      margin: 2rem 0;
 
-    .forgot-password {
-      line-height: 2;
+      .forgot-password {
+        line-height: 2;
+      }
     }
-  }
 
-  .links {
-    text-align: center;
-    margin-top: 1.75rem;
+    .links {
+      text-align: center;
+      margin-top: 1.75rem;
+
+      .socials {
+        margin-top: 1.5rem;
+      }
 
-    .socials {
-      margin: 1.5rem 0 2.5rem;
+      .socials a {
+        margin: 0 1rem;
+        text-decoration: none;
+        font-size: 1rem;
+        vertical-align: middle;
+
+        &.with-icon {
+          font-size: 2rem;
+        }
+      }
+    }
+
+    .another-action {
+      margin-top: 2rem;
+      text-align: center;
     }
 
-    .socials a {
-      margin: 0 1rem;
-      text-decoration: none;
-      font-size: 1rem;
-      vertical-align: middle;
+    .sign-in-or-up {
+      margin-top: 2rem;
+      display: flex;
+      justify-content: space-between;
+    }
 
-      &.with-icon {
-        font-size: 2rem;
+    nb-alert {
+      .alert-title,
+      .alert-message {
+        margin: 0 0 0.5rem;
+      }
+      .alert-message-list {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
       }
     }
   }

diff --git a/src/framework/auth/components/auth-block/auth-block.component.ts b/src/framework/auth/components/auth-block/auth-block.component.ts
@@ -1,3 +1,9 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
 import { Component } from '@angular/core';
 
 @Component({

diff --git a/src/framework/auth/components/auth.component.scss b/src/framework/auth/components/auth.component.scss
@@ -1,44 +1,44 @@
-:host /deep/ {
-  $auth-layout-padding: 2.5rem;
+@import '../../theme/styles/global/breakpoints';
 
-  nb-layout .layout .layout-container .content .columns nb-layout-column {
-    padding: $auth-layout-padding;
-  }
+:host {
+  $auth-layout-padding: 2.5rem;
 
   nb-card {
+    margin: 0;
     height: calc(100vh - 2 * #{$auth-layout-padding});
   }
 
-  nb-card-header {
-    a {
-      text-decoration: none;
-      i {
-        font-size: 2rem;
-        font-weight: bold;
-      }
+  .navigation .link {
+    text-decoration: none;
+
+    .icon {
+      font-size: 2rem;
     }
   }
 
-  nb-card {
-    margin: 0;
-  }
-  .flex-centered {
-      margin: auto;
-  }
   nb-card-body {
     display: flex;
+    width: 100%;
   }
 
-  // TODO rewrite when develop responsive
-  @media (max-width: 550px) {
-    /deep/ nb-layout .layout .layout-container .content .columns nb-layout-column {
-      padding: 0;
-    }
+  nb-auth-block {
+    margin: auto;
+  }
 
+  @include media-breakpoint-down(sm) {
     nb-card {
       border-radius: 0;
       height: 100vh;
     }
   }
 
+  /deep/ {
+    nb-layout .layout .layout-container .content .columns nb-layout-column {
+      padding: $auth-layout-padding;
+
+      @include media-breakpoint-down(sm) {
+        padding: 0;
+      }
+    }
+  }
 }
diff --git a/src/framework/auth/components/auth.component.ts b/src/framework/auth/components/auth.component.ts
@@ -17,12 +17,14 @@ import { takeWhile } from 'rxjs/operators';
       <nb-layout-column>
         <nb-card>
           <nb-card-header>
-            <a href="#" (click)="back()"><i class="nb-arrow-thin-left"></i></a>
+            <nav class="navigation">
+              <a href="#" (click)="back()" class="link" aria-label="Back"><i class="icon nb-arrow-thin-left"></i></a>
+            </nav>
           </nb-card-header>
           <nb-card-body>
-            <div class="flex-centered col-xl-4 col-lg-6 col-md-8 col-sm-12">
+            <nb-auth-block>
               <router-outlet></router-outlet>
-            </div>
+            </nb-auth-block>
           </nb-card-body>
         </nb-card>
       </nb-layout-column>