Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(auth): remove bootstrap #738

Merged
merged 17 commits into from
Sep 25, 2018
Merged

feat(auth): remove bootstrap #738

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
e132a48
feat(auth): remove bootstrap styles
yggg Sep 20, 2018
0a3d379
feat(theme): add box-sizing reset
yggg Sep 20, 2018
873e420
refactor(auth): remove auth-block and move styles to auth component
yggg Sep 20, 2018
5e63403
docs(auth): remove auth block component
yggg Sep 20, 2018
d9345f7
fix(playground): add global auth styles
yggg Sep 20, 2018
a1f9832
refactor(playground): remove bootstrap styles
yggg Sep 20, 2018
7b5e4aa
refactor(playground): remove bootstrap styles
yggg Sep 23, 2018
5cb087b
refactor(playground): make nb-auth parent of oauth2-password
yggg Sep 23, 2018
5b3ac89
refactor(auth): add nb-auth-block component
yggg Sep 24, 2018
fd7ca1a
Merge branch 'master' into feature/remove-bootstrap-auth
yggg Sep 24, 2018
8d4b4d1
Merge branch 'master' into feature/remove-bootstrap-auth
yggg Sep 25, 2018
238edf3
refactor(auth): remove nebular bootstrap dependency
yggg Sep 25, 2018
96529e0
refactor(playground): redirect to login page by default
yggg Sep 25, 2018
e7197ca
feat(auth): add corporate theme
yggg Sep 25, 2018
df227c4
refactor(auth): use theme variables
yggg Sep 25, 2018
534f298
fix(playground): move styles into scss file
yggg Sep 25, 2018
6d2b04c
style(auth): rename nb-auth theme file
yggg Sep 25, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions angular.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@
"src/favicon.ico"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
yggg marked this conversation as resolved.
Show resolved Hide resolved
"node_modules/nebular-icons/scss/nebular-icons.scss",
"src/styles.scss"
],
Expand Down Expand Up @@ -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"
],
Expand Down Expand Up @@ -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"
],
Expand Down Expand Up @@ -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"
],
Expand Down
13 changes: 7 additions & 6 deletions src/framework/auth/components/auth-block/_auth-block.component.theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@

@mixin nb-auth-block-theme() {
nb-auth-block {

.form-text a {
.text-link {
color: nb-theme(color-fg);
font-weight: bold;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we have a variable for 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);
}
Expand All @@ -32,3 +32,4 @@
}
}
}

127 changes: 81 additions & 46 deletions src/framework/auth/components/auth-block/auth-block.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
yggg marked this conversation as resolved.
Show resolved Hide resolved
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;
}
}
}
Expand Down
6 changes: 6 additions & 0 deletions src/framework/auth/components/auth-block/auth-block.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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({
Expand Down
47 changes: 24 additions & 23 deletions src/framework/auth/components/auth.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,45 @@
: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;
font-weight: bold;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

variable

}
}

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;
}
}
}
}
8 changes: 5 additions & 3 deletions src/framework/auth/components/auth.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading