mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-19 08:50:13 +01:00
fix(demo): replace @akveo with @nebular
This commit is contained in:
Alexander Zhukov
parent
b772882cd6
commit
210c6f2355
129 changed files with 1010 additions and 1010 deletions
|
|
@ -2,16 +2,16 @@
|
|||
<div class="action-groups-header">
|
||||
<span>Action Groups</span>
|
||||
</div>
|
||||
<nga-actions size="medium">
|
||||
<nga-action icon="ion-navicon"></nga-action>
|
||||
<nga-action>
|
||||
<nga-search type="rotate-layout"></nga-search>
|
||||
</nga-action>
|
||||
<nga-action icon="ion-ios-email-outline"></nga-action>
|
||||
<nga-action disabled icon="ion-ios-bell-outline"></nga-action>
|
||||
<nga-action>
|
||||
<nga-user [menu]="userMenu" name="Han Solo"></nga-user>
|
||||
</nga-action>
|
||||
<nga-action icon="ion-ios-gear-outline"></nga-action>
|
||||
</nga-actions>
|
||||
<nb-actions size="medium">
|
||||
<nb-action icon="ion-navicon"></nb-action>
|
||||
<nb-action>
|
||||
<nb-search type="rotate-layout"></nb-search>
|
||||
</nb-action>
|
||||
<nb-action icon="ion-ios-email-outline"></nb-action>
|
||||
<nb-action disabled icon="ion-ios-bell-outline"></nb-action>
|
||||
<nb-action>
|
||||
<nb-user [menu]="userMenu" name="Han Solo"></nb-user>
|
||||
</nb-action>
|
||||
<nb-action icon="ion-ios-gear-outline"></nb-action>
|
||||
</nb-actions>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import '../../../../@theme/styles/variables';
|
||||
@import '~@akveo/nga-theme/components/card/card.component.theme';
|
||||
@import '~@nebular/theme/components/card/card.component.theme';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
.action-groups {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -9,6 +9,6 @@
|
|||
.action-groups-header {
|
||||
flex: 1;
|
||||
|
||||
@include nga-card-header();
|
||||
@include nb-card-header();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<nga-card>
|
||||
<nga-card-header>Block Level Buttons</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card>
|
||||
<nb-card-header>Block Level Buttons</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row block-level-buttons">
|
||||
<div class="col-md-12">
|
||||
<div class="btn-group btn-group-full-width" role="group">
|
||||
|
|
@ -12,5 +12,5 @@
|
|||
<button type="button" class="btn btn-outline-primary btn-block">Block Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<nga-card>
|
||||
<nga-card-header>Button Groups</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card>
|
||||
<nb-card-header>Button Groups</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="example-container toggle-types">
|
||||
|
|
@ -120,5 +120,5 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import '../../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
|
||||
.toolbars-container {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -4,14 +4,14 @@
|
|||
</div>
|
||||
<div class="col-lg-6">
|
||||
<ngx-shape-buttons></ngx-shape-buttons>
|
||||
<nga-card>
|
||||
<nb-card>
|
||||
<ngx-action-groups></ngx-action-groups>
|
||||
</nga-card>
|
||||
<nga-card>
|
||||
<nga-card-body>
|
||||
</nb-card>
|
||||
<nb-card>
|
||||
<nb-card-body>
|
||||
<ngx-labeled-actions-group></ngx-labeled-actions-group>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<ngx-dropdown-buttons></ngx-dropdown-buttons>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
@import '~@akveo/nga-theme/styles/global/bootstrap/buttons';
|
||||
@import '~@nebular/theme/styles/global/bootstrap/buttons';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
/deep/ {
|
||||
$button-size: 50px;
|
||||
$button-border-radius: 12px;
|
||||
|
||||
.container-title {
|
||||
color: nga-theme(color-fg);
|
||||
font-family: nga-theme(font-secondary);
|
||||
color: nb-theme(color-fg);
|
||||
font-family: nb-theme(font-secondary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
color: nga-theme(color-fg-header);
|
||||
color: nb-theme(color-fg-header);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
font-weight: 300;
|
||||
color: nga-theme(color-fg);
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
.btn-demo {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { NgaActionsModule, NgaSearchModule, NgaUserModule } from '@akveo/nga-theme';
|
||||
import { NbActionsModule, NbSearchModule, NbUserModule } from '@nebular/theme';
|
||||
|
||||
import { SharedModule } from '../../../shared.module';
|
||||
|
||||
|
|
@ -32,9 +32,9 @@ const components = [
|
|||
@NgModule({
|
||||
imports: [
|
||||
SharedModule,
|
||||
NgaActionsModule,
|
||||
NgaSearchModule,
|
||||
NgaUserModule,
|
||||
NbActionsModule,
|
||||
NbSearchModule,
|
||||
NbUserModule,
|
||||
],
|
||||
exports: [
|
||||
...components,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<nga-card>
|
||||
<nga-card-header>
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
<span>Default Buttons</span>
|
||||
<div ngbDropdown>
|
||||
<button class="btn btn-primary" type="button" ngbDropdownToggle>
|
||||
|
|
@ -9,8 +9,8 @@
|
|||
<a href="#" class="dropdown-item" *ngFor="let v of buttonsViews" (click)="selectView($event, v)">{{ v.title }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row" *ngIf="selectedButtonsView.key === 'default'">
|
||||
<div class="example-container col-md-4" *ngFor="let b of defaultButtons">
|
||||
<div class="container-title">
|
||||
|
|
@ -77,5 +77,5 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
@import '../../../../@theme/styles/variables';
|
||||
@import '~@akveo/nga-theme/styles/global/bootstrap/buttons';
|
||||
@import '~@nebular/theme/styles/global/bootstrap/buttons';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
|
||||
nga-card-header {
|
||||
nb-card-header {
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
.primary-container {
|
||||
.original {
|
||||
background-color: nga-theme(btn-primary-bg);
|
||||
background-color: nb-theme(btn-primary-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-primary-hover();
|
||||
|
|
@ -33,12 +33,12 @@
|
|||
|
||||
.primary-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nga-theme(btn-primary-bg);
|
||||
border: 2px solid nb-theme(btn-primary-bg);
|
||||
}
|
||||
|
||||
.success-container {
|
||||
.original {
|
||||
background-color: nga-theme(btn-success-bg);
|
||||
background-color: nb-theme(btn-success-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-success-hover();
|
||||
|
|
@ -50,12 +50,12 @@
|
|||
|
||||
.success-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nga-theme(btn-success-bg);
|
||||
border: 2px solid nb-theme(btn-success-bg);
|
||||
}
|
||||
|
||||
.warning-container {
|
||||
.original {
|
||||
background-color: nga-theme(btn-warning-bg);
|
||||
background-color: nb-theme(btn-warning-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-warning-hover();
|
||||
|
|
@ -67,12 +67,12 @@
|
|||
|
||||
.warning-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nga-theme(btn-warning-bg);
|
||||
border: 2px solid nb-theme(btn-warning-bg);
|
||||
}
|
||||
|
||||
.info-container {
|
||||
.original {
|
||||
background-color: nga-theme(btn-info-bg);
|
||||
background-color: nb-theme(btn-info-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-info-hover();
|
||||
|
|
@ -84,12 +84,12 @@
|
|||
|
||||
.info-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nga-theme(btn-info-bg);
|
||||
border: 2px solid nb-theme(btn-info-bg);
|
||||
}
|
||||
|
||||
.danger-container {
|
||||
.original {
|
||||
background-color: nga-theme(btn-danger-bg);
|
||||
background-color: nb-theme(btn-danger-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-danger-hover();
|
||||
|
|
@ -101,12 +101,12 @@
|
|||
|
||||
.danger-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nga-theme(btn-danger-bg);
|
||||
border: 2px solid nb-theme(btn-danger-bg);
|
||||
}
|
||||
|
||||
.secondary-container {
|
||||
.original {
|
||||
border: 2px solid nga-theme(btn-secondary-border);
|
||||
border: 2px solid nb-theme(btn-secondary-border);
|
||||
}
|
||||
.hover {
|
||||
@include btn-secondary-hover();
|
||||
|
|
@ -118,6 +118,6 @@
|
|||
|
||||
.secondary-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nga-theme(btn-secondary-border);
|
||||
border: 2px solid nb-theme(btn-secondary-border);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<nga-card>
|
||||
<nga-card-header>Button Dropdowns</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card>
|
||||
<nb-card-header>Button Dropdowns</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="btn-group" ngbDropdown>
|
||||
<button type="button" class="btn btn-primary">Dropdown</button>
|
||||
<button type="button" class="btn btn-primary" ngbDropdownToggle></button>
|
||||
|
|
@ -40,5 +40,5 @@
|
|||
<li class="dropdown-item">Default</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
@import '../../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
text-align: center;
|
||||
|
||||
.dropdown, .btn-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
nga-card-body {
|
||||
nb-card-body {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<nga-card>
|
||||
<nga-card-header>Hero Buttons</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card>
|
||||
<nb-card-header>Hero Buttons</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row">
|
||||
<div class="example-container col-md-2" *ngFor="let hb of heroButtons">
|
||||
<div class="container-title">
|
||||
|
|
@ -51,5 +51,5 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import '../../../../@theme/styles/variables';
|
||||
@import '~@akveo/nga-theme/styles/global/bootstrap/buttons';
|
||||
@import '~@nebular/theme/styles/global/bootstrap/buttons';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
|
||||
.primary-container {
|
||||
.gradient {
|
||||
|
|
@ -80,8 +80,8 @@
|
|||
|
||||
.secondary-container {
|
||||
.border {
|
||||
color: nga-theme(btn-secondary-color);
|
||||
border: nga-theme(btn-secondary-border-width) solid nga-theme(btn-secondary-border);
|
||||
color: nb-theme(btn-secondary-color);
|
||||
border: nb-theme(btn-secondary-border-width) solid nb-theme(btn-secondary-border);
|
||||
}
|
||||
.glow {
|
||||
box-shadow: btn-hero-secondary-glow();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<nga-card>
|
||||
<nga-card-header>Icon buttons</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card>
|
||||
<nb-card-header>Icon buttons</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row icon-buttons">
|
||||
<div class="col-md-12">
|
||||
<div class="btn-group">
|
||||
|
|
@ -39,5 +39,5 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
nga-card-body {
|
||||
nb-card-body {
|
||||
div:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<nga-actions size="medium" fullWidth>
|
||||
<nga-action>
|
||||
<nb-actions size="medium" fullWidth>
|
||||
<nb-action>
|
||||
<i class="ion-ios-pause-outline"></i><span>Pause</span>
|
||||
</nga-action>
|
||||
<nga-action>
|
||||
</nb-action>
|
||||
<nb-action>
|
||||
<i class="ion-navicon"></i><span>Log View</span>
|
||||
</nga-action>
|
||||
<nga-action>
|
||||
</nb-action>
|
||||
<nb-action>
|
||||
<i class="ion-ios-search"></i><span>Search</span>
|
||||
</nga-action>
|
||||
<nga-action>
|
||||
</nb-action>
|
||||
<nb-action>
|
||||
<i class="ion-ios-gear-outline"></i><span>Setup</span>
|
||||
</nga-action>
|
||||
</nga-actions>
|
||||
</nb-action>
|
||||
</nb-actions>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
@import '../../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
nga-action {
|
||||
@include nb-install-component() {
|
||||
nb-action {
|
||||
i {
|
||||
color: nga-theme(color-fg);
|
||||
color: nb-theme(color-fg);
|
||||
font-size: 2.5rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: nga-theme(font-family-secondary);
|
||||
font-weight: nga-theme(font-weight-bold);
|
||||
color: nga-theme(color-fg-heading);
|
||||
font-family: nb-theme(font-family-secondary);
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
color: nb-theme(color-fg-heading);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<nga-card>
|
||||
<nga-card-header>Button Shapes</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card>
|
||||
<nb-card-header>Button Shapes</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row">
|
||||
<div class="shape-container col-md-4">
|
||||
<div class="container-title">
|
||||
|
|
@ -39,5 +39,5 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
@import '../../../../@theme/styles/variables';
|
||||
@import '~@akveo/nga-theme/styles/global/bootstrap/buttons';
|
||||
@import '~@nebular/theme/styles/global/bootstrap/buttons';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
|
||||
.subheader {
|
||||
margin-bottom: 19px;
|
||||
|
||||
span:nth-child(2) {
|
||||
color: nga-theme(color-fg-heading);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<nga-card>
|
||||
<nga-card-header>Button Sizes</nga-card-header>
|
||||
<nb-card>
|
||||
<nb-card-header>Button Sizes</nb-card-header>
|
||||
|
||||
<nga-card-body>
|
||||
<nb-card-body>
|
||||
<div class="size-container">
|
||||
<div class="container-title">
|
||||
<span>Large Button</span>
|
||||
|
|
@ -46,5 +46,5 @@
|
|||
<button class="btn btn-primary btn-tn">Tiny</button>
|
||||
</div>
|
||||
</div>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import '../../../../@theme/styles/variables';
|
||||
@import '~@akveo/nga-theme/styles/global/bootstrap/buttons';
|
||||
@import '~@nebular/theme/styles/global/bootstrap/buttons';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
|
||||
.size-container {
|
||||
display: inline-block;
|
||||
|
|
@ -10,6 +10,6 @@
|
|||
|
||||
.subheader {
|
||||
margin-bottom: 1rem;
|
||||
color: nga-theme(color-fg-heading);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
Grid System
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<h5 class="grid-h">Stacked to horizontal</h5>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-1">
|
||||
|
|
@ -245,7 +245,7 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,31 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12 col-lg-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
Ionicons
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="icon" *ngFor="let icon of icons.ionicons"><i class="{{ icon }}"></i></div>
|
||||
</nga-card-body>
|
||||
<nga-card-footer>
|
||||
</nb-card-body>
|
||||
<nb-card-footer>
|
||||
<a href="http://ionicons.com/" target="_blank" class="see-all-icons">See all ionicons icons</a>
|
||||
</nga-card-footer>
|
||||
</nga-card>
|
||||
</nb-card-footer>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
Font awesome icons
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="icon" *ngFor="let icon of icons.fontAwesome"><i class="fa {{ icon }}"></i></div>
|
||||
</nga-card-body>
|
||||
<nga-card-footer>
|
||||
</nb-card-body>
|
||||
<nb-card-footer>
|
||||
<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>
|
||||
</nb-card-footer>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@
|
|||
}
|
||||
|
||||
:host {
|
||||
nga-card-body {
|
||||
nb-card-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nga-card-footer {
|
||||
nb-card-footer {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<nga-card>
|
||||
<nga-card-header>Modals</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card>
|
||||
<nb-card-header>Modals</nb-card-header>
|
||||
<nb-card-body>
|
||||
<button class="btn btn-success" (click)="showLargeModal()">Large modal</button>
|
||||
<button class="btn btn-warning" (click)="showSmallModal()">Small modal</button>
|
||||
<button class="btn btn-primary" (click)="showStaticModal()">Static modal</button>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,12 +13,12 @@ export class ModalsComponent {
|
|||
constructor(private modalService: NgbModal) { }
|
||||
|
||||
showLargeModal() {
|
||||
const activeModal = this.modalService.open(ModalComponent, { size: 'lg', container: 'nga-layout' });
|
||||
const activeModal = this.modalService.open(ModalComponent, { size: 'lg', container: 'nb-layout' });
|
||||
|
||||
activeModal.componentInstance.modalHeader = 'Large Modal';
|
||||
}
|
||||
showSmallModal() {
|
||||
const activeModal = this.modalService.open(ModalComponent, { size: 'sm', container: 'nga-layout' });
|
||||
const activeModal = this.modalService.open(ModalComponent, { size: 'sm', container: 'nb-layout' });
|
||||
|
||||
activeModal.componentInstance.modalHeader = 'Small Modal';
|
||||
}
|
||||
|
|
@ -27,7 +27,7 @@ export class ModalsComponent {
|
|||
const activeModal = this.modalService.open(ModalComponent, {
|
||||
size: 'sm',
|
||||
backdrop: 'static',
|
||||
container: 'nga-layout',
|
||||
container: 'nb-layout',
|
||||
});
|
||||
|
||||
activeModal.componentInstance.modalHeader = 'Static modal';
|
||||
|
|
|
|||
|
|
@ -1,85 +1,85 @@
|
|||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
Simple search
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nga-search type="simple-search" tag="simple-search"></nga-search>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-search type="simple-search" tag="simple-search"></nb-search>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
Layout Rotate Search
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nga-search type="rotate-layout" tag="rotate-layout"></nga-search>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-search type="rotate-layout" tag="rotate-layout"></nb-search>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
Modal Zoomin Search
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nga-search type="modal-zoomin" tag="modal-zoomin"></nga-search>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-search type="modal-zoomin" tag="modal-zoomin"></nb-search>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
Modal Move Search
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nga-search type="modal-move" tag="modal-move"></nga-search>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-search type="modal-move" tag="modal-move"></nb-search>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
Modal Drop Search
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nga-search type="modal-drop" tag="modal-drop"></nga-search>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-search type="modal-drop" tag="modal-drop"></nb-search>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
Modal Half Search
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nga-search type="modal-half" tag="modal-half"></nga-search>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-search type="modal-half" tag="modal-half"></nb-search>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
Curtain Search
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nga-search type="curtain" tag="curtain"></nga-search>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-search type="curtain" tag="curtain"></nb-search>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
Column Curtain Search
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nga-search type="column-curtain" tag="column-curtain"></nga-search>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-search type="column-curtain" tag="column-curtain"></nb-search>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,40 +1,40 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12 col-lg-6">
|
||||
<nga-card size="small">
|
||||
<nga-tabset>
|
||||
<nga-tab tabTitle="Simple Tab #1">
|
||||
<nb-card size="small">
|
||||
<nb-tabset>
|
||||
<nb-tab tabTitle="Simple Tab #1">
|
||||
<p>In 1975, the first general purpose home automation network technology, <a href="/wiki/X10_(industry_standard)" title="X10 (industry standard)">X10</a>, was developed. It is a communication protocol for electronic devices. It primarily uses <a href="/wiki/Electric_power_transmission" title="Electric power transmission">electric power transmission</a> wiring for signalling and control, where the signals involve brief <a href="/wiki/Radio_frequency" title="Radio frequency">radio frequency</a> bursts of <a href="/wiki/Digital_data" title="Digital data">digital data</a>, and remains the most widely available.<sup id="cite_ref-8" class="reference"><a href="#cite_note-8">[8]</a></sup> By 1978, X10 products included a 16 channel command console, a lamp module, and an appliance module. Soon after came the wall switch module and the first X10 timer.</p>
|
||||
</nga-tab>
|
||||
<nga-tab tabTitle="Simple Tab #2">
|
||||
</nb-tab>
|
||||
<nb-tab tabTitle="Simple Tab #2">
|
||||
<span>Content #2</span>
|
||||
</nga-tab>
|
||||
<nga-tab tabTitle="Simple Tab #3">
|
||||
</nb-tab>
|
||||
<nb-tab tabTitle="Simple Tab #3">
|
||||
<span>Content #3</span>
|
||||
</nga-tab>
|
||||
</nga-tabset>
|
||||
</nga-card>
|
||||
</nb-tab>
|
||||
</nb-tabset>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<nga-card size="small">
|
||||
<nga-tabset fullWidth>
|
||||
<nga-tab tabTitle="Full width tab #1">
|
||||
<nb-card size="small">
|
||||
<nb-tabset fullWidth>
|
||||
<nb-tab tabTitle="Full width tab #1">
|
||||
<p><b>Home automation</b> or <b>smart home</b><sup id="cite_ref-Smart_Home_1-0" class="reference"><a href="#cite_note-Smart_Home-1">[1]</a></sup> (also known as <b>domotics</b><sup id="cite_ref-t3_2-0" class="reference"><a href="#cite_note-t3-2">[2]</a></sup>) is <a href="/wiki/Building_automation" title="Building automation">building automation</a> for the home. It involves the control and automation of lighting, heating (such as <a href="/wiki/Smart_thermostat" title="Smart thermostat">smart thermostats</a>), ventilation, air conditioning (<a href="/wiki/HVAC" title="HVAC">HVAC</a>), and security, as well as <a href="/wiki/Home_appliance" title="Home appliance">home appliances</a> such as washer/dryers, ovens or refrigerators/freezers. <a href="/wiki/Wi-Fi" title="Wi-Fi">Wi-Fi</a> is often used for remote monitoring and control. Home devices, when remotely monitored and controlled via the Internet, are an important constituent of the <a href="/wiki/Internet_of_Things" class="mw-redirect" title="Internet of Things">Internet of Things</a>. Modern systems generally consist of switches and sensors connected to a central hub sometimes called a "gateway" from which the system is controlled with a <a href="/wiki/User_interface" title="User interface">user interface</a> that is interacted either with a wall-mounted terminal, mobile phone software, <a href="/wiki/Tablet_computer" title="Tablet computer">tablet computer</a> or a web interface, often but not always via Internet cloud services.</p>
|
||||
<p>While there are many competing vendors, there are very few worldwide accepted industry standards and the smart home space is heavily fragmented.<sup id="cite_ref-3" class="reference"><a href="#cite_note-3">[3]</a></sup> Popular <a href="/wiki/Communications_protocol" title="Communications protocol">communications protocol</a> for products include <a href="/wiki/X10_(industry_standard)" title="X10 (industry standard)">X10</a>, <a href="/wiki/Ethernet" title="Ethernet">Ethernet</a>, <a href="/wiki/RS-485" title="RS-485">RS-485</a>, <a href="/wiki/6LoWPAN" title="6LoWPAN">6LoWPAN</a>, <a href="/wiki/Bluetooth_low_energy" class="mw-redirect" title="Bluetooth low energy">Bluetooth LE (BLE)</a>, <a href="/wiki/ZigBee" class="mw-redirect" title="ZigBee">ZigBee</a> and <a href="/wiki/Z-Wave" title="Z-Wave">Z-Wave</a>, or other proprietary protocols all of which are incompatible with each other.<sup id="cite_ref-crhomephone_4-0" class="reference"><a href="#cite_note-crhomephone-4">[4]</a></sup> Manufacturers often prevent independent implementations by withholding documentation and by litigation.<sup id="cite_ref-5" class="reference"><a href="#cite_note-5">[5]</a></sup></p>
|
||||
</nga-tab>
|
||||
<nga-tab tabTitle="Full width tab #2">
|
||||
</nb-tab>
|
||||
<nb-tab tabTitle="Full width tab #2">
|
||||
<span>Content #2</span>
|
||||
</nga-tab>
|
||||
<nga-tab tabTitle="Full width tab #3">
|
||||
</nb-tab>
|
||||
<nb-tab tabTitle="Full width tab #3">
|
||||
<span>Content #3</span>
|
||||
</nga-tab>
|
||||
</nga-tabset>
|
||||
</nga-card>
|
||||
</nb-tab>
|
||||
</nb-tabset>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<nga-card size="small">
|
||||
<nga-route-tabset [tabs]="tabs"></nga-route-tabset>
|
||||
</nga-card>
|
||||
<nb-card size="small">
|
||||
<nb-route-tabset [tabs]="tabs"></nb-route-tabset>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
nga-tabset {
|
||||
@include nb-install-component() {
|
||||
nb-tabset {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
nga-tab {
|
||||
padding: nga-theme(padding);
|
||||
nb-tab {
|
||||
padding: nb-theme(padding);
|
||||
}
|
||||
|
||||
/deep/ ngx-tab1, /deep/ ngx-tab2 {
|
||||
display: block;
|
||||
padding: nga-theme(padding);
|
||||
padding: nb-theme(padding);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
<div class="col-md-9">
|
||||
<div class="row">
|
||||
<div class="col-md-7">
|
||||
<nga-card size="medium">
|
||||
<nga-card-header>
|
||||
<nb-card size="medium">
|
||||
<nb-card-header>
|
||||
Used Fonts
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="font-row font-secondary">
|
||||
<div class="header">
|
||||
<div class="name bold">Exo</div>
|
||||
|
|
@ -40,15 +40,15 @@
|
|||
Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
|
||||
</p>
|
||||
</div>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<nga-card size="medium">
|
||||
<nga-card-header>
|
||||
<nb-card size="medium">
|
||||
<nb-card-header>
|
||||
Headings
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="header">
|
||||
<div>
|
||||
<h1>H1. Heading</h1>
|
||||
|
|
@ -103,16 +103,16 @@
|
|||
Demibold 1rem (16px)
|
||||
</div>
|
||||
</div>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<nga-card size="small">
|
||||
<nga-card-header>
|
||||
<nb-card size="small">
|
||||
<nb-card-header>
|
||||
Article Example
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<h4>So what's About the grammar?</h4>
|
||||
<p class="text-indent">
|
||||
Far far away, behind the word mountains, far from the countries <strong>Vokalia</strong> and <strong>Consonantia</strong>,
|
||||
|
|
@ -129,15 +129,15 @@
|
|||
<a href="http://google.com" target="_blank">Lorem Ipsum</a> decided to leave for
|
||||
the far <strong>World of Grammar</strong>.
|
||||
</p>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<nga-card size="small">
|
||||
<nga-card-header>
|
||||
<nb-card size="small">
|
||||
<nb-card-header>
|
||||
Blockquotes
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<blockquote class="blockquote">
|
||||
<p class="mb-0">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.
|
||||
</blockquote>
|
||||
|
|
@ -149,17 +149,17 @@
|
|||
<p class="mb-0">Far far away, behind the word mountains.</p>
|
||||
<footer class="blockquote-footer">Vladimir Lugovsky</footer>
|
||||
</blockquote>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<nga-card size="xxlarge">
|
||||
<nga-card-header>
|
||||
<nb-card size="xxlarge">
|
||||
<nb-card-header>
|
||||
Font Colors
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="colors">
|
||||
<div class="item text-heading">
|
||||
<div class="color bg-heading"></div>
|
||||
|
|
@ -218,8 +218,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -228,11 +228,11 @@
|
|||
<div class="col-md-9">
|
||||
<div class="row">
|
||||
<div class="col-md-7">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>
|
||||
<nb-card size="large">
|
||||
<nb-card-header>
|
||||
Alerts
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="alert alert-primary" role="alert">
|
||||
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
|
||||
</div>
|
||||
|
|
@ -251,15 +251,15 @@
|
|||
<div class="alert alert-danger" role="alert">
|
||||
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
|
||||
</div>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>
|
||||
<nb-card size="large">
|
||||
<nb-card-header>
|
||||
Text Types
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<h4>Highlighted text</h4>
|
||||
<p class="mb-5">
|
||||
Far far away, behind the word mountains, far from the countries
|
||||
|
|
@ -275,17 +275,17 @@
|
|||
Far far away, behind the word mountains, far from the countries
|
||||
Vokalia and <a href="http://google.com" target="_blank">Consonantia, there live the blind texts.</a>
|
||||
</p>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>
|
||||
<nb-card size="large">
|
||||
<nb-card-header>
|
||||
Lists
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<h4>Ordered List</h4>
|
||||
<ol class="mb-5">
|
||||
<li>Far far away, behind the word mountains</li>
|
||||
|
|
@ -303,7 +303,7 @@
|
|||
<li>Right at the coast of the Semantics.</li>
|
||||
<li>A small river named Duden flows</li>
|
||||
</ul>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
|
||||
.font-secondary .font-header .name {
|
||||
font-size: 4.5rem;
|
||||
line-height: 4rem;
|
||||
font-weight: nga-theme(font-weight-bold);
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
}
|
||||
|
||||
.font-main .font-header .name {
|
||||
font-size: 3rem;
|
||||
font-weight: nga-theme(font-weight-bold);
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
}
|
||||
|
||||
.font-row {
|
||||
|
|
@ -32,8 +32,8 @@
|
|||
align-items: center;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 1px solid nga-theme(separator);
|
||||
color: nga-theme(color-fg-heading);
|
||||
border-bottom: 1px solid nb-theme(separator);
|
||||
color: nb-theme(color-fg-heading);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
color: nga-theme(color-fg);
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { NgaTabsetModule, NgaRouteTabsetModule, NgaSearchModule } from '@akveo/nga-theme';
|
||||
import { NbTabsetModule, NbRouteTabsetModule, NbSearchModule } from '@nebular/theme';
|
||||
|
||||
import { SharedModule } from '../../shared.module';
|
||||
|
||||
|
|
@ -32,9 +32,9 @@ const components = [
|
|||
imports: [
|
||||
SharedModule,
|
||||
UiFeaturesRoutingModule,
|
||||
NgaTabsetModule,
|
||||
NgaRouteTabsetModule,
|
||||
NgaSearchModule,
|
||||
NbTabsetModule,
|
||||
NbRouteTabsetModule,
|
||||
NbSearchModule,
|
||||
ButtonsModule,
|
||||
],
|
||||
declarations: [
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue