mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-09-22 05:50:48 +02:00
fix(demo): fix button sizes, fix modals
This commit is contained in:
KostyaDanovsky
parent
b9e03cf8cd
commit
3ddf619592
11 changed files with 105 additions and 92 deletions
|
|
@ -7,6 +7,18 @@
|
|||
nga-card nga-card-header + nga-card-body {
|
||||
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
|
||||
|
|
|
|||
|
|
@ -47,9 +47,7 @@ export class SolarComponent {
|
|||
position: 'center',
|
||||
formatter: '{d}%',
|
||||
textStyle: {
|
||||
fontSize: '20',
|
||||
fontWeight: 'bold',
|
||||
color: 'red',
|
||||
fontSize: '22',
|
||||
fontFamily: 'Exo',
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -39,12 +39,14 @@
|
|||
|
||||
.team-subtitle {
|
||||
margin-bottom: 1rem;
|
||||
color: nga-theme(color-fg-hint);
|
||||
color: nga-theme(color-fg);
|
||||
font-weight: nga-theme(font-weight-light);
|
||||
}
|
||||
|
||||
.team-bio {
|
||||
text-align: justify;
|
||||
color: nga-theme(color-fg-text);
|
||||
font-weight: nga-theme(font-weight-light);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,50 +1,49 @@
|
|||
<nga-card>
|
||||
<nga-card-header>Button Sizes</nga-card-header>
|
||||
|
||||
<nga-card-body>
|
||||
<div class="row">
|
||||
<div class="size-container col-md-3">
|
||||
<div class="container-title">
|
||||
<span>Rectangle Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>1.25rem 1.75rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-lg">Large Button</button>
|
||||
</div>
|
||||
<div class="size-container">
|
||||
<div class="container-title">
|
||||
<span>Large Button</span>
|
||||
</div>
|
||||
<div class="size-container col-md-3">
|
||||
<div class="container-title">
|
||||
<span>Medium Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>1rem 1.5rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-md">Medium Button</button>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>0.875rem 1.75rem</span>
|
||||
</div>
|
||||
<div class="size-container col-md-3">
|
||||
<div class="container-title">
|
||||
<span>Small Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>0.875rem 1.5rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-sm">Small Button</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-lg">Large Button</button>
|
||||
</div>
|
||||
<div class="size-container col-md-3">
|
||||
<div class="container-title">
|
||||
<span>Tiny Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>0.625rem 1.25rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-tn">Tiny</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="size-container">
|
||||
<div class="container-title">
|
||||
<span>Medium Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>0.75rem 1.5rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-md">Medium Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="size-container">
|
||||
<div class="container-title">
|
||||
<span>Small Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>0.675rem 1.5rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-sm">Small Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="size-container">
|
||||
<div class="container-title">
|
||||
<span>Tiny Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>0.5rem 1.25rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-tn">Tiny</button>
|
||||
</div>
|
||||
</div>
|
||||
</nga-card-body>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
@import '~@akveo/nga-theme/styles/global/bootstrap/buttons';
|
||||
|
||||
@include nga-install-component() {
|
||||
|
||||
.size-container {
|
||||
display: inline-block;
|
||||
margin: 0 1rem 1rem 0;
|
||||
}
|
||||
|
||||
.subheader {
|
||||
margin-bottom: 1rem;
|
||||
color: nga-theme(color-fg-heading);
|
||||
|
|
|
|||
|
|
@ -1,27 +1,30 @@
|
|||
<div class="row">
|
||||
<div class="col-6 col-md-6">
|
||||
<div class="col-md-12 col-lg-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
Ionicons
|
||||
</nga-card-header>
|
||||
<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-footer>
|
||||
<a href="http://ionicons.com/" target="_blank" class="see-all-icons">See all ionicons icons</a>
|
||||
</nga-card-footer>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-6 col-md-6">
|
||||
|
||||
<div class="col-md-12 col-lg-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
Font awesome icons
|
||||
</nga-card-header>
|
||||
<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-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>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,18 @@
|
|||
.icon {
|
||||
display: inline-block;
|
||||
width: 4rem;
|
||||
padding: 1.25rem 0;
|
||||
text-align: center;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
nga-card-header, nga-card-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
nga-card {
|
||||
nga-card-body {
|
||||
.icon {
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
nga-card-footer {
|
||||
text-align: right;
|
||||
}
|
||||
nga-card-footer {
|
||||
text-align: right;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, Pipe, PipeTransform } from '@angular/core';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-icons',
|
||||
|
|
|
|||
|
|
@ -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">×</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>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,22 +3,31 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
|||
|
||||
@Component({
|
||||
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">×</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 {
|
||||
|
||||
modalHeader: string;
|
||||
modalContent: string = `Lorem ipsum dolor sit amet,
|
||||
consectetuer adipiscing elit, sed diam nonummy
|
||||
nibh euismod tincidunt ut laoreet dolore magna aliquam
|
||||
erat volutpat. Ut wisi enim ad minim veniam, quis
|
||||
nostrud exerci tation ullamcorper suscipit lobortis
|
||||
nisl ut aliquip ex ea commodo consequat.`;
|
||||
modalContent: string = `Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
|
||||
nibh euismod tincidunt ut laoreet dolore magna aliquam 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) { }
|
||||
|
||||
closeModal() {
|
||||
this.activeModal.close();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,4 @@
|
|||
:host {
|
||||
display: block;
|
||||
|
||||
nga-card-body {
|
||||
button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
button {
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue