Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-18 16:30:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(demo): fix button sizes, fix modals

Browse source
This commit is contained in:
KostyaDanovsky 2017-07-17 19:43:25 +03:00
parent b9e03cf8cd
commit 3ddf619592
11 changed files with 105 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/app/@theme/styles/global.scss
View file

@ -7,6 +7,18 @@
nga-card nga-card-header + nga-card-body { nga-card nga-card-header + nga-card-body {
padding-top: 0; padding-top: 0;
} }
nga-card nga-card-body + nga-card-footer {
padding-top: 0;
}
.modal-content .modal-header + .modal-body {
padding-top: 0;
}
.modal-content .modal-body + .modal-footer {
padding-top: 0;
}
} }
//global styles for the whole application //global styles for the whole application

4
src/app/pages/dashboard/solar/solar.component.ts
View file

@ -47,9 +47,7 @@ export class SolarComponent {
position: 'center', position: 'center',
formatter: '{d}%', formatter: '{d}%',
textStyle: { textStyle: {
fontSize: '20', fontSize: '22',
fontWeight: 'bold',
color: 'red',
fontFamily: 'Exo', fontFamily: 'Exo',
}, },
}, },

4
src/app/pages/dashboard/team/team.component.scss
View file

@ -39,12 +39,14 @@
.team-subtitle { .team-subtitle {
margin-bottom: 1rem; margin-bottom: 1rem;
color: nga-theme(color-fg-hint); color: nga-theme(color-fg);
font-weight: nga-theme(font-weight-light);
} }
.team-bio { .team-bio {
text-align: justify; text-align: justify;
color: nga-theme(color-fg-text); color: nga-theme(color-fg-text);
font-weight: nga-theme(font-weight-light);
} }
} }

21
src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.html
View file

@ -1,51 +1,50 @@
<nga-card> <nga-card>
<nga-card-header>Button Sizes</nga-card-header> <nga-card-header>Button Sizes</nga-card-header>
<nga-card-body> <nga-card-body>
<div class="row"> <div class="size-container">
<div class="size-container col-md-3">
<div class="container-title"> <div class="container-title">
<span>Rectangle Button</span> <span>Large Button</span>
</div> </div>
<div class="subheader"> <div class="subheader">
<span>1.25rem 1.75rem</span> <span>0.875rem 1.75rem</span>
</div> </div>
<div> <div>
<button class="btn btn-primary btn-lg">Large Button</button> <button class="btn btn-primary btn-lg">Large Button</button>
</div> </div>
</div> </div>
<div class="size-container col-md-3"> <div class="size-container">
<div class="container-title"> <div class="container-title">
<span>Medium Button</span> <span>Medium Button</span>
</div> </div>
<div class="subheader"> <div class="subheader">
<span>1rem 1.5rem</span> <span>0.75rem 1.5rem</span>
</div> </div>
<div> <div>
<button class="btn btn-primary btn-md">Medium Button</button> <button class="btn btn-primary btn-md">Medium Button</button>
</div> </div>
</div> </div>
<div class="size-container col-md-3"> <div class="size-container">
<div class="container-title"> <div class="container-title">
<span>Small Button</span> <span>Small Button</span>
</div> </div>
<div class="subheader"> <div class="subheader">
<span>0.875rem 1.5rem</span> <span>0.675rem 1.5rem</span>
</div> </div>
<div> <div>
<button class="btn btn-primary btn-sm">Small Button</button> <button class="btn btn-primary btn-sm">Small Button</button>
</div> </div>
</div> </div>
<div class="size-container col-md-3"> <div class="size-container">
<div class="container-title"> <div class="container-title">
<span>Tiny Button</span> <span>Tiny Button</span>
</div> </div>
<div class="subheader"> <div class="subheader">
<span>0.625rem 1.25rem</span> <span>0.5rem 1.25rem</span>
</div> </div>
<div> <div>
<button class="btn btn-primary btn-tn">Tiny</button> <button class="btn btn-primary btn-tn">Tiny</button>
</div> </div>
</div> </div>
</div>
</nga-card-body> </nga-card-body>
</nga-card> </nga-card>

6
src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.scss
View file

@ -2,6 +2,12 @@
@import '~@akveo/nga-theme/styles/global/bootstrap/buttons'; @import '~@akveo/nga-theme/styles/global/bootstrap/buttons';
@include nga-install-component() { @include nga-install-component() {
.size-container {
display: inline-block;
margin: 0 1rem 1rem 0;
}
.subheader { .subheader {
margin-bottom: 1rem; margin-bottom: 1rem;
color: nga-theme(color-fg-heading); color: nga-theme(color-fg-heading);

13
src/app/pages/ui-features/icons/icons.component.html
View file

@ -1,27 +1,30 @@
<div class="row"> <div class="row">
<div class="col-6 col-md-6"> <div class="col-md-12 col-lg-6">
<nga-card> <nga-card>
<nga-card-header> <nga-card-header>
Ionicons Ionicons
</nga-card-header> </nga-card-header>
<nga-card-body> <nga-card-body>
<div class="col-2 icon" *ngFor="let icon of icons.ionicons"><i class="{{ icon }}"></i></div> <div class="icon" *ngFor="let icon of icons.ionicons"><i class="{{ icon }}"></i></div>
</nga-card-body> </nga-card-body>
<nga-card-footer> <nga-card-footer>
<a href="http://ionicons.com/" target="_blank" class="see-all-icons">See all ionicons icons</a> <a href="http://ionicons.com/" target="_blank" class="see-all-icons">See all ionicons icons</a>
</nga-card-footer> </nga-card-footer>
</nga-card> </nga-card>
</div> </div>
<div class="col-6 col-md-6">
<div class="col-md-12 col-lg-6">
<nga-card> <nga-card>
<nga-card-header> <nga-card-header>
Font awesome icons Font awesome icons
</nga-card-header> </nga-card-header>
<nga-card-body> <nga-card-body>
<div class="col-2 icon" *ngFor="let icon of icons.fontAwesome"><i class="fa {{ icon }}"></i></div> <div class="icon" *ngFor="let icon of icons.fontAwesome"><i class="fa {{ icon }}"></i></div>
</nga-card-body> </nga-card-body>
<nga-card-footer> <nga-card-footer>
<a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank" class="see-all-icons">See all Font Awesome icons</a> <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank" class="see-all-icons">
See all Font Awesome icons
</a>
</nga-card-footer> </nga-card-footer>
</nga-card> </nga-card>
</div> </div>

20
src/app/pages/ui-features/icons/icons.component.scss
View file

@ -1,16 +1,18 @@
:host { .icon {
display: block; display: inline-block;
width: 4rem;
nga-card { padding: 1.25rem 0;
nga-card-body {
.icon {
float: left;
text-align: center; text-align: center;
} font-size: 1.25rem;
}
:host {
nga-card-header, nga-card-body {
padding-bottom: 0;
} }
nga-card-footer { nga-card-footer {
text-align: right; text-align: right;
} padding-top: 0;
} }
} }

2
src/app/pages/ui-features/icons/icons.component.ts
View file

@ -1,4 +1,4 @@
import { Component, Pipe, PipeTransform } from '@angular/core'; import { Component } from '@angular/core';
@Component({ @Component({
selector: 'ngx-icons', selector: 'ngx-icons',

15
src/app/pages/ui-features/modals/modal/modal.component.html
View file

@ -1,14 +1 @@
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">{{ modalHeader }}</h4>
<button class="close" aria-label="Close" (click)="closeModal()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
{{ modalContent }}
</div>
<div class="modal-footer">
<button class="btn btn-primary confirm-btn" (click)="closeModal()">Save changes</button>
</div>
</div>

25
src/app/pages/ui-features/modals/modal/modal.component.ts
View file

@ -3,22 +3,31 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@Component({ @Component({
selector: 'ngx-modal', selector: 'ngx-modal',
templateUrl: './modal.component.html', template: `
<div class="modal-header">
<span>{{ modalHeader }}</span>
<button class="close" aria-label="Close" (click)="closeModal()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
{{ modalContent }}
</div>
<div class="modal-footer">
<button class="btn btn-md btn-primary" (click)="closeModal()">Save changes</button>
</div>
`,
}) })
export class ModalComponent { export class ModalComponent {
modalHeader: string; modalHeader: string;
modalContent: string = `Lorem ipsum dolor sit amet, modalContent: string = `Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nibh euismod tincidunt ut laoreet dolore magna aliquam nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.`;
erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.`;
constructor(private activeModal: NgbActiveModal) { } constructor(private activeModal: NgbActiveModal) { }
closeModal() { closeModal() {
this.activeModal.close(); this.activeModal.close();
} }
} }

9
src/app/pages/ui-features/modals/modals.component.scss
View file

@ -1,9 +1,4 @@
:host {
display: block;
nga-card-body { button {
button { margin-right: 0.75rem;
margin-right: 10px;
}
}
} }