mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-01-25 18:56:10 +01:00
feat: update to Angular 8, Nebular 4 (#2114)
This commit is contained in:
Dmitry Nehaychik
Sergey Andrievskiy
parent
537e6a77b0
commit
e9600b4a07
323 changed files with 7421 additions and 14161 deletions
|
|
@ -1,17 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-body>
|
||||
<div class="action-groups-header">
|
||||
Action Groups
|
||||
</div>
|
||||
<nb-actions size="medium">
|
||||
<nb-action icon="nb-menu"></nb-action>
|
||||
<nb-action icon="nb-search"></nb-action>
|
||||
<nb-action icon="nb-email"></nb-action>
|
||||
<nb-action disabled icon="nb-notifications"></nb-action>
|
||||
<nb-action>
|
||||
<nb-user name="Han Solo"></nb-user>
|
||||
</nb-action>
|
||||
<nb-action icon="nb-gear"></nb-action>
|
||||
</nb-actions>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~@nebular/theme/components/card/card.component.theme';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-groups-header {
|
||||
flex-basis: 20%;
|
||||
|
||||
color: nb-theme(card-header-fg-heading);
|
||||
font-family: nb-theme(card-header-font-family);
|
||||
font-size: nb-theme(card-header-font-size);
|
||||
font-weight: nb-theme(card-header-font-weight);
|
||||
}
|
||||
|
||||
.nb-actions {
|
||||
flex-basis: 80%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
nb-card-body {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 0.75rem;
|
||||
|
||||
.action-groups-header {
|
||||
@include nb-ltr(margin, 0 0 0.5rem 0.25rem);
|
||||
@include nb-rtl(margin, 0 0.25rem 0.5rem 0);
|
||||
}
|
||||
}
|
||||
|
||||
nb-action {
|
||||
padding: 0 0.5rem;
|
||||
/deep/ .control-icon {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
nb-user /deep/ {
|
||||
.user-container {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.user-picture {
|
||||
height: 1.75rem;
|
||||
width: 1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
|
||||
nb-action {
|
||||
padding: 0 0.375rem;
|
||||
/deep/ .control-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
nb-user /deep/ {
|
||||
.user-container {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.user-picture {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
}
|
||||
nb-card-body {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-action-groups',
|
||||
styleUrls: ['./action-groups.component.scss'],
|
||||
templateUrl: './action-groups.component.html',
|
||||
})
|
||||
export class ActionGroupsComponent {
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Button Elements</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="button-container">
|
||||
<button (click)="onClick()" nbButton>Button</button>
|
||||
</div>
|
||||
<div class="button-container">
|
||||
<input (click)="onClick()" nbButton type="submit" value="Input Submit"/>
|
||||
</div>
|
||||
<div class="button-container">
|
||||
<input (click)="onClick()" nbButton type="button" value="Input Button"/>
|
||||
</div>
|
||||
<div class="button-container">
|
||||
<a (click)="onClick()" href="#" nbButton>Link</a>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/buttons';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-body {
|
||||
padding: 0 1.25rem 1.25rem 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
margin: 1.25rem 0 0 1.25rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-button-elements',
|
||||
styleUrls: ['./button-elements.component.scss'],
|
||||
templateUrl: './button-elements.component.html',
|
||||
})
|
||||
export class ButtonElementsComponent {
|
||||
|
||||
onClick() {
|
||||
}
|
||||
}
|
||||
|
|
@ -1,16 +1,123 @@
|
|||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<ngx-hero-buttons></ngx-hero-buttons>
|
||||
<ngx-default-buttons></ngx-default-buttons>
|
||||
<ngx-outline-buttons></ngx-outline-buttons>
|
||||
<nb-card>
|
||||
<nb-card-header>Hero Buttons</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="buttons-row">
|
||||
<button *ngFor="let status of statuses" nbButton [status]="status" hero>
|
||||
{{ status }}
|
||||
</button>
|
||||
<button disabled nbButton hero>
|
||||
disabled
|
||||
</button>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Default Buttons</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="buttons-row">
|
||||
<button *ngFor="let status of statuses" nbButton [status]="status">
|
||||
{{ status }}
|
||||
</button>
|
||||
<button disabled nbButton>
|
||||
disabled
|
||||
</button>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Outline Buttons</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="buttons-row">
|
||||
<button *ngFor="let status of statuses" nbButton [status]="status" outline>
|
||||
{{ status }}
|
||||
</button>
|
||||
<button disabled nbButton outline>
|
||||
disabled
|
||||
</button>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Ghost Buttons</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="buttons-row">
|
||||
<button *ngFor="let status of statuses" nbButton [status]="status" ghost>
|
||||
{{ status }}
|
||||
</button>
|
||||
<button disabled nbButton outline>
|
||||
disabled
|
||||
</button>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-12 col-xxxl-6">
|
||||
<ngx-shape-buttons></ngx-shape-buttons>
|
||||
<ngx-action-groups></ngx-action-groups>
|
||||
<ngx-labeled-actions-group></ngx-labeled-actions-group>
|
||||
<nb-card>
|
||||
<nb-card-header>Button shapes</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="buttons-row">
|
||||
<button *ngFor="let shape of shapes" nbButton [shape]="shape">
|
||||
{{ shape }}
|
||||
</button>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Button sizes</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="buttons-row">
|
||||
<button *ngFor="let size of sizes" nbButton [size]="size">
|
||||
{{ size }}
|
||||
</button>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-12 col-xxxl-6">
|
||||
<ngx-size-buttons></ngx-size-buttons>
|
||||
<ngx-button-elements></ngx-button-elements>
|
||||
<nb-card class="actions-card">
|
||||
<nb-card-header>Action Groups</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-actions size="medium">
|
||||
<nb-action icon="menu-outline"></nb-action>
|
||||
<nb-action icon="search-outline"></nb-action>
|
||||
<nb-action icon="email-outline"></nb-action>
|
||||
<nb-action disabled icon="bell-outline"></nb-action><nb-action>
|
||||
<nb-user name="Han Solo"></nb-user>
|
||||
</nb-action>
|
||||
<nb-action icon="settings-2-outline"></nb-action>
|
||||
</nb-actions>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-body>
|
||||
<nb-actions size="medium" fullWidth>
|
||||
<nb-action>
|
||||
<nb-icon class="action-icon" icon="pause-circle-outline"></nb-icon>
|
||||
<span>Pause</span>
|
||||
</nb-action>
|
||||
<nb-action>
|
||||
<nb-icon class="action-icon" icon="list-outline"></nb-icon>
|
||||
<span>Logs</span>
|
||||
</nb-action>
|
||||
<nb-action>
|
||||
<nb-icon class="action-icon" icon="search-outline"></nb-icon>
|
||||
<span>Search</span>
|
||||
</nb-action>
|
||||
<nb-action>
|
||||
<nb-icon class="action-icon" icon="settings-2-outline"></nb-icon>
|
||||
<span>Setup</span>
|
||||
</nb-action>
|
||||
</nb-actions>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,103 +1,20 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/buttons';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
/deep/ {
|
||||
$button-size: 50px;
|
||||
|
||||
.container-title {
|
||||
color: nb-theme(color-fg);
|
||||
font-family: nb-theme(font-secondary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
color: nb-theme(color-fg-header);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.subheader {
|
||||
font-size: 0.75rem;
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
.btn-demo {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.state-container {
|
||||
display: flex;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.state-value {
|
||||
width: $button-size;
|
||||
height: $button-size;
|
||||
border-radius: nb-theme(btn-border-radius);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
border-radius: nb-theme(btn-semi-round-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.state-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
height: $button-size;
|
||||
}
|
||||
}
|
||||
|
||||
.example-container {
|
||||
@include nb-ltr(padding-right, 0);
|
||||
@include nb-rtl(padding-left, 0);
|
||||
}
|
||||
|
||||
.example-container .container-btn {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.block-level-buttons .btn-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.buttons-row {
|
||||
margin: -0.5rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
ngx-default-buttons /deep/ nb-card-header {
|
||||
flex-direction: column;
|
||||
align-items: left;
|
||||
|
||||
span {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
button[nbButton] {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
.action-icon {
|
||||
@include nb-ltr(margin-right, 0.5rem);
|
||||
@include nb-rtl(margin-left, 0.5rem);
|
||||
}
|
||||
|
||||
/deep/.icon-buttons .icon-button-examples {
|
||||
button {
|
||||
@include nb-ltr(margin-right, 1rem);
|
||||
@include nb-rtl(margin-left, 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
ngx-default-buttons /deep/ nb-card-header {
|
||||
flex-direction: column;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
ngx-block-level-buttons /deep/ {
|
||||
.btn-primary {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
}
|
||||
.actions-card {
|
||||
height: 8rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NbComponentShape, NbComponentSize, NbComponentStatus } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-buttons',
|
||||
|
|
@ -6,4 +7,7 @@ import { Component } from '@angular/core';
|
|||
templateUrl: './buttons.component.html',
|
||||
})
|
||||
export class ButtonsComponent {
|
||||
statuses: NbComponentStatus[] = [ 'primary', 'success', 'info', 'warning', 'danger' ];
|
||||
shapes: NbComponentShape[] = [ 'rectangle', 'semi-round', 'round' ];
|
||||
sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { ThemeModule } from '../../../@theme/theme.module';
|
||||
import { DefaultButtonsComponent } from './default-buttons/default-buttons.component';
|
||||
import { HeroButtonComponent } from './hero-buttons/hero-buttons.component';
|
||||
import { ShapeButtonsComponent } from './shape-buttons/shape-buttons.component';
|
||||
import { SizeButtonsComponent } from './size-buttons/size-buttons.component';
|
||||
import { ButtonsComponent } from './buttons.component';
|
||||
import { ActionGroupsComponent } from './action-groups/action-groups.component';
|
||||
import { LabeledActionsGroupComponent } from './labeled-actions-group/labeled-actions-group.component';
|
||||
import { OutlineButtonsComponent } from './outline-buttons/outline-buttons.component';
|
||||
import { ButtonElementsComponent } from './button-elements/button-elements.component';
|
||||
|
||||
const components = [
|
||||
ButtonsComponent,
|
||||
DefaultButtonsComponent,
|
||||
OutlineButtonsComponent,
|
||||
HeroButtonComponent,
|
||||
ShapeButtonsComponent,
|
||||
SizeButtonsComponent,
|
||||
ActionGroupsComponent,
|
||||
LabeledActionsGroupComponent,
|
||||
ButtonElementsComponent,
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
ThemeModule,
|
||||
],
|
||||
exports: [
|
||||
...components,
|
||||
],
|
||||
declarations: [
|
||||
...components,
|
||||
],
|
||||
providers: [],
|
||||
})
|
||||
export class ButtonsModule { }
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>
|
||||
<span>Default Buttons</span>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row">
|
||||
<div class="example-container col-md-4" *ngFor="let b of buttons">
|
||||
<div class="container-title">
|
||||
<span>{{ b.containerTitle }}</span>
|
||||
</div>
|
||||
<div class="container-btn">
|
||||
<button nbButton
|
||||
status="{{ b.status }}"
|
||||
class="btn-demo">
|
||||
{{ b.title }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="{{ b.container }}">
|
||||
<div class="state-container">
|
||||
<div class="state-value original"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Default</span>
|
||||
<span class="subheader">{{ b.default }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container">
|
||||
<div class="state-value hover"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Hover</span>
|
||||
<span class="subheader">14% white</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container">
|
||||
<div class="state-value active"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Active</span>
|
||||
<span class="subheader">14% black</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/buttons';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
nb-card-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.example-container {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.primary-container {
|
||||
.original {
|
||||
background-color: nb-theme(btn-primary-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-primary-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-primary-active();
|
||||
}
|
||||
}
|
||||
|
||||
.primary-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-primary-bg);
|
||||
}
|
||||
|
||||
.success-container {
|
||||
.original {
|
||||
background-color: nb-theme(btn-success-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-success-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-success-active();
|
||||
}
|
||||
}
|
||||
|
||||
.success-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-success-bg);
|
||||
}
|
||||
|
||||
.warning-container {
|
||||
.original {
|
||||
background-color: nb-theme(btn-warning-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-warning-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-warning-active();
|
||||
}
|
||||
}
|
||||
|
||||
.warning-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-warning-bg);
|
||||
}
|
||||
|
||||
.info-container {
|
||||
.original {
|
||||
background-color: nb-theme(btn-info-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-info-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-info-active();
|
||||
}
|
||||
}
|
||||
|
||||
.info-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-info-bg);
|
||||
}
|
||||
|
||||
.danger-container {
|
||||
.original {
|
||||
background-color: nb-theme(btn-danger-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-danger-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-danger-active();
|
||||
}
|
||||
}
|
||||
|
||||
.danger-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-danger-bg);
|
||||
}
|
||||
|
||||
.secondary-container {
|
||||
.original {
|
||||
border: 2px solid nb-theme(btn-secondary-border);
|
||||
}
|
||||
.hover {
|
||||
@include btn-secondary-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-secondary-active();
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-secondary-border);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xxl) {
|
||||
.example-container {
|
||||
flex: 0 0 20%;
|
||||
max-width: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-default-buttons',
|
||||
styleUrls: ['./default-buttons.component.scss'],
|
||||
templateUrl: './default-buttons.component.html',
|
||||
})
|
||||
export class DefaultButtonsComponent {
|
||||
|
||||
buttons = [
|
||||
{
|
||||
status: 'primary',
|
||||
container: 'primary-container',
|
||||
containerTitle: 'Primary Button',
|
||||
title: 'Primary',
|
||||
default: '#7659ff',
|
||||
},
|
||||
{
|
||||
status: 'warning',
|
||||
container: 'warning-container',
|
||||
containerTitle: 'Warning Button',
|
||||
title: 'Warning',
|
||||
default: '#ffcb17',
|
||||
},
|
||||
{
|
||||
status: 'success',
|
||||
container: 'success-container',
|
||||
containerTitle: 'Success Button',
|
||||
title: 'Success',
|
||||
default: '#00d977',
|
||||
},
|
||||
{
|
||||
status: 'info',
|
||||
container: 'info-container',
|
||||
containerTitle: 'Info Button',
|
||||
title: 'Info',
|
||||
default: '#0088ff',
|
||||
},
|
||||
{
|
||||
status: 'danger',
|
||||
container: 'danger-container',
|
||||
containerTitle: 'Danger Button',
|
||||
title: 'Danger',
|
||||
default: '#ff386a',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Hero Buttons</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row">
|
||||
<div class="example-container col-sm-6 col-md-4 col-xl-3 col-xxxl-2" *ngFor="let hb of settings">
|
||||
<div class="container-title">
|
||||
<span>{{ hb.title }}</span>
|
||||
</div>
|
||||
<div class="container-btn">
|
||||
<button class="btn-demo" nbButton hero status="{{ hb.status }}">{{ hb.buttonTitle }}</button>
|
||||
</div>
|
||||
<div class="{{ hb.container }}">
|
||||
<div class="state-container" *ngIf="hb[themeName].border">
|
||||
<div class="state-value border"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Border</span>
|
||||
<span class="subheader">{{ hb[themeName].border }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container" *ngIf="hb[themeName].color">
|
||||
<div class="state-value color"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Color</span>
|
||||
<span class="subheader">{{ hb[themeName].color }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container" *ngIf="hb[themeName].gradientLeft">
|
||||
<div class="state-value gradient"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Linear Gradient</span>
|
||||
<span class="subheader">{{ hb[themeName].gradientLeft }}</span>
|
||||
<span class="subheader">{{ hb[themeName].gradientRight }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container">
|
||||
<div class="state-value bevel" [ngClass]="{ 'none': !hb[themeName].bevel }"></div>
|
||||
<div class="state-details" *ngIf="hb[themeName].bevel">
|
||||
<span class="header">Bevel</span>
|
||||
<span class="subheader">0 3px 0 0</span>
|
||||
<span class="subheader">{{ hb[themeName].bevel }}</span>
|
||||
</div>
|
||||
<div class="state-details" *ngIf="!hb[themeName].bevel">
|
||||
<span class="header">No Bevel</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container">
|
||||
<div class="state-value shadow" [ngClass]="{ 'none': !hb[themeName].shadow }"></div>
|
||||
<div class="state-details" *ngIf="hb[themeName].shadow">
|
||||
<span class="header">Shadow</span>
|
||||
<span class="subheader">0 4px 10px 0</span>
|
||||
<span class="subheader">{{ hb[themeName].shadow }}</span>
|
||||
</div>
|
||||
<div class="state-details" *ngIf="!hb[themeName].shadow">
|
||||
<span class="header">No Shadow</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container">
|
||||
<div class="state-value glow" [ngClass]="{ 'none': !hb[themeName].glow }"></div>
|
||||
<div class="state-details" *ngIf="hb[themeName].glow">
|
||||
<span class="header">Glow</span>
|
||||
<span class="subheader">{{ hb[themeName].glow.params }}</span>
|
||||
<span class="subheader">{{ hb[themeName].glow.color }}</span>
|
||||
</div>
|
||||
<div class="state-details" *ngIf="!hb[themeName].glow">
|
||||
<span class="header">No Glow</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,144 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/buttons';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.none {
|
||||
position: relative;
|
||||
transform: rotate(45deg);
|
||||
|
||||
&::before, &::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background: nb-theme(form-control-border-color);
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 50%;
|
||||
top: 10%;
|
||||
transform: translateX(-50%);
|
||||
width: 1px;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 50%;
|
||||
left: 10%;
|
||||
transform: translateY(-50%);
|
||||
height: 1px;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow: nb-theme(btn-hero-shadow);
|
||||
}
|
||||
|
||||
.primary-container {
|
||||
.color {
|
||||
background-color: nb-theme(color-primary);
|
||||
}
|
||||
.gradient {
|
||||
@include btn-hero-primary-gradient();
|
||||
}
|
||||
.glow {
|
||||
box-shadow: btn-hero-primary-glow();
|
||||
}
|
||||
.bevel {
|
||||
box-shadow: btn-hero-primary-bevel();
|
||||
}
|
||||
}
|
||||
|
||||
.warning-container {
|
||||
.color {
|
||||
background-color: nb-theme(color-warning);
|
||||
}
|
||||
.gradient {
|
||||
@include btn-hero-warning-gradient();
|
||||
}
|
||||
.glow {
|
||||
box-shadow: btn-hero-warning-glow();
|
||||
}
|
||||
.bevel {
|
||||
box-shadow: btn-hero-warning-bevel();
|
||||
}
|
||||
}
|
||||
|
||||
.success-container {
|
||||
.color {
|
||||
background-color: nb-theme(color-success);
|
||||
}
|
||||
.gradient {
|
||||
@include btn-hero-success-gradient();
|
||||
}
|
||||
.glow {
|
||||
box-shadow: btn-hero-success-glow();
|
||||
}
|
||||
.bevel {
|
||||
box-shadow: btn-hero-success-bevel();
|
||||
}
|
||||
}
|
||||
|
||||
.info-container {
|
||||
.color {
|
||||
background-color: nb-theme(color-info);
|
||||
}
|
||||
.gradient {
|
||||
@include btn-hero-info-gradient();
|
||||
}
|
||||
.glow {
|
||||
box-shadow: btn-hero-info-glow();
|
||||
}
|
||||
.bevel {
|
||||
box-shadow: btn-hero-info-bevel();
|
||||
}
|
||||
}
|
||||
|
||||
.danger-container {
|
||||
.color {
|
||||
background-color: nb-theme(color-danger);
|
||||
}
|
||||
.gradient {
|
||||
@include btn-hero-danger-gradient();
|
||||
}
|
||||
.glow {
|
||||
box-shadow: btn-hero-danger-glow();
|
||||
}
|
||||
.bevel {
|
||||
box-shadow: btn-hero-danger-bevel();
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-container {
|
||||
.color {
|
||||
background-color: nb-theme(btn-secondary-bg);
|
||||
}
|
||||
.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();
|
||||
}
|
||||
.bevel {
|
||||
box-shadow: btn-hero-secondary-bevel();
|
||||
}
|
||||
}
|
||||
|
||||
.example-container {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xxl) {
|
||||
.example-container {
|
||||
flex: 0 0 20%;
|
||||
max-width: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,166 +0,0 @@
|
|||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-hero-buttons',
|
||||
styleUrls: ['./hero-buttons.component.scss'],
|
||||
templateUrl: './hero-buttons.component.html',
|
||||
})
|
||||
export class HeroButtonComponent implements OnDestroy {
|
||||
|
||||
themeName = 'default';
|
||||
settings: Array<any>;
|
||||
themeSubscription: Subscription;
|
||||
|
||||
constructor(private themeService: NbThemeService) {
|
||||
this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => {
|
||||
this.themeName = theme.name;
|
||||
this.init(theme.variables);
|
||||
});
|
||||
}
|
||||
|
||||
init(colors: any) {
|
||||
this.settings = [
|
||||
{
|
||||
status: 'primary',
|
||||
container: 'primary-container',
|
||||
title: 'Primary Button',
|
||||
buttonTitle: 'Primary',
|
||||
default: {
|
||||
gradientLeft: `adjust-hue(${colors.primary}, 20deg)`,
|
||||
gradientRight: colors.primary,
|
||||
},
|
||||
corporate: {
|
||||
color: colors.primary,
|
||||
glow: {
|
||||
params: '0 0 20px 0',
|
||||
color: 'rgba (115, 161, 255, 0.5)',
|
||||
},
|
||||
},
|
||||
cosmic: {
|
||||
gradientLeft: `adjust-hue(${colors.primary}, 20deg)`,
|
||||
gradientRight: colors.primary,
|
||||
bevel: `shade(${colors.primary}, 14%)`,
|
||||
shadow: 'rgba (6, 7, 64, 0.5)',
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: `adjust-hue(${colors.primary}, 10deg)`,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
status: 'warning',
|
||||
container: 'warning-container',
|
||||
title: 'Warning Button',
|
||||
buttonTitle: 'Warning',
|
||||
default: {
|
||||
gradientLeft: `adjust-hue(${colors.warning}, 10deg)`,
|
||||
gradientRight: colors.warning,
|
||||
},
|
||||
corporate: {
|
||||
color: colors.warning,
|
||||
glow: {
|
||||
params: '0 0 20px 0',
|
||||
color: 'rgba (256, 163, 107, 0.5)',
|
||||
},
|
||||
},
|
||||
cosmic: {
|
||||
gradientLeft: `adjust-hue(${colors.warning}, 10deg)`,
|
||||
gradientRight: colors.warning,
|
||||
bevel: `shade(${colors.warning}, 14%)`,
|
||||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: `adjust-hue(${colors.warning}, 5deg)`,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
status: 'success',
|
||||
container: 'success-container',
|
||||
title: 'Success Button',
|
||||
buttonTitle: 'Success',
|
||||
default: {
|
||||
gradientLeft: `adjust-hue(${colors.success}, 20deg)`,
|
||||
gradientRight: colors.success,
|
||||
},
|
||||
corporate: {
|
||||
color: colors.success,
|
||||
glow: {
|
||||
params: '0 0 20px 0',
|
||||
color: 'rgba (93, 207, 227, 0.5)',
|
||||
},
|
||||
},
|
||||
cosmic: {
|
||||
gradientLeft: `adjust-hue(${colors.success}, 20deg)`,
|
||||
gradientRight: colors.success,
|
||||
bevel: `shade(${colors.success}, 14%)`,
|
||||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: `adjust-hue(${colors.success}, 10deg)`,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
status: 'info',
|
||||
container: 'info-container',
|
||||
title: 'Info Button',
|
||||
buttonTitle: 'Info',
|
||||
default: {
|
||||
gradientLeft: `adjust-hue(${colors.info}, -10deg)`,
|
||||
gradientRight: colors.info,
|
||||
},
|
||||
corporate: {
|
||||
color: colors.info,
|
||||
glow: {
|
||||
params: '0 0 20px 0',
|
||||
color: 'rgba (186, 127, 236, 0.5)',
|
||||
},
|
||||
},
|
||||
cosmic: {
|
||||
gradientLeft: `adjust-hue(${colors.info}, -10deg)`,
|
||||
gradientRight: colors.info,
|
||||
bevel: `shade(${colors.info}, 14%)`,
|
||||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: `adjust-hue(${colors.info}, -5deg)`,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
status: 'danger',
|
||||
container: 'danger-container',
|
||||
title: 'Danger Button',
|
||||
buttonTitle: 'Danger',
|
||||
default: {
|
||||
gradientLeft: `adjust-hue(${colors.danger}, -20deg)`,
|
||||
gradientRight: colors.danger,
|
||||
},
|
||||
corporate: {
|
||||
color: colors.danger,
|
||||
glow: {
|
||||
params: '0 0 20px 0',
|
||||
color: 'rgba (255, 107, 131, 0.5)',
|
||||
},
|
||||
},
|
||||
cosmic: {
|
||||
gradientLeft: `adjust-hue(${colors.danger}, -20deg)`,
|
||||
gradientRight: colors.danger,
|
||||
bevel: `shade(${colors.danger}, 14%)`,
|
||||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: `adjust-hue(${colors.danger}, -10deg)`,
|
||||
},
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.themeSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-body>
|
||||
<nb-actions size="medium" fullWidth>
|
||||
<nb-action>
|
||||
<i class="nb-pause-outline"></i><span>Pause</span>
|
||||
</nb-action>
|
||||
<nb-action>
|
||||
<i class="nb-list"></i><span>Logs</span>
|
||||
</nb-action>
|
||||
<nb-action>
|
||||
<i class="nb-search"></i><span>Search</span>
|
||||
</nb-action>
|
||||
<nb-action>
|
||||
<i class="nb-gear"></i><span>Setup</span>
|
||||
</nb-action>
|
||||
</nb-actions>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-actions > nb-action {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nb-action {
|
||||
i {
|
||||
color: nb-theme(color-fg);
|
||||
font-size: 2.5rem;
|
||||
@include nb-ltr(margin-right, 1rem);
|
||||
@include nb-rtl(margin-left, 1rem);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
color: nb-theme(actions-fg);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
color: nb-theme(color-fg-heading);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
nb-actions nb-action {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
nb-card-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
nb-action {
|
||||
font-size: 0.75rem;
|
||||
i {
|
||||
font-size: 2rem;
|
||||
@include nb-ltr(margin-right, 0.5rem);
|
||||
@include nb-rtl(margin-left, 0.5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
nb-action i {
|
||||
font-size: 1.75rem;
|
||||
margin: 0;
|
||||
}
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-labeled-actions-group',
|
||||
styleUrls: ['./labeled-actions-group.component.scss'],
|
||||
templateUrl: './labeled-actions-group.component.html',
|
||||
})
|
||||
export class LabeledActionsGroupComponent {
|
||||
}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>
|
||||
<span>Default Buttons</span>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row">
|
||||
<div class="example-container col-md-4" *ngFor="let b of buttons">
|
||||
<div class="container-title">
|
||||
<span>{{ b.containerTitle }}</span>
|
||||
</div>
|
||||
<div class="container-btn">
|
||||
<button nbButton
|
||||
outline
|
||||
status="{{ b.status }}"
|
||||
class="btn-demo">
|
||||
{{ b.title }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="{{ b.container }}">
|
||||
<div class="state-container">
|
||||
<div class="state-value original"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Default</span>
|
||||
<span class="subheader">{{ b.default }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container">
|
||||
<div class="state-value hover"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Hover</span>
|
||||
<span class="subheader">14% white</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container">
|
||||
<div class="state-value active"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Active</span>
|
||||
<span class="subheader">14% black</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/buttons';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
nb-card-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.example-container {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.primary-container {
|
||||
.original {
|
||||
background-color: nb-theme(btn-primary-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-primary-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-primary-active();
|
||||
}
|
||||
}
|
||||
|
||||
.primary-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-primary-bg);
|
||||
}
|
||||
|
||||
.success-container {
|
||||
.original {
|
||||
background-color: nb-theme(btn-success-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-success-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-success-active();
|
||||
}
|
||||
}
|
||||
|
||||
.success-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-success-bg);
|
||||
}
|
||||
|
||||
.warning-container {
|
||||
.original {
|
||||
background-color: nb-theme(btn-warning-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-warning-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-warning-active();
|
||||
}
|
||||
}
|
||||
|
||||
.warning-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-warning-bg);
|
||||
}
|
||||
|
||||
.info-container {
|
||||
.original {
|
||||
background-color: nb-theme(btn-info-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-info-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-info-active();
|
||||
}
|
||||
}
|
||||
|
||||
.info-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-info-bg);
|
||||
}
|
||||
|
||||
.danger-container {
|
||||
.original {
|
||||
background-color: nb-theme(btn-danger-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-danger-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-danger-active();
|
||||
}
|
||||
}
|
||||
|
||||
.danger-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-danger-bg);
|
||||
}
|
||||
|
||||
.secondary-container {
|
||||
.original {
|
||||
border: 2px solid nb-theme(btn-secondary-border);
|
||||
}
|
||||
.hover {
|
||||
@include btn-secondary-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-secondary-active();
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-secondary-border);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xxl) {
|
||||
.example-container {
|
||||
flex: 0 0 20%;
|
||||
max-width: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-outline-buttons',
|
||||
styleUrls: ['./outline-buttons.component.scss'],
|
||||
templateUrl: './outline-buttons.component.html',
|
||||
})
|
||||
export class OutlineButtonsComponent {
|
||||
|
||||
buttons = [
|
||||
{
|
||||
status: 'primary',
|
||||
container: 'primary-container outline',
|
||||
containerTitle: 'Primary Button',
|
||||
title: 'Primary',
|
||||
default: '#7659ff',
|
||||
},
|
||||
{
|
||||
status: 'warning',
|
||||
container: 'warning-container outline',
|
||||
containerTitle: 'Warning Button',
|
||||
title: 'Warning',
|
||||
default: '#ffcb17',
|
||||
},
|
||||
{
|
||||
status: 'success',
|
||||
container: 'success-container outline',
|
||||
containerTitle: 'Success Button',
|
||||
title: 'Success',
|
||||
default: '#00d977',
|
||||
},
|
||||
{
|
||||
status: 'info',
|
||||
container: 'info-container',
|
||||
containerTitle: 'Info Button',
|
||||
title: 'Info',
|
||||
default: '#0088ff',
|
||||
},
|
||||
{
|
||||
status: 'danger',
|
||||
container: 'danger-container outline',
|
||||
containerTitle: 'Danger Button',
|
||||
title: 'Danger',
|
||||
default: '#ff386a',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Button Shapes</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="shape-container">
|
||||
<div class="container-title">
|
||||
<span>Rectangle Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>Border radius:</span>
|
||||
<span>4px</span>
|
||||
</div>
|
||||
<div>
|
||||
<button nbButton shape="rectangle" status="success" class="btn-demo">Rectangle</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="shape-container">
|
||||
<div class="container-title">
|
||||
<span>Semi-round Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>Border radius:</span>
|
||||
<span>12px</span>
|
||||
</div>
|
||||
<div>
|
||||
<button nbButton shape="semi-round" status="success" class="btn-demo">Semi-round</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="shape-container">
|
||||
<div class="container-title">
|
||||
<span>Rounded Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>Border radius:</span>
|
||||
<span>round</span>
|
||||
</div>
|
||||
<div>
|
||||
<button nbButton shape="round" status="success" class="btn-demo">Round</button>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/buttons';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-body {
|
||||
padding: 0 0 29px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.shape-container {
|
||||
margin: 1.25rem 1.25rem 0;
|
||||
}
|
||||
|
||||
.container-title {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.subheader {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.875rem;
|
||||
|
||||
span:nth-child(2) {
|
||||
color: nb-theme(color-fg-heading);
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-shape-buttons',
|
||||
styleUrls: ['./shape-buttons.component.scss'],
|
||||
templateUrl: './shape-buttons.component.html',
|
||||
})
|
||||
export class ShapeButtonsComponent {
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Button Sizes</nb-card-header>
|
||||
|
||||
<nb-card-body>
|
||||
<div class="size-container">
|
||||
<div class="container-title">
|
||||
<span>Large Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>0.875rem 1.75rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button nbButton size="large">Large Button</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 nbButton size="medium">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 nbButton size="small">Small Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="size-container">
|
||||
<div class="container-title">
|
||||
<span>X-Small Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>0.5rem 1.25rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button nbButton size="xsmall">X-Small Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/buttons';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-body {
|
||||
padding: 0 1.25rem 1.25rem 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.container-title {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.size-container {
|
||||
margin: 1.25rem 0 0 1.25rem;
|
||||
}
|
||||
|
||||
.subheader {
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-size-buttons',
|
||||
styleUrls: ['./size-buttons.component.scss'],
|
||||
templateUrl: './size-buttons.component.html',
|
||||
})
|
||||
export class SizeButtonsComponent {
|
||||
}
|
||||
|
|
@ -3,108 +3,83 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Default Inputs</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="input-group">
|
||||
<input type="text" nbInput fullWidth placeholder="Project">
|
||||
</div>
|
||||
<div class="row full-name-inputs">
|
||||
<div class="col-sm-6 input-group">
|
||||
<input type="text" nbInput fullWidth placeholder="Nick">
|
||||
</div>
|
||||
<div class="col-sm-6 input-group">
|
||||
<input type="text" nbInput fullWidth placeholder="Last Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="password" nbInput fullWidth placeholder="Password">
|
||||
</div>
|
||||
<div class="input-group has-person-icon">
|
||||
<input type="text" placeholder="With Icon" class="form-control"/>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" nbInput fullWidth shape="rectangle" placeholder="Rectangle border">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" nbInput fullWidth shape="semi-round" placeholder="Semi-round border">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" nbInput fullWidth shape="round" placeholder="Rounded border">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" nbInput fullWidth placeholder="Disabled input" disabled/>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<textarea rows="5" nbInput fullWidth shape="round" placeholder="Text Area"></textarea>
|
||||
</div>
|
||||
<div class="input-group input-group-sm">
|
||||
<input type="text" nbInput fullWidth fieldSize="small" placeholder="Small Input">
|
||||
</div>
|
||||
<div class="input-group input-group-lg">
|
||||
<input type="text" nbInput fullWidth fieldSize="medium" placeholder="Medium Input">
|
||||
</div>
|
||||
<div class="input-group input-group-lg">
|
||||
<input type="text" nbInput fullWidth fieldSize="large" placeholder="Large Input">
|
||||
<input type="text" nbInput fullWidth placeholder="Project">
|
||||
<div class="full-name-inputs">
|
||||
<input type="text" nbInput fullWidth placeholder="Nick">
|
||||
<input type="text" nbInput fullWidth placeholder="Last Name">
|
||||
</div>
|
||||
<input type="password" nbInput fullWidth placeholder="Password">
|
||||
<input type="text" nbInput fullWidth shape="rectangle" placeholder="Rectangle border">
|
||||
<input type="text" nbInput fullWidth shape="semi-round" placeholder="Semi-round border">
|
||||
<input type="text" nbInput fullWidth shape="round" placeholder="Rounded border">
|
||||
<input type="text" nbInput fullWidth placeholder="Disabled input" disabled/>
|
||||
<textarea rows="5" nbInput fullWidth shape="round" placeholder="Text Area"></textarea>
|
||||
<input type="text" nbInput fullWidth fieldSize="small" placeholder="Small Input">
|
||||
<input type="text" nbInput fullWidth fieldSize="medium" placeholder="Medium Input">
|
||||
<input type="text" nbInput fullWidth fieldSize="large" placeholder="Large Input">
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Select</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-select selected="1">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
</nb-select>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Validation States</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="form-group">
|
||||
<input type="text" nbInput fullWidth status="info" placeholder="Input with Info">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" nbInput fullWidth status="success" placeholder="Input with Warning">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" nbInput fullWidth status="warning" placeholder="Input with Danger">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" nbInput fullWidth status="danger" placeholder="Input with Danger">
|
||||
</div>
|
||||
<div class="form-group validation-checkboxes row">
|
||||
<nb-checkbox status="success" class="col-sm-4">Checkbox with Success</nb-checkbox>
|
||||
<nb-checkbox status="warning" class="col-sm-4">Checkbox with Warning</nb-checkbox>
|
||||
<nb-checkbox status="danger" class="col-sm-4">Checkbox with Danger</nb-checkbox>
|
||||
<input type="text" nbInput fullWidth status="info" placeholder="Input with Info">
|
||||
<input type="text" nbInput fullWidth status="success" placeholder="Warning Input">
|
||||
<input type="text" nbInput fullWidth status="warning" placeholder="Danger Input">
|
||||
<input type="text" nbInput fullWidth status="danger" placeholder="Danger Input">
|
||||
<input type="text" nbInput fullWidth status="primary" placeholder="Input with Primary">
|
||||
<div class="validation-checkboxes">
|
||||
<nb-checkbox status="success">Success Checkbox</nb-checkbox>
|
||||
<nb-checkbox status="warning">Warning Checkbox</nb-checkbox>
|
||||
<nb-checkbox status="danger">Danger Checkbox</nb-checkbox>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Checkboxes & Radios</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row demo-checkboxes-radio">
|
||||
<div class="demo-checkboxes col-sm-4">
|
||||
<nb-checkbox>Checkbox 1</nb-checkbox>
|
||||
<nb-checkbox [value]="true">Checkbox 2</nb-checkbox>
|
||||
</div>
|
||||
<div class="demo-radio col-sm-4">
|
||||
<nb-radio-group [(value)]="radioGroupValue">
|
||||
<nb-radio
|
||||
[value]="'This is value 1'">
|
||||
Radio 1
|
||||
</nb-radio>
|
||||
<nb-radio
|
||||
[value]="'This is value 2'">
|
||||
Radio 2
|
||||
</nb-radio>
|
||||
<nb-radio
|
||||
[value]="'This is value 3'">
|
||||
Radio 3
|
||||
</nb-radio>
|
||||
</nb-radio-group>
|
||||
</div>
|
||||
<div class="demo-disabled-checkbox-radio col-sm-4">
|
||||
<nb-checkbox disabled>Disabled Checkbox</nb-checkbox>
|
||||
<nb-radio-group disabled>
|
||||
<nb-radio
|
||||
[value]="'Disabled Value'">
|
||||
Disabled Radio
|
||||
</nb-radio>
|
||||
</nb-radio-group>
|
||||
</div>
|
||||
<nb-card-body class="checkbox-radio">
|
||||
<div class="demo-items">
|
||||
<nb-checkbox>Checkbox 1</nb-checkbox>
|
||||
<nb-checkbox [value]="true">Checkbox 2</nb-checkbox>
|
||||
</div>
|
||||
<div class="demo-items">
|
||||
<nb-radio-group [(value)]="radioGroupValue">
|
||||
<nb-radio
|
||||
[value]="'This is value 1'">
|
||||
Radio 1
|
||||
</nb-radio>
|
||||
<nb-radio
|
||||
[value]="'This is value 2'">
|
||||
Radio 2
|
||||
</nb-radio>
|
||||
<nb-radio
|
||||
[value]="'This is value 3'">
|
||||
Radio 3
|
||||
</nb-radio>
|
||||
</nb-radio-group>
|
||||
</div>
|
||||
<div class="demo-items">
|
||||
<nb-checkbox disabled>Disabled Checkbox</nb-checkbox>
|
||||
<nb-radio-group disabled>
|
||||
<nb-radio
|
||||
[value]="'Disabled Value'">
|
||||
Disabled Radio
|
||||
</nb-radio>
|
||||
</nb-radio-group>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -1,130 +1,26 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
nb-card-body {
|
||||
overflow: visible;
|
||||
padding-top: 0;
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-body {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.validation-checkboxes {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.custom-control {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-checkboxes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.demo-radio {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.demo-disabled-checkbox-radio {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.demo-checkboxes-radio {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.demo-rating {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.star {
|
||||
font-size: 1.5rem;
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
.filled {
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
// TODO: Replace with the card header styles mixin
|
||||
.rating-header {
|
||||
line-height: 2rem;
|
||||
font-size: 1.25rem;
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.current-rate {
|
||||
font-size: 1.5rem;
|
||||
@include nb-ltr(padding-left, 1rem);
|
||||
@include nb-rtl(padding-right, 1rem);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.full-name-inputs {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.input-group.has-person-icon {
|
||||
position: relative;
|
||||
|
||||
.form-control {
|
||||
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '\F47D';
|
||||
font-family: 'Ionicons';
|
||||
font-size: 2rem;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
left: 1rem;
|
||||
top: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
min-width: 7rem;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
padding: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
ngb-rating {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
ngb-rating i {
|
||||
color: nb-theme(color-success);
|
||||
@include nb-for-theme(cosmic) {
|
||||
color: nb-theme(color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
button:not(.btn-icon) {
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
> * {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.full-name-inputs,
|
||||
.validation-checkboxes {
|
||||
display: flex;
|
||||
margin: 0 -0.5rem;
|
||||
|
||||
> * {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-radio {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.demo-items {
|
||||
flex: 1 0 33%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,13 +4,10 @@
|
|||
<nb-card-header>Inline form</nb-card-header>
|
||||
<nb-card-body>
|
||||
<form class="form-inline">
|
||||
<input type="text" class="form-control full-width" placeholder="Jane Doe">
|
||||
<div class="input-group full-width">
|
||||
<div class="input-group-addon">@</div>
|
||||
<input type="text" class="form-control" placeholder="Email">
|
||||
</div>
|
||||
<input type="text" nbInput fullWidth placeholder="Jane Doe">
|
||||
<input type="text" nbInput fullWidth placeholder="Email">
|
||||
<nb-checkbox>Remember me</nb-checkbox>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
<button type="submit" nbButton status="primary">Submit</button>
|
||||
</form>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -24,46 +21,30 @@
|
|||
<nb-card-body>
|
||||
<form>
|
||||
<div class="form-group row">
|
||||
<label for="inputEmail1" class="col-sm-3 col-form-label">Email</label>
|
||||
<label for="inputEmail1" class="label col-sm-3 col-form-label">Email</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
|
||||
<input type="email" nbInput fullWidth id="inputEmail1" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputPassword2" class="col-sm-3 col-form-label">Password</label>
|
||||
<label for="inputPassword2" class="label col-sm-3 col-form-label">Password</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
|
||||
<input type="password" nbInput fullWidth id="inputPassword2" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-3">Radios</label>
|
||||
<label class="col-sm-3 label">Radios</label>
|
||||
<div class="col-sm-9">
|
||||
<div class="form-check">
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="gridRadios" checked>
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Option one is this and that—be sure to include why it's great</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="gridRadios">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Option two can be something else and selecting it will deselect option one</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check disabled">
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="gridRadios" disabled>
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Option three is disabled</span>
|
||||
</label>
|
||||
</div>
|
||||
<nb-radio-group>
|
||||
<nb-radio>Option 1</nb-radio>
|
||||
<nb-radio>Option 2</nb-radio>
|
||||
<nb-radio disabled>Disabled Option</nb-radio>
|
||||
</nb-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="offset-sm-3 col-sm-9">
|
||||
<button type="submit" class="btn btn-primary">Sign in</button>
|
||||
<button type="submit" nbButton status="primary">Sign in</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -75,15 +56,15 @@
|
|||
<nb-card-body>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Recipients">
|
||||
<input type="text" nbInput fullWidth placeholder="Recipients">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Subject">
|
||||
<input type="text" nbInput fullWidth placeholder="Subject">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="form-control" placeholder="Message"></textarea>
|
||||
<textarea nbInput placeholder="Message"></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-success">Send</button>
|
||||
<button type="submit" nbButton status="success">Send</button>
|
||||
</form>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -95,17 +76,17 @@
|
|||
<nb-card-body>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="exampleInputEmail1">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
|
||||
<label for="exampleInputEmail1" class="label">Email address</label>
|
||||
<input type="email" nbInput fullWidth id="exampleInputEmail1" placeholder="Email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleInputPassword1">Password</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
|
||||
<label for="exampleInputPassword1" class="label">Password</label>
|
||||
<input type="password" nbInput fullWidth id="exampleInputPassword1" placeholder="Password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<nb-checkbox>Check me out</nb-checkbox>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-danger">Submit</button>
|
||||
<button type="submit" nbButton status="danger">Submit</button>
|
||||
</form>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -116,32 +97,32 @@
|
|||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label for="inputFirstName">First Name</label>
|
||||
<input type="text" class="form-control" id="inputFirstName" placeholder="First Name">
|
||||
<label for="inputFirstName" class="label">First Name</label>
|
||||
<input type="text" nbInput fullWidth id="inputFirstName" placeholder="First Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label for="inputLastName">Last Name</label>
|
||||
<input type="text" class="form-control" id="inputLastName" placeholder="Last Name">
|
||||
<label for="inputLastName" class="label">Last Name</label>
|
||||
<input type="text" nbInput fullWidth id="inputLastName" placeholder="Last Name">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label for="inputEmail">Email</label>
|
||||
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
|
||||
<label for="inputEmail" class="label">Email</label>
|
||||
<input type="email" nbInput fullWidth id="inputEmail" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label for="inputWebsite">Website</label>
|
||||
<input type="text" class="form-control" id="inputWebsite" placeholder="Website">
|
||||
<label for="inputWebsite" class="label">Website</label>
|
||||
<input type="text" nbInput fullWidth id="inputWebsite" placeholder="Website">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
<button type="submit" nbButton>Submit</button>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
|
@ -154,15 +135,15 @@
|
|||
<nb-card-body>
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<label for="inputEmail3" class="col-sm-3 form-control-label">Email</label>
|
||||
<label for="inputEmail3" class="label col-sm-3 form-control-label">Email</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
|
||||
<input type="email" nbInput fullWidth id="inputEmail3" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputPassword3" class="col-sm-3 form-control-label">Password</label>
|
||||
<label for="inputPassword3" class="label col-sm-3 form-control-label">Password</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
|
||||
<input type="password" nbInput fullWidth id="inputPassword3" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
|
|
@ -174,7 +155,7 @@
|
|||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="offset-sm-3 col-sm-9">
|
||||
<button type="submit" class="btn btn-warning">Sign in</button>
|
||||
<button type="submit" nbButton status="warning">Sign in</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,15 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
.full-width {
|
||||
flex: 1;
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
nb-checkbox {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-inline > * {
|
||||
@include nb-ltr(margin, 0 1.5rem 1.5rem 0);
|
||||
@include nb-rtl(margin, 0 0 1.5rem 1.5rem);
|
||||
}
|
||||
|
||||
nb-card.inline-form-card nb-card-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
nb-checkbox {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-inline [fullWidth] {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.form-inline > * {
|
||||
margin: 0 1.5rem 1.5rem 0;
|
||||
}
|
||||
|
||||
nb-card.inline-form-card nb-card-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
import { FormsComponent } from './forms.component';
|
||||
import { FormInputsComponent } from './form-inputs/form-inputs.component';
|
||||
|
|
@ -7,32 +7,34 @@ import { FormLayoutsComponent } from './form-layouts/form-layouts.component';
|
|||
import { DatepickerComponent } from './datepicker/datepicker.component';
|
||||
import { ButtonsComponent } from './buttons/buttons.component';
|
||||
|
||||
const routes: Routes = [{
|
||||
path: '',
|
||||
component: FormsComponent,
|
||||
children: [
|
||||
{
|
||||
path: 'inputs',
|
||||
component: FormInputsComponent,
|
||||
},
|
||||
{
|
||||
path: 'layouts',
|
||||
component: FormLayoutsComponent,
|
||||
},
|
||||
{
|
||||
path: 'layouts',
|
||||
component: FormLayoutsComponent,
|
||||
},
|
||||
{
|
||||
path: 'buttons',
|
||||
component: ButtonsComponent,
|
||||
},
|
||||
{
|
||||
path: 'datepicker',
|
||||
component: DatepickerComponent,
|
||||
},
|
||||
],
|
||||
}];
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: FormsComponent,
|
||||
children: [
|
||||
{
|
||||
path: 'inputs',
|
||||
component: FormInputsComponent,
|
||||
},
|
||||
{
|
||||
path: 'layouts',
|
||||
component: FormLayoutsComponent,
|
||||
},
|
||||
{
|
||||
path: 'layouts',
|
||||
component: FormLayoutsComponent,
|
||||
},
|
||||
{
|
||||
path: 'buttons',
|
||||
component: ButtonsComponent,
|
||||
},
|
||||
{
|
||||
path: 'datepicker',
|
||||
component: DatepickerComponent,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
@ -43,12 +45,5 @@ const routes: Routes = [{
|
|||
],
|
||||
})
|
||||
export class FormsRoutingModule {
|
||||
|
||||
}
|
||||
|
||||
export const routedComponents = [
|
||||
FormsComponent,
|
||||
FormInputsComponent,
|
||||
FormLayoutsComponent,
|
||||
DatepickerComponent,
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,17 +1,45 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import {
|
||||
NbActionsModule,
|
||||
NbButtonModule,
|
||||
NbCardModule,
|
||||
NbCheckboxModule,
|
||||
NbDatepickerModule, NbIconModule,
|
||||
NbInputModule,
|
||||
NbRadioModule,
|
||||
NbSelectModule,
|
||||
NbUserModule,
|
||||
} from '@nebular/theme';
|
||||
|
||||
import { ThemeModule } from '../../@theme/theme.module';
|
||||
import { FormsRoutingModule, routedComponents } from './forms-routing.module';
|
||||
import { ButtonsModule } from './buttons/buttons.module';
|
||||
import { FormsRoutingModule } from './forms-routing.module';
|
||||
import { FormsComponent } from './forms.component';
|
||||
import { FormInputsComponent } from './form-inputs/form-inputs.component';
|
||||
import { FormLayoutsComponent } from './form-layouts/form-layouts.component';
|
||||
import { DatepickerComponent } from './datepicker/datepicker.component';
|
||||
import { ButtonsComponent } from './buttons/buttons.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
ThemeModule,
|
||||
NbInputModule,
|
||||
NbCardModule,
|
||||
NbButtonModule,
|
||||
NbActionsModule,
|
||||
NbUserModule,
|
||||
NbCheckboxModule,
|
||||
NbRadioModule,
|
||||
NbDatepickerModule,
|
||||
FormsRoutingModule,
|
||||
ButtonsModule,
|
||||
NbSelectModule,
|
||||
NbIconModule,
|
||||
],
|
||||
declarations: [
|
||||
...routedComponents,
|
||||
FormsComponent,
|
||||
ButtonsComponent,
|
||||
FormInputsComponent,
|
||||
FormLayoutsComponent,
|
||||
DatepickerComponent,
|
||||
],
|
||||
})
|
||||
export class FormsModule { }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue